@ebiz/designer-components 0.0.50 → 0.0.52

package/src/views/VxeTableDemo.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="demo-container">
+    <h1>VxeTable 表格组件示例</h1>
+    
+    <div class="demo-section">
+      <h2>1. 基础表格</h2>
+      <EbizVxeTable
+        ref="basicTable"
+        :tableData="basicTableData"
+        :tableCols="basicTableCols"
+        :isPagination="false"
+      />
+    </div>
+<!-- 
+    <div class="demo-section">
+      <h2>2. 带分页的表格</h2>
+      <EbizVxeTable
+        ref="paginationTable"
+        @query="handleQuery"
+        v-model:currentPage="currentPage"
+        v-model:pageSize="pageSize"
+        :total="total"
+        :tableData="paginationTableData"
+        :tableCols="paginationTableCols"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h2>3. 树形表格</h2>
+      <EbizVxeTable
+        ref="treeTable"
+        :tableData="treeTableData"
+        :tableCols="treeTableCols"
+        :tableProp="treeTableProp"
+        :isPagination="false"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h2>4. 自定义渲染表格</h2>
+      <EbizVxeTable
+        ref="customTable"
+        :tableData="customTableData"
+        :tableCols="customTableCols"
+        :isPagination="false"
+      />
+    </div> -->
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, h } from 'vue';
+import EbizVxeTable from '../components/EbizVxeTable.vue';
+
+// 基础表格数据
+const basicTableData = ref([
+  { id: 1, name: '张三', age: 28, gender: '男', department: '研发部', position: '前端开发' },
+  { id: 2, name: '李四', age: 32, gender: '男', department: '产品部', position: '产品经理' },
+  { id: 3, name: '王五', age: 24, gender: '女', department: '设计部', position: 'UI设计师' },
+  { id: 4, name: '赵六', age: 35, gender: '男', department: '研发部', position: '后端开发' },
+  { id: 5, name: '钱七', age: 29, gender: '女', department: '市场部', position: '市场专员' }
+]);
+
+const basicTableCols = ref([
+  { field: 'name', title: '姓名', width: 100 },
+  { field: 'age', title: '年龄', width: 80 },
+  { field: 'gender', title: '性别', width: 80 },
+  { field: 'department', title: '部门', width: 120 },
+  { field: 'position', title: '职位', minWidth: 120 }
+]);
+
+// 分页表格数据
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(100);
+const paginationTableData = ref([]);
+const paginationTableCols = ref([
+  { type: 'seq', title: '序号', width: 60 },
+  { field: 'name', title: '姓名', width: 100 },
+  { field: 'age', title: '年龄', width: 80 },
+  { field: 'gender', title: '性别', width: 80 },
+  { field: 'email', title: '邮箱', minWidth: 180 },
+  { field: 'address', title: '地址', minWidth: 200 }
+]);
+
+// 树形表格数据
+const treeTableData = ref([
+  {
+    id: 1,
+    name: '研发中心',
+    manager: '张总',
+    headcount: 120,
+    children: [
+      {
+        id: 11,
+        name: '前端组',
+        manager: '李经理',
+        headcount: 45,
+        children: [
+          { id: 111, name: 'Vue小组', manager: '王组长', headcount: 15 },
+          { id: 112, name: 'React小组', manager: '刘组长', headcount: 18 },
+          { id: 113, name: '移动端小组', manager: '陈组长', headcount: 12 }
+        ]
+      },
+      {
+        id: 12,
+        name: '后端组',
+        manager: '赵经理',
+        headcount: 75,
+        children: [
+          { id: 121, name: 'Java小组', manager: '钱组长', headcount: 30 },
+          { id: 122, name: 'Python小组', manager: '孙组长', headcount: 25 },
+          { id: 123, name: 'Node小组', manager: '周组长', headcount: 20 }
+        ]
+      }
+    ]
+  },
+  {
+    id: 2,
+    name: '产品设计中心',
+    manager: '吴总',
+    headcount: 80,
+    children: [
+      { id: 21, name: '产品组', manager: '郑经理', headcount: 35 },
+      { id: 22, name: 'UI设计组', manager: '冯经理', headcount: 25 },
+      { id: 23, name: 'UX设计组', manager: '蒋经理', headcount: 20 }
+    ]
+  }
+]);
+
+const treeTableCols = ref([
+  { field: 'name', title: '部门名称', width: 180, treeNode: true },
+  { field: 'manager', title: '负责人', width: 120 },
+  { field: 'headcount', title: '人数', width: 80 }
+]);
+
+const treeTableProp = ref({
+  'auto-resize': true,
+  border: true,
+  'row-id': 'id',
+  'highlight-current-row': true,
+  'show-overflow': true,
+  'tree-config': {
+    children: 'children',
+    indent: 20,
+    expandAll: true
+  }
+});
+
+// 自定义渲染表格数据
+const customTableData = ref([
+  { id: 1, name: '项目A', status: 'success', progress: 100, startDate: '2023-01-10', endDate: '2023-03-15' },
+  { id: 2, name: '项目B', status: 'processing', progress: 65, startDate: '2023-02-20', endDate: '2023-05-30' },
+  { id: 3, name: '项目C', status: 'warning', progress: 32, startDate: '2023-03-05', endDate: '2023-07-10' },
+  { id: 4, name: '项目D', status: 'error', progress: 0, startDate: '2023-04-15', endDate: '2023-08-20' },
+  { id: 5, name: '项目E', status: 'success', progress: 100, startDate: '2023-02-01', endDate: '2023-04-25' }
+]);
+
+const customTableCols = ref([
+  { field: 'name', title: '项目名称', width: 120 },
+  { 
+    field: 'status', 
+    title: '状态', 
+    width: 100,
+    type: 'jsx',
+    render: ({ row }) => {
+      const statusMap = {
+        success: { text: '完成', color: '#52c41a' },
+        processing: { text: '进行中', color: '#1677ff' },
+        warning: { text: '警告', color: '#faad14' },
+        error: { text: '错误', color: '#ff4d4f' }
+      };
+      const status = statusMap[row.status] || { text: '未知', color: '#999' };
+      return h('span', {
+        style: {
+          padding: '2px 8px',
+          borderRadius: '4px',
+          backgroundColor: status.color + '20',
+          color: status.color,
+          border: `1px solid ${status.color}`
+        }
+      }, status.text);
+    }
+  },
+  { 
+    field: 'progress', 
+    title: '进度', 
+    width: 180,
+    type: 'jsx',
+    render: ({ row }) => {
+      return h('div', {
+        style: {
+          width: '100%',
+          background: '#f5f5f5',
+          borderRadius: '4px',
+          height: '16px'
+        }
+      }, [
+        h('div', {
+          style: {
+            width: `${row.progress}%`,
+            background: row.progress === 100 ? '#52c41a' : '#1677ff',
+            borderRadius: '4px',
+            height: '16px',
+            transition: 'width 0.3s'
+          }
+        }, ''),
+        h('span', {
+          style: {
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            fontSize: '12px',
+            color: row.progress > 50 ? '#fff' : '#333'
+          }
+        }, `${row.progress}%`)
+      ]);
+    }
+  },
+  { field: 'startDate', title: '开始日期', width: 120 },
+  { field: 'endDate', title: '结束日期', width: 120 }
+]);
+
+// 处理分页查询
+const handleQuery = (page, size) => {
+  // 模拟异步加载数据
+  setTimeout(() => {
+    const list = [];
+    const startIndex = (page - 1) * size;
+    for (let i = 0; i < size; i++) {
+      if (startIndex + i < total.value) {
+        list.push({
+          id: startIndex + i + 1,
+          name: `用户${startIndex + i + 1}`,
+          age: Math.floor(Math.random() * 40) + 20,
+          gender: Math.random() > 0.5 ? '男' : '女',
+          email: `user${startIndex + i + 1}@example.com`,
+          address: `北京市朝阳区某某街道第${Math.floor(Math.random() * 100) + 1}号`
+        });
+      }
+    }
+    paginationTableData.value = list;
+    // 完成加载
+    if (list.length === 0) {
+      // 如果没有数据，则回到第一页
+      currentPage.value = 1;
+    }
+  }, 300);
+};
+
+onMounted(() => {
+  // 初始加载分页表格数据
+  handleQuery(currentPage.value, pageSize.value);
+});
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 40px;
+}
+
+h1 {
+  font-size: 24px;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+h2 {
+  font-size: 18px;
+  margin-bottom: 15px;
+  color: #333;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #eee;
+}
+</style>