feat(#30): collect and show form data

ly525
1 parent 16f173df
Showing 11 changed files with 340 additions and 11 deletions
back-end/h5-api/api/work/config/routes.json
back-end/h5-api/api/work/controllers/Work.js
front-end/h5/src/router.js
front-end/h5/src/store/modules/editor.js
front-end/h5/src/store/modules/work.js
front-end/h5/src/utils/http.js
front-end/h5/src/views/work-manager/form-stat.vue
front-end/h5/src/views/work-manager/form-stat/column.js
front-end/h5/src/views/work-manager/form-stat/detail.vue
front-end/h5/src/views/work-manager/form-stat/index.vue
front-end/h5/src/views/work-manager/index.vue
@@ -63,6 +63,14 @@
       "config": {
         "policies": []
       }
+    },
+    {
+      "method": "GET",
+      "path": "/works/form/query/:id",
+      "handler": "Work.queryFormsOfOneWork",
+      "config": {
+        "policies": []
+      }
     }
   ]
 }
@@ -21,4 +21,32 @@ module.exports = {
     // eslint-disable-next-line require-atomic-updates
     ctx.body = { message: 'success', status: 0 };
   },
+  queryFormsOfOneWork: async (ctx) => {
+    // move to util module or front-end
+    function getUuidMap2Name(work) {
+      const uuidMap2Name = {};
+      work.pages.forEach(page => {
+        page.elements.forEach(ele => {
+          if (ele.name === 'lbp-form-input') {
+            uuidMap2Name[ele.uuid] = ele.pluginProps.placeholder;
+          }
+        });
+      });
+      return uuidMap2Name;
+    }
+
+    let work = await strapi.services.work.findOne(ctx.params);
+    work = work.toJSON();
+
+    // learn the query from: https://github.com/strapi/foodadvisor/blob/master/api/api/restaurant/controllers/Restaurant.js#L40
+    // eslint-disable-next-line no-undef
+    let formDetails = await Workform.query(qb => {
+      qb.where('work', '=', work.id);
+    }).fetchAll();
+    formDetails = formDetails.toJSON();
+
+    const uuidMap2Name = getUuidMap2Name(work);
+    // eslint-disable-next-line require-atomic-updates
+    return ctx.body = { uuidMap2Name, formDetails };
+  },
 };
@@ -23,7 +23,12 @@ export default new Router({
         {
           path: '/work-manager/form-stat',
           name: 'form-stat',
-          component: () => import('@/views/work-manager/form-stat.vue')
+          component: () => import('@/views/work-manager/form-stat/index.vue')
+        },
+        {
+          path: '/work-manager/stat-detail/:id',
+          name: 'stat-detail',
+          component: () => import('@/views/work-manager/form-stat/detail.vue')
         }
       ]
     },
@@ -9,7 +9,11 @@ const state = {
   work: new Work(),
   editingPage: { elements: [] },
   editingElement: null,
-  editingElementEditorConfig: null
+  editingElementEditorConfig: null,
+  formDetailOfWork: {
+    uuidMap2Name: {},
+    formDetails: []
+  }
 }
 // getters
