aldehyde 0.2.283 → 0.2.285

package/src/aldehyde/controls/entity-select/entity-select.tsx

@@ -26,9 +26,6 @@ import DtmplCustomEditModalPage from "../../custom-page/dtmpl-custom-edit-modal-
 import { LtmplModal } from "../../index";
 import { LocaleContext } from "../../locale/LocaleProvider";
 import Rfield from "../rfield";
-import {maxBy} from "lodash";
-import {LegacyRef} from "react";
-import {sync} from "resolve";
 
 interface InnerEntitySelectProps extends EControlProps {
   maxSelected?: number;
@@ -65,8 +62,8 @@ type OptionCache = {
 };
 
 type LoadDataSource = {
-  options: any[];
-  touchEnd: boolean;
+  options?: any[];
+  touchEnd?: boolean;
 };
 
 export default class EntitySelect extends React.PureComponent<
@@ -112,15 +109,12 @@ export default class EntitySelect extends React.PureComponent<
           <>
             <Divider style={{ margin: "8px 0" }} />
             <Row justify={"end"}>
-
               <Col>
            <Space align={"end"}>
               {actions && actions.indexOf("table") >= 0 ? (
                   <Button
-                    // type="text"
                     icon={<TableOutlined style={{ color: "#0958d9" }} />}
                     onClick={() => this.showTable()}
-                    // onClick={() => this.showTable()}
                   ></Button>
               ) : null}
               {actions && actions.indexOf("add") >= 0 ? (
@@ -465,13 +459,16 @@ export default class EntitySelect extends React.PureComponent<
       );
 
       let sourceData = await this.loadData(queryKey.key, pageInfo, titleId);
-      let expSourceData:LoadDataSource={...sourceData};
+      if(!sourceData){
+        sourceData={}
+      }
+      let expSourceData:LoadDataSource=sourceData?{...sourceData}:{};
 
-      while(!expSourceData.touchEnd && sourceData.options?.length <10){
+      while(!expSourceData.touchEnd && sourceData?.options?.length <10){
         pageInfo={...pageInfo,pageNo:pageInfo.pageNo+1}
         expSourceData = await this.loadData(queryKey.key,pageInfo, titleId);
-        sourceData.touchEnd=expSourceData.touchEnd;
-        sourceData.options=[...sourceData.options,...expSourceData.options];
+        sourceData.touchEnd=expSourceData?.touchEnd;
+        sourceData.options=[...sourceData.options,...expSourceData?.options];
       }
 
       optionCache = {
@@ -573,8 +570,11 @@ export default class EntitySelect extends React.PureComponent<
     );
     let titles=[];
     let options: object[] = [];
-    pageInfo = queryData.pageInfo;
-    if(queryData.entities){
+    if(!queryData){
+      return;
+    }
+    pageInfo = queryData?.pageInfo;
+    if(queryData?.entities){
       queryData.entities.forEach((item, index) => {
         let title = item.fieldMap[titleId];
         //放入全局对象缓存
@@ -605,7 +605,7 @@ export default class EntitySelect extends React.PureComponent<
       });
     }
 
-    return { options, touchEnd: queryData.touchEnd };
+    return { options, touchEnd: queryData?.touchEnd };
   };
 
   debounceFetcher = () => {

package/src/aldehyde/controls/entry-control.tsx

@@ -22,6 +22,7 @@ import TreeEntitySelect from "./tree-select/tree-entity-select";
 import FileView from "./file-view";
 import MultiFileUpload from "./upload/mult-file-upload";
 import NavigationTree from "./tree-select/navigation-tree";
+import EllipsisText from "./text/ellipsis-text";
 
 // const CheckboxGroup = Checkbox.Group;
 const RadioGroup = Radio.Group;
@@ -372,6 +373,17 @@ function renderControl(
     case "field-history": //
       entryControl = <FieldHistory {...controlProps} ></FieldHistory>;
       break;
+    case "text-view":
+      entryControl = (
+          <EllipsisText
+              isHtml={false}
+              value={fieldValue}
+              showMax={
+                fieldConfig.ellipsisLength ? fieldConfig.ellipsisLength : 28
+              }
+          ></EllipsisText>
+      );
+      break;
     default:
       entryControl = unSupportControl;
       break;

package/src/aldehyde/controls/select/index.tsx

@@ -180,6 +180,7 @@ export default class Select extends React.PureComponent<
                 );
                 break;
             case "radio":
+                debugger
                 entryControl = (
                     <RadioGroup
                         {...antdControlProps}

package/src/aldehyde/controls/view-control.tsx

@@ -143,6 +143,7 @@ function renderControl(
         break;
       case "text":
       case "textarea":
+      case "text-view":
       case "preselect":
         if (holderType == "table") {
           viewControl = (

package/src/aldehyde/detail/view/act-dtmpl-view.tsx

@@ -1,11 +1,7 @@
 import React from "react";
 import {Button, Card, Form as AntdForm, FormInstance, message, Tooltip} from "antd";
-import {DtmplBaseProps, DtmplConfig, DtmplData, FieldConfig} from "../../tmpl/interface";
-import {
-    ReloadOutlined,
-    ScheduleOutlined,
-    EditOutlined,
-} from "@ant-design/icons";
+import {DtmplBaseProps, DtmplConfig, DtmplData} from "../../tmpl/interface";
+import {EditOutlined, ReloadOutlined, ScheduleOutlined,} from "@ant-design/icons";
 import HCDataSource from "../../tmpl/hc-data-source";
 import "../dtmpl.css";
 import SnapshotTimeline from "./snapshot-timeline";
@@ -30,7 +26,7 @@ export interface ActDtmplViewStat {
     snapshotOpen?: boolean;
     layout?: object;
     refreshCode?: string;
-    actionDtmplData?:DtmplData;
+    actionDtmplData?: DtmplData;
 }
 
 class ActDtmplView extends React.PureComponent<
@@ -56,11 +52,11 @@ class ActDtmplView extends React.PureComponent<
             wrapperCol: {span: 16},
         },
         refreshCode: undefined,
-        actionDtmplData:undefined,
+        actionDtmplData: undefined,
     };
 
     async componentDidMount() {
-        const {sourceId,code, serverKey} = this.props;
+        const {sourceId, code, serverKey} = this.props;
         let dtmplConfig = await HCDataSource.requestViewDtmplConfig(
             serverKey,
             sourceId
@@ -73,14 +69,14 @@ class ActDtmplView extends React.PureComponent<
         });
     }
 
-    loadActionDtmplData = async (dtmplConfig:DtmplConfig) => {
-        let actionDtmplData=undefined;
-        const {sourceId,code, serverKey} = this.props;
-        if(dtmplConfig?.viewActions && dtmplConfig?.viewActions.length>0){
+    loadActionDtmplData = async (dtmplConfig: DtmplConfig) => {
+        let actionDtmplData = undefined;
+        const {sourceId, code, serverKey} = this.props;
+        if (dtmplConfig?.viewActions && dtmplConfig?.viewActions.length > 0) {
             actionDtmplData = await HcserviceV3.requestViewDtmplData(
                 serverKey,
                 sourceId,
-                code,null
+                code, null
             );
         }
         this.setState({
@@ -120,7 +116,7 @@ class ActDtmplView extends React.PureComponent<
         this.setState({
             loading: true,
         });
-        const { sourceId, code, serverKey } = this.props;
+        const {sourceId, code, serverKey} = this.props;
         if (code) {
             //有code是修改，没有是新增实体模板
             values["唯一编码"] = code;
@@ -135,22 +131,22 @@ class ActDtmplView extends React.PureComponent<
             loading: false,
         });
         if (res.status === "success") {
-            if(this.props.goBackToLtmpl){
+            if (this.props.goBackToLtmpl) {
                 this.props.goBackToLtmpl();
-            }else{
+            } else {
                 this.doRefresh();
             }
         }
     };
 
     doSubmit = (actionId?: number, codes?: string[], params?: object) => {
-        const { mainCode } = this.props;
+        const {mainCode} = this.props;
 
         //if (actionId) {
-        this.formRef.current.setFieldsValue({ actionId: actionId });
+        this.formRef.current.setFieldsValue({actionId: actionId});
         // }
         if (mainCode) {
-            this.formRef.current.setFieldsValue({ mainCode: mainCode });
+            this.formRef.current.setFieldsValue({mainCode: mainCode});
         }
         if (params) {
             this.formRef.current.setFieldsValue(params);
@@ -176,12 +172,15 @@ class ActDtmplView extends React.PureComponent<
             loading,
             layout,
             snapshotOpen,
-            refreshCode,actionDtmplData,
+            refreshCode, actionDtmplData,
         } = this.state;
         const {translate} = this.context;
 
         const buttons = dtmplConfig ? dtmplConfig.buttons : undefined;
         const premises = dtmplConfig ? dtmplConfig.premises : undefined;
+
+        const detailTitle = title ? title : dtmplConfig && dtmplConfig.title ? dtmplConfig.title : "详情";
+
         let showRightNav_ = showRightNav;
         if (dtmplConfig && dtmplConfig.groups.length < 4) {
             showRightNav_ = false;
@@ -195,12 +194,12 @@ class ActDtmplView extends React.PureComponent<
                 {showHeader ? (
                     <Card
                         variant={"borderless"}
-                         size={"small"}
+                        size={"small"}
                         key={"detailTitle"}
                         className="hoverable pageHeader"
                     >
                         <h3>
-                            {translate("${" + (title ? title : "详情") + "}")}
+                            {translate("${" + detailTitle + "}")}
                             {dtmplConfig ? <ToolTipBar content={dtmplConfig.tip}/> : null}
                             <div className="fr">
                                 {buttons &&

package/src/aldehyde/detail/view/dtmpl-view.tsx

@@ -241,7 +241,7 @@ class DtmplView extends React.PureComponent<DtmplViewProps, DtmplViewStat> {
             key={item.id}
             id={id + item.id}
             className="hoverable"
-            headStyle={{ background: "#f2f4f5" }}
+            styles={{header:{ background: "#f2f4f5" }}}
             loading={loading}
           >
             <FieldViewGroup column={maxColsOnRow} dataCode={dtmplData ? dtmplData.code:null}

package/src/aldehyde/form/form-Item-group.tsx

@@ -85,7 +85,6 @@ export default class FormItemGroup extends React.PureComponent<
 
     let labelColSpan=24;
     let wrapperColSpan=24;
-    debugger
     if(layout==="vertical"){
       labelColSpan=24;
       wrapperColSpan=24;

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

@@ -1,14 +1,21 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
-import lodash from 'lodash';
+import _ from 'lodash';
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import { DataConfigProps } from "../data";
 
 const defOption = {
+    title: {
+        text: '暂无数据',
+        left: 'center',
+        top: 'middle',
+        show: false, // 无数据时显示
+    },
     tooltip: { trigger: "axis" },
     grid: { top: 30, let: 30, right: 20, bottom: 30 },
     yAxis: {
         type: 'category',
         boundaryGap: true,
-        data: ['1990', '1991', '1992', '1993', '1994', '1995', '1996'],
     },
     xAxis: {
         type: 'value',
@@ -18,7 +25,7 @@ const defOption = {
     barMaxWidth: 30,
     series: [
         {
-            data: [525, 459, 357, 414, 234, 250, 156],
+            data: [[525, "1990"], [459, "1991"], [357, "1992"], [414, "1993"], [234, "1994"], [250, "1995"], [156, "1996"]],
             type: 'bar',
         }
     ]
@@ -35,7 +42,26 @@ const legends = {
     rightBottom: { right: 5, bottom: 0 },
 };
 
-export interface ChartComponentStyle {
+// 处理数据格式
+const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[]) => {
+    if (!data?.length) {
+        return [];
+    }
+    const temData = data.map((r) => {
+        const { config, value } = r;
+        const vNames = Object.keys(config).filter((r) => r.startsWith("v")).sort((a, b) => parseInt(a.substring(1)) - parseInt(b.substring(1)));
+        return {
+            name: config.d1,
+            data: vNames.map((r) => ({
+                name: config[r],
+                data: value.map((v) => [v[r], v["d1"]]),
+            }))
+        };
+    });
+    return temData[0]?.data || [];
+};
+
+export interface ComponentStyle {
     tooltip?: { show: boolean };
     color?: string[];
     grid?: { top: number, let: number, right: number, bottom: number };
@@ -45,27 +71,42 @@ export interface ChartComponentStyle {
     barMaxWidth?: number;
 }
 
-export interface ChartComponentProps {
-    style?: ChartComponentStyle;
-    base: { width: number, height: number }
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base: { width: number, height: number },
+    data?: DataConfigProps;
+    isDesignMode?: boolean; // 是否编辑模式
 }
 
-export interface BaseTextComponentRef {
-    updateConfig: (newConfig: ChartComponentProps) => void;
+export interface ComponentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+    destroy: () => void;
 }
 
-const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<BaseTextComponentRef>) => {
-    const [config, setConfig] = useState<ChartComponentStyle>(props.style || {});
-    const [size, setSize] = useState<{ width: number, height: number }>()
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const { style, data: propsData, isDesignMode } = props;
+    const [config, setConfig] = useState<ComponentStyle>(style || {});
+    const [size, setSize] = useState<{ width: number, height: number }>();
+    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
+    const [data, setData] = useState<{ name: string, data: any }[]>([]);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
+    const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
+
+    const handleDestroy = () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        window.removeEventListener('resize', handleResize);
+        chart.current.dispose();
+    };
 
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
-            const { base, style } = newConfig;
-            setConfig({ ...(style || {}) });
+            const { base, style: newStyle, data: newDataConfig } = newConfig;
+            setConfig({ ...(newStyle || {}) });
             setSize({ width: base.width, height: base.height });
+            setDataConfig(newDataConfig);
         },
+        destroy: handleDestroy,
     }));
 
     // 窗口大小变化时重新调整图表大小
@@ -77,21 +118,61 @@ const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<BaseText
         chart.current = echarts.init(chartRef.current);
         window.addEventListener('resize', handleResize);
         return () => {
-            window.removeEventListener('resize', handleResize);
-            chart.current.dispose();
+            handleDestroy();
         }
     }, []);
 
+
+    // 请求数据
+    const getData = async () => {
+        const { entities: { config, value } } = await HydrocarbonService.requestMstrucLtmplQueryTop(null, dataConfig?.sourceId, null) || {};
+        const temData = handleData(value);
+        setData(temData);
+        return config;
+    };
+
+    // 初始化请求数据
+    const getInitData = async () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        const config = await getData();
+        if (config?.requestType === "polling") {
+            pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
+        }
+    };
+
+    // 静态数据处理
+    useEffect(() => {
+        if (dataConfig?.sourceType === 'staticData') {
+            setData(handleData(dataConfig.staticData));
+        }
+    }, [dataConfig?.sourceType, dataConfig?.staticData]);
+
+    /**
+     * 数据源数据请求
+     * 1、编辑态不请求数据
+     */
+    useEffect(() => {
+        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId) {
+            getInitData();
+        } else if (dataConfig?.sourceType === 'sourceId') {
+            setData([]);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.sourceId]);
+
     const renderChart = () => {
         const { grid, barMaxWidth, legend, tooltip, color, xAxis, yAxis, } = config
-        const option = lodash.cloneDeep(defOption);
+        const option = _.cloneDeep(defOption);
+        // 编辑态无数据显示默认数据
+        const temData = isDesignMode && !data?.length ? option.series : data;
         option.barMaxWidth = barMaxWidth;
         option.grid = grid;
         option.legend = { ...legend, ...legends[legend?.position] };
         option.tooltip = { trigger: "axis", ...tooltip };
         option.xAxis = { ...option.xAxis, ...xAxis, axisTick: { show: xAxis?.axisLine?.show } };
         option.yAxis = { ...option.yAxis, ...yAxis };
-        option.series = option.series.map((r, index) => ({
+        option.title.show = !temData?.length;
+        option.series = temData.map((r, index) => ({
+            type: "bar",
             ...r,
             itemStyle: { color: color[index] },
         }));
@@ -101,7 +182,7 @@ const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<BaseText
         if (config) {
             renderChart();
         }
-    }, [config]);
+    }, [config, data]);
 
     useEffect(() => {
         if (size) {

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

@@ -2,10 +2,13 @@ import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
 import chinaJson from "../assets/china.json";
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import { DataConfigProps } from "../data";
 
 const defOption = {
     tooltip: {
         trigger: 'item',
+        formatter: (val) => val.data
     },
     geo: {
         show: true,
@@ -39,33 +42,67 @@ const defOption = {
     ]
 };
 
+// 处理数据格式
+const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[]) => {
+    if (!data?.length) {
+        return [];
+    }
+    const temData = data.map((r) => {
+        const { config, value } = r;
+        const vNames = Object.keys(config).filter((r) => r.startsWith("v")).sort((a, b) => parseInt(a.substring(1)) - parseInt(b.substring(1)));
+        return {
+            name: config.d1,
+            data: vNames.map((r) => ({
+                name: config[r],
+                value: value[0]?.[r],
+            }))
+        };
+    });
+    return temData[0]?.data || [];
+};
+
 
-export interface ChartComponentStyle {
+export interface ComponentStyle {
     tooltip?: { show: boolean };
     geo?: { [key: string]: any };
 }
 
-export interface ChartComponentProps {
-    style?: ChartComponentStyle;
-    base: { width: number, height: number }
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base: { width: number, height: number },
+    data?: DataConfigProps;
+    isDesignMode?: boolean; // 是否编辑模式
 }
 
-export interface BaseTextComponentRef {
-    updateConfig: (newConfig: ChartComponentProps) => void;
+export interface ComponentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+    destroy: () => void;
 }
 
-const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<BaseTextComponentRef>) => {
-    const [config, setConfig] = useState<ChartComponentStyle>(props.style || {});
-    const [size, setSize] = useState<{ width: number, height: number }>()
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const { style, data: propsData, isDesignMode } = props;
+    const [config, setConfig] = useState<ComponentStyle>(style || {});
+    const [size, setSize] = useState<{ width: number, height: number }>();
+    const [dataConfig, setDataConfig] = useState<DataConfigProps>({ ...propsData }); // 数据源配置
+    const [data, setData] = useState<{ name: string, value: number[] }[]>([]);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
+    const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
+
+    const handleDestroy = () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        window.removeEventListener('resize', handleResize);
+        chart.current.dispose();
+    };
 
     useImperativeHandle(ref, () => ({
         updateConfig: (newConfig) => {
-            const { base, style } = newConfig;
-            setConfig({ ...(style || {}) });
+            const { base, style: newStyle, data: newDataConfig } = newConfig;
+            setConfig({ ...(newStyle || {}) });
             setSize({ width: base.width, height: base.height });
+            setDataConfig(newDataConfig);
         },
+        destroy: handleDestroy,
     }));
 
     // 窗口大小变化时重新调整图表大小
@@ -78,23 +115,65 @@ const Index = forwardRef((props: ChartComponentProps, ref: ForwardedRef<BaseText
         chart.current = echarts.init(chartRef.current, null, { renderer: 'svg' });
         window.addEventListener('resize', handleResize);
         return () => {
-            window.removeEventListener('resize', handleResize);
-            chart.current.dispose();
+            handleDestroy();
         }
     }, []);
 
+    // 请求数据
+    const getData = async () => {
+        const { entities: { config, value } } = await HydrocarbonService.requestMstrucLtmplQueryTop(null, dataConfig?.sourceId, null) || {};
+        setData(handleData(value));
+        return config;
+    };
+
+    // 初始化请求数据
+    const getInitData = async () => {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+        const config = await getData();
+        if (config?.requestType === "polling") {
+            pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
+        }
+    };
+
+    // 静态数据处理
+    useEffect(() => {
+        if (dataConfig?.sourceType === 'staticData') {
+            setData(dataConfig.staticData || []);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.staticData]);
+
+    /**
+     * 数据源数据请求
+     * 1、编辑态不请求数据
+     */
+    useEffect(() => {
+        if (!isDesignMode && dataConfig?.sourceType === 'sourceId' && dataConfig?.sourceId) {
+            getInitData();
+        } else if (dataConfig?.sourceType === 'sourceId') {
+            setData([]);
+        }
+    }, [dataConfig?.sourceType, dataConfig?.sourceId]);
+
     const renderChart = () => {
         const { tooltip, geo } = config
         const option = _.cloneDeep(defOption);
-        option.tooltip = { trigger: "item", ...tooltip };
+        option.tooltip = {
+            trigger: "item",
+            formatter: (val) => {
+                const { data: { name, value } } = val || {};
+                return `${name}：${value || value == 0 ? value : "-"}`;
+            },
+            ...tooltip
+        };
         option.geo = { ...option.geo, ...geo, ...geo.normal };
+        option.series = option.series.map((item) => ({ ...item, data: data || [] }));
         chart.current.setOption(option, true);
     }
     useEffect(() => {
         if (config) {
             renderChart();
         }
-    }, [config]);
+    }, [config, data]);
 
     useEffect(() => {
         if (size) {

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

@@ -0,0 +1,59 @@
+.base-table {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  .base-table-empty {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  table {
+    width: 100%;
+    text-align: center;
+    table-layout: fixed;
+
+    thead {
+      position: relative;
+      z-index: 1;
+
+      th {
+        padding: 0 4px;
+      }
+    }
+
+
+    .scroll-body {
+      overflow: hidden;
+      animation: scroll 10s linear infinite;
+
+      td {
+        padding: 0 4px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  table:hover {
+    .scroll-body {
+      animation-play-state: paused !important;
+    }
+  }
+
+}
+
+
+@keyframes scroll {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(-100%);
+  }
+}