feat：【antd】【bpm】model/form/ 代码评审

apps/web-antd/src/views/bpm/model/definition/index.vue

@@ -12,7 +12,6 @@ import { Button, Tooltip } from 'ant-design-vue';
 import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getProcessDefinitionPage } from '#/api/bpm/definition';
 
-// 导入 FormCreate 表单详情
 import FormCreateDetail from '../../form/modules/detail.vue';
 import { useGridColumns } from './data';
 

apps/web-antd/src/views/bpm/model/form/index.vue

@@ -39,7 +39,6 @@ import ProcessDesign from './modules/process-design.vue';
 
 defineOptions({ name: 'BpmModelCreate' });
 
-// 流程定义类型
 type BpmProcessDefinitionType = Omit<
   BpmProcessDefinitionApi.ProcessDefinition,
   'modelId' | 'modelType'
@@ -49,42 +48,17 @@ type BpmProcessDefinitionType = Omit<
 };
 
 const router = useRouter();
-
 const route = useRoute();
-
 const userStore = useUserStore();
+const tabs = useTabs();
 
-// 基础信息组件引用
-const basicInfoRef = ref<InstanceType<typeof BasicInfo>>();
-// 表单设计组件引用
-const formDesignRef = ref<InstanceType<typeof FormDesign>>();
-// 流程设计组件引用
-const processDesignRef = ref<InstanceType<typeof ProcessDesign>>();
-// 更多设置组件引用
-const extraSettingRef = ref<InstanceType<typeof ExtraSetting>>();
-
-/** 步骤校验函数 */
-async function validateBasic() {
-  await basicInfoRef.value?.validate();
-}
-
-/** 表单设计校验 */
-async function validateForm() {
-  await formDesignRef.value?.validate();
-}
-
-/** 流程设计校验 */
-async function validateProcess() {
-  await processDesignRef.value?.validate();
-}
-
-/** 更多设置校验 */
-async function validateExtra() {
-  await extraSettingRef.value?.validate();
-}
+const basicInfoRef = ref<InstanceType<typeof BasicInfo>>(); // 基础信息组件引用
+const formDesignRef = ref<InstanceType<typeof FormDesign>>(); // 表单设计组件引用
+const processDesignRef = ref<InstanceType<typeof ProcessDesign>>(); // 流程设计组件引用
+const extraSettingRef = ref<InstanceType<typeof ExtraSetting>>(); // 更多设置组件引用
 
+const actionType = route.params.type as string; // 操作类型：create、copy、update
 const currentStep = ref(-1); // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
-
 const steps = [
   { title: '基本信息', validator: validateBasic },
   { title: '表单设计', validator: validateForm },
@@ -92,7 +66,6 @@ const steps = [
   { title: '更多设置', validator: validateExtra },
 ];
 
-// 表单数据
 const formData: any = ref({
   id: undefined,
   name: '',
@@ -128,22 +101,38 @@ const formData: any = ref({
     summary: [],
   },
   allowWithdrawTask: false,
-});
+}); // 表单数据
+const processData = ref<any>(); // 流程数据
 
-// 流程数据
-const processData = ref<any>();
-
-provide('processData', processData);
-provide('modelData', formData);
-
-// 数据列表
 const formList = ref<BpmFormApi.Form[]>([]);
 const categoryList = ref<BpmCategoryApi.Category[]>([]);
 const userList = ref<SystemUserApi.User[]>([]);
 const deptList = ref<SystemDeptApi.Dept[]>([]);
 
+provide('processData', processData);
+provide('modelData', formData);
+
+/** 步骤校验函数 */
+async function validateBasic() {
+  await basicInfoRef.value?.validate();
+}
+
+/** 表单设计校验 */
+async function validateForm() {
+  await formDesignRef.value?.validate();
+}
+
+/** 流程设计校验 */
+async function validateProcess() {
+  await processDesignRef.value?.validate();
+}
+
+/** 更多设置校验 */
+async function validateExtra() {
+  await extraSettingRef.value?.validate();
+}
+
 /** 初始化数据 */
