@ebiz/designer-components 0.0.56 → 0.0.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.56",
+  "version": "0.0.57",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/TdesignUpload.vue

@@ -1,48 +1,52 @@
 <template>
-    <t-upload :accept="accept" :action="internalAction" :allowUploadDuplicateFile="allowUploadDuplicateFile"
-        :autoUpload="autoUpload" :beforeUpload="handleBeforeUpload" :data="data" :disabled="disabled"
-        :draggable="draggable" :fileListDisplay="fileListDisplay" :files="internalFiles" :format="format"
-        :formatRequest="formatRequest" :headers="headers" :isBatchUpload="isBatchUpload" :max="max" :method="method"
-        :multiple="multiple" :name="name" :placeholder="placeholder"
-        :showUploadProgress="showUploadProgress" :sizeLimit="sizeLimit" :status="status" :theme="theme" :tips="tips"
-        :uploadAllFilesInOneRequest="uploadAllFilesInOneRequest" :uploadButton="uploadButton"
-        :useMockProgress="useMockProgress" :withCredentials="withCredentials" v-model="modelValue"
-        @change="handleChange" @click="handleClick" @drag="handleDrag" @drop="handleDrop" @fail="handleFail"
-        @preview="handlePreview" @progress="handleProgress" @remove="handleRemove" @select-change="handleSelectChange"
-        @success="handleSuccess" @validate="handleValidate">
-        <!-- 默认插槽 -->
-        <slot></slot>
-
-        <!-- 文件列表项插槽 -->
-        <template v-if="$slots.fileListDisplay" #fileListDisplay="slotProps">
-            <slot name="fileListDisplay" v-bind="slotProps"></slot>
-        </template>
-
-        <!-- 替换上传按钮插槽 -->
-        <template v-if="$slots.default" #default>
-            <slot name="default"></slot>
-        </template>
-
-        <!-- 单文件已上传内容插槽 -->
-        <template v-if="$slots.content" #content="slotProps">
-            <slot name="content" v-bind="slotProps"></slot>
-        </template>
-
-        <!-- 文件拖拽区域内容插槽 -->
-        <template v-if="$slots.dragContent" #dragContent>
-            <slot name="dragContent"></slot>
-        </template>
-
-        <!-- 上传按钮内容插槽 -->
-        <template v-if="$slots.trigger" #trigger>
-            <slot name="trigger"></slot>
-        </template>
-
-        <!-- 上传提示文本插槽 -->
-        <template v-if="$slots.tips" #tips>
-            <slot name="tips"></slot>
-        </template>
-    </t-upload>
+    <div>
+        <t-upload v-model="computedModelValue" :accept="accept" :action="internalAction"
+            :allowUploadDuplicateFile="allowUploadDuplicateFile" :autoUpload="autoUpload"
+            :beforeUpload="handleBeforeUpload" :files="computedModelValue" :data="data" :disabled="disabled"
+            :draggable="draggable" :fileListDisplay="fileListDisplay" :format="format" :formatRequest="formatRequest"
+            :headers="headers" :isBatchUpload="isBatchUpload" :max="max" :method="method" :multiple="multiple"
+            :name="name" :placeholder="placeholder" :showUploadProgress="showUploadProgress" :sizeLimit="sizeLimit"
+            :status="status" :theme="theme" :tips="tips" :uploadAllFilesInOneRequest="uploadAllFilesInOneRequest"
+            :uploadButton="uploadButton" :useMockProgress="useMockProgress" :withCredentials="withCredentials"
+            @change="handleChange" @click="handleClick" @drag="handleDrag" @drop="handleDrop" @fail="handleFail"
+            @preview="handlePreview" @progress="handleProgress" @remove="handleRemove"
+            @select-change="handleSelectChange" @success="handleSuccess" @validate="handleValidate">
+            <!-- 默认插槽 -->
+            <slot></slot>
+
+            <!-- 文件列表项插槽 -->
+            <template v-if="$slots.fileListDisplay" #fileListDisplay="slotProps">
+                <slot name="fileListDisplay" v-bind="slotProps"></slot>
+            </template>
+
+            <!-- 替换上传按钮插槽 -->
+            <template v-if="$slots.default" #default>
+                <slot name="default"></slot>
+            </template>
+
+            <!-- 单文件已上传内容插槽 -->
+            <template v-if="$slots.content" #content="slotProps">
+                <slot name="content" v-bind="slotProps"></slot>
+            </template>
+
+            <!-- 文件拖拽区域内容插槽 -->
+            <template v-if="$slots.dragContent" #dragContent>
+                <slot name="dragContent"></slot>
+            </template>
+
+            <!-- 上传按钮内容插槽 -->
+            <template v-if="$slots.trigger" #trigger>
+                <slot name="trigger"></slot>
+            </template>
+
+            <!-- 上传提示文本插槽 -->
+            <template v-if="$slots.tips" #tips>
+                <slot name="tips"></slot>
+            </template>
+        </t-upload>
+
+    </div>
+
 </template>
 
 <script>
