@ant-design/icons#CodeTwoTone TypeScript Examples

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>{' '}
                        项&nbsp;&nbsp;
                    </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>
    );
}