ace-front-end 1.0.0

package/ace-app-manager-ui/src/views/appManage/reverseAuth/ReverseAuth.vue

@@ -0,0 +1,620 @@
+<template>
+    <app-manage-layout :body-scrollbar="false">
+        <template #title>
+            反向授权
+            <el-tooltip
+                content="根据角色查询或授予用户或组权限，可以将指定的一个角色授予多个用户或用户组"
+            >
+                <el-icon>
+                    <question-filled></question-filled>
+                </el-icon>
+            </el-tooltip>
+            <el-divider direction="vertical"/>
+            <select-realm-for-app v-model="realmId" style="width: 200px"
+                                  :app-id="props.appId"></select-realm-for-app>
+            <el-text>&nbsp;-&nbsp;</el-text>
+            <ja-role-category-selector :app-id="appId" v-model="selectedCategory"
+                                    style="width:200px"></ja-role-category-selector>
+        </template>
+        <template #body>
+            <div style="height: 100%; display: flex">
+                <div style=" border-right: solid 1px var(--el-border-color-light)">
+                    <div  style="padding: 12px; border-bottom: solid 1px var(--el-border-color-light)">
+                        <el-text type="info">
+                            <el-icon>
+                                <CaretBottom></CaretBottom>
+                            </el-icon>
+                            角色
+                        </el-text>
+                    </div>
+                    <el-scrollbar height="100%" v-loading="roleLoading">
+                        <el-tree
+                            ref="roleTree"
+                            style="width: 360px"
+                            :props="treeProps"
+                            :data="roles"
+                            highlight-current
+                            :current-node-key="currentRole?.id"
+                            node-key="id"
+                            @node-click="onRoleNodeClick">
+                            <template #default="{ node, data }">
+                                <div class="tree-node">
+                                    <span class="label">
+                                        {{ node.label }}</span>
+                                </div>
+                            </template>
+                        </el-tree>
+                    </el-scrollbar>
+                </div>
+                <div style="flex:1;overflow: hidden; padding: 8px 16px;">
+                    <el-tabs tab-position="top" v-model="activeTab"
+                             style="height: 100%;width:100%;">
+                        <el-tab-pane name="users" label="用户" style="height: 100%">
+                            <div class="users-box">
+                                <div class="tools">
+                                    <ja-button
+                                        type="danger"
+                                        :icon="Delete"
+                                        plain
+                                        :loading="loading"
+                                        @click="onDeleteUsersClick"
+                                        :disabled="loading"
+                                        tooltip="删除选中用户的当前角色"
+                                        shortcut="Alt+D"
+                                    >删除
+                                    </ja-button>
+                                    <ja-button
+                                        type="success"
+                                        :icon="Plus"
+                                        :loading="loading"
+                                        :disabled="loading"
+                                        tooltip="添加直接授予当前角色的用户"
+                                        shortcut="Alt+A"
+                                        @click="addUserDlgVisible = true"
+                                    >添加
+                                    </ja-button>
+                                    <el-input
+                                        style="width: 310px"
+                                        :suffix-icon="Search"
+                                        v-model="searchName"
+                                        v-focus
+                                        placeholder="根据拼音名、姓名、手机号或部门名称查询"
+                                        @input="debounceLoadUser"
+                                    ></el-input>
+                                    <el-text
+                                        style="flex: auto; margin-left: 8px"
+                                        type="info"
+                                        v-if="!!currentRole"
+                                    >
+                                        <el-icon>
+                                            <CaretBottom></CaretBottom>
+                                        </el-icon>
+                                        被直接授予角色"{{ currentRole?.name }}"的用户：
+                                    </el-text>
+                                </div>
+                                <el-auto-resizer style="width: 100%; flex: auto">
+                                    <template #default="{ height, width }">
+                                        <el-table-v2
+                                            ref="userTable"
+                                            :row-height="40"
+                                            :header-height="40"
+                                            :columns="columns"
+                                            :data="users"
+                                            :width="width"
+                                            :height="height"
+                                            v-loading="loading"
+                                            fixed
+                                        >
+                                        </el-table-v2>
+                                    </template>
+                                </el-auto-resizer>
+                            </div>
+                        </el-tab-pane>
+                        <el-tab-pane name="groups" label="用户组" style="height: 100%">
+                            <div class="users-box">
+                                <div class="tools">
+                                    <ja-button
+                                        type="success"
+                                        :icon="SaveOutlined"
+                                        @click="onSaveGroupsClick"
+                                        tooltip="保存用户授权变更"
+                                    >保存
+                                    </ja-button>
+                                    <el-text
+                                        style="flex: auto; margin-left: 8px"
+                                        type="info"
+                                        v-if="!!currentRole">
+                                        <el-icon>
+                                            <CaretBottom></CaretBottom>
+                                        </el-icon>
+                                        被直接授予角色"{{ currentRole?.name }}"的用户组：
+                                    </el-text>
+                                </div>
+                                <ja-user-group-tree
+                                    :realm-id="realmId"
+                                    :app-id="appId"
+                                    :category="selectedCategory"
+                                    multiple
+                                    check-on-click-node
+                                    ref="groupTree"
+                                    node-height="40px"
+                                    show-checkbox>
+                                </ja-user-group-tree>
+                            </div>
+                        </el-tab-pane>
+
+                        <el-tab-pane name="effective" style="height: 100%">
+                            <template #label>
+                                有效用户
+                                <el-tooltip
+                                    content="查询最终拥有选中角色的用户"
+                                    placement="bottom-end"
+                                >
+                                    <el-icon>
+                                        <question-filled></question-filled>
+                                    </el-icon>
+                                </el-tooltip>
+                            </template>
+                            <template #default>
+                                <el-auto-resizer style="width: 100%; flex: auto">
+                                    <template #default="{ height, width }">
+                                        <el-table-v2
+                                            ref="userTable"
+                                            :row-height="40"
+                                            :header-height="49"
+                                            :columns="effectUserColumns"
+                                            :data="effectUsers"
+                                            :width="width"
+                                            :height="height"
+                                            v-loading="loading"
+                                            fixed
+                                        >
+                                        </el-table-v2>
+                                    </template>
+                                </el-auto-resizer>
+                            </template>
+                        </el-tab-pane>
+                    </el-tabs>
+                </div>
+            </div>
+        </template>
+    </app-manage-layout>
+    <add-role-user-dialog
+        v-model="addUserDlgVisible"
+        @submit="loadUsers"
+        :role="currentRole"
+        :users="users"
+    ></add-role-user-dialog>
+</template>
+
+<script setup lang="ts">
+import {type FunctionalComponent, unref, h, ref, watch, onUnmounted} from "vue";
+import AppManageLayout from "@/views/appManage/components/AppManageLayout.vue";
+import {CaretBottom, Delete, Plus, QuestionFilled, Search} from "@element-plus/icons-vue";
+import SelectRealmForApp from "@/views/appManage/components/SelectRealmForApp.vue";
+import {
+    createAxiosWithoutCache,
+    useLoading,
+    type User,
+    type Group,
+    useRoleApi,
+    useUserApi,
+    useUserGroupApi,
+    FromUserSelect, type ProjectedRole,
+} from "@jari-ace/app-bolts";
+import {ElCheckbox, ElMessage, ElMessageBox, ElTableV2, ElText, type ElTree} from "element-plus";
+import type {Column} from "element-plus";
+import {JaUserInfoTag, JaUserGroupTree, JaButton, JaRoleCategorySelector} from "@jari-ace/element-plus-component";
+import AddRoleUserDialog from "@/views/appManage/reverseAuth/components/AddRoleUserDialog.vue";
+import {debounce} from "lodash-es";
+import {SaveOutlined} from "@ant-design/icons-vue";
+const roleTree = ref<InstanceType<typeof ElTree>>()
+const props = defineProps<{
+    appId: string;
+    menuType: string;
+}>();
+const realmId = ref<string>();
+
+const selectedCategory = ref<string>()
+const axios = createAxiosWithoutCache();
+const roleLoading = useLoading(axios);
+const roleApi = useRoleApi(axios);
+const treeProps = {
+    label: "caption",
+    children: "children",
+    isLeaf: (data: any)=> !data.hasChildren,
+    class: () => "role-tree-node",
+};
+const currentRole = ref<ProjectedRole>();
+const activeTab = ref("users");
+
+//#region 用户授权
+const userApi = useUserApi();
+const users = ref<User[]>([]);
+const loading = useLoading();
+const addUserDlgVisible = ref(false);
+const searchName = ref<string>();
+const roles = ref<ProjectedRole[]>([]);
+let isDraggingSelect = false;
+const columns: Column[] = [
+    {
+        key: "user",
+        dataKey: "id",
+        width: 290,
+        title: "用户",
+        cellRenderer: ({cellData: id, rowData: u}) => {
+            const {fullName} = u;
+            const user = u;
+            return h(
+                "div",
+                {
+                    style: {
+                        width: "100%",
+                        height: "100%",
+                        display: "flex",
+                        alignItems: "center",
+                        userSelect: "none",
+                    },
+                    onMousedown: () => {
+                        switchUserCheck(user);
+                        isDraggingSelect = true;
+                    },
+                    onMouseup: () => {
+                        isDraggingSelect = false;
+                    },
+                    onMouseenter: () => {
+                        if (isDraggingSelect) {
+                            switchUserCheck(user);
+                        }
+                    },
+                    onMouseover: (event: MouseEvent) => {
+                        isDraggingSelect = event.buttons > 0;
+                    },
+                },
+                [
+                    h(JaUserInfoTag, {
+                        userId: id,
+                        hasAvatar: false,
+                        fullName: fullName,
+                    }),
+                ],
+            );
+        },
+    },
+    {
+        key: "department",
+        dataKey: "department.name",
+        width: 300,
+        title: "部门",
+        cellRenderer: ({cellData: name, rowData: u}) => {
+            return h(
+                "div",
+                {
+                    style: {
+                        width: "100%",
+                        height: "100%",
+                        display: "flex",
+                        alignItems: "center",
+                        userSelect: "none",
+                    },
+                    onMousedown: () => {
+                        switchUserCheck(u);
+                        isDraggingSelect = true;
+                    },
+                    onMouseup: () => {
+                        isDraggingSelect = false;
+                    },
+                    onMouseenter: () => {
+                        if (isDraggingSelect) {
+                            switchUserCheck(u);
+                        }
+                    },
+                    onMouseover: (event: MouseEvent) => {
+                        isDraggingSelect = event.buttons > 0;
+                    },
+                },
+                name,
+            );
+        },
+    },
+];
+
+function onRoleNodeClick(data: ProjectedRole) {
+    currentRole.value = data;
+}
+
+async function loadRoles() {
+    roles.value  = await roleApi.getByCategoryWithChildren(props.appId, selectedCategory.value)
+    if (roles.value.length > 0) {
+        currentRole.value = roles.value[0];
+    } else {
+        currentRole.value = undefined;
+    }
+}
+
+async function onDeleteUsersClick() {
+    if (!currentRole.value) return;
+    const uids = users.value.filter((u) => u.checked).map((u) => u.id);
+    if (uids.length == 0) {
+        ElMessage.warning("请选择要取消角色授予的用户");
+        return;
+    }
+    await ElMessageBox.confirm("确定要取消选中用户的角色授予？", "确认删除");
+    await userApi.revokeRoleFromUsers({
+        id: currentRole.value.id,
+        users: uids,
+    });
+    loadUsers();
+}
+
+async function loadUsers() {
+    if (!currentRole.value || !realmId.value) {
+        users.value = [];
+        return;
+    }
+    if (!searchName.value || searchName.value.length === 0) {
+        users.value = await userApi.getByRole(currentRole.value.id, realmId.value);
+    } else {
+        users.value = await userApi.getByRole(
+            currentRole.value.id,
+            realmId.value,
+            searchName.value,
+        );
+    }
+}
+
+const debounceLoadUser = debounce(loadUsers, 1000);
+
+function switchUserCheck(data: User) {
+    data.checked = !data.checked;
+}
+
+loadUsers();
+//#endregion
+
+//#region 添加用户表checkbox列
+type SelectionCellProps = {
+    value: boolean;
+    intermediate?: boolean;
+    onChange: (value: boolean) => void;
+};
+
+const SelectionCell: FunctionalComponent<SelectionCellProps> = ({
+                                                                    value,
+                                                                    intermediate = false,
+                                                                    onChange,
+                                                                }) => {
+    return h(ElCheckbox, {
+        modelValue: value,
+        onChange: onChange as (val: boolean | string | number) => void,
+        intermediate: intermediate,
+    });
+};
+
+columns.unshift({
+    key: "selection",
+    width: 50,
+    cellRenderer: ({rowData}) => {
+        const onChange = (value: boolean) => (
+            rowData.checked = value
+        );
+        return h(SelectionCell, {
+            value: rowData.checked,
+            onChange: onChange,
+        });
+    },
+
+    headerCellRenderer: () => {
+        const _data = unref(users);
+        const onChange = (value: boolean) =>
+            (
+                users.value = _data.map((row: User) => {
+                    row.checked = value;
+                    return row;
+                })
+            );
+        const allSelected = _data.every((row) => row.checked);
+        const containsChecked = _data.some((row) => row.checked);
+
+        return h(SelectionCell, {
+            value: allSelected,
+            intermediate: containsChecked && !allSelected,
+            onChange: onChange,
+        });
+    },
+});
+//#endregion
+
+//#region 用户组授权
+const grantedGroups = ref<string[]>();
+const groupApi = useUserGroupApi();
+const groupTree = ref<InstanceType<typeof JaUserGroupTree>>();
+
+async function loadGrantedGroups() {
+    if (!currentRole.value || !realmId.value) {
+        grantedGroups.value = [];
+    } else {
+        grantedGroups.value = (
+            await groupApi.getByRole(currentRole.value.id, realmId.value)
+        ).map(
+            (r) => r.id,
+        );
+    }
+    groupTree.value?.elTree?.setCheckedKeys(grantedGroups.value, true);
+}
+
+async function onSaveGroupsClick() {
+    if (!grantedGroups.value || !currentRole.value) return;
+    const newKeys = groupTree.value?.elTree?.getCheckedKeys() as string[];
+    const addedKeys = newKeys.filter((k) => !grantedGroups.value?.some((e) => e === k));
+    const removedKeys = grantedGroups.value.filter((k) => !newKeys.some((e) => e === k));
+    if (addedKeys.length == 0 && removedKeys.length == 0) {
+        ElMessage.warning("授权组未修改");
+        return;
+    }
+    await groupApi.grantRoleToGroups(
+        {
+            id: currentRole.value.id,
+            groups: addedKeys,
+        },
+        {
+            showSuccessMessage: false,
+        },
+    );
+    await groupApi.revokeRoleFromGroups(
+        {
+            id: currentRole.value.id,
+            groups: removedKeys,
+        },
+        {
+            showSuccessMessage: false,
+        },
+    );
+    loadGrantedGroups();
+    ElMessage.success("保存成功");
+}
+
+//#endregion
+
+//#region 有效用户
+const effectUserColumns: Column[] = [
+    {
+        key: "user",
+        dataKey: "id",
+        width: 290,
+        title: "用户",
+        cellRenderer: ({cellData: id, rowData: u}) => {
+            const {fullName} = u;
+            return h(
+                "div",
+                {
+                    style: {
+                        width: "100%",
+                        height: "100%",
+                        display: "flex",
+                        alignItems: "center",
+                    },
+                },
+                [
+                    h(JaUserInfoTag, {
+                        userId: id,
+                        hasAvatar: false,
+                        fullName: fullName,
+                    }),
+                ],
+            );
+        },
+    },
+    {
+        key: "department",
+        dataKey: "department.name",
+        width: 300,
+        title: "部门",
+    },
+];
+
+const effectUsers = ref<User[]>([]);
+
+async function loadEffectUsers() {
+    if (!currentRole.value || !realmId.value) {
+        effectUsers.value = [];
+        return;
+    }
+    effectUsers.value = await userApi.getUserWhoHasMergedRole(
+        currentRole.value.id,
+        realmId.value,
+        FromUserSelect.BDB,
+    );
+}
+
+//#endregion
+
+function refreshView() {
+    if (activeTab.value === "users") {
+        loadUsers();
+    } else if (activeTab.value === "groups") {
+        loadGrantedGroups();
+    } else {
+        loadEffectUsers();
+    }
+}
+
+watch(activeTab, refreshView);
+
+watch(currentRole, refreshView);
+
+watch(realmId, refreshView);
+
+watch(() => props.appId, refreshView);
+
+watch(()=> ({
+    appId: props.appId,
+    category: selectedCategory
+}), () => {
+    loadRoles()
+}, {
+    immediate: true,
+    deep: true
+})
+
+onUnmounted(() => {
+    debounceLoadUser.cancel();
+});
+</script>
+
+<style scoped>
+:deep(.splitpanes__pane) {
+    background-color: #fff !important;
+}
+
+:deep(.role-tree-node) {
+    .el-tree-node__content {
+        height: 40px;
+    }
+
+    &.active {
+        background-color: var(--el-color-primary-light-9);
+    }
+}
+
+:deep(.users-box) {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    height: 100%;
+}
+
+.tools {
+    padding: 8px 0;
+    width: 100%;
+    display: flex;
+    flex-direction: row-reverse;
+    gap: 8px;
+    border-bottom: solid 1px var(--el-border-color-light);
+
+    .el-button {
+        margin: 0 !important;
+    }
+}
+
+.tree-node {
+    display: flex;
+    flex: 1;
+    gap: 36px;
+    overflow: hidden;
+    justify-content: space-between;
+    padding-right: 16px;
+
+    .name {
+
+    }
+
+    .label {
+        color: var(--el-text-color-regular);
+    }
+
+    .name {
+        color: var(--el-text-color-primary);
+    }
+}
+</style>

