From 6598c91e61d17bda404c39a7e5a2a30257c64fdc Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Tue, 27 Aug 2019 12:30:53 +0800
Subject: [PATCH] Support journal type.

---
 src/api/journal.js                       |   9 ++
 src/views/post/PostList.vue              |   5 +-
 src/views/sheet/internal/JournalList.vue | 157 ++++++++++++++++++-----
 3 files changed, 136 insertions(+), 35 deletions(-)

diff --git a/src/api/journal.js b/src/api/journal.js
index 2f94d715c..09786d1ee 100644
--- a/src/api/journal.js
+++ b/src/api/journal.js
@@ -42,4 +42,13 @@ journalApi.commentTree = journalId => {
   })
 }
 
+journalApi.journalType = {
+  PUBLIC: {
+    text: '公开'
+  },
+  PRIVATE: {
+    text: '私密'
+  }
+}
+
 export default journalApi
diff --git a/src/views/post/PostList.vue b/src/views/post/PostList.vue
index f9f2894ef..c565b2d7f 100644
--- a/src/views/post/PostList.vue
+++ b/src/views/post/PostList.vue
@@ -169,6 +169,7 @@
               v-for="(category,index) in categoriesOfPost"
               :key="index"
               color="blue"
+              style="margin-bottom: 8px"
             >{{ category.name }}</a-tag>
           </span>
 
@@ -180,6 +181,7 @@
               v-for="(tag, index) in tags"
               :key="index"
               color="green"
+              style="margin-bottom: 8px"
             >{{ tag.name }}</a-tag>
           </span>
 
