rd_mes_uniapp/pages/mes/jobCv/pwoDraw.vue

<template>
	<view>
		<uni-collapse>
			<uni-forms :modelValue="jobInForm" ref="jobInForm" :rules="rules">
				<uni-collapse-item title="领料转移单" :open="true">
					<uni-forms-item label="工单" :labelWidth='90' name="pwoCode">
						<view class="uni-flex uni-row">
							<uni-easyinput suffixIcon="scan" @iconClick="scanBar" type="text" @confirm="scanJobCode"
								v-model="jobInForm.pwoCode"></uni-easyinput>
						</view>
					</uni-forms-item>
					<uni-forms-item label="转移单类型" :labelWidth='90' name="type">
						<uni-data-select v-model="jobInForm.type" :localdata="typeOptions"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="备注" :labelWidth='90' name="remark">
						<uni-easyinput autoHeight type="textarea" v-model="jobInForm.remark"></uni-easyinput>
					</uni-forms-item>
				</uni-collapse-item>
				<uni-collapse-item title="领料转移单明细" :labelWidth='90' :open="true">
					<uni-swipe-action>
						<uni-swipe-action-item :rightOptions="rightOptions" :key="index"
							v-for="(item, index) in jobInForm.mesPwoJobCvDetailList"
							@click="(data) => clickDetail(index,data)" @change="swipChange">
							<uni-badge :text="index+1" type="primary"></uni-badge>
							<uni-forms-item label="物料编码" :labelWidth='90'
								:name="'mesPwoJobCvDetailList.'+ index +'.materialCode'">
								<uni-easyinput type="text" disabled v-model="item.materialCode"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="物料名称" :labelWidth='90'
								:name="'mesPwoJobCvDetailList.'+ index +'.materialName'">
								<uni-easyinput type="text" disabled v-model="item.materialName"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="物料批号" :labelWidth='90'
								:name="'mesPwoJobCvDetailList.'+ index +'.materialBatchNo'">
								<uni-easyinput type="text" disabled v-model="item.materialBatchNo"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="生产车间" :labelWidth='90' :rules="rules.workshopCode"
								:name="'mesPwoJobCvDetailList.'+ index +'.workshopCode'">
								<uni-easyinput suffixIcon="scan" @iconClick="scanBarworkshopCode(index)" type="text"
									v-model="item.workshopCode"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="目标仓库" :labelWidth='90'
								:name="'mesPwoJobCvDetailList.'+ index +'.whCodeDest'">
								<uni-easyinput type="text" v-model="item.whCodeDest"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="目标库位" :labelWidth='90'
								:name="'mesPwoJobCvDetailList.'+ index +'.locCodeDest'">
								<uni-easyinput type="text" v-model="item.locCodeDest"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="转移数量" :labelWidth='90' :rules="rules.number"
								:name="'mesPwoJobCvDetailList.'+ index +'.number'">
								<u-number-box button-size="36" inputWidth="120" v-model="item.number"
									min="0"></u-number-box>
							</uni-forms-item>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</uni-collapse-item>
			</uni-forms>
		</uni-collapse>

		<u-button type="primary" @click="jobInSubmit" v-if="!isPwoRoute">提交</u-button>
	</view>
</template>

<script>
	import {
		getDrawMat,
		addConversion
	} from "@/api/mes/pwoDraw.js";
	import {
		getDicts
	} from "@/api/system/dict/dictData.js";
	export default {
		onLoad: function(option) {
			console.log(option);
			if (option) {
				this.jobInForm.pwoCode = option.pwoCode;
				this.jobInForm.type = option.type
				this.jobInForm.mesPwoJobCvDetailList = JSON.parse(decodeURIComponent(option.mesPwoJobCvDetailList));
				this.isPwoRoute = true;
			}
			getDicts("mes_conv_type").then(res => {
				this.typeOptions = res.data.map(dict => {
					return {
						text: dict.dictLabel,
						value: dict.dictValue,
						diasble: false
					}
				});
			})
		},
		data() {
			return {
				isPwoRoute: false,
				typeOptions: [],
				jobInForm: {
					pwoCode: "",
					mesPwoJobCvDetailList: [],
				},
				rightOptions: [{
					text: '删除',
					style: {
						backgroundColor: '#ff2a17'
					}
				}, ],
				rules: {
					pwoCode: [{
						rules: [{
							required: true,
							errorMessage: '请输入工单！'
						}]
					}],
					type: [{
						rules: [{
							required: true,
							errorMessage: '请输入转移单类型!',
						}]
					}],
					materialCode: [{
						required: true,
						errorMessage: '请输入物料编码!'
					}],
					materialName: [{
						required: true,
						errorMessage: '请输入物料名称!'
					}],
					number: [{
						required: true,
						errorMessage: '请输入转移数量!'
					}],
					workshopCode: [{
						required: true,
						errorMessage: '请输入生产车间!'
					}]
				}
			}
		},
		methods: {
			deleteDetail(index) {
				this.jobInForm.mesPwoJobCvDetailList.splice(index, 1);
			},
			clickDetail(itemIndex, {
				position,
				index
			}) {
				if (index == 0) {
					this.deleteDetail(itemIndex);
				}
			},
			submit() {},
			reset(code) {
				this.jobInForm = {
					pwoCode: code,
					mesPwoJobCvDetailList: [],
				};
			},
			scanJobCode(code) {
				if (code) {
					getDrawMat(code).then(res => {
						this.reset(code);
						this.jobInForm.type = 1;
						for (let i = 0; i < res.rows.length; i++) {
							let obj = {};
							obj.materialCode = res.rows[i].materialCode;
							obj.materialName = res.rows[i].materialName;
							obj.materialBatchNo = res.rows[i].materialBatchNo;
							this.jobInForm.mesPwoJobCvDetailList.push(obj);
						}
					})
				}
			},
			jobInSubmit() {
				this.$refs["jobInForm"].validate().then(valid => {
					this.$modal.loading('提交中')
					addConversion(this.jobInForm).then(response => {
						this.$modal.closeLoading();
						this.$modal.msgSuccess("工单领料成功!");
						setTimeout(() => {
							this.$tab.switchTab("/pages/work/index");
						}, 500);
					});
				});
			},
			scanBar() {
				const _this = this;
				uni.scanCode({
					scanType: ['barCode', 'qrCode'],
					success: function(res) {
						_this.jobInForm.pwoCode = res.result;
						_this.scanJobCode(_this.jobInForm.pwoCode);
					}
				});
			},
			scanBarworkshopCode(index) {
				const _this = this;
				uni.scanCode({
					scanType: ['barCode', 'qrCode'],
					success: function(res) {
						_this.jobInForm.mesPwoJobCvDetailList[index].workshopCode = res.result;
					}
				});
			}
		}
	}
</script>

<style>
</style>