项目立项详情功能

src/config/config.js

@@ -22,7 +22,7 @@ const store = new Vuex.Store({
         // api: 'https://pbl.cocorobo.cn/api/pbl/',
         // socket: "https://poll.cocorobo.cn",
         // socket: "http://localhost:1473",
-        api: 'http://10.3.16.226:7003/api/',
+        api: 'http://10.3.16.226:7003/api',
         // api: 'http://localhost:5005',
 
     },

src/views/projectApply/projectApplicationApply.vue

@@ -68,9 +68,10 @@
                                 placeholder="选择日期">
                               </el-date-picker>
                           </div>
-                          <div class="inpBlock">
+                          <div class="inpBlock" style="position: relative;">
                               <div class="label">预算总经费</div>
                               <el-input v-model="data.select.fund" placeholder="请输入内容"></el-input>
+                              <div style="position: absolute;right: -30px;top: 10px;">(万)</div>
                           </div>
                           <div class="inpBlock">
                               <div class="label">选择分类</div>

src/views/projectApply/projectApplicationApply3.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 项目立项申请预算经费表单 -->
-    <div class="pAmid3">
+    <div class="proBudgetFund">
       <!-- 左边栏 -->
       <div class="left">
         <div class="sx"> <!--圆球和竖线 -->
@@ -26,7 +26,7 @@
           <hr>
           <div class="totalFund">
             <div class="totalFundLabel">预算总经费</div>
-            <el-input v-model="data.fund" style="width: 180px;" placeholder="请输入内容"></el-input>
+            <el-input v-model="data2.fund" disabled style="width: 180px;" placeholder="请输入内容"></el-input>
             <div style="line-height: 38px;margin-left: 5px;">(万)</div>
           </div>
           <!-- 预算经费金额结束 -->
@@ -34,7 +34,7 @@
           <!-- 设置经费和表格开始 -->
             <div class="tabTit">
               <div><p>经费月支出计划</p></div>
-              <el-button type="primary">设置经费</el-button>
+              <el-button @click="setFundBtn" type="primary">设置经费</el-button>
             </div>
             <el-table
               :data="data.tableData"
@@ -43,80 +43,10 @@
               :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
               >             
               <el-table-column
-                prop="projectName"
-                label="1月"
-                align="center"
-                >
-              </el-table-column>
-              <el-table-column
-                prop="projectName"
-                label="2月"
-                align="center"
-                >
-              </el-table-column>
-              <el-table-column
-                prop="projectName"
-                label="3月"
-                align="center"
-                >
-              </el-table-column>
-              <el-table-column
-                prop="projectName"
-                label="4月"
-                align="center"
-                >
-              </el-table-column>
-              <el-table-column
-                prop="projectName"
-                label="5月"
-                align="center"
-                >
-              </el-table-column>
-              <el-table-column
-                prop="projectName"
-                label="6月"
-                align="center"
-                >
-              </el-table-column>
-              <el-table-column
-                prop="projectName"
-                label="7月"
-                align="center"
-                >
-              </el-table-column>
-              <el-table-column
-                prop="projectName"
-                label="8月"
-                align="center"
-                >
-              </el-table-column>
-              <el-table-column
-                prop="projectName"
-                label="9月"
-                align="center"
-                >
-              </el-table-column>
-              <el-table-column
-                prop="projectName"
-                label="10月"
-                align="center"
-                >
-              </el-table-column>
-              <el-table-column
-                prop="projectName"
-                label="11月"
-                align="center"
-                >
-              </el-table-column>
-              <el-table-column
-                prop="projectName"
-                label="12月"
-                align="center"
-                >
-              </el-table-column>
-              <el-table-column
-                prop="remark"
-                label="备注"
+                v-for="(item,index) in mouthItems"
+                :key="index"
+                :prop="item.prop"
+                :label="item.label"
                 align="center"
                 >
               </el-table-column>
@@ -182,15 +112,15 @@
       :visible.sync="addFundDialog"
       width="950px"
       class="fundDetail"
-      :before-close="init">
+      :before-close="this.init">
 
       <div class="dialogTop">
           <div class="dagSpan">项目名称</div>
-          <el-input v-model="data2.projectName" placeholder="请输入内容"></el-input>
+          <el-input v-model="data2.projectName" disabled placeholder="请输入内容"></el-input>
       </div>
       <div class="dialogTop">
           <div class="dagSpan">项目类型</div>
-          <el-input v-model="data2.sort" style="width: 30%;" placeholder="请输入内容"></el-input>
+          <el-input v-model="data2.sort" disabled style="width: 30%;" placeholder="请输入内容"></el-input>
       </div>
 
 
@@ -200,7 +130,7 @@
       <div class="dagInpS">
         <div class="dagInpS1">
           <div class="dagSpan">支出类别</div>
-          <el-input v-model="data.dialog.type" placeholder="请输入内容"></el-input>
+          <el-input v-model="data.dialog.type"  placeholder="请输入内容"></el-input>
         </div>
         <div class="dagInpS1">
           <div class="dagSpan">支出项目</div>
@@ -213,7 +143,7 @@
       </div>
 
       <div class="dagInpS1">
-          <div class="dagSpan" style="position:relative;top: -90px;">备注</div>
+          <div class="dagSpan" style="position:relative;top: -100px;">备注</div>
           <el-input
             type="textarea"
             :rows="5"
@@ -229,6 +159,100 @@
       </div>
     </el-dialog>
     <!-- 经费明细添加按钮结束 -->
+
+      <!--设置经费dialog对话框开始 -->
+      <el-dialog
+          title="设置经费"
+          :visible.sync="setFund"
+          :modal="true"
+          :close-on-click-modal="true"
+          class="AddFund"
+          :before-close="this.init">
+     
+            <div class="littleBlock">
+              <div class="dialogLabel">一月</div>
+              <div>
+                <el-input type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model="data.items.one"></el-input>
+              </div>
+            </div>
+            <div class="littleBlock">
+              <div class="dialogLabel">二月</div>
+              <div>
+                <el-input type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model="data.items.two"></el-input>
+              </div>
+            </div>
+            <div class="littleBlock">
+              <div class="dialogLabel">三月</div>
+              <div>
+                <el-input type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model="data.items.three"></el-input>
+              </div>
+            </div>
+            <div class="littleBlock">
+              <div class="dialogLabel">四月</div>
+              <div>
+                <el-input type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model="data.items.four"></el-input>
+              </div>
+            </div>
+            <div class="littleBlock">
+              <div class="dialogLabel">五月</div>
+              <div>
+                <el-input type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model="data.items.five"></el-input>
+              </div>
+            </div>
+            <div class="littleBlock">
+              <div class="dialogLabel">六月</div>
+              <div>
+                <el-input type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model="data.items.six"></el-input>
+              </div>
+            </div>
+            <div class="littleBlock">
+              <div class="dialogLabel">七月</div>
+              <div>
+                <el-input type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model="data.items.seven"></el-input>
+              </div>
+            </div>
+            <div class="littleBlock">
+              <div class="dialogLabel">八月</div>
+              <div>
+                <el-input type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model="data.items.eight"></el-input>
+              </div>
+            </div>
+            <div class="littleBlock">
+              <div class="dialogLabel">九月</div>
+              <div>
+                <el-input type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model="data.items.nine"></el-input>
+              </div>
+            </div>
+            <div class="littleBlock">
+              <div class="dialogLabel">十月</div>
+              <div>
+                <el-input type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model="data.items.ten"></el-input>
+              </div>
+            </div>
+            <div class="littleBlock">
+              <div class="dialogLabel">十一月</div>
+              <div>
+                <el-input type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model="data.items.eleven"></el-input>
+              </div>
+            </div>
+            <div class="littleBlock">
+              <div class="dialogLabel">十二月</div>
+              <div>
+                <el-input type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model="data.items.twelve"></el-input>
+              </div>
+            </div>
+            <div class="littleBlock">
+              <div class="dialogLabel">备注</div>
+              <div>
+                <el-input v-model="data.items.remark"></el-input>
+              </div>
+            </div>
+            <div slot="footer" class="footer">
+              <el-button type="primary" @click="commit" class="diaBtn" >确认提交</el-button>
+              <el-button @click="setFund=false" class="diaBtn">取消</el-button>
+            </div>
+      </el-dialog>
+      <!--设置经费dialog对话框结束 -->
   </div>
     
 </template>
@@ -237,25 +261,42 @@
 import { VueEditor } from "vue2-editor";
     export default {
       // 接收父组件传递回来的方法
-      props:["data","next",'back','submitBtn','addFundDetail','data2'],
+      props:["data","next",'back','submitBtn','addFundDetail','data2','confirmSetFund'],
       components:{
         VueEditor
       },
       data() {
         return {
           addFundDialog:false,
+          setFund:false,
+          mouthItems:[      //表格基础
+            {prop:'one',label:'一月'},
+            {prop:'two',label:'二月'},
+            {prop:'three',label:'三月'},
+            {prop:'four',label:'四月'},
+            {prop:'five',label:'五月'},
+            {prop:'six',label:'六月'},
+            {prop:'seven',label:'七月'},
+            {prop:'eight',label:'八月'},
+            {prop:'nine',label:'九月'},
+            {prop:'ten',label:'十月'},
+            {prop:'eleven',label:'十一月'},
+            {prop:'twelve',label:'十二月'},
+            {prop:'remark',label:'备注'},
+          ],
+          
           // 经费明细添加按钮对话框下拉框
         }
       },
       methods:{
         
         init(){
-          //重置
-          this.addFundDialog=false;
+          this.addFundDialog=false
+          this.setFund=false;
         },
         finish(){    //添加经费明细对话框完成按钮
             this.addFundDetail()
-            this.init()
+            this.init();
         },
         backBtn1(){    //上一步
           this.back();
@@ -265,6 +306,13 @@ import { VueEditor } from "vue2-editor";
         },
         addBtn(){    //经费明细添加按钮
           this.addFundDialog=true;
+        },
+        setFundBtn(){    //设置经费按钮
+            this.setFund=true
+        },
+        commit(){  //设置经费对话框按钮
+          this.confirmSetFund()
+          this.init()
         }
       }
     }
@@ -273,74 +321,140 @@ import { VueEditor } from "vue2-editor";
 <style lang="less">
 //对话框样式
 
-.fundDetail{ //经费明细添加对话框，防止冲突
-  .el-dialog__title{    
-    font-size: 22px;
-    font-weight: 600;
+
+  .el-input__inner{
+    color: #000;
+    font-size: 16px;
   }
-  .el-dialog__body{
-    padding-top: 0px;
+  .el-textarea__inner{
+    color: #000;
+    font-size: 16px;
   }
-}
-
-
-
-.dialogTop{   //对话框，名称、类型
-    margin: 15px 0;
-    display: flex;
-    width: 80%;
-}
-.dagSpan{     // 对话框label
-  min-width: 84px;
-  font-size: 16px;
-  margin-right: 10px;
-  display: inline-block;
-  text-align: justify;
-  text-justify:distribute-all-lines;
-  text-align-last: justify;
-  transform: translate(0,22%);
-  margin-bottom: 10px;
-}
-
-
-
-
-  .totalFund{   //预算总经费金额填写
-    display: flex;
-    width: 400px;
-    line-height: 25px;
-    margin: 15px 5px 30px;
-    .totalFundLabel{
-      width:90px;
-      line-height: 38px;
-      margin-right: 10px;
-      text-justify:distribute-all-lines;
-      text-align-last: justify;
-    }
+  .el-input.is-disabled .el-input__inner{
+    color: #3a3838;
   }
-
-  //经费明细dialog的样式
-  .dagInpS{
-      display: flex;
-      width: 90%;
-      margin-top: 20px;
-    .dagInpS1{
-      font-size: 16px;
-      display: flex;
-      margin-right: 25px;
-      margin-bottom: 20px;
-    }
+  .totalFundLabel{
+    width:90px;
+    line-height: 38px;
+    margin-right: 10px;
+    text-justify:distribute-all-lines;
+    text-align-last: justify;
   }
-  .pAmid3{
+  .proBudgetFund{
     margin-top: 30px;
     width: 100%;
     display: flex;
     justify-content: center;
     box-sizing: border-box;
+    .totalFund{   //预算总经费金额填写
+      display: flex;
+      width: 400px;
+      line-height: 25px;
+      margin: 15px 5px 30px;
+    }
+    .fundDetail{ //经费明细添加对话框，防止冲突
+        .el-dialog__title{    
+          font-size: 22px;
+          font-weight: 600;
+        }
+        .el-dialog__body{
+          padding-top: 0px;
+        }
+        .dialogTop{   //对话框，名称、类型
+            margin: 15px 0;
+            display: flex;
+            width: 80%;
+        }
+        .dagSpan{     // 对话框label
+          min-width: 84px;
+          font-size: 16px;
+          margin-right: 10px;
+          display: inline-block;
+          text-align: justify;
+          text-justify:distribute-all-lines;
+          text-align-last: justify;
+          transform: translate(0,22%);
+          margin-bottom: 10px;
+        }
+          //经费明细dialog的样式
+        .dagInpS{
+            display: flex;
+            width: 90%;
+            margin-top: 20px;
+          .dagInpS1{
+            font-size: 16px;
+            display: flex;
+            margin-right: 25px;
+            margin-bottom: 20px;
+          }
+        }
+        
+        .btn5{
+          width: 130px;
+          margin-right: 50px;
+        }
+    }
+    .AddFund{    //添加对话框
+      .el-input__inner{
+          width: 90px;
+      }
+      .el-dialog{
+          width: 1100px;
+          border-radius: 5px;
+          overflow: hidden;
+        }
+
+        .el-dialog__body{
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          flex-wrap: wrap;
+        }
+        
+        .el-dialog__header{
+          background: #32455b;
+          text-align: center;
+        }
+        .el-dialog__title{
+          color: #fff;
+          position: relative;
+          top: -5px;
+          font-size: 18px;
+        }
+        .littleBlock{   //添加对话框 label和input框
+            display: flex;
+            margin-top: 20px;
+            margin-right: 15px;
+            width: 15%;
+            .dialogLabel{     //label
+              min-width: 50px;
+              font-size: 16px;
+              margin-right: 10px;
+              display: inline-block;
+              text-align: justify;
+              text-justify:distribute-all-lines;
+              text-align-last: justify;
+              transform: translate(0,22%);
+            }
+            input::-webkit-outer-spin-button,
+            input::-webkit-inner-spin-button {
+              -webkit-appearance: none !important;
+            }
+            input[type='number'] {
+              -moz-appearance: textfield;
+            }
+          }
+        .footer{
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          [type="button"]{
+            font-size: 16px;
+          }
+
+        }
+    }
   }
 
-.btn5{
-  width: 130px;
-  margin-right: 50px;
-}
+
 </style>

src/views/projectApply/projectApplicationApplyMain.vue

@@ -23,7 +23,7 @@
       <div class="Main_area">
         <projectApplicationApply :data="projectApplicationApply1" :next="next" :addPerson="addPerson" :amend="amend" :back="back" v-show="status==0"/>
         <projectApplicationApply2 :data="projectApplicationApply2" :next="next" :back="back" v-show="status==1"/>
-        <projectApplicationApply3 :data="projectApplicationApply3" :data2="projectApplicationApply1.select" :next="next" :addFundDetail="addFundDetail" :back="back" :submitBtn="submitBtn" v-show="status==2"/> 
+        <projectApplicationApply3 :data="projectApplicationApply3" :confirmSetFund="confirmSetFund" :data2="projectApplicationApply1.select" :next="next" :addFundDetail="addFundDetail" :back="back" :submitBtn="submitBtn" v-show="status==2"/> 
       </div>
       <!--下方内容区结束-->
 
@@ -109,13 +109,23 @@
                 contentFive:'',
             },
             projectApplicationApply3:{  //预算经费页面
-                fund:"1000",    //项目总经费
-                
-                tableData:[{      // 经费月支出计划列表数据
-                  projectName:'-',
-                  date:'2022年11月12日',
-                  size:'50k'
-                  },
+                tableData:  // 经费月支出计划列表数据
+                [
+                  {
+                    one:'-',
+                    two:'-',
+                    three:'-',
+                    four:'-',
+                    five:'-',
+                    six:'-',
+                    seven:'-',
+                    eight:'-',
+                    nine:'-',
+                    ten:'-',
+                    eleven:'-',
+                    twelve:'-',
+                    remark:'-'
+                  }
                 ],
                  
                 tableData2:[{  // 经费明细列表数据
@@ -125,7 +135,21 @@
                   remark:'拨款多多益善'
                   },      
                 ],
-                
+                items:{   //经费月支出计划dialog对话框
+                    one:'',
+                    two:'',
+                    three:'',
+                    four:'',
+                    five:'',
+                    six:'',
+                    seven:'',
+                    eight:'',
+                    nine:'',
+                    ten:'',
+                    eleven:'',
+                    twelve:'',
+                    remark:''
+                },
                 dialog:{     //经费明细添加对话框
                   fund:'300000',  //金额
                   type:'填海',  //支出类别
@@ -142,6 +166,15 @@
               let data={Name,Class,tel};
               this.projectApplicationApply1.tableData.push(data);
             },
+            confirmSetFund(){   //预算经费设置经费对话框
+              let data=this.projectApplicationApply3
+              for(let key in data.items){
+                if (data.items[key]=='') {
+                  data.items[key]='-'
+                }
+              }
+              data.tableData.splice(0,1,data.items)
+            },
             amend(val){      //立项基础信息页面修改人员信息
               console.log('111'); 
               let p=this.projectApplicationApply1;