@cfmm/umi-plugins-ui-v2 0.0.1

package/README.md

@@ -0,0 +1,29 @@
+# @cfmm/umi-plugins-ui-v2
+
+A umi plugin
+
+## Install
+
+```bash
+pnpm i @cfmm/umi-plugins-ui-v2
+```
+
+## Usage
+
+Configure in `.umirc.ts`,
+
+```js
+export default {
+  plugins: [
+    ['@cfmm/umi-plugins-ui-v2'],
+  ],
+}
+```
+
+## Options
+
+TODO
+
+## LICENSE
+
+MIT

package/dist/cjs/components/ActionLogDrawer.tpl

@@ -0,0 +1,148 @@
+import useAction from '../hooks/useAction';
+import useFormatLocale from '../hooks/useFormatLocale';
+import { useIntl } from '@umijs/max';
+import { useMemoizedFn } from 'ahooks';
+import { Descriptions, Drawer } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
+import { queryEmployeeByCodes } from '../services';
+import { ActionLogDrawerBaseRecordType, ActionLogDrawerProps } from '../types';
+
+const ActionLogDrawer = <T extends ActionLogDrawerBaseRecordType>(props: ActionLogDrawerProps<T>) => {
+  const { row, createBy, createTime, updateBy, updateTime, ...drawerProps } = props;
+  const { formatMessage } = useIntl();
+  const { getLocalDate } = useFormatLocale();
+  const [employeeList, setEmployeeList] = useState<{ userCode: string; userName: string }[]>([]);
+
+  // 封装增删查改的hooks
+  const { doAction, loading: actionLoading } = useAction();
+
+  const createByCode = useMemo(() => {
+    return createBy ?? row?.createBy;
+  }, [row, createBy]);
+
+  const updateByCode = useMemo(() => {
+    return updateBy ?? row?.updateBy;
+  }, [row, updateBy]);
+
+  /**
+   * 处理时间格式
+   */
+  const getFormatTime = useMemoizedFn((time1?: string, time2?: string) => {
+    if (!time1 && !time2) return '-';
+
+    const time = time1 ?? time2;
+
+    return getLocalDate(time, { dateFormat: true, timeFormat: true });
+  });
+
+  /**
+   * 根据编号，获取名称
+   */
+  const getNameByCode = useMemoizedFn((code) => {
+    if(!code) return '-'
+
+    const employee = employeeList.find((item) => item.userCode === code);
+    return employee ? `${employee.userName}(${employee.userCode})` : code;
+  });
+
+  /**
+   * 根据员工编号list查询员工list
+   */
+  const requestEmployeeByCode = async (userCodes: string[]) => {
+    if (actionLoading || !userCodes.length) return;
+
+    const { success, data } = await doAction('POST', { userCodes }, { actionFn: queryEmployeeByCodes, showMsg: false });
+
+    if (success && data) {
+      setEmployeeList(data);
+    }
+  };
+
+  useEffect(() => {
+    const codes = [createByCode, updateByCode].filter(Boolean) as string[];
+    requestEmployeeByCode(codes);
+  }, [createByCode, updateByCode]);
+
+  return (
+    <Drawer
+      width={500}
+      title={formatMessage({
+        id: 'cfmmUI.ActionLogDrawer.title',
+        defaultMessage: '操作记录',
+      })}
+      open={!!row}
+      closable={false}
+      {...drawerProps}
+      onClose={(e) => {
+        props.onClose?.(e);
+        setEmployeeList([]);
+      }}
+    >
+      <>
+        {props.children ? (
+          props.children
+        ) : (
+          <>
+            <Descriptions
+              title={formatMessage({
+                id: 'cfmmUI.ActionLogDrawer.add',
+                defaultMessage: '新增',
+              })}
+              column={1}
+            >
+              <Descriptions.Item
+                label={formatMessage({
+                  id: 'cfmmUI.common.createBy',
+                  defaultMessage: '创建人',
+                })}
+              >
+                {getNameByCode(createByCode)}
+              </Descriptions.Item>
+              <Descriptions.Item
+                label={formatMessage({
+                  id: 'cfmmUI.common.createTime',
+                  defaultMessage: '创建时间',
+                })}
+              >
+                {getFormatTime(createTime, row?.createTime)}
+              </Descriptions.Item>
+            </Descriptions>
+
+            <Descriptions
+              title={formatMessage({
+                id: 'cfmmUI.ActionLogDrawer.update',
+                defaultMessage: '修改',
+              })}
+              column={1}
+              style={{ marginBlockStart: 30 }}
+            >
+              <Descriptions.Item
+                label={formatMessage({
+                  id: 'cfmmUI.common.lastUpdateBy',
+                  defaultMessage: '最后修改人员',
+                })}
+              >
+                {getNameByCode(updateByCode)}
+              </Descriptions.Item>
+              <Descriptions.Item
+                label={formatMessage({
+                  id: 'cfmmUI.common.lastUpdateTime',
+                  defaultMessage: '最后修改时间',
+                })}
+              >
+                {getFormatTime(updateTime, row?.updateTime)}
+              </Descriptions.Item>
+            </Descriptions>
+          </>
+        )}
+      </>
+    </Drawer>
+  );
+};
+
+/**
+ * 列表操作记录弹窗，如果不是传入row，请使用open属性打开弹窗
+ */
+export default React.memo(ActionLogDrawer) as <T extends ActionLogDrawerBaseRecordType = any>(
+  props: ActionLogDrawerProps<T>,
+) => JSX.Element;

