aldehyde 0.0.12 → 0.1.1

package/src/aldehyde/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;

package/src/aldehyde/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/aldehyde/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/aldehyde/login/index.css

@@ -0,0 +1,15 @@
+
+.login{
+	position: relative;
+	height:calc(100vh);
+	background: #001529
+}
+.login form{
+	background: #fff;
+	position: absolute;
+	top:50%;
+	left:50%;
+	transform: translate(-50%,-50%);
+	padding:30px 20px;
+	border-radius: 5px
+}

package/src/aldehyde/login/login.js

@@ -0,0 +1,138 @@
+import React from 'react'
+import './index.css'
+import {Button, Col, Form, Image, Input, message, Row} from 'antd'
+import {LockOutlined, SafetyCertificateOutlined, UserOutlined} from '@ant-design/icons';
+import HCserviceV3 from "../tmpl/hcservice-v3"
+
+
+export default class Loginit extends React.Component {
+    state = {
+        username: "",
+        password: "",
+        loading: true,
+        needKaptcha:false,
+        kaptchaImg:null,
+        kaptchaToken:null
+    }
+    formRef = React.createRef();
+
+    componentDidMount=async ()=> {
+
+        let pubkey = await HCserviceV3.getRasPubkey();
+        this.setState({
+            pubkey,
+            loading: false
+        })
+
+    }
+
+    getKaptchaToken=async ()=>{
+       let res= await HCserviceV3.getKaptchaToken();
+       if(res){
+           let  kaptchaImg=`data:image/png;base64,${res.img}`;
+           this.setState({
+               kaptchaImg,
+               kaptchaToken:res.kaptchaToken,
+               needKaptcha:true
+           })
+       }
+    }
+
+    handleSubmit = async () => {
+
+        this.setState({
+            loading: true
+        })
+        let {kaptchaToken,pubkey}=this.state
+
+        await this.formRef.current.validateFields().then(async (values) => {
+                let res = await HCserviceV3.login(values.username, values.password,kaptchaToken,values.kaptchaText,pubkey);
+                if (res.status === 'error') {
+                    //message.info(res.message);
+                    await this.getKaptchaToken();
+                }
+            }
+        ).catch(errorInfo => {
+        })
+        this.setState({
+            loading: false
+        })
+    }
+
+    handleKeyDown = (event) => { //按下enter键，触发login事件
+        switch (event.keyCode) {
+            case 13:
+                this.handleSubmit();
+                break;
+            default:
+                break;
+        }
+    }
+
+    changeKaptcha =async  (event) => { //切换验证码
+        await  this.getKaptchaToken();
+    }
+
+    componentDidMount() {
+        window.removeEventListener('keydown', this.handleKeyDown)
+    }
+
+    render() {
+        const {username, password, loading,needKaptcha,kaptchaImg} = this.state
+
+        return (<Row type="flex" justify="center" align="middle" className="login">
+                <Col>
+                    <Form style={{width: 350}} ref={this.formRef}
+                          name="normal_login"
+                          className="login-form"
+                          initialValues={{remember: true}}
+                    ><h3>欢迎登录</h3>
+                        <Form.Item
+                            name="username"
+                            rules={[{required: true, message: '请输入用户名!'}, {max: 20, min: 0, message: '输入0-20个字符'},]}
+                        >
+                            <Input prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="用户名"
+                            />
+                        </Form.Item>
+                        <Form.Item
+                            name="password"
+                            rules={[{required: true, message: '请输入密码!'}]}
+                        >
+                            <Input.Password
+                                            placeholder="密码"
+                                            onKeyDown={this.handleKeyDown}
+                                            prefix={<LockOutlined className="site-form-item-icon"/>}
+                            />
+                        </Form.Item>
+                        {
+                            needKaptcha?<Row gutter={8} >
+                                <Col span={12}>
+                                    <Form.Item
+                                        name="kaptchaText"
+                                        rules={[{required: true, message: '请输入验证码!'}]}
+                                    >
+                                        <Input prefix={<SafetyCertificateOutlined className="site-form-item-icon"/>}
+                                               placeholder="验证码"
+                                               onKeyDown={this.handleKeyDown}
+                                        />
+                                    </Form.Item>
+                                </Col>
+                                <Col span={12}>
+                                    <img style={{"cursor":"pointer"}}  height={30} width={90}  title={'点击刷新'} onClick={this.changeKaptcha}
+                                           src={kaptchaImg}></img>
+                                </Col>
+                            </Row>:""
+                        }
+                        <Form.Item>
+                            <Button type="primary" style={{width: '100%'}} loading={loading} onClick={this.handleSubmit}
+                                    className="login-form-button">
+                                登录
+                            </Button>
+                        </Form.Item>
+                    </Form>
+                </Col>
+            </Row>
+        )
+    }
+
+}

package/src/aldehyde/module/criteria-page.tsx1

