aldehyde 0.2.99 → 0.2.100

package/src/aldehyde/controls/collapse-card/index.tsx

@@ -1,67 +1,109 @@
-import * as React from 'react'
-import {Button, Card} from 'antd'
-import './index.css'
-import {DownOutlined, RightOutlined} from '@ant-design/icons';
-import {CardProps} from "antd/lib/card";
+import * as React from "react";
+import { Button, Card } from "antd";
+import "./index.css";
+import { DownOutlined, RightOutlined } from "@ant-design/icons";
+import { CardProps } from "antd/lib/card";
 import ToolTipBar from "../../detail/tooltipbar";
+import { LocaleContext } from "../../locale/LocaleProvider";
 
 interface CollapseCardProps extends CardProps {
-    initCollapse?: boolean,
-    tip?:any,
-    showRightNav?:boolean,
-};
+  initCollapse?: boolean;
+  tip?: any;
+  showRightNav?: boolean;
+}
 
 interface CollapseCardState {
-    collapse?: boolean,
-};
-export default class CollapseCard extends React.PureComponent<CollapseCardProps, CollapseCardState> {
-
-    state = {
-        collapse: false,
-    }
+  collapse?: boolean;
+}
+export default class CollapseCard extends React.PureComponent<
+  CollapseCardProps,
+  CollapseCardState
+> {
+  state = {
+    collapse: false,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
 
-    componentDidMount() {
-        const {initCollapse} = this.props;
-        this.setState({
-            collapse: initCollapse,
-        })
-    }
+  componentDidMount() {
+    const { initCollapse } = this.props;
+    this.setState({
+      collapse: initCollapse,
+    });
+  }
 
-    componentDidUpdate(prevProps) {
-        const {initCollapse} = this.props;
-        if (this.props != prevProps) {
-            this.setState({
-                collapse: initCollapse,
-            })
-        }
+  componentDidUpdate(prevProps) {
+    const { initCollapse } = this.props;
+    if (this.props != prevProps) {
+      this.setState({
+        collapse: initCollapse,
+      });
     }
+  }
 
-    cardTitle = () => {
-        const {title,tip} = this.props;
-        const {collapse} = this.state;
-        if(!title || 'null'==title){//没title不显示card 头 ，同时不支持伸缩。
-            return null;
-        };
-        let titleBegin=null;
-        if (collapse) {
-            titleBegin= <Button type="text" onClick={() => {
-                this.setState({collapse: false})
-            }}><RightOutlined/>{title}</Button>
-        } else {
-            titleBegin= <Button type="text" onClick={() => {
-                this.setState({collapse: true})
-            }}><DownOutlined/>{title}</Button>
-        }
-        return <>{titleBegin}<ToolTipBar content={tip}></ToolTipBar></>;
+  cardTitle = () => {
+    const { title, tip } = this.props;
+    const { collapse } = this.state;
+    const { translate } = this.context;
+    if (!title || "null" == title) {
+      //没title不显示card 头 ，同时不支持伸缩。
+      return null;
     }
-
-    render() {
-        const {collapse} = this.state;
-            const { extra, title, className,initCollapse,showRightNav, ...other } = this.props;
-        return <Card {...other}  size={'small'} extra={collapse ? "" : extra} style={{width:showRightNav?"90%":'100%'}}
-                     className={`${className} ${collapse ? 'collapse' : ""}`} title={this.cardTitle()}>
-            {collapse ? null : this.props.children}
-        </Card>;
+    let titleBegin = null;
+    if (collapse) {
+      titleBegin = (
+        <Button
+          type="text"
+          onClick={() => {
+            this.setState({ collapse: false });
+          }}
+        >
+          <RightOutlined />
+          {translate("${" + title + "}")}
+        </Button>
+      );
+    } else {
+      titleBegin = (
+        <Button
+          type="text"
+          onClick={() => {
+            this.setState({ collapse: true });
+          }}
+        >
+          <DownOutlined />
+          {translate("${" + title + "}")}
+        </Button>
+      );
     }
+    return (
+      <>
+        {titleBegin}
+        <ToolTipBar content={tip}></ToolTipBar>
+      </>
+    );
+  };
 
+  render() {
+    const { collapse } = this.state;
+    const {
+      extra,
+      title,
+      className,
+      initCollapse,
+      showRightNav,
+      ...other
+    } = this.props;
+    return (
+      <Card
+        {...other}
+        size={"small"}
+        extra={collapse ? "" : extra}
+        style={{ width: showRightNav ? "90%" : "100%" }}
+        className={`${className} ${collapse ? "collapse" : ""}`}
+        title={this.cardTitle()}
+      >
+        {collapse ? null : this.props.children}
+      </Card>
+    );
+  }
 }

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

@@ -18,6 +18,7 @@ import Units from "../units";
 import { ProgramConfig, useLocale } from "../index";
 import { LockOutlined } from "@ant-design/icons";
 import DatePicker from "./date-picker";
+import translate from "../locale/translate";
 
 const CheckboxGroup = Checkbox.Group;
 const RadioGroup = Radio.Group;
@@ -78,7 +79,7 @@ function getOptions(mstrucId) {
           parseInt(item.order) > 0 &&
           parseInt(item.order) < 10000
             ? item.order + "."
-            : "") + item.title,
+            : "") + translate("${" + item.title + "}"),
         value: item.value,
       });
     });

