feat(work/edit): 发起流程数据校验

pages/work/edit/index.vue

@@ -3,10 +3,10 @@
 	<view class="process_container">
 		<uni-card spacing="0">
 			<view class="main_container">
-				<uni-forms ref="$mainForm" label-position="left" :label-width="125" :border="true">
+				<uni-forms ref="$mainForm" :modelValue="mainFormValue" :rules="$mainFormRules" label-position="left" :label-width="125" :border="true">
 					<view v-for="(elem, index) in formElements">
 						<!-- <uni-forms-item v-if="!('0' == elem.canEdit && (elem.elementName.slice(-2) == '审批' || elem.elementName.slice(-2) == '意见' || elem.elementName.slice(-2) == '批示'))" :label="elem.elementName" :key="index"> -->
-						<uni-forms-item v-if="'0' != elem.canEdit" :label="elem.elementName" :key="index">
+						<uni-forms-item v-if="'0' != elem.canEdit && '8' != elem.type" :name="elem.elementId" :label="elem.elementName" :key="index">
 							<uni-easyinput v-if="'多少小时' == elem.elementName" :disabled="true" placeholder=""
 								v-model="diffHours"></uni-easyinput>
 							<uni-easyinput v-else-if="elem.bddzText" :disabled="true" placeholder=""
@@ -53,8 +53,9 @@
 		<!-- 重复表单 -->
 		<view v-if="repeatingForm.elementItem.length > 0" class="repeating_table">
 			<uni-card v-for="(table, tableIndex) in repeatingForm.elements" spacing="0" :key="tableIndex">
-				<uni-forms ref="$repeatingForm" label-position="left" :label-width="125" :border="true">
-					<uni-forms-item v-for="(elem, itemIndex) in table"
+				<!-- TODO 使用数组保存 refs -->
+				<uni-forms :ref="(el) => $repeatingForms[tableIndex] = el" :modelValue="repeatingFormsValue[tableIndex]" :rules="$repFormRules" label-position="left" :label-width="125" :border="true">
+					<uni-forms-item :name="elem.tableField" v-for="(elem, itemIndex) in table"
 						:label="repeatingForm.elementItem[itemIndex].elementName.slice(3)" :key="itemIndex">
 						<!-- 自定义关联变量 -->
 						<uni-easyinput v-if="repeatingForm.elementItem[itemIndex].bddzText" :disabled="true" :placeholder="''" :value="computedrepeatingFormItemValue(elem, table)"></uni-easyinput>
