parts_shop_ui_LT/pages/views/stock/index.vue

<template>
	<view class="bg-set" :class="mask ? 'tl-show': ''">
		<u-navbar :autoBack="true" :placeholder="true" leftIconColor="#fff" bgColor="#FD4B09">
			<view slot="center" style="width: 88%;margin-left: 80rpx;">
				<u-search v-model="form.cname" placeholder="请输入商品名称" :actionStyle="{color:'#fff'}" @custom="custom"
					@search="custom"></u-search>
			</view>
		</u-navbar>
		<view class="topBackground" :style="{top: revenueTop+44+'px'}" style="overflow:hidden">
			<u-tabs :list="list" @click="click" :activeStyle="{ color: '#fff' }" :inactiveStyle="{ color: '#ffffff80' }"
				lineColor="#fff">
				<view slot="right" style="font-size: 15px;color: #fff;">
					<text style="margin-left: 10rpx;">|<text style="margin:0rpx 15rpx"
							@click="show = true,mask = true">筛选</text></text>
				</view>
			</u-tabs>
			<view class="tabClass">
				<u-tag style="margin: 0 20rpx 10rpx 20rpx;" plain :text="formTwo.storageName" closable
					:show="formTwo.storageName!=null" @close="tabClose(1)"></u-tag>
			</view>
			<view class="recentSearches" v-show="recentSearches.length != 0">
				<view class="recentSearches-head">
					<view class="recentSearches-headLeft">
						<u-icon name="clock"></u-icon>
						<view style="font-size: 26rpx;margin-left: 6rpx;">最近搜索</view>
					</view>
					<view class="recentSearches-headRight">
						<u-icon name="trash" size="20px" @click="searchDeleteShow = true"></u-icon>
					</view>
				</view>
				<view class="recentSearches-text">
					<u-tag v-for="(item,index) in recentSearches" :key="index" :text="item" bgColor="#e7e7e7"
						color="#000" borderColor="#e7e7e7" size="medium" closable @close="tagClose(index,item)"
						@click="tagSearches(item)"></u-tag>
				</view>
			</view>
		</view>
		<!-- <view class="statistics_h" style="font-size: 44rpx;">
			<view class="statistics">
				<view style="display: flex;margin: 5rpx auto;">
					<view style="width: 60%;text-align: center;">价格</view>
					<view style="width: 40%;text-align: center;">数量</view>
				</view>
				<view style="display: flex;margin: 5rpx auto;">
					<view style="width: 60%;">库存总价:￥{{priceForm.totalPrice}}</view>
					<view style="width: 40%;text-align: center;">
						{{priceForm.totalNumber?priceForm.totalNumber.slice(0,priceForm.totalNumber.length-3):priceForm.totalNumber}}
					</view>
				</view>
				<view style="display: flex;margin: 5rpx auto;">
					<view style="width: 60%;">当期入库:￥{{priceForm.RKPrice}}</view>
					<view style="width: 40%;text-align: center;">
						{{priceForm.RKNumber?priceForm.RKNumber.slice(0,priceForm.RKNumber.length-3):priceForm.RKNumber}}
					</view>
				</view>
				<view style="display: flex;margin: 5rpx auto;">
					<view style="width: 60%;">当期出库:￥{{priceForm.CKPrice}}</view>
					<view style="width: 40%;text-align: center;">
						{{priceForm.CKNumber?priceForm.CKNumber.slice(0,priceForm.CKNumber.length-3):priceForm.CKNumber}}
					</view>
				</view>
			</view>
		</view> -->
		<view style="margin: 0rpx auto;width: 96%;" :style="{'margin-top': (50+viewHeght)+'px'}">
			<view v-for="(item,index) in dataList" :key="item.id" style="width: 100%;margin: 10rpx auto; padding: 20rpx 0;
				background-color: #fff;border-radius: 10rpx;">
				<view style="width: 100%;margin: 0 auto;">
					<view style="display: flex;height: 180rpx;">
						<view style="width: 140rpx;height: 170rpx;">
							<image style="width: 100%;height: 100%;"
								:src="(item.goodsFilesList!=null&&item.goodsFilesList.length!=0)?item.goodsFilesList[0].url:'../../../static/images/404.png'">
							</image>
						</view>
						<view style="font-size: 24rpx;width: calc(100% - 150rpx);margin-left: 10rpx;">
							<view style="font-size: 26rpx;font-weight: bold;">{{item.cname}}</view>
							<view style="display: flex;margin: 10rpx 0;">
								<view style="width: 50%;">
									均价:{{roleaName.indexOf('业务员') != -1?'***':item.inventoryCostPrice}}</view>
								<view style="width: 50%;">批次:{{item.dot}}</view>
							</view>
							<view style="display: flex">
								<view style="width: 50%;">仓库:{{item.storageName}}</view>
								<view style="width: 50%;">
									库存:{{item.balanceQuantity?item.balanceQuantity:0}}
								</view>
							</view>
							<view style="display: flex">
								<view style="width: 50%;">售价A:{{item.priceOne}}</view>
								<view style="width: 50%;">售价B:{{item.priceTwo}}</view>
							</view>
							<view style="display: flex">
								<view style="width: 50%;">售价C:{{item.priceThree}}</view>
								<view style="width: 50%;">售价D:{{item.priceFour}} </view>
							</view>
							<!-- <view style="display: flex">
								<view style="width: 50%;">
									库存下限:{{item.lowerLimit?item.lowerLimit.slice(0,item.lowerLimit.length-3):item.lowerLimit}}
								</view>
								<view style="width: 50%;">
									产品分类:{{item.goodsType}}
								</view>
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<u-empty v-if="total == 0" style="position: absolute;top: 45%;left: 50%;transform:translate(-50%,-50%)"
				mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
			<u-loadmore v-if="total !== 0 && dataList.length != 0" :status="status" />
		</view>
		<u-popup :show="show" @close="show = false,mask = false" closeable :closeOnClickOverlay="false" zIndex="10070">
			<view style="mawidth: 100%;margin: auto 30rpx;margin-top: 20rpx;padding-bottom: 20rpx;">
				<text>筛选条件</text>
				<u--form labelPosition="left" :model="formTwo" labelWidth="150rpx">
					<u-form-item label="仓库" borderBottom :labelWidth='66'>
						<u-input readonly v-model="formTwo.storageName" placeholder="请选择仓库" border="none"
							@click.native='typeShow=true'></u-input>
						<u-icon slot="right" name="arrow-right" @click="typeShow=true"></u-icon>
					</u-form-item>
				</u--form>
				<!-- 				<text style="font-size: 30rpx;">库存筛选</text>
				<view style="display: flex;justify-content: space-between;">
					<u-button :type="formTwo.inventoryBalance == 0?'primary':''" text="库存数量＞0" @click="stock(0)">
					</u-button>
					<u-button :type="formTwo.inventoryBalance == 1?'primary':''" text="库存数量≤0" @click="stock(1)">
					</u-button>
				</view>
				<text style="font-size: 30rpx;">标签筛选</text>
				<view>
					<u-checkbox-group v-model="formTwo.labels" placement="column">
						<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList"
							:key="index" :label="item.dictValue" :name="item.dictKey">
						</u-checkbox>
					</u-checkbox-group>
				</view> -->
				<view style="display: flex;justify-content: space-between;padding-top: 20rpx;">
					<view style="width: 45%;">
						<u-button text="全部清空" type="warning" @click="confirmEmptying"></u-button>
					</view>
					<view style="width: 45%;">
						<u-button text="确认搜索" type="primary" @click="confirmSearch"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal :show="searchDeleteShow" content="确认删除搜索记录吗？" showCancelButton @confirm="searchDeletefun"
			@cancel="searchDeleteShow = false" ref="uModal" :asyncClose="true">
		</u-modal>
		<u-picker :show="typeShow" :columns="customerList" @close='typeShow=false' @cancel='typeShow=false'
			keyName="cname" @confirm='typeConfirm' maxRange='无限制' closeOnClickOverlay></u-picker>
		<!-- 	<u-picker :show="dropDown" :columns="columns" :keyName="keyName" @cancel="dropDown = false" @confirm="confirm">
		</u-picker> -->
	</view>
