TuBaoSoft-Ui-Zd/pages/home/inventoryQuery/index.vue

<template>
	<view>
		<view class="condition">
			<view class="conditionone">
				<view :style="{'border-bottom':(underline =='0'?'3rpx solid #fff':'none')}" @click="screen(0)">全部</view>
				<view :style="{'border-bottom':(underline =='1'?'3rpx solid #fff':'none')}" @click="screen(1)">仓库</view>
				<view :style="{'border-bottom':(underline =='2'?'3rpx solid #fff':'none')}" @click="screen(2)">商品</view>
				<view :style="{'border-bottom':(underline =='3'?'3rpx solid #fff':'none')}" @click="screen(3)">入库日期</view>
				<view :style="{'border-bottom':(underline =='4'?'3rpx solid #fff':'none')}" @click="screen(4)">筛选</view>
			</view>
		</view>
		<view class="search">
			<u-search shape="round" placeholder="请输入提单号" @custom="custom" @search="custom" :clearabled="false">
			</u-search>
		</view>
		<view class="ordertop" v-for="(item, index) in lisi" :key="index">
			<view>
				<view class="iconblue"></view>
				<text class="license">提单号：{{item.fMblno}}</text>
				<view class="various" @click="viewDetails(item)">{{item.fOriginalbilldate}}</view>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view class="basic">
				<view>客户</view>
				<view>{{item.fCorpid}}</view>
			</view>
			<view class="basic">
				<view>品名\属性详情</view>
				<view>{{item.fGoodsids}}\{{item.fMarks}}</view>
			</view>
			<view class="basic">
				<view>仓库</view>
				<view>{{item.fWarehouseids}}</view>
			</view>
			<view class="basic">
				<view>结余件数\毛重(吨)\尺</view>
				<view>{{item.fQtyblc}}\{{item.fGrossweightblc}}\{{item.fVolumnblc}}</view>
			</view>
			<view class="basic">
				<view>入库件数\毛重(吨)\尺</view>
				<view>{{item.fQtyD}}\{{item.fGrossweightD}}\{{item.fVolumnD}}</view>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view class="view" @click="viewDetails(item)">
				<view>
					<text>查看入出库照片</text>
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		<u-picker v-model="show" z-index="10076" mode="selector" :range="list" range-key="fName" @confirm="confirm"></u-picker>
		<u-calendar v-model="calendar" z-index="10076" mode="range" @change="change"></u-calendar>
		<u-popup v-model="screenOpen" @close="closeScreen" mode="bottom" length="60%" border-radius="40" :closeable="true">
			<view>
				<view style="text-align: center;height: 100rpx;line-height: 100rpx;">
					<text style="font-weight: bold;font-size: 32rpx;">全部筛选</text>
				</view>
				<view style="width: 96%;margin: 0 auto;">
					<!-- <text style="font-size: 32rpx;" v-if="deptName != '外部用户'">货主</text> -->
					<u-field style="padding: 10px 0px;" v-model="fCorpid.label" v-if="deptName != '外部用户'" label="货主名称:" placeholder="请选择货主名称" disabled @click="client = true"/>
					<!-- <text style="font-size: 32rpx;">发货方</text> -->
					<u-field style="padding: 10px 0px;" v-model="fShipper" label="发货单位:" placeholder="请输入发货单位"/>
					<!-- <text style="font-size: 32rpx;">入库日期</text> -->
					<u-field style="padding: 10px 0px;" v-model="entryDate" label="入库日期:" placeholder="请选择入库日期" disabled @click="calendar = true"/>
					<!-- <text style="font-size: 32rpx;">货物名称</text> -->
					<u-field
							style="margin: 20rpx auto;padding: 10px 0px;"
							v-model="fGoodsName"
							label="货物名称:"
							placeholder="请选择货物名称"
							disabled
							@click="show = true;list = commodity;screenType =1"
							/>
					<!-- <text style="font-size: 32rpx;">仓库名称</text> -->
					<u-field
							style="margin: 20rpx auto;padding: 10px 0px;"
							v-model="warehouseName"
							label="仓库名称:"
							placeholder="请选择仓库"
							disabled
							@click="show = true;list = warehouse;screenType = 0"
							/>
					<view style="width: 100%;height: 120rpx;"></view>
					<view
						style="width: 100%;position:fixed; bottom:0;background-color: #FFFFFF;padding-left: 20px;padding-right: 20px;padding-bottom: 30rpx;z-index: 9999;">
						<u-button type="warning" @click="confirmReset" size="medium" style="float: left;">确认重置</u-button>
						<u-button type="primary" @click="confirmCompletion" size="medium" style="float: right;">确认完成</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-select v-model="client" :list="clientList" @confirm="confirmClient" @cancel="client = false"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				screenOpen:false,
				client:false,
				clientList:[],
				fCorpid:{
					value: '',
					label: ''
				},
				warehouseName:'',
				fShipper:'',
				warehouseId:'',
				fGoodsid:'',
				fGoodsName:'',
				screenType:0,
				entryDate:'',
				underline: '0',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				show: false,
				calendar: false,
				deptName:'',
				total: 0,
				iconType: 'flower',
				status: 'loadmore',
				form: {
					pageNum: 1,
					pageSize: 10
				},
				lisi: [],
				list: [],
				warehouse: [],
				commodity: []
			}
		},
		created() {
			this.deptName = uni.getStorageSync('deptName')
			this.query()
			this.$u.get('/basicdata/warehouse/appList', {
				fStatus: 0,
				delFlag: 0
			}).then(res => {
				console.log(res)
				this.warehouse = res.rows
				// res.rows.forEach((item, index) => {
				// 	this.warehouse.push({
				// 		id: item.fId,
				// 		text: item.fName
				// 	})
				// })
			})
			this.$u.get('/basicdata/goods/list', {
				fStatus: 0,
				delFlag: 0
			}).then(res => {
				console.log(res)
				this.commodity = res.rows
				// res.rows.forEach((item, index) => {
				// 	this.commodity.push({
				// 		id: item.fId,
				// 		text: item.fName
				// 	})
				// })
			})
		},
		onReachBottom() {
			this.status = 'loading'
			if (this.lisi.length < this.total) {
				this.form.pageNum++
				this.query()
			} else {
				this.status = 'nomore'
			}
		},
		onShow() {
			this.clientList = []
			this.$u.get('/basicdata/corps/list').then(res=>{
				for(let item in res.rows){
					this.clientList.push({
						value: res.rows[item].fId,
						label: res.rows[item].fName
					})
				}
			})
		},
		methods: {
			confirmReset(){
				this.warehouseName = ''
				this.fGoodsName = ''
				this.entryDate = ''
				this.fShipper = ''
				this.fCorpid = {
					value: '',
					label: ''
				}
			},
			//确认货主
			confirmClient(e){
				this.fCorpid.value = e[0].value
				this.fCorpid.label = e[0].label
			},
			// 确认完成
			confirmCompletion(){
				this.form = {
					pageNum: 1,
					pageSize: 10,
					fShipper:this.fShipper,
				}
				if(this.warehouseId) this.form.fWarehouseid = this.warehouseId
				if(this.fGoodsid) this.form.fGoodsid = this.fGoodsid
				if(this.entryDate) this.form.orgStorageDate = this.entryDate.split(',')
				
				if(this.entryDate){
					this.form.orgStorageDate = [this.form.orgStorageDate[0] + ' ' + '00:00:00', this.form.orgStorageDate[1] + ' ' + '23:59:59']
				}else{
					delete this.form.orgStorageDate
				}
				if(this.fCorpid.value) this.form.fCorpid = this.fCorpid.value
				this.screenOpen = false
				this.lisi = []
				this.query()
			},
			//弹出框收起触发
			closeScreen(){
				this.screenOpen = false
			},
			//日期区间确定
			change(e) {
				console.log(e)
				if(this.screenOpen == true){
					this.entryDate = e.startDate+','+e.endDate
				}else{
					this.lisi = []
					this.form = {
						orgStorageDate: e.startDate + ' 00:00:00,' + e.endDate + ' 23:59:59',
						pageNum: 1,
						pageSize: 10
					}
					this.query()
				}
			},
			//确定
			confirm(index) {
				console.log(this.underline)
				if(this.screenOpen == true){
					if(this.screenType == 0){
						this.warehouseName = this.warehouse[index].fName
						this.warehouseId = this.warehouse[index].fId
					}else{
						this.fGoodsName = this.commodity[index].fName
						this.fGoodsId = this.commodity[index].fId
					}
					return
				}else{
					if (this.underline == 1) {
						this.form = {
							fWarehouseid: this.warehouse[index].fId,
							pageNum: 1,
							pageSize: 10
						}
					} else if (this.underline == 2) {
						this.form = {
							fGoodsid: this.commodity[index].fId,
							pageNum: 1,
							pageSize: 10
						}
					}
				}
				this.lisi = []
				this.query()
			},
			//全部
			screen(index) {
				this.underline = index
				if (index == 0) {
					this.form = {
						pageNum: 1,
						pageSize: 10
					}
					this.query()
				} else if (index == 1) {
					this.show = true
					this.list = this.warehouse
				} else if (index == 2) {
					this.show = true
					this.list = this.commodity
				} else if (index == 3) {
					this.calendar = !this.calendar
				}else if(index == 4){
					this.screenOpen = true
				}
			},
			custom(text) {
				console.log(text)
				this.form = {
					fMblno: text,
					pageNum: 1,
					pageSize: 10
				}
				this.lisi = []
				this.query()
			},
			viewDetails(item) {
				console.log(item)
				uni.navigateTo({
					url: './inventoryDetails?item=' + JSON.stringify(item)
				});
			},
			query() {
				this.$u.get('/warehouseBusiness/whgenleg/appWhGenLegList', this.form).then(res => {
					console.log(res)
					this.lisi = this.lisi.concat(res.rows)
					this.total = res.total
					if (this.total < 10) this.status = 'nomore'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.ordertop {
		width: 96%;
		background-color: #fff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		padding-top: 20rpx;
		box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);
		padding-bottom: 10rpx;
	}

	.ordertop>view:nth-child(1) {
		width: 98%;
		margin-bottom: 60rpx;
	}

	.iconblue {
		width: 10rpx;
		height: 45rpx;
		float: left;
		background-color: #3a63cf;
		margin-right: 10rpx;
	}

	.license {
		float: left;
		font-size: 32rpx;
	}

	.various {
		float: right;
		width: 230rpx;
		border: 2rpx solid #3a63cf;
		text-align: center;
		border-radius: 100rpx;
		color: #1669e6;
	}

	.view {
		width: 96%;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between
	}

	.line {
		width: 92%;
		margin: 0 auto;
	}

	.basic {
		width: 94%;
		margin: 10rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.basic>view {
		margin-bottom: 10rpx;
	}

	.basic>view:nth-child(1) {
		color: #797979;
	}

	.search {
		width: 96%;
		margin: 10rpx auto;
	}

	.condition {
		background-color: #1669e6;
		height: 60rpx;
	}

	.conditionone {
		width: 92%;
		height: 44rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		color: #fff;
	}

	.conditionone>view {
		color: #e6e8e8;
	}
</style>