Unisolution江阴 前端技术团队组件库(React)

使用

yarn add @unisolution/components-react

// example

import {Login} from '@unisolution/component-react';

export default function () {
  return <Login/>;
}

说明

• react >= 18
• antd @5.14.0
• 内置了 classnames 、ahooks 、md5

更新日志

change log

颜色系统

内置的颜色

:root {
  --uni-border-color: #D9E0EC;
  --uni-font-color-grey: #8C99B0;
  --uni-main-color: #118DF9;
  --uni-border-radius: 4px;
  --uni-font-color: #393939;
}

NOTICE: 如需有更改主题色的需求，将您的项目中的这些颜色变量覆盖即可

！！！--uni-main-color必须使用十六进制

Login

| 名称 | 类型 | 是否必传 | 默认值 | 描述 | |---------------------|------------------------------------------|------|-------------|----------------------------------------------------------------------------------------------------------------------| | header | React.ReactNode | 否 | null | 页面的头部 | | footer | React.ReactNode | 否 | null | 页面的底部 | | bgImg | string | 否 | ’‘ | 登录页面的背景图 | | cardBgImg | string | 否 | ’‘ | 登录区域卡片的背景图 | | title | string | 是 | '' | 系统的标题 | | loginWays | string| string[] | 否 | ['account'] | 可取四个值中任意 account、 scan 、smscode、emailcode。分别代表支持账号密码登录、app扫码登录、验证码登录、邮箱登录。页面的选中的登录状态会按照传递的顺序来决定，取第一项为默认的登录方式 | | thirdPartyLoginWays | React.ReactNode[] | 否 | [] | 是否显示第三方登录，如果传值则会显示在登录框的底部 | | signup | boolean | 否 | true | 是否显示注册按钮 | | onClickSignup | () => void | 否 | | 设置了 signup 之后点击注册事件 | | onScanLoginChange | (isScanLogin: boolean) => void | 否 | | 点击切换扫码登录事件 | | onGetSmscode | (phone: string) => Promise <any> | 否 | | 点击获取手机验证码事件 | | onLogin | (params: LoginParams) => Promise <any> | 是 | | 点击登录事件 | | onGetActiveKey | (key: string) => void | 否 | | 获取当前tab的key | | miniCard | boolean | 否 | false | 卡片的样式是否是小卡片类型（整体靠右、无cardImg） |

Button

| 名称 | 类型 | 是否必传 | 默认值 | 描述 | |----------|---------------------------------------|------|---------|-----------| | type | primary\| danger \| default \| link | 否 | default | 按钮的类型 | | disabled | boolean | 否 | false | 是否禁用按钮 | | size | large \| small \| normal | 否 | normal | 按钮的大小 | | loading | boolean | 否 | false | 按钮loading |

Modal

| 名称 | 类型 | 是否必传 | 默认值 | 描述 | |-----------------|------------------|------|--------|----------------------------------------------------| | open | boolean | 是 | false | 是否显示Modal | | title | string | 否 | | Modal的标题 | | width | number | 否 | 400 | Modal的宽度 | | confirmText | string | 否 | ‘’确定‘’ | 确认按钮的文案 | | cancelText | string | 否 | ‘’取消‘’ | 取消按钮的文案 | | confirmLoading | boolean | 否 | false | 确定按钮是否loading状态 | | confirmDisabled | boolean | 否 | false | 确定按钮是否disabled状态 | | noPadding | boolean | 否 | false | Modal的content元素padding置为0 | | footer | null| ReactNode | 否 | | 为null则没有footer部分，不传默认为居中的按钮组，否则footer为传递的ReactNode | | onCancel | () => void | 否 | | 点击取消或者关闭icon触发的回调 | | onConfirm | () => void | 否 | | 点击确定按钮触发的回调 |

layer

| 方法 | 描述 | |----------------------------|-----------------| | loading(msg = '加载中···') | 打开一个全屏的loading | | closeLoading() | 关闭全屏的loading | | alert(props: ModalProps) | 显示一个modal形状的通知 | | confirm(props: ModalProps) | 打开一个确认框 | | error(message: string) | 显示一个toast 错误消息 | | msg(message: string) | 显示一个toast 成功消息 | | warn(message: string) | 显示一个toast 警告消息 | | info(message: string) | 显示一个toast 普通的消息 |

