From 59df77a997c2b2013f9c45c5cf66adb1cb7d129b Mon Sep 17 00:00:00 2001
From: wangzenghua <1048523306@qq.com>
Date: Tue, 1 Apr 2025 10:26:52 +0100
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E8=8F=9C=E5=8D=95=E3=80=81?=
 =?UTF-8?q?=E5=9F=BA=E5=9C=B0=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/apis/plantingAndBreeding/base.js      |  51 ++
 .../src/apis/system/dept.js                   |  20 +-
 .../src/apis/system/menu.js                   |  62 +++
 .../src/router/modules/system.js              |  12 +
 .../src/router/modules/trace.js               |  30 +-
 .../views/plantingAndBreeding/base/index.vue  | 251 ++++-----
 .../src/views/system/dept/index.vue           |  36 +-
 .../src/views/system/dict/index.vue           |  18 +-
 .../src/views/system/dict/type.vue            |   5 +
 .../src/views/system/menu/index.vue           | 490 ++++++++++++++++++
 10 files changed, 811 insertions(+), 164 deletions(-)
 create mode 100644 sub-government-affairs-service/src/apis/plantingAndBreeding/base.js
 create mode 100644 sub-government-affairs-service/src/apis/system/menu.js
 create mode 100644 sub-government-affairs-service/src/views/system/menu/index.vue

diff --git a/sub-government-affairs-service/src/apis/plantingAndBreeding/base.js b/sub-government-affairs-service/src/apis/plantingAndBreeding/base.js
new file mode 100644
index 0000000..ef3c3ad
--- /dev/null
+++ b/sub-government-affairs-service/src/apis/plantingAndBreeding/base.js
@@ -0,0 +1,51 @@
+import request from '@/utils/axios';
+
+/**
+ * @Title: 列表
+ */
+export function GetEntityList(params = {}) {
+  return request('/cultivation-keep/api/cultivationbreedingbase/list', {
+    method: 'POST',
+    params,
+  });
+}
+
+/**
+ * @Title: 新增
+ */
+export function AddEntity(data = {}) {
+  return request('/cultivation-keep/api/cultivationbreedingbase/add', {
+    method: 'POST',
+    data,
+  });
+}
+
+/**
+ * @Title: 修改
+ */
+export function UpdateEntity(data = {}) {
+  return request('/cultivation-keep/api/cultivationbreedingbase/update', {
+    method: 'POST',
+    data,
+  });
+}
+
+/**
+ * @Title: 删除
+ */
+export function DeleteEntity(params = {}) {
+  return request('/cultivation-keep/api/cultivationbreedingbase/del', {
+    method: 'POST',
+    params,
+  });
+}
+
+/**
+ * @Title: 更改状态
+ */
+export function UpdateStatus(params = {}) {
+  return request('/cultivation-keep/api/cultivationbreedingbase/changeStatus', {
+    method: 'POST',
+    params,
+  });
+}
diff --git a/sub-government-affairs-service/src/apis/system/dept.js b/sub-government-affairs-service/src/apis/system/dept.js
index e109ac7..13bad19 100644
--- a/sub-government-affairs-service/src/apis/system/dept.js
+++ b/sub-government-affairs-service/src/apis/system/dept.js
@@ -10,15 +10,6 @@ export function GetEntityList(params = {}) {
   });
 }
 
-/**
- * @Title: 信息
- */
-export function GetEntity(id) {
-  return request(`/system/dept/list/exclude/${id}`, {
-    method: 'GET',
-  });
-}
-
 /**
  * @Title: 新增
  */
