无情搬砖机器手搓管理后台功能组件库

体验地址roant

祖传增删改页面一个组件

import React from 'react';
import { RsearchTable } from 'roant';
import { SearchTableActionMethods, SearchTableProps } from 'roant/RsearchTable';

const getData = (param: any) => {
  console.log(param);
  return new Promise<{ rows: any; total: number }>((resolve) => {
    setTimeout(() => {
      const list = new Array(10).fill(1).map((_, index) => ({
        id: index,
        name: `name${index}`,
        age: `age${index}`,
      }));
      resolve({ rows: list, total: 30 });
    }, 2000);
  });
};

const fields = [
  {
    keyPath: 'name',
    name: '姓名',
  },
  {
    keyPath: 'age',
    type: 'select',
    name: '年龄',
    props: {
      options: [
        { label: '两年半', value: 2.5 },
        { label: '两年', value: 2 },
        { label: '五年', value: 5 },
      ],
    },
    initialValue: 2.5,
  },
];

export default () => {
  const actionRef = React.useRef<SearchTableActionMethods>(null);
  const [pageData, setPageData] = React.useState<{ dataSource: any; total: number }>({
    dataSource: [],
    total: 0,
  });

  const searchProps: SearchTableProps = {
    tableProps: {
      fields: [
        { title: '名称', dataIndex: 'name' },
        { title: '年龄', dataIndex: 'age' },
      ],
      activeFields: [
        {
          title: '操作',
          dataIndex: 'dropdownAction',
          type: 'dropdownAction',
          fixed: 'right',
          props({ record }: { record: any }) {
            return {
              options: [
                {
                  name: '编辑',
                  onClick() {
                    console.log('on edit', record);
                  },
                },
              ],
            };
          },
        },
      ],
      rowKey: 'id',
    },
    ref: actionRef,
    formProps: {
      layout: 'vertical',
      rowProps: { gutter: [24, 0] },
      colProps: { span: 4 },
      fields: fields,
    },
    ...pageData,
    async fetchData(params) {
      const { rows, total } = await getData(params);
      console.log(rows, total);
      setPageData({ dataSource: rows, total });
    },
    toolbar: <button type="button">创建</button>,
  };

  return <RsearchTable {...searchProps} />;
};

基于 antd-design 封装复合组件库

特点

• 使用配置生成表格表单
• 无 ui 副作用、所有参数透传 antd 组件
• 使用的工具组件支持依赖注入

antd 写表单

<Form
  name="basic"
  labelCol={{ span: 8 }}
  wrapperCol={{ span: 16 }}
  style={{ maxWidth: 600 }}
  initialValues={{ remember: true }}
  onFinish={onFinish}
  onFinishFailed={onFinishFailed}
  autoComplete="off"
>
  <Form.Item<FieldType>
    label="姓名"
    name="username"
    rules={[{ required: true, message: 'Please input your username!' }]}
  >
    <Input />
  </Form.Item>

  <Form.Item<FieldType>
    label="密码"
    name="password"
    rules={[{ required: true, message: 'Please input your password!' }]}
  >
    <Input.Password />
  </Form.Item>

  <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
    <Button type="primary" htmlType="submit">
      Submit
    </Button>
  </Form.Item>
</Form>

roant 写表单

const formProps: FormProps = {
  form,
  layout: 'vertical',
  rowProps: { gutter: [30, 0] },
  colProps: { span: 12 },
  fields: [
    {
      keyPath: 'username',
      name: '姓名',
      required: true,
    },
    {
      keyPath: 'password',
      name: '密码',
      required: true,
      type: 'password',
    },
  ],
};
<RForm {...formProps} />;

快速接入

环境准备

因同步依赖了 react antd 所以项目需要先保证 peerDependencies 依赖安装

# peerDependencies
{
    "@ant-design/icons": ">=4.0.0",
    "antd": ">=4.20",
    "react": ">=16.9.0",
    "react-dom": ">=16.9.0"
}

安装依赖

安装npm包

$ npm i roant -S

组件库配置

组件库使用 react.context 共享配置项在 react 根组件配置，保证全局组件可访问

import { RconfigContext } from 'roant';

<RconfigContext.Provider value={roantConfig}>
  <App />
</RconfigContext.Provider>;

组件库配置 roantConfig

{
  table: {
    // table组件配置
    fieldTypes: {
      dropdownAction: DropdownAction,
    },
  },
  description: {
    fieldTypes: {},
  },
  form: {
    // 表单form组件配置
    fieldTypes: {
      input: Input,
      select: Select,
    },
    // 表单form组件默认属性
    fieldDefaultProps: {
      input: { allowClear: true },
      select: { allowClear: true },
    },
  },
  // 语言配置
  locale: zhCn,
}

国际化 locale

目前默认使用中文，其他语言需自行配置

{
  table: {
    showTotal: '共{total}条',
  },
  form: {
    // 表单默认渲染placeholder
    placeholder: {
      input: '请输入{name}',
      select: '请选择{name}',
      default: '请选择{name}',
    },
    // 表单默认渲染required
    required: {
      input: '请输入{name}',
      select: '请选择{name}',
      default: '请选择{name}',
    },
  },
  searchTable: {
    search: '搜索',
    reset: '重置',
  },
}