refactor: fetch works&work-templates; #!zh: 重构作品和模板列表

ly525
1 parent 656a956c
Showing 6 changed files with 293 additions and 346 deletions
front-end/h5/src/components/common/work/card-item.js
front-end/h5/src/store/modules/work.js
front-end/h5/src/views/work-manager/list-mixin.js
front-end/h5/src/views/work-manager/list.scss
front-end/h5/src/views/work-manager/list.vue
front-end/h5/src/views/work-manager/templates.vue
+import QRCode from 'qrcode'
+import CardCover from './card-cover'
+
+export default {
+  props: {
+    isTemplate: {
+      type: Boolean,
+      default: false
+    },
+    work: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data: () => ({
+    qrcodeUrl: ''
+  }),
+  methods: {
+    timeFmt (date) {
+      const dateTime = new Date(date)
+      const displayTime = `${dateTime.getFullYear()}-${dateTime.getMonth() +
+        1}-${dateTime.getDate()}`
+      return displayTime
+    },
+    genQRCodeUrl (work) {
+      const url = `${window.location.origin}/works/preview/${work.id}`
+      QRCode.toDataURL(url, (err, url) => {
+        if (err) console.log(err)
+        this.qrcodeUrl = url
+      })
+    }
+  },
+  render (h) {
+    return (
+      <a-card hoverable>
+        <CardCover
+          slot="cover"
+          qrcodeUrl={this.qrcodeUrl}
+          coverImageUrl={this.work.cover_image_url}
+        />
+        <template class="ant-card-actions" slot="actions">
+          {
+            // 编辑
+            this.isTemplate
+              ? <a-tooltip effect="dark" placement="bottom" title={this.$t('workCard.useNow')}>
+                <a-icon
+                  type="plus-square"
+                  title={this.$t('workCard.useNow')}
+                  onClick={() => this.$emit('useTemplate', this.work)}
+                />
+              </a-tooltip>
+              : <a-tooltip effect="dark" placement="bottom" title={this.$t('workCard.edit')}>
+                <router-link
+                  to={{ name: 'editor', params: { workId: this.work.id } }}
+                  target="_blank"
+                >
+                  <a-icon type="edit" title={this.$t('workCard.edit')}/>
+                </router-link>
+              </a-tooltip>
+          }
+          {/** 预览 */}
+          <a-tooltip effect="dark" placement="bottom" title={this.$t('workCard.preview')}>
+            <a-icon type="eye" title={this.$t('workCard.preview')} onClick={() => this.$emit('preview')} />
+          </a-tooltip>
+          <a-tooltip effect="dark" placement="bottom" title={this.$t('workCard.delete')}>
+            <a-icon type="delete" title={this.$t('workCard.delete')} onClick={() => this.$emit('delete') } />
+          </a-tooltip>
+          {
+            this.qrcodeUrl
+              ? <a-icon type="close-circle" onClick={() => { this.qrcodeUrl = '' }} />
+              : <a-icon type="qrcode" onClick={() => this.genQRCodeUrl(this.work)} />
+          }
+        </template>
+        <a-card-meta
+        >
+          <div slot="title" class="ant-card-meta-title" style="font-size: 14px;">
+            {this.work.title}({this.work.id})
+          </div>
+          <div slot="description" style="font-size: 12px;">
+            {/** 描述 时间 */}
+            <div>{this.$t('workCard.description')}: {this.work.description}</div>
+            <div>{this.$t('workCard.createTime')}: {this.timeFmt(this.work.created_at)}</div>
+          </div>
+        </a-card-meta>
+      </a-card>
+    )
+  }
+}
+
+export const AddNewCard = {
+  functional: true,
+  render (h, { props, parent }) {
+    return (
+      <a-card hoverable>
+        <div slot="cover" class="flex-center" style="height: 405px;background: #f7f5f557;" onClick={props.handleCreate}>
+          <a-icon type="plus" />
+        </div>
+        <template class="ant-card-actions" slot="actions">
+          {/** 创建新作品 */}
+          {/** https://kazupon.github.io/vue-i18n/guide/component.html#translation-in-functional-component */}
+          <span onClick={props.handleCreate}>{parent.$t('workCard.createNewWork')}</span>
+        </template>
+      </a-card>
+    )
+  }
+}
@@ -104,15 +104,15 @@ export const actions = {
       commit('setEditingPage')
     })
   },
