aldehyde 0.0.12 → 0.1.1

package/src/aldehyde/detail/button/cquery-button-bar.tsx

@@ -0,0 +1,112 @@
+import React, {RefObject} from 'react'
+import './index.css'
+import {ActionConfig, ButtonName, CQueryConfig, DtmplConfig, DtmplData, TmplBase} from "../../../aldehyde/tmpl/interface";
+import {Affix, Button, Popconfirm, Popover,Space} from "antd";
+import {LeftOutlined, SaveOutlined} from '@ant-design/icons';
+import CquickButton from "../../controls/cquery/cquick-button";
+
+interface CqueryButtonBarProps {
+    dtmplConfig: DtmplConfig,
+    mainCode:string,
+}
+
+
+interface CqueryButtonBarState {
+   // stateSerial:number
+}
+
+class CqueryButtonBar extends React.PureComponent<CqueryButtonBarProps, CqueryButtonBarState> {
+
+    state={
+      // stateSerial:0,
+    }
+
+    calcOffsetBottom = (cQuerys: CQueryConfig[]) => {
+
+        if (cQuerys.length>=3) {
+            return 120;
+        } else if (cQuerys.length==2){
+            return 86;
+        }else{
+            return 80;
+        }
+    }
+
+   //  async componentDidMount() {
+   //      console.log("SubmitButtonBar this.loadData()");
+   //
+   //      console.log("SubmitButtonBar this.loadData()1");
+   //          //  if(code!=preCode || (!code && preCode)){
+   //          //     await this.loadData();
+   //          // }else{
+   //          //      formRef.current.resetFields();
+   //          //  }
+   // }
+
+    // loadData = async () => {
+    //     console.log("SubmitButtonBar this.loadData()2");
+    //     this.setState({
+    //         stateSerial: this.state.stateSerial + 1,
+    //     })
+    // }
+
+    render() {
+       const {}=this.state;
+        const {dtmplConfig,mainCode} = this.props
+
+        if(!dtmplConfig){
+            return null;
+        }
+
+        const {buttons, cQuerys} = dtmplConfig;
+        const cardList: TmplBase[] = [];
+
+        let content
+        if (cQuerys && cQuerys.length > 3) {
+            content = (
+                <div style={{width:'100px'}} className="btns">
+                    <Space direction="vertical">
+                        {cQuerys.map((item, index) => {
+                            if (index > 2) {
+                                return <CquickButton  block={true} key={item.id}  mainCode={mainCode} cQueryConfig={item}  ></CquickButton>
+                            }
+                        })
+                        }
+                    </Space>
+
+                </div>
+            );
+        }
+        //offsetBottom={this.calcOffsetBottom(cQuerys)}
+        return (
+            (cQuerys && cQuerys.length>0 &&  mainCode)?<Affix style={{position: 'absolute',top:180, right: 10, maxHeight: 90}}
+                   offsetTop={300} >
+                <div className={'submitButtonBar'} >
+                    <ul>
+                        {
+                            cQuerys ? cQuerys.map((item, index) => {
+                                    if (index < 3) {
+                                        return <li key={index}>
+                                            <CquickButton type={'text'}  block={true} key={item.id}  mainCode={mainCode} cQueryConfig={item}  ></CquickButton>
+                                        </li>
+                                    }
+                                }
+                            ) : ""
+                        }
+                        {//处理后面的
+                            cQuerys && cQuerys.length > 2 ?
+                                <Popover placement="leftTop" content={content} trigger="hover">
+                                    <Button block >
+                                        <LeftOutlined/>{'更多'}
+                                    </Button>
+                                </Popover> : ""
+                        }
+                    </ul>
+                </div>
+            </Affix>:""
+        )
+    }
+}
+
+export default CqueryButtonBar;
+

package/src/aldehyde/detail/button/submit-button-bar.tsx

