InvoiceUpload.vue
2.16 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<template>
<BasicModal
v-bind="$attrs"
@register="register"
title="发票上传"
width="500px"
:bodyStyle="{ height: '240px' }"
@ok="handleOk"
><a-upload-dragger
v-model:fileList="fileList"
name="file"
:beforeUpload="beforeUpload"
:max-count="1"
:multiple="true"
:action="updateInvoiceUrl"
@change="handleChange"
@drop="handleDrop"
:disabled="status === 10"
>
<p class="ant-upload-drag-icon">
<inbox-outlined></inbox-outlined>
</p>
<p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
</a-upload-dragger>
</BasicModal>
</template>
<script lang="ts" setup>
import { BasicModal, useModalInner } from '@/components/Modal';
import { computed, ref } from 'vue';
import type { UploadProps, UploadChangeParam } from 'ant-design-vue';
import { InboxOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { updateInvoiceInfo } from '@/api/project/invoice';
const emit = defineEmits(['success']);
const uploadUrl = ref('http://47.104.8.35:8081/api/localStorage/upload_file_oss?name=');
const updateInvoiceUrl = ref('http://47.104.8.35:8081/api/localStorage/upload_file_oss?name=');
const invoiceUrl = ref();
const id = ref();
const status = ref();
const [register, { closeModal }] = useModalInner(async (data) => {
console.log(data);
status.value = data.data.status;
// fileList.value = [];
fileList.value = [];
invoiceUrl.value = data.data.invoiceUrl;
id.value = data.data.id;
});
const handleChange = (info) => {
if (info.file.status == 'done') {
updateInvoiceUrl.value = info.file.response.data.fileUrl;
invoiceUrl.value = updateInvoiceUrl.value;
}
};
function beforeUpload(info) {
updateInvoiceUrl.value = uploadUrl.value + info.name;
}
function handleDrop(e: DragEvent) {
console.log(e);
}
const fileList = ref<UploadProps['fileList']>([]);
async function handleOk() {
await updateInvoiceInfo({
id: id.value,
invoiceUrl: invoiceUrl.value,
});
fileList.value = [];
emit('success');
closeModal();
}
</script>