ssti-CollegeManage/src/views/projectApply/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" :amend="amend" :back="back" v-show="status==0"/>
        <projectApplicationApply2 :data="projectApplicationApply2" :next="next" :back="back" v-show="status==1"/>
        <projectApplicationApply3 :data="projectApplicationApply3" :confirmSetFund="confirmSetFund" :data2="projectApplicationApply1.select" :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 { uuid } from 'vue-uuid';
  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:{   //立项基础信息页面
                DialogStatus:1,
                select:{    //基本信息数据框
                  projectName:'', 
                  person:'',
                  Data:'',
                  value:"",
                  fund:'',
                  tel:'',
                  value1:"",
                  sort:''
                },
                options: [],  //部门下拉框
                sortOptions: [], //分类下拉框
                textarea:'',   //项目简介
                Member:{    //添加成员
                    id:'',
                    name:'',
                    class:'',
                    phone:''
                },
                Member2:{    //修改成员
                    id:'',
                    name:'',
                    class:'',
                    phone:''
                },
                tableData:[],  //成员列表
                    
            },
            projectApplicationApply2:{  //项目内容页面
                  contentOne:'',
                  contentTwo:'',
                  contentThree:'',
                  contentFour:'',
                  contentFive:'',
            },
            projectApplicationApply3:{  //预算经费页面
                tableData:  // 经费月支出计划列表数据默认显示数据
                [
                  {
                    one:'-',
                    two:'-',
                    three:'-',
                    four:'-',
                    five:'-',
                    six:'-',
                    seven:'-',
                    eight:'-',
                    nine:'-',
                    ten:'-',
                    eleven:'-',
                    twelve:'-',
                    remark:'-'
                  }
                ],
                items:{   //经费月支出计划dialog对话框要提交的数据
                    one:'',
                    two:'',
                    three:'',
                    four:'',
                    five:'',
                    six:'',
                    seven:'',
                    eight:'',
                    nine:'',
                    ten:'',
                    eleven:'',
                    twelve:'',
                    remark:''
                },
                items2:{}, //复制items，可以确定后清除数据
                tableData2:[],// 经费明细列表数据
               
                dialog:{     //经费明细添加对话框
                  fund:'300000',  //金额
                  type:'填海',  //支出类别
                  disburseProject:'改造世界',  //支出项目
                  textarea:'小同志不利于团结的话可不兴说呀',  //备注
                },
            }
          }
        },
        methods:{ 
          next(){   //顶部导航栏页面下一条跳转
                if(this.status>=2)return;
                this.status++;
            },
            back(){  //顶部导航栏页面上一条
                if(this.status==0)return;
                this.status--;
            },
            addPerson(){  //立项基础信息页面添加人员
              let a=this.projectApplicationApply1

              a.addMemberDialog=false;
              a.Member.id=uuid.v1()
              a.tableData.push(a.Member);
              this.$message.success('添加成功')
              a.Member={}
            },
            getProjectDepartmentData(){  //获取项目立项申请基础信息页面所在部门数据
              let param={
                uid:this.$store.state.userInfo.userid
              }
                this.ajax
                      .get(this.$store.state.api+'/SelectAllDepartment',param)
                      .then(res=>{
                        // console.log(res.data[0]);
                        let p=res.data[0]
                        let a=this.projectApplicationApply1
                        a.options=p
                      },err=>{
                        console.log(err);
                      })
            },
            getProjectTypeData(){  //获取项目立项申请基础信息页面分类数据
              let param={
                uid:this.$store.state.userInfo.userid
              }
                this.ajax
                      .get(this.$store.state.api+'/SelectAllType',param)
                      .then(res=>{
                        // console.log(res.data[0]);
                        let p=res.data[0]
                        let a=this.projectApplicationApply1
                        a.sortOptions=p
                        // console.log(a.sortOptions);

                      },err=>{
                        console.log(err);
                      })
            },
           
            amend(val){      //立项基础信息页面修改人员信息
              let a=this.projectApplicationApply1
               
              //  console.log(a.Member2);
               a.tableData.forEach((e,i)=>{
                    if(e.id==a.Member2.id) {
                      Object.assign(e,a.Member2)
                      this.$message.success('修改成功')
                    }
               })
            },
            //立项基础信息页面删除功能在它自己页面人员信息


            init(){
                //重置
                this.projectApplicationApply1.addMemberDialog=false
                this.submitHint=false;
                
            },
            confirmSetFund(){   //预算经费设置经费对话框提交
              let data=this.projectApplicationApply3;
              let ccc=this.projectApplicationApply1;

             
              for(let key in data.items){
                if (data.items[key]=='') {
                  data.items[key]='-'
                }
              }
              data.items2=data.items;   //如果提交后不用清除数据的话，这句不用写也行的，直接添加data.items
              
              data.tableData.splice(0,1,data.items2)
             

              // data.items={}   解开就是点击确定后清空
              },
            addFundDetail(){    //预算经费页面经费添加按钮
              let p=this.projectApplicationApply3;
                let data={
                  Fund:p.dialog.fund,
                  projectName:p.dialog.disburseProject,
                  sort:p.dialog.type,
                  remark:p.dialog.textarea
                }
              p.tableData2.push(data)
            },
            submitBtn(){   //预算经费页面提交按钮
                console.log("提交啦");
                this.submitData()
                // this.submitHint = true;
            },
            submitData(){  //提交页面所有数据
              let a=this.projectApplicationApply1;
              let b=this.projectApplicationApply2;
              let c=this.projectApplicationApply3
              let d=[]
              for(let key in b){
                  d.push(b[key])
              }
              
              let newData1 = c.tableData[0];
              for(let key in newData1){
                if (newData1[key]=='-') {
                  newData1[key]=0
                }
              }
              let param={
                uid:this.$store.state.userInfo.userid,
                title:a.select.projectName,
                brief:a.textarea,
                leader:a.select.person,
                phone:a.select.tel,
                cid:a.select.value,
                student:JSON.stringify(a.tableData),
                message:JSON.stringify([d,[newData1,c.tableData2]]),
                tid:a.select.sort,
                mon:a.select.fund,
                beginTime:a.select.value1
              }
                this.ajax
                      .post(this.$store.state.api+'/CreateProject',param)
                      .then(res=>{
                        console.log(res)
                        if(res.data==1){
                          this.$message.success("创建成功")
                        }
                      },err=>{
                        console.log(err);
                      })
            },
            
           
        },
        created(){      //实例初始化完成后调用
            this.getProjectDepartmentData()   //获取项目立项申请基础信息页面所在部门数据
            this.getProjectTypeData()   //获取项目立项申请基础信息页面分类数据
            // this.submitData()
        }
      }
  </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%;
      min-height: 80%;
      margin-bottom: 20px;
    }
    // 顶部导航区


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

   //提交对话框开始
  .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;
    }
  }
  }
   //提交对话框结束


   .right{
        width: 83%;
        background: #fff;
        box-sizing: border-box;
        padding: 15px 20px;
        min-height: 740px;
        margin-bottom: 60px;
        border-radius: 5px;
   }




  // 左边栏开始
  .left{
      width: 10%;
      min-width: 110px;
      height: 740px;
      background: #32455b;
      display: flex;
      justify-content: center;
      margin-right: 2%;
      box-sizing: border-box;
      padding: 0 10px;
      border-radius: 5px;
      .leftTits{
        display: flex;
        flex-direction: column;
        margin: 50px 0 0 10px;
        div{
          width: 97px;
          color: #fff;
          cursor: pointer;
          margin-bottom: 30px;
          p{
            white-space: nowrap;
            overflow: hidden;
            text-overflow:ellipsis;
          }
        }
      }
      div:hover{
        color: #ccc;
      }
      .sx{
        margin-top: 53.5px;
        margin-left: 8px;
        width: 1px;
        height: 400px;
        background: #84888d;
        .qiu{
          width: 10px;
          height: 10px;
          background: #fff;
          border-radius: 50px;
          margin-left: -4.5px;
        }
      }
    }
  // 左边栏结束
}


  </style>