@tplc/wot 0.1.64 → 0.1.65

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.65](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.1.64...v0.1.65) (2025-03-10)
+
 ### [0.1.64](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.3.75...v0.1.64) (2025-03-10)
 
 

package/components/wd-select-picker/types.ts

@@ -13,10 +13,8 @@ export type SelectPickerType = 'checkbox' | 'radio' | 'button'
 export type SelectPickerRemote = {
   action: (
     search: string,
-    params: { pageNum: number; pageSize: number },
+    params: { pageSearch: { page: number; limit: number } },
   ) => Promise<Record<string, any>[]>
-  valueKey?: string
-  labelKey?: string
   pageSize?: number
   isPage?: boolean
 }
@@ -107,6 +105,8 @@ export const selectPickerProps = {
   customValueClass: makeStringProp(''),
   /** 是否显示确认按钮（radio类型生效），默认值为：true */
   showConfirm: makeBooleanProp(true),
+  /** 默认展示文案 */
+  defaultLabel: String,
 }
 export type SelectPickerProps = ExtractPropTypes<typeof selectPickerProps>
 

package/components/wd-select-picker/wd-select-picker.vue

@@ -58,6 +58,7 @@
         :placeholder="filterPlaceholder || translate('filterPlaceholder')"
         hide-cancel
         placeholder-left
+        @search="handleFilterSearch"
         @change="handleFilterChange"
       />
 
@@ -146,7 +147,7 @@
               :id="'radio' + item[valueKey]"
             >
               <wd-radio :value="item[valueKey]" :disabled="item.disabled">
-                <block v-if="filterable && filterVal">
+                <block v-if="filterable && filterVal && !remoteConfig">
                   <block v-for="text in item[labelKey]" :key="text.label">
                     <text
                       :clsss="`${text.type === 'active' ? 'wd-select-picker__text-active' : ''}`"
@@ -191,7 +192,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { getCurrentInstance, onBeforeMount, ref, watch, nextTick, computed } from 'vue'
+import { getCurrentInstance, onBeforeMount, ref, watch, nextTick, computed, watchEffect } from 'vue'
 import { useCell } from '../composables/useCell'
 import { getRect, isArray, isDef, isFunction, requestAnimationFrame } from '../common/util'
 import { useParent } from '../composables/useParent'
@@ -215,34 +216,50 @@ const cell = useCell()
 const pageNum = ref<number>(1)
 const noMore = ref<boolean>(false)
 const innerLoading = ref<boolean>(false)
