ssti-CollegeManage/src/views/fundManage/makerfundDetails.vue

<template>
    <!-- 创客资金申请表单 -->
  <div>
    <div class="vfpHeader">
        <div class="titleOne">活动资金详细</div>
        <el-button @click="$router.push('/makerfund')" type="primary" size="mini">返回</el-button>
    </div>
    <hr>
    <!-- 项目名称、类型开始 -->
    <div class="Apply1">
        <div class="inpInterval">项目名称</div>
        <el-select disabled v-model="projectName" style="width: 30%;" placeholder="请选择">
            <el-option
            v-for="item in projectFilter"
            :key="item.id"
            :label="item.title"
            :value="item.id">
            </el-option>
        </el-select>
    </div>

    <div class="tabTit">
            <div>
                <p>经费支出类别(单位:元)</p>
            </div>
    </div>
    <hr>
    <table border="1" cellspacing="0" class="table">
       
        <tr>
            <td colspan="2">经济支出类别</td><td>预算</td><td>已支付</td><td>本次申请</td><td>实际使用</td><td>余额</td><td colspan="3">备注</td>
        </tr>
        <tr v-for="(item,index) in fundList" :key="index">
            <td colspan="2">{{ item.fundName }}</td>
            <td>
                {{item.budget}}
            </td>
            <td>
                {{item.havePaid}}
            </td>
            <td>
               {{ item.thisApply }}
            </td>
            <td v-if="!state" style="background-color: rgb(234, 252, 186);">
                <el-input
                type="number"
                autosize
                style="width: 100%;"
                resize="none"
                onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
                placeholder="请输入金额"
                v-model="item.actualuse">
                </el-input>
            </td>
            <td v-if="state>0">
                {{ item.actualuse }}
            </td>
            <td>
                {{ item.budget-item.havePaid-item.actualuse }}
            </td>
            <td colspan="3" style="box-sizing: border-box;padding: 0 10px;">
                {{ item.remark }}
            </td>
        </tr>
        <tr>
            <td>事由</td>
            <td colspan="10" class="textLeft">
                <el-input
                type="textarea"
                :autosize="{ minRows: 6, maxRows: 20}"
                style="width: 100%;"
                resize="none"
                placeholder=""
                v-model="intro">
                </el-input>
            </td>
        </tr>
        <tr>
            <td v-for="(i,k) in 9" :key="k" style="border: none;"></td>
        </tr>
        
    </table>
    <div class="baseBtn">
        <div class="blockWidth">
            <el-button type="primary" @click="download">生成表单</el-button>
            <el-button type="primary" v-if="!state" @click="submitData">提交</el-button>
            <el-button type="primary" v-if="state>0" class="disa">提交</el-button>
        </div>
    </div>


    <!-- 下载文档开始 -->
    <el-dialog
      title="生成Excel"
      :visible.sync="downLoadExcelDig"
      width="600px"
      class="pageSubmitData"
    >
      
      <span class="deleteContent">确定生成Excel?</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="downLoadExcel" class="AllDialogBtn">确认</el-button>
        <el-button @click="downLoadExcelDig = false" class="AllDialogBtn">取消</el-button>
      </span>
    </el-dialog>
    <!-- 下载文档结束-->

    <!-- 提交文档开始 -->
    <el-dialog
      title="提交"
      :visible.sync="submitDataDig"
      width="600px"
      class="pageSubmitData"
    >
      
      <span class="deleteContent">确定提交?</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAll" class="AllDialogBtn">确认</el-button>
        <el-button @click="submitDataDig = false" class="AllDialogBtn">取消</el-button>
      </span>
    </el-dialog>
    <!-- 提交文档结束-->


  </div>
</template>

<script>
    import getFundNo from '@/components/tool/getProjectNo';
    import BeUpload from "../../components/tool/beUpload.vue";
    // import getExcel from "@/components/tool/getExcel";
    import {getExcel2} from '@/components/tool/downloadExcel'
