超领下拉框可搜索, 虚拟化

src/views/production/operation/overclaim/index.vue

@@ -1,6 +1,11 @@
 <template>
   <el-card class="box-card">
     <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
+      <template #orderId>
+        <div style="width: 100%">
+          <el-select-v2 v-model="formData.data.orderId" :options="productionOrder" placeholder="请选择订单号" @change="changeOrder()" style="width: 100%" filterable />
+        </div>
+      </template>
       <template #productionCostList>
         <div style="width: 100%">
           <el-table :data="formData.data.productionCostList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
@@ -55,10 +60,17 @@ const getDemandData = () => {
     if (res.rows && res.rows.length > 0) {
       productionOrder.value = productionOrder.value.concat(
         res.rows.map((item) => {
-          return {
-            dictKey: item.orderId,
-            dictValue: item.code + " （" + item.wlnCode + "）",
-          };
+          if (item.wlnCode) {
+            return {
+              value: item.orderId,
+              label: item.code + " （" + item.wlnCode + "）",
+            };
+          } else {
+            return {
+              value: item.orderId,
+              label: item.code,
+            };
+          }
         })
       );
     }
@@ -83,34 +95,11 @@ const formData = reactive({
 const formConfig = computed(() => {
   return [
     {
-      type: "select",
+      type: "slot",
       label: "订单号",
+      slotName: "orderId",
       prop: "orderId",
-      data: productionOrder.value,
       itemWidth: 51,
-      fn: (val) => {
-        if (val) {
-          proxy.post("/productionExceedReceive/getOrderSkuList", { id: val }).then((res) => {
-            if (res && res.length > 0) {
-              formData.data.productionCostList = res.map((item) => {
-                return {
-                  bomSpecId: item.bomSpecId,
-                  name: item.name,
-                  code: item.code,
-                  bomCode: item.bomCode,
-                  quantity: undefined,
-                  orderQuantity: item.quantity,
-                  id: item.id,
-                };
-              });
-            } else {
-              formData.data.productionCostList = [];
-            }
-          });
-        } else {
-          formData.data.productionCostList = [];
-        }
-      },
     },
     {
       type: "select",
@@ -149,6 +138,29 @@ const clickCancel = () => {
   };
   submit.value.resetFields();
 };
+const changeOrder = () => {
+  if (formData.data.orderId) {
+    proxy.post("/productionExceedReceive/getOrderSkuList", { id: formData.data.orderId }).then((res) => {
+      if (res && res.length > 0) {
+        formData.data.productionCostList = res.map((item) => {
+          return {
+            bomSpecId: item.bomSpecId,
+            name: item.name,
+            code: item.code,
+            bomCode: item.bomCode,
+            quantity: undefined,
+            orderQuantity: item.quantity,
+            id: item.id,
+          };
+        });
+      } else {
+        formData.data.productionCostList = [];
+      }
+    });
+  } else {
+    formData.data.productionCostList = [];
+  }
+};
 </script>
 
 <style lang="scss" scoped>