动态生成el-table（包含表头和数据）并且可以编辑

<template>
  <div class="app-container" style="background-color: #e8e8e8;padding: 10px 10px;">
    <div style="display: flex;flex-direction: row;">
      <div style="width:18%;background-color: #ffffff;margin-bottom:0.625rem;border-radius: 5px;min-height: 90vh;">
        <div class="titileM">
          职级
        </div>
        <div  class="head-container" style="margin-left: 0.625rem;">
         <el-tree v-if="topFlag" :highlight-current="leftTree"  :data="classDataTop"  default-expand-all :props="defaultProps"   @node-click="handleTopNodeClick">
           <div   class="custom-tree-node" slot-scope="{ node, data}">
              <span class="textClass">{{ data.rank_desc }}</span>
             <div v-if="data.disabled" class="disabled"  @click.stop></div>
           </div>
         </el-tree>
         <el-tree v-if="equalFlag" :highlight-current="eqTree" :data="classDataEqual"  default-expand-all :props="defaultProps"  @node-click="handleEqualNodeClick">
           <div   class="custom-tree-node" slot-scope="{ node, data}">
              <span class="textClass">{{ data.rank_desc }}</span>
             <div v-if="data.disabled" class="disabled"  @click.stop></div>
           </div>
         </el-tree>
         <el-tree v-if="bottomFlag" :highlight-current="rightTree" :data="classDataBottom"  default-expand-all :props="defaultProps" @node-click="handleBottomNodeClick">
           <div   class="custom-tree-node" slot-scope="{ node, data}">
              <span class="textClass">{{ data.rank_desc }}</span>
             <div v-if="data.disabled" class="disabled"  @click.stop></div>
           </div>
         </el-tree>
        </div>
      </div>
      <div style="width:82%;background-color: #ffffff;margin-left:0.625rem;margin-bottom:0.625rem;padding:10px;position: relative;border-radius:0px 5px 5px 0px;">
        <div v-if="!showEm">
                <div style="width: 100%;margin-top: 0.5rem;position: relative;">
                <el-form ref="queryForm" :inline="true" >
                  <el-form-item label="当前测评阶段:" >
                    <span>{{ep_title}}
                      <!-- <el-button slot="append" size="mini" type="primary" @click="openApplicatDialog">选择</el-button> -->
                    </span>
                  </el-form-item>
                </el-form>
                <div style="position: absolute;right:20px;top:5px;"><el-button type="text"  @click="reuleDialog=true" size="mini">打分规则</el-button></div>
           </div>
        <div class="textRules">
          评分制度：10分制，优秀9-10分；良好7-8分；一般5-6分；较差3-4分；很差1-2分
        </div>
        <el-table
           v-loading="loading"
           :header-cell-style="{background:'#E5E9F2',color:'#222222','font-weight':'100'}"
           :data="TableList"
           :key = "tableKey"
         >
         <!-- <el-table-column label="序号"  fixed="left" type="index" /> -->
         <el-table-column
           fixed="left"
           width="120"
           align="center"
           label="姓名">
           <template slot-scope="scope">
             <a style="color: #409eff" @click="Detail(scope.row)">{{scope.row.emp_name}}</a>
           </template>
         </el-table-column>
          <el-table-column v-for="(item, index) in tableOption" width="180" :key="index" :label="item.label" align="center"  :prop="item.prop">
             <template slot-scope="scope">
               <el-input-number
               class="item"
               @blur="BlurTest(scope.row,scope.row[item.prop])"
               v-model="scope.row[item.prop]"
               :disabled="readFlag"
               size="mini"
               :controls = "false"
               :min="1"
               :max="10"
               placeholder="请输入评分">
               </el-input-number>
             </template>
          </el-table-column>
          <el-table-column
              width="100"
              label="操作"
              fixed="right"
              align="center"
              class-name="small-padding fixed-width"
            >
            <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="暂存" placement="top">
            <el-button
              size="mini"
              type="text"
               style="color:black;"
               :disabled="readFlag"
              icon="el-icon-document-copy"
              @click="handleSave(scope.row)"
              ></el-button>
              </el-tooltip>
            </template>
           </el-table-column>
         </el-table>
        <div style="width: 100%;display:flex;flex-direction: row-reverse;">
          <div style="padding: 0.625rem;width: 20%;">
            <el-button :disabled="readFlag"  size="mini" @click="saveAll">全部暂存</el-button>
            <el-button :disabled="readFlag" type="primary"  size="mini" @click="submitAll">全部提交</el-button>
          </div>
        </div>
        </div>
        <div v-else class="emptyDiv">
          <div class="contentDiv">
            提示：请选择左侧职级，进行对应测评打分！
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="reuleDialog" width="920px" top="180px" :closeOnClickModal="false" :show-close="false" :append-to-body="true">
      <div style="position: relative;">
        <div class="imgDiv">
           <img :src="logo" style="width:100%;height:auto;">
        </div>
        <div style="position: absolute;right:20px;bottom:5px;">
         <el-button v-if="!closeFlag" type="primary" size="mini" >{{Sencond}}秒后可关闭页面</el-button>
         <el-button v-else type="primary" size="mini" @click="submitTree()">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getEvaRanks, activeTable ,activeTableHead ,isCanEditor ,saveTemp ,submitemp , getEvaluatePeriod} from "@/api/evaStage/index";
  import store from '@/store'
  import logoImg from "@/assets/images/rules.png";
  export default {
    components: {},
    data() {
      var validatePass =(rule,value,callback)=> {
        if(parseFloat(value)>24||parseFloat(value)<0){
           return callback(new Error('工时取值为0~24'));
        }else{
           callback();
        }
      }
      return {
        logo: logoImg,
        loading: true,
        treeLoading: true,
        reuleDialog: true,
        TableList: [],
        tableKey: 0,
        ids: [],
        total: 0,
        leftTree: false,
        eqTree: false,
        rightTree: false,
        topFlag: false,
        Sencond: 10,
        equalFlag: false,
        bottomFlag: false,
        showEm: true,
        multiple: true,
        tableOption: [],
        readFlag: false,
        updataFormRules: {
          jixiao_hours: [ { required: true, message: '请填写工作工时', trigger: 'blur' },
          { validator: validatePass, trigger:'blur' }]
        },
        formLabelWidth: '150px',
        viewForm: {
          proName: '',
          work_type: '',
          hours: '',
          registration_date: '',
          work_content: '',
          id: '',
          kaoqin_hours: '',
          creator: '',
          jixiao_hours: ''
        },
        rankTable: '',
        queryParams: {
          page: 1,
          pageSize: 10,
          dictName: undefined,
          deptId: store.getters.deptid,
          status: false,
          users_name: undefined,
          userId: undefined
        },
        rankname: '',
        dateRange: '',
        ep_stage: '',
        ep_title: '',
        closeFlag: false,
        ep_stageFlag: true,
        chooseApplicationFlag:false,
        workHourViewDiaflg: false,
        defaultProps: {
          children: 'children',
          label: 'rank_desc'
          },
        classDataTop:[{
            rank_evaluated: 0,
            rank_desc: '上级',
            disabled: true,
            children: []
          }],
        classDataEqual:[{
          rank_evaluated: 1,
          rank_desc: '平级',
          disabled: true,
          children: []
        }],
        classDataBottom:[{
          rank_evaluated: 2,
          rank_desc: '下级',
          disabled: true,
          children: []
        }]
      };
    },
    created() {

      getEvaluatePeriod().then((res)=>{
        if(res.data.results.length>0){
          this.ep_stage = res.data.results[0].id
          this.ep_title = res.data.results[0].ep_title
        }else{
          this.ep_stageFlag= false
        }
      })
      this.getSecond()
    },
    mounted() {
    },
    methods: {
      getSecond(){
        const that = this
        const interval = window.setInterval(function () {
          --that.Sencond
          if (that.Sencond === 0) {
            that.closeFlag = true
            window.clearInterval(interval)
        /*    that.sendMsg()//倒计时结束时运行的业务逻辑，这里的是关闭当前页面 */
          }
        }, 1000)
      },
      handlemer(){

      },
      submitTree(){
        this.reuleDialog = false
        if(this.ep_stageFlag){
          this.getRankLevel()
        }else{
          this.$message({
            message: '暂无进行中的测评',
            type: 'warning',
            duration: 3000,
            showClose: true
          })
        }
      },
      getRankLevel(){
        //this.$store.getters.username '199904001'
        const params ={
          ep_stage: this.ep_stage,
          emp_id: this.$store.getters.username
        }
        getEvaRanks(params).then((res)=>{
          let resData = res.data
          resData.forEach((item)=>{
            if(item.level===0){
              if(item.level_data.length>0){
                this.classDataTop[0].children = item.level_data
                this.topFlag = true
              }else{
                this.topFlag = false
              }
            }else if(item.level===1){
               if(item.level_data.length>0){
              this.classDataEqual[0].children = item.level_data
              this.equalFlag = true
              }else{
                this.equalFlag = false
              }
            }else if(item.level===2){
              if(item.level_data.length>0){
                this.classDataBottom[0].children = item.level_data
                this.bottomFlag = true
               }else{
                this.bottomFlag = false
              }
            }
          })
          this.treeLoading = false
        })
      },
      //校验
      getCheckScore(obj){
        const checkParams = {
          ep_stage: this.ep_stage,
          rank_evaluated: obj.rank_evaluated,
          evaluator_emp_id:this.$store.getters.username
        }
        isCanEditor(checkParams).then((res)=>{
          if(res.data.is_submit){
            this.readFlag = true
          }else{
            this.readFlag = false
          }
        })
      },
      handleTopNodeClick(obj){
        this.showEm = false
        this.tableKey++
        this.rankname = obj.rank_desc
        this.loading = true
        this.TableList = []
        this.tableOption = []
        this.rankTable = ''
        this.leftTree = true
        this.eqTree = false
        this.rightTree = false
        this.getHead(obj.rank_evaluated)
        this.getTable(obj)
        this.getCheckScore(obj)

      },
      getHead(rank_evaluated){
        this.rankTable = rank_evaluated
        const paramsData={
          ep_stage: this.ep_stage,
          evaluator_emp_id: this.$store.getters.username,
          rank_evaluated: rank_evaluated,
          is_active: 1
        }
       activeTableHead(paramsData).then((res)=>{
          res.data.results.forEach((item)=>{
            this.tableOption.push({
              label: item.erd_item,
              prop:  item.id + ''
            })
          })
        })
      },
     handleEqualNodeClick(obj){
       this.showEm = false
        this.tableKey++
        this.rankname = obj.rank_desc
        this.loading = true
        this.TableList = []
        this.tableOption = []
        this.leftTree = false
        this.eqTree = true
        this.rightTree = false
        this.getHead(obj.rank_evaluated)
        this.getTable(obj)
        this.getCheckScore(obj)
      },
      getTable(obj){
        const params = {
           evaluator_emp_id: this.$store.getters.username,
           ep_stage: this.ep_stage,
           rank_evaluated: obj.rank_evaluated
        }
      activeTable(params).then((res)=>{
          this.TableList = this.formateData(res.data)
          this.loading = false
        })
      },
      formateData(data){
       return data.map(res=> ({...res, editor: false}))
      },
      handleBottomNodeClick(obj){
        this.showEm = false
        this.tableKey++
        this.rankname = obj.rank_desc
        this.loading = true
        this.TableList = []
        this.tableOption = []
        this.leftTree = false
        this.eqTree = false
        this.rightTree = true
        this.getHead(obj.rank_evaluated)
        this.getTable(obj)
        this.getCheckScore(obj)
      },
      submitAll(){
        let saveList = this.TableList.filter((item)=>{
          return item.editor===true
        })
        let res  = saveList.every((item)=>{
          return !this.checkUnde(item)
         })
         if(!res){
           this.$message({
             message: '存在未打分的单项无法提交(某一行的数据未完善)！',
             type: 'warning',
             duration: 3000,
             showClose: true
           })
           return
         }
          let erd_items = this.tableOption.map((item)=>{return {'erd_item_id':item.prop}})
          let evaluated_users = JSON.parse(JSON.stringify(this.TableList))
          //循环table数组 如果存在空项那么把他过滤
          evaluated_users.forEach((item)=>{
            delete item.emp_name
            delete item.editor
          })
          let subevaluated_users = []
          evaluated_users.forEach((item)=>{
            if(Object.getOwnPropertyNames(item).length!==2){
              subevaluated_users.push(item)
            }
          })
          const saveParams = {
            ep_stage: this.ep_stage,
            evaluator_emp_id: this.$store.getters.username,
            rank_evaluated: this.rankTable,
            erd_items: erd_items,
            evaluated_users: subevaluated_users
          }
          if(this.TableList.length!==subevaluated_users.length){
          /* if(this.TableList.length!==saveList.length){ */
            this.$confirm(this.rankname+'还存在未被您打分的人员，提交后将无法再次进行打分操作，请确认！', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(()=> {
              this.saveMthod(saveParams)
            })
          }else{
            this.$confirm('您已完成对'+this.rankname+'所有人员的打分操作，是否进行提交？提交后将无法再次进行打分操作，请确认！', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(()=> {
              this.saveMthod(saveParams)
            })
          }
      },
      saveMthod(saveParams){
        submitemp(saveParams).then((res)=>{
          if(res.status==='success'){
            this.$message({
              message: '提交成功！',
              type: 'success',
              duration: 2000
            })
            this.readFlag = true
          }else{
            this.$message({
              message: '提交失败！',
              type: 'warning',
              duration: 2000
            })
          }
        })
      },
      BlurTest(row,value) {
        row.editor = true
        let flag = false
        let count = 0
        var arr = Object.keys(row);
        for (var key in row) {
           if (row[key] == null || row[key] == undefined) {
             count++
           }
        }
        if(arr.length===count+4){
          row.editor = false
        }
      },
      saveAll(){
      let saveList = this.TableList.filter((item)=>{
        return item.editor===true
      })
      if(saveList.length===0){
        this.$message({
          message: '您未再次修改任何评分！',
          type: 'warning',
          duration: 3000,
          showClose: true
        })
        return
      }
      let res  = saveList.every((item)=>{
        return !this.checkUnde(item)
       })
       if(!res){
         this.$message({
           message: '存在未打分的单项无法暂存！',
           type: 'warning',
           duration: 3000,
           showClose: true
         })
         return
       }
        let erd_items = this.tableOption.map((item)=>{return {'erd_item_id':item.prop}})
        let evaluated_users = JSON.parse(JSON.stringify(saveList))
        evaluated_users.forEach((item)=>{
          delete item.emp_name
          delete item.editor
        })
        const saveParams = {
          ep_stage: this.ep_stage,
          evaluator_emp_id: this.$store.getters.username,
          rank_evaluated: this.rankTable,
          erd_items: erd_items,
          evaluated_users: evaluated_users
        }
        saveTemp(saveParams).then((res)=>{
          if(res.status==='success'){
            this.$message({
              message: '暂存成功！',
              type: 'success',
              duration: 2000
            })
          }else{
            this.$message({
              message: res.msg,
              type: 'warning',
              duration: 2000
            })
          }
        })
      },
      handleSave(val){
        let unFlag  = this.checkUnde(val)
        let evaluated_users = [JSON.parse(JSON.stringify(val))]
        if(unFlag){
          this.$message({
            message: '存在未打分的单项无法暂存！',
            type: 'warning',
            duration: 3000,
            showClose: true
          })
        }else{
          let erd_items = this.tableOption.map((item)=>{return {'erd_item_id':item.prop}})
          evaluated_users.forEach((item)=>{
            delete item.emp_name
            delete item.editor
          })
          const saveParams = {
            ep_stage: this.ep_stage,
            evaluator_emp_id: this.$store.getters.username,
            rank_evaluated: this.rankTable,
            erd_items: erd_items,
            evaluated_users: evaluated_users
          }
          saveTemp(saveParams).then((res)=>{
            if(res.status==='success'){
              this.$message({
                message: '暂存成功！',
                type: 'success',
                duration: 2000
              })
            }else{
              this.$message({
                message: '暂存失败！',
                type: 'warning',
                duration: 2000
              })
            }
          })
        }
      },
      checkUnde(rowObj){
        for (var key in rowObj) {
           if (rowObj[key] == null || rowObj[key] == undefined) {
               return true
           }
        }
      },
      openApplicatDialog(){
        this.chooseApplicationFlag = true
      },
      Detail(){

      },
      handleQuery(){
        this.queryParams.page = 1
        this.queryParams.count_search_date = this.dateRange.toString()
        this.getList()
      }
    }
  };
</script>

<style lang="scss" scoped>
  .imgDiv{
    width:920px;
  }
::v-deep  .el-tree-node__content {
    position: relative;
  }
  .emptyDiv {
    width: 100%;
    height: 500px;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .contentDiv {
    height: 1.875rem;
    font-size: 15px;
  }
  .disabled {
    cursor: not-allowed;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
  }
  .textRules{
    font-size: 10px;
    color: #ff0000;
    padding-bottom: 0.625rem;
  }
  .textClass{
    font-size: 14px;
    color: #606266;
    white-space: nowrap;
  }
  .titileM{
    width: 100%;
    padding: 0.625rem;
    line-height: 25px;
    font-size: 15px;
    color: #737579;
    border-bottom:2px solid #abaeb3;
  }
::v-deep .mydiver{
  padding-right: 10px;
     .el-divider {
      margin:0.3125rem;
      background-color: #afafaf;
    }
  }
::v-deep .el-dialog__body{
  padding: 0px;
}
::v-deep .myleftdiver{
   padding-left: 10px;
   padding-right: 10px;
     .el-divider {
       background-color: #afafaf;
    }
  }
.demo-input-suffix ::v-deep   .el-divider {
     background-color: #b6d7fb;
     height: 2px;
  }

</style>