gxwebsoft
01c3bb5b57
- 统一用 section-card 组件替换原有分段结构，简化模板结构 - 调整表单列宽为 6 栅格，提高响应式适配效果 - 修改标题类名，采用一致的 archive-page-form__title - 精简并合并样式，移除各页面冗余标题和分段样式声明 - 全站业务状态标签改为普通文字，不显示背景和圆点，字体颜色统一 - 优化 element-ui.scss 中表格操作列的 el-link 样式，兼容多层 DOM 结构 - 增加表格操作列 el-tooltip 单元格自动宽度，防止内容裁切 - 调整正式结算列表操作列宽度，提升显示空间 - 简化部分页面表单控件宽度样式，统一控件宽度及间距 - 删除多处无用样式，减少样式冗余，提高代码可维护性
334 lines
11 KiB
Vue
334 lines
11 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="附件信息"><template #extra><el-button
|
|
v-if="form.attachments.length"
|
|
type="primary"
|
|
:icon="Download"
|
|
@click="downloadAttachments"
|
|
>批量下载</el-button
|
|
></template>
|
|
<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-card>
|
|
|
|
<section-card title="备注">
|
|
<el-input v-model="form.remark" type="textarea" :rows="3" 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 { 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__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>
|