#

src/App.vue

@@ -210,23 +210,7 @@
   .core_dialogue::-webkit-scrollbar-corner {
     background-color: rgba(255, 255, 255, 0);
   }
-//   .core_dialogue::-webkit-scrollbar {
-//  /*滚动条整体样式*/
-//  width: 6px;
-// /*高宽分别对应横竖滚动条的尺寸*/
-// height: 6px;
-// }
-// /*定义滚动条轨道 内阴影+圆角*/
-// .core_dialogue::-webkit-scrollbar {
-//  border-radius: 10px;
-//  background-color: #b8bdc9;
-// }
-// /*定义滑块 内阴影+圆角*/
-// .core_dialogue::-webkit-scrollbar-thumb {
-//   border-radius: 10px;
-//   -webkit-box-shadow: inset 0 0 6px rgb(96, 125, 184);
-//   background-color: #2c5ab3;
-//   }
+
 
   .select{      //活动申请填写信息区域
           width: 100%;

src/components/tool/downloadExcel.js

@@ -0,0 +1,151 @@
+
+import Docxtemplater from 'docxtemplater';
+import  ExcelJS from 'exceljs'
+import FileSaver, { saveAs } from 'file-saver';
+import JSZipUtils from 'jszip-utils'
+import Pizzip from 'pizzip';
+
+function getExcel(val,intro){
+console.log(val,intro);
+    // 下载Excel文件
+    JSZipUtils.getBinaryContent('file/学校创客专项资金使用申请表 (1).xlsx', (err, data) => {
+        if (err) {
+            console.error(err);
+            return;
+        }
+    
+        // 创建一个新的Excel工作簿
+        const workbook = new ExcelJS.Workbook();
+    
+        // 从Excel文件的Buffer中加载工作簿
+        workbook.xlsx.load(data)
+        .then(() => {
+            //获取第一个工作表
+            let worksheet = workbook.getWorksheet(1);
+
+            // 添加一个工作表
+            // const sheet = workbook.addWorksheet('My Sheet');
+
+            // budget   预算
+            // havePaid   已支付
+            // thisApply   这次申请
+            // remark     备注
+
+            worksheet.getCell('C7').value=val[0].budget;
+            worksheet.getCell('D7').value=val[0].havePaid;
+            worksheet.getCell('E7').value=val[0].thisApply;
+            worksheet.getCell('G7').value=val[0].remark;
+
+            worksheet.getCell('C8').value=val[1].budget;
+            worksheet.getCell('D8').value=val[1].havePaid;
+            worksheet.getCell('E8').value=val[1].thisApply;
+            worksheet.getCell('G8').value=val[1].remark;
+
+            worksheet.getCell('C9').value=val[2].budget;
+            worksheet.getCell('D9').value=val[2].havePaid;
+            worksheet.getCell('E9').value=val[2].thisApply;
+            worksheet.getCell('G9').value=val[2].remark;
+
+            worksheet.getCell('C10').value=val[3].budget;
+            worksheet.getCell('D10').value=val[3].havePaid;
+            worksheet.getCell('E10').value=val[3].thisApply;
+            worksheet.getCell('G10').value=val[3].remark;
+
+            worksheet.getCell('C13').value=val[4].budget;
+            worksheet.getCell('D13').value=val[4].havePaid;
+            worksheet.getCell('E13').value=val[4].thisApply;
+            worksheet.getCell('G13').value=val[4].remark;
+
+            worksheet.getCell('C14').value=val[5].budget;
+            worksheet.getCell('D14').value=val[5].havePaid;
+            worksheet.getCell('E14').value=val[5].thisApply;
+            worksheet.getCell('G14').value=val[5].remark;
+
+            worksheet.getCell('C15').value=val[6].budget;
+            worksheet.getCell('D15').value=val[6].havePaid;
+            worksheet.getCell('E15').value=val[6].thisApply;
+            worksheet.getCell('G15').value=val[6].remark;
+
+            worksheet.getCell('C16').value=val[7].budget;
+            worksheet.getCell('D16').value=val[7].havePaid;
+            worksheet.getCell('E16').value=val[7].thisApply;
+            worksheet.getCell('G16').value=val[7].remark;
+
+            // worksheet.getCell('B18').value=val.intro;
+            worksheet.getCell("B18").value=intro;
+            worksheet.getCell('B18').alignment = { vertical: 'top', horizontal: 'left' };
+
+
+    //自动计算的单元格
+    //直接经费
+        //小型仪器设备费余额
+        worksheet.getCell("F7").value = {formula:"C7-D7-E7",result:worksheet.getCell("C7")-worksheet.getCell("D7")-worksheet.getCell("E7")}
+        //材料费余额
+        worksheet.getCell("F8").value = {formula:"C8-D8-E8",result:worksheet.getCell("C8")-worksheet.getCell("D8")-worksheet.getCell("E8")}
+        //测试化验加工费余额
+        worksheet.getCell("F9").value = {formula:"C9-D9-E9",result:worksheet.getCell("C9")-worksheet.getCell("D9")-worksheet.getCell("E9")}
+        //项目协作费余额
+        worksheet.getCell("F10").value = {formula:"C10-D10-E10",result:worksheet.getCell("C10")-worksheet.getCell("D10")-worksheet.getCell("E10")}
+        //其他支出余额
+        worksheet.getCell("F11").value = {formula:"C11-D11-E11",result:worksheet.getCell("C11")-worksheet.getCell("D11")-worksheet.getCell("E11")}
+        //总预算
+        worksheet.getCell("C6").value = {formula:"SUM(C7:C11)",result:worksheet.getCell("C7")*1+worksheet.getCell("C8")*1+worksheet.getCell("C9")*1+worksheet.getCell("C10")*1+worksheet.getCell("C11")*1}
+        //已支付
+        worksheet.getCell("D6").value = {formula:"SUM(D7:D11)",result:worksheet.getCell("D7")*1+worksheet.getCell("D8")*1+worksheet.getCell("D9")*1+worksheet.getCell("D10")*1+worksheet.getCell("D11")*1}
+        //本次申请
+        worksheet.getCell("E6").value = {formula:"SUM(E7:E11)",result:worksheet.getCell("E7")*1+worksheet.getCell("E8")*1+worksheet.getCell("E9")*1+worksheet.getCell("E10")*1+worksheet.getCell("E11")*1}
+        //余额
+        worksheet.getCell("F6").value = {formula:"C6-D6-E6",result:worksheet.getCell("C6")*1-worksheet.getCell("D6")*1-worksheet.getCell("E6")*1}
+    //间接经费
+        //项目成果鉴定费余额
+        worksheet.getCell("F13").value = {formula:"C13-D13-E13",result:worksheet.getCell("C13")-worksheet.getCell("D13")-worksheet.getCell("E13")}
+        //参展参赛费余额
+        worksheet.getCell("F14").value = {formula:"C14-D14-E14",result:worksheet.getCell("C14")-worksheet.getCell("D14")-worksheet.getCell("E14")}
+        //创客交流活动费余额
+        worksheet.getCell("F15").value = {formula:"C15-D15-E15",result:worksheet.getCell("C15")-worksheet.getCell("D15")-worksheet.getCell("E15")}
+        //知识产权事务费余额
+        worksheet.getCell("F16").value = {formula:"C16-D16-E16",result:worksheet.getCell("C16")-worksheet.getCell("D16")-worksheet.getCell("E16")}
+        //其他支出余额
+        worksheet.getCell("F17").value = {formula:"C17-D17-E17",result:worksheet.getCell("C17")-worksheet.getCell("D17")-worksheet.getCell("E17")}
+        //总预算
+        worksheet.getCell("C12").value = {formula:"SUM(C13:C17)",result:worksheet.getCell("C13")*1+worksheet.getCell("C14")*1+worksheet.getCell("C15")*1+worksheet.getCell("C16")*1+worksheet.getCell("C17")*1}
+        //已支付
+        worksheet.getCell("D12").value = {formula:"SUM(D13:D17)",result:worksheet.getCell("D13")*1+worksheet.getCell("D14")*1+worksheet.getCell("D15")*1+worksheet.getCell("D16")*1+worksheet.getCell("D17")*1}
+        //本次申请
+        worksheet.getCell("E12").value = {formula:"SUM(E13:E17)",result:worksheet.getCell("E13")*1+worksheet.getCell("E14")*1+worksheet.getCell("E15")*1+worksheet.getCell("E16")*1+worksheet.getCell("E17")*1}
+        //余额
+        worksheet.getCell("F12").value = {formula:"C12-D12-E12",result:worksheet.getCell("C12")*1-worksheet.getCell("D12")*1-worksheet.getCell("E12")*1}
+    //经费支出
+        //总预算
+        worksheet.getCell("C5").value = {formula:"SUM(C6+C12)",result:worksheet.getCell("C6")*1+worksheet.getCell("C12")*1}
+        //总支出
+        worksheet.getCell("D5").value=  {formula:"SUM(D6+D12)",result:worksheet.getCell("D6")*1+worksheet.getCell("D12")*1}
+        //总申请
+        worksheet.getCell("E5").value = {formula:"SUM(E6+E12)",result:worksheet.getCell("E6")*1+worksheet.getCell("E12")*1}
+        //总余额
+        worksheet.getCell("F5").value = {formula:"SUM(F6+F12)",result:worksheet.getCell("F6")*1+worksheet.getCell("F12")*1}
+
+
+
+
+
+
+
+
+
+
+
+            // 将工作簿保存为Excel文件
+            return workbook.xlsx.writeBuffer();
+        })
+        .then(buffer => {
+            // 将Excel文件保存到本地计算机
+            const excelBlob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+            FileSaver.saveAs(excelBlob, '学校创客专项资金使用申请表.xlsx');
+        });
+    });
+} 
+
+export{
+    getExcel
+}

src/router/index.js

@@ -100,30 +100,37 @@ const routes = [{
                 meta: { isAuth: true }
 
             },
-            { //创客资金
+            { //创客资金主页面
                 name: 'makerfund',
                 path: '/makerfund',
                 component: () =>import ('@/views/fundManage/makerfund.vue'),
                 meta: { isAuth: true }
 
             },
-            { //创客资金
+            { //创客资金申请
                 name: 'makerfundApply',
                 path: '/makerfundApply',
                 component: () =>import ('@/views/fundManage/makerfundApply.vue'),
                 meta: { isAuth: true }
 
             },
-            { //创客资金
+            { //新创客资金申请
+                name: 'newMarkerfundApply',
+                path: '/newMarkerfundApply',
+                component: () =>import ('@/views/fundManage/newMarkerfundApply.vue'),
+                meta: { isAuth: true }
+
+            },
+            { //创客资金详情
                 name: 'makerfundDetails',
                 path: '/makerfundDetails',
                 component: () =>import ('@/views/fundManage/makerfundDetails.vue'),
                 meta: { isAuth: true }
             },
-            { //创客活动详情
-                name: 'markerfundMain',
-                path: '/markerfundMain',
-                component: () =>import ('@/views/fundManage/markerfundMain'),
+            { //创客资金详情
+                name: 'newMarkerfundDetails',
+                path: '/newMarkerfundDetails',
+                component: () =>import ('@/views/fundManage/newMarkerfundDetails.vue'),
                 meta: { isAuth: true }
             },
             { //消息通知

src/views/fundManage/makerfund.vue

@@ -1139,14 +1139,14 @@ import getExcel from "@/components/tool/getExcel";
           this.multipleSelection = val;
         },
         apply(){              //创客资金申请跳转界面
-          this.$router.push('/makerfundApply')
+          this.$router.push('/newMarkerfundApply')
         },
         init(){         
           this.dialogVisible=false
           this.createFromDialog=false
         },
         details(Id){       //跳转详情页面
-          this.$router.push(`/makerfundDetails?Id=${Id}`)
+          this.$router.push(`/newMarkerfundDetails?Id=${Id}`)
         }
       },
       mounted(){

src/views/fundManage/markerfundMain.vue

@@ -1,15 +0,0 @@
-<template>
-    <div>
-
-    </div>
-</template>
-
-<script>
-        export default {
-            
-        }
-</script>
-
-<style>
-
-</style>

src/views/fundManage/newMarkerfundApply.vue

@@ -0,0 +1,548 @@
+<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 colspan="3">备注</td>
+        </tr>
+        <tr v-for="(item,index) in fundList" :key="index">
+            <td colspan="2">{{ item.fundName }}</td>
+            <td>
+                {{item.budget}}
+            </td>
+            <td>
+                {{item.havePaid}}
+            </td>
+            <td>
+                <el-input
+                type="number"
+                autosize
+                style="width: 100%;"
+                resize="none"
+                onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
+                placeholder="本次申请"
+                v-model="item.thisApply">
+                </el-input>
+            </td>
+            <td>
+                {{ item.budget-item.havePaid-item.thisApply }}
+            </td>
+            <td colspan="3" style="box-sizing: border-box;padding: 0 10px;">
+                {{ item.remark }}
+            </td>
+        </tr>
+        <tr>
+            <td>事由</td>
+            <td colspan="10" class="textLeft">
+                <el-input
+                type="textarea"
+                :autosize="{ minRows: 6, maxRows: 20}"
+                style="width: 100%;"
+                resize="none"
+                placeholder=""
+                v-model="intro">
+                </el-input>
+            </td>
+        </tr>
+        <tr>
+            <td v-for="(i,k) in 9" :key="k" style="border: none;"></td>
+        </tr>
+        
+    </table>
+
+
+
+    <!-- 经费支出类别开始 -->
+    <!-- <div 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="submitCreateFrom">生成表单</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";
+    import downloadExcel from '@/components/tool/downloadExcel'
+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']:'';
+
+        },
+
+        submitCreateFrom(){   //生成表单
+            downloadExcel(this.fundList,this.intro)
+        },
+        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>

src/views/fundManage/newMarkerfundDetails.vue

@@ -0,0 +1,552 @@
+<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>