朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 96adf75c9295b57c1f7d5eb45e5252b196e37c93 1 个父辈 567278fb master ... ExportOrder analysis flightplan2.0 kako_vue master_dev master_dev_markdown master_dev_permission master_ffmTemp message_bus vehicle_dispatch zhidan

用户岗位/角色/权限树形结构完毕

内嵌 并排对比
正在显示 5 个修改的文件 包含 189 行增加 和 48 行删除
... ... @@ -12,7 +12,8 @@ Array.prototype.contains = function(obj) {
}
}
return false;
},
}
function padding(s, len) {
len = len - (s + '').length;
for (var i = 0; i < len; i++) { s = '0' + s; }
... ...
... ... @@ -126,7 +126,7 @@ axios.interceptors.response.use(
}
}
// 返回 response 里的错误信息
let errorInfo = error.data.error ? error.data.error.message : error.data;
let errorInfo = error.response ? error.response.statusText : (error.data.error ? error.data.error.message : error.message);
return Promise.reject(errorInfo);
}
);
... ...
... ... @@ -16,22 +16,26 @@
</el-col>
<!--列表-->
<el-table :data="tableList" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
<el-table :data="tableList" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"
row-key="permissionId"
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 type="index" width="60">-->
<!--</el-table-column>-->
<el-table-column prop="permissionId" label="ID" width="130" sortable>
</el-table-column>
<el-table-column prop="permissionId" label="ID" width="100" sortable>
<el-table-column prop="name" label="权限名称" min-width="150" sortable>
</el-table-column>
<el-table-column prop="name" label="权限名称" min-width="200" sortable>
<el-table-column prop="description" label="描述" min-width="120" sortable>
</el-table-column>
<el-table-column prop="description" label="描述" min-width="200" sortable>
<el-table-column prop="ismenu" label="是否目录" width="100" :formatter="formatState" sortable>
</el-table-column>
<el-table-column prop="permissionOrder" label="排序" width="100" sortable>
<el-table-column prop="url" label="访问路径" width="300" sortable>
</el-table-column>
<el-table-column prop="url" label="路径" width="100" sortable>
</el-table-column>
<el-table-column label="操作" min-width="150">
<el-table-column label="操作" min-width="100">
<template slot-scope="scope">
<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>
... ... @@ -143,7 +147,7 @@
tableList: [],
total: 0,
pageNum: 1,
pageSize: 10,
pageSize: 100,
listLoading: false,
sels: [],//列表选中列
//编辑界面是否显示
... ... @@ -208,7 +212,7 @@
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
},
formatState: function (row, column) {
return row.state == true ? '是' : row.state == false ? '否' : '未知';
return row.ismenu == true ? '是' : row.ismenu == false ? '否' : '未知';
},
handleCurrentChange(val) {
this.pageNum = val;
... ...
... ... @@ -23,18 +23,25 @@
: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>-->
<el-table-column prop="description" label="描述" min-width="200" sortable>
<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="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>
... ... @@ -79,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="roleName">
<el-input v-model="addForm.roleName" auto-complete="off" placeholder="请输入组织机构名称：例如:公司名称"></el-input>
</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="description">
<el-input v-model="addForm.description" 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-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>
... ... @@ -106,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>
... ... @@ -131,6 +154,20 @@
filters: {
roleName: ''
},
companyOption: [
{
label: "集团",
value: "集团"
},
{
label: "公司",
value: "公司"
}
],
treeDefaultProps: {
children: 'children',
label: 'name',
},
departmentNameList:[],
roles: [],
permissons: [],
... ... @@ -175,7 +212,12 @@
description: '',
roleName: '',
roleSign: 1,
departmentId:''
departmentId:'',
type: '',
businessLicense: '',
customsRegCode: '',
parentName: ''
},
permForm: {
roleId: 1,
... ... @@ -228,7 +270,6 @@
},
//获取部门列表
getdepartmentNames() {
... ... @@ -268,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);
}
... ... @@ -308,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)){
... ... @@ -320,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
};
this.getdepartmentNames();
description: '',
roleName: '',
roleSign: 1,
departmentId:'',
type: '',
businessLicense: '',
customsRegCode: '',
parentid: 0
};
//如果新增下级
if(util.checkNull(row)){
//传递上级ID
let parentRole = Object.assign({}, row);
this.addForm.parentid = parentRole.roleId;
this.addForm.parentName = parentRole.roleName;
}
// this.getdepartmentNames();
},
//编辑
editSubmit: function () {
... ... @@ -406,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;
... ... @@ -449,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() {
... ...