zhc077
4 weeks ago
parent
fdd8173de2
commit
5e7a51cc7a
3 changed files with 232 additions and 5 deletions
@ -0,0 +1,224 @@ |
||||
<template> |
||||
<a-card title="即时保存示例7777777" :bordered="false"> |
||||
<!-- |
||||
【即时保存大体思路】： |
||||
1. JVxeTable 上必须加 keep-source 属性 |
||||
2. 监听 edit-closed事件，这个事件是在编辑完成后触发 |
||||
3. 在这个事件里面判断数据是否更改，如果更改了就调用接口进行保存操作 |
||||
--> |
||||
<JVxeTable |
||||
toolbar |
||||
:toolbarConfig="toolbarConfig" |
||||
rowNumber |
||||
rowSelection |
||||
keepSource |
||||
asyncRemove |
||||
:height="340" |
||||
:loading="loading" |
||||
:columns="columns" |
||||
:dataSource="dataSource" |
||||
:pagination="pagination" |
||||
@save="handleTableSave" |
||||
@removed="handleTableRemove" |
||||
@edit-closed="handleEditClosed" |
||||
@pageChange="handlePageChange" |
||||
@selectRowChange="handleSelectRowChange" |
||||
/> |
||||
</a-card> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
// 即时保存示例 |
||||
import { reactive, ref } from 'vue'; |
||||
import { defHttp } from '/@/utils/http/axios'; |
||||
import { JVxeColumn, JVxeTypes } from '/@/components/jeecg/JVxeTable/types'; |
||||
import { useMessage } from '/@/hooks/web/useMessage'; |
||||
|
||||
const { createMessage } = useMessage(); |
||||
// 工具栏的按钮配置 |
||||
const toolbarConfig = reactive({ |
||||
// add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮 |
||||
btn: ['add', 'save', 'remove', 'clearSelection'], |
||||
}); |
||||
// 是否正在加载 |
||||
const loading = ref(false); |
||||
// 分页器参数 |
||||
const pagination = reactive({ |
||||
// 当前页码 |
||||
current: 1, |
||||
// 每页的条数 |
||||
pageSize: 200, |
||||
// 可切换的条数 |
||||
pageSizeOptions: ['10', '20', '30', '100', '200'], |
||||
// 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值） |
||||
total: 0, |
||||
}); |
||||
// 选择的行 |
||||
const selectedRows = ref<Recordable[]>([]); |
||||
// 数据源，控制表格的数据 |
||||
const dataSource = ref<Recordable[]>([]); |
||||
// 列配置，控制表格显示的列 |
||||
const columns = ref<JVxeColumn[]>([ |
||||
{ key: 'num', title: '序号', width: 80, type: JVxeTypes.normal }, |
||||
{ |
||||
// 字段key，跟后台数据的字段名匹配 |
||||
key: 'ship_name', |
||||
// 列的标题 |
||||
title: '船名', |
||||
// 列的宽度 |
||||
width: 180, |
||||
// 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框 |
||||
type: JVxeTypes.input, |
||||
}, |
||||
{ key: 'call', title: '呼叫', width: 80, type: JVxeTypes.input }, |
||||
{ key: 'len', title: '长', width: 80, type: JVxeTypes.input }, |
||||
{ key: 'ton', title: '吨', width: 120, defaultValue: 233, type: JVxeTypes.input }, |
||||
{ key: 'payer', title: '付款方', width: 120, defaultValue: '张三', type: JVxeTypes.input }, |
||||
{ key: 'count', title: '数', width: 40, type: JVxeTypes.normal }, |
||||
{ |
||||
key: 'company', |
||||
title: '公司', |
||||
// 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列 |
||||
// 如果要做占满表格的列可以这么写 |
||||
minWidth: 180, |
||||
type: JVxeTypes.input, |
||||
}, |
||||
{ key: 'trend', title: '动向', width: 120, type: JVxeTypes.input }, |
||||
]); |
||||
|
||||
// 查询url地址 |
||||
enum Api { |
||||
getData = '/mock/vxe/getData', |
||||
// 模拟保存单行数据（即时保存） |
||||
saveRow = '/mock/vxe/immediateSaveRow', |
||||
// 模拟保存整个表格的数据 |
||||
saveAll = '/mock/vxe/immediateSaveAll', |
||||
} |
||||
|
||||
loadData(); |
||||
|
||||
// 加载数据 |
||||
async function loadData() { |
||||
loading.value = true; |
||||
// 调用查询数据接口 |
||||
await defHttp |
||||
.get({ |
||||
// 请求地址 |
||||
url: Api.getData, |
||||
// 封装查询条件 |
||||
params: { |
||||
pageNo: pagination.current, |
||||
pageSize: pagination.pageSize, |
||||
}, |
||||
}) |
||||
.then((result) => { |
||||
// 后台查询回来的 total，数据总数量 |
||||
pagination.total = result.total; |
||||
// 将查询的数据赋值给 dataSource |
||||
dataSource.value = result.records; |
||||
// 重置选择 |
||||
selectedRows.value = []; |
||||
}) |
||||
.finally(() => { |
||||
// 这里是无论成功或失败都会执行的方法，在这里关闭loading |
||||
loading.value = false; |
||||
}); |
||||
} |
||||
|
||||
// 【整体保存】点击保存按钮时触发的事件 |
||||
function 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); |
||||
// 【模拟保存】 |
||||
loading.value = true; |
||||
defHttp |
||||
.post({ |
||||
url: Api.saveAll, |
||||
params: tableData, |
||||
}) |
||||
.then(() => { |
||||
createMessage.success(`保存成功！`); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
// 触发单元格删除事件 |
||||
function handleTableRemove(event) { |
||||
// 把 event.deleteRows 传给后台进行删除（注意：这里不会传递前端逻辑新增的数据，因为不需要请求后台删除） |
||||
console.log('待删除的数据: ', event.deleteRows); |
||||
// 也可以只传ID，因为可以根据ID删除 |
||||
let deleteIds = event.deleteRows.map((row) => row.id); |
||||
console.log('待删除的数据ids: ', deleteIds); |
||||
|
||||
// 模拟请求后台删除 |
||||
loading.value = true; |
||||
window.setTimeout(() => { |
||||
loading.value = false; |
||||
createMessage.success('删除成功'); |
||||
// 假设后台返回删除成功，必须要调用 confirmRemove() 方法，才会真正在表格里移除（会同时删除选中的逻辑新增的数据） |
||||
event.confirmRemove(); |
||||
}, 1000); |
||||
} |
||||
|
||||
// 单元格编辑完成之后触发的事件 |
||||
function handleEditClosed(event) { |
||||
let { $table, row, column } = event; |
||||
let field = column.property; |
||||
// 判断单元格值是否被修改 |
||||
if ($table.isUpdateByRow(row, field)) { |
||||
// 校验当前行 |
||||
$table.validate(row).then((errMap) => { |
||||
// 校验通过 |
||||
if (!errMap) { |
||||
// 【模拟保存】 |
||||
let hideLoading = createMessage.loading(`正在保存"${column.title}"`, 0); |
||||
console.log('即时保存数据：', row); |
||||
defHttp |
||||
.put({ |
||||
url: Api.saveRow, |
||||
params: row, |
||||
}) |
||||
.then((res) => { |
||||
createMessage.success(`"${column.title}"保存成功！`); |
||||
// 局部更新单元格为已保存状态 |
||||
$table.reloadRow(row, null, field); |
||||
}) |
||||
.finally(() => { |
||||
hideLoading(); |
||||
}); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
|
||||
// 当分页参数变化时触发的事件 |
||||
function handlePageChange(event) { |
||||
// 重新赋值 |
||||
pagination.current = event.current; |
||||
pagination.pageSize = event.pageSize; |
||||
// 查询数据 |
||||
loadData(); |
||||
} |
||||
|
||||
// 当选择的行变化时触发的事件 |
||||
function handleSelectRowChange(event) { |
||||
selectedRows.value = event.selectedRows; |
||||
} |
||||
</script> |
||||
|
||||
<style scoped></style> |
||||
Loading…
Reference in new issue