@cloudbase/weda-ui 3.4.3 → 3.4.5

package/dist/web/components/listView/index.js

@@ -1,31 +1,41 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useImperativeHandle, } from 'react';
 import { callDataSource } from '../../utils/tcb';
-import { isInIde, getWhereList } from '../../utils/platform';
+import { isInIde, getWhereList, alertErrorMessage } from '../../utils/platform';
 import classNames from '../../utils/classnames';
 import isequal from 'lodash.isequal';
 import './index.css';
 import { isNil } from '../../utils/lodash';
+import { getUuid } from '../../utils/tool';
+import EmptyContent from '../emptyContent';
 const ORDERTYPE = ['asc', 'desc'];
 const BLOCK_NAME = 'weda-list-view';
+const LISTVIEW_MESSAGE = {
+    methods_no_support: '当前组件绑定了APIs，暂不支持进行数据删除',
+    deleteOne_param_error: '传入的"数据标识"参数格式错误',
+    deleteOne_success: '删除数据成功',
+    deleteOne_fail: '删除数据失败',
+    refresh_success: '刷新数据成功',
+    refresh_fail: '刷新数据失败',
+};
 const getIdeMockData = (length = 3) => Array.from({ length }).map(() => Object.create(null));
+const getStringValue = (v) => (typeof v === 'string' ? v : '');
 /**
  * 数据容器-列表视图
  */
