更新 下载列表按钮

src/views/voyage/voyageList.vue

@@ -58,7 +58,7 @@
           prefix-icon="el-icon-search"
           v-model="term"
           clearable
-          style="width: 330px"
+          style="width: 220px"
           @keydown.enter="getVoyageList()"
         ></el-input>
         <div class="search-btn" @click="getVoyageList()">查询</div>
@@ -123,8 +123,55 @@
           @click="voyageAddDialogVisible = true"
           >添加航次</el-button
         >
+        <div>
+          <el-button
+            type="primary"
+            size="small"
+            @click="showExportModal('航次列表')"
+            style="margin-left: 10px; margin-bottom: 10px"
+            >导出航次列表</el-button
+          >
+          <el-button
+            type="primary"
+            size="small"
+            @click="showExportModal('航次跟踪')"
+            >导出航次跟踪</el-button
+          >
+          <el-button
+            type="primary"
+            size="small"
+            @click="showExportModal('卸货记录')"
+            >导出卸货记录</el-button
+          >
+          <el-button type="primary" size="small" @click="downloadFYDI"
+            >下载FYDI指数</el-button
+          >
+        </div>
       </div>
     </div>
+    <el-dialog
+      v-model="exportModalVisable"
+      :title="exportModalTitle"
+      :close-on-click-modal="false"
+      width="200px"
+    >
+      <div class="df aic jcsb">
+        <div v-if="exportModalTitle != '航次列表'" class="df aic">
+          <div class="mr20">请选择月份:</div>
+          <el-date-picker
+            v-model="currentMonth"
+            type="month"
+            placeholder="请选择年月"
+            value-format="YYYYMM"
+            :disabled="isLoadingZip"
+          />
+        </div>
+        <div></div>
+        <el-button type="primary" @click="exportZip" :loading="isLoadingZip"
+          >导出{{ exportModalTitle }}</el-button
+        >
+      </div>
+    </el-dialog>
     <el-dialog
       v-model="voyageAddDialogVisible"
       @closed="resetAddVoyageForm"
@@ -401,7 +448,9 @@ import store from "../../store";
 import router from "../../router";
 import md5 from "md5";
 import api from "../../apis/fetch";
+import downloadBlobFile from "../../utils/downloadBlobFile";
 import _ from "lodash";
+import url from "../../apis/config";
 
 let currentPage = ref(1);
 let pageSize = ref(20);
@@ -768,6 +817,105 @@ let discPorts = ref([{}]);
 function addDiscPort() {
   discPorts.value.push({});
 }
+
+let exportModalVisable = ref(false);
+let exportModalTitle = ref("");
+let currentMonth = ref("");
+
+function showExportModal(type) {
+  exportModalVisable.value = true;
+  exportModalTitle.value = type;
+}
+let isLoadingZip = ref(false);
+
+async function exportZip() {
+  if (!currentMonth.value && exportModalTitle.value != "航次列表") return;
+
+  isLoadingZip.value = true;
+  let path = "";
+  let type = "";
+  let postData = {
+    loginAccountId: localStorage.loginAccountId,
+  };
+  let title = "";
+  switch (exportModalTitle.value) {
+    case "航次列表": {
+      path = "/voyage/exportListExcel";
+      type =
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
+      title = `${exportModalTitle.value}`;
+      let arr = [];
+      for (let i of tableData.value) {
+        arr.push(i.id);
+      }
+      postData.voyageIds = arr.join(",");
+      break;
+    }
+    case "航次跟踪": {
+      path = "/voyage/exportMultExcel";
+      type = "application/zip";
+      postData.date = currentMonth.value;
+      title = `${exportModalTitle.value}${currentMonth.value}`;
+
+      break;
+    }
+    case "卸货记录": {
+      path = "/voyage/exportMultDischargeExcel";
+      type = "application/zip";
+      postData.date = currentMonth.value;
+      title = `${exportModalTitle.value}${currentMonth.value}`;
+      break;
+    }
+  }
+  try {
+    let res = await downloadBlobFile(
+      `${url.baseurl}${path}`,
+      postData,
+      title,
+      "post",
+      type
+    );
+    console.log(res);
+    if (res.status == 0) {
+      ElNotification({
+        title: "导出成功!",
+        type: "success",
+      });
+    } else {
+      ElNotification({
+        title: "暂无数据",
+      });
+    }
+  } catch (error) {
+    console.log(error);
+    ElNotification({
+      title: "暂无数据",
+    });
+  } finally {
+    isLoadingZip.value = false;
+    currentMonth.value = "";
+    exportModalVisable.value = false;
+  }
+}
+
+async function downloadFYDI() {
+  let res0 = await api.getFYFIDownloadUrl({
+    loginAccountId: localStorage.loginAccountId,
+  });
+
+  if (res0.data.result == 1) {
+    ElNotification({
+      type: "info",
+      title: "更新中",
+    });
+  } else {
+    let url = res0.data.result;
+    let a = document.createElement("a");
+    a.setAttribute("href", url);
+    a.click();
+  }
+}
+
 onMounted(() => {
   getVoyageList();
 });
@@ -840,7 +988,7 @@ onMounted(() => {
 
 .radio-btns {
   height: 38px;
-  width: 70px;
+  width: 60px;
   border: 1px solid #1486f9;
   line-height: 38px;
   text-align: center;
@@ -860,7 +1008,7 @@ onMounted(() => {
 .right-radius {
   border-top-right-radius: 19px;
   border-bottom-right-radius: 19px;
-  width: 80px;
+  width: 70px;
 }
 .currentbtn {
   background: #1486f9;