init: UserBaseFront (frontend)

2026-08-10 14:41:13 +08:00
commit eea881b616
174 changed files with 32833 additions and 0 deletions
@@ -0,0 +1,109 @@
+<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>