ace-front-end 1.0.0

package/ace-app-manager-ui/src/views/appManage/userGroupManage/UserGroupManage.vue

@@ -0,0 +1,326 @@
+<template>
+    <div class="user-group-manage-page" v-loading="loading">
+        <AppManageLayout>
+            <template #title>
+                用户组管理
+                <el-tooltip>
+                    <el-icon>
+                        <question-filled />
+                    </el-icon>
+                    <template #content>
+                        定义和管理应用中的用户组。<br />
+                        用户组可以帮助简化管理员的授权操作，管理员可以为用户组授权，加入用户组的用户会自动获得用户组已有授权。
+                    </template>
+                </el-tooltip>
+                <el-divider direction="vertical"></el-divider>
+                <SelectRealmForApp v-model="state.realmId" :app-id="props.appId" style="width: 200px" />
+                <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 #toolbar>
+                <el-space>
+                    <ja-button type="success" size="default" :icon="Plus" tooltip="创建根用户组" shortcut="Alt+N"
+                        @click="createNode">
+                        新建
+                    </ja-button>
+                    <ja-button @click="onRefreshClicked" :icon="Refresh" plain tooltip="重新加载数据" shortcut="Alt+R">
+                        刷新
+                    </ja-button>
+                </el-space>
+            </template>
+            <template #body>
+                <div style="padding: 16px">
+                    <el-tree :data="userGroups" size="default" draggable :expand-on-click-node="false"
+                        default-expand-all class="user-group-tree" :allow-drag="allowDrag" @node-drop="nodeDrop"
+                        @node-drag-end="nodeDragEnd" :props="{
+                            class: () => 'custom-node-style',
+                        }">
+                        <template #default="{ node }">
+                            <div class="tree-node">
+                                <div class="draggable" @mousedown="dragElMousedown" title="拖拽排序">
+                                    <i class="ri-draggable"></i>
+                                </div>
+                                <div class="name">
+                                    {{ node.label }}
+                                    <el-tag v-if="node.data.resourceScoped" type="warning">资源域</el-tag>
+                                    <el-tag v-if="node.data.defaultGroup" type="info">缺省组</el-tag>
+                                </div>
+                                <div class="tools">
+                                    <el-button link type="success" :icon="CirclePlus" @click="createSubNode(node.data)">
+                                        新建下级组
+                                    </el-button>
+                                    <el-button link type="warning" :icon="Edit" @click="updateNode(node.data)">
+                                        编辑
+                                    </el-button>
+                                    <el-button link type="primary" :icon="IconUser"
+                                        @click="updateMemberUsers(node.data)">
+                                        成员用户
+                                    </el-button>
+                                    <el-button link type="danger" :icon="Delete" @click="deleteNode(node.data)">
+                                        删除
+                                    </el-button>
+                                </div>
+                            </div>
+                        </template>
+                        <template #empty>
+                            <el-empty></el-empty>
+                        </template>
+                    </el-tree>
+                </div>
+            </template>
+        </AppManageLayout>
+
+        <div class="user-group-manage-page__body"></div>
+        <Editor v-model="state.editorVisible" :category="selectedCategory" :type="state.editorType"
+            :realm-id="state.realmId" :data="state.editorData" :app-id="props.appId" @success="editSuccess" />
+        <MemberUsers v-model="state.memberUsersVisible" :realm-id="state.realmId" :data="state.editorData" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import AppManageLayout from "../components/AppManageLayout.vue";
+import {
+    CirclePlus,
+    Delete,
+    Edit,
+    Plus,
+    QuestionFilled, Refresh,
+    User as IconUser
+} from "@element-plus/icons-vue";
+import { reactive, ref, watch } from "vue";
+import {
+    type MoveGroupCommand,
+    type ProjectedGroup, useLoading,
+    useUserGroupApi,
+} from "@jari-ace/app-bolts";
+import Editor from "./components/Editor.vue";
+import type Node from "element-plus/es/components/tree/src/model/node";
+import type { NodeDropType } from "element-plus/es/components/tree/src/tree.type";
+import SelectRealmForApp from "../components/SelectRealmForApp.vue";
+import {
+    JaButton,
+    type TreeNodeType,
+    useGroups,
+    useTreeData, JaRoleCategorySelector
+} from "@jari-ace/element-plus-component";
+import MemberUsers from "@/views/appManage/userGroupManage/components/MemberUsers.vue";
+import { ElMessageBox } from "element-plus";
+import { debounce } from "lodash-es";
+
+const userGroupApi = useUserGroupApi();
+const userGroups = ref<TreeNodeType[]>([]);
+const { getGroups, refreshGroupsCache } = useGroups();
+const selectedCategory = ref<string>()
+const props = defineProps<{
+    appId: string;
+}>();
+const loading = useLoading();
+const state = reactive<{
+    editorVisible: boolean;
+    editorType: "create" | "update" | "subCreate";
+    editorData: ProjectedGroup | null;
+    allowDrag: boolean;
+    memberUsersVisible: boolean;
+    realmId: string;
+    currentGroupId: string;
+}>({
+    editorType: "create",
+    editorVisible: false,
+    editorData: null,
+    allowDrag: false,
+    memberUsersVisible: false,
+    realmId: '1',
+    currentGroupId: '0',
+});
+
+const createNode = () => {
+    state.editorType = "create";
+    state.editorVisible = true;
+};
+
+const createSubNode = (node: ProjectedGroup) => {
+    state.editorData = node;
+    state.editorType = "subCreate";
+    state.editorVisible = true;
+};
+
+const deleteNode = (node: ProjectedGroup) => {
+    ElMessageBox.confirm(`您确认要删除用户组【${node.name}】吗？`, "删除用户组", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning",
+    })
+        .then(() => {
+            userGroupApi.delete(node).then(() => {
+                refreshGroupsCache()
+                reloadData()
+            });
+        });
+};
+
+const editSuccess = () => {
+    reloadData()
+};
+
+const updateNode = (node: ProjectedGroup) => {
+    state.editorData = node;
+    state.editorType = "update";
+    state.editorVisible = true;
+};
+
+const allowDrag = () => {
+    return state.allowDrag;
+};
+
+/**
+ * 拖拽元素鼠标点击
+ */
+const dragElMousedown = () => {
+    state.allowDrag = true;
+};
+
+/**
+ * 节点拖拽完毕
+ * @param draggingNode
+ * @param dropNode
+ * @param dropType
+ * @param ev
+ */
+const nodeDrop = (draggingNode: Node, dropNode: Node, dropType: NodeDropType) => {
+    const params: MoveGroupCommand = {
+        id: draggingNode.data.id,
+        dataVersion: draggingNode.data.dataVersion,
+    };
+    ElMessageBox.confirm(`您确定要移动【${draggingNode.data.name}】吗？`, "移动用户组", {
+        cancelButtonText: "取消",
+        confirmButtonText: "确定",
+    })
+        .then(() => {
+            if (dropType === "inner") {
+                params.parentId = dropNode.data.id;
+            } else {
+                //判断 dropNode.parent 是否存在
+                if (dropNode.level > 1) {
+                    //判断父级
+                    params.parentId = dropNode.parent?.data.id;
+                }
+                if (dropType === "after") {
+                    params.sortIndex = dropNode.data.sortIndex + 1;
+                } else {
+                    params.sortIndex = dropNode.data.sortIndex;
+                }
+            }
+            userGroupApi
+                .move(params)
+                .finally(async () => {
+                    refreshGroupsCache()
+                    reloadData()
+                })
+
+        })
+        .catch(async () => {
+            reloadData()
+        });
+};
+
+async function reloadData() {
+    userGroups.value = useTreeData(await getGroups(props.appId, state.realmId, selectedCategory.value), "name");
+}
+
+function onRefreshClicked() {
+    refreshGroupsCache()
+    reloadData()
+}
+
+/**
+ * 节点拖拽结束 不论成功与否都会触发
+ */
+const nodeDragEnd = () => {
+    state.allowDrag = false;
+};
+
+const updateMemberUsers = async (data: ProjectedGroup) => {
+    state.editorData = data;
+    state.memberUsersVisible = true;
+};
+
+const debounceLoadData = debounce(reloadData, 100)
+
+/**
+ * props.appId  发生改变 会重新请求用户组数据
+ */
+watch(
+    () => (
+        {
+            appId: props.appId,
+            realmId: state.realmId,
+            category: selectedCategory
+        }
+    ),
+    debounceLoadData, {
+    deep: true,
+    immediate: true,
+}
+);
+</script>
+
+<style lang="scss" scoped>
+.user-group-manage-page {
+    height: 100%;
+
+    .realm-picker-box {
+        width: 360px;
+        display: flex;
+        align-items: center;
+        height: 100%;
+
+        .label {
+            color: var(--el-text-color-regular);
+            font-size: 14px;
+            white-space: nowrap;
+            margin-right: 8px;
+        }
+    }
+
+    :deep(.user-group-tree) {
+        .custom-node-style {
+            .el-tree-node__content {
+                height: 40px;
+            }
+        }
+    }
+
+    .tree-node {
+        width: 100%;
+        display: flex;
+        height: 24px;
+        padding-right: 16px;
+        align-items: center;
+
+        .draggable {
+            width: auto;
+            cursor: grab;
+            font-size: 20px;
+            line-height: 30px;
+            padding: 0 12px;
+            color: #9ea8b3;
+
+            &:hover {
+                color: #3062d4;
+            }
+        }
+
+        .name {
+            font-size: 14px;
+            color: #3a424a;
+            height: 100%;
+            flex: 1;
+        }
+
+        .tools {
+            height: 100%;
+        }
+    }
+}
+</style>

