aiot-app/pages/home/wt/components/purchaseNeedManage/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='140rpx'>
				<!-- @tap="showDeptPicker" -->
				<u-form-item label="需求类型" prop="sourceTypeName" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.sourceTypeName"></u--input>
				</u-form-item>
				<!-- @tap="showUserPicker" -->
				<u-form-item label="需求单名称" prop="requirementName" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.requirementName"></u--input>
					<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
				</u-form-item>
				<u-form-item label="需求部门" prop="requireDeptName" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.requireDeptName"></u--input>
				</u-form-item>
				<u-form-item label="需求人" prop="requireUserName" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.requireUserName"></u--input>
				</u-form-item> 
				<u-form-item v-if='form.sourceType==1' label="销售合同" prop="saleContractName" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.saleContractName"></u--input>
				</u-form-item>
				<u-form-item v-if='form.sourceType==1' label="销售订单" prop="saleOrderNo" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.saleOrderNo"></u--input>
				</u-form-item>
				<u-form-item label="是否接受拆单" prop="acceptUnpack" borderBottom>
					<u-tag v-if='form.acceptUnpack==1' text="接受"  size="large" type="success"></u-tag>
					<u-tag v-else-if='form.acceptUnpack==0' text="不接受"  size="large" type="warning"></u-tag>
					<u--input v-else style="width: 100%;" disabled v-model="form.acceptUnpack"></u--input>
				</u-form-item>

				<u-form-item label="用途" prop="useTo" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.useTo"></u--input>
				</u-form-item>
				<u-form-item label="附件" prop="fileId" borderBottom>
					<fileMain type="view" v-model="form.fileId"></fileMain>
				</u-form-item>
				<u-form-item label="备注" prop="remark" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.remark"></u--input>
				</u-form-item>
			</u--form>

		</view>
		<view v-show='curNow==1'>
			<view v-for="(item,index) in form['detailList']" :key="index">
				<u--form style="margin: 0 20px;" labelPosition="left" :model="form" ref="uForm" labelWidth='140rpx'>
					<u-row v-for="(key,index1) in tableField" :key="index1">
						<u-col :span="12">
							<u-form-item :label="key.label" prop="categoryName" borderBottom>
								<view v-if="key.field == 'expectReceiveDate'">
									<view v-if="item.arrivalWay == 2" style="color: #42b983;" @click="settingDate(item, index)">
										分批时间
									</view>
									<u--input v-else style="width: 100%;" :title='item[key.field]' disabled
									v-model="item[key.field]"></u--input>
								</view>
								<view v-else-if="key.field == 'technicalDrawings' || key.field == 'files'">
									<fileMain type="view" v-model="item[key.field]"></fileMain>
								</view>
								<u--input v-else style="width: 100%;" :title='item[key.field]' disabled
									v-model="item[key.field]"></u--input>
							</u-form-item>
						</u-col>

					</u-row>
				</u--form>
				<u-gap height="40" bgColor="#f0f0f0"></u-gap>
			</view>
		</view>
		<timePopup ref="timePopupRef" :isView="true"></timePopup>
	</view>
</template>

