@jari-ace/element-plus-component 0.2.2 → 0.3.0

package/packages/components/userGroupPicker/src/UserGroupPicker.vue

@@ -1,94 +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>
+<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/packages/components/userGroupTree/index.ts

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

package/packages/components/userGroupTree/src/userGroupTree.vue

@@ -1,149 +1,149 @@
-<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',
-            }"></el-tree>
-    </div>
-</template>
-
-<script setup lang="ts">
-import {computed, ref, shallowReactive, watch} from "vue";
-import {
-    createAxiosWithoutCache,
-    type Group,
-    useAppApi,
-    useLoading,
-    useUserGroupApi,
-} from "@jari-ace/app-bolts";
-import {type TreeNodeType, useTreeData} from "../../../hooks/useTreeData";
-import {ElOption, ElSelect, ElTree, vLoading} from "element-plus";
-import type {TreeNodeData} from "element-plus/es/components/tree/src/tree.type";
-
-interface Props {
-    realmId?: string;
-    multiple?: boolean;
-    showConsoleApp?: boolean
-    appId?: string;
-    nodeHeight?: string;
-}
-
-const groupTree = ref<typeof ElTree>();
-const axios = createAxiosWithoutCache()
-const loading = useLoading(axios);
-const departmentApi = useUserGroupApi(axios);
-const appApi = useAppApi(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 [globalApp, apps] = await Promise.all([
-    appApi.getGlobalApp(),
-    appApi.getAccessible()
-])
-
-apps.unshift(globalApp);
-if (!props.showConsoleApp) {
-    const index = apps.findIndex(a => a.name == "ace-app-manage");
-    if (index >= 0) {
-        apps.splice(index, 1);
-    }
-}
-if (!currentApp.value) {
-    currentApp.value = globalApp.id;
-}
-
-
-const state = shallowReactive<{
-    groups: (TreeNodeType & Group)[];
-}>({
-    groups: []
-});
-
-const getList = async () => {
-    if (!props.realmId || !currentApp.value) return;
-    const res = await departmentApi.getByAppIdAndRealm(currentApp.value, props.realmId);
-    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(
-    () => props.realmId,
-    () => {
-        //重新获取
-        getList();
-    }
-);
-watch(() => props.appId, () => {
-    currentApp.value = props.appId;
-})
-watch(currentApp, () => {
-    getList();
-})
-
-defineExpose({
-    reload: getList,
-    elTree: groupTree
-});
-
-getList();
-</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>
+<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',
+            }"></el-tree>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, shallowReactive, watch} from "vue";
+import {
+    createAxiosWithoutCache,
+    type Group,
+    useAppApi,
+    useLoading,
+    useUserGroupApi,
+} from "@jari-ace/app-bolts";
+import {type TreeNodeType, useTreeData} from "../../../hooks/useTreeData";
+import {ElOption, ElSelect, ElTree, vLoading} from "element-plus";
+import type {TreeNodeData} from "element-plus/es/components/tree/src/tree.type";
+
+interface Props {
+    realmId?: string;
+    multiple?: boolean;
+    showConsoleApp?: boolean
+    appId?: string;
+    nodeHeight?: string;
+}
+
+const groupTree = ref<typeof ElTree>();
+const axios = createAxiosWithoutCache()
+const loading = useLoading(axios);
+const departmentApi = useUserGroupApi(axios);
+const appApi = useAppApi(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 [globalApp, apps] = await Promise.all([
+    appApi.getGlobalApp(),
+    appApi.getAccessible()
+])
+
+apps.unshift(globalApp);
+if (!props.showConsoleApp) {
+    const index = apps.findIndex(a => a.name == "ace-app-manage");
+    if (index >= 0) {
+        apps.splice(index, 1);
+    }
+}
+if (!currentApp.value) {
+    currentApp.value = globalApp.id;
+}
+
+
+const state = shallowReactive<{
+    groups: (TreeNodeType & Group)[];
+}>({
+    groups: []
+});
+
+const getList = async () => {
+    if (!props.realmId || !currentApp.value) return;
+    const res = await departmentApi.getByAppIdAndRealm(currentApp.value, props.realmId);
+    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(
+    () => props.realmId,
+    () => {
+        //重新获取
+        getList();
+    }
+);
+watch(() => props.appId, () => {
+    currentApp.value = props.appId;
+})
+watch(currentApp, () => {
+    getList();
+})
+
+defineExpose({
+    reload: getList,
+    elTree: groupTree
+});
+
+getList();
+</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/packages/components/userPicker/index.ts

@@ -1,10 +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);
-
-
+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);
+
+