3.2 KiB

Raw Permalink Blame History

name	description
jjb-table-basic	定义 JJB 项目表格基础规范。在使用 antd/Table 或配置表格 loading 时使用。

表格（Table）规范

表格基础

使用 antd/Table
通过接口获取数据的 Table 必须有 loading 效果

AntdTableFuncControl（必选）

所有列表页必须使用 AntdTableFuncControl HOC 包裹组件，以自动计算表格滚动高度 scrollY：

import { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/antd";

// Table 中使用
<Table scroll={{ y: props.scrollY }} ... />

// 导出时包裹
export default AntdTableFuncControl(MyComponent);

若同时使用 Connect，HOC 顺序：Connect(...)(AntdTableFuncControl(Component))

列表页数据流（router.query 模式）

禁止使用 zy-react-library 的 useTable hook。必须手动管理数据状态：

import { tools } from "@cqsjjb/jjb-common-lib";

const { router } = tools;

function ListPage(props) {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [dataSource, setDataSource] = useState([]);
  const [total, setTotal] = useState(0);

  const getData = async () => {
    setLoading(true);
    try {
      const params = {
        ...router.query,
        current: router.query.current || 1,
        size: router.query.size || 10,
      };
      const res = await props.xxxList(params);
      if (res?.success !== false) {
        setDataSource(res?.data?.records || res?.data || []);
        setTotal(res?.data?.total || 0);
      }
    } catch (err) {
      console.warn(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    form.setFieldsValue(router.query);
    getData();
  }, []);

  return (
    <PageLayout title="标题">
      <SearchForm
        form={form}
        loading={loading}
        onReset={(values) => {
          router.query = { ...router.query, ...values, current: 1, pageSize: 10 };
          getData();
        }}
        onFinish={(values) => {
          router.query = { ...router.query, ...values, current: 1, pageSize: 10 };
          getData();
        }}
        ...
      />

      <Table
        rowKey="id"
        columns={...}
        dataSource={dataSource}
        loading={loading}
        scroll={{ y: props.scrollY }}
        pagination={{
          total,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (t) => `共 ${t} 条`,
          current: router.query.current || 1,
          pageSize: router.query.size || 10,
          onChange: (page, pageSize) => {
            router.query = { ...router.query, current: page, size: pageSize };
            getData();
          },
        }}
      />
    </PageLayout>
  );
}

export default AntdTableFuncControl(ListPage);

上传组件

使用 antd 原生 Upload，禁止使用 zy-react-library 的 Upload 组件。

禁止使用的 zy-react-library 组件

以下 zy-react-library 组件在列表页中 禁止使用，必须替换为项目规范组件：

禁止	替换为
`Search`	`SearchForm` + `ControlWrapper`
`Table` + `useTable`	antd `Table` + `AntdTableFuncControl` + 手动管理数据
`Upload`	antd `Upload`

3.2 KiB Raw Permalink Blame History Unescape Escape