153 lines
4.2 KiB
Vue
153 lines
4.2 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
|
|
<el-card class="box-card">
|
|
<h3>编辑信息公告</h3>
|
|
<el-form ref="article" :rules="rules" :model="article" label-width="150px">
|
|
<el-form-item label="类型" prop="type">
|
|
<el-radio-group v-model="article.type">
|
|
<el-radio :label="'1'">公告</el-radio>
|
|
<el-radio :label="'0'">通知</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="标题" prop="title">
|
|
<el-input v-model="article.title"/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="内容">
|
|
<editor :init="editorInit" v-model="article.content"/>
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
</el-card>
|
|
|
|
<div class="op-container">
|
|
<el-button @click="handleCancel">取消</el-button>
|
|
<el-button type="primary" @click="handleEdit">更新</el-button>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.el-card {
|
|
margin-bottom: 10px;
|
|
}
|
|
.el-tag + .el-tag {
|
|
margin-left: 10px;
|
|
}
|
|
.input-new-keyword {
|
|
width: 90px;
|
|
margin-left: 10px;
|
|
vertical-align: bottom;
|
|
}
|
|
.avatar-uploader .el-upload {
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: #20a0ff;
|
|
}
|
|
.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 120px;
|
|
height: 120px;
|
|
line-height: 120px;
|
|
text-align: center;
|
|
}
|
|
.avatar {
|
|
width: 145px;
|
|
height: 145px;
|
|
display: block;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import { detailArticle, editArticle } from '@/api/business/article'
|
|
import { createStorage, uploadPath } from '@/api/business/storage'
|
|
import Editor from '@tinymce/tinymce-vue'
|
|
import { MessageBox } from 'element-ui'
|
|
import { getToken } from '@/utils/auth'
|
|
|
|
export default {
|
|
name: 'ArticleEdit',
|
|
components: { Editor },
|
|
data() {
|
|
return {
|
|
uploadPath,
|
|
article: {},
|
|
rules: {
|
|
title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
|
|
content: [{ required: true, message: '信息内容不能为空', trigger: 'blur' }]
|
|
},
|
|
editorInit: {
|
|
language: 'zh_CN',
|
|
convert_urls: false,
|
|
plugins: [
|
|
'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
|
|
],
|
|
toolbar: [
|
|
'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample',
|
|
'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
|
|
],
|
|
images_upload_handler: function(blobInfo, success, failure) {
|
|
const formData = new FormData()
|
|
formData.append('file', blobInfo.blob())
|
|
createStorage(formData)
|
|
.then(res => {
|
|
success(res.data.data.url)
|
|
})
|
|
.catch(() => {
|
|
failure('上传失败，请重新上传')
|
|
})
|
|
}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
headers() {
|
|
return {
|
|
'X-Dts-Admin-Token': getToken()
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init: function() {
|
|
if (this.$route.query.id == null) {
|
|
return
|
|
}
|
|
const articleId = this.$route.query.id
|
|
detailArticle(articleId).then(response => {
|
|
this.article = response.data.data
|
|
})
|
|
},
|
|
handleCancel: function() {
|
|
this.$router.push({ path: '/promotion/articleList' })
|
|
},
|
|
handleEdit: function() {
|
|
editArticle(this.article)
|
|
.then(response => {
|
|
this.$notify.success({
|
|
title: '成功',
|
|
message: '修改成功'
|
|
})
|
|
this.$router.push({ path: '/promotion/articleList' })
|
|
})
|
|
.catch(response => {
|
|
MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
|
|
confirmButtonText: '确定',
|
|
type: 'error'
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|