119 lines
3.7 KiB
Java
119 lines
3.7 KiB
Java
<template>
|
||
<a-card title="无痕刷新示例" :bordered="false">
|
||
|
||
<div style="margin-bottom: 8px;">
|
||
<span>启用数据变动特效：</span>
|
||
<a-switch v-model="reloadEffect"/>
|
||
</div>
|
||
|
||
<!--
|
||
【即时保存大体思路】：
|
||
1. 该功能依赖于【即时保存】功能，请先看即时保存示例
|
||
2. 必须要有 socket-reload 属性，且设为 true
|
||
3. 必须要有 socket-key 属性，该属性为当前表格的唯一标识，
|
||
系统会自动更新所有 socket-key 相同的表格
|
||
4. 在局部保存 edit-closed 事件中，
|
||
保存成功后调用 socketSendUpdateRow 方法，将当前 row 传递过去即可 （见第 108 行）
|
||
-->
|
||
<j-vxe-table
|
||
ref="table"
|
||
row-number
|
||
row-selection
|
||
|
||
keep-source
|
||
socket-reload
|
||
socket-key="demo-socket-reload"
|
||
:reload-effect="reloadEffect"
|
||
|
||
:height="340"
|
||
:loading="loading"
|
||
:columns="columns"
|
||
:dataSource="dataSource"
|
||
@edit-closed="handleEditClosed"
|
||
/>
|
||
</a-card>
|
||
</template>
|
||
|
||
<script>
|
||
import { getAction } from '@api/manage'
|
||
import { JVXETypes } from '@/components/jeecg/JVxeTable'
|
||
|
||
// 无痕刷新示例
|
||
export default {
|
||
name: 'SocketReload',
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
dataSource: [],
|
||
columns: [
|
||
{key: 'num', title: '序号', width: '80px'},
|
||
{key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input},
|
||
{key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input},
|
||
{key: 'len', title: '长', width: '80px', type: JVXETypes.input},
|
||
{key: 'ton', title: '吨', width: '120px', type: JVXETypes.input},
|
||
{key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input},
|
||
{key: 'count', title: '数', width: '40px'},
|
||
{key: 'company', title: '公司', minWidth: '180px', type: JVXETypes.input},
|
||
{key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
|
||
],
|
||
// 查询url地址
|
||
url: {
|
||
getData: '/mock/vxe/getData',
|
||
},
|
||
// 是否启用日历刷新效果
|
||
reloadEffect: false,
|
||
}
|
||
},
|
||
created() {
|
||
this.loadData()
|
||
},
|
||
methods: {
|
||
// 加载数据
|
||
loadData() {
|
||
let formData = {pageNo: 1, pageSize: 200}
|
||
this.loading = true
|
||
getAction(this.url.getData, formData).then(res => {
|
||
if (res.success) {
|
||
this.dataSource = res.result.records
|
||
} else {
|
||
this.$error({title: '主表查询失败', content: res.message})
|
||
}
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
|
||
// 单元格编辑完成之后触发的事件
|
||
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)
|
||
setTimeout(() => {
|
||
hideLoading()
|
||
this.$message.success(`"${column.title}"保存成功！`)
|
||
// 局部更新单元格为已保存状态
|
||
$table.reloadRow(row, null, field)
|
||
// 发送更新消息
|
||
this.$refs.table.socketSendUpdateRow(row)
|
||
}, 555)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style> |