aiot-app/pages/home/wt/components/businessOpportunity/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="contactName" borderBottom>
					<u--input style="width: 100%;" disabled :value='`${form.contactName}`'></u--input>
				</u-form-item>
				<!-- @tap="showUserPicker" -->
				<u-form-item label="商机名称" prop="name" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.name"></u--input>
					<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
				</u-form-item>
				<u-form-item label="负责人名称" prop="responsibleName" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.responsibleName"></u--input>
				</u-form-item>
				<u-form-item label="赢单率(%)" prop="winRate" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.winRate"></u--input>
				</u-form-item>
				<u-form-item label="预算(万元)" prop="budget" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.budget"></u--input>
				</u-form-item>

				<u-form-item label="商机阶段" prop="stageName" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.stageName"></u--input>
				</u-form-item>
				<u-form-item label="预计结单日期" prop="expectedClosingDate" borderBottom>
					<u--input style="width: 100%;" disabled v-model="form.expectedClosingDate"></u--input>
				</u-form-item>
			</u--form>

		</view>
		<view v-show='curNow===1'>
			<u-sticky offset-top="100">
				<u-tag :text="`总计: ${totalPrice.toFixed(2)}`" 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${index}`'
					labelWidth='140rpx'>
					<u-row v-for="(key,index1) in tableField" :key="index1">
						<u-col :span="12">
							<u-form-item v-if="key.type=='date'" required :label="key.label"
								prop="produceDeliveryDeadline" borderBottom>
								<u--input style="width: 100%;" :disabled='key.disabled' v-model="item[key.field]"
									@click.native="(e)=>openCalendar(e,index)"></u--input>
							</u-form-item>
							<u-form-item v-else :label="key.label" :prop="key.field" borderBottom>

								<u--input style="width: 100%;" 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>
		<u-calendar :show="calendarShow" @confirm="confirm" @close='calendarShow=false'></u-calendar>
	</view>
</template>

<script>
	import {
		getBusinessOpportunityDetailAPI,
		businessOpportunityUpdateAPI
	} from '@/api/wt/index.js'
	export default {
		props: {
			businessId: {
				default: ''
			},
			taskDefinitionKey: {
				default: ''
			},
		},
		data() {
			return {
				form: {},
				calendarShow: false,
				tableField: [{
						label: '名称',
						field: 'productName',
					},
					{
						label: '编码',
						field: 'productCode',
					},
					{
						label: '类型',
						field: 'productCategoryName',
					},
					{
						label: '单价',
						field: 'singlePrice',
					},
					{
						label: '数量',
						field: 'totalCount',
					},
					{
						label: '合计',
						field: 'totalPrice',
					},
					{
						label: '生产交付交期',
						field: 'produceDeliveryDeadline',
						type: 'date',
						disabled: !['productionSupervisorApprove1','productionSupervisorApprove2'].includes(this.taskDefinitionKey)
					},
				],
				list: ['基本信息', '产品清单'],
				totalPrice: 0,
				curNow: 0,
				curIndex: null,
				rules: {
					produceDeliveryDeadline: {
						type: 'string',
						required: true,
						message: '请选择生产交付日期',
						trigger: ['blur', 'change']
					},
				}

			}
		},
		async mounted() {
			await this.getDetailData(this.businessId);
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			},
			async getDetailData(id) {
				const data = await getBusinessOpportunityDetailAPI(id);
				if (data) {
					this.form = data;
					console.log(this.form.productList)
					this.totalPrice = this.form.productList.reduce((num, row) => num += row.totalPrice, 0)
				}
			},
			openCalendar(e, index) {
				this.calendarShow = true
				this.curIndex = index
			},
			confirm(e) {
				this.$set(this.form.productList[this.curIndex], 'produceDeliveryDeadline', ...e)
				this.calendarShow = false
			},
			//
			getTableValue() {
				let validField = ['produceDeliveryDeadline']
				let valid = false
				for (var i = 0; i < validField.length; i++) {
					valid = this.form.productList.some(item => !!item[validField[i]] == false)
					if (valid) break
				}
				return new Promise(async (resolve, reject) => {
					valid ? reject(uni.$u.toast('请完善产品清单信息')) : resolve(this.form)
				})
			},
		}
	}
</script>

<style>
</style>