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

<template>
	<view class="">
		<u-sticky offset-top="50">
			<u-subsection fontSize='25' mode='subsection' :list="list" :current="curNow" @change="sectionChange"
				activeColor='#157A2C'></u-subsection>
		</u-sticky>
		<view v-show='curNow===0'>
			<u--form style="margin: 0 20px;" labelPosition="left" :model="form" ref="uForm" labelWidth='200rpx' :rules="rules">
				<u-form-item label="编码" prop="code" borderBottom>
					{{ form.code || '-' }}
				</u-form-item>
				<u-form-item label="名称" prop="name" borderBottom>
					{{ form.name || '-' }}
				</u-form-item>
				<u-form-item label="来源类型" prop="relationTypeName" borderBottom>
					{{ form.relationTypeName || '-' }}
				</u-form-item>
				<u-form-item label="来源编码" prop="relationCode" borderBottom>
					{{ form.relationCode || '-' }}
				</u-form-item>
				<u-form-item label="来源名称" prop="relationName" borderBottom>
					{{ form.relationName || '-' }}
				</u-form-item>
				<u-form-item label="创建人" prop="createUserName" borderBottom>
					{{ form.createUserName || '-' }}
				</u-form-item>
				<u-form-item label="创建时间" prop="createTime" borderBottom>
					{{ form.createTime || '-' }}
				</u-form-item>
			</u--form>
		</view>
		<view v-show='curNow===1'>
			<view v-for="(item, index) in form.detailList" :key="index">
				<view class="product-card">
					<view class="card-header">
						<text class="product-name">{{ item.productName || '物品' + (index + 1) }}</text>
						<text class="product-price">{{ item.productCode || '-' }}</text>
					</view>
					<view class="card-body">
						<view class="info-row">
							<text class="info-label">异常类型：</text>
							<uni-data-select v-model="item.exceptionDetermine" :localdata="exceptionDetermineOptions"></uni-data-select>
						</view>
						<view class="info-row">
							<text class="info-label">处置方式：</text>
							<uni-data-select v-model="item.exceptionDispose" :localdata="exceptionDisposeOptions"></uni-data-select>
						</view>
						<view class="info-row" v-for="(field, idx) in tableField.filter(f => f.field !== 'exceptionDetermine' && f.field !== 'exceptionDispose')" :key="idx">
							<text class="info-label">{{ field.label }}：</text>
							<text class="info-value">{{ formatValue(item, field) }} {{ field.unit || '' }}</text>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-if="!list || list.length === 0" text="暂无物品清单" marginTop="100"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		exceptionmanagementInfoAPI
	} from '@/api/saleManage/saleorder/index.js'
	import fileMain from "@/pages/doc/index.vue"
	import commonProductList from "../common/commonProductList.vue"
	import { mapGetters } from 'vuex'
	import {transactionMethodsOp,shippingModeOp,shippingModePurchaseOp, pricingWayList, levelList, quoteTypeOp, relationTypeOption} from '@/enum/dict.js'
	export default {
		components: {
			fileMain,
			commonProductList
		},
		props: {
			businessId: {
				default: ''
			},
			taskDefinitionKey: {
				default: ''
			},
		},
		// 暴露方法给父组件调用
		expose: ['validateDetailList', 'form'],
		computed: {
			...mapGetters(['getDictValue']),
			exceptionDetermineOptions() {
				return this.form.relationType == 1
				? [
					{ text: '多发', value: '1' },
					{ text: '少发', value: '2' },
					{ text: '错发', value: '3' },
					{ text: '损坏', value: '4' }
					]
				: [
					{ text: '多收', value: '1' },
					{ text: '少收', value: '2' },
					{ text: '错收', value: '3' },
					{ text: '损坏', value: '4' }
					];
			},
			tableField() {
				return [
					// { label: '异常类型', field: 'exceptionDetermine' },
					// { label: '处置方式', field: 'exceptionDispose' },
					{ label: '规格', field: 'specification' },
					{ label: '型号', field: 'modelType' },
					{ label: '批次号', field: 'batchNo' },
					{ label: '发货条码', field: 'barcodes' },
					{ label: '物料代号', field: 'materielDesignation' },
					{ label: this.form.relationType == 1 ? '客户代号' : '供应商代号', field: 'clientCode' },
					{ label: '客户代号', field: 'customerMark' },
					{ label: '刻码', field: 'engrave' },
					{ label: '包装规格', field: 'packingSpecification' },
					{ label: '机型', field: 'modelKey' },
					{ label: '颜色', field: 'colorKey' },
					{ label: '异常数量', field: 'totalCount' },
					{ label: '描述', field: 'describes' },
				]
			},

		},
		data() {
			return {
				form: {},
				list: ['基本信息', '物品清单'],
				curNow: 0,
				rules: {
					// 可添加基础表单校验规则
				},
				exceptionDisposeOptions: [
					{ text: '退货入库', value: '1' },
					{ text: '返工返修', value: '2' },
					{ text: '报损', value: '3' },
					{ text: '报废', value: '4' }
				],
				
			}
		},
		async mounted() {
			await this.getDetailData(this.businessId);
		},
		methods: {
			// 格式化字段值
			formatValue(item, field) {
				let value = item[field.field]
				// 数量字段显示单位
				if (field.field === 'saleCount') {
					const unit = item.saleUnit || ''
					return value ? value + (unit ? ' ' + unit : '') : '-'
				}
				// 计量数量字段显示单位
				if (field.field === 'totalCount') {
					const unit = item.measuringUnit || ''
					return value ? value + (unit ? ' ' + unit : '') : '-'
				}
				// 单重字段显示单位
				if (field.field === 'singleWeight') {
					const unit = item.weightUnit || ''
					return value ? value + (unit ? ' ' + unit : '') : '-'
				}
				// 总重字段显示单位
				if (field.field === 'totalWeight') {
					const unit = item.weightUnit || ''
					return value ? value + (unit ? ' ' + unit : '') : '-'
				}
				// 增重重量字段显示单位
				if (field.field === 'increaseTotalWeight') {
					const unit = item.weightUnit || ''
					return value ? value + (unit ? ' ' + unit : '') : '-'
				}
				// 计价方式特殊处理
				if (field.type === 'pricingWay') {
					const found = pricingWayList.find(p => p.id === value)
					return found ? found.name : '-'
				}
				// 收货状态特殊处理
				if (field.field === 'isException') {
					return value == 1 ? '有异常' : '无异常'
				}
				if (field.field === 'packingQuantity') { 
					const unit = item.packingUnit || ''
					return value ? value + (unit ? ' ' + unit : '') : '-'
				}
				if (field.field === 'type') {
					return value == 1 ? '已回收' : '未回收'
				}
				// 字典类型处理
				if (field.type === 'dict') {
					return this.getDictValue(field.dictName, value) || '-'
				}
				return value || '-'
			},
			sectionChange(index) {
				this.curNow = index;
			},
			async getDetailData(id) {
				const data = await exceptionmanagementInfoAPI(id);
				data.relationTypeName = relationTypeOption[data.relationType] || '-';
				// 初始化明细列表的异常类型和处置方式
				if (data.detailList && data.detailList.length > 0) {
					data.detailList.forEach(item => {
						item.exceptionDetermine = item.exceptionDetermine ? String(item.exceptionDetermine) : ''
						item.exceptionDispose = item.exceptionDispose ? String(item.exceptionDispose) : ''
					})
				}
				this.form = data;
			},
			// 校验明细列表
			validateDetailList() {
				return new Promise((resolve, reject) => {
					if (!this.form.detailList || this.form.detailList.length === 0) {
						resolve()
						return
					}
					for (let i = 0; i < this.form.detailList.length; i++) {
						const item = this.form.detailList[i]
						if (!item.exceptionDetermine) {
							uni.showToast({ title: `第${i + 1}条物品的异常类型不能为空`, icon: 'none' })
							reject(new Error('异常类型不能为空'))
							return
						}
						if (!item.exceptionDispose) {
							uni.showToast({ title: `第${i + 1}条物品的处置方式不能为空`, icon: 'none' })
							reject(new Error('处置方式不能为空'))
							return
						}
					}
					resolve()
				})
			},
			getTableValue() {
				return new Promise(async (resolve, reject) => {
					try {
						await this.validateDetailList()
						// await this.$refs.outForm[0].validate()
						resolve(this.form)
					} catch {
						reject(null)
					}


				})
			},
		}
	}
</script>

<style scoped>
.btnConcel {
		margin-top: 20rpx;
	}
.product-card {
	margin: 20rpx;
	padding: 20rpx;
	background: #fff;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 16rpx;
	border-bottom: 1rpx solid #eee;
	margin-bottom: 16rpx;
}

.product-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
}

.product-price {
	font-size: 26rpx;
	/* color: #157a2c; */
	/* font-weight: bold; */
}

.card-body {
	display: flex;
	flex-wrap: wrap;
}

.info-row {
	width: 50%;
	display: flex;
	padding: 8rpx 0;
	box-sizing: border-box;
	align-items: center;
	padding-right: 10rpx;
}

.info-label {
	color: #666;
	font-size: 26rpx;
	flex-shrink: 0;
}

.info-value {
	color: #333;
	font-size: 26rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>