aldehyde 0.2.197 → 0.2.199

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

@@ -1,396 +1,396 @@
-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 { 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;
-}
-
-interface ModalEditorState {
-  id?: string;
-  queryingCode?: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",
-  };
-  state = {
-    id: "modelDtmplEdit" + Units.getRandomNum(6),
-    dtmplConfig: undefined,
-    queryingCode:undefined,
-    loading: true,
-    serial: 1,
-    dtmplData: undefined,
-  };
-  static contextType = LocaleContext;
-  context: React.ContextType<typeof LocaleContext>;
-
-  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 ||
-        prevProps.code != this.props.code ||
-        prevProps.addTmplId != this.props.addTmplId ||
-        dtmplConfig == null
-      ) {
-        await this.loadConfigData();
-      } else {
-        await this.loadData(dtmplConfig);
-      }
-    }
-  }
-
-  componentWillUnmount(): void {
-    if (this.autoSaveInterval) {
-      clearInterval(this.autoSaveInterval);
-    }
-  }
-
-  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?.entity && dtmplConfig?.entity?.code==code){
-      let dtmplData=dtmplConfig.entity;
-      dtmplConfig.entity=undefined;
-      this.setState({
-        dtmplData,
-        id: code,
-        loading: false,
-      });
-    }else{
-      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;
-    }
-
-    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);
-    }
-
-    let code = propsCode;
-    if (!code && codeSource) {
-      code = await HcserviceV3.queryCode(sourceId, codeSource, serverKey);
-    }
-
-    if (code) {
-      this.setState({
-        loading: true,
-        queryingCode:code,
-        dtmplData:undefined,
-      });
-
-      const dtmplData_: DtmplData = await HcserviceV3.getDtmplData(
-        dtmplConfig,
-        serverKey,
-        sourceId,
-        code
-      );
-
-      if( (!this.state.queryingCode  || this.state.queryingCode==dtmplData_.code) &&
-          (!dtmplData_.sourceId  || (this.props.sourceId==dtmplData_.sourceId))){
-        this.setState({
-          dtmplData: dtmplData_,
-          id: code,
-        });
-      }
-      this.setState({
-        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, 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>
-      );
-    }
-    //处理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;
-
-    let title1 = title ? title : dtmplConfig ? dtmplConfig.title : "";
-
-    return (
-      <>
-        {" "}
-        {pageType == "modal" ? (
-          <Modal
-            open={open}
-            width={width}
-            title={title1}
-            closable={false}
-            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>
-        )}
-      </>
-    );
-  }
-}
+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 { 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;
+}
+
+interface ModalEditorState {
+  id?: string;
+  queryingCode?: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",
+  };
+  state = {
+    id: "modelDtmplEdit" + Units.getRandomNum(6),
+    dtmplConfig: undefined,
+    queryingCode:undefined,
+    loading: true,
+    serial: 1,
+    dtmplData: undefined,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+
+  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 ||
+        prevProps.code != this.props.code ||
+        prevProps.addTmplId != this.props.addTmplId ||
+        dtmplConfig == null
+      ) {
+        await this.loadConfigData();
+      } else {
+        await this.loadData(dtmplConfig);
+      }
+    }
+  }
+
+  componentWillUnmount(): void {
+    if (this.autoSaveInterval) {
+      clearInterval(this.autoSaveInterval);
+    }
+  }
+
+  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?.entity && dtmplConfig?.entity?.code==code){
+      let dtmplData=dtmplConfig.entity;
+      dtmplConfig.entity=undefined;
+      this.setState({
+        dtmplData,
+        id: code,
+        loading: false,
+      });
+    }else{
+      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;
+    }
+
+    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);
+    }
+
+    let code = propsCode;
+    if (!code && codeSource) {
+      code = await HcserviceV3.queryCode(sourceId, codeSource, serverKey);
+    }
+
+    if (code) {
+      this.setState({
+        loading: true,
+        queryingCode:code,
+        dtmplData:undefined,
+      });
+
+      const dtmplData_: DtmplData = await HcserviceV3.getDtmplData(
+        dtmplConfig,
+        serverKey,
+        sourceId,
+        code
+      );
+
+      if( (!this.state.queryingCode  || this.state.queryingCode==dtmplData_.code) &&
+          (!dtmplData_.sourceId  || (this.props.sourceId==dtmplData_.sourceId))){
+        this.setState({
+          dtmplData: dtmplData_,
+          id: code,
+        });
+      }
+      this.setState({
+        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, 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>
+      );
+    }
+    //处理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;
+
+    let title1 = title ? title : dtmplConfig ? dtmplConfig.title : "";
+
+    return (
+      <>
+        {" "}
+        {pageType == "modal" ? (
+          <Modal
+            open={open}
+            width={width}
+            title={title1}
+            closable={false}
+            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>
+        )}
+      </>
+    );
+  }
+}