aldehyde 0.2.420 → 0.2.422

package/src/aldehyde/lowcode-components/effectScatter-map-3d/index.tsx

@@ -1,6 +1,7 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
+import { Spin } from "antd";
 import ProgramConfig from "../../units";
 import chinaJson from "../assets/china.json";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
@@ -195,7 +196,7 @@ export interface ComponentStyle {
 
 export interface ComponentProps {
     style?: ComponentStyle;
-    base: { width: number, height: number },
+    base: { width: number, height: number };
     data?: DataConfigProps;
     isDesignMode?: boolean; // 是否编辑模式
     initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
@@ -214,6 +215,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const [data, setData] = useState<{ name: string, value: number[] }[]>([]);
     const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
     const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
     const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
@@ -279,7 +281,9 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
 
     // 请求数据
     const getData = async (params?: object) => {
+        setLoading(true);
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        setLoading(false);
         const { config, value } = data || {};
         setData(handleData(value));
         return config;
@@ -394,7 +398,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }, [size]);
 
-    return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+
+    if (isDesignMode) {
+        return renderChartDom();
+    }
+
+    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
 });
 
 export default Index;

package/src/aldehyde/lowcode-components/gauge-chart/index.tsx

@@ -1,6 +1,7 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
+import { Spin } from "antd";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
 import { DataConfigProps } from "../data";
 
@@ -46,7 +47,7 @@ export interface ComponentStyle {
 
 export interface ComponentProps {
     style?: ComponentStyle;
-    base: { width: number, height: number },
+    base: { width: number, height: number };
     data?: DataConfigProps;
     isDesignMode?: boolean; // 是否编辑模式
     initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
@@ -66,6 +67,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const [data, setData] = useState<number>(0);
     const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
     const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
     const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
@@ -121,7 +123,9 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
 
     // 请求数据
     const getData = async (params?: object) => {
+        setLoading(true);
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        setLoading(false);
         const { config, value } = data || {};
         const temData = handleData(value);
         setData(temData);
@@ -227,7 +231,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }, [size]);
 
-    return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+
+    if (isDesignMode) {
+        return renderChartDom();
+    }
+
+    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
 });
 
 export default Index;

package/src/aldehyde/lowcode-components/line-bar-chart/index.tsx

@@ -1,6 +1,7 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
+import { Spin } from "antd";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
 import { DataConfigProps } from "../data";
 
@@ -92,7 +93,7 @@ export interface ComponentStyle {
 
 export interface ComponentProps {
     style?: ComponentStyle;
-    base: { width: number, height: number },
+    base: { width: number, height: number };
     data?: DataConfigProps;
     isDesignMode?: boolean; // 是否编辑模式
     initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
@@ -112,6 +113,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const [data, setData] = useState<{ name: string, data: any }[]>([]);
     const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
     const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
     const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
@@ -167,7 +169,9 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
 
     // 请求数据
     const getData = async (params?: object) => {
+        setLoading(true);
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        setLoading(false);
         const { config, value } = data || {};
         const temData = handleData(value);
         setData(temData);
@@ -264,7 +268,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }, [size]);
 
-    return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+
+    if (isDesignMode) {
+        return renderChartDom();
+    }
+
+    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
 });
 
 export default Index;

package/src/aldehyde/lowcode-components/line-chart/index.tsx

@@ -1,6 +1,7 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
+import { Spin } from "antd";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
 import { DataConfigProps } from "../data";
 
@@ -86,7 +87,7 @@ export interface ComponentStyle {
 
 export interface ComponentProps {
     style?: ComponentStyle;
-    base: { width: number, height: number },
+    base: { width: number, height: number };
     data?: DataConfigProps;
     isDesignMode?: boolean; // 是否编辑模式
     initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
@@ -106,6 +107,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const [data, setData] = useState<{ name: string, data: any }[]>([]);
     const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
     const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
     const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
@@ -161,7 +163,9 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
 
     // 请求数据
     const getData = async (params?: object) => {
+        setLoading(true);
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        setLoading(false);
         const { config, value } = data || {};
         const temData = handleData(value);
         setData(temData);
@@ -253,7 +257,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }, [size]);
 
-    return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+
+    if (isDesignMode) {
+        return renderChartDom();
+    }
+
+    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
 });
 
 export default Index;

package/src/aldehyde/lowcode-components/liquid-chart/index.tsx

@@ -2,6 +2,7 @@ import * as echarts from 'echarts';
 import 'echarts-liquidfill';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
