@ebiz/designer-components 0.1.1 → 0.1.4

package/src/views/TreeMergeTableDemo.vue

@@ -1,240 +1,240 @@
-<template>
-  <div class="container">
-    <h1>树形合并单元格表格组件</h1>
-    <p>本组件基于TDesign表格组件，支持树形结构展示和单元格合并功能，通过单一的v-model绑定选中数据。</p>
-
-    <h2>基础树形表格</h2>
-    <div class="demo-block">
-      <EbizTreeMergeTable
-        :data="treeData"
-        :columns="basicColumns"
-        :bordered="true"
-        :tree="{ childrenKey: 'children', treeNodeColumnIndex: 0 }"
-        row-key="id"
-      />
-    </div>
-
-    <h2>可选择的树形表格</h2>
-    <div class="demo-block">
-      <EbizTreeMergeTable
-        v-model="selectedRows"
-        :data="treeData"
-        :columns="selectableColumns"
-        :bordered="true"
-        :tree="{ childrenKey: 'children', treeNodeColumnIndex: 1 }"
-        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">
-      <EbizTreeMergeTable
-        :data="mergeTreeData"
-        :columns="mergeColumns"
-        :bordered="true"
-        :tree="{ childrenKey: 'children', treeNodeColumnIndex: 0 }"
-        :merge-cells="mergeCells"
-        row-key="id"
-      />
-      <div class="description">
-        <p>该示例展示了如何通过mergeCells属性实现单元格合并</p>
-      </div>
-    </div>
-
-    <h2>动态合并单元格的树形表格</h2>
-    <div class="demo-block">
-      <EbizTreeMergeTable
-        :data="mergeTreeData"
-        :columns="mergeColumns"
-        :bordered="true"
-        :tree="{ childrenKey: 'children', treeNodeColumnIndex: 0 }"
-        :merge-config="dynamicMergeConfig"
-        row-key="id"
-      />
-      <div class="description">
-        <p>该示例展示了如何通过mergeConfig函数动态计算单元格合并逻辑</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive } from 'vue';
-import { EbizTreeMergeTable } from '../index.js';
-
-// 基础树形数据
-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 mergeTreeData = [
-  {
-    id: 1,
-    name: '研发部',
-    manager: '张三',
-    project: 'A项目',
-    status: '进行中',
-    children: [
-      { id: 11, name: '研发部', manager: '张三', project: 'A项目子任务1', status: '进行中' },
-      { id: 12, name: '研发部', manager: '张三', project: 'A项目子任务2', status: '已完成' },
-      { id: 13, name: '研发部', manager: '张三', project: 'A项目子任务3', status: '进行中' },
-    ]
-  },
-  {
-    id: 2,
-    name: '销售部',
-    manager: '李四',
-    project: 'B项目',
-    status: '已完成',
-    children: [
-      { id: 21, name: '销售部', manager: '李四', project: 'B项目子任务1', status: '已完成' },
-      { id: 22, name: '销售部', manager: '李四', project: 'B项目子任务2', status: '已完成' },
-    ]
-  },
-  {
-    id: 3,
-    name: '市场部',
-    manager: '王五',
-    project: 'C项目',
-    status: '规划中',
-    children: [
-      { id: 31, name: '市场部', manager: '王五', project: 'C项目子任务1', status: '规划中' },
-    ]
-  }
-];
-
-// 基础列配置
-const basicColumns = [
-  { colKey: 'name', title: '名称', width: 150 },
-  { colKey: 'age', title: '年龄', width: 100 },
-  { colKey: 'address', title: '地址' },
-];
-
-// 可选择列配置
-const selectableColumns = [
-  { colKey: 'row-select', type: 'multiple', width: 50 },
-  { colKey: 'name', title: '名称', width: 150 },
-  { colKey: 'age', title: '年龄', width: 100 },
-  { colKey: 'address', title: '地址' },
-];
-
-// 合并单元格列配置
-const mergeColumns = [
-  { colKey: 'name', title: '部门', width: 150 },
-  { colKey: 'manager', title: '负责人', width: 120 },
-  { colKey: 'project', title: '项目', width: 200 },
-  { colKey: 'status', title: '状态', width: 100 },
-];
-
-// 已选择的行
-const selectedRows = ref([]);
-
-// 选择变化处理
-const onSelectChange = (selectedRowData) => {
-  console.log('选择变化', selectedRowData);
-};
-
-// 静态合并单元格配置
-const mergeCells = [
-  { row: 0, col: 0, rowspan: 4, colspan: 1 }, // 第一个部门名称跨4行
-  { row: 0, col: 1, rowspan: 4, colspan: 1 }, // 第一个负责人跨4行
-  { row: 4, col: 0, rowspan: 3, colspan: 1 }, // 第二个部门名称跨3行
-  { row: 4, col: 1, rowspan: 3, colspan: 1 }, // 第二个负责人跨3行
-  { row: 7, col: 0, rowspan: 2, colspan: 1 }, // 第三个部门名称跨2行
-  { row: 7, col: 1, rowspan: 2, colspan: 1 }, // 第三个负责人跨2行
-];
-
-// 动态合并单元格配置函数
-const dynamicMergeConfig = (data) => {
-  const mergeCells = [];
-  let rowIndex = 0;
-  
-  // 为每个部门生成合并单元格配置
-  data.forEach(dept => {
-    const rowCount = getRowCount(dept);
-    
-    // 如果有子节点，合并部门名称和负责人列
-    if (rowCount > 1) {
-      mergeCells.push({ row: rowIndex, col: 0, rowspan: rowCount, colspan: 1 }); // 部门名称
-      mergeCells.push({ row: rowIndex, col: 1, rowspan: rowCount, colspan: 1 }); // 负责人
-    }
-    
-    rowIndex += rowCount;
-  });
-  
-  return mergeCells;
-};
-
-// 计算一个节点及其子节点的总行数
-const getRowCount = (node) => {
-  if (!node.children || node.children.length === 0) {
-    return 1;
-  }
-  
-  return 1 + node.children.reduce((sum, child) => sum + getRowCount(child), 0);
-};
-</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;
-}
-
-.description {
-  margin-top: 16px;
-  color: #666;
-}
-
-.mt-2 {
-  margin-top: 16px;
-}
+<template>
+  <div class="container">
+    <h1>树形合并单元格表格组件</h1>
+    <p>本组件基于TDesign表格组件，支持树形结构展示和单元格合并功能，通过单一的v-model绑定选中数据。</p>
+
+    <h2>基础树形表格</h2>
+    <div class="demo-block">
+      <EbizTreeMergeTable
+        :data="treeData"
+        :columns="basicColumns"
+        :bordered="true"
+        :tree="{ childrenKey: 'children', treeNodeColumnIndex: 0 }"
+        row-key="id"
+      />
+    </div>
+
+    <h2>可选择的树形表格</h2>
+    <div class="demo-block">
+      <EbizTreeMergeTable
+        v-model="selectedRows"
+        :data="treeData"
+        :columns="selectableColumns"
+        :bordered="true"
+        :tree="{ childrenKey: 'children', treeNodeColumnIndex: 1 }"
+        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">
+      <EbizTreeMergeTable
+        :data="mergeTreeData"
+        :columns="mergeColumns"
+        :bordered="true"
+        :tree="{ childrenKey: 'children', treeNodeColumnIndex: 0 }"
+        :merge-cells="mergeCells"
+        row-key="id"
+      />
+      <div class="description">
+        <p>该示例展示了如何通过mergeCells属性实现单元格合并</p>
+      </div>
+    </div>
+
+    <h2>动态合并单元格的树形表格</h2>
+    <div class="demo-block">
+      <EbizTreeMergeTable
+        :data="mergeTreeData"
+        :columns="mergeColumns"
+        :bordered="true"
+        :tree="{ childrenKey: 'children', treeNodeColumnIndex: 0 }"
+        :merge-config="dynamicMergeConfig"
+        row-key="id"
+      />
+      <div class="description">
+        <p>该示例展示了如何通过mergeConfig函数动态计算单元格合并逻辑</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import { EbizTreeMergeTable } from '../index.js';
+
+// 基础树形数据
+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 mergeTreeData = [
+  {
+    id: 1,
+    name: '研发部',
+    manager: '张三',
+    project: 'A项目',
+    status: '进行中',
+    children: [
+      { id: 11, name: '研发部', manager: '张三', project: 'A项目子任务1', status: '进行中' },
+      { id: 12, name: '研发部', manager: '张三', project: 'A项目子任务2', status: '已完成' },
+      { id: 13, name: '研发部', manager: '张三', project: 'A项目子任务3', status: '进行中' },
+    ]
+  },
+  {
+    id: 2,
+    name: '销售部',
+    manager: '李四',
+    project: 'B项目',
+    status: '已完成',
+    children: [
+      { id: 21, name: '销售部', manager: '李四', project: 'B项目子任务1', status: '已完成' },
+      { id: 22, name: '销售部', manager: '李四', project: 'B项目子任务2', status: '已完成' },
+    ]
+  },
+  {
+    id: 3,
+    name: '市场部',
+    manager: '王五',
+    project: 'C项目',
+    status: '规划中',
+    children: [
+      { id: 31, name: '市场部', manager: '王五', project: 'C项目子任务1', status: '规划中' },
+    ]
+  }
+];
+
+// 基础列配置
+const basicColumns = [
+  { colKey: 'name', title: '名称', width: 150 },
+  { colKey: 'age', title: '年龄', width: 100 },
+  { colKey: 'address', title: '地址' },
+];
+
+// 可选择列配置
+const selectableColumns = [
+  { colKey: 'row-select', type: 'multiple', width: 50 },
+  { colKey: 'name', title: '名称', width: 150 },
+  { colKey: 'age', title: '年龄', width: 100 },
+  { colKey: 'address', title: '地址' },
+];
+
+// 合并单元格列配置
+const mergeColumns = [
+  { colKey: 'name', title: '部门', width: 150 },
+  { colKey: 'manager', title: '负责人', width: 120 },
+  { colKey: 'project', title: '项目', width: 200 },
+  { colKey: 'status', title: '状态', width: 100 },
+];
+
+// 已选择的行
+const selectedRows = ref([]);
+
+// 选择变化处理
+const onSelectChange = (selectedRowData) => {
+  console.log('选择变化', selectedRowData);
+};
+
+// 静态合并单元格配置
+const mergeCells = [
+  { row: 0, col: 0, rowspan: 4, colspan: 1 }, // 第一个部门名称跨4行
+  { row: 0, col: 1, rowspan: 4, colspan: 1 }, // 第一个负责人跨4行
+  { row: 4, col: 0, rowspan: 3, colspan: 1 }, // 第二个部门名称跨3行
+  { row: 4, col: 1, rowspan: 3, colspan: 1 }, // 第二个负责人跨3行
+  { row: 7, col: 0, rowspan: 2, colspan: 1 }, // 第三个部门名称跨2行
+  { row: 7, col: 1, rowspan: 2, colspan: 1 }, // 第三个负责人跨2行
+];
+
+// 动态合并单元格配置函数
+const dynamicMergeConfig = (data) => {
+  const mergeCells = [];
+  let rowIndex = 0;
+  
+  // 为每个部门生成合并单元格配置
+  data.forEach(dept => {
+    const rowCount = getRowCount(dept);
+    
+    // 如果有子节点，合并部门名称和负责人列
+    if (rowCount > 1) {
+      mergeCells.push({ row: rowIndex, col: 0, rowspan: rowCount, colspan: 1 }); // 部门名称
+      mergeCells.push({ row: rowIndex, col: 1, rowspan: rowCount, colspan: 1 }); // 负责人
+    }
+    
+    rowIndex += rowCount;
+  });
+  
+  return mergeCells;
+};
+
+// 计算一个节点及其子节点的总行数
+const getRowCount = (node) => {
+  if (!node.children || node.children.length === 0) {
+    return 1;
+  }
+  
+  return 1 + node.children.reduce((sum, child) => sum + getRowCount(child), 0);
+};
+</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;
+}
+
+.description {
+  margin-top: 16px;
+  color: #666;
+}
+
+.mt-2 {
+  margin-top: 16px;
+}
 </style>