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"/> -->
        <projectApplicationApply :data="projectApplicationApply1" :next="next"  :back="back" v-if="status==0 && pageType[0]=='5e21b204-c206-11ed-a4cd-509a4c5b67cf'"/>

        <!-- 特色创客空间建设项目 -->
        <projectApplicationApplyMakerSpace :data="MakerSpace" :next="next" :back="back" v-if="status==0 && pageType[0]=='5f7a66d5-c206-11ed-a4cd-509a4c5b67cf'"/>
        <projectApplicationApplyMakerSpace2 :data="MakerSpace2" :next="next" :back="back" v-if="status==1 && pageType[0]=='5f7a66d5-c206-11ed-a4cd-509a4c5b67cf'"/>
        <!-- <projectApplicationApply :data="projectApplicationApply1" :next="next"  :back="back" v-if="status==0 && pageType[0]=='5e21b204-c206-11ed-a4cd-509a4c5b67cf'"/> -->
        <!-- <projectApplicationApplyMakerSpace :data="MakerSpace" :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 && pageType[0]=='5e21b204-c206-11ed-a4cd-509a4c5b67cf'"/>
        <projectApplicationApply3 :data="projectApplicationApply3" :confirmSetFund="confirmSetFund" :data2="pageType[0]=='5e21b204-c206-11ed-a4cd-509a4c5b67cf'?projectApplicationApply1:MakerSpace" :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">确定提交“{{pageType[0]=='5e21b204-c206-11ed-a4cd-509a4c5b67cf'?projectApplicationApply1.select.projectName:MakerSpace.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"
          :show-close="false"
          >
          <!-- <div class="addDialogLogo">LOGO</div> -->
          <div class="" style="display: flex;align-items: center;justify-content: center;margin-top: 10px;">
              <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 './components/projectApplicationApply.vue';
  import projectApplicationApply2 from './components/projectApplicationApply2.vue';
  import projectApplicationApply3 from './components/projectApplicationApply3.vue';
  //创客空间建设项目立项申报
  import projectApplicationApplyMakerSpace from './components/projectApplicationApplyMakerSpace.vue';
  import projectApplicationApplyMakerSpace2 from './components/projectApplicationApplyMakerSpace2.vue'
      export default {
        // 进行注册使用
        components:{
          projectApplicationApply,
          projectApplicationApply2,
          projectApplicationApply3,
          projectApplicationApplyMakerSpace,
          projectApplicationApplyMakerSpace2,
        },
        data() {
          return {
            // selectType:true,     //选择分类对话框
            selectType:true,     //选择分类对话框
            pageType:[],         //判断页面显示分类   学生创客项目    学院特色创客空间   
            status:0,   //判断顶部导航跳转
            submitHint:false,   //提交按钮

            //创客空间建设项目立项申报数据
            MakerSpace:{
                dialogImageUrl:"",  //封面
                select:{    //基本信息数据框
                  projectName:'', //项目名称
                  person:'',  //项目负责人
                  Data:[],  //项目时间
                  value:"",   //部门
                  fund:0,  //预算总经费
                  leader:"",//学院牵头领导
                },
                options: [],  //部门下拉框
                textarea:'',   //项目简介
                teacherData:[],//教师组
                studentData:[],//学生组
            },
            //创客空间建设项目立项申报项目内容数据
            MakerSpace2:{
                Construction:"",//建设内容
                ProjectBasis:"",//立项依据
                development:"",//创客空间物理环境、制度建设及软件设施建设情况
                studio:"",//学生创客工作室建设情况
                studentTeam:"",//学生创客团队（人才）培养预期成果、数量
                studentActivities:"",//学生创客活动组织实施情况
                Transforming:"",//学生创客团队孵化、转化创业项目情况
                condition:"",//立 项基 础及条 件

            },

            projectApplicationApply1:{   //立项基础信息页面
                amendMemberDialog:false,  //修改人员对话框显示判断
                telVerify:true,    //判断基础信息里联系电话

                dialogImageUrl:"",  //封面!!!!!!!!
                tableStudentData:[],  //学生成员成员列表！！！！！！！！
                tableTeacherData:[],  //老师成员成员列表！！！！！！！
                textarea:'',   //项目简介！！！！！！！
                select:{    //要提交的数据!!!!!!!!!!!!!!!!!!!!!!!
                  projectName:'',     //项目名称
                  leader:'',          //项目负责人
                  projectDate:'',   //开始结束日期
                  department:"",   //部门
                  fund:'',         //资金
                  MultiSelectProjectNameS:[],   //优先支持项目
                  schoolRemould:'',        //校园改造项目
                  tel:'',  //电话
                  projectApplyPerson:'',  //项目申请人
                },
                departmentOptions: [],  //部门下拉框
                sortOptions: [      //选择分类下拉框数据
                    {
                      value:"",
                      label: '',
                      children: [{
                        value: 0,
                        label: '创意组',
                      },
                       {
                        value: 1,
                        label: '初创组',
                      }
                    ]}, 
                    {
                    value:"",
                    label: '',
                    children: [{
                      value: 0,
                      label: '已建设',
                    }, {
                      value: 1,
                      label: '待建设',
                    }]
                  }],

            },

            projectApplicationApply2:{  //项目内容页面
                  back:'',
                  innovate:'',
                  path:'',
                  scene:'',
                  worth:'',
                  team:'',
                  cost:'',
                  expectResults:'',
                  expectResultsTeacher:'',
                  expectConversion:'',
                  plan:''
            },
            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
                        this.MakerSpace.options = p;
                        this.projectApplicationApply1.departmentOptions=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(){   //预算经费页面提交显示对话框
                //先判断项目名称是否为空
                if(this.pageType[0]=='5e21b204-c206-11ed-a4cd-509a4c5b67cf'){//学生创客项目
                    if(this.projectApplicationApply1.select.projectName=='')return this.$message.error("请先输入项目名称")
                    this.submitHint = true;
                }else if(this.pageType[0]=='5f7a66d5-c206-11ed-a4cd-509a4c5b67cf'){//特色创客空间建设项目
                  if(this.MakerSpace.select.projectName=="")return this.$message.error("请先输入项目名称");
                    this.submitHint = true;
                }else{
                  return this.$message.error("项目分类错误")
                }
            },
            submitAll(){
              if(this.pageType[0]=='5e21b204-c206-11ed-a4cd-509a4c5b67cf'){//学生创客项目
                //在这里判断数据
              this.submitData()

              }else if(this.pageType[0]=='5f7a66d5-c206-11ed-a4cd-509a4c5b67cf'){//特色创客空间建设项目
                //在这里判断项目
                this.InsertProjectMakerSpace();
              }
            },
            submitData(){  //提交页面所有数据

              let a=this.projectApplicationApply1;
              let b=this.projectApplicationApply2;
              let c=this.projectApplicationApply3

              let param={
                uid:this.$store.state.userInfo.userid,
                tit:a.select.projectName,
                leader:a.select.leader,
                begDate:a.select.projectDate[0],
                endDate:a.select.projectDate[1],
                department:a.select.department,
                fund:a.select.fund,
                imgsrc:a.dialogImageUrl,
                teacher:JSON.stringify(a.tableTeacherData),
                student:JSON.stringify(a.tableStudentData),
                con:a.textarea,
                chapters:JSON.stringify(b),
                tid:this.pageType[0],
                tName:this.pageType[1],
                // message:JSON.stringify([d,[newData1,c.tableData2]]),
                mon:JSON.stringify(this.projectApplicationApply3),//预算经费,
                tel:a.select.tel,
                Mul:JSON.stringify(a.select.MultiSelectProjectNameS),
                schoolRemould:a.select.schoolRemould,
                person:a.select.projectApplyPerson,
              }
              const cEmpty = /^\s*$/g;
              for(let i in param){
                switch(i){
                  case 'leader':
                    if(cEmpty.test(param[i]))return this.$message.error("项目负责人不能为空")
                    break;
                  case 'begDate':
                    if(!param[i])return this.$message.error("请选择项目开始时间")
                    break;
                  case 'department':
                    if(cEmpty.test(param[i]))return this.$message.error("请选择项目所属部门")
                    break;
                  case "fund":
                    if(cEmpty.test(param[i]))return this.$message.error("请输入预算经费")
                    break;
                  case 'Mul':
                    console.log(111);
                    if(!JSON.parse(param[i]).length) return this.$message.error("请选择优先支持项目")
                    break;
                  case 'schoolRemould':
                    if(!param[i])return this.$message.error("请选择美丽校园改造项目")
                    break;
                  case "tel":
                    if(cEmpty.test(param[i]))return this.$message.error("请输入联系方式")
                    break;
                  case 'person':
                    if(cEmpty.test(param[i]))return this.$message.error("请选择项目申请人")
                    break;
                  case 'imgsrc':
                    if(cEmpty.test(param[i]))return this.$message.error("请选择项目封面图片")
                    break;
                  case 'teacher':
                    if(JSON.parse(param[i]).length<2 || JSON.parse(param[i]).length>4)return this.$message.error("需要教师团队3人以上，至少应包含1名教研室主任")
                    break;
                  case 'student':
                    if(JSON.parse(param[i]).length<5)return this.$message.error("需要学生团队5人以上")
                    break;
                  case 'con':
                    if(param[i].length<200 || param[i]>=300)return this.$message.error("项目简介需要200-300字")
                    break;
                }
              }
              // return console.log(a.textarea.length);

              // if(a.select.projectName=='') return this.$message.error('请输入项目名称')
              // if(a.select.leader=='') return this.$message.error('请输入项目负责人')
              // if(a.select.department=='') return this.$message.error('请选择所在部门')
              // if(!a.select.MultiSelectProjectNameS[0]) return this.$message.error('请选择优先支持项目')
              // if(a.select.tel=='') return this.$message.error('请输入联系电话')
              // if(a.select.projectDate=='') return this.$message.error('请选择项目开始时间')
              // if(a.select.fund=='') return this.$message.error('请输入预算总经费')
              // if(a.select.fund=='') return this.$message.error('请选择美丽校园改造计划')
              // if(a.select.person=='') return this.$message.error('请选择项目申请人')
              // if(!a.telVerify) return this.$message.error('请输入正确联系电话格式')
              // if(a.tableTeacherData.length<2 || a.tableTeacherData.length>3) return this.$message.error('老师成员2-3人')
              // if(a.tableStudentData.length<5) return this.$message.error('学生成员5人以上')

              // return console.log(param);
                this.ajax
                      .post(this.$store.state.api+'/InsertProjectStudent',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);
                      })
            },
            //添加特色创客空间建设项目立项申报
            InsertProjectMakerSpace(){
              let param = {
                uid:this.$store.state.userInfo.userid,//用户ID,
                title:this.MakerSpace.select.projectName,//项目名称
                pro_leader:this.MakerSpace.select.person,//项目负责人
                startTime:this.MakerSpace.select.Data[0],//项目开始时间
                endTime:this.MakerSpace.select.Data[1],//项目结束时间
                classid:this.MakerSpace.select.value,//部门ID
                fund:this.MakerSpace.select.fund,//预算总经费
                lead_leader:this.MakerSpace.select.leader,//学院牵头领导
                image:this.MakerSpace.dialogImageUrl,//项目封面
                course_teacher:JSON.stringify(this.MakerSpace.teacherData),//教师团队
                course_student:JSON.stringify(this.MakerSpace.studentData),//学生团队
                brief:this.MakerSpace.textarea,//项目简介
                chapters:JSON.stringify(this.MakerSpace2),//项目内容
                typeid:this.pageType[0],//分类一级ID，
                typeName:this.pageType[1],//分类二级
                mon:JSON.stringify(this.projectApplicationApply3),//预算经费,
              }
              //判断数据
              const cEmpty = /^\s*$/g;
              for(let i in param){
                switch(i){
                  case 'pro_leader':
                    if(cEmpty.test(param[i]))return this.$message.error("项目负责人不能为空")
                    break;
                  case 'startTime':
                    if(cEmpty.test(param[i]))return this.$message.error("请选择项目开始时间")
                    break;
                  case 'endTime':
                    if(cEmpty.test(param[i]))return this.$message.error("请选择项目计划结束时间")
                    break
                  case 'classid':
                    if(cEmpty.test(param[i]))return this.$message.error("请选择项目所属部门")
                    break;
                  case "lead_leader":
                    if(cEmpty.test(param[i]))return this.$message.error("请输入学院牵头领导")
                    break;
                  case 'image':
                    if(cEmpty.test(param[i]))return this.$message.error("请选择项目封面图片")
                    break;
                  case 'course_teacher':
                    if(JSON.parse(param[i]).length<3)return this.$message.error("需要教师团队3人以上，至少应包含1名教研室主任")
                    break;
                  case 'course_student':
                    if(JSON.parse(param[i]).length<5)return this.$message.error("需要学生团队5人以上")
                    break;
                  case 'brief':
                    if(param[i].length<200&&param[i]<=300)return this.$message.error("项目简介需要200-300字")
                    break;
                }
              }
              this.ajax.post(this.$store.state.api+"/InsertProjectMakerSpace",param).then(res=>{
                if(res.data==1){
                  this.$message.success("提交成功")
                  this.$router.push('/projectApplication')
                }else{
                  this.$message.error("提交失败")
                }
              }).catch(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>