ssti-CollegeManage/src/views/projectApply/projectApplicationApply.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.leader" placeholder="请输入内容"></el-input>
                          </div>
                          <div class="inpBlock">
                              <div class="label">所在部门</div>
                              <el-select v-model="data.select.department" style="width: 100%;" placeholder="请选择">
                                <el-option
                                  v-for="item in data.departmentOptions"
                                  :key="item.id"
                                  :label="item.name"
                                  :value="item.id">
                                </el-option>
                              </el-select>
                          </div>
                          <div class="inpBlock">
                              <div class="label" style="width: 50px;font-size: 14px;position: relative;top: -8px;">优先支持项目(可多选)</div>
                              <el-select style="width: 100%;" v-model="data.select.MultiSelectProjectNameS" multiple placeholder="请选择">
                                <el-option
                                  v-for="item in data.MultiSelectProject"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                              </el-select>
                          </div>
                          <div class="inpBlock">
                              <div class="label">联系电话</div>
                              <el-input type="number" v-model="data.select.tel"  @blur="getText(data.select.tel)" placeholder="请输入联系方式"></el-input>
                          </div>
                      </div>

                      <div class="selectRight">
                        <div class="inpBlock">
                              <div class="label">项目开始时间</div>
                              <!-- <el-date-picker
                                v-model="data.select.value1"
                                type="datetime"
                                style="width: 100%;"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择日期">
                              </el-date-picker> -->
                              <!-- <el-date-picker
                                v-model="data.select.projectDate"
                                type="datetimerange"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                >
                              </el-date-picker> -->
                              <el-date-picker
                                v-model="data.select.projectDate"
                                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="data.select.fund" placeholder="请输入内容"></el-input>
                              <div style="position: absolute;right: -30px;top: 10px;">(万)</div>
                          </div>
                          <div class="inpBlock">
                              <div class="label" style="font-size: 14px;max-width: 50px;position: relative;top: -8px;">美丽校园改造项目(特色项目)</div>
                              <el-select v-model="data.select.schoolRemould" style="width: 100%;" placeholder="请选择">
                                <el-option
                                  v-for="item in data.schoolRemouldOptions"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                              </el-select>
                          </div>
                          <div class="inpBlock">
                              <div class="label">项目申请人</div>
                              <el-select v-model="data.select.projectApplyPerson" style="width: 100%;" placeholder="请选择">
                                <el-option
                                  v-for="item in data.personType"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                              </el-select>
                          </div>
                          <!-- <div class="inpBlock">
                              <div class="label">选择分类</div>
                              <el-cascader v-model="data.select.sort" :options="data.sortOptions" clearable></el-cascader>
                          </div> -->
                      </div>
                    </div>
                   
              </div>
              <!-- 活动申请填写信息区域结束 -->

          <!-- 项目封面上传开始 -->
          <div style="height: 260px;">
              <div id="two" 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 id="two" class="tabTit">
                <div><p>项目组-老师成员<span>(2个学院以上,团队2-3人)</span> </p></div>
                <el-button type="primary" @click="addTeacherMember"  size="mini">添加成员</el-button>
              </div>
              <hr>
              <el-table
                :data="data.tableTeacherData"
                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="phone"
                  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="amendTeacherDialogData(scope.$index)" size="mini">修改</el-button>
                              <el-button type="primary" @click="DelTeacher(scope.$index)" size="mini">删除</el-button>
                          <!-- </el-button> -->
                      </div>
                  </template>
                </el-table-column>
              </el-table>

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

                  <div class="littleBlock">
                    <div class="dialogLabel">班级</div>
                    <div>
                      <el-input v-model="data.Member.class"></el-input>
                    </div>
                  </div>

                  <div class="littleBlock">
                    <div class="dialogLabel">电话</div>
                    <div>
                      <el-input type="number" class="inputNumber" v-model="data.Member.phone" @blur="getText(data.Member.phone)" ></el-input>
                    </div>
                  </div>
                  <div slot="footer" class="footer">
                    <el-button v-show="isAddMember==1" type="primary" @click="commitAddTeacher" class="AllDialogBtn" >确认提交</el-button>
                    <el-button v-show="isAddMember==2" type="primary" @click="commitAmendTeacher" class="AllDialogBtn" >确认修改</el-button>

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

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






  <!-- 学生项目成员表格开始 -->
              <div id="two" class="tabTit">
                <div><p>项目组-学生成员<span>(至少2个学院以上学生构成,团队5人以上)</span> </p></div>
                <el-button type="primary" @click="addStudentMember"  size="mini">添加成员</el-button>
              </div>
              <hr>
              <el-table
                :data="data.tableStudentData"
                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="phone"
                  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="amendStudentDialogData(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>

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

                  <div class="littleBlock">
                    <div class="dialogLabel">班级</div>
                    <div>
                      <el-input v-model="data.Member.class"></el-input>
                    </div>
                  </div>

                  <div class="littleBlock">
                    <div class="dialogLabel">电话</div>
                    <div>
                      <el-input type="number" class="inputNumber" v-model="data.Member.phone" @blur="getText(data.Member.phone)" ></el-input>
                    </div>
                  </div>
                  <div slot="footer" class="footer">
                    <el-button v-show="isAddMember==1" type="primary" @click="commitAddStudent" class="AllDialogBtn" >确认提交</el-button>
                    <el-button v-show="isAddMember==2" type="primary" @click="commitAmendStudent" class="AllDialogBtn" >确认修改</el-button>

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

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


  <!-- 项目简介开始 -->
            <div id="three" class="tabTit">
                <div><p>项目简介<span>(200-300字)</span></p></div>
            </div>
            <hr>
              <el-input
                type="textarea"
                :rows="6"
                resize="none"
                class="textArea"
                placeholder="请输入内容"
                v-model="data.textarea">
              </el-input>
  <!-- 项目简介结束 -->
 <!-- 结束按钮开始 -->
         <div id="four" 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>
  <!-- 右边填写信息区域结束 -->
    </div>
  
