aldehyde 0.2.98 → 0.2.100

package/src/aldehyde/controls/entry-control.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import {FieldConfig, ViewOrEdit} from "../tmpl/interface";
-import {Alert, Input, Select, Spin, Checkbox,Radio,Switch} from "antd";
+import React from "react";
+import { FieldConfig, ViewOrEdit } from "../tmpl/interface";
+import { Alert, Input, Select, Spin, Checkbox, Radio, Switch } from "antd";
 import ControlTypeSupportor from "../tmpl/control-type-supportor";
 import Steps from "./steps";
 import InputNumber from "./input-number";
@@ -8,273 +8,399 @@ import InputRange from "./input-range";
 import AutoComplete from "./auto-complete";
 import loadable from "@loadable/component";
 import HCDataSource from "../tmpl/hc-data-source";
-import Upload from '../controls/upload';
-import Progress from './progress'
-import Cascader from './cascader'
+import Upload from "../controls/upload";
+import Progress from "./progress";
+import Cascader from "./cascader";
 import EntitySelect from "./entity-select/entity-select";
-import PopoverEntitySelect from './entity-select/popover-entity-select'
-import LabTreeSelect from './entity-select/lab-tree-select'
+import PopoverEntitySelect from "./entity-select/popover-entity-select";
+import LabTreeSelect from "./entity-select/lab-tree-select";
 import Units from "../units";
-import {ProgramConfig} from "../index";
-import {LockOutlined,} from '@ant-design/icons';
-import DatePicker from "./date-picker"
+import { ProgramConfig, useLocale } from "../index";
+import { LockOutlined } from "@ant-design/icons";
+import DatePicker from "./date-picker";
+import translate from "../locale/translate";
 
-const  CheckboxGroup=Checkbox.Group;
-const RadioGroup=Radio.Group;
-const Loading = <Spin tip="Loading...">
-    <Alert
-        message="正在加载数据。。。"
-        description="初次访问加载数据较多，可能需要几秒或几分钟，请耐心等待！！"
-        type="info"
-    />
-</Spin>;
-const Signature = loadable(() =>
-    import("./signature"), {fallback: Loading});
-const ChemStruc = loadable(() =>
-    import("./chemstruc/graph"), {fallback: Loading});
-const HtmlEditor = loadable(() =>
-    import("./html-editor/draft"), {fallback: Loading});
-const SqlCodeEditor = loadable(() =>
-    import("./code-editor/sql-code-editor"), {fallback: Loading});
-const ColorPicker = loadable(() =>
-    import("./color-picker"), {fallback: Loading});
+const CheckboxGroup = Checkbox.Group;
+const RadioGroup = Radio.Group;
+// const Loading = (() => {
+//   const { translate } = useLocale();
+
+//   return (
+//     <Spin tip="Loading...">
+//       <Alert
+//         message={translate("${正在加载数据}...")}
+//         description={translate(
+//           "${初次访问加载数据较多, 可能需要几秒或几分钟, 请耐心等待!!}"
+//         )}
+//         type="info"
+//       />
+//     </Spin>
+//   );
+// })();
+// 暂时先这样, 异步组件国际化有问题
+const Loading = <>loading</>;
+const Signature = loadable(() => import("./signature"), { fallback: Loading });
+const ChemStruc = loadable(() => import("./chemstruc/graph"), {
+  fallback: Loading,
+});
+const HtmlEditor = loadable(() => import("./html-editor/draft"), {
+  fallback: Loading,
+});
+const SqlCodeEditor = loadable(() => import("./code-editor/sql-code-editor"), {
+  fallback: Loading,
+});
+const ColorPicker = loadable(() => import("./color-picker"), {
+  fallback: Loading,
+});
 // const DatePicker = loadable(() =>
 //     import("./date-picker"), {fallback: Loading});
 
