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

<template>
    <!-- 创客资金申请表单 -->
  <div>
    <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>

    <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>
                <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>
                
            </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 10" :key="k" style="border: none;"></td>
        </tr>
        
    </table>



    <!-- 经费支出类别开始 -->
    <!-- <div v-for="(item,index) in fundList" :key="index" class="fundType">
        <div style="font-size: 18px;font-weight: bold;margin-bottom: 10px;">{{ item.fundName }}:</div>
        <div style="width: 100%; display: flex;flex-wrap: wrap;justify-content: space-between;">
            <div class="fundInp">
                <div class="inpInterval">预算</div> <el-input type="number" disabled v-model="item.budget" placeholder="金额"></el-input>
            </div>
            <div class="fundInp">
                <div class="inpInterval">已支付</div> <el-input type="number" disabled v-model="item.havePaid" placeholder="金额"></el-input>
            </div>
            <div class="fundInp">
                <div class="inpInterval">本次申请</div> <el-input type="number" v-model="item.thisApply" placeholder="金额"></el-input>
            </div>
            <div class="fundInp">
                <div class="inpInterval">余额</div> <el-input type="number" disabled v-model="textarea" placeholder="金额"></el-input>
            </div>
        </div>
        <div class="fundInp">
            <div class="inpInterval" style="position: relative;top: -10px;">备注</div>
            <el-input
                type="textarea"
                :rows="3"
                resize="none"
                placeholder="请输入内容"
                v-model="item.remark">
            </el-input>
        </div>
    </div> -->
    <!-- 经费支出类别结束-->




    <!-- 附件上传开始 -->
    <div>                            <!-- 附件上传 -->
        <div class="tabTit">
            <div><p>附件上传</p></div>
        </div>
        <hr>
        <el-progress v-show="progress.show" :percentage="progress.value" :format="ProgressFormat"></el-progress>

        <div style="display: flex;flex-wrap: wrap;width: 100%;margin-bottom: 45px;">
                <el-upload
                action="#"
                list-type="picture-card"
                style="position: relative;margin-left: 10px;"
                disabled
                :on-remove="handleRemove">
                <BeUpload @getFile="getFile" :progress="progress" 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="#"
                list-type="picture-card"
                class="delUpload"
                style="position: relative;"
                v-show="file[0]"
                disabled
                v-for="(item,index) in this.file" :key="index"
                >   
                    <img style="position: absolute;left: -1px;top:-1px;width: 149px;height: 101%;border-radius: 5px;" :src="dialogImageUrl" alt="">
                    <div class="maskLayer">
                        <i @click="delUploadBtn(index)" class="maskLayerI el-icon-close"></i>
                    </div>             
                    <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>
                </el-upload>
               
        </div>
    </div>
    <!-- 附件上传结束 -->



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

  </div>
</template>

<script>
    import BeUpload from "../../components/tool/beUpload.vue";
    import getExcel from "@/components/tool/getExcel";
