Skip to content

Commit 0d45399

Browse files
ly525ly525
committed
feat: add work list page
1 parent 13edea6 commit 0d45399

File tree

9 files changed

+324
-23
lines changed

9 files changed

+324
-23
lines changed

‎front-end/h5/src/components/core/editor/index.js

+8-5
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ export default {
4242
...mapState('editor', {
4343
editingElement: state => state.editingElement,
4444
elements: state => state.editingPage.elements,
45-
pages: state => state.work.pages
45+
pages: state => state.work.pages,
46+
work: state => state.work
4647
}),
4748
...mapState('loading', {
4849
saveWork_loading: state => state.saveWork_loading
@@ -98,7 +99,7 @@ export default {
9899
},
99100
render (h) {
100101
return (
101-
<a-layout id="luban-layout" style={{ height: '100vh' }}>
102+
<a-layout id="luban-editor-layout" style={{ height: '100vh' }}>
102103
<a-layout-header class="header">
103104
<div class="logo">鲁班 H5</div>
104105
{/* TODO we can show the plugins shortcuts here */}
@@ -190,14 +191,16 @@ export default {
190191
</a-tabs>
191192
</a-layout-sider>
192193
</a-layout>
193-
<PreviewDialog visible={this.previewVisible} handleClose={() => { this.previewVisible = false }} />
194+
{
195+
this.previewVisible && <PreviewDialog work={this.work} visible={this.previewVisible} handleClose={() => { this.previewVisible = false }} />
196+
}
194197
</a-layout>
195198
)
196199
},
197200
created () {
198-
let workId = this.$route.query.workId
201+
let workId = this.$route.params.workId
202+
console.log(workId)
199203
if (workId) {
200-
// this.$store.dispatch('getWorkById', workId)
201204
this.fetchWork(workId)
202205
} else {
203206
this.createWork()

‎front-end/h5/src/components/core/editor/modals/preview.vue

+8-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
import { mapActions, mapState } from 'vuex'
2+
import { mapActions } from 'vuex'
33
import QRCode from 'qrcode'
44
import { API_ORIGIN } from '../../../../constants/api.js'
55
@@ -12,12 +12,16 @@ export default {
1212
handleClose: {
1313
type: Function,
1414
default: () => {}
15+
},
16+
work: {
17+
type: Object,
18+
default: () => {}
1519
}
1620
},
1721
computed: {
18-
...mapState('editor', {
19-
work: state => state.work
20-
}),
22+
// ...mapState('editor', {
23+
// work: state => state.work
24+
// }),
2125
releaseUrl () {
2226
return `${API_ORIGIN}/works/preview/${this.work.id}`
2327
}

‎front-end/h5/src/components/core/styles/index.scss

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
#luban-layout {
1+
#luban-editor-layout,
2+
#luban-work-manager-layout {
23
.header {
34
padding: 0 10px;
45

@@ -92,4 +93,10 @@
9293

9394
.no-border {
9495
border: none !important;
96+
}
97+
98+
.flex-center {
99+
display: flex !important;
100+
align-items: center;
101+
justify-content: center;
95102
}

‎front-end/h5/src/router.js

+22-11
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,41 @@
11
import Vue from 'vue'
22
import Router from 'vue-router'
33
// import Home from './views/Home.vue'
4+
import Home from './views/work-manager/index.vue'
45

56
Vue.use(Router)
67

78
export default new Router({
9+
// mode: 'history',
810
routes: [
9-
// {
10-
// path: '/',
11-
// name: 'home',
12-
// component: Home
13-
// },
11+
{
12+
path: '/work-manager',
13+
component: Home,
14+
name: 'work-manager',
15+
redirect: '/work-manager/list',
16+
alias: '/',
17+
children: [
18+
{
19+
path: '/work-manager/list',
20+
name: 'work-manager-list',
21+
component: () => import('@/views/work-manager/list.vue')
22+
},
23+
{
24+
path: '/work-manager/form-stat',
25+
name: 'form-stat',
26+
component: () => import('@/views/work-manager/form-stat.vue')
27+
}
28+
]
29+
},
1430
{
1531
path: '/about',
1632
name: 'about',
1733
component: () => import('./views/About.vue')
1834
},
1935
{
20-
path: '/', // #!zh 编辑器页面，核心功能部分
36+
path: '/editor/:workId', // #!zh 编辑器页面，核心功能部分
2137
name: 'editor',
2238
component: () => import('./views/Editor.vue')
23-
},
24-
{
25-
path: '/form-stat', // #!zh 表单统计页面
26-
name: 'form-stat',
27-
component: () => import('./views/About.vue')
2839
}
2940
]
3041
})

‎front-end/h5/src/store/modules/editor.js

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { actions as elementActions, mutations as elementMutations } from './elem
55
import { actions as workActions, mutations as workMutations } from './work'
66

77
const state = {
8+
works: [],
89
work: new Work(),
910
editingPage: { elements: [] },
1011
editingElement: null,

‎front-end/h5/src/store/modules/work.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
// import Work from '../../components/core/models/work'
21
import Element from '../../components/core/models/element'
32
import strapi from '../../utils/strapi'
43
import Page from '../../components/core/models/page'
54
import { AxiosWrapper } from '../../utils/http.js'
5+
import router from '@/router.js'
66

77
export const actions = {
88
previewWork ({ commit }, payload = {}) {
@@ -13,7 +13,8 @@ export const actions = {
1313
},
1414
createWork ({ commit }, payload) {
1515
strapi.createEntry('works').then(entry => {
16-
window.location = `${window.location.origin}/#/?workId=${entry.id}`
16+
router.replace({ name: 'editor', params: { workId: entry.id } })
17+
// window.location = `${window.location.origin}/#/editor/${entry.id}`
1718
})
1819
// commit('createWork')
1920
// commit('pageManager', { type: 'add' })
@@ -46,11 +47,19 @@ export const actions = {
4647
commit('setWork', entry)
4748
commit('setEditingPage')
4849
})
50+
},
51+
fetchWorks ({ commit, state }, workId) {
52+
strapi.getEntries('works', {}).then(entries => {
53+
commit('setWorks', entries)
54+
})
4955
}
5056
}
5157

5258
// mutations
5359
export const mutations = {
60+
setWorks (state, works) {
61+
state.works = works
62+
},
5463
setWork (state, work) {
5564
work.pages = work.pages.map(page => {
5665
page.elements = page.elements.map(element => new Element(element))

‎front-end/h5/src/views/work-manager/form-stat.vue

Whitespace-only changes.

‎front-end/h5/src/views/work-manager/index.vue

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<script>
2+
// import PreView from '@/pages/preview';
3+
// import Sidebar from './components/sidebar.vue'
4+
import '@/components/core/styles/index.scss'
5+
6+
const sidebarMenus = [
7+
{
8+
label: '我的作品',
9+
value: 'workManager',
10+
antIcon: 'bars',
11+
key: '1'
12+
},
13+
{
14+
label: '数据中心',
15+
value: 'dataCenter',
16+
antIcon: 'snippets',
17+
key: '2',
18+
children: [
19+
{
20+
label: '基础数据',
21+
value: 'basicData',
22+
antIcon: 'snippets',
23+
key: '2-1'
24+
},
25+
{
26+
label: '表单统计',
27+
value: 'formData',
28+
antIcon: 'snippets',
29+
key: '2-2'
30+
}
31+
]
32+
},
33+
{
34+
label: '模板中心',
35+
value: 'templateCenter',
36+
antIcon: 'snippets',
37+
key: '3',
38+
children: [
39+
{
40+
label: '免费模板',
41+
value: 'freeTemplates',
42+
antIcon: 'snippets',
43+
key: '3-1'
44+
}
45+
]
46+
},
47+
{
48+
label: '账号中心',
49+
value: 'freeTemplate',
50+
antIcon: 'appstore',
51+
key: '4'
52+
}
53+
]
54+
55+
export default {
56+
components: {
57+
// PreView,
58+
// Sidebar
59+
},
60+
render (h) {
61+
return (
62+
<a-layout id="luban-work-manager-layout" style={{ height: '100vh' }}>
63+
<a-layout-header class="header">
64+
<div class="logo">鲁班 H5</div>
65+
{/* TODO we can show the plugins shortcuts here */}
66+
<a-dropdown style={{ float: 'right', background: 'transparent', margin: '16px 28px 16px 0' }}>
67+
<a-menu slot="overlay" onClick={() => {}}>
68+
<a-menu-item key="1">
69+
<span>someone@luban</span>
70+
</a-menu-item>
71+
<a-menu-divider />
72+
<a-menu-item key="2"><a-icon type="setting" />账号设置</a-menu-item>
73+
<a-menu-item key="3"><a-icon type="logout" />退出登录</a-menu-item>
74+
</a-menu>
75+
<a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
76+
</a-dropdown>
77+
</a-layout-header>
78+
<a-layout>
79+
<a-layout-sider width="160" style="background: #fff">
80+
<a-menu
81+
mode="inline"
82+
// defaultSelectedKeys={['1']}
83+
defaultOpenKeys={['1', '2', '3']}
84+
style="height: 100%"
85+
>
86+
{
87+
sidebarMenus.map(menu => (
88+
menu.children
89+
? <a-sub-menu key={menu.key}>
90+
<span slot="title"><a-icon type={menu.antIcon} />{menu.label}</span>
91+
{
92+
(menu.children).map(submenu => (<a-menu-item key={submenu.key}>{submenu.label}</a-menu-item>))
93+
}
94+
</a-sub-menu>
95+
: <a-menu-item key={menu.key}>
96+
<a-icon type={menu.antIcon} />
97+
<span>{menu.label}</span>
98+
</a-menu-item>
99+
))
100+
}
101+
</a-menu>
102+
</a-layout-sider>
103+
<a-layout style="padding: 0 24px 24px">
104+
<a-layout-content style={{ padding: '24px', margin: 0, minHeight: '280px' }}>
105+
<router-view />
106+
</a-layout-content>
107+
</a-layout>
108+
</a-layout>
109+
{/** <PreviewDialog visible={this.previewVisible} handleClose={() => { this.previewVisible = false }} /> */}
110+
</a-layout>)
111+
}
112+
}
113+
</script>

0 commit comments

Comments
 (0)