-const {TextArea} = Input;
+const { TextArea } = Input;
 
 interface EntryControlProps {
-    serverKey?:string,
-    mainCode?:string|Promise<string>,
-    value?: any;
-    fieldConfig: FieldConfig;
-    onChange?: any;
-    id?:any;
-    baseCriteria?:object,
-    style?:any;
+  serverKey?: string;
+  mainCode?: string | Promise<string>;
+  value?: any;
+  fieldConfig: FieldConfig;
+  onChange?: any;
+  id?: any;
+  baseCriteria?: object;
+  style?: any;
 }
 
 function getOptions(mstrucId) {
-    const options = [];
-    const items = HCDataSource.getEnums(mstrucId);
-    if (items) {
-        items.map((item) => {
-            options.push({label: (item.order && parseInt(item.order)>0 && parseInt(item.order)<10000 ? item.order + "." : "") + item.title, value: item.value})
-        })
-    }
-    return options;
+  const options = [];
+  const items = HCDataSource.getEnums(mstrucId);
+  if (items) {
+    items.map((item) => {
+      options.push({
+        label:
+          (item.order &&
+          parseInt(item.order) > 0 &&
+          parseInt(item.order) < 10000
+            ? item.order + "."
+            : "") + translate("${" + item.title + "}"),
+        value: item.value,
+      });
+    });
+  }
+  return options;
 }
 
