图片下载和预览

src/views/IO/delayPatrol/waitAudit/faultModal.vue

@@ -359,6 +359,7 @@
               form.attachments.push({
                 url: i.response?.data.url || i.url,
                 name: i.response?.data.fileName || i.name,
+                ossId:i.response?.data.ossId || i.ossId
               });
             }
           });

src/views/IO/delayPatrol/waitPatrol/faultModal.vue

@@ -359,6 +359,7 @@
               form.attachments.push({
                 url: i.response?.data.url || i.url,
                 name: i.response?.data.fileName || i.name,
+                ossId:i.response?.data.ossId || i.ossId
               });
             }
           });

src/views/IO/patrolReport/reportModal.vue

@@ -180,6 +180,7 @@
               fileLists.value.push({
                 url:i.url,
                 name:i.name,
+                ossId:i.ossId,
                 status:'done'
               })
             })
@@ -189,6 +190,7 @@
               inspectionPhotoLists.value.push({
                 url:i.url,
                 name:i.name,
+                ossId:i.ossId,
                 status:'done'
               })
             })
@@ -254,6 +256,7 @@
                 form.attachments.push({
                   url:i.response?.data.url || i.url,
                   name:i.response?.data.fileName ||i.name,
+                  ossId:i.response?.data.ossId || i.ossId
                 })
               }
             })
@@ -269,6 +272,7 @@
                 form.inspectionPhotos.push({
                   url:i.response?.data.url || i.url,
                   name:i.response?.data.fileName ||i.name,
+                  ossId:i.response?.data.ossId || i.ossId
                 })
               }
             })

src/views/IO/workOrder/delayAudit/auditModal.vue

@@ -118,6 +118,7 @@
             fileLists.value.push({
               url: i.url,
               name: i.name,
+              ossId:i.ossId,
               status: 'done',
             });
           });

src/views/IO/workOrder/delayAudit/data.ts

@@ -35,6 +35,14 @@ import { FormSchema } from '@/components/Form';
 //   },
 // ];
 export const formSchemas: FormSchema[] = [
+  {
+    label: '点位名称',
+    field: 'faultLocation',
+    component: 'Input',
+    componentProps: {
+      placeholder: '输入点位',
+    },
+  },
   {
     field: 'contractName',
     label: '合同名称',

src/views/IO/workOrder/delayAudit/detailDrawer.vue

@@ -78,9 +78,17 @@
           </a-row>
           <a-row :gutter="[16, 16]">
             <a-col :span="24">
-              <div
-                ><span class="titleLabel">故障图片：</span>
-                <a-upload v-model:file-list="fileLists" disabled> </a-upload>
+              <div>
+                <span class="titleLabel">故障图片：</span>
+                <div class="file-item" v-for="file in fileLists" :key="file.url">
+                  <span>{{ file.name }}</span>
+                  <a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
+                    下载
+                  </a-button>
+                  <a-button size="small" @click="preview(file)" style="margin-left: -8px">
+                    预览
+                  </a-button>
+                </div>
               </div>
             </a-col>
           </a-row>
@@ -124,6 +132,8 @@
   import { getInfo, queryProcess } from './api';
   import AMapLoader from '@amap/amap-jsapi-loader';
   import Icon from '@/components/Icon/Icon.vue';
+  import { ossDownload } from '@/api/system/oss';
+  import { downloadByData } from '@/utils/file/download';
   export default defineComponent({
     components: { Icon },
     setup(props, { emit }) {
@@ -216,6 +226,7 @@
             fileLists.value.push({
               url: i.url,
               name: i.name,
+              ossId: i.ossId,
               status: 'done',
             });
           });
@@ -227,7 +238,36 @@
           initMap(detail.longitude, detail.latitude, detail.faultLocation);
         }
       };
+      const handleDownload = async (record) => {
+        const data = await ossDownload(record.ossId);
+        downloadByData(data, record.name);
+      };
+        const preview = async (record) => {
+        const data = await ossDownload(record.ossId);
+        const objectURL = URL.createObjectURL(data);
+        const newWindow = window.open('', '_blank');
+        if (newWindow) {
+          // 创建 img 元素
+          const img = newWindow.document.createElement('img');
+          img.src = objectURL;
+          img.style.width = '100%';
+          img.style.height = 'auto';
+          img.style.display = 'block';
+
+          // 创建一个简单的页面结构
+          newWindow.document.body.style.margin = '0';
+          newWindow.document.body.style.backgroundColor = '#000';
+          newWindow.document.body.style.display = 'flex';
+          newWindow.document.body.style.justifyContent = 'center';
+          newWindow.document.body.style.alignItems = 'center';
+          newWindow.document.body.appendChild(img);
 
+          // 图片加载完成后释放 Object URL
+          img.onload = () => {
+            URL.revokeObjectURL(objectURL);
+          };
+        }
+      };
       // 关闭抽屉的方法
       const onClose = () => {
         visible.value = false;
@@ -272,6 +312,8 @@
         statusText,
         progress,
         fileLists,
+        handleDownload,
+        preview
       };
     },
   });

