ci-plus 1.8.4 → 1.8.6

package/README.md

@@ -1,6 +1,11 @@
 ## 历史更新
 
 ```js
+1.8.6
+  1、修改 ciuploadV4 组件中的一个bug
+1.8.5
+  1、新增 ciuploadV4 组件
+  2、一些导出小优化
 1.8.4
   1、优化弹窗组件，使其样式不污染全局
 1.8.3

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.2: ', components)
+    console.log('注册所有ci-plus组件1.8.5: ', components)
     for (const c in components) {
       app.use(components[c])
     }

package/package.json

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

package/src/components.d.ts

@@ -25,6 +25,8 @@ declare module '@vue/runtime-core' {
     CiSeeFile: typeof components.SeeFile
     CiUpload: typeof components.Upload
     CiUploadV2: typeof components.UploadV2
+    CiUploadV3: typeof components.UploadV3
+    CiUploadV4: typeof components.UploadV4
 
     CiSelect: typeof components.Select
     CiSelectTable: typeof components.SelectTable

package/src/fileRelated/index/ciuploadV4.ts

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

package/src/fileRelated/uploadV3.vue

@@ -121,7 +121,7 @@ import {
 } from 'element-plus'
 import { onMounted, ref } from 'vue'
 import ajaxBox from '../utils/ajaxBox'
-import getAffiliationOptions from '../utils/getAffiliationOptions.ts'
+import {getAffiliationOptions} from '../utils/getAffiliationOptions.ts'
 const upload = ref<UploadInstance>()
 const exporLoading = ref()
 const visible = ref(false)

package/src/fileRelated/uploadV4.vue

@@ -0,0 +1,428 @@
+<!-- /**
+* @module uploadV4
+* @author : 卖女孩的小火柴
+* !description : 其它入库 导入组件
+* @version : 1.0.0
+* @since : 创建时间 2025-08-14 14:36:38
+*/ -->
+
+<template>
+  <el-popover
+    placement="bottom"
+    :width="300"
+    :trigger="props.otherConfig?.trigger || 'hover'"
+    :visible="visible"
+  >
+    <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"
+    >
+      <template #trigger>
+        <el-button size="small" type="primary" style="width: 100%" plain>
+          {{ t('fileRelated.selectFile') }}
+        </el-button>
+      </template>
+      <el-button
+        size="small"
+        @click="formwork"
+        style="float: left; margin: 0 12px 0 0; width: 95px"
+        v-if="url"
+      >
+        {{ t('fileRelated.downloadTemplate') }}
+      </el-button>
+    </el-upload>
+
+    <div class="slot" style="display: flex; flex-direction: column; align-items: flex-end">
+      <div style="width: 100%; margin: 4px 2px" v-if="ifShowAffiliation">
+        <el-select-v2
+          size="small"
+          v-model="affiliationAll"
+          filterable
+          :options="affiliationOptions"
+          :placeholder="t('fileRelated.selectCompany')"
+          style="width: 100%; margin-right: 5px"
+          clearable
+          @change="changeAll"
+        />
+      </div>
+      <div style="width: 100%; margin: 4px 2px" v-if="ifShowWarehouse">
+        <el-select-v2
+          size="small"
+          v-model="warehouseAll"
+          filterable
+          :options="warehouseOptions"
+          :placeholder="t('fileRelated.selectWarehouse')"
+          style="width: 100%; margin-right: 5px"
+          clearable
+          @change="changeWarehouseAll"
+        />
+      </div>
+      <!-- 添加一个插槽 -->
+      <slot></slot>
+      <div>
+        <el-button size="small" type="primary" @click="submitUpload" style="flex: 2">
+          {{ t('fileRelated.upload') }}
+        </el-button>
+      </div>
+    </div>
+
+    <template #reference>
+      <el-button
+        :type="exporLoading ? 'danger' : 'success'"
+        @click="visible = !visible"
+        :size="props.otherConfig?.size || 'small'"
+        :loading="exporLoading"
+      >
+        {{ props.title || t('fileRelated.attachmentUpload') }}
+      </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 t from '../utils/lang/index'
+import type { AxiosRequestConfig } from 'axios'
+import { computed, onMounted, ref } from 'vue'
+import ajaxBox from '../utils/ajaxBox'
+import { getAffiliationOptions, getWarehouseList, axios } from '../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 // 是否必选仓库
+  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 || true
+})
+// 默认值：是否显示仓库
+const ifShowWarehouse = computed(() => {
+  return props.ifShowWarehouse || false
+})
+// 默认值：是否必选归属公司
+const requiredAffiliation = computed(() => {
+  return props.requiredAffiliation || false
+})
+// 默认值：是否必选仓库
+const requiredWarehouse = computed(() => {
+  return props.requiredWarehouse || false
+})
+
+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
+  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 = () => {
+  if (!fileList.value || !fileList.value.length) {
+    return ElMessage.warning(t('fileRelated.pleaseFile'))
+  }
+  console.log(fileList.value.length)
+  if (!datas.value.warehouse_id && requiredWarehouse.value) {
+    return ElMessage.warning(t('fileRelated.pleaseSelectWarehouse'))
+  }
+  if (!datas.value.factory_affiliation_id && requiredAffiliation.value) {
+    return ElMessage.warning(t('fileRelated.selectCompany'))
+  }
+  // exporLoading.value = ElLoading.service({ text: t('fileRelated.importing') })
+  exporLoading.value = true
+  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() // 关闭加载动画
+    exporLoading.value = false
+    return ElMessage.warning(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')
+    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() // 关闭加载动画
+    exporLoading.value = false
+    ElMessage.success(data.msg)
+    emits('reloadTable')
+  } 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)
+  ElMessage.error(file.name + t('fileRelated.uploadFailed'))
+  // fileList.value.length = 0 // 清空文件列表
+  upload.value!.clearFiles() // 清空文件列表
+  visible.value = false // 关闭上传面板
+  // exporLoading.value.close() // 关闭加载动画
+  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) {
+    affiliationOptions.value = await getAffiliationOptions()
+    if (props.data) {
+      warehouseOptions.value = await getWarehouseList({
+        storage_type: props.data?.storage_type || 'CAILIAO'
+      })
+    }
+  } else {
+    affiliationOptions.value = []
+    warehouseOptions.value = []
+  }
+})
+</script>
+
+<style scoped lang="scss">
+:deep(.el-upload) {
+  width: calc(100% - 110px);
+}
+</style>

package/src/index.ts

@@ -18,6 +18,7 @@ export * from './fileRelated/index/ciseeFile' // 导出附件查看组件
 export * from './fileRelated/index/ciupload' // 导出附件上传组件
 export * from './fileRelated/index/ciuploadV2' // 导出附件上传v2组件
 export * from './fileRelated/index/ciuploadV3' // 导出附件上传v3组件
+export * from './fileRelated/index/ciuploadV4' // 导出附件上传v4组件
 
 export * from './select' // 导出select组件
 export * from './selectTable' // 导出selectTable组件

package/src/utils/getAffiliationOptions.ts

@@ -2,6 +2,50 @@ import apis from './baseApi'
 import axios from 'axios'
 const { produceModule } = apis
 
+export interface User {
+  user_code: string // 登录名:'148128'
+  user_name: string // 用户名:'方卿'
+  org_id: string // 公司ID:'1780861656362131456'
+  org_name: string // 公司名称:'杭州人本轴承有限公司动力分厂'
+  dept_id: string // 团队ID:'1712341581808545792'
+  dept_name: string // 团队名称:'质控4团队'
+  tenantId: string // 租户id:'1739466802218676224'
+}
+// 在pc端获取用户信息
+const UserData = JSON.parse(localStorage.getItem('UserData') || '{}')
+let users = {
+  org_id: UserData.orgId,
+  org_name: UserData.orgName,
+  user_code: UserData.loginName,
+  user_name: UserData.name,
+  dept_id: UserData.deptId,
+  dept_name: UserData.deptName
+}
+let user = JSON.parse(JSON.stringify(users))
+
+const cardPrintAxios = axios.create({
+  withCredentials: true
+})
+
+cardPrintAxios.interceptors.request.use(
+  (config) => {
+    // if (userInfo.accessToken)
+    //   config.headers['Authorization'] = userInfo.accessToken
+    if (config.method == 'get' && config.params) {
+      Object.assign(config.params, user)
+    } else if (config.method !== 'get') {
+      if (config.data instanceof FormData) {
+        let data: FormData = config.data
+        Object.keys(user).forEach((k) => {
+          if (!data.has(k)) data.append(k, user[k as keyof User])
+        })
+      } else Object.assign(config.data, user)
+    }
+    return config
+  },
+  (error) => Promise.reject(error)
+)
+
 interface AffiliationRES {
   id: string // 归属公司 id
   name: string // 归属公司 名称
@@ -35,8 +79,14 @@ const getAffiliationOptions = async (
   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)
+    const res = await cardPrintAxios.get(url, {
+      params: {
+        page: 1,
+        pageSize: 100000
+      }
+    })
+    console.log('%c Line:360 🍊🍤 res666', 'color:#7f2b82', res)
+
     if (
       res.status === 200 &&
       res.data.code === 200 &&
@@ -64,4 +114,63 @@ const getAffiliationOptions = async (
   return options
 }
 
-export default getAffiliationOptions
+// 获取仓库列表数据 warehouse_get
+const getWarehouseList = async (par: {
+  list?: any[]
+  keys?: string[]
+  val?: string[]
+  storage_type?: string // 仓库类型
+  search?: string // 搜索条件,
+}) => {
+  let {
+    list = [], // 存储接口返回的源数据
+    keys = ['label', 'value'],
+    val = ['name', 'id'],
+    storage_type = 'CAILIAO',
+    search // 搜索参数
+  } = par
+
+  let url = produceModule + 'warehouse_get/'
+  let options: { [key: string]: any }[] = []
+  try {
+    const res = await cardPrintAxios.get(url, {
+      params: {
+        page: 1,
+        pageSize: 100000,
+        warehouse_type_codes: storage_type,
+        name: search
+      }
+    })
+    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
+    ) {
+      list = res.data.data
+      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)
+      list = []
+      options = []
+    }
+  } catch (error) {
+    console.error('请求失败:', error)
+    list = []
+    options = []
+  }
+  console.log('%c Line:1338 🥝 result', 'color:#ea7e5c', options)
+  return options
+}
+
+// 导出独立实例
+export { cardPrintAxios as axios, getAffiliationOptions, getWarehouseList }
+export default cardPrintAxios

package/src/utils/index.ts

@@ -7,7 +7,14 @@ import { cardPrint, setCardList } from './cardPrint'
 import apis from './baseApi'
 import { dayjs, setDate, setDateTime } from './Dayjs'
 import ajaxBox from './ajaxBox' // 处理文件下载方法
-import getAffiliationOptions from './getAffiliationOptions' // 处理文件下载方法
+import cardPrintAxios, {
+  getAffiliationOptions,
+  getWarehouseList,
+  axios
+} from './getAffiliationOptions' // 处理文件下载方法
+
+// 表头组件的一些方法
+import { setId, getSend, sort } from '../sortableTable/utils/dataOpt'
 
 let func = {
   cardPrint,
@@ -16,9 +23,15 @@ let func = {
   setDate,
   setDateTime,
   getAffiliationOptions,
+  getWarehouseList,
+  cardPrintAxios, // 一个简易的axios
+  axios,
   apis,
   ajaxBox,
-  dayjs
+  dayjs,
+  setId,
+  getSend,
+  sort
 }
 // 导出 所有方法
 export default func

package/src/utils/lang/en.js

@@ -25,11 +25,13 @@ const en = {
     selectFile:'SELECT FILE',
     downloadTemplate:'Download Template',
     selectCompany:'Choose a company to belong to',
+    selectWarehouse: 'Select warehouse',
     upload:'Upload',
     attachmentUpload:'Attachment upload',
     exceedFiles:'Exceeded the maximum file count of  ',
     reselect:'  files, please select again',
     pleaseFile:'Please select the file before uploading!',
+    pleaseSelectWarehouse: 'Please select the warehouse',
     importing:'Importing in progress ···',
     uploadFailed:'Upload failed',
   },

package/src/utils/lang/zh.js

@@ -25,11 +25,13 @@ const zh = {
     selectFile:'选择文件',
     downloadTemplate:'下载模板',
     selectCompany:'选择归属公司',
+    selectWarehouse: '选择仓库',
     upload:'上传',
     attachmentUpload:'附件上传',
     exceedFiles:'超出最大文件数 ',
     reselect:' 个文件,请重新选择',
     pleaseFile:'请选择文件后在上传！',
+    pleaseSelectWarehouse: '请选择仓库',
     importing:'导入中···',
     uploadFailed:'上传失败',
     template:'模板.xlsx'