data-dashboard/src/components/newResultInfo/department.vue

<template>
  <div v-loading="loading">
    <div class="search clear">
      <div style="float:left;line-height:30px;display:flex;align-items:center">
        <el-popover placement="top" width="200" trigger="hover" content="不含业务公司供应商端数据">
          <template #reference>
            <i
              class="el-icon-warning-outline"
              style="font-size:16px;cursor:pointer;padding-top:5px;padding-right:5px;display:inline-block"
            ></i>
          </template>
        </el-popover>部门完成情况
      </div>

      <div style="float:right">
        <el-select
          size="small"
          style="margin-right:10px;width:135px"
          v-model="companyNo"
          @change="requestData"
          :disabled="isEmpty"
        >
          <el-option
            v-for="depart in cp_companies"
            :key="depart.value"
            :label="depart.label"
            :value="depart.value"
          />
        </el-select>

        <el-date-picker
          :disabled="isEmpty"
          class="fr picker no-padding"
          v-model="daytime"
          :picker-options="{ disbaledData(time) { return time.getTime() > Date.now(); } }"
          style=";width:100px"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          :editable="false"
          :clearable="false"
          placeholder="选择日期"
          :size="'small'"
          align="right"
          type="date"
        />
      </div>
    </div>

    <el-row style="margin-top: 10px; display: flex;width:100%;margin-top:10px" v-if="!isEmpty">
      <el-table
        border
        size="mini"
        :data="list"
        :header-cell-class-name="setHeaderClassName"
        :cell-class-name="setCellClassName"
        :span-method="spanMethod"
      >
        <!-- <el-table-column fixed="left" label="公司" prop="company" align="center" width="45px" /> -->

        <el-table-column fixed="left" label="部门" prop="depart" align="center" width="60px">
          <template slot-scope="scope">
            <p
              style="margin:0px"
              v-for="(chunk, index) in scope.row.depart.split('@')"
              :key="index"
            >{{ chunk }}</p>
          </template>
        </el-table-column>

        <el-table-column label="业绩类型" align="center" min-width="105px">
          <template slot-scope="scope">{{ scope.row.type }}</template>
        </el-table-column>

        <el-table-column label="当月销售(净)" align="center" min-width="105px">
          <template slot-scope="scope">{{ unit2TenThousand(scope.row.monthSale,isTenThound) }}</template>
        </el-table-column>
         
         <el-table-column label="当月销售" align="center" min-width="105px">
          <template slot-scope="scope">{{ unit2TenThousand(scope.row.monthSaleNotReturn,isTenThound) }}</template>
        </el-table-column>

        <el-table-column label="销售退货" align="center" min-width="105px">
          <template slot-scope="scope">{{ unit2TenThousand(scope.row.monthReturn,isTenThound) }}</template>
        </el-table-column>

        <el-table-column label="销售合计" align="center" min-width="105px">
          <template slot-scope="scope">{{ unit2TenThousand(scope.row.monthSaleAmount,isTenThound) }}</template>
        </el-table-column>

        <el-table-column label="当月成本(净)" align="center" min-width="105px">
          <template slot-scope="scope">{{ unit2TenThousand(scope.row.monthCost,isTenThound) }}</template>
        </el-table-column>
      </el-table>
    </el-row>

    <template v-else>
      <div style="text-align:center;line-height:60px;user-select:none">当前账号没有访问权限</div>
    </template>
  </div>
</template>


<script>
import asyncRequest from "@/api/newResults";
import setHeight from "@/mixins/index";
import { mapCompany } from "./mapCompany";
import dayjs from "dayjs";

import {
  addition,
  division,
  subtraction,
  multiplication,
  unit2TenThousand
} from "../newReport/src/_utils";

