diff --git a/apps/web-antd/src/views/onenetmanagement/privateProduct/index.vue b/apps/web-antd/src/views/onenetmanagement/privateProduct/index.vue index c20cbdb..75c1a65 100644 --- a/apps/web-antd/src/views/onenetmanagement/privateProduct/index.vue +++ b/apps/web-antd/src/views/onenetmanagement/privateProduct/index.vue @@ -2,7 +2,7 @@ import type { VbenFormProps } from '#/adapter/form'; import type { VxeGridProps } from '#/adapter/vxe-table'; -import { h, ref } from 'vue'; +import { h, ref, nextTick } from 'vue'; import { useRouter } from 'vue-router'; import { Page, useVbenModal } from '@vben/common-ui'; @@ -17,6 +17,7 @@ import { postOneNetProductListAsync, postOneNetProductModifyAsync, postFilesUpload, + postFilesDownload, } from '#/api-client'; import { TableAction } from '#/components/table-action'; import { $t } from '#/locales'; @@ -26,6 +27,7 @@ import { editProductFormSchemaEdit, querySchema, tableSchema, + setFileSelectedCallback, } from './schema'; defineOptions({ @@ -70,13 +72,41 @@ const gridOptions: VxeGridProps = { const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions }); const editRow: Record = ref({}); +// 声明文件变量,用于存储选择的文件 +let selectedFile: File | null = null; + +// 设置文件选择回调 +setFileSelectedCallback((file) => { + selectedFile = file; +}); const [UserModal, userModalApi] = useVbenModal({ draggable: true, + footer: true, + showCancelButton: true, + showConfirmButton: true, onConfirm: submit, onBeforeClose: () => { // 只在确认提交后重置,而不是每次关闭都重置 return true; }, + onOpen: () => { + // 重置文件选择 + selectedFile = null; + }, + onOpenChange: (isOpen: boolean) => { + if (isOpen && editRow.value.id) { + // 编辑模式下,模态框打开后设置表单值 + nextTick(() => { + editFormApi.setValues({ ...editRow.value }); + }); + } + }, + onCancel: () => { + // 取消时也重置文件选择 + selectedFile = null; + // 关闭模态框 + userModalApi.close(); + }, }); const [AddForm, addFormApi] = useVbenForm({ @@ -124,11 +154,43 @@ async function submit() { const formValues = await formApi.getValues(); - // 检查DeviceThingModelUrl是否为空 - if (!formValues.DeviceThingModelFileId) { + // 提交前校验 + if (!formValues.deviceThingModelFileName) { Message.error('请选择设备模型文件'); return; } + + // 如果有文件需要上传,先上传 + if (selectedFile) { + try { + userModalApi.setState({ loading: true, confirmLoading: true }); + const result = await postFilesUpload({ body: { files: [selectedFile] } }); + if (result.status === 204 || result.status === 200) { + const fileInfo = result.data?.[0]; + if (fileInfo && fileInfo.id) { + formValues.deviceThingModelFileId = fileInfo.id; + // 文件名已在表单中 + } else { + Message.error('文件上传成功但未获取到文件ID'); + userModalApi.setState({ loading: false, confirmLoading: false }); + return; + } + } else { + Message.error('文件上传失败'); + userModalApi.setState({ loading: false, confirmLoading: false }); + return; + } + } catch (error) { + Message.error('文件上传失败'); + userModalApi.setState({ loading: false, confirmLoading: false }); + return; + } + } + + // 清空全局变量,防止下次误用 + selectedFile = null; + + // 继续后续表单提交逻辑 const fetchParams: any = isEdit ? { @@ -140,7 +202,6 @@ async function submit() { }; try { - userModalApi.setState({ loading: true, confirmLoading: true }); const resp = await api({ body: fetchParams }); if (resp.data) { Message.success( @@ -162,12 +223,15 @@ async function submit() { async function onEdit(record: any) { editRow.value = record; userModalApi.open(); - editFormApi.setValues({ ...record }); + // 重置文件选择状态 + selectedFile = null; } const openAddModal = async () => { editRow.value = {}; userModalApi.open(); + // 重置文件选择状态 + selectedFile = null; }; // 删除函数 @@ -176,6 +240,8 @@ async function onDel(record: any) { const resp = await postOneNetProductDeleteAsync({ body: { id: record.id } }); if (resp.data) { Message.success($t('common.deleteSuccess')); + // 重置文件选择 + selectedFile = null; gridApi.reload(); } else { Message.error($t('common.deleteFail')); @@ -184,6 +250,32 @@ async function onDel(record: any) { Message.error($t('common.deleteFail')); } } + +// 下载文件函数 +async function onDownloadFile(record: any) { + if (!record.deviceThingModelFileId) { + Message.error('文件ID不存在,无法下载'); + return; + } + + try { + const { data } = await postFilesDownload({ + body: { id: record.deviceThingModelFileId }, + responseType: 'blob', + }); + const url = window.URL.createObjectURL(new Blob([data as Blob])); + const link = document.createElement('a'); + link.href = url; + link.setAttribute('download', record.deviceThingModelFileName || 'device-model-file'); + document.body.append(link); + link.click(); + link.remove(); + window.URL.revokeObjectURL(url); + Message.success('文件下载成功'); + } catch (error) { + Message.error('文件下载失败'); + } +} + +