feat:车辆二维码、电池二维码、头盔二维码批量下载 (完成)

ebike-operate/src/utils/tools.js

@@ -78,3 +78,94 @@ export function isNullOrEmpty(value){
 	else
 		return false;
 }
+
+
+
+/**
+ * 批量下载图片（兼容IE10+及现代浏览器）
+ * @param {Array} imgList - 图片数据数组，支持base64或URL
+ */
+export function batchDownloadQRcodes(imgList) {
+	 // 检查是否为 IE 浏览器，通过判断是否存在 msSaveBlob 方法
+	 const isIE = window.navigator.msSaveBlob!== undefined;
+
+	 // 下载单张图片的函数
+	 const downloadSingleImage = (imgObj) => {
+		 const { base64QrCode, code } = imgObj;
+		 // 拼接文件名，使用 bikeCode 作为主要标识
+		 const fileName = `${code}.png`;
+ 
+		 if (base64QrCode.startsWith('data:')) {
+			 // 处理 Base64 格式的图片数据
+			 const [mime, data] = base64QrCode.split(';base64,');
+			 const mimeType = mime.replace('data:', '');
+			 const byteCharacters = atob(data);
+			 const byteNumbers = new Array(byteCharacters.length);
+ 
+			 for (let i = 0; i < byteCharacters.length; i++) {
+				 byteNumbers[i] = byteCharacters.charCodeAt(i);
+			 }
+ 
+			 const byteArray = new Uint8Array(byteNumbers);
+			 const blob = new Blob([byteArray], { type: mimeType });
+ 
+			 if (isIE) {
+				 // IE 浏览器专用的下载方法
+				 window.navigator.msSaveBlob(blob, fileName);
+			 } else {
+				 // 现代浏览器的下载方式，创建 blob URL 并触发下载
+				 const url = URL.createObjectURL(blob);
+				 triggerDownload(url, fileName);
+				 URL.revokeObjectURL(url);
+			 }
+		 } else {
+			 // 处理图片为普通 URL 格式的情况（跨域可能受限，需服务端配合设置跨域头）
+			 if (isIE) {
+				 // IE 下使用 XMLHttpRequest 下载
+				 const xhr = new XMLHttpRequest();
+				 xhr.open('GET', base64QrCode, true);
+				 xhr.responseType = 'blob';
+ 
+				 xhr.onload = function () {
+					 if (xhr.status === 200) {
+						 window.navigator.msSaveBlob(xhr.response, fileName);
+					 }
+				 };
+ 
+				 xhr.send();
+			 } else {
+				 // 现代浏览器使用 fetch 下载
+				 fetch(base64QrCode)
+					.then(res => res.blob())
+					.then(blob => {
+						 const url = URL.createObjectURL(blob);
+						 triggerDownload(url, fileName);
+						 URL.revokeObjectURL(url);
+					 })
+					.catch(err => console.error('下载失败:', err));
+			 }
+		 }
+	 };
+ 
+	 // 创建下载链接并触发点击的函数
+	 const triggerDownload = (url, fileName) => {
+		 const link = document.createElement('a');
+		 link.href = url;
+		 link.download = fileName;
+		 document.body.appendChild(link);
+		 link.click();
+		 document.body.removeChild(link);
+	 };
+ 
+	 // 按顺序下载图片，避免浏览器并发限制
+	 const downloadNext = (index) => {
+		 if (index >= imgList.length) return;
+ 
+		 downloadSingleImage(imgList[index], index);
+ 
+		 // 间隔 500ms 下载下一个，可根据实际情况调整间隔时间
+		 setTimeout(() => downloadNext(index + 1), 500);
+	 };
+ 
+	 downloadNext(0);
+}

ebike-operate/src/views/Layout/index.vue

@@ -107,9 +107,11 @@
           </a-dropdown>
         </div>
       </a-layout-header>
-      <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
+      <a-layout-content class="custom-layout-content">
         <!-- 二级路由出口(home等等，通常放在main主区域) -->
+         <div class="content-wrapper">
             <router-view />
+         </div>
       </a-layout-content>
     </a-layout>
   </a-layout>
@@ -273,4 +275,16 @@ const onOperationClick = (e) => {
     opacity: 1;
   }
 }
+
+.custom-layout-content{
+  height: calc(100vh - 64px); 
+  overflow: hidden; 
+}
+
+.custom-layout-content .content-wrapper {
+  height: 100%;
+  overflow-y: auto;
+  padding: 24px;
+  box-sizing: border-box;
+}
 </style>

