|
|
|
|
@ -1,79 +1,120 @@ |
|
|
|
|
<template> |
|
|
|
|
<div> |
|
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
|
|
|
<el-card shadow="hover" |
|
|
|
|
class="m-b-20"> |
|
|
|
|
<div class="flex-between"> |
|
|
|
|
<el-page-header @back="back" :content="form.id ? '编辑课程' : '新增课程'"></el-page-header> |
|
|
|
|
<el-page-header @back="back" |
|
|
|
|
:content="form.id ? '编辑课程' : '新增课程'"></el-page-header> |
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
|
|
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
|
|
|
<el-form :model="form" :rules="rules" ref="form" :disabled="isDetail" label-width="120px" label-suffix=":"> |
|
|
|
|
<el-form-item prop="courseName" label="课程名称"> |
|
|
|
|
<el-card shadow="hover" |
|
|
|
|
class="m-b-20"> |
|
|
|
|
<el-form :model="form" |
|
|
|
|
:rules="rules" |
|
|
|
|
ref="form" |
|
|
|
|
:disabled="isDetail" |
|
|
|
|
label-width="120px" |
|
|
|
|
label-suffix=":"> |
|
|
|
|
<el-form-item prop="courseName" |
|
|
|
|
label="课程名称"> |
|
|
|
|
<div class="d-inline-block"> |
|
|
|
|
<el-input placeholder="请输入课程名称" v-model="form.courseName" clearable maxlength="25" @change="nameChange"></el-input> |
|
|
|
|
<el-input placeholder="请输入课程名称" |
|
|
|
|
v-model="form.courseName" |
|
|
|
|
clearable |
|
|
|
|
maxlength="25" |
|
|
|
|
@change="nameChange"></el-input> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="courseType" label="课程类型"> |
|
|
|
|
<el-form-item prop="courseType" |
|
|
|
|
label="课程类型"> |
|
|
|
|
<div class="d-inline-block"> |
|
|
|
|
<el-select v-model="form.courseType" placeholder="请选择课程类型"> |
|
|
|
|
<el-option label="免费" :value="0"></el-option> |
|
|
|
|
<el-select v-model="form.courseType" |
|
|
|
|
placeholder="请选择课程类型"> |
|
|
|
|
<el-option label="免费" |
|
|
|
|
:value="0"></el-option> |
|
|
|
|
<!-- <el-option label="付费" :value="1"></el-option> --> |
|
|
|
|
</el-select> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="visibleRange" label="可见范围"> |
|
|
|
|
<el-form-item prop="visibleRange" |
|
|
|
|
label="可见范围"> |
|
|
|
|
<div> |
|
|
|
|
<el-radio v-model="form.visibleRange" :label="0" @change="visibleChange">仅本校</el-radio> |
|
|
|
|
<el-radio v-model="form.visibleRange" |
|
|
|
|
:label="0" |
|
|
|
|
@change="visibleChange">仅本校</el-radio> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<el-radio v-model="form.visibleRange" :label="1" @change="visibleChange">全平台</el-radio> |
|
|
|
|
<el-radio v-model="form.visibleRange" |
|
|
|
|
:label="1" |
|
|
|
|
@change="visibleChange">全平台</el-radio> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="schoolClassificationsIds" label="课程分类"> |
|
|
|
|
<el-form-item prop="schoolClassificationsIds" |
|
|
|
|
label="课程分类"> |
|
|
|
|
<div class="d-inline-block"> |
|
|
|
|
<el-select v-model="form.schoolClassificationsIds" placeholder="请选择课程分类" multiple> |
|
|
|
|
<el-option v-for="item in classificationList" :key="item.id" :label="item.classificationName" :value="item.id"></el-option> |
|
|
|
|
<el-select v-model="form.schoolClassificationsIds" |
|
|
|
|
placeholder="请选择课程分类" |
|
|
|
|
multiple> |
|
|
|
|
<el-option v-for="item in classificationList" |
|
|
|
|
:key="item.id" |
|
|
|
|
:label="item.classificationName" |
|
|
|
|
:value="item.id"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item v-if="form.visibleRange == 1" prop="platformClassificationIds" label="平台课程分类"> |
|
|
|
|
<el-form-item v-if="form.visibleRange == 1" |
|
|
|
|
prop="platformClassificationIds" |
|
|
|
|
label="平台课程分类"> |
|
|
|
|
<div class="d-inline-block"> |
|
|
|
|
<el-select v-model="form.platformClassificationIds" placeholder="请选择平台课程分类" multiple> |
|
|
|
|
<el-option v-for="item in platformClassificationList" :key="item.id" :label="item.classificationName" :value="item.id"></el-option> |
|
|
|
|
<el-select v-model="form.platformClassificationIds" |
|
|
|
|
placeholder="请选择平台课程分类" |
|
|
|
|
multiple> |
|
|
|
|
<el-option v-for="item in platformClassificationList" |
|
|
|
|
:key="item.id" |
|
|
|
|
:label="item.classificationName" |
|
|
|
|
:value="item.id"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="coverUrl" label="课程封面"> |
|
|
|
|
<el-upload |
|
|
|
|
class="avatar-uploader" |
|
|
|
|
<el-form-item prop="coverUrl" |
|
|
|
|
label="课程封面"> |
|
|
|
|
<el-upload class="avatar-uploader" |
|
|
|
|
accept=".jpg,.png,.jpeg" |
|
|
|
|
:on-remove="handleRemove" |
|
|
|
|
:on-error="uploadError" |
|
|
|
|
:on-success="uploadSuccess" |
|
|
|
|
:before-remove="beforeRemove" |
|
|
|
|
:limit="1" |
|
|
|
|
:on-exceed="handleExceed" |
|
|
|
|
:action="this.api.fileupload" |
|
|
|
|
:headers="headers" |
|
|
|
|
name="file" |
|
|
|
|
> |
|
|
|
|
<img v-if="form.coverUrl" :src="form.coverUrl" class="avatar"> |
|
|
|
|
<div class="uploader-default" v-else> |
|
|
|
|
action="" |
|
|
|
|
:http-request="handleRequest"> |
|
|
|
|
<img v-if="form.coverUrl" |
|
|
|
|
:src="form.coverUrl" |
|
|
|
|
class="avatar"> |
|
|
|
|
<div class="uploader-default" |
|
|
|
|
v-else> |
|
|
|
|
<i class="el-icon-plus"></i> |
|
|
|
|
<p>上传封面</p> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div slot="tip" class="el-upload__tip"> |
|
|
|
|
<div slot="tip" |
|
|
|
|
class="el-upload__tip"> |
|
|
|
|
<p>只能上传jpg/png文件</p> |
|
|
|
|
<p>课程封面图将按2:1显示，最佳分辨率1400*700</p> |
|
|
|
|
</div> |
|
|
|
|
</el-upload> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="courseIntroduction" label="课程介绍"> |
|
|
|
|
<quill :border="true" :readonly="isDetail" v-model="form.courseIntroduction" :height="400" /> |
|
|
|
|
<el-form-item prop="courseIntroduction" |
|
|
|
|
label="课程介绍"> |
|
|
|
|
<quill :border="true" |
|
|
|
|
:readonly="isDetail" |
|
|
|
|
v-model="form.courseIntroduction" |
|
|
|
|
:height="400" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item> |
|
|
|
|
<el-button type="primary" @click="save(0)" v-show="!isDetail">{{ form.id ? "更新" : "创建" }}</el-button> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
@click="save(0)" |
|
|
|
|
v-show="!isDetail">{{ form.id ? "更新" : "创建" }}</el-button> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
</el-card> |
|
|
|
|
@ -84,9 +125,10 @@ |
|
|
|
|
import util from "@/libs/util"; |
|
|
|
|
import Setting from "@/setting"; |
|
|
|
|
import quill from "@/components/quill"; |
|
|
|
|
import Oss from '@/components/upload/upload.js' |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
data () { |
|
|
|
|
const that = this |
|
|
|
|
return { |
|
|
|
|
headers: { |
|
|
|
|
@ -168,7 +210,7 @@ export default { |
|
|
|
|
data.push(e) |
|
|
|
|
}) |
|
|
|
|
resolve(data) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
} else if (level === 1) { |
|
|
|
|
// 城市 |
|
|
|
|
that.$get(that.api.queryCity, { |
|
|
|
|
@ -183,7 +225,7 @@ export default { |
|
|
|
|
data.push(e) |
|
|
|
|
}) |
|
|
|
|
resolve(data) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
} else if (level === 2) { |
|
|
|
|
// 学校 |
|
|
|
|
that.$get(that.api.getSchoolsByProvince, { |
|
|
|
|
@ -200,7 +242,7 @@ export default { |
|
|
|
|
data.push(e) |
|
|
|
|
}) |
|
|
|
|
resolve(data) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
} else { |
|
|
|
|
resolve([]) |
|
|
|
|
} |
|
|
|
|
@ -212,15 +254,15 @@ export default { |
|
|
|
|
watch: { |
|
|
|
|
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
|
|
|
|
form: { |
|
|
|
|
handler(val){ |
|
|
|
|
handler (val) { |
|
|
|
|
this.updateTime++ |
|
|
|
|
}, |
|
|
|
|
deep:true |
|
|
|
|
deep: true |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 离开的时候判断是否有保存更改的信息,没有则拦截并提示 |
|
|
|
|
beforeRouteLeave(to, from, next) { |
|
|
|
|
if(this.updateTime){ |
|
|
|
|
beforeRouteLeave (to, from, next) { |
|
|
|
|
if (this.updateTime) { |
|
|
|
|
this.$confirm(`您所更改的内容未更新，是否更新？`, '提示', { |
|
|
|
|
type: 'warning' |
|
|
|
|
}).then(() => { |
|
|
|
|
@ -228,11 +270,11 @@ export default { |
|
|
|
|
}).catch(() => { |
|
|
|
|
next() |
|
|
|
|
}) |
|
|
|
|
}else{ |
|
|
|
|
} else { |
|
|
|
|
next() |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
mounted () { |
|
|
|
|
this.getClassification() |
|
|
|
|
this.form.id && this.getData() |
|
|
|
|
}, |
|
|
|
|
@ -241,7 +283,7 @@ export default { |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 分类 |
|
|
|
|
getClassification() { |
|
|
|
|
getClassification () { |
|
|
|
|
// 中台分类 |
|
|
|
|
this.$post(this.api.listClassification, { |
|
|
|
|
pageNum: 1, |
|
|
|
|
@ -249,7 +291,7 @@ export default { |
|
|
|
|
platformSource: 0 |
|
|
|
|
}).then(({ page }) => { |
|
|
|
|
this.platformClassificationList = page.records |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
|
|
|
|
|
// 教师端分类 |
|
|
|
|
this.$post(this.api.listClassification, { |
|
|
|
|
@ -258,9 +300,9 @@ export default { |
|
|
|
|
platformSource: Setting.platformSource |
|
|
|
|
}).then(({ page }) => { |
|
|
|
|
this.classificationList = page.records |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}, |
|
|
|
|
getData() { |
|
|
|
|
getData () { |
|
|
|
|
this.$post(`${this.api.findTheoreticalCourse}?id=${this.form.id}`).then(({ data }) => { |
|
|
|
|
// 分类id处理 |
|
|
|
|
if (data.platformClassificationList) { |
|
|
|
|
@ -280,10 +322,10 @@ export default { |
|
|
|
|
name: "cover.jpg", |
|
|
|
|
url: data.coverUrl |
|
|
|
|
}) |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
}).catch(err => { }) |
|
|
|
|
}, |
|
|
|
|
// 名称判重 |
|
|
|
|
nameChange(val) { |
|
|
|
|
nameChange (val) { |
|
|
|
|
this.$post(this.api.checkRepeatTheoreticalCourse, { |
|
|
|
|
id: this.form.id, |
|
|
|
|
courseName: val, |
|
|
|
|
@ -295,32 +337,33 @@ export default { |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 可见范围回调 |
|
|
|
|
visibleChange(val) { |
|
|
|
|
visibleChange (val) { |
|
|
|
|
this.rules.platformClassificationIds[0].required = val == 1 |
|
|
|
|
}, |
|
|
|
|
handleExceed(files, fileList) { // 上传文件 |
|
|
|
|
handleExceed (files, fileList) { // 上传文件 |
|
|
|
|
util.warningMsg("当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！"); |
|
|
|
|
}, |
|
|
|
|
uploadSuccess(res, file, fileList) { |
|
|
|
|
this.form.coverUrl = res.data.filesResult.fileUrl |
|
|
|
|
handleRequest ({ file }) { |
|
|
|
|
this.form.coverUrl && Oss.del(this.form.coverUrl) |
|
|
|
|
Oss.upload(file).then(res => { |
|
|
|
|
this.form.coverUrl = res.url |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
uploadError(err, file, fileList) { |
|
|
|
|
uploadError (err, file, fileList) { |
|
|
|
|
this.$message({ |
|
|
|
|
message: "上传出错，请重试！", |
|
|
|
|
type: "error", |
|
|
|
|
center: true |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
beforeRemove(file, fileList) { |
|
|
|
|
beforeRemove (file, fileList) { |
|
|
|
|
return this.$confirm(`确定移除 ${file.name}？`); |
|
|
|
|
}, |
|
|
|
|
handleRemove(file, fileList) { |
|
|
|
|
let fileName = this.form.coverUrl.replace('https://huoran.oss-cn-shenzhen.aliyuncs.com/', ""); |
|
|
|
|
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { |
|
|
|
|
handleRemove () { |
|
|
|
|
Oss.del(this.form.coverUrl) |
|
|
|
|
this.form.coverUrl = '' |
|
|
|
|
}).catch(res => {}); |
|
|
|
|
}, |
|
|
|
|
save(cb) { |
|
|
|
|
save (cb) { |
|
|
|
|
this.$refs.form.validate((valid) => { |
|
|
|
|
if (valid) { |
|
|
|
|
if (this.nameRepeat) return util.errorMsg('当前课程名已存在!') |
|
|
|
|
@ -359,10 +402,10 @@ export default { |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 返回上一页 |
|
|
|
|
backPage() { |
|
|
|
|
backPage () { |
|
|
|
|
this.$router.back() |
|
|
|
|
}, |
|
|
|
|
back() { |
|
|
|
|
back () { |
|
|
|
|
const updateTime = this.updateTime |
|
|
|
|
// 更改了信息才需要提示 |
|
|
|
|
if (updateTime) { |
|
|
|
|
@ -395,7 +438,7 @@ $avatar-width: 104px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
border-color: #409EFF; |
|
|
|
|
border-color: #409eff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.uploader-default { |
|
|
|
|
@ -446,7 +489,8 @@ $avatar-width: 104px; |
|
|
|
|
/deep/ .d-inline-block { |
|
|
|
|
width: 216px; |
|
|
|
|
|
|
|
|
|
.el-select, .el-input { |
|
|
|
|
.el-select, |
|
|
|
|
.el-input { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
