新增 卸货记录列表

src/apis/fetch.js

@@ -33,4 +33,13 @@ export default {
   getMediaList(data) {
     return $http("post", "/media/backstage/list", data);
   },
+  // 导出excel
+  exportExcel(data) {
+    return $http("post", "/voyage/exportExcel", data);
+  },
+
+  // 获取卸货列表
+  getDischargeList(data) {
+    return $http("post", "/voyage/getDischargeList", data);
+  },
 };

src/views/voyage/voyageDetail.vue

@@ -140,14 +140,6 @@
           ></el-option>
         </el-select>
       </div>
-      <div class="info-line">
-        <div class="info-line-title">实际卸货吨位</div>
-        <el-input
-          class="info-line-text"
-          v-model="voyage.actualDischargeTons"
-          :disabled="disabledStatus"
-        ></el-input>
-      </div>
     </div>
     <div class="line">
       <div class="info-line">
@@ -259,7 +251,7 @@
           type="datetime"
           format="YYYY/MM/DD HH:mm:ss"
           value-format="YYYY/MM/DD HH:mm:ss"
-          placeholder="装货开始时间"
+          placeholder="卸货开始时间"
           :disabled="disabledStatus"
         ></el-date-picker>
       </div>
@@ -271,11 +263,22 @@
           type="datetime"
           format="YYYY/MM/DD HH:mm:ss"
           value-format="YYYY/MM/DD HH:mm:ss"
-          placeholder="装货开始时间"
+          placeholder="卸货结束时间"
           :disabled="disabledStatus"
         ></el-date-picker>
       </div>
     </div>
+    <div class="line">
+      <div class="info-line">
+        <div class="info-line-title">实际卸货吨位</div>
+        <el-input
+          class="info-line-text"
+          placeholder="实际卸货吨位"
+          v-model="voyage.actualDischargeTons"
+          :disabled="disabledStatus"
+        ></el-input>
+      </div>
+    </div>
     <div class="line">
       <div class="info-line">
         <div class="info-line-title">备注</div>
@@ -288,6 +291,42 @@
         ></el-input>
       </div>
     </div>
+    <el-card style="width: 800px; margin: 50px 60px">
+      <el-table :data="dischagreList" stripe :disabled="disabledStatus">
+        <el-table-column
+          type="index"
+          label="序号"
+          min-width="80"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="id"
+          label="卸货记录ID"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="dischargeTons"
+          label="卸货吨位"
+          min-width="100"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="dischargeTime"
+          label="卸货时间"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+      </el-table>
+      <div style="width: 100%; text-align: right; margin-top: 43px">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="total"
+          @current-change="pageChange"
+        ></el-pagination>
+      </div>
+    </el-card>
     <div class="media-content df ffw">
       <div class="pic-container">
         <div v-for="(item, index) in media" :key="item" class="pic-main">
@@ -392,19 +431,57 @@ export default {
 
     async function getVoyageDetail() {
       let res = await api.getVoyageDetail({
-        type: 2,
+        type: 1,
         voyageId: route.query.id,
       });
+      if (res.data.status == 0) {
+        ElNotification({
+          type: "success",
+          title: res.data.msg,
+        });
 
-      coordinates.value = res.data.result.coordinates;
-      voyage.value = res.data.result.voyage;
-      media.value = res.data.result.medias;
-      for (let i of media.value) {
-        previewSrcList.value.push(i.downloadUrl);
+        coordinates.value = res.data.result.coordinates;
+        voyage.value = res.data.result.voyage;
+        media.value = res.data.result.medias;
+        for (let i of media.value) {
+          previewSrcList.value.push(i.downloadUrl);
+        }
+        initMap();
+      } else {
+        console.log(res);
+        ElNotification({
+          type: "error",
+          title: res.data.msg,
+        });
       }
-      initMap();
+    }
+    let total = ref();
+    function pageChange(e) {
+      dischargeCurrentPage.value = e;
+      getDischargeList();
     }
 
+    async function exportExcel() {}
+    let dischargeCurrentPage = ref(1);
+    let dischagreList = ref();
+    let formInline = ref({});
+    async function getDischargeList(type) {
+      let res = await api.getDischargeList({
+        voyageId: route.query.id,
+        currentPage: dischargeCurrentPage.value,
+        size: 10,
+      });
+      if (res.data.status == 0) {
+        dischagreList.value = res.data.result;
+        total.value = res.data.total;
+      } else {
+        console.log(res);
+        ElNotification({
+          type: "error",
+          title: res.data.msg,
+        });
+      }
+    }
     function initMap() {
       map.value = new AMap.Map("map-container", {
         zoom: 11, //级别
@@ -537,12 +614,22 @@ export default {
       });
       if (res.data.status == 0) {
         media.value[index].audit = a;
+        ElNotification({
+          type: "success",
+          title: res.data.msg,
+        });
+      } else {
+        console.log(res);
+        ElNotification({
+          type: "error",
+          title: res.data.msg,
+        });
       }
-      console.log(res);
     }
 
     onMounted(() => {
       getVoyageDetail();
+      getDischargeList();
     });
     return {
       options,
@@ -563,6 +650,13 @@ export default {
       currentUrl,
       mediaModal,
       modalPreview,
+      exportExcel,
+      dischargeCurrentPage,
+      dischagreList,
+      getDischargeList,
+      total,
+      pageChange,
+      formInline,
     };
   },
 };
@@ -711,4 +805,8 @@ export default {
 .now-point {
   filter: grayscale(1);
 }
+
+.info-line-text-table {
+  width: 180px !important;
+}
 </style>