@@ -43,7 +34,7 @@ export function UpdateEntity(data = {}) {
  * @Title: 删除
  */
 export function DeleteEntity(params = {}) {
-  return request(`/system/dict/type/${params.id}`, {
+  return request(`/system/dept/${params.id}`, {
     method: 'DELETE',
   });
 }
@@ -56,3 +47,12 @@ export function GetDeptExcludeChild(id) {
     method: 'GET',
   });
 }
+
+/**
+ * @Title: 信息
+ */
+export function GetDept(id) {
+  return request(`/system/dept/list/exclude/${id}`, {
+    method: 'GET',
+  });
+}
diff --git a/sub-government-affairs-service/src/apis/system/menu.js b/sub-government-affairs-service/src/apis/system/menu.js
new file mode 100644
index 0000000..6d1772d
--- /dev/null
+++ b/sub-government-affairs-service/src/apis/system/menu.js
@@ -0,0 +1,62 @@
+import request from '@/utils/axios';
+
+/**
+ * @Title: 列表
+ */
+export function GetEntityList(params = {}) {
+  return request('/system/menu/list', {
+    method: 'GET',
+    params,
+  });
+}
+
+/**
+ * @Title: 新增
+ */
+export function AddEntity(data = {}) {
+  return request('/system/menu', {
+    method: 'POST',
+    data,
+  });
+}
+
+/**
+ * @Title: 修改
+ */
+export function UpdateEntity(data = {}) {
+  return request('/system/menu', {
+    method: 'PUT',
+    data,
+  });
+}
+
+/**
+ * @Title: 删除
+ */
+export function DeleteEntity(params = {}) {
+  return request(`/system/menu/${params.id}`, {
+    method: 'DELETE',
+  });
+}
+
+// 查询菜单详细
+export function GetMenu(dictType) {
+  return request(`/system/menu/${dictType}`, {
+    method: 'GET',
+  });
+}
+
+// 查询菜单下拉树结构
+// 返回parentId
+export function GetMenuTree() {
+  return request('/system/menu/treeselect', {
+    method: 'GET',
+  });
+}
+
+// 根据角色ID查询菜单下拉树结构
+export function GetRoleMenu(roleId) {
+  return request(`/system/menu/roleMenuTreeselect/${roleId}`, {
+    method: 'GET',
+  });
+}
diff --git a/sub-government-affairs-service/src/router/modules/system.js b/sub-government-affairs-service/src/router/modules/system.js
index 34badff..b03fab9 100644
--- a/sub-government-affairs-service/src/router/modules/system.js
+++ b/sub-government-affairs-service/src/router/modules/system.js
@@ -20,6 +20,18 @@ export default [
         name: 'system-dict',
         meta: { title: '字典管理', icon: 'Document' },
       },
+      {
+        path: '/sub-government-affairs-service/system-menu',
+        component: () => import('@/views/system/menu/index.vue'),
+        name: 'system-menu',
+        meta: { title: '菜单管理', icon: 'Document' },
+      },
+      // {
+      //   path: '/sub-government-affairs-service/system-dept',
+      //   component: () => import('@/views/system/dept/index.vue'),
+      //   name: 'system-dept',
+      //   meta: { title: '部门管理', icon: 'Document' },
+      // },
     ],
   },
 ];
