@cfmm/umi-plugins-ui-v2 0.0.1

package/dist/esm/components/ReportTable.tpl

@@ -0,0 +1,336 @@
+import { CloudDownloadOutlined } from '@ant-design/icons';
+import { ActionType, ColumnsState, ProTable } from '@ant-design/pro-components';
+import { getLocale, useIntl, useModel } from '@umijs/max';
+import { useMemoizedFn } from 'ahooks';
+import { Button, message, Modal } from 'antd';
+import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import useFormatLocale from '../hooks/useFormatLocale';
+import useQueryTableList from '../hooks/useQueryTableList';
+import { getAuthorityFunction } from '../index';
+import { API, ReportTableProps, ReportTableRef } from '../types';
+import {
+  genExcel,
+  genExcelWithMutilHeader,
+  getExportColumns,
+  getExportColumnsWithGroupSupport,
+  getExportValueForColumns,
+} from '../utils/excelHelper';
+import TipsTableTitle from './TipsTableTitle';
+
+const tableSearchFormLayout = (usLabelWidth: number): Record<string, any> => {
+  const usLayout = { labelWidth: usLabelWidth, span: { xs: 24, sm: 24, md: 24, lg: 12, xl: 8, xxl: 8 } };
+
+  return {
+    'en-US': usLayout,
+    'th-TH': usLayout,
+  };
+};
+
+/**
+ * 获取列表查询表单布局配置
+ * @param cnLabelWidth 多语言中文labelWidth，默认120
+ * @param usLabelWidth 多语言英文labelWidth，默认190
+ * @returns
+ */
+export const getTableSearchFormLayout = (cnLabelWidth = 120, usLabelWidth = 210) => {
+  const locale = getLocale();
+  const layout = tableSearchFormLayout(usLabelWidth)[locale] ?? {
+    labelWidth: cnLabelWidth,
+    span: { xs: 24, sm: 24, md: 12, lg: 12, xl: 8, xxl: 6 },
+  };
+  return layout;
+};
+
+const TABLE_SCROLL = { x: 'max-content' };
+
+// 最大导出条数
+const MAX_DOWNLOAD = 65536;
+const BASE_PAGINATION = {
+  showSizeChanger: true,
+};
+
+/**
+ * 报表表格通用组件
+ */
+const ReportTable = <T extends Record<string, any> = any, K extends API.TableListParams = API.TableListParams>(
+  props: ReportTableProps<T, K>,
+  ref: ForwardedRef<ReportTableRef<T, K>>,
+) => {
+  const {
+    queryTableList,
+    baseLocalCode,
+    baseLocalName,
+    MC_AuthorityCode_EXPORT,
+    handlePercentChange,
+    extraSearchParams,
+    interceptors = {},
+    ...resetProps
+  } = props;
+
+  // @ts-ignore
+  let { currentUser } = window.__POWERED_BY_QIANKUN__ ? useModel('@@qiankunStateFromMaster') : useModel('user');
+  const { getLocalDate } = useFormatLocale();
+  const { formatMessage } = useIntl();
+
+  const actionRef = useRef<ActionType>();
+  const timer = useRef<NodeJS.Timeout>();
+  const [columnsStateMap, setColumnsStateMap] = useState<Record<string, ColumnsState>>({});
+  const [tableData, setTableData] = useState<T[]>([]);
+  // 用于导出查询，不能使用formRef，会造成与表格数据不一致
+  const [tableSearchParams, setTableSearchParams] = useState<K>({} as K);
+
+  // 封装数据查询的hooks
+  const { queryList, loading } = useQueryTableList({ baseLocalCode, baseLocalName });
+
+  /**
+   * 查询数据
+   * @param params
+   * @returns
+   */
+  const handleSearch = useMemoizedFn(async (params: K) => {
+    if (loading) return [];
+    const processedParams = interceptors.query?.request ? interceptors.query.request(params) : params;
+    setTableSearchParams(processedParams);
+
+    const result = await queryList<T[]>(processedParams, {
+      queryFn: queryTableList,
+    });
+
+    // 请求后拦截器
+    let processedResult = interceptors.query?.response ? await interceptors.query.response(result) : result;
+
+    setTableData(processedResult.data);
+
+    return processedResult;
+  });
+
+  /**
+   * 查询导出数据
+   * @param params
+   * @returns
+   */
+  const handleSearchAll = useMemoizedFn(async () => {
+    if (loading) return { success: false };
+
+    // 去除分页参数
+    const newSearchParams = { ...tableSearchParams };
+    delete newSearchParams.pageIndex;
+    delete newSearchParams.pageSize;
+    delete newSearchParams.current;
+
+    const processedParams = interceptors.queryAll?.request
+      ? interceptors.queryAll.request(newSearchParams)
+      : newSearchParams;
+
+    const result = await queryList<readonly T[]>(processedParams, {
+      queryFn: queryTableList,
+    });
+
+    // 请求后拦截器
+    let processedResult = interceptors.queryAll?.response ? await interceptors.queryAll.response(result) : result;
+
+    if (!processedResult.success && processedResult.error?.response?.status === 504) {
+      message.error(
+        formatMessage({ id: 'cfmmUI.File.export.timeOut.help', defaultMessage: '数据量过大，请联系工作人员帮助导出' }),
+      );
+    }
+
+    return processedResult;
+  });
+
+  /**
+   * 下载数据为Excel
+   */
+  const handleDownloadExcel = useMemoizedFn(async () => {
+    props.setDownloadButtonLoading?.(true);
+
+    try {
+      const result = await handleSearchAll();
+
+      if (!result.success || result.error || !result.data) {
+        return;
+      }
+
+      // 检查是否有组合列（包含children的列）
+      const hasGroupColumns = props.columns.some((column) => column.children && column.children.length > 0);
+
+      // 文件名根据多语言形成
+      const fileName = formatMessage({ id: [baseLocalCode] + '.title', defaultMessage: baseLocalName });
+
+      if (hasGroupColumns) {
+        // 使用多级表头导出
+        const { flatColumns, headers, mergeCells } = getExportColumnsWithGroupSupport<T>({
+          columns: props.columns,
+          columnsStateMap,
+        });
+
+        // 创建导出Excel（多级表头）
+        genExcelWithMutilHeader(fileName + '.xlsx', 'sheet1', headers, mergeCells, async () => {
+          // 生成数据行
+          const allRows = await getExportValueForColumns({
+            columns: flatColumns,
+            data: result.data,
+            getLocalDate,
+            handlePercentChange,
+          });
+
+          // 检查数据量是否超限
+          if (allRows.length > MAX_DOWNLOAD) {
+            return new Promise<any[]>((resolve) => {
+              Modal.warning({
+                title: formatMessage({
+                  id: 'cfmmUI.File.download.exceed.max.title',
+                  defaultMessage: `下载数据过大提醒`,
+                }),
+                content: formatMessage(
+                  {
+                    id: 'cfmmUI.File.download.exceed.max.tips',
+                    defaultMessage: `超出最大下载数据 ${MAX_DOWNLOAD} 条，超出部分请重新下载`,
+                  },
+                  {
+                    count: MAX_DOWNLOAD,
+                  },
+                ),
+                onOk: () => resolve(allRows.slice(0, MAX_DOWNLOAD)),
+              });
+            });
+          }
+
+          return allRows;
+        });
+      } else {
+        // 使用普通单级表头导出
+        const exportColumns = getExportColumns<T>({ columns: props.columns, columnsStateMap });
+
+        // 固定列名
+        const columnsName = exportColumns.map((item) => String(item.title || '')).filter(Boolean);
+
+        // 创建导出Excel
+        genExcel(fileName + '.xlsx', 'sheet1', columnsName, async () => {
+          // 生成数据行
+          const allRows = await getExportValueForColumns({
+            columns: exportColumns,
+            data: result.data,
+            getLocalDate,
+            handlePercentChange,
+          });
+
+          // 检查数据量是否超限
+          if (allRows.length > MAX_DOWNLOAD) {
+            return new Promise<any[]>((resolve) => {
+              Modal.warning({
+                title: formatMessage({
+                  id: 'cfmmUI.File.download.exceed.max.title',
+                  defaultMessage: `下载数据过大提醒`,
+                }),
+                content: formatMessage(
+                  {
+                    id: 'cfmmUI.File.download.exceed.max.tips',
+                    defaultMessage: `超出最大下载数据 ${MAX_DOWNLOAD} 条，超出部分请重新下载`,
+                  },
+                  {
+                    count: MAX_DOWNLOAD,
+                  },
+                ),
+                onOk: () => resolve(allRows.slice(0, MAX_DOWNLOAD)),
+              });
+            });
+          }
+
+          return allRows;
+        });
+      }
+    } catch (error) {
+      console.error('导出Excel时发生错误:', error);
+      message.error('导出失败，请重试');
+    } finally {
+      // 重置下载状态
+      timer.current = setTimeout(() => {
+        props.setDownloadButtonLoading?.(false);
+        handlePercentChange?.(0);
+      }, 2000);
+    }
+  });
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      tableData,
+      columnsStateMap,
+      tableAction: actionRef.current,
+      tableSearchParams,
+    }),
+    [tableSearchParams, columnsStateMap, actionRef, tableData],
+  );
+
+  useEffect(() => {
+    return () => timer.current && clearTimeout(timer.current);
+  }, []);
+
+  useEffect(() => {
+    actionRef.current?.reload();
+  }, [extraSearchParams]);
+
+  return (
+    <ProTable<T, K>
+      actionRef={actionRef}
+      dateFormatter="string"
+      revalidateOnFocus={false}
+      pagination={BASE_PAGINATION}
+      scroll={TABLE_SCROLL}
+      search={getTableSearchFormLayout()}
+      headerTitle={
+        <TipsTableTitle title={formatMessage({ id: [baseLocalCode] + '.title', defaultMessage: baseLocalName })} />
+      }
+      columnsState={useMemo(
+        () => ({
+          value: columnsStateMap,
+          onChange: setColumnsStateMap,
+        }),
+        [columnsStateMap],
+      )}
+      request={useMemoizedFn(async (params, sorter) => {
+        // 获取出来参数，将当前页面current和页数据大小pageSize提取出来
+        const { pageIndex = params.current, pageSize, ...otherParams } = params;
+
+        const newParams = {
+          pageIndex,
+          pageSize,
+          orderBy: { ...sorter },
+          ...otherParams,
+          ...extraSearchParams,
+        };
+
+        //调用后台API
+        return await handleSearch(newParams);
+      })}
+      toolBarRender={useMemoizedFn(() => {
+        const auth =
+          typeof MC_AuthorityCode_EXPORT === 'boolean'
+            ? MC_AuthorityCode_EXPORT
+            : getAuthorityFunction(MC_AuthorityCode_EXPORT, currentUser);
+        if (!auth) return [];
+        return [
+          <Button
+            type="primary"
+            key={'download'}
+            /**
+             * 有数据才可以下载
+             */
+            disabled={!tableData.length || loading}
+            onClick={handleDownloadExcel}
+            loading={props?.downloadButtonLoading}
+          >
+            <CloudDownloadOutlined />
+            {formatMessage({ id: 'cfmmUI.File.button.excel.download', defaultMessage: '下载为Excel' })}
+          </Button>,
+        ];
+      })}
+      {...resetProps}
+    />
+  );
+};
+
+export default React.memo(forwardRef(ReportTable)) as <T = any, K extends Record<string, any> = any>(
+  props: ReportTableProps<T, K> & { ref?: ForwardedRef<ReportTableRef<T, K>> },
+) => JSX.Element;

