feat: 系统表单

src/views/flow/group/components/listGroup.vue

@@ -178,7 +178,7 @@ const addFlowGroup = async () => {
 	try {
 		const param = {
 			name: listGroupName.value,
-			categorySort: 0
+			sort: 0
 		}
 		await flowGroup.flowGroupAddOrEditSaveApi(param)
 		showAddInput()

src/views/flow/test/businessLaunch.vue

@@ -20,7 +20,7 @@
 
 			<!-- vue自定义 -->
 			<template v-if="record.formTemplate.type === 1">
-				<component :is="dyVueComponent" ref="dyVueComponentRef"></component>
+				<component :is="dyVueComponent" ref="dyVueComponentRef" @form-valid="onSubmit"></component>
 			</template>
 
 			<el-divider content-position="left">审批流程</el-divider>
@@ -30,7 +30,9 @@
 
 		<template #footer>
 			<el-button @click="updateModelValue(false)">{{ $t('le.btn.cancel') }}</el-button>
-			<el-button :disabled="validateForm.loading" type="primary" style="margin-left: 8px" @click="onSubmit">{{ $t('le.btn.confirm') }}</el-button>
+			<el-button :disabled="validateForm.loading" type="primary" style="margin-left: 8px" @click="handleFormValid">{{
+				$t('le.btn.confirm')
+			}}</el-button>
 		</template>
 	</el-drawer>
 </template>
@@ -70,15 +72,28 @@ const dyVueForm = ref({})
 
 provide('dyVueForm', dyVueForm) // 这里主要是存放动态的form的属性值
 
+/**
+ * 1、校验表单
+ *  1.1 type=1 校验系统表单
+ *  1.2 type=0 校验表单设计
+ * 2、提交API
+ */
+const handleFormValid = () => {
+	const { type } = props.record.formTemplate
+	if (type) {
+		dyVueComponentRef.value.validateForm()
+	} else {
+		validateDesignForm()
+	}
+}
+
+// 校验表单设计
 const validateDesignForm = () => {
-	// 这里返回一个promise对象，里面主要是针对表单校验是否通过，通过就resolve,不通过就返回reject
 	const form = EReditorRef.value.getSelfFormRef()
 	form.validate((valid: any) => {
-		if (!valid) {
-			return Promise.reject()
-		} else {
-			return Promise.resolve()
-		}
+		if (!valid) return false
+		// 提交数据
+		onSubmit()
 	})
 }
 
@@ -107,20 +122,17 @@ const onSubmit = async () => {
 	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
+			formData: dyVueComponentRef.value.getComponentData()
 		}
 		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 => {

src/views/flow/test/test1.vue

@@ -1,9 +1,9 @@
 <template>
 	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto" style="max-width: 600px">
-		<el-form-item label="Activity name">
+		<el-form-item label="Activity name" prop="name">
 			<el-input v-model="form.name" />
 		</el-form-item>
-		<el-form-item label="Activity zone">
+		<el-form-item label="Activity zone" prop="region">
 			<el-select v-model="form.region" placeholder="please select your zone">
 				<el-option label="1" value="shanghai" />
 				<el-option label="2" value="beijing" />
@@ -34,21 +34,20 @@
 
 <script lang="ts" setup>
 import { ref, defineExpose, inject, watch } from 'vue'
-import { get, set } from 'lodash'
-import { ElMessage } from 'element-plus'
 
 const formRef = ref(null)
+const myEmit = defineEmits(['form-valid'])
 /*获取父组件传递过来的数据，调整完毕，传给父组件实现双向绑定 start */
 const dyVueForm = inject('dyVueForm')
-const form = ref(get(dyVueForm.value, 'dy', dyVueForm.value))
-set(dyVueForm.value, 'dy', form.value)
+const form = ref(dyVueForm.value.dy || {})
+
 watch(
-	() => get(dyVueForm.value, 'dy'),
+	() => dyVueForm.value.dy,
 	vl => (form.value = vl)
 )
 watch(
 	() => form.value,
-	v => set(dyVueForm.value, 'dy', v)
+	v => (dyVueForm.value.dy = v)
 )
 /*获取父组件传递过来的数据，调整完毕，传给父组件实现双向绑定 start*/
 
@@ -69,31 +68,27 @@ const rules = ref({
 	]
 })
 
+/**
+ * 当前表单如果没有必填校验，则可以去掉校验规则
+ * 直接通过myEmit('form-valid', form.value)将值传给父组件
+ */
 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 formValidate = formRef.value
+	formValidate.validate((valid: any) => {
+		if (!valid) {
+			return false
+		}
+		myEmit('form-valid')
+	})
 }
 
-const getData = async () => {
-	await validateForm()
+const getComponentData = () => {
 	return form.value
 }
 
 defineExpose({
 	// 把数据暴露给父节点使用
-	getData
+	validateForm,
+	getComponentData
 })
 </script>