<script>
	import {
		getPurchaseRequirementByIdsAPI
	} from '@/api/wt/index.js'
	import fileMain from "@/pages/doc/index.vue"
	import { levelList, lbjtList } from '@/enum/dict'
	import { getByCode } from '@/api/pda/common.js'
	import timePopup from '@/pages/purchasingManage/components/timePopup.vue'
	export default {
		props: {
			businessId: {
				default: ''
			},
			taskDefinitionKey: {
				default: ''
			},
		},
		components: {
			fileMain,
			timePopup
		},
		data() {
			return {
				detailData: {},
				form: {},
				tableField: [{
						label: '名称',
						field: 'productName',
					},
					{
						label: '编码',
						field: 'productCode',
					},
					{
						label: '分类',
						field: 'productCategoryName',
					},
					{
						label: '数量',
						field: 'purchaseCountName',
					},
					// {
					// 	label: '单位',
					// 	field: 'purchaseUnit',
					// },
					{
						label: '计量数量',
						field: 'totalCountName',
					},
					// {
					// 	label: '计量单位',
					// 	field: 'measuringUnit',
					// },
					{
						label: '包装规格',
						field: 'packingSpecification',
					},
					{
						label: '物品级别',
						field: 'goodsLevelName',
					},
					{
						label: '库存数量',
						field: 'availableCountBase',
					},
					{
						label: '已采数量',
						field: 'doneTotalCount', // measuringUnit
					},
					{
						label: '待采数量',
						field: 'waitTotalCount', // measuringUnit
					},
					{
						label: '工序',
						field: 'taskName',
					},
					{
						label: '批次号',
						field: 'batchNo',
					},
					{
						label: '供应商',
						field: 'supplierName',
					},
					{
						label: '产地',
						field: 'provenanceName',
					},
					{
						label: '型号',
						field: 'modelType',
					},
					{
						label: '规格',
						field: 'specification',
					},
					{
						label: '品牌',
						field: 'brand',
					},
					{
						label: '机型',
						field: 'modelKey',
					},
					{
						label: '颜色',
						field: 'colorKey',
					},
					{
						label: '到货方式',
						field: 'arrivalWayName',
					},
					{
						label: '到货日期',
						field: 'expectReceiveDate',
					},
					{
						label: '属性类型',
						field: 'produceTypeName',
					},
					{
						label: '图纸附件',
						field: 'technicalDrawings',
					},
					{
						label: '附件',
						field: 'files',
					},
					{
						label: '备注',
						field: 'remark',
					},
				],
				list: ['基本信息', '需求清单'],
				curNow: 0,
				arrivalWayList: [
					{ text: '一次性到货', value: 1 },
					{ text: '分批到货', value: 2 }
				],
				purchase_origin: [],
				current: {},
				currentIndex: -1,
			}
		},
		async mounted() {
			this.getByCode()
			await this.getDetailData(this.businessId);
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			},
			settingDate(item, index) {
				console.log(item, index)
				this.current = item;
				this.currentIndex = index;
				this.$refs.timePopupRef.open(item, index)
			},
			async getDetailData(id) {
				const data = await getPurchaseRequirementByIdsAPI(id);
				this.form = data
				this.form.fileId = this.form.fileId ? JSON.parse(this.form.fileId) : [];
				this.form.detailList.forEach(item => {
					item.purchaseCountName = (item.purchaseCount ? item.purchaseCount : '') + item.purchaseUnit;
					item.totalCountName = (item.totalCount ? item.totalCount : '') + item.measuringUnit;
					item.goodsLevelName = levelList.find(i => i.value == item.goodsLevel)?.text || '';
					item.doneTotalCount = (item.doneTotalCount ? item.doneTotalCount : '') + item.measuringUnit;
					item.waitTotalCount = (item.waitTotalCount ? item.waitTotalCount : '') + item.measuringUnit;
					item.arrivalWayName = this.arrivalWayList.find(i => i.value == item.arrivalWay)?.text || '';
					item.produceTypeName = item.produceType ? item.produceType.map(i => lbjtList[i]).join(',') : '';
					item.provenanceName = this.getProvenance(item.provenance);
				})
				console.log('form~~~', this.form)

			},
			getProvenance(item) {
				if (!item) {
					return '';
				}
				let arr = item;
				if(!Array.isArray(arr)) {
					console.log('arr is not array, convert to array')
					arr = arr.split(',');
				}
				return arr && arr.length ? arr.map((i) => {
					return this.purchase_origin.find(p => p.value == i)?.text
				}).join(',') : '';
			},
			getByCode() {
				const codeS = ['purchase_origin']
				codeS.forEach(async (code) => {
					const codeValue = await getByCode(code);
					this[code] = codeValue.map(item => {
						const key = Object.keys(item)[0]
						return {
							value: key,
							text: item[key]
						}
					})
					console.log(code, this[code])
				})
			},
		}
	}
</script>

<style>
</style>