data-dashboard/src/components/newResults/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"
      >
        <!-- <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"
          >{{ unit2TenThousand(scope.row.dayinfo.sale_total, isTenThound) }}</template>
        </el-table-column>

        <el-table-column label="当月营收目标" align="center" min-width="115px">
          <template slot-scope="scope">{{ unit2TenThousand(scope.row.total_tips, isTenThound) }}</template>
        </el-table-column>

        <el-table-column label="当月营业收入(净)" align="center" min-width="120px">
          <template slot-scope="scope">
            <div style="display:flex;flex-direction: column;">
              <div style="display:flex;justify-content:center;align-items:center">
                {{ unit2TenThousand(scope.row.monthinfo.monthNetSales, isTenThound) }}
                <el-popover placement="right" :width="200" trigger="click">
                  <div class="table-size">
                    <p>直营/自营: {{ unit2TenThousand(scope.row.currentMonthPure[0].zy, isTenThound) }}</p>
                    <p>支付渠道: {{ unit2TenThousand(scope.row.currentMonthPure[0].qd, isTenThound) }}</p>
                  </div>
                  <template #reference>
                    <p
                      :style="`text-align: center;${getCurrentValueStyle(scope.row.monthinfo.monthNetSales, scope.row.total_tips)}`"
                    >
                      <i
                        class="el-icon-warning-outline trigger-hover"
                        style="font-size:16px;cursor:pointer;margin-left:5px"
                      ></i>
                    </p>
                  </template>
                </el-popover>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="当月成本" align="center" min-width="120px">
          <template slot-scope="scope">
            <div style="display:flex;justify-content:center;align-items:center"  v-if="costField">
              {{
              unit2TenThousand(Number(addition(scope.row.zy_cost, scope.row.qd_cost)).toFixed(2), isTenThound) }}
              <el-popover placement="right" :width="200" trigger="click">
                <div class="table-size">
                  <p>直营/自营: {{ unit2TenThousand(scope.row.zy_cost, isTenThound) }}</p>
                  <p>渠道: {{ unit2TenThousand(scope.row.qd_cost, isTenThound) }}</p>
                </div>
                <template #reference>
                  <p style="text-align: center;">
                    <i
                      class="el-icon-warning-outline trigger-hover"
                      style="font-size:16px;cursor:pointer;margin-left:5px"
                    ></i>
                  </p>
                </template>
              </el-popover>
            </div>

            <p v-else>***</p>
          </template>
        </el-table-column>

        <el-table-column align="center" label="当月毛利" min-width="120px">
          <template slot-scope="scope">
            <div style="display:flex;justify-content:center;align-items:center" v-if="costField">
              {{unit2TenThousand(Number(addition(scope.row.zy_gross, scope.row.qd_gross)).toFixed(2), isTenThound)}}
              <el-popover placement="right" :width="200" trigger="click">
                <div class="table-size">
                  <p>直营/自营: {{ unit2TenThousand(scope.row.zy_gross, isTenThound) }}</p>
                  <p>支付渠道: {{ unit2TenThousand(scope.row.qd_gross, isTenThound) }}</p>
                </div>
                <template #reference>
                  <p style="text-align: center;">
                    <i class="el-icon-warning-outline trigger-hover" style="font-size:16px;cursor:pointer;margin-left:5px"></i>
                  </p>
                </template>
              </el-popover>
            </div>

            <p v-else>***</p>
          </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();
    this.requestData();
  },
  watch: {
    daytime: {
      handler() {
        this.requestData();
      }
    }
  },
  methods: {
    addition,
    unit2TenThousand,
    setCellClassName({ column, row }) {
      const { label } = column;

      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) {
        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.company === arr[index - 1].company) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });

      return { one: spanOneArr };
    },
    async requestData() {
      this.loading = true;
      this.list = [];
      const res = await asyncRequest.departmentEveryDay({
        daytime: this.daytime,
        companyNo: this.companyNo
      });

      if (res.code === 0 && res.data && res.data.length > 0) {
        // 非万宇 营业目标重取
        // if (this.companyNo !== "GS2203161855277894") {
        //   const r = await asyncRequest.companyEveryMonth({ daytime: this.daytime, companyNo: this.companyNo });
        //   const { total_tips, companyName } = r.data[0] || {};
        //   res.data.forEach(item => {
        //     const index = companyName.indexOf(item.depart);
        //     item.total_tips = (index === -1 && !(item.depart === "普润" && this.companyNo === "GS2304031312553746")) ? '0.00' : total_tips;
        //   })
        // }

        let list = (res.data || []).map(
          ({
            depart,
            msale_total,
            mth_total,
            sale_total,
            th_total,
            total_tips,
            mzy_sale_total,
            mchannel_sale_total,
            channel_cost_total,
            zy_cost_total,
            mzy_cost_total,
            mchannel_cost_total
          }) => {
            return {
              depart,
              total_tips,
              mzy_sale_total,
              mchannel_sale_total,
              channel_cost_total,
              zy_cost_total,
              mchannel_cost_total,
              mzy_cost_total,
              dayinfo: { sale_total, th_total },
              monthinfo: { msale_total, mth_total }
            };
          }
        );

        list = list.filter(item => Number(item.monthinfo.msale_total) !== 0);

        this.total = list.reduce(
          (prev, current) => {
            const { total_tips = 0, day = 0, month = 0 } = current;
            return {
              total_tips: addition(total_tips, prev.total_tips),
              month: addition(month, prev.month),
              day: addition(day, prev.day)
            };
          },
          { total_tips: 0, month: 0, day: 0 }
        );

        let mapDepart = list.map(({ depart }) => depart);

        list = mapDepart.map(d => list.find(({ depart }) => depart === d));

        const mapToDepartment = {
          百辰: "客服部@百辰",
          泓源: "网络部@泓源",
          普润: "	项目部@普润",
          平台: "	平台部@万宇"
        };

        const company = this.companies.find(
          item => item.value === this.companyNo
        );
        this.list = list.map(
          ({
            depart,
            total_tips,
            dayinfo,
            monthinfo,
            mchannel_sale_total,
            mzy_sale_total,
            mchannel_cost_total,
            mzy_cost_total
          }) => {
            // mzy_sale_total = Number(addition(Number(multiplication(mzy_sale_total,0.05)).toFixed(2),mzy_sale_total)).toFixed(2);
            // mchannel_sale_total = Number(addition(Number(multiplication(mchannel_sale_total,0.05)).toFixed(2),mchannel_sale_total)).toFixed(2);
            /* 月净销售 = 月销售 - 月退货 **/
            let monthNetSales = subtraction(
              monthinfo.msale_total,
              monthinfo.mth_total
            );
            // monthNetSales = Number(addition(Number(multiplication(monthNetSales,0.05)).toFixed(2),monthNetSales)).toFixed(2);

            /* 月经销售完成率 = 月净销售 / 销售指标 **/
            const monthProportion = multiplication(
              division(monthNetSales, total_tips),
              100
            ).toFixed(2);
            return {
              total_tips, // 营收目标
              zy_cost: mzy_cost_total, // 自营成本
              qd_cost: mchannel_cost_total, // 渠道成本
              depart: mapToDepartment[depart],
              company: company.label,
              currentMonthPure: [
                {
                  zy: mzy_sale_total, // 加%5税率
                  qd: mchannel_sale_total
                }
              ], // 当月营业收入(净)
              zy_gross: Number(
                subtraction(mzy_sale_total, mzy_cost_total)
              ).toFixed(2), // 自营毛利  = 自营营收 - 自营成本
              qd_gross: Number(
                subtraction(mchannel_sale_total, mchannel_cost_total)
              ).toFixed(2), // 渠道毛利 = 渠道营收 - 渠道成本
              dayinfo: {
                ...dayinfo,
                /** 日销售额 = 日销售额 - 日退货额 */ sale_total: subtraction(
                  dayinfo.sale_total,
                  dayinfo.th_total
                )
              },
              /* 占比 =  (当前部门销售额 / 各部门总销售额) / 100 **/
              proportion:
                multiplication(
                  division(monthinfo.msale_total, this.total.month) || 0,
                  100
                ) || 0,
              monthinfo: { monthNetSales, monthProportion: monthProportion }
            };
          }
        );

        // const wanyuIndex = this.list.findIndex(item => item.depart.indexOf('万宇') !== -1);
        // if(wanyuIndex !== -1){
        //   const item = this.list.splice(wanyuIndex,1);
        //   this.list.unshift(item[0]);
        // }

        let l = ["万宇", "百辰", "泓源", "普润"];
        const cl = this.list.map(item => item.depart);
        l = l.filter(item => {
          return cl.findIndex(i => i.indexOf(item)) !== -1;
        });

        this.list = l.map(item => {
          return this.list.find(i => i.depart.indexOf(item) !== -1);
        });
      } 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>