自动完成控件

src/assets/main.css

@@ -99,11 +99,36 @@ html, body, #app, .index-container {
 .form-edit-width-100 {
     width:100%
 }
-.autocomplete-table .el-table__cell{
+
+.common-autocomplete .el-popover__title{
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.common-autocomplete .autocomplete-table .el-table__cell{
     padding: 3px 0;
     cursor: pointer;
 }
 
+.common-autocomplete .el-tabs__nav-next, .el-tabs__nav-prev {
+    line-height: 30px;
+}
+
+.common-autocomplete .common-select-page .el-tabs__item {
+    height: 30px;
+}
+
+.common-autocomplete .common-select-page .common-select-page-btn {
+    overflow: hidden;
+    width: 100%;
+    padding: 0;
+    margin: 5px;
+}
+
+.common-autocomplete .common-select-page .el-tabs__content {
+    padding: 5px;
+}
+
 /**
  * slide-fade动画
  */

src/components/common-autocomplete/index.vue

@@ -5,6 +5,11 @@
  * @property {string} emptyMessage 没有数据的提示信息
  * @method searchMethod 搜索方法
  */
+/**
+ * @typedef {Object} CommonSelectPageOption 默认选择页面配置信息
+ * @property {[{ id:string, label:string }]} tabs 显示tabs配置
+ * @method searchMethod 搜索方法
+ */
 /**
  * @typedef {Object} CommonSelectPageOption 默认选择页配置
  */
@@ -25,11 +30,15 @@
  * @property {CommonPage} page 分页数据
  * @property {string} autocompleteWidth 宽度
  * @property {CommonSelectPageOption} selectPageConfig 分页
+ * @property {Number} colSize 显示几列
+ * @property {string} loadingText 加载提示loading
+ * @property {string} minHeight 高度自定义
  * @property {Object} inputAttrs 输入框配置项
  */
-import { nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { debounce } from 'lodash'
 import { onClickOutside, onKeyStroke, useVModel } from '@vueuse/core'
+import chunk from 'lodash/chunk'
 
 /**
  * @type {CommonAutocompleteProps}
@@ -65,7 +74,7 @@ const props = defineProps({
   },
   autocompleteWidth: {
     type: String,
-    default: '600px'
+    default: '500px'
   },
   page: {
     type: Object,
@@ -79,6 +88,10 @@ const props = defineProps({
     type: Object,
     default: null
   },
+  colSize: {
+    type: Number,
+    default: 4
+  },
   clearable: {
     type: Boolean,
     default: true
@@ -98,36 +111,80 @@ const props = defineProps({
   emptySearchEnabled: {
     type: Boolean,
     default: false
+  },
+  loadingText: {
+    type: String,
+    default: ''
+  },
+  minHeight: {
+    type: String,
+    default: '100px'
   }
 })
 
 const emit = defineEmits(['update:modelValue', 'onSelectData', 'update:page', 'update:autocompleteLabel'])
-
+// 关键字搜索
 const keywords = ref(props.autocompleteLabel)
+// 上次搜索记录
 const lastAutocompleteLabel = ref(props.autocompleteLabel)
-const pageAttrs = { layout: 'total, prev, pager, next', small: true }
+// 分页条
+const pageAttrs = { layout: 'total, prev, pager, next', small: true, background: true }
+const selectPageAttrs = { layout: 'prev, pager, next', small: true, background: true }
+// 自动完成数据
 const dataList = ref([])
+// 选项表数据
+const selectPageData = ref({})
+const selectPageTab = ref(null)
 const popoverVisible = ref(false)
 const autocompletePopover = ref()
 const pageConfig = useVModel(props, 'page', emit)
-/**
- * @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
+const loadingData = ref(false)
+
+const showSelectPage = computed(() => {
+  return props.selectPageConfig && (!keywords.value || lastAutocompleteLabel.value === keywords.value)
+})
+
+const loadAutoDataList = (val) => {
   if (val || props.emptySearchEnabled) {
     popoverVisible.value = true
+    loadingData.value = true
     props.autocompleteConfig.searchMethod(val, (result) => {
       dataList.value = result.items || []
       if (props.page) {
         pageConfig.value = { ...result.page }
       }
+      loadingData.value = false
     })
   }
+}
+
+const loadSelectData = () => {
+  const tabId = selectPageTab.value || props.selectPageConfig?.tabs?.[0]?.id
+  if (tabId && !selectPageData.value[tabId]) {
+    selectPageTab.value = tabId
+    loadingData.value = true
+    props.selectPageConfig?.searchMethod(tabId, (result) => {
+      selectPageData.value[tabId] = result
+      loadingData.value = false
+    })
+  }
+}
+
+/**
+ * @type {function(boolean?)}
+ */
+const onInputKeywords = debounce((input) => {
+  if (!props.disabled && !props.readonly) {
+    const val = keywords.value
+    if (showSelectPage.value) {
+      popoverVisible.value = true
+      loadSelectData()
+    } else {
+      if (input && pageConfig.value) {
+        pageConfig.value = { ...pageConfig.value, pageNumber: 1 }
+      }
+      loadAutoDataList(val)
+    }
     if (!val && input) {
       onSelectData()
     }
@@ -189,14 +246,15 @@ const moveSelection = function (down) {
         currentOnIndex.value = 0
       }
     } else {
-      if (currentOnIndex.value > 1) {
+      if (currentOnIndex.value > 0) {
         currentOnIndex.value--
       } else {
-        currentOnIndex.value = 0
+        currentOnIndex.value = dataList.value.length - 1
       }
     }
     currentOnRow.value = dataList.value[currentOnIndex.value]
   } else {
+    currentOnIndex.value = -1
     currentOnRow.value = null
   }
   console.info('=================', tableRef.value.table, currentOnIndex.value, currentOnRow.value)
@@ -206,21 +264,57 @@ const moveSelection = function (down) {
 // 向下按键移动元素
 onKeyStroke('ArrowDown', e => moveSelection(true))
 // 向上按键移动元素
-onKeyStroke('ArrowUp', e => moveSelection(true))
+onKeyStroke('ArrowUp', e => moveSelection(false))
 // 选中回车
 onKeyStroke('Enter', e => {
   onSelectData(currentOnRow.value)
 })
 
+//= ===============selectPage处理=================//
+const selectPagePageConfig = ref({})
+const parsedSelectPageData = computed(() => {
+  const result = {}
+  if (selectPageData.value) {
+    Object.entries(selectPageData.value).forEach(([key, value]) => {
+      const chunkPages = chunk(value, props.colSize)
+      const pager = selectPagePageConfig.value[key] = selectPagePageConfig.value[key] || getSelectPage(chunkPages.length)
+      result[key] = chunkPages.slice((pager.pageNumber - 1) * pager.pageSize, pager.pageNumber * pager.pageSize)
+    })
+  }
+  return result
+})
+
+const getSelectPage = (totalCount) => {
+  const pageSize = 5
+  const pageCount = Math.ceil((totalCount + pageSize - 1) / pageSize)
+  return {
+    pageNumber: 1,
+    pageSize,
+    totalCount,
+    pageCount
+  }
+}
+
+const selectPagePagination = (tab) => {
+  const pager = selectPagePageConfig.value?.[tab.id]
+  return pager && pager.pageCount && pager.pageCount > 1
+}
+
+const selectPagePaginationChange = (tab, pageNumber) => {
+  const pager = selectPagePageConfig.value?.[tab.id]
+  pager.pageNumber = pageNumber
+  console.info('==================selectPagePaginationChange', tab, pageNumber, pager)
+  selectPageData.value = { ...selectPageData.value }
+}
+
 </script>
 
 <template>
   <div>
     <el-popover
       ref="autocompletePopover"
-      transition="el-"
       :visible="popoverVisible"
-      class="common-autocomplete"
+      popper-class="common-autocomplete"
       placement="bottom-start"
       :width="autocompleteWidth"
       :title="title"
@@ -238,10 +332,69 @@ onKeyStroke('Enter', e => {
         />
       </template>
       <template #default>
+        <div v-if="showSelectPage">
+          <el-tabs
+            v-model="selectPageTab"
+            class="common-select-page"
+            type="border-card"
+            @tab-click="onInputKeywords(false)"
+          >
+            <el-tab-pane
+              v-for="tab in selectPageConfig.tabs"
+              :key="tab.id"
+              :name="tab.id"
+            >
+              <template #label>
+                <span>{{ tab.label }}</span>
+              </template>
+              <template #default>
+                <div
+                  v-loading="loadingData"
+                  :element-loading-text="loadingText"
+                  class="select-page-content"
+                  :style="{minHeight}"
+                >
+                  <template
+                    v-for="(rowData, index) in parsedSelectPageData[tab.id]"
+                    :key="index"
+                  >
+                    <el-row>
+                      <el-col
+                        v-for="(colData, idx) in rowData"
+                        :key="idx"
+                        :span="24/colSize"
+                      >
+                        <el-button
+                          plain
+                          class="common-select-page-btn is-text"
+                          @click="onSelectData(colData)"
+                        >
+                          {{ colData[labelKey] }}
+                        </el-button>
+                      </el-col>
+                    </el-row>
+                  </template>
+                  <el-pagination
+                    v-if="selectPagePagination(tab)"
+                    :style="{'justify-content':'center'}"
+                    v-bind="selectPageAttrs"
+                    :total="selectPagePageConfig[tab.id].totalCount"
+                    :page-size="selectPagePageConfig[tab.id].pageSize"
+                    :current-page="selectPagePageConfig[tab.id].pageNumber"
+                    @current-change="selectPagePaginationChange(tab, $event)"
+                  />
+                </div>
+              </template>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
         <!--自动完成内容-->
         <common-table
+          v-else
           ref="tableRef"
           v-model:page="pageConfig"
+          :loading="loadingData"
+          :loading-text="loadingText"
           class="autocomplete-table"
           :columns="autocompleteConfig.columns"
           :empty-text="autocompleteConfig.emptyMessage"

src/components/common-table/index.vue

@@ -73,9 +73,18 @@ const props = defineProps({
     default () {
       return {
         layout: 'total, sizes, prev, pager, next',
-        pageSizes: [10, 20, 50]
+        pageSizes: [10, 20, 50],
+        background: true
       }
     }
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  loadingText: {
+    type: String,
+    default: ''
   }
 })
 /**
@@ -120,10 +129,12 @@ defineExpose({
   <el-table
     ref="table"
     v-bind="$attrs"
+    v-loading="loading"
     :highlight-current-row="highlightCurrentRow"
     :stripe="stripe"
     :data="data"
     :border="border"
+    :element-loading-text="loadingText"
   >
     <common-table-column
       v-for="(column, index) in calcColumns"
@@ -147,7 +158,7 @@ defineExpose({
     </common-table-column>
   </el-table>
   <el-pagination
-    v-if="page &&page.pageCount&&page.pageCount>1"
+    v-if="!loading&&page&&page.pageCount&&page.pageCount>1"
     class="common-pagination"
     v-bind="pageAttrs"
     :total="page.totalCount"

src/messages/common_cn.js

@@ -54,3 +54,4 @@ common.msg.inputKeywords = '输入关键字搜索'
 common.msg.networkError = '网络异常，请稍后再试.'
 common.msg.networkTimeout = '系统处理超时，请稍后再试.'
 common.msg.loginTitle = '用户登录'
+common.msg.loading = '正在加载，请稍候...'

src/messages/common_en.js

@@ -54,3 +54,4 @@ common.msg.inputKeywords = 'Input keywords to search'
 common.msg.networkError = 'Network error, please try later.'
 common.msg.networkTimeout = 'System process timeout, please try later.'
 common.msg.loginTitle = 'User Login'
+common.msg.loading = 'Loading, please wait...'

src/services/city/CityService.js

@@ -0,0 +1,22 @@
+import { $httpPost } from '@/vendors/axios'
+
+/**
+ * @typedef {Object} CityDto
+ * @property {string} code
+ * @property {string} nameCn
+ * @property {string} nameEn
+ */
+/**
+ * 加载可选城市数据
+ * @return {{success:boolean, message:string, resultData: {cityList:[CityDto]}}}
+ */
+export const loadSelectCities = (query, config) => {
+  return $httpPost('/city/selectCities', query, config)
+}
+/**
+ * 加载自动完成城市数据
+ * @return {{success:boolean, message:string, resultData: {cityList:[CityDto]}}}
+ */
+export const loadAutoCities = (data, config) => {
+  return $httpPost('/city/autoCities', data, config)
+}

src/views/tools/Tables.vue

@@ -101,7 +101,7 @@ const submitForm = () => {
       :columns="columns"
       :buttons="buttons"
       buttons-slot="buttons"
-      :buttons-column-attrs="{width:'200px'}"
+      :buttons-column-attrs="{width:'250px'}"
       @page-size-change="loadUsers()"
       @current-page-change="loadUsers()"
     >

src/views/tools/TestPage.vue

@@ -3,12 +3,15 @@ import { computed, ref } from 'vue'
 import { useDefaultPage } from '@/config'
 import { loadUsersResult } from '@/services/user/UserService'
 import { $i18nMsg } from '@/messages'
+import { loadAutoCities, loadSelectCities } from '@/services/city/CityService'
 
 const modelIcon = ref('Apple')
 const modelAuto = ref('99999')
 const modelAutoLabel = ref('Gary Fu')
 const autoPage = ref(useDefaultPage(8))
-const autocompleteConfig = computed(() => {
+const cityModel = ref('')
+const autoCityPage = ref(useDefaultPage(8))
+const userAutocompleteConfig = computed(() => {
   return {
     columns: [{
       label: $i18nMsg('姓名', 'Name'),
@@ -19,7 +22,8 @@ const autocompleteConfig = computed(() => {
       slot: 'gender'
     }, {
       label: $i18nMsg('地址', 'Address'),
-      property: 'address'
+      property: 'address',
+      width: '300px'
     }],
     searchMethod (query, cb) {
       loadUsersResult({ page: autoPage.value })
@@ -33,12 +37,66 @@ const autocompleteConfig = computed(() => {
     }
   }
 })
+const cityAutocompleteConfig = computed(() => {
+  return {
+    columns: [{
+      label: $i18nMsg('代码', 'Code'),
+      property: 'code'
+    }, {
+      label: $i18nMsg('中文名', 'CN Name'),
+      property: 'nameCn'
+    }, {
+      label: $i18nMsg('英文名', 'EN Name'),
+      property: 'nameEn'
+    }],
+    searchMethod (query, cb) {
+      loadAutoCities({ page: autoCityPage.value })
+        .then(result => {
+          const data = {
+            page: result.resultData.page,
+            items: result.resultData.cityList
+          }
+          cb(data)
+        })
+    }
+  }
+})
+const citySelectPageConfig = computed(() => {
+  return {
+    tabs: [{
+      label: $i18nMsg('热门', 'Hot'),
+      id: '0'
+    }, {
+      label: 'A-F',
+      id: 'A-F'
+    }, {
+      label: 'G-J',
+      id: 'G-J'
+    }, {
+      label: 'K-N',
+      id: 'K-N'
+    }, {
+      label: 'P-W',
+      id: 'P-W'
+    }, {
+      label: 'X-Z',
+      id: 'X-Z'
+    }],
+    searchMethod (id, cb) {
+      loadSelectCities({ id })
+        .then(result => {
+          console.info('================selectCities', result)
+          cb(result.resultData.cityList)
+        })
+    }
+  }
+})
 </script>
 
 <template>
   <el-container>
     <el-main>
-      <el-form>
+      <el-form :label-width="100">
         <el-form-item label="图标选择">
           <common-icon-select v-model="modelIcon" />
         </el-form-item>
@@ -51,7 +109,7 @@ const autocompleteConfig = computed(() => {
             :label-key="$i18nMsg('nameCn', 'nameEn')"
             :empty-search-enabled="false"
             title="请选择用户"
-            :autocomplete-config="autocompleteConfig"
+            :autocomplete-config="userAutocompleteConfig"
           >
             <template #gender="{item}">
               <el-tag
@@ -62,6 +120,18 @@ const autocompleteConfig = computed(() => {
             </template>
           </common-autocomplete>
         </el-form-item>
+        <el-form-item label="出发城市">
+          <common-autocomplete
+            v-model="cityModel"
+            v-model:page="autoCityPage"
+            id-key="code"
+            :label-key="$i18nMsg('nameCn', 'nameEn')"
+            :empty-search-enabled="false"
+            title="请选择城市"
+            :autocomplete-config="cityAutocompleteConfig"
+            :select-page-config="citySelectPageConfig"
+          />
+        </el-form-item>
       </el-form>
       <el-container>
         {{ modelAuto }}