@ebiz/designer-components 0.0.18-beta.6 → 0.0.18-beta.8

package/src/components/TdesignUpload.vue

@@ -1,47 +1,16 @@
 <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"
+    <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"
         :requestMethod="useInternalUpload ? customRequestMethod : requestMethod"
-        :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"
-    >
+        :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>
 
@@ -86,7 +55,7 @@ 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';
+import dataServiceAppData from '../apiService/simpleDataServiceAppData';
 
 // 内部上传地址常量
 const INTERNAL_UPLOAD_URL = '/file/upload';
@@ -105,34 +74,34 @@ const initializeFiles = () => {
 // 默认的格式化响应函数
 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字段
@@ -140,10 +109,10 @@ const defaultFormatResponse = (res) => {
             return { url: res.url || res.path || res.filePath || res.fileUrl };
         }
     }
-    
+
     // 处理其他可能的情况
     console.warn('Unknown response format:', res);
-    
+
     // 无法识别的格式，返回空URL
     return { url: '' };
 };
@@ -368,19 +337,19 @@ const internalAction = computed(() => {
 // 自定义上传方法，使用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 => {
@@ -397,14 +366,14 @@ const customRequestMethod = (options) => {
             };
 
             // 使用dataService上传文件
-            return dataService
+            return dataServiceAppData
                 .upload(INTERNAL_UPLOAD_URL, formData, safeProgressCallback)
                 .then(response => {
                     console.log('Upload response:', response);
-                    
+
                     // 在组件内部处理响应数据
                     let formattedResponse;
-                    
+
                     try {
                         // 使用内部处理逻辑，不依赖props.formatResponse
                         formattedResponse = defaultFormatResponse(response);
@@ -412,7 +381,7 @@ const customRequestMethod = (options) => {
                         console.error('Error formatting response:', error);
                         formattedResponse = { url: '', error: error.message };
                     }
-                    
+
                     // 确保格式化后的响应包含文件基本信息
                     const fileObject = {
                         ...formattedResponse,
@@ -423,7 +392,7 @@ const customRequestMethod = (options) => {
                         raw: fileToUpload, // 保存原始文件对象
                         lastModified: fileToUpload.lastModified
                     };
-                    
+
                     // 构建TDesign期望的成功响应对象
                     const successResponse = {
                         file: fileObject,        // 文件对象
@@ -436,9 +405,9 @@ const customRequestMethod = (options) => {
                         e: { status: 'success' }, // 事件对象
                         status: 'success'        // 必须的状态字段，只能是success或fail
                     };
-                    
+
                     console.log('Final formatted response:', successResponse);
-                    
+
                     // 安全地调用成功回调
                     if (typeof onSuccess === 'function') {
                         onSuccess(successResponse);
@@ -447,14 +416,14 @@ const customRequestMethod = (options) => {
                 })
                 .catch(error => {
                     console.error('Upload failed:', error);
-                    
+
                     // 构建错误响应对象
                     const failResponse = {
                         error: error,
                         status: 'fail',  // 必须的状态字段，值为fail
                         e: { status: 'fail' }
                     };
-                    
+
                     // 安全地调用错误回调
                     if (typeof onError === 'function') {
                         onError(failResponse);
@@ -462,20 +431,20 @@ const customRequestMethod = (options) => {
                     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 });
@@ -483,7 +452,7 @@ const customRequestMethod = (options) => {
                 type: options.type,
                 lastModified: options.lastModified || Date.now()
             });
-            
+
             // 创建一个隐藏的文件输入，让用户重新选择文件
             // 这是一个备选方案
             const fileInput = document.createElement('input');
@@ -491,11 +460,11 @@ const customRequestMethod = (options) => {
             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];
@@ -513,7 +482,7 @@ const customRequestMethod = (options) => {
                         reject(failResponse);
                     }
                 };
-                
+
                 fileInput.onerror = (error) => {
                     document.body.removeChild(fileInput);
                     const failResponse = {
@@ -523,12 +492,12 @@ const customRequestMethod = (options) => {
                     };
                     reject(failResponse);
                 };
-                
+
                 // 触发文件选择
                 fileInput.click();
             });
         }
-        
+
         console.error('Cannot find valid file information', options);
         if (typeof onError === 'function') {
             const failResponse = {
@@ -573,26 +542,26 @@ watch(
 // 文件状态变化事件
 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);
         }
     }
-    
+
     emit('change', value, context);
 };
 
@@ -631,19 +600,19 @@ 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);
     }
-    
+
     // 发出原始移除事件
     emit('remove', context);
 };
@@ -656,7 +625,7 @@ const handleSelectChange = (files, context) => {
 // 上传成功事件
 const handleSuccess = (context) => {
     console.log('Upload success event triggered:', context);
-    
+
     // 将上传成功的文件添加到文件列表中
     // 首先检查文件是否已经在列表中
     if (context && context.file) {
@@ -669,24 +638,24 @@ const handleSuccess = (context) => {
         } 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);
@@ -701,18 +670,18 @@ const handleSuccess = (context) => {
                 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);
     }
-    
+
     // 发出原始成功事件
     emit('success', context);
 };
@@ -728,7 +697,7 @@ const addUploadedFile = (file) => {
         console.error('Invalid file object. File must contain at least name and url properties.');
         return false;
     }
-    
+
     // 构建完整的文件对象
     const fileObject = {
         name: file.name,
@@ -741,24 +710,24 @@ 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;
     }
-    
+
     return false;
 };
 
