From 6d77de0e965c84fb7de50c7e7113b6706acabcb9 Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Sat, 7 Dec 2019 20:33:29 +0800
Subject: [PATCH] feat: support preset post meta field.

---
 src/components/Tools/HeaderComment.vue        |  12 +-
 src/components/global.less                    |   9 +-
 src/views/attachment/AttachmentList.vue       |   2 +-
 src/views/post/PostEdit.vue                   |   5 +-
 .../post/components/PostSettingDrawer.vue     | 161 +++++++++++-------
 5 files changed, 107 insertions(+), 82 deletions(-)

diff --git a/src/components/Tools/HeaderComment.vue b/src/components/Tools/HeaderComment.vue
index 02b9652d..21faa76a 100644
--- a/src/components/Tools/HeaderComment.vue
+++ b/src/components/Tools/HeaderComment.vue
@@ -9,7 +9,7 @@
     title="待审核评论"
   >
     <template slot="content">
-      <a-spin :spinning="loadding">
+      <a-spin :spinning="loading">
         <div class="custom-tab-wrapper">
           <a-tabs>
             <a-tab-pane
@@ -99,7 +99,7 @@ export default {
   name: 'HeaderComment',
   data() {
     return {
-      loadding: false,
+      loading: false,
       visible: false,
       postComments: [],
       sheetComments: []
@@ -125,21 +125,21 @@ export default {
   methods: {
     fetchComment() {
       if (!this.visible) {
-        this.loadding = true
+        this.loading = true
         this.getComment()
       } else {
-        this.loadding = false
+        this.loading = false
       }
       this.visible = !this.visible
     },
     getComment() {
       commentApi.latestComment('posts', 5, 'AUDITING').then(response => {
         this.postComments = response.data.data
-        this.loadding = false
+        this.loading = false
       })
       commentApi.latestComment('sheets', 5, 'AUDITING').then(response => {
         this.sheetComments = response.data.data
-        this.loadding = false
+        this.loading = false
       })
     }
   }
diff --git a/src/components/global.less b/src/components/global.less
index daae476c..3772764a 100644
--- a/src/components/global.less
+++ b/src/components/global.less
@@ -477,11 +477,6 @@ body {
 
 }
 
-// 数据列表 样式
-.table-alert {
-  margin-bottom: 16px;
-}
-
 .table-page-search-wrapper {
 
   .ant-form-inline {
@@ -518,6 +513,10 @@ body {
 
 }
 
+.ant-table-thead > tr > th{
+  background: #fff !important;
+}
+
 .content {
 
   .table-operator {
diff --git a/src/views/attachment/AttachmentList.vue b/src/views/attachment/AttachmentList.vue
index 3696d3f7..d04479a4 100644
--- a/src/views/attachment/AttachmentList.vue
+++ b/src/views/attachment/AttachmentList.vue
@@ -80,7 +80,7 @@
           <div class="table-operator" style="margin-bottom: 0;">
             <a-button
               type="primary"
-              icon="plus"
+              icon="cloud-upload"
               @click="()=>this.uploadVisible = true"
             >上传</a-button>
           </div>
diff --git a/src/views/post/PostEdit.vue b/src/views/post/PostEdit.vue
index 8310213a..c339184e 100644
--- a/src/views/post/PostEdit.vue
+++ b/src/views/post/PostEdit.vue
@@ -94,10 +94,7 @@ export default {
       postToStage: {},
       selectedTagIds: [],
       selectedCategoryIds: [],
-      selectedPostMetas: [{
-        key: '',
-        value: ''
-      }],
+      selectedPostMetas: [],
       isSaved: false
     }
   },
diff --git a/src/views/post/components/PostSettingDrawer.vue b/src/views/post/components/PostSettingDrawer.vue
index 80553529..06233bda 100644
--- a/src/views/post/components/PostSettingDrawer.vue
+++ b/src/views/post/components/PostSettingDrawer.vue
@@ -73,50 +73,50 @@
         <div :style="{ marginBottom: '16px' }">
           <h3 class="post-setting-drawer-title">分类目录</h3>
           <div class="post-setting-drawer-item">
-            <category-tree
-              v-model="selectedCategoryIds"
-              :categories="categories"
-            />
-            <div>
-              <a-form layout="vertical">
-                <a-form-item v-if="categoryFormVisible">
-                  <category-select-tree
-                    :categories="categories"
-                    v-model="categoryToCreate.parentId"
-                  />
-                </a-form-item>
-                <a-form-item v-if="categoryFormVisible">
-                  <a-input
-                    placeholder="分类名称"
-                    v-model="categoryToCreate.name"
-                  />
-                </a-form-item>
-                <a-form-item v-if="categoryFormVisible">
-                  <a-input
-                    placeholder="分类路径"
-                    v-model="categoryToCreate.slugNames"
-                  />
-                </a-form-item>
-                <a-form-item>
-                  <a-button
-                    type="primary"
-                    style="marginRight: 8px"
-                    v-if="categoryFormVisible"
-                    @click="handlerCreateCategory"
-                  >保存</a-button>
-                  <a-button
-                    type="dashed"
-                    style="marginRight: 8px"
-                    v-if="!categoryFormVisible"
-                    @click="toggleCategoryForm"
-                  >新增</a-button>
-                  <a-button
-                    v-if="categoryFormVisible"
-                    @click="toggleCategoryForm"
-                  >取消</a-button>
-                </a-form-item>
-              </a-form>
-            </div>
+            <a-form layout="vertical">
+              <a-form-item>
+                <category-tree
+                  v-model="selectedCategoryIds"
+                  :categories="categories"
+                />
+              </a-form-item>
+              <a-form-item v-if="categoryFormVisible">
+                <category-select-tree
+                  :categories="categories"
+                  v-model="categoryToCreate.parentId"
+                />
+              </a-form-item>
+              <a-form-item v-if="categoryFormVisible">
+                <a-input
+                  placeholder="分类名称"
+                  v-model="categoryToCreate.name"
+                />
+              </a-form-item>
+              <a-form-item v-if="categoryFormVisible">
+                <a-input
+                  placeholder="分类路径"
+                  v-model="categoryToCreate.slugNames"
+                />
+              </a-form-item>
+              <a-form-item>
+                <a-button
+                  type="primary"
+                  style="marginRight: 8px"
+                  v-if="categoryFormVisible"
+                  @click="handlerCreateCategory"
+                >保存</a-button>
+                <a-button
+                  type="dashed"
+                  style="marginRight: 8px"
+                  v-if="!categoryFormVisible"
+                  @click="toggleCategoryForm"
+                >新增</a-button>
+                <a-button
+                  v-if="categoryFormVisible"
+                  @click="toggleCategoryForm"
+                >取消</a-button>
+              </a-form-item>
+            </a-form>
           </div>
         </div>
         <a-divider />
@@ -167,28 +167,40 @@
             </div>
           </div>
         </div>
+        <a-divider />
         <div :style="{ marginBottom: '16px' }">
           <h3 class="post-setting-drawer-title">元数据</h3>
-          <a-form-item
-            v-for="(postMeta, index) in selectedPostMetas"
-            :key="index"
-            :prop="'postMetas.' + index + '.value'"
-          >
-            <a-row :gutter="10">
-              <a-col :span="11">
-                <a-input v-model="postMeta.key"><i slot="addonBefore">K</i></a-input>
-              </a-col>
-              <a-col :span="11">
-                <a-input v-model="postMeta.value"><i slot="addonBefore">V</i></a-input>
-              </a-col>
-              <a-col :span="2">
-                <a-icon type="close" @click.prevent="removePostMeta(postMeta)"/>
-              </a-col>
-            </a-row>
-          </a-form-item>
-          <a-form-item>
-            <a-button @click="addPostMeta">新增</a-button>
-          </a-form-item>
+          <a-form layout="vertical">
+            <a-form-item
+              v-for="(postMeta, index) in selectedPostMetas"
+              :key="index"
+              :prop="'postMetas.' + index + '.value'"
+            >
+              <a-row :gutter="5">
+                <a-col :span="12">
+                  <a-input v-model="postMeta.key"><i slot="addonBefore">K</i></a-input>
+                </a-col>
+                <a-col :span="12">
+                  <a-input v-model="postMeta.value">
+                    <i slot="addonBefore">V</i>
+                    <a
+                      href="javascript:void(0);"
+                      slot="addonAfter"
+                      @click.prevent="handleRemovePostMeta(postMeta)"
+                    >
+                      <a-icon type="close" />
+                    </a>
+                  </a-input>
+                </a-col>
+              </a-row>
+            </a-form-item>
+            <a-form-item>
+              <a-button
+                type="dashed"
+                @click="handleInsertPostMeta"
+              >新增</a-button>
+            </a-form-item>
+          </a-form>
         </div>
         <a-divider class="divider-transparent" />
       </div>
@@ -227,6 +239,7 @@ import AttachmentSelectDrawer from '../../attachment/components/AttachmentSelect
 import { mapGetters } from 'vuex'
 import categoryApi from '@/api/category'
 import postApi from '@/api/post'
+import themeApi from '@/api/theme'
 export default {
   name: 'PostSettingDrawer',
   mixins: [mixin, mixinDevice],
@@ -317,6 +330,7 @@ export default {
       if (newValue) {
         this.loadSkeleton()
         this.loadCategories()
+        this.loadPresetMetasField()
       }
     }
   },
@@ -347,6 +361,21 @@ export default {
         this.categories = response.data.data
       })
     },
+    loadPresetMetasField() {
+      if (this.postMetas.length <= 0) {
+        themeApi.getActivatedTheme().then(response => {
+          const fields = response.data.data.postMetaField
+          if (fields && fields.length > 0) {
+            for (let i = 0, len = fields.length; i < len; i++) {
+              this.selectedPostMetas.push({
+                value: '',
+                key: fields[i]
+              })
+            }
+          }
+        })
+      }
+    },
     handleSelectPostThumb(data) {
       this.selectedPost.thumbnail = encodeURI(data.path)
       this.thumbDrawerVisible = false
@@ -433,13 +462,13 @@ export default {
     onPostDateOk(value) {
       this.selectedPost.createTime = value.valueOf()
     },
-    removePostMeta(item) {
+    handleRemovePostMeta(item) {
       var index = this.selectedPostMetas.indexOf(item)
       if (index !== -1) {
         this.selectedPostMetas.splice(index, 1)
       }
     },
-    addPostMeta() {
+    handleInsertPostMeta() {
       this.selectedPostMetas.push({
         value: '',
         key: ''