@hzab/list-render 1.10.17 → 1.10.19

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# @hzab/list-render@1.10.19
+
+fix: 修复 PaginationRender 的 pageSizeOptions 取值
+feat: 分页支持全部选项
+
+# @hzab/list-render@1.10.18
+
+fix: isCancel 兼容 data-model 新老版本
+
 # @hzab/list-render@1.10.17
 
 fix: createMap updateMap 支持异步

package/README.md

@@ -255,9 +255,11 @@ const Slots = {
 
 - 默认参数参考 antd pagination 组件
 
-| 属性名称        | 属性类型 | 必须 | 默认值            | 描述               |
-| --------------- | -------- | ---- | ----------------- | ------------------ |
-| pageSizeOptions | Array    | 否   | [10, 20, 50, 100] | 可选 pageSize 数组 |
+| 属性名称        | 属性类型 | 必须 | 默认值            | 描述                                        |
+| --------------- | -------- | ---- | ----------------- | ------------------------------------------- |
+| pageSizeOptions | Array    | 否   | [10, 20, 50, 100] | 可选 pageSize 数组                          |
+| isAllSelect     | boolean  | 否   | false             | 是否使用全部                                |
+| isAllSelectKey  | string   | 否   | "isAllSelect"     | 选中全部时告知后端的字段名称，实际值为 true |
 
 #### getFieldListOpt
 
@@ -566,7 +568,6 @@ async function test() {
 ## 命令
 
 - Mac 执行该命令，设置 pre-commit 为可执行文件
-
   - npm run mac-chmod
   - chmod +x .husky && chmod +x .husky/pre-commit
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.10.17",
+  "version": "1.10.19",
   "description": "",
   "main": "src",
   "scripts": {

package/src/list-render.jsx

@@ -5,7 +5,7 @@ model 不要定义在组件外部，避免出现 query 异常的情况。
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { Button, message } from "antd";
 import _, { cloneDeep } from "lodash";
-import axios, { getCancelTokenSource } from "@hzab/data-model/src/axios";
+import axiosI, { isCancel, getCancelTokenSource } from "@hzab/data-model/src/axios";
 
 import QueryRender from "./query-render";
 import Pagination from "./pagination-render";
@@ -61,6 +61,8 @@ const ListRender = forwardRef(function (props, parentRef) {
      * */
     appendUrlQueryKey = URL_PARAM_NAME,
   } = props;
+  const { isAllSelect = false, isAllSelectKey = "isAllSelect" } = props.paginationConf || {};
+
   const pageSizeOptions = props.paginationConf?.pageSizeOptions || pageSizeOptionMap[props.layout] || [10, 20, 50, 100];
   // const [pageSizeOptions, setPageSizeOptions] = useState(
   //   props.paginationConf?.pageSizeOptions || pageSizeOptionMap[props.layout] || [10, 20, 50, 100],
@@ -179,9 +181,16 @@ const ListRender = forwardRef(function (props, parentRef) {
       // 重新获取 source
       getListSourceRef.current = getCancelTokenSource();
 
+      //处理分页特殊情况 - 全部
+      const getListSource = cloneDeep(mergedQueries);
+      if (isAllSelect && getListSource.pageSize === Infinity) {
+        getListSource[isAllSelectKey] = true;
+        getListSource.pageSize = undefined;
+      }
+
       return model
         ?.getList(
-          cloneDeep(mergedQueries),
+          getListSource,
           {},
           {
             cancelToken: getListSourceRef.current?.token,
@@ -195,7 +204,9 @@ const ListRender = forwardRef(function (props, parentRef) {
           setListLoading(false);
         })
         .catch((err) => {
-          if (axios.isCancel(err)) {
+          // 兼容新老版本 data-model isCancel 取法
+          const _isCancel = isCancel || axiosI.isCancel;
+          if (typeof _isCancel === "function" && _isCancel(err)) {
             console.info(`请求已取消:`, "", err.message);
             return Promise.reject(err);
           }

package/src/pagination-render/index.jsx

@@ -1,51 +1,53 @@
-import { useEffect, useState } from "react";
-import { Pagination } from "antd";
-
-import "./index.less";
-
-function PaginationRender(props) {
-  const [pageSize, setPageSize] = useState(props.query?.pageSize || pageSizeOptions[0]);
-  const [pageNum, setPageNumber] = useState(props.query?.pageNum || 1);
-
-  useEffect(() => {
-    const { query } = props;
-    if (!query) {
-      return;
-    }
-    if (query.pageSize && query.pageSize !== pageSize) {
-      setPageSize(query.pageSize);
-    }
-    if (query.pageNum && query.pageNum !== pageNum) {
-      setPageNumber(query.pageNum);
-    }
-  }, [props.query?.pageNum, props.query?.pageSize]);
-
-  function onChange(page, size) {
-    let _size = size;
-    let _page = page;
-    if (pageSize !== size) {
-      _page = 1;
-    }
-    setPageSize(_size);
-    setPageNumber(_page);
-    props.onChange && props.onChange(_page, _size);
-  }
-
-  return (
-    <div className="pagination-render-wrap">
-      <Pagination
-        {...(props.config || {})}
-        className="pagination-render"
-        current={pageNum}
-        pageSize={pageSize}
-        onChange={onChange}
-        pageSizeOptions={props.pageSizeOptions}
-        total={props.total}
-        showTotal={(total) => `总条数 ${total} 条`}
-        showSizeChanger
-      />
-    </div>
-  );
-}
-
-export default PaginationRender;
+import { useEffect, useState } from "react";
+import { Pagination } from "antd";
+
+import "./index.less";
+
+function PaginationRender(props) {
+  const { config } = props;
+  const { isAllSelect = false } = config || {};
+  const [pageSize, setPageSize] = useState(props.query?.pageSize || props.pageSizeOptions[0]);
+  const [pageNum, setPageNumber] = useState(props.query?.pageNum || 1);
+
+  useEffect(() => {
+    const { query } = props;
+    if (!query) {
+      return;
+    }
+    if (query.pageSize && query.pageSize !== pageSize) {
+      setPageSize(query.pageSize);
+    }
+    if (query.pageNum && query.pageNum !== pageNum) {
+      setPageNumber(query.pageNum);
+    }
+  }, [props.query?.pageNum, props.query?.pageSize]);
+
+  function onChange(page, size) {
+    let _size = size;
+    let _page = page;
+    if (pageSize !== size) {
+      _page = 1;
+    }
+    setPageSize(_size);
+    setPageNumber(_page);
+    props.onChange && props.onChange(_page, _size);
+  }
+
+  return (
+    <div className="pagination-render-wrap">
+      <Pagination
+        {...(props.config || {})}
+        className={`pagination-render ${isAllSelect ? "pagination-infinity" : null} ${pageSize == Infinity ? "pagination-infinity-checked" : ""}`}
+        current={pageNum}
+        pageSize={pageSize}
+        onChange={onChange}
+        pageSizeOptions={isAllSelect ? [...props.pageSizeOptions, Infinity] : props.pageSizeOptions}
+        total={props.total}
+        showTotal={(total) => `总条数 ${total} 条`}
+        showSizeChanger
+      />
+    </div>
+  );
+}
+
+export default PaginationRender;