You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
616 lines
22 KiB
616 lines
22 KiB
<template> |
|
<div> |
|
<Breadcrumb :data="crumbs" /> |
|
<div class="page"> |
|
<div class="side"> |
|
<div class="m-b-20"> |
|
<el-radio-group v-model="isNotJoin" @change="typeChange"> |
|
<div class="m-b-20"> |
|
<el-radio :label="0">所有试题</el-radio> |
|
</div> |
|
<div> |
|
<el-radio :label="1">未分配知识点的试题</el-radio> |
|
</div> |
|
</el-radio-group> |
|
</div> |
|
<el-divider></el-divider> |
|
<div> |
|
<div class="flex-between m-b-10"> |
|
<h6 class="page-name" style="margin-bottom: 0">知识点框架</h6> |
|
<el-button type="text" @click="toSet">设置</el-button> |
|
</div> |
|
<el-input class="m-b-10" placeholder="请输入知识点分类、知识点名称" prefix-icon="el-icon-search" size="small" |
|
v-model="keyword" clearable></el-input> |
|
<div style="height: 504px; max-height: 504px; overflow: auto"> |
|
<el-tree :data="types" default-expand-all ref="typeTree" node-key="id" highlight-current |
|
:expand-on-click-node="false" @node-click="handleNodeClick" :props="{ label: 'name', isLeaf: 'leaf' }"> |
|
<span class="custom-tree-node" slot-scope="{ node, data }"> |
|
<img v-if="data.type" class="m-r-5" src="@/assets/images/knowledge.svg" alt=""> |
|
<span class="org-name">{{ data.name }}</span> |
|
</span> |
|
</el-tree> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="right"> |
|
<h6 class="page-name">筛选</h6> |
|
<div class="tool"> |
|
<ul class="filter"> |
|
<li> |
|
<label>题目类型</label> |
|
<el-select v-model="filter.questionTypes" clearable placeholder="请选择题目类型" multiple @change="initData"> |
|
<el-option v-for="(item, i) in questionTypes" :key="i" :label="item.name" :value="item.id"></el-option> |
|
</el-select> |
|
</li> |
|
<li> |
|
<label>专业</label> |
|
<el-select v-model="filter.specialtyIds" clearable placeholder="请选择专业" multiple @change="initData"> |
|
<el-option v-for="(item, i) in professionals" :key="i" :label="item.professionalName" |
|
:value="item.professionalId"></el-option> |
|
</el-select> |
|
</li> |
|
<li> |
|
<label>年份</label> |
|
<el-date-picker v-model="givenYears" type="year" placeholder="请选择年份" format="yyyy" value-format="yyyy" |
|
multiple @change="initData"> |
|
</el-date-picker> |
|
</li> |
|
<li> |
|
<label>试题难度</label> |
|
<el-select v-model="filter.difficultys" clearable placeholder="请选择试题难度" multiple @change="initData"> |
|
<el-option v-for="(item, i) in difficults" :key="i" :label="item.name" :value="item.id"></el-option> |
|
</el-select> |
|
</li> |
|
<li> |
|
<label>知识点</label> |
|
<el-cascader :disabled="isNotJoin !== 0" placeholder="请选择知识点" v-model="knowledgePointIds" |
|
:options="knowledges" :props="{ value: 'id', label: 'name', multiple: true }" clearable collapse-tags |
|
@change="initData"></el-cascader> |
|
</li> |
|
<li> |
|
<label>正确率</label> |
|
<el-input style="width: 90px;" placeholder="请输入" v-model="filter.correctRateStart" clearable /> |
|
<span style="margin: 0 10px;">% -- </span> |
|
<el-input style="width: 90px;" placeholder="请输入" v-model="filter.correctRateEnd" clearable /> |
|
<span style="margin-left: 10px;">%</span> |
|
</li> |
|
<li> |
|
<label>状态</label> |
|
<el-select v-model="filter.status" clearable placeholder="请选择状态" @change="initData"> |
|
<el-option v-for="(item, i) in status" :key="i" :label="item.name" :value="item.id"></el-option> |
|
</el-select> |
|
</li> |
|
<li> |
|
<label>搜索</label> |
|
<el-input style="width: 250px;" placeholder="请输入题干" prefix-icon="el-icon-search" v-model="filter.keyword" |
|
clearable /> |
|
</li> |
|
<div style="margin-bottom: 15px;"> |
|
<el-button type="primary" @click="add">新增试题</el-button> |
|
<el-button type="primary" @click="batchImport">批量导入</el-button> |
|
<!-- <el-button type="primary" @click="add">批量转移</el-button> --> |
|
<el-button type="primary" @click="add">批量移除 </el-button> |
|
<el-button type="primary" @click="delAllSelection">批量删除</el-button> |
|
</div> |
|
</ul> |
|
</div> |
|
|
|
<el-table :data="list" class="table" ref="table" stripe header-align="center" |
|
@selection-change="handleSelectionChange" row-key="id" @sort-change="sortChange"> |
|
<el-table-column type="selection" width="45" align="center" :reserve-selection="true"></el-table-column> |
|
<el-table-column type="index" width="50" label="序号" align="center"></el-table-column> |
|
<el-table-column prop="stem" label="题干" align="center" min-width="120" |
|
show-overflow-tooltip></el-table-column> |
|
<el-table-column prop="questionType" label="题型" align="center" width="70" sortable="custom"> |
|
<template slot-scope="scope">{{ questionTypes.find(e => e.id === scope.row.questionType) ? |
|
questionTypes.find(e => e.id === scope.row.questionType).name : '' }}</template> |
|
</el-table-column> |
|
<el-table-column prop="professionalName" label="专业" align="center" min-width="100"></el-table-column> |
|
<el-table-column prop="knowledgePointName" label="知识点" align="center" min-width="100"></el-table-column> |
|
<el-table-column prop="givenYear" label="年份" align="center" width="70" sortable="custom"></el-table-column> |
|
<el-table-column prop="difficulty" label="难度" align="center" width="70" sortable="custom"> |
|
<template slot-scope="scope">{{ difficults.find(e => e.id === scope.row.difficulty) ? difficults.find(e => |
|
e.id === scope.row.difficulty).name : '' }}</template> |
|
</el-table-column> |
|
<el-table-column prop="correctRate" label="正确率" align="center" width="80" sortable="custom"></el-table-column> |
|
<el-table-column prop="updateTime" label="更新时间" align="center" width="140" |
|
sortable="custom"></el-table-column> |
|
<el-table-column prop="lastEditor" label="最近编辑人" align="center" width="90"></el-table-column> |
|
<el-table-column prop="referenceCount" label="已引用试卷(套)" align="center" width="130" |
|
sortable="custom"></el-table-column> |
|
<el-table-column label="操作" align="center" width="300"> |
|
<template slot-scope="scope"> |
|
<el-button type="text" @click="toDetail(scope.row, 1)">复制</el-button> |
|
<el-button type="text" @click="toDetail(scope.row, 2)">查看</el-button> |
|
<el-button type="text" @click="toDetail(scope.row, 3)">编辑</el-button> |
|
<el-button type="text" @click="del(scope.row)">移除</el-button> |
|
<el-button type="text" @click="del([scope.row])">删除</el-button> |
|
<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" style="margin: 0 10px 0 5px" |
|
:active-text="scope.row.status ? '开' : '关'" |
|
@change="switchOff($event, scope.row, scope.$index)"></el-switch> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="pagination"> |
|
<el-pagination background @current-change="currentChange" :current-page="page" |
|
layout="total, prev, pager, next" :total="total"></el-pagination> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<Detail :visible.sync="quesVisible" :row.sync="curRow" :detailType.sync="detailType" /> |
|
|
|
<el-dialog title="提示" :visible.sync="delVisible" width="400px" :close-on-click-modal="false" custom-class="del-dia"> |
|
<div class="del-wrap"> |
|
<div class="icon el-icon-warning"></div> |
|
<div class="flex-1"> |
|
<p>该试题已被以下试卷引用，确定删除？</p> |
|
<ul class="papers"> |
|
<li v-for="(item, i) in curUsePapers" :key="i"> |
|
<p>{{ item.name }}</p> |
|
<i class="el-icon-edit m-l-10"></i> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="delVisible = false">取消</el-button> |
|
<el-button type="primary" @click="delSubmit">确定</el-button> |
|
</span> |
|
</el-dialog> |
|
|
|
<el-dialog title="批量导入试题" :visible.sync="importVisible" width="520px" :close-on-click-modal="false" |
|
:modal-append-to-body="false"> |
|
<el-form label-width="110px"> |
|
<el-form-item prop="userName" label="题库分类"> |
|
<el-select style="width: 100%" v-model="form.provinceId" placeholder="请选择题库分类"> |
|
<el-option v-for="(item, i) in types" :key="i" :label="item.provinceName" |
|
:value="item.provinceId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item prop="userName" label="当前题库"> |
|
<el-input placeholder="请输入题库名称" v-model="form.name" disabled></el-input> |
|
</el-form-item> |
|
<el-form-item prop="userName" label="模板文件"> |
|
<el-button type="primary" @click="download">模板下载<i class="el-icon-download el-icon--right"></i></el-button> |
|
</el-form-item> |
|
<el-form-item prop="userName" label="选择文件上传"> |
|
<el-upload name="file" accept=".xls,.xlsx" ref="upload" class="import-file" drag :before-upload="beforeUpload" |
|
:on-remove="handleRemove" :on-error="uploadError" :on-success="uploadSuccess" :before-remove="beforeRemove" |
|
:limit="1" :data="{ |
|
// competitionId: id, |
|
platformId: 2 |
|
}" :disabled="uploading" :on-exceed="handleExceed" :action="this.api.batchImportPersonalData" |
|
:file-list="uploadList" :headers="headers"> |
|
<i class="el-icon-upload"></i> |
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> |
|
<div class="el-upload__tip" slot="tip" style="line-height: 1.8;"> |
|
<p>上传说明：</p> |
|
<p>1.请按照模板要求，正确填写后上传</p> |
|
<p>2.上传文件大小限制50M</p> |
|
<p>3.仅支持上传.xls、 .xlsx文件格式</p> |
|
</div> |
|
</el-upload> |
|
</el-form-item> |
|
</el-form> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="importVisible = false">关闭</el-button> |
|
</span> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import Util from '@/libs/util' |
|
import Setting from '@/setting' |
|
import Ueditor from '@/components/ueditor' |
|
import Breadcrumb from '@/components/breadcrumb' |
|
import Detail from '../detail' |
|
import Const from '@/const/ques' |
|
export default { |
|
components: { Ueditor, Breadcrumb, Detail }, |
|
data () { |
|
return { |
|
crumbs: [ |
|
{ |
|
name: this.$route.query.questionBankName || '题库管理', |
|
route: '/quesBank' |
|
}, |
|
{ |
|
name: '试题管理' |
|
}, |
|
], |
|
difficults: Const.difficults, |
|
questionTypes: Const.questionTypes, |
|
typeId: this.$route.query.id, |
|
loading: false, |
|
isNotJoin: 0, |
|
createSource: 1, |
|
keyword: '', |
|
type: 1, |
|
types: [], |
|
professionals: [], |
|
status: [ |
|
{ |
|
id: 1, |
|
name: '启用' |
|
}, |
|
{ |
|
id: 0, |
|
name: '禁用' |
|
}, |
|
], |
|
knowledges: [], |
|
givenYears: '', |
|
knowledgePointIds: [], |
|
filter: { |
|
questionTypes: [], |
|
correctRateEnd: '', |
|
correctRateStart: '', |
|
difficultys: [], |
|
specialtyIds: [], |
|
status: '', |
|
keyword: '', |
|
questionTypeSort: '', |
|
givenYearSort: '', |
|
difficultySort: '', |
|
correctRateSort: '', |
|
updateTimeSort: '', |
|
referenceCountSort: '', |
|
}, |
|
list: [], |
|
page: 1, |
|
pageSize: 10, |
|
total: 0, |
|
multipleSelection: [], |
|
|
|
quesVisible: false, |
|
curRow: {}, |
|
detailType: '', |
|
|
|
delVisible: false, |
|
curUsePapers: [], |
|
curRow: {}, |
|
|
|
form: {}, |
|
importVisible: false, |
|
uploadList: [], |
|
uploadFaild: false, |
|
uploadTips: '', |
|
exportCode: '', |
|
headers: { |
|
token: Util.local.get(Setting.tokenKey) |
|
}, |
|
uploading: false, |
|
}; |
|
}, |
|
watch: { |
|
keyword: function (val) { |
|
clearTimeout(this.searchTimer); |
|
this.searchTimer = setTimeout(this.getType, 500); |
|
}, |
|
'filter.keyword': function (val) { |
|
clearTimeout(this.searchTimer); |
|
this.searchTimer = setTimeout(this.initData, 500); |
|
}, |
|
quesVisible () { |
|
this.quesVisible || this.getList() |
|
} |
|
}, |
|
mounted () { |
|
this.getType() |
|
this.getProfessional() |
|
this.getKnowledge() |
|
}, |
|
methods: { |
|
// 获取知识点 |
|
async getType () { |
|
try { |
|
this.loading = true |
|
const { data } = await this.$post(this.api.TreeStructure, { |
|
createSource: 1, |
|
questionBankId: this.typeId, |
|
keyword: this.keyword, |
|
}) |
|
this.types = data |
|
this.getList() |
|
} finally { |
|
this.loading = false |
|
} |
|
}, |
|
// 前往知识点 |
|
toSet () { |
|
this.$router.push(`/knowledge?id=${this.typeId}`) |
|
}, |
|
// 类型回调 |
|
typeChange () { |
|
this.$refs.typeTree.setCurrentKey(null) |
|
this.initData() |
|
}, |
|
// 点击树节点查询列表数据 |
|
handleNodeClick () { |
|
this.isNotJoin = '' |
|
this.initData() |
|
this.$refs.table.clearSelection() |
|
}, |
|
// 处理树形 |
|
handleType (list) { |
|
list.map(e => { |
|
if (e.children && e.children.length) { |
|
this.handleType(e.children) |
|
} else { |
|
delete e.children |
|
} |
|
}) |
|
}, |
|
// 获取知识点 |
|
async getKnowledge () { |
|
try { |
|
const { data } = await this.$post(this.api.TreeStructure, { |
|
createSource: 1, |
|
questionBankId: this.typeId, |
|
keyword: '' |
|
}) |
|
this.handleType(data) |
|
this.knowledges = data |
|
} catch (e) { } |
|
}, |
|
// 获取所属专业 |
|
async getProfessional () { |
|
try { |
|
const res = await this.$post(this.api.queryProfessional, { |
|
pageNum: 1, |
|
pageSize: 1000, |
|
}) |
|
this.professionals = res.pageList.records |
|
} catch (e) { } |
|
}, |
|
// 试题列表 |
|
async getList () { |
|
let type = this.$refs.typeTree.getCurrentKey() |
|
const k = this.knowledgePointIds |
|
if (k.length) { // 右边筛选里的知识点 |
|
type = k.map(e => { |
|
return e[e.length - 1] |
|
}) |
|
} else if (type) { |
|
type = [type] |
|
} |
|
const { message } = await this.$post(this.api.listQuestion, { |
|
...this.filter, |
|
givenYears: this.givenYears ? [this.givenYears] : [], |
|
isNotJoin: this.isNotJoin || '', |
|
pageNum: this.page, |
|
pageSize: this.pageSize, |
|
questionBankId: this.typeId, |
|
knowledgePointIds: type || [], |
|
}) |
|
this.list = Util.removeTag(message.records) |
|
this.total = message.total |
|
}, |
|
// 切换页码 |
|
currentChange (val) { |
|
this.page = val |
|
this.getList() |
|
}, |
|
handleSelectionChange (val) { // 多选 |
|
this.multipleSelection = val |
|
}, |
|
initData () { |
|
this.$refs.table.clearSelection() |
|
this.page = 1 |
|
this.getList() |
|
}, |
|
// 排序回调 |
|
sortChange (column) { |
|
if (column.prop === 'questionType') this.filter.questionTypeSort = column.order ? column.order === 'ascending' ? 'asc' : 'desc' : '' |
|
if (column.prop === 'givenYear') this.filter.givenYearSort = column.order ? column.order === 'ascending' ? 'asc' : 'desc' : '' |
|
if (column.prop === 'difficulty') this.filter.difficultySort = column.order ? column.order === 'ascending' ? 'asc' : 'desc' : '' |
|
if (column.prop === 'correctRate') this.filter.correctRateSort = column.order ? column.order === 'ascending' ? 'asc' : 'desc' : '' |
|
if (column.prop === 'updateTime') this.filter.updateTimeSort = column.order ? column.order === 'ascending' ? 'asc' : 'desc' : '' |
|
if (column.prop === 'referenceCount') this.filter.referenceCountSort = column.order ? column.order === 'ascending' ? 'asc' : 'desc' : '' |
|
this.getList() |
|
}, |
|
|
|
// 添加 |
|
add () { |
|
this.quesVisible = true |
|
this.curRow = {} |
|
this.detailType = '' |
|
}, |
|
// 编辑/查看 type: 1复制，2查看，3编辑 |
|
toDetail (row, type) { |
|
this.quesVisible = true |
|
this.curRow = row |
|
this.detailType = type |
|
}, |
|
// 删除 |
|
async del (rows) { |
|
const ids = rows.map(e => e.questionId) |
|
// 先查询是否有试卷引用了该试题 |
|
const { list } = await this.$post(this.api.checkQuestionIsUse, ids) |
|
if (list.length) { |
|
this.curRow = rows |
|
this.curUsePapers = list |
|
this.delVisible = true |
|
} else { |
|
try { |
|
await this.$confirm(`确认要删除吗？`, '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning', |
|
closeOnClickModal: false, |
|
}) |
|
await this.$post(this.api.delQuestion, ids) |
|
Util.successMsg('删除成功') |
|
this.getList() |
|
} catch (e) { } |
|
} |
|
}, |
|
// 批量删除 |
|
async delAllSelection () { |
|
const list = this.multipleSelection |
|
list.length ? this.del(list) : Util.warningMsg('请选择数据') |
|
}, |
|
// 删除提交 |
|
async delSubmit () { |
|
await this.$post(this.api.delQuestion, this.curRow.map(e => e.questionId)) |
|
Util.successMsg('删除成功') |
|
this.multipleSelection = [] |
|
this.$refs.table.clearSelection() |
|
this.delVisible = false |
|
this.getList() |
|
}, |
|
// 禁启用 |
|
async switchOff (val, row) { |
|
try { |
|
row.status = val ? 0 : 1 // 调接口前先还原成点击前的状态，因为有几种原因会禁用启用失败 |
|
if (!val) { |
|
await this.$confirm(`<p>确认要禁用【${row.stem}】吗？</p><p style="color: #f56c6c;">禁用后已引用该试题的试卷将会变成草稿，再次启用后，试卷将自动发布</p>`, '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning', |
|
closeOnClickModal: false, |
|
dangerouslyUseHTMLString: true, |
|
}) |
|
} |
|
await this.$post(`${this.api.disableOrEnableQuestion}?questionId=${row.questionId}&status=${val}`) |
|
row.status = val |
|
Util.successMsg(val ? '启用成功' : '禁用成功') |
|
this.getList() |
|
} catch (e) { |
|
row.status = val ? 0 : 1 |
|
} |
|
}, |
|
|
|
|
|
// 批量导入 |
|
batchImport () { |
|
this.importVisible = true |
|
this.uploadList = [] |
|
this.uploadFaild = false |
|
}, |
|
// 模板下载 |
|
download () { |
|
location.href = this.api[this.info.completeCompetitionSetup.competitionType ? 'competionTeamTemplate' : 'competionPersonTemplate'] |
|
}, |
|
// 上传文件 |
|
handleExceed (files, fileList) { |
|
Util.warningMsg( |
|
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
|
) |
|
}, |
|
// 下载失败文件 |
|
showFaild () { |
|
axios.get(`${this.api.TeamDataExportFailure}?exportCode=${this.exportCode}&platformId=2&type=${this.info.completeCompetitionSetup.competitionType ? 1 : 2}`, { |
|
headers: this.headers, |
|
responseType: 'blob' |
|
}).then((res) => { |
|
const name = res.headers['content-disposition'] |
|
Util.downloadFileDirect(name ? decodeURI(name) : '批量导入报名人员失败数据导出.xlsx', new Blob([res.data])) |
|
}).catch(res => { }) |
|
}, |
|
uploadSuccess ({ data, status }) { |
|
this.uploading = false |
|
this.uploadFaild = false |
|
this.uploadTips = '' |
|
if (status === 200) { |
|
this.init() |
|
const { tip } = data |
|
if (data.exportCode) { |
|
this.exportCode = data.exportCode |
|
this.uploadFaild = true |
|
this.uploadTips = tip |
|
} else { |
|
Util[tip.includes('5000') ? 'errorMsg' : 'successMsg'](tip, 3000) |
|
this.importVisible = false |
|
} |
|
} else { |
|
Util.errorMsg(res.message || '上传失败，请检查数据', 3000) |
|
} |
|
}, |
|
uploadError (err, file, fileList) { |
|
this.uploading = false |
|
this.$message({ |
|
message: "上传出错，请重试！", |
|
type: "error", |
|
center: true |
|
}) |
|
}, |
|
beforeUpload (file) { |
|
this.uploading = true |
|
}, |
|
beforeRemove (file, fileList) { |
|
return this.$confirm(`确定移除 ${file.name}？`) |
|
}, |
|
handleRemove (file, fileList) { |
|
this.uploadList = fileList |
|
this.uploadFaild = false |
|
}, |
|
cancelUpload () { |
|
this.uploading = false |
|
this.$refs.upload.abort() |
|
this.keyword = '' |
|
this.init() |
|
this.importVisible = false |
|
}, |
|
// 后台上传 |
|
backstageUpload () { |
|
this.isBackstage = 1 |
|
this.importVisible = false |
|
}, |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.page { |
|
display: flex; |
|
padding: 0 24px; |
|
|
|
.side { |
|
width: 300px; |
|
padding: 24px 10px 24px 0; |
|
margin-right: 24px; |
|
border-right: 1px solid rgba(0, 0, 0, 0.06); |
|
} |
|
|
|
.right { |
|
width: calc(100% - 324px); |
|
padding: 24px 0; |
|
} |
|
} |
|
|
|
.tool { |
|
margin-bottom: 0; |
|
|
|
.filter { |
|
flex-wrap: wrap; |
|
justify-content: space-between; |
|
|
|
li { |
|
margin-bottom: 15px; |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
.papers { |
|
margin-top: 10px; |
|
|
|
li { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
margin-bottom: 10px; |
|
} |
|
|
|
i { |
|
font-size: 14px; |
|
color: #7a7a7a; |
|
cursor: pointer; |
|
} |
|
} |
|
</style> |