@cqsjjb/jjb-react-admin-component 3.3.1-beta.6 → 3.3.1-beta.8

package/PageLayout/index.js

@@ -0,0 +1,60 @@
+import React, { memo, useCallback } from 'react';
+import { PageHeader } from '@ant-design/pro-layout';
+import './index.less';
+import { getPrefixCls } from '../tools/index.js';
+const prefixCls = getPrefixCls();
+const PageLayout = /*#__PURE__*/memo(props => {
+  const {
+    title,
+    extra,
+    style = {},
+    header,
+    footer,
+    history = {},
+    noStyle,
+    formLine,
+    formLineStyle,
+    noBorder = false,
+    previous = false,
+    children,
+    transparent,
+    contentStyle,
+    footerStyle,
+    pageHeaderStyle,
+    onBack,
+    'data-node-id': dataNodeId
+  } = props;
+  const containerClass = [`${prefixCls}-layout-container`, transparent && `${prefixCls}-layout-container-transparent`, noStyle && `${prefixCls}-layout-container-no-style`].filter(Boolean).join(' ');
+  const backHandler = useCallback(() => {
+    if (onBack) {
+      onBack();
+    } else if (previous) {
+      history.go(-1);
+    }
+  }, [onBack, previous, history]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: noBorder ? {
+      border: 'none',
+      ...style
+    } : style,
+    className: containerClass,
+    "data-node-id": dataNodeId
+  }, !header ? /*#__PURE__*/React.createElement(PageHeader, {
+    title: title,
+    extra: extra,
+    style: pageHeaderStyle,
+    onBack: previous || onBack ? backHandler : undefined
+  }) : header, formLine && /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-layout-container-tools`,
+    style: formLineStyle
+  }, formLine), /*#__PURE__*/React.createElement("div", {
+    style: contentStyle,
+    className: `${prefixCls}-layout-container-content`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-layout-container-content-abs`
+  }, children)), footer && /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-lay-container-bottom`,
+    style: footerStyle
+  }, footer));
+});
+export default PageLayout;

package/PhoneBox/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ButtonProps } from 'antd';
+
+export interface PhoneBoxProps {
+  /** 展示内容的URL */
+  iframeUrl?: string;
+  /** 是否显示空状态，默认false */
+  showEmpty?: boolean;
+  /** 大小，默认'normal' */
+  size?: 'normal' | 'small';
+  /** 右侧额外操作按钮 */
+  extraAction?: React.ReactNode;
+  /** 是否显示右侧的二维码预览，默认'false' */
+  showPerview?: string | boolean;
+  /** 刷新二维码URL的函数，不传时自动使用时间戳刷新二维码 */
+  fetchQrcodeUrl?: () => Promise<{ data: string }>;
+}
+
+declare const PhoneBox: React.FC<PhoneBoxProps>;
+
+export default PhoneBox;

package/PhoneBox/index.js

@@ -0,0 +1,200 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Empty, Space, message, Tooltip, Button, QRCode } from 'antd';
+import { SyncOutlined } from '@ant-design/icons';
+import './index.less';
+export default props => {
+  const {
+    iframeUrl,
+    // 展示内容url
+    extraAction,
+    // 额外操作
+    showEmpty = false,
+    // 是否显示空状态
+    size = 'normal',
+    // 大小
+    showPerview = 'false',
+    // 是否显示二维码预览
+    fetchQrcodeUrl // 刷新二维码URL的函数
+  } = props;
+  const [currentTime, setCurrentTime] = useState(''); // 当前时间
+  const [qrcodeUrl, setQrcodeUrl] = useState(''); // 二维码URL
+  const [qrcodeVisible, setQrcodeVisible] = useState(false); // 二维码预览是否显示
+  const [isQrcodeExpire, setIsQrcodeExpire] = useState(false); // 二维码是否过期
+  const [qrcodeExpireTime, setQrcodeExpireTime] = useState(3); // 二维码剩余过期时间
+  const qrcodeButtonRef = useRef(null); // 扫码预览按钮dom
+  const currentRotate = useRef(0); // 刷新二维码icon旋转角度
+  const qrcodeTimerId = useRef(null); // 二维码三分钟过期定时器
+  const qrcodeExpireTimeUpdateTimerId = useRef(null); // 二维码过期时间更新定时器
+
+  useEffect(() => {
+    if (iframeUrl) {
+      setQrcodeUrl(iframeUrl);
+    }
+  }, [iframeUrl]);
+
+  // 点击外部区域（按钮、tooltip除外）关闭二维码预览
+  useEffect(() => {
+    const handleClickOutside = e => {
+      const button = qrcodeButtonRef.current;
+      const tooltip = document.querySelector('.micro-temp-tooltip');
+      if (button && !button.contains(e.target) && tooltip && !tooltip.contains(e.target)) {
+        setQrcodeVisible(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
+  // 手机上展示当前时间
+  useEffect(() => {
+    const formatHourMinute = date => {
+      const hours = String(date.getHours()).padStart(2, '0');
+      const minutes = String(date.getMinutes()).padStart(2, '0');
+      return `${hours}:${minutes}`;
+    };
+    setCurrentTime(formatHourMinute(new Date()));
+    const timer = setInterval(() => {
+      setCurrentTime(formatHourMinute(new Date()));
+    }, 60000);
+    return () => clearInterval(timer);
+  }, []);
+
+  // 清理二维码相关定时器
+  useEffect(() => {
+    return () => {
+      clearTimeout(qrcodeTimerId.current);
+      clearInterval(qrcodeExpireTimeUpdateTimerId.current);
+    };
+  }, []);
+
+  // 二维码过期状态定时器
+  const startQrcodeTimer = () => {
+    if (qrcodeTimerId.current) {
+      clearTimeout(qrcodeTimerId.current);
+    }
+    qrcodeTimerId.current = setTimeout(() => {
+      setIsQrcodeExpire(true);
+    }, 180000);
+  };
+
+  // 二维码过期时间定时器
+  const startQrcodeExpireTimeUpdateTimer = () => {
+    setQrcodeExpireTime(3);
+    if (qrcodeExpireTimeUpdateTimerId.current) {
+      clearInterval(qrcodeExpireTimeUpdateTimerId.current);
+    }
+    qrcodeExpireTimeUpdateTimerId.current = setInterval(() => {
+      setQrcodeExpireTime(prev => prev > 0 ? prev - 1 : 0);
+    }, 60000);
+  };
+  const getQrCodeUrl = () => {
+    if (fetchQrcodeUrl) {
+      fetchQrcodeUrl().then(res => {
+        setQrcodeUrl(res.data);
+        setIsQrcodeExpire(false); // 重置二维码过期状态
+        startQrcodeTimer(); // 启动过期状态定时器
+        startQrcodeExpireTimeUpdateTimer(); // 启动过期时间定时器
+      });
+    } else {
+      setQrcodeUrl(`${iframeUrl}?t=${Date.now()}`);
+      setIsQrcodeExpire(false); // 重置二维码过期状态
+      startQrcodeTimer(); // 启动过期状态定时器
+      startQrcodeExpireTimeUpdateTimer(); // 启动过期时间定时器
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: `phone-box ${size === 'small' ? 'phone-box-small' : ''}`
+  }, /*#__PURE__*/React.createElement("img", {
+    alt: "",
+    src: require('~/assets/phone.png').default,
+    width: 356,
+    height: 720
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "phone-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "phone-content-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "phone-header-time"
+  }, currentTime), /*#__PURE__*/React.createElement("img", {
+    src: require('~/assets/shexiang.png').default,
+    width: 76,
+    height: 23,
+    alt: ""
+  }), /*#__PURE__*/React.createElement(Space, {
+    className: "phone-header-status"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "status-xinhao",
+    src: require('~/assets/xinhao.png').default,
+    alt: ""
+  }), /*#__PURE__*/React.createElement("img", {
+    className: "status-wangluo",
+    src: require('~/assets/wangluo.png').default,
+    alt: ""
+  }), /*#__PURE__*/React.createElement("img", {
+    className: "status-dianchi",
+    src: require('~/assets/dianchi.png').default,
+    alt: ""
+  }))), showEmpty && !iframeUrl ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 316,
+      height: 625,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Empty, {
+    description: "\u6682\u65E0\u5185\u5BB9"
+  })) : /*#__PURE__*/React.createElement("iframe", {
+    src: iframeUrl,
+    width: 316,
+    height: 625
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "phone-box-action"
+  }, showPerview && /*#__PURE__*/React.createElement(Tooltip, {
+    open: qrcodeVisible,
+    placement: "bottom",
+    arrow: false,
+    color: "#FFF",
+    rootClassName: "qrcode-preview-tooltip",
+    title: /*#__PURE__*/React.createElement("div", {
+      className: "qrcode-preview-container"
+    }, /*#__PURE__*/React.createElement(QRCode, {
+      value: qrcodeUrl
+    }), isQrcodeExpire ? /*#__PURE__*/React.createElement("div", {
+      className: "qrcode-preview-container-expire-mask"
+    }, "\u4E8C\u7EF4\u7801\u8FC7\u671F") : '', /*#__PURE__*/React.createElement("div", {
+      className: "qrcode-preview-container-text"
+    }, "\u4E34\u65F6\u9884\u89C8\uFF0C", qrcodeExpireTime ? `${qrcodeExpireTime}分钟后失效` : '已失效'), /*#__PURE__*/React.createElement("a", {
+      onClick: () => {
+        getQrCodeUrl();
+        /** icon旋转动画 */
+        const icon = document.getElementById('qrcode-preview-container-icon');
+        if (!icon) return;
+        icon.classList.remove('icon-rotating');
+        // 强制重绘
+        void icon.offsetWidth;
+        icon.style.setProperty('--start-rotate', `${currentRotate.current}deg`);
+        icon.classList.add('icon-rotating');
+        setTimeout(() => {
+          currentRotate.current += 360;
+          icon.classList.remove('icon-rotating');
+        }, 300);
+      }
+    }, /*#__PURE__*/React.createElement(SyncOutlined, {
+      id: "qrcode-preview-container-icon",
+      style: {
+        marginRight: '4px'
+      }
+    }), "\u91CD\u65B0\u751F\u6210"))
+  }, /*#__PURE__*/React.createElement(Button, {
+    ref: qrcodeButtonRef,
+    onClick: () => {
+      setQrcodeVisible(!qrcodeVisible);
+      getQrCodeUrl();
+    },
+    color: "primary",
+    variant: "outlined"
+  }, "\u626B\u7801\u9884\u89C8")), extraAction));
+};

package/PhoneBox/index.less

@@ -0,0 +1,116 @@
+.phone-box {
+  display: flex;
+  gap: 12px;
+  position: relative;
+  z-index: 1;
+
+  .phone-content {
+    position: absolute;
+    top: 17px;
+    left: 20px;
+    z-index: 2;
+    border-radius: 40px;
+    overflow: hidden;
+    background-color: #fff;
+
+    .phone-content-header {
+      height: 55px;
+      padding: 12px 24px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .phone-header-status {
+        .status-xinhao {
+          width: 20px;
+          height: 18px;
+        }
+
+        .status-wangluo {
+          width: 16px;
+          height: 14px;
+        }
+
+        .status-dianchi {
+          width: 24px;
+          height: 22px;
+        }
+      }
+
+      .phone-header-time {
+        font-size: 14px;
+        font-weight: 500;
+        color: #000;
+        width: 76px;
+      }
+    }
+
+    iframe {
+      border: none;
+    }
+  }
+
+  .phone-box-action {
+    position: absolute;
+    top: 0;
+    left: 456px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+}
+
+.qrcode-preview-container {
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  .qrcode-preview-container-expire-mask {
+    width: 160px;
+    height: 160px;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    background-color: rgba(255, 255, 255, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    border-radius: 6px;
+  }
+
+  .qrcode-preview-container-text {
+    font-size: 12px;
+    color: #00000066;
+  }
+
+  @keyframes rotate360 {
+    from {
+      transform: rotate(var(--start-rotate, 0deg));
+    }
+
+    to {
+      transform: rotate(calc(var(--start-rotate, 0deg) + 360deg));
+    }
+  }
+
+  .icon-rotating {
+    animation: rotate360 0.3s linear 1 forwards;
+  }
+}
+
+.qrcode-preview-tooltip {
+  margin-top: 16px;
+
+  .micro-temp-tooltip-inner {
+    border-radius: 12px;
+    padding: 16px 24px;
+  }
+}
+
+.phone-box-small {
+  transform: scale(0.5);
+}

package/SearchForm/index.js

@@ -0,0 +1,95 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Form, Button, Space, Row, Col } from 'antd';
+import { SearchOutlined, DoubleRightOutlined, UndoOutlined } from '@ant-design/icons';
+const SearchForm = ({
+  form: externalForm,
+  style,
+  expand,
+  // 受控
+  defaultExpand = false,
+  // 内部默认展开
+  colSize = 3,
+  loading = false,
+  formLine = [],
+  initialValues = {},
+  onRef = () => {},
+  onReset = () => {},
+  onFinish = () => {},
+  onExpand
+}) => {
+  const internalForm = useRef();
+  const form = externalForm || internalForm;
+  const [internalOpen, setInternalOpen] = useState(defaultExpand);
+  useEffect(() => {
+    if (onRef) {
+      onRef(form);
+    }
+  }, [form, onRef]);
+  const isControlled = expand !== undefined;
+  const isOpen = isControlled ? expand : internalOpen;
+  const handleToggle = () => {
+    if (isControlled) {
+      onExpand && onExpand(!expand);
+    } else {
+      setInternalOpen(prev => {
+        const next = !prev;
+        onExpand && onExpand(next);
+        return next;
+      });
+    }
+  };
+  const getButtons = () => /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    icon: /*#__PURE__*/React.createElement(SearchOutlined, null),
+    htmlType: "submit",
+    loading: loading
+  }, "\u67E5\u8BE2"), /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(UndoOutlined, null),
+    loading: loading,
+    onClick: () => {
+      form.current.resetFields();
+      onReset(form.current.getFieldsValue());
+    }
+  }, "\u91CD\u7F6E"), formLine.length / colSize > 1 && /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(DoubleRightOutlined, {
+      style: {
+        transform: isOpen ? 'rotate(-90deg)' : 'rotate(90deg)'
+      }
+    }),
+    onClick: handleToggle
+  }, isOpen ? '收起' : '展开'));
+  const groupsList = () => {
+    const arr = formLine.map(node => ({
+      show: true,
+      node
+    }));
+    if (isOpen || arr.length <= 3) {
+      return arr;
+    }
+    return arr.map((item, index) => index > 2 ? {
+      ...item,
+      show: false
+    } : item);
+  };
+  const formItemList = groupsList();
+  if (formItemList.length === 0) return null;
+  return /*#__PURE__*/React.createElement(Form, {
+    ref: form,
+    style: style,
+    initialValues: initialValues,
+    onFinish: values => onFinish(values)
+  }, /*#__PURE__*/React.createElement(Row, {
+    gutter: [16, 16]
+  }, formItemList.map((item, index) => /*#__PURE__*/React.createElement(Col, {
+    key: index,
+    span: 24 / colSize,
+    style: {
+      display: item.show ? 'block' : 'none'
+    }
+  }, item.node)), /*#__PURE__*/React.createElement(Col, {
+    span: 24 / colSize
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    noStyle: true
+  }, getButtons()))));
+};
+export default SearchForm;

package/Table/index.js

@@ -0,0 +1,118 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { tools } from '@cqsjjb/jjb-common-lib';
+import { ProTable } from '@ant-design/pro-components';
+import { useAntdResizableHeader } from 'use-antd-resizable-header';
+import { antPrefix, setTableSize, getTableSize, getPersistenceKey } from './utils';
+import './index.less';
+require('use-antd-resizable-header/dist/style.css');
+export default function TablePro(props) {
+  const prefix = antPrefix || 'ant';
+  const baseCls = `.${prefix}-table`;
+  const tableCls = `${baseCls}-wrapper`;
+  const tableBodyCls = `${baseCls}-body`;
+  const {
+    storeIndex
+  } = props;
+  const [size, setSize] = React.useState(getTableSize(storeIndex) || 'default');
+  const [tableHeight, setTableHeight] = React.useState(0);
+  const persistenceKey = getPersistenceKey(storeIndex);
+  const enabledResizer = tools.isUndefined(props.disabledResizer);
+  React.useEffect(() => {
+    let mutationObserver, resizeObserver;
+    if (enabledResizer) {
+      // 监听-DOM树
+      mutationObserver = new MutationObserver(mutations => mutations.forEach(() => calcTableHeight()));
+      // 监听-缩放
+      resizeObserver = new ResizeObserver(entries => entries.forEach(() => calcTableHeight()));
+
+      // 初始化首次计算
+      setTimeout(() => calcTableHeight(), 500);
+
+      // 执行-监听-缩放
+      resizeObserver.observe(document.body);
+      // 执行-监听-DOM树是否发生变化
+      mutationObserver.observe(document.body, {
+        subtree: true,
+        childList: true
+      });
+    }
+    return () => {
+      if (mutationObserver && resizeObserver && enabledResizer) {
+        resizeObserver.unobserve(document.body);
+        mutationObserver.disconnect(document.body);
+      }
+    };
+  }, []);
+  React.useEffect(() => {
+    setTableSize(size, storeIndex);
+  }, [size]);
+
+  // 计算高度
+  const calcTableHeight = () => {
+    try {
+      // table元素
+      const tableEl = document.querySelector(tableCls);
+      // table-body元素
+      const tableBodyEl = document.querySelector(tableBodyCls);
+      if (tableBodyEl && tableEl) {
+        // 获取table元素的矩形数据
+        const tableRect = tableEl.getBoundingClientRect();
+        // 获取table-body元素的矩形数据
+        const tableBodyRect = tableBodyEl.getBoundingClientRect();
+        // 获取底部的高度差
+        const bottomHeight = tableRect.bottom - tableBodyRect.bottom;
+        // 计算最终值
+        setTableHeight(innerHeight - tableBodyRect.top - bottomHeight - (window.__IN_BASE__ ? 38 : 22));
+      }
+    } catch (e) {
+      window.console['error'](e);
+    }
+  };
+  const {
+    components,
+    resizableColumns,
+    tableWidth,
+    resetColumns
+    // refresh
+  } = useAntdResizableHeader({
+    columns: props.columns,
+    columnsState: {
+      persistenceKey: persistenceKey.resizable,
+      persistenceType: 'localStorage'
+    }
+  });
+  const scroll = {
+    x: tableWidth
+  };
+  if (enabledResizer) {
+    scroll.y = tableHeight;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProTable, _extends({
+    ghost: true,
+    columnEmptyText: true,
+    size: size,
+    search: false,
+    scroll: scroll,
+    className: `${antPrefix}-gbs-pro-table`,
+    options: {
+      reload: false,
+      fullScreen: true,
+      setting: {
+        checkedReset: true,
+        extra: /*#__PURE__*/React.createElement("a", {
+          className: `${antPrefix}-pro-table-column-setting-action-rest-button`,
+          onClick: resetColumns
+        }, "\u91CD\u7F6E\u5217\u5BBD")
+      }
+    },
+    components: components,
+    columnsState: {
+      persistenceKey: persistenceKey.columnState,
+      persistenceType: 'localStorage'
+    },
+    onSizeChange: setSize
+  }, props, {
+    columns: resizableColumns
+  })));
+}

package/TableAction/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { tools } from '@cqsjjb/jjb-common-lib';
+import { MoreOutlined } from '@ant-design/icons';
+import { Dropdown, Space } from 'antd';
+export default function TableAction({
+  maximum = 3,
+  children,
+  space,
+  icon: Icon = MoreOutlined,
+  placement = 'bottomRight',
+  // 下拉菜单位置，默认 bottomRight
+  trigger = ['hover'] // 下拉触发方式，默认 hover
+}) {
+  // 将 children 统一成数组并过滤空值
+  const childArray = (tools.isArray(children) ? children : [].concat(children)).filter(Boolean);
+  const showArray = childArray.slice(0, maximum);
+  const hideArray = childArray.slice(maximum);
+  return /*#__PURE__*/React.createElement(Space, {
+    size: space
+  }, showArray, hideArray.length > 0 && /*#__PURE__*/React.createElement(Dropdown, {
+    menu: {
+      items: hideArray.map((child, index) => ({
+        key: index,
+        label: child
+      }))
+    },
+    placement: placement,
+    trigger: trigger
+  }, /*#__PURE__*/React.createElement("a", null, /*#__PURE__*/React.createElement(Icon, null))));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqsjjb/jjb-react-admin-component",
-  "version": "3.3.1-beta.6",
+  "version": "3.3.1-beta.8",
   "description": "jjb-react-admin-组件库@new",
   "main": "index.js",
   "author": "jjb-front-team",