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年××月××日9:00 &nbsp;  截止时间为2023年××月××日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 type="number" v-model="data.select.tel"  @blur="getText(data.select.tel)" placeholder="请输入联系方式"></el-input>
                          </div>
                          <!-- <div v-if="!isPhoneValid" class="error-message">电话号码格式不正确</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>
                          </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">选择分类</div>
                              <el-select v-model="data.select.sort" style="width: 100%;" placeholder="请选择">
                                <el-option
                                  v-for="item in data.sortOptions"
                                  :key="item.id"
                                  :label="item.name"
                                  :value="item.id">
                                </el-option>
                              </el-select>
                          </div>
                      </div>
                    </div>
                   
              </div>
              <!-- 活动申请填写信息区域结束 -->

          <!-- 项目封面上传开始 -->
          <div style="height: 260px;">
              <div id="two" class="tabTit">
                <div><p>封面上传</p></div>
                <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传封面</el-button> -->
              </div>
              <hr>
              <!-- <BeUpload @getFile="getFile" class="uploadPic" :navName="'上传封面'" :accept="accept"></BeUpload> -->

              <!-- <el-upload
                action="#"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="data.dialogImageUrl" alt="">
              </el-dialog> -->
              <div style="margin-bottom: 10px;">项目封面</div>
              <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 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>

              <!-- <el-upload
                class="upload-demo"
                action="#"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="data.fileList"
                :multiple="false"
                style="width: 40%;margin-top: -25px;"
                list-type="picture">
              </el-upload> -->
            </div>

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



            <!-- <div> -->
  <!-- 项目成员表格开始 -->
              <div id="two" class="tabTit">
                <div><p>项目成员</p></div>
                <el-button type="primary" @click="addMember"  size="mini">添加成员</el-button>
              </div>
              <hr>
              <el-table
                :data="data.tableData"
                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="amendDialogData(scope.row)" size="mini">修改</el-button>
                              <el-button type="primary" @click="Del(scope.row)" 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="请输入内容"
                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>
  <!-- 右边填写信息区域结束 -->

      <!--添加成员dialog对话框开始 -->
      <el-dialog
          title="添加成员"
          :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="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 type="primary" @click="commit" class="diaBtn" >确认提交</el-button>
              <el-button @click="init" class="diaBtn">取消</el-button>
            </div>
      </el-dialog>
      <!--添加成员dialog对话框结束 -->

      <!--修改成员dialog对话框开始 -->
      <el-dialog
          title="修改成员"
          :visible.sync="data.amendMemberDialog"
          :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.Member2.name"></el-input>
              </div>
            </div>

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

            <div class="littleBlock">
              <div class="dialogLabel">电话</div>
              <div>
                <el-input type="number" class="inputNumber" v-model="data.Member2.phone" @blur="getText(data.Member2.phone)" ></el-input>
              </div>
            </div>
            <div slot="footer" class="footer">
              <el-button type="primary" @click="commit2" class="diaBtn" >确认提交</el-button>
              <el-button @click="init" class="diaBtn">取消</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="btn5">确认删除</el-button>
                <el-button @click="init" class="btn5" >取消</el-button>
              </span>
            </el-dialog>
      <!-- 删除成员对话框结束 -->
    </div>
  
</template>

<script>
    import BeUpload from "../../components/tool/beUpload.vue";
    export default { 
      props:["data","next",'back','addPerson','amend'],
      components: {
        BeUpload,
      },
      data() {
        return {
          // dialogImageUrl: '',
          accept:"*",
          // fileList: [],
          dialogVisible: false,
          addMemberDialog:false,
          amendMemberDialog:false,
          delMember:false,
          rowData:''
        }
      },
      
      methods:{
        getFile(val) {       //上传封面
            console.log(val);
            // let data=[{
            //   name:val.fileName,
            //   url:val.url
            // }]
            this.data.dialogImageUrl=val.url
            // console.log(this.data.fileList);
        },
        // submitUpload() {
        //   this.$refs.upload.submit();
        // },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        getText(value) {     //电话验证
          // console.log(value);
          // let text = document.getElementById(inputId).value; //获取输入框的ID 存放到text变量中
          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 != "") {
          if(!result) {
            if (value == this.data.select.tel) {
                this.$message.error('请输入正确联系号码格式')
                return  this.data.telVerify=false;
            }
            if (value == this.data.Member.phone || value == this.data.Member2.phone) {
              // console.log(222);
              return  this.data.telVerify2=false;
            }
          }else{
            if (value == this.data.select.tel) {
                 this.data.telVerify=true;
            }
            if (value == this.data.Member.phone || value == this.data.Member2.phone) {
              // console.log(111);
              return  this.data.telVerify2=true;
            }
          }
        },
        
        init(){
          this.addMemberDialog=false;
          this.data.amendMemberDialog=false
          this.delMember=false

        },
        addMember(){   //添加项目成员
          this.addMemberDialog=true
          for(let i in this.data.Member){
            if(i=='score')this.data.Member[i] = "0"
            else this.data.Member[i] = "";
          }
          // this.data.Member={}   //点开立即清除上次数据
        },
        amendDialogData(val){   //修改项目成员信息对话框显示
          this.data.amendMemberDialog=true
          Object.assign(this.data.Member2,val)
          // console.log(this.data.Member2);
        },
        backBtn1(){  // 上一步
          this.$router.push('/projectApplication')
        },
         
        backBtn(){   // 下一步
            this.next();
        },
        commit(){   //确定添加成员  
              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();
              this.init()
        },
        commit2(){   //确定修改成员
            this.amend(this.rowData)
        },
        commitDelMember(){   //对话框确定删除成员
          let a=this.rowData
          // let _this = this
          this.data.tableData.forEach((item, index, arr)=> {
              if(item.id === a) {
                  arr.splice(index, 1);
                  this.$message.success('删除成功')
                  this.init()
              }
          });
        },
        Del(val){
          this.delMember=true;
          this.rowData=val.id
        },
        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" });
            }
        }
      },

      mounted(){
        // console.log(this.data)
        
      }
    }
</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;
              font-size: 18px;
            }
            .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;
              .btn5{
                font-size: 16px;
              }
            }
          }
}
</style>