export default {
  mixins: [setHeight],
  props: ["companies", "costField", "isTenThound"],
  data() {
    return {
      list: [],
      daytime: "",
      companyNo: "",
      loading: false,
      isEmpty: false,
      cp_companies: []
    };
  },
  computed: {
    currentCompanyName() {
      return this.companies.find(item => item.value === this.companyNo).label;
    }
  },
  mounted() {
    this.isEmpty = this.companies.length === 0;
    if (this.isEmpty) return;
    this.cp_companies = this.companies.map(item => ({
      ...item,
      label:
        mapCompany[item.label] === "万宇"
          ? `平台公司: 万宇`
          : `业务公司: ${mapCompany[item.label]}`
    }));

    let list = [
      "平台公司: 万宇",
      "业务公司: 百辰",
      "业务公司: 泓源",
      "业务公司: 普润",
      "业务公司: 锦兴",
      "业务公司: 知事"
    ];

    const cp_list = this.cp_companies.map(item => item.label);
    list = list.filter(item => cp_list.includes(item));
    this.cp_companies = list.map(item => this.cp_companies.find(cp_item => cp_item.label === item));
    this.companyNo = this.cp_companies[0].value;
    this.companyNo = this.cp_companies[0].value;
    this.daytime = this.transformTime();
  },
  watch: {
    daytime: {
      handler() {
        this.requestData();
      }
    }
  },
  methods: {
    addition,
    unit2TenThousand,
    setCellClassName({ column, row }) {
      const { label } = column;

      if(!label) return;

      let base = "";
      if (row.depart.indexOf("万宇") !== -1) base += "font-bold "

      if (label === "当月营收目标") {
        base += "bg__success";
        return base;
      }

      if ((label.indexOf("营业") !== -1 || label.indexOf("营收") !== -1) && label !== "当日营业收入") {
        base += "bg__success_1";
        return base;
      }

      if (label === "毛利目标") {
        base += "bg__primary";
        return base;
      }

      if (label.indexOf("毛利") !== -1) {
        base += "bg__primary_1";
        return base;
      }
      if (label.indexOf("成本") !== -1) {
        base += "bg__warning_1";
        return base;
      }

      return base;
    },
    setHeaderClassName({ column }) {
      const { label } = column;
      if (label === "当月营收目标") return "bg__success";
      if (
        (label.indexOf("营业") !== -1 || label.indexOf("营收") !== -1) &&
        label !== "当日营业收入"
      )
        return "bg__success_1";
      if (label === "毛利目标") return "bg__primary";
      if (label.indexOf("毛利") !== -1) return "bg__primary_1";
      if (label.indexOf("成本") !== -1) return "bg__warning_1";
    },
    getCurrentRateStyle(current) {
      const days = dayjs(this.daytime).daysInMonth();
      const oneDay = Number(division(100, days)).toFixed(2);
      const currentDay = dayjs(this.daytime).date();
      const currentTotalTip = Number(
        multiplication(currentDay, oneDay)
      ).toFixed(2);
      return Number(currentTotalTip) > Number(current) ? "color:red" : "";
    },
    getCurrentValueStyle(current, total) {
      const days = dayjs(this.daytime).daysInMonth();
      const oneDay = Number(division(total, days)).toFixed(2);
      const currentDay = dayjs(this.daytime).date();
      const currentTotalTip = Number(
        multiplication(currentDay, oneDay)
      ).toFixed(2);
      return Number(currentTotalTip) > Number(current) ? "color: red" : "";
    },
    transformTime() {
      let time = new Date();
      let y = time.getFullYear();
      let M = time.getMonth() + 1;
      let d = time.getDate();
      return y + "-" + (M < 10 ? "0" + M : M) + "-" + (d < 10 ? "0" + d : d);
    },
    /* 表格合并列和行 */
    spanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5) {
        const _row = this.flitterData(this.list).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return { rowspan: _row, colspan: _col };
      }
    },
    /**合并表格的第一列，处理表格数据 */
    flitterData(arr) {
      let spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          //注意这里的quarterly是表格绑定的字段，根据自己的需求来改
          if (
            (item.depart === arr[index - 1].depart)) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });

      return { one: spanOneArr };
    },
    async requestData() {
      this.loading = true;

      const res = await asyncRequest.departmentEveryDay({
        daytime: this.daytime,
        companyNo: this.companyNo
      });



      if (res.code === 0 && res.data && res.data.length > 0) {
        let list = res.data;
        const mapToDepartment = {
          百辰: "客服部@百辰",
          泓源: "网络部@泓源",
          普润: "项目部@普润",
          平台: "平台部@万宇"
        };

        list = list.filter(item => Number(item.msale_total) !== 0);
        let mapList = ["平台", "百辰", "泓源", "普润"];
        const cl = list.map(item => item.depart);
        mapList = mapList.filter(item => cl.findIndex(i => i.indexOf(item)) !== -1);
        list = mapList.map(item => list.find(i => i.depart.indexOf(item) !== -1));
        list = list.filter(item => item)
        list  = list.map(item => {
          const depart = mapToDepartment[item.depart] || '--'
          const monthSaleAmount = Number(subtraction(item.msale_total,item.mth_total)).toFixed(2)

          const zy = {
            depart,
            type:'直营/自营',
            monthSale:item.mzy_sale_total,
            monthSaleNotReturn:item.msale_total,
            monthReturn:item.mth_total,
            monthSaleAmount,
            monthCost:item.mzy_cost_total
          };

          const qd = {
            depart,
            type:'支付渠道',
            monthSale:item.mchannel_sale_total,
            monthSaleNotReturn:item.msale_total,
            monthReturn:item.mth_total,
            monthSaleAmount,
            monthCost:item.mchannel_cost_total
          };

          return [zy, qd]
        })


        const totalItem = list.reduce((prev,current) => ({
          ...prev,
          monthSaleNotReturn:Number(addition(prev.monthSaleNotReturn,current[0].monthSaleNotReturn)).toFixed(2),
          monthCost:Number(addition(Number(addition(prev.monthCost,current[0].monthCost)).toFixed(2),current[1].monthCost)).toFixed(2)
        }), {
            depart:'合计',
            type:'--',
            monthSale:'--',
            monthSaleNotReturn:0,
            monthReturn:'--',
            monthSaleAmount:'--',
            monthCost:0
        });

        console.log('🚀~',totalItem);

        const list_copy = [];
        list.forEach(item => Array.isArray(item) && item.forEach(i => list_copy.push(i)));
        this.list = [...list_copy,totalItem];
      } else {
        this.list = [];
      }
      this.getHeight();
      this.loading = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.new-results {
  .search {
    height: 36px;
    padding: 0px 10px;
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
  }
}

.table-size {
  display: flex;
  width: 200px;
  border: 1px solid #ebeef5;
  flex-direction: column;

  p {
    flex: 1;
    border-bottom: 1px solid #ebeef5;
    padding: 5px 10px;
    margin: 0px;

    &:last-child {
      border: none;
    }
  }
}
</style>