/* eslint-disable react/jsx-key */ import { doFetch } from '@/utils/doFetch'; import { useRequest } from 'ahooks'; import { Divider } from 'antd'; import React, { useState, useEffect } from 'react'; import { ProDescriptions } from '@ant-design/pro-components'; import DetailNode from './detailnode'; import AutoTable from '../AutoTable/mtable'; const Detail = (props) => { console.log(props); const { path, params, titleColumns, detailKey, columns } = props; let [firstcolumns, ...mescolumns] = titleColumns; // columns?.forEach((it) => { // if (it?.valueType == 'table') { // tableColumns.push(it); // } else { // detailColumns.push(it); // } // }); const detailData = useRequest(async () => { let res = await doFetch({ url: path, params }); return res?.data?.dataList; }); console.log(columns); return ( <> <h2 style={{ fontWeight: 700, marginBottom: 16 }}> {firstcolumns?.title}:{detailData?.data?.[0]?.[firstcolumns?.dataIndex] || '--'} </h2> <ProDescriptions columns={mescolumns} dataSource={detailData?.data?.[0]} /> <Divider /> <div> {detailData?.data?.map((it, index) => { console.log(it); const detailColumns = [], tableColumns = []; columns[it?.operationType]?.forEach((it) => { if (it?.valueType == 'table') { tableColumns.push(it); } else { detailColumns.push(it); } }); return ( <DetailNode key={it?.id} data={it} index={index} operationType={it?.operationType} columns={detailColumns} hasTable={true} > {tableColumns?.map((t) => { return ( <div style={{ marginTop: 8, marginBottom: 8 }}> <b>{t?.title}</b> <AutoTable dataSource={it[t?.key]} columns={t?.columns} style={{ marginTop: 8 }} /> </div> ); })} </DetailNode> ); })} </div> </> ); }; export default Detail;