ci-plus 1.5.2 → 1.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ci-plus",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "description": "ci组件库",
   "main": "./index.ts",
   "scripts": {
@@ -12,7 +12,7 @@
     "vue",
     "element-plus",
     "ui组件库二次封装",
-    "标识卡模板中将下道工序改为显示名称"
+    "更新附件上传组件uploadV2.vue"
   ],
   "type": "module",
   "author": {

package/src/fileRelated/uploadV2.vue

@@ -1,5 +1,9 @@
 <template>
-  <el-popover placement="bottom" :width="300">
+  <el-popover
+    placement="bottom"
+    :width="300"
+    :trigger="props.otherConfig?.trigger || 'hover'"
+  >
     <el-upload
       ref="upload"
       class="upload-demo"
@@ -16,7 +20,14 @@
       v-model:file-list="fileList"
     >
       <template #trigger>
-        <el-button size="small" type="primary" style="width: 100px" plain> 选择文件 </el-button>
+        <el-button
+          size="small"
+          type="primary"
+          style="width: 100%"
+          plain
+        >
+          选择文件
+        </el-button>
       </template>
       <el-button
         size="small"
@@ -28,14 +39,32 @@
       </el-button>
     </el-upload>
 
-    <div style="width: 100%; display: flex" v-if="url">
-      <el-button size="small" @click="visible = false" style="flex: 1"> 取消 </el-button>
-      <el-button size="small" type="primary" @click="submitUpload" style="flex: 2">
+    <div
+      style="width: 100%; display: flex"
+      v-if="url"
+    >
+      <el-button
+        size="small"
+        @click="visible = false"
+        style="flex: 1"
+      >
+        取消
+      </el-button>
+      <el-button
+        size="small"
+        type="primary"
+        @click="submitUpload"
+        style="flex: 2"
+      >
         上传
       </el-button>
     </div>
     <template #reference>
-      <el-button type="success" plain @click="visible = true" size="small">
+      <el-button
+        type="success"
+        @click="visible = true"
+        :size="props.otherConfig?.size || 'small'"
+      >
         {{ props.title || '附件上传' }}
       </el-button>
     </template>
@@ -72,7 +101,7 @@ const fileArr = (url: string, pathArr: string[]) => {
         objArr.push({
           name: item.name,
           oldName: item.oldName,
-          url: url + item.oldName
+          url: url + item.oldName,
         })
       })
       return objArr
@@ -87,35 +116,53 @@ import {
   ElMessage,
   ElLoading,
   ElButton,
-  ElPopover
+  ElPopover,
+  ElUpload,
 } from 'element-plus'
-import axios from 'axios'
 import type {
   UploadFile,
   UploadFiles,
   UploadInstance,
   UploadProps,
-  UploadUserFile
+  UploadUserFile,
 } from 'element-plus'
+import type { AxiosRequestConfig } from 'axios'
+import ajaxBox from '../utils/ajaxBox'
 const upload = ref<UploadInstance>()
 const exporLoading = ref()
 const visible = ref(false)
 
 interface Props {
   url?: string // 上传和下载模板的接口(当需要将附件传递回父组件时不需要传递此属性)
-  parameter?: () => void // 模板下载的时候请求需要携带的参数：{state: 1}
-  data?: () => void //上传携带的其他数据对象:{userId: 1, userName: '张三'}
+  parameter?: Object // 模板下载的时候请求需要携带的参数：{state: 1}
+  data?: Object //上传携带的其他数据对象:{userId: 1, userName: '张三'}
   title?: string // 上传按钮的名称
   multiple?: boolean // 是否支持多文件
   limit?: number // 最大文件数量
   filePath?: UploadFile[] //UploadRawFile[] // 父组件传递的附件数据，用于显示附件列表和上传附件后传递给父组件附件数据
-  RowIndex?: number // 父组件传递的行索引，用于父组件中删除了附件找到对应的行
+  RowIndex?: number // 父组件传递的行索引，用于父组件中删除了附件找到对应的行(用于表格表单中上传附件)
+  templateName?: string //模板名称
+  timeOn?: boolean // 是否开启耗时任务 默认不开启
+  // 其他的一些配置:请求的baseurl地址,有耗时任务的时候耗时任务的配置,模板下载的一些配置等
+  otherConfig: {
+    size?: 'large' | 'default' | 'small' // 按钮大小
+    trigger?: 'click' | 'focus' | 'hover' | 'contextmenu' // 按钮触发方式 默认 hover
+    baseUrl?: string // 上请求的baseurl地址
+    datakey: string // 耗时请求的参数key值
+    // 耗时任务的配置
+    timeConfig: {
+      url: string
+      method: 'put' | 'post' | 'get' | 'PUT' | 'POST' | 'GET'
+      data?: object // 可选属性
+      params?: object // 可选属性
+    }
+  }
 }
 const props = defineProps<Props>()
 const emits = defineEmits<{
   (e: 'reloadTable'): void // 组件中上传附件后刷新父组件表格数据方法
-  (e: 'getFile', files: UploadFiles, file?: UploadFile, rowindex?: number): void
-  (e: 'update:file', files: UploadFiles): void
+  (e: 'getFile', files: UploadFiles, file?: UploadFile, rowindex?: number): void // 编辑表单的时候回显附件用到
+  (e: 'update:file', files: UploadFiles): void // 编辑表单的时候回显附件用到
 }>()
 console.log('附件props: ', props)
 const datas = ref(props.data)
