feat: 表单提交

src/views/flow/test/businessLaunch.vue

@@ -70,10 +70,21 @@ const dyVueForm = ref({})
 
 provide('dyVueForm', dyVueForm) // 这里主要是存放动态的form的属性值
 
+const validateDesignForm = () => {
+	// 这里返回一个promise对象，里面主要是针对表单校验是否通过，通过就resolve,不通过就返回reject
+	const form = EReditorRef.value.getSelfFormRef()
+	form.validate((valid: any) => {
+		if (!valid) {
+			return Promise.reject()
+		} else {
+			return Promise.resolve()
+		}
+	})
+}
+
 const onSubmit = async () => {
 	const processId = props.record.processId
 	const { type } = props.record.formTemplate
-	let params = {}
 	// 这里要从子节点获取流程图信息 进行保存
 	const _assigneeMap = flowTrendRef.value.getAssigneeMap()
 	const assigneeMap_ = Object.keys(_assigneeMap).reduce((obj, nodeKey: string) => {
@@ -84,63 +95,41 @@ const onSubmit = async () => {
 		}
 		return obj
 	}, {} as { [nodeKey: string]: any })
-	if (!type) {
-		// type: 0 表单设计  1 vue自定义表单
-		const form = EReditorRef.value.getSelfFormRef()
-		form.validate((valid: any) => {
-			if (!valid) return false
-			// 表单验证通过 进行保存
-			validateForm.value.loading = true
-			const formData = EReditorRef.value.getData()
-			let processForm = JSON.parse(cur_processForm_str)
-			processForm = { ...processForm, formData }
-			params = {
-				id: props.record.rowId,
-				test: '',
-				processStart: {
-					processId, // 流程ID
-					processForm: JSON.stringify(processForm), // 流程表单JSON内容 & local_value 保存
-					assigneeMap: assigneeMap_
-				}
-			}
-			// 待优化
-			purchaseOrder
-				.postlaunchApi(params)
-				.then(res => {
-					ElMessage.success('提交成功')
-					updateModelValue(false)
-				})
-				.finally(() => {
-					validateForm.value.loading = false
-				})
-		})
-	} else {
+	const paramCommon = {
+		id: props.record.rowId,
+		test: '', // 系统表单JSON内容
+		processStart: {
+			processId, // 流程ID
+			processForm: '', // 设计表单JSON内容
+			assigneeMap: assigneeMap_
+		}
+	}
+	validateForm.value.loading = true
+	// type: 0 设计表单  1 vue系统表单
+	if (type) {
 		const formData = dyVueComponentRef.value.getData()
 		const testData = {
 			formStructure: '@/views/flow/test/test1.vue',
 			formData: formData
 		}
-		params = {
-			id: props.record.rowId,
-			test: JSON.stringify(testData),
-			processStart: {
-				processId, // 流程ID
-				processForm: '', // 流程表单JSON内容 & local_value 保存
-				assigneeMap: assigneeMap_
-			}
-		}
-		// 待优化
-		purchaseOrder
-			.postlaunchApi(params)
-			.then(res => {
-				ElMessage.success('提交成功')
-				updateModelValue(false)
-			})
-			.finally(() => {
-				validateForm.value.loading = false
-			})
+		paramCommon.test = JSON.stringify(testData)
+	} else {
+		await validateDesignForm()
+		const formData = EReditorRef.value.getData()
+		let processForm = JSON.parse(cur_processForm_str)
+		processForm = { ...processForm, formData }
+		paramCommon.processStart.processForm = JSON.stringify(processForm)
 	}
 
+	purchaseOrder
+		.postlaunchApi(paramCommon)
+		.then(res => {
+			ElMessage.success('提交成功')
+			updateModelValue(false)
+		})
+		.finally(() => {
+			validateForm.value.loading = false
+		})
 }
 
 // 获取当前表单中的详情

src/views/flow/test/test1.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-form :model="form" label-width="auto" style="max-width: 600px">
+	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto" style="max-width: 600px">
 		<el-form-item label="Activity name">
 			<el-input v-model="form.name" />
 		</el-form-item>
@@ -33,14 +33,15 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, defineExpose, inject, nextTick, onMounted, watch } from 'vue'
+import { ref, defineExpose, inject, watch } from 'vue'
 import { get, set } from 'lodash'
+import { ElMessage } from 'element-plus'
 
+const formRef = ref(null)
+/*获取父组件传递过来的数据，调整完毕，传给父组件实现双向绑定 start */
 const dyVueForm = inject('dyVueForm')
-
 const form = ref(get(dyVueForm.value, 'dy', dyVueForm.value))
 set(dyVueForm.value, 'dy', form.value)
-
 watch(
 	() => get(dyVueForm.value, 'dy'),
 	vl => (form.value = vl)
@@ -49,8 +50,45 @@ watch(
 	() => form.value,
 	v => set(dyVueForm.value, 'dy', v)
 )
+/*获取父组件传递过来的数据，调整完毕，传给父组件实现双向绑定 start*/
+
+const rules = ref({
+	name: [
+		{
+			required: true,
+			message: '请填写',
+			trigger: ['submit']
+		}
+	],
+	region: [
+		{
+			required: true,
+			message: '请选择',
+			trigger: ['submit']
+		}
+	]
+})
+
+const validateForm = () => {
+	try {
+		const formValidate = formRef.value
+		formValidate.validate((valid: any) => {
+			if (!valid) {
+				throw new Error('请完善表单信息')
+			}
+			return Promise.resolve(true)
+		})
+	} catch (e) {
+		ElMessage({
+			message: e.message,
+			type: 'error'
+		})
+		return Promise.reject(false)
+	}
+}
 
-const getData = () => {
+const getData = async () => {
+	await validateForm()
 	return form.value
 }