perf: 优化会员选择器

resources/assets/js/components/UserSelect.vue

@@ -1,9 +1,11 @@
 <template>
     <div class="common-user-select" :class="warpClass">
         <ul v-if="!module">
-            <li v-for="userid in values" v-if="userid" @click="onSelection">
+            <template v-for="userid in values">
+                <li v-if="userid" :key="userid" @click="onSelection">
                     <UserAvatar :userid="userid" :size="avatarSize" :show-icon="avatarIcon" :show-name="avatarName"/>
                 </li>
+            </template>
             <li v-if="addIcon || values.length === 0" class="add-icon" :style="addStyle" @click="onSelection"></li>
         </ul>
 
@@ -24,7 +26,9 @@
                         <span ref="headerTitle" @click="onClickTitle">{{ localTitle }}</span>
                     </div>
                     <div ref="headerSubmit" class="user-modal-submit" @click="onSubmit">
-                        <div v-if="submittIng > 0" class="submit-loading"><Loading /></div>
+                        <div v-if="submittIng > 0" class="submit-loading">
+                            <Loading/>
+                        </div>
                         {{ $L('确定') }}
                         <template v-if="selects.length > 0">
                             ({{ selects.length }}<span v-if="multipleMax">/{{ multipleMax }}</span>)
@@ -41,7 +45,7 @@
             <div class="user-modal-search">
                 <Scrollbar ref="selected" class="search-selected" v-if="selects.length > 0" enable-x :enable-y="false">
                     <ul>
-                        <li v-for="item in formatSelect(selects)" :data-id="item.userid" @click.stop="onRemoveItem(item.userid)">
+                        <li v-for="item in formatSelect(selects)" :key="item.userid" :data-id="item.userid" @click.stop="onRemoveItem(item.userid)">
                             <template v-if="item.type=='group'">
                                 <EAvatar v-if="item.avatar" class="img-avatar" :src="item.avatar" :size="32"></EAvatar>
                                 <i v-else-if="item.group_type=='department'" class="taskfont icon-avatar department">&#xe75c;</i>
@@ -76,7 +80,8 @@
                 <li
                     v-for="item in switchItems" :key="item.key"
                     :class="{active:switchActive===item.key}"
-                    @click="switchActive=item.key">{{ $L(item.label) }}</li>
+                    @click="switchActive=item.key">{{ $L(item.label) }}
+                </li>
             </ul>
 
             <!-- 列表 -->
@@ -85,8 +90,9 @@
                 <ul v-if="switchActive == 'project'" class="user-modal-project">
                     <li
                         v-for="item in lists"
+                        :key="item.id"
                         :class="selectClass(item.userid_list)"
-                        @click="onSelectProject(item.userid_list)">
+                        @click="onSelectMultiple(item.userid_list)">
                         <Icon class="user-modal-icon" :type="selectIcon(item.userid_list)"/>
                         <div class="user-modal-avatar">
                             <i class="taskfont icon-avatar">&#xe6f9;</i>
@@ -102,19 +108,38 @@
                     </li>
                 </ul>
                 <!-- 会员、会话 -->
-                <ul v-else>
+                <template v-else>
-                    <li
+                    <ul v-if="showSelectAll || switchActive=='contact'" class="sticky-top">
-                        v-if="showSelectAll"
+                        <li :class="selectClass('all')">
-                        :class="selectClass('all')"
+                            <div v-if="showSelectAll" @click="onSelectAll" class="user-modal-label">
-                        @click="onSelectAll">
                                 <Icon class="user-modal-icon" :type="selectIcon('all')"/>
-                        <div class="user-modal-all">{{$L('全选')}}</div>
+                                <span>{{ $L('全选') }}</span>
+                            </div>
+                            <div v-if="switchActive=='contact'" class="user-modal-view">
+                                <RadioGroup v-model="contactViewMode" type="button" button-style="solid">
+                                    <Radio label="list">{{ $L('列表视图') }}</Radio>
+                                    <Radio label="department">{{ $L('部门视图') }}</Radio>
+                                </RadioGroup>
+                            </div>
                         </li>
+                    </ul>
+                    <template v-for="items in convertTwoList(lists)">
+                        <ul v-if="items.name !== null" :key="`${items.id}-sticky`" class="sticky-top">
+                            <li :class="selectClass(items.userid_list)">
+                                <div @click="onSelectMultiple(items.userid_list)" class="user-modal-label">
+                                    <Icon class="user-modal-icon" :type="selectIcon(items.userid_list)"/>
+                                    <span>{{ items.name }}</span>
+                                </div>
+                                <div class="user-modal-view">{{ items.list.length }} {{ $L('部门成员') }}</div>
+                            </li>
+                        </ul>
+                        <ul :key="`${items.id}-list`">
                             <li
