|
...
|
...
|
@@ -16,28 +16,38 @@ |
|
|
|
</el-col>
|
|
|
|
|
|
|
|
<!--列表-->
|
|
|
|
<el-table :data="roles" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
|
|
|
|
<el-table :data="roles" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"
|
|
|
|
default-expand-all
|
|
|
|
row-key="roleId"
|
|
|
|
border
|
|
|
|
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
|
|
|
|
<el-table-column type="selection" width="55">
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column type="index" width="60">
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="roleId" label="ID" width="100" sortable>
|
|
|
|
<!--<el-table-column type="index" width="60">-->
|
|
|
|
<!--</el-table-column>-->
|
|
|
|
<el-table-column prop="roleId" label="ID" width="120">
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="roleName" label="岗位/角色名称" min-width="200" sortable>
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="departmentName" label="部门名称" min-width="200" sortable>
|
|
|
|
<!--<el-table-column prop="departmentName" label="部门名称" min-width="200" sortable>-->
|
|
|
|
<!--</el-table-column>-->
|
|
|
|
<el-table-column prop="description" label="描述" min-width="160" >
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="type" label="类型" min-width="80" sortable>
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="description" label="岗位/角色描述" min-width="200" sortable>
|
|
|
|
<el-table-column prop="businessLicense" label="工商代码" min-width="180" >
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="customsRegCode" label="海关备案代码" min-width="150" >
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column label="操作" min-width="260">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<el-button type="primary" size="small" @click="handleAdd(scope.$index, scope.row)">新增下级</el-button>
|
|
|
|
<el-button size="small" @click="setPerm(scope.$index, scope.row)">设置权限</el-button>
|
|
|
|
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
|
|
|
<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
<!--工具条-->
|
|
|
|
<el-col :span="24" class="toolbar">
|
|
|
|
<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
|
|
...
|
...
|
@@ -76,23 +86,37 @@ |
|
|
|
|
|
|
|
<!--新增界面-->
|
|
|
|
<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
|
|
|
|
<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
|
|
|
|
<el-form-item label="岗位/角色名称" prop="roleName">
|
|
|
|
<el-input v-model="addForm.roleName" auto-complete="off" placeholder="请输入岗位/角色名称：例如:ROLE_name"></el-input>
|
|
|
|
<el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm">
|
|
|
|
<el-form-item label="上级组织机构">
|
|
|
|
<span>{{addForm.parentName}}</span>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="岗位/角色描述" prop="description">
|
|
|
|
<el-input v-model="addForm.description" auto-complete="off" placeholder="请输入岗位/角色描述：例如:用户管理员"></el-input>
|
|
|
|
<el-form-item label="组织机构名称" prop="roleName">
|
|
|
|
<el-input v-model="addForm.roleName" auto-complete="off" placeholder="请输入组织机构名称：例如:公司名称"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="部门名称" prop="roleSign">
|
|
|
|
<el-select v-model="addForm.departmentId" placeholder="请选择">
|
|
|
|
<el-form-item label="组织机构描述" prop="description">
|
|
|
|
<el-input v-model="addForm.description" auto-complete="off" placeholder="组织机构描述：例如:组织机构简介"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="组织机构类型" prop="description">
|
|
|
|
<el-select
|
|
|
|
v-model="addForm.type"
|
|
|
|
filterable
|
|
|
|
allow-create
|
|
|
|
default-first-option
|
|
|
|
placeholder="请选择类型">
|
|
|
|
<el-option
|
|
|
|
v-for="item in departmentNameList"
|
|
|
|
:key="item.departmentId"
|
|
|
|
:label="item.departmentName"
|
|
|
|
:value="item.departmentId">
|
|
|
|
v-for="item in companyOption"
|
|
|
|
:key="item.value"
|
|
|
|
:label="item.label"
|
|
|
|
:value="item.value">
|
|
|
|
</el-option>
|
|
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="工商企业代码" prop="description">
|
|
|
|
<el-input v-model="addForm.businessLicense" auto-complete="off" placeholder="社会信用代码或者组织机构代码"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="海关备案代码" prop="description">
|
|
|
|
<el-input v-model="addForm.customsRegCode" auto-complete="off" placeholder="海关备案后返回的备案代码"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
<el-button @click.native="addFormVisible = false">取消</el-button>
|
|
...
|
...
|
@@ -103,9 +127,11 @@ |
|
|
|
<!--权限设置界面-->
|
|
|
|
<el-dialog title="岗位的权限设置" :visible.sync="PermFormVisible" :close-on-click-modal="false">
|
|
|
|
<el-form :model="permForm" label-width="80px" ref="permForm">
|
|
|
|
<el-checkbox-group v-model="permIds" size="small">
|
|
|
|
<el-checkbox v-for="perm in permissons" :label="perm.permissionId" :key="perm.permissionId">{{perm.name}}</el-checkbox>
|
|
|
|
</el-checkbox-group>
|
|
|
|
<el-tree :data="permissons" :props="treeDefaultProps"
|
|
|
|
@check="clickDeal"
|
|
|
|
show-checkbox highlight-current default-expand-all check-on-click-node check-strictly
|
|
|
|
node-key="permissionId" ref="tree">
|
|
|
|
</el-tree>
|
|
|
|
</el-form>
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
<el-button @click.native="PermFormVisible = false">取消</el-button>
|
|
...
|
...
|
@@ -128,6 +154,20 @@ |
|
|
|
filters: {
|
|
|
|
roleName: ''
|
|
|
|
},
|
|
|
|
companyOption: [
|
|
|
|
{
|
|
|
|
label: "集团",
|
|
|
|
value: "集团"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: "公司",
|
|
|
|
value: "公司"
|
|
|
|
}
|
|
|
|
],
|
|
|
|
treeDefaultProps: {
|
|
|
|
children: 'children',
|
|
|
|
label: 'name',
|
|
|
|
},
|
|
|
|
departmentNameList:[],
|
|
|
|
roles: [],
|
|
|
|
permissons: [],
|
|
...
|
...
|
@@ -172,7 +212,12 @@ |
|
|
|
description: '',
|
|
|
|
roleName: '',
|
|
|
|
roleSign: 1,
|
|
|
|
departmentId:''
|
|
|
|
departmentId:'',
|
|
|
|
type: '',
|
|
|
|
businessLicense: '',
|
|
|
|
customsRegCode: '',
|
|
|
|
parentName: ''
|
|
|
|
|
|
|
|
},
|
|
|
|
permForm: {
|
|
|
|
roleId: 1,
|
|
...
|
...
|
@@ -225,7 +270,6 @@ |
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
//获取部门列表
|
|
|
|
getdepartmentNames() {
|
|
|
|
|
|
...
|
...
|
@@ -265,7 +309,11 @@ |
|
|
|
if(null!= error.response && error.response!==undefined){
|
|
|
|
let status= error.response.status;
|
|
|
|
let msg = error.response.statusText;
|
|
|
|
alert(status+msg);
|
|
|
|
message({
|
|
|
|
// 饿了么的消息弹窗组件
|
|
|
|
message: status+msg,
|
|
|
|
type: "error"
|
|
|
|
});
|
|
|
|
}else {
|
|
|
|
alert(error);
|
|
|
|
}
|
|
...
|
...
|
@@ -305,9 +353,10 @@ |
|
|
|
this.getdepartmentNames();
|
|
|
|
},
|
|
|
|
setPerm: function (index, row) {
|
|
|
|
this.PermFormVisible = true;
|
|
|
|
this.getPermList();
|
|
|
|
var _this = this;
|
|
|
|
this.permIds = [];
|
|
|
|
this.PermFormVisible = true;
|
|
|
|
this.permForm = Object.assign({}, row);
|
|
|
|
let rolePerms = this.permForm.permissions;
|
|
|
|
if (util.checkNull(rolePerms)){
|
|
...
|
...
|
@@ -317,22 +366,36 @@ |
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
this.getPermList();
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
|
|
|
//反向适配
|
|
|
|
this.$refs.tree.setCheckedKeys(this.permIds);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
//显示新增界面，每次点开初始化数据
|
|
|
|
handleAdd: function () {
|
|
|
|
handleAdd: function (index,row) {
|
|
|
|
this.addFormVisible = true;
|
|
|
|
this.addForm = {
|
|
|
|
username: '',
|
|
|
|
password: '',
|
|
|
|
sex: 1,
|
|
|
|
address: '',
|
|
|
|
realname: '',
|
|
|
|
email: '',
|
|
|
|
mobilephone: '',
|
|
|
|
age: 1
|
|
|
|
description: '',
|
|
|
|
roleName: '',
|
|
|
|
roleSign: 1,
|
|
|
|
departmentId:'',
|
|
|
|
type: '',
|
|
|
|
businessLicense: '',
|
|
|
|
customsRegCode: '',
|
|
|
|
parentid: 0
|
|
|
|
|
|
|
|
};
|
|
|
|
this.getdepartmentNames();
|
|
|
|
//如果新增下级
|
|
|
|
if(util.checkNull(row)){
|
|
|
|
//传递上级ID
|
|
|
|
let parentRole = Object.assign({}, row);
|
|
|
|
this.addForm.parentid = parentRole.roleId;
|
|
|
|
this.addForm.parentName = parentRole.roleName;
|
|
|
|
}
|
|
|
|
|
|
|
|
// this.getdepartmentNames();
|
|
|
|
},
|
|
|
|
//编辑
|
|
|
|
editSubmit: function () {
|
|
...
|
...
|
@@ -403,7 +466,7 @@ |
|
|
|
//NProgress.start();
|
|
|
|
let role = Object.assign({}, this.permForm);
|
|
|
|
let roleId = role.roleId;
|
|
|
|
let permissionIds = this.permIds
|
|
|
|
let permissionIds = this.$refs.tree.getCheckedKeys();
|
|
|
|
let para = {roleId,permissionIds};
|
|
|
|
updateRolePerm(para).then((res) => {
|
|
|
|
this.addLoading = false;
|
|
...
|
...
|
@@ -446,6 +509,81 @@ |
|
|
|
}).catch(() => {
|
|
|
|
|
|
|
|
});
|
|
|
|
},
|
|
|
|
treeHandleCheckChange: function (data, checked, indeterminate) {
|
|
|
|
if(checked) {
|
|
|
|
this.permIds.push(data.permissionId);
|
|
|
|
}else {
|
|
|
|
this.permIds.splice(this.permIds.contains(data.permissionId),1);
|
|
|
|
}
|
|
|
|
console.log(data, checked, indeterminate);
|
|
|
|
|
|
|
|
},
|
|
|
|
uniteParentSame(id,treeStatus){//当子节点全为未选中时父节点也变为未选中状态
|
|
|
|
let node = this.$refs.tree.getNode(permissionId);//获取当前节点的节点树
|
|
|
|
if (node.parent !== null && node.parent !== undefined) {
|
|
|
|
let parentNode = node.parent.data;//获取当前节点的父节点树
|
|
|
|
if (parentNode != undefined){//判断父节点是否存在
|
|
|
|
for (let i = 0; i < parentNode.children.length; i++) {
|
|
|
|
let checkedKeys = this.$refs.tree.getCheckedKeys();
|
|
|
|
let hafCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
|
|
|
|
let selectNodes = checkedKeys.concat(hafCheckedKeys);//获取已选择树节点
|
|
|
|
let selected = selectNodes.indexOf(parentNode.children[i].permissionId); // -1当前节点的同级节点是否全部未选中
|
|
|
|
if (selected !== -1){
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}else {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.$refs.tree.setChecked(parentNode.permissionId, false);//修改节点为未选择
|
|
|
|
if(node.level>2){//判断是否是最上级节点
|
|
|
|
this.uniteParentSame(parentNode.permissionId,treeStatus)
|
|
|
|
}
|
|
|
|
}else {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
// 统一处理子节点为相同的勾选状态
|
|
|
|
uniteChildSame(treeList, isSelected){
|
|
|
|
this.$refs.tree.setChecked(treeList.permissionId, isSelected);
|
|
|
|
if (treeList.children !== undefined){
|
|
|
|
for (let i = 0; i < treeList.children.length; i++) {
|
|
|
|
this.uniteChildSame(treeList.children[i], isSelected)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
// 统一处理父节点为选中
|
|
|
|
selectedParent(currentObj){
|
|
|
|
let currentNode = this.$refs.tree.getNode(currentObj);
|
|
|
|
if (currentNode.parent.key !== undefined) {
|
|
|
|
this.$refs.tree.setChecked(currentNode.parent, true);
|
|
|
|
this.selectedParent(currentNode.parent)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
clickDeal: function (currentObj, treeStatus){
|
|
|
|
// 用于：父子节点严格互不关联时，父节点勾选变化时通知子节点同步变化，实现单向关联。
|
|
|
|
let selected = treeStatus.checkedKeys.indexOf(currentObj.permissionId); // -1未选中
|
|
|
|
// 选中
|
|
|
|
if (selected !== -1) {
|
|
|
|
// 子节点只要被选中父节点就被选中
|
|
|
|
this.selectedParent(currentObj);
|
|
|
|
// 统一处理子节点为相同的勾选状态
|
|
|
|
this.uniteChildSame(currentObj, true)
|
|
|
|
} else {
|
|
|
|
// 未选中 处理子节点全部未选中
|
|
|
|
if (currentObj.children !== undefined){
|
|
|
|
if (currentObj.children.length !== 0) {
|
|
|
|
this.uniteChildSame(currentObj, false)
|
|
|
|
}
|
|
|
|
//放开时为当子节点全为未选中时父节点也变为未选中状态 注释后就是父节点不和子节点强制绑定
|
|
|
|
// this.uniteParentSame(currentObj.id,treeStatus)//当子节点全为未选中时父节点也变为未选中状态
|
|
|
|
}
|
|
|
|
// else {
|
|
|
|
// this.uniteParentSame(currentObj.id,treeStatus)
|
|
|
|
// }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
...
|
...
|
|
