@ebiz/designer-components 0.0.18-tj.1 → 0.0.19-beta.1

package/src/components/EbizTable.vue

@@ -0,0 +1,466 @@
+<template>
+  <div>
+    <t-table :data="data" :columns="mergedColumns" :row-key="rowKey" :vertical-align="verticalAlign"
+      :horizontal-align="horizontalAlign" :size="size" :bordered="bordered" :stripe="stripe" :hover="hover"
+      :height="height" :max-height="maxHeight" :loading="loading" :loading-props="loadingProps" :load-more="loadMore"
+      :empty="empty" :table-layout="tableLayout" :cell-empty-content="cellEmptyContent" :pagination="pagination"
+      :show-header="showHeader" :header-affixed-top="headerAffixedTop" :footer-affixed-bottom="footerAffixedBottom"
+      :top-content="topContent" :bottom-content="bottomContent" :sort="sort" :filter-value="filterValue"
+      :filter-icon="filterIcon" :tree="tree" :resizable="resizable" :column-controller="columnController"
+      :column-controller-visible="columnControllerVisible" :expandable="expandable" :disabled-sort="disabledSort"
+      :virtual-scroll="virtualScroll" :indent="indent" :row-attributes="rowAttributes" :scroll="scroll"
+      :show-sort-column-bg="showSortColumnBg" :allow-sort-by-click-header="allowSortByClickHeader" :dragSort="dragSort"
+      :select-on-row-click="selectOnRowClick" :merge-cells="mergeCells" :value="value" :row-className="rowClassName"
+      :fixed-rows="fixedRows" :highlight-current-row="highlightCurrentRow" :ellipsis-title="ellipsisTitle"
+      @page-change="handlePageChange" @sort-change="handleSortChange" @filter-change="handleFilterChange"
+      @select-change="handleSelectChange" @expanded-change="handleExpandedChange" @cell-click="handleCellClick"
+      @row-click="handleRowClick" @row-hover="handleRowHover" @row-dblclick="handleRowDblclick" @scroll="handleScroll"
+      @column-change="handleColumnChange" @expand-all="handleExpandAll" @tree-expand-change="handleTreeExpandChange"
+      @display-columns-change="handleDisplayColumnsChange"
+      @column-controller-visible-change="handleColumnControllerVisibleChange" @drag-sort="handleDragSort"
+      @validate="handleValidate">
+
+
+
+      <!-- 顶部内容插槽 -->
+      <template v-if="$slots.topContent" #topContent>
+        <slot name="topContent"></slot>
+      </template>
+
+      <!-- 底部内容插槽 -->
+      <template v-if="$slots.bottomContent" #bottomContent>
+        <slot name="bottomContent"></slot>
+      </template>
+
+      <!-- 空状态插槽 -->
+      <template v-if="$slots.empty" #empty>
+        <slot name="empty"></slot>
+      </template>
+
+      <!-- 加载更多插槽 -->
+      <template v-if="$slots.loadMore" #loadMore>
+        <slot name="loadMore"></slot>
+      </template>
+
+      <!-- 表头插槽 -->
+      <template v-if="$slots.header" #header>
+        <slot name="header"></slot>
+      </template>
+
+      <!-- 表尾插槽 -->
+      <template v-if="$slots.footer" #footer>
+        <slot name="footer"></slot>
+      </template>
+
+      <!-- 自定义单元格插槽 -->
+      <template v-for="column in dynamicColumns" :key="column.colKey" v-if="column.cell" #[column.cell]="cellProps">
+        <slot :name="`cell-${column.colKey}`" v-bind="cellProps"></slot>
+      </template>
+      <template v-for="column in dynamicColumns" :key="column.colKey" v-if="column.title" #[column.title]="titleProps">
+        <slot :name="`title-${column.colKey}`" v-bind="titleProps"></slot>
+      </template>
+
+      <!-- 展开行插槽 -->
+      <template v-if="$slots.expandedRow" #expandedRow="slotProps">
+        <slot name="expandedRow" v-bind="slotProps"></slot>
+      </template>
+
+      <!-- 过滤图标插槽 -->
+      <template v-if="$slots.filterIcon" #filterIcon="slotProps">
+        <slot name="filterIcon" v-bind="slotProps"></slot>
+      </template>
+
+      <!-- 自定义列配置按钮插槽 -->
+      <template v-if="$slots.columnController" #columnController="slotProps">
+        <slot name="columnController" v-bind="slotProps"></slot>
+      </template>
+
+      <!-- 自定义分页器插槽 -->
+      <template v-if="$slots.pagination" #pagination="slotProps">
+        <slot name="pagination" v-bind="slotProps"></slot>
+      </template>
+
+      <!-- 默认插槽 -->
+      <slot></slot>
+    </t-table>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: "EbizTable"
+}
+</script>
+
+<script setup>
+import { ref, computed, onMounted, watch, provide } from 'vue';
+import { Table } from 'tdesign-vue-next';
+
+const props = defineProps({
+  // 表格数据
+  data: {
+    type: Array,
+    default: () => []
+  },
+  // 表格列配置
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  // 唯一标识字段
+  rowKey: {
+    type: String,
+    default: 'id'
+  },
+  // 垂直对齐方式
+  verticalAlign: {
+    type: String,
+    default: 'middle',
+    validator: (val) => ['top', 'middle', 'bottom'].includes(val)
+  },
+  // 水平对齐方式
+  horizontalAlign: {
+    type: String,
+    default: 'left',
+    validator: (val) => ['left', 'center', 'right'].includes(val)
+  },
+  // 表格尺寸
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (val) => ['small', 'medium', 'large'].includes(val)
+  },
+  // 是否显示表格边框
+  bordered: {
+    type: Boolean,
+    default: false
+  },
+  // 是否显示斑马纹
+  stripe: {
+    type: Boolean,
+    default: false
+  },
+  // 是否开启悬停效果
+  hover: {
+    type: Boolean,
+    default: true
+  },
+  // 表格高度
+  height: {
+    type: [String, Number],
+    default: undefined
+  },
+  // 表格最大高度
+  maxHeight: {
+    type: [String, Number],
+    default: undefined
+  },
+  // 是否处于加载状态
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  // 加载状态配置
+  loadingProps: {
+    type: Object,
+    default: () => ({})
+  },
+  // 加载更多配置
+  loadMore: {
+    type: [String, Function],
+    default: undefined
+  },
+  // 空数据呈现配置
+  empty: {
+    type: [String, Function],
+    default: undefined
+  },
+  // 表格布局方式
+  tableLayout: {
+    type: String,
+    default: 'fixed',
+    validator: (val) => ['auto', 'fixed'].includes(val)
+  },
+  // 单元格空内容处理
+  cellEmptyContent: {
+    type: [String, Function],
+    default: undefined
+  },
+  // 分页配置
+  pagination: {
+    type: Object,
+    default: undefined
+  },
+  // 是否显示表头
+  showHeader: {
+    type: Boolean,
+    default: true
+  },
+  // 表头吸顶设置
+  headerAffixedTop: {
+    type: [Boolean, Object],
+    default: false
+  },
+  // 表尾吸底设置
+  footerAffixedBottom: {
+    type: [Boolean, Object],
+    default: false
+  },
+  // 表格顶部内容
+  topContent: {
+    type: [String, Function],
+    default: undefined
+  },
+  // 表格底部内容
+  bottomContent: {
+    type: [String, Function],
+    default: undefined
+  },
+  // 排序配置
+  sort: {
+    type: [Object, Array],
+    default: undefined
+  },
+  // 过滤值
+  filterValue: {
+    type: Object,
+    default: undefined
+  },
+  // 过滤图标
+  filterIcon: {
+    type: Function,
+    default: undefined
+  },
+  // 树形结构配置
+  tree: {
+    type: Object,
+    default: undefined
+  },
+  // 是否允许调整列宽
+  resizable: {
+    type: Boolean,
+    default: false
+  },
+  // 列配置器
+  columnController: {
+    type: Boolean,
+    default: false
+  },
+  // 列配置器是否显示
+  columnControllerVisible: {
+    type: Boolean,
+    default: undefined
+  },
+  // 展开行配置
+  expandable: {
+    type: Object,
+    default: undefined
+  },
+  // 禁用排序
+  disabledSort: {
+    type: Boolean,
+    default: false
+  },
+  // 虚拟滚动配置
+  virtualScroll: {
+    type: [Boolean, Object],
+    default: false
+  },
+  // 树形结构缩进
+  indent: {
+    type: Number,
+    default: 24
+  },
+  // 行属性配置
+  rowAttributes: {
+    type: [Object, Function],
+    default: undefined
+  },
+  // 滚动配置
+  scroll: {
+    type: Object,
+    default: undefined
+  },
+  // 是否显示排序列背景色
+  showSortColumnBg: {
+    type: Boolean,
+    default: false
+  },
+  // 是否允许点击表头排序
+  allowSortByClickHeader: {
+    type: Boolean,
+    default: true
+  },
+  // 拖拽排序配置
+  dragSort: {
+    type: String,
+    default: '',
+    validator: (val) => ['', 'row', 'col', 'row-handler', 'row-handler-col'].includes(val)
+  },
+  // 点击行是否选中
+  selectOnRowClick: {
+    type: Boolean,
+    default: false
+  },
+  // 合并单元格配置
+  mergeCells: {
+    type: Array,
+    default: undefined
+  },
+  // 选中值（多选表格）
+  value: {
+    type: Array,
+    default: undefined
+  },
+  // 行类名配置
+  rowClassName: {
+    type: [String, Function],
+    default: undefined
+  },
+  // 固定行配置
+  fixedRows: {
+    type: Array,
+    default: undefined
+  },
+  // 是否高亮当前行
+  highlightCurrentRow: {
+    type: Boolean,
+    default: false
+  },
+  // 表头文字超出是否显示省略号
+  ellipsisTitle: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits([
+  'page-change',
+  'sort-change',
+  'filter-change',
+  'select-change',
+  'expanded-change',
+  'cell-click',
+  'row-click',
+  'row-hover',
+  'row-dblclick',
+  'scroll',
+  'column-change',
+  'expand-all',
+  'tree-expand-change',
+  'display-columns-change',
+  'column-controller-visible-change',
+  'drag-sort',
+  'validate'
+]);
+
+// 动态列配置（由EbizTableColumn子组件注册）
+const dynamicColumns = ref([]);
+
+// 合并props中的columns和动态注册的columns
+const mergedColumns = computed(() => {
+  return [...props.columns, ...dynamicColumns.value];
+});
+
+// 提供注册列的方法给子组件
+const registerColumn = (column) => {
+  if (!dynamicColumns.value.some(item => item.colKey === column.colKey)) {
+    dynamicColumns.value.push(column);
+  }
+};
+
+// 提供表格上下文给子组件
+provide('tableCtx', {
+  registerColumn
+});
+
+// 分页变化
+const handlePageChange = (pageInfo) => {
+  emit('page-change', pageInfo);
+};
+
+// 排序变化
+const handleSortChange = (sort, options) => {
+  emit('sort-change', sort, options);
+};
+
+// 过滤变化
+const handleFilterChange = (filterValue, col) => {
+  emit('filter-change', filterValue, col);
+};
+
+// 选择变化
+const handleSelectChange = (selectedRowData, options) => {
+  emit('select-change', selectedRowData, options);
+};
+
+// 展开行变化
+const handleExpandedChange = (expandedRowData, options) => {
+  emit('expanded-change', expandedRowData, options);
+};
+
+// 单元格点击
+const handleCellClick = (context) => {
+  emit('cell-click', context);
+};
+
+// 行点击
+const handleRowClick = (rowData, rowIndex, row) => {
+  emit('row-click', rowData, rowIndex, row);
+};
+
+// 行悬停
+const handleRowHover = (rowData, rowIndex, row) => {
+  emit('row-hover', rowData, rowIndex, row);
+};
+
+// 行双击
+const handleRowDblclick = (rowData, rowIndex, row) => {
+  emit('row-dblclick', rowData, rowIndex, row);
+};
+
+// 表格滚动
+const handleScroll = (params) => {
+  emit('scroll', params);
+};
+
+// 列变化
+const handleColumnChange = (params) => {
+  emit('column-change', params);
+};
+
+// 全部展开变化
+const handleExpandAll = (expandAll, options) => {
+  emit('expand-all', expandAll, options);
+};
+
+// 树形展开变化
+const handleTreeExpandChange = (rowData, options) => {
+  emit('tree-expand-change', rowData, options);
+};
+
+// 显示列变化
+const handleDisplayColumnsChange = (columns) => {
+  emit('display-columns-change', columns);
+};
+
+// 列控制器显示状态变化
+const handleColumnControllerVisibleChange = (visible) => {
+  emit('column-controller-visible-change', visible);
+};
+
+// 拖拽排序变化
+const handleDragSort = (params) => {
+  emit('drag-sort', params);
+};
+
+// 校验
+const handleValidate = (context) => {
+  emit('validate', context);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/EbizTableColumn.vue

@@ -0,0 +1,117 @@
+<script setup>
+import { computed, inject, onMounted, getCurrentInstance } from 'vue';
+
+const props = defineProps({
+  // 列唯一标识
+  colKey: {
+    type: String,
+    required: true
+  },
+  // 列标题
+  title: {
+    type: String,
+    default: ''
+  },
+  // 列宽度
+  width: {
+    type: [String, Number],
+    default: ''
+  },
+  // 最小列宽
+  minWidth: {
+    type: [String, Number],
+    default: ''
+  },
+  // 水平对齐方式
+  align: {
+    type: String,
+    default: 'left',
+    validator: (val) => ['left', 'center', 'right'].includes(val)
+  },
+  // 固定列位置
+  fixed: {
+    type: String,
+    default: '',
+    validator: (val) => ['', 'left', 'right'].includes(val)
+  },
+  // 列类型
+  type: {
+    type: String,
+    default: '',
+    validator: (val) => ['', 'multiple', 'single', 'index', 'expand'].includes(val)
+  },
+  // 超出省略
+  ellipsis: {
+    type: Boolean,
+    default: false
+  },
+  // 标题超出省略
+  ellipsisTitle: {
+    type: Boolean,
+    default: false
+  },
+  // 是否支持排序
+  sorter: {
+    type: Boolean,
+    default: false
+  },
+  // 过滤配置
+  filter: {
+    type: Object,
+    default: null
+  },
+  // 自定义类名
+  className: {
+    type: String,
+    default: ''
+  },
+  // 是否禁用
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// 获取父级表格组件实例
+const tableCtx = inject('tableCtx', null);
+const instance = getCurrentInstance();
+
+// 格式化列配置对象
+const columnConfig = computed(() => {
+  return {
+    colKey: props.colKey,
+    title: props.title,
+    width: props.width,
+    minWidth: props.minWidth,
+    align: props.align,
+    fixed: props.fixed || '',
+    type: props.type || '',
+    ellipsis: props.ellipsis,
+    ellipsisTitle: props.ellipsisTitle,
+    sorter: props.sorter,
+    filter: props.filter,
+    className: props.className,
+    disabled: props.disabled,
+    cell: instance.slots.default ? props.colKey : undefined,
+    title: instance.slots.title ? `title-${props.colKey}` : undefined
+  };
+});
+
+// 在组件挂载时将列配置注册到表格组件
+onMounted(() => {
+  if (tableCtx && typeof tableCtx.registerColumn === 'function') {
+    tableCtx.registerColumn(columnConfig.value);
+  } else {
+    console.warn('EbizTableColumn必须在EbizTable内部使用');
+  }
+});
+</script>
+
+<template>
+  <template v-if="$slots.default">
+    <slot></slot>
+  </template>
+  <template v-if="$slots.title">
+    <slot name="title"></slot>
+  </template>
+</template>