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

<template>
  <div class="SalesReportRejectedNew">
    <!-- <div class="title">业绩达成报表(含退货)-产品确认单</div> -->
    <!-- stripe -->
    <el-table
      :data="tableData"
      v-loading="loading"
      border
      :max-height="maxHeight"
      :size="'mini'"
      style="width: 100%"
      row-key="id"
      default-expand-all
      :row-class-name="tableRowClassName"
      :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="p" label="业绩类型" fixed="left" min-width="120">
      </el-table-column>
      <el-table-column label="本日金额" min-width="120" align="center">
        <el-table-column show-overflow-tooltip label="销售" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.dtotal | toThousandFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="退款" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.thfee | toThousandFilter }}</span>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="本周金额" min-width="120" align="center">
        <el-table-column show-overflow-tooltip label="销售" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.wtotal | toThousandFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="退款" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.wthfee | toThousandFilter }}</span>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="本月金额" min-width="120" align="center">
        <el-table-column show-overflow-tooltip label="销售指标" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.tips | toThousandFilter }}</span>
          </template>
        </el-table-column>

        <el-table-column show-overflow-tooltip label="销售" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.total | toThousandFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="销售完成率" min-width="95">
          <template slot-scope="scope">
            <span>{{ scope.row.rate ? scope.row.rate + "%" : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="退款" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.mthfee | toThousandFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="净销售" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.thtotal | toThousandFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="净销售完成率" min-width="95">
          <template slot-scope="scope">
            <span>{{ scope.row.thrate ? scope.row.thrate + "%" : "" }}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import asyncRequest from "@/api/index";
import setHeight from "@/mixins/index";
export default {
  name: "SalesReportRejectedNew",
  props: ["date"],
  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: {
    tableRowClassName({ row , rowIndex}) {
      if (row && row.child && row.child.length > 0||rowIndex===0) {
        return "warning-row";
      } else {
        return "";
      }
    },
    async searchList() {
      this.loading = true;
      this.tableData = [];
      const res = await asyncRequest.statlist({
        date: this.date ? this.date : "",
      });
      if (res.code === 0 && res.data && res.data.length > 0) {
        this.tableData = res.data;
        this.tableData.map((v1, i1) => {
          v1.id = i1 + "";
          v1.p = v1.p ? v1.p : v1.depart;
          if (v1.child && v1.child.length > 0) {
            v1.child.map((v2, i2) => {
              v2.id = "" + v1 + i2;
              return v2;
            });
          }
          return v1;
        });
      } else {
        this.tableData = [];
      }
      this.getHeight();
      this.loading = false;
    },
  },
};
</script>

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