AddBookModal.tsx

import React from 'react';
import {history} from 'umi'
import {Button, Col, Modal, Row} from "antd";
import {useModel} from "@@/plugin-model/useModel";
import {batchDicData} from "@/utils/utils";

import style from './index.less'

type ModalProps = {
  visible: boolean;
  closeModal: () => void
}

const AddBookModal: React.FC<ModalProps> = (props) => {
  const {visible, closeModal} = props;
  const {initialState} = useModel('@@initialState')

  const { deviceType } = batchDicData(
    ['deviceType'],
    initialState?.dicTotalsList || []
  )
  const addUrlPush = (deviceTypes: string) => {
    const url = {
      Meter: `/ops/book/account/meter/add?redirect=/ops/book/account`, // 计量设备
      Device: `/ops/book/account/add/device`, // 普通设备
      SpecialDevice: `/ops/book/account/add/special`, // 特种设备
      camera: `/ops/book/account/add/camera`, // 特种设备
    }[deviceTypes] || `/ops/book/account/add/common`
    history.push(url)
  }

  return (
    <Modal
      width={500}
      title='创建新设备'
      visible={ visible }
      onCancel={ closeModal }
      centered
      footer={null}
      getContainer={false}
    >
      <Row gutter={24}>
        {deviceType?.selectData?.map((item: any) => (
          <Col span={12} key={item.value}>
            <Button
              type="primary"
              className={style.add_book_btn}
              onClick={() => addUrlPush(item.dictKey)}
            >
              {item.title}
            </Button>
          </Col>

        ))}
      </Row>
    </Modal>
  );
};

export default AddBookModal;