|
|
|
|
@ -7,39 +7,43 @@ |
|
|
|
|
</el-card> |
|
|
|
|
|
|
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
|
|
|
<el-form :disabled="isDetail" label-width="100px" label-suffix=":"> |
|
|
|
|
<el-form-item label="课程名称"> |
|
|
|
|
<el-form :model="form" :rules="rules" ref="form" :disabled="isDetail" label-width="110px" label-suffix=":"> |
|
|
|
|
<el-form-item prop="courseName" label="课程名称"> |
|
|
|
|
<div class="d-inline-block"> |
|
|
|
|
<el-input placeholder="请输入课程名称" v-model="form.name" clearable maxlength="25"></el-input> |
|
|
|
|
<el-input placeholder="请输入课程名称" v-model="form.courseName" clearable maxlength="25" @change="nameChange"></el-input> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="课程类型"> |
|
|
|
|
<el-form-item prop="courseType" label="课程类型"> |
|
|
|
|
<div class="d-inline-block"> |
|
|
|
|
<el-select v-model="form.classificationId" placeholder="请选择课程类型"> |
|
|
|
|
<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 label="可见范围"> |
|
|
|
|
<div class="d-inline-block"> |
|
|
|
|
<el-radio v-model="form.classificationId">本校</el-radio> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<el-radio v-model="form.visibleRange" :label="1">全平台</el-radio> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<el-radio v-model="form.visibleRange" :label="0">仅本校</el-radio> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="课程分类"> |
|
|
|
|
<el-form-item prop="schoolClassificationsIds" label="课程分类"> |
|
|
|
|
<div class="d-inline-block"> |
|
|
|
|
<el-select v-model="form.classificationId" placeholder="请选择课程分类"> |
|
|
|
|
<el-option v-for="item in classificationList" :key="item.id" :label="item.name" :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 label="平台课程分类"> |
|
|
|
|
<el-form-item prop="platformClassificationIds" label="平台课程分类"> |
|
|
|
|
<div class="d-inline-block"> |
|
|
|
|
<el-select v-model="form.classificationId" placeholder="平台请选择课程分类"> |
|
|
|
|
<el-option v-for="item in classificationList" :key="item.id" :label="item.name" :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 label="课程封面"> |
|
|
|
|
<el-form-item prop="coverUrl" label="课程封面"> |
|
|
|
|
<el-upload |
|
|
|
|
class="avatar-uploader" |
|
|
|
|
accept=".jpg,.png,.jpeg" |
|
|
|
|
@ -66,10 +70,10 @@ |
|
|
|
|
</el-upload> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="课程介绍"> |
|
|
|
|
<quill :border="true" :readonly="isDetail" v-model="form.description" :height="400" /> |
|
|
|
|
<quill :border="true" :readonly="isDetail" v-model="form.courseIntroduction" :height="400" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item> |
|
|
|
|
<el-button type="primary" v-throttle @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> |
|
|
|
|
@ -82,25 +86,116 @@ import Setting from "@/setting"; |
|
|
|
|
import quill from "@/components/quill"; |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
name: "courseAddEdit", |
|
|
|
|
data() { |
|
|
|
|
const that = this |
|
|
|
|
return { |
|
|
|
|
headers: { |
|
|
|
|
token: util.local.get(Setting.tokenKey) |
|
|
|
|
token: util.local.get(Setting.tokenKey) |
|
|
|
|
}, |
|
|
|
|
isDetail: Boolean(this.$route.query.show), |
|
|
|
|
form: { |
|
|
|
|
id: this.$route.query.id, |
|
|
|
|
classificationId: '', |
|
|
|
|
courseIntroduction: '', |
|
|
|
|
courseName: '', |
|
|
|
|
courseType: 0, |
|
|
|
|
coverUrl: '', |
|
|
|
|
name: '', |
|
|
|
|
description: '', |
|
|
|
|
distinguish: 1 |
|
|
|
|
platformSource: Setting.platformSource, |
|
|
|
|
platformClassificationIds: [], |
|
|
|
|
schoolClassificationsIds: [], |
|
|
|
|
visibleRange: 1 |
|
|
|
|
}, |
|
|
|
|
rules: { |
|
|
|
|
courseName: [ |
|
|
|
|
{ required: true, message: '请输入课程名称', trigger: 'blur' } |
|
|
|
|
], |
|
|
|
|
// platformClassificationIds: [ |
|
|
|
|
// { required: true, message: '请选择课程分类', trigger: 'change' } |
|
|
|
|
// ], |
|
|
|
|
coverUrl: [ |
|
|
|
|
{ required: true, message: '请选择课程封面', trigger: 'change' } |
|
|
|
|
] |
|
|
|
|
}, |
|
|
|
|
platformClassificationList: [], |
|
|
|
|
classificationList: [], |
|
|
|
|
uploadList: [], |
|
|
|
|
submiting: false, |
|
|
|
|
updateTime: 0 |
|
|
|
|
updateTime: 0, |
|
|
|
|
|
|
|
|
|
rangeVisible: false, |
|
|
|
|
range: [], |
|
|
|
|
rangeInit: [], |
|
|
|
|
rangeName: '', |
|
|
|
|
rangeChecked: [], |
|
|
|
|
schools: [], |
|
|
|
|
rangeList: [], |
|
|
|
|
rangeTimer: null, |
|
|
|
|
// 选择区域懒加载 |
|
|
|
|
props: { |
|
|
|
|
multiple: true, |
|
|
|
|
checkStrictly: true, |
|
|
|
|
lazy: true, |
|
|
|
|
lazyLoad (node, resolve) { |
|
|
|
|
// 如果是在模糊搜索中，则不再用懒加载请求数据 |
|
|
|
|
const input = document.querySelector('.el-cascader__search-input') |
|
|
|
|
const checked = that.rangeChecked |
|
|
|
|
|
|
|
|
|
if (input && input.value.trim()) { |
|
|
|
|
const val = input.value.trim() |
|
|
|
|
return that.schools.filter(e => e.label.includes(val)) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const { level, value } = node |
|
|
|
|
// 省份 |
|
|
|
|
if (!level) { |
|
|
|
|
that.$get(that.api.queryProvince).then(({ list }) => { |
|
|
|
|
const data = [] |
|
|
|
|
list.map(e => { |
|
|
|
|
e.value = e.provinceId |
|
|
|
|
e.label = e.provinceName |
|
|
|
|
e.children = [] |
|
|
|
|
e.disabled = !!checked.find(n => n.provinceId == e.provinceId && !n.cityId) |
|
|
|
|
data.push(e) |
|
|
|
|
}) |
|
|
|
|
resolve(data) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
} else if (level === 1) { |
|
|
|
|
// 城市 |
|
|
|
|
that.$get(that.api.queryCity, { |
|
|
|
|
provinceId: value |
|
|
|
|
}).then(({ list }) => { |
|
|
|
|
const data = [] |
|
|
|
|
list.map(e => { |
|
|
|
|
e.value = e.cityId |
|
|
|
|
e.label = e.cityName |
|
|
|
|
e.children = [] |
|
|
|
|
e.disabled = !!checked.find(n => n.cityId == e.cityId && n.provinceId == e.provinceId && !n.schoolId) |
|
|
|
|
data.push(e) |
|
|
|
|
}) |
|
|
|
|
resolve(data) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
} else if (level === 2) { |
|
|
|
|
// 学校 |
|
|
|
|
that.$get(that.api.getSchoolsByProvince, { |
|
|
|
|
provinceId: node.data.provinceId, |
|
|
|
|
cityId: value, |
|
|
|
|
schoolName: '' |
|
|
|
|
}).then(({ list }) => { |
|
|
|
|
const data = [] |
|
|
|
|
list.map(e => { |
|
|
|
|
e.value = e.schoolId |
|
|
|
|
e.label = e.schoolName |
|
|
|
|
e.leaf = true |
|
|
|
|
e.disabled = !!checked.find(n => n.schoolId == e.schoolId && n.cityId == e.cityId && n.provinceId == e.provinceId) |
|
|
|
|
data.push(e) |
|
|
|
|
}) |
|
|
|
|
resolve(data) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
} else { |
|
|
|
|
resolve([]) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
nameRepeat: false |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
@ -113,58 +208,96 @@ export default { |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.getClassification(); |
|
|
|
|
this.form.id && this.getData(); |
|
|
|
|
this.getClassification() |
|
|
|
|
this.form.id && this.getData() |
|
|
|
|
}, |
|
|
|
|
components: { |
|
|
|
|
quill |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
getClassification() { |
|
|
|
|
this.$get(this.api.queryGlClassification).then(res => { |
|
|
|
|
this.classificationList = res.classificationList; |
|
|
|
|
}).catch(res => {}); |
|
|
|
|
}, |
|
|
|
|
getData() { |
|
|
|
|
this.$get(`${this.api.getCourse}/${this.form.id}`).then(({ course }) => { |
|
|
|
|
this.form = course |
|
|
|
|
this.uploadList.push({ |
|
|
|
|
name: "cover.jpg", |
|
|
|
|
url: course.coverUrl |
|
|
|
|
}) |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
}, |
|
|
|
|
handleExceed(files, fileList) { // 上传文件 |
|
|
|
|
util.warningMsg("当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！"); |
|
|
|
|
}, |
|
|
|
|
uploadSuccess(res, file, fileList) { |
|
|
|
|
this.form.coverUrl = res.data.filesResult.fileUrl |
|
|
|
|
}, |
|
|
|
|
uploadError(err, file, fileList) { |
|
|
|
|
this.$message({ |
|
|
|
|
message: "上传出错，请重试！", |
|
|
|
|
type: "error", |
|
|
|
|
center: true |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
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 => { |
|
|
|
|
this.form.coverUrl = '' |
|
|
|
|
}).catch(res => {}); |
|
|
|
|
}, |
|
|
|
|
save() { |
|
|
|
|
// 分类 |
|
|
|
|
getClassification() { |
|
|
|
|
// 中台分类 |
|
|
|
|
this.$post(this.api.listClassification, { |
|
|
|
|
pageNum: 1, |
|
|
|
|
pageSize: 1000, |
|
|
|
|
platformSource: 0 |
|
|
|
|
}).then(({ page }) => { |
|
|
|
|
this.platformClassificationList = page.records |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
|
|
|
|
|
// 教师端分类 |
|
|
|
|
this.$post(this.api.listClassification, { |
|
|
|
|
pageNum: 1, |
|
|
|
|
pageSize: 1000, |
|
|
|
|
platformSource: Setting.platformSource |
|
|
|
|
}).then(({ page }) => { |
|
|
|
|
this.classificationList = page.records |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}, |
|
|
|
|
getData() { |
|
|
|
|
this.$post(`${this.api.findTheoreticalCourse}?id=${this.form.id}`).then(({ data }) => { |
|
|
|
|
// 分类id处理 |
|
|
|
|
if (data.platformClassificationList) { |
|
|
|
|
data.platformClassificationIds = data.platformClassificationList.map(e => e.classificationId) |
|
|
|
|
delete data.platformClassificationList |
|
|
|
|
} |
|
|
|
|
if (data.schoolClassificationsList) { |
|
|
|
|
data.schoolClassificationsIds = data.schoolClassificationsList.map(e => e.classificationId) |
|
|
|
|
delete data.schoolClassificationsList |
|
|
|
|
} |
|
|
|
|
this.form = data |
|
|
|
|
this.uploadList.push({ |
|
|
|
|
name: "cover.jpg", |
|
|
|
|
url: data.coverUrl |
|
|
|
|
}) |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
}, |
|
|
|
|
// 名称判重 |
|
|
|
|
nameChange(val) { |
|
|
|
|
this.$post(this.api.checkRepeatTheoreticalCourse, { |
|
|
|
|
id: this.form.id, |
|
|
|
|
courseName: val, |
|
|
|
|
platformSource: Setting.platformSource |
|
|
|
|
}).then(res => { |
|
|
|
|
this.nameRepeat = false |
|
|
|
|
}).catch(err => { |
|
|
|
|
this.nameRepeat = true |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
handleExceed(files, fileList) { // 上传文件 |
|
|
|
|
util.warningMsg("当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！"); |
|
|
|
|
}, |
|
|
|
|
uploadSuccess(res, file, fileList) { |
|
|
|
|
this.form.coverUrl = res.data.filesResult.fileUrl |
|
|
|
|
}, |
|
|
|
|
uploadError(err, file, fileList) { |
|
|
|
|
this.$message({ |
|
|
|
|
message: "上传出错，请重试！", |
|
|
|
|
type: "error", |
|
|
|
|
center: true |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
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 => { |
|
|
|
|
this.form.coverUrl = '' |
|
|
|
|
}).catch(res => {}); |
|
|
|
|
}, |
|
|
|
|
save() { |
|
|
|
|
this.$refs.form.validate((valid) => { |
|
|
|
|
if (valid) { |
|
|
|
|
if (this.nameRepeat) return util.errorMsg('当前课程名已存在!') |
|
|
|
|
if (this.submiting) return false |
|
|
|
|
const { form } = this |
|
|
|
|
if (!form.name) return util.warningMsg("请填写课程名称") |
|
|
|
|
if (!form.classificationId) return util.warningMsg("请选择课程分类") |
|
|
|
|
if (!form.coverUrl) return util.warningMsg("请上传课程封面") |
|
|
|
|
this.submiting = true |
|
|
|
|
if (form.id) { |
|
|
|
|
this.$put(this.api.editCourse, form).then(res => { |
|
|
|
|
form.courseId = form.id |
|
|
|
|
form.platformSource = Setting.platformSource |
|
|
|
|
this.$post(this.api.updateTheoreticalCourse, form).then(res => { |
|
|
|
|
this.submiting = false; |
|
|
|
|
util.successMsg("修改成功"); |
|
|
|
|
this.$router.back(); |
|
|
|
|
@ -172,14 +305,14 @@ export default { |
|
|
|
|
this.submiting = false; |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
this.$post(this.api.addCourse, form).then(res => { |
|
|
|
|
this.$post(this.api.saveTheoreticalCourse, form).then(res => { |
|
|
|
|
this.submiting = false; |
|
|
|
|
this.$confirm("课程创建成功，是否马上进行课程内容设置？", "提示", { |
|
|
|
|
type: "success", |
|
|
|
|
confirmButtonText: "马上设置", |
|
|
|
|
cancelButtonText: "稍后操作" |
|
|
|
|
}).then(() => { |
|
|
|
|
this.$router.push(`/course/contentSettings?id=${res.courseId}`); |
|
|
|
|
this.$router.push(`/setTheoreticalCourse?id=${res.id}`); |
|
|
|
|
}).catch(() => { |
|
|
|
|
this.$router.back(); |
|
|
|
|
}); |
|
|
|
|
@ -187,27 +320,29 @@ export default { |
|
|
|
|
this.submiting = false; |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 返回上一页 |
|
|
|
|
backPage() { |
|
|
|
|
this.$router.back() |
|
|
|
|
}, |
|
|
|
|
back() { |
|
|
|
|
const { id } = this.form |
|
|
|
|
const updateTime = this.updateTime |
|
|
|
|
// 更改了信息才需要提示 |
|
|
|
|
if ((id && updateTime > 2) || (!id && updateTime)) { |
|
|
|
|
this.$confirm(`编辑的内容未保存，是否保存？`, '提示', { |
|
|
|
|
type: 'warning' |
|
|
|
|
}).then(() => { |
|
|
|
|
this.save() |
|
|
|
|
}).catch(() => { |
|
|
|
|
this.backPage() |
|
|
|
|
}) |
|
|
|
|
} else { |
|
|
|
|
this.backPage() |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 返回上一页 |
|
|
|
|
backPage() { |
|
|
|
|
this.$router.back() |
|
|
|
|
}, |
|
|
|
|
back() { |
|
|
|
|
const { id } = this.form |
|
|
|
|
const updateTime = this.updateTime |
|
|
|
|
// 更改了信息才需要提示 |
|
|
|
|
if ((id && updateTime > 2) || (!id && updateTime)) { |
|
|
|
|
this.$confirm(`编辑的内容未保存，是否保存？`, '提示', { |
|
|
|
|
type: 'warning' |
|
|
|
|
}).then(() => { |
|
|
|
|
this.save() |
|
|
|
|
}).catch(() => { |
|
|
|
|
this.backPage() |
|
|
|
|
}) |
|
|
|
|
} else { |
|
|
|
|
this.backPage() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
@ -279,4 +414,13 @@ $avatar-width: 104px; |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.range-check { |
|
|
|
|
display: inline-block; |
|
|
|
|
margin: 0 0 10px 10px; |
|
|
|
|
} |
|
|
|
|
/deep/.range-cas { |
|
|
|
|
.el-tag { |
|
|
|
|
display: none; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
