import React, { useEffect, useState } from 'react'; import { Card, Button, Table, Space, Modal, Popconfirm, notification, Spin, Pagination } from 'antd'; import copy from 'copy-to-clipboard'; import PageContainer from '@/components/BasePageContainer'; import styles from './ManagementDataBase.less'; import { tableCheck, tableCheckNew, updateDateBase, databaseStandardGetLog, databaseStandardGetLogNew, } from '@/services/database/api'; import { ConsoleSqlOutlined } from '@ant-design/icons'; 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('详细信息'); const [currentPage, setCurrentPage] = useState(1); const [pageSize, setPageSize] = useState(10); // 检查数据库表 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); // }); tableCheckNew() .then(resnew => { setCheckLoading(false); console.log(resnew); if (resnew.code == 0) { let res = resnew.data; const { Autolist, ManualList } = res; // 自动检测列表 let arr = Autolist.map((item, index) => { item.key = index; return item; }); // 手动检查列表 let arr2 = ManualList.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); // }); databaseStandardGetLogNew() .then(resnew => { setLogLoading(false); if (resnew.code == 0) { let res = resnew.data.list; 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() .then(res => { setCheckLoading(false); setCheckFlag(checkFlag + 1); setUpFlag(upFlag + 1); if (res.code === 0) { notification.success({ message: '通知', duration: 3, description: '修复成功', }); } else { notification.error({ message: '通知', duration: 15, description: res.msg, }); } }) .catch(err => { setCheckLoading(false); console.error(err); }); }; const handleErrLog = (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 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); }; // 复制SQL const copySql = text => { if (copy(text)) { notification.success({ message: '提示', duration: 3, description: '复制成功', }); } else { notification.error({ message: '提示', duration: 3, description: '复制失败', }); } }; 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, }, { title: 'SQL语句', dataIndex: 'DiffSql', key: 'DiffSql', render: text => ( <Button size="small" type="primary" onClick={() => copySql(text)}> 复制SQL </Button> ), }, ]; const logColumns = [ { title: '登录名', dataIndex: 'UpdateBy', key: 'UpdateBy', width: 200, ellipsis: true, }, { title: '数据库名称', dataIndex: 'Name', key: 'Name', width: 200, ellipsis: true, }, { title: '解决方案', dataIndex: 'DbProductName', key: 'DbProductName', width: 200, ellipsis: true, }, // { // title: '数据库版本', // dataIndex: 'Version', // key: 'Version', // width: 200, // ellipsis: true, // }, { title: '升级时间', dataIndex: 'UpdateTime', key: 'UpdateTime', width: 200, ellipsis: true, }, // { // title: '版本日志', // dataIndex: 'Oklog', // key: 'Oklog', // render: text => ( // <Button // size="small" // disabled={!text} // onClick={() => { // handleLog(text, '版本日志'); // }} // > // 日志 // </Button> // ), // }, { title: '成功日志', dataIndex: 'Oklog', key: 'Oklog', ellipsis: true, render: text => ( <Button size="small" type="primary" onClick={() => { handleLog(text, '详细信息'); }} > 升级内容 </Button> ), }, { title: '错误日志', dataIndex: 'Errlog', key: 'Errlog', ellipsis: true, render: text => { if (text && text.length > 0) { return ( <Button size="small" type="primary" onClick={() => { handleLog(text, '详细信息'); }} style={{ backgroundColor: 'red' }} > 错误内容 </Button> ); } }, }, ]; const paginationChange = (page, pageSizes) => { console.log(page) console.log(pageSizes) setCurrentPage(page); setPageSize(pageSizes); } 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={checkColumns} dataSource={checkList} bordered loading={checkLoading} size="small" /> </Card> <Card className={styles.mgTop20}> <div className={styles.tableTitle}>数据库版本记录</div> <Table className={styles.mgTop20} columns={logColumns} dataSource={logList} bordered loading={logLoading} 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)} key="back" > 关闭窗口 </Button>, ]} > {content} </Modal> </> ); }; export default ManagementDataBase;