|
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
|
<template>
<a-card title="即时保存示例" :bordered="false">
<!--
【即时保存大体思路】:
1. JVxeTable 上必须加 keep-source 属性
2. 监听 edit-closed事件,这个事件是在编辑完成后触发
3. 在这个事件里面判断数据是否更改,如果更改了就调用接口进行保存操作
-->
<j-vxe-table
toolbar
:toolbarConfig="toolbarConfig"
row-number
row-selection
keep-source
async-remove
:height="340"
:loading="loading"
:columns="columns"
:dataSource="dataSource"
:pagination="pagination"
@save="handleTableSave"
@remove="handleTableRemove"
@edit-closed="handleEditClosed"
@pageChange="handlePageChange"
@selectRowChange="handleSelectRowChange"
/>
</a-card>
</template>
<script>
|
|
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
|
import {getAction, postAction, putAction} from '@api/manage'
import {JVXETypes} from '@/components/jeecg/JVxeTable'
// 即时保存示例
export default {
name: 'JSBCDemo',
data() {
return {
// 工具栏的按钮配置
toolbarConfig: {
// add 新增按钮;remove 删除按钮;clearSelection 清空选择按钮
btn: ['add', 'save', 'remove', 'clearSelection']
},
// 是否正在加载
loading: false,
// 分页器参数
pagination: {
// 当前页码
current: 1,
// 每页的条数
pageSize: 200,
// 可切换的条数
pageSizeOptions: ['10', '20', '30', '100', '200'],
// 数据总数(目前并不知道真实的总数,所以先填写0,在后台查出来后再赋值)
total: 0,
},
// 选择的行
selectedRows: [],
// 数据源,控制表格的数据
dataSource: [],
// 列配置,控制表格显示的列
columns: [
{key: 'num', title: '序号', width: '80px'},
{
// 字段key,跟后台数据的字段名匹配
key: 'ship_name',
// 列的标题
title: '船名',
// 列的宽度
width: '180px',
// 如果加上了该属性,就代表当前单元格是可编辑的,type就是表单的类型,input就是简单的输入框
type: JVXETypes.input
|
|
76
|
},
|
|
77
78
79
80
81
82
83
84
85
86
87
88
|
{key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input},
{key: 'len', title: '长', width: '80px', type: JVXETypes.input},
{key: 'ton', title: '吨', width: '120px', defaultValue: 233, type: JVXETypes.input},
{key: 'payer', title: '付款方', width: '120px', defaultValue: '张三', type: JVXETypes.input},
{key: 'count', title: '数', width: '40px'},
{
key: 'company',
title: '公司',
// 最小宽度,与宽度不同的是,这个不是固定的宽度,如果表格有多余的空间,会平均分配给设置了 minWidth 的列
// 如果要做占满表格的列可以这么写
minWidth: '180px',
type: JVXETypes.input
|
|
89
|
},
|
|
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
{key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
],
// 查询url地址
url: {
getData: '/mock/vxe/getData',
// 模拟保存单行数据(即时保存)
saveRow: '/mock/vxe/immediateSaveRow',
// 模拟保存整个表格的数据
saveAll: '/mock/vxe/immediateSaveAll',
},
}
},
created() {
this.loadData()
},
methods: {
// 加载数据
loadData() {
// 封装查询条件
let formData = {
pageNo: this.pagination.current,
pageSize: this.pagination.pageSize
|
|
113
|
}
|
|
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
// 调用查询数据接口
this.loading = true
getAction(this.url.getData, formData).then(res => {
if (res.success) {
// 后台查询回来的 total,数据总数量
this.pagination.total = res.result.total
// 将查询的数据赋值给 dataSource
this.dataSource = res.result.records
// 重置选择
this.selectedRows = []
} else {
this.$error({title: '主表查询失败', content: res.message})
}
}).finally(() => {
// 这里是无论成功或失败都会执行的方法,在这里关闭loading
this.loading = false
})
|
|
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
|
// 【整体保存】点击保存按钮时触发的事件
handleTableSave({$table, target}) {
// 校验整个表格
$table.validate().then((errMap) => {
// 校验通过
if (!errMap) {
// 获取所有数据
let tableData = target.getTableData()
console.log('当前保存的数据是:', tableData)
// 获取新增的数据
let newData = target.getNewData()
console.log('-- 新增的数据:', newData)
// 获取删除的数据
let deleteData = target.getDeleteData()
console.log('-- 删除的数据:', deleteData)
// 【模拟保存】
this.loading = true
postAction(this.url.saveAll, tableData).then(res => {
if (res.success) {
this.$message.success(`保存成功!`)
} else {
this.$message.warn(`保存失败:` + res.message)
}
}).finally(() => {
this.loading = false
})
|
|
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
|
})
},
// 触发单元格删除事件
handleTableRemove(event) {
// 把 event.deleteRows 传给后台进行删除(注意:这里不会传递前端逻辑新增的数据,因为不需要请求后台删除)
console.log('待删除的数据: ', event.deleteRows)
// 也可以只传ID,因为可以根据ID删除
let deleteIds = event.deleteRows.map(row => row.id)
console.log('待删除的数据ids: ', deleteIds)
// 模拟请求后台删除
this.loading = true
window.setTimeout(() => {
this.loading = false
this.$message.success('删除成功')
// 假设后台返回删除成功,必须要调用 confirmRemove() 方法,才会真正在表格里移除(会同时删除选中的逻辑新增的数据)
event.confirmRemove()
}, 1000)
},
// 单元格编辑完成之后触发的事件
handleEditClosed(event) {
let {$table, row, column} = event
|
|
186
|
|
|
187
188
189
190
191
192
|
let field = column.property
let cellValue = row[field]
// 判断单元格值是否被修改
if ($table.isUpdateByRow(row, field)) {
// 校验当前行
$table.validate(row).then((errMap) => {
|
|
193
194
195
|
// 校验通过
if (!errMap) {
// 【模拟保存】
|
|
196
197
198
|
let hideLoading = this.$message.loading(`正在保存"${column.title}"`, 0)
console.log('即时保存数据:', row)
putAction(this.url.saveRow, row).then(res => {
|
|
199
|
if (res.success) {
|
|
200
201
202
|
this.$message.success(`"${column.title}"保存成功!`)
// 局部更新单元格为已保存状态
$table.reloadRow(row, null, field)
|
|
203
|
} else {
|
|
204
|
this.$message.warn(`"${column.title}"保存失败:` + res.message)
|
|
205
206
|
}
}).finally(() => {
|
|
207
|
hideLoading()
|
|
208
209
210
|
})
}
})
|
|
211
212
|
}
},
|
|
213
|
|
|
214
215
216
217
218
219
220
221
|
// 当分页参数变化时触发的事件
handlePageChange(event) {
// 重新赋值
this.pagination.current = event.current
this.pagination.pageSize = event.pageSize
// 查询数据
this.loadData()
},
|
|
222
|
|
|
223
224
225
|
// 当选择的行变化时触发的事件
handleSelectRowChange(event) {
this.selectedRows = event.selectedRows
|
|
226
|
},
|
|
227
228
229
|
},
}
|
|
230
231
232
233
234
|
</script>
<style scoped>
</style>
|