safetyEducationExamination/src/views/safetyEducationExaminationNew/examManagement/examinationArrange/studentsTakingMakeUpExams.vue

<!-- 补考人员 -->
<template>
  <div class="page-container studentsTakingMakeUpExams-addPage">
    <div class="page-container-top-max-big-box">
      <p class="top-1-p">补考安排</p>
      <p class="top-2-p" @click="backPage()">返回</p>
      <p class="top-4-p" @click="submitButton()">保存</p>
    </div>
    <div class="content-box">
      <div class="max-add-form-box">
        <el-form class="add-form-box" :model="newData" ref="form" label-width="140px" :rules="rules">
          <div class="form-flex-box">
            <el-form-item label="复用原试卷" prop="data1">
              <el-switch
                :active-value="true"
                :inactive-value="false"
                v-model="newData.data1"
                active-color="#0183FB"
                inactive-color="#AAAAAA"
              >
              </el-switch>
            </el-form-item>
            <p class="checkButton-p" v-if="!newData.data1" style="margin-left:20px;" @click="openPaperDrawer">选择试卷</p>
            <div class="selected-tag" v-if="newData.paperName && !newData.data1">
              <span>{{ newData.paperName }}</span>
              <i class="el-icon-close" @click="newData.paperId = null; newData.paperName = ''"></i>
            </div>
          </div>
          <div class="form-flex-box">
            <el-form-item label="补考时间" prop="dateRange">
              <el-date-picker
                :clearable="false"
                v-model="newData.dateRange"
                size="small"
                style="width: 220px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </div>
          <div class="form-flex-box">
            <el-form-item label="可补考次数" prop="data2">
              <el-input-number
                class="form-input-number"
                style="width:200px"
                :min="1"
                :max="9999"
                :step="1" :precision="0" step-strictly
                v-model="newData.data2"
              >
              </el-input-number>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="page-form-title-box">
        <el-form :model="queryParams" class="form-box" ref="queryForm"
                 :inline="true" style="width:100%;"
        >
          <el-form-item label="" prop="queryParamsData1">
            <el-select v-model="queryParams.queryParamsData1" placeholder="学院单位" style="width: 140px">
              <el-option
                v-for="dict in optionListA"
                :key="dict.deptId"
                :label="dict.deptName"
                :value="dict.deptId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="queryParamsData2">
            <el-select v-model="queryParams.queryParamsData2" multiple placeholder="学年" style="width: 140px">
              <el-option
                v-for="dict in optionListB"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="queryParamsData3">
            <el-select v-model="queryParams.queryParamsData3" placeholder="专业" style="width: 140px">
              <el-option
                v-for="dict in optionListC"
                :key="dict.id"
                :label="dict.disciplineName"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="queryParamsData4">
            <el-input
              maxLength="30"
              v-model="queryParams.queryParamsData4"
              placeholder="姓名/学工号"
              style="width: 140px"
            />
          </el-form-item>
          <el-form-item style="float: right;">
            <export-component :exportConfig="exportConfig"></export-component>
          </el-form-item>
          <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
        </el-form>
      </div>
      <div class="page-content-box">
        <el-table class="table-box" v-loading="loading" border :data="dataList">
          <el-table-column label="姓名" prop="name" show-overflow-tooltip/>
          <el-table-column label="学工号" prop="content" width="140" show-overflow-tooltip/>
          <el-table-column label="专业" prop="content" width="120" show-overflow-tooltip/>
          <el-table-column label="学年" prop="content" width="100" show-overflow-tooltip/>
          <el-table-column label="学院单位" prop="content" width="200" show-overflow-tooltip/>
          <el-table-column label="交卷时间" prop="content" width="140" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime,'{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="用时" prop="content" width="100" show-overflow-tooltip/>
          <el-table-column label="成绩" prop="content" width="100" show-overflow-tooltip/>
          <el-table-column label="结果" prop="content" width="100" show-overflow-tooltip/>
          <el-table-column label="操作" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p"
                   @click="lockExam(scope.row)"
                >查看答卷</p>
                <p class="table-button-null"></p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
    </div>
    <el-drawer
      size="100%"
      custom-class="examinationArrange-addPage-drawer"
      :append-to-body="true"
      :title="drawerTitle"
      ref="drawer"
      :visible.sync="drawer"
      direction="rtl"
    >
      <!--选择试卷/选择试题-->
      <selectTestPaper v-if="drawerType === 1"></selectTestPaper>
      <examDetails v-if="drawerType === 2"></examDetails>
    </el-drawer>
  </div>
</template>

