feat: add work list page

ly525
1 parent 13edea6e
Showing 9 changed files with 324 additions and 23 deletions
front-end/h5/src/components/core/editor/index.js
front-end/h5/src/components/core/editor/modals/preview.vue
front-end/h5/src/components/core/styles/index.scss
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/views/work-manager/form-stat.vue
front-end/h5/src/views/work-manager/index.vue
front-end/h5/src/views/work-manager/list.vue
@@ -42,7 +42,8 @@ export default {
     ...mapState('editor', {
       editingElement: state => state.editingElement,
       elements: state => state.editingPage.elements,
-      pages: state => state.work.pages
+      pages: state => state.work.pages,
+      work: state => state.work
     }),
     ...mapState('loading', {
       saveWork_loading: state => state.saveWork_loading
@@ -98,7 +99,7 @@ export default {
   },
   render (h) {
     return (
-      <a-layout id="luban-layout" style={{ height: '100vh' }}>
+      <a-layout id="luban-editor-layout" style={{ height: '100vh' }}>
         <a-layout-header class="header">
           <div class="logo">鲁班 H5</div>
           {/* TODO we can show the plugins shortcuts here */}
@@ -190,14 +191,16 @@ export default {
             </a-tabs>
           </a-layout-sider>
         </a-layout>
-        <PreviewDialog visible={this.previewVisible} handleClose={() => { this.previewVisible = false }} />
+        {
+          this.previewVisible && <PreviewDialog work={this.work} visible={this.previewVisible} handleClose={() => { this.previewVisible = false }} />
+        }
       </a-layout>
     )
   },
   created () {
-    let workId = this.$route.query.workId
+    let workId = this.$route.params.workId
+    console.log(workId)
     if (workId) {
-      // this.$store.dispatch('getWorkById', workId)
       this.fetchWork(workId)
     } else {
       this.createWork()
 <script>
-import { mapActions, mapState } from 'vuex'
+import { mapActions } from 'vuex'
 import QRCode from 'qrcode'
 import { API_ORIGIN } from '../../../../constants/api.js'
  
@@ -12,12 +12,16 @@ export default {
     handleClose: {
       type: Function,
       default: () => {}
+    },
+    work: {
+      type: Object,
+      default: () => {}
     }
   },
   computed: {
-    ...mapState('editor', {
-      work: state => state.work
-    }),
+    // ...mapState('editor', {
+    //   work: state => state.work
+    // }),
     releaseUrl () {
       return `${API_ORIGIN}/works/preview/${this.work.id}`
     }
-#luban-layout  {
+#luban-editor-layout,
+#luban-work-manager-layout  {
   .header {
     padding: 0 10px;
  
@@ -92,4 +93,10 @@
  
 .no-border {
   border: none !important;
+}
+
+.flex-center {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
 }
 \ No newline at end of file
 import Vue from 'vue'
 import Router from 'vue-router'
 // import Home from './views/Home.vue'
+import Home from './views/work-manager/index.vue'
  
 Vue.use(Router)
  
 export default new Router({
+  // mode: 'history',
   routes: [
-    // {
-    //   path: '/',
-    //   name: 'home',
-    //   component: Home
-    // },
+    {
+      path: '/work-manager',
+      component: Home,
+      name: 'work-manager',
+      redirect: '/work-manager/list',
+      alias: '/',
+      children: [
+        {
+          path: '/work-manager/list',
+          name: 'work-manager-list',
+          component: () => import('@/views/work-manager/list.vue')
+        },
+        {
+          path: '/work-manager/form-stat',
+          name: 'form-stat',
+          component: () => import('@/views/work-manager/form-stat.vue')
+        }
+      ]
+    },
     {
       path: '/about',
       name: 'about',
       component: () => import('./views/About.vue')
     },
     {
-      path: '/', // #!zh 编辑器页面，核心功能部分
+      path: '/editor/:workId', // #!zh 编辑器页面，核心功能部分
       name: 'editor',
       component: () => import('./views/Editor.vue')
-    },
-    {
-      path: '/form-stat', // #!zh 表单统计页面
-      name: 'form-stat',
-      component: () => import('./views/About.vue')
     }
   ]
 })
@@ -5,6 +5,7 @@ import { actions as elementActions, mutations as elementMutations } from &#39;./elem
 import { actions as workActions, mutations as workMutations } from './work'
  
 const state = {
+  works: [],
   work: new Work(),
   editingPage: { elements: [] },
   editingElement: null,
-// import Work from '../../components/core/models/work'
 import Element from '../../components/core/models/element'
 import strapi from '../../utils/strapi'
 import Page from '../../components/core/models/page'
 import { AxiosWrapper } from '../../utils/http.js'
+import router from '@/router.js'
  
 export const actions = {
   previewWork ({ commit }, payload = {}) {
@@ -13,7 +13,8 @@ export const actions = {
   },
   createWork ({ commit }, payload) {
     strapi.createEntry('works').then(entry => {
-      window.location = `${window.location.origin}/#/?workId=${entry.id}`
+      router.replace({ name: 'editor', params: { workId: entry.id } })
+      // window.location = `${window.location.origin}/#/editor/${entry.id}`
     })
     // commit('createWork')
     // commit('pageManager', { type: 'add' })
@@ -46,11 +47,19 @@ export const actions = {
       commit('setWork', entry)
       commit('setEditingPage')
     })
+  },
+  fetchWorks ({ commit, state }, workId) {
+    strapi.getEntries('works', {}).then(entries => {
+      commit('setWorks', entries)
+    })
   }
 }
  
 // mutations
 export const mutations = {
+  setWorks (state, works) {
+    state.works = works
+  },
   setWork (state, work) {
     work.pages = work.pages.map(page => {
       page.elements = page.elements.map(element => new Element(element))
+<script>
+// import PreView from '@/pages/preview';
+// import Sidebar from './components/sidebar.vue'
+import '@/components/core/styles/index.scss'
+
+const sidebarMenus = [
+  {
+    label: '我的作品',
+    value: 'workManager',
+    antIcon: 'bars',
+    key: '1'
+  },
+  {
+    label: '数据中心',
+    value: 'dataCenter',
+    antIcon: 'snippets',
+    key: '2',
+    children: [
+      {
+        label: '基础数据',
+        value: 'basicData',
+        antIcon: 'snippets',
+        key: '2-1'
+      },
+      {
+        label: '表单统计',
+        value: 'formData',
+        antIcon: 'snippets',
+        key: '2-2'
+      }
+    ]
+  },
+  {
+    label: '模板中心',
+    value: 'templateCenter',
+    antIcon: 'snippets',
+    key: '3',
+    children: [
+      {
+        label: '免费模板',
+        value: 'freeTemplates',
+        antIcon: 'snippets',
+        key: '3-1'
+      }
+    ]
+  },
+  {
+    label: '账号中心',
+    value: 'freeTemplate',
+    antIcon: 'appstore',
+    key: '4'
+  }
+]
+
+export default {
+  components: {
+    // PreView,
+    // Sidebar
+  },
+  render (h) {
+    return (
+      <a-layout id="luban-work-manager-layout" style={{ height: '100vh' }}>
+        <a-layout-header class="header">
+          <div class="logo">鲁班 H5</div>
+          {/* TODO we can show the plugins shortcuts here */}
+          <a-dropdown style={{ float: 'right', background: 'transparent', margin: '16px 28px 16px 0' }}>
+            <a-menu slot="overlay" onClick={() => {}}>
+              <a-menu-item key="1">
+                <span>someone@luban</span>
+              </a-menu-item>
+              <a-menu-divider />
+              <a-menu-item key="2"><a-icon type="setting" />账号设置</a-menu-item>
+              <a-menu-item key="3"><a-icon type="logout" />退出登录</a-menu-item>
+            </a-menu>
+            <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+          </a-dropdown>
+        </a-layout-header>
+        <a-layout>
+          <a-layout-sider width="160" style="background: #fff">
+            <a-menu
+              mode="inline"
+              // defaultSelectedKeys={['1']}
+              defaultOpenKeys={['1', '2', '3']}
+              style="height: 100%"
+            >
+              {
+                sidebarMenus.map(menu => (
+                  menu.children
+                    ? <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>))
+                      }
+                    </a-sub-menu>
+                    : <a-menu-item key={menu.key}>
+                      <a-icon type={menu.antIcon} />
+                      <span>{menu.label}</span>
+                    </a-menu-item>
+                ))
+              }
+            </a-menu>
+          </a-layout-sider>
+          <a-layout style="padding: 0 24px 24px">
+            <a-layout-content style={{ padding: '24px', margin: 0, minHeight: '280px' }}>
+              <router-view />
+            </a-layout-content>
+          </a-layout>
+        </a-layout>
+        {/** <PreviewDialog visible={this.previewVisible} handleClose={() => { this.previewVisible = false }} /> */}
+      </a-layout>)
+  }
+}
+</script>
+<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: () => {}
+    }
+  },
+  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">
+          <a-tooltip effect="dark" placement="bottom" title="编辑">
+            <router-link to={{ name: 'editor', params: { workId: this.work.id }}} target="_blank">
+              <a-icon type="edit" title="编辑"/>
+            </router-link>
+          </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>
+    )
+  }
+}
+
+const AddNewCard = {
+  functional: true,
+  render (h, { props }) {
+    return (
+      <a-card hoverable>
+        <div slot="cover" class="flex-center" style="height: 305px;background: #f7f5f557;" onClick={props.handleCreate}>
+          <a-icon type="plus" />
+        </div>
+        <template class="ant-card-actions" slot="actions">
+          <span onClick={props.handleCreate}>创建新作品</span>
+        </template>
+      </a-card>
+    )
+  }
+}
+
+export default {
+  components: {
+    ListItemCard,
+    AddNewCard
+  },
+  data: () => ({
+    activeWork: null,
+    previewVisible: false
+  }),
+  computed: {
+    ...mapState('editor', ['works'])
+  },
+  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-row gutter={24}>
+          <a-col span={6} style="margin-bottom: 10px;">
+            <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
+                }} />
+              </a-col>
+            ))
+          }
+        </a-row>
+        {
+          this.previewVisible &&
+          <PreviewDialog
+            work={this.activeWork}
+            visible={this.previewVisible}
+            handleClose={() => { this.previewVisible = false }}
+          />
+        }
+      </div>
+    )
+  },
+  created () {
+    this.fetchWorks()
+  }
+}
+</script>