fan-standard-comp 4.1.7 → 4.1.9

package/es/FormComp/RenderItemGroup/CustomFormList.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const CustomFormList: (props: any) => React.JSX.Element;
+export default CustomFormList;

package/es/FormComp/RenderItemGroup/CustomFormList.js

@@ -0,0 +1,70 @@
+var _excluded = ["key", "name"];
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from 'react';
+import { Form, Space, Button } from 'antd';
+import { MinusCircleOutlined } from '@ant-design/icons';
+import Field from "../FieldComponent";
+var CustomFormList = function CustomFormList(props) {
+  var filedName = props.filedName,
+    fieldName = props.fieldName,
+    rules = props.rules;
+  return /*#__PURE__*/React.createElement(Form.List, {
+    name: filedName || fieldName,
+    rules: rules
+  }, function (fields, _ref, _ref2) {
+    var add = _ref.add,
+      remove = _ref.remove;
+    var errors = _ref2.errors;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, fields.map(function (_ref3) {
+      var key = _ref3.key,
+        name = _ref3.name,
+        restField = _objectWithoutProperties(_ref3, _excluded);
+      return /*#__PURE__*/React.createElement(Space, {
+        key: key,
+        align: "baseline"
+      }, /*#__PURE__*/React.createElement(Form.Item, _extends({}, restField, {
+        label: "\u9009\u9879\u503C",
+        name: [name, 'optionValue'],
+        rules: [{
+          required: true,
+          message: '请输入'
+        }]
+      }), /*#__PURE__*/React.createElement(Field, {
+        type: 'input'
+      })), /*#__PURE__*/React.createElement(Form.Item, _extends({}, restField, {
+        label: "\u9009\u9879\u540D\u79F0",
+        name: [name, 'optionName'],
+        rules: [{
+          required: true,
+          message: '请输入'
+        }]
+      }), /*#__PURE__*/React.createElement(Field, {
+        type: 'input'
+      })), /*#__PURE__*/React.createElement(Form.Item, _extends({}, restField, {
+        label: "\u5916\u90E8\u9009\u9879\u503C",
+        name: [name, 'optionValueExtend'],
+        rules: [{
+          required: true,
+          message: '请输入'
+        }]
+      }), /*#__PURE__*/React.createElement(Field, {
+        type: 'input'
+      })), /*#__PURE__*/React.createElement(MinusCircleOutlined, {
+        onClick: function onClick() {
+          return remove(name);
+        }
+      }));
+    }), /*#__PURE__*/React.createElement(Button, {
+      type: "dashed",
+      onClick: function onClick() {
+        return add();
+      },
+      block: true
+    }, "+ \u6DFB\u52A0\u9009\u9879"), /*#__PURE__*/React.createElement(Form.ErrorList, {
+      errors: errors
+    }));
+  });
+};
+export default CustomFormList;

package/es/FormComp/RenderItemGroup/index.d.ts

@@ -34,7 +34,7 @@ interface ItemGroupProps {
     layout?: string;
     doUpdateFormFields?: () => void;
     className?: string;
-    columnCount?: 1 | 2 | 3 | 4;
+    columnCount?: 1 | 2 | 3 | 4 | any;
     parentNode?: string;
     [k: string]: any;
 }

package/es/FormComp/RenderItemGroup/index.js

@@ -16,6 +16,7 @@ import React, { useEffect, useCallback } from "react";
 import { Row, Col, Tooltip, Form, Space } from "antd";
 import { general } from "../../data";
 import Field from "../FieldComponent";
+// import CustomFormList from './CustomFormList';
 import SpecIcon from "../../SpecIcon";
 import useStyle from "./style";
 import classNames from "classnames";
