feat: support work template

ly525
1 parent 4aac184e
Showing 12 changed files with 350 additions and 23 deletions
back-end/h5-api/api/work/config/routes.json
back-end/h5-api/api/work/controllers/Work.js
back-end/h5-api/api/work/models/Work.js
back-end/h5-api/api/work/models/Work.settings.json
front-end/h5/src/components/core/editor/index.js
front-end/h5/src/router.js
front-end/h5/src/store/modules/editor.js
front-end/h5/src/store/modules/loading.js
front-end/h5/src/store/modules/work.js
front-end/h5/src/utils/http.js
front-end/h5/src/views/work-manager/index.vue
front-end/h5/src/views/work-manager/templates.vue
@@ -71,6 +71,22 @@
       "config": {
         "policies": []
       }
+    },
+    {
+      "method": "POST",
+      "path": "/works/set-as-template/:id",
+      "handler": "Work.setAsTemplate",
+      "config": {
+        "policies": []
+      }
+    },
+    {
+      "method": "POST",
+      "path": "/works/use-template/:id",
+      "handler": "Work.useTemplate",
+      "config": {
+        "policies": []
+      }
     }
   ]
 }
@@ -49,4 +49,20 @@ module.exports = {
     // eslint-disable-next-line require-atomic-updates
     return ctx.body = { uuidMap2Name, formDetails };
   },
+  setAsTemplate: async (ctx) => {
+    let work = await strapi.services.work.findOne(ctx.params);
+    work = work.toJSON();
+
+    // eslint-disable-next-line no-unused-vars
+    const templateWork = await strapi.services.work.create();
+    return strapi.services.work.update({id: templateWork.id}, { pages: work.pages, is_template: true });
+  },
+  useTemplate: async (ctx) => {
+    let templateWork = await strapi.services.work.findOne(ctx.params);
+    templateWork = templateWork.toJSON();
+
+    // eslint-disable-next-line no-unused-vars
+    const work = await strapi.services.work.create();
+    return strapi.services.work.update({id: work.id}, { pages: templateWork.pages, is_template: false });
+  },
 };
@@ -7,19 +7,19 @@
 module.exports = {
   // Before saving a value.
   // Fired before an `insert` or `update` query.
-  beforeSave: async (model, attrs, options) => {
-    // https://github.com/strapi/strapi/issues/2882
-    // need to remove this after this pr will be merged(https://github.com/strapi/strapi/pull/3664)
-    Object.keys(model.constructor.attributes).forEach(k => {
-      if (model.constructor.attributes[k].type === 'json') {
-        const value = model.get(k);
+  // beforeSave: async (model, attrs, options) => {
+  //   // https://github.com/strapi/strapi/issues/2882
+  //   // need to remove this after this pr will be merged(https://github.com/strapi/strapi/pull/3664)
+  //   Object.keys(model.constructor.attributes).forEach(k => {
+  //     if (model.constructor.attributes[k].type === 'json') {
+  //       const value = model.get(k);
-        if (Array.isArray(value)) {
-          model.set(k, JSON.stringify(value));
-        }
-      }
-    });
-  },
+  //       if (Array.isArray(value)) {
+  //         model.set(k, JSON.stringify(value));
+  //       }
+  //     }
+  //   });
+  // },
   // After saving a value.
   // Fired after an `insert` or `update` query.
@@ -48,6 +48,7 @@ module.exports = {
       elements: []
     }];
     model.set('pages', JSON.stringify(defaultPages));
+    model.set('is_template', false);
   },
   // After creating a value.
@@ -56,7 +57,17 @@ module.exports = {
   // Before updating a value.
   // Fired before an `update` query.
-  // beforeUpdate: async (model, attrs, options) => {},
+  // beforeUpdate: async (model, attrs, options) => {
+  //   Object.keys(model.constructor.attributes).forEach(k => {
+  //     if (model.constructor.attributes[k].type === 'json') {
+  //       const value = model.get(k);
+
+  //       if (Array.isArray(value)) {
+  //         model.set(k, JSON.stringify(value));
+  //       }
+  //     }
+  //   });
+  // },
   // After updating a value.
   // Fired after an `update` query.
@@ -35,10 +35,13 @@
     "update_time": {
       "type": "date"
     },
-    "pages": {
+    "formData": {
       "type": "json"
     },
-    "formData": {
+    "is_template": {
+      "type": "boolean"
+    },
+    "pages": {
       "type": "json"
     }
   }
@@ -100,7 +100,8 @@ export default {
       work: state => state.work
     }),
     ...mapState('loading', {
-      saveWork_loading: state => state.saveWork_loading
+      saveWork_loading: state => state.saveWork_loading,
+      setWorkAsTemplate_loading: state => state.setWorkAsTemplate_loading
     })
   },
   methods: {
@@ -109,8 +110,12 @@ export default {
       'pageManager',
       'saveWork',
       'createWork',
-      'fetchWork'
+      'fetchWork',
+      'setWorkAsTemplate'
     ]),