package/ace-app-manager-ui/src/views/appManage/reverseAuth/components/AddRoleUserDialog.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import {JaButton} from "@jari-ace/element-plus-component";
+import {
+    createAxiosWithoutCache,
+    useLoading, type User,
+    type UserReference, type ProjectedRole,
+    useUserApi
+} from "@jari-ace/app-bolts";
+import {JaUserPickerRaw} from "@jari-ace/element-plus-component";
+import {ref} from "vue";
+
+const props = defineProps<{
+    role?: ProjectedRole,
+    realmId?: string,
+    users?: User[]
+}>();
+const emits = defineEmits(["submit"]);
+const visible = defineModel<boolean>();
+const axios = createAxiosWithoutCache();
+const loading = useLoading(axios);
+const users = ref<UserReference[]>(props.users ?? []);
+const api = useUserApi(axios);
+
+async function submit() {
+    if (!props.role) return;
+    await api.grantRoleToUsers({
+        id: props.role.id,
+        users: users.value.map(u => u.id)
+    });
+    emits('submit');
+    visible.value = false;
+}
+
+function onOpen() {
+    users.value = props.users as UserReference[];
+}
+
+</script>
+
+<template>
+    <el-drawer v-model="visible" append-to-body destroy-on-close title="添加授权用户"
+               width="480" @open="onOpen">
+        <p>请选择选择要授予角色"{{ props.role?.name }}"的用户</p>
+        <div>
+            <ja-user-picker-raw :realm-id="props.realmId" multiple
+                                v-model="users"></ja-user-picker-raw>
+        </div>
+        <template #footer>
+            <ja-button size="default" type="primary" @click="submit" :loading="loading"
+                       :disabled="loading" shortcut="Alt+Enter">确定
+            </ja-button>
+            <el-button size="default" @click="visible = false">取消</el-button>
+        </template>
+    </el-drawer>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/ace-app-manager-ui/src/views/appManage/reverseAuth/types.d.ts

@@ -0,0 +1,7 @@
+import {type User} from "@jari-ace/app-bolts"
+
+declare module "@jari-ace/app-bolts" {
+    export interface User {
+        checked: boolean;
+    }
+}