refactor: 权限系统模块重构完成

Former-commit-id: b33078bfbfea309af518cfab41080d0fea819491

src/api/dept.ts

@@ -12,7 +12,7 @@ export function listDepartments(
   queryParams?: DeptQueryParam
 ): AxiosPromise<DeptItem[]> {
   return request({
-    url: '/youlai-system/api/v1/depts',
+    url: '/youlai-system/api/v1/dept',
     method: 'get',
     params: queryParams
   });
@@ -23,7 +23,7 @@ export function listDepartments(
  */
 export function listDeptOptions(): AxiosPromise<Option[]> {
   return request({
-    url: '/youlai-system/api/v1/depts/options',
+    url: '/youlai-system/api/v1/dept/options',
     method: 'get'
   });
 }
@@ -33,9 +33,9 @@ export function listDeptOptions(): AxiosPromise<Option[]> {
  *
  * @param id
  */
-export function getDeptDetail(id: string): AxiosPromise<DeptFormData> {
+export function getDeptForm(id: string): AxiosPromise<DeptFormData> {
   return request({
-    url: '/youlai-system/api/v1/depts/' + id,
+    url: '/youlai-system/api/v1/dept/' + id + '/form',
     method: 'get'
   });
 }
@@ -47,7 +47,7 @@ export function getDeptDetail(id: string): AxiosPromise<DeptFormData> {
  */
 export function addDept(data: DeptFormData) {
   return request({
-    url: '/youlai-system/api/v1/depts',
+    url: '/youlai-system/api/v1/dept',
     method: 'post',
     data: data
   });
@@ -61,7 +61,7 @@ export function addDept(data: DeptFormData) {
  */
 export function updateDept(id: string, data: DeptFormData) {
   return request({
-    url: '/youlai-system/api/v1/depts/' + id,
+    url: '/youlai-system/api/v1/dept/' + id,
     method: 'put',
     data: data
   });
@@ -74,7 +74,7 @@ export function updateDept(id: string, data: DeptFormData) {
  */
 export function deleteDept(ids: string) {
   return request({
-    url: '/youlai-system/api/v1/depts/' + ids,
+    url: '/youlai-system/api/v1/dept/' + ids,
     method: 'delete'
   });
 }

src/api/dict.ts

@@ -1,6 +1,6 @@
 import { Option } from '@/types/common';
 import {
-  DictFormTypeData,
+  DictTypeFormData,
   DictItemFormData,
   DictItemPageResult,
   DictItemQueryParam,
@@ -11,28 +11,28 @@ import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
 
 /**
- * 获取字典分页列表
+ * 获取字典类型分页列表
  *
  * @param queryParams
  */
-export function listPageDictTypes(
+export function listDictTypePages(
   queryParams: DictQueryParam
 ): AxiosPromise<DictPageResult> {
   return request({
-    url: '/youlai-system/api/v1/dict-types',
+    url: '/youlai-system/api/v1/dict/types/pages',
     method: 'get',
     params: queryParams
   });
 }
 
 /**
- * 获取字典详情
+ * 获取字典类型表单数据
  *
  * @param id
  */
-export function getDictFormData(id: number): AxiosPromise<DictFormTypeData> {
+export function getDictTypeForm(id: number): AxiosPromise<DictTypeFormData> {
   return request({
-    url: '/youlai-system/api/v1/dict-types/' + id + '/form_data',
+    url: '/youlai-system/api/v1/dict/types/' + id + '/form',
     method: 'get'
   });
 }
@@ -42,9 +42,9 @@ export function getDictFormData(id: number): AxiosPromise<DictFormTypeData> {
  *
  * @param data
  */
-export function addDictType(data: DictFormTypeData) {
+export function addDictType(data: DictTypeFormData) {
   return request({
-    url: '/youlai-system/api/v1/dict-types',
+    url: '/youlai-system/api/v1/dict/types',
     method: 'post',
     data: data
   });
@@ -56,64 +56,59 @@ export function addDictType(data: DictFormTypeData) {
  * @param id
  * @param data
  */
-export function updateDictType(id: number, data: DictFormTypeData) {
+export function updateDictType(id: number, data: DictTypeFormData) {
   return request({
-    url: '/youlai-system/api/v1/dict-types/' + id,
+    url: '/youlai-system/api/v1/dict/types/' + id,
     method: 'put',
     data: data
   });
 }
 
 /**
- * 批量删除字典类型
+ * 删除字典类型
- *
- * @param ids 字典类型ID，多个以英文逗号(,)分割
  */
 export function deleteDictTypes(ids: string) {
   return request({
-    url: '/youlai-system/api/v1/dict-types/' + ids,
+    url: '/youlai-system/api/v1/dict/types/' + ids,
     method: 'delete'
   });
 }
 
 /**
- * 获取字典项分页列表
+ * 获取字典类型的数据项
  *
- * @param queryParams
+ * @param typeCode 字典类型编码
  */
-export function listPageDictItems(
+export function listDictItemsByTypeCode(
+  typeCode: string
+): AxiosPromise<Option[]> {
+  return request({
+    url: '/youlai-system/api/v1/dict/types/' + typeCode + '/items',
+    method: 'get'
+  });
+}
+
+/**
+ * 获取字典项分页列表
+ */
+export function listDictItemPages(
   queryParams: DictItemQueryParam
 ): AxiosPromise<DictItemPageResult> {
   return request({
-    url: '/youlai-system/api/v1/dict-items',
+    url: '/youlai-system/api/v1/dict/items/pages',
     method: 'get',
     params: queryParams
   });
 }
 
 /**
- * 根据字典类型编码获取字典数据项
+ * 获取字典数据项表单数据
- *
- * @param typeCode 字典类型编码
- */
-export function getDictItemsByTypeCode(
-  typeCode: string
-): AxiosPromise<Option[]> {
-  return request({
-    url: '/youlai-system/api/v1/dict-items/select_list',
-    method: 'get',
-    params: { typeCode: typeCode }
-  });
-}
-
-/**
- * 获取字典数据项表单
  *
  * @param id
  */
 export function getDictItemData(id: number): AxiosPromise<DictItemFormData> {
   return request({
-    url: '/youlai-system/api/v1/dict-items/' + id + '/form_data',
+    url: '/youlai-system/api/v1/dict/items/' + id + '/form',
     method: 'get'
   });
 }
@@ -123,9 +118,9 @@ export function getDictItemData(id: number): AxiosPromise<DictItemFormData> {
  *
  * @param data
  */
-export function addDictItem(data: DictItemFormData) {
+export function saveDictItem(data: DictItemFormData) {
   return request({
-    url: '/youlai-system/api/v1/dict-items',
+    url: '/youlai-system/api/v1/dict/items',
     method: 'post',
     data: data
   });
@@ -139,7 +134,7 @@ export function addDictItem(data: DictItemFormData) {
  */
 export function updateDictItem(id: number, data: DictItemFormData) {
   return request({
-    url: '/youlai-system/api/v1/dict-items/' + id,
+    url: '/youlai-system/api/v1/dict/items/' + id,
     method: 'put',
     data: data
   });
@@ -152,7 +147,7 @@ export function updateDictItem(id: number, data: DictItemFormData) {
  */
 export function deleteDictItems(ids: string) {
   return request({
-    url: '/youlai-system/api/v1/dict-items/' + ids,
+    url: '/youlai-system/api/v1/dict/items/' + ids,
     method: 'delete'
   });
 }

src/main.ts

@@ -21,7 +21,7 @@ import i18n from '@/lang/index';
 import '@/styles/index.scss';
 
 // 根据字典编码获取字典列表全局方法
-import { getDictItemsByTypeCode } from '@/api/dict';
+import { listDictItemsByTypeCode } from '@/api/dict';
 
 const app = createApp(App);
 
@@ -33,7 +33,7 @@ Object.keys(directive).forEach(key => {
 });
 
 // 全局方法
-app.config.globalProperties.$getDictItemsByTypeCode = getDictItemsByTypeCode;
+app.config.globalProperties.$listDictItemsByTypeCode = listDictItemsByTypeCode;
 
 // 注册全局组件
 app

src/permission.ts

@@ -28,7 +28,7 @@ router.beforeEach(async (to, from, next) => {
       } else {
         try {
           await user.getUserInfo();
-          const roles = user.roles || ['ROOT'];
+          const roles = user.roles;
           const accessRoutes: any = await permission.generateRoutes(roles);
           accessRoutes.forEach((route: any) => {
             router.addRoute(route);

src/store/modules/user.ts

@@ -74,7 +74,10 @@ const useUserStore = defineStore({
      *  注销
      */
     logout() {
-      return new Promise((resolve, reject) => {
+      localStorage.remove('token');
+      this.RESET_STATE();
+
+      /*       return new Promise((resolve, reject) => {
         logout()
           .then(() => {
             localStorage.remove('token');
@@ -85,7 +88,7 @@ const useUserStore = defineStore({
           .catch(error => {
             reject(error);
           });
-      });
+      }); */
     },
 
     /**

src/types/api/dept.d.ts

@@ -2,7 +2,7 @@
  * 部门查询参数类型声明
  */
 export interface DeptQueryParam {
-  name: string | undefined;
+  keywords: string | undefined;
   status: number | undefined;
 }
 

src/types/api/dict.d.ts

@@ -29,7 +29,7 @@ export type DictPageResult = PageResult<Dict[]>;
 /**
  * 字典表单类型声明
  */
-export interface DictFormTypeData {
+export interface DictTypeFormData {
   id: number | undefined;
   name: string;
   code: string;

src/views/system/dept/index.vue

@@ -10,7 +10,7 @@ import { onMounted, reactive, ref, toRefs } from 'vue';
 
 // API依赖
 import {
-  getDeptDetail,
+  getDeptForm,
   deleteDept,
   updateDept,
   addDept,
@@ -131,7 +131,7 @@ async function handleUpdate(row: any) {
     title: '修改部门',
     visible: true
   };
-  getDeptDetail(deptId).then((response: any) => {
+  getDeptForm(deptId).then((response: any) => {
     state.formData = response.data;
   });
 }
@@ -214,9 +214,9 @@ onMounted(() => {
         </el-button>
       </el-form-item>
 
-      <el-form-item prop="name">
+      <el-form-item prop="keywords">
         <el-input
-          v-model="queryParams.name"
+          v-model="queryParams.keywords"
           placeholder="请输入部门名称"
           @keyup.enter="handleQuery"
         />
@@ -254,15 +254,18 @@ onMounted(() => {
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column prop="name" label="部门名称" />
+      <el-table-column prop="name" label="部门名称" min-width="300" />
-      <el-table-column prop="status" label="状态" width="100">
+      <el-table-column prop="status" label="状态" width="200">
         <template #default="scope">
           <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
           <el-tag v-else type="info">禁用</el-tag>
         </template>
       </el-table-column>
 
-      <el-table-column prop="sort" label="显示排序" width="200" />
+      <el-table-column prop="sort" label="排序" width="200" />
+
+      <el-table-column prop="createTime" label="创建时间" width="250" />
+      <el-table-column prop="updateTime" label="修改时间" width="250" />
 
       <el-table-column label="操作" align="center" width="150">
         <template #default="scope">

src/views/system/dict/components/DictItem.vue

@@ -15,9 +15,9 @@ import {
 
 import { Dialog } from '@/types/common';
 import {
-  listPageDictItems,
+  listDictItemPages,
   getDictItemData,
-  addDictItem,
+  saveDictItem,
   updateDictItem,
   deleteDictItems
 } from '@/api/dict';
@@ -90,7 +90,7 @@ const {
 function handleQuery() {
   if (state.queryParams.typeCode) {
     state.loading = true;
-    listPageDictItems(state.queryParams).then(({ data }) => {
+    listDictItemPages(state.queryParams).then(({ data }) => {
       state.dictItemList = data.list;
       state.total = data.total;
       state.loading = false;
@@ -146,7 +146,7 @@ function submitForm() {
           handleQuery();
         });
       } else {
-        addDictItem(state.formData).then(() => {
+        saveDictItem(state.formData).then(() => {
           ElMessage.success('新增成功');
           cancel();
           handleQuery();

src/views/system/dict/components/DictType.vue

@@ -47,9 +47,9 @@ export default {
       border
     >
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="字典名称" prop="name" width="120" />
+      <el-table-column label="字典名称" prop="name" />
       <el-table-column label="字典编码" prop="code" />
-      <el-table-column label="状态" align="center" width="80">
+      <el-table-column label="状态" align="center" width="100">
         <template #default="scope">
           <el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
           <el-tag v-else type="info">禁用</el-tag>
@@ -131,8 +131,8 @@ export default {
 <script setup lang="ts">
 import { onMounted, reactive, ref, toRefs } from 'vue';
 import {
-  listPageDictTypes,
+  listDictTypePages,
-  getDictFormData,
+  getDictTypeForm,
   addDictType,
   updateDictType,
   deleteDictTypes
@@ -141,7 +141,7 @@ import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
 import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
 
 import { Dialog } from '@/types/common';
-import { Dict, DictFormTypeData, DictQueryParam } from '@/types/api/dict';
+import { Dict, DictTypeFormData, DictQueryParam } from '@/types/api/dict';
 
 const queryFormRef = ref(ElForm);
 const dataFormRef = ref(ElForm);
@@ -165,7 +165,7 @@ const state = reactive({
   dialog: { visible: false } as Dialog,
   formData: {
     status: 1
-  } as DictFormTypeData,
+  } as DictTypeFormData,
   rules: {
     name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
     code: [{ required: true, message: '请输入字典编码', trigger: 'blur' }]
@@ -178,7 +178,7 @@ const { total, dialog, loading, dictList, formData, rules, queryParams } =
 function handleQuery() {
   emit('dictClick', null);
   state.loading = true;
-  listPageDictTypes(state.queryParams).then(({ data }) => {
+  listDictTypePages(state.queryParams).then(({ data }) => {
     state.dictList = data.list;
     state.total = data.total;
     state.loading = false;
@@ -209,7 +209,7 @@ function handleUpdate(row: any) {
     visible: true
   };
   const id = row.id || state.ids;
-  getDictFormData(id).then(({ data }) => {
+  getDictTypeForm(id).then(({ data }) => {
     state.formData = data;
   });
 }

src/views/system/dict/index.vue

@@ -7,7 +7,7 @@ import { reactive, toRefs } from 'vue';
 
 const state = reactive({
   typeCode: '',
-  typeName: '',
+  typeName: ''
 });
 
 const { typeCode, typeName } = toRefs(state);
@@ -26,7 +26,7 @@ const handleDictTypeClick = (row: any) => {
 <template>
   <div class="app-container">
     <el-row :gutter="10">
-      <el-col :span="12" :xs="24">
+      <el-col :span="8" :xs="24">
         <el-card class="box-card">
           <template #header>
             <svg-icon icon-class="dict" />
@@ -36,7 +36,7 @@ const handleDictTypeClick = (row: any) => {
         </el-card>
       </el-col>
 
-      <el-col :span="12" :xs="24">
+      <el-col :span="16" :xs="24">
         <el-card class="box-card">
           <template #header>
             <svg-icon icon-class="dict_item" />

src/views/system/menu/components/Menu.vue

@@ -1,465 +0,0 @@
-<template>
-  <div class="component-container">
-    <!-- 搜索表单 -->
-    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-      <el-form-item>
-        <el-button type="success" :icon="Plus" @click="handleAdd"
-          >新增</el-button
-        >
-      </el-form-item>
-
-      <el-form-item prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="菜单名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <!-- 数据表格 -->
-    <el-table
-      v-loading="loading"
-      :data="menuList"
-      highlight-current-row
-      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-      @row-click="handleRowClick"
-      row-key="id"
-      border
-    >
-      <el-table-column label="菜单名称">
-        <template #default="scope">
-          <svg-icon
-            color="#333"
-            :icon-class="scope.row.icon ? scope.row.icon : 'build'"
-          />
-          {{ scope.row.name }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="菜单类型" align="center" width="100">
-        <template #default="scope">
-          <el-tag v-if="scope.row.type === 'MENU'" type="success">菜单</el-tag>
-          <el-tag v-if="scope.row.type === 'CATALOG'" type="warning"
-            >目录</el-tag
-          >
-          <el-tag v-if="scope.row.type === 'EXTLINK'" type="info">外链</el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="状态" align="center" width="100">
-        <template #default="scope">
-          <el-tag v-if="scope.row.visible === 1" type="success">显示</el-tag>
-          <el-tag v-else type="info">隐藏</el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="排序" align="center" width="100" prop="sort">
-      </el-table-column>
-
-      <el-table-column label="操作" align="center" width="200">
-        <template #default="scope">
-          <el-button
-            type="success"
-            :icon="Plus"
-            circle
-            plain
-            @click.stop="handleAdd(scope.row)"
-          />
-          <el-button
-            type="primary"
-            :icon="Edit"
-            circle
-            plain
-            @click.stop="handleUpdate(scope.row)"
-          />
-          <el-button
-            type="danger"
-            :icon="Delete"
-            circle
-            plain
-            @click.stop="handleDelete(scope.row)"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 弹窗表单 -->
-    <el-dialog
-      :title="dialog.title"
-      v-model="dialog.visible"
-      @close="cancel"
-      width="750px"
-    >
-      <el-form
-        ref="dataFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="100px"
-      >
-        <el-form-item label="父级菜单" prop="parentId">
-          <el-tree-select
-            v-model="formData.parentId"
-            placeholder="选择上级菜单"
-            :data="menuOptions"
-            filterable
-            check-strictly
-            :render-after-expand="false"
-          />
-        </el-form-item>
-
-        <el-form-item label="菜单名称" prop="name">
-          <el-input v-model="formData.name" placeholder="请输入菜单名称" />
-        </el-form-item>
-
-        <el-form-item label="菜单类型">
-          <el-radio-group
-            v-model="formData.type"
-            @change="handleMenuTypeChange"
-          >
-            <el-radio label="MENU">菜单</el-radio>
-            <el-radio label="CATALOG">目录</el-radio>
-            <el-radio label="EXTLINK">外链</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <!-- 路由路径(浏览器地址栏显示) -->
-        <el-form-item
-          v-if="formData.type == 'EXTLINK'"
-          label="外链地址"
-          prop="path"
-        >
-          <el-input v-model="formData.path" placeholder="请输入外链完整路径" />
-        </el-form-item>
-
-        <el-form-item v-else label="路由路径" prop="path">
-          <el-input
-            v-if="formData.type == 'CATALOG'"
-            v-model="formData.path"
-            placeholder="/system  (注意:目录以/开头)"
-          />
-          <el-input v-else v-model="formData.path" placeholder="user" />
-        </el-form-item>
-
-        <!-- 组件页面完整路径 -->
-        <el-form-item
-          v-if="formData.type == 'MENU'"
-          label="组件路径"
-          prop="component"
-        >
-          <el-input
-            v-model="formData.component"
-            placeholder="system/user/index"
-            style="width: 95%"
-          >
-            <template v-if="formData.parentId != '0'" #prepend
-              >src/views/</template
-            >
-            <template v-if="formData.parentId != '0'" #append>.vue</template>
-          </el-input>
-        </el-form-item>
-
-        <el-form-item label="图标" prop="icon">
-          <el-popover
-            ref="popoverRef"
-            placement="bottom-start"
-            :width="570"
-            trigger="click"
-          >
-            <template #reference>
-              <el-input
-                v-model="formData.icon"
-                placeholder="点击选择图标"
-                readonly
-                @click="iconSelectVisible = true"
-              >
-                <template #prefix>
-                  <svg-icon :icon-class="formData.icon" color="999" />
-                </template>
-              </el-input>
-            </template>
-
-            <icon-select @selected="selected" />
-          </el-popover>
-        </el-form-item>
-
-        <el-form-item label="跳转路由">
-          <el-input
-            v-model="formData.redirect"
-            placeholder="跳转路由路径"
-            maxlength="50"
-          />
-        </el-form-item>
-
-        <el-form-item label="状态">
-          <el-radio-group v-model="formData.visible">
-            <el-radio :label="1">显示</el-radio>
-            <el-radio :label="0">隐藏</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item label="排序" prop="sort">
-          <el-input-number
-            v-model="formData.sort"
-            style="width: 100px"
-            controls-position="right"
-            :min="0"
-          />
-        </el-form-item>
-      </el-form>
-
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref, onMounted, toRefs } from 'vue';
-
-import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
-import { ElForm, ElMessage, ElMessageBox, ElPopover } from 'element-plus';
-
-import { Dialog, Option } from '@/types/common';
-
-import { MenuFormData, MenuItem, MenuQueryParam } from '@/types/api/menu';
-// API 依赖
-import {
-  listMenus,
-  getMenuDetail,
-  listMenuOptions,
-  addMenu,
-  deleteMenus,
-  updateMenu
-} from '@/api/menu';
-
-import SvgIcon from '@/components/SvgIcon/index.vue';
-import IconSelect from '@/components/IconSelect/index.vue';
-
-const emit = defineEmits(['menuClick']);
-const queryFormRef = ref(ElForm);
-const dataFormRef = ref(ElForm);
-const popoverRef = ref(ElPopover);
-
-const state = reactive({
-  loading: true,
-  // 选中ID数组
-  ids: [],
-  // 非单个禁用
-  single: true,
-  // 非多个禁用
-  multiple: true,
-  queryParams: {} as MenuQueryParam,
-  menuList: [] as MenuItem[],
-  dialog: { visible: false } as Dialog,
-  formData: {
-    parentId: '0',
-    name: '',
-    visible: 1,
-    sort: 1,
-    component: undefined,
-    type: 'MENU'
-  } as MenuFormData,
-  rules: {
-    parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }],
-    name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
-    type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
-    path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
-    component: [
-      { required: true, message: '请输入组件完整路径', trigger: 'blur' }
-    ]
-  },
-  menuOptions: [] as Option[],
-  currentRow: undefined,
-  // Icon选择器显示状态
-  iconSelectVisible: false,
-  cacheData: {
-    menuType: '',
-    menuPath: ''
-  }
-});
-
-const {
-  loading,
-  queryParams,
-  menuList,
-  dialog,
-  formData,
-  rules,
-  menuOptions,
-  iconSelectVisible,
-  cacheData
-} = toRefs(state);
-
-/**
- * 查询
- */
-function handleQuery() {
-  // 重置父组件
-  emit('menuClick', null);
-  state.loading = true;
-  listMenus(state.queryParams).then(({ data }) => {
-    state.menuList = data;
-    state.loading = false;
-  });
-}
-
-/**
- * 加载菜单下拉树
- */
-async function loadMenuData() {
-  const menuOptions: any[] = [];
-  await listMenuOptions().then(({ data }) => {
-    const menuOption = { value: '0', label: '顶级菜单', children: data };
-    menuOptions.push(menuOption);
-    state.menuOptions = menuOptions;
-  });
-}
-
-/**
- * 重置查询
- */
-function resetQuery() {
-  queryFormRef.value.resetFields();
-  handleQuery();
-}
-
-function handleRowClick(row: any) {
-  state.currentRow = JSON.parse(JSON.stringify(row));
-  emit('menuClick', row);
-}
-
-/**
- * 新增菜单
- * @param row
- */
-async function handleAdd(row: any) {
-  formData.value.id = undefined;
-  await loadMenuData();
-  state.dialog = {
-    title: '添加菜单',
-    visible: true
-  };
-  if (row.id) {
-    // 行点击新增
-    state.formData.parentId = row.id;
-    if (row.id == '0') {
-      state.formData.type = 'CATALOG';
-    } else {
-      state.formData.type = 'MENU';
-    }
-  } else {
-    // 工具栏新增
-    if (state.currentRow) {
-      state.formData.parentId = (state.currentRow as any).id;
-      state.formData.type = 'MENU';
-    } else {
-      state.formData.parentId = '0';
-      state.formData.type = 'CATALOG';
-    }
-  }
-}
-
-/**
- * 编辑菜单
- */
-async function handleUpdate(row: MenuFormData) {
-  await loadMenuData();
-  state.dialog = {
-    title: '编辑菜单',
-    visible: true
-  };
-  const id = row.id as string;
-  getMenuDetail(id).then(({ data }) => {
-    state.formData = data;
-    cacheData.value.menuType = data.type;
-    cacheData.value.menuPath = data.path;
-  });
-}
-
-/**
- * 菜单类型 change
- */
-function handleMenuTypeChange(menuType: any) {
-  if (menuType !== cacheData.value.menuType) {
-    formData.value.path = '';
-  } else {
-    formData.value.path = cacheData.value.menuPath;
-  }
-}
-
-/**
- * 菜单提交
- */
-function submitForm() {
-  dataFormRef.value.validate((isValid: boolean) => {
-    if (isValid) {
-      if (state.formData.id) {
-        updateMenu(state.formData.id, state.formData).then(() => {
-          ElMessage.success('修改成功');
-          cancel();
-          handleQuery();
-        });
-      } else {
-        addMenu(state.formData).then(() => {
-          ElMessage.success('新增成功');
-          cancel();
-          handleQuery();
-        });
-      }
-    }
-  });
-}
-
-/**
- * 删除菜单
- *
- * @param row
- */
-function handleDelete(row: any) {
-  const ids = [row.id || state.ids].join(',');
-  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  })
-    .then(() => {
-      deleteMenus(ids).then(() => {
-        ElMessage.success('删除成功');
-        handleQuery();
-      });
-    })
-    .catch(() => ElMessage.info('已取消删除'));
-}
-
-/**
- * 取消关闭弹窗
- */
-function cancel() {
-  dataFormRef.value.resetFields();
-  state.dialog.visible = false;
-}
-
-/**
- * 选择图标后事件
- */
-function selected(name: string) {
-  state.formData.icon = name;
-  state.iconSelectVisible = false;
-}
-
-onMounted(() => {
-  handleQuery();
-});
-</script>

src/views/system/menu/components/Perm.vue

@@ -1,403 +0,0 @@
-<script setup lang="ts">
-import {
-  onMounted,
-  watch,
-  reactive,
-  ref,
-  getCurrentInstance,
-  toRefs
-} from 'vue';
-
-import {
-  listPermPages,
-  getPermFormDetail,
-  addPerm,
-  updatePerm,
-  deletePerms
-} from '@/api/perm';
-import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
-
-import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
-import { Dialog, Option } from '@/types/common';
-
-import { PermFormData, PermItem, PermQueryParam } from '@/types/api/perm';
-import { MenuItem } from '@/types/api/menu';
-
-const { proxy }: any = getCurrentInstance();
-
-const queryFormRef = ref(ElForm);
-const dataFormRef = ref(ElForm);
-
-const props = defineProps({
-  menu: {
-    type: Object,
-    default: () => {
-      return {} as MenuItem;
-    }
-  }
-});
-
-watch(
-  () => props.menu,
-  value => {
-    queryParams.value.menuId = value.id;
-    console.log('menu', value);
-    handleQuery();
-  },
-  {
-    deep: true
-  }
-);
-
-const state = reactive({
-  loading: true,
-  // 选中ID数组
-  ids: [],
-  // 非单个禁用
-  single: true,
-  // 非多个禁用
-  multiple: true,
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10
-  } as PermQueryParam,
-  permList: [] as PermItem[],
-  total: 0,
-  dialog: {
-    visible: false
-  } as Dialog,
-  formData: {} as PermFormData,
-  rules: {
-    name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
-    perm: [{ required: true, message: '请输入权限标识', trigger: 'blur' }],
-    method: [{ required: true, message: '请选择请求方式', trigger: 'blur' }]
-  },
-  microServiceOptions: [] as Option[],
-  requestMethodOptions: [] as Option[],
-  urlPerm: {
-    requestMethod: '',
-    serviceName: '',
-    requestPath: ''
-  }
-});
-
-const {
-  loading,
-  multiple,
-  permList,
-  total,
-  dialog,
-  formData,
-  rules,
-  microServiceOptions,
-  requestMethodOptions,
-  urlPerm,
-  queryParams
-} = toRefs(state);
-
-function handleQuery() {
-  if (state.queryParams.menuId) {
-    state.loading = true;
-    listPermPages(state.queryParams).then(({ data }) => {
-      state.permList = data.list;
-      state.total = data.total;
-      state.loading = false;
-    });
-  } else {
-    state.loading = false;
-    state.permList = [];
-    state.total = 0;
-    state.queryParams.pageNum = 1;
-  }
-}
-
-function resetQuery() {
-  queryFormRef.value.resetFields();
-  handleQuery();
-}
-
-function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id);
-  state.single = selection.length !== 1;
-  state.multiple = !selection.length;
-}
-
-/**
- * 加载字典数据
- */
-function loadDictOptions() {
-  proxy.$getDictItemsByTypeCode('micro_service').then((response: any) => {
-    state.microServiceOptions = response.data;
-  });
-
-  proxy.$getDictItemsByTypeCode('request_method').then((response: any) => {
-    state.requestMethodOptions = response.data;
-  });
-}
-
-function handleAdd() {
-  loadDictOptions();
-  state.dialog = {
-    title: '添加权限',
-    visible: true
-  };
-}
-
-function handleUpdate(row: any) {
-  loadDictOptions();
-  state.dialog = {
-    title: '修改权限',
-    visible: true
-  };
-  const id = row.id || state.ids;
-  getPermFormDetail(id).then(response => {
-    const { data } = response;
-    state.formData = data;
-    if (data && data.urlPerm) {
-      // GET:/youlai-system/api/v1/users
-      const urlPermArr = data.urlPerm.split(':');
-      state.urlPerm.requestMethod = urlPermArr[0];
-      state.urlPerm.serviceName = urlPermArr[1].substring(
-        1,
-        urlPermArr[1].substring(1).indexOf('/') + 1
-      );
-      state.urlPerm.requestPath = urlPermArr[1].substring(
-        urlPermArr[1].substring(1).indexOf('/') + 1
-      );
-    }
-  });
-}
-
-function submitForm() {
-  dataFormRef.value.validate((isValid: any) => {
-    if (isValid) {
-      // 接口权限和按钮权限必填其一
-      console.log(state.urlPerm.requestPath, state.formData.btnPerm);
-      if (!(state.urlPerm.requestPath || state.formData.btnPerm)) {
-        ElMessage.warning('请至少填写一种权限');
-        return false;
-      }
-      // 如果填写了URL权限，完整性校验
-      if (!state.urlPerm.requestPath) {
-        if (!state.urlPerm.requestMethod) {
-          ElMessage.warning('URL权限的请求方式不能为空');
-          return false;
-        }
-        if (!state.urlPerm.serviceName) {
-          ElMessage.warning('URL权限的所属服务不能为空');
-          return false;
-        }
-        state.formData.urlPerm =
-          state.urlPerm.requestMethod +
-          ':/' +
-          state.urlPerm.serviceName +
-          state.urlPerm.requestPath;
-      }
-
-      formData.value.menuId = props.menu.id;
-      if (state.formData.id) {
-        updatePerm(state.formData.id, state.formData).then(() => {
-          ElMessage.success('修改成功');
-          cancel();
-          handleQuery();
-        });
-      } else {
-        addPerm(state.formData).then(() => {
-          ElMessage.success('新增成功');
-          cancel();
-          handleQuery();
-        });
-      }
-    }
-  });
-}
-
-/**
- * 重置表单
- */
-function resetForm() {
-  dataFormRef.value.resetFields();
-
-  state.urlPerm = {
-    requestMethod: '',
-    serviceName: '',
-    requestPath: ''
-  };
-}
-
-function cancel() {
-  resetForm();
-  state.dialog.visible = false;
-}
-
-function handleDelete(row: any) {
-  const ids = [row.id || state.ids].join(',');
-  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  })
-    .then(() => {
-      deletePerms(ids).then(() => {
-        ElMessage.success('删除成功');
-        handleQuery();
-      });
-    })
-    .catch(() => ElMessage.info('已取消删除'));
-}
-
-onMounted(() => {
-  handleQuery();
-});
-</script>
-
-<template>
-  <div claas="component-container">
-    <!-- 搜索表单 -->
-    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-      <el-form-item>
-        <el-button
-          type="success"
-          :icon="Plus"
-          v-if="menu.id && menu.type == 'MENU'"
-          @click="handleAdd"
-          >新增</el-button
-        >
-        <el-button
-          type="danger"
-          :icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-if="menu.id && menu.type == 'MENU'"
-          >删除</el-button
-        >
-      </el-form-item>
-      <el-form-item prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="权限名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <!-- 数据表格 -->
-    <el-table
-      :data="permList"
-      v-loading="loading"
-      @selection-change="handleSelectionChange"
-      border
-    >
-      <el-table-column type="selection" width="40" align="center" />
-      <el-table-column label="权限名称" prop="name" width="150" />
-      <el-table-column label="URL权限" align="center">
-        <el-table-column prop="serviceName" label="所属服务" />
-        <el-table-column prop="requestMethod" label="请求方式" />
-        <el-table-column prop="requestPath" label="请求路径" />
-      </el-table-column>
-      <el-table-column label="按钮权限" prop="btnPerm" width="200" />
-      <el-table-column label="操作" align="center" width="150">
-        <template #default="scope">
-          <el-button
-            type="primary"
-            :icon="Edit"
-            circle
-            plain
-            @click="handleUpdate(scope.row)"
-          />
-          <el-button
-            type="danger"
-            :icon="Delete"
-            circle
-            plain
-            @click="handleDelete(scope.row)"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 分页工具条 -->
-    <pagination
-      v-if="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="handleQuery"
-    />
-
-    <!-- 表单弹窗 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="700px">
-      <el-form
-        ref="dataFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="120px"
-      >
-        <el-form-item label="权限名称" prop="name">
-          <el-input v-model="formData.name" placeholder="请输入权限名称" />
-        </el-form-item>
-
-        <el-form-item label="URL权限标识" prop="urlPerm">
-          <el-input placeholder="/api/v1/users" v-model="urlPerm.requestPath">
-            <template #prepend>
-              <el-select
-                v-model="urlPerm.serviceName"
-                style="width: 130px"
-                placeholder="所属服务"
-                clearable
-              >
-                <el-option
-                  v-for="item in microServiceOptions"
-                  :key="item.value"
-                  :value="item.value"
-                  :label="item.label"
-                />
-              </el-select>
-
-              <el-select
-                v-model="urlPerm.requestMethod"
-                style="width: 120px; margin-left: 20px"
-                placeholder="请求方式"
-                clearable
-              >
-                <el-option
-                  v-for="item in requestMethodOptions"
-                  :key="item.value"
-                  :value="item.value"
-                  :label="item.label"
-                />
-              </el-select>
-            </template>
-          </el-input>
-          <el-link v-show="urlPerm.requestMethod">
-            {{ urlPerm.requestMethod }}:/{{ urlPerm.serviceName
-            }}{{ urlPerm.requestPath }}
-          </el-link>
-        </el-form-item>
-
-        <el-form-item label="按钮权限标识" prop="btnPerm">
-          <el-input v-model="formData.btnPerm" placeholder="sys:user:add" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.component-container {
-  margin-bottom: 20px;
-}
-</style>

src/views/system/menu/index.vue

@@ -1,59 +1,499 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="10">
+    <!-- 搜索表单 -->
-      <el-col :span="10" :xs="24">
+    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-        <el-card class="box-card" shadow="always">
+      <el-form-item>
-          <template #header>
+        <el-button type="success" :icon="Plus" @click="handleAdd"
-            <svg-icon icon-class="menu" />
+          >新增</el-button
-            菜单列表
+        >
-          </template>
+      </el-form-item>
-          <menu-table @menuClick="handleMenuClick" />
+
-        </el-card>
+      <el-form-item prop="name">
-      </el-col>
+        <el-input
-      <el-col :span="14" :xs="24">
+          v-model="queryParams.name"
-        <el-card class="box-card" shadow="always">
+          placeholder="菜单名称"
-          <template #header>
+          clearable
-            <svg-icon icon-class="perm" />
+          @keyup.enter="handleQuery"
-            <span style="margin: 0 5px">权限列表</span>
+        />
-            <el-tag type="success" v-if="menu.id" size="small">{{
+      </el-form-item>
-              menu.name
+      <el-form-item>
-            }}</el-tag>
+        <el-button type="primary" :icon="Search" @click="handleQuery"
-            <el-link :underline="false" type="warning" v-else size="small"
+          >搜索</el-button
-              ><el-icon><WarningFilled /></el-icon>请选中左侧菜单</el-link
+        >
+        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 数据表格 -->
+    <el-table
+      v-loading="loading"
+      :data="menuList"
+      highlight-current-row
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      @row-click="handleRowClick"
+      row-key="id"
+      border
+      default-expand-all
+    >
+      <el-table-column label="菜单名称">
+        <template #default="scope">
+          <svg-icon
+            :icon-class="
+              scope.row.type === 'BUTTON' ? 'button' : scope.row.icon
+            "
+          />
+          {{ scope.row.name }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="菜单类型" align="center" width="150">
+        <template #default="scope">
+          <el-tag v-if="scope.row.type === 'CATALOG'" type="warning"
+            >目录</el-tag
+          >
+          <el-tag v-if="scope.row.type === 'MENU'" type="success">菜单</el-tag>
+          <el-tag v-if="scope.row.type === 'BUTTON'" type="danger">按钮</el-tag>
+          <el-tag v-if="scope.row.type === 'EXTLINK'" type="info">外链</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="权限标识"
+        align="center"
+        width="200"
+        prop="perm"
+      />
+
+      <el-table-column label="状态" align="center" width="150">
+        <template #default="scope">
+          <el-tag v-if="scope.row.visible === 1" type="success">显示</el-tag>
+          <el-tag v-else type="info">隐藏</el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="排序" align="center" width="100" prop="sort" />
+
+      <el-table-column
+        label="创建时间"
+        align="center"
+        width="200"
+        prop="createTime"
+      >
+      </el-table-column>
+
+      <el-table-column
+        label="修改时间"
+        align="center"
+        width="200"
+        prop="updateTime"
+      >
+      </el-table-column>
+
+      <el-table-column label="操作" align="center" width="200">
+        <template #default="scope">
+          <el-button
+            type="success"
+            :icon="Plus"
+            circle
+            plain
+            @click.stop="handleAdd(scope.row)"
+          />
+          <el-button
+            type="primary"
+            :icon="Edit"
+            circle
+            plain
+            @click.stop="handleUpdate(scope.row)"
+          />
+          <el-button
+            type="danger"
+            :icon="Delete"
+            circle
+            plain
+            @click.stop="handleDelete(scope.row)"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- dialog -->
+    <el-dialog
+      :title="dialog.title"
+      v-model="dialog.visible"
+      @close="cancel"
+      width="750px"
+    >
+      <el-form
+        ref="dataFormRef"
+        :model="formData"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-form-item label="父级菜单" prop="parentId">
+          <el-tree-select
+            v-model="formData.parentId"
+            placeholder="选择上级菜单"
+            :data="menuOptions"
+            filterable
+            check-strictly
+            :render-after-expand="false"
+          />
+        </el-form-item>
+
+        <el-form-item label="菜单名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入菜单名称" />
+        </el-form-item>
+
+        <el-form-item label="菜单类型" prop="type">
+          <el-radio-group
+            v-model="formData.type"
+            @change="handleMenuTypeChange"
+          >
+            <el-radio label="CATALOG">目录</el-radio>
+            <el-radio label="MENU">菜单</el-radio>
+            <el-radio label="BUTTON">按钮</el-radio>
+            <el-radio label="EXTLINK">外链</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item
+          v-if="formData.type == 'EXTLINK'"
+          label="外链地址"
+          prop="path"
+        >
+          <el-input v-model="formData.path" placeholder="请输入外链完整路径" />
+        </el-form-item>
+
+        <el-form-item
+          label="路由路径"
+          prop="path"
+          v-if="formData.type == 'CATALOG' || formData.type == 'MENU'"
+        >
+          <el-input
+            v-if="formData.type == 'CATALOG'"
+            v-model="formData.path"
+            placeholder="/system  (目录以/开头)"
+          />
+          <el-input v-else v-model="formData.path" placeholder="user" />
+        </el-form-item>
+
+        <!-- 组件页面完整路径 -->
+        <el-form-item
+          v-if="formData.type == 'MENU'"
+          label="页面路径"
+          prop="component"
+        >
+          <el-input
+            v-model="formData.component"
+            placeholder="system/user/index"
+            style="width: 95%"
+          >
+            <template v-if="formData.parentId != '0'" #prepend
+              >src/views/</template
             >
-          </template>
+            <template v-if="formData.parentId != '0'" #append>.vue</template>
-          <perm-table :menu="menu" />
+          </el-input>
-        </el-card>
+        </el-form-item>
-      </el-col>
+
-    </el-row>
+        <!-- 权限标识 -->
+        <el-form-item
+          v-if="formData.type == 'BUTTON'"
+          label="权限标识"
+          prop="perm"
+        >
+          <el-input v-model="formData.perm" placeholder="sys:user:add" />
+        </el-form-item>
+
+        <el-form-item
+          label="图标"
+          prop="icon"
+          v-if="formData.type !== 'BUTTON'"
+        >
+          <el-popover
+            ref="popoverRef"
+            placement="bottom-start"
+            :width="570"
+            trigger="click"
+          >
+            <template #reference>
+              <el-input
+                v-model="formData.icon"
+                placeholder="点击选择图标"
+                readonly
+                @click="iconSelectVisible = true"
+              >
+                <template #prefix>
+                  <svg-icon :icon-class="formData.icon" />
+                </template>
+              </el-input>
+            </template>
+
+            <icon-select @selected="selected" />
+          </el-popover>
+        </el-form-item>
+
+        <el-form-item label="跳转路由" v-if="formData.type == 'CATEGORY'">
+          <el-input v-model="formData.redirect" placeholder="跳转路由" />
+        </el-form-item>
+
+        <el-form-item label="状态" v-if="formData.type !== 'BUTTON'">
+          <el-radio-group v-model="formData.visible">
+            <el-radio :label="1">显示</el-radio>
+            <el-radio :label="0">隐藏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="排序" prop="sort">
+          <el-input-number
+            v-model="formData.sort"
+            style="width: 100px"
+            controls-position="right"
+            :min="0"
+          />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import SvgIcon from '@/components/SvgIcon/index.vue';
+import { reactive, ref, onMounted, toRefs } from 'vue';
-import MenuTable from './components/Menu.vue';
+
-import PermTable from './components/Perm.vue';
+import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
+import { ElForm, ElMessage, ElMessageBox, ElPopover } from 'element-plus';
+
+import { Dialog, Option } from '@/types/common';
+
+import { MenuFormData, MenuItem, MenuQueryParam } from '@/types/api/menu';
+// API 依赖
+import {
+  listMenus,
+  getMenuDetail,
+  listMenuOptions,
+  addMenu,
+  deleteMenus,
+  updateMenu
+} from '@/api/menu';
+
+import SvgIcon from '@/components/SvgIcon/index.vue';
+import IconSelect from '@/components/IconSelect/index.vue';
+
+const emit = defineEmits(['menuClick']);
+const queryFormRef = ref(ElForm);
+const dataFormRef = ref(ElForm);
+const popoverRef = ref(ElPopover);
 
-import { reactive, toRefs } from 'vue';
-import { WarningFilled } from '@element-plus/icons-vue';
-import { MenuItem } from '@/types/api/menu';
 const state = reactive({
-  menu: {} as MenuItem
+  loading: true,
+  // 选中ID数组
+  ids: [],
+  // 非单个禁用
+  single: true,
+  // 非多个禁用
+  multiple: true,
+  queryParams: {} as MenuQueryParam,
+  menuList: [] as MenuItem[],
+  dialog: { visible: false } as Dialog,
+  formData: {
+    parentId: '0',
+    name: '',
+    visible: 1,
+    sort: 1,
+    component: undefined,
+    type: 'MENU'
+  } as MenuFormData,
+  rules: {
+    parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }],
+    name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
+    type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
+    path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
+    component: [
+      { required: true, message: '请输入组件完整路径', trigger: 'blur' }
+    ]
+  },
+  menuOptions: [] as Option[],
+  currentRow: undefined,
+  // Icon选择器显示状态
+  iconSelectVisible: false,
+  cacheData: {
+    menuType: '',
+    menuPath: ''
+  }
 });
 
-const { menu } = toRefs(state);
+const {
+  loading,
+  queryParams,
+  menuList,
+  dialog,
+  formData,
+  rules,
+  menuOptions,
+  iconSelectVisible,
+  cacheData
+} = toRefs(state);
 
-function handleMenuClick(menuRow: MenuItem) {
+/**
-  if (menuRow) {
+ * 查询
-    menu.value.id = menuRow.id;
+ */
-    menu.value.type = menuRow.type;
+function handleQuery() {
-    menu.value.name = menuRow.name;
+  // 重置父组件
+  emit('menuClick', null);
+  state.loading = true;
+  listMenus(state.queryParams).then(({ data }) => {
+    state.menuList = data;
+    state.loading = false;
+  });
+}
+
+/**
+ * 加载菜单下拉树
+ */
+async function loadMenuData() {
+  const menuOptions: any[] = [];
+  await listMenuOptions().then(({ data }) => {
+    const menuOption = { value: '0', label: '顶级菜单', children: data };
+    menuOptions.push(menuOption);
+    state.menuOptions = menuOptions;
+  });
+}
+
+/**
+ * 重置查询
+ */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  handleQuery();
+}
+
+function handleRowClick(row: any) {
+  state.currentRow = JSON.parse(JSON.stringify(row));
+  emit('menuClick', row);
+}
+
+/**
+ * 新增菜单打开
+ */
+async function handleAdd(row: any) {
+  formData.value.id = undefined;
+  await loadMenuData();
+  dialog.value = {
+    title: '添加菜单',
+    visible: true
+  };
+
+  if (row.id) {
+    // 行点击新增
+
+    formData.value.parentId = row.id;
   } else {
-    menu.value.id = undefined;
+    // 工具栏新增
-    menu.value.type = undefined;
+
-    menu.value.name = '';
+    if (state.currentRow) {
+      // 选择行
+      formData.value.parentId = (state.currentRow as any).id;
+    } else {
+      // 未选择行
+      formData.value.parentId = '0';
+    }
   }
 }
-</script>
 
-<style scoped></style>
+/**
+ * 编辑菜单
+ */
+async function handleUpdate(row: MenuFormData) {
+  await loadMenuData();
+  state.dialog = {
+    title: '编辑菜单',
+    visible: true
+  };
+  const id = row.id as string;
+  getMenuDetail(id).then(({ data }) => {
+    state.formData = data;
+    cacheData.value.menuType = data.type;
+    cacheData.value.menuPath = data.path;
+  });
+}
+
+/**
+ * 菜单类型 change
+ */
+function handleMenuTypeChange(menuType: any) {
+  if (menuType !== cacheData.value.menuType) {
+    formData.value.path = '';
+  } else {
+    formData.value.path = cacheData.value.menuPath;
+  }
+}
+
+/**
+ * 菜单提交
+ */
+function submitForm() {
+  dataFormRef.value.validate((isValid: boolean) => {
+    if (isValid) {
+      if (state.formData.id) {
+        updateMenu(state.formData.id, state.formData).then(() => {
+          ElMessage.success('修改成功');
+          cancel();
+          handleQuery();
+        });
+      } else {
+        addMenu(state.formData).then(() => {
+          ElMessage.success('新增成功');
+          cancel();
+          handleQuery();
+        });
+      }
+    }
+  });
+}
+
+/**
+ * 删除菜单
+ *
+ * @param row
+ */
+function handleDelete(row: any) {
+  const ids = [row.id || state.ids].join(',');
+  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(() => {
+      deleteMenus(ids).then(() => {
+        ElMessage.success('删除成功');
+        handleQuery();
+      });
+    })
+    .catch(() => ElMessage.info('已取消删除'));
+}
+
+/**
+ * 取消关闭弹窗
+ */
+function cancel() {
+  dataFormRef.value.resetFields();
+  state.dialog.visible = false;
+}
+
+/**
+ * 选择图标后事件
+ */
+function selected(name: string) {
+  state.formData.icon = name;
+  state.iconSelectVisible = false;
+}
+
+onMounted(() => {
+  handleQuery();
+});
+</script>

src/views/system/role/index.vue

@@ -332,8 +332,20 @@ onMounted(() => {
       border
     >
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="角色名称" prop="name" />
+      <el-table-column label="角色名称" prop="name" min-width="300" />
-      <el-table-column label="角色编码" prop="code" />
+      <el-table-column label="角色编码" prop="code" width="200" />
+
+      <el-table-column label="状态" align="center" width="150">
+        <template #default="scope">
+          <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
+          <el-tag v-else type="info">禁用</el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="排序" align="center" width="100" prop="sort" />
+      <el-table-column prop="createTime" label="创建时间" width="250" />
+      <el-table-column prop="updateTime" label="修改时间" width="250" />
+
       <el-table-column label="操作" align="center" width="200">
         <template #default="scope">
           <el-tooltip content="分配资源" effect="light">

src/views/system/user/index.vue

@@ -367,7 +367,7 @@ async function loadDeptOptions() {
  * 加载性别字典
  */
 function loadGenderOptions() {
-  proxy.$getDictItemsByTypeCode('gender').then((response: any) => {
+  proxy.$listDictItemsByTypeCode('gender').then((response: any) => {
     state.genderOptions = response?.data;
   });
 }
@@ -607,6 +607,7 @@ onMounted(() => {
               label="用户编号"
               align="center"
               prop="id"
+              width="100"
             />
             <el-table-column
               key="username"