设备台账：上传路径修改，文件上传修改为原生方式

上传组件：新增上传文件公共组件

ui/dasadmin/src/api/backend/index.ts

@@ -301,14 +301,15 @@ export function delOtherParamsReq(params: any) {
 export function uploadOtherParamsFileReq(formData: FormData, V: string) {
     const token = encrypt_aes(adminInfo.token, V)
     return createAxios({
-        url: '/api/equipment//file/upload',
+        url: '/api/equipment/file/upload',
         method: 'POST',
         data: formData,
         headers: {
             'Content-Type': 'multipart/form-data',
             V,
             token,
-        }
+        },
+        timeout: 1000 * 60 * 2,
     },
         { customEncrypt: true })
 }

ui/dasadmin/src/components/upload/index.vue

@@ -0,0 +1,46 @@
+<template>
+    <div class="uploadContainer" @click="upload">
+        <slot></slot>
+        <input ref="uploadRef" type="file" style="display: none" :multiple="props.multiple" @change="change" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const props = defineProps({
+    multiple: {
+        type: Boolean,
+        default: false,
+    },
+    onChange: {
+        type: Function,
+        default: () => {},
+    },
+})
+
+const uploadRef = ref()
+
+const upload = (e:any) => {
+    e.stopPropagation()
+    uploadRef.value!.click()
+}
+
+const change = (payload: Event) => {
+    payload.preventDefault()
+    const files = (payload.target as HTMLInputElement).files
+    props.onChange(files)
+}
+const clearFiles = () => {
+    uploadRef.value!.value = ''
+}
+
+defineExpose({
+    clearFiles,
+})
+</script>
+
+<style scoped lang="scss">
+.uploadContainer {
+    height: 100%;
+}
+</style>

ui/dasadmin/src/views/backend/equipment/equipmentManagement/index.vue

@@ -84,7 +84,15 @@
                 </el-main>
             </el-container>
             <!-- 机组设备弹窗 -->
-            <el-dialog v-model="type10002DialogVisible" width="800" :title="type10002DialogTitle" align-center :close-on-click-modal="false" @close="cancelType10002Dialog">
+            <el-dialog
+                v-model="type10002DialogVisible"
+                width="800"
+                :title="type10002DialogTitle"
+                align-center
+                :close-on-click-modal="false"
+                @close="cancelType10002Dialog"
+                :before-close="beforeCloseType10002Dialog"
+            >
                 <el-tabs v-model="activeName">
                     <el-form ref="deviceDataFormRef" label-width="auto" :model="deviceData" :rules="editAddDeviceRules">
                         <el-tab-pane label="风机参数" name="1">
@@ -605,12 +613,9 @@
         <el-dialog v-model="attachmentDialogVisible" :title="attachmentDialogTitle" :width="800" :close-on-click-modal="false">
             <div class="attachmentContainer">
                 <div class="header">
-                    <!-- <el-button @click="uploadAttachment">添加附件</el-button> -->
-                    <el-upload ref="uploadRef" :show-file-list="false" :http-request="uploadAttachment" multiple>
-                        <template #trigger>
-                            <el-button type="primary">添加附件</el-button>
-                        </template>
-                    </el-upload>
+                    <CustomUpload multiple :onChange="uploadAttachment" ref="customUploadRef">
+                        <el-button type="primary" :loading="uploadAttachmentLoading">添加附件</el-button>
+                    </CustomUpload>
                 </div>
                 <div class="content">
                     <el-carousel indicator-position="outside" @change="changeImgIndex">
@@ -660,20 +665,12 @@ import {
     updateOtherParamsReq,
     delOtherParamsReq,
     uploadOtherParamsFileReq,
-    readFileReq,
 } from '/@/api/backend'
 import {
     ElTable,
     ElMessage,
     ElMessageBox,
     FormInstance,
-    UploadInstance,
-    genFileId,
-    UploadProps,
-    UploadRawFile,
-    UploadFile,
-    UploadFiles,
-    UploadRequestOptions,
 } from 'element-plus'
 import { useAdminInfo } from '/@/stores/adminInfo'
 import { encrypt_aes, generateRandomNumber } from '/@/utils/crypto'
