bee-front-components 1.0.0

package/lib/components/Table/index.js

@@ -0,0 +1,135 @@
+import _Table from "@hzero-front-ui/c7n-ui/lib/TablePro";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["dataSet", "columns", "className", "optBtns", "renderColumn", "isShowDivider", "dividerClass", "customizedCode", "extra", "customHeader", "isShowCollapseBtn"];
+/**
+ * @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, { useMemo } from "react";
+import classNames from "classnames";
+import { TableAutoHeightType } from "choerodon-ui/pro/lib/table/interface";
+import { ColumnLock } from "choerodon-ui/pro/lib/table/enum";
+import { isMobileDevice } from "../Scanner/utils/device";
+import StatusTag from "../StatusTag";
+import Empty from "../Empty";
+import TableQueryBar from "../QueryBar/TableQueryBar";
+import TableOperationColumn from "../TableOperationColumn";
+import styles from "./index.module.less?modules";
+
+// 自定义DataSet中的Fields配置信息
+
+const Table = props => {
+  const dataSet = props.dataSet,
+    columns = props.columns,
+    className = props.className,
+    _props$optBtns = props.optBtns,
+    optBtns = _props$optBtns === void 0 ? [] : _props$optBtns,
+    renderColumn = props.renderColumn,
+    _props$isShowDivider = props.isShowDivider,
+    isShowDivider = _props$isShowDivider === void 0 ? true : _props$isShowDivider,
+    dividerClass = props.dividerClass,
+    customizedCode = props.customizedCode,
+    extra = props.extra,
+    customHeader = props.customHeader,
+    _props$isShowCollapse = props.isShowCollapseBtn,
+    isShowCollapseBtn = _props$isShowCollapse === void 0 ? true : _props$isShowCollapse,
+    args = _objectWithoutProperties(props, _excluded);
+  // 根据dataSet生成相应的Columns配置信息
+  const customerColumns = useMemo(() => {
+    var _dataSet$props;
+    if (columns !== undefined) {
+      return columns;
+    }
+    // 存储最终columns配置项，传入的DataSet中的Fields属性
+    const tableColumns = [],
+      oriFields = (dataSet === null || dataSet === void 0 ? void 0 : (_dataSet$props = dataSet.props) === null || _dataSet$props === void 0 ? void 0 : _dataSet$props.fields) || [];
+    for (const field of oriFields) {
+      // 如果当前配置项中不包含信息或hideInTable为true时，不写入配置项
+      if (!field || field !== null && field !== void 0 && field.hideInTable) {
+        continue;
+      }
+      const currentColumns = field !== null && field !== void 0 && field.statusType ? {
+        ...field,
+        renderer: ({
+          value,
+          text
+        }) => /*#__PURE__*/React.createElement(StatusTag, {
+          value: value,
+          text: text,
+          showType: field.statusType
+        })
+      } : {
+        ...field
+      };
+      tableColumns.push({
+        ...currentColumns,
+        ...(renderColumn === null || renderColumn === void 0 ? void 0 : renderColumn[(field === null || field === void 0 ? void 0 : field.name) || ""])
+      });
+    }
+
+    // 如果optBtns或optColumn不为空则将显示操作栏
+    if ((optBtns === null || optBtns === void 0 ? void 0 : optBtns.length) > 0 || renderColumn !== null && renderColumn !== void 0 && renderColumn.operation) {
+      // 先以自定义操作栏为最高优先级
+      const optColumns = {
+        name: "operation",
+        title: "操作",
+        width: 180,
+        lock: "right",
+        renderer: () => /*#__PURE__*/React.createElement(TableOperationColumn, {
+          buttons: optBtns
+        }),
+        ...(renderColumn === null || renderColumn === void 0 ? void 0 : renderColumn.operation)
+      };
+      tableColumns.push(optColumns);
+    }
+    return tableColumns;
+  }, [dataSet, columns, renderColumn, optBtns]);
+
+  // 根据当前运行设备及分页配置设置表格分页属性
+  const tableDataSet = useMemo(() => {
+    const isMobile = isMobileDevice();
+    const defPageSize = isMobile ? 5 : 20; // PC默认每页20条 移动端默认每页5条
+    const pageSize = (dataSet === null || dataSet === void 0 ? void 0 : dataSet.pageSize) === 10 ? defPageSize : dataSet === null || dataSet === void 0 ? void 0 : dataSet.pageSize; // 有可能从外部传入 内部默认为10 因此取变更之后的值
+    return Object.assign(dataSet, {
+      pageSize
+    });
+  }, [dataSet]);
+  return /*#__PURE__*/React.createElement(_Table, _extends({
+    className: classNames(styles.defaultTable, className),
+    dataSet: tableDataSet,
+    columns: customerColumns,
+    autoHeight: {
+      type: TableAutoHeightType.maxHeight,
+      diff: 64
+    },
+    rowNumber: true,
+    rowNumberColumnProps: {
+      width: 60,
+      title: "序号",
+      rowNumberIndex: 1
+    },
+    parityRow: false,
+    renderEmpty: () => /*#__PURE__*/React.createElement(Empty, null)
+  }, args, {
+    queryBar: obj => /*#__PURE__*/React.createElement(TableQueryBar, _extends({}, obj, {
+      isShowDivider: isShowDivider,
+      dividerClass: dividerClass,
+      extra: extra,
+      customHeader: customHeader,
+      isShowCollapseBtn: isShowCollapseBtn
+    })),
+    customizable: !!customizedCode,
+    customizedCode: customizedCode
+  }));
+};
+export default Table;

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

