add loading for fetch work list

ly525
1 parent d0830352
Showing 3 changed files with 33 additions and 16 deletions
front-end/h5/src/store/modules/loading.js
front-end/h5/src/store/modules/work.js
front-end/h5/src/views/work-manager/list.vue
 // initial state
 const state = {
-  saveWork_loading: false
+  saveWork_loading: false,
+  fetchWorks_loading: false
 }
 // getters
@@ -49,11 +49,15 @@ export const actions = {
       commit('setEditingPage')
     })
   },
-  fetchWorks ({ commit, state }, workId) {
-    strapi.getEntries('works', {}).then(entries => {
-      entries.sort((a, b) => b.id - a.id)
-      commit('setWorks', entries)
-    })
+  fetchWorks ({ commit, dispatch, state }, workId) {
+    new AxiosWrapper({
+      dispatch,
+      commit,
+      name: 'editor/setWorks',
+      loading_name: 'fetchWorks_loading',
+      successMsg: '获取作品列表成功',
+      customRequest: strapi.getEntries.bind(strapi)
+    }).get('works', {})
   },
   /**
    *
@@ -129,8 +133,15 @@ export const actions = {
 // mutations
 export const mutations = {
-  setWorks (state, works) {
-    state.works = works
+  /**
+   * payload: {
+   *  type:   @params {String} "editor/setWorks",
+   *  value:  @params {Array}  work list
+   * }
+   */
+  setWorks (state, { type, value }) {
+    value.sort((a, b) => b.id - a.id)
+    state.works = value
   },
   setWork (state, work) {
     window.__work = work
@@ -104,7 +104,8 @@ export default {
     previewVisible: false
   }),
   computed: {
-    ...mapState('editor', ['works'])
+    ...mapState('editor', ['works']),
+    ...mapState('loading', ['fetchWorks_loading'])
   },
   methods: {
     ...mapActions('editor', [
@@ -125,14 +126,18 @@ export default {
             <AddNewCard handleCreate={this.createWork} />
           </a-col>
           {
-            this.works.map(work => (
-              <a-col span={6} key={work.id} style="margin-bottom: 20px;">
-                <ListItemCard work={work} handleClickPreview={e => {
-                  this.previewVisible = true
-                  this.activeWork = work
-                }} />
+            this.fetchWorks_loading
+              ? <a-col span={18} style="margin-bottom: 10px;text-align: center;height: 355px;line-height: 355px;border-bottom: 1px solid #ebedf0;background: rgba(255, 255, 255, 0.5);">
+                <a-spin tip="作品列表获取中..."/>
               </a-col>
-            ))
+              : this.works.map(work => (
+                <a-col span={6} key={work.id} style="margin-bottom: 20px;">
+                  <ListItemCard work={work} handleClickPreview={e => {
+                    this.previewVisible = true
+                    this.activeWork = work
+                  }} />
+                </a-col>
+              ))
           }
         </a-row>
         {