refactor: 升级框架删除部分补充
This commit is contained in:
caiyuchao
@@ -1,34 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { isDocAlertEnable } from '@vben/hooks';
|
||||
import { openWindow } from '@vben/utils';
|
||||
|
||||
import { Alert, Typography } from 'ant-design-vue';
|
||||
|
||||
export interface DocAlertProps {
|
||||
/**
|
||||
* 文档标题
|
||||
*/
|
||||
title: string;
|
||||
/**
|
||||
* 文档 URL 地址
|
||||
*/
|
||||
url: string;
|
||||
}
|
||||
|
||||
const props = defineProps<DocAlertProps>();
|
||||
|
||||
/** 跳转 URL 链接 */
|
||||
const goToUrl = () => {
|
||||
openWindow(props.url);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Alert v-if="isDocAlertEnable()" type="info" show-icon class="mb-2 rounded">
|
||||
<template #message>
|
||||
<Typography.Link @click="goToUrl">
|
||||
【{{ title }}】文档地址：{{ url }}
|
||||
</Typography.Link>
|
||||
</template>
|
||||
</Alert>
|
||||
</template>
|
||||
@@ -1 +0,0 @@
|
||||
export { default as DocAlert } from './doc-alert.vue';
|
||||
@@ -1 +0,0 @@
|
||||
export { default as UserSelectModal } from './user-select-modal.vue';
|
||||
@@ -1,549 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
// TODO @芋艿：是否有更好的组织形式？！
|
||||
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,
|
||||
Spin,
|
||||
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[];
|
||||
}
|
||||
|
||||
defineOptions({ name: 'UserSelectModal' });
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
cancelText?: string;
|
||||
confirmText?: string;
|
||||
multiple?: boolean;
|
||||
title?: string;
|
||||
value?: number[];
|
||||
}>(),
|
||||
{
|
||||
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 loading = ref(false);
|
||||
|
||||
// 用户数据管理
|
||||
const userList = ref<SystemUserApi.User[]>([]); // 存储所有已知用户
|
||||
const selectedUserIds = ref<string[]>([]);
|
||||
|
||||
// 左侧列表状态
|
||||
const leftListState = ref({
|
||||
loading: false,
|
||||
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,
|
||||
},
|
||||
});
|
||||
|
||||
// 计算属性：Transfer 数据源
|
||||
const transferDataSource = computed(() => {
|
||||
return [
|
||||
...leftListState.value.dataSource,
|
||||
...rightListState.value.dataSource,
|
||||
];
|
||||
});
|
||||
|
||||
// 过滤部门树数据
|
||||
const filteredDeptTree = computed(() => {
|
||||
if (!deptSearchKeys.value) return deptTree.value;
|
||||
|
||||
const filterNode = (node: any): any => {
|
||||
const title = node?.title?.toLowerCase();
|
||||
const search = deptSearchKeys.value.toLowerCase();
|
||||
|
||||
// 如果当前节点匹配
|
||||
if (title.includes(search)) {
|
||||
return {
|
||||
...node,
|
||||
children: node.children?.map((child: any) => filterNode(child)),
|
||||
};
|
||||
}
|
||||
|
||||
// 如果当前节点不匹配，检查子节点
|
||||
if (node.children) {
|
||||
const filteredChildren = node.children
|
||||
.map((child: any) => filterNode(child))
|
||||
.filter(Boolean);
|
||||
|
||||
if (filteredChildren.length > 0) {
|
||||
return {
|
||||
...node,
|
||||
children: filteredChildren,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
return deptTree.value.map((node: any) => filterNode(node)).filter(Boolean);
|
||||
});
|
||||
|
||||
// 加载用户数据
|
||||
const loadUserData = async (pageNo: number, pageSize: number) => {
|
||||
leftListState.value.loading = true;
|
||||
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 {
|
||||
leftListState.value.loading = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 更新右侧列表数据
|
||||
const 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);
|
||||
};
|
||||
|
||||
// 处理左侧分页变化
|
||||
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[]) => {
|
||||
// 使用 Set 来去重选中的用户ID
|
||||
selectedUserIds.value = [...new Set(targetKeys)];
|
||||
emit('update:value', selectedUserIds.value.map(Number));
|
||||
updateRightListData();
|
||||
};
|
||||
|
||||
// 重置数据
|
||||
const resetData = () => {
|
||||
userList.value = [];
|
||||
selectedUserIds.value = [];
|
||||
|
||||
// 取消部门选中
|
||||
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,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// 打开弹窗
|
||||
const open = async (userIds: string[]) => {
|
||||
resetData();
|
||||
loading.value = true;
|
||||
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 (userIds?.length) {
|
||||
selectedUserIds.value = userIds.map(String);
|
||||
// 加载已选用户的完整信息 TODO 目前接口暂不支持 多个用户ID 查询， 需要后端支持
|
||||
const { list } = await getUserPage({
|
||||
pageNo: 1,
|
||||
pageSize: 100, // 临时使用固定值确保能加载所有已选用户
|
||||
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 {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// TODO 后端接口目前仅支持 username 检索， 筛选条件需要跟后端请求参数保持一致。
|
||||
const filterOption = (inputValue: string, option: any) => {
|
||||
return option.username.toLowerCase().includes(inputValue.toLowerCase());
|
||||
};
|
||||
|
||||
// 处理部门树展开/折叠
|
||||
const handleExpand = (keys: Key[]) => {
|
||||
expandedKeys.value = keys;
|
||||
};
|
||||
|
||||
// 处理部门搜索
|
||||
const 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);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理部门选择
|
||||
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',
|
||||
userList.value.filter((user) =>
|
||||
selectedUserIds.value.includes(String(user.id)),
|
||||
),
|
||||
);
|
||||
modalApi.close();
|
||||
};
|
||||
|
||||
// 取消选择
|
||||
const handleCancel = () => {
|
||||
emit('cancel');
|
||||
modalApi.close();
|
||||
// 确保在动画结束后再重置数据
|
||||
setTimeout(() => {
|
||||
resetData();
|
||||
}, 300);
|
||||
};
|
||||
|
||||
// 关闭弹窗
|
||||
const handleClosed = () => {
|
||||
emit('closed');
|
||||
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-[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="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>
|
||||
</Spin>
|
||||
<template #footer>
|
||||
<Button
|
||||
type="primary"
|
||||
:disabled="selectedUserIds.length === 0"
|
||||
@click="handleConfirm"
|
||||
>
|
||||
{{ confirmText }}
|
||||
</Button>
|
||||
<Button @click="handleCancel">{{ cancelText }}</Button>
|
||||
</template>
|
||||
</ModalComponent>
|
||||
</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>
|
||||
@@ -1,91 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
// TODO @xingyu：这个有可能 3 端复用么？想着是把 layouts 下的 components 没有这个目录哈；
|
||||
import { useVbenModal, VbenButton, VbenButtonGroup } from '@vben/common-ui';
|
||||
import { openWindow } from '@vben/utils';
|
||||
|
||||
import { Image, Tag } from 'ant-design-vue';
|
||||
|
||||
import { $t } from '#/locales';
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
draggable: true,
|
||||
overlayBlur: 5,
|
||||
footer: false,
|
||||
onCancel() {
|
||||
modalApi.close();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Modal class="w-[40%]" :title="$t('ui.widgets.qa')">
|
||||
<div class="mt-2 flex flex-col">
|
||||
<div class="mt-2 flex flex-row">
|
||||
<VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
|
||||
<p class="p-2">项目地址:</p>
|
||||
<VbenButton
|
||||
variant="link"
|
||||
@click="
|
||||
openWindow('https://gitee.com/yudaocode/yudao-ui-admin-vben')
|
||||
"
|
||||
>
|
||||
Gitee
|
||||
</VbenButton>
|
||||
<VbenButton
|
||||
variant="link"
|
||||
@click="
|
||||
openWindow('https://github.com/yudaocode/yudao-ui-admin-vben')
|
||||
"
|
||||
>
|
||||
Github
|
||||
</VbenButton>
|
||||
</VbenButtonGroup>
|
||||
|
||||
<VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
|
||||
<p class="p-2">issues:</p>
|
||||
<VbenButton
|
||||
variant="link"
|
||||
@click="
|
||||
openWindow(
|
||||
'https://gitee.com/yudaocode/yudao-ui-admin-vben/issues',
|
||||
)
|
||||
"
|
||||
>
|
||||
Gitee
|
||||
</VbenButton>
|
||||
<VbenButton
|
||||
variant="link"
|
||||
@click="
|
||||
openWindow(
|
||||
'https://github.com/yudaocode/yudao-ui-admin-vben/issues',
|
||||
)
|
||||
"
|
||||
>
|
||||
Github
|
||||
</VbenButton>
|
||||
</VbenButtonGroup>
|
||||
|
||||
<VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
|
||||
<p class="p-2">开发文档:</p>
|
||||
<VbenButton
|
||||
variant="link"
|
||||
@click="openWindow('https://doc.iocoder.cn/quick-start/')"
|
||||
>
|
||||
项目文档
|
||||
</VbenButton>
|
||||
<VbenButton variant="link" @click="openWindow('https://antdv.com/')">
|
||||
antdv 文档
|
||||
</VbenButton>
|
||||
</VbenButtonGroup>
|
||||
</div>
|
||||
<p class="mt-2 flex justify-center">
|
||||
<span>
|
||||
<Image src="/wx-xingyu.png" alt="数舵科技" />
|
||||
</span>
|
||||
</p>
|
||||
<p class="mt-2 flex justify-center pt-4 text-sm italic">
|
||||
本项目采用<Tag color="blue">MIT</Tag>开源协议，个人与企业可100%
|
||||
免费使用。
|
||||
</p>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
Reference in New Issue
Block a user