aldehyde 0.0.3 → 0.0.6

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

@@ -0,0 +1,132 @@
+import React from 'react'
+import {Badge, Avatar, Dropdown, Menu, Timeline, Drawer, Space,Button} from 'antd'
+import {MessageTwoTone,AppstoreOutlined} from '@ant-design/icons';
+import 'antd/dist/antd.css';
+import {Level2Menu} from "../../tmpl/interface";
+// import HcserviceV3 from '../../tmpl/hcservice-v3'
+import HCDataSource from './../../tmpl/hc-data-source'
+import LtmplPage from "./../../module/ltmpl-page";
+
+interface L2MenuQuickBarProps {
+
+}
+
+interface QuickBar {
+    l2Menu: Level2Menu;
+    count: number;
+}
+
+interface L2MenuQuickBarState {
+    quickBars: QuickBar[];
+    anyState:boolean;
+    currentId:string;
+    showDraw:boolean;
+}
+
+
+class L2MenuQuickBar extends React.PureComponent<L2MenuQuickBarProps, L2MenuQuickBarState> {
+    state={
+        quickBars:undefined,
+        anyState:false,
+        currentId:undefined,
+        showDraw:false,
+    }
+
+    async componentDidMount() {
+        let l2Menus = await HCDataSource.quickEntranceMenus();
+        const quickBars:QuickBar[]= [];
+        for (const item of l2Menus) {
+           const quickBar:QuickBar={
+               l2Menu:item,
+               count:0,
+           };
+           let that=this;
+            quickBars.push(quickBar);
+        }
+        this.setState({
+            quickBars,
+        });
+    }
+    showDraw=(currentId:string)=>{
+        console.log("点击了L2MenuQuickBar",currentId);
+        this.setState({
+            currentId,
+            showDraw:true
+        })
+
+    }
+
+    closeDrawer=()=>{
+        this.setState({
+            showDraw:false
+        })
+    }
+
+    renderQuickBar = (quickBars: QuickBar[]) => {
+
+        let  total:number=0;
+
+        const menu = (
+            <Menu key={1}>
+                { quickBars.map((quickBar, index) => {
+                    if(quickBar.count){
+                        total=total+quickBar.count;
+                    }
+               return <Menu.Item key={index} >
+                   <span onClick={()=>this.showDraw(quickBar.l2Menu.id)}>
+                        {quickBar.l2Menu.title}
+                   </span>
+
+                  </Menu.Item>
+            })}
+            </Menu>
+        );
+
+        if(!quickBars || quickBars.length==0){
+            return;
+        }else if(quickBars.length==1){
+            let quickBar=quickBars[0];
+            const l2Menu = quickBar.l2Menu;
+            return (<div  className={'message-bar'} onClick={()=>this.showDraw(quickBar.l2Menu.id)}>
+                 <span  style={{ fontSize: '20px', color: '#08c' }} ><AppstoreOutlined /></span>
+            </div>)
+        }else{
+            return <Dropdown overlay={menu} placement="bottomCenter"   >
+                <div  className={'message-bar'} >
+                   <span  style={{ fontSize: '20px', color: '#08c' }} ><AppstoreOutlined /></span>
+                </div>
+            </Dropdown>
+        }
+    }
+
+
+    render() {
+        const {quickBars,showDraw,currentId} = this.state;
+        return (
+            <>
+                {quickBars?this.renderQuickBar(quickBars):""}
+                <Drawer
+                    placement={'left'}
+                    title="快捷查询"
+                    closable={true}
+                    mask={false}
+                    onClose={this.closeDrawer}
+                    visible={showDraw}
+                    width={'calc(100% - 280px)'}
+                    style={{
+                        maxWidth: 1960,
+                    }}
+                    extra={
+                        <Space>
+                            <Button onClick={this.closeDrawer}>关闭</Button>
+                        </Space>
+                    }
+                >
+                   <LtmplPage  sourceId={currentId}></LtmplPage>
+                </Drawer>
+            </>
+        );
+    }
+}
+
+export default L2MenuQuickBar;

