fix: update RoleList2

src/config/router.config.js

@@ -1,349 +1,340 @@
-import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/components/layouts'
-
-export const asyncRouterMap = [
-
-  {
-    path: '/',
-    name: 'index',
-    component: BasicLayout,
-    meta: { title: '首页' },
-    redirect: '/dashboard/workplace',
-    children: [
-      // dashboard
-      {
-        path: '/dashboard',
-        name: 'dashboard',
-        redirect: '/dashboard/workplace',
-        component: RouteView,
-        meta: { title: '仪表盘', icon: 'dashboard', permission: [ 'dashboard' ] },
-        children: [
-          {
-            path: '/dashboard/analysis',
-            name: 'Analysis',
-            component: () => import('@/views/dashboard/Analysis'),
-            meta: { title: '分析页', permission: [ 'dashboard' ] }
-          },
-          {
-            path: '/dashboard/monitor',
-            name: 'Monitor',
-            hidden: true,
-            component: () => import('@/views/dashboard/Monitor'),
-            meta: { title: '监控页', permission: [ 'dashboard' ] }
-          },
-          {
-            path: '/dashboard/workplace',
-            name: 'Workplace',
-            component: () => import('@/views/dashboard/Workplace'),
-            meta: { title: '工作台', permission: [ 'dashboard' ] }
-          }
-        ]
-      },
-
-      // forms
-      {
-        path: '/form',
-        redirect: '/form/basic-form',
-        component: PageView,
-        meta: { title: '表单页', icon: 'form', permission: [ 'form' ] },
-        children: [
-          {
-            path: '/form/base-form',
-            name: 'BaseForm',
-            component: () => import('@/views/form/BasicForm'),
-            meta: { title: '基础表单', permission: [ 'form' ] }
-          },
-          {
-            path: '/form/step-form',
-            name: 'StepForm',
-            component: () => import('@/views/form/stepForm/StepForm'),
-            meta: { title: '分步表单', permission: [ 'form' ] }
-          },
-          {
-            path: '/form/advanced-form',
-            name: 'AdvanceForm',
-            component: () => import('@/views/form/advancedForm/AdvancedForm'),
-            meta: { title: '高级表单', permission: [ 'form' ] }
-          }
-        ]
-      },
-
-      // list
-      {
-        path: '/list',
-        name: 'list',
-        component: PageView,
-        redirect: '/list/query-list',
-        meta: { title: '列表页', icon: 'table', permission: [ 'table' ] },
-        children: [
-          {
-            path: '/list/query-list',
-            name: 'QueryList',
-            component: () => import('@/views/list/TableList'),
-            meta: { title: '查询表格', permission: [ 'table' ] }
-          },
-          {
-            path: '/list/edit-table',
-            name: 'EditList',
-            component: () => import('@/views/list/TableInnerEditList'),
-            meta: { title: '内联编辑表格', permission: [ 'table' ] }
-          },
-          {
-            path: '/list/user-list',
-            name: 'UserList',
-            component: () => import('@/views/list/UserList'),
-            meta: { title: '用户列表', permission: [ 'table' ] }
-          },
-          {
-            path: '/list/role-list',
-            name: 'RoleList',
-            component: () => import('@/views/list/RoleList'),
-            meta: { title: '角色列表', permission: [ 'table' ] }
-          },
-          {
-            path: '/list/permission-list',
-            name: 'PermissionList',
-            component: () => import('@/views/list/PermissionList'),
-            meta: { title: '权限列表', permission: [ 'table' ] }
-          },
-          {
-            path: '/list/basic-list',
-            name: 'BasicList',
-            component: () => import('@/views/list/StandardList'),
-            meta: { title: '标准列表', permission: [ 'table' ] }
-          },
-          {
-            path: '/list/card',
-            name: 'CardList',
-            component: () => import('@/views/list/CardList'),
-            meta: { title: '卡片列表', permission: [ 'table' ] }
-          },
-          {
-            path: '/list/search',
-            name: 'SearchList',
-            component: () => import('@/views/list/search/SearchLayout'),
-            redirect: '/list/search/article',
-            meta: { title: '搜索列表', permission: [ 'table' ] },
-            children: [
-              {
-                path: '/list/search/article',
-                name: 'SearchArticles',
-                component: () => import('../views/list/TableList'),
-                meta: { title: '搜索列表（文章）', permission: [ 'table' ] }
-              },
-              {
-                path: '/list/search/project',
-                name: 'SearchProjects',
-                component: () => import('../views/list/TableList'),
-                meta: { title: '搜索列表（项目）', permission: [ 'table' ] }
-              },
-              {
-                path: '/list/search/application',
-                name: 'SearchApplications',
-                component: () => import('../views/list/TableList'),
-                meta: { title: '搜索列表（应用）', permission: [ 'table' ] }
-              },
-            ]
-          },
-        ]
-      },
-
-      // profile
-      {
-        path: '/profile',
-        name: 'profile',
-        component: RouteView,
-        redirect: '/profile/basic',
-        meta: { title: '详情页', icon: 'profile', permission: [ 'profile' ] },
-        children: [
-          {
-            path: '/profile/basic',
-            name: 'ProfileBasic',
-            component: () => import('@/views/profile/basic/Index'),
-            meta: { title: '基础详情页', permission: [ 'profile' ] }
-          },
-          {
-            path: '/profile/advanced',
-            name: 'ProfileAdvanced',
-            component: () => import('@/views/profile/advanced/Advanced'),
-            meta: { title: '高级详情页', permission: [ 'profile' ] }
-          }
-        ]
-      },
-      {
-        path: '/system',
-        name: 'system',
-        component: RouteView,
-        redirect: '/system/role',
-        meta: { title: '系统管理', icon: 'setting', permission: [ 'table' ] },
-        children: [
-          {
-            path: '/system/role',
-            name: 'SystemRole',
-            component: () => import('@/views/role/RoleList'),
-            meta: { title: '角色列表', permission: [ 'table' ]}
-          }
-        ]
-      },
-
-      // result
-      {
-        path: '/result',
-        name: 'result',
-        component: PageView,
-        redirect: '/result/success',
-        meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] },
-        children: [
-          {
-            path: '/result/success',
-            name: 'ResultSuccess',
-            component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
-            meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] }
-          },
-          {
-            path: '/result/fail',
-            name: 'ResultFail',
-            component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
-            meta: { title: '失败', hiddenHeaderContent: true, permission: [ 'result' ] }
-          }
-        ]
-      },
-
-      // Exception
-      {
-        path: '/exception',
-        name: 'exception',
-        component: RouteView,
-        redirect: '/exception/403',
-        meta: { title: '异常页', icon: 'warning', permission: [ 'exception' ] },
-        children: [
-          {
-            path: '/exception/403',
-            name: 'Exception403',
-            component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'),
-            meta: { title: '403', permission: [ 'exception' ] }
-          },
-          {
-            path: '/exception/404',
-            name: 'Exception404',
-            component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
-            meta: { title: '404', permission: [ 'exception' ] }
-          },
-          {
-            path: '/exception/500',
-            name: 'Exception500',
-            component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'),
-            meta: { title: '500', permission: [ 'exception' ] }
-          }
-        ]
-      },
-
-      // account
-      {
-        path: '/account',
-        component: RouteView,
-        name: 'account',
-        meta: { title: '个人页', icon: 'user', keepAlive: true, permission: [ 'user' ] },
-        children: [
-          {
-            path: '/account/center',
-            name: 'center',
-            component: () => import('@/views/account/center/Index'),
-            meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] }
-          },
-          {
-            path: '/account/settings',
-            name: 'settings',
-            component: () => import('@/views/account/settings/Index'),
-            meta: { title: '个人设置', hideHeader: true, keepAlive: true, permission: [ 'user' ]  },
-            redirect: '/account/settings/base',
-            alwaysShow: true,
-            children: [
-              {
-                path: '/account/settings/base',
-                name: 'BaseSettings',
-                component: () => import('@/views/account/settings/BaseSetting'),
-                meta: { title: '基本设置', hidden: true, keepAlive: true, permission: [ 'user' ]  }
-              },
-              {
-                path: '/account/settings/security',
-                name: 'SecuritySettings',
-                component: () => import('@/views/account/settings/Security'),
-                meta: { title: '安全设置', hidden: true, keepAlive: true, permission: [ 'user' ]  }
-              },
-              {
-                path: '/account/settings/custom',
-                name: 'CustomSettings',
-                component: () => import('@/views/account/settings/Custom'),
-                meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: [ 'user' ]  }
-              },
-              {
-                path: '/account/settings/binding',
-                name: 'BindingSettings',
-                component: () => import('@/views/account/settings/Binding'),
-                meta: { title: '账户绑定', hidden: true, keepAlive: true, permission: [ 'user' ]  }
-              },
-              {
-                path: '/account/settings/notification',
-                name: 'NotificationSettings',
-                component: () => import('@/views/account/settings/Notification'),
-                meta: { title: '新消息通知', hidden: true, keepAlive: true, permission: [ 'user' ]  }
-              },
-            ]
-          },
-        ]
-      }
-    ]
-  },
-  {
-    path: '*', redirect: '/404', hidden: true
-  }
-]
-
-/**
- * 基础路由
- * @type { *[] }
- */
-export const constantRouterMap = [
-  {
-    path: '/user',
-    component: UserLayout,
-    redirect: '/user/login',
-    hidden: true,
-    children: [
-      {
-        path: 'login',
-        name: 'login',
-        component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
-      },
-      {
-        path: 'register',
-        name: 'register',
-        component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register')
-      },
-      {
-        path: 'register-result',
-        name: 'registerResult',
-        component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult')
-      }
-    ]
-  },
-
-  {
-    path: '/test',
-    component: BlankLayout,
-    redirect: '/test/home',
-    children: [
-      {
-        path: 'home',
-        name: 'TestHome',
-        component: () => import('@/views/Home')
-      }
-    ]
-  },
-
-  {
-    path: '/404',
-    component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
-  },
-
-]
+import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/components/layouts'
+
+export const asyncRouterMap = [
+
+  {
+    path: '/',
+    name: 'index',
+    component: BasicLayout,
+    meta: { title: '首页' },
+    redirect: '/dashboard/workplace',
+    children: [
+      // dashboard
+      {
+        path: '/dashboard',
+        name: 'dashboard',
+        redirect: '/dashboard/workplace',
+        component: RouteView,
+        meta: { title: '仪表盘', icon: 'dashboard', permission: [ 'dashboard' ] },
+        children: [
+          {
+            path: '/dashboard/analysis',
+            name: 'Analysis',
+            component: () => import('@/views/dashboard/Analysis'),
+            meta: { title: '分析页', permission: [ 'dashboard' ] }
+          },
+          {
+            path: '/dashboard/monitor',
+            name: 'Monitor',
+            hidden: true,
+            component: () => import('@/views/dashboard/Monitor'),
+            meta: { title: '监控页', permission: [ 'dashboard' ] }
+          },
+          {
+            path: '/dashboard/workplace',
+            name: 'Workplace',
+            component: () => import('@/views/dashboard/Workplace'),
+            meta: { title: '工作台', permission: [ 'dashboard' ] }
+          }
+        ]
+      },
+
+      // forms
+      {
+        path: '/form',
+        redirect: '/form/basic-form',
+        component: PageView,
+        meta: { title: '表单页', icon: 'form', permission: [ 'form' ] },
+        children: [
+          {
+            path: '/form/base-form',
+            name: 'BaseForm',
+            component: () => import('@/views/form/BasicForm'),
+            meta: { title: '基础表单', permission: [ 'form' ] }
+          },
+          {
+            path: '/form/step-form',
+            name: 'StepForm',
+            component: () => import('@/views/form/stepForm/StepForm'),
+            meta: { title: '分步表单', permission: [ 'form' ] }
+          },
+          {
+            path: '/form/advanced-form',
+            name: 'AdvanceForm',
+            component: () => import('@/views/form/advancedForm/AdvancedForm'),
+            meta: { title: '高级表单', permission: [ 'form' ] }
+          }
+        ]
+      },
+
+      // list
+      {
+        path: '/list',
+        name: 'list',
+        component: PageView,
+        redirect: '/list/query-list',
+        meta: { title: '列表页', icon: 'table', permission: [ 'table' ] },
+        children: [
+          {
+            path: '/list/query-list',
+            name: 'QueryList',
+            component: () => import('@/views/list/TableList'),
+            meta: { title: '查询表格', permission: [ 'table' ] }
+          },
+          {
+            path: '/list/edit-table',
+            name: 'EditList',
+            component: () => import('@/views/list/TableInnerEditList'),
+            meta: { title: '内联编辑表格', permission: [ 'table' ] }
+          },
+          {
+            path: '/list/user-list',
+            name: 'UserList',
+            component: () => import('@/views/list/UserList'),
+            meta: { title: '用户列表', permission: [ 'table' ] }
+          },
+          {
+            path: '/list/role-list',
+            name: 'RoleList',
+            component: () => import('@/views/list/RoleList'),
+            meta: { title: '角色列表', permission: [ 'table' ] }
+          },
+          {
+            path: '/list/system-role',
+            name: 'SystemRole',
+            component: () => import('@/views/role/RoleList'),
+            meta: { title: '角色列表2', permission: [ 'table' ]}
+          },
+          {
+            path: '/list/permission-list',
+            name: 'PermissionList',
+            component: () => import('@/views/list/PermissionList'),
+            meta: { title: '权限列表', permission: [ 'table' ] }
+          },
+          {
+            path: '/list/basic-list',
+            name: 'BasicList',
+            component: () => import('@/views/list/StandardList'),
+            meta: { title: '标准列表', permission: [ 'table' ] }
+          },
+          {
+            path: '/list/card',
+            name: 'CardList',
+            component: () => import('@/views/list/CardList'),
+            meta: { title: '卡片列表', permission: [ 'table' ] }
+          },
+          {
+            path: '/list/search',
+            name: 'SearchList',
+            component: () => import('@/views/list/search/SearchLayout'),
+            redirect: '/list/search/article',
+            meta: { title: '搜索列表', permission: [ 'table' ] },
+            children: [
+              {
+                path: '/list/search/article',
+                name: 'SearchArticles',
+                component: () => import('../views/list/TableList'),
+                meta: { title: '搜索列表（文章）', permission: [ 'table' ] }
+              },
+              {
+                path: '/list/search/project',
+                name: 'SearchProjects',
+                component: () => import('../views/list/TableList'),
+                meta: { title: '搜索列表（项目）', permission: [ 'table' ] }
+              },
+              {
+                path: '/list/search/application',
+                name: 'SearchApplications',
+                component: () => import('../views/list/TableList'),
+                meta: { title: '搜索列表（应用）', permission: [ 'table' ] }
+              },
+            ]
+          },
+        ]
+      },
+
+      // profile
+      {
+        path: '/profile',
+        name: 'profile',
+        component: RouteView,
+        redirect: '/profile/basic',
+        meta: { title: '详情页', icon: 'profile', permission: [ 'profile' ] },
+        children: [
+          {
+            path: '/profile/basic',
+            name: 'ProfileBasic',
+            component: () => import('@/views/profile/basic/Index'),
+            meta: { title: '基础详情页', permission: [ 'profile' ] }
+          },
+          {
+            path: '/profile/advanced',
+            name: 'ProfileAdvanced',
+            component: () => import('@/views/profile/advanced/Advanced'),
+            meta: { title: '高级详情页', permission: [ 'profile' ] }
+          }
+        ]
+      },
+
+      // result
+      {
+        path: '/result',
+        name: 'result',
+        component: PageView,
+        redirect: '/result/success',
+        meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] },
+        children: [
+          {
+            path: '/result/success',
+            name: 'ResultSuccess',
+            component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
+            meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] }
+          },
+          {
+            path: '/result/fail',
+            name: 'ResultFail',
+            component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
+            meta: { title: '失败', hiddenHeaderContent: true, permission: [ 'result' ] }
+          }
+        ]
+      },
+
+      // Exception
+      {
+        path: '/exception',
+        name: 'exception',
+        component: RouteView,
+        redirect: '/exception/403',
+        meta: { title: '异常页', icon: 'warning', permission: [ 'exception' ] },
+        children: [
+          {
+            path: '/exception/403',
+            name: 'Exception403',
+            component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'),
+            meta: { title: '403', permission: [ 'exception' ] }
+          },
+          {
+            path: '/exception/404',
+            name: 'Exception404',
+            component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
+            meta: { title: '404', permission: [ 'exception' ] }
+          },
+          {
+            path: '/exception/500',
+            name: 'Exception500',
+            component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'),
+            meta: { title: '500', permission: [ 'exception' ] }
+          }
+        ]
+      },
+
+      // account
+      {
+        path: '/account',
+        component: RouteView,
+        name: 'account',
+        meta: { title: '个人页', icon: 'user', keepAlive: true, permission: [ 'user' ] },
+        children: [
+          {
+            path: '/account/center',
+            name: 'center',
+            component: () => import('@/views/account/center/Index'),
+            meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] }
+          },
+          {
+            path: '/account/settings',
+            name: 'settings',
+            component: () => import('@/views/account/settings/Index'),
+            meta: { title: '个人设置', hideHeader: true, keepAlive: true, permission: [ 'user' ]  },
+            redirect: '/account/settings/base',
+            alwaysShow: true,
+            children: [
+              {
+                path: '/account/settings/base',
+                name: 'BaseSettings',
+                component: () => import('@/views/account/settings/BaseSetting'),
+                meta: { title: '基本设置', hidden: true, keepAlive: true, permission: [ 'user' ]  }
+              },
+              {
+                path: '/account/settings/security',
+                name: 'SecuritySettings',
+                component: () => import('@/views/account/settings/Security'),
+                meta: { title: '安全设置', hidden: true, keepAlive: true, permission: [ 'user' ]  }
+              },
+              {
+                path: '/account/settings/custom',
+                name: 'CustomSettings',
+                component: () => import('@/views/account/settings/Custom'),
+                meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: [ 'user' ]  }
+              },
+              {
+                path: '/account/settings/binding',
+                name: 'BindingSettings',
+                component: () => import('@/views/account/settings/Binding'),
+                meta: { title: '账户绑定', hidden: true, keepAlive: true, permission: [ 'user' ]  }
+              },
+              {
+                path: '/account/settings/notification',
+                name: 'NotificationSettings',
+                component: () => import('@/views/account/settings/Notification'),
+                meta: { title: '新消息通知', hidden: true, keepAlive: true, permission: [ 'user' ]  }
+              },
+            ]
+          },
+        ]
+      }
+    ]
+  },
+  {
+    path: '*', redirect: '/404', hidden: true
+  }
+]
+
+/**
+ * 基础路由
+ * @type { *[] }
+ */
+export const constantRouterMap = [
+  {
+    path: '/user',
+    component: UserLayout,
+    redirect: '/user/login',
+    hidden: true,
+    children: [
+      {
+        path: 'login',
+        name: 'login',
+        component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
+      },
+      {
+        path: 'register',
+        name: 'register',
+        component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register')
+      },
+      {
+        path: 'register-result',
+        name: 'registerResult',
+        component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult')
+      }
+    ]
+  },
+
+  {
+    path: '/test',
+    component: BlankLayout,
+    redirect: '/test/home',
+    children: [
+      {
+        path: 'home',
+        name: 'TestHome',
+        component: () => import('@/views/Home')
+      }
+    ]
+  },
+
+  {
+    path: '/404',
+    component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
+  },
+
+]

