增加搜索筛选控件

examples/route/index.js

@@ -25,6 +25,7 @@ const SearchWidgetExample = () => import(/* webpackChunkName: "search-widget-exa
 const ProcessReport = () => import(/* webpackChunkName: "process-report" */ '../../packages/process/src/ProcessReport.vue');
 const InfoWindowExample = () => import(/* webpackChunkName: "info-window" */ '../../examples/info/InfoWindowExample.vue');
 const DocGeneratorSelected = () => import(/* webpackChunkName: "doc-generator-selected" */ '../../packages/info/src/DocGeneratorSelected.vue');
+const SearchInput = () => import(/* webpackChunkName: "doc-generator-selected" */ '../../packages/info/src/SearchInput.vue');
 
 export default {
   routes: [
@@ -103,6 +104,7 @@ export default {
 
         /** 查询窗口 */
         { path: 'doc-generator-selected', component: DocGeneratorSelected },
+        { path: 'searchInput', component: SearchInput },
       ],
 
     },

package.json

@@ -49,5 +49,8 @@
   "publishConfig": {
     "access": "public",
     "registry": "http://wuzhixin.vip:4873/"
+  },
+  "dependencies": {
+    "ant-design-vue": "^4.0.7"
   }
 }

packages/info/src/SearchInput.vue

@@ -0,0 +1,105 @@
+<template>
+  <a-select
+    show-search
+    :value="selectValue"
+    style="width: 200px"
+    :allow-clear="true"
+    :not-found-content="fetching ? undefined : null"
+    :options="options"
+    @search="searchDatas"
+    @change="selectChanged"
+  >
+    <template v-if="fetching" #notFoundContent>
+      <a-spin size="small" />
+    </template>
+  </a-select>
+</template>  
+    
+<script>
+import Common from '../../common/Common';
+import { message, Select } from 'ant-design-vue';
+// 防抖处理(避免重复请求)
+const debounce = (fn, delay) => {
+  let timer = null;
+  return function () {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      fn.apply(this, arguments);
+    }, delay);
+  };
+};
+
+let _self = null;
+export default {
+  components: {
+    'a-select': Select,
+  },
+  props: {
+    value: {
+      type: String,
+      default: null,
+    },
+    apiUrl: {
+      type: String,
+      default: null,
+    },
+  },
+  emits: ['update:value'],
+  data() {
+    return {
+      selectValue: '',
+      fetching: false,
+      options: [{ value: '请输入查询内容', label: '请输入查询内容' }],
+    };
+  },
+  mounted() {
+    _self = this;
+  },
+  methods: {
+    // 搜索事件
+    searchDatas: debounce(value => {
+      _self.getDatas(value);
+    }, 500),
+
+    // 选择后更新值
+    selectChanged(value) {
+      this.selectValue = value;
+      this.$emit('update:value', value);
+    },
+
+    // 请求获取搜索数据
+    getDatas(value) {
+      _self.fetching = true;
+      _self.options = [];
+      const params = { start: 0, length: 99999, condition: value };
+      $.ajax({
+        type: 'get',
+        url: Common.getApiURL(_self.apiUrl),
+        data: params,
+        beforeSend: function (request) {
+          Common.addTokenToRequest(request);
+        },
+        success: function ({ errorCode, errorMessage, datas }) {
+          if (errorCode == 0) {
+            if (datas && datas.length) {
+              // 数据结构待处理（value，label）
+              this.options = datas;
+            } else {
+              this.options.splice(0, datas.length);
+            }
+          } else {
+            message.warning(errorMessage);
+          }
+          _self.fetching = false;
+        },
+        error: function (XMLHttpRequest, textStatus, errorThrown) {
+          Common.processException(XMLHttpRequest, textStatus, errorThrown);
+          _self.fetching = false;
+        },
+      });
+    },
+  },
+};
+</script>