fmui-base 2.3.61 → 2.3.62

package/README.md

@@ -3,6 +3,7 @@
 ---npm publish
 
 ## 更新日志 
+- 2.3.62：单选多选可输入选项支持设置提示文字
 - 2.3.61：移动端流程提交时过滤主键无效参数，如null字符串
 - 2.3.60：移动端支持减签
 - 2.3.59：移动端不通过的流程允许作废，移动端支持关联流程

package/lib/form/form.js

@@ -827,6 +827,8 @@ var PageHome = function (_React$Component) {
         itemParam.isinput = '0';
         var selectItem = form.multiItems; //选项
         var selectOptions = [];
+        // 可填空原始存值（如 a$#$#备注），须原样交给 SelectInput，不能转成 {value,text}
+        var radioRawValue = value;
         if (selectItem) {
           if (selectItem.length > 0) {
             selectItem.map(function (item) {
@@ -834,11 +836,12 @@ var PageHome = function (_React$Component) {
                 var option = {};
                 option.value = item.value;
                 option.text = item.name;
-                // if(status != '0'){
-                if (value == item.value) {
-                  value = { value: value, text: item.name };
+                // 含可填空分隔符时保持字符串，避免丢失填空内容
+                if (typeof value !== 'string' || value.indexOf('$#$#') < 0 && value.indexOf('#$#$') < 0) {
+                  if (value == item.value || String(value) === String(item.value)) {
+                    value = { value: value, text: item.name };
+                  }
                 }
-                // }
                 selectOptions.push(option);
               }
             });
@@ -855,6 +858,9 @@ var PageHome = function (_React$Component) {
         if (itemParam.isinput == '1') {
           itemParam.selectOptions = selectItem;
           itemParam.selectItem = selectItem;
+          if (radioRawValue !== null && typeof radioRawValue !== 'undefined' && radioRawValue !== '') {
+            value = radioRawValue;
+          }
         } else {
           itemParam.selectOptions = selectOptions;
           itemParam.selectItem = selectOptions;
@@ -864,14 +870,19 @@ var PageHome = function (_React$Component) {
         itemParam.isinput = '0';
         var selectItem = form.multiItems; //选项
         var selectOptions = [];
+        var checkboxRawValue = value;
         if (selectItem) {
           var valueArray = [];
           //if(status != '0'){
           if (value || value == 0) {
-            if (value.indexOf("[") >= 0) {
-              valueArray = JSON.parse(value);
+            var valueStr = String(value);
+            if (valueStr.indexOf("[") >= 0) {
+              valueArray = JSON.parse(valueStr);
+            } else if (valueStr.indexOf("#$#$") >= 0 || valueStr.indexOf("$#$#") >= 0) {
+              // 可填空编码串勿按逗号拆，避免破坏 #$#$ / $#$#
+              valueArray = [];
             } else {
-              valueArray = value.split(",");
+              valueArray = valueStr.split(",");
             }
           }
           // }
@@ -885,7 +896,7 @@ var PageHome = function (_React$Component) {
                 option.checked = false;
                 if (valueArray.length > 0) {
                   for (var i = 0; i < valueArray.length; i++) {
-                    if (valueArray[i] == item.value) {
+                    if (valueArray[i] == item.value || String(valueArray[i]) === String(item.value)) {
                       option.checked = true;
                     }
                   }
@@ -903,6 +914,9 @@ var PageHome = function (_React$Component) {
         if (itemParam.isinput == '1') {
           itemParam.selectOptions = selectItem;
           itemParam.selectItem = selectItem;
+          if (checkboxRawValue !== null && typeof checkboxRawValue !== 'undefined') {
+            value = checkboxRawValue;
+          }
         } else {
           itemParam.selectOptions = selectOptions;
           itemParam.selectItem = selectOptions;
@@ -2213,16 +2227,26 @@ var PageHome = function (_React$Component) {
           var key = itemNew[i].key;
           if (key == 'value') {
             if (itemParam.itemType == 'positioning') {} else if (itemParam.itemType == 'select' || itemParam.itemType == 'radio') {
-              var selectOptions = itemParam.selectOptions;
-              var valueHas = false; //判断传过来的值是否有匹配
-              selectOptions.map(function (item) {
-                if (item.value == itemNew[i].value) {
-                  itemParam[key] = item;
-                  valueHas = true;
+              // 可填空单选：保留 a$#$#填空 原串，禁止因匹配不上选项被置 null
+              if (itemParam.isinput == '1') {
+                itemParam[key] = itemNew[i].value == null ? '' : itemNew[i].value;
+              } else {
+                var selectOptions = itemParam.selectOptions;
+                var valueHas = false; //判断传过来的值是否有匹配
+                var incomingVal = itemNew[i].value;
+                var incomingCode = incomingVal;
+                if (typeof incomingVal === 'string' && incomingVal.indexOf('$#$#') >= 0) {
+                  incomingCode = incomingVal.split('$#$#')[0];
+                }
+                selectOptions.map(function (item) {
+                  if (item.value == incomingVal || String(item.value) === String(incomingCode)) {
+                    itemParam[key] = item;
+                    valueHas = true;
+                  }
+                });
+                if (!valueHas) {
+                  itemParam[key] = null;
                 }
-              });
-              if (!valueHas) {
-                itemParam[key] = null;
               }
             } else if (itemParam.itemType == 'checkbox') {
               var selectOptions = itemParam.selectOptions;
@@ -2907,6 +2931,10 @@ var PageHome = function (_React$Component) {
       var selectedValue = null;
       if (currentValue != null && currentValue !== '') {
         selectedValue = (typeof currentValue === 'undefined' ? 'undefined' : _typeof(currentValue)) === 'object' ? currentValue.value : currentValue;
+        // 可填空存值只取选项码做选中匹配
+        if (typeof selectedValue === 'string' && selectedValue.indexOf('$#$#') >= 0) {
+          selectedValue = selectedValue.split('$#$#')[0];
+        }
       }
       return (selectOptions || []).map(function (opt) {
         return {
@@ -2965,16 +2993,13 @@ var PageHome = function (_React$Component) {
   }, {
     key: 'selectInputChange',
     value: function selectInputChange(code, value) {
-      if (value) {
+      // 允许空串回写（取消全选），勿用 if(value) 挡住
+      if (value !== undefined && value !== null) {
         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);
         this.setState({
           itemParam: itemParam
         }, function () {

package/lib/select_input/selectInput.js

@@ -61,9 +61,22 @@ var SelectInput = function (_React$Component) {
         this.setState(this.buildStateFromProps(this.props));
       }
     }
+
+    /** 选项码统一转字符串，避免 "2" === 2 导致不回显 */
+
+  }, {
+    key: 'toOptionKey',
+    value: function toOptionKey(v) {
+      if (v === null || v === undefined) {
+        return '';
+      }
+      return String(v);
+    }
   }, {
     key: 'getOptions',
     value: function getOptions(props) {
+      var _this2 = this;
+
       // 统一标准化外部 options，屏蔽不同页面传值字段差异。
       // 最终内部只使用：value、text、isInput、isDefault。
       var options = props.options || [];
@@ -72,10 +85,11 @@ var SelectInput = function (_React$Component) {
         var isInput = item.isinput === '1' || item.isinput === 1 || item.isInput === true;
         var isDefault = item.isDefault === 1 || item.isDefault === '1';
         return {
-          value: item.value,
+          value: _this2.toOptionKey(item.value),
           text: text,
           isInput: isInput,
-          isDefault: isDefault
+          isDefault: isDefault,
+          inputTip: item.inputTip || item.inputtip || ''
         };
       });
     }
@@ -101,6 +115,8 @@ var SelectInput = function (_React$Component) {
   }, {
     key: 'parseValueByType',
     value: function parseValueByType(value, selectType, options) {
+      var _this3 = this;
+
       // 解析外部传入的 value，转换成组件内部可直接渲染的状态：
       // 1. inputValues: 各选项输入框值，格式如 { c: '111', d: '222' }
       // 2. selectedRadio: 单选当前选中的 value
@@ -116,12 +132,23 @@ var SelectInput = function (_React$Component) {
         // 2. 对象：{ value: 'a', text: 'A' }
         if (typeof value === 'string' && value !== '') {
           var pair = this.splitPair(value);
-          selectedRadio = pair.selected;
+          selectedRadio = this.toOptionKey(pair.selected);
           if (pair.inputValue !== '') {
-            inputValues[pair.selected] = pair.inputValue;
+            inputValues[selectedRadio] = pair.inputValue;
+          }
+        } else if (value && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && value.value !== undefined && value.value !== null) {
+          selectedRadio = this.toOptionKey(value.value);
+          if (value.inputValue != null && value.inputValue !== '') {
+            inputValues[selectedRadio] = String(value.inputValue);
+          } else if (typeof value.text === 'string' && value.text.indexOf(KV_SEP) >= 0) {
+            var _pair = this.splitPair(value.text);
+            if (_pair.inputValue !== '') {
+              inputValues[selectedRadio] = _pair.inputValue;
+            }
           }
-        } else if (value && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && value.value !== undefined) {
-          selectedRadio = value.value;
+        } else if (value !== null && value !== undefined && value !== '') {
+          // 兼容数字等非字符串码值
+          selectedRadio = this.toOptionKey(value);
         }
 
         if (!selectedRadio) {
@@ -129,7 +156,7 @@ var SelectInput = function (_React$Component) {
           // 这里的“默认选中”依赖 options[i].isDefault。
           for (var i = 0; i < options.length; i++) {
             if (options[i].isDefault) {
-              selectedRadio = options[i].value;
+              selectedRadio = this.toOptionKey(options[i].value);
               break;
             }
           }
@@ -149,35 +176,42 @@ var SelectInput = function (_React$Component) {
               if (!parts[_i]) {
                 continue;
               }
-              var _pair = this.splitPair(parts[_i]);
-              if (_pair.selected !== '') {
+              var _pair2 = this.splitPair(parts[_i]);
+              var key = this.toOptionKey(_pair2.selected);
+              if (key !== '') {
                 // 选中项单独存进 selectedValues，输入框值按 value 建索引。
-                selectedValues.push(_pair.selected);
-                inputValues[_pair.selected] = _pair.inputValue;
+                selectedValues.push(key);
+                inputValues[key] = _pair2.inputValue;
               }
             }
           } else {
             // 兼容普通逗号分隔的多选值，例如 a,b,c。
             selectedValues = value.split(',').filter(function (item) {
               return item !== '';
+            }).map(function (item) {
+              return _this3.toOptionKey(item);
             });
           }
         } else if (Array.isArray(value)) {
-          selectedValues = value;
+          selectedValues = value.map(function (item) {
+            return _this3.toOptionKey(item);
+          }).filter(function (item) {
+            return item !== '';
+          });
         }
 
         if (selectedValues.length === 0) {
           // 没有传值时，多选回退到所有默认选中且未禁用的项。
           for (var _i2 = 0; _i2 < options.length; _i2++) {
             if (options[_i2].isDefault) {
-              selectedValues.push(options[_i2].value);
+              selectedValues.push(this.toOptionKey(options[_i2].value));
             }
           }
         }
 
         selectedValues.forEach(function (item) {
           // selectedMap 用来支撑 render 时的 O(1) 勾选判断。
-          selectedMap[item] = true;
+          selectedMap[_this3.toOptionKey(item)] = true;
         });
       }
 
@@ -213,9 +247,10 @@ var SelectInput = function (_React$Component) {
     key: 'getOptionByValue',
     value: function getOptionByValue(value) {
       // 根据 value 找到当前选项元数据，用于判断该选项是否带输入框等属性。
+      var key = this.toOptionKey(value);
       var options = this.state.options;
       for (var i = 0; i < options.length; i++) {
-        if (options[i].value === value) {
+        if (this.toOptionKey(options[i].value) === key) {
           return options[i];
         }
       }
@@ -292,7 +327,7 @@ var SelectInput = function (_React$Component) {
   }, {
     key: 'handleSelectChange',
     value: function handleSelectChange(optionValue, checked) {
-      var _this2 = this;
+      var _this4 = this;
 
       if (this.props.readOnly) {
         return;
@@ -306,7 +341,7 @@ var SelectInput = function (_React$Component) {
           selectedRadio: optionValue
         });
         this.setState(_nextState, function () {
-          _this2.emitValue(_this2.state);
+          _this4.emitValue(_this4.state);
         });
         return;
       }
@@ -326,7 +361,7 @@ var SelectInput = function (_React$Component) {
       });
 
       this.setState(nextState, function () {
-        _this2.emitValue(_this2.state);
+        _this4.emitValue(_this4.state);
       });
     }
   }, {
@@ -361,17 +396,18 @@ var SelectInput = function (_React$Component) {
   }, {
     key: 'renderOptions',
     value: function renderOptions() {
-      var _this3 = this;
+      var _this5 = 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 optionValue = _this5.toOptionKey(option.value);
+        // 单选看 selectedRadio，多选看 selectedMap 是否包含当前 value（统一字符串比较）。
+        var checked = selectType === 'radio' ? _this5.toOptionKey(_this5.state.selectedRadio) === optionValue : !!_this5.state.selectedMap[optionValue];
         var showInput = option.isInput;
+        var fillText = _this5.state.inputValues[optionValue] || '';
         var optionClassName = checked ? 'dd-select-input-option checked' : 'dd-select-input-option';
         var inputDisabled = readOnly || !showInput;
 
@@ -384,7 +420,7 @@ var SelectInput = function (_React$Component) {
             checked: checked,
             disabled: readOnly,
             onChange: function onChange(e) {
-              _this3.handleSelectChange(optionValue, e.target.checked);
+              _this5.handleSelectChange(optionValue, e.target.checked);
             }
           }),
           _react2.default.createElement('span', { className: selectType === 'radio' ? 'dd-select-input-icon radio' : 'dd-select-input-icon checkbox' }),
@@ -393,19 +429,25 @@ var SelectInput = function (_React$Component) {
             { className: 'dd-select-input-option-text' },
             option.text
           ),
-          showInput ? _react2.default.createElement('input', {
+          showInput && !readOnly ? _react2.default.createElement('input', {
             className: 'dd-select-input-text',
             type: 'text',
-            value: _this3.state.inputValues[optionValue] || ''
+            placeholder: option.inputTip || '',
+            value: fillText
             // 输入框只有在当前项已选中且 readOnly=false 时才允许输入。
             , disabled: inputDisabled,
             onChange: function onChange(e) {
-              _this3.handleInputChange(optionValue, e.target.value);
+              _this5.handleInputChange(optionValue, e.target.value);
             },
             onBlur: function onBlur() {
-              _this3.handleInputBlur();
+              _this5.handleInputBlur();
             }
-          }) : null
+          }) : null,
+          showInput && readOnly && fillText ? _react2.default.createElement(
+            'span',
+            { className: 'dd-select-input-text-ro' },
+            fillText
+          ) : null
         );
       });
     }

package/lib/select_input/selectInput.less

@@ -5,7 +5,7 @@
 .dd-select-input-option {
      display: flex;
      align-items: center;
-     margin: 8px 0;
+     margin: 8px 12px 8px 0;
      cursor: pointer;
 }
 
@@ -71,11 +71,12 @@
 
 .dd-select-input-text {
      flex: 1;
-     min-width: 120px;
+     min-width: 48px;
      border: none;
-     border-bottom: 1px solid #ddd;
+     border-bottom: 2px solid #999;
      outline: none;
-     padding: 4px 2px;
+     padding: 4px 5px;
+     margin-left: 6px;
      font-size: 14px;
      background-color: transparent;
 }
@@ -84,4 +85,14 @@
      color: #333;
      border-bottom-color: #eee;
      cursor: not-allowed;
+}
+
+.dd-select-input-text-ro {
+     display: inline-block;
+     margin-left: 8px;
+     padding: 0 5px;
+     min-width: 48px;
+     color: #333;
+     line-height: 1.47;
+     word-break: break-all;
 }

package/package.json

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