You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
255 lines
9.6 KiB
255 lines
9.6 KiB
<template> |
|
<div class="page"> |
|
<div class="tool"> |
|
<div class="search-wrap"> |
|
<el-input placeholder="请输入角色名称" v-model.trim="keyword" clearable></el-input> |
|
</div> |
|
<div class="actions"> |
|
<el-button v-auth type="primary" @click="addRole">新增</el-button> |
|
<el-button v-auth="'批量删除'" @click="batchDel">删除</el-button> |
|
</div> |
|
</div> |
|
|
|
<el-table :data="list" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true" :selectable="row => row.name !== '超级管理员'"></el-table-column> |
|
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
|
<el-table-column prop="name" label="角色名称" align="center" min-width="250" show-overflow-tooltip></el-table-column> |
|
<el-table-column prop="description" label="角色描述" min-width="400" align="center"></el-table-column> |
|
<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.name !== '超级管理员'" type="text" @click="editRole(scope.row)">编辑</el-button> |
|
<el-button v-auth v-if="scope.row.name !== '超级管理员'" 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> |
|
</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-form-item label="角色名称"> |
|
<el-input v-model="form.name" placeholder="请输入角色名称"></el-input> |
|
</el-form-item> |
|
<el-form-item label="角色描述"> |
|
<el-input v-model="form.description" placeholder="请输入角色描述" type="textarea" rows="5"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="role" label="角色权限"> |
|
<div style="max-height: 300px; overflow: auto"> |
|
<el-tree |
|
ref="per" |
|
:data="permissions" |
|
show-checkbox |
|
default-expand-all |
|
node-key="id" |
|
:default-expanded-keys="checkedIds" |
|
:default-checked-keys="checkedIds" |
|
:props="defaultProps"> |
|
</el-tree> |
|
</div> |
|
</el-form-item> |
|
</el-form> |
|
<span slot="footer" class="dialog-footer" v-if="!isDetail"> |
|
<el-button @click="roleVisible = false">取 消</el-button> |
|
<el-button type="primary" @click="saveData">确 定</el-button> |
|
</span> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import util from "@/libs/util"; |
|
import Setting from "@/setting"; |
|
export default { |
|
data() { |
|
return { |
|
keyword: "", |
|
isDetail: false, |
|
form: { |
|
id: "", |
|
name: "", |
|
description: "", |
|
permissions: [] |
|
}, |
|
list: [], |
|
defaultProps: { |
|
label: 'name' |
|
}, |
|
page: 1, |
|
pageSize: 10, |
|
total: 0, |
|
multipleSelection: [], |
|
isAdd: true, |
|
roleVisible: false, |
|
permissions: [], |
|
checkedIds: [], |
|
roleNameReapeat: false // 角色名称是否重复 |
|
}; |
|
}, |
|
watch: { |
|
keyword: function(val) { |
|
clearTimeout(this.searchTimer) |
|
this.searchTimer = setTimeout(() => { |
|
this.initData() |
|
}, 500) |
|
} |
|
}, |
|
mounted() { |
|
this.$store.commit('user/setCrumbs', [ |
|
{ |
|
name: '用户管理' |
|
}, |
|
{ |
|
name: '角色管理' |
|
} |
|
]) |
|
this.getData() |
|
}, |
|
methods: { |
|
getData() { |
|
this.$post(this.api.roles, { |
|
page: this.page, |
|
limit: this.pageSize, |
|
name: this.keyword, |
|
}).then(({ data }) => { |
|
const list = data.records.filter(e => e.id !== 1) // 不显示超管 |
|
this.list = list |
|
this.total = data.total == 0 ? 0 : +data.total - 1 |
|
}).catch(res => {}) |
|
}, |
|
initData() { |
|
this.$refs.table.clearSelection() |
|
this.page = 1 |
|
this.getData() |
|
}, |
|
currentChange(val) { |
|
this.page = val |
|
this.getData() |
|
}, |
|
handleDelete(row) { |
|
this.$confirm("确定要删除吗？", "提示", { |
|
type: "warning" |
|
}).then(() => { |
|
this.$del(this.api.deleteRole, [row.id]).then(res => { |
|
util.successMsg("删除成功"); |
|
this.getData() |
|
}).catch(res => {}) |
|
}).catch(() => {}) |
|
}, |
|
handleSelectionChange(val) { |
|
this.multipleSelection = val; |
|
}, |
|
batchDel() { |
|
if (this.multipleSelection.length) { |
|
this.$confirm("确定要删除吗？", "提示", { |
|
type: "warning" |
|
}).then(() => { |
|
this.$del(this.api.deleteRole, this.multipleSelection.map(e => e.id)).then(res => { |
|
this.$refs.table.clearSelection(); |
|
util.successMsg("删除成功"); |
|
this.getData(); |
|
}).catch(res => {}); |
|
if(this.multipleSelection.length === this.list.length && this.page>1) { |
|
this.handleCurrentChange(this.page - 1) |
|
} |
|
}).catch(() => {}); |
|
} else { |
|
util.errorMsg("请先选择数据！"); |
|
} |
|
}, |
|
closeRole() { |
|
this.isDetail = false; |
|
this.form = { |
|
id: "", |
|
name: "", |
|
description: "", |
|
permissions: [] |
|
}; |
|
this.checkedIds = []; |
|
this.permissions = []; |
|
}, |
|
// 获取权限菜单 |
|
getPer(row) { |
|
if (!this.permissions.length) { |
|
this.$get(this.api.perTree).then(({ data }) => { |
|
this.permissions = data |
|
row && this.getDetail(row) |
|
}).catch(res => {}) |
|
} |
|
}, |
|
addRole() { |
|
this.isAdd = true |
|
this.getPer() |
|
this.checkedIds = [] |
|
this.permissions.length && this.$refs.per.setCheckedNodes([]) |
|
this.roleVisible = true |
|
}, |
|
// 递归处理勾选的权限 |
|
handleRolePer(data, permissions) { |
|
let result = data |
|
if (permissions.length) { |
|
permissions.map(e => { |
|
if (result.includes(e.id) && e.children) { |
|
// 如果该权限下的子权限不是每个都勾选了,就把该权限的id从已勾选的id集合里去除,因为如果不去除的话,这个权限就会勾选,同时会把该权限下的所有子权限都一起勾选 |
|
e.children.every(n => result.includes(n)) || result.splice(result.indexOf(e.id), 1) |
|
} |
|
e.children && e.children.length && this.handleRolePer(data, e.children) |
|
}) |
|
} |
|
return result |
|
}, |
|
// 查询详情 |
|
async getDetail(row) { |
|
this.$get(`${this.api.role}/${row.id}`).then(({ data }) => { |
|
const { role } = data |
|
this.form.name = role.name |
|
this.form.description = role.description |
|
this.form.id = role.id |
|
const list = data.permissionList |
|
// list[0] === '1' && list.shift() // 1为顶级菜单，需要去掉，不然子级会全部选中，新增的时候一定要带这个1，不然会查不出权限 |
|
this.checkedIds = this.handleRolePer(list, this.permissions) |
|
this.$refs.per.setCheckedNodes(this.checkedIds) |
|
}).catch(err => {}) |
|
}, |
|
showRole(row) { |
|
this.isDetail = true |
|
this.isAdd = false |
|
this.getPer(row) |
|
this.roleVisible = true |
|
}, |
|
editRole(row) { |
|
this.isAdd = false |
|
this.getPer(row) |
|
this.roleVisible = true |
|
}, |
|
async saveData() { |
|
const { form } = this |
|
if (!form.name) return util.warningMsg("请填写角色名称") |
|
if (!form.description) return util.warningMsg("请填写角色描述") |
|
const checked = [...this.$refs.per.getHalfCheckedKeys(), ...this.$refs.per.getCheckedKeys()] |
|
if (!checked.length) return util.warningMsg("请选择角色权限") |
|
let data = { |
|
...form, |
|
permissions: checked |
|
} |
|
if (form.id) { |
|
this.$put(this.api.role, data).then(res => { |
|
util.successMsg("修改成功") |
|
this.getData() |
|
this.roleVisible = false |
|
}).catch(res => {}) |
|
} else { |
|
this.$post(this.api.role, data).then(res => { |
|
util.successMsg("新增成功") |
|
this.getData() |
|
this.roleVisible = false |
|
}).catch(res => {}) |
|
} |
|
} |
|
} |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
|
|
</style> |