@@ -239,7 +240,9 @@ var RenderItemGroup = function RenderItemGroup(props) {
         required: item.rules && item.rules.filter(function (rItem) {
           return rItem.required;
         }).length > 0
-      }, formLayout, item.protoFormItem), type === 'custom' && customRender ? customRender(form, _objectSpread({}, item), fieldStatus) : renderFormField(_objectSpread({}, item))));
+      }, formLayout, item.protoFormItem),
+      // type === 'custom' && customRender ? customRender(form, { ...item }, fieldStatus) : type === 'FormList' ? <CustomFormList name={filedName || fieldName} {...item}/> : renderFormField({ ...item })
+      type === 'custom' && customRender ? customRender(form, _objectSpread({}, item), fieldStatus) : renderFormField(_objectSpread({}, item))));
     } else {
       return /*#__PURE__*/React.createElement(FormItem, _extends({
         key: index,
@@ -251,7 +254,9 @@ var RenderItemGroup = function RenderItemGroup(props) {
           name: "info"
         }))) : label,
         rules: item.rules || (item.fieldOptions ? item.fieldOptions.rules : [])
-      }, formLayout, item.protoFormItem), type === 'custom' && customRender ? customRender(form, _objectSpread({}, item), fieldStatus) : renderFormField(_objectSpread({}, item)));
+      }, formLayout, item.protoFormItem),
+      // type === 'custom' && customRender ? customRender(form, { ...item }, fieldStatus) : type === 'FormList' ? <CustomFormList name={filedName || fieldName} {...item}/>  : renderFormField({ ...item })
+      type === 'custom' && customRender ? customRender(form, _objectSpread({}, item), fieldStatus) : renderFormField(_objectSpread({}, item)));
     }
   };
 

package/es/StandardFilter/index.js

@@ -12,7 +12,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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 React, { useContext, useEffect, useState, useMemo, useImperativeHandle } from 'react';
 import { Form, Button } from 'antd';
 import RenderItemGroup from "../FormComp/RenderItemGroup";
 import { UtilValueFormat } from "../utils";
@@ -25,7 +25,6 @@ import useStyle from "./style/FilterStyle";
 import SpecIcon from "../SpecIcon";
 var FormItem = Form.Item;
 var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _filterFormRef$curren4;
   var InitFanContext = useContext(FanContext);
   var providerConfig = InitFanContext['StandardFilter'] || {}; // 使用上下文（全局配置）设置扩展的配置项
   var _providerConfig$props = _objectSpread(_objectSpread({}, providerConfig), props),
@@ -69,15 +68,18 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
     parseTransform = _providerConfig$props.parseTransform,
     _providerConfig$props12 = _providerConfig$props.forceListener,
     forceListener = _providerConfig$props12 === void 0 ? true : _providerConfig$props12;
-  var filterFormRef = useRef();
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    filterForm = _Form$useForm2[0];
+  // const filterFormRef = useRef<any>();
   // ref 的转发
   useImperativeHandle(ref, function () {
-    return _objectSpread(_objectSpread({}, filterFormRef === null || filterFormRef === void 0 ? void 0 : filterFormRef.current), {}, {
+    return _objectSpread(_objectSpread({}, filterForm), {}, {
       onSubmit: function onSubmit(values) {
         return handleSearch(values);
       }
     });
-  });
+  }, [filterForm]);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     reFormItemGroup = _useState2[0],
@@ -132,37 +134,47 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   // 计算表单隐藏项(开启展开与收缩）
   var calculateHideCount = function calculateHideCount(filterFormRef, groups) {
-    var _filterFormRef$curren;
     var itemGroupSize = columnNumberAndSize.itemGroupSize,
       columnNumber = columnNumberAndSize.columnNumber;
-    var formValues = filterFormRef === null || filterFormRef === void 0 || (_filterFormRef$curren = filterFormRef.current) === null || _filterFormRef$curren === void 0 ? void 0 : _filterFormRef$curren.getFieldValue();
+    // collapseable && console.log('当前表单组有：', groups)
+    var formValues = filterFormRef === null || filterFormRef === void 0 ? void 0 : filterFormRef.getFieldValue();
     // Rule1: 不包括isHidden跟isHide的数据
     // Rule2：剩余的表单项中，查找是否有自定义配置 display='block' 或者colSpan的表单项
     var notShowGroupItem = (groups || []).filter(function (item) {
-      return (item === null || item === void 0 ? void 0 : item.isHidden) || (item.hasOwnProperty('isHide') ? item.isHide(_objectSpread({}, formValues), filterFormRef) : false);
+      return (item === null || item === void 0 ? void 0 : item.isHidden) || (item.hasOwnProperty('isHide') ? item.isHide(_objectSpread({}, formValues), _objectSpread({
+        current: filterFormRef
+      }, filterFormRef)) : false);
     });
     // 可显示的表单值
     var showGroupItem = (groups || []).filter(function (item) {
-      return !(item !== null && item !== void 0 && item.isHidden || (item.hasOwnProperty('isHide') ? item.isHide(_objectSpread({}, formValues), filterFormRef) : false));
+      return !(item !== null && item !== void 0 && item.isHidden || (item.hasOwnProperty('isHide') ? item.isHide(_objectSpread({}, formValues), _objectSpread({
+        current: filterFormRef
+      }, filterFormRef)) : false));
     });
+    // collapseable && console.log('当前显示的表单组', showGroupItem)
+    // collapseable && showGroupItem.forEach((item) => {
+    //   console.log('当前是否有配置colSpan或者display', item.display, item.colSpan)
+    // })
     var showGroupWithSetting = showGroupItem.filter(function (item) {
       return item.hasOwnProperty('colSpan');
-    });
+    }); // 指定设置数量
+    // const showDefaultWithSetting = showGroupItem.filter(item => !item.hasOwnProperty('colSpan')) // 指定设置数量
     var resultCount = notShowGroupItem.length;
     var aCount = 0; // 需要再次额外新增的数量
