9662801471

Committed 25 Jun 2024 12:50PM UTC coverage: 50.0% (+0.7%) from 49.333%

Build # 9662801471

Build Type

push

github

Committed by

twinh

Commit Message

feat(a-table): 加载数据后才显示表格

Run Details

11 of 25 branches covered (44.0%)

Branch coverage included in aggregate %.

3 of 3 new or added lines in 1 file covered. (100.0%)

12 existing lines in 2 files now uncovered.

31 of 59 relevant lines covered (52.54%)

4.75 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

65.0

/Table.js

import { useEffect, useRef, useState } from 'react';
import { ProTable } from '@ant-design/pro-components';
import appendUrl from 'append-url';
import $ from 'miaoxing';
import curUrl from '@mxjs/cur-url';
import { Typography } from 'antd';
import { useTable } from './TableProvider';
import PropTypes from 'prop-types';

const { Text } = Typography;

const getSortPrams = (querySorter) => {
  // 取消排序后，field 是点击的字段，order 是 undefined
  // 因此判断 order 无值则无需排序
  if (!querySorter.order) {
    return {};
  }

  let { field: sort, order } = querySorter;
  order = order === 'ascend' ? 'asc' : 'desc';

  return { sort, order };
};

const columnEmptyText = <Text type="secondary">-</Text>;

const Table = (
  { url, tableApi, tableRef, columns = [], postData, ...restProps }
) => {
  const table = useTable();

  let querySorter = {};

  const ref = useRef();
  url || (url = curUrl.apiData());

  columns.map((column) => {
    if (typeof column.dataIndex === 'undefined') {
      column.dataIndex = column.title;
    }
  });

  useEffect(() => {
    if (table) {
      table.reload = ref.current.reload;
    }

    if (tableRef) {
      tableRef.current = table;
    }

    if (tableApi) {
      tableApi.hook(table);
    }
  }, []);

  const [ready, setReady] = useState(false);
  const handleRequest = async ({ current: page, pageSize: limit, ...params }, sort) => {
    table.sort = sort;

    const fullUrl = appendUrl(url, { page, limit, ...getSortPrams(querySorter), ...params, ...table.search });
    const { ret } = await $.get(fullUrl);
    if (ret.isErr()) {
      $.ret(ret);
      return;
    }

    return {
      data: ret.data,
      success: ret.isSuc(),
      total: ret.total,
    };
  };

  return (
    <ProTable
      postData={(data) => {
        setReady(true);
        return postData ? postData(data) : data;
      }}
      style={{display: ready ? '' : 'none'}}
      columns={columns}
      columnEmptyText={columnEmptyText}
      actionRef={ref}
      request={handleRequest}
      onRequestError={e => {
        throw e;
      }}
      options={false}
      search={false}
      rowKey="id"
      toolBarRender={false}
      onChange={(pagination, filters, sorter) => {
        querySorter = sorter;
        ref.current.reload();
      }}
      {...restProps}
    />
  );
};

Table.propTypes = {
  url: PropTypes.string,
  tableApi: PropTypes.object,
  tableRef: PropTypes.object,
  columns: PropTypes.array,
  postData: PropTypes.func,
};

export default Table;

1	import { useEffect, useRef, useState } from 'react';
2	import { ProTable } from '@ant-design/pro-components';
3	import appendUrl from 'append-url';
4	import $ from 'miaoxing';
5	import curUrl from '@mxjs/cur-url';
6	import { Typography } from 'antd';
7	import { useTable } from './TableProvider';
8	import PropTypes from 'prop-types';
9
10	const { Text } = Typography;	4✔
11
12	const getSortPrams = (querySorter) => {	4✔
13	// 取消排序后，field 是点击的字段，order 是 undefined
14	// 因此判断 order 无值则无需排序
15	if (!querySorter.order) {	4!
16	return {};	4✔
17	}
18
19	let { field: sort, order } = querySorter;	×
UNCOV 20	order = order === 'ascend' ? 'asc' : 'desc';	×
21
UNCOV 22	return { sort, order };	×
23	};
24
25	const columnEmptyText = <Text type="secondary">-</Text>;	4✔
26
27	const Table = (	4✔
28	{ url, tableApi, tableRef, columns = [], postData, ...restProps }	×
29	) => {
30	const table = useTable();	16✔
31
32	let querySorter = {};	16✔
33
34	const ref = useRef();	16✔
35	url \|\| (url = curUrl.apiData());	16✔
36
37	columns.map((column) => {	16✔
38	if (typeof column.dataIndex === 'undefined') {	16!
UNCOV 39	column.dataIndex = column.title;	×
40	}
41	});
42
43	useEffect(() => {	16✔
44	if (table) {	8!
45	table.reload = ref.current.reload;	8✔
46	}
47
48	if (tableRef) {	8!
UNCOV 49	tableRef.current = table;	×
50	}
51
52	if (tableApi) {	8!
UNCOV 53	tableApi.hook(table);	×
54	}
55	}, []);
56
57	const [ready, setReady] = useState(false);	16✔
58	const handleRequest = async ({ current: page, pageSize: limit, ...params }, sort) => {	16✔
59	table.sort = sort;	4✔
60
61	const fullUrl = appendUrl(url, { page, limit, ...getSortPrams(querySorter), ...params, ...table.search });	4✔
62	const { ret } = await $.get(fullUrl);	4✔
63	if (ret.isErr()) {	4!
UNCOV 64	$.ret(ret);	×
UNCOV 65	return;	×
66	}
67
68	return {	4✔
69	data: ret.data,
70	success: ret.isSuc(),
71	total: ret.total,
72	};
73	};
74
75	return (	16✔
76	<ProTable
77	postData={(data) => {
78	setReady(true);	8✔
79	return postData ? postData(data) : data;	8!
80	}}
81	style={{display: ready ? '' : 'none'}}	16✔
82	columns={columns}
83	columnEmptyText={columnEmptyText}
84	actionRef={ref}
85	request={handleRequest}
86	onRequestError={e => {
87	throw e;	×
88	}}
89	options={false}
90	search={false}
91	rowKey="id"
92	toolBarRender={false}
93	onChange={(pagination, filters, sorter) => {
UNCOV 94	querySorter = sorter;	×
UNCOV 95	ref.current.reload();	×
96	}}
97	{...restProps}
98	/>
99	);
100	};
101
102	Table.propTypes = {	4✔
103	url: PropTypes.string,
104	tableApi: PropTypes.object,
105	tableRef: PropTypes.object,
106	columns: PropTypes.array,
107	postData: PropTypes.func,
108	};
109
110	export default Table;

miaoxing / mxjs-a-table / 9662801471

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous