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" @change="directFundDataSelectChange()" 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 v-model="item.apply" 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 -item.apply" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
            </div>
            <el-button v-show="index!=0" type="primary" style="font-size: 16px;height: 40px;line-height: 0;" @click="delDerData(index)">删除</el-button>
        </div>
        <div class="howMoney" >
            <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" @change="indirectFundSelectChange" 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 v-model="item.apply" 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 -item.apply" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
                </div>
                <el-button v-show="i!=0" type="primary" style="font-size: 16px;height: 40px;line-height: 0;" @click="delInDerData(i)">删除</el-button>
            </div>
            <div class="howMoney">
                <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">
            <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>
        <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="https://jsonplaceholder.typicode.com/posts/"
                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="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" @click="createFrom">生成表单</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>
      <!-- 提交对话框结束 -->
      <!-- 生成表单对话框开始 -->
      <el-dialog
          title="表单"
          :visible.sync="createFromDialog"
          width="60%"
          style="top: -150px;"
          class="createFromDialogSty"
          :before-close="init">
          <div class="addDialogLogo">LOGO</div>
          <div class="deleteContent">
            <table class="tableStyle" width="100%" border="1">
                <caption style="height: 40px;font-size: 22px;">学校创客专项资金使用申请表（单位：元）</caption>
                <caption style="height: 30px;text-align: left;">
                    <div style="display: flex;">
                        <div style="margin-right: 10px;margin-top: -5px;"> 项目类型:</div>
                        <el-radio-group disabled v-model="selects.projectType">
                          <el-radio label="创客空间">创客空间</el-radio>
                          <el-radio label="创客实践室">创客实践室</el-radio>
                          <el-radio label="个人创客">个人创客</el-radio>
                          <el-radio label="创客活动">创客活动</el-radio>
                        </el-radio-group>
                    </div>
                    
                </caption>
                <caption style="height: 30px;text-align: left;">项目名称:<span style="margin-left:30%;font-weight: bold;font-size: 16px;">{{ residue.PName }}</span></caption>
                <tr>
                    <td>序号</td>
                    <td>经济支出类别(A)</td>
                    <td>预算</td>
                    <td>已支付</td>
                    <td>本次申请</td>
                    <td>余额</td>
                    <td style="width: 20%;">事由</td>
                </tr>
                <tr>
                    <td>01</td>
                    <td style="text-align: left;">一.经费支出</td>
                    <td>{{ AllFund.budget }}</td>
                    <td>{{ AllFund.expended }}</td>
                    <td>{{ AllFund.application }}</td>
                    <td>{{ AllFund.surplus }}</td>
                    <td style="width: 20%;"></td>
                </tr>
                <tr>
                    <td>02</td>
                    <td style="text-align: left;">(一)直接费用</td>
                    <td>{{ IndirectFunding.budget }}</td>
                    <td>{{ IndirectFunding.expended }}</td>
                    <td>{{IndirectFunding.application}}</td>
                    <td>{{ IndirectFunding.surplus }}</td>
                    <td style="width: 20%;"></td>
                </tr>
                <tr>
                    <td>03</td>
                    <td style="text-align: left;">小型仪器设备费</td>
                    <td>{{ directData.facility==0?'':directData.facility }}</td>
                    <td>{{ usedDirectData.facility==0?'':usedDirectData.facility }}</td>
                    <td>{{ applicationDirectData.facility==0?'':applicationDirectData.facility }}</td>
                    <td>{{ directData.facility-usedDirectData.facility-applicationDirectData.facility }}</td>
                    <td style="width: 20%;">{{ directDataReason.reason }}</td>
                </tr>
                <tr>
                    <td>04</td>
                    <td style="text-align: left;">材料费</td>
                    <td>{{ directData.cl==0?'':directData.cl }}</td>
                    <td>{{ usedDirectData.cl==0?'':usedDirectData.cl }}</td>
                    <td>{{ applicationDirectData.cl==0?'':applicationDirectData.cl }}</td>
                    <td>{{ directData.cl-usedDirectData.cl-applicationDirectData.cl }}</td>
                    <td style="width: 20%;">{{ directDataReason.reason1 }}</td>
                </tr>
                <tr>
                    <td>05</td>
                    <td style="text-align: left;">测试化验加工费</td>
                    <td>{{ directData.jg==0?'':directData.jg }}</td>
                    <td>{{ usedDirectData.jg==0?'':usedDirectData.jg }}</td>
                    <td>{{ applicationDirectData.jg==0?'':applicationDirectData.jg }}</td>
                    <td>{{ directData.jg-usedDirectData.jg-applicationDirectData.jg }}</td>
                    <td style="width: 20%;">{{ directDataReason.reason2 }}</td>
                </tr>
                <tr>
                    <td>06</td>
                    <td style="text-align: left;">项目协作费</td>
                    <td>{{ directData.xz==0?'':directData.xz }}</td>
                    <td>{{ usedDirectData.xz==0?'':usedDirectData.xz }}</td>
                    <td>{{ applicationDirectData.xz==0?'':applicationDirectData.xz }}</td>
                    <td>{{ directData.xz-usedDirectData.xz-applicationDirectData.xz }}</td>
                    <td style="width: 20%;">{{ directDataReason.reason3 }}</td>
                </tr>
                <tr>
                    <td>07</td>
                    <td style="text-align: left;">其他支出</td>
                    <td>{{ directData.qt==0?'':directData.qt }}</td>
                    <td>{{ usedDirectData.qt==0?'':usedDirectData.qt }}</td>
                    <td>{{ applicationDirectData.qt==0?'':applicationDirectData.qt }}</td>
                    <td>{{ directData.qt- usedDirectData.qt-applicationDirectData.qt}}</td>
                    <td style="width: 20%;">{{ directDataReason.reason4 }}</td>
                </tr>
                <tr>
                    <td>08</td>
                    <td style="text-align: left;">(二)间接费用</td>
                    <td>{{ Expenditure['budget'] }}</td>
                    <td>{{ Expenditure['expended'] }}</td>
                    <td>{{ Expenditure['application'] }}</td>
                    <td>{{ Expenditure['surplus'] }}</td>
                    <td style="width: 20%;"></td>
                </tr>
                <tr>
                    <td>03</td>
                    <td style="text-align: left;">项目成果鉴定费</td>
                    <td>{{ indirectData.facility==0?'':indirectData.facility }}</td>
                    <td>{{ usedInDirectData.facility==0?'':usedInDirectData.facility }}</td>
                    <td>{{ applicationInDirectData.facility==0?'':applicationInDirectData.facility }}</td>
                    <td>{{ indirectData.facility-usedInDirectData.facility-applicationInDirectData.facility }}</td>
                    <td style="width: 20%;">{{ indirectDataReason.reason }}</td>
                </tr>
                <tr>
                    <td>04</td>
                    <td style="text-align: left;">参展参赛费</td>
                    <td>{{ indirectData.cl==0?'':indirectData.cl }}</td>
                    <td>{{ usedInDirectData.cl==0?'':usedInDirectData.cl }}</td>
                    <td>{{ applicationInDirectData.cl==0?'':applicationInDirectData.cl }}</td>
                    <td>{{ indirectData.cl-usedInDirectData.cl-applicationInDirectData.cl }}</td>
                    <td style="width: 20%;">{{ indirectDataReason.reason1 }}</td>
                </tr>
                <tr>
                    <td>05</td>
                    <td style="text-align: left;">创客交流活动费</td>
                    <td>{{ indirectData.jg==0?'':indirectData.jg }}</td>
                    <td>{{ usedInDirectData.jg==0?'':usedInDirectData.jg }}</td>
                    <td>{{ applicationInDirectData.jg==0?'':applicationInDirectData.jg }}</td>
                    <td>{{ indirectData.jg-usedInDirectData.jg-applicationInDirectData.jg }}</td>
                    <td style="width: 20%;">{{ indirectDataReason.reason2 }}</td>
                </tr>
                <tr>
                    <td>06</td>
                    <td style="text-align: left;">知识产权事务费</td>
                    <td>{{ indirectData.xz==0?'':indirectData.xz }}</td>
                    <td>{{ usedInDirectData.xz==0?'':usedInDirectData.xz }}</td>
                    <td>{{ applicationInDirectData.xz==0?'':applicationInDirectData.xz }}</td>
                    <td>{{ indirectData.xz-usedInDirectData.xz-applicationInDirectData.xz }}</td>
                    <td style="width: 20%;">{{ indirectDataReason.reason3 }}</td>
                </tr>
                <tr>
                    <td>07</td>
                    <td style="text-align: left;">其他支出</td>
                    <td>{{ indirectData.qt==0?'':indirectData.qt }}</td>
                    <td>{{ usedInDirectData.qt==0?'':usedInDirectData.qt }}</td>
                    <td>{{ applicationInDirectData.qt==0?'':applicationInDirectData.qt }}</td>
                    <td>{{ indirectData.qt-usedInDirectData.qt-applicationInDirectData.qt }}</td>
                    <td style="width: 20%;">{{ indirectDataReason.reason4 }}</td>
                </tr>
                <!-- <tr v-for="(item,index) in items" :key="index">
                    <td>{{ index+1 }}</td>
                    <td style="text-align: left;">{{ item.fromSort }}</td>
                    <td>{{ item.fromBudget }}</td>
                    <td>{{ item.fromUsed }}</td>
                    <td>{{ item.fromApp }}</td>
                    <td>{{ item.fromBalance }}</td>
                    <td style="width: 20%;">{{ item.fromReason }}</td>
                </tr> -->
                <tr>
                    <td style="height: 80px;">备注</td>
                    <td colspan="6" style="text-align:left;">{{ residue.reason }}</td>
                </tr>
            </table>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitCreateFrom"  class="AllDialogBtn">确认</el-button>
            <el-button @click="createFromDialog = false" class="AllDialogBtn" size="small">取消</el-button>
          </span>
        </el-dialog>
      <!-- 生成表单对话框结束 -->
  </div>
