ssti-CollegeManage/src/views/ProjectManagement3_1.vue

<template>
    <div class="ProjectManagement3_1">
      <div class="pA1Header">
      <!-- 详情页 -->
        <div style="display: flex;width: 400px;">
          <div class="pAHeader1">项目管理</div>
          <span class="pAHeader1STit">项目进展详情</span>
        </div>
    </div>
      <hr>
         <!-- 跳转导航开始 -->
         <div class="AppBar" style="position: relative;">
            <div @click="content">项目基本内容</div>
            <div @click="remark">项目详情</div>
            <div @click="remark2" class="AppBarActive">活动开展</div>
            <div @click="remark4">项目附件</div>
            <div @click="remark5">项目结题附件</div>
            <el-button type="primary" style="position: absolute;right: 15%;top: -5px; width: 90px;font-size: 16px;" 
            @click="$router.back()"
             size="mini">返回</el-button>
          </div>
          <!-- 跳转导航结束 -->

     <!-- 活动申请填写信息区域开始 -->
      <div class="select">
                <div class="selectTop">
                  <div class="label">项目名称</div>
                  <el-input v-model="input" placeholder="请输入内容"></el-input>
                </div>
                <div class="selectMid">
                  <div class="selectLeft">
                      <div class="inpBlock" style="position: relative;">
                          <div class="label">预算经费</div>
                          <el-input v-model="input" placeholder="请输入内容"></el-input>
                          <div style="position: absolute;top: 8px;right: -30px;">(万)</div>
                      </div>
                      <div class="inpBlock">
                          <div class="label">负责人</div>
                          <el-input v-model="input" placeholder="请输入内容"></el-input>
                      </div>
                      <div class="inpBlock">
                          <div class="label">所在部门</div>
                          <el-select v-model="input" style="width: 100%;" placeholder="请选择">
                            <el-option
                              v-for="item in 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="input" placeholder="请输入内容"></el-input>
                      </div>
                  </div>

                  <div class="selectRight">
                    <div class="inpBlock">
                          <div class="label">项目开始时间</div>
                          <el-date-picker
                            v-model="value"
                            type="date"
                            style="width: 100%;"
                            placeholder="选择日期">
                          </el-date-picker>
                      </div>
                      <div class="inpBlock">
                          <div class="label">预算总经费</div>
                          <el-input v-model="input" placeholder="请输入内容"></el-input>
                      </div>
                      
                  </div>
                </div>
      </div>
      <!-- 活动申请填写信息区域结束 -->



      <!-- 指导老师开始 -->
      <div class="tabTit">
        <div class="MA1HeadTit">
          活动指导老师
        </div>
        <el-button type="primary" @click="addMember" size="mini">添加教师</el-button>
      </div>
      <hr>
      <el-table
        :data="tableData"
        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="className"
          label="工作单位"
          align="center"
          >
        </el-table-column>

        <el-table-column
          prop="division"
          label="活动分工"
          align="center"
          >
        </el-table-column>

        <el-table-column
          prop="operation"
          align="center"
          label="操作"
          >
          <!-- <template #default="scope"> -->
              <div class="operations">
                      <el-button type="primary" class="bt1" size="mini" style="background: #477edd">查看详情</el-button>
              </div>
          <!-- </template> -->
        </el-table-column>
      </el-table>
      <!-- 指导老师结束 -->

    <!-- 多行文本框区域开始 -->
      <div class="tabTit">
            活动介绍
      </div>
      <div class="textArea">
        <el-input
          type="textarea"
          :rows="6"
          class="textArea"
          resize="none"
          placeholder="请输入内容"
          v-model="textarea">
        </el-input>
      </div>
      <div class="tabTit">
            活动计划
      </div>
      <div class="textArea">
        <el-input
          type="textarea"
          :rows="6"
          class="textArea"
          resize="none"
          placeholder="请输入内容"
          v-model="textarea">
        </el-input>
      </div>
      <div class="tabTit">
            预期目标
      </div>
      <div class="textArea">
        <el-input
          type="textarea"
          :rows="6"
          resize="none"
          class="textArea"
          placeholder="请输入内容"
          v-model="textarea">
        </el-input>
      </div>
      <div class="tabTit">
            活动受面
      </div>
      <div class="textArea">
        <el-input
          type="textarea"
          :rows="6"
          class="textArea"
          resize="none"
          placeholder="请输入内容"
          v-model="textarea">
        </el-input>
      </div>
      <div class="tabTit">
            经费支出计划
      </div>
      <div class="textArea">
        <el-input
          type="textarea"
          :rows="6"
          class="textArea"
          resize="none"
          placeholder="请输入内容"
          v-model="textarea">
        </el-input>
      </div>
    <!-- 多行文本框区域结束 -->


     <!--添加成员dialog对话框开始 -->
      <el-dialog
          title="添加成员"
          :visible.sync="addMemberDialog"
          :modal="false"
          :close-on-click-modal="false"
          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.className"></el-input>
              </div>
            </div>

            <div class="littleBlock">
              <div class="dialogLabel">电话</div>
              <div>
                <el-input v-model="Member.Division"></el-input>
              </div>
            </div>
            <div slot="footer" class="footer">
              <el-button @click="commit" class="diaBtn" style="background: #0e72e6;color: #fff;" size="small">确认提交</el-button>
              <el-button @click="handleClose" class="diaBtn" style="background: #cccccc;color: #000;" size="small">取消</el-button>
            </div>
      </el-dialog>
      <!--添加成员dialog对话框结束 -->
    </div>
</template>

  <script>
      export default {
        data() {
          return {
          addMemberDialog:false,
          textarea:'',
            options: [{
              value: '选项1',
              label: '中德学院'
            }],
            Member:{
              name:'袁一鸣',
              className:'21通信',
              Division:'ui'
          },
            value: '中德学院',
           input:'',
            tableData:[{
              Name:'徐晓慧',
              className:'22电子通信G5',
              division:'前端',
            },
            {
              Name:'林凡文',
              className:'22电子通信G5',
              division:'后端',
            },
            ],
          }
        },
        methods:{
          handleClose(){
          this.addMemberDialog=false
        },
        addMember(){
          this.addMemberDialog=true
         
        },
          commit(){
          this.addMemberDialog=false;
          let { name: Name, className: className, Division:division } = this.Member;
          let data={Name,className,division};
          this.tableData.push(data);
        },
          content(){
            this.$router.push('/ProjectManagement1')
          },
          remark(){
            this.$router.push('/ProjectManagement2')
          },
          remark2(){
            this.$router.push('/ProjectManagement3')
          },
          remark4(){
            this.$router.push('/ProjectManagement4')
          },
          remark5(){
            this.$router.push('/ProjectManagement5')
          },
          edit(){
  
          },
          backBtn2(){
            this.$router.push('/ProjectManagement1')
          },
          handleSelectionChange(val) {
            this.multipleSelection = val;
          },
         
        },
        created(){
          // this.value=(this.options[0].value)
        }
      }
  </script>

  <style lang="less">

  </style>