From 8e66102aa1a633d2486071710d82978c05e230f5 Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Wed, 24 Apr 2019 22:57:18 +0800
Subject: [PATCH] Sheet Edit.

---
 src/api/sheet.js              | 54 +++++++++++++++++++++
 src/views/post/PostEdit.vue   | 18 +++----
 src/views/post/PostList.vue   |  5 --
 src/views/sheet/SheetEdit.vue | 91 ++++++++++++++++++++---------------
 src/views/sheet/SheetList.vue | 87 +++++++++++++++++++++++++++++++--
 5 files changed, 194 insertions(+), 61 deletions(-)
 create mode 100644 src/api/sheet.js

diff --git a/src/api/sheet.js b/src/api/sheet.js
new file mode 100644
index 00000000..52bd7d00
--- /dev/null
+++ b/src/api/sheet.js
@@ -0,0 +1,54 @@
+import service from '@/utils/service'
+
+const baseUrl = '/api/admin/sheets'
+
+const sheetApi = {}
+
+sheetApi.list = () => {
+  return service({
+    url: baseUrl,
+    method: 'get'
+  })
+}
+
+sheetApi.get = sheetId => {
+  return service({
+    url: `${baseUrl}/${sheetId}`,
+    method: 'get'
+  })
+}
+
+sheetApi.create = sheetToCreate => {
+  return service({
+    url: baseUrl,
+    method: 'post',
+    data: sheetToCreate
+  })
+}
+
+sheetApi.update = (sheetId, sheetToUpdate) => {
+  return service({
+    url: `${baseUrl}/${sheetId}`,
+    method: 'put',
+    data: sheetToUpdate
+  })
+}
+
+sheetApi.sheetStatus = {
+  PUBLISHED: {
+    color: 'green',
+    status: 'success',
+    text: '已发布'
+  },
+  DRAFT: {
+    color: 'yellow',
+    status: 'warning',
+    text: '草稿'
+  },
+  RECYCLE: {
+    color: 'red',
+    status: 'error',
+    text: '回收站'
+  }
+}
+export default sheetApi
diff --git a/src/views/post/PostEdit.vue b/src/views/post/PostEdit.vue
index 01bafa1f..8050c709 100644
--- a/src/views/post/PostEdit.vue
+++ b/src/views/post/PostEdit.vue
@@ -58,7 +58,7 @@
                       v-model="postToStage.password"
                     />
                   </a-form-item>
-                  <a-form-item label="是否关闭评论：">
+                  <a-form-item label="开启评论：">
                     <a-radio-group
                       v-model="postToStage.disallowComment"
                       :defaultValue="false"
@@ -122,7 +122,7 @@
             <a-divider />
           </div>
           <AttachmentSelectDrawer
-            v-model="childDrawerVisible"
+            v-model="thumDrawerVisible"
             @listenToSelect="selectPostThumb"
             :drawerWidth="460"
           />
@@ -161,14 +161,14 @@
 import CategoryTree from './components/CategoryTree'
 import TagSelect from './components/TagSelect'
 import { mavonEditor } from 'mavon-editor'
+import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
+import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
 import FooterToolBar from '@/components/FooterToolbar'
 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'
