ssti-CollegeManage/src/views/projectApplicationApplyMain.vue

<template>
    <div class="projectApplicationApplyPAapply core_dialogue">
  
      <!-- 上方导航区开始 -->
      <div class="PAheader">   
          <div class="PAheaderBlock" :style="{opacity: status!=0?0.8:1}" @click="status=0">
            <img src="../assets/vector/first.png" class="vector" alt="">
            立项基础信息
          </div>
          <div class="PAheaderBlock" :style="{opacity: status!=1?0.8:1}" @click="status=1">
            <img src="../assets/vector/second.png" class="vector" alt="">
            项目内容
          </div>
          <div class="PAheaderBlock" :style="{opacity: status!=2?0.8:1}" @click="status=2">
            <img src="../assets/vector/fouth.png" class="vector" alt="">
            预算经费
          </div>
      </div>
      <!-- 上方导航区结束-->

      <!--下方内容区开始-->
      <div class="Main_area">
        <projectApplicationApply :data="projectApplicationApply1" :next="next" :addPerson="addPerson" :back="back" v-show="status==0"/>
        <projectApplicationApply2 :data="projectApplicationApply2" :next="next" :back="back" v-show="status==1"/>
        <projectApplicationApply3 :data="projectApplicationApply3" :next="next" :addFundDetail="addFundDetail" :back="back" :submitBtn="submitBtn" v-show="status==2"/> 
      </div>
      <!--下方内容区结束-->


      





      <!-- 提交对话框开始 -->
        <el-dialog
          title="提示"
          :visible.sync="submitHint"
          width="600px"
          class="projectApplicationfundAddDialog"
          style="top: 120px;"
          :before-close="init">
          <div class="addDialogLogo">LOGO</div>
          <div class="deleteContent">确定提交“×××”项目立项？</div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="init" class="btn5">确认提交</el-button>
            <el-button @click="init" class="btn5" style="background:#cccccc" size="small">取消</el-button>
          </span>
        </el-dialog>
      <!-- 提交对话框结束 -->
  </div>
  </template>
  
  <script>
  // 引入项目详情三个页面
  import projectApplicationApply from './projectApplicationApply.vue';
  import projectApplicationApply2 from './projectApplicationApply2.vue';
  import projectApplicationApply3 from './projectApplicationApply3.vue';
      export default {
        // 进行注册使用
        components:{projectApplicationApply,projectApplicationApply2,projectApplicationApply3},
        data() {
          return {
            status:0,
            submitHint:false,
            projectApplicationApply1:{   //立项基础信息
                select:{
                  projectName:'疯狂星期四',
                  person:'袁一鸣',
                  Data:'2023-3-2',
                  value:"中德学院",
                  fund:'300000',
                  tel:'16625153232',
                  value1:"2023-11-12"
                },
                options: [{
                    value: '选项1',
                    label: '中德学院'
                  },
                  {
                    value: '选项2',
                    label: '中德学院'
                  },
                ],
                textarea:'每周星期四为活动时间',
                Member:{
                    name:'袁一鸣',
                    Class:'21通信',
                    phone:'1234567898'
                },
                tableData:[{
                    Name:'徐晓慧',
                    Class:'22电子通信G5',
                    tel:'13751177411',
                  },
                  {
                    Name:'铠甲',
                    Class:'22电子通信G5',
                    tel:'13751177411',
                  },
                ],
            },
            projectApplicationApply2:{  //项目内容
                contentOne:'疯狂星期四',
                contentTwo:'疯狂星期四',
                contentThree:'疯狂星期四',
                contentFour:'疯狂星期四',
                contentFive:'疯狂星期四',
            },
            projectApplicationApply3:{  //预算经费
                fund:"1000",
                // 经费月支出计划
                tableData:[{
                  projectName:'-',
                  date:'2022年11月12日',
                  size:'50k'
                  },
                ],
                 // 经费明细
                tableData2:[{
                  sort:'人工智能设备购买',
                  Fund:'20000.00',
                  projectName:'项目协作费用',
                  remark:'拨款多多益善'
                  },      
                ],
                //对话框
                dialog:{
                  textarea:'谁请我吃？',
                  fund:'300000',
                  content:'',
                  value: '',   //下拉框
                  disburseProject:'肯德基',
                  sort:'餐饮',
                  type:'第三产业',
                  projectName:'疯狂星期四',
                  nameOptions: [ 
                  {
                    value: '1',
                    label: '疯狂星期四'
                  },
                  {
                    value: '2',
                    label: '鱼稻共生'
                  },
                  {
                    value: '3',
                    label: '锻造钢铁'
                  },
                ],
                  typeOptions: [ 
                  {
                    value: '1',
                    label: '第一产业'
                  },
                  {
                    value: '2',
                    label: '第二产业'
                  },
                  {
                    value: '3',
                    label: '第三产业'
                  },
                ],
                },
            }
          }
        },
        methods:{ 
            addPerson(){  //添加人员
              this.projectApplicationApply1.addMemberDialog=false;
              let { name: Name, Class: Class, phone:tel } = this.projectApplicationApply1.Member;
              let data={Name,Class,tel};
              this.projectApplicationApply1.tableData.push(data);
            },
            addFundDetail(){
              let p=this.projectApplicationApply3;
                let data={
                  Fund:p.dialog.fund,
                  projectName:p.dialog.projectName,
                  sort:p.dialog.type,
                  remark:p.dialog.textarea
                }
              p.tableData2.push(data)
            },
            next(){
                if(this.status>=2)return;
                this.status++;
            },
            back(){
                if(this.status==0)return;
                this.status--;
            },
            submitBtn(){
                console.log("提交啦");
                console.log(this.projectApplicationApply1,this.projectApplicationApply2,this.projectApplicationApply3);
                this.submitHint = true;
            },
            init(){
                //重置
                this.projectApplicationApply1.addMemberDialog=false
                // this.dialogVisible=false;
                this.submitHint=false;
                // this.dialogVisible2=false;
            },

        },
        created(){
        //   this.value=(this.options[0].value)
        }
      }
  </script>
  
  <style lang="less">
  .projectApplicationApplyPAapply{
      width: 100vw;
      background: #e6eaf0;
      display: flex;
      flex-direction: column;
      align-items: center;
    .pAHeader3{   //返回键
        position: absolute;
        right: 0px;
        top: 5px;
        cursor: pointer;
    }


    // 顶部导航区
    .vector{  //矢量图大小
      height: 50%;
      margin-top: 5px;
    }
    .Main_area{  //宽度
      width: 95%;
      margin-bottom: 50px;
    }
    // 顶部导航区


  // 顶部导航区开始
  .PAheader{
    width: 90%;
    height: 110px;
    position: relative;
    top: 15px;
    // border-radius: 10px;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
 
      .PAheaderBlock{
        background: #4a83d0;
        width: 14%;
        height: 60%;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
      }
      .PAheaderBlock:nth-of-type(2){
        margin: 5%;
      }
  }  
  // 顶部导航区结束

   //提交对话框开始
  .projectApplicationfundAddDialog{  
 
    .el-dialog__header{
      border-radius: 10px 10px 0 0;
    }
    .el-dialog{
      border-radius:10px ;
    }
    
    .deleteContent{
      width: 100%;
      text-align: center;
      font-size: 22px;
      color: #000;
    }
    .addDialogLogo{
      width: 60px;
      height: 30px;
      line-height: 30px;
      background: #f2f2f2;
      position: absolute;
      left: 10px;
      top: 10px;
      text-align: center;
    }
    .el-dialog__header{
    background: #32455b;
    }
    .el-dialog__title{
      // text-align: center;
      margin-left:250px;
      font-size: 22px;
      color:rgb(246, 247, 246);
    }
    .addDialogMid{
      box-sizing: border-box;
      padding:0 60px 0 10px;
      .addDialogTit{
        display: flex;
        span{
          width: 80px;
          line-height: 40px;
          text-align: left;
        }
      }
    .addDialogTit1{
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
    }
    .addDialogTit2{
      margin-top: 10px;
      font-size: 18px;
      color: #000;
      text-indent: 2em;
    }
    .addDialogCon{
      margin-top: 20px;
    }
  }
  .dialog-footer{
    display: flex;
    justify-content: center;
    .btn5{
      height: 40px;
      font-size: 16px;
      background: #0e72e6;
      width: 200px;
    }
  }
  }
   //提交对话框结束


  // 左边栏开始
  .left{
      width: 10%;
      height: 700px;
      background: #32455b;
      display: flex;
      justify-content: center;
      margin-right: 2%;
      box-sizing: border-box;
      padding: 0 10px;
      .leftTits{
        display: flex;
        flex-direction: column;
        margin: 30px 0 0 10px;
        span{
          width: 85px;
          color: #fff;
          margin-bottom: 30px;
        }
      }
      .sx{
        margin-top: 30px;
        width: 1px;
        height: 400px;
        background: #84888d;
        .qiu{
          width: 10px;
          height: 10px;
          background: #fff;
          border-radius: 50px;
          margin-left: -4px;
        }
      }
    }
  // 左边栏结束
}


// 项目内容、预算经费一级标题开始
.projectApplicationApplypAHeader{  
      width: 90%;
      display: flex;
      position: relative;
      margin-bottom: 12px;
      .pAHeader1{
        width: 150px;
        font-weight: 600;
        font-size: 22px;
        flex-shrink: 0;
      }
}
// 项目内容、预算经费一级标题结束





  </style>