package/src/aldehyde/detail/button/fix-right-submit-button-bar.tsx

@@ -125,7 +125,7 @@ class FixRightSubmitButtonBar extends React.PureComponent<
                   key="btn"
                   block
                 >
-                  保 存
+                  {translate("${保存}")}
                 </Button>
               </li>
             ) : (

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

@@ -131,7 +131,7 @@ class ActDtmplView extends React.PureComponent<
             className="hoverable pageHeader"
           >
             <h3>
-              {title ? title : translate("${详情}")}
+              {translate("${" + (title ? title : "详情") + "}")}
               {dtmplConfig ? <ToolTipBar content={dtmplConfig.tip} /> : null}
               <div className="fr">
                 {buttons &&

package/src/aldehyde/detail/view/field-view-group.tsx

@@ -1,59 +1,74 @@
-import React from 'react'
-import {Col,Row,Descriptions} from 'antd';
-import {FieldConfig, FieldGroupConfig} from "../../tmpl/interface";
-import ViewControl from '../../controls/view-control';
-
+import React from "react";
+import { Col, Row, Descriptions } from "antd";
+import { FieldConfig, FieldGroupConfig } from "../../tmpl/interface";
+import ViewControl from "../../controls/view-control";
+import { LocaleContext } from "../../locale/LocaleProvider";
 
 interface FieldViewGroupProps {
-    serverKey?:string,
-    fields: FieldConfig[],
-    valueMap?: object,
-    width?: number,
-};
+  serverKey?: string;
+  fields: FieldConfig[];
+  valueMap?: object;
+  width?: number;
+}
 
 interface FieldViewGroupState {
-    fileList: any,
-};
+  fileList: any;
+}
 
-export default class FieldViewGroup extends React.PureComponent<FieldViewGroupProps, FieldViewGroupState> {
+export default class FieldViewGroup extends React.PureComponent<
+  FieldViewGroupProps,
+  FieldViewGroupState
+> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      fileList: [],
+    };
+  }
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
 