@@ -681,6 +678,7 @@ import ControlPage from './control.vue'
 import MeasurementPage from './measurement.vue'
 import { ModelAttributeType } from '/@/views/backend/auth/model/type'
 import { theoreticalpowerCurveList } from '/@/api/backend/theoreticalpowerCurve/request'
+import CustomUpload from '/@/components/upload/index.vue'
 import { permission } from '/@/utils/directive'
 const vPermission = permission()
 
@@ -1262,8 +1260,6 @@ const getCurDialogState = () => {
     }
 }
 const saveDeviceData = () => {
-    // console.log(deviceData, 'deviceData')
-
     deviceDataFormRef.value?.validate((valid: boolean) => {
         if (valid) {
             deviceData.standard = deviceData.standard ? 1 : 0
@@ -1344,6 +1340,24 @@ const saveDeviceData = () => {
         }
     })
 }
+const beforeCloseType10002Dialog = (done: () => void) =>{
+    if (addImgList.value.length) {
+        ElMessageBox.confirm('上传图片未保存，确认取消？', '', {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning',
+        })
+            .then(() => {
+                done()
+                addImgList.value = []
+                imgList.value = []
+            })
+            .catch(() => {})
+    } else {
+        done()
+        imgList.value = []
+    }
+}
 const cancelType10002Dialog = () => {
     if (addImgList.value.length) {
         ElMessageBox.confirm('上传图片未保存，确认取消？', '', {
@@ -1410,30 +1424,26 @@ const setOtherParamsFormData = (data: any = {}) => {
 const attachmentDialogVisible = ref(false)
 const attachmentDialogTitle = ref('风机详细信息')
 
-const uploadRef = ref<UploadInstance>()
-const uploadAttachment = (file: UploadRequestOptions) => {
+const customUploadRef = ref()
+const uploadAttachmentLoading =ref(false)
+const uploadAttachment = (files: FileList) => {
+    uploadAttachmentLoading.value = true
     const formData = new FormData()
-    formData.append('fileList', file.file)
+    for (let i = 0; i < files.length; i++) {
+        formData.append('fileList', files[i])
+    }
     const v = generateRandomNumber(16)
     return uploadOtherParamsFileReq(formData, v).then((res) => {
-        addImgList.value.push({
-            name: file.file.name,
-            url: res.data[0].url,
-            component: attachmentComponent.value,
+        customUploadRef.value?.clearFiles()
+        res.data.forEach((item:{ name:string, url:string})=>{
+            addImgList.value.push({
+                name: item.name,
+                url: item.url,
+                component: attachmentComponent.value,
+            })
         })
-        addImgList.value.push({
-            name: file.file.name,
-            url: res.data[1].url,
-            component: attachmentComponent.value,
-        })
-        const imgListUrl = imgList.value.map((item: any) => item.url)
-        for (let i = addImgList.value.length - 1; i >= 0; i--) {
-            if (imgListUrl.includes('/api/equipment/file/read?path=' + addImgList.value[i].url)) {
-                const index = imgList.value.findIndex((item: any) => item.url === '/api/equipment/file/read?path=' + addImgList.value[i].url)
-                imgList.value.splice(index, 1)
-            }
-        }
         previewImg([...imgList.value, ...addImgList.value])
+        uploadAttachmentLoading.value = false
     })
 }
 const setUploadImgInfo = (id: string) => {
@@ -1442,13 +1452,7 @@ const setUploadImgInfo = (id: string) => {
         item.deviceId = id
     })
 }
-const handleExceed: UploadProps['onExceed'] = (files) => {
-    uploadRef.value!.clearFiles()
-    const file = files[0] as UploadRawFile
-    file.uid = genFileId()
-    uploadRef.value!.handleStart(file)
-    uploadRef.value!.submit()
-}
+
 const attachmentComponent = ref('')
 const openAttachment = (type: string) => {
     attachmentComponent.value = type
@@ -1491,6 +1495,7 @@ const previewImgIndex = ref(0)
 const changeImgIndex = (index: number) => {
     previewImgIndex.value = index
 }
+
 </script>
 
 <style scoped lang="scss">