|
|
|
@ -3,27 +3,31 @@ |
|
|
|
@ 时间: 2023-05-26 09:32:10 |
|
|
|
@ 备注: |
|
|
|
--> |
|
|
|
<script lang='ts' setup> |
|
|
|
<script lang="ts" setup> |
|
|
|
defineOptions({ |
|
|
|
name: "setuprole", |
|
|
|
inheritAttrs: false, |
|
|
|
name: "setuprole", |
|
|
|
inheritAttrs: false, |
|
|
|
}); |
|
|
|
import { searchRoleWord, roleLietCont, editRoleContKeyword } from "@/api/system/roleapi/types"; //数据结构 |
|
|
|
import { getSystemRoleList, editRoleContStatus } from "@/api/system/roleapi/rolecont"; //封装api请求 |
|
|
|
import AddCont from "@/views/powermanage/rolepower/setuprole/addrole.vue" //新增角色页面 |
|
|
|
import EditCont from "@/views/powermanage/rolepower/setuprole/editrole.vue" //编辑角色页面 |
|
|
|
import SetupRolePower from "@/views/powermanage/rolepower/setuprole/setuprolepower.vue" //配置权限 |
|
|
|
import StaffingRole from "@/views/powermanage/rolepower/setuprole/staffingrole.vue" //配置角色使用人员 |
|
|
|
import { |
|
|
|
searchRoleWord, |
|
|
|
roleLietCont, |
|
|
|
editRoleContKeyword, |
|
|
|
} from "@/api/system/roleapi/types"; //数据结构 |
|
|
|
import { getSystemRoleList, editRoleContStatus } from "@/api/system/roleapi/rolecont"; //封装api请求 |
|
|
|
import AddCont from "@/views/powermanage/rolepower/setuprole/addrole.vue"; //新增角色页面 |
|
|
|
import EditCont from "@/views/powermanage/rolepower/setuprole/editrole.vue"; //编辑角色页面 |
|
|
|
import SetupRolePower from "@/views/powermanage/rolepower/setuprole/setuprolepower.vue"; //配置权限 |
|
|
|
import StaffingRole from "@/views/powermanage/rolepower/setuprole/staffingrole.vue"; //配置角色使用人员 |
|
|
|
|
|
|
|
const queryFormRef = ref(ElForm); //查询表单 |
|
|
|
const searchForm = reactive<searchRoleWord>({ name: "" }); //查询表单数据 |
|
|
|
const ids = ref<number[]>([]); //批量删除的ID |
|
|
|
const loading = ref(false); //页面加载 |
|
|
|
const roleContList = ref<roleLietCont[]>([]) |
|
|
|
const openAddBox = ref(false); //新增角色 |
|
|
|
const openEditBox = ref(false); //编辑角色 |
|
|
|
const openSetupPowerBox = ref(false); //配置权限 |
|
|
|
const openSetupUsersBox = ref(false); //配置使用人员 |
|
|
|
const queryFormRef = ref(ElForm); //查询表单 |
|
|
|
const searchForm = reactive<searchRoleWord>({ name: "" }); //查询表单数据 |
|
|
|
const ids = ref<number[]>([]); //批量删除的ID |
|
|
|
const loading = ref(false); //页面加载 |
|
|
|
const roleContList = ref<roleLietCont[]>([]); |
|
|
|
const openAddBox = ref(false); //新增角色 |
|
|
|
const openEditBox = ref(false); //编辑角色 |
|
|
|
const openSetupPowerBox = ref(false); //配置权限 |
|
|
|
const openSetupUsersBox = ref(false); //配置使用人员 |
|
|
|
const selectTableLength = ref(0); |
|
|
|
|
|
|
|
const currentRoleCont = reactive<editRoleContKeyword>({}); |
|
|
|
@ -31,93 +35,92 @@ const currentRoleCont = reactive<editRoleContKeyword>({}); |
|
|
|
* 搜索角色 |
|
|
|
*/ |
|
|
|
function searchRoleList() { |
|
|
|
getSystemRoleList(searchForm) |
|
|
|
.then(({ data }) => { |
|
|
|
roleContList.value = data; |
|
|
|
}) |
|
|
|
getSystemRoleList(searchForm).then(({ data }) => { |
|
|
|
roleContList.value = data; |
|
|
|
}); |
|
|
|
} |
|
|
|
/** |
|
|
|
* 行checkbox change事件 |
|
|
|
*/ |
|
|
|
function handleSelectionChange(selection: any) { |
|
|
|
selectTableLength.value = selection.length; |
|
|
|
ids.value = selection.map((item: any) => item.id); |
|
|
|
selectTableLength.value = selection.length; |
|
|
|
ids.value = selection.map((item: any) => item.id); |
|
|
|
} |
|
|
|
/** |
|
|
|
* 查询重置 |
|
|
|
*/ |
|
|
|
function resetQuery() { |
|
|
|
queryFormRef.value.resetFields(); |
|
|
|
searchRoleList(); |
|
|
|
queryFormRef.value.resetFields(); |
|
|
|
searchRoleList(); |
|
|
|
} |
|
|
|
/** |
|
|
|
* 打开角色新增页面 |
|
|
|
*/ |
|
|
|
function openAddRoleDialog() { |
|
|
|
openAddBox.value = true; |
|
|
|
openAddBox.value = true; |
|
|
|
} |
|
|
|
/** |
|
|
|
* 打开编辑角色页面 |
|
|
|
*/ |
|
|
|
function openEditRoleDialog(roleCont: roleLietCont) { |
|
|
|
currentRoleCont.id = roleCont.id.toString() |
|
|
|
currentRoleCont.name = roleCont.name |
|
|
|
currentRoleCont.sort = roleCont.sort |
|
|
|
openEditBox.value = true |
|
|
|
// console.log("监听数据--->",openEditBox.value,currentRoleCont); |
|
|
|
currentRoleCont.id = roleCont.id.toString(); |
|
|
|
currentRoleCont.name = roleCont.name; |
|
|
|
currentRoleCont.sort = roleCont.sort; |
|
|
|
openEditBox.value = true; |
|
|
|
// console.log("监听数据--->",openEditBox.value,currentRoleCont); |
|
|
|
} |
|
|
|
/** |
|
|
|
* 删除角色 |
|
|
|
*/ |
|
|
|
function handleDelete(delId?: number) { |
|
|
|
const delRoleIds = [delId || ids.value].join(","); |
|
|
|
if (!delRoleIds) { |
|
|
|
ElMessage.warning("请勾选删除项"); |
|
|
|
return; |
|
|
|
} |
|
|
|
let dictTypeIdAry = delRoleIds.split(",") |
|
|
|
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", { |
|
|
|
confirmButtonText: "确定", |
|
|
|
cancelButtonText: "取消", |
|
|
|
type: "warning", |
|
|
|
const delRoleIds = [delId || ids.value].join(","); |
|
|
|
if (!delRoleIds) { |
|
|
|
ElMessage.warning("请勾选删除项"); |
|
|
|
return; |
|
|
|
} |
|
|
|
let dictTypeIdAry = delRoleIds.split(","); |
|
|
|
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", { |
|
|
|
confirmButtonText: "确定", |
|
|
|
cancelButtonText: "取消", |
|
|
|
type: "warning", |
|
|
|
}) |
|
|
|
.then(() => { |
|
|
|
editRoleContStatus({ id: dictTypeIdAry, istrue: 2, state: 3 }).then(() => { |
|
|
|
ElMessage.success("删除成功"); |
|
|
|
searchRoleList(); |
|
|
|
}); |
|
|
|
}) |
|
|
|
.then(() => { |
|
|
|
editRoleContStatus({ id: dictTypeIdAry, istrue: 2, state: 3 }).then(() => { |
|
|
|
ElMessage.success("删除成功"); |
|
|
|
searchRoleList(); |
|
|
|
}); |
|
|
|
}) |
|
|
|
.catch(() => ElMessage.info("已取消删除")); |
|
|
|
.catch(() => ElMessage.info("已取消删除")); |
|
|
|
} |
|
|
|
/** |
|
|
|
* 配置权限 |
|
|
|
*/ |
|
|
|
function openSetupPwoerDialog(roleCont: roleLietCont) { |
|
|
|
currentRoleCont.id = roleCont.id.toString() |
|
|
|
currentRoleCont.name = "配置 < " + roleCont.name + " > 权限" |
|
|
|
currentRoleCont.sort = roleCont.sort |
|
|
|
openSetupPowerBox.value = true; |
|
|
|
currentRoleCont.id = roleCont.id.toString(); |
|
|
|
currentRoleCont.name = "配置 < " + roleCont.name + " > 权限"; |
|
|
|
currentRoleCont.sort = roleCont.sort; |
|
|
|
openSetupPowerBox.value = true; |
|
|
|
} |
|
|
|
/** |
|
|
|
* 配置使用人员 |
|
|
|
*/ |
|
|
|
function openSetupUsersDialog(roleCont: roleLietCont) { |
|
|
|
currentRoleCont.id = roleCont.id.toString() |
|
|
|
currentRoleCont.name = roleCont.name |
|
|
|
currentRoleCont.sort = roleCont.sort |
|
|
|
openSetupUsersBox.value = true; |
|
|
|
currentRoleCont.id = roleCont.id.toString(); |
|
|
|
currentRoleCont.name = roleCont.name; |
|
|
|
currentRoleCont.sort = roleCont.sort; |
|
|
|
openSetupUsersBox.value = true; |
|
|
|
} |
|
|
|
const searchRoleListsun = () => { |
|
|
|
searchRoleList(); |
|
|
|
} |
|
|
|
searchRoleList(); |
|
|
|
}; |
|
|
|
//注册一个回调函数，在组件挂载完成后执行。 |
|
|
|
onMounted(() => { |
|
|
|
searchRoleList(); |
|
|
|
searchRoleList(); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<!-- <div class="search"> |
|
|
|
<div class="app-container"> |
|
|
|
<!-- <div class="search"> |
|
|
|
<el-form ref="queryFormRef" :model="searchForm" :inline="true"> |
|
|
|
<el-form-item label="关键字" prop="keywords"> |
|
|
|
<el-input v-model="searchForm.name" placeholder="角色名称" clearable /> |
|
|
|
@ -131,101 +134,152 @@ onMounted(() => { |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</div> --> |
|
|
|
<!--角色主体部门--> |
|
|
|
<el-card shadow="never"> |
|
|
|
<template #header> |
|
|
|
<el-form ref="queryFormRef" :model="searchForm" :inline="true"> |
|
|
|
<el-row style="padding-left: 20px;"> |
|
|
|
<el-col :span="19"> |
|
|
|
<el-form-item label="关键字" prop="keywords"> |
|
|
|
<el-input v-model="searchForm.name" placeholder="角色名称" clearable /> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="5" class="flex-end"> |
|
|
|
<el-form-item> |
|
|
|
<el-button type="primary" @click="searchRoleList"><template |
|
|
|
#icon><i-ep-search /></template>搜索</el-button> |
|
|
|
<el-button @click="resetQuery"> |
|
|
|
<template #icon><i-ep-refresh /></template> |
|
|
|
重置</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-form> |
|
|
|
<!-- --> |
|
|
|
</template> |
|
|
|
<div style="margin-bottom: 15px;height: 32px;display: flex;"> |
|
|
|
<el-button type="primary" @click="openAddRoleDialog()" |
|
|
|
v-hasPerm="['124066798512386048']"><i-ep-plus />新增</el-button> |
|
|
|
<el-button plain type="primary" v-hasPerm="['124066956029472768']" :disabled="ids.length === 0" |
|
|
|
@click="handleDelete()"><i-ep-delete />删除</el-button> |
|
|
|
<span class="select-text">已选 {{ selectTableLength }} 条</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!--角色主体部门--> |
|
|
|
<el-card shadow="never"> |
|
|
|
<template #header> |
|
|
|
<el-form ref="queryFormRef" :model="searchForm" :inline="true"> |
|
|
|
<el-row style="padding-left: 20px"> |
|
|
|
<el-col :span="19"> |
|
|
|
<el-form-item label="关键字" prop="keywords"> |
|
|
|
<el-input v-model="searchForm.name" placeholder="角色名称" clearable /> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="5" class="flex-end"> |
|
|
|
<el-form-item> |
|
|
|
<el-button type="primary" @click="searchRoleList" |
|
|
|
><template #icon><i-ep-search /></template>搜索</el-button |
|
|
|
> |
|
|
|
<el-button @click="resetQuery"> |
|
|
|
<template #icon><i-ep-refresh /></template> |
|
|
|
重置</el-button |
|
|
|
> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-form> |
|
|
|
<!-- --> |
|
|
|
</template> |
|
|
|
<div style="margin-bottom: 15px; height: 32px; display: flex"> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
@click="openAddRoleDialog()" |
|
|
|
v-hasPerm="['124066798512386048']" |
|
|
|
><i-ep-plus />新增</el-button |
|
|
|
> |
|
|
|
<el-button |
|
|
|
plain |
|
|
|
type="primary" |
|
|
|
v-hasPerm="['124066956029472768']" |
|
|
|
:disabled="ids.length === 0" |
|
|
|
@click="handleDelete()" |
|
|
|
><i-ep-delete />删除</el-button |
|
|
|
> |
|
|
|
<span class="select-text">已选 {{ selectTableLength }} 条</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<el-table v-loading="loading" highlight-current-row :data="roleContList" stripe |
|
|
|
@selection-change="handleSelectionChange"> |
|
|
|
<el-table-column type="selection" width="55" align="center" /> |
|
|
|
<el-table-column label="角色名称" prop="name" /> |
|
|
|
<el-table-column label="排序" prop="sort" align="center" width="200" /> |
|
|
|
<el-table-column label="状态" align="center" width="100"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-tag v-if="scope.row.state === 1" type="success">启用</el-tag> |
|
|
|
<el-tag v-else type="info">禁用</el-tag> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column fixed="right" label="操作" align="center"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-button v-hasPerm="['124067026950959104']" type="primary" link size="small" |
|
|
|
@click.stop="openSetupPwoerDialog(scope.row)">配置权限</el-button> |
|
|
|
<el-button v-hasPerm="['124067108593086464']" type="primary" link size="small" |
|
|
|
@click.stop="openSetupUsersDialog(scope.row)">使用人员</el-button> |
|
|
|
<el-button v-hasPerm="['124066883237326848']" type="primary" link size="small" |
|
|
|
@click.stop="openEditRoleDialog(scope.row)">编辑</el-button> |
|
|
|
<el-button v-hasPerm="['124066956029472768']" type="primary" link size="small" |
|
|
|
@click.stop="handleDelete(scope.row.id)">删除</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</el-card> |
|
|
|
<!--新增角色--> |
|
|
|
<AddCont v-model:addIsShow="openAddBox" /> |
|
|
|
<!--编辑角色--> |
|
|
|
<EditCont v-model:isShow="openEditBox" :roleCont="currentRoleCont" @refreshRoleList="searchRoleListsun" /> |
|
|
|
<!--配置权限--> |
|
|
|
<SetupRolePower v-model:powerIsShow="openSetupPowerBox" :roleId="currentRoleCont.id" |
|
|
|
:roleTitle="currentRoleCont.name" /> |
|
|
|
<!--配置角色使用人员--> |
|
|
|
<StaffingRole v-model:userIsShow="openSetupUsersBox" :roleId="currentRoleCont.id" |
|
|
|
:roleTitle="currentRoleCont.name" @refreshRoleUserList="searchRoleListsun" /> |
|
|
|
</div> |
|
|
|
<el-table |
|
|
|
v-loading="loading" |
|
|
|
highlight-current-row |
|
|
|
:data="roleContList" |
|
|
|
stripe |
|
|
|
@selection-change="handleSelectionChange" |
|
|
|
> |
|
|
|
<el-table-column type="selection" width="55" align="center" /> |
|
|
|
<el-table-column label="角色名称" prop="name" /> |
|
|
|
<el-table-column label="排序" prop="sort" align="center" width="200" /> |
|
|
|
<el-table-column label="状态" align="center" width="100"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-tag v-if="scope.row.state === 1" type="success">启用</el-tag> |
|
|
|
<el-tag v-else type="info">禁用</el-tag> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column fixed="right" label="操作" align="center"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-button |
|
|
|
v-hasPerm="['124067026950959104']" |
|
|
|
type="primary" |
|
|
|
link |
|
|
|
size="small" |
|
|
|
@click.stop="openSetupPwoerDialog(scope.row)" |
|
|
|
>配置权限</el-button |
|
|
|
> |
|
|
|
<el-button |
|
|
|
v-hasPerm="['124067108593086464']" |
|
|
|
type="primary" |
|
|
|
link |
|
|
|
size="small" |
|
|
|
@click.stop="openSetupUsersDialog(scope.row)" |
|
|
|
>使用人员</el-button |
|
|
|
> |
|
|
|
<el-button |
|
|
|
v-hasPerm="['124066883237326848']" |
|
|
|
type="primary" |
|
|
|
link |
|
|
|
size="small" |
|
|
|
@click.stop="openEditRoleDialog(scope.row)" |
|
|
|
>编辑</el-button |
|
|
|
> |
|
|
|
<el-button |
|
|
|
v-hasPerm="['124066956029472768']" |
|
|
|
type="primary" |
|
|
|
link |
|
|
|
size="small" |
|
|
|
@click.stop="handleDelete(scope.row.id)" |
|
|
|
>删除</el-button |
|
|
|
> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</el-card> |
|
|
|
<!--新增角色--> |
|
|
|
<AddCont v-model:addIsShow="openAddBox" /> |
|
|
|
<!--编辑角色--> |
|
|
|
<EditCont |
|
|
|
v-model:isShow="openEditBox" |
|
|
|
:roleCont="currentRoleCont" |
|
|
|
@refreshRoleList="searchRoleListsun" |
|
|
|
/> |
|
|
|
<!--配置权限--> |
|
|
|
<SetupRolePower |
|
|
|
v-model:powerIsShow="openSetupPowerBox" |
|
|
|
:roleId="currentRoleCont.id" |
|
|
|
:roleTitle="currentRoleCont.name" |
|
|
|
/> |
|
|
|
<!--配置角色使用人员--> |
|
|
|
<StaffingRole |
|
|
|
v-model:userIsShow="openSetupUsersBox" |
|
|
|
:roleId="currentRoleCont.id" |
|
|
|
:roleTitle="currentRoleCont.name" |
|
|
|
@refreshRoleUserList="searchRoleListsun" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<style lang='scss' scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
::v-deep(.el-card__header) { |
|
|
|
padding: 0 !important; |
|
|
|
height: 78px !important; |
|
|
|
line-height: 78px; |
|
|
|
padding: 0 !important; |
|
|
|
height: 78px !important; |
|
|
|
line-height: 78px; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep(.el-form) { |
|
|
|
padding-top: 10px; |
|
|
|
padding-top: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.flex-end { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
|
|
|
|
|
.el-form-item { |
|
|
|
margin-right: 20px; |
|
|
|
} |
|
|
|
.el-form-item { |
|
|
|
margin-right: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
.select-text { |
|
|
|
display: inline-block; |
|
|
|
color: #999; |
|
|
|
font-size: 16px; |
|
|
|
padding-left: 15px; |
|
|
|
line-height: 40px; |
|
|
|
height: 32px; |
|
|
|
display: inline-block; |
|
|
|
color: #999; |
|
|
|
font-size: 16px; |
|
|
|
padding-left: 15px; |
|
|
|
line-height: 40px; |
|
|
|
height: 32px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
herenshan112
7 months ago