parent
7a3aa3733b
commit
89fd9e235f
@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<el-container v-loading="loading" class="post-article">
|
||||
<el-header class="header">
|
||||
<el-select v-model="article.cid" placeholder="请选择文章栏目" style="width: 150px;">
|
||||
<el-option
|
||||
v-for="item in categories"
|
||||
:key="item.id"
|
||||
:label="item.cateName"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-input v-model="article.title" placeholder="请输入标题..." style="width: 400px;margin-left: 10px"></el-input>
|
||||
<el-tag
|
||||
:key="tag"
|
||||
v-for="tag in article.dynamicTags"
|
||||
closable
|
||||
:disable-transitions="false"
|
||||
@close="handleClose(tag)" style="margin-left: 10px">
|
||||
{{tag}}
|
||||
</el-tag>
|
||||
<el-input
|
||||
class="input-new-tag"
|
||||
v-if="tagInputVisible"
|
||||
v-model="tagValue"
|
||||
ref="saveTagInput"
|
||||
size="small"
|
||||
@keyup.enter.native="handleInputConfirm"
|
||||
@blur="handleInputConfirm">
|
||||
</el-input>
|
||||
<el-button v-else class="button-new-tag" type="primary" size="small" @click="showInput">+Tag</el-button>
|
||||
</el-header>
|
||||
<el-main class="main">
|
||||
<div id="editor">
|
||||
<mavon-editor style="height: 100%;width: 100%;" ref=md @imgAdd="imgAdd"
|
||||
@imgDel="imgDel" v-model="article.mdContent"></mavon-editor>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 15px;justify-content: flex-end">
|
||||
<el-button @click="cancelEdit" v-if="from!=undefined">放弃修改</el-button>
|
||||
<template v-if="from==undefined || from=='draft'">
|
||||
<el-button @click="saveBlog(0)">保存到草稿箱</el-button>
|
||||
<el-button type="primary" @click="saveBlog(1)">发表文章</el-button>
|
||||
</template>
|
||||
<template v-else="from==post">
|
||||
<el-button type="primary" @click="saveBlog(1)">保存修改</el-button>
|
||||
</template>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
<script>
|
||||
import {postRequest} from '../utils/api'
|
||||
import {putRequest} from '../utils/api'
|
||||
import {deleteRequest} from '../utils/api'
|
||||
import {getRequest} from '../utils/api'
|
||||
import {uploadFileRequest} from '../utils/api'
|
||||
// Local Registration
|
||||
import {mavonEditor} from 'mavon-editor'
|
||||
// 可以通过 mavonEditor.markdownIt 获取解析器markdown-it对象
|
||||
import 'mavon-editor/dist/css/index.css'
|
||||
import {isNotNullORBlank} from '../utils/utils'
|
||||
|
||||
export default {
|
||||
mounted: function () {
|
||||
this.getCategories();
|
||||
var from = this.$route.query.from;
|
||||
this.from = from;
|
||||
var _this = this;
|
||||
if (from != null && from != '' && from != undefined) {
|
||||
var id = this.$route.query.id;
|
||||
this.id = id;
|
||||
this.loading = true;
|
||||
getRequest("/article/" + id).then(resp=> {
|
||||
_this.loading = false;
|
||||
if (resp.status == 200) {
|
||||
_this.article = resp.data;
|
||||
var tags = resp.data.tags;
|
||||
_this.article.dynamicTags = []
|
||||
for (var i = 0; i < tags.length; i++) {
|
||||
_this.article.dynamicTags.push(tags[i].tagName)
|
||||
}
|
||||
} else {
|
||||
_this.$message({type: 'error', message: '页面加载失败!'})
|
||||
}
|
||||
}, resp=> {
|
||||
_this.loading = false;
|
||||
_this.$message({type: 'error', message: '页面加载失败!'})
|
||||
})
|
||||
}
|
||||
},
|
||||
components: {
|
||||
mavonEditor
|
||||
},
|
||||
methods: {
|
||||
cancelEdit(){
|
||||
this.$router.go(-1)
|
||||
},
|
||||
saveBlog(state){
|
||||
if (!(isNotNullORBlank(this.article.title, this.article.mdContent, this.article.cid))) {
|
||||
this.$message({type: 'error', message: '数据不能为空!'});
|
||||
return;
|
||||
}
|
||||
var _this = this;
|
||||
_this.loading = true;
|
||||
postRequest("/article/", {
|
||||
id: _this.article.id,
|
||||
title: _this.article.title,
|
||||
mdContent: _this.article.mdContent,
|
||||
htmlContent: _this.$refs.md.d_render,
|
||||
cid: _this.article.cid,
|
||||
state: state,
|
||||
dynamicTags: _this.article.dynamicTags
|
||||
}).then(resp=> {
|
||||
_this.loading = false;
|
||||
if (resp.status == 200 && resp.data.status == 'success') {
|
||||
_this.article.id = resp.data.msg;
|
||||
_this.$message({type: 'success', message: state == 0 ? '保存成功!' : '发布成功!'});
|
||||
// if (_this.from != undefined) {
|
||||
window.bus.$emit('blogTableReload')
|
||||
// }
|
||||
if (state == 1) {
|
||||
_this.$router.replace({path: '/articleList'});
|
||||
}
|
||||
}
|
||||
}, resp=> {
|
||||
_this.loading = false;
|
||||
_this.$message({type: 'error', message: state == 0 ? '保存草稿失败!' : '博客发布失败!'});
|
||||
})
|
||||
},
|
||||
imgAdd(pos, $file){
|
||||
var _this = this;
|
||||
// 第一步.将图片上传到服务器.
|
||||
var formdata = new FormData();
|
||||
formdata.append('image', $file);
|
||||
uploadFileRequest("/article/uploadimg", formdata).then(resp=> {
|
||||
var json = resp.data;
|
||||
if (json.status == 'success') {
|
||||
// _this.$refs.md.$imgUpdateByUrl(pos, json.msg)
|
||||
_this.$refs.md.$imglst2Url([[pos, json.msg]])
|
||||
} else {
|
||||
_this.$message({type: json.status, message: json.msg});
|
||||
}
|
||||
});
|
||||
},
|
||||
imgDel(pos){
|
||||
|
||||
},
|
||||
getCategories(){
|
||||
let _this = this;
|
||||
getRequest("/admin/category/all").then(resp=> {
|
||||
_this.categories = resp.data;
|
||||
});
|
||||
},
|
||||
handleClose(tag) {
|
||||
this.article.dynamicTags.splice(this.article.dynamicTags.indexOf(tag), 1);
|
||||
},
|
||||
showInput() {
|
||||
this.tagInputVisible = true;
|
||||
this.$nextTick(_ => {
|
||||
this.$refs.saveTagInput.$refs.input.focus();
|
||||
});
|
||||
},
|
||||
handleInputConfirm() {
|
||||
let tagValue = this.tagValue;
|
||||
if (tagValue) {
|
||||
this.article.dynamicTags.push(tagValue);
|
||||
}
|
||||
this.tagInputVisible = false;
|
||||
this.tagValue = '';
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
categories: [],
|
||||
tagInputVisible: false,
|
||||
tagValue: '',
|
||||
loading: false,
|
||||
from: '',
|
||||
article: {
|
||||
id: '-1',
|
||||
dynamicTags: [],
|
||||
title: '',
|
||||
mdContent: '',
|
||||
cid: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.post-article > .main > #editor {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.post-article > .header {
|
||||
background-color: #ececec;
|
||||
margin-top: 10px;
|
||||
padding-left: 5px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.post-article > .main {
|
||||
/*justify-content: flex-start;*/
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 5px;
|
||||
background-color: #ececec;
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.post-article > .header > .el-tag + .el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.post-article > .header > .button-new-tag {
|
||||
margin-left: 10px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.post-article > .header > .input-new-tag {
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.post-article {
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue