aiot-app/pages/home/wt/components/outBound/taskForm.vue

<template>
	<view class="task-form-container">
		<u-sticky offset-top="50">
			<u-subsection fontSize="25" mode="subsection" :list="tabList" :current="curNow" @change="sectionChange"
				activeColor="#157A2C" bgColor="#fff"></u-subsection>
		</u-sticky>

		<!-- 出库信息 -->
		<view v-show="curNow === 0">
			<u--form style="margin: 0 20px;" labelPosition="left" :model="infoData" ref="uForm" labelWidth="180rpx">
				<u-form-item label="出库单号" borderBottom>
					{{ infoData.bizNo || '-' }}
				</u-form-item>
				<u-form-item label="出库物品类型" borderBottom>
					{{ handleAssetType((infoData.extInfo && infoData.extInfo.assetType)) || '-' }}
				</u-form-item>
				<u-form-item label="出库场景" borderBottom>
					{{ getSceneState(infoData.bizType) || '-' }}
				</u-form-item>
				<u-form-item label="关联订单" borderBottom>
					{{ (extInfo && extInfo.documentSource) || '-' }}
				</u-form-item>
				<u-form-item label="来源单据" borderBottom>
					{{ infoData.sourceBizNo || '-' }}
				</u-form-item>
				<template v-if="infoData.bizType == 3">
					<u-form-item label="客户名称" borderBottom>
						{{ infoData.clientName || '-' }}
					</u-form-item>
					<u-form-item label="客户联系人" borderBottom>
						{{ infoData.clientUser || '-' }}
					</u-form-item>
					<u-form-item label="客户电话" borderBottom>
						{{ infoData.clientPhone || '-' }}
					</u-form-item>
				</template>
				<u-form-item label="领料人" borderBottom>
					{{ infoData.fromUser || '-' }}
				</u-form-item>
				<u-form-item label="领料人联系方式" borderBottom>
					{{ infoData.fromUserPhone || '-' }}
				</u-form-item>
				<u-form-item label="领料人部门" borderBottom>
					{{ (infoData.extInfo && infoData.extInfo.verifyDeptName) || '-' }}
				</u-form-item>
				<u-form-item label="出库时间" borderBottom>
					{{ infoData.storageTime || infoData.createTime || '-' }}
				</u-form-item>
				<u-form-item label="出库登记人" borderBottom>
					{{ (infoData.extInfo && infoData.extInfo.createUserName) || '-' }}
				</u-form-item>
				<u-form-item label="权属部门" borderBottom>
					{{ (infoData.extInfo && infoData.extInfo.deptName) || '-' }}
				</u-form-item>
				<u-form-item label="状态" borderBottom>
					{{ stepsTitle }}
				</u-form-item>
				<u-form-item label="备注" borderBottom>
					{{ infoData.remark || '-' }}
				</u-form-item>
			</u--form>
		</view>

		<!-- 出库物品清单 -->
		<view v-show="curNow === 1">
			<common-product-list :list="productList" :tableField="productFields"></common-product-list>
		</view>

		<!-- 包装明细 -->
		<view v-show="curNow === 2">
			<common-product-list :list="showPackingList" :tableField="packingFields"></common-product-list>
		</view>
	</view>
</template>

