陈志鹏
2 years ago
5 changed files with 596 additions and 345 deletions
@ -1,233 +1,539 @@
@@ -1,233 +1,539 @@
|
||||
<template> |
||||
<div style="margin-top: 20px"> |
||||
<el-card shadow="never"> |
||||
<div style="display: flex;float: right"> |
||||
<div> |
||||
<div style="width: 50%;margin-top: 50px;float: left"> |
||||
<el-row type="flex" align="top" :gutter="10" class="el-row"> |
||||
<el-col :span="4" class="text-right"> |
||||
<span class="require-icon">*</span> |
||||
<span class="text-title">名称：</span> |
||||
</el-col> |
||||
<el-col :span="14" class="text-content"> |
||||
<el-input |
||||
maxlength="50" |
||||
:rows="1" |
||||
placeholder="最多输入50个字" |
||||
show-word-limit |
||||
<div style="width: 300px;height: 60px;margin-right: 50px"> |
||||
<div style="align-content: center"> |
||||
<div style="display: flex;float: left;margin-top: 20px;margin-left: 10px"> |
||||
<span style="">习题篮</span> |
||||
</div> |
||||
<div style="display: flex;float: left"> |
||||
<div style="margin-top: 12px;margin-left: 10px"> |
||||
<span style="font-size: 30px;">50</span> |
||||
</div> |
||||
</div> |
||||
<div style="display: flex;float: left"> |
||||
<div style="margin-top: 10px;margin-left: 20px"> |
||||
<img src="../../assets/sz.png" style="width: 40px;height: 40px"> |
||||
</div> |
||||
</div> |
||||
<div style="display: flex;float: left"> |
||||
<div style="margin-top: 10px;margin-left: 20px"> |
||||
<img src="../../assets/msg-course.png" style="width: 40px;height: 40px"> |
||||
</div> |
||||
</div> |
||||
<div style="display: flex;float: left"> |
||||
<div style="margin-top: 10px;margin-left: 20px"> |
||||
<img src="../../assets/delete.png" style="width: 40px;height: 40px"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-form :inline="true"> |
||||
<el-form-item style="margin-top: 10px"> |
||||
<el-upload |
||||
class="upload" |
||||
action="#" |
||||
:show-file-list="true" |
||||
:on-change="handleExcel" |
||||
accept="'.xlsx','.xls'" |
||||
:auto-upload="false"> |
||||
<el-button type="primary">批量导入</el-button> |
||||
</el-upload> |
||||
</el-form-item> |
||||
</el-form> |
||||
<el-form :inline="true"> |
||||
<el-form-item style="margin-top: 10px"> |
||||
<el-button type="primary" |
||||
@click="addCourse()">创建习题 |
||||
</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
<div class="crud__left"> |
||||
<el-form :inline="true"> |
||||
<div style="float: right;"> |
||||
<el-row> |
||||
<el-form-item style="float: left" label="关键子："> |
||||
<el-input v-model="dataForm.name" |
||||
placeholder="关键子" clearable></el-input> |
||||
</el-form-item> |
||||
<el-form-item style="float: left" label="类型："> |
||||
<el-select |
||||
clearable |
||||
v-model="dataForm.type" |
||||
placeholder="请选择" |
||||
> |
||||
</el-input> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" align="top" :gutter="10" class="el-row"> |
||||
<el-col :span="4" class="text-right"> |
||||
<span class="require-icon">*</span> |
||||
<span class="text-title">介绍：</span> |
||||
</el-col> |
||||
<el-col :span="14" class="text-content"> |
||||
<el-inputq |
||||
type="textarea" |
||||
maxlength="150" |
||||
:rows="4" |
||||
placeholder="最多输入150个字" |
||||
show-word-limit |
||||
<el-option |
||||
v-for="item in typeList" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.id" |
||||
> |
||||
</el-inputq> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" align="middle" :gutter="10" class="el-row"> |
||||
<el-col :span="4" class="text-right"> |
||||
<span class="require-icon">*</span> |
||||
<span class="text-title">类型：</span> |
||||
</el-col> |
||||
<el-col :span="14" class="text-content"> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item style="float: left" label="难度："> |
||||
<el-select |
||||
style="width:100%" |
||||
clearable |
||||
multiple |
||||
placeholder="请选择类型" |
||||
v-model="dataForm.difficulty" |
||||
placeholder="请选择" |
||||
> |
||||
<el-option |
||||
v-for="item in typelist" |
||||
v-for="item in difficultyList" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.id" |
||||
> |
||||
</el-option> |
||||
</el-select> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" align="middle" :gutter="10" class="el-row"> |
||||
<el-col :span="4" class="text-right"> |
||||
<span class="require-icon">*</span> |
||||
<span class="text-title">难度：</span> |
||||
</el-col> |
||||
<el-col :span="14" class="text-content"> |
||||
</el-form-item> |
||||
<el-form-item style="float: left" label="科目："> |
||||
<el-select |
||||
style="width:100%" |
||||
clearable |
||||
multiple |
||||
placeholder="请选择难度" |
||||
v-model="dataForm.subjectIdList" |
||||
placeholder="请选择" |
||||
> |
||||
<el-option |
||||
v-for="item in typelist" |
||||
v-for="item in subjectList" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.id" |
||||
> |
||||
</el-option> |
||||
</el-select> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" align="middle" :gutter="10" class="el-row"> |
||||
<el-col :span="4" class="text-right"> |
||||
<span class="require-icon">*</span> |
||||
<span class="text-title">分类：</span> |
||||
</el-col> |
||||
<el-col :span="14" class="text-content"> |
||||
</el-form-item> |
||||
<el-form-item style="float: left" label="状态："> |
||||
<el-select |
||||
style="width:100%" |
||||
clearable |
||||
multiple |
||||
placeholder="请选择分类" |
||||
v-model="dataForm.coursestatus" |
||||
placeholder="请选择" |
||||
> |
||||
<el-option |
||||
v-for="item in typelist" |
||||
v-for="item in statusList" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.id" |
||||
> |
||||
</el-option> |
||||
</el-select> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
<div style="width: 50%;margin-top: 50px;float: right"> |
||||
<el-row type="flex" align="top" :gutter="10" class="el-row"> |
||||
<el-col :span="4" class="text-right"> |
||||
<span class="text-title">添加习题：</span> |
||||
</el-col> |
||||
<el-col :span="14" class="text-content"> |
||||
<el-button style="" @click="next" size="mini">添加</el-button> |
||||
</el-col> |
||||
</el-form-item> |
||||
<el-form-item style="float: left" label="是否真题："> |
||||
<el-select |
||||
clearable |
||||
v-model="dataForm.essential" |
||||
placeholder="请选择" |
||||
> |
||||
<el-option |
||||
v-for="item in essentialList" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.id" |
||||
> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-row> |
||||
<el-row type="flex" align="top" :gutter="10" class="el-row"> |
||||
<el-col :span="14" class="text-content"> |
||||
<el-button style="" @click="next">确认</el-button> |
||||
</el-col> |
||||
<el-row> |
||||
<el-form-item style="float: left" label="创建时间："> |
||||
<el-date-picker |
||||
v-model="dataForm.time" |
||||
type="daterange" |
||||
range-separator="至" |
||||
start-placeholder="开始日期" |
||||
style="width: 320px" |
||||
end-placeholder="结束日期"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item style="float: right;"> |
||||
<el-button type="primary" |
||||
@click="submitClick">查询 |
||||
</el-button> |
||||
</el-form-item> |
||||
</el-row> |
||||
</div> |
||||
</el-form> |
||||
</div> |
||||
<div> |
||||
<el-table :data="dataList" max-height="800"> |
||||
<el-table-column label="序号" |
||||
header-align="center" align="center" width="50"> |
||||
<template slot-scope="scope"> |
||||
<span> |
||||
{{ scope.$index + 1 }} |
||||
</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="content" label="习题题干" |
||||
header-align="center" align="left" width="300"> |
||||
</el-table-column> |
||||
<el-table-column prop="type" label="类型" |
||||
header-align="center" align="center" width="150"> |
||||
<template slot-scope="scope"> |
||||
<b v-if="scope.row.type === 'SINGLE'">单选题</b> |
||||
<b v-if="scope.row.type === 'MULTI'">多选题</b> |
||||
<b v-if="scope.row.type === 'YESNO'">判断题</b> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="subjectId" label="科目" |
||||
header-align="center" align="center" width="120"> |
||||
<template slot-scope="scope"> |
||||
<b>{{scope.row.subjectName}}</b> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="creationTime" label="创建时间" |
||||
header-align="center" align="center" width="200"> |
||||
<template slot-scope="scope"> |
||||
<b>{{scope.row.creationTime.toString().substr(0,10)}}</b> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="original" label="是否真题" |
||||
header-align="center" align="center" width="120"> |
||||
<template slot-scope="scope"> |
||||
<b v-if="scope.row.original">是</b> |
||||
<b v-else>否</b> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="difficulty" label="难度" |
||||
header-align="center" align="center" width="150"> |
||||
</el-table-column> |
||||
<el-table-column prop="collectionNum" label="引用数" |
||||
header-align="center" align="center" width="200"> |
||||
<template slot-scope="scope"> |
||||
<b v-if="scope.row.collectionNum !== null">{{scope.row.collectionNum}}</b> |
||||
<b v-else>0</b> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" fixed="right" header-align="center" align="center" |
||||
width="150"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" size="mini" |
||||
@click="updateCourse(scope.row)">查看 |
||||
</el-button> |
||||
<el-button type="text" size="mini" |
||||
@click="updateRow(scope.row,'DOWN')">隐藏 |
||||
</el-button> |
||||
<el-button type="text" size="mini" |
||||
@click="updateRow(scope.row,'UP')">加篮 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<el-pagination |
||||
:current-page="page" |
||||
layout="total, sizes, prev, pager, next, jumper" |
||||
:page-size="limit" |
||||
:page-sizes="pageSizes" |
||||
:total="total" |
||||
@current-change="pageCurrentChangeHandle" |
||||
@size-change="pageSizeChangeHandle"/> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import { postRequest, getRequest, deleteRequest, putRequest, uploadFileRequest } from '../../utils/api' |
||||
export default { |
||||
data() { |
||||
data () { |
||||
return { |
||||
active: 1, |
||||
typelist: [], |
||||
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}], |
||||
data: [{ |
||||
label: '一级 1', |
||||
children: [{ |
||||
label: '二级 1-1', |
||||
children: [{ |
||||
label: '三级 1-1-1' |
||||
}] |
||||
}] |
||||
}, { |
||||
label: '一级 2', |
||||
children: [{ |
||||
label: '二级 2-1', |
||||
children: [{ |
||||
label: '三级 2-1-1' |
||||
}] |
||||
}, { |
||||
label: '二级 2-2', |
||||
children: [{ |
||||
label: '三级 2-2-1' |
||||
}] |
||||
}] |
||||
}, { |
||||
label: '一级 3', |
||||
children: [{ |
||||
label: '二级 3-1', |
||||
children: [{ |
||||
label: '三级 3-1-1' |
||||
}] |
||||
}, { |
||||
label: '二级 3-2', |
||||
children: [{ |
||||
label: '三级 3-2-1' |
||||
}] |
||||
}] |
||||
}], |
||||
}; |
||||
}, |
||||
|
||||
methods: { |
||||
next() { |
||||
if (this.active++ > 1) this.active = 1; |
||||
page: 1, // 当前页码 |
||||
limit: 10, // 每页数 |
||||
total: 0, // 总条数 |
||||
pageSizes: [10, 50, 100, 500, 1000], // 分页条数设置 |
||||
activeName: 'first', |
||||
dataForm: { |
||||
essential: '', |
||||
difficulty: '', |
||||
name: '', |
||||
teacherName: '', |
||||
type: '', |
||||
coursestatus: '', |
||||
time: [], |
||||
subjectIdList: [] |
||||
}, |
||||
handleRemove(file, fileList) { |
||||
console.log(file, fileList); |
||||
typeList: [ |
||||
{ |
||||
id: '', |
||||
name: '全部' |
||||
}, |
||||
handlePreview(file) { |
||||
console.log(file); |
||||
{ |
||||
id: 'SINGLE', |
||||
name: '单选题' |
||||
}, |
||||
finde(){ |
||||
// 打开路由 |
||||
this.$router.push({ |
||||
path: "/coures", |
||||
query: { |
||||
{ |
||||
id: 'MULTI', |
||||
name: '多选题' |
||||
}, |
||||
{ |
||||
id: 'YESNO', |
||||
name: '对错题' |
||||
}, |
||||
], |
||||
essentialList: [ |
||||
{ |
||||
id: '', |
||||
name: '全部', |
||||
}, |
||||
{ |
||||
id: '1', |
||||
name: '是', |
||||
}, |
||||
{ |
||||
id: '2', |
||||
name: '否', |
||||
} |
||||
}); |
||||
], |
||||
difficultyList: [ |
||||
{ |
||||
id: '', |
||||
name: '全部' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '1' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '2' |
||||
}, |
||||
{ |
||||
id: 3, |
||||
name: '3' |
||||
}, |
||||
{ |
||||
id: 4, |
||||
name: '4' |
||||
}, |
||||
{ |
||||
id: 5, |
||||
name: '5' |
||||
}, |
||||
], |
||||
statusList: [ |
||||
{ |
||||
id: '', |
||||
name: '全部' |
||||
}, |
||||
{ |
||||
id: '1', |
||||
name: '未被引用' |
||||
}, |
||||
{ |
||||
id: '2', |
||||
name: '被引用' |
||||
}, |
||||
{ |
||||
id: '3', |
||||
name: '已隐藏' |
||||
}, |
||||
], |
||||
dataFormType: { |
||||
name: '' |
||||
}, |
||||
dataList: [], |
||||
subjectList: [], |
||||
teacherList: [] |
||||
} |
||||
}, |
||||
activated () { |
||||
this.submitClick() |
||||
this.getTypeList() |
||||
}, |
||||
created () { |
||||
this.submitClick() |
||||
this.getTypeList() |
||||
this.getTeacherList() |
||||
}, |
||||
mounted () { |
||||
}, |
||||
methods: { |
||||
//导入表格 |
||||
handleExcel(file) { |
||||
let formData = new FormData(); //声明一个FormDate对象 |
||||
formData.append("file", file.raw); //把文件信息放入对象中 |
||||
//调用后台导入的接口 |
||||
uploadFileRequest('/edu/v1/pc/question/upload',formData).then(res => { |
||||
// console.log(res) |
||||
if (res.Status && res.Data) { |
||||
this.$message.success("导入成功"); |
||||
this.getList(); // 导入表格之后可以获取导入的数据渲染到页面，此处的方法是获取导入的数据 |
||||
} else { |
||||
this.$message.error(res.Message) |
||||
} |
||||
} |
||||
</script> |
||||
<style scoped> |
||||
.apply-step-box { |
||||
padding: 24px 104px; |
||||
}).catch(err => { |
||||
that.$message({ |
||||
type: 'error', |
||||
message: '导入失败' |
||||
}) |
||||
}) |
||||
}, |
||||
//分页-页数 |
||||
pageCurrentChangeHandle (val) { |
||||
this.page = val |
||||
this.submitClick() |
||||
}, |
||||
//分页-条数 |
||||
pageSizeChangeHandle (val) { |
||||
this.page = 1 |
||||
this.limit = val |
||||
this.submitClick() |
||||
}, |
||||
//查询初始化 |
||||
submitClickType: function (item) { |
||||
var _this = this; |
||||
this.loading = true; |
||||
getRequest('/edu/v1/pc/course3', { |
||||
filer: {name: this.dataForm.name}, |
||||
pagination: {pageNo: 1,pageSize: 10} |
||||
}).then(resp=> { |
||||
_this.loading = false; |
||||
if (resp.status === 200) { |
||||
this.dataList = resp.data.data.list |
||||
} else { |
||||
//失败 |
||||
_this.$alert(''); |
||||
} |
||||
}, resp=> { |
||||
}); |
||||
}, |
||||
//状态修改 |
||||
updateRow(row,status){ |
||||
putRequest('/edu/v1/pc/updateCourse/'+row.id+'/'+status).then(res=> { |
||||
console.log('111----', res) |
||||
this.$alert('修改成功','修改'); |
||||
this.submitClick() |
||||
}) |
||||
}, |
||||
//删除 |
||||
deleteRow(row){ |
||||
deleteRequest('/edu/v1/pc/course/'+row.id).then(res=> { |
||||
console.log('111----', res) |
||||
this.$alert('删除成功','删除'); |
||||
this.submitClick() |
||||
}) |
||||
}, |
||||
//查询列表 |
||||
submitClick: function () { |
||||
var _this = this; |
||||
this.loading = true; |
||||
var startTime = '' |
||||
var endTime = '' |
||||
if(this.dataForm.time !==null && this.dataForm.time.length>0){ |
||||
startTime = this.dataForm.time[0] |
||||
endTime = this.dataForm.time[1] |
||||
} |
||||
.el-row { |
||||
margin-bottom: 15px; |
||||
.text-right { |
||||
text-align: right; |
||||
.text-title { |
||||
color: #606266; |
||||
var filter = { |
||||
filer: { |
||||
name: this.dataForm.name, |
||||
type: this.dataForm.type, |
||||
coursestatus: this.dataForm.coursestatus, |
||||
subjectIdList: this.dataForm.subjectIdList, |
||||
teacherName: this.dataForm.teacherName, |
||||
startTime: startTime, |
||||
endTime: endTime, |
||||
difficulty: this.dataForm.difficulty, |
||||
essential: this.dataForm.essential |
||||
}, |
||||
pagination: { |
||||
pageNo: this.page, |
||||
pageSize: this.limit |
||||
} |
||||
} |
||||
.text-content { |
||||
.content-span { |
||||
color: #909399; |
||||
postRequest('/edu/v1/mp/questionList', JSON.stringify(filter)).then(resp=> { |
||||
_this.loading = false; |
||||
if (resp.status === 200) { |
||||
this.dataList = resp.data.data.list |
||||
this.total = resp.data.data.size |
||||
} else { |
||||
//失败 |
||||
_this.$alert(''); |
||||
} |
||||
.prompt { |
||||
font-size: 12px; |
||||
color: #909399; |
||||
}, resp=> { |
||||
}); |
||||
}, |
||||
getTypeList: function () { |
||||
var _this = this; |
||||
this.loading = true; |
||||
getRequest('/edu/v1/pc/subject/by/name', JSON.stringify({ |
||||
mode: 'all', |
||||
})).then(resp=> { |
||||
_this.loading = false; |
||||
if (resp.status === 200) { |
||||
this.subjectList = resp.data.data |
||||
} else { |
||||
//失败 |
||||
this.$alert(''); |
||||
} |
||||
.icon-tip { |
||||
width: 14px; |
||||
height: 14px; |
||||
}, resp=> { |
||||
}); |
||||
}, |
||||
getTeacherList: function () { |
||||
var _this = this; |
||||
this.loading = true; |
||||
getRequest('/edu/v1/pc/school/schoolTeacher', JSON.stringify({ |
||||
scope: '10010', |
||||
})).then(resp=> { |
||||
_this.loading = false; |
||||
if (resp.status === 200) { |
||||
this.teacherList = resp.data.data |
||||
} else { |
||||
//失败 |
||||
_this.$alert(''); |
||||
} |
||||
.button-check { |
||||
width: 88px; |
||||
background: #ffffff; |
||||
color: #409eff; |
||||
border: 1px solid #409eff; |
||||
border-radius: 0px 4px 4px 0px; |
||||
}, resp=> { |
||||
}); |
||||
}, |
||||
handleClick(tab, event) { |
||||
console.log(tab, event); |
||||
}, |
||||
addCourse(){ |
||||
// 打开路由 |
||||
this.$router.push({ |
||||
path: "/add-coures", |
||||
query: { |
||||
} |
||||
.color-red { |
||||
color: #f56c6c; |
||||
}); |
||||
}, |
||||
updateCourse(row){ |
||||
// 打开路由 |
||||
this.$router.push({ |
||||
path: "/coures-info", |
||||
query: { |
||||
couresName: row.type, |
||||
id: row.id |
||||
} |
||||
.font-12 { |
||||
font-size: 12px; |
||||
}); |
||||
}, |
||||
dyOpenTab(){ |
||||
// 打开路由 |
||||
this.$router.push({ |
||||
path: "/subscribe", |
||||
query: { |
||||
} |
||||
}); |
||||
} |
||||
.word-break { |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
.require-icon { |
||||
font-size: 14px; |
||||
color: #ff0000; |
||||
} |
||||
</script> |
||||
<style type="text/css"> |
||||
.crud__left { |
||||
display: -webkit-box; |
||||
display: -ms-flexbox; |
||||
display: flex; |
||||
float: left; |
||||
-webkit-box-pack: end; |
||||
-ms-flex-pack: end; |
||||
justify-content: flex-end |
||||
} |
||||
.crud__right { |
||||
display: -webkit-box; |
||||
display: -ms-flexbox; |
||||
display: flex; |
||||
-webkit-box-pack: end; |
||||
-ms-flex-pack: end; |
||||
justify-content: flex-end |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue