gxwebsoft
9b9e652afd
- 全站搜索栏所属组织由树形下拉 (el-tree-select) 统一替换为级联选择器 (el-cascader) - 修改多个视图和组件中所属组织相关表单与搜索逻辑，适配级联选择器数据结构 - 组织数据结构调整及新增 findOrgPath、findDeptPath 等方法支持路径反查与回显 - 表单模型与搜索参数中所属组织字段改用 ID 路径数组，提交时转换为名称 - 优化所属组织搜索UI，统一清除、过滤、提示等功能样式和行为 - 引入 organization-search mixin 支持组织数据加载、路径转换及搜索参数格式化 - 更新相关依赖组件 Element Plus 引入 ElCascader 替换 ElTreeSelect - 修正搜索表单CSS，新增el-cascader全宽样式支持搜索栏布局一致性 - 兼容老数据，支持多种部门ID格式自动转换到单选路径数组格式 - 业务部门与承办部门表单同样应用级联选择器及路径转换逻辑 - 相关搜索配置项所属组织字段类型由 input 改为 cascader，提升搜索交互体验
319 lines
10 KiB
Vue
319 lines
10 KiB
Vue
<template>
|
|
<basic-container class="reconciliation-page">
|
|
<section class="reconciliation-page__search">
|
|
<el-form :model="query" label-position="right" label-width="88px" @submit.prevent>
|
|
<div class="reconciliation-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
|
|
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>
|
|
<div class="reconciliation-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>
|
|
</el-form>
|
|
</section>
|
|
|
|
<section class="reconciliation-page__table-panel">
|
|
<el-tabs
|
|
v-model="settlementType"
|
|
class="reconciliation-page__settlement-tabs"
|
|
type="border-card"
|
|
@tab-change="handleTabChange"
|
|
>
|
|
<el-tab-pane label="应付" name="payable">
|
|
<transport-reconciliation-table-panel
|
|
:rows="rows"
|
|
:columns="columns"
|
|
:loading="loading"
|
|
:page="page"
|
|
:has-permission="hasPermission"
|
|
@create="openCreate"
|
|
@export="handleExport"
|
|
@refresh="loadTable"
|
|
@page-change="handlePageChange"
|
|
@update:selection="selection = $event"
|
|
@action="handleAction"
|
|
/>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="应收" name="receivable">
|
|
<transport-reconciliation-table-panel
|
|
:rows="rows"
|
|
:columns="columns"
|
|
:loading="loading"
|
|
:page="page"
|
|
:has-permission="hasPermission"
|
|
@create="openCreate"
|
|
@export="handleExport"
|
|
@refresh="loadTable"
|
|
@page-change="handlePageChange"
|
|
@update:selection="selection = $event"
|
|
@action="handleAction"
|
|
/>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</section>
|
|
|
|
<transport-reconciliation-editor
|
|
v-model="editor.visible"
|
|
:record-id="editor.id"
|
|
:settlement-type="settlementType"
|
|
:readonly="editor.readonly"
|
|
@success="loadTable"
|
|
/>
|
|
</basic-container>
|
|
</template>
|
|
|
|
<script>
|
|
import { ArrowDown, ArrowUp, Refresh } from '@element-plus/icons-vue';
|
|
import { mapGetters } from 'vuex';
|
|
import * as XLSX from 'xlsx';
|
|
import * as api from '@/api/settlement/transportReconciliation';
|
|
import { transportReconciliationSearchFields } from '@/option/settlement/transportReconciliationSearch';
|
|
import { transportReconciliationTableColumns } from '@/option/settlement/transportReconciliationTable';
|
|
import organizationSearch from '@/mixins/organization-search';
|
|
import TransportReconciliationEditor from './components/transport-reconciliation-editor.vue';
|
|
import TransportReconciliationTablePanel from './components/transport-reconciliation-table-panel.vue';
|
|
|
|
const emptyQuery = () => ({
|
|
reconciliationNo: '',
|
|
preSettlementNos: '',
|
|
projectName: '',
|
|
deptName: [],
|
|
contractNo: '',
|
|
payerName: '',
|
|
payeeName: '',
|
|
matchStatus: '',
|
|
reconciliationStatus: '',
|
|
});
|
|
|
|
export default {
|
|
name: 'TransportReconciliation',
|
|
components: { TransportReconciliationEditor, TransportReconciliationTablePanel },
|
|
mixins: [organizationSearch],
|
|
data() {
|
|
return {
|
|
ArrowDown,
|
|
ArrowUp,
|
|
Refresh,
|
|
query: emptyQuery(),
|
|
searchExpanded: false,
|
|
searchFields: transportReconciliationSearchFields,
|
|
columns: transportReconciliationTableColumns,
|
|
settlementType: 'payable',
|
|
loading: false,
|
|
rows: [],
|
|
selection: [],
|
|
page: { current: 1, size: 10, total: 0 },
|
|
editor: { visible: false, id: null, readonly: false },
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(['permission']),
|
|
visibleSearchFields() {
|
|
return this.searchExpanded ? this.searchFields : this.searchFields.slice(0, 4);
|
|
},
|
|
},
|
|
mounted() {
|
|
this.loadOrganizationOptions();
|
|
this.loadTable();
|
|
},
|
|
methods: {
|
|
hasPermission(code) {
|
|
return this.permission?.[code] !== false;
|
|
},
|
|
async loadTable() {
|
|
this.loading = true;
|
|
try {
|
|
const response = await api.getList(this.page.current, this.page.size, {
|
|
// 所属组织级联返回 id 路径，转成组织名称传给后端（用副本，避免污染搜索框回显）
|
|
...this.normalizeOrganizationSearch({ ...this.query }, 'deptName'),
|
|
settlementType: this.settlementType,
|
|
});
|
|
const data = response?.data?.data || response?.data || response || {};
|
|
this.rows = data.records || [];
|
|
this.page.total = data.total || 0;
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
handleSearch() {
|
|
this.page.current = 1;
|
|
this.loadTable();
|
|
},
|
|
resetSearch() {
|
|
this.query = emptyQuery();
|
|
this.handleSearch();
|
|
},
|
|
toggleSearch() {
|
|
this.searchExpanded = !this.searchExpanded;
|
|
},
|
|
handleTabChange() {
|
|
this.page.current = 1;
|
|
this.loadTable();
|
|
},
|
|
handlePageChange({ current, size }) {
|
|
this.page.current = current;
|
|
this.page.size = size;
|
|
this.loadTable();
|
|
},
|
|
handleAction({ type, row }) {
|
|
const map = {
|
|
view: this.openView,
|
|
edit: this.openEdit,
|
|
delete: this.handleDelete,
|
|
complete: this.handleComplete,
|
|
};
|
|
const fn = map[type];
|
|
if (fn) fn(row);
|
|
},
|
|
openCreate() {
|
|
this.editor = { visible: true, id: null, readonly: false };
|
|
},
|
|
openEdit(row) {
|
|
this.editor = { visible: true, id: row.id, readonly: false };
|
|
},
|
|
openView(row) {
|
|
this.editor = { visible: true, id: row.id, readonly: true };
|
|
},
|
|
async handleDelete(row) {
|
|
await this.$confirm(`确定删除对账单“${row.reconciliationNo}”吗？`, '删除确认', {
|
|
type: 'warning',
|
|
});
|
|
await api.remove(row.id);
|
|
this.$message.success('删除成功');
|
|
this.loadTable();
|
|
},
|
|
async handleComplete(row) {
|
|
await this.$confirm('完成后对账单将不可修改，是否继续？', '完成对账', { type: 'warning' });
|
|
await api.complete(row.id);
|
|
this.$message.success('对账单确认完成');
|
|
this.loadTable();
|
|
},
|
|
async handleExport() {
|
|
const response = await api.getList(1, 100000, {
|
|
...this.query,
|
|
settlementType: this.settlementType,
|
|
});
|
|
const data = response?.data?.data || response?.data || response || {};
|
|
const exportRows = (data.records || []).map(item => ({
|
|
对账单号: item.reconciliationNo,
|
|
付款方: item.payerName,
|
|
收款方: item.payeeName,
|
|
项目名称: item.projectName,
|
|
所属组织: item.deptName,
|
|
合同编号: item.contractNo,
|
|
合同名称: item.contractName,
|
|
结算金额: Number(item.settlementAmount || 0).toFixed(2),
|
|
对账模式: item.reconciliationModeName,
|
|
账单总数: item.externalBillCount,
|
|
匹配数: item.matchedCount,
|
|
对账状态: item.reconciliationStatusName,
|
|
创建人: item.createUserName,
|
|
创建时间: item.createTime,
|
|
}));
|
|
const workbook = XLSX.utils.book_new();
|
|
XLSX.utils.book_append_sheet(workbook, XLSX.utils.json_to_sheet(exportRows), '运输对账');
|
|
XLSX.writeFile(workbook, `运输对账${this.$dayjs().format('YYYY-MM-DD HH-mm-ss')}.xlsx`);
|
|
},
|
|
isEditable(row) {
|
|
return row.reconciliationStatus === 'unfinished';
|
|
},
|
|
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">
|
|
.reconciliation-page__search {
|
|
padding: 12px 12px 4px;
|
|
background: #fff;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
}
|
|
.reconciliation-page__search-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 8px 24px;
|
|
align-items: start;
|
|
}
|
|
.reconciliation-page__search :deep(.el-form-item) {
|
|
margin-bottom: 8px;
|
|
}
|
|
.reconciliation-page__search :deep(.el-form-item__label) {
|
|
white-space: nowrap;
|
|
}
|
|
.reconciliation-page__search :deep(.el-input),
|
|
.reconciliation-page__search :deep(.el-select) {
|
|
width: 100%;
|
|
}
|
|
.reconciliation-page__search-actions {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.reconciliation-page__table-panel {
|
|
margin-top: 8px;
|
|
}
|
|
.reconciliation-page__settlement-tabs {
|
|
margin-bottom: 0;
|
|
}
|
|
.reconciliation-page__settlement-tabs :deep(.el-tabs__header) {
|
|
margin: 0;
|
|
}
|
|
.reconciliation-page :deep(.el-table) {
|
|
--el-table-border-color: #eff1f7;
|
|
background: #fff;
|
|
}
|
|
.reconciliation-page :deep(.el-table__body tr:nth-child(even) > td.el-table__cell),
|
|
.reconciliation-page :deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--left),
|
|
.reconciliation-page :deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--right) {
|
|
background: #fafafa;
|
|
}
|
|
:deep(.reconciliation-page.basic-container .basic-container__card > .el-card__body) {
|
|
padding: 0;
|
|
}
|
|
@media screen and (max-width: 1200px) {
|
|
.reconciliation-page__search-grid {
|
|
grid-template-columns: repeat(2, minmax(220px, 1fr));
|
|
}
|
|
}
|
|
@media screen and (max-width: 760px) {
|
|
.reconciliation-page__search-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|