index.jsx

import React, { useState, useEffect } from "react";
import {
  Table,
  Divider,
  Card,
  Descriptions,
  Typography,
  Spin,
  Row,
  Col,
  Tooltip,
  Rate,
  Drawer,
  Image,
} from "antd";
import { postFetch } from "@/utils/doFetch";
import AutoTable from "@/components/Tableform";
import styles from "./index.less";
const { Paragraph } = Typography;

const Details = (props) => {
  /**
   * dataSource: 整个页面的数据，Object
   * totalPath: 整个详情页的接口，String
   * totalParams: 整个详情页接口的参数
   * totalCard: 整个页面的模块，Array
   * col: 列数
   *
   * totalCard中的每一项变量：cardTitle每一个模块的标题；itemData每一个模块的数据信息（Array）
   * itemData中的每一项变量：key所对应的字段；title每一项label标题；type每一项的类型（file，img，textarea，table，不填默认就是普通的展示类型）；col每一项的占比；columns表格类型所用；path当类型为表格时，若该表格是单独查询出来的可以填入path；urlName 当传入文件为url为字符串时
   *
   */
  const {
    totalPath = "",
    dataSource,
    totalCard,
    totalParams,
    col,
    bottomNode,
    topNode,
  } = props;
  const [pageData, cp] = useState({});

  useEffect(() => {
    if (dataSource) {
      cp(dataSource);
    } else if (!dataSource && !Array.isArray(totalPath)) {
      postFetch({
        url: totalPath,
        params: totalParams ? { ...totalParams } : {},
      }).then((res) => {
        if (res.code == "0000") {
          if (!res.data) {
            return;
          }
          cp(res?.data?.data);
        }
      });
    }
  }, []);

  const getCol = (itemcol) => {
    if (itemcol) {
      return itemcol;
    } else {
      return col ? col : { xs: 24, sm: 24, md: 12, lg: 8, xl: 8, xxl: 6 };
    }
  };
  //获取每一项
  const getItem = (itemData) => {
    const {
        type,
        key,
        title,
        columns,
        path,
        urlName,
        col,
        rowKey,
        expandable,
      } = itemData,
      value = dataSource[key];
    if (!type || type == "input") {
      return value == 0 || value ? (
        <Tooltip title={`${title}：${value}`}>
          <pre className={col ? "" : styles.one}>{value}</pre>
        </Tooltip>
      ) : (
        <div>-</div>
      );
    } else if (type == "file") {
      return (
        <div style={{ display: "flex", flexFlow: "row wrap", width: "100%" }}>
          {value && typeof value == "string" ? (
            <a
              href={value}
              download={value}
              style={{ margin: "0 10px 0 0", display: "block" }}
            >
              {urlName ? urlName : "下载"}
            </a>
          ) : value && Array.isArray(value) && value?.length ? (
            value?.map((el) => {
              return (
                <a
                  key={el.url}
                  href={el.url}
                  download={el.name}
                  style={{ margin: "0 10px 0 0", display: "block" }}
                >
                  {el.name}
                </a>
              );
            })
          ) : (
            "-"
          )}
        </div>
      );
    } else if (type == "img") {
      return (
        <div style={{ display: "flex", flexFlow: "row wrap" }}>
          {value && value?.length
            ? value?.map((el) => {
                return (
                  <Image
                    style={{ margin: "0 10px 0 0" }}
                    src={el?.url}
                    width={30}
                    height={30}
                    key={el?.uid}
                  ></Image>
                );
              })
            : "-"}
        </div>
      );
    } else if (type == "table") {
      return (
        <AutoTable
          columns={columns || []}
          path={path ? path : null}
          bordered={false}
          dataSource={path ? null : value}
          rowKey={rowKey ?? "id"}
          expandable={expandable ?? null}
        ></AutoTable>
      );
    } else if (type == "rate") {
      return (
        <Rate
          bordered={false}
          className={"simple"}
          style={{ width: "100%" }}
          disabled={itemData.disabled}
          allowHalf={itemData.allowHalf ? itemData.allowHalf : false}
          value={value || 0}
        />
      );
    }
  };
  return (
    <Drawer
      maskClosable={false}
      placement="right"
      closable={true}
      getContainer={false}
      style={{ position: "absolute" }}
      {...props}
    >
      <div className={`${styles.bodyBox} detailCards`}>
        <Spin spinning={false}>
          {topNode && <div>{topNode}</div>}
          {totalCard?.map((item, i) => {
            return (
              <Card
                key={i}
                title={item.cardTitle}
                bordered={false}
                style={{ marginBottom: 16 }}
                bodyStyle={{ padding: "16px 10px" }}
              >
                <Row gutter={[12, 12]}>
                  {item?.itemData?.map((it, j) => {
                    return (
                      <Col key={j} {...getCol(it.col)}>
                        <div style={{ width: "100%", display: "flex" }}>
                          <div
                            style={{
                              flexShrink: 0,
                              display: `${it.title ? "block" : "none"}`,
                              textAlign: "right",
                              width: 126,
                            }}
                          >
                            {it.title}：
                          </div>
                          {getItem(it)}
                        </div>
                      </Col>
                    );
                  })}
                </Row>
              </Card>
            );
          })}
          {bottomNode && <div>{bottomNode}</div>}
        </Spin>
      </div>
    </Drawer>
  );
};

export default Details;