Archived
forked from admin/userbase
110 lines
3.1 KiB
Vue
110 lines
3.1 KiB
Vue
<template>
|
|
<div class="role-user-manage">
|
|
<div class="rum-toolbar">
|
|
<span class="rum-count">共 {{ userList.length }} 位用户</span>
|
|
<Button type="primary" icon="md-person-add" :disabled="!roleId" @click="openBind">添加用户</Button>
|
|
</div>
|
|
|
|
<Table :columns="columns" :data="userList" :loading="loading" size="small" border></Table>
|
|
|
|
<RoleUserBindModal v-model:visible="bindVisible" :role-id="roleId" :existing-user-ids="existingIds"
|
|
@success="onBindSuccess" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, computed, watch } from "vue";
|
|
import { Message } from "view-ui-plus";
|
|
import Apis from "@/api";
|
|
import useCurrentInstance from "@/utils/hook/useCurrentInstance";
|
|
import MyConfirm from "@/components/MyConfirm";
|
|
import RoleUserBindModal from "./RoleUserBindModal.vue";
|
|
|
|
const { $utils } = useCurrentInstance();
|
|
|
|
const props = defineProps<{
|
|
roleId: number;
|
|
roleName?: string;
|
|
}>();
|
|
|
|
const userList = ref<any[]>([]);
|
|
const loading = ref(false);
|
|
const bindVisible = ref(false);
|
|
|
|
// 当前角色已绑定的用户 id 集合（传给弹窗做去重/禁用）
|
|
const existingIds = computed(() => userList.value.map((u: any) => u.id));
|
|
|
|
const columns = [
|
|
{ title: "账号", key: "account", minWidth: 140 },
|
|
{ title: "姓名", key: "realName", minWidth: 110 },
|
|
{
|
|
title: "操作", key: "action", width: 90, align: "center",
|
|
render: (h: any, { row }: any) => $utils.operatingTextHandle(h, "删除", "text-error", () => removeUser(row)),
|
|
},
|
|
];
|
|
|
|
async function loadUsers() {
|
|
if (!props.roleId) {
|
|
userList.value = [];
|
|
return;
|
|
}
|
|
loading.value = true;
|
|
try {
|
|
const res = await Apis.AppRole.roleUsers({ params: { roleId: props.roleId }, cacheFor: null });
|
|
userList.value = (res as any[]) ?? [];
|
|
} catch (e: any) {
|
|
Message.error(e?.message || "加载角色用户失败");
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
function removeUser(row: any) {
|
|
MyConfirm({
|
|
title: "移除用户",
|
|
msg: `确定将用户【${row.realName || row.account}】从此角色移除？`,
|
|
info: "移除后该用户不再拥有此角色所授权的权限。",
|
|
async onOk() {
|
|
try {
|
|
await Apis.AppRole.removeRoleUser(
|
|
{ params: { roleId: props.roleId, userId: row.id }, cacheFor: null }
|
|
);
|
|
Message.success("已移除");
|
|
await loadUsers();
|
|
} catch (e: any) {
|
|
Message.error(e?.message || "移除失败");
|
|
}
|
|
},
|
|
});
|
|
}
|
|
|
|
function openBind() {
|
|
bindVisible.value = true;
|
|
}
|
|
|
|
function onBindSuccess() {
|
|
bindVisible.value = false;
|
|
loadUsers();
|
|
}
|
|
|
|
watch(() => props.roleId, () => loadUsers(), { immediate: true });
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.role-user-manage {
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.rum-toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.rum-count {
|
|
color: #888;
|
|
font-size: 13px;
|
|
}
|
|
</style>
|