|
|
|
|
@ -1,5 +1,5 @@ |
|
|
|
|
<template> |
|
|
|
|
<a-card title="即时保存示例7777777" :bordered="false"> |
|
|
|
|
<a-card :bordered="true"> |
|
|
|
|
<!-- |
|
|
|
|
【即时保存大体思路】： |
|
|
|
|
1. JVxeTable 上必须加 keep-source 属性 |
|
|
|
|
@ -9,22 +9,19 @@ |
|
|
|
|
<JVxeTable |
|
|
|
|
toolbar |
|
|
|
|
:toolbarConfig="toolbarConfig" |
|
|
|
|
rowNumber |
|
|
|
|
rowSelection |
|
|
|
|
keepSource |
|
|
|
|
asyncRemove |
|
|
|
|
:height="340" |
|
|
|
|
:height="600" |
|
|
|
|
:loading="loading" |
|
|
|
|
:columns="columns" |
|
|
|
|
:dataSource="dataSource" |
|
|
|
|
:pagination="pagination" |
|
|
|
|
@save="handleTableSave" |
|
|
|
|
@removed="handleTableRemove" |
|
|
|
|
@edit-closed="handleEditClosed" |
|
|
|
|
@pageChange="handlePageChange" |
|
|
|
|
@selectRowChange="handleSelectRowChange" |
|
|
|
|
/> |
|
|
|
|
</a-card> |
|
|
|
|
<div class="button-container"> |
|
|
|
|
<a-button type="primary" @click="router.back()">返回</a-button> |
|
|
|
|
<!-- <a-button type="primary" @click="handleTableSave()">保存</a-button>--> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
@ -33,16 +30,19 @@ 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'; |
|
|
|
|
import {useRoute, useRouter} from "vue-router"; |
|
|
|
|
const router = useRouter(); |
|
|
|
|
const route = useRoute(); |
|
|
|
|
|
|
|
|
|
const { createMessage } = useMessage(); |
|
|
|
|
// 工具栏的按钮配置 |
|
|
|
|
const toolbarConfig = reactive({ |
|
|
|
|
// add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮 |
|
|
|
|
btn: ['add', 'save', 'remove', 'clearSelection'], |
|
|
|
|
btn: [/*'add',*/'save'/*, 'remove', 'clearSelection'*/], |
|
|
|
|
}); |
|
|
|
|
// 是否正在加载 |
|
|
|
|
const loading = ref(false); |
|
|
|
|
// 分页器参数 |
|
|
|
|
/*// 分页器参数 |
|
|
|
|
const pagination = reactive({ |
|
|
|
|
// 当前页码 |
|
|
|
|
current: 1, |
|
|
|
|
@ -52,47 +52,38 @@ const pagination = reactive({ |
|
|
|
|
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: 'budgetSubject', title: '预算科目', width: 300, type: JVxeTypes.normal }, |
|
|
|
|
{ |
|
|
|
|
// 字段key，跟后台数据的字段名匹配 |
|
|
|
|
key: 'ship_name', |
|
|
|
|
key: 'totalFee', |
|
|
|
|
// 列的标题 |
|
|
|
|
title: '船名', |
|
|
|
|
title: '合计', |
|
|
|
|
// 列的宽度 |
|
|
|
|
width: 180, |
|
|
|
|
width: 260, |
|
|
|
|
// 如果加上了该属性，就代表当前单元格是可编辑的，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, |
|
|
|
|
type: JVxeTypes.inputNumber, |
|
|
|
|
}, |
|
|
|
|
{ key: 'trend', title: '动向', width: 120, type: JVxeTypes.input }, |
|
|
|
|
{ key: 'specialFee', title: '专项经费', width: 260, type: JVxeTypes.inputNumber }, |
|
|
|
|
{ key: 'selfFee', title: '自筹经费', width: 260, type: JVxeTypes.inputNumber }, |
|
|
|
|
{ key: 'specialFeeMark', title: '专项经费说明', width: 260, type: JVxeTypes.textarea }, |
|
|
|
|
]); |
|
|
|
|
|
|
|
|
|
// 查询url地址 |
|
|
|
|
enum Api { |
|
|
|
|
getData = '/mock/vxe/getData', |
|
|
|
|
getData4ProjectFeeBudgetList = '/mock/vxe/getProjectFeeBudgetList', |
|
|
|
|
// 模拟保存单行数据（即时保存） |
|
|
|
|
saveRow = '/mock/vxe/immediateSaveRow', |
|
|
|
|
// 模拟保存整个表格的数据 |
|
|
|
|
saveAll = '/mock/vxe/immediateSaveAll', |
|
|
|
|
saveAll4ProjectFeeBudget = '/projectFeeBudget/projectFeeBudget/saveAll', |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
loadData(); |
|
|
|
|
@ -104,16 +95,16 @@ async function loadData() { |
|
|
|
|
await defHttp |
|
|
|
|
.get({ |
|
|
|
|
// 请求地址 |
|
|
|
|
url: Api.getData, |
|
|
|
|
url: Api.getData4ProjectFeeBudgetList+'/'+route.query.id, |
|
|
|
|
// 封装查询条件 |
|
|
|
|
params: { |
|
|
|
|
pageNo: pagination.current, |
|
|
|
|
pageSize: pagination.pageSize, |
|
|
|
|
}, |
|
|
|
|
}) |
|
|
|
|
.then((result) => { |
|
|
|
|
// params: { |
|
|
|
|
// pageNo: pagination.current, |
|
|
|
|
// pageSize: pagination.pageSize, |
|
|
|
|
// }, |
|
|
|
|
params: { pageNo: 1, pageSize: 30 }, |
|
|
|
|
}).then((result) => { |
|
|
|
|
// 后台查询回来的 total，数据总数量 |
|
|
|
|
pagination.total = result.total; |
|
|
|
|
// pagination.total = result.total; |
|
|
|
|
// 将查询的数据赋值给 dataSource |
|
|
|
|
dataSource.value = result.records; |
|
|
|
|
// 重置选择 |
|
|
|
|
@ -134,17 +125,17 @@ function handleTableSave({ $table, target }) { |
|
|
|
|
// 获取所有数据 |
|
|
|
|
let tableData = target.getTableData(); |
|
|
|
|
console.log('当前保存的数据是：', tableData); |
|
|
|
|
// 获取新增的数据 |
|
|
|
|
/* // 获取新增的数据 |
|
|
|
|
let newData = target.getNewData(); |
|
|
|
|
console.log('-- 新增的数据：', newData); |
|
|
|
|
// 获取删除的数据 |
|
|
|
|
let deleteData = target.getDeleteData(); |
|
|
|
|
console.log('-- 删除的数据：', deleteData); |
|
|
|
|
console.log('-- 删除的数据：', deleteData);*/ |
|
|
|
|
// 【模拟保存】 |
|
|
|
|
loading.value = true; |
|
|
|
|
defHttp |
|
|
|
|
.post({ |
|
|
|
|
url: Api.saveAll, |
|
|
|
|
url: Api.saveAll4ProjectFeeBudget+'/'+route.query.id, |
|
|
|
|
params: tableData, |
|
|
|
|
}) |
|
|
|
|
.then(() => { |
|
|
|
|
@ -158,7 +149,7 @@ function handleTableSave({ $table, target }) { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 触发单元格删除事件 |
|
|
|
|
function handleTableRemove(event) { |
|
|
|
|
/*function handleTableRemove(event) { |
|
|
|
|
// 把 event.deleteRows 传给后台进行删除（注意：这里不会传递前端逻辑新增的数据，因为不需要请求后台删除） |
|
|
|
|
console.log('待删除的数据: ', event.deleteRows); |
|
|
|
|
// 也可以只传ID，因为可以根据ID删除 |
|
|
|
|
@ -173,7 +164,7 @@ function handleTableRemove(event) { |
|
|
|
|
// 假设后台返回删除成功，必须要调用 confirmRemove() 方法，才会真正在表格里移除（会同时删除选中的逻辑新增的数据） |
|
|
|
|
event.confirmRemove(); |
|
|
|
|
}, 1000); |
|
|
|
|
} |
|
|
|
|
}*/ |
|
|
|
|
|
|
|
|
|
// 单元格编辑完成之后触发的事件 |
|
|
|
|
function handleEditClosed(event) { |
|
|
|
|
@ -206,14 +197,14 @@ function handleEditClosed(event) { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 当分页参数变化时触发的事件 |
|
|
|
|
/*// 当分页参数变化时触发的事件 |
|
|
|
|
function handlePageChange(event) { |
|
|
|
|
// 重新赋值 |
|
|
|
|
pagination.current = event.current; |
|
|
|
|
pagination.pageSize = event.pageSize; |
|
|
|
|
// 查询数据 |
|
|
|
|
loadData(); |
|
|
|
|
} |
|
|
|
|
}*/ |
|
|
|
|
|
|
|
|
|
// 当选择的行变化时触发的事件 |
|
|
|
|
function handleSelectRowChange(event) { |
|
|
|
|
|
zhc077
3 weeks ago