base-element 的 react 版本

基于 Ant Design 的管理后台配置化开发框架

文举 2023

快速开始

1. 安装依赖

npm install base-element-react --save

2. 初始化

在main.tsx中设置全局配置

import BaseElement from 'base-element-react';

BaseElement.use({
  request: {
    http: xx, // 通用接口请求 (用在接口枚举)
    upload: xx, // 单文件上传接口 (用在上传组件和富文本)
  },
  file: {
    host: xx, // 文件访问域名，图片/视频/上传文件会自动拼接
  },
  table: {
    rowKey: 'id', // table的唯一标识 (默认"id")
  },
  list: {
    pageKey: 'pageNum', // 分页页码的key (默认"pageNum")
    sizeKey: 'pageSize', // 分页页长的key (默认"pageSize")
    listKey: 'list', // 列表数据的key (默认"list")
    totalKey: 'total', // 列表总数的key (默认"total")
  },
  map: {
    gaodeKey: '', // 高德地图jsapi的key (没有使用地图组件, 则不用配置)
    gaodeSecret: '', // 高德地图jsapi的秘钥 (没有使用地图组件, 则不用配置)
  },
});

3. 使用

import { apiSearch } from './api';
import dialogEdit from './dialog/edit';
import { getDateRangeBefore } from '@base-web-kits/base-tools-ts';
import { BasePage, BaseText, BASE_USE } from 'base-element-react';
import type { BasePageConfig } from 'base-element-react';

export default () => {
  /** 列表页的配置 */
  const config: BasePageConfig = {
    // 搜索栏
    form: [
      { label: '手机号', prop: 'phone', type: 'tel' },
      { label: '运行状态', prop: 'run_type', comp: 'select', lib: BASE_USE },
      {
        label: '搜索日期',
        prop: ['start_dt', 'end_dt'],
        comp: 'picker-date',
        value: getDateRangeBefore(90),
      },
    ],
    // 按钮栏
    btns: [{ label: '新增', dialog: dialogEdit }],
    // 分页表格
    table: [
      { label: '手机号', prop: 'phone_number' },
      { label: '发送时间', prop: 'send_time' },
      { label: '短信内容', prop: 'body_msg', ellipsis: true },
      {
        label: '状态码',
        width: 100,
        render(row) {
          return (
            <BaseText value={row.err_code} color={row.success == 1 ? 'green' : 'yellow'}></BaseText>
          );
        },
      },
      {
        label: '操作',
        btns: [
          {
            vif: (row) => row.run_type != 20,
            label: '编辑',
            dialog: dialogEdit,
          },
          {
            label: '详情',
            dialog: dialogDetail,
          },
        ],
      },
    ],
    // 搜索接口
    apiSearch,
  };

  return <BasePage config={config} />;
};

弹窗配置

import { apiResetProtected } from '../api';
import type { BaseDialog, BaseDialogConfig } from 'base-element-react';
import { BASE_USE } from 'base-element-react';

const dialog: BaseDialog = (): BaseDialogConfig => {
  return {
    // 表单配置
    form: [
      { label: '手机号', prop: 'phone', type: 'tel', required: true },
      { label: '运行状态', prop: 'run_type', comp: 'select', lib: BASE_USE },
    ],
    // 点击确定按钮的接口
    apiSubmit: apiResetProtected,
  };
};

export default dialog;

注意

如果遇到 git 提交时,lint 检查报 braft-utils 模块未定义,可以在 src 目录创建module.d.ts

// 解决ts模块引入时,提示模块未定义的异常: 只需新增"xx.d.ts",然后declare module '第三方类库名'
declare module 'braft-utils';
declare module 'braft-extensions/dist/color-picker';
declare module 'braft-extensions/dist/table';