aldehyde 0.2.480 → 0.2.481

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

@@ -1,289 +1,289 @@
-import React from "react";
-import { Alert, Badge, Input, Spin, Tooltip } from "antd";
-import loadable from "@loadable/component";
-import { ControlHolderType, FieldConfig, ViewOrEdit } from "../tmpl/interface";
-import ControlTypeSupportor from "../tmpl/control-type-supportor";
-import EnumTags from "./enum-tag";
-import EnumBadge from "./enum-badge";
-import Steps from "./steps";
-import Units from "./../units";
-import Rfield from "./rfield";
-import dayjs from "dayjs";
-import Progress from "./progress";
-
-import EllipsisText from "./text/ellipsis-text";
-import { ProgramConfig, useLocale } from "../index";
-import FieldHistory from "./field-history";
-import MultiFileView from "./file-view/multi-file-view";
-import DirectFileView from "./direct-file-view";
-import QRCode from "./qr-code";
-
-
-// 暂时先这样, 异步组件国际化有问题
-const Loading = <>loading</>;
-
-const Signature = loadable(() => import("./signature"), { fallback: Loading });
-const ChemStruc = loadable(() => import("./chemstruc/graph"), {
-  fallback: Loading,
-});
-const SqlCodeEditor = loadable(() => import("./code-editor/sql-code-editor"), {
-  fallback: Loading,
-});
-const ColorPicker = loadable(() => import("./color-picker"), {
-  fallback: Loading,
-});
-const FileView = loadable(() => import("../controls/file-view"), {
-  fallback: Loading,
-});
-interface FieldViewControlProps {
-  serverKey?: string;
-  value?: any;
-  fieldConfig: FieldConfig;
-  holderType: ControlHolderType;
-  style?: any;
-  dataCode?: string;
-}
-
-function renderControl(
-  fieldConfig: FieldConfig,
-  fieldValue: any,
-  pHolderType: ControlHolderType,
-  width: any,
-  other: any
-) {
-  const { translate } = useLocale();
-  let itemType = ControlTypeSupportor.getControlType(fieldConfig, fieldValue);
-  let holderType: ControlHolderType = pHolderType;
-  if (!holderType) {
-    holderType = "descriptions";
-  }
-
-  const colSpan = fieldConfig.colSpan;
-  let scalableWidth = width;
-  if (colSpan == 2) {
-    scalableWidth = width * colSpan * 1.52;
-  }
-  let viewControl = undefined;
-
-  let placeholder = !fieldConfig.disabled
-    ? translate("${请输入}${" + fieldConfig.title + "}")
-    : translate("${无需输入}");
-  let disabled: boolean = fieldConfig.disabled;
-
-  let value = fieldValue || fieldValue == 0
-    ? fieldValue
-    : fieldConfig.defaultValue &&
-      !Units.isConfigDefaultValue(fieldConfig.defaultValue)
-      ? fieldConfig.defaultValue
-      : "";
-  let viewOrEdit: ViewOrEdit = "view";
-
-  let controlProps = {
-    fieldConfig,
-    itemType,
-    value,
-    viewOrEdit,
-    ...other,
-  };
-  //自定义组件为先
-  if (ProgramConfig.getCustomEditControl(itemType)) {
-    return React.createElement(
-      ProgramConfig.getCustomViewControl(itemType),
-      controlProps
-    );
-  }
-
-  const unSupportControl = (
-    <span className="infoStyle">
-      {translate("${暂未完成}-${" + itemType + "}")}
-    </span>
-  );
-
-  if (value != 0 && (!value || value == "null" || value.toString().includes("@R@null"))) {
-    viewControl = <></>;
-  } else {
-    switch (itemType) {
-      case "int":
-      case "decimal":
-      case "float":
-      case "double":
-      case "intrange":
-      case "decimalrange":
-      case "range":
-        viewControl = <span className="infoStyle">{value}</span>;
-        break;
-      case "date-YY":
-      case "date-M1":
-      case "date":
-      case "datetime-HH":
-      case "datetime-mm":
-      case "datetime":
-      case "time-HH":
-      case "time-mm":
-      case "time":
-        viewControl = (
-          <span className="infoStyle">
-            {value
-              ? dayjs(value).format(Units.getDayjsFormat(itemType)) ==
-                "Invalid Date"
-                ? value
-                : dayjs(value).format(Units.getDayjsFormat(itemType))
-              : undefined}
-          </span>
-        );
-        break;
-      case "daterange-YY":
-      case "daterange-M1":
-      case "daterange":
-      case "datetimerange-HH":
-      case "datetimerange-mm":
-      case "datetimerange":
-      case "timerange-HH":
-      case "timerange-mm":
-      case "timerange":
-        viewControl = <span className="infoStyle">{value}</span>;
-        break;
-      case "text":
-      case "textarea":
-      case "text-view":
-      case "preselect":
-      case "QRCode":
-        if (holderType == "table") {
-          viewControl = (
-            <EllipsisText
-              isHtml={false}
-              value={value}
-              showMax={
-                fieldConfig.ellipsisLength ? fieldConfig.ellipsisLength : 28
-              }
-            ></EllipsisText>
-          );
-        } else {
-          viewControl = <span className="infoStyle">{value}</span>;
-        }
-        break;
-      case "select":
-      case "radio":
-      case "yes-no-switch":
-        viewControl = <EnumBadge {...controlProps} />;
-        break;
-      case "yes-no-radio":
-        viewControl = (
-          <span className="infoStyle">
-            {value ? (
-              <Badge
-                color={value == "是" || value == 1 ? "green" : "red"}
-                text={translate("${" + (value == 0 ? "否" : value) + "}")}
-              />
-            ) : null}
-          </span>
-        );
-        break;
-      case "multiselect":
-      case "checkbox":
-        viewControl = <EnumTags {...controlProps} />;
-        break;
-      case "html":
-        if (holderType == "table") {
-          viewControl = (
-            <EllipsisText isHtml={true} value={value}></EllipsisText>
-          );
-        } else {
-          viewControl = <div dangerouslySetInnerHTML={{ __html: value }}></div>;
-        }
-        break;
-      case "steps":
-        viewControl = <Steps {...controlProps} />;
-        break;
-      case "password":
-        if (value) {
-          viewControl = (
-            <Tooltip title={value} color={"#fff1b8"} {...controlProps}>
-              <span className="infoStyle">********</span>
-            </Tooltip>
-          );
-        } else {
-          viewControl = null;
-        }
-        break;
-      case "caselect":
-        viewControl = <span className="infoStyle">{value}</span>;
-        break;
-      case "relation":
-        viewControl = unSupportControl;
-        break;
-      case "file":
-      case "picture":
-      case "video":
-        viewControl = <FileView {...controlProps}></FileView>;
-        break;
-      case "direct-file":
-        viewControl = <DirectFileView {...controlProps} />;
-        break;
-      case "relfile":
-        //只是配置了，内部未做开发
-        viewControl = <MultiFileView {...controlProps}></MultiFileView>;
-        break;
-      case "non-download-file":
-        viewControl = (
-          <FileView {...controlProps} downloadable={false}></FileView>
-        );
-        break;
-      case "chemstruc":
-        viewControl = <ChemStruc {...controlProps}></ChemStruc>;
-        //viewControl = unSupportControl
-        break;
-      case "sql-code-editor":
-        viewControl = (
-          <SqlCodeEditor viewOrEdit={"view"} {...controlProps}></SqlCodeEditor>
-        );
-        break;
-      case "relselect":
-      case "refselect":
-      case "entity-select":
-      case "table-entity-select":
-      case "tree-entity-select":
-      case "relselect-extdis":
-        viewControl = <Rfield {...controlProps} />;
-        break;
-      case "progress":
-        viewControl = <Progress {...controlProps}></Progress>;
-        break;
-      case "signature":
-        viewControl = <Signature {...controlProps}></Signature>;
-        break;
-      case "color":
-        viewControl = <ColorPicker {...controlProps}></ColorPicker>;
-        break;
-      case "url":
-        viewControl = (
-          <a target={"_blank"} href={value}>
-            {translate("${网址}")}
-          </a>
-        );
-        break;
-      case "hidden": //
-        viewControl = (
-          <Input type="hidden" value={fieldValue} disabled={true} />
-        );
-        break;
-      case "field-history": //
-        viewControl = <FieldHistory {...controlProps} ></FieldHistory>;
-        break;
-      case "QRCode": //
-        viewControl = <QRCode {...controlProps} />;
-        break;
-      default:
-        viewControl = unSupportControl;
-        break;
-    }
-  }
-  return viewControl;
-}
-
-const ViewControl: React.FC<FieldViewControlProps> = (props) => {
-  const { fieldConfig, value, holderType, ...other } = props;
-  return renderControl(fieldConfig, value, holderType, null, other);
-};
-
-export default ViewControl;
+import React from "react";
+import { Alert, Badge, Input, Spin, Tooltip } from "antd";
+import loadable from "@loadable/component";
+import { ControlHolderType, FieldConfig, ViewOrEdit } from "../tmpl/interface";
+import ControlTypeSupportor from "../tmpl/control-type-supportor";
+import EnumTags from "./enum-tag";
+import EnumBadge from "./enum-badge";
+import Steps from "./steps";
+import Units from "./../units";
+import Rfield from "./rfield";
+import dayjs from "dayjs";
+import Progress from "./progress";
+
+import EllipsisText from "./text/ellipsis-text";
+import { ProgramConfig, useLocale } from "../index";
+import FieldHistory from "./field-history";
+import MultiFileView from "./file-view/multi-file-view";
+import DirectFileView from "./direct-file-view";
+import QRCode from "./qr-code";
+
+
+// 暂时先这样, 异步组件国际化有问题
+const Loading = <>loading</>;
+
+const Signature = loadable(() => import("./signature"), { fallback: Loading });
+const ChemStruc = loadable(() => import("./chemstruc/graph"), {
+  fallback: Loading,
+});
+const SqlCodeEditor = loadable(() => import("./code-editor/sql-code-editor"), {
+  fallback: Loading,
+});
+const ColorPicker = loadable(() => import("./color-picker"), {
+  fallback: Loading,
+});
+const FileView = loadable(() => import("../controls/file-view"), {
+  fallback: Loading,
+});
+interface FieldViewControlProps {
+  serverKey?: string;
+  value?: any;
+  fieldConfig: FieldConfig;
+  holderType: ControlHolderType;
+  style?: any;
+  dataCode?: string;
+}
+
+function renderControl(
+  fieldConfig: FieldConfig,
+  fieldValue: any,
+  pHolderType: ControlHolderType,
+  width: any,
+  other: any
+) {
+  const { translate } = useLocale();
+  let itemType = ControlTypeSupportor.getControlType(fieldConfig, fieldValue);
+  let holderType: ControlHolderType = pHolderType;
+  if (!holderType) {
+    holderType = "descriptions";
+  }
+
+  const colSpan = fieldConfig.colSpan;
+  let scalableWidth = width;
+  if (colSpan == 2) {
+    scalableWidth = width * colSpan * 1.52;
+  }
+  let viewControl = undefined;
+
+  let placeholder = !fieldConfig.disabled
+    ? translate("${请输入}${" + fieldConfig.title + "}")
+    : translate("${无需输入}");
+  let disabled: boolean = fieldConfig.disabled;
+
+  let value = fieldValue || fieldValue == 0
+    ? fieldValue
+    : fieldConfig.defaultValue &&
+      !Units.isConfigDefaultValue(fieldConfig.defaultValue)
+      ? fieldConfig.defaultValue
+      : "";
+  let viewOrEdit: ViewOrEdit = "view";
+
+  let controlProps = {
+    fieldConfig,
+    itemType,
+    value,
+    viewOrEdit,
+    ...other,
+  };
+  //自定义组件为先
+  if (ProgramConfig.getCustomEditControl(itemType)) {
+    return React.createElement(
+      ProgramConfig.getCustomViewControl(itemType),
+      controlProps
+    );
+  }
+
+  const unSupportControl = (
+    <span className="infoStyle">
+      {translate("${暂未完成}-${" + itemType + "}")}
+    </span>
+  );
+
+  if (value != 0 && (!value || value == "null" || value.toString().includes("@R@null"))) {
+    viewControl = <></>;
+  } else {
+    switch (itemType) {
+      case "int":
+      case "decimal":
+      case "float":
+      case "double":
+      case "intrange":
+      case "decimalrange":
+      case "range":
+        viewControl = <span className="infoStyle">{value}</span>;
+        break;
+      case "date-YY":
+      case "date-M1":
+      case "date":
+      case "datetime-HH":
+      case "datetime-mm":
+      case "datetime":
+      case "time-HH":
+      case "time-mm":
+      case "time":
+        viewControl = (
+          <span className="infoStyle">
+            {value
+              ? dayjs(value).format(Units.getDayjsFormat(itemType)) ==
+                "Invalid Date"
+                ? value
+                : dayjs(value).format(Units.getDayjsFormat(itemType))
+              : undefined}
+          </span>
+        );
+        break;
+      case "daterange-YY":
+      case "daterange-M1":
+      case "daterange":
+      case "datetimerange-HH":
+      case "datetimerange-mm":
+      case "datetimerange":
+      case "timerange-HH":
+      case "timerange-mm":
+      case "timerange":
+        viewControl = <span className="infoStyle">{value}</span>;
+        break;
+      case "text":
+      case "textarea":
+      case "text-view":
+      case "preselect":
+      case "QRCode":
+        if (holderType == "table") {
+          viewControl = (
+            <EllipsisText
+              isHtml={false}
+              value={value}
+              showMax={
+                fieldConfig.ellipsisLength ? fieldConfig.ellipsisLength : 28
+              }
+            ></EllipsisText>
+          );
+        } else {
+          viewControl = <span className="infoStyle">{value}</span>;
+        }
+        break;
+      case "select":
+      case "radio":
+      case "yes-no-switch":
+        viewControl = <EnumBadge {...controlProps} />;
+        break;
+      case "yes-no-radio":
+        viewControl = (
+          <span className="infoStyle">
+            {value ? (
+              <Badge
+                color={value == "是" || value == 1 ? "green" : "red"}
+                text={translate("${" + (value == 0 ? "否" : value) + "}")}
+              />
+            ) : null}
+          </span>
+        );
+        break;
+      case "multiselect":
+      case "checkbox":
+        viewControl = <EnumTags {...controlProps} />;
+        break;
+      case "html":
+        if (holderType == "table") {
+          viewControl = (
+            <EllipsisText isHtml={true} value={value}></EllipsisText>
+          );
+        } else {
+          viewControl = <div dangerouslySetInnerHTML={{ __html: value }}></div>;
+        }
+        break;
+      case "steps":
+        viewControl = <Steps {...controlProps} />;
+        break;
+      case "password":
+        if (value) {
+          viewControl = (
+            <Tooltip title={value} color={"#fff1b8"} {...controlProps}>
+              <span className="infoStyle">********</span>
+            </Tooltip>
+          );
+        } else {
+          viewControl = null;
+        }
+        break;
+      case "caselect":
+        viewControl = <span className="infoStyle">{value}</span>;
+        break;
+      case "relation":
+        viewControl = unSupportControl;
+        break;
+      case "file":
+      case "picture":
+      case "video":
+        viewControl = <FileView {...controlProps}></FileView>;
+        break;
+      case "direct-file":
+        viewControl = <DirectFileView {...controlProps} />;
+        break;
+      case "relfile":
+        //只是配置了，内部未做开发
+        viewControl = <MultiFileView {...controlProps}></MultiFileView>;
+        break;
+      case "non-download-file":
+        viewControl = (
+          <FileView {...controlProps} downloadable={false}></FileView>
+        );
+        break;
+      case "chemstruc":
+        viewControl = <ChemStruc {...controlProps}></ChemStruc>;
+        //viewControl = unSupportControl
+        break;
+      case "sql-code-editor":
+        viewControl = (
+          <SqlCodeEditor viewOrEdit={"view"} {...controlProps}></SqlCodeEditor>
+        );
+        break;
+      case "relselect":
+      case "refselect":
+      case "entity-select":
+      case "table-entity-select":
+      case "tree-entity-select":
+      case "relselect-extdis":
+        viewControl = <Rfield {...controlProps} />;
+        break;
+      case "progress":
+        viewControl = <Progress {...controlProps}></Progress>;
+        break;
+      case "signature":
+        viewControl = <Signature {...controlProps}></Signature>;
+        break;
+      case "color":
+        viewControl = <ColorPicker {...controlProps}></ColorPicker>;
+        break;
+      case "url":
+        viewControl = (
+          <a target={"_blank"} href={value}>
+            {translate("${网址}")}
+          </a>
+        );
+        break;
+      case "hidden": //
+        viewControl = (
+          <Input type="hidden" value={fieldValue} disabled={true} />
+        );
+        break;
+      case "field-history": //
+        viewControl = <FieldHistory {...controlProps} ></FieldHistory>;
+        break;
+      case "QRCode": //
+        viewControl = <QRCode {...controlProps} />;
+        break;
+      default:
+        viewControl = unSupportControl;
+        break;
+    }
+  }
+  return viewControl;
+}
+
+const ViewControl: React.FC<FieldViewControlProps> = (props) => {
+  const { fieldConfig, value, holderType, ...other } = props;
+  return renderControl(fieldConfig, value, holderType, null, other);
+};
+
+export default ViewControl;