From a5859ba7b342f8c2f526478d7b7afe4ee485a8ec Mon Sep 17 00:00:00 2001
From: Kven <2955163637@qq.com>
Date: Sat, 11 Jan 2025 17:33:44 +0800
Subject: [PATCH] =?UTF-8?q?feat(system):=20=E6=96=B0=E5=A2=9E=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加菜单管理页面，包括菜单列表、搜索、重置、新建、编辑和删除功能
- 实现菜单数据的获取、创建、更新和删除接口
- 添加菜单编辑组件，用于新建和编辑菜单
- 在系统路由中添加菜单管理路由
---
 src/api/menu.ts                               |  40 +++
 src/router/routes/modules/system.ts           |  20 +-
 .../system/menu/components/menu-edit.vue      | 225 +++++++++++++
 src/views/system/menu/index.vue               | 306 ++++++++++++++++++
 src/views/system/user/index.vue               |   1 +
 5 files changed, 582 insertions(+), 10 deletions(-)
 create mode 100644 src/api/menu.ts
 create mode 100644 src/views/system/menu/components/menu-edit.vue
 create mode 100644 src/views/system/menu/index.vue

diff --git a/src/api/menu.ts b/src/api/menu.ts
new file mode 100644
index 0000000..446b238
--- /dev/null
+++ b/src/api/menu.ts
@@ -0,0 +1,40 @@
+import axios from 'axios';
+
+export interface MenuRecord {
+  id?: number;
+  pid?: number;
+  name: string;
+  path: string;
+  meta: {
+    locale: string;
+    title?: string;
+    icon: string;
+    requiresAuth: boolean;
+    hideInMenu: boolean;
+    order: number;
+    permissions: string[];
+    showInMenu: boolean;
+    menuOrder: number;
+  };
+  children?: MenuRecord[] ;
+};
+
+export interface MenuCreateRecord extends MenuRecord{
+  type: string;
+}
+
+export const queryMenuList = () => {
+  return axios.get('/api/rest/menu');
+};
+
+export const createMenu = (data: MenuCreateRecord) => {
+  return axios.post('/api/rest/menu', data);
+};
+
+export const updateMenu = (data: MenuCreateRecord) => {
+  return axios.put(`/api/rest/menu/${data.id}`, data);
+};
+
+export const removeMenu = (id: string | number) => {
+  return axios.delete(`/api/rest/menu/${id}`);
+};
\ No newline at end of file
diff --git a/src/router/routes/modules/system.ts b/src/router/routes/modules/system.ts
index c4284bd..7231e0a 100644
--- a/src/router/routes/modules/system.ts
+++ b/src/router/routes/modules/system.ts
@@ -67,16 +67,16 @@ const SYSTEM: AppRouteRecordRaw = {
         permissions: ['system:authority'],
       },
     },
-    // {
-    //   path:'message',
-    //   name:'Message',
-    //   component: () => import('@/views/system/message/index.vue'),
-    //   meta:{
-    //     title: '消息管理',
-    //     requiresAuth: true,
-    //     permissions: ['*'],
-    //   },
-    // },
+    {
+      path:'menu',
+      name:'Menu',
+      component: () => import('@/views/system/menu/index.vue'),
+      meta:{
+        title: '菜单管理',
+        requiresAuth: true,
+        permissions: ['system:menu'],
+      },
+    },
   ],
 };
 
