ssti-CollegeManage/src/views/projectApply/components/projectApplicationApplyMakerSpace.vue

<template>
  <!-- 项目立项申请立项检查消息表达 -->
    <div class="projectApplicationApply">
  <!-- 左边导航区开始 -->
        <div class="left">
          <div class="sx">
            <div class="qiu"></div>
          </div>
          <div class="leftTits">
            <div  @click="toPage(1)">基本信息填写</div>
            <div @click="toPage(2)">项目成员</div>
            <div @click="toPage(3)">简介</div>
            <div @click="toPage(4)">下一步</div>
          </div>
        </div>
  <!-- 左边导航区结束 -->
        

  <!-- 右边填写信息区域开始 -->
        <div id="one" class="right">
            <div  class="vfpHeader">
              <div class="titleOne">项目立项申请</div>
              <div class="smallTitle">申请开放时间为2023年4月4日9:00 &nbsp;  截止时间为2023年12月31日18:00</div>
              <el-button @click="backBtn1" type="primary" size="mini">返回</el-button>
            </div>
            <hr>

                <!-- 活动申请填写信息区域开始 -->
                <div class="select">
                    <div class="selectTop">
                      <div class="label">项目名称</div>
                      <el-input v-model="data.select.projectName" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="selectMid">
                      <div class="selectLeft">
                          

                          <div class="inpBlock">
                              <div class="label">项目负责人</div>
                              <el-input v-model="data.select.person" placeholder="请输入内容"></el-input>
                          </div>
                          <div class="inpBlock">
                              <div class="label">所在部门</div>
                              <el-select v-model="data.select.value" style="width: 100%;" placeholder="请选择">
                                <el-option
                                  v-for="item in data.options"
                                  :key="item.id"
                                  :label="item.name"
                                  :value="item.id">
                                </el-option>
                              </el-select>
                          </div>
                          <div class="inpBlock">
                            <div class="label">学院牵头领导</div>
                            <el-input v-model="data.select.leader" placeholder="请输入学院牵头领导"></el-input>
                          </div>
                      </div>

                      <div class="selectRight">
                        <div class="inpBlock">
                              <div class="label">项目时间</div>
                              <el-date-picker
                                v-model="data.select.Data"
                                type="daterange"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                range-separator="至"
                                start-placeholder="项目起始时间"
                                end-placeholder="项目完成时间">
                              </el-date-picker>
                          </div>
                          <div class="inpBlock" style="position: relative;">
                              <div class="label">预算总经费</div>
                              <el-input type="number"  v-model.number="data.select.fund" placeholder="请输入内容"></el-input>
                              <div style="position: absolute;right: -30px;top: 10px;">(万)</div>
                          </div>
                          <div class="inpBlock">
                              <div class="label">选择分类</div>
                              <el-cascader v-model="type" :options="option" disabled></el-cascader>
                          </div>
                      </div>
                    </div>
                   
              </div>
              <!-- 活动申请填写信息区域结束 -->

          <!-- 项目封面上传开始 -->
          <div style="height: 260px;">
              <div id="three" class="tabTit">
                <div><p>封面上传</p></div>
              </div>
              <hr>
              <div style="margin-bottom: 10px;">项目封面</div>
              <el-progress v-show="progress.show" :percentage="progress.value" :format="ProgressFormat"></el-progress>

              <el-upload
                class="avatar-uploader"
                action="#"
                disabled
                style="position: relative;"
                :show-file-list="false"
                >
                <img v-if="data.dialogImageUrl" :src="data.dialogImageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <BeUpload :progress="progress" style="position: absolute;width: 301px;height: 180px; opacity: 0;z-index: 333;left: 0;top: 0;" @getFile="getFile" class="uploadPic" :navName="'上传封面'" :accept="accept"></BeUpload>
              </el-upload>
            </div>

          <!-- 项目封面上传开始结束 -->



            <!-- <div> -->
  <!-- 项目成员表格开始 -->
              <div id="two" class="tabTit">
                <div><p>项目组-教师团队</p><span>（团队3人以上，至少应包含1名教研室主任）</span></div>
                <el-button type="primary" @click="addMember"  size="mini">添加成员</el-button>
              </div>
              <hr>
              <el-table
                :data="data.teacherData"
                tooltip-effect="dark"
                stripe
                :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
                class="fontSize"
                >
              
                <el-table-column
                  prop="name"
                  label="姓名"
                  align="center"
                  >
                </el-table-column>
                <el-table-column
                  prop="speciality"
                  label="专业"
                  align="center"
                  >
                </el-table-column>

                <el-table-column
                  prop="title"
                  label="职称"
                  align="center"
                  >
                </el-table-column>

                <el-table-column
                  prop="education"
                  label="学历"
                  align="center"
                  >
                </el-table-column>

                <el-table-column
                  prop="section"
                  label="所在教研室"
                  align="center"
                  >
                </el-table-column>

                <el-table-column
                  prop="work"
                  label="项目组角色分工"
                  align="center"
                  >
                </el-table-column>

              
                
                <el-table-column
                  align="center"
                  prop="operation"
                  label="操作"
                  >
                  <template #default="scope">
                      <div class="operations" style="display:flex">
                          <!-- <el-button type="primary" > -->
                              <el-button type="primary" @click="amendDialogData(scope.$index)" size="mini">修改</el-button>
                              <el-button type="primary" @click="Del(scope.$index)" size="mini">删除</el-button>
                          <!-- </el-button> -->
                      </div>
                  </template>
                </el-table-column>
              </el-table>

              <div id="four" class="tabTit">
                <div><p>项目组-学生团队</p><span>（团队5人以上，学生团队年级结构安排合理）</span></div>
                <el-button type="primary" @click="addMemberStudent"  size="mini">添加学生</el-button>
              </div>
              <hr>
              <el-table
                :data="data.studentData"
                tooltip-effect="dark"
                stripe
                :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
                class="fontSize"
                >
              
                <el-table-column
                  prop="name"
                  label="姓名"
                  align="center"
                  >
                </el-table-column>
                <el-table-column
                  prop="class"
                  label="班级"
                  align="center"
                  >
                </el-table-column>

                <el-table-column
                  prop="age"
                  label="年龄"
                  align="center"
                  >
                </el-table-column>

                <el-table-column
                  prop="work"
                  label="项目组任务分工"
                  align="center"
                  >
                </el-table-column>

                <el-table-column
                  align="center"
                  prop="operation"
                  label="操作"
                  >
                  <template #default="scope">
                      <div class="operations">
                          <!-- <el-button type="primary" > -->
                              <el-button type="primary" @click="updateStudent(scope.$index)" size="mini">修改</el-button>
                              <el-button type="primary" @click="DelStudent(scope.$index)" size="mini">删除</el-button>
                          <!-- </el-button> -->
                      </div>
                  </template>
                </el-table-column>
              </el-table>
  <!-- 项目成员表格结束 -->


  <!-- 项目简介开始 -->
            <div id="three" class="tabTit">
                <div><p>项目简介</p></div>
            </div>
            <hr>
              <el-input
                type="textarea"
                :rows="6"
                resize="none"
                class="textArea"
                placeholder="项目简介（200-300字）"
                v-model="data.textarea">
              </el-input>
  <!-- 项目简介结束 -->
 <!-- 结束按钮开始 -->
         <div id="five" class="baseBtn">
              <div class="blockWidth">
                <el-button type="primary"  @click="backBtn1" size:small>上一步</el-button>
                <el-button type="primary"  @click="backBtn" size:small>下一步</el-button>
              </div>
            </div>
  <!-- 结束按钮结束 -->


 
        </div>
  <!-- 右边填写信息区域结束 -->

      <!--添加成员dialog对话框开始 -->
      <el-dialog
          :title= "isAddMember==1?'添加教师':'修改教师'"
          :visible.sync="addMemberDialog"
          :modal="true"
          :close-on-click-modal="true"
          class="AddMember"
          :before-close="init">
            <div class="littleBlock">
              <div class="dialogLabel">姓名</div>
              <div>
                <el-input v-model="teacher.name" placeholder="请输入教师姓名"></el-input>
              </div>
            </div>

            <div class="littleBlock">
              <div class="dialogLabel">专业</div>
              <div>
                <el-input v-model="teacher.speciality" placeholder="请输入教师专业"></el-input>
              </div>
            </div>

            <div class="littleBlock">
              <div class="dialogLabel">职称</div>
              <div>
                <el-input v-model="teacher.title" placeholder="请输入教师职称"></el-input>
              </div>
            </div>

            <div class="littleBlock">
              <div class="dialogLabel">学历</div>
              <div>
                <el-input v-model="teacher.education" placeholder="请输入教师学历"></el-input>
              </div>
            </div>

            <div class="littleBlock">
              <div class="dialogLabel" style="transform: translate(0,0);">所在教研室</div>
              <div>
                <el-input v-model="teacher.section" placeholder="请输入所在教研室"></el-input>
              </div>
            </div>

            <div class="littleBlock">
              <div class="dialogLabel" style="transform: translate(0,0);">项目组角色分工</div>
              <div>
                <el-input v-model="teacher.work" placeholder="请输入项目组角色分工"></el-input>
              </div>
            </div>


            <div slot="footer" class="footer">
              <el-button v-show="isAddMember==1" type="primary" @click="commit" class="AllDialogBtn" >确认提交</el-button>
              <el-button v-show="isAddMember==2" type="primary" @click="commit2" class="AllDialogBtn" >确认修改</el-button>

              <el-button @click="init" class="AllDialogBtn">取消</el-button>
            </div>
      </el-dialog>
      <!--添加成员dialog对话框结束 -->

      <!--添加学生成员dialog对话框开始 -->
      <el-dialog
          :title= "isAddStudent==1?'添加学生':'修改学生'"
          :visible.sync="addStudentDialog"
          :modal="true"
          :close-on-click-modal="true"
          class="AddMember"
          :before-close="init">
            <div class="littleBlock">
              <div class="dialogLabel">姓名</div>
              <div>
                <el-input v-model="student.name" placeholder="请输入学生姓名"></el-input>
              </div>
            </div>

            <div class="littleBlock">
              <div class="dialogLabel">班级</div>
              <div>
                <el-input v-model="student.class" placeholder="请输入学生班级"></el-input>
              </div>
            </div>

            <div class="littleBlock">
              <div class="dialogLabel">年龄</div>
              <div>
                <el-input v-model="student.age" placeholder="请输入学生年龄"></el-input>
              </div>
            </div>

            <div class="littleBlock">
              <div class="dialogLabel" style="transform: translate(0,0);">项目组角色分工</div>
              <div>
                <el-input v-model="student.work" placeholder="请输入项目组角色分工"></el-input>
              </div>
            </div>


            <div slot="footer" class="footer">
              <el-button v-show="isAddStudent==1" type="primary" @click="commitStudent" class="AllDialogBtn" >确认提交</el-button>
              <el-button v-show="isAddStudent==2" type="primary" @click="commitStudent2" class="AllDialogBtn" >确认修改</el-button>

              <el-button @click="init" class="AllDialogBtn">取消</el-button>
            </div>
      </el-dialog>
      <!--添加学生成员dialog对话框结束 -->

      <!-- 删除教师成员对话框开始 -->
            <el-dialog
              title="删除教师成员"
              :visible.sync="delMember"
              width="600px"
              class="delMemberDialog">
              <span class="deleteContent">确定删除该教师成员?</span>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="commitDelMember" class="AllDialogBtn">确认删除</el-button>
                <el-button @click="init" class="AllDialogBtn" >取消</el-button>
              </span>
            </el-dialog>
      <!-- 删除教师成员对话框结束 -->

      <!-- 删除学生成员对话框开始 -->
      <el-dialog
              title="删除学生成员"
              :visible.sync="DelStudentDialog"
              width="600px"
              class="delMemberDialog">
              <span class="deleteContent">确定删除该学生成员?</span>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="commitDelStudent" class="AllDialogBtn">确认删除</el-button>
                <el-button @click="init" class="AllDialogBtn" >取消</el-button>
              </span>
            </el-dialog>
      <!-- 删除学生成员对话框结束 -->
    </div>
  
