ace-front-end 1.0.0

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

@@ -0,0 +1,332 @@
+<template>
+    <div class="user-group-manage-page">
+        <ManageHeader>
+            <template #title>全局用户组</template>
+            <template #tools>
+                <div class="tools-box">
+                    <ja-button
+                        type="success"
+                        size="default"
+                        :icon="Plus"
+                        @click="createNode"
+                        tooltip="创建全局用户组"
+                        shortcut="Alt+N">
+                        新建
+                    </ja-button>
+                    <ja-button
+                        size="default"
+                        :icon="Refresh"
+                        :loading="loading"
+                        plain
+                        tooltip="重新加载数据"
+                        shortcut="Alt+R"
+                        @click="onRefreshClicked">
+                        刷新
+                    </ja-button>
+                </div>
+            </template>
+        </ManageHeader>
+
+        <el-scrollbar class="user-group-manage-page__body">
+            <el-tree
+                :data="userGroups"
+                draggable
+                class="user-group-tree"
+                :allow-drag="allowDrag"
+                default-expand-all
+                :show-checkbox="false"
+                :expand-on-click-node="false"
+                @node-drop="nodeDrop"
+                @node-drag-end="nodeDragEnd"
+                v-show="userGroups.length > 0"
+                v-loading="loading"
+                :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>
+            </el-tree>
+            <el-empty v-show="userGroups.length === 0"
+                      v-loading="loading"/>
+        </el-scrollbar>
+        <Editor
+            v-model="state.editorVisible"
+            :type="state.editorType"
+            :realm-id="props.realmId"
+            :data="state.editorData"
+            @success="editSuccess"/>
+        <MemberUsers v-model="state.memberUsersVisible" :realm-id="props.realmId"
+                     :data="state.editorData"/>
+    </div>
+</template>
+
+<script setup lang="ts">
+import MemberUsers from "@/views/globalManage/userGroupManage/components/MemberUsers.vue";
+import ManageHeader from "../../../components/header/ManageHeader.vue";
+import {CirclePlus, Delete, Edit, Plus, Refresh, User as IconUser} from "@element-plus/icons-vue";
+import {onUnmounted, ref, shallowReactive, watch} from "vue";
+import {
+    createAxios,
+    type MoveGroupCommand,
+    type ProjectedGroup,
+    useLoading,
+    useUserApi,
+    useUserGroupApi,
+} from "@jari-ace/app-bolts";
+import Editor from "./components/Editor.vue";
+import Node from "element-plus/es/components/tree/src/model/node";
+import type {NodeDropType} from "element-plus/es/components/tree/src/tree.type";
+import {
+    JaButton,
+    type TreeNodeType,
+    useGroups, useTreeData
+} from "@jari-ace/element-plus-component";
+import {ElMessageBox} from "element-plus";
+import {debounce} from "lodash-es";
+
+const axios = createAxios()
+const userGroupApi = useUserGroupApi(axios)
+const loading = useLoading(axios)
+const userGroups = ref<TreeNodeType[]>([]);
+const {getGlobalGroups, refreshGroupsCache} = useGroups()
+const props = defineProps<{
+    realmId: string
+}>();
+
+const state = shallowReactive<{
+    editorVisible: boolean
+    editorType: "create" | "update" | "subCreate"
+    editorData?: ProjectedGroup
+    allowDrag: boolean
+    memberUsersVisible: boolean
+    currentGroupId: string
+}>({
+    editorType: "create",
+    editorVisible: false,
+    allowDrag: false,
+    memberUsersVisible: false,
+    currentGroupId: '0'
+});
+
+const createNode = () => {
+    state.editorData = {
+        appName: "",
+        dataVersion: 0,
+        defaultGroup: false,
+        hasChildren: false,
+        id: '0',
+        name: "",
+        parentId: '0',
+        realmName: "",
+        sortIndex: 0,
+        sortPath: ""
+    }
+    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(async () => {
+        try {
+            await userGroupApi.delete(node)
+        } finally {
+            onRefreshClicked()
+        }
+    });
+};
+
+const editSuccess = () => {
+    loadData()
+    if (state.editorType == 'create') {
+        ElMessageBox.confirm("是否继续添加？").then(() => state.editorVisible = true);
+    }
+};
+
+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 = async (draggingNode: Node, dropNode: Node, dropType: NodeDropType) => {
+    const params: MoveGroupCommand = {
+        id: draggingNode.data.id,
+        dataVersion: draggingNode.data.dataVersion,
+    };
+
+    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;
+        }
+    }
+    try {
+        await userGroupApi.move(params)
+        refreshGroupsCache()
+    } finally {
+        loadData()
+    }
+};
+
+/**
+ * 节点拖拽结束 不论成功与否都会触发
+ */
+const nodeDragEnd = () => {
+    state.allowDrag = false;
+};
+
+const updateMemberUsers = async (data: ProjectedGroup) => {
+    state.editorData = data;
+    state.memberUsersVisible = true;
+};
+
+async function loadData() {
+    userGroups.value = useTreeData( await getGlobalGroups(props.realmId), "name")
+}
+
+function onRefreshClicked() {
+    refreshGroupsCache()
+    loadData()
+}
+
+const debounceLoad = debounce(loadData, 100)
+
+/**
+ * 监听 props.realmId 的变化
+ * 如果发生改变则重新请求
+ */
+watch(
+    () => props.realmId,
+    () => {
+        debounceLoad();
+    }, {
+        immediate: true,
+    }
+);
+</script>
+
+<style lang="scss" scoped>
+.user-group-manage-page {
+    height: 100%;
+
+    &__body {
+        height: calc(100% - 56px);
+        padding: 8px 12px;
+
+        :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/globalManage/userGroupManage/components/Editor.vue

@@ -0,0 +1,160 @@
+<template>
+    <el-drawer width="30%"
+               :title="state.title"
+               v-model="visible"
+               @opened="init"
+               @close="onClosing"
+               :destroy-on-close="true">
+        <ja-form
+            ref="formRef"
+            :model="state"
+            @submit.prevent
+            :validator="validator">
+            <ja-form-item label="用户组名称" prop="name" required>
+                <ja-input v-focus/>
+            </ja-form-item>
+            <ja-form-item label="用户组标识" prop="groupKey" required>
+                <ja-input/>
+            </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" :loading="loading"
+                       :disabled="loading"
+                       shortcut="Alt+Enter">确定
+            </ja-button>
+            <ElButton size="default" @click="visible = false">取消</ElButton>
+        </template>
+    </el-drawer>
+</template>
+
+<script setup lang="ts">
+import {computed, reactive, ref} from 'vue';
+import {
+    useUserGroupApi,
+    type UserGroupApiType,
+    type CreateGroupCommand,
+    type UpdateGroupCommand, type ProjectedGroup, useLoading, type AceAxiosRequestConfig
+} from '@jari-ace/app-bolts';
+import {useBackendValidations, useGroups} from '@jari-ace/element-plus-component';
+import useSystemStore from '@/stores/modules/system';
+import {JaForm, JaFormItem, JaInput, JaCheckbox, JaButton} from "@jari-ace/element-plus-component";
+
+type editorType = 'create' | 'update' | 'subCreate';
+
+type Props = {
+    modelValue: boolean;
+    type: editorType;
+    realmId: string;
+    data?: ProjectedGroup;
+};
+
+const systemStore = useSystemStore();
+const formRef = ref<typeof JaForm>();
+const props = defineProps<Props>();
+const emits = defineEmits(['update:modelValue', 'success']);
+const initData = {
+    appId: '0',
+    defaultGroup: false,
+    name: "",
+    groupKey: "",
+    resourceScoped: false,
+    realmId: '0'
+} as CreateGroupCommand;
+
+const validator = useBackendValidations(Object.keys(initData))
+const userGroupApi: UserGroupApiType = useUserGroupApi(validator.axios)
+const loading = useLoading(validator.axios)
+const {refreshGroupsCache} = useGroups()
+const state = reactive<{
+    formData: CreateGroupCommand | UpdateGroupCommand;
+    title: string;
+}>({
+    formData: {...initData},
+    title: '',
+});
+let requestConfig: AceAxiosRequestConfig
+const visible = computed({
+    get(): boolean {
+        return props.modelValue
+    },
+    set(val: boolean) {
+        emits('update:modelValue', val)
+    },
+});
+const submit = () => {
+    requestConfig = {}
+    //判断当前组件类型   type 为 update 更新模式，为 create 创建模式
+    if (props.type === 'update') {
+        const formData = state.formData as UpdateGroupCommand
+        formData.parentId = undefined;
+        formRef.value?.validate(() => userGroupApi
+            .update(formData, requestConfig)
+            .then(() => {
+                refreshGroupsCache()
+                emits('success')
+                visible.value = false
+            }))
+    } else {
+        if (systemStore.globalApp === null) throw new Error('无法获取到全局应用');
+        const tempFormData = {
+            ...state.formData,
+            appId: systemStore.globalApp.id as string,
+            realmId: props.realmId
+        } as CreateGroupCommand
+        if (props.type === 'subCreate') {
+            tempFormData.parentId = props.data?.id
+        }
+        formRef.value?.validate(() => userGroupApi
+            .create(tempFormData, requestConfig)
+            .then(() => {
+                refreshGroupsCache()
+                emits('success')
+                visible.value = false
+            }))
+    }
+}
+
+const init = () => {
+    //判断当前组件类型   type 为 update 更新模式，为 create 创建模式
+    if (props.type === 'update') {
+        if (!props.data) {
+            throw new Error('未传入参数【data】');
+        }
+        //更新模式需要将数据回显
+        state.title = '修改用户组';
+        state.formData = {
+            appId: systemStore.globalApp?.id as string,
+            realmId: props.realmId,
+            ...props.data
+        }
+    } else {
+        if (props.type === 'create') {
+            state.title = '创建用户组';
+        } else {
+            if (!props.data) {
+                throw new Error('未传入参数【data】');
+            }
+            state.title = `创建[${props.data.name}]下级用户组`;
+        }
+        state.formData = {
+            ...initData
+        }
+    }
+};
+
+function onClosing() {
+    validator.axios.cancel(requestConfig)
+}
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,100 @@
+<template>
+    <el-dialog width="480px" :title="title" v-model="visible" @open="loadMembers" draggable
+               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">
+                确定
+            </ja-button>
+            <el-button @click="visible=false">取消</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import {computed, reactive} from "vue";
+import {
+    createAxiosWithoutCache,
+    FromUserSelect,
+    type ProjectedGroup,
+    useLoading, 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 = () => {
+    if (!props.data) {
+        state.selectedUsers = []
+        return
+    }
+    state.selectedUsers = [];
+    userApi.getByGroups([props.data?.id ?? 0], FromUserSelect.R)
+           .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>