src/utils/helper/permission.js

@@ -8,46 +8,46 @@ const PERMISSION_ENUM = {
   'disable': { key: 'disable', label: '禁用' },
   'import': { key: 'import', label: '导入' },
   'export': { key: 'import', label: '导入' },
-};
+}
 
 function plugin(Vue) {
 
   if (plugin.installed) {
-    return;
+    return
   }
 
   !Vue.prototype.$auth && Object.defineProperties(Vue.prototype, {
     $auth: {
       get() {
-        const _this = this;
+        const _this = this
         return (permissions) => {
-          let [permission, action] = permissions.split('.');
-          const permissionList = _this.$store.getters.roles.permissions;
+          const [permission, action] = permissions.split('.')
+          const permissionList = _this.$store.getters.roles.permissions
           permissionList.find((val) => {
             return val.permissionId === permission
           }).actionList.findIndex((val) => {
             return val === action
-          });
+          })
           return false
         }
       }
     }
-  });
+  })
 
   !Vue.prototype.$enum && Object.defineProperties(Vue.prototype, {
     $enum: {
       get() {
         // const _this = this;
         return (val) => {
-          let result = PERMISSION_ENUM;
+          let result = PERMISSION_ENUM
           val && val.split('.').forEach(v => {
             result = result && result[v] || null
-          });
+          })
           return result
         }
       }
     }
