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

<template>
	<u-cell-group>
		<u-cell :border='false' title="基础信息"></u-cell>
		<u--form style="margin: 0 20px;" labelPosition="left" :model="form" :rules="rules" ref="uForm"
			labelWidth='140rpx'>
			<!-- @tap="showDeptPicker" -->
			<u-form-item label="申请部门" prop="applyDeptName" borderBottom>
				<u--input style="width: 100%;" disabled v-model="form.applyDeptName"></u--input>
				<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
			</u-form-item>
			<!-- @tap="showUserPicker" -->
			<u-form-item label="申请人" prop="applyUserName" borderBottom>
				<u--input style="width: 100%;" disabled v-model="form.applyUserName"></u--input>
				<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
			</u-form-item>
			<u-form-item label="费用类型" prop="feeTypeName" borderBottom>
				<u--input style="width: 100%;" disabled v-model="form.feeTypeName"></u--input>
			</u-form-item>
			<u-form-item label="金额" prop="amount" borderBottom>
				<u--input style="width: 100%;" disabled v-model="form.amount"></u--input>
			</u-form-item>
			<u-form-item label="关联类型" prop="finLinkTypeName" borderBottom>
				<u--input style="width: 100%;" disabled v-model="form.finLinkTypeName"></u--input>
			</u-form-item>

			<u-form-item v-if='form.finLinkType==1' label="客户名称" prop="contactName" borderBottom>
				<u--input style="width: 100%;" disabled v-model="form.contactName"></u--input>
			</u-form-item>
			<u-form-item v-if='form.finLinkType==2' label="供应商名称" prop="contactName" borderBottom>
				<u--input style="width: 100%;" disabled v-model="form.contactName"></u--input>
			</u-form-item>
			<u-form-item v-if='form.finLinkType==3' label="商机名称" prop="opportunityName" borderBottom>
				<u--input style="width: 100%;" disabled v-model="form.opportunityName"></u--input>
			</u-form-item>
			<u-form-item v-if='form.finLinkType==4' label="合同名称" prop="contractName" borderBottom>
				<u--input style="width: 100%;" disabled v-model="form.contractName"></u--input>
			</u-form-item>
			<u-form-item v-if='form.finLinkType==5' label="项目名称" prop="projectName" borderBottom>
				<u--input style="width: 100%;" disabled v-model="form.projectName"></u--input>
			</u-form-item>
			<u-form-item v-if='form.finLinkType==6' label="订单名称" prop="saleOrderCode" borderBottom>
				<u--input style="width: 100%;" disabled v-model="form.saleOrderCode"></u--input>
			</u-form-item>

			<u-form-item v-if="['financeApprove'].includes(taskDefinitionKey)" @tap="showAccountPicker" required
				label="会计科目" prop="accountingSubjectName" borderBottom>
				<u--input style="width: 100%;" v-model="form.accountingSubjectName"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>


			<u-form-item label="备注" prop="remark" borderBottom>
				<u--textarea style="width: 100%;" disabled v-model="form.remark"></u--textarea>
			</u-form-item>
		</u--form>
		<!-- <ba-tree-picker ref="treePicker" :multiple='false' @select-change="getDeptInfo" title="选择部门"
			:localdata='deptTreeList'></ba-tree-picker> -->
		<ba-tree-picker ref="accountTreePicker" :multiple='false' clearable @select-change="getAccountInfo"
			title="选择会计科目" :localdata='accountingSubjectList'></ba-tree-picker>

	</u-cell-group>
</template>

