fix: #113

do save work before preview work
zh: 预览作品之前先保存作品

Author: ly525

front-end/h5/src/components/core/editor/index.js

@@ -123,7 +123,12 @@ export default {
       pages: state => state.work.pages,
       work: state => state.work
     }),
-    ...mapState('loading', ['saveWork_loading', 'setWorkAsTemplate_loading', 'uploadWorkCover_loading'])
+    ...mapState('loading', [
+      'saveWork_loading',
+      'previewWork_loading',
+      'setWorkAsTemplate_loading',
+      'uploadWorkCover_loading'
+    ])
   },
   methods: {
     ...mapActions('editor', [
@@ -239,7 +244,7 @@ export default {
             style={{ lineHeight: '64px', float: 'right', background: 'transparent' }}
           >
             {/* 保存、预览、发布、设置为模板 */}
-            <a-menu-item key="1" class="transparent-bg"><a-button type="primary" size="small" onClick={() => { this.previewVisible = true }}>{this.$t('editor.header.preview')}</a-button></a-menu-item>
+            <a-menu-item key="1" class="transparent-bg"><a-button type="primary" size="small" onClick={() => { this.saveWork({ loadingName: 'previewWork_loading' }).then(() => { this.previewVisible = true }) }} loading={this.previewWork_loading}>{this.$t('editor.header.preview')}</a-button></a-menu-item>
             <a-menu-item key="2" class="transparent-bg"><a-button size="small" onClick={() => this.saveWork({ isSaveCover: true })} loading={this.saveWork_loading || this.uploadWorkCover_loading}>{this.$t('editor.header.save')}</a-button></a-menu-item>
             {/* <a-menu-item key="3" class="transparent-bg"><a-button size="small">发布</a-button></a-menu-item> */}
             <a-menu-item key="3" class="transparent-bg">

front-end/h5/src/store/modules/loading.js

@@ -1,6 +1,17 @@
+/*
+ * @Author: ly525
+ * @Date: 2019-11-24 18:51:58
+ * @LastEditors: ly525
+ * @LastEditTime: 2019-12-08 17:21:48
+ * @FilePath: /luban-h5/front-end/h5/src/store/modules/loading.js
+ * @Github: https://github.com/ly525/luban-h5
+ * @Description: loading module
+ * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ */
 // initial state
 const state = {
   saveWork_loading: false,
+  previewWork_loading: false,
   fetchWorks_loading: false,
   setWorkAsTemplate_loading: false,
   fetchWorkTemplates_loading: false,

front-end/h5/src/store/modules/work.js

@@ -21,6 +21,8 @@ export const actions = {
     strapi.createEntry('works', new Work()).then(entry => {
       const routeData = router.resolve({ name: 'editor', params: { workId: entry.id } })
       window.open(routeData.href, '_blank')
+      // 如果希望不打开新 tab，可以注释上面面两行，启用下面一行的代码即可，不过不推荐。将编辑器单独起一个页面更有利于 vuex 的数据管理
+      // router.replace({ name: 'editor', params: { workId: entry.id } })
     })
   },
   updateWork ({ commit, state }, payload = {}) {
@@ -33,13 +35,16 @@ export const actions = {
   },
   /**
    * isSaveCover {Boolean} 保存作品时，是否保存封面图
+   * loadingName {String} saveWork_loading, previewWork_loading
+   * 预览作品之前需要先保存，但希望 用户点击保存按钮 和 点击预览按钮 loading_name 能够不同（虽然都调用了 saveWork）
+   * 因为 loading 效果要放在不同的按钮上
    */
-  saveWork ({ commit, dispatch, state }, { isSaveCover = false } = {}) {
+  saveWork ({ commit, dispatch, state }, { isSaveCover = false, loadingName = 'saveWork_loading' } = {}) {
     const fn = (callback) => {
       new AxiosWrapper({
         dispatch,
         commit,
-        loading_name: 'saveWork_loading',
+        loading_name: loadingName,
         successMsg: '保存作品成功',
         customRequest: strapi.updateEntry.bind(strapi)
       }).put('works', state.work.id, state.work).then(callback)