|
|
|
|
@ -1,76 +1,52 @@ |
|
|
|
|
<template> |
|
|
|
|
<!-- 产品管理 --> |
|
|
|
|
<!-- 营销推广管理 --> |
|
|
|
|
<div style="padding-top: 24px"> |
|
|
|
|
<div class="tool"> |
|
|
|
|
<ul class="filter" style="align-items: flex-start"> |
|
|
|
|
<li> |
|
|
|
|
<label>学科类：</label> |
|
|
|
|
<el-select v-model="form.visibleRange" clearable placeholder="请选择可见范围" @change="getData"> |
|
|
|
|
<el-option v-for="(item,index) in regions" :key="index" :label="item.name" :value="item.id"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<label>专业：</label> |
|
|
|
|
<el-select v-model="form.categoryId" clearable placeholder="请选择课程分类" @change="getData"> |
|
|
|
|
<el-option label="不限" value=""></el-option> |
|
|
|
|
<el-option label="暂无分类" value="0"></el-option> |
|
|
|
|
<el-option v-for="(item,index) in classificationList" :key="index" :label="item.classificationName" :value="item.id"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<label>产品分类：</label> |
|
|
|
|
<el-select v-model="form.courseType" clearable placeholder="请选择课程类型" @change="getData"> |
|
|
|
|
<el-option v-for="(item,index) in types" :key="index" :label="item.name" :value="item.id"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<label>搜索：</label> |
|
|
|
|
<el-input placeholder="请输入" suffix-icon="el-icon-search" v-model="keyword" clearable size="small"></el-input> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<div> |
|
|
|
|
<el-button v-auth="'平台自建:新增'" type="primary" round @click="addCourse">新增</el-button> |
|
|
|
|
<el-button v-auth="'平台自建:批量删除'" type="primary" round @click="delAllData">批量删除</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-table :data="list" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
|
|
|
|
<el-table-column type="selection" width="80" align="center" :reserve-selection="true"></el-table-column> |
|
|
|
|
<el-table-column type="index" width="100" label="序号" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
{{ scope.$index + (page - 1) * pageSize + 1 }} |
|
|
|
|
</template> |
|
|
|
|
<el-table :data="list" class="table" ref="table" stripe header-align="center" row-key="id"> |
|
|
|
|
<el-table-column type="index" width="100" label="序号" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="courseName" label="图片" min-width="150" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-upload |
|
|
|
|
class="avatar-uploader" |
|
|
|
|
accept=".jpg,.png,.jpeg" |
|
|
|
|
:on-success="res => uploadSuccess(res, scope.row)" |
|
|
|
|
:limit="1" |
|
|
|
|
:action="api.fileupload" |
|
|
|
|
:headers="headers" |
|
|
|
|
:show-file-list="false" |
|
|
|
|
name="file" |
|
|
|
|
> |
|
|
|
|
<img v-if="scope.row.pic" :src="scope.row.pic" class="avatar"> |
|
|
|
|
<div class="uploader-default" v-else> |
|
|
|
|
<i class="el-icon-plus"></i> |
|
|
|
|
<p>上传图片</p> |
|
|
|
|
</div> |
|
|
|
|
</el-upload> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="courseName" label="产品名称" min-width="150" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="courseName" label="厂商" min-width="150" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="courseName" label="产品类型" min-width="150" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="courseName" label="关联产品" min-width="150" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="courseName" label="状态" min-width="150" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="courseName" label="订单量" min-width="150" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="courseName" label="最近编辑人" min-width="150" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="courseName" label="精选" min-width="150" align="center"></el-table-column> |
|
|
|
|
<el-table-column label="上架/下架" align="center"> |
|
|
|
|
<el-table-column prop="courseName" label="标题" min-width="150" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-input v-model="scope.row.title" placeholder="请输入标题" maxlength="100"></el-input> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="courseName" label="链接" min-width="150" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-input v-model="scope.row.title" placeholder="请输入链接" maxlength="100"></el-input> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column label="操作" align="center" width="250"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-switch |
|
|
|
|
v-model="scope.row.isShelves" |
|
|
|
|
:active-value="1" |
|
|
|
|
:inactive-value="0" |
|
|
|
|
@change="changeSwitch($event, scope.row)" |
|
|
|
|
@change="switchOff($event, scope.row)" |
|
|
|
|
v-auth="'/curriculum:上下架'"> |
|
|
|
|
</el-switch> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column label="操作" align="center" width="250"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-button v-auth="'平台自建:编辑信息'" type="text" @click="editCourse(scope.row)">编辑</el-button> |
|
|
|
|
<el-button class="m-l-10" v-auth="'平台自建:编辑信息'" type="text" @click="editCourse(scope.row)">编辑</el-button> |
|
|
|
|
<el-button v-auth="'平台自建:删除'" type="text" @click="handleDelete(scope.row)">删除</el-button> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
<div class="pagination"> |
|
|
|
|
<el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page"> |
|
|
|
|
</el-pagination> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
@ -80,71 +56,16 @@ import Setting from '@/setting' |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
timer: null, |
|
|
|
|
regionName: ['本校内', '全平台可见', '指定院校区域'], |
|
|
|
|
regions: [ |
|
|
|
|
{ |
|
|
|
|
id: '', |
|
|
|
|
name: '不限' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 1, |
|
|
|
|
name: '全平台' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 2, |
|
|
|
|
name: '指定院校区域' |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
types: [ |
|
|
|
|
{ |
|
|
|
|
id: '', |
|
|
|
|
name: '不限' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 1, |
|
|
|
|
name: '付费' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 0, |
|
|
|
|
name: '免费' |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
form: { |
|
|
|
|
visibleRange: '', |
|
|
|
|
categoryId: '', |
|
|
|
|
courseType: '' |
|
|
|
|
headers: { |
|
|
|
|
token: sessionStorage.getItem("token") |
|
|
|
|
}, |
|
|
|
|
keyword: "", |
|
|
|
|
classificationId: "", |
|
|
|
|
list: [], |
|
|
|
|
multipleSelection: [], |
|
|
|
|
classificationList: [], |
|
|
|
|
page: +this.$route.query.page || 1, // 当前页码 |
|
|
|
|
pageSize: 10, |
|
|
|
|
total: 0 |
|
|
|
|
list: [{}], |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
keyword: function(val) { |
|
|
|
|
clearTimeout(this.searchTimer); |
|
|
|
|
this.searchTimer = setTimeout(() => { |
|
|
|
|
this.initData(); |
|
|
|
|
}, 500); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.getClassification(); |
|
|
|
|
this.getData(); |
|
|
|
|
this.$once('hook:beforeDestroy', function() { |
|
|
|
|
clearInterval(this.timer) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
//原理论课程需求: |
|
|
|
|
// 用户创建的理论课程，禁用时职站首页以及学生登录后的理论课程模块看不到对应的课程，创建的老师在理论课程管理还是可以看到该理论课程，可以编辑，但是无法启用。 |
|
|
|
|
// 即中台禁用的理论课程，即使是该院校老师创建的，老师端也不能自己启用，需要中台启用。 |
|
|
|
|
//1.判断当前院校禁启用状态为要启用时候再判断当前课程中台禁启用的状态 |
|
|
|
|
getList() { |
|
|
|
|
this.$post(this.api.listTheoreticalCourse, { |
|
|
|
|
pageNum: this.page, |
|
|
|
|
@ -163,41 +84,24 @@ export default { |
|
|
|
|
}).catch(res => { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
// 获取redis缓存 |
|
|
|
|
getRedis() { |
|
|
|
|
this.$post(this.api.getRedisCache).then(({ data }) => { |
|
|
|
|
data && this.getList() |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}, |
|
|
|
|
getData() { |
|
|
|
|
this.getList() |
|
|
|
|
if (!Setting.isDev) { |
|
|
|
|
clearInterval(this.timer) |
|
|
|
|
this.timer = setInterval(this.getRedis, 1000) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
initData() { |
|
|
|
|
this.page = 1; |
|
|
|
|
this.getData(); |
|
|
|
|
handleExceed() { // 文件超出个数限制时的钩子 |
|
|
|
|
this.$message.warning("当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！"); |
|
|
|
|
}, |
|
|
|
|
getClassification() { |
|
|
|
|
this.$post(this.api.listClassification, { |
|
|
|
|
pageNum: 1, |
|
|
|
|
pageSize: 1000, |
|
|
|
|
platformSource: Setting.platformSource |
|
|
|
|
}).then(({ page }) => { |
|
|
|
|
this.classificationList = page.records |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
uploadSuccess(res, row) { // 文件上传成功时的钩子 |
|
|
|
|
row.pic = res.data.filesResult.fileUrl; |
|
|
|
|
}, |
|
|
|
|
changeType(type) { |
|
|
|
|
this.classificationId = type; |
|
|
|
|
this.initData(); |
|
|
|
|
uploadError(err, file, fileList) { // 文件上传失败时的钩子 |
|
|
|
|
this.$message({ |
|
|
|
|
message: "上传出错，请重试！", |
|
|
|
|
type: "error", |
|
|
|
|
center: true |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
preview(row) { |
|
|
|
|
this.$router.push(`/previewTheoreticalCourse?id=${row.id}`); |
|
|
|
|
beforeRemove(file, fileList) { // 删除文件之前的钩子 |
|
|
|
|
return this.$confirm(`确定移除 ${file.name}？`); |
|
|
|
|
}, |
|
|
|
|
config(row) { |
|
|
|
|
this.$router.push(`/setTheoreticalCourse?id=${row.id}`); |
|
|
|
|
handleRemove(file, fileList) { // 文件列表移除文件时的钩子 |
|
|
|
|
// this.form.coverUrl = '' |
|
|
|
|
}, |
|
|
|
|
addCourse() { |
|
|
|
|
this.$router.push("/addTheoreticalCourse"); |
|
|
|
|
@ -219,36 +123,6 @@ export default { |
|
|
|
|
.catch(() => { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
handleSelectionChange(val) { |
|
|
|
|
this.multipleSelection = val; |
|
|
|
|
}, |
|
|
|
|
delAllData() { |
|
|
|
|
const list = this.multipleSelection |
|
|
|
|
if (list.length != "") { |
|
|
|
|
this.$confirm(`确定要删除吗？`, "提示", { |
|
|
|
|
type: "warning" |
|
|
|
|
}) |
|
|
|
|
.then(() => { |
|
|
|
|
const data = [] |
|
|
|
|
list.map(e => { |
|
|
|
|
data.push('ids=' + e.id) |
|
|
|
|
}) |
|
|
|
|
this.$post(`${this.api.delTheoreticalCourse}?${data.join('&')}`).then(res => { |
|
|
|
|
this.$refs.table.clearSelection(); |
|
|
|
|
util.successMsg("删除成功"); |
|
|
|
|
this.initData(); |
|
|
|
|
}).catch(res => { |
|
|
|
|
}); |
|
|
|
|
}).catch(() => { |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
util.errorMsg("请先选择数据 ！"); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
handleCurrentChange(val) { |
|
|
|
|
this.page = val; |
|
|
|
|
this.getData(); |
|
|
|
|
}, |
|
|
|
|
switchOff(val, row) { |
|
|
|
|
this.$post(this.api.disabledTheoreticalCourse, { |
|
|
|
|
courseId: row.id, |
|
|
|
|
@ -263,10 +137,66 @@ export default { |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
/deep/ .tool { |
|
|
|
|
.filter { |
|
|
|
|
.el-input { |
|
|
|
|
min-width: 215px; |
|
|
|
|
.m-l-10 { |
|
|
|
|
margin-left: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
$avatar-width: 104px; |
|
|
|
|
/deep/ .avatar-uploader { |
|
|
|
|
.el-upload { |
|
|
|
|
position: relative; |
|
|
|
|
width: $avatar-width; |
|
|
|
|
height: $avatar-width; |
|
|
|
|
border: 1px dashed #d9d9d9; |
|
|
|
|
border-radius: 2px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
border-color: #409EFF; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.uploader-default { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: center; |
|
|
|
|
width: $avatar-width !important; |
|
|
|
|
height: $avatar-width; |
|
|
|
|
text-align: center; |
|
|
|
|
background: rgba(0, 0, 0, 0.04); |
|
|
|
|
|
|
|
|
|
i { |
|
|
|
|
font-size: 20px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
color: #8c939d; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: rgba(0, 0, 0, 0.65); |
|
|
|
|
line-height: 1; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.avatar { |
|
|
|
|
width: $avatar-width; |
|
|
|
|
height: $avatar-width; |
|
|
|
|
display: block; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-upload__tip { |
|
|
|
|
margin-top: 0; |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: rgba(0, 0, 0, 0.45); |
|
|
|
|
line-height: 1; |
|
|
|
|
|
|
|
|
|
&:first-child { |
|
|
|
|
margin-bottom: 5px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
