更新 航次列表样式;字段

src/views/voyage/voyageList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="line-container-p24">
-    <div style="display: flex; justify-content: space-between">
+    <div class="df jcsb aic">
       <div class="df aic">
         <div
           @click="changeVoyageType(0)"
@@ -58,7 +58,7 @@
           prefix-icon="el-icon-search"
           v-model="term"
           clearable
-          style="width: 330px"
+          style="width: 240px"
         ></el-input>
         <div class="search-btn" @click="getVoyageList()">查询</div>
       </div>
@@ -68,23 +68,20 @@
       <div>
         <el-button
           type="primary"
-          size="medium"
-          class="mr20"
+          size="small"
           @click="showExportModal('航次列表')"
           >导出航次列表</el-button
         >
         <el-button
           type="primary"
-          size="medium"
-          class="mr20"
+          size="small"
           v-auth="'MULTDOWNLOADSHIPTRACK'"
           @click="showExportModal('航次跟踪')"
           >导出航次跟踪</el-button
         >
         <el-button
           type="primary"
-          size="medium"
-          class="mr20"
+          size="small"
           @click="showExportModal('卸货记录')"
           v-auth="'MULTDOWNLOADDISCHARGE'"
           >导出卸货记录</el-button
@@ -92,7 +89,7 @@
         <el-button
           v-auth="'DOWNLOADFYDI'"
           type="primary"
-          size="medium"
+          size="small"
           @click="downloadFYDI"
           >下载FYDI指数</el-button
         >
@@ -202,13 +199,18 @@
         </span>
       </template>
     </el-dialog>
-    <el-table :data="tableData" stripe style="width: 100%; margin-top: 24px">
-      <el-table-column
+    <el-table
+      :data="tableData"
+      stripe
+      style="width: 100%; margin-top: 24px"
+      :row-style="rowStyle"
+    >
+      <!-- <el-table-column
         type="index"
         label="序号"
         min-width="80"
         align="center"
-      ></el-table-column>
+      ></el-table-column> -->
       <el-table-column
         prop="voyageName"
         label="航次名称"
@@ -218,18 +220,19 @@
       <el-table-column
         prop="loadDiscPort"
         label="装货港-卸货港"
-        min-width="200"
+        min-width="160"
         align="center"
       ></el-table-column>
-      <el-table-column
+      <!-- <el-table-column
         prop="setSailTime"
         label="开航时间"
         min-width="100"
         align="center"
-      ></el-table-column>
+      ></el-table-column> -->
       <el-table-column
         prop="expectedArrivalTime"
         label="预计到港时间"
+        sortable
         min-width="100"
         align="center"
       ></el-table-column>
@@ -246,29 +249,42 @@
       <el-table-column
         prop="daysInPort"
         label="在港天数"
-        min-width="80"
+        sortable
+        min-width="70"
         align="center"
       ></el-table-column>
       <el-table-column
         prop="todayPhotoCount"
         label="今日照片"
-        min-width="80"
+        min-width="70"
         align="center"
       ></el-table-column>
       <el-table-column
         prop="cargo"
         label="货种"
-        min-width="80"
+        min-width="70"
         align="center"
       ></el-table-column>
 
       <el-table-column
         prop="tons"
-        label="吨位(吨)"
+        label="装载吨位"
         min-width="80"
         align="center"
       ></el-table-column>
       <el-table-column
+        prop="tons"
+        label="已卸货吨位"
+        min-width="80"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        prop="tons"
+        label="剩余吨位"
+        min-width="80"
+        align="center"
+      ></el-table-column>
+      <!-- <el-table-column
         prop="waybillStatus"
         sortable
         label="签单状态"
@@ -284,7 +300,7 @@
               : "已签单"
           }}
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <!-- <el-table-column
         prop="transStatus"
         label="船舶状态"
@@ -293,15 +309,15 @@
       ></el-table-column> -->
       <el-table-column
         prop="hasInsurance"
-        label="保险单状态"
-        min-width="100"
+        label="保险状态"
+        min-width="70"
         align="center"
       >
         <template v-slot="scope">
           {{ scope.row.hasInsurance == 0 ? "未购买" : "已购买" }}
         </template>
       </el-table-column>
-      <el-table-column
+      <!-- <el-table-column
         sortable
         prop="createTime"
         label="创建时间"
@@ -317,7 +333,7 @@
         label="备注"
         min-width="100"
         align="center"
-      ></el-table-column>
+      ></el-table-column> -->
       <el-table-column
         v-auth="'VOYAGEDETAIL'"
         label="操作"
@@ -716,6 +732,14 @@ async function exportZip() {
   exportModalVisable.value = false;
 }
 
+function rowStyle({ row }) {
+  let rowStyle = {};
+  if (row.daysInPort >= 30) {
+    rowStyle.color = "red";
+    return rowStyle;
+  }
+}
+
 onMounted(() => {
   getVoyageList();
 });