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" >实际使用经费</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">直接费用（1）</td>
        </tr>
        <tr>
          <td colspan="2">小型工具与耗材费</td>
          <td v-text="data['device']">
          </td><td colspan="2">
            原材料、电子元件、3D打印耗材、样品打样材料、展示宣传物料等；采购后应当办理入库与出库登记，确保账物相符，提交满足财务要求的相关材料报销。
          <div style="color:#0000FF">【对应内控系统指标：耗材费】</div><div style="color:#0000FF"> 上限：40%—65%</div>
          </td>
        </tr>
        <tr>
          <td colspan="2">创客交流与调研活动 差旅费</td><td v-text="data['Material']">
          </td><td colspan="2">
            与项目直接相关的参赛、展示、市场/技术差旅费用；报销须附任务书、成果报告或赛事成绩凭证，提交满足财务要求的相关材料报销。
          <div style="color:#0000FF">【对应内控系统指标：差旅费】</div><div style="color:#0000FF">上限 ：≤10%</div>
          </td>
        </tr>
        <tr>
          <td colspan="2">成果鉴定与认证费</td><td v-text="data['processing']">
          </td><td colspan="2">
            第三方检测报告、计量校准、技术/产品认证等；报销须附正式报告或证书，提交满足财务要求的相关材料报销。
          <div style="color:#0000FF">【对应内控系统指标：委托业务费】</div><div style="color:#0000FF">上限：≤5%</div>
          </td>
        </tr>
        <tr>
          <td colspan="2">专家咨询与评审费</td><td v-text="data['Collaboration']">
          </td><td colspan="2">
            技术咨询、论证、中期/结题评审等劳务费用；须附专家签字意见与现场照片等佐证，提交满足财务要求的相关材料报销。
          <div style="color:#0000FF">【对应内控系统指标：劳务费】</div><div style="color:#0000FF">上限：≤5%或≤2,000元</div>
          </td>
        </tr>

        <tr>
          <td rowspan="5">直接费用（2）</td>
        </tr>
        <tr>
          <td colspan="2">论文版面费</td><td v-text="data['APPRAISAL']">
          </td><td colspan="2">
            团队学生以第一作者发表与项目相关论文的版面费；须提供录用通知，提交满足财务要求的相关材料报销。
          <div style="color:#0000FF">【对应内控系统指标：其他商品和服务支出】</div><div style="color:#0000FF">上限：≤5%或≤3,000元</div>
          </td>
        </tr>
        <tr>
          <td colspan="2">测试与外协加工费</td><td v-text="data['entery']">
          </td><td colspan="2">
            专业检测与测试、小批量试制、样品制作、云计算资源、短期软件授权、第三方API等；须有合同/发票并注明交付成果，提交满足财务要求的相关材料报销。
          <div style="color:#0000FF">【对应内控系统指标：其他商品和服务支出】</div><div style="color:#0000FF">上限：≤40%</div>
          </td>
        </tr>
        <tr>
          <td colspan="2">创客交流与调研活动报名费</td><td v-text="data['activities']">
          </td><td colspan="2">
            与项目直接相关的参赛、展示、市场/技术调研等报名费用；报销须附任务书、成果报告或赛事成绩凭证，提交满足财务要求的相关材料报销。
          <div style="color:#0000FF">【对应内控系统指标：其他商品和服务支出】</div><div style="color:#0000FF">上限：≤10%</div>
          </td>
        </tr>
        <tr>
          <td colspan="2">其他费用</td><td v-text="data['Transaction']">
          </td><td colspan="2">
             邮寄快递、样品寄送等合理但难以预见的小额支出；须注明用途并提供有效票据，提交满足财务要求的相关材料报销。
          <div style="color:#0000FF">【对应内控系统指标：其他商品和服务支出】</div><div style="color:#0000FF">上限：≤3%，累计≤1,000元</div>
          </td>
        </tr>
      </table>
  </div>
</template>

<script>
export default {
data() {
  return {
      loading:false,
      data:{
        device:"",
        Material:"",
        processing:"",
        Collaboration:"",
        APPRAISAL:"",
        entery:"",
        activities:"",
        Transaction:"",
      }
  }
},
methods:{
  getData(){   //初始化完成获取基本数据进行填充
		if(this.loading)return;
    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=>{
          console.log(item)
          if(item['actualuse']==null|item['actualuse']=='')return;
          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>