taienTaike_PDA_mobile2/pages/outsource-reveive-list/outsource-reveive-list.vue

<template>
	<view class="page">
		<uni-section type='line' :title='pageTitle' class="bg-white my-2"></uni-section>
		<template v-if="showChoosedList">
			<!-- 选择的数据 -->
			<view class="bg-white p-2">
				<!-- 自仓库号 自库位号，至 仓库号至于库位号 -->
				<view class="flex align-center font-mmd">
					<picker class="border rounded width-100 mx-1" :value='toCkIndex' :range='toCkList' range-key="CKMC" :disabled="disabledStorage" :class="disabledStorage?'bg-light':''" @change="onChangeCk('至',$event)">
						<view v-if='toCkList.length>0 && !disabledStorage' class="form-item-input">
							{{toCkList[toCkIndex].CKMC}}
						</view>
						<view v-else class="form-item-input text-muted">仓库号</view>
					</picker>
					<picker class="border rounded width-100 ml-1" :value='toKwIndex' :range='toKwList' range-key="KWH" :disabled="disabledStorage" :class="disabledStorage?'bg-light':''" @change="onChangeKw('至',$event)">
						<view v-if='toKwList.length>0 && !disabledStorage' class="form-item-input ">
							{{toKwList[toKwIndex].KWH}}
						</view>
						<view v-else class="form-item-input text-muted">库位号</view>
					</picker>
				</view>
			</view>
			
			<view v-for="(item,index) in choosedList" class="my-1 flex width-100 align-center">
				<view class="flex-1 position-relative">
					<view v-if="item.active" class="position-absolute top-0 right-0 pic-yd-box">
						<image src="@/static/images/yidu1.png" mode="" class="pic-yd"></image>
					</view>
					<list-item style="margin:0" :class="item.active ? 'list-item-active' : ''">
						<receive-item :item="item" :index="index" class="flex-1">
							<item-row title="数量" :span='6'>
								<view class="flex align-center border">
									<view class="flex-1">
										<input type="text" v-model="item.amount" :data-index="index" :data-item="item" @input="onInputAmount(index,$event)" @blur='onBlurAmount(index,$event)'/>
									</view>
									<view class="flex-shrink" v-show="item.amount">
										<view class="iconfont icon-shanchu4" @tap="onClearAmount(index)"></view>
									</view>
								</view>
							</item-row>
						</receive-item>
					</list-item>
				</view>
				<view class="flex-shrink pl-1">
					<!-- <view
						class="iconfont icon-qingkong form-item-icon border text-danger rounded-circle"
						@tap="onRemoveItem(index)"></view> -->
					<!-- </view> -->
				</view>
			</view>
	
			<btn-save @save="onSubmit" :disabledOk="disabledSubmit" @cancel="onCancelChoosed" customCancel></btn-save>
		</template>
		<template v-else>
			<!-- 全部数据 -->
			<checkbox-group @change="onChangeCheckbox" v-if="list.length > 0">
				<view v-for="(item,index) in list" class="my-1 flex width-100 align-center">
					<view class="flex-1 " @tap.stop>
						<list-item >
							<receive-item :item="item"/>
						</list-item>
					</view>
					<view class="flex-shrink pl-1">
						<checkbox :value="item.HH" :checked="item.checked" />
					</view>
				</view>
			</checkbox-group>
			<template v-else>
				<nothing />
			</template>
			<btn-save @save="onSaveList" okText='确认' @cancel="onCancelCheckbox" customCancel :disabledOk="listDisabledOk"></btn-save>
		</template>
	</view>
</template>

