ace-front-end 1.0.0

package/ace-app-manager-ui/src/views/globalManage/departmentManage/DepartmentManage.vue

@@ -0,0 +1,336 @@
+<template>
+    <div class="department-manage-page">
+        <manage-header>
+            <template #title>部门管理</template>
+            <template #tools>
+                <el-space>
+                    <ja-button type="success"
+                               :icon="Plus"
+                               @click="createNode"
+                               tooltip="创建新部门"
+                               shortcut="Alt+N">新建
+                    </ja-button>
+                    <ja-button
+                        :icon="Refresh"
+                        plain
+                        @click="getList"
+                        :loading="loading"
+                        tooltip="重新加载数据"
+                        shortcut="Alt+R">刷新
+                    </ja-button>
+                    <ja-button @click="gotoRecycleBin" shortcut="Alt+B">
+                        回收站
+                        <el-icon>
+                            <ArrowRight/>
+                        </el-icon>
+                    </ja-button>
+                </el-space>
+            </template>
+        </manage-header>
+        <el-scrollbar class="department-manage-page__body">
+            <el-tree
+                v-show="state.department.length > 0"
+                :data="state.department"
+                size="default"
+                draggable
+                v-loading="loading"
+                :default-expand-all="true"
+                class="user-group-tree"
+                :allow-drag="allowDrag"
+                @node-drop="nodeDrop"
+                @node-drag-end="nodeDragEnd"
+                :expand-on-click-node="false"
+                :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 }}</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="Link"
+                                       @click="onEditDefaultGroupClick(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="state.department.length === 0" v-loading="loading"/>
+        </el-scrollbar>
+        <Editor
+            v-model="state.editorVisible"
+            :type="state.editorType"
+            :realm-id="props.realmId"
+            :data="state.editorData"
+            @success="editSuccess"
+        />
+        <default-group-editor :realm-id="props.realmId" v-model="defaultGroupEditorVisible"
+                              :department="state.editorData"></default-group-editor>
+    </div>
+</template>
+
+<script setup lang="ts">
+import ManageHeader from "../../../components/header/ManageHeader.vue";
+import {Plus, CirclePlus, Link, Delete, Edit, ArrowRight, Refresh} from "@element-plus/icons-vue";
+import {onUnmounted, shallowReactive, watch, ref} from "vue";
+import {
+    type ProjectedDepartment,
+    type MoveDepartmentCommand,
+    useDepartmentApi,
+    FromDeptSelect, createAxios, type AceAxiosRequestConfig
+} from "@jari-ace/app-bolts";
+import Editor from "./components/Editor.vue";
+import {useTreeData, type TreeNodeType, JaButton} from "@jari-ace/element-plus-component";
+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 {useRouter} from "vue-router";
+import {useLoading} from "@jari-ace/app-bolts";
+import DefaultGroupEditor
+    from "@/views/globalManage/departmentManage/components/DefaultGroupEditor.vue";
+import {ElMessageBox} from "element-plus";
+
+const router = useRouter();
+const axios = createAxios()
+const loading = useLoading(axios);
+const defaultGroupEditorVisible = ref(false);
+const departmentApi = useDepartmentApi();
+const props = defineProps<{
+    realmId: string;
+}>();
+
+const state = shallowReactive<{
+    department: TreeNodeType[];
+    editorVisible: boolean;
+    editorType: "create" | "update" | "subCreate";
+    editorData: ProjectedDepartment | null;
+    allowDrag: boolean;
+}>({
+    editorType: "create",
+    editorVisible: false,
+    department: [],
+    editorData: null,
+    allowDrag: false,
+});
+
+const createNode = () => {
+    state.editorType = "create";
+    state.editorVisible = true;
+};
+let requestConfig: AceAxiosRequestConfig
+const getList = () => {
+    departmentApi
+        .getNormal(props.realmId, FromDeptSelect.BAT, requestConfig)
+        .then((res) => {
+            state.department = useTreeData<ProjectedDepartment>(res, "name");
+        });
+};
+
+onUnmounted(() => {
+    axios.cancel(requestConfig)
+})
+
+const createSubNode = (node: ProjectedDepartment) => {
+    state.editorData = node;
+    state.editorType = "subCreate";
+    state.editorVisible = true;
+};
+
+const deleteNode = async (node: ProjectedDepartment) => {
+    ElMessageBox.confirm(`您确认要将部门【${node.name}】放入回收站吗？`, "删除部门", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning",
+    }).then(async () => {
+        try {
+            await departmentApi.recycle({
+                id: node.id,
+                dataVersion: node.dataVersion,
+            })
+        } finally {
+            getList();
+        }
+    })
+};
+
+const editSuccess = () => {
+    getList();
+    if (state.editorType == 'create' || state.editorType == 'subCreate') {
+        ElMessageBox.confirm("是否继续添加？").then(() => state.editorVisible = true);
+    }
+};
+
+const updateNode = (node: ProjectedDepartment) => {
+    state.editorData = node;
+    state.editorType = "update";
+    state.editorVisible = true;
+};
+
+const allowDrag = () => {
+    return state.allowDrag;
+};
+
+/**
+ * 拖拽元素鼠标点击
+ */
+const dragElMousedown = () => {
+    state.allowDrag = true;
+};
+
+function onEditDefaultGroupClick(node: ProjectedDepartment) {
+    state.editorData = node;
+    defaultGroupEditorVisible.value = true;
+}
+
+/**
+ * 节点拖拽完毕
+ * @param draggingNode
+ * @param dropNode
+ * @param dropType
+ * @param ev
+ */
+const nodeDrop = async (draggingNode: Node, dropNode: Node, dropType: NodeDropType) => {
+    const params: MoveDepartmentCommand = {
+        id: draggingNode.data.id,
+        dataVersion: draggingNode.data.dataVersion,
+    };
+    /**
+     * 2.判断节点拖拽类型 dropType 是inner
+     *      parentId 为dropNode.data.id
+     *      sortIndex 为 undefined
+     * 1.如果 dropType 为 'before' | 'after'
+     *      参数parentId 为 dropNode.parent.data.id
+     *          如果 dropNode.parent为null 则 参数parentId设为undefined
+     *      sortIndex
+     *          如果是 before 则设为  dropNode.data.sortIndex
+     *          如果是 after 则设为  dropNode.data.sortIndex + 1
+     */
+
+    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 departmentApi.move(params)
+    } finally {
+        getList()
+    }
+};
+
+/**
+ * 节点拖拽结束 不论成功与否都会触发
+ */
+const nodeDragEnd = () => {
+    state.allowDrag = false;
+};
+
+const gotoRecycleBin = () => {
+    router.push({
+        name: "globalDepartmentRecycleBin",
+        params: {
+            realmId: props.realmId,
+        },
+    });
+};
+
+getList();
+
+/**
+ * 监听 porps.realmId 的变化
+ * 如果发生改变则重新请求列表
+ */
+watch(
+    () => props.realmId,
+    () => {
+        getList();
+    }
+);
+</script>
+
+<style lang="scss" scoped>
+.department-manage-page {
+    height: 100%;
+    position: relative;
+
+    &__body {
+        height: calc(100% - 56px);
+        position: relative;
+        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/departmentManage/RecycleBin.vue

@@ -0,0 +1,127 @@
+<template>
+    <SubPage
+        title="部门回收站"
+        v-loading="loading"
+        :route="{
+            name: 'globalDepartmentManage',
+            params: {
+                realmId: props.realmId,
+            },
+        }"
+        :body-style="{ padding: 0 }">
+        <!-- <template #tools>
+            <ElButton  size="default" plain type="success">恢复</ElButton>
+        </template> -->
+        <el-table ref="tableRef"
+                  :data="state.department"
+                  stripe
+                  v-show="state.department.length > 0">
+            <!-- <el-table-column type="selection" width="55" /> -->
+            <el-table-column prop="name" label="部门名称"/>
+            <el-table-column label="操作" width="200px">
+                <template #default="scope">
+                    <el-button
+                        :icon="RefreshRight"
+                        link
+                        type="success"
+                        @click="recoverNode(scope.row)"
+                    >恢复
+                    </el-button
+                    >
+                    <el-button link type="danger" :icon="Delete" @click="deleteNode(scope.row)"
+                    >彻底删除
+                    </el-button
+                    >
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-empty v-show="state.department.length === 0"></el-empty>
+    </SubPage>
+</template>
+
+<script setup lang="ts">
+// <el-icon><RefreshRight /></el-icon>
+import {RefreshRight, Delete} from "@element-plus/icons-vue";
+import {SubPage} from "@/components/subPage";
+import {reactive} from "vue";
+import {
+    type ProjectedDepartment,
+    useDepartmentApi,
+    FromDeptSelect, useLoading,
+} from "@jari-ace/app-bolts";
+import {ElMessageBox} from "element-plus";
+
+const props = defineProps<{
+    realmId: string;
+}>();
+const departmentApi = useDepartmentApi();
+const loading = useLoading();
+const state = reactive<{
+    department: ProjectedDepartment[];
+    checkedDepartment: ProjectedDepartment[];
+}>({
+    department: [],
+    checkedDepartment: [],
+});
+const getList = () => {
+    departmentApi
+        .getRecycled(props.realmId, FromDeptSelect.BT)
+        .then((res) => {
+            state.department = res;
+        });
+};
+const deleteNode = (node: ProjectedDepartment) => {
+    ElMessageBox.confirm(`您确认要删除部门【${node.name}】吗？`, "删除部门", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning",
+    })
+                .then(() => {
+                    departmentApi.delete(node.id).then(() => {
+                        getList();
+                    });
+                });
+};
+const recoverNode = (node: ProjectedDepartment) => {
+    ElMessageBox.confirm(`您确认要恢复部门【${node.name}】吗？`, "恢复部门", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning",
+    })
+                .then(() => {
+                    departmentApi.recover(node).then(() => {
+                        getList();
+                    });
+                });
+};
+getList();
+</script>
+
+<style scoped lang="scss">
+:deep(.department-tree) {
+    .custom-node-style {
+        .el-tree-node__content {
+            height: 48px;
+        }
+    }
+}
+
+.tree-node {
+    width: 100%;
+    display: flex;
+    height: 24px;
+    padding-right: 16px;
+    align-items: center;
+
+    .name {
+        font-size: 14px;
+        color: #3a424a;
+        height: 100%;
+        flex: 1;
+    }
+
+    .tools {
+        height: 100%;
+    }
+}
+</style>