src/views/IO/workOrder/orderAudit/detailDrawer.vue

@@ -78,9 +78,17 @@
           </a-row>
           <a-row :gutter="[16, 16]">
             <a-col :span="24">
-              <div
-                ><span class="titleLabel">故障图片：</span>
-                <a-upload v-model:file-list="fileLists" disabled> </a-upload>
+              <div>
+                <span class="titleLabel">故障图片：</span>
+                <div class="file-item" v-for="file in fileLists" :key="file.url">
+                  <span>{{ file.name }}</span>
+                  <a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
+                    下载
+                  </a-button>
+                  <a-button size="small" @click="preview(file)" style="margin-left: -8px">
+                    预览
+                  </a-button>
+                </div>
               </div>
             </a-col>
           </a-row>
@@ -116,9 +124,17 @@
           </a-row>
           <a-row :gutter="[16, 16]">
             <a-col :span="24">
-              <div
-                ><span class="titleLabel">处理图片：</span>
-                <a-upload v-model:file-list="fileLists1" disabled> </a-upload>
+              <div>
+                <span class="titleLabel">处理图片：</span>
+                <div class="file-item" v-for="file in fileLists1" :key="file.url">
+                  <span>{{ file.name }}</span>
+                  <a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
+                    下载
+                  </a-button>
+                  <a-button size="small" @click="preview(file)" style="margin-left: -8px">
+                    预览
+                  </a-button>
+                </div>
               </div>
             </a-col>
           </a-row>
@@ -166,6 +182,8 @@
   import { getInfo, dealInfo, queryProcess, getOrderDelayHistory } from './api';
   import AMapLoader from '@amap/amap-jsapi-loader';
   import Icon from '@/components/Icon/Icon.vue';
+  import { ossDownload } from '@/api/system/oss';
+  import { downloadByData } from '@/utils/file/download';
   export default defineComponent({
     components: { Icon },
     setup(props, { emit }) {
@@ -321,6 +339,7 @@
             fileLists.value.push({
               url: i.url,
               name: i.name,
+              ossId: i.ossId,
               status: 'done',
             });
           });
@@ -340,7 +359,36 @@
         }
         initMap(detail.longitude, detail.latitude, detail.faultLocation);
       };
+      const handleDownload = async (record) => {
+        const data = await ossDownload(record.ossId);
+        downloadByData(data, record.name);
+      };
+              const preview = async (record) => {
+        const data = await ossDownload(record.ossId);
+        const objectURL = URL.createObjectURL(data);
+        const newWindow = window.open('', '_blank');
+        if (newWindow) {
+          // 创建 img 元素
+          const img = newWindow.document.createElement('img');
+          img.src = objectURL;
+          img.style.width = '100%';
+          img.style.height = 'auto';
+          img.style.display = 'block';
 
+          // 创建一个简单的页面结构
+          newWindow.document.body.style.margin = '0';
+          newWindow.document.body.style.backgroundColor = '#000';
+          newWindow.document.body.style.display = 'flex';
+          newWindow.document.body.style.justifyContent = 'center';
+          newWindow.document.body.style.alignItems = 'center';
+          newWindow.document.body.appendChild(img);
+
+          // 图片加载完成后释放 Object URL
+          img.onload = () => {
+            URL.revokeObjectURL(objectURL);
+          };
+        }
+      };
       // 关闭抽屉的方法
       const onClose = () => {
         visible.value = false;
@@ -392,6 +440,8 @@
         progress,
         fileLists,
         fileLists1,
+        handleDownload,
+        preview
       };
     },
   });