package/dist/esm/components/Secured.tpl

@@ -0,0 +1,66 @@
+import React from 'react';
+import CheckPermissions from './CheckPermissions';
+
+/**
+ * 默认不能访问任何页面
+ * default is "NULL"
+ */
+const Exception403 = () => 403;
+
+export const isComponentClass = (component: React.ComponentClass | React.ReactNode): boolean => {
+  if (!component) return false;
+  const proto = Object.getPrototypeOf(component);
+  if (proto === React.Component || proto === Function.prototype) return true;
+  return isComponentClass(proto);
+};
+
+// Determine whether the incoming component has been instantiated
+// AuthorizedRoute is already instantiated
+// Authorized  render is already instantiated, children is no instantiated
+// Secured is not instantiated
+const checkIsInstantiation = (target: React.ComponentClass | React.ReactNode) => {
+  if (isComponentClass(target)) {
+    const Target = target as React.ComponentClass;
+    return (props: any) => <Target {...props} />;
+  }
+  if (React.isValidElement(target)) {
+    return (props: any) => React.cloneElement(target, props);
+  }
+  return () => target;
+};
+
+/**
+ * 用于判断是否拥有权限访问此 view 权限
+ * authority 支持传入 string, () => boolean | Promise
+ * e.g. 'user' 只有 user 用户能访问
+ * e.g. 'user,admin' user 和 admin 都能访问
+ * e.g. ()=>boolean 返回true能访问,返回false不能访问
+ * e.g. Promise  then 能访问   catch不能访问
+ * e.g. authority support incoming string, () => boolean | Promise
+ * e.g. 'user' only user user can access
+ * e.g. 'user, admin' user and admin can access
+ * e.g. () => boolean true to be able to visit, return false can not be accessed
+ * e.g. Promise then can not access the visit to catch
+ * @param {string | function | Promise} authority
+ * @param {ReactNode} error 非必需参数
+ */
+const authorize = (authority: string, error?: React.ReactNode) => {
+  /**
+   * conversion into a class
+   * 防止传入字符串时找不到staticContext造成报错
+   * String parameters can cause staticContext not found error
+   */
+  let classError: boolean | React.FunctionComponent = false;
+  if (error) {
+    classError = (() => error) as React.FunctionComponent;
+  }
+  if (!authority) {
+    throw new Error('authority is required');
+  }
+  return function decideAuthority(target: React.ComponentClass | React.ReactNode) {
+    const component = CheckPermissions(authority, target, classError || Exception403);
+    return checkIsInstantiation(component);
+  };
+};
+
+export default authorize;

