ssti-CollegeManage/src/views/projectApply/projectApplicationApply3.vue

<template>
  <!-- 项目立项申请预算经费表单 -->
    <div class="proBudgetFund">
      <!-- 左边栏 -->
      <div class="left">
        <div class="sx"> <!--圆球和竖线 -->
          <div class="qiu"></div>
        </div>
      <!-- 左边栏内容开始 -->
        <div class="leftTits">
          <div>月支出计划</div>
          <div>支出明细</div>
          <div>完成</div>
        </div>
      <!-- 左边栏内容结束 -->
      </div>

      <!-- 右边栏 -->
      <div class="right">

          <!-- 预算经费金额开始 -->
          <div class="vfpHeader">
            <div class="titleOne">预算经费</div>
            <el-button @click="back()" type="primary" size="mini">返回</el-button>
          </div>
          <hr>
          <div class="totalFund">
            <div class="totalFundLabel">预算总经费</div>
            <el-input type="number" class="inputNumber" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model.number="data2.select.fund" style="width: 180px;" placeholder="请输入内容"></el-input>
            <div style="line-height: 38px;margin-left: 5px;">(万)</div>
          </div>
          <!-- 预算经费金额结束 -->

          <!-- 设置经费和表格开始 -->
            <div class="tabTit">
              <div><p>经费月支出计划(元)</p></div>
              <el-button @click="setFundBtn" type="primary">设置经费</el-button>
            </div>
            <div class="monthFund">
            <el-table
              :data="data.tableData"
              tooltip-effect="dark"
              stripe
              show-overflow-tooltip="true"
              :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
              >             
              <el-table-column
                v-for="(item,index) in mouthItems"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                align="center"
                min-width="8%"
                >
              </el-table-column>
            </el-table>
          </div>

          <!-- 设置经费和表格结束 -->



          <!-- 经费明细和表格开始 -->
            <div class="tabTit">
              <div><p>经费明细</p></div>
              <el-button type="primary" @click="addBtn">添加</el-button>
            </div>
            <el-table
              :data="data.tableData2"
              tooltip-effect="dark"
              stripe
              class="fontSize"
              :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
              >
              <el-table-column
                prop="type"
                label="支出类别"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="disburseProject"
                label="支出项目"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="fund"
                label="金额(元)"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="textarea"
                label="备注"
                align="center"
                width="150">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="operation"
                  width="200"
                  label="操作"
                  >
                  <template #default="scope">
                      <div class="operations">
                              <el-button type="primary" @click="amendDialogData(scope.$index)" size="mini">修改</el-button>
                              <el-button type="primary" @click="del(scope.$index)"  size="mini">删除</el-button>
                      </div>
                  </template>
              </el-table-column>
            </el-table>
          <!-- 经费明细和表格结束 -->


          <div class="baseBtn">
            <div class="blockWidth">
              <el-button type="primary" class="backBtn" @click="back()">上一步</el-button>
              <el-button type="primary" class="backBtn"  @click="submit" >提交</el-button>
            </div>
          </div>
      </div>


    <!-- 经费明细添加按钮开始 -->
    <el-dialog
      title="经费明细"
      :visible.sync="addFundDialog"
      width="950px"
      class="fundDetail"
      :before-close="init">

      <div class="dialogTop">
          <div class="dagSpan">项目名称</div>
          <el-select v-model="data2.select.projectName" disabled style="width: 100%;" placeholder="请选择">
            <el-option
              v-for="item in data2.options"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
      </div>
      <div class="dialogTop">
          <div class="dagSpan">项目类型</div>
          <el-select v-model="data2.select.sort"  disabled style="width: 30%;" placeholder="请选择">
            <el-option
              v-for="item in data2.sortOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
      </div>


      <div class="tabTit">
        <div><p>添加经费明细</p></div>
      </div>
      <div class="dagInpS">
        <div class="dagInpS1">
          <div class="dagSpan">支出类别</div>
          <!-- <el-input v-model="data.dialog.type"  placeholder="请输入内容"></el-input> -->
          <el-select v-model="data.dialog.type" placeholder="请选择">
              <el-option
              v-for="item in expendType"
              :key="item.value"
              :label="item.label"
              :value="item.label">
              </el-option>
          </el-select>
        </div>
        <div class="dagInpS1">
          <div class="dagSpan">支出项目</div>
          <!-- <el-input v-model="data.dialog.disburseProject" placeholder="请输入内容"></el-input> -->
          <el-select v-model="data.dialog.disburseProject" placeholder="请选择">
              <el-option
              v-for="item in expendProject"
              :key="item.value"
              :label="item.label"
              :value="item.label">
              </el-option>
          </el-select>
        </div>
        <div class="dagInpS1">
          <div class="dagSpan">金额(元)</div>
          <el-input type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" class="inputNumber" v-model.number="data.dialog.fund" placeholder="请输入内容"></el-input>
        </div>
      </div>

      <div class="dagInpS1">
          <div class="dagSpan" style="position:relative;top: -90px;">备注</div>
          <el-input
            type="textarea"
            :rows="5"
            resize="none"
            style="width: 80%;"
            placeholder="请输入内容"
            v-model="data.dialog.textarea">
          </el-input>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="finish" class="AllDialogBtn">完成</el-button>
      </div>
    </el-dialog>
    <!-- 经费明细添加按钮结束 -->

      <!--设置经费dialog对话框开始 -->
      <el-dialog
          title="设置经费"
          :visible.sync="setFund"
          :modal="true"
          :close-on-click-modal="true"
          class="AddFund"
          :before-close="init">
          <div style="position: absolute;top:10px;font-size: 18px;">经费月支出计划(元)</div>
            <div class="littleBlock">
              <div class="dialogLabel">一月</div>
              <div class="littleBlockInp">
                <el-input type="number"   class="inputNumber" v-model.number="data.items.one"></el-input>
                <span class="yuan">(元)</span>
              </div>
            </div>
            <div class="littleBlock">
              <div class="dialogLabel">二月</div>
              <div class="littleBlockInp">
                <el-input type="number"  v-model="data.items.two"></el-input>
                <span class="yuan">(元)</span>
              </div>
            </div>
            <div class="littleBlock">
              <div class="dialogLabel">三月</div>
              <div class="littleBlockInp">
                <el-input type="number"  v-model="data.items.three"></el-input>
                <span class="yuan">(元)</span>

              </div>
            </div>
            <div class="littleBlock">
              <div class="dialogLabel">四月</div>
              <div class="littleBlockInp">
                <el-input type="number"  v-model="data.items.four"></el-input>
                <span class="yuan">(元)</span>

              </div>
            </div>
            <div class="littleBlock">
              <div class="dialogLabel">五月</div>
              <div class="littleBlockInp">
                <el-input type="number"  v-model="data.items.five"></el-input>
                <span class="yuan">(元)</span>

              </div>
            </div>
            <div class="littleBlock">
              <div class="dialogLabel">六月</div>
              <div class="littleBlockInp">
                <el-input type="number"  v-model="data.items.six"></el-input>
                <span class="yuan">(元)</span>

              </div>
            </div>
            <div class="littleBlock">
              <div class="dialogLabel">七月</div>
              <div class="littleBlockInp">
                <el-input type="number"  v-model="data.items.seven"></el-input>
                <span class="yuan">(元)</span>

              </div>
            </div>
            <div class="littleBlock">
              <div class="dialogLabel">八月</div>
              <div class="littleBlockInp">
                <el-input type="number"  v-model="data.items.eight"></el-input>
                <span class="yuan">(元)</span>

              </div>
            </div>
            <div class="littleBlock">
              <div class="dialogLabel">九月</div>
              <div class="littleBlockInp">
                <el-input type="number"  v-model="data.items.nine"></el-input>
                <span class="yuan">(元)</span>

              </div>
            </div>
            <div class="littleBlock">
              <div class="dialogLabel">十月</div>
              <div class="littleBlockInp">
                <el-input type="number"  v-model="data.items.ten"></el-input>
                <span class="yuan">(元)</span>

              </div>
            </div>
            <div class="littleBlock">
              <div class="dialogLabel">十一月</div>
              <div class="littleBlockInp">
                <el-input type="number"  v-model="data.items.eleven"></el-input>
                <span class="yuan">(元)</span>

              </div>
            </div>
            <div class="littleBlock">
              <div class="dialogLabel">十二月</div>
              <div class="littleBlockInp">
                <el-input type="number"  v-model="data.items.twelve"></el-input>
                <span class="yuan">(元)</span>

              </div>
            </div>
            <div class="littleBlock" style="width: 80%;">
              <div class="dialogLabel" style="position: relative;top: -20px;">备注</div>
              <div style="width: 86%;">
                <!-- <el-input type="textarea" :row="6" resize="none" v-model="data.items.remark" style="width: 100%;"></el-input> -->
                <el-input
                  type="textarea"
                  :rows="3"
                  resize="none"
                  v-model="data.items.remark">
                </el-input>

              </div>
            </div>
            <div slot="footer" class="footer">
              <el-button type="primary" @click="commit" class="AllDialogBtn" >确认提交</el-button>
              <el-button @click="init" class="AllDialogBtn">取消</el-button>
            </div>
      </el-dialog>
      <!--设置经费dialog对话框结束 -->

      <!-- 删除成员对话框开始 -->
      <el-dialog
              title="删除"
              :visible.sync="delFundDetail"
              width="600px"
              class="delMemberDialog">
              <span class="deleteContent">确定删除此经费明细？</span>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="commitDel" class="AllDialogBtn">确认删除</el-button>
                <el-button @click="init" class="AllDialogBtn" >取消</el-button>
              </span>
            </el-dialog>
      <!-- 删除成员对话框结束 -->
  </div>
    
