aldehyde 0.2.350 → 0.2.351

package/src/aldehyde/list/card-list/card-list-item.tsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from "react";
+import { useLocale } from "../../locale/useLocale";
+import { Card, Row, Col, Empty } from "antd";
+import ViewControl from "../../controls/view-control";
+import { CardListConfig } from "../../tmpl/interface";
+import CustomDetailModalPage from "../../custom-page/custom-detail-modal-page";
+import "./index.css";
+
+type Props = {
+    cardListConfig?: CardListConfig;
+    item?: any;
+    renderOpt?: React.ReactNode;
+    serverKey?: string;
+    sourceId?: string;
+};
+
+const dataKeys = ["primaryColumn", "primaryColumnLabel", "secondColumn", "secondColumnLabel", "cardShowCols", "labelColumn", "mainPicture", "mainPictureLabel"];
+
+const Index = (props: Props) => {
+    const { cardListConfig, item, renderOpt, serverKey, sourceId } = props;
+    const { buttons, customViewPagePath, mainCode } = cardListConfig;
+    const { translate } = useLocale();
+    const [data, setData] = useState({});
+    const [detailOpen, setDetailOpen] = useState<boolean>(false);
+
+    const handleData = (type: string) => {
+        const itemConfig = cardListConfig[type];
+        if (!itemConfig) {
+            return "";
+        }
+        if (type === "cardShowCols") {
+            return itemConfig.map(r => {
+                const value = item[r.id];
+                const element = <ViewControl serverKey={serverKey} holderType="table" value={value} fieldConfig={r} />;
+                const title = r.title;
+                return { element, value, title };
+            });
+        }
+        const value = item[itemConfig.id];
+        const element = <ViewControl serverKey={serverKey} holderType="table" value={value} fieldConfig={type === "mainPicture" ? { ...itemConfig, preview: false } : itemConfig} />;
+        const title = itemConfig.title;
+        return { element, value, title };
+    }
+
+    useEffect(() => {
+        if (cardListConfig && item) {
+            const temData = dataKeys.reduce((total, next) => {
+                total[next] = handleData(next);
+                return total;
+            }, {});
+            setData(temData);
+        }
+    }, [cardListConfig, item]);
+
+    const onClickDetail = () => {
+        if (!buttons.some(r => ["customDetail", "detail"].includes(r)) || !customViewPagePath) {
+            return;
+        }
+        setDetailOpen(true);
+    }
+
+    return (
+        <Card className="card-list-item" styles={{ body: { height: "100%", padding: "0 12px 12px" } }} >
+            <div className="card-list-item-body">
+                <div className="card-list-item-content">
+                    <div className="card-list-item-head">
+                        <div className="card-list-item-head-title">
+                            {data["primaryColumn"] ?
+                                <div className="card-list-item-head-primary">
+                                    <div className="primary-column">{data["primaryColumn"]?.element}</div>
+                                    <div className="primary-column-label">{data["primaryColumnLabel"]?.element}</div>
+                                </div>
+                                : ""}
+                            <div className="label-column">{data["labelColumn"]?.element}</div>
+                        </div>
+                        <div className="card-list-item-head-title">
+                            {data["secondColumn"] ?
+                                <div className="card-list-item-head-second">
+                                    <div className="second-column">{data["secondColumn"].value ? data["secondColumn"]?.element : "-"}</div>
+                                    <div className="second-column-label">{data["secondColumnLabel"]?.element}</div>
+                                </div>
+                                : ""}
+                        </div>
+                    </div>
+                    <div className="card-list-item-main" onClick={onClickDetail}>
+                        {data["mainPicture"] ? <div className="card-main-picture">
+                            {data["mainPicture"].value ? data["mainPicture"].element : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无图片" />}
+                            <div className="card-main-picture-label">{data["mainPictureLabel"].element}</div>
+                        </div> : ""}
+                        {data["cardShowCols"] ?
+                            <div className="card-show-cols">
+                                <Row gutter={6}>
+                                    {data["cardShowCols"].map((col, index) => // 卡片展示字段是两个，则右侧对齐
+                                        <Col className="card-show-col" span={12} key={index} style={data["cardShowCols"].length < 3 && index % 2 ? { justifyContent: "flex-end" } : {}}>
+                                            <div className="card-show-col-title">{translate("${" + col.title + "}")}:</div>
+                                            <div className="card-show-col-value">{col.value || col.value === 0 ? col.element : "-"}</div>
+                                        </Col>)
+                                    }
+                                </Row>
+                            </div> : ""}
+                    </div>
+                </div>
+                <div className="card-list-item-footer">
+                    {renderOpt}
+                </div>
+            </div>
+            {detailOpen ? <CustomDetailModalPage width={1000} minHeight="70vh" mainCode={mainCode} sourceId={sourceId} code={item.code} customPath={customViewPagePath} open={detailOpen} onCancel={() => { setDetailOpen(false) }} /> : ""}
+        </Card >);
+};
+
+export default Index;

package/src/aldehyde/list/card-list/index.css

@@ -0,0 +1,144 @@
+.card-list {
+    margin-top: 6px;
+
+    .card-list-item {
+        height: calc(100% - 14px);
+
+        .card-list-item-body {
+            height: 100%;
+            display: flex;
+            flex-wrap: wrap;
+            align-content: space-between;
+            flex-direction: column;
+        }
+
+        .card-list-item-content {
+            width: 100%;
+            flex-grow: 1;
+            display: flex;
+            flex-wrap: wrap;
+            align-content: space-between;
+            flex-direction: column;
+        }
+    }
+
+    .card-list-item-head {
+        width: 100%;
+        margin: 12px 0;
+
+        .card-list-item-head-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+
+            .card-list-item-head-primary,
+            .card-list-item-head-second {
+                display: flex;
+                align-items: center;
+                position: relative;
+                max-width: 70%;
+                min-height: 32px;
+
+                .primary-column,
+                .second-column {
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    font-size: 20px;
+                    font-weight: 600;
+                }
+
+                .second-column {
+                    font-size: 16px;
+                    font-weight: normal;
+                }
+
+                .primary-column-label,
+                .second-column-label {
+                    position: absolute;
+                    top: 0;
+                    right: -4px;
+                    transform: translate(100%, -30%);
+
+                    .ant-tag {
+                        font-size: 10px;
+                        padding: 0 4px;
+                    }
+                }
+
+                .second-column-label {
+                    .ant-tag {
+                        font-size: 8px;
+                        padding: 3px;
+                        line-height: normal;
+                    }
+                }
+            }
+
+            .card-list-item-head-second {
+                margin-top: 6px;
+            }
+        }
+    }
+
+    .card-list-item-main {
+        width: 100%;
+        min-height: 100px;
+        margin-bottom: 12px;
+        background-color: #f5f5f5;
+        flex-grow: 1;
+        display: flex;
+        flex-wrap: wrap;
+        align-content: space-between;
+        flex-direction: column;
+        cursor: pointer;
+
+        .card-main-picture {
+            width: 100%;
+            min-height: 200px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            flex-grow: 1;
+
+            .ant-image {
+                width: 100% !important;
+            }
+
+            .card-main-picture-label {
+                position: absolute;
+                top: 6px;
+                right: 12px;
+                color: var(--ant-color-primary);
+                font-size: 16px;
+            }
+        }
+
+        .card-show-cols {
+            padding: 6px 12px;
+            background-color: rgba(0, 0, 0, 0.04);
+        }
+
+        .card-show-col {
+            display: flex;
+            align-items: center;
+
+            .card-show-col-title {
+                margin-right: 6px;
+                white-space: nowrap;
+            }
+
+            .card-show-col-value {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+        }
+    }
+
+    .card-list-item-footer {
+        width: 100%;
+    }
+}

package/src/aldehyde/list/card-list/index.tsx

@@ -0,0 +1,37 @@
+import React, { useMemo } from "react";
+import { Col, Row } from "antd";
+import { CardListConfig } from "../../tmpl/interface";
+import CardListItem from "./card-list-item";
+import "./index.css";
+
+type Props = {
+    cardListConfig?: CardListConfig;
+    dataSource?: object[];
+    columns?: any[];
+    serverKey?: string;
+    sourceId?: string;
+};
+
+const Index = (props: Props) => {
+    const { cardListConfig, dataSource, columns, serverKey, sourceId } = props;
+
+    const renderOpt = (item: unknown) => {
+        const actionCol = columns.find(col => col["操作"] == 1);
+        return actionCol?.render(item, item);
+    }
+
+    const colFlex = useMemo(() => {
+        const rowCardCount = cardListConfig?.rowCardCount || 5;
+        const flex = Math.floor((100 / rowCardCount) * 100) / 100;
+        return `${flex}%`;
+    }, [cardListConfig]);
+
+    return (
+        <div className="card-list">
+            <Row gutter={[12, 12]}>
+                {dataSource?.map((item, index) => <Col style={{ minWidth: 0 }} key={`col-${index}`} xl={{ flex: colFlex }} lg={{ flex: "25%" }} sm={{ flex: "50%" }}><CardListItem cardListConfig={cardListConfig} item={item} renderOpt={renderOpt(item)} serverKey={serverKey} sourceId={sourceId} /></Col>)}
+            </Row>
+        </div>);
+};
+
+export default Index;