|
<template>
|
<basicContainer>
|
<avue-crud
|
:option="option"
|
:table-loading="pageF.loading"
|
:data="tableData"
|
:page="page"
|
:permission="permissionList"
|
:before-open="beforeOpen"
|
v-model="form"
|
ref="crudRef"
|
@row-update="rowUpdate"
|
@row-save="rowSave"
|
@row-del="rowDel"
|
@search-change="searchChange"
|
@search-reset="searchReset"
|
@selection-change="selectionChange"
|
@current-change="currentChange"
|
@size-change="sizeChange"
|
@on-load="onLoad"
|
>
|
<template #menu-left>
|
<avue-input-table :props="props" multiple v-show="false"
|
:children="childrenOptions"
|
:on-load="onUserLoad" ref="inputTableRef"
|
v-model="form"
|
placeholder="请选择数据"></avue-input-table>
|
<el-button
|
type="primary"
|
plain
|
icon="Plus"
|
v-hasPermi="['system:role:add']"
|
@click="openSelectUser">添加用户
|
</el-button>
|
<el-button
|
type="danger"
|
plain
|
icon="CircleClose"
|
:disabled="pageF.multiple"
|
@click="cancelAuthUserAll"
|
v-hasPermi="['system:role:remove']"
|
>批量取消授权</el-button>
|
<el-button
|
type="warning"
|
plain
|
icon="Close"
|
@click="handleClose"
|
>关闭</el-button>
|
</template>
|
<template #menu="scope">
|
<el-link
|
type="primary"
|
icon="CircleClose" :underline="false"
|
v-hasPermi="['system:role:remove']"
|
@click="cancelAuthUser(scope.row)"> <span style="padding-left:5px">取消授权</span>
|
</el-link>
|
</template>
|
</avue-crud>
|
</basicContainer>
|
</template>
|
|
<script setup name="type" lang="ts">
|
import {TypeI,addType, delType, exportType, getType, listType, updateType,refreshCache} from "@/api/system/dict/type";
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
import {computed,reactive, ref, toRefs} from "vue";
|
import {PagesInterface, PageQueryInterface} from "@/utils/globalInterface";
|
import {usePagePlus} from "@/hooks/usePagePlus";
|
import {hasPermission} from "@/utils/permissionUtils";
|
import {
|
allocatedUserList,
|
authUserCancel,
|
authUserCancelAll,
|
authUserSelectAll,
|
unallocatedUserList
|
} from "@/api/system/role";
|
import {useRoute} from "vue-router";
|
import {UserI} from "@/api/system/user";
|
|
const { proxy } = useCurrentInstance();
|
const crudRef = ref();
|
const route = useRoute();
|
|
const permissionList = computed(()=>{
|
return {
|
addBtn: hasPermission(["system:type:add"]),
|
delBtn: hasPermission(["system:type:remove"]),
|
editBtn: hasPermission(["system:type:edit"]),
|
viewBtn: hasPermission(["system:type:query"]),
|
}
|
})
|
|
const data = reactive({
|
form:<TypeI>{},
|
queryParams:<TypeI&PageQueryInterface>{
|
roleId:<any> route.params.roleId,
|
},
|
page: <PagesInterface>{
|
pageSize: 10,
|
total: 0,
|
currentPage: 1,
|
|
},
|
selectionList:[],
|
roleId:<any> route.params.roleId,
|
})
|
const {queryParams,form,page,selectionList,roleId} = toRefs(data);
|
|
|
const { tableData,pageF,rowSave,rowUpdate,rowDel,beforeOpen,searchChange,
|
searchReset,selectionChange,onLoad,currentChange,sizeChange,handleDelete,handleExport,handleUpdate} = usePagePlus({
|
form:form,
|
queryParams:queryParams,
|
idKey:'userId',
|
page:page.value,
|
getListApi:allocatedUserList,
|
getDetailApi:getType,
|
exportApi:exportType,
|
deleteApi:delType,
|
addApi:addType,
|
updateApi:updateType,
|
handleUpdateFunc:()=>{
|
crudRef.value.rowEdit(selectionList.value[0]);
|
},
|
handleSelectionChangeFunc:(selection:any)=>{
|
selectionList.value = selection;
|
}
|
})
|
|
const option = ref({
|
rowKey: 'userId',
|
addBtn:false,
|
viewBtn:false,
|
editBtn:false,
|
delBtn:false,
|
column: {
|
userName: {
|
label: '用户名称',addDisplay:false,editDisplay:false,
|
},
|
nickName: {
|
label: '用户昵称',search:true,
|
},
|
email: {
|
label: '邮箱',search:true,
|
},
|
phonenumber: {
|
label: '手机',search:true,
|
},
|
status: {
|
label: '状态',search:true,value:'0',
|
type: 'radio', dicUrl: '/system/dict/data/type/sys_normal_disable',
|
rules:[{required: true, message: "请选择状态", trigger: "change"}]
|
},
|
createTime: {
|
label: '创建时间',addDisplay:false,editDisplay:false,
|
},
|
|
}
|
})
|
const props = ref({
|
label: 'userName',
|
value: 'userId'
|
})
|
|
/** 刷新缓存按钮操作 */
|
function handleRefreshCache() {
|
refreshCache().then(() => {
|
proxy.$modal.msgSuccess("刷新成功");
|
});
|
}
|
// 返回按钮
|
function handleClose() {
|
const obj = { path: "/system/role" };
|
proxy.$tab.closeOpenPage(obj);
|
}
|
/** 取消授权按钮操作 */
|
function cancelAuthUser(row?:UserI) {
|
proxy.$modal.confirm('确认要取消该用户"' + row?.userName + '"角色吗？').then(function () {
|
return authUserCancel({ userId: row?.userId, roleId: roleId.value });
|
}).then(() => {
|
onLoad(page.value);
|
proxy.$modal.msgSuccess("取消授权成功");
|
}).catch(() => {});
|
}
|
|
/** 批量取消授权按钮操作 */
|
function cancelAuthUserAll() {
|
const uIds = pageF.ids!.join(",");
|
proxy.$modal.confirm("是否取消选中用户授权数据项?").then(function () {
|
return authUserCancelAll({ roleId: roleId.value, userIds: uIds });
|
}).then(() => {
|
onLoad(page.value);
|
proxy.$modal.msgSuccess("取消授权成功");
|
}).catch(() => {});
|
}
|
const childrenOptions = ref({
|
border: true,
|
rowKey: 'userId',
|
column:{
|
userName:{
|
label: '用户名称',search:true,
|
},
|
nickName: {
|
label: '用户昵称'
|
},
|
email:{
|
label: '邮箱'
|
},
|
phonenumber:{
|
label: '手机',search:true,
|
},
|
status:{
|
label: '状态',
|
dicUrl: '/system/dict/data/type/sys_normal_disable',
|
},
|
createTime:{
|
label: '创建时间'
|
}
|
}
|
})
|
const inputTableRef = ref();
|
|
const openSelectUser = () => {
|
inputTableRef.value.handleShow();
|
}
|
const onUserLoad = ({ page, value, data }:any, callback:any) =>{
|
console.log(page,value,data)
|
if (value){
|
if (Array.isArray(value) && value.length === 0) {
|
proxy.$modal.msgError("请选择要分配的用户");
|
return;
|
}
|
authUserSelectAll({ roleId: roleId.value, userIds: value.join(",") }).then(res => {
|
proxy.$modal.msgSuccess(res.msg);
|
onLoad({currentPage:1,pageSize:10});
|
callback(value);
|
});
|
}
|
if (page){
|
unallocatedUserList({pageNum:page.currentPage,pageSize:page.pageSize,roleId:roleId.value,...data}).then(res => {
|
callback({
|
total: res.total || 0,
|
data:res.rows||[]
|
})
|
});
|
}
|
|
}
|
|
</script>
|
