@ebiz/designer-components 0.0.18-kzy.2 → 0.0.18-kzy.4

package/src/components/EbizTable.vue

@@ -1,130 +1,90 @@
 <template>
-  <t-table
-    :data="data"
-    :columns="columns"
-    :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-if="$slots.cell" #cell="slotProps">
-      <slot name="cell" v-bind="slotProps"></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>
+    <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>
@@ -134,8 +94,8 @@ export default {
 </script>
 
 <script setup>
-import { defineProps, defineEmits } from 'vue';
-import { Table as TTable } from 'tdesign-vue-next';
+import { ref, computed, onMounted, watch, provide } from 'vue';
+import { Table } from 'tdesign-vue-next';
 
 const props = defineProps({
   // 表格数据
@@ -284,8 +244,8 @@ const props = defineProps({
   },
   // 列配置器
   columnController: {
-    type: Object,
-    default: undefined
+    type: Boolean,
+    default: false
   },
   // 列配置器是否显示
   columnControllerVisible: {
@@ -335,8 +295,8 @@ const props = defineProps({
   // 拖拽排序配置
   dragSort: {
     type: String,
-    default: undefined,
-    validator: (val) => ['row', 'row-handler', 'col', 'row-handler-col', 'drag-col'].includes(val)
+    default: '',
+    validator: (val) => ['', 'row', 'col', 'row-handler', 'row-handler-col'].includes(val)
   },
   // 点击行是否选中
   selectOnRowClick: {
@@ -371,7 +331,7 @@ const props = defineProps({
   // 表头文字超出是否显示省略号
   ellipsisTitle: {
     type: Boolean,
-    default: undefined
+    default: false
   }
 });
 
@@ -395,6 +355,26 @@ const emit = defineEmits([
   '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);

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> 

package/src/components/EbizTableSort.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="ebiz-table-sort">
+    <t-popup :visible="sortVisible" trigger="click" placement="bottom-right" :overlay-style="{ width: '450px' }"
+      @visible-change="handleVisibleChange" :destroy-on-close="false">
+      <template #content>
+        <t-card :title="popupTitle" size="small" :bordered="false">
+          <div class="sort-content">
+            <div class="sort-item" v-for="(item, index) in sortItems" :key="index">
+              <div class="sort-item-content" style="display: flex; margin-bottom: 12px;">
+                <t-select v-model="item.type" :placeholder="fieldPlaceholder" :options="fieldOptions" :clearable="false"
+                  :style="{ width: '170px' }" @change="handleSortChange" />
+                <t-select v-model="item.sort" :placeholder="orderPlaceholder" :options="orderOptions" :clearable="false"
+                  :style="{ width: '170px', marginLeft: '8px' }" @change="handleSortChange" />
+                <t-button theme="default" variant="text" shape="circle" @click="removeSortItem(index)"
+                  v-if="sortItems.length > 1" :style="{ marginLeft: '8px', flexShrink: 0 }">
+                  <template #icon>
+                    <t-icon name="close" />
+                  </template>
+                </t-button>
+              </div>
+            </div>
+            <div class="sort-footer">
+              <t-button theme="default" variant="outline" @click="addSortItem"
+                v-if="sortItems.length < maxSortItems">
+                <template #icon>
+                  <t-icon name="add" />
+                </template>
+                {{ addConditionText }}
+              </t-button>
+            </div>
+          </div>
+        </t-card>
+      </template>
+      <t-button block variant="outline" :title="title">
+        <template #icon>
+          <t-icon :name="icon" />
+        </template>
+        <div v-if="buttonText">
+          {{ buttonText }}
+        </div>
+      </t-button>
+    </t-popup>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EbizTableSort"
+}
+</script>
+
+<script setup>
+import { ref, computed, defineProps, defineEmits, watch } from 'vue';
+import { Button as TButton, Popup as TPopup, Card as TCard, Select as TSelect, Icon as TIcon } from 'tdesign-vue-next';
+
+const props = defineProps({
+  // v-model绑定值
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  // 按钮图标
+  icon: {
+    type: String,
+    default: 'sort'
+  },
+  // 按钮文本
+  buttonText: {
+    type: String,
+    default: ''
+  },
+  // 按钮标题
+  title: {
+    type: String,
+    default: '排序'
+  },
+  // 弹出层标题
+  popupTitle: {
+    type: String,
+    default: '排序'
+  },
+  // 字段选项
+  fieldOptions: {
+    type: Array,
+    default: () => []
+  },
+  // 字段占位符
+  fieldPlaceholder: {
+    type: String,
+    default: '选择字段'
+  },
+  // 排序选项
+  orderOptions: {
+    type: Array,
+    default: () => [
+      { value: 'asc', label: '升序 ↑' },
+      { value: 'desc', label: '降序 ↓' }
+    ]
+  },
+  // 排序占位符
+  orderPlaceholder: {
+    type: String,
+    default: '选择排序'
+  },
+  // 最大排序条件数量
+  maxSortItems: {
+    type: Number,
+    default: 5
+  },
+  // 添加条件文本
+  addConditionText: {
+    type: String,
+    default: '添加排序条件'
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'sort', 'visible-change']);
+
+// 排序弹出层显示状态
+const sortVisible = ref(false);
+
+// 排序条件列表
+const sortItems = ref([]);
+
+// 监听modelValue变化
+watch(() => props.modelValue, (newVal) => {
+  if (newVal && newVal.length > 0) {
+    sortItems.value = JSON.parse(JSON.stringify(newVal));
+  } else {
+    // 默认添加一个空的排序条件
+    sortItems.value = [{ type: '', sort: 'desc' }];
+  }
+}, { immediate: true });
+
+// 添加排序条件
+const addSortItem = () => {
+  if (sortItems.value.length < props.maxSortItems) {
+    sortItems.value.push({ type: '', sort: 'desc' });
+  }
+};
+
+// 移除排序条件
+const removeSortItem = (index) => {
+  sortItems.value.splice(index, 1);
+  handleSortChange();
+};
+
+// 处理排序变更
+const handleSortChange = () => {
+  // 过滤有效的排序条件（字段和排序方向都不为空）
+  const validSortItems = sortItems.value.filter(item => item.type && item.sort);
+  emit('update:modelValue', validSortItems);
+  emit('sort', validSortItems);
+};
+
+// 弹出层可见性变化
+const handleVisibleChange = (visible) => {
+  sortVisible.value = visible;
+  emit('visible-change', visible);
+};
+</script>
+
+<style lang="less" scoped>
+.ebiz-table-sort {
+  display: inline-block;
+  
+  .sort-content {
+    min-width: 400px;
+    width: 100%;
+  }
+
+  .sort-footer {
+    margin-top: 16px;
+  }
+
+  .sort-actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>