@hzab/list-render 1.9.2 → 1.9.3-beta1

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# @hzab/list-render@1.9.3
+
+feat: 列表请求取消上一次列表请求，解决数据返回先后顺序导致展示异常问题
+
 # @hzab/list-render@1.9.2
 
 fix: Drawer 模式 首次编辑 scenario 状态不正确问题修复

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.9.2",
+  "version": "1.9.3-beta1",
   "description": "",
   "main": "src",
   "scripts": {
@@ -20,7 +20,7 @@
   "license": "ISC",
   "devDependencies": {
     "@ant-design/icons": "^4.8.1",
-    "@hzab/data-model": "^1.6.0",
+    "@hzab/data-model": "^1.7.4",
     "@hzab/form-render": "^1.1.5",
     "@hzab/schema-descriptions": "^1.0.0",
     "@hzab/webpack-config": "^0.7.2",
@@ -40,7 +40,7 @@
     "@formily/core": "2.3.1",
     "@formily/react": "2.3.1",
     "@formily/reactive-react": "2.3.1",
-    "@hzab/data-model": ">=1.5.0",
+    "@hzab/data-model": ">=1.7.4",
     "@hzab/form-render": ">=1.0.0",
     "@hzab/schema-descriptions": ">=1.0.0",
     "antd": "4.x",

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}

@@ -5,6 +5,8 @@ model 不要定义在组件外部，避免出现 query 异常的情况。
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 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";
@@ -14,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,
@@ -34,20 +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<CancelTokenSource>();
 
   useImperativeHandle(parentRef, () => ({
     getList,
@@ -61,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) {
@@ -70,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();
   }, []);
@@ -98,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 } });
@@ -129,18 +141,37 @@ const ListRender = forwardRef(function (props, parentRef) {
 
     model.query = mergedQueries;
 
+    // 取消上一次请求
+    getListSourceRef.current?.cancel(
+      JSON.stringify({ code: 601, message: "取消上一次请求", getListApi: model.getListApi, query: model.query }),
+    );
+
+    // 重新获取 source
+    getListSourceRef.current = getCancelTokenSource();
+
     model
-      ?.getList(mergedQueries)
+      ?.getList(
+        mergedQueries,
+        {},
+        {
+          cancelToken: getListSourceRef.current?.token,
+        },
+      )
       .then((res) => {
+        getListSourceRef.current = null;
         setList(res.list);
         setTotal(res.pagination?.total);
         props.onGetListEnd && props.onGetListEnd(res);
         setListLoading(false);
       })
       .catch((err) => {
-        console.error(err);
-        handleMessage(err._message);
+        if (axios.isCancel(err)) {
+          console.info(`请求已取消:`, "", err.message);
+          return Promise.reject(err);
+        }
+        handleMessage(err?._message);
         setListLoading(false);
+        return Promise.reject(err);
       });
   }
 
@@ -166,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);
   }
 
@@ -200,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 {
@@ -214,6 +247,7 @@ const ListRender = forwardRef(function (props, parentRef) {
         .catch((err) => {
           console.error("err", err);
           handleMessage(err._message);
+          return Promise.reject(err);
         });
     } else {
       handleDetail(row, row[idKey]);
@@ -227,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 {
@@ -241,6 +277,7 @@ const ListRender = forwardRef(function (props, parentRef) {
         .catch((err) => {
           console.error("err", err);
           handleMessage(err._message);
+          return Promise.reject(err);
         });
     } else {
       handleEdit(row, row[idKey]);
@@ -256,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") {
@@ -291,6 +328,7 @@ const ListRender = forwardRef(function (props, parentRef) {
       })
       .catch((err) => {
         handleMessage(err._message);
+        return Promise.reject(err);
       });
   }
 
@@ -408,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;
+}