+    ...mapActions('loading', {
+      updateLoading: 'update'
+    }),
     /**
      * !#zh 点击插件，copy 其基础数据到组件树（中间画布）
      * #!en click the plugin shortcut, create new Element with the plugin's meta data
@@ -165,7 +170,29 @@ export default {
           >
             <a-menu-item key="1" class="transparent-bg"><a-button type="primary" size="small" onClick={() => { this.previewVisible = true }}>预览</a-button></a-menu-item>
             <a-menu-item key="2" class="transparent-bg"><a-button size="small" onClick={() => this.saveWork()} loading={this.saveWork_loading}>保存</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"><a-button size="small">发布</a-button></a-menu-item> */}
+            <a-menu-item key="3" class="transparent-bg">
+              <a-dropdown-button onClick={() => {}} size="small">
+                发布
+                <a-menu slot="overlay" onClick={({ key }) => {
+                  switch (key) {
+                    case 'setAsTemplate':
+                      this.updateLoading({ type: 'setWorkAsTemplate_loading', value: true })
+                      this.saveWork().then(() => {
+                        this.setWorkAsTemplate()
+                      })
+                  }
+                }}>
+                  <a-menu-item key="setAsTemplate">
+                    <a-spin spinning={this.setWorkAsTemplate_loading} size="small">
+                      <a-icon type="cloud-upload" />设置为模板
+                    </a-spin>
+                  </a-menu-item>
+                  {/* <a-menu-item key="2"><a-icon type="user" />2nd menu item</a-menu-item> */}
+                  {/* <a-menu-item key="3"><a-icon type="user" />3rd item</a-menu-item> */}
+                </a-menu>
+              </a-dropdown-button>
+            </a-menu-item>
           </a-menu>
           <ExternalLinksOfHeader />
         </a-layout-header>
