index.jsx

/* eslint-disable react-hooks/exhaustive-deps */
import { ProDescriptions } from '@ant-design/pro-components';
import React, { useMemo, useState } from 'react';
import { doFetch } from '@/utils/doFetch';
import PropTypes from 'prop-types';
import styles from './index.less';
import { Col } from 'antd';
import { utc } from 'moment';

const { Item } = ProDescriptions;

function DetailPro(props) {
  let { fields } = props;
  if (Object.keys(fields[0]).includes('render')) {
    delete fields[0].render;
  }

  const [curitem, setcuritem] = useState(props.detailData ?? {}); //全部数据

  const dataProps = useMemo(() => {
    if (props.detailData) {
      setcuritem(props.detailData);
      return { dataSource: props.detailData };
    } else {
      return {
        request: async () => {
          let res = await doFetch({ url: props.detailpath, params: props.params });
          if (props?.extendField) {
            let obj = {};
            res?.data?.data[props.extendField]?.forEach?.((it) => {
              obj[it?.fieldId] = it?.fieldRealValue;
            });
            //console.log('extendField:', obj);
            setcuritem({
              ...(res?.data?.data ?? {}),
              ...obj,
            });
            // console.log('drawerpro:', {
            //   ...(res?.data?.data ?? {}),
            //   ...obj,
            // });

            return {
              success: res?.code == '0000',
              data:
                {
                  ...(res?.data?.data ?? {}),
                  ...obj,
                } ?? {},
            };
          }
          setcuritem({
            ...(res?.data?.data ?? {}),
          });
          return {
            success: res?.code == '0000',
            data: { ...(res?.data?.data ?? {}) },
          };
        },
      };
    }
  }, [props.detailData]);

  return (
    <ProDescriptions column={3} {...dataProps} title={props.title}>
      {fields
        ?.filter((it) => !it.hideInDescriptions && it?.valueType != 'option')
        ?.map((it, i) => {
          const dataIndexs =
            !it?.render || it?.valueType == 'option'
              ? { dataIndex: it.dataIndex, valueType: it.valueType }
              : {};
          if (it.valueType == 'split') {
            return (
              <Col span={24} key={i}>
                <div className={styles.title} style={{ borderWidth: i == 0 ? 0 : 1, '--before': !(it.title || it?.render) ? 'none' : 'block', '--after': !(it.title || it?.render) ? '100%' : 'calc(100% - 160px)', '--padb': !(it.title || it?.render) ? '20px' : '0' }}>
                  {it?.render ? it?.render?.(curitem[it.dataIndex], curitem) : it.title}
                </div>
              </Col>
            );
          }
          return (
            <Item
              span={it?.span ? it?.span : fields[i + 1]?.valueType == 'split' ? 3 : 1}
              key={it.dataIndex}
              label={it.title}
              {...dataIndexs}
            >
              {it?.render ? it?.render?.(curitem[it.dataIndex], curitem) : ''}
            </Item>
          );
        })}
    </ProDescriptions>
  );
}

DetailPro.propTypes = {
  detailpath: PropTypes.string,
  params: PropTypes.object,
  detailData: PropTypes.object,
  fields: PropTypes.array,
};

export default DetailPro;