• TZW's avatar
    19 · a6cf0c38
    TZW authored
    a6cf0c38
index.jsx 2.19 KB
/* 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) => {
  const { path, params, titleColumns, detailKey, columns } = props;
  console.log(params);
  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;
  });

  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) => {
          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;