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.fund" placeholder="请输入内容"></el-input>
                          </div>
                          <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.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                              </el-select>
                          </div>
                          <div class="inpBlock">
                              <div class="label">联系电话</div>
                              <el-input v-model="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="date"
                                style="width: 100%;"
                                placeholder="选择日期">
                              </el-date-picker>
                          </div>
                          <div class="inpBlock">
                              <div class="label">预算总经费</div>
                              <el-input v-model="data.select.fund" placeholder="请输入内容"></el-input>
                          </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.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                              </el-select>
                          </div>
                      </div>
                    </div>
                   
              </div>
              <!-- 活动申请填写信息区域结束 -->



            <!-- <div> -->
  <!-- 项目成员表格开始 -->
              <div id="two" class="tabTit">
                <div id="face"><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="tel"
                  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)" size="mini">修改</el-button>
                              <el-button type="primary" @click="Del(scope)" 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="data.DialogStatus?'添加成员':'修改成员'"
          :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 v-model="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对话框结束 -->
         

    </div>
  
</template>

<script>

    export default {
      props:["data","next",'back','addPerson','amend'],
      data() {
        return {
          input:"",
          addMemberDialog:false,
        }
      },
      methods:{
        init(){
          this.addMemberDialog=false
        },
        addMember(){   //添加项目成员
          this.addMemberDialog=true
          this.data.DialogStatus=1;
        },
        amendDialogData(val){   //修改项目成员信息
            this.addMemberDialog=true
            this.data.DialogStatus=0;
            
        },
        
        backBtn1(){  // 上一步
          this.$router.push('/projectApplication')
        },
         
        backBtn(){   // 下一步
            this.next();
        },
        commit(){   //确定添加成员
            if (this.data.DialogStatus) {
              this.addPerson();
              this.addMemberDialog=false
              return
            }else{
              this.amend()
              this.addMemberDialog=false
            }
        },
        Del(){
          
        },
        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" });
            }
        }
      },
      
      created(){
        // this.value=(this.options[0].value)
      },
      mounted(){
        // console.log(this.data)
        
      }
    }
</script>

<style lang="less">

.projectApplicationApply{
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;

        // 右边栏标题
        .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;
            }
        }
}
</style>