feat: 完善用户选择弹窗功能，添加分页和搜索功能，优化部门选择逻辑进度 30%

2025-05-09 01:26:33 +08:00
parent c201766bdb
commit bc50357548
2 changed files with 281 additions and 126 deletions
--- a/apps/web-antd/src/components/user-select-modal/user-select-modal.vue
+++ b/apps/web-antd/src/components/user-select-modal/user-select-modal.vue
@@ -14,6 +14,7 @@ import {
  Col,
  Input,
  message,
+  Pagination,
  Row,
  Spin,
  Transfer,
@@ -21,7 +22,7 @@ import {
 } from 'ant-design-vue';

 import { getSimpleDeptList } from '#/api/system/dept';
-import { getSimpleUserList } from '#/api/system/user';
+import { getUserPage } from '#/api/system/user';

 // 部门树节点接口
 interface DeptTreeNode {
@@ -60,50 +61,53 @@ const deptTree = ref<any[]>([]);
 const deptList = ref<SystemDeptApi.Dept[]>([]);
 const expandedKeys = ref<Key[]>([]);
 const selectedDeptId = ref<number>();
-const searchValue = ref('');
-
-// 用户数据
-const userList = ref<SystemUserApi.User[]>([]);
-const filteredUserList = ref<SystemUserApi.User[]>([]);
-const selectedUserIds = ref<string[]>([]);
-
-// 分页数据
-const pagination = ref({
-  pageSize: 10,
-  simple: true,
-  showSizeChanger: true,
-  onChange: (page: number, pageSize: number) => {
-    console.log('🚀 ~ pagination ~ page:', page);
-    console.log('🚀 ~ pagination ~ pageSize:', pageSize);
-  },
-});
+const deptSearchKeys = ref('');

 // 加载状态
 const loading = ref(false);

-// 计算属性：合并已选择的用户和当前部门过滤后的用户
-const transferUserList = computed(() => {
-  // 1. 获取所有已选择的用户
-  const selectedUsers = userList.value.filter((user) =>
-    selectedUserIds.value.includes(String(user.id)),
-  );
+// 用户数据管理
+const userList = ref<SystemUserApi.User[]>([]); // 存储所有已知用户
+const selectedUserIds = ref<string[]>([]);

-  // 2. 获取当前部门过滤后的未选择用户
-  const filteredUnselectedUsers = filteredUserList.value.filter(
-    (user) => !selectedUserIds.value.includes(String(user.id)),
-  );
+// 左侧列表状态
+const leftListState = ref({
+  loading: false,
+  searchValue: '',
+  dataSource: [] as SystemUserApi.User[],
+  pagination: {
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  },
+});

-  // 3. 合并并去重
-  return [...selectedUsers, ...filteredUnselectedUsers];
+// 右侧列表状态
+const rightListState = ref({
+  searchValue: '',
+  dataSource: [] as SystemUserApi.User[],
+  pagination: {
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  },
+});
+
+// 计算属性：Transfer 数据源
+const transferDataSource = computed(() => {
+  return [
+    ...leftListState.value.dataSource,
+    ...rightListState.value.dataSource,
+  ];
 });

 // 过滤部门树数据
 const filteredDeptTree = computed(() => {
-  if (!searchValue.value) return deptTree.value;
+  if (!deptSearchKeys.value) return deptTree.value;

  const filterNode = (node: any): any => {
    const title = node?.title?.toLowerCase();
-    const search = searchValue.value.toLowerCase();
+    const search = deptSearchKeys.value.toLowerCase();

    // 如果当前节点匹配
    if (title.includes(search)) {
@@ -133,87 +137,123 @@ const filteredDeptTree = computed(() => {
  return deptTree.value.map((node: any) => filterNode(node)).filter(Boolean);
 });

-// 获取指定部门及其所有子部门的ID列表
-const getChildDeptIds = (
-  deptId: number | undefined,
-  deptList: SystemDeptApi.Dept[],
-): number[] => {
-  if (!deptId) return [];
-  const ids = [deptId];
-  const children = deptList.filter((dept) => dept.parentId === deptId);
-  children.forEach((child) => {
-    ids.push(...getChildDeptIds(child.id, deptList));
-  });
-  return ids;
-};
-
-// 获取部门过滤后的用户列表
-const filterUserList = async (deptId: number) => {
-  loading.value = true;
+// 加载用户数据
+const loadUserData = async (pageNo: number, pageSize: number) => {
+  leftListState.value.loading = true;
  try {
-    // 获取部门及其子部门的所有用户
-    const deptIds = getChildDeptIds(deptId, deptList.value);
-    filteredUserList.value = userList.value.filter((user) =>
-      deptIds.includes(user.deptId),
+    const { list, total } = await getUserPage({
+      pageNo,
+      pageSize,
+      deptId: selectedDeptId.value,
+      username: leftListState.value.searchValue || undefined,
+    });
+
+    leftListState.value.dataSource = list;
+    leftListState.value.pagination.total = total;
+    leftListState.value.pagination.current = pageNo;
+    leftListState.value.pagination.pageSize = pageSize;
+
+    // 更新用户列表缓存
+    const newUsers = list.filter(
+      (user) => !userList.value.some((u) => u.id === user.id),
    );
+    if (newUsers.length > 0) {
+      userList.value.push(...newUsers);
+    }
  } finally {
-    loading.value = false;
+    leftListState.value.loading = false;
  }
 };

-// 处理部门选择
-const handleDeptSelect = (selectedKeys: Key[], _info: any) => {
-  if (selectedKeys.length === 0) return;
-  const deptId = Number(selectedKeys[0]);
-  selectedDeptId.value = deptId;
-  filterUserList(deptId);
+// 更新右侧列表数据
+const updateRightListData = () => {
+  // 获取选中的用户
+  const selectedUsers = userList.value.filter((user) =>
+    selectedUserIds.value.includes(String(user.id)),
+  );
+
+  // 应用搜索过滤
+  const filteredUsers = rightListState.value.searchValue
+    ? selectedUsers.filter((user) =>
+        user.nickname
+          .toLowerCase()
+          .includes(rightListState.value.searchValue.toLowerCase()),
+      )
+    : selectedUsers;
+
+  // 更新总数
+  rightListState.value.pagination.total = filteredUsers.length;
+
+  // 应用分页
+  const { current, pageSize } = rightListState.value.pagination;
+  const startIndex = (current - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+
+  rightListState.value.dataSource = filteredUsers.slice(startIndex, endIndex);
 };

-// 处理用户选择
+// 处理左侧分页变化
+const handleLeftPaginationChange = async (page: number, pageSize: number) => {
+  await loadUserData(page, pageSize);
+};
+
+// 处理右侧分页变化
+const handleRightPaginationChange = (page: number, pageSize: number) => {
+  rightListState.value.pagination.current = page;
+  rightListState.value.pagination.pageSize = pageSize;
+  updateRightListData();
+};
+
+// 处理用户搜索
+const handleUserSearch = async (direction: string, value: string) => {
+  if (direction === 'left') {
+    leftListState.value.searchValue = value;
+    leftListState.value.pagination.current = 1;
+    await loadUserData(1, leftListState.value.pagination.pageSize);
+  } else {
+    rightListState.value.searchValue = value;
+    rightListState.value.pagination.current = 1;
+    updateRightListData();
+  }
+};
+
+// 处理用户选择变化
 const handleUserChange = (targetKeys: string[]) => {
  selectedUserIds.value = targetKeys;
  emit('update:value', targetKeys.map(Number));
-};
-
-// 确认选择
-const handleConfirm = () => {
-  if (selectedUserIds.value.length === 0) {
-    message.warning('请选择用户');
-    return;
-  }
-  emit('confirm', selectedUserIds.value.map(Number));
-  modalApi.close();
-};
-
-// 取消选择
-const handleCancel = () => {
-  emit('cancel');
-  modalApi.close();
+  updateRightListData();
 };

 // 重置数据
 const resetData = () => {
-  deptTree.value = [];
-  deptList.value = [];
  userList.value = [];
-  filteredUserList.value = [];
  selectedUserIds.value = [];
-  selectedDeptId.value = undefined;
-  expandedKeys.value = [];
-  searchValue.value = '';
-  pagination.value = {
-    pageSize: 10,
-    simple: false,
-    showSizeChanger: true,
-  };
-};

-// 递归处理部门树节点
-const processDeptNode = (node: any): DeptTreeNode => {
-  return {
-    key: String(node.id),
-    title: `${node.name} (${node.id})`,
-    children: node.children?.map((child: any) => processDeptNode(child)),
+  // 取消部门选中
+  selectedDeptId.value = undefined;
+
+  // 取消选中的用户
+  selectedUserIds.value = [];
+
+  leftListState.value = {
+    loading: false,
+    searchValue: '',
+    dataSource: [],
+    pagination: {
+      current: 1,
+      pageSize: 10,
+      total: 0,
+    },
+  };
+
+  rightListState.value = {
+    searchValue: '',
+    dataSource: [],
+    pagination: {
+      current: 1,
+      pageSize: 10,
+      total: 0,
+    },
  };
 };

@@ -229,13 +269,20 @@ const open = async () => {
    deptTree.value = treeData.map((node) => processDeptNode(node));
    expandedKeys.value = deptTree.value.map((node) => node.key);

-    // 加载用户数据
-    userList.value = await getSimpleUserList();
-    filteredUserList.value = [...userList.value];
+    // 加载初始用户数据
+    await loadUserData(1, leftListState.value.pagination.pageSize);

    // 设置已选用户
    if (props.value?.length) {
      selectedUserIds.value = props.value.map(String);
+      // 加载已选用户的完整信息
+      const { list } = await getUserPage({
+        pageNo: 1,
+        pageSize: props.value.length,
+        userIds: props.value,
+      });
+      userList.value.push(...list);
+      updateRightListData();
    }

    modalApi.open();
@@ -244,11 +291,10 @@ const open = async () => {
  }
 };

-// 弹窗配置
-const [ModalComponent, modalApi] = useVbenModal({
-  title: props.title,
-  onCancel: handleCancel,
-});
+// TODO   后端接口目前仅支持  username 检索， 筛选条件需要跟后端请求参数保持一致。
+const filterOption = (inputValue: string, option: any) => {
+  return option.username.toLowerCase().includes(inputValue.toLowerCase());
+};

 // 处理部门树展开/折叠
 const handleExpand = (keys: Key[]) => {
@@ -257,7 +303,7 @@ const handleExpand = (keys: Key[]) => {

 // 处理部门搜索
 const handleDeptSearch = (value: string) => {
-  searchValue.value = value;
+  deptSearchKeys.value = value;

  // 如果有搜索结果，自动展开所有节点
  if (value) {
@@ -278,20 +324,76 @@ const handleDeptSearch = (value: string) => {
  }
 };

+// 处理部门选择
+const handleDeptSelect = async (selectedKeys: Key[], _info: any) => {
+  // 更新选中的部门ID
+  const newDeptId =
+    selectedKeys.length > 0 ? Number(selectedKeys[0]) : undefined;
+  selectedDeptId.value =
+    newDeptId === selectedDeptId.value ? undefined : newDeptId;
+
+  // 重置分页并加载数据
+  const { pageSize } = leftListState.value.pagination;
+  leftListState.value.pagination.current = 1;
+  await loadUserData(1, pageSize);
+};
+
+// 确认选择
+const handleConfirm = () => {
+  if (selectedUserIds.value.length === 0) {
+    message.warning('请选择用户');
+    return;
+  }
+  emit('confirm', selectedUserIds.value.map(Number));
+  modalApi.close();
+};
+
+// 取消选择
+const handleCancel = () => {
+  emit('cancel');
+  modalApi.close();
+  // 确保在动画结束后再重置数据
+  setTimeout(() => {
+    resetData();
+  }, 300);
+};
+
+// 关闭弹窗
+const handleClosed = () => {
+  resetData();
+};
+
+// 弹窗配置
+const [ModalComponent, modalApi] = useVbenModal({
+  title: props.title,
+  onCancel: handleCancel,
+  onClosed: handleClosed,
+  destroyOnClose: true,
+});
+
+// 递归处理部门树节点
+const processDeptNode = (node: any): DeptTreeNode => {
+  return {
+    key: String(node.id),
+    title: `${node.name} (${node.id})`,
+    children: node.children?.map((child: any) => processDeptNode(child)),
+  };
+};
+
 defineExpose({
  open,
 });
 </script>

 <template>
-  <ModalComponent class="w-[900px]">
+  <ModalComponent class="w-[1000px]" key="user-select-modal">
    <Spin :spinning="loading">
      <Row :gutter="[16, 16]">
        <Col :span="6">
          <div class="h-[500px] overflow-auto rounded border border-gray-200">
            <div class="border-b border-gray-200 p-2">
              <Input
-                v-model:value="searchValue"
+                v-model:value="deptSearchKeys"
                placeholder="搜索部门"
                allow-clear
                @input="(e) => handleDeptSearch(e.target?.value ?? '')"
@@ -306,24 +408,46 @@ defineExpose({
            />
          </div>
        </Col>
-        <Col :span="17">
+        <Col :span="18">
          <Transfer
            :row-key="(record) => String(record.id)"
+            :data-source="transferDataSource"
            v-model:target-keys="selectedUserIds"
-            :data-source="transferUserList"
            :titles="['未选', '已选']"
            :show-search="true"
-            :filter-option="
-              (inputValue, item) =>
-                item.nickname.toLowerCase().includes(inputValue.toLowerCase())
-            "
-            :pagination="pagination"
+            :show-select-all="true"
+            :filter-option="filterOption"
            @change="handleUserChange"
+            @search="handleUserSearch"
          >
            <template #render="item">
-              <span class="custom-item"
-                >{{ item.nickname }} ({{ item.id }})</span
-              >
+              {{ item.nickname }} ({{ item.id }})
+            </template>
+
+            <template #footer="{ direction }">
+              <div v-if="direction === 'left'">
+                <Pagination
+                  v-model:current="leftListState.pagination.current"
+                  v-model:page-size="leftListState.pagination.pageSize"
+                  :total="leftListState.pagination.total"
+                  :show-size-changer="true"
+                  :show-total="(total) => `共 ${total} 条`"
+                  size="small"
+                  @change="handleLeftPaginationChange"
+                />
+              </div>
+
+              <div v-if="direction === 'right'">
+                <Pagination
+                  v-model:current="rightListState.pagination.current"
+                  v-model:page-size="rightListState.pagination.pageSize"
+                  :total="rightListState.pagination.total"
+                  :show-size-changer="true"
+                  :show-total="(total) => `共 ${total} 条`"
+                  size="small"
+                  @change="handleRightPaginationChange"
+                />
+              </div>
            </template>
          </Transfer>
        </Col>
@@ -345,26 +469,60 @@ defineExpose({
 <style lang="scss" scoped>
 :deep(.ant-transfer) {
  display: flex;
-  justify-content: space-between;
  align-items: center;
-  height: 100%;
+  justify-content: space-between;
+  height: 500px;
 }

 :deep(.ant-transfer-list) {
+  display: flex;
  flex: 1;
+  flex-direction: column;
+  width: 300px !important;
  height: 100%;
 }

+:deep(.ant-transfer-list-header) {
+  flex-shrink: 0;
+}
+
 :deep(.ant-transfer-list-search) {
+  flex-shrink: 0;
  padding: 8px;
 }

 :deep(.ant-transfer-list-body) {
-  height: calc(100% - 40px);
+  flex: 1;
+  overflow: auto;
 }

-:deep(.ant-transfer-list-pagination) {
-  margin: 8px 0;
+:deep(.ant-transfer-list-content) {
+  height: auto !important;
+}
+
+:deep(.ant-transfer-list-content-item) {
+  padding: 6px 12px;
+}
+
+:deep(.ant-transfer-operation) {
+  padding: 0 8px;
+}
+
+:deep(.ant-transfer-list-footer) {
+  flex-shrink: 0;
+}
+
+:deep(.ant-pagination) {
+  margin: 8px;
+  font-size: 12px;
  text-align: right;
 }
+
+:deep(.ant-pagination-options) {
+  margin-left: 8px;
+}
+
+:deep(.ant-pagination-options-size-changer) {
+  margin-right: 8px;
+}
 </style>
--- a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
@@ -147,9 +147,6 @@ async function getApprovalDetail() {
          processDefinition.value.formFields,
          processInstance.value.formVariables,
        );
-
-        detailForm.value.value.Fx21maervo4ratc = undefined;
-        detailForm.value.value.F3yvmaervlwuanc = undefined;
      }
      nextTick().then(() => {
        fApi.value?.btn.show(false);
@@ -171,8 +168,8 @@ async function getApprovalDetail() {

    // 获取审批节点，显示 Timeline 的数据
    activityNodes.value = data.activityNodes;
-  } catch (error) {
-    console.error('🚀 ~ getApprovalDetail ~ error:', error);
+  } catch {
+    message.error('获取审批详情失败！');
  } finally {
    processInstanceLoading.value = false;
  }