-                        v-for="item in lists"
+                                v-for="item in items.list"
+                                :key="item.userid"
                                 :class="{
                                     selected: selects.includes(item.userid),
-                            disabled: isNoChoice(item.userid)
+                                    disabled: isNoChoice(item.userid),
                                 }"
                                 @click="onSelectItem(item)">
                                 <Icon v-if="selects.includes(item.userid)" class="user-modal-icon" type="ios-checkmark-circle"/>
@@ -134,12 +159,16 @@
                                 <UserAvatar v-else class="user-modal-avatar" :userid="item.userid" :size="40" show-name/>
                             </li>
                         </ul>
+                    </template>
+                </template>
             </Scrollbar>
             <!-- 空 -->
             <div v-else class="user-modal-empty">
                 <Loading v-if="waitIng > 0"/>
                 <template v-else>
-                    <div class="empty-icon"><Icon type="ios-cafe-outline" /></div>
+                    <div class="empty-icon">
+                        <Icon type="ios-cafe-outline"/>
+                    </div>
                     <div class="empty-text">{{ $L('暂无结果') }}</div>
                 </template>
             </div>
@@ -289,6 +318,7 @@ export default {
                 {key: 'project', label: '项目成员'},
             ],
             switchActive: 'recent',
+            contactViewMode: 'list',
 
             loadIng: 0,             // 搜索框等待效果
             waitIng: 0,             // 页面等待效果
@@ -309,6 +339,9 @@ export default {
             searchCache: [],
         }
     },
