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

<template>
    <!-- 创客资金申请表单 -->
  <div>
    <div class="vfpHeader">
        <div class="titleOne">创客活动资金申请</div>
    </div>
    <hr>
    <!-- 项目名称、类型开始 -->
    <div class="Apply1">
        <div class="inpInterval">项目名称</div>
        <el-select 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 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>
                <el-input
                type="number"
                autosize
                style="width: 100%;"
                resize="none"
                onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
                placeholder="本次申请"
                v-model="item.thisApply">
                </el-input>
            </td>
            <td>
                {{ item.budget-item.havePaid-item.thisApply }}
            </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" @click="submitData">提交</el-button>
        </div>
    </div>


    <!-- 下载文档开始 -->
    <el-dialog
      title="生成Excel"
      :visible.sync="downLoadExcelDig"
      width="600px"
      class="pageSubmitData"
    >
      <div class="addDialogLogo">LOGO</div>
      <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"
    >
      <div class="addDialogLogo">LOGO</div>
      <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 {getExcel} from '@/components/tool/downloadExcel'
export default {
    components: {
        BeUpload,
      },
    data() {
        return {
            projectFilter:[],    //项目名称列表            
            projectName:'',      //所选名称
            downLoadExcelDig:false,//下载Excel对话框
            submitDataDig:false,//提交对话框
            allFund:'',//总经费
            fundList:[
                {fundName:'小型仪器设备费',budget:'',havePaid:0,thisApply:'',remark:'项目开展所需的小型专用仪器设备、工具、配件购置或租赁费用。'},
                {fundName:'材料费',budget:'',havePaid:0,thisApply:'',remark:'项目开展需消耗的各种原材料、辅助材料等低值易耗品的采购费用。'},
                {fundName:'测试化验加工费',budget:'',havePaid:0,thisApply:'',remark:'项目开展过程中支付给外单位的检验、测试、化验、计算、分析及加工费等费用。'},
                {fundName:'项目协作费',budget:'',havePaid:0,thisApply:'',remark:'按合同规定支付给协作单位的费用'},
                {fundName:'项目成功鉴定费',budget:'',havePaid:0,thisApply:'',remark:'学术会务费、评审费、鉴定费、成果集制作费等费用。'},
                {fundName:'参展参赛费',budget:'',havePaid:0,thisApply:'',remark:'参加创客展会、竞赛等所需的报名费、展位费、布展费、宣传推广费及差旅费等费用。'},
                {fundName:'创客交流活动费',budget:'',havePaid:0,thisApply:'',remark:'创客交流活动中支付给校外专家的指导费、咨询费、授课费等费用。'},
                {fundName:'知识产权事务费',budget:'',havePaid:0,thisApply:'',remark:'论文版面费、专利及其他知识产权事务等费用。'},
            ],
            intro:'',   //事由
        }
    },
    methods:{
        getData(){         //获取活动经费的项目名称 
            let param={
                uid:this.$store.state.userInfo.userid,
                type:1
            }
            this.ajax
                .get(this.$store.state.api+'/SelectMakerFundSelects',param)
                .then(res=>{
                    let data=res.data[0]
                    // console.log(data);
                    this.projectFilter=data
                   
                },err=>{
                    console.log(err);
                })
        },
         
        getFundData(){
            // console.log(this.projectName);
            //total：总经费     
            //小型仪器设备费：device        deviceRemarks
            //材料费：Material             MaterialRemarks
            //测试化验加工费：processing    processingRemarks
            //项目协作费：Collaboration     CollaborationRemarks
            //项目成果鉴定费：APPRAISAL     APPRAISALRemarks
            //参展参赛费：entery            enteryRemarks
            //创客交流活动费：activities    activitiesRemarks
            //知识产权事务费：Transaction   TransactionRemarks
            let param={
                uid:this.$store.state.userInfo.userid,
                aid:this.projectName,
            }
            this.ajax
            .get(this.$store.state.api+'/selectMarkerFundData',param)
            .then(res=>{
                console.log(res.data);
                let data=JSON.parse(res.data[0][0]['fund']);
                // let usedFund=JSON.parse(res.data[0][0]['usedFund']);
                // console.log(data);
                this.fundList[0].budget=data.device
                this.fundList[1].budget=data.Material
                this.fundList[2].budget=data.processing 
                this.fundList[3].budget=data.Collaboration 
                this.fundList[4].budget=data.APPRAISAL
                this.fundList[5].budget=data.entery 
                this.fundList[6].budget=data.activities 
                this.fundList[7].budget=data.Transaction

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

                // let isUse = arr;
                if (arr) {
                    // console.log(111);
                    arr.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']);
                    })
                }

                this.allFund=res.data[0][0]['money']
            },err=>{
                console.log(err);
            })
        },
        download(){
            if(!this.projectName) return this.$message.error('请选择项目名称')
            this.downLoadExcelDig=true
        },
        downLoadExcel(){   //生成表单
            getExcel(this.fundList,this.intro)
            this.downLoadExcelDig=false
        },
        submitData(){
            if(!this.projectName) return this.$message.error('请选择项目名称')
            let arr=[this.fundList[0].thisApply,this.fundList[1].thisApply,this.fundList[2].thisApply,this.fundList[3].thisApply,this.fundList[4].thisApply,this.fundList[5].thisApply,this.fundList[6].thisApply,this.fundList[7].thisApply]
            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]
            
            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); 
            // return console.log(fund,fund2);
            if (fund+fund2>this.allFund) return this.$message.error('申请金额已大于预算')
            this.submitDataDig=true
        },
        submitAll(){           //提交创客资金申请
           getFundNo("ZJ").then((result)=>{
                let param={
                    uid:this.$store.state.userInfo.userid,
                    aid:this.projectName,
                    fNo:result, //项目编号
                    intro:this.intro,
                    f:JSON.stringify({
                        device:this.fundList[0].thisApply,
                        Material:this.fundList[1].thisApply,
                        processing:this.fundList[2].thisApply,
                        Collaboration:this.fundList[3].thisApply,
                        APPRAISAL:this.fundList[4].thisApply,
                        entery:this.fundList[5].thisApply,
                        activities:this.fundList[6].thisApply,
                        Transaction:this.fundList[7].thisApply,
                    })
                }
                this.ajax
                .post(this.$store.state.api+'/insertFundApply',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);
                })
            })
        },
    },
    watch:{
        projectName:{
            handler(){
                immediate:true
                this.getFundData()
            }
        }
    },
    mounted(){
        this.getData()
    }
}
</script>

