aiot-app/pages/home/wt/components/salesContract/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="categoryName" borderBottom>
					<u--input style="width: 100%;" disabled :value='`${form.typeName} ${form.categoryName}`'></u--input>
				</u-form-item>
				<!-- @tap="showUserPicker" -->
				<u-form-item label="来源类型" prop="sourceType" borderBottom>
					<u--input style="width: 100%;" disabled :value='`${form.sourceTypeName}`'>
					</u--input>
				</u-form-item>
				<u-form-item v-if="form.sourceType && form.sourceName" :label="sourceName" prop="sourceName" borderBottom>
					<u--input style="width: 100%;" disabled :value='`${form.sourceName}`'>
					</u--input>
				</u-form-item>
				<u-form-item label="合同名称" prop="contractName" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.contractName"></u--input>
					<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
				</u-form-item>
				<u-form-item label="合同编号" prop="contractNumber" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.contractNumber"></u--input>
				</u-form-item>
				<u-form-item label="需求类型" prop="requireSourceTypeName" borderBottom v-if="form.type == 2">
					<u--input style="width: 100%;" disabled v-model="form.requireSourceTypeName"></u--input>
				</u-form-item>
				<u-form-item label="需求部门" prop="requireDeptName" borderBottom v-if="form.type == 2">
					<u--input style="width: 100%;" disabled v-model="form.requireDeptName"></u--input>
				</u-form-item>
				<u-form-item label="需求人" prop="requireUserId" borderBottom v-if="form.type == 2">
					<u--input style="width: 100%;" disabled v-model="form.requireUserName"></u--input>
				</u-form-item>
				<u-form-item :label="form.type == 2 ? '采购部门' : '销售部门'" prop="businessDeptName" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.businessDeptName"></u--input>
				</u-form-item>
				<u-form-item :label="form.type == 2 ? '采购员' : '业务员'" prop="businessUserName" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.businessUserName"></u--input>
				</u-form-item>
				<u-form-item label="编码" prop="contractNo" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.contractNo"></u--input>
				</u-form-item>
				<u-form-item label="编号" prop="contractNumber" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.contractNumber"></u--input>
				</u-form-item>
				<u-form-item label="签订日期" prop="contractStartDate" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.contractStartDate"></u--input>
				</u-form-item>

				<u-form-item label="结束日期" prop="contractEndDate" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.contractEndDate"></u--input>
				</u-form-item>
				<u-form-item label="交易方式" prop="transactionMode" borderBottom>
					<u--input style="width: 100%;" disabled :value="form.transactionModeName"></u--input>
				</u-form-item>
				<u-form-item :label="form.type == 2 ? '收货模式' : '发货模式'" prop="deliveryMode" borderBottom>
					<u--input style="width: 100%;" disabled :value="form.deliveryModeName"></u--input>
				</u-form-item>
				<u-form-item label="结算方式" prop="settlementModeName" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.settlementModeName"></u--input>
				</u-form-item>
				<u-form-item v-if="form.settlementMode == 2 || form.settlementMode == 1" :label="form.settlementMode == 2 ? '结算月份范围' : '结算日期范围'" prop="settlementDate" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.settlementDate"></u--input>
				</u-form-item>
				<u-form-item label="收款日期" prop="receiptDate" borderBottom v-if="form.settlementMode == 2">
					<u--input style="width: 100%;" disabled v-model="form.receiptDate"></u--input>
				</u-form-item>
				<u-form-item label="期数" prop="issueNumber" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.issueNumber"></u--input>
				</u-form-item>
				<u-form-item label="附件" prop="settlementModeName" borderBottom>
				 <fileMain v-model="form.fileId" type="view"></fileMain>
				</u-form-item>
			</u--form>

		</view>
		<view v-show='curNow===1'>
			<u--form style="margin: 0 20px;" labelPosition="left" :model="form" ref="uForm" labelWidth='140rpx'>
				<u-form-item label="甲方名称" prop="partaName" borderBottom>
					<u--input style="width: 100%;" disabled :value='`${form.partaName}`'></u--input>
				</u-form-item>
				<u-form-item label="甲方代码" prop="partaUnifiedSocialCreditCode" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.partaUnifiedSocialCreditCode"></u--input>
				</u-form-item>
				<u-form-item label="甲方联系人" prop="partaLinkName" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.partaLinkName"></u--input>
				</u-form-item>
				<u-form-item label="甲方电话" prop="partaTel" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.partaTel"></u--input>
				</u-form-item>
				<u-form-item label="甲方传真" prop="partaFax" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.partaFax"></u--input>
				</u-form-item>
				<u-form-item label="甲方Email" prop="partaEmail" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.partaEmail"></u--input>
				</u-form-item>
				<u-form-item label="甲方地址" prop="partaAddress" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.partaAddress"></u--input>
				</u-form-item>


				<u-form-item label="乙方名称" prop="partbName" borderBottom>
					<u--input style="width: 100%;" disabled :value='`${form.partbName}`'></u--input>
				</u-form-item>
				<u-form-item label="乙方代码" prop="partbUnifiedSocialCreditCode" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.partbUnifiedSocialCreditCode"></u--input>
				</u-form-item>
				<u-form-item label="乙方联系人" prop="partbLinkName" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.partbLinkName"></u--input>
				</u-form-item>
				<u-form-item label="乙方电话" prop="partbTel" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.partbTel"></u--input>
				</u-form-item>
				<u-form-item label="乙方传真" prop="partbFax" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.partbFax"></u--input>
				</u-form-item>
				<u-form-item label="乙方Email" prop="partbEmail" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.partbEmail"></u--input>
				</u-form-item>
				<u-form-item label="乙方地址" prop="partbAddress" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.partbAddress"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view v-show='curNow===2'>
			<u-sticky offset-top="100">
				<u-tag
					:text="`总计: ${form.totalPrice&&form.totalPrice} 优惠总计: ${form.discountTotalPrice&&form.discountTotalPrice}`"
					size="large" type="success"></u-tag>
			</u-sticky>
			<view v-for="(item,index) in detailData['productList']" :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>
								<u--input 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>
		<view v-show='curNow===3'>
			<view v-for="(item,index) in detailData['receiptPaymentList']" :key="index">
				<u--form style="margin: 0 20px;" labelPosition="left" :model="form" ref="uForm" labelWidth='140rpx'>
					<u-row v-for="(key,index1) in feeTableField" :key="index1">
						<u-col :span="12">
							<u-form-item :label="key.label" prop="categoryName" borderBottom>
								<u--input 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>


	</view>