diff --git a/src/views/system/menu/components/menu-edit.vue b/src/views/system/menu/components/menu-edit.vue
new file mode 100644
index 0000000..bbc6626
--- /dev/null
+++ b/src/views/system/menu/components/menu-edit.vue
@@ -0,0 +1,225 @@
+<template>
+  <a-button v-if="props.isCreate" v-permission="['system:menu:create']" type="primary" @click="handleClick">
+    <template #icon><icon-plus /></template>
+    新建
+  </a-button>
+  <a-button
+    v-if="!props.isCreate"
+    v-permission="['system:menu:update']"
+    type="outline"
+    size="small"
+    :style="{ marginRight: '10px', padding: '7px' }"
+    @click="handleClick"
+  >
+    <template #icon><icon-edit /></template>
+    修改
+  </a-button>
+  <a-modal
+    width="700px"
+    :visible="visible"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <template #title>{{ modalTitle }}</template>
+    <a-form ref="createEditRef" :model="formData" :style="{ width: '650px' }">
+      <a-form-item
+        field="pid"
+        label="父级菜单名称"
+      >
+        <a-input
+          v-model="formData.pid"
+          placeholder='请输入父级菜单名称'
+        />
+      </a-form-item>
+      <a-form-item
+        field="type"
+        label="类型"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '请选择类型' }]"
+      >
+        <a-select
+          v-model="formData.type"
+          :options="typeOptions"
+          placeholder="请选择类型"
+        />
+      </a-form-item>
+      <a-form-item
+        field="name"
+        label="名称"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '请输入名称' }]"
+      >
+        <a-input
+          v-model="formData.name"
+          placeholder='请输入名称'
+        />
+      </a-form-item>
+      <a-form-item
+        field="path"
+        label="路径"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '请输入路径' }]"
+      >
+        <a-input
+          v-model="formData.path"
+          placeholder='请输入路径'
+        />
+      </a-form-item>
+      <a-form-item
+        field="meta.icon"
+        label="图标"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '请输入图标' }]"
+      >
+        <a-input
+          v-model="formData.meta.icon"
+          placeholder='请输入图标'
+        />
+      </a-form-item>
+      <a-form-item
+        field="meta.locale"
+        label="应用区域"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '应用区域' }]"
+      >
+        <a-input
+          v-model="formData.meta.locale"
+          placeholder='请输入应用区域'
+        />
+      </a-form-item>
+      <a-form-item
+        field="meta.requiresAuth"
+        label="认证"
+      >
+        <a-switch
+          v-model="formData.meta.requiresAuth"
+          :checked-value="true"
+          :unchecked-value="false"
+        />
+      </a-form-item>
+      <a-form-item
+        field="meta.hideInMenu"
+        label="隐藏"
+      >
+        <a-switch
+          v-model="formData.meta.hideInMenu"
+          :checked-value="true"
+          :unchecked-value="false"
+        />
+      </a-form-item>
+      <a-form-item
+        field="meta.menuOrder"
+        label="菜单排序"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '请选择菜单排序' }]"
+      >
+        <a-input
+          v-model="formData.meta.menuOrder"
+          placeholder='请选择菜单排序'
+        />
+      </a-form-item>
+      <a-form-item
+        field="meta.permissions"
+        label="权限"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '请输入权限' }]"
+      >
+        <a-input
+          v-model="formData.meta.permissions"
+          placeholder='请输入权限'
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+  import useVisible from '@/hooks/visible';
+  import { computed, PropType, ref } from 'vue';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+  import { Message } from '@arco-design/web-vue';
+  import { createMenu, MenuCreateRecord, MenuRecord, updateMenu } from '@/api/menu';
+
+  const props = defineProps({
+    menu: {
+      type: Object as PropType<MenuRecord>,
+    },
+    isCreate: Boolean,
+  });
+  const modalTitle = computed(() => {
+    return props.isCreate ? '新建菜单' : '编辑菜单';
+  });
+  const { visible, setVisible } = useVisible(false);
+  const createEditRef = ref<FormInstance>();
+
+  const formData = ref<MenuCreateRecord>({
+    type: '',
+    name: '',
+    path: '',
+    meta: {
+      icon: '',
+      locale: '',
+      requiresAuth: false,
+      hideInMenu: false,
+      menuOrder: 0,
+      permissions: [],
+      order: 0,
+      showInMenu: false
+    },
+      ...props.menu,
+    }
+  );
+  const typeOptions = computed(() => [
+    {
+      label: '菜单',
+      value: '1',
+    },
+    {
+      label: '权限',
+      value: '2',
+    },
+  ]);
+
+  const emit = defineEmits(['refresh']);
+
+  // 组件被点击
+  const handleClick = () => {
+    setVisible(true);
+  };
+
+  // 提交
+  const handleSubmit = async () => {
+    const valid = await createEditRef.value?.validate();
+    if (!valid) {
+      // 新增
+      if (props.isCreate) {
+        const res = await createMenu(formData.value);
+        if (res.status === 200) {
+          Message.success({
+            content: '新建成功',
+            duration: 5 * 1000,
+          });
+        }
+        createEditRef.value?.resetFields();
+      } else {
+        // 编辑
+        const res = await updateMenu(formData.value);
+        if (res.status === 200) {
+          Message.success({
+            content: '修改成功',
+            duration: 5 * 1000,
+          });
+        }
+      }
+      emit('refresh');
+      setVisible(false);
+    }
+  };
+
+  // 关闭
+  const handleCancel = async () => {
+    createEditRef.value?.resetFields();
+    setVisible(false);
+  };
+</script>
+
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
new file mode 100644
index 0000000..f1afe20
--- /dev/null
+++ b/src/views/system/menu/index.vue
@@ -0,0 +1,306 @@
+<template>
+  <div class="container">
+    <Breadcrumb :items="['系统管理', '菜单管理']" />
+    <a-card class="general-card" title=" ">
+      <a-row>
+        <a-col :flex="1">
+          <a-form
+            :model="formModel"
+            :label-col-props="{ span: 6 }"
+            :wrapper-col-props="{ span: 12 }"
+            label-align="right"
+          >
+            <a-row :gutter="16">
+              <a-col :span="12">
+                <a-form-item
+                  field="title"
+                  label="菜单名称"
+                >
+                  <a-input
+                    v-model="formModel.name"
+                    placeholder="请输入菜单名称"
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
+        </a-col>
+        <a-divider style="height: 42px" direction="vertical" />
+        <a-col :flex="'46px'" style="text-align: right">
+          <a-space :size="18">
+            <a-button type="primary" @click="search">
+              <template #icon>
+                <icon-search />
+              </template>
+              查找
+            </a-button>
+            <a-button @click="reset">
+              <template #icon>
+                <icon-refresh />
+              </template>
+              重置
+            </a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+      <a-divider style="margin-top: 10px" />
+      <a-row style="margin-bottom: 16px">
+        <a-col :span="12">
+          <a-space>
+            <MenuEdit ref="createRef" :is-create="true" @refresh="search" />
+          </a-space>
+        </a-col>
+        <a-col
+          :span="12"
+          style="display: flex; align-items: center; justify-content: end"
+        >
+          <a-tooltip content="重置">
+            <div class="action-icon" @click="search">
+              <icon-refresh size="18" />
+            </div>
+          </a-tooltip>
+          <a-dropdown @select="handleSelectDensity">
+            <a-tooltip content="密度">
+              <div class="action-icon"><icon-line-height size="18" /></div>
+            </a-tooltip>
+            <template #content>
+              <a-doption
+                v-for="item in densityList"
+                :key="item.value"
+                :value="item.value"
+                :class="{ active: item.value === size }"
+              >
+                <span>{{ item.name }}</span>
+              </a-doption>
+            </template>
+          </a-dropdown>
+          <a-tooltip content="列设置">
+            <a-popover
+              trigger="click"
+              position="bl"
+              @popup-visible-change="popupVisibleChange"
+            >
+              <div class="action-icon"><icon-settings size="18" /></div>
+              <template #content>
+                <div id="tableSetting">
+                  <div
+                    v-for="(item, index) in showColumns"
+                    :key="item.dataIndex"
+                    class="setting"
+                  >
+                    <div style="margin-right: 4px; cursor: move">
+                      <icon-drag-arrow />
+                    </div>
+                    <div>
+                      <a-checkbox
+                        v-model="item.checked"
+                        @change="
+                          handleChange($event, item as TableColumnData, index)
+                        "
+                      >
+                      </a-checkbox>
+                    </div>
+                    <div class="title">
+                      {{ item.title === '#' ? '序列号' : item.title }}
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </a-popover>
+          </a-tooltip>
+        </a-col>
+      </a-row>
+      <a-table
+        row-key="id"
+        :default-expand-all-rows="true"
+        :default-expanded-keys="[1]"
+        :loading="loading"
+        :columns="(cloneColumns as TableColumnData[])"
+        :data="renderData"
+        :bordered="false"
+        :size="size"
+        style="margin-bottom: 40px"
+      >
+        <template #icon="{ record }">
+          {{ record.meta.icon }}
+        </template>
+        <template #permission="{ record }">
+          {{ record.meta.permissions.join(',') }}
+        </template>
+        <template #operations="{ record }">
+          <!-- 编辑 -->
+          <MenuEdit
+            ref="editRef"
+            :menu="record"
+            :is-create="false"
+            @refresh="search"
+          />
+          <a-popconfirm
+            content="确认删除此菜单"
+            type="error"
+            @ok="handleDelete(record.id)"
+          >
+            <a-button
+              v-permission="['system:menu:delete']"
+              type="outline"
+              size="small"
+              status="danger"
+              style="padding: 7px"
+            >
+              <template #icon><icon-delete /></template>
+              删除
+            </a-button>
+          </a-popconfirm>
+        </template>
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, onMounted, ref, watch } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useTableOption from '@/hooks/table-option';
+  import { Message } from '@arco-design/web-vue';
+  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+  import { queryMenuList, MenuRecord, removeMenu } from '@/api/menu';
+  import MenuEdit from '@/views/system/menu/components/menu-edit.vue';
+
+  const { loading, setLoading } = useLoading(true);
+  const {
+    cloneColumns,
+    showColumns,
+    size,
+    densityList,
+    handleSelectDensity,
+    handleChange,
+    popupVisibleChange,
+    deepClone,
+  } = useTableOption();
+
+  const generateFormModel = () => {
+    return {
+      name: '',
+      type: '',
+    };
+  };
+
+  const formModel = ref(generateFormModel());
+  const renderData = ref<MenuRecord[]>([]);
+
+  // 表格头部
+  const columns = computed<TableColumnData[]>(() => [
+    {
+      title: '菜单名称',
+      dataIndex: 'name',
+      slotName: 'name',
+    },
+    {
+      title: '图标',
+      dataIndex: 'icon',
+      slotName: 'icon',
+    },
+    {
+      title: '组件路径',
+      dataIndex: 'path',
+      slotName: 'path',
+    },
+    {
+      title: '权限标识',
+      dataIndex: 'permission',
+      slotName: 'permission',
+    },
+    {
+      title: '操作',
+      dataIndex: 'operations',
+      slotName: 'operations',
+    },
+  ]);
+
+  // 获取表格
+  const fetchData = async () => {
+    setLoading(true);
+    try {
+      const res = await queryMenuList();
+      renderData.value = res.data;
+    } catch (err) {
+      // you can report use errorHandler or other
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 查询
+  const search = () => {
+    fetchData();
+  };
+
+  onMounted(() => {
+    search();
+  })
+
+
+  // 重置
+  const reset = () => {
+    formModel.value = generateFormModel();
+  };
+
+  // 删除
+  const handleDelete = async (id: number | string) => {
+    try {
+      const res = await removeMenu(id);
+      if (res.status === 200) {
+        Message.success({
+          content: '删除成功',
+          duration: 5 * 1000,
+        });
+        search();
+      }
+    }
+    catch (err) {
+      Message.error({
+        content: '删除失败',
+        duration: 5 * 1000,
+      });
+    }
+  }
+
+
+  watch(() => columns.value, deepClone, { deep: true, immediate: true });
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Menu-mgmt',
+  };
+</script>
+
+<style scoped lang="less">
+  .container {
+    padding: 0 20px 20px 20px;
+  }
+  :deep(.arco-table-th) {
+    &:last-child {
+      .arco-table-th-item-title {
+        margin-left: 16px;
+      }
+    }
+  }
+  .action-icon {
+    margin-left: 12px;
+    cursor: pointer;
+  }
+  .active {
+    color: #0960bd;
+    background-color: #e3f4fc;
+  }
+  .setting {
+    display: flex;
+    align-items: center;
+    width: 200px;
+    .title {
+      margin-left: 12px;
+      cursor: pointer;
+    }
+  }
+</style>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index e94efdd..e93f5fd 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -433,6 +433,7 @@ onMounted(() => {
 // 重置
 const reset = () => {
   formModel.value = generateFormModel();
+  search();
 };
 
 // 表格内部排序