package/dist/esm/components/ThemeSwitch.tpl

@@ -0,0 +1,74 @@
+import {
+  disable as darkreaderDisable,
+  enable as darkreaderEnable,
+  setFetchMethod as setFetch,
+} from '@umijs/ssr-darkreader';
+import { Switch } from 'antd';
+import React, { useEffect } from 'react';
+import { ThemeSwitchProps } from "../types";
+
+/**
+ * 主题切换按钮
+ * @param props ThemeSwitchProps
+ * @returns 
+ */
+const ThemeSwitch: React.FC<ThemeSwitchProps> = (props) => {
+  const { onThemeChange, defaultChecked, ...switchProps } = props;
+
+  let darkMode = typeof defaultChecked === 'boolean' ? defaultChecked : localStorage.getItem('darkMode') === '1';
+
+  const updateTheme = async (dark: boolean) => {
+    if (typeof window === 'undefined') return;
+    if (typeof window.MutationObserver === 'undefined') return;
+
+    if (dark) {
+      const defaultTheme = {
+        brightness: 100,
+        contrast: 90,
+        sepia: 10,
+      };
+
+      const defaultFixes = {
+        invert: [],
+        css: '',
+        ignoreInlineStyle: ['.react-switch-handle'],
+        ignoreImageAnalysis: [],
+        disableStyleSheetsProxy: true,
+      };
+      if (window.MutationObserver && window.fetch) {
+        setFetch(window.fetch);
+        darkreaderEnable(defaultTheme, defaultFixes);
+        onThemeChange?.(true);
+      }
+    } else {
+      if (window.MutationObserver) {
+        darkreaderDisable();
+        onThemeChange?.(false);
+      }
+    }
+  };
+
+  const switchDarkMode = () => {
+    //单击开关触发主题切换
+    localStorage.setItem('darkMode', darkMode ? '0' : '1');
+    darkMode = !darkMode;
+    updateTheme(darkMode);
+  };
+
+  useEffect(() => {
+    updateTheme(darkMode);
+  }, []);
+
+  return (
+    <Switch
+      checkedChildren="🌜"
+      unCheckedChildren="🌞"
+      size={'small'}
+      onClick={switchDarkMode}
+      {...switchProps}
+      defaultChecked={darkMode}
+    />
+  );
+};
+
+export default React.memo(ThemeSwitch);