</template>

<script>
import BeUpload from "@/components/tool/beUpload.vue";
    export default { 
      props:["data","next",'back','addPerson','type','option'],
      components: {
        BeUpload,
      },
      data() {
        return {
          // dialogImageUrl: '',
          accept:"image/*",
          isAddMember:1,
          isAddStudent:1,
          progress:{   //进度条
                value:0,
                show:false
            },  
          // fileList: [],
          dialogVisible: false,
          addMemberDialog:false,
          addStudentDialog:false,
          delMember:false,
          DelStudentDialog:false,
          index:'',
          teacher:{ //添加老师团队表
            name:"",  //姓名
            speciality:"",//专业
            title:"",//职称
            education:"",//学历
            section:"",//所在教研室
            work:"",//项目组角色分工
          },
          student:{ //添加学生团队表
            name:"",//姓名
            class:"",//班级
            age:"",//年龄
            work:'',//项目组任务分工
          }
        }
      },
      
      methods:{
        getFile(val) {       //上传封面
            // console.log(val);
            this.progress.show = false;
            this.data.dialogImageUrl=val.url
            this.$message.success('封面上传成功')
        },
        ProgressFormat(value){        //进度条
          return value ==100?'100%':`${value}%`
        },
        // submitUpload() {
        //   this.$refs.upload.submit();
        // },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        // getText(value) {     //电话验证
        //   let verify = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/; //获取正则表达式 存放到verify变量中
        //   let result = verify.test(value.trim()); //判断输入框内容是否符合 正则表达式
        //   // if(!result && value != "") {
        //     // debugger
        //   if(!result) {
        //     if (value == this.data.select.tel) {
        //         this.$message.error('请输入正确联系号码格式')
        //         return  this.data.telVerify=false;
        //     }
        //     if (value == this.data.Member.phone) {
        //         return  this.data.telVerify2=false;
        //     }
        //   }else{
        //     if (value == this.data.select.tel) {
        //          this.data.telVerify=true;
        //     }
        //     if (value == this.data.Member.phone) {
        //       return  this.data.telVerify2=true;
        //     }
        //   }
        // },
        
        init(){
          this.addMemberDialog=false;
          this.delMember=false;
          this.addStudentDialog = false;
          this.DelStudentDialog = false;
        },
        addMember(){   //添加项目组-教师成员
          this.isAddMember=1;
          this.addMemberDialog=true
        },
        addMemberStudent(){//添加项目组-学生成员
          this.isAddStudent=1;
          this.addStudentDialog = true;
        },
        amendDialogData(val){   //修改老师信息对话框显示
          Object.assign(this.teacher,this.data.teacherData[val])
          this.isAddMember=2;
          this.index=val;
          this.addMemberDialog=true;
        },
        updateStudent(val){ //修改学生信息
          Object.assign(this.student,this.data.studentData[val]);
          this.isAddStudent=2;
          this.index=val;
          this.addStudentDialog = true;
        },
        commit2(){   //确定修改老师
            Object.assign(this.data.teacherData[this.index],this.teacher)
            for(let k in this.teacher) this.teacher[k]=''
            this.addMemberDialog=false;
            this.$message.success('修改成功')
        },
        Del(val){    //删除对话框显示
          this.delMember=true;
          this.index=val
        },
        DelStudent(val){//删除学生对话框
          this.index = val;
          this.DelStudentDialog=true;
        },
        commitDelMember(){   //对话框确定删除教师成员
          let a=this.index;
          this.data.teacherData.splice(a,1);
          this.$message.success('删除成功');
          this.delMember=false;
        
        },
        commitDelStudent(){ //对话框确定删除学生成员
          this.data.studentData.splice(this.index,1);
          this.$message.success('删除成功');
          this.DelStudentDialog=false;
        },
        backBtn1(){  // 上一步
          this.$router.push('/projectApplication')
        },
         
        backBtn(){   // 下一步
            this.next();
        },
        commit(){   //确定添加教师
              for(let i in this.teacher){if(this.teacher[i]==''||this.teacher[i]==undefined)return this.$message.error("请填完所有内容");}
              let newData = {};
              for(let a in this.teacher)newData[a] = this.teacher[a];
              this.data.teacherData.push(newData);
              this.$message.success('添加成功');
              this.init();
              for(let j in this.teacher)this.teacher[j]='';
        },
        commitStudent(){//确定添加学生
            for(let i in this.student){if(this.student[i]==''||this.student[i]==undefined)return this.$message.error("请填完所有内容");}
            let newData={};
            for(let a in this.student)newData[a] = this.student[a];
            this.data.studentData.push(newData);
            this.$message.success("添加成功");
            this.init();
            //清空表单
            for(let j in this.student)this.student[j]='';
        },
        commitStudent2(){//确定修改学生
            Object.assign(this.data.studentData[this.index],this.student)
            this.addStudentDialog=false;
            for(let k in this.student) this.student[k]=''
            this.$message.success('修改成功')
        },
        toPage(val){
            if (val==1) {
              document.getElementById("one").scrollIntoView({ behavior: "smooth" });
            }else if(val==2){
              document.getElementById("two").scrollIntoView({ behavior: "smooth" });
            }else if(val==3){
              document.getElementById("three").scrollIntoView({ behavior: "smooth" });
            }else if(val==4){
              document.getElementById("four").scrollIntoView({ behavior: "smooth" });
            }
        }
      },
    }
