fan-standard-comp 3.2.1 → 4.0.1

package/es/StandardFilter/index.js

@@ -1,217 +1,290 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-import "antd/es/button/style";
-import _Button from "antd/es/button";
-import "antd/es/form/style";
-import _Form from "antd/es/form";
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-import React from 'react';
-import UtilValueFormat from '../utils/ValueFormat.js';
-import ButtonGroup from '../ButtonGroup/index';
-// import { general } from '../data/index';
-import './style/index.less';
-import RenderItemGroup from '../FormComp/RenderItemGroup';
-var FormItem = _Form.Item;
-var StandardFilter = /*#__PURE__*/function (_React$Component) {
-  _inherits(StandardFilter, _React$Component);
-  var _super = _createSuper(StandardFilter);
-  function StandardFilter(props) {
-    var _this;
-    _classCallCheck(this, StandardFilter);
-    _this = _super.call(this, props);
-    _this.filterFormRef = /*#__PURE__*/React.createRef();
-    // 更新表单控件值，用于外部获取当前表单实例(force是否强制清空表单)
-    _this.updateFormFields = function (newVal, force) {
-      var getFormFields = _this.props.getFormFields;
-      var resetValues = {};
-      if (force) {
-        // this.filterFormRef.current.resetFields()
-        // 先清空 再赋值
-        resetValues = _this.filterFormRef.current.getFieldsValue();
-        Object.keys(resetValues).forEach(function (item) {
-          resetValues[item] = undefined;
-        });
-      }
-      _this.filterFormRef.current.setFieldsValue(Object.assign(Object.assign({}, resetValues), newVal)); // 直接清空表单的赋值
-      if (getFormFields) getFormFields(_this.filterFormRef.current.getFieldsValue(), _this.filterFormRef);
-    }; // 强制更新表单值，用于赋初始化实例值
-    _this.forceUpdateForm = function () {
-      var getFormFields = _this.props.getFormFields;
-      if (getFormFields) getFormFields(_this.filterFormRef.current.getFieldsValue(), _this.filterFormRef);
-    };
-    _this.handleSearch = function (values) {
-      var _this$props = _this.props,
-        formItemGroup = _this$props.formItemGroup,
-        onFilterSearch = _this$props.onFilterSearch; // if (Object.prototype.hasOwnProperty.call(values, false)) {
-      //   delete values.false // TODO 自定义结构会莫名的出来一个false字段
-      // }
-      var resultValues = UtilValueFormat(values, formItemGroup);
-      if (onFilterSearch) {
-        onFilterSearch(Object.assign({}, resultValues));
-      }
-    };
-    _this.handleReset = function () {
-      var onFilterReset = _this.props.onFilterReset; // 使用此方法，表单校验无法清空掉
-      // const resetValues = this.filterFormRef.current.getFieldsValue()
-      // Object.keys(resetValues).forEach((item) => {
-      //   resetValues[item] = undefined
-      // })
-      // this.filterFormRef.current.setFieldsValue({ ...resetValues }) // 直接清空表单的赋值
-      _this.filterFormRef.current.resetFields();
-      _this.setState({
-        reFormItemGroup: _this.props.formItemGroup // 重新渲染列表
-      });
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+// @ts-nocheck
+import React, { useContext, useEffect, useRef, useState, useMemo, useCallback, useImperativeHandle } from 'react';
+import { Form, Button } from 'antd';
+import RenderItemGroup from "../FormComp/RenderItemGroup";
+import { UtilValueFormat } from "../utils";
+import ButtonGroup from "../ButtonGroup/";
+import { general } from "../data/";
+import "./style/index.less";
+import { FanContext } from "../ConfigContext";
+import useStyle from "./style/FilterStyle";
+var FormItem = Form.Item;
+var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var InitFanContext = useContext(FanContext);
+  var providerConfig = InitFanContext['StandardFilter'] || {}; // 使用上下文（全局配置）设置扩展的配置项
+  var _providerConfig$props = _objectSpread(_objectSpread({}, providerConfig), props),
+    _providerConfig$props2 = _providerConfig$props.formItemGroup,
+    formItemGroup = _providerConfig$props2 === void 0 ? [] : _providerConfig$props2,
+    itemGroupConfig = _providerConfig$props.itemGroupConfig,
+    initialValues = _providerConfig$props.initialValues,
+    getFormFields = _providerConfig$props.getFormFields,
+    onFilterSearch = _providerConfig$props.onFilterSearch,
+    onFilterReset = _providerConfig$props.onFilterReset,
+    className = _providerConfig$props.className,
+    style = _providerConfig$props.style,
+    _providerConfig$props3 = _providerConfig$props.buttonGroup,
+    buttonGroup = _providerConfig$props3 === void 0 ? [] : _providerConfig$props3,
+    buttonGroupConfig = _providerConfig$props.buttonGroupConfig,
+    min = _providerConfig$props.min,
+    codes = _providerConfig$props.codes,
+    permissionCodes = _providerConfig$props.permissionCodes,
+    confirmText = _providerConfig$props.confirmText,
+    cancelText = _providerConfig$props.cancelText,
+    _providerConfig$props4 = _providerConfig$props.confirmButtonProps,
+    confirmButtonProps = _providerConfig$props4 === void 0 ? {} : _providerConfig$props4,
+    _providerConfig$props5 = _providerConfig$props.cancelButtonProps,
+    cancelButtonProps = _providerConfig$props5 === void 0 ? {} : _providerConfig$props5,
+    filterButtonColSpan = _providerConfig$props.filterButtonColSpan,
+    filterButtonConfig = _providerConfig$props.filterButtonConfig,
+    formLayout = _providerConfig$props.formLayout,
+    _providerConfig$props6 = _providerConfig$props.gridLayout,
+    gridLayout = _providerConfig$props6 === void 0 ? 'inline' : _providerConfig$props6,
+    filterFormStyle = _providerConfig$props.filterFormStyle,
+    filterBtnsStyle = _providerConfig$props.filterBtnsStyle,
+    _providerConfig$props7 = _providerConfig$props.colon,
+    colon = _providerConfig$props7 === void 0 ? true : _providerConfig$props7,
+    dateFormatter = _providerConfig$props.dateFormatter;
+  var filterFormRef = useRef();
+  // ref 的转发
+  useImperativeHandle(ref, function () {
+    return filterFormRef === null || filterFormRef === void 0 ? void 0 : filterFormRef.current;
+  });
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    reFormItemGroup = _useState2[0],
+    setReFormItemGroup = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isHideCount = _useState4[0],
+    setIsHideCount = _useState4[1]; // 表单隐藏项数量值
 
-      if (onFilterReset) {
-        onFilterReset(_this.filterFormRef.current.getFieldsValue());
+  var componentName = 'spec-standard-filter';
+  var _useStyle = useStyle(componentName),
+    _useStyle2 = _slicedToArray(_useStyle, 2),
+    wrapSSR = _useStyle2[0],
+    hashId = _useStyle2[1];
+  var filterFormLayout = useMemo(function () {
+    return formLayout || 'inline';
+  }, [formLayout]);
+  //  配置筛选按钮（确认与取消）
+  var filterActionButtons = useMemo(function () {
+    // 当前栅栅数量
+    var itemGroupSize = (itemGroupConfig === null || itemGroupConfig === void 0 ? void 0 : itemGroupConfig.size) || (filterFormLayout === 'horizontal' ? 'xxlg' : 'md');
+    if (itemGroupConfig !== null && itemGroupConfig !== void 0 && itemGroupConfig.columnCount) {
+      // 有配置栅格数 1,2,3,4
+      switch (itemGroupConfig === null || itemGroupConfig === void 0 ? void 0 : itemGroupConfig.columnCount) {
+        case 1:
+          itemGroupSize = 'sm';
+          break;
+        case 2:
+          itemGroupSize = 'md';
+          break;
+        case 3:
+          itemGroupSize = 'lg';
+          break;
+        case 4:
+          itemGroupSize = 'xxlg';
+          break;
       }
-    };
-    _this.itemIsHide = function (isHide) {
-      var current = _this.filterFormRef.current;
-      if (!isHide) return false;
-      if (typeof isHide === 'function') {
-        return isHide(current ? current.getFieldsValue() : {}, current);
-      }
-      return isHide;
-    };
-    // 表单列表组 formItemGroup 类型为数组或者React.Node
-    _this.renderFormItemGroup = function () {
-      var reFormItemGroup = _this.state.reFormItemGroup;
-      if (Array.isArray(reFormItemGroup)) {
-        return /*#__PURE__*/React.createElement(RenderItemGroup, {
-          itemGroup: reFormItemGroup,
-          layout: "inline",
-          form: _this.filterFormRef,
-          doUpdateFormFields: function doUpdateFormFields() {
-            return _this.forceUpdateForm();
-          }
-        });
-        /* return <>
-           {
-             reFormItemGroup.map((item, index) => {
-               const { componentStyle, isHide } = item
-               if (this.itemIsHide(isHide)) return null
-               return (
-                 <FormItem key={item.filedName} label={item.label}
-                           name={item.type !== 'custom' && item.filedName}
-                           rules={item.rules || (item.fieldOptions ? item.fieldOptions.rules : [])}
-                           {...item.protoFormItem}>
-                   {
-                     (item.type === 'custom' && item.customRender) ? item.customRender(this.filterFormRef, { ...item }) :
-                       <FieldComponent {...item}
-                                       onChange={(val, ...otherParams) => {
-                                         let updateValue = val
-                                         if (item.type === 'input' || item.type === 'textarea' || item.type === 'radio') {
-                                           updateValue = val.target.value
-                                         }
-                                         if (Array.isArray(val)) {
-                                           updateValue = [...val]
-                                         }
-                                         this.updateFormFields({ [item.filedName]: updateValue })
-                                         if (item.onChange) item.onChange(val, this.filterFormRef, ...otherParams)
-                                       }}
-                                       style={{ width: item.type === 'checkbox' || item.type === 'radio' ? 'auto' : general.formItemStyle.xsm.width, ...componentStyle }}/>
-                   }
-                 </FormItem>
-               )
-             })
-           }
-         </>*/
+    }
+    // 计算扣除栅格列数是否还有多余的项，用来判断筛选按钮的版式（初始化的时候，可能会受默认值内配置的isHide影响导致计算错误;或自定义表单控件组栅格影响）
+    var calculateTimes = (formItemGroup.length - isHideCount) % general.modalSize[itemGroupSize].columnNumber;
+    // xs:1列  sm:1列   【span:24】
+    // md:2列           【span:12】
+    // lg:3列  xlg:3列  【span:8】
+    // xxlg:4列         【span:6】
+    if (!onFilterSearch && !onFilterReset) return [];
+    return [_objectSpread(_objectSpread({
+      label: '',
+      type: 'custom',
+      // display: 'block',
+      display: {
+        wrapperCol: {
+          // 占用的格子数按对应size配置的formItem(md下额外再新增1）
+          span: general.modalSize[itemGroupSize].formLayout.labelCol.span + general.modalSize[itemGroupSize].formLayout.wrapperCol.span + (itemGroupSize === 'md' ? 1 : 0)
+        }
+      },
+      protoFormItem: {
+        style: {
+          textAlign: filterFormLayout === 'horizontal' ? 'right' : 'left'
+        }
+      },
+      colSpan: filterButtonColSpan || 24 - calculateTimes * (24 / general.modalSize[itemGroupSize].columnNumber)
+    }, filterButtonConfig), {}, {
+      customRender: function customRender() {
+        return /*#__PURE__*/React.createElement(FormItem, {
+          noStyle: true
+        }, onFilterSearch && /*#__PURE__*/React.createElement(Button, _extends({
+          type: "primary",
+          htmlType: "submit"
+        }, confirmButtonProps), confirmText || '查询'), onFilterReset && /*#__PURE__*/React.createElement(Button, _extends({
+          type: "primary",
+          style: {
+            marginLeft: 8
+          },
+          onClick: handleReset,
+          ghost: true
+        }, cancelButtonProps), cancelText || '重置'));
       }
+    })];
+  }, [confirmText, cancelText, filterFormLayout, reFormItemGroup, onFilterSearch, onFilterReset, itemGroupConfig, filterFormRef, isHideCount]);
 
-      return reFormItemGroup;
-    };
-    _this.state = {
-      // recombinationGroup: [],
-      reFormItemGroup: undefined
-    };
-    return _this;
-  }
-  _createClass(StandardFilter, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var initialValues = this.props.initialValues;
-      this.updateFormFields(initialValues, true);
+  // 更新表单控件值，用于外部获取当前表单实例(force是否强制清空表单)
+  var updateFormFields = function updateFormFields(newVal, force) {
+    var resetValues = {};
+    if (force) {
+      // this.filterFormRef.current.resetFields()
+      // 先清空 再赋值
+      resetValues = filterFormRef.current.getFieldsValue();
+      Object.keys(resetValues).forEach(function (item) {
+        resetValues[item] = undefined;
+      });
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var initialValues = this.props.initialValues;
-      if (prevProps.initialValues !== initialValues) {
-        this.updateFormFields(initialValues, true);
-      }
+    /*  const dateFieldTypes = ['datePicker', 'dateTimePicker', 'rangePicker', 'rangeTimePicker', 'timePicker', 'timePickerRange']
+      const filterDateFields = formItemGroup.filter(fItem => dateFieldTypes.includes(fItem.type))
+      // 如果配置了dateFormatter='string'，则将默认对其他进行格式转换
+      if (dateFormatter === 'string') {
+        // 需要将字符串转换成日期格式
+        filterDateFields.forEach(dItem => {
+          if (newVal[dItem.filedName]) {
+            if (typeof newVal[dItem.filedName] === 'string') {
+              console.log('将字符串转换成dayjs')
+              newVal[dItem.filedName] = dayjs(newVal[dItem.filedName])
+            } else if (Array.isArray(newVal[dItem.filedName])) {
+              console.log('将数组转换成dayjs数组')
+              newVal[dItem.filedName] = newVal[dItem.filedName].map(valItem => {
+                return typeof valItem === 'string' ? dayjs(valItem) : valItem
+              })
+            } else {
+              // console.log('其他情况,当它是日期格式，则不进行转换')
+            }
+          }
+        })
+      } */
+    filterFormRef.current.setFieldsValue(_objectSpread(_objectSpread({}, resetValues), newVal || {})); // 直接清空表单的赋值
+    updateCalculate(filterFormRef.current.getFieldsValue());
+    if (getFormFields) getFormFields(filterFormRef.current.getFieldsValue(), filterFormRef);
+  };
+  // 强制更新表单值，用于赋初始化实例值
+  var forceUpdateForm = useCallback(function () {
+    var formValues = filterFormRef.current.getFieldsValue();
+    // if (Object.prototype.hasOwnProperty.call(formValues, false)) {
+    //   delete formValues.false // TODO 自定义结构会莫名的出来一个false字段
+    // }
+    updateCalculate(formValues); // 更新当前表单数量，排除被隐藏的值
+    if (getFormFields) getFormFields(filterFormRef.current.getFieldsValue(), filterFormRef);
+  }, [dateFormatter, formItemGroup]);
+  // 计算表单隐藏项
+  var updateCalculate = useCallback(function (formValues) {
+    setIsHideCount(reFormItemGroup.filter(function (item) {
+      return item.hasOwnProperty('isHide') ? item.isHide(_objectSpread({}, formValues), filterFormRef) : false;
+    }).length);
+  }, [reFormItemGroup, filterFormRef]);
+  var handleSearch = function handleSearch(values) {
+    if (Object.prototype.hasOwnProperty.call(values, false)) {
+      delete values.false; // TODO 自定义结构会莫名的出来一个false字段
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        className = _this$props2.className,
-        style = _this$props2.style,
-        onFilterReset = _this$props2.onFilterReset,
-        _this$props2$buttonGr = _this$props2.buttonGroup,
-        buttonGroup = _this$props2$buttonGr === void 0 ? [] : _this$props2$buttonGr,
-        min = _this$props2.min,
-        codes = _this$props2.codes,
-        permissionCodes = _this$props2.permissionCodes,
-        confirmText = _this$props2.confirmText,
-        cancelText = _this$props2.cancelText,
-        onFilterSearch = _this$props2.onFilterSearch,
-        buttonGroupConfig = _this$props2.buttonGroupConfig; // const { recombinationGroup } = this.state;
-      return /*#__PURE__*/React.createElement(_Form, {
-        name: "standard-filter-form",
-        ref: this.filterFormRef,
-        layout: "inline",
-        onFinish: this.handleSearch,
-        className: className,
-        style: style
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "filter-grid"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "filter-form"
-      }, this.state.reFormItemGroup ? /*#__PURE__*/React.createElement(React.Fragment, null, this.renderFormItemGroup(), /*#__PURE__*/React.createElement(FormItem, {
-        style: {
-          display: !onFilterSearch && !onFilterReset ? 'none' : 'inline-block'
+    var resultValues = dateFormatter === 'string' ? UtilValueFormat(values, formItemGroup) : values;
+    console.log('格式化前数据', values);
+    console.log('格式化后数据', resultValues);
+    if (onFilterSearch) {
+      onFilterSearch(_objectSpread({}, resultValues));
+    }
+  };
+  var handleReset = function handleReset() {
+    var _filterFormRef$curren;
+    // 使用此方法，表单校验无法清空掉
+    // const resetValues = this.filterFormRef.current.getFieldsValue()
+    // Object.keys(resetValues).forEach((item) => {
+    //   resetValues[item] = undefined
+    // })
+    // this.filterFormRef.current.setFieldsValue({ ...resetValues }) // 直接清空表单的赋值
+    filterFormRef.current.resetFields();
+    setReFormItemGroup(formItemGroup); // 重新渲染列表
+    updateCalculate(filterFormRef === null || filterFormRef === void 0 || (_filterFormRef$curren = filterFormRef.current) === null || _filterFormRef$curren === void 0 ? void 0 : _filterFormRef$curren.getFieldsValue());
+    if (onFilterReset) {
+      var _filterFormRef$curren2;
+      onFilterReset(filterFormRef === null || filterFormRef === void 0 || (_filterFormRef$curren2 = filterFormRef.current) === null || _filterFormRef$curren2 === void 0 ? void 0 : _filterFormRef$curren2.getFieldsValue());
+    }
+  };
+  useEffect(function () {
+    if (initialValues && JSON.stringify(initialValues) !== '{}') {
+      updateFormFields(initialValues, true);
+    }
+  }, [initialValues]);
+  useEffect(function () {
+    setReFormItemGroup(formItemGroup);
+  }, [formItemGroup]);
+  // / 表单列表组 formItemGroup 类型为数组或者React.Node
+  var renderFormItemGroup = function renderFormItemGroup() {
+    if (Array.isArray(reFormItemGroup)) {
+      // 数组则默认加上"确认与取消"按钮
+      return /*#__PURE__*/React.createElement(RenderItemGroup, _extends({
+        itemGroup: reFormItemGroup.concat(filterActionButtons),
+        size: filterFormLayout === 'horizontal' ? 'xxlg' : 'md' // size决定栅格排列数量(4列排版）
+        ,
+        layout: filterFormLayout,
+        form: filterFormRef
+        // displayLayout={{labelCol: { span: 8 }, wrapperCol: { span: 16 },}}
+        ,
+        doUpdateFormFields: function doUpdateFormFields() {
+          return forceUpdateForm();
         }
-      }, onFilterSearch && /*#__PURE__*/React.createElement(_Button, {
-        type: "primary",
-        htmlType: "submit"
-      }, "  ", confirmText || '查询'), onFilterReset && /*#__PURE__*/React.createElement(_Button, {
-        type: "primary",
-        style: {
-          marginLeft: 8
-        },
-        onClick: this.handleReset,
-        ghost: true
-      }, cancelText || '重置'))) : null), buttonGroup && buttonGroup.length > 0 ? /*#__PURE__*/React.createElement("div", {
-        className: "filter-btns"
-      }, /*#__PURE__*/React.createElement(ButtonGroup, {
-        options: buttonGroup,
-        min: min,
-        codes: codes,
-        permissionCodes: permissionCodes,
-        dropdownConfig: buttonGroupConfig
-      })) : null));
+      }, itemGroupConfig));
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(nextProps) {
-      var formItemGroup = nextProps.formItemGroup; // const restOptionList = removeNoPermission(buttonGroup, permissionCodes, codes) || []
-      return {
-        // recombinationGroup: restOptionList,
-        reFormItemGroup: formItemGroup
-      };
+    return reFormItemGroup;
+  };
+  /**
+   * 生成guid
+   */
+  var guid = function guid() {
+    function S4() {
+      return ((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1);
     }
-  }]);
-  return StandardFilter;
-}(React.Component);
+    return "".concat(S4(), "-").concat(S4());
+  };
+  var renderButtonGroup = function renderButtonGroup() {
+    return buttonGroup && buttonGroup.length > 0 ? /*#__PURE__*/React.createElement("div", {
+      className: "filter-btns ",
+      style: filterBtnsStyle
+    }, /*#__PURE__*/React.createElement(ButtonGroup, {
+      options: buttonGroup,
+      min: min,
+      codes: codes,
+      permissionCodes: permissionCodes,
+      dropdownConfig: buttonGroupConfig
+    })) : null;
+  };
+  return wrapSSR( /*#__PURE__*/React.createElement(Form, {
+    name: 'standard-filter-form-' + guid(),
+    ref: filterFormRef,
+    layout: filterFormLayout,
+    onFinish: handleSearch
+    // className={classNames(componentName, hashId, props?.className)}
+    ,
+    className: "standard-filter ".concat(componentName, " ").concat(className || '', " ").concat(hashId),
+    style: style,
+    colon: colon
+    // {...providerConfig}  // 直接传这里面的话，会影响layout渲染
+    // initialValues={{ ...initialValues }}
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "filter-grid filter-grid-".concat(gridLayout),
+    style: filterFormStyle
+  }, reFormItemGroup.length === 0 ? null : /*#__PURE__*/React.createElement("div", {
+    className: "filter-form filter-form-".concat(formLayout)
+  }, reFormItemGroup ? /*#__PURE__*/React.createElement(React.Fragment, null, renderFormItemGroup()) : null), renderButtonGroup())));
+});
 export default StandardFilter;

package/es/StandardFilter/style/FilterStyle.d.ts

@@ -0,0 +1,6 @@
+import { GlobalToken } from "antd";
+export interface StandardFilterTokenType extends GlobalToken {
+    [k: string]: any;
+}
+declare const StandardFilterStyleFunc: (prefix: string) => any;
+export default StandardFilterStyleFunc;

package/es/StandardFilter/style/FilterStyle.js

@@ -0,0 +1,50 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { createStyleHook } from "../../theme/utils/genStyleHook";
+var StandardFilterStyleFunc = function StandardFilterStyleFunc(prefix) {
+  var prepareComponentToken = function prepareComponentToken(token) {
+    return {
+      // fontWeight: 400,
+    };
+  };
+  return createStyleHook(prefix, function (token) {
+    var prefixCls = ".".concat(prefix);
+    return [_defineProperty({}, prefixCls, {
+      '.filter-grid': {
+        // backgroundColor: token.colorBgBase,
+        '.filter-form': {
+          '.ant-form-item-control, ant-form-item-label': {
+            lineHeight: token.controlHeight + 'px' //  @input-height-base;
+          }
+        },
+        '.filter-form .ant-form-item': {
+          marginRight: token.paddingMD,
+          marginBottom: token.paddingMD
+        },
+        '.filter-btns ': {
+          backgroundColor: token.colorBgBase
+        },
+        '.filter-btns .ant-btn': {
+          marginLeft: token.paddingXS,
+          marginTop: token.paddingXS,
+          // marginBottom: token.paddingMD,
+          marginBottom: token.paddingXS
+        },
+        '.ant-select-single:not(.ant-select-customize-input) .ant-select-selector': {
+          lineHeight: token.controlHeight - 2
+        },
+        '&.filter-grid-horizontal': {
+          '.filter-btn': {
+            '.spec-button-group': {
+              paddingTop: token.paddingMD
+            }
+          }
+        }
+      }
+    })];
+  }, prepareComponentToken // 当前组件扩展的变量
+  );
+};
+export default StandardFilterStyleFunc;