dd_jx_pc/src/views/myPerformance/resultSet.vue

<template>
  <div class="box-all boxMinHeight">
    <PageHead :phName="packageName"></PageHead>
    <div class="main">
      <div class="flex-box-ce" style="padding: 10px 0;border-bottom: 1px solid #f1f1f1;margin-bottom: 20px;">
         <span :class="{ active: activeName=='noEntering' }" style="width: 80px;" @click="activeName='noEntering'">未录入({{ noStatusListTotal }})</span>
         <span :class="{ active: activeName=='entering' }" style="width: 80px;" @click="activeName='entering'">已录入({{ statusListTotal }})</span>
      </div>

     <div v-show="activeName=='noEntering'">
        <div v-for="(item,index) in noStatusList" :key="index">
          <div class="wd-title">{{item.wdName}}</div>
          <el-table :data="item.list"  border :header-cell-style="{ background: '#ECF5FF' }">
            <el-table-column prop="userName" label="姓名"></el-table-column>
            <!-- <el-table-column prop="wdName" label="维度"></el-table-column> -->
            <el-table-column prop="name" label="指标名称"></el-table-column>
            <el-table-column prop="per_remark" label="考核标准"  min-width="200">
              <template slot-scope="scope">
                  <PreBox :value="scope.row.per_remark"></PreBox>
              </template>
            </el-table-column>
            <el-table-column prop="target" label="目标值"></el-table-column>
            <el-table-column prop="weight" label="权重%"></el-table-column>
            <el-table-column prop="remark" label="备注" min-width="200"></el-table-column>
            <el-table-column label="实际完成结果值" min-width="150">
                <template slot-scope="scope">
                <div class="flex-box-ce">
                  <el-input type="textarea" style="min-width: 130px;" :rows="1" v-model="scope.row.result" placeholder="请输入"></el-input>
                  <span style="width: 40px;padding-left: 5px;" class="font-flex-word">{{scope.row.unit}}</span>
                </div>
                </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
     <div v-show="activeName=='entering'">
       <div v-for="(item,index) in statusList" :key="index">
        <div class="wd-title">{{item.wdName}}</div>
        <el-table :data="item.list"  border :header-cell-style="{ background: '#ECF5FF' }">
          <el-table-column prop="userName" label="姓名"></el-table-column>
          <!-- <el-table-column prop="wdName" label="维度"></el-table-column> -->
          <el-table-column prop="name" label="指标名称"></el-table-column>
          <el-table-column prop="per_remark" label="考核标准"  min-width="200">
            <template slot-scope="scope">
                <PreBox :value="scope.row.per_remark"></PreBox>
            </template>
          </el-table-column>
          <el-table-column prop="target" label="目标值"></el-table-column>
          <el-table-column prop="weight" label="权重%"></el-table-column>
          <el-table-column prop="remark" label="备注" min-width="200"></el-table-column>
          <el-table-column label="实际完成结果值" min-width="150" prop="result">
            <template slot-scope="scope">
              <span>
                <span class="font-flex-word">{{scope.row.result}}</span>
                <span style="width: 40px;padding-left: 5px;" class="font-flex-word">{{scope.row.unit}}</span>
              </span>
            </template>
          </el-table-column>
        </el-table>
       </div>
      </div>
    </div>
    <footer class="footer flex-box-end" v-if="activeName == 'noEntering'">
      <el-button  class="primaryBtn" @click="save(1)">暂存</el-button>
      <el-button  type="primary" @click="save(0)">提交结果值</el-button>
    </footer>
  </div>
</template>
<script>
import PageHead from '@/components/public/PageHead'; //头部---返回
export default {
  components: { PageHead },
  name: 'resultSet',
  data() {
    return {
      title: '2024年的绩效考核',
      activeName: 'noEntering',
      noStatusList: [],
      noStatusListTotal:0,
      statusList: [],
      statusListTotal:0,
      id:'',//员工考核记录id
      packageName:'',//考核包名称 结果值录入用到
    };
  },
  watch: {},
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.packageName=this.$route.query.packageName;
      this.getPackageDtail();
    }
  },
  mounted() {},
  methods: {
    // 提交
    save(num) {
      let isLr = false;
      let data = {
        id: this.id, //个人考核包ID
        cache: num, //是否暂存 1 是 0 否（提交）
        result_info: '' //结果值信息
      };
      let result_info = [];
      this.noStatusList.some(item => {
        item.list.forEach(e=>{
          if (e.result) {
            result_info.push({
              result: e.result, //单项目结果值
              dimension_key: e.message.dimension_key, //维度索引
              index_key: e.message.index_key, //指标索引
              index_id: e.id //指标ID
            });
            isLr = true;
          }
        })
      });
      if(!isLr){
        this.$message.error("至少输入一项结果值")
        return false;
      }
      data.result_info=JSON.stringify(result_info);
      this.$axios('post', '/api/per/package/record_result',data).then(res => {
           this.$message.success(num==1? '暂存成功':'提交成功');
           this.getPackageDtail();
      })
    },
    getPackageDtail() {
      this.$axios('get', '/api/per/package/employee/info', {id: this.id}).then(res => {
        let data = res.data.data;
        let dimension = data.dimension;
        let relevance_employee=data.relevance_employee
        dimension.forEach((item, index) => {
          if (item.index.length > 0) {
            item.index.forEach((item2, index2) => {
              item2.wdName = item.name;
              item2.userName = relevance_employee.name;
            });
          }
        });
        let flow = data.flow;
        let list = []; //结果值录入集合
        flow.some(item => {
          if (item.code == 'result_value') {
            item.target.forEach(item2 => {
              if (item2.employee_id == this.$getUserData().id) {
                list = item2.list;
                status = item2.status;
              }
            });
            return true
          }
        });
        let statusList = []; //已录入指标
        let noStatusList = []; //未录入指标
        list.forEach(item => {//区分录入与未录入
          if (item.status == 2) {
            dimension[item.dimension_key].index[item.index_key].message = item;
            statusList.push(dimension[item.dimension_key].index[item.index_key]);
          }
          if (item.status == 1) {
            dimension[item.dimension_key].index[item.index_key].message = item;
            if(item.result_cache){//是否有暂存的数据有就显示出来
              dimension[item.dimension_key].index[item.index_key].result=item.result_cache
            }
            noStatusList.push(dimension[item.dimension_key].index[item.index_key]);
          }
        });
        this.statusListTotal=statusList.length;
        this.noStatusListTotal=noStatusList.length;
        this.statusList =  this.conformityData(statusList);
        this.noStatusList = this.conformityData(noStatusList);
      });
    },
    conformityData(arr){
        let returnArr=[];
        let strs= new Set(arr.map(item=>{
            return item.wdName
        }))
        strs.forEach(item=>{
            let obj={
              wdName:item,
              list:arr.filter(e=>{
                return e.wdName==item
              })
            }
            returnArr.push(obj)
        })
        return returnArr;
    },
  }
};
</script>
<style scoped lang="scss">
.wd-title{
    margin: 20px 0;
    padding-left: 10px;
    border-left: 3px solid #409eff;
}
.box-all {
  position: relative;
  background-color: #fff;
  font-size: 14px;
  padding: 20px;
}
.main {
   margin-bottom: 60px;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 1px solid #e8e8e8;
  padding: 12px 30px;
}
.active{
  color: #409EFF;
}
</style>