Files
UNION_HUTB/target/classes/views/platform/hd/zxdt/papers.html
T
2026-09-09 09:14:28 +08:00

665 lines
32 KiB
HTML

<!--#
layout("/layouts/platform.html"){
#-->
<!-- 在线答题-试卷管理 -->
<style>
#qsmEditor .w-e-text-container {
height: 450px !important;
}
#qsmEditor div {
z-index: 0 !important;
}
.el-divider {
background-color: #409EFF;
}
.el-divider__text {
color: #409EFF;
}
.inputParent input {
border: none;
border-bottom: 1px solid rgb(220, 223, 230);
border-radius: 0;
}
.issueList > .el-table__header-wrapper {
display: none;
}
.issueList .el-table__expanded-cell {
background-color: rgb(250, 250, 250) !important;
}
</style>
<div id="app" v-cloak>
<el-row class="transition-row">
<transition name="el-zoom-in-center">
<div v-show="v=='index'" class="transition-item">
<el-row class="header navbar bg-white shadow">
<div class="btn-group tool-button mt5">
<el-input placeholder="请输入内容" v-model="pageForm.searchKeyword">
<template slot="prepend">试卷名称</template>
</el-input>
</div>
<div class="btn-group tool-button mt5">
<el-button icon="el-icon-search" @click="doSearch"
style="background-color:#409eff;color: white;"></el-button>
</div>
<div class="pull-right offscreen-right mt5">
<el-button size="medium" type="primary" plain @click="openAdd"><i class="ti-plus"></i>新建试卷
</el-button>
</div>
</el-row>
<el-row class="el-table-container">
<el-table :data="tableData" size="medium" header-align="center" align="center" style="width: 100%">
<el-table-column
label="序号" type="index" header-align="center" align="center">
<template scope="scope">
<span>{{scope.$index+(pageForm.pageNumber - 1) * pageForm.pageSize + 1}} </span>
</template>
</el-table-column>
<el-table-column prop="name" label="试卷名称" header-align="center"
align="center"></el-table-column>
<el-table-column prop="explain_txt" label="说明" show-overflow-tooltip header-align="center"
align="center">
<template scope="scope">
<span v-html="scope.row.explain_txt"></span>
</template>
</el-table-column>
<el-table-column prop="answer_start_time" label="答题时间" header-align="center" align="center">
<template scope="scope">
<span>{{scope.row.answer_start_time}}-{{scope.row.answer_end_time}}</span>
</template>
</el-table-column>
<el-table-column prop="answer_num" label="答题次数" header-align="center"
align="center"></el-table-column>
<el-table-column prop="fraction" label="分值" header-align="center"
align="center"></el-table-column>
<el-table-column prop="create_time" label="创建时间" header-align="center"
align="center"></el-table-column>
<el-table-column align="center" label="在线答题二维码">
<template slot-scope="scope">
<el-button size="small" plain type="primary" @click="saveCode(scope.row.id)">保存二维码
</el-button>
</template>
</el-table-column>
<el-table-column label="操作" header-align="center" align="center" width="200px">
<template scope="scope">
<el-button size="small" @click="openView(scope.row.id)">查看</el-button>
<el-button size="small" type="primary"
@click="openEdit(scope.row.id)" plain>编辑
</el-button>
<el-button size="small" type="danger"
@click="doDelete(scope.row.id)" plain>删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row class="el-pagination-container">
<el-pagination
@size-change="pageSizeChange"
@current-change="pageNumberChange"
:current-page="pageForm.pageNumber"
:page-sizes="[10, 20, 30, 50]"
:page-size="pageForm.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageForm.totalCount">
</el-pagination>
</el-row>
</div>
</transition>
<!-- 新增、修改 -->
<transition name="el-zoom-in-center">
<div v-show="v=='add'||v=='edit'" class="transition-item">
<el-card class="box-card v-box" shadow="never">
<div slot="header" class="clearfix">
<el-button icon="el-icon-back" type="text" @click="v='index'"
style="font-size: 18px">返回
</el-button>
</div>
<div style="padding: 0 5%; height:calc(100vh - 150px);overflow-y: scroll">
<el-row v-loading="loading">
<el-steps :active="stepActive" simple finish-status="success">
<el-step title="试卷信息" description=""></el-step>
<el-step title="选择题目" description=""></el-step>
</el-steps>
<transition name="el-zoom-in-top">
<div v-show="stepActive==0" class="transition-box" style="margin-top: 20px;">
<el-form ref="addForm" :model="formData" label-width="60px" label-position="right"
:rules="formRules">
<el-form-item label="试卷名称" class="is-required" prop="name" label-width="120px">
<el-input v-model="formData.name"
placeholder="请填写试卷名称"></el-input>
</el-form-item>
<el-row :gutter="20">
<el-col :span="7">
<el-form-item label="可答次数" class="is-required" prop="answer_num"
label-width="120px">
<el-input-number style="width: 100%" v-model="formData.answer_num"
controls-position="right"
:min="1" :max="100"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="分值" class="is-required" prop="fraction"
label-width="120px">
<el-input-number style="width: 100%" v-model="formData.fraction"
controls-position="right"
:min="1" :max="200"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="答题时间" prop="answer_time"
label-width="200px">
<el-time-picker
value-format="HH:mm:ss"
style="width: 100%"
is-range
v-model="formData.answer_time"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="说明" prop="explain_txt" label-width="120px">
<div id="qsmEditor"></div>
</el-form-item>
</el-form>
<div style="float: right;margin: 20px 0">
<el-button type="primary" @click="next">下一步</el-button>
</div>
</div>
</transition>
<transition name="el-zoom-in-bottom">
<div v-show="stepActive==1" class="transition-box" style="margin-top: 20px;">
<el-row type="flex" justify="end" :gutter="20">
<div class="btn-group tool-button mt5" style="margin-right: 5px">
<el-input placeholder="请输入题目" size="small"
v-model="subjectForm.searchKeyword"></el-input>
</div>
<div class="btn-group tool-button mt5" style="margin-right: 5px">
<el-select v-model="subjectForm.type" clearable size="small"
placeholder="题型">
<el-option
v-for="item in typeOptions"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</div>
<div class="pull-right offscreen-right mt5">
<el-button icon="el-icon-search" @click="doSubjectSearch"
style="background-color:#409eff;color: white;"
size="small"></el-button>
</div>
</el-row>
<el-table :data="subjectTable" row-key="id" ref="multipleSubject"
@selection-change="handleSelectionChange" size="medium"
@select="selectCheckbox">
<el-table-column type="selection" width="55"
reserve-selection></el-table-column>
<el-table-column align="center" type="index" header-align="center"
label="序号" width="55">
<template scope="scope">
<span>{{scope.$index+(subjectForm.pageNumber - 1) * subjectForm.pageSize + 1}} </span>
</template>
</el-table-column>
<el-table-column prop="name" show-overflow-tooltip label="题目"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="type" label="题型" header-align="center" align="center"
width="80px">
<template scope="scope">
<span v-if="scope.row.type==1">单选</span>
<span v-if="scope.row.type==2">多选</span>
</template>
</el-table-column>
<el-table-column prop="option_txt" show-overflow-tooltip label="正确答案"
header-align="center"
align="center"></el-table-column>
</el-table>
<el-row class="el-pagination-container">
<el-pagination
@size-change="subjectSizeChange"
@current-change="subjectNumberChange"
:current-page="subjectForm.pageNumber"
:page-sizes="[10, 20, 30, 50]"
:page-size="subjectForm.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="subjectForm.totalCount">
</el-pagination>
</el-row>
<div style="float: right;margin: 20px 0">
<el-button @click="stepActive=0">上一步</el-button>
<el-button type="primary" :disabled="subDis" @click="operation">
</el-button>
</div>
</div>
</transition>
</el-row>
</div>
</el-card>
</div>
</transition>
<!-- 查看 -->
<transition name="el-zoom-in-center">
<div v-show="v=='view'" class="transition-item">
<el-card class="box-card v-box" shadow="never">
<div slot="header" class="clearfix">
<el-button icon="el-icon-back" type="text" @click="v='index'"
style="font-size: 18px">返回
</el-button>
</div>
<div style="padding: 0 5%; height:calc(100vh - 150px);overflow-y: scroll">
<div style="padding-left: 20px;padding-right: 20px">
<el-row style="text-align: center;margin-bottom: 20px">
<h2>{{viewData.name}}</h2>
<span style="color: rgb(120,120,120)">考试时间:{{viewData.answer_start_time}} - {{viewData.answer_end_time}}</span>&nbsp;&nbsp;&nbsp;
<span style="color: rgb(120,120,120)">分值:({{viewData.fraction}})</span>
</el-row>
<el-row style="margin-bottom: 20px">
<div v-html="viewData.explain_txt"></div>
</el-row>
<el-row v-for="sub,idx in viewData.subjects"
style="border-bottom: 1px solid rgb(200,200,200);padding: 20px 0;margin-bottom: 20px">
<el-col :span="1">
<span style="font-weight: bolder">{{idx+1}}.</span>
</el-col>
<el-col :span="23">
<el-row>
<div v-html="sub.name"></div>
</el-row>
<el-checkbox-group v-model="sub.val">
<el-row v-for="ans,idx2 in sub.answer">
<el-row style="margin-top: 5px">
<el-radio v-if="sub.type==1" :label="ans.id" v-model="sub.val">
{{ans.option_txt}}
</el-radio>
<el-checkbox v-if="sub.type==2" :label="ans.id">
{{ans.option_txt}}
</el-checkbox>
</el-row>
</el-row>
</el-checkbox-group>
</el-col>
</el-row>
</div>
</div>
</el-card>
</div>
</transition>
</el-row>
<a id="download" style="display: none"></a>
<div id="qrcode" style="display: none;width: 500px;height: 500px"></div>
</div>
<script src="/assets/platform/js/jquery.qrcode.min.js"></script>
<script>
let qsmEditor
const vue = new Vue({
el: '#app',
data() {
return {
pageForm: {
searchName: "name",
searchKeyword: "",
pageNumber: 1,
pageSize: 10,
totalCount: 0,
pageOrderName: "",
pageOrderBy: "",
},
subjectForm: {
searchName: "sub.name",
searchKeyword: "",
pageNumber: 1,
pageSize: 10,
totalCount: 0,
pageOrderName: "",
pageOrderBy: "",
type: ""
},
viewData: {},
formData: {},
subjectTable: [],
tableData: [],
multipleSelection: [],
multipleSelection2: [],
stepActive: 0,
tabKey: new Date().getTime(),
v: 'index',
loading: false,
subDis: false,
redirect_uri: location.protocol + "//" + location.host,
formRules: {
name: [{required: true, message: '必填', trigger: ['blur', 'change']}],
fraction: [{required: true, message: '必填', trigger: ['blur', 'change']}],
answer_num: [{required: true, message: '必填', trigger: ['blur', 'change']}],
answer_time: [{required: true, message: '必填', trigger: ['blur', 'change']}],
},
typeOptions: [{id: 1, name: "单选题"}, {id: 2, name: "多选题"}],
}
},
methods: {
IEVersion() {
let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
let isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
let isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
let isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if (isIE) {
let reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
let fIEVersion = parseFloat(RegExp["$1"]);
if (fIEVersion == 7) {
return 7;
} else if (fIEVersion == 8) {
return 8;
} else if (fIEVersion == 9) {
return 9;
} else if (fIEVersion == 10) {
return 10;
} else {
return 6;//IE版本<=7
}
} else if (isEdge) {
return 'edge';//edge
} else if (isIE11) {
return 11; //IE11
} else {
return -1;//不是ie浏览器
}
},
dwnCode(name) {
let type = 'png';
if (this.IEVersion() != -1) {
let blob = $("canvas").get(0).msToBlob();
window.navigator.msSaveBlob(blob, name + '_' + (new Date()).getTime() + '.' + type);
} else {
$('#download').attr({
href: $("canvas").get(0).toDataURL('image/png').replace("image/png", "image/octet-stream"),
download: name + '_' + (new Date()).getTime() + '.' + type
}).get(0).click();
}
},
saveCode(id) {
let self = this
$("#qrcode").html("")
$("#qrcode").qrcode({
render: "canvas",
width: $("#qrcode").width(),
height: $("#qrcode").width(),
text: self.redirect_uri + '/platform/hd/zxdt/mobile/answer?papers_id=' + id,
correctLevel: 3
});
this.$nextTick(() => {
this.dwnCode("在线答题")
})
},
selectCheckbox(selection, row) {
const checked = selection.some(v => v.id == row.id)
if (checked) {
this.multipleSelection2.push(row.id)
} else {
this.multipleSelection2.splice(this.multipleSelection2.findIndex(v => v == row.id), 1)
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
next() {
if (!this.formData.explain_txt || !dd3s.html2txt(this.formData.explain_txt)) {
this.$message.warning("请填写说明")
return
}
this.$refs["addForm"].validate((valid) => {
if (valid) {
this.stepActive = 1
}
})
},
openView(id) {
$.get("/platform/hd/zxdt/papers/findOne", {id: id}, (res) => {
const {code, data, msg} = res
if (code == 0) {
this.viewData = data
data.subjects.forEach(v => {
if (v.type == 2) {
v.val = []
v.answer.map((x) => {
if (x.is_yes) {
v.val.push(x.id)
}
})
} else {
v.val = v.answer.find(x => x.is_yes).id
}
})
this.v = 'view'
} else {
this.$message.error(msg)
}
})
},
doDelete(id) {
let that = this
this.$confirm('确定要删除吗', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
callback(a, b) {
if ("confirm" == a) {
$.post(base + "/platform/hd/zxdt/papers/delete", {id: id}, (data) => {
if (data.code == 0) {
that.$message.success(data.msg);
that.pageData();
} else {
that.$message.error(data.msg);
}
}, "json");
}
}
});
},
openAdd() {
this.v = 'add'
this.formData = {}
this.stepActive = 0
this.tabKey = new Date().getTime()
this.multipleSelection = []
this.subjectTable = []
this.$nextTick(() => {
$('#qsmEditor').html("")
E = window.wangEditor
qsmEditor = new E('#qsmEditor')
qsmEditor.config.uploadImgShowBase64 = true
qsmEditor.config.onchange = (html) => {
this.$set(this.formData, "explain_txt", html)
}
qsmEditor.create()
})
this.subjectData()
},
openEdit(id) {
this.stepActive = 0
this.tabKey = new Date().getTime()
this.multipleSelection = []
this.subjectTable = []
$.get("/platform/hd/zxdt/papers/findOne", {id: id}, (res) => {
const {code, data, msg} = res
if (code == 0) {
$('#qsmEditor').html(data.explain_txt)
E = window.wangEditor
qsmEditor = new E('#qsmEditor')
qsmEditor.config.onchange = (html) => {
this.$set(this.formData, "explain_txt", html)
}
qsmEditor.create()
this.formData = data
if (this.formData.answer_start_time && this.formData.answer_end_time) {
this.$set(this.formData, 'answer_time', [this.formData.answer_start_time, this.formData.answer_end_time])
}
this.multipleSelection = data.subjects.map(v => {
return v.id
})
this.multipleSelection2 = this.multipleSelection
this.subjectData()
this.v = "edit"
} else {
this.$message.error(msg)
}
})
},
operation() {
let url
if (this.v == 'edit') {
url = "/platform/hd/zxdt/papers/doEdit"
} else if (this.v == 'add') {
url = "/platform/hd/zxdt/papers/doAdd"
}
if (this.multipleSelection.length == 0) {
this.$message.warning('请选择题目!');
return
}
const loading = this.$loading({
lock: true,
text: '数据提交中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
this.formData.answer_start_time = this.formData.answer_time[0]
this.formData.answer_end_time = this.formData.answer_time[1]
this.$refs["addForm"].validate((valid) => {
if (valid) {
$.post(base + url, {
papers: JSON.stringify(this.formData),
subject: JSON.stringify(this.multipleSelection)
}, (data) => {
if (data.code == 0) {
this.v = 'index'
this.pageData()
this.$message.success(data.msg)
} else {
this.$message.error(data.msg);
}
loading.close()
}, "json");
}
})
},
doSearch() {
this.pageForm.pageNumber = 1;
this.pageData();
},
pageOrder(column) {//按字段排序
this.pageForm.pageOrderName = column.prop;
this.pageForm.pageOrderBy = column.order;
this.pageData();
},
pageNumberChange(val) {//页码更新操作
this.pageForm.pageNumber = val;
this.pageData();
},
pageSizeChange(val) {//分页大小更新操作
this.pageForm.pageSize = val;
this.pageData();
},
doSubjectSearch() {
this.subjectForm.pageNumber = 1;
this.subjectData();
},
subjectNumberChange(val) {//页码更新操作
this.subjectForm.pageNumber = val;
this.subjectData();
},
subjectSizeChange(val) {//分页大小更新操作
this.subjectForm.pageSize = val;
this.subjectData();
},
pageData() {//加载分页数据
sublime.showLoadingbar();
$.post(base + "/platform/hd/zxdt/papers/pageData", this.pageForm, (res) => {
const {code, msg, data} = res
if (code == 0) {
this.tableData = data.list;
this.pageForm.totalCount = data.totalCount;
sublime.closeLoadingbar();
} else {
this.$message.error(msg);
}
}, "json");
},
subjectData() {
sublime.showLoadingbar();
$.post(base + "/platform/hd/zxdt/papers/findSubject", this.subjectForm, (res) => {
const {code, msg, data} = res
if (code == 0) {
this.subjectTable = data.list;
this.subjectForm.totalCount = data.totalCount;
this.$nextTick(() => {
const arr = JSON.parse(JSON.stringify(this.multipleSelection2))
this.subjectTable.forEach(v => {
if (arr.includes(v.id)) {
this.$refs.multipleSubject.toggleRowSelection(v, true)
}
})
})
sublime.closeLoadingbar();
} else {
this.$message.error(msg);
}
}, "json");
},
},
created() {
this.pageData();
},
})
</script>
<!--#
}
#-->