新增 卸货记录表功能

src/apis/fetch.js

@@ -99,4 +99,29 @@ export default {
   getShipOwnerListByShipId(data) {
     return $http("post", "/user/backstage/shopOwnerlist", data);
   },
+
+  // 添加卸货记录
+  addDischarge(data) {
+    return $http("post", "/voyage/addDischarge", data);
+  },
+
+  // 删除卸货记录
+  deleteDischarge(data) {
+    return $http("post", "/voyage/deleteDischarge", data);
+  },
+
+  // 导出excel
+  exportExcel(data) {
+    return $http("post", "/voyage/exportExcel", data);
+  },
+
+  // 获取卸货列表
+  getDischargeList(data) {
+    return $http("post", "/voyage/getDischargeList", data);
+  },
+
+  // 修改卸货记录
+  updateDischarge(data) {
+    return $http("post", "/voyage/updateDischarge", data);
+  },
 };

src/views/voyage/voyageDetail.vue

@@ -144,6 +144,7 @@
         <div class="info-line-title">实际卸货吨位</div>
         <el-input
           class="info-line-text"
+          placeholder="实际卸货吨位"
           v-model="voyage.actualDischargeTons"
           :disabled="disabledStatus"
         ></el-input>
@@ -259,7 +260,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,7 +272,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>
@@ -288,6 +289,124 @@
         ></el-input>
       </div>
     </div>
+
+    <el-card style="width: 800px; margin-left: 60px; margin-top: 50px">
+      <el-form :inline="true" :model="formInline" style="margin-bottom: 20px">
+        <el-form-item label="卸货时间">
+          <el-date-picker
+            class="info-line-text"
+            v-model="formInline.dischargeTime"
+            type="datetime"
+            format="YYYY/MM/DD HH:mm:ss"
+            value-format="YYYY/MM/DD HH:mm:ss"
+            placeholder="卸货时间"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="卸货吨位">
+          <el-input
+            style="width: 220px"
+            v-model="formInline.dischargeTons"
+            placeholder="卸货吨位"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="addDischarge">
+            新增卸货吨位
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <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-column label="操作" min-width="80" align="center">
+          <template v-slot="scope">
+            <el-button
+              @click="showUpdateDischarge(scope.row, scope.$index)"
+              type="primary"
+              size="small"
+            >
+              修改
+            </el-button>
+            <el-button
+              @click="deleteDischarge(scope.row.id, scope.$index)"
+              type="danger"
+              size="small"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-dialog
+        v-model="updateDischargeDialog"
+        title="修改记录"
+        width="30%"
+        center
+      >
+        <el-form :model="updateForm" style="margin-bottom: 20px">
+          <el-form-item label="记录ID">
+            <span style="padding-left: 20px">{{ updateForm.id }}</span>
+          </el-form-item>
+          <el-form-item label="卸货时间">
+            <el-date-picker
+              class="info-line-text"
+              v-model="updateForm.dischargeTime"
+              type="datetime"
+              format="YYYY/MM/DD HH:mm:ss"
+              value-format="YYYY/MM/DD HH:mm:ss"
+              placeholder="卸货时间"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item label="卸货吨位">
+            <el-input
+              style="width: 240px"
+              v-model="updateForm.dischargeTons"
+              placeholder="卸货吨位"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <el-button @click="cancelUpdateDischarge">取消</el-button>
+          <el-button
+            style="margin-left: 30px"
+            type="primary"
+            @click="updateDischarge"
+          >
+            提交
+          </el-button>
+        </template>
+      </el-dialog>
+      <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="df aic jcfe mt20 mb20" v-if="voyage.voyageStatus == 1">
       <el-button v-if="disabledStatus" type="primary" @click="changeVoyageInfo">
         修改航次
@@ -422,21 +541,137 @@ export default {
     let coordinates = ref();
     let previewSrcList = ref([]);
 
-    async function getVoyageDetail() {
+    async function getVoyageDetail(type) {
       let res = await api.getVoyageDetail({
         type: 2,
         voyageId: route.query.id,
       });
+      if (res.data.status == 0) {
+        if (type) {
+          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 addDischarge() {
+      if (!formInline.value.dischargeTime || !formInline.value.dischargeTons)
+        return;
+      let res = await api.addDischarge({
+        ...formInline.value,
+        voyageId: route.query.id,
+      });
+      if (res.data.status == 0) {
+        getDischargeList(1);
+        formInline.value = {};
+        ElNotification({
+          type: "success",
+          title: res.data.msg,
+        });
+      } else {
+        console.log(res);
+        ElNotification({
+          type: "error",
+          title: res.data.msg,
+        });
+      }
+    }
+    async function deleteDischarge(id, index) {
+      let res = await api.deleteDischarge({
+        id,
+      });
+      if (res.data.status == 0) {
+        dischagreList.value.splice(index, 1);
+        ElNotification({
+          type: "success",
+          title: res.data.msg,
+        });
+      } else {
+        console.log(res);
+        ElNotification({
+          type: "error",
+          title: res.data.msg,
+        });
+      }
+    }
+    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,
+        });
+      }
+    }
+    let updateForm = ref({});
+    let updateDischargeDialog = ref(false);
+    let currentUpdateIndex = ref(-1);
+    async function updateDischarge() {
+      let res = await api.updateDischarge({
+        ...updateForm.value,
+      });
 
+      if (res.data.status == 0) {
+        dischagreList.value[currentUpdateIndex.value] = res.data.result;
+        cancelUpdateDischarge();
+        ElNotification({
+          type: "success",
+          title: res.data.msg,
+        });
+      } else {
+        console.log(res);
+        ElNotification({
+          type: "error",
+          title: res.data.msg,
+        });
+      }
+    }
+    function showUpdateDischarge(item, index) {
+      updateDischargeDialog.value = true;
+      updateForm.value = {
+        ...item,
+      };
+      delete updateForm.value.createTime;
+      delete updateForm.value.voyageId;
+      currentUpdateIndex.value = index;
+    }
+    function cancelUpdateDischarge() {
+      updateDischargeDialog.value = false;
+      updateForm.value = {};
+      currentUpdateIndex.value = -1;
+    }
     function initMap() {
       map.value = new AMap.Map("map-container", {
         zoom: 11, //级别
@@ -569,12 +804,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();
+      getVoyageDetail(1);
+      getDischargeList(1);
     });
     return {
       options,
@@ -595,6 +840,20 @@ export default {
       currentUrl,
       mediaModal,
       modalPreview,
+      addDischarge,
+      deleteDischarge,
+      exportExcel,
+      dischargeCurrentPage,
+      dischagreList,
+      getDischargeList,
+      updateDischarge,
+      total,
+      pageChange,
+      formInline,
+      updateDischargeDialog,
+      showUpdateDischarge,
+      cancelUpdateDischarge,
+      updateForm,
     };
   },
 };
@@ -743,4 +1002,8 @@ export default {
 .now-point {
   filter: grayscale(1);
 }
+
+.info-line-text-table {
+  width: 180px !important;
+}
 </style>