@hzab/list-render 1.9.2-beta6 → 1.9.3-beta1

package/package.json

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

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

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

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

@@ -6,6 +6,7 @@ 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";
@@ -15,9 +16,11 @@ import DetailModal from "./DetailModal";
 
 import { objToFormData } from "./common/utils";
 
+import { IListRenderProps, IFormModal, IDetailModal, IQuery } from "./type";
+
 import "./index.less";
 
-const ListRender = forwardRef(function (props, parentRef) {
+const ListRender = forwardRef(function (props: IListRenderProps, parentRef) {
   const {
     idKey = "id",
     i18n,
@@ -35,21 +38,26 @@ const ListRender = forwardRef(function (props, 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();
-  const detailModalRef = useRef();
-  const queryRef = useRef();
-  const modelQueryRef = useRef({});
-  const formQueryRef = useRef({});
-  const paginationQueryRef = useRef({ pageNum: 1, pageSize: 10 });
+  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 useFormData = _useFormData ?? dialogConf.useFormData ?? modalConf?.useFormData;
-  const getListSourceRef = useRef();
+  const getListSourceRef = useRef<CancelTokenSource>();
 
   useImperativeHandle(parentRef, () => ({
     getList,
@@ -63,7 +71,7 @@ const ListRender = forwardRef(function (props, parentRef) {
     onDel,
   }));
 
-  const { schema = {}, config = {}, model = {}, msgConf = {} } = props;
+  const { schema, config = {}, model, msgConf = {} }: IListRenderProps = props;
 
   useEffect(() => {
     if (model) {
@@ -72,7 +80,9 @@ const ListRender = forwardRef(function (props, parentRef) {
       } else {
         modelQueryRef.current = model?.query;
       }
-      model.query.pageNum = 1;
+      if (hasPagination) {
+        model.query.pageNum = 1;
+      }
     }
     !props.closeAutoRequest && getList();
   }, []);
@@ -100,7 +110,7 @@ const ListRender = forwardRef(function (props, parentRef) {
     if (!model?.getList && Array.isArray(props.list)) {
       setListLoading(true);
       const { list } = props;
-      const { pageNum = 1, pageSize = 10 } = modelQueryRef.current || {};
+      const { pageNum = 1, pageSize = hasPagination ? 10 : Infinity } = modelQueryRef.current || {};
       setList(list.slice(pageSize * (pageNum - 1), pageNum * pageSize));
       setTotal(list.length);
       props.onGetListEnd && props.onGetListEnd({ list, pagination: { pageNum, pageSize } });
@@ -132,7 +142,9 @@ const ListRender = forwardRef(function (props, parentRef) {
     model.query = mergedQueries;
 
     // 取消上一次请求
-    getListSourceRef.current?.cancel({ code: 601, message: "取消上一次请求" });
+    getListSourceRef.current?.cancel(
+      JSON.stringify({ code: 601, message: "取消上一次请求", getListApi: model.getListApi, query: model.query }),
+    );
 
     // 重新获取 source
     getListSourceRef.current = getCancelTokenSource();
@@ -185,7 +197,9 @@ const ListRender = forwardRef(function (props, parentRef) {
       model.query.pageSize = 10;
     }
     formQueryRef.current = query;
-    model.query = Object.assign(model.query, query);
+    if (model.query) {
+      model.query = Object.assign(model.query, query);
+    }
     getList(query);
   }
 
@@ -219,7 +233,7 @@ const ListRender = forwardRef(function (props, parentRef) {
 
   function onDetail(row, idx) {
     if (props.fetchOnEdit !== false) {
-      const getQuery = {};
+      const getQuery = { id: undefined };
       if (props.fetchById !== false) {
         getQuery.id = row[idKey];
       } else {
@@ -247,7 +261,9 @@ const ListRender = forwardRef(function (props, parentRef) {
 
   function onEdit(row, idx) {
     if (props.fetchOnEdit !== false) {
-      const getQuery = {};
+      const getQuery = {
+        id: undefined,
+      };
       if (props.fetchById !== false) {
         getQuery.id = row[idKey];
       } else {
@@ -277,7 +293,7 @@ const ListRender = forwardRef(function (props, parentRef) {
   async function onEditSubmit(data) {
     let _data = data;
     if (isPatchUpdate) {
-      if (model?.patchMap === "function") {
+      if (typeof model?.patchMap === "function") {
         _data = model.patchMap(data);
       }
     } else if (typeof model?.updateMap === "function") {
@@ -430,10 +446,4 @@ const ListRender = forwardRef(function (props, parentRef) {
   );
 });
 
-ListRender.defaultProps = {
-  model: {
-    query: {},
-  },
-};
-
 export default ListRender;

package/src/type.ts

@@ -0,0 +1,335 @@
+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;
+}