fmui-base 2.2.61 → 2.2.63

package/README.md

@@ -3,6 +3,8 @@
 ---npm publish
 
 ## 更新日志 
+- 2.2.63: 再次发起回调参数
+- 2.2.62: 单选和多选支持选项后允许填空
 - 2.2.61: 我的流程支持再次发起
 - 2.2.60: 数据表字段关联值支持关联日期字段带出星期几，数据表字段关联值可以关联其他字段，进行赋值，批量办理支持CA批示意见的加签和验签
 - 2.2.59: 上海CA异常处理

package/lib/form/form.js

@@ -101,6 +101,10 @@ var _sign = require('../signature/sign');
 
 var _sign2 = _interopRequireDefault(_sign);
 
+var _select_input = require('../select_input');
+
+var _select_input2 = _interopRequireDefault(_select_input);
+
 require('./form.less');
 
 var _db = require('../db/db');
@@ -739,6 +743,7 @@ var PageHome = function (_React$Component) {
         value = form.title;
       } else if (itemType == 'radio') {
         //单选
+        itemParam.isinput = '0';
         var selectItem = form.multiItems; //选项
         var selectOptions = [];
         if (selectItem) {
@@ -756,15 +761,26 @@ var PageHome = function (_React$Component) {
                 selectOptions.push(option);
               }
             });
+            for (var i = 0; i < selectItem.length; i++) {
+              if (selectItem[i].isinput && selectItem[i].isinput == "1" && (typeof selectItem[i].state == 'undefined' || selectItem[i].state == "1")) {
+                itemParam.isinput = '1';
+              }
+            }
           }
         }
         if (value == "") {
           value = null;
         }
-        itemParam.selectOptions = selectOptions;
-        itemParam.selectItem = selectOptions;
+        if (itemParam.isinput == '1') {
+          itemParam.selectOptions = selectItem;
+          itemParam.selectItem = selectItem;
+        } else {
+          itemParam.selectOptions = selectOptions;
+          itemParam.selectItem = selectOptions;
+        }
       } else if (itemType == 'checkbox') {
         //多选
+        itemParam.isinput = '0';
         var selectItem = form.multiItems; //选项
         var selectOptions = [];
         if (selectItem) {
@@ -796,10 +812,20 @@ var PageHome = function (_React$Component) {
                 selectOptions.push(option);
               }
             });
+            for (var i = 0; i < selectItem.length; i++) {
+              if (selectItem[i].isinput && selectItem[i].isinput == "1" && (typeof selectItem[i].state == 'undefined' || selectItem[i].state == "1")) {
+                itemParam.isinput = '1';
+              }
+            }
           }
         }
-        itemParam.selectOptions = selectOptions;
-        itemParam.selectItem = selectOptions;
+        if (itemParam.isinput == '1') {
+          itemParam.selectOptions = selectItem;
+          itemParam.selectItem = selectItem;
+        } else {
+          itemParam.selectOptions = selectOptions;
+          itemParam.selectItem = selectOptions;
+        }
       } else if (itemType == 'select') {
         //下拉选择
         var selectItem = form.multiItems; //选项
@@ -2562,6 +2588,24 @@ var PageHome = function (_React$Component) {
         this.props.onChange(data, itemParam);
       }
     }