</template>

<script>
	import {
		queryBrand,
		queryStock,
		appStatistics,
		listAll
	} from '@/api/views/stock/index.js'
	import {
		storageDescListAll
	} from '@/api/OutboundTask/index.js'
	export default {
		data() {
			return {
				list: [{
					name: '全部',
					value: ''
				}],
				recentSearches: [], // 搜索数据
				searchDeleteShow: false, // 搜索全部删除弹窗
				customerList: [],
				typeShow: false,
				show: false,
				mask: false,
				dropDown: false,
				columns: [],
				checkboxList: [],
				name: '',
				status: 'loadmore',
				revenueTop: 0,
				keyName: '',
				total: 0,
				dataList: [],
				screen: [],
				priceForm: {},
				form: {
					size: 20,
					current: 1,
					cname: null
				},
				formTwo: {
					size: 20,
					current: 1,
					storageName: null,
					cname: null
				},
				roleaName: '', // 当前角色数据
				viewHeght: 0
			}
		},
		onLoad() {
			if (uni.getStorageSync('recentSearches')) {
				this.recentSearches = uni.getStorageSync('recentSearches');
			}
			this.roleaName = uni.getStorageSync('userInfo').role_name
			this.formTwo = uni.getStorageSync('stockForm') ? uni.getStorageSync('stockForm') : this.formTwo
			this.form = uni.getStorageSync('stockForm') ? uni.getStorageSync('stockForm') : this.form
			this.form.cname = null
			this.formTwo.cname = null
			this.$u.api.getWorkDicts('goods_lable').then(res => {
				this.checkboxList = res.data
				this.keyName = "dictValue"
			})
			// 获取分类
			listAll({
				corpType: 'SP'
			}).then(res => {
				res.data.forEach(item => this.list.push({
					name: item.title,
					value: item.id
				}))
				this.queryStockfun()
			})
			uni.getSystemInfo({
				success: (e) => {
					this.revenueTop = e.statusBarHeight
				}
			})
			storageDescListAll().then(res => {
				this.customerList = [res.data]
			})
		},
		onReachBottom() {
			this.status = 'loading'
			if (this.dataList.length < this.total) {
				this.form.current++
				this.queryStockfun()
			} else {
				this.status = 'nomore'
			}
		},
		methods: {
			// 搜索全部删除
			searchDeletefun() {
				this.recentSearches = []
				uni.setStorageSync('recentSearches', this.recentSearches);
				this.searchDeleteShow = false
				this.form.cname = null
				// this.custom()
				setTimeout(() => {
					this.getViewHeight()
				}, 100)
			},
			// 点击搜索
			tagSearches(name) {
				this.form.cname = name
				this.formTwo.cname = name
				this.custom()
			},
			tagClose(index, item) {
				this.recentSearches.splice(index, 1)
				uni.setStorageSync('recentSearches', this.recentSearches);
				if (this.form.cname == item) {
					this.form.cname = null
				}
				setTimeout(() => {
					this.getViewHeight()
				}, 100)
			},
			getViewHeight() {
				uni.createSelectorQuery().select('.tabClass', ).boundingClientRect(data => {
					this.viewHeght = data.height
				}).exec();
				uni.createSelectorQuery().select('.recentSearches', ).boundingClientRect(data => {
					this.viewHeght += data.height
				}).exec();
			},
			tabClose(type) {
				if (type == 1) {
					this.formTwo.storageName = null
				}
				uni.setStorageSync('stockForm', this.formTwo);
				this.confirmSearch()
			},
			typeConfirm(e) {
				this.formTwo.storageName = e.value[0].cname
				uni.setStorageSync('stockForm', this.formTwo);
				this.typeShow = false
			},
			confirmEmptying() {
				this.formTwo = {
					size: 20,
					current: 1,
					storageName: null,
					cname: null
				}
				this.form = {
					size: 20,
					current: 1,
					cname: null
				}
				this.dataList = []
				this.show = false
				this.mask = false
				this.queryStockfun()
			},
			confirmSearch() {
				let form = {
					...JSON.parse(JSON.stringify(this.formTwo)),
					labels: this.formTwo.labels ? this.formTwo.labels.join(',') : '',
					size: 20,
					current: 1
				}
				this.form = form
				this.dataList = []
				this.show = false
				this.mask = false
				this.queryStockfun()
			},
			stock(val) {
				this.$set(this.formTwo, "inventoryBalance", val)
			},
			//集合筛选条件
			filterAll(screen) {
				this.screen = screen
				switch (screen[1]) {
					case "goodsTypeId":
						uni.showLoading({
							title: '加载中',
							mask: true
						});
						listAll().then(res => {
							this.columns = [res.data]
							this.keyName = "cname"
							this.dropDown = true
							uni.hideLoading()
						})
						break;
				}
			},
			//选择确认
			confirm(e) {
				this.formTwo[this.screen[0]] = e.value[0].cname
				this.formTwo[this.screen[1]] = e.value[0].id
				this.dropDown = false
			},
			queryStockfun() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				/*				appStatistics(this.form).then(res => {
									this.priceForm = res.data
								})*/
				queryStock(this.form).then(res => {
					this.total = res.data.total || 0
					if (res.data.records) {
						console.log(res.data.records)
						this.dataList = this.dataList.concat(res.data.records)
					}
					uni.hideLoading();
					if (this.total < 10) {
						this.status = 'nomore'
					}
					this.getViewHeight()
				})
			},
			custom(e) {
				if (this.form.cname) {
					this.recentSearches.unshift(this.form.cname)
					// 去重
					this.recentSearches = this.recentSearches.filter((item, index) => this.recentSearches.indexOf(item) ===
						index);
					uni.setStorageSync('recentSearches', this.recentSearches);
				}
				// this.form.cname=this.name
				// this.formTwo.cname=this.name
				this.dataList = []
				this.form.current = 1
				this.queryStockfun()
			},
			click(item) {
				this.dataList = []
				this.form.current = 1
				this.form.goodsTypeId = item.value,
					this.queryStockfun()
			}
		}
	}
