parts_shop_ui_LT/pages/OutboundTask/OutboundTask.vue

<template>
	<view :class="{popupShow:popupShow}">
		<view class="searchBox">
			<u-search placeholder="请输入订单号" v-model="page.ordNo" clearabled :actionStyle="{'color':'#fff'}"
			@custom="qingkongfun" @search="qingkongfun" @clear="qingkongfun"></u-search>
		</view>
		
		<view style="width: 95%;margin: 0 auto;">
			<u-tabs :list="tabsList" keyName="label" :current="tabsCurrent" @click="tabsClick"></u-tabs>
		</view>
		
		<view class="bottombox">
			<view class="listbox">
				<view class="listforBox" v-for="(item,index) in shipListData" :key="index"
				 @click="editBox(item,index,true)">
					<view class="disableFlexBox">
						<view class="title">{{item.ordNo?item.ordNo:'--'}}</view>
						<view class="text" style="padding: 5rpx 30rpx;border:1rpx solid #FD4B09;border-radius: 100rpx;color: #FD4B09;">
							<text>{{item.statusName}}</text>
						</view>
					</view>
					<view class="text">{{item.customerName}}</view>
					<view class="text">{{item.storageName}}</view>
					<view style="display: flex;align-items: center;justify-content: space-between;">
						<view class="text">{{item.stockClerkName?item.stockClerkName:'--'}}</view>
						<view class="text">{{item.businesDate}}</view>
					</view>
					
					
					
					<!-- <view class="positioningview">
						<view class="positioningButton" 
						v-if="item.statusName == '待处理'"
						 @click.stop="editBox(item,index,true)">编辑</view>
						<view v-if="item.statusName == '已派工'" class="positioningButton" 
						@click.stop="DispatchingWorkersfun(item,index,'撤销派工')">撤销派工</view>
						<view v-else class="positioningButton"
						 @click.stop="DispatchingWorkersfun(item,index,'派工')">派工</view>
					</view> -->
					
				</view>
			</view>
		</view>
		
		<u-loadmore v-if="total !== 0" :status="status" />
		
		<!-- 距离底部的距离 -->
		<view style="height: 40rpx;"></view>
		
		
		<!-- 编辑弹窗层 -->
		<u-popup :show="popupShow" mode="center" overlay round="8" customStyle="width:80%;">
		    <view class="popupbox">
				<view class="formBox">
					<view class="inputBox">
						<view>销售单号</view>
						<view class="huicolor">{{popupRow.ordNo}}</view>
					</view>
					<view class="inputBox">
						<view>业务对象</view>
						<view class="huicolor">{{popupRow.customerName}}</view>
					</view>
					<view class="inputBox" @click="tanchuangfun()">
						<view style="color: #dd451b;">发货仓库</view>
						<u--input
						   placeholder="请选择发货仓库"
						   border="none"
							inputAlign="right"
							disabled
							disabledColor="#fff"
						   v-model="popupRow.storageName"
						></u--input>
						<!-- <view>{{popupRow.storageName}}</view> -->
					</view>
					<view class="inputBox" @click="KGtanchuangfun()">
						<view style="color: #dd451b;">库管</view>
						 <u--input
						    placeholder="请选择库管"
						    border="none"
							inputAlign="right"
							disabled
							disabledColor="#fff"
						    v-model="popupRow.stockClerkName"
						  ></u--input>
						<!-- <view v-else>{{popupRow.stockClerkName}}</view> -->
					</view>
					<view class="inputBox">
						<view>业务来源</view>
						<view class="huicolor">{{popupRow.bsType}}</view>
					</view>
					<view class="inputBox">
						<view>来源公司</view>
						<view class="huicolor">{{popupRow.sourceCompanyName}}</view>
					</view>
					
					<view class="inputBox">
						<view>收货地址</view>
						<view class="huicolor">{{popupRow.recAddress}}</view>
					</view>
					<view class="inputBox">
						<view>销售数量</view>
						<view class="huicolor">{{popupRow.goodsTotalNum}}</view>
					</view>
					<view class="inputBox">
						<view>发货数量</view>
						<view class="huicolor">{{popupRow.sendTotalNum?popupRow.sendTotalNum:'--'}}</view>
					</view>
					<view class="inputBox">
						<view>联系人</view>
						<view class="huicolor">{{popupRow.contacts}}</view>
					</view>
					<view class="inputBox">
						<view>电话</view>
						<view class="huicolor">{{popupRow.phone}}</view>
					</view>
					<view class="inputBox">
						<view style="width: 100rpx;color: #dd451b;">备注</view>
						<view style="width: 100%;">
							<u--textarea v-model="popupRow.remarks" border="none" :disabled="!popupType"
							 placeholder="请输入备注" ></u--textarea>
						</view>
						<!-- <view>{{popupRow.remarks?popupRow.remarks:'--'}}</view> -->
					</view>
				</view>
				
				<view class="bottomflex" >
					<view class="buttombox" @click="popupShowfalse">取消</view>
					<view v-if="popupRow.statusName != '已完成'">
						<view v-if="popupRow.statusName == '已派工'" class="buttombox"
						@click.stop="DispatchingWorkersfun(popupRow,'撤销派工')">撤销派工</view>
						<view v-else class="buttombox"
						 @click.stop="shipEditfun(popupRow)">派工</view>
					</view>
					
					<!-- <view v-if="popupType" class="buttombox" @click="shipEditfun(popupRow)">派工</view> -->
					<!-- DispatchingWorkersfun(item,index,'派工') -->
				</view>
		    </view>
		</u-popup>
		
		<!-- 发货仓库选择弹窗 -->
		<u-picker :show="pickerShow" :columns="pickerColumns"
		 keyName="cname" :loading="loading"
		@confirm="pickerConfirm" @cancel="pickerCancel"></u-picker>
		
		<!-- 库管选择弹窗 -->
		<u-picker :show="KGpickerShow" :columns="KGpickerColumns"
		 keyName="name" :loading="loading"
		@confirm="KGpickerConfirm" @cancel="KGpickerCancel"></u-picker>
		
		<!-- 提示确认弹窗 -->
		<u-modal :show="modalShow" :title="modalTitle" :content='modalContent' 
		showCancelButton @confirm="modalConfirm" @cancel="modalCancel"></u-modal>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { shipList,storageDescListAll,
	stockClerkList,shipEdit,shipOutboundWorkOrder,shipRevokeWorkOrder } from '@/api/OutboundTask/index.js'
	export default {
		data() {
			return {
				// 列表请求参数
				page:{
					ordNo:null,
					current: 1,
					size: 10,
					bizTypeName: 'FHRW',
					statusName:'待处理'
				},
				// 总条数
				total:0,
				status:'loadmore',
				// 列表数据
				shipListData:[],
				// 编辑弹窗的开启
				popupShow:false,
				// 编辑弹窗的数据
				popupRow:{},
				// 当前编辑弹窗的下标
				popupIndex:0,
				// 发货仓库弹窗的开启和关闭
				pickerShow:false,
				// 发货仓库弹窗的数据
				pickerColumns:[],
				// 库管弹窗的数据
				KGpickerColumns:[],
				// 库管弹窗的开启和关闭
				KGpickerShow:false,
				// 提示弹窗
				modalShow:false,
				modalTitle:'',
				modalContent:'',
				// 弹窗加载
				loading:false,
				// tbas切换数据
				tabsList:[
					{
						label: '全部',
						value: null
					},
					{
						label: '待处理',
						value: '待处理'
					},{
						label: '处理中',
						value: '已派工'
					}, {
					    label: '已完成',
					    value: '已完成'
					}
				],
				// 弹窗是编辑还是详情的判断
				popupType:false,
				// tbas当前选择的下标
				tabsCurrent:1,
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.shipListData = []
			this.shipListfun()
		},
		onReachBottom() {
			if (this.page.current * this.page.size < this.total) {
				this.page.current++
				this.status = 'loadmore'
				this.shipListfun()
			} else {
				this.status = 'nomore'
			}
		},
		methods: {
			// 派工,取消派工的弹窗确认按钮
			modalConfirm(){
				if (this.modalTitle == '派工') {
					shipOutboundWorkOrder({ids:this.popupRow.id}).then(res=>{
						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'success',
								message: "派工成功",
							})
							this.modalShow = false
							this.popupShow = false
							this.qingkongfun()
						}else {
							this.$refs.uToast.show({
								type: 'error',
								message: res.msg,
							})
						}
					})
				}else {
					shipRevokeWorkOrder({ids:this.popupRow.id}).then(res=>{
						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'success',
								message: "撤销派工成功"
							})
							this.modalShow = false
							this.popupShow = false
							this.qingkongfun()
						}else {
							this.$refs.uToast.show({
								type: 'error',
								message: res.msg,
							})
						}
					})
				}
			},
			// 派工,取消派工的弹窗取消按钮
			modalCancel(){
				this.modalShow = false
			},
			// 派工接口
			DispatchingWorkersfun(row,text){
				this.modalShow = true
				this.popupRow = row
				// this.popupIndex = index
				
				this.modalTitle = text
				this.modalContent = `是否确认要${text}`
				
			},
			// 编辑弹窗相关部分-------------------------
			// 编辑弹窗的开启
			editBox(row,index,type){
				this.$u.route('/pages/OutboundTask/OutboundTask_XQ', {
					row:JSON.stringify(row)
				});
				
				// this.popupShow = true
				this.popupRow = row
				this.popupIndex = index
				// 点击的状态是编辑还是详情
				this.popupType = type
			},
			// 编辑弹窗保存
			popupShowupData(){
				this.shipEditfun()
				// this.popupShow = false
			},
			// 编辑弹窗取消
			popupShowfalse(){
				this.popupShow = false
			},
			// 保存接口
			shipEditfun(item){
				shipEdit(this.popupRow).then(res=>{
					console.log(res,302);
					this.DispatchingWorkersfun(item,'派工')
				})
			},
			// 发货仓库相关部分----------------------
			// 发货仓库弹窗的确认
			pickerConfirm(e){
				console.log(e);
				this.popupRow.storageName = e.value[0].canme
				this.popupRow.storageId = e.value[0].id
				this.pickerShow = false
			},
			// 发货仓库弹窗的打开
			tanchuangfun(type){
				if (!this.popupType) return 
				if (this.KGpickerShow) return 
				if (this.popupRow.statusName == '已派工') return 
				this.pickerShow = true
				this.loading = true
				this.pickerColumns = []
				this.storageDescListAllfun()
			},
			// 发货仓库弹窗的取消
			pickerCancel(){
				this.pickerShow = false
			},
			// 获取发货仓库数据
			storageDescListAllfun(){
				storageDescListAll().then(res=>{
					this.pickerColumns = [res.data]
					console.log(this.pickerColumns,205);
					this.loading = false
				})
			},
			// 库管相关部分------------------------
			// 库管弹窗的确认
			KGpickerConfirm(e){
				this.popupRow.stockClerkName = e.value[0].name
				this.popupRow.stockClerkId = e.value[0].id
				this.KGpickerShow = false
			},
			// 库管的弹窗的开启
			KGtanchuangfun(){
				if (!this.popupType) return 
				if (this.pickerShow) return 
				if (this.popupRow.statusName == '已派工') return 
				this.KGpickerShow = true
				this.loading = true
				this.stockClerkListfun()
			},
			// 发货仓库弹窗的取消
			KGpickerCancel(){
				this.KGpickerShow = false
			},
			// 获取库管数据
			stockClerkListfun(){
				stockClerkList().then(res=>{
					this.KGpickerColumns = [res.data]
					this.loading = false
				})
			},
			// 仓库列表数据相关部分-----------------------------
			// tabs切换
			tabsClick(e){
				console.log(e.value,309);
				this.page.statusName = e.value
				this.qingkongfun()
			},
			// 清空获取数据
			qingkongfun(){
				this.page.current = 1
				this.shipListData = []
				this.shipListfun()
			},
			// 获取仓库列表数据
			shipListfun(){
				shipList(this.page).then(res=>{
					this.shipListData = [...this.shipListData,...res.data.records]
					this.total = res.data.total
					if (this.page.current * this.page.size >= this.total) {
						this.status = 'nomore'
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popupShow {
		// overflow: hidden;
			// position: fixed;
		// position: fixed;
		// width: 100vw;
		 // height: 100vh; // 固定高度
		 // touch-action: none;
		 // overflow: hidden;
		    // overflow-y: scroll; // 超出滚动
		    // overscroll-behavior: none; // 禁止滚动溢出
	}
	.huicolor {
		color: #999;
	}
	.searchBox {
		background: #fd4b09;
		padding: 25rpx;
		box-sizing: border-box;
	}
	.bottombox {
		width: 95%;
		margin: 20rpx auto 0;
	}
	.listbox {
		.listforBox {
			background: #fff;
			border-radius: 12rpx;
			padding: 30rpx 35rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			position: relative;
		}
	}
	.disableFlexBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.title {
		font-size: 32rpx;
		color: #fd4b09;
	}
	.text {
		font-size: 28rpx;
		margin: 5rpx 0;
	}
	.positioningview {
		position: absolute;
		bottom: 20rpx;
		right: 25rpx;
		display: flex;
		align-items: center;
	}
	.positioningButton {
		margin: 0 10rpx;
		font-size: 30rpx;
		background: #fd4b09;
		padding: 15rpx 25rpx;
		color: #fff;
		font-weight: 500;
		border-radius: 12rpx;
	}
	.popupbox {
		padding: 20rpx;
		box-sizing: border-box;
		.formBox {
			font-size: 30rpx;
			.inputBox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #dcdde0;
				padding: 15rpx 0;
				margin: 5rpx 0;
			}
		}
		.bottomflex {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 30rpx;
			.buttombox {
				padding: 20rpx 50rpx;
				background: #fd4b09;
				font-size: 30rpx;
				color: #fff;
				border-radius: 12rpx;
			}
		}
	}
</style>