b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

refactor(settlement): 全面重构结算相关页面为 avue-crud 组件

Browse Source 
- 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:
赵忠林
2026-10-20 18:57:28 +08:00
parent 0e57de5c71
commit 09ce6472b0
8 changed files with 712 additions and 788 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/settlement/settlement-import.vue
+137 -331
View File
@@ -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>