ace-front-end 1.0.0

package/ace-element-plus-component/packages/components/userGroupPicker/index.ts

@@ -0,0 +1,4 @@
+import UserGroupPicker from "./src/UserGroupPicker.vue";
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+
+export const JaUserGroupPicker: SFCWithInstall<typeof UserGroupPicker> = withInstall(UserGroupPicker);

package/ace-element-plus-component/packages/components/userGroupPicker/src/UserGroupPicker.vue

@@ -0,0 +1,94 @@
+<template>
+    <el-tree-select
+        style="width: 100%"
+        :data="state.groups"
+        :size="props.size"
+        node-key="id"
+        check-strictly
+        :current-node-key="id"
+        highlight-current
+        v-model="id"
+        :multiple="multiple"
+        @change="currentChange"
+        v-bind="$attrs"
+        collapse-tags
+        collapse-tags-tooltip
+        tag-type="info"
+        teleported
+    />
+</template>
+
+<script setup lang="ts">
+import {reactive} from "vue";
+import {
+    useUserGroupApi,
+    createAxiosWithoutCache, type ProjectedGroup,
+} from "@jari-ace/app-bolts";
+import {ElTreeSelect} from "element-plus";
+import {watch} from "vue";
+import {type TreeNodeType, useTreeData} from "../../../hooks/useTreeData";
+
+const axios = createAxiosWithoutCache();
+const api = useUserGroupApi(axios);
+
+const props = withDefaults(
+    defineProps<{
+        realmId?: string;
+        appId?: string;
+        modelValue?: string | null;
+        size?: "default" | "small";
+        multiple: boolean;
+    }>(),
+    {
+        size: "default",
+        multiple: false
+    }
+);
+
+const id = defineModel<string | string[] | undefined>();
+
+const emits = defineEmits(["change"]);
+if (props.multiple && !Array.isArray(id.value)) {
+    throw new Error("用户组选择器设置multiple为true，但是绑定的v-model值是单值");
+} else if (!props.multiple && Array.isArray(id.value)) {
+    throw new Error("用户组选择器未设置multiple为true，但是绑定的v-model值是数组");
+}
+
+const state = reactive<{
+    groups: TreeNodeType[];
+}>({
+    groups: []
+});
+
+const getList = () => {
+    if (!props.realmId || !props.appId) return;
+    api
+        .getByAppIdAndRealm(props.appId, props.realmId ?? "0")
+        .then((res) => {
+            state.groups = [...useTreeData<ProjectedGroup>(res, "name")];
+            //判断id  如果为null  undefined或者小于1
+            if (!id.value && !props.multiple) {
+                id.value = state.groups[0].id;
+            }
+        })
+};
+
+const currentChange = (data: string | string[]) => {
+    emits("change", Array.isArray(data)
+        ? state.groups.filter(d => data.findIndex(x => d.id === x) >= 0)
+        : state.groups.find(d => d.id === data));
+};
+
+getList();
+
+watch(
+    () => props.realmId,
+    () => {
+        getList();
+    }
+);
+
+watch(() => props.appId, getList)
+</script>
+
+<style lang="scss" scoped></style>

package/ace-element-plus-component/packages/components/userGroupTree/index.ts

@@ -0,0 +1,10 @@
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import UserGroupTree from "./src/userGroupTree.vue";
+
+
+/**
+ * 可单选的部门树组件
+ */
+export const JaUserGroupTree: SFCWithInstall<typeof UserGroupTree> = withInstall(UserGroupTree);
+
+

package/ace-element-plus-component/packages/components/userGroupTree/src/userGroupTree.vue

