index.vue
3.89 KB
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
<template>
<div class="app-container client-container">
<div class="filter-container client-filter-wrapper">
<el-input v-model="listQuery.name" :placeholder="$t('resourcesType.placeholderName')" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
<el-select v-model="listQuery.status" :placeholder="$t('resourcesType.placeholderStatus')" class="filter-item" style="width: 130px" @change="handleFilter">
<el-option
v-for="item in statusOptions"
:key="item.key"
:label="$t('resourcesType.' + item.label)"
:value="item.key">
</el-option>
</el-select>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
{{ $t('resourcesType.search') }}
</el-button>
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
{{ $t('resourcesType.add') }}
</el-button>
</div>
<el-table
:key="tableKey"
v-loading="listLoading"
:data="list"
border
fit
highlight-current-row
style="width: 100%"
>
<el-table-column label="名称" prop="name" align="center">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="状态" prop="status" align="center">
<template slot-scope="{row}">
<el-tag :type="row.status | statusFilter">
{{ row.status ? $t('resourcesType.online') : $t('resourcesType.offline') }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="{row}">
<el-button type="primary" size="mini" @click="handleUpdate(row)">
{{ $t('resourcesType.edit') }}
</el-button>
</template>
</el-table-column>
</el-table>
<Pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList"></Pagination>
<actionsDialog ref="actionsDialog"></actionsDialog>
</div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { fetchResourcesTypeList } from '@/api/resources-type'
import actionsDialog from './actionsDialog'
export default {
name: 'Client',
components: { Pagination, actionsDialog },
filters: {
statusFilter(status) {
const statusMap = {
0: 'danger',
1: 'success'
}
return statusMap[status]
}
},
data () {
return {
statusOptions: [{ label: 'all', key: '' }, { label: 'online', key: 1 }, { label: 'offline', key: 0 }],
listQuery: {
name: '',
localIp: '',
remoteIp: '',
status: '',
page: 1,
pageSize: 20
},
tableKey: 0,
list: null,
listLoading: true,
total: 0,
// dialogStatus: '',
textMap: {
update: 'edit',
create: 'add'
},
}
},
created() {
this.getList()
},
methods: {
getList() {
this.listLoading = true;
let params = {}
Object.keys(this.listQuery).forEach(key => {
if(typeof(this.listQuery[key]) === 'number' || this.listQuery[key]) {
params[key] = this.listQuery[key]
}
})
params['_t'] = Date.parse(new Date()) / 1000
fetchResourcesTypeList(params).then(response => {
this.list = response.data.list;
this.total = response.data.total;
setTimeout(() => {
this.listLoading = false
}, 1.5 * 1000);
})
},
handleCreate() {
// this.dialogStatus = 'create'
this.$refs.actionsDialog.dialogInit('create')
},
handleUpdate(row) {
// this.dialogStatus = 'update'
this.$refs.actionsDialog.dialogInit('update', row)
},
handleFilter () {
this.getList()
}
}
}
</script>