</template>

<script>
    import BeUpload from "../../components/tool/beUpload.vue";
    import getExcel from "@/components/tool/getExcel";
export default {

    components: {
        BeUpload,
      },
    data() {
        return {
            // items:[
            //     {num:'01',fromSort:'一.经费支出',fromBudget:'0',fromUsed:'0',fromApp:'0',fromBalance:'0',fromReason:''},
            //     {num:'02',fromSort:'(一)直接费用',fromBudget:'0',fromUsed:'0',fromApp:'0',fromBalance:'0',fromReason:''},
            //     {num:'03',fromSort:'小型仪器设备费',fromBudget:'',fromUsed:'',fromApp:'',fromBalance:'0',fromReason:''},
            //     {num:'04',fromSort:'材料费',fromBudget:'',fromUsed:'',fromApp:'',fromBalance:'0',fromReason:''},
            //     {num:'05',fromSort:'测试化验加工费',fromBudget:'',fromUsed:'',fromApp:'',fromBalance:'0',fromReason:''},
            //     {num:'06',fromSort:'项目协作费',fromBudget:'',fromUsed:'',fromApp:'',fromBalance:'0',fromReason:''},
            //     {num:'07',fromSort:'其他支出',fromBudget:'',fromUsed:'',fromApp:'',fromBalance:'0',fromReason:''},
            //     {num:'08',fromSort:'(二)间接费用',fromBudget:'0',fromUsed:'0',fromApp:'0',fromBalance:'0',fromReason:''},
            //     {num:'09',fromSort:'项目成果鉴定费',fromBudget:'',fromUsed:'',fromApp:'',fromBalance:'0',fromReason:''},
            //     {num:'10',fromSort:'参展参赛费',fromBudget:'',fromUsed:'',fromApp:'',fromBalance:'0',fromReason:''},
            //     {num:'11',fromSort:'创客交流活动费',fromBudget:'',fromUsed:'',fromApp:'',fromBalance:'0',fromReason:''},
            //     {num:'12',fromSort:'知识产权事务费',fromBudget:'',fromUsed:'',fromApp:'',fromBalance:'0',fromReason:''},
            //     {num:'13',fromSort:'其他支出',fromBudget:'',fromUsed:'',fromApp:'',fromBalance:'0',fromReason:''},
            // ], 
            checkList: [],
            accept:"*",
            submitHint:false,   //提交按钮
            createFromDialog:false,  //生成表单
            dialogImageUrl:require('../../assets/img/zzpic426.jpg'),
            disabled: false,
            file:[],
            selects:{
                projectName:'',
                projectType:''
            },
            progress:{   //进度条
                value:0,
                show:false
            },  
            projectFilter:[],    //项目名称
            projectType:[     //项目类型
                {
                    id:1,
                    name:'创客空间'
                },
                {
                    id:2,
                    name:'创客实践室'
                },
                {
                    id:3,
                    name:'个人创客'
                },
                {
                    id:4,
                    name:'创客活动'
                }
            ],      
            directFundBlock:[   //直接经费
                {
                    directFundData:'',
                    directFundSelects:[
                        {
                            value:1,
                            label:'小型仪器设备费'
                        },
                        {
                            value:2,
                            label:'材料费'
                        },
                        {
                            value:3,
                            label:'测试化验加工费'
                        },
                        {
                            value:4,
                            label:'项目协作费'
                        },
                        {
                            value:5,
                            label:'其他支出'
                        },
                    ],
                    budget:'',         //预算
                    usedFund:'',       //已使用
                    apply:'',          //本次申请
                    reason:''          //理由
                }
            ], 
            newDirectFundBlock:{     //添加直接经费
                directFundData:'',
                directFundSelects:[
                        {
                            value:1,
                            label:'小型仪器设备费'
                        },
                        {
                            value:2,
                            label:'材料费'
                        },
                        {
                            value:3,
                            label:'测试化验加工费'
                        },
                        {
                            value:4,
                            label:'项目协作费'
                        },
                        {
                            value:5,
                            label:'其他支出'
                        },
                ],
                budget:'',         //预算
                usedFund:'',       //已使用
                apply:'',          //本次申请
                reason:''          //理由
            },



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

            residue:{                 //其他
                    PName:"",//项目名称
                    elseReason:'',
                    budget:'',
                    usedFund:'',
                    reason:'',
                }
            ,
            directData:{     //直接经费预算
                facility:0,
                cl:0,
                jg:0,
                xz:0,
                qt:0,
            },
            directDataReason:{
                reason:'',
                reason1:'',
                reason2:'',
                reason3:'',
                reason4:''
            },
            usedDirectData:{     //直接经费已支出
                facility:0,
                cl:0,
                jg:0,
                xz:0,
                qt:0,
            },
            applicationDirectData:{    //直接经费本次申请
                facility:0,
                cl:0,
                jg:0,
                xz:0,
                qt:0,
            },
            indirectData:{     //间接经费预算
                facility:0,
                cl:0,
                jg:0,
                xz:0,
                qt:0,
            },
            indirectDataReason:{
                reason:'',
                reason1:'',
                reason2:'',
                reason3:'',
                reason4:''
            },
            usedInDirectData:{     //间接经费已支出
                facility:0,
                cl:0,
                jg:0,
                xz:0,
                qt:0,
            },
            applicationInDirectData:{   //间接经费本次申请
                facility:0,
                cl:0,
                jg:0,
                xz:0,
                qt:0,
            },
            DirectFunding:{ //直接经费汇总
                budget:0,       //预算
                expended:0,     //已支付
                application:0,  //本次申请
                surplus:0,      //余额
            },
            IndirectFunding:{//间接经费汇总
                budget:0,       //预算
                expended:0,     //已支付
                application:0,  //本次申请
                surplus:0,      //余额
            },
            Expenditure:{//经费支出汇总
                budget:0,       //预算
                expended:0,     //已支付
                application:0,  //本次申请
                surplus:0,      //余额
            },
            AllFund:{ //经费支出
                budget:0,       //预算
                expended:0,     //已支付
                application:0,  //本次申请
                surplus:0,      //余额
            }
        }
    },
    methods:{
        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
                        // console.log(this.directData.facility);
                        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
                        // console.log(this.directData.cl);
                        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(){   // 显示表单对话框
            this.directData={     //直接经费预算
                facility:0,
                cl:0,
                jg:0,
                xz:0,
                qt:0
            },
            this.usedDirectData={     //直接经费已支出
                facility:0,
                cl:0,
                jg:0,
                xz:0,
                qt:0
            },
            this.indirectData={     //间接经费预算
                facility:0,
                cl:0,
                jg:0,
                xz:0,
                qt:0
            },
            this.usedInDirectData={     //间接经费已支出
                facility:0,
                cl:0,
                jg:0,
                xz:0,
                qt:0
            },
            this.directDataReason={
                reason:'',
                reason1:'',
                reason2:'',
                reason3:'',
                reason4:''
            },
            this.IndirectFunding = { //直接经费汇总
                budget:0,       //预算
                expended:0,     //已支付
                application:0,  //本次申请
                surplus:0,      //余额
            },
            this.Expenditure={//经费支出汇总
                budget:0,       //预算
                expended:0,     //已支付
                application:0,  //本次申请
                surplus:0,      //余额
            }
            this.AllFund={ //经费支出
                budget:0,       //预算
                expended:0,     //已支付
                application:0,  //本次申请
                surplus:0,      //余额
            }
            this.applicationInDirectData={   //间接经费本次申请
                facility:0,
                cl:0,
                jg:0,
                xz:0,
                qt:0,
            }
            this.applicationDirectData={    //直接经费本次申请
                facility:0,
                cl:0,
                jg:0,
                xz:0,
                qt:0,
            }
            this.AllEquipment();
            this.createFromDialog=true;
        },
        submitCreateFrom(){   //生成表单
            getExcel({
                PName:this.residue.PName,   //项目名称
                remarks:this.residue.reason,//备注
                direct:{
                    budget:this.directData,
                    expended:this.usedDirectData,
                    apply:this.applicationDirectData,
                    reason:this.directDataReason,
                },
                indirect:{
                    budget:this.indirectData,
                    expended:this.usedInDirectData,
                    apply:this.applicationInDirectData,
                    reason:this.indirectDataReason
                }
            })
            
        },
        ProgressFormat(value){        //进度条
          return value ==100?'100%':`${value}%`
        },
        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) {       //上传封面
            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=>{
                    // console.log(res.data);
                    this.projectFilter=res.data[1]
                },err=>{
                    console.log(err);
                })
        },
        addDirectFund(){           //添加直接经费
            //判断如果已经写满
            if(this.directFundBlock.length==this.newDirectFundBlock.directFundSelects.length)return this.$message.warning("已无法继续添加")
            let oldArr={};
            Object.assign(oldArr,this.newDirectFundBlock)
            oldArr.directFundSelects = oldArr.directFundSelects.filter(item=>this.directFundBlock.filter(dItem=>dItem.directFundData==item.value).length==0)
            this.directFundBlock.push(oldArr)
            for(let k in this.newDirectFundBlock) return this.newDirectFundBlock[k]=''
        },
        addIndirectFund(){         //添加间接经费
            //判断如果已经写满
            if(this.indirectFundBlock.length==this.newIndirectFundBlock.indirectFundSelects.length)return this.$message.warning("已无法继续添加")
            let oldArr={};
            Object.assign(oldArr,this.newIndirectFundBlock)
            oldArr.indirectFundSelects = oldArr.indirectFundSelects.filter(item=>this.indirectFundBlock.filter(dItem=>dItem.indirectFundData==item.value).length==0)
            this.indirectFundBlock.push(oldArr)
            for(let k in this.newIndirectFundBlock) return this.newIndirectFundBlock[k]=''
        },
        init(){
                //重置
                this.submitHint=false;
                this.createFromDialog=false;
        },
        directFundDataSelectChange(){
            //直接经费全部下拉框
            let directFundBlockSelect = [
                    {
                        value:1,
                        label:'小型仪器设备费'
                    },
                    {
                        value:2,
                        label:'材料费'
                    },
                    {
                        value:3,
                        label:'测试化验加工费'
                    },
                    {
                        value:4,
                        label:'项目协作费'
                    },
                    {
                        value:5,
                        label:'其他支出'
                    },
                ]
            let oneself=[];
            this.directFundBlock.forEach(item=>{
                //获取他本身自己的下拉框
                oneself.push(directFundBlockSelect.filter(sItem=>sItem.value==item.directFundData)[0])
                //获取未选择的
                directFundBlockSelect = directFundBlockSelect.filter(sItem=>sItem.value!=item.directFundData)
            })
            //再遍历一遍
            this.directFundBlock.forEach((item,index)=>{
                let oneSelect = [];
                directFundBlockSelect.forEach(item=>oneSelect.push(item));
                if(oneself[index]!=undefined)oneSelect.push(oneself[index])
                item.directFundSelects = oneSelect;
            })
            //遍历所有的直接经费

        },
        indirectFundSelectChange(){
            //间接经费全部下拉框
            let indirectFundSelect = [
                    {
                        value:1,
                        label:'项目成功鉴定费'
                    },
                    {
                        value:2,
                        label:'参展参赛费'
                    },
                    {
                        value:3,
                        label:'创客交流活动费'
                    },
                    {
                        value:4,
                        label:'知识产权事务费'
                    },
                    {
                        value:5,
                        label:'其他支出'
                    },
            ];
            let oneself=[];
            this.indirectFundBlock.forEach(item=>{
                //获取他本身自己的下拉框
                oneself.push(indirectFundSelect.filter(sItem=>sItem.value==item.indirectFundData)[0])
                //获取未选择的
                indirectFundSelect = indirectFundSelect.filter(sItem=>sItem.value!=item.indirectFundData)
            })
            //再遍历一遍
            this.indirectFundBlock.forEach((item,index)=>{
                let oneSelect = [];
                indirectFundSelect.forEach(item=>oneSelect.push(item));
                if(oneself[index]!=undefined)oneSelect.push(oneself[index])
                item.directFundSelects = oneSelect;
            })
            //遍历所有的直接经费

        },
    },
    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;
    }
    }
    //提交对话框结束

    .createFromDialogSty{        //生成表单
        .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;
        margin-bottom: 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;
    }

}
.tableStyle{
     border-collapse:collapse;
     font-size: 16px;
     td{
        // align-content: center;
        height: 35px;
     }
}
</style>