+    async mounted() {
+        this.contactViewMode = await $A.IDBString("userSelectContactViewMode", this.contactViewMode)
+    },
     watch: {
         value: {
             handler(value) {
@@ -354,6 +387,10 @@ export default {
             this.searchBefore()
         },
 
+        contactViewMode(value) {
+            $A.IDBSet("userSelectContactViewMode", value)
+        },
+
         isFullscreen(value) {
             if (value) {
                 this.upTitleWidth()
@@ -473,6 +510,48 @@ export default {
             })
         },
 
+        convertTwoList(lists) {
+            if (this.switchActive === 'contact' && this.contactViewMode === 'department') {
+                const departmentMap = new Map()
+                const noDepartmentMembers = []
+                // 部门视图
+                lists.forEach(item => {
+                    if (item.department_info && item.department_info.length > 0) {
+                        // 用户可能属于多个部门
+                        item.department_info.forEach(dept => {
+                            if (!departmentMap.has(dept.id)) {
+                                departmentMap.set(dept.id, {
+                                    id: dept.id,
+                                    name: dept.name,
+                                    list: [],
+                                })
+                            }
+                            departmentMap.get(dept.id).list.push(item)
+                        })
+                    } else {
+                        // 没有部门信息的成员
+                        noDepartmentMembers.push(item)
+                    }
+                })
+                // 处理默认部门（未分组）
+                if (noDepartmentMembers.length > 0) {
+                    departmentMap.set(0, {
+                        id: 0,
+                        name: this.$L('默认部门'),
+                        list: noDepartmentMembers,
+                    })
+                }
+                return Array.from(departmentMap.values()).map(item => ({...item, userid_list: item.list.map(item => item.userid)}))
+            }
+            return [
+                {
+                    id: 0,
+                    name: null,
+                    list: lists,
+                },
+            ]
+        },
+
         selectIcon(value) {
             if (value === 'all') {
                 return this.isSelectAll ? 'ios-checkmark-circle' : 'ios-radio-button-off';
@@ -584,7 +663,8 @@ export default {
                         disable: this.showDisable && key ? 2 : 0,
                     },
                     page,
-                    pagesize: 50
+                    pagesize: 100,
+                    with_department: 1,
                 },
             }).then(({data}) => {
                 if (this.searchKey != key) {
@@ -695,25 +775,6 @@ export default {
             })
         },
 
-        onSelectAll() {
-            if (this.isSelectAll) {
-                this.selects = $A.cloneJSON(this.uncancelable)
-                return
-            }
-            this.lists.some(item => {
-                if (this.isDisabled(item.userid)) {
-                    return false
-                }
-                if (this.multipleMax && this.selects.length >= this.multipleMax) {
-                    $A.messageWarning("已超过最大选择数量")
-                    return true
-                }
-                if (!this.selects.includes(item.userid)) {
-                    this.selects.push(item.userid)
-                }
-            })
-        },
-
         onSelectItem({userid}) {
             if (this.selects.includes(userid)) {
                 if (this.isUncancelable(userid)) {
@@ -739,7 +800,7 @@ export default {
             }
         },
 
-        onSelectProject(userid_list) {
+        onSelectMultiple(userid_list) {
             switch (this.selectIcon(userid_list)) {
                 case 'ios-checkmark-circle':
                     // 去除
@@ -765,6 +826,25 @@ export default {
             }
         },
 
+        onSelectAll() {
+            if (this.isSelectAll) {
+                this.selects = $A.cloneJSON(this.uncancelable)
+                return
+            }
+            this.lists.some(item => {
+                if (this.isDisabled(item.userid)) {
+                    return false
+                }
+                if (this.multipleMax && this.selects.length >= this.multipleMax) {
+                    $A.messageWarning("已超过最大选择数量")
+                    return true
+                }
+                if (!this.selects.includes(item.userid)) {
+                    this.selects.push(item.userid)
+                }
+            })
+        },
+
         onRemoveItem(userid) {
             if (this.isUncancelable(userid)) {
                 return

resources/assets/sass/components/user-select.scss

@@ -70,6 +70,7 @@
                 bottom: 0;
                 left: 100px;
                 right: 100px;
+
                 > span {
                     text-align: center;
                     font-size: 16px;
@@ -234,10 +235,26 @@
                 flex: 1;
                 display: flex;
                 flex-direction: column;
-                max-height: 400px;
+                min-height: 300px;
+                max-height: calc(100vh - 280px);
 
                 ul {
-                    padding: 16px 24px;
+                    padding: 8px 24px;
+
+                    &:first-child {
+                        padding-top: 16px;
+                    }
+
+                    &:last-child {
+                        padding-bottom: 16px;
+                    }
+
+                    &.sticky-top {
+                        position: sticky;
+                        top: 0;
+                        background-color: #ffffff;
+                        z-index: 10;
+                    }
 
                     &.user-modal-project {
                         > li {
@@ -303,10 +320,12 @@
                         &.disabled {
                             color: #c5c8ce;
                             cursor: not-allowed;
+
                             &:hover {
                                 color: #c5c8ce;
                                 cursor: not-allowed;
                             }
+
                             .user-modal-icon {
                                 color: #c5c8ce;
                             }
@@ -319,9 +338,24 @@
                             color: rgba($primary-desc-color, 0.7);
                         }
 
-                        .user-modal-all {
+                        .user-modal-label {
+                            flex: 1;
+                            display: flex;
+                            align-items: center;
+                            justify-content: flex-start;
+
+                            > span {
                                 font-size: 15px;
                                 font-weight: 500;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                white-space: nowrap;
+                            }
+                        }
+
+                        .user-modal-view {
+                            flex-shrink: 0;
+                            margin-left: 12px;
                         }
 
                         .user-modal-avatar {

resources/assets/sass/dark.scss

@@ -4,17 +4,20 @@ body.dark-mode-reverse {
     .ivu-btn-grey,
     .ivu-btn-error,
     .ivu-btn-warning,
-    .common-right-bottom .common-right-bottom-link {
+    .common-right-bottom .common-right-bottom-link,
+    .ivu-radio-group-button-solid .ivu-radio-wrapper-checked:not(.ivu-radio-wrapper-disabled) {
         color: #000;
     }
 
     .ivu-btn-grey {
         background-color: #c7c7c7;
         border-color: #c7c7c7;
+
         &:hover {
             background-color: #d5d5d5;
             border-color: #d5d5d5;
         }
+
         &:focus {
             box-shadow: none;
         }
@@ -23,10 +26,12 @@ body.dark-mode-reverse {
     .ivu-btn-error {
         background-color: #ff9d84;
         border-color: #ff9d84;
+
         &:hover {
             background-color: #ffbdab;
             border-color: #ffbdab;
         }
+
         &:focus {
             box-shadow: none;
         }
@@ -260,9 +265,11 @@ body.dark-mode-reverse {
                                         background-color: #d34521;
                                         border-color: #d34521;
                                     }
+
                                     .ivu-btn-grey {
                                         background-color: #9e9e9e;
                                         border-color: #969696;
+
                                         &:hover {
                                             background-color: #959595;
                                             border-color: #959595;
@@ -585,12 +592,14 @@ body.dark-mode-reverse {
                         color: #000000;
                     }
                 }
+
                 &.cancel {
                     .record-remove {
                         background-color: #ff6565;
                         color: #000000;
                     }
                 }
+
                 .record-convert,
                 .record-remove {
                     color: #000000;
@@ -609,6 +618,7 @@ body.dark-mode-reverse {
 
     .chat-input-convert-transfer {
         background-color: rgba(255, 255, 255, 0.9);
+
         .convert-box {
             .convert-body {
                 .convert-content {
@@ -621,14 +631,17 @@ body.dark-mode-reverse {
                     }
                 }
             }
+
             .convert-footer {
                 color: #000000;
+
                 > li {
                     > i {
                         &.send,
                         &.error {
                             background: #000000;
                         }
+
                         &.send {
                             color: #0a7600;
                         }
@@ -711,6 +724,7 @@ body.dark-mode-reverse {
                                     .icon-avatar {
                                         color: #1c1917;
                                     }
+
                                     .item-content {
                                         .item-desc {
                                             .desc-tag {