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

<template>
	<view class="">
		<u-sticky offset-top="50">
			<view class="subsection-bar">
				<view
					v-for="(item, index) in list"
					:key="index"
					class="subsection-item"
					:class="{ 'subsection-item-active': curNow === index }"
					@click="sectionChange(index)"
				>
					<text class="subsection-text">{{ item }}</text>
				</view>
			</view>
		</u-sticky>

		<view v-show='curNow===0'>
			<u--form style="margin: 0 20px;" labelPosition="left" :model="form" ref="uForm" labelWidth='140rpx'>
				<u-form-item label="订单编号" prop="orderNo" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.orderNo"></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-form-item>
				<u-form-item label="采购计划名称" prop="purchasePlanName" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.purchasePlanName"></u--input>
				</u-form-item>
				<u-form-item label="项目名称" prop="projectName" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.projectName"></u--input>
				</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 label="需求类型" prop="sourceTypeName" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.sourceTypeName"></u--input>
				</u-form-item>
				<u-form-item label="采购订单类型" prop="purchaseTypeName" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.purchaseTypeName"></u--input>
				</u-form-item>
				<u-form-item label="应付金额" prop="payAmount" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.payAmount"></u--input>
				</u-form-item>

				<u-form-item label="订单总金额" prop="totalAmount" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.totalAmount"></u--input>
				</u-form-item>
				<u-form-item label="附件" prop="orderFiles" borderBottom>
					<fileMain v-model="form.orderFiles" 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 v-model="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.totalAmount&&form.totalAmount} 应付金额: ${form.payAmount&&form.payAmount}`"
					size="large" type="success"></u-tag>
			</u-sticky>
			<view v-for="(item,index) in form['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 form['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 {
		purchaseOrderGetByIdAPI
	} 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: {
			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',
					}
				]
			},
		},
		data() {
			return {
				form: {},
				tableField: [{
						label: '类型',
						field: 'productCategoryName',
					}, {
						label: '名称',
						field: 'productName',
					},
					{
						label: '编码',
						field: 'productCode',
					},

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

					},
					{
						field: 'modelType',
						label: '型号',

					},
					{
						field: 'colorKey',
						label: '颜色',

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

					},
					{
						label: '供应商代号',
						field: 'supplierMark',
					},
					{
						label: '单价',
						field: 'singlePrice',
					},
					{
						label: '数量',
						field: 'totalCount',
					},
					{
						label: '采购总金额',
						field: 'totalPrice',
					},
				],
				list: ['订单信息', '基本信息', '产品清单', '付款计划'],
				curNow: 0
			}
		},
		async mounted() {
			await this.getDetailData(this.businessId);
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			},
			async getDetailData(id) {
				const data = await purchaseOrderGetByIdAPI(id);
				this.form = data;
			}
		}
	}
</script>

<style>
.subsection-bar {
	display: flex;
	background-color: #fff;
	/* padding: 0 16rpx; */
	margin: 16rpx;
	border: 1px solid #ebedf0;
	border-radius: 8rpx;
	overflow: hidden;
}
.subsection-item {
	flex: 1;
	text-align: center;
	padding: 12rpx 0;
	margin: 0 4rpx;
	border-bottom: 4rpx solid transparent;
	transition: all 0.3s;
}
.subsection-item-active {
	color: #fff;
	background-color: #157A2C;
}
.subsection-text {
	font-size: 25rpx;
	color: #323233;
}
.subsection-item-active .subsection-text {
	color: #fff;
}
</style>