-import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
-import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
 const toolbars = {
   bold: true, // 粗体
   italic: true, // 斜体
@@ -193,7 +193,6 @@ const toolbars = {
   preview: true // 预览
 }
 export default {
-  name: 'Editor',
   components: {
     TagSelect,
     mavonEditor,
@@ -212,7 +211,7 @@ export default {
       },
       attachmentDrawerVisible: false,
       visible: false,
-      childDrawerVisible: false,
+      thumDrawerVisible: false,
       tags: [],
       categories: [],
       selectedCategoryIds: [],
@@ -287,7 +286,7 @@ export default {
       this.attachmentDrawerVisible = true
     },
     showThumbDrawer() {
-      this.childDrawerVisible = true
+      this.thumDrawerVisible = true
     },
     handlePublishClick() {
       this.postToStage.status = 'PUBLISHED'
@@ -300,12 +299,9 @@ export default {
     onClose() {
       this.visible = false
     },
-    onChildClose() {
-      this.childDrawerVisible = false
-    },
     selectPostThumb(data) {
       this.postToStage.thumbnail = data.path
-      this.childDrawerVisible = false
+      this.thumDrawerVisible = false
     }
   }
 }
diff --git a/src/views/post/PostList.vue b/src/views/post/PostList.vue
index 11f936ea..b32b0d47 100644
--- a/src/views/post/PostList.vue
+++ b/src/views/post/PostList.vue
@@ -129,11 +129,6 @@
             >{{ tag.name }}</a-tag>
           </span>
 
-          <span
-            slot="createTime"
-            slot-scope="createTime"
-          >{{ createTime | timeAgo }}</span>
-
           <span
             slot="updateTime"
             slot-scope="updateTime"
diff --git a/src/views/sheet/SheetEdit.vue b/src/views/sheet/SheetEdit.vue
index b15aa580..190a606d 100644
--- a/src/views/sheet/SheetEdit.vue
+++ b/src/views/sheet/SheetEdit.vue
@@ -10,7 +10,7 @@
       >
         <div style="margin-bottom: 16px">
           <a-input
-            v-model="postToStage.title"
+            v-model="sheetToStage.title"
             v-decorator="['title', { rules: [{ required: true, message: '请输入页面标题' }] }]"
             size="large"
             placeholder="请输入页面标题"
@@ -18,7 +18,7 @@
         </div>
         <div id="editor">
           <mavon-editor
-            v-model="postToStage.originalContent"
+            v-model="sheetToStage.originalContent"
             :boxShadow="false"
             :toolbars="toolbars"
             :ishljs="true"
@@ -47,19 +47,19 @@
                 <a-form layout="vertical">
                   <a-form-item
                     label="页面路径："
-                    :help="'https://localhost:8090/p/'+ (postToStage.url ? postToStage.url : '{auto_generate}')"
+                    :help="'https://localhost:8090/s/'+ (sheetToStage.url ? sheetToStage.url : '{auto_generate}')"
                   >
-                    <a-input v-model="postToStage.url" />
+                    <a-input v-model="sheetToStage.url" />
                   </a-form-item>
                   <a-form-item label="页面密码：">
                     <a-input
                       type="password"
-                      v-model="postToStage.password"
+                      v-model="sheetToStage.password"
                     />
                   </a-form-item>
-                  <a-form-item label="是否关闭评论：">
+                  <a-form-item label="开启评论：">
                     <a-radio-group
-                      v-model="postToStage.disallowComment"
+                      v-model="sheetToStage.disallowComment"
                       :defaultValue="false"
                     >
                       <a-radio :value="false">开启</a-radio>
@@ -67,7 +67,7 @@
                     </a-radio-group>
                   </a-form-item>
                   <a-form-item label="自定义模板：">
-                    <a-select v-model="postToStage.template">
+                    <a-select v-model="sheetToStage.template">
                       <a-select-option
                         v-for="tpl in customTpls"
                         :key="tpl"
@@ -83,17 +83,23 @@
             <div :style="{ marginBottom: '16px' }">
               <h3 class="post-setting-drawer-title">缩略图</h3>
               <div class="post-setting-drawer-item">
-                <div class="post-thum">
+                <div class="sheet-thum">
                   <img
                     class="img"
-                    src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png"
+                    :src="sheetToStage.thumbnail || 'https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png'"
+                    @click="showThumbDrawer"
                   >
                 </div>
               </div>
             </div>
             <a-divider />
           </div>
-          <div class="postControl">
+          <AttachmentSelectDrawer
+            v-model="thumDrawerVisible"
+            @listenToSelect="selectSheetThumb"
+            :drawerWidth="460"
+          />
+          <div class="sheetControl">
             <a-button
               style="marginRight: 8px"
               @click="handleDraftClick"
@@ -124,10 +130,11 @@
 <script>
 import { mavonEditor } from 'mavon-editor'
 import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
+import AttachmentSelectDrawer from '../attachment/components/AttachmentSelectDrawer'
 import FooterToolBar from '@/components/FooterToolbar'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import 'mavon-editor/dist/css/index.css'
-import postApi from '@/api/post'
+import sheetApi from '@/api/sheet'
 import themeApi from '@/api/theme'
 const toolbars = {
   bold: true, // 粗体
@@ -153,11 +160,11 @@ const toolbars = {
   preview: true // 预览
 }
 export default {
-  name: 'Editor',
   components: {
     mavonEditor,
     FooterToolBar,
-    AttachmentDrawer
+    AttachmentDrawer,
+    AttachmentSelectDrawer
   },
   mixins: [mixin, mixinDevice],
   data() {
@@ -168,16 +175,17 @@ export default {
         xs: { span: 24 }
       },
       attachmentDrawerVisible: false,
+      thumDrawerVisible: false,
       toolbars,
       visible: false,
-      postUrl: 'hello-world',
+      sheetUrl: 'hello-world',
       customTpls: [],
-      postToStage: {}
+      sheetToStage: {}
     }
   },
   computed: {
     publishText() {
-      if (this.postToStage.id) {
+      if (this.sheetToStage.id) {
         return '更新并发布'
       }
       return '创建并发布'
@@ -187,16 +195,14 @@ export default {
     this.loadCustomTpls()
   },
   beforeRouteEnter(to, from, next) {
-    // Get post id from query
-    const postId = to.query.postId
+    // Get sheetId id from query
+    const sheetId = to.query.sheetId
 
     next(vm => {
-      if (postId) {
-        postApi.get(postId).then(response => {
-          const post = response.data.data
-          vm.postToStage = post
-          vm.selectedTagIds = post.tagIds
-          vm.selectedCategoryIds = post.categoryIds
+      if (sheetId) {
+        sheetApi.get(sheetId).then(response => {
+          const sheet = response.data.data
+          vm.sheetToStage = sheet
         })
       }
     })
@@ -210,35 +216,40 @@ export default {
     showAttachDrawer() {
       this.attachmentDrawerVisible = true
     },
+    showThumbDrawer() {
+      this.thumDrawerVisible = true
+    },
     showDrawer() {
       this.visible = true
     },
     handlePublishClick() {
-      this.postToStage.status = 'PUBLISHED'
-      this.createOrUpdatePost()
+      this.sheetToStage.status = 'PUBLISHED'
+      this.createOrUpdateSheet()
     },
     handleDraftClick() {
-      this.postToStage.status = 'DRAFT'
-      this.createOrUpdatePost()
+      this.sheetToStage.status = 'DRAFT'
+      this.createOrUpdateSheet()
     },
-    createOrUpdatePost() {
-      if (this.postToStage.id) {
-        // Update the post
-        postApi.update(this.postToStage.id, this.postToStage).then(response => {
-          this.$log.debug('Updated post', response.data.data)
+    createOrUpdateSheet() {
+      if (this.sheetToStage.id) {
+        sheetApi.update(this.sheetToStage.id, this.sheetToStage).then(response => {
+          this.$log.debug('Updated sheet', response.data.data)
           this.$message.success('页面更新成功')
         })
       } else {
-        // Create the post
-        postApi.create(this.postToStage).then(response => {
-          this.$log.debug('Created post', response.data.data)
+        sheetApi.create(this.sheetToStage).then(response => {
+          this.$log.debug('Created sheet', response.data.data)
           this.$message.success('页面创建成功')
-          this.postToStage = response.data.data
+          this.sheetToStage = response.data.data
         })
       }
     },
     onClose() {
       this.visible = false
+    },
+    selectSheetThumb(data) {
+      this.sheetToStage.thumbnail = data.path
+      this.thumDrawerVisible = false
     }
   }
 }
@@ -249,7 +260,7 @@ export default {
   min-height: 580px;
 }
 
-.postControl {
+.sheetControl {
   position: absolute;
   bottom: 0px;
   width: 100%;
@@ -261,7 +272,7 @@ export default {
   border-radius: 0px 0px 4px 4px;
 }
 
-.post-thum .img {
+.sheet-thum .img {
   width: 100%;
 }
 </style>
diff --git a/src/views/sheet/SheetList.vue b/src/views/sheet/SheetList.vue
index 166bc954..953082b2 100644
--- a/src/views/sheet/SheetList.vue
+++ b/src/views/sheet/SheetList.vue
@@ -74,9 +74,36 @@
             </a-tab-pane>
             <a-tab-pane key="custom">
               <span slot="tab">
-                <a-icon type="fork" />内置页面
+                <a-icon type="fork" />自定义页面
               </span>
-              自定义页面
+              <a-table
+                :rowKey="sheet => sheet.id"
+                :columns="customColumns"
+                :dataSource="formattedSheets"
+                :pagination="false"
+              >
+                <span
+                  slot="status"
+                  slot-scope="statusProperty"
+                >
+                  <a-badge :status="statusProperty.status" />
+                  {{ statusProperty.text }}
+                </span>
+
+                <span
+                  slot="updateTime"
+                  slot-scope="updateTime"
+                >{{ updateTime | timeAgo }}</span>
+
+                <span
+                  slot="action"
+                  slot-scope="text, sheet"
+                >
+                  <a href="javascript:;" @click="onEditClick(sheet)">编辑</a>
+                  <a-divider type="vertical" />
+                  <a href="javascript:;">删除</a>
+                </span>
+              </a-table>
             </a-tab-pane>
           </a-tabs>
         </div>
@@ -87,6 +114,7 @@
 
 <script>
 import { mixin, mixinDevice } from '@/utils/mixin.js'
+import sheetApi from '@/api/sheet'
 const internalColumns = [
   {
     title: '页面名称',
@@ -103,6 +131,36 @@ const internalColumns = [
     scopedSlots: { customRender: 'action' }
   }
 ]
+const customColumns = [
+  {
+    title: '标题',
+    dataIndex: 'title'
+  },
+  {
+    title: '状态',
+    className: 'status',
+    dataIndex: 'statusProperty',
+    scopedSlots: { customRender: 'status' }
+  },
+  {
+    title: '评论量',
+    dataIndex: 'commentCount'
+  },
+  {
+    title: '访问量',
+    dataIndex: 'visits'
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateTime',
+    scopedSlots: { customRender: 'updateTime' }
+  },
+  {
+    title: '操作',
+    width: '150px',
+    scopedSlots: { customRender: 'action' }
+  }
+]
 const internalPages = [
   {
     id: '1',
@@ -124,13 +182,32 @@ export default {
   mixins: [mixin, mixinDevice],
   data() {
     return {
+      sheetStatus: sheetApi.sheetStatus,
       internalColumns,
-      internalPages
+      customColumns,
+      internalPages,
+      sheets: []
     }
   },
+  computed: {
+    formattedSheets() {
+      return this.sheets.map(sheet => {
+        sheet.statusProperty = this.sheetStatus[sheet.status]
+        return sheet
+      })
+    }
+  },
+  created() {
+    this.loadSheets()
+  },
   methods: {
-    editPage(id) {
-      this.$message.success('编辑' + id)
+    loadSheets() {
+      sheetApi.list().then(response => {
+        this.sheets = response.data.data.content
+      })
+    },
+    onEditClick(sheet) {
+      this.$router.push({ name: 'SheetEdit', query: { sheetId: sheet.id } })
     },
     viewPage(id) {
       this.$message.success('查看' + id)