mirror of
https://github.com/1024-lab/smart-admin.git
synced 2026-06-27 16:14:29 +00:00
v1.1.0
This commit is contained in:
zhuoda
+144
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<!--div tab切换，数据范围部分 start-->
|
||||
<div>
|
||||
<Row>
|
||||
<Col span="16" style="margin:20px 0;font-size: 15px;color: #95a5a6;"></Col>
|
||||
<Col class="button-style" span="8">
|
||||
<Button
|
||||
@click.native="updateDataScope"
|
||||
style="margin-right: 20px;"
|
||||
type="primary"
|
||||
v-privilege="'update-data-scope'"
|
||||
>保存</Button>
|
||||
<Button @click.native="getDataScope()" type="warning" v-privilege="'query-data-scope'">刷新</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style="border-bottom: 1px solid #f2f2f2;font-weight: 600; margin: 10px 0px;">
|
||||
<Col class="tab-margin" span="4">业务单据</Col>
|
||||
<Col class="tab-data" span="6">查看数据范围</Col>
|
||||
<Col class="tab-margin" span="14"></Col>
|
||||
</Row>
|
||||
<div class="no-scrollbar" style="height:680px;overflow-y: scroll">
|
||||
<Row
|
||||
:key="item.dataScopeType "
|
||||
style="border-bottom: 1px solid #f2f2f2; margin: 10px 0px;"
|
||||
v-for="item in this.dataScopeList"
|
||||
>
|
||||
<Col span="4" style="line-height:100px; text-align: center">{{item.dataScopeTypeName}}</Col>
|
||||
<!--Col 数据范围选中 start-->
|
||||
<Col class="tab-data" span="6">
|
||||
<RadioGroup v-model="item.viewType" vertical>
|
||||
<Radio
|
||||
:key="index+'viewType'"
|
||||
:label="scope.viewType"
|
||||
v-for="(scope,index) in item.viewTypeList"
|
||||
>{{scope.viewTypeName }}</Radio>
|
||||
</RadioGroup>
|
||||
</Col>
|
||||
<!--Col 数据范围选中 end-->
|
||||
<Col span="14" style="text-indent:2rem;line-height:30px;font-size:16px;color: #a3a3a3;">
|
||||
<p style="padding: 30px 0;">{{item.dataScopeTypeDesc}}</p>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
<!--div tab切换，数据范围部分 end-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { dataScopeApi } from '@/api/data-scope';
|
||||
export default {
|
||||
name: 'RoleDataScope',
|
||||
components: {},
|
||||
props: {
|
||||
// 角色id
|
||||
roleId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
validator: value => {
|
||||
return value >= 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataScopeList: {}
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
filters: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.getDataScope();
|
||||
},
|
||||
beforeCreate() {},
|
||||
beforeMount() {},
|
||||
beforeUpdate() {},
|
||||
updated() {},
|
||||
beforeDestroy() {},
|
||||
destroyed() {},
|
||||
activated() {},
|
||||
methods: {
|
||||
// 更新
|
||||
async updateDataScope() {
|
||||
try {
|
||||
let data = {
|
||||
roleId: this.roleId,
|
||||
batchSetList: this.dataScopeList
|
||||
};
|
||||
await dataScopeApi.updateDataScope(data);
|
||||
this.$Message.success('保存成功');
|
||||
this.getDataScope(this.employeeId);
|
||||
} catch (e) {
|
||||
//TODO zhuoda sentry
|
||||
console.error(e);
|
||||
}
|
||||
},
|
||||
// 获取数据
|
||||
async getDataScope() {
|
||||
try {
|
||||
let result = await dataScopeApi.getDataScopeList();
|
||||
this.dataScopeList = result.data;
|
||||
this.getRoleDataScope();
|
||||
} catch (e) {
|
||||
//TODO zhuoda sentry
|
||||
console.error(e);
|
||||
}
|
||||
},
|
||||
// 获取数据范围根据角色id
|
||||
async getRoleDataScope() {
|
||||
try {
|
||||
let result = await dataScopeApi.getDataScopeByRoleId(this.roleId);
|
||||
let data = result.data;
|
||||
this.dataScopeList.forEach((item, i) => {
|
||||
let find = data.find(e => e.dataScopeType == item.dataScopeType);
|
||||
if (find) {
|
||||
this.$set(item, 'viewType', find.viewType);
|
||||
} else {
|
||||
this.$set(item, 'viewType', '');
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
//TODO zhuoda sentry
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.button-style {
|
||||
margin: 20px 0 20px 0;
|
||||
padding-left: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
.tab-data {
|
||||
padding-left: 30px;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
.tab-margin {
|
||||
text-align: center;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,407 @@
|
||||
<template>
|
||||
<!--div tab切换成员列表部分 start-->
|
||||
<div>
|
||||
<Row>
|
||||
<Col span="16" style="margin:20px 0;font-size: 15px;color: #95a5a6;">管理拥有当前角色权限的人员列表</Col>
|
||||
<Col span="8" style="margin:20px 0; text-align: right;">
|
||||
<Button
|
||||
@click="addEmployee"
|
||||
type="primary"
|
||||
v-privilege="'add-employee-role'"
|
||||
>添加成员</Button>
|
||||
|
||||
<Button
|
||||
@click="deleteEmployees()"
|
||||
style="margin-left:10px"
|
||||
type="error"
|
||||
v-privilege="'delete-employee-role-batch'"
|
||||
>批量移除</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<!--Table 表格列表 start-->
|
||||
<Table
|
||||
:columns="columns"
|
||||
:data="tableData"
|
||||
:loading="isShowTablesLoading"
|
||||
@on-selection-change="selectChange"
|
||||
border
|
||||
ref="selection"
|
||||
></Table>
|
||||
<!--Table 表格列表 end-->
|
||||
<Row class="page" justify="end" type="flex">
|
||||
<Col order="2" span="24" style="text-align: right;margin-top:20px;">
|
||||
<Page
|
||||
:current="currentPage"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
@on-change="changePage"
|
||||
show-elevator
|
||||
></Page>
|
||||
</Col>
|
||||
</Row>
|
||||
<!--modal 添加成员 start-->
|
||||
<Modal
|
||||
@on-ok="confirmPrepAddEmployees()"
|
||||
style="min-width:1800px"
|
||||
title="添加成员"
|
||||
v-model="isShowEmployeeModal"
|
||||
width="700"
|
||||
>
|
||||
<Row class="shuttle-box">
|
||||
<!--Col 左侧员工列表 start-->
|
||||
<Col class="box" span="11">
|
||||
<Row>
|
||||
<Col class="title" span="24">员工列表</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col
|
||||
@dblclick.native="getCharge"
|
||||
class="no-scrollbar"
|
||||
id="goRight"
|
||||
span="24"
|
||||
style="height: 290px;overflow-y:scroll"
|
||||
>
|
||||
<DepartmentEmployeeTree ref="departmentEmployeeTree"></DepartmentEmployeeTree>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<!--Col 左侧员工列表 end-->
|
||||
<!--Col 转移按钮 start-->
|
||||
<Col span="2" style="text-align: center;">
|
||||
<Icon
|
||||
@click.native="addPrepEmployees"
|
||||
size="30"
|
||||
style="line-height: 350px"
|
||||
type="md-arrow-round-forward"
|
||||
></Icon>
|
||||
</Col>
|
||||
<!--Col 转移按钮 end-->
|
||||
<!--Col 右侧预添加列表 start-->
|
||||
<Col class="box" span="11">
|
||||
<Row>
|
||||
<Col class="title" span="24">成员列表</Col>
|
||||
<Col
|
||||
class="no-scrollbar"
|
||||
span="24"
|
||||
style="overflow-y:scroll;height: 290px;text-align: center"
|
||||
>
|
||||
<Row :key="index" v-for="(item,index) in prepAddEmployees">
|
||||
<Col span="24" style="font-size: 15px;text-align: center;">
|
||||
<icon type="ios-people"></icon>
|
||||
{{item.manageName}}
|
||||
<Button @click.native="deletePrepEmployee(index)" icon="md-close" type="text"></Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<!--Col 右侧预添加列表 end-->
|
||||
</Row>
|
||||
</Modal>
|
||||
<!--modal 添加成员 end-->
|
||||
</div>
|
||||
<!--div tab切换成员列表部分 end-->
|
||||
</template>
|
||||
<script>
|
||||
import DepartmentEmployeeTree from '../../../components/department-employee-tree/department-employee-tree';
|
||||
import { roleApi } from '@/api/role';
|
||||
|
||||
export default {
|
||||
name: 'RoleList',
|
||||
components: {
|
||||
DepartmentEmployeeTree
|
||||
},
|
||||
props: {
|
||||
// 角色id
|
||||
roleId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
validator: value => {
|
||||
return value >= 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 数据
|
||||
data() {
|
||||
return {
|
||||
// 是否显示添加成员弹窗
|
||||
isShowEmployeeModal: false,
|
||||
currentPage: 1,
|
||||
isShowTablesLoading: false,
|
||||
columns: [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 60,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '登录名',
|
||||
key: 'loginName'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'actualName'
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
key: 'phone'
|
||||
},
|
||||
{
|
||||
title: '邮箱',
|
||||
key: 'email'
|
||||
},
|
||||
{
|
||||
title: '部门',
|
||||
key: 'departmentName'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'operation ',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
className: 'action-hide',
|
||||
render: (h, params) => {
|
||||
return this.$tableAction(h, [
|
||||
{
|
||||
title: '移除',
|
||||
directives: [
|
||||
{
|
||||
name: 'privilege',
|
||||
value: 'delete-employee-role'
|
||||
}
|
||||
],
|
||||
action: () => {
|
||||
this.deleteEmployee(params.index);
|
||||
}
|
||||
}
|
||||
]);
|
||||
}
|
||||
}
|
||||
],
|
||||
employeeData: {
|
||||
// orderby:'',
|
||||
roleId: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
sort: ''
|
||||
},
|
||||
// 表格数据
|
||||
tableData: [],
|
||||
// 待添加的成员列表
|
||||
prepAddEmployees: [],
|
||||
// 提交添加成员数据
|
||||
submitPrepAddEmployeesData: {
|
||||
// 提交成员id列表
|
||||
employeeIds: [],
|
||||
// 当前roleId
|
||||
roleId: 0
|
||||
},
|
||||
// 批量删除的id列表
|
||||
deleteIds: [],
|
||||
total: 0,
|
||||
pageSize: 0
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
roleId(val) {
|
||||
if (val) {
|
||||
this.employeeData.roleId = this.roleId;
|
||||
this.getListEmployee(this.employeeData);
|
||||
}
|
||||
}
|
||||
},
|
||||
filters: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.employeeData.roleId = this.roleId;
|
||||
this.getListEmployee(this.employeeData);
|
||||
},
|
||||
beforeCreate() {},
|
||||
beforeMount() {},
|
||||
beforeUpdate() {},
|
||||
updated() {},
|
||||
beforeDestroy() {},
|
||||
destroyed() {},
|
||||
activated() {},
|
||||
methods: {
|
||||
// 批量删除
|
||||
deleteEmployees() {
|
||||
let object = {};
|
||||
object.employeeIds = this.deleteIds.slice(0, this.deleteIds.length);
|
||||
object.roleId = this.roleId;
|
||||
if (object.employeeIds.length <= 0) {
|
||||
this.$Message.error('请先选择要移除的成员');
|
||||
} else {
|
||||
this.deleteEmployeeList(object); // 删除
|
||||
}
|
||||
},
|
||||
// 删除待添加列表中 人员
|
||||
deletePrepEmployee(index) {
|
||||
this.prepAddEmployees.splice(index, 1);
|
||||
},
|
||||
// 批量删除方法
|
||||
async deleteEmployeeList(param) {
|
||||
this.isShowTablesLoading = true;
|
||||
try {
|
||||
await roleApi.deleteEmployeeList(param);
|
||||
await this.getListEmployee(this.employeeData); // 刷新数据
|
||||
} catch (e) {
|
||||
//TODO zhuoda sentry
|
||||
console.error(e);
|
||||
} finally {
|
||||
this.isShowTablesLoading = false;
|
||||
}
|
||||
},
|
||||
// 选项框多选移除
|
||||
selectChange(selection) {
|
||||
this.deleteIds = [];
|
||||
for (let i = 0; i < selection.length; i++) {
|
||||
this.deleteIds.push(selection[i].id);
|
||||
}
|
||||
console.log(this.deleteIds);
|
||||
},
|
||||
// 移除当前项
|
||||
deleteEmployee(index) {
|
||||
let object = {};
|
||||
object.employeeId = this.tableData[index].id;
|
||||
object.roleId = this.roleId;
|
||||
this.deleteEmployeeRole(object);
|
||||
},
|
||||
// 删除角色成员方法
|
||||
async deleteEmployeeRole(param) {
|
||||
this.isShowTablesLoading = true;
|
||||
try {
|
||||
await roleApi.deleteEmployeeRole(param);
|
||||
this.$Message.success('移除成功');
|
||||
await this.getListEmployee(this.employeeData);
|
||||
} catch (e) {
|
||||
//TODO zhuoda sentry
|
||||
console.error(e);
|
||||
} finally {
|
||||
this.isShowTablesLoading = false;
|
||||
}
|
||||
},
|
||||
// 分页改变获取数据方法
|
||||
// 分页器
|
||||
changePage(number) {
|
||||
console.log(number);
|
||||
let object = {};
|
||||
object.roleId = this.roleId;
|
||||
this.currentPage = number;
|
||||
object.pageNum = number;
|
||||
object.pageSize = this.pageSize;
|
||||
object.sort = '';
|
||||
this.getListEmployee(object);
|
||||
},
|
||||
// 确定添加角色成员
|
||||
confirmPrepAddEmployees() {
|
||||
this.submitPrepAddEmployeesData.employeeIds = [];
|
||||
this.prepAddEmployees.forEach(e => {
|
||||
console.log(e);
|
||||
this.submitPrepAddEmployeesData.employeeIds.push(e.manageId);
|
||||
});
|
||||
console.log(this.prepAddEmployees);
|
||||
this.submitPrepAddEmployeesData.roleId = this.roleId;
|
||||
this.addEmployeeListRole(this.submitPrepAddEmployeesData);
|
||||
this.getListEmployee(this.employeeData); // 刷新表格
|
||||
},
|
||||
// 添加角色成员方法
|
||||
async addEmployeeListRole(param) {
|
||||
this.isShowTablesLoading = true;
|
||||
try {
|
||||
await roleApi.addEmployeeListRole(param);
|
||||
this.$Message.success('添加成功');
|
||||
this.employeeData.roleId = this.roleId;
|
||||
await this.getListEmployee(this.employeeData);
|
||||
} catch (e) {
|
||||
//TODO zhuoda sentry
|
||||
console.error(e);
|
||||
} finally {
|
||||
this.isShowTablesLoading = false;
|
||||
}
|
||||
},
|
||||
// 穿梭框穿梭方法
|
||||
addPrepEmployees() {
|
||||
let obj = this.$refs.departmentEmployeeTree.getSelect();
|
||||
let Obj = {};
|
||||
let notHave = true;
|
||||
Obj.manageName = obj.name;
|
||||
Obj.manageId = obj.id;
|
||||
for (let i = 0; i < this.prepAddEmployees.length; i++) {
|
||||
if (this.prepAddEmployees[i].manageId === Obj.manageId) {
|
||||
notHave = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (notHave === true) {
|
||||
notHave = false;
|
||||
this.submitPrepAddEmployeesData.employeeIds.push(Obj.manageId);
|
||||
this.prepAddEmployees.push(Obj);
|
||||
}
|
||||
},
|
||||
// 获取角色id对应的成员列表方法
|
||||
async getListEmployee(param) {
|
||||
this.isShowTablesLoading = true;
|
||||
try {
|
||||
let response = await roleApi.getListEmployee(param);
|
||||
this.roleList = response.data;
|
||||
this.total = response.data.total;
|
||||
this.pageSize = response.data.pageSize;
|
||||
this.tableData = this.roleList.list;
|
||||
await this.getListAllEmployee();
|
||||
} catch (e) {
|
||||
//TODO zhuoda sentry
|
||||
console.error(e);
|
||||
} finally {
|
||||
this.isShowTablesLoading = false;
|
||||
}
|
||||
},
|
||||
// 获取角色id对应的全部成员列表方法
|
||||
async getListAllEmployee() {
|
||||
this.$isShowTablesLoading = true;
|
||||
try {
|
||||
let response = await roleApi.getAllListEmployee(this.roleId);
|
||||
let list = response.data;
|
||||
this.prepAddEmployees = [];
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let object = {};
|
||||
object.manageName = list[i].actualName;
|
||||
object.manageId = list[i].id;
|
||||
this.prepAddEmployees.push(object);
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO zhuoda sentry
|
||||
console.error(e);
|
||||
} finally {
|
||||
this.isShowTablesLoading = false;
|
||||
}
|
||||
},
|
||||
// 添加成员方法，
|
||||
addEmployee() {
|
||||
this.isShowEmployeeModal = true;
|
||||
this.getListAllEmployee();
|
||||
this.submitPrepAddEmployeesData.employeeIds = [];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped >
|
||||
.shuttle-box {
|
||||
position: relative;
|
||||
.box {
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
height: 330px;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 10px 0;
|
||||
background: #426783;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,403 @@
|
||||
<template>
|
||||
<!--div 功能权限部分 start-->
|
||||
<div id="tree">
|
||||
<Row>
|
||||
<Col class="col-desc" span="16">设置角色对应的功能操作、后台管理权限</Col>
|
||||
<Col class="button-style" span="8">
|
||||
<Button
|
||||
@click.native="saveChange()"
|
||||
style="margin-right: 20px;"
|
||||
type="primary"
|
||||
v-privilege="'update-role-privilege'"
|
||||
>保存</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<!--CheckboxGroup 功能权限勾选部分 start-->
|
||||
<CheckboxGroup v-model="checkedData">
|
||||
<div class="checked-box">
|
||||
<ul>
|
||||
<!--li 一级权限模块 start-->
|
||||
<li :key="module.key" v-for="(module, moduleIndex) in tree">
|
||||
<div class="level-one">
|
||||
<Checkbox
|
||||
:label="module.key"
|
||||
@click.prevent.native="selectCheckbox(tree, moduleIndex)"
|
||||
>{{module.name}}</Checkbox>
|
||||
</div>
|
||||
<!--div 二级权限模块 start-->
|
||||
<div
|
||||
:key="childrenModule.key"
|
||||
class="level-teo"
|
||||
v-for="(childrenModule, childrenModuleIndex) in module.children"
|
||||
>
|
||||
<Checkbox
|
||||
:label="childrenModule.key"
|
||||
@click.prevent.native="selectCheckbox(module.children,childrenModuleIndex,tree)"
|
||||
class="level-teo-label"
|
||||
>{{childrenModule.name}}</Checkbox>
|
||||
<!--div 三级权限模块 start-->
|
||||
<div class="level-three">
|
||||
<template v-for="(pages,pagesIndex) in childrenModule.children">
|
||||
<div
|
||||
:key="pages.key"
|
||||
class="isLevel-four"
|
||||
v-if="pages.children && pages.children.length > 0"
|
||||
>
|
||||
<Checkbox
|
||||
:key="pages.key"
|
||||
:label="pages.key"
|
||||
@click.prevent.native="selectCheckbox(childrenModule.children,pagesIndex,module.children)"
|
||||
class="level-three-label"
|
||||
>{{pages.name}}</Checkbox>
|
||||
<div :key="pagesIndex" class="Level-four" v-if="pages.children.length > 0">
|
||||
<template v-for="(page, pageIndex) in pages.children">
|
||||
<Checkbox
|
||||
:key="page.key"
|
||||
:label="page.key"
|
||||
@click.prevent.native="selectCheckbox(pages.children, pageIndex,childrenModule.children,module.children)"
|
||||
>{{page.name}}</Checkbox>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<Checkbox
|
||||
:key="pages.key"
|
||||
:label="pages.key"
|
||||
@click.prevent.native="selectCheckbox(childrenModule.children,pagesIndex,module.children)"
|
||||
v-else
|
||||
>{{pages.name}}</Checkbox>
|
||||
</template>
|
||||
</div>
|
||||
<!--div 三级权限模块 end-->
|
||||
</div>
|
||||
<!--div 二级权限模块 end-->
|
||||
</li>
|
||||
<!--li 一级权限模块 end-->
|
||||
</ul>
|
||||
</div>
|
||||
</CheckboxGroup>
|
||||
<!--CheckboxGroup 功能权限勾选部分 end-->
|
||||
</div>
|
||||
<!--div 功能权限部分 end-->
|
||||
</template>
|
||||
<script>
|
||||
import { roleApi } from '@/api/role';
|
||||
import { privilegeApi } from '@/api/privilege';
|
||||
|
||||
export default {
|
||||
name: 'RoleTree',
|
||||
props: {
|
||||
// 角色id
|
||||
roleId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
validator: value => {
|
||||
return value >= 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
// 父级组件数据传递
|
||||
data() {
|
||||
return {
|
||||
// 权限数据
|
||||
tree: [],
|
||||
loading: false,
|
||||
// 提交保存数据
|
||||
rolePower: {
|
||||
privilegeKeyList: [],
|
||||
roleId: ''
|
||||
},
|
||||
// 已选项
|
||||
checkedData: []
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
roleId(newVal) {
|
||||
if (newVal) {
|
||||
this.getListPrivilegeByRoleId(newVal);
|
||||
}
|
||||
}
|
||||
},
|
||||
filters: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.getListPrivilegeByRoleId(this.roleId);
|
||||
},
|
||||
beforeCreate() {},
|
||||
beforeMount() {},
|
||||
beforeUpdate() {},
|
||||
updated() {},
|
||||
beforeDestroy() {},
|
||||
destroyed() {},
|
||||
activated() {},
|
||||
methods: {
|
||||
// 勾选权限
|
||||
selectCheckbox(
|
||||
currentModuleList,
|
||||
moduleIndex,
|
||||
upOneModuleList,
|
||||
upTwoModuleList
|
||||
) {
|
||||
let module = currentModuleList[moduleIndex];
|
||||
// 是否勾选
|
||||
let findIndex = this.checkedData.indexOf(module.key);
|
||||
if (findIndex !== -1) {
|
||||
this.spliceCheck(module);
|
||||
// 取消的上级ID
|
||||
// 判断同级是否全部已取消勾选
|
||||
let currentLevelAllUnchecked = this.isUnCheckedThisLevel(
|
||||
currentModuleList
|
||||
);
|
||||
if (currentLevelAllUnchecked && upOneModuleList) {
|
||||
// 判断上级是否全部已取消勾选
|
||||
let upOneLevelAllUnchecked = this.isUnCheckedThisLevel(
|
||||
upOneModuleList
|
||||
);
|
||||
if (upOneLevelAllUnchecked && upTwoModuleList) {
|
||||
// 判断上上级是否全部已取消勾选
|
||||
this.isUnCheckedThisLevel(upTwoModuleList);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 选中子级所有checkBox
|
||||
this.addCheck(module);
|
||||
// 选中上级组件
|
||||
if (module.parentKey) {
|
||||
if (
|
||||
this.checkedData.findIndex(val => val === module.parentKey) === -1
|
||||
) {
|
||||
this.checkedData.push(module.parentKey);
|
||||
}
|
||||
}
|
||||
// 选中上上级组件
|
||||
if (upOneModuleList) {
|
||||
let upOneFindIndex = upOneModuleList.findIndex(
|
||||
e => e.key === module.parentKey
|
||||
);
|
||||
let upOneFind =
|
||||
upOneFindIndex === -1 ? null : upOneModuleList[upOneFindIndex];
|
||||
if (
|
||||
upOneFind &&
|
||||
upOneFind.parentKey &&
|
||||
this.checkedData.findIndex(val => val === upOneFind.parentKey) ===
|
||||
-1
|
||||
) {
|
||||
this.checkedData.push(upOneFind.parentKey);
|
||||
}
|
||||
// 选中上上上级组件
|
||||
if (upTwoModuleList) {
|
||||
console.log(1111, upTwoModuleList, upOneFind);
|
||||
let upTwoFindIndex = upTwoModuleList.findIndex(
|
||||
e => e.key === upOneFind.parentKey
|
||||
);
|
||||
let upTwoFind =
|
||||
upTwoFindIndex === -1 ? null : upTwoModuleList[upTwoFindIndex];
|
||||
if (
|
||||
upTwoFind &&
|
||||
upTwoFind.parentKey &&
|
||||
this.checkedData.findIndex(val => val === upTwoFind.parentKey) ===
|
||||
-1
|
||||
) {
|
||||
this.checkedData.push(upTwoFind.parentKey);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 判断同级是否全部已取消勾选
|
||||
isUnCheckedThisLevel(moduleList) {
|
||||
let thisLevelAllUnchecked = true;
|
||||
moduleList.forEach(e => {
|
||||
let brotherIndex = this.checkedData.findIndex(val => val == e.key);
|
||||
if (brotherIndex != -1) {
|
||||
thisLevelAllUnchecked = false;
|
||||
}
|
||||
});
|
||||
if (thisLevelAllUnchecked) {
|
||||
let number = this.checkedData.findIndex(
|
||||
e => e == moduleList[0].parentKey
|
||||
);
|
||||
if (number != -1) {
|
||||
this.checkedData.splice(number, 1);
|
||||
}
|
||||
}
|
||||
return thisLevelAllUnchecked;
|
||||
},
|
||||
// 选中子级所有checkBox
|
||||
addCheck(module) {
|
||||
let findIndex = this.checkedData.findIndex(val => val == module.key);
|
||||
if (findIndex == -1) {
|
||||
this.checkedData.push(module.key);
|
||||
}
|
||||
if (module.children) {
|
||||
module.children.forEach(item => {
|
||||
this.addCheck(item);
|
||||
});
|
||||
}
|
||||
},
|
||||
// 取消自己和下级勾选
|
||||
spliceCheck(module) {
|
||||
let findIndex = this.checkedData.findIndex(val => val == module.key);
|
||||
if (findIndex != -1) {
|
||||
this.checkedData.splice(findIndex, 1);
|
||||
}
|
||||
if (module.children) {
|
||||
module.children.forEach(item => {
|
||||
this.spliceCheck(item);
|
||||
});
|
||||
}
|
||||
},
|
||||
// 保存改变权限
|
||||
saveChange() {
|
||||
if (this.checkedData.length == 0) {
|
||||
this.$Message.error('还未选择任何权限');
|
||||
return;
|
||||
}
|
||||
this.rolePower.roleId = this.roleId;
|
||||
this.rolePower.privilegeKeyList = this.checkedData.concat();
|
||||
this.getRolePower(this.rolePower);
|
||||
},
|
||||
// 更新角色功能权限方法
|
||||
async getRolePower(data) {
|
||||
this.$Spin.show();
|
||||
try {
|
||||
await privilegeApi.getRolePower(data);
|
||||
this.$Message.info('保存成功');
|
||||
this.rolePower.privilegeKeyList = [];
|
||||
await this.getListPrivilegeByRoleId(this.roleId);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
this.$Spin.hide();
|
||||
}
|
||||
},
|
||||
// 获取角色可选的功能权限
|
||||
async getListPrivilegeByRoleId(id) {
|
||||
try {
|
||||
let response = await privilegeApi.getListPrivilegeByRoleId(id);
|
||||
let datas = response.data;
|
||||
this.tree = datas.privilege;
|
||||
console.log('tree', this.tree);
|
||||
this.checkedData = datas.selectedKey || [];
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#tree {
|
||||
border: 1px solid #dcdee2;
|
||||
border-top: none;
|
||||
}
|
||||
.col-desc {
|
||||
margin: 20px 0;
|
||||
font-size: 15px;
|
||||
color: #95a5a6;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.button-style {
|
||||
margin: 20px 0 20px 0;
|
||||
padding-left: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
.check-right {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.row-border {
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
.col-border {
|
||||
line-height: 50px;
|
||||
padding-left: 20px;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
.col-left {
|
||||
line-height: 50px;
|
||||
padding-left: 40px;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
.col-right {
|
||||
padding-left: 20px;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
.ivu-tree ul li {
|
||||
white-space: normal;
|
||||
}
|
||||
.ivu-tree {
|
||||
> ul {
|
||||
> li {
|
||||
> ul {
|
||||
> li {
|
||||
.ivu-tree-title {
|
||||
vertical-align: middle;
|
||||
font-weight: bold;
|
||||
}
|
||||
> ul {
|
||||
display: inline-block;
|
||||
.ivu-tree-title {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.checked-box {
|
||||
padding: 0 15px;
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
.level-one {
|
||||
border-bottom: 1px solid rgb(240, 240, 240);
|
||||
padding: 10px 0;
|
||||
}
|
||||
.level-teo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 4%;
|
||||
position: relative;
|
||||
border-bottom: 1px solid rgb(240, 240, 240);
|
||||
line-height: 40px;
|
||||
.level-teo-label {
|
||||
width: 12%;
|
||||
min-width: 120px;
|
||||
}
|
||||
// &:before{ content: ''; position: absolute; height: 100%; width: 1px; background: rgb(240, 240, 240); left: 12%; top: 0; }
|
||||
.level-three {
|
||||
padding-left: 4%;
|
||||
display: block;
|
||||
flex: 1;
|
||||
min-height: 40px;
|
||||
border-left: 1px rgb(240, 240, 240) solid;
|
||||
.isLevel-four {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.level-three-label {
|
||||
width: 12%;
|
||||
min-width: 120px;
|
||||
}
|
||||
.Level-four {
|
||||
padding-left: 4%;
|
||||
flex: 1;
|
||||
min-height: 40px;
|
||||
border-left: 1px rgb(240, 240, 240) solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ivu-checkbox-wrapper {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user