<style lang="less" scoped>
    .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;
    }
    .Apply1{         //顶部两个下拉框
        height: 45px;
        width: 50%;
        display: flex;
        justify-content: flex-start;
        margin-top: 20px;
    }

    .fundType{
        width: 80%;
        margin-top: 30px;
        :deep(.el-input__inner){
            width: 200px;
            &::-webkit-outer-spin-button,
            &::-webkit-inner-spin-button {
                -webkit-appearance: none;
            }
            &[type="number"]{
                -moz-appearance: textfield;
            }
        }
        :deep(.el-textarea__inner){
            width: 80%;
        }
        .fundInp{
            display: flex;
            margin-bottom: 10px;
        }
        
    }

    .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 ;
            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;
          }
        }

    .delUpload{    //文件上传
        width: 147px;
        margin-left: 60px;
        margin-bottom: 62px;
        &:hover .maskLayer{
            display: block;
        }
        .maskLayer{
            background: #000;position: absolute;left: 0;top: 0;opacity: .4; width: 100%;height: 100%;border-radius: 5px;
            display: none;
        }
        .maskLayerI:hover{
            color: #fff;
        }
        :deep(.avatar-uploader .el-upload) {         //文件上传
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        :deep(.avatar-uploader-icon) {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        :deep(.avatar) {
            width: 178px;
            height: 178px;
            display: block;
        }
    }

</style>