支持原料选择远程搜索

klp-ui/src/components/KLPService/ProductSelect/index.vue

@@ -4,6 +4,7 @@
     :placeholder="placeholder"
     :disabled="disabled"
     filterable
+    clearable
     @change="onChange"
     style="width: 100%"
     :value-key="'productId'"

klp-ui/src/components/KLPService/RawMaterialSelect/index.vue

@@ -4,6 +4,9 @@
     :placeholder="placeholder"
     filterable
     clearable
+    remote
+    :remote-method="debouncedRemoteMethod"
+    :loading="loading"
     @change="onChange"
     style="width: 100%"
     :value-key="'rawMaterialId'"
@@ -25,6 +28,16 @@
 <script>
 import { listRawMaterial } from "@/api/wms/rawMaterial";
 
+function debounce(fn, delay) {
+  let timer = null;
+  return function (...args) {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
 export default {
   name: "RawMaterialSelect",
   props: {
@@ -37,7 +50,8 @@ export default {
   data() {
     return {
       options: [],
-      selected: this.value
+      selected: this.value,
+      loading: false
     };
   },
   watch: {
@@ -50,14 +64,24 @@ export default {
     }
   },
   mounted() {
-    this.fetchOptions();
+    this.fetchOptions("");
   },
   methods: {
-    fetchOptions() {
-      listRawMaterial({ pageNum: 1, pageSize: 1000 }).then(res => {
+    fetchOptions(keyword) {
+      this.loading = true;
+      listRawMaterial({ pageNum: 1, pageSize: 10, rawMaterialName: keyword }).then(res => {
         this.options = res.rows || [];
+        this.loading = false;
+      }).catch(() => {
+        this.loading = false;
       });
     },
+    remoteMethod(keyword) {
+      this.fetchOptions(keyword);
+    },
+    debouncedRemoteMethod: debounce(function(keyword) {
+      this.remoteMethod(keyword);
+    }, 400),
     onChange(val) {
       this.$emit("input", val);
       this.$emit("change", val);