@ebiz/designer-components 0.0.18-beta.24 → 0.0.18-beta.26

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> 

package/src/views/TreeDemo.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="tree-demo">
+    <h1>树组件示例</h1>
+    
+    <h2>基础树</h2>
+    <div class="demo-section">
+      <EbizTree :items="treeData" />
+    </div>
+    
+    <h2>可选择的树</h2>
+    <div class="demo-section">
+      <EbizTree 
+        :items="treeData" 
+        checkable 
+        v-model="checkedValue" 
+        @change="handleChange"
+      />
+      <div class="result-panel">
+        <p>当前选中值: {{ checkedValue.join(', ') }}</p>
+      </div>
+    </div>
+    
+    <h2>带连接线的树</h2>
+    <div class="demo-section">
+      <EbizTree 
+        :items="treeData" 
+        line 
+        v-model:expanded="expandedNodes"
+      />
+    </div>
+    
+    <h2>可拖拽的树</h2>
+    <div class="demo-section">
+      <EbizTree 
+        :items="treeData" 
+        draggable 
+        @drag-drop="handleDragDrop"
+      />
+    </div>
+    
+    <h2>自定义图标的树</h2>
+    <div class="demo-section">
+      <EbizTree 
+        :items="treeData" 
+        line
+      >
+        <template #icon="{ node }">
+          <span v-if="node.children && node.children.length">📁</span>
+          <span v-else>📄</span>
+        </template>
+      </EbizTree>
+    </div>
+    
+    <h2>节点操作</h2>
+    <div class="demo-section">
+      <EbizTree 
+        :items="operableTreeData" 
+        line
+      >
+        <template #operations="{ node }">
+          <div class="node-operations">
+            <button @click.stop="addChildNode(node)">添加</button>
+            <button @click.stop="removeNode(node)">删除</button>
+          </div>
+        </template>
+      </EbizTree>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizTree } from '../index.js';
+
+// 树的数据
+const treeData = ref([
+  {
+    label: '节点1',
+    value: '1',
+    children: [
+      {
+        label: '节点1.1',
+        value: '1.1',
+        children: [
+          {
+            label: '节点1.1.1',
+            value: '1.1.1'
+          },
+          {
+            label: '节点1.1.2',
+            value: '1.1.2'
+          }
+        ]
+      },
+      {
+        label: '节点1.2',
+        value: '1.2'
+      }
+    ]
+  },
+  {
+    label: '节点2',
+    value: '2',
+    children: [
+      {
+        label: '节点2.1',
+        value: '2.1'
+      },
+      {
+        label: '节点2.2',
+        value: '2.2'
+      }
+    ]
+  }
+]);
+
+// 可操作的树数据
+const operableTreeData = ref([
+  {
+    label: '节点1',
+    value: '1',
+    children: [
+      {
+        label: '节点1.1',
+        value: '1.1'
+      }
+    ]
+  },
+  {
+    label: '节点2',
+    value: '2',
+    children: []
+  }
+]);
+
+// 选中的值
+const checkedValue = ref([]);
+
+// 展开的节点
+const expandedNodes = ref(['1', '1.1']);
+
+// 选中值变化处理
+const handleChange = (values, context) => {
+  console.log('选中值变化：', values);
+  console.log('选中上下文：', context);
+};
+
+// 拖拽处理
+const handleDragDrop = (context) => {
+  console.log('拖拽结束：', context);
+};
+
+// 添加子节点
+const addChildNode = (node) => {
+  const newNodeId = `${node.value}-${Date.now()}`;
+  const newNode = {
+    label: `节点${newNodeId}`,
+    value: newNodeId,
+    children: []
+  };
+  
+  if (!node.children) {
+    node.children = [];
+  }
+  
+  node.children.push(newNode);
+};
+
+// 删除节点
+const removeNode = (node) => {
+  // 找到父节点，从父节点的children中删除当前节点
+  operableTreeData.value = removeNodeByValue(operableTreeData.value, node.value);
+};
+
+// 根据值递归删除节点
+const removeNodeByValue = (nodes, value) => {
+  return nodes.filter(node => {
+    if (node.value === value) {
+      return false;
+    }
+    
+    if (node.children && node.children.length) {
+      node.children = removeNodeByValue(node.children, value);
+    }
+    
+    return true;
+  });
+};
+</script>
+
+<style scoped>
+.tree-demo {
+  padding: 20px;
+  
+  h1 {
+    margin-bottom: 20px;
+    font-size: 24px;
+  }
+  
+  h2 {
+    margin-top: 30px;
+    margin-bottom: 15px;
+    font-size: 20px;
+  }
+  
+  .demo-section {
+    margin-bottom: 30px;
+    padding: 20px;
+    border: 1px solid #eee;
+    border-radius: 4px;
+  }
+  
+  .result-panel {
+    margin-top: 16px;
+    padding: 10px;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+    
+    p {
+      margin: 0;
+    }
+  }
+  
+  .node-operations {
+    display: inline-flex;
+    margin-left: 8px;
+    
+    button {
+      margin-left: 4px;
+      padding: 2px 6px;
+      font-size: 12px;
+      background-color: #f0f0f0;
+      border: 1px solid #ddd;
+      border-radius: 3px;
+      cursor: pointer;
+      
+      &:hover {
+        background-color: #e0e0e0;
+      }
+    }
+  }
+}
+</style>