@@ -37,6 +37,7 @@ export const actions = {
     new AxiosWrapper({
       dispatch,
+      commit,
       loading_name: 'saveWork_loading',
       successMsg: '保存作品成功',
       customRequest: strapi.updateEntry.bind(strapi)
@@ -52,6 +53,76 @@ export const actions = {
     strapi.getEntries('works', {}).then(entries => {
       commit('setWorks', entries)
     })
+  },
+  /**
+   *
+   * @param {*} workId
+   * response demo:
+   {
+    "uuidMap2Name": {
+        "1565596393441": "姓名",
+        "1565596397671": "学校"
+    },
+    "formDetails": [
+        {
+            "id": 3,
+            "form": {
+                "1565369322603": "abc"
+            },
+            "work": 8,
+            "created_at": "2019-08-09T16:52:28.826Z",
+            "updated_at": "2019-08-09T16:52:28.832Z"
+        },
+        {
+            "id": 4,
+            "form": {
+                "1565595388440": "ddd"
+            },
+            "work": 8,
+            "created_at": "2019-08-11T07:36:54.521Z",
+            "updated_at": "2019-08-11T07:36:54.526Z"
+        },
+        {
+            "id": 5,
+            "form": {
+                "1565595388440": "acd"
+            },
+            "work": 8,
+            "created_at": "2019-08-11T07:45:22.000Z",
+            "updated_at": "2019-08-11T07:45:22.005Z"
+        },
+        {
+            "id": 6,
+            "form": {
+                "1565596393441": "b",
+                "1565596397671": "a"
+            },
+            "work": 8,
+            "created_at": "2019-08-11T07:59:00.938Z",
+            "updated_at": "2019-08-11T07:59:00.943Z"
+        },
+        {
+            "id": 7,
+            "form": {
+                "1565596393441": "b",
+                "1565596397671": "a"
+            },
+            "work": 8,
+            "created_at": "2019-08-11T07:59:37.065Z",
+            "updated_at": "2019-08-11T07:59:37.070Z"
+        }
+      ]
+    }
+   */
+  fetchFormsOfWork ({ commit, state, dispatch }, workId) {
+    // TODO 考虑 return Promise
+    new AxiosWrapper({
+      dispatch,
+      commit,
+      name: 'editor/formDetailOfWork',
+      loading_name: 'queryFormsOfWork_loading',
+      successMsg: '表单查询完毕'
+    }).get(`/works/form/query/${workId}`)
   }
 }
@@ -72,5 +143,8 @@ export const mutations = {
   //   state.work = new Work()
   // },
   previewWork (state, { type, value }) {},
-  deployWork (state, { type, value }) {}
+  deployWork (state, { type, value }) {},
+  formDetailOfWork (state, { type, value }) {
+    state.formDetailOfWork = value
+  }
 }
@@ -17,13 +17,14 @@ export const baseClient = axios.create({
 export class AxiosWrapper {
   // eslint-disable-next-line camelcase
-  constructor ({ name = 'default', loading_name, responseType = 'json', headers, dispatch, router, successMsg, failMsg, successCallback, failCallback, customRequest }) {
+  constructor ({ name = 'default', loading_name, responseType = 'json', headers, dispatch, commit, router, successMsg, failMsg, successCallback, failCallback, customRequest }) {
     this.name = name
     // eslint-disable-next-line camelcase
     this.loading_name = loading_name
     // eslint-disable-next-line camelcase
     this.responseType = responseType
     this.dispatch = dispatch
+    this.commit = commit
     this.router = router
     this.successMsg = successMsg
     this.failMsg = failMsg
@@ -80,7 +81,7 @@ export class AxiosWrapper {
       return this.customRequest(...args)
         .then(data => {
           const handler = this.getCommonResponseHandler({ failMsg: 'Save Failed.' })
-          handler.call(this, { data: { status: 200, data } })
+          handler.call(this, { status: 200, data: { data } })
         })
         .finally(() => this.setLoadingValue(false))
     }
@@ -112,7 +113,8 @@ export class AxiosWrapper {
   }
   setLoadingValue (payload) {
-    this.dispatch('loading/update', { type: this.loading_name, payload }, { root: true })
+    // this.dispatch('loading/update', { type: this.loading_name, payload }, { root: true })
+    this.commit('loading/update', { type: this.loading_name, payload }, { root: true })
   }
   setDefaultLoadingName (...args) {
@@ -134,16 +136,16 @@ export class AxiosWrapper {
     return (response) => {
       if (!response.data) {
         myMessage.warn(this.failMsg || failMsg)
-      } else if (response.data.status === 200) {
+      } else if (response.status === 200) {
         this.successMsg && myMessage.success(this.successMsg)
         if (this.successCallback) {
           this.successCallback(response)
         } else {
-          // this.dispatch({ type: this.name, payload: response.data.data })
+          this.commit({ type: this.name, value: response.data }, { root: true })
         }
       } else if (this.responseType === 'json') {
         myMessage.error(response.data.msg)
-        if (response.data.status === 401) {
+        if (response.status === 401) {
           if (this.router) {
             this.router.push('/login')
           }
+export const columns = [
+  {
+    title: '标题',
+    dataIndex: 'title',
+    key: 'title'
+  },
+  {
+    title: 'PV',
+    dataIndex: 'pv',
+    key: 'pv'
+  },
+  {
+    title: 'Uv',
+    dataIndex: 'uv',
+    key: 'uv'
+  },
+  {
+    title: '表单数',
+    key: 'formCount',
+    dataIndex: 'formCount'
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    scopedSlots: { customRender: 'action' }
+  }
+]
+
+export const data = [
+  {
+    key: '1',
+    title: 'John Brown',
+    pv: 32,
+    uv: 32,
+    formCount: 2
+  },
+  {
+    key: '2',
+    title: 'John Brown2',
+    pv: 32,
+    uv: 32,
+    formCount: 2
+  },
+  {
+    key: '3',
+    title: 'John Brown3',
+    pv: 32,
+    uv: 32,
+    formCount: 2
+  }
+]
+<script>
+/**
+ * [基础数据](/work-manager/form-stat) 对应的页面
+ *
+ */
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  components: {
+  },
+  data: () => ({
+    activeWork: null,
+    previewVisible: false
+  }),
+  computed: {
+    ...mapState('editor', ['works', 'formDetailOfWork']),
+    computedWorks () {
+      return this.works.map(w => ({
+        id: w.id,
+        title: w.title,
+        pv: w.pv || 0,
+        uv: w.uv || 0,
+        formCount: w.formCount || 0
+      }))
+    },
+    /**
+     * columns demo: [{"1565369322603":"abc"},{"1565595388440":"ddd"},{"1565595388440":"acd"},{"1565596393441":"b","1565596397671":"a"},{"1565596393441":"b","1565596397671":"a"}]
+     */
+    columns () {
+      const { uuidMap2Name } = this.formDetailOfWork
+      // the uuid for input plugin
+      return Object.entries(uuidMap2Name).map(([uuid, inputName]) => ({
+        title: inputName,
+        key: `uuid-${uuid}`,
+        dataIndex: `uuid-${uuid}`
+      }))
+    },
+    /**
+     * rows demo: [{"title":"姓名","key":"1565596393441"},{"title":"学校","key":"1565596397671"}]
+     *
+     * formDetails example: <[{
+        "id": 4,
+        "form": {
+          "1565595388440": "ddd",
+          1234: 'abc'
+        },
+        "work": 8,
+        "created_at": "2019-08-11T07:36:54.521Z",
+        "updated_at": "2019-08-11T07:36:54.526Z"
+      }]>
+    */
+    rows () {
+      const { formDetails, uuidMap2Name } = this.formDetailOfWork
+      const rows = formDetails.map(({ form, id }) => {
+        const row = {}
+        Object.entries(form).forEach(([uuid, inputValue = '-']) => {
+          if (uuidMap2Name[uuid]) {
+            row[`uuid-${uuid}`] = inputValue
+            row.id = id
+          }
+        })
+        return row
+      })
+      return rows.filter(row => Object.keys(row).length)
+    }
+  },
+  methods: {
+    ...mapActions('editor', [
+      'fetchWorks',
+      'fetchFormsOfWork'
+    ]),
+    deleteWork (item) {
+      // TODO delete work from work list
+    },
+    createWork () {
+      this.$router.push({ name: 'editor' })
+    }
+  },
+  render (h) {
+    return (
+      <div class="works-wrapper">
+        <a-table columns={this.columns} dataSource={this.rows} row-key="id" scopedSlots={{
+          action: function (props) {
+            return [<router-link to={{ name: 'stat-detail', params: { id: props.id } }} >查看数据</router-link>]
+          }
+        }}>
+        </a-table>
+      </div>
+    )
+  },
+  created () {
+    // this.fetchWorks()
+    const workId = this.$route.params.id
+    this.fetchFormsOfWork(workId)
+  }
+}
+</script>
+<script>
+/**
+ * [基础数据](/work-manager/form-stat) 对应的页面
+ *
+ */
+import { mapState, mapActions } from 'vuex'
+import { columns } from './column'
+
+export default {
+  components: {
+  },
+  data: () => ({
+    activeWork: null,
+    previewVisible: false
+  }),
+  computed: {
+    ...mapState('editor', ['works']),
+    computedWorks () {
+      return this.works.map(w => ({
+        id: w.id,
+        title: w.title,
+        pv: w.pv || 0,
+        uv: w.uv || 0,
+        formCount: w.formCount || 0
+      }))
+    }
+  },
+  methods: {
+    ...mapActions('editor', [
+      'fetchWorks'
+    ]),
+    deleteWork (item) {
+      // TODO delete work from work list
+    },
+    createWork () {
+      this.$router.push({ name: 'editor' })
+    }
+  },
+  render (h) {
+    return (
+      <div class="works-wrapper">
+        <a-table columns={columns} dataSource={this.computedWorks} row-key="id" scopedSlots={{
+          action: function (props) {
+            return [<router-link to={{ name: 'stat-detail', params: { id: props.id } }} >查看数据</router-link>]
+          }
+        }}>
+        </a-table>
+      </div>
+    )
+  },
+  created () {
+    this.fetchWorks()
+  }
+}
+</script>
@@ -20,7 +20,8 @@ const sidebarMenus = [
         label: '基础数据',
         value: 'basicData',
         antIcon: 'snippets',
-        key: '2-1'
+        key: '2-1',
+        routerName: 'form-stat'
       },
       {
         label: '表单统计',
@@ -89,7 +90,11 @@ export default {
                     ? <a-sub-menu key={menu.key}>
                       <span slot="title"><a-icon type={menu.antIcon} />{menu.label}</span>
                       {
-                        (menu.children).map(submenu => (<a-menu-item key={submenu.key}>{submenu.label}</a-menu-item>))
+                        (menu.children).map(submenu => (
+                          <a-menu-item key={submenu.key}>
+                            { submenu.routerName ? <router-link to={{ name: submenu.routerName }}>{submenu.label}</router-link> : submenu.label }
+                          </a-menu-item>
+                        ))
                       }
                     </a-sub-menu>
                     : <a-menu-item key={menu.key}>