review:【antd】【BPM】代码迁移的 review
parent
67ed1753a7
commit
f1c7a4ebfb
|
|
@ -1 +1 @@
|
||||||
export { default as DeptSelectModal } from './dept-select-modal.vue';
|
export { default as DeptSelectModal } from './select-modal.vue';
|
||||||
|
|
|
||||||
|
|
@ -16,16 +16,11 @@ defineOptions({ name: 'DeptSelectModal' });
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
// 取消按钮文本
|
cancelText?: string; // 取消按钮文本
|
||||||
cancelText?: string;
|
checkStrictly?: boolean; // checkable 状态下节点选择完全受控
|
||||||
// checkable 状态下节点选择完全受控
|
confirmText?: string; // 确认按钮文本
|
||||||
checkStrictly?: boolean;
|
multiple?: boolean; // 是否支持多选
|
||||||
// 确认按钮文本
|
title?: string; // 标题
|
||||||
confirmText?: string;
|
|
||||||
// 是否支持多选
|
|
||||||
multiple?: boolean;
|
|
||||||
// 标题
|
|
||||||
title?: string;
|
|
||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
cancelText: '取消',
|
cancelText: '取消',
|
||||||
|
|
@ -41,17 +36,13 @@ const emit = defineEmits<{
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
type checkedKeys = number[] | { checked: number[]; halfChecked: number[] };
|
type checkedKeys = number[] | { checked: number[]; halfChecked: number[] };
|
||||||
// 部门树形结构
|
const deptTree = ref<DataNode[]>([]); // 部门树形结构
|
||||||
const deptTree = ref<DataNode[]>([]);
|
const selectedDeptIds = ref<checkedKeys>([]); // 选中的部门 ID 列表
|
||||||
// 选中的部门 ID 列表
|
const deptData = ref<SystemDeptApi.Dept[]>([]); // 部门数据
|
||||||
const selectedDeptIds = ref<checkedKeys>([]);
|
|
||||||
// 部门数据
|
|
||||||
const deptData = ref<SystemDeptApi.Dept[]>([]);
|
|
||||||
|
|
||||||
// 对话框配置
|
|
||||||
const [Modal, modalApi] = useVbenModal({
|
const [Modal, modalApi] = useVbenModal({
|
||||||
async onConfirm() {
|
async onConfirm() {
|
||||||
// 获取选中的部门ID
|
// 获取选中的部门 ID
|
||||||
const selectedIds: number[] = Array.isArray(selectedDeptIds.value)
|
const selectedIds: number[] = Array.isArray(selectedDeptIds.value)
|
||||||
? selectedDeptIds.value
|
? selectedDeptIds.value
|
||||||
: selectedDeptIds.value.checked || [];
|
: selectedDeptIds.value.checked || [];
|
||||||
|
|
@ -1 +1 @@
|
||||||
export { default as UserSelectModal } from './user-select-modal.vue';
|
export { default as UserSelectModal } from './select-modal.vue';
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ import {
|
||||||
import { getSimpleDeptList } from '#/api/system/dept';
|
import { getSimpleDeptList } from '#/api/system/dept';
|
||||||
import { getUserPage } from '#/api/system/user';
|
import { getUserPage } from '#/api/system/user';
|
||||||
|
|
||||||
// 部门树节点接口
|
/** 部门树节点接口 */
|
||||||
interface DeptTreeNode {
|
interface DeptTreeNode {
|
||||||
key: string;
|
key: string;
|
||||||
title: string;
|
title: string;
|
||||||
|
|
@ -67,7 +67,6 @@ const deptSearchKeys = ref('');
|
||||||
const userList = ref<SystemUserApi.User[]>([]); // 存储所有已知用户
|
const userList = ref<SystemUserApi.User[]>([]); // 存储所有已知用户
|
||||||
const selectedUserIds = ref<string[]>([]);
|
const selectedUserIds = ref<string[]>([]);
|
||||||
|
|
||||||
// 弹窗配置
|
|
||||||
const [Modal, modalApi] = useVbenModal({
|
const [Modal, modalApi] = useVbenModal({
|
||||||
onCancel: handleCancel,
|
onCancel: handleCancel,
|
||||||
onClosed: handleClosed,
|
onClosed: handleClosed,
|
||||||
|
|
@ -121,7 +120,6 @@ const [Modal, modalApi] = useVbenModal({
|
||||||
destroyOnClose: true,
|
destroyOnClose: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
// 左侧列表状态
|
|
||||||
const leftListState = ref({
|
const leftListState = ref({
|
||||||
searchValue: '',
|
searchValue: '',
|
||||||
dataSource: [] as SystemUserApi.User[],
|
dataSource: [] as SystemUserApi.User[],
|
||||||
|
|
@ -130,9 +128,8 @@ const leftListState = ref({
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
total: 0,
|
total: 0,
|
||||||
},
|
},
|
||||||
});
|
}); // 左侧列表状态
|
||||||
|
|
||||||
// 右侧列表状态
|
|
||||||
const rightListState = ref({
|
const rightListState = ref({
|
||||||
searchValue: '',
|
searchValue: '',
|
||||||
dataSource: [] as SystemUserApi.User[],
|
dataSource: [] as SystemUserApi.User[],
|
||||||
|
|
@ -141,17 +138,15 @@ const rightListState = ref({
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
total: 0,
|
total: 0,
|
||||||
},
|
},
|
||||||
});
|
}); // 右侧列表状态
|
||||||
|
|
||||||
// 计算属性:Transfer 数据源
|
|
||||||
const transferDataSource = computed(() => {
|
const transferDataSource = computed(() => {
|
||||||
return [
|
return [
|
||||||
...leftListState.value.dataSource,
|
...leftListState.value.dataSource,
|
||||||
...rightListState.value.dataSource,
|
...rightListState.value.dataSource,
|
||||||
];
|
];
|
||||||
});
|
}); // 计算属性:Transfer 数据源
|
||||||
|
|
||||||
// 过滤部门树数据
|
|
||||||
const filteredDeptTree = computed(() => {
|
const filteredDeptTree = computed(() => {
|
||||||
if (!deptSearchKeys.value) return deptTree.value;
|
if (!deptSearchKeys.value) return deptTree.value;
|
||||||
|
|
||||||
|
|
@ -189,9 +184,9 @@ const filteredDeptTree = computed(() => {
|
||||||
};
|
};
|
||||||
|
|
||||||
return deptTree.value.map((node: any) => filterNode(node)).filter(Boolean);
|
return deptTree.value.map((node: any) => filterNode(node)).filter(Boolean);
|
||||||
});
|
}); // 过滤部门树数据
|
||||||
|
|
||||||
// 加载用户数据
|
/** 加载用户数据 */
|
||||||
async function loadUserData(pageNo: number, pageSize: number) {
|
async function loadUserData(pageNo: number, pageSize: number) {
|
||||||
try {
|
try {
|
||||||
const { list, total } = await getUserPage({
|
const { list, total } = await getUserPage({
|
||||||
|
|
@ -218,9 +213,9 @@ async function loadUserData(pageNo: number, pageSize: number) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新右侧列表数据
|
/** 更新右侧列表数据 */
|
||||||
function updateRightListData() {
|
function updateRightListData() {
|
||||||
// 使用 Set 来去重选中的用户ID
|
// 使用 Set 来去重选中的用户 ID
|
||||||
const uniqueSelectedIds = new Set(selectedUserIds.value);
|
const uniqueSelectedIds = new Set(selectedUserIds.value);
|
||||||
|
|
||||||
// 获取选中的用户,确保不重复
|
// 获取选中的用户,确保不重复
|
||||||
|
|
@ -250,19 +245,19 @@ function updateRightListData() {
|
||||||
rightListState.value.dataSource = filteredUsers.slice(startIndex, endIndex);
|
rightListState.value.dataSource = filteredUsers.slice(startIndex, endIndex);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理左侧分页变化
|
/** 处理左侧分页变化 */
|
||||||
async function handleLeftPaginationChange(page: number, pageSize: number) {
|
async function handleLeftPaginationChange(page: number, pageSize: number) {
|
||||||
await loadUserData(page, pageSize);
|
await loadUserData(page, pageSize);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理右侧分页变化
|
/** 处理右侧分页变化 */
|
||||||
function handleRightPaginationChange(page: number, pageSize: number) {
|
function handleRightPaginationChange(page: number, pageSize: number) {
|
||||||
rightListState.value.pagination.current = page;
|
rightListState.value.pagination.current = page;
|
||||||
rightListState.value.pagination.pageSize = pageSize;
|
rightListState.value.pagination.pageSize = pageSize;
|
||||||
updateRightListData();
|
updateRightListData();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理用户搜索
|
/** 处理用户搜索 */
|
||||||
async function handleUserSearch(direction: string, value: string) {
|
async function handleUserSearch(direction: string, value: string) {
|
||||||
if (direction === 'left') {
|
if (direction === 'left') {
|
||||||
leftListState.value.searchValue = value;
|
leftListState.value.searchValue = value;
|
||||||
|
|
@ -275,7 +270,7 @@ async function handleUserSearch(direction: string, value: string) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理用户选择变化
|
/** 处理用户选择变化 */
|
||||||
function handleUserChange(targetKeys: string[]) {
|
function handleUserChange(targetKeys: string[]) {
|
||||||
// 使用 Set 来去重选中的用户ID
|
// 使用 Set 来去重选中的用户ID
|
||||||
selectedUserIds.value = [...new Set(targetKeys)];
|
selectedUserIds.value = [...new Set(targetKeys)];
|
||||||
|
|
@ -283,14 +278,13 @@ function handleUserChange(targetKeys: string[]) {
|
||||||
updateRightListData();
|
updateRightListData();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 重置数据
|
/** 重置数据 */
|
||||||
function resetData() {
|
function resetData() {
|
||||||
userList.value = [];
|
userList.value = [];
|
||||||
selectedUserIds.value = [];
|
selectedUserIds.value = [];
|
||||||
|
|
||||||
// 取消部门选中
|
// 取消部门选中
|
||||||
selectedDeptId.value = undefined;
|
selectedDeptId.value = undefined;
|
||||||
|
|
||||||
// 取消选中的用户
|
// 取消选中的用户
|
||||||
selectedUserIds.value = [];
|
selectedUserIds.value = [];
|
||||||
|
|
||||||
|
|
@ -320,12 +314,12 @@ function filterOption(inputValue: string, option: any) {
|
||||||
return option.username.toLowerCase().includes(inputValue.toLowerCase());
|
return option.username.toLowerCase().includes(inputValue.toLowerCase());
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理部门树展开/折叠
|
/** 处理部门树展开/折叠 */
|
||||||
function handleExpand(keys: Key[]) {
|
function handleExpand(keys: Key[]) {
|
||||||
expandedKeys.value = keys;
|
expandedKeys.value = keys;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理部门搜索
|
/** 处理部门搜索 */
|
||||||
function handleDeptSearch(value: string) {
|
function handleDeptSearch(value: string) {
|
||||||
deptSearchKeys.value = value;
|
deptSearchKeys.value = value;
|
||||||
|
|
||||||
|
|
@ -348,9 +342,9 @@ function handleDeptSearch(value: string) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理部门选择
|
/** 处理部门选择 */
|
||||||
async function handleDeptSelect(selectedKeys: Key[], _info: any) {
|
async function handleDeptSelect(selectedKeys: Key[], _info: any) {
|
||||||
// 更新选中的部门ID
|
// 更新选中的部门 ID
|
||||||
const newDeptId =
|
const newDeptId =
|
||||||
selectedKeys.length > 0 ? Number(selectedKeys[0]) : undefined;
|
selectedKeys.length > 0 ? Number(selectedKeys[0]) : undefined;
|
||||||
selectedDeptId.value =
|
selectedDeptId.value =
|
||||||
|
|
@ -362,7 +356,7 @@ async function handleDeptSelect(selectedKeys: Key[], _info: any) {
|
||||||
await loadUserData(1, pageSize);
|
await loadUserData(1, pageSize);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 确认选择
|
/** 确认选择 */
|
||||||
function handleConfirm() {
|
function handleConfirm() {
|
||||||
if (selectedUserIds.value.length === 0) {
|
if (selectedUserIds.value.length === 0) {
|
||||||
message.warning('请选择用户');
|
message.warning('请选择用户');
|
||||||
|
|
@ -377,7 +371,7 @@ function handleConfirm() {
|
||||||
modalApi.close();
|
modalApi.close();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 取消选择
|
/** 取消选择 */
|
||||||
function handleCancel() {
|
function handleCancel() {
|
||||||
emit('cancel');
|
emit('cancel');
|
||||||
modalApi.close();
|
modalApi.close();
|
||||||
|
|
@ -387,13 +381,13 @@ function handleCancel() {
|
||||||
}, 300);
|
}, 300);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 关闭弹窗
|
/** 关闭弹窗 */
|
||||||
function handleClosed() {
|
function handleClosed() {
|
||||||
emit('closed');
|
emit('closed');
|
||||||
resetData();
|
resetData();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 递归处理部门树节点
|
/** 递归处理部门树节点 */
|
||||||
function processDeptNode(node: any): DeptTreeNode {
|
function processDeptNode(node: any): DeptTreeNode {
|
||||||
return {
|
return {
|
||||||
key: String(node.id),
|
key: String(node.id),
|
||||||
Loading…
Reference in New Issue