<script>
	import {
		toTreeData
	} from '@/utils/utils.js'
	import baTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue'
	import {
		feeApplyUpdateAPI,
		getFeeApplyInfoAPI
	} from '@/api/wt/index.js'
	import {
		getTreeByPid
	} from "@/api/classifyManage";
	import {
		listOrganizations
	} from "@/api/common.js";
	export default {
		name: 'taskForm1',
		components: {
			baTreePicker
		},
		props: {
			businessId: {
				default: ''
			},
			taskDefinitionKey: {
				default: ''
			},
		},
		data() {
			return {
				applyDeptShow: true,
				form: {
					accountingSubjectId: '',
					accountingSubjectName: "",
					amount: undefined,
					applyDeptId: '',
					applyDeptName: "",
					applyUserId: '',
					applyUserName: "",
					contactId: '',
					contactName: "",
					contractCode: "",
					contractId: '',
					contractName: "",
					finLinkType: '',
					finLinkTypeName: '',
					feeTypeId: '',
					feeTypeName: "",
					feeTypeCode: "",
					files: [],
					opportunityId: '',
					opportunityName: "",
					projectId: '',
					projectName: "",
					purchaseOrderCode: "",
					purchaseOrderId: '',
					remark: "",
					saleOrderCode: "",
					saleOrderId: ''
				},
				feeTypeList: [],
				accountingSubjectList: [],
				deptList: [],
				deptTreeList: [],
				opportunityList: [],
				rules: {
					applyDeptId: {
						type: 'string',
						required: true,
						message: '请选择',
						trigger: 'change'
					},
					applyUserId: {
						type: 'string',
						required: true,
						message: '请选择',
						trigger: 'change'
					},
					// accountingSubjectId: {required: true, message: '请选择', trigger: 'change'},
					feeTypeId: {
						type: 'string',
						required: true,
						message: '请选择',
						trigger: 'change'
					},
					amount: {
						type: 'number',
						required: true,
						message: '请输入',
						trigger: 'blur'
					},
					accountingSubjectName: {
						type: 'string',
						required: true,
						message: '请选择',
						trigger: 'blur'
					},
				}
			}
		},

		async mounted() {
			//await this.getClassifyList(25, 'feeTypeList')
			await this.getClassifyList(24, 'accountingSubjectList')
			//await this.getDeptList()
			await this.getFeeApplyInfoInfo(this.businessId)
			//	await this.getUserList(this.form.applyDeptId);
		},
		methods: {

			//获取详情
			async getFeeApplyInfoInfo(id) {
				this.form = await getFeeApplyInfoAPI(id)
			},
			//修改关联类型
			handleChangeFinLink(val) {
				this.form = Object.assign(this.form, {
					accountingSubjectId: '',
					accountingSubjectName: "",
					contactId: '',
					contactName: "",
					contractCode: "",
					contractId: '',
					contractName: "",
					opportunityId: '',
					opportunityName: "",
					projectId: '',
					projectName: "",
					purchaseOrderCode: "",
					purchaseOrderId: '',
					saleOrderCode: "",
					saleOrderId: ''
				})
				if (!val.dictValue) return
				this.form.finLinkTypeName = val.dictValue || ''
				if (val.dictCode == 3) {
					this.getOpportunityList()
				}

			},
			//获取分类管理中的数据
			async getClassifyList(id, listName) {
				let res = await getTreeByPid(id)
				this[listName] = res.data
			},
			//获取费用类别选中数据
			changeFeeTypeInfo(val) {
				if (!val) {
					this.form.feeTypeName = ''
					this.form.feeTypeCode = ''
				}
				let data = this.$refs.feeTypeTree?.$refs?.tree?.getCurrentNode() || {}
				this.form.feeTypeName = data.name
				this.form.feeTypeCode = data.code
			},
			// 显示会计科目选择器
			showAccountPicker() {
				this.$refs.accountTreePicker._show();
			},
			// 获取会计科目选中数据
			getAccountInfo(data, name) {
				this.form.accountingSubjectId = data[0]
				this.form.accountingSubjectName = name;
			},
			//获取客户的商机列表
			async getOpportunityList() {
				const data = await getTableList({
					pageNum: 1,
					size: 999,
					approvalStatus: 2
				});
				//  contactName: name,
				this.opportunityList = data.list;
			},
			//获取选择的商机数据
			handleSelectOpportunity(val) {
				if (!val) return this.form.opportunityName = ''
				this.form.opportunityName = this.opportunityList.find(item => item.id == val)?.name
			},
			// 显示部门选择器
			showDeptPicker() {
				this.$refs.treePicker._show();
			},
			// 获取部门数据
			async getDeptList() {

				this.deptList = await listOrganizations()

				this.deptTreeList = toTreeData({
					data: this.deptList,
					idField: 'id',
					parentIdField: 'parentId'
				});
				console.log(this.deptTreeList)
			},
			// 选择负责人部门
			getDeptInfo(data, name) {
				this.form.applyDeptId = data[0]
				this.form.applyDeptName = name;
				this.form.applyUserId = '';
				this.form.applyUserName = '';
				this.getUserList(data[0]);
			},
			// 获取人员数据
			getUserList(deptId) {
				// if (deptId) {
				// 	this.$refs.directorRef.getList({
				// 		deptId
				// 	});
				// }
			},
			//选择人员数据
			changeUserInfo(val, info) {
				this.form.applyUserName = info.name;
			},

			//
			getTableValue() {
				return new Promise(async (resolve) => {
					try{
						const valid = await this.$refs.uForm.validate()
						if (valid === true) {
							const API = feeApplyUpdateAPI
							const id = await API(this.form)
							resolve(id)
						}
					}catch{
						resolve(null)
					}
					
					
				})
			},

		}
	}
</script>

<style>
</style>