accout-ui/src/views/search/standBook/index.vue

<template>
  <div class="standBook pagePadding">
    <div
      v-loading="loading"
      v-if="powers && powers.length > 0 && powers.some((item) => item == '001')"
    >
      <el-row style="padding: 10px 0 0 0">
        <el-col :span="4" style="width: 200px; padding: 0 10px 0 0" class="fl">
          <el-select
            v-model="value"
            :size="searchSize"
            placeholder="请选择类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6" style="width: 292px">
            <period-date-picker
            :start="parmValue.start"
            :end="parmValue.end"
            :type="2"
            :width="'135px'"
            :size="searchSize"
            @timeReturned="timeReturned($event)"
          />
        </el-col>
        <el-col
          :span="4"
          style="width: 83px"
          class="fr"
          v-if="powers.some((item) => item == '049')"
        >
          <el-button
            type="primary"
            class="fr"
            icon="el-icon-download"
            :size="searchSize"
            @click="batchExport(selection)"
            >导出</el-button
          >
        </el-col>
        <el-col
          :span="4"
          class="fr"
          style="width: 66px; margin: 0 0 0 10px"
          v-if="powers.some((item) => item == '024')"
        >
          <el-button
            type="warning"
            class="fr"
            :size="searchSize"
            @click="restSearch"
          >
            重置
          </el-button>
        </el-col>
      </el-row>
    </div>

    <no-auth v-else></no-auth>
  </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: "standBook",
  mixins: [resToken],
  components: {
    PeriodDatePicker,
  },
  computed: {
    //组件SIZE设置
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    //组件SIZE设置
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "standBook"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  data() {
    return {
      options: [
        {
          value: "1",
          label: "确认单台账",
        },
        {
          value: "2",
          label: "确认单明细",
        },
        {
          value: "3",
          label: "采购单台账",
        },
        {
          value: "4",
          label: "采购单明细",
        },

        {
          value: "5",
          label: "退货台账",
        },
      ],
      value: "1",

      loading: false,

      fileUrl: urlConfig.baseURL + "Admin/",
      parmValue: {
        start:"",
        end:"",
      },
      // 表格 - 数据
      tableData: [],
    };
  },
  mounted() {},
  methods: {
    restSearch() {
      // console.log("123456789");
      this.value = "1";
      this.parmValue = {
        starttime: "",
        endtime: "",
      };
    },

     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 = "";
      }
    },

    /**
     * 批量导出开票信息
     * * @param {Array} selection //选中的对账编码
     */
    async batchExport() {
      if (!this.loading) {
        if (this.parmValue.start === "" || this.parmValue.end === "") {
          this.$message.warning("请选择时间区间！");
          return;
        }
        this.loading = true;
        let url = "";
        if (this.value === "1") {
          url = "downreportqrdtz";
        } else if (this.value === "2") {
          url = "downreportqrd";
        } else if (this.value === "3") {
          url = "downreportcgdtz";
        } else if (this.value === "4") {
          url = "downreportcgd";
        } else {
          url = "downreportthtz";
        }
        this.loading = true;

        let httpType = `aplication/zip`;
        axios({
          method: "post",
          url: urlConfig.baseURL + url,
          responseType: "blob",
          data: this.parmValue,
          headers: {
            Accept: httpType,
          },
        })
          .then((res) => {
            if (res && res.status == 200 && res.data) {
              let title =
                (this.options.find((item) => item.value == this.value) || {})
                  .label || "--";
              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",
                `${this.parmValue.start}至${this.parmValue.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(res.data.message);
              setTimeout(() => {
                this.loading = false;
              }, 500);
            }
          })
          .catch((error) => {
            this.loading = false;
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>