package/src/components/layout/menu/menu-2layers.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import {Menu} from 'antd';
+import {BlockMenu} from "../../tmpl/interface";
+import MenuRender from './menu-render';
+import {withRouter} from 'react-router-dom';
+
+
+export interface Menu2layersProps {
+    blockMenu: BlockMenu;
+    collapsed?: boolean;
+    currentL2MenuId?: string;
+}
+
+interface Menu2layersState {
+    openKeys: string[];
+}
+
+class Menu2layers extends React.PureComponent<Menu2layersProps, Menu2layersState> {
+
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            openKeys: [],
+        }
+    }
+
+    // componentDidMount() {
+    //
+    // }
+    componentDidUpdate(prevProps) {
+        const {currentL2MenuId, blockMenu,collapsed} = this.props;
+        let {currentL2MenuId:preMenuId}=prevProps;
+        const {openKeys} = this.state;
+        // if(collapsed){
+        //     if(openKeys.length>0){
+        //         this.setState({
+        //             openKeys:[]
+        //         })
+        //     }
+        // }else{
+
+            let openKey = blockMenu?MenuRender.findOpenId(blockMenu.l1Menus, currentL2MenuId):undefined;
+            if(openKey && openKeys.length<1){
+                this.setState({
+                    openKeys:[openKey.toString()]
+                })
+            }else if(preMenuId!=currentL2MenuId){
+                console.log('currentL2MenuId:',currentL2MenuId);
+                if (openKey) {
+                    if(openKeys.length==1){
+                        openKeys.push(openKey.toString())
+                        if (openKeys && openKeys.length > 1) {
+                            openKeys.splice(0, 1);
+                        }
+                    }
+                    this.setState({
+                        openKeys,
+                    })
+                }
+            }
+        //}
+    }
+
+    handleOpen = (openKeys) => {
+        if (openKeys && openKeys.length > 1) {
+            openKeys.splice(0, 1);
+        }
+        this.setState({
+            openKeys
+        })
+    }
+
+    render() {
+        const {blockMenu, collapsed, currentL2MenuId} = this.props;
+        const {openKeys} = this.state;
+
+        return (
+            <Menu
+                mode="inline"
+                theme="dark"
+                onOpenChange={this.handleOpen} //手风琴
+                selectedKeys={currentL2MenuId ? [currentL2MenuId.toString()] : undefined}
+                openKeys={!collapsed?openKeys:undefined}
+            >
+                {blockMenu ? MenuRender.renderL1Menu(blockMenu.l1Menus, undefined) : ""}
+            </Menu>
+        );
+    }
+}
+
+export default withRouter(Menu2layers);

package/src/components/layout/menu/menu-render.tsx

@@ -0,0 +1,49 @@
+import {Level1Menu, Level2Menu} from "../../tmpl/interface";
+import {Menu} from "antd";
+import React from "react";
+import {NavLink} from 'react-router-dom';
+import Units from "../../units";
+const {SubMenu} = Menu;
+
+export default {
+    renderL1Menu(menus:Level1Menu[],target){
+        return menus.map((item) => {
+            if (item.l2Menus) {
+                return <SubMenu title={item.title} key={item.id}>
+                    {this.renderL2Menu(item.l2Menus,target)}
+                </SubMenu>
+            }
+        })
+    },
+    renderL2Menu(menus:Level2Menu[],target){
+        return menus.map((item) => {
+            let delimiter="/";
+            let customPath=item.customPath;
+            if(customPath){
+                if(customPath.startsWith('/') || customPath.startsWith('\\')){
+                    delimiter="";
+                }
+            }
+            let defaultCriteriaData="";
+            if(item.defaultCriteriaValue){
+                defaultCriteriaData='&'+ Units.transQueryParamsToStr(item.defaultCriteriaValue);
+            }
+
+            return <Menu.Item key={item.id}>
+                <NavLink to={customPath ? `/page-${item.id}${delimiter}${customPath}?menuId=${item.id}` :`/${item.id}/act-table?menuId=${item.id}${defaultCriteriaData}`} target={target} >{item.title}</NavLink>
+            </Menu.Item>
+        })
+    },
+    findOpenId(l1Menus:Level1Menu[],currentL2MenuId:string){
+        let openL2MenuId:string=undefined;
+        for(const menul1 of l1Menus){
+            for(const menul2 of menul1.l2Menus){
+                if(menul2.id==currentL2MenuId){
+                    openL2MenuId=menul1.id;
+                    return openL2MenuId;
+                }
+            }
+        }
+        return openL2MenuId;
+    }
+}

package/src/components/layout/menu/reset-password.tsx

