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

<template>
    <!-- 创客资金申请表单 -->
  <div class="makerfundApply">
    <div class="vfpHeader">
        <div class="titleOne">创客资金申请</div>
        <el-button type="primary" @click="$router.back()">返回</el-button>
    </div>
    <hr>


    <!-- 项目名称、类型开始 -->
    <div class="Apply1">
        <div class="inpInterval">项目名称</div>
        <el-select v-model="selects.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="Apply1">
        <div class="inpInterval">项目类型</div>
        <el-select v-model="selects.projectType" placeholder="请选择">
            <el-option
            v-for="item in projectType"
            :key="item.id"
            :label="item.name"
            :value="item.name">
            </el-option>
        </el-select>
    </div>
    <!-- 项目名称、类型结束 -->




    <div class="tabTit">
            <div>
                <p>经费支出类别(单位:元)</p>
            </div>
    </div>
    <hr>
    <div class="moneyBlock" v-for="(item,index) in directFundBlock" :key="index">          <!-- 直接经费 -->
        <div class="howMoneyFlex">
            <div class="howMoney">
                <div class="inpInterval">直接经费</div>
                <el-select v-model="item.directFundData" placeholder="请选择">
                    <el-option
                    v-for="item in item.directFundSelects"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="howMoney">
                <div class="inpInterval twoStyle">预算</div>
                <el-input v-model="item.budget" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
            </div>
            <div class="howMoney">
                <div class="inpInterval twoStyle">已支付</div>
                <el-input v-model="item.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
            </div>
            <div class="howMoney">
                <div class="inpInterval twoStyle">余额</div>
                <el-input disabled :value="item.budget - item.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
            </div>
            <el-button v-show="index!=0" type="primary" style="font-size: 16px;" @click="delDerData(index)">删除</el-button>
        </div>
        <div class="howMoney" style="margin-top:20px">
            <div class="inpInterval" style="position: relative;top:-20px">事由</div>
            <el-input
            type="textarea"
            :rows="3"
            class="textArea"
            resize="none"
            style="width:800px"
            placeholder="请输入内容"
            v-model="item.reason">
            </el-input>
        </div>
    </div>
    <div>
        <div class="addMoneyBtn" @click="addDirectFund">
            <div class="jia">+</div>添加
        </div>
    </div>


    <div>                                                                                  <!-- 间接经费 -->
        <div class="moneyBlock" v-for="(item,i) in indirectFundBlock" :key="i">       
            <div class="howMoneyFlex">
                <div class="howMoney">
                    <div class="inpInterval">间接经费</div>
                    <el-select v-model="item.indirectFundData" placeholder="请选择">
                        <el-option
                        v-for="item in item.indirectFundSelects"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="howMoney">
                    <div class="inpInterval twoStyle">预算</div>
                    <el-input v-model="item.budget" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
                </div>
                <div class="howMoney">
                    <div class="inpInterval twoStyle">已支付</div>
                    <el-input v-model="item.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>

                </div>
                <div class="howMoney">
                    <div class="inpInterval twoStyle">余额</div>
                    <el-input disabled :value="item.budget - item.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
                </div>
                <el-button v-show="i!=0" type="primary" style="font-size: 16px;" @click="delInDerData(i)">删除</el-button>
            </div>
            <div class="howMoney" style="margin-top:20px">
                <div class="inpInterval" style="position: relative;top:-20px">事由</div>
                <el-input
                type="textarea"
                :rows="3"
                class="textArea"
                resize="none"
                style="width:800px"
                placeholder="请输入内容"
                v-model="item.reason">
                </el-input>
            </div>
           
        </div>
    </div>
    <div>
        <div class="addMoneyBtn" @click="addIndirectFund">
            <div class="jia">+</div>添加
        </div>
    </div>



    <div class="moneyBlock">          <!-- 其他经费 -->
        <div class="howMoneyFlex">
            <div class="howMoney">
                <div class="inpInterval" >其他</div>
                <el-input v-model="residue.elseReason" placeholder="请输入内容"></el-input>
            </div>
            <div class="howMoney">
                <div class="inpInterval twoStyle">预算</div>
                <el-input v-model="residue.budget" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
            </div>
            <div class="howMoney">
                <div class="inpInterval twoStyle">已支付</div>
                <el-input v-model="residue.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
            </div>
            <div class="howMoney">
                <div class="inpInterval twoStyle">余额</div>
                <el-input disabled :value="residue.budget - residue.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
            </div>
        </div>
        <div class="howMoney" style="margin-top:20px">
            <div class="inpInterval" style="position: relative;top:-20px">备注</div>
            <el-input
            type="textarea"
            :rows="3"
            resize="none"
            class="textArea"
            style="width:800px"
            placeholder="请输入内容"
            v-model="residue.reason">
            </el-input>
        </div>

    </div>


    <div>                            <!-- 附件上传 -->
        <div class="tabTit">
            <div><p>附件上传</p></div>
        </div>
        <hr>
        <div style="display: flex;flex-wrap: wrap;width: 100%;margin-bottom: 45px;">

                <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                style="position: relative;margin-left: 10px;"
                disabled
                :on-remove="handleRemove">
                <BeUpload @getFile="getFile" style="position: absolute;left: 0;width: 147px;height: 100%;opacity: 0;" class="uploadPic" :navName="'上传封面'" :accept="accept"></BeUpload>
                <i class="el-icon-plus"></i>
                </el-upload>

                <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                class="delUpload"
                style="position: relative;"
                v-show="file[0]"
                disabled
                v-for="(item,index) in this.file" :key="index"
                >
                
                <span class="delUploadBtnSty" @click="delUploadBtn(index)">×</span>
                <img style="position: absolute;left: -1px;top:-1px;width: 149px;height: 101%;border-radius: 5px;" :src="dialogImageUrl" alt="">
                <div style="position: absolute;left: -20%;bottom: -30px;width: 200px;height: 30px;color: #000;line-height: 30px;display: flex;justify-content: center;">{{ item.fileName }}</div>
                <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
                </el-upload>
               
        </div>
    </div>



    <div class="baseBtn">
        <div class="blockWidth">
            <el-button type="primary">生成表单</el-button>
            <el-button type="primary" @click="uploadData">提交</el-button>
        </div>
    </div>

        <!-- 提交对话框开始 -->
        <el-dialog
          title="提示"
          :visible.sync="submitHint"
          width="600px"
          class="projectApplicationfundAddDialog"
          :before-close="init">
          <div class="addDialogLogo">LOGO</div>
          <div class="deleteContent">确定提交？</div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitAll" class="AllDialogBtn">确认提交</el-button>
            <el-button @click="init" class="AllDialogBtn" size="small">取消</el-button>
          </span>
        </el-dialog>
      <!-- 提交对话框结束 -->
  </div>
