<script lang="ts" setup>
|
import type { Key } from 'ant-design-vue/es/table/interface';
|
|
import type { SystemDeptApi } from '#/api/system/dept';
|
import type { SystemUserApi } from '#/api/system/user';
|
|
import { computed, ref } from 'vue';
|
|
import { useVbenModal } from '@vben/common-ui';
|
import { handleTree } from '@vben/utils';
|
|
import {
|
Button,
|
Col,
|
Input,
|
message,
|
Pagination,
|
Row,
|
Transfer,
|
Tree,
|
} from 'ant-design-vue';
|
|
import { getSimpleDeptList } from '#/api/system/dept';
|
import { getUserPage } from '#/api/system/user';
|
|
/** 部门树节点接口 */
|
interface DeptTreeNode {
|
key: string;
|
title: string;
|
children?: DeptTreeNode[];
|
name: string;
|
}
|
|
interface Props {
|
cancelText?: string;
|
confirmText?: string;
|
multiple?: boolean;
|
title?: string;
|
value?: number[];
|
}
|
|
defineOptions({ name: 'UserSelectModal' });
|
|
withDefaults(defineProps<Props>(), {
|
title: '选择用户',
|
multiple: true,
|
value: () => [],
|
confirmText: '确定',
|
cancelText: '取消',
|
});
|
|
const emit = defineEmits<{
|
cancel: [];
|
closed: [];
|
confirm: [value: SystemUserApi.User[]];
|
'update:value': [value: number[]];
|
}>();
|
|
// 部门树数据
|
const deptTree = ref<any[]>([]);
|
const deptList = ref<SystemDeptApi.Dept[]>([]);
|
const expandedKeys = ref<Key[]>([]);
|
const selectedDeptId = ref<number>();
|
const deptSearchKeys = ref('');
|
|
// 用户数据管理
|
const userList = ref<SystemUserApi.User[]>([]); // 存储所有已知用户
|
const selectedUserIds = ref<string[]>([]);
|
|
const [Modal, modalApi] = useVbenModal({
|
onCancel: handleCancel,
|
onClosed: handleClosed,
|
async onOpenChange(isOpen: boolean) {
|
if (!isOpen) {
|
resetData();
|
return;
|
}
|
// 加载数据
|
const data = modalApi.getData();
|
if (!data) {
|
return;
|
}
|
modalApi.lock();
|
try {
|
// 加载部门数据
|
const deptData = await getSimpleDeptList();
|
deptList.value = deptData;
|
const treeData = handleTree(deptData);
|
deptTree.value = treeData.map((node) => processDeptNode(node));
|
expandedKeys.value = deptTree.value.map((node) => node.key);
|
|
// 加载初始用户数据
|
await loadUserData(1, leftListState.value.pagination.pageSize);
|
|
// 设置已选用户
|
if (data.userIds?.length) {
|
selectedUserIds.value = data.userIds.map(String);
|
// 加载已选用户的完整信息 TODO 目前接口暂不支持 多个用户ID 查询， 需要后端支持
|
const { list } = await getUserPage({
|
pageNo: 1,
|
pageSize: 100, // 临时使用固定值确保能加载所有已选用户
|
userIds: data.userIds,
|
});
|
// 使用 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();
|
}
|
|
modalApi.open();
|
} finally {
|
modalApi.unlock();
|
}
|
},
|
destroyOnClose: true,
|
});
|
|
const leftListState = ref({
|
searchValue: '',
|
dataSource: [] as SystemUserApi.User[],
|
pagination: {
|
current: 1,
|
pageSize: 10,
|
total: 0,
|
},
|
}); // 左侧列表状态
|
|
const rightListState = ref({
|
searchValue: '',
|
dataSource: [] as SystemUserApi.User[],
|
pagination: {
|
current: 1,
|
pageSize: 10,
|
total: 0,
|
},
|
}); // 右侧列表状态
|
|
const transferDataSource = computed(() => {
|
return [
|
...leftListState.value.dataSource,
|
...rightListState.value.dataSource,
|
];
|
}); // 计算属性：Transfer 数据源
|
|
const filteredDeptTree = computed(() => {
|
if (!deptSearchKeys.value) return deptTree.value;
|
|
const filterNode = (node: any, depth = 0): any => {
|
// 添加深度限制，防止过深的递归导致爆栈
|
if (depth > 100) return null;
|
|
// 按部门名称搜索
|
const name = node?.name?.toLowerCase();
|
const search = deptSearchKeys.value.toLowerCase();
|
|
// 如果当前节点匹配，直接返回节点，不处理子节点
|
if (name?.includes(search)) {
|
return {
|
...node,
|
children: node.children,
|
};
|
}
|
|
// 如果当前节点不匹配，检查子节点
|
if (node.children) {
|
const filteredChildren = node.children
|
.map((child: any) => filterNode(child, depth + 1))
|
.filter(Boolean);
|
|
if (filteredChildren.length > 0) {
|
return {
|
...node,
|
children: filteredChildren,
|
};
|
}
|
}
|
|
return null;
|
};
|
|
return deptTree.value.map((node: any) => filterNode(node)).filter(Boolean);
|
}); // 过滤部门树数据
|
|
/** 加载用户数据 */
|
async function loadUserData(pageNo: number, pageSize: number) {
|
try {
|
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 {
|
//
|
}
|
}
|
|
/** 更新右侧列表数据 */
|
function updateRightListData() {
|
// 使用 Set 来去重选中的用户 ID
|
const uniqueSelectedIds = new Set(selectedUserIds.value);
|
|
// 获取选中的用户，确保不重复
|
const selectedUsers = userList.value.filter((user) =>
|
uniqueSelectedIds.has(String(user.id)),
|
);
|
|
// 应用搜索过滤
|
const filteredUsers = rightListState.value.searchValue
|
? selectedUsers.filter((user) =>
|
user.nickname
|
.toLowerCase()
|
.includes(rightListState.value.searchValue.toLowerCase()),
|
)
|
: selectedUsers;
|
|
// 更新总数（使用 Set 确保唯一性）
|
rightListState.value.pagination.total = new Set(
|
filteredUsers.map((user) => user.id),
|
).size;
|
|
// 应用分页
|
const { current, pageSize } = rightListState.value.pagination;
|
const startIndex = (current - 1) * pageSize;
|
const endIndex = startIndex + pageSize;
|
|
rightListState.value.dataSource = filteredUsers.slice(startIndex, endIndex);
|
}
|
|
/** 处理左侧分页变化 */
|
async function handleLeftPaginationChange(page: number, pageSize: number) {
|
await loadUserData(page, pageSize);
|
}
|
|
/** 处理右侧分页变化 */
|
function handleRightPaginationChange(page: number, pageSize: number) {
|
rightListState.value.pagination.current = page;
|
rightListState.value.pagination.pageSize = pageSize;
|
updateRightListData();
|
}
|
|
/** 处理用户搜索 */
|
async function handleUserSearch(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();
|
}
|
}
|
|
/** 处理用户选择变化 */
|
function handleUserChange(targetKeys: string[]) {
|
// 使用 Set 来去重选中的用户ID
|
selectedUserIds.value = [...new Set(targetKeys)];
|
emit('update:value', selectedUserIds.value.map(Number));
|
updateRightListData();
|
}
|
|
/** 重置数据 */
|
function resetData() {
|
userList.value = [];
|
selectedUserIds.value = [];
|
|
// 取消部门选中
|
selectedDeptId.value = undefined;
|
// 取消选中的用户
|
selectedUserIds.value = [];
|
|
leftListState.value = {
|
searchValue: '',
|
dataSource: [],
|
pagination: {
|
current: 1,
|
pageSize: 10,
|
total: 0,
|
},
|
};
|
|
rightListState.value = {
|
searchValue: '',
|
dataSource: [],
|
pagination: {
|
current: 1,
|
pageSize: 10,
|
total: 0,
|
},
|
};
|
}
|
|
// TODO 后端接口目前仅支持 username 检索， 筛选条件需要跟后端请求参数保持一致。
|
function filterOption(inputValue: string, option: any) {
|
return option.username.toLowerCase().includes(inputValue.toLowerCase());
|
}
|
|
/** 处理部门树展开/折叠 */
|
function handleExpand(keys: Key[]) {
|
expandedKeys.value = keys;
|
}
|
|
/** 处理部门搜索 */
|
function handleDeptSearch(value: string) {
|
deptSearchKeys.value = value;
|
|
// 如果有搜索结果，自动展开所有节点
|
if (value) {
|
const getAllKeys = (nodes: any[]): string[] => {
|
const keys: string[] = [];
|
for (const node of nodes) {
|
keys.push(node.key);
|
if (node.children) {
|
keys.push(...getAllKeys(node.children));
|
}
|
}
|
return keys;
|
};
|
expandedKeys.value = getAllKeys(deptTree.value);
|
} else {
|
// 清空搜索时，只展开第一级节点
|
expandedKeys.value = deptTree.value.map((node) => node.key);
|
}
|
}
|
|
/** 处理部门选择 */
|
async function handleDeptSelect(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);
|
}
|
|
/** 确认选择 */
|
function handleConfirm() {
|
if (selectedUserIds.value.length === 0) {
|
message.warning('请选择用户');
|
return;
|
}
|
emit(
|
'confirm',
|
userList.value.filter((user) =>
|
selectedUserIds.value.includes(String(user.id)),
|
),
|
);
|
modalApi.close();
|
}
|
|
/** 取消选择 */
|
function handleCancel() {
|
emit('cancel');
|
modalApi.close();
|
// 确保在动画结束后再重置数据
|
setTimeout(() => {
|
resetData();
|
}, 300);
|
}
|
|
/** 关闭弹窗 */
|
function handleClosed() {
|
emit('closed');
|
resetData();
|
}
|
|
/** 递归处理部门树节点 */
|
function processDeptNode(node: any): DeptTreeNode {
|
return {
|
key: String(node.id),
|
title: `${node.name} (${node.id})`,
|
name: node.name,
|
children: node.children?.map((child: any) => processDeptNode(child)),
|
};
|
}
|
</script>
|
|
<template>
|
<Modal class="w-2/5" key="user-select-modal" :title="title">
|
<Row :gutter="[16, 16]">
|
<Col :span="6">
|
<div class="h-[500px] overflow-auto rounded border">
|
<div class="border-b p-2">
|
<Input
|
v-model:value="deptSearchKeys"
|
placeholder="搜索部门"
|
allow-clear
|
@input="(e) => handleDeptSearch(e.target?.value ?? '')"
|
/>
|
</div>
|
<Tree
|
:tree-data="filteredDeptTree"
|
:expanded-keys="expandedKeys"
|
:selected-keys="selectedDeptId ? [String(selectedDeptId)] : []"
|
@select="handleDeptSelect"
|
@expand="handleExpand"
|
/>
|
</div>
|
</Col>
|
<Col :span="18">
|
<Transfer
|
:row-key="(record) => String(record.id)"
|
:data-source="transferDataSource"
|
v-model:target-keys="selectedUserIds"
|
:titles="['未选', '已选']"
|
:show-search="true"
|
:show-select-all="true"
|
:filter-option="filterOption"
|
@change="handleUserChange"
|
@search="handleUserSearch"
|
>
|
<template #render="item">
|
<span>{{ item?.nickname }} ({{ item?.username }})</span>
|
</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>
|
</Row>
|
<template #footer>
|
<Button
|
type="primary"
|
:disabled="selectedUserIds.length === 0"
|
@click="handleConfirm"
|
>
|
{{ confirmText }}
|
</Button>
|
<Button @click="handleCancel">{{ cancelText }}</Button>
|
</template>
|
</Modal>
|
</template>
|
|
<style lang="scss" scoped>
|
:deep(.ant-transfer) {
|
display: flex;
|
align-items: center;
|
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) {
|
flex: 1;
|
overflow: auto;
|
}
|
|
: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>
|
