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