order-ui-pc/src/views/reportQuery/financeReport/real-time-export.vue

<template>
  <div class="real-time-export" v-loading="loading">
    <div class="financeReport-ul-box">
      <ul class="financeReport-ul clearfix">
        <li v-for="item in options" :key="item.value">
          <div class="label">{{ item.label }}：</div>
          <div class="time">
            <period-date-picker
              :start="item.start"
              :end="item.end"
              :type="3"
              :width="'135px'"
              :size="searchSize"
              @timeReturned="timeReturned($event, item.value)"
            />
          </div>
          <div class="operation">
            <el-button
              type="primary"
              class="fr"
              icon="el-icon-download"
              style="margin-left: 15px"
              :size="searchSize"

              @click="batchExport(item.value)"
              >下载</el-button
            >
            <el-button
              type="warning"
              class="fr"
              :size="searchSize"
              @click="restSearch(item.value)"
            >
              重置
            </el-button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import resToken from "@/mixins/resToken";
import urlConfig from "@/apis/url-config";
import PeriodDatePicker from "./components/PeriodDatePicker";
import { mapGetters } from "vuex";
export default {
  name: "financeReport",
  mixins: [resToken],
  components: {
    PeriodDatePicker,
  },
  computed: {
    //组件SIZE设置
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    //组件SIZE设置
    powers() {
      const tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "financeReport"
        ) || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },
  data() {
    return {
      options: [
        // {
        //   value: "13",
        //   label: "出入库明细表",
        //   start: "",
        //   end: "",
        //   url: "outinreport",
        // },
        // {
        //   value: "14",
        //   label: "收入明细表",
        //   start: "",
        //   end: "",
        //   url: "inforeport",
        // },
        // {
        //   value: "15",
        //   label: "回票公司明细表",
        //   start: "",
        //   end: "",
        //   url: "invcomreport",
        // },
        // {
        //   value: "16",
        //   label: "回票明细表",
        //   start: "",
        //   end: "",
        //   url: "invreport",
        // },
        // {
        //   value: "11",
        //   label: "应收账款账龄表",
        //   start: "",
        //   end: "",
        //   url: "downqrdpay",
        // },
        // {
        //   value: "12",
        //   label: "应收账款开票汇总表",
        //   start: "",
        //   end: "",
        //   url: "downqrdinv",
        // },

        // {
        //   value: "6",
        //   label: "应收台账",
        //   start: "",
        //   end: "",
        //   url: "Admin/downreportcwtz",
        // },
        // {
        //   value: "1",
        //   label: "确认单台账",
        //   start: "",
        //   end: "",
        //   url: "Admin/downreportqrdtz",
        // },
        // {
        //   value: "2",
        //   label: "确认单明细",
        //   start: "",
        //   end: "",
        //   url: "Admin/downreportqrd",
        // },
        {
          value: "16",
          label: "经营分析报表",
          start: "",
          end: "",
          url: "Admin/getjingfen",
        },
        // {
        //   value: "3",
        //   label: "采购单台账",
        //   start: "",
        //   end: "",
        //   url: "Admin/downreportcgdtz",
        // },
        // {
        //   value: "4",
        //   label: "采购单明细",
        //   start: "",
        //   end: "",
        //   url: "Admin/downreportcgd",
        // },

        // {
        //   value: "5",
        //   label: "退货台账",
        //   start: "",
        //   end: "",
        //   url: "Admin/downreportthtz",
        // },
        // {
        //   value: "7",
        //   label: "核算确认单",
        //   start: "",
        //   end: "",
        //   url: "downqrd",
        // },
        // {
        //   value: "8",
        //   label: "核算采购单",
        //   start: "",
        //   end: "",
        //   url: "downcgd",
        // },
        // {
        //   value: "9",
        //   label: "业绩确认采购单",
        //   start: "",
        //   end: "",
        //   url: "downqrdtz",
        // },
        // {
        //   value: "10",
        //   label: "业绩退货单",
        //   start: "",
        //   end: "",
        //   url: "downth",
        // },
      ],
      loading: false,
      fileUrl: urlConfig.baseURL,
    };
  },
  methods: {
    restSearch(type) {
      let index = this.resType(type);
      if (index !== -1) {
        this.options[index].start = "";
        this.options[index].end = "";
      }
    },

    async timeReturned(e, type) {
      let index = this.resType(type);
      if (index !== -1) {
        if (e.startTime !== "") {
          this.options[index].start = e.startTime;
        } else {
          this.options[index].start = "";
        }
        if (e.endTime !== "") {
          this.options[index].end = e.endTime;
        } else {
          this.options[index].end = "";
        }
      }
    },

    resType(value) {
      return this.options.findIndex((v1) => v1.value === value);
    },
    /**
     * 批量下载开票信息
     * * @param {Array} selection //选中的对账编码
     */
    async batchExport(type) {
      let index = this.resType(type);
      if (index !== -1) {
        let url = this.options[index].url;
        let title = this.options[index].label;
        let model = {
          start: this.options[index].start,
          end: this.options[index].end,
        };
        if (!this.loading) {
          if (model.start === "" || model.end === "") {
            this.$message.warning("请选择时间区间！");
            return;
          }
          this.loading = true;
          let httpType = `aplication/zip`;
          axios({
            method: "post",
            url: this.fileUrl + url,
            responseType: "blob",
            data: model,
            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",
                  `${model.start}至${model.end}${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("时间区间过长，请修改后再试！");
                setTimeout(() => {
                  this.loading = false;
                }, 500);
              }
            })
            .catch((error) => {
               this.$message.error("时间区间过长，请修改后再试！");
              this.loading = false;
            });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.real-time-export {
  .financeReport-ul-box {
    width: 100%;
    padding: 0 10% 0 4%;
    text-align: center;

    .financeReport-ul {
      width: 680px;
      display: block;
      box-sizing: border-box;
      text-align: left;
      margin: 0 auto;
      li {
        float: left;
        width: 100%;
        display: block;
        box-sizing: border-box;
        padding: 10px 0;
        .label {
          width: 180px;
          float: left;
          height: 32px;
          text-align: right;
          line-height: 32px;
          padding: 0 15px 0 0;
        }
        .time {
          float: left;
          width: 300px;
        }
        .operation {
          float: left;
          width: 160px;
        }
      }
    }
  }
}
</style>