@@ -21,6 +21,11 @@ export default new Router({
           component: () => import('@/views/work-manager/list.vue')
         },
         {
+          path: '/work-manager/templates',
+          name: 'work-manager-templates',
+          component: () => import('@/views/work-manager/templates.vue')
+        },
+        {
           path: '/work-manager/form-stat',
           name: 'form-stat',
           component: () => import('@/views/work-manager/form-stat/index.vue')
@@ -13,7 +13,8 @@ const state = {
   formDetailOfWork: {
     uuidMap2Name: {},
     formDetails: []
-  }
+  },
+  workTemplates: []
 }
 // getters
 // initial state
 const state = {
   saveWork_loading: false,
-  fetchWorks_loading: false
+  fetchWorks_loading: false,
+  setWorkAsTemplate_loading: false,
+  fetchWorkTemplates_loading: false,
+  useTemplate_loading: false
 }
 // getters
@@ -13,6 +13,7 @@ export const actions = {
   },
   createWork ({ commit }, payload) {
     strapi.createEntry('works').then(entry => {
+      commit('setWork', entry)
       router.replace({ name: 'editor', params: { workId: entry.id } })
       // window.location = `${window.location.origin}/#/editor/${entry.id}`
     })
@@ -35,7 +36,7 @@ export const actions = {
       ...payload
     }
-    new AxiosWrapper({
+    return new AxiosWrapper({
       dispatch,
       commit,
       loading_name: 'saveWork_loading',
@@ -57,7 +58,17 @@ export const actions = {
       loading_name: 'fetchWorks_loading',
       successMsg: '获取作品列表成功',
       customRequest: strapi.getEntries.bind(strapi)
-    }).get('works', {})
+    }).get('works', { is_template: false })
+  },
+  fetchWorkTemplates ({ commit, dispatch, state }, workId) {
+    new AxiosWrapper({
+      dispatch,
+      commit,
+      name: 'editor/setWorkTemplates',
+      loading_name: 'fetchWorkTemplates_loading',
+      successMsg: '获取模板列表成功',
+      customRequest: strapi.getEntries.bind(strapi)
+    }).get('works', { is_template: true })
   },
   /**
    *
@@ -128,6 +139,24 @@ export const actions = {
       loading_name: 'queryFormsOfWork_loading',
       successMsg: '表单查询完毕'
     }).get(`/works/form/query/${workId}`)
+  },
+  setWorkAsTemplate ({ commit, state, dispatch }, workId) {
+    new AxiosWrapper({
+      dispatch,
+      commit,
+      // name: 'editor/formDetailOfWork',
+      loading_name: 'setWorkAsTemplate_loading',
+      successMsg: '设置为模板成功'
+    }).post(`/works/set-as-template/${workId || state.work.id}`)
+  },
+  useTemplate ({ commit, state, dispatch }, workId) {
+    return new AxiosWrapper({
+      dispatch,
+      commit,
+      // name: 'editor/formDetailOfWork',
+      loading_name: 'useTemplate_loading',
+      successMsg: '使用模板成功'
+    }).post(`/works/use-template/${workId}`)
   }
 }
@@ -143,6 +172,16 @@ export const mutations = {
     value.sort((a, b) => b.id - a.id)
     state.works = value
   },
+  /**
+   * payload: {
+   *  type:   @params {String} "editor/setWorks",
+   *  value:  @params {Array}  work list
+   * }
+   */
+  setWorkTemplates (state, { type, value }) {
+    value.sort((a, b) => b.id - a.id)
+    state.workTemplates = value
+  },
   setWork (state, work) {
     window.__work = work
     work.pages = work.pages.map(page => {
@@ -43,6 +43,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 })
+        })
+        .finally(() => this.setLoadingValue(false))
+    }
     return this.instance.get(...args).then(response => {
       const handler = this.getCommonResponseHandler({ failMsg: 'Query Failed.' })
       handler.call(this, response)
@@ -59,6 +67,7 @@ export class AxiosWrapper {
     return this.instance.post(...args).then(response => {
       const handler = this.getCommonResponseHandler({ failMsg: 'Save Failed.' })
       handler.call(this, response)
+      return response.data
     }).catch(error => {
       // handle error
       myMessage.error(error.message)
@@ -38,7 +38,8 @@ const sidebarMenus = [
         label: '免费模板',
         value: 'freeTemplates',
         antIcon: 'snippets',
-        key: '3-1'
+        key: '3-1',
+        routerName: 'work-manager-templates'
       }
     ]
   },
+<script>
+import { mapState, mapActions } from 'vuex'
+import QRCode from 'qrcode'
+
+import { API_ORIGIN } from '@/constants/api.js'
+import PreviewDialog from '@/components/core/editor/modals/preview.vue'
+
+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 = `${API_ORIGIN}/works/preview/${work.id}`
+      QRCode.toDataURL(url, (err, url) => {
+        if (err) console.log(err)
+        this.qrcodeUrl = url
+      })
+    }
+  },
+  render (h) {
+    return (
+      <a-card hoverable >
+        <div slot="cover" class="flex-center" style="height: 200px;font-size: 24px;border: 1px dashed #eee;color: #aaa;background: #f7f5f557;" >
+          { this.qrcodeUrl ? <img src={this.qrcodeUrl} /> : <span>Luban H5</span> }
+        </div>
+        <template class="ant-card-actions" slot="actions">
+          {/**
+          <router-link to={{ name: 'editor', params: { workId: this.work.id } }} target="_blank">
+            <a-tooltip effect="dark" placement="bottom" title="立即使用">
+              <a-icon type="plus-square" title="立即使用"/>
+            </a-tooltip>
+          </router-link>
+          */}
+          <a-tooltip effect="dark" placement="bottom" title="立即使用">
+            <a-icon type="plus-square" title="立即使用" onClick={() => {
+              this.handleUseTemplate(this.work)
+            }} />
+          </a-tooltip>
+          <a-tooltip effect="dark" placement="bottom" title="预览">
+            <a-icon type="eye" title="预览" 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.work.description}</div>
+            <div>时间：{this.timeFmt(this.work.created_at)}</div>
+          </div>
+        </a-card-meta>
+      </a-card>
+    )
+  }
+}
+
+export default {
+  components: {
+    ListItemCard
+  },
+  data: () => ({
+    activeWork: null,
+    previewVisible: false,
+    useTemplateDialogVisible: false,
+    clonedWorkFromTemplate: null // 从某个模板复制出来的作品
+  }),
+  computed: {
+    ...mapState('editor', ['works', 'workTemplates']),
+    ...mapState('loading', ['fetchWorks_loading'])
+  },
+  methods: {
+    ...mapActions('editor', [
+      'fetchWorks',
+      'fetchWorkTemplates',
+      'useTemplate'
+    ]),
+    deleteWork (item) {
+      // TODO delete work from work list
+    },
+    createWork () {
+      this.$router.push({ name: 'editor' })
+      // window.open('#/editor', '_blank')
+    }
+  },
+  render (h) {
+    return (
+      <div class="works-wrapper">
+        <a-row gutter={24}>
+          {
+            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>
+        {
+          this.previewVisible &&
+          <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()
+  }
+}
+</script>