@xuekl/cli-components 1.9.145 → 1.9.146

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,17 @@ const filterMethod = (val: any) => {
     }
 }
 
+const visibleChange = (visible: boolean) => {
+    if (isDisplaySelectedDataFirst) {
+        if (visible) {
+            list.value = list.value.sort((a) => {
+                return selectData.value && (Array.isArray(selectData.value) ? selectData.value.includes(a.dictValue) : selectData.value === a.dictValue) ? -1 : 1
+            })
+        }
+    }
+    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,18 @@ const valChangeHandle = (val: string | number | string[] | number[]) => {
     }
 }
 
+const visibleChange = (visible: boolean) => {
+    if (isDisplaySelectedDataFirst) {
+        if (visible) {
+            const valueTarget = config?.valueTarget
+            dataList.value = dataList.value.sort((a) => {
+                return selectData.value && (Array.isArray(selectData.value) ? selectData.value.includes(a[valueTarget]) : selectData.value === a[valueTarget]) ? -1 : 1
+            })
+        }
+    }
+    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.146",
   "description": "element-plus 组件二次封装",
   "main": "index.ts",
   "scripts": {