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

<template>
  <!-- 项目立项申请表单区域 -->
    <div class="projectApplicationApplyPAapply">
      
      <!-- 上方导航区开始 -->
      <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"  :back="back" v-show="status==0"/>
        <projectApplicationApply2 :data="projectApplicationApply2" :next="next" :back="back" v-show="status==1"/>
        <projectApplicationApply3 :data="projectApplicationApply3" :confirmSetFund="confirmSetFund" :data2="projectApplicationApply1" :next="next" :back="back" :submitBtn="submitBtn" v-show="status==2"/> 
      </div>
      <!--下方内容区结束-->

      <!-- 提交对话框开始 -->
        <el-dialog
          title="提示"
          :visible.sync="submitHint"
          width="600px"
          class="projectApplicationfundAddDialog"
          :before-close="init">
          <div class="addDialogLogo">LOGO</div>
          <div class="deleteContent">确定提交“{{projectApplicationApply1.select.projectName}}”项目立项？</div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitAll" class="AllDialogBtn">确认提交</el-button>
            <el-button @click="init" class="AllDialogBtn">取消</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:{   //立项基础信息页面
              amendMemberDialog:false,  //修改人员对话框显示判断
                dialogImageUrl:"",  //封面
                telVerify:true,
                telVerify2:true,  //添加修改成员电话判断
                select:{    //基本信息数据框
                  projectName:'', 
                  person:'',
                  Data:'',
                  value:"",   //部门
                  fund:'',
                  tel:'',
                  value1:"",
                  sort:''
                },
                options: [],  //部门下拉框
                sortOptions: [], //分类下拉框
                textarea:'',   //项目简介
                Member:{    //添加成员
                    name:'',
                    class:'',
                    phone:'',
                    score:'0'
                },
                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:{     //经费明细添加对话框
                  // id:'',
                  fund:'',  //金额
                  type:'',  //支出类别
                  disburseProject:'',  //支出项目
                  textarea:'',  //备注
                  isOk:''
                },
            }
          }
        },
        methods:{ 
          next(){   //顶部导航栏页面下一条跳转
                if(this.status>=2)return;
                this.status++;
            },
            back(){  //顶部导航栏页面上一条
                if(this.status==0)return;
                this.status--;
            },
            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);
                      })
            },
            //立项基础信息页面删除功能在它自己页面人员信息


            init(){
                //重置
                this.submitHint=false;
                
            },
            confirmSetFund(){   //预算经费经费月支出计划对话框提交
              let data=this.projectApplicationApply3;
              for(let key in data.items){
                if (data.items[key]=='') {
                  data.items[key]='-'
                }
              }
               Object.assign(data.tableData[0],data.items) 
               this.$message.success('设置经费成功')             
              },

            submitBtn(){   //预算经费页面提交显示对话框
                this.submitHint = true;
            },
            submitAll(){
              this.submitData()
            },
            submitData(){  //提交页面所有数据
              let a=this.projectApplicationApply1;
              let b=this.projectApplicationApply2;
              let c=this.projectApplicationApply3
              if(a.select.projectName=='') return this.$message.error('请输入项目名称')
              if(a.select.person=='') return this.$message.error('请输入项目负责人')
              if(a.select.value1=='') return this.$message.error('请选择项目开始时间')
              if(a.select.value=='') return this.$message.error('请选择所在部门')
              if(a.select.fund=='') return this.$message.error('请输入预算总经费')
              if(a.select.tel=='') return this.$message.error('请输入联系电话')
              if(!a.telVerify) return this.$message.error('请输入正确联系电话格式')
              if(a.select.sort=='') return this.$message.error('请选择分类')
              
              let d=[]   //按照后端格式传递数据，项目内容，要将经费支出，与项目明细放在一起，
              for(let key in b){
                  d.push(b[key])
              }
              
              let newData1 = c.tableData[0];    //没有输入的月支出计划改为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,
                imgsrc:a.dialogImageUrl,
                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("创建成功")
                          this.$router.push('projectApplication')
                        }else{
                          this.$message.error("创建失败")
                        }
                      },err=>{
                        console.log(err);
                      })
            },
            
           
        },
        created(){      //实例初始化完成后调用
            this.getProjectDepartmentData()   //获取项目立项申请基础信息页面所在部门数据
            this.getProjectTypeData()   //获取项目立项申请基础信息页面分类数据
            // this.submitData()
        }
      }
  </script>
  
  <style lang="less">
  .projectApplicationApplyPAapply{
      width: 100%;
      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: 75%;
      min-height: 80%;
      margin-bottom: 20px;
    }
    // 顶部导航区


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

   //提交对话框开始
  .projectApplicationfundAddDialog{  
 
    .el-dialog__header{
        display: flex;
        justify-content: center;
    }
    .el-dialog{
      border-radius: 5px;
      overflow: hidden;

      top: 10%;
    }
    
    .deleteContent{
      width: 100%;
      text-align: center;
      font-size: 22px;
      color: #000;
    }
    .addDialogLogo{
      width: 60px;
        height: 30px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        line-height: 30px;
        background: #f2f2f2;
        position: absolute;
        left: 20px; top: 15px; 
    }
    .el-dialog__header{
    background: #32455b;
    }
    .el-dialog__title{
      color:#fff;
        display: flex;
        justify-content: center;
        font-size: 18px;
        position: relative;
        top: -2px;
    }
    .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 30px;
        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>