@@ -54,72 +58,14 @@ export default {
 <script setup>
 import { computed, defineProps, defineEmits, ref, onMounted, watch } from 'vue';
 import { Upload as TUpload } from 'tdesign-vue-next';
-import dataService from '../apiService/simpleDataService';
 
 // 内部上传地址常量
 const INTERNAL_UPLOAD_URL = '/api/file/app/td-upload';
 
-// 内部维护的文件列表，代替直接使用props.files
-const internalFiles = ref([]);
-
-// 初始化内部文件列表
-const initializeFiles = () => {
-    // 如果提供了files，使用它初始化
-    if (props.files && Array.isArray(props.files)) {
-        internalFiles.value = [...props.files];
-    }
-};
-
-// 默认的格式化响应函数
-const defaultFormatResponse = (res) => {
-    console.log('Default formatResponse handling:', res);
-
-    // 处理不同的响应格式
-    if (res === null || res === undefined) {
-        return { url: '', error: '上传失败：未收到服务器响应' };
-    }
-
-    // 如果res已经是字符串（文件路径），直接使用
-    if (typeof res === 'string') {
-        return { url: res };
-    }
-
-    // 如果返回的就是服务器的原始响应 { code: 0, msg: '上传成功', data: '文件路径' }
-    // axios拦截器应该已经提取了data部分，但我们做个双重检查
-    if (res.code === 0 && res.data) {
-        return { url: typeof res.data === 'string' ? res.data : '' };
-    }
-
-    // 如果是自定义对象，可能已经处理过
-    if (res.url) {
-        return { url: res.url };
-    }
-
-    // 直接处理服务器响应的标准格式
-    if (typeof res === 'string') {
-        // 直接是文件路径字符串
-        return { url: res };
-    }
-
-    // 如果服务器直接响应了数据，没有包装
-    if (res && !res.code && !res.data && typeof res === 'object') {
-        // 尝试找到可能的URL字段
-        if (res.url || res.path || res.filePath || res.fileUrl) {
-            return { url: res.url || res.path || res.filePath || res.fileUrl };
-        }
-    }
-
-    // 处理其他可能的情况
-    console.warn('Unknown response format:', res);
-
-    // 无法识别的格式，返回空URL
-    return { url: '' };
-};
-
 const props = defineProps({
     // v-model值，已上传和待上传的文件列表
     modelValue: {
-        type: Array,
+        type: [Array, String],
         default: () => []
     },
     // 接受上传的文件类型，同input标签的accept属性
@@ -294,399 +240,112 @@ const emit = defineEmits([
 ]);
 
 // 当前上传进度
-const uploadProgress = ref(0);
-
-// 上传列表双向绑定
-const modelValue = computed({
+const computedModelValue = computed({
     get() {
-        // 优先返回内部文件列表，确保上传状态正确
-        if (internalFiles.value.length > 0) {
-            return internalFiles.value;
+        if (props.modelValue instanceof Array) {
+            return props.modelValue.map(file => {
+                return {
+                    url: file
+                }
+            });
+        }
+        if (props.modelValue && props.modelValue.length > 0) {
+            return [
+                {
+                    url: props.modelValue
+                }
+            ]
+        } else {
+            return []
         }
-        return props.modelValue;
     },
     set(value) {
-        // 同时更新内部文件列表和v-model
-        internalFiles.value = value;
-        emit('update:modelValue', value);
+        console.log('set value:', value);
+        const urls = value.map(file => file.url).filter(Boolean);
+        if (props.multiple) {
+            emit('update:modelValue', urls);
+        } else {
+            emit('update:modelValue', urls[0]);
+        }
     }
 });
 
-// 监听props.modelValue的变化，同步到internalFiles
-watch(
-    () => props.modelValue,
-    (newValue) => {
-        if (newValue && Array.isArray(newValue) && newValue.length > 0) {
-            console.log('External modelValue changed, updating internal files:', newValue);
-            // 过滤掉可能的空值
-            const validFiles = newValue.filter(file => file && file.name);
-            if (validFiles.length > 0) {
-                internalFiles.value = validFiles;
-            }
-        }
-    },
-    { deep: true }
-);
 
 // 内部上传地址，如果提供了action且未启用内部上传则使用action，否则使用内部默认地址
 const internalAction = computed(() => {
     return (props.action && !props.useInternalUpload) ? props.action : INTERNAL_UPLOAD_URL;
 });
 
-// 自定义上传方法，使用dataService进行上传
-const customRequestMethod = (options) => {
-    console.log('Upload options:', options);
-
-    try {
-        // 解构选项，获取需要的属性
-        const { raw, onProgress, onSuccess, onError, data, method, name } = options || {};
-
-        // 创建FormData
-        const formData = new FormData();
-
-        // 创建一个执行上传的函数
-        const executeUpload = (fileToUpload) => {
-            console.log('Uploading file:', fileToUpload.name, fileToUpload.size);
-            formData.append('file', fileToUpload);
-
-            // 添加额外数据
-            if (data) {
-                Object.keys(data).forEach(key => {
-                    formData.append(key, data[key]);
-                });
-            }
-
-            // 定义安全的进度回调
-            const safeProgressCallback = (progress) => {
-                uploadProgress.value = progress;
-                if (typeof onProgress === 'function') {
-                    onProgress({ percent: progress });
-                }
-            };
-
-            // 使用dataService上传文件
-            return dataService
-                .upload(INTERNAL_UPLOAD_URL, formData, safeProgressCallback)
-                .then(response => {
-                    console.log('Upload response:', response);
-
-                    // 在组件内部处理响应数据
-                    let formattedResponse;
-
-                    try {
-                        // 使用内部处理逻辑，不依赖props.formatResponse
-                        formattedResponse = defaultFormatResponse(response);
-                    } catch (error) {
-                        console.error('Error formatting response:', error);
-                        formattedResponse = { url: '', error: error.message };
-                    }
-
-                    // 确保格式化后的响应包含文件基本信息
-                    const fileObject = {
-                        ...formattedResponse,
-                        name: fileToUpload.name,
-                        size: fileToUpload.size,
-                        type: fileToUpload.type,
-                        status: 'success',
-                        raw: fileToUpload, // 保存原始文件对象
-                        lastModified: fileToUpload.lastModified
-                    };
-
-                    // 构建TDesign期望的成功响应对象
-                    const successResponse = {
-                        file: fileObject,        // 文件对象
-                        fileList: [fileObject],  // 文件列表(可能包含多个文件)
-                        response: {
-                            url: fileObject.url, // 必需的URL字段
-                            files: [fileObject], // 必需的files字段
-                            data: response       // 保留原始响应
-                        },
-                        e: { status: 'success' }, // 事件对象
-                        status: 'success'        // 必须的状态字段，只能是success或fail
-                    };
-
-                    console.log('Final formatted response:', successResponse);
-
-                    // 安全地调用成功回调
-                    if (typeof onSuccess === 'function') {
-                        onSuccess(successResponse);
-                    }
-                    return successResponse;
-                })
-                .catch(error => {
-                    console.error('Upload failed:', error);
-
-                    // 构建错误响应对象
-                    const failResponse = {
-                        error: error,
-                        status: 'fail',  // 必须的状态字段，值为fail
-                        e: { status: 'fail' }
-                    };
-
-                    // 安全地调用错误回调
-                    if (typeof onError === 'function') {
-                        onError(failResponse);
-                    }
-                    return Promise.reject(failResponse);
-                });
-        };
-
-        // 尝试获取真实的文件对象
-        // 1. 首先检查raw是否直接是File对象
-        if (raw instanceof File) {
-            console.log('Using raw as File directly');
-            return executeUpload(raw);
-        }
-
-        // 2. 直接从options本身获取信息创建文件
-        if (options && options.name && options.type && options.size) {
-            // 我们找到了文件信息，但没有实际内容
-            // 我们需要使用FileReader获取实际文件或创建一个伪文件
-            console.log('Creating file from options properties');
-
-            // 由于我们无法获取真实文件内容，创建一个伪文件
-            // 注意：这在实际上传时可能会失败，因为没有真实内容
-            const pseudoFileContent = new Blob([`Pseudo file content for ${options.name}`], { type: options.type });
-            const pseudoFile = new File([pseudoFileContent], options.name, {
-                type: options.type,
-                lastModified: options.lastModified || Date.now()
-            });
-
-            // 创建一个隐藏的文件输入，让用户重新选择文件
-            // 这是一个备选方案
-            const fileInput = document.createElement('input');
-            fileInput.type = 'file';
-            fileInput.style.display = 'none';
-            fileInput.accept = options.type;
-            document.body.appendChild(fileInput);
-
-            // 提示用户选择同一个文件
-            console.log('Please select the same file again');
-            alert(`上传出错：TDesign上传组件无法获取文件内容。请在出现的文件选择框中重新选择"${options.name}"文件。`);
-
-            return new Promise((resolve, reject) => {
-                fileInput.onchange = (e) => {
-                    const selectedFile = e.target.files[0];
-                    if (selectedFile) {
-                        console.log('User selected file:', selectedFile.name);
-                        document.body.removeChild(fileInput);
-                        resolve(executeUpload(selectedFile));
-                    } else {
-                        document.body.removeChild(fileInput);
-                        const failResponse = {
-                            error: new Error('No file selected'),
-                            status: 'fail',
-                            e: { status: 'fail' }
-                        };
-                        reject(failResponse);
-                    }
-                };
-
-                fileInput.onerror = (error) => {
-                    document.body.removeChild(fileInput);
-                    const failResponse = {
-                        error: error,
-                        status: 'fail',
-                        e: { status: 'fail' }
-                    };
-                    reject(failResponse);
-                };
-
-                // 触发文件选择
-                fileInput.click();
-            });
-        }
-
-        console.error('Cannot find valid file information', options);
-        if (typeof onError === 'function') {
-            const failResponse = {
-                error: new Error('No valid file information found'),
-                status: 'fail',
-                e: { status: 'fail' }
-            };
-            onError(failResponse);
-        }
-        return Promise.reject({
-            error: new Error('No valid file information found'),
-            status: 'fail',
-            e: { status: 'fail' }
-        });
-    } catch (err) {
-        console.error('Upload error in customRequestMethod:', err);
-        return Promise.reject({
-            error: err,
-            status: 'fail',
-            e: { status: 'fail' }
-        });
-    }
-};
-
 // 上传前钩子，如果设置了beforeUpload则先执行
 const handleBeforeUpload = (file, options) => {
-    if (props.beforeUpload) {
-        return props.beforeUpload(file, options);
-    }
-    return true;
+    console.log('handleBeforeUpload:', file, options);
+    emit('beforeUpload', file, options);
 };
 
-// 监听internalFiles的变化，记录调试信息
-watch(
-    internalFiles,
-    (newFiles) => {
-        console.log('Internal files changed:', newFiles);
-    },
-    { deep: true }
-);
-
 // 文件状态变化事件
 const handleChange = (value, context) => {
-    console.log('Upload change event:', value, context);
-
-    // 如果是上传成功，确保文件被添加到内部列表
-    if (context && context.file && context.file.status === 'success') {
-        const successFile = context.file;
-
-        // 检查是否已存在于内部文件列表
-        const fileExists = internalFiles.value.some(
-            file => file.name === successFile.name && file.size === successFile.size
-        );
-
-        if (!fileExists) {
-            console.log('Adding successful file from change event:', successFile);
-            internalFiles.value = [...internalFiles.value, successFile];
-
-            // 更新v-model和files属性
-            emit('update:modelValue', internalFiles.value);
-            emit('update:files', internalFiles.value);
-        }
-    }
-
+    console.log('handleChange:', value, context);
     emit('change', value, context);
 };
 
 // 点击事件
 const handleClick = (context) => {
+    console.log('handleClick:', context);
     emit('click', context);
 };
 
 // 拖拽事件
 const handleDrag = (context) => {
+    console.log('handleDrag:', context);
     emit('drag', context);
 };
 
 // 文件拖放事件
 const handleDrop = (context) => {
+    console.log('handleDrop:', context);
     emit('drop', context);
 };
 
 // 上传失败事件
 const handleFail = (options) => {
+    console.log('handleFail:', options);
     emit('fail', options);
 };
 
 // 点击预览事件
 const handlePreview = (options) => {
+    console.log('handlePreview:', options);
     emit('preview', options);
 };
 
 // 上传进度事件
 const handleProgress = (options) => {
+    console.log('handleProgress:', options);
     emit('progress', options);
 };
 
 // 移除文件事件
 const handleRemove = (context) => {
-    if (context && context.file) {
-        // 从内部文件列表中移除文件
-        const removedFile = context.file;
-
-        // 根据name和size过滤掉要删除的文件
-        internalFiles.value = internalFiles.value.filter(
-            file => !(file.name === removedFile.name && file.size === removedFile.size)
-        );
-
-        // 同时更新v-model绑定的值，保持一致性
-        emit('update:modelValue', internalFiles.value);
-
-        // 更新files属性，支持v-model:files双向绑定
-        emit('update:files', internalFiles.value);
-    }
-
-    // 发出原始移除事件
+    console.log('handleRemove:', context);
     emit('remove', context);
 };
 
 // 选择文件变化事件
 const handleSelectChange = (files, context) => {
+    console.log('handleSelectChange:', files, context);
     emit('select-change', files, context);
 };
 
 // 上传成功事件
 const handleSuccess = (context) => {
-    console.log('Upload success event triggered:', context);
-
-    // 将上传成功的文件添加到文件列表中
-    // 首先检查文件是否已经在列表中
-    if (context && context.file) {
-        // 获取有效的URL
-        let fileUrl = '';
-        if (context.file.url) {
-            fileUrl = context.file.url;
-        } else if (context.response && context.response.url) {
-            fileUrl = context.response.url;
-        } else if (context.response && context.response.data && typeof context.response.data === 'string') {
-            fileUrl = context.response.data;
-        }
-
-        const newFile = {
-            ...context.file,
-            url: fileUrl,  // 确保有URL
-            status: 'success',            // 设置状态为成功
-            response: context.response    // 保留响应
-        };
-
-        console.log('Adding file to internal files:', newFile);
-
-        // 创建新的文件列表副本，以便进行修改
-        const currentFiles = [...internalFiles.value];
-
-        // 检查文件是否已存在（基于name和size）
-        const fileExists = currentFiles.some(
-            file => file.name === newFile.name && file.size === newFile.size
-        );
-
-        // 如果文件不存在于列表中，则添加它
-        if (!fileExists) {
-            currentFiles.push(newFile);
-            // 更新内部文件列表
-            internalFiles.value = currentFiles;
-        } else {
-            // 如果文件已存在，更新其状态和URL
-            internalFiles.value = currentFiles.map(file => {
-                if (file.name === newFile.name && file.size === newFile.size) {
-                    return { ...file, ...newFile };
-                }
-                return file;
-            });
-        }
-
-        console.log('Updated internal files:', internalFiles.value);
-
-        // 同时更新v-model绑定的值，保持一致性
-        emit('update:modelValue', internalFiles.value);
-
-        // 更新files属性，支持v-model:files双向绑定
-        emit('update:files', internalFiles.value);
-    } else {
-        console.warn('Missing file in success context:', context);
-    }
-
+    console.log('handleSuccess:', context);
     // 发出原始成功事件
     emit('success', context);
 };
 
 // 校验事件
 const handleValidate = (context) => {
+    console.log('handleValidate:', context);
     emit('validate', context);
 };
 
@@ -709,23 +368,7 @@ const addUploadedFile = (file) => {
         lastModified: file.lastModified || new Date().getTime(),
         ...file
     };
-
-    // 检查文件是否已存在
-    const fileExists = internalFiles.value.some(
-        f => f.name === fileObject.name && f.url === fileObject.url
-    );
-
-    if (!fileExists) {
-        // 更新内部文件列表
-        internalFiles.value = [...internalFiles.value, fileObject];
-
-        // 同时更新v-model绑定的值，保持一致性
-        emit('update:modelValue', internalFiles.value);
-
-        // 更新files属性，支持v-model:files双向绑定
-        emit('update:files', internalFiles.value);
-        return true;
-    }
+    computedModelValue.value = [...computedModelValue.value, fileObject];
 
     return false;
 };
@@ -733,23 +376,12 @@ const addUploadedFile = (file) => {
 // 导出组件方法供外部使用
 defineExpose({
     addUploadedFile,
-    // 导出内部文件列表，允许外部读取
-    getFiles: () => internalFiles.value
 });
 
 // 组件挂载时初始化文件列表
 onMounted(() => {
-    initializeFiles();
 });
 
-// 监听files的变化，更新内部文件列表
-watch(
-    () => props.files,
-    () => {
-        initializeFiles();
-    },
-    { deep: true }
-);
 </script>
 
 <style lang="less" scoped>