performance-form-ui-pc/src/views/poShipmentTable.vue

<template>
  <el-row v-loading="loading">
    <el-col :span="8" style="width: 824px">
      <period-date-picker
        :start="parmValue.start"
        :end="parmValue.end"
        :type="1"
        :width="'145px'"
        :placeholder="'发货'"
        :size="searchSize"
        @timeReturned="timeReturned($event)"
      />
    </el-col>

    <el-col :span="4" class="fr" style="width: 300px">
      <el-button
        type="primary"
        class="fr ml10"
        icon="el-icon-download"
        :size="searchSize"
        @click="Export()"
        >导出</el-button
      >

      <el-button
        type="warning"
        class="fr ml10"
        :size="searchSize"
        @click="restSearch"
      >
        重置
      </el-button>
    </el-col>
  </el-row>
</template>

<script>
import { baseApi2 } from "@/config";

export default {
  name: "poShipmentTable ",

  data() {
    return {
      searchSize: "small",
      size: "mini",
      loading: false,
      parmValue: {
        start: "",
        end: "",
      },
    };
  },
  methods: {
    async timeReturned(e) {
      if (e.startTime !== "") {
        this.parmValue.start = e.startTime;
      } else {
        this.parmValue.start = "";
      }
      if (e.endTime !== "") {
        this.parmValue.end = e.endTime;
      } else {
        this.parmValue.end = "";
      }
    },

    restSearch() {
      this.parmValue = {
        start: "",
        end: "",
      };
    },

    async timeVerification() {
      return new Promise(async (resolve, reject) => {
        if (this.parmValue.start === "" && this.parmValue.end === "") {
          resolve({ ok: false, msg: "请选择时间区间！" });
        } else if (
          (this.parmValue.start === "" && this.parmValue.end !== "") ||
          (this.parmValue.start !== "" && this.parmValue.end === "")
        ) {
          resolve({ ok: false, msg: "时间区间不完整！" });
        } else {
          resolve({ ok: true, msg: "ok" });
        }
      });
    },
    /**
     * 批量导出开票信息
     */
    async Export() {
      if (!this.loading) {
        this.timeVerification().then(async (r) => {
          if (!r.ok) {
            this.$message.warning(r.msg);
          } else {
            this.loading = true;
            let url = "fhreport";
            let httpType = `aplication/zip`;
            let title =
              this.parmValue.start !== ""
                ? `采购单发货数据时间${this.parmValue.start}至${this.parmValue.end}`
                : "";
            axios({
              method: "post",
              url: baseApi2 + url,
              responseType: "blob",
              data: this.parmValue,
              headers: {
                Accept: httpType,
              },
            })
              .then((res) => {
                if (res && res.status == 200 && res.data) {
                  let blob = new Blob([res.data], {
                    type: httpType,
                  });
                  let url = window.URL.createObjectURL(blob);
                  let aLink = document.createElement("a");
                  aLink.style.display = "none";
                  aLink.href = url;
                  aLink.setAttribute("download", `${title}.zip`);
                  document.body.appendChild(aLink);
                  aLink.click();
                  document.body.removeChild(aLink); //下载完成移除元素
                  window.URL.revokeObjectURL(url); //释放掉blob对象
                  this.$message.success(`${title}信息导出成功！`);
                  setTimeout(() => {
                    this.loading = false;
                  }, 500);
                } else {
                  this.$message.error(res.data.message);
                  setTimeout(() => {
                    this.loading = false;
                  }, 500);
                }
              })
              .catch((error) => {
                console.log(error);
                this.loading = false;
              });
          }
        });
      }
    },
  },
};
</script>

<style>
</style>