ADD file via upload

vueblog/src/components/PostArticle.vue

@@ -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>