+function renderControl(
+  id: any,
+  mainCode: string | Promise<string>,
+  fieldConfig: FieldConfig,
+  fieldValue: any,
+  onChange: any,
+  width: any,
+  other
+) {
+  const { translate } = useLocale();
+  let itemType = ControlTypeSupportor.getControlType(fieldConfig, fieldValue);
 
-function  renderControl(id:any,mainCode:string|Promise<string>,fieldConfig: FieldConfig, fieldValue: any, onChange: any, width: any,other) {
-
-    let itemType = ControlTypeSupportor.getControlType(fieldConfig, fieldValue);
-
-    let entryControl = undefined;
-
-    let placeholder = !fieldConfig.disabled ? `请输入${fieldConfig.title}` : "无需输入";
-    let disabled: boolean = fieldConfig.disabled;
+  let entryControl = undefined;
 
-    let viewOrEdit: ViewOrEdit = 'edit';
-    let fieldConfigM:string=fieldConfig.min;
-    let min=(fieldConfigM || fieldConfigM=='0' ) ? Units.configParamTrans(fieldConfigM) : undefined;
-    fieldConfigM=fieldConfig.max;
-    let max=(fieldConfigM || fieldConfigM=='0' ) ? Units.configParamTrans(fieldConfigM) : undefined;;
+  let placeholder = !fieldConfig.disabled
+    ? translate("${请输入}${" + fieldConfig.title + "}")
+    : translate("${无需输入}");
+  let disabled: boolean = fieldConfig.disabled;
 
-    let controlProps = {
-       id, mainCode,fieldConfig,min,max, itemType, viewOrEdit, onChange, disabled, value: fieldValue, style: {minWidth: 220, width: '100%'},...other,
-    }
+  let viewOrEdit: ViewOrEdit = "edit";
+  let fieldConfigM: string = fieldConfig.min;
+  let min =
+    fieldConfigM || fieldConfigM == "0"
+      ? Units.configParamTrans(fieldConfigM)
+      : undefined;
+  fieldConfigM = fieldConfig.max;
+  let max =
+    fieldConfigM || fieldConfigM == "0"
+      ? Units.configParamTrans(fieldConfigM)
+      : undefined;
 
-    let antdControlProps = {
-        id, placeholder, disabled, value: fieldValue, onChange, style: {minWidth: 220, width: '100%'},...other,
-    }
-
-    const unSupportControl = <Input
-        type="text"
-        placeholder={`暂未实现-${itemType}`}
-        disabled={true}
-    />;
-
-    //自定义组件为先
-    if(ProgramConfig.getCustomEditControl(itemType)){
-        return React.createElement(ProgramConfig.getCustomEditControl(itemType),controlProps);
-    }
+  let controlProps = {
+    id,
+    mainCode,
+    fieldConfig,
+    min,
+    max,
+    itemType,
+    viewOrEdit,
+    onChange,
+    disabled,
+    value: fieldValue,
+    style: { minWidth: 220, width: "100%" },
+    ...other,
+  };
 
+  let antdControlProps = {
+    id,
+    placeholder,
+    disabled,
+    value: fieldValue,
+    onChange,
+    style: { minWidth: 220, width: "100%" },
+    ...other,
+  };
 
+  const unSupportControl = (
+    <Input
+      type="text"
+      placeholder={translate("${暂未实现}-${" + itemType + "}")}
+      disabled={true}
+    />
+  );
 
-    switch (itemType) {
-        case 'int':
-        case 'decimal':
-        case 'float':
-        case 'double':
-        case 'intrange':
-        case 'decimalrange':
-            entryControl = <InputNumber
-                {...controlProps}
-            />
-            break;
-        case "text":
-            entryControl = <Input allowClear={true}
-                type="text"
-                {...antdControlProps}
-            />;
-            break;
-        case "range":
-            entryControl = <InputRange
-                // style={{width: scalableWidth}}
-                {...controlProps}
-            />;
-            break;
-        case 'select':
-            entryControl = <Select
-                {...antdControlProps}
-                notFoundContent="暂无选项"
-                allowClear={true}
-                showSearch
-                optionLabelProp={'value'}
-                optionFilterProp={'label'}
-                options={getOptions(fieldConfig.mstrucId)}
-            >
-            </Select>
-            break;
-        case 'multiselect':
-        case 'texttags':
-            entryControl = <Select
-                mode="multiple"
-                {...antdControlProps}
-                value={fieldValue && fieldValue!='' ? typeof (fieldValue) == 'string' ? fieldValue.split(',') : fieldValue:undefined}
-                notFoundContent="暂无选项"
-                allowClear={true}
-                showSearch
-                optionLabelProp={'value'}
-                optionFilterProp={'label'}
-                showArrow={true}
-                options={getOptions(fieldConfig.mstrucId)}
-            >
-            </Select>
-            break;
-        case "checkbox":
-            entryControl = <CheckboxGroup {...antdControlProps} options={getOptions(fieldConfig.mstrucId)} value={typeof (fieldValue) == 'string' ? fieldValue.split(',') : fieldValue}  />
-            break;
-        case "radio":
-            entryControl = <RadioGroup {...antdControlProps} options={getOptions(fieldConfig.mstrucId)} value={typeof (fieldValue) == 'string' ? fieldValue.split(',')[0] : fieldValue}  />
-            break;
-        case "yes-no-switch":
-            const {value:value1,onChange:onChange1,style:style1,...other1}=antdControlProps
-            entryControl =<Switch style={{width:'60px'}} checkedChildren="是" unCheckedChildren="否" checked={value1=='是' ?true:false} onChange={(checked)=>{
-                onChange1(checked?'是':'否');
-            }
-            } {...other1} />
-            break;
-        case "yes-no-radio":
-            const {value:value2,...other2}=antdControlProps
-            entryControl =<RadioGroup   value={value2?value2=='是' ?"是":"否":null} {...other2}>
-                <Radio value={"是"}>是</Radio>
-                <Radio value={"否"}>否</Radio>
-            </RadioGroup>
-            break;
-        case 'date-YY':
-        case 'daterange-YY':
-        case 'date-M1':
-        case 'daterange-M1':
-        case 'date':
-        case 'daterange':
-        case 'datetime-HH':
-        case 'datetimerange-HH':
-        case 'datetime-mm':
-        case 'datetimerange-mm':
-        case 'datetime':
-        case 'datetimerange':
-            entryControl = <DatePicker  {...controlProps}/>;
-            break;
-        case 'time-HH':
-        case 'timerange-HH':
-        case 'time-mm':
-        case 'timerange-mm':
-        case 'time':
-        case 'timerange':
-            entryControl = <DatePicker  {...controlProps}/>;
-            break;
-        case 'textarea':
-        case 'url':
-            entryControl =
-                <TextArea rows={3} allowClear={true}
-                          {...antdControlProps}
-                />
-            break;
-        case 'html':
-            entryControl = <HtmlEditor viewOrEdit={'edit'}  {...controlProps}></HtmlEditor>;
-            break;
-        case 'steps':
-            entryControl = <Steps {...controlProps} options={getOptions(fieldConfig.mstrucId)}/>
-            break;
-        case 'password':
-            entryControl =  <Input.Password
-                {...antdControlProps} autoComplete="new-password"
-                prefix={<LockOutlined className="site-form-item-icon"/>}
-            />
-            break;
-        case 'preselect':
-            entryControl = <AutoComplete {...controlProps} />
-            break;
-        case 'caselect':
-            entryControl =<Cascader {...controlProps}></Cascader>;
-            break;
-        case 'relation':
-            entryControl = unSupportControl;
-            break;
-        case 'file':
-        case 'video':
-        case 'picture':
-        case 'non-download-file':
-            entryControl = <Upload {...controlProps} />
-            break;
-        case 'chemstruc':
-            entryControl = <ChemStruc viewOrEdit={'edit'} {...controlProps}></ChemStruc>
-            //entryControl =unSupportControl
-            break;
-        case 'sql-code-editor':
-            entryControl = <SqlCodeEditor viewOrEdit={'edit'} {...controlProps}></SqlCodeEditor>
-            break;
-        case 'relselect':
-        case 'refselect':
-        case 'entity-select':
-            entryControl=<EntitySelect maxSelected={max?parseInt(max):undefined} {...controlProps} />
-            break;
-        case 'table-entity-select':
-            entryControl=<PopoverEntitySelect maxSelected={max?parseInt(max):undefined} {...controlProps}  />
-            break;
-        case 'lab-tree-select':
-            entryControl=<LabTreeSelect maxSelected={max?parseInt(max):undefined} {...controlProps}  />
-            break;
-        case 'progress':
-            entryControl = <Progress {...controlProps}></Progress>
-            break;
-        case 'signature':
-            entryControl = <Signature {...controlProps}></Signature>
-            break;
-        case 'color':
-            entryControl = <ColorPicker {...controlProps}></ColorPicker>
-            break;
-        case 'hidden'://
-            entryControl = <Input
-                type="hidden"
-                value={fieldValue}
-                disabled={true}
-            />;
-            break;
-        default:
-            entryControl = unSupportControl
-            break;
-    }
+  //自定义组件为先
+  if (ProgramConfig.getCustomEditControl(itemType)) {
+    return React.createElement(
+      ProgramConfig.getCustomEditControl(itemType),
+      controlProps
+    );
+  }
 
-    return entryControl;
+  switch (itemType) {
+    case "int":
+    case "decimal":
+    case "float":
+    case "double":
+    case "intrange":
+    case "decimalrange":
+      entryControl = <InputNumber {...controlProps} />;
+      break;
+    case "text":
+      entryControl = (
+        <Input allowClear={true} type="text" {...antdControlProps} />
+      );
+      break;
+    case "range":
+      entryControl = (
+        <InputRange
+          // style={{width: scalableWidth}}
+          {...controlProps}
+        />
+      );
+      break;
+    case "select":
+      entryControl = (
+        <Select
+          {...antdControlProps}
+          notFoundContent={translate("${暂无选项}")}
+          allowClear={true}
+          showSearch
+          optionLabelProp={"value"}
+          optionFilterProp={"label"}
+          options={getOptions(fieldConfig.mstrucId)}
+        ></Select>
+      );
+      break;
+    case "multiselect":
+    case "texttags":
+      entryControl = (
+        <Select
+          mode="multiple"
+          {...antdControlProps}
+          value={
+            fieldValue && fieldValue != ""
+              ? typeof fieldValue == "string"
+                ? fieldValue.split(",")
+                : fieldValue
+              : undefined
+          }
+          notFoundContent={translate("${暂无选项}")}
+          allowClear={true}
+          showSearch
+          optionLabelProp={"value"}
+          optionFilterProp={"label"}
+          showArrow={true}
+          options={getOptions(fieldConfig.mstrucId)}
+        ></Select>
+      );
+      break;
+    case "checkbox":
+      entryControl = (
+        <CheckboxGroup
+          {...antdControlProps}
+          options={getOptions(fieldConfig.mstrucId)}
+          value={
+            typeof fieldValue == "string" ? fieldValue.split(",") : fieldValue
+          }
+        />
+      );
+      break;
+    case "radio":
+      entryControl = (
+        <RadioGroup
+          {...antdControlProps}
+          options={getOptions(fieldConfig.mstrucId)}
+          value={
+            typeof fieldValue == "string"
+              ? fieldValue.split(",")[0]
+              : fieldValue
+          }
+        />
+      );
+      break;
+    case "yes-no-switch":
+      const {
+        value: value1,
+        onChange: onChange1,
+        style: style1,
+        ...other1
+      } = antdControlProps;
+      entryControl = (
+        <Switch
+          style={{ width: "60px" }}
+          checkedChildren={translate("${是}")}
+          unCheckedChildren={translate("${否}")}
+          checked={value1 == translate("${是}") ? true : false}
+          onChange={(checked) => {
+            onChange1(checked ? translate("${是}") : translate("${否}"));
+          }}
+          {...other1}
+        />
+      );
+      break;
+    case "yes-no-radio":
+      const { value: value2, ...other2 } = antdControlProps;
+      entryControl = (
+        <RadioGroup
+          value={
+            value2
+              ? value2 == translate("${是}")
+                ? translate("${是}")
+                : translate("${否}")
+              : null
+          }
+          {...other2}
+        >
+          <Radio value={translate("${是}")}>{translate("${是}")}</Radio>
+          <Radio value={translate("${否}")}>{translate("${否}")}</Radio>
+        </RadioGroup>
+      );
+      break;
+    case "date-YY":
+    case "daterange-YY":
+    case "date-M1":
+    case "daterange-M1":
+    case "date":
+    case "daterange":
+    case "datetime-HH":
+    case "datetimerange-HH":
+    case "datetime-mm":
+    case "datetimerange-mm":
+    case "datetime":
+    case "datetimerange":
+      entryControl = <DatePicker {...controlProps} />;
+      break;
+    case "time-HH":
+    case "timerange-HH":
+    case "time-mm":
+    case "timerange-mm":
+    case "time":
+    case "timerange":
+      entryControl = <DatePicker {...controlProps} />;
+      break;
+    case "textarea":
+    case "url":
+      entryControl = (
+        <TextArea rows={3} allowClear={true} {...antdControlProps} />
+      );
+      break;
+    case "html":
+      entryControl = (
+        <HtmlEditor viewOrEdit={"edit"} {...controlProps}></HtmlEditor>
+      );
+      break;
+    case "steps":
+      entryControl = (
+        <Steps {...controlProps} options={getOptions(fieldConfig.mstrucId)} />
+      );
+      break;
+    case "password":
+      entryControl = (
+        <Input.Password
+          {...antdControlProps}
+          autoComplete="new-password"
+          prefix={<LockOutlined className="site-form-item-icon" />}
+        />
+      );
+      break;
+    case "preselect":
+      entryControl = <AutoComplete {...controlProps} />;
+      break;
+    case "caselect":
+      entryControl = <Cascader {...controlProps}></Cascader>;
+      break;
+    case "relation":
+      entryControl = unSupportControl;
+      break;
+    case "file":
+    case "video":
+    case "picture":
+    case "non-download-file":
+      entryControl = <Upload {...controlProps} />;
+      break;
+    case "chemstruc":
+      entryControl = (
+        <ChemStruc viewOrEdit={"edit"} {...controlProps}></ChemStruc>
+      );
+      //entryControl =unSupportControl
+      break;
+    case "sql-code-editor":
+      entryControl = (
+        <SqlCodeEditor viewOrEdit={"edit"} {...controlProps}></SqlCodeEditor>
+      );
+      break;
+    case "relselect":
+    case "refselect":
+    case "entity-select":
+      entryControl = (
+        <EntitySelect
+          maxSelected={max ? parseInt(max) : undefined}
+          {...controlProps}
+        />
+      );
+      break;
+    case "table-entity-select":
+      entryControl = (
+        <PopoverEntitySelect
+          maxSelected={max ? parseInt(max) : undefined}
+          {...controlProps}
+        />
+      );
+      break;
+    case "lab-tree-select":
+      entryControl = (
+        <LabTreeSelect
+          maxSelected={max ? parseInt(max) : undefined}
+          {...controlProps}
+        />
+      );
+      break;
+    case "progress":
+      entryControl = <Progress {...controlProps}></Progress>;
+      break;
+    case "signature":
+      entryControl = <Signature {...controlProps}></Signature>;
+      break;
+    case "color":
+      entryControl = <ColorPicker {...controlProps}></ColorPicker>;
+      break;
+    case "hidden": //
+      entryControl = <Input type="hidden" value={fieldValue} disabled={true} />;
+      break;
+    default:
+      entryControl = unSupportControl;
+      break;
+  }
 
+  return entryControl;
 }
 
-const EntryControl: React.FC<EntryControlProps> =  (props) => {
-    const {fieldConfig, value, onChange,id,mainCode,...other} = props;
-    return  renderControl(id,mainCode,fieldConfig, value, onChange, null,other);
-}
+const EntryControl: React.FC<EntryControlProps> = (props) => {
+  const { fieldConfig, value, onChange, id, mainCode, ...other } = props;
+  return renderControl(id, mainCode, fieldConfig, value, onChange, null, other);
+};
 
-export default EntryControl;
+export default EntryControl;