index.tsx 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
  1. import React, { useEffect, useState } from 'react';
  2. // @ts-ignore
  3. import { Button, Input, Table } from 'antd';
  4. import type { ColumnsType } from 'antd/lib/table';
  5. import DDSelectField from '@/components/DDComponents/DDSelectField';
  6. import './index.css';
  7. import DDDateField from '@/components/DDComponents/DDDateField';
  8. import NumberField from '@/components/DDComponents/NumberField';
  9. import TextNote from '@/components/DDComponents/TextNote';
  10. import { PlusOutlined } from '@ant-design/icons';
  11. interface IProps {
  12. table?: any; // 整个表格
  13. columns?: Array<any>; // 当前列配置
  14. onChange?: (e?: any, id?: string, label?: string) => void; // 表格修改后的值
  15. displayOnly?: boolean; // 是否仅用于展示
  16. }
  17. type TableDataType = {
  18. index: number;
  19. id?: string;
  20. col1?: any;
  21. col2?: any;
  22. col3?: any;
  23. col4?: any;
  24. col5?: any;
  25. };
  26. function DIYTable(props: IProps) {
  27. const { table, columns, displayOnly, onChange } = props;
  28. // table数据
  29. const [tableData, setTableData] = useState<TableDataType[]>([{ index: 1 }]);
  30. // 列配置
  31. const tableColumnDef: ColumnsType<any> = [
  32. {
  33. title: '序号',
  34. dataIndex: 'index',
  35. className: 'hidden',
  36. },
  37. ];
  38. const [commitValue, setCommitValue] = useState<any[]>([]);
  39. const handleValueChange = (value: any, id: string, label: string) => {
  40. let ids = id.split(';');
  41. let [rowIndex, colIndex] = ids[0].split(',').map((item) => Number(item));
  42. let [columnID, tableID] = ids[1].split('>');
  43. let [columnLabel, tableLabel] = label.split('>');
  44. const cell = {
  45. name: columnLabel,
  46. id: columnID,
  47. type: columnID.split('_')[0],
  48. value: [value],
  49. };
  50. // 组装可能用到的数据
  51. const cols = [];
  52. cols[colIndex] = cell;
  53. const rows = [];
  54. rows[rowIndex] = cols;
  55. const newValues = JSON.parse(JSON.stringify(commitValue)) || [];
  56. if (newValues.length !== 0 && newValues[rowIndex] !== undefined) {
  57. newValues.forEach((row: any, rindex: number) => {
  58. if (rindex === rowIndex) {
  59. if (row[colIndex] !== undefined) {
  60. row.forEach((_col: any, cindex: number) => {
  61. if (cindex === colIndex) {
  62. row[colIndex] = cell;
  63. }
  64. });
  65. } else {
  66. row[colIndex] = cell;
  67. }
  68. }
  69. });
  70. } else {
  71. newValues[rowIndex] = cols;
  72. }
  73. const textNode = columns?.find((item) => item.componentName === 'TextNote');
  74. if (textNode) {
  75. const textNodeIndex = columns?.findIndex(
  76. (item) => item.componentName === 'TextNote',
  77. );
  78. const textCell = {
  79. name: textNode.props.label,
  80. id: textNode.props.id,
  81. type: textNode.componentName,
  82. value: [textNode.props.placeholder],
  83. };
  84. newValues.forEach((item) => {
  85. if (textNodeIndex !== -1) {
  86. item[textNodeIndex] = textCell;
  87. }
  88. });
  89. }
  90. setCommitValue(newValues);
  91. onChange(newValues);
  92. };
  93. // 表单填写时的表格生成
  94. const handleGenerateTable = () => {
  95. if (columns !== undefined && columns.length) {
  96. for (let index = 0; index < columns.length; index++) {
  97. let column = columns[index];
  98. let columnID = column.props.id;
  99. let columnLabel = column.props.label;
  100. let colDef: any = {
  101. dataIndex: 'col' + (index + 1),
  102. title: columnLabel || column.name,
  103. className: 'p-8',
  104. };
  105. switch (column.componentName) {
  106. case 'DDSelectField':
  107. colDef.render = (_: any, __: any, rowIndex: number) => {
  108. let id =
  109. rowIndex + ',' + index + ';' + columnID + '>' + table.props.id;
  110. return (
  111. <DDSelectField
  112. id={id}
  113. label={columnLabel + '>' + table.props.label}
  114. style={{ padding: '0', margin: '0' }}
  115. options={column.props.options}
  116. disabled={column.props.disabled}
  117. onChange={(value: any) => {
  118. handleValueChange(
  119. value,
  120. id,
  121. columnLabel + '>' + table.props.label,
  122. );
  123. }}
  124. />
  125. );
  126. };
  127. break;
  128. case 'DDDateField':
  129. colDef.render = (_: any, __: any, rowIndex: number) => {
  130. let id =
  131. rowIndex + ',' + index + ';' + columnID + '>' + table.props.id;
  132. return (
  133. <DDDateField
  134. id={id}
  135. label={columnLabel + '>' + table.props.label}
  136. key={index + rowIndex + ''}
  137. style={{ padding: '0', margin: '0' }}
  138. placeholder={column.props.placeholder}
  139. format={column.props.format}
  140. disabled={column.props.disabled}
  141. onChange={(value: any) => {
  142. handleValueChange(
  143. value,
  144. id,
  145. columnLabel + '>' + table.props.label,
  146. );
  147. }}
  148. />
  149. );
  150. };
  151. break;
  152. case 'NumberField':
  153. colDef.render = (_: any, __: any, rowIndex: number) => {
  154. let id =
  155. rowIndex + ',' + index + ';' + columnID + '>' + table.props.id;
  156. return (
  157. <NumberField
  158. id={id}
  159. label={columnLabel + '>' + table.props.label}
  160. size="small"
  161. width="50%"
  162. style={{ padding: '4px 11px' }}
  163. disabled={column.props.disabled}
  164. unit={column.props.unit}
  165. onChange={(value: any) => {
  166. handleValueChange(
  167. value,
  168. id,
  169. columnLabel + '>' + table.props.label,
  170. );
  171. }}
  172. />
  173. );
  174. };
  175. break;
  176. case 'TextField':
  177. colDef.render = (_: any, __: any, rowIndex: number) => {
  178. let id =
  179. rowIndex + ',' + index + ';' + columnID + '>' + table.props.id;
  180. return (
  181. <Input
  182. disabled={column.props.disabled}
  183. placeholder={column.props.placeholder}
  184. onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
  185. handleValueChange(
  186. e.target.value,
  187. id,
  188. columnLabel + '>' + table.props.label,
  189. );
  190. }}
  191. />
  192. );
  193. };
  194. break;
  195. case 'TextNote':
  196. colDef.title = '说明';
  197. colDef.render = (_: any, __: any, rowIndex: number) => {
  198. let id =
  199. rowIndex + ',' + index + ';' + columnID + '>' + table.props.id;
  200. return (
  201. <TextNote
  202. id={id}
  203. style={{ padding: '0', margin: '0' }}
  204. value={column.props.placeholder}
  205. />
  206. );
  207. };
  208. break;
  209. }
  210. tableColumnDef.push(colDef);
  211. }
  212. }
  213. };
  214. // 当仅用作展示时
  215. const handleDisplayOnly = () => {
  216. const rows = columns;
  217. if (rows && rows.length) {
  218. for (let index = 0; index < rows.length; index++) {
  219. // 把每一行的数据提出来到一个对象里
  220. if (rows) {
  221. const row = rows[index];
  222. if (index === 0) {
  223. // 列配置
  224. row.forEach((col: any) => {
  225. if (col) {
  226. tableColumnDef.push({
  227. title: col?.name || '',
  228. dataIndex: col?.type || '',
  229. className: '',
  230. });
  231. }
  232. });
  233. }
  234. }
  235. }
  236. }
  237. };
  238. const handleRowChange = () => {
  239. setTableData([...tableData, { index: tableData.length }]);
  240. };
  241. if (displayOnly) {
  242. handleDisplayOnly();
  243. } else {
  244. handleGenerateTable();
  245. }
  246. useEffect(() => {
  247. if (columns?.length === 0) {
  248. return;
  249. }
  250. const rows = columns;
  251. const newTableData = [];
  252. if (rows && rows.length) {
  253. if (displayOnly) {
  254. for (let index = 0; index < rows.length; index++) {
  255. // 把每一行的数据提出来到一个对象里
  256. const row = rows[index];
  257. const rowData: any = {};
  258. if (displayOnly) {
  259. row.forEach((col: any) => {
  260. if (col) {
  261. rowData.index = index + 1;
  262. // eslint-disable-next-line prefer-destructuring
  263. rowData[col.type] = col.value[0];
  264. rowData.key = col.id + index;
  265. }
  266. });
  267. newTableData.push(rowData);
  268. }
  269. }
  270. } else {
  271. newTableData.push({
  272. index: 1,
  273. });
  274. }
  275. setTableData(newTableData);
  276. }
  277. }, [columns]);
  278. return (
  279. <>
  280. {/* {table.name ? table.name : table.props.label} */}
  281. <Table
  282. style={displayOnly ? { margin: '10px 24px 10px 0' } : {}}
  283. columns={tableColumnDef}
  284. dataSource={tableData}
  285. pagination={false}
  286. />
  287. <Button
  288. type="dashed"
  289. icon={<PlusOutlined />}
  290. block
  291. onClick={handleRowChange}
  292. style={displayOnly ? { display: 'none' } : {}}
  293. >
  294. 新增行
  295. </Button>
  296. </>
  297. );
  298. }
  299. export default DIYTable;