@ebiz/designer-components 0.0.18-beta.4 → 0.0.18-beta.40

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>
 
@@ -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 => {
@@ -401,10 +370,10 @@ const customRequestMethod = (options) => {
                 .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

@@ -22,6 +22,7 @@ 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 EbizPageHeader from "./components/EbizPageHeader.vue";
 import TdesignCalendar from "./components/TdesignCalendar/index.vue";
 import TdesignCollapse from "./components/TdesignCollapse.vue";
 import TdesignCollapsePanel from "./components/TdesignCollapsePanel.vue";
@@ -46,6 +47,13 @@ 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 EbizTable from "./components/EbizTable.vue";
+import EbizTableColumn from './components/EbizTableColumn.vue';
+import EbizTableSort from './components/EbizTableSort.vue';
+import EbizDetailBlock from './components/EbizDetailBlock.vue';
+import EbizTree from './components/EbizTree.vue';
+import EbizTreeSelector from './components/EbizTreeSelector.vue';
 import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
 
 // 导入简洁数据服务
@@ -84,6 +92,8 @@ export {
   EbizRemoteSelect,
   EbizRouteBreadcrumb,
   EbizTabHeader,
+  // 页面头部组件
+  EbizPageHeader,
   // 思维导图
   EbizMindmap,
   // 文件上传组件
@@ -140,5 +150,17 @@ export {
   // 员工信息组件
   EbizEmployeeInfo,
   // 提示组件
-  EbizAlert
+  EbizAlert,
+  // 对话框组件
+  EbizDialog,
+  // 表格组件
+  EbizTable,
+  EbizTableColumn,
+  // 表格排序组件
+  EbizTableSort,
+  // 详情块组件
+  EbizDetailBlock,
+  // 树组件
+  EbizTree,
+  EbizTreeSelector
 };

package/src/main.js

@@ -23,8 +23,8 @@ import {
   dataService
 } 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)
 

package/src/router/index.js

@@ -1,10 +1,13 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+import ButtonView from '../views/Button.vue'
+import TableView from '../views/TableView.vue'
 
 const routes = [
   {
     path: '/',
     name: 'Home',
-    component: () => import('../views/Home.vue'),
+    component: Home,
     meta: { title: '首页' }
   },
   {
@@ -15,10 +18,16 @@ const routes = [
   },
   {
     path: '/table',
-    name: 'Table',
-    component: () => import('../views/Table.vue'),
+    name: 'table',
+    component: TableView,
     meta: { title: '表格组件示例' }
   },
+  {
+    path: '/table-column',
+    name: 'table-column',
+    component: TableView,
+    meta: { title: '表格列组件示例' }
+  },
   {
     path: '/form',
     name: 'Form',
@@ -27,8 +36,8 @@ const routes = [
   },
   {
     path: '/button',
-    name: 'Button',
-    component: () => import('../views/Button.vue'),
+    name: 'button',
+    component: ButtonView,
     meta: { title: '按钮组件示例' }
   },
   {
@@ -228,6 +237,56 @@ 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对话框组件示例' }
+  },
+  {
+    path: '/page-header',
+    name: 'PageHeader',
+    component: () => import('../views/PageHeaderDemo.vue'),
+    meta: { title: 'Ebiz页面头部组件示例', icon: 'header' }
+  },
+  {
+    path: '/table-demo',
+    name: 'TableDemo',
+    component: () => import('../views/TableDemo.vue'),
+    meta: { title: 'Ebiz表格组件示例' }
+  },
+  {
+    path: '/table-sort',
+    name: 'TableSort',
+    component: () => import('../views/TableSortDemo.vue'),
+    meta: { title: 'Ebiz表格排序组件示例' }
+  },
+  {
+    path: '/ebiz-detail-block',
+    name: 'EbizDetailBlock',
+    component: () => import('../views/EbizDetailBlockDemo.vue'),
+    meta: { title: 'Ebiz详情块组件示例' }
+  },
+  {
+    path: '/tree',
+    name: 'Tree',
+    component: () => import('../views/TreeDemo.vue'),
+    meta: { title: 'Ebiz树组件示例' }
+  },
+  {
+    path: '/tree-demo',
+    name: 'TreeDemo',
+    component: () => import('../views/TreeDemo.vue'),
+    meta: { title: 'Ebiz树组件示例' }
+  },
+  {
+    path: '/tree-selector-demo',
+    name: 'TreeSelectorDemo',
+    component: () => import('../views/TreeSelectorDemo.vue'),
+    meta: {
+      title: '树形选择器'
+    }
   }
 ]
 

package/src/views/Button.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <ebiz-route-breadcrumb />
-    <ebiz-button />
+    <ebiz-button :text="测试" :apiConfig="{ apiId: 802, apiType: 5 }" @prepare="onPrepare" />
   </div>
 </template>
 
@@ -12,9 +12,13 @@ export default {
   name: 'ButtonDemo',
   components: {
     EbizButton
+  },
+  methods: {
+    onPrepare() {
+      
+    }
   }
 }
 </script>
 
-<style scoped>
-</style> 
+<style scoped></style>