GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:对接部门管理，优化菜单管理，共用handleTree方法

Browse Source
This commit is contained in:
AN 2025-04-13 13:22:12 +08:00
parent 73cfa34796
commit 375ffa1578
19 changed files with 667 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/advanced/table-header-operation.vue
View File

@ -19,7 +19,7 @@ withDefaults(defineProps<Props>(), {
itemAlign: undefined,
showAdd: true,
showDelete: true,
showExport: true
showExport: false
});
interface Emits {

67
src/hooks/common/tree-table.ts
View File

@ -4,21 +4,33 @@ import { jsonClone } from '@sa/utils';
import { useBoolean, useHookTable } from '@sa/hooks';
import { useAppStore } from '@/store/modules/app';
import { $t } from '@/locales';
import { handleTree } from '@/utils/common';
type TableData = NaiveUI.TableData;
type GetTableData<A extends NaiveUI.TreeTableApiFn> = NaiveUI.GetTreeTableData<A>;
type TableColumn<T> = NaiveUI.TableColumn<T>;
export function useTreeTable<A extends NaiveUI.TreeTableApiFn>(config: NaiveUI.NaiveTreeTableConfig<A>) {
export function useTreeTable<A extends NaiveUI.TreeTableApiFn>(
config: NaiveUI.NaiveTreeTableConfig<A> & CommonType.TreeConfig & { defaultExpandAll?: boolean }
) {
const scope = effectScope();
const appStore = useAppStore();
const { apiFn, apiParams, immediate } = config;
const {
apiFn,
apiParams,
immediate,
idField,
parentIdField = 'parentId',
childrenField = 'children',
defaultExpandAll = true
} = config;
const SELECTION_KEY = '__selection__';
const EXPAND_KEY = '__expand__';
const expandedRowKeys = ref<CommonType.IdType[]>([]);
const {
loading,
empty,
@ -36,9 +48,20 @@ export function useTreeTable<A extends NaiveUI.TreeTableApiFn>(config: NaiveUI.N
columns: config.columns,
transformer: res => {
const records = res.data || [];
return {
data: records
};
if (!records.length) return { data: [] };
const treeData = handleTree(records, {
idField,
parentIdField,
childrenField
});
// 如果设置了默认展开所有，则收集所有节点的key
if (defaultExpandAll) {
expandedRowKeys.value = records.map(item => item[idField]);
}
return { data: treeData };
},
getColumnChecks: cols => {
const checks: NaiveUI.TableColumnCheck[] = [];
@ -89,6 +112,33 @@ export function useTreeTable<A extends NaiveUI.TreeTableApiFn>(config: NaiveUI.N
immediate
});
/** 收集所有节点的key */
function collectAllNodeKeys(treeNodes: any[]): CommonType.IdType[] {
const keys: CommonType.IdType[] = [];
const collect = (nodes: any[]) => {
nodes.forEach(node => {
keys.push(node[idField]);
if (node[childrenField]?.length) {
collect(node[childrenField]);
}
});
};
collect(treeNodes);
return keys;
}
/** 展开所有节点 */
function expandAll() {
expandedRowKeys.value = collectAllNodeKeys(data.value);
}
/** 收起所有节点 */
function collapseAll() {
expandedRowKeys.value = [];
}
scope.run(() => {
watch(
() => appStore.locale,
@ -112,7 +162,10 @@ export function useTreeTable<A extends NaiveUI.TreeTableApiFn>(config: NaiveUI.N
getData,
searchParams,
updateSearchParams,
resetSearchParams
resetSearchParams,
expandedRowKeys,
expandAll,
collapseAll
};
}

1
src/router/elegant/imports.ts
View File

@ -22,6 +22,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
login: () => import("@/views/_builtin/login/index.vue"),
home: () => import("@/views/home/index.vue"),
system_config: () => import("@/views/system/config/index.vue"),
system_dept: () => import("@/views/system/dept/index.vue"),
system_dict_data: () => import("@/views/system/dict/data/index.vue"),
system_dict: () => import("@/views/system/dict/index.vue"),
system_dict_type: () => import("@/views/system/dict/type/index.vue"),

9
src/router/elegant/routes.ts
View File

@ -95,6 +95,15 @@ export const generatedRoutes: GeneratedRoute[] = [
i18nKey: 'route.system_config'
}
},
{
name: 'system_dept',
path: '/system/dept',
component: 'view.system_dept',
meta: {
title: 'system_dept',
i18nKey: 'route.system_dept'
}
},
{
name: 'system_dict',
path: '/system/dict',

1
src/router/elegant/transform.ts
View File

@ -171,6 +171,7 @@ const routeMap: RouteMap = {
"login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?",
"system": "/system",
"system_config": "/system/config",
"system_dept": "/system/dept",
"system_dict": "/system/dict",
"system_dict_data": "/system/dict/data",
"system_dict_type": "/system/dict/type",

4
src/service/api/system/dept.ts
View File

@ -2,7 +2,7 @@ import { request } from '@/service/request';
/** 获取部门列表 */
export function fetchGetDeptList(params?: Api.System.DeptSearchParams) {
return request<Api.System.DeptList>({
return request<Api.System.Dept[]>({
url: '/system/dept/list',
method: 'get',
params
@ -28,7 +28,7 @@ export function fetchUpdateDept(data: Api.System.DeptOperateParams) {
}
/** 批量删除部门 */
export function fetchDeleteDept(deptIds: CommonType.IdType[]) {
export function fetchBatchDeleteDept(deptIds: CommonType.IdType[]) {
return request<boolean>({
url: `/system/dept/${deptIds.join(',')}`,
method: 'delete'

13
src/typings/api/system.api.d.ts vendored
View File

@ -316,11 +316,13 @@ declare namespace Api {
email: string;
/** 部门状态（0正常 1停用） */
status: string;
/** 子部门 */
children: Dept[];
}>;
/** dept search params */
type DeptSearchParams = CommonType.RecordNullable<
Pick<Api.System.Dept, 'parentId' | 'deptName' | 'deptCategory' | 'status'> & Api.Common.CommonSearchParams
Pick<Api.System.Dept, 'deptName' | 'status'> & Api.Common.CommonSearchParams
>;
/** dept operate params */
@ -358,8 +360,9 @@ declare namespace Api {
/** post search params */
type PostSearchParams = CommonType.RecordNullable<
Pick<Api.System.Post, 'deptId' | 'postCode' | 'postName' | 'status'>
& { belongDeptId: CommonType.IdType } & Api.Common.CommonSearchParams
Pick<Api.System.Post, 'deptId' | 'postCode' | 'postName' | 'status'> & {
belongDeptId: CommonType.IdType;
} & Api.Common.CommonSearchParams
>;
/** post operate params */
@ -441,7 +444,7 @@ declare namespace Api {
/** tenant search params */
type TenantSearchParams = CommonType.RecordNullable<
Pick<Api.System.Tenant, 'tenantId' | 'contactUserName' | 'contactPhone' | 'companyName'> &
Api.Common.CommonSearchParams
Api.Common.CommonSearchParams
>;
/** tenant operate params */
@ -492,7 +495,7 @@ declare namespace Api {
/** tenant package search params */
type TenantPackageSearchParams = CommonType.RecordNullable<
Pick<Api.System.TenantPackage, 'packageName' | 'menuIds' | 'menuCheckStrictly' | 'status'> &
Api.Common.CommonSearchParams
Api.Common.CommonSearchParams
>;
/** tenant package operate params */

12
src/typings/common.d.ts vendored
View File

@ -31,4 +31,16 @@ declare namespace CommonType {
/** The res error code */
type ErrorCode = '401' | '403' | '404' | 'default';
/** 构造树型结构数据的配置选项 */
type TreeConfig = {
/** id字段名 */
idField: string;
/** 父节点字段名 */
parentIdField?: string;
/** 子节点字段名 */
childrenField?: string;
/** 过滤函数 */
filterFn?: (node: any) => boolean;
};
}

2
src/typings/elegant-router.d.ts vendored
View File

@ -25,6 +25,7 @@ declare module "@elegant-router/types" {
"login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?";
"system": "/system";
"system_config": "/system/config";
"system_dept": "/system/dept";
"system_dict": "/system/dict";
"system_dict_data": "/system/dict/data";
"system_dict_type": "/system/dict/type";
@ -96,6 +97,7 @@ declare module "@elegant-router/types" {
| "login"
| "home"
| "system_config"
| "system_dept"
| "system_dict_data"
| "system_dict"
| "system_dict_type"

74
src/utils/common.ts
View File

@ -1,5 +1,4 @@
import { $t } from '@/locales';
/**
* Transform record to option
*
@ -80,3 +79,76 @@ export function humpToLine(str: string, line: string = '-') {
export function isNotNull(value: any) {
return value !== undefined && value !== null && value !== '' && value !== 'undefined' && value !== 'null';
}
/**
* 构造树型结构数据
*
* @param {T[]} data 数据源
* @param {TreeConfig} config 配置选项
* @returns {T[]} 树形结构数据
*/
export const handleTree = <T extends Record<string, any>>(data: T[], config: CommonType.TreeConfig): T[] => {
if (!data?.length) {
return [];
}
const {
idField,
parentIdField = 'parentId',
childrenField = 'children',
filterFn = () => true // 添加过滤函数，默认为不过滤
} = config;
// 使用 Map 替代普通对象，提高性能
const childrenMap = new Map<string | number, T[]>();
const nodeMap = new Map<string | number, T>();
const tree: T[] = [];
// 第一遍遍历：构建节点映射
for (const item of data) {
const id = item[idField];
const parentId = item[parentIdField];
nodeMap.set(id, item);
if (!childrenMap.has(parentId)) {
childrenMap.set(parentId, []);
}
// 应用过滤函数
if (filterFn(item)) {
childrenMap.get(parentId)!.push(item);
}
}
// 第二遍遍历：找出根节点
for (const item of data) {
const parentId = item[parentIdField];
if (!nodeMap.has(parentId) && filterFn(item)) {
tree.push(item);
}
}
// 递归构建树形结构
const buildTree = (node: T) => {
const id = node[idField];
const children = childrenMap.get(id);
if (children?.length) {
// 使用类型断言确保类型安全
(node as any)[childrenField] = children;
for (const child of children) {
buildTree(child);
}
} else {
// 如果没有子节点，设置为 undefined
(node as any)[childrenField] = undefined;
}
};
// 从根节点开始构建树
for (const root of tree) {
buildTree(root);
}
return tree;
};

67
src/utils/ruoyi.ts
View File

@ -1,67 +0,0 @@
/**
* 构造树型结构数据
*
* @param {any} data 数据源
* @param {any} id id字段 默认 'id'
* @param {any} parentId 父节点字段 默认 'parentId'
* @param {any} children 孩子节点字段 默认 'children'
*/
export const handleMenuTree = (
data: Api.System.MenuList,
id: keyof Api.System.Menu,
parentId?: keyof Api.System.Menu,
children?: keyof Api.System.Menu
// eslint-disable-next-line max-params
): Api.System.MenuList => {
const config: {
id: keyof Api.System.Menu;
parentId: keyof Api.System.Menu;
childrenList: keyof Api.System.Menu;
} = {
id: id || 'id',
parentId: parentId || 'parentId',
childrenList: children || 'children'
};
const childrenListMap: any = {};
const nodeIds: any = {};
const tree: Api.System.MenuList = [];
for (const d of data) {
const pid = d[config.parentId];
if (!childrenListMap[pid]) {
childrenListMap[pid] = [];
}
nodeIds[d[config.id]] = d;
if (d.menuType !== 'F') {
childrenListMap[pid].push(d);
}
if (childrenListMap[pid].length === 0) {
childrenListMap[pid] = undefined;
}
}
for (const d of data) {
const pid = d[config.parentId];
if (!nodeIds[pid]) {
tree.push(d);
}
}
const adaptToChildrenList = (o: any) => {
if (childrenListMap[o[config.id]] !== null) {
o[config.childrenList] = childrenListMap[o[config.id]];
}
if (o[config.childrenList]) {
for (const c of o[config.childrenList]) {
adaptToChildrenList(c);
}
}
};
for (const t of tree) {
adaptToChildrenList(t);
}
return tree;
};

2
src/views/system/config/index.vue
View File

@ -198,7 +198,7 @@ async function handleExport() {
:scroll-x="962"
:loading="loading"
remote
:row-key="row => row.id"
:row-key="row => row.configId"
:pagination="mobilePagination"
class="sm:h-full"
/>

179
src/views/system/dept/index.vue Normal file
View File

@ -0,0 +1,179 @@
<script setup lang="tsx">
import { NButton, NPopconfirm } from 'naive-ui';
import { fetchBatchDeleteDept, fetchGetDeptList } from '@/service/api/system/dept';
import { $t } from '@/locales';
import { useAuth } from '@/hooks/business/auth';
import { useAppStore } from '@/store/modules/app';
import { useTreeTable, useTreeTableOperate } from '@/hooks/common/tree-table';
import type { TableDataWithIndex } from '~/packages/hooks/src';
import DictTag from '@/components/custom/dict-tag.vue';
import { useDict } from '@/hooks/business/dict';
import DeptOperateDrawer from './modules/dept-operate-drawer.vue';
import DeptSearch from './modules/dept-search.vue';
defineOptions({
name: 'DeptList'
});
useDict('sys_normal_disable');
const appStore = useAppStore();
const { hasAuth } = useAuth();
const {
columns,
columnChecks,
data,
getData,
loading,
searchParams,
resetSearchParams,
expandedRowKeys,
expandAll,
collapseAll
} = useTreeTable({
apiFn: fetchGetDeptList,
apiParams: {
deptName: null,
status: null
},
idField: 'deptId',
columns: () => [
{
key: 'deptName',
title: '部门名称',
align: 'center',
minWidth: 120
},
{
key: 'deptCategory',
title: '类别编码',
align: 'center',
minWidth: 120
},
{
key: 'orderNum',
title: '排序',
align: 'center',
minWidth: 60
},
{
key: 'status',
title: '部门状态',
align: 'center',
minWidth: 120,
render(row) {
return <DictTag size="small" value={row.status} dictCode="sys_normal_disable" />;
}
},
{
key: 'createTime',
title: '创建时间',
align: 'center',
minWidth: 120
},
{
key: 'operate',
title: $t('common.operate'),
align: 'center',
width: 130,
render: row => {
const editBtn = () => {
if (!hasAuth('system:dept:edit')) {
return null;
}
return (
<NButton type="primary" ghost size="small" onClick={() => edit(row)}>
{$t('common.edit')}
</NButton>
);
};
const deleteBtn = () => {
if (!hasAuth('system:dept:remove')) {
return null;
}
return (
<NPopconfirm onPositiveClick={() => handleDelete(row.deptId!)}>
{{
default: () => $t('common.confirmDelete'),
trigger: () => (
<NButton type="error" ghost size="small">
{$t('common.delete')}
</NButton>
)
}}
</NPopconfirm>
);
};
return (
<div class="flex-center gap-8px">
{editBtn()}
{deleteBtn()}
</div>
);
}
}
]
});
const { drawerVisible, operateType, editingData, handleAdd, handleEdit, onDeleted } = useTreeTableOperate(
data,
getData
);
async function handleDelete(deptId: CommonType.IdType) {
// request
const { error } = await fetchBatchDeleteDept([deptId]);
if (error) return;
onDeleted();
}
async function edit(row: TableDataWithIndex<Api.System.Dept>) {
handleEdit(row);
}
</script>
<template>
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
<DeptSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
<NCard title="部门列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
<template #header-extra>
<div class="flex items-center gap-8px">
<NButton size="small" @click="expandAll">展开</NButton>
<NButton size="small" @click="collapseAll">收起</NButton>
<TableHeaderOperation
v-model:columns="columnChecks"
:loading="loading"
:show-add="hasAuth('system:dept:add')"
:show-delete="false"
@add="handleAdd"
@refresh="getData"
/>
</div>
</template>
<NDataTable
:columns="columns"
:data="data"
size="small"
:flex-height="!appStore.isMobile"
:scroll-x="962"
:loading="loading"
:indent="28"
:row-key="row => row.deptId"
:expanded-row-keys="expandedRowKeys"
class="sm:h-full"
@update:expanded-row-keys="keys => (expandedRowKeys = keys)"
/>
<DeptOperateDrawer
v-model:visible="drawerVisible"
:operate-type="operateType"
:row-data="editingData"
@submitted="getData"
/>
</NCard>
</div>
</template>
<style scoped></style>

179
src/views/system/dept/modules/dept-operate-drawer.vue Normal file
View File

@ -0,0 +1,179 @@
<script setup lang="ts">
import { computed, reactive, watch } from 'vue';
import { NInputNumber } from 'naive-ui';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { $t } from '@/locales';
import { fetchCreateDept, fetchUpdateDept } from '@/service/api/system/dept';
import { useDict } from '@/hooks/business/dict';
defineOptions({
name: 'DeptOperateDrawer'
});
interface Props {
/** the type of operation */
operateType: NaiveUI.TableOperateType;
/** the edit row data */
rowData?: Api.System.Dept | null;
}
const props = defineProps<Props>();
interface Emits {
(e: 'submitted'): void;
}
const emit = defineEmits<Emits>();
const visible = defineModel<boolean>('visible', {
default: false
});
const { options: sysNormalDisableOptions } = useDict('sys_normal_disable');
const { formRef, validate, restoreValidation } = useNaiveForm();
const { createRequiredRule } = useFormRules();
const title = computed(() => {
const titles: Record<NaiveUI.TableOperateType, string> = {
add: '新增部门',
edit: '编辑部门'
};
return titles[props.operateType];
});
type Model = Api.System.DeptOperateParams;
const model: Model = reactive(createDefaultModel());
function createDefaultModel(): Model {
return {
parentId: null,
deptName: '',
deptCategory: '',
orderNum: null,
leader: null,
phone: '',
email: '',
status: ''
};
}
type RuleKey = Extract<keyof Model, 'deptId' | 'status'>;
const rules: Record<RuleKey, App.Global.FormRule> = {
deptId: createRequiredRule('部门id不能为空'),
status: createRequiredRule('部门状态（0正常 1停用）不能为空')
};
function handleUpdateModelWhenEdit() {
if (props.operateType === 'add') {
Object.assign(model, createDefaultModel());
return;
}
if (props.operateType === 'edit' && props.rowData) {
Object.assign(model, props.rowData);
}
}
function closeDrawer() {
visible.value = false;
}
async function handleSubmit() {
await validate();
// request
if (props.operateType === 'add') {
const { parentId, deptName, deptCategory, orderNum, leader, phone, email, status } = model;
const { error } = await fetchCreateDept({
parentId,
deptName,
deptCategory,
orderNum,
leader,
phone,
email,
status
});
if (error) return;
}
if (props.operateType === 'edit') {
const { deptId, parentId, deptName, deptCategory, orderNum, leader, phone, email, status } = model;
const { error } = await fetchUpdateDept({
deptId,
parentId,
deptName,
deptCategory,
orderNum,
leader,
phone,
email,
status
});
if (error) return;
}
window.$message?.success($t('common.updateSuccess'));
closeDrawer();
emit('submitted');
}
watch(visible, () => {
if (visible.value) {
handleUpdateModelWhenEdit();
restoreValidation();
}
});
</script>
<template>
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
<NDrawerContent :title="title" :native-scrollbar="false" closable>
<NForm ref="formRef" :model="model" :rules="rules">
<!--
<NFormItem label="父部门id" path="parentId">
<NInput v-model:value="model.parentId" placeholder="请输入父部门id" />
</NFormItem>
-->
<NFormItem label="部门名称" path="deptName">
<NInput v-model:value="model.deptName" placeholder="请输入部门名称" />
</NFormItem>
<NFormItem label="部门类别编码" path="deptCategory">
<NInput v-model:value="model.deptCategory" placeholder="请输入部门类别编码" />
</NFormItem>
<NFormItem label="显示顺序" path="orderNum">
<NInputNumber v-model:value="model.orderNum" placeholder="请输入显示顺序" />
</NFormItem>
<!--
<NFormItem label="负责人" path="leader">
<NInput v-model:value="model.leader" placeholder="请输入负责人" />
</NFormItem>
-->
<NFormItem label="联系电话" path="phone">
<NInput v-model:value="model.phone" placeholder="请输入联系电话" />
</NFormItem>
<NFormItem label="邮箱" path="email">
<NInput v-model:value="model.email" placeholder="请输入邮箱" />
</NFormItem>
<NFormItem label="部门状态（0正常 1停用）" path="status">
<NSelect
v-model:value="model.status"
placeholder="请选择部门状态（0正常 1停用）"
:options="sysNormalDisableOptions"
clearable
/>
</NFormItem>
</NForm>
<template #footer>
<NSpace :size="16">
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
<NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
</NSpace>
</template>
</NDrawerContent>
</NDrawer>
</template>
<style scoped></style>

73
src/views/system/dept/modules/dept-search.vue Normal file
View File

@ -0,0 +1,73 @@
<script setup lang="ts">
import { $t } from '@/locales';
import { useNaiveForm } from '@/hooks/common/form';
import { useDict } from '@/hooks/business/dict';
defineOptions({
name: 'DeptSearch'
});
interface Emits {
(e: 'reset'): void;
(e: 'search'): void;
}
const emit = defineEmits<Emits>();
const { formRef, validate, restoreValidation } = useNaiveForm();
const model = defineModel<Api.System.DeptSearchParams>('model', { required: true });
const { options: sysNormalDisableOptions } = useDict('sys_normal_disable');
async function reset() {
await restoreValidation();
emit('reset');
}
async function search() {
await validate();
emit('search');
}
</script>
<template>
<NCard :bordered="false" size="small" class="card-wrapper">
<NCollapse>
<NCollapseItem :title="$t('common.search')" name="user-search">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
<NGrid responsive="screen" item-responsive>
<NFormItemGi span="24 s:12 m:6" label="部门名称" path="deptName" class="pr-24px">
<NInput v-model:value="model.deptName" placeholder="请输入部门名称" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="部门状态（0正常 1停用）" path="status" class="pr-24px">
<NSelect
v-model:value="model.status"
placeholder="请选择部门状态（0正常 1停用）"
:options="sysNormalDisableOptions"
clearable
/>
</NFormItemGi>
<NFormItemGi span="24" class="pr-24px">
<NSpace class="w-full" justify="end">
<NButton @click="reset">
<template #icon>
<icon-ic-round-refresh class="text-icon" />
</template>
{{ $t('common.reset') }}
</NButton>
<NButton type="primary" ghost @click="search">
<template #icon>
<icon-ic-round-search class="text-icon" />
</template>
{{ $t('common.search') }}
</NButton>
</NSpace>
</NFormItemGi>
</NGrid>
</NForm>
</NCollapseItem>
</NCollapse>
</NCard>
</template>
<style scoped></style>

5
src/views/system/menu/index.vue
View File

@ -7,13 +7,12 @@ import { fetchDeleteMenu, fetchGetMenuList } from '@/service/api/system';
import { useAppStore } from '@/store/modules/app';
import { menuIsFrameRecord, menuTypeRecord } from '@/constants/business';
import { $t } from '@/locales';
import { handleMenuTree } from '@/utils/ruoyi';
import { useDict } from '@/hooks/business/dict';
import SvgIcon from '@/components/custom/svg-icon.vue';
import DictTag from '@/components/custom/dict-tag.vue';
import ButtonIcon from '@/components/custom/button-icon.vue';
import { handleTree } from '@/utils/common';
import MenuOperateDrawer from './modules/menu-operate-drawer.vue';
useDict('sys_show_hide');
useDict('sys_normal_disable');
@ -44,7 +43,7 @@ const getMeunTree = async () => {
menuId: 0,
menuName: '根目录',
icon: 'material-symbols:home-outline-rounded',
children: handleMenuTree(data, 'menuId')
children: handleTree(data, { idField: 'menuId', filterFn: item => item.menuType !== 'F' })
}
] as Api.System.Menu[];
endLoading();

83
src/views/system/post/index.vue
View File

@ -1,7 +1,8 @@
<script setup lang="tsx">
import { NButton, NPopconfirm } from 'naive-ui';
import { fetchBatchDeletePost, fetchGetPostList } from '@/service/api/system/post';
import { useLoading } from '@sa/hooks';
import { ref } from 'vue';
import { fetchBatchDeletePost, fetchGetPostList } from '@/service/api/system/post';
import { fetchGetDeptTree } from '@/service/api/system';
import { $t } from '@/locales';
import { useAuth } from '@/hooks/business/auth';
@ -11,7 +12,6 @@ import { useTable, useTableOperate } from '@/hooks/common/table';
import DictTag from '@/components/custom/dict-tag.vue';
import PostOperateDrawer from './modules/post-operate-drawer.vue';
import PostSearch from './modules/post-search.vue';
import { ref } from 'vue';
defineOptions({
name: 'PostList'
@ -40,7 +40,7 @@ const {
// the value can not be undefined, otherwise the property in Form will not be reactive
postCode: null,
postName: null,
status: null,
status: null
},
columns: () => [
{
@ -103,66 +103,58 @@ const {
width: 130,
render: row => {
const editBtn = () => {
if (!hasAuth('system:post:edit')) {
return null;
}
return (
<NButton type="primary" ghost size="small" onClick={() => edit(row.postId!)}>
{$t('common.edit')}
</NButton>
);
if (!hasAuth('system:post:edit')) {
return null;
}
return (
<NButton type="primary" ghost size="small" onClick={() => edit(row.postId!)}>
{$t('common.edit')}
</NButton>
);
};
const deleteBtn = () => {
if (!hasAuth('system:post:remove')) {
return null;
}
return (
<NPopconfirm onPositiveClick={() => handleDelete(row.postId!)}>
{{
default: () => $t('common.confirmDelete'),
trigger: () => (
<NButton type="error" ghost size="small">
{$t('common.delete')}
</NButton>
)
}}
</NPopconfirm>
);
if (!hasAuth('system:post:remove')) {
return null;
}
return (
<NPopconfirm onPositiveClick={() => handleDelete(row.postId!)}>
{{
default: () => $t('common.confirmDelete'),
trigger: () => (
<NButton type="error" ghost size="small">
{$t('common.delete')}
</NButton>
)
}}
</NPopconfirm>
);
};
return (
<div class="flex-center gap-8px">
{editBtn()}
{deleteBtn()}
</div>
<div class="flex-center gap-8px">
{editBtn()}
{deleteBtn()}
</div>
);
}
}
]
});
const {
drawerVisible,
operateType,
editingData,
handleAdd,
handleEdit,
checkedRowKeys,
onBatchDeleted,
onDeleted
} = useTableOperate(data, getData);
const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
useTableOperate(data, getData);
async function handleBatchDelete() {
// request
const { error } = await fetchBatchDeletePost(checkedRowKeys.value)
const { error } = await fetchBatchDeletePost(checkedRowKeys.value);
if (error) return;
onBatchDeleted();
}
async function handleDelete(postId: CommonType.IdType) {
// request
const { error } = await fetchBatchDeletePost([postId])
const { error } = await fetchBatchDeletePost([postId]);
if (error) return;
onDeleted();
}
@ -172,7 +164,7 @@ async function edit(postId: CommonType.IdType) {
}
async function handleExport() {
download('/system/post/export', searchParams, `岗位信息_${new Date().getTime()}.xlsx`);
download('/system/post/export', searchParams, `岗位信息_${new Date().getTime()}.xlsx`);
}
const { loading: treeLoading, startLoading: startTreeLoading, endLoading: endTreeLoading } = useLoading();
@ -220,10 +212,10 @@ function handleResetTreeData() {
<NInput v-model:value="deptPattern" clearable :placeholder="$t('common.keywordSearch')" />
<NSpin class="dept-tree" :show="treeLoading">
<NTree
v-model:selected-keys="selectedKeys"
block-node
show-line
:data="deptData as []"
v-model:selected-keys="selectedKeys"
:default-expanded-keys="deptData?.length ? [deptData[0].id!] : []"
:show-irrelevant-nodes="false"
:pattern="deptPattern"
@ -282,7 +274,6 @@ function handleResetTreeData() {
</TableSiderLayout>
</template>
<style scoped lang="scss">
.dept-tree {
.n-button {
@ -346,4 +337,4 @@ function handleResetTreeData() {
:deep(.n-card-header__main) {
min-width: 69px !important;
}
</style>
</style>

58
src/views/system/post/modules/post-operate-drawer.vue
View File

@ -1,9 +1,9 @@
<script setup lang="ts">
import { computed, reactive, watch } from 'vue';
import { useLoading } from '@sa/hooks';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { $t } from '@/locales';
import { fetchCreatePost, fetchUpdatePost } from '@/service/api/system/post';
import { useLoading } from '@sa/hooks';
defineOptions({
name: 'PostOperateDrawer'
});
@ -56,15 +56,7 @@ function createDefaultModel(): Model {
};
}
type RuleKey = Extract<
keyof Model,
| 'postId'
| 'deptId'
| 'postCode'
| 'postName'
| 'postSort'
| 'status'
>;
type RuleKey = Extract<keyof Model, 'postId' | 'deptId' | 'postCode' | 'postName' | 'postSort' | 'status'>;
const rules: Record<RuleKey, App.Global.FormRule> = {
postId: createRequiredRule('岗位ID不能为空'),
@ -72,7 +64,7 @@ const rules: Record<RuleKey, App.Global.FormRule> = {
postCode: createRequiredRule('岗位编码不能为空'),
postName: createRequiredRule('岗位名称不能为空'),
postSort: createRequiredRule('显示顺序不能为空'),
status: createRequiredRule('状态不能为空'),
status: createRequiredRule('状态不能为空')
};
function handleUpdateModelWhenEdit() {
@ -104,7 +96,16 @@ async function handleSubmit() {
if (props.operateType === 'edit') {
const { postId, deptId, postCode, postCategory, postName, postSort, status, remark } = model;
const { error } = await fetchUpdatePost({ postId, deptId, postCode, postCategory, postName, postSort, status, remark });
const { error } = await fetchUpdatePost({
postId,
deptId,
postCode,
postCategory,
postName,
postSort,
status,
remark
});
if (error) return;
}
@ -127,38 +128,33 @@ watch(visible, () => {
<NForm ref="formRef" :model="model" :rules="rules">
<NFormItem label="归属部门" path="deptId">
<NTreeSelect
v-model:value="model.deptId"
:loading="deptLoading"
clearable
:options="deptData as []"
label-field="label"
key-field="id"
:default-expanded-keys="deptData?.length ? [deptData[0].id] : []"
placeholder="请选择归属部门"
/>
v-model:value="model.deptId"
:loading="deptLoading"
clearable
:options="deptData as []"
label-field="label"
key-field="id"
:default-expanded-keys="deptData?.length ? [deptData[0].id] : []"
placeholder="请选择归属部门"
/>
</NFormItem>
<NFormItem label="岗位编码" path="postCode">
<NInput v-model:value="model.postCode" placeholder="请输入岗位编码" />
<NInput v-model:value="model.postCode" placeholder="请输入岗位编码" />
</NFormItem>
<NFormItem label="类别编码" path="postCategory">
<NInput v-model:value="model.postCategory" placeholder="请输入类别编码" />
<NInput v-model:value="model.postCategory" placeholder="请输入类别编码" />
</NFormItem>
<NFormItem label="岗位名称" path="postName">
<NInput v-model:value="model.postName" placeholder="请输入岗位名称" />
<NInput v-model:value="model.postName" placeholder="请输入岗位名称" />
</NFormItem>
<NFormItem label="显示顺序" path="postSort">
<NInputNumber v-model:value="model.postSort" placeholder="请输入显示顺序" />
<NInputNumber v-model:value="model.postSort" placeholder="请输入显示顺序" />
</NFormItem>
<NFormItem label="状态" path="status">
<DictRadio v-model:value="model.status" dict-code="sys_normal_disable" />
</NFormItem>
<NFormItem label="备注" path="remark">
<NInput
v-model:value="model.remark"
:rows="3"
type="textarea"
placeholder="请输入备注"
/>
<NInput v-model:value="model.remark" :rows="3" type="textarea" placeholder="请输入备注" />
</NFormItem>
</NForm>
<template #footer>

1
src/views/system/post/modules/post-search.vue
View File

@ -15,7 +15,6 @@ const emit = defineEmits<Emits>();
const { formRef, validate, restoreValidation } = useNaiveForm();
const model = defineModel<Api.System.PostSearchParams>('model', { required: true });
const { options: sysCommonStatusOptions } = useDict('sys_normal_disable');