第四章：Vue组件模板文件

1
2
3
4
5
6
7
8
9
10
11
12
{
id: '1',
name: '用户管理',
icon: 'el-icon-document-remove',
info: '标准版的CRUD',
childList: [
{id: '1-1', name: '新增用户', icon: 'el-icon-plus', url: 'sa-view/users/users-add.vue'},
{id: '1-2', name: '修改用户', icon: 'el-icon-edit', url: 'sa-view/users/users-edit.vue'},
{id: '1-3', name: '用户列表', icon: 'el-icon-document-remove', url: 'sa-view/users/users-list.vue'},
{id: '1-4', name: '用户统计', icon: 'el-icon-pie-chart', url: 'sa-view/users/users-chart.vue'},
]
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<template>
<div class="vue-box" style="display: none;" :style="'display: block;'">
<!-- 参数栏 -->
<div class="c-panel">
<div class="c-title">用户添加</div>
<el-form v-if="m">
<div class="c-item br">
<label class="c-label">昵称：</label>
<el-input size="mini" v-model="m.username"></el-input>
</div>
<div class="c-item br">
<label class="c-label">密码：</label>
<el-input size="mini" v-model="m.password"></el-input>
</div>
<div class="c-item br">
<label class="c-label">手机：</label>
<el-input size="mini" v-model="m.phone"></el-input>
</div>
<div class="c-item br">
<label class="c-label">角色：</label>
<el-select size="mini" v-model="m.role_id">
<el-option label="管理员" :value="1"></el-option>
<el-option label="公告管理员" :value="2"></el-option>
<el-option label="普通用户" :value="3"></el-option>
</el-select>
</div>
<div class="c-item br">
<label class="c-label">性别：</label>
<el-radio-group size="mini" v-model="m.sex" size="mini">
<el-radio :label="1">男</el-radio>
<el-radio :label="2">女</el-radio>
</el-radio-group>
</div>
<div class="c-item br">
<label class="c-label"></label>
<el-button size="mini" type="primary" icon="el-icon-plus" size="mini" @click="ok">确定</el-button>
</div>
</el-form>
</div>
</div>
</template>
<script>
//这里要使用module.exports，而不是export default
module.exports = {
components: {
//无论是在html还是vue组件中，引入子组件都要使用httpVueLoader的形式。
"sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue'),
},
//这里要使用函数的方式，而不是JSON
data: function () {
return {
m:{
username:"",
password:"",
phone:"",
role_id:"",
sex:"",
}
}
},
methods: {
ok: function () {
sa.alert(JSON.stringify(this.m))
}
}
}
</script>
<style scoped>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<template>
<div class="vue-box" style="display: none;" :style="'display: block;'">
<div class="c-panel">
<!-- ------------- 检索参数 ------------- -->
<div class="c-title">用户列表</div>
<el-form>
<div class="c-item">
<label class="c-label">用户昵称：</label>
<el-input size="mini" v-model="p.username" placeholder="模糊查询"></el-input>
</div>
<div class="c-item">
<label class="c-label">注册日期：</label>
<el-date-picker size="mini" v-model="p.start_time" type="date" value-format="yyyy-MM-dd"
placeholder="开始日期"></el-date-picker>
-
<el-date-picker size="mini" v-model="p.end_time" type="date" value-format="yyyy-MM-dd"
placeholder="结束日期"></el-date-picker>
</div>
<div class="c-item" style="min-width: 0px;">
<el-button size="mini" type="primary" icon="el-icon-search" @click="p.pageNo = 1; f5()">查询
</el-button>
</div>
<br/>
<!-- ------------- 排序参数 ------------- -->
<div class="c-item s-radio-text">
<label class="c-label">综合排序：</label>
<el-radio-group size="mini" v-model="p.sortType">
<el-radio :label="1">注册时间</el-radio>
<el-radio :label="2">最近登录</el-radio>
<el-radio :label="3">登陆次数</el-radio>
<el-radio :label="4">最近签到</el-radio>
<el-radio :label="5">签到次数</el-radio>
</el-radio-group>
</div>
</el-form>
<!-- ------------- 快捷按钮 ------------- -->
<div class="fast-btn">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="add()">新增</el-button>
<el-button size="mini" type="success" icon="el-icon-view" @click="getBySelect()">查看</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteByIds()">删除</el-button>
<el-button size="mini" type="warning" icon="el-icon-download" @click="sa.exportExcel()">导出</el-button>
<el-button size="mini" type="info" icon="el-icon-refresh" @click="sa.f5()">重置</el-button>
</div>
<!-- ------------- 数据列表 ------------- -->
<el-table class="data-table" ref="data-table" :data="dataList" size="small">
<el-table-column type="selection" width="45px"></el-table-column>
<el-table-column label="编号" prop="id" width="80px"></el-table-column>
<el-table-column label="昵称" prop="username" width="220px">
<template slot-scope="s">
<img :src="s.row.avatar" @click="sa.showImage(s.row.avatar, '400px', '400px')"
style="width: 3em; height: 3em; float: left; margin-right: 1em; border-radius: 50%; cursor: pointer;">
<div style="float: left; width: 130px; line-height: 20px;">
<b>{{s.row.username}}</b>
<p>{{s.row.tell}}</p>
</div>
</template>
</el-table-column>
<el-table-column label="个人相册">
<template slot-scope="s">
<img :src="s.row.photo_list[0]" style="width: 40px; height: 40px; cursor: pointer;"
@click="sa.showImageList(s.row.photo_list)">
共{{s.row.photo_list.length}}张, 点击预览
</template>
</el-table-column>
<el-table-column label="性别" prop="sex"></el-table-column>
<el-table-column label="注册方式" prop="create_type"></el-table-column>
<el-table-column label="注册于" prop="create_time"></el-table-column>
<el-table-column label="状态">
<template slot-scope="s">
<el-switch v-model="s.row.status" :active-value="1" :inactive-value="2"
inactive-color="#ff4949"></el-switch>
<b style="color: green;" v-if="s.row.status == 1">正常</b>
<b style="color: red;" v-if="s.row.status == 2">禁用</b>
</template>
</el-table-column>
<el-table-column prop="address" label="操作">
<template slot-scope="s">
<el-button class="c-btn" type="success" icon="el-icon-view" @click="get(s.row)">详情</el-button>
<el-button class="c-btn" type="danger" icon="el-icon-delete" @click="del(s.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- ------------- 分页 ------------- -->
<div class="page-box">
<el-pagination background
layout="total, prev, pager, next, sizes, jumper"
:current-page.sync="p.pageNo"
:page-size.sync="p.pageSize"
:total="dataCount"
:page-sizes="[1, 10, 20, 30, 40, 50, 100]"
@current-change="f5(true)"
@size-change="f5(true)">
</el-pagination>
</div>
</div>
</div>
</template>
<script>
//这里要使用module.exports，而不是export default
module.exports = {
components: {
//无论是在html还是vue组件中，引入子组件都要使用httpVueLoader的形式。
"sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue'),
},
//这里要使用函数的方式，而不是JSON
data: function () {
return {
p: {	// 查询参数
username: '',
create_type: 0,
sortType: 1,
start_time: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-1',	// 本月一号
end_time: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate(),	// 本月当日
pageNo: 1,
pageSize: 10,
},
dataCount: 1422,
dataList: []
}
},
methods: {
// 数据刷新
f5: function () {
//这里发送ajax请求获取数据进行填充 TODO
this.dataList = [{
"id": 12001,
"username": "省长",
"avatar": "https://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/default_head/2.png?x-oss-process=style/yasuo",
"tell": '这人懒，啥也没有留下',
"sex": "男",
"photo_list": [
"http://color-test.oss-cn-qingdao.aliyuncs.com/dyc/img/2019/02/02/1549112799839261454077.jpeg?x-oss-process=style/yasuo"
],
"create_type": "账号注册",
"create_time": "2019-02-09 20:22:00",
"status": 1
}];	// 数据
this.dataCount = 1000;
// 分页
sa.f5TableHeight();
// 刷新表格高度
},
//详情
get: function (data) {
sa.alert(JSON.stringify(data))
},
// 删除
del: function (data) {
sa.confirm('是否删除，此操作不可撤销', function () {
//发送ajax请求 TODO
sa.ok('删除成功');
sa.f5TableHeight();
// 刷新表格高度
}.bind(this));
},
//新增
add: function (data) {
//跳转到指定菜单
this.sa_admin.showMenuById("1-1")
},
//查看-根据选中的
getBySelect: function (data) {
var selection = this.$refs['data-table'].selection;
if (selection.length === 0) {
return sa.msg('请选择一条数据')
}
sa.alert(JSON.stringify(selection[0]))
},
// 批量删除
deleteByIds: function() {
// 获取选中元素的id列表
let selection = this.$refs['data-table'].selection;
let ids = sa.getArrayField(selection, 'id');
if(selection.length == 0) {
return sa.msg('请至少选择一条数据')
}
// 提交删除
sa.confirm('是否批量删除选中数据？此操作不可撤销', function() {
//发送ajax请求删除：参数{ids: ids.join(',')}
TODO
sa.ok('删除成功');
sa.f5TableHeight();
// 刷新表格高度
}.bind(this));
},
},
created: function () {
this.f5();
sa.onInputEnter();//监听输入框的回车事件，执行查询
}
}
</script>
<style scoped>
</style>