bee-front-components 1.0.0

package/lib/components/StatusTab/index.js

@@ -0,0 +1,118 @@
+import _Stores from "choerodon-ui/pro/lib/stores";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * @name 状态标签页组件
+ * @param {IStatusTabProps} props 组件属性
+ * @param {string} lookupCode 状态枚举值
+ * @param {string} currentStatus 当前状态
+ * @param {function} onChange 状态切换回调
+ * @author chuzhengyang
+ */
+import React, { useEffect, useState } from "react";
+import request from "utils/request";
+import { getCurrentOrganizationId } from "utils/utils";
+import classNames from "classnames";
+import { Tabs, TabPane } from "../Tabs";
+import styles from "./index.module.less?modules";
+export const organizationId = getCurrentOrganizationId();
+
+// 状态配置项信息
+
+const StatusTab = props => {
+  const lookupCode = props.lookupCode,
+    propsStatusList = props.statusList,
+    _props$currentStatus = props.currentStatus,
+    currentStatus = _props$currentStatus === void 0 ? "all" : _props$currentStatus,
+    _props$queryCountUrl = props.queryCountUrl,
+    queryCountUrl = _props$queryCountUrl === void 0 ? "" : _props$queryCountUrl,
+    onChange = props.onChange;
+  const _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    statusList = _useState2[0],
+    setStatusList = _useState2[1];
+  const _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    totalCount = _useState4[0],
+    setTotalCount = _useState4[1];
+
+  /** 从缓存或接口获取快码枚举列表 */
+  async function getLookupData(lookupCode) {
+    var _Stores$LookupCodeSto, _Stores$LookupCodeSto2, _Stores$LookupCodeSto3;
+    const list = ((_Stores$LookupCodeSto = _Stores.LookupCodeStore) === null || _Stores$LookupCodeSto === void 0 ? void 0 : (_Stores$LookupCodeSto2 = _Stores$LookupCodeSto.merger) === null || _Stores$LookupCodeSto2 === void 0 ? void 0 : (_Stores$LookupCodeSto3 = _Stores$LookupCodeSto2.cache) === null || _Stores$LookupCodeSto3 === void 0 ? void 0 : _Stores$LookupCodeSto3.get(lookupCode)) || [];
+    if ((list === null || list === void 0 ? void 0 : list.length) > 0) return list;
+    return _Stores.LookupCodeStore.fetchLookupData({
+      url: `/hpfm/v1/${organizationId}/lovs/data?lovCode=${lookupCode}`,
+      method: "GET"
+    });
+  }
+
+  /** 获取各状态数量 */
+  async function getCountData(url) {
+    return request(url, {
+      method: "GET"
+    });
+  }
+
+  /**
+   * 获取当前状态列表及数量
+   * - 优先使用 propsStatusList（外部传入）
+   * - 否则通过 lookupCode 获取枚举
+   * - 如有 queryCountUrl 则合并各状态数量
+   */
+  async function fetchStatusList() {
+    if (propsStatusList) return {
+      list: propsStatusList
+    };
+    if (!lookupCode) return {
+      list: []
+    };
+    const list = await getLookupData(lookupCode);
+    if (!queryCountUrl || !(list !== null && list !== void 0 && list.length)) return {
+      list: list || []
+    };
+    const res = await getCountData(queryCountUrl);
+    const countMap = new Map(((res === null || res === void 0 ? void 0 : res.list) || []).map(i => [i.statusCode, i.count]));
+    return {
+      list: list.map(item => ({
+        ...item,
+        count: countMap.get(item.value) || 0
+      })),
+      total: (res === null || res === void 0 ? void 0 : res.total) || 0
+    };
+  }
+  useEffect(() => {
+    let cancelled = false;
+    fetchStatusList().then(({
+      list,
+      total
+    }) => {
+      if (cancelled) return;
+      setStatusList(list);
+      if (total !== undefined) setTotalCount(total);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [lookupCode, queryCountUrl, propsStatusList]);
+
+  /** 渲染标签页标题：文本 + 可选数量（超过 99 显示 99+） */
+  function renderTab(label, count) {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, label), queryCountUrl && /*#__PURE__*/React.createElement("span", {
+      className: classNames(styles.count, {
+        [styles.countSmall]: count != null && count < 10
+      })
+    }, count != null && count > 99 ? "99+" : count));
+  }
+  return /*#__PURE__*/React.createElement(Tabs, {
+    className: styles.tabsContainer,
+    defaultActiveKey: currentStatus,
+    onChange: onChange
+  }, /*#__PURE__*/React.createElement(TabPane, {
+    tab: renderTab("全部", totalCount),
+    key: "all"
+  }), statusList.map(item => /*#__PURE__*/React.createElement(TabPane, {
+    tab: renderTab(item.meaning, item.count),
+    key: item.value
+  })));
+};
+export default StatusTab;

package/lib/components/StatusTab/index.module.less

@@ -0,0 +1,20 @@
+.tabsContainer {
+  height: auto !important;
+}
+.count {
+  margin-left: 0.06rem;
+  display: inline-block;
+  width: 0.32rem;
+  height: 0.16rem;
+  background: @primaryLightColor;
+  border-radius: 0.09rem;
+  font-weight: 400;
+  font-size: 0.12rem;
+  color: @primaryColor;
+  line-height: 0.16rem;
+  text-align: center;
+  &.countSmall {
+    width: 0.16rem;
+    border-radius: 50%;
+  }
+}

package/lib/components/StatusTag/index.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+/** 快码枚举值 */
+interface IStatusItem {
+    /** 排序标识 */
+    orderSeq: number;
+    /** 枚举中文表述 */
+    meaning: string;
+    /** 枚举值 */
+    value: string;
+    /** 可用标识 */
+    enabledFlag: number;
+}
+/** 状态分类类别 */
+type IStatusCategory = "initial" | "success" | "error" | "default" | "primary";
+interface IProps {
+    /** 枚举代码，用于请求状态列表 */
+    lovCode?: string;
+    /** 当前状态value */
+    value: string;
+    /** 当前状态文本 */
+    text?: string;
+    /** 展示类型 */
+    showType?: "default" | "circle";
+    /** 自定义显示内容 */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义分类函数 */
+    categorize?: (status: IStatusItem) => IStatusCategory;
+}
+declare const StatusTag: React.FC<IProps>;
+export default StatusTag;

package/lib/components/StatusTag/index.js

@@ -0,0 +1,142 @@
+import _Stores from "choerodon-ui/pro/lib/stores";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * @name 状态颜色标签
+ * @description 根据lovCode调用后台接口获取状态枚举，自动匹配当前value展示带分类小圆点标签，支持自定义children覆盖展示内容
+ * @param { string } lovCode 枚举代码，用于从后台拉取状态列表
+ * @param { string } value 当前状态的value值
+ * @param { function } categorize 自定义分类函数
+ * @param { ReactNode } children 自定义显示内容
+ * @author lichen
+ */
+import classNames from "classnames";
+import React, { useEffect, useMemo, useState } from "react";
+import { getCurrentOrganizationId } from "utils/utils";
+import styles from "./index.module.less?modules";
+
+/** 快码枚举值 */
+
+/** 状态分类类别 */
+
+// 根据中文字段模糊匹配 进行默认分类
+function defaultCategorize(status) {
+  const statusMeaning = status.meaning.toLowerCase();
+  if (/待审核|待发布|中/.test(statusMeaning)) return "primary";
+  if (/拒|撤|废|败|销|退|取消|停|禁|弃|驳回/.test(statusMeaning)) return "error";
+  if (/草稿|待|新|建/.test(statusMeaning)) return "initial";
+  if (/通|过|完|成|已|启|用/.test(statusMeaning)) return "success";
+  return "default";
+}
+const DEFAULT_COLOR = {
+  default: "",
+  light: ""
+};
+// 生成不同状态类别相对应的色值映射
+function getStatusColorMap(statusList, categorize) {
+  // 固定颜色映射
+  const categoryColors = {
+    initial: {
+      default: styles.warningColor,
+      light: styles.warningLightColor
+    },
+    // 黄色
+    success: {
+      default: styles.successColor,
+      light: styles.successLightColor
+    },
+    // 绿色
+    error: {
+      default: styles.errorColor,
+      light: styles.errorLightColor
+    },
+    // 红色
+    primary: {
+      default: styles.primaryColor,
+      light: styles.primaryLightColor
+    },
+    // 蓝色
+    default: DEFAULT_COLOR
+  };
+  const colorMap = {};
+  statusList === null || statusList === void 0 ? void 0 : statusList.forEach(status => {
+    const type = categorize(status);
+    colorMap[status.value] = categoryColors[type];
+  });
+  return colorMap;
+}
+const organizationId = getCurrentOrganizationId();
+const StatusTag = props => {
+  const lovCode = props.lovCode,
+    value = props.value,
+    _props$text = props.text,
+    text = _props$text === void 0 ? "" : _props$text,
+    _props$showType = props.showType,
+    showType = _props$showType === void 0 ? "default" : _props$showType,
+    children = props.children,
+    className = props.className,
+    _props$categorize = props.categorize,
+    categorize = _props$categorize === void 0 ? defaultCategorize : _props$categorize;
+  const _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    statusList = _useState2[0],
+    setStatusList = _useState2[1];
+
+  // 获取状态枚举值
+  async function getStatusEnum() {
+    var _Stores$LookupCodeSto, _Stores$LookupCodeSto2, _Stores$LookupCodeSto3;
+    // 请求快码值，优先返回缓存中的数据
+    const list = ((_Stores$LookupCodeSto = _Stores.LookupCodeStore) === null || _Stores$LookupCodeSto === void 0 ? void 0 : (_Stores$LookupCodeSto2 = _Stores$LookupCodeSto.merger) === null || _Stores$LookupCodeSto2 === void 0 ? void 0 : (_Stores$LookupCodeSto3 = _Stores$LookupCodeSto2.cache) === null || _Stores$LookupCodeSto3 === void 0 ? void 0 : _Stores$LookupCodeSto3.get(lovCode)) || [];
+    if ((list === null || list === void 0 ? void 0 : list.length) > 0) {
+      setStatusList(list);
+    } else {
+      const lookupData = await _Stores.LookupCodeStore.fetchLookupData({
+        url: `/hpfm/v1/${organizationId}/lovs/data?lovCode=${lovCode}`,
+        method: "GET"
+      });
+      setStatusList(lookupData || []);
+    }
+  }
+  useEffect(() => {
+    if (text) {
+      setStatusList([{
+        orderSeq: 1,
+        meaning: text,
+        value,
+        enabledFlag: 1
+      }]);
+      return;
+    }
+    if (!lovCode) return;
+    getStatusEnum(); // 请求状态枚举
+  }, [lovCode, text]);
+
+  // 计算颜色映射
+  const colorMap = useMemo(() => getStatusColorMap(statusList, categorize), [statusList, categorize]);
+  const color = useMemo(() => colorMap[value] || DEFAULT_COLOR, [colorMap, value]);
+  const label = useMemo(() => {
+    var _statusList$find;
+    return (statusList === null || statusList === void 0 ? void 0 : (_statusList$find = statusList.find(e => e.value === value)) === null || _statusList$find === void 0 ? void 0 : _statusList$find.meaning) || value;
+  }, [statusList, value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.statusTag
+  }, children || (showType === "circle" ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: color.default
+    },
+    className: styles.statusCircle
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: color.default
+    },
+    className: styles.statusLabel
+  }, label)) : /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.statusContent, className),
+    style: {
+      backgroundColor: color.light,
+      color: color.default
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.statusLabel
+  }, label))));
+};
+export default StatusTag;