@@ -313,7 +315,8 @@ const columns = [
     dataIndex: 'commentCount'
   },
   {
-    title: '访问量',
+    title: '访问',
+    width: '70px',
     dataIndex: 'visits'
   },
   {
diff --git a/src/views/sheet/internal/JournalList.vue b/src/views/sheet/internal/JournalList.vue
index 7c6b8ccf3..4cc36f0da 100644
--- a/src/views/sheet/internal/JournalList.vue
+++ b/src/views/sheet/internal/JournalList.vue
@@ -6,32 +6,57 @@
           <div class="table-page-search-wrapper">
             <a-form layout="inline">
               <a-row :gutter="48">
-                <a-col :md="6" :sm="24">
+                <a-col
+                  :md="6"
+                  :sm="24"
+                >
                   <a-form-item label="关键词">
-                    <a-input v-model="queryParam.keyword"/>
+                    <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
+                      placeholder="请选择状态"
+                      v-model="queryParam.type"
+                    >
+                      <a-select-option
+                        v-for="type in Object.keys(journalType)"
+                        :key="type"
+                        :value="type"
+                      >{{ journalType[type].text }}</a-select-option>
                     </a-select>
                   </a-form-item>
-                </a-col> -->
-                <a-col :md="6" :sm="24">
+                </a-col>
+                <a-col
+                  :md="6"
+                  :sm="24"
+                >
                   <span class="table-page-search-submitButtons">
-                    <a-button type="primary" @click="loadJournals(true)">查询</a-button>
-                    <a-button style="margin-left: 8px;" @click="resetParam">重置</a-button>
+                    <a-button
+                      type="primary"
+                      @click="loadJournals(true)"
+                    >查询</a-button>
+                    <a-button
+                      style="margin-left: 8px;"
+                      @click="resetParam"
+                    >重置</a-button>
                   </span>
                 </a-col>
               </a-row>
             </a-form>
           </div>
           <div class="table-operator">
-            <a-button type="primary" icon="plus" @click="handleNew">写日志</a-button>
+            <a-button
+              type="primary"
+              icon="plus"
+              @click="handleNew"
+            >写日志</a-button>
           </div>
-          <a-divider/>
+          <a-divider />
           <div style="margin-top:15px">
             <a-list
               itemLayout="vertical"
@@ -39,7 +64,11 @@
               :dataSource="journals"
               :loading="listLoading"
             >
-              <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
+              <a-list-item
+                slot="renderItem"
+                slot-scope="item, index"
+                :key="index"
+              >
                 <!-- 日志图片集合 -->
                 <!-- <a-card
                   hoverable
@@ -51,7 +80,11 @@
                   <img alt="example" :src="photo.thumbnail" slot="cover">
                 </a-card> -->
 
-                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancelPreview">
+                <a-modal
+                  :visible="previewVisible"
+                  :footer="null"
+                  @cancel="handleCancelPreview"
+                >
                   <img
                     :alt="previewPhoto.name + previewPhoto.description"
                     style="width: 100%"
@@ -62,13 +95,22 @@
                 <template slot="actions">
                   <span>
                     <a href="javascript:void(0);">
-                      <a-icon type="like-o" style="margin-right: 8px"/>
+                      <a-icon
+                        type="like-o"
+                        style="margin-right: 8px"
+                      />
                       {{ item.likes }}
                     </a>
                   </span>
                   <span>
-                    <a href="javascript:void(0);" @click="handleCommentShow(item)">
-                      <a-icon type="message" style="margin-right: 8px"/>
+                    <a
+                      href="javascript:void(0);"
+                      @click="handleCommentShow(item)"
+                    >
+                      <a-icon
+                        type="message"
+                        style="margin-right: 8px"
+                      />
                       {{ item.commentCount }}
                     </a>
                   </span>
@@ -77,8 +119,11 @@
                   </span>-->
                 </template>
                 <template slot="extra">
-                  <a href="javascript:void(0);" @click="handleEdit(item)">编辑</a>
-                  <a-divider type="vertical"/>
+                  <a
+                    href="javascript:void(0);"
+                    @click="handleEdit(item)"
+                  >编辑</a>
+                  <a-divider type="vertical" />
                   <a-popconfirm
                     title="你确定要删除这条日志？"
                     @confirm="handleDelete(item.id)"
@@ -91,7 +136,11 @@
 
                 <a-list-item-meta :description="item.content">
                   <span slot="title">{{ item.createTime | moment }}</span>
-                  <a-avatar slot="avatar" size="large" :src="user.avatar"/>
+                  <a-avatar
+                    slot="avatar"
+                    size="large"
+                    :src="user.avatar"
+                  />
                 </a-list-item-meta>
               </a-list-item>
               <div class="page-wrapper">
@@ -115,16 +164,35 @@
     <a-modal v-model="visible">
       <template slot="title">
         {{ title }}
-        <a-tooltip slot="action" title="只能输入250字">
-          <a-icon type="info-circle-o"/>
+        <a-tooltip
+          slot="action"
+          title="只能输入250字"
+        >
+          <a-icon type="info-circle-o" />
         </a-tooltip>
       </template>
       <template slot="footer">
-        <a-button key="submit" type="primary" @click="createOrUpdateJournal">发布</a-button>
+        <a-button
+          key="submit"
+          type="primary"
+          @click="createOrUpdateJournal"
+        >发布</a-button>
       </template>
       <a-form layout="vertical">
         <a-form-item>
-          <a-input type="textarea" :autosize="{ minRows: 8 }" v-model="journal.content"/>
+          <a-input
+            type="textarea"
+            :autosize="{ minRows: 8 }"
+            v-model="journal.content"
+          />
+        </a-form-item>
+        <a-form-item>
+          <a-switch
+            checkedChildren="公开"
+            unCheckedChildren="私密"
+            v-model="isPublic"
+            defaultChecked
+          />
         </a-form-item>
         <!-- <a-form-item v-show="showMoreOptions">
           <UploadPhoto
@@ -154,11 +222,19 @@
       v-model="selectCommentVisible"
     >
       <template slot="footer">
-        <a-button key="submit" type="primary" @click="handleReplyComment">回复</a-button>
+        <a-button
+          key="submit"
+          type="primary"
+          @click="handleReplyComment"
+        >回复</a-button>
       </template>
       <a-form layout="vertical">
         <a-form-item>
-          <a-input type="textarea" :autosize="{ minRows: 8 }" v-model="replyComment.content"/>
+          <a-input
+            type="textarea"
+            :autosize="{ minRows: 8 }"
+            v-model="replyComment.content"
+          />
         </a-form-item>
       </a-form>
     </a-modal>
@@ -172,16 +248,23 @@
       destroyOnClose
       @close="()=>this.commentVisiable = false"
     >
-      <a-row type="flex" align="middle">
+      <a-row
+        type="flex"
+        align="middle"
+      >
         <a-col :span="24">
           <a-comment>
-            <a-avatar :src="user.avatar" :alt="user.nickname" slot="avatar"/>
+            <a-avatar
+              :src="user.avatar"
+              :alt="user.nickname"
+              slot="avatar"
+            />
             <p slot="content">{{ journal.content }}</p>
 
             <span slot="datetime">{{ journal.createTime | moment }}</span>
           </a-comment>
         </a-col>
-        <a-divider/>
+        <a-divider />
         <a-col :span="24">
           <journal-comment-tree
             v-for="(comment,index) in comments"
@@ -208,6 +291,7 @@ export default {
   components: { JournalCommentTree, UploadPhoto },
   data() {
     return {
+      journalType: journalApi.journalType,
       plusPhotoVisible: true,
       photoList: [], // 编辑图片时回显所需对象
       previewVisible: false,
@@ -232,7 +316,8 @@ export default {
         page: 0,
         size: 10,
         sort: null,
-        keyword: null
+        keyword: null,
+        type: null
       },
       journals: [],
       comments: [],
@@ -241,6 +326,7 @@ export default {
         content: '',
         photos: []
       },
+      isPublic: true,
       journalPhotos: [], // 日志图片集合最多九张
       selectComment: null,
       replyComment: {},
@@ -349,18 +435,21 @@ export default {
     },
     createOrUpdateJournal() {
       // 给属性填充数据
-      this.journal.photos = this.journalPhotos
+      // this.journal.photos = this.journalPhotos
+      this.journal.type = this.isPublic ? 'PUBLIC' : 'PRIVATE'
 
       if (this.journal.id) {
         journalApi.update(this.journal.id, this.journal).then(response => {
           this.$message.success('更新成功！')
           this.loadJournals()
+          this.isPublic = true
         })
       } else {
         journalApi.create(this.journal).then(response => {
           this.$message.success('发表成功！')
           this.loadJournals()
           this.photoList = []
+          this.isPublic = true
         })
       }
       this.visible = false
@@ -373,21 +462,21 @@ export default {
     },
     resetParam() {
       this.queryParam.keyword = null
+      this.queryParam.type = null
       this.loadJournals()
     }
   }
 }
 </script>
 <style scoped="scoped">
-.more-options-btn {
+/* .more-options-btn {
   margin-left: 15px;
   text-decoration: none;
 }
 
-/* 日志图片卡片样式 */
 .photo-card {
   width: 104px;
   display: inline-block;
   margin-right: 5px;
-}
+} */
 </style>