新增 航次列表动态筛选

src/apis/fetch.js

@@ -171,4 +171,14 @@ export default {
   updateClient(data) {
     return $http("/client/account/update", data);
   },
+
+  // 获取港口列表
+  getCol(data) {
+    return $http("/port/backstage/getCol", data);
+  },
+
+  // 获取货种下拉
+  getCargoSelect(data) {
+    return $http("/cargo/select", data);
+  },
 };

src/views/voyage/voyageList.vue

@@ -288,6 +288,75 @@
         @change="selectSingle"
       />
     </div> -->
+    <div
+      class="df aic jcsb mt20"
+      style="font-size: 14px; color: #333; width: 1300px"
+    >
+      <div>装货港:</div>
+      <RemoteSearch
+        api="getCol"
+        style="width: 100px"
+        v-model="loadPortFilterStr"
+        placeholder="装货港"
+        @selectItem="selectLoadPortFilter($event)"
+      ></RemoteSearch>
+      <div>卸货港:</div>
+      <RemoteSearch
+        api="getCol"
+        style="width: 100px"
+        v-model="discPortFilterStr"
+        placeholder="卸货港"
+        @selectItem="selectDiscPortFilter($event)"
+      ></RemoteSearch>
+      <div>预计到港时间:</div>
+      <el-select
+        style="width: 160px"
+        v-model="voyageListPostData.isArrived"
+        placeholder="到港状态"
+        size="small"
+        @change="getVoyageList"
+      >
+        <el-option label="已到港" :value="0" />
+        <el-option label="未到港" :value="1" />
+      </el-select>
+      <div>航次状态:</div>
+      <el-select
+        style="width: 160px"
+        v-model="voyageListPostData.abnormalStatus"
+        placeholder="航次状态"
+        size="small"
+        @change="getVoyageList"
+      >
+        <el-option label="正常" :value="0" />
+        <el-option label="异常" :value="1" />
+      </el-select>
+      <div>货种:</div>
+      <RemoteSearch
+        api="getCargoSelect"
+        style="width: 100px"
+        v-model="cargoFilterStr"
+        placeholder="货种"
+        :params="{
+          loginAccountId,
+          status: 2,
+        }"
+        @selectItem="selectCargoFilter($event)"
+      ></RemoteSearch>
+      <div>保险状态:</div>
+      <el-select
+        style="width: 160px"
+        v-model="voyageListPostData.hasInsurance"
+        placeholder="保险状态"
+        size="small"
+        @change="getVoyageList"
+      >
+        <el-option label="未购买" :value="0" />
+        <el-option label="已购买" :value="1" />
+      </el-select>
+      <el-button @click="resetFilter" class="ml20" size="small" type="primary"
+        >重置</el-button
+      >
+    </div>
     <el-table
       :data="tableData"
       stripe
@@ -489,10 +558,13 @@ let term = ref("");
 let tableData = ref([]);
 let total = ref(0);
 let status = ref(0);
+let loginAccountId = ref("");
+let voyageListPostData = ref({});
 async function getVoyageList() {
   tableData.value = [];
 
   let res = await api.getVoyageList({
+    ...voyageListPostData.value,
     loginAccountId: localStorage.loginAccountId,
     cargoOwnerId: localStorage.userId,
     shipId: 0,
@@ -934,8 +1006,33 @@ function selectSingle(e) {
   }
 }
 
+let loadPortFilterStr = ref("");
+function selectLoadPortFilter(item) {
+  voyageListPostData.value.loadPortId = item.key;
+  getVoyageList();
+}
+let discPortFilterStr = ref("");
+function selectDiscPortFilter(item) {
+  voyageListPostData.value.discPortId = item.key;
+  getVoyageList();
+}
+let cargoFilterStr = ref("");
+function selectCargoFilter(item) {
+  voyageListPostData.value.cargo = item.key;
+  getVoyageList();
+}
+
+function resetFilter() {
+  loadPortFilterStr.value = "";
+  discPortFilterStr.value = "";
+  cargoFilterStr.value = "";
+  voyageListPostData.value = {};
+  getVoyageList();
+}
+
 onMounted(() => {
   getVoyageList();
+  loginAccountId.value = localStorage.loginAccountId;
 });
 </script>
 <style scoped>