ManagementDataBase.jsx 11.7 KB
Newer Older
张烨's avatar
张烨 committed
1
import React, { useEffect, useState } from 'react';
Maofei94's avatar
Maofei94 committed
2 3 4 5 6 7 8 9
import {
  Card,
  Button,
  Table,
  Space,
  Modal,
  Popconfirm,
  notification,
Maofei94's avatar
Maofei94 committed
10
  Spin,
皮倩雯's avatar
皮倩雯 committed
11
  Pagination,
Maofei94's avatar
Maofei94 committed
12
} from 'antd';
皮倩雯's avatar
皮倩雯 committed
13
import copy from 'copy-to-clipboard';
14
import PageContainer from '@/components/BasePageContainer';
Maofei94's avatar
Maofei94 committed
15
import styles from './ManagementDataBase.less';
Maofei94's avatar
Maofei94 committed
16 17
import {
  tableCheck,
18
  tableCheckNew,
Maofei94's avatar
Maofei94 committed
19 20
  updateDateBase,
  databaseStandardGetLog,
21
  databaseStandardGetLogNew,
Maofei94's avatar
Maofei94 committed
22
} from '@/services/database/api';
皮倩雯's avatar
皮倩雯 committed
23
import { CheckSquareFilled, ConsoleSqlOutlined } from '@ant-design/icons';
24 25

const ManagementDataBase = () => {
26 27 28
  const [autoCheckList, setAutoCheckList] = useState([]); // 自动列表
  const [checkList, setCheckList] = useState([]); // 手动列表
  const [logList, setLogList] = useState([]); // 日志列表
Maofei94's avatar
Maofei94 committed
29
  const [checkFlag, setCheckFlag] = useState(1);
30 31
  const [upFlag, setUpFlag] = useState(1); //
  const [checkLoading, setCheckLoading] = useState(false); // 按钮loading
张烨's avatar
张烨 committed
32
  const [logLoading, setLogLoading] = useState(false);
张烨's avatar
张烨 committed
33
  const [modalVisible, setModalVisible] = useState(false); // 弹窗
张烨's avatar
张烨 committed
34
  const [content, setContent] = useState(null);
Maofei94's avatar
Maofei94 committed
35
  const [modalTitle, setModalTitle] = useState('详细信息');
皮倩雯's avatar
皮倩雯 committed
36 37
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
皮倩雯's avatar
皮倩雯 committed
38 39
  const [checkSql, setCheckSql] = useState('');
  const [sqlVisible, setSqlVisible] = useState(false);
张烨's avatar
张烨 committed
40
  // 检查数据库表
张烨's avatar
张烨 committed
41 42
  useEffect(() => {
    setCheckLoading(true);
43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
    // 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 => {
张烨's avatar
张烨 committed
72
        setCheckLoading(false);
73 74
        console.log(resnew);
        if (resnew.code == 0) {
75
          let res = resnew.data;
76
          const { Autolist, ManualList } = res;
张烨's avatar
张烨 committed
77
          // 自动检测列表
78
          let arr = Autolist.map((item, index) => {
张烨's avatar
张烨 committed
79 80 81 82
            item.key = index;
            return item;
          });
          // 手动检查列表
83
          let arr2 = ManualList.map((item, index) => {
张烨's avatar
张烨 committed
84 85 86 87 88 89 90 91 92 93 94
            item.key = index;
            return item;
          });
          setAutoCheckList(arr);
          setCheckList(arr2);
        }
      })
      .catch(err => {
        setCheckLoading(false);
        console.error(err);
      });
95
  }, [checkFlag]);
Maofei94's avatar
Maofei94 committed
96
  // 获取数据库升级记录
张烨's avatar
张烨 committed
97 98
  useEffect(() => {
    setLogLoading(true);
99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
    // 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 => {
张烨's avatar
张烨 committed
120
        setLogLoading(false);
121
        if (resnew.code == 0) {
122
          let res = resnew.data.list;
张烨's avatar
张烨 committed
123 124 125 126 127 128 129 130 131 132 133 134
          let arr = [];
          res.map((item, index) => {
            item.key = index;
            arr.push(item);
          });
          setLogList(res);
        }
      })
      .catch(err => {
        setLogLoading(false);
        console.error(err);
      });