+
+    //下拉可输入
+
+  }, {
+    key: 'selectInputChange',
+    value: function selectInputChange(code, value) {
+      if (value) {
+        var data = this.props.data;
+        var selectValue = value;
+        data = this.editData(code, selectValue, data);
+        var itemParam = this.state.itemParam;
+        itemParam.value = value;
+        this.setState({
+          itemParam: itemParam
+        });
+        this.props.onChange(data, itemParam);
+      }
+    }
   }, {
     key: 'getWeekdaysByDate',
     value: function getWeekdaysByDate(date) {
@@ -3605,6 +3649,32 @@ var PageHome = function (_React$Component) {
               t.state.itemParam.isVerifySing == "1" ? _react2.default.createElement('i', { className: 'iconfont icon-checked t-PT10', style: { color: 'green' } }) : t.state.itemParam.isVerifySing == "2" ? _react2.default.createElement('i', { className: 'iconfont icon-close t-PT10', style: { color: 'red' } }) : ""
             )
           )
+        ) : this.state.itemParam.itemType == 'radio' && this.state.itemParam.isinput == '1' ? _react2.default.createElement(
+          'div',
+          { className: t.state.itemParam.fieldId, style: t.state.itemParam.formStyleObj.contentStyle },
+          _react2.default.createElement(
+            _Group2.default.List,
+            { borderTopNone: true },
+            _react2.default.createElement(
+              'div',
+              { className: 't-FBH', id: t.state.prefixName + "_" + t.state.itemParam.key },
+              _react2.default.createElement(
+                'div',
+                { className: 't-W100' },
+                _react2.default.createElement(_select_input2.default, {
+                  required: t.state.itemParam.required,
+                  label: t.state.itemParam.title,
+                  readOnly: t.state.itemParam.readOnly,
+                  options: t.state.itemParam.selectOptions,
+                  value: t.state.itemParam.value,
+                  multiLine: true,
+                  selectType: 'radio',
+                  onSelect: t.selectInputChange.bind(t, t.state.itemParam.key)
+                })
+              ),
+              t.state.itemParam.isVerifySing == "1" ? _react2.default.createElement('i', { className: 'iconfont icon-checked t-PT10', style: { color: 'green' } }) : t.state.itemParam.isVerifySing == "2" ? _react2.default.createElement('i', { className: 'iconfont icon-close t-PT10', style: { color: 'red' } }) : ""
+            )
+          )
         ) : this.state.itemParam.itemType == 'radio' ? _react2.default.createElement(
           'div',
           { className: t.state.itemParam.fieldId, style: t.state.itemParam.formStyleObj.contentStyle },
@@ -3631,6 +3701,32 @@ var PageHome = function (_React$Component) {
               t.state.itemParam.isVerifySing == "1" ? _react2.default.createElement('i', { className: 'iconfont icon-checked t-PT10', style: { color: 'green' } }) : t.state.itemParam.isVerifySing == "2" ? _react2.default.createElement('i', { className: 'iconfont icon-close t-PT10', style: { color: 'red' } }) : ""
             )
           )
+        ) : this.state.itemParam.itemType == 'checkbox' && this.state.itemParam.isinput == '1' ? _react2.default.createElement(
+          'div',
+          { className: t.state.itemParam.fieldId, style: t.state.itemParam.formStyleObj.contentStyle },
+          _react2.default.createElement(
+            _Group2.default.List,
+            { borderTopNone: true },
+            _react2.default.createElement(
+              'div',
+              { className: 't-FBH', id: t.state.prefixName + "_" + t.state.itemParam.key },
+              _react2.default.createElement(
+                'div',
+                { className: 't-W100' },
+                _react2.default.createElement(_select_input2.default, {
+                  required: t.state.itemParam.required,
+                  label: t.state.itemParam.title,
+                  readOnly: t.state.itemParam.readOnly,
+                  options: t.state.itemParam.selectOptions,
+                  value: t.state.itemParam.value,
+                  multiLine: true,
+                  selectType: 'checkbox',
+                  onSelect: t.selectInputChange.bind(t, t.state.itemParam.key)
+                })
+              ),
+              t.state.itemParam.isVerifySing == "1" ? _react2.default.createElement('i', { className: 'iconfont icon-checked t-PT10', style: { color: 'green' } }) : t.state.itemParam.isVerifySing == "2" ? _react2.default.createElement('i', { className: 'iconfont icon-close t-PT10', style: { color: 'red' } }) : ""
+            )
+          )
         ) : this.state.itemParam.itemType == 'checkbox' ? _react2.default.createElement(
           'div',
           { className: t.state.itemParam.fieldId, style: t.state.itemParam.formStyleObj.contentStyle },

package/lib/process_info/processInfo.js

@@ -2151,11 +2151,11 @@ var PageHome = function (_React$Component) {
                         if (documentId) {
                             this.scrollToAnchor(documentId);
                         }
-                        // Toast.show({
-                        //     type: 'error',
-                        //     content: '意见不能为空！',
-                        // });
-                        // return false;
+                        _Toast2.default.show({
+                            type: 'error',
+                            content: '意见不能为空！'
+                        });
+                        return false;
                     }
                 }
             }
