ci-plus 1.5.3 → 1.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ci-plus",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "description": "ci组件库",
   "main": "./index.ts",
   "scripts": {
@@ -12,7 +12,7 @@
     "vue",
     "element-plus",
     "ui组件库二次封装",
-    "utils中的附件下载方法新增一个downFileFetchV2函数"
+    "给芜湖伦比单独更新标识卡"
   ],
   "type": "module",
   "author": {

package/src/dailog/dialog.vue

@@ -142,7 +142,7 @@ const domInfo = reactive({
   baseW: 0,
   baseH: 0
 })
-const container = ref<HTMLElement>(null)
+const containers = ref<HTMLElement>(null)
 
 const updateTarget = (event: MouseEvent) => {
   if (!MyDialogRef.value) {
@@ -180,7 +180,7 @@ const onTdMousedown = (e: MouseEvent) => {
 
   <div id="dia">
     <el-dialog
-      class="container"
+      class="containers"
       v-if="dialogVisible"
       v-model="dialogVisible"
       :title="title"

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>