refactor: input attachment selection uniformly uses AttachmentInput component (halo-dev/console#406)

src/components/Input/AttachmentInput.vue

@@ -5,11 +5,7 @@
         <a-icon type="picture" />
       </a>
     </a-input>
-    <AttachmentSelectDrawer
-      v-model="attachmentDrawerVisible"
-      title="选择附件"
-      @listenToSelect="handleSelectAttachment"
-    />
+    <AttachmentSelectDrawer v-model="attachmentDrawerVisible" :title="title" @listenToSelect="handleSelectAttachment" />
   </div>
 </template>
 <script>
@@ -27,6 +23,10 @@ export default {
     placeholder: {
       type: String,
       default: ''
+    },
+    title: {
+      type: String,
+      default: '选择附件'
     }
   },
   data() {

src/views/post/CategoryList.vue

@@ -14,11 +14,7 @@
               <category-select-tree v-model="form.model.parentId" :categories="table.data" />
             </a-form-model-item>
             <a-form-model-item help="* 在分类页面可展示，需要主题支持" label="封面图：" prop="thumbnail">
-              <a-input v-model="form.model.thumbnail">
-                <a slot="addonAfter" href="javascript:void(0);" @click="thumbnailDrawer.visible = true">
-                  <a-icon type="picture" />
-                </a>
-              </a-input>
+              <AttachmentInput v-model="form.model.thumbnail" title="选择封面图" />
             </a-form-model-item>
             <a-form-model-item help="* 分类密码" label="密码：" prop="password">
               <a-input-password v-model="form.model.password" autocomplete="new-password" />
@@ -151,12 +147,6 @@
         </a-card>
       </a-col>
     </a-row>
-
-    <AttachmentSelectDrawer
-      v-model="thumbnailDrawer.visible"
-      title="选择封面图"
-      @listenToSelect="handleSelectThumbnail"
-    />
   </page-view>
 </template>
 
@@ -213,9 +203,6 @@ export default {
           thumbnail: [{ max: 1023, message: '* 封面图链接的字符长度不能超过 1023', trigger: ['change'] }],
           description: [{ max: 100, message: '* 分类描述的字符长度不能超过 100', trigger: ['change'] }]
         }
-      },
-      thumbnailDrawer: {
-        visible: false
       }
     }
   },
@@ -300,10 +287,6 @@ export default {
         _this.handleListCategories()
       }
     },
-    handleSelectThumbnail(data) {
-      this.$set(this.form.model, 'thumbnail', encodeURI(data.path))
-      this.thumbnailDrawer.visible = false
-    },
     handleQueryCategoryPosts(category) {
       this.$router.push({ name: 'PostList', query: { categoryId: category.id } })
     }

src/views/post/TagList.vue

@@ -18,11 +18,7 @@
               </a-input>
             </a-form-model-item>
             <a-form-model-item help="* 在标签页面可展示，需要主题支持" label="封面图：" prop="thumbnail">
-              <a-input v-model="form.model.thumbnail">
-                <a slot="addonAfter" href="javascript:void(0);" @click="thumbnailDrawer.visible = true">
-                  <a-icon type="picture" />
-                </a>
-              </a-input>
+              <AttachmentInput v-model="form.model.thumbnail" title="选择封面图" />
             </a-form-model-item>
             <a-form-model-item>
               <ReactiveButton
@@ -76,12 +72,6 @@
         </a-card>
       </a-col>
     </a-row>
-
-    <AttachmentSelectDrawer
-      v-model="thumbnailDrawer.visible"
-      title="选择封面图"
-      @listenToSelect="handleSelectThumbnail"
-    />
   </page-view>
 </template>
 
@@ -118,9 +108,6 @@ export default {
           thumbnail: [{ max: 1023, message: '* 封面图链接的字符长度不能超过 1023', trigger: ['change'] }],
           color: [{ max: 7, pattern: hexRegExp, message: '仅支持 hex 颜色值' }]
         }
-      },
-      thumbnailDrawer: {
-        visible: false
       }
     }
   },
@@ -196,10 +183,6 @@ export default {
         }
         _this.handleListTags()
       }
-    },
-    handleSelectThumbnail(data) {
-      this.$set(this.form.model, 'thumbnail', encodeURI(data.path))
-      this.thumbnailDrawer.visible = false
     }
   }
 }

src/views/system/optiontabs/GeneralTab.vue

@@ -8,18 +8,10 @@
         <a-input v-model="options.blog_url" placeholder="如：https://halo.run" />
       </a-form-model-item>
       <a-form-model-item label="Logo：" prop="blog_logo">
-        <a-input v-model="options.blog_logo">
-          <a slot="addonAfter" href="javascript:void(0);" @click="handleShowLogoSelector">
-            <a-icon type="picture" />
-          </a>
-        </a-input>
+        <AttachmentInput v-model="options.blog_logo" title="选择 Logo" />
       </a-form-model-item>
       <a-form-model-item label="Favicon：" prop="blog_favicon">
-        <a-input v-model="options.blog_favicon">
-          <a slot="addonAfter" href="javascript:void(0);" @click="handleShowFaviconSelector">
-            <a-icon type="picture" />
-          </a>
-        </a-input>
+        <AttachmentInput v-model="options.blog_favicon" title="选择 Favicon" />
       </a-form-model-item>
       <a-form-model-item label="页脚信息：" prop="blog_footer_info">
         <a-input
@@ -42,12 +34,6 @@
         ></ReactiveButton>
       </a-form-model-item>
     </a-form-model>
-
-    <AttachmentSelectDrawer
-      v-model="attachmentSelector.visible"
-      :title="attachmentSelectorTitle"
-      @listenToSelect="handleSelectAttachment"
-    />
   </div>
 </template>
 
@@ -76,10 +62,6 @@ export default {
         sm: { span: 12 },
         xs: { span: 24 }
       },
-      attachmentSelector: {
-        visible: false,
-        field: ''
-      },
       rules: {
         blog_title: [
           { required: true, message: '* 博客标题不能为空', trigger: ['change'] },
@@ -95,27 +77,6 @@ export default {
       }
     }
   },
-  computed: {
-    attachmentSelectorTitle() {
-      if (this.attachmentSelector.field === 'blog_logo') {
-        return '选择 Logo'
-      } else if (this.attachmentSelector.field === 'blog_favicon') {
-        return '选择 Favicon'
-      }
-      return ''
-    }
-  },
-  destroyed: function() {
-    if (this.attachmentSelector.visible) {
-      this.attachmentSelector.visible = false
-    }
-  },
-  beforeRouteLeave(to, from, next) {
-    if (this.attachmentSelector.visible) {
-      this.attachmentSelector.visible = false
-    }
-    next()
-  },
   watch: {
     options(val) {
       this.$emit('onChange', val)
@@ -129,18 +90,6 @@ export default {
           this.$emit('onSave')
         }
       })
-    },
-    handleShowLogoSelector() {
-      this.attachmentSelector.field = 'blog_logo'
-      this.attachmentSelector.visible = true
-    },
-    handleShowFaviconSelector() {
-      this.attachmentSelector.field = 'blog_favicon'
-      this.attachmentSelector.visible = true
-    },
-    handleSelectAttachment(attachment) {
-      this.$set(this.options, this.attachmentSelector.field, encodeURI(attachment.path))
-      this.attachmentSelector.visible = false
     }
   }
 }