图片预览下载

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,15 +78,17 @@
           </a-row>
           <a-row :gutter="[16, 16]">
             <a-col :span="24">
-              <div
+              <div>
-                ><span class="titleLabel">故障图片：</span>
+                <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">
-                <a-button
+                  <span>{{ file.name }}</span>
-                  type="primary"
+                  <a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
-                  @click="handleDownload(fileLists[0])"
+                    下载
-                  v-if="fileLists.length > 0"
+                  </a-button>
-                  >下载</a-button
+                  <a-button size="small" @click="preview(file)" style="margin-left: -8px">
-                >
+                    预览
+                  </a-button>
+                </div>
               </div>
             </a-col>
           </a-row>
@@ -239,6 +241,32 @@
       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 = () => {
@@ -284,7 +312,8 @@
         statusText,
         progress,
         fileLists,
-        handleDownload
+        handleDownload,
+        preview
       };
     },
   });

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

@@ -78,15 +78,17 @@
           </a-row>
           <a-row :gutter="[16, 16]">
             <a-col :span="24">
-              <div
+              <div>
-                ><span class="titleLabel">故障图片：</span>
+                <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">
-                <a-button
+                  <span>{{ file.name }}</span>
-                  type="primary"
+                  <a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
-                  @click="handleDownload(fileLists[0])"
+                    下载
-                  v-if="fileLists.length > 0"
+                  </a-button>
-                  >下载</a-button
+                  <a-button size="small" @click="preview(file)" style="margin-left: -8px">
-                >
+                    预览
+                  </a-button>
+                </div>
               </div>
             </a-col>
           </a-row>
@@ -122,15 +124,17 @@
           </a-row>
           <a-row :gutter="[16, 16]">
             <a-col :span="24">
-              <div
+              <div>
-                ><span class="titleLabel">处理图片：</span>
+                <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">
-                <a-button
+                  <span>{{ file.name }}</span>
-                  type="primary"
+                  <a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
-                  @click="handleDownload(fileLists1[0])"
+                    下载
-                  v-if="fileLists1.length > 0"
+                  </a-button>
-                  >下载</a-button
+                  <a-button size="small" @click="preview(file)" style="margin-left: -8px">
-                >
+                    预览
+                  </a-button>
+                </div>
               </div>
             </a-col>
           </a-row>
@@ -358,6 +362,32 @@
       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 = () => {
@@ -410,7 +440,8 @@
         progress,
         fileLists,
         fileLists1,
-        handleDownload
+        handleDownload,
+        preview
       };
     },
   });

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

@@ -80,13 +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
+                <!-- <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>
@@ -124,13 +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">
-                <a-button
+                  <span>{{ file.name }}</span>
-                  type="primary"
+                  <a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
-                  @click="handleDownload(fileLists1[0])"
+                    下载
-                  v-if="fileLists1.length > 0"
+                  </a-button>
-                  >下载</a-button
+                  <a-button size="small" @click="preview(file)" style="margin-left: -8px">
-                >
+                    预览
+                  </a-button>
+                </div>
               </div>
             </a-col>
           </a-row>
@@ -359,6 +370,32 @@
         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;
@@ -412,6 +449,7 @@
         fileLists,
         fileLists1,
         handleDownload,
+        preview 
       };
     },
   });

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,13 +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">
-                <a-button
+                  <span>{{ file.name }}</span>
-                  type="primary"
+                  <a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
-                  @click="handleDownload(fileLists[0])"
+                    下载
-                  v-if="fileLists.length > 0"
+                  </a-button>
-                  >下载</a-button
+                  <a-button size="small" @click="preview(file)" style="margin-left: -8px">
-                >
+                    预览
+                  </a-button>
+                </div>
               </div>
             </a-col>
           </a-row>
@@ -124,13 +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">
-                <a-button
+                  <span>{{ file.name }}</span>
-                  type="primary"
+                  <a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
-                  @click="handleDownload(fileLists1[0])"
+                    下载
-                  v-if="fileLists1.length > 0"
+                  </a-button>
-                  >下载</a-button
+                  <a-button size="small" @click="preview(file)" style="margin-left: -8px">
-                >
+                    预览
+                  </a-button>
+                </div>
               </div>
             </a-col>
           </a-row>
@@ -358,6 +362,32 @@
       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 = () => {
@@ -411,7 +441,8 @@
         progress,
         fileLists,
         fileLists1,
-        handleDownload
+        handleDownload,
+        preview
       };
     },
   });

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

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

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

@@ -78,15 +78,17 @@
           </a-row>
           <a-row :gutter="[16, 16]">
             <a-col :span="24">
-              <div
+              <div>
-                ><span class="titleLabel">故障图片：</span>
+                <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">
-                <a-button
+                  <span>{{ file.name }}</span>
-                  type="primary"
+                  <a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
-                  @click="handleDownload(fileLists[0])"
+                    下载
-                  v-if="fileLists.length > 0"
+                  </a-button>
-                  >下载</a-button
+                  <a-button size="small" @click="preview(file)" style="margin-left: -8px">
-                >
+                    预览
+                  </a-button>
+                </div>
               </div>
             </a-col>
           </a-row>
@@ -124,13 +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">
-                <a-button
+                  <span>{{ file.name }}</span>
-                  type="primary"
+                  <a-button size="small" @click="handleDownload(file)" style="margin-left: 8px">
-                  @click="handleDownload(fileLists1[0])"
+                    下载
-                  v-if="fileLists1.length > 0"
+                  </a-button>
-                  >下载</a-button
+                  <a-button size="small" @click="preview(file)" style="margin-left: -8px">
-                >
+                    预览
+                  </a-button>
+                </div>
               </div>
             </a-col>
           </a-row>
@@ -358,6 +362,32 @@
       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 = () => {
@@ -411,7 +441,8 @@
         progress,
         fileLists,
         fileLists1,
-        handleDownload
+        handleDownload,
+        preview
       };
     },
   });