feat(mes-dv): 设备台账添加导入功能前端 UI

- 新增 MachineryImportForm 组件,参考物料导入模式
- 列表页添加导入按钮和导入弹窗
- API 新增 importTemplate 方法(后端接口待实现)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
pull/871/MERGE
YunaiV 2026-02-17 10:25:03 +08:00
parent 5428ed8351
commit d313450069
3 changed files with 159 additions and 1 deletions

View File

@ -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` })
}
}

View File

@ -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>仅允许导入 xlsxlsx 格式文件</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>

View File

@ -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 () => {