Create PostSetting component.

package-lock.json

@@ -2900,9 +2900,9 @@
       "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
     },
     "ant-design-vue": {
-      "version": "1.3.15",
+      "version": "1.3.16",
-      "resolved": "https://registry.npm.taobao.org/ant-design-vue/download/ant-design-vue-1.3.15.tgz",
+      "resolved": "https://registry.npm.taobao.org/ant-design-vue/download/ant-design-vue-1.3.16.tgz",
-      "integrity": "sha1-Wrc4ljrRFqF2ALJv1QJEEy80y5k=",
+      "integrity": "sha1-sY9/omXtx8eYpaZdFdktctOgvrE=",
       "requires": {
         "@ant-design/icons": "^2.1.1",
         "@ant-design/icons-vue": "^2.0.0",
@@ -3175,9 +3175,9 @@
       "dev": true
     },
     "async-validator": {
-      "version": "3.0.3",
+      "version": "3.0.4",
-      "resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-3.0.3.tgz?cache=0&sync_timestamp=1565685468183&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fasync-validator%2Fdownload%2Fasync-validator-3.0.3.tgz",
+      "resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-3.0.4.tgz",
-      "integrity": "sha1-PrjO6Ly4UX7lX+77hI2hbUggWzU="
+      "integrity": "sha1-UVxVuv7kCxNm9Henn+Z4dTyIKOM="
     },
     "asynckit": {
       "version": "0.4.0",
@@ -9705,7 +9705,7 @@
     },
     "ismobilejs": {
       "version": "0.5.2",
-      "resolved": "https://registry.npm.taobao.org/ismobilejs/download/ismobilejs-0.5.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fismobilejs%2Fdownload%2Fismobilejs-0.5.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/ismobilejs/download/ismobilejs-0.5.2.tgz",
       "integrity": "sha1-6Bus9hh8UyrYNINV9P7Nbmrf3OE="
     },
     "isobject": {

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "animate.css": "^3.7.0",
-    "ant-design-vue": "^1.3.15",
+    "ant-design-vue": "^1.3.16",
     "axios": "^0.18.0",
     "enquire.js": "^2.1.6",
     "halo-editor": "^2.7.6",

src/views/post/PostEdit.vue

@@ -19,180 +19,27 @@
             :toolbars="toolbars"
             :ishljs="true"
             :autofocus="false"
-            @imgAdd="pictureUploadHandle"
+            @imgAdd="handleAttachmentUpload"
           />
         </div>
       </a-col>
     </a-row>
 
-    <a-drawer
+    <PostSetting
-      title="文章设置"
+      :post="postToStage"
-      :width="isMobile()?'100%':'460'"
+      :selectedTagIds="selectedTagIds"
-      placement="right"
+      :selectedCategoryIds="selectedCategoryIds"
-      closable
+      v-model="postSettingVisible"
-      @close="()=>this.postSettingVisible=false"
+      @close="onPostSettingsClose"
-      :visible="postSettingVisible"
+      @onRefreshPost="onRefreshPostFromSetting"
-    >
-      <div class="post-setting-drawer-content">
-        <div :style="{ marginBottom: '16px' }">
-          <h3 class="post-setting-drawer-title">基本设置</h3>
-          <div class="post-setting-drawer-item">
-            <a-form layout="vertical">
-              <a-form-item
-                label="文章路径："
-                :help="options.blog_url+'/archives/' + (postToStage.url ? postToStage.url : '{auto_generate}')"
-              >
-                <a-input v-model="postToStage.url" />
-              </a-form-item>
-
-              <a-form-item
-                label="发表时间："
-              >
-                <a-date-picker
-                  showTime
-                  :defaultValue="pickerDefaultValue"
-                  format="YYYY-MM-DD HH:mm:ss"
-                  placeholder="选择文章发表时间"
-                  @change="onChange"
-                  @ok="onOk"
     />
-              </a-form-item>
-              <a-form-item label="开启评论：">
-                <a-radio-group
-                  v-model="postToStage.disallowComment"
-                  :defaultValue="false"
-                >
-                  <a-radio :value="false">开启</a-radio>
-                  <a-radio :value="true">关闭</a-radio>
-                </a-radio-group>
-              </a-form-item>
-            </a-form>
-          </div>
-        </div>
-        <a-divider />
-
-        <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="categoryForm">
-                  <category-select-tree
-                    :categories="categories"
-                    v-model="categoryToCreate.parentId"
-                  />
-                </a-form-item>
-                <a-form-item v-if="categoryForm">
-                  <a-input
-                    placeholder="分类名称"
-                    v-model="categoryToCreate.name"
-                  />
-                </a-form-item>
-                <a-form-item v-if="categoryForm">
-                  <a-input
-                    placeholder="分类路径"
-                    v-model="categoryToCreate.slugNames"
-                  />
-                </a-form-item>
-                <a-form-item>
-                  <a-button
-                    type="primary"
-                    style="marginRight: 8px"
-                    v-if="categoryForm"
-                    @click="handlerCreateCategory"
-                  >保存</a-button>
-                  <a-button
-                    type="dashed"
-                    style="marginRight: 8px"
-                    v-if="!categoryForm"
-                    @click="toggleCategoryForm"
-                  >新增</a-button>
-                  <a-button
-                    v-if="categoryForm"
-                    @click="toggleCategoryForm"
-                  >取消</a-button>
-                </a-form-item>
-              </a-form>
-            </div>
-          </div>
-        </div>
-        <a-divider />
-
-        <div :style="{ marginBottom: '16px' }">
-          <h3 class="post-setting-drawer-title">标签</h3>
-          <div class="post-setting-drawer-item">
-            <a-form layout="vertical">
-              <a-form-item>
-                <TagSelect v-model="selectedTagIds" />
-              </a-form-item>
-            </a-form>
-          </div>
-        </div>
-        <a-divider />
-
-        <div :style="{ marginBottom: '16px' }">
-          <h3 class="post-setting-drawer-title">摘要</h3>
-          <div class="post-setting-drawer-item">
-            <a-form layout="vertical">
-              <a-form-item>
-                <a-input
-                  type="textarea"
-                  :autosize="{ minRows: 5 }"
-                  v-model="postToStage.summary"
-                  placeholder="不填写则会自动生成"
-                />
-              </a-form-item>
-            </a-form>
-          </div>
-        </div>
-        <a-divider />
-
-        <div :style="{ marginBottom: '16px' }">
-          <h3 class="post-setting-drawer-title">缩略图</h3>
-          <div class="post-setting-drawer-item">
-            <div class="post-thum">
-              <img
-                class="img"
-                :src="postToStage.thumbnail || '//i.loli.net/2019/05/05/5ccf007c0a01d.png'"
-                @click="()=>this.thumDrawerVisible=true"
-              >
-              <a-button
-                class="post-thum-remove"
-                type="dashed"
-                @click="handlerRemoveThumb"
-              >移除</a-button>
-            </div>
-          </div>
-        </div>
-        <a-divider class="divider-transparent" />
-      </div>
-      <AttachmentSelectDrawer
-        v-model="thumDrawerVisible"
-        @listenToSelect="handleSelectPostThumb"
-        :drawerWidth="460"
-      />
-      <div class="bottom-control">
-        <a-button
-          style="marginRight: 8px"
-          @click="handleDraftClick"
-        >保存草稿</a-button>
-        <a-button
-          @click="handlePublishClick"
-          type="primary"
-        >发布</a-button>
-      </div>
-    </a-drawer>
 
     <AttachmentDrawer v-model="attachmentDrawerVisible" />
 
     <footer-tool-bar :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}">
       <a-button
         type="primary"
-        @click="()=>this.postSettingVisible = true"
+        @click="handleShowPostSettings"
       >发布</a-button>
       <a-button
         type="dashed"
@@ -204,32 +51,24 @@
 </template>
 
 <script>
-import CategoryTree from './components/CategoryTree'
-import TagSelect from './components/TagSelect'
-import { haloEditor } from 'halo-editor'
-import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
-import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
-import CategorySelectTree from './components/CategorySelectTree'
-import FooterToolBar from '@/components/FooterToolbar'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
+import PostSetting from './components/PostSetting'
+import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
+import FooterToolBar from '@/components/FooterToolbar'
 import { toolbars } from '@/core/const'
+import { haloEditor } from 'halo-editor'
 import 'halo-editor/dist/css/index.css'
-import categoryApi from '@/api/category'
+
 import postApi from '@/api/post'
-import optionApi from '@/api/option'
 import attachmentApi from '@/api/attachment'
-import moment from 'moment'
 export default {
-  components: {
-    TagSelect,
-    haloEditor,
-    CategoryTree,
-    FooterToolBar,
-    AttachmentDrawer,
-    AttachmentSelectDrawer,
-    CategorySelectTree
-  },
   mixins: [mixin, mixinDevice],
+  components: {
+    PostSetting,
+    haloEditor,
+    FooterToolBar,
+    AttachmentDrawer
+  },
   data() {
     return {
       toolbars,
@@ -240,21 +79,13 @@ export default {
       },
       attachmentDrawerVisible: false,
       postSettingVisible: false,
-      thumDrawerVisible: false,
-      categoryForm: false,
-      categories: [],
-      selectedCategoryIds: [],
-      selectedTagIds: [],
       postToStage: {},
-      categoryToCreate: {},
+      selectedTagIds: [],
-      timer: null,
+      selectedCategoryIds: [],
-      options: [],
+      timer: null
-      keys: ['blog_url']
     }
   },
   created() {
-    this.loadCategories()
-    this.loadOptions()
     clearInterval(this.timer)
     this.timer = null
     this.autoSaveTimer()
@@ -274,7 +105,6 @@ export default {
   beforeRouteEnter(to, from, next) {
     // Get post id from query
     const postId = to.query.postId
-
     next(vm => {
       if (postId) {
         postApi.get(postId).then(response => {
@@ -286,32 +116,8 @@ export default {
       }
     })
   },
-  computed: {
-    pickerDefaultValue() {
-      if (this.postToStage.createTime) {
-        var date = new Date(this.postToStage.createTime)
-        return moment(date, 'YYYY-MM-DD HH:mm:ss')
-      }
-      return moment(new Date(), 'YYYY-MM-DD HH:mm:ss')
-    }
-  },
   methods: {
-    loadCategories() {
-      categoryApi.listAll().then(response => {
-        this.categories = response.data.data
-      })
-    },
-    loadOptions() {
-      optionApi.listAll(this.keys).then(response => {
-        this.options = response.data.data
-      })
-    },
     createOrUpdatePost(createSuccess, updateSuccess, autoSave) {
-      // 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, autoSave).then(response => {
@@ -331,42 +137,11 @@ export default {
         })
       }
     },
-    savePost() {
-      this.createOrUpdatePost(
-        () => this.$message.success('文章创建成功'),
-        () => this.$message.success('文章更新成功'),
-        false
-      )
-    },
     autoSavePost() {
       if (this.postToStage.title != null && this.postToStage.originalContent != null) {
         this.createOrUpdatePost(null, null, true)
       }
     },
-    toggleCategoryForm() {
-      this.categoryForm = !this.categoryForm
-    },
-    handlePublishClick() {
-      this.postToStage.status = 'PUBLISHED'
-      this.savePost()
-    },
-    handleDraftClick() {
-      this.postToStage.status = 'DRAFT'
-      this.savePost()
-    },
-    handlerRemoveThumb() {
-      this.postToStage.thumbnail = null
-    },
-    handlerCreateCategory() {
-      categoryApi.create(this.categoryToCreate).then(response => {
-        this.loadCategories()
-        this.categoryToCreate = {}
-      })
-    },
-    handleSelectPostThumb(data) {
-      this.postToStage.thumbnail = encodeURI(data.path)
-      this.thumDrawerVisible = false
-    },
     autoSaveTimer() {
       if (this.timer == null) {
         this.timer = setInterval(() => {
@@ -374,10 +149,10 @@ export default {
         }, 15000)
       }
     },
-    pictureUploadHandle(pos, $file) {
+    handleAttachmentUpload(pos, $file) {
       var formdata = new FormData()
       formdata.append('file', $file)
-      attachmentApi.upload(formdata).then((response) => {
+      attachmentApi.upload(formdata).then(response => {
         var responseObject = response.data
 
         if (responseObject.status === 200) {
@@ -389,11 +164,15 @@ export default {
         }
       })
     },
-    onChange(value, dateString) {
+    handleShowPostSettings() {
-      this.postToStage.createTime = value.valueOf()
+      this.postSettingVisible = true
     },
-    onOk(value) {
+    // 关闭文章设置抽屉
-      this.postToStage.createTime = value.valueOf()
+    onPostSettingsClose() {
+      this.postSettingVisible = false
+    },
+    onRefreshPostFromSetting(post) {
+      this.postToStage = post
     }
   }
 }

src/views/post/PostList.vue

@@ -140,11 +140,12 @@
           <span
             slot="postTitle"
             slot-scope="text,record"
-            class="post-title"
+            style="max-width: 150px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
           >
             <a
               :href="options.blog_url+'/archives/'+record.url"
               target="_blank"
+              style="text-decoration: none;"
             >
               <a-tooltip
                 placement="topLeft"
@@ -239,7 +240,7 @@
 
             <a
               href="javascript:;"
-              @click="handlePostSettingsDrawer(post)"
+              @click="handleShowPostSettings(post)"
             >设置</a>
           </span>
         </a-table>
@@ -256,164 +257,30 @@
       </div>
     </a-card>
 
-    <a-drawer
+    <PostSetting
-      title="文章设置"
+      :post="selectedPost"
-      :width="isMobile()?'100%':'460'"
+      :selectedTagIds="selectedTagIds"
-      placement="right"
+      :selectedCategoryIds="selectedCategoryIds"
-      closable
+      :needTitle="true"
+      :saveDraftButton="false"
+      :savePublishButton="false"
+      :saveButton="true"
+      v-model="postSettingVisible"
       @close="onPostSettingsClose"
-      :visible="postSettingVisible"
+      @onRefreshPost="onRefreshPostFromSetting"
-    >
-      <div class="post-setting-drawer-content">
-        <div :style="{ marginBottom: '16px' }">
-          <h3 class="post-setting-drawer-title">基本设置</h3>
-          <div class="post-setting-drawer-item">
-            <a-form layout="vertical">
-              <a-form-item label="文章标题：">
-                <a-input v-model="selectedPost.title" />
-              </a-form-item>
-              <a-form-item
-                label="文章路径："
-                :help="options.blog_url+'/archives/' + (selectedPost.url ? selectedPost.url : '{auto_generate}')"
-              >
-                <a-input v-model="selectedPost.url" />
-              </a-form-item>
-              <a-form-item label="开启评论：">
-                <a-radio-group
-                  v-model="selectedPost.disallowComment"
-                  :defaultValue="false"
-                >
-                  <a-radio :value="false">开启</a-radio>
-                  <a-radio :value="true">关闭</a-radio>
-                </a-radio-group>
-              </a-form-item>
-            </a-form>
-          </div>
-        </div>
-        <a-divider />
-
-        <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="categoryForm">
-                  <category-select-tree
-                    :categories="categories"
-                    v-model="categoryToCreate.parentId"
-                  />
-                </a-form-item>
-                <a-form-item v-if="categoryForm">
-                  <a-input
-                    placeholder="分类名称"
-                    v-model="categoryToCreate.name"
-                  />
-                </a-form-item>
-                <a-form-item v-if="categoryForm">
-                  <a-input
-                    placeholder="分类路径"
-                    v-model="categoryToCreate.slugNames"
-                  />
-                </a-form-item>
-                <a-form-item>
-                  <a-button
-                    type="primary"
-                    style="marginRight: 8px"
-                    v-if="categoryForm"
-                    @click="handlerCreateCategory"
-                  >保存</a-button>
-                  <a-button
-                    type="dashed"
-                    style="marginRight: 8px"
-                    v-if="!categoryForm"
-                    @click="toggleCategoryForm"
-                  >新增</a-button>
-                  <a-button
-                    v-if="categoryForm"
-                    @click="toggleCategoryForm"
-                  >取消</a-button>
-                </a-form-item>
-              </a-form>
-            </div>
-          </div>
-        </div>
-        <a-divider />
-
-        <div :style="{ marginBottom: '16px' }">
-          <h3 class="post-setting-drawer-title">标签</h3>
-          <div class="post-setting-drawer-item">
-            <a-form layout="vertical">
-              <a-form-item>
-                <TagSelect v-model="selectedTagIds" />
-              </a-form-item>
-            </a-form>
-          </div>
-        </div>
-        <a-divider />
-
-        <div :style="{ marginBottom: '16px' }">
-          <h3 class="post-setting-drawer-title">摘要</h3>
-          <div class="post-setting-drawer-item">
-            <a-form layout="vertical">
-              <a-form-item>
-                <a-input
-                  type="textarea"
-                  :autosize="{ minRows: 5 }"
-                  v-model="selectedPost.summary"
-                  placeholder="不填写则会自动生成"
-                />
-              </a-form-item>
-            </a-form>
-          </div>
-        </div>
-        <a-divider />
-
-        <div :style="{ marginBottom: '16px' }">
-          <h3 class="post-setting-drawer-title">缩略图</h3>
-          <div class="post-setting-drawer-item">
-            <div class="post-thum">
-              <img
-                class="img"
-                :src="selectedPost.thumbnail || '//i.loli.net/2019/05/05/5ccf007c0a01d.png'"
-                @click="()=>this.thumDrawerVisible=true"
-              >
-              <a-button
-                class="post-thum-remove"
-                type="dashed"
-                @click="handlerRemoveThumb"
-              >移除</a-button>
-            </div>
-          </div>
-        </div>
-        <a-divider class="divider-transparent" />
-      </div>
-      <AttachmentSelectDrawer
-        v-model="thumDrawerVisible"
-        @listenToSelect="handleSelectPostThumb"
-        :drawerWidth="460"
-      />
-      <div class="bottom-control">
-        <a-button
-          @click="handleSavePostSettingsClick"
-          type="primary"
-        >保存</a-button>
-      </div>
-    </a-drawer>
   </div>
 </template>
 
 <script>
-import categoryApi from '@/api/category'
-import postApi from '@/api/post'
-import optionApi from '@/api/option'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
+import PostSetting from './components/PostSetting'
 import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
 import TagSelect from './components/TagSelect'
 import CategoryTree from './components/CategoryTree'
+import categoryApi from '@/api/category'
+import postApi from '@/api/post'
+import optionApi from '@/api/option'
 const columns = [
   {
     title: '标题',
@@ -464,7 +331,8 @@ export default {
   components: {
     AttachmentSelectDrawer,
     TagSelect,
-    CategoryTree
+    CategoryTree,
+    PostSetting
   },
   mixins: [mixin, mixinDevice],
   data() {
@@ -491,12 +359,9 @@ export default {
       posts: [],
       postsLoading: false,
       postSettingVisible: false,
-      thumDrawerVisible: false,
       selectedPost: {},
-      selectedCategoryIds: [],
       selectedTagIds: [],
-      categoryForm: false,
+      selectedCategoryIds: [],
-      categoryToCreate: {},
       options: [],
       keys: ['blog_url']
     }
@@ -510,9 +375,9 @@ export default {
     }
   },
   created() {
-    this.loadCategories()
     this.loadPosts()
     this.loadOptions()
+    this.loadCategories()
   },
   methods: {
     loadPosts() {
@@ -622,61 +487,24 @@ export default {
         })
       }
     },
-    // 打开文章设置抽屉
+    handleShowPostSettings(post) {
-    handlePostSettingsDrawer(post) {
       this.postSettingVisible = true
       postApi.get(post.id).then(response => {
-        const post = response.data.data
+        this.selectedPost = response.data.data
-        this.selectedPost = post
+        this.selectedTagIds = this.selectedPost.tagIds
-        this.selectedTagIds = post.tagIds
+        this.selectedCategoryIds = this.selectedPost.categoryIds
-        this.selectedCategoryIds = post.categoryIds
-      })
-    },
-    handleSelectPostThumb(data) {
-      this.selectedPost.thumbnail = encodeURI(data.path)
-      this.thumDrawerVisible = false
-    },
-    handlerRemoveThumb() {
-      this.selectedPost.thumbnail = null
-    },
-    // 保存文章设置
-    handleSavePostSettingsClick() {
-      this.selectedPost.categoryIds = this.selectedCategoryIds
-      this.selectedPost.tagIds = this.selectedTagIds
-      postApi.update(this.selectedPost.id, this.selectedPost, false).then(response => {
-        this.$log.debug('Updated post', response.data.data)
-        this.loadPosts()
-        this.$message.success('文章更新成功')
-      })
-    },
-    toggleCategoryForm() {
-      this.categoryForm = !this.categoryForm
-    },
-    handlerCreateCategory() {
-      categoryApi.create(this.categoryToCreate).then(response => {
-        this.loadCategories()
-        this.categoryToCreate = {}
       })
     },
     // 关闭文章设置抽屉
     onPostSettingsClose() {
       this.postSettingVisible = false
       this.selectedPost = {}
-      this.selectedTagIds = []
+    },
-      this.selectedCategoryIds = []
+    onRefreshPostFromSetting(post) {
+      this.selectedPost = post
     }
   }
 }
 </script>
 <style scoped>
-a {
-  text-decoration: none;
-}
-.post-title {
-  max-width: 150px;
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
 </style>

src/views/post/components/PostSetting.vue

@@ -0,0 +1,342 @@
+<template>
+  <a-drawer
+    title="文章设置"
+    :width="isMobile()?'100%':'460'"
+    placement="right"
+    closable
+    @close="onClose"
+    destroyOnClose
+    :visible="visiable"
+  >
+    <div class="post-setting-drawer-content">
+      <div :style="{ marginBottom: '16px' }">
+        <h3 class="post-setting-drawer-title">基本设置</h3>
+        <div class="post-setting-drawer-item">
+          <a-form layout="vertical">
+            <a-form-item
+              label="文章标题："
+              v-if="needTitle"
+            >
+              <a-input v-model="post.title" />
+            </a-form-item>
+            <a-form-item
+              label="文章路径："
+              :help="options.blog_url+'/archives/' + (post.url ? post.url : '{auto_generate}')"
+            >
+              <a-input v-model="post.url" />
+            </a-form-item>
+
+            <a-form-item label="发表时间：">
+              <a-date-picker
+                showTime
+                :defaultValue="pickerDefaultValue"
+                format="YYYY-MM-DD HH:mm:ss"
+                placeholder="选择文章发表时间"
+                @change="onPostDateChange"
+                @ok="onPostDateOk"
+              />
+            </a-form-item>
+            <a-form-item label="开启评论：">
+              <a-radio-group
+                v-model="post.disallowComment"
+                :defaultValue="false"
+              >
+                <a-radio :value="false">开启</a-radio>
+                <a-radio :value="true">关闭</a-radio>
+              </a-radio-group>
+            </a-form-item>
+          </a-form>
+        </div>
+      </div>
+      <a-divider />
+
+      <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>
+        </div>
+      </div>
+      <a-divider />
+
+      <div :style="{ marginBottom: '16px' }">
+        <h3 class="post-setting-drawer-title">标签</h3>
+        <div class="post-setting-drawer-item">
+          <a-form layout="vertical">
+            <a-form-item>
+              <TagSelect v-model="selectedTagIds" />
+            </a-form-item>
+          </a-form>
+        </div>
+      </div>
+      <a-divider />
+
+      <div :style="{ marginBottom: '16px' }">
+        <h3 class="post-setting-drawer-title">摘要</h3>
+        <div class="post-setting-drawer-item">
+          <a-form layout="vertical">
+            <a-form-item>
+              <a-input
+                type="textarea"
+                :autosize="{ minRows: 5 }"
+                v-model="post.summary"
+                placeholder="不填写则会自动生成"
+              />
+            </a-form-item>
+          </a-form>
+        </div>
+      </div>
+      <a-divider />
+
+      <div :style="{ marginBottom: '16px' }">
+        <h3 class="post-setting-drawer-title">缩略图</h3>
+        <div class="post-setting-drawer-item">
+          <div class="post-thum">
+            <img
+              class="img"
+              :src="post.thumbnail || '//i.loli.net/2019/05/05/5ccf007c0a01d.png'"
+              @click="()=>this.thumDrawerVisible=true"
+            >
+            <a-button
+              class="post-thum-remove"
+              type="dashed"
+              @click="handlerRemoveThumb"
+            >移除</a-button>
+          </div>
+        </div>
+      </div>
+      <a-divider class="divider-transparent" />
+    </div>
+    <AttachmentSelectDrawer
+      v-model="thumDrawerVisible"
+      @listenToSelect="handleSelectPostThumb"
+      :drawerWidth="460"
+    />
+    <div class="bottom-control">
+      <a-button
+        style="marginRight: 8px"
+        @click="handleDraftClick"
+        v-if="saveDraftButton"
+      >保存草稿</a-button>
+      <a-button
+        @click="handlePublishClick"
+        type="primary"
+        v-if="savePublishButton"
+      >发布</a-button>
+      <a-button
+        @click="handlePublishClick"
+        type="primary"
+        v-if="saveButton"
+      >保存</a-button>
+    </div>
+  </a-drawer>
+</template>
+<script>
+import { mixin, mixinDevice } from '@/utils/mixin.js'
+import moment from 'moment'
+import CategoryTree from './CategoryTree'
+import CategorySelectTree from './CategorySelectTree'
+import TagSelect from './TagSelect'
+import AttachmentSelectDrawer from '../../attachment/components/AttachmentSelectDrawer'
+import optionApi from '@/api/option'
+import categoryApi from '@/api/category'
+import postApi from '@/api/post'
+export default {
+  name: 'PostSetting',
+  mixins: [mixin, mixinDevice],
+  components: {
+    CategoryTree,
+    CategorySelectTree,
+    TagSelect,
+    AttachmentSelectDrawer
+  },
+  data() {
+    return {
+      thumDrawerVisible: false,
+      categoryFormVisible: false,
+      options: [],
+      keys: ['blog_url'],
+      categories: [],
+      categoryToCreate: {}
+    }
+  },
+  model: {
+    prop: 'visiable',
+    event: 'close'
+  },
+  props: {
+    post: {
+      type: Object,
+      required: true
+    },
+    selectedTagIds: {
+      type: Array,
+      required: true
+    },
+    selectedCategoryIds: {
+      type: Array,
+      required: true
+    },
+    visiable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    needTitle: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    saveDraftButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    savePublishButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    saveButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  created() {
+    this.loadOptions()
+    this.loadCategories()
+  },
+  computed: {
+    pickerDefaultValue() {
+      if (this.post.createTime) {
+        var date = new Date(this.post.createTime)
+        return moment(date, 'YYYY-MM-DD HH:mm:ss')
+      }
+      return moment(new Date(), 'YYYY-MM-DD HH:mm:ss')
+    }
+  },
+  methods: {
+    loadOptions() {
+      optionApi.listAll(this.keys).then(response => {
+        this.options = response.data.data
+      })
+    },
+    loadCategories() {
+      categoryApi.listAll().then(response => {
+        this.categories = response.data.data
+      })
+    },
+    handleSelectPostThumb(data) {
+      this.post.thumbnail = encodeURI(data.path)
+      this.thumDrawerVisible = false
+    },
+    handlerRemoveThumb() {
+      this.post.thumbnail = null
+    },
+    handlerCreateCategory() {
+      categoryApi.create(this.categoryToCreate).then(response => {
+        this.loadCategories()
+        this.categoryToCreate = {}
+      })
+    },
+    toggleCategoryForm() {
+      this.categoryFormVisible = !this.categoryFormVisible
+    },
+    handleDraftClick() {
+      this.post.status = 'DRAFT'
+      this.savePost()
+    },
+    handlePublishClick() {
+      this.post.status = 'PUBLISHED'
+      this.savePost()
+    },
+    savePost() {
+      this.createOrUpdatePost(
+        () => this.$message.success('文章创建成功'),
+        () => this.$message.success('文章更新成功'),
+        false
+      )
+    },
+    createOrUpdatePost(createSuccess, updateSuccess, autoSave) {
+      // Set category ids
+      this.post.categoryIds = this.selectedCategoryIds
+      // Set tag ids
+      this.post.tagIds = this.selectedTagIds
+
+      if (this.post.id) {
+        // Update the post
+        postApi.update(this.post.id, this.post, autoSave).then(response => {
+          this.$log.debug('Updated post', response.data.data)
+          if (updateSuccess) {
+            updateSuccess()
+          }
+        })
+      } else {
+        // Create the post
+        postApi.create(this.post, autoSave).then(response => {
+          this.$log.debug('Created post', response.data.data)
+          if (createSuccess) {
+            createSuccess()
+          }
+          this.post = response.data.data
+        })
+      }
+      this.$emit('onRefreshPost', this.post)
+    },
+    onClose() {
+      this.$emit('close', false)
+    },
+    onPostDateChange(value, dateString) {
+      this.post.createTime = value.valueOf()
+    },
+    onPostDateOk(value) {
+      this.post.createTime = value.valueOf()
+    }
+  }
+}
+</script>
+<style lang="less">
+</style>

src/views/sheet/internal/JournalList.vue

@@ -11,14 +11,14 @@
                     <a-input v-model="queryParam.keyword"/>
                   </a-form-item>
                 </a-col>
-                <a-col :md="6" :sm="24">
+                <!-- <a-col :md="6" :sm="24">
                   <a-form-item label="状态">
                     <a-select placeholder="请选择状态">
                       <a-select-option value="1">公开</a-select-option>
                       <a-select-option value="0">私密</a-select-option>
                     </a-select>
                   </a-form-item>
-                </a-col>
+                </a-col> -->
                 <a-col :md="6" :sm="24">
                   <span class="table-page-search-submitButtons">
                     <a-button type="primary" @click="loadJournals(true)">查询</a-button>