MedicalWisdomCheckSys/src/app.tsx

/*
 * @Author: your name
 * @Date: 2021-09-03 14:28:27
 * @LastEditors: code4eat awesomedema@gmail.com
 * @Description: In User Settings Edit
 * @FilePath: /MedicalWisdomCheckSys/src/app.tsx
 */
import type { Settings as LayoutSettings } from '@ant-design/pro-layout';
import { RunTimeLayoutConfig } from 'umi';
import { history, Link } from 'umi';
import { notification, Modal } from 'antd';
// import 'yet-another-abortcontroller-polyfill'
import RightContent from '@/components/RightContent';

import { BookOutlined, LinkOutlined } from '@ant-design/icons';
import iconEnum from './menuIcons';
import { loginOut } from '@/utils';
import logoIcon from '../public/logo.png';

import { getMenus } from './services/user';
import { updateUserInfo } from '@/pages/user/Login/service';

import type { RequestOptionsInit, Context } from 'umi-request';

const isDev = process.env.NODE_ENV === 'development';

const loginPath = '/user/login';

let hospSign: any = '';

let ifStopNextRequet: boolean = false;  // 控制当出现token过期阻止后面弹窗提示

if (history) {
  hospSign = history.location.query?.hospSign;
  if (!hospSign) {
    hospSign = localStorage.getItem('hospSign');
  }
}


/** 获取用户信息比较慢的时候会展示一个 loading */
// export const initialStateConfig = {
//   loading: <PageLoading />,
// };


export type menuDataItemType = {
  path: string,
  name: string,
  icon: any,
  component: string,
  softUrl?: string, // 帆软url
  children?: menuDataItemType[]
}

/**
 * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state
 * */
export async function getInitialState(): Promise<{
  settings?: Partial<LayoutSettings>;
  currentUser?: API.CurrentUserData;
  logo?: string;
  isDev?: boolean,
  spacicalPageParamsType?: any[];
  goSetting?: boolean,// 设置栏触发
  resetPasswordHandle?: (formData: any) => Promise<boolean>,
  fetchUserMenu?: () => Promise<menuDataItemType[]>,
  menu?: menuDataItemType[],
  clearUserData?: () => Promise<boolean>;  // 清空用户数据
  fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
  postDataToTop?: (data: any) => Promise<boolean>,
}> {

  const fetchUserInfo = async () => {
    try {
      const userData = localStorage.getItem('userData');

      if (userData) {
        return JSON.parse(userData);
      }
      throw Error;
    } catch (error) {
      // history.push(`${loginPath}?hospSign=${hospSign}`);    
    }
    return undefined;
  };

  const fetchUserMenu = async () => {
    const localMasterData = localStorage.getItem('initialState');
    if (localMasterData) {
      const { openedSysLists } = JSON.parse(localMasterData);
      const currentSys = openedSysLists.filter((t:any) => t.name == '评审管理');
      const systemId = currentSys.length > 0 ? currentSys[0].id : 0;
      const menu = await getMenus(systemId);
      if (menu) {
        return menu;
      }
    }
    return [];
  }



  const resetPasswordHandle = async (data: API.EditUserInfoType) => {
    const resp = await updateUserInfo(data);
    if (resp) {
      return Promise.resolve(true);
    }
    return Promise.resolve(false);
  }

  const clearUserData = () => {
    localStorage.removeItem('userData');
    return Promise.resolve(true);
  };
  // 如果是登录页面，不执行
  if (history.location.pathname !== loginPath) {
    const currentUser = await fetchUserInfo();
    return {
      fetchUserInfo,
      currentUser,
      logo: logoIcon,
      clearUserData,
      menu: [],
      fetchUserMenu,
      resetPasswordHandle,
      isDev: process.env.NODE_ENV == 'development',
      settings: {
        navTheme: 'light',
        layout: 'side'
      },
    };
  }

  return {
    fetchUserInfo,
    settings: {},
  };
}



const authHeaderInterceptor = (url: string, options: RequestOptionsInit) => {

  const userData = localStorage.getItem('userData');
  const authHeader = { token: '' };


  if (userData) {
    const { token }: API.CurrentUserData = JSON.parse(userData);
    authHeader.token = token;
  }

  return {
    url: `${url}`,
    options: { ...options, interceptors: true, headers: authHeader },
  };

};


interface responseInterceptorsOptions extends RequestOptionsInit {
  isCloseNotify?: boolean, // 是否关闭POST请求后反馈
  responseSpecifyFeedback?: {
    successMessage: string,
    errorMessage: string,
    isShow: boolean,  // 是否启用
  }
}

