DT走过的路

Dialog 弹窗

import React from 'react';
import { Modal } from 'antd';
const Dialog = ({title, dialogStatus, render, setDialogStatus, width= 600}) => {
    return (
        <Modal
         width= {width}
         destroyOnHidden={true}
         title={title}
         open={dialogStatus}
         onCancel={setDialogStatus}
         footer={null}
        >
            {render()}
        </Modal>
    );
}

export default Dialog;

Drawer 抽屉组件

import React from 'react';
import { Drawer, Modal, message } from 'antd';
import { useSelector, useDispatch } from 'umi';
import IconMap from 'components/IconMap';
import $http from 'api';
import './index.less';

const DrawerComponent = ({title="详情", interfaceName, _id, render, reloadList}) => {
    const { isShowDetailDialog } = useSelector(state => state.common);
    const dispatch = useDispatch();
      //- 打开删除的对话框
    const openModelDialog = ()=> {
        Modal.confirm({
            title:'温馨提示',
            content:'确定要删除当前用户信息么?',
            onOk:_deleteItem
        })
    }

  //- 删除指定的列表项（详情展示的这一项数据）
  const _deleteItem = async ()=> {
    const { code, msg } = await $http[interfaceName]({ids:[_id]})
    if(code) return ;
    message.success(msg);
    closeDialog();
    reloadList();
  }

  //- 关闭弹窗
  const closeDialog = ()=> {
    dispatch({ type: 'common/changeIsShowDetailDialog', payload: { isShowDetailDialog:false}})
  }
  /* 左边头部内容 */
  const titleNode = (
    <>
      <span>{IconMap.copy}</span>
      <span>{title}</span>
    </>
  )

  const extra = (
    <>
      <span className="icon" onClick={openModelDialog}>{IconMap.delMul}</span>
      <span className="line"></span>
      <span className="icon" onClick={closeDialog}>{IconMap.close}</span>
    </>
  )

    return (
        
            <Drawer 
                title={titleNode}
                width={500}
                placement="right"
                closable={false}
                destroyOnClose={true}
                open={isShowDetailDialog}
                extra={extra}
            >
            {render()}
            </Drawer>
       
    );
}

export default DrawerComponent;

Loading组件，加载框

import React from 'react';
import './index.less';
import classnames from 'classnames';
const Loading = ({isLoading, part=false}) => {
    const loadingStyle = part ? {
        position: 'absolute',
        top: '50%',
        left: '50%',
        height: '100px',
        width: '100px',
        transform: 'translate(-50%, -50%)',
    } : {};
    return (
        <div style={loadingStyle} className={classnames('loader', 'fullScreen', {hidden: !isLoading})}>
            <div className='wrapper'>
                <div className='inner'></div>
                <div className='text'>LOADING</div>
            </div>
        </div>
    );
};

export default Loading;

loading样式

.loader {
  background-color: #fff;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  text-align: center;

  &.fullScreen {
    position: fixed;
  }

  .wrapper {
    width: 100px;
    height: 100px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .inner {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    text-indent: -12345px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 1px solid rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    z-index: 100001;
    animation: spinner 600ms infinite linear;
  }

  .text {
    width: 100px;
    height: 20px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 4px;
    color: #000;
  }

  &.hidden {
    z-index: -1;
    opacity: 0;
    transition: opacity 1s ease 0.5s, z-index 0.1s ease 1.5s;
  }
}
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

侧边导航菜单栏

import React from 'react';
import { Link, history } from 'umi';
import img from 'common/img/logo.png';
import IconMap from 'components/IconMap.jsx';
const Index = ({ Sider, Menu, collapse }) => {
    const pathname = history.location.pathname;
    const  routeList = JSON.parse(sessionStorage.getItem('routeList'));
    // console.log(routeList,'routeList');
    const items = routeList?.map((item) => ({
        key: item.route,
        icon: IconMap[item.icon] || item.icon,
        label: <Link to={item.route}>{item.zhName}</Link>,
    }));
    // console.log(items,'items');
    return (
        <Sider theme="light" className="side-bar" collapsed={collapse}>
            <div className="brand">
                <div className="logo">
                    <img src={img} alt="" />
                    {!collapse && <h1>人力资源系统</h1>}    
                </div>
            </div>
            <div className="menu-container">
                <Menu mode="inline" selectedKeys={[pathname]} items={items}></Menu>
            </div>
        </Sider>
    );
}

export default Index;