@@ -167,38 +214,105 @@ const submitUpload = () => {
   visible.value = false
 }
 //文件上传成功回调
-const onSuccess = (res: any, file: any, fileList: any) => {
-  exporLoading.value.close()
-  if (res.code !== 200) return ElMessage.warning(res.msg)
-  ElMessage.success(res.msg)
-  emits('reloadTable')
+const onSuccess = async (res: any, file: any, fileList: any) => {
+  console.log('fileList: ', fileList)
+  console.log('file: ', file)
+  console.log('上传成功回调: ', res)
+  // exporLoading.value.close() // 关闭加载动画
+  if (res.code !== 200) {
+    upload.value!.clearFiles() // 清空文件列表
+    exporLoading.value.close() // 关闭加载动画
+    return ElMessage.warning(res.msg)
+  }
+
+  // 判断是否要走耗时逻辑
+  if (!props.timeOn || !res.data) {
+    upload.value!.clearFiles() // 清空文件列表
+    visible.value = false // 关闭上传面板
+    exporLoading.value.close() // 关闭加载动画
+    ElMessage.success(res.msg)
+    emits('reloadTable')
+    return
+  }
+
+  // 处理耗时请求的参数
+  let datas = {}
+  datas[props.otherConfig?.datakey] = res.data.task_id
+  // 耗时轮训
+  const data = await askForTask(datas)
+  console.log('data: ', data)
+  if (data.code === 200) {
+    // fileList.value.length = 0 // 清空文件列表
+    upload.value!.clearFiles() // 清空文件列表
+    visible.value = false // 关闭上传面板
+    exporLoading.value.close() // 关闭加载动画
+    ElMessage.success(data.msg)
+    emits('reloadTable')
+  } else if (data.code === 0) {
+    exporLoading.value.close() // 关闭加载动画
+    ElMessage.success(data.msg || '导入失败')
+  } else {
+    ElMessage.success(data.msg || '请求超时或者其他错误,请联系管理员.')
+  }
 }
 //文件上传失败回调
 const onError = (response: any, file: any, fileList: any) => {
-  ElMessage.error('服务器异常！')
+  console.log('上传失败回调: ', response)
+  ElMessage.error(file.name + '上传失败')
+  // fileList.value.length = 0 // 清空文件列表
+  upload.value!.clearFiles() // 清空文件列表
+  visible.value = false // 关闭上传面板
+  exporLoading.value.close() // 关闭加载动画
+}
+
+// 耗时请求函数
+const askForTask: (task_info: any) => Promise<any> = async (task_info: any) => {
+  // 处理父组件传递的配置
+  const axiosConfig: AxiosRequestConfig = {
+    ...props.otherConfig?.timeConfig,
+  }
+  // 处理请求的参数
+  if (
+    props.otherConfig?.timeConfig?.method === 'get' ||
+    props.otherConfig?.timeConfig?.method === 'GET'
+  ) {
+    axiosConfig.params = {
+      ...props.otherConfig?.timeConfig.params,
+      ...task_info,
+    }
+  } else {
+    axiosConfig.data = {
+      ...props.otherConfig?.timeConfig.data,
+      ...task_info,
+    }
+  }
+  try {
+    const res = await axios(axiosConfig)
+    // 如果返回的code是50001 就继续轮询，直到返回的code不是50001
+    if (res.data.code === 50001)
+      return await new Promise((resolve) => {
+        setTimeout(() => resolve(askForTask(task_info)), 2000)
+      })
+    return res.data
+  } catch (error) {
+    console.error('Error fetching task:', error)
+    throw error
+  }
 }
 
 //下载模板
 const formwork = () => {
-  axios({
-    method: 'get',
-    url: props.url + '_get/',
-    responseType: 'blob',
-    params: props.parameter
+  const url = props.url + '_get/'
+  const params = props.parameter
+  ajaxBox.downFileFetchV2(url, params, {
+    method: 'GET',
+    fileName: props.templateName || '模板.xlsx',
   })
-    .then((res) => {
-      const url = URL.createObjectURL(new Blob([res.data]))
-      let link: HTMLAnchorElement | null = document.createElement('a')
-      link.href = url
-      link.setAttribute('download', '模板.xlsx')
-      document.body.appendChild(link)
-      link.click()
-      link = null
-    })
-    .catch((error) => {
-      console.log(error)
-    })
 }
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+:deep(.el-upload) {
+  width: calc(100% - 110px);
+}
+</style>

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,
+  )
 }
  */