产品管理实现物模型文件上传和下载

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<any> = {
 const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
 
 const editRow: Record<string, any> = 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('文件下载失败');
+  }
+}
 </script>
 
 <template>
@@ -213,6 +305,17 @@ async function onDel(record: any) {
         />
       </template>
 
+      <template #deviceThingModelFileName="{ row }">
+        <a
+          v-if="row.deviceThingModelFileName && row.deviceThingModelFileId"
+          @click="onDownloadFile(row)"
+          style="color: #1890ff; cursor: pointer; text-decoration: underline;"
+        >
+          {{ row.deviceThingModelFileName }}
+        </a>
+        <span v-else>{{ row.deviceThingModelFileName || '-' }}</span>
+      </template>
+
       <template #action="{ row }">
         <TableAction
           :actions="[

apps/web-antd/src/views/onenetmanagement/privateProduct/schema.ts

@@ -47,6 +47,12 @@ export const tableSchema: any = computed((): VxeGridProps['columns'] => [
     title: $t('abp.OneNETManagement.CommunicationAddressTLS'),
     minWidth: '150',
   },
+  {
+    field: 'deviceThingModelFileName',
+    title: $t('abp.OneNETManagement.DeviceThingModelFileName'),
+    minWidth: '150',
+    slots: { default: 'deviceThingModelFileName' },
+  },
   {
     field: 'isEnabled',
     title: $t('common.isEnable'),
@@ -62,6 +68,16 @@ export const tableSchema: any = computed((): VxeGridProps['columns'] => [
   },
 ]);
 
+// 全局变量存储选择的文件
+export let selectedFile: File | null = null;
+
+// 文件选择回调函数
+let _onFileSelected: ((file: File) => void) | null = null;
+
+export function setFileSelectedCallback(callback: (file: File) => void) {
+  _onFileSelected = callback;
+}
+
 export const addProductFormSchema: any = computed(() => [
   {
     component: 'ApiSelect',
@@ -108,7 +124,7 @@ export const addProductFormSchema: any = computed(() => [
   },
   {
     component: 'Input',
-    fieldName: 'IoTPlatformProductId',
+    fieldName: 'ioTPlatformProductId',
     label: $t('abp.OneNETManagement.OneNETProductId'),
     rules: z.string().min(1, {
       message: `${$t('common.pleaseInput')}${$t('common.info')}${$t('abp.OneNETManagement.OneNETProductId')}`,
@@ -132,7 +148,7 @@ export const addProductFormSchema: any = computed(() => [
   },
   {
     component: 'Input',
-    fieldName: 'CommunicationAddressTLS',
+    fieldName: 'communicationAddressTLS',
     label: $t('abp.OneNETManagement.CommunicationAddressTLS'),
     rules: z.string().min(1, {
       message: `${$t('common.pleaseInput')}${$t('common.info')}${$t('abp.OneNETManagement.CommunicationAddressTLS')}`,
@@ -140,7 +156,7 @@ export const addProductFormSchema: any = computed(() => [
   },
   {
     component: 'Input',
-    fieldName: 'DeviceThingModelFileId',
+    fieldName: 'deviceThingModelFileName',
     label: $t('abp.OneNETManagement.DeviceThingModelFileName'),
     componentProps: {
       placeholder: '请选择文件',
@@ -151,48 +167,26 @@ export const addProductFormSchema: any = computed(() => [
         onClick: () => {
           const input = document.createElement('input');
           input.type = 'file';
-          input.accept = '*/*';
+          input.accept = '.json,.xlsx,.xls';
-          input.onchange = async (e: any) => {
+          input.onchange = (e: any) => {
             const file = e.target.files[0];
             if (file) {
-              try {
+              // 只显示文件名，不上传
-                const result = await postFilesUpload({
+              const currentInput = document.querySelector('input[placeholder="请选择文件"]') as HTMLInputElement;
-                  body: {
+              if (currentInput) {
-                    files: [file]
+                currentInput.value = file.name;
-                  }
+                // 触发change事件
-                });
+                currentInput.dispatchEvent(new Event('input', { bubbles: true }));
+                currentInput.dispatchEvent(new Event('change', { bubbles: true }));
                 
-                if (result.status === 204 || result.status === 200) {
+                // 存储文件对象到全局变量，用于后续上传
-                  // 假设返回的是文件信息数组，取第一个文件的ID
+                selectedFile = file;
-                  const fileInfo = result.data?.[0];
+                // 调用回调函数
-                  if (fileInfo && fileInfo.id) {
+                if (_onFileSelected) {
-                    // 查找当前输入框并更新值
+                  _onFileSelected(file);
-                    const currentInput = document.querySelector('input[placeholder="请选择文件"]');
-                    if (currentInput) {
-                      (currentInput as HTMLInputElement).value = fileInfo.id;
-                      // 触发change事件
-                      currentInput.dispatchEvent(new Event('input', { bubbles: true }));
-                      currentInput.dispatchEvent(new Event('change', { bubbles: true }));
-                      
-                      // 同时设置文件名到隐藏字段
-                      const fileNameInput = document.querySelector('input[name="DeviceThingModelFileName"]') || 
-                                         document.querySelector('input[data-field="DeviceThingModelFileName"]');
-                      if (fileNameInput) {
-                        (fileNameInput as HTMLInputElement).value = file.name;
-                        fileNameInput.dispatchEvent(new Event('input', { bubbles: true }));
-                        fileNameInput.dispatchEvent(new Event('change', { bubbles: true }));
-                      }
-                    }
-                    console.log('文件上传成功，文件ID:', fileInfo.id, '文件名:', file.name);
-                  } else {
-                    console.error('文件上传成功但未获取到文件ID');
-                  }
-                } else {
-                  console.error('文件上传失败');
                 }
-              } catch (error) {
-                console.error('文件上传失败:', error);
               }
+              console.log('文件已选择:', file.name, '大小:', file.size, '字节');
             }
           };
           input.click();
@@ -205,7 +199,7 @@ export const addProductFormSchema: any = computed(() => [
   },
   {
     component: 'Input',
-    fieldName: 'DeviceThingModelFileName',
+    fieldName: 'deviceThingModelFileId',
     label: '',
     componentProps: {
       type: 'hidden',
@@ -229,6 +223,7 @@ export const editProductFormSchemaEdit: any = computed(() => [
       labelField: 'accountName',
       valueField: 'oneNETAccountId',
       immediate: true,
+      disabled: true, // 编辑时禁用
       afterFetch: (res: any) => {
         // 如果是 Axios 响应对象，提取 data
         if (res && res.data) {
@@ -259,8 +254,12 @@ export const editProductFormSchemaEdit: any = computed(() => [
   },
   {
     component: 'Input',
-    fieldName: 'IoTPlatformProductId',
+    fieldName: 'ioTPlatformProductId',
     label: $t('abp.OneNETManagement.OneNETProductId'),
+    disabled: true,
+    componentProps: {
+      readonly: true, // 编辑时只读
+    },
     rules: z.string().min(1, {
       message: `${$t('common.pleaseInput')}${$t('common.info')}${$t('abp.OneNETManagement.OneNETProductId')}`,
     }),
@@ -269,6 +268,10 @@ export const editProductFormSchemaEdit: any = computed(() => [
     component: 'Input',
     fieldName: 'productAccesskey',
     label: $t('abp.OneNETManagement.ProductAccesskey'),
+    disabled: true,
+    componentProps: {
+      readonly: true, // 编辑时只读
+    },
     rules: z.string().min(1, {
       message: `${$t('common.pleaseInput')}${$t('common.info')}${$t('abp.OneNETManagement.ProductAccesskey')}`,
     }),
@@ -283,7 +286,7 @@ export const editProductFormSchemaEdit: any = computed(() => [
   },
   {
     component: 'Input',
-    fieldName: 'CommunicationAddressTLS',
+    fieldName: 'communicationAddressTLS',
     label: $t('abp.OneNETManagement.CommunicationAddressTLS'),
     rules: z.string().min(1, {
       message: `${$t('common.pleaseInput')}${$t('common.info')}${$t('abp.OneNETManagement.CommunicationAddressTLS')}`,
@@ -291,7 +294,7 @@ export const editProductFormSchemaEdit: any = computed(() => [
   },
   {
     component: 'Input',
-    fieldName: 'DeviceThingModelFileId',
+    fieldName: 'deviceThingModelFileName',
     label: $t('abp.OneNETManagement.DeviceThingModelFileName'),
     componentProps: {
       placeholder: '请选择文件',
@@ -302,48 +305,26 @@ export const editProductFormSchemaEdit: any = computed(() => [
         onClick: () => {
           const input = document.createElement('input');
           input.type = 'file';
-          input.accept = '*/*';
+          input.accept = '.json,.xlsx,.xls';
-          input.onchange = async (e: any) => {
+          input.onchange = (e: any) => {
             const file = e.target.files[0];
             if (file) {
-              try {
+              // 只显示文件名，不上传
-                const result = await postFilesUpload({
+              const currentInput = document.querySelector('input[placeholder="请选择文件"]') as HTMLInputElement;
-                  body: {
+              if (currentInput) {
-                    files: [file]
+                currentInput.value = file.name;
-                  }
+                // 触发change事件
-                });
+                currentInput.dispatchEvent(new Event('input', { bubbles: true }));
+                currentInput.dispatchEvent(new Event('change', { bubbles: true }));
                 
-                if (result.status === 204 || result.status === 200) {
+                // 存储文件对象到全局变量，用于后续上传
-                  // 假设返回的是文件信息数组，取第一个文件的ID
+                selectedFile = file;
-                  const fileInfo = result.data?.[0];
+                // 调用回调函数
-                  if (fileInfo && fileInfo.id) {
+                if (_onFileSelected) {
-                    // 查找当前输入框并更新值
+                  _onFileSelected(file);
-                    const currentInput = document.querySelector('input[placeholder="请选择文件"]');
-                    if (currentInput) {
-                      (currentInput as HTMLInputElement).value = fileInfo.id;
-                      // 触发change事件
-                      currentInput.dispatchEvent(new Event('input', { bubbles: true }));
-                      currentInput.dispatchEvent(new Event('change', { bubbles: true }));
-                      
-                      // 同时设置文件名到隐藏字段
-                      const fileNameInput = document.querySelector('input[name="DeviceThingModelFileName"]') || 
-                                         document.querySelector('input[data-field="DeviceThingModelFileName"]');
-                      if (fileNameInput) {
-                        (fileNameInput as HTMLInputElement).value = file.name;
-                        fileNameInput.dispatchEvent(new Event('input', { bubbles: true }));
-                        fileNameInput.dispatchEvent(new Event('change', { bubbles: true }));
-                      }
-                    }
-                    console.log('文件上传成功，文件ID:', fileInfo.id, '文件名:', file.name);
-                  } else {
-                    console.error('文件上传成功但未获取到文件ID');
-                  }
-                } else {
-                  console.error('文件上传失败');
                 }
-              } catch (error) {
-                console.error('文件上传失败:', error);
               }
+              console.log('文件已选择:', file.name, '大小:', file.size, '字节');
             }
           };
           input.click();
@@ -356,7 +337,7 @@ export const editProductFormSchemaEdit: any = computed(() => [
   },
   {
     component: 'Input',
-    fieldName: 'DeviceThingModelFileName',
+    fieldName: 'deviceThingModelFileId',
     label: '',
     componentProps: {
       type: 'hidden',

apps/web-antd/src/views/system/abpfiles/AddModal.vue

@@ -175,6 +175,7 @@ const handleUpload = async () => {
     // 检查上传结果
     if (result.status === 204 || result.status === 200) {
       message.success(`文件上传成功！共上传 ${fileList.value.length} 个文件`);
+      fileList.value = [];
       console.log('Emitting reload event...');
       emit('reload');
       modalApi.close();