src/views/IO/workOrder/orderHandle/delayModal.vue

@@ -167,6 +167,7 @@
               form.attachments.push({
                 url: i.response?.data.url || i.url,
                 name: i.response?.data.fileName || i.name,
+                ossId:i.response?.data.ossId || i.ossId
               });
             }
           });

src/views/IO/workOrder/orderHandle/detailDrawer.vue

@@ -80,7 +80,22 @@
             <a-col :span="24">
               <div
                 ><span class="titleLabel">故障图片：</span>
-                <a-upload v-model:file-list="fileLists" disabled> </a-upload>
+                <!-- <a-upload v-model:file-list="fileLists" disabled> </a-upload> -->
+                <!-- <a-button
+                  type="primary"
+                  @click="handleDownload(fileLists[0])"
+                  v-if="fileLists.length > 0"
+                  >下载</a-button
+                > -->
+                <div class="file-item" v-for="file in fileLists" :key="file.url">
+                  <span>{{ file.name }}</span>
+                  <a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
+                    下载
+                  </a-button>
+                  <a-button size="small" @click="preview(file)" style="margin-left: -8px">
+                    预览
+                  </a-button>
+                </div>
               </div>
             </a-col>
           </a-row>
@@ -118,7 +133,15 @@
             <a-col :span="24">
               <div
                 ><span class="titleLabel">处理图片：</span>
-                <a-upload v-model:file-list="fileLists1" disabled> </a-upload>
+                <div class="file-item" v-for="file in fileLists1" :key="file.url">
+                  <span>{{ file.name }}</span>
+                  <a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
+                    下载
+                  </a-button>
+                  <a-button size="small" @click="preview(file)" style="margin-left: -8px">
+                    预览
+                  </a-button>
+                </div>
               </div>
             </a-col>
           </a-row>
@@ -166,6 +189,8 @@
   import { getInfo, getDealInfo, queryProcess, getOrderDelayHistory } from './handleApi';
   import AMapLoader from '@amap/amap-jsapi-loader';
   import Icon from '@/components/Icon/Icon.vue';
+  import { ossDownload } from '@/api/system/oss';
+  import { downloadByData } from '@/utils/file/download';
   export default defineComponent({
     components: { Icon },
     setup(props, { emit }) {
@@ -312,6 +337,7 @@
             fileLists.value.push({
               url: i.url,
               name: i.name,
+              ossId: i.ossId,
               status: 'done',
             });
           });
@@ -340,7 +366,36 @@
         }
         initMap(detail.longitude, detail.latitude, detail.faultLocation);
       };
+      const handleDownload = async (record) => {
+        const data = await ossDownload(record.ossId);
+        downloadByData(data, record.name);
+      };
+      const preview = async (record) => {
+        const data = await ossDownload(record.ossId);
+        const objectURL = URL.createObjectURL(data);
+        const newWindow = window.open('', '_blank');
+        if (newWindow) {
+          // 创建 img 元素
+          const img = newWindow.document.createElement('img');
+          img.src = objectURL;
+          img.style.width = '100%';
+          img.style.height = 'auto';
+          img.style.display = 'block';
+
+          // 创建一个简单的页面结构
+          newWindow.document.body.style.margin = '0';
+          newWindow.document.body.style.backgroundColor = '#000';
+          newWindow.document.body.style.display = 'flex';
+          newWindow.document.body.style.justifyContent = 'center';
+          newWindow.document.body.style.alignItems = 'center';
+          newWindow.document.body.appendChild(img);
 
+          // 图片加载完成后释放 Object URL
+          img.onload = () => {
+            URL.revokeObjectURL(objectURL);
+          };
+        }
+      };
       // 关闭抽屉的方法
       const onClose = () => {
         visible.value = false;
@@ -393,6 +448,8 @@
         progress,
         fileLists,
         fileLists1,
+        handleDownload,
+        preview 
       };
     },
   });

