aldehyde 0.0.1

package/src/components/layout/MainPage.tsx

@@ -0,0 +1,230 @@
+import React from 'react'
+import {FormInstance, Layout} from 'antd'
+import Footer from './footer';
+import {BlockMenu} from "../tmpl/interface";
+import Header from './header';
+import SideBar from './sidebar';
+import HCDataSource from "../tmpl/hc-data-source";
+import DocumentTitle from "react-document-title";
+import Units from '../units';
+import Scrollbars from 'react-custom-scrollbars';
+
+const {Content, Sider} = Layout;
+
+interface MainPageProps {
+    children: any,
+    match?: any,
+}
+
+interface MainPageState {
+    collapsed: boolean,
+    currentL2MenuId: string,
+    blocks: BlockMenu[],
+    currentBlockId?: string,
+    isImporter:boolean,
+}
+
+class MainPage extends React.PureComponent<MainPageProps, MainPageState> {
+    scrollbarRef = React.createRef();
+    state = {
+        collapsed: false,
+        blocks: [],
+        currentL2MenuId: undefined,
+        currentBlockId: undefined,
+        isImporter:false,
+    }
+
+    async componentDidMount() {
+
+        var currentURL = new URL(window.location.href);
+        console.log('main page currentURL:',currentURL);
+        const search = window.location.href.split("?")[1];
+        var searchParams = new URLSearchParams('?' + search);
+        let blockId = searchParams.get('blockId');
+        let l2MenuId = searchParams.get('menuId');
+        //进一步找找l2MenuId
+        if (!l2MenuId) {
+            let sourcePart = currentURL.hash.match(/[\w]+\-[\d]+/);
+            if (sourcePart) {
+                let source = sourcePart[0].split('-');
+                if (source[0] === 'menu') {
+                    l2MenuId = source[1];
+                }
+            }
+        }
+        let blockRes = await HCDataSource.requestBlocks(l2MenuId ? l2MenuId : undefined, blockId ? blockId : undefined);
+        this.setState({
+            isImporter:currentURL.hash.indexOf('/importer')>0,
+            blocks: blockRes.blocks,
+            currentL2MenuId: blockRes.l2MenuId,
+            currentBlockId: blockRes.blockId,
+
+        });
+
+    }
+
+
+    async componentDidUpdate(prevProps, prevState) {
+
+        var currentURL = new URL(window.location.href);
+        const search = window.location.href.split("?")[1];
+        var searchParams = new URLSearchParams('?' + search);
+        let blockId = searchParams.get('blockId');
+        let l2MenuId = searchParams.get('menuId');
+        let isImporter_= currentURL.hash.indexOf('/importer')>0;
+        if(prevState.isImporter!=isImporter_){
+            this.setState({
+                isImporter:isImporter_,
+            })
+        }
+        //进一步找找l2MenuId
+        if (!l2MenuId) {
+            let sourcePart = currentURL.hash.match(/[\w]+\-[\d]+/);
+            if (sourcePart) {
+                let source = sourcePart[0].split('-');
+                if (source[0] === 'menu') {
+                    l2MenuId = source[1];
+                }
+            }
+        }
+
+        const {currentL2MenuId, currentBlockId} = this.state;
+        if (l2MenuId && currentL2MenuId != l2MenuId) {
+            this.setState({
+                currentL2MenuId: l2MenuId,
+            });
+        }
+
+        if (!blockId) {
+            blockId = this.findBlockIdOfL2Menu(l2MenuId);
+        }
+        if (blockId && currentBlockId != blockId) {
+            this.setState({
+                currentBlockId: blockId,
+            });
+        }
+    }
+
+    findBlockTitle = (blockId: string) => {
+        let blockTitle: string;
+        const {blocks} = this.state;
+        if (blockId) {
+            for (const block of blocks) {
+                if (block.id == blockId) {
+                    blockTitle = block.title;
+                    break;
+                }
+            }
+        }
+        let title = blockTitle ? blockTitle + '-' : "";
+        let programName = Units.programName() ? Units.programName() : 'HYDROCARBON';
+        title = title + programName;
+        return title;
+    }
+
+    findBlockIdOfL2Menu = (leMenuId: string) => {
+        let blockId: string = undefined;
+        const {blocks} = this.state;
+        if (leMenuId) {
+            for (const block of blocks) {
+                for (const menul1 of block.l1Menus) {
+                    for (const menul2 of menul1.l2Menus) {
+                        if (menul2.id == leMenuId) {
+                            blockId = block.id;
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+        return blockId;
+    }
+
+    findCurrentBlock = () => {
+        const {blocks, currentL2MenuId, currentBlockId} = this.state;
+        let result: BlockMenu = undefined;
+
+        if (currentL2MenuId ) {
+            for (const block of blocks) {
+                for (const menul1 of block.l1Menus) {
+                    for (const menul2 of menul1.l2Menus) {
+                        if (menul2.id == currentL2MenuId) {
+                            result = block;
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+        if (currentBlockId && !result) {
+            for (const block of blocks) {
+                if (block.id === currentBlockId) {
+                    result = block;
+                    break;
+                }
+            }
+        }
+        if(!result){
+            result = blocks.at(0);
+        }
+        return result;
+    }
+
+    toggle = () => {
+        this.setState({
+            collapsed: !this.state.collapsed,
+        });
+    };
+
+    render() {
+        const {match}=this.props;
+
+        const {collapsed, currentL2MenuId, currentBlockId,isImporter} = this.state;
+        //滚动条回到顶部
+        // document.body.scrollTop = document.documentElement.scrollTop = 0;
+       // @ts-ignore
+        // eslint-disable-next-line no-unused-expressions
+        this.scrollbarRef?.current?.scrollToTop();
+        return (
+            <Scrollbars ref={this.scrollbarRef} style={{ height: 'calc(100vh)' }} autoHide autoHideTimeout={1000}>
+                <DocumentTitle title={(isImporter?'导入-':"") + this.findBlockTitle(currentBlockId)}>
+                    <Layout>
+                        <Sider
+                            style={{
+                                overflow: 'auto',
+                                height: '100vh',
+                                position: 'fixed',
+                                left: 0,
+                                top: 0,
+                                bottom: 0,
+                            }}
+                            collapsed={collapsed}
+                        >
+                            <SideBar blockMenu={this.findCurrentBlock()}
+                                     currentL2MenuId={currentL2MenuId} collapsed={collapsed}/>
+                        </Sider>
+                        <Layout style={collapsed ? {background: '#fff', marginLeft: 80} : {
+                            background: '#fff',
+                            marginLeft: 200
+                        }}>
+                            <Header toggle={this.toggle} {...this.state} />
+                            <Content style={{
+                                margin: '24px 16px 0',
+                                overflow: 'initial',
+                                minHeight: 'calc(100vh)',
+                                minWidth: 760,
+                                maxWidth: 1960,
+                                paddingBottom: '8px',
+                            }}>
+                                {this.props.children}
+                            </Content>
+                            <Footer/>
+                        </Layout>
+                    </Layout>
+                </DocumentTitle>
+            </Scrollbars>
+        )
+    }
+}
+
+export default MainPage;

package/src/components/layout/footer/index.css

@@ -0,0 +1,6 @@
+.footer{
+    text-align: center;
+    height:40px;
+    line-height: 40px;
+    color:#333;
+}

package/src/components/layout/footer/index.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import "./index.css";
+import {Layout  } from 'antd';
+const {Footer : AntdFooter}=Layout;
+
+export default class Footer extends React.Component {
+
+    render() {
+        return (
+            <AntdFooter style={{textAlign: 'center'}}>
+                <div className="footer">
+                    Enterprise Applications ©2022 Created by  KUANGKIE
+                </div>
+            </AntdFooter>
+        )
+    }
+}

package/src/components/layout/header/index.css

@@ -0,0 +1,86 @@
+.header-top{
+    min-height:50px;
+    line-height: 55px;
+    text-align:left;
+    color:#333;
+    background: #fff;
+    font-size: 16px;
+    border-bottom: 1px solid #40a9ff;
+}
+
+.header-col{
+    z-index:1000
+}
+.ant-dropdown-menu-item, .ant-dropdown-menu-submenu-title{
+    font-size: 14px!important;
+    text-align: center;
+}
+.message-bar{
+    float:right;
+    min-width:50px;
+    width:auto;
+    text-align:center;
+    cursor: pointer;
+}
+.message-bar:hover{
+    background: #4a5f74;
+    color:#fff;
+    border-radius: 30px;
+}
+.message-bar-avatar{
+    background-color: #fff;
+    color:#1890ff;
+}
+.message-bar-avatar:hover{
+    background: #4a5f74;
+    color:#fff;
+}
+.userLogin{
+    float:right;
+    min-width:80px;
+    width:auto;
+    text-align:center;
+    cursor: pointer;
+}
+.userLogin i{
+    font-size: 24px!important;
+}
+.userLogin:hover{
+    background: #4a5f74;
+    color:#fff;
+}
+.ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover{
+    color:#1890FF;
+}
+.dropdown-link{
+    display: inline-block;
+    margin:0 10px;
+}
+.header-block{
+    float: left;
+    /*padding-left: 10px;*/
+    padding-top: 2px;
+}
+.header-block:hover{
+    padding-top: 0px;
+    border-bottom-style: solid;
+    border-bottom-width:2px;
+    border-bottom-color:#1E90FF ;
+}
+.header-top .active{
+    background: #1E90FF;
+}
+.header-top .active>a {
+    color: #fcfcfc;
+}
+
+.trigger {
+    padding: 0 12px;
+    cursor: pointer;
+    transition: color 0.3s;
+    font-size: 20px;
+}
+
+.trigger:hover {
+    color: #1890ff;
+}

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

@@ -0,0 +1,58 @@
+import React from 'react'
+import {Col, Layout, Row} from 'antd'
+import {MenuFoldOutlined, MenuUnfoldOutlined} from '@ant-design/icons';
+import 'antd/dist/antd.css';
+import "./index.css"
+import Block, {BlockProps} from "../menu/block";
+import L2MenuMessageBar from '../menu/l2menu-message-bar';
+import L2MenuQuickBar  from '../menu/l2menu-quick-bar';
+import UserBar from '../menu/user-bar';
+
+const { Header:AntdHeader, } = Layout;
+
+interface HeaderProps extends BlockProps {
+    toggle: any;
+    collapsed: boolean;
+}
+
+interface HeaderState {
+
+}
+
+class Header extends React.PureComponent<HeaderProps, HeaderState> {
+
+    toggle = () => {
+        this.props.toggle();
+    };
+
+    render() {
+
+        let {collapsed}=this.props;
+        return (
+            <AntdHeader style={{ padding: 0 , height: 'auto'}}>
+                    <Row className="header-top" wrap={false}>
+                        <Col span={20} className="header-col" >
+                            <div style={{float: 'left'}}>
+                                {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
+                                    className: 'trigger',
+                                    onClick: this.toggle,
+                                })}
+                            </div>
+                            <Block {...this.props} />
+                        </Col>
+                        <Col span={1} style={{width: '100%'}}>
+                            <L2MenuQuickBar></L2MenuQuickBar>
+                        </Col>
+                        <Col span={1} style={{width: '100%'}}>
+                            <L2MenuMessageBar></L2MenuMessageBar>
+                        </Col>
+                        <Col span={2}>
+                            <UserBar></UserBar>
+                        </Col>
+                    </Row>
+            </AntdHeader>
+        )
+    }
+}
+
+export default Header

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

@@ -0,0 +1,88 @@
+import React from "react";
+import {Badge, Col, Dropdown, Menu, Row} from 'antd';
+import {BlockMenu} from "../../tmpl/interface";
+import {NavLink, withRouter} from 'react-router-dom';
+import {
+    AppstoreTwoTone,
+    FormOutlined,
+    LogoutOutlined,
+    MenuFoldOutlined,
+    MenuUnfoldOutlined,
+    MessageTwoTone,
+    UserOutlined
+} from '@ant-design/icons';
+import MenuRender from './menu-render';
+
+
+export interface BlockProps{
+    blocks:BlockMenu[];
+    currentBlockId?:string;
+    currentL2MenuId?:string;
+}
+interface BlockState{
+
+}
+
+class Block extends React.PureComponent<BlockProps, BlockState> {
+
+
+    constructor(props) {
+        super(props);
+    }
+
+    renderBlockMenu = (blockMenu:BlockMenu)=>{
+        return <Menu>
+            {MenuRender.renderL1Menu(blockMenu.l1Menus,null)}
+        </Menu>
+
+    }
+
+
+    findBlockId = (blocks:BlockMenu[],currentL2MenuId:string) => {
+        let blockId:string=undefined;
+        for(const block of blocks){
+            for(const menul1 of block.l1Menus){
+                for(const menul2 of menul1.l2Menus){
+                    if(menul2.id===currentL2MenuId){
+                        blockId=block.id;
+                        return blockId;
+                    }
+                }
+            }
+        }
+        return blockId;
+    }
+
+    render(){
+        const {currentBlockId,blocks,currentL2MenuId}=this.props;
+        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 (
+        blocks.map((item, index) => {
+            return <div key={index}
+                        className={`${item.id == blockId ? "active" : ""} header-block`}>
+                <Dropdown overlay={this.renderBlockMenu(item)}>
+                    <a  className="dropdown-link"
+                       // href={`#/home?blockId=${item.id}`}
+                       rel="noopener noreferrer"
+                    >
+                        {item.title}
+                    </a>
+                </Dropdown>
+            </div>
+        })
+        );
+    }
+
+}
+
+export default withRouter(Block);

package/src/components/layout/menu/l2menu-message-bar.tsx

@@ -0,0 +1,118 @@
+import React from 'react'
+import {Badge, Avatar, Dropdown, Menu} from 'antd'
+import {MessageTwoTone,BellOutlined} from '@ant-design/icons';
+import 'antd/dist/antd.css';
+import {Level2Menu} from "../../tmpl/interface";
+import HcserviceV3 from '../../tmpl/hcservice-v3'
+import {NavLink} from 'react-router-dom';
+import HCDataSource from './../../tmpl/hc-data-source'
+import Units from "../../units";
+interface L2MenuMessageBarProps {
+
+}
+
+interface MessageBar {
+    l2Menu: Level2Menu;
+    count: number;
+}
+
+interface L2MenuMessageBarState {
+    messageBars: MessageBar[];
+    anyState:boolean;
+}
+
+
+class L2MenuMessageBar extends React.PureComponent<L2MenuMessageBarProps, L2MenuMessageBarState> {
+    state={
+        messageBars:undefined,
+        anyState:false,
+    }
+
+    async componentDidMount() {
+        let l2Menus = await HCDataSource.messageMenus();
+        const messageBars:MessageBar[]= [];
+        for (const item of l2Menus) {
+           const messageBar:MessageBar={
+               l2Menu:item,
+               count:0,
+           };
+           let that=this;
+            setInterval(async () => {
+                let count = await HcserviceV3.requestLtmplCount(item.id);
+                messageBar.count = count;
+                this.setState({
+                    anyState:!this.state.anyState,
+                });
+            }, 180000);
+            let count = await HcserviceV3.requestLtmplCount(item.id);
+            messageBar.count=count;
+            messageBars.push(messageBar);
+        }
+        this.setState({
+            messageBars,
+        });
+    }
+
+
+    renderMessageBar = (messageBars: MessageBar[]) => {
+
+        let  total:number=0;
+
+        const menu = (
+            <Menu key={1}>
+                { messageBars.map((messageBar, index) => {
+                    if(messageBar.count){
+                        total=total+messageBar.count;
+                    }
+                    let defaultCriteriaData="";
+                    if(messageBar.l2Menu.defaultCriteriaValue){
+                        defaultCriteriaData='&'+ Units.transQueryParamsToStr(messageBar.l2Menu.defaultCriteriaValue);
+                    }
+               return <Menu.Item key={index}>
+                   <NavLink to={`/${messageBar.l2Menu.id}/act-table?menuId=${messageBar.l2Menu.id}${defaultCriteriaData}`} >
+                       {messageBar.l2Menu.title}<Badge  count={messageBar.count} overflowCount={99} offset={[2, -2]} size="small" /></NavLink>
+                  </Menu.Item>
+            })}
+            </Menu>
+        );
+
+        if(!messageBars || messageBars.length==0){
+            return;
+        }else if(messageBars.length==1){
+            let messageBar=messageBars[0];
+            const l2Menu = messageBar.l2Menu;
+            let defaultCriteriaData="";
+            if(l2Menu.defaultCriteriaValue){
+                defaultCriteriaData='&'+ Units.transQueryParamsToStr(l2Menu.defaultCriteriaValue);
+            }
+            return (<div  className={'message-bar'} >
+                <a href={l2Menu.customPath ? `/page-${l2Menu.id}${l2Menu.customPath}?menuId=${l2Menu.id}` : `#/${l2Menu.id}/act-table?menuId=${l2Menu.id}${defaultCriteriaData}`}
+                   className="head-example" >
+                    <Badge  count={messageBar.count}   overflowCount={99} offset={[8, -2]}>
+                        <span  style={{ fontSize: '20px', color: '#08c' }} ><BellOutlined /></span>
+                    </Badge>
+                </a>
+            </div>)
+        }else{
+            return <Dropdown overlay={menu} placement="bottomCenter"    >
+                <div  className={'message-bar'} >
+                        <Badge  count={total}   overflowCount={99} offset={[8, -2]}>
+                            <span  style={{ fontSize: '20px', color: '#08c' }} ><BellOutlined /></span>
+                        </Badge>
+                </div>
+            </Dropdown>
+        }
+    }
+
+
+    render() {
+        const {messageBars} = this.state;
+        return (
+            <>
+                {messageBars?this.renderMessageBar(messageBars):""}
+            </>
+        );
+    }
+}
+
+export default L2MenuMessageBar;