</template>

<script>
import { VueEditor } from "vue2-editor";
    export default {
      // 接收父组件传递回来的方法
      props:["data","next",'back','submitBtn','data2','confirmSetFund'],
      components:{
        VueEditor
      },
      data() {
        return {
          iid:'',
          delFundDetail:false,   //删除经费明细对话框
          addFundDialog:false,       //经费明细对话框
          setFund:false,         //设置月支出计划
          recompose:0,             //判断是否是修改  0 修改  1 添加
          projectFundDetailInput:{
                fund:'',
                type:'',
                disburseProject:'',
                textarea:''
          },
          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:'备注'},
          ],
          
          // 经费明细添加按钮对话框下拉框
          expendType:[
              {
                  value:1,
                  label:'个人创客'
              },
              {
                  value:2,
                  label:'活动创客'
              },
          ],
          expendProject:[
              {
                  value:1,
                  label:'小型仪器设备费'
              },
              {
                  value:2,
                  label:'材料费'
              },
              {
                  value:3,
                  label:'测试化验加工费'
              },
              {
                  value:4,
                  label:'项目协作费'
              },
              {
                  value:5,
                  label:'其他支出'
              },
          ]
        }
      },
      methods:{
        judge(event){
          console.log(event);
          // console.log(111);
          // return (/[\d]/.test(String.fromCharCode(event.keyCode)));
        },
        init(){
          this.addFundDialog=false
          this.setFund=false;
          this.delFundDetail=false;
        },
        
        backBtn1(){    //上一步
          this.back();
        },
        submit(){    //提交按钮
          this.submitBtn();
        },
        addBtn(){    //经费明细添加对话框显示
          this.addFundDialog=true;
        },
        amendDialogData(val){   //修改经费明细数据对话框显示
          this.recompose=1   
          Object.assign(this.data.dialog,this.data.tableData2[val])
          this.data.dialog['index']=val
          this.addFundDialog=true;      
          // this.data.dialog=val
          // this.iid=val
        },
        finish(){    //添加经费明细对话框完成按钮
            if(this.recompose){                //修改

              if (this.data.dialog.type=="" || this.data2.select.fund==undefined ) return this.$message.error('请输入支类别')
              if (this.data.dialog.disburseProject=="" || this.data2.select.fund==undefined ) return this.$message.error('请输入支出项目')
              if (this.data.dialog.fund=="" || this.data2.select.fund==undefined ) return this.$message.error('请输入金额')
              let oldMoney = this.data.tableData2.reduce((prev,cur)=>{   //默认第一次为0，
                console.log(prev,cur["fund"]);
                return prev+cur["fund"]
              },0);  //默认值第一次运算为0
              // console.log(oldMoney);     第一次0  
              oldMoney+=this.data.dialog.fund;   //因为本次的数据还未添加到列表中，所以直接在这里进行相加判断
              if(oldMoney>(this.data2.select.fund)*10000) return this.$message.error('经费明细超出预算总金额');
              Object.assign(this.data.tableData2[this.data.dialog['index']],this.data.dialog)
              for(let k in this.data.dialog) this.data.dialog[k]=''
              return this.addFundDialog=false;
            }
            let oldDia={}   //添加数据防止污染
            // 添加
            if(this.data2.select.fund == '' || this.data2.select.fund==undefined )return this.$message.error('请输入项目预算总经费')
            if (this.data.dialog.type=="" || this.data2.select.fund==undefined ) return this.$message.error('请输入支类别')
            if (this.data.dialog.disburseProject=="" || this.data2.select.fund==undefined ) return this.$message.error('请输入支出项目')
            if (this.data.dialog.fund=="" || this.data2.select.fund==undefined ) return this.$message.error('请输入金额')


            let oldMoney = this.data.tableData2.reduce((prev,cur)=>{   //默认第一次为0，
              // console.log(prev,cur["fund"]);
              return prev+cur["fund"]
            },0);  //默认值第一次运算为0
            // console.log(oldMoney);

            oldMoney+=this.data.dialog.fund;   //因为本次的数据还未添加到列表中，所以直接在这里进行相加判断

            if(oldMoney>(this.data2.select.fund)*10000)return this.$message.error('经费明细超出预算总金额');
           
            Object.assign(oldDia,this.data.dialog)
            this.data.tableData2.push(oldDia);
            for(let k in this.data.dialog) this.data.dialog[k]='';
            this.addFundDialog=false;
        },
        setFundBtn(){    //经费月支出计划设置经费对话框显示
          // console.log(this.data2.value);
            this.setFund=true
        },
        commit(){  //经费月支出计划设置经费对话框确定按钮
          let p=0
          for(let key in this.data.items){
              if ( this.data.items[key] !== '' && this.data.items[key]!='-') {
                  if (key != 'remark') {
                    // console.log(this.data.items[key])
                    p+=Number(this.data.items[key])
                  }
                }
          }
          // console.log(p)
          // console.log(this.data2.select.fund);
          if(p > this.data2.select.fund*10000) return this.$message.error('金额大于总预算')
          this.confirmSetFund()
          this.init()
        },
       
        del(val){                     //删除经费明细对话框显示
          this.delFundDetail=true;
          this.iid=val
        },
        commitDel(){      //确定删除
          this.data.tableData2.splice(this.iid,1)
          this.delFundDetail=false;

          // this.data.tableData2.forEach((e,i,arr)=>{
          //       if (e.id == this.iid.id) {
          //           arr.splice(i,1)
          //           this.delFundDetail=false;
          //       }
          //   })
        }
      }
    }
