order-ui-pc/src/views/reportQuery/purchaseReport/components/table2.vue

<template>
  <div v-loading="loading">
    <div style="width: 100%">
      <el-row style="padding: 10px 0 0 0px">
        <el-col :span="6" style="width: 363px">
          <periodDatePickerActive
            :start="parmValue.start_date"
            :end="parmValue.end_date"
            :placeholder="'咨询'"
            :width="'165px'"
            :size="searchSize"
            @timeReturned="time"
          />
        </el-col>
        <!-- <el-col :span="4" style="width: 66px; float: right">
          <el-button
            type="primary"
            style="margin-left: 30px"
            @click="download"
            :size="searchSize"
            class="fr"
          >
            导出
          </el-button>
        </el-col> -->
        <el-col :span="3" style="width: 66px; float: right">
          <el-button
            :size="searchSize"
            type="primary"
            style="float: right; margin-left: 5px"
            @click="searchList"
          >
            刷新
          </el-button>
        </el-col>
        <el-col :span="4" style="width: 66px; float: right">
          <el-button
            type="warning"
            class="fr"
            :size="searchSize"
            @click="restSearch"
          >
            重置
          </el-button>
        </el-col>
      </el-row>
    </div>
    <el-table
      :data="tableData"
      :size="searchSize"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column :prop="item.prop" :label="item.label" v-for="(item,index) in table2" :key="index"/>
      
    </el-table>
    <el-pagination
        :current-page="pageInfo.curr"
        :page-sizes="[15, 50, 100]"
        :page-size="pageInfo.size"
        :size="searchSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
  </div>
</template>
   <script>
import mixinPage from "@/mixins/elPaginationHandle";
import resToken from "@/mixins/resToken";
import urlConfig from "@/apis/url-config";
import asyncRequest from "@/apis/service/reportQuery/purchaseReport";
import periodDatePickerActive from "../period-date-picker/main.vue";
import { table2 } from "./columns";
import { mapGetters } from "vuex";

export default {
  name: "purchaseOrder",
  mixins: [mixinPage, resToken],
  components: {
    periodDatePickerActive,
  },
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
  },
  data() {
    return {
      //选中数组
      changeList: [],
      //全局url
      fileUrl: urlConfig.baseURL,
      //loading
      loading: false,
      //请求参数集合
      parmValue: {
        start_date: "", //起始时间
        end_date: "", // 结束时间

        page: 1, // 页码
        size: 15, // 每页显示条数
      },
      // 表格 - 数据集合
      tableData: [
      ],
      // 表格 - 参数
      table: {
        stripe: true,
        border: true,
        _defaultHeader_: ["setcol"],
      },
      // 表格 - 分页
      pageInfo: {
        size: 15,
        curr: 1,
        total: 0,
      },
      // 表格表头 - 列参数
      table2: table2,
    };
  },
  mounted() {
    this.searchList();
  },

  methods: {
     //分页集合
    handleSizeChange(val){
      this.parmValue.size = val;
      this.searchList() 
    },
    handleCurrentChange(val){
      this.parmValue.page = val;
      this.searchList()
    },
     //合并方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        //合并相同的名字
        let nameSpan = this.getSpanNumber(this.tableData, "addtime");
        return {
          rowspan: nameSpan[rowIndex],
          colspan: 1,
        };
      }
    },
    //获取要合并的行数
    getSpanNumber(data, prop) {
      //data要处理的数组，prop要合并的属性，比如name

      //数组的长度，有时候后台可能返回个null而不是[]
      let length = Array.isArray(data) ? data.length : 0;
      if (length > 0) {
        //用于标识位置
        let position = 0;
        //用于对比的数据
        let temp = data[0][prop];
        //要返回的结果
        let result = [1];
        //假设数据是AABCC，我们的目标就是返回20120
        for (let i = 1; i < length; i++) {
          if (data[i][prop] == temp) {
            //标识位置的数据加一
            result[position] += 1;
            //当前位置添0
            result[i] = 0;
          } else {
            //不相同时，修改标识位置，该位置设为1，修改对比值
            position = i;
            result[i] = 1;
            temp = data[i][prop];
          }
        }
        //返回结果
        return result;
      } else {
        return [0];
      }
    },
    //初始化http请求
    async searchList() {
      if (
        (this.parmValue.start_date !== "" && this.parmValue.end_date === "") ||
        (this.parmValue.start_date === "" && this.parmValue.end_date !== "")
      ) {
        this.$message.warning("时间区间不完整！");
        return;
      }
      // return;
      this.loading = true;

      const res = await asyncRequest.reportpurcheaseordersum(this.parmValue);
      if (res && res.code === 0 && res.data) {
        this.tableData = res.data.list;
        this.pageInfo.total = Number(res.data.count);
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
        this.$message.warning(res.message)
      }
      this.loading = false;
    },

    //重置
    restSearch() {
      this.parmValue = {
        start_date: "", //新建起始时间
        end_date: "", // 新建结束时间
        page: 1, // 页码
        size: 15, // 每页显示条数
      };
      // 表格 - 分页
      this.pageInfo = {
        size: 15,
        curr: 1,
        total: 0,
      };
      this.searchList();
    },

    // 时间函数
    async time(e) {
      this.parmValue.start_date = e.startTime || "";
      this.parmValue.end_date = e.endTime || "";
      await this.searchList();
    },

    //选中触发函数
    selection_change(e) {
      const { list } = e;
      //选中的数组集合
      this.changeList = list.length > 0 ? JSON.parse(JSON.stringify(list)) : [];
    },
    //导出文件
    // async download() {
    //   if (this.changeList.length <= 0) {
    //     this.$message.warning("请选择有效数据");
    //     return;
    //   }
    //   let model = {
    //     cgdNos: [],
    //   };
    //   this.changeList.forEach((item) => {
    //     model.cgdNos.push(item.cgdNo);
    //   });

    //   // const res = await asyncRequest.exportcgdlist(model)

    //   if (!this.loading) {
    //     this.loading = true;
    //     let httpType = `aplication/zip`;
    //     axios({
    //       method: "post",
    //       url: this.fileUrl + "admin/exportcgdlist",
    //       responseType: "blob",
    //       data: model,
    //       headers: {
    //         // 'Content-Type': 'multipart/form-data',
    //         // Accept: "application/vnd.ms-excel"
    //         Accept: httpType,
    //       },
    //     })
    //       .then((res) => {
    //         // console.log(res)
    //         // console.log(this.fileUrl)
    //         // return;
    //         if (res && res.status == 200 && res.data) {
    //           let url = window.URL.createObjectURL(
    //             new Blob([res.data], {
    //               // type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
    //               type: httpType,
    //             })
    //           );
    //           let link = document.createElement("a");
    //           link.style.display = "none";
    //           link.href = url;
    //           let excelName = "采购单.zip";
    //           link.setAttribute("download", excelName);
    //           document.body.appendChild(link);
    //           link.click();
    //           link.remove();
    //           window.URL.revokeObjectURL(url); //释放掉blob对象
    //           this.$message.success(`导出成功！`);
    //           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 lang="scss" scoped>
.purchaseOrder {
  // text-align: right;
}
/deep/ .el-pagination{
  float: right;
    margin-top: 10px;
}
</style>