feat(work): delete work; #!zh: 支持删除作品

ly525
1 parent 18f9081a
Showing 7 changed files with 57 additions and 15 deletions
front-end/h5/src/components/core/store/modules/loading.js
front-end/h5/src/locales/lang/en-US.js
front-end/h5/src/locales/lang/zh-CN.js
front-end/h5/src/store/modules/work.js
front-end/h5/src/utils/http.js
front-end/h5/src/views/work-manager/list.vue
front-end/h5/src/views/work-manager/templates.vue
@@ -16,7 +16,8 @@ const state = {
   setWorkAsTemplate_loading: false,
   fetchWorkTemplates_loading: false,
   useTemplate_loading: false,
-  uploadWorkCover_loading: false
+  uploadWorkCover_loading: false,
+  deleteWork_loading: false
 }
 // getters
@@ -22,8 +22,10 @@ export default {
     useNow: 'Use it Now',
     preview: 'Preview',
     edit: 'Edit',
+    delete: 'Delete',
     createNewWork: 'Create New',
-    view: 'View Work'
+    view: 'View Work',
+    confirmDeleteTip: 'Confirm Delete {tip}?'
   },
   basicData: {
     viewData: 'View Data'
@@ -33,7 +33,9 @@ export default {
     preview: '预览',
     createNewWork: '创建新作品',
     edit: '编辑',
-    view: '查看作品'
+    delete: '删除',
+    view: '查看作品',
+    confirmDeleteTip: '确认删除 {tip}？'
   },
   basicData: {
     viewData: '查看数据'
@@ -50,6 +50,16 @@ export const actions = {
       // router.replace({ name: 'editor', params: { workId: entry.id } })
     }).catch(handleError)
   },
+  deleteWork ({ commit, dispatch, state }, workId) {
+    return new AxiosWrapper({
+      dispatch,
+      commit,
+      loading_name: 'deleteWork_loading',
+      successMsg: '删除作品成功',
+      customRequest: strapi.deleteEntry.bind(strapi)
+    }).delete('works', workId).catch(handleError)
+    // return strapi.deleteEntry('works', workId)
+  },
   updateWork ({ commit, state }, payload = {}) {
     // update work with strapi
     const work = {
@@ -98,6 +98,14 @@ export class AxiosWrapper {
     this.setDefaultLoadingName(args)
     this.setLoadingValue(true)
+    if (this.customRequest) {
+      return this.customRequest(...args)
+        .then(data => {
+          const handler = this.getCommonResponseHandler({ failMsg: 'Save Failed.' })
+          handler.call(this, { status: 200, data: { data } })
+        })
+        .finally(() => this.setLoadingValue(false))
+    }
     return this.instance.delete(...args).then(response => {
       const handler = this.getCommonResponseHandler({ failMsg: 'Save Failed.' })
       handler.call(this, response)
@@ -24,6 +24,9 @@ const ListItemCard = {
     qrcodeUrl: ''
   }),
   methods: {
+    ...mapActions('editor', [
+      'deleteWork'
+    ]),
     timeFmt (date) {
       const dateTime = new Date(date)
       const displayTime = `${dateTime.getFullYear()}-${dateTime.getMonth() +
@@ -36,6 +39,20 @@ const ListItemCard = {
         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) {
@@ -53,6 +70,10 @@ const ListItemCard = {
           <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 = '' }} />
@@ -114,10 +135,7 @@ export default {
     ...mapActions('editor', [
       'fetchWorks',
       'createWork'
-    ]),
-    deleteWork (item) {
-      // TODO delete work from work list
-    }
+    ])
   },
   render (h) {
     return (
@@ -133,10 +151,14 @@ export default {
               </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
-                  }} />
+                  <ListItemCard
+                    work={work}
+                    handleClickPreview={e => {
+                      this.previewVisible = true
+                      this.activeWork = work
+                    }}
+                    onDeleteSuccess={this.fetchWorks}
+                  />
                 </a-col>
               ))
           }
@@ -101,10 +101,7 @@ export default {
       'fetchWorks',
       'fetchWorkTemplates',
       'useTemplate'
-    ]),
-    deleteWork (item) {
-      // TODO delete work from work list
-    }
+    ])
   },
   render (h) {
     return (