ngds/frontendEle/src/views/shop/ba-dec-order-list.vue

<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-table class="withdraw-table" :data="tableData" :max-height="maxHeight" style="width: 100%;" :span-method="objectSpanMethod">
        <el-table-column width="120" label="Product code" prop="SKU_CODE"></el-table-column><!--商品编号-->
        <el-table-column width="120" label="Product Name" prop="GOODS_TITLE"></el-table-column><!--商品名称-->
        <el-table-column width="120" label="Product Price" prop="REAL_PRICE"></el-table-column><!--报单金额-->
        <el-table-column width="120" label="Product BV" prop="REAL_PV"></el-table-column><!--报单BV-->
        <el-table-column width="120" label="Qty" prop="BUY_NUMS"></el-table-column><!--数量-->
        <el-table-column width="120" label="Tax rate" prop="TAX_RATE"></el-table-column><!--税率-->
        <el-table-column width="120" label="Tax" prop="TAX_AMOUNT"></el-table-column><!--税额-->
        <el-table-column width="120" label="Total Price" prop="TOTAL_AMOUNT"></el-table-column><!--总计金额-->
        <el-table-column width="120" label="Code" prop="DEC_SN"></el-table-column><!--报单编号-->
        <el-table-column width="120" label="Order code" prop="ORDER_SN"></el-table-column><!--订单编号-->
        <el-table-column width="120" label="Member code" prop="USER_NAME"></el-table-column><!--会员编号-->
        <el-table-column width="120" label="Member name" prop="REAL_NAME"></el-table-column><!--会员姓名-->
        <el-table-column width="150" label="Shipping Address" prop="ADDRESS"></el-table-column><!--收货地址-->
        <el-table-column width="120" label="Sponsor code" prop="CON_USER_NAME"></el-table-column><!--接点人编号-->
        <el-table-column width="120" label="Status" prop="STATUS"></el-table-column><!--状态-->
        <el-table-column width="150" label="Created time" prop="CREATED_AT"></el-table-column >
        <el-table-column width="120" label="Action"><!--操作-->
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click.native="handleOrderExportPDF(scope.row.ORDER_SN)">Export PDF</el-button><!--导出PDF-->
          </template>
        </el-table-column>
      </el-table>
      <div class="white-box-footer">
          <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
      </div>
    </div>
  </div>
</template>

<script>
import network from '@/utils/network'
import tool from '@/utils/tool'
import Pagination from '@/components/Pagination'
import {SERVER_API_HTTP_TYPE, SERVER_API_DOMAIN,SERVER_API_PORT} from '@/utils/config'
export default {
  name: 'dec-order-list',
  components: {Pagination},
  mounted () {
    this.getData()
  },
  data () {
    return {
      loading: false,
      form: {},
      tableData: null,
      list: null,
      currentPage: 1,
      totalPages: 1,
      totalCount: 1,
      pageSize: 20,
      tool: tool,
      // 订单号判断
      spanArr: [], // 用于存放需要合并的行的个数
      pos: 0, // 记录spanArr数组的下标
      maxHeight: tool.getTableHeight()
    }
  },
  methods: {
    objectSpanMethod (obj) {
      if (obj.columnIndex >= 7) {
      // ⼆维数组存储的数据取出
        let _row = this.spanArr[obj.rowIndex]
        let _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      } else {
        return false
      }
    },
    getSpanArr (orderList) { // 传⼊你的列表数据
      this.pos = 0
      orderList.forEach((item, index) => {
        // 判断是否是第⼀项
        if (index === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 不是第⼀项时，就根据标识去存储
          if ( // orderSn，createdAt...是你的第⼀个数据、第⼆个数据...
            orderList[index].DEC_SN === orderList[index - 1].DEC_SN &&
            orderList[index].ORDER_SN === orderList[index - 1].ORDER_SN &&
            orderList[index].USER_NAME === orderList[index - 1].USER_NAME &&
            orderList[index].REAL_NAME === orderList[index - 1].REAL_NAME &&
            orderList[index].CON_USER_NAME === orderList[index - 1].CON_USER_NAME &&
            orderList[index].P_CALC_MONTH === orderList[index - 1].P_CALC_MONTH
          ) {
            // 查找到符合条件的数据时每次要把之前存储的数据+1
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            // 没有符合的数据时，要记住当前的index
            this.spanArr.push(1)
            this.pos = index
          }
        }
      })
    },
    handleCurrentChange (page) {
      this.getData(page, this.pageSize)
    },
    handleSizeChange (pageSize) {
      this.getData(this.currentPage, pageSize)
    },
    getData (page, pageSize) {
      this.spanArr = []
      this.pos = 0
      let _this = this
      network.getPageData(_this, 'shop/ba-dec-order-list', page, pageSize, {type: this.type}, function (response) {
        _this.loading = false
        _this.list = response.list
        let settingObj = _this.list

        _this.tableData = Object.keys(settingObj).map(key => {
          return settingObj[key] // 把每个对象返回出去生成一个新的数组中相当于0:{id:1}
        })
        _this.getSpanArr(_this.tableData)
      })
    },
    // 导出PDF订单
    handleOrderExportPDF (orderSn) {
      network.getData(`shop/ba-dec-order-export/${orderSn}`).then(response => {
        let { fileUrl, targetName } = response
        let downloadElement = document.createElement('a')
        downloadElement.target = '_blank'
        downloadElement.href = SERVER_API_HTTP_TYPE + SERVER_API_DOMAIN + SERVER_API_PORT + '/' + fileUrl
        // 下载后文件名
        downloadElement.download = targetName
        // 点击下载
        downloadElement.click()
      })
    }
  }
}
</script>

<style scoped>

</style>