feat(Menu.vue): 添加面包屑导航和菜单权限

2021-12-12 19:57:32 +08:00
parent dbee0747b2
commit 0edd7184a6
12 changed files with 876 additions and 66 deletions
--- a/package.json
+++ b/package.json
@@ -7,15 +7,16 @@
    "serve": "vite preview"
  },
  "dependencies": {
+    "@element-plus/icons": "0.0.11",
    "axios": "^0.24.0",
    "element-plus": "^1.2.0-beta.6",
-    "@element-plus/icons": "0.0.11",
    "nprogress": "^0.2.0",
    "path-browserify": "^1.0.1",
    "path-to-regexp": "^6.2.0",
    "screenfull": "^6.0.0",
    "vue": "^3.2.16",
    "vue-router": "^4.0.12",
+    "vue3-treeselect": "^0.1.10",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
--- a/src/api/system/menu.ts
+++ b/src/api/system/menu.ts
@@ -87,7 +87,7 @@ export function updateMenu(id: number, data: object) {
 *
 * @param ids 菜单ID，多个以英文逗号(,)分割
 */
-export function deleteMenu(ids: string) {
+export function deleteMenus(ids: string) {
    return request({
        url: '/youlai-admin/api/v1/menus/' + ids,
        method: 'delete'
--- a/src/api/system/perm.ts
+++ b/src/api/system/perm.ts
@@ -0,0 +1,79 @@
+import request from '@/utils/request'
+
+/**
+ * 获取权限分页列表
+ *
+ * @param queryParams
+ */
+export function listPermsWithPage(queryParams: object) {
+    return request({
+        url: '/youlai-admin/api/v1/permissions/page',
+        method: 'get',
+        params: queryParams
+    })
+}
+
+/**
+ * 获取权限列表
+ *
+ * @param queryParams
+ */
+export function listPerms(queryParams: object) {
+    return request({
+        url: '/youlai-admin/api/v1/permissions',
+        method: 'get',
+        params: queryParams
+    })
+}
+
+/**
+ * 获取权限详情
+ *
+ * @param id
+ */
+export function getPermDetail(id: number) {
+    return request({
+        url: '/youlai-admin/api/v1/permissions/' + id,
+        method: 'get'
+    })
+}
+
+/**
+ * 添加权限
+ *
+ * @param data
+ */
+export function addPerm(data: object) {
+    return request({
+        url: '/youlai-admin/api/v1/permissions',
+        method: 'post',
+        data: data
+    })
+}
+
+/**
+ * 更新权限
+ *
+ * @param id
+ * @param data
+ */
+export function updatePerm(id: number, data: object) {
+    return request({
+        url: '/youlai-admin/api/v1/permissions/' + id,
+        method: 'put',
+        data: data
+    })
+}
+
+/**
+ * 批量删除权限，多个以英文逗号(,)分割
+ *
+ * @param ids
+ */
+export function deletePerms(ids: string) {
+    return request({
+        url: '/youlai-admin/api/v1/permissions/' + ids,
+        method: 'delete'
+    })
+}
+
--- a/src/api/system/role.ts
+++ b/src/api/system/role.ts
@@ -0,0 +1,79 @@
+import request from '@/utils/request'
+
+/**
+ * 获取角色分页列表
+ *
+ * @param queryParams
+ */
+export function listRolesWithPage(queryParams: object) {
+    return request({
+        url: '/youlai-admin/api/v1/roles/page',
+        method: 'get',
+        params: queryParams
+    })
+}
+
+/**
+ * 获取角色列表
+ *
+ * @param queryParams
+ */
+export function listRoles(queryParams: object) {
+    return request({
+        url: '/youlai-admin/api/v1/roles',
+        method: 'get',
+        params: queryParams
+    })
+}
+
+/**
+ * 获取角色详情
+ *
+ * @param id
+ */
+export function getPermDetail(id: number) {
+    return request({
+        url: '/youlai-admin/api/v1/roles/' + id,
+        method: 'get'
+    })
+}
+
+/**
+ * 添加角色
+ *
+ * @param data
+ */
+export function addPerm(data: object) {
+    return request({
+        url: '/youlai-admin/api/v1/roles',
+        method: 'post',
+        data: data
+    })
+}
+
+/**
+ * 更新角色
+ *
+ * @param id
+ * @param data
+ */
+export function updatePerm(id: number, data: object) {
+    return request({
+        url: '/youlai-admin/api/v1/roles/' + id,
+        method: 'put',
+        data: data
+    })
+}
+
+/**
+ * 批量删除角色，多个以英文逗号(,)分割
+ *
+ * @param ids
+ */
+export function deleteRoles(ids: string) {
+    return request({
+        url: '/youlai-admin/api/v1/roles/' + ids,
+        method: 'delete'
+    })
+}
+
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -1,42 +1,50 @@
 <template>
-  <el-breadcrumb class="app-breadcrumb" separator="/">
+  <el-breadcrumb
+      class="app-breadcrumb"
+      separator-class="el-icon-arrow-right"
+  >
    <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1"
-              class="no-redirect">
-          {{ item.meta.title }}
-        </span>
-        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+      <el-breadcrumb-item
+          v-for="(item, index) in breadcrumbs"
+          :key="item.path"
+      >
+        <span
+            v-if="item.redirect === 'noredirect' || index === breadcrumbs.length-1"
+            class="no-redirect"
+        >{{ item.meta.title }}</span>
+        <a
+            v-else
+            @click.prevent="handleLink(item)"
+        >{{ item.meta.title }}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
 </template>

 <script lang="ts">
-
-import {defineComponent, onBeforeMount, reactive, toRefs,watch} from "vue";
-import {compile} from 'path-to-regexp'
-import {useRoute, RouteLocationMatched} from "vue-router";
-import router from "@router";
-
+import { defineComponent, onBeforeMount, reactive, toRefs, watch } from 'vue'
+import { useRoute, RouteLocationMatched } from 'vue-router'
+import { compile } from 'path-to-regexp'
+import router from '@/router'
 export default defineComponent({
  setup() {
-    const currentRoute = useRoute();
+    const currentRoute = useRoute()
    const pathCompile = (path: string) => {
-      const {params} = currentRoute
+      const { params } = currentRoute
      const toPath = compile(path)
      return toPath(params)
    }
+
    const state = reactive({
-      levelList: [] as Array<RouteLocationMatched>,
+      breadcrumbs: [] as Array<RouteLocationMatched>,
      getBreadcrumb: () => {
        let matched = currentRoute.matched.filter((item) => item.meta && item.meta.title)
        const first = matched[0]
        if (!state.isDashboard(first)) {
-          matched = [{path: '/dashboard', meta: {title: 'dashboard'}} as any].concat(matched)
+          matched = [{ path: '/dashboard', meta: { title: '首页' } } as any].concat(matched)
        }
-        state.levelList = matched.filter((item) => {
-          return item.mate && item.meta.title && item.meta.breadcrumb !== false
+        state.breadcrumbs = matched.filter((item) => {
+          return item.meta && item.meta.title && item.meta.breadcrumb !== false
        })
      },
      isDashboard(route: RouteLocationMatched) {
@@ -44,23 +52,29 @@ export default defineComponent({
        if (!name) {
          return false
        }
-        return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+        return name.toString().trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
      },
      handleLink(item: any) {
-        const {redirect, path} = item
+        const { redirect, path } = item
        if (redirect) {
-          router.push(redirect)
+          router.push(redirect).catch((err) => {
+            console.warn(err)
+          })
          return
        }
-        router.push(pathCompile(path))
+        router.push(pathCompile(path)).catch((err) => {
+          console.warn(err)
+        })
      }
    })
+
    watch(() => currentRoute.path, (path) => {
      if (path.startsWith('/redirect/')) {
        return
      }
      state.getBreadcrumb()
    })
+
    onBeforeMount(() => {
      state.getBreadcrumb()
    })
@@ -69,10 +83,17 @@ export default defineComponent({
      ...toRefs(state)
    }
  }
+
 })

 </script>
+
 <style lang="scss" scoped>
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
 .app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
@@ -84,4 +105,4 @@ export default defineComponent({
    cursor: text;
  }
 }
-</style>
+</style>
--- a/src/permission.ts
+++ b/src/permission.ts
@@ -11,7 +11,7 @@ const whiteList = ['/login', '/auth-redirect']
 router.beforeEach(async (to, form, next) => {
    NProgress.start()

-    const hasToken =store.state.user.token
+    const hasToken = store.state.user.token
    if (hasToken) {
        // 如果登录成功，跳转到首页
        if (to.path === '/login') {
@@ -25,8 +25,8 @@ router.beforeEach(async (to, form, next) => {
                try {
                    await store.dispatch('user/getUserInfo')
                    const roles = store.state.user.roles
-                    await store.dispatch('permission/generateRoutes', roles)
-                    store.state.permission.addRoutes.forEach(route => {
+                    const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
+                    accessRoutes.forEach((route: any) => {
                        router.addRoute(route)
                    })
                    next({...to, replace: true})
@@ -50,7 +50,6 @@ router.beforeEach(async (to, form, next) => {
    }
 })

-
 router.afterEach(() => {
    NProgress.done()
 })
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -8,10 +8,6 @@ const modules = import.meta.glob("../../views/**/**.vue");
 export const Layout = () => import( '@/layout/index.vue')

 const hasPermission = (roles: string[], route: RouteRecordRaw) => {
-    // 超级管理员放行
-    if (roles.includes('ROOT')) {
-        return true
-    }
    if (route.meta && route.meta.roles) {
        return roles.some(role => {
            if (route.meta?.roles !== undefined) {
@@ -66,7 +62,12 @@ const permissionModule: Module<PermissionState, RootStateTypes> = {
            return new Promise((resolve, reject) => {
                listRoutes().then(response => {
                    const asyncRoutes = response.data
-                    let accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
+                    let accessedRoutes
+                    if (roles.includes('ROOT')) { // 超级管理员拥有全部权限
+                        accessedRoutes = asyncRoutes || []
+                    } else {
+                        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
+                    }
                    commit('SET_ROUTES', accessedRoutes)
                    resolve(accessedRoutes)
                }).catch(error => {
@@ -74,7 +75,6 @@ const permissionModule: Module<PermissionState, RootStateTypes> = {
                })
            })
        }
-
    }
 }
 export default permissionModule;
--- a/src/views/system/dict/components/Dict.vue
+++ b/src/views/system/dict/components/Dict.vue
@@ -158,7 +158,7 @@ const state = reactive({
 })

 function handleQuery() {
-  emit('dictClick',{})
+  emit('dictClick',null)
  state.loading = true
  listDictWithPage(state.queryParams).then(response => {
    const {data, total} = response as any
--- a/src/views/system/dict/components/DictItem.vue
+++ b/src/views/system/dict/components/DictItem.vue
@@ -14,7 +14,7 @@
      <el-form-item prop="name">
        <el-input
            v-model="state.queryParams.name"
-            placeholder="字典项名称"
+            placeholder="数据项名称"
            clearable/>
      </el-form-item>
      <el-form-item>
@@ -32,8 +32,8 @@
        size="mini"
    >
      <el-table-column type="selection" min-width="5%"/>
-      <el-table-column label="字典项名称" prop="name"/>
-      <el-table-column label="字典项值" prop="value"/>
+      <el-table-column label="数据项名称" prop="name"/>
+      <el-table-column label="数据项值" prop="value"/>
      <el-table-column label="状态" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.status===1" type="success" size="mini">启用</el-tag>
@@ -105,7 +105,6 @@
          <el-input v-model="state.formData.remark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
-
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -125,17 +124,17 @@ import {
  deleteDictItem
 } from "@/api/system/dict";
 import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons';
-import {onMounted, computed, reactive, ref, unref, watch} from 'vue'
+import {onMounted, reactive, ref, unref, watch} from 'vue'
 import {ElForm, ElMessage, ElMessageBox} from "element-plus";

 const props = defineProps({
  dictCode: {
    type: String,
-    default: false
+    default: ''
  },
  dictName: {
    type: String,
-    default: false
+    default: ''
  }
 })

@@ -144,7 +143,6 @@ watch(() => props.dictCode, (newVal, oldVal) => {
  handleQuery()
 })

-
 const state = reactive({
  loading: true,
  // 选中ID数组
@@ -289,10 +287,6 @@ function handleDelete(row: any) {
  )
 }

-function handleRowClick(row: any) {
-  console.log("handleRowClick")
-}
-
 onMounted(() => {
  handleQuery()
 })
--- a/src/views/system/menu/components/Menu.vue
+++ b/src/views/system/menu/components/Menu.vue
@@ -1,18 +1,334 @@
 <template>
  <div>
-    <el-form>
-      123
+    <!-- 搜索表单 -->
+    <el-form
+        ref="queryForm"
+        size="mini"
+        :model="state.queryParams"
+        :inline="true"
+    >
+      <el-form-item>
+        <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-input
+            v-model="state.queryParams.name"
+            placeholder="菜单名称"
+            clearable
+            @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button :icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
    </el-form>

+    <!-- 数据表格 -->
+    <el-table
+        v-loading="state.loading"
+        :data="state.menuList"
+        row-key="id"
+        highlight-current-row
+        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+        @row-click="handleRowClick"
+        border
+        size="mini"
+    >
+      <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="130">
+        <template #default="scope">
+          <el-button
+              type="success"
+              :icon="Plus"
+              size="mini"
+              circle
+              plain
+              @click.stop="handleAdd(scope.row)"
+          />
+          <el-button
+              type="primary"
+              :icon="Edit"
+              size="mini"
+              circle
+              plain
+              @click.stop="handleUpdate(scope.row)"
+          />
+          <el-button
+              type="danger"
+              :icon="Delete"
+              size="mini"
+              circle
+              plain
+              @click.stop="handleDelete(scope.row)"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 弹窗表单 -->
+    <el-dialog
+        :title="state.dialog.title"
+        v-model="state.dialog.visible"
+        width="800px"
+    >
+      <el-form
+          ref="dataForm"
+          :model="state.formData"
+          :rules="state.rules"
+          label-width="80px">
+        <el-form-item label="父级菜单" prop="parentId">
+          <treeselect
+              placeholder="请选择父级菜单"
+              v-model="state.formData.parentId"
+              :multiple="false"
+              :options="state.menuOptions"
+              :defaultExpandLevel="1"
+          />
+        </el-form-item>
+
+        <el-form-item label="菜单名称" prop="name">
+          <el-input v-model="state.formData.name" placeholder="请输入菜单名称"/>
+        </el-form-item>
+
+        <el-form-item label="页面路径" prop="component">
+          <el-input
+              v-model="state.formData.component"
+              :readonly="state.formData.parentId==0?true:false"
+              placeholder="system/user/index"
+              style="width: 95%"
+          >
+            <template v-if="state.formData.parentId!=0" slot="prepend">src/views/</template>
+            <template v-if="state.formData.parentId!=0" slot="append">.vue</template>
+          </el-input>
+
+          <el-tooltip effect="dark"
+                      content="请输入页面路径，如果是父级菜单请填写 Layout 即可"
+                      placement="right">
+            <i class="el-icon-info" style="margin-left: 10px;color:darkseagreen"></i>
+          </el-tooltip>
+        </el-form-item>
+
+        <el-form-item label="菜单图标">
+          <el-input v-model="state.formData.icon" placeholder="请输入图标" maxlength="50"/>
+        </el-form-item>
+
+        <el-form-item label="状态">
+          <el-radio-group v-model="state.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="state.formData.sort" style="width: 100px" controls-position="right" :min="0"/>
+        </el-form-item>
+
+        <el-form-item label="跳转路径">
+          <el-input v-model="state.formData.redirect" placeholder="请输入跳转路径" maxlength="50"/>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
  </div>
 </template>

-<script>
-export default {
-  name: "Menu"
+<script setup lang="ts">
+import {listTableMenus, getMenuDetail, listTreeSelectMenus, addMenu, deleteMenus, updateMenu} from "@/api/system/menu";
+import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
+import {ElForm, ElMessage, ElMessageBox} from "element-plus";
+import {defineEmits, reactive, ref, unref, onMounted, getCurrentInstance} from "vue";
+
+import Treeselect from 'vue3-treeselect'
+import 'vue3-treeselect/dist/vue3-treeselect.css'
+import SvgIcon from '@/components/SvgIcon/index.vue';
+
+const emit = defineEmits(['menuClick'])
+
+const state = reactive({
+  loading: true,
+  // 选中ID数组
+  ids: [],
+  // 非单个禁用
+  single: true,
+  // 非多个禁用
+  multiple: true,
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    name: undefined
+  },
+  menuList: [],
+  total: 0,
+  dialog: {
+    title: '',
+    visible: false
+  },
+  formData: {
+    id: undefined,
+    parentId: 0,
+    name: undefined,
+    visible: 1,
+    icon: undefined,
+    sort: 1,
+    component: 'Layout',
+    path: undefined
+  },
+  rules: {
+    parentId: [
+      {required: true, message: '请选择顶级菜单', trigger: 'blur'}
+    ],
+    name: [
+      {required: true, message: '请输入菜单名称', trigger: 'blur'}
+    ],
+    component: [
+      {required: true, message: '请输入页面路径', trigger: 'blur'}
+    ]
+  },
+  menuOptions: [] as any[],
+  currentRow: undefined
+})
+
+function handleQuery() {
+  // 重置父组件
+  emit('menuClick', null)
+  state.loading = true
+  listTableMenus(state.queryParams).then(response => {
+    const {data, total} = response as any
+    state.menuList = data
+    state.total = total
+    state.loading = false
+  }).catch(() => {
+    state.loading = false
+  })
 }
+
+/**
+ * 加载菜单下拉树
+ */
+function loadTreeSelectMenuOptions() {
+  const menuOptions: any[] = []
+  listTreeSelectMenus().then(response => {
+    const menuOption = {id: 0, label: '无', children: response.data}
+    menuOptions.push(menuOption)
+    state.menuOptions = menuOptions
+  })
+}
+
+function resetQuery() {
+  state.queryParams = {
+    pageNum: 1,
+    pageSize: 10,
+    name: undefined
+  }
+  handleQuery()
+}
+
+function handleSelectionChange(selection: any) {
+  state.ids = selection.map((item: any) => item.id)
+  state.single = selection.length !== 1
+  state.multiple = !selection.length
+}
+
+function handleRowClick(row: any) {
+  emit('menuClick', row)
+}
+
+function handleAdd() {
+  resetForm()
+  loadTreeSelectMenuOptions()
+  state.dialog = {
+    title: '添加菜单',
+    visible: true,
+  }
+}
+
+function handleUpdate(row: any) {
+  resetForm()
+  loadTreeSelectMenuOptions()
+  state.dialog = {
+    title: '修改菜单',
+    visible: true
+  }
+  const id = row.id || state.ids
+  getMenuDetail(id).then(response => {
+    state.formData = response.data
+  })
+}
+
+const dataForm = ref(ElForm)
+
+function submitForm() {
+  const form = unref(dataForm)
+  form.validate((valid: any) => {
+    if (valid) {
+      if (state.formData.id) {
+        updateMenu(state.formData.id, state.formData).then(response => {
+          ElMessage.success('修改成功')
+          state.dialog.visible = false
+          handleQuery()
+        })
+      } else {
+        addMenu(state.formData).then(response => {
+          ElMessage.success('新增成功')
+          state.dialog.visible = false
+          handleQuery()
+        })
+      }
+    }
+  })
+}
+
+
+function resetForm() {
+  state.formData = {
+    id: undefined,
+    parentId: 0,
+    name: undefined,
+    visible: 1,
+    icon: undefined,
+    sort: 1,
+    component: 'Layout',
+    path: undefined
+  }
+}
+
+function cancel() {
+  state.dialog.visible = false
+}
+
+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('已取消删除')
+  )
+}
+
+onMounted(() => {
+  handleQuery()
+})
 </script>

 <style scoped>

-</style>
+</style>
--- a/src/views/system/menu/components/Perm.vue
+++ b/src/views/system/menu/components/Perm.vue
@@ -1,13 +1,329 @@
 <template>
+  <div>
+    <!-- 搜索表单 -->
+    <el-form
+        ref="queryForm"
+        size="mini"
+        :model="state.queryParams"
+        :inline="true"
+    >
+      <el-form-item>
+        <el-button type="success" :icon="Plus" :disabled="state.disabled" @click="handleAdd">新增</el-button>
+        <el-button type="danger" :icon="Delete" :disabled="state.multiple" @click="handleDelete">删除</el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-input
+            v-model="state.queryParams.name"
+            placeholder="权限名称"
+            clearable
+            @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button  :icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>

+    <!-- 数据表格 -->
+    <el-table
+        ref="dataTable"
+        :data="state.pageList"
+        v-loading="state.loading"
+        @selection-change="handleSelectionChange"
+        border
+        size="mini"
+    >
+      <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="100">
+        <template #default="scope">
+          <el-button
+
+              :icon="Edit"
+              size="mini"
+              circle
+              plain
+              @click="handleUpdate(scope.row)"
+          />
+          <el-button
+              type="danger"
+              :icon="Delete"
+              size="mini"
+              circle
+              plain
+              @click="handleDelete(scope.row)"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+        v-show="state.total>0"
+        :total="state.total"
+        :page="state.queryParams.pageNum"
+        :limit="state.queryParams.pageSize"
+        @pagination="handleQuery"
+    />
+
+    <!-- 表单弹窗 -->
+    <el-dialog
+        :title="state.dialog.title"
+        v-model="state.dialog.visible"
+        width="700px">
+      <el-form
+          ref="dataForm"
+          :model="state.formData"
+          :rules="state.rules"
+          label-width="120px">
+
+        <el-form-item label="权限名称" prop="name">
+          <el-input v-model="state.formData.name" placeholder="请输入权限名称"/>
+        </el-form-item>
+
+        <el-form-item label="URL权限标识" prop="urlPerm">
+          <el-input placeholder="/api/v1/users" v-model="state.urlPerm.requestPath" class="input-with-select">
+            <el-select
+                v-model="state.urlPerm.serviceName"
+                style="width: 130px;"
+                slot="prepend"
+                placeholder="所属服务"
+                clearable
+            >
+              <el-option v-for="item in state.microServiceOptions" :value="item.value" :label="item.name"/>
+            </el-select>
+            <el-select
+                v-model="state.urlPerm.requestMethod"
+                style="width: 120px;margin-left: 20px"
+                slot="prepend"
+                placeholder="请求方式"
+                clearable
+            >
+              <el-option
+                  v-for="item in state.requestMethodOptions"
+                  :value="item.value"
+                  :label="item.name"
+              />
+            </el-select>
+          </el-input>
+          <el-link  v-show="state.urlPerm.requestMethod">
+            {{ state.urlPerm.requestMethod }}:/{{ state.urlPerm.serviceName }}{{ state.urlPerm.requestPath }}
+          </el-link>
+        </el-form-item>
+
+        <el-form-item label="按钮权限标识" prop="btnPerm">
+          <el-input v-model="state.formData.btnPerm" placeholder="sys:user:add"/>
+        </el-form-item>
+
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button  @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>

-<script>
-export default {
-  name: "Perm"
+<script setup lang="ts">
+import {listPermsWithPage, getPermDetail, addPerm, updatePerm, deletePerms} from "@/api/system/perm"
+import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
+import {onMounted, reactive, ref, unref, getCurrentInstance} from 'vue'
+import {ElForm, ElMessage, ElMessageBox} from "element-plus"
+
+const props = defineProps({
+  menuId: {
+    type: Number,
+    default: null
+  },
+  menuName: {
+    type: String,
+    default: ''
+  }
+})
+
+const state = reactive({
+  loading: true,
+  // 选中ID数组
+  ids: [],
+  // 非单个禁用
+  single: true,
+  // 非多个禁用
+  multiple: true,
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    menuId: undefined,
+    name: undefined
+  },
+  pageList: [],
+  total: 0,
+  dialog: {
+    title: '',
+    visible: false
+  },
+  formData: {
+    id: undefined,
+    name: undefined,
+    urlPerm: undefined,
+    btnPerm: undefined
+  },
+  rules: {
+    name: [
+      {required: true, message: '请输入权限名称', trigger: 'blur'}
+    ],
+    perm: [
+      {required: true, message: '请输入权限标识', trigger: 'blur'}
+    ],
+    method: [
+      {required: true, message: '请选择请求方式', trigger: 'blur'}
+    ]
+  },
+  microServiceOptions: [],
+  requestMethodOptions: [],
+  menuName: undefined,
+  urlPerm: {
+    requestMethod: undefined,
+    serviceName: undefined,
+    requestPath: undefined
+  },
+})
+
+function handleQuery() {
+  if (state.queryParams.menuId) {
+    state.loading = true
+    listPermsWithPage(state.queryParams).then(response => {
+      const {data, total} = response as any
+      state.pageList = data
+      state.total = total
+      state.loading = false
+    })
+  } else {
+    state.loading = false
+    state.pageList = []
+    state.total = 0
+    state.queryParams.pageNum = 1
+  }
 }
+
+function resetQuery() {
+  state.queryParams = {
+    pageNum: 1,
+    pageSize: 10,
+    menuId: undefined,
+    name: undefined
+  }
+  handleQuery()
+}
+
+function handleSelectionChange(selection: any) {
+  state.ids = selection.map((item: any) => item.id)
+  state.single = selection.length !== 1
+  state.multiple = !selection.length
+}
+
+/**
+ * 字典数据准备
+ */
+function loadDictData() {
+  const {proxy}: any = getCurrentInstance();
+  proxy.$getDictItemsByCode('micro_service').then((response: any) => {
+    state.microServiceOptions = response.data
+  })
+
+  proxy.$getDictItemsByCode('request_method').then((response: any) => {
+    state.requestMethodOptions = response.data
+  })
+}
+
+function handleAdd() {
+  resetForm()
+  loadDictData()
+  state.dialog = {
+    title: '添加权限',
+    visible: true
+  }
+}
+
+function handleUpdate(row: any) {
+  resetForm()
+  loadDictData()
+  state.dialog = {
+    title: '修改权限',
+    visible: true
+  }
+  const id = row.id || state.ids
+  getPermDetail(id).then(response => {
+    state.formData = response.data
+  })
+}
+
+const dataForm = ref(ElForm)
+
+function submitForm() {
+  const form = unref(dataForm)
+  form.validate((valid: any) => {
+    if (valid) {
+      if (state.formData.id) {
+        updatePerm(state.formData.id, state.formData).then(response => {
+          ElMessage.success('修改成功')
+          state.dialog.visible = false
+          handleQuery()
+        })
+      } else {
+        addPerm(state.formData).then(response => {
+          ElMessage.success('新增成功')
+          state.dialog.visible = false
+          handleQuery()
+        })
+      }
+    }
+  })
+}
+
+function resetForm() {
+  state.formData = {
+    id: undefined,
+    name: undefined,
+    urlPerm: undefined,
+    btnPerm: undefined
+  }
+}
+
+function cancel() {
+  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>

 <style scoped>
+.perm-container {
+  margin-bottom: 20px;
+}
+</style>

-</style>
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -4,7 +4,8 @@
      <el-col :span="10" :xs="24">
        <el-card class="box-card" shadow="always">
          <template #header>
-            <svg-icon color="#333" icon-class="menu"/> 菜单列表
+            <svg-icon color="#333" icon-class="menu"/>
+            菜单列表
          </template>
          <menu-table @menuClick="handleMenuClick"/>
        </el-card>
@@ -13,10 +14,9 @@
        <el-card class="box-card" shadow="always">
          <template #header>
            <svg-icon color="#333" icon-class="perm"/>
-            <b v-if=" state.dictCode" style="margin-right: 5px">菜单</b>
-            <el-tag type="success" v-if=" state.dictCode"><b>{{ state.dictName }}</b></el-tag>
-            <b v-if=" state.dictCode" style="margin-left: 5px"></b>
-            <el-tag type="warning" v-if=" !state.dictCode" size="small">权限列表</el-tag>
+            <span style="margin:0 5px;">权限列表</span>
+            <el-tag type="success" v-if=" state.menuId">{{ state.menuName }}</el-tag>
+            <el-tag type="warning" v-else size="small">请点击左侧菜单列表选择</el-tag>
          </template>
          <perm-table :menuId="state.menuId" :menuName="state.menuName"/>
        </el-card>
@@ -38,8 +38,13 @@ const state = reactive({
 })

 const handleMenuClick = (menuRow: any) => {
-  state.menuId = menuRow.id
-  state.menuName = menuRow.name
+  if (menuRow) {
+    state.menuId = menuRow.id
+    state.menuName = menuRow.name
+  } else {
+    state.menuId = undefined
+    state.menuName = ''
+  }
 }

 </script>