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

src/components/advanced/table-header-operation.vue

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

src/hooks/common/tree-table.ts

@@ -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 {
+      if (!records.length) return { data: [] };
-        data: records
+
-      };
+      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
   };
 }
 

src/router/elegant/imports.ts

@@ -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"),

src/router/elegant/routes.ts

@@ -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',

src/router/elegant/transform.ts

@@ -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",

src/service/api/system/dept.ts

@@ -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'

src/typings/api/system.api.d.ts

@@ -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'>
+      Pick<Api.System.Post, 'deptId' | 'postCode' | 'postName' | 'status'> & {
-      & { belongDeptId: CommonType.IdType } & Api.Common.CommonSearchParams
+        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 */

src/typings/common.d.ts

@@ -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;
+  };
 }

src/typings/elegant-router.d.ts

@@ -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"

src/utils/common.ts

@@ -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;
+};

src/utils/ruoyi.ts

@@ -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;
-};

src/views/system/config/index.vue

@@ -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"
       />

src/views/system/dept/index.vue

@@ -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>

src/views/system/dept/modules/dept-operate-drawer.vue

@@ -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>

src/views/system/dept/modules/dept-search.vue

@@ -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>

src/views/system/menu/index.vue

@@ -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();

src/views/system/post/index.vue

@@ -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')) {
+          if (!hasAuth('system:post:edit')) {
-                return null;
+            return null;
-            }
+          }
-            return (
+          return (
-                <NButton type="primary" ghost size="small" onClick={() => edit(row.postId!)}>
+            <NButton type="primary" ghost size="small" onClick={() => edit(row.postId!)}>
-                    {$t('common.edit')}
+              {$t('common.edit')}
-                </NButton>
+            </NButton>
-            );
+          );
         };
 
         const deleteBtn = () => {
-            if (!hasAuth('system:post:remove')) {
+          if (!hasAuth('system:post:remove')) {
-                return null;
+            return null;
-            }
+          }
-            return (
+          return (
-                <NPopconfirm onPositiveClick={() => handleDelete(row.postId!)}>
+            <NPopconfirm onPositiveClick={() => handleDelete(row.postId!)}>
-                    {{
+              {{
-                        default: () => $t('common.confirmDelete'),
+                default: () => $t('common.confirmDelete'),
-                        trigger: () => (
+                trigger: () => (
-                            <NButton type="error" ghost size="small">
+                  <NButton type="error" ghost size="small">
-                                {$t('common.delete')}
+                    {$t('common.delete')}
-                            </NButton>
+                  </NButton>
-                        )
+                )
-                    }}
+              }}
-                </NPopconfirm>
+            </NPopconfirm>
-            );
+          );
         };
 
         return (
-            <div class="flex-center gap-8px">
+          <div class="flex-center gap-8px">
-                {editBtn()}
+            {editBtn()}
-                {deleteBtn()}
+            {deleteBtn()}
-            </div>
+          </div>
         );
       }
     }
   ]
 });
 
-const {
+const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
-  drawerVisible,
+  useTableOperate(data, getData);
-  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>

src/views/system/post/modules/post-operate-drawer.vue

@@ -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<
+type RuleKey = Extract<keyof Model, 'postId' | 'deptId' | 'postCode' | 'postName' | 'postSort' | 'status'>;
-  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"
+            v-model:value="model.deptId"
-              :loading="deptLoading"
+            :loading="deptLoading"
-              clearable
+            clearable
-              :options="deptData as []"
+            :options="deptData as []"
-              label-field="label"
+            label-field="label"
-              key-field="id"
+            key-field="id"
-              :default-expanded-keys="deptData?.length ? [deptData[0].id] : []"
+            :default-expanded-keys="deptData?.length ? [deptData[0].id] : []"
-              placeholder="请选择归属部门"
+            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
+          <NInput v-model:value="model.remark" :rows="3" type="textarea" placeholder="请输入备注" />
-            v-model:value="model.remark"
-            :rows="3"
-            type="textarea"
-            placeholder="请输入备注"
-          />
         </NFormItem>
       </NForm>
       <template #footer>

src/views/system/post/modules/post-search.vue

@@ -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');