@@ -110,6 +111,7 @@ const fieldTypeDict = {
 }
 let processInfo = reactive({
 	modelName: '流程申请',
+	reqOffice: 0,
 	control: '',
 	formId: '',
 	modelId: '',
@@ -142,19 +144,28 @@ function initProcessInfo() {
 	return new Promise<void>((resolve, reject) => {
 		getProcessInfo(processInfo)
 			.then(({ returnParams }) => {
-				const { formId, tmodelId, isMoreIns, pathJudgeType } = returnParams.flow[0]
+				const { formId, tmodelId, isMoreIns, pathJudgeType, reqOffice } = returnParams.flow[0]
 				processInfo.formId = formId
 				processInfo.tmodelId = tmodelId
 				processInfo.isMoreIns = isMoreIns
 				processInfo.pathJudgeType = pathJudgeType
+				processInfo.reqOffice = reqOffice
 				resolve()
 			})
 	})
 }
+
+const formElements = ref([])
+const repeatingForm = ref({
+	elementItem: [],
+	elements: []
+})
+
 function initProcessForm() {
 	getProcessForm(userStore.user, processInfo).then(({ returnParams }) => {
 		formElements.value = returnParams.formElements
 		repeatingForm.value = returnParams.repeatingForm
+		getValidateRules()
 		// 生成第一个重复表数据
 		if (repeatingForm.value) {
 			addrepeatingFormItem(0)
@@ -173,11 +184,6 @@ function initProcessForm() {
 	})
 }
 
-const formElements = ref([])
-const repeatingForm = ref({
-	elementItem: [],
-	elements: []
-})
 const startEleIndex = ref(0) // 开始时间
 const endEleIndex = ref(0) // 结束时间
 // 新增重复表表单
@@ -214,7 +220,7 @@ function parseCalculation(items) {
 					} else if (/[a-zA-Z]+/.test(token)) {
 						// 保存变量的索引
 						const variableIndex = items.findIndex(i => i.elementName === token);
-						if (variableIndex !== -1) {
+						if (-1 !== variableIndex) {
 							calculation.variables.push(variableIndex);
 						}
 					}
@@ -279,13 +285,14 @@ function delrepeatingFormItem(index) {
 	$modal.confirm('', '确认删除该重复表数据')
 		.then(() => {
 			repeatingForm.value.elements.splice(index, 1)
+			$repeatingForms.value.splice(index, 1)
 		}).catch(() => { })
 }
 function computedrepeatingFormItemValue(item, table) {
 	let res = 1
-	console.log('item: ',item);
-	console.log('table: ',table);
-	console.log('convertToChineseCurrency', convertToChineseCurrency(res));
+	// console.log('item: ',item);
+	// console.log('table: ',table);
+	// console.log('convertToChineseCurrency', convertToChineseCurrency(res));
 	item.bddzText.forEach(itemIndex => {
 		res = res * table[itemIndex].defaultValue
 	})
@@ -329,10 +336,6 @@ function setTimeRange(e) {
 	}
 }
 
-//表单校验
-const $mainForm = ref(null)
-const $repeatingForm = ref(null)
-
 const fileList = ref([]) // 文件列表
 const fileSeqs = ref([])
 async function handleFileSelect(files) { // 新增文件
@@ -380,39 +383,169 @@ function handleFileDelete(file) { // 移除文件
 	fileSeqs.value.splice(fileSeqs.value.findIndex(({ path }) => path == file.tempFilePath))
 }
 
+//表单校验
+const $mainForm = ref(null)
+const mainFormValue = ref({})
+const $repeatingForms = ref([])
+const repeatingFormsValue = ref([])
+const formatTypeDict = {
+	'0': 'string',
+	'1': 'number'
+}
+// 校验重复表
+function validateRepeatingForm() {
+	// 设置重复表校验数据
+	repeatingFormsValue.value = repeatingForm.value.elements.map((item, index) => {
+		return computed(() => {
+			const obj = {};
+			item.forEach(({ name, defaultValue }) => {
+				obj[name] = defaultValue;
+			});
+			return obj;
+		}).value
+	})
+	// console.log('$repeatingForms: ',$repeatingForms.value);
+	// console.log('repeatingFormsValue: ',repeatingFormsValue.value);
+	// 重复表数据校验
+	// BUG validate()校验无效
+	$repeatingForms.value.forEach((form) => {
+		// console.log('form: ',form);
+		form.validate().then(res => {
+			console.log('验证成功：', res);
+		}).catch(err => {
+			console.log('验证失败：', err);
+		});
+	})
+}
+function validateRepeatingForm2() {
+	// 设置重复表校验数据
+	repeatingFormsValue.value = repeatingForm.value.elements.map((item, index) => {
+		return computed(() => {
+			const obj = {};
+			item.forEach(({ name, defaultValue }) => {
+				obj[name] = defaultValue;
+			});
+			return obj;
+		}).value
+	})
+	let flag = false
+	repeatingFormsValue.value.forEach((item, index) => {
+		for (const elem in item) {
+			if (item[elem] == '') {
+				$modal.msgError(`重复表 ${index+1} 数据填写错误`)
+				flag = false
+				return
+			}
+		}
+		flag = true
+	})
+	return flag
+}
+// 设置表单校验规则
+const $mainFormRules = ref({})
+const $repFormRules = ref({})
+function getValidateRules() {
+	$repFormRules.value = computed(() => {
+		const obj = {};
+		repeatingForm.value.elementItem.forEach(elem => {
+			obj[elem.tableField] = {
+				rules: [
+					{ 
+						required: true,
+					},
+					{
+						formatTypeDict: formatTypeDict[elem.fieldType.value] || 'string',
+					}
+				],
+				label: elem.elementName.slice(3)
+			};
+		});
+		return obj;
+	}).value
+	$mainFormRules.value = computed(() => {
+		const obj = {};
+		formElements.value.forEach(elem => {
+			if (!('0' != elem.canEdit && '8' != elem.type)) return
+			obj[elem.elementId] = {
+				rules: [
+					{
+						required: '0' == elem.noNull,
+					},
+					{
+						format: formatTypeDict[elem.fieldType] || 'string',
+					}
+				],
+				label: elem.elementName
+			};
+		});
+		return obj;
+	}).value
+}
+
 const button_state = ref(true)
 function submitProcess() { // 提交表单
 	// 禁用提交按钮
 	button_state.value = false
-	// 保存表单数据
-	processInfo.form = formElements.value.map(({ tableField, defaultValue }) => {
-		return { name: tableField, value: defaultValue }
-	})
-	repeatingForm.value.elements.forEach((item, index) => {
-		const newItem = item.map(({ name, defaultValue }) => {
-			return {
-				name: name + '_' + (index + 1),
-				value: defaultValue
-			}
+	// validateMainForm()
+	// 设置主表校验数据
+	mainFormValue.value = computed(() => {
+		const obj = {};
+		formElements.value.forEach(elem => {
+			if (!('0' != elem.canEdit && '8' != elem.type)) return
+			obj[elem.elementId] = elem.defaultValue;
+		});
+		return obj;
+	}).value
+	// 主表数据校验
+	$mainForm.value.validate().then(res=>{
+		
+		// 重复表数据校验
+		// validateRepeatingForm()
+		if (!validateRepeatingForm2()) {
+			button_state.value = true
+			return
+		}
+		// 保存表单数据
+		processInfo.form = formElements.value.map(({ tableField, defaultValue }) => {
+			return { name: tableField, value: defaultValue }
 		})
-		processInfo.form.push(...newItem)
-	})
-	const seqs = fileSeqs.value.map(({ seq }) => seq)
-	submitProcessForm(userStore.user, processInfo, seqs).then(res => {
-		if (res.returnMsg.includes('提交失败')) {
-			// 启用提交按钮
+		repeatingForm.value.elements.forEach((item, index) => {
+			const newItem = item.map(({ name, defaultValue }) => {
+				return {
+					name: name + '_' + (index + 1),
+					value: defaultValue
+				}
+			})
+			processInfo.form.push(...newItem)
+		})
+		// 保存附件ID
+		const seqs = fileSeqs.value.map(({ seq }) => seq)
+		if (processInfo.reqOffice == 1 && seqs.length == 0) {
 			button_state.value = true
-			$modal.msgError(res.returnMsg)
-		} else {
-			$modal.msgSuccess(res.returnMsg)
-			// 通知列表刷新数据
-			uni.$emit('ReloadProcessData');
-			setTimeout(() => {
-				// 返回上一页
-				$tab.navigateBack();
-			}, 1000)
+			$modal.msgError('请上传附件')
+			return
 		}
-	})
+		submitProcessForm(userStore.user, processInfo, seqs).then(res => {
+			if (res.returnMsg.includes('提交失败')) {
+				// 启用提交按钮
+				button_state.value = true
+				$modal.msgError(res.returnMsg)
+			} else {
+				$modal.msgSuccess(res.returnMsg)
+				// 通知列表刷新数据
+				uni.$emit('ReloadProcessData');
+				setTimeout(() => {
+					// 返回上一页
+					$tab.navigateBack();
+				}, 1000)
+			}
+		})
+		
+	}).catch(err => {
+		button_state.value = true
+		$modal.msgError('表单填写错误')
+	});
+	
 }
 </script>
 
@@ -432,6 +565,7 @@ function submitProcess() { // 提交表单
 			}
 			.uni-easyinput__content-input {
 				font-size: calc(14px + .5*(1rem - 16px)) !important;
+				color: #333;
 			}
 			.uni-date {
 				.uni-icons {
@@ -447,7 +581,7 @@ function submitProcess() { // 提交表单
 		font-size: calc(18px + .5*(1rem - 16px));
 	}
 	.main_container {
-		min-height: 50vh;
+		min-height: 30vh;
 	}
 
 	.picker_container {