ant-learning

函数库

这里描述了一些在写 Demo 过程中，写到的一些常用函数

1. 日期函数

位置：src\utils\dateUtils.ts

更多日期函数，可以参考import dayjs from 'dayjs';

1.1 得到当前时间

/**
 * 得到当前的开始时间
 * return: 例如 2021-04-27
 */
export function startOfToday() {
  return dayjs().startOf('date').format('YYYY-MM-DD');
}

1.2 得到时间区间

得到从当前时间，到后面某几天的时间区间。

例如预计快要到期时间，那么就查询从今天到未来15天内到期的记录。

/**
 * 给定一个时间区间，返回之前多少天
 * @param addDay  例如：15,今天之后的15天
 * @returns 一个用逗号分割的字符串，例如：2021-04-12,2021-04-27
 */
export function getDistanceFromToday(addDay: number) {
  const startDay = dayjs().add(addDay, 'day').format('YYYY-MM-DD');
  return `${startOfToday()},${startDay}`;
}

还有几个常用情景会用到：

  • 当天时间区间
  • 本周时间区间
  • 本月时间区间
  • 本年时间区间
  • 本季度时间区间

1.3 得到时区列表

export const getTimeZoneOption = ()

1.4 得到时间区间

// 按照类型得到不同时间的区间
export function getTimeDistance(
  type: 'today' | 'week' | 'month' | 'year',
): RangePickerValue;

现在使用的是import moment from 'moment'; 组件，今后要用一个体积更小的组件替换。

2. Token 保存

保存位置：src\services\tokenInfo.ts

将当前登录用户的信息，保存到浏览器的缓存中，默认是sessionStorage，如果是记住我，就保存到storage中。

export type TokenInfo = {
  refresh_token?: string;
  user_name: string;
  active: boolean;
  exp: number;
  token: string;
};

具体函数如下：

  • saveInfo: 保存tokenInfo
  • getInfo: 得到tokenInfo
  • getToken: 得到 Token 字符串

3. 常用数据结构

保存位置：src\services\Common.ts

3.1 性别

用户性别选择下拉框

export const SexOptions = [
  {
    label: '保密',
    value: 0,
  },
  {
    label: '男',
    value: 1,
  },
  {
    label: '女',
    value: 2,
  },
];

3.2 URL 前缀

所有后台API的 URL 前缀

export const PrefixUrl = '/api/admin';

3.3 默认图片

export const ArartaUrl =
  'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png';


// 加载失败显示图像占位符
export const ImgFallback = 'dddd';

4. 抽屉页面相关

保存位置：src\services\Common.ts

在整个系统中，会用到很多抽屉页面，抽屉页面中有些公用的属性或函数，可以使用。

4.1 默认属性

export const drawerProps = {
  forceRender: true,
  destroyOnClose: true,
  maskClosable: false,
};

4.2 关闭页面函数

/**
 * 为了调用List页面的方法，让这个页面关闭。
 * 由于每个页面都需要这个函数，所以做成了公用函数
 * @param visibled 点击关闭按钮，确认按钮，等按钮后传递过来的数值
 */
export const onVisibleChangeHandle = (
  visibled: boolean,
  setVisible: (visible: boolean) => void,
) => {
  if (!visibled) {
    setVisible(false);
  }
};

5. 图片上传

保存位置：src\services\Common.ts

5.1 得到上传属性

getSingleUploadImgProps

在 AntDesign 的上传组件中需要这么来调用，输入uploadProps

<Upload {...uploadProps}>
  <Button icon={<UploadOutlined />}>更改头像</Button>
</Upload>

这个uploadProps要设置的内容较多，所以通过一个公用的函数来实现。

这里调用了import type { UploadEndPros } from '@/services/Common'; 中的getSingleUploadImgProps 方法。

// 上传文件
const [uploading, setUploading] = React.useState(false);
const uploadProps = getSingleUploadImgProps({
  actionUrl: '/system/admin/uploadAdminAvatar',
  setUploading,
  onUploadEnd: (para: UploadEndPros<string>) => {
    if (para.success) {
      setAdmin({
        ...admin,
        avatar: para.response,
      });
      form.setFieldsValue({ avatar: para.response });
    }
  },
});

关于 common 中有三个参数

/**
 * name : request中组件的名称，默认是fiel
 * actionUrl: 要调用的上传组件的Url，不需要填写前缀
 * setUploading：设置loading的函数
 * onUploadEnd：上传结束后，回调的函数
 */

5.2 去掉路径得到文件名

getUrlFileName

5.3 上传一个临时文件

getBeforeUpload

5.4 返回文件大小字符串

在页面上现实文件大小

/**
 * 返回文件大小K M G T
 * @param fileByte 文件的大小
 * @returns
 */
export function getFileSize(fileByte: number);

6. 数组转换

6.1 转成 Options

convertToOptions：将一个对象数组，转换成 AntDesign 可以识别的 Options

6.2 转成ValueEnum

convertToValueEnum:将一个对象数组转换成 AntDesign 可以识别的ValueEnum

6.3 得到密码字符串

makeString：得到一个 32 位的随机字符串，用在设置密码时的初始密码。

6.4 是否新增

根据 Id 判断是否是新增。

/**
 * 在登录页面中，通过ID判断是新增，还是编辑。
 * @param id
 */
export function isAdd(id: string | number | undefined): boolean;

6.5 得到正则表达式

返回常用的正则表达式规则，例如中文名、电话号码、手机号等等

/**
 * 返回常用的增则表达式
 * 参考了这个网址：https://blog.csdn.net/itbrand/article/details/109239620
 * @param regType
 */
export function getRegExp(regType: GetRegExpType): RegExp {

常见的类型有：

export declare type GetRegExpType =
  | 'cname'
  | 'mobilePhone'
  | 'telePhone'
  | 'email'
  | 'idCard'
  | 'qq'
  | 'name'
  | 'zip'
  | 'number';

6.6 得到一个新 ID

/**
 * 在编辑表格中得到一个新的ID
 */
export const getNewId = (): number

6.7 剔除某些数据

/**
 * 由于编辑框中，antDesign会自动添加一些数据，例如index。
 * 另外还有一些从数据库得到的一些临时数据，所以要剔除一部分数据
 * @param originalData 原始的数据
 * @param filterKeys 要去掉的内容
 */
export const omitEditTableData = (
  originalData: Record<string, any>[],
  filterKeys: string[],
): Record<string, any>

7. 通用查询

7.1 排序转换

将 Ant 的排序数组，转换成Sql语句。

export function getOrderStr(
  sort: Record<string, SortOrder> | undefined,
): string;

7.2 转换 Where

将 Ant Table 传入的 Where 数据，转换成后台可以识别的 Map 数组。

function getWheres(
  params: Record<string, any>,
  newName: Record<string, string>,
);

8. 字符串

8.1 除去空行用逗号分隔

// JS 正则去除 textarea 产生的空行，并用,进行分割
export function replaceTextArea(text: string);
Edit this doc on gitee12/11/2022 05:56:54