feat(mes-dv): 设备台账添加导入功能前端 UI
- 新增 MachineryImportForm 组件,参考物料导入模式 - 列表页添加导入按钮和导入弹窗 - API 新增 importTemplate 方法(后端接口待实现) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>pull/871/MERGE
parent
5428ed8351
commit
d313450069
|
|
@ -47,5 +47,10 @@ export const DvMachineryApi = {
|
|||
// 导出设备台账 Excel
|
||||
exportMachinery: async (params: any) => {
|
||||
return await request.download({ url: `/mes/dv/machinery/export-excel`, params })
|
||||
},
|
||||
|
||||
// 下载设备导入模板
|
||||
importTemplate: async () => {
|
||||
return await request.download({ url: `/mes/dv/machinery/get-import-template` })
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,138 @@
|
|||
<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 setup lang="ts">
|
||||
import { DvMachineryApi } from '@/api/mes/dv/machinery'
|
||||
import { getAccessToken, getTenantId } from '@/utils/auth'
|
||||
import download from '@/utils/download'
|
||||
|
||||
defineOptions({ name: 'MachineryImportForm' })
|
||||
|
||||
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 + '/mes/dv/machinery/import'
|
||||
const uploadHeaders = ref() // 上传 Header 头
|
||||
const fileList = ref([]) // 文件列表
|
||||
const updateSupport = ref(0) // 是否更新已经存在的设备数据
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = () => {
|
||||
dialogVisible.value = true
|
||||
updateSupport.value = 0
|
||||
fileList.value = []
|
||||
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)
|
||||
resetForm()
|
||||
return
|
||||
}
|
||||
// 拼接提示语
|
||||
const data = response.data
|
||||
let text = '上传成功数量:' + data.createCodes.length + ';'
|
||||
for (let code of data.createCodes) {
|
||||
text += '< ' + code + ' >'
|
||||
}
|
||||
text += '更新成功数量:' + data.updateCodes.length + ';'
|
||||
for (const code of data.updateCodes) {
|
||||
text += '< ' + code + ' >'
|
||||
}
|
||||
text += '更新失败数量:' + Object.keys(data.failureCodes).length + ';'
|
||||
for (const code in data.failureCodes) {
|
||||
text += '< ' + code + ': ' + data.failureCodes[code] + ' >'
|
||||
}
|
||||
message.alert(text)
|
||||
formLoading.value = false
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emits('success')
|
||||
}
|
||||
|
||||
/** 上传错误提示 */
|
||||
const submitFormError = (): void => {
|
||||
message.error('上传失败,请您重新上传!')
|
||||
formLoading.value = false
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = async (): Promise<void> => {
|
||||
// 重置上传状态和文件
|
||||
formLoading.value = false
|
||||
await nextTick()
|
||||
uploadRef.value?.clearFiles()
|
||||
}
|
||||
|
||||
/** 文件数超出提示 */
|
||||
const handleExceed = (): void => {
|
||||
message.error('最多只能上传一个文件!')
|
||||
}
|
||||
|
||||
/** 下载模板操作 */
|
||||
const importTemplate = async () => {
|
||||
const res = await DvMachineryApi.importTemplate()
|
||||
download.excel(res, '设备导入模板.xls')
|
||||
}
|
||||
</script>
|
||||
|
|
@ -71,6 +71,14 @@
|
|||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
@click="handleImport"
|
||||
v-hasPermi="['mes:dv-machinery:import']"
|
||||
>
|
||||
<Icon icon="ep:upload" class="mr-5px" /> 导入
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
|
|
@ -139,6 +147,8 @@
|
|||
|
||||
<!-- 表单弹窗:添加/修改 -->
|
||||
<MachineryForm ref="formRef" @success="getList" />
|
||||
<!-- 设备导入对话框 -->
|
||||
<MachineryImportForm ref="importFormRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -148,6 +158,7 @@ import { DvMachineryApi, DvMachineryVO } from '@/api/mes/dv/machinery'
|
|||
import { MdWorkshopApi, MdWorkshopVO } from '@/api/mes/md/workstation/workshop'
|
||||
import MachineryForm from './MachineryForm.vue'
|
||||
import MachineryTypeTree from './MachineryTypeTree.vue'
|
||||
import MachineryImportForm from './MachineryImportForm.vue'
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
|
||||
defineOptions({ name: 'MesDvMachinery' })
|
||||
|
|
@ -236,7 +247,11 @@ const handleExport = async () => {
|
|||
}
|
||||
}
|
||||
|
||||
// TODO @AI:导入逻辑;
|
||||
/** 设备导入 */
|
||||
const importFormRef = ref()
|
||||
const handleImport = () => {
|
||||
importFormRef.value.open()
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(async () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue