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

<template>
	<view>
		<view class="condition">
			<view class="conditionone">
				<view :style="{'border-bottom':(underline =='0'?'3rpx solid #fff':'none')}" @click="whole">待处理</view>
				<view :style="{'border-bottom':(underline =='1'?'3rpx solid #fff':'none')}"
					@click="show = !show,underline = '1'">出库日期</view>
				<!-- <view :style="{'border-bottom':(underline =='2'?'3rpx solid #fff':'none')}" @click="suitcase = !suitcase,underline = '2'">提箱日期</view> -->
				<view :style="{'border-bottom':(underline =='3'?'3rpx solid #fff':'none')}"
					@click="choiceState = !choiceState,underline = '3'">状态</view>
				<view :style="{'border-bottom':(underline =='4'?'3rpx solid #fff':'none')}"
					@click="underline = '4';screen=true">筛选</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.fBillstatus}}</view>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed' />
			</view>
			<view class="basic">
				<view>货主</view>
				<view>{{item.corpName}}</view>
			</view>
			<view class="basic">
				<view style="width: 190rpx;">出库日期/仓库</view>
				<view style="width: 480rpx;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{item.fBsdate}}/{{item.fWarehouseName}}</view>
			</view>
			<view class="basic">
				<view>计划件数/件数/毛重(吨)</view>
				<view>{{item.fPlanqty}}/{{item.fQty}}/{{item.fGrossweight}}</view>
			</view>
			<!-- <view class="basic">
				<view>库管</view>
				<view>{{item.fContacts}}</view>
			</view> -->
			<view class="basic">
				<view>品名/箱量</view>
				<view>{{item.fProductName}}/{{item.fCntval}}</view>
			</view>
			<!-- <view class="basic" @tap="call_phone(item.fDriverTel)">
				<view>司机电话</view>
				<view>{{item.fDriverTel}}</view>
			</view> -->
			<view>
				<view>
					<view></view>
					<view></view>
				</view>
				<view></view>
				<view></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-calendar v-model="show" :mode="mode" @change="orderdate" max-date="2050"></u-calendar>
		<u-calendar v-model="suitcase" :mode="mode" @change="suitcaSe"></u-calendar>
		<u-action-sheet :list="column" @close="underline = '0'" @click="thatOne" v-model="choiceState"></u-action-sheet>
		<u-popup v-model="screen" 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: 28rpx;">状态选择</text>
					<u-radio-group v-model="screenName" @change="radioGroupChange"
						style="margin: 20rpx auto;display: flex;justify-content: space-around;">
						<u-radio
							shape="square"
							@change="radioChange"
							v-for="(item, index) in screenList"
							:key="index"
							:name="item.name"
							:disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
					<!-- <text style="font-size: 32rpx;">货主</text> -->
					<u-field style="padding: 10px 0px;" v-model="fCorpid.label" label="货主名称:" v-if="deptName != '外部用户'" 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="screenEntryDate = true"/>
					<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-calendar v-model="screenEntryDate" :mode="mode" @change="entryScreen" max-date="2050"></u-calendar>
		<u-select v-model="client" :list="clientList" @confirm="confirmClient" @cancel="client = false"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lisi: [],
				client:false,
				clientList:[],
				fCorpid:{
					value: '',
					label: ''
				},
				screenValue: '',
				screenName: '',
				fShipper: '',
				entryDate: '',
				screenEntryDate: false,
				screenList: [{
						name: '计划',
						value: '1',
						disabled: false
					},
					{
						name: '待出库',
						value: '2',
						disabled: false
					},
					{
						name: '出库中',
						value: '3',
						disabled: false
					},
					{
						name: '已出库',
						value: '4',
						disabled: false
					}
				],
				screen: false,
				column: [{
					text: '计划',
					value: '1'
				}, {
					text: '待出库',
					value: '2'
				}, {
					text: '出库中',
					value: '3'
				}, {
					text: '已出库',
					value: '4'
				}],
				show: false,
				suitcase: false,
				choiceState: false,
				underline: '0',
				mode: 'range',
				queryParams: {
					pageNum: 1, //页数
					pageSize: 10, //几条数据
				},
				deptName:'',
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				total: 0,
			}
		},
		onReachBottom() {
			this.status = 'loading'
			if (this.lisi.length < this.total) {
				this.queryParams.pageNum++
				this.query()
			} else {
				this.status = 'nomore'
			}
		},
		created() {
			this.deptName = uni.getStorageSync('deptName')
			uni.showLoading({
				title: '加载中'
			});
			setTimeout(function() {
				uni.hideLoading();
			}, 1000);
			// #ifdef MP-WEIXIN  
			if (wx.hideHomeButton) {
				wx.hideHomeButton();
			}
			// #endif
		},
		onShow() {
			this.whole()
			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.screenName = ''
				this.screenValue = ''
				this.entryDate = ''
				this.fShipper = ''
				this.fCorpid = {
					value: '',
					label: ''
				}
			},
			//确认货主
			confirmClient(e){
				this.fCorpid.value = e[0].value
				this.fCorpid.label = e[0].label
			},
			confirmCompletion(){
				this.lisi = []
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					fShipper:this.fShipper,
					fItemsStatus:this.screenValue,
					timeInterval:this.entryDate.split(',')
				}
				if(this.entryDate){
					this.queryParams.timeInterval = [this.queryParams.timeInterval[0] + ' ' + '00:00:00', this.queryParams.timeInterval[1] + ' ' + '23:59:59']
				}else{
					delete this.queryParams.timeInterval
				}
				if(this.fCorpid.value) this.queryParams.fCorpid = this.fCorpid.value
				this.screen = false
				this.query()
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				for(let item in this.screenList){
					if(e == this.screenList[item].name){
						this.screenName = this.screenList[item].name
						this.screenValue = this.screenList[item].value
					}
				}
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				for(let item in this.screenList){
					if(e == this.screenList[item].name){
						this.screenName = this.screenList[item].name
						this.screenValue = this.screenList[item].value
					}
				}
			},
			entryScreen(e){
				this.entryDate = e.startDate+','+e.endDate
			},
			call_phone(bphone) {
				uni.makePhoneCall({
					phoneNumber: '' + bphone, // 手机号
				});
			},
			thatOne(index) {
				// console.log(index)
				// console.log(this.column[index].value)
				this.lisi = []
				this.queryParams = {}
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					fItemsStatus: this.column[index].value
				}
				this.query()
			},
			whole() {
				this.underline = '0'
				this.lisi = []
				this.queryParams = []
				this.queryParams = {
					pageNum: 1,
					pageSize: 10
				}
				this.query()
			},
			custom(res) {
				// console.log(res)
				this.lisi = []
				this.queryParams = []
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					fMblno: res
				}
				// console.log(this.queryParams)
				this.query()
			},
			orderdate(e) {
				this.lisi = []
				this.queryParams = []
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					timeInterval:[e.startDate + ' ' + '00:00:00',e.endDate + ' ' + '23:59:59']
				}
				this.query()
			},
			suitcaSe(e) {
				// console.log(e)
				this.lisi = []
				this.queryParams = []
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					timeInterval:[e.startDate + ' ' + '00:00:00',e.endDate + ' ' + '23:59:59']
				}
				this.query()
			},
			query() {
				this.$u.get('/warehouseBusiness/applets/outStockList',this.queryParams).then(res => {
					console.log(res)
					if (res.code == 500) {
						uni.showToast({
							icon: 'none',
							title: res.msg,
							position: "bottom"
						})
					} else if (res.code == 200) {
						this.total = res.total
						this.lisi = this.lisi.concat(res.rows)
						// this.lisi = res.rows
						this.status = 'nomore'
					}
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: '网络繁忙请稍后再试',
						position: "bottom"
					})
				})
			},
			viewDetails(item) {
				let data = {
					fId:item.fId
				}
				uni.navigateTo({
					url: './detailed?item=' + JSON.stringify(data)
				});
			},
		}
	}
</script>
<style scoped lang="scss">
	.basic {
		width: 94%;
		margin: 10rpx auto;
		display: flex;
		justify-content: space-between;
	}

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

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

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

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

	.oddnumber {
		width: 96%;
		margin: 20rpx auto;
		margin-bottom: 20rpx;
	}

	.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;
	}

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

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

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

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

	.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>