作者 小范

组织机构新增配置数据权限+数据权限界面优化

... ... @@ -8,47 +8,52 @@
</el-form>
</el-col>
</el-row>
<el-table :data="tableList" style="width: 100%">
<el-table :data="tableList"
tooltip-effect="dark"
style="border-radius: 10px 10px 0px 0px;line-height: 25px"
height="600px"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
border>
<el-table-column type="expand">
<template slot-scope="scope">
<el-form label-position="left" class="demo-table-expand" :inline="true">
<el-form-item label="创建时间">
<el-form label-position="left" label-width="80px" class="demo-table-expand" :inline="true">
<el-form-item label="创建时间" style="margin-left: 20px">
<span>{{ scope.row.create_time }}</span>
</el-form-item>
<el-form-item label="更新时间">
<el-form-item label="更新时间" style="margin-left: -250px">
<span>{{ scope.row.update_time }}</span>
</el-form-item>
<el-form-item label="创建人">
<el-form-item label="创建人" style="margin-left: 20px">
<span>{{ scope.row.create_user }}</span>
</el-form-item>
<el-form-item label="接口描述">
<el-form-item label="接口描述" style="margin-left: -250px">
<span>{{ scope.row.perm_des }}</span>
</el-form-item>
<el-form-item label="路由ID">
<el-form-item label="路由ID" style="margin-left: 20px">
<span>{{ scope.row.permission_id }}</span>
</el-form-item>
<el-form-item label="路由地址">
<el-form-item label="路由地址" style="margin-left: -250px">
<span>{{ scope.row.path }}</span>
</el-form-item>
<el-form-item label="路由名称">
<el-form-item label="路由名称" style="margin-left: 20px">
<span>{{ scope.row.interface_name }}</span>
</el-form-item>
<el-form-item label="服务名称">
<el-form-item label="服务名称" style="margin-left: -250px">
<span>{{ scope.row.service_name }}</span>
</el-form-item>
<el-form-item label="列条件">
<el-form-item label="列条件" style="margin-left: 20px">
<span>{{ scope.row.cols_list }}</span>
</el-form-item>
<el-form-item label="服务描述">
<el-form-item label="服务描述" style="margin-left: -250px">
<span>{{ scope.row.service_name_des }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<!-- 表格列配置 -->
<el-table-column prop="data_perm_id" label="ID"></el-table-column>
<el-table-column prop="perm_name" label="名称"></el-table-column>
<el-table-column prop="perm_sort" label="排序"></el-table-column>
<el-table-column prop="data_perm_id" label="ID" fixed="left"></el-table-column>
<el-table-column prop="perm_name" label="名称" width="200px"></el-table-column>
<el-table-column prop="perm_sort" label="排序" width="50px"></el-table-column>
<el-table-column prop="row_condition" label="行条件"></el-table-column>
<el-table-column prop="row_condition_property" label="属性名"></el-table-column>
<el-table-column prop="cols_list" label="列条件" show-overflow-tooltip></el-table-column>
... ... @@ -60,7 +65,7 @@
<el-tag type="danger" v-else>禁用</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<el-table-column label="操作" width="150" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row.data_perm_id)">删除</el-button>
... ...
... ... @@ -153,12 +153,17 @@
</div>
</el-dialog>
<!--权限设置界面-->
<el-dialog title="岗位的权限设置"
:visible.sync="PermFormVisible"
:close-on-click-modal="false"
top="5vh" width="75%"
>
<template>
<el-tabs style="border: 0px;background-color: rgba(0,0,0,0)" v-model="activeName" @tab-click="handleClick">
<el-tab-pane style="border: 0px;background-color: rgba(0,0,0,0)" label="权限管理" name="first">
<el-row>
<el-col :span="4" >
<el-button type="primary" @click.native="treeMerge(false)">合并节点</el-button>
... ... @@ -176,10 +181,36 @@
node-key="permissionId" ref="tree">
</el-tree>
</el-form>
<div slot="footer" class="dialog-footer">
<div align="center" class="dialog-footer" style="margin-bottom: 20px">
<el-button @click.native="PermFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="setPermSubmit" :loading="addLoading">提交</el-button>
</div>
</el-tab-pane>
<el-tab-pane label="数据权限" name="second">
<!-- <el-row>-->
<!-- <el-col :span="4" >-->
<!-- <el-button type="primary" @click.native="treeMerges(false)">合并节点</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="4">-->
<!-- <el-button type="success" @click.native="treeMerges(true)">展开节点</el-button>-->
<!-- </el-col>-->
<!-- </el-row>-->
<el-divider></el-divider>
<el-form :model="permForms" style="width: 95%" ref="permForm">
<el-tree :data="departmentNameList" :props="treeDefaultPropss"
@check="clickDeal"
:default-expand-all = "treeExpands"
show-checkbox highlight-current
node-key="dataPermId" ref="trees">
</el-tree>
</el-form>
<div align="center" class="dialog-footer" style="margin-bottom: 20px">
<el-button @click.native="PermFormVisible = false">取消</el-button>
<el-button type="primary" :loading="addLoading">提交</el-button>
</div>
</el-tab-pane>
</el-tabs>
</template>
</el-dialog>
</section>
</template>
... ... @@ -188,13 +219,16 @@
import util from '../../common/js/util'
import NProgress from 'nprogress'
import { getList, remove, batchRemove, edit, add, updateRolePerm } from '../../api/role_api';
import { getList as getDepartmentList} from '../../api/department';
import { getList as getDepartmentList } from '@/api/user/data_perm_api.js'
// import { getList as getDepartmentList} from '../../api/department';
import { getList as permList } from '../../api/perm_api';
import moment from 'moment'
export default {
name:'Role',
data() {
return {
activeName: 'first',
filters: {
roleName: ''
},
... ... @@ -224,11 +258,17 @@
children: 'children',
label: 'name',
},
treeDefaultPropss: {
children: 'children',
label: 'perm_des',
},
treeExpand: true,
departmentNameList:[],
treeExpands: true,
roles: [],
permissons: [],
departmentNameList:[],
permIds: [],
permIdss: [],
total: 0,
pageNum: 1,
pageSize: 5,
... ... @@ -272,7 +312,14 @@
roleName: '',
roleSign: 1,
permissions: []
}
},
permForms: {
roleId: 1,
description: '',
roleName: '',
roleSign: 1,
departmentNameList: []
},
}
},
... ... @@ -310,6 +357,12 @@
this.$refs.tree.store._getAllNodes()[i].expanded=this.treeExpand;
}
},
treeMerges: function (expand) {
this.treeExpands = expand;
for(var i=0;i<this.$refs.trees.store._getAllNodes().length;i++){
this.$refs.trees.store._getAllNodes()[i].expanded=this.treeExpands;
}
},
handleCurrentChange(val) {
this.pageNum = val;
this.getRoles();
... ... @@ -342,31 +395,46 @@
},
//获取部门列表
getdepartmentNames() {
this.listLoading = true;
//NProgress.start();
getDepartmentList().then((res) => {
this.total = res.data.total;
this.departmentNameList = res.data.list;
this.listLoading = false;
//NProgress.done();
}).catch((error) => {
this.listLoading = false;
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
});
//获取数据权限列表
// getdepartmentNames() {
//
// this.listLoading = true;
// //NProgress.start();
// getDepartmentList().then((res) => {
// // this.total = res.data.total;
// this.departmentNameList = res.data.list;
// console.log(this.departmentNameList);
//
// this.listLoading = false;
// //NProgress.done();
// }).catch((error) => {
//
// this.listLoading = false;
// if(null!= error.response && error.response!==undefined){
// let status= error.response.status;
// let msg = error.response.statusText;
// alert(status+msg);
// }else {
// alert(error);
// }
//
// });
//
// },
getDataList() {
let para = {
pageNum: 1,
pageSize: 700
};
getDepartmentList(para).then(res => {
this.$message.success('获取列表成功')
this.departmentNameList = res.list
console.log(this.departmentNameList);
// this.total = res.total
}).catch(error => {
this.$message.error(error)
})
},
//获取权限列表
getPermList() {
let para = {
... ... @@ -426,6 +494,7 @@
this.addForm = Object.assign({}, row);
// this.getdepartmentNames();
},
// 配置权限管理
setPerm: function (index, row) {
this.PermFormVisible = true;
this.getPermList();
... ... @@ -440,13 +509,32 @@
}
});
}
this.$nextTick(() => {
//反向适配
this.$refs.tree.setCheckedKeys(this.permIds);
});
},
// 配置数据权限
handleClick(tab, row) {
if (tab.name === 'second'){
this.getDataList();
var _this = this;
this.permIdss = [];
this.permForms = Object.assign({}, row);
let rolePermss = this.permForms.departmentNameList;
if (util.checkNull(rolePermss)){
rolePermss.forEach(function (perm,v_index,v_arr) {
if(util.checkNull(perm)){
_this.permIdss[v_index] = perm.dataPermId;
}
});
}
this.$nextTick(() => {
//反向适配
this.$refs.trees.setCheckedKeys(this.permIdss);
});
}
},
//显示新增界面,每次点开初始化数据
handleAdd: function (index,row) {
this.addFormVisible = true;
... ... @@ -675,6 +763,8 @@
}
};
this.isExpansion=true;
// this.getdepartmentNames();
}
}
... ...