Files
tms-erp-web/src/option/settlement/formalSettlement.js
T
gxwebsoft 09ce6472b0 refactor(settlement): 全面重构结算相关页面为 avue-crud 组件
- formal-settlement.vue 中移除旧搜索区,移除多余样式,实现结算表格面板按激活标签条件渲染
- 替换 formal-settlement-table-panel.vue 为基于 avue-crud,简化表格和操作,优化分页和搜索事件处理
- 新版 formal-settlement 中统一使用 onLoad 替代 loadTable 方法,简化数据加载逻辑
- 删除不必要的样式代码,统一表格奇偶行背景颜色,调整整体样式提升视觉一致性
- 结算导入页面 settlement-import.vue 同样迁移至 avue-crud 组件实现,实现搜索、分页、刷新等功能事件解耦
- 优化分页数据结构,统一使用 currentPage 和 pageSize 命名,支持多页容量选择
- 调整部分接口调用及事件回调,保障新组件兼容已有业务流程及权限控制
- 移除废弃的内部变量与混入,针对权限控制和字段渲染进行明确封装和暴露
- 保持功能行为不变的前提下提升代码可维护性和复用性,增强组件封装与状态同步能力
2026-10-20 18:57:28 +08:00

174 lines
5.3 KiB
JavaScript

/**
* 正式结算单列表(avue-crud)配置
* ------------------------------------------------------------------
* 列表页与其它模块统一使用 avue-crud,头部 4 个按钮(刷新 / 列显隐 / 搜索显隐 /
* 显示方式)由 avue-crud 自带,不做二次封装。
*
* 表格列复用 formalSettlementTable.js 的 formalSettlementTableColumns(与弹窗内
* 明细表共用同一份列定义),此处只补充 avue 需要的展示/搜索属性,避免两处维护。
*
* ⚠️ searchOrder 为降序排序,值越大越靠前。
* ⚠️ 仅用于搜索的列必须 hide + showColumn: false,否则会混进「列显隐」抽屉。
* ⚠️ column 数组顺序 = 表格列顺序,搜索专用列统一放在数组最前面。
*/
import {
approvalStatusOptions,
invoiceStatusOptions,
kingdeeSyncStatusOptions,
paymentStatusOptions,
} from './formalSettlementSearch';
import { formalSettlementTableColumns } from './formalSettlementTable';
const textFormatter = (row, value) =>
value === null || value === undefined || value === '' ? '-' : value;
/** 金额统一展示:两位小数 + 币种 */
const moneyFormatter = (row, value) =>
`${Number(value || 0).toFixed(2)} ${row?.currency || 'RMB'}`;
const pickLabel = (options, value) =>
options.find(item => item.value === value)?.label || value || '-';
const searchOnlyColumn = ({ label, prop, searchOrder, type = 'input', dicData }) => {
const column = {
label,
prop,
search: true,
searchOrder,
searchSpan: 5,
hide: true,
showColumn: false,
addDisplay: false,
editDisplay: false,
viewDisplay: false,
};
if (type === 'select') {
column.type = 'select';
column.searchPlaceholder = '请选择';
column.dicData = dicData || [];
} else if (type === 'daterange') {
column.type = 'daterange';
column.searchType = 'daterange';
column.searchPlaceholder = '请选择';
} else {
column.searchPlaceholder = '请输入';
}
return column;
};
/** 表格列的 avue 增量配置:搜索项、插槽、覆盖宽度等 */
const COLUMN_EXTRA = {
formalSettlementNo: {
slot: true,
search: true,
searchSpan: 5,
searchOrder: 12,
searchPlaceholder: '请输入',
},
payerName: { search: true, searchSpan: 5, searchOrder: 7, searchPlaceholder: '请输入' },
payeeName: { search: true, searchSpan: 5, searchOrder: 6, searchPlaceholder: '请输入' },
projectName: { search: true, searchSpan: 5, searchOrder: 11, searchPlaceholder: '请输入' },
deptName: { search: true, searchslot: true, searchSpan: 5, searchOrder: 10 },
contractNo: { search: true, searchSpan: 5, searchOrder: 9, searchPlaceholder: '请输入' },
invoiceStatusName: { slot: true },
paymentStatusName: { slot: true },
approvalStatusName: { slot: true },
adjustFlag: {
formatter: row => row.adjustStatusName || (row.originFormalSettlementNo ? '调整后单' : '-'),
},
kingdeeSyncStatus: {
slot: true,
search: true,
type: 'select',
dicData: kingdeeSyncStatusOptions,
searchSpan: 5,
searchOrder: 2,
searchPlaceholder: '请选择',
},
kingdeeLockStatus: { slot: true },
createTime: { width: 180 },
};
const buildTableColumns = () =>
formalSettlementTableColumns.map(column => {
const extra = { ...(COLUMN_EXTRA[column.prop] || {}) };
if (column.money) {
extra.formatter = moneyFormatter;
extra.align = 'right';
}
// link / status 标记的列统一走单元格插槽
if (column.link || column.status) extra.slot = true;
if (!extra.formatter) extra.formatter = textFormatter;
return { ...column, ...extra };
});
export const formalSettlementOption = () => ({
height: 'auto',
calcHeight: 32,
tip: false,
searchBtnText: '查询',
emptyBtnText: '重置',
searchShow: true,
searchIcon: true,
searchLabelWidth: 88,
// 查询/重置紧跟首行 4 个条件(4×5 + 菜单 4 = 24),不再独占下一整行
searchMenuSpan: 4,
searchIndex: 4,
searchMenuPosition: 'right',
border: true,
index: true,
indexLabel: '序号',
indexWidth: 64,
indexFixed: 'left',
selection: true,
selectionWidth: 52,
selectionFixed: 'left',
addBtn: false,
viewBtn: false,
delBtn: false,
editBtn: false,
menuWidth: 320,
menuFixed: 'right',
column: [
// ---------- 仅搜索列 ----------
searchOnlyColumn({
label: '预付结算单号',
prop: 'preSettlementNo',
searchOrder: 8,
}),
searchOnlyColumn({
label: '发票状态',
prop: 'invoiceStatus',
searchOrder: 5,
type: 'select',
dicData: invoiceStatusOptions,
}),
searchOnlyColumn({
label: '收付款状态',
prop: 'paymentStatus',
searchOrder: 4,
type: 'select',
dicData: paymentStatusOptions,
}),
searchOnlyColumn({
label: '审核状态',
prop: 'approvalStatus',
searchOrder: 3,
type: 'select',
dicData: approvalStatusOptions,
}),
searchOnlyColumn({
label: '生成日期',
prop: 'createDateRange',
searchOrder: 1,
type: 'daterange',
}),
// ---------- 表格列(部分兼搜索项) ----------
...buildTableColumns(),
],
});
export const kingdeeSyncName = value => pickLabel(kingdeeSyncStatusOptions, value);
export const paymentStatusName = value => pickLabel(paymentStatusOptions, value);