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.
357 lines
12 KiB
357 lines
12 KiB
<template> |
|
<div class="page"> |
|
<div class="side"> |
|
<div class="m-b-20"> |
|
<h6 class="page-name">题库分类</h6> |
|
<el-radio-group v-model="isNotJoin" @change="typeChange"> |
|
<div class="m-b-10"> |
|
<el-radio :label="0">所有题库</el-radio> |
|
</div> |
|
<div> |
|
<el-radio :label="1">未加入分类的题库</el-radio> |
|
</div> |
|
</el-radio-group> |
|
</div> |
|
<el-divider></el-divider> |
|
<div> |
|
<el-input class="m-b-10" placeholder="请输入题库分类" prefix-icon="el-icon-search" size="small" clearable |
|
v-model="keyword"></el-input> |
|
<div style="height: 504px; max-height: 504px; overflow: auto"> |
|
<el-tree v-loading="loading" :data="types" default-expand-all ref="typeTree" node-key="id" highlight-current |
|
:expand-on-click-node="false" @node-click="handleNodeClick" |
|
:props="{ children: 'children', label: 'name', isLeaf: 'leaf' }"></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.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.name" |
|
clearable></el-input> |
|
</li> |
|
</ul> |
|
<div> |
|
<el-button type="primary" @click="add">创建题库</el-button> |
|
</div> |
|
</div> |
|
|
|
<el-table :data="list" v-loading="listLoading" class="table" ref="table" stripe header-align="center" |
|
@selection-change="handleSelectionChange" row-key="id" @sort-change="sortChange"> |
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
|
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
|
<el-table-column prop="questionBankName" label="题库名称" align="center" min-width="120"></el-table-column> |
|
<el-table-column prop="questionBankDescription" label="描述" align="center" min-width="120" |
|
show-overflow-tooltip></el-table-column> |
|
<el-table-column prop="questionBankCategory" label="题库分类" align="center" min-width="120"></el-table-column> |
|
<el-table-column prop="questionsNum" label="题目数量" align="center" width="100" |
|
sortable="custom"></el-table-column> |
|
<el-table-column prop="createTime" label="创建时间" align="center" width="160" sortable="custom"></el-table-column> |
|
<el-table-column prop="createUserName" label="创建人" align="center" width="100"></el-table-column> |
|
<el-table-column label="操作" align="center" width="280"> |
|
<template slot-scope="scope"> |
|
<el-button type="text" @click="toQues(scope.row)">试题管理</el-button> |
|
<el-button type="text" @click="edit(scope.row, 0)">编辑</el-button> |
|
<el-button type="text" @click="edit(scope.row, 1)">复制</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> |
|
|
|
<el-dialog :title="isCopy ? '复制题库' : !form.id ? '创建题库' : '编辑题库'" :visible.sync="quesBankVisible" width="400px" |
|
:close-on-click-modal="false"> |
|
<p v-if="isCopy" style="margin: -10px 0 20px;font-size: 12px;color: #f00;">您将复制当前题库中的所有题目到新题库，请输入新题库名称</p> |
|
<el-form :model="form" :rules="rules" label-width="80px"> |
|
<el-form-item prop="userName" label="分类"> |
|
<el-cascader placeholder="请选择题库分类" v-model="form.categoryIds" :options="enableTypes" |
|
:props="{ value: 'id', label: 'name', checkStrictly: true }" clearable></el-cascader> |
|
</el-form-item> |
|
<el-form-item prop="questionBankName" label="题库名称"> |
|
<el-input placeholder="请输入题库名称" v-model="form.questionBankName"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="questionBankDescription" label="题库描述"> |
|
<el-input placeholder="请输入题库描述" type="textarea" :rows="3" v-model="form.questionBankDescription"></el-input> |
|
</el-form-item> |
|
</el-form> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="quesBankVisible = false">取消</el-button> |
|
<el-button type="primary" :loading="submiting" @click="quesBankSubmit">确定</el-button> |
|
</span> |
|
</el-dialog> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import Setting from '@/setting' |
|
import Util from '@/libs/util' |
|
import Qs from 'qs' |
|
import _ from 'lodash' |
|
export default { |
|
data () { |
|
return { |
|
loading: false, |
|
keyword: '', |
|
isNotJoin: 0, |
|
types: [], |
|
status: [ |
|
{ |
|
id: 1, |
|
name: '启用' |
|
}, |
|
{ |
|
id: 0, |
|
name: '禁用' |
|
}, |
|
], |
|
filter: { |
|
questionNumOrderBy: '', |
|
timeOrderBy: '', |
|
status: '', |
|
name: '', |
|
}, |
|
listLoading: false, |
|
list: [], |
|
page: +this.$route.query.page || 1, |
|
pageSize: 10, |
|
total: 0, |
|
multipleSelection: [], |
|
|
|
form: { |
|
questionBankDescription: '', |
|
questionBankName: '', |
|
categoryIds: [], |
|
}, |
|
rules: { |
|
questionBankName: [ |
|
{ required: true, message: '请输入题库名称', trigger: 'blur' } |
|
] |
|
}, |
|
enableTypes: [], |
|
quesBankVisible: false, |
|
submiting: false, |
|
isCopy: false, |
|
}; |
|
}, |
|
watch: { |
|
keyword: function (val) { |
|
clearTimeout(this.searchTimer) |
|
this.searchTimer = setTimeout(this.getType, 500) |
|
}, |
|
'filter.name': function (val) { |
|
clearTimeout(this.searchTimer) |
|
this.searchTimer = setTimeout(this.initData, 500) |
|
} |
|
}, |
|
mounted () { |
|
const { query } = this.$route |
|
if (query.page) { |
|
const { questionNumOrderBy, timeOrderBy, status, name } = query |
|
this.filter = { |
|
questionNumOrderBy: questionNumOrderBy ? +questionNumOrderBy : '', |
|
timeOrderBy: timeOrderBy ? +timeOrderBy : '', |
|
name: name || '', |
|
status: status ? +status : '', |
|
} |
|
} |
|
|
|
this.getType() |
|
}, |
|
methods: { |
|
// 获取题库分类 |
|
async getType () { |
|
try { |
|
this.loading = true |
|
const { data } = await this.$post(this.api.getAllQuestionBankCategories, { |
|
keyword: this.keyword, |
|
createSource: 1, |
|
}) |
|
this.handleList(data) |
|
this.types = data |
|
this.initData() |
|
} finally { |
|
this.loading = false |
|
} |
|
}, |
|
// 处理树形 |
|
handleList (list) { |
|
list.map(e => { |
|
if (e.children && e.children.length) { |
|
this.handleList(e.children) |
|
} else { |
|
delete e.children |
|
} |
|
}) |
|
}, |
|
|
|
// 类型回调 |
|
typeChange () { |
|
this.$refs.typeTree.setCurrentKey(null) |
|
this.initData() |
|
}, |
|
// 点击树节点查询列表数据 |
|
handleNodeClick () { |
|
this.isNotJoin = '' |
|
this.initData() |
|
}, |
|
// 题库列表 |
|
async getList () { |
|
try { |
|
this.listLoading = true |
|
const res = await this.$post(this.api.questionBankList, { |
|
...this.filter, |
|
isNotJoin: this.isNotJoin || '', |
|
pageNum: this.page, |
|
pageSize: this.pageSize, |
|
questionCategoryId: this.$refs.typeTree.getCurrentKey() || '', |
|
}) |
|
this.list = res.message.records |
|
this.total = res.message.total |
|
} finally { |
|
this.listLoading = false |
|
} |
|
}, |
|
// 切换页码 |
|
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 === 'questionsNum') this.filter.questionNumOrderBy = column.order ? column.order === 'ascending' ? 'asc' : 'desc' : '' |
|
if (column.prop === 'createTime') this.filter.timeOrderBy = column.order ? column.order === 'ascending' ? 'asc' : 'desc' : '' |
|
this.getList() |
|
}, |
|
// 删除 |
|
async del (row) { |
|
try { |
|
await this.$confirm(`<p>确认要删除【${row.questionBankName}】吗？</p><p style="color: #f56c6c;">删除后，题库中的知识点框架与题目将会被删除，请谨慎操作！</p>`, '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning', |
|
closeOnClickModal: false, |
|
dangerouslyUseHTMLString: true, |
|
}) |
|
await this.$post(this.api.questionBankDel, [row.id]) |
|
Util.successMsg('删除成功') |
|
this.getList() |
|
} catch (e) { } |
|
}, |
|
async switchOff (val, row) { |
|
await this.$post(`${this.api.questionBankDisable}?id=${row.id}&status=${val}`) |
|
Util.successMsg(val ? '启用成功' : '禁用成功') |
|
this.getList() |
|
}, |
|
// 添加 |
|
add () { |
|
this.getEnableType() |
|
this.isCopy = false |
|
const type = this.$refs.typeTree.getCurrentNode() |
|
this.form = { |
|
questionBankDescription: '', |
|
questionBankName: '', |
|
categoryIds: type ? type.path.split('/').map(e => +e) : [], |
|
} |
|
this.quesBankVisible = true |
|
}, |
|
// 试题管理 |
|
toQues (row) { |
|
this.$store.commit('user/setReferrer', { |
|
i: 1, |
|
url: `${this.$route.path}?${Qs.stringify(this.filter)}&page=${this.page}` |
|
}) |
|
this.$router.push(`/ques?questionBankId=${row.id}&questionBankName=${row.questionBankName}&questionBankCategory=${row.questionBankCategory}`) |
|
}, |
|
// 编辑/复制 |
|
async edit (row, isCopy) { |
|
this.getEnableType() |
|
this.isCopy = isCopy |
|
const res = await this.$post(`${this.api.questionBankFind}?id=${row.id}`) |
|
const type = res.message.questionBankCategoryRelations |
|
this.quesBankVisible = true |
|
this.form = { |
|
id: row.id, |
|
questionBankName: row.questionBankName, |
|
questionBankDescription: row.questionBankDescription, |
|
categoryIds: type && type.length ? type[0].path.split('/').map(e => +e) : [], |
|
} |
|
}, |
|
// 获取启用的题库分类 |
|
async getEnableType () { |
|
if (!this.enableTypes.length) { |
|
try { |
|
const { data } = await this.$post(this.api.getAllQuestionBankCategories, { |
|
createSource: 1, |
|
status: 1, |
|
}) |
|
this.handleList(data) |
|
this.enableTypes = data |
|
} catch (e) { } |
|
} |
|
}, |
|
// 题库提交 |
|
async quesBankSubmit () { |
|
if (this.submiting) return false |
|
const form = _.cloneDeep(this.form) |
|
// if (!form.categoryIds.length) return Util.warningMsg('请选择分类') |
|
if (!form.questionBankName) return Util.warningMsg('请输入题库名称') |
|
this.submiting = true |
|
if (form.categoryIds.length) form.categoryIds = [form.categoryIds[form.categoryIds.length - 1]] |
|
form.createSource = 1 |
|
try { |
|
await this.$post(this.api[this.isCopy ? 'copyQuestionBank' : 'questionBankSave'], form) |
|
Util.successMsg(this.isCopy ? '复制成功' : '保存成功') |
|
this.quesBankVisible = false |
|
this.submiting = false |
|
this.getList() |
|
} catch (e) { |
|
this.submiting = 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; |
|
} |
|
} |
|
</style> |