diff --git a/sub-government-affairs-service/src/router/modules/trace.js b/sub-government-affairs-service/src/router/modules/trace.js
index df876cb..23b908d 100644
--- a/sub-government-affairs-service/src/router/modules/trace.js
+++ b/sub-government-affairs-service/src/router/modules/trace.js
@@ -52,25 +52,17 @@ export default [
         ],
       },
       {
-        path: '/sub-government-affairs-service/trace-manage',
-        name: 'trace-manage',
-        component: Views,
-        meta: { title: '溯源查询和统计', icon: 'Document' },
-        children: [
-          {
-            path: '/sub-government-affairs-service/trace-search',
-            name: 'trace-search',
-            component: () => import('@/views/trace/search/index.vue'),
-            meta: { title: '溯源查询', icon: 'Document' },
-          },
-          {
-            path: '/sub-government-affairs-service/trace-info',
-            name: 'trace-info',
-            component: () => import('@/views/trace/search/info.vue'),
-            meta: { title: '溯源详情', icon: 'Document' },
-            hidden: true,
-          },
-        ],
+        path: '/sub-government-affairs-service/trace-search',
+        name: 'trace-search',
+        component: () => import('@/views/trace/search/index.vue'),
+        meta: { title: '溯源查询', icon: 'Document' },
+      },
+      {
+        path: '/sub-government-affairs-service/trace-info',
+        name: 'trace-info',
+        component: () => import('@/views/trace/search/info.vue'),
+        meta: { title: '溯源详情', icon: 'Document' },
+        hidden: true,
       },
       {
         path: '/sub-government-affairs-service/trace-statistic',
diff --git a/sub-government-affairs-service/src/views/plantingAndBreeding/base/index.vue b/sub-government-affairs-service/src/views/plantingAndBreeding/base/index.vue
index 3ccc2ab..f05972d 100644
--- a/sub-government-affairs-service/src/views/plantingAndBreeding/base/index.vue
+++ b/sub-government-affairs-service/src/views/plantingAndBreeding/base/index.vue
@@ -39,8 +39,9 @@ import { useRouter } from 'vue-router';
 import { useApp } from '@/hooks';
 import { useUserStore } from '@/store/modules/user';
 import { CRUD_OPTIONS } from '@/config';
-import { isEmpty, mockData, sleep, setDicData } from '@/utils';
+import { isEmpty, setDicData, debounce } from '@/utils';
 import { getLandsList } from '@/apis/land';
+import { GetEntityList, AddEntity, UpdateEntity, DeleteEntity, UpdateStatus } from '@/apis/plantingAndBreeding/base';
 
 const { VITE_APP_BASE_API } = import.meta.env;
 const app = useApp();
@@ -61,7 +62,7 @@ const state = reactive({
     column: [
       {
         label: '基地名称',
-        prop: 'p1',
+        prop: 'baseName',
         search: true,
         width: 200,
         rules: {
@@ -72,8 +73,8 @@ const state = reactive({
         overHidden: true,
       },
       {
-        label: '基地分类',
-        prop: 'type',
+        label: '基地类型',
+        prop: 'baseType',
         type: 'select',
         search: true,
         props: {
@@ -95,7 +96,20 @@ const state = reactive({
         label: '地块名',
         prop: 'landName',
         width: 200,
+        addDisplay: false,
+        editDisplay: false,
+        viewDisplay: true,
+        overHidden: true,
+      },
+      {
+        label: '地块名',
+        prop: 'landId',
+        width: 200,
         type: 'select',
+        hide: true,
+        addDisplay: true,
+        editDisplay: true,
+        viewDisplay: false,
         props: {
           label: 'landName',
           value: 'id',
@@ -108,37 +122,28 @@ const state = reactive({
         filterable: true,
         remote: true,
         clearable: true,
-        remoteMethod: (val) => remoteLandList(val),
+        remoteMethod: (val) => debounce(remoteLandList(val), 200),
         change: (val) => selectedChange(val),
         rules: {
           required: true,
           message: '请选择',
           trigger: 'blur',
         },
-        // addDisplay: true,
-        // editDisplay: true,
-        // viewDisplay: false,
-        // overHidden: true,
       },
       {
         label: '区域位置',
-        prop: 'p3',
+        prop: 'address',
         width: 200,
         overHidden: true,
-        rules: {
-          required: true,
-          message: '请输入',
-          trigger: 'blur',
-        },
+        disabled: true,
+        labelTip: '请先选择地块！',
       },
       {
         label: '区域面积',
-        prop: 'p4',
-        rules: {
-          required: true,
-          message: '请输入',
-          trigger: 'blur',
-        },
+        prop: 'area',
+        width: 100,
+        disabled: true,
+        labelTip: '请先选择地块！',
       },
       {
         label: '状态',
@@ -154,6 +159,7 @@ const state = reactive({
             value: 0,
           },
         ],
+        value: 1,
         rules: {
           required: true,
           message: '请输入',
@@ -162,7 +168,7 @@ const state = reactive({
       },
       {
         label: '负责人',
-        prop: 'p5',
+        prop: 'contactPerson',
         rules: {
           required: true,
           message: '请输入',
@@ -171,7 +177,7 @@ const state = reactive({
       },
       {
         label: '联系电话',
-        prop: 'p6',
+        prop: 'contactPhone',
         width: 150,
         rules: {
           required: true,
@@ -181,15 +187,14 @@ const state = reactive({
       },
       {
         label: '创建时间',
-        prop: 'createTime',
-        width: 150,
-        // search: true,
+        prop: 'createdAt',
+        width: 200,
         display: false,
       },
       {
         label: '更新时间',
-        prop: 'updateTime',
-        width: 150,
+        prop: 'updatedAt',
+        width: 200,
         display: false,
       },
     ],
@@ -204,16 +209,16 @@ const state = reactive({
         icon: 'edit',
         event: ({ row }) => rowEdit(row),
       },
-      // {
-      //   type: 'success',
-      //   name: ({ row }) => {
-      //     return row.status === 1 ? '禁用' : '启用';
-      //   },
-      //   icon: ({ row }) => {
-      //     return row.status === 1 ? 'turnOff' : 'open';
-      //   },
-      //   event: ({ row }) => rowStatus(row),
-      // },
+      {
+        type: 'primary',
+        name: ({ row }) => {
+          return row.status === 1 ? '禁用' : '启用';
+        },
+        icon: ({ row }) => {
+          return row.status === 1 ? 'turnOff' : 'open';
+        },
+        event: ({ row }) => rowStatus(row),
+      },
       {
         type: 'danger',
         name: '删除',
@@ -233,45 +238,26 @@ const state = reactive({
 
 // 加载
 const loadData = async () => {
-  //state.loading = true;
-  // GetEntityList(state.query)
-  //   .then((res) => {
-  //     if (res.code === 200) {
-  //       const { current, size, total, records } = res.data;
-  //       state.data = records;
-  //       state.pageData = {
-  //         currentPage: current || 1,
-  //         pageSize: size || 10,
-  //         total: total,
-  //       };
-  //     }
-  //   })
-  //   .catch((err) => {
-  //     app.$message.error(err.msg);
-  //     state.data = [];
-  //   })
-  //   .finally(() => {
-  //     state.loading = false;
-  //   });
-
   state.loading = true;
-  await sleep(500);
-  state.data = mockData(
-    {
-      p1: '耿马镇一号基地',
-      landName: '耿马镇2025001号地块',
-      p3: '耿马傣族佤族自治县/耿马镇',
-      p4: '1000',
-      p5: '张三',
-      p6: '13837633838',
-      status: 1,
-      type: 'base_plant',
-      createTime: '2025-01-01',
-      updateTime: '2025-01-15',
-    },
-    10
-  );
-  state.loading = false;
+  GetEntityList(state.query)
+    .then((res) => {
+      if (res.code === 200) {
+        const { current, size, total, records } = res.data;
+        state.data = records;
+        state.pageData = {
+          currentPage: current || 1,
+          pageSize: size || 10,
+          total: total,
+        };
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+      state.data = [];
+    })
+    .finally(() => {
+      state.loading = false;
+    });
 };
 
 loadData();
@@ -313,29 +299,36 @@ const rowView = (row) => {
 };
 
 // 启用、禁用
-// const rowStatus = (row) => {
-//   console.info('操作状态');
-// };
+const rowStatus = (row) => {
+  let status = row.status === 1 ? 0 : 1;
+  UpdateStatus({ id: row.id, status })
+    .then((res) => {
+      if (res.code === 200) {
+        app.$message.success('状态更改成功！');
+        loadData();
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+    });
+};
 
 // 新增
-// const onAdd = () => {
-//   crudRef.value && crudRef.value.rowAdd();
-// };
 const rowSave = (row, done, loading) => {
-  // AddEntity(row)
-  //   .then((res) => {
-  //     if (res.code === 200) {
-  //       app.$message.success('添加成功！');
-  //       done();
-  //       loadData();
-  //     }
-  //   })
-  //   .catch((err) => {
-  //     app.$message.error(err.msg);
-  //   })
-  //   .finally(() => {
-  //     loading();
-  //   });
+  AddEntity(row)
+    .then((res) => {
+      if (res.code === 200) {
+        app.$message.success('添加成功！');
+        done();
+        loadData();
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+    })
+    .finally(() => {
+      loading();
+    });
 };
 
 // 编辑
@@ -344,20 +337,20 @@ const rowEdit = (row) => {
 };
 
 const rowUpdate = (row, index, done, loading) => {
-  // UpdateEntity(row)
-  //   .then((res) => {
-  //     if (res.code === 200) {
-  //       app.$message.success('更新成功！');
-  //       done();
-  //       loadData();
-  //     }
-  //   })
-  //   .catch((err) => {
-  //     app.$message.error(err.msg);
-  //   })
-  //   .finally(() => {
-  //     loading();
-  //   });
+  UpdateEntity(row)
+    .then((res) => {
+      if (res.code === 200) {
+        app.$message.success('更新成功！');
+        done();
+        loadData();
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+    })
+    .finally(() => {
+      loading();
+    });
 };
 
 // 删除
@@ -371,16 +364,16 @@ const onDel = (rows = []) => {
       type: 'warning',
     })
     .then(() => {
-      // DeleteEntity({ ids: ids.join(',') })
-      //   .then((res) => {
-      //     if (res.code === 200) {
-      //       app.$message.success('删除成功！');
-      //       loadData();
-      //     }
-      //   })
-      //   .catch((err) => {
-      //     app.$message.error(err.msg);
-      //   });
+      DeleteEntity({ ids: ids.join(',') })
+        .then((res) => {
+          if (res.code === 200) {
+            app.$message.success('删除成功！');
+            loadData();
+          }
+        })
+        .catch((err) => {
+          app.$message.error(err.msg);
+        });
     })
     .catch(() => {});
 };
@@ -391,16 +384,26 @@ const rowDel = (row, index, done) => {
 
 // 远程搜搜
 const remoteLandList = async (val) => {
-  if (isEmpty(val)) return;
+  if (!isEmpty(val)) return;
   const query = { landName: val, current: 1, size: 20 };
   const res = await getLandsList(query);
   if (res.code === 200) {
-    setDicData(state.options.column, 'landName', res.data.records);
+    setDicData(state.options.column, 'landId', res.data.records);
   }
 };
 
 // 选择赋值
-const selectedChange = ({ value, item }) => {
-  console.log(430, value, item, item.landName, item.address, item.area);
+const selectedChange = ({ item, value, dic }) => {
+  // console.log(390, value, item);
+  crudRef.value.tableForm.landId = item?.id;
+  crudRef.value.tableForm.landName = item?.landName;
+  crudRef.value.tableForm.address = item?.address;
+  crudRef.value.tableForm.area = item?.area;
+  crudRef.value.tableForm.provinceCode = item?.provinceCode;
+  // crudRef.value.tableForm.provinceName = item?.provinceName;
+  crudRef.value.tableForm.cityCode = item?.cityCode;
+  crudRef.value.tableForm.districtCode = item?.county;
+  crudRef.value.tableForm.townCode = item?.townCode;
+  crudRef.value.tableForm.villageCode = item?.villageCode;
 };
 </script>
diff --git a/sub-government-affairs-service/src/views/system/dept/index.vue b/sub-government-affairs-service/src/views/system/dept/index.vue
index 82169b5..bea75c2 100644
--- a/sub-government-affairs-service/src/views/system/dept/index.vue
+++ b/sub-government-affairs-service/src/views/system/dept/index.vue
@@ -15,6 +15,11 @@
       @row-update="rowUpdate"
       @row-del="rowDel"
     >
+      <template #status="{ row }">
+        <el-tag v-if="row.status == 0" type="success" size="small">启用</el-tag>
+        <el-tag v-if="row.status == 1" type="danger" size="small">禁用</el-tag>
+      </template>
+
       <template #menu="scope">
         <custom-table-operate :actions="state.options.actions" :data="scope" />
       </template>
@@ -26,9 +31,12 @@ import { reactive, ref } from 'vue';
 import { useApp } from '@/hooks';
 import { CRUD_OPTIONS } from '@/config';
 import { isEmpty, getTree } from '@/utils';
+import { useUserStore } from '@/store/modules/user';
 import { GetEntityList, AddEntity, UpdateEntity, DeleteEntity } from '@/apis/system/dept';
 
+const { VITE_APP_BASE_API } = import.meta.env;
 const app = useApp();
+const UserStore = useUserStore();
 const crudRef = ref(null);
 const state = reactive({
   loading: false,
@@ -40,18 +48,39 @@ const state = reactive({
     rowKey: 'deptId',
     index: false,
     selection: false,
-    expand: true,
+    tree: true,
+    defaultExpandAll: true,
+    treeProps: { children: 'children', hasChildren: 'hasChildren' },
     column: [
       {
         label: '部门名称',
         prop: 'deptName',
         search: true,
+        width: 200,
         rules: {
           required: true,
           message: '请输入',
           trigger: 'blur',
         },
       },
+      {
+        label: '上级部门',
+        prop: 'parentId',
+        type: 'select',
+        hide: true,
+        props: {
+          label: 'deptName',
+          value: 'deptId',
+        },
+        dicUrl: `${VITE_APP_BASE_API}/system/dept/list`,
+        dicHeaders: {
+          authorization: UserStore.token,
+        },
+        dicFormatter: (res) => {
+          const data = [{ deptId: 0, deptName: '根目录' }, ...res.data];
+          return data;
+        },
+      },
       {
         label: '状态',
         prop: 'status',
@@ -70,7 +99,7 @@ const state = reactive({
         value: '0',
         rules: {
           required: true,
-          message: '请输入',
+          message: '请选择',
           trigger: 'blur',
         },
       },
@@ -137,7 +166,6 @@ const loadData = () => {
     .then((res) => {
       if (res.code === 200) {
         state.data = getTree(res.data, 'deptId');
-        console.log(139, state.data);
       }
     })
     .catch((err) => {
@@ -223,7 +251,7 @@ const rowDel = (row, index, done) => {
       type: 'warning',
     })
     .then(() => {
-      DeleteEntity({ id: row.id })
+      DeleteEntity({ id: row.deptId })
         .then((res) => {
           if (res.code === 200) {
             app.$message.success('删除成功！');
diff --git a/sub-government-affairs-service/src/views/system/dict/index.vue b/sub-government-affairs-service/src/views/system/dict/index.vue
index bfd2833..832d5c3 100644
--- a/sub-government-affairs-service/src/views/system/dict/index.vue
+++ b/sub-government-affairs-service/src/views/system/dict/index.vue
@@ -18,6 +18,11 @@
       @row-update="rowUpdate"
       @row-del="rowDel"
     >
+      <template #status="{ row }">
+        <el-tag v-if="row.status == 0" type="success" size="small">启用</el-tag>
+        <el-tag v-if="row.status == 1" type="danger" size="small">禁用</el-tag>
+      </template>
+
       <template #menu="scope">
         <custom-table-operate :actions="state.options.actions" :data="scope" />
       </template>
@@ -48,13 +53,6 @@ const state = reactive({
     ...CRUD_OPTIONS,
     selection: false,
     column: [
-      // {
-      //   label: '编码',
-      //   prop: 'dictCode',
-      //   addDisplay: false,
-      //   editDisplay: false,
-      //   viewDisplay: false,
-      // },
       {
         label: '字典名称',
         prop: 'dictLabel',
@@ -116,6 +114,12 @@ const state = reactive({
           trigger: 'blur',
         },
       },
+      {
+        label: '排序',
+        prop: 'dictSort',
+        type: 'number',
+        hide: true,
+      },
       {
         label: '备注',
         prop: 'remark',
diff --git a/sub-government-affairs-service/src/views/system/dict/type.vue b/sub-government-affairs-service/src/views/system/dict/type.vue
index fc196ac..02df011 100644
--- a/sub-government-affairs-service/src/views/system/dict/type.vue
+++ b/sub-government-affairs-service/src/views/system/dict/type.vue
@@ -18,6 +18,11 @@
       @row-update="rowUpdate"
       @row-del="rowDel"
     >
+      <template #status="{ row }">
+        <el-tag v-if="row.status == 0" type="success" size="small">启用</el-tag>
+        <el-tag v-if="row.status == 1" type="danger" size="small">禁用</el-tag>
+      </template>
+
       <template #menu="scope">
         <custom-table-operate :actions="state.options.actions" :data="scope" />
       </template>
diff --git a/sub-government-affairs-service/src/views/system/menu/index.vue b/sub-government-affairs-service/src/views/system/menu/index.vue
new file mode 100644
index 0000000..f7cd740
--- /dev/null
+++ b/sub-government-affairs-service/src/views/system/menu/index.vue
@@ -0,0 +1,490 @@
+<template>
+  <div class="custom-page">
+    <el-row :gutter="20">
+      <splitpanes class="default-theme">
+        <pane size="16">
+          <el-col>
+            <custom-table-tree title="应用分类" :data="treeData" :option="treeOption" filter @node-click="handleNodeClick">
+              <template #default="{ data }">
+                <div :class="{ 'text-primary': data.dictValue == treeSelected.dictValue }">
+                  {{ data.dictLabel }}
+                </div>
+              </template>
+            </custom-table-tree>
+          </el-col>
+        </pane>
+        <pane size="84">
+          <el-col>
+            <avue-crud
+              ref="crudRef"
+              v-model="state.form"
+              v-model:search="state.query"
+              :table-loading="state.loading"
+              :data="state.data"
+              :option="state.options"
+              @refresh-change="refreshChange"
+              @search-reset="searchChange"
+              @search-change="searchChange"
+              @selection-change="selectionChange"
+              @row-save="rowSave"
+              @row-update="rowUpdate"
+              @row-del="rowDel"
+            >
+              <template #menuType="{ row }">
+                <el-tag v-if="row.menuType == 'M'" type="primary">目录</el-tag>
+                <el-tag v-if="row.menuType == 'C'" type="success">菜单</el-tag>
+                <el-tag v-if="row.menuType == 'F'" type="info">按钮</el-tag>
+              </template>
+
+              <template #status="{ row }">
+                <el-tag v-if="row.status == 0" type="success">启用</el-tag>
+                <el-tag v-if="row.status == 1" type="danger">禁用</el-tag>
+              </template>
+
+              <template #menu="scope">
+                <custom-table-operate :actions="state.options.actions" :data="scope" />
+              </template>
+            </avue-crud>
+          </el-col>
+        </pane>
+      </splitpanes>
+    </el-row>
+  </div>
+</template>
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue';
+import { useApp } from '@/hooks';
+import { CRUD_OPTIONS } from '@/config';
+import { isEmpty, getTree, getParentIds, setPropDisplay } from '@/utils';
+import { useUserStore } from '@/store/modules/user';
+import { GetEntityList, AddEntity, UpdateEntity, DeleteEntity } from '@/apis/system/menu';
+import { CommonDicData } from '@/apis';
+
+const { VITE_APP_BASE_API, VITE_APP_NAME } = import.meta.env;
+const app = useApp();
+const UserStore = useUserStore();
+const crudRef = ref(null);
+const treeData = ref([]);
+const treeOption = ref({
+  nodeKey: 'id',
+  props: { children: 'children', label: 'dictLabel', id: 'dictValue' },
+});
+const treeSelected = ref({});
+const dicUrl = computed(() => `${VITE_APP_BASE_API}/system/menu/treeselect?appId=${treeSelected.value?.dictValue ?? VITE_APP_NAME}`);
+const state = reactive({
+  loading: false,
+  query: {},
+  form: {},
+  selection: [],
+  options: {
+    ...CRUD_OPTIONS,
+    rowKey: 'menuId',
+    index: false,
+    selection: false,
+    tree: true,
+    defaultExpandAll: false,
+    treeProps: { children: 'children', hasChildren: 'hasChildren' },
+    column: [
+      {
+        label: '菜单名称',
+        prop: 'menuName',
+        search: true,
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '菜单分类',
+        prop: 'appId',
+        type: 'select',
+        hide: true,
+        props: {
+          label: 'dictLabel',
+          value: 'dictValue',
+        },
+        dicUrl: `${VITE_APP_BASE_API}/system/dict/data/type/sys_app_type`,
+        dicHeaders: {
+          authorization: UserStore.token,
+        },
+        dicFormatter: (res) => {
+          return res.data;
+        },
+        rules: {
+          required: true,
+          message: '请选择',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '菜单类型',
+        prop: 'menuType',
+        type: 'select',
+        dicData: [
+          {
+            label: '目录',
+            value: 'M',
+          },
+          {
+            label: '菜单',
+            value: 'C',
+          },
+          {
+            label: '按钮',
+            value: 'F',
+          },
+        ],
+        change: (val) => changeMenuType(val),
+        rules: {
+          required: true,
+          message: '请选择',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '上级菜单',
+        prop: 'pids',
+        type: 'cascader',
+        checkStrictly: true,
+        hide: true,
+        props: {
+          label: 'label',
+          value: 'id',
+        },
+        dicUrl: dicUrl,
+        dicFlag: true,
+        dicHeaders: {
+          authorization: UserStore.token,
+        },
+        dicFormatter: (res) => {
+          return res.data;
+        },
+      },
+      {
+        label: '菜单图标',
+        prop: 'icon',
+        hide: true,
+      },
+      {
+        label: '路由名称',
+        prop: 'routeName',
+        width: 200,
+        overHidden: true,
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '路由地址',
+        prop: 'path',
+        width: 200,
+        overHidden: true,
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '组件路径',
+        prop: 'component',
+        hide: true,
+      },
+      {
+        label: '路由参数',
+        prop: 'query',
+        hide: true,
+      },
+      {
+        label: '权限标识',
+        prop: 'perms',
+      },
+      {
+        label: '菜单状态',
+        prop: 'status',
+        type: 'select',
+        search: true,
+        dicData: [
+          {
+            label: '启用',
+            value: '0',
+          },
+          {
+            label: '禁用',
+            value: '1',
+          },
+        ],
+        value: '0',
+        rules: {
+          required: true,
+          message: '请选择',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '菜单顺序',
+        prop: 'orderNum',
+        type: 'number',
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '是否外链',
+        prop: 'isFrame',
+        type: 'select',
+        hide: true,
+        // labelTip: '选择是外链则路由地址需要以`http(s)://`开头',
+        dicData: [
+          {
+            label: '是',
+            value: '0',
+          },
+          {
+            label: '否',
+            value: '1',
+          },
+        ],
+        value: '1',
+        rules: {
+          required: true,
+          message: '请选择',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '显示状态',
+        prop: 'visible',
+        type: 'select',
+        hide: true,
+        dicData: [
+          {
+            label: '显示',
+            value: '0',
+          },
+          {
+            label: '隐藏',
+            value: '1',
+          },
+        ],
+        value: '0',
+        rules: {
+          required: true,
+          message: '请选择',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '是否缓存',
+        prop: 'isCache',
+        type: 'select',
+        hide: true,
+        dicData: [
+          {
+            label: '缓存',
+            value: '0',
+          },
+          {
+            label: '不缓存',
+            value: '1',
+          },
+        ],
+        value: '0',
+        rules: {
+          required: true,
+          message: '请选择',
+          trigger: 'blur',
+        },
+      },
+    ],
+    actions: [
+      {
+        name: '查看',
+        icon: 'view',
+        event: ({ row }) => rowView(row),
+      },
+      {
+        name: '编辑',
+        icon: 'edit',
+        event: ({ row }) => rowEdit(row),
+      },
+      {
+        type: 'danger',
+        name: '删除',
+        icon: 'delete',
+        event: ({ row }) => rowDel(row),
+      },
+    ],
+  },
+  data: [],
+});
+
+// tree
+const getMenuTree = async () => {
+  try {
+    const res = await CommonDicData('sys_app_type');
+    if (res.code == 200) {
+      treeData.value = res.data;
+    }
+  } catch (err) {
+    app.$message.error(err.msg);
+  }
+};
+
+const handleNodeClick = (data) => {
+  treeSelected.value = data;
+  state.query.appId = data.dictValue;
+  loadData();
+};
+
+getMenuTree();
+
+// 加载
+const loadData = () => {
+  state.loading = true;
+  GetEntityList(state.query)
+    .then((res) => {
+      if (res.code === 200) {
+        state.data = getTree(res.data, 'menuId');
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+      state.data = [];
+    })
+    .finally(() => {
+      state.loading = false;
+    });
+};
+
+onMounted(() => {
+  loadData();
+});
+
+// 搜索
+const searchChange = (params, done) => {
+  if (done) done();
+  state.query = params;
+  loadData();
+};
+
+// 刷新
+const refreshChange = () => {
+  loadData();
+  app.$message.success('刷新成功');
+};
+
+// 选择
+const selectionChange = (rows) => {
+  state.selection = rows;
+};
+
+const changeMenuType = ({ value }) => {
+  console.log(value);
+  switch (value) {
+    case 'M': {
+      const fields = ['routeName', 'component', 'perms', 'query', 'isCache'];
+      setPropDisplay(state.options.column, fields);
+      break;
+    }
+    case 'C': {
+      const fields = [];
+      setPropDisplay(state.options.column, fields);
+      break;
+    }
+    case 'F': {
+      const fields = ['icon', 'routeName', 'path', 'component', 'query', 'isFrame', 'visible', 'isCache'];
+      setPropDisplay(state.options.column, fields);
+      break;
+    }
+  }
+};
+
+// 查看
+const rowView = (row) => {
+  crudRef.value.rowView(row);
+};
+
+const setPid = (row) => {
+  if (!isEmpty(row.pids)) {
+    const len = row.pids.length;
+    row.parentId = row?.pids[len - 1] ?? 0;
+  }
+};
+
+// 新增
+const rowSave = (row, done, loading) => {
+  setPid(row);
+  AddEntity(row)
+    .then((res) => {
+      if (res.code === 200) {
+        app.$message.success('添加成功！');
+        done();
+        getMenuTree();
+        loadData();
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+    })
+    .finally(() => {
+      loading();
+    });
+};
+
+// 编辑
+const rowEdit = (row) => {
+  // row.pids = getParentIds(treeData.value, row.menuId, 'menuId');
+  row.pids = getParentIds(state.data, row.menuId, 'menuId');
+  crudRef.value.rowEdit(row);
+};
+
+const rowUpdate = (row, index, done, loading) => {
+  setPid(row);
+  UpdateEntity(row)
+    .then((res) => {
+      if (res.code === 200) {
+        app.$message.success('更新成功！');
+        done();
+        getMenuTree();
+        loadData();
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+    })
+    .finally(() => {
+      loading();
+    });
+};
+
+// 删除
+const rowDel = (row, index, done) => {
+  if (isEmpty(row)) return;
+  app
+    .$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(() => {
+      DeleteEntity({ id: row.menuId })
+        .then((res) => {
+          if (res.code === 200) {
+            app.$message.success('删除成功！');
+            getMenuTree();
+            loadData();
+          }
+        })
+        .catch((err) => {
+          app.$message.error(err.msg);
+        });
+    })
+    .catch(() => {});
+};
+</script>