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">
        <!-- 学生创客项目 5e21b204-c206-11ed-a4cd-509a4c5b67cf -->
        <!-- 特色创客空间建设项目 5f7a66d5-c206-11ed-a4cd-509a4c5b67cf -->
        <projectApplicationApply :data="projectApplicationApply1" :next="next"  :back="back" v-if="status==0 && pageType[0]=='5e21b204-c206-11ed-a4cd-509a4c5b67cf'"/>
        <projectApplicationApply :data="projectApplicationApply1" :next="next"  :back="back" v-if="status==0 && pageType[0]=='5f7a66d5-c206-11ed-a4cd-509a4c5b67cf'"/>

        <projectApplicationApply2 :data="projectApplicationApply2" :next="next" :back="back" v-if="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="pageSubmitData"
          :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>
      <!-- 提交对话框结束 -->

      <!-- 选择分类开始 -->
      <el-dialog
          title="提示"
          :visible.sync="selectType"
          width="600px"
          class="pageSubmitData"
          :close-on-click-modal='false'
          :close-on-press-escape="false"
          >
          <!-- <div class="addDialogLogo">LOGO</div> -->
          <div class="" style="display: flex;align-items: center;justify-content: center;">
              <div style="margin-right: 10px;">选择分类</div>
              <el-cascader v-model="pageType" :options="projectApplicationApply1.sortOptions" clearable></el-cascader>
          </div>

          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="selectTypeButton" class="AllDialogBtn">确认提交</el-button>
            <el-button @click="$router.back()" 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 {
            selectType:true,     //选择分类对话框
            pageType:[],         //判断页面显示分类   学生创客项目    学院特色创客空间   
            status:0,   //判断顶部导航跳转
            submitHint:false,   //提交按钮



            projectApplicationApply1:{   //立项基础信息页面
              amendMemberDialog:false,  //修改人员对话框显示判断
                dialogImageUrl:"",  //封面
                telVerify:true,
                telVerify2:true,  //添加修改成员电话判断
                select:{    //基本信息数据框
                  projectName:'', 
                  person:'',
                  Data:'',
                  value:"",   //部门
                  fund:'',
                  tel:'',
                  value1:"",
                  sort:[] //["dawjiawdjaw",0]
                },
                options: [],  //部门下拉框
                // sortOptions: [], //分类下拉框
                sortOptions: [
                    {
                      value:"",
                      label: '',
                      children: [{
                        value: 0,
                        label: '创意组',
                      },
                       {
                        value: 1,
                        label: '初创组',
                      }
                    ]}, 
                    {
                    value:"",
                    label: '',
                    children: [{
                      value: 0,
                      label: '已建设',
                    }, {
                      value: 1,
                      label: '待建设',
                    }]
                  }],
                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:{ 
          
          selectTypeButton(){
            // this.$message.error('请选择分类')
            console.log(this.pageType[0]==false);
            if (!this.pageType[0]) return this.$message.error('请选择分类')
            this.selectType=false
          },
          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[0].value=p[0].id
                        a.sortOptions[0].label=p[0].name
                        a.sortOptions[1].value=p[1].id
                        a.sortOptions[1].label=p[1].name
                      },err=>{
                        console.log(err);
                      })
            },
            //立项基础信息页面删除功能在它自己页面人员信息


            init(){
                //重置
                this.submitHint=false;
                // this.selectType=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
                }
              }
              console.log(a.select.sort);
              let typeId=a.select.sort[0]
              let typeName=a.select.sort[1]
              // return console.log(typeId,typeName);

              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:typeId,
                tidName:typeName,
                mon:a.select.fund,
                imgsrc:a.dialogImageUrl,
                beginTime:a.select.value1
              }
              console.log(param);
                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()
            // if(this.$route.query["id"]){
            //   //弹窗
            // }else{
            //   // this.$route.push(`/projectApplicationApplyMain?id=`)
            // }
        }
      }
  </script>
  
  <style lang="less">
  .projectApplicationApplyPAapply{
      width: 100%;
      background: #e6eaf0;
      display: flex;
      flex-direction: column;
      align-items: center;



  // 顶部导航区开始
      .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%;
          }
      }  
      .vector{  //矢量图大小
          height: 50%;
          margin-top: 5px;
        }
        .Main_area{  //宽度
          width: 75%;
          min-height: 80%;
          margin-bottom: 20px;
        }
  // 顶部导航区结束

   //提交对话框开始     选择分类
  // .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>