aldehyde 0.2.98 → 0.2.100

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

@@ -1,348 +1,501 @@
-import React from 'react'
-import {Button, Card, Form as AntdForm, FormInstance, message, Switch} from 'antd'
-import {DtmplConfig, DtmplData, DtmplFormProps, FieldConfig, FieldGroupConfig} from "../tmpl/interface";
+import React from "react";
+import {
+  Button,
+  Card,
+  Form as AntdForm,
+  FormInstance,
+  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 { ReloadOutlined } from "@ant-design/icons";
 import FieldViewGroup from "../detail/view/field-view-group";
 import RelationTable from "../table/relation-table";
-import './dtmpl-form.css';
+import "./dtmpl-form.css";
 import CollapseCard from "../controls/collapse-card";
-import {ProgramConfig} from "../index";
+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
-};
+  loading?: boolean;
+  currentDtmplData?: DtmplData;
+  appDtmplConfig?: DtmplConfig;
+  embedForm?: object;
+  embedRefValue?: object;
+}
 
+export default class DtmplForm extends React.PureComponent<
+  DtmplFormProps,
+  DtmplFormStat
+> {
+  fuseMode: boolean = false;
+  premisestitle: string = "默认字段";
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
 
-export default class DtmplForm extends React.PureComponent<DtmplFormProps, DtmplFormStat> {
-    fuseMode: boolean = false;
-    premisestitle: string = "默认字段";
+  state = {
+    loading: true,
+    currentDtmplData: undefined,
+    appDtmplConfig: undefined,
+    embedForm: {},
+    embedRefValue: {},
+  };
+  static defaultPorps = {
+    maxCols: 2,
+    showHeader: true,
+    showRightNav: false,
+  };
 
-    state = {
-        loading: true,
-        currentDtmplData: undefined,
-        appDtmplConfig: undefined,
-        embedForm:{},
-        embedRefValue:{},
-    }
-    static defaultPorps = {
-        maxCols: 2,
-        showHeader: true,
-        showRightNav:false
-    }
+  async componentDidMount() {
+    await this.loadData();
+  }
 
-    async componentDidMount() {
-        await this.loadData();
+  async componentDidUpdate(preProps) {
+    const { code, formRef } = this.props;
+    const { code: preCode } = preProps;
+    if (preProps != this.props) {
+      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
+    );
+  };
 
-    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);
+  doRefresh = async () => {
+    await this.loadData();
+    const { translate } = this.context;
+    message.info(translate("${已刷新}!"));
+  };
 
-        } 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)
-    }
+  onGroupChange = (
+    fieldGroupConfig: FieldGroupConfig,
+    selectdDatas: DtmplData[]
+  ) => {
+    const { currentDtmplData } = this.state;
+    currentDtmplData["arrayMap"][fieldGroupConfig.id] = selectdDatas;
+    let currentDtmplData_1 = { ...currentDtmplData };
+    this.setState({
+      currentDtmplData: currentDtmplData_1,
+    });
+  };
 
-    doRefresh = async () => {
-        await this.loadData();
-        message.info("已刷新！")
-    }
-
-    onGroupChange = (fieldGroupConfig: FieldGroupConfig, selectdDatas: DtmplData[]) => {
-        const {currentDtmplData} = this.state;
-        currentDtmplData['arrayMap'][fieldGroupConfig.id] = selectdDatas;
-        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;
     }
-
-
-    changeFuseMode = (checked) => {
-        this.fuseMode = !checked;
+    let res = await HcserviceV3.postDtmplData(
+      serverKey,
+      sourceId,
+      result,
+      message
+    );
+    this.setState({
+      loading: false,
+    });
+    if (res.status === "success") {
+      this.props.onFinish(res.code);
     }
+  };
 
-    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") {
-            if(this.props.onFinish){
-                this.props.onFinish(res.code);
-            };
+  onSubmit = async (values: any) => {
+    const { dtmplConfig } = this.props;
+    const {
+      currentDtmplData,
+      appDtmplConfig,
+      embedForm,
+      embedRefValue,
+    } = this.state;
+    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];
         }
