<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>
|
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
|
},
|
{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
|
},
|
{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
|
}
|
// 调用查询数据接口
|
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
|
})
|
},
|
|
// 【整体保存】点击保存按钮时触发的事件
|
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
|
})
|
}
|
})
|
},
|
|
// 触发单元格删除事件
|
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
|
|
let field = column.property
|
let cellValue = row[field]
|
// 判断单元格值是否被修改
|
if ($table.isUpdateByRow(row, field)) {
|
// 校验当前行
|
$table.validate(row).then((errMap) => {
|
// 校验通过
|
if (!errMap) {
|
// 【模拟保存】
|
let hideLoading = this.$message.loading(`正在保存"${column.title}"`, 0)
|
console.log('即时保存数据：', row)
|
putAction(this.url.saveRow, row).then(res => {
|
if (res.success) {
|
this.$message.success(`"${column.title}"保存成功！`)
|
// 局部更新单元格为已保存状态
|
$table.reloadRow(row, null, field)
|
} else {
|
this.$message.warn(`"${column.title}"保存失败：` + res.message)
|
}
|
}).finally(() => {
|
hideLoading()
|
})
|
}
|
})
|
}
|
},
|
|
// 当分页参数变化时触发的事件
|
handlePageChange(event) {
|
// 重新赋值
|
this.pagination.current = event.current
|
this.pagination.pageSize = event.pageSize
|
// 查询数据
|
this.loadData()
|
},
|
|
// 当选择的行变化时触发的事件
|
handleSelectRowChange(event) {
|
this.selectedRows = event.selectedRows
|
},
|
|
},
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
