在底部统计所有的本期总电量和本期总水量,根据文档里的来没有效果。

我用默认表单是可以显示底部统计数据的,换成自定义表单就不生效了。自定义表单里写了自动计算金额的js增强,自定义表单不知道支不支持实现底部附表统计的,支持的话要哪里调整修改一下。



// 计算缴费总和
function sumFun(bqsfjf, bqdfjf) {
return (parseFloat(bqsfjf) || 0) + (parseFloat(bqdfjf) || 0)
}
// 计算每期电量差(本期电量 - 上期电量)
function sumFunDfl(sqdfds, bqdfds) {
return (parseFloat(bqdfds) || 0) - (parseFloat(sqdfds) || 0)
}
/**
* 计算本期水电总额(抄表子表所有行的 sum_all 总和)
*/
function calculateBqsdze() {
if (!formData.value.sub_tab_cbsf?.tb_sdfzb_cbsf ||
!Array.isArray(formData.value.sub_tab_cbsf.tb_sdfzb_cbsf)) {
return 0
}
const rows = formData.value.sub_tab_cbsf.tb_sdfzb_cbsf
let total = 0
rows.forEach(row => {
if (row && row.sum_all !== undefined) {
total += parseFloat(row.sum_all) || 0
}
})
// 保留2位小数
return Number(total.toFixed(2))
}
/**
* 更新 tb_sdfzb_jf 中的 bqsdze 字段
*/
function updateBqsdze() {
if (!formData.value.tb_sdfzb_jf) {
formData.value.tb_sdfzb_jf = { bqsfjf: 0, bqdfjf: 0, sum_bqjfzfy: 0, bqsdze: 0 }
}
const newBqsdze = calculateBqsdze()
const oldBqsdze = parseFloat(formData.value.tb_sdfzb_jf.bqsdze) || 0
if (Math.abs(newBqsdze - oldBqsdze) > 0.001) { // 使用一个小阈值来比较浮点数
formData.value.tb_sdfzb_jf.bqsdze = newBqsdze
console.log('更新本期水电总额:', newBqsdze)
return true
}
return false
}
return {
/**
* 初始化数据:将后端返回的数据结构转换为前端展示所需的结构
*/
initData(formData) {
return new Promise(resolve => {
console.log('初始化原始数据:', JSON.stringify(formData))
if (!formData) {
formData = {}
}
// 创建 sub_tab_cbsf 对象
if (!formData.sub_tab_cbsf) {
formData.sub_tab_cbsf = {}
}
// 将 tb_sdfzb_cbsf 数组移动到 sub_tab_cbsf 对象下
if (formData.tb_sdfzb_cbsf && Array.isArray(formData.tb_sdfzb_cbsf)) {
formData.sub_tab_cbsf.tb_sdfzb_cbsf = formData.tb_sdfzb_cbsf
delete formData.tb_sdfzb_cbsf
} else {
formData.sub_tab_cbsf.tb_sdfzb_cbsf = []
}
// 确保 tb_sdfzb_jf 存在
if (!formData.tb_sdfzb_jf) {
formData.tb_sdfzb_jf = { bqsfjf: 0, bqdfjf: 0, sum_bqjfzfy: 0 }
}
console.log('初始化处理后数据:', JSON.stringify(formData))
resolve(formData)
})
},
/**
* 提交前处理:将前端数据结构转换回后端需要的结构
*/
beforeSubmit(submitData) {
return new Promise((resolve, reject) => {
console.log('提交前数据:', JSON.stringify(submitData))
// 1. 处理子表数据:将 sub_tab_cbsf.tb_sdfzb_cbsf 移回顶层
if (submitData.sub_tab_cbsf && submitData.sub_tab_cbsf.tb_sdfzb_cbsf) {
submitData.tb_sdfzb_cbsf = submitData.sub_tab_cbsf.tb_sdfzb_cbsf
} else {
submitData.tb_sdfzb_cbsf = []
}
// 2. 处理缴费对象:将 tb_sdfzb_jf 对象包装成数组
if (submitData.tb_sdfzb_jf) {
submitData.tb_sdfzb_jf = [submitData.tb_sdfzb_jf]
} else {
submitData.tb_sdfzb_jf = [{}]
}
// 3. 清理临时字段
if (submitData.sub_tab_cbsf) {
delete submitData.sub_tab_cbsf.tb_sdfzb_cbsf
}
if (submitData.tb_sdfzb_cbsf && Array.isArray(submitData.tb_sdfzb_cbsf)) {
submitData.tb_sdfzb_cbsf.forEach(row => {
delete row.$cellEdit
delete row.$index
})
}
console.log('提交处理后数据:', JSON.stringify(submitData))
resolve(submitData)
})
},
/**
* 初始化选项:设置各种监听器,实现自动计算功能
*/
initOption() {
console.log('initOption执行,当前数据:', JSON.parse(JSON.stringify(formData.value)))
// 确保数据结构存在
function ensureDataStructure() {
if (!formData.value.sub_tab_cbsf) {
formData.value.sub_tab_cbsf = { tb_sdfzb_cbsf: [] }
}
if (!formData.value.sub_tab_cbsf.tb_sdfzb_cbsf) {
formData.value.sub_tab_cbsf.tb_sdfzb_cbsf = []
}
if (!formData.value.tb_sdfzb_jf) {
formData.value.tb_sdfzb_jf = { bqsfjf: 0, bqdfjf: 0, sum_bqjfzfy: 0 }
}
}
/**
* 计算单行数据
*/
function calculateSingleRow(row, index) {
if (typeof row !== 'object' || row === null) {
return false
}
let hasChanges = false
// 电量相关计算
const sqdfds = parseFloat(row.sqdfds) || 0
const bqdfds = parseFloat(row.bqdfds) || 0
const bqdfl = bqdfds - sqdfds
const dfdj = parseFloat(row.dfdj) || 0
const sum_money = Number((dfdj * bqdfl).toFixed(2))
// 水费相关计算
const sqsfds = parseFloat(row.sqsfds) || 0
const bqsfds = parseFloat(row.bqsfds) || 0
const bqsfl = bqsfds - sqsfds
const sfdj = parseFloat(row.sfdj) || 0
const sum_sfbqzfy = Number((sfdj * bqsfl).toFixed(2))
// 合计金额
const sum_all = Number((sum_money + sum_sfbqzfy).toFixed(2))
// 更新值并记录变化
if (row.bqdfl !== bqdfl) {
row.bqdfl = bqdfl
hasChanges = true
}
if (row.sum_money !== sum_money) {
row.sum_money = sum_money
hasChanges = true
}
if (row.bqsfl !== bqsfl) {
row.bqsfl = bqsfl
hasChanges = true
}
if (row.sum_sfbqzfy !== sum_sfbqzfy) {
row.sum_sfbqzfy = sum_sfbqzfy
hasChanges = true
}
if (row.sum_all !== sum_all) {
row.sum_all = sum_all
hasChanges = true
}
if (hasChanges) {
console.log(`第${index}行数据更新:`, {
bqdfl, sum_money, bqsfl, sum_sfbqzfy, sum_all
})
}
return hasChanges
}
/**
* 计算所有行的数据
*/
function calculateAllRows() {
if (!formData.value.sub_tab_cbsf?.tb_sdfzb_cbsf ||
!Array.isArray(formData.value.sub_tab_cbsf.tb_sdfzb_cbsf)) {
return false
}
const rows = formData.value.sub_tab_cbsf.tb_sdfzb_cbsf
let hasAnyChanges = false
rows.forEach((row, index) => {
if (!row) return
const rowChanged = calculateSingleRow(row, index)
if (rowChanged) {
hasAnyChanges = true
}
})
// 如果有行数据变化,更新本期水电总额
if (hasAnyChanges) {
const bqsdzeUpdated = updateBqsdze()
if (bqsdzeUpdated) {
hasAnyChanges = true
}
}
return hasAnyChanges
}
/**
* 根据路径计算特定行
*/
function calculateRowByPath(path) {
if (!path) return false
const match = path.match(/sub_tab_cbsf\.tb_sdfzb_cbsf\[(\d+)\]/)
if (match && formData.value.sub_tab_cbsf?.tb_sdfzb_cbsf) {
const index = parseInt(match[1])
const rows = formData.value.sub_tab_cbsf.tb_sdfzb_cbsf
if (rows && rows[index]) {
const rowChanged = calculateSingleRow(rows[index], index)
if (rowChanged) {
// 行数据变化后更新本期水电总额
updateBqsdze()
return true
}
}
}
return false
}
// ==================== 监听器设置 ====================
// 1. 监听整个子表数组的变化
useFun.setPropConfig('sub_tab_cbsf.tb_sdfzb_cbsf', {
change: ({ value }) => {
console.log('子表数据整体变化:', value)
setTimeout(() => {
const hasChanges = calculateAllRows()
if (hasChanges) {
formData.value = { ...formData.value }
}
}, 50)
}
})
// 2. 监听各个字段的变化
const fieldsToWatch = ['sqdfds', 'bqdfds', 'dfdj', 'sqsfds', 'bqsfds', 'sfdj']
fieldsToWatch.forEach(field => {
useFun.setPropConfig(field, {
change: ({ value, path }) => {
console.log(`${field}变化:`, value, 'path:', path)
setTimeout(() => {
const hasChanges = calculateRowByPath(path)
if (hasChanges) {
formData.value = { ...formData.value }
}
}, 30)
}
})
})
// 3. 监听缴费字段
useFun.setPropConfig('bqsfjf', {
change: ({ value }) => {
if (formData.value.tb_sdfzb_jf) {
const bqsfjf = parseFloat(value) || 0
const bqdfjf = parseFloat(formData.value.tb_sdfzb_jf.bqdfjf) || 0
const newSum = bqsfjf + bqdfjf
if (formData.value.tb_sdfzb_jf.sum_bqjfzfy !== newSum) {
formData.value.tb_sdfzb_jf.sum_bqjfzfy = newSum
formData.value = { ...formData.value }
}
}
}
})
useFun.setPropConfig('bqdfjf', {
change: ({ value }) => {
if (formData.value.tb_sdfzb_jf) {
const bqdfjf = parseFloat(value) || 0
const bqsfjf = parseFloat(formData.value.tb_sdfzb_jf.bqsfjf) || 0
const newSum = bqsfjf + bqdfjf
if (formData.value.tb_sdfzb_jf.sum_bqjfzfy !== newSum) {
formData.value.tb_sdfzb_jf.sum_bqjfzfy = newSum
formData.value = { ...formData.value }
}
}
}
})
// 4. 监听表格操作
useFun.setPropConfig('addRow', {
click: () => {
setTimeout(() => {
const hasChanges = calculateAllRows()
// 确保总额也被更新
updateBqsdze()
if (hasChanges) {
formData.value = { ...formData.value }
}
}, 100)
}
})
useFun.setPropConfig('deleteRow', {
click: () => {
setTimeout(() => {
const hasChanges = calculateAllRows()
// 确保总额也被更新
updateBqsdze()
if (hasChanges) {
formData.value = { ...formData.value }
}
}, 100)
}
})
// ==================== 初始化 ====================
setTimeout(() => {
ensureDataStructure()
const hasChanges = calculateAllRows()
// 初始化时也计算一次总额
updateBqsdze()
if (hasChanges) {
formData.value = { ...formData.value }
}
console.log('初始化完成,当前数据结构:', {
hasSubTabCbsf: !!formData.value?.sub_tab_cbsf,
rowCount: formData.value?.sub_tab_cbsf?.tb_sdfzb_cbsf?.length || 0,
hasJf: !!formData.value?.tb_sdfzb_jf
})
}, 200)
// ==================== 定时器作为后备机制 ====================
setInterval(() => {
if (formData.value.sub_tab_cbsf?.tb_sdfzb_cbsf) {
const hasChanges = calculateAllRows()
if (hasChanges) {
console.log('定时器触发更新')
formData.value = { ...formData.value }
}
}
}, 300) // 每300ms检查一次
}
}
测试正常,看一下是不是你写错了: https://doc.jeelowcode.com/doc/1800-1-9