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

2025-10-24 13:57:31 +08:00
parent bbd32a274e
commit d568ab0fe9
9 changed files with 78 additions and 115 deletions
--- a/apps/web-antd/src/views/bpm/model/definition/index.vue
+++ b/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';

--- a/apps/web-antd/src/views/bpm/model/form/index.vue
+++ b/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' });
 }

--- a/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
+++ b/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;
    }
  }
--- a/apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue
+++ b/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;
--- a/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue
+++ b/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();
--- a/apps/web-antd/src/views/bpm/model/form/modules/form-design.vue
+++ b/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();
--- a/apps/web-antd/src/views/bpm/model/form/modules/process-design.vue
+++ b/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>
--- a/apps/web-antd/src/views/bpm/model/form/modules/simple-model-design.vue
+++ b/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>
--- a/apps/web-antd/src/views/bpm/model/index.vue
+++ b/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,