<script>
  import exportComponent from '@/components/exportComponent/exportComponent.vue'
  import examDetails from '@/views/safetyEducationExaminationNew/components/examDetails.vue'
  import selectTestPaper from './selectTestPaper.vue'
  import { examElDisciplineTypeList, systemDeptCurrentDept } from '@/api/safetyEducationExaminationNew/index'

  export default {
    name: 'addPage',
    components: {
      exportComponent,
      selectTestPaper,
      examDetails
    },
    props: {
      propsData: {}
    },
    data() {
      return {
        //页面遮罩
        loading: false,
        newData: {
          data1: true,
          data2: 1,
          paperName: '试卷名称',
          paperId: '2',
          dateRange: [],
        },
        rules:{
          data1: [
            { required: true, message: "是否复用原试卷", trigger: "blur" },
            { required: true, message: "是否复用原试卷", validator: this.spaceJudgment, trigger: "blur" }
          ],
          data2: [
            { required: true, message: "请选择可补考次数", trigger: "blur" },
            { required: true, message: "请选择可补考次数", validator: this.spaceJudgment, trigger: "blur" }
          ],
          dateRange: [
            { required: true, message: "请选择补考时间", trigger: "blur" },
            { required: true, message: "请选择补考时间", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        //下拉列表数据
        optionListA: [],
        optionListB: [],
        optionListC: [],
        //查询条件
        queryParams: {
          page: 1,
          pageSize: 20,
          queryParamsData1: null,
          queryParamsData2: null,
          queryParamsData3: null,
          queryParamsData4: ''
        },
        //列表数据
        dataList: [{}],
        //数据数量
        total: 0,
        exportConfig: {
          api: 'system/user/student/export',              //导出接口地址
          ids: '',                                        //勾选导出,勾选的IDS
          fileName: '导出文件名',                         //导出文件的命名
          customKey: null,                                //自定义参数KEY(非必填)
          customValue: null,                               //自定义参数VALUE(非必填)
          screenData: {}                                  //导出筛选数据(非必要-如有该参数组件会显示导出筛选数据按钮)
        },
        //弹窗相关
        drawerTitle: '',
        drawerType: '',
        drawer: false
      }
    },
    created() {

    },
    mounted() {
      this.examElDisciplineTypeList()
      this.systemDeptCurrentDept()
    },
    methods: {
      //弹窗返回
      drawerReturnButton(){
        this.$refs.drawer.closeDrawer();
      },
      //弹窗确定
      drawerConfirmButton(){
        this.$refs.drawer.closeDrawer();
      },
      openPaperDrawer() {
        // TODO: 打开选择试卷弹窗
        this.$set(this, 'drawerTitle', '选择试卷')
        this.$set(this, 'drawerType', 1)
        this.$set(this, 'drawer', true)
      },
      // 返回按钮
      backPage() {
        this.$parent.tableButton(6)
      },
      // 提交按钮
      submitButton() {

      },
      lockExam(){
        this.$set(this, 'drawerTitle', '试卷详情')
        this.$set(this, 'drawerType', 2)
        this.$set(this, 'drawer', true)
      },
      //查询按钮
      handleQuery() {
        this.$set(this.queryParams, 'page', 1)
        this.getList()
      },
      //重置按钮
      resetQuery() {
        this.$set(this, 'queryParams', {
          page: 1,
          pageSize: 20,
          queryParamsData1: null,
          queryParamsData2: null,
          queryParamsData3: null,
          queryParamsData4: ''
        })
        this.getList()
      },
      //获取数据列表
      getList() {
        this.$set(this, 'loading', true)
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        getListFunction(obj).then(response => {
          this.$set(this, 'loading', false)
          this.$set(this, 'dataList', response.data.records)
          this.$set(this, 'total', response.data.total)
        })
      },
      //查询全部专业类别
      examElDisciplineTypeList() {
        examElDisciplineTypeList({}).then(response => {
          this.$set(this, 'optionListC', response.data)
        })
      },
      //学院列表
      systemDeptCurrentDept() {
        systemDeptCurrentDept({}).then(response => {
          this.$set(this, 'optionListA', response.data)
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .studentsTakingMakeUpExams-addPage {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .content-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .max-add-form-box {
        padding: 20px 0 0 0;
        border-bottom:1px solid #dedede;

        .form-flex-box {
          display: flex;
        }

        .checkButton-p {
          height: 40px;
          background-color: #0183fa;
          color: #ffffff;
          line-height: 40px;
          border-radius: 4px;
          text-align: center;
          width: 80px;
          cursor: pointer;
        }

        .selected-tag {
          height: 40px;
          margin-left: 20px;
          display: inline-flex;
          align-items: center;
          background: #e6f4ff;
          border: 1px solid #91caff;
          border-radius: 4px;
          padding: 6px 12px;
          color: #0183fa;
          font-size: 13px;
          min-width: 200px;
          max-width: 500px;

          span {
            line-height: 28px;
            flex: 1;
          }

          i {
            margin-left: 8px;
            cursor: pointer;

            &:hover {
              color: #e74c3c;
            }
          }
        }
      }
    }
  }
</style>