package/dist/esm/components/TimeTypeSelect.tpl

@@ -0,0 +1,35 @@
+import { useIntl } from '@umijs/max';
+import { Select, SelectProps } from 'antd';
+import React from 'react';
+const { Option } = Select;
+
+export type TimeType = 'h' | 'm' | 's';
+
+export interface TimeTypeSelectProps extends SelectProps {
+  defautlValue?: TimeType;
+  value?: TimeType;
+}
+
+/**
+ * 时间类型下拉选择
+ * @param defautlValue 
+ * @param value 
+ * @returns 
+ */
+const TimeTypeSelect: React.FC<TimeTypeSelectProps> = (props) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Select
+      defaultValue="h"
+      style={{ width: 80 }}
+      {...props}
+    >
+      <Option value="h">{formatMessage({ id: 'cfmmUI.TimeTypeSelect.time.hour' })}</Option>
+      <Option value="m">{formatMessage({ id: 'cfmmUI.TimeTypeSelect.time.minute' })}</Option>
+      <Option value="s">{formatMessage({ id: 'cfmmUI.TimeTypeSelect.time.second' })}</Option>
+    </Select>
+  );
+};
+
+export default React.memo(TimeTypeSelect);

package/dist/esm/components/TipsTableTitle.tpl

@@ -0,0 +1,37 @@
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Tooltip } from 'antd';
+import React from 'react';
+
+interface IProps {
+  title: string;
+  tips?: string;
+}
+
+const TipsTableTitle: React.FC<IProps> = (props) => {
+  const { title, tips } = props;
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      <span>{title}</span>
+      <Tooltip
+        title={
+          <div>
+            {tips
+              ? tips
+              : formatMessage({
+                  id: 'common.download.exceed.guide',
+                  defaultMessage:
+                    '下载提示：请使用查询条件筛选出所需数据，再点击下载按钮进行下载。如果数据量太大无法导出，请联系工作人员帮助！',
+                })}
+          </div>
+        }
+      >
+        <QuestionCircleOutlined style={{ color: 'rgba(0, 0, 0, 0.45)', marginLeft: 4 }} />
+      </Tooltip>
+    </>
+  );
+};
+
+export default React.memo(TipsTableTitle);