package/ace-app-manager-ui/src/views/appManage/userGroupManage/components/Editor.vue

@@ -0,0 +1,217 @@
+<template>
+    <el-drawer
+        :title="state.title"
+        v-model="visible"
+        destroy-on-close
+        @open="init">
+        <ja-form
+            ref="formRef"
+            :model="state"
+            :validator="validator">
+            <ja-form-item label="用户组名称" prop="name" v-focus required>
+                <ja-input/>
+            </ja-form-item>
+            <ja-form-item label="用户组标识" prop="groupKey" required>
+                <ja-input/>
+            </ja-form-item>
+            <ja-form-item label="业务分类" prop="category">
+                <ja-role-category-selector :app-id="appId" v-model="state.formData.category">
+                </ja-role-category-selector>
+            </ja-form-item>
+            <ja-form-item label="是否缺省组" prop="defaultGroup">
+                <ja-checkbox>
+                    创建用户后，新用户自动加入此用户组
+                </ja-checkbox>
+            </ja-form-item>
+            <ja-form-item label="资源域组" prop="resourceScoped">
+                <ja-checkbox>
+                    是否资源域用户组
+                </ja-checkbox>
+            </ja-form-item>
+        </ja-form>
+        <template #footer>
+            <ja-button size="default" type="primary" @click="submit" shortcut="Alt+Enter"
+                       :loading="loading" :disabled="loading">确定
+            </ja-button>
+            <el-button size="default" @click="visible = false">取消</el-button>
+        </template>
+    </el-drawer>
+</template>
+
+<script setup lang="ts">
+import {computed, reactive, ref} from 'vue';
+import {
+    type CreateGroupCommand,
+    type ProjectedGroup,
+    type UpdateGroupCommand, useLoading,
+    useUserGroupApi,
+} from '@jari-ace/app-bolts';
+import {
+    useBackendValidations,
+    JaForm,
+    JaFormItem,
+    JaButton,
+    JaInput,
+    JaCheckbox, useGroups, JaRoleCategorySelector
+} from '@jari-ace/element-plus-component';
+import type {FormInstance} from 'element-plus';
+type editorType = 'create' | 'update' | 'subCreate';
+
+type FormDataType = {
+    /**
+     * 组名
+     */
+    name: string;
+    /**
+     * 用户组标识
+     */
+    groupKey?: string;
+    /**
+     * 是否缺省组，新建用户将自动加入缺省组
+     */
+    defaultGroup: boolean;
+    /**
+     * 主键
+     */
+    id?: string;
+    /**
+     * 数据版本
+     */
+    dataVersion?: number;
+    /**
+     * 上级部门id
+     */
+    parentId?: string;
+
+    category?: string;
+    /**
+     * 序号，用于同级兄弟节点之间进行排序
+     */
+    sortIndex?: number;
+    appId?: string;
+    realmId?: string;
+    /**
+     * 是否属于资源域用户组
+     */
+    resourceScoped?: boolean;
+};
+
+type Props = {
+    modelValue: boolean;
+    type: editorType;
+    realmId: string;
+    appId: string;
+    category?: string;
+    data?: ProjectedGroup | null;
+};
+
+// const systemStore = useSystemStore();
+
+const formRef = ref<FormInstance>();
+const props = defineProps<Props>();
+const emits = defineEmits(['update:modelValue', 'success']);
+const formData: FormDataType = {
+    appId: '0',
+    dataVersion: 0,
+    defaultGroup: false,
+    resourceScoped: false,
+    id: '0',
+    name: "",
+    groupKey: "",
+    category: props.category,
+    parentId: '0',
+    realmId: '0',
+    sortIndex: 0
+};
+const validator = useBackendValidations(Object.keys(formData));
+const loading = useLoading(validator.axios);
+const userGroupApi = useUserGroupApi(validator.axios);
+const {refreshGroupsCache} = useGroups()
+const state = reactive<{
+    formData: FormDataType;
+    title: string;
+}>({
+    formData: {
+        ...formData
+    },
+    title: '',
+});
+
+const visible = computed({
+    get(): boolean {
+        return props.modelValue;
+    },
+    set(val: boolean) {
+        emits('update:modelValue', val);
+    },
+});
+
+const submit = () => {
+    //判断当前组件类型   type 为 update 更新模式，为 create 创建模式
+    if (props.type === 'update') {
+        formRef.value?.validate(() =>
+            userGroupApi
+                .update(state.formData as UpdateGroupCommand)
+                .then(() => {
+                    refreshGroupsCache()
+                    emits('success');
+                    visible.value = false;
+                }))
+    } else {
+        let tempFormData: CreateGroupCommand;
+        if (props.type === 'create') {
+            tempFormData = {
+                ...state.formData,
+                appId: props.appId,
+                realmId: props.realmId
+            };
+            //创建根节点不能有父级节点ID
+            delete tempFormData.parentId;
+        } else {
+            tempFormData = {
+                ...state.formData,
+                appId: props.appId,
+                realmId: props.realmId,
+                parentId: props.data?.id,
+            };
+        }
+        formRef.value?.validate(() =>
+            userGroupApi
+                .create(tempFormData)
+                .then(() => {
+                    refreshGroupsCache()
+                    emits('success');
+                    visible.value = false;
+                }))
+        refreshGroupsCache();
+    }
+};
+
+const init = () => {
+    //判断当前组件类型   type 为 update 更新模式，为 create 创建模式
+    if (props.type === 'update') {
+        if (props.data === null || props.data === undefined) {
+            throw new Error('未传入参数【data】');
+        }
+        //更新模式需要将数据回显
+        state.title = '修改用户组';
+        state.formData = {...props.data};
+    } else {
+        if (props.type === 'create') {
+            state.title = '创建用户组';
+        } else {
+            if (props.data === null || props.data === undefined) {
+                throw new Error('未传入参数【data】');
+            }
+            state.title = `创建【${props.data.name}】下级用户组`;
+        }
+        //创建模式重置表单
+        state.formData = {
+            ...formData,
+            category: props.category,
+        };
+    }
+};
+</script>
+
+<style scoped lang="scss"></style>

