xuhuajiao
/
canvasScreen_admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

权限管理

dev
xuhuajiao 4 years ago
parent
e7f4458c51
commit
2ea70677d1
9 changed files with 517 additions and 488 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .eslintignore
  2. 2
      package.json
  3. 2
      src/layout/components/Navbar.vue
  4. 70
      src/router/index.js
  5. 101
      src/router/routers.js
  6. 385
      src/views/system/dept/index.vue
  7. 126
      src/views/system/role/index.vue
  8. 286
      src/views/system/role/role.json
  9. 4
      src/views/system/user/index.vue

1
.eslintignore
View File

@ -2,3 +2,4 @@ build/*.js
src/assets src/assets
public public
dist dist
*vue

2
package.json
View File

@ -42,6 +42,7 @@
"nprogress": "0.2.0", "nprogress": "0.2.0",
"path-to-regexp": "2.4.0", "path-to-regexp": "2.4.0",
"qs": "^6.9.1", "qs": "^6.9.1",
"sass": "1.32.12",
"screenfull": "4.2.0", "screenfull": "4.2.0",
"sortablejs": "1.8.4", "sortablejs": "1.8.4",
"vue": "2.6.10", "vue": "2.6.10",
@ -84,7 +85,6 @@
"lint-staged": "^11.1.2", "lint-staged": "^11.1.2",
"plop": "^2.7.4", "plop": "^2.7.4",
"runjs": "^4.1.3", "runjs": "^4.1.3",
"sass": "^1.26.10",
"sass-loader": "^7.1.0", "sass-loader": "^7.1.0",
"script-ext-html-webpack-plugin": "2.1.3", "script-ext-html-webpack-plugin": "2.1.3",
"script-loader": "0.7.2", "script-loader": "0.7.2",

2
src/layout/components/Navbar.vue
View File

@ -6,7 +6,7 @@
class="hamburger-container" class="hamburger-container"
@toggleClick="toggleSideBar" @toggleClick="toggleSideBar"
/> />
<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> -->
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
<!-- 顶部菜单 start--> <!-- 顶部菜单 start-->
<div class="navmenu"> <div class="navmenu">

70
src/router/index.js
View File

@ -3,13 +3,13 @@ import store from '@/store'
import Config from '@/settings' import Config from '@/settings'
import NProgress from 'nprogress' // progress bar import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // getToken from cookie
// import { getToken } from '@/utils/auth' // getToken from cookie
import { buildMenus } from '@/api/system/menu' import { buildMenus } from '@/api/system/menu'
import { filterAsyncRouter } from '@/store/modules/permission' import { filterAsyncRouter } from '@/store/modules/permission'
NProgress.configure({ showSpinner: false }) // NProgress Configuration NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = ['/login', '/forgetPassword'] // no redirect whitelist
// const whiteList = ['/login', '/forgetPassword'] // no redirect whitelist
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
if (to.meta.title) { if (to.meta.title) {
@ -17,41 +17,41 @@ router.beforeEach((to, from, next) => {
} }
// 加载效果 // 加载效果
NProgress.start() NProgress.start()
// next()
// NProgress.done()
if (getToken()) {
// 已登录且要跳转的页面是登录页
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
} else {
if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(() => { // 拉取user_info
// 动态路由，拉取菜单
loadMenus(next, to)
}).catch(() => {
store.dispatch('LogOut').then(() => {
location.reload() // 为了重新实例化vue-router对象 避免bug
})
})
// 登录时未拉取 菜单，在此处拉取
} else if (store.getters.loadMenus) {
// 修改成false，防止死循环
store.dispatch('updateLoadMenus')
loadMenus(next, to)
} else {
next()
}
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
next() next()
} else {
next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
NProgress.done() NProgress.done()
}
}
// if (getToken()) {
// // 已登录且要跳转的页面是登录页
// if (to.path === '/login') {
// next({ path: '/' })
// NProgress.done()
// } else {
// if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
// store.dispatch('GetInfo').then(() => { // 拉取user_info
// // 动态路由，拉取菜单
// loadMenus(next, to)
// }).catch(() => {
// store.dispatch('LogOut').then(() => {
// location.reload() // 为了重新实例化vue-router对象 避免bug
// })
// })
// // 登录时未拉取 菜单，在此处拉取
// } else if (store.getters.loadMenus) {
// // 修改成false，防止死循环
// store.dispatch('updateLoadMenus')
// loadMenus(next, to)
// } else {
// next()
// }
// }
// } else {
// /* has no token*/
// if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
// next()
// } else {
// next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
// NProgress.done()
// }
// }
}) })
export const loadMenus = (next, to) => { export const loadMenus = (next, to) => {

101
src/router/routers.js
View File

@ -58,54 +58,71 @@ export const constantRouterMap = [
} }
}] }]
}, },
// {
// path: '/user',
// component: Layout,
// redirect: '/system/user',
// meta: {
// title: '用户管理',
// icon: 'documentation'
// },
// children: [{
// path: '/system/user',
// component: () => import('@/views/system/user/index'),
// meta: {
// title: '用户管理',
// icon: 'edit'
// }
// }]
// },
// {
// path: '/role',
// component: Layout,
// redirect: '/system/role',
// meta: {
// title: '角色管理',
// icon: 'documentation'
// },
// children: [{
// path: '/system/role',
// component: () => import('@/views/system/role/index'),
// meta: {
// title: '角色管理',
// icon: 'edit'
// }
// }]
// }
{ {
path: '/user', path: '/user',
component: Layout, component: Layout,
hidden: true,
redirect: 'noredirect',
children: [
redirect: '/system/user',
meta: {
title: '用户管理',
icon: 'documentation'
},
children: [{
path: '/system/user',
component: () => import('@/views/system/user/index'),
meta: {
title: '用户管理',
icon: 'edit'
}
}]
},
{
path: '/role',
component: Layout,
redirect: '/system/role',
meta: {
title: '角色管理',
icon: 'documentation'
},
children: [{
path: '/system/role',
component: () => import('@/views/system/role/index'),
meta: {
title: '角色管理',
icon: 'edit'
}
}]
},
{ {
path: 'center',
component: resolve => require(['@/views/system/user/center'], resolve),
name: '个人中心',
meta: { title: '个人中心' }
path: '/dept',
component: Layout,
redirect: '/system/dept',
meta: {
title: '机构管理',
icon: 'documentation'
},
children: [{
path: '/system/dept',
component: () => import('@/views/system/dept/index'),
meta: {
title: '机构管理',
icon: 'edit'
} }
]
}]
} }
// {
// path: '/user',
// component: Layout,
// hidden: true,
// redirect: 'noredirect',
// children: [
// {
// path: 'center',
// component: resolve => require(['@/views/system/user/center'], resolve),
// name: '个人中心',
// meta: { title: '个人中心' }
// }
// ]
// }
] ]
export default new Router({ export default new Router({

385
src/views/system/dept/index.vue
View File

@ -2,49 +2,35 @@
<div class="app-container"> <div class="app-container">
<!--工具栏--> <!--工具栏-->
<div class="head-container"> <div class="head-container">
<div v-if="crud.props.searchToggle">
<el-col :span="20">
<!-- 搜索 --> <!-- 搜索 -->
<el-input v-model="query.name" clearable size="small" placeholder="输入部门名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<date-range-picker v-model="query.createTime" class="date-item" />
<el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 90px" @change="crud.toQuery">
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
</el-select>
<el-input v-model="query.blurry" clearable size="small" placeholder="机构名称" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-input v-model="query.blurry" clearable size="small" placeholder="管理员名称" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<rrOperation /> <rrOperation />
</div>
<crudOperation :permission="permission" />
</el-col>
<el-col class="page_add" :span="4"><el-button class="table_add" type="primary" icon="el-icon-plus" @click="addDialogVisible = true">新增</el-button></el-col>
</div> </div>
<!--表单组件--> <!--表单组件-->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="addDialogVisible" :title="crud.status.title" width="620px">
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px"> <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="部门名称" prop="name">
<el-input v-model="form.name" style="width: 370px;" />
</el-form-item>
<el-form-item label="部门排序" prop="deptSort">
<el-input-number
v-model.number="form.deptSort"
:min="0"
:max="999"
controls-position="right"
style="width: 370px;"
/>
</el-form-item>
<el-form-item label="顶级部门">
<el-radio-group v-model="form.isTop" style="width: 140px">
<el-radio label="1">是</el-radio>
<el-radio label="0">否</el-radio>
</el-radio-group>
<el-form-item label="机构名称" prop="name">
<el-input v-model="form.name" style="width: 360px;" />
<span class="init_password">密码默认：123456</span>
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="enabled">
<el-radio v-for="item in dict.dept_status" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio>
<el-form-item label="有效时间" prop="indate">
<el-date-picker
v-model="form.indate"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 360px;"
></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item v-if="form.isTop === '0'" style="margin-bottom: 0;" label="上级部门" prop="pid">
<treeselect
v-model="form.pid"
:load-options="loadDepts"
:options="depts"
style="width: 370px;"
placeholder="选择上级类目"
/>
<el-form-item label="当前版本" prop="versions">
<el-select v-model="form.versions" placeholder="请选择" style="width: 360px;">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@ -52,6 +38,16 @@
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button> <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div> </div>
</el-dialog> </el-dialog>
<!-- 记录 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="recordVisible" :title="crud.status.title">
<el-table :data="recordData">
<el-table-column property="name" label="操作人" />
<el-table-column property="permissionType" label="角色权限" />
<el-table-column property="account" label="登录账号" />
<el-table-column property="type" label="操作类型" />
<el-table-column property="date" label="操作时间" />
</el-table>
</el-dialog>
<!--表格渲染--> <!--表格渲染-->
<el-table <el-table
ref="table" ref="table"
@ -59,35 +55,35 @@
lazy lazy
:load="getDeptDatas" :load="getDeptDatas"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
:data="crud.data"
:data="tableData"
row-key="id" row-key="id"
@select="crud.selectChange" @select="crud.selectChange"
@select-all="crud.selectAllChange" @select-all="crud.selectAllChange"
@selection-change="crud.selectionChangeHandler" @selection-change="crud.selectionChangeHandler"
> >
<el-table-column :selectable="checkboxT" type="selection" width="55" /> <el-table-column :selectable="checkboxT" type="selection" width="55" />
<el-table-column label="名称" prop="name" />
<el-table-column label="排序" prop="deptSort" />
<el-table-column label="状态" align="center" prop="enabled">
<el-table-column label="机构名称" align="center" prop="name" />
<el-table-column label="当前版本" align="center" prop="versions" />
<el-table-column label="用户数" align="center" prop="number" />
<el-table-column label="管理员名称" align="center" prop="user_name" />
<el-table-column label="管理员账号" align="center" prop="user_account" />
<el-table-column label="配置状态" align="center" prop="enabled">
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch <el-switch
v-model="scope.row.enabled" v-model="scope.row.enabled"
:disabled="scope.row.id === 1" :disabled="scope.row.id === 1"
active-color="#409EFF" active-color="#409EFF"
inactive-color="#F56C6C" inactive-color="#F56C6C"
@change="changeEnabled(scope.row, scope.row.enabled,)"
@change="changeEnabled(scope.row, scope.row.enabled)"
/> />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="createTime" label="创建日期" />
<el-table-column v-if="checkPer(['admin','dept:edit','dept:del'])" label="操作" width="130px" align="center" fixed="right">
<el-table-column prop="indate" align="center" label="有效时间" />
<el-table-column label="操作" width="220px" align="center" fixed="right">
<template slot-scope="scope"> <template slot-scope="scope">
<udOperation
:data="scope.row"
:permission="permission"
:disabled-dle="scope.row.id === 1"
msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！"
/>
<el-switch v-model="scope.row.off" active-color="#13ce66" inactive-color="#ff4949" style="margin-right: 10px;"></el-switch>
<el-button type="primary" icon="el-icon-edit" @click="editFormData(scope.$index, scope.row)" />
<el-button type="info" icon="el-icon-info" />
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -95,22 +91,27 @@
</template> </template>
<script> <script>
import crudDept from '@/api/system/dept'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import DateRangePicker from '@/components/DateRangePicker'
import crudDept from '@/api/system/dept';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect';
import CRUD, { presenter, header, form, crud } from '@crud/crud';
import rrOperation from '@crud/RR.operation';
import crudOperation from '@crud/CRUD.operation';
import udOperation from '@crud/UD.operation';
import DateRangePicker from '@/components/DateRangePicker';
const defaultForm = { id: null, name: null, isTop: '1', subCount: 0, pid: null, deptSort: 999, enabled: 'true' }
const defaultForm = {
id: null,
name: null,
versions: null,
indate: []
};
export default { export default {
name: 'Dept', name: 'Dept',
components: { Treeselect, crudOperation, rrOperation, udOperation, DateRangePicker }, components: { Treeselect, crudOperation, rrOperation, udOperation, DateRangePicker },
cruds() { cruds() {
return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }})
return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept } });
}, },
mixins: [presenter(), header(), form(defaultForm), crud()], mixins: [presenter(), header(), form(defaultForm), crud()],
// 设置数据字典 // 设置数据字典
@ -119,135 +120,185 @@ export default {
return { return {
depts: [], depts: [],
rules: { rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
versions: [
{ required: true, message: '请选择版本', trigger: 'change' }
],
indate: [
{ type: 'datetimerange', required: true, message: '请选择时间范围', trigger: 'change' }
], ],
deptSort: [
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
]
}, },
addDialogVisible: false,
recordVisible: false,
tableData: [
{
id: 1,
name: 'xxx图书馆',
versions: '普通版',
number: '2',
user_name: '某某某',
user_account: '15100701025',
enabled: '已配置',
off: true,
indate: '2021-2-2 14:00至2022-4-6 18:00'
}
],
options: [
{
value: '选项1',
label: '普通版'
},
{
value: '选项2',
label: '豪华版'
}
],
recordData: [
{
id: 1,
name: 'xxx',
account: '15100701025',
permissionType: '平台技术人员',
type: 'editor',
date: '2021-1-1 14:00'
}
],
permission: { permission: {
add: ['admin', 'dept:add'], add: ['admin', 'dept:add'],
edit: ['admin', 'dept:edit'], edit: ['admin', 'dept:edit'],
del: ['admin', 'dept:del'] del: ['admin', 'dept:del']
}, },
enabledTypeOptions: [
{ key: 'true', display_name: '正常' },
{ key: 'false', display_name: '禁用' }
]
}
enabledTypeOptions: [{ key: 'true', display_name: '正常' }, { key: 'false', display_name: '禁用' }]
};
}, },
methods: { methods: {
getDeptDatas(tree, treeNode, resolve) { getDeptDatas(tree, treeNode, resolve) {
const params = { pid: tree.id }
setTimeout(() => {
crudDept.getDepts(params).then(res => {
resolve(res.content)
})
}, 100)
},
// 新增与编辑前做的操作
[CRUD.HOOK.afterToCU](crud, form) {
if (form.pid !== null) {
form.isTop = '0'
} else if (form.id !== null) {
form.isTop = '1'
}
form.enabled = `${form.enabled}`
if (form.id != null) {
this.getSupDepts(form.id)
} else {
this.getDepts()
}
},
getSupDepts(id) {
crudDept.getDeptSuperior(id).then(res => {
const date = res.content
this.buildDepts(date)
this.depts = date
})
},
buildDepts(depts) {
depts.forEach(data => {
if (data.children) {
this.buildDepts(data.children)
}
if (data.hasChildren && !data.children) {
data.children = null
}
})
},
getDepts() {
crudDept.getDepts({ enabled: true }).then(res => {
this.depts = res.content.map(function(obj) {
if (obj.hasChildren) {
obj.children = null
}
return obj
})
})
},
// 获取弹窗内部门数据
loadDepts({ action, parentNode, callback }) {
if (action === LOAD_CHILDREN_OPTIONS) {
crudDept.getDepts({ enabled: true, pid: parentNode.id }).then(res => {
parentNode.children = res.content.map(function(obj) {
if (obj.hasChildren) {
obj.children = null
}
return obj
})
setTimeout(() => {
callback()
}, 100)
})
}
},
// 提交前的验证
[CRUD.HOOK.afterValidateCU]() {
if (this.form.pid !== null && this.form.pid === this.form.id) {
this.$message({
message: '上级部门不能为空',
type: 'warning'
})
return false
}
if (this.form.isTop === '1') {
this.form.pid = null
}
return true
},
// 改变状态
changeEnabled(data, val) {
this.$confirm('此操作将 "' + this.dict.label.dept_status[val] + '" ' + data.name + '部门, 是否继续？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
crudDept.edit(data).then(res => {
this.crud.notify(this.dict.label.dept_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
}).catch(err => {
data.enabled = !data.enabled
console.log(err.response.data.message)
})
}).catch(() => {
data.enabled = !data.enabled
})
// const params = { pid: tree.id };
// setTimeout(() => {
// crudDept.getDepts(params).then(res => {
// resolve(res.content);
// });
// }, 100);
}, },
// // 新增与编辑前做的操作
// [CRUD.HOOK.afterToCU](crud, form) {
// if (form.pid !== null) {
// form.isTop = '0';
// } else if (form.id !== null) {
// form.isTop = '1';
// }
// form.enabled = `${form.enabled}`;
// if (form.id != null) {
// this.getSupDepts(form.id);
// } else {
// this.getDepts();
// }
// },
// getSupDepts(id) {
// crudDept.getDeptSuperior(id).then(res => {
// const date = res.content;
// this.buildDepts(date);
// this.depts = date;
// });
// },
// buildDepts(depts) {
// depts.forEach(data => {
// if (data.children) {
// this.buildDepts(data.children);
// }
// if (data.hasChildren && !data.children) {
// data.children = null;
// }
// });
// },
// getDepts() {
// crudDept.getDepts({ enabled: true }).then(res => {
// this.depts = res.content.map(function(obj) {
// if (obj.hasChildren) {
// obj.children = null;
// }
// return obj;
// });
// });
// },
// // 获取弹窗内部门数据
// loadDepts({ action, parentNode, callback }) {
// if (action === LOAD_CHILDREN_OPTIONS) {
// crudDept.getDepts({ enabled: true, pid: parentNode.id }).then(res => {
// parentNode.children = res.content.map(function(obj) {
// if (obj.hasChildren) {
// obj.children = null;
// }
// return obj;
// });
// setTimeout(() => {
// callback();
// }, 100);
// });
// }
// },
// // 提交前的验证
// [CRUD.HOOK.afterValidateCU]() {
// if (this.form.pid !== null && this.form.pid === this.form.id) {
// this.$message({
// message: '上级部门不能为空',
// type: 'warning'
// });
// return false;
// }
// if (this.form.isTop === '1') {
// this.form.pid = null;
// }
// return true;
// },
// // 改变状态
// changeEnabled(data, val) {
// this.$confirm('此操作将 "' + this.dict.label.dept_status[val] + '" ' + data.name + '部门, 是否继续？', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// })
// .then(() => {
// crudDept
// .edit(data)
// .then(res => {
// this.crud.notify(this.dict.label.dept_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS);
// })
// .catch(err => {
// data.enabled = !data.enabled;
// console.log(err.response.data.message);
// });
// })
// .catch(() => {
// data.enabled = !data.enabled;
// });
// },
checkboxT(row, rowIndex) { checkboxT(row, rowIndex) {
return row.id !== 1
}
return row.id !== 1;
} }
} }
};
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
::v-deep .vue-treeselect__control,
::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
} }
</style> </style>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
// start
.page_add {
text-align: right;
}
// end
.init_password {
font-size: 12px;
margin-left: 10px;
color: #409eff;
}
::v-deep .el-input-number .el-input__inner { ::v-deep .el-input-number .el-input__inner {
text-align: left; text-align: left;
} }