@@ -0,0 +1,185 @@
+import React from 'react'
+import {
+    Dropdown,
+    Menu,
+    Modal,
+    message,
+    Popconfirm,
+    Avatar,
+    Badge,
+    Tooltip,
+    Button,
+    Popover,
+    Col,
+    Form,
+    Input, Row, Space, FormInstance
+} from 'antd';
+import {KeyOutlined,LockOutlined,ClearOutlined} from '@ant-design/icons';
+import 'antd/dist/antd.css';
+import HCserviceV3 from "../../tmpl/hcservice-v3";
+
+interface ResetPasswordProps {
+
+}
+
+
+interface ResetPasswordState {
+    showPopover:boolean,
+    pubkey:string,
+    loading:boolean
+}
+
+
+class ResetPassword extends React.PureComponent<ResetPasswordProps, ResetPasswordState> {
+    state={
+        showPopover:false,
+        pubkey:undefined,
+        loading:false,
+    }
+    formRef = React.createRef<FormInstance>();
+
+    async componentDidMount() {
+        let pubkey = await HCserviceV3.getRasPubkey();
+        this.setState({
+            pubkey
+        })
+    }
+
+
+
+    handleSubmit = async (values) => {
+
+        this.setState({
+            loading: true
+        })
+        let {pubkey}=this.state
+
+
+         let res = await HCserviceV3.resetPassword(values.oldPassword, values.newPassword,pubkey);
+         if(res.status == 'success') {
+                message.info("密码已重置,请重新登录")
+                    HCserviceV3.logout();
+          }
+
+        this.setState({
+            loading: false
+        })
+    }
+
+    handleBlurCapture=()=>{
+       //判断新密码和确认密码相同
+       console.log("this.formRef.current.getFieldValue('newPassword')",this.formRef.current.getFieldValue('newPassword')) ;
+       let newPassword= this.formRef.current.getFieldValue('newPassword');
+        let reNewPassword= this.formRef.current.getFieldValue('reNewPassword');
+        if(newPassword  && reNewPassword && newPassword!=reNewPassword){
+            this.formRef.current.setFields([{
+                name:'reNewPassword',
+                value:reNewPassword,
+                errors:['两次密码输入不一致！']
+            }]);
+        }else{
+            this.formRef.current.setFields([{
+                name:'reNewPassword',
+                value:reNewPassword,
+                errors:[]
+            }]);
+        }
+    }
+
+    getForm=()=>{
+        const {loading} = this.state;
+        return <Row  justify="center" align="middle">
+            <Col>
+                <Form style={{width: 350}} ref={this.formRef}
+                      name="normal_login"
+                      className="login-form"
+                      onFinish={this.handleSubmit}
+                >
+                    <Form.Item
+                        label={"原密码"}
+                        name="oldPassword"
+                        rules={[{required: true, message: '请输入原密码!'}]}
+                    >
+                        <Input.Password
+                            placeholder="密码"
+                            prefix={<LockOutlined className="site-form-item-icon"/>}
+                        />
+                    </Form.Item>
+                    <Form.Item
+                        label={"新设密码"}
+                    name="newPassword"
+                    rules={[{required: true, message: '请输入新密码!'}]}
+                >
+                    <Input.Password
+                        placeholder="新设密码"
+                        onBlurCapture={this.handleBlurCapture}
+                        prefix={<LockOutlined className="site-form-item-icon"/>}
+                    />
+                </Form.Item>
+                    <Form.Item
+                        label={"确认密码"}
+                        name="reNewPassword"
+                        rules={[{required: true, message: '请输入确认密码!'},
+                            ({ getFieldValue }) => ({
+                                validator(_, value) {
+                                    if (!value || getFieldValue('newPassword') === value) {
+                                        return Promise.resolve();
+                                    }
+                                    return Promise.reject(new Error('两次密码输入不一致!'));
+                                },
+                            }),]}
+                    >
+                        <Input.Password
+                            placeholder="确认密码"
+                            //onBlurCapture={this.handleBlurCapture}
+                            prefix={<LockOutlined className="site-form-item-icon"/>}
+                        />
+                    </Form.Item>
+
+                    <Form.Item>
+                        <Row align="middle"  gutter={32} >
+                            <Col  span={12}>
+                                {/*<Space style={{alignContent:"right"}} key={3} size={[8, 16]}>*/}
+                                {/*    <Button type="primary">确定</Button>*/}
+                                {/*    <Button >取消</Button>*/}
+                                {/*</Space>*/}
+                                <Button  style={{width: '100%'}}   type="primary" loading={loading} onClick={()=>this.formRef.current.submit()}>确定</Button>
+                            </Col>
+                            <Col span={12}>
+                                <Button  style={{width: '100%'}} onClick={()=>{
+                                    this.setState({
+                                        showPopover:false
+                                    })
+                                }} >取消</Button>
+                            </Col>
+                        </Row>
+
+                    </Form.Item>
+                </Form>
+            </Col>
+        </Row>
+
+    }
+
+
+
+    render() {
+        const {showPopover,loading} = this.state;
+        return (
+            <>
+                <Popover destroyTooltipOnHide={true} visible={showPopover} overlayStyle={{maxWidth: '400px'}} title={'修改密码'} placement="leftBottom" trigger="click"
+                         content={this.getForm()}
+                ><Button type={"text"} size={'small'} onClick={()=>{
+                    this.setState({
+                        showPopover:!showPopover
+                    })
+                }} >
+                    <KeyOutlined />修改密码
+                </Button>
+                </Popover>
+            </>
+        );
+    }
+}
+
+export default ResetPassword;