-const actionType = route.params.type as string;
 async function initData() {
   if (actionType === 'definition') {
     // 情况一：流程定义场景（恢复）
@@ -212,7 +201,6 @@ async function initData() {
 
   // 最终，设置 currentStep 切换到第一步
   currentStep.value = 0;
-
   // 以前未配置更多设置的流程
   extraSettingRef.value?.initData();
 }
@@ -291,7 +279,6 @@ async function handleSave() {
         formData.value.id = await createModel(modelData);
         // 提示成功
         message.success('复制成功，可点击【发布】按钮，进行发布模型');
-
         break;
       }
       case 'definition': {
@@ -299,15 +286,13 @@ async function handleSave() {
         await updateModel(modelData);
         // 提示成功
         message.success('恢复成功，可点击【发布】按钮，进行发布模型');
-
         break;
       }
       case 'update': {
-        // 修改场景
+        // 情况二：修改场景
         await updateModel(modelData);
         // 提示成功
         message.success('修改成功，可点击【发布】按钮，进行发布模型');
-
         break;
       }
       default: {
@@ -324,6 +309,7 @@ async function handleSave() {
     }
   } catch (error: any) {
     console.error('保存失败:', error);
+    // TODO @jason：这个提示，还要么？？？
     // message.warning(error.msg || '请完善所有步骤的必填信息');
   }
 }
@@ -331,28 +317,28 @@ async function handleSave() {
 /** 发布操作 */
 async function handleDeploy() {
   try {
-    // 修改场景下直接发布，新增场景下需要先确认
+    // 1.1 修改场景下直接发布，新增场景下需要先确认
     if (!formData.value.id) {
       await confirm('是否确认发布该流程？');
     }
-    // 校验所有步骤
+    // 1.2 校验所有步骤
     await validateAllSteps();
 
-    // 更新表单数据
+    // 2.1 更新表单数据
     const modelData = {
       ...formData.value,
     };
-
-    // 先保存所有数据
+    // 2.2 先保存所有数据
     if (formData.value.id) {
       await updateModel(modelData);
     } else {
       const result = await createModel(modelData);
       formData.value.id = result.id;
     }
-
-    // 发布
+    // 2.3 发布
     await deployModel(formData.value.id);
+
+    // 3. 路由并提示
     message.success('发布成功');
     await router.push({ name: 'BpmModel' });
   } catch (error: any) {
@@ -386,13 +372,9 @@ async function handleStepClick(index: number) {
   }
 }
 
-const tabs = useTabs();
-
 /** 返回列表页 */
 function handleBack() {
-  // 关闭当前页签
   tabs.closeCurrentTab();
-  // 跳转到列表页
   router.push({ name: 'BpmModel' });
 }
 

apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue

@@ -53,21 +53,15 @@ const [DeptSelectModalComp, deptSelectModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-// 表单引用
-const formRef = ref();
+const formRef = ref(); // 表单引用
+const modelData = defineModel<any>(); // 创建本地数据副本
 
-// 选中的发起人
-const selectedStartUsers = ref<SystemUserApi.User[]>([]);
+const selectedStartUsers = ref<SystemUserApi.User[]>([]); // 选中的发起人
+const selectedStartDepts = ref<SystemDeptApi.Dept[]>([]); // 选中的发起部门
 
-// 选中的发起部门
-const selectedStartDepts = ref<SystemDeptApi.Dept[]>([]);
-
-// 选中的流程管理员
-const selectedManagerUsers = ref<SystemUserApi.User[]>([]);
+const selectedManagerUsers = ref<SystemUserApi.User[]>([]); // 选中的流程管理员
 const currentSelectType = ref<'manager' | 'start'>('start');
-// 选中的用户
-const selectedUsers = ref<number[]>();
-
+const selectedUsers = ref<number[]>(); // 选中的用户
 const rules: Record<string, Rule[]> = {
   name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
   key: [
@@ -99,10 +93,7 @@ const rules: Record<string, Rule[]> = {
   ],
 };
 
-// 创建本地数据副本
-const modelData = defineModel<any>();
-
-// 初始化选中的用户
+/** 初始化选中的用户 */
 watch(
   () => modelData.value,
   (newVal) => {
@@ -140,6 +131,7 @@ function openStartUserSelect() {
 function openStartDeptSelect() {
   deptSelectModalApi.setData({ selectedList: selectedStartDepts.value }).open();
 }
+
 /** 处理部门选择确认 */
 function handleDeptSelectConfirm(depts: SystemDeptApi.Dept[]) {
   modelData.value = {
@@ -191,7 +183,6 @@ function handleStartUserTypeChange(value: SelectValue) {
         startUserIds: [],
         startDeptIds: [],
       };
-
       break;
     }
     case 1: {
@@ -199,7 +190,6 @@ function handleStartUserTypeChange(value: SelectValue) {
         ...modelData.value,
         startDeptIds: [],
       };
-
       break;
     }
     case 2: {
@@ -207,7 +197,6 @@ function handleStartUserTypeChange(value: SelectValue) {
         ...modelData.value,
         startUserIds: [],
       };
-
       break;
     }
   }

apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue

@@ -31,17 +31,13 @@ defineProps<{
 
 const emit = defineEmits(['success', 'init-finished']);
 
-// 表单信息
-const formFields = ref<string[]>([]);
-// 表单类型，暂仅限流程表单
-const formType = ref(BpmModelFormType.NORMAL);
+const formFields = ref<string[]>([]); // 表单信息
+const formType = ref(BpmModelFormType.NORMAL); // 表单类型，暂仅限流程表单 TODO @jason：是不是已经支持 业务表单 了？
 provide('formFields', formFields);
 provide('formType', formType);
 
-// 注入流程数据
-const xmlString = inject('processData') as Ref;
-// 注入模型数据
-const modelData = inject('modelData') as Ref;
+const xmlString = inject('processData') as Ref; // 注入流程数据
+const modelData = inject('modelData') as Ref; // 注入模型数据
 
 const modeler = shallowRef(); // BPMN Modeler
 const processDesigner = ref();
@@ -57,7 +53,6 @@ const model = ref<BpmModelApi.Model>(); // 流程模型的信息
 
 /** 初始化 modeler */
 const initModeler = async (item: any) => {
-  // 先初始化模型数据
   model.value = modelData.value;
   modeler.value = item;
 };
@@ -87,7 +82,7 @@ watch(
   { immediate: true },
 );
 
-// 在组件卸载时清理
+/** 在组件卸载时清理 */
 onBeforeUnmount(() => {
   modeler.value = null;
   // 清理全局实例
@@ -127,6 +122,7 @@ onBeforeUnmount(() => {
   </ContentWrap>
 </template>
 <style lang="scss">
+// TODO @jason：tailwind？
 .process-panel__container {
   position: absolute;
   top: 172px;

apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue

@@ -179,8 +179,7 @@ const formFieldOptions4Summary = computed(() => {
   });
 });
 const unParsedFormFields = ref<string[]>([]); // 未解析的表单字段
-// 暴露给子组件 HttpRequestSetting 使用
-provide('formFields', unParsedFormFields);
+provide('formFields', unParsedFormFields); // 暴露给子组件 HttpRequestSetting 使用
 
 /** 兼容以前未配置更多设置的流程 */
 function initData() {
@@ -246,8 +245,8 @@ watch(
   },
   { immediate: true },
 );
-// 表单引用
-const formRef = ref();
+const formRef = ref(); // 表单引用
+
 /** 表单校验 */
 async function validate() {
   await formRef.value?.validate();

apps/web-antd/src/views/bpm/model/form/modules/form-design.vue

@@ -33,10 +33,7 @@ const props = defineProps({
 
 const formRef = ref();
 
-// 创建本地数据副本
-const modelData = defineModel<any>();
-
-// 表单预览数据
+const modelData = defineModel<any>(); // 创建本地数据副本
 const formPreview = ref({
   formData: {} as any,
   rule: [],
@@ -45,9 +42,20 @@ const formPreview = ref({
     resetBtn: false,
     formData: {},
   },
-});
+}); // 表单预览数据
 
-/** 监听表单ID变化，加载表单数据 */
+const rules: Record<string, Rule[]> = {
+  formType: [{ required: true, message: '表单类型不能为空', trigger: 'blur' }],
+  formId: [{ required: true, message: '流程表单不能为空', trigger: 'blur' }],
+  formCustomCreatePath: [
+    { required: true, message: '表单提交路由不能为空', trigger: 'blur' },
+  ],
+  formCustomViewPath: [
+    { required: true, message: '表单查看地址不能为空', trigger: 'blur' },
+  ],
+};
+
+/** 监听表单 ID 变化，加载表单数据 */
 watch(
   () => modelData.value.formId,
   async (newFormId) => {
@@ -65,17 +73,6 @@ watch(
   { immediate: true },
 );
 
-const rules: Record<string, Rule[]> = {
-  formType: [{ required: true, message: '表单类型不能为空', trigger: 'blur' }],
-  formId: [{ required: true, message: '流程表单不能为空', trigger: 'blur' }],
-  formCustomCreatePath: [
-    { required: true, message: '表单提交路由不能为空', trigger: 'blur' },
-  ],
-  formCustomViewPath: [
-    { required: true, message: '表单查看地址不能为空', trigger: 'blur' },
-  ],
-};
-
 /** 表单校验 */
 async function validate() {
   await formRef.value?.validate();

apps/web-antd/src/views/bpm/model/form/modules/process-design.vue

@@ -8,9 +8,7 @@ import { BpmModelType } from '@vben/constants';
 import BpmModelEditor from './bpm-model-editor.vue';
 import SimpleModelDesign from './simple-model-design.vue';
 
-// 创建本地数据副本
-const modelData = defineModel<any>();
-
+const modelData = defineModel<any>(); // 创建本地数据副本
 const processData = inject('processData') as Ref;
 
 const simpleDesign = ref();
@@ -30,6 +28,7 @@ async function validate() {
   }
   return true;
 }
+
 /** 处理设计器保存成功 */
 async function handleDesignSuccess(data?: any) {
   if (data) {
@@ -39,7 +38,7 @@ async function handleDesignSuccess(data?: any) {
       bpmnXml: modelData.value.type === BpmModelType.BPMN ? data : null,
       simpleModel: modelData.value.type === BpmModelType.BPMN ? null : data,
     };
-    // 使用emit更新父组件的数据
+    // 使用 emit 更新父组件的数据
     await nextTick();
     // 更新表单的模型数据部分
     modelData.value = newModelData;
@@ -50,6 +49,7 @@ async function handleDesignSuccess(data?: any) {
 const showDesigner = computed(() => {
   return Boolean(modelData.value?.key && modelData.value?.name);
 });
+
 defineExpose({ validate });
 </script>
 <template>

apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue

@@ -16,6 +16,7 @@ defineProps<{
 }>();
 
 const emit = defineEmits(['success']);
+
 const designerRef = ref();
 
 /** 保存成功回调 */
@@ -24,10 +25,12 @@ function handleSuccess(data?: any) {
     emit('success', data);
   }
 }
+
 /** 设计器配置校验 */
 async function validateConfig() {
   return await designerRef.value.validate();
 }
+
 defineExpose({ validateConfig });
 </script>
 <template>

apps/web-antd/src/views/bpm/model/index.vue

@@ -17,11 +17,9 @@ import {
 import { getModelList } from '#/api/bpm/model';
 import { router } from '#/router';
 
-// 流程分类对话框
 import CategoryForm from '../category/modules/form.vue';
 import CategoryDraggableModel from './modules/category-draggable-model.vue';
 
-// 新建流程分类对话框
 const [CategoryFormModal, categoryFormModalApi] = useVbenModal({
   connectedComponent: CategoryForm,
   destroyOnClose: true,