课程详情图片、课程编辑图片显示
This commit is contained in:
parent
2f2717bbd7
commit
f746f731fb
|
@ -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,15 +138,24 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
DbUpload,
|
DbUpload,
|
||||||
courseAdd,
|
courseAdd,
|
||||||
getCourseDetails
|
getCourseDetails,
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.dictionaryDropDown()
|
this.dictionaryDropDown()
|
||||||
|
if(this.$route.query.id) this.loadData();
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
//显示页面上的数字
|
||||||
|
onChange(dataValue) {},
|
||||||
|
|
||||||
|
//加载数据
|
||||||
|
loadData() {
|
||||||
if (this.$route.query.id) {
|
if (this.$route.query.id) {
|
||||||
getCourseDetails({ id: this.$route.query.id }).then((res) => {
|
getCourseDetails({ id: this.$route.query.id }).then((res) => {
|
||||||
this.form = res.data
|
this.form = res.data
|
||||||
this.form.isRequired = this.form.isRequired + ''
|
this.form.isRequired = this.form.isRequired + ''
|
||||||
|
this.fileList = JSON.parse(this.form.coverPath)
|
||||||
this.form.tags = []
|
this.form.tags = []
|
||||||
this.form.courseTags.forEach((item, index) => {
|
this.form.courseTags.forEach((item, index) => {
|
||||||
this.form.tags.push(item.dictValue.toString())
|
this.form.tags.push(item.dictValue.toString())
|
||||||
|
@ -154,15 +164,13 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
|
||||||
//显示页面上的数字
|
|
||||||
onChange(dataValue) {},
|
|
||||||
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>
|
||||||
|
|
|
@ -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: {} })
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue