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.
489 lines
16 KiB
489 lines
16 KiB
<template> |
|
<div :class="['page', { inQues }]"> |
|
<Breadcrumb v-if="!inQues" style="margin-bottom: 0;" :data="crumbs" /> |
|
<div class="wrap"> |
|
<div class="side"> |
|
<div class="m-b-20"> |
|
<el-radio-group v-model="isNotJoin" @change="changeType"> |
|
<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="addType">添加</el-button> |
|
</div> |
|
|
|
<el-input class="m-b-10" placeholder="请输入知识点分类" prefix-icon="el-icon-search" size="small" clearable |
|
v-model="keyword"></el-input> |
|
<div style="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="{ label: 'name', isLeaf: 'leaf' }"> |
|
<span class="custom-tree-node" slot-scope="{ node, data }"> |
|
<span class="org-name">{{ data.name }}</span> |
|
<span> |
|
<el-button type="text" icon="el-icon-circle-plus-outline" @click="() => addType(node, data)"> |
|
</el-button> |
|
<el-button type="text" icon="el-icon-edit-outline" @click="() => editType(node, data)"> |
|
</el-button> |
|
<el-button type="text" icon="el-icon-delete" @click="() => delType(data)"> |
|
</el-button> |
|
</span> |
|
</span> |
|
</el-tree> |
|
</div> |
|
</div> |
|
|
|
<el-dialog :title="typeForm.id ? '编辑' : '新增' + '知识点分类'" :visible.sync="typeVisible" |
|
:close-on-click-modal="false" append-to-body width="400px"> |
|
<el-form v-if="typeVisible" ref="typeForm" :model="typeForm" :rules="typeRules" label-width="130px"> |
|
<el-form-item label="知识点分类名称" prop="name"> |
|
<el-input v-model.trim="typeForm.name" placeholder="请输入知识点分类" maxlength="20"></el-input> |
|
</el-form-item> |
|
<el-form-item label="设置上一级"> |
|
<el-cascader :options="types" v-model="cascaderValue" :props="cascaderProps" clearable |
|
style="width: 100%"> |
|
</el-cascader> |
|
</el-form-item> |
|
</el-form> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="closeType">取 消</el-button> |
|
<el-button type="primary" @click="typeSubmit">确 定</el-button> |
|
</span> |
|
</el-dialog> |
|
</div> |
|
|
|
<div class="right"> |
|
<h6 class="page-name">筛选</h6> |
|
<div class="tool"> |
|
<ul class="filter"> |
|
<li> |
|
<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> |
|
<el-button type="primary" @click="delAllSelection">批量删除</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="name" label="知识点名称" align="center" min-width="120"></el-table-column> |
|
<el-table-column prop="knowledgePointsClassification" label="知识点分类" align="center" min-width="120" |
|
show-overflow-tooltip></el-table-column> |
|
<el-table-column prop="relatedQuestionsNum" label="已关联试题" align="center" width="90"></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="100"> |
|
<template slot-scope="scope"> |
|
<el-button type="text" @click="edit(scope.row)">编辑</el-button> |
|
<!-- <el-button type="text" v-auth="'/system:后台账号:重置密码'" @click="resetPassword(scope.row)">转移</el-button> --> |
|
<el-button type="text" @click="del(scope.row)">删除</el-button> |
|
</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="!form.id ? '添加知识点' : '编辑知识点'" :visible.sync="knowledgeVisible" width="400px" append-to-body |
|
:close-on-click-modal="false"> |
|
<el-form :model="form" :rules="rules" label-width="100px"> |
|
<el-form-item prop="parentId" label="知识点分类"> |
|
<el-cascader placeholder="请选择题库分类" v-model="form.parentId" :options="types" |
|
:props="{ value: 'id', label: 'name', checkStrictly: true }" clearable></el-cascader> |
|
</el-form-item> |
|
<el-form-item prop="name" label="知识点名称"> |
|
<el-input placeholder="请输入知识点名称" v-model="form.name" maxlength="20"></el-input> |
|
</el-form-item> |
|
</el-form> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="knowledgeVisible = false">取 消</el-button> |
|
<el-button type="primary" @click="knowledgeSubmit">确 定</el-button> |
|
</span> |
|
</el-dialog> |
|
</div> |
|
</div> |
|
|
|
|
|
<el-dialog title="提示" :visible.sync="delVisible" width="400px" :close-on-click-modal="false" append-to-body |
|
custom-class="del-dia"> |
|
<div class="del-wrap"> |
|
<div class="icon el-icon-warning"></div> |
|
<div> |
|
<p>确认要删除【{{ curName }}】吗？</p> |
|
<p class="tips">删除后，其子级分类与知识点也将被删除。</p> |
|
</div> |
|
</div> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="delVisible = false">取消</el-button> |
|
<el-button type="primary" @click="delTypeSubmit">确定</el-button> |
|
</span> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import Util from '@/libs/util' |
|
import _ from 'lodash' |
|
import Breadcrumb from '@/components/breadcrumb' |
|
export default { |
|
components: { Breadcrumb }, |
|
data () { |
|
return { |
|
crumbs: [], |
|
questionBankId: this.$route.query.questionBankId, |
|
inQues: false, |
|
createSource: 1, |
|
loading: false, |
|
keyword: '', |
|
types: [], |
|
isNotJoin: 0, |
|
typeVisible: false, // 员工组织架对话框 |
|
typeForm: { |
|
id: '', |
|
name: '' |
|
}, |
|
cascaderValue: [], |
|
cascaderProps: { |
|
checkStrictly: true, |
|
label: "name", |
|
value: "id" |
|
}, |
|
treeVisible: true, |
|
isDetail: false, |
|
name: '', |
|
form: { |
|
name: '', |
|
parentId: [] |
|
}, |
|
typeRules: { |
|
name: [ |
|
{ required: true, message: '请输入知识点分类名称', trigger: 'blur' } |
|
] |
|
}, |
|
rules: { |
|
name: [ |
|
{ required: true, message: '请输入知识点名称', trigger: 'blur' } |
|
], |
|
}, |
|
filter: { |
|
timeOrderBy: '', |
|
name: '', |
|
}, |
|
listLoading: false, |
|
list: [], |
|
page: 1, |
|
pageSize: 10, |
|
total: 0, |
|
multipleSelection: [], |
|
|
|
knowledgeVisible: false, |
|
submiting: false, // 新增编辑防抖标识 |
|
|
|
|
|
delVisible: false, |
|
deleteQuestions: false, |
|
curName: '', |
|
curId: [], |
|
}; |
|
}, |
|
watch: { |
|
keyword: function () { |
|
clearTimeout(this.searchTimer) |
|
this.searchTimer = setTimeout(this.getType, 500) |
|
}, |
|
'filter.name': function () { |
|
clearTimeout(this.searchTimer) |
|
this.searchTimer = setTimeout(this.getList, 500) |
|
}, |
|
}, |
|
mounted () { |
|
const { query } = this.$route |
|
this.crumbs = [ |
|
{ |
|
name: query.questionBankName || '题库管理', |
|
route: '/quesBank' |
|
}, |
|
{ |
|
name: '试题列表', |
|
route: '/ques', |
|
query: { |
|
questionBankId: query.questionBankId, |
|
questionBankName: query.questionBankName, |
|
questionBankCategory: query.questionBankCategory |
|
} |
|
}, |
|
{ |
|
name: '知识点列表' |
|
}, |
|
] |
|
this.inQues = this.$route.path === '/ques/detail' // 当前页面是否在试题详情 |
|
this.getType() |
|
}, |
|
methods: { |
|
// 获取分类 |
|
async getType () { |
|
try { |
|
this.loading = true |
|
const { data } = await this.$post(this.api.classificationTreeStructure, { |
|
createSource: this.createSource, |
|
keyword: this.keyword, |
|
questionBankId: this.questionBankId, |
|
}) |
|
this.handleType(data) |
|
this.types = data |
|
this.getList() |
|
} finally { |
|
this.loading = false |
|
} |
|
}, |
|
// 分类筛选回调 |
|
changeType () { |
|
this.$refs.typeTree.setCurrentKey(null) |
|
this.initData() |
|
}, |
|
// 添加分类 |
|
addType (node, data) { |
|
this.typeForm = { |
|
id: '', |
|
parentId: data ? data.id : '', |
|
name: '', |
|
} |
|
this.typeVisible = true |
|
this.cascaderValue = data.path.split('/').map(e => +e) |
|
}, |
|
// 编辑分类 |
|
editType (node, data) { |
|
this.typeForm = { |
|
id: data.id, |
|
name: data.name |
|
} |
|
this.typeVisible = true |
|
const path = data.path.split('/').map(e => +e) |
|
this.cascaderValue = path.length > 1 ? path.slice(0, path.length - 1) : [] |
|
}, |
|
// 处理树形 |
|
handleType (list) { |
|
list.map(e => { |
|
if (e.children && e.children.length) { |
|
this.handleType(e.children) |
|
} else { |
|
delete e.children |
|
} |
|
}) |
|
}, |
|
// 删除分类 |
|
async delType (row) { |
|
try { |
|
await this.$confirm(`<p>确认要删除【${row.name}】吗？</p><p style="color: #f56c6c;">删除后，其子级分类与知识点都将被删除！</p>`, '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning', |
|
closeOnClickModal: false, |
|
dangerouslyUseHTMLString: true, |
|
}) |
|
await this.$post(this.api.knowledgeHierarchyDel, [row.id]) |
|
Util.successMsg('删除成功') |
|
this.getType() |
|
} catch (e) { } |
|
}, |
|
// 删除分类提交 |
|
async delTypeSubmit () { |
|
await this.$post(this.api.knowledgeHierarchyDel, this.curId) |
|
Util.successMsg('删除成功') |
|
this.delVisible = false |
|
this.getType() |
|
}, |
|
// 分类新增/编辑 |
|
typeSubmit () { |
|
this.$refs.typeForm.validate(async (valid) => { |
|
if (valid) { |
|
const form = this.typeForm |
|
const cas = this.cascaderValue |
|
const len = cas.length |
|
if (cas && len) { |
|
this.typeForm.parentId = cas[len - 1] |
|
} |
|
form.createSource = this.createSource |
|
form.questionBankId = this.questionBankId |
|
form.type = 0 |
|
await this.$post(this.api.knowledgeHierarchySave, form) |
|
Util.successMsg('保存成功') |
|
this.closeType() |
|
} |
|
}); |
|
}, |
|
// 点击树节点查询列表数据 |
|
handleNodeClick (data) { |
|
this.isNotJoin = '' |
|
this.initData() |
|
}, |
|
// 关闭组织新增编辑弹框 |
|
closeType () { |
|
this.typeVisible = false |
|
this.cascaderValue = [] |
|
this.getType() |
|
}, |
|
// 列表 |
|
async getList () { |
|
try { |
|
this.listLoading = true |
|
const res = await this.$post(this.api.knowledgeHierarchyList, { |
|
...this.filter, |
|
isNotJoin: this.isNotJoin || '', |
|
pageNum: this.page, |
|
pageSize: this.pageSize, |
|
questionBankId: this.questionBankId, |
|
knowledgePointCategoryId: 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 === 'createTime') this.filter.timeOrderBy = column.order ? column.order === 'ascending' ? 'asc' : 'desc' : '' |
|
this.getList() |
|
}, |
|
// 删除 |
|
async del (row) { |
|
try { |
|
await this.$confirm(`<p>确认要删除【${row.name}】吗？</p><p style="color: #f56c6c;">删除后，关联此知识点的试题将自动移除此知识点！</p>`, '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning', |
|
closeOnClickModal: false, |
|
dangerouslyUseHTMLString: true, |
|
}) |
|
await this.$post(this.api.knowledgeHierarchyDel, [row.id]) |
|
Util.successMsg('删除成功') |
|
this.getList() |
|
} catch (e) { } |
|
}, |
|
// 添加知识点 |
|
add () { |
|
const type = this.$refs.typeTree.getCurrentNode() |
|
this.form = { |
|
name: '', |
|
parentId: type ? type.path.split('/').map(e => +e) : [], |
|
} |
|
this.knowledgeVisible = true |
|
}, |
|
// 编辑知识点 |
|
async edit (row) { |
|
const { data } = await this.$post(`${this.api.knowledgeHierarchyFind}?id=${row.id}`) |
|
this.knowledgeVisible = true |
|
const path = data.path.split('/').map(e => +e) |
|
this.form = { |
|
id: row.id, |
|
name: row.name, |
|
parentId: path.slice(0, path.length - 1), |
|
} |
|
console.log(11, this.form) |
|
}, |
|
// 知识点提交 |
|
async knowledgeSubmit () { |
|
if (this.submiting) return false |
|
const form = _.cloneDeep(this.form) |
|
if (!form.name) return Util.warningMsg('请输入题库名称') |
|
this.submiting = true |
|
form.parentId = form.parentId.length ? form.parentId[form.parentId.length - 1] : 0 |
|
form.createSource = 1 |
|
form.questionBankId = this.questionBankId |
|
form.type = 1 |
|
try { |
|
await this.$post(this.api.knowledgeHierarchySave, form) |
|
Util.successMsg('保存成功') |
|
this.knowledgeVisible = false |
|
this.submiting = false |
|
this.getList() |
|
} catch (e) { |
|
this.submiting = false |
|
} |
|
}, |
|
async delAllSelection () { |
|
const list = this.multipleSelection |
|
if (list.length) { |
|
try { |
|
await this.$confirm(`<p style="margin-bottom: 10px;">确认要删除已选定的${list.length}个知识点吗？</p><p style="color: #f56c6c;">删除后，关联这些知识点的试题将自动移除这些知识点！</p>`, '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning', |
|
closeOnClickModal: false, |
|
dangerouslyUseHTMLString: true, |
|
}) |
|
await this.$post(this.api.knowledgeHierarchyDel, list.map(e => e.id)) |
|
Util.successMsg('删除成功') |
|
this.multipleSelection = [] |
|
this.$refs.table.clearSelection() |
|
this.getList() |
|
} catch (e) { } |
|
} else { |
|
Util.warningMsg('请选择数据') |
|
} |
|
}, |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.m-b-20 { |
|
margin-bottom: 20px; |
|
} |
|
|
|
.org-name { |
|
margin-right: 20px; |
|
} |
|
|
|
.w-100 { |
|
width: 100%; |
|
} |
|
|
|
.inQues { |
|
padding: 0 25px; |
|
} |
|
|
|
.wrap { |
|
display: flex; |
|
|
|
.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> |