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
|
// 导出设备台账 Excel
|
||||||
exportMachinery: async (params: any) => {
|
exportMachinery: async (params: any) => {
|
||||||
return await request.download({ url: `/mes/dv/machinery/export-excel`, params })
|
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" /> 新增
|
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||||
</el-button>
|
</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
|
<el-button
|
||||||
type="success"
|
type="success"
|
||||||
plain
|
plain
|
||||||
|
|
@ -139,6 +147,8 @@
|
||||||
|
|
||||||
<!-- 表单弹窗:添加/修改 -->
|
<!-- 表单弹窗:添加/修改 -->
|
||||||
<MachineryForm ref="formRef" @success="getList" />
|
<MachineryForm ref="formRef" @success="getList" />
|
||||||
|
<!-- 设备导入对话框 -->
|
||||||
|
<MachineryImportForm ref="importFormRef" @success="getList" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<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 { MdWorkshopApi, MdWorkshopVO } from '@/api/mes/md/workstation/workshop'
|
||||||
import MachineryForm from './MachineryForm.vue'
|
import MachineryForm from './MachineryForm.vue'
|
||||||
import MachineryTypeTree from './MachineryTypeTree.vue'
|
import MachineryTypeTree from './MachineryTypeTree.vue'
|
||||||
|
import MachineryImportForm from './MachineryImportForm.vue'
|
||||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||||
|
|
||||||
defineOptions({ name: 'MesDvMachinery' })
|
defineOptions({ name: 'MesDvMachinery' })
|
||||||
|
|
@ -236,7 +247,11 @@ const handleExport = async () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO @AI:导入逻辑;
|
/** 设备导入 */
|
||||||
|
const importFormRef = ref()
|
||||||
|
const handleImport = () => {
|
||||||
|
importFormRef.value.open()
|
||||||
|
}
|
||||||
|
|
||||||
/** 初始化 **/
|
/** 初始化 **/
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue