order-ui-pc/src/views/businessReportQuery/businessPurchaseReport/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 v-for="(item,index) in table2" :key="index" :prop="item.prop" :label="item.label" />

      <el-table-column label="待与供应商确认">
        <el-table-column label="总金额" prop="wait_confirm_total_fee" />
        <el-table-column label="总单数" prop="wait_confirm_total_num" />
      </el-table-column>

      <el-table-column label="待入库">
        <el-table-column label="总金额" prop="wait_in_total_fee" />
        <el-table-column label="总单数" prop="wait_in_total_num" />
      </el-table-column>

    </el-table>
    <!-- <el-pagination
        :current-page.sync="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/businessReportQuery/purchaseReport'
import periodDatePickerActive from '../period-date-picker/main.vue'
import * as dayjs from 'dayjs'
import { table2 } from './columns'
import { mapGetters } from 'vuex'
import companyHelper from '@/mixins/companyHelper'

export default {
  name: 'PurchaseOrder',
  components: {
    periodDatePickerActive
  },
  mixins: [mixinPage, resToken, companyHelper],
  computed: {
    ...mapGetters(['tablebtnSize', 'searchSize', 'size'])
  },
  data() {
    return {
      // 选中数组
      changeList: [],
      // 全局url
      fileUrl: urlConfig.baseURL,
      // loading
      loading: false,
      // 请求参数集合
      parmValue: {
        start_date: dayjs(this.getStartDate()).format('YYYY-MM-DD'), // 起始时间
        end_date: dayjs(new Date()).format('YYYY-MM-DD'), // 结束时间
        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.parmValue.page = 1
      // this.pageInfo.total = val;

      this.searchList()
    },
    handleCurrentChange(val) {
      // this.pageInfo.total = val;
      this.parmValue.page = val
      this.searchList()
    },
    getDiffDay(date_1, date_2) {
      let totalDays, diffDate
      const myDate_1 = Date.parse(date_1)
      const myDate_2 = Date.parse(date_2)
      diffDate = Math.abs(myDate_1 - myDate_2)
      totalDays = Math.floor(diffDate / (1000 * 3600 * 24))
      return totalDays // 相差的天数
    },
    getStartDate() {
      const myDate = new Date()
      myDate.setDate(myDate.getDate() - 7)
      return myDate
    },
    // 合并方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        // 合并相同的名字
        const nameSpan = this.getSpanNumber(this.tableData, 'addtime')
        return {
          rowspan: nameSpan[rowIndex],
          colspan: 1
        }
      }
    },
    // 获取要合并的行数
    getSpanNumber(data, prop) {
      // data要处理的数组，prop要合并的属性，比如name

      // 数组的长度，有时候后台可能返回个null而不是[]
      const length = Array.isArray(data) ? data.length : 0
      if (length > 0) {
        // 用于标识位置
        let position = 0
        // 用于对比的数据
        let temp = data[0][prop]
        // 要返回的结果
        const 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
      }

      const diffDays = this.getDiffDay(this.parmValue.start_date, this.parmValue.end_date)

      if (Math.abs(diffDays) > 30) {
        return this.$message.warning('时间区间不能超过30天')
      }

      // return;
      this.loading = true

      const res = await asyncRequest.reportpurcheaseordersum({
        ...this.parmValue,
        needRela: true
      })

      if (res && res.code === 0 && res.data) {
        this.tableData = res.data
        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, // 每页显示条数
        start_date: dayjs(this.getStartDate()).format('YYYY-MM-DD'), // 起始时间
        end_date: dayjs(new Date()).format('YYYY-MM-DD')
      }
      // 表格 - 分页
      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 || ''
      if (
        (this.parmValue.start_date !== '' && this.parmValue.end_date === '') ||
        (this.parmValue.start_date === '' && this.parmValue.end_date !== '')
      ) {
        this.$message.warning('时间区间不完整！')
        return
      }
      this.pageInfo.curr = 1
      this.parmValue.page = 1
      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>