</script>

<style lang="less">


.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    z-index: -10;
    // position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 300px;
    // height: 50%;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 300px;
    height:180px !important;
    display: block;
  }
.projectApplicationApply{
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    .uploadPic{
      position: absolute;
      top: -8px;right: 0;
      width: 100px;
      box-sizing: border-box;
      padding: 9px 0;
      font-size: 16px;
      background-color: #0e72e6;
      border-radius:5px
    }
        // 右边栏标题
        .projectApplicationApplypAHeader{
            width: 100%;
            display: flex;
            justify-content:flex-start;
            position: relative;
            margin-bottom: 15px;
            .pAHeader1{
              font-weight: 600;
              font-size: 22px;
              flex-shrink: 0;
            }
            .pAHeader2{
              position: absolute;
              top:8px;
              left: 160px;
              font-size: 16px;
              background: repeating-linear-gradient();
            }
            .pAHeader3{
              background: #0e72e6 !important;
              color: #fff !important;
              display: flex;
              position: absolute;
              right: 0;
              justify-content: center;
              font-size: 16px;
              width: 100px;
              height: 30px;
              align-items: center;
            }
        }



        .delMemberDialog{
            font-size: 18px;
            .el-dialog{
              border-radius: 5px;
              overflow: hidden;
            }
            .deleteContent{
              margin: 30px 0;
              font-size: 22px;
              color: #000;
            }
            .el-dialog__header{
              background: #32455b;
              display: flex;
              justify-content: center;
            }
            .el-dialog__title{
              color:#fff;
        display: flex;
        justify-content: center;
        font-size: 18px;
        position: relative;
        top: -2px;
            }
            .el-dialog__body{
              display: flex;
              justify-content: center;
            }
            // .addDialogMid{
            //   box-sizing: border-box;
            //   padding:0 60px 0 10px;
            //   .addDialogTit{
            //     display: flex;
            //     span{
            //       width: 80px;
            //       font-size: 16px;
            //       line-height: 40px;
            //       text-align: left;
                  
            //     }
            //   }
 
            // }
            .dialog-footer{
              display: flex;
              justify-content: center;
              box-sizing: border-box;
            }
          }
}
#four{
  margin-top: 60px;
}
</style>