@next-libs/cmdb-instances 6.5.1 → 6.6.1

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

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

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

@@ -2,4 +2,21 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.StructDefineType = void 0;
+let StructDefineType;
+exports.StructDefineType = 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 || (exports.StructDefineType = StructDefineType = {}));