<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>
