135 lines
3.4 KiB
Vue
135 lines
3.4 KiB
Vue
|
<template>
|
|||
|
|
<a-drawer
|
|||
|
|
v-model:visible="visible"
|
|||
|
|
title="批量导入物料照片"
|
|||
|
|
:mask-closable="false"
|
|||
|
|
:esc-to-close="false"
|
|||
|
|
:width="width >= 600 ? 600 : '100%'"
|
|||
|
|
ok-text="确认导入"
|
|||
|
|
cancel-text="取消导入"
|
|||
|
|
@before-ok="save"
|
|||
|
|
@close="reset"
|
|||
|
|
>
|
|||
|
|
<a-form ref="formRef" :model="form" size="large" auto-label-width>
|
|||
|
|
<fieldset>
|
|||
|
|
<legend>zip文件上传</legend>
|
|||
|
|
<div class="file-box">
|
|||
|
|
<a-upload
|
|||
|
|
draggable
|
|||
|
|
:custom-request="handleUpload"
|
|||
|
|
:limit="1"
|
|||
|
|
:show-retry-button="false"
|
|||
|
|
:show-cancel-button="false"
|
|||
|
|
tip="仅支持zip格式"
|
|||
|
|
:file-list="uploadFile"
|
|||
|
|
accept=".zip"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</fieldset>
|
|||
|
|
</a-form>
|
|||
|
|
</a-drawer>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { type FormInstance, Message, type RequestOption } from '@arco-design/web-vue'
|
|||
|
|
import { useWindowSize } from '@vueuse/core'
|
|||
|
|
import { uploadMaterialPhotos } from '@/apis/material/materialInfo'
|
|||
|
|
import { useResetReactive } from '@/hooks'
|
|||
|
|
|
|||
|
|
const emit = defineEmits<{
|
|||
|
|
(e: 'save-success'): void
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const { width } = useWindowSize()
|
|||
|
|
|
|||
|
|
const visible = ref(false)
|
|||
|
|
const formRef = ref<FormInstance>()
|
|||
|
|
const uploadFile = ref([])
|
|||
|
|
// 新增：保存上传的文件对象
|
|||
|
|
const uploadFileObj = ref<File | null>(null)
|
|||
|
|
|
|||
|
|
// 移除不必要的表单字段，只保留空对象即可
|
|||
|
|
const [form, resetForm] = useResetReactive({})
|
|||
|
|
|
|||
|
|
// 重置
|
|||
|
|
const reset = () => {
|
|||
|
|
formRef.value?.resetFields()
|
|||
|
|
uploadFile.value = []
|
|||
|
|
uploadFileObj.value = null // 重置文件对象
|
|||
|
|
resetForm()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 修改上传逻辑：仅保存文件对象，不做解析
|
|||
|
|
const handleUpload = (options: RequestOption) => {
|
|||
|
|
const { onProgress, onError, onSuccess, fileItem } = options
|
|||
|
|
onProgress(100) // 直接标记上传完成（仅前端显示）
|
|||
|
|
|
|||
|
|
// 保存文件对象供后续提交使用
|
|||
|
|
uploadFileObj.value = fileItem.file as File
|
|||
|
|
uploadFile.value = [fileItem] // 更新文件列表显示
|
|||
|
|
|
|||
|
|
Message.success('文件已选择，点击确认导入即可上传')
|
|||
|
|
onSuccess({}) // 通知上传组件完成
|
|||
|
|
return {
|
|||
|
|
abort() {
|
|||
|
|
// 空实现，取消时会走reset逻辑
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 执行导入：直接上传文件到后端
|
|||
|
|
const save = async () => {
|
|||
|
|
try {
|
|||
|
|
// 校验是否选择了文件
|
|||
|
|
if (!uploadFileObj.value) {
|
|||
|
|
Message.warning('请先选择要上传的ZIP文件')
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 构建FormData
|
|||
|
|
const formData = new FormData()
|
|||
|
|
formData.append('zipFile', uploadFileObj.value) // 后端接收参数名保持为zipFile
|
|||
|
|
|
|||
|
|
// 调用后端照片批量导入接口
|
|||
|
|
await uploadMaterialPhotos(formData)
|
|||
|
|
|
|||
|
|
Message.success('物料照片批量导入成功！')
|
|||
|
|
emit('save-success') // 通知父组件刷新列表
|
|||
|
|
visible.value = false // 关闭抽屉
|
|||
|
|
return true
|
|||
|
|
} catch (error) {
|
|||
|
|
Message.error('物料照片导入失败，请重试！')
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 打开抽屉
|
|||
|
|
const onOpen = () => {
|
|||
|
|
reset()
|
|||
|
|
visible.value = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
defineExpose({ onOpen })
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
fieldset {
|
|||
|
|
padding: 15px 15px 0 15px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
border: 1px solid var(--color-neutral-3);
|
|||
|
|
border-radius: 3px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
fieldset legend {
|
|||
|
|
color: rgb(var(--gray-10));
|
|||
|
|
padding: 2px 5px 2px 5px;
|
|||
|
|
border: 1px solid var(--color-neutral-3);
|
|||
|
|
border-radius: 3px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-box {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
}
|
|||
|
|
</style>
|