src/views/IO/workOrder/orderHandle/handleModal.vue

@@ -150,6 +150,7 @@
               form.attachments.push({
                 url: i.response?.data.url || i.url,
                 name: i.response?.data.fileName || i.name,
+                ossId:i.response?.data.ossId || i.ossId
               });
             }
           });

src/views/IO/workOrder/orderSearch/data.ts

@@ -103,9 +103,9 @@ export const formSchemas: FormSchema[] = [
   {
     field: 'faultLocation',
     label: '故障地点',
-    component: 'Select',
+    component: 'Input',
     componentProps: {
-      options: [],
+      placeholder: '输入编号',
     },
   },
   {

src/views/IO/workOrder/orderSearch/detailDrawer.vue

@@ -80,7 +80,15 @@
             <a-col :span="24">
               <div
                 ><span class="titleLabel">故障图片：</span>
-                <a-upload v-model:file-list="fileLists" disabled> </a-upload>
+                <div class="file-item" v-for="file in fileLists" :key="file.url">
+                  <span>{{ file.name }}</span>
+                  <a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
+                    下载
+                  </a-button>
+                  <a-button size="small" @click="preview(file)" style="margin-left: -8px">
+                    预览
+                  </a-button>
+                </div>
               </div>
             </a-col>
           </a-row>
@@ -118,7 +126,15 @@
             <a-col :span="24">
               <div
                 ><span class="titleLabel">处理图片：</span>
-                <a-upload v-model:file-list="fileLists1" disabled> </a-upload>
+                <div class="file-item" v-for="file in fileLists1" :key="file.url">
+                  <span>{{ file.name }}</span>
+                  <a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
+                    下载
+                  </a-button>
+                  <a-button size="small" @click="preview(file)" style="margin-left: -8px">
+                    预览
+                  </a-button>
+                </div>
               </div>
             </a-col>
           </a-row>
@@ -166,6 +182,8 @@
   import { getInfo, dealInfo, queryProcess, getOrderDelayHistory } from './api';
   import AMapLoader from '@amap/amap-jsapi-loader';
   import Icon from '@/components/Icon/Icon.vue';
+  import { ossDownload } from '@/api/system/oss';
+  import { downloadByData } from '@/utils/file/download';
   export default defineComponent({
     components: { Icon },
     setup(props, { emit }) {
@@ -312,6 +330,7 @@
             fileLists.value.push({
               url: i.url,
               name: i.name,
+              ossId: i.ossId,
               status: 'done',
             });
           });
@@ -340,7 +359,36 @@
         }
         initMap(detail.longitude, detail.latitude, detail.faultLocation);
       };
+      const handleDownload = async (record) => {
+        const data = await ossDownload(record.ossId);
+        downloadByData(data, record.name);
+      };
+              const preview = async (record) => {
+        const data = await ossDownload(record.ossId);
+        const objectURL = URL.createObjectURL(data);
+        const newWindow = window.open('', '_blank');
+        if (newWindow) {
+          // 创建 img 元素
+          const img = newWindow.document.createElement('img');
+          img.src = objectURL;
+          img.style.width = '100%';
+          img.style.height = 'auto';
+          img.style.display = 'block';
+
+          // 创建一个简单的页面结构
+          newWindow.document.body.style.margin = '0';
+          newWindow.document.body.style.backgroundColor = '#000';
+          newWindow.document.body.style.display = 'flex';
+          newWindow.document.body.style.justifyContent = 'center';
+          newWindow.document.body.style.alignItems = 'center';
+          newWindow.document.body.appendChild(img);
 
+          // 图片加载完成后释放 Object URL
+          img.onload = () => {
+            URL.revokeObjectURL(objectURL);
+          };
+        }
+      };
       // 关闭抽屉的方法
       const onClose = () => {
         visible.value = false;
@@ -393,6 +441,8 @@
         progress,
         fileLists,
         fileLists1,
+        handleDownload,
+        preview
       };
     },
   });

