aldehyde 0.2.98 → 0.2.100

package/src/aldehyde/form/field-group-form.tsx

@@ -1,76 +1,97 @@
-import React, {RefObject} from 'react'
-import {Form as AntdForm, message,Radio} from 'antd'
-import {DtmplData, FieldGroupConfig} from "../tmpl/interface";
+import React, { RefObject } from "react";
+import { Form as AntdForm, message, Radio } from "antd";
+import { DtmplData, FieldGroupConfig } from "../tmpl/interface";
 import HcserviceV3 from "../tmpl/hcservice-v3";
-import {FormInstance} from "antd/lib/form/hooks/useForm";
-import './dtmpl-form.css';
-import FormItemGroup, {FieldGroupProps} from './form-Item-group';
-import Units from '../units'
+import { FormInstance } from "antd/lib/form/hooks/useForm";
+import "./dtmpl-form.css";
+import FormItemGroup, { FieldGroupProps } from "./form-Item-group";
+import Units from "../units";
+import { LocaleContext } from "../locale/LocaleProvider";
 
+export interface FieldGroupFormProps {
+  serverKey?: string;
+  fieldGroupConfig: FieldGroupConfig;
+  formRef?: RefObject<FormInstance>;
+  dtmplData?: DtmplData;
+  onFinish: (value: DtmplData) => void;
+}
 
