自动完成控件

src/components/common-autocomplete/index.vue

@@ -105,14 +105,19 @@ const emit = defineEmits(['update:modelValue', 'onSelectData', 'update:page', 'u
 
 const keywords = ref(props.autocompleteLabel)
 const lastAutocompleteLabel = ref(props.autocompleteLabel)
-const pageAttrs = { layout: 'total, prev, pager, next' }
+const pageAttrs = { layout: 'total, prev, pager, next', small: true }
 const dataList = ref([])
 const popoverVisible = ref(false)
 const autocompletePopover = ref()
 const pageConfig = useVModel(props, 'page', emit)
-
-const onInputKeywords = debounce((click) => {
+/**
+ * @type {function(boolean?)}
+ */
+const onInputKeywords = debounce((input) => {
   if (!props.disabled && !props.readonly) {
+    if (input && pageConfig.value) {
+      pageConfig.value = { ...pageConfig.value, pageNumber: 1 }
+    }
     const val = keywords.value
     if (val || props.emptySearchEnabled) {
       popoverVisible.value = true
@@ -123,7 +128,7 @@ const onInputKeywords = debounce((click) => {
         }
       })
     }
-    if (!val && !click) {
+    if (!val && input) {
       onSelectData()
     }
   }
@@ -228,8 +233,8 @@ onKeyStroke('Enter', e => {
           :disabled="disabled"
           :readonly="readonly"
           v-bind="inputAttrs"
-          @input="onInputKeywords()"
-          @click="onInputKeywords(true)"
+          @input="onInputKeywords(true)"
+          @click="onInputKeywords(false)"
         />
       </template>
       <template #default>
@@ -243,7 +248,7 @@ onKeyStroke('Enter', e => {
           :data="dataList"
           :page-attrs="pageAttrs"
           @row-click="onSelectData($event)"
-          @current-page-change="onInputKeywords()"
+          @current-page-change="onInputKeywords(false)"
         >
           <template
             v-for="column in autocompleteConfig.columns"

src/components/common-table/common-table-column.vue

@@ -16,6 +16,8 @@
  */
 /**
  * 配置信息
+ * @property {CommonTableColumn[]} columns 表格显示列配置
+ * @buttonSize {''|'large'|'small'|'default'}
  */
 const props = defineProps({
   /**
@@ -40,7 +42,7 @@ const props = defineProps({
   <el-table-column
     v-if="!column.isOperation"
     :label="column.label || $t(column.labelKey)"
-    :property="column.property"
+    :prop="column.prop||column.property"
     :width="column.width"
     v-bind="column.attrs"
     :formatter="column.formatter"

src/views/tools/TestPage.vue

@@ -1,35 +1,38 @@
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useDefaultPage } from '@/config'
 import { loadUsersResult } from '@/services/user/UserService'
+import { $i18nMsg } from '@/messages'
 
 const modelIcon = ref('Apple')
 const modelAuto = ref('99999')
 const modelAutoLabel = ref('Gary Fu')
 const autoPage = ref(useDefaultPage(8))
-const autocompleteConfig = {
-  columns: [{
-    label: '中文名',
-    property: 'nameCn'
-  }, {
-    label: '性别',
-    property: 'gender',
-    slot: 'gender'
-  }, {
-    label: '地址',
-    property: 'address'
-  }],
-  searchMethod (query, cb) {
-    loadUsersResult({ page: autoPage.value })
-      .then(result => {
-        const data = {
-          page: result.resultData.page,
-          items: result.resultData.userList
-        }
-        cb(data)
-      })
+const autocompleteConfig = computed(() => {
+  return {
+    columns: [{
+      label: $i18nMsg('姓名', 'Name'),
+      property: $i18nMsg('nameCn', 'nameEn')
+    }, {
+      label: $i18nMsg('性别', 'Gender'),
+      property: 'gender',
+      slot: 'gender'
+    }, {
+      label: $i18nMsg('地址', 'Address'),
+      property: 'address'
+    }],
+    searchMethod (query, cb) {
+      loadUsersResult({ page: autoPage.value })
+        .then(result => {
+          const data = {
+            page: result.resultData.page,
+            items: result.resultData.userList
+          }
+          cb(data)
+        })
+    }
   }
-}
+})
 </script>
 
 <template>
@@ -46,7 +49,7 @@ const autocompleteConfig = {
             v-model:page="autoPage"
             id-key="id"
             :label-key="$i18nMsg('nameCn', 'nameEn')"
-            empty-search-enabled
+            :empty-search-enabled="false"
             title="请选择用户"
             :autocomplete-config="autocompleteConfig"
           >