-  fetchWorks ({ commit, dispatch, state }, workId) {
-    new AxiosWrapper({
+  fetchWorks ({ commit, dispatch, state }, payload = { is_template: false, _limit: 10 }) {
+    return new AxiosWrapper({
       dispatch,
       commit,
       name: 'editor/setWorks',
       loading_name: 'fetchWorks_loading',
       successMsg: '获取作品列表成功',
       customRequest: strapi.getEntries.bind(strapi)
-    }).get('works', { is_template: false }).catch(handleError)
+    }).get('works', payload).catch(handleError)
   },
   fetchWorksWithForms ({ commit, dispatch, state }, workId) {
     new AxiosWrapper({
@@ -124,7 +124,7 @@ export const actions = {
       customRequest: strapi.getEntries.bind(strapi)
     }).get('works/has-forms', { is_template: false }).catch(handleError)
   },
-  fetchWorkTemplates ({ commit, dispatch, state }, workId) {
+  fetchWorkTemplates ({ commit, dispatch, state }, payload = { is_template: true, _limit: 10 }) {
     new AxiosWrapper({
       dispatch,
       commit,
@@ -132,7 +132,7 @@ export const actions = {
       loading_name: 'fetchWorkTemplates_loading',
       successMsg: '获取模板列表成功',
       customRequest: strapi.getEntries.bind(strapi)
-    }).get('works', { is_template: true }).catch(handleError)
+    }).get('works', payload).catch(handleError)
   },
   /**
    *
+import { mapState, mapActions } from 'vuex'
+import ListItemCard, { AddNewCard } from '@/components/common/work/card-item.js'
+import PreviewDialog from '@/components/core/editor/modals/preview.vue'
+import './list.scss'
+
+export default {
+  components: {
+    ListItemCard,
+    AddNewCard
+  },
+  props: {
+    isTemplate: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: () => ({
+    activeWork: null,
+    previewVisible: false,
+    pagination: {
+      pageSize: 10,
+      pageNum: 1
+    }
+  }),
+  computed: {
+    ...mapState('editor', ['works', 'workTemplates']),
+    ...mapState('loading', ['fetchWorks_loading', 'fetchWorkTemplates_loading']),
+    workList () {
+      const workList = this.isTemplate ? this.workTemplates : this.works
+      return workList.sort((a, b) => a.id - b.id)
+    },
+    loading () {
+      return this.isTemplate ? this.fetchWorkTemplates_loading : this.fetchWorks_loading
+    }
+  },
+  methods: {
+    ...mapActions('editor', [
+      'fetchWorks',
+      'createWork',
+      'deleteWork',
+      'useTemplate',
+      'fetchWorkTemplates'
+    ]),
+    handleDeleteWork (work) {
+      this.deleteWork(work.id).then(res => {
+        const index = this.workList.findIndex(item => item.id === work.id)
+        this.workList.splice(index, 1)
+      })
+    },
+    handleSearch () {
+      const { pageSize, pageNum } = this.pagination
+      const payload = {
+        is_template: this.isTemplate,
+        _limit: pageSize,
+        _start: (pageNum - 1) * pageSize
+      }
+      debugger
+      this.isTemplate ? this.fetchWorkTemplates(payload) : this.fetchWorks(payload)
+    }
+  },
+  render (h) {
+    return (
+      <div class="works-wrapper">
+        <a-row gutter={12}>
+          {
+            !this.isTemplate &&
+            <a-col span={6} style="margin-bottom: 10px;">
+              <AddNewCard handleCreate={this.createWork} />
+            </a-col>
+          }
+          {
+            this.loading
+              ? <a-col span={18} class="loading-col">
+                <a-spin tip="作品列表获取中..."/>
+              </a-col>
+              : this.workList.map(work => (
+                <a-col span={6} key={work.id} class="mb-3">
+                  <ListItemCard
+                    isTemplate={this.isTemplate}
+                    work={work}
+                    onPreview={e => {
+                      this.previewVisible = true
+                      this.activeWork = work
+                    }}
+                    onUseTemplate={work => {
+                      this.useTemplateDialogVisible = true
+                      this.useTemplate(work.id).then((clonedWork) => {
+                        this.clonedWorkFromTemplate = clonedWork
+                      })
+                    }}
+                    onDelete={() => this.handleDeleteWork(work)}
+                  />
+                </a-col>
+              ))
+          }
+        </a-row>
+        <a-row gutter={12} class="pb-3">
+          <a-col span={24} style="text-align:center;">
+          <a-pagination
+            show-size-changer
+            default-current={1}
+            total={500}
+            current={this.pagination.pageNum}
+            onShowSizeChange={(pageNum, pageSize) => {
+              this.pagination.pageNum = 1
+              this.pagination.pageSize = pageSize
+              this.handleSearch()
+            }}
+            onChange={(currentPageNum, pageSize) => {
+              this.pagination.pageNum = currentPageNum
+              this.pagination.pageSize = pageSize
+              this.handleSearch()
+            }}
+          />
+          </a-col>
+        </a-row>
+        {
+          <PreviewDialog
+            work={this.activeWork || {}}
+            visible={this.previewVisible}
+            handleClose={() => { this.previewVisible = false }}
+          />
+        }
+        {
+          this.isTemplate &&
+          this.useTemplateDialogVisible &&
+          <a-modal
+            visible={true}
+            // onOk={() => { this.useTemplateDialogVisible = true }}
+            // onCancel={() => { this.useTemplateDialogVisible = false }}
+            width="240px"
+            okText="保存"
+            footer={null}
+            closable={false}
+            centered
+          >
+            <div style="text-align: center;">
+              {
+                this.clonedWorkFromTemplate
+                  ? <div>
+                    <div style={{ margin: '12px' }}>
+                      <a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
+                      模板已保存至"我的作品"中
+                    </div>
+                    <a-button onClick={() => {
+                      this.useTemplateDialogVisible = false
+                      this.clonedWorkFromTemplate = null
+                    }}>我再逛逛</a-button>
+                    <a-button type="primary"
+                      onClick={() => {
+                        const routeData = this.$router.resolve({ name: 'editor', params: { workId: this.clonedWorkFromTemplate.id } })
+                        window.open(routeData.href, '_blank')
+                      }}
+                      style={{ marginLeft: '12px' }}
+                    >立即查看</a-button>
+                  </div>
+                  : <a-spin tip="复制中" />
+              }
+            </div>
+          </a-modal>
+        }
+      </div>
+    )
+  },
+  created () {
+    this.handleSearch()
+    // this.isTemplate ? this.fetchWorkTemplates() : this.fetchWorks()
+  }
+}
+.loading-col {
+  margin-bottom: 10px;
+  text-align: center;
+  height: 454px;
+  line-height: 454px;
+  border-bottom: 1px solid #ebedf0;
+  background: rgba(255, 255, 255, 0.5);
+}
 \ No newline at end of file
 <script>
-import { mapState, mapActions } from 'vuex'
-import QRCode from 'qrcode'
-
-import PreviewDialog from 'core/editor/modals/preview.vue'
-import CardCover from '@/components/common/work/card-cover.js'
-
-const ListItemCard = {
-  props: {
-    work: {
-      type: Object,
-      default: () => {}
-    },
-    handleClickEdit: {
-      type: Function,
-      default: () => {}
-    },
-    handleClickPreview: {
-      type: Function,
-      default: () => {}
-    }
-  },
-  data: () => ({
-    qrcodeUrl: ''
-  }),
-  methods: {
-    ...mapActions('editor', [
-      'deleteWork'
-    ]),
-    timeFmt (date) {
-      const dateTime = new Date(date)
-      const displayTime = `${dateTime.getFullYear()}-${dateTime.getMonth() +
-        1}-${dateTime.getDate()}`
-      return displayTime
-    },
-    genQRCodeUrl (work) {
-      const url = `${window.location.origin}/works/preview/${work.id}`
-      QRCode.toDataURL(url, (err, url) => {
-        if (err) console.log(err)
-        this.qrcodeUrl = url
-      })
-    },
-    handleDeleteWork () {
-      const { title, id } = this.work
-      this.$confirm({
-        title: this.$t('workCard.confirmDeleteTip', { tip: `${title}(${id})` }),
-        // content: 'Bla bla ...',
-        okText: 'Confirm',
-        cancelText: 'Cancel',
-        onOk: async () => {
-          await this.deleteWork(this.work.id)
-          this.$emit('deleteSuccess')
-        },
-        onCancel: () => {}
-      })
-    }
-  },
-  render (h) {
-    return (
-      <a-card hoverable >
-        <CardCover slot="cover" qrcodeUrl={this.qrcodeUrl} coverImageUrl={this.work.cover_image_url} />
-        <template class="ant-card-actions" slot="actions">
-          {/** 编辑 */}
-          <a-tooltip effect="dark" placement="bottom" title={this.$t('workCard.edit')}>
-            <router-link to={{ name: 'editor', params: { workId: this.work.id } }} target="_blank">
-              <a-icon type="edit" title={this.$t('workCard.edit')}/>
-            </router-link>
-          </a-tooltip>
-          {/** 预览 */}
-          <a-tooltip effect="dark" placement="bottom" title={this.$t('workCard.preview')}>
-            <a-icon type="eye" title={this.$t('workCard.preview')} onClick={this.handleClickPreview} />
-          </a-tooltip>
-          {/** 删除 */}
-          <a-tooltip effect="dark" placement="bottom" title={this.$t('workCard.delete')}>
-            <a-icon type="delete" title={this.$t('workCard.delete')} onClick={this.handleDeleteWork} />
-          </a-tooltip>
-          {
-            this.qrcodeUrl
-              ? <a-icon type="close-circle" onClick={() => { this.qrcodeUrl = '' }} />
-              : <a-icon type="qrcode" onClick={() => this.genQRCodeUrl(this.work)} />
-          }
-          {/**
-          <a-icon type="setting" />
-          <a-icon type="ellipsis" />
-           */}
-        </template>
-        <a-card-meta
-        >
-          <div slot="title" class="ant-card-meta-title" style="font-size: 14px;">
-            {this.work.title}({this.work.id})
-          </div>
-          <div slot="description" style="font-size: 12px;">
-            {/** 描述 时间 */}
-            <div>{this.$t('workCard.description')}: {this.work.description}</div>
-            <div>{this.$t('workCard.createTime')}: {this.timeFmt(this.work.created_at)}</div>
-          </div>
-        </a-card-meta>
-      </a-card>
-    )
-  }
-}
-
-const AddNewCard = {
-  functional: true,
-  render (h, { props, parent }) {
-    return (
-      <a-card hoverable>
-        <div slot="cover" class="flex-center" style="height: 405px;background: #f7f5f557;" onClick={props.handleCreate}>
-          <a-icon type="plus" />
-        </div>
-        <template class="ant-card-actions" slot="actions">
-          {/** 创建新作品 */}
-          {/** https://kazupon.github.io/vue-i18n/guide/component.html#translation-in-functional-component */}
-          <span onClick={props.handleCreate}>{parent.$t('workCard.createNewWork')}</span>
-        </template>
-      </a-card>
-    )
-  }
-}
+import WorkList from './list-mixin'
  
 export default {
-  components: {
-    ListItemCard,
-    AddNewCard
-  },
   data: () => ({
-    activeWork: null,
-    previewVisible: false
   }),
-  computed: {
-    ...mapState('editor', ['works']),
-    ...mapState('loading', ['fetchWorks_loading'])
-  },
-  methods: {
-    ...mapActions('editor', [
-      'fetchWorks',
-      'createWork'
-    ])
-  },
   render (h) {
-    return (
-      <div class="works-wrapper">
-        <a-row gutter={12}>
-          <a-col span={6} style="margin-bottom: 10px;">
-            <AddNewCard handleCreate={this.createWork} />
-          </a-col>
-          {
-            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
-                    }}
-                    onDeleteSuccess={this.fetchWorks}
-                  />
-                </a-col>
-              ))
-          }
-        </a-row>
-        {
-          <PreviewDialog
-            work={this.activeWork || {}}
-            visible={this.previewVisible}
-            handleClose={() => { this.previewVisible = false }}
-          />
-        }
-      </div>
-    )
-  },
-  created () {
-    this.fetchWorks()
+    return <WorkList isTemplate={false} />
   }
 }
 </script>
 <script>
