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" class="howMoneyInp" placeholder="金额"></el-input>
            </div>
            <div class="howMoney">
                <div class="inpInterval twoStyle">已支付</div>
                <el-input v-model="item.usedFund" class="howMoneyInp" placeholder="金额"></el-input>
            </div>
            <div class="howMoney">
                <div class="inpInterval twoStyle">余额</div>
                <el-input v-model="item.remainFund" class="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"
            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" class="howMoneyInp" placeholder="金额"></el-input>
                </div>
                <div class="howMoney">
                    <div class="inpInterval twoStyle">已支付</div>
                    <el-input v-model="item.usedFund" class="howMoneyInp" placeholder="金额"></el-input>

                </div>
                <div class="howMoney">
                    <div class="inpInterval twoStyle">余额</div>
                    <el-input v-model="item.remainFund" class="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"
                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" class="howMoneyInp" placeholder="金额"></el-input>
            </div>
            <div class="howMoney">
                <div class="inpInterval twoStyle">已支付</div>
                <el-input v-model="residue.usedFund" class="howMoneyInp" placeholder="金额"></el-input>
            </div>
            <div class="howMoney">
                <div class="inpInterval twoStyle">余额</div>
                <el-input v-model="residue.remainFund" class="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;justify-content: flex-start;">
            <el-upload
            class="avatar-uploader"
            action="#"
            disabled
            :show-file-list="false"
            v-for="(item,index) in this.file" :key="index"
            >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </div>
        
        <div>
            <div class="addMoneyBtn" style="position: relative;">
                <div class="jia">+</div>添加
                <BeUpload @getFile="getFile" style="position: absolute;left: 0;width: 120px;height: 40px;opacity: 0;" class="uploadPic" :navName="'上传封面'" :accept="accept"></BeUpload>
            </div>
        </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="btn5">确认提交</el-button>
            <el-button @click="init" class="btn5" style="background:#cccccc" 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,   //提交按钮

            imageUrl: require('../../assets/img/cocoClass.png'),
            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:'',       //已使用
                    remainFund:'',
                    reason:''          //理由
                }
            ], 
            newDirectFundBlock:{     //添加直接经费
                directFundData:'',
                directFundSelects:[
                        {
                            value:1,
                            label:'小型仪器设备费'
                        },
                        {
                            value:2,
                            label:'材料费'
                        },
                        {
                            value:3,
                            label:'测试化验加工费'
                        },
                        {
                            value:4,
                            label:'项目协作费'
                        },
                        {
                            value:5,
                            label:'其他支出'
                        },
                ],
                budget:'',         //预算
                usedFund:'',       //已使用
                remainFund:'',
                reason:''          //理由
            },



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

            residue:{                 //其他
                    elseReason:'',
                    budget:'',
                    usedFund:'',
                    remainFund:'',
                    reason:'',
                }
            ,
        }
    },
    computed :{
            // sum(){
            //     // return 1+1
            //     let addsum=[]
            //     this.directFundBlock.forEach((e,i)=>{
            //         // console.log( e.budget-e.usedFund);
            //         addsum.push(e.budget-e.usedFund)
            //     })
            //     return addsum
            // },
        },
    methods:{
        uploadData(){
            this.submitHint=true;
        },
        submitAll(){
            if(this.selects.projectName=='') return this.$message.error('请选择项目名称')
            if(this.selects.projectType=='') return this.$message.error('请选择项目类型')

            let num=0;
            let sum = this.directFundBlock.reduce((per,cur)=>{
                return per+cur[budget]
            })
            console.log(sum);
            // return
            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)
            }
            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/cocoClass.png")
        },
        getData(){
            this.ajax
                .get(this.$store.state.api+'/SelectMakerFundSelects',{uid:this.$store.state.userInfo.userid})
                .then(res=>{
                    console.log(res.data);
                    this.projectFilter=res.data[0]
                },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)
        },
        init(){
                //重置
                // this.projectApplicationApply1.addMemberDialog=false
                this.submitHint=false;
                
        },
    },
    mounted(){
        this.getData()
    }
}
</script>

<style lang="less">
.makerfundApply{
   //提交对话框开始
   .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{
    font-size: 18px;

    color:rgb(246, 247, 246);
    }
    .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;
    .btn5{
    height: 40px;
    font-size: 16px;
    background: #0e72e6;
    width: 200px;
    }
    }
    }
    //提交对话框结束

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    // .avatar-uploader .el-upload:hover {
    //     border-color: #409EFF;
    // }
    .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;
    }
  .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;
    }
  }
  .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;
    }

  .moneyBlock{
    max-width: 100%;
    margin-bottom: 20px;
    .howMoney{
        display: flex;
        margin-right: 10px;
    }
  }
  .howMoneyFlex{
    display: flex;
  }
  .howMoneyInp{
    .el-input__inner{
        width: 170px;
    }
  }
  .addMoneyBtn{   //添加样式
    width: 120px;
    height: 40px;
    border: #000 1px dashed;
    border-radius: 5px;
    margin: 15px 85px 30px;
    display: flex;
    justify-content: center;
    line-height: 40px;
        .jia{
            border-radius: 50%;
            border: 1.5px #ccc solid;
            font-size: 25px;
            line-height: 26px;
            font-weight: 10;
            margin-top: 6px;
            margin-right: 5px;
            height: 27px;
            width: 27px;
            color: #ccc;
        }
    }
  
  .makerfundDetailsaddMoneyBtn{  // 附件添加按钮样式开始
            width: 120px;
            height: 40px;
            border: #000 1px dashed;
            border-radius: 5px;
            margin: 35px auto 30px;
            display: flex;
            justify-content: center;
            line-height: 40px;
            cursor: pointer;
            .jia{
              border-radius: 50%;
              border: 1.5px #ccc solid;
              font-size: 25px;
              line-height: 26px;
              font-weight: 10;
              margin-top: 6px;
              margin-right: 5px;
              height: 27px;
              width: 27px;
              color: #ccc;
            }
      }
}

</style>