export default {
    components: {
        BeUpload,
      },
    data() {
        return {
            projectFilter:[],    //项目名称列表            
            projectName:'',      //所选名称
            downLoadExcelDig:false,//下载Excel对话框
            submitDataDig:false,//提交对话框
            allFund:'',//总经费
            fundList:[   //table遍历数据
                {fundName:'小型仪器设备费',budget:'',havePaid:0,thisApply:'',actualuse:'',remark:'项目开展所需的小型专用仪器设备、工具、配件购置或租赁费用。'},
                {fundName:'材料费',budget:'',havePaid:0,thisApply:'',actualuse:'',remark:'项目开展需消耗的各种原材料、辅助材料等低值易耗品的采购费用。'},
                {fundName:'测试化验加工费',budget:'',havePaid:0,thisApply:'',actualuse:'',remark:'项目开展过程中支付给外单位的检验、测试、化验、计算、分析及加工费等费用。'},
                {fundName:'项目协作费',budget:'',havePaid:0,thisApply:'',actualuse:'',remark:'按合同规定支付给协作单位的费用'},
                {fundName:'项目成功鉴定费',budget:'',havePaid:0,thisApply:'',actualuse:'',remark:'学术会务费、评审费、鉴定费、成果集制作费等费用。'},
                {fundName:'参展参赛费',budget:'',havePaid:0,thisApply:'',actualuse:'',remark:'参加创客展会、竞赛等所需的报名费、展位费、布展费、宣传推广费及差旅费等费用。'},
                {fundName:'创客交流活动费',budget:'',havePaid:0,thisApply:'',actualuse:'',remark:'创客交流活动中支付给校外专家的指导费、咨询费、授课费等费用。'},
                {fundName:'知识产权事务费',budget:'',havePaid:0,thisApply:'',actualuse:'',remark:'论文版面费、专利及其他知识产权事务等费用。'},
            ],
            haveFund:'', //已支付经费
            intro:'',   //事由
            tit:'',//活动名称
            ty:'',//活动类型
            state:0,
        }
    },
    methods:{
        // console.log(this.projectName);
            //total：总经费     
            //小型仪器设备费：device        
            //材料费：Material             
            //测试化验加工费：processing  
            //项目协作费：Collaboration   
            //项目成果鉴定费：APPRAISAL  
            //参展参赛费：entery        
            //创客交流活动费：activities   
            //知识产权事务费：Transaction  

        getData(){         //获取活动经费的数据
            let param={
                uid:this.$store.state.userInfo.userid,
                fid:this.$route.query['Id'],
                aid:this.$route.query['aid'],
            }
            this.ajax
            .get(this.$store.state.api+'/selectActivityFundDetail',param)
            .then(res=>{
                console.log(res.data);
                let data=res.data[0][0]
                // console.log(data);
                let applyfund=JSON.parse(data['applyfund'])
                let fund=JSON.parse(data['fund'])
                let usedFund=JSON.parse(data['usedFund'])
                let actualuse=JSON.parse(data['actualuse'])
                this.tit=data.title;
                this.ty=data.type;

                let arr= res['data'][1].filter(e=>{
                    return e.actualuse!=null
                })
                // console.log(arr);

                let isUse = arr;
                if (arr) {
                    // console.log(111);
                    isUse.forEach(item=>{
                    let JP = JSON.parse(item['actualuse']);
                        this.fundList[0]['havePaid']+=Number(JP['device']);
                        this.fundList[1]['havePaid']+=Number(JP['Material']);
                        this.fundList[2]['havePaid']+=Number(JP['processing']);
                        this.fundList[3]['havePaid']+=Number(JP['Collaboration']);
                        this.fundList[4]['havePaid']+=Number(JP['APPRAISAL']);
                        this.fundList[5]['havePaid']+=Number(JP['entery']);
                        this.fundList[6]['havePaid']+=Number(JP['activities']);
                        this.fundList[7]['havePaid']+=Number(JP['Transaction']);
                    })
                }
                


                
                // console.log(applyfund);
                this.fundList[0].budget=fund.device
                this.fundList[1].budget=fund.Material
                this.fundList[2].budget=fund.processing
                this.fundList[3].budget=fund.Collaboration
                this.fundList[4].budget=fund.APPRAISAL
                this.fundList[5].budget=fund.entery
                this.fundList[6].budget=fund.activities 
                this.fundList[7].budget=fund.Transaction

                if (data['usedFund']!=null) {
                    this.fundList[0].havePaid=usedFund.device
                    this.fundList[1].havePaid=usedFund.Material
                    this.fundList[2].havePaid=usedFund.processing
                    this.fundList[3].havePaid=usedFund.Collaboration
                    this.fundList[4].havePaid=usedFund.APPRAISAL
                    this.fundList[5].havePaid=usedFund.entery
                    this.fundList[6].havePaid=usedFund.activities 
                    this.fundList[7].havePaid=usedFund.Transaction
                }

                this.fundList[0].thisApply=applyfund.device
                this.fundList[1].thisApply=applyfund.Material
                this.fundList[2].thisApply=applyfund.processing
                this.fundList[3].thisApply=applyfund.Collaboration
                this.fundList[4].thisApply=applyfund.APPRAISAL
                this.fundList[5].thisApply=applyfund.entery
                this.fundList[6].thisApply=applyfund.activities 
                this.fundList[7].thisApply=applyfund.Transaction

                if (data['actualuse']!=null) {
                    this.fundList[0].actualuse=actualuse.device
                    this.fundList[1].actualuse=actualuse.Material
                    this.fundList[2].actualuse=actualuse.processing
                    this.fundList[3].actualuse=actualuse.Collaboration
                    this.fundList[4].actualuse=actualuse.APPRAISAL
                    this.fundList[5].actualuse=actualuse.entery
                    this.fundList[6].actualuse=actualuse.activities
                    this.fundList[7].actualuse=actualuse.Transaction
                }
                

                this.intro=data.intro
                this.state=data.state
                this.allFund=data.money


            },err=>{
                console.log(err);
            })
        },
         

        download(){
            if(!this.projectName) return this.$message.error('请选择项目名称')
            this.downLoadExcelDig=true
        },
        downLoadExcel(){   //生成表单
            getExcel2(this.fundList,this.intro,this.tit,this.ty)
            this.downLoadExcelDig=false
        },
        submitData(){
            if(!this.projectName) return this.$message.error('请选择项目名称')
            let arr=[this.fundList[0].actualuse,this.fundList[1].actualuse,this.fundList[2].actualuse,this.fundList[3].actualuse,this.fundList[4].actualuse,this.fundList[5].actualuse,this.fundList[6].actualuse,this.fundList[7].actualuse]
            let arr2=[this.fundList[0].havePaid,this.fundList[1].havePaid,this.fundList[2].havePaid,this.fundList[3].havePaid,this.fundList[4].havePaid,this.fundList[5].havePaid,this.fundList[6].havePaid,this.fundList[7].havePaid]
            
            // console.log(arr);
            let fund=arr.reduce((prev,cur,index,arr) => {
                return prev + cur*1;
            },0); 
            let fund2=arr2.reduce((prev,cur,index,arr) => {
                return prev + cur*1;
            },0); 
            console.log(fund,fund2);
            if (fund+fund2>this.allFund) return this.$message.error('申请金额已大于预算')
            this.submitDataDig=true
        },
        submitAll(){           //提交创客资金申请
        //    getFundNo("ZJ").then((result)=>{

            // let arr={
            //     device:(this.fundList[0].actualuse+this.haveFund.device*1),
            //     Material:this.fundList[1].actualuse+this.haveFund.Material*1,
            //     processing:this.fundList[2].actualuse+this.haveFund.processing*1,
            //     Collaboration:this.fundList[3].actualuse+this.haveFund.Collaboration*1,
            //     APPRAISAL:this.fundList[4].actualuse+this.haveFund.APPRAISAL*1,
            //     entery:this.fundList[5].actualuse+this.haveFund.entery*1,
            //     activities:this.fundList[6].actualuse+this.haveFund.activities*1,
            //     Transaction:this.fundList[7].actualuse+this.haveFund.Transaction*1,
            // }
            
            //  console.log(arr);


                let param={
                    uid:this.$store.state.userInfo.userid,
                    // fNo:result, //项目编号
                    fid:this.$route.query['Id'],
                    intro:this.intro,
                    f:JSON.stringify({
                        device:this.fundList[0].actualuse,
                        Material:this.fundList[1].actualuse,
                        processing:this.fundList[2].actualuse,
                        Collaboration:this.fundList[3].actualuse,
                        APPRAISAL:this.fundList[4].actualuse,
                        entery:this.fundList[5].actualuse,
                        activities:this.fundList[6].actualuse,
                        Transaction:this.fundList[7].actualuse,
                    }),
                }
                // return console.log(param);
                this.ajax
                .post(this.$store.state.api+'/updateActivityFundDetail',param)
                .then(res=>{
                    console.log(res);
                    if(res.data==1){
                        this.$message.success('提交成功')
                        this.submitDataDig=false
                        this.$router.push('/makerfund')
                    }else{
                        this.$message.error('提交失败')
                    }
                },err=>{
                    console.log(err);
                })
            // })
        },
    },

    mounted(){
        this.getData()
        this.projectName=this.$route.query['tit']
        // console.log(this.$route.query['aid']);
        // console.log(this.$route.query['tit']);
    }
}
</script>

