|
|
|
|
@ -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,6 +159,7 @@ |
|
|
|
|
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", |
|
|
|
|
@ -424,8 +469,10 @@ export default { |
|
|
|
|
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) { |
|
|
|
|
this.$message({ |
|
|
|
|
@ -437,11 +484,9 @@ export default { |
|
|
|
|
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 () { |
|
|
|
|
this.$refs.form.validate((valid) => { |
|
|
|
|
@ -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%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
