@ebiz/designer-components 0.0.18 → 0.0.19-beta.10

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/views/TableSortDemo.vue

@@ -0,0 +1,144 @@
+<template>
+    <div class="container">
+        <h1>表格排序组件演示</h1>
+
+        <div class="demo-section">
+            <h2>基础用法</h2>
+            <div class="demo-item">
+                <EbizTableSort icon="filter-sort" :field-options="fieldOptions" @sort="handleSort"
+                    @reset="handleReset" />
+            </div>
+            <div class="result" v-if="sortResult.length > 0">
+                <h3>排序结果：</h3>
+                <pre>{{ JSON.stringify(sortResult, null, 2) }}</pre>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2>自定义按钮</h2>
+            <div class="demo-item">
+                <EbizTableSort icon="filter" button-text="自定义排序" :field-options="fieldOptions" @sort="handleSort2" />
+            </div>
+            <div class="result" v-if="sortResult2.length > 0">
+                <h3>排序结果：</h3>
+                <pre>{{ JSON.stringify(sortResult2, null, 2) }}</pre>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2>预设排序条件</h2>
+            <div class="demo-item">
+                <EbizTableSort :field-options="fieldOptions" :default-sort="defaultSort" @sort="handleSort3" />
+            </div>
+            <div class="result" v-if="sortResult3.length > 0">
+                <h3>排序结果：</h3>
+                <pre>{{ JSON.stringify(sortResult3, null, 2) }}</pre>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2>多条件排序</h2>
+            <div class="demo-item">
+                <EbizTableSort :field-options="fieldOptions" :max-sort-items="3" @sort="handleSort4" />
+            </div>
+            <div class="result" v-if="sortResult4.length > 0">
+                <h3>排序结果：</h3>
+                <pre>{{ JSON.stringify(sortResult4, null, 2) }}</pre>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizTableSort } from '../index.js';
+
+// 字段选项
+const fieldOptions = [
+    { value: 'name', label: '姓名' },
+    { value: 'age', label: '年龄' },
+    { value: 'address', label: '地址' },
+    { value: 'createTime', label: '创建时间' },
+    { value: 'status', label: '状态' }
+];
+
+// 默认排序条件
+const defaultSort = [
+    { field: 'age', order: 'desc' }
+];
+
+// 排序结果
+const sortResult = ref([]);
+const sortResult2 = ref([]);
+const sortResult3 = ref([]);
+const sortResult4 = ref([]);
+
+// 处理排序
+const handleSort = (sort) => {
+    sortResult.value = sort;
+    console.log('排序条件：', sort);
+};
+
+const handleSort2 = (sort) => {
+    sortResult2.value = sort;
+    console.log('排序条件2：', sort);
+};
+
+const handleSort3 = (sort) => {
+    sortResult3.value = sort;
+    console.log('排序条件3：', sort);
+};
+
+const handleSort4 = (sort) => {
+    sortResult4.value = sort;
+    console.log('排序条件4：', sort);
+};
+
+// 处理重置
+const handleReset = () => {
+    sortResult.value = [];
+    console.log('重置排序');
+};
+</script>
+
+<style lang="less" scoped>
+.container {
+    padding: 20px;
+
+    h1 {
+        margin-bottom: 20px;
+    }
+
+    .demo-section {
+        margin-bottom: 30px;
+        padding: 20px;
+        border: 1px solid #eee;
+        border-radius: 6px;
+
+        h2 {
+            margin-bottom: 16px;
+            font-size: 18px;
+        }
+
+        .demo-item {
+            margin-bottom: 16px;
+        }
+
+        .result {
+            margin-top: 20px;
+            padding: 16px;
+            background-color: #f9f9f9;
+            border-radius: 4px;
+
+            h3 {
+                margin-bottom: 8px;
+                font-size: 16px;
+            }
+
+            pre {
+                font-family: monospace;
+            }
+        }
+    }
+}
+</style>

package/src/views/TableView.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="table-demo-container">
+    <h2>基础表格</h2>
+    <ebiz-table :data="tableData" :bordered="true" :hover="true">
+      <ebiz-table-column col-key="id" title="ID" width="80" />
+      <ebiz-table-column col-key="name" title="姓名" width="120" />
+      <ebiz-table-column col-key="age" title="年龄" width="80" :sorter="true" align="center" />
+      <ebiz-table-column col-key="address" title="地址" :ellipsis="true" />
+    </ebiz-table>
+
+    <h2>列类型演示</h2>
+    <ebiz-table :data="tableData" :bordered="true" :stripe="true" row-key="id">
+      <ebiz-table-column type="multiple" width="60" />
+      <ebiz-table-column type="index" title="序号" width="80" />
+      <ebiz-table-column col-key="name" title="姓名" width="120" />
+      <ebiz-table-column col-key="age" title="年龄" width="80" />
+      <ebiz-table-column col-key="address" title="地址" :ellipsis="true" />
+    </ebiz-table>
+
+    <h2>插槽用法</h2>
+    <ebiz-table :data="tableData" :bordered="true">
+      <ebiz-table-column col-key="id" title="ID" width="80" />
+      <ebiz-table-column col-key="name" title="姓名" width="120">
+        <template #default="{ row }">
+          <strong style="color: #0052d9">{{ row.name }}</strong>
+        </template>
+      </ebiz-table-column>
+      <ebiz-table-column col-key="age" title="年龄" width="80" />
+      <ebiz-table-column col-key="operation" title="操作" width="160">
+        <template #default="{ row }">
+          <button @click="handleEdit(row)" style="margin-right: 8px">编辑</button>
+          <button @click="handleDelete(row)">删除</button>
+        </template>
+      </ebiz-table-column>
+    </ebiz-table>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizTable, EbizTableColumn } from '../index.js';
+
+const tableData = ref([
+  { 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: 27, address: '杭州市西湖区' }
+]);
+
+const handleEdit = (row) => {
+  alert(`编辑: ${row.name}`);
+};
+
+const handleDelete = (row) => {
+  alert(`删除: ${row.name}`);
+};
+</script>
+
+<style scoped>
+.table-demo-container {
+  padding: 20px;
+}
+
+.table-demo-container h2 {
+  margin: 30px 0 15px;
+  font-size: 18px;
+}
+</style>