Support post settings in post list table.

2019-07-02 22:26:36 +08:00 · 2019-07-02 22:26:36 +08:00 · ccebac7a14
parent 682b2bb611
commit ccebac7a14
4 changed files with 237 additions and 24 deletions
--- a/src/components/global.less
+++ b/src/components/global.less
@ -698,3 +698,14 @@ body {
    margin-bottom: 0;
  }
 }
+
+.post-thum {
+  .img {
+    width: 100%;
+    cursor: pointer;
+    border-radius: 4px;
+  }
+  .post-thum-remove {
+    margin-top: 16px;
+  }
+}
--- a/src/views/interface/ThemeList.vue
+++ b/src/views/interface/ThemeList.vue
@ -427,9 +427,7 @@ export default {
        this.themeConfiguration = response.data.data
        themeApi.fetchSettings(theme.id).then(response => {
          this.themeSettings = response.data.data
-
          setTimeout(() => {
-            this.visible = true
            this.optionLoading = false
          }, 300)
        })
--- a/src/views/post/PostEdit.vue
+++ b/src/views/post/PostEdit.vue
@ -199,7 +199,6 @@ import FooterToolBar from '@/components/FooterToolbar'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import { toolbars } from '@/core/const'
 import 'mavon-editor/dist/css/index.css'
-import tagApi from '@/api/tag'
 import categoryApi from '@/api/category'
 import postApi from '@/api/post'
 import optionApi from '@/api/option'
@ -226,7 +225,6 @@ export default {
      postSettingVisible: false,
      thumDrawerVisible: false,
      categoryForm: false,
-      tags: [],
      categories: [],
      selectedCategoryIds: [],
      selectedTagIds: [],
@ -238,7 +236,6 @@ export default {
    }
  },
  created() {
-    this.loadTags()
    this.loadCategories()
    this.loadOptions()
    clearInterval(this.timer)
@ -273,11 +270,6 @@ export default {
    })
  },
  methods: {
-    loadTags() {
-      tagApi.listAll(true).then(response => {
-        this.tags = response.data.data
-      })
-    },
    loadCategories() {
      categoryApi.listAll().then(response => {
        this.categories = response.data.data
@ -365,15 +357,4 @@ export default {
  z-index: 1000;
  min-height: 580px;
 }
-
-.post-thum {
-  .img {
-    width: 100%;
-    cursor: pointer;
-    border-radius: 4px;
-  }
-  .post-thum-remove {
-    margin-top: 16px;
-  }
-}
 </style>
--- a/src/views/post/PostList.vue
+++ b/src/views/post/PostList.vue
@ -209,6 +209,13 @@
            >
              <a href="javascript:;">删除</a>
            </a-popconfirm>
+
+            <a-divider type="vertical" />
+
+            <a
+              href="javascript:;"
+              @click="handlePostSettingsDrawer(post)"
+            >设置</a>
          </span>
        </a-table>
        <div class="page-wrapper">
@ -223,12 +230,165 @@
        </div>
      </div>
    </a-card>
+
+    <a-drawer
+      title="文章设置"
+      :width="isMobile()?'100%':'460'"
+      placement="right"
+      closable
+      @close="onPostSettingsClose"
+      :visible="postSettingVisible"
+    >
+      <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 AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
+import TagSelect from './components/TagSelect'
+import CategoryTree from './components/CategoryTree'
 const columns = [
  {
    title: '标题',
@ -266,13 +426,18 @@ const columns = [
  },
  {
    title: '操作',
-    width: '150px',
+    width: '180px',
    scopedSlots: { customRender: 'action' }
  }
 ]
 export default {
  name: 'PostList',
-  components: {},
+  components: {
+    AttachmentSelectDrawer,
+    TagSelect,
+    CategoryTree
+  },
+  mixins: [mixin, mixinDevice],
  data() {
    return {
      postStatus: postApi.postStatus,
@ -295,7 +460,16 @@ export default {
      selectedRows: [],
      categories: [],
      posts: [],
-      postsLoading: false
+      postsLoading: false,
+      postSettingVisible: false,
+      thumDrawerVisible: false,
+      selectedPost: {},
+      selectedCategoryIds: [],
+      selectedTagIds: [],
+      categoryForm: false,
+      categoryToCreate: {},
+      options: [],
+      keys: ['blog_url']
    }
  },
  computed: {
@ -309,6 +483,7 @@ export default {
  created() {
    this.loadCategories()
    this.loadPosts()
+    this.loadOptions()
  },
  methods: {
    loadPosts() {
@ -328,6 +503,11 @@ export default {
        this.categories = response.data.data
      })
    },
+    loadOptions() {
+      optionApi.listAll(this.keys).then(response => {
+        this.options = response.data.data
+      })
+    },
    handleEditClick(post) {
      this.$router.push({ name: 'PostEdit', query: { postId: post.id } })
    },
@ -412,6 +592,49 @@ export default {
          this.loadPosts()
        })
      }
+    },
+    // 打开文章设置抽屉
+    handlePostSettingsDrawer(post) {
+      this.postSettingVisible = true
+      postApi.get(post.id).then(response => {
+        const post = response.data.data
+        this.selectedPost = post
+        this.selectedTagIds = post.tagIds
+        this.selectedCategoryIds = post.categoryIds
+      })
+    },
+    handleSelectPostThumb(data) {
+      this.selectedPost.thumbnail = 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 = []
    }
  }
 }