feat:增加考试导入考生，页面按钮限制条件

src/modules/exam/api.js

@@ -71,3 +71,17 @@ export function getTranserList(params) {
 export function transferStudent(data) {
   return httpRequest.post('/api/exam/v1/exam/transfer-student', data)
 }
+
+/**
+ * 考试导入考生
+ */
+export function importStudent(data) {
+  return httpRequest({
+    url: '/api/exam/v1/exam/student-import',
+    method: 'post',
+    headers: { 'Content-Type': 'multipart/form-data' },
+    timeout: 900000,
+    data,
+    withCredentials: true
+  })
+}

src/modules/exam/components/BaseInfo.vue

@@ -17,13 +17,17 @@
     </el-row>
     <el-row :span="24" class="row_margin">
       <el-checkbox v-model="config.enabled_before">提前登录 </el-checkbox>
-      开考前<el-input v-model="config.before_login" class="input_time"></el-input
+      开考前<el-input
+        v-model="config.before_login"
+        class="input_time"
+        :disabled="config.enabled_before === false"
+      ></el-input
       >分钟，考生可以登录系统，确认信息。（开考最多60分钟提前登录）
     </el-row>
     <el-row :span="24" class="row_margin">
-      <el-checkbox v-model="config.$emitenabled_after">限制结束 </el-checkbox>
+      <el-checkbox v-model="config.enabled_after">限制结束 </el-checkbox>
       开考后
-      <el-input v-model="config.after_login" class="input_time"></el-input
+      <el-input v-model="config.after_login" class="input_time" :disabled="config.enabled_after === false"></el-input
       >分钟，不允许考生入场，考中退出的考生不受此影响。
     </el-row>
     <el-row :span="24" class="row_margin">
@@ -148,12 +152,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.baseInfo_content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
 .btn_next {
   margin-top: 20px;
   text-align: right;

src/modules/exam/components/CheckPaper.vue

@@ -8,10 +8,10 @@
       :filterMethod="filterMethod"
     >
     </el-transfer>
-    <el-row style="margin-top: 20px">
-      <div class="paper_desc">考生的试卷会从以上已选的试卷中随机抽取</div>
-      <div class="paper_desc">考试开始两个小时前，可以对试卷进行替换</div>
-    </el-row>
+    <ul style="margin-top: 20px">
+      <li class="paper_desc">考生的试卷会从以上已选的试卷中随机抽取</li>
+      <li class="paper_desc">考试开始两个小时前，可以对试卷进行替换</li>
+    </ul>
     <el-row class="btn_next">
       <el-button type="primary" v-if="$route.query.isEdit === '2'" @click="saveExamInfo">保存</el-button>
       <div v-if="isEdit === '1'">
@@ -106,8 +106,15 @@ export default {
   text-align: right;
   margin-top: 20px;
 }
-.paper_desc {
-  font-size: 16px;
-  color: #c01c40;
+
+ul {
+  margin-left: 20px;
+  li {
+    list-style-type: disc;
+  }
+  .paper_desc {
+    font-size: 16px;
+    color: #c01c40;
+  }
 }
 </style>

src/modules/exam/components/ExamSetting.vue

@@ -10,6 +10,7 @@
               v-model="config.ip_limits"
               placeholder="如允许多个IP地址，请用逗号隔开"
               style="width: 230px"
+              :disabled="config.enabled_ip_limit === false"
             ></el-input>
             您当前所在网络的IP地址是：172.20.1.1</span
           >
@@ -25,11 +26,27 @@
       <el-row>
         考试中:<el-checkbox v-model="config.enabled_lock" style="margin-left: 20px">锁定考试 </el-checkbox>
         <div style="margin-left: 120px">
-          记录考生登录考试次数，只允许登录<el-input style="width: 100px" v-model="config.max_login_times"></el-input>次
+          记录考生登录考试次数，只允许登录<el-input
+            style="width: 100px"
+            v-model="config.max_login_times"
+            :disabled="config.enabled_lock === false"
+          ></el-input
+          >次
           <div>当登录考试次数超过限定次数，系统会阻止考生登录考试</div>
-          <el-checkbox v-model="config.enabled_web_login">网页考试</el-checkbox>
-          记录考生离开考试页面次数，每超过<el-input v-model="config.leave_interval" style="width: 100px"></el-input
-          >秒计为离开1次，只允许离开<el-input style="width: 100px" v-model="config.max_leave_times"></el-input>次
+          <el-checkbox v-model="config.enabled_web_login" :disabled="config.enabled_lock === false"
+            >网页考试</el-checkbox
+          >
+          记录考生离开考试页面次数，每超过<el-input
+            v-model="config.leave_interval"
+            style="width: 100px"
+            :disabled="config.enabled_web_login === false"
+          ></el-input
+          >秒计为离开1次，只允许离开<el-input
+            style="width: 100px"
+            v-model="config.max_leave_times"
+            :disabled="config.enabled_web_login === false"
+          ></el-input
+          >次
           <div>当登录考试次数超过限定次数，系统会阻止考生登录考试</div>
         </div>
       </el-row>

src/modules/exam/components/importStudent.vue

+<template>
+  <el-dialog v-bind="$attrs" v-on="$listeners">
+    <el-upload
+      style="text-align: center"
+      class="file-import"
+      ref="upload"
+      action="#"
+      :auto-upload="false"
+      :file-list="fileList"
+      :limit="1"
+      :before-upload="beforeUpload"
+      :http-request="fetchFileUpload"
+      accept=".xls,.xlsx"
+      drag
+    >
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+    </el-upload>
+    <div style="text-align: center">
+      <el-button size="mini" @click="cancel">取消</el-button>
+      <el-button type="primary" size="mini" @click="submitUpload" style="margin-right: 5px"> 确认提交</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { splitStrLast } from '@/utils/util'
+import { importStudent } from '../api'
+export default {
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      fileList: []
+    }
+  },
+  methods: {
+    beforeUpload(file) {
+      const suffix = splitStrLast(file.name, '.')
+      if (!['xlsx', 'xls'].includes(suffix)) {
+        this.$message.error('只能上传excel文件')
+        return false
+      } else {
+        return true
+      }
+    },
+    fetchFileUpload(data) {
+      importStudent({ file: data.file, exam_id: this.id }).then(res => {
+        if (res.code === 0) {
+          this.$message.success('导入数据成功')
+          history.go(-1)
+        }
+      })
+    },
+    submitUpload() {
+      this.$refs.upload.submit()
+    },
+    cancel() {
+      this.$router.push({
+        name: 'teacher'
+      })
+    }
+  }
+}
+</script>

src/modules/exam/views/CreateStudent.vue

 <template>
-  <el-form ref="form" :model="form" label-width="80px" :label-position="labelPosition" :rules="rules">
-    <el-form-item label="姓名" prop="name">
-      <el-input v-model="form.name" placeholder="请输入姓名" />
-    </el-form-item>
-    <el-form-item label="身份证号" prop="id_number">
-      <el-input v-model="form.id_number" placeholder="请输入身份证号" />
-    </el-form-item>
-    <el-form-item label="性别" prop="gender">
-      <el-select v-model="form.gender">
-        <el-option label="男" :value="1"></el-option>
-        <el-option label="女" :value="2"></el-option>
-      </el-select>
-      <!-- <el-input v-model="form.gender" placeholder="请输入性别" /> -->
-    </el-form-item>
-    <el-form-item label="学校" prop="school">
-      <el-input v-model="form.school" placeholder="请输入学校" />
-    </el-form-item>
-    <el-form-item label="电话" prop="mobile">
-      <el-input v-model="form.mobile" placeholder="请输入电话" />
-    </el-form-item>
+  <el-card class="createList">
+    <div slot="header" class="clearfix">
+      <span>添加考生</span>
+      <el-dropdown split-button size="small" style="float: right; margin-bottom: 20px">
+        批量导入考生
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item @click.native="dialogVisible = true">考生导入</el-dropdown-item>
+          <el-dropdown-item>
+            <a href="https://webapp-pub.ezijing.com/qbs/student.xlsx" download="student.xlsx"
+              >模版下载</a
+            ></el-dropdown-item
+          >
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+    <el-form ref="form" :model="form" label-width="80px" :label-position="labelPosition" :rules="rules">
+      <el-form-item label="姓名" prop="name">
+        <el-input v-model="form.name" placeholder="请输入姓名" style="width: 400px" />
+      </el-form-item>
+      <el-form-item label="身份证号" prop="id_number">
+        <el-input v-model="form.id_number" placeholder="请输入身份证号" style="width: 400px" />
+      </el-form-item>
+      <el-form-item label="性别" prop="gender">
+        <el-select v-model="form.gender">
+          <el-option label="男" :value="1"></el-option>
+          <el-option label="女" :value="2"></el-option>
+        </el-select>
+        <!-- <el-input v-model="form.gender" placeholder="请输入性别" /> -->
+      </el-form-item>
+      <el-form-item label="学校" prop="school">
+        <el-input v-model="form.school" placeholder="请输入学校" style="width: 400px" />
+      </el-form-item>
+      <el-form-item label="电话" prop="mobile">
+        <el-input v-model="form.mobile" placeholder="请输入电话" style="width: 400px" />
+      </el-form-item>
 
-    <el-form-item prop="examinee_number">
-      <el-checkbox label="自定义准考证号" v-model="isChecked"></el-checkbox>
-      <el-input v-model="form.examinee_number" placeholder="不超过20个字母必填" v-if="isChecked === true" />
-    </el-form-item>
-    <el-form-item>
-      <el-row style="margin-top: 30px">
-        <el-button type="primary" @click="handleSubmit">保存</el-button>
-      </el-row>
-    </el-form-item>
-  </el-form>
+      <el-form-item prop="examinee_number">
+        <el-checkbox label="自定义准考证号" v-model="isChecked"></el-checkbox>
+        <el-input
+          v-model="form.examinee_number"
+          placeholder="不超过20个字母必填"
+          v-if="isChecked === true"
+          style="width: 400px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-row style="margin-top: 30px">
+          <el-button type="primary" @click="handleSubmit">保存</el-button>
+        </el-row>
+      </el-form-item>
+    </el-form>
+    <import-student :visible.sync="dialogVisible" :id="id" />
+  </el-card>
 </template>
 
 <script>
 import { addStudent } from '../api'
+import importStudent from '../components/importStudent.vue'
 export default {
+  components: { importStudent },
   data() {
     return {
+      dialogVisible: false,
       isChecked: false,
       labelPosition: 'left',
       btnDisabled: false,
@@ -66,6 +91,7 @@ export default {
     }
   },
   methods: {
+    // 添加考生
     handleSubmit() {
       this.$refs.form.validate(valid => {
         if (valid) {
@@ -89,4 +115,9 @@ export default {
   padding-left: 15px;
   text-align: left;
 }
+// .createList {
+//   display: flex;
+//   justify-content: space-between;
+//   align-items: flex-start;
+// }
 </style>

src/modules/exam/views/Detail.vue

@@ -10,11 +10,19 @@
             <el-dropdown-item @click.native="editInfo">信息采集编辑</el-dropdown-item>
             <el-dropdown-item @click.native="editExamSetting">考试配置编辑</el-dropdown-item>
             <el-dropdown-item @click.native="copyExamUrl">复制考试地址</el-dropdown-item>
-            <el-dropdown-item @click.native="dialogVisible = true">转移考生</el-dropdown-item>
-            <el-dropdown-item @click.native="exportDetail">导出明细</el-dropdown-item>
-            <el-dropdown-item @click.native="delStudent">删除考生</el-dropdown-item>
+            <el-dropdown-item @click.native="dialogVisible = true" :disabled="this.multipleSelection.length === 0"
+              >转移考生</el-dropdown-item
+            >
+            <el-dropdown-item @click.native="exportDetail" :disabled="this.multipleSelection.length === 0"
+              >导出明细</el-dropdown-item
+            >
+            <el-dropdown-item @click.native="delStudent" :disabled="this.multipleSelection.length === 0"
+              >删除考生</el-dropdown-item
+            >
             <el-dropdown-item @click.native="handleAddStudent">添加考生</el-dropdown-item>
-            <el-dropdown-item @click.native="sendMessage">发送成绩信息</el-dropdown-item>
+            <el-dropdown-item @click.native="sendMessage" :disabled="this.multipleSelection.length === 0"
+              >发送成绩信息</el-dropdown-item
+            >
           </el-dropdown-menu>
         </el-dropdown>
       </div>

src/utils/util.js

+/**
+ * 文件下载
+ * @param {string} fileUrl 文件下载地址
+ * @param {string} fileName 文件名
+ * @returns {null}
+ */
+export function funDownload(fileUrl, fileName) {
+  // console.log(fileUrl)
+  const elink = document.createElement('a') // 创建一个a标签
+  elink.download = fileName // 设置a标签的下载属性
+  elink.style.display = 'none' // 将a标签设置为隐藏
+  elink.href = fileUrl // 把之前处理好的地址赋给a标签的href
+  document.body.appendChild(elink) // 将a标签添加到body中
+  elink.click() // 执行a标签的点击方法
+  // URL.revokeObjectURL(elink.href) // 下载完成释放URL 对象
+  document.body.removeChild(elink) // 移除a标签
+}
+/**
+ * 分割字符串，取得尾部
+ * @param {string} str 字符串
+ * @param {string} split 分割符
+ * @returns {string}
+ */
+export function splitStrLast(str, split) {
+  const fileNameArr = str.split(split)
+  const last = fileNameArr[fileNameArr.length - 1]
+  return last
+}