@xuekl/cli-components 1.9.145 → 1.9.147

package/XklDict.vue

@@ -2,11 +2,11 @@
     <div v-if="fakeRender && (!selectData || (selectData && !selectData.length))" class="fake-render el-input__wrapper"
         :class="{ 'el-select__wrapper is-disabled': disabled || readonly }" @click="updateRender">
         <span class="fs-14">{{ $attrs.placeholder
-            }}</span>
+        }}</span>
     </div>
     <el-select v-else style="width: 100%;" ref="XklDictRef" v-model="selectData" :automatic-dropdown="true"
-        :class="{ 'readony-input': readonly }" @change="changeHandle" :filterable="initFilterable"
-        :disabled="disabled || readonly" :filter-method="filterMethod">
+        :class="{ 'readony-input': readonly }" @visible-change="visibleChange" @change="changeHandle"
+        :filterable="initFilterable" :disabled="disabled || readonly" :filter-method="filterMethod">
         <el-option v-for="item in list" :key="item.dictValue" :label="item.dictLabel"
             :value="item.dictValue"></el-option>
     </el-select>
@@ -24,12 +24,13 @@ import { nextTick } from 'vue';
 interface DictItem {
     dictCode: string, dictLabel: string, dictValue: string | number
 }
-const props = defineProps(['config', 'filterable', 'readonly', 'disabled', 'modelValue', 'fake'])
-const emit = defineEmits(['update:label', 'itemChange', 'loaded', 'update:modelValue'])
+const props = defineProps(['config', 'filterable', 'readonly', 'disabled', 'modelValue', 'fake', 'displaySelectedDataFirst'])
+const emit = defineEmits(['update:label', 'itemChange', 'loaded', 'update:modelValue', 'visibleChange'])
 
-const { config, filterable, readonly, fake } = props
+const { config, filterable, readonly, fake, displaySelectedDataFirst } = props
 const list: Ref<DictItem[]> = ref([])
 
+const isDisplaySelectedDataFirst = displaySelectedDataFirst !== false
 const isFake = typeof fake === 'undefined' ? true : fake
 const fakeRender = ref(isFake)
 const XklDictRef: any = ref(null)
@@ -67,6 +68,37 @@ const filterMethod = (val: any) => {
     }
 }
 
+const visibleChange = (visible: boolean) => {
+    if (isDisplaySelectedDataFirst) {
+        if (visible) {
+            // ✅ 稳定排序逻辑：已选中的排前面，且两组内部都保留原数组顺序
+            list.value = list.value.sort((a, b) => {
+                // 1. 获取a、b的选中状态
+                const aIsSelected = selectData.value && (
+                    Array.isArray(selectData.value)
+                        ? selectData.value.includes(a.dictValue)
+                        : selectData.value === a.dictValue
+                );
+                const bIsSelected = selectData.value && (
+                    Array.isArray(selectData.value)
+                        ? selectData.value.includes(b.dictValue)
+                        : selectData.value === b.dictValue
+                );
+
+                // ✅ 核心稳定排序规则
+                if (aIsSelected && !bIsSelected) {
+                    return -1; // a选中、b未选 → a排前面
+                } else if (!aIsSelected && bIsSelected) {
+                    return 1;  // a未选、b选中 → b排前面
+                } else {
+                    return 0;  // 同为选中/同为未选 → 保持原有相对顺序【关键】
+                }
+            })
+        }
+    }
+    emit('visibleChange', visible)
+}
+
 const changeHandle = (val: string | number | string[] | number[]) => {
     if (Array.isArray(val)) {
         const values: (string | number)[] = val

package/XklSelect.vue

@@ -2,12 +2,12 @@
     <div v-if="fakeRender && (!selectData || (selectData && !selectData.length))" class="fake-render el-input__wrapper"
         :class="{ 'el-select__wrapper is-disabled': disabled || readonly }" @click="updateRender">
         <span class="fs-14">{{ $attrs.placeholder
-        }}</span>
+            }}</span>
     </div>
     <el-select v-else ref="XklSelectRef" :automatic-dropdown="true" v-model="selectData"
