@ebiz/designer-components 0.0.18-beta.9 → 0.0.18-kzy.1

package/src/router/index.js

@@ -234,6 +234,12 @@ const routes = [
     name: 'TdesignDialog',
     component: () => import('../views/DialogDemo.vue'),
     meta: { title: 'TDesign对话框组件示例' }
+  },
+  {
+    path: '/table-demo',
+    name: 'TableDemo',
+    component: () => import('../views/TableDemo.vue'),
+    meta: { title: 'Ebiz表格组件示例' }
   }
 ]
 

package/src/views/Home.vue

@@ -53,7 +53,8 @@ export default {
       { path: '/ebiz-avatar', title: 'Ebiz头像组件示例' },
       { path: '/ebiz-employee-info', title: 'Ebiz员工信息组件示例' },
       { path: '/tdesign-alert', title: 'TDesign提示组件示例' },
-      { path: '/tdesign-dialog', title: 'TDesign对话框组件示例' }
+      { path: '/tdesign-dialog', title: 'TDesign对话框组件示例' },
+      { path: '/table-demo', title: 'Ebiz表格组件示例' }
     ]
 
     return {

package/src/views/TableDemo.vue

@@ -0,0 +1,335 @@
+<template>
+  <div class="container">
+    <h1>EbizTable 表格组件</h1>
+    <p>高性能表格组件，用于展示结构化数据，支持多种功能特性。</p>
+
+    <h2>基础用法</h2>
+    <div class="demo-block">
+      <EbizTable
+        :data="basicData"
+        :columns="basicColumns"
+        :bordered="true"
+        row-key="id"
+      />
+    </div>
+
+    <h2>带斑马纹和高亮行</h2>
+    <div class="demo-block">
+      <EbizTable
+        :data="basicData"
+        :columns="basicColumns"
+        :bordered="true"
+        :stripe="true"
+        :hover="true"
+        row-key="id"
+      />
+    </div>
+
+    <h2>可排序表格</h2>
+    <div class="demo-block">
+      <EbizTable
+        :data="basicData"
+        :columns="sortableColumns"
+        :sort="sortInfo"
+        @sort-change="onSortChange"
+        :bordered="true"
+        row-key="id"
+      />
+    </div>
+
+    <h2>表格尺寸</h2>
+    <div class="demo-block">
+      <div class="mb-2">
+        <span>选择尺寸：</span>
+        <t-radio-group v-model="size">
+          <t-radio value="small">小尺寸</t-radio>
+          <t-radio value="medium">中尺寸</t-radio>
+          <t-radio value="large">大尺寸</t-radio>
+        </t-radio-group>
+      </div>
+      <EbizTable
+        :data="basicData"
+        :columns="basicColumns"
+        :bordered="true"
+        :size="size"
+        row-key="id"
+      />
+    </div>
+
+    <h2>可选择表格</h2>
+    <div class="demo-block">
+      <EbizTable
+        :data="basicData"
+        :columns="selectableColumns"
+        :bordered="true"
+        row-key="id"
+        @select-change="onSelectChange"
+      />
+      <div class="mt-2">
+        <p>已选择的行：{{ selectedRows.map(item => item.name).join(', ') || '无' }}</p>
+      </div>
+    </div>
+
+    <h2>分页表格</h2>
+    <div class="demo-block">
+      <EbizTable
+        :data="paginationData"
+        :columns="basicColumns"
+        :bordered="true"
+        :pagination="pagination"
+        @page-change="onPageChange"
+        row-key="id"
+      />
+    </div>
+
+    <h2>树形表格</h2>
+    <div class="demo-block">
+      <EbizTable
+        :data="treeData"
+        :columns="basicColumns"
+        :tree="{ childrenKey: 'children', treeNodeColumnIndex: 0 }"
+        :bordered="true"
+        row-key="id"
+      />
+    </div>
+
+    <h2>API 参考</h2>
+    <div>
+      <h3>属性</h3>
+      <EbizTable
+        :data="propsData"
+        :columns="propsColumns"
+        :bordered="true"
+        :stripe="true"
+        row-key="id"
+      />
+
+      <h3>事件</h3>
+      <EbizTable
+        :data="eventsData"
+        :columns="eventsColumns"
+        :bordered="true"
+        :stripe="true"
+        row-key="id"
+      />
+
+      <h3>插槽</h3>
+      <EbizTable
+        :data="slotsData"
+        :columns="slotsColumns"
+        :bordered="true"
+        :stripe="true"
+        row-key="id"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue';
+import { EbizTable } from '../index.js';
+import { RadioGroup as TRadioGroup, Radio as TRadio } from 'tdesign-vue-next';
+
+// 基础数据
+const basicData = [
+  { id: 1, name: '张三', age: 28, address: '北京市朝阳区' },
+  { id: 2, name: '李四', age: 35, address: '上海市浦东新区' },
+  { id: 3, name: '王五', age: 42, address: '广州市天河区' },
+  { id: 4, name: '赵六', age: 31, address: '深圳市南山区' },
+  { id: 5, name: '钱七', age: 26, address: '杭州市西湖区' },
+];
+
+// 基础列配置
+const basicColumns = [
+  { colKey: 'name', title: '姓名', width: 100 },
+  { colKey: 'age', title: '年龄', width: 100 },
+  { colKey: 'address', title: '地址' },
+];
+
+// 可排序列配置
+const sortableColumns = [
+  { colKey: 'name', title: '姓名', width: 100 },
+  { colKey: 'age', title: '年龄', width: 100, sorter: true },
+  { colKey: 'address', title: '地址' },
+];
+
+// 可选择列配置
+const selectableColumns = [
+  { colKey: 'row-select', type: 'multiple', width: 50 },
+  { colKey: 'name', title: '姓名', width: 100 },
+  { colKey: 'age', title: '年龄', width: 100 },
+  { colKey: 'address', title: '地址' },
+];
+
+// 排序信息
+const sortInfo = reactive({
+  sortBy: 'age',
+  descending: true,
+});
+
+// 选择的行
+const selectedRows = ref([]);
+
+// 分页配置
+const pagination = reactive({
+  current: 1,
+  pageSize: 5,
+  total: 20,
+  showJumper: true,
+  showTotal: true,
+});
+
+// 分页数据
+const allPaginationData = Array.from({ length: 20 }, (_, i) => ({
+  id: i + 1,
+  name: `用户${i + 1}`,
+  age: Math.floor(Math.random() * 50) + 18,
+  address: ['北京', '上海', '广州', '深圳', '杭州'][Math.floor(Math.random() * 5)] + '市'
+}));
+
+// 当前展示的分页数据
+const paginationData = computed(() => {
+  const start = (pagination.current - 1) * pagination.pageSize;
+  return allPaginationData.slice(start, start + pagination.pageSize);
+});
+
+// 树形数据
+const treeData = [
+  {
+    id: 1,
+    name: '北京总部',
+    age: '-',
+    address: '北京市海淀区',
+    children: [
+      { id: 11, name: '研发部', age: 20, address: '北京市海淀区' },
+      { id: 12, name: '销售部', age: 15, address: '北京市朝阳区' },
+    ]
+  },
+  {
+    id: 2,
+    name: '上海分部',
+    age: '-',
+    address: '上海市浦东新区',
+    children: [
+      { id: 21, name: '研发部', age: 12, address: '上海市浦东新区' },
+      { id: 22, name: '销售部', age: 8, address: '上海市静安区' },
+    ]
+  }
+];
+
+// 表格尺寸
+const size = ref('medium');
+
+// 排序变化处理
+const onSortChange = (sort, options) => {
+  Object.assign(sortInfo, sort);
+  console.log('排序变化', sort, options);
+};
+
+// 选择变化处理
+const onSelectChange = (selectedRowData) => {
+  selectedRows.value = selectedRowData;
+  console.log('选择变化', selectedRowData);
+};
+
+// 分页变化处理
+const onPageChange = (pageInfo) => {
+  pagination.current = pageInfo.current;
+  pagination.pageSize = pageInfo.pageSize;
+  console.log('分页变化', pageInfo);
+};
+
+// API props 数据
+const propsData = [
+  { id: 1, name: 'data', type: 'Array', default: '[]', desc: '表格数据' },
+  { id: 2, name: 'columns', type: 'Array', default: '[]', desc: '表格列配置' },
+  { id: 3, name: 'rowKey', type: 'String', default: 'id', desc: '表格行唯一标识字段' },
+  { id: 4, name: 'bordered', type: 'Boolean', default: 'false', desc: '是否显示边框' },
+  { id: 5, name: 'stripe', type: 'Boolean', default: 'false', desc: '是否显示斑马纹' },
+  { id: 6, name: 'hover', type: 'Boolean', default: 'true', desc: '是否开启行悬停效果' },
+  { id: 7, name: 'size', type: 'String', default: 'medium', desc: '表格尺寸，可选值：small/medium/large' },
+  { id: 8, name: 'loading', type: 'Boolean', default: 'false', desc: '是否处于加载状态' },
+  { id: 9, name: 'pagination', type: 'Object', default: '-', desc: '分页配置' },
+  { id: 10, name: 'tree', type: 'Object', default: '-', desc: '树形结构配置' },
+];
+
+const propsColumns = [
+  { colKey: 'name', title: '属性名', width: 120 },
+  { colKey: 'type', title: '类型', width: 120 },
+  { colKey: 'default', title: '默认值', width: 120 },
+  { colKey: 'desc', title: '说明' },
+];
+
+// API events 数据
+const eventsData = [
+  { id: 1, name: 'page-change', params: 'pageInfo', desc: '分页发生变化时触发' },
+  { id: 2, name: 'sort-change', params: 'sort, options', desc: '排序发生变化时触发' },
+  { id: 3, name: 'filter-change', params: 'filterValue, col', desc: '过滤条件发生变化时触发' },
+  { id: 4, name: 'select-change', params: 'selectedRowData, options', desc: '选中行发生变化时触发' },
+  { id: 5, name: 'row-click', params: 'rowData, rowIndex, row', desc: '点击行时触发' },
+  { id: 6, name: 'cell-click', params: 'context', desc: '点击单元格时触发' },
+];
+
+const eventsColumns = [
+  { colKey: 'name', title: '事件名', width: 150 },
+  { colKey: 'params', title: '参数', width: 220 },
+  { colKey: 'desc', title: '说明' },
+];
+
+// API slots 数据
+const slotsData = [
+  { id: 1, name: 'topContent', desc: '表格顶部内容' },
+  { id: 2, name: 'bottomContent', desc: '表格底部内容' },
+  { id: 3, name: 'empty', desc: '表格数据为空时的显示内容' },
+  { id: 4, name: 'loadMore', desc: '加载更多按钮' },
+  { id: 5, name: 'header', desc: '自定义表头' },
+  { id: 6, name: 'footer', desc: '自定义表尾' },
+  { id: 7, name: 'cell', desc: '自定义单元格内容' },
+  { id: 8, name: 'expandedRow', desc: '展开行内容' },
+  { id: 9, name: 'pagination', desc: '自定义分页器' },
+];
+
+const slotsColumns = [
+  { colKey: 'name', title: '插槽名', width: 150 },
+  { colKey: 'desc', title: '说明' },
+];
+</script>
+
+<style scoped>
+.container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.demo-block {
+  margin-bottom: 24px;
+  border: 1px solid #e9e9e9;
+  border-radius: 2px;
+  padding: 24px;
+  background-color: #fafafa;
+}
+
+h1 {
+  font-size: 28px;
+  margin-bottom: 16px;
+}
+
+h2 {
+  font-size: 20px;
+  margin: 24px 0 16px;
+}
+
+h3 {
+  font-size: 18px;
+  margin: 24px 0 16px;
+}
+
+.mb-2 {
+  margin-bottom: 16px;
+}
+
+.mt-2 {
+  margin-top: 16px;
+}
+</style> 

package/src/apiService/simpleDataServiceAppData.js

@@ -1,278 +0,0 @@
-/**
- * 简洁数据服务
- * 提供基本的数据操作方法，包含列表查询、详情查询、数据写入、数据修改、数据删除
- * 所有接口均使用POST方法提交
- */
-
-import axios from 'axios'
-import { TinyNotify } from '@opentiny/vue'
-
-// 从环境变量获取API基础URL
-const API_BASE_URL = 'http://' + window.location.host + '/api'
-
-/**
- * 创建axios实例
- */
-const axiosInstance = axios.create({
-  baseURL: API_BASE_URL,
-  timeout: 30000,
-  headers: {
-    'Content-Type': 'application/json',
-    Accept: 'application/json'
-  }
-})
-
-/**
- * 请求拦截器
- */
-axiosInstance.interceptors.request.use(
-  (config) => {
-    // 添加认证信息
-    const token = localStorage.getItem('token')
-    if (token) {
-      config.headers['AppDataAuthorization'] = `Bearer ${token}`
-    }
-
-    // 如果是FormData格式，不设置Content-Type，让浏览器自动设置
-    if (config.data instanceof FormData) {
-      config.headers['Content-Type'] = undefined
-    }
-
-    return config
-  },
-  (error) => {
-    return Promise.reject(error)
-  }
-)
-
-/**
- * 响应拦截器
- */
-axiosInstance.interceptors.response.use(
-  (response) => {
-    const { data } = response
-
-    // 根据后端API的响应格式进行调整
-    if (data.code === 0) {
-      return data.data
-    } else {
-      // message.error(data.message || '请求失败');
-      return Promise.reject(new Error(data.message || data.msg || '请求失败'))
-    }
-  },
-  (error) => {
-    // 错误处理
-    if (error.response) {
-      const { status } = error.response
-
-      switch (status) {
-        case 401:
-          TinyNotify({
-            type: 'warning',
-            title: '未授权',
-            message: '您无权限访问，请授权后重试',
-            position: 'top-right',
-            duration: 2000
-          })
-          break
-        case 403:
-          TinyNotify({
-            type: 'warning',
-            title: '权限不足',
-            message: '禁止访问，权限不足',
-            position: 'top-right',
-            duration: 2000
-          })
-          break
-        case 404:
-          TinyNotify({
-            type: 'warning',
-            title: '404',
-            message: '请求的资源不存在',
-            position: 'top-right',
-            duration: 2000
-          })
-          break
-        case 500:
-          TinyNotify({
-            type: 'warning',
-            title: '错误',
-            message: '服务器内部错误',
-            position: 'top-right',
-            duration: 2000
-          })
-          break
-        default:
-          TinyNotify({
-            type: 'warning',
-            title: '请求失败',
-            message: error.message,
-            position: 'top-right',
-            duration: 2000
-          })
-      }
-    } else {
-      TinyNotify({
-        type: 'error',
-        title: '网络错误',
-        message: error.message,
-        position: 'top-right',
-        duration: 2000
-      })
-      // message.error('网络错误，请检查您的网络连接');
-    }
-
-    return Promise.reject(error)
-  }
-)
-
-let apiMap = {
-  MULTIPLE_DATA_SEARCH: '/appdata/select',
-  DETAILS_DATA: '/appdata/detailData',
-  INTERFACE_PLUGIN: '/appdata/plugin',
-  DATA_INSERT: '/appdata/addData',
-  BATCH_DATA_INSERT: '/appdata/addDatas',
-  DATA_MODIFY: '/appdata/updateData',
-  BATCH_DATA_MODIFY: '/appdata/updateDatas',
-  DEL_DATA: '/appdata/delData',
-  BATCH_DEL_DATA: '/appdata/delDatas',
-  MULTIPLE_DATA_LINK_SEARCH: '/api/appdata/link/select',
-  FILE_UPLOAD: '/api/file/upload' // 文件上传API
-}
-
-/**
- * 数据服务
- */
-const dataServiceAppData = {
-  /**
-   * 请求数据 (POST方法)
-   * @param {string} url - 请求URL
-   * @param {Object} [params] - 查询参数
-   * @param {Object} [apiConfig] - API配置
-   * @param {string} [apiConfig.apiId] - API标识
-   * @param {string} [apiConfig.apiType] - API类型
-   * @returns {Promise<any>} 响应数据
-   * @example
-   */
-  fetch: (params = {}, apiConfig = {}, url = '') => {
-    if (!url) {
-      url = apiMap[apiConfig.apiType]
-    }
-
-    const { apiId = '', ...restConfig } = apiConfig
-
-    const defaultConfig = {
-      // 默认列表查询配置
-      headers: {
-        'X-List-Query': 'true'
-      },
-      timeout: 20000
-    }
-    if (!params) {
-      params = {}
-    }
-    params.apiId = apiConfig.apiId
-    if (apiConfig.key) {
-      params.key = apiConfig.key
-    }
-
-    const config = { ...defaultConfig, ...restConfig }
-    return axiosInstance.post(url, params, config)
-  },
-
-  /**
-   * 文件上传
-   * @param {string} url - 上传URL，默认使用apiMap中的FILE_UPLOAD
-   * @param {FormData} formData - 包含文件和其他数据的FormData
-   * @param {Function} onProgress - 上传进度回调函数，参数为0-100的进度百分比
-   * @returns {Promise<any>} 上传响应数据
-   */
-  upload: (url = '', formData, onProgress = () => {}) => {
-    // 如果没有指定URL，使用默认的文件上传URL
-    if (!url) {
-      url = apiMap.FILE_UPLOAD
-    }
-
-    // 确保FormData中的文件字段名是'file'
-    let fixedFormData = new FormData()
-    let fileFound = false
-
-    // 检查并修复FormData
-    if (formData instanceof FormData) {
-      // 由于FormData不能直接检查内容，我们使用迭代器
-      try {
-        // 在某些旧浏览器中可能不支持entries()
-        if (typeof formData.entries === 'function') {
-          for (let pair of formData.entries()) {
-            const [key, value] = pair
-
-            if (value instanceof File || value instanceof Blob) {
-              // 找到文件，使用正确的字段名
-              console.log(`Found file in field ${key}, adding as 'file'`)
-              fixedFormData.append('file', value)
-              fileFound = true
-            } else {
-              // 保留其他字段
-              fixedFormData.append(key, value)
-            }
-          }
-        } else {
-          // 如果不支持entries()，假设formData已经是正确的，直接使用
-          console.log('FormData.entries() not supported, using original FormData')
-          fixedFormData = formData
-          fileFound = true
-        }
-      } catch (e) {
-        console.error('Error processing FormData:', e)
-        // 出错时使用原始FormData
-        fixedFormData = formData
-      }
-    } else {
-      console.error('Invalid FormData:', formData)
-      return Promise.reject(new Error('FormData is required for file upload'))
-    }
-
-    // 如果没有找到文件，返回错误
-    if (!fileFound && typeof formData.entries === 'function') {
-      console.error('No file found in FormData')
-      return Promise.reject(new Error('No file found in FormData'))
-    }
-
-    // 上传配置
-    const config = {
-      timeout: 60000, // 上传超时时间加长
-      headers: {
-        // 让浏览器自动设置Content-Type和boundary
-        'Content-Type': undefined
-      },
-      onUploadProgress: (progressEvent) => {
-        // 计算上传进度百分比
-        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
-        onProgress(percentCompleted)
-      }
-    }
-
-    // 发起上传请求
-    console.log('Sending file upload request to:', url)
-    return axiosInstance.post(url, fixedFormData, config).then((response) => {
-      console.log('Upload server response:', response)
-
-      // 处理文件路径
-      // 如果返回的是相对路径，转换为完整URL
-      if (typeof response === 'string' && !response.startsWith('http')) {
-        // 判断路径是否以斜杠开头
-        const baseUrl = API_BASE_URL.endsWith('/') ? API_BASE_URL.slice(0, -1) : API_BASE_URL
-        const filePath = response.startsWith('/') ? response : `/${response}`
-
-        // 构建完整URL
-        const fullUrl = `${baseUrl}/files${filePath}`
-        console.log('Converted file path to full URL:', fullUrl)
-        return fullUrl
-      }
-
-      return response
-    })
-  }
-}
-
-export default dataServiceAppData