ace-front-end 1.0.0

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

@@ -0,0 +1,515 @@
+<script setup lang="ts">
+import {
+    ElButton,
+    ElIcon,
+    ElInput,
+    ElMessage,
+    ElPopover,
+    ElText,
+    ElSpace,
+} from "element-plus";
+
+import type { PopoverInstance } from 'element-plus'
+
+import {computed,  ref, shallowRef, watch} from "vue"
+import {
+    Delete,
+    Finished,
+    Notebook,
+    Plus,
+    Search, Setting,
+    StarFilled
+} from "@element-plus/icons-vue";
+
+
+
+import {
+    type BooleanResultExpression,
+    createAxiosWithoutCache,
+    QUser, useLoginUser,
+    type UserReference,
+    useUserApi, useUserQueryBuilder
+} from "@jari-ace/app-bolts";
+import {useUserRefQuery} from "../../../hooks/useUserRefQuery";
+import vShortcut from "../../../directives/shortcut"
+import {JaUserInfoTag} from "../../userTag"
+import {JaButton} from "../../button";
+import {JaUserSelectDialog} from "../../userSelectDialog";
+import {JaScrollbar} from "../../scrollbar";
+import CustomGroupManager from "./CustomGroupManager.vue";
+import JaUserList from "./JaUserList.vue";
+import {useRealms} from '../../../hooks/useRealms'
+
+const props = withDefaults( defineProps<{
+    /**
+     * Popover 弹出框的触发方式
+     */
+    trigger?:'click' | 'focus' | 'hover' | 'contextmenu',
+    /**
+     * 可选择用户的用户域ID
+     */
+    realmId?:string,
+    /**
+     * 弹出下拉选框的快捷键
+     */
+    shortcut?:string,
+    /**
+     * 是否多选模式
+     */
+    multiple?:boolean
+    /**
+     * 密级过滤
+     */
+    classificationLevel?:number
+    /**
+     * 自定义筛选过滤条件，可以在此回调方法内使用qUser参数构造自定义的查询条件。例如 qUser => qUser.fullName.startWith('王')
+     */
+    customFilter?:(qUser: InstanceType<typeof QUser>) => BooleanResultExpression,
+    /**
+     * 最多显示多少已选中的用户数量
+     */
+    maxShowCount?:number,
+    /**
+     * 高度，默认100%
+     */
+    height?:number|string
+    /**
+     * 最大高度
+     */
+    maxHeight?: number|string,
+    /**
+     * 是否显示已选用户标签
+     */
+    showUserTag?:boolean,
+    /**
+     * 最多选择数量，为0则不限制
+     */
+    maxSelect?:number,
+    /**
+     * 是否禁用
+     */
+    disabled?:boolean
+
+}>(),{
+    trigger:'hover',
+    shortcut: "Ctrl+Alt+U",
+    multiple:false,
+    classificationLevel: 0,
+    maxShowCount: 20,
+    maxHeight: '100%',
+    showUserTag: true,
+    maxSelect: 0,
+    disabled: false,
+})
+
+// const props = defineProps({
+
+    /**
+     * 可选择用户的用户域ID
+     */
+    // realmId: {type: String, required: false},
+    /**
+     * 弹出下拉选框的快捷键
+     */
+    // shortcut: {type: String, required: false, default: "Ctrl+Alt+U"},
+    /**
+     * 是否多选模式
+     */
+    // multiple: {type: Boolean, required: false, default: false},
+    /**
+     * 密级过滤
+     */
+    // classificationLevel: {type: Number,  required: false, default: 0},
+    /**
+     * 自定义筛选过滤条件，可以在此回调方法内使用qUser参数构造自定义的查询条件。例如 qUser => qUser.fullName.startWith('王')
+     */
+    // customFilter: {
+    //     type: Function as PropType<(qUser: InstanceType<typeof QUser>) => BooleanResultExpression>,
+    //     required: false
+    // },
+    /**
+     * 最多显示多少已选中的用户数量
+     */
+    // maxShowCount: {type: Number, required: false, default: 20},
+    /**
+     * 高度，默认100%
+     */
+    // height: {type: [Number, String], required: false, default: '100%'},
+    /**
+     * 最大高度
+     */
+    // maxHeight: {type: [Number, String], required: false},
+// })
+
+const localRealmId = ref<string>();
+
+const bookmarkDropdown = ref<PopoverInstance>()
+
+async function loadRealmId() {
+    if (props.realmId) {
+        localRealmId.value = props.realmId;
+    } else {
+        const defaultRealm = await useRealms().getDefaultRealm();
+        localRealmId.value = defaultRealm.id;
+    }
+}
+
+loadRealmId();
+
+watch(() => props.realmId, loadRealmId)
+
+const minLengthToTriggerUserQuery = 0;
+const axios = createAxiosWithoutCache();
+const api = useUserApi(axios);
+const users = shallowRef<UserReference[]>([]);
+const selectedUsers = defineModel<UserReference[] | UserReference | null>({
+    required: true
+});
+const inputSearchText = ref<typeof ElInput>();
+const popoverVisible = ref(false);
+const {queryResult, queryParams, pageParams, loading} = useUserRefQuery(
+    () => queryParams.value.name != undefined && queryParams.value.name.length
+          > minLengthToTriggerUserQuery,
+    props.customFilter,
+    (r, paramsChanged) => {
+        if (r) {
+            users.value = queryResult.value.users;
+            if (paramsChanged) {
+                scrollbar.value?.elScrollbar?.scrollTo(0, 0);
+            }
+        } else {
+            onPopoverShow();
+        }
+    }, true, axios, false);
+const btn = ref<typeof ElButton>();
+const scrollbar = ref<InstanceType<typeof JaScrollbar>>();
+const dialogUserSelector = ref<InstanceType<typeof JaUserSelectDialog>>();
+const dlgCustomGroupManager = ref<InstanceType<typeof CustomGroupManager>>();
+const userList = ref<InstanceType<typeof JaUserList>>();
+
+function switchUserSelect(u: UserReference) {
+    if (props.multiple) {
+        if (!Array.isArray(selectedUsers.value)) {
+            throw new Error("UserPicker组件设置为多选模式(multiple)时，v-model必须绑定UserReference数组")
+        }
+        const index = selectedUsers.value.findIndex(su => su.id == u.id);
+        if (index < 0) {
+            if (props.maxSelect > 0 && selectedUsers.value.length >= props.maxSelect) {
+                ElMessage({
+                    message: `已超过最大选择数量 ${props.maxSelect}`,
+                    plain: true,
+                    type: 'warning',
+                })
+                return;
+            }
+            selectedUsers.value.push(u);
+        } else {
+            selectedUsers.value.splice(index, 1);
+        }
+    } else {
+        if (Array.isArray(selectedUsers.value)) {
+            throw new Error("UserPicker组件设置为单选模式时，v-model必须绑定UserReference对象或者null")
+        }
+        if(selectedUsers.value!==null&&u.id===selectedUsers.value.id){
+            selectedUsers.value = null;
+        }else{
+            selectedUsers.value = u;
+        }
+    }
+}
+
+
+function onPopoverShow() {
+    if (props.realmId) {
+        queryParams.value.realmId = props.realmId
+    }
+    if (queryParams.value.name && queryParams.value.name.length > minLengthToTriggerUserQuery) {
+        queryParams.value.name = undefined;
+    }
+    const builder = useUserQueryBuilder();
+    if (props.customFilter) {
+        const qUser = builder.getQEntity();
+        builder.and(props.customFilter(qUser));
+    }
+    api.getBookmarkedUsers(builder.build()).then(r => {
+        users.value = r;
+    })
+    setTimeout(() => {
+        inputSearchText.value?.focus();
+    }, 300)
+}
+
+function onPopoverHide() {
+    popoverVisible.value = false
+    btn.value?.$el.focus();
+}
+
+function onSaveToCustomGroupClick() {
+    dlgCustomGroupManager.value?.show();
+}
+
+function onDeselected(uid?: string) {
+    if (props.disabled) {
+        return;
+    }
+    if (Array.isArray(selectedUsers.value)) {
+        const index = selectedUsers.value.findIndex(su => su.id == uid);
+        if (index >= 0) {
+            selectedUsers.value.splice(index, 1)
+        }
+    } else {
+        selectedUsers.value = null;
+    }
+}
+
+function onInputArrowDown() {
+    userList.value.scrollDown();
+    inputSearchText.value?.focus();
+}
+
+function onInputArrowUp() {
+    userList.value.scrollUp();
+    inputSearchText.value?.focus();
+}
+
+function onInputKeyEnter() {
+    switchUserSelect(users.value[userList.value?.activeIndex]);
+}
+
+function popup() {
+    if (props.disabled) {
+        return;
+    }
+    popoverVisible.value = true;
+}
+
+function selectAll() {
+    const arr = (
+        selectedUsers.value as UserReference[]
+    );
+    const availableUsers = users.value.filter(u => !arr.some(su => su.id === u.id));
+    if (props.maxSelect > 0) {
+        const remaining = props.maxSelect - arr.length;
+        if (remaining > 0) {
+            arr.push(...availableUsers.slice(0, remaining));
+        }
+    } else {
+        arr.push(...availableUsers);
+    }
+}
+
+function clearSelection() {
+    if (props.multiple) {
+        selectedUsers.value = [];
+    } else {
+        selectedUsers.value = null;
+    }
+}
+
+function onArrowKeyDown() {
+    inputSearchText.value?.focus();
+}
+
+const selectedForBinding = computed(() => {
+    if (props.multiple && Array.isArray(selectedUsers.value)) {
+        return selectedUsers.value;
+    } else if (!props.multiple && !Array.isArray(selectedUsers.value)) {
+        if (selectedUsers.value) {
+            return [selectedUsers.value as UserReference];
+        } else {
+            return [] as UserReference[];
+        }
+    } else {
+        throw new Error("UserPicker组件设置为多选模式(multiple)时，v-model必须绑定UserReference数组")
+    }
+})
+
+function showUserSelectDialog() {
+    if (props.disabled) {
+        return;
+    }
+    dialogUserSelector.value?.show();
+    popoverVisible.value = false;
+}
+
+function handleMouseOver() {
+    if (props.disabled) {
+        return;
+    }
+    popoverVisible.value = true
+}
+
+
+const selectedUsersForRender = computed(() => selectedForBinding.value.slice(0, props.maxShowCount))
+
+
+
+watch(()=>props.classificationLevel, ()=>{
+    queryParams.value.classificationLevel = props.classificationLevel
+})
+
+</script>
+
+<template>
+    <ja-scrollbar :max-height="props.maxHeight" :height="props.height" v-bind="$attrs"
+                  style="overflow-x: hidden;">
+        <div class="ja-user-picker__root" v-shortcut:[props.shortcut]="!props.disabled ? popup : undefined">
+
+            <el-popover ref="bookmarkDropdown" @show="onPopoverShow" @hide="onPopoverHide"
+                        v-model:visible="popoverVisible"
+                        width="auto" teleported
+                        :trigger="props.trigger"
+                        :disabled="props.disabled"
+                >
+                <template #reference>
+                    <div style="display: flex;align-items: center;">
+                        <slot
+                            v-if="$slots.default"
+                            name="default"></slot>
+                        <el-button v-else circle :icon="Plus" :size="'small'" ref="btn"
+                                   :disabled="props.disabled"
+                                   @mouseover="handleMouseOver">
+                        </el-button>
+                    </div>
+
+                </template>
+                <template #default>
+                    <div class="ja-user-picker-bookmark__dropdown">
+                        <div
+                            style="width: 100%; display: flex; align-content: center; justify-content: end;  margin-bottom: 4px;">
+                            <el-space style="flex:auto">
+                                <ja-button circle size="small" @click="showUserSelectDialog" plain
+                                           type="primary" tooltip="对话框筛选(大批量选择)"
+                                           shortcut="Ctrl+Alt+I" :icon="Notebook">
+                                </ja-button>
+                                <ja-button circle size="small" @click="clearSelection" type="danger"
+                                           plain :icon="Delete"
+                                           tooltip="清空选择" shortcut="Alt+C">
+                                </ja-button>
+                                <ja-button circle size="small" @click="selectAll" type="success"
+                                           plain :icon="Finished"
+                                           tooltip="全选(已加载的数据)" shortcut="Ctrl+A"
+                                           v-if="props.multiple">
+                                </ja-button>
+                                <ja-button circle size="small" @click="onSaveToCustomGroupClick"
+                                           type="warning" :icon="Setting" plain
+                                           tooltip="将已选中用户保存为自定义组，方便以后选择使用">
+                                </ja-button>
+                            </el-space>
+                            <div style="color: var(--el-color-info-light-5);">
+                                弹出快捷键：{{ props.shortcut }}
+                            </div>
+                        </div>
+                        <el-input v-model="queryParams.name" ref="inputSearchText"
+                                  :suffix-icon="Search"
+                                  placeholder="请输入拼音名、姓名或手机号查询"
+                                  autocomplete="off"
+                                  @keydown.enter="onInputKeyEnter"
+                                  @keydown.up.stop.prevent="onInputArrowUp"
+                                  @keydown.down.stop.prevent="onInputArrowDown">
+                        </el-input>
+
+                        <div class="dropdown-header">
+                            <el-text>
+                                <el-icon
+                                    v-if="queryParams.name && queryParams.name.length > minLengthToTriggerUserQuery">
+                                    <Search></Search>
+                                </el-icon>
+                                <el-icon v-else color="#FFBF29">
+                                    <StarFilled></StarFilled>
+                                </el-icon>
+                                {{
+                                    queryParams.name && queryParams.name.length
+                                    > minLengthToTriggerUserQuery ? "查询结果" : "常用人员"
+                                }}
+                            </el-text>
+                        </div>
+                        <ja-user-list
+                            ref="userList"
+                            :total="queryResult.total"
+                            :empty-text="queryParams.name && queryParams.name.length > minLengthToTriggerUserQuery ? undefined : '无可选常用人员'"
+                            :page-size="pageParams.pageSize"
+                            :loading="loading"
+                            :users="users"
+                            :height="300"
+                            v-model="selectedUsers"
+                            v-model:page="pageParams.currentPage"
+                            :multiple="props.multiple"
+                            :maxSelect="props.maxSelect"
+                            @item-clicked="onArrowKeyDown"
+                            @arrow-key-down="onArrowKeyDown"></ja-user-list>
+                    </div>
+                </template>
+            </el-popover>
+            <div v-if="props.showUserTag" class="ja-user-picker__tag-container">
+                <ja-user-info-tag  v-for="u in selectedUsersForRender" :key="u.id" :user-id="u.id"
+                                  :full-name="u.fullName" :closable="!props.disabled" :has-avatar="u.hasAvatar"
+                                  @closed="onDeselected">
+                </ja-user-info-tag>
+                <div class="more-tag" v-if="selectedForBinding.length > props.maxShowCount">
+                    +{{ selectedForBinding.length - props.maxShowCount }}人
+                </div>
+                <div v-if="selectedForBinding.length === 0">
+                    <el-text type="info"> &lt;暂无选中人员&gt;</el-text>
+                </div>
+            </div>
+
+            <ja-user-select-dialog ref="dialogUserSelector"
+                                   :multiple="props.multiple"
+                                   :realm-id="localRealmId"
+                                   :classificationLevel="props.classificationLevel"
+                                   :customFilter="props.customFilter"
+                                   :maxSelect="props.maxSelect"
+                                   v-model="selectedUsers"></ja-user-select-dialog>
+        </div>
+    </ja-scrollbar>
+    <custom-group-manager ref="dlgCustomGroupManager"
+                          :users="Array.isArray(selectedUsers)? selectedUsers as UserReference[] : (selectedUsers ? [selectedUsers] : null)"></custom-group-manager>
+</template>
+
+<style scoped lang="scss">
+.ja-user-picker__root {
+    display: flex;
+    //flex-wrap: wrap;
+    justify-content: left;
+    //align-items: center;
+    gap: 8px;
+    padding: 8px 0;
+    .ja-user-picker__tag-container{
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: left;
+        align-items: center;
+        gap: 4px;
+    }
+    .more-tag {
+        border-radius: 28px;
+        height: 28px;
+        padding: 2px 5px;
+        background-color: #E8F5FF;
+        color: #00164D;
+        border: 1px solid #C1CCD7;
+    }
+}
+
+:deep(.el-popover) {
+    padding: 0 !important;
+}
+
+.ja-user-picker-bookmark__dropdown {
+    padding: 0;
+    margin: 0;
+
+    .dropdown-header {
+        padding: 8px 0;
+        width: 280px;
+        cursor: default;
+        font-weight: 600;
+
+        .el-text {
+            font-weight: 600;
+        }
+    }
+
+}
+</style>

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

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