Merge branch 'feature/审批流程实现表单选然'

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,10 +72,34 @@ 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 = () => {
+	const form = EReditorRef.value.getSelfFormRef()
+	form.validate((valid: any) => {
+		if (!valid) return false
+		// 提交数据
+		onSubmit()
+	})
+}
+
 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 +110,38 @@ 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 formData = dyVueComponentRef.value.getData()
+	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 testData = {
 			formStructure: '@/views/flow/test/test1.vue',
-			formData: formData
+			formData: dyVueComponentRef.value.getComponentData()
 		}
-		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 {
+		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,9 +1,9 @@
 <template>
-	<el-form :model="form" label-width="auto" style="max-width: 600px">
-		<el-form-item label="Activity name">
+	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto" style="max-width: 600px">
+		<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" />
@@ -33,29 +33,62 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, defineExpose, inject, nextTick, onMounted, watch } from 'vue'
-import { get, set } from 'lodash'
+import { ref, defineExpose, inject, watch } from 'vue'
 
+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*/
+
+const rules = ref({
+	name: [
+		{
+			required: true,
+			message: '请填写',
+			trigger: ['submit']
+		}
+	],
+	region: [
+		{
+			required: true,
+			message: '请选择',
+			trigger: ['submit']
+		}
+	]
+})
+
+/**
+ * 当前表单如果没有必填校验，则可以去掉校验规则
+ * 直接通过myEmit('form-valid', form.value)将值传给父组件
+ */
+const validateForm = () => {
+	const formValidate = formRef.value
+	formValidate.validate((valid: any) => {
+		if (!valid) {
+			return false
+		}
+		myEmit('form-valid')
+	})
+}
 
-const getData = () => {
+const getComponentData = () => {
 	return form.value
 }
 
 defineExpose({
 	// 把数据暴露给父节点使用
-	getData
+	validateForm,
+	getComponentData
 })
 </script>