+    // console.log('showGroupWithSetting', showGroupWithSetting, 'showDefaultWithSetting', showDefaultWithSetting)
     if (showGroupWithSetting.length > 0) {
       showGroupWithSetting.forEach(function (gItem) {
         // colSpan 优先级更高
         if (gItem.hasOwnProperty('colSpan')) {
-          // console.log('有配置了colSpan, 占用栅格数量', gItem.colSpan / (24 / columnNumber), '需要再额外减1', gItem.colSpan / (24 / columnNumber) - 1, Math.ceil(gItem.colSpan / (24 / columnNumber) - 1))
-          aCount += Math.ceil(gItem.colSpan / (24 / columnNumber) - 1); // 额外占用了
+          // console.log('有配置了colSpan=' + gItem.colSpan + '占用栅格数量', gItem.colSpan / (24 / columnNumber), '需要再额外减1', gItem.colSpan / (24 / columnNumber) - 1, Math.ceil(gItem.colSpan / (24 / columnNumber) - 1))
+          aCount += Math.ceil(gItem.colSpan / (24 / columnNumber) - 1); // 额外占用了（如果4列的情况，前面有三列占用，colSpan配置了两列占用，则在此处不要减1）
           return;
         }
-        // if (gItem.hasOwnProperty('display') && gItem.display === 'block' ) {
-        //   // TODO.计算会有问题
-        //   console.log('有配置了display=block', Math.ceil(24 / (24 / columnNumber) - 1))
-        //   aCount += columnNumber -1 // Math.ceil(24 / (24 / columnNumber) - 1)  // 额外占用了
-        // }
+        if (gItem.hasOwnProperty('display') && gItem.display === 'block') {
+          // TODO.计算会有问题
+          // console.log('有配置了display=block', Math.ceil(24 / (24 / columnNumber) - 1))
+          // aCount += columnNumber -1 // Math.ceil(24 / (24 / columnNumber) - 1)  // 额外占用了
+        }
       });
     }
     setAdditionalCount(aCount);
@@ -235,7 +247,7 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
         })) : null);
       }
     })];
-  }, [confirmText, cancelText, filterFormLayout, reFormItemGroup, onFilterSearch, onFilterReset, columnNumberAndSize, filterFormRef, isHideCount, collapseable, collapsed]);
+  }, [confirmText, cancelText, filterFormLayout, reFormItemGroup, onFilterSearch, onFilterReset, columnNumberAndSize, filterForm, isHideCount, collapseable, collapsed]);
 
   // 更新表单控件值，用于外部获取当前表单实例(force是否强制清空表单)
   var updateFormFields = function updateFormFields(newVal, force) {
@@ -243,7 +255,7 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (force) {
       // this.filterFormRef.current.resetFields()
       // 先清空 再赋值
-      resetValues = filterFormRef.current.getFieldsValue();
+      resetValues = filterForm.getFieldsValue();
       Object.keys(resetValues).forEach(function (item) {
         resetValues[item] = undefined;
       });
@@ -275,18 +287,20 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
         }
       });
     }