-export interface FieldGroupFormProps  {
-    serverKey?:string,
-    fieldGroupConfig: FieldGroupConfig,
-    formRef?: RefObject<FormInstance>,
-    dtmplData?:DtmplData,
-    onFinish: (value: DtmplData) => void,
-};
-
-interface FieldGroupFormStat {
-
-};
-
-export default class Form extends React.PureComponent<FieldGroupFormProps, FieldGroupFormStat> {
-    state = {}
-
-    async componentDidMount() {
+interface FieldGroupFormStat {}
 
-    }
+export default class Form extends React.PureComponent<
+  FieldGroupFormProps,
+  FieldGroupFormStat
+> {
+  state = {};
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
 
-    onSubmit =  (values: any) => {
-        const {dtmplData,fieldGroupConfig}=this.props;
-        let data:DtmplData={
-            code: dtmplData?dtmplData.code :'new'+Units.getRandomNum(6),
-            editStatus:dtmplData && dtmplData.code && !dtmplData.code.startsWith('new')?'changed':"new",
-        relationLabel: values['relationLabel']?values['relationLabel']:fieldGroupConfig.relationNames[0],
-        fieldMap: values,
-        };
-        this.props.onFinish(data);
-    }
+  async componentDidMount() {}
 
-    selectRelation=()=>{
-        const {fieldGroupConfig, dtmplData} = this.props;
-        if(fieldGroupConfig.relationNames.length>1){
-            return <AntdForm.Item  name="relationLabel" initialValue={dtmplData?dtmplData.relationLabel:undefined}
-                                   rules={[{
-                                       required: true, message: `请选择关系`,
-                                   }] }
-                                   label="关系">
-                <Radio.Group>
-                    {
-                        fieldGroupConfig.relationNames.map((item)=>{
-                            return <Radio value="item">{item}</Radio>
-                        })
-                    }
-                </Radio.Group>
-            </AntdForm.Item>
-        }else{
-            return "";
-        }
-    }
+  onSubmit = (values: any) => {
+    const { dtmplData, fieldGroupConfig } = this.props;
+    let data: DtmplData = {
+      code: dtmplData ? dtmplData.code : "new" + Units.getRandomNum(6),
+      editStatus:
+        dtmplData && dtmplData.code && !dtmplData.code.startsWith("new")
+          ? "changed"
+          : "new",
+      relationLabel: values["relationLabel"]
+        ? values["relationLabel"]
+        : fieldGroupConfig.relationNames[0],
+      fieldMap: values,
+    };
+    this.props.onFinish(data);
+  };
 
-    render() {
-        const {formRef, fieldGroupConfig, dtmplData,serverKey} = this.props;
-        return (
-            <>
-                <AntdForm labelWrap={true} ref={formRef} name="control-hooks" onFinish={this.onSubmit}>
-                    {this.selectRelation()}
-                    <FormItemGroup serverKey={serverKey} formRef={formRef} nameAttr={'id'} fields={fieldGroupConfig?fieldGroupConfig.fields:undefined} valueMap={dtmplData?dtmplData.fieldMap:{}}></FormItemGroup>
-                </AntdForm>
-            </>
-        );
+  selectRelation = () => {
+    const { fieldGroupConfig, dtmplData } = this.props;
+    const { translate } = this.context;
+    if (fieldGroupConfig.relationNames.length > 1) {
+      return (
+        <AntdForm.Item
+          name="relationLabel"
+          initialValue={dtmplData ? dtmplData.relationLabel : undefined}
+          rules={[
+            {
+              required: true,
+              message: translate("${请选择}${关系}"),
+            },
+          ]}
+          label={translate("${关系}")}
+        >
+          <Radio.Group>
+            {fieldGroupConfig.relationNames.map((item) => {
+              return <Radio value="item">{item}</Radio>;
+            })}
+          </Radio.Group>
+        </AntdForm.Item>
+      );
+    } else {
+      return "";
     }
+  };
 
+  render() {
+    const { formRef, fieldGroupConfig, dtmplData, serverKey } = this.props;
+    return (
+      <>
+        <AntdForm
+          labelWrap={true}
+          ref={formRef}
+          name="control-hooks"
+          onFinish={this.onSubmit}
+        >
+          {this.selectRelation()}
+          <FormItemGroup
+            serverKey={serverKey}
+            formRef={formRef}
+            nameAttr={"id"}
+            fields={fieldGroupConfig ? fieldGroupConfig.fields : undefined}
+            valueMap={dtmplData ? dtmplData.fieldMap : {}}
+          ></FormItemGroup>
+        </AntdForm>
+      </>
+    );
+  }
 }
-
-

package/src/aldehyde/form/form-Item-group.tsx

@@ -1,151 +1,209 @@
-import React, {RefObject} from 'react'
-import {Col, Form, Row} from 'antd'
-import {FieldConfig} from "../tmpl/interface";
+import React, { RefObject } from "react";
+import { Col, Form, Row } from "antd";
+import { FieldConfig } from "../tmpl/interface";
 import EntryControl from "../controls/entry-control";
-import Units from '../units'
-import {FormInstance} from "antd/lib/form/hooks/useForm";
+import Units from "../units";
+import { FormInstance } from "antd/lib/form/hooks/useForm";
+import { LocaleContext } from "../locale/LocaleProvider";
 
-const FormItem = Form.Item
+const FormItem = Form.Item;
 
 export interface FieldGroupProps {
-    serverKey?:string,
-    fields: FieldConfig[],
-    nameAttr?: string,
-    valueMap: object,
-    width?: number,
-    maxColsOnRow?: number,
-    mainCode?: string,
-    formRef?: RefObject<FormInstance>,
-};
+  serverKey?: string;
+  fields: FieldConfig[];
+  nameAttr?: string;
+  valueMap: object;
+  width?: number;
+  maxColsOnRow?: number;
+  mainCode?: string;
+  formRef?: RefObject<FormInstance>;
+}
 
 interface FieldGroupState {
-    fileList?: any,
-};
-
-export default class FormItemGroup extends React.PureComponent<FieldGroupProps, FieldGroupState> {
+  fileList?: any;
+}
 
-    static defaultProps = {
-        nameAttr: 'id',
-        maxColsOnRow: 2,
+export default class FormItemGroup extends React.PureComponent<
+  FieldGroupProps,
+  FieldGroupState
+> {
+  static defaultProps = {
+    nameAttr: "id",
+    maxColsOnRow: 2,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      fileList: [],
+    };
+  }
+
+  isPromise = (obj) => {
+    return (
+      !!obj && //有实际含义的变量才执行方法，变量null，undefined和''空串都为false
+      (typeof obj === "object" || typeof obj === "function") && // 初始promise 或 promise.then返回的
+      typeof obj.then === "function"
+    );
+  };
+
+  getMainCode = (item: FieldConfig, mainCode) => {
+    const { formRef } = this.props;
+    //  let a=formRef.current;
+    if (!item.mainCode) {
+      return mainCode;
     }
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            fileList: [],
-        }
+    if (typeof item.mainCode == "function") {
+      // let res = item.mainCode(formRef.current);
+      return item.mainCode(formRef.current);
+    } else {
+      return item.mainCode;
     }
-
-    isPromise = (obj) => {
-        return !!obj  //有实际含义的变量才执行方法，变量null，undefined和''空串都为false
-            && (typeof obj === 'object' || typeof obj === 'function') // 初始promise 或 promise.then返回的
-            && typeof obj.then === 'function';
+  };
+
+  getFieldConfig = (item: FieldConfig) => {
+    const { formRef } = this.props;
+    let fieldConfig = item;
+    if (item.updateSelf) {
+      fieldConfig = item.updateSelf(formRef.current);
+    } else {
+      fieldConfig = item;
     }
-
-
-    getMainCode = (item: FieldConfig, mainCode) => {
-        const {formRef} = this.props;
-        //  let a=formRef.current;
-        if (!item.mainCode) {
-            return mainCode;
+    //debugger
+    return fieldConfig;
+  };
+  initFormItem = (fieldConfig: FieldConfig, fieldValue) => {
+    const { nameAttr, maxColsOnRow, mainCode, serverKey } = this.props;
+    const { translate } = this.context;
+    let item = this.getFieldConfig(fieldConfig);
+    const title = item.title;
+
+    return (
+      <FormItem
+        label={translate("${" + item.title + "}")}
+        hidden={item.hidden}
+        name={item[nameAttr]}
+        key={item.id}
+        labelCol={
+          maxColsOnRow == 1
+            ? { span: 6 }
+            : item.colNum == 1
+            ? { span: 6 }
+            : { span: 3 }
         }
-        if (typeof item.mainCode == 'function') {
-            // let res = item.mainCode(formRef.current);
-            return item.mainCode(formRef.current);
-        } else {
-            return item.mainCode;
+        wrapperCol={
+          maxColsOnRow == 1
+            ? { span: 18 }
+            : item.colNum == 1
+            ? { span: 15 }
+            : { span: 19 }
         }
-    }
-
-    getFieldConfig = (item: FieldConfig) => {
-        const {formRef} = this.props;
-        let fieldConfig=item;
-        if (item.updateSelf) {
-            fieldConfig = item.updateSelf(formRef.current);
+        tooltip={item.tip}
+        initialValue={fieldValue}
+        style={{ margin: 4 }}
+        rules={
+          item.required
+            ? [
+                {
+                  required: true,
+                  message: translate("${请输入}${" + title + "}"),
+                },
+              ]
+            : undefined
+        }
+      >
+        <EntryControl
+          serverKey={serverKey}
+          mainCode={this.getMainCode(item, mainCode)}
+          value={fieldValue}
+          fieldConfig={item}
+        />
+      </FormItem>
+    );
+  };
+
+  initFormList = () => {
+    const {
+      fields,
+      valueMap,
+      nameAttr,
+      maxColsOnRow,
+      mainCode,
+      serverKey,
+    } = this.props;
+    const formItemList = [];
+
+    if (fields && fields.length > 0) {
+      fields.forEach((item, index) => {
+        let fieldValue = valueMap ? valueMap[item.id] : undefined;
+        const fieldKey = item.id + Math.random() * 100;
+        fieldValue =
+          fieldValue || fieldValue == 0
+            ? fieldValue
+            : item.defaultValue
+            ? Units.configParamTrans(item.defaultValue)
+            : undefined;
+        let formItem = null;
+        if (item.extControlType == "hidden") {
+          formItem = (
+            <FormItem
+              hidden={true}
+              initialValue={fieldValue}
+              name={item[nameAttr]}
+              key={item.id}
+            >
+              <EntryControl
+                serverKey={serverKey}
+                mainCode={this.getMainCode(item, mainCode)}
+                value={fieldValue}
+                fieldConfig={item}
+              />
+            </FormItem>
+          );
         } else {
-            fieldConfig = item;
+          //debugger;
+          // console.log("getFieldValue ---", Form.useFormInstance());
+          formItem = item.shouldUpdate ? (
+            <FormItem noStyle shouldUpdate={item.shouldUpdate}>
+              {() => this.initFormItem(item, fieldValue)}
+            </FormItem>
+          ) : (
+            this.initFormItem(item, fieldValue)
+          );
         }
-        //debugger
-        return fieldConfig;
-    }
-    initFormItem = (fieldConfig: FieldConfig, fieldValue) => {
-        const { nameAttr, maxColsOnRow, mainCode,serverKey} = this.props
-        let item = this.getFieldConfig(fieldConfig);
-        const title = item.title;
-
-        return <FormItem label={item.title} hidden={item.hidden}
-                         name={item[nameAttr]} key={item.id}
-                         labelCol={maxColsOnRow == 1 ? {span: 6} : item.colNum == 1 ? {span: 6} : {span: 3}}
-                         wrapperCol={maxColsOnRow == 1 ? {span: 18} : item.colNum == 1 ? {span: 15} : {span: 19}}
-                         tooltip={item.tip}
-                         initialValue={fieldValue}
-                         style={{margin: 4}}
-                         rules={item.required ? [{
-                             required: true, message: `请输入${title}`,
-                         }] : undefined}>
-            <EntryControl serverKey={serverKey} mainCode={this.getMainCode(item, mainCode)}
-                          value={fieldValue} fieldConfig={item}/>
-        </FormItem>
+        formItemList.push(formItem);
+      });
     }
 
-    initFormList = () => {
-        const {fields, valueMap, nameAttr, maxColsOnRow, mainCode,serverKey} = this.props
-        const formItemList = [];
-
-        if (fields && fields.length > 0) {
-            fields.forEach((item, index) => {
-                let fieldValue = valueMap ? valueMap[item.id] : undefined;
-                const fieldKey = item.id + Math.random() * 100;
-                fieldValue = (fieldValue || fieldValue == 0) ? fieldValue : item.defaultValue ? Units.configParamTrans(item.defaultValue) : undefined;
-                let formItem = null;
-                if (item.extControlType == 'hidden') {
-                    formItem = <FormItem hidden={true}
-                                         initialValue={fieldValue}
-                                         name={item[nameAttr]} key={item.id}>
-                        <EntryControl serverKey={serverKey} mainCode={this.getMainCode(item, mainCode)} value={fieldValue}
-                                      fieldConfig={item}/>
-                    </FormItem>
-                } else {
-                    //debugger;
-                    // console.log("getFieldValue ---", Form.useFormInstance());
-                    formItem =
-                        item.shouldUpdate ?
-                            <FormItem   noStyle shouldUpdate={item.shouldUpdate}>
-                                {() =>
-                                    this.initFormItem(item, fieldValue)
-                                }
-                            </FormItem> : this.initFormItem(item, fieldValue);
-                }
-                formItemList.push(formItem);
-            });
-        }
-
-        const colList = [];
-
-        for (let i = 0; i < formItemList.length; i = i + 1) {
-            let colNum = fields[i].colNum;
-
-            if (fields[i].extControlType == 'hidden' ) {
-                colNum = 0;
-            } else if (maxColsOnRow && maxColsOnRow == 1) {
-                colNum = 2;
-            }
-            let col = <Col key={i} span={12 * colNum}>
-                {formItemList[i]}
-            </Col>
-            colList.push(col);
-        }
-
-        const row =
-            <Row gutter={[16, 8]} key={1}>
-                {colList}
-            </Row>
-        return row;
+    const colList = [];
+
+    for (let i = 0; i < formItemList.length; i = i + 1) {
+      let colNum = fields[i].colNum;
+
+      if (fields[i].extControlType == "hidden") {
+        colNum = 0;
+      } else if (maxColsOnRow && maxColsOnRow == 1) {
+        colNum = 2;
+      }
+      let col = (
+        <Col key={i} span={12 * colNum}>
+          {formItemList[i]}
+        </Col>
+      );
+      colList.push(col);
     }
 
-    render() {
-        return (
-            this.initFormList()
-        )
-    }
+    const row = (
+      <Row gutter={[16, 8]} key={1}>
+        {colList}
+      </Row>
+    );
+    return row;
+  };
+
+  render() {
+    return this.initFormList();
+  }
 }