@hzab/list-render 1.9.3 → 1.9.4-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.9.3",
+  "version": "1.9.4-beta",
   "description": "",
   "main": "src",
   "scripts": {

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,
@@ -324,10 +325,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 +383,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,15 @@ 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: {},
@@ -238,6 +245,8 @@ function TableRender(props) {
     }
 
     setColumns(columns);
+    setColumnList(columns);
+    console.log("columns", columns);
   }, [props.schema, props.config]);
 
   // 解决 FormilyField 中无相关参数报错的问题。自定义参数都从这里传入
@@ -245,8 +254,58 @@ function TableRender(props) {
     scenario: scenario,
   };
 
+  const onChange = (e, col) => {
+    console.log(`checked = ${e.target.checked}`);
+
+    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">
+          <FilterOutlined
+            className="table-filter-icon"
+            onClick={() => {
+              props.setShowSearch && props.setShowSearch();
+            }}
+          />
+          <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-left: 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;
+  }
+}