-import { mapState, mapActions } from 'vuex'
-import QRCode from 'qrcode'
-
-import PreviewDialog from 'core/editor/modals/preview.vue'
-import CardCover from '@/components/common/work/card-cover.js'
-
-const ListItemCard = {
-  props: {
-    work: {
-      type: Object,
-      default: () => {}
-    },
-    handleClickEdit: {
-      type: Function,
-      default: () => {}
-    },
-    handleClickPreview: {
-      type: Function,
-      default: () => {}
-    },
-    handleUseTemplate: {
-      type: Function,
-      default: () => {}
-    }
-  },
-  data: () => ({
-    qrcodeUrl: ''
-  }),
-  methods: {
-    timeFmt (date) {
-      const dateTime = new Date(date)
-      const displayTime = `${dateTime.getFullYear()}-${dateTime.getMonth() +
-        1}-${dateTime.getDate()}`
-      return displayTime
-    },
-    genQRCodeUrl (work) {
-      const url = `${window.location.origin}/works/preview/${work.id}`
-      QRCode.toDataURL(url, (err, url) => {
-        if (err) console.log(err)
-        this.qrcodeUrl = url
-      })
-    }
-  },
-  render (h) {
-    return (
-      <a-card hoverable >
-        <CardCover slot="cover" qrcodeUrl={this.qrcodeUrl} coverImageUrl={this.work.cover_image_url} />
-        <template class="ant-card-actions" slot="actions">
-          <a-tooltip effect="dark" placement="bottom" title={this.$t('workCard.useNow')}>
-            <a-icon type="plus-square" title={this.$t('workCard.useNow')} onClick={() => {
-              this.handleUseTemplate(this.work)
-            }} />
-          </a-tooltip>
-          {/** 预览 */}
-          <a-tooltip effect="dark" placement="bottom" title={this.$t('workCard.preview')}>
-            <a-icon type="eye" title={this.$t('workCard.preview')} onClick={this.handleClickPreview} />
-          </a-tooltip>
-          {
-            this.qrcodeUrl
-              ? <a-icon type="close-circle" onClick={() => { this.qrcodeUrl = '' }} />
-              : <a-icon type="qrcode" onClick={() => this.genQRCodeUrl(this.work)} />
-          }
-          {/**
-          <a-icon type="setting" />
-          <a-icon type="ellipsis" />
-           */}
-        </template>
-        <a-card-meta
-        >
-          <div slot="title" class="ant-card-meta-title" style="font-size: 14px;">
-            {this.work.title}({this.work.id})
-          </div>
-          <div slot="description" style="font-size: 12px;">
-            {/** 描述 时间 */}
-            <div>{this.$t('workCard.description')}: {this.work.description}</div>
-            <div>{this.$t('workCard.createTime')}: {this.timeFmt(this.work.created_at)}</div>
-          </div>
-        </a-card-meta>
-      </a-card>
-    )
-  }
-}
+import WorkList from './list-mixin'
  
 export default {
-  components: {
-    ListItemCard
-  },
   data: () => ({
-    activeWork: null,
-    previewVisible: false,
+    isTemplate: true,
     useTemplateDialogVisible: false,
     clonedWorkFromTemplate: null // 从某个模板复制出来的作品
   }),
-  computed: {
-    ...mapState('editor', ['works', 'workTemplates']),
-    ...mapState('loading', ['fetchWorkTemplates_loading'])
-  },
-  methods: {
-    ...mapActions('editor', [
-      'fetchWorks',
-      'fetchWorkTemplates',
-      'useTemplate'
-    ])
-  },
   render (h) {
-    return (
-      <div class="works-wrapper">
-        <a-row gutter={12}>
-          {
-            this.fetchWorkTemplates_loading
-              ? <a-col span={24} 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.workTemplates.map(work => (
-                <a-col span={6} key={work.id} style="margin-bottom: 20px;">
-                  <ListItemCard work={work}
-                    handleClickPreview={e => {
-                      this.previewVisible = true
-                      this.activeWork = work
-                    }}
-                    handleUseTemplate={templateWork => {
-                      this.useTemplateDialogVisible = true
-                      this.useTemplate(templateWork.id).then((clonedWork) => {
-                        this.clonedWorkFromTemplate = clonedWork
-                      })
-                    }}
-                  />
-                </a-col>
-              ))
-          }
-        </a-row>
-        {
-          <PreviewDialog
-            work={this.activeWork || {}}
-            visible={this.previewVisible}
-            handleClose={() => { this.previewVisible = false }}
-          />
-        }
-        {
-          this.useTemplateDialogVisible &&
-          <a-modal
-            visible={true}
-            // onOk={() => { this.useTemplateDialogVisible = true }}
-            // onCancel={() => { this.useTemplateDialogVisible = false }}
-            width="240px"
-            okText="保存"
-            footer={null}
-            closable={false}
-            centered
-          >
-            <div style="text-align: center;">
-              {
-                this.clonedWorkFromTemplate
-                  ? <div>
-                    <div style={{ margin: '12px' }}><a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" /> 模板已保存至"我的作品"中</div>
-                    <a-button onClick={() => {
-                      this.useTemplateDialogVisible = false
-                      this.clonedWorkFromTemplate = null
-                    }}>我再逛逛</a-button>
-                    <a-button type="primary"
-                      onClick={() => {
-                        const routeData = this.$router.resolve({ name: 'editor', params: { workId: this.clonedWorkFromTemplate.id } })
-                        window.open(routeData.href, '_blank')
-                      }}
-                      style={{ marginLeft: '12px' }}
-                    >立即查看</a-button>
-                  </div>
-                  : <a-spin tip="复制中" />
-              }
-            </div>
-          </a-modal>
-        }
-      </div>
-    )
-  },
-  created () {
-    this.fetchWorkTemplates()
+    return <WorkList isTemplate={this.isTemplate} />
   }
 }
 </script>