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

<template>
  <div class="u-OA-jixiao">
    <div class="head">第五部分　试验虚拟结算</div>
    <table class="main-table">
      <tr>
        <td rowspan="6" style="width: 100px">市场部<br/>核准</td>
        <td class="title" style="width: 100px">核准<br/>虚拟结算额</td>
        <td class="content" style="width: 360px">
          <div>
            <div v-for="(item, index) in stepEdit.xnJiesuanE" :key="index">{{ item.typeName }}：{{ item.price }}；</div>
          </div>
        </td>
        <td class="title white" style="width: 100px">核准<br/>虚拟结算毛利</td>
        <td class="content">
          <!-- <input v-model="stepEdit.xnMaoli" style="text-align: center" /> -->
          <div>
            <div v-for="(item, index) in stepEdit.xnJiesuanE" :key="index">{{ item.typeName }}：{{ item.price * 0.8 }}；</div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px">核准<br/>合同总额</td>
        <td class="content" style="width: 360px">
          <input v-model="stepEdit.hetongZonge" style="text-align: center" :disabled="stepParameter.disabled"/>
        </td>
        <td class="title white" style="width: 100px">核准<br/>外协外购</td>
        <td class="content" style="width: 350px">
          <input v-model="stepEdit.waixieWaigou" style="text-align: center" :disabled="stepParameter.disabled"/>
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px">销售提成<br/>基数</td>
        <td class="content" style="width: 360px">
          <input v-model="stepEdit.tichengJishu" style="text-align: center" :disabled="stepParameter.disabled"/>
        </td>
        <td class="title white" style="width: 100px">项目满意度</td>
        <td class="content" style="width: 350px">
          <el-input-number v-model="stepEdit.manyidu" :precision="0" :min="1" :max="100" label="项目满意度" :disabled="stepParameter.disabled"></el-input-number>
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px">项目计算<br/>标准</td>
        <td class="content" style="width: 360px">
          <div>
            <div>虚拟结算量化标准</div>
            <div>0-5万：5%</div>
            <div>5-10万：4%</div>
            <div>10-50万：3%</div>
            <div>50万以上：2%</div>
          </div>
        </td>
        <td class="title white" style="width: 100px">项目绩效<br/>基数计算</td>
        <td class="content" style="width: 350px">
          <el-table :data="stepEdit.jixiaoData" style="width: 100%">
            <el-table-column type="index" label="序号"></el-table-column>
            <!-- <el-table-column prop="type" label="试验类型"></el-table-column> -->
            <el-table-column prop="typeName" label="试验类型"></el-table-column>
            <!-- <el-table-column prop="fenduan" label="合同分段"></el-table-column> -->
            <el-table-column prop="bili" label="分段比例"></el-table-column>
            <el-table-column prop="ticheng" label="分段提成"></el-table-column>
            <el-table-column prop="yue" label="分段余额"></el-table-column>
          </el-table>
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px">项目得分<br/>（百分制）</td>
        <td class="content" style="width: 360px">
          <el-input-number v-model="stepEdit.fenshu" :precision="0" :min="1" :max="100" label="项目满意度" :disabled="stepParameter.disabled"></el-input-number>
        </td>
        <!-- <td class="content" style="width: 100px" colspan="2"></td> -->
        <td class="title white" style="width: 100px">虚拟结算<br/>绩效总额</td>
        <td class="content" style="width: 350px">
          <!-- 乘系数之后的数值数组 -->
          <!-- <div v-for="(item, index) in stepEdit.xnJixiaoZongeArr" :key="index">{{ item.typeName }}：{{ item.price }}；</div> -->
          <!-- 乘满意度之后的总额 -->
          <div>{{ (stepEdit.xnJixiaoZonge * stepEdit.manyidu)/100 }}</div>
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px">核准结论</td>
        <td class="content" style="width: 360px">
          <input v-model="stepEdit.reviewResult" style="text-align: center" :disabled="stepParameter.disabled"/>
        </td>
        <!-- <td class="content" style="width: 100px" colspan="2"></td> -->
        <td class="title white" style="width: 100px">核准人	</td>
        <td class="content" style="width: 350px">
          {{ stepParameter.fqUserName }}
            {{stepParameter.shenheTime}}
            <div class="btn" @click="submitSCReview()" :style="{'pointer-events':stepParameter.disabled?'none':'auto'}">保存</div>
        </td>
      </tr>
      <!-- 其余核准循环 -->
      <tr v-for="(item, index) in reviewLists" :key="index" :style="{'background-color': item.bgc}">
        <td class="" style="width: 100px;">{{item.title}}</td>
        <td class="title" style="width: 100px">{{item.name}}</td>
        <td class="content" style="width: 360px;">
          <div v-if="item.sort === '11' && !item.disabled">
            考核系数：100%；（对应哪儿个）  实际积分：{{ (stepEdit.xnJixiaoZonge * stepEdit.manyidu)/100 }}
          </div>
          <input v-else v-model="item.reviewResult" style="text-align: center;width: 100%;" :disabled="item.disabled"/>
        </td>
        <!-- <td class="content" style="width: 100px" colspan="2"></td> -->
        <td class="title white" style="width: 100px">{{item.person}}	</td>
        <td class="content" style="width: 350px;">
          {{ item.fqUserName }} {{item.shenheTime}}
          <div class="btn" @click="submitReview(item)" :style="{'pointer-events':item.disabled?'none':'auto'}">保存</div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'itdmXnJiesuan',
  props: {
    tableData5: {
      type: Array,
      default: [],
      required: false
    }
  },
  data() {
    return {
      defineXishu: [
        { type: 0, xishu: 0.40 },
        { type: 1, xishu: 0.70 },
        { type: 2, xishu: 1 },
      ],
      // 获取的流程数据
      stepParameter: {
        id: null,
        disabled: true
      },
      // 数据编辑信息
      stepEdit: {
        xnJiesuanE: [],
        tichengJishu: null,
        manyidu: 100,
        fenshu: 100,
        jixiaoData: [],
        xnJixiaoZonge: null,
        // hasMYDJixiaoZonge: null,
        xnJixiaoZongeArr: [],
        reviewSC: null
      },
      // 评审信息
      reviewLists: [
        {
          title: '工程技术部核准',
          name: '核准结论',
          person: '核准人',
          bgc: '#E5E0EC',
          disabled: true,
          reviewResult: null,
          fqUserName: null,
          shenheTime: null,
          sort: '9',
        },
        {
          title: '财务部核准',
          name: '核准结论',
          person: '核准人',
          bgc: '#F2DCDB',
          disabled: true,
          reviewResult: null,
          fqUserName: null,
          shenheTime: null,
          sort: '10',
        },
        {
          title: '总经理审批核准',
          name: '批准结论',
          person: '总经理',
          bgc: '#E5B9B7',
          disabled: true,
          reviewResult: null,
          fqUserName: null,
          shenheTime: null,
          sort: '11',
        },
        {
          title: '归档',
          name: '合同信息',
          person: '核准人',
          bgc: '#DBEEF3',
          disabled: true,
          reviewResult: null,
          fqUserName: null,
          shenheTime: null,
          sort: '12',
        },
      ],
      // moniData: [
      //   { type: 0, typeName: '气候试验', time: 1, unitPrice: 3, costPrice: 20000 },
      //   { type: 0, typeName: '气候试验', time: 1, unitPrice: 3, costPrice: 30000 },
      //   { type: 1, typeName: '力学试验', time: 1, unitPrice: 3, costPrice: 100000 },
      //   { type: 1, typeName: '力学试验', time: 1, unitPrice: 3, costPrice: 200000 },
      //   { type: 1, typeName: '力学试验', time: 1, unitPrice: 3, costPrice: 210000 },
      //   { type: 2, typeName: '重要试验', time: 1, unitPrice: 3, costPrice: 100000 },
      // ]
    }
  },
  computed: {
  },
  watch: {
    tableData5: {
      handler(newV, oldV){
        if(newV && newV[0]){
          console.log(newV)
          var arrData = newV
          
          var obj = arrData.find(res => res.sort === '8')
          this.stepEdit = obj.saveData ? JSON.parse(obj.saveData) : this.stepEdit
          this.stepParameter = obj
          this.stepParameter.disabled = !(obj.dangqian && obj.isUpdate)
          
          if(arrData[0].saveData){
            // 计算核准虚拟结算额
            var xnJiesuanPrice = JSON.parse(arrData[0].saveData).xnJiesuanPrice
            this.stepEdit.xnJiesuanE = this.changeData(xnJiesuanPrice, 'costPrice')
            // 项目绩效基础计算
            this.computeJixiaoData()
            // 计算虚拟结算绩效总额
            this.computeJXXishuZonge()
          }
          // 核准循环赋值
          this.reviewLists.forEach(item => {
            var objItem = arrData.find(res => res.sort === item.sort)
            item.id = objItem.id
            item.reviewResult = objItem.saveData ? JSON.parse(objItem.saveData).reviewResult : null
            item.fqUserName = objItem.fqUserName
            item.shenheTime = objItem.shenheTime
            item.disabled = !(objItem.dangqian && objItem.isUpdate)
          })
          console.log(this.reviewLists)

        }
      },
      // deep: true,
      immediate: true
    }
  },
  created(){
    this.getXnJiesuanE()
  },
  methods: {
    // 获取第一部分设置的项目虚拟结算额并计算数据
    getXnJiesuanE(){
      // 计算核准虚拟结算额
      // this.stepEdit.xnJiesuanE = this.changeData(this.moniData, 'costPrice')
      // 项目绩效基础计算
      this.computeJixiaoData()
      // 计算虚拟结算绩效总额
      this.computeJXXishuZonge()

    },
    // 将试验类型相同的金额相加，用于：核准虚拟结算额和虚拟结算绩效总额
    changeData(array, key){
      let totalArr = []
      array.forEach(element => {
        var itemObj = { type: element.type, typeName: element.typeName, price: element[key] }
        if(totalArr.length === 0){
          totalArr.push(itemObj)
        } else {
          var index = totalArr.findIndex(res => res.type === element.type)
          if(index === -1){
            // 原来没有  push
            totalArr.push(itemObj)
          } else {
            // 原来有  相加
            totalArr[index].price += itemObj.price
          }
        }
      });
      // console.log(totalArr)
      return totalArr
    },
    // 项目绩效基础计算
    computeJixiaoData(){
      var dataLists = []
      for (let i = 0; i < this.stepEdit.xnJiesuanE.length; i++) {
        const item = this.stepEdit.xnJiesuanE[i];
        const money = item.price * 0.8
        if(money > 500000){
          // 50万以上
          console.log(money+':50万以上')
          var arr = [
            {
              type: item.type,
              typeName: item.typeName,
              fenduan: item.fenduan,
              bili: 0.05,
              ticheng: 50000 * 0.05,
              yue: 50000
            },
            {
              type: item.type,
              typeName: item.typeName,
              fenduan: item.fenduan,
              bili: 0.04,
              ticheng: 50000 * 0.04,
              yue: 50000
            },
            {
              type: item.type,
              typeName: item.typeName,
              fenduan: item.fenduan,
              bili: 0.03,
              ticheng: 400000 * 0.03,
              yue: 400000
            },
            {
              type: item.type,
              typeName: item.typeName,
              fenduan: item.fenduan,
              bili: 0.02,
              ticheng: (money - 500000) * 0.02,
              yue: money - 500000
            },
          ]
          dataLists.push(...arr)
        } else if (money > 100000){
          // 10万-50万之间
          console.log(money+':10万-50万之间')
          var arr = [
            {
              type: item.type,
              typeName: item.typeName,
              fenduan: item.fenduan,
              bili: 0.05,
              ticheng: 50000 * 0.05,
              yue: 50000
            },
            {
              type: item.type,
              typeName: item.typeName,
              fenduan: item.fenduan,
              bili: 0.04,
              ticheng: 50000 * 0.04,
              yue: 50000
            },
            {
              type: item.type,
              typeName: item.typeName,
              fenduan: item.fenduan,
              bili: 0.03,
              ticheng: (money - 100000) * 0.03,
              yue: money - 100000
            },
          ]
          dataLists.push(...arr)
        } else if (money > 50000){
          // 5万-10万（包含）之间
          console.log(money+':5万-10万（包含）之间')
          var arr = [
            {
              type: item.type,
              typeName: item.typeName,
              fenduan: item.fenduan,
              bili: 0.05,
              ticheng: 50000 * 0.05,
              yue: 50000
            },
            {
              type: item.type,
              typeName: item.typeName,
              fenduan: item.fenduan,
              bili: 0.04,
              ticheng: (money - 50000) * 0.04,
              yue: money - 50000
            },
          ]
          dataLists.push(...arr)
        } else if (money >= 0){
          // 0-5万（包含）之间
          console.log(money+':0-5万（包含）之间')
          var arr = [
            {
              type: item.type,
              typeName: item.typeName,
              fenduan: item.fenduan,
              bili: 0.05,
              ticheng: money * 0.05,
              yue: money
            },
          ]
          dataLists.push(...arr)
        }
      }
      this.stepEdit.jixiaoData = dataLists
    },
    // 计算虚拟结算绩效总额
    computeJXXishuZonge(){
      // 将试验类型相同的金额相加
      var noHasXishuZonge = this.changeData(this.stepEdit.jixiaoData, 'ticheng')
      var total = 0
      var arr = noHasXishuZonge.map(item => {
        var obj = this.defineXishu.find(res => res.type === item.type)
        // 根据试验类型*对应系数
        item.price = item.price * obj.xishu
        // 计算出总和
        total += item.price
        return item
      })
      this.stepEdit.xnJixiaoZongeArr = arr
      console.log(total)
      this.stepEdit.xnJixiaoZonge = total
    },
    // 提交
    submitSCReview(){
      var saveData = {
        runFlowPathStep: this.stepParameter.id,
        saveData: JSON.stringify(this.stepEdit),
      }
      console.log(saveData)
      this.$emit('save', saveData)
    },
    submitReview(item){
      if(item.sort === '11'){
        var saveData = {
          runFlowPathStep: item.id,
          saveData: JSON.stringify({reviewResult: `考核系数：100%；（对应哪儿个）  实际积分： ${(this.stepEdit.xnJixiaoZonge * this.stepEdit.manyidu)/100} `}),
        } 
      } else {
        var saveData = {
          runFlowPathStep: item.id,
          saveData: JSON.stringify({reviewResult: item.reviewResult}),
        }
      }
      console.log(saveData)
      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: #DBEEF3;
}
.title {
  background-color: #fff;
  font-weight: bold;
}
.addRow {
  width: 60px;
  height: 24px;
  background-color: #fff;
  border-radius: 4px;
  text-align: center;
  line-height: 24px;
  font-size: 12px;
  margin-left: 20px;
  cursor: pointer;
}
.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>