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')"
    >
      <div class="standBook-ul-box">
        <ul class="standBook-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="0"
                :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"
                v-if="powers.some((item) => item == '049')"
                @click="batchExport(item.value)"
                >导出</el-button
              >
              <el-button
                v-if="powers.some((item) => item == '024')"
                type="warning"
                class="fr"
                :size="searchSize"
                @click="restSearch(item.value)"
              >
                重置
              </el-button>
            </div>
          </li>
        </ul>
      </div>
    </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: "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: "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,
      // 表格 - 数据
      tableData: [],
    };
  },
  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(res.data.message);
                setTimeout(() => {
                  this.loading = false;
                }, 500);
              }
            })
            .catch((error) => {
              this.loading = false;
            });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.standBook {
  .standBook-ul-box {
    width: 100%;
    padding: 25px 10% 0 4%;
    text-align: center;

    .standBook-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: 12px 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>