aldehyde 0.2.480 → 0.2.481

package/src/aldehyde/lowcode-components/base-table/index.tsx

@@ -1,269 +1,269 @@
-import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import _ from "lodash";
-import { ConfigProvider, Empty } from "antd";
-import HcserviceV3 from "../../tmpl/hcservice-v3";
-import { DataConfigProps } from "../data";
-import { ViewControl } from "../../index";
-import { useLocale } from "../../locale/useLocale";
-import './index.less';
-
-const defColumns = [
-    { title: "姓名", dataIndex: "name" },
-    { title: "年龄", dataIndex: "age" },
-    { title: "性别", dataIndex: "sex" }
-];
-
-const defData = [
-    { name: "张三", age: 18, sex: "男" },
-    { name: "李四", age: 20, sex: "女" },
-    { name: "王五", age: 22, sex: "男" }
-];
-
-export interface ITableColumn {
-    dataIndex: string;
-    title: string;
-    colWidth?: number;
-    valueAlign?: 'left' | 'center' | 'right';
-}
-
-export interface ITableHeaderStyle {
-    show?: boolean;
-    height?: number;
-    background?: string;
-    color?: string;
-    fontSize?: number;
-    fontWeight?: number;
-    fontFamily?: string;
-}
-
-export interface ITableBodyStyle {
-    background?: string;
-    color?: string;
-    fontSize?: number;
-    fontWeight?: number;
-    fontFamily?: string;
-    pageSize?: number;
-    showEmpty?: boolean; // 空状态显隐
-}
-
-export interface ComponentStyle {
-    columns?: ITableColumn[];
-    data?: object[];
-    header?: ITableHeaderStyle;
-    body?: ITableBodyStyle;
-    border?: { show?: boolean; color?: string; };
-    carousel?: { speed: number, enable: boolean };
-}
-
-export interface ComponentProps {
-    style?: ComponentStyle;
-    isDesignMode?: boolean; // 是否编辑模式
-    data?: DataConfigProps;
-    request?: { pollingInterval: number, polling: boolean, pageSize: number };
-    initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
-}
-
-export interface ComponentRef {
-    updateConfig: (newConfig: ComponentProps) => void;
-    destroy: () => void;
-}
-
-const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const { style, isDesignMode, data: propsData, request } = props;
-    const [headerStyle, setHeaderStyle] = useState<ITableHeaderStyle>({ ...(style?.header || {}) });
-    const [bodyStyle, setBodyStyle] = useState<ITableBodyStyle>({ ...(style?.body || {}) });
-    const [borderStyle, setBorderStyle] = useState<{ show?: boolean, color?: string }>({ ...(style?.border || {}) });
-    const [carousel, setCarousel] = useState<{ speed: number, enable: boolean }>({ ...style?.carousel });
-    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData });
-    const [columns, setColumns] = useState<ITableColumn[]>(isDesignMode ? defColumns : []);
-    const [data, setData] = useState<{ [key: string]: any }[]>(isDesignMode ? defData : []);
-    const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
-    const tableRef = useRef<HTMLDivElement | null>(null);
-    const theadRef = useRef<HTMLTableSectionElement | null>(null);
-    const resizeObserverRef = useRef<ResizeObserver | null>(null);
-    const contentHeightRef = useRef<number>(0);
-    const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
-    const { translate } = useLocale();
-
-    const handleDestroy = () => {
-        resizeObserverRef.current && resizeObserverRef.current.disconnect();
-        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
-    }
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => {
-            const { style, data: newDataConfig, initSearchParams: newISParams } = newConfig;
-            setHeaderStyle({ ...style?.header });
-            setBodyStyle({ ...style?.body });
-            setCarousel({ ...style?.carousel });
-            setDataConfig({ ...newDataConfig });
-            setBorderStyle({ ...style?.border });
-            setInitSearchParams(newISParams);
-        },
-        destroy: handleDestroy
-    }));
-
-
-    useEffect(() => {
-        return () => {
-            handleDestroy();
-        }
-    }, []);
-
-    const changeTableTrHeight = () => {
-        const { pageSize = 0 } = bodyStyle;
-        if (pageSize && data?.length) {
-            const tableBodyTds = tableRef.current?.getElementsByClassName('base-table-tr') || [];
-            const tdHeight = contentHeightRef.current / pageSize;
-            for (let i = 0; i < tableBodyTds.length; i++) {
-                tableBodyTds[i].style.height = `${tdHeight}px`;
-            }
-        }
-    };
-
-    useEffect(() => {
-        resizeObserverRef.current && resizeObserverRef.current.disconnect();
-        if (tableRef.current && data?.length) {
-            contentHeightRef.current = tableRef.current.clientHeight - (theadRef.current?.clientHeight || 0);
-            resizeObserverRef.current = new ResizeObserver(_.debounce((entries) => {
-                for (const entry of entries) {
-                    const { height } = entry.contentRect;
-                    contentHeightRef.current = height - (theadRef.current?.clientHeight || 0);
-                }
-                changeTableTrHeight();
-            }, 100));
-            // 开始观察
-            resizeObserverRef.current.observe(tableRef.current);
-            changeTableTrHeight();
-        }
-    }, [headerStyle?.show, data]);
-
-    useEffect(() => {
-        if (bodyStyle.pageSize) {
-            changeTableTrHeight();
-        }
-    }, [bodyStyle.pageSize]);
-
-    // 获取数据源表格配置
-    const getLtmplConfig = async () => {
-        const { ltmplConfig, status } = await HcserviceV3.requestLtmplConfig(dataConfig?.serverKey || null, dataConfig?.sourceId) || {};
-        const temColumns = ltmplConfig?.columns?.map((item) => ({ ...item, dataIndex: item.id }))?.filter((item) => !item.hidden);
-        setColumns(temColumns || []);
-        return status;
-    };
-
-    // 请求数据
-    const getData = async (params?: object) => {
-        const pageInfo = { pageNo: 1, pageSize: request?.pageSize || 100, ...(params || {}) };
-        const queryKey = await HcserviceV3.requestLtmplQueryKey(dataConfig?.serverKey || null, dataConfig?.sourceId, pageInfo);
-        if (!queryKey?.key) {
-            setData([]);
-            return;
-        }
-        const { entities } = await HcserviceV3.requestQueryData(dataConfig?.serverKey || null, queryKey.key, pageInfo);
-        const temData = entities?.map((item) => item?.fieldMap) || [];
-        setData(temData);
-    };
-
-    // 初始化请求数据
-    const getInitData = async (params?: object) => {
-        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
-        setData([]);
-        const status = await getLtmplConfig();
-        if (isDesignMode || status === 'error') {
-            return;
-        }
-        await getData(params);
-        if (request?.polling) {
-            pollingIntervalRef.current = setInterval(() => { getData(); }, request?.pollingInterval * 1000 || 60000);
-        }
-    };
-
-    // 静态数据处理
-    useEffect(() => {
-        if (dataConfig?.sourceType === 'staticData') {
-            const { columns: temColumns, data } = dataConfig?.staticData || {};
-            setColumns(temColumns || defColumns);
-            setData(temColumns ? data : defData);
-        }
-    }, [dataConfig?.sourceType, dataConfig?.staticData]);
-
-    /**
-     * 数据源数据请求
-     * 1、编辑态请求表头信息，不请求数据
-     */
-    useEffect(() => {
-        if (dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId) {
-            if (dataConfig?.isInitParams) { // 组件数据源接收外部参数
-                initSearchParams && getInitData(initSearchParams);
-            } else {
-                getInitData();
-            }
-        } else if (dataConfig?.sourceType === 'sourceId') {
-            setData([]);
-            setColumns([]);
-        }
-    }, [dataConfig?.sourceType, dataConfig?.sourceId, initSearchParams]);
-
-    const renderEmpty = () => <div className={'base-table-empty'} style={{ ...bodyStyle }}>{bodyStyle?.showEmpty !== false ? <Empty styles={{ description: { color: bodyStyle.color || "#000000" } }} image={Empty.PRESENTED_IMAGE_SIMPLE} description={translate("${暂无数据}")} /> : ""}</div>;
-
-    return (
-        <div className={'base-table'} ref={tableRef} style={carousel.enable ? { overflowX: "auto" } : { overflow: "auto" }}>
-            {columns?.length === 0 ? renderEmpty() :
-                // 消除表格轮播样式异常溢出 
-                <table style={carousel.enable ? { overflow: "hidden" } : {}}>
-                    {headerStyle?.show &&
-                        <thead style={{ ...headerStyle, position: "sticky", top: 0 }} ref={theadRef}>
-                            <tr>
-                                {columns?.map((column: ITableColumn, index: number) => <th key={index}
-                                    style={{
-                                        width: column.colWidth || 100,
-                                        fontWeight: headerStyle?.fontWeight,
-                                        textAlign: column.valueAlign,
-                                        border: borderStyle.show ? `1px solid ${borderStyle.color}` : "none"
-                                    }}>{column.title}</th>)}
-                            </tr>
-                        </thead>
-                    }
-                    {data?.length === 0 ? <tbody >
-                        <tr >
-                            <td colSpan={columns?.length}>{renderEmpty()}</td>
-                        </tr>
-                    </tbody> :
-                        // 表格antd组件样式兼容
-                        <ConfigProvider badge={{ style: { color: bodyStyle.color || "#000000" } }}>
-                            <tbody style={{ ...bodyStyle, animation: carousel.enable && data?.length > bodyStyle.pageSize ? `scroll ${carousel.speed || 3}s linear infinite` : `none` }} className="scroll-body" >
-                                {data?.map((item: Record<string, any>, index: number) => <tr key={index} className={'base-table-tr'}>
-                                    {columns?.map((column: ITableColumn, i: number) =>
-                                        <td key={i} style={{ width: column.colWidth || 100, textAlign: column.valueAlign, border: borderStyle.show ? `1px solid ${borderStyle.color}` : "none" }}>
-                                            <ViewControl
-                                                serverKey={dataConfig?.serverKey}
-                                                fieldConfig={column}
-                                                value={item[column.dataIndex]}
-                                                holderType={"table"}
-                                            />
-                                        </td>)}
-                                </tr>)}
-                            </tbody>
-                            {(data?.length > bodyStyle.pageSize) && carousel.enable &&
-                                <tbody style={{ ...bodyStyle, animation: `scroll ${carousel.speed || 3}s linear infinite` }} className="scroll-body" >
-                                    {data?.map((item: Record<string, any>, index: number) => <tr key={index} className={'base-table-tr'}>
-                                        {columns?.map((column: ITableColumn, i: number) =>
-                                            <td key={i} style={{ width: column.colWidth || 100, textAlign: column.valueAlign, border: borderStyle.show ? `1px solid ${borderStyle.color}` : "none" }}>
-                                                <ViewControl
-                                                    serverKey={dataConfig?.serverKey}
-                                                    fieldConfig={column}
-                                                    value={item[column.dataIndex]}
-                                                    holderType={"table"}
-                                                /></td>)}
-                                    </tr>)}
-                                </tbody>
-                            }
-                        </ConfigProvider>}
-                </table>
-            }
-        </div>
-    );
-})
-
+import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import _ from "lodash";
+import { ConfigProvider, Empty } from "antd";
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+import { DataConfigProps } from "../data";
+import { ViewControl } from "../../index";
+import { useLocale } from "../../locale/useLocale";
+import './index.less';
+
+const defColumns = [
+    { title: "姓名", dataIndex: "name" },
+    { title: "年龄", dataIndex: "age" },
+    { title: "性别", dataIndex: "sex" }
+];
+
+const defData = [
+    { name: "张三", age: 18, sex: "男" },
+    { name: "李四", age: 20, sex: "女" },
+    { name: "王五", age: 22, sex: "男" }
+];
+
+export interface ITableColumn {
+    dataIndex: string;
+    title: string;
+    colWidth?: number;
+    valueAlign?: 'left' | 'center' | 'right';
+}
+
+export interface ITableHeaderStyle {
+    show?: boolean;
+    height?: number;
+    background?: string;
+    color?: string;
+    fontSize?: number;
+    fontWeight?: number;
+    fontFamily?: string;
+}
+
+export interface ITableBodyStyle {
+    background?: string;
+    color?: string;
+    fontSize?: number;
+    fontWeight?: number;
+    fontFamily?: string;
+    pageSize?: number;
+    showEmpty?: boolean; // 空状态显隐
+}
+
+export interface ComponentStyle {
+    columns?: ITableColumn[];
+    data?: object[];
+    header?: ITableHeaderStyle;
+    body?: ITableBodyStyle;
+    border?: { show?: boolean; color?: string; };
+    carousel?: { speed: number, enable: boolean };
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    isDesignMode?: boolean; // 是否编辑模式
+    data?: DataConfigProps;
+    request?: { pollingInterval: number, polling: boolean, pageSize: number };
+    initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
+}
+
+export interface ComponentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+    destroy: () => void;
+}
+
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const { style, isDesignMode, data: propsData, request } = props;
+    const [headerStyle, setHeaderStyle] = useState<ITableHeaderStyle>({ ...(style?.header || {}) });
+    const [bodyStyle, setBodyStyle] = useState<ITableBodyStyle>({ ...(style?.body || {}) });
+    const [borderStyle, setBorderStyle] = useState<{ show?: boolean, color?: string }>({ ...(style?.border || {}) });
+    const [carousel, setCarousel] = useState<{ speed: number, enable: boolean }>({ ...style?.carousel });
+    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData });
+    const [columns, setColumns] = useState<ITableColumn[]>(isDesignMode ? defColumns : []);
+    const [data, setData] = useState<{ [key: string]: any }[]>(isDesignMode ? defData : []);
+    const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const tableRef = useRef<HTMLDivElement | null>(null);
+    const theadRef = useRef<HTMLTableSectionElement | null>(null);
+    const resizeObserverRef = useRef<ResizeObserver | null>(null);
+    const contentHeightRef = useRef<number>(0);
+    const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
+    const { translate } = useLocale();
+
+    const handleDestroy = () => {
+        resizeObserverRef.current && resizeObserverRef.current.disconnect();
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+    }
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            const { style, data: newDataConfig, initSearchParams: newISParams } = newConfig;
+            setHeaderStyle({ ...style?.header });
+            setBodyStyle({ ...style?.body });
+            setCarousel({ ...style?.carousel });
+            setDataConfig({ ...newDataConfig });
+            setBorderStyle({ ...style?.border });
+            setInitSearchParams(newISParams);
+        },
+        destroy: handleDestroy
+    }));
+
+
+    useEffect(() => {
+        return () => {
+            handleDestroy();
+        }
+    }, []);
+
+    const changeTableTrHeight = () => {
+        const { pageSize = 0 } = bodyStyle;
+        if (pageSize && data?.length) {
+            const tableBodyTds = tableRef.current?.getElementsByClassName('base-table-tr') || [];
+            const tdHeight = contentHeightRef.current / pageSize;
+            for (let i = 0; i < tableBodyTds.length; i++) {
+                tableBodyTds[i].style.height = `${tdHeight}px`;
+            }
+        }
+    };
+
+    useEffect(() => {
+        resizeObserverRef.current && resizeObserverRef.current.disconnect();
+        if (tableRef.current && data?.length) {
+            contentHeightRef.current = tableRef.current.clientHeight - (theadRef.current?.clientHeight || 0);
+            resizeObserverRef.current = new ResizeObserver(_.debounce((entries) => {
+                for (const entry of entries) {
+                    const { height } = entry.contentRect;
+                    contentHeightRef.current = height - (theadRef.current?.clientHeight || 0);
+                }
+                changeTableTrHeight();
+            }, 100));
+            // 开始观察
+            resizeObserverRef.current.observe(tableRef.current);
+            changeTableTrHeight();
+        }
+    }, [headerStyle?.show, data]);
+
+    useEffect(() => {
+        if (bodyStyle.pageSize) {
+            changeTableTrHeight();
+        }
+    }, [bodyStyle.pageSize]);
+
+    // 获取数据源表格配置
+    const getLtmplConfig = async () => {
+        const { ltmplConfig, status } = await HcserviceV3.requestLtmplConfig(dataConfig?.serverKey || null, dataConfig?.sourceId) || {};
+        const temColumns = ltmplConfig?.columns?.map((item) => ({ ...item, dataIndex: item.id }))?.filter((item) => !item.hidden);
+        setColumns(temColumns || []);
+        return status;
+    };
+
+    // 请求数据
+    const getData = async (params?: object) => {
+        const pageInfo = { pageNo: 1, pageSize: request?.pageSize || 100, ...(params || {}) };
+        const queryKey = await HcserviceV3.requestLtmplQueryKey(dataConfig?.serverKey || null, dataConfig?.sourceId, pageInfo);
+        if (!queryKey?.key) {
+            setData([]);
+            return;
+        }
+        const { entities } = await HcserviceV3.requestQueryData(dataConfig?.serverKey || null, queryKey.key, pageInfo);
+        const temData = entities?.map((item) => item?.fieldMap) || [];
+        setData(temData);
+    };
+
+    // 初始化请求数据
+    const getInitData = async (params?: object) => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        setData([]);
+        const status = await getLtmplConfig();
+        if (isDesignMode || status === 'error') {
+            return;
+        }
+        await getData(params);
+        if (request?.polling) {
+            pollingIntervalRef.current = setInterval(() => { getData(); }, request?.pollingInterval * 1000 || 60000);
+        }
+    };
+
+    // 静态数据处理
+    useEffect(() => {
+        if (dataConfig?.sourceType === 'staticData') {
+            const { columns: temColumns, data } = dataConfig?.staticData || {};
+            setColumns(temColumns || defColumns);
+            setData(temColumns ? data : defData);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.staticData]);
+
+    /**
+     * 数据源数据请求
+     * 1、编辑态请求表头信息，不请求数据
+     */
+    useEffect(() => {
+        if (dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId) {
+            if (dataConfig?.isInitParams) { // 组件数据源接收外部参数
+                initSearchParams && getInitData(initSearchParams);
+            } else {
+                getInitData();
+            }
+        } else if (dataConfig?.sourceType === 'sourceId') {
+            setData([]);
+            setColumns([]);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.sourceId, initSearchParams]);
+
+    const renderEmpty = () => <div className={'base-table-empty'} style={{ ...bodyStyle }}>{bodyStyle?.showEmpty !== false ? <Empty styles={{ description: { color: bodyStyle.color || "#000000" } }} image={Empty.PRESENTED_IMAGE_SIMPLE} description={translate("${暂无数据}")} /> : ""}</div>;
+
+    return (
+        <div className={'base-table'} ref={tableRef} style={carousel.enable ? { overflowX: "auto" } : { overflow: "auto" }}>
+            {columns?.length === 0 ? renderEmpty() :
+                // 消除表格轮播样式异常溢出 
+                <table style={carousel.enable ? { overflow: "hidden" } : {}}>
+                    {headerStyle?.show &&
+                        <thead style={{ ...headerStyle, position: "sticky", top: 0 }} ref={theadRef}>
+                            <tr>
+                                {columns?.map((column: ITableColumn, index: number) => <th key={index}
+                                    style={{
+                                        width: column.colWidth || 100,
+                                        fontWeight: headerStyle?.fontWeight,
+                                        textAlign: column.valueAlign,
+                                        border: borderStyle.show ? `1px solid ${borderStyle.color}` : "none"
+                                    }}>{column.title}</th>)}
+                            </tr>
+                        </thead>
+                    }
+                    {data?.length === 0 ? <tbody >
+                        <tr >
+                            <td colSpan={columns?.length}>{renderEmpty()}</td>
+                        </tr>
+                    </tbody> :
+                        // 表格antd组件样式兼容
+                        <ConfigProvider badge={{ style: { color: bodyStyle.color || "#000000" } }}>
+                            <tbody style={{ ...bodyStyle, animation: carousel.enable && data?.length > bodyStyle.pageSize ? `scroll ${carousel.speed || 3}s linear infinite` : `none` }} className="scroll-body" >
+                                {data?.map((item: Record<string, any>, index: number) => <tr key={index} className={'base-table-tr'}>
+                                    {columns?.map((column: ITableColumn, i: number) =>
+                                        <td key={i} style={{ width: column.colWidth || 100, textAlign: column.valueAlign, border: borderStyle.show ? `1px solid ${borderStyle.color}` : "none" }}>
+                                            <ViewControl
+                                                serverKey={dataConfig?.serverKey}
+                                                fieldConfig={column}
+                                                value={item[column.dataIndex]}
+                                                holderType={"table"}
+                                            />
+                                        </td>)}
+                                </tr>)}
+                            </tbody>
+                            {(data?.length > bodyStyle.pageSize) && carousel.enable &&
+                                <tbody style={{ ...bodyStyle, animation: `scroll ${carousel.speed || 3}s linear infinite` }} className="scroll-body" >
+                                    {data?.map((item: Record<string, any>, index: number) => <tr key={index} className={'base-table-tr'}>
+                                        {columns?.map((column: ITableColumn, i: number) =>
+                                            <td key={i} style={{ width: column.colWidth || 100, textAlign: column.valueAlign, border: borderStyle.show ? `1px solid ${borderStyle.color}` : "none" }}>
+                                                <ViewControl
+                                                    serverKey={dataConfig?.serverKey}
+                                                    fieldConfig={column}
+                                                    value={item[column.dataIndex]}
+                                                    holderType={"table"}
+                                                /></td>)}
+                                    </tr>)}
+                                </tbody>
+                            }
+                        </ConfigProvider>}
+                </table>
+            }
+        </div>
+    );
+})
+
 export default Index;

package/src/aldehyde/lowcode-components/base-tabs/index.less

@@ -1,15 +1,15 @@
-.base-tabs {
-    .ant-space-item {
-        width: inherit;
-        height: 100%;
-    }
-
-    .tabs-item {
-        background-size: 100% 100% !important;
-        background-repeat: no-repeat !important;
-        width: 100%;
-        height: 100%;
-        border: none;
-        cursor: pointer;
-    }
+.base-tabs {
+    .ant-space-item {
+        width: inherit;
+        height: 100%;
+    }
+
+    .tabs-item {
+        background-size: 100% 100% !important;
+        background-repeat: no-repeat !important;
+        width: 100%;
+        height: 100%;
+        border: none;
+        cursor: pointer;
+    }
 }