const responseInterceptors = async (response: Response, options: responseInterceptorsOptions) => {
  // console.log({response,options});
  const requestMethod = options.method;

  const { url, responseSpecifyFeedback, isCloseNotify = false } = options;

  try {
    const { status } = response;
    if (status == 200) {
      // 网络请求成功
      const _response = await response.clone().json();
      const restext = await response.clone().text();
      console.log({restext});
      const { status: dataStatus, errorCode, errorMessage, data } = _response;
      if (dataStatus == 200) {

        // 接口请求成功
        if (requestMethod == 'POST' && url != "/api/pfm/login" && !isCloseNotify) {
          if (responseSpecifyFeedback && responseSpecifyFeedback.isShow) {
            // 当指定了请求成功反馈时
            console.log({ responseSpecifyFeedback });
            console.log(responseSpecifyFeedback.successMessage);
            notification.success({
              message: responseSpecifyFeedback.successMessage
            });

          } else {
            // 否则用默认提示
            notification.success({
              message: '操作成功！'
            });
          }
        }

        if (data) {
          return data;
        }
        return true;
      } if (errorCode == 499) {
        if (!ifStopNextRequet) {
          Modal.confirm({
            title: '抱歉，登录已过期请重新登录！',
            onOk: () => {
              ifStopNextRequet = false;
              loginOut();
            }
          });
        }
        ifStopNextRequet = true;
      } else {
        // 接口请求信息错误
        notification.error({
          message: errorMessage
        });
      }

    } else {
      // 网络请求失败
      notification.error({
        message: '服务器错误！'
      });
      throw Error;
    }
  } catch (error) {
    console.log({ error });
  }
};


const demo1Middleware = async (ctx: Context, next: () => void) => {
  await next();
};


type RequestConfig = Record<string, any>

export const request: RequestConfig = {
  // 新增自动添加AccessToken的请求前拦截器
  errorHandler: (error: any) => {
    console.log({ error });
    throw error;
  },
  middlewares: [demo1Middleware],
  requestInterceptors: [authHeaderInterceptor],
  responseInterceptors: [responseInterceptors],
};



// 将服务端获取的菜单 icon 字符串映射为对应的 icon Dom
const mappingIcon = (menuData: menuDataItemType[]) => {
  if (menuData.length == 0) {
    return [
      {
        path: '',
        name: '',
        icon: '',
        component: './404',
      }
    ]
  }
  const mappingMenu: menuDataItemType[] = menuData.map(item => ({
    ...item,
    icon: item.icon && iconEnum[item.icon],
    children: item.children ? mappingIcon(item.children) : [],
  }));
  return mappingMenu;


};


// ProLayout 支持的api https://procomponents.ant.design/components/layout
export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {


  return {
    logo: initialState?.logo,
    rightContentRender: () => <RightContent />,
    disableContentMargin: false,
    menuProps:{
      // onClick:({ key, keyPath, domEvent })=>{
      //      console.log({ key, keyPath, domEvent});
      //      history.push('/reports/a?w=1')
      // }
    },
    menu: {
      params: {
        currentUser: initialState?.currentUser
      },
      request: async () => {
        // initialState.currentUser 中包含了所有用户信息
        if (initialState) {
          const { currentUser, isDev } = initialState;

          if (false) {
            // 开发环境
            return []
          }

          if (currentUser) {
            const currentSelectedTab = localStorage.getItem('currentSelectedTab');
            
            if (currentSelectedTab) {
              const { menuId } = JSON.parse(currentSelectedTab);
              const systemId = menuId;
              const data: any[] = await getMenus(systemId);

              if (data) {
                await setInitialState(t => ({ ...t, menu: data }));

                /**
                 * 
                 * 菜单跳转报表临时处理，后期统一换成中台调用
                 */
                
                const getVFromTree = (data: any[], key: string) => {
                  let result: any[] = [];
                  function looper(data: any[], key: string) {
                    data.forEach((t) => {
                      if (t[key] && t[key] != 0) {
                        //非一般页面
                        result.push({
                          contentType: t[key],
                          path: t['path'],
                          reportId: t['reportId'],
                          url: t['youshuUrl'],
                        });
                      }
                      if (t.children && t.children.length > 0) {
                        looper(t.children, key);
                      }
                    });
                  }
                  looper(data, key);
                  return result;
                };

                const _menu = getVFromTree(data, 'contentType');
            
                setInitialState((t) => ({ ...t, spacicalPageParamsType: _menu }));

                /////////////////////////////--------临时处理----------///////////////////////////////////////////////

                return mappingIcon(data);
              }
            }

          } else {
            return [
              {
                component: './404',
              }
            ]
          }
        }
        return []
      },
    },
    links: isDev
      ? [
        <Link to="/umi/plugin/openapi" target="_blank">
          <LinkOutlined />
          <span>OpenAPI 文档</span>
        </Link>,
        <Link to="/~docs">
          <BookOutlined />
          <span>业务组件文档</span>
        </Link>,
      ]
      : [],
    menuHeaderRender: undefined,
    // 自定义 403 页面
    // unAccessible: <div>unAccessible</div>,
    ...initialState?.settings,
  };
};