@ebiz/designer-components 0.0.18-beta.25 → 0.0.18-beta.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.18-beta.25",
+  "version": "0.0.18-beta.27",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/EbizDialog.vue

@@ -0,0 +1,249 @@
+<template>
+    <t-dialog
+        v-model:visible="dialogVisible"
+        :attach="attach"
+        :body-class="bodyClass"
+        :body-scroll-lock="bodyScrollLock"
+        :cancel-btn="cancelBtn"
+        :class-prefix="classPrefix"
+        :close-btn="closeBtn"
+        :close-on-esc-keydown="closeOnEscKeydown"
+        :close-on-overlay-click="closeOnOverlayClick"
+        :confirm-btn="confirmBtn"
+        :content="content"
+        :default-visible="defaultVisible"
+        :destroy-on-close="destroyOnClose"
+        :dialog-class="dialogClass"
+        :draggable="draggable"
+        :footer="footer"
+        :header="header"
+        :mode="mode"
+        :placement="placement"
+        :prevent-scroll-through="preventScrollThrough"
+        :show-overlay="showOverlay"
+        :top="top"
+        :width="width"
+        :zIndex="zIndex"
+        @cancel="handleCancel"
+        @close="handleClose"
+        @closed="handleClosed"
+        @confirm="handleConfirm"
+        @opened="handleOpened"
+        @overlay-click="handleOverlayClick"
+        @update:visible="handleUpdateVisible"
+    >
+        <!-- 默认插槽 -->
+        <slot></slot>
+        
+        <!-- 页脚插槽 -->
+        <template v-if="$slots.footer" #footer>
+            <slot name="footer"></slot>
+        </template>
+        
+        <!-- 头部插槽 -->
+        <template #header>
+            <slot name="header">{{ title }}</slot>
+        </template>
+    </t-dialog>
+</template>
+
+<script>
+export default {
+    name: "EbizDialog"
+}
+</script>
+
+<script setup>
+import { ref, defineProps, defineEmits, watch } from 'vue';
+import { Dialog as TDialog } from 'tdesign-vue-next';
+
+// 定义组件接收的属性
+const props = defineProps({
+    // 对话框挂载的节点
+    attach: {
+        type: [String, Function, Element],
+        default: 'body'
+    },
+    // 对话框内容的类名
+    bodyClass: {
+        type: String,
+        default: ''
+    },
+    // 是否锁定body滚动
+    bodyScrollLock: {
+        type: Boolean,
+        default: true
+    },
+    // 取消按钮配置
+    cancelBtn: {
+        type: [String, Object, Boolean],
+        default: null
+    },
+    // 类名前缀
+    classPrefix: {
+        type: String,
+        default: 't'
+    },
+    // 关闭按钮配置
+    closeBtn: {
+        type: [String, Object, Boolean],
+        default: true
+    },
+    // 是否支持按ESC键关闭对话框
+    closeOnEscKeydown: {
+        type: Boolean,
+        default: true
+    },
+    // 点击蒙层是否关闭
+    closeOnOverlayClick: {
+        type: Boolean,
+        default: true
+    },
+    // 确认按钮配置
+    confirmBtn: {
+        type: [String, Object, Boolean],
+        default: '确认'
+    },
+    // 对话框内容
+    content: {
+        type: [String, Function],
+        default: ''
+    },
+    // 默认是否显示对话框
+    defaultVisible: {
+        type: Boolean,
+        default: false
+    },
+    // 关闭时是否销毁对话框
+    destroyOnClose: {
+        type: Boolean,
+        default: false
+    },
+    // 对话框样式类
+    dialogClass: {
+        type: String,
+        default: ''
+    },
+    // 是否可拖拽
+    draggable: {
+        type: Boolean,
+        default: false
+    },
+    // 底部内容
+    footer: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 头部内容
+    header: {
+        type: [Boolean, Function],
+        default: true
+    },
+    // 对话框类型
+    mode: {
+        type: String,
+        default: 'modal',
+        validator: (val) => ['modal', 'modeless', 'full-screen'].includes(val)
+    },
+    // 对话框位置
+    placement: {
+        type: String,
+        default: 'top',
+        validator: (val) => ['top', 'center'].includes(val)
+    },
+    // 防止滚动穿透
+    preventScrollThrough: {
+        type: Boolean,
+        default: true
+    },
+    // 是否显示遮罩层
+    showOverlay: {
+        type: Boolean,
+        default: true
+    },
+    // 对话框标题
+    title: {
+        type: [String, Function],
+        default: ''
+    },
+    // 距离顶部的位置
+    top: {
+        type: [String, Number],
+        default: '15%'
+    },
+    // 对话框可见性
+    visible: {
+        type: Boolean,
+        default: undefined
+    },
+    // 对话框宽度
+    width: {
+        type: [String, Number],
+        default: '500px'
+    },
+    // 对话框层级
+    zIndex: {
+        type: Number,
+        default: 2500
+    }
+});
+
+// 定义组件的事件
+const emit = defineEmits([
+    'cancel', 
+    'close', 
+    'closed',
+    'confirm',
+    'opened',
+    'overlay-click',
+    'update:visible'
+]);
+
+// 内部维护的可见性状态
+const dialogVisible = ref(props.visible !== undefined ? props.visible : props.defaultVisible);
+
+// 监听visible属性变化
+watch(() => props.visible, (newValue) => {
+    dialogVisible.value = newValue;
+});
+
+// 取消按钮点击事件
+const handleCancel = (e) => {
+    emit('cancel', e);
+};
+
+// 关闭事件
+const handleClose = (e) => {
+    emit('close', e);
+};
+
+// 关闭动画结束后触发
+const handleClosed = () => {
+    emit('closed');
+};
+
+// 确认按钮点击事件
+const handleConfirm = (e) => {
+    emit('confirm', e);
+};
+
+// 对话框打开动画结束后触发
+const handleOpened = () => {
+    emit('opened');
+};
+
+// 点击遮罩层触发
+const handleOverlayClick = (context) => {
+    emit('overlay-click', context);
+};
+
+// 可见性变化事件
+const handleUpdateVisible = (visible) => {
+    dialogVisible.value = visible;
+    emit('update:visible', visible);
+};
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

package/src/components/EbizRemoteSelect.vue

@@ -142,7 +142,8 @@ const focus = () => {
 
 defineExpose({
     focus,
-    selectRef
+    selectRef,
+    options
 });
 
 // 远程搜索处理函数
@@ -163,6 +164,7 @@ const handleRemoteSearch = async (keyword) => {
         const { labelField, valueField } = props.optionsConfig;
 
         options.value = res.data.map(item => ({
+            ...item,
             label: labelField ? item[labelField] : (item.label || item.name),
             value: valueField ? item[valueField] : (item.value || item.id)
         }));
@@ -211,6 +213,7 @@ onMounted(async () => {
             const { labelField, valueField } = props.optionsConfig;
 
             options.value = res.data.map(item => ({
+                ...item,
                 label: labelField ? item[labelField] : (item.label || item.name),
                 value: valueField ? item[valueField] : (item.value || item.id)
             }));

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>