ssti-CollegeManage/src/views/activityManage/makerActvityApply.vue

<template>
  <!-- 创客创新-活动申请基础信息表单 -->
    <div class="makerActvityApplyPAapply">
      <div class="pAmid">
        <!-- 左边栏导航区开始 -->
        <div class="left">
            <div class="sx">
              <div class="qiu"></div>
            </div>
            <div class="leftTits">
              <span @click="toPage(1)">活动信息填写</span>
              <span @click="toPage(2)">活动指导老师</span>
              <span @click="toPage(3)">活动介绍</span>
              <span @click="toPage(4)">下一步</span>
            </div>
        </div>
      <!-- 左边导航区结束 -->

        <!-- 右边填写信息区域开始 -->
        <div class="right">
              <div id="a" class="vfpHeader">
                  <div class="titleOne">创客创新-活动申请</div>
                  <el-button type="primary" @click="$router.back()">返回</el-button>
              </div>
              <hr>

              
              <!-- 活动申请填写信息区域开始 -->
                  <div class="select">
                    <div class="selectTop">
                      <div class="label">活动名称</div>
                      <el-input v-model="data.select.activityName" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="selectMid">
                      <div class="selectLeft">
                          <div class="inpBlock">
                              <div class="label">所属项目</div>
                              <el-select v-model="data.select.pid" style="width: 100%;" placeholder="请选择">
                                <el-option
                                  v-for="item in data.project"
                                  :key="item.courseId"
                                  :label="item.title"
                                  :value="item.courseId">
                                </el-option>
                              </el-select>
                          </div>
                          <div class="inpBlock">
                              <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-input v-model="data.select.leader" 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.class"
                                  :key="item.id"
                                  :label="item.name"
                                  :value="item.id">
                                </el-option>
                              </el-select>
                          </div>

                      </div>

                      <div class="selectRight">
                        <div class="inpBlock">
                              <div class="label">活动时间</div>
                              <!-- <el-date-picker
                                v-model="data.select.time"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                style="width: 100%;"
                                placeholder="选择日期">
                              </el-date-picker> -->
                              <el-date-picker
                                v-model="data.select.time"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                style="width: 100%;"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                              </el-date-picker>
                          </div>
                          <div class="inpBlock">
                              <div class="label">参加学生人数</div>
                              <el-input type="number" v-model.number="data.select.people" placeholder="请输入内容"></el-input>
                          </div>
                          <div class="inpBlock">
                              <div class="label">联系电话</div>
                              <el-input v-model="data.select.tel" @blur="checkPhone(data.select.tel)" placeholder="请输入内容"></el-input>
                          </div>
                          
                      </div>
                    </div>
                   
              </div>
              <!-- 活动申请填写信息区域结束 -->

              <!-- 活动指导老师开始 -->
              <div id="s" class="tabTit">
                  <div><p>活动指导老师</p></div>
                  <el-button type="primary" @click="addTeacher"  size="mini">添加教师</el-button>
              </div>
              <hr>
              <el-table
                :data="data.select.teacher"
                tooltip-effect="dark"
                stripe
                class="fontSize"
                :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
                >
              
                <el-table-column
                  prop="Name"
                  label="姓名"
                  align="center"
                  >
                </el-table-column>
                <el-table-column
                  prop="work"
                  label="工作单位"
                  align="center"
                  >
                </el-table-column>
  
                <el-table-column
                  prop="takeCharge"
                  label="活动分工"
                  align="center"
                  >
                </el-table-column>
               
                <el-table-column
                  prop="operation"
                  align="center"
                  label="操作"
                  >
                  <template #default="scope">
                      <div class="operations">
                              <el-button type="primary" size="mini" @click="updateTeacher(scope.$index)">修改</el-button>
                              <el-button type="primary" size="mini" @click="deleteRow(scope.$index)">删除</el-button>
                      </div>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 活动指导老师结束 -->

            <!-- 活动介绍区域开始 -->
            <div id="d" class="tabTit">
                  <div><p>活动介绍</p></div>
            </div>
            <hr>
            <div class="textArea">
              <el-input
                type="textarea"
                :rows="6"
                resize="none"
                class="textArea"
                placeholder="请输入内容"
                v-model="data.select.introduce">
              </el-input>
            </div>
            <!-- 活动介绍区域结束 -->


            <div id="f" class="baseBtn">
              <div class="blockWidth">
                <el-button type="primary"  @click="backBtn1" size:small>上一步</el-button>
                <el-button type="primary"  @click="next()" size:small>下一步</el-button>
              </div>
            </div>
        </div>
        <!-- 右边填写信息区域结束 -->
      </div>
  
        <!--添加成员dialog对话框开始 -->
         <el-dialog
            :title="isAddTeacher?'添加指导老师':'修改指导老师'"
            :visible.sync="addMemberDialog"
            class="AddMember"
            :before-close="handleClose">

              <div class="littleBlock">
                <div class="dialogLabel">姓名</div>
                <div>
                  <el-input v-model="Member.Name"></el-input>
                </div>
              </div>

              <div class="littleBlock">
                <div class="dialogLabel">工作单位</div>
                <div>
                  <el-input v-model="Member.work"></el-input>
                </div>
              </div>

              <div class="littleBlock">
                <div class="dialogLabel">活动分工</div>
                <div>
                  <el-input v-model="Member.takeCharge"></el-input>
                </div>
              </div>
              <div slot="footer" class="footer">
                <el-button v-if="isAddTeacher" type="primary" @click="commit" class="diaBtn" size="small">确认提交</el-button>
                <el-button v-if="!isAddTeacher"  type="primary" @click="change" class="diaBtn" size="small">确认修改</el-button>
                <el-button @click="handleClose" class="diaBtn" size="small">取消</el-button>
              </div>
        </el-dialog>
      <!--添加成员dialog对话框结束 -->


    </div>
      
  </template>
  
  <script>
      export default {
        props:["next","data","checkPhone"],
        data() {
          return {
            addMemberDialog:false,
            Member:{
              Name:'',
              work:'',
              takeCharge:''
            },
            isAddTeacher:true,
          }
        },
        methods:{
          handleSelectionChange(val) {
            this.multipleSelection = val;
          },
          
          addTeacher(){
              this.addMemberDialog=true;
          },
          backBtn1(){
            this.$router.push('/makerActvity')
          },
          commit(){
            //判断是否全部填写
            for(let a in this.Member)if(/^\s*$/g.test(this.Member[a]))return this.$message.error("请不要留空")
            let pushData={};
            Object.assign(pushData,this.Member)
            this.data.select.teacher.push(pushData);
            for(let i in this.Member)this.Member[i] = '';
            this.addMemberDialog=false;
            this.$message({
              message:"添加成功",
              type:"success"
            });
            this.isAddTeacher = true;
          },
          change(){
            if(this.isAddTeacher)return this.$message.error("错误");
            for(let a in this.Member)if(/^\s*$/g.test(this.Member[a]))return this.$message.error("请不要留空")
            Object.assign(this.data.select.teacher[this.Member.index],this.Member)
            for(let i in this.Member)this.Member[i]='';
            this.addMemberDialog = false;
            this.isAddTeacher = true;
          },
          handleClose(){
            for(let i in this.Member)this.Member[i] = '';
            this.addMemberDialog=false;
            this.isAddTeacher = true;
          },
          updateTeacher(index){
            Object.assign(this.Member,this.data.select.teacher[index]);
            this.Member['index'] = index;
            this.isAddTeacher = false;
            this.addMemberDialog = true;
          },
          deleteRow(index){
            this.data.select.teacher.splice(index,1);
            this.$message({message:"删除成功",type:"success"})
          },
          toPage(val){
            if (val==1) {
              document.getElementById("a").scrollIntoView({ behavior: "smooth" });
            }else if(val==2){
              document.getElementById("s").scrollIntoView({ behavior: "smooth" });
            }else if(val==3){
              document.getElementById("d").scrollIntoView({ behavior: "smooth" });
            }else if(val==4){
              document.getElementById("f").scrollIntoView({ behavior: "smooth" });
            }
          }
        },
      }
  </script>
  
  <style lang="less">
  .makerActvityApplyPAapply{
      width: 100%;
      position: relative;
    }


  </style>