-    }
-
-    onSubmit = async (values: any) => {
-        const {dtmplConfig} = this.props;
-        const {currentDtmplData,appDtmplConfig,embedForm,embedRefValue} = this.state;
-        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;
-                        }
-                    })
-                }
+      } 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} = 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 bodyStyle={{padding:0}} bordered={false} 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"
-                                         headStyle={{background: "#f2f4f5"}}
-                                         loading={loading}
-                                         bodyStyle={{padding: '6px'}}
-                    ><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"
-                                         headStyle={{background: "#f2f4f5"}}
-                                         loading={loading}
-                                         bodyStyle={{padding: '6px'}}
-                    ><EmbedDtmplEditPage ref={embedForm[item.id]} onFinish={(code)=>{
-                        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];
-                        }
-                        return <RelationTable showRightNav={showRightNav}  serverKey={serverKey} mainCode={mainCode ? mainCode : parentId}
-                                              loading={loading} parentId={parentId} key={item.id} fieldGroupConfig={item}
-                                              value={data}
-                                              viewOrEdit={item.readOnly ? "view" : "edit"} onChange={this.onGroupChange}/>
-                    }
-                } else {//字段组
-                    return <CollapseCard showRightNav={showRightNav}
-                        tip={item.tip}
-                        title={item.title}
-                        key={item.id}
-                        id={parentId + item.id}
-                        className="hoverable"
-                        headStyle={{background: "#f2f4f5"}}
-                        loading={loading}
-                        bodyStyle={{padding: '6px'}}
-                    >
-                        <FormItemGroup serverKey={serverKey} formRef={formRef} mainCode={mainCode}
-                                       maxColsOnRow={maxColsOnRow} fields={item ? item.fields : undefined}
-                                       valueMap={dtmplData ? dtmplData.fieldMap : undefined}
-                        ></FormItemGroup>
-                    </CollapseCard>
-                }
-            }
+    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>
         );
+      });
     }
+  };
 