+import { Spin } from "antd";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
 import { DataConfigProps } from "../data";
 
@@ -62,7 +63,7 @@ export interface ComponentStyle {
 
 export interface ComponentProps {
     style?: ComponentStyle;
-    base: { width: number, height: number },
+    base: { width: number, height: number };
     data?: DataConfigProps;
     isDesignMode?: boolean; // 是否编辑模式
     initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
@@ -82,6 +83,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const [data, setData] = useState<number>(0);
     const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
     const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
     const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
@@ -137,7 +139,9 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
 
     // 请求数据
     const getData = async (params?: object) => {
+        setLoading(true);
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        setLoading(false);
         const { config, value } = data || {};
         const temData = handleData(value);
         setData(temData);
@@ -225,7 +229,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }, [size]);
 
-    return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+
+    if (isDesignMode) {
+        return renderChartDom();
+    }
+
+    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
 });
 
 export default Index;

package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.less

@@ -2,6 +2,7 @@
   background-size: 100% 100%;
   width: 100%;
   height: 100%;
+  overflow: hidden;
 
   .screen-wrapper {
     transition-property: all;
@@ -10,4 +11,4 @@
     position: relative;
     transform-origin: left top;
   }
-}
+}

package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.tsx

@@ -52,10 +52,12 @@ export default function ScreenFit(props: ScreenFitProps) {
                 break;
             case 'full-x':
                 elRef.current.style.transform = `scale(${widthScale})`;
+                canvasRef.current.style.height = `${Number(realHeight) * widthScale}px`;
                 scaleChange?.(widthScale, widthScale);
                 break;
             case 'full-y':
                 elRef.current.style.transform = `scale(${heightScale})`;
+                canvasRef.current.style.width = `${Number(realWidth) * heightScale}px`;
                 scaleChange?.(heightScale, heightScale);
                 if (currentWidth > (+realWidth * heightScale)) {
                     elRef.current.style.margin = `0px ${(currentWidth - +realWidth * heightScale) / 2}px`;
@@ -115,7 +117,7 @@ export default function ScreenFit(props: ScreenFitProps) {
     }, [])
 
     return (
-        <div ref={canvasRef} className={'react-screen-box'}>
+        <div ref={canvasRef} className={'react-screen-box'} >
             <div className={'screen-wrapper'} ref={elRef}>
                 {props.children}
             </div>

package/src/aldehyde/lowcode-components/lowcode-view/index.less

@@ -4,6 +4,13 @@
     /* IE和Edge */
     scrollbar-width: none;
     /* Firefox */
+
+    .ant-spin-nested-loading,
+    .ant-spin-container {
+        width: 100%;
+        height: 100%;
+    }
+
 }
 
 .lowcodeView::-webkit-scrollbar {

package/src/aldehyde/lowcode-components/lowcode-view/index.tsx

@@ -62,10 +62,11 @@ interface Props {
     ddpageId?: string,
     layoutRootPath?: string,
     initSearchParams?: { [key: string]: any }, // 组件数据源初始化查询参数
+    style?: CSSProperties,
 }
 
 const LowcodeView = (props: Props) => {
-    const { isFullScreen, layoutRootPath, ddpageId: propsDdpageId, initSearchParams } = props;
+    const { isFullScreen, layoutRootPath, ddpageId: propsDdpageId, initSearchParams, style = {} } = props;
     const { ddpageId: urlDdpageId } = useParams();
     const ddpageId = propsDdpageId || urlDdpageId;
     const [loading, setLoading] = useState<boolean>(false);
@@ -195,6 +196,7 @@ const LowcodeView = (props: Props) => {
                 backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined,
                 backgroundSize: "100% 100%",
                 backgroundRepeat: 'no-repeat',
+                ...style,
             }}>
                 {loading || !layerManager ?
                     <Loading />

package/src/aldehyde/lowcode-components/pie-chart/index.tsx

@@ -1,6 +1,7 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
+import { Spin } from "antd";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
 import { DataConfigProps } from "../data";
 
@@ -120,7 +121,7 @@ export interface ComponentStyle {
 
 export interface ComponentProps {
     style?: ComponentStyle;
-    base: { width: number, height: number },
+    base: { width: number, height: number };
     data?: DataConfigProps;
     isDesignMode?: boolean; // 是否编辑模式
     initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
@@ -140,6 +141,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const [data, setData] = useState<{ name: string, data: any }[]>([]);
     const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
     const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
     const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
@@ -195,7 +197,9 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
 
     // 请求数据
     const getData = async (params?: object) => {
+        setLoading(true);
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        setLoading(false);
         const { config, value } = data || {};
         const temData = handleData(value);
         setData(temData);
@@ -310,7 +314,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }, [size]);
 
-    return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+
+    if (isDesignMode) {
+        return renderChartDom();
+    }
+
+    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
 });
 
 export default Index;

package/src/aldehyde/lowcode-components/progress-chart/index.tsx

@@ -1,6 +1,7 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
+import { Spin } from "antd";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
 import { DataConfigProps } from "../data";
 
@@ -93,7 +94,7 @@ export interface ComponentStyle {
 
 export interface ComponentProps {
     style?: ComponentStyle;
-    base: { width: number, height: number },
+    base: { width: number, height: number };
     data?: DataConfigProps;
     isDesignMode?: boolean; // 是否编辑模式
     initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
@@ -113,6 +114,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const [data, setData] = useState<number>(0);
     const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
     const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
     const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
@@ -168,7 +170,9 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
 
     // 请求数据
     const getData = async (params?: object) => {
+        setLoading(true);
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        setLoading(false);
         const { config, value } = data || {};
         const temData = handleData(value);
         setData(temData);
@@ -270,7 +274,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }, [size]);
 
-    return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+
+    if (isDesignMode) {
+        return renderChartDom();
+    }
+
+    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
 });
 
 export default Index;

package/src/aldehyde/routable/ltmpl-route.tsx

@@ -3,7 +3,7 @@ import {
     DoEditParam, LtmplConfig,
     LtmplConfigRes, PageType,
     RouterCompProps,
-    ShowViewParam, ActTableViewModel
+    ShowViewParam, ActTableViewModel, ThemeConfig
 } from "../tmpl/interface";
 import Units from "../units";
 import ActTable from "../table/act-table";
@@ -41,6 +41,7 @@ export interface LtmplRouteState {
     editSourceId?: string;
     toCustomPage?: boolean;
     userPageConfig?: { [key: string]: any };
+    themeConfig?: ThemeConfig;
 }
 
 class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
@@ -68,11 +69,13 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
         editSourceId: undefined,
         toCustomPage: false,
         userPageConfig: undefined,
+        themeConfig: undefined,
     };
 
     async componentDidMount() {
         this.loadData();
         this.getUserPageConfig();
+        this.getThemeConfig();
     }
     Z
     get computedLayoutPath() {
@@ -82,13 +85,18 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
     }
 
     // 获取用户页面配置