</script>

<style lang="less">
//对话框样式

  // .el-input__inner{
  //   color: #000;
  //   font-size: 16px;
  // }
  // .el-textarea__inner{
  //   color: #000;
  //   font-size: 16px;
  // }
  // .el-input.is-disabled .el-input__inner{
  //   color: #3a3838;
  // }
  .totalFundLabel{
    width:90px;
    line-height: 38px;
    margin-right: 10px;
    text-justify:distribute-all-lines;
    text-align-last: justify;
  }
  .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: 18px;
          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: 100%;
      }
      .el-dialog{
          width: 700px;
          border-radius: 5px;
          overflow: hidden;
        }

        .el-dialog__body{
          display: flex;
          align-items: center;
          position: relative;
          justify-content: space-between;
          flex-wrap: wrap;
          align-items: center;
          margin-top: 30px;
          box-sizing: border-box;
          padding-right: 10%;
          padding-left: 10%;
        }
        
        .el-dialog__header{
          background: #32455b;
          text-align: center;
        }
        .el-dialog__title{
          color: #fff;
          position: relative;
          top: -2px;
          font-size: 18px;
        }
        .littleBlock{   //添加对话框 label和input框
            display: flex;
            margin-top: 20px;
            box-sizing: border-box;
            padding: 0 5%;
            flex-shrink: 0;
            width: 40%;
            display: flex;
            justify-content: flex-end;
            .littleBlockInp{
              position: relative;
              box-sizing: border-box;
              padding-right: 30px;
              .yuan{
                position: absolute;
                top: 7px;
                right: 0px;
                font-size: 16px;
              }
            }
            .dialogLabel{     //label
              min-width: 55px;
              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;
            }
          .el-input__inner{
              line-height: 1px!important;
            }
          }
        .footer{
          width: 100%;
          display: flex;
          justify-content: center;
          [type="button"]{
            font-size: 16px;
          }

        }
    }
  }


  .delMemberDialog{    //删除经费明细对话框样式
            font-size: 18px;
            .el-dialog{
              border-radius: 5px;
              overflow: hidden;
            }
            .deleteContent{
              margin: 30px 0;
              font-size: 22px;
              color: #000;
            }
            .el-dialog__header{
              background: #32455b;
              display: flex;
              justify-content: center;
            }
            .el-dialog__title{
              color:#fff;
              display: flex;
              justify-content: center;
              font-size: 18px;
              position: relative;
              top: -2px;
            }
            .el-dialog__body{
              display: flex;
              justify-content: center;
            }
            .el-dialog__body{
              padding: 0;
            }
            .dialog-footer{
              display: flex;
              justify-content: center;
              box-sizing: border-box;
            }
          }
.monthFund{
  .el-table .cell{
        // 不换行
        white-space:nowrap !important;
    }
  }
</style>