新增：添加标签管理

src/api/tag.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+const qs = require('qs')
+
+export default {
+  tagList(params) {
+    return request({
+      url: 'tag/list',
+      method: 'get',
+      params
+    })
+  },
+  tagInfo(params) {
+    return request({
+      url: 'tag/info',
+      method: 'get',
+      params
+    })
+  },
+  add(data) {
+    return request({
+      url: 'tag/add',
+      method: 'post',
+      data
+    })
+  },
+  update(data) {
+    return request({
+      url: 'tag/update',
+      method: 'put',
+      data
+    })
+  },
+  delete(params) {
+    return request({
+      url: 'tag/delete',
+      method: 'delete',
+      params,
+      paramsSerializer: function(params) {
+        return qs.stringify(params, { arrayFormat: 'repeat' })
+      }
+    })
+  }
+}
+

src/router/index.js

@@ -249,6 +249,12 @@ export const constantRoutes = [
         name: 'manager-categories',
         component: () => import('@/views/setting/articles/categoryManager'),
         meta: { title: '分类管理', icon: 'fenlei' }
+      },
+      {
+        path: 'manager-tags',
+        name: 'manager-tags',
+        component: () => import('@/views/setting/articles/tagManager'),
+        meta: { title: '标签管理', icon: 'biaoqian' }
       }
     ]
   },

src/styles/setting.scss

@@ -103,6 +103,14 @@ a:hover {
   margin-top: 10px;
   max-width: 300px;
 }