<script>
	import { getInboundDetailsById, getInboundDetailsByIds } from '@/api/warehouseManagement'
	import { getInfoBySourceBizNoAll } from '@/api/wms'
	import { allCategoryLevel } from '@/api/wt';
	import { useDictLabel } from '@/utils/dict/index';
	import { outputSceneState, qualityResults, qualityStatus } from '@/enum/dict.js';
	import { mapGetters, mapActions } from 'vuex';
	import { parameterGetByCode } from '@/api/mainData/index.js';
	import commonProductList from '../common/commonProductList.vue';

	export default {
		components: { commonProductList },
		props: {
			businessId: {
				type: String,
				default: ''
			},
			isInterior: {
				type: Boolean,
				default: true
			},
			isIds: {
				type: Boolean,
				default: false
			},
			XTBG: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				tabList: ['出库信息', '物品清单', '包装明细'],
				curNow: 0,
				qualityStatus,
				qualityResults,
				productList: [],
				showPackingList: [],
				packingList: [],
				extInfo: {},
				codeList: [],
				infoData: {},
				stepsTitle: '已完成',
				stepsStatus: 'success',
				active: 0,
				isPrice: 1,
				// 物品清单字段配置
				productFields: [
					{ label: '仓库', field: 'warehouseName' },
					// { label: '编码', field: 'categoryCode' },
					// { label: '名称', field: 'categoryName' },
					{ label: '型号', field: 'categoryModel' },
					{ label: '规格', field: 'specification' },
					{ label: '牌号', field: 'brandNum' },
					{ label: '批次号', field: 'batchNo' },
					{ label: '包装数量', field: 'packingQuantity' },
					{ label: '单位', field: 'packingUnit' },
					{ label: '单价', field: 'singlePrice' },
					{ label: '计量数量', field: 'measureQuantity' },
					{ label: '计量单位', field: 'measureUnit' },
					{ label: '重量', field: 'weight' },
					{ label: '重量单位', field: 'weightUnit' },
					{ label: '机型', field: 'modelKey' },
					{ label: '颜色', field: 'colorKey' },
					{ label: '锁定数量', field: 'lockQuantity' },
					{ label: '库存', field: 'stockNum' },
				],
				// 包装明细字段配置
				packingFields: [
					// { label: '编码', field: 'categoryCode' },
					// { label: '名称', field: 'categoryName' },
					{ label: '批次号', field: 'batchNo' },
					{ label: '发货条码', field: 'barcodes' },
					{ label: '包装编码', field: 'packageNo' },
					{ label: '包装数量', field: 'packingQuantity' },
					{ label: '单位', field: 'packingUnit' },
					{ label: '计量数量', field: 'measureQuantity' },
					{ label: '计量单位', field: 'measureUnit' },
					{ label: '物料代号', field: 'materielDesignation' },
					{ label: '客户代号', field: 'clientCode' },
					{ label: '刻码', field: 'engrave' },
					{ label: '重量', field: 'weight' },
					{ label: '重量单位', field: 'weightUnit' },
					{ label: '机型', field: 'modelKey' },
					{ label: '颜色', field: 'colorKey' },
					{ label: '供应商', field: 'supplierName' },
					{ label: '供应商代号', field: 'supplierCode' },
					{ label: '质检结果', field: 'result', type: 'qualityResult' },
					{ label: '质检状态', field: 'status', type: 'qualityStatus' },
					{ label: '生产日期', field: 'productionDate' },
					{ label: '采购日期', field: 'purchaseDate' },
				],
			};
		},
		watch: {
			'infoData.verifyStatus': {
				immediate: true,
				handler(val) {
					if (val == 0) {
						this.active = 1;
						this.stepsTitle = '未审核';
						this.stepsStatus = 'wait';
					} else if (val == 1) {
						this.active = 2;
						this.stepsTitle = '审核中';
						this.stepsStatus = 'process';
					} else if (val == 2) {
						this.active = 2;
						this.stepsTitle = '审核通过';
						this.stepsStatus = 'success';
					} else if (val == 3) {
						this.active = 2;
						this.stepsTitle = '驳回';
						this.stepsStatus = 'error';
					}
				}
			},
		},
		computed: {
			...mapGetters(['getDictValue']),
			clientEnvironmentId() {
				return this.$store.state.user.info.clientEnvironmentId;
			},
		},
		created() {
			// 仓库出入库是否显示金额
			parameterGetByCode({
				code: 'wms_price'
			}).then((res) => {
				this.isPrice = res.value;
			});
			this.requestDict('类型用途');
			this.getAllCategoryType();
			this._getInfo(this.businessId);
		},
		methods: {
			...mapActions('dict', ['requestDict']),
			getSceneState: useDictLabel(outputSceneState),
			sectionChange(index) {
				this.curNow = index;
			},
			handleAssetType(r) {
				const code = this.codeList.find((item) => item.dictCode == r);
				return (code && code.dictValue);
			},
			async getAllCategoryType() {
				const data = await allCategoryLevel();
				console.log('getAllCategoryType', data);
				this.codeList = data.map((item) => {
					return { dictCode: item.id, dictValue: item.name };
				});
			},
			async _getInfo(id) {
				if (!id) return;
				let res = {};
				let resAll = [];
				if (this.isInterior) {
					res = await getInboundDetailsById(id);
				} else if (this.isIds) {
					resAll = await getInboundDetailsByIds(id);
				} else {
					res = await getInfoBySourceBizNoAll(id);
					res = res[0] || {};
				}
				if (this.isIds) {
					res = JSON.parse(JSON.stringify(resAll[0]));
					this.extInfo = resAll[0].extInfo;
					res['outInDetailList'] = [];
					resAll.forEach((item) => {
						item.outInDetailList.forEach((val) => {
							val['bizNo'] = item.bizNo;
							res['outInDetailList'].push(val);
						});
					});
					res['bizNo'] = resAll.map((item) => item.bizNo);
					this.infoData = res;
				} else {
					this.infoData = res;
					this.extInfo = res && res.extInfo;
				}
				this.productList = (res && res.outInDetailList && res.outInDetailList.map((productItem) => {
					return {
						...productItem,
						productCode: productItem.categoryCode,
						productName: productItem.categoryName,
						outInDetailRecordRequestList:
							(productItem.outInDetailRecordRequestList && productItem.outInDetailRecordRequestList.map((packingItem) => {
								return {
									...packingItem,
									categoryName: productItem.categoryName,
									categoryCode: productItem.categoryCode,
									supplierCode: productItem.supplierCode,
									supplierName: productItem.supplierName,
									materialDetailList: (packingItem.materialDetailList && packingItem.materialDetailList.map((materialItem) => {
										return {
											...materialItem,
											categoryName: productItem.categoryName,
											categoryCode: productItem.categoryCode
										};
									}))
								};
							}))
					};
				})) || [];
				// 获取包装维度数据，预处理质检字段为文本
				const arr = [];
				this.productList.forEach((item) => {
					(item.outInDetailRecordRequestList || []).forEach((k) => {
						arr.push({
							...k,
							productCode: k.packageNo || k.categoryCode,
							productName: k.categoryName || '包装',
							result: qualityResults[k.result] != null ? qualityResults[k.result] : k.result,
							status: qualityStatus[k.status] != null ? qualityStatus[k.status] : k.status,
						});
					});
				});
				this.packingList = arr;
				this.showPackingList = arr;
			},
			getTableValue() {
				return {};
			}
		}
	};
</script>

<style lang="scss" scoped>
	.task-form-container {
		min-height: 100vh;
		background-color: #fff;
	}
</style>