import React, { useState, useEffect, memo } from "react"; import { Table, Divider, Card, Button, Typography, Spin, Row, Col, Tooltip, Rate, Image, message, Section, } from "antd"; import { doFetch, postFetch } from "@/utils/doFetch"; import AutoTable from "@/components/Tableform"; import { useModel } from "umi"; import styles from "./index.less"; import PrintProvider, { Print, NoPrint } from "react-easy-print"; 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, printRef, onloadeddata, reload, } = props; const [pageData, cp] = useState({}); const { initialState, setInitialState } = useModel("@@initialState"); useEffect(() => { if (dataSource) { cp(dataSource); } else if (!dataSource && !Array.isArray(totalPath)) { doFetch({ url: totalPath, params: totalParams ? { ...totalParams } : {}, }).then((res) => { if (res.code == "0000") { if (!res.data) { return; } cp(res?.data?.data); } }); } }, []); useEffect(() => { onloadeddata?.(pageData); }, [pageData]); 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, pagination, rowSelection, } = itemData, value = pageData[key]; if (!type || type == "input") { return value == 0 || value ? (
{value}
) : (
-
); } else if (type == "file") { return (
{value && typeof value == "string" ? ( {urlName ? urlName : "下载"} ) : value && Array.isArray(value) && value?.length ? ( value?.map((el) => { return ( {el.name} ); }) ) : ( "-" )}
); } else if (type == "img") { return (
{value ? ( Array.isArray(value) && value.length > 0 ? ( value?.map((el) => { return ( ); }) ) : ( ) ) : ( "-" )}
); } else if (type == "table") { return ( value && ( it.id), } : null } pagination={pagination} rowSelection={rowSelection} > ) ); } else if (type == "rate") { return ( ); } }; const pageStyle = ` @media all { .page-break { display: none; } } @media print { html, body { height: initial !important; overflow: initial !important; -webkit-print-color-adjust: exact; } } @media print { .page-break { margin-top: 2rem; display: block; page-break-before: auto; } } @page { size: auto; margin: 20mm; } `; return (
{topNode &&
{topNode}
} {totalCard?.map((item, i) => { let Container = item?.noPrint ? NoPrint : Print; return ( { doFetch({ url: item.extrapath, params: initialState[item.extrakey], }).then((res) => { if (res.code == "0000") { if (reload) { reload && reload(); } else { message.success("操作成功"); } } }); }} > 保存 ) : null } > {item?.itemData?.map((it, j) => { return (
{it.title}:
{getItem(it)}
); })}
); })} {bottomNode &&
{bottomNode}
}
); }; export default memo(Details);