@@ -0,0 +1,175 @@
+import React from 'react'
+import {DtmplData, LtmplConfigRes} from '../tmpl/interface';
+import Units from "../units";
+import ActTable from '../table/act-table'
+// import StatActTable from '../table/stat-act-table'
+import HCDataSource from "../tmpl/hc-data-source";
+import ModalDtmplView from "../detail/view/modal-dtmpl-view";
+import ModalDtmplEdit from "../detail/edit/modal-dtmpl-edit";
+import HcserviceV3 from "../tmpl/hcservice-v3";
+
+//以列表为入口的，页面内列表，基本原则是所有交互在页面内完成，不会触发路由。
+
+export interface CriteriaPageProps  {
+
+};
+
+export interface CriteriaPageState  {
+
+};
+
+class CriteriaPage extends React.PureComponent<CriteriaPageProps, CriteriaPageState> {
+
+    state = {
+        ltmplConfigRes: undefined,
+        criteriaData:undefined,
+        showDtmplView:false,
+        showDtmplEdit:false,
+        selectedCode:undefined,
+    }
+
+    async componentDidMount() {
+        this.loadLtmplConfig();
+    }
+
+    async componentDidUpdate(prevProps) {
+        const { sourceId,mainCode} = this.props;
+        if(!prevProps || prevProps.sourceId!=sourceId){
+            this.loadLtmplConfig();
+        }else if(mainCode && prevProps.mainCode!=mainCode){//此处处理有效，但不高效
+            this.loadLtmplConfig();
+        }
+    }
+
+    loadLtmplConfig = async () => {
+        const {sourceId} = this.props;
+        let ltmplConfigRes:LtmplConfigRes = await HCDataSource.requestLtmplConfig(sourceId);
+        let criteriaData;
+        //提取 过滤条件的默认值
+        if(ltmplConfigRes){
+           let defaultCriteriaValue=ltmplConfigRes.ltmplConfig.defaultCriteriaValue;
+           if(defaultCriteriaValue){
+               criteriaData=this.toCriteriaData(defaultCriteriaValue);
+           }
+        }
+        this.setState({
+            ltmplConfigRes,criteriaData
+        })
+    }
+    toCriteriaData =  (values:object) => {
+       let  criteriaData={};
+        if(values){
+            for (let key in values) {
+                criteriaData[key]=Units.configParamTrans(values[key]);
+            }
+        }
+        criteriaData['sequence']=Units.getRandomNum(6);
+        return criteriaData;
+    }
+
+
+    // async componentDidUpdate(prevProps) {
+    //     const {location} = this.props;
+    //     const { sourceId} = this.props.match.params;
+    //     let { sourceId: preSourceId} = prevProps.match.params;
+    //     let {location: preLocation} = prevProps;
+    //
+    //     if ( !sourceId ||
+    //         ( !preSourceId && this.state.ltmplConfigRes)
+    //         || (location.pathname == preLocation.pathname && location.search == preLocation.search)
+    //     ) {
+    //         return;
+    //     }
+    //     this.loadData();
+    // }
+
+    showView = (code: string) => {
+        // const { sourceId} = this.props.match.params;
+        // this.onRoute(`/${sourceId}/detail-view?code=${code}&menuId=${this.getMenuId()}`);
+        this.setState({
+            selectedCode:code,
+            showDtmplView:true,
+        })
+    }
+
+    doEdit = (code: string,mode:string) => {
+        this.setState({
+            selectedCode:code,
+            showDtmplEdit:true,
+        })
+    }
+
+
+
+    doCreate = () => {
+        this.setState({
+            selectedCode:null,
+            showDtmplEdit:true,
+        })
+    }
+
+    doSearch = (params_) => {
+        const { sourceId,mainCode} = this.props;
+        //const oldfliter = history.location.search.slice(1);
+
+        let params = {...params_}
+        //追加过滤条件，hiddenColIds，innerQueryKey
+        if (mainCode) {
+            params['mainCode'] = mainCode;
+        }
+        params['sourceId'] = sourceId;
+       // const criteriaData = Units.transQueryParamsToStr(params);
+       // let flag = true;
+        //if (newfliter && oldfliter != newfliter) { //查询条件更新时
+        this.setState({
+            criteriaData:this.toCriteriaData(params)
+        });
+
+    }
+
+    handleDtmplEdit =  (code: string) => {
+        this.doSearch(this.state.criteriaData);
+        this.setState({
+            showDtmplEdit:false,
+        })
+    }
+
+
+    render() {
+        const {ltmplConfigRes,criteriaData,showDtmplView,selectedCode,showDtmplEdit} = this.state;
+        const { sourceId,mainCode} = this.props;
+
+        if (!ltmplConfigRes) {
+            return <></>;
+        } else {
+            const {buttons}=ltmplConfigRes.ltmplConfig
+            return <>
+                <ActTable  mainCode={mainCode} showView={this.showView}
+                             doSearch={this.doSearch} doEdit={this.doEdit} doCreate={this.doCreate}
+                             sourceId={sourceId} criteriaData={criteriaData}
+                             ltmplConfig={ltmplConfigRes.ltmplConfig}/>
+                {buttons.includes('detail') ?
+                    <ModalDtmplView visible={showDtmplView} onCancel={()=>{
+                    this.setState({
+                        showDtmplView:false,
+                    })}
+                    }
+                                    sourceId={sourceId}
+                                    code={selectedCode}> </ModalDtmplView> : ""}
+                {buttons.includes('dtmplEdit') || buttons.includes('dtmplAdd') ?
+                    <ModalDtmplEdit visible={showDtmplEdit} onCancel={()=>{
+                        this.setState({
+                            showDtmplEdit:false,
+                        })}}
+                        sourceId={sourceId}
+                                    code={selectedCode}
+                                    onOk={this.handleDtmplEdit} />
+                    : ""}
+              </>
+        }
+
+    }
+}
+
+export default CriteriaPage;
+