|
|
|
|
@ -1,6 +1,6 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<xy-dialog ref="dialog" :is-show.sync="isShow" :type="'form'" :title="type === 'add' ? '新增资讯' : '编辑资讯'" :form="form"
|
|
|
|
|
<xy-dialog ref="dialog" :width="50" :is-show.sync="isShow" :type="'form'" :title="type === 'add' ? '新增资讯' : '编辑资讯'" :form="form"
|
|
|
|
|
:rules='rules' @submit="submit">
|
|
|
|
|
<template v-slot:title>
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
@ -27,21 +27,36 @@
|
|
|
|
|
<template v-slot:image_id>
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
<div class="xy-table-item-label" style="font-weight: bold">
|
|
|
|
|
<span style="color: red;font-weight: bold;padding-right: 4px;">*</span>标题图片/视频:
|
|
|
|
|
<span style="color: red;font-weight: bold;padding-right: 4px;">*</span>标题图片:
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<!-- <el-upload :action="action" :limit='1' class='upload-demo' list-type="picture-card" :file-list="pictureList"
|
|
|
|
|
ref="pictureUpload" style="width:600px" :auto-upload="true" :data="uploadOther"
|
|
|
|
|
<el-upload :action="action"
|
|
|
|
|
accept=".PNG,.jpg,.jpeg,.bmp,.svg"
|
|
|
|
|
class='upload-demo' :file-list="pictureList" ref="pictureUpload"
|
|
|
|
|
style="width:600px;display: flex;flex-wrap: wrap;margin-left:10px" :auto-upload="true" :data="uploadOther"
|
|
|
|
|
:on-success="handlesuccess" :on-remove="handleRemove">
|
|
|
|
|
<i class="el-icon-plus"></i>
|
|
|
|
|
</el-upload> -->
|
|
|
|
|
<el-upload :action="action" class='upload-demo' :file-list="pictureList" ref="pictureUpload"
|
|
|
|
|
style="width:600px;display: flex;flex-wrap: wrap;margin-left:10px" :auto-upload="true" :data="uploadOther" :on-success="handlesuccess"
|
|
|
|
|
:on-remove="handleRemove">
|
|
|
|
|
<el-button style="width: 100%;text-align: left;" v-if="pictureList.length<1" size="small" type="primary">点击上传</el-button>
|
|
|
|
|
<el-button style="width: 100%;text-align: left;" v-if="pictureList.length<1" size="small"
|
|
|
|
|
type="primary">点击上传</el-button>
|
|
|
|
|
</el-upload>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:video_id>
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
<div class="xy-table-item-label" style="font-weight: bold">
|
|
|
|
|
<span style="color: red;font-weight: bold;padding-right: 4px;"></span>视频:
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<el-upload :action="action"
|
|
|
|
|
accept=".mp4,.avi,.wmv"
|
|
|
|
|
class='upload-demo' :file-list="videoList" ref="pictureUpload"
|
|
|
|
|
style="width:600px;display: flex;flex-wrap: wrap;margin-left:10px" :auto-upload="true" :data="uploadOther"
|
|
|
|
|
:on-success="handlesuccessVideo" :on-remove="handleRemoveVideo">
|
|
|
|
|
<el-button style="width: 100%;text-align: left;" v-if="videoList.length<1" size="small"
|
|
|
|
|
type="primary">点击上传</el-button>
|
|
|
|
|
</el-upload>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:file_ids>
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
@ -50,7 +65,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<el-upload :action="action" class='upload-demo' :file-list="fileList" ref="pictureUpload"
|
|
|
|
|
style="width:400px" :auto-upload="true" :data="uploadOther" :on-success="handlesuccessFile"
|
|
|
|
|
style="width:600px; flex;flex-wrap: wrap;margin-left:10px" :auto-upload="true" :data="uploadOther" :on-success="handlesuccessFile"
|
|
|
|
|
:on-remove="handleRemoveFile">
|
|
|
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
|
|
|
</el-upload>
|
|
|
|
|
@ -65,7 +80,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<div style="width: 99.9%;">
|
|
|
|
|
<tinymce v-model="form.content" ref="tiny" :height="300" />
|
|
|
|
|
<tinymce style="width:100%" v-if="showTinymce" v-model="form.content" ref="tiny" :height="300" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -97,16 +112,19 @@
|
|
|
|
|
return {
|
|
|
|
|
isShow: false,
|
|
|
|
|
type: 'add',
|
|
|
|
|
id: '',
|
|
|
|
|
id: '',
|
|
|
|
|
showTinymce:false,
|
|
|
|
|
action: `${process.env.VUE_APP_BASE_API}api/admin/upload-file`,
|
|
|
|
|
uploadOther: {
|
|
|
|
|
token: ""
|
|
|
|
|
},
|
|
|
|
|
fileList: [],
|
|
|
|
|
pictureList: [],
|
|
|
|
|
pictureList: [],
|
|
|
|
|
videoList:[],
|
|
|
|
|
form: {
|
|
|
|
|
title: '',
|
|
|
|
|
image_id: '',
|
|
|
|
|
image_id: '',
|
|
|
|
|
video_id:'',
|
|
|
|
|
file_ids: [],
|
|
|
|
|
content: '',
|
|
|
|
|
},
|
|
|
|
|
@ -128,6 +146,12 @@
|
|
|
|
|
},
|
|
|
|
|
handlesuccess(response, file, fileList) {
|
|
|
|
|
this.pictureList = fileList
|
|
|
|
|
},
|
|
|
|
|
handleRemoveVideo(file, fileList) {
|
|
|
|
|
this.videoList = fileList
|
|
|
|
|
},
|
|
|
|
|
handlesuccessVideo(response, file, fileList) {
|
|
|
|
|
this.videoList = fileList
|
|
|
|
|
},
|
|
|
|
|
handleRemoveFile(file, fileList) {
|
|
|
|
|
this.fileList = fileList
|
|
|
|
|
@ -142,7 +166,6 @@
|
|
|
|
|
if (this.type == 'add') {
|
|
|
|
|
this.form.id = ''
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (this.pictureList.length > 0) {
|
|
|
|
|
if (this.pictureList[0].response) {
|
|
|
|
|
this.form.image_id = this.pictureList[0].response.id
|
|
|
|
|
@ -156,6 +179,13 @@
|
|
|
|
|
})
|
|
|
|
|
this.form.image_id = ''
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if (this.videoList.length > 0) {
|
|
|
|
|
if (this.videoList[0].response) {
|
|
|
|
|
this.form.video_id = this.videoList[0].response.id
|
|
|
|
|
} else {
|
|
|
|
|
this.form.video_id = this.videoList[0].id
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let _files = []
|
|
|
|
|
@ -190,34 +220,41 @@
|
|
|
|
|
show({
|
|
|
|
|
id: this.id,
|
|
|
|
|
table_name: 'articles',
|
|
|
|
|
with_relations: ['image']
|
|
|
|
|
with_relations: ['image','video']
|
|
|
|
|
}).then(res => {
|
|
|
|
|
this.form = {
|
|
|
|
|
title: res?.title,
|
|
|
|
|
image_id: res?.image_id,
|
|
|
|
|
image_id: res?.image_id,
|
|
|
|
|
video_id:res?.video_id,
|
|
|
|
|
file_ids: res?.file_ids,
|
|
|
|
|
content: res?.content,
|
|
|
|
|
}
|
|
|
|
|
if (res.image) {
|
|
|
|
|
this.pictureList.push({
|
|
|
|
|
id: res.image.id,
|
|
|
|
|
name: res.image.original_name,
|
|
|
|
|
url: res.image.url
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
if(res.image){
|
|
|
|
|
this.pictureList.push({
|
|
|
|
|
id:res.image.id,
|
|
|
|
|
name:res.image.original_name,
|
|
|
|
|
url:res.image.url
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let _files = []
|
|
|
|
|
if(res.files && res.files.length>0){
|
|
|
|
|
res.files.map(item=>{
|
|
|
|
|
_files.push({
|
|
|
|
|
id:item.id,
|
|
|
|
|
name:item.original_name,
|
|
|
|
|
url:item.url
|
|
|
|
|
})
|
|
|
|
|
if (res.video) {
|
|
|
|
|
this.videoList.push({
|
|
|
|
|
id: res.video.id,
|
|
|
|
|
name: res.video.original_name,
|
|
|
|
|
url: res.video.url
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
this.fileList = _files
|
|
|
|
|
}
|
|
|
|
|
let _files = []
|
|
|
|
|
if (res.files && res.files.length > 0) {
|
|
|
|
|
res.files.map(item => {
|
|
|
|
|
_files.push({
|
|
|
|
|
id: item.id,
|
|
|
|
|
name: item.original_name,
|
|
|
|
|
url: item.url
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
this.fileList = _files
|
|
|
|
|
this.showTinymce = true
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
@ -226,11 +263,14 @@
|
|
|
|
|
if (newVal) {
|
|
|
|
|
if (this.type === 'editor') {
|
|
|
|
|
this.getDetail()
|
|
|
|
|
}else{
|
|
|
|
|
this.showTinymce = true
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
this.id = ''
|
|
|
|
|
this.fileList = []
|
|
|
|
|
this.pictureList = []
|
|
|
|
|
this.id = ''
|
|
|
|
|
this.fileList = []
|
|
|
|
|
this.pictureList = []
|
|
|
|
|
this.videoList = []
|
|
|
|
|
this.$refs['dialog'].reset()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
@ -240,5 +280,11 @@
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
|
|
|
|
::v-deep .title,
|
|
|
|
|
::v-deep .image_id,
|
|
|
|
|
::v-deep .file_ids,
|
|
|
|
|
::v-deep .content,
|
|
|
|
|
{
|
|
|
|
|
flex-basis: 100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|