</template>

<script>
    import BeUpload from "../../components/tool/beUpload.vue";

export default {
    components: {
        BeUpload,
      },
    data() {
        return {
            accept:"*",
            submitHint:false,   //提交按钮
            dialogImageUrl:require('../../assets/img/zzpic426.jpg'),
            disabled: false,
            file:[],
            selects:{
                projectName:'',
                projectType:''
            },
            projectFilter:[],    //项目名称
            projectType:[     //项目类型
                {
                    id:1,
                    name:'个人创客'
                },
                {
                    id:2,
                    name:'创客活动'
                }
            ],      
            directFundBlock:[   //直接经费
                {
                    directFundData:'',
                    directFundSelects:[
                        {
                            value:1,
                            label:'小型仪器设备费'
                        },
                        {
                            value:2,
                            label:'材料费'
                        },
                        {
                            value:3,
                            label:'测试化验加工费'
                        },
                        {
                            value:4,
                            label:'项目协作费'
                        },
                        {
                            value:5,
                            label:'其他支出'
                        },
                    ],
                    budget:'',         //预算
                    usedFund:'',       //已使用
                    reason:''          //理由
                }
            ], 
            newDirectFundBlock:{     //添加直接经费
                directFundData:'',
                directFundSelects:[
                        {
                            value:1,
                            label:'小型仪器设备费'
                        },
                        {
                            value:2,
                            label:'材料费'
                        },
                        {
                            value:3,
                            label:'测试化验加工费'
                        },
                        {
                            value:4,
                            label:'项目协作费'
                        },
                        {
                            value:5,
                            label:'其他支出'
                        },
                ],
                budget:'',         //预算
                usedFund:'',       //已使用
                reason:''          //理由
            },



            indirectFundBlock:[    //间接经费
                {
                    indirectFundData:'',
                    indirectFundSelects:[
                        {
                            value:1,
                            label:'项目成功鉴定费'
                        },
                        {
                            value:2,
                            label:'参展参赛费'
                        },
                        {
                            value:3,
                            label:'创客交流活动费'
                        },
                        {
                            value:4,
                            label:'知识产权事务费'
                        },
                        {
                            value:5,
                            label:'其他支出'
                        },
                    ],
                    budget:'',         //预算
                    usedFund:'',       //已使用
                    reason:''          //理由
                }
            ], 
            newIndirectFundBlock:{    //添加间接经费
                indirectFundData:'',
                indirectFundSelects:[
                        {
                            value:1,
                            label:'项目成功鉴定费'
                        },
                        {
                            value:2,
                            label:'参展参赛费'
                        },
                        {
                            value:3,
                            label:'创客交流活动费'
                        },
                        {
                            value:4,
                            label:'知识产权事务费'
                        },
                        {
                            value:5,
                            label:'其他支出'
                        },
                ],
                budget:'',         //预算
                usedFund:'',       //已使用
                reason:''          //理由
            },
            

            residue:{                 //其他
                    elseReason:'',
                    budget:'',
                    usedFund:'',
                    reason:'',
                }
            ,
        }
    },
    methods:{
        delInDerData(index){                       //删除间接经费
            this.indirectFundBlock.splice(index,1)
        },
        delDerData(index){                   //删除直接经费
            console.log(index);
            this.directFundBlock.splice(index,1)
        },
        delUploadBtn(index){           //删除上传文件
            console.log(index);
            this.file.splice(index,1)
            this.$message.success('删除成功')
        },
        handleRemove(index) {
            console.log(index);
        },
        uploadData(){
            this.submitHint=true;
        },
        submitAll(){
            if(this.selects.projectName=='') return this.$message.error('请选择项目名称')
            if(this.selects.projectType=='') return this.$message.error('请选择项目类型')

            let dirSum = this.directFundBlock.reduce((per,cur)=>{
                return per*1+cur.budget*1
            },0)
            let indirSum =this.indirectFundBlock.reduce((per,cur)=>{
                return per*1+cur.budget*1
            },0)
            let allSum=dirSum+indirSum+this.residue.budget*1
            // console.log(allSum);

            let usedDirSum = this.directFundBlock.reduce((per,cur)=>{
                return per*1+cur.usedFund*1
            },0)
            let usedIndirSum =this.indirectFundBlock.reduce((per,cur)=>{
                return per*1+cur.usedFund*1
            },0)
            let usedAllSum=usedDirSum+usedIndirSum+this.residue.usedFund*1
            // console.log(usedAllSum);


            let param={
                uid:this.$store.state.userInfo.userid,
                cid:this.selects.projectName,
                type:this.selects.projectType,
                dir:JSON.stringify(this.directFundBlock),
                indir:JSON.stringify(this.indirectFundBlock),
                elseFund:JSON.stringify(this.residue),
                file:JSON.stringify(this.file),
                AllSum:allSum,
                usedSum:usedAllSum
            }
            this.ajax
                .post(this.$store.state.api+'/insertMakerFund',param)
                .then(res=>{
                    console.log(res);
                    if (res.data==1) {
                       this.$router.push('/makerfund')
                       return this.$message.success('创建成功')
                    }else{
                        this.$message.error('创建失败')
                    }
                },err=>{
                    console.log(err);
                })
        },
        getFile(val) {       //上传封面
            console.log(val);
            this.file.push(val)
            // this.imageUrl=require("../../assets/img/jj.jpg")
        },
        getData(){
            let param={
                uid:this.$store.state.userInfo.userid,
                fid:''
            }
            this.ajax
                .get(this.$store.state.api+'/SelectMakerFundSelects',param)
                .then(res=>{
                    console.log(res.data);
                    this.projectFilter=res.data[1]
                },err=>{
                    console.log(err);
                })
        },
        addDirectFund(){           //添加直接经费
            let oldArr={};
            Object.assign(oldArr,this.newDirectFundBlock)
            this.directFundBlock.push(oldArr)
            for(let k in this.newDirectFundBlock) return this.newDirectFundBlock[k]=''
        },
        addIndirectFund(){         //添加间接经费
            // this.indirectFundBlock.push(this.newIndirectFundBlock)
            let oldArr={};
            Object.assign(oldArr,this.newIndirectFundBlock)
            this.indirectFundBlock.push(oldArr)
            for(let k in this.newIndirectFundBlock) return this.newIndirectFundBlock[k]=''
        },
        init(){
                //重置
                this.submitHint=false;
                
        },
    },
    mounted(){
        this.getData()
    }
}
</script>

