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
| <template>
| <div class="app-container">
| <!-- 搜索区 ↓↓↓↓↓↓↓↓↓↓ -->
| <el-form v-show="showSearch" ref="searchForm" :inline="true">
| <el-form-item label="管理员账号">
| <el-input
| v-model="keyWord"
| placeholder="请输入管理员账号"
| clearable
| size="small"
| style="width: 240px"
| maxlength="10"
| @keyup.enter.native="reGetList"
| />
| </el-form-item>
| <el-form-item>
| <el-button type="cyan" icon="el-icon-search" size="mini" @click="reGetList">搜索</el-button>
| <el-button icon="el-icon-refresh" size="mini" @click="resetHandle">重置</el-button>
| </el-form-item>
| </el-form>
| <!-- 搜索区 ↑↑↑↑↑↑↑↑↑↑ -->
|
| <el-table :data="list">
| <el-table-column type="index" label="序号" align="center" width="60" />
| <el-table-column label="管理员账号" prop="admin" align="center" min-width="120" />
| <el-table-column label="操作名称" prop="opName" align="center" min-width="120" />
| <el-table-column label="操作时间" prop="createTime" align="center" min-width="120" />
| </el-table>
|
| <pagination
| v-show="total>0"
| :total="total"
| :page.sync="pageNum"
| :limit.sync="pageSize"
| @pagination="getList"
| />
| </div>
| </template>
|
| <script>
|
| export default {
| name: 'Role',
| data() {
| return {
| showSearch: true, // 是否显示搜索区
| keyWord: '',
|
| list: [],
|
| // 分页 ↓↓↓↓↓↓↓↓↓↓
| total: 0,
| pageNum: 1,
| pageSize: 20
| // 分页 ↑↑↑↑↑↑↑↑↑↑
| }
| },
| mounted() {
| this.init()
| },
| methods: {
| // 初始化
| init() {
| this.getList()
| },
|
| // 获取列表
| getList() {
| var { pageNum, pageSize, keyWord } = this
| this.postFN({
| url: 'admin/op/list',
| params: {
| pageNum: pageNum,
| pageSize: pageSize,
| keyWord: keyWord
| },
| mockData: {
| code: 100,
| msg: '',
| data: {
| list: [{
| id: 'xxx',
| index: 1,
| admin: '电子产品',
| createTime: '2020-08-05 10:00:05',
| opName: '登陆'
| }],
| total: 100
| }
| }
| }, (inf) => {
| this.list = inf.list || []
| this.total = inf.total
| })
| },
| // 重新获取列表
| reGetList() {
| this.pageNum = 1
| this.getList()
| },
| // 重置
| resetHandle() {
| this.keyWord = ''
| this.reGetList()
| }
| }
| }
| </script>
|
| <style lang="scss" scoped>
|
| </style>
|
|
