yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

reactor：【system 系统管理】dept 部门管理的实现，对齐 ele 和 antd

pull/210/head
YunaiV 2025-09-05 20:28:47 +08:00
parent 817a157645
commit 5776bf99f8
8 changed files with 195 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/web-antd/src/views/system/dept/data.ts
View File

@ -93,7 +93,7 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: { componentProps: {
placeholder: '请输入邮箱', placeholder: '请输入邮箱',
}, },
rules: z.string().email('请输入正确的邮箱地址').optional(), rules: z.string().email('邮箱格式不正确').or(z.literal('')).optional(),
}, },
{ {
fieldName: 'status', fieldName: 'status',
@ -118,6 +118,7 @@ export function useGridColumns(
{ {
field: 'name', field: 'name',
title: '部门名称', title: '部门名称',
minWidth: 150,
align: 'left', align: 'left',
fixed: 'left', fixed: 'left',
treeNode: true, treeNode: true,
@ -125,15 +126,18 @@ export function useGridColumns(
{ {
field: 'leaderUserId', field: 'leaderUserId',
title: '负责人', title: '负责人',
minWidth: 150,
formatter: ({ cellValue }) => getLeaderName?.(cellValue) || '-', formatter: ({ cellValue }) => getLeaderName?.(cellValue) || '-',
}, },
{ {
field: 'sort', field: 'sort',
title: '显示顺序', title: '显示顺序',
minWidth: 100,
}, },
{ {
field: 'status', field: 'status',
title: '部门状态', title: '部门状态',
minWidth: 100,
cellRender: { cellRender: {
name: 'CellDict', name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS }, props: { type: DICT_TYPE.COMMON_STATUS },
@ -142,6 +146,7 @@ export function useGridColumns(
{ {
field: 'createTime', field: 'createTime',
title: '创建时间', title: '创建时间',
minWidth: 180,
formatter: 'formatDateTime', formatter: 'formatDateTime',
}, },
{ {

45
apps/web-antd/src/views/system/dept/index.vue
View File

@ -5,7 +5,7 @@ import type { SystemUserApi } from '#/api/system/user';
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui'; import { confirm, Page, useVbenModal } from '@vben/common-ui';
import { isEmpty } from '@vben/utils'; import { isEmpty } from '@vben/utils';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
@ -61,14 +61,28 @@ function handleEdit(row: SystemDeptApi.Dept) {
async function handleDelete(row: SystemDeptApi.Dept) { async function handleDelete(row: SystemDeptApi.Dept) {
const hideLoading = message.loading({ const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]), content: $t('ui.actionMessage.deleting', [row.name]),
key: 'action_key_msg', duration: 0,
}); });
try { try {
await deleteDept(row.id as number); await deleteDept(row.id as number);
message.success({ message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
content: $t('ui.actionMessage.deleteSuccess', [row.name]), onRefresh();
key: 'action_key_msg', } finally {
hideLoading();
}
}
/** 批量删除部门 */
async function handleDeleteBatch() {
await confirm($t('ui.actionMessage.deleteBatchConfirm'));
const hideLoading = message.loading({
content: $t('ui.actionMessage.deletingBatch'),
duration: 0,
}); });
try {
await deleteDeptList(checkedIds.value);
checkedIds.value = [];
message.success($t('ui.actionMessage.deleteSuccess'));
onRefresh(); onRefresh();
} finally { } finally {
hideLoading(); hideLoading();
@ -84,23 +98,6 @@ function handleRowCheckboxChange({
checkedIds.value = records.map((item) => item.id!); checkedIds.value = records.map((item) => item.id!);
} }
/** 批量删除部门 */
async function handleDeleteBatch() {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting'),
duration: 0,
key: 'action_process_msg',
});
try {
await deleteDeptList(checkedIds.value);
checkedIds.value = [];
message.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
hideLoading();
}
}
const [Grid, gridApi] = useVbenVxeGrid({ const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: { gridOptions: {
columns: useGridColumns(getLeaderName), columns: useGridColumns(getLeaderName),
@ -166,9 +163,9 @@ onMounted(async () => {
label: '批量删除', label: '批量删除',
type: 'primary', type: 'primary',
danger: true, danger: true,
disabled: isEmpty(checkedIds),
icon: ACTION_ICON.DELETE, icon: ACTION_ICON.DELETE,
auth: ['system:dept:delete'], auth: ['system:dept:delete'],
disabled: isEmpty(checkedIds),
onClick: handleDeleteBatch, onClick: handleDeleteBatch,
}, },
]" ]"
@ -197,7 +194,7 @@ onMounted(async () => {
danger: true, danger: true,
icon: ACTION_ICON.DELETE, icon: ACTION_ICON.DELETE,
auth: ['system:dept:delete'], auth: ['system:dept:delete'],
disabled: !!(row.children && row.children.length > 0), disabled: row.children && row.children.length > 0,
popConfirm: { popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]), title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: handleDelete.bind(null, row), confirm: handleDelete.bind(null, row),

15
apps/web-antd/src/views/system/dept/modules/form.vue
View File

@ -59,21 +59,20 @@ const [Modal, modalApi] = useVbenModal({
return; return;
} }
// 加载数据 // 加载数据
let data = modalApi.getData<SystemDeptApi.Dept>(); const data = modalApi.getData<SystemDeptApi.Dept>();
if (!data) { if (!data || !data.id) {
return; return;
} }
if (data.id) {
modalApi.lock(); modalApi.lock();
try { try {
data = await getDept(data.id); formData.value = await getDept(data.id);
// 设置到 values
if (formData.value) {
await formApi.setValues(formData.value);
}
} finally { } finally {
modalApi.unlock(); modalApi.unlock();
} }
}
// 设置到 values
formData.value = data;
await formApi.setValues(formData.value);
}, },
}); });
</script> </script>

5
apps/web-ele/src/api/system/dept/index.ts
View File

@ -45,3 +45,8 @@ export async function updateDept(data: SystemDeptApi.Dept) {
export async function deleteDept(id: number) { export async function deleteDept(id: number) {
return requestClient.delete(`/system/dept/delete?id=${id}`); return requestClient.delete(`/system/dept/delete?id=${id}`);
} }
/** 批量删除部门 */
export async function deleteDeptList(ids: number[]) {
return requestClient.delete(`/system/dept/delete-list?ids=${ids.join(',')}`);
}

44
apps/web-ele/src/views/system/dept/data.ts
View File

@ -1,8 +1,7 @@
import type { VbenFormSchema } from '#/adapter/form'; import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table'; import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemDeptApi } from '#/api/system/dept'; import type { SystemDeptApi } from '#/api/system/dept';
import { useAccess } from '@vben/access';
import { CommonStatusEnum, DICT_TYPE } from '@vben/constants'; import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks'; import { getDictOptions } from '@vben/hooks';
import { handleTree } from '@vben/utils'; import { handleTree } from '@vben/utils';
@ -11,8 +10,6 @@ import { z } from '#/adapter/form';
import { getDeptList } from '#/api/system/dept'; import { getDeptList } from '#/api/system/dept';
import { getSimpleUserList } from '#/api/system/user'; import { getSimpleUserList } from '#/api/system/user';
const { hasAccessByCodes } = useAccess();
/** 新增/修改的表单 */ /** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] { export function useFormSchema(): VbenFormSchema[] {
return [ return [
@ -114,10 +111,10 @@ export function useFormSchema(): VbenFormSchema[] {
/** 列表的字段 */ /** 列表的字段 */
export function useGridColumns( export function useGridColumns(
onActionClick?: OnActionClickFn<SystemDeptApi.Dept>,
getLeaderName?: (userId: number) => string | undefined, getLeaderName?: (userId: number) => string | undefined,
): VxeTableGridOptions<SystemDeptApi.Dept>['columns'] { ): VxeTableGridOptions<SystemDeptApi.Dept>['columns'] {
return [ return [
{ type: 'checkbox', width: 40 },
{ {
field: 'name', field: 'name',
title: '部门名称', title: '部门名称',
@ -130,9 +127,7 @@ export function useGridColumns(
field: 'leaderUserId', field: 'leaderUserId',
title: '负责人', title: '负责人',
minWidth: 150, minWidth: 150,
formatter: (row) => { formatter: ({ cellValue }) => getLeaderName?.(cellValue) || '-',
return getLeaderName?.(row.cellValue) || '-';
},
}, },
{ {
field: 'sort', field: 'sort',
@ -155,39 +150,10 @@ export function useGridColumns(
formatter: 'formatDateTime', formatter: 'formatDateTime',
}, },
{ {
field: 'operation',
title: '操作', title: '操作',
minWidth: 200, width: 220,
align: 'right',
fixed: 'right', fixed: 'right',
headerAlign: 'center', slots: { default: 'actions' },
showOverflow: false,
cellRender: {
attrs: {
nameField: 'name',
nameTitle: '部门',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'append',
text: '新增下级',
show: hasAccessByCodes(['system:dept:create']),
},
{
code: 'edit',
show: hasAccessByCodes(['system:dept:update']),
},
{
code: 'delete',
show: hasAccessByCodes(['system:dept:delete']),
disabled: (row: SystemDeptApi.Dept) => {
return !!(row.children && row.children.length > 0);
},
},
],
},
}, },
]; ];
} }

157
apps/web-ele/src/views/system/dept/index.vue
View File

@ -1,20 +1,17 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { import type { VxeTableGridOptions } from '#/adapter/vxe-table';
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { SystemDeptApi } from '#/api/system/dept'; import type { SystemDeptApi } from '#/api/system/dept';
import type { SystemUserApi } from '#/api/system/user'; import type { SystemUserApi } from '#/api/system/user';
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui'; import { confirm, Page, useVbenModal } from '@vben/common-ui';
import { Plus } from '@vben/icons'; import { isEmpty } from '@vben/utils';
import { ElButton, ElLoading, ElMessage } from 'element-plus'; import { ElLoading, ElMessage } from 'element-plus';
import { useVbenVxeGrid } from '#/adapter/vxe-table'; import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteDept, getDeptList } from '#/api/system/dept'; import { deleteDept, deleteDeptList, getDeptList } from '#/api/system/dept';
import { getSimpleUserList } from '#/api/system/user'; import { getSimpleUserList } from '#/api/system/user';
import { $t } from '#/locales'; import { $t } from '#/locales';
@ -29,9 +26,9 @@ const [FormModal, formModalApi] = useVbenModal({
const userList = ref<SystemUserApi.User[]>([]); const userList = ref<SystemUserApi.User[]>([]);
/** 获取负责人名称 */ /** 获取负责人名称 */
const getLeaderName = (userId: number) => { function getLeaderName(userId: number) {
return userList.value.find((user) => user.id === userId)?.nickname; return userList.value.find((user) => user.id === userId)?.nickname;
}; }
/** 刷新表格 */ /** 刷新表格 */
function onRefresh() { function onRefresh() {
@ -46,25 +43,24 @@ function toggleExpand() {
} }
/** 创建部门 */ /** 创建部门 */
function onCreate() { function handleCreate() {
formModalApi.setData(null).open(); formModalApi.setData(null).open();
} }
/** 添加下级部门 */ /** 添加下级部门 */
function onAppend(row: SystemDeptApi.Dept) { function handleAppend(row: SystemDeptApi.Dept) {
formModalApi.setData({ parentId: row.id }).open(); formModalApi.setData({ parentId: row.id }).open();
} }
/** 编辑部门 */ /** 编辑部门 */
function onEdit(row: SystemDeptApi.Dept) { function handleEdit(row: SystemDeptApi.Dept) {
formModalApi.setData(row).open(); formModalApi.setData(row).open();
} }
/** 删除部门 */ /** 删除部门 */
async function onDelete(row: SystemDeptApi.Dept) { async function handleDelete(row: SystemDeptApi.Dept) {
const loadingInstance = ElLoading.service({ const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]), text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
}); });
try { try {
await deleteDept(row.id as number); await deleteDept(row.id as number);
@ -75,53 +71,65 @@ async function onDelete(row: SystemDeptApi.Dept) {
} }
} }
/** 表格操作按钮的回调函数 */ /** 批量删除部门 */
function onActionClick({ code, row }: OnActionClickParams<SystemDeptApi.Dept>) { async function handleDeleteBatch() {
switch (code) { await confirm($t('ui.actionMessage.deleteBatchConfirm'));
case 'append': { const loadingInstance = ElLoading.service({
onAppend(row); text: $t('ui.actionMessage.deletingBatch'),
break; });
} try {
case 'delete': { await deleteDeptList(checkedIds.value);
onDelete(row); checkedIds.value = [];
break; ElMessage.success($t('ui.actionMessage.deleteSuccess'));
} onRefresh();
case 'edit': { } finally {
onEdit(row); loadingInstance.close();
break;
} }
} }
const checkedIds = ref<number[]>([]);
function handleRowCheckboxChange({
records,
}: {
records: SystemDeptApi.Dept[];
}) {
checkedIds.value = records.map((item) => item.id!);
} }
const [Grid, gridApi] = useVbenVxeGrid({ const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: { gridOptions: {
columns: useGridColumns(onActionClick, getLeaderName), columns: useGridColumns(getLeaderName),
height: 'auto', height: 'auto',
keepSource: true,
pagerConfig: {
enabled: false,
},
proxyConfig: { proxyConfig: {
ajax: { ajax: {
query: async (_params) => { query: async () => {
return await getDeptList(); return await getDeptList();
}, },
}, },
}, },
pagerConfig: {
enabled: false,
},
rowConfig: { rowConfig: {
keyField: 'id', keyField: 'id',
isHover: true,
}, },
toolbarConfig: { toolbarConfig: {
refresh: true, refresh: true,
search: true,
}, },
treeConfig: { treeConfig: {
parentField: 'parentId',
rowField: 'id',
transform: true, transform: true,
rowField: 'id',
parentField: 'parentId',
expandAll: true, expandAll: true,
reserve: true, accordion: false,
},
} as VxeTableGridOptions<SystemDeptApi.Dept>,
gridEvents: {
checkboxAll: handleRowCheckboxChange,
checkboxChange: handleRowCheckboxChange,
}, },
} as VxeTableGridOptions,
}); });
/** 初始化 */ /** 初始化 */
@ -135,17 +143,64 @@ onMounted(async () => {
<FormModal @success="onRefresh" /> <FormModal @success="onRefresh" />
<Grid table-title="部门列表"> <Grid table-title="部门列表">
<template #toolbar-tools> <template #toolbar-tools>
<ElButton <TableAction
type="primary" :actions="[
@click="onCreate" {
v-access:code="['system:dept:create']" label: $t('ui.actionTitle.create', ['部门']),
> type: 'primary',
<Plus class="mr-2 size-5" /> icon: ACTION_ICON.ADD,
{{ $t('ui.actionTitle.create', ['部门']) }} auth: ['system:dept:create'],
</ElButton> onClick: handleCreate,
<ElButton class="ml-2" @click="toggleExpand"> },
{{ isExpanded ? '收缩' : '展开' }} {
</ElButton> label: isExpanded ? '收缩' : '展开',
type: 'primary',
onClick: toggleExpand,
},
{
label: '批量删除',
type: 'danger',
icon: ACTION_ICON.DELETE,
auth: ['system:dept:delete'],
disabled: isEmpty(checkedIds),
onClick: handleDeleteBatch,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: '新增下级',
type: 'primary',
link: true,
icon: ACTION_ICON.ADD,
auth: ['system:dept:create'],
onClick: handleAppend.bind(null, row),
},
{
label: $t('common.edit'),
type: 'primary',
link: true,
icon: ACTION_ICON.EDIT,
auth: ['system:dept:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'danger',
link: true,
icon: ACTION_ICON.DELETE,
auth: ['system:dept:delete'],
disabled: row.children && row.children.length > 0,
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: handleDelete.bind(null, row),
},
},
]"
/>
</template> </template>
</Grid> </Grid>
</Page> </Page>

15
apps/web-ele/src/views/system/dept/modules/form.vue
View File

@ -59,21 +59,20 @@ const [Modal, modalApi] = useVbenModal({
return; return;
} }
// 加载数据 // 加载数据
let data = modalApi.getData<SystemDeptApi.Dept>(); const data = modalApi.getData<SystemDeptApi.Dept>();
if (!data) { if (!data || !data.id) {
return; return;
} }
if (data.id) {
modalApi.lock(); modalApi.lock();
try { try {
data = await getDept(data.id); formData.value = await getDept(data.id);
// 设置到 values
if (formData.value) {
await formApi.setValues(formData.value);
}
} finally { } finally {
modalApi.unlock(); modalApi.unlock();
} }
}
// 设置到 values
formData.value = data;
await formApi.setValues(formData.value);
}, },
}); });
</script> </script>

51
apps/web-ele/src/views/system/notice/index.vue
View File

@ -5,7 +5,7 @@ import type { SystemNoticeApi } from '#/api/system/notice';
import { ref } from 'vue'; import { ref } from 'vue';
import { confirm, Page, useVbenModal } from '@vben/common-ui'; import { confirm, Page, useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils'; import { isEmpty } from '@vben/utils';
import { ElLoading, ElMessage } from 'element-plus'; import { ElLoading, ElMessage } from 'element-plus';
@ -14,6 +14,7 @@ import {
deleteNotice, deleteNotice,
deleteNoticeList, deleteNoticeList,
getNoticePage, getNoticePage,
pushNotice,
} from '#/api/system/notice'; } from '#/api/system/notice';
import { $t } from '#/locales'; import { $t } from '#/locales';
@ -30,31 +31,31 @@ function onRefresh() {
gridApi.query(); gridApi.query();
} }
/** 创建通知公告 */ /** 创建公告 */
function handleCreate() { function handleCreate() {
formModalApi.setData(null).open(); formModalApi.setData(null).open();
} }
/** 编辑通知公告 */ /** 编辑公告 */
function handleEdit(row: SystemNoticeApi.Notice) { function handleEdit(row: SystemNoticeApi.Notice) {
formModalApi.setData(row).open(); formModalApi.setData(row).open();
} }
/** 删除通知公告 */ /** 删除公告 */
async function handleDelete(row: SystemNoticeApi.Notice) { async function handleDelete(row: SystemNoticeApi.Notice) {
const loadingInstance = ElLoading.service({ const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.id]), text: $t('ui.actionMessage.deleting', [row.title]),
}); });
try { try {
await deleteNotice(row.id as number); await deleteNotice(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id])); ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.title]));
onRefresh(); onRefresh();
} finally { } finally {
loadingInstance.close(); loadingInstance.close();
} }
} }
/** 批量删除通知公告 */ /** 批量删除公告 */
async function handleDeleteBatch() { async function handleDeleteBatch() {
await confirm($t('ui.actionMessage.deleteBatchConfirm')); await confirm($t('ui.actionMessage.deleteBatchConfirm'));
const loadingInstance = ElLoading.service({ const loadingInstance = ElLoading.service({
@ -79,10 +80,17 @@ function handleRowCheckboxChange({
checkedIds.value = records.map((item) => item.id!); checkedIds.value = records.map((item) => item.id!);
} }
/** 导出表格 */ /** 推送公告 */
async function handleExport() { async function handlePush(row: SystemNoticeApi.Notice) {
const data = await exportNotice(await gridApi.formApi.getValues()); const loadingInstance = ElLoading.service({
downloadFileFromBlobPart({ fileName: '通知公告.xls', source: data }); text: '正在推送中...',
});
try {
await pushNotice(row.id as number);
ElMessage.success($t('ui.actionMessage.operationSuccess'));
} finally {
loadingInstance.close();
}
} }
const [Grid, gridApi] = useVbenVxeGrid({ const [Grid, gridApi] = useVbenVxeGrid({
@ -123,24 +131,17 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template> <template>
<Page auto-content-height> <Page auto-content-height>
<FormModal @success="onRefresh" /> <FormModal @success="onRefresh" />
<Grid table-title="通知公告列表"> <Grid table-title="公告列表">
<template #toolbar-tools> <template #toolbar-tools>
<TableAction <TableAction
:actions="[ :actions="[
{ {
label: $t('ui.actionTitle.create', ['通知公告']), label: $t('ui.actionTitle.create', ['公告']),
type: 'primary', type: 'primary',
icon: ACTION_ICON.ADD, icon: ACTION_ICON.ADD,
auth: ['system:notice:create'], auth: ['system:notice:create'],
onClick: handleCreate, onClick: handleCreate,
}, },
{
label: $t('ui.actionTitle.export'),
type: 'primary',
icon: ACTION_ICON.DOWNLOAD,
auth: ['system:notice:export'],
onClick: handleExport,
},
{ {
label: $t('ui.actionTitle.deleteBatch'), label: $t('ui.actionTitle.deleteBatch'),
type: 'danger', type: 'danger',
@ -163,6 +164,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
auth: ['system:notice:update'], auth: ['system:notice:update'],
onClick: handleEdit.bind(null, row), onClick: handleEdit.bind(null, row),
}, },
{
label: '推送',
type: 'primary',
link: true,
icon: ACTION_ICON.ADD,
auth: ['system:notice:update'],
onClick: handlePush.bind(null, row),
},
{ {
label: $t('common.delete'), label: $t('common.delete'),
type: 'danger', type: 'danger',
@ -170,7 +179,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
icon: ACTION_ICON.DELETE, icon: ACTION_ICON.DELETE,
auth: ['system:notice:delete'], auth: ['system:notice:delete'],
popConfirm: { popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.id]), title: $t('ui.actionMessage.deleteConfirm', [row.title]),
confirm: handleDelete.bind(null, row), confirm: handleDelete.bind(null, row),
}, },
}, },