aldehyde 0.0.12 → 0.1.3

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,14 @@
+.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,137 @@
+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;
+

package/src/aldehyde/module/ltmpl-page.tsx

@@ -0,0 +1,181 @@
+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 LtmplPageProps  {
+    sourceId:string,
+    mainCode?:string;
+};
+
+export interface LtmplPageState  {
+    ltmplConfigRes:LtmplConfigRes;
+    criteriaData:object;
+    showDtmplView:boolean;
+    selectedCode:string;
+    showDtmplEdit:boolean;
+};
+
+class LtmplPage extends React.PureComponent<LtmplPageProps, LtmplPageState> {
+
+    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 LtmplPage;
+

package/src/aldehyde/routable/dtmpl-route.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import {Button, Card, Form as AntdForm, Modal} from 'antd';
+import  {RouterCompProps} from '../tmpl/interface';
+import Units from "../units";
+import DtmplEdit from "../detail/edit/dtmpl-edit";
+import ActDtmplView from '../detail/view/act-dtmpl-view'
+
+
+export interface DtmplRouteProps extends RouterCompProps {
+
+};
+
+export interface DtmplRoutePropsStat {
+
+};
+
+class DtmplRoute extends React.PureComponent<DtmplRouteProps, DtmplRoutePropsStat> {
+
+    getMenuId=()=>{
+        const {location} = this.props;
+        console.log("this.props.match.params",this.props);
+        var searchParams = new URLSearchParams( location.search);
+        let menuId = searchParams.get('menuId');
+        return menuId;
+    }
+
+    goBackToLtmpl=()=>{
+        const { sourceId,} = this.props.match.params;
+
+        let url=`/${sourceId}/act-table?menuId=${this.getMenuId()}`;
+        let mainCode=this.getMainCode();
+        if(mainCode){
+            url=url+`&mainCode=${mainCode}`;
+        }
+        this.props.history.push(url);
+    }
+
+    goDtmpl=(code:string)=>{
+        const { sourceId,} = this.props.match.params;
+        let url=`/${sourceId}/detail-edit?menuId=${this.getMenuId()}`;
+        if(code){
+            url=url+`&code=${code}`;
+        }
+        let mainCode=this.getMainCode();
+        if(mainCode){
+            url=url+`&mainCode=${mainCode}`;
+        }
+        this.props.history.push(url);
+    }
+
+    getMainCode=()=>{
+        const {location}=this.props;
+        let params=Units.transQueryStrToParams(location.search);
+        if('mainCode' in params){
+            return params['mainCode'];
+        }else{
+            return undefined;
+        }
+    }
+
+    getCode=()=>{
+        const {location}=this.props;
+        let params=Units.transQueryStrToParams(location.search);
+        return params['code'];
+    }
+
+    getMode=()=>{
+        const {location}=this.props;
+        let params=Units.transQueryStrToParams(location.search);
+        return this.getCode()?params['mode']:"add";
+    }
+
+    render() {
+        const {location,match}=this.props;
+        const {sourceId,} = match.params;
+        // console.log("this.props.match.params",match);
+        if(!location){
+            return <></>;
+        }
+        let params=Units.transQueryStrToParams(location.search);
+        let versionId=params['versionId'];
+        if(location.pathname.endsWith("detail-view")){
+            return (
+                <ActDtmplView goDtmpl={this.goDtmpl} sourceId={sourceId}  versionId={versionId} code={this.getCode()} mainCode={this.getMainCode()}  />
+            );
+        }else{
+            return (
+                <DtmplEdit addOrUpdate={this.getMode()} sourceId={sourceId} code={this.getCode()} mainCode={this.getMainCode()} goBackToLtmpl={this.goBackToLtmpl} goDtmpl={this.goDtmpl}></DtmplEdit>
+            );
+        }
+
+    }
+}
+
+export default DtmplRoute;
+