From efde7b8c4270d8c0873e01f9a7375af25974ea93 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Sat, 5 Dec 2020 21:12:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E6=96=87=E7=AB=A0?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js          |  8 ++--
 src/views/markdown/index.vue | 89 ++++++++++++++----------------------
 2 files changed, 39 insertions(+), 58 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index 6788161..8ef4a9a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -236,25 +236,25 @@ export const constantRoutes = [
         path: 'manager-articles',
         name: 'manager-articles',
         component: () => import('@/views/setting/articles/articleManager'),
-        meta: { title: '文章管理' , icon: 'guanlizhuanjiawenzhang'}
+        meta: { title: '文章' , icon: 'guanlizhuanjiawenzhang'}
       },
       {
         path: 'manager-blog',
         name: 'manager-blog',
         component: () => import('@/views/setting/articles/blogManager'),
-        meta: { title: '外观设置' , icon: 'pifu'}
+        meta: { title: '外观' , icon: 'pifu'}
       },
       {
         path: 'manager-categories',
         name: 'manager-categories',
         component: () => import('@/views/setting/articles/categoryManager'),
-        meta: { title: '分类管理', icon: 'fenlei' }
+        meta: { title: '分类', icon: 'fenlei' }
       },
       {
         path: 'manager-tags',
         name: 'manager-tags',
         component: () => import('@/views/setting/articles/tagManager'),
-        meta: { title: '标签管理', icon: 'biaoqian' }
+        meta: { title: '标签', icon: 'biaoqian' }
       }
     ]
   },
diff --git a/src/views/markdown/index.vue b/src/views/markdown/index.vue
index 668f936..a979db1 100644
--- a/src/views/markdown/index.vue
+++ b/src/views/markdown/index.vue
@@ -9,13 +9,6 @@
           <div class="header-item">
             <span class="title-label">标题：</span>
             <el-input class="articles-title" placeholder="文章标题" v-model="filename" />
-            <!--        <el-input v-if="!editStatus" class="articles-storage" placeholder="存储位置" size="small" v-model="storageLocation" :readonly="true" @focus="selectDir">-->
-            <!--          <el-button slot="prepend" size="small" @click="selectDir">保存位置</el-button>-->
-            <!--        </el-input>-->
-            <!--        <el-button type="primary" @click="moreSetting = true" size="small">更多设置</el-button>-->
-            <!--        <el-button v-if="!editStatus" class="release-button" type="primary" size="small" @click="add" :loading="adding">发布文章</el-button>-->
-            <!--        <el-button v-if="editStatus" class="release-button" type="primary" size="small" @click="update" :loading="updating">更新文章</el-button>-->
-            <!--        <el-button v-if="!editStatus" class="release-button" type="warning" size="small" @click="add" :loading="adding">保存草稿</el-button>-->
           </div>
         </el-header>
         <el-main>
@@ -44,17 +37,22 @@
           </el-input>
           <span class="instruction">本文链接：<a>{{file.slug ? articleLink+file.slug : articleLink+file.id}}</a></span>
           <p class="mark-setting-label">分类：</p>
-          <el-cascader
-            v-model="categoryIdsList"
-            class="mark-setting-input"
-            placeholder="不选择"
-            :collapse-tags="false"
-            :options="categories"
-            :show-all-levels="false"
-            :props="{ multiple: true, checkStrictly: true, value: 'id', label: 'name' }"
-            clearable
-            @change="selectCategory"
-          ></el-cascader>
+          <el-tree
+            class="category-tree"
+            ref="categoryTree"
+            node-key="id"
+            :props="treeProps"
+            :data="categories"
+            icon-class="-"
+            :check-on-click-node="true"
+            :expand-on-click-node="false"
+            :check-strictly="true"
+            :default-expand-all="true"
+            :default-checked-keys="file.categoryIds"
+            show-checkbox
+            @check="selectCategory"
+          >
+          </el-tree>
           <p class="mark-setting-label">标签：</p>
           <el-tag
             v-for="tag in dynamicTags"
@@ -183,7 +181,6 @@
         moreSetting: false,
         contentEditor: '',
         categories: [],
-        categoryIdsList: [],
         draft: false,
         articleLink: `${window.origin}/artiles/`,
         tags: [],
@@ -194,6 +191,9 @@
         inputNewTagClass: 'input-new-tag',
         inputErrorClass: 'input-error',
         vditorLoading: true,
+        treeProps: {
+          label: 'name',
+        }
       }
     },
     mounted() {
@@ -255,10 +255,6 @@
             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()
@@ -280,9 +276,6 @@
       categoryTree() {
         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() {
@@ -318,27 +311,6 @@
         this.inputVisible = false
         this.inputValue = ''
       },
-      findCategoryIds(parentCategory, categories, categoryIds) {
-        if(!categoryIds){
-          return
-        }
-        categories.forEach(category => {
-          let ids = []
-          if(parentCategory && parentCategory.ids){
-            ids = parentCategory.ids
-          }
-          ids.push(category.id)
-          category['ids'] = ids
-          if(categoryIds.includes(category.id)){
-            let newIds = []
-            Object.assign(newIds , ids)
-            this.categoryIdsList.push(newIds)
-          }
-          if(category.children){
-            this.findCategoryIds(category, category.children, categoryIds)
-          }
-        })
-      },
       vditorInit(content){
         this.contentEditor = new Vditor('vditor', {
           height: this.clientHeight,
@@ -357,7 +329,6 @@
           },
           after: () => {
             this.contentEditor.setValue(content)
-            console.log('sdf')
           },
           input: (val) => {
             this.valueHasChanged()
@@ -440,14 +411,11 @@
         this.draft = false
         this.update()
       },
-      selectCategory(val){
+      selectCategory(props, data){
+        this.file.categoryIds = data.checkedKeys
       },
       // update
       update(message){
-        let categoryIds = []
-        this.categoryIdsList.forEach(categoryIdList => {
-          categoryIds.push(categoryIdList[categoryIdList.length - 1])
-        })
         if(!this.checkParam()){
           return
         }
@@ -462,7 +430,7 @@
             cover: this.file.cover,
             isDraft: this.draft,
             slug: this.file.slug ? this.file.slug : this.filename,
-            categoryIds: categoryIds,
+            categoryIds: this.file.categoryIds,
             tagNames: this.dynamicTags,
             currentDirectory: this.storageLocation,
             contentText: this.contentEditor.getValue()
@@ -617,4 +585,17 @@
       max-width: 1200px;
     }
   }
+
+/deep/ .el-tree-node {
+  &:focus>.el-tree-node__content {
+    background-color: unset;
+  }
+  .el-tree-node__content:hover {
+    background-color: unset;
+  }
+}
+.category-tree {
+  max-height: 500px;
+  overflow: auto;
+}
 </style>