dlt-for-react 1.1.16 → 1.1.17

package/lib/components/HqInputPicker/setting-upload.js

@@ -0,0 +1,795 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _input = require("antd/lib/input");
+
+var _input2 = _interopRequireDefault(_input);
+
+var _tooltip = require("antd/lib/tooltip");
+
+var _tooltip2 = _interopRequireDefault(_tooltip);
+
+var _icon = require("antd/lib/icon");
+
+var _icon2 = _interopRequireDefault(_icon);
+
+var _select = require("antd/lib/select");
+
+var _select2 = _interopRequireDefault(_select);
+
+var _inputNumber = require("antd/lib/input-number");
+
+var _inputNumber2 = _interopRequireDefault(_inputNumber);
+
+var _row = require("antd/lib/row");
+
+var _row2 = _interopRequireDefault(_row);
+
+var _col = require("antd/lib/col");
+
+var _col2 = _interopRequireDefault(_col);
+
+var _toConsumableArray2 = require("babel-runtime/helpers/toConsumableArray");
+
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
+var _extends2 = require("babel-runtime/helpers/extends");
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _message2 = require("antd/lib/message");
+
+var _message3 = _interopRequireDefault(_message2);
+
+var _stringify = require("babel-runtime/core-js/json/stringify");
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
+var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require("babel-runtime/helpers/createClass");
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require("babel-runtime/helpers/inherits");
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _radio = require("antd/lib/radio");
+
+var _radio2 = _interopRequireDefault(_radio);
+
+require("antd/lib/input/style");
+
+require("antd/lib/tooltip/style");
+
+require("antd/lib/icon/style");
+
+require("antd/lib/select/style");
+
+require("antd/lib/input-number/style");
+
+require("antd/lib/row/style");
+
+require("antd/lib/col/style");
+
+require("antd/lib/message/style");
+
+require("antd/lib/radio/style");
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _inputConst = require("./input-const");
+
+var _reactCustomScrollbarsPatched = require("react-custom-scrollbars-patched");
+
+var _KyUpload = require("../KyUpload");
+
+var _KyUpload2 = _interopRequireDefault(_KyUpload);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var RadioGroup = _radio2.default.Group;
+
+//文件上传默认最大值10M
+var defaultFileSize = 10;
+
+/**
+ * @author weishihuai
+ * @date 2018/8/2
+ * @time 14:26
+ * @Description: 文件上传控件配置组件
+ */
+
+var SettingUpload = function (_React$Component) {
+  (0, _inherits3.default)(SettingUpload, _React$Component);
+
+  function SettingUpload(props) {
+    (0, _classCallCheck3.default)(this, SettingUpload);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (SettingUpload.__proto__ || (0, _getPrototypeOf2.default)(SettingUpload)).call(this, props));
+
+    _this.getFeature = function () {
+      return _this.state.feature;
+    };
+
+    _this.createFeature = function (featureParams) {
+      try {
+        var feature = (0, _stringify2.default)(featureParams);
+        _this.setState({
+          feature: feature
+        });
+        _this.props.onChange(feature);
+      } catch (e) {
+        _message3.default.error("生成控件配置参数出错！");
+      }
+    };
+
+    _this.handleSizeChange = function (value) {
+      var fp = (0, _extends3.default)({}, _this.state.featureParams);
+      fp.size = value;
+      _this.setState({ fileSize: value, featureParams: fp });
+      _this.createFeature(fp);
+    };
+
+    _this.handleRequiredRadioChange = function (e) {
+      var required = e.target.value;
+      var fp = (0, _extends3.default)({}, _this.state.featureParams);
+      fp.required = required;
+      _this.setState({
+        featureParams: fp
+      });
+      _this.createFeature(fp);
+    };
+
+    _this.handleFileTypeRadioChange = function (e) {
+      var fileType = e.target.value;
+      var fp = (0, _extends3.default)({}, _this.state.featureParams);
+      fp.fileType = fileType;
+      fp.mode = "file";
+      if (fileType === "image") {
+        fp.validationValueType = "array";
+      } else {
+        fp.validationValueType = "string";
+      }
+      _this.setState({
+        featureParams: fp
+      });
+      _this.createFeature(fp);
+    };
+
+    _this.handeModeChange = function (value) {
+      var fp = (0, _extends3.default)({}, _this.state.featureParams);
+      fp.mode = value;
+      _this.setState({ featureParams: fp });
+      _this.createFeature(fp);
+    };
+
+    _this.handleNumberLimitChange = function (value) {
+      var fp = (0, _extends3.default)({}, _this.state.featureParams);
+      fp.numberLimit = value;
+      _this.setState({ featureParams: fp });
+      _this.createFeature(fp);
+    };
+
+    _this.handleServiceMark = function (e) {
+      var serviceMark = e.target.value;
+      var fp = (0, _extends3.default)({}, _this.state.featureParams);
+      fp.serviceMark = serviceMark;
+      _this.setState({ featureParams: fp });
+      _this.createFeature(fp);
+    };
+
+    _this.handleModuleName = function (e) {
+      var moduleName = e.target.value;
+      var fp = (0, _extends3.default)({}, _this.state.featureParams);
+      fp.moduleName = moduleName;
+      _this.setState({ featureParams: fp });
+      _this.createFeature(fp);
+    };
+
+    _this.handleFjzbid = function (e) {
+      var value = e.target.value;
+      var fp = (0, _extends3.default)({}, _this.state.featureParams);
+      fp.value = value;
+      _this.setState({ featureParams: fp });
+      _this.createFeature(fp);
+    };
+
+    _this.handleMs = function (e) {
+      var describe = e.target.value;
+      var fp = (0, _extends3.default)({}, _this.state.featureParams);
+      fp.describe = describe;
+      _this.setState({ featureParams: fp });
+      _this.createFeature(fp);
+    };
+
+    _this.handleFjzbm = function (e) {
+      var fileMainName = e.target.value;
+      var fp = (0, _extends3.default)({}, _this.state.featureParams);
+      fp.fileMainName = fileMainName;
+      _this.setState({ featureParams: fp });
+      _this.createFeature(fp);
+    };
+
+    _this.handleTemplateChange = function (value, list, listMap) {
+      var fp = (0, _extends3.default)({}, _this.state.featureParams);
+      fp.templateList = [].concat((0, _toConsumableArray3.default)(listMap));
+      fp.templateId = value; // 附件模板的附件主表id
+      _this.setState({ featureParams: fp });
+      _this.createFeature(fp);
+      // console.log(value,list,listMap)
+    };
+
+    _this.handleAcceptChange = function (e) {
+      var fp = (0, _extends3.default)({}, _this.state.featureParams);
+      fp.accept = e.target.value;
+      _this.setState({ featureParams: fp });
+      _this.createFeature(fp);
+    };
+
+    _this.state = {
+      feature: "", //原参数json字符串
+      fileSize: defaultFileSize,
+      featureParams: {
+        name: "上传控件",
+        size: defaultFileSize, //上传文件默认限制最大为10M
+        fileType: "image", //文件类型
+        mode: "file",
+        numberLimit: 1,
+        type: _inputConst.InputType.UPLOAD, //控件类型，必须有此属性，用于渲染时期判断控件类型
+        required: false, //是否必须(默认非必填)
+        validationValueType: "array", //指定async-validator校验时值的类型(默认type是string,文件上传不能使用string,不然会报错form value is not string)
+        serviceMark: "", //服务标志，说明是属于哪个服务
+        moduleName: "", //模块名称，说明是属于哪个服务的哪个模块
+        value: "", //附件主表id
+        describe: "", //描述，对上传的附件的一个描述信息
+        featureParams: "" //附件主表名，存储该附件对应的主表的名称，主要是为了以后进行追溯
+      }
+    };
+    return _this;
+  }
+
+  (0, _createClass3.default)(SettingUpload, [{
+    key: "componentWillMount",
+
+
+    //在渲染前调用,可在此最后一次初始化组件状态
+    value: function componentWillMount() {
+      //将输入控件配置参数设置到状态中
+      if (this.props.initFeature) {
+        try {
+          var initFeature = JSON.parse(this.props.initFeature);
+          if (initFeature.type == _inputConst.InputType.UPLOAD) {
+            //定义文件上传的参数默认值
+            var _initFeature$required = initFeature.required,
+                required = _initFeature$required === undefined ? false : _initFeature$required,
+                _initFeature$fileType = initFeature.fileType,
+                fileType = _initFeature$fileType === undefined ? "image" : _initFeature$fileType,
+                _initFeature$size = initFeature.size,
+                size = _initFeature$size === undefined ? defaultFileSize : _initFeature$size,
+                _initFeature$numberLi = initFeature.numberLimit,
+                numberLimit = _initFeature$numberLi === undefined ? 1 : _initFeature$numberLi;
+
+            var fp = (0, _extends3.default)({}, this.state.featureParams);
+            fp.required = required;
+            fp.fileType = fileType;
+            fp.size = size;
+            fp.serviceMark = initFeature.serviceMark;
+            fp.moduleName = initFeature.moduleName;
+            fp.value = initFeature.value;
+            fp.describe = initFeature.describe;
+            fp.featureParams = initFeature.featureParams;
+            fp.templateId = initFeature.templateId;
+            fp.templateList = initFeature.templateList;
+            fp.accept = initFeature.accept;
+            fp.numberLimit = numberLimit;
+            this.setState({
+              feature: this.props.initFeature,
+              featureParams: fp
+            });
+          }
+        } catch (e) {
+          console.log(e);
+          _message3.default.error("解析控件配置参数出错！");
+        }
+      } else {
+        try {
+          var feature = (0, _stringify2.default)(this.state.featureParams);
+          this.setState({
+            feature: feature
+          });
+        } catch (e) {
+          console.log(e);
+          _message3.default.error("生成控件配置参数出错！");
+        }
+      }
+    }
+
+    //供父组件获取feature
+
+
+    //生成feature参数json字符串
+
+
+    //修改文件上传大小，同步更新控件参数
+
+
+    //切换是否必填,同步更新控件参数
+
+
+    //切换文件类型,同步更新控件参数
+
+  }, {
+    key: "render",
+    value: function render() {
+      var fileSize = this.state.fileSize;
+      var _state$featureParams = this.state.featureParams,
+          required = _state$featureParams.required,
+          fileType = _state$featureParams.fileType,
+          mode = _state$featureParams.mode,
+          numberLimit = _state$featureParams.numberLimit,
+          serviceMark = _state$featureParams.serviceMark,
+          moduleName = _state$featureParams.moduleName,
+          value = _state$featureParams.value,
+          describe = _state$featureParams.describe,
+          fileMainName = _state$featureParams.fileMainName,
+          templateId = _state$featureParams.templateId,
+          accept = _state$featureParams.accept;
+
+      return _react2.default.createElement(
+        _reactCustomScrollbarsPatched.Scrollbars,
+        { style: { height: 500 } },
+        _react2.default.createElement(
+          "div",
+          { id: "input-setting-div" },
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              null,
+              _react2.default.createElement(
+                "div",
+                { style: { margin: "16px 0" } },
+                "\u6587\u4EF6\u4E0A\u4F20\u914D\u7F6E\u4FE1\u606F"
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              null,
+              _react2.default.createElement(
+                "div",
+                { style: { margin: "16px 0" } },
+                "\u6587\u4EF6\u7C7B\u578B"
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              null,
+              _react2.default.createElement(
+                RadioGroup,
+                {
+                  onChange: this.handleFileTypeRadioChange,
+                  value: fileType
+                },
+                _react2.default.createElement(
+                  _radio2.default,
+                  { value: "image" },
+                  "\u56FE\u7247"
+                ),
+                _react2.default.createElement(
+                  _radio2.default,
+                  { value: "file" },
+                  "\u6587\u4EF6"
+                )
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              null,
+              _react2.default.createElement(
+                "div",
+                { style: { margin: "16px 0" } },
+                "\u6587\u4EF6\u4E0A\u4F20\u6700\u5927\u503C"
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              null,
+              _react2.default.createElement(_inputNumber2.default, {
+                size: "small",
+                min: 0,
+                formatter: function formatter(value) {
+                  return value + "M";
+                },
+                parser: function parser(value) {
+                  return value.replace("M", "");
+                },
+                value: fileSize,
+                onChange: this.handleSizeChange
+              })
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              null,
+              _react2.default.createElement(
+                "div",
+                { style: { margin: "16px 0" } },
+                "\u4E0A\u4F20\u6A21\u5F0F"
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              null,
+              _react2.default.createElement(
+                _select2.default,
+                {
+                  style: { width: 120 },
+                  onChange: this.handeModeChange,
+                  value: mode
+                },
+                _react2.default.createElement(
+                  _select2.default.Option,
+                  { value: "file" },
+                  "file"
+                ),
+                _react2.default.createElement(
+                  _select2.default.Option,
+                  { value: "redis" },
+                  "redis"
+                ),
+                fileType === "image" ? _react2.default.createElement(
+                  _select2.default.Option,
+                  { value: "base64" },
+                  "base64"
+                ) : null
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            {
+              align: "middle",
+              type: "flex",
+              style: { margin: "16px 0px 0px 0px" }
+            },
+            _react2.default.createElement(
+              _col2.default,
+              { span: 8 },
+              "\u6587\u4EF6\u4E0A\u4F20\u4E2A\u6570\u9650\u5236\uFF1A"
+            ),
+            _react2.default.createElement(
+              _col2.default,
+              { span: 16 },
+              _react2.default.createElement(_inputNumber2.default, {
+                value: numberLimit,
+                min: 1,
+                onChange: this.handleNumberLimitChange
+              })
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              null,
+              _react2.default.createElement(
+                "div",
+                { style: { margin: "16px 0" } },
+                "\u662F\u5426\u5FC5\u586B"
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              null,
+              _react2.default.createElement(
+                RadioGroup,
+                {
+                  onChange: this.handleRequiredRadioChange,
+                  value: required
+                },
+                _react2.default.createElement(
+                  _radio2.default,
+                  { value: false },
+                  "\u975E\u5FC5\u586B"
+                ),
+                _react2.default.createElement(
+                  _radio2.default,
+                  { value: true },
+                  "\u5FC5\u586B"
+                )
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              null,
+              _react2.default.createElement(
+                "div",
+                { style: { margin: "16px 0" } },
+                "\u9644\u4EF6\u6A21\u677F",
+                " ",
+                _react2.default.createElement(
+                  _tooltip2.default,
+                  { title: "提供给学生上传附件的模板", placement: "top" },
+                  _react2.default.createElement(_icon2.default, { type: "question-circle" })
+                )
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              { span: 16 },
+              _react2.default.createElement(_KyUpload2.default, {
+                serviceMark: "hq-xtgl",
+                moduleName: "\u9644\u4EF6\u6A21\u677F",
+                defaultEffective: true,
+                onChange: this.handleTemplateChange,
+                value: templateId
+              })
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              null,
+              _react2.default.createElement(
+                "div",
+                { style: { margin: "16px 0" } },
+                _react2.default.createElement(
+                  "a",
+                  {
+                    href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept",
+                    target: "_blank"
+                  },
+                  "\u6587\u4EF6\u7C7B\u578B"
+                )
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              { span: 16 },
+              _react2.default.createElement(_input2.default, { onChange: this.handleAcceptChange, value: accept })
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              null,
+              _react2.default.createElement(
+                "div",
+                { style: { margin: "16px 0" } },
+                _react2.default.createElement(
+                  "font",
+                  { color: "red" },
+                  "*"
+                ),
+                "\u670D\u52A1\u6807\u5FD7",
+                " ",
+                _react2.default.createElement(
+                  _tooltip2.default,
+                  { title: "说明是属于哪个服务", placement: "top" },
+                  _react2.default.createElement(_icon2.default, { type: "question-circle" })
+                )
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { align: "middle", type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              { span: 16 },
+              _react2.default.createElement(_input2.default, {
+                placeholder: "\u8BF7\u8F93\u5165\u670D\u52A1\u6807\u5FD7",
+                onChange: this.handleServiceMark,
+                value: serviceMark
+              })
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              null,
+              _react2.default.createElement(
+                "div",
+                { style: { margin: "16px 0" } },
+                _react2.default.createElement(
+                  "font",
+                  { color: "red" },
+                  "*"
+                ),
+                "\u6A21\u5757\u540D\u79F0",
+                " ",
+                _react2.default.createElement(
+                  _tooltip2.default,
+                  { title: "说明是属于哪个服务的哪个模块", placement: "top" },
+                  _react2.default.createElement(_icon2.default, { type: "question-circle" })
+                )
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              { span: 16 },
+              _react2.default.createElement(_input2.default, {
+                placeholder: "\u8BF7\u8F93\u5165\u6A21\u5757\u540D\u79F0",
+                onChange: this.handleModuleName,
+                value: moduleName
+              })
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              null,
+              _react2.default.createElement(
+                "div",
+                { style: { margin: "16px 0" } },
+                "\u9644\u4EF6\u4E3B\u8868id",
+                " ",
+                _react2.default.createElement(
+                  _tooltip2.default,
+                  { title: "根据id显示已经有的附件内容", placement: "top" },
+                  _react2.default.createElement(_icon2.default, { type: "question-circle" })
+                )
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              { span: 16 },
+              _react2.default.createElement(_input2.default, {
+                placeholder: "\u8BF7\u8F93\u5165\u9644\u4EF6\u4E3B\u8868id",
+                onChange: this.handleFjzbid,
+                value: value
+              })
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              null,
+              _react2.default.createElement(
+                "div",
+                { style: { margin: "16px 0" } },
+                "\u9644\u4EF6\u63CF\u8FF0",
+                " ",
+                _react2.default.createElement(
+                  _tooltip2.default,
+                  { title: "对上传的附件的一个描述信息", placement: "top" },
+                  _react2.default.createElement(_icon2.default, { type: "question-circle" })
+                )
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              { span: 16 },
+              _react2.default.createElement(_input2.default, {
+                placeholder: "\u8BF7\u8F93\u5165\u9644\u4EF6\u63CF\u8FF0",
+                onChange: this.handleMs,
+                value: describe
+              })
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              null,
+              _react2.default.createElement(
+                "div",
+                { style: { margin: "16px 0" } },
+                "\u9644\u4EF6\u4E3B\u8868\u540D",
+                " ",
+                _react2.default.createElement(
+                  _tooltip2.default,
+                  {
+                    title: "存储该附件对应的主表的名称，主要是为了以后进行追溯",
+                    placement: "top"
+                  },
+                  _react2.default.createElement(_icon2.default, { type: "question-circle" })
+                )
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              { span: 16 },
+              _react2.default.createElement(_input2.default, {
+                placeholder: "\u8BF7\u8F93\u5165\u9644\u4EF6\u4E3B\u8868\u540D",
+                onChange: this.handleFjzbm,
+                value: fileMainName
+              })
+            )
+          )
+        )
+      );
+    }
+  }]);
+  return SettingUpload;
+}(_react2.default.Component);
+
+SettingUpload.defaultProps = {
+  initFeature: ""
+};
+exports.default = SettingUpload;