✨ 修改文章标签功能

components/widget/tags.vue

@@ -0,0 +1,99 @@
+<template>
+  <el-row>
+    <el-col>
+      <el-select
+        style="width: 100%;"
+        v-model="articleTags"
+        multiple
+        filterable
+        allow-create
+        default-first-option
+        remote
+        :remote-method="remoteMethod"
+        placeholder="请选择文章标签"
+        :loading="loading">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+    </el-col>
+    <el-col style="text-align: center;">
+      <el-button type="primary" style="margin-top: 1rem;" @click="saveTags">保存</el-button>
+      <el-button style="margin-top: 1rem;" @click="$emit('closeDialog')">取消</el-button>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: "tags",
+  props: {
+    idArticle: {
+      type: Number
+    },
+    tags: {
+      type: String,
+      default: false
+    }
+  },
+  data() {
+    return {
+      options: [],
+      list: [],
+      loading: false,
+      articleTags: []
+    }
+  },
+  methods: {
+    remoteMethod(query) {
+      if (query !== '') {
+        this.loading = true;
+        setTimeout(() => {
+          this.loading = false;
+          this.options = this.list.filter(item => {
+            return item.label.toLowerCase()
+              .indexOf(query.toLowerCase()) > -1;
+          });
+        }, 200);
+      } else {
+        this.options = [];
+      }
+    },
+    getTags() {
+      let _ts = this;
+      _ts.$axios.$get('/api/tag/tags').then(function (res) {
+        if (res) {
+          _ts.$set(_ts, 'list', res);
+        }
+      })
+    },
+    saveTags() {
+      let _ts = this;
+      _ts.$axios.$post(`/api/article/${_ts.idArticle}/update-tags`, {
+        articleTags: _ts.articleTags.join(',')
+      }).then(function (res) {
+        if (res) {
+          if (res.success) {
+            _ts.$emit('closeDialog');
+          } else {
+            _ts.$message(res.message)
+          }
+        } else {
+          _ts.$message("更新失败!")
+        }
+      })
+    }
+  },
+  mounted() {
+    this.getTags();
+    this.$set(this, 'articleTags', this.tags.split(','))
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/article/_article_id.vue

@@ -23,6 +23,7 @@
                   <el-link rel="nofollow" :underline="false"><i class="el-icon-more"></i></el-link>
                   <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item command="edit" v-if="hasPermissions">编辑</el-dropdown-item>
+                    <el-dropdown-item command="editTag" v-if="isAdmin">编辑标签</el-dropdown-item>
                     <el-dropdown-item command="share">分享</el-dropdown-item>
                   </el-dropdown-menu>
                 </el-dropdown>
@@ -72,6 +73,15 @@
       <comment-box :fetching="isFetching" :user="user" :avatar="avatar" :title="article.articleTitle"
                    :post-id="routeArticleId"></comment-box>
     </el-col>
+    <el-col>
+      <el-dialog :visible.sync="dialogVisible">
+        <edit-tags
+          :idArticle="article.idArticle"
+          :tags="article.articleTags"
+          @closeDialog="closeTagsDialog">
+        </edit-tags>
+      </el-dialog>
+    </el-col>
   </el-row>
 </template>
 
@@ -79,11 +89,13 @@
   import Vue from 'vue';
   import {mapState} from 'vuex';
   import ShareBox from '~/components/widget/share';
+  import EditTags from '~/components/widget/tags';
 
   export default {
     name: "ArticleDetail",
     components: {
-      ShareBox
+      ShareBox,
+      EditTags
     },
     validate({params, store}) {
       return params.article_id && !isNaN(Number(params.article_id))
@@ -113,6 +125,9 @@
         }
         return this.$store.getters.hasPermissions('blog_admin');
       },
+      isAdmin() {
+        return this.$store.getters.hasPermissions('blog_admin');
+      },
       routeArticleId() {
         return Number(this.$route.params.article_id)
       }
@@ -160,6 +175,7 @@
       return {
         loading: false,
         isShare: false,
+        dialogVisible: false,
         shareData: {},
       }
     },
@@ -177,6 +193,8 @@
           _ts.$router.push({
             path: `/article/post/${_ts.article.idArticle}`
           })
+        } else if (item === 'editTag') {
+          _ts.$set(_ts, 'dialogVisible', true);
         } else {
           _ts.$axios.$get('/api/article/' + _ts.article.idArticle + '/share').then(function (res) {
             if (res) {
@@ -190,6 +208,10 @@
         this.$router.push({
           name: 'login'
         })
+      },
+      closeTagsDialog() {
+        this.$set(this, 'dialogVisible', false);
+        this.$store.dispatch('article/fetchDetail', this.$route.params)
       }
     },
     mounted() {