@@ -0,0 +1,151 @@
+import React, {RefObject} from 'react'
+import './index.css'
+import {ActionConfig, ButtonName, DtmplConfig, DtmplData, TmplBase} from "../../../aldehyde/tmpl/interface";
+import {Affix, Button, Popconfirm, Popover} from "antd";
+import {LeftOutlined, SaveOutlined} from '@ant-design/icons';
+import Action from "../../controls/action";
+import {FormInstance} from "antd/lib/form/hooks/useForm";
+
+interface SubmitButtonProps {
+    dtmplConfig: DtmplConfig,
+   // dtmplData:DtmplData,
+    doSubmit: (actionId?: string,codes?:string[],params?:object) => void;
+    formRef: RefObject<FormInstance>,
+    serial:number,
+
+}
+
+
+interface SubmitButtonState {
+   // stateSerial:number
+}
+
+class SubmitButtonBar extends React.PureComponent<SubmitButtonProps, SubmitButtonState> {
+
+    state={
+      // stateSerial:0,
+    }
+
+    calcOffsetBottom = (buttons: ButtonName[], actions: ActionConfig[]) => {
+        let buttonSize:number=0;
+        if(actions ){
+            buttonSize=buttonSize+actions.length;
+        }
+        if((buttons && buttons.includes('dtmplSave')) ){
+            buttonSize=buttonSize+1;
+        }
+        if (buttonSize>=3) {
+            return 120;
+        } else if (buttonSize==2){
+            return 86;
+        }else{
+            return 80;
+        }
+    }
+
+   //  async componentDidMount() {
+   //      console.log("SubmitButtonBar this.loadData()");
+   //
+   //      console.log("SubmitButtonBar this.loadData()1");
+   //          //  if(code!=preCode || (!code && preCode)){
+   //          //     await this.loadData();
+   //          // }else{
+   //          //      formRef.current.resetFields();
+   //          //  }
+   // }
+
+    // loadData = async () => {
+    //     console.log("SubmitButtonBar this.loadData()2");
+    //     this.setState({
+    //         stateSerial: this.state.stateSerial + 1,
+    //     })
+    // }
+
+    render() {
+       const {}=this.state;
+        const {dtmplConfig, doSubmit,formRef,serial} = this.props
+        const {buttons, actions} = dtmplConfig;
+        const cardList: TmplBase[] = [];
+
+        console.log(" submit-button-bar serial:",serial);
+       // console.log(" submit-button-bar stateSerial:",stateSerial);
+
+        if (dtmplConfig.premises && dtmplConfig.premises.length > 0) {
+            cardList.push({
+                id: '1', title: '默认字段',
+            });
+        }
+        dtmplConfig.groups.forEach(g => {
+            cardList.push({
+                title: g.title,
+                id: g.id,
+            });
+        })
+
+        let content
+        if (actions && actions.length > 1) {
+            content = (
+                <div className="btns">
+                    {actions.map((item, index) => {
+                        if (index > 1) {
+                            // return <Popconfirm key={item.id} placement="top" title={"确定要保存修改并执行此操作吗?"}
+                            //                    onConfirm={() => doSubmit(item.id)} okText="确定" cancelText="取消">
+                            // <Button
+                            //     type="primary"
+                            // >{item.title}</Button>
+                            // </Popconfirm>
+                           return <Action hiddenType={'disabled'} buttonType={'primary'} serial={serial} key={item.id}   formRef={formRef} actionConfig={item}  doAction={doSubmit}></Action>
+                        }
+                    })
+                    }
+                </div>
+            );
+        }
+
+
+        return (
+            <Affix style={{position: 'absolute', right: 10, maxHeight: 100}}
+                   offsetBottom={this.calcOffsetBottom(buttons, actions)}>
+                <div className={'submitButtonBar'} >
+                    <ul>
+                        {buttons.includes('dtmplSave') ? <li key={100}>
+                            <Popconfirm placement="left" title={"确定要保存修改吗?"} onConfirm={() => doSubmit()} okText="确定" cancelText="取消">
+                            <Button
+                                type='primary'
+                                icon={<SaveOutlined/>}
+                                key="btn" block
+                            >保 存</Button>
+                            </Popconfirm>
+                        </li> : ""
+                        }
+                        {//处理前两个
+                            actions ? actions.map((item, index) => {
+                                    if (index < 2) {
+                                        return <li key={index}>
+                                            {/*<Popconfirm placement="left" title={"确定要保存修改并执行此操作吗?"} onConfirm={() => doSubmit(item.id)} okText="确定" cancelText="取消">*/}
+                                            {/*<Button  block*/}
+                                            {/*        type={'primary'}>{item.title}</Button>*/}
+                                            {/*</Popconfirm>*/}
+                                            <Action hiddenType={'disabled'} buttonType={'primary-block'} serial={serial}  key={item.id}  formRef={formRef} actionConfig={item}  doAction={doSubmit}></Action>
+                                        </li>
+                                    }
+                                }
+                            ) : ""
+                        }
+                        {//处理后面的
+                        actions && actions.length > 2 ?
+                                <Popover placement="leftTop" content={content} trigger="hover">
+                                    <Button block>
+                                        <LeftOutlined/>{'更多'}
+                                    </Button>
+                                </Popover> : ""
+                        }
+                    </ul>
+                </div>
+            </Affix>
+        )
+    }
+}
+
+export default SubmitButtonBar;
+

