feat：【antd】【bpm】processInstance/create 代码评审

apps/web-antd/src/api/bpm/definition/index.ts

@@ -9,6 +9,7 @@ export namespace BpmProcessDefinitionApi {
     key?: string;
     version: number;
     name: string;
+    category: string;
     description: string;
     deploymentTime: number;
     suspensionState: number;

apps/web-antd/src/views/bpm/processInstance/create/index.vue

@@ -6,6 +6,7 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { Page } from '@vben/common-ui';
+import { groupBy } from '@vben/utils';
 
 import {
   Card,
@@ -28,45 +29,33 @@ defineOptions({ name: 'BpmProcessInstanceCreate' });
 
 const route = useRoute();
 
-// 当前搜索关键字
-const searchName = ref('');
-const isSearching = ref(false);
-// 流程实例编号。场景：重新发起时
-const processInstanceId: any = route.query.processInstanceId;
-// 加载中
-const loading = ref(true);
-// 分类的列表
-const categoryList: any = ref([]);
-// 当前选中的分类
-const activeCategory = ref('');
-// 流程定义的列表
+const loading = ref(true); // 加载中
+const processInstanceId: any = route.query.processInstanceId; // 流程实例编号。场景：重新发起时
+
+const categoryList: any = ref([]); // 分类的列表
+const activeCategory = ref(''); // 当前选中的分类
+
+const searchName = ref(''); // 当前搜索关键字
 const processDefinitionList = ref<BpmProcessDefinitionApi.ProcessDefinition[]>(
   [],
-);
+); // 流程定义的列表
+const filteredProcessDefinitionList = ref<
+  BpmProcessDefinitionApi.ProcessDefinition[]
+>([]); // 用于存储搜索过滤后的流程定义
 
-// 实现 groupBy 功能
-function groupBy(array: any[], key: string) {
-  const result: Record<string, any[]> = {};
-  for (const item of array) {
-    const groupKey = item[key];
-    if (!result[groupKey]) {
-      result[groupKey] = [];
-    }
-    result[groupKey].push(item);
-  }
-  return result;
-}
+const selectProcessDefinition = ref(); // 选择的流程定义
+const processDefinitionDetailRef = ref();
 
 /** 查询列表 */
 async function getList() {
   loading.value = true;
   try {
-    // 所有流程分类数据
-    await getCategoryList();
-    // 所有流程定义数据
-    await handleGetProcessDefinitionList();
+    // 1.1 所有流程分类数据
+    await loadCategoryList();
+    // 1.2 所有流程定义数据
+    await loadProcessDefinitionList();
 
-    // 如果 processInstanceId 非空，说明是重新发起
+    // 2. 如果 processInstanceId 非空，说明是重新发起
     if (processInstanceId?.length > 0) {
       const processInstance = await getProcessInstance(processInstanceId);
       if (!processInstance) {
@@ -88,65 +77,34 @@ async function getList() {
 }
 
 /** 获取所有流程分类数据 */
-async function getCategoryList() {
-  try {
-    // 流程分类
-    categoryList.value = await getCategorySimpleList();
-  } catch {
-    // 错误处理
-  }
+async function loadCategoryList() {
+  categoryList.value = await getCategorySimpleList();
 }
 
 /** 获取所有流程定义数据 */
-async function handleGetProcessDefinitionList() {
-  try {
-    // 流程定义
-    processDefinitionList.value = await getProcessDefinitionList({
-      suspensionState: 1,
-    });
-    // 初始化过滤列表为全部流程定义
-    filteredProcessDefinitionList.value = processDefinitionList.value;
+async function loadProcessDefinitionList() {
+  // 流程定义
+  processDefinitionList.value = await getProcessDefinitionList({
+    suspensionState: 1,
+  });
 
-    // 在获取完所有数据后，设置第一个有效分类为激活状态
-    if (availableCategories.value.length > 0 && !activeCategory.value) {
-      activeCategory.value = availableCategories.value[0].code;
-    }
-  } catch {
-    // 错误处理
-  }
+  // 空搜索，初始化相关数据
+  handleQuery();
 }
 
-/** 用于存储搜索过滤后的流程定义 */
-const filteredProcessDefinitionList = ref<
-  BpmProcessDefinitionApi.ProcessDefinition[]
->([]);
-
 /** 搜索流程 */
 function handleQuery() {
   if (searchName.value.trim()) {
     // 如果有搜索关键字，进行过滤
-    isSearching.value = true;
     filteredProcessDefinitionList.value = processDefinitionList.value.filter(
       (definition: any) =>
         definition.name.toLowerCase().includes(searchName.value.toLowerCase()),
     );
-
-    // 获取搜索结果中的分类
-    const searchResultGroups = groupBy(
-      filteredProcessDefinitionList.value,
-      'category',
-    );
-    const availableCategoryCodes = Object.keys(searchResultGroups);
-
-    // 如果有匹配的分类，切换到第一个包含匹配结果的分类
-    if (availableCategoryCodes.length > 0 && availableCategoryCodes[0]) {
-      activeCategory.value = availableCategoryCodes[0];
-    }
+    // 如果有匹配，切换到第一个包含匹配结果的分类
+    activeCategory.value = availableCategories.value[0]?.name;
   } else {
     // 如果没有搜索关键字，恢复所有数据
-    isSearching.value = false;
     filteredProcessDefinitionList.value = processDefinitionList.value;
-
     // 恢复到第一个可用分类
     if (availableCategories.value.length > 0) {
       activeCategory.value = availableCategories.value[0].code;
@@ -154,20 +112,13 @@ function handleQuery() {
   }
 }
 
-/** 判断流程定义是否匹配搜索 */
-function isDefinitionMatchSearch(definition: any) {
-  if (!isSearching.value) return false;
-  return definition.name.toLowerCase().includes(searchName.value.toLowerCase());
-}
-
 /** 流程定义的分组 */
 const processDefinitionGroup = computed(() => {
   if (!processDefinitionList.value?.length) {
     return {};
   }
-
-  const grouped = groupBy(filteredProcessDefinitionList.value, 'category');
   // 按照 categoryList 的顺序重新组织数据
+  const grouped = groupBy(filteredProcessDefinitionList.value, 'category');
   const orderedGroup: Record<
     string,
     BpmProcessDefinitionApi.ProcessDefinition[]
@@ -182,17 +133,6 @@ const processDefinitionGroup = computed(() => {
   return orderedGroup;
 });
 
-/** 通过分类 code 获取对应的名称 */
-// eslint-disable-next-line no-unused-vars
-function _getCategoryName(categoryCode: string) {
-  return categoryList.value?.find((ctg: any) => ctg.code === categoryCode)
-    ?.name;
-}
-
-// ========== 表单相关 ==========
-const selectProcessDefinition = ref(); // 选择的流程定义
-const processDefinitionDetailRef = ref();
-
 /** 处理选择流程的按钮操作 */
 async function handleSelect(
   row: BpmProcessDefinitionApi.ProcessDefinition,
@@ -210,21 +150,14 @@ const availableCategories = computed(() => {
   if (!categoryList.value?.length || !processDefinitionGroup.value) {
     return [];
   }
-
   // 获取所有有流程的分类代码
   const availableCategoryCodes = Object.keys(processDefinitionGroup.value);
-
   // 过滤出有流程的分类
   return categoryList.value.filter((category: BpmCategoryApi.Category) =>
     availableCategoryCodes.includes(category.code),
   );
 });
 
-/** 获取 tab 的位置 */
-const tabPosition = computed(() => {
-  return window.innerWidth < 768 ? 'top' : 'left';
-});
-
 /** 监听可用分类变化，自动设置正确的活动分类 */
 watch(
   availableCategories,
@@ -251,7 +184,7 @@ onMounted(() => {
 
 <template>
   <Page auto-content-height>
-    <!-- TODO @ziye：【优先级：低】这里交互，可以做成类似 vue3 + element-plus 那个一样，滚动切换分类哈？对标钉钉、飞书哈； -->
+    <!-- TODO @jason：这里交互，可以做成类似 vue3 + element-plus 那个一样，滚动切换分类哈？对标钉钉、飞书哈； -->
     <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
     <template v-if="!selectProcessDefinition">
       <Card
@@ -275,8 +208,8 @@ onMounted(() => {
           </div>
         </template>
 
-        <div v-if="filteredProcessDefinitionList?.length">
-          <Tabs v-model:active-key="activeCategory" :tab-position="tabPosition">
+        <div v-if="filteredProcessDefinitionList?.length" class="-ml-6">
+          <Tabs v-model:active-key="activeCategory" tab-position="left">
             <Tabs.TabPane
               v-for="category in availableCategories"
               :key="category.code"
@@ -297,7 +230,7 @@ onMounted(() => {
                     hoverable
                     class="definition-item-card w-full cursor-pointer"
                     :class="{
-                      'search-match': isDefinitionMatchSearch(definition),
+                      'search-match': searchName.trim().length > 0,
                     }"
                     :body-style="{
                       width: '100%',
@@ -311,7 +244,6 @@ onMounted(() => {
                         class="flow-icon-img object-contain"
                         alt="流程图标"
                       />
-
                       <div v-else class="flow-icon flex-shrink-0">
                         <span class="text-xs text-white">
                           {{ definition.name?.slice(0, 2) }}
@@ -351,6 +283,7 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
+// @jason：看看能不能通过 tailwindcss 简化下
 .process-definition-container {
   .definition-item-card {
     .flow-icon-img {

apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue

@@ -49,12 +49,9 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['cancel']);
-
-// 增加表单就绪状态变量 表单就绪后再渲染form-create
-const isFormReady = ref(false);
-
 const { closeCurrentTab } = useTabs();
 
+const isFormReady = ref(false); // 表单就绪状态变量：表单就绪后再渲染 form-create
 const getTitle = computed(() => {
   return `流程表单 - ${props.selectProcessDefinition.name}`;
 });
@@ -64,54 +61,51 @@ const detailForm = ref<ProcessFormData>({
   option: {},
   value: {},
 });
-
 const fApi = ref<any>();
+
 const startUserSelectTasks = ref<UserTask[]>([]);
 const startUserSelectAssignees = ref<Record<string, string[]>>({});
 const tempStartUserSelectAssignees = ref<Record<string, string[]>>({});
+
 const bpmnXML = ref<string | undefined>(undefined);
 const simpleJson = ref<string | undefined>(undefined);
+
 const timelineRef = ref<any>();
 const activeTab = ref('form');
 const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]);
 const processInstanceStartLoading = ref(false);
+
 /** 提交按钮 */
 async function submitForm() {
   if (!fApi.value || !props.selectProcessDefinition) {
     return;
   }
+  // 流程表单校验
+  await fApi.value.validate();
 
-  try {
-    // 流程表单校验
-    await fApi.value.validate();
-
-    // 校验指定审批人
-    if (startUserSelectTasks.value?.length > 0) {
-      for (const userTask of startUserSelectTasks.value) {
-        const assignees = startUserSelectAssignees.value[userTask.id];
-        if (Array.isArray(assignees) && assignees.length === 0) {
-          message.warning(`请选择${userTask.name}的候选人`);
-          return;
-        }
+  // 校验指定审批人
+  if (startUserSelectTasks.value?.length > 0) {
+    for (const userTask of startUserSelectTasks.value) {
+      const assignees = startUserSelectAssignees.value[userTask.id];
+      if (Array.isArray(assignees) && assignees.length === 0) {
+        message.warning(`请选择${userTask.name}的候选人`);
+        return;
       }
     }
+  }
 
+  processInstanceStartLoading.value = true;
+  try {
     // 提交请求
-    processInstanceStartLoading.value = true;
     await createProcessInstance({
       processDefinitionId: props.selectProcessDefinition.id,
       variables: detailForm.value.value,
       startUserSelectAssignees: startUserSelectAssignees.value,
     });
-
+    // 关闭并提示
     message.success('发起流程成功');
-
-    // TODO @ziye：有告警哈；
-    closeCurrentTab();
-
+    await closeCurrentTab();
     await router.push({ name: 'BpmTaskMy' });
-  } catch (error) {
-    console.error('发起流程失败:', error);
   } finally {
     processInstanceStartLoading.value = false;
   }
@@ -139,6 +133,7 @@ async function initProcessInfo(row: any, formVariables?: any) {
     setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables);
 
     // 设置表单就绪状态
+    // TODO @jason：这个变量是必须的，有没可能简化掉？
     isFormReady.value = true;
 
     await nextTick();
@@ -191,53 +186,45 @@ async function getApprovalDetail(row: {
   id: string;
   processVariablesStr: string;
 }) {
-  try {
-    const data = await getApprovalDetailApi({
-      processDefinitionId: row.id,
-      activityId: BpmNodeIdEnum.START_USER_NODE_ID,
-      processVariablesStr: row.processVariablesStr,
+  const data = await getApprovalDetailApi({
+    processDefinitionId: row.id,
+    activityId: BpmNodeIdEnum.START_USER_NODE_ID,
+    processVariablesStr: row.processVariablesStr,
+  });
+  if (!data) {
+    message.error('查询不到审批详情信息！');
+    return;
+  }
+
+  // 获取审批节点
+  activityNodes.value = data.activityNodes;
+
+  // 获取发起人自选的任务
+  startUserSelectTasks.value = (data.activityNodes?.filter(
+    (node) =>
+      BpmCandidateStrategyEnum.START_USER_SELECT === node.candidateStrategy,
+  ) || []) as unknown as UserTask[];
+
+  // 恢复之前的选择审批人
+  if (startUserSelectTasks.value.length > 0) {
+    for (const node of startUserSelectTasks.value) {
+      const tempAssignees = tempStartUserSelectAssignees.value[node.id];
+      startUserSelectAssignees.value[node.id] = tempAssignees?.length
+        ? tempAssignees
+        : [];
+    }
+  }
+
+  // 设置表单字段权限
+  const formFieldsPermission = data.formFieldsPermission;
+  if (formFieldsPermission) {
+    Object.entries(formFieldsPermission).forEach(([field, permission]) => {
+      setFieldPermission(field, permission as string);
     });
-
-    if (!data) {
-      message.error('查询不到审批详情信息！');
-      return;
-    }
-
-    // 获取审批节点
-    activityNodes.value = data.activityNodes;
-
-    // 获取发起人自选的任务
-    startUserSelectTasks.value = (data.activityNodes?.filter(
-      (node) =>
-        BpmCandidateStrategyEnum.START_USER_SELECT === node.candidateStrategy,
-    ) || []) as unknown as UserTask[];
-
-    // 恢复之前的选择审批人
-    if (startUserSelectTasks.value.length > 0) {
-      for (const node of startUserSelectTasks.value) {
-        const tempAssignees = tempStartUserSelectAssignees.value[node.id];
-        startUserSelectAssignees.value[node.id] = tempAssignees?.length
-          ? tempAssignees
-          : [];
-      }
-    }
-
-    // 设置表单字段权限
-    const formFieldsPermission = data.formFieldsPermission;
-    if (formFieldsPermission) {
-      Object.entries(formFieldsPermission).forEach(([field, permission]) => {
-        setFieldPermission(field, permission as string);
-      });
-    }
-  } catch (error) {
-    message.error('获取审批详情失败');
-    console.error('获取审批详情失败:', error);
   }
 }
 
-/**
- * 设置表单权限
- */
+/** 设置表单权限 */
 function setFieldPermission(field: string, permission: string) {
   if (permission === BpmFieldPermissionType.READ) {
     fApi.value?.disabled(true, field);
@@ -315,7 +302,6 @@ defineExpose({ initProcessInfo });
           </Col>
         </Row>
       </Tabs.TabPane>
-
       <Tabs.TabPane
         tab="流程图"
         key="flow"

packages/@core/base/shared/src/utils/util.ts

@@ -87,3 +87,16 @@ export function copyValueToTarget(target: any, source: any) {
   // 更新目标对象值
   Object.assign(target, newObj);
 }
+
+/** 实现 groupBy 功能 */
+export function groupBy(array: any[], key: string) {
+  const result: Record<string, any[]> = {};
+  for (const item of array) {
+    const groupKey = item[key];
+    if (!result[groupKey]) {
+      result[groupKey] = [];
+    }
+    result[groupKey].push(item);
+  }
+  return result;
+}