完成资产隔离
This commit is contained in:
dushixiang
@ -88,6 +88,7 @@ class Asset extends Component {
|
||||
};
|
||||
|
||||
async componentDidMount() {
|
||||
|
||||
this.loadTableData();
|
||||
|
||||
let result = await request.get('/tags');
|
||||
|
||||
@ -21,17 +21,9 @@ import qs from "qs";
|
||||
import UserModal from "./UserModal";
|
||||
import request from "../../common/request";
|
||||
import {message} from "antd/es";
|
||||
import {
|
||||
DeleteOutlined,
|
||||
DownOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
IssuesCloseOutlined,
|
||||
PlusOutlined,
|
||||
StopOutlined,
|
||||
SyncOutlined,
|
||||
UndoOutlined
|
||||
} from '@ant-design/icons';
|
||||
import {DeleteOutlined, ExclamationCircleOutlined, PlusOutlined, SyncOutlined, UndoOutlined} from '@ant-design/icons';
|
||||
import Logout from "./Logout";
|
||||
import UserShareAsset from "./UserShareAsset";
|
||||
|
||||
const confirm = Modal.confirm;
|
||||
const {Search} = Input;
|
||||
@ -68,6 +60,7 @@ class User extends Component {
|
||||
model: null,
|
||||
selectedRowKeys: [],
|
||||
delBtnLoading: false,
|
||||
assetVisible: false
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
@ -230,14 +223,14 @@ class User extends Component {
|
||||
})
|
||||
try {
|
||||
let result = await request.delete('/users/' + this.state.selectedRowKeys.join(','));
|
||||
if (result.code === 1) {
|
||||
if (result['code'] === 1) {
|
||||
message.success('操作成功', 3);
|
||||
this.setState({
|
||||
selectedRowKeys: []
|
||||
})
|
||||
await this.loadTableData(this.state.queryParams);
|
||||
} else {
|
||||
message.error('删除失败 :( ' + result.message, 10);
|
||||
message.error(result['message'], 10);
|
||||
}
|
||||
} finally {
|
||||
this.setState({
|
||||
@ -246,6 +239,13 @@ class User extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
handleAssetCancel = () => {
|
||||
this.loadTableData()
|
||||
this.setState({
|
||||
assetVisible: false
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const columns = [{
|
||||
@ -293,6 +293,18 @@ class User extends Component {
|
||||
return (<Badge status="default" text="离线"/>);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
title: '共享资产',
|
||||
dataIndex: 'sharerAssetCount',
|
||||
key: 'sharerAssetCount',
|
||||
render: (text, record, index) => {
|
||||
return <Button type='link' onClick={async () => {
|
||||
this.setState({
|
||||
assetVisible: true,
|
||||
sharer: record['id']
|
||||
})
|
||||
}}>{text}</Button>
|
||||
}
|
||||
}, {
|
||||
title: '创建日期',
|
||||
dataIndex: 'created',
|
||||
@ -483,15 +495,39 @@ class User extends Component {
|
||||
loading={this.state.loading}
|
||||
/>
|
||||
|
||||
<UserModal
|
||||
visible={this.state.modalVisible}
|
||||
title={this.state.modalTitle}
|
||||
handleOk={this.handleOk}
|
||||
handleCancel={this.handleCancelModal}
|
||||
confirmLoading={this.state.modalConfirmLoading}
|
||||
model={this.state.model}
|
||||
{/* 为了屏蔽ant modal 关闭后数据仍然遗留的问题*/}
|
||||
{
|
||||
this.state.modalVisible ?
|
||||
<UserModal
|
||||
visible={this.state.modalVisible}
|
||||
title={this.state.modalTitle}
|
||||
handleOk={this.handleOk}
|
||||
handleCancel={this.handleCancelModal}
|
||||
confirmLoading={this.state.modalConfirmLoading}
|
||||
model={this.state.model}
|
||||
>
|
||||
</UserModal> : undefined
|
||||
}
|
||||
|
||||
<Modal
|
||||
width={window.innerWidth * 0.8}
|
||||
title='已共享资产'
|
||||
visible={this.state.assetVisible}
|
||||
maskClosable={false}
|
||||
destroyOnClose={true}
|
||||
onOk={() => {
|
||||
|
||||
}}
|
||||
onCancel={this.handleAssetCancel}
|
||||
okText='确定'
|
||||
cancelText='取消'
|
||||
footer={null}
|
||||
>
|
||||
</UserModal>
|
||||
<UserShareAsset
|
||||
sharer={this.state.sharer}
|
||||
owner={this.state.owner}
|
||||
/>
|
||||
</Modal>
|
||||
</Content>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -40,11 +40,10 @@ class UserGroup extends Component {
|
||||
modalVisible: false,
|
||||
modalTitle: '',
|
||||
modalConfirmLoading: false,
|
||||
model: null,
|
||||
model: undefined,
|
||||
selectedRowKeys: [],
|
||||
delBtnLoading: false,
|
||||
users: [],
|
||||
members: []
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
@ -125,11 +124,35 @@ class UserGroup extends Component {
|
||||
});
|
||||
};
|
||||
|
||||
showModal(title, user = {}) {
|
||||
showModal = async (title, id, index) => {
|
||||
|
||||
this.handleSearchByNickname('');
|
||||
let items = this.state.items;
|
||||
|
||||
let model = {}
|
||||
if (id) {
|
||||
items[index].updateBtnLoading = true;
|
||||
this.setState({
|
||||
items: items
|
||||
});
|
||||
|
||||
let result = await request.get('/user-groups/' + id);
|
||||
if (result['code'] !== 1) {
|
||||
message.error(result['message']);
|
||||
items[index].updateBtnLoading = false;
|
||||
this.setState({
|
||||
items: items
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
items[index].updateBtnLoading = false;
|
||||
model = result['data']
|
||||
}
|
||||
|
||||
await this.handleSearchByNickname('');
|
||||
console.log(model)
|
||||
this.setState({
|
||||
model: user,
|
||||
model: model,
|
||||
modalVisible: true,
|
||||
modalTitle: title
|
||||
});
|
||||
@ -138,7 +161,8 @@ class UserGroup extends Component {
|
||||
handleCancelModal = e => {
|
||||
this.setState({
|
||||
modalVisible: false,
|
||||
modalTitle: ''
|
||||
modalTitle: '',
|
||||
model: undefined
|
||||
});
|
||||
};
|
||||
|
||||
@ -243,9 +267,7 @@ class UserGroup extends Component {
|
||||
dataIndex: 'memberCount',
|
||||
key: 'memberCount',
|
||||
render: (text, record, index) => {
|
||||
return <Button type='link' onClick={async () => {
|
||||
await this.handleShowSharer(record, true);
|
||||
}}>{text}</Button>
|
||||
return <Button type='link' onClick={() => this.showModal('更新用户组', record['id'], index)}>{text}</Button>
|
||||
}
|
||||
}, {
|
||||
title: '创建日期',
|
||||
@ -255,13 +277,12 @@ class UserGroup extends Component {
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (text, record) => {
|
||||
|
||||
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<div>
|
||||
<Button type="link" size='small'
|
||||
onClick={() => this.showModal('更新用户组', record)}>编辑</Button>
|
||||
loading={this.state.items[index].updateBtnLoading}
|
||||
onClick={() => this.showModal('更新用户组', record['id'], index)}>编辑</Button>
|
||||
<Button type="link" size='small'
|
||||
onClick={() => this.showDeleteConfirm(record.id, record.name)}>删除</Button>
|
||||
</div>
|
||||
@ -325,7 +346,7 @@ class UserGroup extends Component {
|
||||
|
||||
<Tooltip title="新增">
|
||||
<Button type="dashed" icon={<PlusOutlined/>}
|
||||
onClick={() => this.showModal('新增用户组', {})}>
|
||||
onClick={() => this.showModal('新增用户组')}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
@ -382,17 +403,20 @@ class UserGroup extends Component {
|
||||
loading={this.state.loading}
|
||||
/>
|
||||
|
||||
<UserGroupModal
|
||||
visible={this.state.modalVisible}
|
||||
title={this.state.modalTitle}
|
||||
handleOk={this.handleOk}
|
||||
handleCancel={this.handleCancelModal}
|
||||
confirmLoading={this.state.modalConfirmLoading}
|
||||
model={this.state.model}
|
||||
users={this.state.users}
|
||||
members={this.state.members}
|
||||
>
|
||||
</UserGroupModal>
|
||||
{/* 为了屏蔽ant modal 关闭后数据仍然遗留的问题*/}
|
||||
{this.state.modalVisible ?
|
||||
<UserGroupModal
|
||||
visible={this.state.modalVisible}
|
||||
title={this.state.modalTitle}
|
||||
handleOk={this.handleOk}
|
||||
handleCancel={this.handleCancelModal}
|
||||
confirmLoading={this.state.modalConfirmLoading}
|
||||
model={this.state.model}
|
||||
users={this.state.users}
|
||||
>
|
||||
</UserGroupModal> : undefined
|
||||
}
|
||||
|
||||
|
||||
</Content>
|
||||
</>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, {useState} from 'react';
|
||||
import React from 'react';
|
||||
import {Form, Input, Modal, Select} from "antd/lib/index";
|
||||
|
||||
const UserGroupModal = ({
|
||||
@ -9,7 +9,6 @@ const UserGroupModal = ({
|
||||
confirmLoading,
|
||||
model,
|
||||
users,
|
||||
members,
|
||||
}) => {
|
||||
|
||||
const [form] = Form.useForm();
|
||||
@ -24,6 +23,7 @@ const UserGroupModal = ({
|
||||
title={title}
|
||||
visible={visible}
|
||||
maskClosable={false}
|
||||
destroyOnClose={true}
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
|
||||
392
web/src/components/user/UserShareAsset.js
Normal file
392
web/src/components/user/UserShareAsset.js
Normal file
@ -0,0 +1,392 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Col,
|
||||
Divider,
|
||||
Drawer,
|
||||
Input,
|
||||
Layout,
|
||||
Modal,
|
||||
Row,
|
||||
Select,
|
||||
Space,
|
||||
Table,
|
||||
Tag,
|
||||
Tooltip,
|
||||
Typography
|
||||
} from "antd";
|
||||
import qs from "qs";
|
||||
import request from "../../common/request";
|
||||
import {message} from "antd/es";
|
||||
|
||||
|
||||
import {DeleteOutlined, ExclamationCircleOutlined, PlusOutlined, SyncOutlined, UndoOutlined} from '@ant-design/icons';
|
||||
import {PROTOCOL_COLORS} from "../../common/constants";
|
||||
import UserShareChooseAsset from "./UserShareSelectAsset";
|
||||
|
||||
const confirm = Modal.confirm;
|
||||
const {Search} = Input;
|
||||
const {Content} = Layout;
|
||||
const {Title, Text} = Typography;
|
||||
|
||||
class UserShareAsset extends Component {
|
||||
|
||||
inputRefOfName = React.createRef();
|
||||
changeOwnerFormRef = React.createRef();
|
||||
|
||||
state = {
|
||||
items: [],
|
||||
total: 0,
|
||||
queryParams: {
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
protocol: ''
|
||||
},
|
||||
loading: false,
|
||||
tags: [],
|
||||
model: {},
|
||||
selectedRowKeys: [],
|
||||
delBtnLoading: false,
|
||||
changeOwnerModalVisible: false,
|
||||
changeSharerModalVisible: false,
|
||||
changeOwnerConfirmLoading: false,
|
||||
changeSharerConfirmLoading: false,
|
||||
users: [],
|
||||
selected: {},
|
||||
selectedSharers: [],
|
||||
chooseAssetVisible: false
|
||||
};
|
||||
|
||||
async componentDidMount() {
|
||||
let sharer = this.props.sharer;
|
||||
this.loadTableData({sharer: sharer});
|
||||
|
||||
let result = await request.get('/tags');
|
||||
if (result['code'] === 1) {
|
||||
this.setState({
|
||||
tags: result['data']
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async loadTableData(queryParams) {
|
||||
this.setState({
|
||||
loading: true
|
||||
});
|
||||
|
||||
queryParams = queryParams || this.state.queryParams;
|
||||
|
||||
// queryParams
|
||||
let paramsStr = qs.stringify(queryParams);
|
||||
|
||||
let data = {
|
||||
items: [],
|
||||
total: 0
|
||||
};
|
||||
|
||||
try {
|
||||
let result = await request.get('/assets/paging?' + paramsStr);
|
||||
if (result['code'] === 1) {
|
||||
data = result['data'];
|
||||
} else {
|
||||
message.error(result['message']);
|
||||
}
|
||||
} catch (e) {
|
||||
|
||||
} finally {
|
||||
const items = data.items.map(item => {
|
||||
return {'key': item['id'], ...item}
|
||||
})
|
||||
this.setState({
|
||||
items: items,
|
||||
total: data.total,
|
||||
queryParams: queryParams,
|
||||
loading: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleChangPage = async (pageIndex, pageSize) => {
|
||||
let queryParams = this.state.queryParams;
|
||||
queryParams.pageIndex = pageIndex;
|
||||
queryParams.pageSize = pageSize;
|
||||
|
||||
this.setState({
|
||||
queryParams: queryParams
|
||||
});
|
||||
|
||||
await this.loadTableData(queryParams)
|
||||
};
|
||||
|
||||
handleSearchByName = name => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'name': name,
|
||||
}
|
||||
|
||||
this.loadTableData(query);
|
||||
};
|
||||
|
||||
handleTagsChange = tags => {
|
||||
console.log(tags)
|
||||
// this.setState({
|
||||
// tags: tags
|
||||
// })
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'tags': tags.join(','),
|
||||
}
|
||||
|
||||
this.loadTableData(query);
|
||||
}
|
||||
|
||||
handleSearchByProtocol = protocol => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'protocol': protocol,
|
||||
}
|
||||
this.loadTableData(query);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const columns = [{
|
||||
title: '序号',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
render: (id, record, index) => {
|
||||
return index + 1;
|
||||
}
|
||||
}, {
|
||||
title: '资产名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
render: (name, record) => {
|
||||
let short = name;
|
||||
if (short && short.length > 20) {
|
||||
short = short.substring(0, 20) + " ...";
|
||||
}
|
||||
return (
|
||||
<Tooltip placement="topLeft" title={name}>
|
||||
{short}
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
}, {
|
||||
title: '网络',
|
||||
dataIndex: 'ip',
|
||||
key: 'ip',
|
||||
render: (text, record) => {
|
||||
|
||||
return record['ip'] + ':' + record['port'];
|
||||
}
|
||||
}, {
|
||||
title: '连接协议',
|
||||
dataIndex: 'protocol',
|
||||
key: 'protocol',
|
||||
render: (text, record) => {
|
||||
|
||||
return (<Tag color={PROTOCOL_COLORS[text]}>{text}</Tag>);
|
||||
}
|
||||
}, {
|
||||
title: '状态',
|
||||
dataIndex: 'active',
|
||||
key: 'active',
|
||||
render: text => {
|
||||
if (text) {
|
||||
return (<Badge status="processing" text="运行中"/>);
|
||||
} else {
|
||||
return (<Badge status="error" text="不可用"/>);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
title: '所有者',
|
||||
dataIndex: 'ownerName',
|
||||
key: 'ownerName'
|
||||
}, {
|
||||
title: '创建日期',
|
||||
dataIndex: 'created',
|
||||
key: 'created'
|
||||
}
|
||||
];
|
||||
|
||||
const selectedRowKeys = this.state.selectedRowKeys;
|
||||
const rowSelection = {
|
||||
selectedRowKeys: this.state.selectedRowKeys,
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
this.setState({selectedRowKeys});
|
||||
},
|
||||
};
|
||||
const hasSelected = selectedRowKeys.length > 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Content key='page-content' className="site-layout-background">
|
||||
<div style={{marginBottom: 20}}>
|
||||
<Row justify="space-around" align="middle" gutter={24}>
|
||||
<Col span={8} key={1}>
|
||||
<Title level={3}>共享资产列表</Title>
|
||||
</Col>
|
||||
<Col span={16} key={2} style={{textAlign: 'right'}}>
|
||||
<Space>
|
||||
|
||||
<Search
|
||||
ref={this.inputRefOfName}
|
||||
placeholder="资产名称"
|
||||
allowClear
|
||||
onSearch={this.handleSearchByName}
|
||||
/>
|
||||
|
||||
<Select mode="multiple"
|
||||
allowClear
|
||||
placeholder="资产标签" onChange={this.handleTagsChange}
|
||||
style={{minWidth: 150}}>
|
||||
{this.state.tags.map(tag => {
|
||||
if (tag === '-') {
|
||||
return undefined;
|
||||
}
|
||||
return (<Select.Option key={tag}>{tag}</Select.Option>)
|
||||
})}
|
||||
</Select>
|
||||
|
||||
<Select onChange={this.handleSearchByProtocol}
|
||||
value={this.state.queryParams.protocol ? this.state.queryParams.protocol : ''}
|
||||
style={{width: 100}}>
|
||||
<Select.Option value="">全部协议</Select.Option>
|
||||
<Select.Option value="rdp">rdp</Select.Option>
|
||||
<Select.Option value="ssh">ssh</Select.Option>
|
||||
<Select.Option value="vnc">vnc</Select.Option>
|
||||
<Select.Option value="telnet">telnet</Select.Option>
|
||||
</Select>
|
||||
|
||||
<Tooltip title='重置查询'>
|
||||
|
||||
<Button icon={<UndoOutlined/>} onClick={() => {
|
||||
this.inputRefOfName.current.setValue('');
|
||||
this.loadTableData({
|
||||
...this.state.queryParams,
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
protocol: ''
|
||||
})
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Divider type="vertical"/>
|
||||
|
||||
<Tooltip title="新增">
|
||||
<Button type="dashed" icon={<PlusOutlined/>}
|
||||
onClick={() => {
|
||||
this.setState({
|
||||
chooseAssetVisible: true
|
||||
})
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="刷新列表">
|
||||
<Button icon={<SyncOutlined/>} onClick={() => {
|
||||
this.loadTableData(this.state.queryParams)
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="移除共享">
|
||||
<Button type="dashed" danger disabled={!hasSelected} icon={<DeleteOutlined/>}
|
||||
loading={this.state.delBtnLoading}
|
||||
onClick={() => {
|
||||
const content = <div>
|
||||
您确定要移除选中的<Text style={{color: '#1890FF'}}
|
||||
strong>{this.state.selectedRowKeys.length}</Text>条共享记录吗？
|
||||
</div>;
|
||||
confirm({
|
||||
icon: <ExclamationCircleOutlined/>,
|
||||
content: content,
|
||||
onOk: async () => {
|
||||
let userId = this.state.queryParams.sharer;
|
||||
let result = await request.post(`/resources/remove`, {
|
||||
userId: userId,
|
||||
resourceType: 'asset',
|
||||
resourceIds: this.state.selectedRowKeys
|
||||
});
|
||||
if (result['code'] === 1) {
|
||||
message.success('操作成功', 3);
|
||||
this.setState({
|
||||
selectedRowKeys: []
|
||||
})
|
||||
await this.loadTableData();
|
||||
} else {
|
||||
message.error(result['message'], 10);
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
|
||||
},
|
||||
});
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<Table key='assets-table'
|
||||
rowSelection={rowSelection}
|
||||
dataSource={this.state.items}
|
||||
columns={columns}
|
||||
position={'both'}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
current: this.state.queryParams.pageIndex,
|
||||
pageSize: this.state.queryParams.pageSize,
|
||||
onChange: this.handleChangPage,
|
||||
onShowSizeChange: this.handleChangPage,
|
||||
total: this.state.total,
|
||||
showTotal: total => `总计 ${total} 条`
|
||||
}}
|
||||
loading={this.state.loading}
|
||||
/>
|
||||
|
||||
{this.state.chooseAssetVisible ?
|
||||
<Drawer
|
||||
title="添加资产"
|
||||
placement="right"
|
||||
closable={true}
|
||||
onClose={() => {
|
||||
this.loadTableData()
|
||||
this.setState({
|
||||
chooseAssetVisible: false
|
||||
})
|
||||
}}
|
||||
visible={this.state.chooseAssetVisible}
|
||||
width={window.innerWidth * 0.8}
|
||||
>
|
||||
<UserShareChooseAsset
|
||||
sharer={this.state.queryParams.sharer}
|
||||
>
|
||||
|
||||
</UserShareChooseAsset>
|
||||
</Drawer> : undefined
|
||||
}
|
||||
|
||||
</Content>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default UserShareAsset;
|
||||
416
web/src/components/user/UserShareSelectAsset.js
Normal file
416
web/src/components/user/UserShareSelectAsset.js
Normal file
@ -0,0 +1,416 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Col,
|
||||
Divider,
|
||||
Input,
|
||||
Layout,
|
||||
Modal,
|
||||
Row,
|
||||
Select,
|
||||
Space,
|
||||
Table,
|
||||
Tag,
|
||||
Tooltip,
|
||||
Typography
|
||||
} from "antd";
|
||||
import qs from "qs";
|
||||
import request from "../../common/request";
|
||||
import {message} from "antd/es";
|
||||
|
||||
|
||||
import {PlusOutlined, SyncOutlined, UndoOutlined} from '@ant-design/icons';
|
||||
import {PROTOCOL_COLORS} from "../../common/constants";
|
||||
|
||||
const confirm = Modal.confirm;
|
||||
const {Search} = Input;
|
||||
const {Content} = Layout;
|
||||
const {Title, Text} = Typography;
|
||||
|
||||
class UserShareAsset extends Component {
|
||||
|
||||
inputRefOfName = React.createRef();
|
||||
changeOwnerFormRef = React.createRef();
|
||||
|
||||
state = {
|
||||
items: [],
|
||||
total: 0,
|
||||
queryParams: {
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
protocol: ''
|
||||
},
|
||||
loading: false,
|
||||
tags: [],
|
||||
model: {},
|
||||
selectedRowKeys: [],
|
||||
selectedRows: [],
|
||||
delBtnLoading: false,
|
||||
changeOwnerModalVisible: false,
|
||||
changeSharerModalVisible: false,
|
||||
changeOwnerConfirmLoading: false,
|
||||
changeSharerConfirmLoading: false,
|
||||
users: [],
|
||||
selected: {},
|
||||
totalSelectedRows: [],
|
||||
sharer: ''
|
||||
};
|
||||
|
||||
async componentDidMount() {
|
||||
|
||||
this.setState({
|
||||
sharer: this.props.sharer
|
||||
})
|
||||
let r2 = await request.get('/assets/paging?pageIndex=1&pageSize=1000&sharer=' + this.props.sharer);
|
||||
if (r2['code'] === 1) {
|
||||
let items = r2['data']['items'];
|
||||
|
||||
this.setState({
|
||||
totalSelectedRows: items
|
||||
})
|
||||
}
|
||||
|
||||
this.loadTableData();
|
||||
|
||||
let result = await request.get('/tags');
|
||||
if (result['code'] === 1) {
|
||||
this.setState({
|
||||
tags: result['data']
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async loadTableData(queryParams) {
|
||||
this.setState({
|
||||
loading: true
|
||||
});
|
||||
|
||||
queryParams = queryParams || this.state.queryParams;
|
||||
|
||||
// queryParams
|
||||
let paramsStr = qs.stringify(queryParams);
|
||||
|
||||
let data = {
|
||||
items: [],
|
||||
total: 0
|
||||
};
|
||||
|
||||
try {
|
||||
let result = await request.get('/assets/paging?' + paramsStr);
|
||||
if (result['code'] === 1) {
|
||||
data = result['data'];
|
||||
} else {
|
||||
message.error(result['message']);
|
||||
}
|
||||
} catch (e) {
|
||||
|
||||
} finally {
|
||||
const items = data.items.map(item => {
|
||||
return {'key': item['id'], ...item}
|
||||
})
|
||||
let totalSelectedRows = this.state.totalSelectedRows;
|
||||
let selectedRowKeys = totalSelectedRows.map(item => item['id']);
|
||||
this.setState({
|
||||
items: items,
|
||||
total: data.total,
|
||||
queryParams: queryParams,
|
||||
loading: false,
|
||||
selectedRowKeys: selectedRowKeys
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleChangPage = async (pageIndex, pageSize) => {
|
||||
let queryParams = this.state.queryParams;
|
||||
queryParams.pageIndex = pageIndex;
|
||||
queryParams.pageSize = pageSize;
|
||||
|
||||
this.setState({
|
||||
queryParams: queryParams
|
||||
});
|
||||
|
||||
await this.loadTableData(queryParams)
|
||||
};
|
||||
|
||||
handleSearchByName = name => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'name': name,
|
||||
}
|
||||
|
||||
this.loadTableData(query);
|
||||
};
|
||||
|
||||
handleTagsChange = tags => {
|
||||
console.log(tags)
|
||||
// this.setState({
|
||||
// tags: tags
|
||||
// })
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'tags': tags.join(','),
|
||||
}
|
||||
|
||||
this.loadTableData(query);
|
||||
}
|
||||
|
||||
handleSearchByProtocol = protocol => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'protocol': protocol,
|
||||
}
|
||||
this.loadTableData(query);
|
||||
}
|
||||
|
||||
unSelectRow = async (assetId) => {
|
||||
let userId = this.state.sharer;
|
||||
let result = await request.post(`/resources/remove`, {
|
||||
userId: userId,
|
||||
resourceType: 'asset',
|
||||
resourceIds: [assetId]
|
||||
});
|
||||
if (result['code'] === 1) {
|
||||
message.success('操作成功', 3);
|
||||
} else {
|
||||
message.error(result['message'], 10);
|
||||
}
|
||||
|
||||
const selectedRowKeys = this.state.selectedRowKeys.filter(key => key !== assetId);
|
||||
const totalSelectedRows = this.state.totalSelectedRows.filter(item => item['id'] !== assetId);
|
||||
this.setState({
|
||||
selectedRowKeys: selectedRowKeys,
|
||||
totalSelectedRows: totalSelectedRows
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const columns = [{
|
||||
title: '序号',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
render: (id, record, index) => {
|
||||
return index + 1;
|
||||
}
|
||||
}, {
|
||||
title: '资产名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
render: (name, record) => {
|
||||
let short = name;
|
||||
if (short && short.length > 20) {
|
||||
short = short.substring(0, 20) + " ...";
|
||||
}
|
||||
return (
|
||||
<Tooltip placement="topLeft" title={name}>
|
||||
{short}
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
}, {
|
||||
title: '网络',
|
||||
dataIndex: 'ip',
|
||||
key: 'ip',
|
||||
render: (text, record) => {
|
||||
|
||||
return record['ip'] + ':' + record['port'];
|
||||
}
|
||||
}, {
|
||||
title: '连接协议',
|
||||
dataIndex: 'protocol',
|
||||
key: 'protocol',
|
||||
render: (text, record) => {
|
||||
|
||||
return (<Tag color={PROTOCOL_COLORS[text]}>{text}</Tag>);
|
||||
}
|
||||
}, {
|
||||
title: '状态',
|
||||
dataIndex: 'active',
|
||||
key: 'active',
|
||||
render: text => {
|
||||
if (text) {
|
||||
return (<Badge status="processing" text="运行中"/>);
|
||||
} else {
|
||||
return (<Badge status="error" text="不可用"/>);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
title: '所有者',
|
||||
dataIndex: 'ownerName',
|
||||
key: 'ownerName'
|
||||
}, {
|
||||
title: '创建日期',
|
||||
dataIndex: 'created',
|
||||
key: 'created'
|
||||
}
|
||||
];
|
||||
|
||||
const selectedRowKeys = this.state.selectedRowKeys;
|
||||
const rowSelection = {
|
||||
selectedRowKeys: this.state.selectedRowKeys,
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
this.setState({selectedRowKeys, selectedRows});
|
||||
},
|
||||
};
|
||||
let hasSelected = false;
|
||||
if (selectedRowKeys.length > 0) {
|
||||
let totalSelectedRows = this.state.totalSelectedRows;
|
||||
let allSelectedRowKeys = totalSelectedRows.map(item => item['id']);
|
||||
for (let i = 0; i < selectedRowKeys.length; i++) {
|
||||
let selectedRowKey = selectedRowKeys[i];
|
||||
if (!allSelectedRowKeys.includes(selectedRowKey)) {
|
||||
hasSelected = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title level={3}>共享资产列表</Title>
|
||||
<div>
|
||||
{
|
||||
this.state.totalSelectedRows.map(item => {
|
||||
return <Tag color={PROTOCOL_COLORS[item['protocol']]} closable
|
||||
onClose={() => this.unSelectRow(item['id'])}
|
||||
key={item['id']}>{item['name']}</Tag>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
|
||||
<Divider/>
|
||||
<Content key='page-content' className="site-layout-background">
|
||||
<div style={{marginBottom: 20}}>
|
||||
<Row justify="space-around" align="middle" gutter={24}>
|
||||
<Col span={8} key={1}>
|
||||
<Title level={3}>全部资产列表</Title>
|
||||
</Col>
|
||||
<Col span={16} key={2} style={{textAlign: 'right'}}>
|
||||
<Space>
|
||||
|
||||
<Search
|
||||
ref={this.inputRefOfName}
|
||||
placeholder="资产名称"
|
||||
allowClear
|
||||
onSearch={this.handleSearchByName}
|
||||
/>
|
||||
|
||||
<Select mode="multiple"
|
||||
allowClear
|
||||
placeholder="资产标签" onChange={this.handleTagsChange}
|
||||
style={{minWidth: 150}}>
|
||||
{this.state.tags.map(tag => {
|
||||
if (tag === '-') {
|
||||
return undefined;
|
||||
}
|
||||
return (<Select.Option key={tag}>{tag}</Select.Option>)
|
||||
})}
|
||||
</Select>
|
||||
|
||||
<Select onChange={this.handleSearchByProtocol}
|
||||
value={this.state.queryParams.protocol ? this.state.queryParams.protocol : ''}
|
||||
style={{width: 100}}>
|
||||
<Select.Option value="">全部协议</Select.Option>
|
||||
<Select.Option value="rdp">rdp</Select.Option>
|
||||
<Select.Option value="ssh">ssh</Select.Option>
|
||||
<Select.Option value="vnc">vnc</Select.Option>
|
||||
<Select.Option value="telnet">telnet</Select.Option>
|
||||
</Select>
|
||||
|
||||
<Tooltip title='重置查询'>
|
||||
|
||||
<Button icon={<UndoOutlined/>} onClick={() => {
|
||||
this.inputRefOfName.current.setValue('');
|
||||
this.loadTableData({
|
||||
...this.state.queryParams,
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
protocol: ''
|
||||
})
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Divider type="vertical"/>
|
||||
|
||||
<Tooltip title="刷新列表">
|
||||
<Button icon={<SyncOutlined/>} onClick={() => {
|
||||
this.loadTableData(this.state.queryParams)
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="添加共享">
|
||||
<Button type="primary" disabled={!hasSelected} icon={<PlusOutlined/>}
|
||||
onClick={async () => {
|
||||
console.log(this.state.selectedRows)
|
||||
let totalSelectedRows = this.state.totalSelectedRows;
|
||||
let totalSelectedRowKeys = totalSelectedRows.map(item => item['id']);
|
||||
|
||||
let selectedRows = this.state.selectedRows;
|
||||
let newRowKeys = []
|
||||
for (let i = 0; i < selectedRows.length; i++) {
|
||||
let selectedRow = selectedRows[i];
|
||||
if (totalSelectedRowKeys.includes(selectedRow['id'])) {
|
||||
continue;
|
||||
}
|
||||
totalSelectedRows.push(selectedRow);
|
||||
newRowKeys.push(selectedRow['id']);
|
||||
}
|
||||
|
||||
let userId = this.state.sharer;
|
||||
let result = await request.post(`/resources/add`, {
|
||||
userId: userId,
|
||||
resourceType: 'asset',
|
||||
resourceIds: newRowKeys
|
||||
});
|
||||
if (result['code'] === 1) {
|
||||
message.success('操作成功', 3);
|
||||
this.setState({
|
||||
totalSelectedRows: totalSelectedRows
|
||||
})
|
||||
await this.loadTableData();
|
||||
} else {
|
||||
message.error(result['message'], 10);
|
||||
}
|
||||
}}>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<Table key='assets-table'
|
||||
rowSelection={rowSelection}
|
||||
dataSource={this.state.items}
|
||||
columns={columns}
|
||||
position={'both'}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
current: this.state.queryParams.pageIndex,
|
||||
pageSize: this.state.queryParams.pageSize,
|
||||
onChange: this.handleChangPage,
|
||||
onShowSizeChange: this.handleChangPage,
|
||||
total: this.state.total,
|
||||
showTotal: total => `总计 ${total} 条`
|
||||
}}
|
||||
loading={this.state.loading}
|
||||
/>
|
||||
</Content>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default UserShareAsset;
|
||||
@ -170,4 +170,10 @@ export function compare(p) {
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
export function difference(a, b) {
|
||||
let aSet = new Set(a)
|
||||
let bSet = new Set(b)
|
||||
return Array.from(new Set(a.concat(b).filter(v => !aSet.has(v) || !bSet.has(v))))
|
||||
}
|
||||
Reference in New Issue
Block a user