mirror of https://github.com/openspug/spug
95 lines
2.7 KiB
JavaScript
95 lines
2.7 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import { observer } from 'mobx-react';
|
||
import { Modal, Row, Col, Tree, Table } from 'antd';
|
||
import styles from './index.module.css';
|
||
import store from './store';
|
||
|
||
export default observer(function (props) {
|
||
const [loading, setLoading] = useState(false);
|
||
const [group, setGroup] = useState({});
|
||
const [dataSource, setDataSource] = useState([]);
|
||
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
||
|
||
useEffect(() => {
|
||
if (!store.treeData.length) {
|
||
store.fetchRecords()
|
||
store.fetchGroups()
|
||
.then(() => setGroup(store.treeData[0]))
|
||
} else {
|
||
setGroup(store.treeData[0])
|
||
}
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
if (group.key) {
|
||
const records = store.records.filter(x => group.self_host_ids.includes(x.id));
|
||
setDataSource(records)
|
||
}
|
||
}, [group])
|
||
|
||
function treeRender(nodeData) {
|
||
return (
|
||
<span style={{lineHeight: '24px'}}>
|
||
{nodeData.title}{nodeData.self_host_ids && nodeData.self_host_ids.length ? `(${nodeData.self_host_ids.length})` : null}
|
||
</span>
|
||
)
|
||
}
|
||
|
||
function handleClickRow(record) {
|
||
const index = selectedRowKeys.indexOf(record.id);
|
||
if (index !== -1) {
|
||
selectedRowKeys.splice(index, 1)
|
||
} else {
|
||
selectedRowKeys.push(record.id)
|
||
}
|
||
setSelectedRowKeys([...selectedRowKeys])
|
||
}
|
||
|
||
function handleSubmit() {
|
||
if (props.onOk) {
|
||
setLoading(true)
|
||
props.onOk(group, selectedRowKeys)
|
||
.then(props.onCancel, () => setLoading(false))
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Modal
|
||
visible
|
||
width="70%"
|
||
title={props.title || '主机列表'}
|
||
onOk={handleSubmit}
|
||
confirmLoading={loading}
|
||
onCancel={props.onCancel}>
|
||
<Row gutter={12}>
|
||
<Col span={6}>
|
||
<Tree.DirectoryTree
|
||
selectedKeys={[group.key]}
|
||
className={styles.dragBox}
|
||
treeData={store.treeData}
|
||
titleRender={treeRender}
|
||
onSelect={(_, {node}) => setGroup(node)}
|
||
/>
|
||
</Col>
|
||
<Col span={18}>
|
||
<Table
|
||
rowKey="id"
|
||
dataSource={dataSource}
|
||
onRow={record => {
|
||
return {
|
||
onClick: () => handleClickRow(record)
|
||
}
|
||
}}
|
||
rowSelection={{
|
||
selectedRowKeys,
|
||
onChange: (keys) => setSelectedRowKeys(keys)
|
||
}}>
|
||
<Table.Column title="主机名称" dataIndex="name" sorter={(a, b) => a.name.localeCompare(b.name)}/>
|
||
<Table.Column title="连接地址" dataIndex="hostname" sorter={(a, b) => a.name.localeCompare(b.name)}/>
|
||
<Table.Column hide ellipsis title="备注信息" dataIndex="desc"/>
|
||
</Table>
|
||
</Col>
|
||
</Row>
|
||
</Modal>
|
||
)
|
||
}) |