ManagementDataBase.jsx 7.69 KB
import React, { useEffect, useState } from 'react';
import {
  Card,
  Button,
  Table,
  Space,
  Modal,
  Popconfirm,
  notification,
  Spin,
} from 'antd';
import PageContainer from '@/components/BasePageContainer';
import styles from './ManagementDataBase.less';
import {
  tableCheck,
  updateDateBase,
  databaseStandardGetLog,
} from '@/services/database/api';

const ManagementDataBase = () => {
  const [autoCheckList, setAutoCheckList] = useState([]); // 自动列表
  const [checkList, setCheckList] = useState([]); // 手动列表
  const [logList, setLogList] = useState([]); // 日志列表
  const [checkFlag, setCheckFlag] = useState(1);
  const [upFlag, setUpFlag] = useState(1); //
  const [checkLoading, setCheckLoading] = useState(false); // 按钮loading
  const [logLoading, setLogLoading] = useState(false);
  const [modalVisible, setModalVisible] = useState(false); // 弹窗
  const [content, setContent] = useState(null);
  // 检查数据库表
  useEffect(() => {
    setCheckLoading(true);
    tableCheck({
      _version: 9999,
      _dc: new Date().getTime(),
    })
      .then(res => {
        setCheckLoading(false);
        console.log(res);
        if (res.sucess) {
          const { list, messageList } = res;
          // 自动检测列表
          let arr = list.map((item, index) => {
            item.key = index;
            return item;
          });
          // 手动检查列表
          let arr2 = messageList.map((item, index) => {
            item.key = index;
            return item;
          });
          console.log(arr);
          setAutoCheckList(arr);
          setCheckList(arr2);
        }
      })
      .catch(err => {
        setCheckLoading(false);
        console.error(err);
      });
  }, [checkFlag]);
  // 获取数据库升级记录
  useEffect(() => {
    setLogLoading(true);
    databaseStandardGetLog({
      _version: 9999,
      _dc: new Date().getTime(),
    })
      .then(res => {
        setLogLoading(false);
        if (res) {
          let arr = [];
          res.map((item, index) => {
            item.key = index;
            arr.push(item);
          });
          setLogList(res);
        }
      })
      .catch(err => {
        setLogLoading(false);
        console.error(err);
      });
  }, [upFlag]);
  // 检查功能
  const handleCheck = () => {
    setCheckFlag(checkFlag + 1);
  };
  // 升级功能
  const handleUpdate = () => {
    setCheckLoading(true);
    updateDateBase({
      _version: 9999,
      _dc: Date.now(),
    })
      .then(res => {
        setCheckLoading(false);
        setCheckFlag(checkFlag + 1);
        setUpFlag(upFlag + 1);
        if (res.success) {
          notification.success({
            message: '通知',
            duration: 3,
            description: res.message,
          });
        } else {
          notification.error({
            message: '通知',
            duration: 15,
            description: res.message,
          });
        }
      })
      .catch(err => {
        setCheckLoading(false);
        console.error(err);
      });
  };
  const handleLog = text => {
    console.log(text);
    let arr = [];
    arr.push(
      text.split(/(\r\n)|(\n)/).map((item, index) => <p key={index}>{item}</p>),
    );
    setModalVisible(true);
    // setContent(text);
    setContent(arr);
  };
  const autoCheckColumns = [
    {
      title: '表名称',
      dataIndex: 'tableName',
      key: 'tableName',
      width: 200,
      ellipsis: true,
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      width: 180,
      ellipsis: true,
    },
    {
      title: '差异比较',
      dataIndex: 'message',
      key: 'message',
    },
  ];
  const checkColumns = [
    {
      title: '表名称',
      dataIndex: 'tableName',
      key: 'tableName',
      width: 200,
      ellipsis: true,
    },
    {
      title: '差异比较',
      dataIndex: 'message',
      key: 'message',
      ellipsis: true,
    },
  ];
  const logColumns = [
    {
      title: '登录名',
      dataIndex: 'updateBy',
      key: 'updateBy',
      width: 200,
      ellipsis: true,
    },
    {
      title: '数据库名称',
      dataIndex: 'name',
      key: 'name',
      width: 200,
      ellipsis: true,
    },
    {
      title: '解决方案',
      dataIndex: 'solutionName',
      key: 'solutionName',
      width: 200,
      ellipsis: true,
    },
    {
      title: '数据库版本',
      dataIndex: 'version',
      key: 'version',
      width: 200,
      ellipsis: true,
    },
    {
      title: '升级时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      width: 200,
      ellipsis: true,
    },
    {
      title: '版本日志',
      dataIndex: 'despersion',
      key: 'despersion',
      render: text => (
        <Button
          size="small"
          onClick={() => {
            handleLog(text);
          }}
        >
          日志
        </Button>
      ),
    },
    {
      title: '升级内容',
      dataIndex: 'content',
      key: 'content',
      ellipsis: true,
      render: text => (
        <Button
          size="small"
          type="primary"
          onClick={() => {
            handleLog(text);
          }}
        >
          升级内容
        </Button>
      ),
    },
  ];

  return (
    <>
      <PageContainer>
        <Card>
          <div className={styles.tableTitle}>表结构自动化修复</div>
          <Spin tip="loading..." spinning={checkLoading}>
            <Table
              className={styles.mgTop20}
              columns={autoCheckColumns}
              dataSource={autoCheckList}
              bordered
              size="small"
            />
            <div className={styles.btnBox}>
              <Space>
                <Button type="primary" onClick={handleCheck}>
                  检查
                </Button>
                <Popconfirm
                  title="
                是否升级当前连接数据库?"
                  okText="确认"
                  cancelText="取消"
                  onConfirm={() => {
                    handleUpdate();
                  }}
                >
                  <Button danger type="primary">
                    升级
                  </Button>
                </Popconfirm>
              </Space>
            </div>
          </Spin>
        </Card>
        <Card className={styles.mgTop20}>
          <div className={styles.tableTitle}>数据库升级记录</div>
          <Table
            className={styles.mgTop20}
            columns={logColumns}
            dataSource={logList}
            bordered
            loading={logLoading}
            size="small"
          />
        </Card>
        <Card className={styles.mgTop20}>
          <div className={styles.tableTitle}>
            表字段手动修复
            (字段长度不统一,请手动修改差异,数据可能会截断,请谨慎操作)
          </div>
          <Table
            className={styles.mgTop20}
            columns={checkColumns}
            dataSource={checkList}
            bordered
            loading={checkLoading}
            size="small"
          />
        </Card>
      </PageContainer>

      <Modal
        title="详细信息"
        visible={modalVisible}
        keyboard={false}
        maskClosable
        onOk={() => setModalVisible(false)}
        onCancel={() => setModalVisible(false)}
        width="1000px"
        bodyStyle={{
          minHeight: '100px',
          maxHeight: '600px',
          overflowY: 'scroll',
        }}
        style={{ top: '40px' }}
        footer={[
          <Button type="primary" onClick={() => setModalVisible(false)}>
            关闭窗口
          </Button>,
        ]}
      >
        {content}
      </Modal>
    </>
  );
};

export default ManagementDataBase;