<style lang="less" scoped>
    .Apply1{         //顶部下拉框
        height: 45px;
        width: 50%;
        display: flex;
        justify-content: flex-start;
        margin-top: 20px;
    }
    .inpInterval{    //label
        min-width: 80px;
        display: inline-block;
        text-align: justify;
        text-justify:distribute-all-lines;
        text-align-last: justify;
        transform: translate(0,22%);
        padding-right: 15px;
        font-size: 16px;
    }
    .table{ 
        border: none;
        border-top: solid 1px black;
        // border-right:  solid 1px black;
        width: 80%;
        margin: auto;
        margin-top: 30px;
        .textLeft{
          :deep(.el-textarea__inner){
            border: none ;
            border-radius: 0px;
            text-align: left !important;
            font-size: 16px;
          }
        }
        tr td{
            border: none;
            border-bottom: solid 1px black;
            border-right: solid 1px black;
          height: 50px;
          text-align: center;
          line-height: 30px;
          width: 9%;
           
          &:nth-child(1){
                border-left:  solid 1px black;
              }
          p{
            font-weight: 600;
          }
          :deep(.el-select .el-input .el-select__caret){
            display: none;
          }
          :deep(.el-textarea__inner){
            // padding: 0;
            border: none ;
            border-radius: 0px;
            text-align: center;
            font-size: 16px;
          }
          :deep(.el-input__inner){
            border: none ;
            background: rgb(234, 252, 186);
            border-radius: 0px;
            text-align: center;
            font-size: 16px;
             //去除input number样式
            &::-webkit-outer-spin-button,
            &::-webkit-inner-spin-button {
                -webkit-appearance: none;
            }
            &[type="number"]{
                -moz-appearance: textfield;
            }
          }
        }
        
    }
    .textLeft{
          :deep(.el-textarea__inner){
            border: none ;
            border-radius: 0px;
            text-align: left !important;
            font-size: 16px;
          }
        }
    :depp(.el-input.is-disabled){
        color: black !important;

    }

    :deep(.el-select .el-input.is-disabled .el-input__inner){    //项目名称字体颜色
        color: #000;
    }
</style>