aldehyde 0.2.98 → 0.2.100

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

@@ -1,255 +1,377 @@
-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 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 Scrollbars from 'react-custom-scrollbars';
+import Scrollbars from "react-custom-scrollbars";
+import { LocaleContext } from "../locale/LocaleProvider";
 
 interface ModalEditorProps extends DtmplBaseProps {
-    height?: any,
-    bodyWidth?:number|string,
-    width?:number,
-    open: boolean,
-    onOk: (code: string) => void,
-    onCancel: () => void,
-    pageType:PageType;
-    placement?:'top' | 'right' | 'bottom' | 'left',
-    title?:ReactNode,
+  height?: any;
+  bodyWidth?: number | string;
+  width?: number;
+  open: boolean;
+  onOk: (code: string) => void;
+  onCancel: () => void;
+  pageType: PageType;
+  placement?: "top" | "right" | "bottom" | "left";
+  title?: ReactNode;
 }
 
 interface ModalEditorState {
-    id?:string,
-    dtmplConfig?: DtmplConfig,
-    loading?: boolean;
-    serial?:number,
-    dtmplData?:DtmplData,
+  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) => {
-        //  console.log(e);
-        //console.log("点击了我" + this.autoSaveTimer);
-        this.autoSaveTimer = 0;
-    }
-    static defaultProps = {
-        showConfirm: true,
-        height: '76vh',
-        width:'76vw',
-        bodyWidth:'100%',
-        //antd modal
-        forceRender: true,
-        style: {maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)'},
-        okText: "确定",
-        cancelText: "取消",
-        pageType:'modal',
-        placement:'left',
+export default class DtmplEditPage 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: "76vh",
+    width: "76vw",
+    bodyWidth: "100%",
+    //antd modal
+    forceRender: true,
+    style: { maxWidth: "calc(100vw - 60px)", maxHeight: "calc(100vh - 50px)" },
+    okText: "确定",
+    cancelText: "取消",
+    pageType: "modal",
+    placement: "left",
+  };
+  state = {
+    id: "modelDtmplEdit" + Units.getRandomNum(6),
+    dtmplConfig: undefined,
+    loading: true,
+    serial: 1,
+    dtmplData: undefined,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+
+  async componentDidMount() {
+    if (this.props.open) {
+      await this.loadConfigData();
     }
-    state = {
-        id:'modelDtmplEdit'+Units.getRandomNum(6),
-        dtmplConfig: undefined,
-        loading: true,
-        serial:1,
-        dtmplData:undefined,
+  }
+
+  async componentDidUpdate(prevProps) {
+    const { dtmplConfig } = this.state;
+    if (prevProps && prevProps != this.props) {
+      if (
+        prevProps.sourceId != this.props.sourceId ||
+        prevProps.code != this.props.code ||
+        prevProps.addTmplId != this.props.addTmplId ||
+        dtmplConfig == null
+      ) {
+        await this.loadConfigData();
+      } else {
+        await this.loadData(dtmplConfig);
+      }
     }
+  }
 
-    async componentDidMount() {
-        if(this.props.open){
-            await this.loadConfigData();
-        }
+  componentWillUnmount(): void {
+    if (this.autoSaveInterval) {
+      clearInterval(this.autoSaveInterval);
     }
+  }
 
-    async componentDidUpdate(prevProps) {
-        const { dtmplConfig} = this.state;
-        if(prevProps && prevProps!=this.props){
-            if(prevProps.sourceId != this.props.sourceId || prevProps.code!=this.props.code || prevProps.addTmplId!= this.props.addTmplId  || dtmplConfig==null){
-                await this.loadConfigData();
-            }else{
-                await this.loadData(dtmplConfig);
-            }
-        }
+  loadConfigData = async () => {
+    const { sourceId, open, code, serverKey, addTmplId } = this.props;
+    this.setState({
+      loading: true,
+    });
+    let dtmplConfig = undefined;
+    if (code) {
+      dtmplConfig = await HCDataSource.requestDtmplConfig(
+        serverKey,
+        sourceId,
+        code
+      );
+    } else {
+      dtmplConfig = await HCDataSource.requestAddDtmplConfig(
+        serverKey,
+        sourceId,
+        addTmplId
+      );
     }
 
-    componentWillUnmount(): void {
-        if(this.autoSaveInterval){
-            clearInterval( this.autoSaveInterval);
-        }
+    await this.loadData(dtmplConfig);
+    this.setState({
+      dtmplConfig,
+      loading: false,
+    });
+  };
+
+  loadData = async (dtmplConfig: DtmplConfig) => {
+    const {
+      sourceId,
+      code: propsCode,
+      defaultDtmplData,
+      open,
+      serverKey,
+      codeSource,
+    } = this.props;
+
+    if (!open) {
+      return;
     }
 
-    loadConfigData = async () => {
-        const { sourceId,open,code,serverKey,addTmplId} = this.props;
-        this.setState({
-            loading: true,
-        })
-        let dtmplConfig=undefined;
-        if(code){
-            dtmplConfig = await HCDataSource.requestDtmplConfig(serverKey,sourceId,code);
-        }else{
-            dtmplConfig = await HCDataSource.requestAddDtmplConfig(serverKey,sourceId,addTmplId);
+    if (dtmplConfig.autoSaveInterval && dtmplConfig.autoSaveInterval > 0) {
+      if (this.autoSaveInterval) {
+        clearInterval(this.autoSaveInterval);
+      }
+      this.autoSaveInterval = setInterval(() => {
+        if (this.autoSaveTimer >= dtmplConfig.autoSaveInterval) {
+          //console.log('执行自动保存');
+          this.autoSaveTimer = -1000000000000000;
+          this.doSubmit(undefined);
+        } else {
+          this.autoSaveTimer = this.autoSaveTimer + 1;
         }
+      }, 1000);
+    }
 
-        await this.loadData(dtmplConfig);
-        this.setState({
-            dtmplConfig,
-            loading: false,
-        })
+    let code = propsCode;
+    if (!code && codeSource) {
+      code = await HcserviceV3.queryCode(sourceId, codeSource, serverKey);
     }
+    if (code) {
+      this.setState({
+        loading: true,
+      });
 
-    loadData = async (dtmplConfig:DtmplConfig ) => {
-        const { sourceId, code:propsCode,defaultDtmplData,open,serverKey,codeSource} = this.props;
+      const dtmplData_: DtmplData = await HcserviceV3.getDtmplData(
+        dtmplConfig,
+        serverKey,
+        sourceId,
+        code
+      );
 
-        if(!open){
-            return;
-        }
+      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);
+  };
 
-        if(dtmplConfig.autoSaveInterval && dtmplConfig.autoSaveInterval>0){
-            if(this.autoSaveInterval){
-                clearInterval( this.autoSaveInterval);
-            }
-            this.autoSaveInterval = setInterval(() => {
-                if(this.autoSaveTimer>=dtmplConfig.autoSaveInterval){
-                    //console.log('执行自动保存');
-                    this.autoSaveTimer=-1000000000000000;
-                    this.doSubmit(undefined);
-                }else{
-                    this.autoSaveTimer=this.autoSaveTimer+1;
-                }
-            }, 1000);
-        }
+  onValuesChange = () => {
+    this.setState({
+      serial: this.state.serial + 1,
+    });
+  };
 
-        let code=propsCode;
-        if(!code && codeSource){
-            code=await HcserviceV3.queryCode(sourceId,codeSource,serverKey);
-        }
-        if (code) {
-            this.setState({
-                loading: true,
-            })
-
-            const dtmplData_:DtmplData=await HcserviceV3.getDtmplData(dtmplConfig,serverKey,sourceId, code);
-
-            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);
+  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 });
     }
-
-    onValuesChange=()=>{
-        this.setState({
-            serial:this.state.serial+1
-        })
+    if (params) {
+      this.formRef.current.setFieldsValue(params);
     }
+    this.formRef.current.submit();
+  };
 
-    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, serverKey } = this.props;
+    const { dtmplData, serial } = this.state;
+    const footerButtons = [];
+    const { dtmplConfig } = this.state;
+    const { translate } = this.context;
+    if (
+      dtmplConfig &&
+      dtmplConfig.buttons &&
+      dtmplConfig.buttons.includes("dtmplSave")
+    ) {
+      footerButtons.unshift(
+        <Button type={"primary"} onClick={() => this.doSubmit()}>
+          {translate("${保存}")}
+        </Button>
+      );
     }
-
-    getFooter = () => {
-        const {onCancel,serverKey} = this.props
-        const {dtmplData,serial}=this.state;
-        const footerButtons = [];
-        const {dtmplConfig} = this.state;
-        if(dtmplConfig && dtmplConfig.buttons && dtmplConfig.buttons.includes('dtmplSave')){
-            footerButtons.unshift(
-                <Button  type={'primary'}  onClick={() =>this.doSubmit()}>
-                    保 存
-                </Button>)
-        }
-        //处理action
-        if (dtmplConfig) {
-            dtmplConfig.actions.forEach((ac, index) => {
-                footerButtons.unshift(<Action serverKey={serverKey} iconType={'icon-title'} 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;
+    //处理action
+    if (dtmplConfig) {
+      dtmplConfig.actions.forEach((ac, index) => {
+        footerButtons.unshift(
+          <Action
+            serverKey={serverKey}
+            iconType={"icon-title"}
+            hiddenType={"disabled"}
+            serial={serial}
+            key={ac.id}
+            formRef={this.formRef}
+            actionConfig={ac}
+            doAction={this.doSubmit}
+          ></Action>
+        );
+      });
     }
+    footerButtons.unshift(
+      <Popconfirm
+        key="back"
+        placement="topLeft"
+        title={translate("${确定要取消本次修改内容吗}?")}
+        onConfirm={onCancel}
+        okText={translate("${确定}")}
+        cancelText={translate("${取消}")}
+      >
+        <Button>{translate("${取消}")}</Button>
+      </Popconfirm>
+    );
+    return footerButtons;
+  };
 
-    render() {
-        const {height, onOk, onCancel, code,bodyWidth, sourceId,  open,mainCode,width,pageType,placement,maxColsOnRow,title,serverKey} = this.props
-        const {dtmplConfig,id,dtmplData} = this.state;
+  render() {
+    const {
+      height,
+      onOk,
+      onCancel,
+      code,
+      bodyWidth,
+      sourceId,
+      open,
+      mainCode,
+      width,
+      pageType,
+      placement,
+      maxColsOnRow,
+      title,
+      serverKey,
+    } = this.props;
+    const { dtmplConfig, id, dtmplData } = this.state;
 
-        let title1=title?title:dtmplConfig ? dtmplConfig.title : "";
+    let title1 = title ? title : dtmplConfig ? dtmplConfig.title : "";
 
-        return (<> {pageType=='modal'? <Modal
+    return (
+      <>
+        {" "}
+        {pageType == "modal" ? (
+          <Modal
             open={open}
             width={width}
             title={title1}
             closable={false}
-            bodyStyle={{height: height,overflow: 'auto'}}
+            bodyStyle={{ height: height, overflow: "auto" }}
             destroyOnClose={true}
             centered
             onCancel={onCancel}
             footer={this.getFooter()}
-        ><Scrollbars  autoHide autoHideTimeout={1000}>
-             <div onClick={this.onClickBody}>
-                <DtmplForm serverKey={serverKey} mainCode={mainCode} parentId={id} dtmplConfig={dtmplConfig} formRef={this.formRef} sourceId={sourceId}
-                           onFinish={onOk} maxColsOnRow={maxColsOnRow}
-                           showConfirm={false} dtmplData={dtmplData} onValuesChange={this.onValuesChange}  />
-            </div>
-                </Scrollbars>
-            </Modal>
-            :pageType=='drawer'?
-            <Drawer onClick={this.onClickBody}
-                title={title1}
-                placement={placement}
-                closable={true}
-                mask={false}
-                onClose={onCancel}
-                open={open}
-                width={width}
-                style={{
-                    maxWidth: 1960,
-                }}
-                extra={
-                    <Space>{this.getFooter()}</Space>
-                }
-            >
-                <DtmplForm serverKey={serverKey} mainCode={mainCode} parentId={id} dtmplConfig={dtmplConfig} formRef={this.formRef} sourceId={sourceId}
-                           onFinish={onOk}   maxColsOnRow={maxColsOnRow}
-                           showConfirm={false} dtmplData={dtmplData} onValuesChange={this.onValuesChange} />
-            </Drawer>:<Card  title={title1}>
-                        <DtmplForm serverKey={serverKey} mainCode={mainCode} parentId={id} dtmplConfig={dtmplConfig} formRef={this.formRef} sourceId={sourceId}
-                                   onFinish={onOk}   maxColsOnRow={maxColsOnRow}
-                                   showConfirm={false} dtmplData={dtmplData} onValuesChange={this.onValuesChange} />
-                    </Card>
-
-       }
-       </>
-    )
-
-    }
-
-}
+          >
+            <Scrollbars autoHide autoHideTimeout={1000}>
+              <div onClick={this.onClickBody}>
+                <DtmplForm
+                  serverKey={serverKey}
+                  mainCode={mainCode}
+                  parentId={id}
+                  dtmplConfig={dtmplConfig}
+                  formRef={this.formRef}
+                  sourceId={sourceId}
+                  onFinish={onOk}
+                  maxColsOnRow={maxColsOnRow}
+                  showConfirm={false}
+                  dtmplData={dtmplData}
+                  onValuesChange={this.onValuesChange}
+                />
+              </div>
+            </Scrollbars>
+          </Modal>
+        ) : pageType == "drawer" ? (
+          <Drawer
+            onClick={this.onClickBody}
+            title={title1}
+            placement={placement}
+            closable={true}
+            mask={false}
+            onClose={onCancel}
+            open={open}
+            width={width}
+            style={{
+              maxWidth: 1960,
+            }}
+            extra={<Space>{this.getFooter()}</Space>}
+          >
+            <DtmplForm
+              serverKey={serverKey}
+              mainCode={mainCode}
+              parentId={id}
+              dtmplConfig={dtmplConfig}
+              formRef={this.formRef}
+              sourceId={sourceId}
+              onFinish={onOk}
+              maxColsOnRow={maxColsOnRow}
+              showConfirm={false}
+              dtmplData={dtmplData}
+              onValuesChange={this.onValuesChange}
+            />
+          </Drawer>
+        ) : (
+          <Card title={title1}>
+            <DtmplForm
+              serverKey={serverKey}
+              mainCode={mainCode}
+              parentId={id}
+              dtmplConfig={dtmplConfig}
+              formRef={this.formRef}
+              sourceId={sourceId}
+              onFinish={onOk}
+              maxColsOnRow={maxColsOnRow}
+              showConfirm={false}
+              dtmplData={dtmplData}
+              onValuesChange={this.onValuesChange}
+            />
+          </Card>
+        )}
+      </>
+    );
+  }
+}