-    filterFormRef.current.setFieldsValue(_objectSpread(_objectSpread({}, resetValues), newVal || {})); // 直接清空表单的赋值
+    filterForm.setFieldsValue(_objectSpread(_objectSpread({}, resetValues), newVal || {})); // 直接清空表单的赋值
     forceUpdateForm();
   };
   // 强制更新表单值，用于赋初始化实例值
-  var forceUpdateForm = useCallback(function () {
-    var formValues = filterFormRef.current.getFieldsValue();
+  var forceUpdateForm = function forceUpdateForm() {
+    var formValues = filterForm.getFieldsValue();
     if (Object.prototype.hasOwnProperty.call(formValues, false)) {
       delete formValues.false; // 自定义结构会莫名的出来一个false字段
     }
-    calculateHideCount(filterFormRef, reFormItemGroup); // 更新当前表单数量，排除被隐藏的值
-    if (getFormFields) getFormFields(formValues, filterFormRef);
-  }, [reFormItemGroup, filterFormRef]);
+    calculateHideCount(filterForm, reFormItemGroup); // 更新当前表单数量，排除被隐藏的值
+    if (getFormFields) getFormFields(formValues, _objectSpread({
+      current: filterForm
+    }, filterForm));
+  };
   var handleSearch = function handleSearch(values) {
     if (Object.prototype.hasOwnProperty.call(values, false)) {
       delete values.false; // 自定义结构会莫名的出来一个false字段
@@ -300,18 +314,18 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   };
   var handleReset = function handleReset() {
-    // 使用此方法，表单校验无法清空掉
-    // const resetValues = this.filterFormRef.current.getFieldsValue()
-    // Object.keys(resetValues).forEach((item) => {
-    //   resetValues[item] = undefined
-    // })
-    // this.filterFormRef.current.setFieldsValue({ ...resetValues }) // 直接清空表单的赋值
-    filterFormRef.current.resetFields();
+    filterForm.resetFields();
+    // 使用此方法，表单校验无法清空掉，所以需要先重置resetFields()
+    var resetValues = filterForm.getFieldsValue();
+    Object.keys(resetValues).forEach(function (item) {
+      resetValues[item] = undefined;
+    });
+    filterForm.setFieldsValue(_objectSpread({}, resetValues)); // 直接清空表单的赋值
+    // filterForm.resetFields()  // 单独用此方法无效，所以先清空+设置所有值为undefined
     setReFormItemGroup(formItemGroup); // 重新渲染列表
-    calculateHideCount(filterFormRef, reFormItemGroup);
+    calculateHideCount(filterForm, reFormItemGroup);
     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());
+      onFilterReset(filterForm === null || filterForm === void 0 ? void 0 : filterForm.getFieldsValue());
     }
   };
 
@@ -348,7 +362,9 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
             item.style = _objectSpread(_objectSpread({}, item.style || {}), {}, {
               display: item.isHidden ? 'none' : 'block'
             });
