ci-plus 1.9.3 → 1.9.5

package/README.md

@@ -1,6 +1,10 @@
 ## 历史更新
 
 ```js
+1.9.5
+  1、新增 ciuploadV6 组件,优化一些bug
+1.9.4
+  1、优化表头筛选组件 headerInput.vue 中筛选条件的重置逻辑bug
 1.9.3
   1、优化uploadV5.vue组件添加必填标识
 1.9.2

package/index.ts

@@ -5,7 +5,7 @@ import { default as Fn } from './src/utils'
 export default {
   install: (app: App) => {
     // 注册所有组件
-    console.log('注册所有ci-plus组件1.8.5: ', components)
+    console.log('注册所有ci-plus组件1.9.5: ', components)
     for (const c in components) {
       app.use(components[c])
     }

package/package.json

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

package/src/fileRelated/index/ciuploadV6.ts

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

package/src/fileRelated/uploadV6.vue

@@ -0,0 +1,518 @@
+<!-- /**
+* @module uploadV6
+* @author : 卖女孩的小火柴
+* !description : 在v5基础上调整优化
+* @version : 1.0.0
+* @since : 创建时间 2026-01-07 10:00:00
+*/ -->
+
+<template>
+  <el-popover
+    placement="bottom"
+    :width="300"
+    :trigger="props.otherConfig?.trigger || 'hover'"
+    :visible="visible"
+  >
+    <slot name="top">
+      <el-button
+        :size="props.otherConfig?.size || 'small'"
+        @click="formwork"
+        style="width: 100%"
+        v-if="url"
+      >
+        <!-- {{ t('fileRelated.downloadTemplate') }} -->
+        下载模板
+      </el-button>
+    </slot>
+    <el-upload
+      ref="upload"
+      class="upload-demo"
+      :action="uploadUrl"
+      :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"
+      :size="props.otherConfig?.size || 'small'"
+    >
+      <template #trigger>
+        <div class="my-trigger">
+          <slot name="trigger">
+            <slot name="selectFile">
+              <el-button
+                :size="props.otherConfig?.size || 'small'"
+                type="primary"
+                style="width: 100%"
+                plain
+              >
+                <!-- {{ t('fileRelated.selectFile') }} -->
+                选择文件
+              </el-button>
+            </slot>
+          </slot>
+        </div>
+      </template>
+    </el-upload>
+
+    <slot name="center">
+      <div class="slot" style="display: flex; flex-direction: column; align-items: flex-end">
+        <div style="width: 100%; margin: 4px 2px; display: flex" v-if="ifShowAffiliation">
+          <span style="line-height: 30px; color: red; margin-right: 4px" v-if="requiredAffiliation">
+            *
+          </span>
+          <el-select-v2
+            :size="props.otherConfig?.size || 'small'"
+            v-model="affiliationAll"
+            filterable
+            :options="affiliationOptions"
+            style="width: 100%; margin-right: 5px"
+            clearable
+            @change="changeAll"
+          />
+        </div>
+        <div style="width: 100%; margin: 4px 2px; display: flex" v-if="ifShowWarehouse">
+          <span style="line-height: 30px; color: red; margin-right: 4px" v-if="requiredWarehouse">
+            *
+          </span>
+          <el-select-v2
+            :size="props.otherConfig?.size || 'small'"
+            v-model="warehouseAll"
+            filterable
+            :options="warehouseOptions"
+            style="width: 100%; margin-right: 5px"
+            clearable
+            @change="changeWarehouseAll"
+          />
+        </div>
+        <!-- 添加一个插槽 -->
+        <slot></slot>
+        <div>
+          <el-button
+            :size="props.otherConfig?.size || 'small'"
+            type="primary"
+            @click="submitUpload"
+            style="flex: 2"
+          >
+            <!-- {{ t('fileRelated.upload') }} -->
+            上传
+          </el-button>
+        </div>
+      </div>
+    </slot>
+
+    <template #reference>
+      <el-button
+        :type="exporLoading ? 'danger' : 'success'"
+        @click="visible = !visible"
+        :size="props.otherConfig?.size || 'small'"
+        :loading="exporLoading"
+      >
+        <!-- {{ props.title || t('fileRelated.attachmentUpload') }} -->
+        {{ props.title || '附件上传' }}
+      </el-button>
+    </template>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'ci-uploadV6' })
+
+// 定义一个函数，用于处理字符串
+
+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 t from '../utils/lang/index'
+import ajaxBox from '../utils/ajaxBox'
+import { getAffiliationOptions, getWarehouseList, axios } from '../utils/getAffiliationOptions.ts'
+import type { AxiosRequestConfig } from 'axios'
+import { computed, onMounted, ref } from 'vue'
+// import t from '@/views/MaterialWarehouse/lang'
+// import ajaxBox from '@/views/MaterialWarehouse/utils/ajaxBox'
+// import { getAffiliationOptions, getWarehouseList, axios } from '@/views/MaterialWarehouse/utils/getAffiliationOptions.ts'
+
+import type {
+  UploadFile,
+  UploadFiles,
+  UploadInstance,
+  UploadProps,
+  UploadUserFile
+} from 'element-plus'
+import {
+  ElButton,
+  ElLoading,
+  ElMessage,
+  ElPopover,
+  ElSelectV2,
+  ElUpload,
+  genFileId,
+  UploadRawFile
+} from 'element-plus'
+
+const upload = ref<UploadInstance>()
+const exporLoading = ref(false)
+const visible = ref(false)
+const affiliationAll = ref() // 选择的归属公司
+const warehouseAll = ref() // 选择的仓库
+const affiliationOptions = ref<any[]>([]) // 获取归属公司列表数据
+const warehouseOptions = ref<any[]>([]) // 获取仓库列表数据
+
+interface Props {
+  url?: string // 上传和下载模板的接口(当需要将附件传递回父组件时不需要传递此属性)
+  uploadUrl?: string // 上传附件的接口
+  parameter?: Object // 模板下载的时候请求需要携带的参数：{state: 1}
+  data?: any //上传携带的其他数据对象:{userId: 1, userName: '张三'}
+  title?: string // 上传按钮的名称
+  multiple?: boolean // 是否支持多文件
+  limit?: number // 最大文件数量
+  ifShowAffiliation?: boolean // 是否显示归属公司
+  requiredAffiliation?: boolean // 是否必选归属公司
+  ifShowWarehouse?: boolean // 是否显示仓库
+  requiredWarehouse?: boolean // 是否必选仓库
+  ifDefaultAffiliation?: boolean // 是否默认选中归属工厂
+  defaultAffiliationOrgid?: string // 默认选中归属工厂的 orgid(当前登陆账号的单位)
+  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 ifShowAffiliation = computed(() => {
+  return props.ifShowAffiliation
+})
+// 默认值：是否显示仓库
+const ifShowWarehouse = computed(() => {
+  return props.ifShowWarehouse || false
+})
+// 默认值：是否必选归属公司
+const requiredAffiliation = computed(() => {
+  return props.requiredAffiliation || false
+})
+// 默认值：是否必选仓库
+const requiredWarehouse = computed(() => {
+  return props.requiredWarehouse || false
+})
+
+// 是否默认选中归属工厂(默认值true)
+const ifDefaultAffiliation = computed(() => {
+  return props.ifDefaultAffiliation || true
+})
+
+// 获取本地缓存中当前登陆账号的公司
+const raw = localStorage.getItem('UserData')
+const UserData = raw ? JSON.parse(raw) : {}
+const defaultAffiliationOrgid = computed(() => {
+  return props.defaultAffiliationOrgid || UserData?.resOrgId
+})
+
+const emits = defineEmits<{
+  (e: 'reloadTable', res: any): void // 组件中上传附件后刷新父组件表格数据方法
+  (e: 'getFile', files: UploadFiles, file?: UploadFile, rowindex?: number): void // 编辑表单的时候回显附件用到
+  (e: 'update:file', files: UploadFiles): void // 编辑表单的时候回显附件用到
+  // 失败回调
+  (e: 'errorCb', err: any): 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
+  datas.value.factory_affiliation_name = affiliationOptions.value.find(
+    (item: any) => item.value === val
+  )?.label
+}
+
+const changeWarehouseAll = (val: string) => {
+  datas.value.warehouse_id = val
+  datas.value.warehouse_name = warehouseOptions.value.find((item: any) => item.value === val)?.label
+
+  console.log('%c Line:236 🍐 datas.value', 'color:#ea7e5c', datas.value)
+}
+
+// 对数组中的每个字符串应用处理函数
+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(
+      `${t('fileRelated.exceedFiles')} ${mylimit?.value} ${t('fileRelated.reselect')}`
+    )
+  }
+}
+
+// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+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 = (val?: any) => {
+  try {
+    if (!fileList.value || !fileList.value.length) {
+      return ElMessage.warning(t('fileRelated.pleaseFile'))
+    }
+    console.log(fileList.value.length)
+
+    // console.log('%c Line:312 🍎 选中归属公司', 'color:#ed9ec7', datas.value.factory_affiliation_id);
+    console.log('%c Line:319 🍔 必填', 'color:#93c0a4', requiredAffiliation.value)
+    // if (!datas.value.factory_affiliation_id && requiredAffiliation.value) {
+    // 	return ElMessage.warning(t('fileRelated.selectCompany'));
+    // }
+
+    // if(requiredAffiliation.value){
+    //   if(!datas.value.factory_affiliation_id){
+    //     return ElMessage.warning(t('fileRelated.selectCompany'))
+    //   }
+    // }
+
+    // if (!datas.value.warehouse_id && requiredWarehouse.value) {
+    // 	return ElMessage.warning(t('fileRelated.pleaseSelectWarehouse'));
+    // }
+
+    console.log('%c Line:320 🍏通过了--------', 'color:#33a5ff')
+    // exporLoading.value = ElLoading.service({ text: t('fileRelated.importing') })
+    exporLoading.value = true
+    console.log('upload.value', upload.value)
+    upload.value!.submit()
+    visible.value = false
+  } catch (error) {
+    console.log('%c Line:368 🌶 error', 'color:#4fff4B', error)
+    exporLoading.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() // 关闭加载动画
+    exporLoading.value = false
+    emits('errorCb', res) // 传递错误信息给父组件
+    return ElMessage.error(res.msg)
+  }
+
+  // 判断是否要走耗时逻辑
+  if (!props.timeOn || !res.data) {
+    upload.value!.clearFiles() // 清空文件列表
+    visible.value = false // 关闭上传面板
+    // exporLoading.value.close() // 关闭加载动画
+    exporLoading.value = false
+    ElMessage.success(res.msg)
+    emits('reloadTable', res) // 传递成功信息给父组件
+    return
+  }
+
+  // 处理耗时请求的参数
+  let datas = {}
+  // @ts-ignore
+  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() // 关闭加载动画
+    exporLoading.value = false
+    ElMessage.success(data.msg)
+    emits('reloadTable', data) // 传递成功信息给父组件
+  } else if (data.code === 0) {
+    upload.value!.clearFiles() // 清空文件列表
+    exporLoading.value = false
+    ElMessage.error(data.msg || '导入失败')
+    // exporLoading.value.close() // 关闭加载动画
+  } else {
+    ElMessage.error(data.msg || '请求超时或者其他错误,请联系管理员.')
+  }
+}
+//文件上传失败回调
+const onError = (response: any, file: any, fileList: any) => {
+  console.log('上传失败回调: ', response)
+  try {
+    ElMessage.error(file.name + t('fileRelated.uploadFailed'))
+    // fileList.value.length = 0 // 清空文件列表
+    upload.value!.clearFiles() // 清空文件列表
+    visible.value = false // 关闭上传面板
+    // exporLoading.value.close() // 关闭加载动画
+    exporLoading.value = false
+  } catch (error) {
+    console.log('%c Line:430 🍫 error', 'color:#7f2b82', error)
+    exporLoading.value = false
+  }
+}
+
+// 耗时请求函数
+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 as string
+  const params = props.parameter
+  ajaxBox.downFileFetchV2(url, params, {
+    method: 'GET',
+    fileName: props.templateName || t('fileRelated.template')
+  })
+}
+
+//选择框
+onMounted(async () => {
+  if (props.url && ifShowAffiliation.value) {
+    affiliationOptions.value = await getAffiliationOptions()
+    if (props.data && ifShowWarehouse.value) {
+      warehouseOptions.value = await getWarehouseList({
+        storage_type: props.data?.storage_type || 'CAILIAO'
+      })
+    }
+  } else {
+    affiliationOptions.value = []
+    warehouseOptions.value = []
+  }
+
+  // 判断是否默认选中归属公司
+  if (ifDefaultAffiliation.value) {
+    affiliationAll.value = defaultAffiliationOrgid.value
+    datas.value.factory_affiliation_id = defaultAffiliationOrgid.value
+  }
+})
+
+// 修改附件上传接口的参数 datas.value
+const updateDatas = (newDatas: any) => {
+  datas.value = { ...datas.value, ...newDatas }
+}
+
+// 向组件外暴露方法
+defineExpose({
+  datas,
+  updateDatas,
+  submitUpload
+})
+</script>
+
+<style scoped lang="scss">
+:deep(.el-upload) {
+  width: calc(100% - 110px);
+}
+</style>

package/src/index.ts

@@ -20,6 +20,7 @@ export * from './fileRelated/index/ciuploadV2' // 导出附件上传v2组件
 export * from './fileRelated/index/ciuploadV3' // 导出附件上传v3组件
 export * from './fileRelated/index/ciuploadV4' // 导出附件上传v4组件
 export * from './fileRelated/index/ciuploadV5' // 导出附件上传v5组件
+export * from './fileRelated/index/ciuploadV6' // 导出附件上传v6组件
 
 export * from './select' // 导出select组件
 export * from './selectTable' // 导出selectTable组件

package/src/sortableTable/headerInput.vue

@@ -695,6 +695,7 @@ watch(
         // 判断是否是当前列的筛选条件
         if (filter.value || filter) {
           hasValue.value = true
+          value.value = filter.value // 上面 if (newVal && typeof newVal == 'string')为else的时候会重置了 value.value的值
         } else {
           hasValue.value = false
           value.value = '' // 重置value的值

package/src/sortableTable/utils/interface.ts

@@ -1,6 +1,6 @@
 import { ColumnCls, TableColumnInstance, TableInstance } from 'element-plus'
 import ElDialog from 'element-plus/es/components/dialog'
-import { Component, Ref, h } from 'vue'
+import { Component, Ref, h, CSSProperties } from 'vue'
 export interface Scope<T> {
   row: T
   $index: number
@@ -11,7 +11,10 @@ export type Mutable<T> = {
   -readonly [P in keyof T]: T[P]
 }
 export type Props<T> = Mutable<
-  Partial<Omit<T, `$${string}` | `_${string}` | '$' | '_'>>
+  Partial<Omit<T, `$${string}` | `_${string}` | '$' | '_'>> & {
+    style?: CSSProperties | string
+    class?: string | Record<string, boolean> | Array<string | Record<string, boolean>>
+  }
 >
 export type anyObj = { [key: string | number | symbol]: any }
 export interface SortColumn {
@@ -22,10 +25,7 @@ export interface SortColumn {
   col: Props<TableColumnInstance>
   scope?(props: any): string
   component?: (createVNode: typeof h, data: Scope<any>) => Component
-  header?: (
-    createVNode: typeof h,
-    data: Pick<Scope<any>, '$index' | 'column'>,
-  ) => Component
+  header?: (createVNode: typeof h, data: Pick<Scope<any>, '$index' | 'column'>) => Component
   children?: SortColumn[]
 }
 export type SortColumnSend = Pick<SortColumn, 'id' | 'hide'> & {
@@ -34,10 +34,7 @@ export type SortColumnSend = Pick<SortColumn, 'id' | 'hide'> & {
   ban: boolean
 }
 export interface SortableTableIns
-  extends /* @vue-ignore */ Omit<
-    Props<TableInstance>,
-    'data' | 'ref' | 'headerCellClassName'
-  > {
+  extends /* @vue-ignore */ Omit<Props<TableInstance>, 'data' | 'ref' | 'headerCellClassName'> {
   table?: /* @vue-ignore */
   Props<TableInstance> | /* @vue-ignore */ Ref<Props<TableInstance>>['value']
   modelValue: SortColumn[] | Ref<SortColumn[]>['value']
@@ -48,6 +45,6 @@ export interface SortableTableIns
 export interface SortableTableDialog {
   config?: /* @vue-ignore */
   | Props<InstanceType<typeof ElDialog>>
-  | /* @vue-ignore */ Ref<Props<InstanceType<typeof ElDialog>>>['value']
+    | /* @vue-ignore */ Ref<Props<InstanceType<typeof ElDialog>>>['value']
   modelValue: SortColumn[] | Ref<SortColumn[]>['value']
 }