ztxkui 1.8.2 → 1.8.6

package/dist/components/EnhanceSelect/index.js

@@ -24,7 +24,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  * @author cyx
  * @description 增强下拉框功能
  */
-import React, { useCallback, useEffect, memo } from 'react';
+import React, { useCallback, useEffect, memo, useRef } from 'react';
 import { Select } from 'antd';
 import { useFetchState } from 'ztxkutils/dist/hooks';
 import debounce from 'lodash/debounce';
@@ -74,17 +74,28 @@ function EnhanceSelect(_a) {
     var list = _a.list, defaultList = _a.defaultList, params = _a.params, url = _a.url, _b = _a.method, method = _b === void 0 ? 'GET' : _b, _c = _a.dataKey, dataKey = _c === void 0 ? 'id' : _c, componentKey = _a.componentKey, _d = _a.titleKey, titleKey = _d === void 0 ? 'name' : _d, showAll = _a.showAll, isCatch = _a.isCatch, onCompleted = _a.onCompleted, onChange = _a.onChange, request = _a.request, remoteSearch = _a.remoteSearch, remoteSearchKey = _a.remoteSearchKey, transformData = _a.transformData, joinKey = _a.joinKey, _e = _a.joinStr, joinStr = _e === void 0 ? '-' : _e, restProps = __rest(_a, ["list", "defaultList", "params", "url", "method", "dataKey", "componentKey", "titleKey", "showAll", "isCatch", "onCompleted", "onChange", "request", "remoteSearch", "remoteSearchKey", "transformData", "joinKey", "joinStr"]);
     // 下拉数据源
     var _f = useFetchState([]), selectList = _f[0], setSelectList = _f[1];
+    var _g = useFetchState(false), loading = _g[0], setLoading = _g[1];
+    var fetchId = useRef(0); // 请求Id，每次请求都会加1
     // 如果selectList 发生改变，那么触发onCompleted事件
     useEffect(function () {
         if (Array.isArray(selectList) && onCompleted) {
             onCompleted(selectList);
         }
-    }, [selectList, onCompleted]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectList]);
     // 获取数据，并设置数据
     var getDataHandle = useCallback(function (request, options, appointObj) {
+        setLoading(true);
+        // 利用闭包，存到当前请求的id
+        fetchId.current++;
+        var fetchIdClosure = fetchId.current;
         getData(request, options)
             .then(function (resData) {
             var _a;
+            if (fetchIdClosure < fetchId.current) {
+                return;
+            }
+            setLoading(false);
             var res = transformData ? transformData(resData) : resData;
             var result;
             if (Array.isArray(res.data)) {
@@ -100,9 +111,10 @@ function EnhanceSelect(_a) {
             }
         })
             .catch(function (err) {
+            setLoading(false);
             console.log(err);
         });
-    }, [setSelectList, transformData]);
+    }, [setSelectList, setLoading, transformData]);
     // 远程搜索
     var getRemoteDataHandle = useCallback(function (value) {
         var _a;
@@ -112,6 +124,10 @@ function EnhanceSelect(_a) {
             outParams = JSON.parse(params);
         }
         catch (err) { }
+        setLoading(true);
+        // 利用闭包，存到当前请求的id
+        fetchId.current++;
+        var fetchIdClosure = fetchId.current;
         getData(request, {
             url: url,
             method: method,
@@ -119,6 +135,10 @@ function EnhanceSelect(_a) {
         })
             .then(function (resData) {
             var _a, _b, _c;
+            if (fetchIdClosure < fetchId.current) {
+                return;
+            }
+            setLoading(false);
             var res = transformData ? transformData(resData) : resData;
             var result;
             if (Array.isArray(res.data)) {
@@ -135,6 +155,7 @@ function EnhanceSelect(_a) {
             setSelectList(result);
         })
             .catch(function (err) {
+            setLoading(false);
             console.log(err);
         });
     }, [
@@ -146,6 +167,7 @@ function EnhanceSelect(_a) {
         titleKey,
         setSelectList,
         transformData,
+        setLoading,
     ]);
     var searchHandle = function (value) {
         // 当value有值时才进行搜索
@@ -210,13 +232,28 @@ function EnhanceSelect(_a) {
         // console.log('TEST: 远程搜索');
         getRemoteDataHandle('');
     }, [url, remoteSearch, getRemoteDataHandle]);
+    // 数据合并
+    function concatData(originalData, newData) {
+        if (!newData) {
+            return originalData;
+        }
+        var resultData = originalData.slice() || [];
+        if (Array.isArray(newData)) {
+            newData.forEach(function (item) {
+                if (!resultData.find(function (resultItem) { return resultItem[dataKey] === item[dataKey]; })) {
+                    resultData.unshift(item);
+                }
+            });
+        }
+        return resultData;
+    }
     // 渲染数据
     function renderSelectOption() {
         var _defaultList = Array.isArray(defaultList) ? defaultList : [];
         return (React.createElement(React.Fragment, null,
             showAll && (React.createElement(Select.Option, { title: "\u5168\u90E8", value: "" }, "\u5168\u90E8")),
             Array.isArray(selectList) &&
-                selectList.concat(_defaultList).map(function (item) {
+                concatData(selectList, _defaultList).map(function (item) {
                     var key = componentKey ? item[componentKey] : item[dataKey];
                     var value = item[dataKey];
                     var title = item[titleKey];
@@ -262,6 +299,6 @@ function EnhanceSelect(_a) {
             onChange && onChange(value, option);
         }
     };
-    return (React.createElement(Select, __assign({ defaultValue: showAll ? '' : undefined, allowClear: true, showSearch: true, filterOption: remoteSearch ? false : filterOptionHandle, onSearch: remoteSearch ? onSearchHandle : undefined, onChange: onChangeHandle, optionLabelProp: "title" }, restProps), renderSelectOption()));
+    return (React.createElement(Select, __assign({ defaultValue: showAll ? '' : undefined, allowClear: true, showSearch: true, filterOption: remoteSearch ? false : filterOptionHandle, onSearch: remoteSearch ? onSearchHandle : undefined, onChange: onChangeHandle, optionLabelProp: "title", loading: loading }, restProps), renderSelectOption()));
 }
 export default memo(EnhanceSelect);

package/dist/components/EnhanceTreeSelect/index.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback, useRef } from 'react';
 import { TreeSelect } from 'antd';
 import { useFetchState } from 'ztxkutils/dist/hooks';
 // 获取接口数据
@@ -53,6 +53,7 @@ function EnhanceTreeSelect(_a) {
      * 保证数据源唯一
      */
     var _d = useFetchState([]), treeData = _d[0], setTreeData = _d[1];
+    var fetchId = useRef(0); // 请求Id，每次请求都会加1
     // 如果selectList 发生改变，那么触发onCompleted事件
     useEffect(function () {
         if (Array.isArray(treeData) && onCompleted) {
@@ -61,9 +62,15 @@ function EnhanceTreeSelect(_a) {
     }, [treeData, onCompleted]);
     // 获取数据，并设置数据
     var getDataHandle = useCallback(function (request, options, isConcat) {
+        // 利用闭包，存到当前请求的id
+        fetchId.current++;
+        var fetchIdClosure = fetchId.current;
         return getData(request, options)
             .then(function (resData) {
             var _a;
+            if (fetchIdClosure < fetchId.current) {
+                return;
+            }
             var res = transformData ? transformData(resData) : resData;
             var result;
             if (Array.isArray(res.data)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ztxkui",
-  "version": "1.8.2",
+  "version": "1.8.6",
   "private": false,
   "description": "React components library",
   "author": "zt-front-end",