ci-plus 1.8.9 → 1.9.1

package/README.md

@@ -1,6 +1,10 @@
 ## 历史更新
 
 ```js
+1.9.1
+  1、优化uploadV5.vue组件
+1.9.0
+  1、uploadV4.vue组件基础上，新增uploadV5.vue组件(新增功能：配置默认选中归属公司选项)
 1.8.9
   1、更新uploadV4.vue组件命名重复
   2、优化一些其他bug

package/package.json

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

package/src/components.d.ts

@@ -27,6 +27,7 @@ declare module '@vue/runtime-core' {
     CiUploadV2: typeof components.UploadV2
     CiUploadV3: typeof components.UploadV3
     CiUploadV4: typeof components.UploadV4
+    CiUploadV5: typeof components.UploadV5
 
     CiSelect: typeof components.Select
     CiSelectTable: typeof components.SelectTable

package/src/fileRelated/index/ciuploadV5.ts

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

package/src/fileRelated/uploadV5.vue

@@ -0,0 +1,470 @@
+<!-- /**
+* @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-uploadV5' })
+
+// 定义一个函数，用于处理字符串
+
+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 // 是否默认选中归属工厂默认值true
+  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 || true
+})
+// 默认值：是否显示仓库
+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'): 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(
+    '%c Line:312 🍤 判断',
+    'color:#33a5ff',
+    requiredAffiliation.value && !datas.value.factory_affiliation_id,
+    requiredAffiliation.value,
+    datas.value.factory_affiliation_id
+  )
+  console.log(fileList.value.length)
+  console.log(
+    '%c Line:312 🍤 判断',
+    'color:#33a5ff',
+    requiredAffiliation.value && !datas.value.factory_affiliation_id,
+    requiredAffiliation.value,
+    datas.value.factory_affiliation_id
+  )
+  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 (!datas.value.warehouse_id && requiredWarehouse.value) {
+    return ElMessage.warning(t('fileRelated.pleaseSelectWarehouse'))
+  }
+  // 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 && 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
+  }
+})
+</script>
+
+<style scoped lang="scss">
+:deep(.el-upload) {
+  width: calc(100% - 110px);
+}
+</style>

package/src/index.ts

@@ -19,6 +19,7 @@ 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 './fileRelated/index/ciuploadV5' // 导出附件上传v5组件
 
 export * from './select' // 导出select组件
 export * from './selectTable' // 导出selectTable组件