package/dist/cjs/components/AddDrawerForm.tpl

@@ -0,0 +1,38 @@
+import { Drawer, DrawerProps } from 'antd';
+import { memo, useEffect } from 'react';
+
+interface CreateFormProps<T> extends DrawerProps {
+  onOpenChange: (visible: boolean) => void;
+}
+
+/**
+ * 通用列表新增弹窗
+ * @param {CreateFormProps} props
+ * @children children
+ * @returns
+ */
+function CreateForm<T>(props: CreateFormProps<T>) {
+  const { onOpenChange, ...reset } = props;
+
+  useEffect(() => {
+    if (props.open) {
+      onOpenChange(true);
+    }
+  }, [props.open]);
+
+  return (
+    <Drawer
+      width={500}
+      destroyOnHidden
+      {...reset}
+      onClose={(e) => {
+        props.onClose?.(e);
+        onOpenChange(false);
+      }}
+    >
+      {props.children}
+    </Drawer>
+  );
+}
+
+export default memo(CreateForm) as <T>(props: CreateFormProps<T>) => JSX.Element;

package/dist/cjs/components/AuthorizeRender.tpl

@@ -0,0 +1,11 @@
+import Authorized from './Authorized';
+import Secured from './Secured';
+import check from './CheckPermissions';
+import renderAuthorize from './renderAuthorize';
+
+Authorized.Secured = Secured;
+Authorized.check = check;
+
+const RenderAuthorize = renderAuthorize(Authorized);
+
+export default RenderAuthorize;

package/dist/cjs/components/Authorized.tpl

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Result } from 'antd';
+import check, { IAuthorityType } from './CheckPermissions';
+
+import AuthorizedRoute from './AuthorizedRoute';
+import Secured from './Secured';
+
+interface AuthorizedProps {
+  authority: IAuthorityType;
+  noMatch?: React.ReactNode;
+}
+
+type IAuthorizedType = React.FunctionComponent<AuthorizedProps> & {
+  Secured: typeof Secured;
+  check: typeof check;
+  AuthorizedRoute: typeof AuthorizedRoute;
+};
+
+/**
+ * 权限组件
+ * @param param0 
+ */
+const Authorized: React.FunctionComponent<AuthorizedProps> = ({
+  children,
+  authority,
+  noMatch = (
+    <Result
+      status="403"
+      title="403"
+      subTitle="Sorry, you are not authorized to access this page."
+    />
+  ),
+}) => {
+  const childrenRender: React.ReactNode = typeof children === 'undefined' ? null : children;
+  const dom = check(authority, childrenRender, noMatch);
+  return <>{dom}</>;
+};
+
+export default Authorized as IAuthorizedType;

package/dist/cjs/components/AuthorizedRoute.tpl

