iTDM-web/itdmWeb/src/views/module-iTDM/itdmYeWu/itdmGcShishi.vue

<template>
  <div class="u-OA-jixiao">
    <div class="head">第三部分　项目过程实施</div>
    <el-form ref="gsShishiForm" :model="stepEdit" :rules="rules">
    <table class="main-table">
      <tr v-for="(item, key) in stepEdit.assessmentLog" :key="key">
        <!-- <td :rowspan="12" style="width: 80px">项目成员<br/>考核日志</td> -->
        <td class="title" style="width: 100px;">
          <div>{{key + 1}}</div>
          <el-form-item :prop="`assessmentLog[${key}].name`" :rules="rules.name">
            <el-input v-model="item.name" :readonly="stepParameter.disabled" placeholder="请输入人员" class="person-input"></el-input>
          </el-form-item>
          <el-form-item :prop="`assessmentLog[${key}].job`">
            <el-input v-model="item.job" :readonly="stepParameter.disabled" placeholder="请输入职务" class="person-input"></el-input>
          </el-form-item>
        </td>
        <td class="content" colspan="6">
          <div style="display: flex; align-items: flex-end;">
            <div style="width: 500px;">
              <div>——★考核结果★——工作质量10×积极性10×工作量{{item.gzlItemTotal}}=得分{{item.itemDefen}}</div>
              <el-table :data="item.resultData" class="u-dynamic-table" border ref="table" style="width: 800px;">
                <el-table-column type="index" label="序号" align="center" min-width="60"></el-table-column>
                <el-table-column prop="date" label="日期" align="center" min-width="120">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.date" placeholder="请输入" :disabled="stepParameter.disabled"/>
                  </template>
                </el-table-column>
                <el-table-column prop="gongshi" label="工时" align="center" min-width="120">
                  <template slot-scope="scope">
                    <el-form-item :prop="`assessmentLog[${key}].resultData[${scope.$index}].gongshi`" :rules="rules.gongshi">
                      <el-input-number v-model="scope.row.gongshi" controls-position="right" @change="handleInputChange(item, key, scope.$index)" :min="0" :disabled="stepParameter.disabled"></el-input-number>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="qiangdu" label="强度" align="center" min-width="120">
                  <template slot-scope="scope">
                    <el-form-item :prop="`assessmentLog[${key}].resultData[${scope.$index}].qiangdu`" :rules="rules.qiangdu">
                      <el-input-number v-model="scope.row.qiangdu" controls-position="right" @change="handleInputChange(item, key, scope.$index)" :min="0" :disabled="stepParameter.disabled"></el-input-number>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="gzliang" label="工作量" align="center" min-width="120"></el-table-column>
              </el-table>
            </div>
            <el-button v-if="key !== 0" class="addRow" @click="delPersonRow(key)" :disabled='stepParameter.disabled'>删除</el-button>
            <el-button v-if="key === stepEdit.assessmentLog.length - 1" class="addRow" @click="addPersonRow" :disabled='stepParameter.disabled'>添加</el-button>
          </div>
        </td>
        <td class="content" colspan="2" style="width: 200px;font-weight: bold;color: #e52727;font-size: 15px;">★量化积分—{{ item.lhJifen }}</td>
      </tr>
      <tr>
        <td class="title" style="width: 100px;">非考核<br/>支持人员</td>
        <td class="content" colspan="4">
          <div style="display: flex;align-items: flex-end;">
            <el-table :data="stepEdit.feikaohePersons" class="u-dynamic-table" style="width: 90%" border>
              <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
              <el-table-column prop="person" label="人员" min-width="60" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.person" placeholder="请输入" :readonly="stepParameter.disabled"/>
                </template>
              </el-table-column>
              <el-table-column prop="content" label="支持内容" min-width="80" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.content" placeholder="请输入" :readonly="stepParameter.disabled"/>
                </template>
              </el-table-column>
              <el-table-column prop="time" label="支持工时" min-width="80" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.time" placeholder="请输入" :readonly="stepParameter.disabled"/>
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="备注" min-width="80" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.remark" placeholder="请输入" :readonly="stepParameter.disabled"/>
                </template>
              </el-table-column>
              <el-table-column label="操作" min-width="100" align="center">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="stepEdit.feikaohePersons.splice(scope.$index, 1)" :disabled="stepParameter.disabled">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button class="addRow" @click="stepEdit.feikaohePersons.push({})" :disabled='stepParameter.disabled'>添加</el-button>
          </div>
        </td>
        <td class="title white" style="width: 100px;">项目成员<br/>考核汇总</td>
        <td class="content" colspan="3">
          <span>工时：{{ zongGongshi }}</span>
          <span>强度：{{ zongQiangdu }}</span>
          <span>工作量：{{ zongGongzuoliang }}</span>
          <span>总得分：{{ stepEdit.zongfen }}</span>
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px;">项目完工<br/>申请</td>
        <td class="content" colspan="4">
          <el-radio-group v-model="stepEdit.isApply" :disabled="stepParameter.disabled">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </td>
        <td class="title white" style="width: 100px;">提交人</td>
        <td class="content" colspan="3">
          {{ stepParameter.fqUserName }} {{ stepParameter.shenheTime }}
          <div class="btn" @click="submitData" :style="{'pointer-events':stepParameter.disabled?'none':'auto'}">保存</div>
        </td>
      </tr>
    </table>
    </el-form>
  </div>
