新增 运单显示

src/views/voyage/voyageDetail.vue

@@ -229,7 +229,7 @@
           :disabled="disabledStatus"
         ></el-date-picker>
       </div>
-      <div class="info-line">
+      <!-- <div class="info-line">
         <div class="info-line-title">抵达目的地港时间</div>
         <el-date-picker
           class="info-line-text"
@@ -240,7 +240,7 @@
           placeholder="抵达目的地港时间"
           :disabled="disabledStatus"
         ></el-date-picker>
-      </div>
+      </div> -->
     </div>
     <div class="line">
       <div class="info-line">
@@ -291,7 +291,14 @@
         ></el-input>
       </div>
     </div>
-    <el-card style="width: 800px; margin: 50px 60px">
+    <el-card
+      style="
+        width: 800px;
+        margin-left: 60px;
+        margin-top: 50px;
+        margin-bottom: 40px;
+      "
+    >
       <el-table :data="dischagreList" stripe :disabled="disabledStatus">
         <el-table-column
           type="index"
@@ -318,6 +325,13 @@
           align="center"
         ></el-table-column>
       </el-table>
+
+      <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
@@ -327,6 +341,35 @@
         ></el-pagination>
       </div>
     </el-card>
+    <div v-if="false" 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>
+      <img
+        style="width: 200px; height: 200px"
+        v-for="item in voyageBill"
+        :src="item.url"
+        :key="item"
+        alt=""
+      />
+    </div>
     <div class="media-content df ffw">
       <div class="pic-container">
         <div v-for="(item, index) in media" :key="item" class="pic-main">
@@ -418,7 +461,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() {
@@ -429,20 +472,29 @@ export default {
     let coordinates = ref();
     let previewSrcList = ref([]);
 
-    async function getVoyageDetail() {
+    async function getVoyageDetail(type) {
       let res = await api.getVoyageDetail({
-        type: 1,
+        type: localStorage.userType,
         voyageId: route.query.id,
       });
       if (res.data.status == 0) {
-        ElNotification({
-          type: "success",
-          title: res.data.msg,
-        });
+        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 res.data.result.waybills) {
+          voyageBill.value.push({
+            ...i,
+            url: i.viewUrl,
+          });
+        }
         for (let i of media.value) {
           previewSrcList.value.push(i.downloadUrl);
         }
@@ -460,7 +512,46 @@ export default {
       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();
@@ -474,6 +565,28 @@ export default {
       if (res.data.status == 0) {
         dischagreList.value = res.data.result;
         total.value = res.data.total;
+      } else {
+        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({
@@ -482,6 +595,20 @@ export default {
         });
       }
     }
+    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, //级别
@@ -629,10 +756,60 @@ 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();
-      getDischargeList();
+      getVoyageDetail(1);
+      getDischargeList(1);
     });
     return {
       options,
@@ -653,13 +830,27 @@ export default {
       currentUrl,
       mediaModal,
       modalPreview,
+      addDischarge,
+      deleteDischarge,
       exportExcel,
       dischargeCurrentPage,
       dischagreList,
       getDischargeList,
+      updateDischarge,
       total,
       pageChange,
       formInline,
+      updateDischargeDialog,
+      showUpdateDischarge,
+      cancelUpdateDischarge,
+      updateForm,
+      dialogImageUrl,
+      dialogVisible,
+      handlePictureCardPreview,
+      handleRemoveBill,
+      voyageBill,
+      billUploadSuccess,
+      billParams,
     };
   },
 };
@@ -812,4 +1003,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>