aldehyde 0.2.479 → 0.2.481

package/src/aldehyde/form/dtmpl-form.tsx

@@ -1,543 +1,552 @@
-import React from "react";
-import {
-  Button,
-  Card,
-  Form as AntdForm,
-  message,
-  Switch,
-} from "antd";
-import {
-  DtmplConfig,
-  DtmplData,
-  DtmplFormProps,
-  FieldConfig,
-  FieldGroupConfig,
-} from "../tmpl/interface";
-import HcserviceV3 from "../tmpl/hcservice-v3";
-import FormItemGroup from "./form-Item-group";
-import { ReloadOutlined } from "@ant-design/icons";
-import FieldViewGroup from "../detail/view/field-view-group";
-import RelationTable from "../table/relation-table";
-import "./dtmpl-form.css";
-import CollapseCard from "../controls/collapse-card";
-import { ProgramConfig } from "../index";
-import ToolTipBar from "../detail/tooltipbar";
-import EmbedDtmplEditPage from "../module/embed-dtmpl-edit-page";
-import LtmplTable from "../module/ltmpl-table";
-import TmplConfigAnalysis from "../tmpl/tmpl-config-analysis";
-import DtmplViewCard from "../module/dtmpl-view-card";
-import { LocaleContext } from "../locale/LocaleProvider";
-
-interface DtmplFormStat {
-  loading?: boolean;
-  currentDtmplData?: DtmplData;
-  appDtmplConfig?: DtmplConfig;
-  embedForm?: object;
-  embedRefValue?: object;
-  editingGroups?: string[];
-}
-
-export default class DtmplForm extends React.PureComponent<
-  DtmplFormProps,
-  DtmplFormStat
-> {
-  fuseMode: boolean = false;
-  premisestitle: string = "默认字段";
-  static contextType = LocaleContext;
-  context: React.ContextType<typeof LocaleContext>;
-
-  state = {
-    loading: true,
-    currentDtmplData: undefined,
-    appDtmplConfig: undefined,
-    embedForm: {},
-    embedRefValue: {},
-    editingGroups: [],
-  };
-  static defaultPorps = {
-    maxCols: 2,
-    showHeader: true,
-    showRightNav: false,
-  };
-
-  async componentDidMount() {
-    await this.loadData();
-  }
-
-  async componentDidUpdate(preProps) {
-    const { code, formRef } = this.props;
-    const { code: preCode } = preProps;
-    if (preProps != this.props) {
-      await this.loadData();
-    }
-  }
-
-  loadData = async () => {
-    const {
-      sourceId,
-      code,
-      formRef,
-      dtmplData,
-      dtmplConfig,
-      serverKey,
-    } = this.props;
-    let dtmplData_;
-    if (code) {
-      this.setState({
-        loading: true,
-      });
-      dtmplData_ = await HcserviceV3.requestDtmplData(
-        serverKey,
-        sourceId,
-        code,
-        null
-      );
-    } else if (dtmplData) {
-      dtmplData_ = dtmplData;
-    } else {
-      dtmplData_ = {
-        code: undefined,
-        title: undefined,
-        fieldMap: {},
-        arrayMap: {},
-      };
-    }
-    //应用静态配置
-    let appDtmplConfig = ProgramConfig.getAppDtmplConfig(
-      dtmplConfig,
-      dtmplData,
-      this.props
-    );
-    this.setState({
-      appDtmplConfig,
-      currentDtmplData: dtmplData_,
-      loading: false,
-      embedRefValue: {},
-    });
-    setTimeout(
-      () => (formRef.current ? formRef.current.resetFields() : undefined),
-      200
-    );
-  };
-
-  doRefresh = async () => {
-    await this.loadData();
-    const { translate } = this.context;
-    message.info(translate("${已刷新}!"));
-  };
-  onGroupEditing = (groupCode, editing: boolean) => {
-
-    const { editingGroups } = this.state;
-    let arr = [...editingGroups];
-    if (editing) {
-      arr.push(groupCode);
-    } else {
-      arr = editingGroups.filter(item => item !== groupCode);
-    }
-    this.setState({ editingGroups: arr });
-  }
-
-  onGroupChange = (
-    fieldGroupConfig: FieldGroupConfig,
-    selectdDatas: DtmplData[]
-  ) => {
-    const { currentDtmplData } = this.state;
-    currentDtmplData["arrayMap"][fieldGroupConfig.id] = selectdDatas;
-    debugger
-    let currentDtmplData_1 = { ...currentDtmplData };
-    this.setState({
-      currentDtmplData: currentDtmplData_1,
-    });
-  };
-
-  changeFuseMode = (checked) => {
-    this.fuseMode = !checked;
-  };
-
-  postForm = async (result) => {
-    this.setState({
-      loading: true,
-    });
-    const { sourceId, code, dtmplData, serverKey } = this.props;
-    if (code) {
-      //有code是修改，没有是新增实体模板
-      result["唯一编码"] = code;
-    } else if (dtmplData && dtmplData.code) {
-      result["唯一编码"] = dtmplData.code;
-    }
-    let res = await HcserviceV3.postDtmplData(
-      serverKey,
-      sourceId,
-      result,
-      message
-    );
-    this.setState({
-      loading: false,
-    });
-    if (res.status === "success") {
-      this.props.onFinish(res.code);
-    } else {
-      this.props.onFinish(false);
-    }
-  };
-
-  onSubmit = async (values: any) => {
-    const { dtmplConfig, dtmplData } = this.props;
-    const {
-      currentDtmplData,
-      appDtmplConfig,
-      embedForm,
-      embedRefValue, editingGroups
-    } = this.state;
-
-    if (editingGroups.length > 0) {
-      message.error("请提交表格数据后再保存");
-      this.props.onFinish(false);
-      return;
-    }
-
-    if (dtmplData) {
-      dtmplData.fieldMap = { ...values }
-    }
-
-    let resultCode = undefined;
-    const result = values;
-    for (let group of dtmplConfig.groups) {
-      if (group.type == "embed" && group.embedType != "列表") {
-        if (!embedRefValue[group.id]) {
-          embedForm[group.id].current.doSubmit();
-          return;
-        } else {
-          let fieldId = TmplConfigAnalysis.getFieldId(
-            appDtmplConfig,
-            group.codeSourceFieldMstrucId
-          );
-          result[fieldId] = embedRefValue[group.id];
-        }
-      } else if (group.type == "relation" && !group.readOnly) {
-        //添加关系标识
-        result[`${group.id}.$$flag$$`] = true;
-        //添加关系内容
-        let ds: DtmplData[] = currentDtmplData.arrayMap[group.id];
-        if (ds) {
-          ds.forEach((d, index) => {
-            result[`${group.id}[${index}].$$relation$$`] = d.relationLabel;
-            if (d.editStatus && d.editStatus == "new") {
-              for (let field of group.fields) {
-                result[`${group.id}[${index}].${field.id}`] =
-                  d.fieldMap[field.id];
-              }
-            } else if (d.editStatus && d.editStatus == "changed") {
-              result[`${group.id}[${index}].唯一编码`] = d.code;
-              for (let field of group.fields) {
-                result[`${group.id}[${index}].${field.id}`] =
-                  d.fieldMap[field.id];
-              }
-            } else {
-              result[`${group.id}[${index}].唯一编码`] = d.code;
-            }
-          });
-        }
-      }
-    }
-    resultCode = await this.postForm(result);
-  };
-  onEmbedPageFinish = (group: FieldGroupConfig, code: string) => {
-    const { embedRefValue } = this.state;
-    embedRefValue[group.id] = code;
-    const { formRef } = this.props;
-    formRef.current.submit();
-  };
-  addHiddenItem = (hiddenFields: FieldConfig[]) => {
-    if (hiddenFields) {
-      return hiddenFields.map((f) => {
-        return (
-          <AntdForm.Item
-            hidden={true}
-            name={f.id}
-            initialValue={f.value}
-          ></AntdForm.Item>
-        );
-      });
-    }
-  };
-
-  fieldGroupList = (dtmplConfig: DtmplConfig, dtmplData: DtmplData) => {
-    const {
-      parentId,
-      maxColsOnRow,
-      mainCode,
-      formRef,
-      serverKey,
-      showRightNav,
-      valueFieldMap
-    } = this.props;
-    const { loading, embedForm } = this.state;
-    let groups: FieldGroupConfig[] = [];
-    if (dtmplConfig) {
-      groups = dtmplConfig.groups;
-    }
-    return groups.map((item) => {
-      if (item.type == "embed") {
-        let codeSource = undefined;
-        //code 从来源字段里面拿
-        let code = TmplConfigAnalysis.getFieldValueCodeOfMstrucId(
-          dtmplConfig,
-          dtmplData.fieldMap,
-          item.codeSourceFieldMstrucId
-        );
-        let innerSourceId = TmplConfigAnalysis.getFieldValueCodeOfMstrucId(
-          dtmplConfig,
-          dtmplData.fieldMap,
-          item.pageSourceFieldMstrucId
-        );
-        innerSourceId = innerSourceId ? innerSourceId : item.pointSourceId;
-        if (!innerSourceId) {
-          return null;
-        }
-        if (item.embedType == "列表") {
-          return (
-            <Card
-              styles={{ body: { padding: 0 } }}
-              variant={"borderless"}
-              style={{ width: showRightNav ? "90%" : "100%" }}
-            >
-              <LtmplTable
-                serverKey={null}
-                collapsible={true}
-                initCollapse={false}
-                title={item.title}
-                mainCode={mainCode}
-                funcMode={"common"}
-                sourceId={innerSourceId}
-              ></LtmplTable>
-            </Card>
-          );
-        } else if (item.embedType == "详情") {
-          codeSource = "listop";
-          return (
-            <CollapseCard
-              showRightNav={showRightNav}
-              tip={item.tip}
-              title={item.title}
-              key={item.id}
-              id={parentId + item.id}
-              className="hoverable"
-              loading={loading}
-              styles={{ body: { padding: "6px" }, header: { background: "#f2f4f5" } }}
-            >
-              <DtmplViewCard
-                showHeader={false}
-                codeSource={codeSource}
-                code={code}
-                sourceId={innerSourceId}
-              ></DtmplViewCard>{" "}
-            </CollapseCard>
-          );
-        } else {
-          embedForm[item.id] = React.createRef();
-          switch (item.embedType) {
-            case "编辑":
-              codeSource = "listop";
-              break;
-            case "编辑或添加":
-              codeSource = "new";
-              break;
-          }
-          return (
-            <CollapseCard
-              showRightNav={showRightNav}
-              tip={item.tip}
-              title={item.title}
-              key={item.id}
-              id={parentId + item.id}
-              className="hoverable"
-              loading={loading}
-              styles={{ body: { padding: "6px" }, header: { background: "#f2f4f5" } }}
-            >
-              <EmbedDtmplEditPage
-                ref={embedForm[item.id]}
-                onFinish={(code: any) => {
-                  this.onEmbedPageFinish(item, code);
-                }}
-                codeSource={codeSource}
-                code={code}
-                sourceId={innerSourceId}
-              ></EmbedDtmplEditPage>{" "}
-            </CollapseCard>
-          );
-        }
-      } else if (item.type == "relation") {
-        //关系
-        if (item.fields) {
-          let data: DtmplData[] = undefined;
-          if (dtmplData) {
-            data = dtmplData.arrayMap[item.id];
-          }
-          debugger
-          return (
-            <RelationTable
-              showRightNav={showRightNav}
-              serverKey={serverKey}
-              mainCode={mainCode ? mainCode : parentId}
-              loading={loading}
-              parentId={parentId}
-              key={item.id}
-              fieldGroupConfig={item}
-              value={data}
-              parentFormInstance={formRef?.current}
-              viewOrEdit={item.readOnly ? "view" : "edit"}
-              onEditing={(editing) => {
-                this.onGroupEditing(item.id, editing);
-              }}
-              onChange={this.onGroupChange}
-            />
-          );
-        }
-      } else {
-        //字段组
-        return (
-          <CollapseCard
-            showRightNav={showRightNav}
-            tip={item.tip}
-            title={item.title}
-            key={item.id}
-            id={parentId + item.id}
-            className="hoverable"
-            loading={loading}
-            styles={{ body: { padding: "6px" }, header: { background: "#f2f4f5" } }}
-          >
-            {item.readOnly ? <FieldViewGroup fields={item ? item.fields : undefined}
-              dataCode={dtmplData ? dtmplData.code : null}
-              serverKey={serverKey}
-              valueMap={dtmplData ? dtmplData.fieldMap : undefined}
-            /> :
-              <FormItemGroup layout={HcserviceV3.isForeignLanguageMode() ? "vertical" : (dtmplConfig.formLayout || "horizontal")}
-                serverKey={serverKey}
-                formRef={formRef}
-                mainCode={mainCode}
-                maxColsOnRow={maxColsOnRow}
-                fields={item ? item.fields : undefined}
-                dataCode={dtmplData ? dtmplData.code : undefined}
-                valueMap={dtmplData ? dtmplData.fieldMap : undefined}
-                valueFieldMap={valueFieldMap}
-              />}
-          </CollapseCard>
-        );
-      }
-    });
-  };
-
-  onValuesChange = (changedValues, allValues) => {
-    const { onValuesChange, formRef, code } = this.props;
-    const { appDtmplConfig, currentDtmplData } = this.state;
-    //新增修改，与前同步
-    // if(!code){//此处不关闭页面切换时有bug,用于连续添加
-    //   dtmplData.fieldMap=allValues;
-    // }
-
-    if (appDtmplConfig.onValuesChange) {
-      //自定义值修改逻辑
-      appDtmplConfig.onValuesChange(
-        changedValues,
-        {
-          code,
-          fieldMap: allValues,
-          arrayMap: currentDtmplData.arrayMap,
-        },
-        formRef.current
-      );
-    }
-    if (onValuesChange) {
-      onValuesChange(changedValues, allValues);
-    }
-  };
-
-  // nameValue = AntdForm.useWatch(this.props.dtmplConfig.groups[0].fields[0].id, this.props.formRef.current);
-  render() {
-    const {
-      formRef,
-      dtmplConfig,
-      code,
-      parentId,
-      showHeader,
-      serverKey, dtmplData,
-    } = this.props;
-    const { currentDtmplData, appDtmplConfig } = this.state;
-    const { translate } = this.context;
-    if (!dtmplConfig || !dtmplData) {
-      return <Card loading={true}>{translate("${加载中}")}... ...</Card>;
-    }
-
-    //debugger
-    const { buttons, premises } = appDtmplConfig
-      ? appDtmplConfig
-      : { buttons: undefined, premises: undefined };
-    return (
-      <>
-        {showHeader ? (
-          <Card variant={"borderless"}
-            key={"detailTitle"}
-            className="hoverable pageHeader"
-          >
-            <h3>
-              {code || (currentDtmplData && currentDtmplData.code)
-                ? translate("[${编辑}]")
-                : translate("[${新增}]")}
-              {dtmplConfig ? <ToolTipBar content={dtmplConfig.tip} /> : null}
-              <div className="fr">
-                {buttons && buttons.includes("fusionMode") ? (
-                  <Switch
-                    checkedChildren={translate("${开}")}
-                    unCheckedChildren={translate("${关}")}
-                    style={{ marginRight: 10 }}
-                    title={translate("${融合模式}")}
-                    onChange={this.changeFuseMode}
-                  />
-                ) : (
-                  ""
-                )}
-                <Button
-                  className="hoverbig"
-                  title={translate("${刷新}")}
-                  onClick={this.doRefresh}
-                >
-                  <ReloadOutlined />
-                </Button>
-              </div>
-            </h3>
-          </Card>
-        ) : null}
-        <AntdForm
-          layout={HcserviceV3.isForeignLanguageMode() ? "vertical" : (dtmplConfig.formLayout || "horizontal")}
-          scrollToFirstError={true}
-          labelWrap={true}
-          ref={formRef}
-          name="control-hooks"
-          onValuesChange={this.onValuesChange}
-          onFinishFailed={() => this.props.onFinish(false)}
-          onFinish={this.onSubmit}
-        >
-          <AntdForm.Item hidden={true} name={"actionId"}></AntdForm.Item>
-          <AntdForm.Item hidden={true} name={"mainCode"}></AntdForm.Item>
-          {this.addHiddenItem(dtmplConfig.hiddenFields)}
-          {this.fieldGroupList(appDtmplConfig, currentDtmplData)}
-        </AntdForm>
-        {premises && premises.length > 0 ? (
-          <CollapseCard
-            title={this.premisestitle}
-            key={this.premisestitle}
-            id={parentId + premises[0].id}
-            className="hoverable"
-            styles={{ header: { background: "#f2f4f5" } }}
-          >
-            <FieldViewGroup serverKey={serverKey} fields={premises} />
-          </CollapseCard>
-        ) : (
-          ""
-        )}
-        {/*{this.nameValue}*/}
-      </>
-    );
-  }
-}
+import React from "react";
+import {
+  Button,
+  Card,
+  Form as AntdForm,
+  message,
+  Switch,
+} from "antd";
+import {
+  DtmplConfig,
+  DtmplData,
+  DtmplFormProps,
+  FieldConfig,
+  FieldGroupConfig,
+} from "../tmpl/interface";
+import HcserviceV3 from "../tmpl/hcservice-v3";
+import FormItemGroup from "./form-Item-group";
+import { ReloadOutlined } from "@ant-design/icons";
+import FieldViewGroup from "../detail/view/field-view-group";
+import RelationTable from "../table/relation-table";
+import "./dtmpl-form.css";
+import CollapseCard from "../controls/collapse-card";
+import { ProgramConfig } from "../index";
+import ToolTipBar from "../detail/tooltipbar";
+import EmbedDtmplEditPage from "../module/embed-dtmpl-edit-page";
+import LtmplTable from "../module/ltmpl-table";
+import TmplConfigAnalysis from "../tmpl/tmpl-config-analysis";
+import DtmplViewCard from "../module/dtmpl-view-card";
+import { LocaleContext } from "../locale/LocaleProvider";
+
+interface DtmplFormStat {
+  loading?: boolean;
+  currentDtmplData?: DtmplData;
+  appDtmplConfig?: DtmplConfig;
+  embedForm?: object;
+  embedRefValue?: object;
+  editingGroups?: string[];
+}
+
+export default class DtmplForm extends React.PureComponent<
+  DtmplFormProps,
+  DtmplFormStat
+> {
+  fuseMode: boolean = false;
+  premisestitle: string = "默认字段";
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+
+  state = {
+    loading: true,
+    currentDtmplData: undefined,
+    appDtmplConfig: undefined,
+    embedForm: {},
+    embedRefValue: {},
+    editingGroups: [],
+  };
+  static defaultPorps = {
+    maxCols: 2,
+    showHeader: true,
+    showRightNav: false,
+  };
+
+  async componentDidMount() {
+    await this.loadData();
+  }
+
+  async componentDidUpdate(preProps) {
+    const { code, formRef } = this.props;
+    const { code: preCode } = preProps;
+    if (preProps != this.props) {
+      await this.loadData();
+    }
+  }
+
+  loadData = async () => {
+    const {
+      sourceId,
+      code,
+      formRef,
+      dtmplData,
+      dtmplConfig,
+      serverKey,
+    } = this.props;
+    let dtmplData_;
+    if (code) {
+      this.setState({
+        loading: true,
+      });
+      dtmplData_ = await HcserviceV3.requestDtmplData(
+        serverKey,
+        sourceId,
+        code,
+        null
+      );
+    } else if (dtmplData) {
+      dtmplData_ = dtmplData;
+    } else {
+      dtmplData_ = {
+        code: undefined,
+        title: undefined,
+        fieldMap: {},
+        arrayMap: {},
+      };
+    }
+    //应用静态配置
+    let appDtmplConfig = ProgramConfig.getAppDtmplConfig(
+      dtmplConfig,
+      dtmplData,
+      this.props
+    );
+    this.setState({
+      appDtmplConfig,
+      currentDtmplData: dtmplData_,
+      loading: false,
+      embedRefValue: {},
+    });
+    setTimeout(
+      () => (formRef.current ? formRef.current.resetFields() : undefined),
+      200
+    );
+  };
+
+  doRefresh = async () => {
+    await this.loadData();
+    const { translate } = this.context;
+    message.info(translate("${已刷新}!"));
+  };
+  onGroupEditing = (groupCode, editing: boolean) => {
+
+    const { editingGroups } = this.state;
+    let arr = [...editingGroups];
+    if (editing) {
+      arr.push(groupCode);
+    } else {
+      arr = editingGroups.filter(item => item !== groupCode);
+    }
+    this.setState({ editingGroups: arr });
+  }
+
+  onGroupChange = (
+    fieldGroupConfig: FieldGroupConfig,
+    selectdDatas: DtmplData[]
+  ) => {
+    const { currentDtmplData } = this.state;
+    currentDtmplData["arrayMap"][fieldGroupConfig.id] = selectdDatas;
+    debugger
+    let currentDtmplData_1 = { ...currentDtmplData };
+    this.setState({
+      currentDtmplData: currentDtmplData_1,
+    });
+  };
+
+  changeFuseMode = (checked) => {
+    this.fuseMode = !checked;
+  };
+
+  postForm = async (result) => {
+    this.setState({
+      loading: true,
+    });
+    const { sourceId, code, dtmplData, serverKey } = this.props;
+    if (code) {
+      //有code是修改，没有是新增实体模板
+      result["唯一编码"] = code;
+    } else if (dtmplData && dtmplData.code) {
+      result["唯一编码"] = dtmplData.code;
+    }
+    let res = await HcserviceV3.postDtmplData(
+      serverKey,
+      sourceId,
+      result,
+      message
+    );
+    this.setState({
+      loading: false,
+    });
+    if (res.status === "success") {
+      this.props.onFinish(res.code);
+    } else {
+      this.props.onFinish(false);
+    }
+  };
+
+  onSubmit = async (values: any) => {
+    const { dtmplConfig, dtmplData } = this.props;
+    const {
+      currentDtmplData,
+      appDtmplConfig,
+      embedForm,
+      embedRefValue, editingGroups
+    } = this.state;
+
+    if (editingGroups.length > 0) {
+      message.error("请提交表格数据后再保存");
+      this.props.onFinish(false);
+      return;
+    }
+
+    const fields = appDtmplConfig.groups?.map(r => r.fields).flat();
+    if (fields?.length) {
+      fields.forEach(r => {
+        if (r.hidden && r.clearValueOnHidden) { // 隐藏字段，清空值
+          values[r.id] = "";
+        }
+      });
+    }
+
+    if (dtmplData) {
+      dtmplData.fieldMap = { ...values }
+    }
+
+    let resultCode = undefined;
+    const result = values;
+    for (let group of dtmplConfig.groups) {
+      if (group.type == "embed" && group.embedType != "列表") {
+        if (!embedRefValue[group.id]) {
+          embedForm[group.id].current.doSubmit();
+          return;
+        } else {
+          let fieldId = TmplConfigAnalysis.getFieldId(
+            appDtmplConfig,
+            group.codeSourceFieldMstrucId
+          );
+          result[fieldId] = embedRefValue[group.id];
+        }
+      } else if (group.type == "relation" && !group.readOnly) {
+        //添加关系标识
+        result[`${group.id}.$$flag$$`] = true;
+        //添加关系内容
+        let ds: DtmplData[] = currentDtmplData.arrayMap[group.id];
+        if (ds) {
+          ds.forEach((d, index) => {
+            result[`${group.id}[${index}].$$relation$$`] = d.relationLabel;
+            if (d.editStatus && d.editStatus == "new") {
+              for (let field of group.fields) {
+                result[`${group.id}[${index}].${field.id}`] =
+                  d.fieldMap[field.id];
+              }
+            } else if (d.editStatus && d.editStatus == "changed") {
+              result[`${group.id}[${index}].唯一编码`] = d.code;
+              for (let field of group.fields) {
+                result[`${group.id}[${index}].${field.id}`] =
+                  d.fieldMap[field.id];
+              }
+            } else {
+              result[`${group.id}[${index}].唯一编码`] = d.code;
+            }
+          });
+        }
+      }
+    }
+    resultCode = await this.postForm(result);
+  };
+  onEmbedPageFinish = (group: FieldGroupConfig, code: string) => {
+    const { embedRefValue } = this.state;
+    embedRefValue[group.id] = code;
+    const { formRef } = this.props;
+    formRef.current.submit();
+  };
+  addHiddenItem = (hiddenFields: FieldConfig[]) => {
+    if (hiddenFields) {
+      return hiddenFields.map((f) => {
+        return (
+          <AntdForm.Item
+            hidden={true}
+            name={f.id}
+            initialValue={f.value}
+          ></AntdForm.Item>
+        );
+      });
+    }
+  };
+
+  fieldGroupList = (dtmplConfig: DtmplConfig, dtmplData: DtmplData) => {
+    const {
+      parentId,
+      maxColsOnRow,
+      mainCode,
+      formRef,
+      serverKey,
+      showRightNav,
+      valueFieldMap
+    } = this.props;
+    const { loading, embedForm } = this.state;
+    let groups: FieldGroupConfig[] = [];
+    if (dtmplConfig) {
+      groups = dtmplConfig.groups;
+    }
+    return groups.map((item) => {
+      if (item.type == "embed") {
+        let codeSource = undefined;
+        //code 从来源字段里面拿
+        let code = TmplConfigAnalysis.getFieldValueCodeOfMstrucId(
+          dtmplConfig,
+          dtmplData.fieldMap,
+          item.codeSourceFieldMstrucId
+        );
+        let innerSourceId = TmplConfigAnalysis.getFieldValueCodeOfMstrucId(
+          dtmplConfig,
+          dtmplData.fieldMap,
+          item.pageSourceFieldMstrucId
+        );
+        innerSourceId = innerSourceId ? innerSourceId : item.pointSourceId;
+        if (!innerSourceId) {
+          return null;
+        }
+        if (item.embedType == "列表") {
+          return (
+            <Card
+              styles={{ body: { padding: 0 } }}
+              variant={"borderless"}
+              style={{ width: showRightNav ? "90%" : "100%" }}
+            >
+              <LtmplTable
+                serverKey={null}
+                collapsible={true}
+                initCollapse={false}
+                title={item.title}
+                mainCode={mainCode}
+                funcMode={"common"}
+                sourceId={innerSourceId}
+              ></LtmplTable>
+            </Card>
+          );
+        } else if (item.embedType == "详情") {
+          codeSource = "listop";
+          return (
+            <CollapseCard
+              showRightNav={showRightNav}
+              tip={item.tip}
+              title={item.title}
+              key={item.id}
+              id={parentId + item.id}
+              className="hoverable"
+              loading={loading}
+              styles={{ body: { padding: "6px" }, header: { background: "#f2f4f5" } }}
+            >
+              <DtmplViewCard
+                showHeader={false}
+                codeSource={codeSource}
+                code={code}
+                sourceId={innerSourceId}
+              ></DtmplViewCard>{" "}
+            </CollapseCard>
+          );
+        } else {
+          embedForm[item.id] = React.createRef();
+          switch (item.embedType) {
+            case "编辑":
+              codeSource = "listop";
+              break;
+            case "编辑或添加":
+              codeSource = "new";
+              break;
+          }
+          return (
+            <CollapseCard
+              showRightNav={showRightNav}
+              tip={item.tip}
+              title={item.title}
+              key={item.id}
+              id={parentId + item.id}
+              className="hoverable"
+              loading={loading}
+              styles={{ body: { padding: "6px" }, header: { background: "#f2f4f5" } }}
+            >
+              <EmbedDtmplEditPage
+                ref={embedForm[item.id]}
+                onFinish={(code: any) => {
+                  this.onEmbedPageFinish(item, code);
+                }}
+                codeSource={codeSource}
+                code={code}
+                sourceId={innerSourceId}
+              ></EmbedDtmplEditPage>{" "}
+            </CollapseCard>
+          );
+        }
+      } else if (item.type == "relation") {
+        //关系
+        if (item.fields) {
+          let data: DtmplData[] = undefined;
+          if (dtmplData) {
+            data = dtmplData.arrayMap[item.id];
+          }
+          debugger
+          return (
+            <RelationTable
+              showRightNav={showRightNav}
+              serverKey={serverKey}
+              mainCode={mainCode ? mainCode : parentId}
+              loading={loading}
+              parentId={parentId}
+              key={item.id}
+              fieldGroupConfig={item}
+              value={data}
+              parentFormInstance={formRef?.current}
+              viewOrEdit={item.readOnly ? "view" : "edit"}
+              onEditing={(editing) => {
+                this.onGroupEditing(item.id, editing);
+              }}
+              onChange={this.onGroupChange}
+            />
+          );
+        }
+      } else {
+        //字段组
+        return (
+          <CollapseCard
+            showRightNav={showRightNav}
+            tip={item.tip}
+            title={item.title}
+            key={item.id}
+            id={parentId + item.id}
+            className="hoverable"
+            loading={loading}
+            styles={{ body: { padding: "6px" }, header: { background: "#f2f4f5" } }}
+          >
+            {item.readOnly ? <FieldViewGroup fields={item ? item.fields : undefined}
+              dataCode={dtmplData ? dtmplData.code : null}
+              serverKey={serverKey}
+              valueMap={dtmplData ? dtmplData.fieldMap : undefined}
+            /> :
+              <FormItemGroup layout={HcserviceV3.isForeignLanguageMode() ? "vertical" : (dtmplConfig.formLayout || "horizontal")}
+                serverKey={serverKey}
+                formRef={formRef}
+                mainCode={mainCode}
+                maxColsOnRow={maxColsOnRow}
+                fields={item ? item.fields : undefined}
+                dataCode={dtmplData ? dtmplData.code : undefined}
+                valueMap={dtmplData ? dtmplData.fieldMap : undefined}
+                valueFieldMap={valueFieldMap}
+              />}
+          </CollapseCard>
+        );
+      }
+    });
+  };
+
+  onValuesChange = (changedValues, allValues) => {
+    const { onValuesChange, formRef, code } = this.props;
+    const { appDtmplConfig, currentDtmplData } = this.state;
+    //新增修改，与前同步
+    // if(!code){//此处不关闭页面切换时有bug,用于连续添加
+    //   dtmplData.fieldMap=allValues;
+    // }
+
+    if (appDtmplConfig.onValuesChange) {
+      //自定义值修改逻辑
+      appDtmplConfig.onValuesChange(
+        changedValues,
+        {
+          code,
+          fieldMap: allValues,
+          arrayMap: currentDtmplData.arrayMap,
+        },
+        formRef.current
+      );
+    }
+    if (onValuesChange) {
+      onValuesChange(changedValues, allValues);
+    }
+  };
+
+  // nameValue = AntdForm.useWatch(this.props.dtmplConfig.groups[0].fields[0].id, this.props.formRef.current);
+  render() {
+    const {
+      formRef,
+      dtmplConfig,
+      code,
+      parentId,
+      showHeader,
+      serverKey, dtmplData,
+    } = this.props;
+    const { currentDtmplData, appDtmplConfig } = this.state;
+    const { translate } = this.context;
+    if (!dtmplConfig || !dtmplData) {
+      return <Card loading={true}>{translate("${加载中}")}... ...</Card>;
+    }
+
+    //debugger
+    const { buttons, premises } = appDtmplConfig
+      ? appDtmplConfig
+      : { buttons: undefined, premises: undefined };
+    return (
+      <>
+        {showHeader ? (
+          <Card variant={"borderless"}
+            key={"detailTitle"}
+            className="hoverable pageHeader"
+          >
+            <h3>
+              {code || (currentDtmplData && currentDtmplData.code)
+                ? translate("[${编辑}]")
+                : translate("[${新增}]")}
+              {dtmplConfig ? <ToolTipBar content={dtmplConfig.tip} /> : null}
+              <div className="fr">
+                {buttons && buttons.includes("fusionMode") ? (
+                  <Switch
+                    checkedChildren={translate("${开}")}
+                    unCheckedChildren={translate("${关}")}
+                    style={{ marginRight: 10 }}
+                    title={translate("${融合模式}")}
+                    onChange={this.changeFuseMode}
+                  />
+                ) : (
+                  ""
+                )}
+                <Button
+                  className="hoverbig"
+                  title={translate("${刷新}")}
+                  onClick={this.doRefresh}
+                >
+                  <ReloadOutlined />
+                </Button>
+              </div>
+            </h3>
+          </Card>
+        ) : null}
+        <AntdForm
+          layout={HcserviceV3.isForeignLanguageMode() ? "vertical" : (dtmplConfig.formLayout || "horizontal")}
+          scrollToFirstError={true}
+          labelWrap={true}
+          ref={formRef}
+          name="control-hooks"
+          onValuesChange={this.onValuesChange}
+          onFinishFailed={() => this.props.onFinish(false)}
+          onFinish={this.onSubmit}
+        >
+          <AntdForm.Item hidden={true} name={"actionId"}></AntdForm.Item>
+          <AntdForm.Item hidden={true} name={"mainCode"}></AntdForm.Item>
+          {this.addHiddenItem(dtmplConfig.hiddenFields)}
+          {this.fieldGroupList(appDtmplConfig, currentDtmplData)}
+        </AntdForm>
+        {premises && premises.length > 0 ? (
+          <CollapseCard
+            title={this.premisestitle}
+            key={this.premisestitle}
+            id={parentId + premises[0].id}
+            className="hoverable"
+            styles={{ header: { background: "#f2f4f5" } }}
+          >
+            <FieldViewGroup serverKey={serverKey} fields={premises} />
+          </CollapseCard>
+        ) : (
+          ""
+        )}
+        {/*{this.nameValue}*/}
+      </>
+    );
+  }
+}