@@ -0,0 +1,193 @@
+<template>
+    <div class="ja-user-group-tree">
+        <el-select v-model="currentApp" style="width: 100%;" v-if="!props.appId">
+            <el-option v-for="a in apps" :key="a.id" :label="a.caption" :value="a.id"></el-option>
+        </el-select>
+        <el-tree :style="{width: '100%', '--ja-group-tree-node-height': props.nodeHeight}"
+                 ref="groupTree" v-loading="loading" :data="state.groups"
+                 size="default"
+                 node-key="id" highlight-current default-expand-all :current-node-key="id"
+                 :expand-on-click-node="false"
+                 v-bind="$attrs" @current-change="currentChange" :props="{
+                class: (node: TreeNodeData) => selected?.id === node.id ? 'selected-group' : 'group',
+            }">
+            
+            <template #default="{ data }">
+                <div>
+                    <div class="name">{{ data.label }} <el-tag v-if="data.resourceScoped" type="info">资源域</el-tag></div>
+                </div>
+            </template>
+            </el-tree>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, shallowReactive, watch} from "vue";
+import {
+    createAxiosWithoutCache,
+    type Group, type ProjectedGroup,
+    useAppApi,
+    useLoading,
+    useUserGroupApi,
+} from "@jari-ace/app-bolts";
+import {type TreeNodeType, useTreeData} from "../../../hooks/useTreeData";
+import {ElOption, ElSelect, ElTree, vLoading, ElTag} from "element-plus";
+import type {TreeNodeData} from "element-plus/es/components/tree/src/tree.type";
+import {useAppInstances} from "../../../hooks/useAppInstances";
+import {useGroups} from "../../../hooks/useGroups";
+
+interface Props {
+    /**
+     * 用户域ID
+     */
+    realmId?: string;
+    /**
+     * 是否多选
+     */
+    multiple?: boolean;
+    /**
+     * 是否显示控制台应用
+     */
+    showConsoleApp?: boolean
+    /**
+     * 只显示指定应用下的用户组（不可自选应用）
+     */
+    appId?: string;
+    /**
+     * 节点高度
+     */
+    nodeHeight?: string;
+    /**
+     * 业务类别
+     */
+    category?: string;
+    /**
+     * 是否全局用户组
+     */
+    global?: boolean;
+    /**
+     * 是否显示所有分类
+     */
+    showAllCategory? :boolean;
+}
+
+const groupTree = ref<typeof ElTree>();
+const axios = createAxiosWithoutCache()
+const loading = useLoading(axios);
+const props = withDefaults(defineProps<Props>(), {nodeHeight: 'auto'});
+const emits = defineEmits(["change", "loaded"]);
+const selected = defineModel<Group | null>();
+const currentApp = ref<string | undefined>(props.appId);
+const id = computed({
+    get() {
+        return selected.value?.id;
+    },
+    set(val) {
+        selected.value = state.groups.find(x => x.id === val) ?? null;
+    }
+})
+
+const {getGlobal, getAccessible} = useAppInstances()
+const {getGroups, getGlobalGroups} = useGroups()
+
+let [globalApp, _apps] = await Promise.all([
+    getGlobal(),
+    getAccessible(),
+])
+_apps = [..._apps];
+_apps.unshift(globalApp);
+
+if (!props.showConsoleApp) {
+    const index = _apps.findIndex(a => a.name == "ace-app-manage");
+    if (index >= 0) {
+        _apps.splice(index, 1);
+    }
+}
+const apps = ref(_apps)
+
+if (!currentApp.value) {
+    currentApp.value = globalApp.id;
+}
+
+const state = shallowReactive<{
+    groups: (TreeNodeType & Group)[];
+}>({
+    groups: []
+});
+
+const getList = async () => {
+    if (!props.realmId || !currentApp.value) return;
+    let res: ProjectedGroup[]
+    if (props.global) {
+        res = await getGlobalGroups(props.realmId);
+    } else {
+        res = await getGroups(currentApp.value, props.realmId, props.category, props.showAllCategory);
+    }
+    state.groups = [
+        ...useTreeData<Group>(res, "name"),
+    ];
+    if (!selected.value && state.groups.length > 0) {
+        id.value = state.groups[0].id;
+    }
+    emits("loaded", state.groups);
+};
+
+const currentChange = (data: TreeNodeType & Group) => {
+    selected.value = data;
+    emits("change", data);
+};
+
+watch(
+    () => (
+        {appId: props.appId, realmId: props.realmId, category: props.category}
+    ),
+    () => {
+        //重新获取
+        getList();
+    }, {
+        deep: true,
+        immediate: true,
+    }
+);
+watch(() => props.appId, () => {
+    currentApp.value = props.appId;
+})
+
+defineExpose({
+    reload: getList,
+    elTree: groupTree
+});
+</script>
+
+<style lang="scss" scoped>
+.ja-user-group-tree {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+:deep(.group) {
+    background-color: #fff;
+
+    .el-tree-node__content {
+        height: var(--ja-group-tree-node-height);
+    }
+
+    &.active {
+        background-color: var(--el-color-primary-light-9);
+    }
+}
+
+:deep(.selected-group) {
+    background-color: var(--el-tree-node-hover-bg-color) !important;
+
+    .el-tree-node__content {
+        height: var(--ja-group-tree-node-height);
+    }
+
+    &.active {
+        background-color: var(--el-color-primary-light-9);
+    }
+}
+
+</style>

package/ace-element-plus-component/packages/components/userPicker/index.ts

@@ -0,0 +1,10 @@
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import UserPicker from "./src/UserPicker.vue";
+import _JaUserPicker from "./src/JaUserPicker.vue";
+import _JaUserList from "./src/JaUserList.vue";
+
+export const JaUserPickerRaw: SFCWithInstall<typeof UserPicker> = withInstall(UserPicker);
+export const JaUserPicker: SFCWithInstall<typeof _JaUserPicker> = withInstall(_JaUserPicker);
+export const JaUserList: SFCWithInstall<typeof _JaUserList> = withInstall(_JaUserList);
+
+

package/ace-element-plus-component/packages/components/userPicker/src/CustomGroupManager.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+//#region const定义
+import {ref, withDefaults} from "vue";
+import {Minus, Plus} from "@element-plus/icons-vue";
+import {JaButton} from "../../button";
+import {
+    ElButton,
+    ElDialog,
+    ElMessageBox,
+    ElScrollbar,
+    ElSpace,
+    ElForm,
+    ElText,
+    ElTree,
+    ElFormItem,
+    ElInput, ElMessage
+} from "element-plus";
+import {
+    type AceAxiosRequestConfig,
+    createAxiosWithoutCache,
+    type CustomGroup,
+    useCustomGroupApi, useLoading,
+    type UserReference
+} from "@jari-ace/app-bolts";
+import {type TreeNodeType, useTreeData} from "../../../hooks/useTreeData";
+import type {TreeNodeData} from "element-plus/es/components/tree/src/tree.type";
+import Node from "element-plus/es/components/tree/src/model/node";
+import vFocus from "../../../directives/autofocus";
+
+const visible = ref(false);
+const axios = createAxiosWithoutCache();
+const api = useCustomGroupApi(axios);
+const data = ref<(TreeNodeType & CustomGroup)[]>();
+const nodeProps = {
+    label: "name",
+    children: "children",
+    isLeaf: (data: TreeNodeData, node: Node) => !data.hasChildren,
+    class: (data: TreeNodeData) => {
+        return data.id === current.value?.id ? "selected-group" : "group";
+    }
+}
+const current = ref<TreeNodeType & CustomGroup>();
+const editorVisible = ref(false);
+const editingGroupName = ref<string>();
+const loading = useLoading(axios)
+const props = withDefaults(defineProps<{
+    users: UserReference[] | null
+}>(), {
+    users: () => [] as UserReference[]
+});
+const config: AceAxiosRequestConfig = {};
+//#endregion
+
+
+//#region 事件
+async function loadData() {
+    const res = useTreeData(await api.getAll());
+    const root = {
+        id: "-1",
+        name: "[顶级组]",
+        children: res,
+        dataVersion: 0,
+        hasChildren: res.length > 0,
+        label: "",
+        parentId: undefined,
+        sortIndex: 0,
+        sortPath: ""
+    };
+    data.value = [root];
+    return root;
+}
+
+async function onOpen() {
+    current.value = await loadData();
+}
+
+function onCurrentChanged(c: TreeNodeType & CustomGroup) {
+    current.value = c;
+}
+
+function onAddGroupClick() {
+    editingGroupName.value = undefined;
+    editorVisible.value = true;
+}
+
+async function onEditorOkClick() {
+    await api.create({
+        name: editingGroupName.value!,
+        parentId: current.value?.id == "-1" ? undefined : current.value?.id,
+    })
+    editorVisible.value = false;
+    await loadData();
+}
+
+async function onDeleteGroupClick() {
+    if (current.value && current.value.id !== '-1') {
+        await ElMessageBox.confirm("确定要删除选中的自定义组？", "确认删除");
+        await api.delete(current.value.id);
+        await loadData();
+        current.value = undefined;
+    }
+}
+
+async function onOkClick() {
+    if (!current.value || current.value.id === '-1') {
+        ElMessage.warning("请选择要保存到的自定义用户组")
+        return;
+    }
+    await api.setMembers({
+        id: current.value.id,
+        userIds: props.users?.map(u => u.id) ?? []
+    }, config)
+    visible.value = false;
+}
+
+//#endregion
+
+defineExpose({
+    show() {
+        visible.value = true;
+    },
+    close() {
+        visible.value = false;
+    }
+})
+</script>
+
+<template>
+    <el-dialog v-model="visible"
+               destroy-on-close
+               append-to-body
+               draggable
+               title="保存为自定义组"
+               width="360"
+               @open="onOpen">
+        <div class="ja-custom-group-manager">
+            <el-space>
+                <el-text>请创建或选择要保存为的自定义组:</el-text>
+                <ja-button circle :icon="Plus" tooltip="添加自定义组" shortcut="Alt+G" size="small"
+                           @click="onAddGroupClick" :loading="loading"></ja-button>
+                <ja-button circle :icon="Minus" tooltip="删除自定义组" shortcut="Alt+D" size="small"
+                           @click="onDeleteGroupClick" :loading="loading"></ja-button>
+            </el-space>
+            <el-scrollbar height="360px">
+                <el-tree :data="data" node-key="id" :props="nodeProps" default-expand-all
+                         :expand-on-click-node="false"
+                         @current-change="onCurrentChanged" :current-node-key="current?.id ?? -1">
+                </el-tree>
+            </el-scrollbar>
+        </div>
+        <template #footer>
+            <ja-button type="primary" shortcut="Alt+O" :loading="loading" @click="onOkClick">确定
+            </ja-button>
+            <el-button @click="visible=false">取消</el-button>
+        </template>
+    </el-dialog>
+
+    <el-dialog v-model="editorVisible" destroy-on-close append-to-body title="添加自定义组"
+               width="360px">
+        <el-form label-position="top">
+            <el-form-item label="自定义组名" required>
+                <el-input v-model="editingGroupName" style="width: 100%" v-focus></el-input>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <ja-button type="primary" shortcut="Alt+P" @click="onEditorOkClick" :loading="loading"
+                       size="default">
+                确定
+            </ja-button>
+            <el-button @click="editorVisible=false" size="default">取消</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<style scoped lang="scss">
+.ja-custom-group-manager {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+:deep(.group) {
+    background-color: #fff;
+}
+
+:deep(.selected-group) {
+    background-color: var(--el-tree-node-hover-bg-color) !important;
+}
+</style>