ssti-CollegeManage/src/views/projectManage/components/FundDetail.vue

<template>
  <div id="fundDetail" v-loading="loading">
      <table border="1" cellspacing="0" class="table">
          <tr id="fund">
          <td rowspan="12" ref="fund" style="white-space: ;">实际使用经费</td><td>总经费</td><td colspan="5" v-text="total+' 元'"></td>
        </tr>
        <tr>
          <td>支出类别</td><td colspan="2">支出项目</td><td>金额（元）</td><td colspan="4">备 注</td>
        </tr>
        <tr>
          <td rowspan="5">直接费用</td>
        </tr>
        <tr>
          <td colspan="2">小型仪器设备费</td>
          <td v-text="data['device']">
          </td><td colspan="2">
            项目开展所需的小型专用仪器设备、工具、配件购置或租赁费用。
          </td>
        </tr>
        <tr>
          <td colspan="2">材料费</td><td v-text="data['Material']">
          </td><td colspan="2">
            项目开展需消耗的各种原材料、辅助材料等低值易耗品的采购费用。
          </td>
        </tr>
        <tr>
          <td colspan="2">测试化验加工费</td><td v-text="data['processing']">
          </td><td colspan="2">
            项目开展过程中支付给外单位的检验、测试、化验、计算、分析及加工费等费用。
          </td>
        </tr>
        <tr>
          <td colspan="2">项目协作费</td><td v-text="data['Collaboration']">
          </td><td colspan="2">
            按合同规定支付给协作单位的费用
          </td>
        </tr>
  
        <tr>
          <td rowspan="5">间接费用</td>
        </tr>
        <tr>
          <td colspan="2">项目成果鉴定费</td><td v-text="data['APPRAISAL']">
          </td><td colspan="2">
            学术会务费、评审费、鉴定费、成果集制作费等费用。
          </td>
        </tr>
        <tr>
          <td colspan="2">参展参赛费</td><td v-text="data['entery']">
          </td><td colspan="2">
            参加创客展会、竞赛等所需的报名费、展位费、布展费、宣传推广费及差旅费等费用。
          </td>
        </tr>
        <tr>
          <td colspan="2">创客交流活动费</td><td v-text="data['activities']">
          </td><td colspan="2">
            创客交流活动中支付给校外专家的指导费、咨询费、授课费等费用。
          </td>
        </tr>
        <tr>
          <td colspan="2">知识产权事务费</td><td v-text="data['Transaction']">
          </td><td colspan="2">
            论文版面费、专利及其他知识产权事务等费用。
          </td>
        </tr>
      </table>
  </div>
</template>

<script>
export default {
data() {
  return {
      loading:false,
      data:{
        device:"",
        Material:"",
        processing:"",
        Collaboration:"",
        APPRAISAL:"",
        entery:"",
        activities:"",
        Transaction:"",
      }
  }
},
methods:{
  getData(){   //初始化完成获取基本数据进行填充
    this.loading = true;
    for(let i in this.data)this.data[i]=0;
    let param={
      uid:this.$store.state.userInfo.userid,
      pid:this.$route.query['pid']
    }
    this.ajax.get(this.$store.state.api+'/getProjectActivityFundIsUseDetail',param).then(res=>{
        let isUse = res['data'][0];
        isUse.forEach(item=>{
          let JP = JSON.parse(item['actualuse']);
          this.data['device']+=Number(JP['device']);
          this.data['Material']+=Number(JP['Material']);
          this.data['processing']+=Number(JP['processing']);
          this.data['Collaboration']+=Number(JP['Collaboration']);
          this.data['APPRAISAL']+=Number(JP['APPRAISAL']);
          this.data['entery']+=Number(JP['entery']);
          this.data['activities']+=Number(JP['activities']);
          this.data['Transaction']+=Number(JP['Transaction']);
        })
        this.loading = false;
      }).catch(err=>{
        console.log(err);
      })
    },
},
computed:{
  total(){
    let num = 0;
    for(let i in this.data)num+=Number(this.data[i]);
    return num;
  }
},
mounted(){
  this.getData()
  console.log(111);
}
}
</script>

<style lang="less" scoped>
#fundDetail{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .table{
      width: 100%;
      border: none;
      border-top: solid 1px black;
      border-right:  solid 1px black;
      border-left:  solid 1px black;
      tr{
        position: relative;
        td{
          border: none;
          border-bottom: solid 1px black;
          border-right: solid 1px black;
          height: 65px;
          text-align: center;
          line-height: 30px;
          min-width: 80px;
          box-sizing: border-box;
          padding: 5px;
          }
      }      
  }
}
</style>