-const innerColumns = ref<Array<Record<string, any>>>([])
-const showValue = computed(() => {
+const currentColumns = ref<Record<string, any>>()
+const showValue = ref<string>('')
+
+watchEffect(() => {
   const value = valueFormat(props.modelValue)
-  let showValueTemp: string = ''
 
   if (props.displayFormat) {
-    showValueTemp = props.displayFormat(value, props.columns)
+    showValue.value = props.displayFormat(value, props.columns || filterColumns.value)
   } else {
     const { type, labelKey } = props
     if (type === 'checkbox') {
       const selectedItems = (isArray(value) ? value : []).map((item) => {
         return getSelectedItem(item)
       })
-      showValueTemp = selectedItems
+      showValue.value = selectedItems
         .map((item) => {
           return item[labelKey]
         })
         .join(', ')
     } else if (type === 'radio') {
       const selectedItem = getSelectedItem(value as string | number | boolean)
-      showValueTemp = selectedItem[labelKey]
+      showValue.value = selectedItem[labelKey] || currentColumns.value?.[labelKey]
+      if (selectedItem[labelKey]) {
+        currentColumns.value = selectedItem
+      }
     } else {
-      showValueTemp = value as string
+      showValue.value = value as string
     }
   }
-  return showValueTemp
 })
-
+watch(
+  () => props.defaultLabel,
+  (defaultLabel) => {
+    if (defaultLabel) {
+      currentColumns.value = {
+        [props.valueKey]: props.modelValue,
+        [props.labelKey]: defaultLabel,
+      }
+    }
+  },
+  {
+    immediate: true,
+  },
+)
 watch(
   () => props.modelValue,
   (newValue) => {
@@ -328,18 +345,17 @@ const isRequired = computed(() => {
 /** 获取远程数据 */
 const getRemoteData = async () => {
   innerLoading.value = true
-  const res = await props.remoteConfig?.action(filterVal.value, {
-    pageNum: pageNum.value,
-    pageSize: props.remoteConfig?.pageSize || 10,
+  const list = await props.remoteConfig?.action(filterVal.value, {
+    pageSearch: {
+      page: pageNum.value,
+      limit: props.remoteConfig?.pageSize || 10,
+    },
   })
 
-  if (res) {
-    if (res.length) {
-      pageNum.value++
-      innerColumns.value = [...innerColumns.value, ...res]
-    } else {
-      noMore.value = true
-    }
+  if (list) {
+    filterColumns.value = pageNum.value === 1 ? list : [...filterColumns.value, ...list]
+    pageNum.value++
+    noMore.value = !list.length
   }
   innerLoading.value = false
 }
@@ -349,9 +365,10 @@ const handleScrollToLower = () => {
 }
 onBeforeMount(() => {
   selectList.value = valueFormat(props.modelValue)
-  filterColumns.value = props.columns
   if (props.remoteConfig) {
     getRemoteData()
+  } else {
+    filterColumns.value = props.columns
   }
 })
 
@@ -410,8 +427,8 @@ function noop() {}
 
 function getSelectedItem(value: string | number | boolean) {
   const { valueKey, labelKey, columns } = props
-
-  const selecteds = columns.filter((item) => {
+  const list = columns.length > 0 ? columns : filterColumns.value
+  const selecteds = list.filter((item) => {
     return item[valueKey] === value
   })
 
@@ -507,6 +524,9 @@ function getFilterText(label: string, filterVal: string) {
 }
 
 function handleFilterChange({ value }: { value: string }) {
+  if (props.remoteConfig) {
+    return
+  }
   if (value === '') {
     filterColumns.value = []
     filterVal.value = value
@@ -519,6 +539,14 @@ function handleFilterChange({ value }: { value: string }) {
   }
 }
 
+function handleFilterSearch(value: string) {
+  if (!props.remoteConfig) {
+    return
+  }
+  pageNum.value = 1
+  getRemoteData()
+}
+
 function formatFilterColumns(columns: Record<string, any>[], filterVal: string) {
   const filterColumnsTemp = columns.filter((item) => {
     return item[props.labelKey].indexOf(filterVal) > -1

package/package.json

@@ -1,7 +1,7 @@
 {
   "id": "@tplc/wot",
   "name": "@tplc/wot",
-  "version": "0.1.64",
+  "version": "0.1.65",
   "keywords": [
     "wot-design-uni",
     "国际化",

package/types/components/wd-select-picker/types.d.ts

@@ -5,12 +5,12 @@ export type SelectPickerRemote = {
   action: (
     search: string,
     params: {
-      pageNum: number
-      pageSize: number
+      pageSearch: {
+        page: number
+        limit: number
+      }
     },
   ) => Promise<Record<string, any>[]>
-  valueKey?: string
-  labelKey?: string
   pageSize?: number
   isPage?: boolean
 }
@@ -178,6 +178,8 @@ export declare const selectPickerProps: {
     type: BooleanConstructor
     default: boolean
   }
+  /** 默认展示文案 */
+  defaultLabel: StringConstructor
   customStyle: {
     type: PropType<string>
     default: string

package/types/components/wd-select-picker/wd-select-picker.vue.d.ts

@@ -125,6 +125,7 @@ declare const _default: __VLS_WithTemplateSlots<
         type: BooleanConstructor
         default: boolean
       }
+      defaultLabel: StringConstructor
       customStyle: {
         type: import('vue').PropType<string>
         default: string
@@ -278,6 +279,7 @@ declare const _default: __VLS_WithTemplateSlots<
           type: BooleanConstructor
           default: boolean
         }
+        defaultLabel: StringConstructor
         customStyle: {
           type: import('vue').PropType<string>
           default: string