@@ -4970,8 +4970,8 @@ var PageHome = function (_React$Component) {
 
                 //操作回调
                 var type = 6;
-                if (t.state.isStart && t.state.dataId == '') {
-                    //是不是起始节点
+                if (t.state.isStart && (t.state.dataId == '' || t.state.isSub == '2')) {
+                    //是不是起始节点 或再次发起
                     type = 4;
                 }
                 if (t.state.isEnd) {
@@ -4979,7 +4979,7 @@ var PageHome = function (_React$Component) {
                     type = 1;
                 }
                 var dataId = t.state.dataId;
-                if (dataId == "") {
+                if (dataId == "" || t.state.isSub == '2') {
                     dataId = content.dataId;
                     t.setState({ dataId: dataId });
                 }

package/lib/select_input/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _selectInput = require('./selectInput');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_selectInput).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/select_input/selectInput.js

@@ -0,0 +1,434 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Field = require('saltui/lib/Field');
+
+var _Field2 = _interopRequireDefault(_Field);
+
+require('./selectInput.less');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+// 单个选项值与输入框值之间的分隔符。
+// 例如：c$#$#111 表示选中 value=c，且该项输入框内容为 111。
+var KV_SEP = '$#$#';
+
+// 多个选中项之间的分隔符。
+// 例如：c$#$#111#$#$d$#$#222 表示同时选中 c、d 两项。
+var PAIR_SEP = '#$#$';
+
+var SelectInput = function (_React$Component) {
+  _inherits(SelectInput, _React$Component);
+
+  function SelectInput(props) {
+    _classCallCheck(this, SelectInput);
+
+    // 内部状态完全由外部 props 推导，不在 constructor 中手工拆分数据。
+    // 这样首次渲染与后续 props 更新可以共用同一套解析逻辑。
+    var _this = _possibleConstructorReturn(this, (SelectInput.__proto__ || Object.getPrototypeOf(SelectInput)).call(this, props));
+
+    _this.state = _this.buildStateFromProps(props);
+    return _this;
+  }
+
+  _createClass(SelectInput, [{
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      var propsChanged = prevProps.value !== this.props.value || prevProps.options !== this.props.options || prevProps.selectType !== this.props.selectType;
+
+      if (propsChanged) {
+        // 外部 value 或选项变化后，重新同步内部选中态和输入值。
+        this.setState(this.buildStateFromProps(this.props));
+      }
+    }
+  }, {
+    key: 'getOptions',
+    value: function getOptions(props) {
+      // 统一标准化外部 options，屏蔽不同页面传值字段差异。
+      // 最终内部只使用：value、text、isInput、isDefault。
+      var options = props.options || [];
+      return options.map(function (item) {
+        var text = item.text || item.name || item.label || item.value;
+        var isInput = item.isinput === '1' || item.isinput === 1 || item.isInput === true;
+        var isDefault = item.isDefault === 1 || item.isDefault === '1';
+        return {
+          value: item.value,
+          text: text,
+          isInput: isInput,
+          isDefault: isDefault
+        };
+      });
+    }
+  }, {
+    key: 'splitPair',
+    value: function splitPair(part) {
+      // 将单个“值 + 输入框内容”片段拆成结构化数据。
+      // 输入：c$#$#111
+      // 输出：{ selected: 'c', inputValue: '111' }
+      // 如果没有输入框值，例如只传 c，则 inputValue 为空字符串。
+      var index = part.indexOf(KV_SEP);
+      if (index === -1) {
+        return {
+          selected: part,
+          inputValue: ''
+        };
+      }
+      return {
+        selected: part.substring(0, index),
+        inputValue: part.substring(index + KV_SEP.length)
+      };
+    }
+  }, {
+    key: 'parseValueByType',
+    value: function parseValueByType(value, selectType, options) {
+      // 解析外部传入的 value，转换成组件内部可直接渲染的状态：
+      // 1. inputValues: 各选项输入框值，格式如 { c: '111', d: '222' }
+      // 2. selectedRadio: 单选当前选中的 value
+      // 3. selectedMap: 多选当前选中项映射，格式如 { c: true, d: true }
+      var inputValues = {};
+      var selectedRadio = '';
+      var selectedMap = {};
+
+      if (selectType === 'radio') {
+        // 单选只维护一个 selectedRadio，输入框内容挂在对应 value 下。
+        // 支持两种格式：
+        // 1. 字符串：a 或 a$#$#备注
+        // 2. 对象：{ value: 'a', text: 'A' }
+        if (typeof value === 'string' && value !== '') {
+          var pair = this.splitPair(value);
+          selectedRadio = pair.selected;
+          if (pair.inputValue !== '') {
+            inputValues[pair.selected] = pair.inputValue;
+          }
+        } else if (value && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && value.value !== undefined) {
+          selectedRadio = value.value;
+        }
+
+        if (!selectedRadio) {
+          // 没有传值时，回退到第一个默认选中且未禁用的选项。
+          // 这里的“默认选中”依赖 options[i].isDefault。
+          for (var i = 0; i < options.length; i++) {
+            if (options[i].isDefault) {
+              selectedRadio = options[i].value;
+              break;
+            }
+          }
+        }
+      } else {
+        // 多选统一转成 selectedMap，后续渲染时按 value 快速判断是否勾选。
+        // 支持三种 value 来源：
+        // 1. 编码字符串：c$#$#111#$#$d$#$#222
+        // 2. 普通字符串：a,b,c
+        // 3. 数组：['a', 'b', 'c']
+        var selectedValues = [];
+        if (typeof value === 'string' && value !== '') {
+          if (value.indexOf(KV_SEP) !== -1 || value.indexOf(PAIR_SEP) !== -1) {
+            // 支持 c$#$#111#$#$d$#$#222 这种“多项 + 输入框内容”格式。
+            var parts = value.split(PAIR_SEP);
+            for (var _i = 0; _i < parts.length; _i++) {
+              if (!parts[_i]) {
+                continue;
+              }
+              var _pair = this.splitPair(parts[_i]);
+              if (_pair.selected !== '') {
+                // 选中项单独存进 selectedValues，输入框值按 value 建索引。
+                selectedValues.push(_pair.selected);
+                inputValues[_pair.selected] = _pair.inputValue;
+              }
+            }
+          } else {
+            // 兼容普通逗号分隔的多选值，例如 a,b,c。
+            selectedValues = value.split(',').filter(function (item) {
+              return item !== '';
+            });
+          }
+        } else if (Array.isArray(value)) {
+          selectedValues = value;
+        }
+
+        if (selectedValues.length === 0) {
+          // 没有传值时，多选回退到所有默认选中且未禁用的项。
+          for (var _i2 = 0; _i2 < options.length; _i2++) {
+            if (options[_i2].isDefault) {
+              selectedValues.push(options[_i2].value);
+            }
+          }
+        }
+
+        selectedValues.forEach(function (item) {
+          // selectedMap 用来支撑 render 时的 O(1) 勾选判断。
+          selectedMap[item] = true;
+        });
+      }
+
+      return {
+        inputValues: inputValues,
+        selectedRadio: selectedRadio,
+        selectedMap: selectedMap
+      };
+    }
+  }, {
+    key: 'buildStateFromProps',
+    value: function buildStateFromProps(props) {
+      var selectType = props.selectType === 'checkbox' ? 'checkbox' : 'radio';
+      var options = this.getOptions(props);
+      // 每次都根据 props 重建内部状态，避免受旧 state 残留影响。
+      var parsed = this.parseValueByType(props.value, selectType, options);
+
+      // state 字段说明：
+      // selectType: 当前模式，radio 或 checkbox
+      // options: 标准化后的选项列表
+      // inputValues: 当前所有输入框内容
+      // selectedRadio: 单选模式下的已选 value
+      // selectedMap: 多选模式下的已选映射
+      return {
+        selectType: selectType,
+        options: options,
+        inputValues: parsed.inputValues,
+        selectedRadio: parsed.selectedRadio,
+        selectedMap: parsed.selectedMap
+      };
+    }
+  }, {
+    key: 'getOptionByValue',
+    value: function getOptionByValue(value) {
+      // 根据 value 找到当前选项元数据，用于判断该选项是否带输入框等属性。
+      var options = this.state.options;
+      for (var i = 0; i < options.length; i++) {
+        if (options[i].value === value) {
+          return options[i];
+        }
+      }
+      return null;
+    }
+  }, {
+    key: 'buildEmitValue',
+    value: function buildEmitValue(nextState) {
+      // 将内部状态重新编码成父页面需要的字符串格式。
+      // 这是组件对外唯一的数据输出协议。
+      var selectType = nextState.selectType;
+      var options = nextState.options;
+
+      if (selectType === 'radio') {
+        // 单选回传 value 或 value$#$#输入内容。
+        var selectedValue = nextState.selectedRadio;
+        if (!selectedValue) {
+          return '';
+        }
+        var option = this.getOptionByValue(selectedValue);
+        if (option && option.isInput) {
+          var text = nextState.inputValues[selectedValue] || '';
+          return selectedValue + KV_SEP + text;
+        }
+        return selectedValue;
+      }
+
+      // 多选按 options 原顺序拼接，保证回传值稳定。
+      // 这样即使用户先点 D 再点 C，最终输出仍可按 options 顺序固定下来。
+      var selectedValues = [];
+      for (var i = 0; i < options.length; i++) {
+        var _option = options[i];
+        if (nextState.selectedMap[_option.value]) {
+          if (_option.isInput) {
+            var _text = nextState.inputValues[_option.value] || '';
+            selectedValues.push(_option.value + KV_SEP + _text);
+          } else {
+            selectedValues.push(_option.value);
+          }
+        }
+      }
+
+      if (selectedValues.length === 0) {
+        // 没有任何选中项时，对外统一返回空字符串。
+        return '';
+      }
+
+      var hasInputType = false;
+      for (var _i3 = 0; _i3 < options.length; _i3++) {
+        if (options[_i3].isInput) {
+          hasInputType = true;
+          break;
+        }
+      }
+
+      if (hasInputType) {
+        // 只要存在可输入选项，就按“值 + 输入内容”的协议回传。
+        // 即使某个已选项当前输入框为空，也会保留 value$#$# 的结构。
+        return selectedValues.join(PAIR_SEP);
+      }
+
+      // 所有项都不带输入框时，退回普通多选格式。
+      return selectedValues.join(',');
+    }
+  }, {
+    key: 'emitValue',
+    value: function emitValue(nextState) {
+      // 所有变更最终都通过 onSelect 向父页面抛出编码后的最终值。
+      // 父页面不需要感知内部 selectedMap / inputValues 的实现细节。
+      if (this.props.onSelect) {
+        this.props.onSelect(this.buildEmitValue(nextState));
+      }
+    }
+  }, {
+    key: 'handleSelectChange',
+    value: function handleSelectChange(optionValue, checked) {
+      var _this2 = this;
+
+      if (this.props.readOnly) {
+        return;
+      }
+
+      var selectType = this.state.selectType;
+      if (selectType === 'radio') {
+        // 单选直接替换当前选中项。
+        // radio 模式下 checked 参数不参与判断，因为始终只有一个选中值。
+        var _nextState = _extends({}, this.state, {
+          selectedRadio: optionValue
+        });
+        this.setState(_nextState, function () {
+          _this2.emitValue(_this2.state);
+        });
+        return;
+      }
+
+      // 多选在 selectedMap 上增删当前项。
+      // checked=true 表示勾上，checked=false 表示取消。
+      var selectedMap = _extends({}, this.state.selectedMap);
+
+      if (checked) {
+        selectedMap[optionValue] = true;
+      } else {
+        delete selectedMap[optionValue];
+      }
+
+      var nextState = _extends({}, this.state, {
+        selectedMap: selectedMap
+      });
+
+      this.setState(nextState, function () {
+        _this2.emitValue(_this2.state);
+      });
+    }
+  }, {
+    key: 'handleInputChange',
+    value: function handleInputChange(optionValue, value) {
+      if (this.props.readOnly) {
+        return;
+      }
+
+      // 输入框内容单独存储，提交时再与选中值一起编码。
+      // 注意：这里不改变选中状态，只更新某一项的附加输入内容。
+      // 根据交互要求，输入中只更新本地 state，不立即通知父组件。
+      var inputValues = _extends({}, this.state.inputValues);
+      inputValues[optionValue] = value;
+
+      var nextState = _extends({}, this.state, {
+        inputValues: inputValues
+      });
+
+      this.setState(nextState);
+    }
+  }, {
+    key: 'handleInputBlur',
+    value: function handleInputBlur() {
+      if (this.props.readOnly) {
+        return;
+      }
+
+      // 输入完成（blur）后再统一通知父组件。
+      this.emitValue(this.state);
+    }
+  }, {
+    key: 'renderOptions',
+    value: function renderOptions() {
+      var _this3 = this;
+
+      var readOnly = this.props.readOnly;
+      var selectType = this.state.selectType;
+      var options = this.state.options;
+
+      return options.map(function (option, index) {
+        var optionValue = option.value;
+        // 单选看 selectedRadio，多选看 selectedMap 是否包含当前 value。
+        var checked = selectType === 'radio' ? _this3.state.selectedRadio === optionValue : !!_this3.state.selectedMap[optionValue];
+        var showInput = option.isInput;
+        var optionClassName = checked ? 'dd-select-input-option checked' : 'dd-select-input-option';
+        var inputDisabled = readOnly || !showInput;
+
+        return _react2.default.createElement(
+          'label',
+          { className: optionClassName, key: optionValue || index },
+          _react2.default.createElement('input', {
+            className: 'dd-select-input-native',
+            type: selectType,
+            checked: checked,
+            disabled: readOnly,
+            onChange: function onChange(e) {
+              _this3.handleSelectChange(optionValue, e.target.checked);
+            }
+          }),
+          _react2.default.createElement('span', { className: selectType === 'radio' ? 'dd-select-input-icon radio' : 'dd-select-input-icon checkbox' }),
+          _react2.default.createElement(
+            'span',
+            { className: 'dd-select-input-option-text' },
+            option.text
+          ),
+          showInput ? _react2.default.createElement('input', {
+            className: 'dd-select-input-text',
+            type: 'text',
+            value: _this3.state.inputValues[optionValue] || ''
+            // 输入框只有在当前项已选中且 readOnly=false 时才允许输入。
+            , disabled: inputDisabled,
+            onChange: function onChange(e) {
+              _this3.handleInputChange(optionValue, e.target.value);
+            },
+            onBlur: function onBlur() {
+              _this3.handleInputBlur();
+            }
+          }) : null
+        );
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement(
+        _Field2.default,
+        {
+          required: this.props.required,
+          label: this.props.label,
+          multiLine: this.props.multiLine
+        },
+        _react2.default.createElement(
+          'div',
+          { className: 'dd-select-input-field' },
+          this.renderOptions()
+        )
+      );
+    }
+  }]);
+
+  return SelectInput;
+}(_react2.default.Component);
+
+exports.default = SelectInput;

package/lib/select_input/selectInput.less

@@ -0,0 +1,87 @@
+.dd-select-input-field {
+     width: 100%;
+}
+
+.dd-select-input-option {
+     display: flex;
+     align-items: center;
+     margin: 8px 0;
+     cursor: pointer;
+}
+
+.dd-select-input-native {
+     position: absolute;
+     opacity: 0;
+     pointer-events: none;
+}
+
+.dd-select-input-icon {
+     position: relative;
+     flex: 0 0 18px;
+     width: 18px;
+     height: 18px;
+     margin-right: 8px;
+     border: 1px solid #c7ced9;
+     background: #fff;
+     transition: all .2s ease;
+     box-sizing: border-box;
+}
+
+.dd-select-input-icon.radio {
+     border-radius: 50%;
+}
+
+.dd-select-input-icon.checkbox {
+     border-radius: 4px;
+}
+
+.dd-select-input-option.checked .dd-select-input-icon {
+     border-color: #3480fb;
+     background: #3480fb;
+}
+
+.dd-select-input-option.checked .dd-select-input-icon.radio::after {
+     content: '';
+     position: absolute;
+     top: 50%;
+     left: 50%;
+     width: 8px;
+     height: 8px;
+     border-radius: 50%;
+     background: #fff;
+     transform: translate(-50%, -50%);
+}
+
+.dd-select-input-option.checked .dd-select-input-icon.checkbox::after {
+     content: '';
+     position: absolute;
+     left: 5px;
+     top: 1px;
+     width: 5px;
+     height: 10px;
+     border: solid #fff;
+     border-width: 0 2px 2px 0;
+     transform: rotate(45deg);
+}
+
+.dd-select-input-option-text {
+     margin-right: 8px;
+     min-width: 32px;
+}
+
+.dd-select-input-text {
+     flex: 1;
+     min-width: 120px;
+     border: none;
+     border-bottom: 1px solid #ddd;
+     outline: none;
+     padding: 4px 2px;
+     font-size: 14px;
+     background-color: transparent;
+}
+
+.dd-select-input-text:disabled {
+     color: #333;
+     border-bottom-color: #eee;
+     cursor: not-allowed;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fmui-base",
-  "version": "2.2.61",
+  "version": "2.2.63",
   "title": "fmui-base",
   "description": "fmui移动端组件",
   "main": "lib/index.js",