-    getUserPageConfig = () => {
+    getUserPageConfig = async () => {
         const { params } = this.props;
         const { sourceId } = params;
-        const config = Units.getUserPageConfig(sourceId);
+        const config = await Units.getUserPageConfig(sourceId);
         this.setState({ userPageConfig: config });
     };
 
+    getThemeConfig = async () => {
+        const theme: ThemeConfig = await Units.getThemeConfig();
+        this.setState({ themeConfig: theme });
+    }
+
     // 设置用户页面配置
     setUserPageConfig = (config: { [key: string]: any }) => {
         const { params } = this.props;
@@ -350,7 +358,7 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
     render() {
         const {
             ltmplConfigRes, showDraw, showWindowType, ractionId, selectedCode,
-            showViewDrawer, showViewModal, showEdit, editSourceId, viewSourceId, toCustomPage, userPageConfig
+            showViewDrawer, showViewModal, showEdit, editSourceId, viewSourceId, toCustomPage, userPageConfig, themeConfig
         } = this.state;
         const { location, params, tableType, rowOperatable, defShowType } = this.props;
         const { sourceId } = params;
@@ -394,7 +402,7 @@ class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
                         doCreate={this.doCreate} sourceId={sourceId}
                         criteriaData={criteriaData} ltmplConfig={ltmplConfig} doRAction={this.doRAction}
                         defShowType={defShowType} userPageConfig={userPageConfig} setUserPageConfig={this.setUserPageConfig}
-                        resetUserPageConfig={this.resetUserPageConfig}
+                        resetUserPageConfig={this.resetUserPageConfig} allowUserConfig={themeConfig?.allowUserConfig}
                     />
                     {showDraw ? (
                         <Drawer

package/src/aldehyde/routable/splitview-ltmpl-route.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useMemo } from "react";
 import { useParams, useLocation, useNavigate } from "react-router-dom";
-import { DoEditParam, LtmplConfig, LtmplConfigRes, PageType, RouterCompProps, ShowViewParam, ActTableViewModel } from "../tmpl/interface";
+import { DoEditParam, LtmplConfig, LtmplConfigRes, PageType, RouterCompProps, ShowViewParam, ActTableViewModel, ThemeConfig } from "../tmpl/interface";
 import Units from "../units";
 import ActTable from "../table/act-table";
 import HCDataSource from "../tmpl/hc-data-source";
@@ -38,6 +38,7 @@ const Index = (props: Props) => {
     const [viewSourceId, setViewSourceId] = useState<string>();
     const [editSourceId, setEditSourceId] = useState<string>();
     const [userPageConfig, setUserPageConfig] = useState<{ [key: string]: any }>();
+    const [themeConfig, setThemeConfig] = useState<ThemeConfig>();     // 主题配置信息
     const { sourceId } = useParams();
     const { search } = useLocation();
     const { translate } = useLocale();
@@ -60,11 +61,17 @@ const Index = (props: Props) => {
     };
 
     // 获取用户页面配置
-    const getUserPageConfig = () => {
-        const config = Units.getUserPageConfig(sourceId);
+    const getUserPageConfig = async () => {
+        const config = await Units.getUserPageConfig(sourceId);
         setUserPageConfig(config);
     };
 
+    // 获取全局主题配置
+    const getThemeConfig = async () => {
+        const theme: ThemeConfig = await Units.getThemeConfig();
+        setThemeConfig(theme);
+    }
+
     // 设置用户页面配置
     const handleSetUserPageConfig = (config: { [key: string]: any }) => {
         const temConfig = Units.setUserPageConfig(sourceId, config);
@@ -81,6 +88,7 @@ const Index = (props: Props) => {
         if (sourceId) {
             getLtmplConfig();
             getUserPageConfig();
+            getThemeConfig();
         }
     }, [sourceId]);
 
@@ -204,6 +212,7 @@ const Index = (props: Props) => {
             userPageConfig={userPageConfig}
             setUserPageConfig={handleSetUserPageConfig}
             resetUserPageConfig={resetUserPageConfig}
+            allowUserConfig={themeConfig?.allowUserConfig}
         />;
     };
 

package/src/aldehyde/table/act-table.tsx

@@ -1,12 +1,12 @@
 import React, { ReactNode } from "react";
 import {
   Button, Card, Checkbox, Col, Divider, Popover, Row, Space, Drawer, Tooltip,
-  message, Layout, Table, Form as AntdForm, FormInstance, Modal, Input, Alert, Tabs, Radio
+  message, Layout, Table, Form as AntdForm, FormInstance, Modal, Input, Alert, Tabs, Radio, Typography
 } from "antd";
 import {
   ExportOutlined, FundOutlined, LineChartOutlined,
   PlusCircleOutlined, PlusOutlined, ReloadOutlined, RetweetOutlined, SearchOutlined,
-  TableOutlined, ImportOutlined, SyncOutlined
+  TableOutlined, ImportOutlined
 } from "@ant-design/icons";
 import "./index.css";
 import {
@@ -35,8 +35,11 @@ import ReportTable from "./report-table";
 import EntryControl from "../controls/entry-control";
 import DraggableModal from "../module/draggable-modal";
 import Icon from "../icon/aliIcon";
+import PageConfigButton from "./page-config-button";
 
 const { Content, Sider } = Layout;
+const { Text } = Typography;
+
 type Level = "l1" | "l2";
 
 const enumTypes = ["select", "multiselect", "texttags", "checkbox", "radio", "steps"];
@@ -75,6 +78,7 @@ interface ActTableProps extends TmplBaseProps {
   userPageConfig?: { [key: string]: any }; // 用户页面配置本地缓存
   setUserPageConfig?: (config: { [key: string]: any }) => void; // 更新用户页面配置本地缓存
   resetUserPageConfig?: () => void; // 重置用户页面配置本地缓存
+  allowUserConfig?: boolean; // 是否可用户自定义配置
 }
 
 interface ActTableStat {
@@ -484,7 +488,7 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
   }
 
   async componentDidUpdate(prevProps, prevState) {
-    const { sourceId, criteriaData, ltmplConfig, tableType, pageSize, pageNo, userPageConfig } = this.props;
+    const { sourceId, criteriaData, ltmplConfig, tableType, pageSize, pageNo, userPageConfig, defShowType } = this.props;
     // const {userCriteriaData:preUserCriteriaData}=prevState;
     const { userCriteriaData } = this.state;
     const { translate } = this.context;
@@ -492,6 +496,7 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
       ltmplConfig: preLtmplConfig,
       criteriaData: preCriteriaData,
       sourceId: preSourceId, pageSize: prePageSize, pageNo: prePageNo,
+      userPageConfig: preUserPageConfig
     } = prevProps;
     if (!this.isSameSourceQuery(sourceId, criteriaData)) {
       return false;
@@ -503,6 +508,9 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
         userCriteriaData: criteriaData,
       })
     }
+    if (!preUserPageConfig && userPageConfig) {
+      this.setState({ viewModels: userPageConfig?.["viewModels"] || [defShowType || ltmplConfig?.showType || "table"] });
+    }
     let { hiddenColIds, sortedColConfigs } = this.state;
     let currentQueryParams = ProgramConfig.transQueryParamsToStr(criteriaData, false, [
       "pageSize",
@@ -913,14 +921,38 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
     resetUserPageConfig();
   }
 
+  // 更新当前页面配置
+  handleUpdateUserPageConfig = (val: { [key: string]: any }) => {
+    const { sortedColIds, hiddenColIds, viewModels, criteriaData } = val;
+    const { setUserPageConfig, ltmplConfig, tableType, defShowType, menuId } = this.props;
+    const { userCriteriaData } = this.state;
+    const { translate } = this.context;
+    let sortedColConfigs = undefined;
+    if (ltmplConfig) {
+      sortedColConfigs = tableType === 'report' ? ltmplConfig.columns : [
+        { id: "10000", title: translate("${排序}"), originalId: "10000" },
+        { id: "20000", title: translate("${隐藏}"), originalId: "20000" },
+        ...ltmplConfig.columns,
+      ];
+    }
+    if (sortedColIds) { // 页面配置更新列排序
+      sortedColConfigs.sort((a, b) => sortedColIds.indexOf(a.id) - sortedColIds.indexOf(b.id));
+    }
+    // 旧过滤参数设置为空
+    const oldParms = Object.keys(userCriteriaData || {}).reduce((total, item) => { total[item] = ""; return total; }, {});
+    this.actTableDoSearch({ ...oldParms, ...(criteriaData || { menuId }) });
+    this.setState({ userCriteriaData: criteriaData, viewModels: viewModels || [defShowType || ltmplConfig.showType || "table"], hiddenColIds: hiddenColIds || defaultDisabledColIds, sortedColConfigs });
+    setUserPageConfig({ ...val, criteriaData: undefined });
+  }
+
   renderHeaderButtons = () => {
     let {
       hiddenColIds, viewModels, sortedColConfigs, disabledColIds, showL2Chart,
-      showL2ActTable, restatParams,
+      showL2ActTable, restatParams, userCriteriaData
     } = this.state;
     const {
       ltmplConfig, sourceId, doCreate, doSearch, menuId,
-      funcMode, customCreatable, serverKey, readOnly, userPageConfig
+      funcMode, customCreatable, serverKey, readOnly, userPageConfig, allowUserConfig
     } = this.props;
     const { translate } = this.context;
     let { buttons } = ltmplConfig;
@@ -929,13 +961,7 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
     return (
       <>
         <Space>
-          {userPageConfig ? // 本地缓存重置按钮
-            <Tooltip title={translate("${重置}")}>
-              <Button onClick={() => this.handleResetUserPageConfig()}>
-                <SyncOutlined />
-              </Button>
-            </Tooltip>
-            : ""}
+          {userPageConfig && allowUserConfig ? <PageConfigButton menuCode={menuId} handleResetUserPageConfig={this.handleResetUserPageConfig} handleUpdateUserPageConfig={this.handleUpdateUserPageConfig} userCriteriaData={userCriteriaData} /> : ""}
           {funcMode == "common" && this.criteriaFormUseful() ? (
             <Popover trigger="click" content={this.renderCriteriaForm()}>
               <Button>
@@ -1401,7 +1427,12 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
           <div style={{ width: "calc(100% - 40px)" }}>
             <p className="title">{item.fieldTitle}</p>
             <div className="value">
-              <span className="number">{item.value}</span>
+              <Text
+                style={{ maxWidth: "100%" }}
+                ellipsis={{ tooltip: item.value }}
+              >
+                <span className="number">{item.value}</span>
+              </Text>
               {dataUnit ? <span className="unit">{dataUnit}</span> : ""}
             </div>
           </div>