@hzab/list-render 1.9.3-beta1 → 1.9.4-beta

package/package.json

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

package/src/{index.ts → index.js}

@@ -1,4 +1,4 @@
-import ListRender from "./list-render";
+import ListRender from "./list-render.jsx";
 
 export * from "@hzab/data-model";
 

package/src/{list-render.tsx → list-render.jsx}

@@ -6,7 +6,6 @@ import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "re
 import { Button, message } from "antd";
 import _ from "lodash";
 import axios, { getCancelTokenSource } from "@hzab/data-model/src/axios";
-import { CancelTokenSource } from "axios";
 
 import QueryRender from "./query-render";
 import Pagination from "./pagination-render";
@@ -16,11 +15,9 @@ import DetailModal from "./DetailModal";
 
 import { objToFormData } from "./common/utils";
 
-import { IListRenderProps, IFormModal, IDetailModal, IQuery } from "./type";
-
 import "./index.less";
 
-const ListRender = forwardRef(function (props: IListRenderProps, parentRef) {
+const ListRender = forwardRef(function (props, parentRef) {
   const {
     idKey = "id",
     i18n,
@@ -38,26 +35,22 @@ const ListRender = forwardRef(function (props: IListRenderProps, parentRef) {
      * 表单提交是否使用 FormData 格式
      */
     useFormData: _useFormData,
-    /**
-     * 是否有分页
-     */
-    hasPagination = true,
   } = props;
-
   const { createText = props.createText } = i18n || {};
   const [total, setTotal] = useState(0);
   const [list, setList] = useState([]);
   const [formState, setFormState] = useState("");
   const [rowId, setRowId] = useState(0);
   const [listLoading, setListLoading] = useState(false);
-  const formModalRef = useRef<IFormModal>();
-  const detailModalRef = useRef<IDetailModal>();
-  const queryRef = useRef<IQuery>();
-  const formQueryRef = useRef<IQuery>({});
-  const modelQueryRef = useRef<IQuery>({});
-  const paginationQueryRef = useRef<IQuery>(hasPagination ? { pageNum: 1, pageSize: 10 } : {});
+  const formModalRef = useRef();
+  const detailModalRef = useRef();
+  const queryRef = useRef();
+  const modelQueryRef = useRef({});
+  const formQueryRef = useRef({});
+  const paginationQueryRef = useRef({ pageNum: 1, pageSize: 10 });
   const useFormData = _useFormData ?? dialogConf.useFormData ?? modalConf?.useFormData;
-  const getListSourceRef = useRef<CancelTokenSource>();
+  const getListSourceRef = useRef();
+  const [showSearch, setShowSearch] = useState(true);
 
   useImperativeHandle(parentRef, () => ({
     getList,
@@ -71,7 +64,7 @@ const ListRender = forwardRef(function (props: IListRenderProps, parentRef) {
     onDel,
   }));
 
-  const { schema, config = {}, model, msgConf = {} }: IListRenderProps = props;
+  const { schema = {}, config = {}, model = {}, msgConf = {} } = props;
 
   useEffect(() => {
     if (model) {
@@ -80,9 +73,7 @@ const ListRender = forwardRef(function (props: IListRenderProps, parentRef) {
       } else {
         modelQueryRef.current = model?.query;
       }
-      if (hasPagination) {
-        model.query.pageNum = 1;
-      }
+      model.query.pageNum = 1;
     }
     !props.closeAutoRequest && getList();
   }, []);
@@ -110,7 +101,7 @@ const ListRender = forwardRef(function (props: IListRenderProps, parentRef) {
     if (!model?.getList && Array.isArray(props.list)) {
       setListLoading(true);
       const { list } = props;
-      const { pageNum = 1, pageSize = hasPagination ? 10 : Infinity } = modelQueryRef.current || {};
+      const { pageNum = 1, pageSize = 10 } = modelQueryRef.current || {};
       setList(list.slice(pageSize * (pageNum - 1), pageNum * pageSize));
       setTotal(list.length);
       props.onGetListEnd && props.onGetListEnd({ list, pagination: { pageNum, pageSize } });
@@ -142,9 +133,7 @@ const ListRender = forwardRef(function (props: IListRenderProps, parentRef) {
     model.query = mergedQueries;
 
     // 取消上一次请求
-    getListSourceRef.current?.cancel(
-      JSON.stringify({ code: 601, message: "取消上一次请求", getListApi: model.getListApi, query: model.query }),
-    );
+    getListSourceRef.current?.cancel({ code: 601, message: "取消上一次请求" });
 
     // 重新获取 source
     getListSourceRef.current = getCancelTokenSource();
@@ -197,9 +186,7 @@ const ListRender = forwardRef(function (props: IListRenderProps, parentRef) {
       model.query.pageSize = 10;
     }
     formQueryRef.current = query;
-    if (model.query) {
-      model.query = Object.assign(model.query, query);
-    }
+    model.query = Object.assign(model.query, query);
     getList(query);
   }
 
@@ -233,7 +220,7 @@ const ListRender = forwardRef(function (props: IListRenderProps, parentRef) {
 
   function onDetail(row, idx) {
     if (props.fetchOnEdit !== false) {
-      const getQuery = { id: undefined };
+      const getQuery = {};
       if (props.fetchById !== false) {
         getQuery.id = row[idKey];
       } else {
@@ -261,9 +248,7 @@ const ListRender = forwardRef(function (props: IListRenderProps, parentRef) {
 
   function onEdit(row, idx) {
     if (props.fetchOnEdit !== false) {
-      const getQuery = {
-        id: undefined,
-      };
+      const getQuery = {};
       if (props.fetchById !== false) {
         getQuery.id = row[idKey];
       } else {
@@ -293,7 +278,7 @@ const ListRender = forwardRef(function (props: IListRenderProps, parentRef) {
   async function onEditSubmit(data) {
     let _data = data;
     if (isPatchUpdate) {
-      if (typeof model?.patchMap === "function") {
+      if (model?.patchMap === "function") {
         _data = model.patchMap(data);
       }
     } else if (typeof model?.updateMap === "function") {
@@ -340,10 +325,14 @@ const ListRender = forwardRef(function (props: IListRenderProps, 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}
@@ -394,6 +383,7 @@ const ListRender = forwardRef(function (props: IListRenderProps, parentRef) {
         onDetail={onDetail}
         onSearch={onSearch}
         getList={getList}
+        setShowSearch={handleSetShowSearch}
         loading={listLoading}
         tableProps={props.tableProps}
         getFieldListOpt={props.getFieldListOpt}
@@ -446,4 +436,10 @@ const ListRender = forwardRef(function (props: IListRenderProps, parentRef) {
   );
 });
 
+ListRender.defaultProps = {
+  model: {
+    query: {},
+  },
+};
+
 export default ListRender;

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;
+  }
+}

package/src/type.ts

@@ -1,335 +0,0 @@
-import { Schema } from "@formily/react";
-
-/**
- * 文案
- */
-export interface II18n {
-  /**
-   * 新增按钮文案 默认 新增
-   */
-  createText?: string;
-}
-
-/**
- * 弹窗配置
- */
-export interface IModalConf {
-  /**
-   * 使用 FormData 格式传输数据
-   */
-  useFormData?: boolean;
-}
-
-/**
- * query 参数
- */
-export interface IQuery {
-  /**
-   * 分页当前页码
-   */
-  pageNum?: number;
-  /**
-   * 分页条数
-   */
-  pageSize?: number;
-}
-
-/**
- * 表单弹窗
- */
-export interface IFormModal {
-  show: Function;
-}
-
-/**
- * 详情弹窗
- */
-export interface IDetailModal {
-  show: Function;
-}
-
-/**
- * data model
- */
-export interface IDataModel {
-  /**
-   * 列表请求 api
-   */
-  getListApi: string;
-  /**
-   * 列表请求函数
-   */
-  getList: Function;
-  /**
-   * 详情请求函数
-   */
-  get: Function;
-  /**
-   * 新增请求函数
-   */
-  create: Function;
-  /**
-   * put 编辑请求函数
-   */
-  update: Function;
-  /**
-   * patch 编辑请求函数
-   */
-  patch: Function;
-  /**
-   * 删除请求函数
-   */
-  delete: Function;
-  /**
-   * get 请求入参
-   */
-  query?: {
-    /**
-     * 分页当前页码
-     */
-    pageNum?: number;
-    /**
-     * 分页条数
-     */
-    pageSize?: number;
-  };
-  /**
-   * 新增入参数据处理
-   * @param d
-   * @returns
-   */
-  createMap?: (d) => typeof d;
-  /**
-   * 编辑数据处理
-   * @param d
-   * @returns
-   */
-  updateMap?: (d) => typeof d;
-  /**
-   * patch 编辑数据处理
-   * @param d
-   * @returns
-   */
-  patchMap?: (d) => typeof d;
-}
-
-export interface ISlots {
-  /**
-   * header 操作按钮前插槽
-   */
-  headerActionPrefix?: Function;
-  /**
-   * header 操作按钮后插槽
-   */
-  headerActionSuffix?: Function;
-  /**
-   * header 外面的插槽
-   */
-  HeaderOthersSuffix?: Function;
-}
-
-/**
- * list render props
- */
-export interface IListRenderProps {
-  /**
-   * 容器类名
-   */
-  className?: string;
-  /**
-   * 列表 schema 配置
-   */
-  schema: { schema: Schema };
-  /**
-   * data-model 实例
-   */
-  model?: IDataModel;
-  /**
-   * 列表数据，用于直接渲染而不进行请求或处理。需要本地增删改查使用 data-mode/src/array-data-model.js
-   */
-  list?: [Object];
-  /**
-   * 列表配置
-   */
-  config?: Object;
-  /**
-   * message 消息配置
-   */
-  msgConf?: Object;
-  /**
-   * 新增按钮文案 默认 新增
-   */
-  createText?: string;
-  /**
-   * 列表唯一值 默认 id
-   */
-  idKey: string;
-  /**
-   * i18n 文案
-   */
-  i18n?: II18n;
-  /**
-   * query 是否继承 model query， 默认 false
-   */
-  queryFormIsExtendModelQuery?: boolean;
-  /**
-   * dialog 弹窗配置
-   */
-  dialogConf: IModalConf;
-  /**
-   * dialog drawer 弹窗配置
-   */
-  modalConf: IModalConf;
-  /**
-   * 编辑接口使用 patch 发起请求 默认 false
-   */
-  isPatchUpdate: boolean;
-  /**
-   * 表单、详情 展示模式： dialog drawer
-   */
-  modalMode?: "dialog" | "drawer";
-  /**
-   * 表单提交是否使用 FormData 格式
-   */
-  useFormData?: boolean;
-  /**
-   * 是否关闭初始自动请求
-   */
-  closeAutoRequest?: boolean;
-  /**
-   * 获取列表完成回调
-   */
-  onGetListEnd?: ({ list, pagination: { pageNum, pageSize } }) => void;
-  /**
-   * 新增完成回调
-   */
-  onCreateSuc?: (res) => void;
-  /**
-   * 编辑完成回调
-   */
-  onEditSuc?: (res) => void;
-  /**
-   * 删除完成回调
-   */
-  onDelSuc?: (res) => void;
-  /**
-   * 请求获取详情数据，而非直接使用列表数据 默认 true
-   */
-  fetchOnEdit?: boolean;
-  /**
-   * 通过 id 请求获取详情数据
-   */
-  fetchById?: boolean;
-  /**
-   * 列表插槽
-   */
-  Slots?: ISlots;
-  /**
-   * 【废弃】弹窗表单 props
-   */
-  dialogFormProps?: Object;
-  /**
-   * 弹窗表单 props
-   */
-  modalFormProps?: Object;
-  /**
-   * 【废弃】表单弹窗关闭回调
-   */
-  onFormDialogClose?: Function;
-  /**
-   * 表单弹窗关闭回调
-   */
-  onFormModalClose?: Function;
-  /**
-   * 【废弃】表单弹窗 props
-   */
-  dialogProps?: Object;
-  /**
-   * 表单弹窗 props
-   */
-  modalProps?: Object;
-  /**
-   * 【废弃】弹窗表单 渲染完毕回调
-   */
-  dialogFormMount?: Function;
-  /**
-   * 弹窗表单 渲染完毕回调
-   */
-  modalFormMount?: Function;
-  /**
-   * 【废弃】弹窗详情组件 props
-   */
-  dialogDetailProps?: Function;
-  /**
-   * 弹窗详情组件 props
-   */
-  modalDetailProps?: Function;
-  /**
-   * header 布局
-   */
-  verticalHeader?: boolean;
-  /**
-   * 是否有过滤项
-   */
-  hasQuery?: boolean;
-  /**
-   * 搜索过滤项文案，入参字段为 search
-   */
-  search?: string;
-  /**
-   * 过滤项字段数组
-   */
-  filters?: [string];
-  /**
-   * query 配置
-   */
-  queryConf?: Object;
-  /**
-   * query 表单默认值
-   */
-  queryFormInitialValues?: Object;
-  /**
-   * formily scope 自定义参数
-   */
-  schemaScope?: Object;
-  /**
-   * formily components 自定义组件
-   */
-  components?: Object;
-  /**
-   * 是否有新增按钮
-   */
-  hasCreate?: boolean;
-  /**
-   * 是否有操作列
-   */
-  hasAction?: boolean;
-  /**
-   * 是否有 分页
-   */
-  hasPagination?: boolean;
-  /**
-   * table 配置
-   */
-  tableConf?: Object;
-  /**
-   * table props 参数
-   */
-  tableProps?: Object;
-  /**
-   * getFieldList opt 获取 field list 的配置
-   */
-  getFieldListOpt?: Object;
-  /**
-   * 分页器配置 props
-   */
-  paginationConf?: Object;
-  /**
-   * 新增、编辑、详情表单初始值
-   */
-  formInitialValues?: Object;
-  /**
-   * 详情自定义组件
-   */
-  detailComponents?: Object;
-}