el-table增加统计汇总

<template>
  <div class="app-container" style="background-color: #e8e8e8;padding: 10px 10px;">
    <div style="display: flex;flex-direction: row;">
      <div style="width:20%;background-color: #ffffff;margin-bottom:0.625rem;border-radius: 5px;min-height: 90vh;">
        <div class="titileM">
         部门:
         <el-input
           v-model="deptName"
           style="width: 70%;"
           placeholder="请输入部门名称"
           clearable
           size="small"
           prefix-icon="el-icon-search"
         />
        </div>
        <div  class="head-container" style="margin-left: 0.625rem;">
          <el-tree
            ref="tree"
            :data="deptOptions"
            :indent="0"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
      </div>
      <div style="width:80%;background-color: #ffffff;margin-left:0.625rem;margin-bottom:0.625rem;padding:10px;position: relative;border-radius:0px 5px 5px 0px;">
        <el-card style="margin-top: 0.325rem;width: 100%;position: relative;" >
          <div style="width: 80%;">
          <el-form  ref="queryForm" :model="queryParams" :inline="true" label-width="108px">
              <el-form-item label="测评阶段" >
                <el-select v-model="queryParams.ep_stage"  placeholder="请选择" @change="handleQuery"  style="width: 90%">
                  <el-option v-for="item in epStageOptions" :key="item.id" :label="item.ep_title" :value="item.id" >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="被测评人职级" >
                <el-select v-model="queryParams.evaluated_user__rank_title"  placeholder="请选择"  style="width: 90%">
                  <el-option v-for="item in ranksOptions" :key="item.id" :label="item.rank_name" :value="item.id" >
                  </el-option>
                </el-select>
              </el-form-item>
          </el-form>
          </div>
          <div style="position: absolute;right:20px;top:21px;">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </div>
        </el-card>
        <el-card style="margin-top: 0.325rem;width: 100%;">

              <el-table
                v-loading="loading"
                border
                :header-cell-style="{background:'#E5E9F2',color:'#222222','font-weight':'100'}"
                :data="TableList"
              >
               <el-table-column
                  label="测评对象"
                  align="center"
                  prop="evaluated_user.emp_name"
                />
                <el-table-column label="部门"  prop="evaluated_user.dept_names"/>
                <el-table-column label="职级"  prop="evaluated_user.rank_title"/>
                <el-table-column label="测评阶段"  prop="ep_stage.ep_title"/>
                <el-table-column label="应参与人数"  align="center" width="130" prop="total_num"/>
                <el-table-column label="实际参与人数" align="center"  prop="actual_user_num"/>
                <el-table-column label="最终得分" align="center">
                <template slot-scope="scope">
                     {{scope.row.total_score|floatFilter}}
                </template>
                </el-table-column>
                <el-table-column label="测评日期"  prop="evaluated_user.create_time"/>
                <el-table-column
                    width="100"
                    label="操作"
                    fixed="right"
                    align="center"
                    class-name="small-padding fixed-width"
                  >
                  <template slot-scope="scope">
                  <el-button
                    type="text"
                    style="color:black;"
                    size="mini"
                    icon="el-icon-view"
                    @click="viewFormDetail(scope.row)"
                  >
                  </el-button>

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

      </div>
    </div>
    <el-dialog title="打分详情" :key="diaKey" :visible.sync="reuleDialog" width="950px" top="180px" :append-to-body="true">
       <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="上级" name="上级">
            <el-table
              ref="detailTable"
               v-loading="dialoading"
               :summary-method="data=>summaries(data,totalList)"
                show-summary
               :header-cell-style="{background:'#E5E9F2',color:'#222222','font-weight':'100'}"
               :data="TableDiaList"
               :key = "tableKey"
             >
             <!-- <el-table-column label="序号"  fixed="left" type="index" /> -->
             <el-table-column
               fixed="left"
               width="100"
               align="center"
               label="职级">
               <template slot-scope="scope">
                 {{scope.row.evaluate_rank}}
               </template>
             </el-table-column>
              <el-table-column v-for="(item, index) in tableOption" width="120" :key="index" :label="item.erd_item_name" align="center"  :prop="item.erd_item+''">
              </el-table-column>
              <el-table-column
                width="100"
                align="center"
                label="平均分">
                <template slot-scope="scope">
                  {{scope.row.rank_average_score}}
                </template>
              </el-table-column>
              <el-table-column
                width="100"
                align="center"
                label="总分">
                <template slot-scope="scope">
                  {{scope.row.rank_total_score}}
                </template>
              </el-table-column>
              <el-table-column
                width="100"
                align="center"
                label="加权平均分">
                <template slot-scope="scope">
                  {{scope.row.rank_weighted_total_score}}
                </template>
              </el-table-column>
             </el-table>
          </el-tab-pane>
          <el-tab-pane label="平级" name="平级">
            <el-table
               v-loading="dialoading"
               :summary-method="summaries"
                   show-summary
               :header-cell-style="{background:'#E5E9F2',color:'#222222','font-weight':'100'}"
               :data="TableDiaList"
               :key = "tableKey"
             >
             <!-- <el-table-column label="序号"  fixed="left" type="index" /> -->
             <el-table-column
               fixed="left"
               width="100"
               align="center"
               label="职级">
               <template slot-scope="scope">
                 {{scope.row.evaluate_rank}}
               </template>
             </el-table-column>
              <el-table-column v-for="(item, index) in tableOption" width="120" :key="index" :label="item.erd_item_name" align="center"  :prop="item.erd_item+''">
              </el-table-column>
              <el-table-column
                width="100"
                align="center"
                label="平均分">
                <template slot-scope="scope">
                  {{scope.row.rank_average_score}}
                </template>
              </el-table-column>
              <el-table-column
                width="100"
                align="center"
                label="总分">
                <template slot-scope="scope">
                  {{scope.row.rank_total_score}}
                </template>
              </el-table-column>
              <el-table-column
                width="100"
                align="center"
                label="加权平均分">
                <template slot-scope="scope">
                  {{scope.row.rank_weighted_total_score}}
                </template>
              </el-table-column>
             </el-table>
          </el-tab-pane>
          <el-tab-pane label="下级" name="下级">
            <el-table
               v-loading="dialoading"
               :summary-method="summaries"
                show-summary
               :header-cell-style="{background:'#E5E9F2',color:'#222222','font-weight':'100'}"
               :data="TableDiaList"
               :key = "tableKey"
             >
             <!-- <el-table-column label="序号"  fixed="left" type="index" /> -->
             <el-table-column
               fixed="left"
               width="100"
               align="center"
               label="职级">
               <template slot-scope="scope">
                 {{scope.row.evaluate_rank}}
               </template>
             </el-table-column>
              <el-table-column v-for="(item, index) in tableOption" width="120" :key="index" :label="item.erd_item_name" align="center"  :prop="item.erd_item+''">
              </el-table-column>
              <el-table-column
                width="100"
                align="center"
                label="平均分">
                <template slot-scope="scope">
                  {{scope.row.rank_average_score}}
                </template>
              </el-table-column>
              <el-table-column
                width="100"
                align="center"
                label="总分">
                <template slot-scope="scope">
                  {{scope.row.rank_total_score}}
                </template>
              </el-table-column>
              <el-table-column
                width="100"
                align="center"
                label="加权平均分">
                <template slot-scope="scope">
                  {{scope.row.rank_weighted_total_score}}
                </template>
              </el-table-column>
             </el-table>
          </el-tab-pane>
        </el-tabs>
    </el-dialog>
    <el-dialog title="阶段列表" :visible.sync="jieduanFlag" width="700px" top="180px" :append-to-body="true">
      <chooseEvajieduan @getJieuan="getJieuan" />
    </el-dialog>
  </div>
