From ad10279584de5ffa76b582d3530c8761ce653806 Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Sat, 15 Feb 2020 20:35:37 +0800
Subject: [PATCH] feat: support set thumbnail to category and tag.

---
 src/components/global.less      |  4 ++++
 src/views/post/CategoryList.vue | 28 +++++++++++++++++++++-
 src/views/post/TagList.vue      | 41 +++++++++++++++++++++++++++++----
 3 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/src/components/global.less b/src/components/global.less
index 8d3d996ee..e3e5c9ced 100644
--- a/src/components/global.less
+++ b/src/components/global.less
@@ -911,4 +911,8 @@ body {
   img {
     width: 100%;
   }
+}
+
+.ant-input-group-addon {
+  line-height: initial !important;
 }
\ No newline at end of file
diff --git a/src/views/post/CategoryList.vue b/src/views/post/CategoryList.vue
index 30d543453..3e41307c9 100644
--- a/src/views/post/CategoryList.vue
+++ b/src/views/post/CategoryList.vue
@@ -32,6 +32,20 @@
                 v-model="categoryToCreate.parentId"
               />
             </a-form-item>
+            <a-form-item
+              label="封面图"
+              help="* 在分类页面可展示，需要主题支持"
+            >
+              <a-input v-model="categoryToCreate.thumbnail">
+                <a
+                  href="javascript:void(0);"
+                  slot="addonAfter"
+                  @click="()=>this.thumbnailDrawerVisible = true"
+                >
+                  <a-icon type="picture" />
+                </a>
+              </a-input>
+            </a-form-item>
             <a-form-item
               label="描述："
               help="* 分类描述，部分主题可显示"
@@ -206,12 +220,19 @@
         </a-card>
       </a-col>
     </a-row>
+
+    <AttachmentSelectDrawer
+      v-model="thumbnailDrawerVisible"
+      @listenToSelect="handleSelectThumbnail"
+      title="选择封面图"
+    />
   </div>
 </template>
 
 <script>
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import CategorySelectTree from './components/CategorySelectTree'
+import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
 import categoryApi from '@/api/category'
 import menuApi from '@/api/menu'
 
@@ -239,13 +260,14 @@ const columns = [
   }
 ]
 export default {
-  components: { CategorySelectTree },
+  components: { CategorySelectTree, AttachmentSelectDrawer },
   mixins: [mixin, mixinDevice],
   data() {
     return {
       formType: 'create',
       categories: [],
       categoryToCreate: {},
+      thumbnailDrawerVisible: false,
       menu: {},
       loading: false,
       columns
@@ -316,6 +338,10 @@ export default {
         this.$message.success('添加到菜单成功！')
         this.menu = {}
       })
+    },
+    handleSelectThumbnail(data) {
+      this.$set(this.categoryToCreate, 'thumbnail', encodeURI(data.path))
+      this.thumbnailDrawerVisible = false
     }
   }
 }
diff --git a/src/views/post/TagList.vue b/src/views/post/TagList.vue
index f3447f0a7..18d60d49d 100644
--- a/src/views/post/TagList.vue
+++ b/src/views/post/TagList.vue
@@ -9,7 +9,10 @@
         :xs="24"
         :style="{ 'padding-bottom': '12px' }"
       >
-        <a-card :title="title" :bodyStyle="{ padding: '16px' }">
+        <a-card
+          :title="title"
+          :bodyStyle="{ padding: '16px' }"
+        >
           <a-form layout="horizontal">
             <a-form-item
               label="名称："
@@ -23,6 +26,20 @@
             >
               <a-input v-model="tagToCreate.slugName" />
             </a-form-item>
+            <a-form-item
+              label="封面图"
+              help="* 在标签页面可展示，需要主题支持"
+            >
+              <a-input v-model="tagToCreate.thumbnail">
+                <a
+                  href="javascript:void(0);"
+                  slot="addonAfter"
+                  @click="()=>this.thumbnailDrawerVisible = true"
+                >
+                  <a-icon type="picture" />
+                </a>
+              </a-input>
+            </a-form-item>
             <a-form-item>
               <a-button
                 type="primary"
@@ -64,8 +81,11 @@
         :xs="24"
         :style="{ 'padding-bottom': '12px' }"
       >
-        <a-card title="所有标签" :bodyStyle="{ padding: '16px' }">
-          <a-empty v-if="tags.length==0"/>
+        <a-card
+          title="所有标签"
+          :bodyStyle="{ padding: '16px' }"
+        >
+          <a-empty v-if="tags.length==0" />
           <a-tooltip
             placement="topLeft"
             v-for="tag in tags"
@@ -84,18 +104,27 @@
         </a-card>
       </a-col>
     </a-row>
+
+    <AttachmentSelectDrawer
+      v-model="thumbnailDrawerVisible"
+      @listenToSelect="handleSelectThumbnail"
+      title="选择封面图"
+    />
   </div>
 </template>
 
 <script>
 import tagApi from '@/api/tag'
+import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
 
 export default {
+  components: { AttachmentSelectDrawer },
   data() {
     return {
       formType: 'create',
       tags: [],
-      tagToCreate: {}
+      tagToCreate: {},
+      thumbnailDrawerVisible: false
     }
   },
   computed: {
@@ -155,6 +184,10 @@ export default {
         })
       }
       this.handleAddTag()
+    },
+    handleSelectThumbnail(data) {
+      this.$set(this.tagToCreate, 'thumbnail', encodeURI(data.path))
+      this.thumbnailDrawerVisible = false
     }
   }
 }