rt_fhyx_adminUI/src/views/company/schedule/report.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
    
    <el-form-item label="公司名" prop="companyId">
          <el-select filterable  v-model="queryParams.companyId" placeholder="请选择公司名"  @change="companyChange" clearable size="small">
              <el-option
                v-for="item in companys"
                :key="item.companyId"
                :label="item.companyName"
                :value="item.companyId"
              />
        </el-select>
      </el-form-item>  
     <el-form-item > 
          <treeselect style="width: 220px" :clearable="false"  v-model="queryParams.deptId"  :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
     </el-form-item>

      <el-form-item label="所属档期" prop="scheduleId">
            <el-select  style="width:205.4px" v-model="queryParams.scheduleId" placeholder="请选择档期" clearable size="small" >
                  <el-option
                      v-for="item in scheduleList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
            </el-select>
        </el-form-item>

       <!-- <el-form-item label="档期名称" prop="scheduleName">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入档期名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->

    <!-- <el-form-item label="档期状态" prop="scheduleStatus">
        <el-select v-model="queryParams.status" placeholder="请选择档期状态" clearable size="small">
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item> -->

      <el-form-item label="创建时间" prop="createTime">
            <el-date-picker
              style="width:205.4px"
              clearable size="small"
              v-model="dateRange"
              type="daterange"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>

      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

  
    <el-table v-loading="loading" :data="tcmScheduleReportList" @selection-change="handleSelectionChange">
       <!-- <el-table-column  type="expand" >
            <template slot-scope="scope">
                <el-table border :data="[scope.row]">
                    <el-table-column prop="round1Money" label="一轮业绩" ></el-table-column>
                    <el-table-column prop="round1Order" label="一轮单数"></el-table-column>
                    <el-table-column prop="count" label="一轮转化率">
                        <template slot-scope="scope1">
                             {{(scope1.row.onlineRate*100).toFixed(2)+"%"}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="round2Unit" label="一轮客单"></el-table-column>
                </el-table>
            </template>
      </el-table-column> -->

      <el-table-column  label="id"  width="50" align="center" prop="id" />
      <el-table-column  label="档期" align="center" prop="scheduleName" />
      <el-table-column label="公司名称" width="110" align="center" prop="companyName" />
      <el-table-column  label="所在部门" width="110" align="center" prop="deptName" />
      <el-table-column  label="员工姓名" align="center" prop="userNickName" />

      <el-table-column  label="总进线"  width="60"  align="center" prop="totalNum" />
      <el-table-column  label="注册数"  width="60"  align="center" prop="registerNum" />
      <el-table-column  label="上线数"  width="60"  align="center" prop="onlineNum" />
      <el-table-column  label="完课数"  width="60"  align="center" prop="finishNum" />
      <el-table-column  label="注册率"  width="80"  align="center" prop="registerRate"   >
            <template slot-scope="scope">
               {{ renderTotalVal(scope.row,0) }}
            </template>
     </el-table-column>
     <el-table-column   label="上线率" width="80" align="center" prop="onlineRate"   >
            <template slot-scope="scope">
               {{ renderTotalVal(scope.row,1) }}
            </template>
    </el-table-column>
     <el-table-column   label="完课率" width="80" align="center" prop="finishRate"   >
           <template slot-scope="scope">
               {{ renderTotalVal(scope.row,2) }}
           </template>
    </el-table-column>
     <el-table-column   label="累计总业绩" width="90" align="center" prop="totalMoney"   >
            <template slot-scope="scope">
               {{!scope.row.totalMoney?0:(scope.row.totalMoney).toFixed(2)}}
            </template>
    </el-table-column>
     <el-table-column   label="累计总单" width="80" align="center" prop="totalOrder"   >
            <template slot-scope="scope">
              {{!scope.row.totalOrder?0:scope.row.totalOrder}}
            </template>
    </el-table-column>
   <el-table-column   label="目标业绩"  width="80"  align="center" prop="targetMoney"   >
          <template slot-scope="scope">
            {{!scope.row.targetMoney?0:(scope.row.targetMoney).toFixed(2)}}
          </template>
    </el-table-column>
    <el-table-column   label="目标完成率"  width="90" align="center" prop="targetRate"   >
           <template slot-scope="scope">
                {{ renderTotalVal(scope.row,3) }}
           </template>
    </el-table-column>
    <el-table-column  label="创建时间" align="center" prop="createTime" width="100">
            <template slot-scope="scope">
               <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
      </el-table-column>


    <el-table-column v-for='index in 36' :key='index' :label="renderLabel(index-1)"  :width="(index-1)%4==2?'85':'72'"  :prop="renderLabelProp(index)"  align="center" >
           <template slot-scope="scope">
                {{ runderValue(scope.row,index-1) }}  
           </template>     
      </el-table-column>

        <!-- <el-table-column  fixed="right" label="操作" width="150px" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleDetails(scope.row)">查看</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['company:tcmScheduleReport:edit']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['company:tcmScheduleReport:remove']">删除</el-button>
            </template>
        </el-table-column> -->

    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { treeselect } from "@/api/company/companyDept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listTcmScheduleReport, exportTcmScheduleReport,listAllSchedule } from "@/api/company/scheduleReport";
import { getCompanyList } from "@/api/company/company";
export default {
  watch: {
    // 监听deptId
    'deptId': 'currDeptChange'
  },
  name: "TcmScheduleReport",
  components: { Treeselect },
  data() {
   
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 中医档期业绩报表表格数据
      tcmScheduleReportList: [],
      scheduleList:[],
      companys:[],
      roundArr:["一轮","二轮","三轮","四轮","五轮","六轮","七轮","八轮","九轮"],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        scheduleId: null,
        deptId:null,
        userId: null,
        companyId: null,
        totalNum: null,
        registerNum: null,
        onlineNum: null,
        finishNum: null,
        registerRate: null,
        onlineRate: null,
        finishRate: null,
        totalMoney: null,
      },
      users:[],
      // 部门树选项
      deptOptions: [],
      // 部门名称
      deptName: undefined,
      // 表单参数
      form: {},
      // 表单校验
      rules: { 
         
      }
    };
  },
  created() {
    getCompanyList().then(response => {
       this.companys = response.data;
       if(this.companys!=null&&this.companys.length>0){
          this.companyId=this.companys[0].companyId;
          this.getTreeselect();
        }
    });
    this.getListSchedule();
    this.getList();
  },
  methods: {
    renderLabel(index){
        var colls=parseInt(index/4);
        var cell=parseInt(index%4);
        var str=this.roundArr[colls];
        if(cell==0){
            str+="业绩"
        }
        else if(cell==1){
            str+="单数"
        }
        else if(cell==2){
             str+="转化率"
        }
        else if(cell==3){
             str+="客单"
        }
        return str;
    },
    renderLabelProp(index){  
        var colls=parseInt(index/4)+1;
        var str=this.roundArr[colls];
        if(colls==1){
             str="round"+colls+"Money";
        }
        else if(colls==2){
             str="round"+colls+"Order";
        }
        else if(colls==3){
             str="round"+colls+"Rate";
        }
        else if(colls==4){
             str="round"+colls+"Unit";
        }
        return str;
    },
    runderValue(row,index){    //注册率=注册数/总进线  上线率=上线数/注册数  完课率=完课数/注册数   目标完成率=累计业绩/目标业绩  单线R值=累计业绩/总进线
        var colls=parseInt(index/4)+1;
        var cell=parseInt(index%4);
        var value=0;
        if(cell==0){   //业绩   
            value=!row["round"+colls+"Money"]?0:(row["round"+colls+"Money"]).toFixed(2);
        }
        else if(cell==1){   //订单数
            value=row["round"+colls+"Order"];
        }
        else if(cell==2){    //转化率 =成单数/总进线 
            value=(row["round"+colls+"Order"]/row["totalNum"]*100.0).toFixed(3)+"%";
            //value=(row["round"+colls+"Rate"]*100).toFixed(2)+"%";
        }
        else if(cell==3){    //客单=成交金额/成交单数
            var roundMoney=row["round"+colls+"Money"];
            var roundOrder=row["round"+colls+"Order"];
            if(!!roundMoney && !!roundOrder){
                value=(roundMoney/roundOrder*1.0).toFixed(2);
            }
        }
        return value;
    },
    renderTotalVal(row,index){
       var value=0;
        if(index==0){   //注册率=注册数/总进线
             value=(row["registerNum"]/row["totalNum"]*100.0).toFixed(3)+"%";
        }
        else if(index==1){   //上线率=上线数/注册数
             value=(row["onlineNum"]/row["registerNum"]*100.0).toFixed(3)+"%";
        }
        else if(index==2){   //完课率=完课数/注册数
             value=(row["finishNum"]/row["registerNum"]*100.0).toFixed(3)+"%";
        }
        else if(index==3){   //目标完成率=累计业绩/目标业绩
             value=(row["totalMoney"]/row["targetMoney"]*100.0).toFixed(3)+"%";  
        }
        else if(index==4){   //人均业绩=总业绩/当期部门人数
             value=(row["totalMoney"]/row["cuCount"]*1.0).toFixed(3);  
        }
        else if(index==5){   //单线R值=累计业绩/总进线
             value=(row["targetMoney"]/row["totalNum"]*1.0).toFixed(3);  
        }
        return value;
    },
    getListSchedule() {
        this.loading = true;
        listAllSchedule().then(response => {
            this.scheduleList = response.rows;
        });
    },
    /** 查询中医档期业绩报表列表 */
    getList() {
      this.loading = true;
      listTcmScheduleReport(this.addDateRange(this.queryParams,this.dateRange)).then(response => {
          this.tcmScheduleReportList = response.rows;
          this.total = response.total;
          this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        scheduleId: null,
        userId: null,
        companyId: null,
        totalNum: null,
        registerNum: null,
        onlineNum: null,
        finishNum: null,
        registerRate: null,
        onlineRate: null,
        finishRate: null,
        totalMoney: null,
        totalOrder: null,
        targetMoney: null,
        targetRate: null,
        round1Money: null,
        round1Order: null,
        round1Rate: null,
        round1Unit: null,
        round2Money: null,
        round2Order: null,
        round2Rate: null,
        round2Unit: null,
        round3Money: null,
        round3Order: null,
        round3Rate: null,
        round3Unit: null,
        round4Money: null,
        round4Order: null,
        round4Rate: null,
        round4Unit: null,
        round5Money: null,
        round5Order: null,
        round5Rate: null,
        round5Unit: null,
        round6Money: null,
        round6Order: null,
        round6Rate: null,
        round6Unit: null,
        round7Money: null,
        round7Order: null,
        round7Rate: null,
        round7Unit: null,
        round8Money: null,
        round8Order: null,
        round8Rate: null,
        round8Unit: null,
        round9Money: null,
        round9Order: null,
        round9Rate: null,
        round9Unit: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加中医档期业绩报表";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getTcmScheduleReport(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改中医档期业绩报表";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateTcmScheduleReport(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }
            });
          } else {
            addTcmScheduleReport(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除中医档期业绩报表编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delTcmScheduleReport(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
    },
    handleDetails(row){
        this.$router.push({path:'/schedule/report/add',query:{"scheduleId":row.scheduleId,"reportId":row.id}});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有中医档期业绩报表数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportTcmScheduleReport(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function() {});
    },
   getTreeselect() {
        var that=this;
        var param={companyId:this.companyId}
        treeselect(param).then((response) => {
          this.deptOptions = response.data;
        });
    },
    companyChange(val){
      console.log(val);
      this.companyId=val;
      this.getTreeselect();
    },
    currDeptChange(val){
          console.log(val)
          this.queryParams.deptId=val;
          this.getList();
    },
  }
};
</script>