package/src/components/layout/menu/user-bar.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import {Dropdown, Menu, Modal, message, Popconfirm, Avatar, Badge,Tooltip} from 'antd';
+import {UserOutlined,LogoutOutlined,ClearOutlined,KeyOutlined,SolutionOutlined} from '@ant-design/icons';
+import 'antd/dist/antd.css';
+import {Level2Menu,UserInfo} from "../../tmpl/interface";
+import HcserviceV3 from '../../tmpl/hcservice-v3';
+import HCDataSource from "../../tmpl/hc-data-source";
+import UserInfoBar from "./userinfo-bar"
+import ResetPassword from "./reset-password";
+const confirm = Modal.confirm;
+
+interface UserBarProps {
+
+}
+
+
+interface UserBarState extends UserInfo{
+
+}
+
+
+class UserBar extends React.PureComponent<UserBarProps, UserBarState> {
+    state={
+       id:undefined,
+       name:undefined,
+        roles:[],
+    }
+
+    async componentDidMount() {
+        let userInfo = await HcserviceV3.getUser();
+        this.setState({
+            ...userInfo
+        });
+    }
+
+    cleanCache=()=>{
+        let {roles}=this.state;
+        HCDataSource.clear(roles);
+    }
+
+
+    render() {
+        const {name} = this.state;
+
+        const menu = (
+            <Menu>
+                {/*<Menu.Item>*/}
+                {/*    <span onClick={() => this.userDetail("detail")}><UserOutlined/>用户详情</span>*/}
+                {/*</Menu.Item>*/}
+                {/*<Menu.Item>*/}
+                {/*    <span onClick={() => this.userDetail("edit")}><FormOutlined/>用户修改</span>*/}
+                {/*</Menu.Item>*/}
+
+                <Menu.Item>
+                        <UserInfoBar />
+                </Menu.Item>
+                <Menu.Item>
+                    <ResetPassword></ResetPassword>
+                </Menu.Item>
+                <Menu.Item>
+                    {/*<Popconfirm*/}
+                    {/*    placement="rightBottom"*/}
+                    {/*    title={'确定要清除缓存吗'}*/}
+                    {/*    onConfirm={()=>{*/}
+                    {/*        HCDataSource.clear();*/}
+                    {/*        message.success("清除成功");*/}
+                    {/*    }}*/}
+                    {/*    okText="Yes"*/}
+                    {/*    cancelText="No"*/}
+                    {/*>*/}
+                    {/*    <span ><ClearOutlined />清空缓存</span>*/}
+                    {/*</Popconfirm>*/}
+                    <span onClick={this.cleanCache}><ClearOutlined />清空缓存</span>
+                    <Menu.Item>
+                        <span onClick={HcserviceV3.logout}><LogoutOutlined/>退出登录</span>
+                    </Menu.Item>
+                </Menu.Item>
+            </Menu>
+        );
+        return (
+            <>
+                <Dropdown overlay={menu} placement="bottomCenter" trigger={['click']}>
+                    <div className="userLogin">
+                        {/*<Tooltip placement={'right'} title={name} >*/}
+                        {/*<Avatar style={{ color:'#1890ff' }} shape="square" icon={<UserOutlined/>}  size={{ xs: 8, sm: 16, md: 24, lg: 32, xl: 40, xxl: 48 }}>*/}
+                        {/*</Avatar>*/}
+                        {/*</Tooltip>*/}
+                        <UserOutlined/>
+                        <span>{name}</span>
+                    </div>
+                </Dropdown>
+            </>
+        );
+    }
+}
+
+export default UserBar;