</template>

<script>
    import BeUpload from "../../components/tool/beUpload.vue";
    export default { 
      props:["data","next",'back','addPerson'],
      components: {
        BeUpload,
      },
      data() {
        return {
          // dialogImageUrl: '',
          accept:"image/*",
          isAddMember:1,
          progress:{   //进度条
                value:0,
                show:false
            },  
          // fileList: [],
          // dialogVisible: false,
          addStudentMemberDialog:false,   //添加修改学生对话框
          addTeacherMemberDialog:false,   //添加修改老师对话框
          delStudentMember:false,         //删除学生对话框
          delTeacherMember:false,         //删除老师对话框
          index:''
        }
      },
      
      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.addStudentMemberDialog=false;
          // this.data.amendMemberDialog=false
          this.delStudentMember=false
          this.addTeacherMemberDialog=false
        },

        // 项目组学生成员方法开始
                  addStudentMember(){   //添加项目成员对话框显示
                    this.addStudentMemberDialog=true
                    for(let i in this.data.Member){
                      if(i=='score')this.data.Member[i] = "0"
                      else this.data.Member[i] = "";
                    }
                    this.isAddMember=1;
                  },
                  DelStudent(val){    //删除对话框显示
                    this.delStudentMember=true;
                    this.index=val
                  },
                  amendStudentDialogData(val){   //修改项目成员信息对话框显示
                    Object.assign(this.data.Member,this.data.tableStudentData[val])
                    this.isAddMember=2;
                    this.data.Member['index']=val    //为下面修改提供下标
                    // console.log(this.data.Member['index']);
                    this.addStudentMemberDialog=true
                  },
                  commitAddStudent(){   //确定添加成员  
                        // console.log(this.data.Member.name);
                        if (this.data.Member.name =="" ||this.data.Member.name==undefined) return this.$message.error('请输入姓名')
                        if (this.data.Member.class=="" ||this.data.Member.class==undefined) return this.$message.error('请输入班级')
                        if (!this.data.telVerify2) return this.$message.error('请输入正确联系电话格式')
                        // this.addPerson();
                        let newData = {};
                        for(let j in this.data.Member)newData[j] = this.data.Member[j];
                        this.data.tableStudentData.push(newData);
                        this.$message.success('添加成功')
                        for(let i in this.data.Member){      
                          if(i=='score')this.data.Member[i] = "0"
                          else this.data.Member[i] = "";
                        }
                        console.log(this.data.tableStudentData)
                        this.init()
                  },

                  commitAmendStudent(){   //确定修改成员
                        if (!this.data.telVerify2) return this.$message.error('请输入正确联系号码格式')
                        Object.assign(this.data.tableStudentData[this.data.Member['index']],this.data.Member)
                        for(let k in this.data.Member) this.data.Member[k]=''
                        this.addStudentMemberDialog=false;
                        this.$message.success('修改成功')

                        console.log(this.data.tableData);
                  },

                  commitDelStudentMember(){   //对话框确定删除成员
                    let a=this.index;
                    this.data.tableStudentData.splice(a,1);
                    this.$message.success('删除成功');
                    this.delStudentMember=false;
                  },
        // 项目组学生成员方法开始


        // 项目组老师成员方法开始
                addTeacherMember(){   //添加项目成员对话框显示
                    this.addTeacherMemberDialog=true
                    for(let i in this.data.Member){
                      if(i=='score')this.data.Member[i] = "0"
                      else this.data.Member[i] = "";
                    }
                    this.isAddMember=1;
                  },
                  DelTeacher(val){    //删除对话框显示
                    this.delTeacherMember=true;
                    this.index=val
                  },
                  amendTeacherDialogData(val){   //修改项目成员信息对话框显示
                    Object.assign(this.data.Member,this.data.tableTeacherData[val])
                    this.isAddMember=2;
                    this.data.Member['index']=val    //为下面修改提供下标
                    // console.log(this.data.Member['index']);
                    this.addTeacherMemberDialog=true
                  },
                  commitAddTeacher(){   //确定添加成员  
                        // console.log(this.data.Member.name);
                        if (this.data.Member.name =="" ||this.data.Member.name==undefined) return this.$message.error('请输入姓名')
                        if (this.data.Member.class=="" ||this.data.Member.class==undefined) return this.$message.error('请输入班级')
                        if (!this.data.telVerify2) return this.$message.error('请输入正确联系电话格式')
                        // this.addPerson();
                        let newData = {};
                        for(let j in this.data.Member)newData[j] = this.data.Member[j];
                        this.data.tableTeacherData.push(newData);
                        this.$message.success('添加成功')
                        for(let i in this.data.Member){      
                          if(i=='score')this.data.Member[i] = "0"
                          else this.data.Member[i] = "";
                        }
                        console.log(this.data.tableTeacherData)
                        this.init()
                  },

                  commitAmendTeacher(){   //确定修改成员
                        if (!this.data.telVerify2) return this.$message.error('请输入正确联系号码格式')
                        Object.assign(this.data.tableTeacherData[this.data.Member['index']],this.data.Member)
                        for(let k in this.data.Member) this.data.Member[k]=''
                        this.addTeacherMemberDialog=false;
                        this.$message.success('修改成功')

                        console.log(this.data.tableTeacherData);
                  },

                  commitDelTeacherMember(){   //对话框确定删除成员
                    let a=this.index;
                    this.data.tableTeacherData.splice(a,1);
                    this.$message.success('删除成功');
                    this.delTeacherMember=false;
                  },
        // 项目组老师成员方法开始

        backBtn1(){  // 上一步
          this.$router.push('/projectApplication')
        },
         
        backBtn(){   // 下一步
            this.next();
        },

       
        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;
            }
          }
}
</style>