@hzab/list-render 1.9.5 → 1.9.7

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# @hzab/list-render@1.9.7
+
+fix: 修复 分页配置时数据覆盖问题
+
+# @hzab/list-render@1.9.6
+
+feat: 新增列筛选，筛选项显隐
+fix: 修复 分页配置
+
 # @hzab/list-render@1.9.5
 
 fix: 修复 datePicker 传入 showTime 为 true 时显示时分秒

package/package.json

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

package/src/components/PrefixNode/index.tsx

@@ -41,8 +41,6 @@ export const PrefixNode = (props) => {
   return showVal?.map((it, i) => {
     const option = getFieldOptItByVal(it, _field) || {};
     const PreNode = option.PrefixNode;
-    console.log(it, option);
-
     return (
       <div key={it + "" + i} className="table-cell-prefix-box">
         {PreNode ? (

package/src/list-render.jsx

@@ -50,6 +50,7 @@ const ListRender = forwardRef(function (props, parentRef) {
   const paginationQueryRef = useRef({ pageNum: 1, pageSize: 10 });
   const useFormData = _useFormData ?? dialogConf.useFormData ?? modalConf?.useFormData;
   const getListSourceRef = useRef();
+  const [showSearch, setShowSearch] = useState(true);
 
   useImperativeHandle(parentRef, () => ({
     getList,
@@ -71,6 +72,10 @@ const ListRender = forwardRef(function (props, parentRef) {
         model.query = {};
       } else {
         modelQueryRef.current = model?.query;
+        paginationQueryRef.current = {
+          pageNum: model?.query?.pageNum ?? paginationQueryRef.current?.pageNum,
+          pageSize: model?.query?.pageSize ?? paginationQueryRef.current?.pageSize,
+        };
       }
       model.query.pageNum = 1;
     }
@@ -324,10 +329,14 @@ const ListRender = forwardRef(function (props, parentRef) {
   const modalProps = { ...props.dialogProps, ...props.modalProps };
   const modalFormMount = props.dialogFormMount ?? props.modalFormMount;
 
+  const handleSetShowSearch = () => {
+    setShowSearch(!showSearch);
+  };
+
   return (
     <div className={`list-render ${props.className}`}>
       <div className={`list-header ${props.verticalHeader ? "vertical-header" : ""}`}>
-        {props.hasQuery !== false ? (
+        {props.hasQuery !== false && showSearch ? (
           <QueryRender
             ref={queryRef}
             schema={schema}
@@ -378,6 +387,7 @@ const ListRender = forwardRef(function (props, parentRef) {
         onDetail={onDetail}
         onSearch={onSearch}
         getList={getList}
+        setShowSearch={handleSetShowSearch}
         loading={listLoading}
         tableProps={props.tableProps}
         getFieldListOpt={props.getFieldListOpt}

package/src/table-render/index.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useMemo, useCallback, useRef } from "react";
-import { Table, Button, Popconfirm, Tooltip } from "antd";
+import { Table, Button, Popconfirm, Tooltip, Checkbox, Popover } from "antd";
 import { Schema } from "@formily/json-schema";
-import { QuestionCircleOutlined } from "@ant-design/icons";
+import { QuestionCircleOutlined, FilterOutlined, SettingOutlined } from "@ant-design/icons";
 import _ from "lodash";
 
 import { FormilyField } from "../components/Formily/FormilyField";
@@ -19,8 +19,16 @@ const scenario = "table-render";
 function TableRender(props) {
   const { config = {}, query = {}, i18n } = props;
   const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
-  const { orderColType, orderColWidth, tableEmptyValue, isTableSortXIdex = false } = config || {};
+  const {
+    orderColType,
+    orderColWidth,
+    tableEmptyValue,
+    isShowTableFilter = false,
+    isTableSortXIdex = false,
+  } = config || {};
+
   const [columns, setColumns] = useState([]);
+  const [columnList, setColumnList] = useState([]);
 
   const formilyRef = useRef({
     fields: {},
@@ -184,7 +192,6 @@ function TableRender(props) {
           //详情按钮权限
           const _hasDetail =
             hasDetail && typeof hasDetail === "function" ? hasDetail(record, index) : hasDetail !== false;
-          console.log("_hasDetail", hasDetail, _hasDetail);
 
           //删除按钮权限
           const _hasDel = hasDel && typeof hasDel === "function" ? hasDel(record, index) : hasDel !== false;
@@ -238,6 +245,7 @@ function TableRender(props) {
     }
 
     setColumns(columns);
+    setColumnList(columns);
   }, [props.schema, props.config]);
 
   // 解决 FormilyField 中无相关参数报错的问题。自定义参数都从这里传入
@@ -245,8 +253,59 @@ function TableRender(props) {
     scenario: scenario,
   };
 
+  const onChange = (e, col) => {
+    if (e.target.checked) {
+      const list = [...columns, col];
+      // 创建映射表提高查找效率
+      const columnIndexMap = new Map(columnList.map((item, index) => [item.key, index]));
+      setColumns(list.sort((a, b) => columnIndexMap.get(a.key) - columnIndexMap.get(b.key)));
+    } else {
+      setColumns(columns.filter((item) => item.key !== col.key));
+    }
+  };
+
   return (
     <div className="table-render-wrap">
+      {isShowTableFilter ? (
+        <div className="table-render-wrap-header">
+          <div
+            className="table-filter"
+            onClick={() => {
+              props.setShowSearch && props.setShowSearch();
+            }}
+          >
+            <FilterOutlined className="table-filter-icon" />
+            显示过滤项
+          </div>
+          <Popover
+            placement="bottomRight"
+            content={
+              <div className="table-popover-content">
+                {columnList.map((col) => {
+                  if (col.key === "_$actions") {
+                    return null;
+                  }
+                  return (
+                    <Checkbox
+                      key={col.key}
+                      checked={columns.findIndex((item) => item.key === col.key) !== -1}
+                      onChange={(e) => onChange(e, col)}
+                    >
+                      {col.title}
+                    </Checkbox>
+                  );
+                })}
+              </div>
+            }
+            trigger="click"
+          >
+            <div className="table-filter">
+              <SettingOutlined className="table-filter-icon" />
+              显示列
+            </div>
+          </Popover>
+        </div>
+      ) : null}
       <Table
         className="table-render"
         rowKey={props.idKey || "id"}

package/src/table-render/index.less

@@ -1,4 +1,19 @@
 .table-render-wrap {
+  .table-render-wrap-header {
+    padding: 0 12px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-bottom: 12px;
+    .table-filter {
+      font-size: 16px;
+      cursor: pointer;
+      .table-filter-icon {
+        margin: 0 4px 0 10px;
+        cursor: pointer;
+      }
+    }
+  }
   .inline-block-max-w {
     display: inline-block;
     max-width: 100%;
@@ -15,3 +30,12 @@
     text-overflow: ellipsis;
   }
 }
+.table-popover-content {
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  .ant-checkbox-wrapper {
+    margin-bottom: 8px;
+    margin-left: 0 !important;
+  }
+}