135 136
  }, [upFlag]);
  // 检查功能
张烨's avatar
张烨 committed
137
  const handleCheck = () => {
Maofei94's avatar
Maofei94 committed
138
    setCheckFlag(checkFlag + 1);
张烨's avatar
张烨 committed
139
  };
140
  // 升级功能
张烨's avatar
张烨 committed
141
  const handleUpdate = () => {
142
    setCheckLoading(true);
143
    updateDateBase()
Maofei94's avatar
Maofei94 committed
144
      .then(res => {
145
        setCheckLoading(false);
Maofei94's avatar
Maofei94 committed
146
        setCheckFlag(checkFlag + 1);
147
        setUpFlag(upFlag + 1);
148
        if (res.code === 0) {
Maofei94's avatar
Maofei94 committed
149 150 151
          notification.success({
            message: '通知',
            duration: 3,
152
            description: '修复成功',
Maofei94's avatar
Maofei94 committed
153 154 155 156
          });
        } else {
          notification.error({
            message: '通知',
Maofei94's avatar
Maofei94 committed
157
            duration: 15,
158
            description: res.msg,
Maofei94's avatar
Maofei94 committed
159 160 161 162
          });
        }
      })
      .catch(err => {
163
        setCheckLoading(false);
Maofei94's avatar
Maofei94 committed
164 165
        console.error(err);
      });
张烨's avatar
张烨 committed
166
  };
167 168 169
  const handleErrLog = (text, val) => {
    setModalTitle(val);
    let arr = [];
170
    arr.push(text.split(/(\r\n)|(\n)/).map((item, index) => <p key={index}>{item}</p>));
171 172 173
    setModalVisible(true);
    // setContent(text);
    setContent(arr);
174
  };
Maofei94's avatar
Maofei94 committed
175 176
  const handleLog = (text, val) => {
    setModalTitle(val);
Maofei94's avatar
Maofei94 committed
177
    let arr = [];
178
    arr.push(text.split(/(\r\n)|(\n)/).map((item, index) => <p key={index}>{item}</p>));
张烨's avatar
张烨 committed
179
    setModalVisible(true);
Maofei94's avatar
Maofei94 committed
180 181
    // setContent(text);
    setContent(arr);
张烨's avatar
张烨 committed
182
  };
皮倩雯's avatar
皮倩雯 committed
183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198
  // 复制SQL
  const copySql = text => {
    if (copy(text)) {
      notification.success({
        message: '提示',
        duration: 3,
        description: '复制成功',
      });
    } else {
      notification.error({
        message: '提示',
        duration: 3,
        description: '复制失败',
      });
    }
  };