</template>

<script>
	import {
		getDetail
	} from '@/api/wt/index.js'
	import fileMain from "@/pages/doc/index.vue"
	import {transactionMethodsOp,shippingModeOp,shippingModePurchaseOp, pricingWayList, levelList, quoteTypeOp} from '@/enum/dict.js'
		
	export default {
		components:{fileMain},
		props: {
			businessId: {
				default: ''
			},
			taskDefinitionKey: {
				default: ''
			},
		},
		computed: {
			sourceName() {
				console.log('this.form.sourceType',this.form.sourceType)
				switch (this.form.sourceType) {
					case 1:
						return '报价单'
					case 2:
						return '核价单'
					case 3:
						return '计划名称'
					case 4:
						return '商机名称'
					case 5:
						return '退货单'
					case 6:
						return '客户'
					case 7:
						return '销售订单'
					default:
						return ''
				}
			},
			shippingModeOptions() {
				return this.form.type == 2 ? shippingModePurchaseOp : shippingModeOp;
			},
			feeTableField() {
				return [{
						label: '期数',
						field: 'issueNumber',
					}, 
					{
						label: '款项类型',
						field: 'typeName',
					},
					{
						label: '款项名称',
						field: 'moneyName',
					},
					{
						label: '比例(%)',
						field: 'ratio',
					},
					{
						label: this.form.type == 2 ? '计划付款金额(元)' : '计划收款金额(元)',
						field: 'price',
					},
					{
						label: this.form.type == 2 ? '计划付款日期' : '计划收款日期',
						field: 'deadLine',
					},
					{
						label: '说明',
						field: 'remark',
					}
				]
			},
			list() {
				return this.form.type == 2 ? ['合同信息', '基本信息', '产品清单', '付款计划'] : ['合同信息', '基本信息', '产品清单', '收款计划']
			},
		},
		data() {
			return {
				pricingWayList,
				quoteTypeOp,
				levelList,
				detailData: {},
				form: {},
				transactionMethodsOp,
				sourceTypeList: [
					{
						code: 1,
						name: '报价单',
						parentId: '1'
					},
					{
						code: 2,
						name: '核价单',
						parentId: '2'
					},
					{
						code: 3,
						name: '采购计划',
						parentId: '2'
					},
					{
						code: 4,
						name: '商机',
						parentId: '1'
					},
					{
						code: 5,
						name: '退货单',
						parentId: '1'
					},
					{
						code: 6,
						name: '客户',
						parentId: '1'
					},
					{
						code: 7,
						name: '销售订单',
						parentId: '1'
					}
					],
				tableField: [{
						label: '类型',
						field: 'productCategoryName',
					}, {
						label: '名称',
						field: 'productName',
					},
					{
						label: '编码',
						field: 'productCode',
					},
					{
						field: 'pricingWayName',
						label: '计价方式',

					},
					{
						field: 'specification',
						label: '规格',

					},
					{
						field: 'brandNo',
						label: '牌号',

					},
					{
						label: '客户代号',
						field: 'customerMark',
					},
					{
						label: '工序',
						field: 'taskName',
					},
					{
						label: '数量',
						field: 'totalCount',
					},
					{
						label: '价格类型',
						field: 'goodsPriceType ',
					},
					{
						label: '单价',
						field: 'singlePrice',
					},
					{
						label: '税率',
						field: 'taxRate',
					},
					{
						label: '不含税单价',
						field: 'notaxSinglePrice',
					},
					{
						label: '报价方式',
						field: 'quoteWayName',
					},
					{
						label: '折让比例',
						field: 'discountRatio',
					},
					{
						label: '折让单价',
						field: 'discountSinglePrice',
					},
					{
						label: '合计',
						field: 'totalPrice',
					},
					{
						label: '折让合计',
						field: 'discountTotalPrice',
					},
					{
						label: '生产要求',
						field: 'productionRequirements',
					},
					{
						label: '包装规格',
						field: 'packingSpecification',
					},
					{
						label: '计量数量',
						field: 'totalCount',
					},
					{
						label: '单重',
						field: 'singleWeight',
					},
					{
						label: '总重',
						field: 'totalWeight',
					},
					{
						label: '增重重量',
						field: 'increaseTotalWeight',
					},
					{
						label: '物品级别',
						field: 'goodsLevelName',
					},
					{
						label: '批次号',
						field: 'batchNo',
					},
					{
						label: '型号',
						field: 'modelType',
					},
					{
						label: '机型',
						field: 'modelKey',
					},
					{
						label: '颜色',
						field: 'colorKey',
					},
				],
				feeTableField1: [{
						label: '期数',
						field: 'issueNumber',
					}, 
					{
						label: '款项类型',
						field: 'type',
					},
					{
						label: '款项名称',
						field: 'moneyName',
					},
					{
						label: '比例(%)',
						field: 'ratio',
					},
					{
						label: '计划付款金额(元)',
						field: 'price',
					},
					{
						label: '计划付款日期',
						field: 'deadLine',
					},
					{
						label: '说明',
						field: 'remark',
					}
				],
				list1: ['合同信息', '基本信息', '产品清单', '付款计划'],
				curNow: 0
			}
		},
		async mounted() {
			await this.getDetailData(this.businessId);
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			},
			async getDetailData(id) {
				const data = await getDetail(id);
				if (data) {
					const {contractVO} = data
					console.log('data~~~',data)
					contractVO['sourceTypeName'] = this.sourceTypeList.find(item => item.code == contractVO['sourceType'])?.name || '';
					contractVO['transactionModeName'] = this.transactionMethodsOp.find(item => item.value == contractVO['transactionMode'])?.label || '';
					contractVO['deliveryModeName'] = this.shippingModeOptions.find(item => item.value == contractVO['deliveryMode'])?.label || '';
					contractVO['settlementDate'] = contractVO.startSettlementDate ? `${contractVO.startSettlementDate} - ${contractVO.endSettlementDate}` : '';
					data['receiptPaymentList'] = data['receiptPaymentList'].length ? data['receiptPaymentList'] : [{}]
					data.productList = data.productList.map(item => {
						item.pricingWayName = this.pricingWayList.find(way => way.id == item.pricingWay)?.name || '';
						item.quoteWayName = this.quoteTypeOp.find(type => type.value == item.quoteType)?.label || '';
						item.goodsLevelName = this.levelList.find(level => level.value == item.goodsLevel)?.label || '';
						return item;
					})
					this.detailData = data;
					this.form = contractVO;

				}
			}
		}
	}
</script>

<style scoped>

</style>