package/ace-app-manager-ui/src/views/globalManage/departmentManage/components/DefaultGroupEditor.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+
+import {JaButton, JaUserGroupPicker} from "@jari-ace/element-plus-component";
+import {ref, watch} from "vue";
+import {
+    type AppInstance,
+    createAxiosWithoutCache, type Group, type ProjectedDepartment,
+    type ProjectedGroup, useAppApi,
+    useDepartmentApi,
+    useLoading
+} from "@jari-ace/app-bolts";
+import {Minus, Plus, QuestionFilled} from "@element-plus/icons-vue";
+import {ElMessage} from "element-plus";
+
+const props = defineProps<{
+    department: ProjectedDepartment | null;
+    realmId: string;
+}>();
+const visible = defineModel<boolean>();
+const axios = createAxiosWithoutCache()
+const loading = useLoading(axios);
+const api = useDepartmentApi(axios);
+const appApi = useAppApi(axios);
+const groups = ref<ProjectedGroup[]>();
+const apps = ref<AppInstance[]>();
+const currentApp = ref<AppInstance>();
+//这里应该是vue或typescript的bug，string[] | string | unknown类型定义被编译成了 string | string[] & string | undefined
+const selectedGroups = ref<string[] & string>([] as unknown as string[] & string);
+let dataVersion = props.department?.dataVersion ?? 0;
+const emits = defineEmits(['change'])
+let selectedDefaultGroups: ProjectedGroup[] = [];
+
+async function loadGroups() {
+    if (!props.department?.id) return;
+    const dept = await api.getById(props.department.id);
+    groups.value = dept.groups;
+}
+
+async function loadApps() {
+    const [accessibles, global] = await Promise.all([
+        appApi.getManageable(),
+        appApi.getGlobalApp()
+    ])
+    apps.value = accessibles;
+    apps.value.unshift(global);
+    if (apps.value && apps.value.length > 0) {
+        currentApp.value = apps.value[0]
+    }
+}
+
+loadApps();
+
+watch(() => props.department, () => {
+    loadGroups();
+    dataVersion = props.department?.dataVersion ?? 0;
+});
+
+async function onAddClick() {
+    if (!props.department) return;
+    if (!selectedGroups.value || selectedGroups.value.length === 0) {
+        ElMessage.warning("请选择要添加的缺省组")
+        return;
+    }
+    const g = (
+        await api.addGroups({
+            id: props.department.id,
+            dataVersion: dataVersion,
+            groups: selectedGroups.value
+        })
+    );
+    selectedGroups.value = [] as unknown as string[] & string;
+    dataVersion = g.dataVersion;
+    groups.value = g.groups;
+    emits('change');
+}
+
+async function onDeleteClick(g: ProjectedGroup | ProjectedGroup[]) {
+    if (!props.department) return;
+    if (!g || (
+        Array.isArray(g) && g.length == 0
+    )) {
+        ElMessage.warning("请选择要删除的缺省组")
+        return;
+    }
+    const gx = await api.delGroups({
+        id: props.department?.id,
+        dataVersion: dataVersion,
+        groups: Array.isArray(g) ? g.map(x => x.id) : [g.id]
+    });
+    dataVersion = gx.dataVersion;
+    groups.value = gx.groups;
+    emits('change');
+}
+
+function onGroupSelectionsChanged(val: ProjectedGroup[]) {
+    selectedDefaultGroups = [...val];
+}
+</script>
+
+<template>
+    <el-drawer destroy-on-close
+               append-to-body
+               title="设置缺省组" v-model="visible">
+        <div class="ja-default-group-dlg__root">
+            <div>
+                <el-text>请选择要添加到{{ props.department?.name }}的缺省用户组
+                    <el-tooltip
+                        content="设置缺省组后，用户加入部门时会自动加入缺省组，离开部门时也会自动脱离缺省组">
+                        <el-icon>
+                            <question-filled></question-filled>
+                        </el-icon>
+                    </el-tooltip>
+                </el-text>
+            </div>
+            <div class="left-pane">
+                <div style="flex: 2 1;">
+                    <el-select size="small" value-key="id" v-model="currentApp"
+                               default-first-option>
+                        <el-option v-for="app in apps" :value="app"
+                                   :label="app.caption"></el-option>
+                    </el-select>
+                </div>
+                <div style="flex: 5 1;">
+                    <ja-user-group-picker :realm-id="props.realmId" :app-id="currentApp?.id"
+                                          :multiple="true" v-model="selectedGroups"
+                                          size="small"></ja-user-group-picker>
+                </div>
+                <div class="tools">
+                    <ja-button circle :icon="Plus" size="small" @click="onAddClick"
+                               tooltip="添加为缺省组"
+                               :loading="loading"></ja-button>
+                    <ja-button circle :icon="Minus" size="small" :loading="loading"
+                               tooltip="删除下方表格中选中的缺省组"
+                               @click="onDeleteClick(selectedDefaultGroups)"></ja-button>
+                </div>
+            </div>
+            <div class="right-pane">
+                <el-table :data="groups" width="100%" height="100%" size="small"
+                          @selection-change="onGroupSelectionsChanged">
+                    <el-table-column type="selection" width="55"/>
+                    <el-table-column property="name" label="缺省用户组"/>
+                    <el-table-column fixed="right" label="操作" width="120">
+                        <template #default="group">
+                            <el-button link type="primary" size="small"
+                                       @click="onDeleteClick(group.row)">删除
+                            </el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </div>
+        <template #footer>
+            <el-button size="default" @click="visible = false" :loading="loading">确定</el-button>
+        </template>
+
+    </el-drawer>
+</template>
+
+<style scoped lang="scss">
+.ja-default-group-dlg__root {
+    display: flex;
+    gap: 8px;
+    align-items: stretch;
+    height: 100%;
+    flex-direction: column;
+    justify-content: center;
+
+    .left-pane {
+        flex: none;
+        display: flex;
+        gap: 4px;
+
+        .tools {
+            flex: none;
+            display: flex;
+            gap: 4px;
+            justify-content: center;
+            align-items: center;
+
+            :deep(.el-button) {
+                margin: 0 !important;
+            }
+        }
+    }
+
+    .right-pane {
+        flex: auto;
+        height: 100%;
+    }
+}
+</style>