|
@@ -2,10 +2,9 @@
|
2
|
2
|
<div class="body" style="font-size:14px">
|
3
|
3
|
<el-card class="box-card">
|
4
|
4
|
游戏名称:
|
5
|
|
- <el-input v-model="title" size="mini" style="width: 200px; margin-right: 20px" />创建时间:
|
|
5
|
+ <el-input v-model="title" style="width: 200px; margin-right: 20px" />创建时间:
|
6
|
6
|
<el-date-picker
|
7
|
7
|
v-model="daterange"
|
8
|
|
- size="mini"
|
9
|
8
|
type="daterange"
|
10
|
9
|
range-separator="至"
|
11
|
10
|
start-placeholder="开始日期"
|
|
@@ -14,9 +13,11 @@
|
14
|
13
|
style="margin-right: 20px"
|
15
|
14
|
@change="dateChange"
|
16
|
15
|
/>
|
17
|
|
- <el-button type="primary" size="mini" @click="onSearch">查询</el-button>
|
18
|
|
- <el-button size="mini" @click="onReset">重置</el-button>
|
19
|
|
- <el-button type="primary" size="mini" @click="handleAdd">添加游戏</el-button>
|
|
16
|
+ <div style="float:right">
|
|
17
|
+ <el-button type="primary" @click="onSearch">查询</el-button>
|
|
18
|
+ <el-button @click="onReset">重置</el-button>
|
|
19
|
+ <el-button type="primary" @click="handleAdd">添加游戏</el-button>
|
|
20
|
+ </div>
|
20
|
21
|
</el-card>
|
21
|
22
|
<el-table stripe :data="tableData" border style="width: 100%">
|
22
|
23
|
<el-table-column prop="title" label="游戏名称" />
|
|
@@ -28,20 +29,20 @@
|
28
|
29
|
<el-table-column prop="createDate" label="创建时间">
|
29
|
30
|
<template slot-scope="scope">
|
30
|
31
|
{{
|
31
|
|
- scope.row.createDate.substr(0, 10)
|
|
32
|
+ scope.row.createDate.substr(0, 10)
|
32
|
33
|
}}
|
33
|
34
|
</template>
|
34
|
35
|
</el-table-column>
|
35
|
36
|
<el-table-column fixed="right" label="操作">
|
36
|
37
|
<template slot-scope="scope">
|
37
|
|
- <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
|
|
38
|
+ <el-button type="primary" style="margin-right:1em" @click="handleEdit(scope.row)">编辑</el-button>
|
38
|
39
|
<el-popconfirm
|
39
|
40
|
icon="el-icon-info"
|
40
|
41
|
icon-color="red"
|
41
|
42
|
title="确定删除这个游戏吗?"
|
42
|
43
|
@onConfirm="handleDelete(scope.row)"
|
43
|
44
|
>
|
44
|
|
- <el-button slot="reference" type="text">删除</el-button>
|
|
45
|
+ <el-button slot="reference" type="danger">删除</el-button>
|
45
|
46
|
</el-popconfirm>
|
46
|
47
|
</template>
|
47
|
48
|
</el-table-column>
|
|
@@ -60,7 +61,7 @@
|
60
|
61
|
</div>
|
61
|
62
|
</template>
|
62
|
63
|
<script>
|
63
|
|
-import { getGameList, deleteGame } from '@/api/game';
|
|
64
|
+import { getGameList, deleteGame } from '@/api/game'
|
64
|
65
|
|
65
|
66
|
export default {
|
66
|
67
|
data() {
|
|
@@ -75,21 +76,21 @@ export default {
|
75
|
76
|
pageSize: 10,
|
76
|
77
|
currentPage: 1,
|
77
|
78
|
gameTotal: 0 // 条目总数
|
78
|
|
- };
|
|
79
|
+ }
|
79
|
80
|
},
|
80
|
81
|
mounted() {
|
81
|
|
- this.onSearch();
|
|
82
|
+ this.onSearch()
|
82
|
83
|
},
|
83
|
84
|
methods: {
|
84
|
85
|
// 改变每页显示条数
|
85
|
86
|
handleSizeChange(val) {
|
86
|
|
- this.pageSize = val;
|
87
|
|
- this.changePagination();
|
|
87
|
+ this.pageSize = val
|
|
88
|
+ this.changePagination()
|
88
|
89
|
},
|
89
|
90
|
// 改变页码
|
90
|
91
|
handleCurrentChange(val) {
|
91
|
|
- this.currentPage = val;
|
92
|
|
- this.changePagination();
|
|
92
|
+ this.currentPage = val
|
|
93
|
+ this.changePagination()
|
93
|
94
|
},
|
94
|
95
|
// 改变分页组件重新查询数据
|
95
|
96
|
changePagination() {
|
|
@@ -100,22 +101,22 @@ export default {
|
100
|
101
|
pageNum: this.currentPage,
|
101
|
102
|
pageSize: this.pageSize
|
102
|
103
|
}).then((res) => {
|
103
|
|
- this.tableData = res.data.records;
|
104
|
|
- });
|
|
104
|
+ this.tableData = res.data.records
|
|
105
|
+ })
|
105
|
106
|
},
|
106
|
107
|
handleAdd() {
|
107
|
|
- this.$router.push({ name: 'gameEdit' });
|
|
108
|
+ this.$router.push({ name: 'gameEdit' })
|
108
|
109
|
},
|
109
|
110
|
handleEdit(row) {
|
110
|
111
|
this.$router.push({
|
111
|
112
|
name: 'gameEdit',
|
112
|
113
|
query: { id: row.gameId }
|
113
|
|
- });
|
|
114
|
+ })
|
114
|
115
|
},
|
115
|
116
|
handleDelete(row) {
|
116
|
117
|
deleteGame(row.gameId).then(() => {
|
117
|
|
- this.onSearch();
|
118
|
|
- });
|
|
118
|
+ this.onSearch()
|
|
119
|
+ })
|
119
|
120
|
},
|
120
|
121
|
onSearch() {
|
121
|
122
|
getGameList({
|
|
@@ -124,26 +125,26 @@ export default {
|
124
|
125
|
endDate: this.endDate,
|
125
|
126
|
pageSize: this.pageSize
|
126
|
127
|
}).then((res) => {
|
127
|
|
- this.tableData = res.data.records;
|
128
|
|
- this.gameTotal = res.data.total;
|
129
|
|
- this.pageSize = res.data.size;
|
130
|
|
- });
|
|
128
|
+ this.tableData = res.data.records
|
|
129
|
+ this.gameTotal = res.data.total
|
|
130
|
+ this.pageSize = res.data.size
|
|
131
|
+ })
|
131
|
132
|
},
|
132
|
133
|
onReset() {
|
133
|
|
- this.title = undefined;
|
134
|
|
- this.daterange = undefined;
|
135
|
|
- this.startDate = undefined;
|
136
|
|
- this.endDate = undefined;
|
137
|
|
- this.currentPage = 1;
|
138
|
|
- this.pageSize = 10;
|
139
|
|
- this.onSearch();
|
|
134
|
+ this.title = undefined
|
|
135
|
+ this.daterange = undefined
|
|
136
|
+ this.startDate = undefined
|
|
137
|
+ this.endDate = undefined
|
|
138
|
+ this.currentPage = 1
|
|
139
|
+ this.pageSize = 10
|
|
140
|
+ this.onSearch()
|
140
|
141
|
},
|
141
|
142
|
dateChange(val) {
|
142
|
|
- this.startDate = this.daterange[0];
|
143
|
|
- this.endDate = this.daterange[1];
|
|
143
|
+ this.startDate = this.daterange[0]
|
|
144
|
+ this.endDate = this.daterange[1]
|
144
|
145
|
}
|
145
|
146
|
}
|
146
|
|
-};
|
|
147
|
+}
|
147
|
148
|
</script>
|
148
|
149
|
<style>
|
149
|
150
|
</style>
|