ming-demo3/lib/components/meta/HotAreaMapDesign.js

mdf metaui web

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.HotAreaMapDesign = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _HotArea = _interopRequireDefault(require("./HotArea"));

var _basic = require("../basic");

var _baseui = require("@mdf/baseui");

var commonFunc = _interopRequireWildcard(require("./HotAreaMapCommon"));

var _Container = _interopRequireDefault(require("./Container"));

var _SvgIcon = _interopRequireDefault(require("@mdf/metaui-web/lib/components/common/SvgIcon"));

var HotAreaMapDesign = function (_React$Component) {
  (0, _inherits2["default"])(HotAreaMapDesign, _React$Component);

  function HotAreaMapDesign(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, HotAreaMapDesign);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(HotAreaMapDesign).call(this, props));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setListenerState", function (params) {});
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "beforeUpload", function (file) {
      var isJPG = file.type === 'image/jpeg' || 'image/png';

      if (!isJPG) {
        _baseui.message.error('目前只支持 JPG/PNG file!');
      }

      var isLt = file.size / 1024 / 1024 < 10;

      if (!isLt) {
        _baseui.message.error('图片不可大于 10MB!');
      }

      return isJPG && isLt;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (info) {
      var self = (0, _assertThisInitialized2["default"])(_this);

      if (info.file.status === 'done') {
        if (info.file.response.code == 200) {
          var imgUrl = _this.DocumentServerAddress + info.file.response.data;

          _this.mapConfigValueChanged("imgUrl", imgUrl);
        } else {
          commonFunc.LogChartInfo(" 热区设置图 上传图片：调用服务出错  info.file.response " + JSON.stringify(info.file.response), 999);
        }
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "doFunc", function (funcName, params) {
      if (funcName == "getHotAreaCaptionHtml") {
        {
          _this.viewModel.execute("getHotAreaCaptionHtml", params);
        }
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeCoordinate", function (coordinate, index, coordinates) {
      _this.mapConfigValueChanged("coordinates", coordinates);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deleteCoordinate", function (coordinate, index, coordinates) {
      _this.mapConfigValueChanged("coordinates", coordinates);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dragCoordinate", function (coordinate, index, coordinates) {
      _this.mapConfigValueChanged("coordinates", coordinates);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "selectArea", function (coordinate) {
      var selectedId = _this.state.selectedId;

      if (selectedId != coordinate.id) {
        _this.state.selectedId = coordinate.id;

        _this.setState();

        _this.codeFieldModel && _this.codeFieldModel.setValue(coordinate.code, false);
        _this.nameFieldModel && _this.nameFieldModel.setValue(coordinate.name, false);

        _this.state.fieldMapping.refResetFields.forEach(function (field) {
          var tmpModel = _this.viewModel.get(field);

          tmpModel && tmpModel.setValue(coordinate.refResetFields && coordinate.refResetFields[field], false);
        });
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "ImgOnError", function () {
      console.log("加载图片错误。imgUrl = " + _this.state.config.imgUrl || "");
      cb.utils.alert('加载图片错误。图片地址：' + _this.state.config.imgUrl, 'error');
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "ImgOnLoad", function (obj) {
      var width = _.get(obj, "currentTarget.naturalWidth");

      var height = _.get(obj, "currentTarget.naturalHeight");

      if (width && height) {
        _this.mapConfigValueChanged("width", width);

        _this.mapConfigValueChanged("height", height);
      }
    });
    var cStyle = _.isEmpty(props.cStyle) || commonFunc.isDebug ? commonFunc.getDebugCStyle(true) : props.cStyle;
    cStyle = commonFunc.JSONParse(cStyle);
    var tmpState = {};
    var fieldMapping = {};
    fieldMapping.codeField = cStyle.codeField || "";
    fieldMapping.nameField = cStyle.nameField || "";
    fieldMapping.stateField = cStyle.stateField || "";
    fieldMapping.captionFields = cStyle.captionFields || [];
    fieldMapping.mapConfigField = cStyle.mapConfigField || "";
    fieldMapping.fieldsCaption = cStyle.fieldsCaption || "";
    fieldMapping.refResetFields = cStyle.refResetFields || [];

    if (!fieldMapping.codeField || !fieldMapping.nameField || !fieldMapping.mapConfigField || !fieldMapping.fieldsCaption) {
      commonFunc.LogChartInfo(" 热区设置图 在CStyle中未能找到全部的热区配置字段 codeField nameField fieldsCaption mapConfigField ", 999);
    }

    tmpState.fieldMapping = fieldMapping;
    tmpState.extendClassName = cStyle.hasOwnProperty("extendClassName") ? cStyle.extendClassName : "";
    tmpState.triggerEvents = cStyle.triggerEvents;

    _this.initMetaAndModel(fieldMapping.mapConfigField, fieldMapping.codeField, fieldMapping.nameField);

    tmpState.referReturnConfig = _this.getReferReturnConfig();
    tmpState.config = commonFunc.getNullMapConfig();
    tmpState.selectedId = -1;
    _this.state = tmpState;
    return _this;
  }

  (0, _createClass2["default"])(HotAreaMapDesign, [{
    key: "initMetaAndModel",
    value: function initMetaAndModel(mapConfigField, codeField, nameField) {
      if (commonFunc.isDebug) {
        this.meta = this.props.meta;
        this.viewModel = this.props.viewModel;

        if (this.meta.controls.length > 1) {
          this.meta.controls = _.slice(this.meta.controls, 0, 1);
        }
      } else {
        this.meta = this.props.meta.containers[0];
        this.viewModel = this.props.model;
      }

      this.mapConfigFieldModel = this.viewModel.get(mapConfigField);
      this.codeFieldModel = this.viewModel.get(codeField);
      this.nameFieldModel = this.viewModel.get(nameField);
    }
  }, {
    key: "getReferReturnConfig",
    value: function getReferReturnConfig() {
      var model = this.nameFieldModel;
      var referReturnConfig = {};

      if (model) {
        referReturnConfig.cControlType = model.get("cControlType");
        referReturnConfig.valueField = model.get("valueField");
        referReturnConfig.textField = model.get("textField");
        referReturnConfig.bEnum = model.get("bEnum");
        referReturnConfig.cDataSourceName = model.get("cDataSourceName");
        referReturnConfig.cFieldName = model.get("cFieldName");
        referReturnConfig.cItemName = model.get("cItemName");
        referReturnConfig.cRefType = model.get("cRefType");
        referReturnConfig.iFieldType = model.get("iFieldType");
        referReturnConfig.bCanModify = model.get("bCanModify");
      }

      return referReturnConfig;
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      var self = this;
      this.viewModel.on("beforeSave", function (args) {
        return _this2.beforeSave(args);
      });
      this.viewModel.on('afterLoadData', function (data) {
        var config = self.mapConfigFieldModel && self.mapConfigFieldModel.getValue();

        if (!config) {
          config = commonFunc.getNullMapConfig();
        }

        config = commonFunc.JSONParse(config);
        self.setState({
          config: config
        });
      });
      this.mapConfigFieldModel && this.mapConfigFieldModel.addListener(this);
      this.nameFieldModel && this.nameFieldModel.un("afterValueChange", this.setReferReturnData);
      this.nameFieldModel && this.nameFieldModel.on("afterValueChange", function (args) {
        return _this2.setReferReturnData(args);
      });
      this.setDocumentServerAddress();
    }
  }, {
    key: "validate",
    value: function validate() {
      if (this.mapConfigFieldModel) {
        var str = JSON.stringify(this.state.config);
        this.mapConfigFieldModel.setValue(str);
      }
    }
  }, {
    key: "beforeSave",
    value: function beforeSave(args) {
      var bFlag = this.checkMapConfig();
      return bFlag;
    }
  }, {
    key: "setDocumentServerAddress",
    value: function setDocumentServerAddress() {
      this.DocumentServerAddress = 'http://resourceyxy.yonyouup.com';
      var proxy = cb.rest.DynamicProxy.create({
        getFileServerUrl: {
          url: '/pub/fileupload/getFileServerUrl',
          method: 'GET',
          options: {
            token: true
          }
        }
      });
      proxy.getFileServerUrl({}, function (err, result) {
        if (!err) this.DocumentServerAddress = result;
      }, this);
    }
  }, {
    key: "mapConfigValueChanged",
    value: function mapConfigValueChanged(name, value) {
      var config = this.state.config;
      config[name] = value;
      this.setState({
        config: config
      });
    }
  }, {
    key: "areaConfigValueChanged",
    value: function areaConfigValueChanged(id, name, value) {
      var coordinates = this.state.config.coordinates;

      var obj = _.find(coordinates, function (o) {
        return o.id == id;
      });

      if (obj) {
        obj[name] = value;
        this.mapConfigValueChanged("coordinates", coordinates);
      }
    }
  }, {
    key: "getTopPanel",
    value: function getTopPanel() {
      var _this3 = this;

      var panelArr = [];
      var bHasImg = !!this.state.config.imgUrl;

      if (bHasImg) {
        panelArr.push(_react["default"].createElement(_baseui.Button, {
          onClick: function onClick(e) {
            return _this3.restoreConfig();
          }
        }, _react["default"].createElement(_SvgIcon["default"], {
          className: "icon-delete",
          type: "delete"
        }), _react["default"].createElement("div", {
          className: this.getClassName("ClearConfig")
        }, "\u6E05\u9664")));
        panelArr.push(_react["default"].createElement(_baseui.Upload, {
          showUploadList: false,
          action: '/upload?token=' + cb.rest.AppContext.token,
          beforeUpload: this.beforeUpload,
          onChange: this.handleChange,
          accept: "image/jpeg,image/png"
        }, _react["default"].createElement("div", null, _react["default"].createElement(_SvgIcon["default"], {
          className: "icon-edit",
          type: "edit"
        }), _react["default"].createElement("div", {
          className: this.getClassName("ReplaceImg")
        }, "\u66FF\u6362\u56FE\u7247"))));
      } else {
        panelArr.push(_react["default"].createElement("div", {
          className: this.getClassName("Upload_Outer")
        }, _react["default"].createElement(_baseui.Upload, {
          showUploadList: false,
          action: '/upload?token=' + cb.rest.AppContext.token,
          beforeUpload: this.beforeUpload,
          onChange: this.handleChange,
          accept: "image/jpeg,image/png"
        }, _react["default"].createElement("div", {
          className: this.getClassName("UploadImg")
        }, _react["default"].createElement(_baseui.Icon, {
          type: "uploadimg"
        }), _react["default"].createElement("p", null, "\u70B9\u51FB\u4E0A\u4F20\u80CC\u666F\u56FE\u7247")))));
        panelArr.push(_react["default"].createElement("div", {
          className: this.getClassName("Upload_Text")
        }, "\u652F\u6301\u4E0A\u4F2010M\u4EE5\u4E0Bpng/jpg\u683C\u5F0F\u7684\u56FE\u7247"));
      }

      return _react["default"].createElement("div", {
        className: this.getClassName("TopPanel" + (bHasImg ? "_HasImg" : "_NoImg"))
      }, "  ", panelArr, " ");
    }
  }, {
    key: "getLeftPanel",
    value: function getLeftPanel() {
      var _this4 = this;

      var areaArr = this.getAreaArr();
      var coordinate = this.getSelectedCoordinate();
      var triggerEvents = this.state.triggerEvents;
      var panelArr = [];

      if (commonFunc.isDebug) {
        panelArr.push(_react["default"].createElement("div", null, "ID:", coordinate && coordinate.id));
        panelArr.push(_react["default"].createElement("div", null, "Code:", coordinate && coordinate.code));
      }

      if (triggerEvents && (triggerEvents.click == "url" || triggerEvents.doubleClick == "url")) {
        panelArr.push(_react["default"].createElement("div", null, "URL"));
        panelArr.push(_react["default"].createElement("div", null, _react["default"].createElement(_baseui.Input, {
          value: coordinate && coordinate.url,
          onChange: function onChange(e) {
            return _this4.areaConfigValueChanged(coordinate.id, "url", e.target.value);
          }
        })));
      }

      panelArr.push(_react["default"].createElement("div", {
        className: this.getClassName("AreaArr-Outer")
      }, areaArr));

      var tmp = _react["default"].createElement("div", {
        className: this.getClassName("LeftPanel")
      }, "  ", panelArr, " ");

      return tmp;
    }
  }, {
    key: "coordinatesHasErr",
    value: function coordinatesHasErr(coordinates) {
      var codeArr = [];
      var repeatedCode = [];
      coordinates.forEach(function (ele) {
        if (codeArr.indexOf(ele.code) >= 0) {
          if (repeatedCode.indexOf(ele.code) < 0) {
            repeatedCode.push(ele.code);
          }
        } else {
          codeArr.push(ele.code);
        }
      });

      if (repeatedCode.length > 0) {
        cb.utils.alert('存在编码重复的区域：' + repeatedCode.join(","), 'error');
        return true;
      } else {
        return false;
      }
    }
  }, {
    key: "checkMapConfig",
    value: function checkMapConfig() {
      var config = this.state.config;
      var tmp = false;

      if (!config.imgUrl) {
        cb.utils.alert('背景图片不可为空', 'error');
      } else if (_.filter(config.coordinates, function (ele) {
        return !ele.code;
      }).length > 0) {
        cb.utils.alert('不能存在编码为空的区域。', 'error');
      } else if (this.coordinatesHasErr(config.coordinates) == true) {} else {
        tmp = true;
      }

      return tmp;
    }
  }, {
    key: "restoreConfig",
    value: function restoreConfig() {
      this.setState({
        config: commonFunc.getNullMapConfig(),
        selectedId: -1
      });
    }
  }, {
    key: "getSelectedCoordinate",
    value: function getSelectedCoordinate() {
      var self = this;
      return _.find(this.state.config.coordinates, function (o) {
        return o.id == self.state.selectedId;
      });
    }
  }, {
    key: "getClassName",
    value: function getClassName(str) {
      var className = " HotAreaMapDesign_" + str;

      if (!!this.state.extendClassName) {
        className = className + " " + this.state.extendClassName + "HotAreaMapDesign_" + str;
      }

      return className;
    }
  }, {
    key: "render",
    value: function render() {
      var self = this;
      var isReadOnly = _.get(this.viewModel, "originalParams.mode") == "browse" ? true : false;
      var leftPanel = this.getLeftPanel();
      var topPanel;

      if (isReadOnly == false) {
        topPanel = this.getTopPanel();
      }

      var style = {};
      var areaPanel;

      if (_.isEmpty(this.state.config.imgUrl) == false) {
        areaPanel = _react["default"].createElement(_HotArea["default"], {
          src: this.state.config.imgUrl,
          width: this.state.config.width,
          height: this.state.config.height,
          coordinates: this.state.config.coordinates,
          onChange: this.changeCoordinate,
          onDelete: this.deleteCoordinate,
          onDrag: this.dragCoordinate,
          onLoad: this.ImgOnLoad,
          onError: this.ImgOnError,
          selectArea: this.selectArea,
          extendClassName: this.state.extendClassName,
          isReadOnly: isReadOnly,
          doFunc: this.doFunc
        });
      }

      var className = this.getClassName("MapOuter") + (isReadOnly ? this.getClassName("MapOuter_ReadOnly") : "");
      var bHasImg = !!this.state.config.imgUrl;
      var height = bHasImg ? this.state.config.height + 55 : undefined;
      return _react["default"].createElement("div", {
        style: style,
        className: className
      }, _react["default"].createElement("div", {
        className: this.getClassName("Map")
      }, _react["default"].createElement("div", {
        className: this.getClassName("Row")
      }, _react["default"].createElement("div", {
        className: this.getClassName("LeftPanel_Outer")
      }, leftPanel), _react["default"].createElement("div", {
        style: {
          height: height
        },
        className: this.getClassName("HotArea_Outer")
      }, topPanel, areaPanel, _react["default"].createElement("div", {
        className: this.getClassName("ZhanWei")
      })))));
    }
  }, {
    key: "getAreaArr",
    value: function getAreaArr() {
      var obj;
      var self = this;

      if (self.meta) {
        obj = _react["default"].createElement(_Container["default"], {
          className: (self.state.extendClassName || "") + "HotAreaMapDesign_Container",
          meta: self.meta,
          viewModel: self.viewModel,
          index: 1
        });
      }

      return _react["default"].createElement("div", {
        className: this.getClassName("AreaArr-Inner")
      }, " ", obj);
    }
  }, {
    key: "setReferReturnData",
    value: function setReferReturnData(args) {
      var _this5 = this;

      var self = this;
      var coordinates = self.state.config.coordinates;
      var coordinate = this.getSelectedCoordinate();

      if (coordinate && _.isEmpty(args.obj) == false) {
        coordinate.code = "";
        coordinate.name = "";
        coordinate.code = this.codeFieldModel && this.codeFieldModel.getValue();
        coordinate.name = this.nameFieldModel && this.nameFieldModel.getValue();
        coordinate.refResetFields = {};
        self.state.fieldMapping.refResetFields.forEach(function (field) {
          var tmpModel = _this5.viewModel.get(field);

          coordinate.refResetFields[field] = tmpModel && tmpModel.getValue();
        });
        self.setState({
          coordinates: coordinates
        });
      }
    }
  }]);
  return HotAreaMapDesign;
}(_react["default"].Component);

exports.HotAreaMapDesign = HotAreaMapDesign;
;
var _default = HotAreaMapDesign;
exports["default"] = _default;
//# sourceMappingURL=HotAreaMapDesign.js.map