@ebiz/designer-components 0.0.60 → 0.0.62

package/src/components/TdesignUpload.vue

@@ -1,389 +1,393 @@
-<template>
-    <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>
-export default {
-    name: "EbizUpload"
-}
-</script>
-
-<script setup>
-import { computed, defineProps, defineEmits, ref, onMounted, watch } from 'vue';
-import { Upload as TUpload } from 'tdesign-vue-next';
-
-// 内部上传地址常量
-const INTERNAL_UPLOAD_URL = '/api/file/app/td-upload';
-
-const props = defineProps({
-    // v-model值，已上传和待上传的文件列表
-    modelValue: {
-        type: [Array, String],
-        default: () => []
-    },
-    // 接受上传的文件类型，同input标签的accept属性
-    accept: {
-        type: String,
-        default: undefined
-    },
-    // 上传的接口地址，可选，如不提供则使用内部dataService上传
-    action: {
-        type: String,
-        default: ''
-    },
-    // 是否允许重复上传相同名称的文件
-    allowUploadDuplicateFile: {
-        type: Boolean,
-        default: false
-    },
-    // 是否在选择文件后自动上传
-    autoUpload: {
-        type: Boolean,
-        default: true
-    },
-    // 上传文件之前的钩子，返回值决定是否上传
-    beforeUpload: {
-        type: Function,
-        default: undefined
-    },
-    // 上传请求时附带的自定义数据
-    data: {
-        type: Object,
-        default: () => ({})
-    },
-    // 是否禁用
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    // 是否启用拖拽上传
-    draggable: {
-        type: Boolean,
-        default: false
-    },
-    // 文件列表的展示方式
-    fileListDisplay: {
-        type: Function,
-        default: undefined
-    },
-    // 已上传的文件列表，用于初始化内部文件列表
-    files: {
-        type: Array,
-        default: () => []
-    },
-    // 文件上传前转换文件的函数
-    format: {
-        type: Function,
-        default: undefined
-    },
-    // 用于格式化上传请求，可以处理请求参数等
-    formatRequest: {
-        type: Function,
-        default: undefined
-    },
-    // 上传请求的请求头
-    headers: {
-        type: Object,
-        default: () => ({})
-    },
-    // 是否批量上传
-    isBatchUpload: {
-        type: Boolean,
-        default: false
-    },
-    // 用于控制文件上传数量
-    max: {
-        type: Number,
-        default: 0
-    },
-    // 上传请求的HTTP方法
-    method: {
-        type: String,
-        default: 'POST',
-        validator: (val) => ['POST', 'GET', 'PUT', 'OPTIONS', 'PATCH', 'post', 'get', 'put', 'options', 'patch'].includes(val)
-    },
-    // 是否支持多文件上传
-    multiple: {
-        type: Boolean,
-        default: false
-    },
-    // 上传字段名
-    name: {
-        type: String,
-        default: 'file'
-    },
-    // 占位符
-    placeholder: {
-        type: String,
-        default: undefined
-    },
-    // 自定义上传方法
-    requestMethod: {
-        type: Function,
-        default: undefined
-    },
-    // 是否显示上传进度
-    showUploadProgress: {
-        type: Boolean,
-        default: true
-    },
-    // 文件大小限制，单位：KB
-    sizeLimit: {
-        type: [Number, Object],
-        default: undefined
-    },
-    // 上传状态
-    status: {
-        type: String,
-        default: undefined,
-        validator: (val) => ['default', 'success', 'warning', 'error'].includes(val)
-    },
-    // 上传组件风格
-    theme: {
-        type: String,
-        default: 'file',
-        validator: (val) => ['custom', 'file', 'file-input', 'file-flow', 'image', 'image-flow'].includes(val)
-    },
-    // 上传提示文本
-    tips: {
-        type: String,
-        default: ''
-    },
-    // 是否在同一个请求中上传多个文件
-    uploadAllFilesInOneRequest: {
-        type: Boolean,
-        default: false
-    },
-    // 上传按钮属性
-    uploadButton: {
-        type: Object,
-        default: () => ({})
-    },
-    // 是否使用模拟的上传进度
-    useMockProgress: {
-        type: Boolean,
-        default: true
-    },
-    // 上传请求时是否携带cookies
-    withCredentials: {
-        type: Boolean,
-        default: false
-    },
-    // 是否使用内部上传服务，如果为true则忽略action参数
-    useInternalUpload: {
-        type: Boolean,
-        default: false
-    }
-});
-
-const emit = defineEmits([
-    'update:modelValue',
-    'change',
-    'click',
-    'drag',
-    'drop',
-    'fail',
-    'preview',
-    'progress',
-    'remove',
-    'select-change',
-    'success',
-    'validate',
-    'update:files'
-]);
-
-// 当前上传进度
-const computedModelValue = computed({
-    get() {
-        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 []
-        }
-    },
-    set(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]);
-        }
-    }
-});
-
-
-// 内部上传地址，如果提供了action且未启用内部上传则使用action，否则使用内部默认地址
-const internalAction = computed(() => {
-    return (props.action && !props.useInternalUpload) ? props.action : INTERNAL_UPLOAD_URL;
-});
-
-// 上传前钩子，如果设置了beforeUpload则先执行
-const handleBeforeUpload = (file, options) => {
-    console.log('handleBeforeUpload:', file, options);
-    emit('beforeUpload', file, options);
-};
-
-// 文件状态变化事件
-const handleChange = (value, context) => {
-    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) => {
-    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('handleSuccess:', context);
-    // 发出原始成功事件
-    emit('success', context);
-};
-
-// 校验事件
-const handleValidate = (context) => {
-    console.log('handleValidate:', context);
-    emit('validate', context);
-};
-
-// 手动添加已上传的文件到文件列表
-const addUploadedFile = (file) => {
-    if (!file || !file.name || !file.url) {
-        console.error('Invalid file object. File must contain at least name and url properties.');
-        return false;
-    }
-
-    // 构建完整的文件对象
-    const fileObject = {
-        name: file.name,
-        url: file.url,
-        size: file.size || 0,
-        type: file.type || '',
-        status: 'success',
-        // 如果提供了原始文件对象，则使用它
-        raw: file.raw || null,
-        lastModified: file.lastModified || new Date().getTime(),
-        ...file
-    };
-    computedModelValue.value = [...computedModelValue.value, fileObject];
-
-    return false;
-};
-
-// 导出组件方法供外部使用
-defineExpose({
-    addUploadedFile,
-});
-
-// 组件挂载时初始化文件列表
-onMounted(() => {
-});
-
-</script>
-
-<style lang="less" scoped>
-/* 自定义样式 */
+<template>
+    <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.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>
+export default {
+    name: "EbizUpload"
+}
+</script>
+
+<script setup>
+import { computed, defineProps, defineEmits, ref, onMounted, watch } from 'vue';
+import { Upload as TUpload } from 'tdesign-vue-next';
+
+// 内部上传地址常量
+const INTERNAL_UPLOAD_URL = '/api/file/app/td-upload';
+
+const props = defineProps({
+    // v-model值，已上传和待上传的文件列表
+    modelValue: {
+        type: [Array, String],
+        default: () => []
+    },
+    // 接受上传的文件类型，同input标签的accept属性
+    accept: {
+        type: String,
+        default: undefined
+    },
+    // 上传的接口地址，可选，如不提供则使用内部dataService上传
+    action: {
+        type: String,
+        default: ''
+    },
+    // 是否允许重复上传相同名称的文件
+    allowUploadDuplicateFile: {
+        type: Boolean,
+        default: false
+    },
+    // 是否在选择文件后自动上传
+    autoUpload: {
+        type: Boolean,
+        default: true
+    },
+    // 上传文件之前的钩子，返回值决定是否上传
+    beforeUpload: {
+        type: Function,
+        default: undefined
+    },
+    // 上传请求时附带的自定义数据
+    data: {
+        type: Object,
+        default: () => ({})
+    },
+    // 是否禁用
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // 是否启用拖拽上传
+    draggable: {
+        type: Boolean,
+        default: false
+    },
+    // 文件列表的展示方式
+    fileListDisplay: {
+        type: Function,
+        default: undefined
+    },
+    // 已上传的文件列表，用于初始化内部文件列表
+    files: {
+        type: Array,
+        default: () => []
+    },
+    // 文件上传前转换文件的函数
+    format: {
+        type: Function,
+        default: undefined
+    },
+    // 用于格式化上传请求，可以处理请求参数等
+    formatRequest: {
+        type: Function,
+        default: undefined
+    },
+    // 上传请求的请求头
+    headers: {
+        type: Object,
+        default: () => ({})
+    },
+    // 是否批量上传
+    isBatchUpload: {
+        type: Boolean,
+        default: false
+    },
+    // 用于控制文件上传数量
+    max: {
+        type: Number,
+        default: 0
+    },
+    // 上传请求的HTTP方法
+    method: {
+        type: String,
+        default: 'POST',
+        validator: (val) => ['POST', 'GET', 'PUT', 'OPTIONS', 'PATCH', 'post', 'get', 'put', 'options', 'patch'].includes(val)
+    },
+    // 是否支持多文件上传
+    multiple: {
+        type: Boolean,
+        default: false
+    },
+    // 上传字段名
+    name: {
+        type: String,
+        default: 'file'
+    },
+    // 占位符
+    placeholder: {
+        type: String,
+        default: undefined
+    },
+    // 自定义上传方法
+    requestMethod: {
+        type: Function,
+        default: undefined
+    },
+    // 是否显示上传进度
+    showUploadProgress: {
+        type: Boolean,
+        default: true
+    },
+    // 文件大小限制，单位：KB
+    sizeLimit: {
+        type: [Number, Object],
+        default: undefined
+    },
+    // 上传状态
+    status: {
+        type: String,
+        default: undefined,
+        validator: (val) => ['default', 'success', 'warning', 'error'].includes(val)
+    },
+    // 上传组件风格
+    theme: {
+        type: String,
+        default: 'file',
+        validator: (val) => ['custom', 'file', 'file-input', 'file-flow', 'image', 'image-flow'].includes(val)
+    },
+    // 上传提示文本
+    tips: {
+        type: String,
+        default: ''
+    },
+    // 是否在同一个请求中上传多个文件
+    uploadAllFilesInOneRequest: {
+        type: Boolean,
+        default: false
+    },
+    // 上传按钮属性
+    uploadButton: {
+        type: Object,
+        default: () => ({})
+    },
+    // 是否使用模拟的上传进度
+    useMockProgress: {
+        type: Boolean,
+        default: true
+    },
+    // 上传请求时是否携带cookies
+    withCredentials: {
+        type: Boolean,
+        default: false
+    },
+    // 是否使用内部上传服务，如果为true则忽略action参数
+    useInternalUpload: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits([
+    'update:modelValue',
+    'change',
+    'click',
+    'drag',
+    'drop',
+    'fail',
+    'preview',
+    'progress',
+    'remove',
+    'select-change',
+    'success',
+    'validate',
+    'update:files'
+]);
+
+// 当前上传进度
+const computedModelValue = computed({
+    get() {
+        if (props.modelValue instanceof Array) {
+            return props.modelValue.map(file => {
+
+                // 从文件路径获取文件名
+                const fileName = file.split('/').pop();
+                return {
+                    name: fileName,
+                    url: file
+                }
+            });
+        }
+        if (props.modelValue && props.modelValue.length > 0) {
+            const fileName = props.modelValue.split('/').pop();
+
+            return [
+                {
+                    name: fileName,
+                    url: props.modelValue
+                }
+            ]
+        } else {
+            return []
+        }
+    },
+    set(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]);
+        }
+    }
+});
+
+
+// 内部上传地址，如果提供了action且未启用内部上传则使用action，否则使用内部默认地址
+const internalAction = computed(() => {
+    return (props.action && !props.useInternalUpload) ? props.action : INTERNAL_UPLOAD_URL;
+});
+
+// 上传前钩子，如果设置了beforeUpload则先执行
+const handleBeforeUpload = (file, options) => {
+    console.log('handleBeforeUpload:', file, options);
+    emit('beforeUpload', file, options);
+};
+
+// 文件状态变化事件
+const handleChange = (value, context) => {
+    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) => {
+    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('handleSuccess:', context);
+    // 发出原始成功事件
+    emit('success', context);
+};
+
+// 校验事件
+const handleValidate = (context) => {
+    console.log('handleValidate:', context);
+    emit('validate', context);
+};
+
+// 手动添加已上传的文件到文件列表
+const addUploadedFile = (file) => {
+    if (!file || !file.name || !file.url) {
+        console.error('Invalid file object. File must contain at least name and url properties.');
+        return false;
+    }
+
+    // 构建完整的文件对象
+    const fileObject = {
+        name: file.name,
+        url: file.url,
+        size: file.size || 0,
+        type: file.type || '',
+        status: 'success',
+        // 如果提供了原始文件对象，则使用它
+        raw: file.raw || null,
+        lastModified: file.lastModified || new Date().getTime(),
+        ...file
+    };
+    computedModelValue.value = [...computedModelValue.value, fileObject];
+
+    return false;
+};
+
+// 导出组件方法供外部使用
+defineExpose({
+    addUploadedFile,
+});
+
+// 组件挂载时初始化文件列表
+onMounted(() => {
+});
+
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
 </style>