Files
tms-erp-web/src/views/payment/invoice-receipt-form.vue
T

699 lines
24 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<basic-container class="receipt-form-page">
<div class="archive-page-form__title">
{{ readonly ? '查看收票登记' : recordId ? '编辑收票登记' : '新增收票登记' }}
</div>
<el-form
ref="formRef"
:model="form"
:rules="rules"
label-position="right"
label-width="auto"
class="receipt-form-page__form"
>
<section-card title="收票基本信息">
<el-row :gutter="32">
<el-col :span="6">
<el-form-item label="发票号码" prop="invoiceNo">
<el-tooltip
:content="form.invoiceNo"
:disabled="!form.invoiceNo"
placement="top"
:show-after="200"
>
<div class="receipt-form-page__overflow-trigger">
<el-input v-model="form.invoiceNo" readonly placeholder="请选择金蝶票据池发票">
<template v-if="!readonly" #append>
<el-tooltip content="查询金蝶票据池" placement="top">
<el-button :icon="Search" @click="openInvoiceDialog" />
</el-tooltip>
</template>
</el-input>
</div>
</el-tooltip>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="开票日期">
<el-input v-model="form.invoiceDate" disabled placeholder="从金蝶票据池带出" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="发票类型">
<el-tooltip
:content="form.invoiceType"
:disabled="!form.invoiceType"
placement="top"
:show-after="200"
>
<div class="receipt-form-page__overflow-trigger">
<el-input v-model="form.invoiceType" disabled placeholder="从金蝶票据池带出" />
</div>
</el-tooltip>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="开票金额">
<el-input
:model-value="form.invoiceNo ? formatMoney(form.invoiceAmount) : ''"
disabled
placeholder="从金蝶票据池带出"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="税额">
<el-input
:model-value="form.invoiceNo ? formatMoney(form.taxAmount) : ''"
disabled
placeholder="从金蝶票据池带出"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="受票单位">
<el-tooltip
:content="form.receiverName"
:disabled="!form.receiverName"
placement="top"
:show-after="200"
>
<div class="receipt-form-page__overflow-trigger">
<el-input v-model="form.receiverName" disabled placeholder="从金蝶票据池带出" />
</div>
</el-tooltip>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="开票单位">
<el-tooltip
:content="form.issuerName"
:disabled="!form.issuerName"
placement="top"
:show-after="200"
>
<div class="receipt-form-page__overflow-trigger">
<el-input v-model="form.issuerName" disabled placeholder="从金蝶票据池带出" />
</div>
</el-tooltip>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="所属合同" prop="contractNo">
<el-tooltip
:content="form.contractName"
:disabled="!form.contractName"
placement="top"
:show-after="200"
>
<div class="receipt-form-page__overflow-trigger">
<el-input :model-value="form.contractNo" readonly placeholder="请选择承运商合同">
<template v-if="!readonly" #append>
<el-tooltip content="选择承运商合同" placement="top">
<el-button :icon="Search" @click="openContractDialog" />
</el-tooltip>
</template>
</el-input>
</div>
</el-tooltip>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="承办部门">
<el-input :model-value="form.deptName" disabled placeholder="从所属合同带出" />
</el-form-item>
</el-col>
</el-row>
</section-card>
<section-card title="发票明细">
<el-table :data="invoiceItems" border empty-text="选择金蝶票据池发票后带出发票明细行">
<el-table-column type="index" label="序号" width="64" align="center" />
<el-table-column prop="goodsName" label="货物名称" min-width="160" show-overflow-tooltip />
<el-table-column prop="specModel" label="规格型号" min-width="120" show-overflow-tooltip />
<el-table-column prop="unit" label="单位" min-width="80" align="center" />
<el-table-column label="数量" min-width="100" align="right">
<template #default="{ row }">{{ formatQuantity(row.num) }}</template>
</el-table-column>
<el-table-column label="单价" min-width="110" align="right">
<template #default="{ row }">{{ formatMoney(row.unitPrice) }}</template>
</el-table-column>
<el-table-column label="金额" min-width="120" align="right">
<template #default="{ row }">{{ formatMoney(row.detailAmount) }}</template>
</el-table-column>
<el-table-column label="税率" min-width="90" align="center">
<template #default="{ row }">{{ formatRateText(row.taxRate) }}</template>
</el-table-column>
<el-table-column label="税额" min-width="110" align="right">
<template #default="{ row }">{{ formatMoney(row.taxAmount) }}</template>
</el-table-column>
<el-table-column prop="goodsCode" label="商品编码" min-width="140" show-overflow-tooltip />
</el-table>
</section-card>
<section-card title="结算信息">
<el-table :data="form.settlements" border empty-text="暂无认领数据(认领关系由付款结算单侧维护)">
<el-table-column type="index" label="序号" width="64" align="center" />
<el-table-column
label="结算单号"
min-width="180"
align="center"
show-overflow-tooltip
>
<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="150" align="right">
<template #default="{ row }">{{ formatMoney(row.receivedInvoiceAmount) }}</template>
</el-table-column>
<el-table-column label="分摊发票金额" min-width="150" align="right">
<template #default="{ row }">{{ formatMoney(row.allocatedInvoiceAmount) }}</template>
</el-table-column>
</el-table>
</section-card>
<section-card title="附件信息">
<!-- 金蝶票池认领的发票附件为 piaozone path 型,需带发票号走 A801-2 代理查看/下载 -->
<vehicle-attachment-table
v-model="form.attachments"
:readonly="readonly"
show-view-actions
:kingdee-invoice-no="form.invoiceNo"
/>
</section-card>
<section-card title="备注">
<el-form-item class="receipt-form-page__remark">
<el-input
v-model="form.remark"
:disabled="readonly"
type="textarea"
:rows="2"
maxlength="200"
show-word-limit
/>
</el-form-item>
</section-card>
<div v-if="!isPublicViewPage" class="receipt-form-page__actions">
<el-button @click="goBack">取消</el-button>
<el-button v-if="!readonly" type="primary" plain @click="syncReferenceData">同步</el-button>
<el-button v-if="!readonly && canSave" type="primary" plain @click="saveDraft"
>保存</el-button
>
<el-button
v-if="!readonly && canSave && hasPermission('invoice_receipt_submit')"
type="primary"
@click="submitForm"
>提交</el-button
>
</div>
</el-form>
<kingdee-invoice-pool-dialog
v-model="invoiceDialog.visible"
title="查询金蝶票据池"
:initial-invoice-no="form.invoiceNo"
:query-api="apiQueryInvoicePool"
@confirm="handleInvoicePicked"
/>
<el-dialog v-model="contractDialog.visible" title="选择承运商合同" width="920px" append-to-body>
<el-form :model="contractDialog.query" label-position="right" label-width="auto" inline @submit.prevent>
<el-form-item label="合同编号">
<el-input
v-model="contractDialog.query.contractNo"
clearable
placeholder="请输入"
@keyup.enter="searchContracts"
/>
</el-form-item>
<el-form-item label="合同名称">
<el-input
v-model="contractDialog.query.contractName"
clearable
placeholder="请输入"
@keyup.enter="searchContracts"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="searchContracts">查询</el-button>
<el-button @click="resetContractQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table v-loading="contractDialog.loading" :data="contractDialog.rows" border>
<el-table-column prop="contractNo" label="合同编号" min-width="180" show-overflow-tooltip />
<el-table-column prop="contractName" label="合同名称" min-width="200" show-overflow-tooltip />
<el-table-column prop="organizationName" label="承办部门" min-width="160" show-overflow-tooltip />
<el-table-column label="操作" width="80" align="center">
<template #default="{ row }">
<el-button type="primary" link @click="pickContract(row)">选择</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
v-model:current-page="contractDialog.page.current"
v-model:page-size="contractDialog.page.size"
:total="contractDialog.page.total"
layout="total, prev, pager, next"
@current-change="loadContracts"
/>
</el-dialog>
</basic-container>
</template>
<script>
import { Search } from '@element-plus/icons-vue';
import { mapGetters } from 'vuex';
import * as api from '@/api/payment/invoiceReceipt';
import { getList as getContractList } from '@/api/business/contract-manage';
import KingdeeInvoicePoolDialog from '@/components/kingdee-invoice-pool-dialog/main.vue';
import VehicleAttachmentTable from '@/components/vehicle-attachment-table/main.vue';
import { getMkPublicDetail } from '@/api/mk-process';
import { loadMkEnabled, submitMkApprovalFlow } from '@/utils/mk-approval';
// 提交成功后带标记返回,列表页(keep-alive)据此重新拉取
const invoiceReceiptListRefreshKey = 'invoice-receipt-list-refresh';
const emptyForm = () => ({
id: null,
invoiceNo: '',
invoiceDate: '',
invoiceType: '',
taxRate: null,
invoiceAmount: null,
taxAmount: null,
receiverName: '',
issuerName: '',
bankName: '',
bankAccount: '',
issuingBank: '',
phone: '',
customerEmails: [],
departmentEmails: [],
projectName: '',
contractNo: '',
contractName: '',
deptId: null,
deptName: '',
payerName: '',
payeeName: '',
settlements: [],
attachments: [],
remark: '',
});
export default {
name: 'InvoiceReceiptForm',
components: {
KingdeeInvoicePoolDialog,
VehicleAttachmentTable,
},
data() {
return {
Search,
form: emptyForm(),
customerEmailOptions: [],
departmentEmailOptions: [],
invoiceItems: [],
contractDialog: {
visible: false,
loading: false,
rows: [],
page: { current: 1, size: 10, total: 0 },
query: { contractNo: '', contractName: '' },
},
invoiceDialog: {
visible: false,
},
rules: {
invoiceNo: [{ required: true, validator: this.validateInvoice, trigger: 'change' }],
contractNo: [{ required: true, validator: this.validateContract, trigger: 'change' }],
customerEmails: [{ validator: this.validateEmails, trigger: 'change' }],
departmentEmails: [{ validator: this.validateEmails, trigger: 'change' }],
},
};
},
computed: {
...mapGetters(['permission', 'userInfo']),
recordId() {
return this.$route.query.id || '';
},
readonly() {
return this.$route.query.mode === 'view' || this.isPublicViewPage;
},
isPublicViewPage() {
return this.$route.path === '/payment/invoice-receipt/public-view';
},
canSave() {
const code = this.recordId ? 'invoice_receipt_edit' : 'invoice_receipt_add';
return this.hasPermission(code);
},
},
created() {
this.initialize();
},
methods: {
apiQueryInvoicePool(params) {
return api.queryInvoicePool(params);
},
handleInvoicePicked(rows) {
this.confirmInvoice(rows[0]);
},
hasPermission(code) {
return this.permission?.[code] !== false;
},
unwrapData(response) {
const body = response?.data || response || {};
return body?.data || body;
},
parse(value) {
if (!value) return [];
if (Array.isArray(value)) return value;
try {
return JSON.parse(value) || [];
} catch {
return [];
}
},
parseEmails(value) {
return String(value || '')
.split(/[;,,;]/)
.map(item => item.trim())
.filter(Boolean);
},
async initialize() {
if (this.isPublicViewPage) {
await this.loadPublicDetail();
return;
}
const userInfo = this.$store.getters.userInfo || {};
const userEmail = userInfo.email || '';
this.departmentEmailOptions = userEmail ? [userEmail] : [];
if (!this.recordId) {
if (userEmail) this.form.departmentEmails = [userEmail];
return;
}
const data = this.unwrapData(await api.getDetail(this.recordId));
this.applyDetail(data);
},
async loadPublicDetail() {
if (!this.recordId) return;
const data = this.unwrapData(await getMkPublicDetail('invoice-receipt', this.recordId));
this.applyDetail(data);
},
async applyDetail(data) {
this.form = {
...emptyForm(),
...data,
customerEmails: this.parseEmails(data.customerEmails),
departmentEmails: this.parseEmails(data.departmentEmails),
settlements: (data.settlements || []).map(item => ({
...item,
settlementId: item.formalSettlementId,
})),
attachments: this.parse(data.attachmentsJson),
};
await this.loadInvoiceDetail();
},
validateInvoice(rule, value, callback) {
if (!value) {
callback(new Error('请选择金蝶票据池发票'));
return;
}
callback();
},
validateContract(rule, value, callback) {
if (!this.form.contractNo) {
callback(new Error('请选择所属合同'));
return;
}
callback();
},
validateEmails(rule, value, callback) {
const emails = Array.isArray(value) ? value : this.parseEmails(value);
const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emails.length > 3) {
callback(new Error('最多填写3个邮箱'));
return;
}
if (emails.some(email => !valid.test(email))) {
callback(new Error('请输入正确的邮箱'));
return;
}
callback();
},
openInvoiceDialog() {
this.invoiceDialog.visible = true;
},
async confirmInvoice(row, options = {}) {
const selected = row;
if (!selected) {
this.$message.warning('请选择一张金蝶票据池发票');
return;
}
const preserveUserInput = options.preserveUserInput === true;
Object.assign(this.form, {
invoiceNo: selected.invoiceNo,
invoiceDate: selected.invoiceDate,
invoiceType: selected.invoiceType,
taxRate: selected.taxRate,
invoiceAmount: selected.invoiceAmount,
taxAmount: selected.taxAmount,
receiverName: selected.receiverName,
issuerName: selected.issuerName,
bankName: selected.bankName,
bankAccount: selected.bankAccount,
issuingBank: selected.issuingBank,
phone: preserveUserInput ? this.form.phone : selected.phone || '',
customerEmails: preserveUserInput
? this.form.customerEmails
: this.parseEmails(selected.customerEmails),
departmentEmails: preserveUserInput
? this.form.departmentEmails
: this.parseEmails(selected.departmentEmails),
attachments: preserveUserInput
? this.form.attachments
: this.parse(selected.attachmentsJson),
});
this.customerEmailOptions = [...this.form.customerEmails];
this.departmentEmailOptions = [
...new Set([...this.departmentEmailOptions, ...this.form.departmentEmails]),
];
this.invoiceDialog.visible = false;
await this.loadInvoiceDetail();
this.$refs.formRef?.validateField('invoiceNo').catch(() => {});
return true;
},
// 发票明细区块:按票号带出金蝶发票明细行(A801-1 镜像,推送 A303-2 分录同源)
async loadInvoiceDetail() {
if (!this.form.invoiceNo) {
this.invoiceItems = [];
return;
}
try {
this.invoiceItems = this.unwrapData(await api.invoiceDetailQuery(this.form.invoiceNo)) || [];
} catch {
this.invoiceItems = [];
}
},
// 所属合同=承运商合同:选择后带出承办部门(结算组织=承办部门对应平台公司金蝶编码,后端派生)
openContractDialog() {
this.contractDialog.visible = true;
this.searchContracts();
},
searchContracts() {
this.contractDialog.page.current = 1;
this.loadContracts();
},
resetContractQuery() {
this.contractDialog.query = { contractNo: '', contractName: '' };
this.searchContracts();
},
async loadContracts() {
this.contractDialog.loading = true;
try {
const res = await getContractList(this.contractDialog.page.current, this.contractDialog.page.size, {
...this.contractDialog.query,
contractCategory: '承运商合同',
approvalStatuses: 'approved,change_approved',
});
const data = this.unwrapData(res) || {};
this.contractDialog.rows = data.records || [];
this.contractDialog.page.total = Number(data.total || 0);
} finally {
this.contractDialog.loading = false;
}
},
pickContract(row) {
if (!row) return;
Object.assign(this.form, {
contractNo: row.contractNo,
contractName: row.contractName,
deptName: row.organizationName,
});
this.contractDialog.visible = false;
this.$refs.formRef?.validateField('contractNo').catch(() => {});
},
openSettlementDetail(row) {
const id = row.formalSettlementId || row.settlementId || row.id;
if (!id) return;
this.$router.push({
path: '/settlement/formal-settlement/form',
query: { mode: 'view', id, name: '查看正式结算' },
});
},
validateBusiness() {
const invoiceAmount = Number(this.form.invoiceAmount || 0);
if (invoiceAmount <= 0) throw new Error('开票金额必须大于0');
},
payload() {
return {
id: this.form.id,
invoiceNo: this.form.invoiceNo,
invoiceDate: this.form.invoiceDate,
invoiceType: this.form.invoiceType,
taxRate: this.form.taxRate,
invoiceAmount: this.form.invoiceAmount,
taxAmount: this.form.taxAmount,
receiverName: this.form.receiverName,
issuerName: this.form.issuerName,
bankName: this.form.bankName,
bankAccount: this.form.bankAccount,
issuingBank: this.form.issuingBank,
phone: this.form.phone,
customerEmails: this.form.customerEmails.join(';'),
departmentEmails: this.form.departmentEmails.join(';'),
attachmentsJson: JSON.stringify(this.form.attachments || []),
remark: this.form.remark,
// 所属合同仅传编号,合同名称/承办部门由后端按编号带出(结算组织=合同承办部门)
contractNo: this.form.contractNo,
};
},
async saveDraft() {
await this.$refs.formRef.validate();
try {
this.validateBusiness();
} catch (error) {
this.$message.warning(error.message);
return false;
}
const id = this.unwrapData(await api.save(this.payload()));
this.form.id = id;
this.$message.success('保存成功');
return true;
},
async submitForm() {
const saved = await this.saveDraft();
if (!saved) return;
const previousApprovalStatus = this.form.approvalStatus || '';
await api.submit({ id: this.form.id });
await submitMkApprovalFlow({
bizType: 'invoice-receipt',
bizId: this.form.id,
subjectName: this.form.invoiceNo || '',
approvalStatus: previousApprovalStatus,
mkEnabled: await loadMkEnabled().catch(() => false),
});
this.$message.success('提交成功');
sessionStorage.setItem(invoiceReceiptListRefreshKey, '1');
this.goBack();
},
async syncReferenceData() {
if (!this.form.invoiceNo) {
this.$message.warning('请先选择金蝶票据池发票');
return;
}
const data = this.unwrapData(
await api.queryInvoicePool({ current: 1, size: 1, invoiceNo: this.form.invoiceNo })
);
const invoice = (data.records || []).find(item => item.invoiceNo === this.form.invoiceNo);
if (!invoice) {
this.$message.warning('金蝶票池未查询到该发票');
return;
}
if (!(await this.confirmInvoice(invoice, { preserveUserInput: true }))) return;
this.$message.success('同步成功');
},
goBack() {
this.$router.push('/payment/invoice-receipt');
},
formatMoney(value) {
return Number(value || 0).toFixed(2);
},
formatQuantity(value) {
const number = Number(value);
return Number.isFinite(number) ? String(number) : '-';
},
formatRateText(value) {
if (value === null || value === undefined || value === '') return '-';
return `${value}%`;
},
},
};
</script>
<style scoped lang="scss">
.receipt-form-page__form {
padding-bottom: 72px;
}
.receipt-form-page__form :deep(.el-form-item) {
margin-bottom: 24px;
}
.receipt-form-page__form :deep(.el-select),
.receipt-form-page__form :deep(.el-input-number) {
width: 100%;
}
.receipt-form-page__overflow-trigger {
display: block;
width: 100%;
min-width: 0;
}
.receipt-form-page__form :deep(.el-tooltip__trigger:not(.el-select__wrapper)) {
display: block;
width: 100%;
}
.receipt-form-page__remark :deep(.el-form-item__content) {
margin-left: 0 !important;
}
.receipt-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 .receipt-form-page__actions) {
left: 60px;
}
:global(.avue-layout--horizontal .receipt-form-page__actions) {
left: 0;
}
.receipt-form-page :deep(.el-table) {
--el-table-border-color: #eff1f7;
}
.receipt-form-page :deep(.el-table__row:nth-child(even) > td.el-table__cell) {
background: #fafafa;
}
@media (max-width: 900px) {
.receipt-form-page__form :deep(.el-col-6) {
max-width: 100%;
flex: 0 0 100%;
}
}
</style>