feat: 增强用户选择弹窗功能，添加关闭事件处理，优化用户ID去重逻辑，改进流程实例创建界面，支持分类和搜索功能

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

@@ -0,0 +1,49 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+/** 流程定义 */
+export namespace BpmDefinitionApi {
+  export interface ProcessDefinitionVO {
+    id: string;
+    version: number;
+    deploymentTime: number;
+    suspensionState: number;
+    formType?: number;
+  }
+}
+
+/** 查询流程定义 */
+export async function getProcessDefinition(id?: string, key?: string) {
+  return requestClient.get<BpmDefinitionApi.ProcessDefinitionVO>(
+    '/bpm/process-definition/get',
+    {
+      params: { id, key },
+    },
+  );
+}
+
+/** 分页查询流程定义 */
+export async function getProcessDefinitionPage(params: PageParam) {
+  return requestClient.get<PageResult<BpmDefinitionApi.ProcessDefinitionVO>>(
+    '/bpm/process-definition/page',
+    { params },
+  );
+}
+
+/** 查询流程定义列表 */
+export async function getProcessDefinitionList(params: any) {
+  return requestClient.get<PageResult<BpmDefinitionApi.ProcessDefinitionVO>>(
+    '/bpm/process-definition/list',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询流程定义列表（简单列表） */
+export async function getSimpleProcessDefinitionList() {
+  return requestClient.get<PageResult<BpmDefinitionApi.ProcessDefinitionVO>>(
+    '/bpm/process-definition/simple-list',
+  );
+}

apps/web-antd/src/components/user-select-modal/user-select-modal.vue

@@ -52,6 +52,7 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   cancel: [];
+  closed: [];
   confirm: [value: number[]];
   'update:value': [value: number[]];
 }>();
@@ -167,9 +168,12 @@ const loadUserData = async (pageNo: number, pageSize: number) => {
 
 // 更新右侧列表数据
 const updateRightListData = () => {
-  // 获取选中的用户
+  // 使用 Set 来去重选中的用户ID
+  const uniqueSelectedIds = new Set(selectedUserIds.value);
+
+  // 获取选中的用户，确保不重复
   const selectedUsers = userList.value.filter((user) =>
-    selectedUserIds.value.includes(String(user.id)),
+    uniqueSelectedIds.has(String(user.id)),
   );
 
   // 应用搜索过滤
@@ -181,8 +185,10 @@ const updateRightListData = () => {
       )
     : selectedUsers;
 
-  // 更新总数
-  rightListState.value.pagination.total = filteredUsers.length;
+  // 更新总数（使用 Set 确保唯一性）
+  rightListState.value.pagination.total = new Set(
+    filteredUsers.map((user) => user.id),
+  ).size;
 
   // 应用分页
   const { current, pageSize } = rightListState.value.pagination;
@@ -219,8 +225,9 @@ const handleUserSearch = async (direction: string, value: string) => {
 
 // 处理用户选择变化
 const handleUserChange = (targetKeys: string[]) => {
-  selectedUserIds.value = targetKeys;
-  emit('update:value', targetKeys.map(Number));
+  // 使用 Set 来去重选中的用户ID
+  selectedUserIds.value = [...new Set(targetKeys)];
+  emit('update:value', selectedUserIds.value.map(Number));
   updateRightListData();
 };
 
@@ -281,7 +288,14 @@ const open = async () => {
         pageSize: props.value.length,
         userIds: props.value,
       });
-      userList.value.push(...list);
+      // 使用 Map 来去重，以用户 ID 为 key
+      const userMap = new Map(userList.value.map((user) => [user.id, user]));
+      list.forEach((user) => {
+        if (!userMap.has(user.id)) {
+          userMap.set(user.id, user);
+        }
+      });
+      userList.value = [...userMap.values()];
       updateRightListData();
     }
 
@@ -360,6 +374,7 @@ const handleCancel = () => {
 
 // 关闭弹窗
 const handleClosed = () => {
+  emit('closed');
   resetData();
 };
 
@@ -421,7 +436,7 @@ defineExpose({
             @search="handleUserSearch"
           >
             <template #render="item">
-              {{ item.nickname }} ({{ item.id }})
+              {{ item?.nickname }} ({{ item?.username }})
             </template>
 
             <template #footer="{ direction }">

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

@@ -1,28 +1,366 @@
 <script lang="ts" setup>
+import type { BpmDefinitionApi } from '@/api/bpm/definition';
+
+import type { BpmCategoryApi } from '#/api/bpm/category';
+
+import { computed, getCurrentInstance, nextTick, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
 import { Page } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import { Card, Input, message, Space } from 'ant-design-vue';
+
+import { getCategorySimpleList } from '#/api/bpm/category';
+import { getProcessDefinitionList } from '#/api/bpm/definition';
+import { getProcessInstance } from '#/api/bpm/processInstance';
+
+defineOptions({ name: 'BpmProcessInstanceCreate' });
+
+const { proxy } = getCurrentInstance() as any;
+const route = useRoute(); // 路由
+
+const searchName = ref(''); // 当前搜索关键字
+const processInstanceId: any = route.query.processInstanceId; // 流程实例编号。场景：重新发起时
+const loading = ref(true); // 加载中
+const categoryList: any = ref([]); // 分类的列表
+const categoryActive: any = ref({}); // 选中的分类
+const processDefinitionList = ref([]); // 流程定义的列表
+
+// 实现 groupBy 功能
+const 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 getList = async () => {
+  loading.value = true;
+  try {
+    // 所有流程分类数据
+    await getCategoryList();
+    // 所有流程定义数据
+    await handleGetProcessDefinitionList();
+
+    // 如果 processInstanceId 非空，说明是重新发起
+    if (processInstanceId?.length > 0) {
+      const processInstance = await getProcessInstance(processInstanceId);
+      if (!processInstance) {
+        message.error('重新发起流程失败，原因：流程实例不存在');
+        return;
+      }
+      const processDefinition = processDefinitionList.value.find(
+        (item: any) => item.key === processInstance.processDefinition?.key,
+      );
+      if (!processDefinition) {
+        message.error('重新发起流程失败，原因：流程定义不存在');
+        return;
+      }
+      await handleSelect(processDefinition, processInstance.formVariables);
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+/** 获取所有流程分类数据 */
+const getCategoryList = async () => {
+  try {
+    // 流程分类
+    categoryList.value = await getCategorySimpleList();
+  } catch {
+    // 错误处理
+  }
+};
+
+/** 获取所有流程定义数据 */
+const handleGetProcessDefinitionList = async () => {
+  try {
+    // 流程定义
+    processDefinitionList.value = await getProcessDefinitionList({
+      suspensionState: 1,
+    });
+    // 初始化过滤列表为全部流程定义
+    filteredProcessDefinitionList.value = processDefinitionList.value;
+
+    // 在获取完所有数据后，设置第一个有效分类为激活状态
+    if (availableCategories.value.length > 0 && !categoryActive.value?.code) {
+      categoryActive.value = availableCategories.value[0];
+    }
+  } catch {
+    // 错误处理
+  }
+};
+
+/** 搜索流程 */
+const filteredProcessDefinitionList = ref([]); // 用于存储搜索过滤后的流程定义
+const handleQuery = () => {
+  searchName.value.trim()
+    ? // 如果有搜索关键字，进行过滤
+      (filteredProcessDefinitionList.value = processDefinitionList.value.filter(
+        (definition: any) =>
+          definition.name
+            .toLowerCase()
+            .includes(searchName.value.toLowerCase()),
+      ))
+    : // 如果没有搜索关键字，恢复所有数据
+      (filteredProcessDefinitionList.value = processDefinitionList.value);
+};
+
+/** 流程定义的分组 */
+const processDefinitionGroup: any = computed(() => {
+  if (!processDefinitionList.value?.length) {
+    return {};
+  }
+
+  const grouped = groupBy(filteredProcessDefinitionList.value, 'category');
+  // 按照 categoryList 的顺序重新组织数据
+  const orderedGroup = {};
+  categoryList.value.forEach((category: any) => {
+    if (grouped[category.code]) {
+      orderedGroup[category.code] = grouped[category.code];
+    }
+  });
+  return orderedGroup;
+});
+
+/** 左侧分类切换 */
+const handleCategoryClick = (category: any) => {
+  categoryActive.value = category;
+  const categoryRef = proxy.$refs[`category-${category.code}`]; // 获取点击分类对应的 DOM 元素
+  if (categoryRef?.length) {
+    const scrollWrapper = proxy.$refs.scrollWrapper; // 获取右侧滚动容器
+    const categoryOffsetTop = categoryRef[0].offsetTop;
+
+    // 滚动到对应位置
+    scrollWrapper.scrollTo({ top: categoryOffsetTop, behavior: 'smooth' });
+  }
+};
+
+/** 通过分类 code 获取对应的名称 */
+const getCategoryName = (categoryCode: string) => {
+  return categoryList.value?.find((ctg: any) => ctg.code === categoryCode)
+    ?.name;
+};
+
+// ========== 表单相关 ==========
+const selectProcessDefinition = ref(); // 选择的流程定义
+const processDefinitionDetailRef = ref();
+
+/** 处理选择流程的按钮操作 */
+const handleSelect = async (
+  row: BpmDefinitionApi.ProcessDefinitionVO,
+  formVariables?: any,
+) => {
+  // 设置选择的流程
+  selectProcessDefinition.value = row;
+  // 初始化流程定义详情
+  await nextTick();
+  processDefinitionDetailRef.value?.initProcessInfo(row, formVariables);
+};
+
+/** 处理滚动事件，和左侧分类联动 */
+const handleScroll = (e: any) => {
+  // 直接使用事件对象获取滚动位置
+  const scrollTop = e.scrollTop;
+
+  // 获取所有分类区域的位置信息
+  const categoryPositions = categoryList.value
+    .map((category: BpmCategoryApi.CategoryVO) => {
+      const categoryRef = proxy.$refs[`category-${category.code}`];
+      if (categoryRef?.[0]) {
+        return {
+          code: category.code,
+          offsetTop: categoryRef[0].offsetTop,
+          height: categoryRef[0].offsetHeight,
+        };
+      }
+      return null;
+    })
+    .filter(Boolean);
+
+  // 查找当前滚动位置对应的分类
+  let currentCategory = categoryPositions[0];
+  for (const position of categoryPositions) {
+    // 为了更好的用户体验，可以添加一个缓冲区域（比如 50px）
+    if (scrollTop >= position.offsetTop - 50) {
+      currentCategory = position;
+    } else {
+      break;
+    }
+  }
+
+  // 更新当前 active 的分类
+  if (currentCategory && categoryActive.value.code !== currentCategory.code) {
+    categoryActive.value = categoryList.value.find(
+      (c: CategoryVO) => c.code === currentCategory.code,
+    );
+  }
+};
+
+/** 过滤出有流程的分类列表。目的：只展示有流程的分类 */
+const availableCategories = computed(() => {
+  if (!categoryList.value?.length || !processDefinitionGroup.value) {
+    return [];
+  }
+
+  // 获取所有有流程的分类代码
+  const availableCategoryCodes = Object.keys(processDefinitionGroup.value);
+
+  // 过滤出有流程的分类
+  return categoryList.value.filter((category: CategoryVO) =>
+    availableCategoryCodes.includes(category.code),
+  );
+});
+
+/** 初始化 */
+onMounted(() => {
+  getList();
+});
 </script>
 
 <template>
-  <Page>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processInstance/create/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/processInstance/create/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
+    <template v-if="!selectProcessDefinition">
+      <Input
+        v-model:value="searchName"
+        class="!w-50% mb-15px"
+        placeholder="请输入流程名称"
+        allow-clear
+        @input="handleQuery"
+        @clear="handleQuery"
+      >
+        <template #prefix>
+          <IconifyIcon icon="mdi:search-web" />
+        </template>
+      </Input>
+      <Card
+        :class="{
+          'process-definition-container': filteredProcessDefinitionList?.length,
+        }"
+        :body-style="{
+          height: '100%',
+        }"
+        class="position-relative pb-20px h-700px"
+        :loading="loading"
+      >
+        <div
+          v-if="filteredProcessDefinitionList?.length"
+          class="flex flex-nowrap"
+        >
+          <div class="w-1/5">
+            <div class="flex flex-col">
+              <div
+                v-for="category in availableCategories"
+                :key="category.code"
+                class="p-10px text-14px flex cursor-pointer items-center rounded-md"
+                :class="
+                  categoryActive.code === category.code
+                    ? 'text-#3e7bff bg-#e8eeff'
+                    : ''
+                "
+                @click="handleCategoryClick(category)"
+              >
+                {{ category.name }}
+              </div>
+            </div>
+          </div>
+          <div class="w-4/5">
+            <div
+              ref="scrollWrapper"
+              class="h-700px overflow-y-auto"
+              @scroll="handleScroll"
+            >
+              <div
+                class="mb-20px pl-10px"
+                v-for="(definitions, categoryCode) in processDefinitionGroup"
+                :key="categoryCode"
+                :ref="`category-${categoryCode}`"
+              >
+                <h3 class="text-18px mb-10px mt-5px font-bold">
+                  {{ getCategoryName(categoryCode as any) }}
+                </h3>
+                <div class="gap3 grid grid-cols-3">
+                  <Card
+                    v-for="definition in definitions"
+                    :key="definition.id"
+                    hoverable
+                    class="definition-item-card cursor-pointer"
+                    @click="handleSelect(definition)"
+                  >
+                    <div class="flex">
+                      <img
+                        v-if="definition.icon"
+                        :src="definition.icon"
+                        class="w-32px h-32px"
+                      />
+                      <div v-else class="flow-icon">
+                        <span style="font-size: 12px; color: #fff">
+                          <!-- {{ subString(definition.name, 0, 2) }} -->
+
+                          {{ definition.name }}
+                        </span>
+                      </div>
+                      <span class="!ml-10px text-base">
+                        {{ definition.name }}
+                      </span>
+                    </div>
+                  </Card>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-else class="!py-200px text-center">
+          <Space direction="vertical" size="large">
+            <span class="text-gray-500">没有找到搜索结果</span>
+          </Space>
+        </div>
+      </Card>
+    </template>
+
+    <!-- 第二步，填写表单，进行流程的提交 -->
+    <!-- <ProcessDefinitionDetail
+    v-else
+    ref="processDefinitionDetailRef"
+    :select-process-definition="selectProcessDefinition"
+    @cancel="selectProcessDefinition = undefined"
+  /> -->
   </Page>
 </template>
+
+<style lang="scss" scoped>
+.flow-icon {
+  display: flex;
+  width: 32px;
+  height: 32px;
+  margin-right: 10px;
+  background-color: var(--ant-primary-color);
+  border-radius: 0.25rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.process-definition-container::before {
+  position: absolute;
+  left: 20.8%;
+  height: 100%;
+  border-left: 1px solid #e6e6e6;
+  content: '';
+}
+
+:deep() {
+  .definition-item-card {
+    .ant-card-body {
+      padding: 14px;
+    }
+  }
+}
+</style>

apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue

@@ -151,7 +151,6 @@ const customApproveUsers = ref<Record<string, any[]>>({}); // key：activityId
 
 // 打开选择用户弹窗
 const handleSelectUser = (activityId: string, selectedList: any[]) => {
-  console.log(userSelectFormRef.value);
   userSelectFormRef.value.open(activityId, selectedList);
 };
 
@@ -218,6 +217,16 @@ const shouldShowApprovalReason = (task: any, nodeType: NodeTypeEnum) => {
     )
   );
 };
+
+// 用户选择弹窗关闭
+const handleUserSelectClosed = () => {
+  selectedUsers.value = [];
+};
+
+// 用户选择弹窗取消
+const handleUserSelectCancel = () => {
+  selectedUsers.value = [];
+};
 </script>
 
 <template>
@@ -283,7 +292,7 @@ const shouldShowApprovalReason = (task: any, nodeType: NodeTypeEnum) => {
 
         <!-- 需要自定义选择审批人 -->
         <div
-          v-if="true || shouldShowCustomUserSelect(activity)"
+          v-if="shouldShowCustomUserSelect(activity)"
           class="flex flex-wrap items-center gap-2"
         >
           <Tooltip title="添加用户" placement="left">
@@ -447,5 +456,7 @@ const shouldShowApprovalReason = (task: any, nodeType: NodeTypeEnum) => {
     :multiple="true"
     title="选择用户"
     @confirm="handleUserSelectConfirm"
+    @closed="handleUserSelectClosed"
+    @cancel="handleUserSelectCancel"
   />
 </template>