Skip to content

Commit ca46568

Browse files
lin-xinlin-xin
committed
添加权限测试页
1 parent 54e9328 commit ca46568

14 files changed

+433
-692
lines changed

‎src/components/common/Sidebar.vue

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,27 +31,27 @@
3131
{
3232
icon: 'el-icon-setting',
3333
index: 'readme',
34-
title: '自述'
34+
title: '自述文件'
3535
},
3636
{
3737
icon: 'el-icon-menu',
3838
index: '2',
39-
title: '表格',
39+
title: '常用表格',
4040
subs: [
4141
{
4242
index: 'basetable',
4343
title: '基础表格'
4444
},
4545
{
4646
index: 'vuetable',
47-
title: 'Vue表格组件'
47+
title: 'datasource表格'
4848
}
4949
]
5050
},
5151
{
5252
icon: 'el-icon-date',
5353
index: '3',
54-
title: '表单',
54+
title: '表单相关',
5555
subs: [
5656
{
5757
index: 'baseform',
@@ -74,17 +74,17 @@
7474
{
7575
icon: 'el-icon-star-on',
7676
index: 'basecharts',
77-
title: '图表'
77+
title: 'schart图表'
7878
},
79+
// {
80+
// icon: 'el-icon-edit',
81+
// index: 'drag',
82+
// title: '拖拽列表'
83+
// },
7984
{
80-
icon: 'el-icon-edit',
81-
index: 'drag',
82-
title: '拖拽'
83-
},
84-
{
85-
icon: 'el-icon-edit',
85+
icon: 'el-icon-warning',
8686
index: 'permission',
87-
title: '权限'
87+
title: '权限测试'
8888
}
8989
]
9090
}
@@ -110,4 +110,7 @@
110110
.sidebar > ul {
111111
height:100%;
112112
}
113+
.sidebar i{
114+
margin-top: -4px;
115+
}
113116
</style>

‎src/components/page/BaseCharts.vue

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,27 @@
66
<el-breadcrumb-item>基础图表</el-breadcrumb-item>
77
</el-breadcrumb>
88
</div>
9-
<div class="plugins-tips">
10-
vue-schart：vue.js封装sChart.js的图表组件。
11-
访问地址：<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
12-
</div>
13-
<div class="schart">
14-
<div class="content-title">柱状图</div>
15-
<schart canvasId="bar" width="500" height="400" :data="data1" type="bar" :options="options1"></schart>
16-
</div>
17-
<div class="schart">
18-
<div class="content-title">折线图</div>
19-
<schart canvasId="line" width="500" height="400" :data="data1" type="line" :options="options1"></schart>
20-
</div>
21-
<div class="schart">
22-
<div class="content-title">饼状图</div>
23-
<schart canvasId="pie" width="500" height="400" :data="data2" type="pie" :options="options2"></schart>
24-
</div>
25-
<div class="schart">
26-
<div class="content-title">环形图</div>
27-
<schart canvasId="ring" width="500" height="400" :data="data2" type="ring" :options="options2"></schart>
9+
<div class="container">
10+
<div class="plugins-tips">
11+
vue-schart：vue.js封装sChart.js的图表组件。
12+
访问地址：<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
13+
</div>
14+
<div class="schart">
15+
<div class="content-title">柱状图</div>
16+
<schart canvasId="bar" width="500" height="400" :data="data1" type="bar" :options="options1"></schart>
17+
</div>
18+
<div class="schart">
19+
<div class="content-title">折线图</div>
20+
<schart canvasId="line" width="500" height="400" :data="data1" type="line" :options="options1"></schart>
21+
</div>
22+
<div class="schart">
23+
<div class="content-title">饼状图</div>
24+
<schart canvasId="pie" width="500" height="400" :data="data2" type="pie" :options="options2"></schart>
25+
</div>
26+
<div class="schart">
27+
<div class="content-title">环形图</div>
28+
<schart canvasId="ring" width="500" height="400" :data="data2" type="ring" :options="options2"></schart>
29+
</div>
2830
</div>
2931
</div>
3032
</template>

‎src/components/page/BaseForm.vue

Lines changed: 83 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,84 @@
1-
<template>
2-
<div>
3-
<div class="crumbs">
4-
<el-breadcrumb separator="/">
5-
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
6-
<el-breadcrumb-item>基本表单</el-breadcrumb-item>
7-
</el-breadcrumb>
8-
</div>
9-
<div class="form-box">
10-
<el-form ref="form" :model="form" label-width="80px">
11-
<el-form-item label="表单名称">
12-
<el-input v-model="form.name"></el-input>
13-
</el-form-item>
14-
<el-form-item label="选择器">
15-
<el-select v-model="form.region" placeholder="请选择">
16-
<el-option key="bbk" label="步步高" value="bbk"></el-option>
17-
<el-option key="xtc" label="小天才" value="xtc"></el-option>
18-
<el-option key="imoo" label="imoo" value="imoo"></el-option>
19-
</el-select>
20-
</el-form-item>
21-
<el-form-item label="日期时间">
22-
<el-col :span="11">
23-
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
24-
</el-col>
25-
<el-col class="line" :span="2">-</el-col>
26-
<el-col :span="11">
27-
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
28-
</el-col>
29-
</el-form-item>
30-
<el-form-item label="选择开关">
31-
<el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
32-
</el-form-item>
33-
<el-form-item label="多选框">
34-
<el-checkbox-group v-model="form.type">
35-
<el-checkbox label="步步高" name="type"></el-checkbox>
36-
<el-checkbox label="小天才" name="type"></el-checkbox>
37-
<el-checkbox label="imoo" name="type"></el-checkbox>
38-
</el-checkbox-group>
39-
</el-form-item>
40-
<el-form-item label="单选框">
41-
<el-radio-group v-model="form.resource">
42-
<el-radio label="步步高"></el-radio>
43-
<el-radio label="小天才"></el-radio>
44-
<el-radio label="imoo"></el-radio>
45-
</el-radio-group>
46-
</el-form-item>
47-
<el-form-item label="文本框">
48-
<el-input type="textarea" v-model="form.desc"></el-input>
49-
</el-form-item>
50-
<el-form-item>
51-
<el-button type="primary" @click="onSubmit">提交</el-button>
52-
<el-button>取消</el-button>
53-
</el-form-item>
54-
</el-form>
55-
</div>
56-
57-
</div>
58-
</template>
59-
60-
<script>
61-
export default {
62-
data: function(){
63-
return {
64-
form: {
65-
name: '',
66-
region: '',
67-
date1: '',
68-
date2: '',
69-
delivery: true,
70-
type: ['步步高'],
71-
resource: '小天才',
72-
desc: ''
73-
}
74-
}
75-
},
76-
methods: {
77-
onSubmit() {
78-
this.$message.success('提交成功！');
79-
}
80-
}
81-
}
1+
<template>
2+
<div>
3+
<div class="crumbs">
4+
<el-breadcrumb separator="/">
5+
<el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
6+
<el-breadcrumb-item>基本表单</el-breadcrumb-item>
7+
</el-breadcrumb>
8+
</div>
9+
<div class="container">
10+
<div class="form-box">
11+
<el-form ref="form" :model="form" label-width="80px">
12+
<el-form-item label="表单名称">
13+
<el-input v-model="form.name"></el-input>
14+
</el-form-item>
15+
<el-form-item label="选择器">
16+
<el-select v-model="form.region" placeholder="请选择">
17+
<el-option key="bbk" label="步步高" value="bbk"></el-option>
18+
<el-option key="xtc" label="小天才" value="xtc"></el-option>
19+
<el-option key="imoo" label="imoo" value="imoo"></el-option>
20+
</el-select>
21+
</el-form-item>
22+
<el-form-item label="日期时间">
23+
<el-col :span="11">
24+
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
25+
</el-col>
26+
<el-col class="line" :span="2">-</el-col>
27+
<el-col :span="11">
28+
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
29+
</el-col>
30+
</el-form-item>
31+
<el-form-item label="选择开关">
32+
<el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
33+
</el-form-item>
34+
<el-form-item label="多选框">
35+
<el-checkbox-group v-model="form.type">
36+
<el-checkbox label="步步高" name="type"></el-checkbox>
37+
<el-checkbox label="小天才" name="type"></el-checkbox>
38+
<el-checkbox label="imoo" name="type"></el-checkbox>
39+
</el-checkbox-group>
40+
</el-form-item>
41+
<el-form-item label="单选框">
42+
<el-radio-group v-model="form.resource">
43+
<el-radio label="步步高"></el-radio>
44+
<el-radio label="小天才"></el-radio>
45+
<el-radio label="imoo"></el-radio>
46+
</el-radio-group>
47+
</el-form-item>
48+
<el-form-item label="文本框">
49+
<el-input type="textarea" v-model="form.desc"></el-input>
50+
</el-form-item>
51+
<el-form-item>
52+
<el-button type="primary" @click="onSubmit">提交</el-button>
53+
<el-button>取消</el-button>
54+
</el-form-item>
55+
</el-form>
56+
</div>
57+
</div>
58+
59+
</div>
60+
</template>
61+
62+
<script>
63+
export default {
64+
data: function(){
65+
return {
66+
form: {
67+
name: '',
68+
region: '',
69+
date1: '',
70+
date2: '',
71+
delivery: true,
72+
type: ['步步高'],
73+
resource: '小天才',
74+
desc: ''
75+
}
76+
}
77+
},
78+
methods: {
79+
onSubmit() {
80+
this.$message.success('提交成功！');
81+
}
82+
}
83+
}
8284
</script>

‎src/components/page/BaseTable.vue

Lines changed: 35 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -6,38 +6,40 @@
66
<el-breadcrumb-item>基础表格</el-breadcrumb-item>
77
</el-breadcrumb>
88
</div>
9-
<div class="handle-box">
10-
<el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button>
11-
<el-select v-model="select_cate" placeholder="筛选省份" class="handle-select mr10">
12-
<el-option key="1" label="广东省" value="广东省"></el-option>
13-
<el-option key="2" label="湖南省" value="湖南省"></el-option>
14-
</el-select>
15-
<el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
16-
<el-button type="primary" icon="search" @click="search">搜索</el-button>
17-
</div>
18-
<el-table :data="data" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
19-
<el-table-column type="selection" width="55"></el-table-column>
20-
<el-table-column prop="date" label="日期" sortable width="150">
21-
</el-table-column>
22-
<el-table-column prop="name" label="姓名" width="120">
23-
</el-table-column>
24-
<el-table-column prop="address" label="地址" :formatter="formatter">
25-
</el-table-column>
26-
<el-table-column label="操作" width="180">
27-
<template slot-scope="scope">
28-
<el-button size="small"
29-
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
30-
<el-button size="small" type="danger"
31-
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
32-
</template>
33-
</el-table-column>
34-
</el-table>
35-
<div class="pagination">
36-
<el-pagination
37-
@current-change ="handleCurrentChange"
38-
layout="prev, pager, next"
39-
:total="1000">
40-
</el-pagination>
9+
<div class="container">
10+
<div class="handle-box">
11+
<el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button>
12+
<el-select v-model="select_cate" placeholder="筛选省份" class="handle-select mr10">
13+
<el-option key="1" label="广东省" value="广东省"></el-option>
14+
<el-option key="2" label="湖南省" value="湖南省"></el-option>
15+
</el-select>
16+
<el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
17+
<el-button type="primary" icon="search" @click="search">搜索</el-button>
18+
</div>
19+
<el-table :data="data" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
20+
<el-table-column type="selection" width="55"></el-table-column>
21+
<el-table-column prop="date" label="日期" sortable width="150">
22+
</el-table-column>
23+
<el-table-column prop="name" label="姓名" width="120">
24+
</el-table-column>
25+
<el-table-column prop="address" label="地址" :formatter="formatter">
26+
</el-table-column>
27+
<el-table-column label="操作" width="180">
28+
<template slot-scope="scope">
29+
<el-button size="small"
30+
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
31+
<el-button size="small" type="danger"
32+
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
33+
</template>
34+
</el-table-column>
35+
</el-table>
36+
<div class="pagination">
37+
<el-pagination
38+
@current-change ="handleCurrentChange"
39+
layout="prev, pager, next"
40+
:total="1000">
41+
</el-pagination>
42+
</div>
4143
</div>
4244
</div>
4345
</template>
@@ -88,6 +90,7 @@
8890
},
8991
// 获取 easy-mock 的模拟数据
9092
getData(){
93+
// 开发环境使用 easy-mock 数据，正式环境使用 json 文件
9194
if(process.env.NODE_ENV === 'development'){
9295
this.url = '/ms/table/list';
9396
};

0 commit comments

Comments
 (0)