sunmao-sdk/src/layout/CpTabs.jsx

榫卯-开箱即用赋能-sdk

import React, { useRef, useState, useEffect, useMemo } from "react";
import { Spin, Tabs } from "antd";
import CpBase from "./CpBase";
import { handleAppParams, postNew } from "./../net/request";
import * as formUtils from "./../utils/formUtils";
import * as commonUtils from "./../utils/commonUtils";
import { CP } from "..";
import { aclCheckPermissions, getHsfHost } from "../net/api";

import "./index.css";

const displayName = "CpTabs";
const CpTabs = props => {
  const {
    schema,
    defaultSchemaMap,
    initData,
    refreshSchema,
    filterTabs,
    api = {},
    filterParams,
    widgets,
    name,
    title,
    ...otherProps
  } = props;

  const { url, okPath = "data", table } = schema;

  const columnItems = useMemo(() => {
    let ret = table.columnItems;
    try {
      // 允许filterTabs为空报错 ， 不影响链路
      ret = filterTabs(table.columnItems) || table.columnItems;
    } catch {}
    return ret;
  }, [table, filterTabs]);

  const requestFunc = CP.getCPInfo().requestFunc || postNew;

  const [loading, setLoading] = useState(false);
  // 首次渲染不因 initData 请求
  const hasPageSchema = useRef(false);
  // 用于上下文传递， 作为子页面的initData
  const [pageData, setPageData] = useState(null);
  // 页面级接口请求入参 事件回调需要useRef
  const searchParams = useRef({});

  // 赋值页面上下文数据   initData变更需刷新页面
  useEffect(() => {
    // 此处有待调优
    if (hasPageSchema.current) {
      onSdkSearch(initData);
    } else {
      // 页面首次渲染
      onSdkSearch(initData);
    }
  }, [initData]);

  /**
   * 必备函数
   * 表格请求函数
   * 暂支持post请求，因get用长度限制，避免过多参数
   * @param params 搜索项信息
   */
  const onSdkSearch = params => {
    const _params = {
      ...searchParams.current, // 已有页面信息
      ...params // 新入参信息，常见为：覆盖已有页面信息
    };
    // 是否有 请求配置
    if (url) {
      setLoading(true);
      requestFunc(
        commonUtils.getUrl(url),
        handleAppParams(_params, filterParams),
        okPath
      )
        .then(({ data, exactData }) => {
          if (!data) {
            throw new Error(
              "请求错误，自行处理，该请求可自行设计，只要返回正确数据格式即可！"
            );
          } else {
            // 将页面数据作为 子页面的initData
            setSearchParams({ ..._params, ...(exactData || data) });
          }
        })
        .catch(err => {
          console.error("err", err, displayName);
        })
        .finally(() => {
          setLoading(false);
        });
    } else {
      // 无请求配置， 直接设置页面级上下文数据
      setSearchParams(_params);
    }
  };

  /**
   * 设置页面级上下文数据
   * @param {页面级入参} params
   */
  const setSearchParams = params => {
    // 同步事件params
    searchParams.current = params;
    // 刷新所有子页面
    setPageData(params);
  };

  const childRender = renderInfo => {
    const {
      pageType,
      name,
      title,
      key,
      tabKey,
      sdkRender,
      params
    } = renderInfo;
    // 模块name
    const pageTitle = title || name;

    // 获取自定义渲染函数
    const renderFunc = commonUtils.getFunc(sdkRender, api);
    const curPageData = { ...pageData, ...params, pageTitle };
    return (
      <Tabs.TabPane tab={pageTitle} key={tabKey || key}>
        {pageType === "sunmao_composite" || pageType === "sunmao_tabs" ? (
          <div>暂不支持嵌套复杂页面，请重新配置该部分实现</div>
        ) : renderFunc ? (
          renderFunc(renderInfo, curPageData)
        ) : (
          <CpBase
            flag={key}
            api={api}
            filterParams={filterParams}
            widgets={widgets}
            defaultSchemaMap={defaultSchemaMap}
            initData={curPageData}
            {...otherProps}
          />
        )}
      </Tabs.TabPane>
    );
  };

  return !!pageData ? (
    <Spin spinning={loading}>
      <Tabs
        className="sunmao_tabs"
        type="card"
        defaultActiveKey={`${pageData[table.tabKey]}`}
      >
        {columnItems.map(childRender)}
      </Tabs>
    </Spin>
  ) : (
    <div>页面构建中...</div>
  );
};

export default CpTabs;