src/views/IO/workOrder/orderSearch/faultModal.vue

@@ -360,6 +360,7 @@
               form.attachments.push({
                 url: i.response?.data.url || i.url,
                 name: i.response?.data.fileName || i.name,
+                ossId:i.response?.data.ossId || i.ossId
               });
             }
           });

src/views/IO/workOrder/orderSearch/index.vue

@@ -83,20 +83,20 @@
     });
     formSchemas[4].componentProps.options = faultSubcategoryOptions.value;
   };
-  const faultLocationOptions = ref([]);
-  const getFaultLocationOptions = async () => {
-    const res = await queryPointNames();
-    faultLocationOptions.value = res;
-    faultLocationOptions.value.forEach((i: any) => {
-      i.value = i.pointName;
-      i.label = i.pointName;
-    });
-    formSchemas[5].componentProps.options = faultLocationOptions.value;
-  };
+  // const faultLocationOptions = ref([]);
+  // const getFaultLocationOptions = async () => {
+  //   const res = await queryPointNames();
+  //   faultLocationOptions.value = res;
+  //   faultLocationOptions.value.forEach((i: any) => {
+  //     i.value = i.pointName;
+  //     i.label = i.pointName;
+  //   });
+  //   formSchemas[5].componentProps.options = faultLocationOptions.value;
+  // };
   const getOptions = () => {
     getProjectOptions();
     getFaultSubcategoryOptions();
-    getFaultLocationOptions();
+    // getFaultLocationOptions();
   };
   getOptions();
   onActivated(() => {

src/views/IO/workOrder/orderSend/detailDrawer.vue

@@ -78,9 +78,17 @@
           </a-row>
           <a-row :gutter="[16, 16]">
             <a-col :span="24">
-              <div
-                ><span class="titleLabel">故障图片：</span>
-                <a-upload v-model:file-list="fileLists" disabled> </a-upload>
+              <div>
+                <span class="titleLabel">故障图片：</span>
+                <div class="file-item" v-for="file in fileLists" :key="file.url">
+                  <span>{{ file.name }}</span>
+                  <a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
+                    下载
+                  </a-button>
+                  <a-button size="small" @click="preview(file)" style="margin-left: -8px">
+                    预览
+                  </a-button>
+                </div>
               </div>
             </a-col>
           </a-row>
@@ -118,7 +126,15 @@
             <a-col :span="24">
               <div
                 ><span class="titleLabel">处理图片：</span>
-                <a-upload v-model:file-list="fileLists1" disabled> </a-upload>
+                <div class="file-item" v-for="file in fileLists1" :key="file.url">
+                  <span>{{ file.name }}</span>
+                  <a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
+                    下载
+                  </a-button>
+                  <a-button size="small" @click="preview(file)" style="margin-left: -8px">
+                    预览
+                  </a-button>
+                </div>
               </div>
             </a-col>
           </a-row>
@@ -166,6 +182,8 @@
   import { getInfo, dealInfo, queryProcess, getOrderDelayHistory } from './api';
   import AMapLoader from '@amap/amap-jsapi-loader';
   import Icon from '@/components/Icon/Icon.vue';
+  import { ossDownload } from '@/api/system/oss';
+  import { downloadByData } from '@/utils/file/download';
   export default defineComponent({
     components: { Icon },
     setup(props, { emit }) {
@@ -321,6 +339,7 @@
             fileLists.value.push({
               url: i.url,
               name: i.name,
+              ossId: i.ossId,
               status: 'done',
             });
           });
@@ -340,7 +359,36 @@
         }
         initMap(detail.longitude, detail.latitude, detail.faultLocation);
       };
+      const handleDownload = async (record) => {
+        const data = await ossDownload(record.ossId);
+        downloadByData(data, record.name);
+      };
+              const preview = async (record) => {
+        const data = await ossDownload(record.ossId);
+        const objectURL = URL.createObjectURL(data);
+        const newWindow = window.open('', '_blank');
+        if (newWindow) {
+          // 创建 img 元素
+          const img = newWindow.document.createElement('img');
+          img.src = objectURL;
+          img.style.width = '100%';
+          img.style.height = 'auto';
+          img.style.display = 'block';
+
+          // 创建一个简单的页面结构
+          newWindow.document.body.style.margin = '0';
+          newWindow.document.body.style.backgroundColor = '#000';
+          newWindow.document.body.style.display = 'flex';
+          newWindow.document.body.style.justifyContent = 'center';
+          newWindow.document.body.style.alignItems = 'center';
+          newWindow.document.body.appendChild(img);
 
+          // 图片加载完成后释放 Object URL
+          img.onload = () => {
+            URL.revokeObjectURL(objectURL);
+          };
+        }
+      };
       // 关闭抽屉的方法
       const onClose = () => {
         visible.value = false;
@@ -393,6 +441,8 @@
         progress,
         fileLists,
         fileLists1,
+        handleDownload,
+        preview
       };
     },
   });