-        :class="{ 'readony-input': readonly }" style="width: 100%;" @change="changeHandle" :filterable="initFilterable"
-        :disabled="disabled || readonly" :filter-method="filterMethod" :allow-create="allowCreate"
-        :multiple-limit="multipleLimit" @focus="onClick()">
+        :class="{ 'readony-input': readonly }" style="width: 100%;" @visible-change="visibleChange"
+        @change="changeHandle" :filterable="initFilterable" :disabled="disabled || readonly"
+        :filter-method="filterMethod" :allow-create="allowCreate" :multiple-limit="multipleLimit" @focus="onClick()">
         <!-- <template v-if="createAtFirst && filterVal" #header>
             <div class="el-select-dropdown__item" @click="headerClick()">
                 <OptionComponent v-if="config && config.customOption" :item="creatingItem" />
@@ -49,9 +49,9 @@ interface OptionItem extends SelectItem {
     isChecked?: boolean
     isSpecial?: boolean
 }
-const props = defineProps(['config', 'list', 'modelValue', 'filterable', 'readonly', 'disabled', 'cache', 'allowCreate', 'multipleLimit', 'createAtFirst', 'fake'])
-const emit = defineEmits(['update:label', 'click', 'loaded', 'update:modelValue', 'itemChange'])
-const { config, list, filterable, readonly, cache, allowCreate, multipleLimit, createAtFirst, fake } = props
+const props = defineProps(['config', 'list', 'modelValue', 'filterable', 'readonly', 'disabled', 'cache', 'allowCreate', 'multipleLimit', 'createAtFirst', 'fake', 'displaySelectedDataFirst'])
+const emit = defineEmits(['update:label', 'click', 'loaded', 'update:modelValue', 'itemChange', 'visibleChange'])
+const { config, list, filterable, readonly, cache, allowCreate, multipleLimit, createAtFirst, fake, displaySelectedDataFirst } = props
 const appStore = useApp()
 
 const dataCahe = cache !== false
@@ -60,6 +60,7 @@ const dataList: Ref<OptionItem[]> = ref([])
 
 const initFilterable = ref(false)
 
+const isDisplaySelectedDataFirst = displaySelectedDataFirst !== false
 
 const isFake = typeof fake === 'undefined' ? true : fake
 const fakeRender = ref(isFake)
@@ -238,6 +239,39 @@ const valChangeHandle = (val: string | number | string[] | number[]) => {
     }
 }
 
+const visibleChange = (visible: boolean) => {
+    if (isDisplaySelectedDataFirst) {
+        if (visible) {
+            const valueTarget = config?.valueTarget;
+            // 无匹配字段则不排序，避免报错
+            if (!valueTarget) return;
+            // ✅ 稳定排序核心：a、b两两对比 + 同状态返回0 保持原顺序
+            dataList.value = dataList.value.sort((a, b) => {
+                // 获取当前项的匹配字段值
+                const aVal = a[valueTarget];
+                const bVal = b[valueTarget];
+                // 判断a/b的选中状态
+                const aIsSelected = selectData.value && (
+                    Array.isArray(selectData.value)
+                        ? selectData.value.includes(aVal)
+                        : selectData.value === aVal
+                );
+                const bIsSelected = selectData.value && (
+                    Array.isArray(selectData.value)
+                        ? selectData.value.includes(bVal)
+                        : selectData.value === bVal
+                );
+
+                // ✅ 排序规则：选中的排前面，同状态则保持原顺序
+                if (aIsSelected && !bIsSelected) return -1;
+                if (!aIsSelected && bIsSelected) return 1;
+                return 0;
+            });
+        }
+    }
+    emit('visibleChange', visible)
+}
+
 const changeHandle = (val: string | number | string[] | number[]) => {
     if (allowCreate && createAtFirst) {
         // 在自动创建时，第一条的点击事件是晚于change事件的，目前的使用场景是要早于change事件

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xuekl/cli-components",
-  "version": "1.9.145",
+  "version": "1.9.147",
   "description": "element-plus 组件二次封装",
   "main": "index.ts",
   "scripts": {