aldehyde 0.2.6 → 0.2.8

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

@@ -1,8 +1,6 @@
 import React from 'react'
-import { Drawer, Space,Button} from 'antd'
 import {SolutionOutlined} from '@ant-design/icons';
-import DtmplViewCard from "../../detail/view/dtmpl-view-card";
-import DtmplViewPage from "../../detail/view/dtmpl-view-page";
+import DtmplViewDrawer from "../../module/dtmpl-view-drawer";
 
 interface UserInfoBarProps {
 
@@ -38,7 +36,7 @@ class UserInfoBar extends React.PureComponent<UserInfoBarProps, UserInfoBarState
         return (
             <>
                 <span onClick={this.showDraw}><SolutionOutlined />个人信息</span>
-                {showDraw?<DtmplViewPage title={'个人信息'} width={'calc(100% - 280px)'} pageType={'drawer'} sourceId={'0'} open={showDraw} code={"userCode"} onClose={this.closeDrawer}></DtmplViewPage>:null}
+                {showDraw?<DtmplViewDrawer title={'个人信息'} width={'calc(100% - 280px)'}  sourceId={'0'} open={showDraw} code={"userCode"} onClose={this.closeDrawer}></DtmplViewDrawer>:null}
             </>
         );
     }

package/src/aldehyde/{detail/edit → module}/dtmpl-edit-card.tsx

@@ -1,11 +1,11 @@
 import React, {ReactNode} from 'react';
 import {Button, Drawer, FormInstance, Modal, Popconfirm, Space,Card} from 'antd'
-import {DtmplBaseProps, DtmplConfig, DtmplData, PageType} from "../../tmpl/interface";
-import DtmplForm from '../../form/dtmpl-form';
-import HCDataSource from "../../tmpl/hc-data-source";
-import Units from "../../units";
-import HcserviceV3 from "../../tmpl/hcservice-v3";
-import Action from "../../controls/action";
+import {DtmplBaseProps, DtmplConfig, DtmplData, PageType} from "../tmpl/interface";
+import DtmplForm from '../form/dtmpl-form';
+import HCDataSource from "../tmpl/hc-data-source";
+import Units from "../units";
+import HcserviceV3 from "../tmpl/hcservice-v3";
+import Action from "../controls/action";
 
 interface DtmplEditCardProps extends DtmplBaseProps {
     onOk?: (code: string) => void,

package/src/aldehyde/module/dtmpl-edit-drawer.tsx

@@ -0,0 +1,24 @@
+import React, {ReactNode} from 'react';
+import {DtmplBaseProps} from "../tmpl/interface";
+import DtmplEditPage from "./dtmpl-edit-page";
+
+interface DtmplEditDrawerProps extends DtmplBaseProps {
+    width?: number,
+    open: boolean,
+    onOk: (code: string) => void,
+    onCancel: () => void,
+    title?: ReactNode,
+    placement?:'top' | 'right' | 'bottom' | 'left',
+}
+
+interface DtmplEditDrawerState {
+
+}
+
+export default class DtmplEditDrawer extends React.PureComponent<DtmplEditDrawerProps, DtmplEditDrawerState> {
+
+    render() {
+        return <DtmplEditPage pageType={'drawer'} {...this.props}></DtmplEditPage>
+    }
+
+}

package/src/aldehyde/module/dtmpl-edit-modal.tsx

@@ -0,0 +1,25 @@
+import React, {ReactNode} from 'react';
+import {DtmplBaseProps} from "../tmpl/interface";
+import DtmplEditPage from "./dtmpl-edit-page";
+
+interface DtmplEditModalProps extends DtmplBaseProps {
+    height?: any,
+    width?: number,
+    open: boolean,
+    onOk: (code: string) => void,
+    onCancel: () => void,
+    title?: ReactNode,
+}
+
+interface DtmplEditModalState {
+
+}
+
+export default class DtmplEditModal extends React.PureComponent<DtmplEditModalProps, DtmplEditModalState> {
+
+
+    render() {
+        return <DtmplEditPage {...this.props}></DtmplEditPage>
+    }
+
+}

package/src/aldehyde/{detail/edit → module}/dtmpl-edit-page.tsx

@@ -1,11 +1,11 @@
 import React, {ReactNode} from 'react';
 import {Button, Drawer, FormInstance, Modal, Popconfirm, Space,Card} from 'antd'
-import {DtmplBaseProps, DtmplConfig, DtmplData, PageType} from "../../tmpl/interface";
-import DtmplForm from '../../form/dtmpl-form';
-import HCDataSource from "../../tmpl/hc-data-source";
-import Units from "../../units";
-import HcserviceV3 from "../../tmpl/hcservice-v3";
-import Action from "../../controls/action";
+import {DtmplBaseProps, DtmplConfig, DtmplData, PageType} from "../tmpl/interface";
+import DtmplForm from '../form/dtmpl-form';
+import HCDataSource from "../tmpl/hc-data-source";
+import Units from "../units";
+import HcserviceV3 from "../tmpl/hcservice-v3";
+import Action from "../controls/action";
 
 interface ModalEditorProps extends DtmplBaseProps {
     height?: any,
@@ -70,9 +70,6 @@ export default class DtmplEditPage extends React.PureComponent<ModalEditorProps,
                 await this.loadData(dtmplConfig);
             }
         }
