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

package/src/views/TreeMergeTableDemo.vue

@@ -0,0 +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;
+}
+</style> 

package/src/views/TreeSelectorDemo.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="tree-selector-demo">
+    <h2>树选择器组件演示</h2>
+    
+    <div class="demo-section">
+      <h3>基础用法</h3>
+      <t-button @click="showBasicSelector">打开基础树选择器</t-button>
+      <div class="selected-data">
+        已选择: {{ selectedBasicData.length }} 项
+        <t-tag v-for="item in selectedBasicData" :key="item.value" class="selected-tag" closable @close="removeItem(item, 'basic')">
+          {{ item.label }}
+        </t-tag>
+      </div>
+    </div>
+    
+    <div class="demo-section">
+      <h3>预选中用法</h3>
+      <t-button @click="showPreselectedSelector">打开预选中树选择器</t-button>
+      <div class="selected-data">
+        已选择: {{ selectedPreData.length }} 项
+        <t-tag v-for="item in selectedPreData" :key="item.value" class="selected-tag" closable @close="removeItem(item, 'pre')">
+          {{ item.label }}
+        </t-tag>
+      </div>
+    </div>
+    
+    <div class="demo-section">
+      <h3>自定义禁用规则</h3>
+      <t-button @click="showCustomDisabledSelector">打开禁用员工选择树选择器</t-button>
+      <div class="selected-data">
+        已选择: {{ selectedDisabledData.length }} 项
+        <t-tag v-for="item in selectedDisabledData" :key="item.value" class="selected-tag" closable @close="removeItem(item, 'disabled')">
+          {{ item.label }}
+        </t-tag>
+      </div>
+    </div>
+
+    <!-- 基础树选择器 -->
+    <EbizTreeSelector 
+      v-model="selectedBasicData"
+      :data="treeData"
+      title="选择人员/部门"
+      @change="handleChange"
+    />
+    
+    <!-- 预选中树选择器 -->
+    <EbizTreeSelector 
+      v-model="selectedPreData"
+      :data="treeData"
+      title="预选中的树选择器"
+    />
+    
+    <!-- 自定义禁用规则树选择器 -->
+    <EbizTreeSelector 
+      v-model="selectedDisabledData"
+      :data="treeData"
+      title="仅选择部门和岗位"
+      :disable-check="disableEmployeeCheck"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { MessagePlugin } from 'tdesign-vue-next';
+import EbizTreeSelector from '../components/EbizTreeSelector.vue';
+
+// 树形数据
+const treeData = {
+  organization: [
+    {
+      label: "强瑞科技",
+      value: "1",
+      children: [
+        {
+          label: "总经办",
+          value: "1.1",
+          type: "department"
+        },
+        {
+          label: "研发部",
+          value: "1.2",
+          type: "department",
+          children: [
+            {
+              label: "前端组",
+              value: "1.2.1",
+              type: "department"
+            },
+            {
+              label: "后端组",
+              value: "1.2.2",
+              type: "department"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  department: [
+    {
+      label: "总经办",
+      value: "1.1",
+      type: "department"
+    },
+    {
+      label: "研发部",
+      value: "1.2",
+      type: "department",
+      children: [
+        {
+          label: "前端组",
+          value: "1.2.1",
+          type: "department"
+        },
+        {
+          label: "后端组",
+          value: "1.2.2",
+          type: "department"
+        }
+      ]
+    },
+    {
+      label: "人事部",
+      value: "1.3",
+      type: "department"
+    }
+  ],
+  position: [
+    {
+      label: "工程师",
+      value: "pos1",
+      type: "position",
+      children: [
+        {
+          label: "前端工程师",
+          value: "pos1.1",
+          type: "position"
+        },
+        {
+          label: "后端工程师",
+          value: "pos1.2",
+          type: "position"
+        }
+      ]
+    },
+    {
+      label: "设计师",
+      value: "pos2",
+      type: "position"
+    }
+  ],
+  employee: [
+    {
+      label: "张三",
+      value: "emp1",
+      type: "employee"
+    },
+    {
+      label: "李四",
+      value: "emp2",
+      type: "employee"
+    },
+    {
+      label: "王五",
+      value: "emp3",
+      type: "employee"
+    }
+  ]
+};
+
+// 已选择数据
+const selectedBasicData = ref([]);
+const selectedPreData = ref([
+  {
+    label: "研发部",
+    value: "1.2",
+    type: "department"
+  },
+  {
+    label: "张三",
+    value: "emp1",
+    type: "employee"
+  }
+]);
+const selectedDisabledData = ref([]);
+
+// 打开选择器
+const showBasicSelector = () => {
+  document.querySelectorAll('.t-dialog')[0]?.classList.add('show-dialog');
+};
+
+const showPreselectedSelector = () => {
+  document.querySelectorAll('.t-dialog')[1]?.classList.add('show-dialog');
+};
+
+const showCustomDisabledSelector = () => {
+  document.querySelectorAll('.t-dialog')[2]?.classList.add('show-dialog');
+};
+
+// 自定义禁用检查（禁用员工选择）
+const disableEmployeeCheck = (node) => {
+  return node.type === 'employee';
+};
+
+// 移除已选项
+const removeItem = (item, type) => {
+  if (type === 'basic') {
+    selectedBasicData.value = selectedBasicData.value.filter(i => i.value !== item.value);
+  } else if (type === 'pre') {
+    selectedPreData.value = selectedPreData.value.filter(i => i.value !== item.value);
+  } else if (type === 'disabled') {
+    selectedDisabledData.value = selectedDisabledData.value.filter(i => i.value !== item.value);
+  }
+};
+
+// 监听变更
+const handleChange = (value) => {
+  MessagePlugin.success(`选择变更，已选择 ${value.length} 项`);
+};
+</script>
+
+<style scoped>
+.tree-selector-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+  padding: 20px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.selected-data {
+  margin-top: 16px;
+  padding: 10px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  min-height: 40px;
+}
+
+.selected-tag {
+  margin: 4px;
+}
+</style> 

package/src/views/UploadDemo.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="upload-demo-container">
+    <h2>上传组件示例</h2>
+    
+    <div class="demo-section">
+      <h3>基础用法</h3>
+      <EbizUpload
+        :useInternalUpload="true"
+        :auto-upload="true"
+        tips="请选择文件上传"
+      >
+        <template #default>
+          <t-button>点击选择文件</t-button>
+        </template>
+      </EbizUpload>
+    </div>
+    
+    <div class="demo-section">
+      <h3>拖拽上传</h3>
+      <EbizUpload
+        :useInternalUpload="true"
+        :draggable="true"
+        :auto-upload="true"
+        tips="将文件拖拽到此区域即可上传"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h3>多文件上传</h3>
+      <EbizUpload
+        :useInternalUpload="true"
+        :multiple="true"
+        :auto-upload="true"
+        tips="可选择多个文件上传"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h3>图片上传</h3>
+      <EbizUpload
+        :useInternalUpload="true"
+        theme="image"
+        accept="image/*"
+        :auto-upload="true"
+        tips="请选择图片上传"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h3>手动上传</h3>
+      <EbizUpload
+        :useInternalUpload="true"
+        :auto-upload="false"
+        tips="选择文件后需手动点击上传按钮"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h3>文件大小限制</h3>
+      <EbizUpload
+        :useInternalUpload="true"
+        :size-limit="{ size: 1024, unit: 'KB' }"
+        :auto-upload="true"
+        tips="文件大小不能超过1MB"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h3>自定义上传按钮</h3>
+      <EbizUpload
+        :useInternalUpload="true"
+        :auto-upload="true"
+        theme="custom"
+      >
+        <template #default>
+          <t-button>点击选择文件</t-button>
+        </template>
+      </EbizUpload>
+    </div>
+
+    <div class="demo-section">
+      <h3>使用外部上传服务</h3>
+      <EbizUpload
+        :useInternalUpload="false"
+        action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
+        :auto-upload="true"
+        tips="使用自定义上传地址"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UploadDemo'
+};
+</script>
+
+<script setup>
+import { EbizUpload } from '../index.js';
+import { Button as TButton } from 'tdesign-vue-next';
+</script>
+
+<style lang="less" scoped>
+.upload-demo-container {
+  padding: 20px;
+
+  .demo-section {
+    margin-bottom: 30px;
+    padding: 20px;
+    border: 1px solid #eaeaea;
+    border-radius: 4px;
+
+    h3 {
+      margin-top: 0;
+      margin-bottom: 16px;
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+}
+</style> 

package/src/views/WatermarkDemo.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="watermark-demo">
+    <h1>水印组件演示</h1>
+    <div class="demo-section">
+      <h2>基础用法</h2>
+      <div class="demo-card">
+        <EbizWatermark :watermarkContent="{ text: 'TDesign 水印示例' }">
+          <div class="content-box">
+            <p>这是被水印覆盖的内容</p>
+            <p>水印会显示在此内容之上</p>
+          </div>
+        </EbizWatermark>
+      </div>
+    </div>
+
+    <t-watermark :watermark-content="{ text: '文字水印' }" :y="120" :x="80" :width="120" :height="60">
+      <div style="width: 100%; height: 300px" />
+    </t-watermark>
+
+    <div class="demo-section">
+      <h2>自定义透明度和角度</h2>
+      <div class="demo-card">
+        <EbizWatermark :watermarkContent="{ text: 'TDesign 水印' }" :alpha="0.2" :rotate="0">
+          <div class="content-box">
+            <p>此水印透明度为0.2且角度为0</p>
+          </div>
+        </EbizWatermark>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h2>自定义间距和大小</h2>
+      <div class="demo-card">
+        <EbizWatermark :watermarkContent="{ text: '自定义水印' }" :width="150" :height="80" :gapX="100" :gapY="100">
+          <div class="content-box">
+            <p>此水印设置了自定义的宽高和间距</p>
+          </div>
+        </EbizWatermark>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h2>可移动水印</h2>
+      <div class="demo-card">
+        <EbizWatermark :watermarkContent="{ text: '可移动水印' }" :movable="true">
+          <div class="content-box">
+            <p>此水印可以随着页面滚动而移动</p>
+          </div>
+        </EbizWatermark>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { EbizWatermark } from '../index.js';
+import { Watermark as TWatermark } from 'tdesign-vue-next';
+</script>
+
+<style scoped>
+.watermark-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+}
+
+.demo-card {
+  border: 1px solid #eee;
+  border-radius: 8px;
+  margin-top: 10px;
+  background-color: #fafafa;
+  overflow: hidden;
+}
+
+.content-box {
+  padding: 40px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+</style>