Skip to content

Commit 2bc8441

Browse files
PanJiaChenPanJiaChen
committed
add example page
1 parent 40a5977 commit 2bc8441

File tree

6 files changed

+170
-12
lines changed

6 files changed

+170
-12
lines changed

‎src/api/table.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import fetch from '@/utils/fetch';
2+
3+
export function getList(params) {
4+
return fetch({
5+
url: '/table/list',
6+
method: 'get',
7+
params
8+
});
9+
}
10+
11+

‎src/router/index.js

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ const dashboard = _import('dashboard/index');
1616
/* error page */
1717
const Err404 = _import('404');
1818

19-
const Page = _import('page/index');
19+
const Form = _import('page/form');
20+
const Table = _import('table/index');
2021

2122
Vue.use(Router);
2223

@@ -51,11 +52,20 @@ export const asyncRouterMap = [
5152
path: '/example',
5253
component: Layout,
5354
redirect: 'noredirect',
54-
name: 'page',
55-
icon: 'zonghe',
55+
name: 'Example',
56+
icon: 'zujian',
5657
children: [
57-
{ path: 'index', component: Page, name: 'page' }
58+
{ path: 'index', component: Form, name: 'Form', icon: 'zonghe' }
5859
]
5960
},
61+
{
62+
path: '/table',
63+
component: Layout,
64+
redirect: '/table/index',
65+
name: 'Table',
66+
icon: 'tubiaoleixingzhengchang',
67+
noDropdown: true,
68+
children: [{ path: 'index', component: Table, name: 'Table', meta: { role: ['admin'] } }]
69+
},
6070
{ path: '*', redirect: '/404', hidden: true }
6171
];

‎src/views/dashboard/index.vue

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<template>
2-
<div class="dashboard-container">
3-
{{name}}
4-
</div>
2+
<div class="dashboard-container">
3+
<div class='dashboard-text'>name:{{name}}</div>
4+
<div class='dashboard-text'>role:<span v-for='role in roles' :key='role'>{{role}}</span></div>
5+
</div>
56
</template>
67

78
<script>
@@ -16,3 +17,15 @@
1617
}
1718
}
1819
</script>
20+
21+
<style rel="stylesheet/scss" lang="scss">
22+
.dashboard {
23+
&-container {
24+
margin: 30px;
25+
}
26+
&-text {
27+
font-size: 30px;
28+
line-height: 46px;
29+
}
30+
}
31+
</style>

‎src/views/page/form.vue

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<template>
2+
<div class="app-container">
3+
<el-form ref="form" :model="form" label-width="80px">
4+
<el-form-item label="活动名称">
5+
<el-input v-model="form.name"></el-input>
6+
</el-form-item>
7+
<el-form-item label="活动区域">
8+
<el-select v-model="form.region" placeholder="请选择活动区域">
9+
<el-option label="区域一" value="shanghai"></el-option>
10+
<el-option label="区域二" value="beijing"></el-option>
11+
</el-select>
12+
</el-form-item>
13+
<el-form-item label="活动时间">
14+
<el-col :span="11">
15+
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
16+
</el-col>
17+
<el-col class="line" :span="2">-</el-col>
18+
<el-col :span="11">
19+
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
20+
</el-col>
21+
</el-form-item>
22+
<el-form-item label="即时配送">
23+
<el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
24+
</el-form-item>
25+
<el-form-item label="活动性质">
26+
<el-checkbox-group v-model="form.type">
27+
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
28+
<el-checkbox label="地推活动" name="type"></el-checkbox>
29+
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
30+
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
31+
</el-checkbox-group>
32+
</el-form-item>
33+
<el-form-item label="特殊资源">
34+
<el-radio-group v-model="form.resource">
35+
<el-radio label="线上品牌商赞助"></el-radio>
36+
<el-radio label="线下场地免费"></el-radio>
37+
</el-radio-group>
38+
</el-form-item>
39+
<el-form-item label="活动形式">
40+
<el-input type="textarea" v-model="form.desc"></el-input>
41+
</el-form-item>
42+
<el-form-item>
43+
<el-button type="primary" @click="onSubmit">立即创建</el-button>
44+
<el-button>取消</el-button>
45+
</el-form-item>
46+
</el-form>
47+
</div>
48+
</template>
49+
50+
<script>
51+
export default {
52+
data() {
53+
return {
54+
form: {
55+
name: '',
56+
region: '',
57+
date1: '',
58+
date2: '',
59+
delivery: false,
60+
type: [],
61+
resource: '',
62+
desc: ''
63+
}
64+
}
65+
},
66+
methods: {
67+
onSubmit() {
68+
console.log('submit!');
69+
}
70+
}
71+
}
72+
</script>

‎src/views/page/index.vue

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎src/views/table/index.vue

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<div class="app-container">
3+
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
4+
<el-table-column align="center" label='ID' width="95">
5+
<template scope="scope">
6+
{{scope.$index}}
7+
</template>
8+
</el-table-column>
9+
<el-table-column label="Title">
10+
<template scope="scope">
11+
{{scope.row.title}}
12+
</template>
13+
</el-table-column>
14+
15+
<el-table-column label="Author" width="110" align="center">
16+
<template scope="scope">
17+
<span>{{scope.row.author}}</span>
18+
</template>
19+
</el-table-column>
20+
<el-table-column label="Pageviews" width="110" align="center">
21+
<template scope="scope">
22+
{{scope.row.pageviews}}
23+
</template>
24+
</el-table-column>
25+
<el-table-column align="center" prop="created_at" label="Display_time" width="200">
26+
<template scope="scope">
27+
<i class="el-icon-time"></i>
28+
<span>{{scope.row.display_time}}</span>
29+
</template>
30+
</el-table-column>
31+
</el-table>
32+
</div>
33+
</template>
34+
35+
<script>
36+
import { getList } from '@/api/table';
37+
export default {
38+
data() {
39+
return {
40+
list: null,
41+
listLoading: true
42+
}
43+
},
44+
created() {
45+
this.fetchData();
46+
},
47+
methods: {
48+
fetchData() {
49+
this.listLoading = true;
50+
getList(this.listQuery).then(response => {
51+
this.list = response.data.items;
52+
this.listLoading = false;
53+
})
54+
}
55+
}
56+
};
57+
</script>

0 commit comments

Comments
 (0)