-        // if(this.formRef.current){
-        //     this.formRef.current.resetFields();
-        // }
     }
 
     componentWillUnmount(): void {

package/src/aldehyde/module/dtmpl-editor.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import {FormInstance} from 'antd'
+import {DtmplBaseProps, DtmplConfig, DtmplData} from "../tmpl/interface";
+import DtmplForm from '../form/dtmpl-form';
+import HCDataSource from "../tmpl/hc-data-source";
+import Units from "../units";
+import HcserviceV3 from "../tmpl/hcservice-v3";
+
+interface ModalEditorProps extends DtmplBaseProps {
+    onOk: (code: string) => void,
+    onCancel: () => void,
+    open:boolean,
+}
+
+interface ModalEditorState {
+    id:string,
+    dtmplConfig: DtmplConfig,
+    loading: boolean;
+    serial:number,
+    dtmplData:DtmplData,
+}
+
+export default class DtmplEditPage extends React.PureComponent<ModalEditorProps, ModalEditorState> {
+    formRef = React.createRef<FormInstance>();
+    autoSaveTimer = -1000000000000000;
+    autoSaveInterval=undefined;
+    onClickBody = (e) => {
+        this.autoSaveTimer = 0;
+    }
+    static defaultProps = {
+
+    }
+    state = {
+        id:'modelDtmplEdit'+Units.getRandomNum(6),
+        dtmplConfig: undefined,
+        loading: true,
+        serial:1,
+        dtmplData:undefined,
+    }
+
+    async componentDidMount() {
+        if(this.props.open){
+            await this.loadConfigData();
+        }
+    }
+
+    async componentDidUpdate(prevProps) {
+        const { dtmplConfig} = this.state;
+        if(prevProps && prevProps!=this.props){
+            if(prevProps.sourceId!=this.props.sourceId || dtmplConfig==null){
+                await this.loadConfigData();
+            }else{
+                await this.loadData(dtmplConfig);
+            }
+        }
+    }
+
+    componentWillUnmount(): void {
+        if(this.autoSaveInterval){
+            clearInterval( this.autoSaveInterval);
+        }
+    }
+
+    loadConfigData = async () => {
+        const { sourceId,open,code} = this.props;
+        this.setState({
+            loading: true,
+        })
+        let dtmplConfig=undefined;
+        if(code){
+            dtmplConfig = await HCDataSource.requestDtmplConfig(sourceId);
+        }else{
+            dtmplConfig = await HCDataSource.requestAddDtmplConfig(sourceId);
+        }
+
+        if(dtmplConfig.authSaveInterval && dtmplConfig.authSaveInterval>0){
+            if(this.autoSaveInterval){
+                clearInterval( this.autoSaveInterval);
+            }
+            this.autoSaveInterval = setInterval(() => {
+                if(this.autoSaveTimer>=dtmplConfig.authSaveInterval){
+                    //console.log('执行自动保存');
+                    this.autoSaveTimer=-1000000000000000;
+                    this.doSubmit(undefined);
+                }else{
+                    this.autoSaveTimer=this.autoSaveTimer+1;
+                }
+            }, 1000);
+        }
+        await this.loadData(dtmplConfig);
+        this.setState({
+            dtmplConfig,
+            loading: false,
+        })
+    }
+
+    loadData = async (dtmplConfig:DtmplConfig ) => {
+        const { sourceId, code,defaultDtmplData,open} = this.props;
+        if(!open){
+            return;
+        }
+        if (code) {
+            this.setState({
+                loading: true,
+            })
+            const dtmplData_ = await HcserviceV3.requestDtmplData( sourceId, code, null);
+            this.setState({
+                dtmplData:dtmplData_,
+                id:code,
+                //  changedGroupData:new Map<number,DtmplData[]>(),
+                loading: false,
+            })
+        }else if(defaultDtmplData){
+            this.setState({
+                dtmplData:defaultDtmplData,
+                loading: false,
+            })
+        }else{
+            this.setState({
+                dtmplData:{code:undefined,title:undefined,fieldMap:{},arrayMap:{}},
+                loading: false,
+            })
+        }
+        setTimeout(()=> this.onValuesChange(),300);
+    }
+
+    onValuesChange=()=>{
+        this.setState({
+            serial:this.state.serial+1
+        })
+    }
+
+    doSubmit = (actionId?: number,codes?:string[],params?:object) => {
+        const {mainCode}=this.props;
+        if (actionId) {
+            this.formRef.current.setFieldsValue({'actionId': actionId});
+        }
+        if(mainCode){
+            this.formRef.current.setFieldsValue({'mainCode': mainCode});
+        }
+        if(params){
+            this.formRef.current.setFieldsValue(params);
+        }
+        this.formRef.current.submit();
+    }
+
+    render() {
+        const {onOk,sourceId,mainCode,maxColsOnRow} = this.props
+        const {dtmplConfig,id,dtmplData} = this.state;
+        return  <DtmplForm mainCode={mainCode} parentId={id} dtmplConfig={dtmplConfig} formRef={this.formRef} sourceId={sourceId}
+                                   onFinish={onOk}   maxColsOnRow={maxColsOnRow}
+                                   showConfirm={false} dtmplData={dtmplData} onValuesChange={this.onValuesChange} />
+       }
+
+}

package/src/aldehyde/{detail/view → module}/dtmpl-view-card.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import DtmplEditPage from "../edit/dtmpl-edit-page";
-import ActDtmplView from "./act-dtmpl-view";
+import ActDtmplView from "./../detail/view/act-dtmpl-view";
+import DtmplEditModal from './dtmpl-edit-modal';
 
 //以列表为入口的，页面内列表，基本原则是所有交互在页面内完成，不会触发路由。
 
@@ -48,7 +48,7 @@ class DtmplViewCard extends React.PureComponent<DtmplViewCardProps, DtmplViewCar
         const { sourceId,code,mainCode} = this.props;
             return <>
                 <ActDtmplView goDtmpl={this.goDtmpl} sourceId={sourceId} code={code} mainCode={mainCode}></ActDtmplView>
-                {showDtmplEdit? <DtmplEditPage open={showDtmplEdit} onCancel={()=>{
+                {showDtmplEdit? <DtmplEditModal open={showDtmplEdit} onCancel={()=>{
                         this.setState({
                             showDtmplEdit:false,
                         })}}

package/src/aldehyde/module/dtmpl-view-drawer.tsx

@@ -0,0 +1,62 @@
+import React, {ReactNode} from 'react'
+import {Drawer, Space, Button} from 'antd'
+import DtmplViewCard from "./dtmpl-view-card";
+import {DtmplBaseProps} from "../tmpl/interface";
+
+interface DtmplViewDrawerProps extends DtmplBaseProps{
+    title?:ReactNode,
+    open: boolean,
+    onClose: () => void,
+    placement?:'top' | 'right' | 'bottom' | 'left',
+    width?:string|number,
+    cancelText:string,
+}
+
+interface DtmplViewDrawerState {
+
+}
+
+
+class DtmplViewDrawer extends React.PureComponent<DtmplViewDrawerProps, DtmplViewDrawerState> {
+    state={
+
+    }
+
+    static defaultProps = {
+        height: 500,
+        width:1250,
+        forceRender: true,
+        cancelText: "关闭",
+        placement:'left',
+        open:false,
+    }
+
+    async componentDidMount() {
+
+    }
+
+    render() {
+        const {title,sourceId,code,placement,open,onClose,width,cancelText}=this.props;
+        return  (<Drawer
+                    placement={placement}
+                    title={title}
+                    closable={true}
+                    mask={false}
+                    onClose={onClose}
+                    open={open}
+                    width={width}
+                    style={{
+                        maxWidth: 1960,
+                    }}
+                    extra={
+                        <Space>
+                            <Button onClick={()=>onClose()}>{cancelText}</Button>
+                        </Space>
+                    }
+                >
+                   <DtmplViewCard sourceId={sourceId} code={code}></DtmplViewCard>
+                </Drawer>)
+    }
+}
+
+export default DtmplViewDrawer;

package/src/aldehyde/module/dtmpl-view-modal.tsx

@@ -0,0 +1,51 @@
+import React, {ReactNode} from 'react'
+import { Modal} from 'antd'
+import DtmplViewCard from "./dtmpl-view-card";
+import {DtmplBaseProps} from "../tmpl/interface";
+
+interface DtmplViewModalProps extends DtmplBaseProps{
+    title?:ReactNode,
+    open: boolean,
+    onClose: () => void,
+    width?:string|number,
+    height?:string|number,
+}
+
+interface DtmplViewModalState {
+
+}
+
+
+class DtmplViewModal extends React.PureComponent<DtmplViewModalProps, DtmplViewModalState> {
+    state={
+
+    }
+
+    static defaultProps = {
+        height: 500,
+        width:1250,
+        forceRender: true,
+        style: {maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)'},
+        open:false,
+    }
+
+    async componentDidMount() {
+
+    }
+
+    render() {
+        const {title,sourceId,code,open,onClose,width,height}=this.props;
+        return <Modal
+                    open={open}
+                    width={width}
+                    title={title}
+                    bodyStyle={{height: height, overflow: 'auto'}}
+                    destroyOnClose={true}
+                    centered
+                    onCancel={onClose}
+                ><DtmplViewCard sourceId={sourceId} code={code}></DtmplViewCard>
+                </Modal>
+    }
+}
+
+export default DtmplViewModal;

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

@@ -0,0 +1,58 @@
+import React, {ReactNode} from 'react';
+import {Drawer} from 'antd'
+import LtmplTable, {LtmplTableProps} from "./ltmpl-table";
+
+
+interface LtmplDrawPageProps extends LtmplTableProps {
+    onCancel: () => void,
+    placement?:'top' | 'right' | 'bottom' | 'left',
+    title?:ReactNode,
+    width?:number,
+    open:boolean,
+}
+
+interface LtmplDrawPageState {
+
+}
+
+export default class LtmplDrawer extends React.PureComponent<LtmplDrawPageProps, LtmplDrawPageState> {
+
+    static defaultProps = {
+        showConfirm: true,
+        width:1250,
+        forceRender: true,
+        style: {maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)'},
+        okText: "确定",
+        cancelText: "取消",
+        placement:'left',
+    }
+    state = {
+
+    }
+
+
+    render() {
+        const {title,placement,width,onCancel,open,...other} = this.props
+
+        return (<Drawer
+                title={title}
+                placement={placement}
+                closable={true}
+                mask={false}
+                onClose={onCancel}
+                open={open}
+                width={width}
+                style={{
+                    maxWidth: 1960,
+                }}
+                // extra={
+                //     <Space>{this.getFooter()}</Space>
+                // }
+            >
+                <LtmplTable {...other}></LtmplTable>
+        </Drawer>
+    )
+
+    }
+
+}

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

@@ -0,0 +1,52 @@
+import React, {ReactNode} from 'react';
+import { Modal} from 'antd'
+import LtmplTable, {LtmplTableProps} from "./ltmpl-table";
+
+
+interface LtmplDrawPageProps extends LtmplTableProps {
+    onCancel: () => void,
+    title?:ReactNode,
+    width?:number|string,
+    height?:number|string,
+    open:boolean,
+}
+
+interface LtmplDrawPageState {
+
+}
+
+export default class LtmplDrawer extends React.PureComponent<LtmplDrawPageProps, LtmplDrawPageState> {
+
+    static defaultProps = {
+        showConfirm: true,
+        height: 500,
+        width:1250,
+        forceRender: true,
+        style: {maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)'},
+        okText: "确定",
+        cancelText: "取消",
+    }
+    state = {
+
+    }
+
+
+    render() {
+        const {title,height,width,onCancel,open,...other} = this.props
+
+        return (<Modal
+                open={open}
+                width={width}
+                title={title}
+                bodyStyle={{height: height, overflow: 'auto'}}
+                destroyOnClose={true}
+                centered
+                onCancel={onCancel}
+            >
+                <LtmplTable {...other}></LtmplTable>
+        </Modal>
+    )
+
+    }
+
+}