Drawer

| 名称 | 类型 | 是否必传 | 默认值 | 描述 | |-----------------|------------------|------|--------|----------------------------------------------------| | open | boolean | 是 | false | 是否显示Drawer | | mask | boolean | 否 | true | 是否显示遮罩层 | | title | ReactNode | 否 | | Drawer的标题 | | width | number | 否 | 320 | Drawer的宽度 | | confirmText | string | 否 | ‘’确定‘’ | 确认按钮的文案 | | cancelText | string | 否 | ‘’取消‘’ | 取消按钮的文案 | | confirmLoading | boolean | 否 | false | 确定按钮是否loading状态 | | confirmDisabled | boolean | 否 | false | 确定按钮是否disabled状态 | | padding | number | 否 | 16 | Drawer的content元素padding | | footer | null| ReactNode | 否 | | 为null则没有footer部分，不传默认为右侧的按钮组，否则footer为传递的ReactNode | | onCancel | () => void | 否 | | 点击取消或者关闭icon触发的回调 | | onConfirm | () => void | 否 | | 点击确定按钮触发的回调 |

PageTitle

| 名称 | 类型 | 是否必传 | 默认值 | 描述 | |-----------|------------|------|-------|-------------------------| | title | string | 否 | | 中间标题 | | closeFlag | boolean | 否 | true | 是否显示关闭按钮 | | backFlag | boolean | 否 | false | 是否显示返回按钮 | | leftTips | ReactNode | 否 | | 左侧标题 | | btns | ReactNode | 否 | | 右侧其他自定义按钮 | | closeFn | () => void | 否 | | 点击关闭按钮之后的回调，不传默认关闭当前页面 | | backFn | () => void | 否 | | 点击返回按钮之后的回调，不传默认返回上一个路由 |

Table 基于antd中table的二次封装

| 名称 | 类型 | 是否必传 | 默认值 | 描述 | |--------------|------------------------------------------|------|------|-------------------------| | rowKey | function(record): string | 否 | 'id' | 表格行 key 的取值，可以是字符串或一个函数 | | columns | ColumnsType[] | 是 | | 表格列的配置 | | dataSource | object[] | 否 | [] | 数据数组 | | showIndex | boolean | 否 | true | 是否显示序号 | | showPage | boolean | 否 | true | 是否显示分页 | | pageNum | number | 否 | 1 | 分页索引 | | pageSize | number | 否 | 20 | 当前页展示的数量 | | total | number | 否 | 0 | 数据总量 | | onPageChange | (page: number, pageSize: number) => void | 否 | | 需要分页的情况下需要使用此方法 | | customEmpty | ReactNode | 否 | | 表格无数据时自定义 |

UploadFile

| 名称 | 类型 | 是否必传 | 默认值 | 描述 | |--------------|-------------------------------|------|-------|-----------------------| | businessType | string | 是 | | OSS上传获取token生成client用 | | fileList | Array | 否 | [] | 已经上传的文件列表 | | disabled | boolean | 否 | false | 是否禁用 | | max | number | 否 | 100 | 限制最大上传的数量 | | fileType | string | 否 | all | 文件类型 | | onchange | (fileList) => void | 否 | | 上传文件改变时的回调 | | getOssToken | (params) => Promise | 是 | | 获取stsToken信息 |

Import