张烨's avatar
张烨 committed
199 200 201
  const autoCheckColumns = [
    {
      title: '表名称',
202 203
      dataIndex: 'TableName',
      key: 'TableName',
Maofei94's avatar
Maofei94 committed
204 205
      width: 200,
      ellipsis: true,
张烨's avatar
张烨 committed
206 207 208
    },
    {
      title: '类型',
209 210
      dataIndex: 'Type',
      key: 'Type',
Maofei94's avatar
Maofei94 committed
211 212
      width: 180,
      ellipsis: true,
张烨's avatar
张烨 committed
213 214 215
    },
    {
      title: '差异比较',
216
      dataIndex: 'Message',
张烨's avatar
张烨 committed
217 218 219 220 221 222
      key: 'message',
    },
  ];
  const checkColumns = [
    {
      title: '表名称',
223 224
      dataIndex: 'TableName',
      key: 'TableName',
张烨's avatar
张烨 committed
225
      width: 200,
Maofei94's avatar
Maofei94 committed
226
      ellipsis: true,
张烨's avatar
张烨 committed
227 228 229
    },
    {
      title: '差异比较',
230 231
      dataIndex: 'Message',
      key: 'Message',
皮倩雯's avatar
皮倩雯 committed
232
      width: 400,
张烨's avatar
张烨 committed
233 234
      ellipsis: true,
    },
皮倩雯's avatar
皮倩雯 committed
235 236 237 238
    {
      title: 'SQL语句',
      dataIndex: 'DiffSql',
      key: 'DiffSql',
皮倩雯's avatar
皮倩雯 committed
239 240 241 242 243 244 245 246 247 248 249
      render: (text, record) => (
        <Button
          size="small"
          type="primary"
          onClick={() => {
            // copySql(text);
            check(record);
            setSqlVisible(true);
          }}
        >
          查看SQL
皮倩雯's avatar
皮倩雯 committed
250 251 252
        </Button>
      ),
    },
张烨's avatar
张烨 committed
253 254 255 256
  ];
  const logColumns = [
    {
      title: '登录名',
257 258
      dataIndex: 'UpdateBy',
      key: 'UpdateBy',
Maofei94's avatar
Maofei94 committed
259 260
      width: 200,
      ellipsis: true,
张烨's avatar
张烨 committed
261 262 263
    },
    {
      title: '数据库名称',
264 265
      dataIndex: 'Name',
      key: 'Name',
Maofei94's avatar
Maofei94 committed
266 267
      width: 200,
      ellipsis: true,
张烨's avatar
张烨 committed
268
    },
Maofei94's avatar
Maofei94 committed
269 270
    {
      title: '解决方案',
271 272
      dataIndex: 'DbProductName',
      key: 'DbProductName',
Maofei94's avatar
Maofei94 committed
273 274
      width: 200,
      ellipsis: true,
张烨's avatar
张烨 committed
275
    },
276 277 278 279 280 281 282
    // {
    //   title: '数据库版本',
    //   dataIndex: 'Version',
    //   key: 'Version',
    //   width: 200,
    //   ellipsis: true,
    // },
张烨's avatar
张烨 committed
283 284
    {
      title: '升级时间',
285 286
      dataIndex: 'UpdateTime',
      key: 'UpdateTime',
Maofei94's avatar
Maofei94 committed
287 288
      width: 200,
      ellipsis: true,
张烨's avatar
张烨 committed
289
    },
290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305
    // {
    //   title: '版本日志',
    //   dataIndex: 'Oklog',
    //   key: 'Oklog',
    //   render: text => (
    //     <Button
    //       size="small"
    //       disabled={!text}
    //       onClick={() => {
    //         handleLog(text, '版本日志');
    //       }}
    //     >
    //       日志
    //     </Button>
    //   ),
    // },
张烨's avatar
张烨 committed
306
    {
307 308 309
      title: '成功日志',
      dataIndex: 'Oklog',
      key: 'Oklog',
张烨's avatar
张烨 committed
310
      ellipsis: true,
Maofei94's avatar
Maofei94 committed
311 312 313 314 315
      render: text => (
        <Button
          size="small"
          type="primary"
          onClick={() => {
Maofei94's avatar
Maofei94 committed
316
            handleLog(text, '详细信息');
Maofei94's avatar
Maofei94 committed
317 318 319 320 321
          }}
        >
          升级内容
        </Button>
      ),
张烨's avatar
张烨 committed
322
    },
323 324 325 326 327 328
    {
      title: '错误日志',
      dataIndex: 'Errlog',
      key: 'Errlog',
      ellipsis: true,
      render: text => {
329
        if (text && text.length > 0) {
330 331 332 333 334 335 336
          return (
            <Button
              size="small"
              type="primary"
              onClick={() => {
                handleLog(text, '详细信息');
              }}
337
              style={{ backgroundColor: 'red' }}
338 339 340
            >
              错误内容
            </Button>
341
          );
342 343 344
        }
      },
    },
张烨's avatar
张烨 committed
345
  ];
346

皮倩雯's avatar
皮倩雯 committed
347
  const paginationChange = (page, pageSizes) => {
皮倩雯's avatar
皮倩雯 committed
348 349
    console.log(page);
    console.log(pageSizes);
皮倩雯's avatar
皮倩雯 committed
350 351
    setCurrentPage(page);
    setPageSize(pageSizes);
皮倩雯's avatar
皮倩雯 committed
352
  };
