|
|
|
|
@ -4,48 +4,103 @@ |
|
|
|
|
<div class="tool"> |
|
|
|
|
<ul class="filter"> |
|
|
|
|
<li> |
|
|
|
|
<el-input placeholder="请输入角色名称" prefix-icon="el-icon-search" v-model.trim="keyword" clearable></el-input> |
|
|
|
|
<el-input placeholder="请输入角色名称" |
|
|
|
|
prefix-icon="el-icon-search" |
|
|
|
|
v-model.trim="keyword" |
|
|
|
|
clearable></el-input> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<div> |
|
|
|
|
<el-button v-auth="'角色权限:新增角色'" type="info" round @click="addRole">新增角色</el-button> |
|
|
|
|
<el-button v-auth="'角色权限:批量删除'" type="primary" round @click="delAllSelection">批量删除</el-button> |
|
|
|
|
<el-button v-auth="'角色权限:新增角色'" |
|
|
|
|
type="info" |
|
|
|
|
round |
|
|
|
|
@click="addRole">新增角色</el-button> |
|
|
|
|
<el-button v-auth="'角色权限:批量删除'" |
|
|
|
|
type="primary" |
|
|
|
|
round |
|
|
|
|
@click="delAllSelection">批量删除</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" :row-key="getRowKeys"> |
|
|
|
|
<el-table-column type="selection" width="55" align="center" :selectable="practiceSelectable" :reserve-selection="true"></el-table-column> |
|
|
|
|
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="roleName" label="角色名称" align="center" min-width="250" show-overflow-tooltip></el-table-column> |
|
|
|
|
<el-table-column label="角色描述" min-width="400" align="center"> |
|
|
|
|
<el-table :data="listData" |
|
|
|
|
class="table" |
|
|
|
|
ref="table" |
|
|
|
|
stripe |
|
|
|
|
header-align="center" |
|
|
|
|
@selection-change="handleSelectionChange" |
|
|
|
|
:row-key="getRowKeys"> |
|
|
|
|
<el-table-column type="selection" |
|
|
|
|
width="55" |
|
|
|
|
align="center" |
|
|
|
|
:selectable="practiceSelectable" |
|
|
|
|
:reserve-selection="true"></el-table-column> |
|
|
|
|
<el-table-column type="index" |
|
|
|
|
width="60" |
|
|
|
|
label="序号" |
|
|
|
|
align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="roleName" |
|
|
|
|
label="角色名称" |
|
|
|
|
align="center" |
|
|
|
|
min-width="250" |
|
|
|
|
show-overflow-tooltip></el-table-column> |
|
|
|
|
<el-table-column label="角色描述" |
|
|
|
|
min-width="400" |
|
|
|
|
align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-input placeholder="该角色用于管理全部功能权限" v-model="scope.row.remark" disabled></el-input> |
|
|
|
|
<el-input placeholder="该角色用于管理全部功能权限" |
|
|
|
|
v-model="scope.row.remark" |
|
|
|
|
disabled></el-input> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column label="操作" align="center" width="200"> |
|
|
|
|
<el-table-column label="操作" |
|
|
|
|
align="center" |
|
|
|
|
width="200"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-button v-auth="'角色权限:查看'" type="text" @click="showRole(scope.row)">查看</el-button> |
|
|
|
|
<el-button v-auth="'角色权限:编辑'" v-if="scope.row.roleName !== '超级管理员'" type="text" @click="editRole(scope.row)">编辑</el-button> |
|
|
|
|
<el-button v-auth="'角色权限:删除'" v-if="scope.row.roleName !== '超级管理员' && scope.row.roleName !== '管理员'" type="text" @click="handleDelete(scope.row)">删除</el-button> |
|
|
|
|
<el-button v-auth="'角色权限:查看'" |
|
|
|
|
type="text" |
|
|
|
|
@click="showRole(scope.row)">查看</el-button> |
|
|
|
|
<el-button v-auth="'角色权限:编辑'" |
|
|
|
|
v-if="scope.row.roleName !== '超级管理员'" |
|
|
|
|
type="text" |
|
|
|
|
@click="editRole(scope.row)">编辑</el-button> |
|
|
|
|
<el-button v-auth="'角色权限:删除'" |
|
|
|
|
v-if="scope.row.roleName !== '超级管理员' && scope.row.roleName !== '管理员'" |
|
|
|
|
type="text" |
|
|
|
|
@click="handleDelete(scope.row)">删除</el-button> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
<div class="pagination"> |
|
|
|
|
<el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination> |
|
|
|
|
<el-pagination background |
|
|
|
|
@current-change="currentChange" |
|
|
|
|
:current-page="page" |
|
|
|
|
layout="total, prev, pager, next" |
|
|
|
|
:total="total"></el-pagination> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-dialog :title="isDetail ? '查看角色' : (isAdd ? '新增角色' : '编辑角色')" :visible.sync="roleVisible" width="30%" @close="closeRole" class="dialog" :close-on-click-modal="false"> |
|
|
|
|
<el-form ref="form" label-width="80px" :disabled="isDetail"> |
|
|
|
|
<el-dialog :title="isDetail ? '查看角色' : (isAdd ? '新增角色' : '编辑角色')" |
|
|
|
|
:visible.sync="roleVisible" |
|
|
|
|
width="30%" |
|
|
|
|
@close="closeRole" |
|
|
|
|
class="dialog" |
|
|
|
|
:close-on-click-modal="false"> |
|
|
|
|
<el-form ref="form" |
|
|
|
|
label-width="80px" |
|
|
|
|
:disabled="isDetail"> |
|
|
|
|
<el-form-item label="角色名称"> |
|
|
|
|
<el-input v-model="form.roleName" placeholder="请输入角色名称"></el-input> |
|
|
|
|
<el-input v-model="form.roleName" |
|
|
|
|
placeholder="请输入角色名称"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="角色描述"> |
|
|
|
|
<el-input v-model="form.remark" placeholder="请输入角色描述" type="textarea" rows="5"></el-input> |
|
|
|
|
<el-input v-model="form.remark" |
|
|
|
|
placeholder="请输入角色描述" |
|
|
|
|
type="textarea" |
|
|
|
|
rows="5"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="role" label="角色权限"> |
|
|
|
|
<el-form-item prop="role" |
|
|
|
|
label="角色权限"> |
|
|
|
|
<div style="max-height: 300px; overflow: auto"> |
|
|
|
|
<el-tree |
|
|
|
|
ref="per" |
|
|
|
|
<el-tree ref="per" |
|
|
|
|
:data="permissions" |
|
|
|
|
show-checkbox |
|
|
|
|
default-expand-all |
|
|
|
|
@ -57,9 +112,12 @@ |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<span slot="footer" class="dialog-footer" v-if="!isDetail"> |
|
|
|
|
<span slot="footer" |
|
|
|
|
class="dialog-footer" |
|
|
|
|
v-if="!isDetail"> |
|
|
|
|
<el-button @click="roleVisible = false">取 消</el-button> |
|
|
|
|
<el-button type="primary" @click="saveData">确 定</el-button> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
@click="saveData">确 定</el-button> |
|
|
|
|
</span> |
|
|
|
|
</el-dialog> |
|
|
|
|
</div> |
|
|
|
|
@ -69,7 +127,7 @@ |
|
|
|
|
import util from "@/libs/util"; |
|
|
|
|
import Setting from "@/setting"; |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
keyword: "", |
|
|
|
|
searchTimer: null, |
|
|
|
|
@ -96,44 +154,44 @@ export default { |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
keyword: function(val) { |
|
|
|
|
keyword: function (val) { |
|
|
|
|
clearTimeout(this.searchTimer); |
|
|
|
|
this.searchTimer = setTimeout(() => { |
|
|
|
|
this.getData(); |
|
|
|
|
}, 500); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
mounted () { |
|
|
|
|
this.getData(); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
getData() { |
|
|
|
|
getData () { |
|
|
|
|
this.$get(`${this.api.roleList}?page=${this.page}&size=${this.pageSize}&name=${util.encodeStr(this.keyword)}&platformId=1&port=0`).then(res => { |
|
|
|
|
this.listData = res.rolePage.records; |
|
|
|
|
this.total = res.rolePage.total; |
|
|
|
|
}).catch(res => {}); |
|
|
|
|
}).catch(res => { }); |
|
|
|
|
}, |
|
|
|
|
currentChange(val) { |
|
|
|
|
currentChange (val) { |
|
|
|
|
this.page = val; |
|
|
|
|
this.getData(); |
|
|
|
|
}, |
|
|
|
|
handleDelete(row) { |
|
|
|
|
handleDelete (row) { |
|
|
|
|
this.$confirm("确定要删除吗？", "提示", { |
|
|
|
|
type: "warning" |
|
|
|
|
}).then(() => { |
|
|
|
|
this.$post(`${this.api.batchRemove}?roleIds=${row.id}`).then(res => { |
|
|
|
|
util.successMsg("删除成功"); |
|
|
|
|
this.getData(); |
|
|
|
|
}).catch(res => {}); |
|
|
|
|
}).catch(() => {}); |
|
|
|
|
}).catch(res => { }); |
|
|
|
|
}).catch(() => { }); |
|
|
|
|
}, |
|
|
|
|
getRowKeys(row) { |
|
|
|
|
getRowKeys (row) { |
|
|
|
|
return row.id; |
|
|
|
|
}, |
|
|
|
|
handleSelectionChange(val) { |
|
|
|
|
handleSelectionChange (val) { |
|
|
|
|
this.multipleSelection = val; |
|
|
|
|
}, |
|
|
|
|
delAllSelection() { |
|
|
|
|
delAllSelection () { |
|
|
|
|
if (this.multipleSelection.length) { |
|
|
|
|
this.$confirm("确定要删除吗？", "提示", { |
|
|
|
|
type: "warning" |
|
|
|
|
@ -145,25 +203,25 @@ export default { |
|
|
|
|
this.$refs.table.clearSelection(); |
|
|
|
|
util.successMsg("删除成功"); |
|
|
|
|
this.getData(); |
|
|
|
|
}).catch(res => {}); |
|
|
|
|
if(this.multipleSelection.length === this.listData.length && this.page>1) { |
|
|
|
|
}).catch(res => { }); |
|
|
|
|
if (this.multipleSelection.length === this.listData.length && this.page > 1) { |
|
|
|
|
this.handleCurrentChange(this.page - 1) |
|
|
|
|
} |
|
|
|
|
}).catch(() => {}); |
|
|
|
|
}).catch(() => { }); |
|
|
|
|
} else { |
|
|
|
|
util.errorMsg("请先选择数据！"); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
practiceSelectable(row, index){ |
|
|
|
|
practiceSelectable (row, index) { |
|
|
|
|
let boolean = true; |
|
|
|
|
if(row.roleName == '超级管理员'){ |
|
|
|
|
if (row.roleName == '超级管理员') { |
|
|
|
|
boolean = false |
|
|
|
|
}else{ |
|
|
|
|
} else { |
|
|
|
|
boolean = true |
|
|
|
|
} |
|
|
|
|
return boolean; |
|
|
|
|
}, |
|
|
|
|
closeRole() { |
|
|
|
|
closeRole () { |
|
|
|
|
this.isDetail = false; |
|
|
|
|
this.form = { |
|
|
|
|
id: "", |
|
|
|
|
@ -174,7 +232,7 @@ export default { |
|
|
|
|
this.permissions = []; |
|
|
|
|
}, |
|
|
|
|
// 获取权限菜单 |
|
|
|
|
getPer(row) { |
|
|
|
|
getPer (row) { |
|
|
|
|
if (!this.permissions.length) { |
|
|
|
|
this.$get(`${this.api.queryAllMenus}?platformId=${Setting.platformId}`).then(res => { |
|
|
|
|
let data = res.children; |
|
|
|
|
@ -199,7 +257,7 @@ export default { |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
addRole() { |
|
|
|
|
addRole () { |
|
|
|
|
this.isAdd = true; |
|
|
|
|
this.getPer(); |
|
|
|
|
this.checkedIds = []; |
|
|
|
|
@ -207,7 +265,7 @@ export default { |
|
|
|
|
this.roleVisible = true; |
|
|
|
|
}, |
|
|
|
|
// 递归处理勾选的权限 |
|
|
|
|
handleRolePer(data, permissions) { |
|
|
|
|
handleRolePer (data, permissions) { |
|
|
|
|
let result = data; |
|
|
|
|
if (permissions.length) { |
|
|
|
|
permissions.map(e => { |
|
|
|
|
@ -220,25 +278,25 @@ export default { |
|
|
|
|
} |
|
|
|
|
return result; |
|
|
|
|
}, |
|
|
|
|
async getDetail(row) { // 查询详情 |
|
|
|
|
async getDetail (row) { // 查询详情 |
|
|
|
|
let res = await this.$get(`${this.api.obtainDetails}?id=${row.id}`); |
|
|
|
|
this.form = res.role; |
|
|
|
|
this.form.id = row.id; |
|
|
|
|
this.checkedIds = this.handleRolePer(res.permissionList, this.permissions); |
|
|
|
|
this.$refs.per.setCheckedNodes(this.checkedIds); |
|
|
|
|
}, |
|
|
|
|
showRole(row) { |
|
|
|
|
showRole (row) { |
|
|
|
|
this.isDetail = true; |
|
|
|
|
this.isAdd = false; |
|
|
|
|
this.getPer(row); |
|
|
|
|
this.roleVisible = true; |
|
|
|
|
}, |
|
|
|
|
editRole(row) { |
|
|
|
|
editRole (row) { |
|
|
|
|
this.isAdd = false; |
|
|
|
|
this.getPer(row); |
|
|
|
|
this.roleVisible = true; |
|
|
|
|
}, |
|
|
|
|
async saveData() { |
|
|
|
|
async saveData () { |
|
|
|
|
if (!this.form.roleName) return util.warningMsg("请填写角色名称"); |
|
|
|
|
if (!this.form.remark) return util.warningMsg("请填写角色描述"); |
|
|
|
|
if (!this.$refs.per.getCheckedKeys().length) return util.warningMsg("请选择角色权限"); |
|
|
|
|
@ -247,25 +305,24 @@ export default { |
|
|
|
|
let data = { |
|
|
|
|
...this.form, |
|
|
|
|
permissionId, |
|
|
|
|
platformId:1, |
|
|
|
|
platformId: 1, |
|
|
|
|
}; |
|
|
|
|
if (this.form.id) { |
|
|
|
|
this.$post(this.api.saveOrUpdate, data).then(res => { |
|
|
|
|
util.successMsg("修改成功"); |
|
|
|
|
this.getData(); |
|
|
|
|
this.roleVisible = false; |
|
|
|
|
}).catch(res => {}); |
|
|
|
|
}).catch(res => { }); |
|
|
|
|
} else { |
|
|
|
|
this.$post(this.api.saveOrUpdate, data).then(res => { |
|
|
|
|
util.successMsg("新增成功"); |
|
|
|
|
this.getData(); |
|
|
|
|
this.roleVisible = false; |
|
|
|
|
}).catch(res => {}); |
|
|
|
|
}).catch(res => { }); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
|
|
|
|
</style> |