src/views/IO/workOrder/orderSend/faultModal.vue

@@ -360,6 +360,7 @@
               form.attachments.push({
                 url: i.response?.data.url || i.url,
                 name: i.response?.data.fileName || i.name,
+                ossId:i.response?.data.ossId || i.ossId
               });
             }
           });

src/views/document/addModal.vue

@@ -91,6 +91,7 @@
               fileLists.value.push({
                 url:i.url,
                 name:i.name,
+                ossId:i.ossId,
                 status:'done'
               })
             })
@@ -141,11 +142,13 @@
       const handleChange = (info) => {
         if (info.fileList.length > 0) {
           form.attachments = [];
+          console.log(info)
           info.fileList.forEach((i) => {
             if (i.status == 'done') {
               form.attachments.push({
                 url: i.response?.data.url || i.url,
                 name: i.response?.data.fileName || i.name,
+                ossId:i.response?.data.ossId || i.ossId
               });
             }
           });

src/views/notice/addModal.vue

@@ -130,6 +130,7 @@
               fileLists.value.push({
                 url:i.url,
                 name:i.name,
+                ossId:i.ossId,
                 status:'done'
               })
             })
@@ -235,6 +236,7 @@
                 form.attachments.push({
                   url:i.response?.data.url || i.url,
                   name:i.response?.data.fileName ||i.name,
+                  ossId:i.response?.data.ossId || i.ossId
                 })
               }
             })

src/views/project/contractManage/addModal.vue

@@ -241,6 +241,7 @@
               fileLists.value.push({
                 url: i.url,
                 name: i.name,
+                ossId:i.ossId,
                 status: 'done',
               });
             });
@@ -314,6 +315,7 @@
               form.attachments.push({
                 url: i.response?.data.url || i.url,
                 name: i.response?.data.fileName || i.name,
+                ossId:i.response?.data.ossId || i.ossId
               });
             }
           });

src/views/project/projectManage/addModal.vue

@@ -156,6 +156,7 @@
               fileLists.value.push({
                 url: i.url,
                 name: i.name,
+                ossId:i.ossId,
                 status: 'done',
               });
             });
@@ -223,6 +224,7 @@
               form.attachments.push({
                 url: i.response?.data.url || i.url,
                 name: i.response?.data.fileName || i.name,
+                ossId:i.response?.data.ossId || i.ossId
               });
             }
           });

src/views/property/point/pointModal.vue

@@ -306,6 +306,7 @@
                 form.attachments.push({
                   url:i.response?.data.url || i.url,
                   name:i.response?.data.fileName ||i.name,
+                  ossId:i.response?.data.ossId || i.ossId
                 })
               }
             })