feat: 优化 流程创建分类 组件 校验 调优

src/views/flow/create/components/BasicInfo.vue

@@ -21,19 +21,22 @@ const rules = {
 	processKey: [
 		{
 			required: true,
-			message: '请输入唯一标识'
+			message: '请输入唯一标识',
+      trigger: 'blur'
 		}
 	],
 	processName: [
 		{
 			required: true,
-			message: '请输入名称'
+			message: '请输入名称',
+      trigger: 'blur'
 		}
 	],
 	categoryId: [
 		{
 			required: true,
-			message: '请选择分组'
+			message: '请选择分组',
+      trigger: 'blur'
 		}
 	]
 }
@@ -41,15 +44,16 @@ const rules = {
 // 基础信息表单提交校验
 const validate = () => {
 	return new Promise((resolve, reject) => {
+    console.log('validate..........')
 		formRef.value.validate((valid, errObj) => {
+      // console.error(valid, 'valid errObj', errObj)
 			if (valid) {
-				console.error('valid 成功')
 				// cb?.(form.value)
-				resolve(form.value)
+				resolve()
 				// return form.value
 				return
 			}
-			return reject(['基本信息', errObj])
+			return reject(errObj)
 		})
 	})
 }
@@ -132,7 +136,7 @@ defineExpose({
 <template>
 	<div class="base-info">
 		<div class="base-info-panel" style="position: relative">
-			<el-form ref="formRef" :rules="rules" label-position="top">
+			<el-form ref="formRef" :model="flowInfo" :rules="rules" label-position="top">
 				<el-form-item label="图标" prop="flowInfo.processIcon">
 					<el-space>
 						<LeIcon class="icon-shower" :icon-class="`${flowIconPrefix}${flowInfo.processIcon}`" />
@@ -151,16 +155,16 @@ defineExpose({
 						</template>
 					</el-popover>
 				</el-form-item>
-				<el-form-item label="唯一标识 key" prop="flowInfo.processKey">
+				<el-form-item label="唯一标识 key" prop="processKey"> processKey
 					<el-input v-model="flowInfo.processKey" clearable maxlength="100"></el-input>
 				</el-form-item>
-				<el-form-item label="名称" prop="flowInfo.processName">
+				<el-form-item label="名称" prop="processName">
 					<el-input v-model="flowInfo.processName" clearable maxlength="15"></el-input>
 				</el-form-item>
-				<el-form-item label="说明" prop="flowInfo.remark">
+				<el-form-item label="说明" prop="remark">
 					<el-input v-model="flowInfo.remark" type="textarea" clearable></el-input>
 				</el-form-item>
-				<el-form-item label="分组" prop="flowInfo.categoryId">
+				<el-form-item label="分组" prop="categoryId">
 					<el-select v-model="flowInfo.categoryId">
 						<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
 					</el-select>

src/views/flow/create/components/FormDesign.vue

@@ -23,15 +23,16 @@ const exportJson = async json => {
  */
 const validate = () => {
   // 根据后续的业务需求 调整 validate 的功能
+  exportJsonEv()
 	return new Promise((resolve, reject) => {
 		const finallyFormData = JSON.parse(processForm.value)
 		const fields = finallyFormData.map(item => item.field)
 		const bool = fields.length === [...new Set(fields)].length
-		;[bool ? resolve : reject]()
-		/*if (bool) {
+		if (bool) {
       resolve(true)
     } else {
-    }*/
+      reject(false)
+    }
 	})
 }
 // 初始化的时候，渲染当前组件的值