fix Bug or add example

CHANGELOG.md

@@ -1,3 +1,15 @@
+# 1.4 (2021-07-21)
+### 🐛 Bug Fixes
+- vite降至2.3.6
+- 多标签页交互优化
+
+- ### ✨ Features
+- 新增 `TableAction` 组件
+- 新增 `菜单权限管理` 示例
+- 新增 `角色权限管理` 示例
+- 持续更新更多实用组件及示例，感谢Star
+
+
 # 1.3 (2021-07-19)
 ### 🐛 Bug Fixes
 - 修复多标签页左右切换按钮自适应展示

README.md

@@ -20,6 +20,9 @@ Naive Ui Admin 是一个免费开源的中后台模版，使用了最新的`vue3
 - [x] 异常页面
 - [x] 结果页面
 - [x] 设置页面
+- [x] 系统设置
+- [x] 菜单权限
+- [x] 角色权限
 
 ### 页面组件
 #### ProTable

mock/system/menu.ts

@@ -0,0 +1,93 @@
+import { resultSuccess } from '../_util'
+
+const menuList = (() => {
+    const result: any[] = [
+        {
+            label: 'Dashboard',
+            key: 'dashboard',
+            type: 1,
+            subtitle:'dashboard',
+            openType:1,
+            auth:'dashboard',
+            path:'/dashboard',
+            children: [
+                {
+                    label: '主控台',
+                    key: 'console',
+                    type: 1,
+                    subtitle:'console',
+                    openType:1,
+                    auth:'console',
+                    path:'/dashboard/console',
+                },
+                {
+                    label: '工作台',
+                    key: 'workplace',
+                    type: 1,
+                    subtitle:'workplace',
+                    openType:1,
+                    auth:'workplace',
+                    path:'/dashboard/workplace',
+                }
+            ]
+        },
+        {
+            label: '表单管理',
+            key: 'form',
+            type: 1,
+            subtitle:'form',
+            openType:1,
+            auth:'form',
+            path:'/form',
+            children: [
+                {
+                    label: '基础表单',
+                    key: 'basic-form',
+                    type: 1,
+                    subtitle:'basic-form',
+                    openType:1,
+                    auth:'basic-form',
+                    path:'/form/basic-form',
+                },
+                {
+                    label: '分步表单',
+                    key: 'step-form',
+                    type: 1,
+                    subtitle:'step-form',
+                    openType:1,
+                    auth:'step-form',
+                    path:'/form/step-form',
+                },
+                {
+                    label: '表单详情',
+                    key: 'detail',
+                    type: 1,
+                    subtitle:'detail',
+                    openType:1,
+                    auth:'detail',
+                    path:'/form/detail',
+                }
+            ]
+        }
+    ]
+
+    return result
+});
+
+
+export default [
+    {
+        url: '/api/menu/list',
+        timeout: 1000,
+        method: 'get',
+        response: () => {
+            const list = menuList()
+            return resultSuccess({
+                    list
+                }
+            );
+        },
+    }
+]
+
+

mock/system/role.ts

@@ -1,14 +1,26 @@
 import { resultSuccess, doCustomTimes } from '../_util'
 
+
+function getMenuKeys() {
+    let keys = ['dashboard', 'console', 'workplace', 'basic-form', 'step-form', 'detail']
+    let newKeys = []
+    doCustomTimes(parseInt(Math.random()*6), () => {
+        let key = keys[Math.floor(Math.random() * keys.length)];
+        newKeys.push(key)
+    })
+    return Array.from(new Set(newKeys));
+}
+
 const roleList = ((pageSize) => {
-    const result:any[] = []
-    doCustomTimes(pageSize,()=> {
+    const result: any[] = []
+    doCustomTimes(pageSize, () => {
         result.push({
             id: '@integer(10,100)',
             name: '@cname()',
-            explain:'@cname()',
-            isDefault:'@boolean()',
-            create_date: `@date('yyyy-MM-dd')`,
+            explain: '@cname()',
+            isDefault: '@boolean()',
+            menu_keys: getMenuKeys(),
+            create_date: `@date('yyyy-MM-dd hh:mm:ss')`,
             'status|1': ['normal', 'enable', 'disable'],
         });
     })
@@ -17,7 +29,6 @@ const roleList = ((pageSize) => {
 
 
 export default [
-    //表格数据列表
     {
         url: '/api/role/list',
         timeout: 1000,
@@ -26,8 +37,8 @@ export default [
             const { page = 1, pageSize = 10 } = query;
             const list = roleList(Number(pageSize))
             return resultSuccess({
-                    page:Number(page),
-                    pageSize:Number(pageSize),
+                    page: Number(page),
+                    pageSize: Number(pageSize),
                     pageCount: 60,
                     list
                 }

mock/user/user.ts

@@ -25,6 +25,14 @@ const adminInfo = {
     {
       roleName: '工作台',
       value: 'dashboard_workplace',
+    },
+    {
+      roleName: '基础列表',
+      value: 'basic_list',
+    },
+    {
+      roleName: '基础列表删除',
+      value: 'basic_list_delete',
     }
   ],
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui-admin",
-  "version": "1.3",
+  "version": "1.4",
   "author": {
     "name": "Ahjung",
     "email": "[email protected]",
@@ -80,9 +80,9 @@
     "stylelint-scss": "^3.19.0",
     "tailwindcss": "^2.2.4",
     "typescript": "^4.3.2",
-    "vite": "^2.4.2",
+    "vite": "2.3.6",
     "vite-plugin-html": "^2.0.7",
-    "vite-plugin-mock": "^2.9.1",
+    "vite-plugin-mock": "^2.9.3",
     "vite-plugin-style-import": "^1.0.1",
     "vue-eslint-parser": "^7.8.0"
   },

src/api/system/menu.ts

@@ -1,32 +1,23 @@
 import http from '@/utils/http/axios'
-import {
-    GetByUserIdParams,
-    GetMenuListByUserIdResult,
-    GetAuthCodeByUserIdResult
-} from './model/menuModel'
-
-enum Api {
-    adminMenus = '/menus',
-    GetBtnCodeListByUserId = '/getBtnCodeListByUserId'
-}
 
 /**
  * @description: 根据用户id获取用户菜单
  */
 export function adminMenus() {
-    return http.request<GetMenuListByUserIdResult>({
-        url: Api.adminMenus,
+    return http.request({
+        url: '/menus',
         method: 'GET'
     })
 }
 
+
 /**
- * 根据用户Id获取权限编码
+ * 获取tree菜单列表
  * @param params
  */
-export function getBtnCodeListByUserId(params: GetByUserIdParams) {
-    return http.request<GetAuthCodeByUserIdResult>({
-        url: Api.GetBtnCodeListByUserId,
+export function getMenuList(params) {
+    return http.request({
+        url: '/menu/list',
         method: 'GET',
         params
     })

src/components/Table/README.md

@@ -43,7 +43,11 @@ const columns = [
     },
     {
       title: '地址',
-      key: 'address'
+      key: 'address',
+      auth: ['amdin'], // 同时根据权限控制是否显示
+      ifShow: (row) => {
+        return true; // 根据业务控制是否显示
+      },
     },
     {
       title: '日期',

src/components/Table/index.ts

@@ -1 +1,5 @@
 export { default as BasicTable } from './src/Table.vue';
+export { default as TableAction } from './src/components/TableAction.vue';
+export * from './src/types/table';
+export * from './src/types/tableAction';
+