feat: allow add and modify post metas

src/views/post/PostEdit.vue

@@ -30,11 +30,13 @@
       :post="postToStage"
       :tagIds="selectedTagIds"
       :categoryIds="selectedCategoryIds"
+      :postMetas="selectedPostMetas"
       :visible="postSettingVisible"
       @close="onPostSettingsClose"
       @onRefreshPost="onRefreshPostFromSetting"
       @onRefreshTagIds="onRefreshTagIdsFromSetting"
       @onRefreshCategoryIds="onRefreshCategoryIdsFromSetting"
+      @onRefreshPostMetas="onRefreshPostMetasFromSetting"
       @onSaved="onSaved"
     />
 
@@ -92,6 +94,10 @@ export default {
       postToStage: {},
       selectedTagIds: [],
       selectedCategoryIds: [],
+      selectedPostMetas: [{
+        key: '',
+        value: ''
+      }],
       isSaved: false
     }
   },
@@ -105,6 +111,7 @@ export default {
           vm.postToStage = post
           vm.selectedTagIds = post.tagIds
           vm.selectedCategoryIds = post.categoryIds
+          vm.selectedPostMetas = post.postMetas
         })
       }
     })
@@ -239,6 +246,9 @@ export default {
     onRefreshCategoryIdsFromSetting(categoryIds) {
       this.selectedCategoryIds = categoryIds
     },
+    onRefreshPostMetasFromSetting(postMetas) {
+      this.selectedPostMetas = postMetas
+    },
     onSaved(isSaved) {
       this.isSaved = isSaved
     }

src/views/post/PostList.vue

@@ -495,6 +495,7 @@
       :post="selectedPost"
       :tagIds="selectedTagIds"
       :categoryIds="selectedCategoryIds"
+      :postMetas="selectedPostMetas"
       :needTitle="true"
       :saveDraftButton="false"
       :savePublishButton="false"
@@ -504,6 +505,7 @@
       @onRefreshPost="onRefreshPostFromSetting"
       @onRefreshTagIds="onRefreshTagIdsFromSetting"
       @onRefreshCategoryIds="onRefreshCategoryIdsFromSetting"
+      @onRefreshPostMetas="onRefreshPostMetasFromSetting"
     />
 
     <TargetCommentDrawer
@@ -605,6 +607,10 @@ export default {
       columns,
       selectedRowKeys: [],
       categories: [],
+      selectedPostMetas: [{
+        key: '',
+        value: ''
+      }],
       posts: [],
       postsLoading: false,
       postSettingVisible: false,
@@ -747,6 +753,8 @@ export default {
         this.selectedPost = response.data.data
         this.selectedTagIds = this.selectedPost.tagIds
         this.selectedCategoryIds = this.selectedPost.categoryIds
+        this.selectedPostMetaIds = this.selectedPost.postMetaIds
+        this.selectedPostMetas = this.selectedPost.postMetas
         this.postSettingVisible = true
       })
     },
@@ -787,6 +795,9 @@ export default {
     },
     onRefreshCategoryIdsFromSetting(categoryIds) {
       this.selectedCategoryIds = categoryIds
+    },
+    onRefreshPostMetasFromSetting(postMetas) {
+      this.selectedPostMetas = postMetas
     }
   }
 }

src/views/post/components/PostSettingDrawer.vue

@@ -167,6 +167,29 @@
             </div>
           </div>
         </div>
+        <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>
+        </div>
         <a-divider class="divider-transparent" />
       </div>
     </a-skeleton>
@@ -238,6 +261,10 @@ export default {
       type: Array,
       required: true
     },
+    postMetas: {
+      type: Array,
+      required: true
+    },
     visible: {
       type: Boolean,
       required: false,
@@ -283,6 +310,9 @@ export default {
     selectedCategoryIds(val) {
       this.$emit('onRefreshCategoryIds', val)
     },
+    selectedPostMetas(val) {
+      this.$emit('onRefreshPostMetas', val)
+    },
     visible: function(newValue, oldValue) {
       if (newValue) {
         this.loadSkeleton()
@@ -291,6 +321,11 @@ export default {
     }
   },
   computed: {
+    selectedPostMetas() {
+      // 不能将selectedPostMetas直接定义在data里
+      // 还没有获取到值就渲染视图,可以直接使用postMetas
+      return this.postMetas
+    },
     pickerDefaultValue() {
       if (this.selectedPost.createTime) {
         var date = new Date(this.selectedPost.createTime)
@@ -370,6 +405,8 @@ export default {
       this.selectedPost.categoryIds = this.selectedCategoryIds
       // Set tag ids
       this.selectedPost.tagIds = this.selectedTagIds
+      // Set post metas
+      this.selectedPost.postMetas = this.selectedPostMetas
 
       if (this.selectedPost.id) {
         // Update the post
@@ -402,6 +439,18 @@ export default {
     },
     onPostDateOk(value) {
       this.selectedPost.createTime = value.valueOf()
+    },
+    removePostMeta(item) {
+      var index = this.selectedPostMetas.indexOf(item)
+      if (index !== -1) {
+        this.selectedPostMetas.splice(index, 1)
+      }
+    },
+    addPostMeta() {
+      this.selectedPostMetas.push({
+        value: '',
+        key: ''
+      })
     }
   }
 }