report-form-h5/src/components/moonCakeReport.vue

<template>
  <div class="moonCakeReport">
    <el-table
      :data="tableData"
      v-loading="loading"
      border
      :max-height="maxHeight"
      :size="'mini'"
      :span-method="objectSpanMethod"
      style="width: 100%"
    >
      <el-table-column prop="itemName" label="部门" fixed="left" width="60"/>
     
      <el-table-column show-overflow-tooltip label="价格(元)" min-width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.sale_price | toThousandFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="累计销售数量" min-width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.num | toThousandFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="金额(万元)" min-width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.total_fee | toThousandFilter }}</span>
        </template>
      </el-table-column>
       <el-table-column show-overflow-tooltip prop="good_code" label="成本商品编号"  min-width="160"/>
    </el-table>
  </div>
</template>

<script>
import asyncRequest from "@/api/index";
import setHeight from "@/mixins/index";
export default {
  name: "moonCakeReport",
  mixins: [setHeight],
  watch: {
    date: function (val) {
      this.dataTime = val;
      if (val) {
        this.searchList();
      }
    },
  },
  data() {
    return {
      dataTime: this.date,
      loading: false,
      maxHeight: "0",
      tableData: [],
    };
  },
  async created() {
    window.onresize = () => {
      this.getHeight();
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getHeight();
    });
    this.searchList();
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const { index, span_total } = row;
      // console.log(column);
      console.log(rowIndex);
      console.log(columnIndex);
      if (columnIndex === 0) {
        if (index === 0) {
          return {
            rowspan: span_total,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    async searchList() {
      this.loading = true;
      this.tableData = [];
      const { code, data } = await asyncRequest.salereport({});
      if (code === 0) {
        data.forEach((a, ai) => {
          a.child.forEach((b, bi) => {
            let model = {
              index: bi,
              good_code: b.good_code,
              itemName: a.itemName,
              itemid: b.itemid,
              num: b.num,
              sale_price: b.sale_price,
              total_fee: b.total_fee,
              span_total: a.child.length,
            };
            this.tableData.push(model);
          });
        });
        console.log(this.tableData);
      } else {
        this.tableData = [];
      }
      this.getHeight();
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.moonCakeReport {
}
</style>