@ccs-ui/rc-pro 1.1.25-beta-22 → 1.1.25-beta-24

package/es/dialog/DialogRequestButton.d.ts

@@ -1,7 +1,7 @@
 import { FormProps } from 'antd';
 import { DialogFormRef } from './form';
 import { CcsDialogModalProps } from './hook';
-declare const DialogRequestButton: ({ auth, formRef, formInitialValues, request, onCancel, onRequestBefore, }: Pick<CcsDialogModalProps, "onCancel" | "auth" | "request" | "onRequestBefore"> & {
+declare const DialogRequestButton: ({ auth, formRef, formInitialValues, request, onCancel, onRequestBefore, }: Pick<CcsDialogModalProps, "auth" | "request" | "onRequestBefore" | "onCancel"> & {
     formRef: React.RefObject<DialogFormRef>;
     formInitialValues: FormProps['initialValues'];
 }) => import("react/jsx-runtime").JSX.Element;

package/es/dialog/DialogSelfOkButton.d.ts

@@ -1,7 +1,7 @@
 import { FormProps } from 'antd';
 import { DialogFormRef } from './form';
 import { CcsDialogModalProps } from './hook';
-declare const DialogSelfOkButton: ({ auth, formRef, formInitialValues, onCancel, onOk, }: Pick<CcsDialogModalProps, "onCancel" | "auth" | "onOk"> & {
+declare const DialogSelfOkButton: ({ auth, formRef, formInitialValues, onCancel, onOk, }: Pick<CcsDialogModalProps, "auth" | "onOk" | "onCancel"> & {
     formRef: React.RefObject<DialogFormRef>;
     formInitialValues: FormProps['initialValues'];
 }) => import("react/jsx-runtime").JSX.Element;

package/es/layout-keep-alive/index.js

@@ -15,11 +15,10 @@ import { MoreOutlined } from '@ant-design/icons';
 import { useUpdate, useUpdateEffect } from 'ahooks';
 import { Button, Dropdown, Empty, Tabs, theme } from 'antd';
 import classnames from 'classnames';
-import _debounce from 'lodash/debounce';
-import { useEffect, useMemo, useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { useLocation } from 'react-router';
 import { useOutlet } from 'react-router-dom';
-import { CcsResizeObserver, CcsUtils } from '..';
+import { CcsUtils } from '..';
 import "./index.less";
 import Page from "./page";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -208,21 +207,9 @@ export default function KeepAliveTabs(_ref) {
       type: "text"
     })
   });
-  var tabRef = useRef();
-  var resizeFn = _debounce(function (width) {
-    if (tabRef.current) tabRef.current.style.maxWidth = "".concat(width, "px");
-  }, 200);
-  useEffect(function () {
-    tabRef.current = document.getElementById('keep-alive-tabs');
-  });
-  var onResize = function onResize(size) {
-    resizeFn(size.width);
-  };
   return /*#__PURE__*/_jsxs("div", {
     className: classnames(className, "ccs-keep-alive"),
-    children: [/*#__PURE__*/_jsx(CcsResizeObserver, {
-      onResize: onResize
-    }), /*#__PURE__*/_jsx(Tabs, {
+    children: [/*#__PURE__*/_jsx(Tabs, {
       id: "keep-alive-tabs",
       hideAdd: true,
       size: "small",

package/es/layout-keep-alive/index.less

@@ -1,8 +1,8 @@
 .ccs-keep-alive {
   flex: 1 1 auto;
-  // background: #f0f2f5;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 
   &-tabs-colorful {
     & > .ant-tabs-nav {

package/es/pro-table/form-item.d.ts

@@ -1,12 +1,7 @@
-/// <reference types="react" />
 import { TableFormItem } from '../ccs';
-import { FormItemRef } from './head';
 import { CcsProTableProps } from './table';
 type PropsType = TableFormItem & {
-    index: number;
     dependParam?: any;
-    onSetShowNum: () => void;
-    formItemsRef: React.MutableRefObject<FormItemRef>;
 } & Pick<CcsProTableProps<any>, 'formItemLabelWidth'>;
-export default function HeadFormItem({ label, name, rules, value, index, dependParam, formItemsRef, formItemLabelWidth, onSetShowNum, }: PropsType): import("react/jsx-runtime").JSX.Element;
+export default function HeadFormItem({ label, name, rules, value, dependParam, formItemLabelWidth, }: PropsType): import("react/jsx-runtime").JSX.Element;
 export {};

package/es/pro-table/form-item.js

@@ -1,72 +1,27 @@
 import { Form } from 'antd';
-import { cloneElement, useEffect, useRef } from 'react';
-import { CcsResizeObserver } from '..';
+import { cloneElement } from 'react';
 import { classPrefix } from "./table";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function HeadFormItem(_ref) {
   var label = _ref.label,
     name = _ref.name,
     rules = _ref.rules,
     value = _ref.value,
-    index = _ref.index,
     dependParam = _ref.dependParam,
-    formItemsRef = _ref.formItemsRef,
-    formItemLabelWidth = _ref.formItemLabelWidth,
-    onSetShowNum = _ref.onSetShowNum;
-  var ref = useRef(null);
-  var historyRef = useRef();
-  var onSaveRef = function onSaveRef() {
-    var _ref$current;
-    var hasIndex = formItemsRef.current.findIndex(function (f) {
-      return f.index === index;
-    });
-    var item = {
-      index: index,
-      width: ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientWidth) || 0,
-      ref: ref.current
-    };
-    if (hasIndex === -1) {
-      formItemsRef.current.push(item);
-      return;
-    }
-    formItemsRef.current[index] = item;
-    historyRef.current = item;
-  };
-  useEffect(function () {
-    onSaveRef();
-  }, []);
-
-  // 尺寸大小改变监听
-  var onResize = function onResize(size) {
-    var _index;
-    if ((size === null || size === void 0 ? void 0 : size.width) !== ((_index = formItemsRef.current[index]) === null || _index === void 0 ? void 0 : _index.width)) {
-      onSaveRef();
-      onSetShowNum();
-    }
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(CcsResizeObserver.Target, {
-      targetRef: ref,
-      onResize: onResize
-    }), /*#__PURE__*/_jsx("div", {
-      ref: ref,
-      style: {
-        paddingRight: 10
-      },
-      children: /*#__PURE__*/_jsx(Form.Item, {
-        name: name,
-        rules: rules,
-        className: "".concat(classPrefix, "-form-label"),
-        label: formItemLabelWidth ? /*#__PURE__*/_jsx("div", {
-          style: {
-            width: formItemLabelWidth
-          },
-          children: label
-        }) : label,
-        children: dependParam ? /*#__PURE__*/cloneElement(value, dependParam) : value
-      })
-    })]
+    formItemLabelWidth = _ref.formItemLabelWidth;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(Form.Item, {
+      name: name,
+      rules: rules,
+      className: "".concat(classPrefix, "-form-label"),
+      label: formItemLabelWidth ? /*#__PURE__*/_jsx("div", {
+        style: {
+          width: formItemLabelWidth
+        },
+        children: label
+      }) : label,
+      children: dependParam ? /*#__PURE__*/cloneElement(value, dependParam) : value
+    })
   });
 }

package/es/pro-table/head.d.ts

@@ -12,11 +12,6 @@ type PropsType<T> = Pick<CcsProTableProps<T>, 'toolbar' | 'formItems' | 'formIni
     tableOperation: ReactElement;
     onSearch: () => void;
 };
-export type FormItemRef = {
-    index: number;
-    ref: HTMLDivElement;
-    width: number;
-}[];
 /** 操作按钮、查询，重置、列筛选、 */
 declare function HeadComponent<T>({ form, title, toolbar, children, expandForm, titleBordered, formItems, formInitValues, formItemLabelWidth, tableOperation, onSearch, }: PropsType<T>): import("react/jsx-runtime").JSX.Element;
 export default HeadComponent;

package/es/pro-table/head.js

@@ -14,27 +14,16 @@ import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import { useUpdateEffect } from 'ahooks';
 import { Button, Card, Form } from 'antd';
 import _debounce from 'lodash/debounce';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { CcsResizeObserver } from '..';
 import { getShowDpends } from "./_utils";
 import HeadFormItem from "./form-item";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-function onShowMaxItem(nums, maxWidth) {
-  var newNums = 0;
-  for (var i = 0; i < nums.length; i++) {
-    if (newNums + nums[i] > maxWidth) {
-      return i - 1;
-    } else {
-      newNums += nums[i];
-    }
-  }
-  return nums.length - 1;
-}
-
 /** 操作按钮、查询，重置、列筛选、 */
 function HeadComponent(_ref) {
+  var _formItemsRef$current;
   var form = _ref.form,
     title = _ref.title,
     toolbar = _ref.toolbar,
@@ -48,40 +37,20 @@ function HeadComponent(_ref) {
     formItemLabelWidth = _ref.formItemLabelWidth,
     tableOperation = _ref.tableOperation,
     onSearch = _ref.onSearch;
-  var cardRef = useRef(null);
-  var formItemsRef = useRef([]);
+  var searchBtnRef = useRef(null);
+  var formItemsRef = useRef(null);
   // 查询条件是否展开
   var _useState = useState(expandForm),
     _useState2 = _slicedToArray(_useState, 2),
     isExpand = _useState2[0],
     setIsExpand = _useState2[1];
-  // 显示查询条件数量
-  var _useState3 = useState(-1),
+  var _useState3 = useState({}),
     _useState4 = _slicedToArray(_useState3, 2),
-    showNum = _useState4[0],
-    setShowNum = _useState4[1];
+    update = _useState4[1];
   useUpdateEffect(function () {
     setIsExpand(expandForm);
   }, [expandForm]);
 
-  // 设置最大显示条件数量
-  var onSetShowNum = function onSetShowNum() {
-    if (!cardRef.current) return;
-
-    // 单行查询条件可占空间
-    var maxWidth = cardRef.current.clientWidth - 32 - 64 * 2;
-    if (maxWidth < 0) return;
-
-    // 单行可显示的查询条件
-    var maxItems = onShowMaxItem(formItemsRef.current.map(function (f) {
-      return f.width;
-    }), maxWidth);
-    setShowNum(maxItems);
-  };
-  useEffect(function () {
-    onSetShowNum();
-  }, [isExpand]);
-
   // 处理form item 依赖
   var allFormItems = useMemo(function () {
     formItems.forEach(function (item) {
@@ -96,13 +65,14 @@ function HeadComponent(_ref) {
   // 查询条件记录数
   var itemLen = allFormItems.length;
   var hasItem = itemLen > 0;
-  var hasMore = showNum > -1 && showNum < itemLen - 1;
+  var hasMore = (((_formItemsRef$current = formItemsRef.current) === null || _formItemsRef$current === void 0 ? void 0 : _formItemsRef$current.scrollHeight) || 0) > 40;
 
   // 操作按钮
-  var renderOperation = /*#__PURE__*/_jsxs("div", {
+  var renderSearchBtn = /*#__PURE__*/_jsxs("div", {
+    ref: searchBtnRef,
     style: {
       textAlign: 'right',
-      flex: isExpand ? '1 1 auto' : '0 0 auto'
+      flex: isExpand && hasMore ? '1 1 auto' : '0 0 auto'
     },
     children: [hasMore && /*#__PURE__*/_jsx(Button, {
       type: "link",
@@ -118,13 +88,13 @@ function HeadComponent(_ref) {
       type: "primary",
       htmlType: "submit",
       children: "\u67E5\u8BE2"
-    })]
+    }), toolbar ? null : tableOperation]
   });
   var renderFormItems = function renderFormItems() {
-    return allFormItems.map(function (item, index) {
+    return allFormItems.map(function (item) {
       if (item.depends || item.showDepends) {
-        return /*#__PURE__*/_jsxs(React.Fragment, {
-          children: [/*#__PURE__*/_jsx(Form.Item, {
+        return /*#__PURE__*/_jsx(React.Fragment, {
+          children: /*#__PURE__*/_jsx(Form.Item, {
             noStyle: true,
             shouldUpdate: function shouldUpdate(l, n) {
               var _item$depends, _item$showDepends;
@@ -150,41 +120,35 @@ function HeadComponent(_ref) {
                 });
               }
               var itemContent = /*#__PURE__*/_jsx(HeadFormItem, {
-                index: index,
                 name: item.name,
                 label: item.label,
                 rules: item.rules,
                 value: item.value,
                 dependParam: dependParam,
-                onSetShowNum: onSetShowNum,
-                formItemsRef: formItemsRef,
                 formItemLabelWidth: formItemLabelWidth
               });
               if (!isShow) return null;
               return itemContent;
             }
-          }), showNum === index && !isExpand && renderOperation]
+          })
         }, item.name);
       }
       var itemContent = /*#__PURE__*/_jsx(HeadFormItem, {
-        index: index,
         name: item.name,
         value: item.value,
         rules: item.rules,
         label: item.label,
-        onSetShowNum: onSetShowNum,
-        formItemsRef: formItemsRef,
         formItemLabelWidth: formItemLabelWidth
       });
-      return /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [itemContent, showNum === index && !isExpand && renderOperation]
+      return /*#__PURE__*/_jsx(React.Fragment, {
+        children: itemContent
       }, item.name);
     });
   };
 
   // 尺寸变化重设尺寸
   var resizeFn = _debounce(function () {
-    onSetShowNum();
+    update({});
   }, 500);
 
   // 监听dom尺寸变化
@@ -195,16 +159,12 @@ function HeadComponent(_ref) {
   // table是否有边框
   var hasBorder = titleBordered === true;
   var formStyles = {
-    gap: '16px 0'
+    flexWrap: isExpand ? 'wrap' : 'nowrap'
   };
-  // 单行条件右对齐
-  if (!isExpand && (hasMore || formItemsRef.current.length - 1 === showNum)) {
-    formStyles.justifyContent = 'flex-end';
-  }
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [hasItem && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(CcsResizeObserver.Target, {
-        targetRef: cardRef,
+        targetRef: formItemsRef,
         onResize: onResize
       }), /*#__PURE__*/_jsx(Card, {
         className: "ccs-pl-adaptation",
@@ -216,23 +176,35 @@ function HeadComponent(_ref) {
         } : {}),
         styles: {
           body: {
-            padding: 16,
-            height: hasMore && !isExpand ? 64 : 'auto'
+            padding: 16
           }
         },
         bordered: hasBorder,
         title: title,
-        ref: cardRef,
         children: /*#__PURE__*/_jsxs(Form, {
           initialValues: formInitValues,
           form: form,
           onFinish: onSearch,
           layout: "inline",
           style: formStyles,
-          children: [renderFormItems(), isExpand && renderOperation]
+          children: [/*#__PURE__*/_jsxs("div", {
+            style: {
+              justifyContent: isExpand && hasMore ? 'flex-start' : 'flex-end',
+              height: isExpand ? 'auto' : 32
+            },
+            className: "ccs-pl-adaptation-form",
+            ref: formItemsRef,
+            children: [renderFormItems(), isExpand && renderSearchBtn]
+          }), !isExpand && /*#__PURE__*/_jsx("div", {
+            style: {
+              flex: '0 0 auto',
+              paddingLeft: 10
+            },
+            children: renderSearchBtn
+          })]
         })
       })]
-    }), /*#__PURE__*/_jsxs(Card, {
+    }), toolbar && /*#__PURE__*/_jsxs(Card, {
       styles: {
         cover: {
           borderRadius: 0

package/es/pro-table/index.less

@@ -52,6 +52,18 @@
     }
   }
 
+  &-adaptation-form {
+    flex: 1 1 auto;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px 10px;
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
   .ant-form-item {
     margin-bottom: 0;
   }

package/es/pro-table/operation.js

@@ -137,7 +137,8 @@ export default function TableOperation(_ref) {
         }),
         type: "text",
         style: {
-          width: 24
+          width: 24,
+          marginLeft: 4
         }
       })
     }), filterColumns && /*#__PURE__*/_jsx(Popover, {

package/es/pro-table/table.d.ts

@@ -28,7 +28,7 @@ type TableTitleType<T> = {
 export type CcsTableProps<T> = Omit<TableProps<T>, 'columns' | 'title'> & {
     data?: CCS.TableData<T>;
     /** request 方法 */
-    request?: (params: any) => void;
+    request?: (params: any) => Promise<HttpPageResult<T>>;
     /** request 额外参数 */
     requestParam?: ParamType;
     /** class name */
@@ -41,7 +41,7 @@ export type CcsTableProps<T> = Omit<TableProps<T>, 'columns' | 'title'> & {
     title?: ({ selectedRows, data, onClear }: TableTitleType<T>) => ReactNode;
 };
 type FormLayout = 'horizontal' | 'inline' | 'vertical' | 'adaptation';
-export type CcsProTableProps<T> = {
+export type CcsProTableProps<RecordType> = {
     /** api权限标识 */
     auth?: string | 'ignore';
     /** 是否初始查询，默认true */
@@ -65,7 +65,7 @@ export type CcsProTableProps<T> = {
     /** 展开查询条件，默认false */
     expandForm?: boolean;
     /** table 数据区域 */
-    table?: CcsTableProps<T>;
+    table?: CcsTableProps<RecordType>;
     /** table style */
     tableStyle?: CSSProperties;
     /** 父级值字段 */
@@ -73,7 +73,7 @@ export type CcsProTableProps<T> = {
     /** 水印文字 */
     watermark?: string;
     /** ref 回调方法 */
-    proRef?: CCS.TableInstanceRef<T>;
+    proRef?: CCS.TableInstanceRef<RecordType>;
     /** 显示序号 */
     showNumber?: boolean;
     /** class */
@@ -87,7 +87,7 @@ export type CcsProTableProps<T> = {
     /** 请求前格式化参数 */
     onSearchBefore?: (params: SearchBeforeType, eventType?: SearchEventType) => SearchBeforeType;
     /** 请求后格式化结果 */
-    onSearchAfter?: (data: HttpPageResult<T>, eventType?: SearchEventType) => any;
+    onSearchAfter?: (data: HttpPageResult<RecordType>, eventType?: SearchEventType) => any;
 };
 export type TableEventType = {
     key: 'columnFilter' | 'fullScreen';
@@ -107,5 +107,5 @@ export declare const TableSelectionContext: React.Context<{
  * @param ref
  * @returns
  */
-declare const InternalProTable: <T extends object = any>(props: CcsProTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const InternalProTable: <RecordType extends object = any>(props: CcsProTableProps<RecordType>) => import("react/jsx-runtime").JSX.Element;
 export default InternalProTable;

package/es/pro-table/table.js

@@ -494,7 +494,7 @@ var InternalProTable = function InternalProTable(props) {
       } : undefined
     }));
   };
-  var newToolbar = /*#__PURE__*/_jsx(TableSelectionContext.Provider, {
+  var newToolbar = toolbar && /*#__PURE__*/_jsx(TableSelectionContext.Provider, {
     value: {
       selectedRows: selectedRows
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ccs-ui/rc-pro",
-  "version": "1.1.25-beta-22",
+  "version": "1.1.25-beta-24",
   "description": "验证码组件兼容暗黑模式;proTable封装rowselection代码;proTable添加自适应布局模式;",
   "license": "MIT",
   "author": {