aldehyde 0.0.1

package/src/components/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 "../../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/components/detail/button/index.css

@@ -0,0 +1,43 @@
+.submitButtonBar{
+    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);
+    max-height:158px;
+    /*min-height:80px;*/
+    overflow:auto;
+    width:100px;
+}
+.submitButtonBar::-webkit-scrollbar {
+    display: none;
+}
+.submitButtonBar ul{
+    padding:0;
+    margin:0;
+}
+.submitButtonBar li{
+    list-style-type: none;
+    padding:4px;
+    margin:0;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+}
+/*.rightBar li:hover{*/
+/*    background: #cfe3f5;*/
+/*}*/
+
+.btns button{
+    margin-right: 10px
+}
+
+.cquickTextButton {
+    cursor:pointer;
+}
+
+.cquickTextButton:hover{
+    color: #1890ff;
+}

package/src/components/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 "../../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/components/detail/dtmpl.css

@@ -0,0 +1,53 @@
+/*.labelcss label{*/
+/*    display:table-cell!important;*/
+/*    vertical-align: middle;*/
+/*    width:120px;*/
+/*}*/
+
+.downEditPic{
+    display:inline-block;
+}
+.downEditPic a{
+    visibility: hidden;
+    color:#1890ff;
+    cursor: pointer;
+}
+.downEditPic:hover a{
+    visibility:visible;
+}
+.editPic .ant-upload-list{
+    width:150px
+}
+.buttonGroup{
+    position: fixed;
+    width:100px;
+    bottom: 30px;
+    right: 20px;
+    z-index: 99;
+}
+
+.buttonGroup button{
+    margin-bottom: 10px;
+}
+
+.detailPage h3{
+    font-size: 18px;
+}
+.detailPage.showRightNav .ant-card{
+	min-width: 740px;
+    max-width: 1440px;
+	width:90%
+}
+
+.detailPage.noRightNav .ant-card{
+    min-width: 740px;
+    width:100%
+}
+
+.actionbtn button{
+    margin-right: 5px;
+}
+
+.detailPage .pad{
+    margin-right: 100px;
+}

package/src/components/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 '../../units';
+import HcserviceV3 from "../../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}
+                > </PostResult>
+            </div>)
+    }
+
+}

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import {Button, Card, FormInstance, Popconfirm, Space} from 'antd'
+import {CloseOutlined} from '@ant-design/icons'
+import {DtmplData, FieldConfig, FieldGroupConfig} from "../../tmpl/interface";
+import FieldGroupForm from '../../form/field-group-form';
+import {ButtonType} from "antd/es/button";
+import FieldsForm from "../../form/fields-form";
+
+interface FieldsEditCardProps {
+    title?:any,
+    height?: any,
+    onCancel?: () => void,
+    onOk: (value: object) => void,
+    fields: FieldConfig[],
+    value?: object,
+    okButtonType?: ButtonType,
+    okDanger?: boolean,
+    needConfirm?: boolean,
+    onValuesChange:(value:object)=>void,
+}
+
+interface FieldsEditCardState {
+}
+
+export default class FieldsEditCard extends React.PureComponent<FieldsEditCardProps, FieldsEditCardState> {
+    formRef = React.createRef<FormInstance>();
+    static defaultProps = {
+        forceRender: true,
+        style: {maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)'},
+        needConfirm: false,
+        okButtonType: 'primary',
+        okDanger: false,
+
+    }
+    state = {}
+
+    async componentDidMount() {
+
+    }
+
+    async componentDidUpdate() {
+        this.reset();
+    }
+
+    reset = () => {
+        if (this.formRef.current) {
+            this.formRef.current.resetFields();
+        }
+    }
+
+    onOk = () => {
+        this.formRef.current.submit();
+    }
+
+
+
+    render() {
+        const {title,height, onOk, fields, value, onCancel, okButtonType, needConfirm, okDanger,onValuesChange} = this.props
+        const {} = this.state;
+
+        function okButton(onOk) {
+            return needConfirm ? okDanger ?
+                <Popconfirm
+                    placement="rightBottom"
+                    title={`确定要执行提交吗？`}
+                    onConfirm={onOk}
+                    okText="确定"
+                    cancelText="取消"
+                    okType={'danger'}
+                >
+                    <Button type={okButtonType} danger={true}
+                    >确定</Button>
+                </Popconfirm> :
+                <Popconfirm
+                    placement="rightBottom"
+                    title={`确定要执行提交吗？`}
+                    onConfirm={onOk}
+                    okText="确定"
+                    cancelText="取消"
+                >
+                    <Button  type={okButtonType}
+                    >确定</Button>
+                </Popconfirm> :
+                <Button type={okButtonType}  onClick={onOk}
+                >确定</Button>
+        }
+
+        return <Card
+            style={{width: 1000}}
+            title={title}
+            bodyStyle={{overflow: 'auto'}}
+            extra={<><Space size={[8, 0]}><Button onClick={this.reset}>重置</Button>
+                {okButton(this.onOk)}
+                {onCancel ? <Button onClick={onCancel}><CloseOutlined/></Button> : ""}
+            </Space></>}
+        >
+            <FieldsForm onValuesChange={onValuesChange} fields={fields} formRef={this.formRef}
+                        value={value}
+                        onFinish={onOk} ></FieldsForm>
+        </Card>
+    }
+
+}