|
|
|
|
@ -1,85 +1,126 @@ |
|
|
|
|
<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="100px" 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="100px" |
|
|
|
|
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="platformClassificationIds" label="课程分类"> |
|
|
|
|
<el-form-item prop="platformClassificationIds" |
|
|
|
|
label="课程分类"> |
|
|
|
|
<div class="d-inline-block"> |
|
|
|
|
<el-select v-model="form.platformClassificationIds" 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.platformClassificationIds" |
|
|
|
|
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 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="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-option label="付费" :value="1"></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" disabled>仅本校</el-radio> |
|
|
|
|
<el-radio v-model="form.visibleRange" |
|
|
|
|
:label="0" |
|
|
|
|
disabled>仅本校</el-radio> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<el-radio v-model="form.visibleRange" :label="1">全平台</el-radio> |
|
|
|
|
<el-radio v-model="form.visibleRange" |
|
|
|
|
:label="1">全平台</el-radio> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<el-radio v-model="form.visibleRange" :label="2">指定区域、院校</el-radio> |
|
|
|
|
<el-button v-if="form.visibleRange === 2" type="primary" size="mini" @click="showRange">选择院校</el-button> |
|
|
|
|
<el-radio v-model="form.visibleRange" |
|
|
|
|
:label="2">指定区域、院校</el-radio> |
|
|
|
|
<el-button v-if="form.visibleRange === 2" |
|
|
|
|
type="primary" |
|
|
|
|
size="mini" |
|
|
|
|
@click="showRange">选择院校</el-button> |
|
|
|
|
<span style="margin-left: 20px">{{ rangeName }}</span> |
|
|
|
|
</div> |
|
|
|
|
</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" v-show="!isDetail">{{ form.id ? "更新" : "创建" }}</el-button> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
@click="save" |
|
|
|
|
v-show="!isDetail">{{ form.id ? "更新" : "创建" }}</el-button> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
</el-card> |
|
|
|
|
|
|
|
|
|
<el-dialog title="请勾选院校" :visible.sync="rangeVisible" width="580px" custom-class="range-dia" :close-on-click-modal="false"> |
|
|
|
|
<el-dialog title="请勾选院校" |
|
|
|
|
:visible.sync="rangeVisible" |
|
|
|
|
width="580px" |
|
|
|
|
custom-class="range-dia" |
|
|
|
|
:close-on-click-modal="false"> |
|
|
|
|
<div class="range-wrap"> |
|
|
|
|
<el-cascader |
|
|
|
|
ref="range" |
|
|
|
|
<el-cascader ref="range" |
|
|
|
|
class="range-cas" |
|
|
|
|
key="range" |
|
|
|
|
v-model="range" |
|
|
|
|
@ -92,8 +133,7 @@ |
|
|
|
|
@change="rangeChange" |
|
|
|
|
@visible-change="rangeViChange" |
|
|
|
|
@input.native="rangeSearch"></el-cascader> |
|
|
|
|
<el-tag |
|
|
|
|
v-for="(tag, i) in rangeChecked" |
|
|
|
|
<el-tag v-for="(tag, i) in rangeChecked" |
|
|
|
|
:key="tag.value" |
|
|
|
|
class="range-check" |
|
|
|
|
closable |
|
|
|
|
@ -103,9 +143,13 @@ |
|
|
|
|
</el-tag> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
|
<el-button size="small" @click="rangeVisible = false">取 消</el-button> |
|
|
|
|
<el-button size="small" type="primary" @click="rangeSubmit">确 定</el-button> |
|
|
|
|
<span slot="footer" |
|
|
|
|
class="dialog-footer"> |
|
|
|
|
<el-button size="small" |
|
|
|
|
@click="rangeVisible = false">取 消</el-button> |
|
|
|
|
<el-button size="small" |
|
|
|
|
type="primary" |
|
|
|
|
@click="rangeSubmit">确 定</el-button> |
|
|
|
|
</span> |
|
|
|
|
</el-dialog> |
|
|
|
|
</div> |
|
|
|
|
@ -115,10 +159,11 @@ |
|
|
|
|
import util from "@/libs/util"; |
|
|
|
|
import Setting from "@/setting"; |
|
|
|
|
import quill from "@/components/quill"; |
|
|
|
|
import Oss from '@/components/upload/upload.js' |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
name: "courseAddEdit", |
|
|
|
|
data() { |
|
|
|
|
data () { |
|
|
|
|
const that = this |
|
|
|
|
return { |
|
|
|
|
headers: { |
|
|
|
|
@ -197,7 +242,7 @@ export default { |
|
|
|
|
data.push(e) |
|
|
|
|
}) |
|
|
|
|
resolve(data) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
} else if (level === 1) { |
|
|
|
|
// 城市 |
|
|
|
|
that.$get(that.api.queryCity, { |
|
|
|
|
@ -212,7 +257,7 @@ export default { |
|
|
|
|
data.push(e) |
|
|
|
|
}) |
|
|
|
|
resolve(data) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
} else if (level === 2) { |
|
|
|
|
// 学校 |
|
|
|
|
that.$get(that.api.getSchoolsByProvince, { |
|
|
|
|
@ -229,7 +274,7 @@ export default { |
|
|
|
|
data.push(e) |
|
|
|
|
}) |
|
|
|
|
resolve(data) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
} else { |
|
|
|
|
resolve([]) |
|
|
|
|
} |
|
|
|
|
@ -241,13 +286,13 @@ export default { |
|
|
|
|
watch: { |
|
|
|
|
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
|
|
|
|
form: { |
|
|
|
|
handler(val){ |
|
|
|
|
handler (val) { |
|
|
|
|
this.updateTime++ |
|
|
|
|
}, |
|
|
|
|
deep:true |
|
|
|
|
deep: true |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
mounted () { |
|
|
|
|
this.getClassification(); |
|
|
|
|
this.form.id && this.getData(); |
|
|
|
|
this.getSchool() |
|
|
|
|
@ -256,16 +301,16 @@ export default { |
|
|
|
|
quill |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
getClassification() { |
|
|
|
|
getClassification () { |
|
|
|
|
this.$post(this.api.listClassification, { |
|
|
|
|
pageNum: 1, |
|
|
|
|
pageSize: 1000, |
|
|
|
|
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) { |
|
|
|
|
@ -299,14 +344,14 @@ export default { |
|
|
|
|
name: "cover.jpg", |
|
|
|
|
url: data.coverUrl |
|
|
|
|
}) |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
}).catch(err => { }) |
|
|
|
|
}, |
|
|
|
|
// 选择范围 |
|
|
|
|
showRange() { |
|
|
|
|
showRange () { |
|
|
|
|
this.rangeVisible = true |
|
|
|
|
}, |
|
|
|
|
// 范围勾选回调 |
|
|
|
|
rangeChange(val, e) { |
|
|
|
|
rangeChange (val, e) { |
|
|
|
|
const checked = this.$refs.range.getCheckedNodes() |
|
|
|
|
const name = [] |
|
|
|
|
const { rangeChecked } = this |
|
|
|
|
@ -317,14 +362,14 @@ export default { |
|
|
|
|
console.log("🚀 ~ file: index.vue:306 ~ rangeChange ~ this.rangeChecked", this.rangeChecked) |
|
|
|
|
}, |
|
|
|
|
// 范围展开收缩回调 |
|
|
|
|
rangeViChange(e) { |
|
|
|
|
rangeViChange (e) { |
|
|
|
|
// 展开的时候清空搜索结果 |
|
|
|
|
if (e) { |
|
|
|
|
this.rangeList = [] |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 获取学校列表 |
|
|
|
|
getSchool() { |
|
|
|
|
getSchool () { |
|
|
|
|
this.$get(this.api.querySchoolData).then(({ list }) => { |
|
|
|
|
const result = [] |
|
|
|
|
list.map(e => { |
|
|
|
|
@ -334,14 +379,14 @@ export default { |
|
|
|
|
result.push(e) |
|
|
|
|
}) |
|
|
|
|
this.schools = result |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}, |
|
|
|
|
// 范围模糊查询前置钩子 |
|
|
|
|
beforeFilter() { |
|
|
|
|
beforeFilter () { |
|
|
|
|
return false |
|
|
|
|
}, |
|
|
|
|
// 范围筛选 |
|
|
|
|
rangeSearch(el) { |
|
|
|
|
rangeSearch (el) { |
|
|
|
|
const val = el.target.value.trim() |
|
|
|
|
const checked = this.rangeChecked |
|
|
|
|
if (!val) { |
|
|
|
|
@ -359,11 +404,11 @@ export default { |
|
|
|
|
this.rangeList = result |
|
|
|
|
}, 100) |
|
|
|
|
}, |
|
|
|
|
closeRange(i) { |
|
|
|
|
closeRange (i) { |
|
|
|
|
this.rangeChecked.splice(i, 1) |
|
|
|
|
}, |
|
|
|
|
// 范围确定 |
|
|
|
|
rangeSubmit() { |
|
|
|
|
rangeSubmit () { |
|
|
|
|
// 处理提交需要的id |
|
|
|
|
const data = [] |
|
|
|
|
const checked = this.rangeChecked |
|
|
|
|
@ -385,7 +430,7 @@ export default { |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
resolve() |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
})) |
|
|
|
|
} else { |
|
|
|
|
data.push({ |
|
|
|
|
@ -410,7 +455,7 @@ export default { |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 名称判重 |
|
|
|
|
nameChange(val) { |
|
|
|
|
nameChange (val) { |
|
|
|
|
this.$post(this.api.checkRepeatTheoreticalCourse, { |
|
|
|
|
id: this.form.id, |
|
|
|
|
courseName: val, |
|
|
|
|
@ -421,29 +466,29 @@ export default { |
|
|
|
|
this.nameRepeat = true |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
handleExceed(files, fileList) { // 上传文件 |
|
|
|
|
handleExceed (files, fileList) { // 上传文件 |
|
|
|
|
util.warningMsg("当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！"); |
|
|
|
|
}, |
|
|
|
|
uploadSuccess(res, file, fileList) { |
|
|
|
|
this.form.coverUrl = res.data.filesResult.fileUrl |
|
|
|
|
handleRequest ({ file }) { |
|
|
|
|
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() { |
|
|
|
|
save () { |
|
|
|
|
this.$refs.form.validate((valid) => { |
|
|
|
|
if (valid) { |
|
|
|
|
if (this.nameRepeat) return util.errorMsg('当前课程名已存在!') |
|
|
|
|
@ -479,10 +524,10 @@ export default { |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 返回上一页 |
|
|
|
|
backPage() { |
|
|
|
|
backPage () { |
|
|
|
|
this.$router.back() |
|
|
|
|
}, |
|
|
|
|
back() { |
|
|
|
|
back () { |
|
|
|
|
const { id } = this.form |
|
|
|
|
const updateTime = this.updateTime |
|
|
|
|
// 更改了信息才需要提示 |
|
|
|
|
@ -514,7 +559,7 @@ $avatar-width: 104px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
border-color: #409EFF; |
|
|
|
|
border-color: #409eff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.uploader-default { |
|
|
|
|
@ -565,7 +610,8 @@ $avatar-width: 104px; |
|
|
|
|
/deep/ .d-inline-block { |
|
|
|
|
width: 216px; |
|
|
|
|
|
|
|
|
|
.el-select, .el-input { |
|
|
|
|
.el-select, |
|
|
|
|
.el-input { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
