Created SheetSetting component.

2019-08-27 16:10:45 +08:00 · 2019-08-27 16:10:45 +08:00 · 06294f231f
parent 9d8ec26b6c
commit 06294f231f
7 changed files with 291 additions and 189 deletions
--- a/src/components/global.less
+++ b/src/components/global.less
@ -1,15 +1,17 @@
@import './index.less';

-*{
+* {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #eee;
  }
+
  &::-webkit-scrollbar-thumb {
    background-color: #1890ff;
    cursor: pointer;
  }
+
  &::-webkit-scrollbar-track {
    background-color: #eee;
    cursor: pointer;
@ -545,7 +547,7 @@ body {
  }
 }

-.comment-tab-wrapper{
+.comment-tab-wrapper {
  .ant-card-body {
    padding: 0 !important;
  }
@ -694,33 +696,41 @@ body {

  margin-bottom: 0;

-  p{
+  p {
    margin-bottom: 0;
  }
 }

-.post-thum {
+.post-thumb {
  .img {
    width: 100%;
    cursor: pointer;
    border-radius: 4px;
  }
-  .post-thum-remove {
+
+  .post-thumb-remove {
    margin-top: 16px;
  }
 }

-.sheet-thum {
+.sheet-thumb {
  .img {
    width: 100%;
    cursor: pointer;
    border-radius: 4px;
  }
-  .sheet-thum-remove {
+
+  .sheet-thumb-remove {
    margin-top: 16px;
  }
 }

-.ant-calendar-picker{
-  width: 100%!important;
+.ant-calendar-picker {
+  width: 100% !important;
+}
+
+#editor {
+  .v-note-wrapper {
+    min-height: 580px;
+  }
 }
--- a/src/views/post/PostEdit.vue
+++ b/src/views/post/PostEdit.vue
@ -41,7 +41,7 @@
    <footer-tool-bar :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}">
      <a-button
        type="primary"
-        @click="handleShowPostSettings"
+        @click="handleShowPostSetting"
      >发布</a-button>
      <a-button
        type="dashed"
@ -166,7 +166,7 @@ export default {
        }
      })
    },
-    handleShowPostSettings() {
+    handleShowPostSetting() {
      this.postSettingVisible = true
    },
    // 关闭文章设置抽屉
@ -186,8 +186,5 @@ export default {
 }
 </script>

-<style lang="less" scoped>
-.v-note-wrapper {
-  min-height: 580px;
-}
+<style lang="less">
 </style>
--- a/src/views/post/PostList.vue
+++ b/src/views/post/PostList.vue
@ -149,7 +149,7 @@
            >
              <a-tooltip
                placement="topLeft"
-                :title="'点击预览【'+text+'】'"
+                :title="'点击访问【'+text+'】'"
              >{{ text }}</a-tooltip>
            </a>
          </span>
--- a/src/views/post/components/PostSetting.vue
+++ b/src/views/post/components/PostSetting.vue
@ -138,14 +138,14 @@
        <div :style="{ marginBottom: '16px' }">
          <h3 class="post-setting-drawer-title">缩略图</h3>
          <div class="post-setting-drawer-item">
-            <div class="post-thum">
+            <div class="post-thumb">
              <img
                class="img"
                :src="selectedPost.thumbnail || '//i.loli.net/2019/05/05/5ccf007c0a01d.png'"
-                @click="()=>this.thumDrawerVisible=true"
+                @click="()=>this.thumbDrawerVisible=true"
              >
              <a-button
-                class="post-thum-remove"
+                class="post-thumb-remove"
                type="dashed"
                @click="handlerRemoveThumb"
              >移除</a-button>
@ -156,7 +156,7 @@
      </div>
    </a-skeleton>
    <AttachmentSelectDrawer
-      v-model="thumDrawerVisible"
+      v-model="thumbDrawerVisible"
      @listenToSelect="handleSelectPostThumb"
      :drawerWidth="460"
    />
@ -200,7 +200,7 @@ export default {
  },
  data() {
    return {
-      thumDrawerVisible: false,
+      thumbDrawerVisible: false,
      categoryFormVisible: false,
      settingLoading: true,
      options: [],
@ -313,7 +313,7 @@ export default {
    },
    handleSelectPostThumb(data) {
      this.selectedPost.thumbnail = encodeURI(data.path)
-      this.thumDrawerVisible = false
+      this.thumbDrawerVisible = false
    },
    handlerRemoveThumb() {
      this.selectedPost.thumbnail = null
--- a/src/views/sheet/SheetEdit.vue
+++ b/src/views/sheet/SheetEdit.vue
@ -18,115 +18,24 @@
            :toolbars="toolbars"
            :ishljs="true"
            :autofocus="false"
-            @imgAdd="pictureUploadHandle"
+            @imgAdd="handleAttachmentUpload"
          />
        </div>
      </a-col>
-
-      <a-col
-        :xl="24"
-        :lg="24"
-        :md="24"
-        :sm="24"
-        :xs="24"
-      >
-        <a-drawer
-          title="页面设置"
-          :width="isMobile()?'100%':'460'"
-          :closable="true"
-          @close="()=>this.sheetSettingVisible = false"
-          :visible="sheetSettingVisible"
-        >
-          <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+'/s/'+ (sheetToStage.url ? sheetToStage.url : '{auto_generate}')"
-                  >
-                    <a-input v-model="sheetToStage.url" />
-                  </a-form-item>
-                  <a-form-item label="发表时间：">
-                    <a-date-picker
-                      showTime
-                      :defaultValue="pickerDefaultValue"
-                      format="YYYY-MM-DD HH:mm:ss"
-                      placeholder="Select Publish Time"
-                      @change="onChange"
-                      @ok="onOk"
-                    />
-                  </a-form-item>
-                  <a-form-item label="开启评论：">
-                    <a-radio-group
-                      v-model="sheetToStage.disallowComment"
-                      :defaultValue="false"
-                    >
-                      <a-radio :value="false">开启</a-radio>
-                      <a-radio :value="true">关闭</a-radio>
-                    </a-radio-group>
-                  </a-form-item>
-                  <a-form-item label="自定义模板：">
-                    <a-select v-model="sheetToStage.template">
-                      <a-select-option
-                        key=""
-                        value=""
-                      >无</a-select-option>
-                      <a-select-option
-                        v-for="tpl in customTpls"
-                        :key="tpl"
-                        :value="tpl"
-                      >{{ tpl }}</a-select-option>
-                    </a-select>
-                  </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="sheet-thum">
-                  <img
-                    class="img"
-                    :src="sheetToStage.thumbnail || '//i.loli.net/2019/05/05/5ccf007c0a01d.png'"
-                    @click="()=>this.thumDrawerVisible = true"
-                  >
-                  <a-button
-                    class="sheet-thum-remove"
-                    type="dashed"
-                    @click="handlerRemoveThumb"
-                  >移除</a-button>
-                </div>
-              </div>
-            </div>
-            <a-divider class="divider-transparent" />
-          </div>
-          <AttachmentSelectDrawer
-            v-model="thumDrawerVisible"
-            @listenToSelect="handleSelectSheetThumb"
-            :drawerWidth="460"
-          />
-          <div class="bottom-control">
-            <a-button
-              style="marginRight: 8px"
-              @click="handleDraftClick"
-            >保存草稿</a-button>
-            <a-button
-              type="primary"
-              @click="handlePublishClick"
-            >发布</a-button>
-          </div>
-        </a-drawer>
-      </a-col>
    </a-row>
+
+    <SheetSetting
+      :sheet="sheetToStage"
+      v-model="sheetSettingVisible"
+      @close="onSheetSettingsClose"
+      @onRefreshSheet="onRefreshSheetFromSetting"
+    />
+
    <AttachmentDrawer v-model="attachmentDrawerVisible" />
    <footer-tool-bar :style="{ width: isSideMenu() && isDesktop() ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'}">
      <a-button
        type="primary"
-        @click="()=>this.sheetSettingVisible = true"
+        @click="handleShowSheetSetting"
      >发布</a-button>
      <a-button
        type="dashed"
@ -138,24 +47,21 @@
 </template>

 <script>
-import { haloEditor } from 'halo-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 { toolbars } from '@/core/const'
+import SheetSetting from './components/SheetSetting'
+import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
+import FooterToolBar from '@/components/FooterToolbar'
+import { haloEditor } from 'halo-editor'
 import 'halo-editor/dist/css/index.css'
 import sheetApi from '@/api/sheet'
-import themeApi from '@/api/theme'
-import optionApi from '@/api/option'
 import attachmentApi from '@/api/attachment'
-import moment from 'moment'
 export default {
  components: {
    haloEditor,
    FooterToolBar,
    AttachmentDrawer,
-    AttachmentSelectDrawer
+    SheetSetting
  },
  mixins: [mixin, mixinDevice],
  data() {
@ -167,18 +73,12 @@ export default {
        xs: { span: 24 }
      },
      attachmentDrawerVisible: false,
-      thumDrawerVisible: false,
      sheetSettingVisible: false,
-      customTpls: [],
      sheetToStage: {},
-      timer: null,
-      options: [],
-      keys: ['blog_url']
+      timer: null
    }
  },
  created() {
-    this.loadCustomTpls()
-    this.loadOptions()
    clearInterval(this.timer)
    this.timer = null
    this.autoSaveTimer()
@ -208,37 +108,7 @@ export default {
      }
    })
  },
-  computed: {
-    pickerDefaultValue() {
-      if (this.sheetToStage.createTime) {
-        var date = new Date(this.sheetToStage.createTime)
-        return moment(date, 'YYYY-MM-DD HH:mm:ss')
-      }
-      return moment(new Date(), 'YYYY-MM-DD HH:mm:ss')
-    }
-  },
  methods: {
-    loadCustomTpls() {
-      themeApi.customTpls().then(response => {
-        this.customTpls = response.data.data
-      })
-    },
-    loadOptions() {
-      optionApi.listAll(this.keys).then(response => {
-        this.options = response.data.data
-      })
-    },
-    handlePublishClick() {
-      this.sheetToStage.status = 'PUBLISHED'
-      this.saveSheet()
-    },
-    handleDraftClick() {
-      this.sheetToStage.status = 'DRAFT'
-      this.saveSheet()
-    },
-    handlerRemoveThumb() {
-      this.sheetToStage.thumbnail = null
-    },
    createOrUpdateSheet(createSuccess, updateSuccess, autoSave) {
      if (this.sheetToStage.id) {
        sheetApi.update(this.sheetToStage.id, this.sheetToStage, autoSave).then(response => {
@ -257,22 +127,11 @@ export default {
        })
      }
    },
-    saveSheet() {
-      this.createOrUpdateSheet(
-        () => this.$message.success('页面创建成功！'),
-        () => this.$message.success('页面更新成功！'),
-        false
-      )
-    },
    autoSaveSheet() {
      if (this.sheetToStage.title != null && this.sheetToStage.originalContent != null) {
        this.createOrUpdateSheet(null, null, true)
      }
    },
-    handleSelectSheetThumb(data) {
-      this.sheetToStage.thumbnail = encodeURI(data.path)
-      this.thumDrawerVisible = false
-    },
    autoSaveTimer() {
      if (this.timer == null) {
        this.timer = setInterval(() => {
@ -280,7 +139,7 @@ export default {
        }, 15000)
      }
    },
-    pictureUploadHandle(pos, $file) {
+    handleAttachmentUpload(pos, $file) {
      var formdata = new FormData()
      formdata.append('file', $file)
      attachmentApi.upload(formdata).then(response => {
@ -295,17 +154,17 @@ export default {
        }
      })
    },
-    onChange(value, dateString) {
-      this.sheetToStage.createTime = value.valueOf()
+    handleShowSheetSetting() {
+      this.sheetSettingVisible = true
    },
-    onOk(value) {
-      this.sheetToStage.createTime = value.valueOf()
+    onSheetSettingsClose() {
+      this.sheetSettingVisible = false
+    },
+    onRefreshSheetFromSetting(sheet) {
+      this.sheetToStage = sheet
    }
  }
 }
 </script>
-<style lang="less" scoped>
-.v-note-wrapper {
-  min-height: 580px;
-}
+<style lang="less">
 </style>
--- a/src/views/sheet/SheetList.vue
+++ b/src/views/sheet/SheetList.vue
@ -107,7 +107,7 @@
                  >
                    <a-tooltip
                      placement="topLeft"
-                      :title="'点击预览 '+text"
+                      :title="'点击访问【'+text+'】'"
                    >{{ text }}</a-tooltip>
                  </a>
                </span>
--- a/src/views/sheet/components/SheetSetting.vue
+++ b/src/views/sheet/components/SheetSetting.vue
@ -0,0 +1,236 @@
+<template>
+  <a-drawer
+    title="页面设置"
+    :width="isMobile()?'100%':'460'"
+    placement="right"
+    closable
+    destroyOnClose
+    @close="onClose"
+    :visible="visiable"
+  >
+    <a-skeleton
+      active
+      :loading="settingLoading"
+      :paragraph="{ rows: 18 }"
+    >
+      <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+'/s/'+ (selectedSheet.url ? selectedSheet.url : '{auto_generate}')"
+              >
+                <a-input v-model="selectedSheet.url" />
+              </a-form-item>
+              <a-form-item label="发表时间：">
+                <a-date-picker
+                  showTime
+                  :defaultValue="pickerDefaultValue"
+                  format="YYYY-MM-DD HH:mm:ss"
+                  placeholder="Select Publish Time"
+                  @change="onSheetDateChange"
+                  @ok="onSheetDateOk"
+                />
+              </a-form-item>
+              <a-form-item label="开启评论：">
+                <a-radio-group
+                  v-model="selectedSheet.disallowComment"
+                  :defaultValue="false"
+                >
+                  <a-radio :value="false">开启</a-radio>
+                  <a-radio :value="true">关闭</a-radio>
+                </a-radio-group>
+              </a-form-item>
+              <a-form-item label="自定义模板：">
+                <a-select v-model="selectedSheet.template">
+                  <a-select-option
+                    key=""
+                    value=""
+                  >无</a-select-option>
+                  <a-select-option
+                    v-for="tpl in customTpls"
+                    :key="tpl"
+                    :value="tpl"
+                  >{{ tpl }}</a-select-option>
+                </a-select>
+              </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="sheet-thumb">
+              <img
+                class="img"
+                :src="selectedSheet.thumbnail || '//i.loli.net/2019/05/05/5ccf007c0a01d.png'"
+                @click="()=>this.thumbDrawerVisible = true"
+              >
+              <a-button
+                class="sheet-thumb-remove"
+                type="dashed"
+                @click="handlerRemoveThumb"
+              >移除</a-button>
+            </div>
+          </div>
+        </div>
+        <a-divider class="divider-transparent" />
+      </div>
+    </a-skeleton>
+    <AttachmentSelectDrawer
+      v-model="thumbDrawerVisible"
+      @listenToSelect="handleSelectSheetThumb"
+      :drawerWidth="460"
+    />
+    <div class="bottom-control">
+      <a-button
+        style="marginRight: 8px"
+        @click="handleDraftClick"
+      >保存草稿</a-button>
+      <a-button
+        type="primary"
+        @click="handlePublishClick"
+      >发布</a-button>
+    </div>
+  </a-drawer>
+</template>
+<script>
+import { mixin, mixinDevice } from '@/utils/mixin.js'
+import moment from 'moment'
+import AttachmentSelectDrawer from '../../attachment/components/AttachmentSelectDrawer'
+import optionApi from '@/api/option'
+import themeApi from '@/api/theme'
+import sheetApi from '@/api/sheet'
+export default {
+  name: 'SheetSetting',
+  mixins: [mixin, mixinDevice],
+  components: {
+    AttachmentSelectDrawer
+  },
+  data() {
+    return {
+      thumbDrawerVisible: false,
+      settingLoading: true,
+      options: [],
+      keys: ['blog_url'],
+      selectedSheet: this.sheet,
+      customTpls: []
+    }
+  },
+  model: {
+    prop: 'visiable',
+    event: 'close'
+  },
+  props: {
+    sheet: {
+      type: Object,
+      required: true
+    },
+    visiable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  created() {
+    this.loadSkeleton()
+    this.loadOptions()
+    this.loadCustomTpls()
+  },
+  watch: {
+    sheet(val) {
+      this.selectedSheet = val
+    },
+    selectedSheet(val) {
+      this.$emit('onRefreshSheet', val)
+    },
+    visiable: function(newValue, oldValue) {
+      if (newValue) {
+        this.loadSkeleton()
+      }
+    }
+  },
+  computed: {
+    pickerDefaultValue() {
+      if (this.selectedSheet.createTime) {
+        var date = new Date(this.selectedSheet.createTime)
+        return moment(date, 'YYYY-MM-DD HH:mm:ss')
+      }
+      return moment(new Date(), 'YYYY-MM-DD HH:mm:ss')
+    }
+  },
+  methods: {
+    loadSkeleton() {
+      this.settingLoading = true
+      setTimeout(() => {
+        this.settingLoading = false
+      }, 500)
+    },
+    loadOptions() {
+      optionApi.listAll(this.keys).then(response => {
+        this.options = response.data.data
+      })
+    },
+    loadCustomTpls() {
+      themeApi.customTpls().then(response => {
+        this.customTpls = response.data.data
+      })
+    },
+    handleSelectSheetThumb(data) {
+      this.selectedSheet.thumbnail = encodeURI(data.path)
+      this.thumbDrawerVisible = false
+    },
+    handlerRemoveThumb() {
+      this.selectedSheet.thumbnail = null
+    },
+    handlePublishClick() {
+      this.selectedSheet.status = 'PUBLISHED'
+      this.saveSheet()
+    },
+    handleDraftClick() {
+      this.selectedSheet.status = 'DRAFT'
+      this.saveSheet()
+    },
+    saveSheet() {
+      this.createOrUpdateSheet(
+        () => this.$message.success('页面创建成功！'),
+        () => this.$message.success('页面更新成功！'),
+        false
+      )
+    },
+    createOrUpdateSheet(createSuccess, updateSuccess, autoSave) {
+      if (this.selectedSheet.id) {
+        sheetApi.update(this.selectedSheet.id, this.selectedSheet, autoSave).then(response => {
+          this.$log.debug('Updated sheet', response.data.data)
+          if (updateSuccess) {
+            updateSuccess()
+          }
+        })
+      } else {
+        sheetApi.create(this.selectedSheet, autoSave).then(response => {
+          this.$log.debug('Created sheet', response.data.data)
+          if (createSuccess) {
+            createSuccess()
+          }
+          this.selectedSheet = response.data.data
+        })
+      }
+    },
+    onClose() {
+      this.$emit('close', false)
+    },
+    onSheetDateChange(value, dateString) {
+      this.selectedSheet.createTime = value.valueOf()
+    },
+    onSheetDateOk(value) {
+      this.selectedSheet.createTime = value.valueOf()
+    }
+  }
+}
+</script>
+<style lang="less">
+</style>