wenyongda/ZrAdminNetCore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

菜单权限新增搜索过滤

Browse Source
This commit is contained in:
不做码农 2022-03-19 08:19:55 +08:00
parent 1c3cdb99e0
commit 822122d9cc
1 changed files with 212 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

382
ZR.Vue/src/views/system/role/index.vue
View File

@ -65,6 +65,9 @@
<!-- 角色菜单弹框 --> <!-- 角色菜单弹框 -->
<el-dialog title="角色权限分配" :visible.sync="showRoleScope" width="500px"> <el-dialog title="角色权限分配" :visible.sync="showRoleScope" width="500px">
<el-form :model="form" label-width="80px"> <el-form :model="form" label-width="80px">
<el-form-item label="菜单搜索">
<el-input placeholder="请输入关键字进行过滤" v-model="searchText"></el-input>
</el-form-item>
<el-form-item label="权限字符"> <el-form-item label="权限字符">
{{form.roleKey}} {{form.roleKey}}
</el-form-item> </el-form-item>
@ -73,7 +76,7 @@
<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox> <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
<el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox> <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
<el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menu" node-key="id" :check-strictly="!form.menuCheckStrictly" <el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menu" node-key="id" :check-strictly="!form.menuCheckStrictly"
empty-text="加载中，请稍后" :props="defaultProps"></el-tree> empty-text="加载中，请稍后" :filter-node-method="menuFilterNode" :props="defaultProps"></el-tree>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@ -149,19 +152,19 @@ import {
updateRole, updateRole,
exportRole, exportRole,
dataScope, dataScope,
changeRoleStatus, changeRoleStatus
} from "@/api/system/role"; } from '@/api/system/role'
import { import {
treeselect as menuTreeselect, treeselect as menuTreeselect,
roleMenuTreeselect, roleMenuTreeselect
} from "@/api/system/menu"; } from '@/api/system/menu'
import { import {
treeselect as deptTreeselect, treeselect as deptTreeselect,
roleDeptTreeselect, roleDeptTreeselect
} from "@/api/system/dept"; } from '@/api/system/dept'
export default { export default {
name: "role", name: 'role',
data() { data() {
return { return {
// 遮罩层 // 遮罩层
@ -181,7 +184,7 @@ export default {
// 角色表格数据 // 角色表格数据
roleList: [], roleList: [],
// 弹出层标题 // 弹出层标题
title: "", title: '',
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
menuExpand: true, menuExpand: true,
@ -197,25 +200,25 @@ export default {
// 数据范围选项 // 数据范围选项
dataScopeOptions: [ dataScopeOptions: [
{ {
dictValue: "1", dictValue: '1',
dictLabel: "全部", dictLabel: '全部'
}, },
// { // {
// dictValue: "2", // dictValue: "2",
// dictLabel: "自定义", // dictLabel: "自定义",
// }, // },
{ {
dictValue: "3", dictValue: '3',
dictLabel: "本部门", dictLabel: '本部门'
}, },
// { // {
// dictValue: "4", // dictValue: "4",
// dictLabel: "本部门及以下数据权限", // dictLabel: "本部门及以下数据权限",
// }, // },
{ {
dictValue: "5", dictValue: '5',
dictLabel: "仅本人", dictLabel: '仅本人'
}, }
], ],
// 菜单列表 // 菜单列表
menuOptions: [], menuOptions: [],
@ -227,126 +230,132 @@ export default {
pageSize: 10, pageSize: 10,
roleName: undefined, roleName: undefined,
roleKey: undefined, roleKey: undefined,
status: undefined, status: undefined
}, },
searchText: '',
// 表单参数 // 表单参数
form: {}, form: {},
defaultProps: { defaultProps: {
children: "children", children: 'children',
label: "label", label: 'label'
}, },
// 表单校验 // 表单校验
rules: { rules: {
roleName: [ roleName: [
{ required: true, message: "角色名称不能为空", trigger: "blur" }, { required: true, message: '角色名称不能为空', trigger: 'blur' }
], ],
roleKey: [ roleKey: [
{ required: true, message: "权限字符不能为空", trigger: "blur" }, { required: true, message: '权限字符不能为空', trigger: 'blur' }
], ],
roleSort: [ roleSort: [
{ required: true, message: "角色顺序不能为空", trigger: "blur" }, { required: true, message: '角色顺序不能为空', trigger: 'blur' }
], ]
}
}
}, },
}; watch: {
searchText(val) {
this.$refs.menu.filter(val)
}
}, },
created() { created() {
this.getList(); this.getList()
this.getDicts("sys_normal_disable").then((response) => { this.getDicts('sys_normal_disable').then((response) => {
this.statusOptions = response.data; this.statusOptions = response.data
}); })
}, },
methods: { methods: {
/** 查询角色列表 */ /** 查询角色列表 */
getList() { getList() {
this.loading = true; this.loading = true
listRole(this.addDateRange(this.queryParams, this.dateRange)).then( listRole(this.addDateRange(this.queryParams, this.dateRange)).then(
(response) => { (response) => {
this.roleList = response.data.result; this.roleList = response.data.result
this.total = response.data.totalNum; this.total = response.data.totalNum
this.loading = false; this.loading = false
} }
); )
}, },
/** 查询菜单树结构 */ /** 查询菜单树结构 */
getMenuTreeselect() { getMenuTreeselect() {
menuTreeselect().then((response) => { menuTreeselect().then((response) => {
this.menuOptions = response.data; this.menuOptions = response.data
}); })
}, },
/** 查询部门树结构 */ /** 查询部门树结构 */
getDeptTreeselect() { getDeptTreeselect() {
deptTreeselect().then((response) => { deptTreeselect().then((response) => {
this.deptOptions = response.data; this.deptOptions = response.data
}); })
}, },
// 所有菜单节点数据 // 所有菜单节点数据
getMenuAllCheckedKeys() { getMenuAllCheckedKeys() {
// 目前被选中的菜单节点 // 目前被选中的菜单节点
let checkedKeys = this.$refs.menu.getCheckedKeys(); const checkedKeys = this.$refs.menu.getCheckedKeys()
// 半选中的菜单节点 // 半选中的菜单节点
let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys(); const halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys()
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys); checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
return checkedKeys; return checkedKeys
}, },
// 所有部门节点数据 // 所有部门节点数据
getDeptAllCheckedKeys() { getDeptAllCheckedKeys() {
// 目前被选中的部门节点 // 目前被选中的部门节点
let checkedKeys = this.$refs.dept.getCheckedKeys(); const checkedKeys = this.$refs.dept.getCheckedKeys()
// 半选中的部门节点 // 半选中的部门节点
let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys(); const halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys()
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys); checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
return checkedKeys; return checkedKeys
}, },
/** 根据角色ID查询菜单树结构 */ /** 根据角色ID查询菜单树结构 */
getRoleMenuTreeselect(roleId) { getRoleMenuTreeselect(roleId) {
return roleMenuTreeselect(roleId).then((response) => { return roleMenuTreeselect(roleId).then((response) => {
this.menuOptions = response.data.menus; this.menuOptions = response.data.menus
return response; return response
}); })
}, },
/** 根据角色ID查询部门树结构 */ /** 根据角色ID查询部门树结构 */
getRoleDeptTreeselect(roleId) { getRoleDeptTreeselect(roleId) {
return roleDeptTreeselect(roleId).then((response) => { return roleDeptTreeselect(roleId).then((response) => {
console.log('角色', response); console.log('角色', response)
this.deptOptions = response.data.depts; this.deptOptions = response.data.depts
return response; return response
}); })
}, },
// 角色状态修改 // 角色状态修改
handleStatusChange(row) { handleStatusChange(row) {
let text = row.status === "0" ? "启用" : "停用"; const text = row.status === '0' ? '启用' : '停用'
console.log(JSON.stringify(row), text); console.log(JSON.stringify(row), text)
this.$confirm( this.$confirm(
'确认要"' + text + '""' + row.roleName + '"角色吗?', '确认要"' + text + '""' + row.roleName + '"角色吗?',
"警告", '警告',
{ {
confirmButtonText: "确定", confirmButtonText: '确定',
cancelButtonText: "取消", cancelButtonText: '取消',
type: "warning", type: 'warning'
} }
) )
.then(function () { .then(function() {
return changeRoleStatus(row.roleId, row.status); return changeRoleStatus(row.roleId, row.status)
}) })
.then(() => { .then(() => {
this.msgSuccess(text + "成功"); this.msgSuccess(text + '成功')
})
.catch(function() {
row.status = row.status === '0' ? '1' : '0'
}) })
.catch(function () {
row.status = row.status === "0" ? "1" : "0";
});
}, },
// 取消按钮 // 取消按钮
cancel() { cancel() {
this.open = false; this.open = false
this.showRoleScope = false; this.showRoleScope = false
this.reset(); this.reset()
}, },
// 表单重置 // 表单重置
reset() { reset() {
if (this.$refs.menu != undefined) { if (this.$refs.menu != undefined) {
this.$refs.menu.setCheckedKeys([]); this.$refs.menu.setCheckedKeys([])
} }
(this.menuExpand = false), (this.menuExpand = false),
(this.menuNodeAll = false), (this.menuNodeAll = false),
@ -357,221 +366,226 @@ export default {
roleName: undefined, roleName: undefined,
roleKey: undefined, roleKey: undefined,
roleSort: 99, roleSort: 99,
status: "0", status: '0',
menuIds: [], menuIds: [],
deptIds: [], deptIds: [],
dataScope: "1", dataScope: '1',
menuCheckStrictly: true, menuCheckStrictly: true,
deptCheckStrictly: true, deptCheckStrictly: true,
remark: undefined, remark: undefined
}); })
this.resetForm("form"); this.resetForm('form')
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
this.queryParams.pageNum = 1; this.queryParams.pageNum = 1
this.getList(); this.getList()
}, },
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.dateRange = []; this.dateRange = []
this.resetForm("queryForm"); this.resetForm('queryForm')
this.handleQuery(); this.handleQuery()
}, },
// 多选框选中数据 // 多选框选中数据
handleSelectionChange(selection) { handleSelectionChange(selection) {
this.ids = selection.map((item) => item.roleId); this.ids = selection.map((item) => item.roleId)
this.single = selection.length != 1; this.single = selection.length != 1
this.multiple = !selection.length; this.multiple = !selection.length
}, },
// 更多操作触发 // 更多操作触发
handleCommand(command, row) { handleCommand(command, row) {
switch (command) { switch (command) {
case "handleDataScope": case 'handleDataScope':
this.handleDataScope(row); this.handleDataScope(row)
break; break
case "handleAuthUser": case 'handleAuthUser':
this.handleAuthUser(row); this.handleAuthUser(row)
break; break
default: default:
break; break
} }
}, },
// 树权限（展开/折叠） // 树权限（展开/折叠）
handleCheckedTreeExpand(value, type) { handleCheckedTreeExpand(value, type) {
if (type == "menu") { if (type == 'menu') {
let treeList = this.menuOptions; const treeList = this.menuOptions
for (let i = 0; i < treeList.length; i++) { for (let i = 0; i < treeList.length; i++) {
this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value; this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value
} }
} else if (type == "dept") { } else if (type == 'dept') {
let treeList = this.deptOptions; const treeList = this.deptOptions
for (let i = 0; i < treeList.length; i++) { for (let i = 0; i < treeList.length; i++) {
this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value; this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value
} }
} }
}, },
// 树权限（全选/全不选） // 树权限（全选/全不选）
handleCheckedTreeNodeAll(value, type) { handleCheckedTreeNodeAll(value, type) {
if (type == "menu") { if (type == 'menu') {
this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []); this.$refs.menu.setCheckedNodes(value ? this.menuOptions : [])
} else if (type == "dept") { } else if (type == 'dept') {
this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []); this.$refs.dept.setCheckedNodes(value ? this.deptOptions : [])
} }
}, },
// 树权限（父子联动） // 树权限（父子联动）
handleCheckedTreeConnect(value, type) { handleCheckedTreeConnect(value, type) {
if (type == "menu") { if (type == 'menu') {
this.form.menuCheckStrictly = value ? true : false; this.form.menuCheckStrictly = !!value
} else if (type == "dept") { } else if (type == 'dept') {
this.form.deptCheckStrictly = value ? true : false; this.form.deptCheckStrictly = !!value
} }
},
//菜单筛选
menuFilterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
}, },
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { handleAdd() {
this.reset(); this.reset()
this.getDeptTreeselect(); this.getDeptTreeselect()
this.open = true; this.open = true
this.title = "添加角色"; this.title = '添加角色'
this.showRoleScope = false; this.showRoleScope = false
}, },
/** 修改按钮操作 ok */ /** 修改按钮操作 ok */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset()
this.showRoleScope = false; this.showRoleScope = false
const roleId = row.roleId || this.ids; const roleId = row.roleId || this.ids
const roleDeptTreeselect = this.getRoleDeptTreeselect(row.roleId); const roleDeptTreeselect = this.getRoleDeptTreeselect(row.roleId)
getRole(roleId).then((response) => { getRole(roleId).then((response) => {
this.form = response.data; this.form = response.data
this.open = true; this.open = true
this.title = "修改角色"; this.title = '修改角色'
this.$nextTick(() => { this.$nextTick(() => {
roleDeptTreeselect.then((res) => { roleDeptTreeselect.then((res) => {
this.$refs.dept.setCheckedKeys(res.data.checkedKeys); this.$refs.dept.setCheckedKeys(res.data.checkedKeys)
}); })
}); })
}); })
}, },
/** 选择角色权限范围触发 */ /** 选择角色权限范围触发 */
dataScopeSelectChange(value) { dataScopeSelectChange(value) {
if (value !== "2") { if (value !== '2') {
this.$refs.dept.setCheckedKeys([]); this.$refs.dept.setCheckedKeys([])
} }
}, },
// 数据权限 // 数据权限
dataScopeFormat(row, column) { dataScopeFormat(row, column) {
return this.selectDictLabel(this.dataScopeOptions, row.dataScope); return this.selectDictLabel(this.dataScopeOptions, row.dataScope)
}, },
/** 分配角色权限按钮操作 */ /** 分配角色权限按钮操作 */
//新增 和上面代码基本相同 // 新增 和上面代码基本相同
handleDataScope(row) { handleDataScope(row) {
if (row.roleId == 1) { if (row.roleId == 1) {
this.showRoleScope = false; this.showRoleScope = false
return; return
} }
this.reset(); this.reset()
this.showRoleScope = true; this.showRoleScope = true
const roleId = row.roleId || this.ids; const roleId = row.roleId || this.ids
const roleMenu = this.getRoleMenuTreeselect(roleId); const roleMenu = this.getRoleMenuTreeselect(roleId)
roleMenu.then((res) => { roleMenu.then((res) => {
let checkedKeys = res.data.checkedKeys; const checkedKeys = res.data.checkedKeys
checkedKeys.forEach((v) => { checkedKeys.forEach((v) => {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.menu.setChecked(v, true, false); this.$refs.menu.setChecked(v, true, false)
}); })
}); })
}); })
this.form = { this.form = {
roleId: row.roleId, roleId: row.roleId,
roleName: row.roleName, roleName: row.roleName,
roleKey: row.roleKey, roleKey: row.roleKey,
menuCheckStrictly: row.menuCheckStrictly, menuCheckStrictly: row.menuCheckStrictly
}; }
}, },
/** 分配用户操作 */ /** 分配用户操作 */
handleAuthUser: function (row) { handleAuthUser: function(row) {
const roleId = row.roleId; const roleId = row.roleId
this.$router.push({ path: "/system/roleusers", query: { roleId } }); this.$router.push({ path: '/system/roleusers', query: { roleId }})
}, },
/** 提交按钮 */ /** 提交按钮 */
submitForm: function () { submitForm: function() {
this.$refs["form"].validate((valid) => { this.$refs['form'].validate((valid) => {
if (valid) { if (valid) {
if (this.form.roleId != undefined && this.form.roleId > 0) { if (this.form.roleId != undefined && this.form.roleId > 0) {
this.form.type = "edit"; this.form.type = 'edit'
this.form.deptIds = this.getDeptAllCheckedKeys(); this.form.deptIds = this.getDeptAllCheckedKeys()
updateRole(this.form).then((response) => { updateRole(this.form).then((response) => {
this.msgSuccess("修改成功"); this.msgSuccess('修改成功')
this.open = false; this.open = false
this.getList(); this.getList()
}); })
} else { } else {
this.form.type = "add"; this.form.type = 'add'
this.form.deptIds = this.getDeptAllCheckedKeys(); this.form.deptIds = this.getDeptAllCheckedKeys()
addRole(this.form).then((response) => { addRole(this.form).then((response) => {
console.log(response); console.log(response)
this.open = false; this.open = false
if (response.code == 200) { if (response.code == 200) {
this.msgSuccess("新增成功"); this.msgSuccess('新增成功')
this.getList(); this.getList()
} else { } else {
this.msgInfo(response.msg); this.msgInfo(response.msg)
} }
}); })
} }
} }
}); })
}, },
/** 提交按钮（菜单数据权限） */ /** 提交按钮（菜单数据权限） */
submitDataScope: function () { submitDataScope: function() {
if (this.form.roleId != undefined) { if (this.form.roleId != undefined) {
this.form.menuIds = this.getMenuAllCheckedKeys(); this.form.menuIds = this.getMenuAllCheckedKeys()
dataScope(this.form).then((response) => { dataScope(this.form).then((response) => {
this.msgSuccess("修改成功"); this.msgSuccess('修改成功')
this.getList(); this.getList()
this.cancel(); this.cancel()
}); })
} else { } else {
this.msgError("请选择角色"); this.msgError('请选择角色')
} }
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const roleIds = row.roleId || this.ids; const roleIds = row.roleId || this.ids
this.$confirm( this.$confirm(
'是否确认删除角色编号为"' + roleIds + '"的数据项?', '是否确认删除角色编号为"' + roleIds + '"的数据项?',
"警告", '警告',
{ {
confirmButtonText: "确定", confirmButtonText: '确定',
cancelButtonText: "取消", cancelButtonText: '取消',
type: "warning", type: 'warning'
} }
) )
.then(function () { .then(function() {
return delRole(roleIds); return delRole(roleIds)
}) })
.then(() => { .then(() => {
this.getList(); this.getList()
this.msgSuccess("删除成功"); this.msgSuccess('删除成功')
}); })
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
const queryParams = this.queryParams; const queryParams = this.queryParams
this.$confirm("是否确认导出所有角色数据项?", "警告", { this.$confirm('是否确认导出所有角色数据项?', '警告', {
confirmButtonText: "确定", confirmButtonText: '确定',
cancelButtonText: "取消", cancelButtonText: '取消',
type: "warning", type: 'warning'
}) })
.then(function () { .then(function() {
return exportRole(queryParams); return exportRole(queryParams)
}) })
.then((response) => { .then((response) => {
this.download(response.data.path); this.download(response.data.path)
}); })
}, }
}, }
}; }
</script> </script>