aldehyde 0.0.4 → 0.0.5

package/src/components/login.js

@@ -0,0 +1,137 @@
+import React from 'react'
+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/components/module/dtmpl-page.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import {DtmplConfig, 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";
+import ActDtmplView from "../detail/view/act-dtmpl-view";
+
+//以列表为入口的，页面内列表，基本原则是所有交互在页面内完成，不会触发路由。
+
+export interface DtmplPageProps  {
+    sourceId?:string,
+    code?:string;
+    mainCode?:string;
+};
+
+export interface DtmplPageState  {
+    showDtmplEdit:boolean;
+};
+
+class DtmplPage extends React.PureComponent<DtmplPageProps, DtmplPageState> {
+
+    state = {
+        showDtmplEdit:false,
+    }
+
+    // async componentDidMount() {
+    //     this.loadDtmplConfig();
+    // }
+    //
+    // async componentDidUpdate(prevProps) {
+    //     const { sourceId} = this.props;
+    //     if(!prevProps || prevProps.sourceId!=sourceId){
+    //         this.loadDtmplConfig();
+    //     }
+    // }
+
+    goDtmpl=()=>{
+        this.setState({
+            showDtmplEdit:true,
+        })
+    }
+
+    handleDtmplEdit =  (code: string) => {
+        this.setState({
+            showDtmplEdit:false,
+        })
+    }
+
+    render() {
+        const {showDtmplEdit} = this.state;
+        const { sourceId,code,mainCode} = this.props;
+            return <>
+                <ActDtmplView goDtmpl={this.goDtmpl} sourceId={sourceId} code={code} mainCode={mainCode}></ActDtmplView>
+                    <ModalDtmplEdit visible={showDtmplEdit} onCancel={()=>{
+                        this.setState({
+                            showDtmplEdit:false,
+                        })}}
+                                    sourceId={sourceId}
+                                    code={code}
+                                    onOk={this.handleDtmplEdit} />
+              </>
+    }
+}
+
+export default DtmplPage;
+

package/src/components/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/components/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()}></ActDtmplView>
+            );
+        }else{
+            return (
+                <DtmplEdit addOrUpdate={this.getMode()} sourceId={sourceId} code={this.getCode()} mainCode={this.getMainCode()} goBackToLtmpl={this.goBackToLtmpl} goDtmpl={this.goDtmpl}></DtmplEdit>
+            );
+        }
+
+    }
+}
+
+export default DtmplRoute;
+

package/src/components/routable/import-route.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import {RouterCompProps} from '../tmpl/interface';
+import ExcelImport from '../import/excel-import'
+
+export interface ImportRouteProps extends RouterCompProps {
+
+};
+interface ImportRoutePropsStat{
+
+}
+
+class ExcelImportRoute extends React.PureComponent<ImportRouteProps, ImportRoutePropsStat> {
+
+    state = {}
+
+    async componentDidMount() {
+
+    }
+
+
+    render() {
+        const {location, match, history} = this.props;
+        const { sourceId} = match.params;
+       return <ExcelImport  sourceId={sourceId}></ExcelImport>
+    }
+}
+export default ExcelImportRoute;
+

package/src/components/routable/ltmpl-route.tsx

@@ -0,0 +1,158 @@
+import React from 'react'
+import {LtmplConfigRes, RouterCompProps} 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";
+
+
+export interface LtmplRouteProps extends RouterCompProps {
+
+};
+
+export interface LtmplRouteState {
+
+    ltmplConfigRes: LtmplConfigRes,
+};
+
+class LtmplRoute extends React.PureComponent<LtmplRouteProps, LtmplRouteState> {
+
+    state = {
+        ltmplConfigRes: undefined,
+    }
+
+    async componentDidMount() {
+        this.loadData();
+    }
+
+    onRoute = (path) => {
+        this.props.history.push(path);
+    }
+
+    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;
+    }
+
+    loadData = async () => {
+        const {location} = this.props;
+        const { sourceId} = this.props.match.params;
+        let criteriaData = Units.transQueryStrToParams(this.props.location.search);
+        console.log('acttable location search:', this.props.location.search);
+        let ltmplConfigRes = await HCDataSource.requestLtmplConfig(sourceId);
+        this.setState({
+            ltmplConfigRes,
+        })
+    }
+
+    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()}`);
+    }
+
+    doEdit = (code: string,mode:string) => {
+        const { sourceId} = this.props.match.params;
+        let mainCode = this.getMainCode();
+        let path = `/${sourceId}/detail-edit?code=${code}&menuId=${this.getMenuId()}&mode=${mode}`;
+        if (mainCode) {
+            path = path + `&mainCode=${mainCode}`;
+        }
+        this.onRoute(path);
+    }
+
+    getMainCode = () => {
+        const {location} = this.props;
+        let search = location.search;
+        let mainCode = undefined;
+        let criteriaData = Units.transQueryStrToParams(search);
+        if (search.indexOf('mainCode') > 0) {
+            criteriaData = Units.transQueryStrToParams(search);
+            mainCode = criteriaData['mainCode'];
+        }
+        return mainCode;
+    }
+
+    doCreate = () => {
+        const { sourceId} = this.props.match.params;
+        let path = `/${sourceId}/detail-edit?menuId=${this.getMenuId()}`;
+        let mainCode = this.getMainCode();
+        if (mainCode) {
+            path = path + `&mainCode=${mainCode}`;
+        }
+        this.onRoute(path);
+    }
+
+    doSearch = (params_) => {
+        const { sourceId} = this.props.match.params;
+        //const oldfliter = history.location.search.slice(1);
+
+        let params = {...params_}
+        //追加过滤条件，hiddenColIds，innerQueryKey
+        let mainCode = this.getMainCode();
+        if (mainCode) {
+            params['mainCode'] = mainCode;
+        }
+        params['sourceId'] = sourceId;
+        const newfliter = Units.transQueryParamsToStr(params);
+       // let flag = true;
+        //if (newfliter && oldfliter != newfliter) { //查询条件更新时
+        this.onRoute(`/${sourceId}/act-table?menuId=${this.getMenuId()}&${newfliter}`)
+        // }else{
+        //     params['serial']=Units.getRandomNum(6);
+        // }
+        // else {
+        //     this.loadData(hiddenColIds, hiddenRowCodes, sortedColConfigs);
+        // }
+    }
+
+
+    render() {
+        const {ltmplConfigRes} = this.state;
+        const {location, match} = this.props;
+        const { sourceId} = match.params;
+        let menuId = undefined;
+        let mainCode = undefined;
+        let search = location.search;
+        let criteriaData = Units.transQueryStrToParams(search);
+        if (search.indexOf('menuId') > 0) {
+            menuId = criteriaData['menuId'];
+            criteriaData['menuId']=undefined;
+        } else  {
+            menuId = sourceId;
+        }
+        if (search.indexOf('mainCode') > 0) {
+            criteriaData = Units.transQueryStrToParams(search);
+            mainCode = criteriaData['mainCode'];
+        }
+        if (!ltmplConfigRes) {
+            return <></>;
+        } else {
+            return <ActTable menuId={this.getMenuId()} mainCode={mainCode} showView={this.showView}
+                             doSearch={this.doSearch} doEdit={this.doEdit} doCreate={this.doCreate}
+                             sourceId={sourceId} criteriaData={criteriaData}
+                             ltmplConfig={ltmplConfigRes.ltmplConfig}/>
+        }
+
+    }
+}
+
+export default LtmplRoute;
+