</script>

<style scoped>
	.tl-show {
		overflow: hidden;
		position: fixed;
		height: 100%;
		width: 100%;
	}

	.topBackground {
		position: fixed;
		top: 0;
		z-index: 1;
		width: 100%;
		background-color: #FF6F3B;
	}

	.statistics_h {
		position: fixed;
		top: calc(88px + var(--status-bar-height));
		z-index: 1;
		width: 100%;
		background-color: #fff;
		padding-top: 10rpx;
	}

	.content {
		margin-top: 355rpx !important;
	}

	.statistics {
		width: calc(96% - 20rpx);
		margin: 0 auto;
		background: url("../../../static/images/bg.png") no-repeat;
		background-size: 100% 100%;
		border-radius: 20rpx;
		color: #fff;
		/* padding: 10rpx; */
		padding: 10rpx 0rpx 10rpx 10rpx;
		font-size: 38rpx;
	}

	/* ::v-deep .u-line {
		border-bottom: 4rpx dashed #B6B6B6 !important;
	} */

	::v-deep .u-divider {
		margin: 10rpx;
	}

	::v-deep .u-album__row__wrapper>uni-image {
		border-radius: 10rpx;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	::v-deep .u-navbar__content {
		background-image: linear-gradient(to bottom, #FD4B09, #FF6F3B);
	}

	.tabClass {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		background-color: #fff;
	}

	.recentSearches {
		padding: 10rpx 20rpx;
		background-color: #f2f2f2;
	}

	.recentSearches-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.recentSearches-headLeft {
		display: flex;
		align-items: center;
	}
	.recentSearches-text {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
	}
	.recentSearches-textWidth {
		// width: 140rpx;
	}
</style>