package/dist/esm/components/UTCDatePicker.tpl

@@ -0,0 +1,107 @@
+import { useModel } from '@umijs/max';
+import { DatePicker } from 'antd';
+import dayjs from 'dayjs';
+import React, { useMemo } from 'react';
+import { UTC_FORMAT } from '../constants';
+import { UTCDatePickerProps } from "../types";
+
+/**
+ * 带UTC时区转换功能的DatePicker组件
+ */
+const UTCDatePicker = (props: UTCDatePickerProps) => {
+  // 设置mode后无法显示时间
+  const { readonly, convertTimeZone = true, showTime = false, mode, ...reset } = props;
+  const { timeZone, timeFormat, dateFormat } = window.__POWERED_BY_QIANKUN__ ? useModel("@@qiankunStateFromMaster") : useModel('user');
+
+  // 将日期转换为地区时间显示
+  const value = useMemo(() => {
+    const v = props.value;
+    if (v && dayjs(v).isValid()) {
+      const date = dayjs(v);
+      return convertTimeZone ? date.tz(timeZone) : date;
+    }
+  }, [props.value, convertTimeZone, timeZone]);
+
+  // 获取设置的格式
+  const format = useMemo(() => {
+    if(typeof showTime === 'object' && showTime.format ) {
+      return `${dateFormat} ${showTime.format}`;
+    };
+    return props.format || showTime ? `${dateFormat} ${timeFormat}` : dateFormat;
+  }, [props.format, showTime, dateFormat, timeFormat]);
+
+  // 将日期转为标准时间
+  const handleChange = (date: dayjs.Dayjs, dateString: string | string[]) => {
+    if (date) {
+      // 转标准时间，显示时间转换有问题
+      const standardTime: any = convertTimeZone ? date.utc().format(UTC_FORMAT) : date.format(UTC_FORMAT);
+      const dateString = convertTimeZone ? date.utc().format(format) : date.format(format);
+
+      props.onChange?.(standardTime, dateString);
+      return;
+    }
+    props.onChange?.(date, dateString);
+  };
+
+  // 将日期转为数字
+  const handleValueToNumber = (v: string | undefined) => {
+    if (!v) return;
+    let value = v.replace(/\//g, '').replace(/-/g, '').replace(/:/g, '').replace(/\s/g, '');
+    if (value.length === 8 || value.length === 10 || value.length === 12 || value.length === 14) {
+      value = value.padEnd(14, '0');
+    } else {
+      return;
+    }
+
+    // 将其他格式的日期替换为20240811格式
+    if (dateFormat === 'DD-MM-YYYY' || dateFormat === 'DD/MM/YYYY') {
+      value = value
+        .slice(0, 8)
+        .replace(/^(\d{2})(\d{2})(\d{4})$/, '$3$2$1')
+        .concat(value.slice(8));
+    }
+    if (dateFormat === 'MM-DD-YYYY' || dateFormat === 'MM/DD/YYYY') {
+      value = value
+        .slice(0, 8)
+        .replace(/^(\d{2})(\d{2})(\d{4})$/, '$3$1$2')
+        .concat(value.slice(8));
+    }
+
+    return value;
+  };
+
+  // 将数字转为日期格式YYYY-MM-DD HH:mm:ss
+  const formatDateTime = (dateTimeStr: string) => {
+    if (dateTimeStr.length !== 14) {
+      return;
+    }
+    return dateTimeStr.replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/, '$1-$2-$3 $4:$5:$6');
+  };
+
+  // 失焦后将输入的值设置为日期
+  const handleBlur = (e: React.FocusEvent<HTMLElement> | any) => {
+    const v = handleValueToNumber(e.target.value);
+    if (!v) return;
+    const date = formatDateTime(v);
+    if (date) {
+      handleChange(dayjs(date), date);
+    }
+  };
+
+  return readonly ? (
+    <div>{value ? dayjs(value).format(format) : '-'}</div>
+  ) : (
+    <DatePicker
+      style={{ width: '100%' }}
+      showTime={showTime}
+      mode={showTime ? undefined : mode}
+      {...reset}
+      value={value}
+      format={format}
+      onChange={(date, dateString) => handleChange(date, dateString)}
+      onBlur={handleBlur}
+    />
+  );
+};
+
+export default React.memo(UTCDatePicker);