This commit is contained in:
ailanyin
2023-05-17 12:37:48 +08:00
parent 60d8d3c95d
commit 0a22241c92
3 changed files with 114 additions and 139 deletions

View File

@ -104,7 +104,7 @@ export function insertAuthUser(data) {
// 根据角色ID查询部门树结构
export function deptTreeSelect(roleId) {
return request({
url: '/system/dept/dept-tree/' + roleId,
method: 'get'
})
url: "/system/dept/dept-tree/" + roleId,
method: "get",
});
}

View File

@ -129,10 +129,10 @@ export function updateAuthRole(data) {
// 查询部门下拉树结构
export function deptTreeSelect() {
return request({
url: '/system/dept/dept-tree',
method: 'get',
url: "/system/dept/dept-tree",
method: "get",
params: {
status: '1'
}
})
status: "1",
},
});
}

View File

@ -1,17 +1,17 @@
<template>
<div class="app-container">
<el-form
v-show="showSearch"
ref="queryRef"
:inline="true"
:model="queryParams"
ref="queryRef"
v-show="showSearch"
:inline="true"
label-width="68px"
>
<el-form-item label="角色名称" prop="roleName">
<el-input
v-model="queryParams.roleName"
clearable
placeholder="请输入角色名称"
clearable
style="width: 240px"
@keyup.enter="handleQuery"
/>
@ -19,8 +19,8 @@
<el-form-item label="权限字符" prop="roleKey">
<el-input
v-model="queryParams.roleKey"
clearable
placeholder="请输入权限字符"
clearable
style="width: 240px"
@keyup.enter="handleQuery"
/>
@ -28,8 +28,8 @@
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
clearable
placeholder="角色状态"
clearable
style="width: 240px"
>
<el-option
@ -43,15 +43,15 @@
<el-form-item label="创建时间" style="width: 308px">
<el-date-picker
v-model="dateRange"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
type="daterange"
value-format="YYYY-MM-DD"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button icon="Search" type="primary" @click="handleQuery"
<el-button type="primary" icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
@ -60,45 +60,45 @@
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
v-hasPermi="['system:role:add']"
icon="Plus"
plain
type="primary"
plain
icon="Plus"
@click="handleAdd"
>新增
</el-button>
v-hasPermi="['system:role:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPermi="['system:role:edit']"
:disabled="single"
icon="Edit"
plain
type="success"
plain
icon="Edit"
:disabled="single"
@click="handleUpdate"
>修改
</el-button>
v-hasPermi="['system:role:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPermi="['system:role:remove']"
:disabled="multiple"
icon="Delete"
plain
type="danger"
plain
icon="Delete"
:disabled="multiple"
@click="handleDelete"
>删除
</el-button>
v-hasPermi="['system:role:remove']"
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPermi="['system:role:export']"
icon="Download"
plain
type="warning"
plain
icon="Download"
@click="handleExport"
>导出
</el-button>
v-hasPermi="['system:role:export']"
>导出</el-button
>
</el-col>
<right-toolbar
v-model:showSearch="showSearch"
@ -112,92 +112,92 @@
:data="roleList"
@selection-change="handleSelectionChange"
>
<el-table-column align="center" type="selection" width="55" />
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="角色编号" prop="roleId" width="120" />
<el-table-column
:show-overflow-tooltip="true"
label="角色名称"
prop="roleName"
:show-overflow-tooltip="true"
width="150"
/>
<el-table-column
:show-overflow-tooltip="true"
label="权限字符"
prop="roleKey"
:show-overflow-tooltip="true"
width="150"
/>
<el-table-column label="显示顺序" prop="roleSort" width="100" />
<el-table-column align="center" label="状态" width="100">
<el-table-column label="状态" align="center" width="100">
<template #default="scope">
<el-switch
v-model="scope.row.status"
active-value="1"
inactive-value="0"
active-value="0"
inactive-value="1"
@change="handleStatusChange(scope.row)"
></el-switch>
</template>
</el-table-column>
<el-table-column align="center" label="创建时间" prop="createTime">
<el-table-column label="创建时间" align="center" prop="createTime">
<template #default="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
label="操作"
>
<template #default="scope">
<el-tooltip
v-if="scope.row.roleId !== 1"
content="修改"
placement="top"
v-if="scope.row.roleId !== 1"
>
<el-button
v-hasPermi="['system:role:edit']"
icon="Edit"
link
type="primary"
icon="Edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:role:edit']"
></el-button>
</el-tooltip>
<el-tooltip
v-if="scope.row.roleId !== 1"
content="删除"
placement="top"
v-if="scope.row.roleId !== 1"
>
<el-button
v-hasPermi="['system:role:remove']"
icon="Delete"
link
type="primary"
icon="Delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:role:remove']"
></el-button>
</el-tooltip>
<el-tooltip
v-if="scope.row.roleId !== 1"
content="数据权限"
placement="top"
v-if="scope.row.roleId !== 1"
>
<el-button
v-hasPermi="['system:role:edit']"
icon="CircleCheck"
link
type="primary"
icon="CircleCheck"
@click="handleDataScope(scope.row)"
v-hasPermi="['system:role:edit']"
></el-button>
</el-tooltip>
<el-tooltip
v-if="scope.row.roleId !== 1"
content="分配用户"
placement="top"
v-if="scope.row.roleId !== 1"
>
<el-button
v-hasPermi="['system:role:edit']"
icon="User"
link
type="primary"
icon="User"
@click="handleAuthUser(scope.row)"
v-hasPermi="['system:role:edit']"
></el-button>
</el-tooltip>
</template>
@ -206,14 +206,14 @@
<pagination
v-show="total > 0"
v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNum"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改角色配置对话框 -->
<el-dialog v-model="open" :title="title" append-to-body width="500px">
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
<el-form-item label="角色名称" prop="roleName">
<el-input v-model="form.roleName" placeholder="请输入角色名称" />
@ -235,8 +235,8 @@
<el-form-item label="角色顺序" prop="roleSort">
<el-input-number
v-model="form.roleSort"
:min="0"
controls-position="right"
:min="0"
/>
</el-form-item>
<el-form-item label="状态">
@ -245,39 +245,42 @@
v-for="dict in sys_normal_disable"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}
</el-radio>
>{{ dict.label }}</el-radio
>
</el-radio-group>
</el-form-item>
<el-form-item label="菜单权限">
<el-checkbox
v-model="menuExpand"
@change="handleCheckedTreeExpand($event, 'menu')"
>展开/折叠
</el-checkbox>
>展开/折叠</el-checkbox
>
<el-checkbox
v-model="menuNodeAll"
@change="handleCheckedTreeNodeAll($event, 'menu')"
>全选/全不选
</el-checkbox>
<!-- @change="handleCheckedTreeConnect($event, 'menu')"-->
<el-checkbox v-model="menuCheckStrictly"> 父子联动 </el-checkbox>
>全选/全不选</el-checkbox
>
<el-checkbox
v-model="form.menuCheckStrictly"
@change="handleCheckedTreeConnect($event, 'menu')"
>父子联动</el-checkbox
>
<el-tree
ref="menuRef"
:check-strictly="!menuCheckStrictly"
:data="menuOptions"
:props="{ label: 'label', children: 'children' }"
class="tree-border"
empty-text="加载中请稍候"
node-key="id"
:data="menuOptions"
show-checkbox
ref="menuRef"
node-key="id"
:check-strictly="!form.menuCheckStrictly"
empty-text="加载中请稍候"
:props="{ label: 'label', children: 'children' }"
></el-tree>
</el-form-item>
<el-form-item label="备注">
<el-input
v-model="form.remark"
placeholder="请输入内容"
type="textarea"
placeholder="请输入内容"
></el-input>
</el-form-item>
</el-form>
@ -291,10 +294,10 @@
<!-- 分配角色数据权限对话框 -->
<el-dialog
v-model="openDataScope"
:title="title"
append-to-body
v-model="openDataScope"
width="500px"
append-to-body
>
<el-form :model="form" label-width="80px">
<el-form-item label="角色名称">
@ -313,29 +316,32 @@
></el-option>
</el-select>
</el-form-item>
<el-form-item v-show="form.dataScope == 2" label="数据权限">
<el-form-item label="数据权限" v-show="form.dataScope == 2">
<el-checkbox
v-model="deptExpand"
@change="handleCheckedTreeExpand($event, 'dept')"
>展开/折叠
</el-checkbox>
>展开/折叠</el-checkbox
>
<el-checkbox
v-model="deptNodeAll"
@change="handleCheckedTreeNodeAll($event, 'dept')"
>全选/全不选
</el-checkbox>
<!-- @change="handleCheckedTreeConnect($event, 'dept')"-->
<el-checkbox v-model="deptCheckStrictly"> 父子联动 </el-checkbox>
>全选/全不选</el-checkbox
>
<el-checkbox
v-model="form.deptCheckStrictly"
@change="handleCheckedTreeConnect($event, 'dept')"
>父子联动</el-checkbox
>
<el-tree
ref="deptRef"
:check-strictly="!deptCheckStrictly"
:data="deptOptions"
:props="{ label: 'label', children: 'children' }"
class="tree-border"
default-expand-all
empty-text="加载中请稍候"
node-key="id"
:data="deptOptions"
show-checkbox
default-expand-all
ref="deptRef"
node-key="id"
:check-strictly="!form.deptCheckStrictly"
empty-text="加载中请稍候"
:props="{ label: 'label', children: 'children' }"
></el-tree>
</el-form-item>
</el-form>
@ -349,28 +355,27 @@
</div>
</template>
<script lang="jsx" name="Role" setup>
import { ElMessageBox } from "element-plus";
<script setup name="Role" lang="jsx">
import {
addRole,
changeRoleStatus,
dataScope,
delRole,
deptTreeSelect,
getRole,
listRole,
updateRole,
deptTreeSelect,
} from "@/api/system/role";
import {
roleMenuTreeselect,
treeSelect as menuTreeSelect,
treeSelect as menuTreeselect,
} from "@/api/system/menu";
import { sys_normal_disable } from "@/constant/dict";
import { ElMessageBox } from "element-plus";
const router = useRouter();
const { proxy } = getCurrentInstance();
const deptCheckStrictly = ref(true); /*部门父子联动*/
const menuCheckStrictly = ref(true); /*菜单父子联动*/
const roleList = ref([]);
const open = ref(false);
const loading = ref(true);
@ -433,20 +438,17 @@ function getList() {
}
);
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery() {
dateRange.value = [];
proxy.resetForm("queryRef");
handleQuery();
}
/** 删除按钮操作 */
function handleDelete(row) {
const roleIds = row.roleId || ids.value;
@ -470,7 +472,6 @@ function handleDelete(row) {
))}
</>
);
// `是否确认删除角色名称为"${roleNames.join(',')}"的数据项?`
ElMessageBox.confirm(messageVnode, "确认删除", {
type: "danger",
"confirm-button-class": "confirm-delete-button",
@ -484,7 +485,6 @@ function handleDelete(row) {
})
.catch(() => {});
}
/** 导出按钮操作 */
function handleExport() {
proxy.download(
@ -495,19 +495,17 @@ function handleExport() {
`role_${new Date().getTime()}.xlsx`
);
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
ids.value = selection.map((item) => item.roleId);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
/** 角色状态修改 */
function handleStatusChange(row) {
let text = row.status === "1" ? "启用" : "停用";
let text = row.status === "0" ? "启用" : "停用";
proxy.$modal
.confirm("确认要" + text + '"' + row.roleName + '"角色吗?')
.confirm('确认要"' + text + '""' + row.roleName + '"角色吗?')
.then(function () {
return changeRoleStatus(row.roleId, row.status);
})
@ -518,7 +516,6 @@ function handleStatusChange(row) {
row.status = row.status === "0" ? "1" : "0";
});
}
/** 更多操作 */
function handleCommand(command, row) {
switch (command) {
@ -532,19 +529,16 @@ function handleCommand(command, row) {
break;
}
}
/** 分配用户 */
function handleAuthUser(row) {
router.push("/system/role-auth/user/" + row.roleId);
}
/** 查询菜单树结构 */
function getMenuTreeSelect() {
menuTreeSelect().then((response) => {
function getMenuTreeselect() {
menuTreeselect().then((response) => {
menuOptions.value = response.data;
});
}
/** 所有部门节点数据 */
function getDeptAllCheckedKeys() {
// 目前被选中的部门节点
@ -554,7 +548,6 @@ function getDeptAllCheckedKeys() {
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
return checkedKeys;
}
/** 重置新增的表单以及其他数据 */
function reset() {
if (menuRef.value != undefined) {
@ -569,24 +562,22 @@ function reset() {
roleName: undefined,
roleKey: undefined,
roleSort: 0,
status: "1",
status: "0",
menuIds: [],
deptIds: [],
// menuCheckStrictly: true,
// deptCheckStrictly: true,
menuCheckStrictly: true,
deptCheckStrictly: true,
remark: undefined,
};
proxy.resetForm("roleRef");
}
/** 添加角色 */
function handleAdd() {
reset();
getMenuTreeSelect();
getMenuTreeselect();
open.value = true;
title.value = "添加角色";
}
/** 修改角色 */
function handleUpdate(row) {
reset();
@ -609,7 +600,6 @@ function handleUpdate(row) {
title.value = "修改角色";
});
}
/** 根据角色ID查询菜单树结构 */
function getRoleMenuTreeselect(roleId) {
return roleMenuTreeselect(roleId).then((response) => {
@ -617,7 +607,6 @@ function getRoleMenuTreeselect(roleId) {
return response;
});
}
/** 根据角色ID查询部门树结构 */
function getDeptTree(roleId) {
return deptTreeSelect(roleId).then((response) => {
@ -625,7 +614,6 @@ function getDeptTree(roleId) {
return response;
});
}
/** 树权限(展开/折叠)*/
function handleCheckedTreeExpand(value, type) {
if (type == "menu") {
@ -640,7 +628,6 @@ function handleCheckedTreeExpand(value, type) {
}
}
}
/** 树权限(全选/全不选) */
function handleCheckedTreeNodeAll(value, type) {
if (type == "menu") {
@ -649,7 +636,6 @@ function handleCheckedTreeNodeAll(value, type) {
deptRef.value.setCheckedNodes(value ? deptOptions.value : []);
}
}
/** 树权限(父子联动) */
function handleCheckedTreeConnect(value, type) {
if (type == "menu") {
@ -658,7 +644,6 @@ function handleCheckedTreeConnect(value, type) {
form.value.deptCheckStrictly = value ? true : false;
}
}
/** 所有菜单节点数据 */
function getMenuAllCheckedKeys() {
// 目前被选中的菜单节点
@ -668,7 +653,6 @@ function getMenuAllCheckedKeys() {
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
return checkedKeys;
}
/** 提交按钮 */
function submitForm() {
proxy.$refs["roleRef"].validate((valid) => {
@ -691,20 +675,17 @@ function submitForm() {
}
});
}
/** 取消按钮 */
function cancel() {
open.value = false;
reset();
}
/** 选择角色权限范围触发 */
function dataScopeSelectChange(value) {
if (value !== "2") {
deptRef.value.setCheckedKeys([]);
}
}
/** 分配数据权限操作 */
function handleDataScope(row) {
reset();
@ -724,7 +705,6 @@ function handleDataScope(row) {
title.value = "分配数据权限";
});
}
/** 提交按钮(数据权限) */
function submitDataScope() {
if (form.value.roleId != undefined) {
@ -736,7 +716,6 @@ function submitDataScope() {
});
}
}
/** 取消按钮(数据权限)*/
function cancelDataScope() {
openDataScope.value = false;
@ -745,7 +724,3 @@ function cancelDataScope() {
getList();
</script>
<style lang="scss" scoped>
.confirm-button-class {
}
</style>