+.el-form-item__content {
+  .instruction {
+    font-size: 12px;
+    line-height: 1;
+    padding-top: 4px;
+    position: absolute;
+  }
+}
 .instruction {
   color: #9a9a9a;
   font-size: .8125rem;

src/views/markdown/index.vue

@@ -19,13 +19,13 @@
           </div>
         </el-header>
         <el-main>
-          <div id="vditor"></div>
+          <div id="vditor" v-loading="vditorLoading"></div>
         </el-main>
       </div>
       <div class="editor-right">
         <div class="operation">
           <el-button class="release-button" type="warning" size="small" @click="saveDraft" :loading="updating">保存草稿</el-button>
-          <el-button class="release-button" type="primary" size="small" @click="release" :loading="updating">{{ editStatus?'发布文章':'更新文章' }}</el-button>
+          <el-button class="release-button" type="primary" size="small" @click="release" :loading="updating">{{ editStatus?'更新文章':'发布文章' }}</el-button>
         </div>
         <div class="more-setting">
           <p class="mark-setting-label">文章封面：</p>
@@ -55,6 +55,38 @@
             clearable
             @change="selectCategory"
           ></el-cascader>
+          <p class="mark-setting-label">标签：</p>
+          <el-tag
+            v-for="tag in dynamicTags"
+            :key="tag.id"
+            closable
+            :disable-transitions="false"
+            @close="handleClose(tag)">
+            {{tag}}
+          </el-tag>
+          <el-autocomplete
+            :class="[inputNewTagClass, inputValueExist?inputErrorClass:'']"
+            v-if="inputVisible"
+            v-model="inputValue"
+            ref="saveTagInput"
+            size="small"
+            :fetch-suggestions="querySearch"
+            @select="handleSelect"
+            placeholder="请输入内容"
+            @keyup.enter.native="handleInputConfirm"
+          ></el-autocomplete>
+<!--          <el-input-->
+<!--            :class="[inputNewTagClass, inputValueExist?inputErrorClass:'']"-->
+<!--            v-if="inputVisible"-->
+<!--            v-model="inputValue"-->
+<!--            ref="saveTagInput"-->
+<!--            size="small"-->
+<!--            @keyup.enter.native="handleInputConfirm"-->
+<!--            @blur="handleInputConfirm"-->
+<!--          >-->
+<!--          </el-input>-->
+          <div v-if="inputValueExist" class="instruction-error">该标签已存在</div>
+          <el-button v-if="!inputVisible" class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
         </div>
       </div>
     </div>
@@ -86,6 +118,7 @@
   import Vditor from 'vditor'
   import "vditor/src/assets/scss/index.scss"
   import categoryApi from "@/api/category";
+  import tagApi from "@/api/tag";
 
   let toolbar = [
     'emoji',
@@ -158,12 +191,21 @@
         categories: [],
         categoryIdsList: [],
         draft: false,
-        articleLink: `${window.origin}/artiles/`
+        articleLink: `${window.origin}/artiles/`,
+        tags: [],
+        dynamicTags: [],
+        inputVisible: false,
+        inputValue: '',
+        inputValueExist: false,
+        inputNewTagClass: 'input-new-tag',
+        inputErrorClass: 'input-error',
+        vditorLoading: true,
       }
     },
     mounted() {
       this.getMarkdown()
       this.categoryTree()
+      this.getTags()
       const that = this
       window.onresize = function temp() {
         that.reHeight()
@@ -186,6 +228,20 @@
         this.getMarkdown(true)
         this.categoryTree()
       },
+      querySearch(queryString, cb) {
+        let tags = this.tags
+        let results = queryString ? tags.filter((tag) => {
+          return (tag.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+        }) : tags
+        // 调用 callback 返回建议列表的数据
+        results = results.map(res => {
+          return {value: res.name}
+        })
+        cb(results)
+      },
+      handleSelect(item){
+        this.handleInputConfirm()
+      },
       valueHasChanged(){
         this.$emit('update:hasChange', true)
       },
@@ -195,24 +251,29 @@
           markdownApi.getMarkdown({
             mark: this.$route.query.id
           }).then((res) => {
-            this.file = res.data
-            this.content = this.file.contentText
-            this.filename = this.file.name.split('.md')[0]
-            this.storageLocation = res.data.path
-            if(this.categories && this.categories.length > 0){
-              this.findCategoryIds(null, this.categories, this.file.categoryIds)
-            }
             // 初始化编辑器
             if(isReload){
               this.contentEditor.setValue(res.data.contentText)
             } else {
               this.vditorInit(res.data.contentText)
             }
+            this.file = res.data
+            this.content = this.file.contentText
+            this.filename = this.file.name.split('.md')[0]
+            this.storageLocation = res.data.path
+            // 加载分类
+            if(this.categories && this.categories.length > 0){
+              this.findCategoryIds(null, this.categories, this.file.categoryIds)
+            }
+            // 加载标签
+            if(this.tags && this.tags.length > 0) {
+              this.loadDynamicTags()
+            }
           }).then(() => {
             const that = this
             setTimeout(function (){
               that.$emit('update:hasChange', false)
-            }, 100)
+            }, 200)
           })
         } else {
           if(isReload){
@@ -223,13 +284,46 @@
         }
       },
       categoryTree() {
-        categoryApi.categoryTree({userId: this.$store.state.user.userId}).then(res => {
+        categoryApi.categoryTree().then(res => {
           this.categories = res.data
           if(this.file.categoryIds && this.file.categoryIds.length > 0){
             this.findCategoryIds(null, this.categories, this.file.categoryIds)
           }
         })
       },
+      getTags() {
+        tagApi.tagList().then(res => {
+          this.tags = res.data
+          if(this.file.tagIds && this.file.tagIds.length > 0) {
+            this.loadDynamicTags()
+          }
+        })
+      },
+      loadDynamicTags() {
+        this.dynamicTags = this.tags.filter(tag => this.file.tagIds.includes(tag.id)).map(tag => tag.name)
+      },
+      handleClose(tag) {
+        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
+      },
+      showInput() {
+        this.inputVisible = true
+        this.$nextTick(_ => {
+          this.$refs.saveTagInput.$refs.input.focus()
+        });
+      },
+      handleInputConfirm() {
+        let inputValue = this.inputValue
+        if (inputValue) {
+          if (this.dynamicTags.includes(inputValue)){
+            this.inputValueExist = true
+            return
+          }
+          this.dynamicTags.push(inputValue)
+        }
+        this.inputValueExist = false
+        this.inputVisible = false
+        this.inputValue = ''
+      },
       findCategoryIds(parentCategory, categories, categoryIds) {
         if(!categoryIds){
           return
@@ -269,6 +363,7 @@
           },
           after: () => {
             this.contentEditor.setValue(content)
+            console.log('sdf')
           },
           input: (val) => {
             this.valueHasChanged()
@@ -374,6 +469,7 @@
             isDraft: this.draft,
             slug: this.file.slug ? this.file.slug : this.filename,
             categoryIds: categoryIds,
+            tagNames: this.dynamicTags,
             currentDirectory: this.storageLocation,
             contentText: this.contentEditor.getValue()
           }).then(() => {
@@ -469,7 +565,37 @@
     }
   }
 }
-
+/deep/ .el-tag {
+  margin-left: 8px;
+  margin-top: 8px;
+}
+/deep/ .button-new-tag {
+  margin-left: 8px;
+  margin-top: 8px;
+  height: 32px;
+  line-height: 30px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+/deep/ .input-new-tag {
+  margin-left: 8px;
+  margin-top: 8px;
+  max-width: 94px;
+  vertical-align: bottom;
+}
+/deep/ .input-error {
+  input {
+    border-color: #f56c6c;
+  }
+}
+.instruction-error {
+  color: #F56C6C;
+  font-size: 12px;
+  line-height: 1;
+  padding-top: 4px;
+  position: absolute;
+  margin-left: 8px;
+}
   @media (min-width: 1200px) {
     .article-editor {
       max-width: 1200px;

src/views/setting/articles/articleManager.vue

@@ -286,7 +286,7 @@ export default {
       }
     },
     categoryTree() {
-      categoryApi.categoryTree({userId: this.$store.state.user.userId}).then(res => {
+      categoryApi.categoryTree().then(res => {
         this.categories = res.data
         if(this.$route.query.categoryIds){
           this.query.categoryIds = this.$route.query.categoryIds

src/views/setting/articles/categoryManager.vue

@@ -6,7 +6,8 @@
           <el-input v-model="form.name" style="width: 100%;"/>
         </el-form-item>
         <el-form-item label="分类缩略名" prop="thumbnailName">
-          <el-input v-model="form.thumbnailName" style="width: 100%;" placeholder="分类缩略名用于创建友好的链接形式."/>
+          <el-input v-model="form.thumbnailName" style="width: 100%;"/>
+          <div class="instruction">分类缩略名用于创建友好的链接形式.</div>
         </el-form-item>
         <el-form-item label="父级分类" prop="parentCategoryId">
           <el-cascader
@@ -18,7 +19,12 @@
             clearable></el-cascader>
         </el-form-item>
         <el-form-item label="分类描述" prop="desc">
-          <el-input type="textarea" v-model="form.desc"/>
+          <el-input type="textarea" v-model="form.desc" :autosize="{ minRows: 2, maxRows: 6 }"/>
+          <div class="instruction">此文字用于描述分类, 在该分类首页中它会被显示.</div>
+        </el-form-item>
+        <el-form-item label="分类背景" prop="categoryBackground">
+          <el-input type="textarea" v-model="form.categoryBackground" :autosize="{ minRows: 2, maxRows: 6 }"/>
+          <div class="instruction">在这里填入图片的URL地址, 以在分类页面显示一个背景大图.</div>
         </el-form-item>
         <el-form-item>
           <el-button native-type="submit" type="primary" :loading="categoryUpdateLoading"
@@ -115,7 +121,8 @@ export default {
         name: '',
         thumbnailName: '',
         parentCategoryId: '',
-        desc: ''
+        desc: '',
+        categoryBackground: ''
       },
       rules: {
         name: [
@@ -153,14 +160,13 @@ export default {
     },
     getCategories() {
       categoryApi.categories({
-        userId: this.$store.state.user.userId,
         parentCategoryId: this.$route.query.parent
       }).then(res => {
         this.categoryList = res.data
       })
     },
     categoryTree() {
-      categoryApi.categoryTree({userId: this.$store.state.user.userId}).then(res => {
+      categoryApi.categoryTree().then(res => {
         this.categories = res.data
       })
     },
@@ -253,7 +259,6 @@ export default {
         categoryApi.delete({categoryIds: categoryIds}).then(() => {
           this.onDeleted()
         }).catch(() => {
-          console.log('sdf')
           this.onError()
         })
       })
@@ -268,9 +273,6 @@ export default {
     },
     // 添加分类
     addCategory(data) {
-      if (!this.form.hasOwnProperty('userId')) {
-        data.append('userId', this.$store.state.user.userId)
-      }
       categoryApi.add(data).then(() => {
         this.onSuccess()
       }).catch(() => {

src/views/setting/articles/tagManager.vue

@@ -0,0 +1,244 @@
+<template>
+  <div class="container" v-wechat-title="title">
+    <el-dialog class="dialog-cm" :title="dialogTitle" :visible.sync="dialogVisible">
+      <el-form ref="managerForm" :model="form" label-position="left" :rules="rules" label-width="85px">
+        <el-form-item label="标签名称" prop="name">
+          <el-input v-model="form.name" style="width: 100%;"/>
+        </el-form-item>
+        <el-form-item label="标签缩略名" prop="slug">
+          <el-input v-model="form.slug" style="width: 100%;"/>
+          <div class="instruction">标签缩略名用于创建友好的链接形式, 如果留空则默认使用标签名称.</div>
+        </el-form-item>
+        <el-form-item label="标签背景" prop="categoryBackground">
+          <el-input type="textarea" v-model="form.tagBackground" :autosize="{ minRows: 2, maxRows: 6 }"/>
+          <div class="instruction">在这里填入图片的URL地址, 以在该标签页面显示一个背景大图.</div>
+        </el-form-item>
+        <el-form-item>
+          <el-button native-type="submit" type="primary" :loading="tagUpdateLoading"
+                     @click.native.prevent="onSave('managerForm')">保 存
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+    <el-card class="box-card">
+      <div slot="header">
+        <div class="clearfix">
+          <div class="card-header content-title"><span>{{ title }}</span> </div>
+          <el-button class="card-button" size="mini" type="primary" @click="add()">新增标签</el-button>
+        </div>
+        <div class="card-header-right">
+          <el-checkbox class="check-all" :indeterminate="isIndeterminate" v-model="checkAll" @change="selectAll">全选</el-checkbox>
+          <el-button :disabled="this.multipleSelection.length !== 1" size="small" @click="handleEdit()">编辑</el-button>
+          <el-button :disabled="this.multipleSelection.length === 0" size="small" type="danger" @click="handleDelete()">删除</el-button>
+        </div>
+      </div>
+      <div>
+        <el-checkbox-group v-model="multipleSelection" size="small" @change="handleCheckTagChange">
+          <el-checkbox v-for="tag in tags" :key="tag.id" class="tag-checkbox" :label="tag.id" border>
+            {{tag.name}}
+          </el-checkbox>
+        </el-checkbox-group>
+      </div>
+    </el-card>
+
+  </div>
+</template>
+
+<script>
+import tagApi from "@/api/tag";
+import categoryApi from "@/api/category";
+
+export default {
+  name: 'tagManager',
+  data() {
+    return {
+      title: "标签管理",
+      dialogVisible: false,
+      dialogTitle: '',
+      tagUpdateLoading: false,
+      form: {
+        name: '',
+        slug: '',
+        tagBackground: ''
+      },
+      rules: {
+        name: [
+          {required: true, message: '请输入标签名称', trigger: 'blur'},
+        ]
+      },
+      tags: [],
+      editMove: 1,// 1添加,2修改
+      tagGroup: [],
+      multipleSelection: [],
+      checkAll: false,
+      isIndeterminate: false,
+    }
+  },
+  computed: {},
+  mounted() {
+    this.getTags()
+  },
+  methods: {
+    getTags() {
+      tagApi.tagList().then(res => {
+        this.tags = res.data
+      })
+    },
+    handleCheckTagChange(value) {
+      console.log(value)
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.tags.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.tags.length;
+    },
+    selectAll(value) {
+      if(value){
+        this.tags.forEach(tag => {
+          this.multipleSelection.push(tag.id)
+        })
+      } else {
+        this.multipleSelection = []
+      }
+      this.isIndeterminate = false
+    },
+    handleEdit() {
+      this.editMove = 2
+      this.dialogVisible = true
+      this.dialogTitle = '修改标签'
+       tagApi.tagInfo({
+        tagId: this.multipleSelection[0]
+      }).then(res => {
+        this.form = res.data
+      })
+    },
+    // 删除标签
+    handleDelete() {
+      let tagIds = this.multipleSelection
+      this.$confirm('您确定要删除这些标签吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        tagApi.delete({tagIds: tagIds}).then(() => {
+          this.$notify({
+            title: '删除成功',
+            type: 'success',
+            duration: 1000
+          })
+          this.multipleSelection = []
+          this.isIndeterminate = false
+          this.getTags()
+        }).catch(() => {
+          this.onError()
+        })
+      })
+    },
+    // 设置formData
+    setFormData() {
+      let data = new FormData();
+      for (let formKey in this.form) {
+        if (this.form.hasOwnProperty(formKey) && this.form[formKey]) {
+          data.append(formKey, this.form[formKey])
+        }
+      }
+      return data
+    },
+    // 保存
+    onSave() {
+      this.$refs.managerForm.validate((valid) => {
+        this.valid = valid
+        if (valid) {
+          this.tagUpdateLoading = true
+          if (this.editMove === 1) {
+            this.addTag(this.setFormData())
+          }
+          if (this.editMove === 2) {
+            this.updateTag(this.setFormData())
+          }
+        } else {
+          return false;
+        }
+      })
+    },
+    // 修改标签
+    updateTag(data) {
+      tagApi.update(data).then(() => {
+        this.onSuccess()
+      }).catch(() => {
+        this.onError()
+      })
+    },
+    // 添加标签
+    addTag(data) {
+      tagApi.add(data).then(() => {
+        this.onSuccess()
+      }).catch(() => {
+        this.onError()
+      })
+    },
+    async add() {
+      this.dialogVisible = true
+      this.dialogTitle = '添加标签'
+      this.editMove = 1
+      await this.$nextTick()
+      this.$refs.managerForm.resetFields()
+    },
+    onError() {
+      this.tagUpdateLoading = false
+    },
+    onSuccess(message) {
+      this.getTags()
+      let msg = '保存成功!'
+      if (message) {
+        msg = message
+      }
+      this.tagUpdateLoading = false
+      this.dialogVisible = false
+      this.$message({
+        message: msg,
+        type: 'success',
+        duration: 1000
+      })
+    },
+  }
+}
+</script>
+
+<!--<style src="@styles/cropper.css"></style>-->
+<style lang="scss" scoped>
+@import "src/styles/setting";
+.content-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+/deep/ .el-page-header {
+  height: 32px;
+  line-height: 32px;
+}
+/deep/ .tag-checkbox {
+  .el-checkbox__inner {
+    display: none;
+  }
+  .el-checkbox__label {
+    padding-left: 5px;
+  }
+}
+/deep/ .el-checkbox {
+  margin-right: 0;
+}
+/deep/ .el-checkbox.is-bordered {
+  background-color: #f4f4f5;
+  border-color: #e9e9eb;
+  color: #909399;
+}
+/deep/ .el-checkbox.is-bordered.is-checked {
+  background-color: #ecf5ff;
+  border-color: #40a9ff;
+  color: #d9ecff;
+}
+/deep/ .el-icon-edit:hover {
+  color: #40a9ff;
+}
+.check-all {
+  margin-right: 20px;
+}
+</style>