-    constructor(props) {
-        super(props);
-        this.state = {
-            fileList: [],
-        }
-    }
-
-    initViewList = () => {
-        const {fields, valueMap,serverKey} = this.props
-        const formItemList = [];
+  initViewList = () => {
+    const { fields, valueMap, serverKey } = this.props;
+    const { translate } = this.context;
+    const formItemList = [];
 
-        if (fields.length > 0) {
-            fields.forEach((item, index) => {
-                const title = item.title;
-                let fieldValue = valueMap?valueMap[item.id]:undefined;
-                //fieldValue 没有值时不能为null 要为 undefined。antd input所限制
-                fieldValue = fieldValue ? fieldValue : item.defaultValue ? item.defaultValue : undefined;
-                const fieldKey = item.id + Math.random() * 100;
+    if (fields.length > 0) {
+      fields.forEach((item, index) => {
+        const title = item.title;
+        let fieldValue = valueMap ? valueMap[item.id] : undefined;
+        //fieldValue 没有值时不能为null 要为 undefined。antd input所限制
+        fieldValue = fieldValue
+          ? fieldValue
+          : item.defaultValue
+          ? item.defaultValue
+          : undefined;
+        const fieldKey = item.id + Math.random() * 100;
 
-                if(item.extControlType !='hidden' && !item.hidden){
-                    const formItem = <Descriptions.Item   label={item.title} span={item.colNum} key={index}
-                                                         className='labelcss'
-                    >
-                        <ViewControl serverKey={serverKey} holderType={'descriptions'} value={fieldValue} fieldConfig={item}/>
-                    </Descriptions.Item>
-                    formItemList.push(formItem);
-                }
-            });
+        if (item.extControlType != "hidden" && !item.hidden) {
+          const formItem = (
+            <Descriptions.Item
+              label={translate("${" + item.title + "}")}
+              span={item.colNum}
+              key={index}
+              className="labelcss"
+            >
+              <ViewControl
+                serverKey={serverKey}
+                holderType={"descriptions"}
+                value={fieldValue}
+                fieldConfig={item}
+              />
+            </Descriptions.Item>
+          );
+          formItemList.push(formItem);
         }
-        return formItemList;
+      });
     }
+    return formItemList;
+  };
 
-    render() {
-        return (
-            <Descriptions column={2}>
-                {this.initViewList()}
-            </Descriptions>
-        )
-    }
+  render() {
+    return <Descriptions column={2}>{this.initViewList()}</Descriptions>;
+  }
 }

package/src/aldehyde/form/criteria-form.tsx

@@ -183,7 +183,7 @@ const CriteriaForm: React.FC<CriteriaFormProps> = (props) => {
 
     let fieldValue = data ? data[drillingColIdsName] : dimensionColIds;
     let antdControlProps = {
-      placeholder: translate("${请选择维度}"),
+      placeholder: translate("${请选择}${维度}"),
       disabled: false,
       value: fieldValue,
       style: { minWidth: 220, width: "100%" },
@@ -231,7 +231,7 @@ const CriteriaForm: React.FC<CriteriaFormProps> = (props) => {
         if (!hiddenCriteriaIds.includes(item.id)) {
           return (
             <FormItem
-              label={item.title}
+              label={translate("${" + item.title + "}")}
               name={formItemName}
               key={item.id}
               tooltip={item.tip}
@@ -240,7 +240,7 @@ const CriteriaForm: React.FC<CriteriaFormProps> = (props) => {
                   ? [
                       {
                         required: true,
-                        message: translate("${请选择}${" + item.title + "}"),
+                        message: translate("${请选择}" + item.title),
                       },
                     ]
                   : undefined

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

@@ -82,7 +82,7 @@ export default class FormItemGroup extends React.PureComponent<
 
     return (
       <FormItem
-        label={item.title}
+        label={translate("${" + item.title + "}")}
         hidden={item.hidden}
         name={item[nameAttr]}
         key={item.id}

package/src/aldehyde/layout/MainPage.tsx

@@ -279,7 +279,7 @@ class MainPage extends React.PureComponent<MainPageProps, MainPageState> {
               collapsed={collapsed}
             >
               <SideBar
-                title={sideBartitle}
+                title={translate("${" + sideBartitle + "}")}
                 logo={sideBarLogo}
                 blockMenu={this.findCurrentBlock()}
                 currentL2MenuId={currentL2MenuId}

package/src/aldehyde/layout/header/index.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from "react";
-import { Col, Layout, Row, theme } from "antd";
+import { Col, Layout, Menu, Row, theme } from "antd";
 import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
 import "./index.css";
 import Block, { BlockProps } from "../menu/block";
@@ -25,7 +25,7 @@ const Header: React.FC<HeaderProps> = (props) => {
     "--antd-color-primary": token.colorPrimary,
   } as CSSProperties;
   return (
-    <AntdHeader style={{ padding: 0, height: "auto" }}>
+    <AntdHeader style={{ padding: 0, height: "auto", minWidth: "1000px" }}>
       {/*<Row  justify="space-around" align="middle" style={{'background':'#0f4da1',height:'100px'}}>*/}
       {/*      <Col span={12}>*/}
       {/*          <img style={{height:'80px'}} src={Logo}></img>*/}
@@ -49,7 +49,7 @@ const Header: React.FC<HeaderProps> = (props) => {
           </div>
           <Block {...props} activeColor={token.colorPrimary} />
         </Col>
-        <Col span={2} style={{ width: "100%" }}>
+        <Col span={1} style={{ width: "100%" }}>
           <L2MenuQuickBar backgroudColor={token.colorPrimary}></L2MenuQuickBar>
         </Col>
         <Col span={1} style={{ width: "100%" }}>
@@ -57,7 +57,7 @@ const Header: React.FC<HeaderProps> = (props) => {
             backgroudColor={token.colorPrimary}
           ></L2MenuMessageBar>
         </Col>
-        <Col span={1}>
+        <Col span={2}>
           <UserBar backgroudColor={token.colorPrimary}></UserBar>
         </Col>
       </Row>

package/src/aldehyde/layout/menu/block.less

@@ -0,0 +1,11 @@
+.menu-item > div {
+  color: var(--antd-color-primary) !important;
+}
+
+.ant-menu > .ant-menu-submenu-selected {
+  background-color: var(--antd-color-primary) !important;
+}
+
+.ant-menu > .ant-menu-submenu-selected > div {
+  color: rgb(255, 255, 255) !important;
+}

package/src/aldehyde/layout/menu/block.tsx

@@ -1,89 +1,149 @@
-import React, {CSSProperties} from "react";
-import { Dropdown, Menu} from 'antd';
-import {BlockMenu} from "../../tmpl/interface";
-import MenuRender from './menu-render';
-
-
-export interface BlockProps{
-    blocks:BlockMenu[];
-    currentBlockId?:string;
-    currentL2MenuId?:string;
-    activeColor?:string;
-}
-interface BlockState{
+import React, { CSSProperties } from "react";
+import { Dropdown, Menu, MenuProps } from "antd";
+import { BlockMenu } from "../../tmpl/interface";
+import MenuRender from "./menu-render";
+import { LocaleContext } from "../../locale/LocaleProvider";
+import "./block.less";
 
+export interface BlockProps {
+  blocks: BlockMenu[];
+  currentBlockId?: string;
+  currentL2MenuId?: string;
+  activeColor?: string;
 }
+interface BlockState {}
 
 class Block extends React.PureComponent<BlockProps, BlockState> {
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+  constructor(props) {
+    super(props);
+  }
 
-    constructor(props) {
-        super(props);
-    }
-
-    getSubMenu = (blockMenu:BlockMenu)=>{
-        return MenuRender.getMenu(blockMenu,null);
-    }
+  getSubMenu = (blockMenu: BlockMenu) => {
+    return MenuRender.getMenu(blockMenu, null);
+  };
 
-    findBlockId = (blocks:BlockMenu[],currentL2MenuId:string) => {
-        let blockId:string=undefined;
-        for(const block of blocks){
-            if(block.l1Menus){
-                for(const menul1 of block.l1Menus){
-                    for(const menul2 of menul1.l2Menus){
-                        if(menul2.id===currentL2MenuId){
-                            blockId=block.id;
-                            return blockId;
-                        }
-                    }
-                }
-            }else{
-                for(const menul1 of block.items){
-                    for(const menul2 of menul1.items){
-                        if(menul2.id===currentL2MenuId){
-                            blockId=block.id;
-                            return blockId;
-                        }
-                    }
-                }
+  findBlockId = (blocks: BlockMenu[], currentL2MenuId: string) => {
+    let blockId: string = undefined;
+    for (const block of blocks) {
+      if (block.l1Menus) {
+        for (const menul1 of block.l1Menus) {
+          for (const menul2 of menul1.l2Menus) {
+            if (menul2.id === currentL2MenuId) {
+              blockId = block.id;
+              return blockId;
             }
-
+          }
+        }
+      } else {
+        for (const menul1 of block.items) {
+          for (const menul2 of menul1.items) {
+            if (menul2.id === currentL2MenuId) {
+              blockId = block.id;
+              return blockId;
+            }
+          }
         }
-        return blockId;
+      }
     }
+    return blockId;
+  };
 
-    render(){
-        const {currentBlockId,blocks,currentL2MenuId,activeColor}=this.props;
+  get computedBlocks() {
+    const { translate } = this.context;
+    const blocks: BlockMenu[] = JSON.parse(JSON.stringify(this.props.blocks));
 
-        const syyy={'--header-block-active-bottom-color':activeColor?activeColor:"#1E90FF",'--header-top-active-background':activeColor?activeColor:"#1E90FF"} as CSSProperties
+    blocks &&
+      Array.isArray(blocks) &&
+      blocks.forEach((block) => {
+        block.title = translate("${" + block.title + "}");
 
-        if(!blocks || blocks.length<1){
-            return <></>;
-        }
-        let blockId=currentBlockId;
-        if(currentL2MenuId && !blockId){
-            blockId=this.findBlockId(blocks,currentL2MenuId);
-        }
-        if(!blockId){
-            blockId=blocks.at(0).id;
-        }
+        const dropdownMenu = block.items;
 
-        return (
-            blocks.map((item, index) => {
-                return <div key={index}
-                            className={`${item.id == blockId ? "active" : ""} header-block`}  style={syyy}>
-                    <Dropdown menu={{ items:this.getSubMenu(item) }}>
-                        <a  className="dropdown-link"
-                            style={item.id == blockId?{color:'#fff'}:{color:activeColor}}
-                            rel="noopener noreferrer"
-                        >
-                            {item.title}
-                        </a>
-                    </Dropdown>
-                </div>
-            })
-        );
+        dropdownMenu &&
+          Array.isArray(dropdownMenu) &&
+          dropdownMenu.forEach((menu) => {
+            menu.title = translate("${" + menu.title + "}");
+          });
+      });
+
+    return blocks;
+  }
+
+  get menuItems() {
+    const blocks = this.computedBlocks;
+    const items: MenuProps["items"] = [];
+
+    blocks.forEach((block) => {
+      const item: typeof items[0] = {
+        className: "menu-item",
+        label: block.title,
+        key: block.id,
+        children: this.getSubMenu(block),
+      };
+
+      items.push(item);
+    });
+
+    return items;
+  }
+
+  render() {
+    const { currentBlockId, blocks, currentL2MenuId, activeColor } = this.props;
+
+    const syyy = {
+      "--header-block-active-bottom-color": activeColor
+        ? activeColor
+        : "#1E90FF",
+      "--header-top-active-background": activeColor ? activeColor : "#1E90FF",
+    } as CSSProperties;
+
+    if (!blocks || blocks.length < 1) {
+      return <></>;
+    }
+    let blockId = currentBlockId;
+    if (currentL2MenuId && !blockId) {
+      blockId = this.findBlockId(blocks, currentL2MenuId);
     }
+    if (!blockId) {
+      blockId = blocks.at(0).id;
+    }
+
+    // return this.computedBlocks.map((item, index) => {
+    //   return (
+    //     <div
+    //       key={index}
+    //       className={`${item.id == blockId ? "active" : ""} header-block`}
+    //       style={syyy}
+    //     >
+    //       <Dropdown menu={{ items: this.getSubMenu(item) }}>
+    //         <a
+    //           className="dropdown-link"
+    //           style={
+    //             item.id == blockId ? { color: "#fff" } : { color: activeColor }
+    //           }
+    //           rel="noopener noreferrer"
+    //         >
+    //           {item.title}
+    //         </a>
+    //       </Dropdown>
+    //     </div>
+    //   );
+    // });
 
+    return (
+      <Menu
+        mode="horizontal"
+        defaultSelectedKeys={[currentBlockId, currentL2MenuId]}
+        items={this.menuItems}
+        style={{
+          flex: 1,
+          minWidth: 0,
+        }}
+      />
+    );
+  }
 }
 
-export default Block;
+export default Block;