learning-system-portal/src/components/Course/courseExam.vue

<template>
  <div>
    <div v-if="exam.show==1">
        <div style="padding: 10px; text-align: center;">
          <el-button @click="changeExamShow(3)" type="primary" size="small">自定义考试</el-button>
          <el-button @click="changeExamShow(2)" type="primary" size="small">选择已有考试</el-button>
        </div>
    </div>
    <div v-if="exam.show==2">
        <div  style="display: flex;justify-content: flex-start;">
          <!--需求原型中没有按知识点选择
          <div>
            <el-select v-model="exam.type" style="width: 140px;" clearable placeholder="选择知识点">
            </el-select>
          </div>
          -->
          <div><el-input maxlength="50" placeholder="名称"></el-input></div>
          <div><el-input maxlength="50" placeholder="创建人"></el-input></div>
          <div style="padding-left: 10px;"><el-button type="primary" size="small">搜索已有考试</el-button></div>
        </div>
        <div>
          <div style="text-align: center;padding-top: 10px;">
            <el-table style="100%" :data="exam.findhas.list" border stripe>
              <el-table-column label="考试名称" prop="author"><template>考试名称</template></el-table-column>
              <el-table-column label="创建时间" prop="author">
                <template slot-scope="scope">
                  2022-02-03
                </template>
              </el-table-column>
              <el-table-column label="创建人" prop="content">
                <template>
                   XXX
                </template>
              </el-table-column>
              <el-table-column label="选择" width="80px">
                <template slot-scope="scope">
                    <el-button @click="changeExamShow(9)" type="primary"  size="mini">选择</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!--分页功能-->
          </div>
        </div>
    </div>
    <div v-if="exam.show==3">
        <div style="display: flex;justify-content: space-between;padding:5px 10px;line-height: 30px; border: 1px solid #e7e7e7;">
          <div>自定义考试</div>
          <div>
            <el-checkbox v-model="exam.onlyQuestion">只显示试题</el-checkbox>
            <el-button style="margin-left: 10px;" @click="changeExamShow(1)" type="info" size="mini" >重新选择</el-button>
          </div>
        </div>
        <div style="padding-top: 10px;overflow: auto;">
          <div v-if="!exam.onlyQuestion">
          <el-form size="mini" label-width="80px">
            <el-form-item label="考试名称">
              <el-input v-model="exam.info.name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="考试时长">
              <el-col :span="10">
                <el-input v-model="exam.info.passScore" placeholder="20-120">
                  <template slot="append">分钟</template>
                </el-input>
              </el-col>
              <el-col :span="14">
                <el-form-item label="及格线">
                  <el-input placeholder="20-100">
                    <template slot="append">%</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="显示">
              <el-col :span="10">
                <el-checkbox v-model="exam.info.showJieXi">允许查看解析</el-checkbox>
              </el-col>
              <el-col :span="14">
                <el-checkbox v-model="exam.info.showAnswer">允许查看答案</el-checkbox>
              </el-col>
            </el-form-item>
            <el-form-item label="试题试卷">
              <el-col :span="10">
                <el-checkbox v-model="exam.info.randomType">随机试题</el-checkbox>
              </el-col>
              <el-col :span="14">
                <el-checkbox-group v-model="exam.info.qorder">
                    <el-checkbox :label="1">题目乱序</el-checkbox>
                    <el-checkbox :label="2">选项乱序</el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-form-item>
            <el-form-item label="尝试次数">
              <el-col :span="10">
                <el-input placeholder="0代表不限制"></el-input>
              </el-col>
              <el-col :span="14">
                <el-form-item label="评分方式">
                  <el-radio-group v-model="exam.info.randomType">
                      <el-radio :label="1">最高一次</el-radio>
                      <el-radio :label="2">最后一次</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-form>
          </div>
          <div style="padding: 10px;text-align: center;">
              <el-button type="primary">导入</el-button>
              <el-button type="primary">添加</el-button>
              <el-button @click="changeExamShow(9)" type="primary">提交</el-button>
          </div>
          <div>
              <el-table :data="exam.info.questions" style="100%" border stripe>
                <el-table-column label="题干" prop="body">
                  <template>试题11</template>
                </el-table-column>
                <el-table-column label="设置得分" prop="score" width="80px">
                  <template slot-scope="scope">10</template>
                </el-table-column>
                <el-table-column label="操作" width="80px">
                  <template slot-scope="scope">
                      <el-button icon="el-icon-edit" type="text"  size="mini"></el-button>
                      <el-button icon="el-icon-close" type="text"  size="mini"></el-button>
                  </template>
                </el-table-column>
              </el-table>
           </div>
        </div>
    </div>
    <div v-if="exam.show==9">
        <div style="display: flex;justify-content: space-between;padding:5px 10px;line-height: 30px; border: 1px solid #e7e7e7;">
          <div>考试信息</div><div><el-button @click="changeExamShow(1)" type="info" size="mini" >重新设置考试</el-button> </div>
        </div>
        <div style="padding-top: 10px;">
          <el-form size="mini" label-width="80px">
            <el-form-item label="考试名称">XXXXXXXXXXXXXXX</el-form-item>
            <el-form-item label="考试时长">60分钟</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="试题排列">题目乱序</el-form-item>
            <el-form-item label="评分方式">最高一次</el-form-item>
            <el-form-item label="及格线">60%</el-form-item>
            <el-form-item label="">
              <el-button  type="primary">编辑试卷</el-button>
              <el-button @click="exam.paperShow=true" type="primary">预览试卷</el-button>
            </el-form-item>
          </el-form>
          <div style="color: #ff0000;">只限于自定义考试，才会有编辑试卷</div>
        </div>
    </div>
    <el-dialog title="查看试卷" append-to-body :visible.sync="exam.paperShow" width="800px" custom-class="g-dialog">
          <div>
            <img :src="`${webBaseUrl}/temp/exampaper.png`">
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="exam.paperShow= false">关闭</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
  export default{
    data(){
      return {
        exam:{
          show:1,
          paperShow:false,
          customerShow:false,
          has:false,
          onlyQuestion:false,
          info:{
            name:'',
            limitTimes:1,
            passScore:60,
            showJieXi:true,
            showAnswer:false,
            randomType:1,
            qorder:[],
            examTime:60,
            questions:[
              {body:'试题1',score:10},
              {body:'试题2',score:10}
            ],

          },
          findhas:{
            list:[{},{}]
          }
        },
      }
    },
    methods:{
      changeExamShow(idx){
        this.exam.show=idx;
      }
    }
  }
</script>

<style>
</style>