</template>

<script>
import { jixiaoPersonPrice } from '@/api/api'

export default {
  name: 'itdmGcShishi',
  props: {
    // json
    tableData3: {
      type: Array,
      default: false,
      required: false
    }
  },
  data() {
    return {
      // 第三部分所需步骤参数
      stepParameter: {
        disabled: true,
        fqUserName: null,
        shenheTime: null,
      },
      stepEdit: {
        // 考核人员量化积分情况
        assessmentLog: [
          { 
            name: '',
            job: '',
            gzlItemTotal: 0, // 每个人的工作量和
            itemDefen: 0, // 每个人的得分和
            lhJifen: 0, // 每个人的量化积分
            resultData: [{gongshi: 0, qiangdu: 0, gzliang: 0}], // 每个人单条工作量（目前只设置一条不能增）
          }
        ],
        zongfen: 0, // 所有人的总分（该项目的总分）
        feikaohePersons: [], // 非考核支持人员
        isApply: 0, // 是否申请完工
      },
      rules: {
        name: [
          { required: true, message: "不能为空", trigger: "change" }
        ],
        gongshi: [
          { required: true, message: "不能为空", trigger: "change" }
        ],
        qiangdu: [
          { required: true, message: "不能为空", trigger: "change" }
        ],
      },
      // 绩效总额（第一步之后按照第五步显示的计算的绩效总额）
      xnJixiaoZonge: 0,
    }
  },
  watch: {
    tableData3: {
      handler(newV, oldV){
        if(newV && newV[1]){
          console.log(newV)
          var arrData = newV[1]
          this.stepEdit = arrData.saveData ? JSON.parse(arrData.saveData) : this.stepEdit
          this.stepParameter = arrData
          this.stepParameter.disabled = !(arrData.dangqian && arrData.isUpdate)
          console.log(this.stepParameter)
          this.xnJixiaoZonge = JSON.parse(newV[0].saveData).xnJixiaoZonge
        }
      },
      // deep: true,
      immediate: true
    }
  },
  computed: {
    zongGongshi(){
      var sum
      sum = this.stepEdit.assessmentLog.reduce((prev, curr, index) => {
        const value = Number(curr.resultData.gongshi);
        //确定数据是否为空,不为空进行计算,为空返回原值
        if (!isNaN(value)) {
          console.log(value)
          return prev + value
        } else {
          return prev;
        }
      }, 0);
      return sum
    },
    zongQiangdu(){
      var sum
      sum = this.stepEdit.assessmentLog.reduce((prev, curr, index) => {
        const value = Number(curr.resultData.qiangdu);
        //确定数据是否为空,不为空进行计算,为空返回原值
        if (!isNaN(value)) {
          return prev + value
        } else {
          return prev;
        }
      }, 0);
      return sum
    },
    zongGongzuoliang(){
      var sum
      sum = this.stepEdit.assessmentLog.reduce((prev, curr, index) => {
        const gongshi = Number(curr.resultData.gongshi);
        const qiangdu = Number(curr.resultData.qiangdu);
        //确定数据是否为空,不为空进行计算,为空返回原值
        if (!isNaN(gongshi) && !isNaN(qiangdu) ) {
          return prev + (gongshi * qiangdu)
        } else {
          return prev;
        }
      }, 0);
      return sum
    },
    zongFen(){
      var sum
      sum = this.stepEdit.assessmentLog.reduce((prev, curr, index) => {
        const gongshi = Number(curr.resultData.gongshi);
        const qiangdu = Number(curr.resultData.qiangdu);
        //确定数据是否为空,不为空进行计算,为空返回原值
        if (!isNaN(gongshi) && !isNaN(qiangdu) ) {
          return prev + (gongshi * qiangdu * 10 * 10)
        } else {
          return prev;
        }
      }, 0);
      return sum
    },
  },
  created(){
    console.log(33333,this.tableData3)
  },
  methods: {
    // 添加一行考核人员及其绩效
    addPersonRow(){
      this.stepEdit.assessmentLog.push({
        name: '',
        job: '',
        gzlItemTotal: 0,
        itemDefen: 0,
        lhJifen: 0,
        resultData: [{gongshi: 0, qiangdu: 0, gzliang: 0}] })
    },
    // 删除当前考核人员及其绩效
    delPersonRow(key){
      this.stepEdit.assessmentLog.splice(key, 1)
    },
    // 当工时或强度改变时，计算工作量和量化积分
    handleInputChange(item, key, index){
      // 计算当前人员当前行工作量
      var gzliang = item.resultData[index].gongshi * item.resultData[index].qiangdu
      this.stepEdit.assessmentLog[key].resultData[index].gzliang = gzliang
      // 计算当前人员工作量（现在是只有一行，即只有一个工作量，万一以后有多个工作量需要求和，如下）
      var gzlItemTotal = this.stepEdit.assessmentLog[key].resultData.reduce((old, now) => {
        console.log(old, now)
        return old + now.gzliang
      }, 0)
      this.stepEdit.assessmentLog[key].gzlItemTotal = gzlItemTotal
      // 计算当前人员个人得分和
      this.stepEdit.assessmentLog[key].itemDefen = 10 * 10 * gzlItemTotal
      // 计算总分
      this.stepEdit.zongfen = this.stepEdit.assessmentLog.reduce((old, now) => {
        return old + now.itemDefen
      }, 0)
      // 计算量化积分
      this.stepEdit.assessmentLog.forEach(res => {
        res.lhJifen = ((res.itemDefen / this.stepEdit.zongfen) * this.xnJixiaoZonge).toFixed(2)
      })
      console.log(this.stepEdit.assessmentLog)
    },

    submitData() {
      // console.log(this.stepParameter)
      // console.log(this.$route.query.weituoNo)

      this.$refs["gsShishiForm"].validate(valid => {
        if (valid) {
          var saveData = {
            runFlowPathStep: this.stepParameter.id,
            saveData: JSON.stringify(this.stepEdit),
          }
          this.$emit('save', saveData)
        }
      })
    },
  }
}
</script>

