Skip to content

A
ant-design-pro-vue
Commit 83f779ac by Sendya
Options

fix: update RoleList2

parent d860f308
Showing with 512 additions and 551 deletions
src/config/router.config.js
import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/components/layouts' import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/components/layouts'
export const asyncRouterMap = [ export const asyncRouterMap = [
{ {
path: '/', path: '/',
name: 'index', name: 'index',
component: BasicLayout, component: BasicLayout,
meta: { title: '首页' }, meta: { title: '首页' },
redirect: '/dashboard/workplace', redirect: '/dashboard/workplace',
children: [ children: [
// dashboard // dashboard
{ {
path: '/dashboard', path: '/dashboard',
name: 'dashboard', name: 'dashboard',
redirect: '/dashboard/workplace', redirect: '/dashboard/workplace',
component: RouteView, component: RouteView,
meta: { title: '仪表盘', icon: 'dashboard', permission: [ 'dashboard' ] }, meta: { title: '仪表盘', icon: 'dashboard', permission: [ 'dashboard' ] },
children: [ children: [
{ {
path: '/dashboard/analysis', path: '/dashboard/analysis',
name: 'Analysis', name: 'Analysis',
component: () => import('@/views/dashboard/Analysis'), component: () => import('@/views/dashboard/Analysis'),
meta: { title: '分析页', permission: [ 'dashboard' ] } meta: { title: '分析页', permission: [ 'dashboard' ] }
}, },
{ {
path: '/dashboard/monitor', path: '/dashboard/monitor',
name: 'Monitor', name: 'Monitor',
hidden: true, hidden: true,
component: () => import('@/views/dashboard/Monitor'), component: () => import('@/views/dashboard/Monitor'),
meta: { title: '监控页', permission: [ 'dashboard' ] } meta: { title: '监控页', permission: [ 'dashboard' ] }
}, },
{ {
path: '/dashboard/workplace', path: '/dashboard/workplace',
name: 'Workplace', name: 'Workplace',
component: () => import('@/views/dashboard/Workplace'), component: () => import('@/views/dashboard/Workplace'),
meta: { title: '工作台', permission: [ 'dashboard' ] } meta: { title: '工作台', permission: [ 'dashboard' ] }
} }
] ]
}, },
// forms // forms
{ {
path: '/form', path: '/form',
redirect: '/form/basic-form', redirect: '/form/basic-form',
component: PageView, component: PageView,
meta: { title: '表单页', icon: 'form', permission: [ 'form' ] }, meta: { title: '表单页', icon: 'form', permission: [ 'form' ] },
children: [ children: [
{ {
path: '/form/base-form', path: '/form/base-form',
name: 'BaseForm', name: 'BaseForm',
component: () => import('@/views/form/BasicForm'), component: () => import('@/views/form/BasicForm'),
meta: { title: '基础表单', permission: [ 'form' ] } meta: { title: '基础表单', permission: [ 'form' ] }
}, },
{ {
path: '/form/step-form', path: '/form/step-form',
name: 'StepForm', name: 'StepForm',
component: () => import('@/views/form/stepForm/StepForm'), component: () => import('@/views/form/stepForm/StepForm'),
meta: { title: '分步表单', permission: [ 'form' ] } meta: { title: '分步表单', permission: [ 'form' ] }
}, },
{ {
path: '/form/advanced-form', path: '/form/advanced-form',
name: 'AdvanceForm', name: 'AdvanceForm',
component: () => import('@/views/form/advancedForm/AdvancedForm'), component: () => import('@/views/form/advancedForm/AdvancedForm'),
meta: { title: '高级表单', permission: [ 'form' ] } meta: { title: '高级表单', permission: [ 'form' ] }
} }
] ]
}, },
// list // list
{ {
path: '/list', path: '/list',
name: 'list', name: 'list',
component: PageView, component: PageView,
redirect: '/list/query-list', redirect: '/list/query-list',
meta: { title: '列表页', icon: 'table', permission: [ 'table' ] }, meta: { title: '列表页', icon: 'table', permission: [ 'table' ] },
children: [ children: [
{ {
path: '/list/query-list', path: '/list/query-list',
name: 'QueryList', name: 'QueryList',
component: () => import('@/views/list/TableList'), component: () => import('@/views/list/TableList'),
meta: { title: '查询表格', permission: [ 'table' ] } meta: { title: '查询表格', permission: [ 'table' ] }
}, },
{ {
path: '/list/edit-table', path: '/list/edit-table',
name: 'EditList', name: 'EditList',
component: () => import('@/views/list/TableInnerEditList'), component: () => import('@/views/list/TableInnerEditList'),
meta: { title: '内联编辑表格', permission: [ 'table' ] } meta: { title: '内联编辑表格', permission: [ 'table' ] }
}, },
{ {
path: '/list/user-list', path: '/list/user-list',
name: 'UserList', name: 'UserList',
component: () => import('@/views/list/UserList'), component: () => import('@/views/list/UserList'),
meta: { title: '用户列表', permission: [ 'table' ] } meta: { title: '用户列表', permission: [ 'table' ] }
}, },
{ {
path: '/list/role-list', path: '/list/role-list',
name: 'RoleList', name: 'RoleList',
component: () => import('@/views/list/RoleList'), component: () => import('@/views/list/RoleList'),
meta: { title: '角色列表', permission: [ 'table' ] } meta: { title: '角色列表', permission: [ 'table' ] }
}, },
{ {
path: '/list/permission-list', path: '/list/system-role',
name: 'PermissionList', name: 'SystemRole',
component: () => import('@/views/list/PermissionList'), component: () => import('@/views/role/RoleList'),
meta: { title: '权限列表', permission: [ 'table' ] } meta: { title: '角色列表2', permission: [ 'table' ]}
}, },
{ {
path: '/list/basic-list', path: '/list/permission-list',
name: 'BasicList', name: 'PermissionList',
component: () => import('@/views/list/StandardList'), component: () => import('@/views/list/PermissionList'),
meta: { title: '标准列表', permission: [ 'table' ] } meta: { title: '权限列表', permission: [ 'table' ] }
}, },
{ {
path: '/list/card', path: '/list/basic-list',
name: 'CardList', name: 'BasicList',
component: () => import('@/views/list/CardList'), component: () => import('@/views/list/StandardList'),
meta: { title: '卡片列表', permission: [ 'table' ] } meta: { title: '标准列表', permission: [ 'table' ] }
}, },
{ {
path: '/list/search', path: '/list/card',
name: 'SearchList', name: 'CardList',
component: () => import('@/views/list/search/SearchLayout'), component: () => import('@/views/list/CardList'),
redirect: '/list/search/article', meta: { title: '卡片列表', permission: [ 'table' ] }
meta: { title: '搜索列表', permission: [ 'table' ] }, },
children: [ {
{ path: '/list/search',
path: '/list/search/article', name: 'SearchList',
name: 'SearchArticles', component: () => import('@/views/list/search/SearchLayout'),
component: () => import('../views/list/TableList'), redirect: '/list/search/article',
meta: { title: '搜索列表（文章）', permission: [ 'table' ] } meta: { title: '搜索列表', permission: [ 'table' ] },
}, children: [
{ {
path: '/list/search/project', path: '/list/search/article',
name: 'SearchProjects', name: 'SearchArticles',
component: () => import('../views/list/TableList'), component: () => import('../views/list/TableList'),
meta: { title: '搜索列表（项目）', permission: [ 'table' ] } meta: { title: '搜索列表（文章）', permission: [ 'table' ] }
}, },
{ {
path: '/list/search/application', path: '/list/search/project',
name: 'SearchApplications', name: 'SearchProjects',
component: () => import('../views/list/TableList'), component: () => import('../views/list/TableList'),
meta: { title: '搜索列表（应用）', permission: [ 'table' ] } 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' ] }, // profile
children: [ {
{ path: '/profile',
path: '/profile/basic', name: 'profile',
name: 'ProfileBasic', component: RouteView,
component: () => import('@/views/profile/basic/Index'), redirect: '/profile/basic',
meta: { title: '基础详情页', permission: [ 'profile' ] } meta: { title: '详情页', icon: 'profile', permission: [ 'profile' ] },
}, children: [
{ {
path: '/profile/advanced', path: '/profile/basic',
name: 'ProfileAdvanced', name: 'ProfileBasic',
component: () => import('@/views/profile/advanced/Advanced'), component: () => import('@/views/profile/basic/Index'),
meta: { title: '高级详情页', permission: [ 'profile' ] } meta: { title: '基础详情页', permission: [ 'profile' ] }
} },
] {
}, path: '/profile/advanced',
{ name: 'ProfileAdvanced',
path: '/system', component: () => import('@/views/profile/advanced/Advanced'),
name: 'system', meta: { title: '高级详情页', permission: [ 'profile' ] }
component: RouteView, }
redirect: '/system/role', ]
meta: { title: '系统管理', icon: 'setting', permission: [ 'table' ] }, },
children: [
{ // result
path: '/system/role', {
name: 'SystemRole', path: '/result',
component: () => import('@/views/role/RoleList'), name: 'result',
meta: { title: '角色列表', permission: [ 'table' ]} component: PageView,
} redirect: '/result/success',
] meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] },
}, children: [
{
// result path: '/result/success',
{ name: 'ResultSuccess',
path: '/result', component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
name: 'result', meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] }
component: PageView, },
redirect: '/result/success', {
meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] }, path: '/result/fail',
children: [ name: 'ResultFail',
{ component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
path: '/result/success', meta: { title: '失败', hiddenHeaderContent: true, permission: [ 'result' ] }
name: 'ResultSuccess', }
component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'), ]
meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] } },
},
{ // Exception
path: '/result/fail', {
name: 'ResultFail', path: '/exception',
component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'), name: 'exception',
meta: { title: '失败', hiddenHeaderContent: true, permission: [ 'result' ] } component: RouteView,
} redirect: '/exception/403',
] meta: { title: '异常页', icon: 'warning', permission: [ 'exception' ] },
}, children: [
{
// Exception path: '/exception/403',
{ name: 'Exception403',
path: '/exception', component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'),
name: 'exception', meta: { title: '403', permission: [ 'exception' ] }
component: RouteView, },
redirect: '/exception/403', {
meta: { title: '异常页', icon: 'warning', permission: [ 'exception' ] }, path: '/exception/404',
children: [ name: 'Exception404',
{ component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
path: '/exception/403', meta: { title: '404', permission: [ 'exception' ] }
name: 'Exception403', },
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'), {
meta: { title: '403', permission: [ 'exception' ] } path: '/exception/500',
}, name: 'Exception500',
{ component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'),
path: '/exception/404', meta: { title: '500', permission: [ 'exception' ] }
name: 'Exception404', }
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'), ]
meta: { title: '404', permission: [ 'exception' ] } },
},
{ // account
path: '/exception/500', {
name: 'Exception500', path: '/account',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'), component: RouteView,
meta: { title: '500', permission: [ 'exception' ] } name: 'account',
} meta: { title: '个人页', icon: 'user', keepAlive: true, permission: [ 'user' ] },
] children: [
}, {
path: '/account/center',
// account name: 'center',
{ component: () => import('@/views/account/center/Index'),
path: '/account', meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] }
component: RouteView, },
name: 'account', {
meta: { title: '个人页', icon: 'user', keepAlive: true, permission: [ 'user' ] }, path: '/account/settings',
children: [ name: 'settings',
{ component: () => import('@/views/account/settings/Index'),
path: '/account/center', meta: { title: '个人设置', hideHeader: true, keepAlive: true, permission: [ 'user' ] },
name: 'center', redirect: '/account/settings/base',
component: () => import('@/views/account/center/Index'), alwaysShow: true,
meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] } children: [
}, {
{ path: '/account/settings/base',
path: '/account/settings', name: 'BaseSettings',
name: 'settings', component: () => import('@/views/account/settings/BaseSetting'),
component: () => import('@/views/account/settings/Index'), meta: { title: '基本设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
meta: { title: '个人设置', hideHeader: true, keepAlive: true, permission: [ 'user' ] }, },
redirect: '/account/settings/base', {
alwaysShow: true, path: '/account/settings/security',
children: [ name: 'SecuritySettings',
{ component: () => import('@/views/account/settings/Security'),
path: '/account/settings/base', meta: { title: '安全设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
name: 'BaseSettings', },
component: () => import('@/views/account/settings/BaseSetting'), {
meta: { title: '基本设置', hidden: true, keepAlive: true, permission: [ 'user' ] } path: '/account/settings/custom',
}, name: 'CustomSettings',
{ component: () => import('@/views/account/settings/Custom'),
path: '/account/settings/security', meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
name: 'SecuritySettings', },
component: () => import('@/views/account/settings/Security'), {
meta: { title: '安全设置', hidden: true, keepAlive: true, permission: [ 'user' ] } path: '/account/settings/binding',
}, name: 'BindingSettings',
{ component: () => import('@/views/account/settings/Binding'),
path: '/account/settings/custom', meta: { title: '账户绑定', hidden: true, keepAlive: true, permission: [ 'user' ] }
name: 'CustomSettings', },
component: () => import('@/views/account/settings/Custom'), {
meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: [ 'user' ] } path: '/account/settings/notification',
}, name: 'NotificationSettings',
{ component: () => import('@/views/account/settings/Notification'),
path: '/account/settings/binding', meta: { title: '新消息通知', hidden: true, keepAlive: true, permission: [ 'user' ] }
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: '*', redirect: '/404', hidden: true {
} path: '/user',
] component: UserLayout,
redirect: '/user/login',
/** hidden: true,
* 基础路由 children: [
* @type { *[] } {
*/ path: 'login',
export const constantRouterMap = [ name: 'login',
{ component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
path: '/user', },
component: UserLayout, {
redirect: '/user/login', path: 'register',
hidden: true, name: 'register',
children: [ component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register')
{ },
path: 'login', {
name: 'login', path: 'register-result',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login') name: 'registerResult',
}, component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult')
{ }
path: 'register', ]
name: 'register', },
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register')
}, {
{ path: '/test',
path: 'register-result', component: BlankLayout,
name: 'registerResult', redirect: '/test/home',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult') children: [
} {
] path: 'home',
}, name: 'TestHome',
component: () => import('@/views/Home')
{ }
path: '/test', ]
component: BlankLayout, },
redirect: '/test/home',
children: [ {
{ path: '/404',
path: 'home', component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
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 = { ...@@ -8,46 +8,46 @@ const PERMISSION_ENUM = {
'disable': { key: 'disable', label: '禁用' }, 'disable': { key: 'disable', label: '禁用' },
'import': { key: 'import', label: '导入' }, 'import': { key: 'import', label: '导入' },
'export': { key: 'import', label: '导入' }, 'export': { key: 'import', label: '导入' },
}; }
function plugin(Vue) { function plugin(Vue) {
if (plugin.installed) { if (plugin.installed) {
return; return
} }
!Vue.prototype.$auth && Object.defineProperties(Vue.prototype, { !Vue.prototype.$auth && Object.defineProperties(Vue.prototype, {
$auth: { $auth: {
get() { get() {
const _this = this; const _this = this
return (permissions) => { return (permissions) => {
let [permission, action] = permissions.split('.'); const [permission, action] = permissions.split('.')
const permissionList = _this.$store.getters.roles.permissions; const permissionList = _this.$store.getters.roles.permissions
permissionList.find((val) => { permissionList.find((val) => {
return val.permissionId === permission return val.permissionId === permission
}).actionList.findIndex((val) => { }).actionList.findIndex((val) => {
return val === action return val === action
}); })
return false return false
} }
} }
} }
}); })
!Vue.prototype.$enum && Object.defineProperties(Vue.prototype, { !Vue.prototype.$enum && Object.defineProperties(Vue.prototype, {
$enum: { $enum: {
get() { get() {
// const _this = this; // const _this = this;
return (val) => { return (val) => {
let result = PERMISSION_ENUM; let result = PERMISSION_ENUM
val && val.split('.').forEach(v => { val && val.split('.').forEach(v => {
result = result && result[v] || null result = result && result[v] || null
}); })
return result return result
} }
} }
} }
}); })
} }
export default plugin export default plugin
\ No newline at end of file
src/views/role/RoleList.vue
<template> <template>
<page-layout title="角色管理"> <a-card :bordered="false" :style="{ height: '100%' }">
<a-card :bordered="false" :style="{ height: '100%' }"> <a-row :gutter="24">
<!--<a-tabs defaultActiveKey="1" tabPosition="left" size="large" :style="{ height: '400px'}" :tabBarStyle="{ textAlign: 'left' }" @prevClick="callback" @nextClick="callback"> <a-col :md="4">
<a-tab-pane tab="管理员" key="1">Content of tab 1</a-tab-pane> <a-list itemLayout="vertical" :dataSource="roles">
<a-tab-pane tab="销售组长" key="2">Content of tab 2</a-tab-pane> <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
<a-tab-pane tab="销售总负责人" key="3">Content of tab 3</a-tab-pane> <a-list-item-meta :style="{ marginBottom: '0' }">
<a-tab-pane tab="总经理" key="4">Content of tab 4</a-tab-pane> <span slot="description" style="text-align: center; display: block">{{ item.describe }}</span>
<a-tab-pane tab="普通销售" key="5">Content of tab 5</a-tab-pane> <a slot="title" style="text-align: center; display: block" @click="edit(item)">{{ item.name }}</a>
<a-tab-pane tab="客服" key="6">Content of tab 6</a-tab-pane> </a-list-item-meta>
<a-tab-pane tab="会员" key="7">Content of tab 7</a-tab-pane> </a-list-item>
<a-tab-pane tab="增加角色" key="-1">Content of tab 7</a-tab-pane> </a-list>
</a-tabs>--> </a-col>
<a-col :md="20">
<a-row :gutter="24"> <div style="max-width: 800px">
<a-col :md="4"> <a-divider v-if="isMobile()" />
<a-list itemLayout="vertical" :dataSource="roles"> <div v-if="mdl.id">
<a-list-item slot="renderItem" slot-scope="item, index" :key="index"> <h3>角色：{{ mdl.name }}</h3>
<a-list-item-meta :style="{ marginBottom: '0' }"> </div>
<span slot="description" style="text-align: center; display: block">{{ item.describe }}</span> <a-form :form="form" :layout="isMobile() ? 'vertical' : 'horizontal'">
<a slot="title" style="text-align: center; display: block" @click="edit(item)">{{ item.name }}</a> <a-form-item label="唯一键">
</a-list-item-meta> <a-input v-decorator="[ 'id', {rules: [{ required: true, message: 'Please input unique key!' }]} ]" placeholder="请填写唯一键" />
</a-list-item> </a-form-item>
</a-list>
</a-col> <a-form-item label="角色名称">
<a-col :md="20"> <a-input v-decorator="[ 'name', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
<a-row v-if="mdl.id"> </a-form-item>
<a-col :span="5"><h3 style="text-align: right">角色：</h3></a-col>
<a-col :span="19"><h3>{{ mdl.name }}</h3></a-col> <a-form-item label="状态">
</a-row> <a-select v-decorator="[ 'status', {rules: []} ]">
<a-form :form="form"> <a-select-option :value="1">正常</a-select-option>
<a-form-item <a-select-option :value="2">禁用</a-select-option>
label="唯一键" </a-select>
:labelCol="{ span: 5 }" </a-form-item>
:wrapperCol="{ span: 18 }"
> <a-form-item label="备注说明">
<a-input v-decorator="[ 'id', {rules: [{ required: true, message: 'Please input unique key!' }]} ]" placeholder="请填写唯一键" /> <a-textarea :row="3" v-decorator="[ 'describe', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
</a-form-item> </a-form-item>
<a-form-item <a-form-item label="拥有权限">
label="角色名称" <a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
:labelCol="{ span: 5 }" <a-col :xl="4" :lg="24">
:wrapperCol="{ span: 18 }" {{ permission.name }}：
> </a-col>
<a-input v-decorator="[ 'name', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" /> <a-col :xl="20" :lg="24">
</a-form-item> <a-checkbox
v-if="permission.actionsOptions.length > 0"
<a-form-item :indeterminate="permission.indeterminate"
label="状态" :checked="permission.checkedAll"
:labelCol="{ span: 5 }" @change="onChangeCheckAll($event, permission)">
:wrapperCol="{ span: 18 }" 全选
> </a-checkbox>
<a-select v-decorator="[ 'status', {rules: []} ]"> <a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected" @change="onChangeCheck(permission)" />
<a-select-option :value="1">正常</a-select-option> </a-col>
<a-select-option :value="2">禁用</a-select-option> </a-row>
</a-select> </a-form-item>
</a-form-item>
</a-form>
<a-form-item </div>
label="备注说明" </a-col>
:labelCol="{ span: 5 }" </a-row>
:wrapperCol="{ span: 18 }" </a-card>
> </template>
<a-textarea :row="3" v-decorator="[ 'describe', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
</a-form-item> <script>
import { getRoleList, getPermissions } from '@/api/manage'
<a-form-item import { mixinDevice } from '@/utils/mixin'
label="拥有权限" import { actionToObject } from '@/utils/permissions'
:labelCol="{ span: 5 }" import pick from 'lodash.pick'
:wrapperCol="{ span: 18 }"
> export default {
<a-row :gutter="16" v-for="(permission, index) in permissions" :key="index"> name: 'RoleList',
<a-col :span="4"> mixins: [mixinDevice],
{{ permission.name }}： components: {},
</a-col> data () {
<a-col :span="20"> return {
<a-checkbox form: this.$form.createForm(this),
v-if="permission.actionsOptions.length > 0" mdl: {},
:indeterminate="permission.indeterminate"
:checked="permission.checkedAll" roles: [],
@change="onChangeCheckAll($event, permission)"> permissions: []
全选 }
</a-checkbox> },
<a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected" @change="onChangeCheck(permission)" /> created () {
</a-col> getRoleList().then((res) => {
</a-row> this.roles = res.result.data
</a-form-item> this.roles.push({
id: '-1',
</a-form> name: '新增角色',
</a-col> describe: '新增一个角色'
</a-row> })
</a-card> console.log('this.roles', this.roles)
</page-layout> })
</template> this.loadPermissions()
},
<script> methods: {
import PageLayout from '@/components/page/PageLayout' callback (val) {
import { getRoleList, getPermissions } from "@/api/manage" console.log(val)
import { actionToObject } from '@/utils/permissions' },
import pick from 'lodash.pick'
add () {
export default { this.edit({ id: 0 })
name: "RoleList", },
components: {
PageLayout edit (record) {
}, this.mdl = Object.assign({}, record)
data () { // 有权限表，处理勾选
return { if (this.mdl.permissions && this.permissions) {
form: this.$form.createForm(this), // 先处理要勾选的权限结构
mdl: {}, const permissionsAction = {}
this.mdl.permissions.forEach(permission => {
roles: [], permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
permissions: [] })
} // 把权限表遍历一遍，设定要勾选的权限 action
}, this.permissions.forEach(permission => {
created () { permission.selected = permissionsAction[permission.id]
getRoleList().then((res) => { })
this.roles = res.result.data }
this.roles.push({
id: '-1', this.$nextTick(() => {
name: '新增角色', this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
describe: '新增一个角色' })
}) console.log('this.mdl', this.mdl)
console.log('this.roles', this.roles) },
})
this.loadPermissions() onChangeCheck (permission) {
}, permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
methods: { permission.checkedAll = permission.selected.length === permission.actionsOptions.length
callback (val) { },
console.log(val) onChangeCheckAll (e, permission) {
}, Object.assign(permission, {
selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
add () { indeterminate: false,
this.edit({ id: 0 }) checkedAll: e.target.checked
}, })
},
edit (record) { loadPermissions () {
this.mdl = Object.assign({}, record) getPermissions().then(res => {
// 有权限表，处理勾选 const result = res.result
if (this.mdl.permissions && this.permissions) { this.permissions = result.map(permission => {
// 先处理要勾选的权限结构 const options = actionToObject(permission.actionData)
const permissionsAction = {} permission.checkedAll = false
this.mdl.permissions.forEach(permission => { permission.selected = []
permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action) permission.indeterminate = false
}) permission.actionsOptions = options.map(option => {
// 把权限表遍历一遍，设定要勾选的权限 action return {
this.permissions.forEach(permission => { label: option.describe,
permission.selected = permissionsAction[permission.id] value: option.action
}) }
} })
return permission
this.$nextTick(() => { })
this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe')) })
}) }
console.log('this.mdl', this.mdl) },
}, }
</script>
onChangeCheck (permission) {
permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length) <style scoped>
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>
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment