@ant-design/icons#CodeTwoTone TypeScript Examples
The following examples show how to use
@ant-design/icons#CodeTwoTone.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.tsx From anew-server with MIT License | 4 votes |
|
HostList: React.FC = () => {
const { initialState } = useModel('@@initialState');
if (!initialState || !initialState.DictObj) {
return null;
}
const authType: optionsType[] = initialState.DictObj.auth_type.map((item: any) => ({ label: item.dict_value, value: item.dict_key }));
const hostType: optionsType[] = initialState.DictObj.host_type.map((item: any) => ({ label: item.dict_value, value: item.dict_key }));
const [createVisible, setCreateVisible] = useState<boolean>(false);
const [updateVisible, setUpdateVisible] = useState<boolean>(false);
const [recordVisible, setRecordVisible] = useState<boolean>(false);
const actionRef = useRef<ActionType>();
const [formValues, setFormValues] = useState<API.HostList>();
const [hostGroup, setHostGroup] = useState<API.HostGroupList[]>([]);
const [group_id, setGroupId] = useState<string>();
const [hostId, setHostId] = useState<number>();
const access = useAccess();
const { consoleWin, setConsoleWin } = useModel('global');
const handleDelete = (record: API.Ids) => {
if (!record) return;
if (Array.isArray(record.ids) && !record.ids.length) return;
const content = `您是否要删除这${Array.isArray(record.ids) ? record.ids.length : ''}项？`;
Modal.confirm({
title: '注意',
content,
onOk: () => {
deleteHost(record).then((res) => {
if (res.code === 200 && res.status === true) {
message.success(res.message);
if (actionRef.current) {
actionRef.current.reload();
}
}
});
},
onCancel() { },
});
};
const saveTtys = (val: API.TtyList) => {
let hosts = JSON.parse(localStorage.getItem('TABS_TTY_HOSTS') as string)
if (hosts) {
hosts.push(val)
} else {
hosts = []
hosts.push(val)
}
localStorage.setItem('TABS_TTY_HOSTS', JSON.stringify(hosts));
}
useEffect(() => {
queryHostGroups({ all: true, not_null: true }).then((res) => {
if (Array.isArray(res.data.data)) {
setHostGroup([{ id: 0, name: '所有主机' }, ...res.data.data]);
}
});
}, []);
const columns: ProColumns<API.HostList>[] = [
{
title: '主机名',
dataIndex: 'host_name',
},
{
title: '地址',
dataIndex: 'ip_address',
},
{
title: '端口',
dataIndex: 'port',
},
{
title: '主机类型',
dataIndex: 'host_type',
valueType: 'select',
fieldProps: {
options: hostType,
},
},
{
title: '认证类型',
dataIndex: 'auth_type',
valueType: 'select',
fieldProps: {
options: authType,
},
},
{
title: '创建人',
dataIndex: 'creator',
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
render: (_, record) => (
<>
<Tooltip title="控制台">
<CodeTwoTone
style={{ fontSize: '17px', color: 'blue' }}
onClick={() => {
let actKey = "tty1"
let hosts = JSON.parse(localStorage.getItem('TABS_TTY_HOSTS') as string) || []
if (hosts) {
actKey = "tty" + (hosts.length + 1).toString()
}
const hostsObj: API.TtyList = { hostname: record.host_name, ipaddr: record.ip_address, port: record.port, id: record.id.toString(), actKey: actKey, secKey: null }
saveTtys(hostsObj)
if (consoleWin) {
if (!consoleWin.closed) {
consoleWin.focus();
} else {
setConsoleWin(window.open('/asset/console', 'consoleTrm'));
}
} else {
setConsoleWin(window.open('/asset/console', 'consoleTrm'));
}
}}
/>
</Tooltip>
{/* <Divider type="vertical" />
<Tooltip title="详情">
<FileDoneOutlined
style={{ fontSize: '17px', color: '#52c41a' }}
onClick={() => {
setFormValues(record);
handleDescModalVisible(true);
}}
/>
</Tooltip> */}
<Divider type="vertical" />
<TableDropdown
key="actionGroup"
onSelect={(key) => {
switch (key) {
case 'delete':
handleDelete({ ids: [record.id] });
break;
case 'edit':
setFormValues(record);
setUpdateVisible(true);
break;
case 'record':
setHostId(record.id)
setRecordVisible(true);
break;
}
}}
menus={[
{ key: 'edit', name: '修改' },
{ key: 'record', name: '操作录像' },
{ key: 'delete', name: '删除' },
]}
/>
</>
),
},
];
return (
<PageHeaderWrapper>
{/* 权限控制显示内容 */}
{access.hasPerms(['admin', 'host:list']) && <ProTable
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Access accessible={access.hasPerms(['admin', 'host:create'])}>
<Button key="1" type="primary" onClick={() => setCreateVisible(true)}>
<PlusOutlined /> 新建
</Button>
</Access>,
selectedRows && selectedRows.length > 0 && (
<Access accessible={access.hasPerms(['admin', 'host:delete'])}>
<Button
key="2"
type="primary"
onClick={() => handleDelete({ ids: selectedRows.map((item) => item.id) })}
danger
>
<DeleteOutlined /> 删除
</Button>
</Access>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
<div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div>
)}
request={async (params) => queryHosts({ params }).then((res) => res.data)}
params={{ group_id, }}
columns={columns}
rowSelection={{}}
tableRender={(_, dom) => hostGroup.length > 1 ? (
<div style={{ display: 'flex', width: '100%', }}>
<Menu
onSelect={(e) => {
if (e.key === '0') {
setGroupId('');
} else {
setGroupId(e.key);
}
}}
style={{ width: 156 }}
defaultSelectedKeys={['0']}
defaultOpenKeys={['sub1']}
mode="inline"
>
<Menu.SubMenu
key="sub1"
title={
<span>
<UsergroupAddOutlined />
<span>主机分组</span>
</span>
}
>
{hostGroup &&
hostGroup.map((item) => <Menu.Item key={item.id}>{item.name}</Menu.Item>)}
</Menu.SubMenu>
</Menu>
<div style={{ flex: 1, }}>
{dom}
</div>
</div>
) : <div style={{ flex: 1, }}>
{dom}
</div>}
/>}
{createVisible && (
<CreateForm
actionRef={actionRef}
handleChange={setCreateVisible}
modalVisible={createVisible}
/>
)}
{updateVisible && (
<UpdateForm
actionRef={actionRef}
handleChange={setUpdateVisible}
modalVisible={updateVisible}
values={formValues}
/>
)}
{recordVisible && (
<RecordModal
handleChange={setRecordVisible}
modalVisible={recordVisible}
hostId={hostId}
/>
)}
</PageHeaderWrapper>
);
}
