wuweihua
3e9b34e0fd
- 新增 BasicForm 配置驱动表单组件，支持多种控件、字典自动加载、校验、插槽扩展 - 新增 BasicTable 公共表格组件，集成搜索栏+工具栏+表格+分页，基于 columns/searchColumns 配置驱动 - 替换 18 个业务页面 el-table 为 BasicTable（post/user/role/dict/config/notice/job/log/logininfor/operlog/online/gen 等） - 全局注册 BasicForm、BasicTable 组件 - 项目标题由若依管理系统改为 BMS
126 lines
4.1 KiB
Vue
126 lines
4.1 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<basic-table
|
||
ref="tableRef"
|
||
:columns="columns"
|
||
:search-columns="searchColumns"
|
||
:query="queryList"
|
||
:extra-params="{ roleId: route.params.roleId }"
|
||
row-key="userId"
|
||
@selection-change="handleSelectionChange"
|
||
>
|
||
<template #toolbar="{ selection }">
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="primary"
|
||
plain
|
||
icon="Plus"
|
||
@click="openSelectUser"
|
||
v-hasPermi="['system:role:add']"
|
||
>添加用户</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="danger"
|
||
plain
|
||
icon="CircleClose"
|
||
:disabled="!selection.length"
|
||
@click="cancelAuthUserAll"
|
||
v-hasPermi="['system:role:remove']"
|
||
>批量取消授权</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="warning"
|
||
plain
|
||
icon="Close"
|
||
@click="handleClose"
|
||
>关闭</el-button>
|
||
</el-col>
|
||
</template>
|
||
|
||
<template #col-action="{ row }">
|
||
<el-button link type="primary" icon="CircleClose" @click="cancelAuthUser(row)" v-hasPermi="['system:role:remove']">取消授权</el-button>
|
||
</template>
|
||
</basic-table>
|
||
|
||
<select-user ref="selectRef" :role-id="route.params.roleId" @ok="handleSelectOk" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup name="AuthUser">
|
||
import selectUser from "./selectUser"
|
||
import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role"
|
||
|
||
const route = useRoute()
|
||
const { proxy } = getCurrentInstance()
|
||
|
||
const tableRef = ref()
|
||
const userIds = ref([])
|
||
|
||
// 搜索项配置
|
||
const searchColumns = [
|
||
{ label: "用户名称", prop: "userName", component: "input", placeholder: "请输入用户名称", width: "200px" },
|
||
{ label: "手机号码", prop: "phonenumber", component: "input", placeholder: "请输入手机号码", width: "200px" }
|
||
]
|
||
|
||
// 表格列配置
|
||
const columns = [
|
||
{ label: "用户名称", prop: "userName", align: "center" },
|
||
{ label: "用户昵称", prop: "nickName", align: "center" },
|
||
{ label: "邮箱", prop: "email", align: "center" },
|
||
{ label: "手机", prop: "phonenumber", align: "center" },
|
||
{ label: "状态", prop: "status", align: "center", dict: "sys_normal_disable" },
|
||
{ label: "创建时间", prop: "createTime", align: "center", width: 180, parseTime: true },
|
||
{ label: "操作", prop: "action", align: "center", width: 120, showInToolbar: false }
|
||
]
|
||
|
||
// 查询函数（BasicTable 调用，返回 { rows, total }）
|
||
function queryList(params) {
|
||
return allocatedUserList(params)
|
||
}
|
||
|
||
/** 多选框选中数据 */
|
||
function handleSelectionChange(selection) {
|
||
userIds.value = selection.map(item => item.userId)
|
||
}
|
||
|
||
/** 打开授权用户表弹窗 */
|
||
function openSelectUser() {
|
||
proxy.$refs["selectRef"].show()
|
||
}
|
||
|
||
/** 选择用户回调：刷新列表（回到第一页） */
|
||
function handleSelectOk() {
|
||
tableRef.value?.reload()
|
||
}
|
||
|
||
/** 取消授权按钮操作 */
|
||
function cancelAuthUser(row) {
|
||
proxy.$modal.confirm('确认要取消该用户"' + row.userName + '"角色吗？').then(function () {
|
||
return authUserCancel({ userId: row.userId, roleId: route.params.roleId })
|
||
}).then(() => {
|
||
tableRef.value?.refresh()
|
||
proxy.$modal.msgSuccess("取消授权成功")
|
||
}).catch(() => {})
|
||
}
|
||
|
||
/** 批量取消授权按钮操作 */
|
||
function cancelAuthUserAll() {
|
||
const roleId = route.params.roleId
|
||
const uIds = userIds.value.join(",")
|
||
proxy.$modal.confirm("是否取消选中用户授权数据项?").then(function () {
|
||
return authUserCancelAll({ roleId: roleId, userIds: uIds })
|
||
}).then(() => {
|
||
tableRef.value?.refresh()
|
||
proxy.$modal.msgSuccess("取消授权成功")
|
||
}).catch(() => {})
|
||
}
|
||
|
||
/** 关闭按钮 */
|
||
function handleClose() {
|
||
const obj = { path: "/system/role" }
|
||
proxy.$tab.closeOpenPage(obj)
|
||
}
|
||
</script>
|