126
src/views/system/role/index.vue
View File

@ -9,32 +9,27 @@
</el-col> </el-col>
<el-col class="page_add" :span="4"><el-button class="table_add" type="primary" icon="el-icon-plus" @click="roleFormVisible = true">新增</el-button></el-col> <el-col class="page_add" :span="4"><el-button class="table_add" type="primary" icon="el-icon-plus" @click="roleFormVisible = true">新增</el-button></el-col>
</div> </div>
<!-- 表单渲染 -->
<!-- 角色新增-表单 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="roleFormVisible" :title="crud.status.title" width="600px" top="20px"> <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="roleFormVisible" :title="crud.status.title" width="600px" top="20px">
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px"> <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="角色名称" prop="roleName"><el-input v-model="form.roleName" style="width: 380px;" /></el-form-item> <el-form-item label="角色名称" prop="roleName"><el-input v-model="form.roleName" style="width: 380px;" /></el-form-item>
<el-form-item label="描述" prop="description"><el-input v-model="form.description" style="width: 380px;" /></el-form-item> <el-form-item label="描述" prop="description"><el-input v-model="form.description" style="width: 380px;" /></el-form-item>
<el-form-item v-for="item in roleTree" :key="item.key" class="press_form" :label="item.Title" :prop="item.Title">
<el-checkbox-group v-for="checkItem in item.children" :key="checkItem.key" v-model="selectCheckboxForm[item.Title]" class="press_list">
<el-checkbox :v-model="checkItem.IsCheck" :label="checkItem.Title" name="permissionAll" />
</el-checkbox-group>
<el-form-item v-for="(item, index) in roleTree" :label="item.name" :key="index" class="press_form">
<el-checkbox :indeterminate="item.isIndeterminate" v-model="item.isCheck" @change="handleCheckAllChange(index, $event)">全选</el-checkbox>
<div>
<el-checkbox v-for="(items, i) in item.children" v-model="items.isCheck" :label="items.name" :key="i" @change="handleCheckedCitiesChange(index, items.Key, $event)">
{{ items.name }}
</el-checkbox>
</div>
</el-form-item> </el-form-item>
<!-- <el-tree
ref="menu"
:data="roleTree"
:props="defaultProps"
check-strictly
show-checkbox
node-key="Key"
:default-checked-keys="Key"
default-expand-all
/> -->
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="text" @click="crud.cancelCU">取消</el-button> <el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button> <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div> </div>
</el-dialog> </el-dialog>
<!-- 记录 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="recordVisible" :title="crud.status.title"> <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="recordVisible" :title="crud.status.title">
<el-table :data="recordData"> <el-table :data="recordData">
<el-table-column property="name" label="操作人" /> <el-table-column property="name" label="操作人" />
@ -48,9 +43,6 @@
<!--角色管理--> <!--角色管理-->
<el-col> <el-col>
<el-card class="box-card" shadow="never"> <el-card class="box-card" shadow="never">
<!-- <div slot="header" class="clearfix">
<span class="role-span">角色列表</span>
</div> -->
<el-table <el-table
ref="table" ref="table"
v-loading="crud.loading" v-loading="crud.loading"
@ -84,11 +76,11 @@
</template> </template>
<script> <script>
import crudRoles from '@/api/system/role'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import roleTree from './role.json'
import crudRoles from '@/api/system/role';
import CRUD, { presenter, header, form, crud } from '@crud/crud';
import rrOperation from '@crud/RR.operation';
import pagination from '@crud/Pagination';
import roleTree from './role.json';
const defaultForm = { const defaultForm = {
id: null, id: null,
@ -97,12 +89,12 @@ const defaultForm = {
library: [], library: [],
publish: [], publish: [],
description: null description: null
}
};
export default { export default {
name: 'Role', name: 'Role',
components: { pagination, rrOperation }, components: { pagination, rrOperation },
cruds() { cruds() {
return CRUD({ title: '角色', url: 'api/roles', sort: 'level,asc', crudMethod: { ...crudRoles }})
return CRUD({ title: '角色', url: 'api/roles', sort: 'level,asc', crudMethod: { ...crudRoles } });
}, },
mixins: [presenter(), header(), form(defaultForm), crud()], mixins: [presenter(), header(), form(defaultForm), crud()],
data() { data() {
@ -143,44 +135,56 @@ export default {
} }
], ],
roleTree: null, roleTree: null,
defaultProps: { children: 'children', label: 'Title', isLeaf: 'leaf' },
selectCheckboxForm: {
'权限': [],
'素材库': [],
'内容发布': [],
'紧急通知': [],
'播放列表': [],
'主题模板': [],
'设备列表': [],
'开关机': [],
'权限管理': [],
'角色管理': []
},
rules: { rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
],
permission: [
{ required: true, message: '请输入权限', trigger: 'blur' }
]
}
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
permission: [{ required: true, message: '请输入权限', trigger: 'blur' }]
} }
};
}, },
created() { created() {
this.roleTree = roleTree
console.log(roleTree)
this.roleTree = roleTree;
}, },
methods: { methods: {
// 全选反选的多选框
handleCheckAllChange(index, e) {
this.roleTree[index].isCheck = e;
if (e == false) this.roleTree[index].isIndeterminate = false;
let childrenArray = this.roleTree[index].children;
if (childrenArray) for (let i = 0, len = childrenArray.length; i < len; i++) childrenArray[i].isCheck = e;
},
handleCheckedCitiesChange(index, Key, e) {
let childrenArray = this.roleTree[index].children;
let tickCount = 0,
unTickCount = 0,
len = childrenArray.length;
for (let i = 0; i < len; i++) {
if (Key == childrenArray[i].Key) childrenArray[i].isCheck = e;
if (childrenArray[i].isCheck == true) tickCount++;
if (childrenArray[i].isCheck == false) unTickCount++;
}
if (tickCount == len) {
//二级全勾选
this.roleTree[index].isCheck = true;
this.roleTree[index].isIndeterminate = false;
} else if (unTickCount == len) {
//二级全不勾选
this.roleTree[index].isCheck = false;
this.roleTree[index].isIndeterminate = false;
} else {
this.roleTree[index].isCheck = false;
this.roleTree[index].isIndeterminate = true;
}
},
checkboxT(row) { checkboxT(row) {
return row.level >= this.level
return row.level >= this.level;
}, },
editFormData(index, row) { editFormData(index, row) {
this.roleFormVisible = true
this.form.roleName = row.roleName
this.form.description = row.description
this.roleFormVisible = true;
this.form.roleName = row.roleName;
this.form.description = row.description;
}, },
handleRecord(index, row) { handleRecord(index, row) {
this.recordVisible = true
this.recordVisible = true;
// switch (that.recordData[i].operateType) { // switch (that.recordData[i].operateType) {
// case 'Edit': // case 'Edit':
// that.recordData[i].operateType = '编辑' // that.recordData[i].operateType = '编辑'
@ -195,9 +199,25 @@ export default {
// that.recordData[i].operateType = '恢复' // that.recordData[i].operateType = '恢复'
// break // break
// } // }
},
// 触发单选
handleCurrentChange(val) {
// if (val) {
// const _this = this
// // 清空菜单的选中
// this.$refs.menu.setCheckedKeys([])
// // 保存当前的角色id
// this.currentId = val.id
// // 初始化默认选中的key
// this.menuIds = []
// val.menus.forEach(function(data) {
// _this.menuIds.push(data.id)
// })
// this.showButton = true
// }
} }
} }
}
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-input-number .el-input__inner { ::v-deep .el-input-number .el-input__inner {

286
src/views/system/role/role.json
View File

@ -1,264 +1,204 @@
[{ [{
"IsCheck": "False",
"Key": "1",
"Title": "权限",
"children": [{
"IsCheck": "False",
"Key": "1-1",
"Title": "全部"
}]
"name":"权限",
"children": []
}, },
{ {
"IsCheck": "False",
"Key": "2",
"Title": "素材库",
"children": [{
"IsCheck": "true",
"Key": "2-1",
"Title": "全部"
},
"name": "素材库",
"children": [
{ {
"IsCheck": "False",
"Key": "2-2",
"Title": "编辑"
"isCheck": false,
"Key": "1",
"name": "编辑"
}, },
{ {
"IsCheck": "true",
"Key": "2-3",
"Title": "查看"
"isCheck": true,
"Key": "2",
"name": "查看"
}, },
{ {
"IsCheck": "False",
"Key": "2-4",
"Title": "删除"
"isCheck": false,
"Key": "3",
"name": "删除"
}, },
{ {
"IsCheck": "False",
"Key": "2-5",
"Title": "上传"
"isCheck": false,
"Key": "4",
"name": "上传"
}, },
{ {
"IsCheck": "False",
"Key": "2-6",
"Title": "下载"
"isCheck": false,
"Key": "5",
"name": "下载"
} }
] ]
}, },
{ {
"IsCheck": "False",
"Key": "3",
"Title": "内容发布",
"children": [{
"IsCheck": "False",
"Key": "3-1",
"Title": "全部"
},
"name": "内容发布",
"children": [
{ {
"IsCheck": "False",
"Key": "3-2",
"Title": "编辑"
"isCheck": false,
"Key": "6",
"name": "编辑"
}, },
{ {
"IsCheck": "False",
"Key": "3-3",
"Title": "查看"
"isCheck": false,
"Key": "7",
"name": "查看"
}, },
{ {
"IsCheck": "False",
"Key": "3-4",
"Title": "删除"
"isCheck": false,
"Key": "8",
"name": "删除"
}, },
{ {
"IsCheck": "False",
"Key": "3-5",
"Title": "添加"
"isCheck": false,
"Key": "9",
"name": "添加"
} }
] ]
}, },
{ {
"IsCheck": "False",
"Key": "4",
"Title": "紧急通知",
"children": [{
"IsCheck": "False",
"Key": "1",
"Title": "全部"
},
"name": "紧急通知",
"children": [
{ {
"IsCheck": "False",
"Key": "2",
"Title": "编辑"
"isCheck": false,
"Key": "10",
"name": "编辑"
}, },
{ {
"IsCheck": "False",
"Key": "3",
"Title": "查看"
"isCheck": false,
"Key": "11",
"name": "查看"
}, },
{ {
"IsCheck": "False",
"Key": "4",
"Title": "删除"
"isCheck": false,
"Key": "12",
"name": "删除"
}, },
{ {
"IsCheck": "False",
"Key": "5",
"Title": "添加"
"isCheck": false,
"Key": "13",
"name": "添加"
} }
] ]
}, },
{ {
"IsCheck": "False",
"Key": "5",
"Title": "播放列表",
"children": [{
"IsCheck": "False",
"Key": "1",
"Title": "全部"
},
"name": "播放列表",
"children": [
{ {
"IsCheck": "False",
"Key": "2",
"Title": "查看"
"isCheck": false,
"Key": "14",
"name": "查看"
} }
] ]
}, },
{ {
"IsCheck": "False",
"Key": "6",
"Title": "主题模板",
"children": [{
"IsCheck": "False",
"Key": "1",
"Title": "全部"
},
"name": "主题模板",
"children": [
{ {
"IsCheck": "False",
"Key": "2",
"Title": "查看"
"isCheck": false,
"Key": "15",
"name": "查看"
} }
] ]
}, },
{ {
"IsCheck": "False",
"Key": "7",
"Title": "设备列表",
"children": [{
"IsCheck": "False",
"Key": "1",
"Title": "全部"
},
"name": "设备列表",
"children": [
{ {
"IsCheck": "False",
"Key": "2",
"Title": "编辑"
"isCheck": false,
"Key": "17",
"name": "编辑"
}, },
{ {
"IsCheck": "False",
"Key": "3",
"Title": "查看"
"isCheck": false,
"Key": "18",
"name": "查看"
}, },
{ {
"IsCheck": "False",
"Key": "4",
"Title": "删除"
"isCheck": false,
"Key": "19",
"name": "删除"
}, },
{ {
"IsCheck": "False",
"Key": "5",
"Title": "添加"
"isCheck": false,
"Key": "20",
"name": "添加"
} }
] ]
}, },
{ {
"IsCheck": "False",
"Key": "8",
"Title": "开关机",
"children": [{
"IsCheck": "False",
"Key": "1",
"Title": "全部"
},
"name": "开关机",
"children": [
{ {
"IsCheck": "False",
"Key": "2",
"Title": "编辑"
"isCheck": false,
"Key": "21",
"name": "编辑"
}, },
{ {
"IsCheck": "False",
"Key": "3",
"Title": "查看"
"isCheck": false,
"Key": "22",
"name": "查看"
}, },
{ {
"IsCheck": "False",
"Key": "4",
"Title": "删除"
"isCheck": false,
"Key": "23",
"name": "删除"
}, },
{ {
"IsCheck": "False",
"Key": "5",
"Title": "添加"
"isCheck": false,
"Key": "24",
"name": "添加"
} }
] ]
}, },
{ {
"IsCheck": "False",
"Key": "9",
"Title": "权限管理",
"children": [{
"IsCheck": "False",
"Key": "1",
"Title": "全部"
},
"name": "权限管理",
"children": [
{ {
"IsCheck": "False",
"Key": "2",
"Title": "编辑"
"isCheck": false,
"Key": "25",
"name": "编辑"
}, },
{ {
"IsCheck": "False",
"Key": "3",
"Title": "查看"
"isCheck": false,
"Key": "26",
"name": "查看"
}, },
{ {
"IsCheck": "False",
"Key": "4",
"Title": "删除"
"isCheck": false,
"Key": "27",
"name": "删除"
}, },
{ {
"IsCheck": "False",
"Key": "5",
"Title": "添加"
"isCheck": false,
"Key": "28",
"name": "添加"
} }
] ]
}, },
{ {
"IsCheck": "False",
"Key": "10",
"Title": "角色管理",
"children": [{
"IsCheck": "False",
"Key": "1",
"Title": "全部"
},
"name": "角色管理",
"children": [
{ {
"IsCheck": "False",
"Key": "2",
"Title": "编辑"
"isCheck": false,
"Key": "29",
"name": "编辑"
}, },
{ {
"IsCheck": "False",
"Key": "3",
"Title": "查看"
"isCheck": false,
"Key": "30",
"name": "查看"
}, },
{ {
"IsCheck": "False",
"Key": "4",
"Title": "删除"
"isCheck": false,
"Key": "31",
"name": "删除"
}, },
{ {
"IsCheck": "False",
"Key": "5",
"Title": "添加"
"isCheck": false,
"Key": "32",
"name": "添加"
} }
] ]
} }

4
src/views/system/user/index.vue
View File

@ -113,7 +113,7 @@
</el-dialog> </el-dialog>
<!--表格渲染--> <!--表格渲染-->
<!-- :data="crud.data" --> <!-- :data="crud.data" -->
<el-table ref="table" v-loading="crud.loading" :data="userData" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
<el-table ref="table" v-loading="crud.loading" :data="tableData" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
<el-table-column :selectable="checkboxT" type="selection" width="55" /> <el-table-column :selectable="checkboxT" type="selection" width="55" />
<el-table-column prop="account" width="135" align="center" label="登录账号" /> <el-table-column prop="account" width="135" align="center" label="登录账号" />
<el-table-column prop="nickName" align="center" label="管理员名称" /> <el-table-column prop="nickName" align="center" label="管理员名称" />
@ -217,7 +217,7 @@ export default {
edit: ['admin', 'user:edit'], edit: ['admin', 'user:edit'],
del: ['admin', 'user:del'] del: ['admin', 'user:del']
}, },
userData: [
tableData: [
{ {
id: 1, id: 1,
account: '15100701025', account: '15100701025',

Write Preview
Loading…
Cancel
Save