ssti-CollegeManage/src/views/projectApplicationApply3.vue

<template>
    <div class="pAmid3">
      <!-- 左边栏 -->
      <div class="left">
        <div class="sx"> <!--圆球和竖线 -->
          <div class="qiu"></div>
        </div>
      <!-- 左边栏内容开始 -->
        <div class="leftTits">
          <span>月支出计划</span>
          <span>支出明细</span>
          <span>完成</span>
        </div>
      <!-- 左边栏内容结束 -->
      </div>

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

          <!-- 预算经费金额开始 -->
          <div class="projectApplicationApplypAHeader">
            <div class="pAHeader1">预算经费</div>
            <div class="pAHeader3" @click="back()">返回</div>
          </div>
          <hr>
          <div class="totalFund">
            <div class="totalFundLabel">预算总经费</div>
            <el-input v-model="data.fund" style="width: 180px;" placeholder="请输入内容"></el-input>
            <div style="line-height: 38px;margin-left: 5px;">(万)</div>
          </div>
          <!-- 预算经费金额结束 -->

          <!-- 设置经费和表格开始 -->
            <div class="tabTit">
              <div class="spanTit">经费月支出计划</div>
              <el-button type="primary" class="addBtn">设置经费</el-button>
            </div>
            <el-table
              :data="tableData"
              tooltip-effect="dark"
              stripe
              :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="备注"
                align="center"
                >
              </el-table-column>
            </el-table>
          <!-- 设置经费和表格结束 -->



          <!-- 经费明细和表格开始 -->
            <div class="tabTit">
              <div>经费明细</div>
              <el-button type="primary" @click="addBtn" class="addBtn">添加</el-button>
            </div>
            <el-table
              :data="tableData2"
              tooltip-effect="dark"
              stripe
              class="fontSize"
              :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
              >
              <el-table-column
                prop="sort"
                label="支出类别"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="projectName"
                label="支出项目"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="Fund"
                label="金额(元)"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="remark"
                label="备注"
                align="center"
                width="300">
              </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-input v-model="dialog.projectName" placeholder="请输入内容"></el-input>
      </div>
      <div class="dialogTop">
          <div class="dagSpan">项目类型</div>
          <el-select v-model="dialog.value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </div>


      <div class="tabTit">
        <div>添加经费明细</div>
      </div>
      <div class="dagInpS">
        <div class="dagInpS1">
          <div class="dagSpan">支出类别</div>
          <el-input v-model="dialog.sort" placeholder="请输入内容"></el-input>
        </div>
        <div class="dagInpS1">
          <div class="dagSpan">支出项目</div>
          <el-input v-model="dialog.disburseProject" placeholder="请输入内容"></el-input>
        </div>
        <div class="dagInpS1">
          <div class="dagSpan">金额(元)</div>
          <el-input v-model="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: 70%;"
            placeholder="请输入内容"
            v-model="dialog.textarea">
          </el-input>
      </div>

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

<script>
import { VueEditor } from "vue2-editor";
    export default {
      // 接收父组件传递回来的方法
      props:["data","next",'back','submitBtn'],
      components:{
        VueEditor
      },
      data() {
        return {
          addFundDialog:false,
          // 经费明细添加按钮对话框下拉框
          options: [ 
            {
              value: '选项5',
              label: '北京烤鸭'
            }],
          // 经费月支出计划
          tableData:[{
            projectName:'-',
            date:'2022年11月12日',
            size:'50k'
            },
          ],
          // 经费明细
          tableData2:[{
            sort:'人工智能设备购买',
            Fund:'20000.00',
            projectName:'项目协作费用',
            remark:''
            },      
          ],
          dialog:{
            textarea:'',
            fund:'',
            content:'',
            value: '',   //下拉框
            disburseProject:'',
            sort:'',
            projectName:''
          }
        }
      },
      methods:{
        init(){
          //重置
          this.addFundDialog=false;
        },
        backBtn(){
          // alert('333')
          this.next();
        },
        backBtn1(){
          this.back();
        },
        submit(){
          this.submitBtn();
          // this.dialogVisible1=true;
        },
        homeExit(){
          this.$router.push('/login')
        },
        addBtn(){
          this.addFundDialog=true;
        }
      }
    }
</script>

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

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


.pAmid3{
  margin-top: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding-bottom: 20px;

  .right{
    width: 83%;
    background: #fff;
    box-sizing: border-box;
    padding: 10px 20px;
    position: relative;
  }
}

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

  //经费明细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;
}
</style>