-  });
+  })
 }
 
 export default plugin

src/views/role/RoleList.vue

@@ -1,193 +1,161 @@
-<template>
-  <page-layout title="角色管理">
-    <a-card :bordered="false" :style="{ height: '100%' }">
-      <!--<a-tabs defaultActiveKey="1" tabPosition="left" size="large" :style="{ height: '400px'}" :tabBarStyle="{ textAlign: 'left' }" @prevClick="callback" @nextClick="callback">
-        <a-tab-pane tab="管理员" key="1">Content of tab 1</a-tab-pane>
-        <a-tab-pane tab="销售组长" key="2">Content of tab 2</a-tab-pane>
-        <a-tab-pane tab="销售总负责人" key="3">Content of tab 3</a-tab-pane>
-        <a-tab-pane tab="总经理" key="4">Content of tab 4</a-tab-pane>
-        <a-tab-pane tab="普通销售" key="5">Content of tab 5</a-tab-pane>
-        <a-tab-pane tab="客服" key="6">Content of tab 6</a-tab-pane>
-        <a-tab-pane tab="会员" key="7">Content of tab 7</a-tab-pane>
-        <a-tab-pane tab="增加角色" key="-1">Content of tab 7</a-tab-pane>
-      </a-tabs>-->
-
-      <a-row :gutter="24">
-        <a-col :md="4">
-          <a-list itemLayout="vertical" :dataSource="roles">
-            <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
-              <a-list-item-meta :style="{ marginBottom: '0' }">
-                <span slot="description" style="text-align: center; display: block">{{ item.describe }}</span>
-                <a slot="title" style="text-align: center; display: block" @click="edit(item)">{{ item.name }}</a>
-              </a-list-item-meta>
-            </a-list-item>
-          </a-list>
-        </a-col>
-        <a-col :md="20">
-          <a-row v-if="mdl.id">
-            <a-col :span="5"><h3 style="text-align: right">角色：</h3></a-col>
-            <a-col :span="19"><h3>{{ mdl.name }}</h3></a-col>
-          </a-row>
-          <a-form :form="form">
-            <a-form-item
-              label="唯一键"
-              :labelCol="{ span: 5 }"
-              :wrapperCol="{ span: 18 }"
-            >
-              <a-input v-decorator="[ 'id', {rules: [{ required: true, message: 'Please input unique key!' }]} ]" placeholder="请填写唯一键" />
-            </a-form-item>
-
-            <a-form-item
-              label="角色名称"
-              :labelCol="{ span: 5 }"
-              :wrapperCol="{ span: 18 }"
-            >
-              <a-input v-decorator="[ 'name', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
-            </a-form-item>
-
-            <a-form-item
-              label="状态"
-              :labelCol="{ span: 5 }"
-              :wrapperCol="{ span: 18 }"
-            >
-              <a-select v-decorator="[ 'status', {rules: []} ]">
-                <a-select-option :value="1">正常</a-select-option>
-                <a-select-option :value="2">禁用</a-select-option>
-              </a-select>
-            </a-form-item>
-
-            <a-form-item
-              label="备注说明"
-              :labelCol="{ span: 5 }"
-              :wrapperCol="{ span: 18 }"
-            >
-              <a-textarea :row="3" v-decorator="[ 'describe', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
-            </a-form-item>
-
-            <a-form-item
-              label="拥有权限"
-              :labelCol="{ span: 5 }"
-              :wrapperCol="{ span: 18 }"
-            >
-              <a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
-                <a-col :span="4">
-                  {{ permission.name }}：
-                </a-col>
-                <a-col :span="20">
-                  <a-checkbox
-                    v-if="permission.actionsOptions.length > 0"
-                    :indeterminate="permission.indeterminate"
-                    :checked="permission.checkedAll"
-                    @change="onChangeCheckAll($event, permission)">
-                    全选
-                  </a-checkbox>
-                  <a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected" @change="onChangeCheck(permission)" />
-                </a-col>
-              </a-row>
-            </a-form-item>
-
-          </a-form>
-        </a-col>
-      </a-row>
-    </a-card>
-  </page-layout>
-</template>
-
-<script>
-  import PageLayout from '@/components/page/PageLayout'
-  import { getRoleList, getPermissions } from "@/api/manage"
-  import { actionToObject } from '@/utils/permissions'
-  import pick from 'lodash.pick'
-
-  export default {
-    name: "RoleList",
-    components: {
-      PageLayout
-    },
-    data () {
-      return {
-        form: this.$form.createForm(this),
-        mdl: {},
-
-        roles: [],
-        permissions: []
-      }
-    },
-    created () {
-      getRoleList().then((res) => {
-        this.roles = res.result.data
-        this.roles.push({
-          id: '-1',
-          name: '新增角色',
-          describe: '新增一个角色'
-        })
-        console.log('this.roles', this.roles)
-      })
-      this.loadPermissions()
-    },
-    methods: {
-      callback (val) {
-        console.log(val)
-      },
-
-      add () {
-        this.edit({ id: 0 })
-      },
-
-      edit (record) {
-        this.mdl = Object.assign({}, record)
-        // 有权限表，处理勾选
-        if (this.mdl.permissions && this.permissions) {
-          // 先处理要勾选的权限结构
-          const permissionsAction = {}
-          this.mdl.permissions.forEach(permission => {
-            permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
-          })
-          // 把权限表遍历一遍，设定要勾选的权限 action
-          this.permissions.forEach(permission => {
-            permission.selected = permissionsAction[permission.id]
-          })
-        }
-
-        this.$nextTick(() => {
-          this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
-        })
-        console.log('this.mdl', this.mdl)
-      },
-
-      onChangeCheck (permission) {
-        permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
-        permission.checkedAll = permission.selected.length === permission.actionsOptions.length
-      },
-      onChangeCheckAll (e, permission) {
-        Object.assign(permission, {
-          selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
-          indeterminate: false,
-          checkedAll: e.target.checked
-        })
-      },
-      loadPermissions () {
-        getPermissions().then(res => {
-          let result = res.result
-          this.permissions = result.map(permission => {
-            const options = actionToObject(permission.actionData)
-            permission.checkedAll = false
-            permission.selected = []
-            permission.indeterminate = false
-            permission.actionsOptions = options.map(option => {
-              return {
-                label: option.describe,
-                value: option.action
-              }
-            })
-            return permission
-          })
-        })
-      }
-    },
-  }
-</script>
-
-<style scoped>
-
+<template>
+  <a-card :bordered="false" :style="{ height: '100%' }">
+    <a-row :gutter="24">
+      <a-col :md="4">
+        <a-list itemLayout="vertical" :dataSource="roles">
+          <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
+            <a-list-item-meta :style="{ marginBottom: '0' }">
+              <span slot="description" style="text-align: center; display: block">{{ item.describe }}</span>
+              <a slot="title" style="text-align: center; display: block" @click="edit(item)">{{ item.name }}</a>
+            </a-list-item-meta>
+          </a-list-item>
+        </a-list>
+      </a-col>
+      <a-col :md="20">
+        <div style="max-width: 800px">
+          <a-divider v-if="isMobile()" />
+          <div v-if="mdl.id">
+            <h3>角色：{{ mdl.name }}</h3>
+          </div>
+          <a-form :form="form" :layout="isMobile() ? 'vertical' : 'horizontal'">
+            <a-form-item label="唯一键">
+              <a-input v-decorator="[ 'id', {rules: [{ required: true, message: 'Please input unique key!' }]} ]" placeholder="请填写唯一键" />
+            </a-form-item>
+
+            <a-form-item label="角色名称">
+              <a-input v-decorator="[ 'name', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
+            </a-form-item>
+
+            <a-form-item label="状态">
+              <a-select v-decorator="[ 'status', {rules: []} ]">
+                <a-select-option :value="1">正常</a-select-option>
+                <a-select-option :value="2">禁用</a-select-option>
+              </a-select>
+            </a-form-item>
+
+            <a-form-item label="备注说明">
+              <a-textarea :row="3" v-decorator="[ 'describe', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
+            </a-form-item>
+
+            <a-form-item label="拥有权限">
+              <a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
+                <a-col :xl="4" :lg="24">
+                  {{ permission.name }}：
+                </a-col>
+                <a-col :xl="20" :lg="24">
+                  <a-checkbox
+                    v-if="permission.actionsOptions.length > 0"
+                    :indeterminate="permission.indeterminate"
+                    :checked="permission.checkedAll"
+                    @change="onChangeCheckAll($event, permission)">
+                    全选
+                  </a-checkbox>
+                  <a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected" @change="onChangeCheck(permission)" />
+                </a-col>
+              </a-row>
+            </a-form-item>
+
+          </a-form>
+        </div>
+      </a-col>
+    </a-row>
+  </a-card>
+</template>
+
+<script>
+  import { getRoleList, getPermissions } from '@/api/manage'
+  import { mixinDevice } from '@/utils/mixin'
+  import { actionToObject } from '@/utils/permissions'
+  import pick from 'lodash.pick'
+
+  export default {
+    name: 'RoleList',
+    mixins: [mixinDevice],
+    components: {},
+    data () {
+      return {
+        form: this.$form.createForm(this),
+        mdl: {},
+
+        roles: [],
+        permissions: []
+      }
+    },
+    created () {
+      getRoleList().then((res) => {
+        this.roles = res.result.data
+        this.roles.push({
+          id: '-1',
+          name: '新增角色',
+          describe: '新增一个角色'
+        })
+        console.log('this.roles', this.roles)
+      })
+      this.loadPermissions()
+    },
+    methods: {
+      callback (val) {
+        console.log(val)
+      },
+
+      add () {
+        this.edit({ id: 0 })
+      },
+
+      edit (record) {
+        this.mdl = Object.assign({}, record)
+        // 有权限表，处理勾选
+        if (this.mdl.permissions && this.permissions) {
+          // 先处理要勾选的权限结构
+          const permissionsAction = {}
+          this.mdl.permissions.forEach(permission => {
+            permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
+          })
+          // 把权限表遍历一遍，设定要勾选的权限 action
+          this.permissions.forEach(permission => {
+            permission.selected = permissionsAction[permission.id]
+          })
+        }
+
+        this.$nextTick(() => {
+          this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
+        })
+        console.log('this.mdl', this.mdl)
+      },
+
+      onChangeCheck (permission) {
+        permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
+        permission.checkedAll = permission.selected.length === permission.actionsOptions.length
+      },
+      onChangeCheckAll (e, permission) {
+        Object.assign(permission, {
+          selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
+          indeterminate: false,
+          checkedAll: e.target.checked
+        })
+      },
+      loadPermissions () {
+        getPermissions().then(res => {
+          const result = res.result
+          this.permissions = result.map(permission => {
+            const options = actionToObject(permission.actionData)
+            permission.checkedAll = false
+            permission.selected = []
+            permission.indeterminate = false
+            permission.actionsOptions = options.map(option => {
+              return {
+                label: option.describe,
+                value: option.action
+              }
+            })
+            return permission
+          })
+        })
+      }
+    },
+  }
+</script>
+
+<style scoped>
+
 </style>