Vue-Vben-Admin - 自定义上传excel文件弹框组件

<template> <BasicModal width="400px" :minHeight="200" :title="t('component.upload.upload')" :okText="t('component.upload.save')" v-bind="$attrs" @register="register" @ok="handleOk" destroyOnClose :maskClosable="false" :keyboard="false" class="upload-modal"> <div> <Spin :spinning="spinning" :delay="delayTime"> <UploadDragger :file-list="fileList" name="file" @remove="handleRemove" accept=".xlsx,.xls" @reject="handleReject" :before-upload="beforeUpload"> <p class="ant-upload-drag-icon"> <inbox-outlined /> </p> <p class="ant-upload-text">单击或拖动文件到此区域进行上传</p> <div class="ant-upload-hint flex justify-center"> <div slot="temp" v-if="slotTemp || !!props.tempApi"> <div><Button type="link" @click.stop="downloadTempFn">下载模板</Button></div> </div> </div> </UploadDragger> </Spin> </div> </BasicModal> </template> <script lang="ts" setup> import { ref, PropType, useSlots } from 'vue' import { Upload, message, Button, Spin } from 'ant-design-vue' import { InboxOutlined } from '@ant-design/icons-vue' import { BasicModal, useModalInner } from '@/components/Modal' import { isFunction } from '@/utils/is' import { warn } from '@/utils/log' import { useMessage } from '@/hooks/web/useMessage' import { basicProps } from './props' import { useI18n } from '@/hooks/web/useI18n' defineOptions({ name: 'UploadModal' }) const UploadDragger = Upload.Dragger; const props = defineProps({ ...basicProps, previewFileList: { type: Array as PropType<string[]>, default: () => [] } }) //判断<slot/>是否有传值 console.log(!!useSlots().temp,'useSlots()'); const slotTemp = !!useSlots().temp; const emits = defineEmits(['success', 'register', 'delete']) const spinning = ref<boolean>(false) const delayTime = 500 // 是否正在上传 const fileList = ref<any>([]) const { t } = useI18n() const [register, { closeModal }] = useModalInner() const { createMessage } = useMessage() // 拖拽文件不符合 accept 类型时的回调 function handleReject() { message.warning('仅允许导入xls、xlsx格式文件') } // 点击移除文件时的回调 function handleRemove(file) { // 获取文件列表的索引 const index = fileList.value.indexOf(file) // 创建一个新的文件列表 const newFileList = fileList.value.slice() // 从新列表中删除文件 newFileList.splice(index, 1) // 将新列表赋值给文件列表 fileList.value = newFileList } // 上传文件之前的钩子，参数为上传的文件,若返回 false 则停止上传。 function beforeUpload(file) { fileList.value = [file] return false } async function downloadTempFn (){ spinning.value = true const { tempApi } = props await tempApi(); spinning.value = true } async function handleOk() { // 获取props中的api const { api } = props // 判断api是否存在，且是否为函数 if (!api || !isFunction(api)) { // 若不满足条件，则报错 return warn('upload api must exist and be a function') } // 判断文件列表是否为空 if (!fileList.value.length) { // 若为空，则报错 message.warning('请先上传文件!') return true } // 创建表单数据 const formData = new FormData() // 将文件添加到表单数据中 formData.append('file', fileList.value[0]) // 调用api，传入表单数据 const data = await props.api(formData) console.log(data, '上传成功过'); // 清空文件列表 fileList.value = [] // 关闭弹窗 closeModal() // 创建成功消息 createMessage.success('操作成功') // 触发success事件 emits('success') } </script> <style lang="less"></style>