| 名称 | 类型 | 是否必传 | 默认值 | 描述 | |----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|------|-------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | businessType | string | 是 | | OSS上传获取token生成client用 | | pageTitle | string|() => void | 否 | 批量导入 | 当前页面左侧标题 | | getOssToken | (params) => Promise | 是 | | 获取stsToken信息params参数： ossBusiness: string;fileExt: string; fileSizeB: number; // 单位 B schoolId?: ID; suffix?: string; oldUrl?: string; appointName?: string; | | getColumns | ColumnType| () => Promise<Record<string, any>> | 是 | | 表格表头内容 | | textConfig | Object | 是 | | 1、warn（类型为string；温馨提示tips）2、getFieldsData（类型为object；字段）1）name：字段名称2）required：是否标红 3、downloadTip（类型为string；tips） | | getTemplate | () => Promise | 是 | | 模版下载 | | closeFlag | boolean | 否 | false | 是否显示'关闭'按钮 | | showHistoryBtn | boolean | 否 | true | 是否显示'历史导入记录'按钮 | | otherBtns | ReactNode | 否 | | 其他自定义Node | | noTemplate | boolean | 否 | false | 是否显示'下载上传模板'文字提示 | | uploadFn | ({excelName: string;excelUrl: string; excelSizeB: number;[key: string]: unknown}) => Promise | 是 | | 数据校验获取excel信息 | | getExcelResultFn | (excelImportId: ID, statusList: string[], page: {pageNum: number;pageSize: number}) => Promise<CustomSuccessData<PageList & {dataList: ExcelFileData[]}>> | 是 | | excel 表格解析结果 | | exportExcelFn | (excelImportId: ID, statusList: string, fileName?: string) => Promise | 是 | | 导出 | | saveExcel | (params: { excelImportId: ID; [key: string]: unknown }) => Promise | 是 | | 数据入库 | | checkUploadProgress | (id: ID) => Promise | 是 | | 上传进度 | | getExcelHistoryFn | ({ [key: string]: unknown;pageNum: number;pageSize: number;}) => Promise<CustomSuccessData<PageList & {dataList: ExcelHistory[]}>> | 是 | | 历史导入数据 | | getSignedDownloadUrl | () => Promise<CustomSuccessData> | 是 | | 获取只读stsToken, 用于私有文件读取权限的签名 |

// example
import {generateImportRoutes, GetAliossTokenParams, ImportConfig} from '@unisolution/components-react';
import {apiGetOssToken, apiGetSignStstoken} from '@/api/common.ts';
import {
  apiExportImportResult,
  getExcelHistory,
  getProgress,
  getUploadExcel,
  saveExcelData,
  uploadExcel
} from '@/api/import.ts';

const customRender = ({text}: { text: string }) => {
  return text || '-';
};

const columns = [
  {title: '品牌', dataIndex: 'brandName', customRender},
  {title: '型号', dataIndex: 'model', customRender},
  {title: '安装位置', dataIndex: 'location', customRender},
  {title: '位置说明', dataIndex: 'locationDescription', customRender},
  {title: '所属应用', dataIndex: 'campusAppName', customRender},
  {title: '排序号', dataIndex: 'seq', customRender},
  {title: '登录密码', dataIndex: 'loginPwd', customRender}
];

const importConfig: ImportConfig = {
  businessType: 'EXCEL_READ',
  pageTitle: '导入',
  getOssToken: async (source: GetAliossTokenParams) => {
    return apiGetOssToken(source);
  },
  getColumns: columns,
  textConfig: {
    downloadTip: '模板中包含填写须知，请仔细阅读',
    getFieldsData: async () => {
      return [
        {name: '品牌', required: true},
        {name: '型号', required: false},
        {name: '安装位置', required: true},
        {name: '位置说明', required: false},
        {name: '所属应用', required: false},
        {name: '排序号', required: true},
        {name: '登录密码', required: true}
      ];
    }
  },
  getTemplate: async () => {
    const button = document.createElement('a');
    button.href = 'https://jyjyapp.com/sources/smart-device/excel/智能设备管理系统导入模板.xlsx';
    button.click();
  },
  uploadFn: async ({excelName, excelUrl, excelSizeB}: any) => {
    const params = {
      excelName,
      excelUrl,
      excelSizeB,
      importType: 'AC_DEVICE'
    };
    return uploadExcel(params);
  },
  /** excel 表格解析结果 */
  getExcelResultFn: getUploadExcel,
  /** 上传进度 */
  checkUploadProgress: getProgress,
  /** 数据入库 */
  saveExcel: (params: { excelImportId: ID }) => {
    return saveExcelData({excelImportId: params.excelImportId});
  },
  /** 导出 */
  exportExcelFn: apiExportImportResult,
  /** 历史导入数据 */
  getExcelHistoryFn: (page: { pageNum: number; pageSize: number }) => {
    return getExcelHistory({
      ...page,
      importType: 'AC_DEVICE'
    });
  },
  /** 文件下载 */
  getSignedDownloadUrl: async () => {
    return apiGetSignStstoken();
  }
};

const authAddRoutes = generateImportRoutes(importConfig);
export default authAddRoutes;