client_web
/
src
/
views
/
PersonalCenter
/
MyRegistration.vue


			
				
					
						
							
							<template>
  <div class="registration">
    <div class="r-top">
      <div>
        <p>身份证号：{{ studentData.card_num }}</p>
        <p>考生姓名：{{ studentData.name }}</p>
      </div>
    </div>
    <div class="r-main" v-show="showMain">  
      <div class="r-content">
        <el-radio-group
          v-model="radio"
          size="medium"
        >
          <el-radio-button label="考试系列"></el-radio-button>
          <el-radio-button label="我的报名"></el-radio-button>
        </el-radio-group>
      </div>
    
      <el-table
        ref="multipleTable"
        border
        :header-cell-style="headStyle"
        :data="examData"
        v-if="radio=='考试系列'"
      >
        <el-table-column prop="number" label="序号" width="150">
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column prop="exam_name" label="考试名称" width="180">
        </el-table-column>
        <el-table-column prop="series_name" label="考试系列" width="150">
        </el-table-column>
        <el-table-column prop="level_name" label="考试级别" width="120">
        </el-table-column>
        <el-table-column prop="subject_name" label="考试科目" width="150">
        </el-table-column>
        <el-table-column prop="time" label="考试时间" width="120">
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="apply(scope.row)">
              报名
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        ref="multipleTable"
        border
        :header-cell-style="headStyle"
        :data="tableData"
        v-if="radio=='我的报名'"
      >
        <el-table-column prop="number" label="序号" width="150">
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column prop="place_code" label="考试名称" width="120">
        </el-table-column>
        <el-table-column prop="place_name" label="考试系列" width="150">
        </el-table-column>
        <el-table-column prop="place_code" label="考试级别" width="120">
        </el-table-column>
        <el-table-column prop="place_name" label="考试科目" width="150">
        </el-table-column>
        <el-table-column prop="place_code" label="考试时间" width="120">
        </el-table-column>
        <el-table-column prop="place_name" label="报考状态" width="150">
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template>
            <el-button size="mini" type="primary" @click="showMain = false">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-show="(!showMain)&&(radio=='考试系列')">
      <el-form ref="form" :model="form" label-width="180px" status-icon>
        <el-form-item label="姓名：">
          <el-input v-model="studentData.name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="身份证号：">
          <el-input v-model="studentData.card_num" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="考试名称：">
          <el-input v-model="form.exam_name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="考试系列：">
          <el-input v-model="form.series_name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="考试级别：">
          <el-input v-model="form.level_name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="考试科目：">
          <el-input v-model="form.subject_name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="拟报考点：">
          <el-select v-model="form.want_place" placeholder="请选择">
            <el-option label="11" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showMain = true">返回</el-button>
        <el-button @click="submit">提交报名</el-button>
      </span>
      
    </div>

    <div v-show="(!showMain)&&(radio=='我的报名')">
      <el-form ref="form" :model="form" label-width="180px" status-icon>
        <el-form-item label="考试名称：">
          水利工程
        </el-form-item> 
        <el-form-item label="考试系列：">
          水利工程
        </el-form-item>
        <el-form-item label="考试级别：">
          中高级
        </el-form-item>
        <el-form-item label="考试科目：">
          专业理论
        </el-form-item>
        <el-form-item label="拟报考点：">
          -
        </el-form-item>
        <el-form-item label="考试时间：">
          2021
        </el-form-item>
        <el-form-item label="报名状态：">
          已通过
        </el-form-item>
        <el-form-item label="缴费状态：">
          已缴费
        </el-form-item>
        <el-form-item label="考试状态：">
          已完成
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showMain = true">返回</el-button>
      </span>
    </div>

  </div>
</template>

