<template>
|
<div class="proPublicity inner-bg-style">
|
<el-row>
|
<el-col :span="16">
|
<el-form ref="form" size="mini" label-width="120px" :disabled="isDisabled" :model="form" :rules="formRules">
|
<el-form-item label="一级分类：" prop="culturalType">
|
<el-select :popper-append-to-body="false" class="selectStyle" v-model="form.culturalType" placeholder="请选择一级分类" @change="changeType" clearable>
|
<el-option
|
v-for="item in firstLevelArray"
|
:key="item.publicityId"
|
:value="item.publicityId"
|
:label="item.publicityName"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="二级分类：" v-if="categoryArr.length" prop="publicityId">
|
<el-select :popper-append-to-body="false" class="selectStyle" placeholder="请选择二级分类" v-model="form.publicityId" clearable>
|
<el-option v-for="item in categoryArr" :key="item.publicityId" :label="item.publicityName" :value="item.publicityId"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="文章名称：" prop="articleName">
|
<el-input v-model="form.articleName" placeholder="请输入文章名称" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="发布时间：" prop="publishTime">
|
<el-date-picker
|
:append-to-body="false"
|
v-model="form.publishTime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
class="datePickerStyle"
|
:picker-options="{
|
disabledDate:time => (time.getTime() > Date.now()),
|
}"
|
placeholder="选择开始时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="文章类型：" prop="articleType">
|
<el-radio-group @change="changeArticleType" v-model="form.articleType">
|
<el-radio label="1">图片</el-radio>
|
<el-radio label="2">视频</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="封面：" v-if="setImgDisplay()" prop="imgUrl">
|
<custom-upload-img
|
:limitNumber="1"
|
@handle-success="handleSuccess"
|
@handle-remove="handleRemove"
|
:isHideDelete='!isDisabled'
|
:fileList="fileList"
|
:fileTip="imgTip"
|
></custom-upload-img>
|
</el-form-item>
|
<el-form-item label="视频：" v-if="isVideo" prop="videoUrl">
|
<custom-upload-img
|
:limitNumber="1"
|
@handle-success="handleVideoSuccess"
|
@handle-remove="handleVideoRemove"
|
:isHideDelete='!isDisabled'
|
:fileList="fileVidoeList"
|
:accept="'.mp4'"
|
:fileTip="'温馨提示：仅支持300M以内大小视频'"
|
></custom-upload-img>
|
</el-form-item>
|
<el-form-item v-if="!isDisabled && isVideo === false" label="内容：" prop="articleContent">
|
<Editor ref="editor" :content.sync="form.articleContent"></Editor>
|
</el-form-item>
|
<el-form-item v-if="isDisabled && isVideo === false" label="内容：">
|
<div class="content" v-html="form.articleContent"></div>
|
</el-form-item>
|
<el-form-item v-if="isDisabled" label="日志：">
|
<div class="logs">
|
<div v-for="(item, index) in form.logs" :key="index">
|
<div>{{item.operationTime}}</div>
|
<div>{{item.operationName}}{{getLabel(operationType, item.operationType)}}</div>
|
</div>
|
</div>
|
</el-form-item>
|
</el-form>
|
<el-row class="buttonPosition">
|
<el-button type="primary" v-show="!isDisabled" size="mini" @click="submit">保存</el-button>
|
<el-button type="success" v-show="!isDisabled && !isVideo" size="mini" @click="preView">预览</el-button>
|
<el-button size="mini" @click="cancel">取消</el-button>
|
</el-row>
|
</el-col>
|
</el-row>
|
<el-dialog :visible.sync="dialogVisible" title="预览" class="pro-publicity-info" :close-on-click-modal="false" :modal-append-to-body="false" width="433px">
|
<preview-info :form="previewform"></preview-info>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="dialogVisible=false">关闭</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
|
import proPublicityApi from '@/api/proPublicityMgt/proPublicity'
|
import Editor from '@/components/editor/editor.vue'
|
import previewInfo from '@/views/proPublicityMgt/proPublicity/components/previewInfo.vue'
|
import catPublicityApi from '@/api/proPublicityMgt/catPublicity'
|
|
export default {
|
components: { Editor, previewInfo },
|
data () {
|
return {
|
firstLevelArray: [],
|
imgTip: '温馨提示：1.为保证大图展示效果，请上传宽大于高的图片资源（横图高度尺寸建议200~800px以内）<br/> 2.为保证小图展示效果，请上传宽大于高的图片资源（横图高度尺寸建议230px）',
|
dialogVisible: false,
|
isDisabled: false,
|
form: {
|
publicityId: null,
|
articleFile: null,
|
articleName: null,
|
articleContent: null,
|
culturalType: null,
|
imgUrl: null,
|
videoUrl: null,
|
articleType: '1',
|
publishTime: null
|
},
|
formRules: {
|
culturalType: [{ required: true, message: '请选择一级分类', trigger: 'change' }],
|
articleName: [{ required: true, message: '请输入文章名称', trigger: 'change' },
|
{ max: 45, message: '文章名称最多只能输入 45 个字', trigger: 'change' }
|
],
|
publicityId: [{ required: true, message: '请选择二级分类', trigger: 'change' }],
|
videoUrl: [{ required: true, message: '请上传视频', trigger: 'change' }],
|
articleContent: [
|
{ required: true, message: '请输入内容', trigger: 'change' }
|
],
|
publishTime: [{ required: true, message: '请选择发布时间', trigger: 'change' }],
|
articleType: [{ required: true, message: '请选择文章类型', trigger: 'change' }]
|
// imgUrl: [{ required: true, message: '请选择文章封面' }]
|
},
|
fileList: [], // 封面数组
|
fileVidoeList: [], // 视频数组
|
previewform: {},
|
categoryArr: [],
|
operationType: [
|
{
|
name: '创建文章',
|
id: '1'
|
},
|
{
|
name: '更新文章',
|
id: '2'
|
},
|
{
|
name: '发布文章',
|
id: '3'
|
},
|
{
|
name: '下架文章',
|
id: '4'
|
}
|
],
|
isVideo: false // 是否显示视频
|
}
|
},
|
created () {
|
if (this.$route.name === 'proPublicityInfo') {
|
this.isDisabled = true
|
}
|
if (this.$route.query.id) {
|
this.getDetails()
|
}
|
this.getCategory({ level: '1' })
|
},
|
watch: {
|
'form.articleContent' (newValue, oldValue) {
|
if (newValue) {
|
this.$refs.form.clearValidate('articleContent')
|
}
|
}
|
},
|
methods: {
|
// 选择三级分类
|
changeArticleType (val) {
|
if (val === '2') {
|
this.isVideo = true
|
this.form.articleContent = null
|
} else {
|
this.isVideo = false
|
this.fileVidoeList = []
|
}
|
},
|
// 设置封面图片是否展示
|
setImgDisplay () {
|
if (this.$route.query.id) {
|
if (this.isDisabled && this.form.imgUrl) {
|
return true
|
} else if (this.isDisabled && !this.form.imgUrl) {
|
return false
|
}
|
}
|
return true
|
},
|
// 当品牌文化分类改变时获取文章分类
|
changeType (val) {
|
this.categoryArr = []
|
this.form.publicityId = null
|
if (val) {
|
this.getCategory({ pid: val, level: '2' })
|
}
|
},
|
/**
|
* 获取数组的label
|
*/
|
getLabel (array, id) {
|
var lableText = array.find((item) => {
|
return item.id === id
|
})
|
if (lableText) {
|
return lableText.name
|
}
|
return ''
|
},
|
// 获取分类
|
async getCategory (params) {
|
try {
|
const res = await catPublicityApi.getNoDelete(params)
|
if (res.code === '0') {
|
if (params.level === '1') {
|
this.firstLevelArray = res.data
|
} else {
|
this.categoryArr = res.data
|
}
|
}
|
} catch (error) {
|
}
|
},
|
// 取消
|
cancel () {
|
if (!this.isDisabled) {
|
this.$confirm('取消后当前已填写的内容不保存，确认要删除吗?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.$router.push({ name: 'proPublicity' })
|
})
|
} else {
|
this.$router.push({ name: 'proPublicity' })
|
}
|
},
|
/**
|
* 预览
|
*/
|
preView () {
|
// this.$refs.form.validate().then(res => {
|
this.previewform = JSON.parse(JSON.stringify(this.form))
|
if (!this.isVideo) {
|
this.previewform.articleContent = this.$refs.editor.getData()
|
}
|
this.previewform.articleContent = this.previewform.articleContent.replace(/oembed url/g, 'video autoplay controls muted src')
|
this.previewform.articleContent = this.previewform.articleContent.replace(/oembed/g, 'video')
|
this.dialogVisible = true
|
// })
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleSuccess (data) {
|
this.form.imgUrl = data.url
|
this.fileList.push({
|
url: data.url
|
})
|
this.$refs.form.clearValidate('imgUrl')
|
},
|
/**
|
* 移除图片
|
*/
|
handleRemove (file) {
|
this.fileList = this.fileList.filter(v => {
|
return v.url !== file.url
|
})
|
this.form.imgUrl = null
|
},
|
/**
|
* 获取上传成功的视频
|
*/
|
handleVideoSuccess (data) {
|
this.form.videoUrl = data.url
|
this.fileVidoeList.push({
|
url: data.url
|
})
|
this.$refs.form.clearValidate('videoUrl')
|
},
|
/**
|
* 移除视频
|
*/
|
handleVideoRemove (file) {
|
this.fileVidoeList = this.fileVidoeList.filter(v => {
|
return v.url !== file.url
|
})
|
this.form.videoUrl = null
|
},
|
/**
|
* 获取详情
|
*/
|
async getDetails () {
|
try {
|
const res = await proPublicityApi.detailsItem({ articleId: this.$route.query.id })
|
if (res.code === '0') {
|
this.changeArticleType(res.data.articleType)
|
res.data.imgUrl = null
|
res.data.videoUrl = null
|
this.form = res.data
|
if (res.data.publicity.publicityId === res.data.publicityId) {
|
this.form.culturalType = res.data.publicityId
|
this.form.publicityId = null
|
} else {
|
this.form.culturalType = res.data.publicity.publicityId
|
}
|
await this.getCategory({ pid: this.form.culturalType, level: '2' })
|
if (res.data.articleFile) {
|
this.setFileData() // 查看详情时设置图片数据
|
}
|
if (this.isDisabled) {
|
this.previewform = JSON.parse(JSON.stringify(this.form))
|
this.previewform.articleContent = this.previewform.articleContent.replace(/oembed url/g, 'video autoplay controls muted src')
|
this.previewform.articleContent = this.previewform.articleContent.replace(/oembed/g, 'video')
|
this.form = this.previewform
|
}
|
}
|
} catch (error) {
|
}
|
},
|
// 查看详情时设置图片数据
|
setFileData () {
|
if (!this.isVideo) {
|
this.form.imgUrl = this.form.articleFile
|
this.fileList = [{ url: this.form.articleFile }]
|
} else {
|
const val = JSON.parse(this.form.articleFile)
|
if (val.poster) {
|
this.fileList = [{ url: val.poster }]
|
this.form.imgUrl = val.poster
|
}
|
if (val.video) {
|
this.fileVidoeList = [{ url: val.video }]
|
this.form.videoUrl = val.video
|
}
|
}
|
},
|
// 处理上传文件数据
|
handFileData () {
|
if (!this.isVideo) {
|
this.form.articleFile = this.form.imgUrl
|
} else {
|
let arr = {}
|
arr = {
|
poster: this.form.imgUrl,
|
video: this.form.videoUrl
|
}
|
this.form.articleFile = JSON.stringify(arr)
|
}
|
if (!this.form.publicityId) {
|
this.form.publicityId = this.form.culturalType
|
}
|
},
|
/**
|
* 提交
|
*/
|
submit () {
|
if (!this.isVideo) {
|
this.form.articleContent = this.$refs.editor.getData()
|
}
|
this.handFileData()
|
this.$refs.form.validate().then(res => {
|
if (this.form.articleId) {
|
this.editInfo()
|
} else {
|
this.addInfo() // 新增文章
|
}
|
})
|
},
|
/**
|
* 增加文章
|
*/
|
async addInfo () {
|
try {
|
const res = await proPublicityApi.addInfo(this.form)
|
if (res.code === '0') {
|
this.$message({
|
message: '添加成功',
|
type: 'success'
|
})
|
this.$router.push({ name: 'proPublicity' })
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
* 编辑文章
|
*/
|
async editInfo () {
|
try {
|
const res = await proPublicityApi.updateInfo(this.form)
|
if (res.code === '0') {
|
this.$message({
|
message: '编辑成功',
|
type: 'success'
|
})
|
this.$router.push({ name: 'proPublicity' })
|
}
|
} catch (error) {
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.selectStyle,.datePickerStyle{
|
width:100%!important;
|
}
|
.proPublicity {
|
padding:20px;
|
.logs{
|
width: 100%;
|
border: 1px solid #cccccc;
|
max-height: 220px;
|
overflow: auto;
|
padding: 15px;
|
}
|
.content {
|
width: 100%;
|
max-height: 440px;
|
border: 1px solid #cccccc;
|
padding: 25px;
|
overflow-y: auto;
|
overflow-x: hidden;
|
img, video{width: 100%;height: auto}
|
div,p{
|
width: 100% !important;
|
}
|
}
|
}
|
.el-picker-panel{
|
.el-picker-panel__footer .el-button--text.el-picker-panel__link-btn {
|
display: none !important;
|
}
|
}
|
.pro-publicity-info{
|
.el-dialog__body{
|
padding:15px 20px;
|
height: 600px;
|
position: relative;
|
overflow: hidden;
|
.pro-publicity-pre{
|
position: absolute;
|
top: 0;
|
right: -17px;
|
bottom: 0;
|
overflow-y: scroll;
|
overflow-x: hidden;
|
padding: 0 10px;
|
width: 100%;
|
}
|
}
|
}
|
</style>
|
