更新 在港天数样式;新增 航次列表筛选

src/views/voyage/voyageList.vue

@@ -203,10 +203,95 @@
         </span>
       </template>
     </el-dialog>
+    <div class="mt20">
+      <p class="mr20 df aic" style="font-size: 14px; color: #333">
+        列表筛选:
+        <el-checkbox
+          class="ml20"
+          v-model="selectAllVisable"
+          label="全选"
+          size="default"
+          @change="selectAll"
+        />
+      </p>
+      <el-checkbox
+        v-model="voyageNameVisable"
+        label="航次名称"
+        size="default"
+        @change="selectSingle"
+        disabled
+      />
+      <el-checkbox
+        v-model="loadPortVisable"
+        label="装货港"
+        size="default"
+        @change="selectSingle"
+      />
+      <el-checkbox
+        v-model="dischargePortVisable"
+        label="卸货港"
+        size="default"
+        @change="selectSingle"
+      />
+      <el-checkbox
+        v-model="expectedArrivalTimeVisable"
+        label="预计到港时间"
+        size="default"
+        @change="selectSingle"
+      />
+      <el-checkbox
+        v-model="abnormalStatusVisable"
+        label="航次状态"
+        size="default"
+        @change="selectSingle"
+      />
+      <el-checkbox
+        v-model="daysInPortVisable"
+        label="在港天数"
+        size="default"
+        @change="selectSingle"
+      />
+      <el-checkbox
+        v-model="todayPhotoCountVisable"
+        label="今日照片"
+        size="default"
+        @change="selectSingle"
+      />
+      <el-checkbox
+        v-model="cargoVisable"
+        label="货种"
+        size="default"
+        @change="selectSingle"
+      />
+      <el-checkbox
+        v-model="actualLoadTonsVisable"
+        label="装载吨位"
+        size="default"
+        @change="selectSingle"
+      />
+      <el-checkbox
+        v-model="unloadedtonsVisable"
+        label="已卸货吨位"
+        size="default"
+        @change="selectSingle"
+      />
+      <el-checkbox
+        v-model="remainTonsVisable"
+        label="剩余吨位"
+        size="default"
+        @change="selectSingle"
+      />
+      <el-checkbox
+        v-model="hasInsuranceVisable"
+        label="保险状态"
+        size="default"
+        @change="selectSingle"
+      />
+    </div>
     <el-table
       :data="tableData"
       stripe
-      style="width: 100%; margin-top: 24px"
+      style="width: 100%; margin-top: 12px"
       :row-style="rowStyle"
     >
       <!-- <el-table-column
@@ -218,13 +303,22 @@
       <el-table-column
         prop="voyageName"
         label="航次名称"
+        v-if="voyageNameVisable"
         min-width="140"
         align="center"
       ></el-table-column>
       <el-table-column
-        prop="loadDiscPort"
-        label="装货港-卸货港"
-        min-width="160"
+        prop="loadPort"
+        label="装货港"
+        v-if="loadPortVisable"
+        min-width="90"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        prop="dischargePort"
+        label="卸货港"
+        v-if="dischargePortVisable"
+        min-width="80"
         align="center"
       ></el-table-column>
       <!-- <el-table-column
@@ -236,8 +330,9 @@
       <el-table-column
         prop="expectedArrivalTime"
         label="预计到港时间"
+        v-if="expectedArrivalTimeVisable"
         sortable
-        min-width="100"
+        min-width="120"
         align="center"
       >
         <template v-slot="scope">
@@ -247,6 +342,7 @@
       <el-table-column
         prop="abnormalStatus"
         label="航次状态"
+        v-if="abnormalStatusVisable"
         min-width="80"
         align="center"
       >
@@ -257,18 +353,21 @@
       <el-table-column
         prop="daysInPort"
         label="在港天数"
+        v-if="daysInPortVisable"
         sortable
-        min-width="70"
+        min-width="90"
         align="center"
       ></el-table-column>
       <el-table-column
         prop="todayPhotoCount"
         label="今日照片"
+        v-if="todayPhotoCountVisable"
         min-width="70"
         align="center"
       ></el-table-column>
       <el-table-column
         prop="cargo"
+        v-if="cargoVisable"
         label="货种"
         min-width="70"
         align="center"
@@ -276,18 +375,21 @@
       <el-table-column
         prop="actualLoadTons"
         label="装载吨位"
+        v-if="actualLoadTonsVisable"
         min-width="80"
         align="center"
       ></el-table-column>
       <el-table-column
         prop="unloadedtons"
         label="已卸货吨位"
+        v-if="unloadedtonsVisable"
         min-width="80"
         align="center"
       ></el-table-column>
       <el-table-column
         prop="remainTons"
         label="剩余吨位"
+        v-if="remainTonsVisable"
         min-width="80"
         align="center"
       ></el-table-column>
@@ -317,6 +419,7 @@
       <el-table-column
         prop="hasInsurance"
         label="保险状态"
+        v-if="hasInsuranceVisable"
         min-width="70"
         align="center"
       >
@@ -785,9 +888,49 @@ async function exportZip() {
 
 function rowStyle({ row }) {
   let rowStyle = {};
-  if (row.daysInPort >= 30) {
-    rowStyle.color = "red";
-    return rowStyle;
+
+  if (row.daysInPort >= 20 && row.daysInPort < 25) {
+    rowStyle.color = "#f9ca24";
+  } else if (row.daysInPort >= 25 && row.daysInPort < 30) {
+    rowStyle.color = "#f0932b";
+  } else if (row.daysInPort >= 30) {
+    rowStyle.color = "#eb4d4b";
+  }
+
+  return rowStyle;
+}
+
+let voyageNameVisable = ref(true);
+let loadPortVisable = ref(true);
+let dischargePortVisable = ref(true);
+let expectedArrivalTimeVisable = ref(true);
+let abnormalStatusVisable = ref(true);
+let daysInPortVisable = ref(true);
+let todayPhotoCountVisable = ref(true);
+let cargoVisable = ref(true);
+let actualLoadTonsVisable = ref(true);
+let unloadedtonsVisable = ref(true);
+let remainTonsVisable = ref(true);
+let hasInsuranceVisable = ref(true);
+
+let selectAllVisable = ref(true);
+function selectAll(e) {
+  loadPortVisable.value = e;
+  dischargePortVisable.value = e;
+  expectedArrivalTimeVisable.value = e;
+  abnormalStatusVisable.value = e;
+  daysInPortVisable.value = e;
+  todayPhotoCountVisable.value = e;
+  cargoVisable.value = e;
+  actualLoadTonsVisable.value = e;
+  unloadedtonsVisable.value = e;
+  remainTonsVisable.value = e;
+  hasInsuranceVisable.value = e;
+}
+
+function selectSingle(e) {
+  if (!e) {
+    selectAllVisable.value = e;
   }
 }