package/lib/components/StatusTag/index.module.less

@@ -0,0 +1,37 @@
+// 状态标签组件
+.statusTag {
+  .flex(@justify: flex-start);
+  height: 100%;
+}
+
+.statusContent {
+  padding: 0 0.08rem;
+  border-radius: 0.04rem;
+  min-width: 0.64rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.statusCircle {
+  width: 0.08rem;
+  height: 0.08rem;
+  border-radius: 50%;
+  margin-right: 0.04rem;
+}
+.statusLabel {
+  font-size: @fontSize;
+  line-height: 0.24rem;
+}
+
+// 关键：导出给 JS/TS 使用
+:export {
+  primaryColor: @primaryColor;
+  successColor: @successColor;
+  warningColor: @warnColor;
+  errorColor: @errorColor;
+  primaryWord: @primaryWord;
+  primaryLightColor: @primaryLightColor;
+  successLightColor: @successLightColor;
+  warningLightColor: @warnLightColor;
+  errorLightColor: @errorLightColor;
+}

package/lib/components/StepProgress/index.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @name 步骤条或时间线样式组件
+ * @param {string} className 自定义类名
+ * @param {string} itemClass 每一项数据自定义类名
+ * @param {StepItem[]} steps 步骤条配置列表
+ * @param {string} currentStatus 当前步骤状态
+ * @param {"horizontal" | "vertical"} layout 布局方向
+ * @author chuzhengyang
+ */
+import React from "react";
+export interface StepItem {
+    /** 步骤标题 */
+    title?: string;
+    /** 自定义描述内容 */
+    content?: React.ReactNode;
+    /** 步骤描述 */
+    description?: string | React.ReactNode;
+    /** 步骤时间 */
+    time?: string;
+    /** 步骤状态 */
+    status?: string;
+}
+interface IStepProgressProps {
+    /** 自定义类名 */
+    className?: string;
+    /** 每一项数据自定义类名 */
+    itemClass?: string;
+    /** 步骤列表 */
+    steps: StepItem[];
+    /** 当前步骤状态 */
+    currentStatus?: string;
+    /** 布局方向 */
+    layout?: "horizontal" | "vertical";
+}
+declare const StepProgress: React.FC<IStepProgressProps>;
+export default StepProgress;

package/lib/components/StepProgress/index.js

@@ -0,0 +1,84 @@
+/**
+ * @name 步骤条或时间线样式组件
+ * @param {string} className 自定义类名
+ * @param {string} itemClass 每一项数据自定义类名
+ * @param {StepItem[]} steps 步骤条配置列表
+ * @param {string} currentStatus 当前步骤状态
+ * @param {"horizontal" | "vertical"} layout 布局方向
+ * @author chuzhengyang
+ */
+import React, { useMemo } from "react";
+import { findLastIndex } from "lodash";
+import classNames from "classnames";
+import styles from "./index.module.less?modules";
+
+// 步骤条配置项信息
+
+const StepProgress = props => {
+  const className = props.className,
+    itemClass = props.itemClass,
+    steps = props.steps,
+    _props$currentStatus = props.currentStatus,
+    currentStatus = _props$currentStatus === void 0 ? "completed" : _props$currentStatus,
+    _props$layout = props.layout,
+    layout = _props$layout === void 0 ? "horizontal" : _props$layout;
+
+  // const currentIndex = useMemo(() => steps?.findIndex((step) => step?.status === currentStatus), [steps, currentStatus]); // 获取当前状态在步骤列表中的索引
+  const currentIndex = useMemo(() => findLastIndex(steps, step => (step === null || step === void 0 ? void 0 : step.status) === currentStatus), [steps, currentStatus]); // 获取当前状态在步骤列表中的最后一个索引 以解决存在多个重复状态时后续状态无法被正常显示的问题
+  return layout === "horizontal" ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.stepProgress, className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.stepsContainer
+  }, steps === null || steps === void 0 ? void 0 : steps.map((step, index) => {
+    // 当前步骤索引小于等于当前状态索引时高亮（包含当前状态及之前的所有步骤）
+    const isCompleted = index <= currentIndex;
+    return /*#__PURE__*/React.createElement("div", {
+      key: `horizontal_${index}`,
+      className: classNames(styles.stepWrapper, itemClass)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.stepHeader
+    }, step.title && /*#__PURE__*/React.createElement("span", {
+      className: styles.stepTitle
+    }, step.title), /*#__PURE__*/React.createElement("div", {
+      className: classNames(styles.stepDot, {
+        [styles.completed]: isCompleted
+      })
+    })), (step === null || step === void 0 ? void 0 : step.content) || /*#__PURE__*/React.createElement("div", {
+      className: styles.stepContent
+    }, /*#__PURE__*/React.createElement("p", {
+      className: styles.description
+    }, step.description), /*#__PURE__*/React.createElement("p", {
+      className: styles.time
+    }, step.time)), index < steps.length - 1 && /*#__PURE__*/React.createElement("div", {
+      className: classNames(styles.connectionLine, {
+        [styles.hasTitle]: !!(step !== null && step !== void 0 && step.title),
+        [styles.completed]: isCompleted
+      })
+    }));
+  }))) : /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.verticalProgress, className)
+  }, steps === null || steps === void 0 ? void 0 : steps.map((step, index) => {
+    const stepStatus = step.status || "completed",
+      isLast = index === steps.length - 1;
+    const statusClass = (styles === null || styles === void 0 ? void 0 : styles[stepStatus]) || "";
+    return /*#__PURE__*/React.createElement("div", {
+      key: `vertical${index}`,
+      className: classNames(styles.verticalItem, itemClass)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.verticalLeft
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames(styles.verticalDot, (styles === null || styles === void 0 ? void 0 : styles[stepStatus]) || "")
+    })), !isLast && /*#__PURE__*/React.createElement("div", {
+      className: classNames(styles.verticalLine, statusClass)
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles.verticalRight
+    }, (step === null || step === void 0 ? void 0 : step.title) && /*#__PURE__*/React.createElement("span", {
+      className: styles.stepTitle
+    }, step.title), (step === null || step === void 0 ? void 0 : step.content) || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
+      className: styles.time
+    }, step.time), /*#__PURE__*/React.createElement("span", {
+      className: styles.description
+    }, step.description))));
+  }));
+};
+export default StepProgress;

