<!doctype html>
|
<html>
|
|
<head>
|
<meta charset="utf-8">
|
<title>角色管理</title>
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
|
<script src="../../js/vue/vue.js"></script>
|
<script src="../../js/vue/element-ui/lib/index.js"></script>
|
<script src="../../js/vue/axios/dist/axios.min.js"></script>
|
<script src="../../js/vue/moment/moment.js"></script>
|
<script src="../../js/config.js"></script>
|
<script src="../../js/common.js"></script>
|
<link href="../../js/vue/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
|
<link href="../../css/common.css" rel="stylesheet" />
|
<link href="../../css/flex.css" rel="stylesheet" />
|
</head>
|
|
<body>
|
<div id="page_root">
|
<div class="width-35-precent height-total-solid position-abs float-left flex">
|
<div class="flex-1 flex " style="position: relative; padding: 30px;">
|
<div class="flex-1 border-color-1 border flex flex-v">
|
<div style="height: 40px;font-weight: bold;padding-left: 20px; border-bottom: 1px solid #D9D9D9;" class="flex-item-center-v">角色列表</div>
|
<!-- <el-divider></el-divider> -->
|
<!-- <div style="padding: 2px 16px;" class="flex-1 flex flex-v"> -->
|
<div style="width: 90%;margin-left: 5%;margin-bottom: 5px; margin-top: 6px; height: 30px; line-height: 30px;">
|
<el-input size="small" placeholder="输入查询关键字" suffix-icon="el-icon-search" v-model="filter_text_hier">
|
</el-input>
|
<!-- </div> -->
|
<!-- <el-input size="small" placeholder="输入查询关键字" suffix-icon="el-icon-search" v-model="filter_text_hier">
|
</el-input> -->
|
|
<div class="z_left_menu_tree flex-1" ref="tree_mainMenu" style=" overflow: auto;">
|
<ul style="width: 100%; padding-inline-start: 0px; margin: 2px 0px;">
|
<li class="roleClaz flex-item-center-v" v-for="(one,index) in roleDatas_" :key="index" v-on:mousemove="roleOver($event)"
|
v-on:mouseout="roleOut($event)" @click="getRoleMenu(one, $event, true)">
|
<div class="flex-1">
|
<div v-if="!one.isEdit"> {{one.name}} </div>
|
<el-input size="small" v-if="one.isEdit" v-model="one.name_temp"></el-input>
|
|
</div>
|
<div v-if="!one.isEdit">
|
<i class="el-icon-edit" @click.stop="editRole(one)"></i>
|
<!-- <i class="el-icon-delete" style="padding: 5px;" @click="deleteRole(one)"></i> -->
|
</div>
|
<div v-if="one.isEdit">
|
<el-button size="small" @click.stop="saveRole(one)">确认</el-button><!-- size="mini" -->
|
<el-button size="small" @click.stop="cancelEdit(one)">取消</el-button><!-- size="mini" -->
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="height-total-solid width-65-precent position-abs float-right flex" style="right: 0;">
|
<div class="flex-1 flex " style="position: relative; padding: 30px;">
|
<div class="flex-1 flex flex-v border-color-1 border">
|
|
<div style="height: 40px;font-weight: bold;padding-left: 20px; border-bottom: 1px solid #D9D9D9;" class="flex-item-center-v">
|
<div class="flex-1">
|
授权功能维护
|
</div>
|
</div>
|
|
<!-- <el-divider></el-divider> -->
|
<div class="flex-1" style="overflow-y: auto;">
|
<el-tree :data="menuData" show-checkbox node-key="id" :default-checked-keys="checkMenuList" ref="tree"
|
highlight-current :props="defaultProps">
|
</el-tree>
|
</div>
|
|
|
</div>
|
</div>
|
|
</div>
|
|
|
|
|
</div>
|
|
<script type="text/javascript">
|
var me;
|
var Main = {
|
watch: {
|
filter_text_hier(val) {
|
this.roleDatas_ = this.roleDatas.filter(pilot => pilot.name.indexOf(val) != -1);
|
}
|
},
|
data() {
|
return {
|
filter_text_hier: "",
|
selectRow: {},
|
showSave: false,
|
isEditName: false,
|
/* 窗体高度*/
|
clientHeight: 0,
|
/* 列表默认高度*/
|
tableHeight: 300,
|
/* 数据列表加载屏蔽*/
|
loading_table: false,
|
/* 默认页码*/
|
pagenum: 1,
|
/* 默认单页条数*/
|
pagesize: 10,
|
/* 默认总条数*/
|
total: 0,
|
/* 筛选条件*/
|
formInline: {},
|
defaultProps: {
|
children: 'children',
|
label: 'name'
|
},
|
/* 列表数据*/
|
menuData: [],
|
checkMenuList: [],
|
roleDatas: [],
|
roleDatas_: [],
|
|
}
|
},
|
|
created() {
|
this.clientHeight = document.documentElement.clientHeight;
|
this.tableHeight = this.clientHeight - 64 - 24 - 48 - 80 - 32 - 32 - 64 - 24 - 32 - 16;
|
},
|
|
mounted() { //组件配置后，页面显示前。用于加载数据
|
// this.getData();
|
me = this;
|
var url = window.location.href;
|
var params = getGetParams(url);
|
this.formInline = params;
|
//this.query_();
|
this.initRoleData();
|
this.initTreeData();
|
},
|
|
methods: {
|
|
saveRole(one) {
|
//1
|
let me = this;
|
let params = clone(one);
|
// if(one.name != one.name_temp) {
|
params.name = one.name_temp;
|
params.dataName = "tissue_role";
|
getUrl(me, "data/saveEntity", params, results => {
|
let checkMenus = me.$refs.tree.getCheckedKeys();
|
if(!checkMenus) {
|
return;
|
}
|
let param = {
|
menus: checkMenus.toString(),
|
roleId: one.id
|
}
|
getUrl(me, "menu/refreshMenu", param, result => {
|
one.isEdit = false;
|
me.initRoleData();
|
me.initTreeData();
|
me.getRoleMenu(one);
|
});
|
|
});
|
// }
|
|
|
//2
|
},
|
cancelEdit(one) {
|
one.isEdit = false;
|
me.initTreeData();
|
me.getRoleMenu(one);
|
},
|
editRole(one) {
|
if(this.selectRow) {
|
this.selectRow.isEdit = false;
|
}
|
$(".active2").removeClass("active2");
|
this.selectRow = one;
|
one.name_temp = one.name;
|
one.isEdit = true;
|
|
this.initTreeData(false);
|
},
|
deleteRole(one) {
|
this.$confirm('是否永久删除此角色?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
let params = {
|
dataName: "tissue_role",
|
id: one.id
|
}
|
getUrl(me, "data/deleteEntity", params, one => {
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
});
|
});
|
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
getRoleMenu(one, event, isthis) {
|
if(isthis && this.selectRow.id == one.id) {
|
return;
|
}
|
|
if(this.selectRow) {
|
this.selectRow.isEdit = false;
|
}
|
one.isEdit = false;
|
this.selectRow = one;
|
if(event) {
|
let dom = event.target;
|
if (dom.localName == "div" || dom.localName == "i") {
|
dom = dom.parentElement;
|
if (dom.localName == "div") {
|
dom = dom.parentElement;
|
}
|
}
|
$(".active2").removeClass("active2");
|
$(".active").removeClass("active");
|
$(dom).addClass('active2');
|
}
|
|
let roleId = one.id;
|
let params = {
|
dataName: "sys_role_menu",
|
role_id: roleId
|
};
|
this.checkMenuList = [];
|
getUrl(me, "data/getEntitySet", params, result => {
|
me.checkMenuList = result.map(one => {
|
return one.menu_id
|
});
|
me.$refs.tree.setCheckedKeys(me.checkMenuList);
|
|
});
|
},
|
initTreeData(edit) {
|
|
if(edit == undefined){
|
edit = true;
|
}
|
|
let params = {
|
dataName: "sys_menu",
|
};
|
getUrl(me, "data/getEntitySet", params, result => {
|
result.map(one => {
|
one.disabled = edit;
|
});
|
me.menuData = ArrayToTree(result, "title");
|
});
|
},
|
roleOver(event) {
|
|
let dom = event.target;
|
|
if (dom.localName == "input" || dom.localName == "button") {
|
return;
|
}
|
if (dom.localName == "div" || dom.localName == "i") {
|
|
dom = dom.parentElement;
|
if (dom.localName == "div") {
|
dom = dom.parentElement;
|
}
|
}
|
if ($(dom).hasClass('active')) {
|
return
|
}
|
$(dom).addClass('active');
|
},
|
roleOut(event) {
|
let dom = event.target;
|
|
if (dom.localName == "input" || dom.localName == "button") {
|
return;
|
}
|
|
if (dom.localName == "div" || dom.localName == "i") {
|
dom = dom.parentElement;
|
|
if (dom.localName == "div") {
|
dom = dom.parentElement;
|
}
|
}
|
if ($(dom).hasClass('active')) {
|
$(dom).removeClass('active');
|
}
|
|
},
|
filterNodeMenu(value, data, node) {
|
if (!value) return true;
|
return data.label.indexOf(value) !== -1;
|
},
|
hierClick(data, node, tree) {
|
console.info(data);
|
},
|
decode(item, col, val) {
|
return decodeURI(val);
|
},
|
initRoleData() {
|
let params = {
|
dataName: "tissue_role"
|
}
|
getUrl(this, "data/getEntitySet", params, result => {
|
result.map(one => {
|
one.name_temp = one.name;
|
})
|
me.roleDatas = result;
|
me.roleDatas_ = result;
|
});
|
|
},
|
/* 获取操作历史数据*/
|
getData() {
|
this.loading_table = true;
|
let url = "data/getSetByPage/";
|
|
let me = this;
|
let params = {
|
"dataName": "sys_user",
|
"pagesize": this.pagesize,
|
"pageno": this.pagenum
|
}
|
getUrl(me, url, params, function(data_) {
|
console.log(data_);
|
let header_height = me.$refs.dataEdit_table.$el.getElementsByClassName('el-table__header-wrapper')[0].offsetHeight;
|
me.$refs.dataEdit_table.$el.getElementsByClassName('el-table__body-wrapper')[0].style['min-height'] = me.tableHeight -
|
header_height + "px";
|
me.tableData = data_.entityset; //给tableData赋值
|
me.total = data_.page.recordcount;
|
me.loading_table = false;
|
|
}, function(error) {
|
console.log(error);
|
});
|
},
|
/* 重置*/
|
empty_() {
|
this.formInline = {};
|
this.query_();
|
},
|
/* 筛选 */
|
query_() {
|
this.loading_table = true;
|
var whereSegment_ = "";
|
if (this.formInline.phone) {
|
whereSegment_ = "phone LIKE '%" + this.formInline.code + "%' ";
|
}
|
if (this.formInline.name) {
|
whereSegment_ += whereSegment_ ? " and name LIKE '%" + this.formInline.name + "%' " :
|
"name LIKE '%" + this.formInline.name + "%' ";
|
}
|
if (this.formInline.driver_id) {
|
whereSegment_ += whereSegment_ ? " and driver_id LIKE '%" + this.formInline.driver_id + "%' " :
|
"driver_id LIKE '%" + this.formInline.driver_id + "%' ";
|
}
|
|
//whereSegment_ = encodeURI (whereSegment_, "utf-8");
|
|
let url = "data/getSetByPage";
|
let me = this;
|
let params = {
|
"dataName": "sys_user",
|
"pagesize": this.pagesize,
|
"pageno": this.pagenum,
|
"filter": whereSegment_,
|
|
}
|
|
getUrl(me, url, params, function(data_) {
|
data_ = data_.data;
|
console.log(data_);
|
let header_height = me.$refs.dataEdit_table.$el.getElementsByClassName('el-table__header-wrapper')[0].offsetHeight;
|
me.$refs.dataEdit_table.$el.getElementsByClassName('el-table__body-wrapper')[0].style['min-height'] = me.tableHeight -
|
header_height + "px";
|
me.tableData = data_.entityset; //给tableData赋值
|
me.total = data_.page.recordcount;
|
me.loading_table = false;
|
|
}, function(error) {
|
console.log(error);
|
});
|
},
|
/* 每页条数变更事件 */
|
handleSizeChange(val) {
|
this.pagesize = val;
|
this.getData();
|
},
|
/* 页码变更事件*/
|
handleCurrentChange(val) {
|
this.pagenum = val;
|
this.getData();
|
},
|
/* 数据渲染*/
|
createTime2_(row, column, cellValue, index) {
|
if (cellValue) {
|
return moment(cellValue).format('YYYY-MM-DD');
|
}
|
return "";
|
},
|
|
}
|
}
|
var Ctor = Vue.extend(Main)
|
new Ctor().$mount('#page_root')
|
</script>
|
|
<style>
|
.el-form--inline .el-form-item__content {
|
display: inline-block;
|
vertical-align: baseline;
|
}
|
|
.z_left_menu_tree li {
|
list-style-type: none;
|
|
}
|
|
.roleClaz {
|
height: 32px;
|
width: 100%;
|
font-size: 14px;
|
}
|
|
.active {
|
background-color: rgb(230, 247, 255);
|
color: #1890ff;
|
cursor: pointer;
|
}
|
.active2 {
|
background-color: rgb(230, 247, 255);
|
color: #1890ff;
|
cursor: pointer;
|
}
|
|
.el-divider--horizontal {
|
margin: 15px 0;
|
}
|
</style>
|
|
</body>
|
</html>
|
