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/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>