课程详情图片、课程编辑图片显示

This commit is contained in:
18571350067 2022-01-05 08:53:19 +08:00
parent 2f2717bbd7
commit f746f731fb
2 changed files with 45 additions and 57 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<a-card :bordered="false" title="课程新增"> <a-card :bordered="false" :title="pageName">
<template slot="extra"> <template slot="extra">
<a-button type="primary" @click="goback">返回</a-button> <a-button type="primary" @click="goback">返回</a-button>
<a-button type="primary" @click="save">保存</a-button> <a-button type="primary" @click="save">保存</a-button>
@ -83,7 +83,7 @@
<!-- 上传封面图片 --> <!-- 上传封面图片 -->
<a-col :span="18" :offset="3"> <a-col :span="18" :offset="3">
<a-form-model-item label="上传封面图片" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }"> <a-form-model-item label="上传封面图片" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
<db-upload v-model="fileList"></db-upload> <db-upload v-model="fileList" :max="1"></db-upload>
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
@ -116,6 +116,7 @@ export default {
name: 'step1', name: 'step1',
data() { data() {
return { return {
pageName: this.$route.query.id ? '课程编辑' : '课程新增',
dataValue: 1, dataValue: 1,
form: { form: {
coverPath: '', coverPath: '',
@ -137,32 +138,39 @@ export default {
components: { components: {
DbUpload, DbUpload,
courseAdd, courseAdd,
getCourseDetails getCourseDetails,
}, },
created() { created() {
this.dictionaryDropDown() this.dictionaryDropDown()
if (this.$route.query.id) { if(this.$route.query.id) this.loadData();
getCourseDetails({ id: this.$route.query.id }).then((res) => {
this.form = res.data
this.form.isRequired = this.form.isRequired + ''
this.form.tags = []
this.form.courseTags.forEach((item, index) => {
this.form.tags.push(item.dictValue.toString())
})
})
}
}, },
methods: { methods: {
// //
onChange(dataValue) {}, onChange(dataValue) {},
//
loadData() {
if (this.$route.query.id) {
getCourseDetails({ id: this.$route.query.id }).then((res) => {
this.form = res.data
this.form.isRequired = this.form.isRequired + ''
this.fileList = JSON.parse(this.form.coverPath)
this.form.tags = []
this.form.courseTags.forEach((item, index) => {
this.form.tags.push(item.dictValue.toString())
})
})
}
},
save() { save() {
this.form.coverPath = JSON.stringify(this.fileList)
courseAdd(this.form).then((res) => { courseAdd(this.form).then((res) => {
if (res.code == 200) { if (res.code == 200) {
this.$message.info('保存成功') this.$message.info('保存成功')
// //
this.goback(); this.goback()
} }
}) })
}, },
@ -194,53 +202,20 @@ export default {
// //
goback() { goback() {
console.log('this.$route.query.type',this.$route.query.type); console.log('this.$route.query.type', this.$route.query.type)
this.$router.push({ this.$router.push({
// /course/CourseList/sys // /course/CourseList/sys
path: '/course/CourseList/'+this.$route.query.type, path: '/course/CourseList/' + this.$route.query.type,
query: { query: {
courseName: this.$route.query.courseName, courseName: this.$route.query.courseName,
}, },
}) })
}, },
getToken() {
let hreader = {}
hreader[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN)
return hreader
},
onSuccess(file) {},
handleCancel() {
this.previewVisible = false
},
async handlePreview(file) {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj)
}
this.previewImage = file.url || file.preview
this.previewVisible = true
},
//
handleChange({ fileList }) {
this.fileList = fileList
this.fileList.file = fileList[0]
this.form.coverPath = this.fileList.file.response.url
},
// //
handleTagChange(value) { handleTagChange(value) {
this.form.tags = value this.form.tags = value
}, },
}, },
} }
// Base64
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => resolve(reader.result)
reader.onerror = (error) => reject(error)
})
}
</script> </script>

View File

@ -10,7 +10,7 @@
<a-descriptions-item label="备注"> {{ detailData.remark }} </a-descriptions-item> <a-descriptions-item label="备注"> {{ detailData.remark }} </a-descriptions-item>
<a-descriptions-item label="课程封面图"> <a-descriptions-item label="课程封面图">
<div> <div>
<img :src="detailData.coverPath"> <img style="width:75px;height:75px" :src="detailData.imagePath">
</div> </div>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item label="标签"> <a-descriptions-item label="标签">
@ -35,7 +35,8 @@ export default {
return { return {
queryParam: { id: this.$route.query.id }, queryParam: { id: this.$route.query.id },
detailData: { detailData: {
coverPath: [], imagePath: '', //
coverPath:[],
}, },
dictCourseType: [], dictCourseType: [],
dictCourseTag: [], dictCourseTag: [],
@ -43,16 +44,28 @@ export default {
} }
}, },
created: function () { created: function () {
let parameter = {}
getCourseDetails(Object.assign(parameter, this.queryParam)).then((res) => {
this.detailData = res.data
console.log(this.detailData)
})
// //
this.loadData()
this.dictionaryDropDown() this.dictionaryDropDown()
this.getTagName() this.getTagName()
}, },
methods: { methods: {
//
loadData() {
let parameter = {}
getCourseDetails(Object.assign(parameter, this.queryParam)).then((res) => {
this.detailData = res.data
this.detailData.coverPath = JSON.parse(res.data.coverPath)
console.log('JSON:::::',this.detailData.coverPath)
if(this.detailData.coverPath.length != 0)
this.detailData.imagePath = this.detailData.coverPath[0].url;
console.log('url',this.detailData.imagePath)
})
},
close() { close() {
this.$router.push({ path: '/course/CourseList/' + this.$route.query.type, query: {} }) this.$router.push({ path: '/course/CourseList/' + this.$route.query.type, query: {} })
}, },