aldehyde 0.0.2 → 0.0.3

package/src/components/layout/MainPage.tsx

@@ -1,230 +0,0 @@
-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

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

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

@@ -1,17 +0,0 @@
-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

@@ -1,86 +0,0 @@
-.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

@@ -1,58 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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

@@ -1,118 +0,0 @@
-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;