export default {
    components: {
        BeUpload,
      },
    data() {
        return {
            fundList:[
                {fundName:'小型仪器设备费',budget:30,havePaid:10,thisApply:10,remark:'项目开展所需的小型专用仪器设备、工具、配件购置或租赁费用。'},
                {fundName:'材料费',budget:100,havePaid:10,thisApply:'',remark:'项目开展需消耗的各种原材料、辅助材料等低值易耗品的采购费用。'},
                {fundName:'测试化验加工费',budget:100,havePaid:10,thisApply:'',remark:'项目开展过程中支付给外单位的检验、测试、化验、计算、分析及加工费等费用。'},
                {fundName:'项目协作费',budget:100,havePaid:10,thisApply:'',remark:'按合同规定支付给协作单位的费用'},
                {fundName:'项目成功鉴定费',budget:100,havePaid:10,thisApply:'',remark:'学术会务费、评审费、鉴定费、成果集制作费等费用。'},
                {fundName:'参展参赛费',budget:100,havePaid:10,thisApply:'',remark:'参加创客展会、竞赛等所需的报名费、展位费、布展费、宣传推广费及差旅费等费用。'},
                {fundName:'创客交流活动费',budget:100,havePaid:10,thisApply:'',remark:'创客交流活动中支付给校外专家的指导费、咨询费、授课费等费用。'},
                {fundName:'知识产权事务费',budget:100,havePaid:10,thisApply:'',remark:'论文版面费、专利及其他知识产权事务等费用。'},
            ],
            intro:'诶嘿嘿',   //事由

            accept:"*",
            submitHint:false,   //提交按钮
            createFromDialog:false,  //生成表单
            dialogImageUrl:require('../../assets/img/zzpic426.jpg'),
            disabled: false,
            file:[],
            textarea:'',
            selects:{             //所选名称，类型id
                projectName:'',
                projectType:''
            },
            progress:{   //进度条
                value:0,
                show:false
            },  
            projectFilter:[],    //项目名称
            projectType:[     //项目类型
                {
                    id:1,
                    name:'创客活动'
                },
                {
                    id:2,
                    name:'个人创客'
                },
            ],      
        }
    },
    methods:{
        delABC(event){
            return (/[\d]/.test(String.fromCharCode(event.keyCode)))
        },
        AllEquipment(){                             //填写表单数据
           this.directFundBlock.forEach((e,i)=>{
                switch(e.directFundData)
                {
                    case 1:
                        this.directData.facility+=e.budget*1;
                        this.usedDirectData.facility+=e.usedFund*1;
                        this.directDataReason.reason=e.reason;
                        this.applicationDirectData.facility = e.apply*1
                        break;
                    case 2:
                        this.directData.cl+=e.budget*1;
                        this.usedDirectData.cl+=e.usedFund*1;
                        this.directDataReason.reason1=e.reason;
                        this.applicationDirectData.cl = e.apply*1
                        break;
                    case 3:
                        this.directData.jg=e.budget*1;
                        this.usedDirectData.jg+=e.usedFund*1;
                        this.directDataReason.reason2=e.reason;
                        this.applicationDirectData.jg = e.apply*1
                        break;
                    case 4:
                        this.directData.xz=e.budget*1;
                        this.usedDirectData.xz+=e.usedFund*1;
                        this.directDataReason.reason3=e.reason;
                        this.applicationDirectData.xz = e.apply*1
                        break;
                    case 5:
                        this.directData.qt=e.budget*1;
                        this.usedDirectData.qt+=e.usedFund*1;
                        this.directDataReason.reason4=e.reason;
                        this.applicationDirectData.qt = e.apply*1
                        break;
                }
           })
           this.indirectFundBlock.forEach((e,i)=>{
                switch(e.indirectFundData)
                {
                    case 1:
                        this.indirectData.facility+=e.budget*1;
                        this.usedInDirectData.facility+=e.usedFund*1;
                        this.indirectDataReason.reason=e.reason;
                        this.applicationInDirectData.facility = e.apply*1;
                        // console.log(this.directData.facility);
                        break;
                    case 2:
                        this.indirectData.cl+=e.budget*1;
                        this.usedInDirectData.cl+=e.usedFund*1;
                        this.indirectDataReason.reason1=e.reason;
                        this.applicationInDirectData.cl = e.apply*1;
                        // console.log(this.directData.cl);
                        break;
                    case 3:
                        this.indirectData.jg=e.budget*1;
                        this.usedInDirectData.jg+=e.usedFund*1;
                        this.indirectDataReason.reason2=e.reason;
                        this.applicationInDirectData.jg = e.apply*1;
                        break;
                    case 4:
                        this.indirectData.xz=e.budget*1;
                        this.usedInDirectData.xz+=e.usedFund*1;
                        this.indirectDataReason.reason3=e.reason;
                        this.applicationInDirectData.xz = e.apply*1;
                        break;
                    case 5:
                        this.indirectData.qt=e.budget*1;
                        this.usedInDirectData.qt+=e.usedFund*1;
                        this.indirectDataReason.reason4=e.reason;
                        this.applicationInDirectData.qt = e.apply*1;
                        break;
                }
           })
        //    this.DirectFunding.budget = this.
            //直接费用全部预算
            for(let i in this.directData)this.IndirectFunding['budget']+=this.directData[i];
            //直接费用全部已支出
            for(let a in this.usedDirectData)this.IndirectFunding['expended']+=this.usedDirectData[a];
            //直接费用本次申请
            for(let b in this.applicationDirectData)this.IndirectFunding['application']+=this.applicationDirectData[b]
            //直接费用余额
            this.IndirectFunding['surplus'] = this.IndirectFunding['budget']-this.IndirectFunding['expended']-this.IndirectFunding['application']

            //间接费用
            //间接费用全部预算
            for(let c in this.indirectData)this.Expenditure['budget']+=this.indirectData[c];
            //间接费用全部已支出
            for(let d in this.usedInDirectData)this.Expenditure['expended']+=this.usedInDirectData[d];
            //间接费用本次申请
            for(let e in this.applicationInDirectData)this.Expenditure['application']+=this.applicationInDirectData[e];
            //间接费用余额
            this.Expenditure['surplus'] = this.Expenditure['budget']-this.Expenditure['expended']-this.Expenditure['application']

            //经费支出
            //预算
            this.AllFund.budget =this.Expenditure['budget']+this.IndirectFunding['budget'];
            //已支出
            this.AllFund.expended = this.Expenditure['expended']+this.IndirectFunding['expended'];
            //本次申请
            this.AllFund.application = this.Expenditure['application']+this.IndirectFunding['application']
            //余额
            this.AllFund.surplus = this.AllFund['budget']-this.AllFund['expended']-this.AllFund['application'];

            //项目名称
            this.residue.PName = this.projectFilter.filter(item=>item.id==this.selects.projectName).length!=0?this.projectFilter.filter(item=>item.id==this.selects.projectName)[0]['title']:'';

        },
        createFrom(){   // 显示表单对话框
            
        },
        submitCreateFrom(){   //生成表单
            
        },
        ProgressFormat(value){        //进度条
          return value ==100?'100%':`${value}%`
        },
       
        delUploadBtn(index){           //删除上传文件
            console.log(index);
            this.file.splice(index,1)
            this.$message.success('删除成功')
        },
        handleRemove(index) {
            console.log(index);
        },
        uploadData(){
            this.submitHint=true;
        },
        submitAll(){           //提交创客资金申请
           
        },
        getFile(val) {       //上传文件
            this.file.push(val)
            this.progress.show = false;
            // 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=>{
                    this.projectFilter=res.data[1]
                    console.log(this.projectFilter);
                },err=>{
                    console.log(err);
                })
        },
      
        init(){
            //重置
            this.submitHint=false;
            this.createFromDialog=false;
        },
        
      
    },
    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: 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;
        }
    }

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