package/src/components/layout/menu/userinfo-bar.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import {Badge, Avatar, Dropdown, Menu, Timeline, Drawer, Space,Button} from 'antd'
+import {MessageTwoTone,AppstoreOutlined} from '@ant-design/icons';
+import 'antd/dist/antd.css';
+import {Level2Menu} from "../../tmpl/interface";
+// import HcserviceV3 from '../../tmpl/hcservice-v3'
+import HCDataSource from './../../tmpl/hc-data-source'
+import {UserOutlined,LogoutOutlined,ClearOutlined,KeyOutlined,SolutionOutlined} from '@ant-design/icons';
+import DtmplPage from "./../../module/dtmpl-page";
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+
+interface UserInfoBarProps {
+
+}
+
+interface UserInfoBarState {
+    showDraw:boolean;
+}
+
+
+class UserInfoBar extends React.PureComponent<UserInfoBarProps, UserInfoBarState> {
+    state={
+        showDraw:false,
+    }
+
+    async componentDidMount() {
+
+    }
+    showDraw=()=>{
+        this.setState({
+            showDraw:true
+        })
+    }
+
+    closeDrawer=()=>{
+        this.setState({
+            showDraw:false
+        })
+    }
+
+    render() {
+        const {showDraw} = this.state;
+        return (
+            <>
+                <span onClick={this.showDraw}><SolutionOutlined />个人信息</span>
+                <Drawer
+                    placement={'left'}
+                    title="个人信息"
+                    closable={true}
+                    mask={false}
+                    onClose={this.closeDrawer}
+                    visible={showDraw}
+                    width={'calc(100% - 280px)'}
+                    style={{
+                        maxWidth: 1960,
+                    }}
+                    extra={
+                        <Space>
+                            <Button onClick={this.closeDrawer}>关闭</Button>
+                        </Space>
+                    }
+                >
+                   <DtmplPage sourceId={'0'} code={"userCode"}></DtmplPage>
+                </Drawer>
+            </>
+        );
+    }
+}
+
+export default UserInfoBar;

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

@@ -0,0 +1,26 @@
+.logo{
+	line-height: 38px;
+	height: 42px;
+	margin: 16px;
+	background: rgba(255, 255, 255, 0.3);
+}
+.logo h1{
+	font-size: 20px;
+	color:#fff;
+	display: inline-block;
+	text-align: center;
+	vertical-align: middle;
+	width:100%;
+	margin:0;
+}
+.logonly{
+	border-radius: 4px;
+	line-height: 38px;
+	height: 42px;
+	margin: 16px;
+	background: rgba(255, 255, 255, 0.8);
+}
+.ant-menu-inline-collapsed{
+	width: 50px!important;
+}
+

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

@@ -0,0 +1,38 @@
+import React from 'react'
+import './index.css'
+import Units from '../../units';
+import Menu2layers, {Menu2layersProps} from "../menu/menu-2layers";
+import Scrollbars from 'react-custom-scrollbars';
+import {Image, Layout} from 'antd';
+import logo from '../../../../public/logo.png';
+interface NavLeftProps extends Menu2layersProps {
+
+}
+
+interface NavLeftState {
+
+}
+
+class NavLeft extends React.PureComponent<NavLeftProps, NavLeftState> {
+
+    render() {
+        let {collapsed}=this.props
+        return (
+            <div>
+                <Scrollbars style={{height: 'calc(100vh)'}} autoHide autoHideTimeout={1000}>
+                    <div className={collapsed?"logonly" :"logo"}>
+                        <a href="#/home">
+                            {collapsed?<Image
+                                src={logo}
+                            /> :<h1>{Units.programName_NavLeft()}</h1>}
+                        </a>
+                    </div>
+                    <Menu2layers {...this.props}></Menu2layers>
+                </Scrollbars>
+            </div>
+
+        )
+    }
+}
+
+export default NavLeft