|
|
|
@ -19,17 +19,18 @@ |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
<el-col class="page_add" :span="4"> |
|
|
|
<el-button class="table_add" type="primary" round @click="roleFormVisible = true">新增</el-button> |
|
|
|
<el-button class="table_add" type="primary" round @click="addRole">新增</el-button> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
<!-- 角色新增-表单 --> |
|
|
|
<el-dialog |
|
|
|
append-to-body |
|
|
|
:title="layerTitle" |
|
|
|
:close-on-click-modal="false" |
|
|
|
:show-close="false" |
|
|
|
:visible.sync="roleFormVisible" |
|
|
|
width="960px" |
|
|
|
width="600px" |
|
|
|
top="20px" |
|
|
|
> |
|
|
|
<el-form |
|
|
|
@ -40,38 +41,28 @@ |
|
|
|
size="small" |
|
|
|
label-width="80px" |
|
|
|
> |
|
|
|
<el-form-item label="角色名称" prop="roleName"> |
|
|
|
<el-input v-model="form.roleName" style="width: 380px;" /> |
|
|
|
<el-form-item label="角色名称" prop="name"> |
|
|
|
<el-input v-model="form.name" 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, index) in roleTree" |
|
|
|
:key="index" |
|
|
|
:label="item.name" |
|
|
|
class="press_form" |
|
|
|
> |
|
|
|
<el-checkbox |
|
|
|
v-model="item.isCheck" |
|
|
|
:indeterminate="item.isIndeterminate" |
|
|
|
class="check_all" |
|
|
|
@change="handleCheckAllChange(index, $event)" |
|
|
|
>全选</el-checkbox> |
|
|
|
<div class="check_list"> |
|
|
|
<el-checkbox |
|
|
|
v-for="(items, i) in item.children" |
|
|
|
:key="i" |
|
|
|
v-model="items.isCheck" |
|
|
|
:label="items.name" |
|
|
|
@change="handleCheckedCitiesChange(index, items.Key, $event)" |
|
|
|
>{{ items.name }}</el-checkbox> |
|
|
|
</div> |
|
|
|
<el-form-item label="权限" prop="permissionAll"> |
|
|
|
<el-checkbox v-model="treeCheckAll" @change="handleCheckedAll">全选</el-checkbox> |
|
|
|
<el-tree |
|
|
|
ref="role" |
|
|
|
:data="roleTree" |
|
|
|
:default-expand-all="true" |
|
|
|
:props="defaultProps" |
|
|
|
show-checkbox |
|
|
|
node-key="id" |
|
|
|
@check-change="handleCheckChange" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" round>新增</el-button> |
|
|
|
<el-button round @click="roleFormVisible=false">关闭</el-button> |
|
|
|
<el-button type="primary" round @click="submitForm('form')">保存</el-button> |
|
|
|
<el-button round @click="resetForm('form')">关闭</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
<!-- 记录 --> |
|
|
|
@ -146,24 +137,36 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
import { FetchRolesList } from '@/api/system/role' |
|
|
|
import roleTree from './role.json' |
|
|
|
import roleTree from './role2.json' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'Role', |
|
|
|
components: { }, |
|
|
|
data() { |
|
|
|
var validatePass = (rule, value, callback) => { |
|
|
|
const arr = this.$refs.role.getCheckedKeys() // 在此获取选中的树形数据 |
|
|
|
if (arr.length == 0 || !arr) { |
|
|
|
callback(new Error('请选择功能权限设置')) |
|
|
|
} else { |
|
|
|
callback() |
|
|
|
} |
|
|
|
} |
|
|
|
return { |
|
|
|
roleList: [], |
|
|
|
menuIds: [], |
|
|
|
layerTitle: '', |
|
|
|
roleTree: null, |
|
|
|
defaultProps: { children: 'children', label: 'label' }, |
|
|
|
treeCheckAll: false, |
|
|
|
tags: [], |
|
|
|
currentChecked: null, |
|
|
|
page: 1, |
|
|
|
size: 10, |
|
|
|
total: 0, |
|
|
|
blurry: null, |
|
|
|
form: { |
|
|
|
id: null, |
|
|
|
roleName: null, |
|
|
|
name: null, |
|
|
|
permissionAll: [], |
|
|
|
library: [], |
|
|
|
publish: [], |
|
|
|
description: null |
|
|
|
}, |
|
|
|
roleFormVisible: false, |
|
|
|
@ -173,24 +176,6 @@ export default { |
|
|
|
edit: ['admin', 'roles:edit'], |
|
|
|
del: ['admin', 'roles:del'] |
|
|
|
}, |
|
|
|
roleData: [ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
roleName: '机构超级管理员', |
|
|
|
description: '系统内置', |
|
|
|
permissionList: [ |
|
|
|
{ name: '紧急通知' }, |
|
|
|
{ name: '内容发布服务' }, |
|
|
|
{ name: '播放列表服务' }, |
|
|
|
{ name: '主题模版' }, |
|
|
|
{ name: '设备列表' }, |
|
|
|
{ name: '开关机配置' }, |
|
|
|
{ name: '素材库' }, |
|
|
|
{ name: '权限管理' }, |
|
|
|
{ name: '用户管理' } |
|
|
|
] |
|
|
|
} |
|
|
|
], |
|
|
|
recordData: [ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
@ -201,16 +186,15 @@ export default { |
|
|
|
date: '2021-1-1 14:00' |
|
|
|
} |
|
|
|
], |
|
|
|
roleTree: null, |
|
|
|
ischeckAll: [], |
|
|
|
rules: { |
|
|
|
name: [{ required: true, message: '请输入名称', trigger: 'blur' }], |
|
|
|
permission: [{ required: true, message: '请输入权限', trigger: 'blur' }] |
|
|
|
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }], |
|
|
|
permissionAll: [{ required: true, validator: validatePass, trigger: 'change' }] |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.roleTree = roleTree |
|
|
|
console.log(this.roleTree.length) |
|
|
|
}, |
|
|
|
mounted: function() { |
|
|
|
this.getRolesList() |
|
|
|
@ -231,6 +215,53 @@ export default { |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
addRole() { |
|
|
|
this.roleFormVisible = true |
|
|
|
this.layerTitle = '新增' |
|
|
|
}, |
|
|
|
handleCheckedAll() { |
|
|
|
if (this.treeCheckAll) { |
|
|
|
this.$refs.role.setCheckedNodes(this.roleTree) |
|
|
|
} else { |
|
|
|
this.$refs.role.setCheckedKeys([]) |
|
|
|
} |
|
|
|
}, |
|
|
|
handleCheckChange(data, checked) { |
|
|
|
this.tags.push(data.label) |
|
|
|
this.form.permissionAll = this.$refs.role.getCheckedKeys().concat(this.$refs.role.getHalfCheckedKeys()) |
|
|
|
console.log(this.form.permissionAll, '选中的节点') |
|
|
|
this.currentChecked = checked |
|
|
|
for (var i = 0; i <= this.tags.length; i++) { |
|
|
|
if (this.currentChecked == false) { |
|
|
|
this.tags.splice(this.tags.indexOf(this.i), 1) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
console.log(this.$refs.role.getCheckedNodes()) |
|
|
|
console.log(this.tags) |
|
|
|
}, |
|
|
|
submitForm(formName) { |
|
|
|
this.$refs[formName].validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
console.log(this.form) |
|
|
|
alert('submit!') |
|
|
|
} else { |
|
|
|
console.log('error submit!!') |
|
|
|
return false |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
resetForm(formName) { |
|
|
|
this.$refs[formName].resetFields() |
|
|
|
this.roleFormVisible = false |
|
|
|
}, |
|
|
|
getMenuDatas(node, resolve) { |
|
|
|
setTimeout(() => { |
|
|
|
// getMenusTree(node.data.id ? node.data.id : 0).then(res => { |
|
|
|
// resolve(res) |
|
|
|
// }) |
|
|
|
}, 100) |
|
|
|
}, |
|
|
|
// 每条显示数据改变时的事件 |
|
|
|
handleSizeChange(size) { |
|
|
|
// 整理参数 |
|
|
|
@ -238,40 +269,41 @@ export default { |
|
|
|
this.getRolesList() |
|
|
|
}, |
|
|
|
// 全选反选的多选框 |
|
|
|
handleCheckAllChange(index, e) { |
|
|
|
this.roleTree[index].isCheck = e |
|
|
|
if (e == false) this.roleTree[index].isIndeterminate = false |
|
|
|
const 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) { |
|
|
|
const childrenArray = this.roleTree[index].children |
|
|
|
let tickCount = 0 |
|
|
|
let unTickCount = 0 |
|
|
|
const 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 |
|
|
|
} |
|
|
|
}, |
|
|
|
// handleCheckAllChange(index, e) { |
|
|
|
// this.roleTree[index].isCheck = e |
|
|
|
// if (e == false) this.roleTree[index].isIndeterminate = false |
|
|
|
// const 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) { |
|
|
|
// const childrenArray = this.roleTree[index].children |
|
|
|
// let tickCount = 0 |
|
|
|
// let unTickCount = 0 |
|
|
|
// const 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) { |
|
|
|
return row.level >= this.level |
|
|
|
}, |
|
|
|
editFormData(index, row) { |
|
|
|
this.roleFormVisible = true |
|
|
|
this.layerTitle = '编辑' |
|
|
|
this.form.roleName = row.roleName |
|
|
|
this.form.description = row.description |
|
|
|
}, |
|
|
|
|