<style scoped>
@import '~@assets/less/common.less';
table * {
  box-sizing: border-box;
  font-size: 14px;
}
table {
  border: 1px solid rgb(30, 53, 65);
  width: 100%;
  table-layout:fixed;
}
td {
  text-align: center;
  border: 1px solid rgb(30, 53, 65);
}
tr {
  height: 50px;
}

.main-table {
  background-color: #FDEADA;
}
.title {
  background-color: #fff;
  font-weight: bold;
}
.addRow {
  padding: 6px 10px;
  text-align: center;
  font-size: 12px;
  margin-left: 20px;
}
.btn {
  display: inline-block;
  padding: 2px 10px;
  font-size: 13px;
  border: 1px solid rgb(3, 188, 244);
  color: rgb(8, 187, 241);
  border-radius: 4px;
  cursor: pointer;
  position: absolute;
  right: 3%;
}
.delBtn {
  padding: 3px 10px;
  text-align: center;
  font-size: 12px;
}
input {
  padding: 0 20px;
  height: 50px;
  outline: none;
  border: none;
  background: transparent;
}

.head {
    height: 35px;
    background-color: #FFFF00;
    text-align: center;
    line-height: 35px;
    font-weight: bold;
    font-size: 18px;
    border: 1px solid rgb(30, 53, 65);
}
</style>
<style lang="less">
.person-input{
  .el-input__inner{
    border: none;
    border-bottom: 1px solid #DCDFE6;
    padding: 0 4px;
    border-radius: 0;
  }
}
</style>