@ebiz/designer-components 0.0.1-9.bata.1

package/src/components/EbizTabHeader.vue

@@ -0,0 +1,145 @@
+<template>
+  <tiny-tabs v-model="showTab" :tab-style="props.tabStyle" activeColor="#5e7ce0" @click="tabChange">
+    <tiny-tab-item activeColor="#5e7ce0" v-for="i in showTabs" :key="i.value" :title="i.label"
+      :name="i.value.toString()" />
+  </tiny-tabs>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { TinyTabs, TinyTabItem } from '@opentiny/vue'
+import { dataService } from "../index.js"
+
+const emit = defineEmits(['tabChange'])
+
+const props = defineProps({
+  // 远程请求的配置
+  apiConfig: {
+    type: Object,
+    default: () => ({
+      key: null,
+      apiId: null,
+      apiType: 'MULTIPLE_DATA_SEARCH',
+    }),
+  },
+  // 不使用用远程的tabs
+  tabs: {
+    type: Array,
+    default: () => [],
+  },
+  // tab名称对应的字段
+  labelKey: {
+    type: String,
+    default: 'name'
+  },
+  // tab value对应的字段
+  valueKey: {
+    type: String,
+    default: 'id'
+  },
+  // 标签卡样式
+  tabStyle: {
+    type: String,
+    default: ''
+  },
+  // 展示值
+  showTab: {
+    type: String,
+    default: ''
+  },
+  // 绑定值
+  currentTab: {
+    type: String,
+    default: ''
+  },
+})
+
+// 远程请求的tabs
+const remoteTabs = ref([])
+
+// 展示的tabs
+const showTabs = computed(() => {
+  console.log(props.tabs, 66, 110)
+  if (remoteTabs.value.length) return [{ label: '全部', value: '0' }, ...remoteTabs.value];
+  if (props.tabs.length) return props.tabs
+  return [{ label: '全部', value: '0' }]
+})
+
+// 展示的值
+const showTab = computed(() => {
+  if (props.showTab) return props.showTab
+  return props.currentTab || '0'
+})
+
+// methods
+const tabChange = (e) => {
+  emit('tabChange', e.name === '0' ? '' : e.name)
+}
+
+// init
+watch(() => showTabs.value, () => {
+  tabChange({ name: showTab.value })
+})
+
+watch(() => props.apiConfig, (nVal) => {
+  if (!nVal?.apiId) return
+  dataService.fetch({}, { key: nVal.key, apiId: nVal.apiId, apiType: 'MULTIPLE_DATA_SEARCH' }).then(res => {
+    remoteTabs.value = (res.data ?? []).map(i => ({
+      label: i[props.labelKey],
+      value: i[props.valueKey],
+    }))
+  })
+}, { immediate: true })
+</script>
+
+<style scoped lang="less">
+:deep(.tiny-tabs__item.is-active) {
+  color: #5e7ce0;
+}
+
+:deep(.tiny-tabs__active-bar) {
+  background: #5e7ce0;
+  height: 4px;
+}
+
+:deep(.tiny-tabs__content) {
+  display: none;
+}
+
+:deep(.tiny-tabs__nav) {
+  border-bottom: 1px solid #e8e8e8;
+  margin-bottom: 0;
+}
+
+:deep(.tiny-tabs__item) {
+  padding: 0 20px;
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
+  color: #606266;
+  transition: color 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    color: #5e7ce0;
+  }
+}
+
+:deep(.tiny-tabs__header) {
+  margin-bottom: 0;
+  overflow: hidden;
+  position: relative;
+  white-space: nowrap;
+}
+
+:deep(.tiny-tabs__nav-wrap) {
+  overflow: hidden;
+  position: relative;
+  white-space: nowrap;
+}
+
+:deep(.tiny-tabs__nav-scroll) {
+  overflow: hidden;
+  white-space: nowrap;
+}
+</style>

package/src/components/EbizTabPanel.vue

@@ -0,0 +1,23 @@
+<template>
+  <tab-panel
+    :value="value"
+    :label="label"
+    :disabled="disabled"
+    :removable="removable"
+    :destroyOnHide="destroyOnHide"
+    :draggable="draggable"
+    @remove="handleRemove"
+  >
+    <slot></slot>
+  </tab-panel>
+</template>
+
+<script>
+import { TabPanel } from 'tdesign-vue-next';
+
+export default TabPanel;
+</script>
+
+<style lang="less" scoped>
+/* 自定义样式 */
+</style> 

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>