InvoiceUpload.vue
1.63 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
<template>
<BasicModal
v-bind="$attrs"
@register="register"
title="发票上传"
width="500px"
:bodyStyle="{ height: '200px' }"
@ok="handleOk"
><a-upload-dragger
v-model:fileList="fileList"
name="file"
:multiple="true"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
@change="handleChange"
@drop="handleDrop"
>
<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';
const handleChange = (info: UploadChangeParam) => {
const status = info.file.status;
if (status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (status === 'done') {
message.success(`${info.file.name} file uploaded successfully.`);
} else if (status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
};
function handleDrop(e: DragEvent) {
console.log(e);
}
const fileList = ref<UploadProps['fileList']>([]);
const Input1 = ref('');
const Input2 = ref('123');
const [register, { closeModal }] = useModalInner(async (data) => {
title.value = data.title;
});
const title = ref('');
async function handleOk() {
closeModal();
}
</script>