更新 筛选数据获取方式,优化筛选交互

src/views/voyage/voyageList.vue

@@ -293,24 +293,42 @@
       style="font-size: 14px; color: #333; width: 1300px"
     >
       <div>装货港:</div>
-      <RemoteSearch
-        api="getCol"
-        style="width: 100px"
-        v-model="loadPortFilterStr"
+      <el-select
+        style="width: 120px"
+        v-model="voyageListPostData.loadPortId"
         placeholder="装货港"
-        @selectItem="selectLoadPortFilter($event)"
-      ></RemoteSearch>
+        size="small"
+        @change="getVoyageList"
+        @focus="getPortSelect"
+        filterable
+      >
+        <el-option
+          v-for="item in portOptions"
+          :key="item"
+          :label="item.value"
+          :value="item.key"
+        />
+      </el-select>
       <div>卸货港:</div>
-      <RemoteSearch
-        api="getCol"
-        style="width: 100px"
-        v-model="discPortFilterStr"
+      <el-select
+        style="width: 120px"
+        v-model="voyageListPostData.discPortId"
         placeholder="卸货港"
-        @selectItem="selectDiscPortFilter($event)"
-      ></RemoteSearch>
+        size="small"
+        @change="getVoyageList"
+        @focus="getPortSelect"
+        filterable
+      >
+        <el-option
+          v-for="item in portOptions"
+          :key="item"
+          :label="item.value"
+          :value="item.key"
+        />
+      </el-select>
       <div>预计到港时间:</div>
       <el-select
-        style="width: 160px"
+        style="width: 120px"
         v-model="voyageListPostData.isArrived"
         placeholder="到港状态"
         size="small"
@@ -321,7 +339,7 @@
       </el-select>
       <div>航次状态:</div>
       <el-select
-        style="width: 160px"
+        style="width: 120px"
         v-model="voyageListPostData.abnormalStatus"
         placeholder="航次状态"
         size="small"
@@ -331,20 +349,25 @@
         <el-option label="异常" :value="1" />
       </el-select>
       <div>货种:</div>
-      <RemoteSearch
-        api="getCargoSelect"
+      <el-select
         style="width: 100px"
-        v-model="cargoFilterStr"
+        v-model="voyageListPostData.cargo"
         placeholder="货种"
-        :params="{
-          loginAccountId,
-          status: 2,
-        }"
-        @selectItem="selectCargoFilter($event)"
-      ></RemoteSearch>
+        size="small"
+        @change="getVoyageList"
+        @focus="getCargoSelect"
+        filterable
+      >
+        <el-option
+          v-for="item in cargoOptions"
+          :key="item"
+          :label="item.key"
+          :value="item.value"
+        />
+      </el-select>
       <div>保险状态:</div>
       <el-select
-        style="width: 160px"
+        style="width: 120px"
         v-model="voyageListPostData.hasInsurance"
         placeholder="保险状态"
         size="small"
@@ -1029,6 +1052,25 @@ function resetFilter() {
   voyageListPostData.value = {};
   getVoyageList();
 }
+let cargoOptions = ref([]);
+async function getCargoSelect() {
+  if (cargoOptions.value.length) return;
+  let res = await api.getCargoSelect({
+    loginAccountId: loginAccountId.value,
+    status: 2,
+    term: "",
+  });
+  cargoOptions.value = res.data.result;
+}
+
+let portOptions = ref([]);
+async function getPortSelect() {
+  if (portOptions.value.length) return;
+  let res = await api.getCol({
+    term: "",
+  });
+  portOptions.value = res.data.result;
+}
 
 onMounted(() => {
   getVoyageList();