fmui-base 2.2.87 → 2.2.89

package/README.md

@@ -3,6 +3,8 @@
 ---npm publish
 
 ## 更新日志 
+- 2.2.89：表单子表支持一行多列显示，并支持扩展
+- 2.2.88：表单关联字段重构
 - 2.2.87：选人组件添加隐藏页签,增加业务建模表单组件
 - 2.2.86: 流程表单按钮超过三个按钮显示更多，修改更多按钮样式，待办保存按钮强制放到更多里面
 - 2.2.85: 北京ca开启电子签章获取ca签名，不受表单加签控制

package/lib/form/form.js

@@ -1594,6 +1594,9 @@ var PageHome = function (_React$Component) {
               $("." + itemParam.fieldId).find(".t-datetime-field-placeholder").attr("style", placeholderStyleStr);
             }
           }
+          if (t.props.dataType === 'sub') {
+            t.applySubFormLabelStyle(itemParam);
+          }
           this.props.onChange(data, itemParam);
         });
       }
@@ -1757,157 +1760,132 @@ var PageHome = function (_React$Component) {
       return '' + (num < 10 ? '0' : '') + num;
     }
 
-    //处理关联字段初始化
+    // 规范化触发字段取值（与 table.jsx 保持一致）
 
   }, {
-    key: 'dealwithRelaField',
-    value: function dealwithRelaField(itemParam, allForm) {
-      console.log("dealwithRelaField===");
-      var formRelaFieldMaps = this.props.formRelaFieldMaps;
-      var defaultmustFields = [];
-      var defaulthideFields = [];
-      var fieldControll = this.props.fieldControll;
-      var hiddenFields = fieldControll.hiddenFields;
-      var mustFieldsStr = fieldControll.mustFields;
-      if (hiddenFields && hiddenFields != '') {
-        for (var i = 0; i < hiddenFields.split(',').length; i++) {
-          if (hiddenFields.split(',')[i] && hiddenFields.split(',')[i] != '') {
-            defaulthideFields.push(hiddenFields.split(',')[i]);
+    key: 'normalizeRelaTriggerValue',
+    value: function normalizeRelaTriggerValue(nowValue) {
+      if (nowValue == null || typeof nowValue == 'undefined') {
+        return "";
+      }
+      if (nowValue && nowValue.indexOf("[") >= 0 && nowValue.indexOf("]") >= 0) {
+        try {
+          var nowValueArray = JSON.parse(nowValue);
+          if (nowValueArray.length == 1) {
+            return nowValueArray[0];
           }
+          return nowValueArray.join(",");
+        } catch (e) {
+          return nowValue;
         }
       }
-      if (mustFieldsStr && mustFieldsStr != '') {
-        for (var i = 0; i < mustFieldsStr.split(',').length; i++) {
-          if (mustFieldsStr.split(',')[i] && mustFieldsStr.split(',')[i] != '') {
-            defaultmustFields.push(mustFieldsStr.split(',')[i]);
+      if (nowValue != '' && (nowValue.indexOf("$#$#") >= 0 || nowValue.indexOf("#$#$") >= 0)) {
+        if (nowValue.indexOf("#$#$") >= 0) {
+          var nowValueList = nowValue.split("#$#$");
+          if (nowValueList.length == 1) {
+            return nowValueList[0].replace("$#$#", "");
           }
+          return nowValueList.map(function (item) {
+            return item.replace("$#$#", "");
+          }).join(",");
         }
+        return nowValue.replace("$#$#", "");
       }
+      return nowValue;
+    }
 
-      if (formRelaFieldMaps) {
-        if (formRelaFieldMaps[itemParam.uniqueName]) {
-          var data = this.props.data;
-          var mainTblData = data.mainTblData;
-          var mainTblName = data.mainTblName;
-          // var subTbl = data.subTbl; 
-          var subTbl = allForm;
-          var formRelaFieldMapsArray = formRelaFieldMaps[itemParam.uniqueName];
-          formRelaFieldMapsArray.map(function (item) {
-            if (item.triggerTblName == mainTblName) {
-              mainTblData.map(function (mainTblDataItem) {
-                if (item.triggerFieldName == mainTblDataItem.key) {
-                  var nowValue = mainTblDataItem.value ? mainTblDataItem.value : "";
-                  if (nowValue && nowValue.indexOf("[") >= 0 && nowValue.indexOf("]") >= 0) {
-                    var nowValueArray = JSON.parse(nowValue);
-                    if (nowValueArray.length == 1) {
-                      nowValue = nowValueArray[0];
-                    } else {
-                      nowValue = nowValueArray.join(",");
-                    }
-                  }
-                  // if(item.triggerFieldVal == mainTblDataItem.value){
-                  var editType = item.editType;
-                  if (editType == 'hide' || editType == 'rowhide') {
-                    // relaFieldMap["key"]="isHidden";
-                    if (item.triggerFieldVal == nowValue || nowValue.split(',').indexOf(item.triggerFieldVal) != -1) {
-                      itemParam.isHidden = true;
-                      defaulthideFields.push(itemParam.uniqueName);
-                      console.log("true====" + itemParam.uniqueName);
-                    } else if (defaulthideFields.indexOf(itemParam.uniqueName) != -1) {
-                      itemParam.isHidden = true;
-                    } else {
-                      console.log("false====" + itemParam.uniqueName);
-                      itemParam.isHidden = false;
-                    }
-                  } else if (editType == 'must') {
-                    // relaFieldMap["key"]="required";
-                    var triggerFieldValBoolean = false;
-                    if (item.triggerFieldVal == nowValue || nowValue.split(',').indexOf(item.triggerFieldVal) != -1) {
-                      itemParam.required = true;
-                      triggerFieldValBoolean = true;
-                    } else {
-                      itemParam.required = false;
-                      triggerFieldValBoolean = false;
-                    }
-                    // var relaFieldNameArray = formRelaFieldMapsObjItem.relaFieldName.split(",");
-                    // mainTblData.map(function(item){
-                    //   if(item.key==relaFieldNameArray[index]){
-                    //     item.required = triggerFieldValBoolean;
-                    //   }
-                    // });
-                    if (item.relaFieldName == mainTblDataItem.key) {
-                      mainTblDataItem.required = triggerFieldValBoolean;
-                    }
-                  } else if (editType == 'edit') {
-                    if (item.triggerFieldVal == nowValue || nowValue.split(',').indexOf(item.triggerFieldVal) != -1) {
-                      itemParam.readOnly = false;
-                    } else {
-                      itemParam.readOnly = true;
-                    }
-                  }
-                  // }
-                }
-              });
-            } else {
-              var subTbls = subTbl.item;
-              subTbls.map(function (subTblItem) {
-                if (subTbl.tblName == item.triggerTblName) {
-                  var subTblData = subTblItem;
-                  subTblData.map(function (mainTblDataItem) {
-                    if (item.triggerFieldName == mainTblDataItem.itemCode) {
-                      // if(item.triggerFieldVal == mainTblDataItem.value){
-                      var nowValue = mainTblDataItem.value ? mainTblDataItem.value : "";
-                      if (nowValue && nowValue.indexOf("[") >= 0 && nowValue.indexOf("]") >= 0) {
-                        var nowValueArray = JSON.parse(nowValue);
-                        if (nowValueArray.length == 1) {
-                          nowValue = nowValueArray[0];
-                        } else {
-                          nowValue = nowValueArray.join(",");
-                        }
-                      }
+    // 读取触发字段当前值
 
-                      var editType = item.editType;
-                      if (editType == 'hide' || editType == 'rowhide') {
-                        // relaFieldMap["key"]="isHidden";
-                        if (item.triggerFieldVal == nowValue || nowValue.split(',').indexOf(item.triggerFieldVal) != -1) {
-                          itemParam.isHidden = true;
-                        } else {
-                          itemParam.isHidden = false;
-                        }
-                      } else if (editType == 'must') {
-                        // relaFieldMap["key"]="required";
-                        var triggerFieldValBoolean = false;
-                        if (item.triggerFieldVal == nowValue || nowValue.split(',').indexOf(item.triggerFieldVal) != -1) {
-                          itemParam.required = true;
-                          triggerFieldValBoolean = true;
-                        } else {
-                          itemParam.required = false;
-                          triggerFieldValBoolean = false;
-                        }
-                        // var relaFieldNameArray = formRelaFieldMapsObjItem.relaFieldName.split(",");
-                        // mainTblData.map(function(item){
-                        //   if(item.key==relaFieldNameArray[index]){
-                        //     item.required = triggerFieldValBoolean;
-                        //   }
-                        // });
-                        if (item.relaFieldName == mainTblDataItem.itemCode) {
-                          mainTblDataItem.required = triggerFieldValBoolean;
-                        }
-                      } else if (editType == 'edit') {
-                        if (item.triggerFieldVal == nowValue || nowValue.split(',').indexOf(item.triggerFieldVal) != -1) {
-                          itemParam.readOnly = false;
-                        } else {
-                          itemParam.readOnly = true;
-                        }
-                      }
-                      // }
-                    }
-                  });
-                }
-              });
-            }
-          });
+  }, {
+    key: 'getRelaTriggerFieldValue',
+    value: function getRelaTriggerFieldValue(rule, data, allForm) {
+      var nowValue = "";
+      var mainTblData = data.mainTblData || [];
+      var mainTblName = data.mainTblName;
+      if (rule.triggerTblName == mainTblName) {
+        for (var i = 0; i < mainTblData.length; i++) {
+          if (mainTblData[i].key == rule.triggerFieldName) {
+            nowValue = mainTblData[i].value ? mainTblData[i].value : "";
+            break;
+          }
+        }
+      } else if (allForm && allForm.item) {
+        allForm.item.map(function (subTblItem) {
+          if (allForm.tblName == rule.triggerTblName && subTblItem) {
+            subTblItem.map(function (subField) {
+              if (subField.itemCode == rule.triggerFieldName) {
+                nowValue = subField.value ? subField.value : "";
+              }
+            });
+          }
+        });
+      }
+      return this.normalizeRelaTriggerValue(nowValue);
+    }
+  }, {
+    key: 'isRelaRuleMatched',
+    value: function isRelaRuleMatched(rule, nowValue) {
+      var triggerFieldVal = rule.triggerFieldVal;
+      if (triggerFieldVal == " ") {
+        triggerFieldVal = "";
+      }
+      if (triggerFieldVal === '') {
+        return true;
+      }
+      return triggerFieldVal == nowValue || nowValue.split(',').indexOf(triggerFieldVal) != -1;
+    }
+
+    //处理关联字段初始化（按 relaFieldsMap 全局顺序，后写入覆盖先写入，与配置页优先级一致）
+
+  }, {
+    key: 'dealwithRelaField',
+    value: function dealwithRelaField(itemParam, allForm) {
+      var formRelaFieldMaps = this.props.formRelaFieldMaps;
+      if (!formRelaFieldMaps || !formRelaFieldMaps[itemParam.uniqueName]) {
+        return itemParam;
+      }
+      var data = this.props.data;
+      var formRelaFieldMapsArray = formRelaFieldMaps[itemParam.uniqueName];
+      var fieldControll = this.props.fieldControll || {};
+      var defaulthideFields = [];
+      if (fieldControll.hiddenFields) {
+        fieldControll.hiddenFields.split(',').forEach(function (f) {
+          if (f) {
+            defaulthideFields.push(f);
+          }
+        });
+      }
+      if (defaulthideFields.indexOf(itemParam.uniqueName) != -1) {
+        itemParam.isHidden = true;
+      }
+
+      formRelaFieldMapsArray.forEach(function (rule) {
+        var nowValue = this.getRelaTriggerFieldValue(rule, data, allForm);
+        var matched = this.isRelaRuleMatched(rule, nowValue);
+        var editType = rule.editType;
+        if (editType == 'hide' || editType == 'rowhide') {
+          if (matched) {
+            itemParam.isHidden = true;
+          } else if (defaulthideFields.indexOf(itemParam.uniqueName) == -1) {
+            itemParam.isHidden = false;
+          }
+        } else if (editType == 'must') {
+          if (matched) {
+            itemParam.required = true;
+          } else {
+            itemParam.required = false;
+          }
+        } else if (editType == 'edit') {
+          if (matched) {
+            itemParam.readOnly = false;
+          } else if (nowValue != '') {
+            itemParam.readOnly = true;
+          }
         }
+      }.bind(this));
+
+      if (itemParam.isHidden) {
+        itemParam.required = false;
       }
       return itemParam;
     }
@@ -1935,13 +1913,59 @@ var PageHome = function (_React$Component) {
     value: function componentDidMount() {
       this.loadComponet();
     }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      if (this.props.dataType === 'sub' && this.state.loaded && this.state.itemParam && this.state.itemParam.fieldId) {
+        this.applySubFormLabelStyle(this.state.itemParam);
+      }
+    }
+
+    // 子表标签：单列保留主表边距，仅同步字号颜色；多列去掉 label 左边距
+
+  }, {
+    key: 'applySubFormLabelStyle',
+    value: function applySubFormLabelStyle(itemParam) {
+      if (!itemParam || !itemParam.fieldId || typeof $ === 'undefined') {
+        return;
+      }
+      var subColumnCount = parseInt(this.props.subColumnCount, 10);
+      var isSubFormMultiCol = this.props.dataType === 'sub' && !isNaN(subColumnCount) && subColumnCount > 1;
+      var ts = itemParam.formStyleObj && itemParam.formStyleObj.titleStyle ? itemParam.formStyleObj.titleStyle : {};
+      var styleStr = 'font-size:14px;line-height:24px;color:rgb(51, 51, 51);font-weight:bold;';
+      if (ts.fontSize) {
+        styleStr += 'font-size:' + ts.fontSize + ';';
+      }
+      if (ts.color) {
+        styleStr = styleStr.replace(/color:[^;]+;?/, '') + 'color:' + ts.color + ';';
+      }
+      if (ts.fontFamily) {
+        styleStr += 'font-family:' + ts.fontFamily + ';';
+      }
+      if (ts.fontWeight) {
+        styleStr += 'font-weight:' + ts.fontWeight + ';';
+      }
+      if (ts.fontStyle) {
+        styleStr += 'font-style:' + ts.fontStyle + ';';
+      }
+      if (isSubFormMultiCol) {
+        styleStr += 'margin-left:0;padding-left:0;padding-right:0;';
+      }
+      var $root = $('.' + itemParam.fieldId);
+      $root.find('.t-field-layout-v-label-left').attr('style', styleStr);
+      $root.find('.t-field-layout-h-label').attr('style', styleStr);
+      if (isSubFormMultiCol) {
+        $root.find('.t-field-layout-v-label').attr('style', styleStr);
+      }
+    }
 
-    //重新加载组件
+    //重新加载组件；options.silent=true 时不向上触发 onChange（用于字段关联批量刷新，避免死循环）
 
   }, {
     key: 'reloadItemParam',
-    value: function reloadItemParam(itemNew) {
+    value: function reloadItemParam(itemNew, options) {
       var dataType = this.state.dataType;
+      var silent = options && options.silent === true;
 
       if (itemNew != null && itemNew != undefined && Array.isArray(itemNew)) {
         var itemParam = this.state.itemParam;
@@ -2009,7 +2033,14 @@ var PageHome = function (_React$Component) {
           if (itemParam.itemType == 'popuser') {
             this.refs['selectMember_' + itemParam.key].initSelectData();
           }
-          this.props.onChange(this.props.data, itemParam);
+          // 静默刷新时仍需同步 mainTblData.required，否则提交校验不生效
+          if (silent && this.props.data) {
+            var formData = this.props.data;
+            this.dealwithData(itemParam, formData.mainTblData || [], formData.relatedTbl || []);
+          }
+          if (!silent && this.props.onChange) {
+            this.props.onChange(this.props.data, itemParam);
+          }
         });
       }
     }
@@ -3600,9 +3631,16 @@ var PageHome = function (_React$Component) {
         //   itemParam:itemParam
         // })
       }
+      var subColumnCount = parseInt(t.props.subColumnCount, 10);
+      var isSubFormMultiCol = t.props.dataType === 'sub' && !isNaN(subColumnCount) && subColumnCount > 1;
+      var subFormFieldLayout = isSubFormMultiCol ? 'v' : 'h';
+      var rootClassName = this.state.itemParam.isHidden ? 't-DN' : '';
+      if (isSubFormMultiCol) {
+        rootClassName = (rootClassName ? rootClassName + ' ' : '') + 'subform-col-field';
+      }
       return _react2.default.createElement(
         'div',
-        { className: this.state.itemParam.isHidden ? "t-DN" : "" },
+        { className: rootClassName },
         this.state.itemParam.itemType == 'text' ? _react2.default.createElement(
           _Group2.default.List,
           { borderTopNone: true },
@@ -3630,6 +3668,7 @@ var PageHome = function (_React$Component) {
               { className: 't-FBH', id: t.state.prefixName + "_" + t.state.itemParam.key },
               _react2.default.createElement(_TextareaField2.default, {
                 className: 't-W100',
+                layout: subFormFieldLayout,
                 required: t.state.itemParam.required,
                 label: t.state.itemParam.title,
                 readOnly: t.state.itemParam.readOnly,
@@ -3648,9 +3687,10 @@ var PageHome = function (_React$Component) {
             { className: t.state.itemParam.fieldId, style: t.state.itemParam.formStyleObj.contentStyle == null ? {} : t.state.itemParam.formStyleObj.contentStyle },
             _react2.default.createElement(
               'div',
-              { className: 't-FBH', id: t.state.prefixName + "_" + t.state.itemParam.key },
+              { className: isSubFormMultiCol ? '' : 't-FBH', id: t.state.prefixName + "_" + t.state.itemParam.key },
               _react2.default.createElement(_TextField2.default, {
                 className: 't-W100',
+                layout: subFormFieldLayout,
                 required: t.state.itemParam.required,
                 readOnly: t.state.itemParam.readOnly,
                 label: t.state.itemParam.title,
@@ -3846,9 +3886,10 @@ var PageHome = function (_React$Component) {
             { borderTopNone: true },
             _react2.default.createElement(
               'div',
-              { className: 't-FBH', id: t.state.prefixName + "_" + t.state.itemParam.key },
+              { className: isSubFormMultiCol ? '' : 't-FBH', id: t.state.prefixName + "_" + t.state.itemParam.key },
               _react2.default.createElement(_SelectField2.default, {
                 className: 't-W100',
+                layout: subFormFieldLayout,
                 required: t.state.itemParam.required,
                 label: t.state.itemParam.title,
                 readOnly: t.state.itemParam.readOnly,
@@ -3869,9 +3910,10 @@ var PageHome = function (_React$Component) {
             { borderTopNone: true },
             _react2.default.createElement(
               'div',
-              { id: t.state.prefixName + "_" + t.state.itemParam.key, className: t.state.itemParam.dateFormat == "DateInterval" ? "" : "t-FBH" },
+              { id: t.state.prefixName + "_" + t.state.itemParam.key, className: t.state.itemParam.dateFormat == "DateInterval" ? "" : isSubFormMultiCol ? "" : "t-FBH" },
               t.state.itemParam.readOnly ? _react2.default.createElement(_TextareaField2.default, {
                 className: 't-W100',
+                layout: subFormFieldLayout,
                 required: t.state.itemParam.required,
                 label: t.state.itemParam.title,
                 readOnly: t.state.itemParam.readOnly,
@@ -3900,6 +3942,8 @@ var PageHome = function (_React$Component) {
                 , onOk: t.handleChangeDate.bind(t, t.state.itemParam.key)
               }) : _react2.default.createElement(_DatetimeField2.default, {
                 className: 't-W100',
+                layout: subFormFieldLayout,
+                multiLine: isSubFormMultiCol,
                 label: t.state.itemParam.title,
                 required: t.state.itemParam.required,
                 readOnly: t.state.itemParam.readOnly,