253 lines
7.8 KiB
Vue
253 lines
7.8 KiB
Vue
<template>
|
|
<basic-container class="claim-record-form-page">
|
|
<el-form :model="form" label-position="right" label-width="auto">
|
|
<section-card title="收款信息">
|
|
<el-row :gutter="32">
|
|
<el-col :span="6">
|
|
<el-form-item label="认领通知单">
|
|
<el-input v-model="form.receiptNoticeNo" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="付款人"
|
|
><el-input v-model="form.payerName" disabled
|
|
/></el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="收款金额">
|
|
<el-input :model-value="formatMoney(form.receiptAmount)" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="交易时间">
|
|
<el-input v-model="form.transactionTime" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="对方户名">
|
|
<el-input v-model="form.counterpartyName" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="对方开户行">
|
|
<el-input v-model="form.counterpartyBank" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="对方账号">
|
|
<el-input v-model="form.counterpartyAccount" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="明细流水号">
|
|
<el-input v-model="form.detailSerialNo" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="已认领金额">
|
|
<el-input :model-value="formatMoney(form.claimAmount)" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="摘要"><el-input v-model="form.summary" disabled /></el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="关联结算单">
|
|
<el-input v-model="form.associatedSettlementNos" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="认领人">
|
|
<el-input v-model="form.claimerName" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="认领日期">
|
|
<el-input v-model="form.claimDate" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="认领人部门">
|
|
<el-input v-model="form.claimerDeptName" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</section-card>
|
|
|
|
<section-card title="结算信息">
|
|
<el-table :data="form.settlements" border>
|
|
<el-table-column type="index" label="序号" width="64" align="center" />
|
|
<el-table-column label="结算单号" min-width="180" align="center">
|
|
<template #default="{ row }">
|
|
<el-link type="primary" @click="openSettlementDetail(row)">
|
|
{{ row.formalSettlementNo }}
|
|
</el-link>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="结算总金额" min-width="150" align="right">
|
|
<template #default="{ row }">{{ formatMoney(row.settlementAmount) }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="已认领收款金额" min-width="170" align="right">
|
|
<template #default="{ row }">{{ formatMoney(row.claimedReceiptAmount) }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="分摊收款金额" min-width="170" align="right">
|
|
<template #default="{ row }">{{ formatMoney(row.allocatedReceiptAmount) }}</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</section-card>
|
|
|
|
<section-card title="附件信息">
|
|
<vehicle-attachment-table
|
|
v-model="form.attachments"
|
|
:readonly="form.claimStatus !== 'claimed'"
|
|
@update:model-value="handleAttachmentUpdate"
|
|
/>
|
|
</section-card>
|
|
|
|
<section-card title="备注">
|
|
<el-input v-model="form.remark" type="textarea" :rows="2" maxlength="200" disabled />
|
|
</section-card>
|
|
|
|
<div class="claim-record-form-page__actions">
|
|
<el-button @click="goBack">关闭</el-button>
|
|
</div>
|
|
</el-form>
|
|
</basic-container>
|
|
</template>
|
|
|
|
<script>
|
|
import * as api from '@/api/payment/receiptClaimRecord';
|
|
import VehicleAttachmentTable from '@/components/vehicle-attachment-table/main.vue';
|
|
|
|
const emptyForm = () => ({
|
|
receiptNoticeNo: '',
|
|
payerName: '',
|
|
receiptAmount: 0,
|
|
transactionTime: '',
|
|
counterpartyName: '',
|
|
counterpartyBank: '',
|
|
counterpartyAccount: '',
|
|
detailSerialNo: '',
|
|
claimAmount: 0,
|
|
summary: '',
|
|
associatedSettlementNos: '',
|
|
claimerName: '',
|
|
claimDate: '',
|
|
claimerDeptName: '',
|
|
claimStatus: '',
|
|
settlements: [],
|
|
attachments: [],
|
|
remark: '',
|
|
});
|
|
|
|
export default {
|
|
name: 'ReceiptClaimRecordForm',
|
|
components: { VehicleAttachmentTable },
|
|
data() {
|
|
return {
|
|
form: emptyForm(),
|
|
};
|
|
},
|
|
computed: {
|
|
recordId() {
|
|
return this.$route.query.id || '';
|
|
},
|
|
},
|
|
created() {
|
|
this.initialize();
|
|
},
|
|
methods: {
|
|
unwrapData(response) {
|
|
const body = response?.data || response || {};
|
|
return body?.data || body;
|
|
},
|
|
async initialize() {
|
|
if (!this.recordId) {
|
|
this.$message.error('缺少认领记录');
|
|
this.goBack();
|
|
return;
|
|
}
|
|
const data = this.unwrapData(await api.getDetail(this.recordId));
|
|
this.form = {
|
|
...emptyForm(),
|
|
...data,
|
|
settlements: data.settlements || [],
|
|
attachments: this.parseAttachments(data.attachmentsJson),
|
|
};
|
|
},
|
|
parseAttachments(value) {
|
|
if (!value) return [];
|
|
if (Array.isArray(value)) return value;
|
|
try {
|
|
const result = JSON.parse(value);
|
|
return Array.isArray(result) ? result : [];
|
|
} catch (error) {
|
|
return [];
|
|
}
|
|
},
|
|
async handleAttachmentUpdate(files) {
|
|
this.form.attachments = files || [];
|
|
await this.persistAttachments('附件更新成功');
|
|
},
|
|
async persistAttachments(message) {
|
|
await api.updateAttachments({
|
|
id: this.recordId,
|
|
attachmentsJson: JSON.stringify(this.form.attachments || []),
|
|
});
|
|
this.$message.success(message);
|
|
},
|
|
openSettlementDetail(row) {
|
|
if (!row.formalSettlementId) return;
|
|
this.$router.push({
|
|
path: '/settlement/formal-settlement/form',
|
|
query: { mode: 'view', id: row.formalSettlementId, name: '查看正式结算' },
|
|
});
|
|
},
|
|
goBack() {
|
|
this.$router.push('/payment/receipt-claim-record');
|
|
},
|
|
formatMoney(value) {
|
|
return Number(value || 0).toFixed(2);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.claim-record-form-page__actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 12px 24px;
|
|
position: fixed;
|
|
right: 0;
|
|
left: 230px;
|
|
bottom: 0;
|
|
margin: 0;
|
|
z-index: 10;
|
|
background: #fff;
|
|
border-top: 1px solid #eff1f7;
|
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
|
}
|
|
:global(.avue--collapse .claim-record-form-page__actions) {
|
|
left: 60px;
|
|
}
|
|
:global(.avue-layout--horizontal .claim-record-form-page__actions) {
|
|
left: 0;
|
|
}
|
|
.claim-record-form-page__links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.claim-record-form-page__uploader {
|
|
margin-top: 12px;
|
|
}
|
|
.claim-record-form-page :deep(.el-table) {
|
|
--el-table-border-color: #eff1f7;
|
|
}
|
|
.claim-record-form-page :deep(.el-table__row:nth-child(even) > td.el-table__cell) {
|
|
background: #fafafa;
|
|
}
|
|
</style>
|