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 命名，支持多页容量选择 - 调整部分接口调用及事件回调，保障新组件兼容已有业务流程及权限控制 - 移除废弃的内部变量与混入，针对权限控制和字段渲染进行明确封装和暴露 - 保持功能行为不变的前提下提升代码可维护性和复用性，增强组件封装与状态同步能力
This commit is contained in:
@@ -0,0 +1,31 @@
|
||||
# 2026-10-20
|
||||
|
||||
## settlement-import 列表页工具栏对齐 receipt-settlement
|
||||
|
||||
- `src/views/settlement/settlement-import.vue`：
|
||||
- 左侧只保留「新增」（`type="primary"`），删掉原来的 `plain` 文字「刷新」按钮（刷新统一收进右侧图标组，与 receipt-settlement / settlement-adjustment 一致）。
|
||||
- 右侧接入 `<settlement-table-tools>`（`./components/settlement-table-tools.vue`，即 `table-header-tools` 包装）：刷新 / 列设置 / 搜索显隐 / 表格尺寸 4 键，`@refresh="refreshTable"`。
|
||||
- 表格列改为配置化，新增 `src/option/settlement/settlementImportTable.js`（`settlementImportTableColumns`），页面加 `tableColumns / visibleColumnKeys / tableSize / columnSettingOptions / visibleTableColumns`，`el-table` 加 `:size="tableSize"`。
|
||||
- 列渲染标志：`link / status / enum / billType / count`（注意**不能用 `type` 作 key**，`type` 是 el-table-column 真实 prop，会把列变成 selection/index 列）。
|
||||
- 新增 `displayValue()`；`settlementBillTypeLabel('')` 返回 `-`。
|
||||
- 序号列改 `fixed="left"`；数据列与操作列统一 `align: 'center'`，操作链接 `justify-content: center`。
|
||||
- 校验方式（无 dev server 时）：项目根目录临时 `sfc-check.mjs` 用 `vue/compiler-sfc` 的 `parse + compileTemplate + compileScript`；SCSS 用 `sass.compileString`。用完即删。
|
||||
|
||||
## 追加：用户要求「列显隐 + 显示方式」→ 两个页面改 avue-crud
|
||||
|
||||
用户反馈上面那版不对：右侧工具按钮必须是 **avue-crud 原生**的 4 键，第 2 键是「列显隐」抽屉（不是「列设置」勾选弹窗），第 4 键是「显示方式」（表格↔卡片），不是表格尺寸循环。确认后范围：`settlement-import` + `formal-settlement`（receipt/payment 共用）都改 avue-crud。
|
||||
|
||||
- 关键结论：**「列显隐 + 显示方式」只有 avue-crud 原生才有**，avue 的 `dialog-column` 依赖 `inject: ['crud']`，脱离 avue-crud 拿不出来；`table-header-tools` 只是仿制件，做不到。所以目标页只能整页改 avue-crud。
|
||||
- avue 右侧按钮源码：`node_modules/@smallwei/avue/lib/packages/element-plus/crud/menu/header-menu3.js`（refreshBtn/columnBtn/searchBtn/gridBtn，`gridBtn` → `handleGridShow()` 切 `gridShow` 表格↔卡片）；图标默认配置在同目录 `config.js`。
|
||||
- 新增 `src/option/settlement/settlementImport.js`（`settlementImportOption`）、`src/option/settlement/formalSettlement.js`（`formalSettlementOption`，表格列复用 `formalSettlementTable.js` 的 `formalSettlementTableColumns` + `COLUMN_EXTRA` 增量配置，避免两处维护）。
|
||||
- `settlement-import.vue` 整页改 avue-crud（删除手写的搜索区/表格/分页）；`formal-settlement-table-panel.vue` 由 el-table 改成包一层 `<avue-crud>`，父页面保留数据加载与全部业务动作。
|
||||
- ⚠️ **avue 的搜索自定义控件要用 `column.renderSearch`（`h()` 渲染），不能用 `searchslot`** —— avue 3.9.2 根本不读 `searchslot`（全库无此字段），而 `searchslot: true` 还会被 `header-search2.js` 的 `searchXxx → xxx` 映射成 `slot: true`。真正的搜索插槽是 avue-crud 上 `${prop}-search`（`crud.searchSlot`，见 `index2.js` `getSlotList(["-search"])`），但其作用域**没有 `row`**（只有 value/column/label/size/readonly/disabled/dic），`mileage-record.vue` 用 `{ row }` 是错的。已用于批次号下拉（filterable + allowCreate）。
|
||||
- avue `formatter` 签名确认：`detail.js` → `column.formatter(row, row[column.prop], result, column)`。
|
||||
- `on-load` 由 `table-page2.js` 在 created / 翻页 / 改页容量时触发，参数是内部 `defaultPage`（已 `Object.assign` 合并外部 page）。
|
||||
- 分页透传写法（父持 page、子包 avue-crud）：子组件用 computed `crudPage{get/set}`，setter 里 `Object.assign(this.page, value)` 原地回写，避免 prop 直接赋值告警。
|
||||
- ⚠️ `src/option/settlement/formalSettlementTable.js` **不能删** —— `formal-settlement-editor.vue` 还从它导入 `candidateColumns/candidateDetailColumns/detailColumns/sourceColumns/summaryColumns`（我一度删掉，Vite 转换报错后从 HEAD 恢复）。
|
||||
- 校验方式升级：沙箱里 curl 不通 dev server（502），改用 `vite.createServer({ middlewareMode:true })` + `server.transformRequest(path)` 就地转换，能同时暴露依赖解析失败（如上面误删文件）。脚本用完即删。
|
||||
|
||||
## 遗留未改（仍用 table-header-tools 仿制件）
|
||||
|
||||
pre-settlement、settlement-adjustment、receivable-payable-detail、transport-reconciliation-table-panel、business/{master-order,loading-manage,voucher-manage}、payment/* 手写页。若用户要全站一致，需逐页改 avue-crud。
|
||||
@@ -69,6 +69,18 @@
|
||||
- 自检：`curl "localhost:2888/src/xxx.vue"` 与 `"...?vue&type=style&index=0&scoped=true&lang.scss"`（200 / 500）。`vite build` 在 `facelogin.vue` 被沙箱中断，不能作唯一校验。dev `VITE_APP_API=/api` 代理 `172.16.203.228:8000`。
|
||||
- 导出：前端 `exportColumns` 后端未用，以 `XxxExportExcel.java` 为准；BladeX `BeanUtil` 类型不兼容静默跳过（`Date` → `LocalDateTime` 丢值，用 `DateUtil.fromDate`）。
|
||||
|
||||
## avue-crud 才是「右侧 4 键」的唯一来源（2026-10-20 定论）
|
||||
用户要的右侧工具栏是 **avue-crud 原生**：刷新 / **列显隐**（el-drawer，含 隐藏/冻结/过滤/排序 + 行拖拽）/ 搜索显隐 / **显示方式**（表格↔卡片）。
|
||||
- 源码：`node_modules/@smallwei/avue/lib/packages/element-plus/crud/menu/header-menu3.js`（refreshBtn/columnBtn/searchBtn/gridBtn），`gridBtn` → `handleGridShow()` 切 `gridShow`；图标默认在同目录 `config.js`。「列显隐」文案来自 avue 语言包 `crud.showTitle`（项目 `src/lang/zh.js` 已覆盖）。
|
||||
- **列显隐抽屉依赖 `inject: ['crud']`，脱离 avue-crud 拿不出来**；`components/table-header-tools` 的「列设置勾选弹窗 + 表格尺寸循环」是仿制件，**做不到这两点**。所以「要和 avue 一致」= 整页改用 avue-crud，没有中间方案。
|
||||
- ⚠️ 搜索自定义控件用 `column.renderSearch = scope => h(...)`（`scope.row` 可用，同 `mixins/organization-search.js`）。**不要用 `searchslot`**：avue 3.9.2 全库无此字段，且 `header-search2.js` 的 `searchXxx → xxx` 映射会把 `searchslot` 变成 `slot: true`。
|
||||
- avue-crud 上的 `${prop}-search` 插槽确实存在（`index2.js` 的 `getSlotList(["-search"])`），但**作用域没有 `row`**（只有 value/column/label/size/readonly/disabled/dic）——`mileage-record.vue` 里 `{ row }` 是错的写法，别照抄。
|
||||
- `formatter` 签名：`detail.js` → `column.formatter(row, row[column.prop], result, column)`。
|
||||
- `on-load` 由 `table-page2.js` 在 created / 翻页 / 改页容量时触发，参数是内部 `defaultPage`（已合并外部 page）。分页若由父组件持有、子组件包一层 avue-crud，用 computed `crudPage{get/set}` + setter 里 `Object.assign(this.page, value)` 原地回写。
|
||||
- 已改：settlement-import.vue、formal-settlement.vue + components/formal-settlement-table-panel.vue（receipt/payment 共用）。未改：pre-settlement、settlement-adjustment、receivable-payable-detail、transport-reconciliation-table-panel、business 与 payment 的手写页。
|
||||
- ⚠️ `src/option/settlement/formalSettlementTable.js` 别删：`formal-settlement-editor.vue` 还依赖它的 candidate/detail/source/summary 列。
|
||||
- 沙箱里 curl 打不通本地 dev server（一律 502）。改用 `vite.createServer({middlewareMode:true})` + `server.transformRequest(path)` 就地转换校验，还能暴露依赖解析失败。
|
||||
|
||||
## Element Plus 图标两种用法的机制差异（易误判）
|
||||
`main.js` 里 `for (...ElementPlusIconsVue) app.component(key, component)` 全局注册了全部图标，因此模板里可以写标签形式 `<Location />`（靠全局注册解析）。
|
||||
但 `:icon="OfficeBuilding"` 是**表达式**，编译成 `_ctx.OfficeBuilding`，只会从 data / props / computed / setup 返回值里取 —— **组件对象必须放进 `data()`**；放进 `components: {}` 注册里模板取不到，会静默渲染不出图标（不报错，只是空白）。
|
||||
|
||||
@@ -0,0 +1,173 @@
|
||||
/**
|
||||
* 正式结算单列表（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);
|
||||
@@ -0,0 +1,157 @@
|
||||
/**
|
||||
* 导入结算单列表（avue-crud）配置
|
||||
* ------------------------------------------------------------------
|
||||
* 列表页与其它模块统一使用 avue-crud，头部 4 个按钮（刷新 / 列显隐 / 搜索显隐 /
|
||||
* 显示方式）由 avue-crud 自带，不做二次封装。
|
||||
*
|
||||
* ⚠️ searchOrder 为降序排序，值越大越靠前。
|
||||
* ⚠️ 仅用于搜索的列必须 hide + showColumn: false，否则会混进「列显隐」抽屉。
|
||||
*/
|
||||
|
||||
const IMPORT_STATUS_OPTIONS = [
|
||||
{ label: '草稿', value: 'draft' },
|
||||
{ label: '已完成', value: 'completed' },
|
||||
{ label: '已作废', value: 'voided' },
|
||||
];
|
||||
|
||||
const SETTLEMENT_TYPE_OPTIONS = [
|
||||
{ label: '应收', value: 'receivable' },
|
||||
{ label: '应付', value: 'payable' },
|
||||
];
|
||||
|
||||
const textFormatter = (row, value) =>
|
||||
value === null || value === undefined || value === '' ? '-' : value;
|
||||
|
||||
const pickLabel = (options, value) =>
|
||||
options.find(item => item.value === value)?.label || value || '-';
|
||||
|
||||
const settlementTypeLabel = value => pickLabel(SETTLEMENT_TYPE_OPTIONS, value);
|
||||
|
||||
const billTypeLabel = value => (value === 'pre' ? '预结算单' : value ? '正式结算单' : '-');
|
||||
|
||||
export const importStatusLabel = value => pickLabel(IMPORT_STATUS_OPTIONS, value);
|
||||
|
||||
export const settlementImportOption = () => ({
|
||||
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: false,
|
||||
addBtn: false,
|
||||
viewBtn: false,
|
||||
delBtn: false,
|
||||
editBtn: false,
|
||||
menuWidth: 220,
|
||||
menuFixed: 'right',
|
||||
column: [
|
||||
// ---------- 搜索项（前 4 项默认展示，其余折叠；searchOrder 越大越靠前） ----------
|
||||
{
|
||||
label: '状态',
|
||||
prop: 'importStatus',
|
||||
type: 'select',
|
||||
search: true,
|
||||
searchSpan: 5,
|
||||
searchOrder: 6,
|
||||
searchPlaceholder: '请选择',
|
||||
dicData: IMPORT_STATUS_OPTIONS,
|
||||
hide: true,
|
||||
showColumn: false,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
viewDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '导入类型',
|
||||
prop: 'settlementType',
|
||||
type: 'select',
|
||||
search: true,
|
||||
searchSpan: 5,
|
||||
searchOrder: 5,
|
||||
searchPlaceholder: '请选择',
|
||||
dicData: SETTLEMENT_TYPE_OPTIONS,
|
||||
hide: true,
|
||||
showColumn: false,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
viewDisplay: false,
|
||||
},
|
||||
// ---------- 表格列 ----------
|
||||
{
|
||||
label: '导入批次号',
|
||||
prop: 'batchNo',
|
||||
slot: true,
|
||||
search: true,
|
||||
searchSpan: 5,
|
||||
searchOrder: 7,
|
||||
searchPlaceholder: '请选择',
|
||||
minWidth: 160,
|
||||
},
|
||||
{ label: '状态', prop: 'importStatusName', slot: true, width: 100, align: 'center' },
|
||||
{
|
||||
label: '导入类型',
|
||||
prop: 'settlementTypeName',
|
||||
minWidth: 100,
|
||||
align: 'center',
|
||||
formatter: (row, value) => value || settlementTypeLabel(row.settlementType),
|
||||
},
|
||||
{
|
||||
label: '结算单',
|
||||
prop: 'settlementBillTypeName',
|
||||
minWidth: 110,
|
||||
align: 'center',
|
||||
formatter: (row, value) => value || billTypeLabel(row.settlementBillType),
|
||||
},
|
||||
{
|
||||
label: '项目',
|
||||
prop: 'projectName',
|
||||
search: true,
|
||||
searchSpan: 5,
|
||||
searchOrder: 4,
|
||||
searchPlaceholder: '请输入',
|
||||
minWidth: 140,
|
||||
formatter: textFormatter,
|
||||
},
|
||||
{
|
||||
label: '客户',
|
||||
prop: 'customerName',
|
||||
search: true,
|
||||
searchSpan: 5,
|
||||
searchOrder: 3,
|
||||
searchPlaceholder: '请输入',
|
||||
minWidth: 140,
|
||||
formatter: textFormatter,
|
||||
},
|
||||
{
|
||||
label: '承运商',
|
||||
prop: 'carrierName',
|
||||
search: true,
|
||||
searchSpan: 5,
|
||||
searchOrder: 2,
|
||||
searchPlaceholder: '请输入',
|
||||
minWidth: 140,
|
||||
formatter: textFormatter,
|
||||
},
|
||||
{
|
||||
label: '明细行数',
|
||||
prop: 'detailCount',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
formatter: row => row.detailCount ?? row.waybillCount ?? 0,
|
||||
},
|
||||
{ label: '创建时间', prop: 'createTime', width: 180, align: 'center', formatter: textFormatter },
|
||||
{ label: '创建人', prop: 'createUserName', minWidth: 110, formatter: textFormatter },
|
||||
],
|
||||
});
|
||||
@@ -1,155 +1,100 @@
|
||||
<template>
|
||||
<div class="fs-table-panel">
|
||||
<div class="fs-table-panel__toolbar">
|
||||
<div>
|
||||
<el-button
|
||||
v-if="hasPermission('add')"
|
||||
type="primary"
|
||||
@click="$emit('create')"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="showPaymentAction && hasPermission('payment')"
|
||||
type="primary"
|
||||
plain
|
||||
:disabled="!selection.length"
|
||||
@click="$emit('payment')"
|
||||
>付款申请</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="hasPermission('sync')"
|
||||
type="primary"
|
||||
plain
|
||||
:disabled="!selection.length"
|
||||
:loading="syncLoading"
|
||||
@click="$emit('sync')"
|
||||
>同步金蝶</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="hasPermission('print')"
|
||||
type="primary"
|
||||
plain
|
||||
@click="emitSingle('print')"
|
||||
>打印结算单</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="hasPermission('export')"
|
||||
type="primary"
|
||||
plain
|
||||
@click="$emit('export')"
|
||||
>导出</el-button
|
||||
>
|
||||
</div>
|
||||
<settlement-table-tools
|
||||
:columns="columnSettingOptions"
|
||||
v-model:visible-column-keys="visibleColumnKeys"
|
||||
v-model:table-size="tableSize"
|
||||
:search-visible="searchVisible"
|
||||
@update:search-visible="$emit('update:searchVisible', $event)"
|
||||
@refresh="$emit('refresh')"
|
||||
/>
|
||||
</div>
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
v-loading="loading"
|
||||
:data="rows"
|
||||
:size="tableSize"
|
||||
border
|
||||
highlight-current-row
|
||||
@current-change="handleCurrentChange"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
|
||||
<el-table-column type="selection" width="52" fixed="left" align="center" />
|
||||
<el-table-column
|
||||
v-for="column in visibleColumns"
|
||||
:key="column.prop"
|
||||
v-bind="column"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
<avue-crud
|
||||
ref="crud"
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="rows"
|
||||
v-model:page="crudPage"
|
||||
@search-change="(params, done) => $emit('search-change', params, done)"
|
||||
@search-reset="$emit('search-reset')"
|
||||
@selection-change="handleSelectionChange"
|
||||
@refresh-change="$emit('refresh')"
|
||||
@on-load="page => $emit('load', page)"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button v-if="hasPermission('add')" type="primary" @click="$emit('create')"
|
||||
>新增</el-button
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-link
|
||||
v-if="column.link && row[column.prop]"
|
||||
type="primary"
|
||||
@click="emitAction('view', row)"
|
||||
>{{ row[column.prop] }}</el-link
|
||||
>
|
||||
<el-tag
|
||||
v-else-if="column.status"
|
||||
:type="statusType(row.approvalStatus)"
|
||||
class="status-text"
|
||||
>{{ displayValue(row[column.prop]) }}</el-tag
|
||||
>
|
||||
<span v-else-if="column.money">{{ formatMoney(row[column.prop], row.currency) }}</span>
|
||||
<span
|
||||
v-else-if="column.prop === 'invoiceStatusName'"
|
||||
:class="['fs-table-panel__invoice-status', `is-${row.invoiceStatus || 'unreceived'}`]"
|
||||
>{{ invoiceName(row.invoiceStatus, row.settlementType) }}</span>
|
||||
<span v-else-if="column.prop === 'paymentStatusName'">{{
|
||||
paymentName(row.paymentStatus)
|
||||
}}</span>
|
||||
<span v-else-if="column.prop === 'kingdeeSyncStatus'">{{
|
||||
kingdeeSyncName(row.kingdeeSyncStatus)
|
||||
}}</span>
|
||||
<span v-else-if="column.prop === 'adjustFlag'">{{ adjustFlag(row) }}</span>
|
||||
<template v-else-if="column.prop === 'kingdeeLockStatus'">
|
||||
<el-tooltip v-if="lockTag(row).show" :content="lockTag(row).tip" placement="top">
|
||||
<el-tag :type="lockTag(row).type" class="status-text">{{ lockTag(row).label }}</el-tag>
|
||||
</el-tooltip>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
<span v-else>{{ displayValue(row[column.prop]) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="320" fixed="right" align="center">
|
||||
<template #default="{ row }"
|
||||
><div class="fs-table-panel__links">
|
||||
<el-link
|
||||
v-for="action in rowActions(row)"
|
||||
:key="action.type"
|
||||
:type="action.danger ? 'danger' : 'primary'"
|
||||
@click="emitAction(action.type, row)"
|
||||
>{{ action.label }}</el-link
|
||||
>
|
||||
</div></template
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fs-table-panel__pagination">
|
||||
<el-pagination
|
||||
:current-page="page.current"
|
||||
:page-size="page.size"
|
||||
:total="page.total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@current-change="current => $emit('page-change', { current, size: page.size })"
|
||||
@size-change="size => $emit('page-change', { current: 1, size })"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-button
|
||||
v-if="showPaymentAction && hasPermission('payment')"
|
||||
type="primary"
|
||||
plain
|
||||
:disabled="!selection.length"
|
||||
@click="$emit('payment')"
|
||||
>付款申请</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="hasPermission('sync')"
|
||||
type="primary"
|
||||
plain
|
||||
:disabled="!selection.length"
|
||||
:loading="syncLoading"
|
||||
@click="$emit('sync')"
|
||||
>同步金蝶</el-button
|
||||
>
|
||||
<el-button v-if="hasPermission('print')" type="primary" plain @click="emitSingle('print')"
|
||||
>打印结算单</el-button
|
||||
>
|
||||
<el-button v-if="hasPermission('export')" type="primary" plain @click="$emit('export')"
|
||||
>导出</el-button
|
||||
>
|
||||
</template>
|
||||
|
||||
<template #formalSettlementNo="{ row }">
|
||||
<el-link type="primary" @click="emitAction('view', row)">{{
|
||||
row.formalSettlementNo || '-'
|
||||
}}</el-link>
|
||||
</template>
|
||||
|
||||
<template #invoiceStatusName="{ row }">
|
||||
<span :class="['fs-invoice-status', `is-${row.invoiceStatus || 'unreceived'}`]">{{
|
||||
invoiceName(row.invoiceStatus, row.settlementType)
|
||||
}}</span>
|
||||
</template>
|
||||
|
||||
<template #paymentStatusName="{ row }">{{ paymentName(row.paymentStatus) }}</template>
|
||||
|
||||
<template #approvalStatusName="{ row }">
|
||||
<el-tag :type="statusType(row.approvalStatus)" class="status-text">{{
|
||||
row.approvalStatusName || '-'
|
||||
}}</el-tag>
|
||||
</template>
|
||||
|
||||
<template #kingdeeSyncStatus="{ row }">{{ kingdeeSyncName(row.kingdeeSyncStatus) }}</template>
|
||||
|
||||
<template #kingdeeLockStatus="{ row }">
|
||||
<el-tooltip v-if="lockTag(row).show" :content="lockTag(row).tip" placement="top">
|
||||
<el-tag :type="lockTag(row).type" class="status-text">{{ lockTag(row).label }}</el-tag>
|
||||
</el-tooltip>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
|
||||
<template #menu="{ row }">
|
||||
<el-link
|
||||
v-for="action in rowActions(row)"
|
||||
:key="action.type"
|
||||
:type="action.danger ? 'danger' : 'primary'"
|
||||
@click="emitAction(action.type, row)"
|
||||
>{{ action.label }}</el-link
|
||||
>
|
||||
</template>
|
||||
</avue-crud>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
invoiceStatusName,
|
||||
kingdeeSyncStatusOptions,
|
||||
paymentStatusOptions,
|
||||
} from '@/option/settlement/formalSettlementSearch';
|
||||
import SettlementTableTools from './settlement-table-tools.vue';
|
||||
import { invoiceStatusName } from '@/option/settlement/formalSettlementSearch';
|
||||
import { kingdeeSyncName, paymentStatusName } from '@/option/settlement/formalSettlement';
|
||||
|
||||
export default {
|
||||
name: 'FormalSettlementTablePanel',
|
||||
components: { SettlementTableTools },
|
||||
props: {
|
||||
option: { type: Object, required: true },
|
||||
rows: { type: Array, default: () => [] },
|
||||
columns: { type: Array, default: () => [] },
|
||||
loading: { type: Boolean, default: false },
|
||||
syncLoading: { type: Boolean, default: false },
|
||||
page: { type: Object, required: true },
|
||||
hasPermission: { type: Function, required: true },
|
||||
mkEnabled: { type: Boolean, default: false },
|
||||
searchVisible: { type: Boolean, default: true },
|
||||
/** 是否展示付款申请按钮（仅付款结算单） */
|
||||
showPaymentAction: { type: Boolean, default: true },
|
||||
billLabel: { type: String, default: '结算单' },
|
||||
@@ -158,66 +103,38 @@ export default {
|
||||
'create',
|
||||
'payment',
|
||||
'sync',
|
||||
'print',
|
||||
'export',
|
||||
'refresh',
|
||||
'page-change',
|
||||
'load',
|
||||
'action',
|
||||
'update:selection',
|
||||
'update:searchVisible',
|
||||
'search-change',
|
||||
'search-reset',
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
selection: [],
|
||||
tableSize: 'default',
|
||||
visibleColumnKeys: [],
|
||||
knownColumnProps: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
columnSettingOptions() {
|
||||
return this.columns.map(column => ({
|
||||
prop: column.prop,
|
||||
label: column.label,
|
||||
}));
|
||||
},
|
||||
visibleColumns() {
|
||||
if (!this.visibleColumnKeys.length) return this.columns;
|
||||
return this.columns.filter(column => this.visibleColumnKeys.includes(column.prop));
|
||||
// 分页对象由父级持有，avue 内部翻页时同步回写同一个对象
|
||||
crudPage: {
|
||||
get() {
|
||||
return this.page;
|
||||
},
|
||||
set(value) {
|
||||
Object.assign(this.page, value || {});
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
columns: {
|
||||
immediate: true,
|
||||
handler(columns) {
|
||||
const props = columns.map(column => column.prop);
|
||||
if (!this.visibleColumnKeys.length) {
|
||||
this.visibleColumnKeys = props;
|
||||
this.knownColumnProps = props;
|
||||
return;
|
||||
}
|
||||
const visible = new Set(this.visibleColumnKeys);
|
||||
const known = new Set(this.knownColumnProps || []);
|
||||
props.forEach(prop => {
|
||||
if (!known.has(prop)) visible.add(prop);
|
||||
});
|
||||
this.knownColumnProps = props;
|
||||
this.visibleColumnKeys = props.filter(prop => visible.has(prop));
|
||||
},
|
||||
},
|
||||
rows() {
|
||||
this.selection = [];
|
||||
this.$refs.tableRef?.clearSelection();
|
||||
this.$refs.crud?.toggleSelection?.();
|
||||
this.$emit('update:selection', this.selection);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleCurrentChange(row) {
|
||||
if (!row && this.selection.length === 1) {
|
||||
this.selection = [];
|
||||
this.$emit('update:selection', this.selection);
|
||||
}
|
||||
},
|
||||
handleSelectionChange(selection) {
|
||||
this.selection = selection;
|
||||
this.$emit('update:selection', selection);
|
||||
@@ -273,20 +190,19 @@ export default {
|
||||
return invoiceStatusName(value, settlementType);
|
||||
},
|
||||
paymentName(value) {
|
||||
return paymentStatusOptions.find(item => item.value === value)?.label || value || '-';
|
||||
return paymentStatusName(value);
|
||||
},
|
||||
kingdeeSyncName(value) {
|
||||
return kingdeeSyncStatusOptions.find(item => item.value === value)?.label || value || '-';
|
||||
},
|
||||
adjustFlag(row) {
|
||||
// 原单已调整 / 重推生成的新单（显示来源原单号）
|
||||
if (row.adjustStatusName) return row.adjustStatusName;
|
||||
if (row.originFormalSettlementNo) return '调整后单';
|
||||
return '-';
|
||||
return kingdeeSyncName(value);
|
||||
},
|
||||
lockTag(row) {
|
||||
if (row.kingdeeLockStatus === 'locked') {
|
||||
return { show: true, type: 'danger', label: '金蝶锁定中', tip: '该单据已被金蝶锁定，不可编辑/作废' };
|
||||
return {
|
||||
show: true,
|
||||
type: 'danger',
|
||||
label: '金蝶锁定中',
|
||||
tip: '该单据已被金蝶锁定，不可编辑/作废',
|
||||
};
|
||||
}
|
||||
if (row.kingdeeLockStatus === 'failed') {
|
||||
if ((row.kingdeeTryCount || 0) >= 5) {
|
||||
@@ -316,30 +232,12 @@ export default {
|
||||
}
|
||||
return { show: false };
|
||||
},
|
||||
displayValue(value) {
|
||||
return value === null || value === undefined || value === '' ? '-' : value;
|
||||
},
|
||||
formatMoney(value, currency = 'RMB') {
|
||||
return `${Number(value || 0).toFixed(2)} ${currency || 'RMB'}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.fs-table-panel__toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
}
|
||||
.fs-table-panel__links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.fs-table-panel__invoice-status {
|
||||
.fs-invoice-status {
|
||||
&.is-unreceived {
|
||||
color: #f56c6c;
|
||||
}
|
||||
@@ -347,12 +245,7 @@ export default {
|
||||
color: #e6a23c;
|
||||
}
|
||||
&.is-completed {
|
||||
color: #67c23a;
|
||||
color: #67c23c;
|
||||
}
|
||||
}
|
||||
.fs-table-panel__pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,89 +1,39 @@
|
||||
<template>
|
||||
<basic-container class="formal-page">
|
||||
<section v-show="searchVisible" class="formal-page__search">
|
||||
<el-form :model="query" label-position="right" label-width="88px" @submit.prevent>
|
||||
<div class="formal-page__search-grid">
|
||||
<el-form-item v-for="field in visibleSearchFields" :key="field.prop" :label="field.label">
|
||||
<el-date-picker
|
||||
v-if="field.type === 'daterange'"
|
||||
v-model="query[field.prop]"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD"
|
||||
format="YYYY-MM-DD"
|
||||
range-separator="~"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
<el-select
|
||||
v-else-if="field.type === 'select'"
|
||||
v-model="query[field.prop]"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in field.options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-cascader
|
||||
v-else-if="field.type === 'cascader'"
|
||||
v-model="query[field.prop]"
|
||||
:options="organizationTreeOptions"
|
||||
:props="organizationCascaderProps"
|
||||
clearable
|
||||
filterable
|
||||
style="width: 100%"
|
||||
placeholder="请选择"
|
||||
/>
|
||||
<el-input v-else v-model="query[field.prop]" clearable placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<div class="formal-page__search-actions">
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="resetSearch">重置</el-button>
|
||||
<el-button text :icon="searchExpanded ? ArrowUp : ArrowDown" @click="toggleSearch">
|
||||
{{ searchExpanded ? '收起' : '展开' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</section>
|
||||
|
||||
<section class="formal-page__table-panel">
|
||||
<el-tabs
|
||||
v-if="!lockedSettlementType"
|
||||
type="border-card"
|
||||
v-model="activeSettlementType"
|
||||
@tab-change="handleSettlementTypeChange"
|
||||
>
|
||||
<el-tab-pane label="应付" name="payable">
|
||||
<formal-settlement-table-panel
|
||||
:key="'payable'"
|
||||
v-bind="tablePanelProps"
|
||||
v-on="tablePanelListeners"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="应收" name="receivable">
|
||||
<formal-settlement-table-panel
|
||||
:key="'receivable'"
|
||||
v-bind="tablePanelProps"
|
||||
v-on="tablePanelListeners"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<formal-settlement-table-panel
|
||||
v-else
|
||||
:key="activeSettlementType"
|
||||
v-bind="tablePanelProps"
|
||||
v-on="tablePanelListeners"
|
||||
/>
|
||||
</section>
|
||||
<el-tabs
|
||||
v-if="!lockedSettlementType"
|
||||
type="border-card"
|
||||
v-model="activeSettlementType"
|
||||
@tab-change="handleSettlementTypeChange"
|
||||
>
|
||||
<el-tab-pane label="应付" name="payable">
|
||||
<formal-settlement-table-panel
|
||||
v-if="activeSettlementType === 'payable'"
|
||||
key="payable"
|
||||
v-bind="tablePanelProps"
|
||||
v-on="tablePanelListeners"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="应收" name="receivable">
|
||||
<formal-settlement-table-panel
|
||||
v-if="activeSettlementType === 'receivable'"
|
||||
key="receivable"
|
||||
v-bind="tablePanelProps"
|
||||
v-on="tablePanelListeners"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<formal-settlement-table-panel
|
||||
v-else
|
||||
key="locked"
|
||||
v-bind="tablePanelProps"
|
||||
v-on="tablePanelListeners"
|
||||
/>
|
||||
<formal-settlement-editor
|
||||
v-model="editor.visible"
|
||||
:record-id="editor.id"
|
||||
:readonly="editor.readonly"
|
||||
@success="loadTable"
|
||||
@success="onLoad(page)"
|
||||
/>
|
||||
<el-dialog
|
||||
v-model="paymentDialog.visible"
|
||||
@@ -152,7 +102,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { createSettlementTransfer } from '@/utils/settlement-transfer';
|
||||
import {
|
||||
@@ -164,33 +113,13 @@ import { isAdministrator } from '@/utils/auth';
|
||||
import { downloadFile } from '@/utils/util';
|
||||
import * as api from '@/api/settlement/formalSettlement';
|
||||
import * as paymentApi from '@/api/payment/paymentApplication';
|
||||
import {
|
||||
invoiceStatusName,
|
||||
formalSettlementSearchFields,
|
||||
paymentStatusOptions,
|
||||
} from '@/option/settlement/formalSettlementSearch';
|
||||
import { formalSettlementOption } from '@/option/settlement/formalSettlement';
|
||||
import organizationSearch from '@/mixins/organization-search';
|
||||
import { formalSettlementTableColumns } from '@/option/settlement/formalSettlementTable';
|
||||
import FormalSettlementEditor from './components/formal-settlement-editor.vue';
|
||||
import FormalSettlementTablePanel from './components/formal-settlement-table-panel.vue';
|
||||
import { submitMkApprovalFlow, loadMkEnabled } from '@/utils/mk-approval';
|
||||
import { getMKApprovalUrl } from '@/api/system/business-process';
|
||||
|
||||
const emptyQuery = () => ({
|
||||
formalSettlementNo: '',
|
||||
preSettlementNo: '',
|
||||
projectName: '',
|
||||
deptName: [],
|
||||
contractNo: '',
|
||||
payerName: '',
|
||||
payeeName: '',
|
||||
invoiceStatus: '',
|
||||
paymentStatus: '',
|
||||
approvalStatus: '',
|
||||
kingdeeSyncStatus: '',
|
||||
createDateRange: [],
|
||||
});
|
||||
|
||||
export default {
|
||||
name: 'FormalSettlement',
|
||||
components: { FormalSettlementEditor, FormalSettlementTablePanel },
|
||||
@@ -205,19 +134,14 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ArrowDown,
|
||||
ArrowUp,
|
||||
query: emptyQuery(),
|
||||
searchExpanded: false,
|
||||
searchVisible: true,
|
||||
option: formalSettlementOption(),
|
||||
query: {},
|
||||
activeSettlementType: 'payable',
|
||||
searchFields: formalSettlementSearchFields,
|
||||
columns: formalSettlementTableColumns,
|
||||
rows: [],
|
||||
selection: [],
|
||||
loading: false,
|
||||
syncLoading: false,
|
||||
page: { current: 1, size: 10, total: 0 },
|
||||
page: { currentPage: 1, pageSize: 10, pageSizes: [10, 20, 50, 100], total: 0 },
|
||||
editor: { visible: false, id: null, readonly: false },
|
||||
paymentDialog: {
|
||||
visible: false,
|
||||
@@ -248,14 +172,13 @@ export default {
|
||||
},
|
||||
tablePanelProps() {
|
||||
return {
|
||||
option: this.option,
|
||||
rows: this.rows,
|
||||
columns: this.columns,
|
||||
loading: this.loading,
|
||||
page: this.page,
|
||||
hasPermission: this.hasPermissionFn,
|
||||
syncLoading: this.syncLoading,
|
||||
mkEnabled: this.mkEnabled,
|
||||
searchVisible: this.searchVisible,
|
||||
showPaymentAction: this.activeSettlementType === 'payable',
|
||||
billLabel: this.billLabel,
|
||||
};
|
||||
@@ -266,20 +189,16 @@ export default {
|
||||
payment: this.openPaymentDialog,
|
||||
sync: this.handleSync,
|
||||
export: this.handleExport,
|
||||
refresh: this.loadTable,
|
||||
'page-change': this.onPageChange,
|
||||
refresh: () => this.onLoad(this.page),
|
||||
load: this.onLoad,
|
||||
action: this.onAction,
|
||||
'search-change': this.searchChange,
|
||||
'search-reset': this.searchReset,
|
||||
'update:selection': selection => {
|
||||
this.selection = selection;
|
||||
},
|
||||
'update:searchVisible': visible => {
|
||||
this.searchVisible = visible;
|
||||
},
|
||||
};
|
||||
},
|
||||
visibleSearchFields() {
|
||||
return this.searchExpanded ? this.searchFields : this.searchFields.slice(0, 4);
|
||||
},
|
||||
paymentAvailable() {
|
||||
return this.paymentRemaining(this.paymentDialog.row);
|
||||
},
|
||||
@@ -293,6 +212,10 @@ export default {
|
||||
}
|
||||
},
|
||||
},
|
||||
activeSettlementType() {
|
||||
// 切换结算类型后由新挂载的 avue-crud 触发 on-load，此处只重置分页，避免重复请求
|
||||
this.page.currentPage = 1;
|
||||
},
|
||||
'$route.query.detailNo'(detailNo) {
|
||||
if (detailNo) this.openRouteDetail(detailNo);
|
||||
},
|
||||
@@ -300,13 +223,9 @@ export default {
|
||||
created() {
|
||||
// 标签机制按 fullPath 缓存同页多实例：仅当前路由实例应响应 detailNo 跳转，防止缓存旧实例也弹窗
|
||||
this.ownFullPath = this.$route.fullPath;
|
||||
this.loadOrganizationOptions();
|
||||
},
|
||||
mounted() {
|
||||
if (this.lockedSettlementType === 'payable' || this.lockedSettlementType === 'receivable') {
|
||||
this.activeSettlementType = this.lockedSettlementType;
|
||||
}
|
||||
this.loadOrganizationOptions();
|
||||
this.loadTable();
|
||||
this.openRouteDetail();
|
||||
loadMkEnabled()
|
||||
.then(enabled => {
|
||||
@@ -319,18 +238,18 @@ export default {
|
||||
activated() {
|
||||
if (sessionStorage.getItem('formal-settlement-list-refresh') === '1') {
|
||||
sessionStorage.removeItem('formal-settlement-list-refresh');
|
||||
this.loadTable();
|
||||
this.onLoad(this.page);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hasPermission(actionOrCode) {
|
||||
return this.hasPermissionFn(actionOrCode);
|
||||
},
|
||||
async loadTable() {
|
||||
async onLoad(page) {
|
||||
this.loading = true;
|
||||
try {
|
||||
const params = this.buildQueryParams();
|
||||
const response = await api.getList(this.page.current, this.page.size, params);
|
||||
const response = await api.getList(page.currentPage, page.pageSize, params);
|
||||
const data = this.unwrapData(response);
|
||||
this.rows = data.records || [];
|
||||
this.page.total = data.total || 0;
|
||||
@@ -338,25 +257,24 @@ export default {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
handleSearch() {
|
||||
this.page.current = 1;
|
||||
this.loadTable();
|
||||
searchChange(params, done) {
|
||||
// 所属组织级联返回 id 路径，转成组织名称传给后端
|
||||
this.normalizeOrganizationSearch(params, 'deptName');
|
||||
const range = params.createDateRange || [];
|
||||
delete params.createDateRange;
|
||||
this.query = {
|
||||
...params,
|
||||
createStartDate: range[0] || '',
|
||||
createEndDate: range[1] || '',
|
||||
};
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page);
|
||||
done();
|
||||
},
|
||||
resetSearch() {
|
||||
this.query = emptyQuery();
|
||||
this.handleSearch();
|
||||
},
|
||||
toggleSearch() {
|
||||
this.searchExpanded = !this.searchExpanded;
|
||||
},
|
||||
handleSizeChange() {
|
||||
this.page.current = 1;
|
||||
this.loadTable();
|
||||
},
|
||||
onPageChange({ current, size }) {
|
||||
this.page.current = current;
|
||||
this.page.size = size;
|
||||
this.loadTable();
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
onAction({ type, row }) {
|
||||
const handlers = {
|
||||
@@ -418,7 +336,7 @@ export default {
|
||||
await this.$confirm(`确认删除该${this.billLabel}草稿？`, '提示', { type: 'warning' });
|
||||
await api.remove(row.id);
|
||||
this.$message.success('删除成功');
|
||||
this.loadTable();
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
async handleSubmit(row) {
|
||||
await this.$confirm('提交后来源预付结算单将保持锁定，确认提交？', '提示', { type: 'warning' });
|
||||
@@ -432,7 +350,7 @@ export default {
|
||||
mkEnabled: this.mkEnabled,
|
||||
});
|
||||
this.$message.success('提交成功');
|
||||
this.loadTable();
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
handleMkAudit(row) {
|
||||
if (!row?.id) {
|
||||
@@ -465,7 +383,7 @@ export default {
|
||||
} else {
|
||||
this.$message.success(res.data.msg || '审批通过');
|
||||
}
|
||||
this.loadTable();
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
async handleReturn(row) {
|
||||
const { value } = await this.$prompt('请输入驳回原因', '审批驳回', {
|
||||
@@ -473,7 +391,7 @@ export default {
|
||||
});
|
||||
await api.returnBill({ id: row.id, reason: value });
|
||||
this.$message.success('已驳回');
|
||||
this.loadTable();
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
async handleVoid(row) {
|
||||
const { value } = await this.$prompt('请输入作废原因', `作废${this.billLabel}`, {
|
||||
@@ -481,7 +399,7 @@ export default {
|
||||
});
|
||||
await api.voidBill({ id: row.id, reason: value });
|
||||
this.$message.success('已作废');
|
||||
this.loadTable();
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
selectedOne(action) {
|
||||
if (this.selection.length !== 1) {
|
||||
@@ -511,7 +429,7 @@ export default {
|
||||
lastFailReason = String(error?.message || error || '未知错误').trim() || '未知错误';
|
||||
}
|
||||
}
|
||||
await this.loadTable();
|
||||
await this.onLoad(this.page);
|
||||
if (rows.length === 1) {
|
||||
if (failCount) {
|
||||
await this.$alert(`同步失败，${lastFailReason}`, '同步结果', {
|
||||
@@ -635,7 +553,7 @@ export default {
|
||||
);
|
||||
this.paymentDialog.visible = false;
|
||||
this.selection = [];
|
||||
this.loadTable();
|
||||
this.onLoad(this.page);
|
||||
} finally {
|
||||
this.paymentDialog.loading = false;
|
||||
}
|
||||
@@ -685,15 +603,8 @@ export default {
|
||||
);
|
||||
},
|
||||
buildQueryParams() {
|
||||
// 所属组织级联返回 id 路径，转成组织名称传给后端（用副本，避免污染搜索框回显）
|
||||
const params = this.normalizeOrganizationSearch({ ...this.query }, 'deptName');
|
||||
const params = { ...this.query };
|
||||
params.settlementType = this.lockedSettlementType || this.activeSettlementType;
|
||||
const range = params.createDateRange || [];
|
||||
delete params.createDateRange;
|
||||
if (range.length === 2) {
|
||||
params.createStartDate = range[0];
|
||||
params.createEndDate = range[1];
|
||||
}
|
||||
return params;
|
||||
},
|
||||
unwrapData(response) {
|
||||
@@ -701,8 +612,8 @@ export default {
|
||||
return body?.data || body;
|
||||
},
|
||||
handleSettlementTypeChange() {
|
||||
this.page.current = 1;
|
||||
this.loadTable();
|
||||
// 分页重置与数据加载由 activeSettlementType watcher + 新挂载 crud 的 on-load 完成
|
||||
this.selection = [];
|
||||
},
|
||||
escapeHtml(value) {
|
||||
return String(value || '-').replace(
|
||||
@@ -710,24 +621,6 @@ export default {
|
||||
char => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[char])
|
||||
);
|
||||
},
|
||||
isEditable(row) {
|
||||
return ['draft', 'returned'].includes(row.approvalStatus);
|
||||
},
|
||||
statusType(status) {
|
||||
return (
|
||||
{ approved: 'success', reviewing: 'warning', returned: 'danger', voided: 'info' }[status] ||
|
||||
''
|
||||
);
|
||||
},
|
||||
invoiceName(value, settlementType) {
|
||||
return invoiceStatusName(value, settlementType);
|
||||
},
|
||||
paymentName(value) {
|
||||
return paymentStatusOptions.find(item => item.value === value)?.label || value || '-';
|
||||
},
|
||||
displayValue(value) {
|
||||
return value === null || value === undefined || value === '' ? '-' : value;
|
||||
},
|
||||
formatMoney(value, currency = 'RMB') {
|
||||
return `${Number(value || 0).toFixed(2)} ${currency || 'RMB'}`;
|
||||
},
|
||||
@@ -740,62 +633,21 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.formal-page__search {
|
||||
padding: 12px 12px 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.formal-page__search-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 8px 24px;
|
||||
align-items: start;
|
||||
}
|
||||
.formal-page__search :deep(.el-form-item) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.formal-page__search :deep(.el-form-item__label) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.formal-page__search :deep(.el-input),
|
||||
.formal-page__search :deep(.el-select),
|
||||
.formal-page__search :deep(.el-date-editor) {
|
||||
width: 100%;
|
||||
}
|
||||
.formal-page__search-actions {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.formal-page__table-panel {
|
||||
margin-top: 8px;
|
||||
.formal-page {
|
||||
:deep(.el-table) {
|
||||
--el-table-border-color: #eff1f7;
|
||||
}
|
||||
:deep(.el-table__body tr:nth-child(even) > td.el-table__cell),
|
||||
:deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--left),
|
||||
:deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--right) {
|
||||
background: #fafafa;
|
||||
}
|
||||
}
|
||||
.formal-payment-dialog__batch-tip {
|
||||
margin-bottom: 12px;
|
||||
color: #606266;
|
||||
}
|
||||
.formal-page :deep(.el-table) {
|
||||
--el-table-border-color: #eff1f7;
|
||||
}
|
||||
.formal-page :deep(.el-table__body tr:nth-child(even) > td.el-table__cell),
|
||||
.formal-page :deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--left),
|
||||
.formal-page :deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--right) {
|
||||
background: #fafafa;
|
||||
}
|
||||
:deep(.formal-page.basic-container .basic-container__card > .el-card__body) {
|
||||
padding: 0;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.formal-page__search-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.formal-page__search-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,133 +1,56 @@
|
||||
<template>
|
||||
<basic-container class="settlement-import-page">
|
||||
<section v-show="searchVisible" class="settlement-import-page__search">
|
||||
<el-form :model="query" label-position="right" label-width="160px" @submit.prevent>
|
||||
<div class="settlement-import-page__search-grid">
|
||||
<el-form-item v-for="field in visibleSearchFields" :key="field.prop" :label="field.label">
|
||||
<el-select
|
||||
v-if="field.type === 'select'"
|
||||
v-model="query[field.prop]"
|
||||
clearable
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in field.options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input v-else v-model="query[field.prop]" clearable placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<div class="settlement-import-page__search-actions">
|
||||
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
||||
<el-button @click="resetSearch">清空</el-button>
|
||||
<el-button text :icon="searchExpanded ? ArrowUp : ArrowDown" @click="toggleSearch">
|
||||
{{ searchExpanded ? '收起' : '展开' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</section>
|
||||
<avue-crud
|
||||
ref="crud"
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="rows"
|
||||
v-model:page="page"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
v-if="hasPermission('settlement_import_add')"
|
||||
type="primary"
|
||||
@click="openCreate"
|
||||
>新增</el-button
|
||||
>
|
||||
</template>
|
||||
|
||||
<section class="settlement-import-page__table-panel">
|
||||
<div class="settlement-import-page__toolbar">
|
||||
<div class="settlement-import-page__toolbar-left">
|
||||
<el-button
|
||||
v-if="hasPermission('settlement_import_add')"
|
||||
type="primary"
|
||||
@click="openCreate"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button plain @click="refreshTable">刷新</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<template #batchNo="{ row }">
|
||||
<el-link type="primary" @click="openDetail(row)">{{ row.batchNo || '-' }}</el-link>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="rows" border class="settlement-import-page__table">
|
||||
<el-table-column type="index" label="序号" width="64" align="center" />
|
||||
<el-table-column prop="batchNo" label="导入批次号" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<el-link type="primary" @click="openDetail(row)">{{ row.batchNo || '-' }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="importStatusName" label="状态" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="statusTagType(row.importStatus)" effect="plain">
|
||||
{{ row.importStatusName || importStatusLabel(row.importStatus) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="settlementTypeName" label="导入类型" min-width="100">
|
||||
<template #default="{ row }">
|
||||
{{ row.settlementTypeName || settlementTypeLabel(row.settlementType) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="settlementBillTypeName" label="结算单" min-width="110">
|
||||
<template #default="{ row }">
|
||||
{{ row.settlementBillTypeName || settlementBillTypeLabel(row.settlementBillType) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="projectName" label="项目" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="customerName" label="客户" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="carrierName" label="承运商" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column label="明细行数" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ row.detailCount ?? row.waybillCount ?? 0 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" min-width="170" />
|
||||
<el-table-column prop="createUserName" label="创建人" min-width="120">
|
||||
<template #default="{ row }">{{ row.createUserName || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="220" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<div class="settlement-import-page__row-actions">
|
||||
<el-link type="primary" @click="openDetail(row)">查看</el-link>
|
||||
<el-link
|
||||
v-if="row.importStatus === 'draft'"
|
||||
type="primary"
|
||||
@click="editDraft(row)"
|
||||
>
|
||||
编辑
|
||||
</el-link>
|
||||
<el-link
|
||||
v-if="row.importStatus === 'draft' && hasPermission('settlement_import_delete')"
|
||||
type="danger"
|
||||
@click="handleDelete(row)"
|
||||
>
|
||||
删除
|
||||
</el-link>
|
||||
<el-link
|
||||
v-if="
|
||||
row.importStatus === 'completed' && hasPermission('settlement_import_void')
|
||||
"
|
||||
type="danger"
|
||||
@click="openVoid(row)"
|
||||
>
|
||||
作废
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<template #importStatusName="{ row }">
|
||||
<el-tag :type="statusTagType(row.importStatus)" effect="plain">{{
|
||||
row.importStatusName || importStatusLabel(row.importStatus)
|
||||
}}</el-tag>
|
||||
</template>
|
||||
|
||||
<div class="settlement-import-page__pagination">
|
||||
<el-pagination
|
||||
background
|
||||
v-model:current-page="page.current"
|
||||
v-model:page-size="page.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="page.total"
|
||||
@current-change="loadTable"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<template #menu="{ row }">
|
||||
<el-link type="primary" @click="openDetail(row)">查看</el-link>
|
||||
<el-link v-if="row.importStatus === 'draft'" type="primary" @click="editDraft(row)"
|
||||
>编辑</el-link
|
||||
>
|
||||
<el-link
|
||||
v-if="row.importStatus === 'draft' && hasPermission('settlement_import_delete')"
|
||||
type="danger"
|
||||
@click="handleDelete(row)"
|
||||
>删除</el-link
|
||||
>
|
||||
<el-link
|
||||
v-if="row.importStatus === 'completed' && hasPermission('settlement_import_void')"
|
||||
type="danger"
|
||||
@click="openVoid(row)"
|
||||
>作废</el-link
|
||||
>
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<el-dialog v-model="voidVisible" title="作废导入结算单" width="480px" append-to-body>
|
||||
<el-form
|
||||
@@ -157,31 +80,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
|
||||
import { h } from 'vue';
|
||||
import { ElOption, ElSelect } from 'element-plus';
|
||||
import { mapGetters } from 'vuex';
|
||||
import * as api from '@/api/settlement/settlementImport';
|
||||
|
||||
const emptyQuery = () => ({
|
||||
batchNo: '',
|
||||
settlementType: '',
|
||||
importStatus: '',
|
||||
projectName: '',
|
||||
customerName: '',
|
||||
carrierName: '',
|
||||
});
|
||||
|
||||
const SETTLEMENT_TYPE_OPTIONS = [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '应收', value: 'receivable' },
|
||||
{ label: '应付', value: 'payable' },
|
||||
];
|
||||
|
||||
const IMPORT_STATUS_OPTIONS = [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '草稿', value: 'draft' },
|
||||
{ label: '已完成', value: 'completed' },
|
||||
{ label: '已作废', value: 'voided' },
|
||||
];
|
||||
import { settlementImportOption, importStatusLabel } from '@/option/settlement/settlementImport';
|
||||
|
||||
const SETTLEMENT_IMPORT_LIST_REFRESH_KEY = 'settlement-import-list-refresh';
|
||||
|
||||
@@ -189,14 +92,16 @@ export default {
|
||||
name: 'SettlementImport',
|
||||
data() {
|
||||
return {
|
||||
ArrowDown,
|
||||
ArrowUp,
|
||||
searchVisible: true,
|
||||
searchExpanded: false,
|
||||
loading: false,
|
||||
query: emptyQuery(),
|
||||
rows: [],
|
||||
page: { current: 1, size: 10, total: 0 },
|
||||
loading: false,
|
||||
query: {},
|
||||
option: settlementImportOption(),
|
||||
page: {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
total: 0,
|
||||
},
|
||||
batchNoOptions: [],
|
||||
voidVisible: false,
|
||||
voidLoading: false,
|
||||
@@ -215,38 +120,10 @@ export default {
|
||||
const authority = this.userInfo?.authority || '';
|
||||
return String(authority).includes('admin');
|
||||
},
|
||||
searchFields() {
|
||||
return [
|
||||
{
|
||||
prop: 'batchNo',
|
||||
label: '导入批次号',
|
||||
type: 'select',
|
||||
options: this.batchNoOptions,
|
||||
},
|
||||
{
|
||||
prop: 'importStatus',
|
||||
label: '状态',
|
||||
type: 'select',
|
||||
options: IMPORT_STATUS_OPTIONS,
|
||||
},
|
||||
{
|
||||
prop: 'settlementType',
|
||||
label: '导入类型',
|
||||
type: 'select',
|
||||
options: SETTLEMENT_TYPE_OPTIONS,
|
||||
},
|
||||
{ prop: 'projectName', label: '项目', type: 'input' },
|
||||
{ prop: 'customerName', label: '客户', type: 'input' },
|
||||
{ prop: 'carrierName', label: '承运商', type: 'input' },
|
||||
];
|
||||
},
|
||||
visibleSearchFields() {
|
||||
return this.searchExpanded ? this.searchFields : this.searchFields.slice(0, 4);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.setBatchNoSearchRender();
|
||||
this.loadOptions();
|
||||
this.loadTable();
|
||||
},
|
||||
activated() {
|
||||
this.consumeListRefresh();
|
||||
@@ -267,93 +144,99 @@ export default {
|
||||
return;
|
||||
}
|
||||
sessionStorage.removeItem(SETTLEMENT_IMPORT_LIST_REFRESH_KEY);
|
||||
this.page.current = 1;
|
||||
this.page.currentPage = 1;
|
||||
this.loadOptions();
|
||||
this.loadTable();
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.validData(this.permission?.[code], false);
|
||||
},
|
||||
importStatusLabel(value) {
|
||||
return (
|
||||
IMPORT_STATUS_OPTIONS.find(item => item.value === value)?.label || value || '-'
|
||||
);
|
||||
},
|
||||
importStatusLabel,
|
||||
statusTagType(status) {
|
||||
if (status === 'draft') return 'info';
|
||||
if (status === 'completed') return 'success';
|
||||
if (status === 'voided') return 'danger';
|
||||
return '';
|
||||
},
|
||||
settlementTypeLabel(value) {
|
||||
return (
|
||||
SETTLEMENT_TYPE_OPTIONS.find(item => item.value === value)?.label || value || '-'
|
||||
);
|
||||
},
|
||||
settlementBillTypeLabel(value) {
|
||||
if (value === 'pre') return '预结算单';
|
||||
return '正式结算单';
|
||||
},
|
||||
unwrapData(response) {
|
||||
const body = response?.data || response || {};
|
||||
return body?.data !== undefined ? body.data : body;
|
||||
},
|
||||
/** 批次号搜索控件：可搜索 + 可手输，选项来自已导入批次 */
|
||||
setBatchNoSearchRender() {
|
||||
const column = this.findColumn(this.option.column, 'batchNo');
|
||||
if (!column) return;
|
||||
column.renderSearch = scope =>
|
||||
h(
|
||||
ElSelect,
|
||||
{
|
||||
modelValue: scope.row?.batchNo ?? '',
|
||||
'onUpdate:modelValue': value => {
|
||||
if (scope.row) scope.row.batchNo = value ?? '';
|
||||
},
|
||||
clearable: true,
|
||||
filterable: true,
|
||||
allowCreate: true,
|
||||
defaultFirstOption: true,
|
||||
placeholder: '请选择',
|
||||
style: 'width: 100%',
|
||||
},
|
||||
() =>
|
||||
this.batchNoOptions.map(item =>
|
||||
h(ElOption, { key: item.value, label: item.label, value: item.value })
|
||||
)
|
||||
);
|
||||
},
|
||||
async loadOptions() {
|
||||
try {
|
||||
const response = await api.getOptions();
|
||||
const options = this.unwrapData(response) || {};
|
||||
const batchNos = Array.isArray(options.batchNos) ? options.batchNos : [];
|
||||
this.batchNoOptions = [
|
||||
{ label: '全部', value: '' },
|
||||
...batchNos.map(item => {
|
||||
if (typeof item === 'string') {
|
||||
return { label: item, value: item };
|
||||
}
|
||||
const value = item.id ?? item.value ?? item.name ?? item.batchNo ?? '';
|
||||
const label = item.name ?? item.label ?? item.batchNo ?? value;
|
||||
return { label: String(label || ''), value: String(value || '') };
|
||||
}),
|
||||
];
|
||||
} catch (error) {
|
||||
this.batchNoOptions = [{ label: '全部', value: '' }];
|
||||
}
|
||||
},
|
||||
async loadTable() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const response = await api.getList(this.page.current, this.page.size, {
|
||||
batchNo: this.query.batchNo || undefined,
|
||||
settlementType: this.query.settlementType || undefined,
|
||||
importStatus: this.query.importStatus || undefined,
|
||||
projectName: this.query.projectName || undefined,
|
||||
customerName: this.query.customerName || undefined,
|
||||
carrierName: this.query.carrierName || undefined,
|
||||
this.batchNoOptions = batchNos.map(item => {
|
||||
if (typeof item === 'string') {
|
||||
return { label: item, value: item };
|
||||
}
|
||||
const value = item.id ?? item.value ?? item.name ?? item.batchNo ?? '';
|
||||
const label = item.name ?? item.label ?? item.batchNo ?? value;
|
||||
return { label: String(label || ''), value: String(value || '') };
|
||||
});
|
||||
const data = this.unwrapData(response) || {};
|
||||
this.rows = data.records || [];
|
||||
this.page.total = Number(data.total || 0);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
} catch (error) {
|
||||
this.batchNoOptions = [];
|
||||
}
|
||||
},
|
||||
refreshTable() {
|
||||
onLoad(page) {
|
||||
this.loading = true;
|
||||
api
|
||||
.getList(page.currentPage, page.pageSize, { ...this.query })
|
||||
.then(response => {
|
||||
const data = this.unwrapData(response) || {};
|
||||
this.rows = data.records || [];
|
||||
this.page.total = Number(data.total || 0);
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = { ...params };
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page);
|
||||
done();
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.loadOptions();
|
||||
this.loadTable();
|
||||
},
|
||||
handleSearch() {
|
||||
this.page.current = 1;
|
||||
this.loadTable();
|
||||
},
|
||||
resetSearch() {
|
||||
this.query = emptyQuery();
|
||||
this.handleSearch();
|
||||
},
|
||||
toggleSearch() {
|
||||
this.searchExpanded = !this.searchExpanded;
|
||||
},
|
||||
handleSizeChange() {
|
||||
this.page.current = 1;
|
||||
this.loadTable();
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
openCreate() {
|
||||
this.$router.push({ path: '/settlement/settlement-import/form' });
|
||||
@@ -379,8 +262,7 @@ export default {
|
||||
});
|
||||
await api.removeDraft(row.id);
|
||||
this.$message.success('删除成功');
|
||||
this.loadTable();
|
||||
this.loadOptions();
|
||||
this.refreshChange();
|
||||
} catch (error) {
|
||||
if (error === 'cancel' || error === 'close') return;
|
||||
this.$message.error(error?.message || '删除失败');
|
||||
@@ -401,7 +283,7 @@ export default {
|
||||
});
|
||||
this.$message.success('作废成功');
|
||||
this.voidVisible = false;
|
||||
this.loadTable();
|
||||
this.onLoad(this.page);
|
||||
this.loadOptions();
|
||||
} finally {
|
||||
this.voidLoading = false;
|
||||
@@ -412,95 +294,19 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.settlement-import-page__search {
|
||||
padding: 12px 12px 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.settlement-import-page__search-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 8px 24px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.settlement-import-page__search :deep(.el-form-item) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.settlement-import-page__search :deep(.el-form-item__label) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.settlement-import-page__search :deep(.el-input),
|
||||
.settlement-import-page__search :deep(.el-select) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.settlement-import-page__search-actions {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.settlement-import-page__table-panel {
|
||||
margin-top: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.settlement-import-page__toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0 0;
|
||||
}
|
||||
|
||||
.settlement-import-page__toolbar-left {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.settlement-import-page__table {
|
||||
.settlement-import-page :deep(.el-table) {
|
||||
--el-table-border-color: #eff1f7;
|
||||
}
|
||||
|
||||
.settlement-import-page__table :deep(.el-table__body tr:nth-child(even) > td.el-table__cell),
|
||||
.settlement-import-page__table
|
||||
.settlement-import-page :deep(.el-table__body tr:nth-child(even) > td.el-table__cell),
|
||||
.settlement-import-page
|
||||
:deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--left),
|
||||
.settlement-import-page__table
|
||||
.settlement-import-page
|
||||
:deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--right) {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.settlement-import-page__row-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.settlement-import-page__pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.settlement-import-page :deep(.basic-container__card > .el-card__body) {
|
||||
:deep(.settlement-import-page.basic-container .basic-container__card > .el-card__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.settlement-import-page__search-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.settlement-import-page__search-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+15
-15
@@ -49,28 +49,28 @@ export default ({ mode, command }) => {
|
||||
__VUE_I18N_LEGACY_API__: true,
|
||||
__INTLIFY_PROD_DEVTOOLS__: false,
|
||||
},
|
||||
server: {
|
||||
port: 2888,
|
||||
proxy: {
|
||||
'/api': {
|
||||
// 本地网关默认 80 端口（blade-gateway bootstrap.yml）；开发时需先启动网关及 blade-auth/blade-system 等服务
|
||||
// 注意：本机 8080 一般是 Nacos，不是业务网关
|
||||
target: 'http://localhost',
|
||||
// target: 'http://172.16.203.228:8000', // 仅联调远程网关时启用（且不要 rewrite）
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/api/, ''),
|
||||
},
|
||||
},
|
||||
},
|
||||
// server: {
|
||||
// port: 2889,
|
||||
// port: 2888,
|
||||
// proxy: {
|
||||
// '/api': {
|
||||
// target: 'http://172.16.203.228:8000',
|
||||
// // 本地网关默认 80 端口（blade-gateway bootstrap.yml）；开发时需先启动网关及 blade-auth/blade-system 等服务
|
||||
// // 注意：本机 8080 一般是 Nacos，不是业务网关
|
||||
// target: 'http://localhost',
|
||||
// // target: 'http://172.16.203.228:8000', // 仅联调远程网关时启用（且不要 rewrite）
|
||||
// changeOrigin: true,
|
||||
// rewrite: path => path.replace(/^\/api/, ''),
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
server: {
|
||||
port: 2889,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://172.16.203.228:8000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'~': resolve(__dirname, './'),
|
||||
|
||||
Reference in New Issue
Block a user