<script>
	import uniSection from "@/components/uni-ui/uni-section/uni-section.vue"
	import listItem from "@/components/warehousing-list/list-item.vue"
	import btnSave from "@/components/common/btn-save.vue"
	import receiveItem from "@/components/outsource-receive-list/list-item.vue"
	import itemRow from "@/components/common/item-row.vue"
	import {
		formateScanData
	} from "@/common/utils/common.js"
	import {amount} from "@/common/utils/reg.js"
	import {
		TEXT_CPWW,
		TEXT_GXWW
	} from "@/common/utils/types.js"
	import {
		queryreciveCommissionwarehouse,
		queryrecivebodyCommissionwarehouse,
		queryReciveStorageLocation,
		saveIncommissionwarehouse
	} from "@/api/api.js"

	export default {
		components: {
			uniSection,
			listItem,
			btnSave,
			receiveItem,
			itemRow
		},
		data() {
			return {
				showChoosedList:false,  // 展示选择的数据
				barcode: null, // 条形码
				list: [], // 全部数据
				choosedList: [], // 选择的数据
				DDH: null, // 委外订单号
				detail: {}, // 单据号详情
				choosedValue: [], // 选择的数据
				
				toCkList: [], // 至仓库列表
				toCkIndex: 0, // 至仓库索引
				toKwIndex: 0, // 至 库位索引
				disabledSubmit: false, // 禁用提交
			}
		},
		computed:{
			// 页面表题
			pageTitle() {
				const type = this.detail.LXSM ? this.detail.LXSM : ""
				const ddh = this.DDH ? this.DDH : ""
				return `${type}:${ddh}`
			},
			// 禁止选择仓库
			disabledStorage () {
				let x=false
				switch (this.detail.LXSM) {
					case TEXT_GXWW:
					x=true
					break;
				}
				return x
			},
			// 选择列表：是否允许点击确认
			listDisabledOk() {
				return this.choosedValue.length <= 0
			},
			// 至库位列表
			toKwList() {
				let arr = []
				if (this.toCkList.length > 0) {
					return this.toCkList[this.toCkIndex].storageloca
				}
				return arr
			},
		},
		onLoad(e) {
			this.barcode = e.barcode
			const {
				orderno
			} = formateScanData(this.barcode)
			this.DDH = orderno
			this.initPage()
		},
		onBackPress(e) {
			if (this.showChoosedList) {
				this._formatCancelChoosedList()
				return true
			}else{
				const from=e.from
				if (from === 'navigateBack') {
					return false;  
				}  
				this.confirmLeavePage()
				return true;
			}
			
		},
		methods: {
			// 初始化页面
			async initPage() {
				await this._queryreciveCommissionwarehouse()
				await this._queryrecivebodyCommissionwarehouse()
			},
			// 返回页面
			onCancelCheckbox () {
				this.confirmLeavePage()
			},
			// 确定离开页面
			confirmLeavePage () {
				if (this.choosedList.length <=0) {
					uni.navigateBack({
						delta: 1
					})
				}else {
					uni.showModal({
						title: "重要提示",
						content: "您还未保存提交数据，离开将清空数据，确定离开吗？",
						success: (res) => {
							if (res.confirm) {
								uni.navigateBack({
									delta: 1
								})
							}
						}
					})
					return true
				}
			},
			// 获取全部数据
			async _queryreciveCommissionwarehouse() {
				const reqdata = {
					DDH: this.DDH
				}
				const resdata = await queryreciveCommissionwarehouse(reqdata)
				this.detail = resdata[0]
			},
			// 获取明细
			async _queryrecivebodyCommissionwarehouse() {
				const reqdata = {
					DDH: this.DDH
				}
				const resdata = await queryrecivebodyCommissionwarehouse(reqdata)
				resdata.forEach(item=>{
					item.checked=false
					item.amount=null
					item.active=false
					this.list.push(item)
				})
			},
			// 选择多选框
			onChangeCheckbox(e) {
				const value=e.detail.value
				this.choosedValue = value
				this.list.forEach((item,index,array)=>{
					const i=value.indexOf(item.HH)
					if (i>=0){
						item.checked=true
					}else{
						item.checked=false
					}
				})
			},
			// 改变库位
			onChangeKw(key, event) {
				const index = event.detail.value
				switch (key) {
					case "至":
						this.toKwIndex = index
						break;
				}
			},
			// 改变仓库
			onChangeCk(key, event) {
				const index = event.detail.value
				switch (key) {
					case "至":
						this.toCkIndex = index
						break;
				}
			},
			// 查询至仓库
			async _queryReciveStorageLocation() {
				const resdata=await queryReciveStorageLocation()
				this.toCkList = resdata
				return this.toCkList
			},
			// 保存选择的列表
			async onSaveList() {
				this.showChoosedList = true
				this.choosedList=this.list.filter(item=>{
					return item.checked
				})
				
				if (this.detail.LXSM===TEXT_CPWW) {
					this.disabledSubmit=true
					await this._queryReciveStorageLocation()
					this.disabledSubmit=false
				}
			},
	
			// 清空某一项
			onClearAmount (index) {
				uni.showModal({
					title:"确定清空该数据吗",
					success:res=>{
						if (res.confirm) {
							this.choosedList[index].amount=null
							this.choosedList[index].active=false
						}
					}
				})
			},
			// 输入数量
			onInputAmount(index,event) {
				const item=this.choosedList[index]
				if (!amount.test(item.amount)) {
					return uni.showToast({
						title:"请输入准确的数字",
						icon:"none"
					})
				}else{
					this.choosedList[index].active=true
				}
			},
			// 离开数量焦点 
			onBlurAmount (index,event) {
				const item=this.choosedList[index]
				if (!amount.test(item.amount)) {
					this.choosedList[index].amount=null
					this.choosedList[index].active=false
					return uni.showToast({
						title:"输入内容不是数字",
						icon:"none"
					})
				}else{
					this.choosedList[index].active=true
				}
			},
			// 提交
			onSubmit() {
				let ok = true
				let msg = ""
			  if (this.detail.LXSM===TEXT_CPWW) {
			  	if (!this.toCkList[this.toCkIndex].CKH) {
			  		ok = false
			  		msg = "请选择至仓库名称"
			  	} else if (!this.toKwList[this.toKwIndex].KWH) {
			  		ok = false
			  		msg = "请选择至库位号"
			  	}
			  }
				this.choosedList.forEach(item=>{
					if (!item.amount) {
						ok = false
						msg = "请输入数量"
					}else if (!amount.test(item.amount)) {
						ok=false
						msg="请输入准确的数字"
					}
				})
								
				if (!ok) {
					return uni.showToast({
						title: msg,
						icon: "none"
					})
				}
				
				uni.showModal({
					title: "确认保存吗?",
					success: async res => {
						if (res.confirm) {
							this.disabledSubmit = true
							await this._saveIncommissionwarehouse()
							this.disabledSubmit = false
							uni.showToast({
								title: "保存成功"
							})
							uni.reLaunch({
								url:"/pages/index/index"
							})
						}
					}
				})
			},
			// 格式化取消提交的数据
			_formatCancelChoosedList () {
				this.showChoosedList=false
			},
			// 取消提交
			onCancelChoosed () {
				this._formatCancelChoosedList()
			},
			// 保存接口
			async _saveIncommissionwarehouse () {
				let CKH=null,KWH=null,items=[];
				if (this.detail.LXSM===TEXT_CPWW) {
					CKH=this.toCkList[this.toCkIndex].CKH
          KWH=this.toKwList[this.toKwIndex].KWH
				}
				this.choosedList.forEach(item=>{
					items.push({ "DDHH":item.HH,"SL":item.amount})
				})
				const reqdata={
					"WWDDH":this.DDH,  //委外订单号
					"CKH":CKH,   // 仓库号
					"KWH":KWH,   //库位号
					"items":items
				}
				const resdata=await saveIncommissionwarehouse(reqdata)
				setTimeout(()=>{
					this.disabledSubmit = false
				},1000)
				return resdata
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/common/styles/outsource.scss"
</style>