@@ -0,0 +1,33 @@
+import { Redirect, Route } from 'umi';
+
+import React from 'react';
+import Authorized from './Authorized';
+import { IAuthorityType } from './CheckPermissions';
+
+interface AuthorizedRouteProps {
+  currentAuthority: string;
+  component: React.ComponentClass<any, any>;
+  render: (props: any) => React.ReactNode;
+  redirectPath: string;
+  authority: IAuthorityType;
+}
+
+const AuthorizedRoute: React.SFC<AuthorizedRouteProps> = ({
+  component: Component,
+  render,
+  authority,
+  redirectPath,
+  ...rest
+}) => (
+    <Authorized
+      authority={authority}
+      noMatch={<Route {...rest} render={() => <Redirect to={{ pathname: redirectPath }} />} />}
+    >
+      <Route
+        {...rest}
+        render={(props: any) => (Component ? <Component {...props} /> : render(props))}
+      />
+    </Authorized>
+  );
+
+export default AuthorizedRoute;

package/dist/cjs/components/AvatarDropdown.tpl

@@ -0,0 +1,101 @@
+import { LogoutOutlined, SafetyOutlined, SettingOutlined } from "@ant-design/icons";
+import RandomAvatar from "./RandomAvatar";
+import { history, useIntl, useModel } from "@umijs/max";
+import { Avatar, Dropdown, MenuProps, Spin } from "antd";
+import React from "react";
+import { AvatarDropdownProps } from "../types";
+
+/**
+ * 主应用头部个人设置组件
+ * @param accountSettingsPath
+ * @param safeCenterUrl
+ * @returns
+ */
+const AvatarDropdown: React.FC<AvatarDropdownProps> = (props) => {
+  const {
+    accountSettingsPath = "/system/accountandsettings",
+    safeCenterUrl,
+    ...attr
+  } = props;
+
+  const { currentUser } = useModel("user");
+  const { logout } = useModel("login");
+  const { formatMessage } = useIntl();
+
+  //菜单下拉框，与菜单事件对应
+  const items: MenuProps["items"] = [
+    {
+      label: formatMessage({
+        id: "cfmmUI.GlobalHeader.Dropdown.PersonalSettings",
+        defaultMessage: "个人设置",
+      }),
+      key: "accountandsettings",
+      icon: <SettingOutlined />,
+      onClick: () => {
+        history.push(accountSettingsPath);
+      },
+    },
+    {
+      type: "divider",
+    },
+    {
+      label: formatMessage({
+        id: "cfmmUI.GlobalHeader.Dropdown.safeCenter",
+        defaultMessage: "安全中心",
+      }),
+      key: "safeCenter",
+      icon: <SafetyOutlined />,
+      onClick: () => {
+        try {
+          const url = safeCenterUrl ?? `${KEYCLOAK_URL}realms/${KEYCLOAK_REALM_NAME}/account/account-security/signing-in`;
+          window.open(url, "_blank");
+        } catch (error) {
+          console.log("error", error);
+        }
+      },
+    },
+    {
+      type: "divider",
+    },
+    {
+      label: formatMessage({
+        id: "cfmmUI.GlobalHeader.Dropdown.LogOut",
+        defaultMessage: "退出登录",
+      }),
+      key: "logout",
+      icon: <LogoutOutlined />,
+      onClick: () => {
+        logout();
+      },
+    },
+  ];
+
+  //获取当前用户，进行相应的处理
+  //当前用户存在，则显示成正常的样式，如果不存在则显示成Loading状态
+  return currentUser ? (
+    <Dropdown menu={{ items }}>
+      <span {...attr}>
+        <Avatar
+          size="small"
+          style={{ marginRight: 8 }}
+          icon={<RandomAvatar avatarCode={currentUser.userCode} width={24} />}
+        />
+        <span>{`${currentUser ? currentUser.userCode : "-"}(${
+          currentUser.userName ? currentUser.userName : "-"
+        })`}</span>
+      </span>
+    </Dropdown>
+  ) : (
+    <span>
+      <Spin
+        size="small"
+        style={{
+          marginLeft: 8,
+          marginRight: 8,
+        }}
+      />
+    </span>
+  );
+};
+
+export default React.memo(AvatarDropdown);