-    onValuesChange = (changedValues, allValues) => {
-        const {onValuesChange, formRef, code} = this.props;
-        const {appDtmplConfig, currentDtmplData} = this.state;
-        if (appDtmplConfig.onValuesChange) {//自定义值修改逻辑
-            appDtmplConfig.onValuesChange(changedValues, {
-                code,
-                fieldMap: allValues,
-                arrayMap: currentDtmplData.arrayMap
-            }, formRef.current);
-        }
-        if(onValuesChange) {
-            onValuesChange()
-        };
+  fieldGroupList = (dtmplConfig: DtmplConfig, dtmplData: DtmplData) => {
+    const {
+      parentId,
+      maxColsOnRow,
+      mainCode,
+      formRef,
+      serverKey,
+      showRightNav,
+    } = this.props;
+    const { loading, embedForm } = this.state;
+    let groups: FieldGroupConfig[] = [];
+    if (dtmplConfig) {
+      groups = dtmplConfig.groups;
     }
-
-    // nameValue = AntdForm.useWatch(this.props.dtmplConfig.groups[0].fields[0].id, this.props.formRef.current);
-    render() {
-        const {formRef, dtmplConfig, code, parentId, showHeader, serverKey} = this.props;
-        const {currentDtmplData, appDtmplConfig} = this.state;
-        if (!dtmplConfig) {
-            return <Card loading={true}>
-                加载中... ...
+    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
+              bodyStyle={{ padding: 0 }}
+              bordered={false}
+              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"
+              headStyle={{ background: "#f2f4f5" }}
+              loading={loading}
+              bodyStyle={{ padding: "6px" }}
+            >
+              <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"
+              headStyle={{ background: "#f2f4f5" }}
+              loading={loading}
+              bodyStyle={{ padding: "6px" }}
+            >
+              <EmbedDtmplEditPage
+                ref={embedForm[item.id]}
+                onFinish={(code) => {
+                  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];
+          }
+          return (
+            <RelationTable
+              showRightNav={showRightNav}
+              serverKey={serverKey}
+              mainCode={mainCode ? mainCode : parentId}
+              loading={loading}
+              parentId={parentId}
+              key={item.id}
+              fieldGroupConfig={item}
+              value={data}
+              viewOrEdit={item.readOnly ? "view" : "edit"}
+              onChange={this.onGroupChange}
+            />
+          );
         }
-        //debugger
-        const {buttons, premises} = appDtmplConfig ? appDtmplConfig : {buttons: undefined, premises: undefined};
+      } else {
+        //字段组
         return (
-            <>
-                {showHeader ? <Card bordered={false}
-                                    key={"detailTitle"}
-                                    className="hoverable pageHeader"
-                >
-                    <h3>
-                        {code || (currentDtmplData && currentDtmplData.code) ? "[编辑]" : "[新增]"}
-                        {dtmplConfig ? <ToolTipBar content={dtmplConfig.tip}/> : null}
-                        <div className="fr">
-                            {buttons && buttons.includes('fusionMode') ?
-                                <Switch
-                                    checkedChildren="开"
-                                    unCheckedChildren="关"
-                                    style={{marginRight: 10}}
-                                    title="融合模式"
-                                    onChange={this.changeFuseMode}/>
-                                : ""}
-                            <Button
-                                className="hoverbig"
-                                title="刷新"
-                                onClick={this.doRefresh}
-                            ><ReloadOutlined/></Button>
-                        </div>
-                    </h3>
-                </Card> : null}
-                <AntdForm scrollToFirstError={true} labelWrap={true} ref={formRef} name="control-hooks"
-                          onValuesChange={this.onValuesChange} 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"
-                        headStyle={{background: "#f2f4f5"}}
-                        // loading={loading}
-                    >
-                        <FieldViewGroup serverKey={serverKey}
-                                        fields={premises}/>
-                    </CollapseCard>
-                    : ""
-                }
-                {/*{this.nameValue}*/}
-            </>
+          <CollapseCard
+            showRightNav={showRightNav}
+            tip={item.tip}
+            title={item.title}
+            key={item.id}
+            id={parentId + item.id}
+            className="hoverable"
+            headStyle={{ background: "#f2f4f5" }}
+            loading={loading}
+            bodyStyle={{ padding: "6px" }}
+          >
+            <FormItemGroup
+              serverKey={serverKey}
+              formRef={formRef}
+              mainCode={mainCode}
+              maxColsOnRow={maxColsOnRow}
+              fields={item ? item.fields : undefined}
+              valueMap={dtmplData ? dtmplData.fieldMap : undefined}
+            ></FormItemGroup>
+          </CollapseCard>
         );
+      }
+    });
+  };
+
+  onValuesChange = (changedValues, allValues) => {
+    const { onValuesChange, formRef, code } = this.props;
+    const { appDtmplConfig, currentDtmplData } = this.state;
+    if (appDtmplConfig.onValuesChange) {
+      //自定义值修改逻辑
+      appDtmplConfig.onValuesChange(
+        changedValues,
+        {
+          code,
+          fieldMap: allValues,
+          arrayMap: currentDtmplData.arrayMap,
+        },
+        formRef.current
+      );
     }
+    if (onValuesChange) {
+      onValuesChange();
+    }
+  };
 
+  // nameValue = AntdForm.useWatch(this.props.dtmplConfig.groups[0].fields[0].id, this.props.formRef.current);
+  render() {
+    const {
+      formRef,
+      dtmplConfig,
+      code,
+      parentId,
+      showHeader,
+      serverKey,
+    } = this.props;
+    const { currentDtmplData, appDtmplConfig } = this.state;
+    const { translate } = this.context;
+    if (!dtmplConfig) {
+      return <Card loading={true}>{translate("${加载中}")}... ...</Card>;
+    }
+    //debugger
+    const { buttons, premises } = appDtmplConfig
+      ? appDtmplConfig
+      : { buttons: undefined, premises: undefined };
+    return (
+      <>
+        {showHeader ? (
+          <Card
+            bordered={false}
+            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
+          scrollToFirstError={true}
+          labelWrap={true}
+          ref={formRef}
+          name="control-hooks"
+          onValuesChange={this.onValuesChange}
+          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"
+            headStyle={{ background: "#f2f4f5" }}
+            // loading={loading}
+          >
+            <FieldViewGroup serverKey={serverKey} fields={premises} />
+          </CollapseCard>
+        ) : (
+          ""
+        )}
+        {/*{this.nameValue}*/}
+      </>
+    );
+  }
 }
-
-