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); const [modalTitle, setModalTitle] = useState('详细信息'); // 检查数据库表 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; }); 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, val) => { setModalTitle(val); 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" disabled={!text} 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={modalTitle} 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;