|
|
@ -2,7 +2,7 @@ |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
|
|
<div class="flex-between"> |
|
|
|
<div class="flex-between"> |
|
|
|
<el-page-header @back="goback" :content="id ? '编辑课程' : '新增课程'"></el-page-header> |
|
|
|
<el-page-header @back="back" :content="form.id ? '编辑课程' : '新增课程'"></el-page-header> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</el-card> |
|
|
|
|
|
|
|
|
|
|
@ -10,12 +10,12 @@ |
|
|
|
<el-form :disabled="isDetail" label-width="80px" label-suffix=":"> |
|
|
|
<el-form :disabled="isDetail" label-width="80px" label-suffix=":"> |
|
|
|
<el-form-item label="课程名称"> |
|
|
|
<el-form-item label="课程名称"> |
|
|
|
<div class="d-inline-block"> |
|
|
|
<div class="d-inline-block"> |
|
|
|
<el-input placeholder="请输入课程名称" v-model="name" clearable maxlength="25"></el-input> |
|
|
|
<el-input placeholder="请输入课程名称" v-model="form.name" clearable maxlength="25"></el-input> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="课程分类"> |
|
|
|
<el-form-item label="课程分类"> |
|
|
|
<div class="d-inline-block"> |
|
|
|
<div class="d-inline-block"> |
|
|
|
<el-select v-model="classificationId" placeholder="请选择课程分类"> |
|
|
|
<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-option v-for="item in classificationList" :key="item.id" :label="item.name" :value="item.id"></el-option> |
|
|
|
</el-select> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -34,7 +34,7 @@ |
|
|
|
:headers="headers" |
|
|
|
:headers="headers" |
|
|
|
name="file" |
|
|
|
name="file" |
|
|
|
> |
|
|
|
> |
|
|
|
<img v-if="coverUrl" :src="coverUrl" class="avatar"> |
|
|
|
<img v-if="form.coverUrl" :src="form.coverUrl" class="avatar"> |
|
|
|
<div class="uploader-default" v-else> |
|
|
|
<div class="uploader-default" v-else> |
|
|
|
<i class="el-icon-plus"></i> |
|
|
|
<i class="el-icon-plus"></i> |
|
|
|
<p>上传封面</p> |
|
|
|
<p>上传封面</p> |
|
|
@ -47,10 +47,10 @@ |
|
|
|
</el-upload> |
|
|
|
</el-upload> |
|
|
|
</el-form-item> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="课程介绍"> |
|
|
|
<el-form-item label="课程介绍"> |
|
|
|
<quill :border="true" :readonly="isDetail" v-model="description" :height="400" /> |
|
|
|
<quill :border="true" :readonly="isDetail" v-model="form.description" :height="400" /> |
|
|
|
</el-form-item> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button type="primary" v-throttle @click="save" v-show="!isDetail">{{ id ? "更新" : "创建" }}</el-button> |
|
|
|
<el-button type="primary" v-throttle @click="save" v-show="!isDetail">{{ form.id ? "更新" : "创建" }}</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</el-form> |
|
|
|
</el-card> |
|
|
|
</el-card> |
|
|
@ -69,92 +69,57 @@ export default { |
|
|
|
headers: { |
|
|
|
headers: { |
|
|
|
token: util.local.get(Setting.tokenKey) |
|
|
|
token: util.local.get(Setting.tokenKey) |
|
|
|
}, |
|
|
|
}, |
|
|
|
id: this.$route.query.id, |
|
|
|
|
|
|
|
isDetail: Boolean(this.$route.query.show), |
|
|
|
isDetail: Boolean(this.$route.query.show), |
|
|
|
username: this.$store.state.name, |
|
|
|
form: { |
|
|
|
classificationId: "", |
|
|
|
id: this.$route.query.id, |
|
|
|
coverUrl: "", |
|
|
|
classificationId: '', |
|
|
|
name: "", |
|
|
|
coverUrl: '', |
|
|
|
|
|
|
|
name: '', |
|
|
|
|
|
|
|
description: '', |
|
|
|
|
|
|
|
distinguish: 1 |
|
|
|
|
|
|
|
}, |
|
|
|
classificationList: [], |
|
|
|
classificationList: [], |
|
|
|
uploadList: [], |
|
|
|
uploadList: [], |
|
|
|
description: "", |
|
|
|
submiting: false, |
|
|
|
submiting: false |
|
|
|
updateTime: 0 |
|
|
|
}; |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
watch: { |
|
|
|
|
|
|
|
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
|
|
|
|
|
|
|
form: { |
|
|
|
|
|
|
|
handler(val){ |
|
|
|
|
|
|
|
this.updateTime++ |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
deep:true |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
mounted() { |
|
|
|
this.getClassification(); |
|
|
|
this.getClassification(); |
|
|
|
this.id && this.getData(); |
|
|
|
this.form.id && this.getData(); |
|
|
|
}, |
|
|
|
}, |
|
|
|
components: { |
|
|
|
components: { |
|
|
|
quill |
|
|
|
quill |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
methods: { |
|
|
|
save() { |
|
|
|
|
|
|
|
if (this.submiting) return false; |
|
|
|
|
|
|
|
if (!this.name) return util.warningMsg("请填写课程名称"); |
|
|
|
|
|
|
|
if (!this.classificationId) return util.warningMsg("请选择课程分类"); |
|
|
|
|
|
|
|
if (!this.coverUrl) return util.warningMsg("请上传课程封面"); |
|
|
|
|
|
|
|
this.submiting = true; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let data = { |
|
|
|
|
|
|
|
id: this.id, |
|
|
|
|
|
|
|
classificationId: this.classificationId, |
|
|
|
|
|
|
|
coverUrl: this.coverUrl, |
|
|
|
|
|
|
|
description: this.description, |
|
|
|
|
|
|
|
name: this.name, |
|
|
|
|
|
|
|
founderId: this.userId, |
|
|
|
|
|
|
|
founderName: this.username, |
|
|
|
|
|
|
|
distinguish: 1 |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
if (this.id) { |
|
|
|
|
|
|
|
this.$put(this.api.editCourse, data).then(res => { |
|
|
|
|
|
|
|
this.submiting = false; |
|
|
|
|
|
|
|
util.successMsg("修改成功"); |
|
|
|
|
|
|
|
this.$router.back(); |
|
|
|
|
|
|
|
}).catch(err => { |
|
|
|
|
|
|
|
this.submiting = false; |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
this.$post(this.api.addCourse, data).then(res => { |
|
|
|
|
|
|
|
this.submiting = false; |
|
|
|
|
|
|
|
this.$confirm("课程创建成功,是否马上进行课程内容设置?", "提示", { |
|
|
|
|
|
|
|
type: "success", |
|
|
|
|
|
|
|
confirmButtonText: "马上设置", |
|
|
|
|
|
|
|
cancelButtonText: "稍后操作" |
|
|
|
|
|
|
|
}).then(() => { |
|
|
|
|
|
|
|
this.$router.push(`/course/contentSettings?id=${res.courseId}`); |
|
|
|
|
|
|
|
}).catch(() => { |
|
|
|
|
|
|
|
this.$router.back(); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}).catch(err => { |
|
|
|
|
|
|
|
this.submiting = false; |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
getClassification() { |
|
|
|
getClassification() { |
|
|
|
this.$get(this.api.queryGlClassification).then(res => { |
|
|
|
this.$get(this.api.queryGlClassification).then(res => { |
|
|
|
this.classificationList = res.classificationList; |
|
|
|
this.classificationList = res.classificationList; |
|
|
|
}).catch(res => {}); |
|
|
|
}).catch(res => {}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
getData() { |
|
|
|
getData() { |
|
|
|
this.$get(`${this.api.getCourse}/${this.id}`).then(res => { |
|
|
|
this.$get(`${this.api.getCourse}/${this.form.id}`).then(({ course }) => { |
|
|
|
let data = res.course; |
|
|
|
this.form = course |
|
|
|
this.name = data.name; |
|
|
|
|
|
|
|
this.classificationId = data.classificationId; |
|
|
|
|
|
|
|
this.description = data.description; |
|
|
|
|
|
|
|
this.coverUrl = data.coverUrl; |
|
|
|
|
|
|
|
this.uploadList.push({ |
|
|
|
this.uploadList.push({ |
|
|
|
name: "cover.jpg", |
|
|
|
name: "cover.jpg", |
|
|
|
url: this.coverUrl |
|
|
|
url: course.coverUrl |
|
|
|
}); |
|
|
|
}) |
|
|
|
}).catch(err => {}); |
|
|
|
}).catch(err => {}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
handleExceed(files, fileList) { // 上传文件 |
|
|
|
handleExceed(files, fileList) { // 上传文件 |
|
|
|
util.warningMsg("当前限制选择 1 个文件,如需更换,请删除上一个文件再重新选择!"); |
|
|
|
util.warningMsg("当前限制选择 1 个文件,如需更换,请删除上一个文件再重新选择!"); |
|
|
|
}, |
|
|
|
}, |
|
|
|
uploadSuccess(res, file, fileList) { |
|
|
|
uploadSuccess(res, file, fileList) { |
|
|
|
this.coverUrl = res.data.filesResult.fileUrl; |
|
|
|
this.form.coverUrl = res.data.filesResult.fileUrl |
|
|
|
// this.uploadList.push({ name: file.name, url: response.message.fileUrl }); |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
uploadError(err, file, fileList) { |
|
|
|
uploadError(err, file, fileList) { |
|
|
|
this.$message({ |
|
|
|
this.$message({ |
|
|
@ -167,20 +132,61 @@ export default { |
|
|
|
return this.$confirm(`确定移除 ${file.name}?`); |
|
|
|
return this.$confirm(`确定移除 ${file.name}?`); |
|
|
|
}, |
|
|
|
}, |
|
|
|
handleRemove(file, fileList) { |
|
|
|
handleRemove(file, fileList) { |
|
|
|
let fileName = this.coverUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", ""); |
|
|
|
let fileName = this.form.coverUrl.replace('https://huoran.oss-cn-shenzhen.aliyuncs.com/', ""); |
|
|
|
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { |
|
|
|
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { |
|
|
|
this.coverUrl = ""; |
|
|
|
this.form.coverUrl = '' |
|
|
|
}).catch(res => {}); |
|
|
|
}).catch(res => {}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
goback() { // 返回 |
|
|
|
save() { |
|
|
|
if (this.isDetail) { |
|
|
|
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 => { |
|
|
|
|
|
|
|
this.submiting = false; |
|
|
|
|
|
|
|
util.successMsg("修改成功"); |
|
|
|
this.$router.back(); |
|
|
|
this.$router.back(); |
|
|
|
|
|
|
|
}).catch(err => { |
|
|
|
|
|
|
|
this.submiting = false; |
|
|
|
|
|
|
|
}); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
this.$confirm("确定返回?未更新的信息将不会保存。", "提示", { |
|
|
|
this.$post(this.api.addCourse, form).then(res => { |
|
|
|
type: "warning" |
|
|
|
this.submiting = false; |
|
|
|
|
|
|
|
this.$confirm("课程创建成功,是否马上进行课程内容设置?", "提示", { |
|
|
|
|
|
|
|
type: "success", |
|
|
|
|
|
|
|
confirmButtonText: "马上设置", |
|
|
|
|
|
|
|
cancelButtonText: "稍后操作" |
|
|
|
}).then(() => { |
|
|
|
}).then(() => { |
|
|
|
|
|
|
|
this.$router.push(`/course/contentSettings?id=${res.courseId}`); |
|
|
|
|
|
|
|
}).catch(() => { |
|
|
|
this.$router.back(); |
|
|
|
this.$router.back(); |
|
|
|
}).catch(() => {}); |
|
|
|
}); |
|
|
|
|
|
|
|
}).catch(err => { |
|
|
|
|
|
|
|
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() |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|