8 changed files with 285 additions and 98 deletions
@ -0,0 +1,134 @@ |
|||
<template> |
|||
<Dialog v-model="dialogVisible" title="工位信息导入" width="400"> |
|||
<el-upload |
|||
ref="uploadRef" |
|||
v-model:file-list="fileList" |
|||
:action="importUrl + '?updateSupport=' + updateSupport" |
|||
:auto-upload="false" |
|||
:disabled="formLoading" |
|||
:headers="uploadHeaders" |
|||
:limit="1" |
|||
:on-error="submitFormError" |
|||
:on-exceed="handleExceed" |
|||
:on-success="submitFormSuccess" |
|||
accept=".xlsx, .xls" |
|||
drag |
|||
> |
|||
<Icon icon="ep:upload" /> |
|||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> |
|||
<template #tip> |
|||
<div class="el-upload__tip text-center"> |
|||
<div class="el-upload__tip"> |
|||
<el-checkbox v-model="updateSupport" /> |
|||
是否更新已经存在的工位信息数据 |
|||
</div> |
|||
<span>仅允许导入 xls、xlsx 格式文件。</span> |
|||
<el-link |
|||
:underline="false" |
|||
style="font-size: 12px; vertical-align: baseline" |
|||
type="primary" |
|||
@click="importTemplate" |
|||
> |
|||
下载模板 |
|||
</el-link> |
|||
</div> |
|||
</template> |
|||
</el-upload> |
|||
<template #footer> |
|||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button> |
|||
<el-button @click="dialogVisible = false">取 消</el-button> |
|||
</template> |
|||
</Dialog> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import * as WorkstationApi from '@/api/wms/workstation' |
|||
import { getAccessToken, getTenantId } from '@/utils/auth' |
|||
import download from '@/utils/download' |
|||
|
|||
defineOptions({ name: 'WmsItembasicImportForm' }) |
|||
|
|||
const message = useMessage() // 消息弹窗 |
|||
|
|||
const dialogVisible = ref(false) // 弹窗的是否展示 |
|||
const formLoading = ref(false) // 表单的加载中 |
|||
const uploadRef = ref() |
|||
const importUrl = |
|||
import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/wms/workstation/import' |
|||
const uploadHeaders = ref() // 上传 Header 头 |
|||
const fileList = ref([]) // 文件列表 |
|||
const updateSupport = ref(0) // 是否更新已经存在的物品基本信息数据 |
|||
|
|||
/** 打开弹窗 */ |
|||
const open = () => { |
|||
dialogVisible.value = true |
|||
resetForm() |
|||
} |
|||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
|||
|
|||
/** 提交表单 */ |
|||
const submitForm = async () => { |
|||
if (fileList.value.length == 0) { |
|||
message.error('请上传文件') |
|||
return |
|||
} |
|||
// 提交请求 |
|||
uploadHeaders.value = { |
|||
Authorization: 'Bearer ' + getAccessToken(), |
|||
'tenant-id': getTenantId() |
|||
} |
|||
formLoading.value = true |
|||
uploadRef.value!.submit() |
|||
} |
|||
|
|||
/** 文件上传成功 */ |
|||
const emits = defineEmits(['success']) |
|||
const submitFormSuccess = (response: any) => { |
|||
if (response.code !== 0) { |
|||
message.error(response.msg) |
|||
formLoading.value = false |
|||
return |
|||
} |
|||
// 拼接提示语 |
|||
// const data = response.data |
|||
// console.log(data) |
|||
// let text = '上传成功数量：' + data.createUsernames.length + ';' |
|||
// for (let username of data.createUsernames) { |
|||
// text += '< ' + username + ' >' |
|||
// } |
|||
// text += '更新成功数量：' + data.updateUsernames.length + ';' |
|||
// for (const username of data.updateUsernames) { |
|||
// text += '< ' + username + ' >' |
|||
// } |
|||
// text += '更新失败数量：' + Object.keys(data.failureUsernames).length + ';' |
|||
// for (const username in data.failureUsernames) { |
|||
// text += '< ' + username + ': ' + data.failureUsernames[username] + ' >' |
|||
// } |
|||
// message.alert(text) |
|||
// 发送操作成功的事件 |
|||
emits('success') |
|||
} |
|||
|
|||
/** 上传错误提示 */ |
|||
const submitFormError = (): void => { |
|||
message.error('上传失败，请您重新上传！') |
|||
formLoading.value = false |
|||
} |
|||
|
|||
/** 重置表单 */ |
|||
const resetForm = () => { |
|||
// 重置上传状态和文件 |
|||
formLoading.value = false |
|||
uploadRef.value?.clearFiles() |
|||
} |
|||
|
|||
/** 文件数超出提示 */ |
|||
const handleExceed = (): void => { |
|||
message.error('最多只能上传一个文件！') |
|||
} |
|||
|
|||
/** 下载模板操作 */ |
|||
const importTemplate = async () => { |
|||
const res = await WorkstationApi.importWorkstationTemplate() |
|||
download.excel(res, '工位信息导入模版.xls') |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue