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.
370 lines
12 KiB
370 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="1">所有试卷库</el-radio> |
|
</div> |
|
<div> |
|
<el-radio :label="2">未加入分类的试卷库</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 :data="types" default-expand-all ref="typeTree" node-key="libraryClassificationId" highlight-current |
|
:expand-on-click-node="false" @node-click="handleNodeClick" |
|
:props="{ id: 'libraryClassificationId', label: 'libraryClassificationName', isLeaf: 'leaf' }"></el-tree> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="right"> |
|
<h6 class="page-name">筛选</h6> |
|
<!-- <UeditorPlus /> --> |
|
<div class="tool"> |
|
<ul class="filter"> |
|
<li> |
|
<label>状态</label> |
|
<el-select v-model="filter.isDisable" clearable placeholder="请选择状态" @change="getList"> |
|
<el-option v-for="(item, i) in isDisable" :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></el-input> |
|
</li> |
|
</ul> |
|
<div> |
|
<el-button type="primary" @click="add">创建试卷库</el-button> |
|
</div> |
|
</div> |
|
|
|
<el-table :data="list" class="table" ref="table" stripe header-align="center" |
|
@selection-change="handleSelectionChange" row-key="libraryId" @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="libraryName" label="试卷库名称" align="center" min-width="120"></el-table-column> |
|
<el-table-column prop="remarks" label="描述" align="center" min-width="120" |
|
show-overflow-tooltip></el-table-column> |
|
<el-table-column prop="libraryClassificationName" label="试卷库分类" align="center" |
|
min-width="120"></el-table-column> |
|
<el-table-column prop="examPaperNum" 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="createUser" 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="toTestPaper(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.isDisable" :active-value="false" :inactive-value="true" |
|
style="margin: 0 10px 0 5px" :active-text="scope.row.isDisable ? '禁用' : '启用'" |
|
@change="switchOff($event, scope.row)"></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.libraryId ? '创建试卷库' : '编辑试卷库'" :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="100px"> |
|
<el-form-item prop="userName" label="分类"> |
|
<el-cascader placeholder="请选择试卷库分类" v-model="libraryClassificationId" :options="enableTypes" |
|
:props="{ value: 'libraryClassificationId', label: 'libraryClassificationName', checkStrictly: true }" |
|
clearable></el-cascader> |
|
</el-form-item> |
|
<el-form-item prop="libraryName" label="试卷库名称"> |
|
<el-input placeholder="请输入试卷库名称" v-model="form.libraryName"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="remarks" label="试卷库描述"> |
|
<el-input placeholder="请输入试卷库描述" type="textarea" :rows="3" v-model="form.remarks"></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 Util from '@/libs/util' |
|
import Setting from '@/setting' |
|
// import UeditorPlus from '@/components/ueditorPlus' |
|
import _ from 'lodash' |
|
export default { |
|
// components: { UeditorPlus }, |
|
data () { |
|
return { |
|
loading: false, |
|
keyword: '', |
|
isNotJoin: 1, |
|
types: [], |
|
isDisable: [ |
|
{ |
|
id: 0, |
|
name: '启用' |
|
}, |
|
{ |
|
id: 1, |
|
name: '禁用' |
|
}, |
|
], |
|
filter: { |
|
numOrder: '', |
|
timeOrder: 2, |
|
isDisable: '', |
|
keyWord: '', |
|
}, |
|
list: [], |
|
page: 1, |
|
pageSize: 10, |
|
total: 0, |
|
multipleSelection: [], |
|
|
|
form: { |
|
remarks: '', |
|
libraryName: '', |
|
}, |
|
libraryClassificationId: [], |
|
rules: { |
|
libraryName: [ |
|
{ 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.keyWord': function (val) { |
|
clearTimeout(this.searchTimer) |
|
this.searchTimer = setTimeout(this.initData, 500) |
|
} |
|
}, |
|
mounted () { |
|
this.getType() |
|
}, |
|
methods: { |
|
// 获取试卷库分类 |
|
async getType () { |
|
try { |
|
this.loading = true |
|
const res = await this.$post(this.api.libraryClassificationList, { |
|
libraryClassificationName: this.keyword, |
|
createSource: 1, |
|
}) |
|
const data = res.treeList |
|
this.handleList(data) |
|
this.types = data |
|
this.getList() |
|
} 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 (data) { |
|
this.isNotJoin = '' |
|
this.initData() |
|
this.$refs.table.clearSelection() |
|
}, |
|
// 试卷库列表 |
|
async getList () { |
|
const res = await this.$post(this.api.libraryList, { |
|
...this.filter, |
|
type: this.isNotJoin, |
|
pageNum: this.page, |
|
pageSize: this.pageSize, |
|
libraryClassificationId: this.$refs.typeTree.getCurrentKey() || '', |
|
}) |
|
this.list = res.pageList.records |
|
this.total = res.pageList.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) { |
|
// 1上2下 |
|
if (column.prop === 'examPaperNum') this.filter.numOrder = column.order ? column.order === 'ascending' ? 1 : 2 : '' |
|
if (column.prop === 'createTime') this.filter.timeOrder = column.order ? column.order === 'ascending' ? 1 : 2 : '' |
|
this.getList() |
|
}, |
|
// 删除 |
|
async del (row) { |
|
try { |
|
await this.$confirm(`<p>确认要删除【${row.libraryName}】吗？</p><p style="color: #f56c6c;">删除后，试卷库中的试卷将会被删除，请谨慎操作！</p>`, '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning', |
|
closeOnClickModal: false, |
|
dangerouslyUseHTMLString: true, |
|
}) |
|
await this.$post(this.api.paperLibraryDel, { |
|
ids: [row.libraryId] |
|
}) |
|
Util.successMsg('删除成功') |
|
this.getList() |
|
} catch (e) { } |
|
}, |
|
async switchOff (val, row) { |
|
await this.$post(this.api.paperLibraryDisable, { |
|
id: row.libraryId, |
|
isDisable: val |
|
}) |
|
Util.successMsg(val ? '禁用成功' : '启用成功') |
|
this.getList() |
|
}, |
|
// 获取分类详情 |
|
async getDetail (id) { |
|
const res = await this.$get(this.api.libraryClassificationFind, { |
|
id |
|
}) |
|
return res.libraryClassification |
|
}, |
|
// 添加 |
|
async add () { |
|
this.getEnableType() |
|
this.isCopy = false |
|
const type = this.$refs.typeTree.getCurrentNode() |
|
this.form = { |
|
remarks: '', |
|
libraryName: '', |
|
} |
|
if (type) { |
|
const data = await this.getDetail(type.libraryClassificationId) |
|
this.libraryClassificationId = data.classificationPath.split('/').map(e => +e) |
|
} else { |
|
this.libraryClassificationId = [] |
|
} |
|
this.quesBankVisible = true |
|
}, |
|
// 试卷管理 |
|
toTestPaper (row) { |
|
this.$router.push(`/testPaper?id=${row.libraryId}&name=${row.libraryName}`) |
|
}, |
|
// 编辑/复制 |
|
async edit (row, isCopy) { |
|
this.getEnableType() |
|
this.isCopy = isCopy |
|
this.quesBankVisible = true |
|
this.form = { |
|
libraryId: row.libraryId, |
|
libraryName: row.libraryName, |
|
remarks: row.remarks, |
|
} |
|
let type = row.libraryClassificationId |
|
if (type) { |
|
type = type.split('/') |
|
const data = await this.getDetail(type[type.length - 1]) |
|
this.libraryClassificationId = data.classificationPath.split('/').map(e => +e) |
|
} else { |
|
this.libraryClassificationId = [] |
|
} |
|
}, |
|
// 获取启用的试卷库分类 |
|
async getEnableType () { |
|
if (!this.enableTypes.length) { |
|
try { |
|
const res = await this.$post(this.api.libraryClassificationList, { |
|
createSource: 1, |
|
isDisable: false, |
|
}) |
|
const data = res.treeList |
|
this.handleList(data) |
|
this.enableTypes = data |
|
} catch (e) { } |
|
} |
|
}, |
|
// 试卷库提交 |
|
async quesBankSubmit () { |
|
if (this.submiting) return false |
|
const form = _.cloneDeep(this.form) |
|
if (!form.libraryName) return Util.warningMsg('请输入试卷库名称') |
|
this.submiting = true |
|
if (this.libraryClassificationId.length) form.libraryClassificationId = this.libraryClassificationId[this.libraryClassificationId.length - 1] |
|
// form.systemId = this.systemId |
|
form.createSource = 1 |
|
try { |
|
if (this.isCopy) { |
|
form.copyLibraryId = form.libraryId |
|
form.libraryId = '' |
|
} |
|
await this.$post(this.api[this.isCopy ? 'copyExamPaperLibrary' : form.libraryId ? 'paperLibraryUpdate' : 'paperLibrarySave'], 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> |