feat: 完善用户选择弹窗功能，添加分页和搜索功能，优化部门选择逻辑 进度 30%
ziye
parent
c201766bdb
commit
bc50357548
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue