@next-libs/cmdb-instances 6.5.1 → 6.6.1

package/dist/esm/struct-components/AddStructModal.js

@@ -1,351 +1,309 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from "react";
-import { DatePicker, Input, InputNumber, Modal, Radio, Select } from "antd";
+import { DatePicker, Input, InputNumber, Modal, Radio, Select, Form } from "antd";
+import { StructDefineType } from "./interfaces";
 import { boolOptions } from "../model-attribute-form-control/ModelAttributeFormControl";
-import styles from "./index.module.css";
 import i18n from "i18next";
 import { K, NS_LIBS_CMDB_INSTANCES } from "../i18n/constants";
-import { computeDateFormat } from "../processors";
-import _ from "lodash";
+import moment from "moment";
+import { keyBy, reduce, isString, isNil } from "lodash";
 import { CodeEditor } from "@next-libs/code-editor-components";
-export class AddStructModal extends React.Component {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "hasRegex", regex => !_.isNil(regex) && regex !== "");
-
-    _defineProperty(this, "hasValueWithRegex", (value, regex) => !_.isNil(value) && value !== "" && this.hasRegex(regex));
-
-    _defineProperty(this, "handleValueChange", (e, define) => {
-      var structData = this.state.structData;
-      structData[define.id] = e;
-      this.setState({
-        structData
-      });
-    });
-
-    _defineProperty(this, "handleInputValueChange", (e, define) => {
-      this.handleValueChange(e.target.value, define);
-    });
-
-    _defineProperty(this, "validateRegex", (value, define, index) => {
-      var {
-        showError
-      } = this.state;
-      var regex = new RegExp(define.regex);
-      var matched;
-
-      if (define.type === "arr") {
-        matched = this.hasRegex(define.regex) ? value.every(item => regex.test(item)) : true;
-      } else {
-        matched = this.hasValueWithRegex(value, define.regex) ? regex.test(value) : true;
-      }
-
-      showError[index] = !matched;
-      this.setState({
-        showError
-      });
-      this.handleValueChange(value, define);
-    });
-
-    _defineProperty(this, "handleIpValueChange", (e, define, index) => {
-      var value = e.target.value;
-      var {
-        showError
-      } = this.state;
-      var matched = value === "" || /^((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\.){3}(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)(\[^\\],;\s]{1,100}\]|)$/.test(value);
-      showError[index] = !matched;
-      this.setState({
-        showError
-      });
-      this.handleValueChange(value, define);
-    });
-
-    _defineProperty(this, "getEnumForm", (define, value) => {
-      var enumForm;
-      var {
-        regex
-      } = define;
-
-      if (regex.length < 6) {
-        var RadioGroup = Radio.Group;
-        enumForm = /*#__PURE__*/React.createElement(RadioGroup, {
-          onChange: e => this.handleInputValueChange(e, define),
-          defaultValue: value
-        }, regex.map(item => /*#__PURE__*/React.createElement(Radio, {
-          value: item,
-          key: item
-        }, item)));
-      } else {
-        var Option = Select.Option;
-        enumForm = /*#__PURE__*/React.createElement(Select, _extends({}, value !== null ? {
-          defaultValue: value
-        } : {}, {
-          style: {
-            width: "100%"
-          },
-          onChange: e => this.handleValueChange(e, define)
-        }), regex.map(item => /*#__PURE__*/React.createElement(Option, {
-          value: item,
-          key: item
-        }, item)));
-      }
-
-      return enumForm;
-    });
-
-    _defineProperty(this, "validateJson", (err, index) => {
-      var {
-        showError
-      } = this.state;
-      var error = err.some(v => ["error", "warning"].includes(v.type));
-      showError[index] = error;
-      this.setState({
-        showError
-      });
-    });
-
-    _defineProperty(this, "getFormType", (define, value, index) => {
-      var formType;
-      var defaultValue = value ? value[define.id] : null; //如果是json类型，数据有可能是字符串、数组或对象等，需要对数据处理
-
-      if (define.type === "json") {
-        defaultValue = _.isString(defaultValue) || !defaultValue ? defaultValue || "" : JSON.stringify(defaultValue, null, 2);
-      }
+export function AddStructModal(props) {
+  var {
+    attribute,
+    visible,
+    structData,
+    handleStoreFunction,
+    handleCancelFunction
+  } = props;
+  var structDefine = attribute.value.struct_define;
+  var structDefineMap = keyBy(structDefine, "id");
+  var [form] = Form.useForm();
+  var structValue = reduce(structData, (pre, value, key) => {
+    var _structDefineMap$key;
+
+    var calcValue;
+
+    switch ((_structDefineMap$key = structDefineMap[key]) === null || _structDefineMap$key === void 0 ? void 0 : _structDefineMap$key.type) {
+      case StructDefineType.DATE:
+      case StructDefineType.DATETIME:
+        calcValue = value && moment(value);
+        break;
+
+      case StructDefineType.JSON:
+        calcValue = isString(value) || !value ? value || "" : JSON.stringify(value, null, 2);
+        break;
+
+      default:
+        calcValue = value;
+    }
 
-      switch (define.type) {
-        case "int":
-          {
-            formType = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(InputNumber, {
-              defaultValue: defaultValue,
+    pre[key] = calcValue;
+    return pre;
+  }, {});
+
+  var hasRegex = regex => !isNil(regex) && regex !== "";
+
+  var hasValue = value => !isNil(value) && value !== "";
+
+  var handleJsonValidate = (err, define) => {
+    var errors = [];
+    err.some(v => v.type === "error") && errors.push(i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.NOT_MEET_JSON)));
+    err.some(v => v.type === "warning") && errors.push(i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.NOT_MEET_REGEX)));
+    form.setFields([{
+      name: define.id,
+      errors
+    }]);
+  };
+
+  var getFormType = define => {
+    switch (define.type) {
+      case StructDefineType.INTEGER:
+        {
+          return /*#__PURE__*/React.createElement(InputNumber, {
+            style: {
+              width: "100%"
+            },
+            precision: 0,
+            placeholder: hasRegex(define.regex) ? i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.MATCHING_REGULAR), {
+              regexp: define.regex
+            }) : ""
+          });
+        }
+
+      case StructDefineType.FLOAT:
+        {
+          return /*#__PURE__*/React.createElement(InputNumber, {
+            style: {
+              width: "100%"
+            }
+          });
+        }
+
+      case StructDefineType.BOOLEAN:
+        {
+          return /*#__PURE__*/React.createElement(Radio.Group, null, boolOptions.map(item => /*#__PURE__*/React.createElement(Radio, {
+            value: item.id,
+            key: item.text
+          }, item.text)));
+        }
+
+      case StructDefineType.ARR:
+        {
+          return /*#__PURE__*/React.createElement(Select, {
+            mode: "tags",
+            style: {
+              width: "100%"
+            },
+            placeholder: hasRegex(define.regex) ? i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.MATCHING_REGULAR), {
+              regexp: define.regex
+            }) : ""
+          });
+        }
+
+      case StructDefineType.ENUM:
+        {
+          var {
+            regex
+          } = define;
+
+          if (regex.length < 6) {
+            return /*#__PURE__*/React.createElement(Radio.Group, null, regex.map(item => /*#__PURE__*/React.createElement(Radio, {
+              value: item,
+              key: item
+            }, item)));
+          } else {
+            return /*#__PURE__*/React.createElement(Select, {
               style: {
                 width: "100%"
-              },
-              precision: 0,
-              onChange: e => this.validateRegex(e, define, index),
-              placeholder: this.hasRegex(define.regex) && i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.MATCHING_REGULAR), {
-                regexp: define.regex
-              })
-            }), /*#__PURE__*/React.createElement("label", {
-              style: {
-                display: this.state.showError[index] ? "block" : "none",
-                color: "#fc5043"
               }
-            }, i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.NOT_MEET_REGEX_DETAIL), {
-              regex: define.regex
-            })));
-            break;
-          }
-
-        case "enum":
-          {
-            formType = this.getEnumForm(define, defaultValue);
-            break;
-          }
-
-        case "enums":
-          {
-            formType = /*#__PURE__*/React.createElement(Select, _extends({
-              mode: "multiple",
-              style: {
-                width: "100%"
-              },
-              onChange: e => this.handleValueChange(e, define)
-            }, defaultValue !== null ? {
-              defaultValue: defaultValue
-            } : {}), define.regex.map(item => /*#__PURE__*/React.createElement(Select.Option, {
+            }, regex.map(item => /*#__PURE__*/React.createElement(Select.Option, {
               value: item,
               key: item
             }, item)));
-            break;
           }
-
-        case "bool":
-          {
-            formType = /*#__PURE__*/React.createElement(Radio.Group, {
-              onChange: e => this.handleInputValueChange(e, define),
-              defaultValue: defaultValue
-            }, boolOptions.map(item => /*#__PURE__*/React.createElement(Radio, {
-              value: item.id,
-              key: item.text
-            }, item.text)));
-            break;
+        }
+
+      case StructDefineType.ENUMS:
+        {
+          return /*#__PURE__*/React.createElement(Select, {
+            mode: "multiple",
+            style: {
+              width: "100%"
+            }
+          }, define.regex.map(item => /*#__PURE__*/React.createElement(Select.Option, {
+            value: item,
+            key: item
+          }, item)));
+        }
+
+      case StructDefineType.DATE:
+      case StructDefineType.DATETIME:
+        {
+          return /*#__PURE__*/React.createElement(DatePicker, {
+            showTime: define.type === "datetime"
+          });
+        }
+
+      case StructDefineType.IP:
+        {
+          return /*#__PURE__*/React.createElement(Input, null);
+        }
+
+      case StructDefineType.JSON:
+        {
+          var jsonSchema;
+
+          if (hasRegex(define.regex)) {
+            jsonSchema = JSON.parse(define.regex);
           }
 
-        case "arr":
-          {
-            formType = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, _extends({
-              mode: "tags",
-              style: {
-                width: "100%"
-              }
-            }, defaultValue !== null ? {
-              defaultValue: defaultValue
-            } : {}, {
-              onChange: e => this.validateRegex(e, define, index),
-              placeholder: this.hasRegex(define.regex) && i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.MATCHING_REGULAR), {
-                regexp: define.regex
-              })
-            })), /*#__PURE__*/React.createElement("label", {
-              style: {
-                display: this.state.showError[index] ? "block" : "none",
-                color: "#fc5043"
-              }
-            }, i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.NOT_MEET_REGEX_DETAIL), {
+          return /*#__PURE__*/React.createElement(CodeEditor, _extends({
+            mode: "json",
+            maxLines: "Infinity",
+            highlightActiveLine: true,
+            minLines: 3,
+            showLineNumbers: true,
+            showPrintMargin: false,
+            validateJsonSchemaMode: "error",
+            onValidate: err => handleJsonValidate(err, define)
+          }, jsonSchema ? {
+            jsonSchema
+          } : {}, {
+            theme: "tomorrow"
+          }));
+        }
+
+      case StructDefineType.STRING:
+      default:
+        {
+          return /*#__PURE__*/React.createElement(Input, {
+            placeholder: hasRegex(define.regex) ? i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.MATCHING_REGULAR), {
+              regexp: define.regex
+            }) : ""
+          });
+        }
+    }
+  };
+
+  var getFormRules = define => {
+    var rules = [];
+
+    switch (define.type) {
+      case StructDefineType.STRING:
+      case StructDefineType.IP:
+        {
+          hasRegex(define.regex) && rules.push({
+            pattern: define.regex,
+            message: i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(define.type === "ip" ? K.NOT_MEET_REGEX : K.NOT_MEET_REGEX_DETAIL), {
               regex: define.regex
-            })));
-            break;
-          }
-
-        case "date":
-        case "datetime":
-          {
-            var formater = computeDateFormat(define.type, defaultValue);
-            formType = /*#__PURE__*/React.createElement(DatePicker, {
-              defaultValue: formater.value,
-              showTime: define.type === "datetime",
-              onChange: e => this.handleValueChange(e.format(define.type === "datetime" ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD"), define),
-              format: formater.format
-            });
-            break;
-          }
-
-        case "ip":
-          {
-            formType = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, {
-              defaultValue: defaultValue,
-              onChange: e => this.handleIpValueChange(e, define, index)
-            }), /*#__PURE__*/React.createElement("label", {
-              style: {
-                display: this.state.showError[index] ? "block" : "none",
-                color: "#fc5043"
-              }
-            }, i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.NOT_MEET_REGEX))));
-            break;
-          }
-
-        case "float":
-          {
-            formType = /*#__PURE__*/React.createElement(InputNumber, {
-              defaultValue: defaultValue,
-              style: {
-                width: "100%"
-              },
-              onChange: e => this.handleValueChange(e, define)
-            });
-            break;
-          }
-
-        case "json":
-          {
-            var jsonSchema;
+            })
+          });
+          break;
+        }
+
+      case StructDefineType.ARR:
+        {
+          var regex = new RegExp(define.regex);
+          hasRegex(define.regex) && rules.push({
+            validator: (rule, value, cb) => {
+              (value !== null && value !== void 0 ? value : []).every(item => regex.test(item)) ? cb() : cb(rule.message);
+            },
+            message: i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.NOT_MEET_REGEX_DETAIL), {
+              regex: define.regex
+            })
+          });
+          break;
+        }
+
+      case StructDefineType.INTEGER:
+        {
+          var _regex = new RegExp(define.regex);
+
+          hasRegex(define.regex) && rules.push({
+            validator: (rule, value, cb) => {
+              !hasValue(value) || _regex.test(value) ? cb() : cb(rule.message);
+            },
+            message: i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.NOT_MEET_REGEX_DETAIL), {
+              regex: define.regex
+            })
+          });
+          break;
+        }
+    }
 
-            if (this.hasRegex(define.regex)) {
-              jsonSchema = JSON.parse(define.regex);
+    return rules;
+  };
+
+  var handleStore = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(function* () {
+      // 校验JSON类型
+      var hasErrors = !form.getFieldsError().every(v => !v.errors.length);
+      if (hasErrors) return;
+      var values = yield form.validateFields();
+      var newValues = reduce(values, (pre, value, key) => {
+        var _structDefineMap$key2;
+
+        var realValue;
+
+        switch ((_structDefineMap$key2 = structDefineMap[key]) === null || _structDefineMap$key2 === void 0 ? void 0 : _structDefineMap$key2.type) {
+          case StructDefineType.DATE:
+            {
+              realValue = value === null || value === void 0 ? void 0 : value.format("YYYY-MM-DD");
+              break;
             }
 
-            formType = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CodeEditor, _extends({
-              value: defaultValue,
-              mode: "json",
-              maxLines: "Infinity",
-              highlightActiveLine: true,
-              onChange: e => this.handleValueChange(e, define),
-              minLines: 3,
-              showLineNumbers: true,
-              showPrintMargin: false,
-              onValidate: err => this.validateJson(err, index)
-            }, jsonSchema ? {
-              jsonSchema: jsonSchema
-            } : {}, {
-              theme: "tomorrow"
-            })), /*#__PURE__*/React.createElement("label", {
-              style: {
-                display: this.state.showError[index] ? "block" : "none",
-                color: "#fc5043"
-              }
-            }, i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.NOT_MEET_JSON))));
-            break;
-          }
-
-        default:
-          {
-            formType = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, {
-              defaultValue: defaultValue,
-              placeholder: this.hasRegex(define.regex) && i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.MATCHING_REGULAR), {
-                regexp: define.regex
-              }),
-              onChange: e => this.validateRegex(e.target.value, define, index)
-            }), /*#__PURE__*/React.createElement("label", {
-              style: {
-                display: this.state.showError[index] ? "block" : "none",
-                color: "#fc5043"
-              }
-            }, i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.NOT_MEET_REGEX_DETAIL), {
-              regex: define.regex
-            })));
-          }
-      }
-
-      return formType;
-    });
+          case StructDefineType.DATETIME:
+            {
+              realValue = value === null || value === void 0 ? void 0 : value.format("YYYY-MM-DD HH:mm:ss");
+              break;
+            }
 
-    _defineProperty(this, "handleStore", () => {
-      this.props.handleStoreFunction(this.state.structData);
-    });
+          default:
+            realValue = value;
+        }
 
-    _defineProperty(this, "handleCloseModal", () => {
-      this.props.handleCancelFunction();
+        pre[key] = realValue;
+        return pre;
+      }, {});
+      handleStoreFunction(newValues);
+      form.resetFields();
     });
 
-    var {
-      attribute
-    } = props;
-    this.state = {
-      showError: new Array(attribute.value.struct_define.length).fill(false)
+    return function handleStore() {
+      return _ref.apply(this, arguments);
     };
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.visible !== this.props.visible) {
-      if (this.props.visible) {
-        this.setState({
-          structData: this.props.structData || {},
-          showError: new Array(this.props.attribute.value.struct_define.length).fill(false)
-        });
-      }
-    }
-  }
-
-  render() {
-    var {
-      attribute,
-      visible,
-      structData
-    } = this.props;
-    var structDefine = attribute.value.struct_define;
-    return /*#__PURE__*/React.createElement(Modal, {
-      visible: visible,
-      onOk: this.handleStore,
-      onCancel: this.handleCloseModal,
-      okButtonProps: {
-        disabled: this.state.showError.includes(true),
-        id: "okBtn"
-      },
-      okText: i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.CONFIRM)),
-      cancelText: i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.CANCEL)),
-      cancelButtonProps: {
-        id: "cancelBtn"
-      },
-      destroyOnClose: true
-    }, structDefine.map((define, index) => {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.formItem,
-        key: define.id
-      }, /*#__PURE__*/React.createElement("label", {
-        className: styles.formLabel
-      }, define.name, "\uFF1A"), this.getFormType(define, structData, index));
-    }));
-  }
-
+  }();
+
+  var handleCloseModal = () => {
+    handleCancelFunction();
+    form.resetFields();
+  };
+
+  return /*#__PURE__*/React.createElement(Modal, {
+    visible: visible,
+    onOk: handleStore,
+    onCancel: handleCloseModal,
+    okButtonProps: {
+      id: "okBtn"
+    },
+    okText: i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.CONFIRM)),
+    cancelText: i18n.t("".concat(NS_LIBS_CMDB_INSTANCES, ":").concat(K.CANCEL)),
+    cancelButtonProps: {
+      id: "cancelBtn"
+    },
+    destroyOnClose: true
+  }, /*#__PURE__*/React.createElement(Form, {
+    form: form,
+    layout: "vertical",
+    initialValues: structValue
+  }, structDefine.map(define => {
+    return /*#__PURE__*/React.createElement(Form.Item, {
+      key: define.id,
+      name: define.id,
+      label: define.name + "：",
+      rules: getFormRules(define)
+    }, getFormType(define));
+  })));
 }

package/dist/esm/struct-components/interfaces.js

@@ -1 +1,15 @@
-export {};
+export var StructDefineType;
+
+(function (StructDefineType) {
+  StructDefineType["STRING"] = "str";
+  StructDefineType["INTEGER"] = "int";
+  StructDefineType["ENUM"] = "enum";
+  StructDefineType["ENUMS"] = "enums";
+  StructDefineType["ARR"] = "arr";
+  StructDefineType["DATE"] = "date";
+  StructDefineType["DATETIME"] = "datetime";
+  StructDefineType["IP"] = "ip";
+  StructDefineType["FLOAT"] = "float";
+  StructDefineType["BOOLEAN"] = "bool";
+  StructDefineType["JSON"] = "json";
+})(StructDefineType || (StructDefineType = {}));