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

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')) {
-                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>

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

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