1、调整配载、总单
2、新增收付款模块
This commit is contained in:
@@ -0,0 +1,369 @@
|
||||
<template>
|
||||
<basic-container class="claim-record-form-page">
|
||||
<el-form :model="form" label-position="right" label-width="auto">
|
||||
<section class="claim-record-form-page__section">
|
||||
<div class="claim-record-form-page__section-title">收款信息</div>
|
||||
<el-row :gutter="32">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="认领通知单">
|
||||
<el-input v-model="form.receiptNoticeNo" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="付款人"
|
||||
><el-input v-model="form.payerName" disabled
|
||||
/></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="收款金额">
|
||||
<el-input :model-value="formatMoney(form.receiptAmount)" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="交易时间">
|
||||
<el-input v-model="form.transactionTime" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="对方户名">
|
||||
<el-input v-model="form.counterpartyName" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="对方开户行">
|
||||
<el-input v-model="form.counterpartyBank" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="对方账号">
|
||||
<el-input v-model="form.counterpartyAccount" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="明细流水号">
|
||||
<el-input v-model="form.detailSerialNo" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="已认领金额">
|
||||
<el-input :model-value="formatMoney(form.claimAmount)" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="摘要"><el-input v-model="form.summary" disabled /></el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="关联结算单">
|
||||
<el-input v-model="form.associatedSettlementNos" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="认领人">
|
||||
<el-input v-model="form.claimerName" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="认领日期">
|
||||
<el-input v-model="form.claimDate" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="认领人部门">
|
||||
<el-input v-model="form.claimerDeptName" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</section>
|
||||
|
||||
<section class="claim-record-form-page__section">
|
||||
<div class="claim-record-form-page__section-title">结算信息</div>
|
||||
<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>
|
||||
|
||||
<section class="claim-record-form-page__section">
|
||||
<div class="claim-record-form-page__section-heading">
|
||||
<div class="claim-record-form-page__section-title">附件信息</div>
|
||||
<el-button
|
||||
v-if="form.attachments.length"
|
||||
type="primary"
|
||||
:icon="Download"
|
||||
@click="downloadAttachments"
|
||||
>批量下载</el-button
|
||||
>
|
||||
</div>
|
||||
<el-table :data="form.attachments" border>
|
||||
<el-table-column type="index" label="序号" width="64" align="center" />
|
||||
<el-table-column label="文件名" min-width="220">
|
||||
<template #default="{ row }">{{ row.originalName || row.name || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="description" label="附件描述" min-width="240" />
|
||||
<el-table-column label="文件大小" width="120">
|
||||
<template #default="{ row }">{{ displayFileSize(row.size) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="uploadUserName" label="上传人" width="140" />
|
||||
<el-table-column prop="uploadTime" label="上传时间" width="170" />
|
||||
<el-table-column label="操作" width="120" align="center">
|
||||
<template #default="{ row }">
|
||||
<div class="claim-record-form-page__links">
|
||||
<el-link v-if="row.url || row.link" type="primary" @click="viewAttachment(row)">
|
||||
查看
|
||||
</el-link>
|
||||
<el-link
|
||||
v-if="form.claimStatus === 'claimed'"
|
||||
type="danger"
|
||||
@click="removeAttachment(row)"
|
||||
>删除</el-link
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<vehicle-attachment-upload
|
||||
v-if="form.claimStatus === 'claimed'"
|
||||
v-model="form.attachments"
|
||||
:multiple="true"
|
||||
:limit="20"
|
||||
:max-size="500"
|
||||
:file-types="attachmentFileTypes"
|
||||
:show-file-list="false"
|
||||
button-text="上传附件"
|
||||
class="claim-record-form-page__uploader"
|
||||
@change="handleAttachmentChange"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section class="claim-record-form-page__section">
|
||||
<div class="claim-record-form-page__section-title">备注</div>
|
||||
<el-input v-model="form.remark" type="textarea" :rows="3" maxlength="200" disabled />
|
||||
</section>
|
||||
|
||||
<div class="claim-record-form-page__actions">
|
||||
<el-button @click="goBack">关闭</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Download } from '@element-plus/icons-vue';
|
||||
import * as api from '@/api/payment/receiptClaimRecord';
|
||||
|
||||
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',
|
||||
data() {
|
||||
return {
|
||||
Download,
|
||||
form: emptyForm(),
|
||||
attachmentFileTypes: [
|
||||
'pdf',
|
||||
'bmp',
|
||||
'jpeg',
|
||||
'png',
|
||||
'jpg',
|
||||
'doc',
|
||||
'docx',
|
||||
'ppt',
|
||||
'pptx',
|
||||
'xlsx',
|
||||
'xls',
|
||||
'eml',
|
||||
'msg',
|
||||
'zip',
|
||||
],
|
||||
};
|
||||
},
|
||||
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 [];
|
||||
}
|
||||
},
|
||||
downloadAttachments() {
|
||||
this.form.attachments.forEach(file => {
|
||||
const url = file.url || file.link;
|
||||
if (!url) return;
|
||||
const anchor = document.createElement('a');
|
||||
anchor.href = url;
|
||||
anchor.download = file.originalName || file.name || '';
|
||||
anchor.target = '_blank';
|
||||
anchor.click();
|
||||
});
|
||||
},
|
||||
viewAttachment(row) {
|
||||
window.open(row.url || row.link, '_blank', 'noopener');
|
||||
},
|
||||
async handleAttachmentChange(files) {
|
||||
const userInfo = this.$store.getters.userInfo || {};
|
||||
const userName = userInfo.realName || userInfo.userName || '';
|
||||
const uploadTime = this.$dayjs().format('YYYY-MM-DD HH:mm:ss');
|
||||
this.form.attachments = (files || []).map(file => ({
|
||||
...file,
|
||||
description: file.description || '',
|
||||
uploadUserName: file.uploadUserName || userName,
|
||||
uploadTime: file.uploadTime || uploadTime,
|
||||
}));
|
||||
await this.persistAttachments('附件上传成功');
|
||||
},
|
||||
async removeAttachment(row) {
|
||||
await this.$confirm('确定删除该附件吗？', '删除附件', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
});
|
||||
this.form.attachments = this.form.attachments.filter(item => item !== row);
|
||||
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);
|
||||
},
|
||||
displayFileSize(size) {
|
||||
if (size === null || size === undefined || size === '') return '-';
|
||||
if (typeof size === 'string' && /[a-z]/i.test(size)) return size;
|
||||
const bytes = Number(size);
|
||||
if (!Number.isFinite(bytes)) return size;
|
||||
if (bytes < 1024) return `${bytes}B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}KB`;
|
||||
return `${(bytes / 1024 / 1024).toFixed(2)}MB`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.claim-record-form-page__section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.claim-record-form-page__section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.claim-record-form-page__section-title::before {
|
||||
width: 4px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
background: #409eff;
|
||||
content: '';
|
||||
}
|
||||
.claim-record-form-page__section-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.claim-record-form-page__section-heading .claim-record-form-page__section-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.claim-record-form-page :deep(.el-form-item) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.claim-record-form-page__actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 16px 0 8px;
|
||||
}
|
||||
.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>
|
||||
Reference in New Issue
Block a user