@jari-ace/element-plus-component 0.1.0 → 0.1.6

package/packages/components/userSelectDialog/src/userSelectDialog.vue

@@ -1,447 +1,447 @@
-<script setup lang="tsx">
-import {
-    ElDialog,
-    ElIcon,
-    ElTableV2,
-    ElText,
-    ElTabs,
-    ElTabPane,
-    ElScrollbar,
-    ElTooltip,
-    vLoading,
-    ElButton, type Column
-} from "element-plus";
-import {JaDepartmentTree} from "../../departmentTree";
-import {
-    h,
-    onUnmounted,
-    type PropType,
-    provide,
-    reactive,
-    ref,
-    watch
-} from "vue";
-import {
-    type BooleanResultExpression,
-    createAxiosWithoutCache, type CustomGroup, type Group,
-    type ProjectedDepartment, QUser,
-    useLoading,
-    useLoginUser, type UserReference
-} from "@jari-ace/app-bolts";
-import {useUserRefQuery} from "../../../hooks/useUserRefQuery";
-import type {TreeNodeType} from "../../../hooks/useTreeData";
-import {JaUserInfoTag} from "../../userTag";
-import {SCROLL_BAR_WRAPPED_INJECT_KEY} from "../../scrollbar/utils";
-import {Check, Hide, QuestionFilled, View} from "@element-plus/icons-vue";
-import {JaButton} from "../../button";
-import throttle from "lodash-es/throttle";
-import {JaUserGroupTree} from "../../userGroupTree";
-import {JaCustomGroupTree} from "../../customGroupTree";
-//#region Props和Const声明和初始化
-const props = defineProps({
-    /**
-     * 可选择用户的用户域ID
-     */
-    realmId: {type: String, required: true, default: 1},
-    /**
-     * 是否多选模式
-     */
-    multiple: {type: Boolean, required: false, default: false},
-    /**
-     * 自定义筛选过滤条件，可以在此回调方法内使用qUser参数构造自定义的查询条件。例如 qUser => qUser.fullName.startWith('王')
-     */
-    customFilter: {
-        type: Function as PropType<(qUser: InstanceType<typeof QUser>) => BooleanResultExpression>,
-        required: false
-    }
-})
-const selectedUsers = defineModel<UserReference[] | UserReference | null>({
-    required: true
-});
-const localRealmId = ref<string>();
-const login = useLoginUser();
-if (props.realmId) {
-    localRealmId.value = props.realmId;
-} else {
-    localRealmId.value = login.realmId;
-}
-if (props.multiple) {
-    if (!selectedUsers.value) {
-        selectedUsers.value = [];
-    }
-    if (!Array.isArray(selectedUsers.value)) {
-        throw new Error('多选模式的选择用户对话框(multiple设置为true)的v-model必须是数组类型')
-    }
-} else {
-    if (Array.isArray(selectedUsers.value)) {
-        throw new Error('单选模式的选择用户对话框(multiple设置为false)的v-model只能为空或是单个UserReference对象')
-    }
-}
-const visible = ref(false);
-const currentDept = ref<ProjectedDepartment & TreeNodeType | undefined>();
-const currentGroup = ref<Group & TreeNodeType | undefined>();
-const currentCustomGroup = ref<CustomGroup & TreeNodeType | undefined>()
-const axios = createAxiosWithoutCache()
-const loading = useLoading(axios);
-const showSelectedOnly = ref(false);
-const usersForBinding = ref<UserReference[]>([]);
-const map = reactive(new Map<string, UserReference>());
-const currentTab = ref<string>('dept');
-
-provide(SCROLL_BAR_WRAPPED_INJECT_KEY, undefined)
-
-const tempSel = ref(Array.isArray(selectedUsers.value) ? [...selectedUsers.value] : selectedUsers.value)
-const userQuery = useUserRefQuery(undefined,
-    props.customFilter,
-    result => {
-        if (!showSelectedOnly.value) {
-            usersForBinding.value = result ?? [];
-        }
-    },
-    false,
-    axios,
-    true);
-
-const columns: Column<any>[] = [
-    {
-        key: "user",
-        dataKey: "id",
-        width: 290,
-        title: "用户",
-        cellRenderer: ({cellData: id, rowData: u, rowIndex}) => {
-            const {hasAvatar, fullName} = u;
-            const user = u;
-            const index = rowIndex;
-            return h("div", {
-                class: "user-row", onMousedown: () => onMouseDown(user),
-                onMouseenter: () => onMouseEnter(user),
-                onMouseup: onMouseUp,
-                onMouseover: (e: MouseEvent) => onMouseOver(e, index)
-            }, [
-                h(ElIcon, {color: "#0D6A9F"}, () => userSelected(user) ? h(Check) : undefined),
-                h(JaUserInfoTag, {
-                    userId: id,
-                    theme: userTagTheme(user),
-                    placement: 'right-start',
-                    hasAvatar: false,
-                    fullName: fullName
-                }),
-                h("div", {style: "flex:auto"})
-            ])
-        }
-    }
-]
-
-const isDragSelecting = ref(false);
-const userTable = ref<InstanceType<typeof ElTableV2>>()
-const throttleDown = throttle(manualScrollDown, 100);
-const throttleSwitchSelect = throttle(switchUserSelect, 100)
-//#endregion
-
-//#region watch
-watch(currentDept, () => {
-    if (currentTab.value == 'dept')
-        userQuery.queryParams.value.currentDept = currentDept.value;
-})
-
-watch(currentGroup, () => {
-    if (currentTab.value == 'group')
-        userQuery.queryParams.value.currentGroup = currentGroup.value;
-})
-
-watch(currentCustomGroup, () => {
-    if (currentTab.value == "customGroup") {
-        userQuery.queryParams.value.currentCustomGroup = currentCustomGroup.value;
-    }
-})
-
-watch(currentTab, () => {
-    if (currentTab.value === "dept") {
-        userQuery.queryParams.value.currentDept = currentDept.value;
-        userQuery.queryParams.value.currentGroup = undefined;
-        userQuery.queryParams.value.currentCustomGroup = undefined;
-    } else if (currentTab.value === "group") {
-        userQuery.queryParams.value.currentDept = undefined;
-        userQuery.queryParams.value.currentCustomGroup = undefined;
-        userQuery.queryParams.value.currentGroup = currentGroup.value;
-    } else if (currentTab.value === "customGroup") {
-        userQuery.queryParams.value.currentDept = undefined;
-        userQuery.queryParams.value.currentCustomGroup = currentCustomGroup.value;
-        userQuery.queryParams.value.currentGroup = undefined;
-    }
-})
-//#endregion
-
-//#region 方法
-function userSelected(u: UserReference) {
-    if (Array.isArray(tempSel.value)) {
-        return map.has(u.id);
-    } else {
-        return tempSel.value && tempSel.value.id === u.id;
-    }
-}
-
-function userTagTheme(u: UserReference) {
-    if (userSelected(u)) {
-        return "autumnOrange"
-    } else {
-        return "skyGray"
-    }
-}
-
-function switchUserSelect(user: UserReference) {
-    if (Array.isArray(tempSel.value)) {
-        const index = tempSel.value.findIndex(x => x.id === user.id);
-        if (index >= 0) {
-            map.delete(user.id);
-            tempSel.value.splice(index, 1);
-        } else {
-            map.set(user.id, user)
-            tempSel.value.push(user);
-        }
-    } else {
-        tempSel.value = user;
-    }
-}
-
-//#endregion
-
-//#region 事件处理
-onUnmounted(() => {
-    throttleDown.cancel()
-    throttleSwitchSelect.cancel()
-})
-
-function selectAll() {
-    if (Array.isArray(tempSel.value)) {
-        const users = userQuery.queryResult.value.users.filter(u => !userSelected(u));
-        users.forEach(u => map.set(u.id, u))
-        tempSel.value.push(...users);
-    }
-}
-
-function clearSelection() {
-    if (Array.isArray(tempSel.value)) {
-        map.clear()
-        tempSel.value.splice(0)
-    }
-}
-
-function inverseSelection() {
-    if (Array.isArray(tempSel.value)) {
-        const users = userQuery.queryResult.value.users.filter(u => !userSelected(u))
-        map.clear();
-        users.forEach(u => map.set(u.id, u))
-        tempSel.value.splice(0);
-        tempSel.value.push(...users);
-    }
-}
-
-function onConfirm() {
-    selectedUsers.value = tempSel.value;
-    visible.value = false;
-}
-
-function switchSelectOnlyView() {
-    showSelectedOnly.value = !showSelectedOnly.value;
-    if (showSelectedOnly.value) {
-        if (Array.isArray(tempSel.value)) {
-            usersForBinding.value = [...tempSel.value];
-        } else {
-            usersForBinding.value = tempSel.value ? [tempSel.value] : []
-        }
-    } else {
-        usersForBinding.value = userQuery.queryResult.value.users;
-    }
-}
-
-function onOpen() {
-    if (!userQuery.queryParams.value.realmId || userQuery.queryParams.value.realmId
-        !== localRealmId.value) {
-        userQuery.queryParams.value.realmId = localRealmId.value;
-    }
-
-    tempSel.value = Array.isArray(selectedUsers.value) ? [...selectedUsers.value] : selectedUsers.value;
-    if (Array.isArray(selectedUsers.value)) {
-        map.clear()
-        selectedUsers.value.forEach(u => map.set(u.id, u));
-    }
-}
-
-function onMouseDown(u: UserReference) {
-    switchUserSelect(u);
-    isDragSelecting.value = true;
-}
-
-function onMouseUp() {
-    isDragSelecting.value = false;
-}
-
-function onMouseEnter(u: UserReference) {
-    if (isDragSelecting.value) {
-        switchUserSelect(u);
-    }
-}
-
-let currentIndex: number | undefined = undefined;
-
-function manualScrollDown() {
-    if (currentIndex && currentIndex < usersForBinding.value.length) {
-        (
-            userTable.value as any
-        ).scrollToRow(currentIndex + 1);
-    }
-    currentIndex = undefined;
-}
-
-function manualScrollUp() {
-    if (currentIndex && currentIndex > 0) {
-        (
-            userTable.value as any
-        ).scrollToRow(currentIndex - 1);
-    }
-    currentIndex = undefined;
-}
-
-function onMouseOver(event: MouseEvent, index: number) {
-    isDragSelecting.value = event.buttons > 0;
-    if (isDragSelecting.value) {
-        currentIndex = index;
-        throttleDown();
-    }
-}
-
-//#endregion
-
-defineExpose({
-    show() {
-        visible.value = true;
-    }
-})
-</script>
-
-<template>
-    <el-dialog v-model="visible" destroy-on-close draggable width="640" title="选择人员"
-               append-to-body
-               @open="onOpen">
-        <div class="ja-user-select-dialog">
-            <el-tabs class="ja-user-select-dialog__left" v-model="currentTab">
-                <el-tab-pane name="dept" label="按部门"
-                             class="ja-user-select-dialog__left-dept-pane">
-                    <el-scrollbar height="400">
-                        <ja-department-tree v-model="currentDept"
-                                            :realm-id="localRealmId"
-                        ></ja-department-tree>
-                    </el-scrollbar>
-                </el-tab-pane>
-                <el-tab-pane name="group" label="按用户组">
-                    <el-scrollbar height="400">
-                        <ja-user-group-tree v-model="currentGroup"
-                                            :realm-id="localRealmId"></ja-user-group-tree>
-                    </el-scrollbar>
-                </el-tab-pane>
-                <el-tab-pane name="customGroup" label="按自定义组">
-                    <el-scrollbar height="400">
-                        <ja-custom-group-tree v-model="currentCustomGroup"></ja-custom-group-tree>
-                    </el-scrollbar>
-                </el-tab-pane>
-            </el-tabs>
-            <div class="ja-user-select-dialog__content">
-                <el-table-v2
-                    ref="userTable"
-                    :row-height="40"
-                    :header-height="40"
-                    :columns="columns"
-                    :data="usersForBinding"
-                    :width="300"
-                    :height="450"
-                    v-loading="loading"
-                    fixed>
-                    <template #header>
-                        <div
-                            style="display: flex; flex-direction: row; align-content: baseline; width: 100%; gap:0;">
-                            <el-text style="flex:auto; font-weight: 600">
-                                人员
-                                <el-tooltip
-                                    content="切换筛选条件，不会清除已选人员。支持鼠标拖动多选。">
-                                    <el-icon v-if="props.multiple">
-                                        <QuestionFilled></QuestionFilled>
-                                    </el-icon>
-                                </el-tooltip>
-                            </el-text>
-                            <el-text style="flex:none; margin-right: 12px" v-if="props.multiple">
-                                <el-tooltip
-                                    :content="showSelectedOnly? '显示所有人员': '只显示选中人员'">
-                                    <el-icon size="15"
-                                             @click="switchSelectOnlyView">
-                                        <Hide v-if="!showSelectedOnly"></Hide>
-                                        <View v-else></View>
-                                    </el-icon>
-                                </el-tooltip>
-                            </el-text>
-                            <ja-button plain style="flex: none;" v-if="props.multiple" link
-                                       tooltip="全部选中" shortcut="Ctrl+A"
-                                       @click="selectAll">全选
-                            </ja-button>
-                            <ja-button plain style="flex: none;" v-if="props.multiple" link
-                                       tooltip="清除全部选中项" shortcut="Ctrl+Q"
-                                       @click="clearSelection">全消
-                            </ja-button>
-                            <ja-button plain style="flex: none;" v-if="props.multiple" link
-                                       tooltip="清除选中项，并选中之前未被选中项"
-                                       shortcut="Ctrl+F"
-                                       @click="inverseSelection">反选
-                            </ja-button>
-                        </div>
-                    </template>
-                </el-table-v2>
-            </div>
-        </div>
-        <template #footer>
-            <ja-button type="primary" shortcut="Ctrl+Alt+Enter" @click="onConfirm" size="default">确定
-            </ja-button>
-            <el-button plain size="default" @click="visible=false">取消</el-button>
-        </template>
-    </el-dialog>
-</template>
-
-<style scoped lang="scss">
-.ja-user-select-dialog {
-    display: flex;
-    align-content: stretch;
-    gap: 8px;
-
-    &__left {
-        flex: none;
-        width: 300px;
-        border-right: 1px solid var(--el-border-color);
-        padding-right: 8px;
-
-        &-dept-pane {
-            padding: 0 16px 0 0;
-        }
-    }
-
-    &__content {
-        flex: auto;
-
-        :deep(.user-row) {
-            user-select: none;
-            display: flex;
-            height: 100%;
-            width: 100%;
-            flex-direction: row;
-            gap: 4px;
-            align-items: center;
-
-            i {
-                height: 100%;
-            }
-        }
-    }
-
-
-}
-
-
-</style>
+<script setup lang="tsx">
+import {
+    ElDialog,
+    ElIcon,
+    ElTableV2,
+    ElText,
+    ElTabs,
+    ElTabPane,
+    ElScrollbar,
+    ElTooltip,
+    vLoading,
+    ElButton, type Column
+} from "element-plus";
+import {JaDepartmentTree} from "../../departmentTree";
+import {
+    h,
+    onUnmounted,
+    type PropType,
+    provide,
+    reactive,
+    ref,
+    watch
+} from "vue";
+import {
+    type BooleanResultExpression,
+    createAxiosWithoutCache, type CustomGroup, type Group,
+    type ProjectedDepartment, QUser,
+    useLoading,
+    useLoginUser, type UserReference
+} from "@jari-ace/app-bolts";
+import {useUserRefQuery} from "../../../hooks/useUserRefQuery";
+import type {TreeNodeType} from "../../../hooks/useTreeData";
+import {JaUserInfoTag} from "../../userTag";
+import {SCROLL_BAR_WRAPPED_INJECT_KEY} from "../../scrollbar/utils";
+import {Check, Hide, QuestionFilled, View} from "@element-plus/icons-vue";
+import {JaButton} from "../../button";
+import throttle from "lodash-es/throttle";
+import {JaUserGroupTree} from "../../userGroupTree";
+import {JaCustomGroupTree} from "../../customGroupTree";
+//#region Props和Const声明和初始化
+const props = defineProps({
+    /**
+     * 可选择用户的用户域ID
+     */
+    realmId: {type: String, required: true, default: 1},
+    /**
+     * 是否多选模式
+     */
+    multiple: {type: Boolean, required: false, default: false},
+    /**
+     * 自定义筛选过滤条件，可以在此回调方法内使用qUser参数构造自定义的查询条件。例如 qUser => qUser.fullName.startWith('王')
+     */
+    customFilter: {
+        type: Function as PropType<(qUser: InstanceType<typeof QUser>) => BooleanResultExpression>,
+        required: false
+    }
+})
+const selectedUsers = defineModel<UserReference[] | UserReference | null>({
+    required: true
+});
+const localRealmId = ref<string>();
+const login = useLoginUser();
+if (props.realmId) {
+    localRealmId.value = props.realmId;
+} else {
+    localRealmId.value = login.realmId;
+}
+if (props.multiple) {
+    if (!selectedUsers.value) {
+        selectedUsers.value = [];
+    }
+    if (!Array.isArray(selectedUsers.value)) {
+        throw new Error('多选模式的选择用户对话框(multiple设置为true)的v-model必须是数组类型')
+    }
+} else {
+    if (Array.isArray(selectedUsers.value)) {
+        throw new Error('单选模式的选择用户对话框(multiple设置为false)的v-model只能为空或是单个UserReference对象')
+    }
+}
+const visible = ref(false);
+const currentDept = ref<ProjectedDepartment & TreeNodeType | undefined>();
+const currentGroup = ref<Group & TreeNodeType | undefined>();
+const currentCustomGroup = ref<CustomGroup & TreeNodeType | undefined>()
+const axios = createAxiosWithoutCache()
+const loading = useLoading(axios);
+const showSelectedOnly = ref(false);
+const usersForBinding = ref<UserReference[]>([]);
+const map = reactive(new Map<string, UserReference>());
+const currentTab = ref<string>('dept');
+
+provide(SCROLL_BAR_WRAPPED_INJECT_KEY, undefined)
+
+const tempSel = ref(Array.isArray(selectedUsers.value) ? [...selectedUsers.value] : selectedUsers.value)
+const userQuery = useUserRefQuery(undefined,
+    props.customFilter,
+    result => {
+        if (!showSelectedOnly.value) {
+            usersForBinding.value = result ?? [];
+        }
+    },
+    false,
+    axios,
+    true);
+
+const columns: Column<any>[] = [
+    {
+        key: "user",
+        dataKey: "id",
+        width: 290,
+        title: "用户",
+        cellRenderer: ({cellData: id, rowData: u, rowIndex}) => {
+            const {hasAvatar, fullName} = u;
+            const user = u;
+            const index = rowIndex;
+            return h("div", {
+                class: "user-row", onMousedown: () => onMouseDown(user),
+                onMouseenter: () => onMouseEnter(user),
+                onMouseup: onMouseUp,
+                onMouseover: (e: MouseEvent) => onMouseOver(e, index)
+            }, [
+                h(ElIcon, {color: "#0D6A9F"}, () => userSelected(user) ? h(Check) : undefined),
+                h(JaUserInfoTag, {
+                    userId: id,
+                    theme: userTagTheme(user),
+                    placement: 'right-start',
+                    hasAvatar: false,
+                    fullName: fullName
+                }),
+                h("div", {style: "flex:auto"})
+            ])
+        }
+    }
+]
+
+const isDragSelecting = ref(false);
+const userTable = ref<InstanceType<typeof ElTableV2>>()
+const throttleDown = throttle(manualScrollDown, 100);
+const throttleSwitchSelect = throttle(switchUserSelect, 100)
+//#endregion
+
+//#region watch
+watch(currentDept, () => {
+    if (currentTab.value == 'dept')
+        userQuery.queryParams.value.currentDept = currentDept.value;
+})
+
+watch(currentGroup, () => {
+    if (currentTab.value == 'group')
+        userQuery.queryParams.value.currentGroup = currentGroup.value;
+})
+
+watch(currentCustomGroup, () => {
+    if (currentTab.value == "customGroup") {
+        userQuery.queryParams.value.currentCustomGroup = currentCustomGroup.value;
+    }
+})
+
+watch(currentTab, () => {
+    if (currentTab.value === "dept") {
+        userQuery.queryParams.value.currentDept = currentDept.value;
+        userQuery.queryParams.value.currentGroup = undefined;
+        userQuery.queryParams.value.currentCustomGroup = undefined;
+    } else if (currentTab.value === "group") {
+        userQuery.queryParams.value.currentDept = undefined;
+        userQuery.queryParams.value.currentCustomGroup = undefined;
+        userQuery.queryParams.value.currentGroup = currentGroup.value;
+    } else if (currentTab.value === "customGroup") {
+        userQuery.queryParams.value.currentDept = undefined;
+        userQuery.queryParams.value.currentCustomGroup = currentCustomGroup.value;
+        userQuery.queryParams.value.currentGroup = undefined;
+    }
+})
+//#endregion
+
+//#region 方法
+function userSelected(u: UserReference) {
+    if (Array.isArray(tempSel.value)) {
+        return map.has(u.id);
+    } else {
+        return tempSel.value && tempSel.value.id === u.id;
+    }
+}
+
+function userTagTheme(u: UserReference) {
+    if (userSelected(u)) {
+        return "autumnOrange"
+    } else {
+        return "skyGray"
+    }
+}
+
+function switchUserSelect(user: UserReference) {
+    if (Array.isArray(tempSel.value)) {
+        const index = tempSel.value.findIndex(x => x.id === user.id);
+        if (index >= 0) {
+            map.delete(user.id);
+            tempSel.value.splice(index, 1);
+        } else {
+            map.set(user.id, user)
+            tempSel.value.push(user);
+        }
+    } else {
+        tempSel.value = user;
+    }
+}
+
+//#endregion
+
+//#region 事件处理
+onUnmounted(() => {
+    throttleDown.cancel()
+    throttleSwitchSelect.cancel()
+})
+
+function selectAll() {
+    if (Array.isArray(tempSel.value)) {
+        const users = userQuery.queryResult.value.users.filter(u => !userSelected(u));
+        users.forEach(u => map.set(u.id, u))
+        tempSel.value.push(...users);
+    }
+}
+
+function clearSelection() {
+    if (Array.isArray(tempSel.value)) {
+        map.clear()
+        tempSel.value.splice(0)
+    }
+}
+
+function inverseSelection() {
+    if (Array.isArray(tempSel.value)) {
+        const users = userQuery.queryResult.value.users.filter(u => !userSelected(u))
+        map.clear();
+        users.forEach(u => map.set(u.id, u))
+        tempSel.value.splice(0);
+        tempSel.value.push(...users);
+    }
+}
+
+function onConfirm() {
+    selectedUsers.value = tempSel.value;
+    visible.value = false;
+}
+
+function switchSelectOnlyView() {
+    showSelectedOnly.value = !showSelectedOnly.value;
+    if (showSelectedOnly.value) {
+        if (Array.isArray(tempSel.value)) {
+            usersForBinding.value = [...tempSel.value];
+        } else {
+            usersForBinding.value = tempSel.value ? [tempSel.value] : []
+        }
+    } else {
+        usersForBinding.value = userQuery.queryResult.value.users;
+    }
+}
+
+function onOpen() {
+    if (!userQuery.queryParams.value.realmId || userQuery.queryParams.value.realmId
+        !== localRealmId.value) {
+        userQuery.queryParams.value.realmId = localRealmId.value;
+    }
+
+    tempSel.value = Array.isArray(selectedUsers.value) ? [...selectedUsers.value] : selectedUsers.value;
+    if (Array.isArray(selectedUsers.value)) {
+        map.clear()
+        selectedUsers.value.forEach(u => map.set(u.id, u));
+    }
+}
+
+function onMouseDown(u: UserReference) {
+    switchUserSelect(u);
+    isDragSelecting.value = true;
+}
+
+function onMouseUp() {
+    isDragSelecting.value = false;
+}
+
+function onMouseEnter(u: UserReference) {
+    if (isDragSelecting.value) {
+        switchUserSelect(u);
+    }
+}
+
+let currentIndex: number | undefined = undefined;
+
+function manualScrollDown() {
+    if (currentIndex && currentIndex < usersForBinding.value.length) {
+        (
+            userTable.value as any
+        ).scrollToRow(currentIndex + 1);
+    }
+    currentIndex = undefined;
+}
+
+function manualScrollUp() {
+    if (currentIndex && currentIndex > 0) {
+        (
+            userTable.value as any
+        ).scrollToRow(currentIndex - 1);
+    }
+    currentIndex = undefined;
+}
+
+function onMouseOver(event: MouseEvent, index: number) {
+    isDragSelecting.value = event.buttons > 0;
+    if (isDragSelecting.value) {
+        currentIndex = index;
+        throttleDown();
+    }
+}
+
+//#endregion
+
+defineExpose({
+    show() {
+        visible.value = true;
+    }
+})
+</script>
+
+<template>
+    <el-dialog v-model="visible" destroy-on-close draggable width="640" title="选择人员"
+               append-to-body
+               @open="onOpen">
+        <div class="ja-user-select-dialog">
+            <el-tabs class="ja-user-select-dialog__left" v-model="currentTab">
+                <el-tab-pane name="dept" label="按部门"
+                             class="ja-user-select-dialog__left-dept-pane">
+                    <el-scrollbar height="400">
+                        <ja-department-tree v-model="currentDept"
+                                            :realm-id="localRealmId"
+                        ></ja-department-tree>
+                    </el-scrollbar>
+                </el-tab-pane>
+                <el-tab-pane name="group" label="按用户组">
+                    <el-scrollbar height="400">
+                        <ja-user-group-tree v-model="currentGroup"
+                                            :realm-id="localRealmId"></ja-user-group-tree>
+                    </el-scrollbar>
+                </el-tab-pane>
+                <el-tab-pane name="customGroup" label="按自定义组">
+                    <el-scrollbar height="400">
+                        <ja-custom-group-tree v-model="currentCustomGroup"></ja-custom-group-tree>
+                    </el-scrollbar>
+                </el-tab-pane>
+            </el-tabs>
+            <div class="ja-user-select-dialog__content">
+                <el-table-v2
+                    ref="userTable"
+                    :row-height="40"
+                    :header-height="40"
+                    :columns="columns"
+                    :data="usersForBinding"
+                    :width="300"
+                    :height="450"
+                    v-loading="loading"
+                    fixed>
+                    <template #header>
+                        <div
+                            style="display: flex; flex-direction: row; align-content: baseline; width: 100%; gap:0;">
+                            <el-text style="flex:auto; font-weight: 600">
+                                人员
+                                <el-tooltip
+                                    content="切换筛选条件，不会清除已选人员。支持鼠标拖动多选。">
+                                    <el-icon v-if="props.multiple">
+                                        <QuestionFilled></QuestionFilled>
+                                    </el-icon>
+                                </el-tooltip>
+                            </el-text>
+                            <el-text style="flex:none; margin-right: 12px" v-if="props.multiple">
+                                <el-tooltip
+                                    :content="showSelectedOnly? '显示所有人员': '只显示选中人员'">
+                                    <el-icon size="15"
+                                             @click="switchSelectOnlyView">
+                                        <Hide v-if="!showSelectedOnly"></Hide>
+                                        <View v-else></View>
+                                    </el-icon>
+                                </el-tooltip>
+                            </el-text>
+                            <ja-button plain style="flex: none;" v-if="props.multiple" link
+                                       tooltip="全部选中" shortcut="Ctrl+A"
+                                       @click="selectAll">全选
+                            </ja-button>
+                            <ja-button plain style="flex: none;" v-if="props.multiple" link
+                                       tooltip="清除全部选中项" shortcut="Ctrl+Q"
+                                       @click="clearSelection">全消
+                            </ja-button>
+                            <ja-button plain style="flex: none;" v-if="props.multiple" link
+                                       tooltip="清除选中项，并选中之前未被选中项"
+                                       shortcut="Ctrl+F"
+                                       @click="inverseSelection">反选
+                            </ja-button>
+                        </div>
+                    </template>
+                </el-table-v2>
+            </div>
+        </div>
+        <template #footer>
+            <ja-button type="primary" shortcut="Ctrl+Alt+Enter" @click="onConfirm" size="default">确定
+            </ja-button>
+            <el-button plain size="default" @click="visible=false">取消</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<style scoped lang="scss">
+.ja-user-select-dialog {
+    display: flex;
+    align-content: stretch;
+    gap: 8px;
+
+    &__left {
+        flex: none;
+        width: 300px;
+        border-right: 1px solid var(--el-border-color);
+        padding-right: 8px;
+
+        &-dept-pane {
+            padding: 0 16px 0 0;
+        }
+    }
+
+    &__content {
+        flex: auto;
+
+        :deep(.user-row) {
+            user-select: none;
+            display: flex;
+            height: 100%;
+            width: 100%;
+            flex-direction: row;
+            gap: 4px;
+            align-items: center;
+
+            i {
+                height: 100%;
+            }
+        }
+    }
+
+
+}
+
+
+</style>