ebike-operate/src/views/Produce/BatteryQRCode/index.vue

@@ -104,6 +104,17 @@
           </template>
           <span>绑定</span>
         </a-button>
+         <!-- 批量下载 -->
+         <a-button
+            type="primary"
+            class="ele-btn-icon"
+            @click="batchDownload"
+          >
+          <template #icon>
+            <DownloadOutlined />
+          </template>
+            <span>批量下载</span>
+          </a-button>
       </a-space>
       <!-- 表格 -->
       <a-table
@@ -157,12 +168,12 @@
 </template>
   
   <script setup>
-import { ref, onMounted, reactive, nextTick } from 'vue'
+import { ref, onMounted, reactive } from 'vue'
 import { callOperate } from '@/apis/call.js'
 import { message } from 'ant-design-vue'
 import config from '@/utils/config.js'
 import { getCache } from '@/utils/authority'
-import { dataFormat } from '@/utils/tools'
+import { dataFormat, batchDownloadQRcodes } from '@/utils/tools'
 import {
   SettingOutlined
 } from '@ant-design/icons-vue'
@@ -172,6 +183,7 @@ const dataSource = ref([])
 const data = ref([])
 const selectkeys = ref([])
 const selectAll = ref(false)
+const batchDownloadList = ref([])
 // 查询相关
 const queryform = ref({
   batteryCode: '',
@@ -395,9 +407,11 @@ const handleDown = async (record) => {
 
 const handleSelect = (record) => {
   if (selectkeys.value.includes(record.batteryCode)) {
-    selectkeys.value = selectkeys.value.filter((item) => item !== record.batteryCode)
+    selectkeys.value = selectkeys.value.filter((item) => item !== record.batteryCode);
+    batchDownloadList.value = batchDownloadList.value.filter((item) => item.bikeCode !== record.bikeCode)
   } else {
     selectkeys.value.push(record.batteryCode)
+    batchDownloadList.value.push(record)
   }
   if (selectkeys.value.length === dataSource.value.length) {
     selectAll.value = true
@@ -409,11 +423,29 @@ const handleSelect = (record) => {
 const handleAllSelect = () => {
   if (!selectAll.value) {
     selectAll.value = true
-    selectkeys.value = dataSource.value.map((item) => item.batteryCode)
+    selectkeys.value = dataSource.value.map((item) => item.batteryCode);
+    batchDownloadList.value = dataSource.value.map((item) => item)
   } else {
     selectAll.value = false
-    selectkeys.value = []
+    selectkeys.value = [];
+    batchDownloadList.value = []
   }
 }
-  </script>
+
+const batchDownload = () => {
+  if( batchDownloadList.value.length === 0) {
+    message.error('请选择要下载的二维码')
+    return
+  }
+
+  const urls = batchDownloadList.value.map(item => {
+    return {
+      base64QrCode:item.base64QrCode,
+      code:item.batteryCode
+    }
+  });
+  batchDownloadQRcodes(urls)
+}
+
+</script>
   

ebike-operate/src/views/Produce/BikeQRCode/index.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
    <a-card :bordered="false">
       <a-form
         :label-col="{ xl: 7, lg: 5, md: 7, sm: 4 }"
@@ -104,6 +103,17 @@
           </template>
           <span>绑定</span>
         </a-button>
+        <!-- 批量下载 -->
+          <a-button
+            type="primary"
+            class="ele-btn-icon"
+            @click="batchDownload"
+          >
+          <template #icon>
+            <DownloadOutlined />
+          </template>
+            <span>批量下载</span>
+          </a-button>
       </a-space>
       <!-- 表格 -->
       <a-table
@@ -153,19 +163,19 @@
         </template>
       </a-table>
    </a-card>
-  </div>
 </template>
   
   <script setup>
-import { ref, onMounted, reactive, nextTick } from 'vue'
+import { ref, onMounted, reactive } from 'vue'
 import { callOperate } from '@/apis/call.js'
 import { message } from 'ant-design-vue'
 import config from '@/utils/config.js'
 import { getCache } from '@/utils/authority'
-import { dataFormat } from '@/utils/tools'
+import { dataFormat, batchDownloadQRcodes } from '@/utils/tools'
 import {
   SettingOutlined,
-  PlusOutlined
+  PlusOutlined,
+  DownloadOutlined
 } from '@ant-design/icons-vue'
 import { QRCode } from 'ant-design-vue'
 
@@ -174,6 +184,7 @@ const { H } = QRCode
 const dataSource = ref([])
 const data = ref([])
 const selectkeys = ref([])
+const batchDownloadList = ref([])
 const selectAll = ref(false)
 // 查询相关
 const queryform = ref({
@@ -400,8 +411,11 @@ const handleDown = async (record) => {
 const handleSelect = (record) => {
   if (selectkeys.value.includes(record.bikeCode)) {
     selectkeys.value = selectkeys.value.filter((item) => item !== record.bikeCode)
+    batchDownloadList.value = batchDownloadList.value.filter((item) => item.bikeCode !== record.bikeCode)
+    
   } else {
     selectkeys.value.push(record.bikeCode)
+    batchDownloadList.value.push(record)
   }
   if (selectkeys.value.length === dataSource.value.length) {
     selectAll.value = true
@@ -414,10 +428,28 @@ const handleAllSelect = () => {
   if (!selectAll.value) {
     selectAll.value = true
     selectkeys.value = dataSource.value.map((item) => item.bikeCode)
+    batchDownloadList.value = dataSource.value.map((item) => item)
   } else {
     selectAll.value = false
     selectkeys.value = []
+    batchDownloadList.value = []
   }  
 }
-  </script>
+
+const batchDownload = () => {
+  if( batchDownloadList.value.length === 0) {
+    message.error('请选择要下载的二维码')
+    return
+  }
+
+  const urls = batchDownloadList.value.map(item => {
+    return {
+      base64QrCode:item.base64QrCode,
+      code:item.bikeCode
+    }
+  });
+  batchDownloadQRcodes(urls)
+}
+
+</script>
   

ebike-operate/src/views/Produce/HelmetQRCode/index.vue

@@ -104,6 +104,17 @@
           </template>
           <span>绑定</span>
         </a-button>
+         <!-- 批量下载 -->
+         <a-button
+            type="primary"
+            class="ele-btn-icon"
+            @click="batchDownload"
+          >
+          <template #icon>
+            <DownloadOutlined />
+          </template>
+            <span>批量下载</span>
+          </a-button>
       </a-space>
       <!-- 表格 -->
       <a-table
@@ -157,12 +168,12 @@
 </template>
   
   <script setup>
-import { ref, onMounted, reactive, nextTick } from 'vue'
+import { ref, onMounted, reactive } from 'vue'
 import { callOperate } from '@/apis/call.js'
 import { message } from 'ant-design-vue'
 import config from '@/utils/config.js'
 import { getCache } from '@/utils/authority'
-import { dataFormat } from '@/utils/tools'
+import { dataFormat,batchDownloadQRcodes } from '@/utils/tools'
 import {
   SettingOutlined
 } from '@ant-design/icons-vue'
@@ -172,6 +183,7 @@ const dataSource = ref([])
 const data = ref([])
 const selectkeys = ref([])
 const selectAll = ref(false)
+const batchDownloadList = ref([])
 // 查询相关
 const queryform = ref({
   helmetCode: '',
@@ -395,9 +407,11 @@ const handleDown = async (record) => {
 
 const handleSelect = (record) => {
   if (selectkeys.value.includes(record.helmetCode)) {
-    selectkeys.value = selectkeys.value.filter((item) => item !== record.helmetCode)
+    selectkeys.value = selectkeys.value.filter((item) => item !== record.helmetCode);
+    batchDownloadList.value = batchDownloadList.value.filter((item) => item.bikeCode !== record.bikeCode)
   } else {
-    selectkeys.value.push(record.helmetCode)
+    selectkeys.value.push(record.helmetCode);
+    batchDownloadList.value.push(record)
   }
   if (selectkeys.value.length === dataSource.value.length) {
     selectAll.value = true
@@ -410,10 +424,28 @@ const handleAllSelect = () => {
   if (!selectAll.value) {
     selectAll.value = true
     selectkeys.value = dataSource.value.map((item) => item.helmetCode)
+    batchDownloadList.value = dataSource.value.map((item) => item)
   } else {
     selectAll.value = false
     selectkeys.value = []
+    batchDownloadList.value = []
   }
 }
-  </script>
+
+const batchDownload = () => {
+  if( batchDownloadList.value.length === 0) {
+    message.error('请选择要下载的二维码')
+    return
+  }
+
+  const urls = batchDownloadList.value.map(item => {
+    return {
+      base64QrCode:item.base64QrCode,
+      code:item.helmetCode
+    }
+  });
+  batchDownloadQRcodes(urls)
+}
+
+</script>