package/lib/components/StepProgress/index.module.less

@@ -0,0 +1,180 @@
+.stepProgress {
+  width: 100%;
+}
+
+.stepsContainer {
+  position: relative;
+  .flex(row, space-between, flex-start, nowrap);
+}
+
+.stepWrapper {
+  position: relative;
+  .flex(column);
+  flex: 1;
+}
+
+.stepHeader {
+  .flex(column);
+  margin-bottom: 0.16rem;
+}
+
+.stepTitle {
+  margin-bottom: 0.08rem;
+  font-size: @fontSize;
+  font-weight: 600;
+  color: @primaryWord;
+
+  &.completed {
+    color: @primaryWord;
+  }
+
+  &.current {
+    color: @primaryColor;
+  }
+
+  &.pending {
+    color: @borderColor;
+  }
+}
+
+.stepDot {
+  z-index: 1;
+  width: 0.16rem;
+  height: 0.16rem;
+  border-radius: 50%;
+  background-color: @lightWord;
+
+  &.completed {
+    background-color: @primaryColor;
+  }
+
+  &.current {
+    background-color: @primaryColor;
+  }
+
+  &.pending {
+    background-color: @borderColor;
+  }
+}
+
+.stepContent {
+  max-width: 2rem;
+  text-align: center;
+}
+
+.description {
+  line-height: 1.4;
+  margin: 0 0 0.08rem 0;
+  font-size: @smallFont;
+  color: @primaryWord;
+}
+
+.time {
+  margin: 0;
+  font-size: @smallFont;
+  color: @minorWord;
+}
+
+// 水平布局连接线
+.connectionLine {
+  .position(absolute, 0.08rem, @left: calc(50% + 0.16rem));
+  z-index: 0;
+  width: calc(100% - 0.32rem);
+  height: 0.02rem;
+  background-color: @lightWord;
+  &.hasTitle {
+    top: 0.36rem;
+  }
+}
+
+.connectionLine.completed {
+  background: @primaryColor;
+}
+
+.stepWrapper:last-child .connectionLine {
+  display: none;
+}
+
+// ============ 竖向布局（时间线模式） ============
+.verticalProgress {
+  width: 100%;
+}
+
+.verticalItem {
+  position: relative;
+  padding-bottom: 0.1rem;
+  .flex(@align: flex-start);
+
+  &:last-child {
+    padding-bottom: 0;
+  }
+}
+
+.verticalLeft {
+  position: relative;
+  .flex(column);
+  flex-shrink: 0;
+  width: 0.24rem;
+}
+
+.verticalDot {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  width: 0.16rem;
+  height: 0.16rem;
+  border-radius: 50%;
+  background-color: @borderColor;
+
+  &.completed {
+    background-color: @primaryColor;
+  }
+
+  &.current {
+    background-color: @primaryColor;
+  }
+
+  &.pending {
+    background-color: @borderColor;
+  }
+}
+
+.verticalLine {
+  .position(absolute, 0.24rem, unset, 0.1rem, 0.12rem);  
+  width: 0.02rem;
+  background-color: @borderColor;
+  transform: translateX(-50%);
+
+  &.completed {
+    background-color: @primaryColor;
+  }
+
+  &.current {
+    background-color: @primaryColor;
+  }
+
+  &.pending {
+    background-color: @borderColor;
+  }
+}
+
+.verticalRight {
+  .position(relative, -0.03rem);  
+  flex: 1;
+  padding-left: 0.16rem;
+  padding-right: 0.16rem;
+  padding-bottom: 0.12rem;
+  .time {
+    margin-bottom: 0.12rem;
+    font-size: @fontSize;
+    color: @minorWord;
+  }
+  .description {
+    position: relative;
+    display: inline-block;
+    max-width: calc(100% - 2.22rem);
+    line-height: 1.4;
+    font-size: @fontSize;
+    color: @primaryWord;
+  }
+}

