阅读量:4
<template> <div class="app-container"> <el-form :model="queryParam" ref="queryForm" :inline="true"> <el-form-item label="题目ID："> <el-input v-model="queryParam.id" clearable></el-input> </el-form-item> <el-form-item label="题目内容："> <el-input v-model="queryParam.content" clearable></el-input> </el-form-item> <el-form-item label="年级："> <el-select v-model="queryParam.level" placeholder="年级" @change="levelChange" clearable> <el-option v-for="item in levelEnum" :key="item.key" :value="item.key" :label="item.value"></el-option> </el-select> </el-form-item> <el-form-item label="学科："> <el-select v-model="queryParam.subjectId" clearable> <el-option v-for="item in subjectFilter" :key="item.id" :value="item.id" :label="item.name + ' ( ' + item.levelName + ' )'"></el-option> </el-select> </el-form-item> <el-form-item label="题型："> <el-select v-model="queryParam.questionType" clearable> <el-option v-for="item in questionType" :key="item.key" :value="item.key" :label="item.value"></el-option> </el-select> </el-form-item> <el-form-item> <el-button plain type="primary" @click="submitForm">查询</el-button> <el-popover placement="bottom" trigger="click"> <el-button plain type="warning" size="mini" v-for="item in editUrlEnum" :key="item.key" @click="$router.push({ path: item.value })">{{ item.name }} </el-button> <el-button plain slot="reference" type="primary" class="link-left">添加</el-button> </el-popover> </el-form-item> </el-form> <div class="content"> <muiVideo :src="mySrc" :title="myTitle" :poster="myPoster" @mpVideo="mpVideo"> <div class="topicModel" v-if="showTopic"> <div class="topicModel-content"> <span @click="clickMe">我是视频中的弹窗，点击我触发事件</span> </div> </div> </muiVideo> </div> <el-table :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%"> <el-table-column prop="id" label="Id" width="90px" /> <el-table-column prop="subjectId" label="学科" :formatter="subjectFormatter" width="220px" /> <el-table-column prop="questionType" label="题型" :formatter="questionTypeFormatter" width="70px" /> <el-table-column prop="shortTitle" label="题干" show-overflow-tooltip /> <el-table-column prop="score" label="分数" width="60px" /> <el-table-column prop="difficult" label="难度" width="60px" /> <el-table-column prop="createTime" label="创建时间" width="160px" /> <el-table-column label="操作" align="center" width="220px"> <template slot-scope="{row}"> <el-button plain size="mini" @click="showQuestion(row)">预览</el-button> <el-button plain size="mini" @click="editQuestion(row)">编辑</el-button> <el-button plain size="mini" type="danger" @click="deleteQuestion(row)" class="link-left">删除</el-button> </template> </el-table-column> </el-table> <pagination v-show="total > 0" :total="total" :page.sync="queryParam.pageIndex" :limit.sync="queryParam.pageSize" @pagination="search" /> <el-dialog :visible.sync="questionShow.dialog" style="width: 100%;height: 100%"> <QuestionShow :qType="questionShow.qType" :question="questionShow.question" :qLoading="questionShow.loading" /> </el-dialog> </div> </template> <script> import { mapGetters, mapState, mapActions } from 'vuex' import Pagination from '@/components/Pagination' import QuestionShow from './components/Show' import questionApi from '@/api/question' import muiVideo from '@/components/muiVideo' export default { components: { Pagination, QuestionShow, muiVideo }, data() { return { queryParam: { id: null, questionType: null, level: null, subjectId: null, pageIndex: 1, pageSize: 10 }, subjectFilter: null, listLoading: true, tableData: [], total: 0, questionShow: { qType: 0, dialog: false, question: null, loading: false }, mySrc: "./demo.mp4", //播放路径 myTitle: '测试', //视频左上角标题 myPoster: '', //视频封面 showTopic: false //默认不展示弹题模态窗 } }, created() { this.initSubject() this.search() let _this = this; setTimeout(function () { //模拟3秒后弹出模态窗，实际开发中应该是随机时间弹出 _this.showTopic = true; //展示答题模态窗 setTimeout(function () { //弹出模态窗后做一个延迟效果，暂停播放 _video.pause(); }, 500) }, 3000) }, methods: { clickMe() { console.log("点到我了"); this.showTopic = false; //关闭答题模态窗 }, mpVideo(video) { _video = video; //吐出Video原生媒体实例，其他特殊功能可以使用Video来添加原生事件，例如禁用滚动条、禁用快进快退功能等等 }, submitForm() { this.queryParam.pageIndex = 1 this.search() }, search() { this.listLoading = true questionApi.pageList(this.queryParam).then(data => { const re = data.response this.tableData = re.list this.total = re.total this.queryParam.pageIndex = re.pageNum this.listLoading = false }) }, levelChange() { this.queryParam.subjectId = null this.subjectFilter = this.subjects.filter(data => data.level === this.queryParam.level) }, addQuestion() { this.$router.push('/exam/question/edit/singleChoice') }, showQuestion(row) { let _this = this this.questionShow.dialog = true this.questionShow.loading = true questionApi.select(row.id).then(re => { _this.questionShow.qType = re.response.questionType _this.questionShow.question = re.response _this.questionShow.loading = false }) }, editQuestion(row) { let url = this.enumFormat(this.editUrlEnum, row.questionType) this.$router.push({ path: url, query: { id: row.id } }) }, deleteQuestion(row) { let _this = this questionApi.deleteQuestion(row.id).then(re => { if (re.code === 1) { _this.search() _this.$message.success(re.message) } else { _this.$message.error(re.message) } }) }, questionTypeFormatter(row, column, cellValue, index) { return this.enumFormat(this.questionType, cellValue) }, subjectFormatter(row, column, cellValue, index) { return this.subjectEnumFormat(cellValue) }, ...mapActions('exam', { initSubject: 'initSubject' }) }, computed: { ...mapGetters('enumItem', ['enumFormat']), ...mapState('enumItem', { questionType: state => state.exam.question.typeEnum, editUrlEnum: state => state.exam.question.editUrlEnum, levelEnum: state => state.user.levelEnum }), ...mapGetters('exam', ['subjectEnumFormat']), ...mapState('exam', { subjects: state => state.subjects }) } } </script> <style lang="scss"> .content { width: 500px; height: 300px; margin: 300px auto; } @keyframes fadeIn { 0% { opacity: 0; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } } .topicModel { padding: 0 10px; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9999; background-color: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; animation: fadeIn 0.4s; &-content { width: 60%; height: 60%; background-color: #FFFFFF; } } </style> 
