97 lines
2.8 KiB
Vue
97 lines
2.8 KiB
Vue
<script lang="ts" setup>
|
||
/**
|
||
* 完成开票：填写票据代码 + 拖拽/粘贴上传发票文件（图片/PDF）
|
||
*/
|
||
import { computed, ref } from 'vue';
|
||
|
||
import { useVbenModal } from '@vben/common-ui';
|
||
|
||
import { Input, message } from 'ant-design-vue';
|
||
|
||
import UploadDraggerPaste from '#/components/form/components/upload-dragger-paste.vue';
|
||
|
||
import { completeInvoiceApi } from '../api';
|
||
|
||
const invoiceCode = ref('');
|
||
const fileUrls = ref<string[]>([]);
|
||
const rowId = ref(0);
|
||
const receiveType = ref(1);
|
||
const email = ref('');
|
||
const gridApi = ref<any>();
|
||
|
||
const emailHint = computed(() => {
|
||
if (email.value) {
|
||
return `填写了邮箱则会发送至：${email.value}；同时可在小程序查收`;
|
||
}
|
||
return '未填写邮箱则仅小程序可查收；完成后将通知患者';
|
||
});
|
||
|
||
const [Modal, modalApi] = useVbenModal({
|
||
fullscreenButton: false,
|
||
draggable: true,
|
||
onCancel() {
|
||
modalApi.close();
|
||
},
|
||
async onConfirm() {
|
||
const code = invoiceCode.value.trim();
|
||
if (!code) {
|
||
message.warning('请填写票据代码');
|
||
return;
|
||
}
|
||
if (!fileUrls.value.length) {
|
||
message.warning('请上传发票文件');
|
||
return;
|
||
}
|
||
modalApi.setState({ loading: true, confirmLoading: true });
|
||
try {
|
||
const res: any = await completeInvoiceApi({
|
||
id: rowId.value,
|
||
invoice_code: code,
|
||
invoice_files: fileUrls.value,
|
||
});
|
||
if (res?.subscribe_warn) {
|
||
message.warning(String(res.subscribe_warn));
|
||
} else {
|
||
message.success('开票完成');
|
||
}
|
||
gridApi.value?.reload?.();
|
||
modalApi.close();
|
||
} finally {
|
||
modalApi.setState({ loading: false, confirmLoading: false });
|
||
}
|
||
},
|
||
onOpenChange(isOpen: boolean) {
|
||
if (!isOpen) return;
|
||
const data = modalApi.getData<Record<string, any>>() || {};
|
||
rowId.value = Number(data.id || 0);
|
||
receiveType.value = Number(data.receive_type || 1);
|
||
email.value = String(data.email || '');
|
||
gridApi.value = data.gridApi;
|
||
invoiceCode.value = '';
|
||
fileUrls.value = [];
|
||
},
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<Modal title="完成开票" class="w-[560px]">
|
||
<div class="space-y-4 py-2">
|
||
<div class="text-sm text-gray-500">{{ emailHint }}</div>
|
||
<div>
|
||
<div class="mb-1 font-medium">票据代码</div>
|
||
<Input v-model:value="invoiceCode" placeholder="请输入发票代码/号码" allow-clear />
|
||
</div>
|
||
<div>
|
||
<div class="mb-1 font-medium">发票文件（图片或 PDF）</div>
|
||
<UploadDraggerPaste
|
||
v-model="fileUrls"
|
||
accept=".jpg,.jpeg,.png,.webp,.pdf,image/*,application/pdf"
|
||
tip="点击或拖拽发票文件到此处（建议上传图片，小程序内可直接预览；PDF 将通过微信打开）"
|
||
:max-count="9"
|
||
:max-size-mb="20"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
</template>
|