@ebiz/designer-components 0.0.18-beta.9 → 0.0.18-kzy.2

package/src/components/EbizTable.vue

@@ -0,0 +1,486 @@
+<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>
+</template>
+
+<script>
+export default {
+  name: "EbizTable"
+}
+</script>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { Table as TTable } 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: Object,
+    default: undefined
+  },
+  // 列配置器是否显示
+  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: undefined,
+    validator: (val) => ['row', 'row-handler', 'col', 'row-handler-col', 'drag-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: undefined
+  }
+});
+
+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'
+]);
+
+// 分页变化
+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/TdesignDialog.vue

@@ -146,6 +146,11 @@ const props = defineProps({
 // 显示状态
 const isVisible = ref(props.visible);
 
+// 监听visible属性变化
+watch(() => props.visible, (newValue) => {
+    isVisible.value = newValue;
+});
+
 // 定义事件
 const emit = defineEmits([
     'cancel',

package/src/components/TdesignUpload.vue

@@ -55,7 +55,7 @@ export default {
 <script setup>
 import { computed, defineProps, defineEmits, ref, onMounted, watch } from 'vue';
 import { Upload as TUpload } from 'tdesign-vue-next';
-import dataServiceAppData from '../apiService/simpleDataServiceAppData';
+import dataService from '../apiService/simpleDataService';
 
 // 内部上传地址常量
 const INTERNAL_UPLOAD_URL = '/file/upload';
@@ -366,7 +366,7 @@ const customRequestMethod = (options) => {
             };
 
             // 使用dataService上传文件
-            return dataServiceAppData
+            return dataService
                 .upload(INTERNAL_UPLOAD_URL, formData, safeProgressCallback)
                 .then(response => {
                     console.log('Upload response:', response);

package/src/index.js

@@ -1,66 +1,68 @@
-import MyComponent from './components/MyComponent.vue'
-import MyTable from './components/Table.vue'
-import EbizFormContainer from './components/Form.vue'
-import EbizButton from './components/Button.vue'
-import EbizTdesignButton from './components/TdesignButton.vue'
-import EbizTdesignIcon from './components/TdesignIcon.vue'
-import EbizTdesignInput from './components/TdesignInput.vue'
-import EbizTdesignSelect from './components/TdesignSelect.vue'
-import EbizTdesignForm from './components/TdesignForm.vue'
-import EbizTdesignFormItem from './components/TdesignFormItem.vue'
-import EbizTdesignDatePicker from './components/TdesignDatePicker.vue'
-import EbizTdesignCard from './components/TdesignCard.vue'
-import EbizTdesignImage from './components/TdesignImage.vue'
-import EbizTdesignImageViewer from './components/TdesignImageViewer.vue'
-import EbizDataContainer from './components/DataContainer.vue'
-import EbizTitle from './components/EbizTitle.vue'
-import EbizDivider from './components/EbizDivider.vue'
-import EbizStatsCard from './components/EbizStatsCard.vue'
-import EbizOkrTree from './components/EbizOkrTree.vue'
-import EbizRemoteSelect from './components/EbizRemoteSelect.vue'
-import EbizMindmap from './components/EbizMindmap/index.vue'
-import EbizRouteBreadcrumb from './components/EbizRouteBreadcrumb.vue'
-import EbizFileUpload from './components/EbizFileUpload.vue'
-import EbizTabHeader from './components/EbizTabHeader.vue'
-import TdesignCalendar from './components/TdesignCalendar/index.vue'
-import TdesignCollapse from './components/TdesignCollapse.vue'
-import TdesignCollapsePanel from './components/TdesignCollapsePanel.vue'
-import EbizTag from './components/TdesignTag.vue'
-import EbizSwiper from './components/EbizSwiper.vue'
-import EbizSwiperItem from './components/EbizSwiperItem.vue'
-import EbizSpace from './components/EbizSpace.vue'
-import EbizPagination from './components/EbizPagination.vue'
-import EbizCheckbox from './components/EbizCheckbox.vue'
-import EbizCheckboxGroup from './components/EbizCheckboxGroup.vue'
-import EbizRadio from './components/EbizRadio.vue'
-import EbizRadioGroup from './components/EbizRadioGroup.vue'
-import EbizSwitch from './components/EbizSwitch.vue'
-import EbizTextarea from './components/TdesignTextarea.vue'
-import EbizUpload from './components/TdesignUpload.vue'
-import EbizGrid from './components/TdesignGrid.vue'
-import EbizCol from './components/TdesignCol.vue'
-import EbizTabs from './components/EbizTabs.vue'
-import EbizTabPanel from './components/EbizTabPanel.vue'
-import EbizStatistic from './components/EbizStatistic.vue'
-import EbizWatermark from './components/TdesignWatermark.vue'
-import EbizAvatar from './components/EbizAvatar.vue'
-import EbizEmployeeInfo from './components/EbizEmployeeInfo.vue'
-import EbizAlert from './components/TdesignAlert.vue'
-import EbizDialog from './components/TdesignDialog.vue'
-import { MessagePlugin as EbizMessage } from 'tdesign-vue-next'
+import MyComponent from "./components/MyComponent.vue";
+import MyTable from "./components/Table.vue";
+import EbizFormContainer from "./components/Form.vue";
+import EbizButton from "./components/Button.vue";
+import EbizTdesignButton from "./components/TdesignButton.vue";
+import EbizTdesignIcon from "./components/TdesignIcon.vue";
+import EbizTdesignInput from "./components/TdesignInput.vue";
+import EbizTdesignSelect from "./components/TdesignSelect.vue";
+import EbizTdesignForm from "./components/TdesignForm.vue";
+import EbizTdesignFormItem from "./components/TdesignFormItem.vue";
+import EbizTdesignDatePicker from "./components/TdesignDatePicker.vue";
+import EbizTdesignCard from "./components/TdesignCard.vue";
+import EbizTdesignImage from "./components/TdesignImage.vue";
+import EbizTdesignImageViewer from "./components/TdesignImageViewer.vue";
+import EbizDataContainer from "./components/DataContainer.vue";
+import EbizTitle from "./components/EbizTitle.vue";
+import EbizDivider from "./components/EbizDivider.vue";
+import EbizStatsCard from "./components/EbizStatsCard.vue";
+import EbizOkrTree from "./components/EbizOkrTree.vue";
+import EbizRemoteSelect from "./components/EbizRemoteSelect.vue";
+import EbizMindmap from "./components/EbizMindmap/index.vue";
+import EbizRouteBreadcrumb from "./components/EbizRouteBreadcrumb.vue";
+import EbizRichTextEditor from "./components/EbizRichTextEditor.vue";
+import EbizFileUpload from "./components/EbizFileUpload.vue";
+import EbizTabHeader from "./components/EbizTabHeader.vue";
+import TdesignCalendar from "./components/TdesignCalendar/index.vue";
+import TdesignCollapse from "./components/TdesignCollapse.vue";
+import TdesignCollapsePanel from "./components/TdesignCollapsePanel.vue";
+import EbizTag from "./components/TdesignTag.vue";
+import EbizSwiper from "./components/EbizSwiper.vue";
+import EbizSwiperItem from "./components/EbizSwiperItem.vue";
+import EbizSpace from "./components/EbizSpace.vue";
+import EbizPagination from "./components/EbizPagination.vue";
+import EbizCheckbox from "./components/EbizCheckbox.vue";
+import EbizCheckboxGroup from "./components/EbizCheckboxGroup.vue";
+import EbizRadio from "./components/EbizRadio.vue";
+import EbizRadioGroup from "./components/EbizRadioGroup.vue";
+import EbizSwitch from "./components/EbizSwitch.vue";
+import EbizTextarea from "./components/TdesignTextarea.vue";
+import EbizUpload from "./components/TdesignUpload.vue";
+import EbizGrid from "./components/TdesignGrid.vue";
+import EbizCol from "./components/TdesignCol.vue";
+import EbizTabs from "./components/EbizTabs.vue";
+import EbizTabPanel from "./components/EbizTabPanel.vue";
+import EbizStatistic from "./components/EbizStatistic.vue";
+import EbizWatermark from "./components/TdesignWatermark.vue";
+import EbizAvatar from "./components/EbizAvatar.vue";
+import EbizEmployeeInfo from "./components/EbizEmployeeInfo.vue";
+import EbizAlert from "./components/TdesignAlert.vue";
+import EbizDialog from "./components/TdesignDialog.vue";
+import EbizTable from "./components/EbizTable.vue";
+import EbizStatusBadge from "./components/EbizStatusBadge.vue";
+import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
 
 // 导入简洁数据服务
-import dataService from './apiService/simpleDataService'
-import dataServiceAppData from './apiService/simpleDataServiceAppData'
+import dataService from "./apiService/simpleDataService";
 
-import 'tdesign-vue-next/es/style/index.css'
+import "tdesign-vue-next/es/style/index.css";
 
 // 导入图表样式
-import './assets/styles/charts/main.less'
+import "./assets/styles/charts/main.less";
 
 // 时间轴组件
-import EbizTimeline from './components/TdesignTimeline.vue'
-import { TimelineItem as EbizTimelineItem } from 'tdesign-vue-next'
+import EbizTimeline from "./components/TdesignTimeline.vue";
+import {TimelineItem as EbizTimelineItem} from 'tdesign-vue-next';
 
 // 导出组件
 export {
@@ -85,6 +87,7 @@ export {
   EbizOkrTree,
   EbizRemoteSelect,
   EbizRouteBreadcrumb,
+  EbizRichTextEditor,
   EbizTabHeader,
   // 思维导图
   EbizMindmap,
@@ -111,7 +114,6 @@ export {
   EbizCheckboxGroup,
   // 数据服务
   dataService,
-  dataServiceAppData,
   // 新增 EbizRadio 和 EbizRadioGroup
   EbizRadio,
   EbizRadioGroup,
@@ -145,5 +147,9 @@ export {
   // 提示组件
   EbizAlert,
   // 对话框组件
-  EbizDialog
-}
+  EbizDialog,
+  // 表格组件
+  EbizTable,
+  // 状态标记组件
+  EbizStatusBadge
+};

package/src/main.js

@@ -20,8 +20,7 @@ import {
   EbizFileUpload,
   EbizTabHeader,
   EbizMindmap,
-  dataService,
-  dataServiceAppData
+  dataService
 } from './index.js'
 
 import 'tdesign-vue-next/es/style/index.css'
@@ -51,7 +50,6 @@ app.component('EbizMindmap', EbizMindmap)
 
 // 注册数据服务
 app.config.globalProperties.$dataService = dataService
-app.config.globalProperties.$dataServiceAppData = dataServiceAppData
 
 // 使用路由
 app.use(router)