金币收支记录搜索优化

(cherry picked from commit d2be46cc0ae583e94824dcf88ed72c5eeaf3ee34)

src/views/order/candy/running-water/index.vue

@@ -70,27 +70,25 @@
           :value="item.id"
         />
       </el-select>
-      <div class="filter-item">
+      <el-select
-        <el-autocomplete
         v-model="listQuery.origin"
-          popper-class="my-autocomplete"
+        placeholder="来源(支持中英文搜索)"
-          :fetch-suggestions="querySearch"
-          :placeholder="$t('pages.goldRunningWater.filter.origin')"
         clearable
+        filterable
+        style="width: 220px"
+        class="filter-item"
         :disabled="!!(gameFilter.gameOrigin)"
-          @select="handleSelect"
+        :filter-method="originFilterMethod"
+        @change="handleSelect"
         @clear="handleSelect"
       >
-          <i
+        <el-option
-            slot="suffix"
+          v-for="item in filteredOrigins"
-            class="el-icon-edit el-input__icon"
+          :key="item.value"
+          :label="item.name !== item.value ? item.name + ' (' + item.value + ')' : item.value"
+          :value="item.value"
         />
-          <template slot-scope="{ item }">
+      </el-select>
-            <span :label="getCurrencyOriginName(item)">{{ getCurrencyOriginName(item) }}</span>
-            <div :key="item.value" :value="item.value" style="font-size:12px; color:#d8d0d0">{{ item.value }}</div>
-          </template>
-        </el-autocomplete>
-      </div>
       <div class="filter-item">
         <account-input v-model="listQuery.userId" :sys-origin="sysOrigins && sysOrigins.length === 1? sysOrigins[0] : ''" :placeholder="$t('pages.goldRunningWater.filter.userId')" />
       </div>
@@ -244,6 +242,7 @@ export default {
       gameList: [],
       gameListLoading: false,
       gameIdError: false,
+      filteredOrigins: currencyOrigins,
       minDate: null,
       maxDate: null,
       pickerOptions: {
@@ -403,28 +402,22 @@ export default {
         this.$opsMessage.warn('请选择游戏ID')
         return
       }
-      if (this.listQuery.origin !== '') {
+      this.filteredOrigins = currencyOrigins
-        const origins = this.currencyOrigins.filter(this.createFilter(this.listQuery.origin))
-        this.listQuery.origin = origins.length > 0 ? origins[0].value : this.listQuery.origin
-      }
       this.renderData(true)
     },
-    querySearch(queryString, cb) {
+    originFilterMethod(query) {
-      var restaurants = currencyOrigins
+      if (!query) {
-      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
+        this.filteredOrigins = currencyOrigins
-      cb(results)
+        return
-    },
-    createFilter(queryString) {
-      return (restaurant) => {
-        const keyword = queryString.toLowerCase()
-        return (
-          restaurant.value.toLowerCase().indexOf(keyword) >= 0 ||
-          restaurant.name.toLowerCase().indexOf(keyword) >= 0 ||
-          this.getCurrencyOriginName(restaurant).toLowerCase().indexOf(keyword) >= 0
-        )
       }
+      const q = query.toLowerCase()
+      this.filteredOrigins = currencyOrigins.filter(item =>
+        item.value.toLowerCase().indexOf(q) >= 0 ||
+        item.name.toLowerCase().indexOf(q) >= 0
+      )
     },
-    handleSelect(item) {
+    handleSelect() {
+      this.filteredOrigins = currencyOrigins
       this.renderData(true)
     },
     clickLoadMore() {