-export default function ListView(props) {
+export default React.forwardRef(function ListView(props, ref) {
     var _a, _b, _c;
     const { dataSourceType, bindConnectMetadata, connectorMethod, connectorParams: rawConnectorParams, datasource, orderBy, orderType, where: rawWhere, template, pageSize = 5, pagination, events, className, children, isRecords = true, //是否展示回调recoreds字段
     isSetStatus = false, //是否开启加载状态
+    emptyText, //空状态时的文案
     loadCompletedText = '', // 加载到底提示
     appCloud = { callDataSource, isInIde }, beforeDataChange = (v) => v, ...rest } = props;
     const connectorParams = rawConnectorParams && JSON.parse(JSON.stringify(rawConnectorParams));
     const where = rawWhere && JSON.parse(JSON.stringify(rawWhere));
     const isModel = dataSourceType !== 'custom-connector';
-    const methodName = isModel
+    const methodName = getStringValue(isModel
         ? ((_a = datasource === null || datasource === void 0 ? void 0 : datasource.extra) === null || _a === void 0 ? void 0 : _a.methodName) || 'wedaGetRecords'
-        : connectorMethod === null || connectorMethod === void 0 ? void 0 : connectorMethod.name; // 默认方法名
-    const dataSourceName = isModel
-        ? datasource === null || datasource === void 0 ? void 0 : datasource.name
-        : (_b = bindConnectMetadata === null || bindConnectMetadata === void 0 ? void 0 : bindConnectMetadata.datasource) === null || _b === void 0 ? void 0 : _b.name;
+        : connectorMethod === null || connectorMethod === void 0 ? void 0 : connectorMethod.name);
+    const dataSourceName = getStringValue(isModel ? datasource === null || datasource === void 0 ? void 0 : datasource.name : (_b = bindConnectMetadata === null || bindConnectMetadata === void 0 ? void 0 : bindConnectMetadata.datasource) === null || _b === void 0 ? void 0 : _b.name);
     const [entry, setEntry] = useState(null); // 触底的observer对象
     const [status, setStatus] = useState(''); // 查询状态
     const paramRef = useRef({
@@ -48,12 +58,17 @@ export default function ListView(props) {
         ['', 'success'].includes(status); // 能否触底加载
     // 组件卸载时触发
     useEffect(() => {
+        clearContext();
         return () => {
-            var _a, _b;
+            var _a;
             (_a = observeRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
-            (_b = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _b === void 0 ? void 0 : _b.call(events, { data: beforeDataChange([]), state: {} });
+            clearContext();
         };
     }, []);
+    // 监听更改数据源时，清空当前列表
+    useEffect(() => {
+        clearContext();
+    }, [methodName, dataSourceName, isModel]);
     // props 基本类型监听，需重新分页；处于 ide 且未绑定数据源时返回mock数据
     useEffect(() => {
         var _a, _b;
@@ -78,15 +93,7 @@ export default function ListView(props) {
                 state: getContextState(),
             });
         }
-    }, [
-        methodName,
-        dataSourceName,
-        pageSize,
-        pagination,
-        orderBy,
-        orderType,
-        isModel,
-    ]);
+    }, [methodName, dataSourceName, pageSize, pagination, orderBy, orderType, isModel]);
     // props 对象类型监听，需重新分页
     useEffect(() => {
         var _a, _b, _c, _d;
@@ -121,6 +128,11 @@ export default function ListView(props) {
         clearTimeout(delayRef.current.statusTimer);
         clearTimeout(delayRef.current.eventTimer);
     };
+    // 清除上下文状态
+    const clearContext = () => {
+        var _a;
+        (_a = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _a === void 0 ? void 0 : _a.call(events, { data: beforeDataChange([]), state: {} });
+    };
     // 触底监控对象
     const nodeRefCallback = useCallback((node) => {
         var _a;
@@ -139,15 +151,90 @@ export default function ListView(props) {
         const { total = 0 } = dataRef.current || {};
         return pageNo * pageSize < total;
     };
+    /**
+     * 循环调用接口获取当前已加载的数据
+     */
+    const fetchDataLoop = useCallback(async (param = {}, count = 0) => {
+        let [records, total] = [[], 0];
+        try {
+            const { dataSourceName, methodName, params } = param || {};
+            const MAX_PAGESIZE = Math.min(1000, count);
+            const loopLength = Math.ceil(count / MAX_PAGESIZE);
+            for (let i = 1; i < loopLength + 1; i++) {
+                const tcbParams = { ...params, pageNo: i, pageSize: MAX_PAGESIZE };
+                const temp = await (appCloud === null || appCloud === void 0 ? void 0 : appCloud.callDataSource({
+                    dataSourceName,
+                    methodName,
+                    params: tcbParams,
+                }, true));
+                records = records.concat(temp.records || []);
+                total = temp.total || 0;
+            }
+        }
+        catch (e) {
+            console.error('fetchDataLoop: ', e);
+        }
+        return { records: records.slice(0, count), total };
+    }, [appCloud]);
+    /**
+     * 根据fetchData方法返回值，回调给外部事件
+     */
+    const onEvents = useCallback((data, datasource) => {
+        var _a, _b;
+        const fetchRecords = [].concat(!isRecords && !isModel ? data : (data === null || data === void 0 ? void 0 : data.records) || []);
+        const total = Number(data === null || data === void 0 ? void 0 : data.total) || 0;
+        if (['loadMoreButton', 'bottomLoad'].includes(paramRef.current.pagination)) {
+            dataRef.current = {
+                total,
+                records: [...dataRef.current.records, ...fetchRecords],
+            };
+        }
+        else {
+            dataRef.current = { total, records: fetchRecords };
+        }
+        (_a = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _a === void 0 ? void 0 : _a.call(events, {
+            data: beforeDataChange(dataRef.current.records || []),
+            state: getContextState(),
+        });
+        if (total === 0) {
+            setStatus('empty');
+            (_b = events === null || events === void 0 ? void 0 : events.queryEmpty) === null || _b === void 0 ? void 0 : _b.call(events, {
+                datasource,
+                data: beforeDataChange([]),
+            });
+        }
+        else {
+            const statusCb = () => setStatus('success');
+            if (pagination === 'bottomLoad') {
+                delayRef.current.statusTimer = window.setTimeout(statusCb, 150);
+            }
+            else {
+                statusCb();
+            }
+        }
+        const successCb = () => {
+            var _a;
+            (_a = events === null || events === void 0 ? void 0 : events.querySuccess) === null || _a === void 0 ? void 0 : _a.call(events, {
+                datasource,
+                data: beforeDataChange(dataRef.current.records),
+            });
+        };
+        if (pagination === 'bottomLoad') {
+            delayRef.current.eventTimer = window.setTimeout(successCb, 200);
+        }
+        else {
+            successCb();
+        }
+    }, [beforeDataChange, events, isModel, isRecords, pagination]);
     /**
      * 列表视图拉取数据
      * 方法仅依赖入参和paramRef的参数
-     * isInitData: 是否初始化数据默认否
+     * isInitData: 是否初始化数据默认否, isFetchCurrent: 是否拉取当前所有数据默认否
      */
-    const fetchData = async (param, options) => {
+    const fetchData = useCallback(async (param, options) => {
         var _a;
-        const fetchVersion = (delayRef.current.version = Date.now());
-        const { isInitData } = options || {};
+        const fetchVersion = (delayRef.current.version = getUuid());
+        const { isInitData, isFetchCurrent } = options || {};
         // 合并参数并保存，useEffect 中需要比对
         paramRef.current = {
             ...paramRef.current,
@@ -180,16 +267,21 @@ export default function ListView(props) {
             tcbParams = Object.assign({}, connectorParams, tcbParams);
         }
         // tcb结果和事件
-        let data = [];
+        let data = {};
         const eventDatasource = isModel
             ? datasource
             : { ...bindConnectMetadata, ...connectorMethod };
         try {
-            data = await (appCloud === null || appCloud === void 0 ? void 0 : appCloud.callDataSource({
-                dataSourceName,
-                methodName,
-                params: tcbParams,
-            }, true));
+            if (isFetchCurrent) {
+                data = await fetchDataLoop({ dataSourceName, methodName, params: tcbParams }, dataRef.current.records.length);
+            }
+            else {
+                data = await (appCloud === null || appCloud === void 0 ? void 0 : appCloud.callDataSource({
+                    dataSourceName,
+                    methodName,
+                    params: tcbParams,
+                }, true));
+            }
             if (fetchVersion !== delayRef.current.version)
                 return;
             isInitData && (dataRef.current = { total: 0, records: [] });
@@ -199,66 +291,106 @@ export default function ListView(props) {
             setStatus('fail');
             (_a = events === null || events === void 0 ? void 0 : events.queryFail) === null || _a === void 0 ? void 0 : _a.call(events, { datasource: eventDatasource, data: null });
         }
-    };
+    }, [
+        appCloud,
+        bindConnectMetadata,
+        connectorMethod,
+        datasource,
+        events,
+        fetchDataLoop,
+        isModel,
+        onEvents,
+    ]);
     /**
-     * 根据fetchData方法返回值，回调给外部事件
+     * 计算上下文对象数据
      */
-    const onEvents = (data, datasource) => {
+    const getContextState = (state = {}) => {
         var _a, _b;
-        const fetchRecords = [].concat(!isRecords && !isModel ? data : (data === null || data === void 0 ? void 0 : data.records) || []);
-        const total = Number(data === null || data === void 0 ? void 0 : data.total) || 0;
-        if (['loadMoreButton', 'bottomLoad'].includes(paramRef.current.pagination)) {
-            dataRef.current = {
-                total,
-                records: [...dataRef.current.records, ...fetchRecords],
-            };
-        }
-        else {
-            dataRef.current = { total, records: fetchRecords };
+        const total = (_b = (_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.total) !== null && _b !== void 0 ? _b : 0;
+        const { pageNo, pageSize } = paramRef.current.params;
+        return { total, pageNo, pageSize, ...state };
+    };
+    /**
+     * 组件刷新方法，重新初始化
+     */
+    const methodRefreshFromStart = useCallback(async () => {
+        try {
+            clearDelay();
+            await fetchData({ params: { pageNo: 1 } }, { isInitData: true });
         }
-        (_a = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _a === void 0 ? void 0 : _a.call(events, {
-            data: beforeDataChange(dataRef.current.records || []),
-            state: getContextState(),
-        });
-        if (total === 0) {
-            setStatus('empty');
-            (_b = events === null || events === void 0 ? void 0 : events.queryEmpty) === null || _b === void 0 ? void 0 : _b.call(events, {
-                datasource,
-                data: beforeDataChange([]),
-            });
+        catch (e) {
+            alertErrorMessage({ message: LISTVIEW_MESSAGE.refresh_fail });
         }
-        else {
-            const statusCb = () => setStatus('success');
-            if (pagination === 'bottomLoad') {
-                delayRef.current.statusTimer = window.setTimeout(statusCb, 150);
+    }, [fetchData]);
+    /**
+     * 组件刷新当前方法，保持当前已加载的数据列表状态
+     */
+    const methodRefreshKeepPage = useCallback(async () => {
+        try {
+            clearDelay();
+            const { pageNo, pageSize } = paramRef.current.params;
+            const { total } = dataRef.current;
+            if (pagination === 'pagination') {
+                const pageNoRaw = (pageNo - 1) * pageSize + 1 === total ? pageNo - 1 : pageNo;
+                await fetchData({ params: { pageNo: pageNoRaw } }, { isInitData: true });
+            }
+            else if (['loadMoreButton', 'bottomLoad'].includes(pagination)) {
+                await fetchData({}, { isFetchCurrent: true, isInitData: true });
             }
             else {
-                statusCb();
+                await methodRefreshFromStart();
             }
         }
-        const successCb = () => {
-            var _a;
-            (_a = events === null || events === void 0 ? void 0 : events.querySuccess) === null || _a === void 0 ? void 0 : _a.call(events, {
-                datasource,
-                data: beforeDataChange(dataRef.current.records),
-            });
-        };
-        if (pagination === 'bottomLoad') {
-            delayRef.current.eventTimer = window.setTimeout(successCb, 200);
+        catch (e) {
+            alertErrorMessage({ message: LISTVIEW_MESSAGE.refresh_fail });
+        }
+    }, [fetchData, methodRefreshFromStart, pagination]);
+    /**
+     * 组件刷新方法，通过类别区分
+     */
+    const methodRefresh = useCallback((params) => {
+        if (typeof params === 'object' && (params === null || params === void 0 ? void 0 : params.type) === 'refreshKeepPage') {
+            methodRefreshKeepPage();
         }
         else {
-            successCb();
+            methodRefreshFromStart();
         }
-    };
+    }, [methodRefreshFromStart, methodRefreshKeepPage]);
     /**
-     * 计算上下文对象数据
+     * 组件删除单条方法
      */
-    const getContextState = (state = {}) => {
-        var _a, _b;
-        const total = (_b = (_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.total) !== null && _b !== void 0 ? _b : 0;
-        const { pageNo, pageSize } = paramRef.current.params;
-        return { total, pageNo, pageSize, ...state };
-    };
+    const methodDeleteOne = useCallback(async (params) => {
+        try {
+            if (!isModel) {
+                return alertErrorMessage({
+                    message: LISTVIEW_MESSAGE.methods_no_support,
+                });
+            }
+            const _id = params === null || params === void 0 ? void 0 : params._id;
+            if (!_id || typeof _id !== 'string') {
+                return alertErrorMessage({
+                    message: LISTVIEW_MESSAGE.deleteOne_param_error,
+                });
+            }
+            clearDelay();
+            await (appCloud === null || appCloud === void 0 ? void 0 : appCloud.callDataSource({
+                dataSourceName: paramRef.current.dataSourceName,
+                methodName: 'wedaDelete',
+                params: { _id },
+            }));
+            await methodRefreshKeepPage();
+        }
+        catch (e) {
+            alertErrorMessage({ message: LISTVIEW_MESSAGE.deleteOne_fail });
+        }
+    }, [appCloud, isModel, methodRefreshKeepPage]);
+    // 组件方法
+    useImperativeHandle(ref, () => ({
+        methods: {
+            deleteOne: methodDeleteOne,
+            refresh: methodRefresh,
+        },
+    }), [methodDeleteOne, methodRefresh]);
     /**
      * 分页，加载更多
      */
@@ -301,11 +433,12 @@ export default function ListView(props) {
     const renderStatus = () => {
         switch (status) {
             case 'empty':
-                return React.createElement("div", { className: `${BLOCK_NAME}__empty` }, "\u6682\u65E0\u6570\u636E");
+                return emptyText && React.createElement(EmptyContent, { emptyText: emptyText });
             case 'fail':
-                return React.createElement("div", { className: `${BLOCK_NAME}__fail` }, "\u52A0\u8F7D\u5931\u8D25");
+                return (isSetStatus && React.createElement("div", { className: `${BLOCK_NAME}__fail` }, "\u52A0\u8F7D\u5931\u8D25"));
             case 'loading':
-                return (pagination === 'pagination' && (React.createElement("div", { className: classNames(`${BLOCK_NAME}__more`, `${BLOCK_NAME}__content-loading`) }, LoadingSymbol)));
+                return (isSetStatus &&
+                    pagination === 'pagination' && (React.createElement("div", { className: classNames(`${BLOCK_NAME}__more`, `${BLOCK_NAME}__content-loading`) }, LoadingSymbol)));
         }
     };
     /**
@@ -320,13 +453,14 @@ export default function ListView(props) {
      */
     const LoadEnd = status === 'success' && loadCompletedText && (React.createElement("div", { className: `${BLOCK_NAME}__load-completed` }, String(loadCompletedText)));
     return (React.createElement("div", { ...rest, className: classNames('weda-ui', `${BLOCK_NAME}__containor`, className) },
-        children && (React.createElement("div", { className: classNames(template === 'cardList' ? `${BLOCK_NAME}-card` : '', `${BLOCK_NAME}__content`, ['empty', 'fail'].includes(status) && isSetStatus
+        children && (React.createElement("div", { className: classNames(template === 'cardList' ? `${BLOCK_NAME}-card` : '', `${BLOCK_NAME}__content`, (status === 'empty' && emptyText) ||
+                (status === 'fail' && isSetStatus)
                 ? `${BLOCK_NAME}__content-blank`
                 : '') },
             children,
-            isSetStatus && renderStatus())),
+            renderStatus())),
         React.createElement("div", { className: classNames(`${BLOCK_NAME}__more`, `${BLOCK_NAME}__more-${pagination}`) },
             pagination === 'bottomLoad' && renderBottomLoad(),
             pagination === 'loadMoreButton' && renderLoadMore(),
             pagination === 'pagination' && renderPagination())));
-}
+});