aldehyde 0.0.1

package/src/components/detail/edit/modal-dtmpl-edit.tsx

@@ -0,0 +1,198 @@
+import React from 'react';
+import {Button, FormInstance, Modal, Popconfirm} 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";
+import Action from "../../controls/action";
+
+interface ModalEditorProps extends DtmplBaseProps {
+    height: any,
+    visible: boolean,
+    onOk: (code: string) => void,
+    onCancel: () => void,
+
+}
+
+interface ModalEditorState {
+    id:string,
+    dtmplConfig: DtmplConfig,
+    loading: boolean;
+    serial:number,
+    dtmplData:DtmplData,
+}
+
+export default class ModalDtmplEdit extends React.PureComponent<ModalEditorProps, ModalEditorState> {
+    formRef = React.createRef<FormInstance>();
+    autoSaveTimer = -1000000000000000;
+    autoSaveInterval=undefined;
+    onClickBody = (e) => {
+        //  console.log(e);
+        console.log("点击了我" + this.autoSaveTimer);
+        this.autoSaveTimer = 0;
+    }
+    static defaultProps = {
+        showConfirm: true,
+        height: 500,
+        //antd modal
+        forceRender: true,
+        style: {maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)'},
+        okText: "确定",
+        cancelText: "取消",
+
+    }
+    state = {
+        id:'modelDtmplEdit'+Units.getRandomNum(6),
+        dtmplConfig: undefined,
+        loading: true,
+        serial:1,
+        dtmplData:undefined,
+    }
+
+    async componentDidMount() {
+
+        await this.loadConfigData();
+    }
+
+    async componentDidUpdate(prevProps) {
+        const { dtmplConfig} = this.state;
+        if(prevProps && prevProps!=this.props){
+            await this.loadData(dtmplConfig);
+        }
+        // if(this.formRef.current){
+        //     this.formRef.current.resetFields();
+        // }
+    }
+
+    componentWillUnmount(): void {
+        if(this.autoSaveInterval){
+            clearInterval( this.autoSaveInterval);
+        }
+    }
+
+    loadConfigData = async () => {
+        const { sourceId,visible} = this.props;
+        this.setState({
+            loading: true,
+        })
+
+        const dtmplConfig = await HCDataSource.requestDtmplConfig(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,visible} = this.props;
+        if(!visible){
+            return;
+        }
+        if (code) {
+            this.setState({
+                loading: true,
+            })
+            const dtmplData_ = await HcserviceV3.requestDtmplData( sourceId, code, null);
+            this.setState({
+                dtmplData:dtmplData_,
+                //  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();
+    }
+
+    getFooter = () => {
+        const {onCancel} = this.props
+        const {dtmplData,serial}=this.state;
+        const footerButtons = [];
+        footerButtons.unshift(<Popconfirm key="ok" placement="topLeft" title={"确定要保存修改吗?"} onConfirm={() =>this.doSubmit()} okText="确定" cancelText="取消">
+            <Button  type={'primary'} >
+            保 存
+        </Button></Popconfirm>)
+        const {dtmplConfig} = this.state;
+        //处理action
+        if (dtmplConfig) {
+            dtmplConfig.actions.forEach((ac, index) => {
+                footerButtons.unshift(<Action hiddenType={'disabled'}  serial={serial} key={ac.id}  formRef={this.formRef} actionConfig={ac}  doAction={this.doSubmit}></Action>);
+            })
+        }
+        footerButtons.unshift(<Popconfirm key="back" placement="topLeft" title={"确定要取消本次修改内容吗?"} onConfirm={onCancel} okText="确定" cancelText="取消">
+            <Button >
+            取 消
+            </Button></Popconfirm>);
+        return footerButtons;
+    }
+
+    render() {
+        const {height, onOk, onCancel, code, sourceId,  visible,mainCode} = this.props
+        const {dtmplConfig,id,dtmplData} = this.state;
+
+        return <Modal
+            visible={visible}
+            width={1250}
+            title={dtmplConfig ? dtmplConfig.title : ""}
+            bodyStyle={{height: height, overflow: 'auto'}}
+            destroyOnClose={true}
+            centered
+            onCancel={onCancel}
+            footer={this.getFooter()}
+        >
+            {visible} <div onClick={this.onClickBody}>
+                {/*<Scrollbars  autoHide autoHideTimeout={1000}>*/}
+                <DtmplForm parentId={id} dtmplConfig={dtmplConfig} formRef={this.formRef} sourceId={sourceId}
+                           onFinish={onOk}
+                           showConfirm={false} dtmplData={dtmplData} onValuesChange={this.onValuesChange}> </DtmplForm>
+                {/*</Scrollbars>*/}
+            </div>
+        </Modal>
+
+    }
+
+}

package/src/components/detail/edit/modal-row-edit.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import {FormInstance, Modal} from 'antd'
+import {DtmplData, FieldGroupConfig} from "../../tmpl/interface";
+import FieldGroupForm from '../../form/field-group-form';
+
+interface ModalRowEditorProps {
+    height?: any,
+    visible: boolean,
+    onOk: (value: DtmplData) => void,
+    onCancel: () => void,
+    fieldGroupConfig: FieldGroupConfig,
+    dtmplData?: DtmplData,
+}
+
+interface ModalRowEditorState {
+}
+
+export default class ModalRowEdit extends React.PureComponent<ModalRowEditorProps, ModalRowEditorState> {
+    formRef = React.createRef<FormInstance>();
+    static defaultProps = {
+        forceRender: true,
+        style: {maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)'},
+    }
+    state = {}
+
+    async componentDidMount() {
+    }
+
+    async componentDidUpdate() {
+        if (this.formRef.current) {
+            this.formRef.current.resetFields();
+        }
+    }
+
+    onOk = () => {
+        this.formRef.current.submit();
+    }
+
+    getTitle = () => {
+        const {fieldGroupConfig, dtmplData} = this.props
+        let title = "";
+        title = fieldGroupConfig.title;
+        if (dtmplData) {
+            title = title + "【行编辑】";
+        } else {
+            title = title + "【新建一行】";
+        }
+        return title;
+    }
+
+    render() {
+        const {height, onOk, onCancel, fieldGroupConfig, visible, dtmplData} = this.props
+        const {} = this.state;
+        return <Modal
+            visible={visible}
+            width={1150}
+            title={this.getTitle()}
+            bodyStyle={{overflow: 'auto'}}
+            destroyOnClose={true}
+            centered
+            okText={'确定'}
+            cancelText={'取消'}
+            onOk={this.onOk}
+            onCancel={onCancel}
+        >
+            <FieldGroupForm fieldGroupConfig={fieldGroupConfig} formRef={this.formRef}
+                            onFinish={onOk}
+                            dtmplData={dtmplData}> </FieldGroupForm>
+        </Modal>
+    }
+
+}

package/src/components/detail/edit/post-result/index.tsx

@@ -0,0 +1,52 @@
+import React, {ReactNode} from 'react'
+import {Button, Modal, Result} from 'antd'
+import {AddOrUpdate, SaveJumpType} from "../../../tmpl/interface";
+import {ResultStatusType} from "antd/lib/result";
+
+interface PostResultProps {
+    title?: ReactNode,
+    subtitle?: ReactNode,
+    visible: boolean,
+    jumpTypes: SaveJumpType[],
+    addOrUpdate: AddOrUpdate,
+    resultStatus?: ResultStatusType,
+    goAdd: () => void,
+    goEdit: () => void,
+    goList: () => void,
+};
+
+const PostResult: React.FC<PostResultProps> = ({resultStatus='success',...props}) => {
+
+    const {title, visible, subtitle, goAdd, goEdit, goList, jumpTypes, addOrUpdate} = props;
+    return (
+        <Modal
+            title={title ? title : "保存提示"}
+            visible={visible}
+            closable={false}
+            destroyOnClose
+            footer={[]}
+            bodyStyle={{height: 430, overflow: 'auto'}}
+            width={560}
+            maskClosable={true}
+        >
+            <Result status={resultStatus} title={resultStatus === "success" ? "保存成功" : "保存失败"}
+                    subTitle={subtitle}
+                    extra={[goAdd && jumpTypes && jumpTypes.includes('add') ?
+                        <Button key="goOnAdd" onClick={() => goAdd()}>
+                            {addOrUpdate === "update" ? "转添加" : "继续添加"}
+                        </Button> : undefined,
+                        goEdit && jumpTypes && jumpTypes.includes('edit') ?
+                            <Button type="primary" key="goOnEdit" onClick={() => goEdit()}>
+                                {addOrUpdate === "update" ? "继续编辑" : "编辑实体"}
+                            </Button> : "",
+                        goList && jumpTypes && jumpTypes.includes('list') ?
+                            <Button type="primary" key="onBackList" onClick={() => goList()}>
+                                返回列表
+                            </Button> : ""
+                    ]}
+            ></Result>
+        </Modal>
+    )
+}
+
+export default PostResult;

package/src/components/detail/edit/row-edit-card.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import {Button, Card, FormInstance, Popconfirm, Popover, Space, Tooltip} from 'antd'
+import {CloseOutlined} from '@ant-design/icons'
+import {DtmplData, FieldGroupConfig} from "../../tmpl/interface";
+import FieldGroupForm from '../../form/field-group-form';
+import {ButtonType} from "antd/es/button";
+
+interface RowEditCardProps {
+    height?: any,
+    onCancel?: () => void,
+    onOk: (value: DtmplData,hidden:boolean) => void,
+    fieldGroupConfig: FieldGroupConfig,
+    dtmplData?: DtmplData,
+    okButtonType?: ButtonType,
+    okDanger?: boolean,
+    needConfirm?: boolean,
+}
+
+interface RowEditCardState {
+    isAdded:boolean,
+}
+
+export default class RowEditCard extends React.PureComponent<RowEditCardProps, RowEditCardState> {
+    formRef = React.createRef<FormInstance>();
+    static defaultProps = {
+        forceRender: true,
+        style: {maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)'},
+        needConfirm: false,
+        okButtonType: 'primary',
+        okDanger: false,
+    }
+    state = {
+        isAdded:false,
+    }
+
+    async componentDidMount() {
+
+    }
+
+    async componentDidUpdate() {
+        //this.reset();
+    }
+
+    reset = () => {
+        // if (this.formRef.current) {
+        //     this.formRef.current.resetFields();
+        // }
+    }
+
+    onOk = () => {
+        this.setState({isAdded:false})
+        this.formRef.current.submit();
+
+    }
+    add = () => {
+        this.setState({isAdded:true})
+        this.formRef.current.submit();
+    }
+
+    getTitle = () => {
+        const {fieldGroupConfig, dtmplData} = this.props
+        let title = "";
+        title = fieldGroupConfig.title;
+        if (dtmplData) {
+            title = title + "【行编辑】";
+        } else {
+            title = title + "【新建一行】";
+        }
+        return title;
+    }
+
+    render() {
+        const {height, onOk, fieldGroupConfig, dtmplData, onCancel, okButtonType, needConfirm, okDanger} = this.props
+        const {isAdded} = this.state;
+
+        function okButton(onOk) {
+            return needConfirm ? okDanger ?
+                <Popconfirm
+                    placement="rightBottom"
+                    title={`确定要执行提交吗？`}
+                    onConfirm={onOk}
+                    okText="确定"
+                    cancelText="取消"
+                    okType={'danger'}
+                >
+                    <Button type={okButtonType} danger={true} size="small"
+                    >确定</Button>
+                </Popconfirm> :
+                <Popconfirm
+                    placement="rightBottom"
+                    title={`确定要执行提交吗？`}
+                    onConfirm={onOk}
+                    okText="确定"
+                    cancelText="取消"
+                >
+                    <Button size="small" type={okButtonType}
+                    >确定</Button>
+                </Popconfirm> :
+                <Button type={okButtonType} size="small" onClick={onOk}
+                >确定</Button>
+        }
+
+        return <Card
+            style={{width: 1000}}
+            title={this.getTitle()}
+            bodyStyle={{overflow: 'auto'}}
+            extra={<><Space size={[8, 0]}>
+                {/*<Button onClick={this.reset}>重置</Button>*/}
+                {okButton(this.onOk)}
+                {
+                    dtmplData?"":  <Tooltip placement="top" title="可连续添加">
+                        <Button type={'primary'} size={'small'} onClick={this.add}>添加</Button>
+                    </Tooltip>
+                }
+
+                {onCancel ? <Button onClick={onCancel}><CloseOutlined/></Button> : ""}
+            </Space></>}
+        >
+            <FieldGroupForm fieldGroupConfig={fieldGroupConfig} formRef={this.formRef}
+                            onFinish={(value)=>onOk(value,!isAdded)}
+                            dtmplData={dtmplData}> </FieldGroupForm>
+        </Card>
+    }
+
+}

package/src/components/detail/edit/row-editor.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import {Button, FormInstance, Popover, Tooltip} from 'antd'
+import {DtmplData, FieldGroupConfig} from "../../tmpl/interface";
+import {RenderFunction} from "antd/lib/tooltip";
+import RowEditCard from './row-edit-card'
+interface RowEditorProps {
+    buttonTitle?: string,
+    buttonIcon: React.ReactNode,
+    tooltipTitle?: React.ReactNode | RenderFunction;
+    fieldGroupConfig: FieldGroupConfig;
+    dtmplData?: DtmplData;
+    onOk:(value: DtmplData) => void,
+    buttonStyle?:object,
+}
+
+interface RowEditorState {
+    popoverVisible: boolean,
+}
+
+export default class RowEditor extends React.PureComponent<RowEditorProps, RowEditorState> {
+    formRef = React.createRef<FormInstance>();
+    static defaultProps = {
+        buttonIcon:undefined
+    }
+    state = {
+        popoverVisible: false,
+    }
+
+    async componentDidMount() {
+
+    }
+
+    async componentDidUpdate() {
+    }
+
+    // reset = () => {
+    //     if (this.formRef.current) {
+    //         this.formRef.current.resetFields();
+    //     }
+    // }
+
+    onOk = (value,hidden:boolean=true) => {
+        if(hidden){
+            this.setState({popoverVisible:false});
+        }
+
+       this.props.onOk(value);
+    }
+
+
+    render() {
+        const {popoverVisible}=this.state;
+        const {buttonIcon, buttonTitle, tooltipTitle, fieldGroupConfig, dtmplData,buttonStyle} = this.props;
+        return <Popover  destroyTooltipOnHide={true} placement="leftBottom" visible={popoverVisible}
+                        content={<RowEditCard fieldGroupConfig={fieldGroupConfig} dtmplData={dtmplData}
+                                              onCancel={()=>{
+                                                  this.setState({popoverVisible:false});}
+                                              }   onOk={this.onOk}></RowEditCard>} trigger="click">
+            <Tooltip placement="left" title={tooltipTitle}>
+                <Button
+                    style={buttonStyle}
+                    type='primary'
+                    icon={buttonIcon}
+                    size="small"
+                    onClick={() => {
+                        this.setState({popoverVisible:!popoverVisible});
+                    }}
+                >{buttonTitle?buttonTitle:""}</Button></Tooltip></Popover>
+    }
+
+}

package/src/components/detail/rightbar/index.css

@@ -0,0 +1,35 @@
+.rightBar{
+    background: #fff;
+    /*position: absolute;*/
+    /*right:10px;*/
+    /*top:80px;*/
+    border:1px solid #e8e8e8;
+    border-radius: 4px;
+    box-shadow: 2px 2px 10px rgba(0,0,0,.2);
+    height:200px;
+    /*max-height:181px;*/
+    /*min-height:80px;*/
+    min-width: 96px;
+    overflow:auto;
+}
+.rightBar::-webkit-scrollbar {
+    display: none;
+}
+.rightBar ul{
+    padding:0;
+    margin:0;
+}
+.rightBar li{
+    list-style-type: none;
+    cursor: pointer;
+    padding:3px 7px;
+    width:95px;
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-align: left;
+    overflow: hidden;
+}
+.rightBar li:hover{
+    background: #cfe3f5;
+}

package/src/components/detail/rightbar/index.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import './index.css'
+import {DtmplConfig, TmplBase} from "../../tmpl/interface";
+import {Affix, Button} from "antd";
+
+interface RightBarProps {
+    parentId:string,
+    dtmplConfig: DtmplConfig,
+    positionRight?:number
+}
+
+
+interface RightBarState {
+
+}
+
+export default class RightBar extends React.PureComponent<RightBarProps, RightBarState> {
+
+    static defaultProps = {
+        positionRight:15,
+    }
+    scrollToAnchor = (anchor: TmplBase) => {
+        if (anchor) {
+            let anchorElement = document.getElementById(this.props.parentId+anchor.id);
+            if (anchorElement) {
+                anchorElement.scrollIntoView({behavior: "smooth", block: "end"})
+            }
+        }
+    }
+    scroll = (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        const list = document.getElementsByClassName("rightBar")[0]
+        if (list) {
+            const ul = list.getElementsByTagName("ul")[0]
+            ul.style.marginTop = ""
+        }
+    }
+
+    render() {
+        const {dtmplConfig,positionRight} = this.props
+        const cardList: TmplBase[] = [];
+
+        if(dtmplConfig){
+            dtmplConfig.groups.forEach(g => {
+                cardList.push({
+                    title: g.title,
+                    id: g.id,
+                });
+            })
+        }
+
+        if (dtmplConfig && dtmplConfig.premises && dtmplConfig.premises.length > 0) {
+            cardList.push({
+                id: dtmplConfig.premises[0].id, title: '默认字段',
+            });
+        }
+
+        // @ts-ignore
+        return (
+            cardList && cardList.length>3?
+            <Affix  style={{position: 'absolute',top:60,right: positionRight,}}  offsetTop={80}>
+                <div className={'rightBar'} onScroll={this.scroll}>
+                    <ul>
+                        {
+                            cardList ? cardList.map((item, index) =>
+                                <li onClick={() => this.scrollToAnchor(item)} key={index}>{item.title}</li>
+
+                            ) : ""
+                        }
+                    </ul>
+                </div>
+            </Affix>:""
+        )
+    }
+}