package/src/aldehyde/detail/edit/dtmpl-edit.tsx

@@ -0,0 +1,218 @@
+import React from 'react';
+import {Card, FormInstance} from 'antd';
+import DtmplForm from '../../form/dtmpl-form';
+import PostResult from "./post-result";
+import RightBar from '../rightbar';
+import {DtmplBaseProps, DtmplConfig, DtmplData,AddOrUpdate} from "../../tmpl/interface";
+import HCDataSource from "../../tmpl/hc-data-source";
+import '../dtmpl.css'
+import SubmitButtonBar from "../button/submit-button-bar";
+import Units from '../../../aldehyde/units';
+import HcserviceV3 from "../../../aldehyde/tmpl/hcservice-v3";
+import  CqueryButtonBar from "../button/cquery-button-bar"
+
+interface DtmplEditProps extends DtmplBaseProps {
+    goBackToLtmpl: () => void,
+    addOrUpdate:AddOrUpdate,
+}
+
+interface DtmplEditState {
+    id:string,
+    dtmplConfig: DtmplConfig,
+    dtmplData:DtmplData,
+    showPostResult: boolean;
+    // addOrUpdate?: AddOrUpdate;
+    // dtmplData: DtmplData;
+    loading: boolean;
+    serial:number,
+}
+
+export default class DtmplEdit extends React.PureComponent<DtmplEditProps, DtmplEditState> {
+    formRef = React.createRef<FormInstance>();
+    newCode=undefined;
+    static defaultProps = {
+        showRightNav: true,
+    }
+    state = {
+        id:'dtmplEdit'+Units.getRandomNum(6),
+        showPostResult: false,
+        dtmplConfig: undefined,
+        loading: true,
+        serial:1,
+        dtmplData:undefined,
+    }
+
+    componentDidMount() {
+        this.loadConfigData();
+    }
+
+    async componentDidUpdate(prevProps, prevState, snapshot) {
+        const { dtmplConfig} = this.state;
+        if(prevProps && prevProps!=this.props){
+            await this.loadData(dtmplConfig);
+        }
+    }
+
+    autoSaveTimer = -1000000000000000;
+    autoSaveInterval=undefined;
+
+    onClickBody = (e) => {
+        //  console.log(e);
+        console.log("点击了我" + this.autoSaveTimer);
+        this.autoSaveTimer = 0;
+    }
+
+    onValuesChange=()=>{
+        this.setState({
+            serial:this.state.serial+1
+        })
+    }
+
+    loadConfigData = async () => {
+        const { sourceId} = 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,addOrUpdate} = this.props;
+        if (code) {
+            this.setState({
+                loading: true,
+            })
+            const dtmplData_ = await HcserviceV3.requestDtmplData( sourceId, code, null);
+            if(addOrUpdate=='copy'&& dtmplData_){
+                dtmplData_.code=undefined;
+            }
+            this.setState({
+                dtmplData:dtmplData_,
+                //  changedGroupData:new Map<number,DtmplData[]>(),
+                loading: false,
+            })
+        }else{
+            this.setState({
+                dtmplData:{code:undefined,title:undefined,fieldMap:{},arrayMap:{}},
+                loading: false,
+            })
+        }
+        setTimeout(()=> this.onValuesChange(),300);
+    }
+
+    componentWillUnmount(): void {
+        if(this.autoSaveInterval){
+            clearInterval( this.autoSaveInterval);
+        }
+    }
+
+    doSubmit = (actionId: string) => {
+        const {mainCode}=this.props;
+        if (actionId) {
+            //actionid 直接放在表单中
+            this.formRef.current.setFieldsValue({'actionId': actionId});
+        };
+        if(mainCode){
+            this.formRef.current.setFieldsValue({'mainCode': mainCode});
+        }
+        this.formRef.current.submit();
+    }
+
+    onFinish = (currentCode:string) => {
+        console.log("提交返回的Code：", currentCode);
+        this.newCode=currentCode;
+        //默认返回到列表页面
+        const {dtmplConfig} = this.state;
+        const saveJumpTo=dtmplConfig.saveJumpTo?dtmplConfig.saveJumpTo:[];
+        if(saveJumpTo.length>1){
+            this.setState({
+                showPostResult:true,
+            })
+        }else if(saveJumpTo.includes('edit')){
+            this.goEdit()
+        }else if(saveJumpTo.includes('add')){
+            this.goAdd();
+        }else {
+            this.goList();
+        }
+    }
+
+    goList = () => {
+        this.newCode=undefined;
+        this.props.goBackToLtmpl();
+    }
+
+    goEdit = () => {
+        const  code=this.newCode;
+        const {goDtmpl,code:propCode,goBackToLtmpl}=this.props;
+        this.newCode=undefined;
+        goDtmpl(code);
+        this.setState({
+            showPostResult:false,
+        })
+    }
+
+    goAdd = () => {
+        this.newCode=undefined;
+        const {goDtmpl,code:propCode}=this.props;
+        if(propCode){
+            goDtmpl();
+        }
+        this.setState({
+            showPostResult:false,
+        })
+    }
+
+    render() {
+        const {dtmplConfig, showPostResult,loading,id,serial,dtmplData} = this.state;
+        console.log(" dtmpl edit serial:",serial);
+        const { sourceId, showRightNav, code,addOrUpdate} = this.props;
+        //const {title} = dtmplConfig;
+        if (!dtmplConfig) {
+            return  <Card loading={loading}>
+            </Card>
+        }
+        return (
+            <div className={`detailPage ${showRightNav ? 'showRightNav' : 'noRightNav'}`} onClick={this.onClickBody}>
+                <DtmplForm  parentId={id} dtmplConfig={dtmplConfig}  formRef={this.formRef} sourceId={sourceId}
+                           onFinish={this.onFinish}
+                           showConfirm={true} dtmplData={dtmplData}  onValuesChange={this.onValuesChange}></DtmplForm>
+                {showRightNav ?
+                    <RightBar parentId={id} dtmplConfig={dtmplConfig}/> : ""
+                }
+                <SubmitButtonBar serial={serial} dtmplConfig={dtmplConfig} doSubmit={this.doSubmit}  formRef={this.formRef}></SubmitButtonBar>
+                <CqueryButtonBar  dtmplConfig={dtmplConfig} mainCode={code}></CqueryButtonBar>
+                <PostResult
+                    visible={showPostResult}
+                    addOrUpdate={addOrUpdate=='copy' ? 'add' : addOrUpdate}
+                    resultStatus={"success"}
+                    goList={this.goList}
+                    goEdit={this.goEdit}
+                    goAdd={this.goAdd}
+                    jumpTypes={dtmplConfig.saveJumpTo}
+                />
+            </div>)
+    }
+
+}

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

@@ -0,0 +1,76 @@
+import React from 'react'
+import './index.css'
+import {DtmplConfig, TmplBase} from "../../../aldehyde/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>:""
+        )
+    }
+}