jsh_erp_app/pages/picking-task/index.vue

<template>
	<view class="picking-task-page">
		<u-navbar height="40px" title="拣货任务" bgColor="#F0F6FB" autoBack placeholder>
			<view class="u-nav-slot btn-right" slot="right" @click="stashClick">
				<view class="cang-name">{{cangName}}</view>
				<u-icon name="arrow-down-fill" color="#999999" size="12"></u-icon>
			</view>
		</u-navbar>
		<view class="container_main">
			<u-sticky :offsetTop="offsetTop" bgColor="#F0F6FB">
				<view class="search-box">
					<u-search placeholder="请输入单据编号" bgColor="#fff" shape="square" v-model="params.number" :showAction="false" @search="searchClick" @clear="searchClick"></u-search>
					<view class="flex_box">
						<view class="scan-text">扫描单据二维码</view>
						<view class="scan-icon">
							<image src="@/static/image/scan-icon.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="type-box flex_box">
					<view class="type-item" @click="tabClick(1)">
						<view class="type-val">{{type1}}</view>
						<u-icon name="arrow-down-fill" color="#999999" size="12"></u-icon>
					</view>
					<view class="type-item" @click="tabClick(2)">
						<view class="type-val">{{type2}}</view>
						<u-icon name="arrow-down-fill" color="#999999" size="12"></u-icon>
					</view>
				</view>
			</u-sticky>
			<view class="task-cont">
				<block v-for="(item,i) in taskList" :key="i">
					<task-item :item="item" @toStorage="toStorage" @toDetail="toDetail"></task-item>
				</block>
					<u-empty mode="data" v-if="taskList.length == 0"></u-empty>
			</view>
		</view>
		<!-- 中心仓弹窗 -->
		<u-picker :show="stashShow" :defaultIndex="defaultIndex" :columns="stashColumns" @confirm="pickerConfirm" @cancel="stashShow= false"></u-picker>
		<!-- 状态 -->
		<u-picker :show="statusShow" keyName="name" :defaultIndex="defaultIndex2" :columns="statusColumns" @confirm="statusConfirm" @cancel="statusShow= false"></u-picker>
		<!-- 月份 -->
		<u-picker :show="dateShow" :defaultIndex="defaultIndex3" :columns="dateColumns" @confirm="dateConfirm" @cancel="dateShow= false"></u-picker>
		
	</view>
</template>

<script>
	import taskItem from '@/components/task-item/task-item.vue'
	import {saleOrder} from '@/common/request/apis/picking'
	import {orderStartHandle} from '@/common/request/apis/purchase'
	export default{
		components:{
			taskItem
		},
		data() {
			return {
				offsetTop:0,
				cangName:'鹏越中心仓',
				type1:'全部',
				type2:'月份',
				stashShow:false,
				statusShow:false,
				dateShow:false,
				stashColumns:[
					['鹏越中心仓','美团中心仓']
				],
				statusColumns:[
					[{
						name:'全部',
						id:''
					},{
						name:'待拣货',
						id:'1'
					},{
						name:'拣货中',
						id:'4'
					},{
						name:'已拣货',
						id:'2'
					}]
				],
				dateColumns:[
					['全年','一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
				],
				defaultIndex:[],
				defaultIndex2:[],
				defaultIndex3:[],
				taskList:[],
				params:{
					beginTime:'',
					endTime:'',
					number:'',
					status:'',
					pageNum:1,
					pageSize:10
				}
			}
		},
		onLoad() {
			let systemInfo = uni.getSystemInfoSync();
			let statusBarHeight = systemInfo.statusBarHeight;
			this.offsetTop = statusBarHeight + 40
			this.init()
		},
		methods:{
			init() {
				uni.showLoading()
				this.params.pageNum = 1
				this.getSaleOrder()
			},
			searchClick() {
				this.init()
			},
			tabClick(type) {
				if(type == 1) {
					this.defaultIndex = this.getDefaultIndex(this.type1,this.statusColumns)
					this.statusShow = true
				}else {
					this.defaultIndex = this.getDefaultIndex(this.type2,this.dateColumns)
					this.dateShow = true
				}
			},
			getSaleOrder() {
				saleOrder(this.params)
				.then(res=>{
					if(res.code == 200) {
						this.taskList = res.data.rows;
					}
					uni.hideLoading()
				})
				.catch(err=>{
					uni.hideLoading()
				})
			},
			stashClick() {
				this.defaultIndex = this.getDefaultIndex(this.cangName,this.stashColumns)
				this.stashShow = true
			},
			pickerConfirm(val) {
				this.cangName = val.value[0]
				this.stashShow = false
			},
			statusConfirm(val) {
				this.type1 = val.value[0].name
				this.params.status = val.value[0].id
				this.statusShow = false
				this.init()
			},
			dateConfirm(val) {
				this.type2 = val.value[0]
				this.dateShow = false
				let month = val.indexs[0]
				this.getLastDayOfMonth(month)
				this.init()
			},
			// 获取开始时间、结束时间
			getLastDayOfMonth(month) {
				let year = new Date().getFullYear()
				if(month !=0) {
					let monthStart = new Date(year, month, 0).getDate();
					this.params.beginTime = `${year}-${month}-01`
					this.params.endTime = `${year}-${month}-${monthStart}`
				}else {
					this.params.beginTime = ''
					this.params.endTime = ''
				}
			},
			// 获取picker默认index
			getDefaultIndex(val,list) {
				let arr = []
				let index = list[0].findIndex(item=>item.name == val)
				arr = [index]
				return arr
			},
			// 点击操作
			toOrderStartHandle(id) {
				orderStartHandle(id)
				.then(res=>{
					if(res.code == 200) {
						uni.navigateTo({
							url:'/pages/picking-task/delivery'
						})
					}
				})
			},
			// 出库
			toStorage(val) {
				this.toOrderStartHandle(val.id)
			},
			toDetail(val) {
				uni.navigateTo({
					url:`/pages/picking-task/detail?id=${val.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn-right {
		display: flex;
		align-items: center;
		.cang-name {
			color: #0256FF;
			text-align: center;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-weight: 600;
			margin-right: 10rpx;
		}
	}
	.picking-task-page {
		min-height: 100vh;
		background: #F0F6FB;
		.container_main {
			.search-box {
				display: flex;
				align-items: center;
				padding: 0 32rpx;
				.scan-text {
					color: #333;
					font-family: "PingFang SC";
					font-size: 24rpx;
					font-weight: 400;
					margin-right: 20rpx;
					margin-left: 30rpx;
				}
				.scan-icon {
					width: 36rpx;
					height: 36rpx;
					background-color: #fff;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					image {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
		
			.type-box {
				.type-item {
					width: 50%;
					height: 88rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.type-val {
						color: #000;
						font-family: "PingFang SC";
						font-size: 28rpx;
						font-weight: 400;
						margin-right: 10rpx;
					}
				}
			}
			
			.task-cont {
				padding: 0 24rpx;
			}
		}
	}
</style>