@@ -786,4 +755,4 @@ watch(
 
 <style lang="less" scoped>
 /* 自定义样式 */
-</style> 
+</style>

package/src/index.js

@@ -1,64 +1,66 @@
-import MyComponent from "./components/MyComponent.vue";
-import MyTable from "./components/Table.vue";
-import EbizFormContainer from "./components/Form.vue";
-import EbizButton from "./components/Button.vue";
-import EbizTdesignButton from "./components/TdesignButton.vue";
-import EbizTdesignIcon from "./components/TdesignIcon.vue";
-import EbizTdesignInput from "./components/TdesignInput.vue";
-import EbizTdesignSelect from "./components/TdesignSelect.vue";
-import EbizTdesignForm from "./components/TdesignForm.vue";
-import EbizTdesignFormItem from "./components/TdesignFormItem.vue";
-import EbizTdesignDatePicker from "./components/TdesignDatePicker.vue";
-import EbizTdesignCard from "./components/TdesignCard.vue";
-import EbizTdesignImage from "./components/TdesignImage.vue";
-import EbizTdesignImageViewer from "./components/TdesignImageViewer.vue";
-import EbizDataContainer from "./components/DataContainer.vue";
-import EbizTitle from "./components/EbizTitle.vue";
-import EbizDivider from "./components/EbizDivider.vue";
-import EbizStatsCard from "./components/EbizStatsCard.vue";
-import EbizOkrTree from "./components/EbizOkrTree.vue";
-import EbizRemoteSelect from "./components/EbizRemoteSelect.vue";
-import EbizMindmap from "./components/EbizMindmap/index.vue";
-import EbizRouteBreadcrumb from "./components/EbizRouteBreadcrumb.vue";
-import EbizFileUpload from "./components/EbizFileUpload.vue";
-import EbizTabHeader from "./components/EbizTabHeader.vue";
-import TdesignCalendar from "./components/TdesignCalendar/index.vue";
-import TdesignCollapse from "./components/TdesignCollapse.vue";
-import TdesignCollapsePanel from "./components/TdesignCollapsePanel.vue";
-import EbizTag from "./components/TdesignTag.vue";
-import EbizSwiper from "./components/EbizSwiper.vue";
-import EbizSwiperItem from "./components/EbizSwiperItem.vue";
-import EbizSpace from "./components/EbizSpace.vue";
-import EbizPagination from "./components/EbizPagination.vue";
-import EbizCheckbox from "./components/EbizCheckbox.vue";
-import EbizCheckboxGroup from "./components/EbizCheckboxGroup.vue";
-import EbizRadio from "./components/EbizRadio.vue";
-import EbizRadioGroup from "./components/EbizRadioGroup.vue";
-import EbizSwitch from "./components/EbizSwitch.vue";
-import EbizTextarea from "./components/TdesignTextarea.vue";
-import EbizUpload from "./components/TdesignUpload.vue";
-import EbizGrid from "./components/TdesignGrid.vue";
-import EbizCol from "./components/TdesignCol.vue";
-import EbizTabs from "./components/EbizTabs.vue";
-import EbizTabPanel from "./components/EbizTabPanel.vue";
-import EbizStatistic from "./components/EbizStatistic.vue";
-import EbizWatermark from "./components/TdesignWatermark.vue";
-import EbizAvatar from "./components/EbizAvatar.vue";
-import EbizEmployeeInfo from "./components/EbizEmployeeInfo.vue";
-import EbizAlert from "./components/TdesignAlert.vue";
-import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
+import MyComponent from './components/MyComponent.vue'
+import MyTable from './components/Table.vue'
+import EbizFormContainer from './components/Form.vue'
+import EbizButton from './components/Button.vue'
+import EbizTdesignButton from './components/TdesignButton.vue'
+import EbizTdesignIcon from './components/TdesignIcon.vue'
+import EbizTdesignInput from './components/TdesignInput.vue'
+import EbizTdesignSelect from './components/TdesignSelect.vue'
+import EbizTdesignForm from './components/TdesignForm.vue'
+import EbizTdesignFormItem from './components/TdesignFormItem.vue'
+import EbizTdesignDatePicker from './components/TdesignDatePicker.vue'
+import EbizTdesignCard from './components/TdesignCard.vue'
+import EbizTdesignImage from './components/TdesignImage.vue'
+import EbizTdesignImageViewer from './components/TdesignImageViewer.vue'
+import EbizDataContainer from './components/DataContainer.vue'
+import EbizTitle from './components/EbizTitle.vue'
+import EbizDivider from './components/EbizDivider.vue'
+import EbizStatsCard from './components/EbizStatsCard.vue'
+import EbizOkrTree from './components/EbizOkrTree.vue'
+import EbizRemoteSelect from './components/EbizRemoteSelect.vue'
+import EbizMindmap from './components/EbizMindmap/index.vue'
+import EbizRouteBreadcrumb from './components/EbizRouteBreadcrumb.vue'
+import EbizFileUpload from './components/EbizFileUpload.vue'
+import EbizTabHeader from './components/EbizTabHeader.vue'
+import TdesignCalendar from './components/TdesignCalendar/index.vue'
+import TdesignCollapse from './components/TdesignCollapse.vue'
+import TdesignCollapsePanel from './components/TdesignCollapsePanel.vue'
+import EbizTag from './components/TdesignTag.vue'
+import EbizSwiper from './components/EbizSwiper.vue'
+import EbizSwiperItem from './components/EbizSwiperItem.vue'
+import EbizSpace from './components/EbizSpace.vue'
+import EbizPagination from './components/EbizPagination.vue'
+import EbizCheckbox from './components/EbizCheckbox.vue'
+import EbizCheckboxGroup from './components/EbizCheckboxGroup.vue'
+import EbizRadio from './components/EbizRadio.vue'
+import EbizRadioGroup from './components/EbizRadioGroup.vue'
+import EbizSwitch from './components/EbizSwitch.vue'
+import EbizTextarea from './components/TdesignTextarea.vue'
+import EbizUpload from './components/TdesignUpload.vue'
+import EbizGrid from './components/TdesignGrid.vue'
+import EbizCol from './components/TdesignCol.vue'
+import EbizTabs from './components/EbizTabs.vue'
+import EbizTabPanel from './components/EbizTabPanel.vue'
+import EbizStatistic from './components/EbizStatistic.vue'
+import EbizWatermark from './components/TdesignWatermark.vue'
+import EbizAvatar from './components/EbizAvatar.vue'
+import EbizEmployeeInfo from './components/EbizEmployeeInfo.vue'
+import EbizAlert from './components/TdesignAlert.vue'
+import EbizDialog from './components/TdesignDialog.vue'
+import { MessagePlugin as EbizMessage } from 'tdesign-vue-next'
 
 // 导入简洁数据服务
-import dataService from "./apiService/simpleDataService";
+import dataService from './apiService/simpleDataService'
+import dataServiceAppData from './apiService/simpleDataServiceAppData'
 
-import "tdesign-vue-next/es/style/index.css";
+import 'tdesign-vue-next/es/style/index.css'
 
 // 导入图表样式
-import "./assets/styles/charts/main.less";
+import './assets/styles/charts/main.less'
 
 // 时间轴组件
-import EbizTimeline from "./components/TdesignTimeline.vue";
-import {TimelineItem as EbizTimelineItem} from 'tdesign-vue-next';
+import EbizTimeline from './components/TdesignTimeline.vue'
+import { TimelineItem as EbizTimelineItem } from 'tdesign-vue-next'
 
 // 导出组件
 export {
@@ -109,6 +111,7 @@ export {
   EbizCheckboxGroup,
   // 数据服务
   dataService,
+  dataServiceAppData,
   // 新增 EbizRadio 和 EbizRadioGroup
   EbizRadio,
   EbizRadioGroup,
@@ -140,5 +143,7 @@ export {
   // 员工信息组件
   EbizEmployeeInfo,
   // 提示组件
-  EbizAlert
-};
+  EbizAlert,
+  // 对话框组件
+  EbizDialog
+}

package/src/main.js

@@ -20,11 +20,12 @@ import {
   EbizFileUpload,
   EbizTabHeader,
   EbizMindmap,
-  dataService
+  dataService,
+  dataServiceAppData
 } from './index.js'
 
-import "tdesign-vue-next/es/style/index.css"
-import "./assets/styles/charts/main.less"
+import 'tdesign-vue-next/es/style/index.css'
+import './assets/styles/charts/main.less'
 
 const app = createApp(App)
 
@@ -50,6 +51,7 @@ app.component('EbizMindmap', EbizMindmap)
 
 // 注册数据服务
 app.config.globalProperties.$dataService = dataService
+app.config.globalProperties.$dataServiceAppData = dataServiceAppData
 
 // 使用路由
 app.use(router)

package/src/router/index.js

@@ -228,6 +228,12 @@ const routes = [
     name: 'TdesignAlert',
     component: () => import('../views/TdesignAlert.vue'),
     meta: { title: 'TDesign提示组件示例' }
+  },
+  {
+    path: '/tdesign-dialog',
+    name: 'TdesignDialog',
+    component: () => import('../views/DialogDemo.vue'),
+    meta: { title: 'TDesign对话框组件示例' }
   }
 ]