-            if (item.hasOwnProperty('isHide') && itemIsHide(item.isHide, formValues, filterFormRef)) {
+            if (item.hasOwnProperty('isHide') && itemIsHide(item.isHide, formValues, _objectSpread({
+              current: filterForm
+            }, filterForm))) {
               showItemNumber++;
               item.isHidden = true;
               // console.log('当前是结构是隐藏未渲染,跳到下个序号', showItemNumber)
@@ -364,23 +380,24 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
   useEffect(function () {
     // 初始化表单数据数据
     if (collapseable && filterFormLayout === "horizontal") {
-      var _filterFormRef$curren3;
-      var formValues = filterFormRef === null || filterFormRef === void 0 || (_filterFormRef$curren3 = filterFormRef.current) === null || _filterFormRef$curren3 === void 0 ? void 0 : _filterFormRef$curren3.getFieldValue();
+      var formValues = filterForm === null || filterForm === void 0 ? void 0 : filterForm.getFieldValue();
       updateGroupByCollapsed(formItemGroup, formValues).then(function (groups) {
         setReFormItemGroup(groups);
-        calculateHideCount(filterFormRef, groups);
+        calculateHideCount(filterForm, groups);
       });
     } else {
       setReFormItemGroup(formItemGroup);
     }
-  }, [formItemGroup, collapseable, filterFormLayout, collapsed, columnNumberAndSize === null || columnNumberAndSize === void 0 ? void 0 : columnNumberAndSize.columnNumber, itemGroupConfig, filterFormRef, filterFormRef === null || filterFormRef === void 0 || (_filterFormRef$curren4 = filterFormRef.current) === null || _filterFormRef$curren4 === void 0 ? void 0 : _filterFormRef$curren4.getFieldValue()]);
+  }, [formItemGroup, collapseable, filterFormLayout, collapsed, columnNumberAndSize === null || columnNumberAndSize === void 0 ? void 0 : columnNumberAndSize.columnNumber, itemGroupConfig, filterForm]);
+
+  // 如果不监听initialValues的话，可能url上的search更改时表单无法清空，需要自行手动重置
   useEffect(function () {
     if (!forceListener) {
       if (initialValues && JSON.stringify(initialValues) !== '{}') {
         updateFormFields(initialValues, true);
       }
     }
-  }, []);
+  }, [forceListener, filterForm]);
   useEffect(function () {
     if (forceListener) {
       if (initialValues && JSON.stringify(initialValues) !== '{}') {
@@ -388,6 +405,14 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }
   }, [forceListener, initialValues]);
+  // 如果不监听initialValues的话，可能url上的search更改时表单无法清空
+  // useEffect(() => {
+  //   if (filterForm) {   // <---- check ref before use the form instance
+  //     if (initialValues && typeof initialValues === 'object') {
+  //       updateFormFields(initialValues, true)
+  //     }
+  //   }
+  // }, [filterForm]);
   // / 表单列表组 formItemGroup 类型为数组或者React.Node
   var renderFormItemGroup = function renderFormItemGroup() {
     if (Array.isArray(reFormItemGroup)) {
@@ -397,7 +422,7 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
         size: filterFormLayout === 'horizontal' ? 'xxlg' : 'md' // size决定栅格排列数量(4列排版）
         ,
         layout: filterFormLayout,
-        form: filterFormRef,
+        form: filterForm,
         collapseable: collapseable,
         collapsed: collapsed,
         parentNode: 'standardFilter'
@@ -431,8 +456,10 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, buttonGroupConfig))) : null;
   };
   return wrapSSR( /*#__PURE__*/React.createElement(Form, {
-    name: 'standard-filter-form-' + guid(),
-    ref: filterFormRef,
+    name: 'standard-filter-form-' + guid()
+    // ref={filterFormRef}
+    ,
+    form: filterForm,
     layout: filterFormLayout,
     onFinish: handleSearch
     // className={classNames(componentName, hashId, props?.className)}
@@ -441,7 +468,7 @@ var StandardFilter = /*#__PURE__*/React.forwardRef(function (props, ref) {
     style: style,
     colon: colon
     // {...providerConfig}  // 直接传这里面的话，会影响layout渲染
-    // initialValues={{ ...initialValues }}
+    //     initialValues={parseTransform ? parseTransform(initialValues) : initialValues}
   }, /*#__PURE__*/React.createElement("div", {
     className: "filter-grid filter-grid-".concat(gridLayout),
     style: filterFormStyle

package/es/StandardFilter/oldIndexUseRef.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { FieldComponentProps } from '../FormComp/FieldComponent';
+import { ButtonGroupOptionsProps } from '../ButtonGroup/';
+import './style/index.less';
+export interface StandardFilterProps {
+    buttonGroup?: ButtonGroupOptionsProps[];
+    buttonGroupConfig?: Object;
+    formItemGroup?: FieldComponentProps[];
+    confirmText?: string;
+    onFilterSearch?: (value?: object) => void;
+    onFilterReset?: (value?: object) => void;
+    cancelText?: string;
+    initialValues?: any;
+    getFormFields?: (fields: any, form: any) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    min?: number;
+    codes?: any[];
+    permissionCodes?: string[];
+    formLayout?: 'inline' | 'horizontal' | 'vertical';
+    gridLayout?: 'inline' | 'horizontal';
+    colon?: boolean;
+    dateFormatter?: 'dayjs' | 'string';
+    itemGroupConfig?: object;
+    collapseable?: boolean;
+    [k: string]: any;
+}
+declare const StandardFilter: React.ForwardRefExoticComponent<Omit<StandardFilterProps, "ref"> & React.RefAttributes<unknown>>;
+export default StandardFilter;