yongxu-web/src/pages/MenuManagement/check.tsx

import React from 'react';
import { Col, Form, Modal, Row } from 'antd';
import IconMap from '@/components/Icon/IconMap';
import Icon from '@ant-design/icons';
import moment from 'moment';

interface checkPros {
  visible: boolean;
  checkCallback: () => void;
  params: any;
}

/**
 * 菜单管理 - 查看
 * @param props
 * @constructor
 */
const Check: React.FC<checkPros> = (props) => {
  const { params, visible, checkCallback } = props;
  const [form] = Form.useForm();

  // 取消
  const onCancel = () => {
    checkCallback();
  };

  const onOk = () => {
    checkCallback();
  };

  const formItemLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 18,
    },
  };

  const hiddenList = ['隐藏', '显示'];

  return (
    <Modal title="查看" open={visible} onOk={onOk} onCancel={onCancel} width={800}>
      <Form form={form}>
        <Row>
          <Col span={12}>
            <Form.Item {...formItemLayout} label="菜单名称">
              <span>{params ? params.name : ''}</span>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item {...formItemLayout} label="上级菜单名称">
              <span>{params ? params.parent_path : ''}</span>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item {...formItemLayout} label="排序值">
              <span>{params ? params.sequence : ''}</span>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item {...formItemLayout} label="状态">
              <span>{params ? hiddenList[params.hidden] : ''}</span>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item {...formItemLayout} label="图标">
              <Icon component={IconMap[params.icon] as React.ForwardRefExoticComponent<any>} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item {...formItemLayout} label="菜单标签">
              <span>{params ? params.tag : ''}</span>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item {...formItemLayout} label="访问路由">
              <span>{params ? params.router : ''}</span>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item {...formItemLayout} label="创建者">
              <span>{params ? params.creator : ''}</span>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item {...formItemLayout} label="创建时间">
              <span>{params ? moment(params.created_at).format('YYYY-MM-DD HH:mm') : ''}</span>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
export default Check;