data-dashboard/src/components/newResults/company-month.vue

<template>
  <div v-loading="loading">
    <div class="search clear" style="align-items: center;">
      <el-switch
      :disabled="isEmpty"
        style="margin-right: 10px;"
        v-model="isTenThound"
        active-text="万元"
        inactive-text="元" 
        />

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

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

    <el-row style="margin-top:10px" v-if="!isEmpty">
      <el-table border size="mini" :data="tableData" :cell-class-name="setCellClassName">
        <el-table-column fixed="left" label="月度" prop="month" align="center" width="45px" />
        <el-table-column label="当月营收目标" align="center" min-width="140px">
          <template slot-scope="scope">
            {{unit2TenThousand(scope.row.total_tips,isTenThound)}}
          </template>
        </el-table-column>
        <el-table-column label="当月营业收入(净)" align="center" min-width="140px">
          <template slot-scope="scope">
            {{unit2TenThousand(scope.row.pure_sale,isTenThound)}}
          </template>
        </el-table-column>
        <el-table-column label="当月营收完成%" align="center" min-width="140px">
          <template slot-scope="scope">
            {{Number(scope.row.completion_rate).toFixed(2) + "%"}}
          </template>
        </el-table-column>
        <el-table-column label="当月毛利完成%" align="center" min-width="140px">
          <template slot-scope="scope">
            {{Number(scope.row.cost_rate).toFixed(2) + "%"}}
          </template>
        </el-table-column>
        
        <template v-if="costField">
          <el-table-column label="当月毛利指标" align="center" min-width="140px">
           <template slot-scope="scope">
             {{unit2TenThousand(scope.row.cost_tips,isTenThound)}}
           </template>
          </el-table-column>
          <el-table-column label="当月毛利完成" align="center" min-width="140px">
            <template slot-scope="scope">
             {{unit2TenThousand(scope.row.pure_profit,isTenThound)}}
            </template>
          </el-table-column>
        </template>
      </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 { unit2TenThousand, subtraction, multiplication, division, addition } from "../newReport/src/_utils";
import { mapCompany } from "./mapCompany";

export default {
  props:['companies','costField'],
  data(){
    return {
      loading: false,
      isTenThound:true,
      daytime: "",
      tableData: [],
      companyNo: "",
      cp_companies:[],
      isEmpty:false
    }
  },
  mounted() {
    const hasCompose = false;
    const jxIndex = this.companies.findIndex((item) => item.label === "北京锦兴弘昌科技有限公司");
    const prIndex = this.companies.findIndex((item) => item.label === "北京普润心堂商贸有限公司");

    if(jxIndex !== -1 || prIndex !== -1) this.hasCompose = true;
    this.cp_companies = this.companies.filter((item) => item.label !== "北京锦兴弘昌科技有限公司" && item.label !== "北京普润心堂商贸有限公司")
    if(this.hasCompose) this.cp_companies = [...this.cp_companies,{ value:"GS2302231124114965",label: "普润&锦兴&知事"}]
    if(this.cp_companies.length === 4) this.cp_companies = [{ value:"",label: "所有公司"},...this.cp_companies];

    this.isEmpty = this.cp_companies.length === 0;
    if(this.isEmpty) return;
    this.cp_companies = this.cp_companies.map(item => ({ ...item, label:mapCompany[item.label] || item.label}))

    this.companyNo = this.cp_companies[0].value;
    this.daytime = this.transformTime();
    this.requestData();
  },
  methods: {
    unit2TenThousand,
    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);
    },
    async requestData() {
      this.loading = true;


      const result = await asyncRequest.companyEvery({ year: (this.daytime.split('-'))[0], companyNo: this.companyNo })

      if(this.companyNo === "GS2302231124114965"){
        const jxResult = await asyncRequest.companyEvery({ year: (this.daytime.split('-'))[0], companyNo: "GS2304031312553746" })

        result.data = result.data.map((_,index) => {
          const prItem = result.data[index];
          const jxItem = jxResult.data[index];

          return {
            month:prItem.month,
            cgd_th_total: Number(addition(prItem['cgd_th_total'],jxItem['cgd_th_total'])).toFixed(2),
            cgd_total:Number(addition(prItem['cgd_total'],jxItem['cgd_total'])).toFixed(2),
            cost_tips:Number(addition(prItem['cost_tips'],jxItem['cost_tips'])).toFixed(2),
            sale_total:Number(addition(prItem['sale_total'],jxItem['sale_total'])).toFixed(2),
            th_total:Number(addition(prItem['th_total'],jxItem['th_total'])).toFixed(2),
            total_tips:Number(addition(prItem['total_tips'],jxItem['total_tips'])).toFixed(2),
          }
        })
      };

      
      switch(Number(result.code)){
        case 0:
          this.tableData = (result.data || []).map(tableItem => {
            /* 销售净额 = 销售额 - 退货额 **/
            const pure_sale = subtraction(tableItem.sale_total,tableItem.th_total)
            /* 指标达成率 = 销售净额 / 销售指标 **/
            const completion_rate = multiplication(division(pure_sale,tableItem.total_tips),100)
            /* 采购净额 = 采购额 - 采购退货额 **/
            const pure_purch = subtraction(tableItem.cgd_total,tableItem.cgd_th_total)
            /* 毛利润 = (本月销售净额 - 本月采购净额) **/
            const pure_profit = subtraction(pure_sale,pure_purch)
            /*  毛利率 = (本月毛利润 / 本月销售净额) * 100 **/
            const pure_interest_rate = multiplication(division(pure_profit,pure_sale) || 0,100)

            return {
              pure_sale,
              pure_purch,
              pure_profit,
              completion_rate,
              pure_interest_rate,
              month:tableItem.month,
              cost_tips:tableItem.cost_tips,
              total_tips:tableItem.total_tips,
              cost_rate: Number(tableItem.cost_tips) === 0 ? 0 : multiplication(division(pure_profit, tableItem.cost_tips) || 0, 100).toFixed(2)
            }
          })

          // const totalItem = createTotalItem(tableData)
          // totalItem.month = "年度合计"
          // /* 年度指标达成率 = (年度销售净额 / 年度销售指标) **/
          // totalItem.completion_rate = multiplication(division(totalItem.pure_sale,totalItem.total_tips),100)
          // /* 年度毛利润 = 年度销售额 - 年度采购额 **/
          // totalItem.pure_profit = subtraction(totalItem.pure_sale,totalItem.pure_purch)
          // /* 年度毛利率 = (年度毛利润 / 年度销售额) **/
          // totalItem.pure_interest_rate = multiplication(division(totalItem.pure_profit,totalItem.pure_sale),100)
          // this.tableData = [...tableData,totalItem]
          break
        default:
          break
      }
      // this.getHeight();
      this.loading = false;
    }
  }
}
</script>



<style lang="scss" scoped>

.new-results{
  .search {
    height:36px;
    display: flex;
    justify-content: flex-end;
    padding:0px 10px;
    margin-top:10px
  }
}
</style>