From 0a85cc0889f3ea34cb8975652a4c328d562d4d01 Mon Sep 17 00:00:00 2001 From: Cano1997 <58964671+Cano1997@users.noreply.github.com> Date: Tue, 2 Sep 2025 15:01:09 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=A7=86=E5=9B=BE?= =?UTF-8?q?loading=E6=8C=87=E4=BB=A4=E5=BC=B9=E6=A1=86=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E6=97=B6=E9=97=B4=E5=BC=82=E5=B8=B8=EF=BC=8C=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E9=BB=98=E8=AE=A4=E6=98=BE=E7=A4=BA2s=E4=B8=BA=E4=B8=8D?= =?UTF-8?q?=E5=85=B3=E9=97=AD=EF=BC=8C=E8=80=8C=E6=98=AF=E7=94=B1=E6=8E=A7?= =?UTF-8?q?=E5=88=B6=E5=99=A8=E5=85=B3=E9=97=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/util/directive/loading.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/util/directive/loading.ts b/src/util/directive/loading.ts index d450c9c3d7..167fc6b103 100644 --- a/src/util/directive/loading.ts +++ b/src/util/directive/loading.ts @@ -32,6 +32,7 @@ const createInstance = (el: ElementLoading) => { message: `${ibiz.i18n.t('util.loading')}...`, forbidClick: true, teleport: el, + duration: 0, className: ns.b(), loadingType: 'spinner', overlayClass: ns.e('overlay'), -- Gitee From 225c476625f6b11819ff3223c1402c489eff41e1 Mon Sep 17 00:00:00 2001 From: Cano1997 <58964671+Cano1997@users.noreply.github.com> Date: Tue, 2 Sep 2025 15:04:47 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=96=87?= =?UTF-8?q?=E4=BB=B6=E4=B8=8A=E4=BC=A0=E6=98=AF=E5=90=A6=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB=E7=BC=96=E8=BE=91=E5=99=A8?= =?UTF-8?q?=E5=8F=82=E6=95=B0showloading=EF=BC=8C=E9=98=B2=E6=AD=A2?= =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=A4=A7=E6=96=87=E4=BB=B6=E7=94=A8=E6=88=B7?= =?UTF-8?q?=E4=BD=93=E9=AA=8C=E5=B7=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../upload/ibiz-carousel/ibiz-carousel.tsx | 1 + .../ibiz-file-upload/ibiz-file-upload.tsx | 1 + .../ibiz-image-cropping.tsx | 1 + .../ibiz-image-select/ibiz-image-select.tsx | 1 + .../ibiz-image-upload/ibiz-image-upload.tsx | 1 + src/editor/upload/upload-editor.controller.ts | 18 +- src/editor/upload/use/use-ibiz-upload.ts | 307 ------------------ src/editor/upload/use/use-van-upload.ts | 8 +- 8 files changed, 27 insertions(+), 311 deletions(-) delete mode 100644 src/editor/upload/use/use-ibiz-upload.ts diff --git a/src/editor/upload/ibiz-carousel/ibiz-carousel.tsx b/src/editor/upload/ibiz-carousel/ibiz-carousel.tsx index 5b14186c7a..cd31454ce4 100644 --- a/src/editor/upload/ibiz-carousel/ibiz-carousel.tsx +++ b/src/editor/upload/ibiz-carousel/ibiz-carousel.tsx @@ -17,6 +17,7 @@ import { UploadEditorController } from '../upload-editor.controller'; * @editorparams {name:duration,parameterType:number,defaultvalue:500,description:动画时长，van-swipe组件的duration属性} * @editorparams {name:showIndicators,parameterType:boolean,defaultvalue:true,description:是否显示指示器，van-swipe组件的show-indicators属性} * @editorparams {name:touchable,parameterType:boolean,defaultvalue:true,description:是否可以通过手势滑动，van-swipe组件的touchable属性} + * @editorparams {name:showloading,parameterType:boolean,description:是否显示加载动画} * @ignoreprops autoFocus | overflowMode * @ignoreemits blur | focus | enter | change | infoTextChange */ diff --git a/src/editor/upload/ibiz-file-upload/ibiz-file-upload.tsx b/src/editor/upload/ibiz-file-upload/ibiz-file-upload.tsx index c8d2e0ccd6..9da5c52c9e 100644 --- a/src/editor/upload/ibiz-file-upload/ibiz-file-upload.tsx +++ b/src/editor/upload/ibiz-file-upload/ibiz-file-upload.tsx @@ -16,6 +16,7 @@ import { UploadEditorController } from '../upload-editor.controller'; * @editorparams {name:accept,parameterType:string,description:允许上传的文件类型，van-uploader组件的accept属性} * @editorparams {name:uploadParams,parameterType:IData,description:上传参数} * @editorparams {name:exportParams,parameterType:IData,description:下载参数} + * @editorparams {name:showloading,parameterType:boolean,description:是否显示加载动画} * @ignoreprops autoFocus | overflowMode * @ignoreemits blur | focus | enter | infoTextChange * diff --git a/src/editor/upload/ibiz-image-cropping/ibiz-image-cropping.tsx b/src/editor/upload/ibiz-image-cropping/ibiz-image-cropping.tsx index 46a4dfc4f3..e8c3fd6062 100644 --- a/src/editor/upload/ibiz-image-cropping/ibiz-image-cropping.tsx +++ b/src/editor/upload/ibiz-image-cropping/ibiz-image-cropping.tsx @@ -21,6 +21,7 @@ import { UploadEditorController } from '../upload-editor.controller'; * @editorparams {name:cropHeight,parameterType:number,description:裁剪高度} * @editorparams {name:uploadParams,parameterType:IData,description:上传参数} * @editorparams {name:exportParams,parameterType:IData,description:下载参数} + * @editorparams {name:showloading,parameterType:boolean,description:是否显示加载动画} * @ignoreprops autoFocus | overflowMode * @ignoreemits blur | focus | enter | infoTextChange */ diff --git a/src/editor/upload/ibiz-image-select/ibiz-image-select.tsx b/src/editor/upload/ibiz-image-select/ibiz-image-select.tsx index 6370361993..1cea230fae 100644 --- a/src/editor/upload/ibiz-image-select/ibiz-image-select.tsx +++ b/src/editor/upload/ibiz-image-select/ibiz-image-select.tsx @@ -17,6 +17,7 @@ import { useVanUpload } from '../use/use-van-upload'; * @editorparams {name:STOPPROPAGATION,parameterType:boolean,description:是否阻止默认点击} * @editorparams {name:uploadParams,parameterType:IData,description:上传参数} * @editorparams {name:exportParams,parameterType:IData,description:下载参数} + * @editorparams {name:showloading,parameterType:boolean,description:是否显示加载动画} * @ignoreprops autoFocus | overflowMode * @ignoreemits blur | focus | enter | infoTextChange */ diff --git a/src/editor/upload/ibiz-image-upload/ibiz-image-upload.tsx b/src/editor/upload/ibiz-image-upload/ibiz-image-upload.tsx index 69937481f8..c85996c0ff 100644 --- a/src/editor/upload/ibiz-image-upload/ibiz-image-upload.tsx +++ b/src/editor/upload/ibiz-image-upload/ibiz-image-upload.tsx @@ -19,6 +19,7 @@ import { UploadEditorController } from '../upload-editor.controller'; * @editorparams {name:STOPPROPAGATION,parameterType:boolean,description:是否阻止默认点击} * @editorparams {name:uploadParams,parameterType:IData,description:上传参数} * @editorparams {name:exportParams,parameterType:IData,description:下载参数} + * @editorparams {name:showloading,parameterType:boolean,description:是否显示加载动画} * @ignoreprops autoFocus | overflowMode * @ignoreemits blur | focus | enter | infoTextChange */ diff --git a/src/editor/upload/upload-editor.controller.ts b/src/editor/upload/upload-editor.controller.ts index 14b9911589..3d0ff4cf52 100644 --- a/src/editor/upload/upload-editor.controller.ts +++ b/src/editor/upload/upload-editor.controller.ts @@ -34,6 +34,11 @@ export class UploadEditorController extends EditorController { */ public exportParams?: IParams; + /** + * 显示加载动画 + */ + public showLoading: boolean = false; + /** * 文件类型 * @@ -106,8 +111,14 @@ export class UploadEditorController extends EditorController { this.multiple = false; } if (this.editorParams) { - const { isDrag, multiple, accept, uploadParams, exportParams } = - this.editorParams; + const { + isDrag, + multiple, + accept, + uploadParams, + exportParams, + showloading, + } = this.editorParams; if (isDrag) { this.isDrag = Boolean(isDrag); } @@ -117,6 +128,9 @@ export class UploadEditorController extends EditorController { if (accept) { this.accept = accept; } + if (showloading) { + this.showLoading = Boolean(showloading); + } if (uploadParams) { try { this.uploadParams = JSON.parse(uploadParams); diff --git a/src/editor/upload/use/use-ibiz-upload.ts b/src/editor/upload/use/use-ibiz-upload.ts deleted file mode 100644 index 66abbfdff4..0000000000 --- a/src/editor/upload/use/use-ibiz-upload.ts +++ /dev/null @@ -1,307 +0,0 @@ -/* eslint-disable no-param-reassign */ -import { - HttpResponse, - isImage, - IUploadFile, - uploadFile, -} from '@ibiz-template/core'; -import { Ref, ref, watch } from 'vue'; -import { UploadEditorController } from '../upload-editor.controller'; - -export type FileInfo = { - name: string; - id: string; - status?: 'uploading' | 'finished' | 'fail' | 'cancel'; - percentage?: number; - url?: string; - /** - * 文件名（不带后缀） - */ - fileName?: string; - /** - * 文件类型（拓展名） - */ - fileExt?: string; - /** - * 是否是图片 - */ - isImage?: boolean; -}; - -/** - * 格式化文件信息 - * - * @author lxm - * @date 2022-11-18 15:11:38 - * @param {FileInfo} file - */ -export function formatFileInfo(file: FileInfo, downloadUrl: string): FileInfo { - file.url = downloadUrl.replace('%fileId%', file.id!); - if (!file.status) { - // 不存在时为回填回来的数据默认给他finished - file.status = 'finished'; - } - if (!file.fileName) { - const index = file.name.lastIndexOf('.'); - file.fileName = file.name.substring(0, index); - file.fileExt = file.name.substring(index); - file.isImage = isImage(file.name); - } - return file as FileInfo; -} - -/** - * 文件上传组件初始化，解析props并得到downloadUrl、uploadUrl、fileList - * - * @author lxm - * @date 2022-11-21 10:11:01 - * @export - * @param {{ - * data: Ref; - * value: Ref; - * controller: Ref; - * }} props - * @returns {*} - */ -export function useIBizUploadInit(props: { - data: Ref; - value: Ref; - controller: Ref; -}): { - downloadUrl: Ref; - uploadUrl: Ref; - valueList: Ref; -} { - // 上传文件路径 - const uploadUrl: Ref = ref(''); - - // 下载文件路径 - const downloadUrl: Ref = ref(''); - - // 文件列表 - const valueList: Ref = ref([]); - - // data响应式变更基础路径 - watch( - props.data, - newVal => { - if (newVal) { - const urls = ibiz.util.file.calcFileUpDownUrl( - props.controller.value.context, - props.controller.value.params, - newVal, - props.controller.value.editorParams, - ); - uploadUrl.value = urls.uploadUrl; - downloadUrl.value = urls.downloadUrl; - } - }, - { immediate: true, deep: true }, - ); - - // 值响应式变更 - watch( - props.value, - newVal => { - valueList.value = !newVal ? [] : JSON.parse(newVal); - if (valueList.value.length && downloadUrl.value) { - valueList.value.forEach((file: FileInfo) => { - formatFileInfo(file, downloadUrl.value); - }); - } - }, - { immediate: true }, - ); - - watch( - downloadUrl, - newVal => { - // 下载基础路径变更时全部url重算 - if (newVal && valueList.value.length) { - valueList.value.forEach((file: FileInfo) => { - formatFileInfo(file, newVal); - }); - } - }, - { immediate: true }, - ); - - return { - downloadUrl, - uploadUrl, - valueList, - }; -} - -/** - * 使用文件上传功能，传递外部已存在的文件集合，上传下载基础路径 - * - * @author lxm - * @date 2022-11-21 10:11:01 - * @export - * @param {{ - * downloadUrl: Ref; - * uploadUrl: Ref; - * value: Ref< - * { - * name: string; - * id: string; - * url?: string; - * }[] - * >; - * }} opts - * @returns {*} - */ -export function useIBizUpload(opts: { - downloadUrl: Ref; - uploadUrl: Ref; - value: Ref< - { - name: string; - id: string; - url?: string; - }[] - >; - multiple?: boolean; - accept?: string; -}): { - selectFile: () => void; - fileList: Ref< - { - name: string; - id: string; - status?: 'uploading' | 'finished' | 'fail' | 'cancel' | undefined; - percentage?: number | undefined; - url?: string | undefined; - fileName?: string | undefined; - fileExt?: string | undefined; - isImage?: boolean | undefined; - }[] - >; - uploadState: Ref<'loading' | 'undo' | 'done'>; -} { - const uploadState = ref<'undo' | 'loading' | 'done'>('undo'); - const fileList = ref([]); - const { downloadUrl, value, uploadUrl } = opts; - - // 初始化fileList - watch( - value, - newVal => { - if (newVal.length > 0) { - fileList.value = []; - newVal.forEach(item => { - fileList.value.push(formatFileInfo(item, downloadUrl.value)); - }); - } - }, - { - immediate: true, - deep: true, - }, - ); - - // 开始上传后记录文件 - const beforeUpload = (fileData: File[], files: IUploadFile[]) => { - files.forEach(file => { - fileList.value.push({ - name: file.name, - status: file.status, - percentage: file.percentage, - id: file.uid, - url: '', - }); - }); - return true; - }; - - /** - * 更新文件里的上传进度 - * - * @author lxm - * @date 2022-11-18 15:11:09 - * @param {IUploadFile[]} files - */ - const onProgress = (files: IUploadFile[]) => { - files.forEach(file => { - fileList.value.find(item => { - if (item.id === file.uid) { - item.percentage = file.percentage; - return true; - } - return false; - }); - }); - }; - - const onSuccess = (resultFiles: IUploadFile[], res: HttpResponse) => { - // 一次上传成功这一批的文件都成功 - resultFiles.forEach(file => { - fileList.value.find(item => { - if (item.id === file.uid) { - // 把用后台数据替换当前信息，并格式化信息 - item.status = file.status; - item.id = res.data.fileid; - item.name = res.data.filename; - formatFileInfo(item, downloadUrl.value); - return true; - } - return false; - }); - }); - }; - - const onError = (resultFiles: IUploadFile[], error: unknown) => { - // 一次报错这一批的文件都上传失败 - resultFiles.forEach(file => { - fileList.value.find(item => { - if (item.id === file.uid) { - // 更新错误状态 - item.status = file.status; - return true; - } - return false; - }); - }); - // 处理报错信息 - console.error(error); - }; - - const onFinish = (_resultFiles: IUploadFile[]) => { - fileList.value = fileList.value.filter(file => file.status === 'finished'); - uploadState.value = 'done'; - }; - - // 手动控制文件上传，绑定组件的upload - const selectFile = () => { - uploadFile({ - multiple: opts.multiple, - accept: opts.accept, - uploadUrl: uploadUrl.value, - beforeUpload, - progress: onProgress, - success: onSuccess, - error: onError, - finish: onFinish, - }); - }; - - return { - selectFile, - fileList, - uploadState, - }; -} - -export function openImagePreview(file: FileInfo): Promise { - return ibiz.overlay.modal( - 'ImagePreview', - { file }, - { - width: 'auto', - height: 'auto', - placement: 'center', - modalClass: 'ibiz-image-preview-modal', - }, - ); -} diff --git a/src/editor/upload/use/use-van-upload.ts b/src/editor/upload/use/use-van-upload.ts index 3fa1faf55a..253dd53d43 100644 --- a/src/editor/upload/use/use-van-upload.ts +++ b/src/editor/upload/use/use-van-upload.ts @@ -172,7 +172,6 @@ export function useVanUpload( }; const uploadFile = (file: IData) => { - console.log(file); // 创建一个空对象实例 const formData = new FormData(); // 调用append()方法添加数据 @@ -187,7 +186,6 @@ export function useVanUpload( }) .then(res => { if (res.status === 200) { - console.log(88, res); onSuccess(res.data); resolve(true); } else { @@ -203,6 +201,9 @@ export function useVanUpload( // 读取成功回调 const afterRead = async (file: IData | IData[]) => { + if (c.showLoading) { + c.ctrl.startLoading(); + } if (file.length && file.length > 0) { for (let i = 0; i < file.length; i++) { const fi = (file as IData[])[i]; @@ -212,6 +213,9 @@ export function useVanUpload( } else { await uploadFile(file); } + if (c.showLoading) { + c.ctrl.endLoading(); + } }; // 下载文件 -- Gitee From 128d0edf4d47fdb56a190a5f6fb98a4b1b64845e Mon Sep 17 00:00:00 2001 From: Cano1997 <58964671+Cano1997@users.noreply.github.com> Date: Tue, 2 Sep 2025 15:09:20 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=BA=A7=E8=81=94?= =?UTF-8?q?=E4=B8=8B=E6=8B=89=E5=9B=9E=E6=98=BE=E5=BC=82=E5=B8=B8=EF=BC=8C?= =?UTF-8?q?=E5=BD=93=E4=BB=A3=E7=A0=81=E8=A1=A8=E6=95=B0=E6=8D=AE=E8=BF=87?= =?UTF-8?q?=E5=A4=A7=E6=97=B6computed=E5=93=8D=E5=BA=94=E4=B8=A2=E5=A4=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 9 ++++++++ .../ibiz-cascader-dropdown.tsx | 21 +++++++++++++------ 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 61b8eec6d4..2bfd587f64 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,15 @@ ## [Unreleased] +### Added + +- 新增文件上传是否显示加载动画编辑器参数showloading，优化上传大文件用户体验 + +### Fixed + +- 修复视图loading指令弹框显示时长异常，调整默认显示2s为不关闭，而是由控制器关闭 +- 修复级联下拉回显异常，当代码表数据过大时computed响应丢失 + ## [0.7.41-alpha.11] - 2025-08-29 ### Added diff --git a/src/editor/dropdown-list/ibiz-cascader-dropdown/ibiz-cascader-dropdown.tsx b/src/editor/dropdown-list/ibiz-cascader-dropdown/ibiz-cascader-dropdown.tsx index 2b00ff32f7..1dc4e89136 100644 --- a/src/editor/dropdown-list/ibiz-cascader-dropdown/ibiz-cascader-dropdown.tsx +++ b/src/editor/dropdown-list/ibiz-cascader-dropdown/ibiz-cascader-dropdown.tsx @@ -1,4 +1,4 @@ -import { ref, Ref, defineComponent, computed } from 'vue'; +import { ref, Ref, defineComponent, watch } from 'vue'; import { getDropdownProps, getEditorEmits, @@ -29,6 +29,8 @@ export const IBizCascaderDropdown = defineComponent({ const treeData: Ref = ref([]); // 代码表map数据 const codeListMap = new Map(); + // 当前值 + const curValue = ref(''); // 选中值 const selectValue: Ref = ref(null); const show = ref(false); @@ -79,6 +81,10 @@ export const IBizCascaderDropdown = defineComponent({ // 存在父值属性时转换为树型数据，否则平铺 const { pvaluefield } = c.editorParams; treeData.value = transformTreeData(codeList, pvaluefield); + if (props.value) { + const item = codeListMap.get(props.value); + curValue.value = item?.text || ''; + } }; loadCodeList(); @@ -96,11 +102,14 @@ export const IBizCascaderDropdown = defineComponent({ emit('change', value); }; - // 当前值 - const curValue = computed(() => { - const item = codeListMap.get(props.value || ''); - return item?.text || ''; - }); + watch( + () => props.value, + newVal => { + const item = codeListMap.get(newVal || ''); + curValue.value = item?.text || ''; + }, + { immediate: true }, + ); const onBlur = () => { emit('blur'); -- Gitee