ci-plus 1.5.2 → 1.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ci-plus",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "ci组件库",
   "main": "./index.ts",
   "scripts": {
@@ -12,7 +12,7 @@
     "vue",
     "element-plus",
     "ui组件库二次封装",
-    "标识卡模板中将下道工序改为显示名称"
+    "utils中的附件下载方法新增一个downFileFetchV2函数"
   ],
   "type": "module",
   "author": {

package/src/utils/ajaxBox.ts

@@ -62,6 +62,14 @@ const downFileFn = function (blob: Blob | BlobPart, fileName: string) {
 type Obj = {
   [key: string]: any
 }
+
+interface Config {
+  method?: string,  // 请求方法，默认为 GET | POST
+  headers?: Object, // 请求头
+  cbpercentage?: Function  // 获取下载进度的回调函数
+  fileName?: string, // 下载后的文件名
+  chunkSize?: number, // 每次下载的块大小，默认为 10KB
+}
 const ajaxBox = {
   downFile: function (blob: Blob | BlobPart, fileName: string) {
     downFileFn(blob, fileName);
@@ -80,18 +88,28 @@ const ajaxBox = {
    * 如果解析失败，则直接以原始格式下载blob对象。
    */
 
-
-  downFileFetch: function (fillAddress: string, fileName: string, method: string, headers: Obj, params: Obj, cbpercentage: Function) {
+  downFileFetch: function (fillAddress: string, fileName: string, method?: string, headers?: Obj, params?: Obj, cbpercentage?: Function) {
     let options = {
       method: method || 'GET',
     }
+    let _headers
+    if (options.method === 'GET' || method === 'get') {
+      _headers = {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      }
+
+    } else if (options.method === 'POST' || method === 'post') {
+      _headers = {
+        'Content-Type': 'application/json', //设置为json格式
+      }
+    }
     // 判断请求是否为get请求，若是get请求，则将params参数拼接在url后面
     if (method === 'GET') {
       const queryString = new URLSearchParams(params).toString()
       fillAddress = fillAddress + '?' + queryString
     }
     if (headers) {
-      options['headers'] = headers
+      options['headers'] = headers || _headers
     }
     if ((method === 'post' || method === 'POST') && params) {
       options['body'] = JSON.stringify(params)
@@ -151,10 +169,111 @@ const ajaxBox = {
           }
         }
 
+        readBlobInChunks()
+      })
+  },
+
+  // 下载文件:2.0版本
+  /**
+   * 下载文件函数
+   * @param url string     必传 表示服务端接口url地址
+   * @param params  Obj    可选 请求参数
+   * @param config Config  可选 请求配置
+   * Config Config {
+                      method?: string,  // 请求方法，默认为 GET | POST
+                      headers?: Object, // 请求头，默认值根据method方法判断
+                      cbpercentage?: Function  // 获取下载进度的回调函数
+                      fileName?: string,  // 下载后的文件名默认：'附件'
+                      chunkSize?: number, // 每次下载的块大小，默认为 10KB
+                    }
+   * 将给定的blob对象转换为文件，并提供一个下载链接以供用户下载。
+   * 如果blob对象是JSON格式，则尝试解析为JavaScript对象，并显示相应的错误消息。
+   * 如果解析失败，则直接以原始格式下载blob对象。
+   */
+
+  downFileFetchV2: function (url: string, params?: Obj, config?: Config) {
+    let options = {
+      method: config?.method || 'GET',
+    }
+    let _headers
+    let _fileName = config?.fileName || '附件'
+    if (options.method === 'GET' || options.method === 'get') {
+      _headers = {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      }
+
+    } else if (options.method === 'POST' || options.method === 'post') {
+      _headers = {
+        'Content-Type': 'application/json', // 设置为json格式
+      }
+    }
+    // 数组请求头: 优先使用传递的请求头，如果没有传递，则使用默认的请求头
+    options['headers'] = config?.headers || _headers
+
+    // 判断请求是否为get请求，若是get请求，则将params参数拼接在url后面
+    if (options.method === 'GET') {
+      const queryString = new URLSearchParams(params).toString()
+      url = url + '?' + queryString
+    }
+    // 处理post请求的参数
+    if ((options.method === 'post' || options.method === 'POST') && params) {
+      options['body'] = JSON.stringify(params)
+    }
+
+    // 定义每次读取的数据块大小（字节）
+    let chunkSize = config?.chunkSize || 10240 // 例如，10KB
+
+    // 初始化已下载的字节数
+    let downloaded = 0
+    // 初始化 Blob 切片起始点
+    let start = 0
+
+    fetch(url, options)
+      .then((res) => {
+        // console.log('resssssss: ', res)
+        if (!res.ok) {
+          throw new Error('Network response was not ok')
+        }
+        return res.blob()
+      })
+      .then((blob) => {
+        // console.log('blob: ', blob)
+        const reader = new FileReader() // 创建 FileReader 对象
+        const readBlobInChunks = () => {
+          // 创建一个 Blob 切片，大小为 chunkSize
+          const chunkBlob = blob.slice(start, start + chunkSize)
+          start += chunkSize // 更新起始点
+          // 读取 Blob 切片
+          reader.readAsArrayBuffer(chunkBlob)
+          reader.onload = () => {
+            // 累加已下载的字节数
+            // downloaded += reader.result.byteLength
+            if (typeof reader.result === 'string' || reader.result === null) {
+              console.log('reader.result不为 ArrayBuffer');
+              // 处理字符串的情况，可能需要转换为 ArrayBuffer 或者其他处理逻辑
+            } else {
+              downloaded += reader.result.byteLength;
+            }
+            // 计算下载进度百分比
+            const total = blob.size
+            const progress = ((downloaded / total) * 100).toFixed(2)
+            config?.cbpercentage && config?.cbpercentage(progress) // 如果传递了获取下载进度的回调函数，则调用回调函数传递进度百分比
+            console.log(`下载进度: ${progress}%`)
+            // 如果还有数据未读取，则继续读取
+            if (start < total) {
+              readBlobInChunks()
+            } else {
+              console.log('下载完成.')
+              // 处理下载完成的数据，例如将其保存或显示
+              downFileFn(blob, _fileName)
+            }
+          }
+        }
         readBlobInChunks()
       })
   }
 
+
   /*
     sendJSONP: function (url, callbackName, callback) {
       const script = document.createElement('script');
@@ -182,10 +301,9 @@ export default ajaxBox;
 
 
 /**
- * 使用下载示例
+ * 使用下载示例 get
 const exportFile = () => {
   let rowData = InventoryTableRef.value!.getSelectionRows()
-
   const url = storageModule + 'storage_standing_book_batch_export_get/'
   const headers = {
     'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
@@ -204,5 +322,26 @@ const exportFile = () => {
     headers,
     params,
   )
+}
+使用下载示例 post
+const exportFile = () => {
+  let rowData = WeighingTableRef.value!.getSelectionRows()
+  const url = storageModule + 'weighing_record_batch_export_post/'
+  const headers = {
+    'Content-Type': 'application/json', //设置为json格式
+  }
+  const params = {
+    ids: rowData.map((v: { id: any }) => v.id), // 直接数组形式
+    state: 1,
+    org_id: UserData.orgId,
+  }
+  console.log('params', params)
+  CiPlus.Fn.ajaxBox.downFileFetch(
+    url,
+    '称重记录数据(批次).xlsx',
+    'POST',
+    headers,
+    params,
+  )
 }
  */