309 lines
9.8 KiB
Vue
309 lines
9.8 KiB
Vue
<template>
|
|
<basic-container class="reconciliation-page">
|
|
<section v-show="searchVisible" 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"
|
|
v-model:search-visible="searchVisible"
|
|
@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"
|
|
v-model:search-visible="searchVisible"
|
|
@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 } from '@element-plus/icons-vue';
|
|
import { mapGetters } from 'vuex';
|
|
import { downloadFile } from '@/utils/util';
|
|
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: 'all',
|
|
reconciliationStatus: 'all',
|
|
});
|
|
|
|
export default {
|
|
name: 'TransportReconciliation',
|
|
components: { TransportReconciliationEditor, TransportReconciliationTablePanel },
|
|
mixins: [organizationSearch],
|
|
data() {
|
|
return {
|
|
ArrowDown,
|
|
ArrowUp,
|
|
query: emptyQuery(),
|
|
searchExpanded: false,
|
|
searchVisible: true,
|
|
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.buildSearchParams(),
|
|
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();
|
|
},
|
|
buildSearchParams() {
|
|
const params = this.normalizeOrganizationSearch({ ...this.query }, 'deptName');
|
|
if (params.matchStatus === 'all') params.matchStatus = '';
|
|
if (params.reconciliationStatus === 'all') params.reconciliationStatus = '';
|
|
return params;
|
|
},
|
|
handleAction({ type, row }) {
|
|
const map = {
|
|
view: this.openView,
|
|
delete: this.handleDelete,
|
|
complete: this.handleComplete,
|
|
};
|
|
const fn = map[type];
|
|
if (fn) fn(row);
|
|
},
|
|
openCreate() {
|
|
this.$router.push({
|
|
path: '/settlement/transport-reconciliation/form',
|
|
query: { mode: 'add', settlementType: this.settlementType, name: '新增运输对账单' },
|
|
});
|
|
},
|
|
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 params = {
|
|
...this.buildSearchParams(),
|
|
settlementType: this.settlementType,
|
|
};
|
|
if (this.selection.length) params.ids = this.selection.map(item => item.id).join(',');
|
|
const { data } = await api.exportList(params);
|
|
downloadFile(data, `运输对账${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>
|