</template>

<script>
  import chooseEvajieduan from './chooseEvajieduan'
  import {evaluateResult, getBaseRank,getStage,evaluateResultDetail,evaluateResultTotalDetail} from "@/api/evaStage/index";
  import {
    treeselect
  } from "@/api/vadmin/permission/dept";
  import store from '@/store'
  export default {
    components: {chooseEvajieduan},
    data() {
      return {
        reuleDialog: false,
        tableKey: 0,
        diaKey: 0,
        deptName: '',
        loading: false,
        tableOption: [],
        jieduanFlag: false,
        dialoading: false,
        ranksOptions: [],
        TableList: [],
        deptOptions: [],
        epStageOptions: [],
        defaultProps: {},
        activeName: '上级',
        evaluated_user__emp_id: '',
        TableDiaList: [],
        totalList: [],
        total: 0,
        queryParams: {
          evaluated_user__dept: undefined,
          ep_stage_name: '',
          ep_stage: undefined,
          page: 1,
          pageSize: 10,
          evaluated_user__rank_title: undefined
        }
      };
    },
    created() {
      treeselect().then(response => {
         let treeData = response.data.filter((res)=>{
           return res.id===2||res.parentId === 2
         })
         this.deptOptions = this.handleTree(treeData, "id");
       })
       /* this.getList() */
       this.getBasRank()
    },
    mounted() {
    },
    filters:{
      floatFilter(val){
        if(val){
          return  val.toFixed(2)
        }
      }
    },
    updated() {
    },
    methods: {
      summaries(param,totalList){
        	const {
        		columns,
        		data
        	} = param;
        	const sums = [];
          columns.forEach((column, index) => {

            if (index === 0) {
                    sums[index] = (()=>{
                      let el = <p class="count_row">总分<br/>平均分<br/>加权平均分</p>
                      	return el;
                    })();
                  return;
              }
             for (var key in this.totalList) {
             if(key === column.property){
               console.log(key)
                sums[index] = (()=>{
                    let el = <p class="count_row">{this.totalList[key].sum_single_total_score}<br/>{this.totalList[key].sum_single_average_score}<br/>{this.totalList[key].sum_single_weighted_total_score}</p>
                    	return el;
                  })();
                return;
               }
              }
          });
          return sums;
      },
      getBasRank(){
        getBaseRank().then((res)=>{
          this.ranksOptions = res
        })
        getStage().then((res)=>{
          this.epStageOptions = res.data.results
        })

      },
      chooseE(){
        this.jieduanFlag = true
      },
      getJieuan(val){
        this.queryParams.ep_stage = val.id
        this.queryParams.ep_stage_name = val.ep_title
        this.jieduanFlag = false
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      handleNodeClick(data) {
        this.queryParams.evaluated_user__dept = data.id;
        if(this.queryParams.ep_stage){
            this.getList();
        }else{
          this.$message({
            message: '请选择测评阶段',
            type: 'warning',
            duration: 3000,
            showClose: true
          })
        }
      },
      handleClick(tab, event){

         this.getTableDetail(tab.name)


      },
      resetQuery(){
        this.queryParams.evaluated_user__dept = undefined,
        this.queryParams.ep_stage_name = '',
        this.queryParams.ep_stage = undefined,
        this.queryParams.page = 1
        this.queryParams.evaluated_user__rank_title =  undefined
      },
      handleQuery(){
        if(this.queryParams.ep_stage){
          this.queryParams.pageNum = 1
          this.getList()
        }else{
          this.$message({
            message: '请选择测评阶段',
            type: 'warning',
            duration: 3000,
            showClose: true
          })
          return
        }
      },
      getList(){
        evaluateResult(this.queryParams).then((res)=>{
          this.TableList = res.data.results
          this.total = res.data.count
        })
      },
      viewFormDetail(row){
        this.diaKey++
        this.activeName = '上级'
        this.evaluated_user__emp_id = row.evaluated_user.emp_id
        this.getTableDetail('上级')
       /* const paramsto= {
          ep_stage: this.queryParams.ep_stage,
          evaluated_user__emp_id: this.evaluated_user__emp_id,
          level: this.activeName
        } */
        /* evaluateResultTotalDetail(paramsto).then((ress)=>{
           if(res.data.length>0){

           }
         }) */
        this.reuleDialog = true
      },
      getTableDetail(name){
        this.tableKey++
        const params= {
          ep_stage: this.queryParams.ep_stage,
          evaluated_user__emp_id: this.evaluated_user__emp_id,
          level: name
        }
         evaluateResultDetail(params).then((res)=>{
          this.tableOption = res.data.erd_items
          this.TableDiaList = res.data.erd_score
       /*   this. */
        })
        evaluateResultTotalDetail(params).then((response)=>{
          this.totalList = response.data
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  .titileM{
    width: 100%;
    padding: 0.625rem;
    line-height: 25px;
    font-size: 15px;
    color: #737579;
    border-bottom:2px solid #abaeb3;

  }
  ::v-deep .myleftdiver{
     padding-left: 10px;
     padding-right: 10px;
       .el-divider {
         background-color: #afafaf;
      }
    }
  ::v-deep .head-container {
    .el-tree > .el-tree-node:after {
      border-top: none;
    }
    .el-tree-node {
      position: relative;
      padding-left: 16px;
    }
    //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
    .el-tree-node__expand-icon.is-leaf{
      display: none;
    }
    .el-tree-node__children {
      padding-left: 16px;
    }
    .el-tree-node :last-child:before {
      height: 38px;
    }
    .el-tree > .el-tree-node:before {
      border-left: none;
    }
    .el-tree > .el-tree-node:after {
      border-top: none;
    }
    .el-tree-node:before {
      content: "";
      left: -4px;
      position: absolute;
      right: auto;
      border-width: 1px;
    }
    .el-tree-node:after {
      content: "";
      left: -4px;
      position: absolute;
      right: auto;
      border-width: 1px;
    }
    .el-tree-node:before {
      border-left: 1px dashed #393d41;
      bottom: 0px;
      height: 100%;
      top: -26px;
      width: 1px;
    }
    .el-tree-node:after {
      border-top: 1px dashed #393d41;
      height: 20px;
      top: 12px;
      width: 20px;
    }
  }
</style>