皮倩雯's avatar
皮倩雯 committed
353

皮倩雯's avatar
皮倩雯 committed
354 355 356 357
  const check = e => {
    console.log(e);
    setCheckSql(e);
  };
张烨's avatar
张烨 committed
358 359 360 361
  return (
    <>
      <PageContainer>
        <Card>
362
          <div className={styles.tableTitle}>表结构自动化修复</div>
Maofei94's avatar
Maofei94 committed
363 364 365 366 367 368 369 370 371 372 373 374
          <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}>
                  检查
Maofei94's avatar
Maofei94 committed
375
                </Button>
Maofei94's avatar
Maofei94 committed
376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391
                <Popconfirm
                  title="
                是否升级当前连接数据库?"
                  okText="确认"
                  cancelText="取消"
                  onConfirm={() => {
                    handleUpdate();
                  }}
                >
                  <Button danger type="primary">
                    升级
                  </Button>
                </Popconfirm>
              </Space>
            </div>
          </Spin>
张烨's avatar
张烨 committed
392
        </Card>
393
        <Card className={styles.mgTop20}>
394
          <div className={styles.tableTitle}>
395
            手动修复 (字段长度不统一,请手动修改差异,数据可能会截断,请谨慎操作)
396
          </div>
张烨's avatar
张烨 committed
397
          <Table
398
            className={styles.mgTop20}
399 400
            columns={checkColumns}
            dataSource={checkList}
张烨's avatar
张烨 committed
401
            bordered
402
            loading={checkLoading}
Maofei94's avatar
Maofei94 committed
403
            size="small"
张烨's avatar
张烨 committed
404 405
          />
        </Card>
406 407 408 409 410 411 412 413 414 415 416
        <Card className={styles.mgTop20}>
          <div className={styles.tableTitle}>数据库版本记录</div>
          <Table
            className={styles.mgTop20}
            columns={logColumns}
            dataSource={logList}
            bordered
            loading={logLoading}
            size="small"
          />
        </Card>
张烨's avatar
张烨 committed
417
      </PageContainer>
赵吉's avatar
赵吉 committed
418

张烨's avatar
张烨 committed
419
      <Modal
Maofei94's avatar
Maofei94 committed
420
        title={modalTitle}
张烨's avatar
张烨 committed
421 422 423
        visible={modalVisible}
        keyboard={false}
        maskClosable
424
        centered
张烨's avatar
张烨 committed
425 426
        onOk={() => setModalVisible(false)}
        onCancel={() => setModalVisible(false)}
427 428
        width="1000px"
        bodyStyle={{
Maofei94's avatar
Maofei94 committed
429 430 431
          minHeight: '100px',
          maxHeight: '600px',
          overflowY: 'scroll',
432
        }}
Maofei94's avatar
Maofei94 committed
433
        style={{ top: '40px' }}
张烨's avatar
张烨 committed
434
        footer={[
435
          <Button type="primary" onClick={() => setModalVisible(false)} key="back">
Maofei94's avatar
Maofei94 committed
436 437
            关闭窗口
          </Button>,
张烨's avatar
张烨 committed
438 439 440 441
        ]}
      >
        {content}
      </Modal>
皮倩雯's avatar
皮倩雯 committed
442 443 444 445
      <Modal
        title={checkSql.TableName}
        visible={sqlVisible}
        maskClosable
446
        centered
皮倩雯's avatar
皮倩雯 committed
447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464
        onOk={() => setSqlVisible(false)}
        onCancel={() => setSqlVisible(false)}
        width="500px"
        bodyStyle={{
          minHeight: '100px',
          overflowY: 'scroll',
        }}
        footer={[
          <Button type="primary" onClick={() => copySql(checkSql.DiffSql)}>
            复制SQL
          </Button>,
          <Button type="primary" onClick={() => setSqlVisible(false)} key="back">
            关闭窗口
          </Button>,
        ]}
      >
        {checkSql.DiffSql}
      </Modal>
张烨's avatar
张烨 committed
465 466 467
    </>
  );
};
赵吉's avatar
赵吉 committed
468

张烨's avatar
张烨 committed
469
export default ManagementDataBase;