被检设备上传图片功能

frontend/src/api/device/device/formData.ts

@@ -0,0 +1,91 @@
+import type { Device } from '@/api/device/interface/device'
+import type { Monitor } from '@/api/device/interface/monitor'
+
+const DEVICE_FIELD_NAMES = [
+    'id',
+    'name',
+    'pattern',
+    'devType',
+    'manufacturer',
+    'createDate',
+    'createId',
+    'hardwareVersion',
+    'softwareVersion',
+    'protocol',
+    'ip',
+    'port',
+    'encryptionFlag',
+    'series',
+    'devKey',
+    'sampleId',
+    'arrivedDate',
+    'cityName',
+    'gdName',
+    'subName',
+    'reportPath',
+    'icdId',
+    'planId',
+    'factorFlag',
+    'preinvestmentPlan',
+    'delegate',
+    'inspectChannel',
+    'inspectDate',
+    'harmSysId',
+    'importFlag'
+] as const
+
+const MONITOR_FIELD_NAMES = [
+    'id',
+    'devId',
+    'busbar',
+    'name',
+    'num',
+    'pt',
+    'ct',
+    'connection',
+    'statInterval',
+    'harmSysId',
+    'checkFlag'
+] as const
+
+function appendIfPresent(formData: FormData, key: string, value: unknown) {
+    if (value === null || value === undefined || value === '') {
+        return
+    }
+    formData.append(key, String(value))
+}
+
+function appendMonitorFields(formData: FormData, monitorList: Monitor.ResPqMon[]) {
+    monitorList.forEach((monitor, index) => {
+        MONITOR_FIELD_NAMES.forEach(fieldName => {
+            appendIfPresent(formData, `monitorList[${index}].${fieldName}`, monitor[fieldName])
+        })
+    })
+}
+
+export function buildPqDevFormData(device: Device.ResPqDev, imageFile?: File | null) {
+    const formData = new FormData()
+
+    DEVICE_FIELD_NAMES.forEach(fieldName => {
+        appendIfPresent(formData, fieldName, device[fieldName])
+    })
+
+    appendMonitorFields(formData, device.monitorList ?? [])
+
+    if (imageFile) {
+        formData.append('image', imageFile)
+    }
+
+    return formData
+}
+
+export function buildDeviceImagePreviewSrc(
+    hasImage?: boolean,
+    imageBase64?: string | null,
+    imageContentType?: string | null
+) {
+    if (!hasImage || !imageBase64 || !imageContentType) {
+        return null
+    }
+    return `data:${imageContentType};base64,${imageBase64}`
+}

frontend/src/api/device/device/index.ts

@@ -1,5 +1,6 @@
 import type {Device} from '@/api/device/interface/device'
 import http from '@/api'
+import { buildPqDevFormData } from './formData'
 
 /**
  * @name 被检设备管理模块
@@ -11,13 +12,13 @@ export const getPqDevList = (params: Device.ReqPqDevParams) => {
 }
 
 //添加被检设备
-export const addPqDev = (params: Device.ResPqDev) => {
-    return http.post(`/pqDev/add`, params)
+export const addPqDev = (params: Device.ResPqDev, imageFile?: File | null) => {
+    return http.upload(`/pqDev/add`, buildPqDevFormData(params, imageFile))
 }
 
 //编辑被检设备
-export const updatePqDev = (params: Device.ResPqDev) => {
-    return http.post(`/pqDev/update`, params)
+export const updatePqDev = (params: Device.ResPqDev, imageFile?: File | null) => {
+    return http.upload(`/pqDev/update`, buildPqDevFormData(params, imageFile))
 }
 
 //删除被检设备
@@ -71,3 +72,7 @@ export const getPqDev = () => {
 export const getSelectOptions = (params:{ pattern: string }) => {
     return http.get(`/pqDev/getSelectOptions`, params)
 }
+
+export const downloadDeviceImage = (id: string) => {
+    return http.downloadGetWithHeaders(`/pqDev/image/download?id=${id}`)
+}

frontend/src/api/device/interface/device.ts

@@ -91,6 +91,9 @@ export namespace Device {
         monitorList: Monitor.ResPqMon[]
         checked?: boolean // 是否已选择
         disabled?: boolean // 是否禁用
+        hasImage?: boolean // 是否存在设备图片
+        imageBase64?: string | null // 设备图片 Base64，用于详情回显
+        imageContentType?: string | null // 设备图片 MIME 类型
     }
 
     export interface SelectOption {
@@ -116,4 +119,4 @@ export namespace Device {
      * 被检设备表格查询分页返回的对象；
      */
     export interface ResPqDevPage extends ResPage<ResPqDev> {}
-}
+}