wargerm 0.2.8 → 0.2.12

package/dist/components/WForm/index.d.ts

@@ -47,9 +47,11 @@ export interface WFormProps extends FormProps {
     className?: string;
     style?: React.CSSProperties;
     columns: ColumnProps[];
+    extraColumns?: ColumnProps[];
     disabled?: boolean;
     disabledHideInSearch?: boolean;
     onSubmit?: (params: Record<string, any>) => void;
+    onFormChange?: (changedValues: Record<string, any>, allValues: Record<string, any>, form: any) => void;
     onReset?: () => void;
     formRef?: MutableRefObject<FormInstance>;
     search?: Isearch | false;

package/dist/index.esm.js

@@ -7532,16 +7532,18 @@ Table.defaultProps = {
   rowKey: 'key'
 };
 
-var _excluded$5 = ["columns", "className", "style", "search", "disabled", "disabledHideInSearch", "onSubmit", "onReset"];
+var _excluded$5 = ["columns", "extraColumns", "className", "style", "search", "disabled", "disabledHideInSearch", "onFormChange", "onSubmit", "onReset"];
 var RangePicker$2 = Index$2.RangePicker;
 
 var WForm = function WForm(props, ref) {
   var columns = props.columns,
+      extraColumns = props.extraColumns,
       className = props.className,
       style = props.style,
       search = props.search,
       disabled = props.disabled,
       disabledHideInSearch = props.disabledHideInSearch,
+      onFormChange = props.onFormChange,
       onSubmit = props.onSubmit,
       onReset = props.onReset,
       extraProps = _objectWithoutProperties(props, _excluded$5);
@@ -7560,11 +7562,18 @@ var WForm = function WForm(props, ref) {
       columnsFields = _useState4[0],
       setColumnsFields = _useState4[1];
 
-  var filterFormColumns = columns.filter(function (c) {
+  var filterFormColumns = _toConsumableArray(columns).filter(function (c) {
     return !c.hideInSearch || disabledHideInSearch;
   }).sort(function (a, b) {
     return (b.order || 0) - (a.order || 0);
   });
+
+  var filterExtraFormColumns = _toConsumableArray(extraColumns || []).filter(function (c) {
+    return !c.hideInSearch || disabledHideInSearch;
+  }).sort(function (a, b) {
+    return (b.order || 0) - (a.order || 0);
+  });
+
   var filterForm = useMemo(function () {
     return filterFormColumns.map(function (c) {
       var colProps = {};
@@ -7916,7 +7925,8 @@ var WForm = function WForm(props, ref) {
 
         var baseitem = c.renderFormItem(c, _objectSpread2(_objectSpread2({}, c), {}, {
           formItemProps: c.formItemProps,
-          fieldProps: c.fieldProps
+          fieldProps: c.fieldProps,
+          columnsFields: columnsFields
         }), form);
         return baseitem ? /*#__PURE__*/React.createElement(_Col, _objectSpread2(_objectSpread2({
           style: {
@@ -8013,7 +8023,457 @@ var WForm = function WForm(props, ref) {
         }, c.fieldProps))));
       }
     });
-  }, [changedValues, disabled, JSON.stringify(form.getFieldsValue())]);
+  }, [changedValues, columns, disabled, JSON.stringify(form.getFieldsValue())]);
+  var filterExtraColumnsForm = useMemo(function () {
+    return filterExtraFormColumns.map(function (c) {
+      var colProps = {};
+
+      if (search && search.span) {
+        colProps.span = typeof search.span == 'number' ? (c.colSize || 1) * search.span : {
+          xs: 24,
+          sm: 24,
+          md: 12,
+          lg: 12,
+          xl: 8,
+          xxl: 6
+        };
+      }
+
+      if (c.valueType == 'select') {
+        var _extraProps3 = {};
+
+        if (c.request) {
+          _extraProps3.request = c.request;
+        } else if (c.valueEnum) {
+          _extraProps3.valueEnum = c.valueEnum;
+        }
+
+        var labelCol = {};
+
+        if (search && search.labelWidth) {
+          labelCol.style = {
+            width: search.labelWidth
+          };
+        }
+
+        return /*#__PURE__*/React.createElement(_Col, _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React.createElement(_Form.Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: labelCol
+        }), /*#__PURE__*/React.createElement(Index$1, _objectSpread2(_objectSpread2({
+          placeholder: "\u8BF7\u9009\u62E9",
+          disabled: disabled,
+          onLoad: function onLoad(opt) {
+            setColumnsFields(function (preColumnsFields) {
+              return _objectSpread2(_objectSpread2({}, preColumnsFields), {}, _defineProperty({}, c.dataIndex, opt));
+            });
+          }
+        }, c.fieldProps), _extraProps3))));
+      } else if (c.valueType == 'treeSelect') {
+        var _extraProps4 = {};
+
+        if (c.request) {
+          _extraProps4.request = c.request;
+        }
+
+        var _labelCol12 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol12.style = {
+            width: search.labelWidth
+          };
+        }
+
+        return /*#__PURE__*/React.createElement(_Col, _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React.createElement(_Form.Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol12
+        }), /*#__PURE__*/React.createElement(Index$5, _objectSpread2(_objectSpread2({
+          disabled: disabled,
+          placeholder: "\u8BF7\u9009\u62E9",
+          onLoad: function onLoad(opt) {}
+        }, c.fieldProps), _extraProps4))));
+      } else if (c.valueType && ['date', 'dateTime', 'dateMonth', 'dateYear'].includes(c.valueType)) {
+        var _labelCol13 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol13.style = {
+            width: search.labelWidth
+          };
+        }
+
+        var showTime = {};
+        var picker = {};
+
+        if (c.valueType == 'dateTime') {
+          showTime = {
+            showTime: {
+              format: 'HH:mm'
+            }
+          };
+        }
+
+        if (c.valueType == 'dateMonth') {
+          picker = {
+            picker: 'month'
+          };
+        }
+
+        if (c.valueType == 'dateYear') {
+          picker = {
+            picker: 'year'
+          };
+        }
+
+        return /*#__PURE__*/React.createElement(_Col, _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React.createElement(_Form.Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol13
+        }), /*#__PURE__*/React.createElement(Index$2, _objectSpread2(_objectSpread2(_objectSpread2({
+          disabled: disabled,
+          placeholder: "\u8BF7\u8F93\u5165"
+        }, picker), showTime), c.fieldProps))));
+      } else if (c.valueType === 'dateRange' || c.valueType === 'dateTimeRange') {
+        var _labelCol14 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol14.style = {
+            width: search.labelWidth
+          };
+        }
+
+        var _showTime2 = {};
+
+        if (c.valueType == 'dateTimeRange') {
+          _showTime2 = {
+            showTime: {
+              format: 'HH:mm'
+            }
+          };
+        }
+
+        return /*#__PURE__*/React.createElement(_Col, _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React.createElement(_Form.Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol14
+        }), /*#__PURE__*/React.createElement(RangePicker$2, _objectSpread2(_objectSpread2({
+          disabled: disabled
+        }, _showTime2), c.fieldProps))));
+      } else if (c.valueType === 'checkbox') {
+        var options = [];
+
+        if (c.valueEnum) {
+          for (var key in c.valueEnum) {
+            var text = c.valueEnum[key].text;
+            options.push({
+              label: text,
+              value: key
+            });
+          }
+        }
+
+        if (c.options) {
+          options = c.options;
+        }
+
+        setColumnsFields(function (preColumnsFields) {
+          return _objectSpread2(_objectSpread2({}, preColumnsFields), {}, _defineProperty({}, c.dataIndex, options));
+        });
+        var _labelCol15 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol15.style = {
+            width: search.labelWidth
+          };
+        }
+
+        return /*#__PURE__*/React.createElement(_Col, _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React.createElement(_Form.Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol15
+        }), /*#__PURE__*/React.createElement(Index$4.Group, _objectSpread2({
+          disabled: disabled,
+          options: options
+        }, c.fieldProps))));
+      } else if (c.valueType === 'radio' || c.valueType === 'radioButton') {
+        var _options3 = [];
+
+        if (c.options) {
+          _options3 = c.options;
+        }
+
+        if (c.valueEnum) {
+          for (var _key3 in c.valueEnum) {
+            var _text3 = c.valueEnum[_key3].text;
+
+            _options3.push({
+              label: _text3,
+              value: _key3
+            });
+          }
+        }
+
+        setColumnsFields(function (preColumnsFields) {
+          return _objectSpread2(_objectSpread2({}, preColumnsFields), {}, _defineProperty({}, c.dataIndex, _options3));
+        });
+        var _labelCol16 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol16.style = {
+            width: search.labelWidth
+          };
+        }
+
+        var radioButtonProps = {};
+
+        if (c.valueType === 'radioButton') {
+          radioButtonProps = {
+            optionType: 'button',
+            buttonStyle: 'solid'
+          };
+        }
+
+        return /*#__PURE__*/React.createElement(_Col, _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React.createElement(_Form.Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol16
+        }), /*#__PURE__*/React.createElement(Index$3.Group, _objectSpread2(_objectSpread2({
+          disabled: disabled
+        }, radioButtonProps), {}, {
+          options: _options3
+        }, c.fieldProps))));
+      } else if (c.valueType === 'switch') {
+        var _options4 = [];
+
+        if (c.valueEnum) {
+          for (var _key4 in c.valueEnum) {
+            var _text4 = c.valueEnum[_key4].text;
+
+            _options4.push({
+              label: _text4,
+              value: _key4
+            });
+          }
+        }
+
+        var _labelCol17 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol17.style = {
+            width: search.labelWidth
+          };
+        }
+
+        setColumnsFields(function (preColumnsFields) {
+          return _objectSpread2(_objectSpread2({}, preColumnsFields), {}, _defineProperty({}, c.dataIndex, _options4));
+        });
+        return /*#__PURE__*/React.createElement(_Col, _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React.createElement(_Form.Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue,
+          valuePropName: "checked"
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol17
+        }), /*#__PURE__*/React.createElement(WSwitch, _objectSpread2({
+          disabled: disabled
+        }, c.fieldProps))));
+      } else if (c.valueType === 'digit') {
+        var _labelCol18 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol18.style = {
+            width: search.labelWidth
+          };
+        }
+
+        return /*#__PURE__*/React.createElement(_Col, _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React.createElement(_Form.Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol18
+        }), /*#__PURE__*/React.createElement(NumericInput, _objectSpread2({
+          disabled: disabled,
+          placeholder: "\u8BF7\u8F93\u5165\u53C2\u6570(double/int)"
+        }, c.fieldProps))));
+      } else if (c.renderFormItem) {
+        var _labelCol19 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol19.style = {
+            width: search.labelWidth
+          };
+        }
+
+        var baseitem = c.renderFormItem(c, _objectSpread2(_objectSpread2({}, c), {}, {
+          formItemProps: c.formItemProps,
+          fieldProps: c.fieldProps,
+          columnsFields: columnsFields
+        }), form);
+        return baseitem ? /*#__PURE__*/React.createElement(_Col, _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React.createElement(_Form.Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol19
+        }), baseitem)) : null;
+      } else if (c.valueType === 'textarea') {
+        var _labelCol20 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol20.style = {
+            width: search.labelWidth
+          };
+        }
+
+        return /*#__PURE__*/React.createElement(_Col, _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React.createElement(_Form.Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol20
+        }), /*#__PURE__*/React.createElement(Index.TextArea, _objectSpread2({
+          rows: 4,
+          disabled: disabled,
+          placeholder: "\u8BF7\u8F93\u5165"
+        }, c.fieldProps))));
+      } else if (c.valueType === 'inputNumber') {
+        var _labelCol21 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol21.style = {
+            width: search.labelWidth
+          };
+        }
+
+        return /*#__PURE__*/React.createElement(_Col, _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React.createElement(_Form.Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol21
+        }), /*#__PURE__*/React.createElement(WInputNumber, _objectSpread2({
+          disabled: disabled,
+          placeholder: "\u8BF7\u8F93\u5165"
+        }, c.fieldProps))));
+      } else {
+        var _labelCol22 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol22.style = {
+            width: search.labelWidth
+          };
+        }
+
+        return /*#__PURE__*/React.createElement(_Col, _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React.createElement(_Form.Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol22
+        }), /*#__PURE__*/React.createElement(Index, _objectSpread2({
+          disabled: disabled,
+          placeholder: "\u8BF7\u8F93\u5165"
+        }, c.fieldProps))));
+      }
+    });
+  }, [changedValues, extraColumns, disabled, JSON.stringify(form.getFieldsValue())]);
 
   var handleSearch = function handleSearch(v) {
     var searchForm = form.getFieldsValue();
@@ -8082,10 +8542,11 @@ var WForm = function WForm(props, ref) {
     },
     onFinish: handleSearch,
     onValuesChange: function onValuesChange(changedValues, allValues) {
+      onFormChange && onFormChange(changedValues, allValues, form);
       setchangedValues(changedValues);
     },
     form: form
-  }, extraProps), /*#__PURE__*/React.createElement(_Row, null, filterForm), search && search.hideSubmit ? null : /*#__PURE__*/React.createElement(_Row, {
+  }, extraProps), /*#__PURE__*/React.createElement(_Row, null, filterForm), /*#__PURE__*/React.createElement(_Row, null, filterExtraColumnsForm), search && search.hideSubmit ? null : /*#__PURE__*/React.createElement(_Row, {
     justify: "end"
   }, /*#__PURE__*/React.createElement(_Col, {
     style: {
@@ -9413,10 +9874,11 @@ Modal.hidden = function () {
   ModalContainer[modelSysbol] && ModalContainer[modelSysbol].hidden();
 };
 
-var _excluded$d = ["columns", "search", "visible", "setVisible", "disabled", "submitMethod", "onSubmitSuccess", "title", "record"];
+var _excluded$d = ["columns", "extraColumns", "search", "visible", "setVisible", "disabled", "submitMethod", "onSubmitSuccess", "title", "record", "onFormChange"];
 
 var ModalForm = function ModalForm(props, ref) {
   var columns = props.columns,
+      extraColumns = props.extraColumns,
       search = props.search,
       visible = props.visible,
       setVisible = props.setVisible,
@@ -9425,6 +9887,7 @@ var ModalForm = function ModalForm(props, ref) {
       onSubmitSuccess = props.onSubmitSuccess,
       title = props.title,
       record = props.record,
+      onFormChange = props.onFormChange,
       extraProps = _objectWithoutProperties(props, _excluded$d);
 
   var formRef = useRef(null);
@@ -9546,24 +10009,28 @@ var ModalForm = function ModalForm(props, ref) {
     ref: formRef,
     disabled: disabled,
     onSubmit: onSubmit,
+    onFormChange: onFormChange,
     disabledHideInSearch: true,
     search: search,
-    columns: columns
+    columns: columns,
+    extraColumns: extraColumns
   }));
 };
 
 var ModalForm$1 = /*#__PURE__*/React.forwardRef(ModalForm);
 
-var _excluded$e = ["columns", "request", "modalFormSearch", "tableAction", "renderTableBar", "className", "style", "modalConfig", "optionColumnConfig"];
+var _excluded$e = ["columns", "extraColumns", "request", "modalFormSearch", "tableAction", "renderTableBar", "className", "style", "onFormChange", "modalConfig", "optionColumnConfig"];
 
 var TabelCard = function TabelCard(props, ref) {
   var columns = props.columns,
+      extraColumns = props.extraColumns,
       request = props.request,
       modalFormSearch = props.modalFormSearch,
       tableAction = props.tableAction,
       renderTableBar = props.renderTableBar,
       className = props.className,
       style = props.style,
+      onFormChange = props.onFormChange,
       modalConfig = props.modalConfig,
       optionColumnConfig = props.optionColumnConfig,
       extraProps = _objectWithoutProperties(props, _excluded$e);
@@ -9582,7 +10049,10 @@ var TabelCard = function TabelCard(props, ref) {
       setModalFormConfig = _useState4[1];
 
   useImperativeHandle(ref, function () {
-    return {};
+    return {
+      actionRef: actionRef.current,
+      formRef: formRef.current
+    };
   });
 
   var openFormModel = function openFormModel(options) {
@@ -9850,6 +10320,8 @@ var TabelCard = function TabelCard(props, ref) {
     }(),
     search: modalFormSearch
   }, modalConfig), {}, {
+    onFormChange: onFormChange,
+    extraColumns: extraColumns || [],
     columns: (columns || []).filter(function (item) {
       return !item.hiddenInModalForm;
     })

package/dist/index.js

@@ -7565,16 +7565,18 @@ Table.defaultProps = {
   rowKey: 'key'
 };
 
-var _excluded$5 = ["columns", "className", "style", "search", "disabled", "disabledHideInSearch", "onSubmit", "onReset"];
+var _excluded$5 = ["columns", "extraColumns", "className", "style", "search", "disabled", "disabledHideInSearch", "onFormChange", "onSubmit", "onReset"];
 var RangePicker$2 = Index$2.RangePicker;
 
 var WForm = function WForm(props, ref) {
   var columns = props.columns,
+      extraColumns = props.extraColumns,
       className = props.className,
       style = props.style,
       search = props.search,
       disabled = props.disabled,
       disabledHideInSearch = props.disabledHideInSearch,
+      onFormChange = props.onFormChange,
       onSubmit = props.onSubmit,
       onReset = props.onReset,
       extraProps = _objectWithoutProperties(props, _excluded$5);
@@ -7593,11 +7595,18 @@ var WForm = function WForm(props, ref) {
       columnsFields = _useState4[0],
       setColumnsFields = _useState4[1];
 
-  var filterFormColumns = columns.filter(function (c) {
+  var filterFormColumns = _toConsumableArray(columns).filter(function (c) {
     return !c.hideInSearch || disabledHideInSearch;
   }).sort(function (a, b) {
     return (b.order || 0) - (a.order || 0);
   });
+
+  var filterExtraFormColumns = _toConsumableArray(extraColumns || []).filter(function (c) {
+    return !c.hideInSearch || disabledHideInSearch;
+  }).sort(function (a, b) {
+    return (b.order || 0) - (a.order || 0);
+  });
+
   var filterForm = React.useMemo(function () {
     return filterFormColumns.map(function (c) {
       var colProps = {};
@@ -7949,7 +7958,8 @@ var WForm = function WForm(props, ref) {
 
         var baseitem = c.renderFormItem(c, _objectSpread2(_objectSpread2({}, c), {}, {
           formItemProps: c.formItemProps,
-          fieldProps: c.fieldProps
+          fieldProps: c.fieldProps,
+          columnsFields: columnsFields
         }), form);
         return baseitem ? /*#__PURE__*/React__default['default'].createElement(_Col__default['default'], _objectSpread2(_objectSpread2({
           style: {
@@ -8046,7 +8056,457 @@ var WForm = function WForm(props, ref) {
         }, c.fieldProps))));
       }
     });
-  }, [changedValues, disabled, JSON.stringify(form.getFieldsValue())]);
+  }, [changedValues, columns, disabled, JSON.stringify(form.getFieldsValue())]);
+  var filterExtraColumnsForm = React.useMemo(function () {
+    return filterExtraFormColumns.map(function (c) {
+      var colProps = {};
+
+      if (search && search.span) {
+        colProps.span = typeof search.span == 'number' ? (c.colSize || 1) * search.span : {
+          xs: 24,
+          sm: 24,
+          md: 12,
+          lg: 12,
+          xl: 8,
+          xxl: 6
+        };
+      }
+
+      if (c.valueType == 'select') {
+        var _extraProps3 = {};
+
+        if (c.request) {
+          _extraProps3.request = c.request;
+        } else if (c.valueEnum) {
+          _extraProps3.valueEnum = c.valueEnum;
+        }
+
+        var labelCol = {};
+
+        if (search && search.labelWidth) {
+          labelCol.style = {
+            width: search.labelWidth
+          };
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement(_Col__default['default'], _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React__default['default'].createElement(_Form__default['default'].Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: labelCol
+        }), /*#__PURE__*/React__default['default'].createElement(Index$1, _objectSpread2(_objectSpread2({
+          placeholder: "\u8BF7\u9009\u62E9",
+          disabled: disabled,
+          onLoad: function onLoad(opt) {
+            setColumnsFields(function (preColumnsFields) {
+              return _objectSpread2(_objectSpread2({}, preColumnsFields), {}, _defineProperty({}, c.dataIndex, opt));
+            });
+          }
+        }, c.fieldProps), _extraProps3))));
+      } else if (c.valueType == 'treeSelect') {
+        var _extraProps4 = {};
+
+        if (c.request) {
+          _extraProps4.request = c.request;
+        }
+
+        var _labelCol12 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol12.style = {
+            width: search.labelWidth
+          };
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement(_Col__default['default'], _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React__default['default'].createElement(_Form__default['default'].Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol12
+        }), /*#__PURE__*/React__default['default'].createElement(Index$5, _objectSpread2(_objectSpread2({
+          disabled: disabled,
+          placeholder: "\u8BF7\u9009\u62E9",
+          onLoad: function onLoad(opt) {}
+        }, c.fieldProps), _extraProps4))));
+      } else if (c.valueType && ['date', 'dateTime', 'dateMonth', 'dateYear'].includes(c.valueType)) {
+        var _labelCol13 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol13.style = {
+            width: search.labelWidth
+          };
+        }
+
+        var showTime = {};
+        var picker = {};
+
+        if (c.valueType == 'dateTime') {
+          showTime = {
+            showTime: {
+              format: 'HH:mm'
+            }
+          };
+        }
+
+        if (c.valueType == 'dateMonth') {
+          picker = {
+            picker: 'month'
+          };
+        }
+
+        if (c.valueType == 'dateYear') {
+          picker = {
+            picker: 'year'
+          };
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement(_Col__default['default'], _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React__default['default'].createElement(_Form__default['default'].Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol13
+        }), /*#__PURE__*/React__default['default'].createElement(Index$2, _objectSpread2(_objectSpread2(_objectSpread2({
+          disabled: disabled,
+          placeholder: "\u8BF7\u8F93\u5165"
+        }, picker), showTime), c.fieldProps))));
+      } else if (c.valueType === 'dateRange' || c.valueType === 'dateTimeRange') {
+        var _labelCol14 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol14.style = {
+            width: search.labelWidth
+          };
+        }
+
+        var _showTime2 = {};
+
+        if (c.valueType == 'dateTimeRange') {
+          _showTime2 = {
+            showTime: {
+              format: 'HH:mm'
+            }
+          };
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement(_Col__default['default'], _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React__default['default'].createElement(_Form__default['default'].Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol14
+        }), /*#__PURE__*/React__default['default'].createElement(RangePicker$2, _objectSpread2(_objectSpread2({
+          disabled: disabled
+        }, _showTime2), c.fieldProps))));
+      } else if (c.valueType === 'checkbox') {
+        var options = [];
+
+        if (c.valueEnum) {
+          for (var key in c.valueEnum) {
+            var text = c.valueEnum[key].text;
+            options.push({
+              label: text,
+              value: key
+            });
+          }
+        }
+
+        if (c.options) {
+          options = c.options;
+        }
+
+        setColumnsFields(function (preColumnsFields) {
+          return _objectSpread2(_objectSpread2({}, preColumnsFields), {}, _defineProperty({}, c.dataIndex, options));
+        });
+        var _labelCol15 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol15.style = {
+            width: search.labelWidth
+          };
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement(_Col__default['default'], _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React__default['default'].createElement(_Form__default['default'].Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol15
+        }), /*#__PURE__*/React__default['default'].createElement(Index$4.Group, _objectSpread2({
+          disabled: disabled,
+          options: options
+        }, c.fieldProps))));
+      } else if (c.valueType === 'radio' || c.valueType === 'radioButton') {
+        var _options3 = [];
+
+        if (c.options) {
+          _options3 = c.options;
+        }
+
+        if (c.valueEnum) {
+          for (var _key3 in c.valueEnum) {
+            var _text3 = c.valueEnum[_key3].text;
+
+            _options3.push({
+              label: _text3,
+              value: _key3
+            });
+          }
+        }
+
+        setColumnsFields(function (preColumnsFields) {
+          return _objectSpread2(_objectSpread2({}, preColumnsFields), {}, _defineProperty({}, c.dataIndex, _options3));
+        });
+        var _labelCol16 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol16.style = {
+            width: search.labelWidth
+          };
+        }
+
+        var radioButtonProps = {};
+
+        if (c.valueType === 'radioButton') {
+          radioButtonProps = {
+            optionType: 'button',
+            buttonStyle: 'solid'
+          };
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement(_Col__default['default'], _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React__default['default'].createElement(_Form__default['default'].Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol16
+        }), /*#__PURE__*/React__default['default'].createElement(Index$3.Group, _objectSpread2(_objectSpread2({
+          disabled: disabled
+        }, radioButtonProps), {}, {
+          options: _options3
+        }, c.fieldProps))));
+      } else if (c.valueType === 'switch') {
+        var _options4 = [];
+
+        if (c.valueEnum) {
+          for (var _key4 in c.valueEnum) {
+            var _text4 = c.valueEnum[_key4].text;
+
+            _options4.push({
+              label: _text4,
+              value: _key4
+            });
+          }
+        }
+
+        var _labelCol17 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol17.style = {
+            width: search.labelWidth
+          };
+        }
+
+        setColumnsFields(function (preColumnsFields) {
+          return _objectSpread2(_objectSpread2({}, preColumnsFields), {}, _defineProperty({}, c.dataIndex, _options4));
+        });
+        return /*#__PURE__*/React__default['default'].createElement(_Col__default['default'], _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React__default['default'].createElement(_Form__default['default'].Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue,
+          valuePropName: "checked"
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol17
+        }), /*#__PURE__*/React__default['default'].createElement(WSwitch, _objectSpread2({
+          disabled: disabled
+        }, c.fieldProps))));
+      } else if (c.valueType === 'digit') {
+        var _labelCol18 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol18.style = {
+            width: search.labelWidth
+          };
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement(_Col__default['default'], _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React__default['default'].createElement(_Form__default['default'].Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol18
+        }), /*#__PURE__*/React__default['default'].createElement(NumericInput, _objectSpread2({
+          disabled: disabled,
+          placeholder: "\u8BF7\u8F93\u5165\u53C2\u6570(double/int)"
+        }, c.fieldProps))));
+      } else if (c.renderFormItem) {
+        var _labelCol19 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol19.style = {
+            width: search.labelWidth
+          };
+        }
+
+        var baseitem = c.renderFormItem(c, _objectSpread2(_objectSpread2({}, c), {}, {
+          formItemProps: c.formItemProps,
+          fieldProps: c.fieldProps,
+          columnsFields: columnsFields
+        }), form);
+        return baseitem ? /*#__PURE__*/React__default['default'].createElement(_Col__default['default'], _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React__default['default'].createElement(_Form__default['default'].Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol19
+        }), baseitem)) : null;
+      } else if (c.valueType === 'textarea') {
+        var _labelCol20 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol20.style = {
+            width: search.labelWidth
+          };
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement(_Col__default['default'], _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React__default['default'].createElement(_Form__default['default'].Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol20
+        }), /*#__PURE__*/React__default['default'].createElement(Index.TextArea, _objectSpread2({
+          rows: 4,
+          disabled: disabled,
+          placeholder: "\u8BF7\u8F93\u5165"
+        }, c.fieldProps))));
+      } else if (c.valueType === 'inputNumber') {
+        var _labelCol21 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol21.style = {
+            width: search.labelWidth
+          };
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement(_Col__default['default'], _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React__default['default'].createElement(_Form__default['default'].Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol21
+        }), /*#__PURE__*/React__default['default'].createElement(WInputNumber, _objectSpread2({
+          disabled: disabled,
+          placeholder: "\u8BF7\u8F93\u5165"
+        }, c.fieldProps))));
+      } else {
+        var _labelCol22 = {};
+
+        if (search && search.labelWidth) {
+          _labelCol22.style = {
+            width: search.labelWidth
+          };
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement(_Col__default['default'], _objectSpread2(_objectSpread2({
+          style: {
+            paddingLeft: '12px',
+            paddingRight: '12px'
+          }
+        }, colProps), {}, {
+          key: c.dataIndex
+        }), /*#__PURE__*/React__default['default'].createElement(_Form__default['default'].Item, _objectSpread2(_objectSpread2({
+          initialValue: c.initialValue
+        }, c.formItemProps), {}, {
+          name: c.dataIndex,
+          label: c.title,
+          labelCol: _labelCol22
+        }), /*#__PURE__*/React__default['default'].createElement(Index, _objectSpread2({
+          disabled: disabled,
+          placeholder: "\u8BF7\u8F93\u5165"
+        }, c.fieldProps))));
+      }
+    });
+  }, [changedValues, extraColumns, disabled, JSON.stringify(form.getFieldsValue())]);
 
   var handleSearch = function handleSearch(v) {
     var searchForm = form.getFieldsValue();
@@ -8115,10 +8575,11 @@ var WForm = function WForm(props, ref) {
     },
     onFinish: handleSearch,
     onValuesChange: function onValuesChange(changedValues, allValues) {
+      onFormChange && onFormChange(changedValues, allValues, form);
       setchangedValues(changedValues);
     },
     form: form
-  }, extraProps), /*#__PURE__*/React__default['default'].createElement(_Row__default['default'], null, filterForm), search && search.hideSubmit ? null : /*#__PURE__*/React__default['default'].createElement(_Row__default['default'], {
+  }, extraProps), /*#__PURE__*/React__default['default'].createElement(_Row__default['default'], null, filterForm), /*#__PURE__*/React__default['default'].createElement(_Row__default['default'], null, filterExtraColumnsForm), search && search.hideSubmit ? null : /*#__PURE__*/React__default['default'].createElement(_Row__default['default'], {
     justify: "end"
   }, /*#__PURE__*/React__default['default'].createElement(_Col__default['default'], {
     style: {
@@ -9446,10 +9907,11 @@ Modal.hidden = function () {
   ModalContainer[modelSysbol] && ModalContainer[modelSysbol].hidden();
 };
 
-var _excluded$d = ["columns", "search", "visible", "setVisible", "disabled", "submitMethod", "onSubmitSuccess", "title", "record"];
+var _excluded$d = ["columns", "extraColumns", "search", "visible", "setVisible", "disabled", "submitMethod", "onSubmitSuccess", "title", "record", "onFormChange"];
 
 var ModalForm = function ModalForm(props, ref) {
   var columns = props.columns,
+      extraColumns = props.extraColumns,
       search = props.search,
       visible = props.visible,
       setVisible = props.setVisible,
@@ -9458,6 +9920,7 @@ var ModalForm = function ModalForm(props, ref) {
       onSubmitSuccess = props.onSubmitSuccess,
       title = props.title,
       record = props.record,
+      onFormChange = props.onFormChange,
       extraProps = _objectWithoutProperties(props, _excluded$d);
 
   var formRef = React.useRef(null);
@@ -9579,24 +10042,28 @@ var ModalForm = function ModalForm(props, ref) {
     ref: formRef,
     disabled: disabled,
     onSubmit: onSubmit,
+    onFormChange: onFormChange,
     disabledHideInSearch: true,
     search: search,
-    columns: columns
+    columns: columns,
+    extraColumns: extraColumns
   }));
 };
 
 var ModalForm$1 = /*#__PURE__*/React__default['default'].forwardRef(ModalForm);
 
-var _excluded$e = ["columns", "request", "modalFormSearch", "tableAction", "renderTableBar", "className", "style", "modalConfig", "optionColumnConfig"];
+var _excluded$e = ["columns", "extraColumns", "request", "modalFormSearch", "tableAction", "renderTableBar", "className", "style", "onFormChange", "modalConfig", "optionColumnConfig"];
 
 var TabelCard = function TabelCard(props, ref) {
   var columns = props.columns,
+      extraColumns = props.extraColumns,
       request = props.request,
       modalFormSearch = props.modalFormSearch,
       tableAction = props.tableAction,
       renderTableBar = props.renderTableBar,
       className = props.className,
       style = props.style,
+      onFormChange = props.onFormChange,
       modalConfig = props.modalConfig,
       optionColumnConfig = props.optionColumnConfig,
       extraProps = _objectWithoutProperties(props, _excluded$e);
@@ -9615,7 +10082,10 @@ var TabelCard = function TabelCard(props, ref) {
       setModalFormConfig = _useState4[1];
 
   React.useImperativeHandle(ref, function () {
-    return {};
+    return {
+      actionRef: actionRef.current,
+      formRef: formRef.current
+    };
   });
 
   var openFormModel = function openFormModel(options) {
@@ -9883,6 +10353,8 @@ var TabelCard = function TabelCard(props, ref) {
     }(),
     search: modalFormSearch
   }, modalConfig), {}, {
+    onFormChange: onFormChange,
+    extraColumns: extraColumns || [],
     columns: (columns || []).filter(function (item) {
       return !item.hiddenInModalForm;
     })

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "wargerm",
-  "version": "0.2.8",
+  "version": "0.2.12",
   "scripts": {
     "dev": "dumi dev",
     "docs:build": "dumi build",