@ebiz/designer-components 0.0.18-kzy.1 → 0.0.18-kzy.3

package/package.json

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

package/src/apiService/simpleDataService.js

@@ -7,8 +7,10 @@
 import axios from 'axios'
 import { TinyNotify } from '@opentiny/vue'
 
-// 从环境变量获取API基础URL
-const API_BASE_URL = "http://localhost:8090/api";
+// 本地开发使用
+// const API_BASE_URL = "http://localhost:8090/api";
+// 组件发布使用
+const API_BASE_URL = 'http://' + window.location.host + '/api'
 
 /**
  * 创建axios实例

package/src/components/Button copy.vue

@@ -0,0 +1,104 @@
+<template>
+    <tiny-tooltip :content="!isNormal && !apiConfig.apiId ? tooltipText : ''" placement="top">
+
+        <tiny-button :disabled="disabled" :type="type" :size="size" @click="click">
+            <slot>{{ text }}</slot>
+        </tiny-button>
+
+    </tiny-tooltip>
+</template>
+
+
+<script lang='js'>
+export default {
+    name: "EbizButton"
+}
+</script>
+
+<script lang='js' setup>
+
+import { ref, reactive, computed, toRef, toRefs } from 'vue';
+import { TinyButton, TinyTooltip, TinyNotify } from '@opentiny/vue';
+import dataService from '../apiService/simpleDataService';
+
+
+const props = defineProps({
+    text: {
+        type: String,
+        default: ''
+    },
+    isNormal: {//是否为普通按钮
+        type: Boolean,
+        default: false
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    type: {//'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
+        type: String,
+        default: 'default'
+    },
+    size: {//'large' | 'medium' | 'small' | 'mini'
+        type: String,
+        default: 'medium'
+    },
+    apiConfig: {//接口配置
+        type: Object,
+        default: {
+            key: null,
+            apiId: null,
+            apiType: ''
+        }
+    },
+    data: {
+        type: Object,
+        default: {}
+    },
+    onClick: {
+        type: Function,
+        default: () => { }
+    },
+    onPrepare: {//调用接口前置事件
+        type: Function,
+        default: () => { }
+    },
+    onFinish: {//调用接口后置事件
+        type: Function,
+        default: () => { }
+    }
+})
+
+const apiMap = [
+    'MULTIPLE_DATA_SEARCH',
+    'DETAILS_DATA',
+    'INTERFACE_PLUGIN',
+    'DATA_INSERT',
+    'BATCH_DATA_INSERT',
+    'DATA_MODIFY',
+    'BATCH_DATA_MODIFY',
+    'DEL_DATA',
+    'BATCH_DEL_DATA',
+    'MULTIPLE_DATA_LINK_SEARCH'
+];
+
+const emit = defineEmits(['click'])
+
+const { text, isNormal, disabled, type, size, apiConfig, data, isUseMethod } = toRefs(props)
+
+const tooltipText = ref('请先设置接口配置')
+
+const click = () => {
+    props.onClick()
+    if (!isNormal.value && apiConfig.value.apiId) {
+        props.onPrepare()
+        dataService.fetch(data.value, { key: apiConfig.value.key, apiId: apiConfig.value.apiId, apiType: apiMap[apiConfig.value.apiType] }).then((res) => {
+            emit('click', res)
+            props.onFinish()
+        })
+    }
+}
+
+</script>
+
+<style lang='less' scoped></style>

package/src/components/EbizRemoteSelect.vue

@@ -62,7 +62,7 @@ const props = defineProps({
      */
     clearable: {
         type: Boolean,
-        default: true
+        default: false
     },
     /**
      * 是否禁用
@@ -155,11 +155,16 @@ const handleRemoteSearch = async (keyword) => {
                 keyword
             }
         };
-        const res = await dataService.fetch(params, props.apiConfig);
+        const res = await dataService.fetch(params, {
+            key: props.apiConfig.key,
+            apiId: props.apiConfig.apiId,
+            apiType: 'MULTIPLE_DATA_SEARCH'
+        });
 
         options.value = res.data.map(item => ({
-            label: labelField ? item[labelField] : item.name,
-            value: valueField ? item[valueField] : item.id
+            ...item,
+            label: labelField.value ? item[labelField.value] : (item.label || item.name),
+            value: valueField.value ? item[valueField.value] : (item.value || item.id)
         }));
     } catch (error) {
         console.error('远程搜索失败:', error);
@@ -188,7 +193,11 @@ const handleBlur = (value, context) => {
 const handleChange = (value, context) => {
     emit('update:modelValue', value);
     emit('change', value, context);
-    emit('selectOption', options.value.find(item => item.value === value));
+    if (value instanceof Array) {
+        emit('selectOption', options.value.filter(item => value.includes(item.value)));
+    } else {
+        emit('selectOption', options.value.find(item => item.value === value));
+    }
 };
 
 // 组件挂载时，如果有默认值则加载对应的选项
@@ -205,10 +214,10 @@ onMounted(async () => {
                 apiType: 'MULTIPLE_DATA_SEARCH'
             });
 
-            console.log('res', res)
             options.value = res.data.map(item => ({
-                label: labelField ? item[labelField] : item.name,
-                value: valueField ? item[valueField] : item.id
+                ...item,
+                label: labelField.value ? item[labelField.value] : (item.label || item.name),
+                value: valueField.value ? item[valueField.value] : (item.value || item.id)
             }));
         } catch (error) {
             console.error('加载默认选项失败:', error);

package/src/components/EbizRouteBreadcrumb.vue

@@ -29,7 +29,9 @@ export default {
       const matched = route.matched.filter(item => item.meta && item.meta.title)
       return matched.map(item => ({
         title: item.meta.title,
-        path: item.path
+        path: {
+          path: item.path
+        }
       }))
     })
 

package/src/components/EbizStatusBadge.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="ebiz-status-badge" :style="containerStyle">
+    <div class="status-indicator" :style="indicatorStyle"></div>
+    <div class="status-text" v-if="showText">{{ text }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EbizStatusBadge"
+}
+</script>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  /**
+   * 状态类型
+   */
+  status: {
+    type: String,
+    default: 'default',
+    validator: (val) => ['default', 'success', 'warning', 'error', 'processing'].includes(val)
+  },
+  /**
+   * 自定义颜色
+   */
+  color: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 自定义预设颜色映射
+   */
+  colorMap: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * 指示点大小
+   */
+  size: {
+    type: [String, Number],
+    default: 'small',
+    validator: (val) => ['small', 'medium', 'large'].includes(val) || typeof val === 'number'
+  },
+  /**
+   * 是否显示文字
+   */
+  showText: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 状态文字
+   */
+  text: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 状态点位置
+   */
+  position: {
+    type: String,
+    default: 'left',
+    validator: (val) => ['left', 'right', 'top', 'bottom'].includes(val)
+  },
+  /**
+   * 闪烁效果
+   */
+  pulse: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// 获取预设状态颜色
+const getStatusColor = (status) => {
+  const defaultColorMap = {
+    default: '#999999',
+    success: '#35c613',
+    warning: '#ed7b2f',
+    error: '#e34d59',
+    processing: '#0052d9'
+  };
+  
+  // 优先使用props.color，其次使用用户提供的colorMap，最后使用默认颜色
+  return props.color || props.colorMap[status] || defaultColorMap[status];
+};
+
+// 获取点大小
+const getSize = () => {
+  if (typeof props.size === 'number') {
+    return `${props.size}px`;
+  }
+  
+  const sizeMap = {
+    small: '6px',
+    medium: '10px',
+    large: '14px'
+  };
+  
+  return sizeMap[props.size];
+};
+
+// 计算指示器样式
+const indicatorStyle = computed(() => {
+  const style = {
+    backgroundColor: getStatusColor(props.status),
+    width: getSize(),
+    height: getSize(),
+    animationName: props.pulse ? 'ebiz-status-pulse' : 'none'
+  };
+  
+  return style;
+});
+
+// 计算容器样式
+const containerStyle = computed(() => {
+  const style = {
+    flexDirection: 'row', // 默认水平排列
+  };
+  
+  // 根据位置调整排列方向
+  if (props.position === 'top' || props.position === 'bottom') {
+    style.flexDirection = props.position === 'top' ? 'column-reverse' : 'column';
+  } else {
+    style.flexDirection = props.position === 'left' ? 'row' : 'row-reverse';
+  }
+  
+  return style;
+});
+</script>
+
+<style scoped>
+.ebiz-status-badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.status-indicator {
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.status-text {
+  margin-left: 8px;
+}
+
+.ebiz-status-badge[style*="column"] .status-text {
+  margin-left: 0;
+  margin-top: 4px;
+}
+
+.ebiz-status-badge[style*="row-reverse"] .status-text {
+  margin-left: 0;
+  margin-right: 8px;
+}
+
+@keyframes ebiz-status-pulse {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.2);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.status-indicator[style*="ebiz-status-pulse"] {
+  animation: ebiz-status-pulse 1.5s infinite ease-in-out;
+}
+</style> 

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);