<style lang="less">
.makerfundApply{

    .delUpload{
        width: 147px;
        margin-left: 60px;
        margin-bottom: 62px;
    }
    .delUploadBtnSty{
        position: absolute;
        right: 0;top: 0px;
        line-height: 20px;
        display: flex;
        justify-content: center;
        width: 20px;
        height: 20px;
        font-size: 35px;
        z-index: 10;
        color: #fff;
        // background: #fff;
    }

    .avatar-uploader .el-upload {         //文件上传
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

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

   //提交对话框开始
   .projectApplicationfundAddDialog{  
 
    .el-dialog__header{
        display: flex;
        justify-content: center;
    }
    .el-dialog{
        border-radius: 5px;
        overflow: hidden;

        top: 10%;
    }
    
    .deleteContent{
        width: 100%;
        text-align: center;
        font-size: 22px;
        color: #000;
    }
    .addDialogLogo{
        width: 60px;
        height: 30px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        line-height: 30px;
        background: #f2f2f2;
        position: absolute;
        left: 20px; top: 15px; 
    }
    .el-dialog__header{
        background: #32455b;
    }
    .el-dialog__title{
        color:#fff;
        display: flex;
        justify-content: center;
        font-size: 18px;
        position: relative;
        top: -2px;
    }
    .addDialogMid{
        box-sizing: border-box;
        padding:0 60px 0 10px;
    .addDialogTit{
        display: flex;
        span{
        width: 80px;
        line-height: 40px;
        text-align: left;
        }
    }
    .addDialogTit1{
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
    }
    .addDialogTit2{
        margin-top: 10px;
        font-size: 18px;
        color: #000;
        text-indent: 2em;
    }
    .addDialogCon{
        margin-top: 20px;
    }
    }
    .dialog-footer{
        display: flex;
        justify-content: center;
    }
    }
    //提交对话框结束



  .Apply1{         //顶部两个下拉框
    height: 45px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
    .inpName{
        height: 40px;
        outline:none ;
        width: 600px;
        border: #ccc 1px solid;
        border-radius: 5px;
        box-sizing: border-box;
        padding: 1px 15px;
    }
  }



  .moneyBlock{
    max-width: 100%;
    margin-bottom: 20px;
    .howMoneyFlex{
        display: flex;
        flex-wrap: wrap;
    }
    .howMoney{
        display: flex;
        margin-right: 10px;
        .howMoneyInp{
            .el-input__inner{
                width: 170px;
            }
        }
        
    }
  }
    .inpInterval{
        min-width: 70px;
        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;
    }

    .addMoneyBtn{   //添加样式
            margin: 15px 85px 30px;
    }

}

</style>