新增 航次运单

src/apis/fetch.js

@@ -132,16 +132,16 @@ export default {
 
   // 计算预计到港时间
   calExpectedArrivalTime(data) {
-    return $http("/voyage/calExpectedArrivalTime", data);
+    return $http("post", "/voyage/calExpectedArrivalTime", data);
   },
 
   // 删除运单
   deleteWaybill(data) {
-    return $http("/voyage/deleteWaybill", data);
+    return $http("post", "/voyage/deleteWaybill", data);
   },
 
   // 上传运单
   updateVoyageWaybill(data) {
-    return $http("/voyage/updateVoyageWaybill", data);
+    return $http("post", "/voyage/updateVoyageWaybill", data);
   },
 };

src/views/voyage/voyageDetail.vue

@@ -387,6 +387,7 @@
           </template>
         </el-table-column>
       </el-table>
+
       <el-dialog
         v-model="updateDischargeDialog"
         title="修改记录"
@@ -426,6 +427,13 @@
           </el-button>
         </template>
       </el-dialog>
+
+      <el-dialog v-model="dialogVisible" title="图片预览" width="30%">
+        <el-image
+          :src="dialogImageUrl"
+          style="height: 100%; width: 100%"
+        ></el-image>
+      </el-dialog>
       <div style="width: 100%; text-align: right; margin-top: 43px">
         <el-pagination
           background
@@ -435,6 +443,26 @@
         ></el-pagination>
       </div>
     </el-card>
+    <div class="line" style="margin-bottom: 60px">
+      <div class="info-line">
+        <div class="info-line-title">上传航次运单</div>
+        <el-upload
+          drag
+          multiple
+          action="https://interface.huihenduo.com.cn/hhd-pat/voyage/uploadVoyageWayBill"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemoveBill"
+          :data="billParams"
+          :on-success="billUploadSuccess"
+          :file-list="voyageBill"
+          :limit="10"
+        >
+          <div class="upload-plus-icon">+</div>
+          <div class="upload-text">拖拽或点击上传</div>
+        </el-upload>
+      </div>
+    </div>
     <div class="media-content df ffw">
       <div class="pic-container">
         <div v-for="(item, index) in media" :key="item" class="pic-main">
@@ -538,7 +566,7 @@ import { useRoute } from "vue-router";
 import _ from "lodash";
 import router from "../../router";
 import store from "../../store";
-import { ElNotification } from "element-plus";
+import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
 
 export default {
   setup() {
@@ -565,6 +593,13 @@ export default {
         coordinates.value = res.data.result.coordinates;
         voyage.value = res.data.result.voyage;
         media.value = res.data.result.medias;
+
+        for (let i of res.data.result.waybills) {
+          voyageBill.value.push({
+            ...i,
+            url: i.viewUrl,
+          });
+        }
         for (let i of media.value) {
           previewSrcList.value.push(i.downloadUrl);
         }
@@ -636,7 +671,6 @@ export default {
         dischagreList.value = res.data.result;
         total.value = res.data.total;
       } else {
-        console.log(res);
         ElNotification({
           type: "error",
           title: res.data.msg,
@@ -827,6 +861,56 @@ export default {
         });
       }
     }
+    let dialogImageUrl = ref();
+    let dialogVisible = ref();
+    function handlePictureCardPreview(file) {
+      dialogVisible.value = true;
+      dialogImageUrl.value = file.url;
+    }
+
+    async function handleRemoveBill(file, list) {
+      let cache = _.cloneDeep(voyageBill.value);
+      console.log(cache);
+      ElMessageBox.confirm("确认删除运单?", "Warning", {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          let { id } = file;
+          let res = await api.deleteWaybill({
+            id,
+          });
+          if (res.data.status == 0) {
+            ElMessage({
+              message: "删除成功!",
+              type: "success",
+            });
+            voyageBill.value = list;
+          }
+        })
+        .catch(() => {
+          voyageBill.value = cache;
+          ElMessage({
+            type: "info",
+            message: "取消删除",
+          });
+        });
+    }
+    let voyageBill = ref([]);
+
+    function billUploadSuccess(response, file, list) {
+      list[list.length - 1] = {
+        ...response.result,
+        url: response.result.viewUrl,
+      };
+      console.log(list);
+      voyageBill.value = list;
+    }
+
+    let billParams = ref({
+      voyageId: route.query.id,
+    });
 
     onMounted(() => {
       getVoyageDetail(1);
@@ -865,6 +949,13 @@ export default {
       showUpdateDischarge,
       cancelUpdateDischarge,
       updateForm,
+      dialogImageUrl,
+      dialogVisible,
+      handlePictureCardPreview,
+      handleRemoveBill,
+      voyageBill,
+      billUploadSuccess,
+      billParams,
     };
   },
 };
@@ -1017,4 +1108,17 @@ export default {
 .info-line-text-table {
   width: 180px !important;
 }
+
+.upload-plus-icon {
+  height: 15%;
+  color: rgb(139, 147, 156);
+  line-height: 100px;
+  font-size: 40px;
+  font-weight: 200;
+}
+
+.upload-text {
+  height: 25%;
+  color: rgb(139, 147, 156);
+}
 </style>