package/dist/cjs/components/CheckPermissions.tpl

@@ -0,0 +1,100 @@
+import React from 'react';
+import { CURRENT } from './renderAuthorize';
+//*eslint-disable-next-line import/no-cycle*/
+import PromiseRender from './PromiseRender';
+
+export type IAuthorityType =
+  | undefined
+  | string
+  | string[]
+  | Promise<boolean>
+  | ((currentAuthority: string | string[]) => IAuthorityType);
+
+/**
+ * 通用权限检查方法
+ * 该方法可以判断菜单中需要的权限组，及当前用户登陆后获取的用户组进行对比
+ * 
+ * 
+ * Common check permissions method
+ * @param { 权限判定 | Permission judgment } authority
+ * @param { 你的权限 | Your permission description } currentAuthority
+ * @param { 通过的组件 | Passing components } target
+ * @param { 未通过的组件 | no pass components } Exception
+ */
+const checkPermissions = <T, K>(
+  authority: IAuthorityType,
+  currentAuthority: string | string[],
+  target: T,
+  Exception: K,
+): T | K | React.ReactNode => {
+
+  /**
+   * 查看每个菜单的要求授权组别，及当前用户权限组
+   */
+  // console.log(`get authority(要求授权组别)==>${authority}  currentAuthority(当前用户权限组)==>${currentAuthority}`)
+
+  // 没有判定权限.默认查看所有
+  // Retirement authority, return target;
+  if (!authority) {
+    return target;
+  }
+
+
+  // 数组处理
+  if (Array.isArray(authority)) {
+    if (Array.isArray(currentAuthority)) {
+      if (currentAuthority.some((item) => authority.includes(item))) {
+        return target;
+      }
+    } else if (authority.includes(currentAuthority)) {
+      return target;
+    }
+    return Exception;
+  }
+
+
+  // string 处理
+  if (typeof authority === 'string') {
+    if (Array.isArray(currentAuthority)) {
+      if (currentAuthority.some((item) => authority === item)) {
+        return target;
+      }
+    } else if (authority === currentAuthority) {
+      return target;
+    }
+    return Exception;
+  }
+
+
+  // Promise 处理
+  if (authority instanceof Promise) {
+    return <PromiseRender<T, K> ok={target} error={Exception} promise={authority} />;
+  }
+
+
+  // Function 处理
+  if (typeof authority === 'function') {
+    const bool = authority(currentAuthority);
+    // 函数执行后返回值是 Promise
+    if (bool instanceof Promise) {
+      return <PromiseRender<T, K> ok={target} error={Exception} promise={bool} />;
+    }
+    if (bool) {
+      return target;
+    }
+    return Exception;
+  }
+
+
+  //未支持的参数
+  throw new Error('unsupported parameters');
+
+};
+
+export { checkPermissions };
+
+function check<T, K>(authority: IAuthorityType, target: T, Exception: K): T | K | React.ReactNode {
+  return checkPermissions<T, K>(authority, CURRENT, target, Exception);
+}
+
+export default check;

package/dist/cjs/components/CopyButton.tpl

@@ -0,0 +1,49 @@
+import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
+import React, { useEffect, useRef, useState } from 'react';
+
+interface Props {
+  text: string;
+}
+
+/**
+ * 复制按钮,效果和antd的table复制按钮一样
+ * @param text 需要复制的文本
+ */
+const CopyButton: React.FC<Props> = ({ text }) => {
+    
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<NodeJS.Timeout>();
+
+  const handleCopyClick = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+
+      timer.current = setTimeout(() => {
+        setCopied(false);
+      }, 3000);
+      
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
+    };
+  }, []);
+
+  return (
+    <span
+      style={{ cursor: 'pointer', marginLeft: '4px', position: 'relative', top: '-2px' }}
+      onClick={handleCopyClick}
+    >
+      {copied ? <CheckOutlined style={{ color: '#52c41a' }} /> : <CopyOutlined style={{ color: '#1890ff' }} />}
+    </span>
+  );
+};
+
+export default React.memo(CopyButton);