@@ -0,0 +1,24 @@
+// 表格通用样式
+.defaultTable {
+  .flex(column, flex-start, stretch, nowrap);
+  width: 100%;
+  height: 100%;
+  :global {
+    .c7n-spin-nested-loading {
+      flex: 1;
+      .c7n-spin-container {
+        height: 100%;
+        .c7n-pro-table,
+        .c7n-pro-table-content {
+          height: 100%;          
+        }
+      }
+    }
+    .c7n-pro-table:not(.c7n-pro-table-bordered) .c7n-pro-table-tbody .c7n-pro-table-row {
+      border-bottom: 0.01rem solid #e6e6e6;
+    }
+    .c7n-pro-table table {      
+      border-collapse: collapse;
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+/**
+ * 操作列按钮项属性
+ */
+export interface ButtonItemProps {
+    /**
+     * 按钮文本
+     */
+    text: string;
+    /**
+     * 按钮权限编码
+     */
+    permissionCode?: string;
+    /**
+     * 按钮是否隐藏
+     */
+    hidden?: boolean;
+    /**
+     * 按钮是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 按钮点击事件
+     */
+    onClick?: () => void;
+}
+/**
+ * 操作列属性
+ */
+interface TableOperationColumnProps {
+    /**
+     * 操作列按钮项数组
+     */
+    buttons: ButtonItemProps[];
+    /**
+     * 操作列按钮宽度
+     */
+    buttonWidth?: number;
+    /**
+     * 操作列触发方式
+     */
+    trigger?: "click" | "hover";
+}
+declare const TableOperationColumn: React.FunctionComponent<TableOperationColumnProps>;
+export default TableOperationColumn;

package/lib/components/TableOperationColumn/index.js

@@ -0,0 +1,205 @@
+import _Popover from "@hzero-front-ui/c7n-ui/lib/Popover";
+import _Icon from "choerodon-ui/pro/lib/icon";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from "react";
+/**
+ * 操作列组件
+ */
+import { FuncType } from "choerodon-ui/pro/lib/button/enum";
+import { observer } from "mobx-react-lite";
+import { throttle } from "lodash";
+import { useEffect, useRef, useState } from "react";
+import request from "utils/request";
+import { Button } from "../Buttons";
+import styles from "./index.module.less?modules";
+
+/**
+ * 操作列按钮项属性
+ */
+
+/**
+ * 操作列属性
+ */
+
+/**
+ * 操作列属性
+ */
+
+// 检查权限
+async function checkPermissions(data) {
+  return request("/iam/hzero/v1/menus/check-permissions", {
+    method: "POST",
+    data
+  });
+}
+
+/**
+ * 权限结果类型
+ */
+
+const permissionResultCache = new Map();
+const inFlightRequests = new Map();
+
+// 操作按钮点击节流间隔（毫秒），防止快速重复点击触发多次操作
+const CLICK_THROTTLE = 300;
+const TableOperationColumn = observer(props => {
+  const buttons = props.buttons,
+    buttonWidth = props.buttonWidth,
+    _props$trigger = props.trigger,
+    trigger = _props$trigger === void 0 ? "hover" : _props$trigger;
+  const _useState = useState(new Map()),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalPermissionMap = _useState2[0],
+    setInternalPermissionMap = _useState2[1];
+  // 节流点击：300ms 内的重复点击直接忽略，防止快速连点触发多次操作（leading 首击立即执行）
+  const throttledClick = useRef(throttle(item => {
+    var _item$onClick;
+    return (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item);
+  }, CLICK_THROTTLE, {
+    leading: true,
+    trailing: false
+  })).current;
+  const _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    visible = _useState4[0],
+    setVisible = _useState4[1];
+  useEffect(() => {
+    if (!buttons || !Array.isArray(buttons) || buttons.length === 0) return;
+    let cancelled = false;
+    const permissionCodes = buttons.map(item => item.permissionCode).filter(code => !!code);
+    const uncachedCodes = permissionCodes.filter(code => !permissionResultCache.has(code));
+    if (uncachedCodes.length === 0) {
+      const map = new Map();
+      permissionCodes.forEach(code => {
+        const cached = permissionResultCache.get(code);
+        if (cached !== undefined) map.set(code, cached);
+      });
+      if (!cancelled) {
+        setInternalPermissionMap(map);
+      }
+      return () => {
+        cancelled = true;
+      };
+    }
+    const key = uncachedCodes.sort().join(",");
+    if (inFlightRequests.has(key)) {
+      var _inFlightRequests$get;
+      (_inFlightRequests$get = inFlightRequests.get(key)) === null || _inFlightRequests$get === void 0 ? void 0 : _inFlightRequests$get.then(res => {
+        res.forEach(item => {
+          permissionResultCache.set(item.code, {
+            approve: item.approve,
+            controllerType: item.controllerType
+          });
+        });
+        const map = new Map();
+        permissionCodes.forEach(code => {
+          const cached = permissionResultCache.get(code);
+          if (cached !== undefined) map.set(code, cached);
+        });
+        if (!cancelled) {
+          setInternalPermissionMap(map);
+        }
+      });
+      return () => {
+        cancelled = true;
+      };
+    }
+    const requestPromise = checkPermissions(uncachedCodes);
+    inFlightRequests.set(key, requestPromise);
+    requestPromise.then(res => {
+      inFlightRequests.delete(key);
+      res.forEach(item => {
+        permissionResultCache.set(item.code, {
+          approve: item.approve,
+          controllerType: item.controllerType
+        });
+      });
+      const map = new Map();
+      permissionCodes.forEach(code => {
+        const cached = permissionResultCache.get(code);
+        if (cached !== undefined) map.set(code, cached);
+      });
+      if (!cancelled) {
+        setInternalPermissionMap(map);
+      }
+    }).catch(() => {
+      inFlightRequests.delete(key);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [buttons]);
+  if (!buttons || !Array.isArray(buttons) || buttons.length === 0) return null;
+  const finalPermissionMap = internalPermissionMap;
+
+  /** 判断按钮是否被禁用 */
+  const isButtonDisabled = item => {
+    if (item.disabled) return true;
+    if (item.permissionCode && finalPermissionMap.has(item.permissionCode)) {
+      const perm = finalPermissionMap.get(item.permissionCode);
+      if ((perm === null || perm === void 0 ? void 0 : perm.controllerType) === "disabled" && !perm.approve) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  /** 过滤可见按钮 */
+  const visibleButtons = buttons.filter(item => {
+    if (item.hidden) return false;
+    if (item.permissionCode && finalPermissionMap.has(item.permissionCode)) {
+      const perm = finalPermissionMap.get(item.permissionCode);
+      // hidden 类型：approve=false 时隐藏
+      if ((perm === null || perm === void 0 ? void 0 : perm.controllerType) === "hidden") {
+        return perm.approve;
+      }
+      // disabled 类型：按钮显示，但禁用
+      return true;
+    }
+    // 权限码存在但结果未返回时，隐藏按钮（安全考虑）
+    if (item.permissionCode && !finalPermissionMap.has(item.permissionCode)) {
+      return false;
+    }
+    return true;
+  });
+  const content = visibleButtons.slice(2).map(item => /*#__PURE__*/React.createElement("div", {
+    key: item.text,
+    className: `${styles.popoverItem} ${isButtonDisabled(item) ? styles.disabled : ""}`,
+    onClick: isButtonDisabled(item) ? undefined : () => {
+      setVisible(false);
+      throttledClick(item);
+    }
+  }, item.text));
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.operationColumn
+  }, (visibleButtons.length > 3 ? visibleButtons.slice(0, 2) : visibleButtons).map(item => /*#__PURE__*/React.createElement(Button, {
+    key: item.text,
+    disabled: isButtonDisabled(item),
+    onClick: () => throttledClick(item),
+    funcType: "link",
+    style: {
+      marginRight: 8,
+      textAlign: "left",
+      ...(buttonWidth ? {
+        width: buttonWidth
+      } : {})
+    }
+  }, item.text)), visibleButtons.length > 3 && /*#__PURE__*/React.createElement(_Popover, {
+    visible: visible,
+    onVisibleChange: setVisible,
+    content: content,
+    trigger: trigger,
+    placement: "bottom",
+    overlayStyle: {
+      minWidth: 64
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    funcType: "link"
+  }, "\u66F4\u591A", /*#__PURE__*/React.createElement(_Icon, {
+    type: "expand_more",
+    style: {
+      marginLeft: 2
+    }
+  }))));
+});
+export default TableOperationColumn;

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

@@ -0,0 +1,22 @@
+.operationColumn {
+  width: auto;
+  .flex(@justify: flex-start, @wrap: nowrap);
+}
+.popoverItem {
+  padding: 0.08rem 0.1rem;
+  font-size: @fontSize;
+  line-height: 0.16rem;
+  cursor: pointer;
+  color: @primaryColor;
+  &:hover {
+    background: @primaryLightColor;
+    border-radius: @borderRadius;
+  }
+  &.disabled {
+    color: rgba(0, 0, 0, 0.25);
+    cursor: not-allowed;
+    &:hover {
+      background: transparent;
+    }
+  }
+}

package/lib/components/Tabs/TabGroup.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @name 通用标签页TabGroup组件
+ * @param {...TabGroupProps} TabGroupProps参数 同choerodon UI组件中的TabGroup使用方式
+ * @author lichen
+ */
+import React from "react";
+import type { TabGroupProps } from "choerodon-ui/lib/tabs";
+declare const TabGroup: React.FC<TabGroupProps>;
+export default TabGroup;

package/lib/components/Tabs/TabGroup.js

@@ -0,0 +1,12 @@
+import _Tabs from "@hzero-front-ui/c7n-ui/lib/TabsPro";
+/**
+ * @name 通用标签页TabGroup组件
+ * @param {...TabGroupProps} TabGroupProps参数 同choerodon UI组件中的TabGroup使用方式
+ * @author lichen
+ */
+import React from "react";
+const CustomTabGroup = _Tabs.TabGroup;
+const TabGroup = props => {
+  return /*#__PURE__*/React.createElement(CustomTabGroup, props);
+};
+export default TabGroup;

package/lib/components/Tabs/TabPane.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @name 通用标签页TabPane组件
+ * @param {...TabPaneProps} TabPaneProps参数 同choerodon UI组件中的TabPane使用方式
+ * @author lichen
+ */
+import React from "react";
+import type { TabPaneProps } from "choerodon-ui/lib/tabs";
+declare const TabPane: React.FC<TabPaneProps>;
+export default TabPane;

package/lib/components/Tabs/TabPane.js

@@ -0,0 +1,12 @@
+import _Tabs from "@hzero-front-ui/c7n-ui/lib/TabsPro";
+/**
+ * @name 通用标签页TabPane组件
+ * @param {...TabPaneProps} TabPaneProps参数 同choerodon UI组件中的TabPane使用方式
+ * @author lichen
+ */
+import React from "react";
+const CustomTabPane = _Tabs.TabPane;
+const TabPane = props => {
+  return /*#__PURE__*/React.createElement(CustomTabPane, props);
+};
+export default TabPane;

package/lib/components/Tabs/Tabs.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @name 通用标签页组件
+ * @param {string} className 该组件自定义类名
+ * @param {string} tabBarClass 自定义标签类名
+ * @param {string} tabBarWrapClass 自定义标签外层区域类名
+ * @param {boolean} isShowDivider 是否显示分割线
+ * @param {...args} 其他剩余参数 同choerodon UI组件中的Tabs使用方式
+ * @author lichen
+ */
+import React from "react";
+import type { TabsProps } from "choerodon-ui/lib/tabs";
+interface IProps extends TabsProps {
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义标签外层区域类名 */
+    tabBarWrapClass?: string;
+    /** 自定义标签类名 */
+    tabBarClass?: string;
+    /** 是否显示分割线 */
+    isShowDivider?: boolean;
+}
+declare const Tabs: React.FC<Omit<IProps, "tabBarStyle">>;
+export default Tabs;

package/lib/components/Tabs/Tabs.js

@@ -0,0 +1,42 @@
+import _Tabs from "@hzero-front-ui/c7n-ui/lib/TabsPro";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "tabBarClass", "tabBarWrapClass", "isShowDivider", "children"];
+/**
+ * @name 通用标签页组件
+ * @param {string} className 该组件自定义类名
+ * @param {string} tabBarClass 自定义标签类名
+ * @param {string} tabBarWrapClass 自定义标签外层区域类名
+ * @param {boolean} isShowDivider 是否显示分割线
+ * @param {...args} 其他剩余参数 同choerodon UI组件中的Tabs使用方式
+ * @author lichen
+ */
+import React from "react";
+import classNames from "classnames";
+import styles from "./index.module.less?modules";
+const Tabs = props => {
+  const className = props.className,
+    tabBarClass = props.tabBarClass,
+    tabBarWrapClass = props.tabBarWrapClass,
+    _props$isShowDivider = props.isShowDivider,
+    isShowDivider = _props$isShowDivider === void 0 ? true : _props$isShowDivider,
+    children = props.children,
+    args = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(_Tabs, _extends({
+    className: classNames(styles.defaultTabs, className),
+    inkBarStyle: {
+      bottom: "0.01rem"
+    },
+    renderTabBar: (tabBar, DefaultTabBar) => /*#__PURE__*/React.createElement(DefaultTabBar, _extends({
+      className: classNames(styles.defTabBarBox, {
+        [styles.borderBtm]: isShowDivider
+      }, tabBarWrapClass)
+    }, tabBar), node => {
+      const nodeProps = node.props;
+      return /*#__PURE__*/React.cloneElement(node, {
+        className: classNames(nodeProps.className, styles.tabBar, tabBarClass)
+      });
+    })
+  }, args), children);
+};
+export default Tabs;

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

@@ -0,0 +1,4 @@
+import Tabs from "./Tabs";
+import TabPane from "./TabPane";
+import TabGroup from "./TabGroup";
+export { Tabs, TabPane, TabGroup };

package/lib/components/Tabs/index.js

@@ -0,0 +1,4 @@
+import Tabs from "./Tabs";
+import TabPane from "./TabPane";
+import TabGroup from "./TabGroup";
+export { Tabs, TabPane, TabGroup };

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

@@ -0,0 +1,20 @@
+// Tabs页签通用样式
+.defaultTabs {
+  width: 100%;
+  height: 100%;
+  .defTabBarBox {
+    margin: 0;
+    padding: 0 0.24rem;
+  }
+  .borderBtm {
+    border-bottom: 0.01rem solid @borderColor !important;
+  }
+  .tabBar {
+    padding: 0.16rem 0 0.14rem !important;
+  }
+  :global {
+    .c7n-tabs-content {
+      height: calc(100% - 0.51rem);
+    }
+  }
+}

package/lib/components/Upload/BatchUpload/index.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @name 基于Upload组件进行多文件上传
+ * @param {string} className 自定义类名
+ * @param {string} accept 允许上传的文件类型 默认.doc和.pdf
+ * @param {string} bucketName 文件上传后存储的桶名 默认public
+ * @param {string} directory 文件上传后存储的文件夹路径 默认/files
+ * @param {string} fileList 上传的文件列表 用于受控时文件回显
+ * @param {ReactNode} uploadTip 自定义上传提示文案
+ * @param {function} uploadCallback 上传之后的回调
+ * @param {string} children 自定义上传按钮
+ * @author lichen
+ */
+import React from "react";
+import type { UploadProps } from "choerodon-ui/lib/upload/Upload";
+import type { UploadFile } from "choerodon-ui/lib/upload/interface";
+interface IProps extends Omit<UploadProps, "directory"> {
+    /** 自定义类名 */
+    className?: string;
+    /** 允许上传的文件类型 默认.doc和.pdf */
+    accept?: string;
+    /** 文件上传后存储的桶名 默认public */
+    bucketName?: string;
+    /** 文件上传后存储的文件夹路径 默认/files */
+    directory?: string;
+    /** 上传的文件列表 用于受控时文件回显 */
+    fileList?: UploadFile[];
+    /** 文件上传之后的回调 */
+    uploadCallback?: (urls: string[]) => void;
+    /** 自定义上传提示文案 */
+    uploadTip?: React.ReactNode;
+    /** 自定义上传按钮 */
+    children?: React.ReactNode;
+}
+/** 对外暴露字段 */
+export interface IBatchUploadRef {
+    /** 上传的所有文件路径 */
+    filesPath: string[];
+    /** 上传的所有文件对象 */
+    filesList: UploadFile[];
+}
+declare const BatchUpload: React.ForwardRefExoticComponent<IProps & React.RefAttributes<IBatchUploadRef>>;
+export default BatchUpload;