<script>
import {
  getStudentInfo, //个人资料
  getEnableExam, //考试系列
  getMyEnrollList, //我的报名
} from "@/api/home";
export default {
  data() {
    return {
      radio: "考试系列",
      studentData: [],
      examData: [],
      tableData:[],
      form: {},
      showMain: true,
    }
  },
  created() {
    this.getExam();
    this.getStudent();
  },
  methods: {
    // 获取考生个人资料
    async getStudent() {
      let res = await getStudentInfo({
        student_id: 2,
      });

      // 解构数据
      let { code, data } = res;

      // 赋值渲染
      if (code === 200) {
        this.studentData = data.res.student;
      }
    },
    // 获取考试系列数据
    async getExam() {
      let res = await getEnableExam({
        student_id: 2,
      });

      // 解构数据
      let { code, data } = res;

      // 赋值渲染
      if (code === 200) {
        this.examData = data.list;
      }
    },
    // 获取我的报名数据
    async getMyEnroll() {
      let res = await getMyEnrollList({
        student_id: 2,
      });

      // 解构数据
      let { code, data } = res;

      // 赋值渲染
      if (code === 200) {
        this.tableData = data.myEnroll;
      }
    },
    // 报名
    apply(row) {
      this.showMain = false;
      for(let item in this.examData){
        if(row.uuid == this.examData[item].uuid){
          this.form = this.examData[item]
        }
      }
    },
    // 提交报名
    submit(){
      this.showMain = false;
      this.radio = '我的报名';
    },
    // 表格头部样式回调
    headStyle() {
      return "backgroundColor:#ddd;fontSize:14px;color:#666;fontWeight:700";
    },
  }
}
</script>

<style lang="less" scoped>
.registration {
  .r-top {
    background-color: #F6F7F9;
    margin: 10px auto;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    p {
      margin: 20px 0 20px 0;
    }
  }
  .r-main .el-table::before {
    height: 0;
  }
  .r-main .el-table--border, .el-table--group {
    border: 0;
  }
  .el-table--border::after, .el-table--group::after {
    height: 0;
  }
  .r-content {
    margin: 15px auto;
  }
}

</style>

			
				
					
						
							
							@rem
@rem Copyright 2015 the original author or authors.
@rem
@rem Licensed under the Apache License, Version 2.0 (the "License");
@rem you may not use this file except in compliance with the License.
@rem You may obtain a copy of the License at
@rem
@rem      http://www.apache.org/licenses/LICENSE-2.0
@rem
@rem Unless required by applicable law or agreed to in writing, software
@rem distributed under the License is distributed on an "AS IS" BASIS,
@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@rem See the License for the specific language governing permissions and
@rem limitations under the License.
@rem

@if "%DEBUG%" == "" @echo off
@rem ##########################################################################
@rem
@rem  Gradle startup script for Windows
@rem
@rem ##########################################################################

@rem Set local scope for the variables with windows NT shell
if "%OS%"=="Windows_NT" setlocal

set DIRNAME=%~dp0
if "%DIRNAME%" == "" set DIRNAME=.
set APP_BASE_NAME=%~n0
set APP_HOME=%DIRNAME%

@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"

@rem Find java.exe
if defined JAVA_HOME goto findJavaFromJavaHome

set JAVA_EXE=java.exe
%JAVA_EXE% -version >NUL 2>&1
if "%ERRORLEVEL%" == "0" goto init

echo.
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
echo.
echo Please set the JAVA_HOME variable in your environment to match the
echo location of your Java installation.

goto fail

:findJavaFromJavaHome
set JAVA_HOME=%JAVA_HOME:"=%
set JAVA_EXE=%JAVA_HOME%/bin/java.exe

if exist "%JAVA_EXE%" goto init

echo.
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
echo.
echo Please set the JAVA_HOME variable in your environment to match the
echo location of your Java installation.

goto fail

:init
@rem Get command-line arguments, handling Windows variants

if not "%OS%" == "Windows_NT" goto win9xME_args

:win9xME_args
@rem Slurp the command line arguments.
set CMD_LINE_ARGS=
set _SKIP=2

:win9xME_args_slurp
if "x%~1" == "x" goto execute

set CMD_LINE_ARGS=%*

:execute
@rem Setup the command line

set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar

@rem Execute Gradle
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%

:end
@rem End local scope for the variables with windows NT shell
if "%ERRORLEVEL%"=="0" goto mainEnd

:fail
rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
rem the _cmd.exe /c_ return code!
if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
exit /b 1

:mainEnd
if "%OS%"=="Windows_NT" endlocal

:omega