ci-plus 1.7.6 → 1.7.8

package/README.md

@@ -1,6 +1,10 @@
 ## 历史更新
 
 ```js
+1.7.8
+  1、导入组件3中优化单选文件的时候覆盖文件逻辑
+1.7.7
+  1、新增导入组件3(可以选择归属公司)
 1.7.6
   1、调整语言文件中翻译对象
 1.7.5

package/index.ts

@@ -1,14 +1,14 @@
-import * as components from './src/index';
-export * from './src/index';
-import { App } from 'vue';
-import { default as Fn } from './src/utils';
+import * as components from './src/index'
+export * from './src/index'
+import { App } from 'vue'
+import { default as Fn } from './src/utils'
 export default {
   install: (app: App) => {
     // 注册所有组件
-    console.log('注册所有ci-plus组件1.3.9: ');
+    console.log('注册所有ci-plus组件1.7.7: ', components)
     for (const c in components) {
-      app.use(components[c]);
+      app.use(components[c])
     }
   },
-  Fn,
-};
+  Fn
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ci-plus",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "description": "ci组件库",
   "main": "./index.ts",
   "scripts": {

package/src/fileRelated/index/ciuploadV3.ts

@@ -0,0 +1,4 @@
+import _UploadV3 from '../uploadV3.vue'
+import { withInstall } from '../../utils/index'
+export const UploadV3 = withInstall(_UploadV3)
+export default UploadV3

package/src/fileRelated/uploadV3.vue

@@ -0,0 +1,360 @@
+<template>
+  <el-popover
+    placement="bottom"
+    :width="300"
+    :trigger="props.otherConfig?.trigger || 'hover'"
+    :visible="visible"
+  >
+    <el-upload
+      ref="upload"
+      class="upload-demo"
+      :action="url + '_post/'"
+      :limit="mylimit || 1"
+      :on-exceed="handleExceed"
+      :auto-upload="false"
+      :on-success="onSuccess"
+      :on-error="onError"
+      :on-change="handleChange"
+      :on-remove="handleRemove"
+      :data="datas"
+      :multiple="mymultiple || false"
+      v-model:file-list="fileList"
+    >
+      <template #trigger>
+        <el-button size="small" type="primary" style="width: 100%" plain> 选择文件 </el-button>
+      </template>
+      <el-button
+        size="small"
+        @click="formwork"
+        style="float: left; margin: 0 12px 0 0; width: 95px"
+        v-if="url"
+      >
+        下载模板
+      </el-button>
+    </el-upload>
+
+    <div style="width: 100%; display: flex" v-if="url">
+      <el-select-v2
+        size="small"
+        v-model="affiliationAll"
+        filterable
+        :options="affiliationOptions"
+        placeholder="选择归属公司"
+        style="width: 180px; margin-right: 5px"
+        clearable
+        @change="changeAll"
+      />
+      <el-button size="small" type="primary" @click="submitUpload" style="flex: 2">
+        上传
+      </el-button>
+    </div>
+    <template #reference>
+      <el-button
+        type="success"
+        @click="visible = !visible"
+        :size="props.otherConfig?.size || 'small'"
+      >
+        {{ props.title || '附件上传' }}
+      </el-button>
+    </template>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'ci-uploadV3' })
+// 定义一个函数，用于处理字符串
+const setFilePath = (arr: string[], url?: string) => {
+  // console.log('重新渲染数据', arr);
+  if (arr && arr.length > 0) {
+    let newArr: { name: string; oldName: string }[] = []
+    arr.forEach((item, i) => {
+      let segments = item.split('.')
+      let parts = segments[0].split('/') // 获取每名称
+      let name = parts[parts.length - 1] + '.' + segments[segments.length - 1]
+      let oldName = url ? url + item : item //原来的名称
+      // let url = segments[0] + '.' + segments[segments.length - 1]
+      newArr.push({ name, oldName })
+    })
+    return newArr
+  } else {
+    return [] // 如果数组为空，则返回空数组
+  }
+}
+
+// 将路径处理成附件的参数
+const fileArr = (url: string, pathArr: string[]) => {
+  if (pathArr && pathArr.length > 0) {
+    let objArr: any = []
+    if (pathArr.length > 0) {
+      pathArr.map((item: any) => {
+        objArr.push({
+          name: item.name,
+          oldName: item.oldName,
+          url: url + item.oldName
+        })
+      })
+      return objArr
+    } else {
+      return []
+    }
+  }
+}
+
+import type { AxiosRequestConfig } from 'axios';
+import axios from 'axios';
+import type {
+  UploadFile,
+  UploadFiles,
+  UploadInstance,
+  UploadProps,
+  UploadUserFile
+} from 'element-plus';
+import { ElButton, ElLoading, ElMessage, ElPopover, ElSelectV2, ElUpload, genFileId, UploadRawFile } from 'element-plus';
+import { onMounted, ref } from 'vue';
+import ajaxBox from '../utils/ajaxBox';
+import getAffiliationOptions from '../utils/getAffiliationOptions.ts';
+const upload = ref<UploadInstance>()
+const exporLoading = ref()
+const visible = ref(false)
+const affiliationAll = ref()
+const affiliationOptions = ref<any[]>([]) // 获取归属公司列表数据
+
+interface Props {
+  url?: string // 上传和下载模板的接口(当需要将附件传递回父组件时不需要传递此属性)
+  parameter?: Object // 模板下载的时候请求需要携带的参数：{state: 1}
+  data?: Object //上传携带的其他数据对象:{userId: 1, userName: '张三'}
+  title?: string // 上传按钮的名称
+  multiple?: boolean // 是否支持多文件
+  limit?: number // 最大文件数量
+  filePath?: UploadFile[] //UploadRawFile[] // 父组件传递的附件数据，用于显示附件列表和上传附件后传递给父组件附件数据
+  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 // 编辑表单的时候回显附件用到
+}>()
+console.log('附件props: ', props)
+const datas: any = ref(props.data)
+const mymultiple = ref<boolean>(props.multiple)
+const mylimit = ref<number>(props.limit as number ||1)
+const myfilePath = ref<any>(props.filePath || [])
+console.log('myfilePath: ', props.filePath)
+
+const changeAll = (val: string) => {
+  datas.value.factory_affiliation_id = val
+}
+
+// 对数组中的每个字符串应用处理函数
+let pathArr = setFilePath(myfilePath.value)
+
+// 打印处理后的数组
+// 将父组件中传递过来的名称，处理成el-upload需要的格式
+let pathUrlArr = fileArr(import.meta.env.VITE_BASE_URL9999, pathArr)
+console.log('fileObj(): ', pathUrlArr)
+const fileList = ref<UploadUserFile[]>(pathUrlArr)
+console.log('fileList: ', fileList.value)
+
+//当超出限制时，执行的钩子函数
+const handleExceed: UploadProps['onExceed'] = (files) => {
+  console.log("%c Line:177 🥝 files", "color:#e41a6a", files);
+
+  if(mylimit?.value === 1){
+    upload.value!.clearFiles()
+    const file = files[0] as UploadRawFile
+    file.uid = genFileId()
+    upload.value!.handleStart(file)
+  }
+  if( mylimit?.value > 1){
+    console.log('超出限制: ', files)
+    ElMessage.warning(`超出最大文件数:${mylimit?.value}个文件,请重新选择`)
+  }
+}
+
+// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+const handleChange = (file: any, fileLists: any) => {
+  if (!props.url) {
+    emits('getFile', fileLists) //将选中的文件传递回父组件
+    emits('update:file', fileLists) //同步父组件绑定的附件字段，以便父组件提交表单的时候一起将附件提交
+  }
+}
+// 文件列表删除时
+const handleRemove: UploadProps['onRemove'] = (file, fileList) => {
+  console.log('file: ', file)
+  console.log('fileList: ', fileList)
+  // 如果没有url时 在删除的时候将文件流同步回父组件
+  if (!props.url) {
+    emits('getFile', fileList, file, props.RowIndex)
+    emits('update:file', fileList)
+  }
+}
+//上传文件
+const submitUpload = () => {
+  console.log(fileList.value.length)
+  if (!fileList.value.length) return ElMessage.warning('请选择文件后在上传12！')
+  exporLoading.value = ElLoading.service({ text: '导入中...' })
+  console.log('upload.value', upload.value)
+  upload.value!.submit()
+  visible.value = false
+}
+//文件上传成功回调
+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) => {
+  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 = () => {
+  const url = props.url + '_get/'
+  const params = props.parameter
+  ajaxBox.downFileFetchV2(url, params, {
+    method: 'GET',
+    fileName: props.templateName || '模板.xlsx'
+  })
+}
+
+//选择框
+onMounted(async () => {
+  affiliationOptions.value = await getAffiliationOptions()
+})
+
+// const getAffiliationOptions = async (
+//   list?: any[],
+//   keys: string[] = ['label', 'value'],
+//   val: string[] = ['name', 'id'],
+// ) => {
+//   let url = produceModule + 'company_optional_scope_get/'
+//   let options: { [key: string]: any }[] = []
+//   try {
+//     const res = await axios.get(url)
+//     console.log('%c Line:360 🍊 res', 'color:#7f2b82', res)
+//     if (
+//       res.status === 200 && res.data.code === 200 &&
+//       Array.isArray(res.data?.data) &&
+//       res.data.data.length > 0
+//     ) {
+//       res.data.data.forEach((item: AffiliationRES) => {
+//         const obj: { [key: string]: any } = {}
+//         keys.forEach((key, index) => {
+//           const valueKey = val[index]
+//           obj[key] = item[valueKey as keyof AffiliationRES]
+//         })
+//         options.push(obj)
+//       })
+//     } else {
+//       console.error('请求失败:', res.data.msg)
+//       options = []
+//     }
+//   } catch (error) {
+//     console.error('请求失败:', error)
+//     options = []
+//   }
+//   console.log('%c Line:1338 🥝 result', 'color:#ea7e5c', options)
+//   list = options
+//   return options
+// }
+</script>
+
+<style scoped lang="scss">
+:deep(.el-upload) {
+  width: calc(100% - 110px);
+}
+</style>

package/src/index.ts

@@ -1,23 +1,24 @@
-export * from './button';
-export * from './icon';
-export * from './buttons';
-export * from './dailog';
-export * from './ccapp';
-export * from './svgIcon';// svg图标
-export * from './selectSuffix';
-export * from './sortableTable/index/headButtons'; // 导出排序表头按钮
-export * from './sortableTable/index/headerInput'; // 导出筛选面板
-export * from './sortableTable/index/sortableTable'; // 导出排序表格
-export * from './sortableTable/index/sortableTableDialog'; // 导出表排序组件
-export * from './sortableTable/index/sortableTableColumnCell'; // 导出表列组件
+export * from './button'
+export * from './icon'
+export * from './buttons'
+export * from './dailog'
+export * from './ccapp'
+export * from './svgIcon' // svg图标
+export * from './selectSuffix'
+export * from './sortableTable/index/headButtons' // 导出排序表头按钮
+export * from './sortableTable/index/headerInput' // 导出筛选面板
+export * from './sortableTable/index/sortableTable' // 导出排序表格
+export * from './sortableTable/index/sortableTableDialog' // 导出表排序组件
+export * from './sortableTable/index/sortableTableColumnCell' // 导出表列组件
 
-export * from './identificationCard'; // 导出标识卡条形码模板组件
-export * from './identificationCard/qrcode'; // 导出标识卡二维码模板组件
+export * from './identificationCard' // 导出标识卡条形码模板组件
+export * from './identificationCard/qrcode' // 导出标识卡二维码模板组件
 
-export * from './fileRelated/index/ciseeFile'; // 导出附件查看组件
-export * from './fileRelated/index/ciupload'; // 导出附件上传组件
-export * from './fileRelated/index/ciuploadV2'; // 导出附件上传v2组件
+export * from './fileRelated/index/ciseeFile' // 导出附件查看组件
+export * from './fileRelated/index/ciupload' // 导出附件上传组件
+export * from './fileRelated/index/ciuploadV2' // 导出附件上传v2组件
+export * from './fileRelated/index/ciuploadV3' // 导出附件上传v3组件
 
-export * from './select'; // 导出select组件
-export * from './selectTable'; // 导出selectTable组件
-export * from './queryCondition'; // 导出queryCondition组件
+export * from './select' // 导出select组件
+export * from './selectTable' // 导出selectTable组件
+export * from './queryCondition' // 导出queryCondition组件

package/src/utils/getAffiliationOptions.ts

@@ -0,0 +1,67 @@
+import apis from './baseApi'
+import axios from 'axios'
+const { produceModule } = apis
+
+interface AffiliationRES {
+  id: string // 归属公司 id
+  name: string // 归属公司 名称
+  parentId: string // 归属公司 父级id
+  type: number // 归属公司 类型
+  del: string // 删除状态
+  createdId: string // 创建人id
+  createdDate: string // 创建时间
+  orgCode: string // 归属公司 编码
+  treePath: string // 归属公司 路径
+  updatedId?: any // 修改人id
+  updatedDate?: any // 修改时间
+  version?: any // 版本
+  sortNum?: any
+  attribute?: any
+  datasourceCode: string
+  platform?: any
+  platformTxt?: any
+  sector?: any
+  sectorTxt?: any
+  area?: any
+  areaTxt?: any
+  abbreviation?: any
+  superOrgId?: any
+}
+const getAffiliationOptions = async (
+  list?: any[],
+  keys: string[] = ['label', 'value'],
+  val: string[] = ['name', 'id']
+) => {
+  let url = produceModule + 'company_optional_scope_get/'
+  let options: { [key: string]: any }[] = []
+  try {
+    const res = await axios.get(url)
+    console.log('%c Line:360 🍊 res', 'color:#7f2b82', res)
+    if (
+      res.status === 200 &&
+      res.data.code === 200 &&
+      Array.isArray(res.data?.data) &&
+      res.data.data.length > 0
+    ) {
+      res.data.data.forEach((item: AffiliationRES) => {
+        const obj: { [key: string]: any } = {}
+        keys.forEach((key, index) => {
+          const valueKey = val[index]
+          obj[key] = item[valueKey as keyof AffiliationRES]
+        })
+        options.push(obj)
+      })
+    } else {
+      console.error('请求失败:', res.data.msg)
+      options = []
+    }
+  } catch (error) {
+    console.error('请求失败:', error)
+    options = []
+  }
+  console.log('%c Line:1338 🥝 result', 'color:#ea7e5c', options)
+  list = options
+  return options
+}
+
+export default getAffiliationOptions

package/src/utils/index.ts

@@ -8,17 +8,18 @@ import apis from './baseApi'
 import { setDate, setDateTime } from './Dayjs'
 import dayjs from './Dayjs'
 import ajaxBox from './ajaxBox' // 处理文件下载方法
-import t from './lang/index' // 中英文切换
+import getAffiliationOptions from './getAffiliationOptions' // 处理文件下载方法
 
-// 导出 cardPrint 和 apis
-export default {
-  apis,
+let func = {
   cardPrint,
   setCardList,
   withInstall,
-  dayjs,
   setDate,
   setDateTime,
-  ajaxBox,
-  t
+  getAffiliationOptions,
+  apis,
+  dayjs,
+  ajaxBox
 }
+// 导出 所有方法
+export default func