package/lib/components/Table/index.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @name 通用表格组件
+ * @param {string} className 该组件自定义类名
+ * @param {ButtonItemProps[]} optBtns 操作栏中按钮集合
+ * @param {object} renderColumn 自定义操作栏配置
+ * @param {boolean} isShowDivider 是否显示分割线
+ * @param {string} dividerClass 分割线自定义样式
+ * @param {string} customizedCode 该组件自定义表格列的唯一性标识
+ * @param {React.ReactNode} extra 表格头部额外内容（默认置于右侧）
+ * @param {React.ReactNode} customHeader 自定义表格头部操作区域
+ * @param {...args} 其他剩余参数 同choerodon UI组件中的Table使用方式
+ * @author lichen
+ */
+import React from "react";
+import type { TableProps } from "choerodon-ui/pro/lib/table/Table";
+import type { ColumnProps } from "choerodon-ui/pro/lib/table/Column";
+import type { ButtonItemProps } from "../TableOperationColumn";
+import type { IProps as ITableQueryBarProps } from "../QueryBar/TableQueryBar";
+interface IProps extends Omit<TableProps, "queryBarProps"> {
+    /** 自定义类名 */
+    className?: string;
+    /** 操作栏中按钮集合 */
+    optBtns?: ButtonItemProps[];
+    /** 需要自定义render方法的列配置 key为当前列的name值 操作栏固定key为operation */
+    renderColumn?: {
+        [key: string]: ColumnProps;
+    };
+    /** 是否显示分割线 */
+    isShowDivider?: boolean;
+    /** 分割线自定义样式 */
+    dividerClass?: string;
+    /** 是否显示展开收起按钮 */
+    isShowCollapseBtn?: boolean;
+    /** 自定义表格列标识码 */
+    customizedCode?: string;
+    /** 表格头部额外内容（默认置于右侧） */
+    extra?: React.ReactNode;
+    /** 自定义表格头部操作区域 */
+    customHeader?: React.ReactNode;
+    /** 自定义查询栏配置 */
+    queryBarProps?: Partial<ITableQueryBarProps>;
+}
+declare const Table: React.FC<IProps>;
+export default Table;