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

<template>
  <div>
    <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 tableData.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="tableData.xnMaoli" style="text-align: center" /> -->
          <div>
            <div v-for="(item, index) in tableData.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="tableData.hetongZonge" style="text-align: center" />
        </td>
        <td class="title white" style="width: 100px">核准<br/>外协外购</td>
        <td class="content" style="width: 350px">
          <input v-model="tableData.waixieWaigou" style="text-align: center" />
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px">销售提成<br/>基数</td>
        <td class="content" style="width: 360px">
          <input v-model="tableData.tichengJishu" style="text-align: center" />
        </td>
        <td class="title white" style="width: 100px">项目满意度</td>
        <td class="content" style="width: 350px">
          <input v-model="tableData.manyidu" style="text-align: center" />
        </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="tableData.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">
          <input v-model="tableData.fenshu" style="text-align: center" />
        </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 tableData.xnJixiaoZongeArr" :key="index">{{ item.typeName }}：{{ item.price }}；</div> -->
          <!-- 乘满意度之后的总额 -->
          <div>{{ (tableData.xnJixiaoZonge * tableData.manyidu)/100 }}</div>
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px">核准结论</td>
        <td class="content" style="width: 360px">
          <div></div>
        </td>
        <!-- <td class="content" style="width: 100px" colspan="2"></td> -->
        <td class="title white" style="width: 100px">核准人	</td>
        <td class="content" style="width: 350px">
          <input v-model="tableData.shuruLeixing" style="text-align: center" />
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px; background-color: #E5E0EC;">工程技术部<br/>核准</td>
        <td class="title" style="width: 100px">核准结论</td>
        <td class="content" style="width: 360px; background-color: #E5E0EC;">
          <div></div>
        </td>
        <!-- <td class="content" style="width: 100px" colspan="2"></td> -->
        <td class="title white" style="width: 100px">核准人	</td>
        <td class="content" style="width: 350px; background-color: #E5E0EC;">
          <input v-model="tableData.shuruLeixing" style="text-align: center" />
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px; background-color: #F2DCDB;">财务部<br/>核准</td>
        <td class="title" style="width: 100px">核准结论</td>
        <td class="content" style="width: 360px; background-color: #F2DCDB;">
          <div></div>
        </td>
        <!-- <td class="content" style="width: 100px" colspan="2"></td> -->
        <td class="title white" style="width: 100px">核准人	</td>
        <td class="content" style="width: 350px; background-color: #F2DCDB;">
          <input v-model="tableData.shuruLeixing" style="text-align: center" />
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px; background-color: #E5B9B7;">总经理审批</td>
        <td class="title" style="width: 100px">批准结论</td>
        <td class="content" style="width: 360px; background-color: #E5B9B7;">
          <div></div>
        </td>
        <!-- <td class="content" style="width: 100px" colspan="2"></td> -->
        <td class="title white" style="width: 100px">总经理	</td>
        <td class="content" style="width: 350px; background-color: #E5B9B7;">
          <input v-model="tableData.shuruLeixing" style="text-align: center" />
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px; background-color: #DBEEF3;">归档</td>
        <td class="title" style="width: 100px">合同信息</td>
        <td class="content" style="width: 360px">
          <div></div>
        </td>
        <!-- <td class="content" style="width: 100px" colspan="2"></td> -->
        <td class="title white" style="width: 100px">核准人	</td>
        <td class="content" style="width: 350px">
          <input v-model="tableData.shuruLeixing" style="text-align: center" />
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'itdmXnJiesuan',
  data() {
    return {
      defineXishu: [
        { type: 0, xishu: 0.40 },
        { type: 1, xishu: 0.70 },
        { type: 2, xishu: 1 },
      ],
      tableData: {
        xnJiesuanE: [
          // { type: 0, typeName: '气候试验', price: 50000 },
          // { type: 1, typeName: '力学试验', price: 510000 },
          // { type: 2, typeName: '重要试验', price: 100000 },
        ],
        tichengJishu: null,
        manyidu: 100,
        fenshu: null,
        jixiaoData: [],
        xnJixiaoZonge: null,
        // hasMYDJixiaoZonge: null,
        xnJixiaoZongeArr: []
      },
      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: {    
  },
  created(){
    this.getXnJiesuanE()
  },
  methods: {
    // 获取第一部分设置的项目虚拟结算额并计算数据
    getXnJiesuanE(){
      // 计算核准虚拟结算额
      this.tableData.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.tableData.xnJiesuanE.length; i++) {
        const item = this.tableData.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.tableData.jixiaoData = dataLists
    },
    // 计算虚拟结算绩效总额
    computeJXXishuZonge(){
      // 将试验类型相同的金额相加
      var noHasXishuZonge = this.changeData(this.tableData.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.tableData.xnJixiaoZongeArr = arr
      console.log(total)
      this.tableData.xnJixiaoZonge = total
    },
  },
}
</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%;
}
td {
  text-align: center;
  border: 1px solid rgb(30, 53, 65);
}
tr {
  height: 50px;
}

.main-table {
  background-color: #DBEEF3;
}
.title {
  background-color: #fff;
}
.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>