package/ace-app-manager-ui/src/views/appManage/userGroupManage/components/MemberUsers.vue

@@ -0,0 +1,101 @@
+<template>
+    <el-drawer :title="title" v-model="visible" @open="loadMembers" destroy-on-close append-to-body>
+
+        <div>
+            请选择要加入组中的用户：
+        </div>
+        <div class="users-box">
+            <ja-user-picker-raw :realm-id="props.realmId"
+                                multiple :max-show-count="40"
+                                v-model="state.selectedUsers"></ja-user-picker-raw>
+        </div>
+        <template #footer>
+            <ja-button type="primary" @click="submit" :loading="loading" :disabled="loading"
+                       shortcut="Alt+Enter">
+                确定
+            </ja-button>
+            <el-button @click="visible=false">取消</el-button>
+        </template>
+    </el-drawer>
+</template>
+
+<script setup lang="ts">
+import {computed, reactive} from "vue";
+import {
+    createAxiosWithoutCache,
+    FromUserSelect,
+    type ProjectedGroup, QUser,
+    useLoading,
+    type User, type UserReference,
+    useUserApi
+} from "@jari-ace/app-bolts";
+import {JaButton, JaUserPickerRaw} from "@jari-ace/element-plus-component";
+
+type Props = {
+    modelValue: boolean;
+    realmId: string;
+    data?: ProjectedGroup | null;
+};
+const axios = createAxiosWithoutCache();
+const loading = useLoading(axios);
+const userApi = useUserApi(axios);
+
+const props = defineProps<Props>();
+
+const emits = defineEmits(["update:modelValue", "success"]);
+
+const state = reactive<{
+    title: string;
+    selectedUsers: UserReference[]
+}>({
+    title: "",
+    selectedUsers: []
+});
+
+const visible = computed({
+    get(): boolean {
+        return props.modelValue;
+    },
+    set(val: boolean) {
+        emits("update:modelValue", val);
+    },
+});
+
+const title = computed(() => {
+    return `设置[${props.data?.name}]的成员用户`;
+});
+
+const submit = async () => {
+    if (!props.data) return;
+    await userApi.setGroupMembers(props.data?.id, state.selectedUsers.map(u => u.id), {
+        showSuccessMessage: true,
+        showApiErrorMessage: true
+    });
+    visible.value = false;
+};
+
+const loadMembers = () => {
+    state.selectedUsers = [];
+    if (!props.data) {
+        state.selectedUsers = []
+        return
+    }
+    userApi.getByGroups([props.data?.id ?? 0], FromUserSelect.BDB)
+           .then(users => {
+               state.selectedUsers = users;
+           })
+};
+
+</script>
+
+<style scoped lang="scss">
+.users-box {
+    margin-top: 4px;
+    height: 320px;
+    width: 100%;
+
+    :deep(.user-tag) {
+        margin: 0 6px 6px 0;
+    }
+}
+</style>