Complete post creation feature

src/api/category.js

@@ -41,13 +41,16 @@ function concreteTree(parentCategory, categories) {
       }
       parentCategory.children.push({
         key: category.id,
-        title: category.name
+        title: category.name,
+        isLeaf: false
       })
     }
   })
 
   if (parentCategory.children) {
     parentCategory.children.forEach(category => concreteTree(category, categories))
+  } else {
+    parentCategory.isLeaf = true
   }
 }
 

src/api/post.js

@@ -19,6 +19,22 @@ postApi.query = params => {
   })
 }
 
+postApi.create = postToCreate => {
+  return service({
+    url: baseUrl,
+    method: 'post',
+    data: postToCreate
+  })
+}
+
+postApi.update = (postId, postToUpdate) => {
+  return service({
+    url: `${baseUrl}/${postId}`,
+    method: 'put',
+    data: postToUpdate
+  })
+}
+
 postApi.postStatus = {
   PUBLISHED: {
     color: 'green',

src/views/post/PostEdit.vue

@@ -11,6 +11,7 @@
         <a-card>
           <div style="margin-bottom: 16px">
             <a-input
+              v-model="postToStage.title"
               v-decorator="['title', { rules: [{ required: true, message: '请输入文章标题' }] }]"
               size="large"
               placeholder="请输入文章标题"
@@ -26,7 +27,7 @@
           <div id="editor">
             <mavon-editor
               :toolbars="markdownOption"
-              v-model="value"
+              v-model="postToStage.originalContent"
               :boxShadow="false"
               :ishljs="true"
             />
@@ -55,18 +56,21 @@
                 <a-form layout="vertical">
                   <a-form-item
                     label="文章路径："
-                    :help="'https://localhost:8090/archives/' + postUrl"
+                    :help="'/archives/' + (postToStage.url ? postToStage.url : '{auto_generate}')"
                   >
-                    <a-input v-model="postUrl" />
+                    <a-input v-model="postToStage.url" />
                   </a-form-item>
                   <a-form-item label="文章密码：">
                     <a-input type="password" />
                   </a-form-item>
-                  <a-form-item label="是否开启评论：">
+                  <a-form-item label="是否关闭评论：">
-                    <a-select defaultValue="1">
+                    <a-radio-group
-                      <a-select-option value="1">是</a-select-option>
+                      v-model="postToStage.disallowComment"
-                      <a-select-option value="0">否</a-select-option>
+                      :defaultValue="false"
-                    </a-select>
+                    >
+                      <a-radio :value="false">开启</a-radio>
+                      <a-radio :value="true">关闭</a-radio>
+                    </a-radio-group>
                   </a-form-item>
                 </a-form>
               </div>
@@ -76,7 +80,10 @@
             <div :style="{ marginBottom: '16px' }">
               <h3 class="post-setting-drawer-title">分类目录</h3>
               <div class="post-setting-drawer-item">
-                <category-tree :categories="categories" />
+                <category-tree
+                  v-model="selectedCategoryIds"
+                  :categories="categories"
+                />
               </div>
             </div>
             <a-divider />
@@ -87,13 +94,15 @@
                 <a-form layout="vertical">
                   <a-form-item>
                     <a-select
-                      mode="tags"
+                      v-model="selectedTagIds"
+                      allowClear
+                      mode="multiple"
                       placeholder="选择或输入标签"
                     >
                       <a-select-option
                         v-for="tag in tags"
                         :key="tag.id"
-                        :value="tag.id.toString()"
+                        :value="tag.id"
                       >{{ tag.name }}</a-select-option>
                     </a-select>
                   </a-form-item>
@@ -118,12 +127,12 @@
           <div class="postControl">
             <a-button
               style="marginRight: 8px"
-              @click="onClose"
+              @click="handleDraftClick"
             >保存草稿</a-button>
             <a-button
-              @click="onClose"
+              @click="handlePublishClick"
               type="primary"
-            >发布</a-button>
+            >{{ publishText }}</a-button>
           </div>
         </a-drawer>
       </a-col>
@@ -138,6 +147,7 @@ import { mixin, mixinDevice } from '@/utils/mixin.js'
 import 'mavon-editor/dist/css/index.css'
 import tagApi from '@/api/tag'
 import categoryApi from '@/api/category'
+import postApi from '@/api/post'
 
 const toolbars = {
   bold: true, // 粗体
@@ -177,10 +187,20 @@ export default {
       value: 'Hello World',
       visible: false,
       drawerWidth: '460',
-      postUrl: 'hello-world',
       tags: [],
       categories: [],
-      markdownOption: toolbars
+      selectedCategoryIds: [],
+      selectedTagIds: [],
+      markdownOption: toolbars,
+      postToStage: {}
+    }
+  },
+  computed: {
+    publishText() {
+      if (this.postToStage.id) {
+        return '更新'
+      }
+      return '创建并发布'
     }
   },
   mounted() {
@@ -205,9 +225,38 @@ export default {
         this.categories = response.data.data
       })
     },
+    createOrUpdatePost() {
+      // Set category ids
+      this.postToStage.categoryIds = this.selectedCategoryIds
+      // Set tag ids
+      this.postToStage.tagIds = this.selectedTagIds
+
+      if (this.postToStage.id) {
+        // Update the post
+        postApi.update(this.postToStage.id, this.postToStage).then(response => {
+          this.$log.debug('Updated post', response.data.data)
+          this.$message.success('文章更新成功')
+        })
+      } else {
+        // Create the post
+        postApi.create(this.postToStage).then(response => {
+          this.$log.debug('Created post', response.data.data)
+          this.$message.success('文章创建成功')
+          this.postToStage.id = response.data.data.id
+        })
+      }
+    },
     showDrawer() {
       this.visible = true
     },
+    handlePublishClick() {
+      this.postToStage.status = 'PUBLISHED'
+      this.createOrUpdatePost()
+    },
+    handleDraftClick() {
+      this.postToStage.status = 'DRAFT'
+      this.createOrUpdatePost()
+    },
     onClose() {
       this.visible = false
     }

src/views/post/components/CategoryTree.vue

@@ -3,6 +3,7 @@
     checkable
     :treeData="categoryTree"
     :defaultExpandAll="true"
+    @check="onCheck"
   >
     <span
       slot="title0010"
@@ -16,7 +17,16 @@ import categoryApi from '@/api/category'
 
 export default {
   name: 'CategoryTree',
+  model: {
+    prop: 'categoryIds',
+    event: 'check'
+  },
   props: {
+    categoryIds: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     categories: {
       type: Array,
       required: false,
@@ -27,6 +37,21 @@ export default {
     categoryTree() {
       return categoryApi.concreteTree(this.categories)
     }
+  },
+  methods: {
+    onCheck(checkedKeys, e) {
+      this.$log.debug('Chekced keys', checkedKeys)
+      this.$log.debug('e', e)
+      const categoryIds = e.checkedNodes
+        .filter(node => {
+          return node.data.props.isLeaf
+        })
+        .map(node => node.key)
+
+      this.$log.debug('Effectively selected category ids', categoryIds)
+
+      this.$emit('check', categoryIds)
+    }
   }
 }
 </script>