肖晋飞
2 months ago
6 changed files with 141 additions and 26 deletions
@ -1,60 +1,156 @@ |
|||
<script lang="ts" setup> |
|||
import { onBeforeMount, onMounted, ref, unref } from 'vue' |
|||
import { UploadDragger, message } from 'ant-design-vue' |
|||
import { Divider, UploadDragger, message } from 'ant-design-vue' |
|||
import type { UploadChangeParam } from 'ant-design-vue' |
|||
import { InboxOutlined } from '@ant-design/icons-vue' |
|||
|
|||
import { buildUUID } from '@/utils/uuid' |
|||
import { useI18n } from '@/hooks/web/useI18n' |
|||
import { useMessage } from '@/hooks/web/useMessage' |
|||
import { BasicModal, useModalInner } from '@/components/Modal' |
|||
import { createEXAPoint, getGroup } from '@/api/alert/exa' |
|||
import { importTemplate } from '@/api/alert/exa' |
|||
import { downloadByData } from '@/utils/file/download' |
|||
import { uploadApi_EXA } from '@/api/base/upload' |
|||
import { getAccessToken } from '@/utils/auth' |
|||
import type { FileItem } from '@/components/Upload/src/typing' |
|||
import { UploadResultStatus } from '@/components/Upload/src/typing' |
|||
|
|||
const emit = defineEmits(['success', 'register']) |
|||
const { t } = useI18n() |
|||
const { createMessage } = useMessage() |
|||
|
|||
const [registerCreateBatchModal, { setModalProps, closeModal }] = useModalInner(async () => { |
|||
setModalProps({ |
|||
destroyOnClose: true, |
|||
}) |
|||
}) |
|||
const fileList = ref<File[]>([]) |
|||
|
|||
const uploadParams = ref({ |
|||
Authorization: `Bearer ${getAccessToken()}`, |
|||
// 'tenant-id': getTenantId(), |
|||
}) |
|||
const fileList = ref([]) |
|||
function 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 beforeUpload(file) { |
|||
const isLt30M = file.size / 1024 / 1024 < 30 |
|||
if (!isLt30M) { |
|||
createMessage.warning(t('component.upload.maxSizeMultiple', [30])) |
|||
fileList.value = [] |
|||
|
|||
return false |
|||
} |
|||
|
|||
// 判断上传文件格式 |
|||
|
|||
const extension = file.name.split('.')[1] === 'xls' |
|||
|
|||
const extension2 = file.name.split('.')[1] === 'xlsx' |
|||
|
|||
if (!extension && !extension2) { |
|||
createMessage.warning('导入文件只能是 xls、xlsx格式!') |
|||
fileList.value = [] |
|||
console.log(fileList) |
|||
|
|||
return false |
|||
} |
|||
|
|||
return false |
|||
} |
|||
async function handleChange({ file, fileList }) { |
|||
console.log(file, 'file') |
|||
if (file.status === 'removed') { |
|||
fileList.value = [] |
|||
} |
|||
else { |
|||
// const isLt30M = file.size / 1024 / 1024 < 30 |
|||
// if (!isLt30M) |
|||
// createMessage.warning(t('component.upload.maxSizeMultiple', [30])) |
|||
// else |
|||
fileList.value = [file] |
|||
} |
|||
} |
|||
|
|||
function handleDrop(e: DragEvent) { |
|||
console.log(e) |
|||
} |
|||
|
|||
async function importPointTemplate() { |
|||
const data = await importTemplate() |
|||
downloadByData(data, 'EXA测点导入模板.xlsx') |
|||
} |
|||
|
|||
async function handleSubmit() { |
|||
if (fileList.value.length <= 0) { |
|||
createMessage.warning('请选择上传的资源包') |
|||
|
|||
return false |
|||
} |
|||
|
|||
// 打开loding |
|||
setModalProps({ loading: true, confirmLoading: true }) |
|||
|
|||
// this.loading = true |
|||
const file: File = unref(fileList).value[0] |
|||
const item: FileItem = { |
|||
file, |
|||
size: file.size, |
|||
name: file.name, |
|||
percent: 0, |
|||
type: file.name.split('.').pop(), |
|||
uuid: buildUUID(), |
|||
} |
|||
try { |
|||
item.status = UploadResultStatus.UPLOADING |
|||
const { data } = await uploadApi_EXA?.( |
|||
{ |
|||
data: { |
|||
...(uploadParams.value || {}), |
|||
}, |
|||
file: item.file, |
|||
name: 'file', |
|||
filename: file.name, |
|||
}, |
|||
(progressEvent: ProgressEvent) => { |
|||
const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0 |
|||
item.percent = complete |
|||
}, |
|||
) |
|||
item.status = UploadResultStatus.SUCCESS |
|||
item.responseData = data |
|||
emit('success') |
|||
closeModal() |
|||
// 关闭loding |
|||
setModalProps({ loading: false, confirmLoading: false }) |
|||
createMessage.success(`成功创建${data.data.createNames.length}个测点`) |
|||
} |
|||
catch (e) { |
|||
console.log(e) |
|||
item.status = UploadResultStatus.ERROR |
|||
closeModal() |
|||
// 关闭loding |
|||
setModalProps({ loading: false, confirmLoading: false }) |
|||
createMessage.error(`创建失败,错误原因:${data.data.msg}`) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<BasicModal |
|||
v-bind="$attrs" :min-height="200" :title="t('action.createBatch')" @register="registerCreateBatchModal" |
|||
@ok="handleSubmit" |
|||
v-bind="$attrs" :min-height="100" width="300" :title="t('action.createBatch')" |
|||
@register="registerCreateBatchModal" @ok="handleSubmit" |
|||
> |
|||
<UploadDragger |
|||
v-model:fileList="fileList" |
|||
name="file" |
|||
:multiple="true" |
|||
action="/user/import/" |
|||
@change="handleChange" |
|||
@drop="handleDrop" |
|||
v-model:fileList="fileList" :max-count="1" accept=".xlsx,.xls" :multiple="false" :before-upload="beforeUpload" |
|||
@change="handleChange" @drop="handleDrop" |
|||
> |
|||
<p class="ant-upload-drag-icon"> |
|||
<inbox-outlined /> |
|||
</p> |
|||
<p class="ant-upload-text"> |
|||
Click or drag file to this area to upload |
|||
点击或拖拽到此区域实现上传 |
|||
</p> |
|||
<p class="ant-upload-hint"> |
|||
Support for a single or bulk upload. Strictly prohibit from uploading company data or other |
|||
band files |
|||
只支持上传单个excel文件,请尽量根据模板上传 |
|||
</p> |
|||
</UploadDragger> |
|||
<Divider><span style="color: #0B55A4;cursor: pointer" @click="importPointTemplate">下载模板</span></Divider> |
|||
</BasicModal> |
|||
</template> |
|||
|
|||
Loading…
Reference in new issue