parts_shop_ui_LT/pages/OutboundTask/OutboundTask_XQ.vue

<template>
	<view>
		<view style="background: #fff;width: 94%;margin: 20rpx auto;">
			<view class="popupbox">
				<view class="formBox">
					<view class="inputBox">
						<view style="color: #dd451b;display: flex;align-items: center;">
							<u-icon name="file-text" color="#dd451b" size="18"></u-icon>
							<text style="margin-left: 8rpx;">销售单号</text>
						</view>
						<view class="huicolor">{{popupRow.ordNo}}</view>
					</view>
					<view class="inputBox">
						<view style="color: #dd451b;display: flex;align-items: center;">
							<u-icon name="account" color="#dd451b" size="18"></u-icon>
							<text style="margin-left: 8rpx;">业务对象</text>
						</view>
						<view class="huicolor">{{popupRow.customerName}}</view>
					</view>
					<view class="inputBox">
						<view style="color: #dd451b;display: flex;align-items: center;">
							<u-icon name="edit-pen" color="#dd451b" size="18"></u-icon>
							<text style="margin-left: 8rpx;">业务来源</text>
						</view>
						<view class="huicolor">{{popupRow.bsType}}</view>
					</view>
					<view class="inputBox">
						<view style="color: #dd451b;display: flex;align-items: center;">
							<u-icon name="home" color="#dd451b" size="18"></u-icon>
							<text style="margin-left: 8rpx;">来源公司</text>
						</view>
						<view class="huicolor">{{popupRow.sourceCompanyName}}</view>
					</view>
					
					<view class="inputBox">
						<view style="color: #dd451b;display: flex;align-items: center;">
							<u-icon name="map" color="#dd451b" size="18"></u-icon>
							<text style="margin-left: 8rpx;">收货地址</text>
						</view>
						<view class="huicolor">{{popupRow.recAddress}}</view>
					</view>
					<view class="inputBox">
						<view style="color: #dd451b;display: flex;align-items: center;">
							<u-icon name="coupon" color="#dd451b" size="18"></u-icon>
							<text style="margin-left: 8rpx;">销售数量</text>
						</view>
						<view class="huicolor">{{popupRow.goodsTotalNum}}</view>
					</view>
					<view class="inputBox">
						<view style="color: #dd451b;display: flex;align-items: center;">
							<u-icon name="coupon" color="#dd451b" size="18"></u-icon>
							<text style="margin-left: 8rpx;">发货数量</text>
						</view>
						<view class="huicolor">{{popupRow.sendTotalNum?popupRow.sendTotalNum:'--'}}</view>
					</view>
					<view class="inputBox">
						<view style="color: #dd451b;display: flex;align-items: center;">
							<u-icon name="account" color="#dd451b" size="18"></u-icon>
							<text style="margin-left: 8rpx;">联系人</text>
						</view>
						<view class="huicolor">{{popupRow.contacts}}</view>
					</view>
					<view class="inputBox">
						<view style="color: #dd451b;display: flex;align-items: center;">
							<u-icon name="phone" color="#dd451b" size="18"></u-icon>
							<text style="margin-left: 8rpx;">电话</text>
						</view>
						<view class="huicolor">{{popupRow.phone}}</view>
					</view>
				</view>
			
			</view>
		</view>
		
		<view style="background: #fff;width: 94%;margin: 20rpx auto;">
			<view class="popupbox">
				<view class="formBox">
					<view class="inputBox" @click="tanchuangfun()">
						<view style="color: #dd451b;display: flex;align-items: center;">
							<u-icon name="car" color="#dd451b" size="18"></u-icon>
							<text style="margin-left: 8rpx;">发货仓库</text>
						</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;display: flex;align-items: center;">
							<u-icon name="phone" color="#dd451b" size="18"></u-icon>
							<text style="margin-left: 8rpx;">库管</text>
						</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 style="width: 100rpx;color: #dd451b;">备注</view>
						<view style="width: 100%;">
							<u--textarea v-model="popupRow.remarks" border="none" :disabled="popupType && role_name != -1"
							 placeholder="请输入备注" ></u--textarea>
						</view>
						<!-- <view>{{popupRow.remarks?popupRow.remarks:'--'}}</view> -->
					</view>
				</view>
			</view>
		</view>
		
		<view style="position: fixed;
		bottom: 0;width: 100%;
		background: #fff;
		border-top-left-radius: 14rpx;
		border-top-right-radius: 14rpx;
		overflow: hidden;
		box-sizing: border-box;" v-if="role_name == -1">
			<view class="bottomflex" >
				<view style="width: 50%;background: #5ac725;" class="buttombox" @click="popupShowfalse">取消</view>
				<view style="width: 50%;" 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>
		</view>
		
		
		<!-- 发货仓库选择弹窗 -->
		<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-overlay :show="overlayShow" zIndex="10076" ></u-overlay>
		
		<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 {
				// 修改的数据
				popupRow:{},
				// 当前编辑弹窗的下标
				popupIndex:0,
				// 发货仓库弹窗的开启和关闭
				pickerShow:false,
				// 发货仓库弹窗的数据
				pickerColumns:[],
				// 库管弹窗的数据
				KGpickerColumns:[],
				// 库管弹窗的开启和关闭
				KGpickerShow:false,
				modalShow:false,
				modalTitle:'',
				modalContent:'',
				// 弹窗是编辑还是详情的判断
				popupType:false,
				// 弹窗加载
				loading:false,
				// 判断是否业务员
				role_name:null,
				overlayShow:false,
			}
		},
		onLoad(e) {
			// console.log(uni.getStorageSync('userInfo').role_name.indexOf('业务员'));
			this.role_name = uni.getStorageSync('userInfo').role_name.indexOf('业务员')
			this.popupRow = JSON.parse(e.row)
			if (this.popupRow.statusName == '已派工' || this.popupRow.statusName == '已完成') {
				this.popupType = true
			}
			this.storageDescListAllfun()
			this.stockClerkListfun()
		},
		onShow() {},
		methods:{
			// 派工,取消派工的弹窗确认按钮
			modalConfirm(){
				if (this.modalTitle == '派工') {
					this.overlayShow = true
					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.overlayShow = false
							setTimeout(()=>{
								this.popupShowfalse()
							},1000)
						}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
							
							setTimeout(()=>{
								this.popupShowfalse()
							},1000)
						}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}`
				
			},
			// 编辑弹窗取消
			popupShowfalse(){
				// this.popupShow = false
				let pages = getCurrentPages() // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				let prevPage = pages[pages.length - 2] //上一页页面实例
				// prevPage.$vm.otherFun(this.form)
				uni.navigateBack()
			},
			// 保存接口
			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].cname
				this.popupRow.storageId = e.value[0].id
				this.pickerShow = false
			},
			// 发货仓库弹窗的打开
			tanchuangfun(type){
				if (this.role_name != -1) return 
				if (this.KGpickerShow) return 
				if (this.popupRow.statusName == '已派工' || 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]
					// 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.role_name != -1) return 
				if (this.pickerShow) return 
				if (this.popupRow.statusName == '已派工' || this.popupRow.statusName == '已完成') return 
				this.KGpickerShow = true
				// this.loading = true
				// this.stockClerkListfun()
			},
			// 发货仓库弹窗的取消
			KGpickerCancel(){
				this.KGpickerShow = false
			},
			// 获取库管数据
			stockClerkListfun(){
				stockClerkList().then(res=>{
					this.KGpickerColumns = [res.data]
					for(let item of res.data) {
						if (item.id == this.popupRow.stockClerkId) {
							this.popupRow.stockClerkName = item.name
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.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: 20rpx 0;
				margin: 5rpx 0;
			}
		}
		
	}
	.bottomflex {
		display: flex;
		align-items: center;
		// justify-content: space-around;
		// margin-top: 30rpx;
		.buttombox {
			padding: 25rpx 50rpx;
			background: #fd4b09;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #fff;
			text-align: center;
			// border-radius: 12rpx;
		}
	}
	.huicolor {
		color: #999;
	}
</style>