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

<template>
	<view class="container">
		<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'>
			<view class="info-card">
				<view class="info-row">
					<text class="info-label">收货确认单编码</text>
					<text class="info-value">{{ form.receiveConfirmNo || '-' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">收货单</text>
					<text class="info-value">{{ form.receiveCode || '-' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">回执附件</text>
					<fileMain :value="replyFiles" type="view"></fileMain>
				</view>
			</view>
		</view>

		<!-- 收货信息 -->
		<view v-show='curNow===1'>
			<view class="info-card">
				<view class="info-row">
					<text class="info-label">收货单编码</text>
					<text class="info-value">{{ form.receiveCode || '-' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">订单编码</text>
					<text class="info-value">{{ form.orderNo || '-' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">供应商名称</text>
					<text class="info-value">{{ form.supplierName || '-' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">供应商联系人</text>
					<text class="info-value">{{ form.linkName || '-' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">供应商电话</text>
					<text class="info-value">{{ form.linkPhone || '-' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">车牌号</text>
					<text class="info-value">{{ form.carNo || '-' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">收货日期</text>
					<text class="info-value">{{ form.receiveDate || '-' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">附件</text>
					<fileMain :value="receiveFiles" type="view"></fileMain>
				</view>
			</view>
		</view>

		<!-- 物品清单 -->
		<view v-show='curNow===2'>
			<common-product-list :list="form.productList" :tableField="productField"></common-product-list>
		</view>
	</view>
</template>

<script>
	import fileMain from "@/pages/doc/index.vue"
	import commonProductList from "../common/commonProductList.vue"
	import { levelList, pricingWayList } from '@/enum/dict.js'
	import { getReceiveConfirmDetail } from '@/api/purchasingManage/index.js';
	import { mapGetters } from 'vuex'

	export default {
		components: {
			fileMain,
			commonProductList
		},
		props: {
			businessId: {
				default: ''
			}
		},
		computed: {
			...mapGetters(['getDictValue']),
			levelList() {
				return levelList
			},
			pricingWayList() {
				return pricingWayList
			},
			// 处理附件字段，确保是数组类型
			replyFiles() {
				if (!this.form.repliedFiles) return [];
				if (Array.isArray(this.form.repliedFiles)) return this.form.repliedFiles;
				return [this.form.repliedFiles].filter(Boolean);
			},
			receiveFiles() {
				if (!this.form.receiveFiles) return [];
				if (Array.isArray(this.form.receiveFiles)) return this.form.receiveFiles;
				return [this.form.receiveFiles].filter(Boolean);
			}
		},
		data() {
			return {
				form: {
					receiveConfirmNo: '',
					receiveCode: '',
					repliedFiles: '',
					supplierName: '',
					linkName: '',
					linkPhone: '',
					carNo: '',
					receiveDate: '',
					receiveFiles: '',
					receiveNo: '',
					productList: []
				},
				list: ['收货确认单', '收货信息', '物品清单'],
				curNow: 0,
				productField: [
					{ label: '名称', field: 'productName' },
					{ label: '编码', field: 'productCode' },
					{ label: '类型', field: 'productCategoryName' },
					{ label: '工序', field: 'taskName' },
					{ label: '批次号', field: 'batchNo' },
					{ label: '牌号', field: 'productBrand' },
					{ label: '型号', field: 'modelType' },
					{ label: '供应商代号', field: 'supplierMark' },
					{ label: '规格', field: 'specification' },
					{ label: '仓库名称', field: 'warehouseName' },
					{ label: '收货数量', field: 'totalCount', unitField: 'measuringUnit' },
					{ label: '确认数量', field: 'confirmCount', unitField: 'measuringUnit' },
					{ label: '计价方式', field: 'pricingWay', type: 'pricingWay' },
					{ label: '包装规格', field: 'packingSpecification' },
					{ label: '物品级别', field: 'goodsLevel', type: 'level' },
					{ label: '单价', field: 'singlePrice' },
					{ label: '不含税单价', field: 'notaxSinglePrice' },
					{ label: '折后单价', field: 'discountSinglePrice' },
					{ label: '合计', field: 'totalPrice' },
					{ label: '折后合计', field: 'discountTotalPrice' },
					{ label: '产地', field: 'provenance', type: 'dict', dictName: '产地' },
					{ label: '机型', field: 'modelKey' },
					{ label: '颜色', field: 'colorKey' },
					{ label: '生产日期', field: 'productionDate' },
					{ label: '交期截止日期', field: 'deliveryDeadline' },
					{ label: '有效期', field: 'guaranteePeriod' },
					{ label: '有效期截止日期', field: 'guaranteePeriodDeadline' },
					{ label: '技术答疑人', field: 'technicalAnswerName' },
					{ label: '技术参数', field: 'technicalParams' },
					{ label: '备注', field: 'remark' },
					{ label: '收货状态', field: 'isException', type: 'exception' },
				],
				loading: false
			}
		},
		async mounted() {
			await this.getDetailData(this.businessId);
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			},
			async getDetailData(id) {
				this.loading = true;
				const data = await getReceiveConfirmDetail(id);
				this.loading = false;
				if (data) {
					this.form = data;
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
		margin-bottom: 20rpx;
	}

	.info-card {
		background: #fff;
		border-radius: 12rpx;
		padding: 0 24rpx;
		margin-bottom: 20rpx;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.info-row:last-child {
		border-bottom: none;
	}

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

	.info-value {
		font-size: 26rpx;
		color: #333;
		text-align: right;
		margin-left: 20rpx;
		word-break: break-all;
	}
</style>