@ant-design/icons#FundViewOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#FundViewOutlined.
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: Icon.tsx From html2sketch with MIT License | 4 votes |
|
IconSymbol: FC = () => {
return (
<Row>
{/*<CaretUpOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
{/*/>*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
{/*/>*/}
{/*<StepBackwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
{/*<StepForwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
<StepForwardOutlined />
<ShrinkOutlined />
<ArrowsAltOutlined />
<DownOutlined />
<UpOutlined />
<LeftOutlined />
<RightOutlined />
<CaretUpOutlined />
<CaretDownOutlined />
<CaretLeftOutlined />
<CaretRightOutlined />
<VerticalAlignTopOutlined />
<RollbackOutlined />
<FastBackwardOutlined />
<FastForwardOutlined />
<DoubleRightOutlined />
<DoubleLeftOutlined />
<VerticalLeftOutlined />
<VerticalRightOutlined />
<VerticalAlignMiddleOutlined />
<VerticalAlignBottomOutlined />
<ForwardOutlined />
<BackwardOutlined />
<EnterOutlined />
<RetweetOutlined />
<SwapOutlined />
<SwapLeftOutlined />
<SwapRightOutlined />
<ArrowUpOutlined />
<ArrowDownOutlined />
<ArrowLeftOutlined />
<ArrowRightOutlined />
<LoginOutlined />
<LogoutOutlined />
<MenuFoldOutlined />
<MenuUnfoldOutlined />
<BorderBottomOutlined />
<BorderHorizontalOutlined />
<BorderInnerOutlined />
<BorderOuterOutlined />
<BorderLeftOutlined />
<BorderRightOutlined />
<BorderTopOutlined />
<BorderVerticleOutlined />
<PicCenterOutlined />
<PicLeftOutlined />
<PicRightOutlined />
<RadiusBottomleftOutlined />
<RadiusBottomrightOutlined />
<RadiusUpleftOutlined />
<RadiusUprightOutlined />
<FullscreenOutlined />
<FullscreenExitOutlined />
<QuestionOutlined />
<PauseOutlined />
<MinusOutlined />
<PauseCircleOutlined />
<InfoOutlined />
<CloseOutlined />
<ExclamationOutlined />
<CheckOutlined />
<WarningOutlined />
<IssuesCloseOutlined />
<StopOutlined />
<EditOutlined />
<CopyOutlined />
<ScissorOutlined />
<DeleteOutlined />
<SnippetsOutlined />
<DiffOutlined />
<HighlightOutlined />
<AlignCenterOutlined />
<AlignLeftOutlined />
<AlignRightOutlined />
<BgColorsOutlined />
<BoldOutlined />
<ItalicOutlined />
<UnderlineOutlined />
<StrikethroughOutlined />
<RedoOutlined />
<UndoOutlined />
<ZoomInOutlined />
<ZoomOutOutlined />
<FontColorsOutlined />
<FontSizeOutlined />
<LineHeightOutlined />
<SortAscendingOutlined />
<SortDescendingOutlined />
<DragOutlined />
<OrderedListOutlined />
<UnorderedListOutlined />
<RadiusSettingOutlined />
<ColumnWidthOutlined />
<ColumnHeightOutlined />
<AreaChartOutlined />
<PieChartOutlined />
<BarChartOutlined />
<DotChartOutlined />
<LineChartOutlined />
<RadarChartOutlined />
<HeatMapOutlined />
<FallOutlined />
<RiseOutlined />
<StockOutlined />
<BoxPlotOutlined />
<FundOutlined />
<SlidersOutlined />
<AndroidOutlined />
<AppleOutlined />
<WindowsOutlined />
<IeOutlined />
<ChromeOutlined />
<GithubOutlined />
<AliwangwangOutlined />
<DingdingOutlined />
<WeiboSquareOutlined />
<WeiboCircleOutlined />
<TaobaoCircleOutlined />
<Html5Outlined />
<WeiboOutlined />
<TwitterOutlined />
<WechatOutlined />
<AlipayCircleOutlined />
<TaobaoOutlined />
<SkypeOutlined />
<FacebookOutlined />
<CodepenOutlined />
<CodeSandboxOutlined />
<AmazonOutlined />
<GoogleOutlined />
<AlipayOutlined />
<AntDesignOutlined />
<AntCloudOutlined />
<ZhihuOutlined />
<SlackOutlined />
<SlackSquareOutlined />
<BehanceSquareOutlined />
<DribbbleOutlined />
<DribbbleSquareOutlined />
<InstagramOutlined />
<YuqueOutlined />
<AlibabaOutlined />
<YahooOutlined />
<RedditOutlined />
<SketchOutlined />
<AccountBookOutlined />
<AlertOutlined />
<ApartmentOutlined />
<ApiOutlined />
<QqOutlined />
<MediumWorkmarkOutlined />
<GitlabOutlined />
<MediumOutlined />
<GooglePlusOutlined />
<AppstoreAddOutlined />
<AppstoreOutlined />
<AudioOutlined />
<AudioMutedOutlined />
<AuditOutlined />
<BankOutlined />
<BarcodeOutlined />
<BarsOutlined />
<BellOutlined />
<BlockOutlined />
<BookOutlined />
<BorderOutlined />
<BranchesOutlined />
<BuildOutlined />
<BulbOutlined />
<CalculatorOutlined />
<CalendarOutlined />
<CameraOutlined />
<CarOutlined />
<CarryOutOutlined />
<CiCircleOutlined />
<CiOutlined />
<CloudOutlined />
<ClearOutlined />
<ClusterOutlined />
<CodeOutlined />
<CoffeeOutlined />
<CompassOutlined />
<CompressOutlined />
<ContactsOutlined />
<ContainerOutlined />
<ControlOutlined />
<CopyrightCircleOutlined />
<CopyrightOutlined />
<CreditCardOutlined />
<CrownOutlined />
<CustomerServiceOutlined />
<DashboardOutlined />
<DatabaseOutlined />
<DeleteColumnOutlined />
<DeleteRowOutlined />
<DisconnectOutlined />
<DislikeOutlined />
<DollarCircleOutlined />
<DollarOutlined />
<DownloadOutlined />
<EllipsisOutlined />
<EnvironmentOutlined />
<EuroCircleOutlined />
<EuroOutlined />
<ExceptionOutlined />
<ExpandAltOutlined />
<ExpandOutlined />
<ExperimentOutlined />
<ExportOutlined />
<EyeOutlined />
<FieldBinaryOutlined />
<FieldNumberOutlined />
<FieldStringOutlined />
<DesktopOutlined />
<DingtalkOutlined />
<FileAddOutlined />
<FileDoneOutlined />
<FileExcelOutlined />
<FileExclamationOutlined />
<FileOutlined />
<FileImageOutlined />
<FileJpgOutlined />
<FileMarkdownOutlined />
<FilePdfOutlined />
<FilePptOutlined />
<FileProtectOutlined />
<FileSearchOutlined />
<FileSyncOutlined />
<FileTextOutlined />
<FileUnknownOutlined />
<FileWordOutlined />
<FilterOutlined />
<FireOutlined />
<FlagOutlined />
<FolderAddOutlined />
<FolderOutlined />
<FolderOpenOutlined />
<ForkOutlined />
<FormatPainterOutlined />
<FrownOutlined />
<FunctionOutlined />
<FunnelPlotOutlined />
<GatewayOutlined />
<GifOutlined />
<GiftOutlined />
<GlobalOutlined />
<GoldOutlined />
<GroupOutlined />
<HddOutlined />
<HeartOutlined />
<HistoryOutlined />
<HomeOutlined />
<HourglassOutlined />
<IdcardOutlined />
<ImportOutlined />
<InboxOutlined />
<InsertRowAboveOutlined />
<InsertRowBelowOutlined />
<InsertRowLeftOutlined />
<InsertRowRightOutlined />
<InsuranceOutlined />
<InteractionOutlined />
<KeyOutlined />
<LaptopOutlined />
<LayoutOutlined />
<LikeOutlined />
<LineOutlined />
<LinkOutlined />
<Loading3QuartersOutlined />
<LoadingOutlined />
<LockOutlined />
<MailOutlined />
<ManOutlined />
<MedicineBoxOutlined />
<MehOutlined />
<MenuOutlined />
<MergeCellsOutlined />
<MessageOutlined />
<MobileOutlined />
<MoneyCollectOutlined />
<MonitorOutlined />
<MoreOutlined />
<NodeCollapseOutlined />
<NodeExpandOutlined />
<NodeIndexOutlined />
<NotificationOutlined />
<NumberOutlined />
<PaperClipOutlined />
<PartitionOutlined />
<PayCircleOutlined />
<PercentageOutlined />
<PhoneOutlined />
<PictureOutlined />
<PoundCircleOutlined />
<PoundOutlined />
<PoweroffOutlined />
<PrinterOutlined />
<ProfileOutlined />
<ProjectOutlined />
<PropertySafetyOutlined />
<PullRequestOutlined />
<PushpinOutlined />
<QrcodeOutlined />
<ReadOutlined />
<ReconciliationOutlined />
<RedEnvelopeOutlined />
<ReloadOutlined />
<RestOutlined />
<RobotOutlined />
<RocketOutlined />
<SafetyCertificateOutlined />
<SafetyOutlined />
<ScanOutlined />
<ScheduleOutlined />
<SearchOutlined />
<SecurityScanOutlined />
<SelectOutlined />
<SendOutlined />
<SettingOutlined />
<ShakeOutlined />
<ShareAltOutlined />
<ShopOutlined />
<ShoppingCartOutlined />
<ShoppingOutlined />
<SisternodeOutlined />
<SkinOutlined />
<SmileOutlined />
<SolutionOutlined />
<SoundOutlined />
<SplitCellsOutlined />
<StarOutlined />
<SubnodeOutlined />
<SyncOutlined />
<TableOutlined />
<TabletOutlined />
<TagOutlined />
<TagsOutlined />
<TeamOutlined />
<ThunderboltOutlined />
<ToTopOutlined />
<ToolOutlined />
<TrademarkCircleOutlined />
<TrademarkOutlined />
<TransactionOutlined />
<TrophyOutlined />
<UngroupOutlined />
<UnlockOutlined />
<UploadOutlined />
<UsbOutlined />
<UserAddOutlined />
<UserDeleteOutlined />
<UserOutlined />
<UserSwitchOutlined />
<UsergroupAddOutlined />
<UsergroupDeleteOutlined />
<VideoCameraOutlined />
<WalletOutlined />
<WifiOutlined />
<BorderlessTableOutlined />
<WomanOutlined />
<BehanceOutlined />
<DropboxOutlined />
<DeploymentUnitOutlined />
<UpCircleOutlined />
<DownCircleOutlined />
<LeftCircleOutlined />
<RightCircleOutlined />
<UpSquareOutlined />
<DownSquareOutlined />
<LeftSquareOutlined />
<RightSquareOutlined />
<PlayCircleOutlined />
<QuestionCircleOutlined />
<PlusCircleOutlined />
<PlusSquareOutlined />
<MinusSquareOutlined />
<MinusCircleOutlined />
<InfoCircleOutlined />
<ExclamationCircleOutlined />
<CloseCircleOutlined />
<CloseSquareOutlined />
<CheckCircleOutlined />
<CheckSquareOutlined />
<ClockCircleOutlined />
<FormOutlined />
<DashOutlined />
<SmallDashOutlined />
<YoutubeOutlined />
<CodepenCircleOutlined />
<AliyunOutlined />
<PlusOutlined />
<LinkedinOutlined />
<AimOutlined />
<BugOutlined />
<CloudDownloadOutlined />
<CloudServerOutlined />
<CloudSyncOutlined />
<CloudUploadOutlined />
<CommentOutlined />
<ConsoleSqlOutlined />
<EyeInvisibleOutlined />
<FileGifOutlined />
<DeliveredProcedureOutlined />
<FieldTimeOutlined />
<FileZipOutlined />
<FolderViewOutlined />
<FundProjectionScreenOutlined />
<FundViewOutlined />
<MacCommandOutlined />
<PlaySquareOutlined />
<OneToOneOutlined />
<RotateLeftOutlined />
<RotateRightOutlined />
<SaveOutlined />
<SwitcherOutlined />
<TranslationOutlined />
<VerifiedOutlined />
<VideoCameraAddOutlined />
<WhatsAppOutlined />
{/*</Col>*/}
</Row>
);
}
Example #2
| Source File: index.tsx From fe-v5 with Apache License 2.0 | 4 votes |
|
export default function index() {
const history = useHistory();
const [busiId, setBusiId] = useState<number>();
const [list, setList] = useState([]);
const [selectRowKeys, setSelectRowKeys] = useState<number[]>([]);
const [refreshKey, setRefreshKey] = useState(_.uniqueId('refreshKey_'));
const [searchVal, setsearchVal] = useState<string>('');
useEffect(() => {
if (busiId) {
getDashboards(busiId).then((res) => {
setList(res);
});
}
}, [busiId, refreshKey]);
const data = _.filter(list, (item) => {
if (searchVal) {
return _.includes(item.name, searchVal) || _.includes(item.tags, searchVal);
}
return true;
});
return (
<PageLayout title='监控大盘' icon={<FundViewOutlined />} hideCluster={true}>
<div style={{ display: 'flex' }}>
<LeftTree busiGroup={{ onChange: (id) => setBusiId(id) }}></LeftTree>
{busiId ? (
<div className='dashboards-v2'>
<Header
busiId={busiId}
selectRowKeys={selectRowKeys}
refreshList={() => {
setRefreshKey(_.uniqueId('refreshKey_'));
}}
searchVal={searchVal}
onSearchChange={setsearchVal}
/>
<Table
dataSource={data}
columns={[
{
title: '大盘名称',
dataIndex: 'name',
className: 'name-column',
render: (text: string, record: DashboardType) => {
return (
<div className='table-active-text' onClick={() => history.push(`/dashboard/${record.id}`)}>
{text}
</div>
);
},
},
{
title: '分类标签',
dataIndex: 'tags',
className: 'tags-column',
render: (text: string[]) => (
<>
{_.map(_.split(text, ' '), (tag, index) => {
return tag ? (
<Tag
color='blue'
key={index}
style={{
cursor: 'pointer',
}}
onClick={() => {
const queryItem = searchVal.length > 0 ? searchVal.split(' ') : [];
if (queryItem.includes(tag)) return;
setsearchVal((searchVal) => {
if (searchVal) {
return searchVal + ' ' + tag;
}
return tag;
});
}}
>
{tag}
</Tag>
) : null;
})}
</>
),
},
{
title: '更新时间',
width: 120,
dataIndex: 'update_at',
render: (text: number) => moment.unix(text).format('YYYY-MM-DD HH:mm:ss'),
},
{
title: '发布人',
width: 70,
dataIndex: 'create_by',
},
{
title: '操作',
width: '160px',
render: (text: string, record: DashboardType) => (
<div className='table-operator-area'>
<div
className='table-operator-area-normal'
onClick={() => {
FormCpt({
mode: 'edit',
initialValues: {
...record,
tags: record.tags ? _.split(record.tags, ' ') : undefined,
},
busiId,
refreshList: () => {
setRefreshKey(_.uniqueId('refreshKey_'));
},
});
}}
>
编辑
</div>
<div
className='table-operator-area-normal'
onClick={async () => {
Modal.confirm({
title: `是否克隆大盘${record.name}?`,
onOk: async () => {
await cloneDashboard(busiId as number, record.id);
message.success('克隆大盘成功');
setRefreshKey(_.uniqueId('refreshKey_'));
},
onCancel() {},
});
}}
>
克隆
</div>
<div
className='table-operator-area-normal'
onClick={async () => {
const exportData = await getDashboard(record.id);
Export({
data: exportDataStringify(exportData),
});
}}
>
导出
</div>
<div
className='table-operator-area-warning'
onClick={async () => {
Modal.confirm({
title: `是否删除大盘：${record.name}?`,
onOk: async () => {
await removeDashboards([record.id]);
message.success('删除大盘成功');
setRefreshKey(_.uniqueId('refreshKey_'));
},
onCancel() {},
});
}}
>
删除
</div>
</div>
),
},
]}
rowKey='id'
rowSelection={{
selectedRowKeys: selectRowKeys,
onChange: (selectedRowKeys: number[]) => {
setSelectRowKeys(selectedRowKeys);
},
}}
/>
</div>
) : (
<BlankBusinessPlaceholder text='监控大盘' />
)}
</div>
</PageLayout>
);
}
Example #3
| Source File: index.tsx From fe-v5 with Apache License 2.0 | 4 votes |
|
export default function Dashboard() {
const { t } = useTranslation();
const [form] = Form.useForm();
const ref = useRef(null);
const history = useHistory();
const [isModalVisible, setIsModalVisible] = useState(false);
const [modalType, setModalType] = useState<ModalStatus>(ModalStatus.None);
const [selectRowKeys, setSelectRowKeys] = useState<number[]>([]);
const [exportData, setExportData] = useState<string>('');
const [editing, setEditing] = useState(false);
const [query, setQuery] = useState<string>('');
const [searchVal, setsearchVal] = useState<string>('');
const [dashboardList, setDashboardList] = useState<DashboardType[]>();
const [busiId, setBusiId] = useState<number>();
const showModal = () => {
setIsModalVisible(true);
};
const handleOk = async () => {
await form.validateFields();
if (editing) {
await edit();
message.success(t('编辑大盘成功'));
} else {
await create();
message.success(t('新建大盘成功'));
}
(ref?.current as any)?.refreshList();
setIsModalVisible(false);
setEditing(false);
};
useEffect(() => {
if (busiId) {
getDashboard(busiId).then((res) => {
if (searchVal && res.dat) {
const filters = searchVal.split(' ');
for (var i = 0; i < filters.length; i++) {
res.dat = res.dat.filter((item) => item.name.includes(filters[i]) || item.tags.includes(filters[i]));
}
}
setDashboardList(res.dat);
});
}
}, [busiId, searchVal]);
const create = async () => {
let { name, tags } = form.getFieldsValue();
return (
busiId &&
createDashboard(busiId, {
name,
tags,
})
);
};
const edit = async () => {
let { name, tags, id } = form.getFieldsValue();
return (
busiId &&
updateSingleDashboard(busiId, id, {
name,
tags,
pure: true,
})
);
};
const handleEdit = (record: DashboardType) => {
const { id, name, tags } = record;
form.setFieldsValue({
name,
tags,
id,
});
setIsModalVisible(true);
setEditing(true);
};
const handleTagClick = (tag) => {
const queryItem = query.length > 0 ? query.split(' ') : [];
if (queryItem.includes(tag)) return;
setQuery((query) => query + ' ' + tag);
setsearchVal((searchVal) => searchVal + ' ' + tag);
};
const layout = {
labelCol: {
span: 4,
},
wrapperCol: {
span: 16,
},
};
const dashboardColumn: ColumnsType = [
{
title: t('大盘名称'),
dataIndex: 'name',
render: (text: string, record: DashboardType) => {
const { t } = useTranslation();
return (
<div className='table-active-text' onClick={() => history.push(`/dashboard/${busiId}/${record.id}`)}>
{text}
</div>
);
},
},
{
title: t('分类标签'),
dataIndex: 'tags',
render: (text: string[]) => (
<>
{text.map((tag, index) => {
return tag ? (
<Tag
color='blue'
key={index}
style={{
cursor: 'pointer',
}}
onClick={() => handleTagClick(tag)}
>
{tag}
</Tag>
) : null;
})}
</>
),
},
{
title: t('更新时间'),
dataIndex: 'update_at',
render: (text: number) => dayjs(text * 1000).format('YYYY-MM-DD HH:mm:ss'),
},
{
title: t('发布人'),
dataIndex: 'create_by',
},
{
title: t('操作'),
width: '240px',
render: (text: string, record: DashboardType) => (
<div className='table-operator-area'>
<div className='table-operator-area-normal' onClick={() => handleEdit(record)}>
{t('编辑')}
</div>
<div
className='table-operator-area-normal'
onClick={async () => {
confirm({
title: `${t('是否克隆大盘')}${record.name}?`,
onOk: async () => {
await cloneDashboard(busiId as number, record.id);
message.success(t('克隆大盘成功'));
(ref?.current as any)?.refreshList();
},
onCancel() {},
});
}}
>
{t('克隆')}
</div>
<div
className='table-operator-area-warning'
onClick={async () => {
confirm({
title: `${t('是否删除大盘')}：${record.name}?`,
onOk: async () => {
await removeDashboard(busiId as number, record.id);
message.success(t('删除大盘成功'));
(ref?.current as any)?.refreshList();
},
onCancel() {},
});
}}
>
{t('删除')}
</div>
</div>
),
},
];
const onSearchQuery = (e) => {
let val = e.target.value;
setsearchVal(val);
};
const handleImportDashboard = async (data) => {
const { dat } = await importDashboard(busiId as number, data);
return dat || {};
};
return (
<PageLayout title={t('监控大盘')} icon={<FundViewOutlined />} hideCluster={true}>
<div style={{ display: 'flex' }}>
<LeftTree busiGroup={{ onChange: (id) => setBusiId(id) }}></LeftTree>
{busiId ? (
<div className='dashboard' style={{ flex: 1, overflow: 'auto' }}>
<div className='table-handle'>
<div className='table-handle-search'>
<Input
onPressEnter={onSearchQuery}
className={'searchInput'}
value={query}
onChange={(e) => setQuery(e.target.value)}
prefix={<SearchOutlined />}
placeholder={t('大盘名称、分类标签')}
/>
</div>
<div className='table-handle-buttons'>
<Button type='primary' onClick={showModal} ghost>
{t('新建大盘')}
</Button>
<div className={'table-more-options'}>
<Dropdown
overlay={
<ul className='ant-dropdown-menu'>
<li className='ant-dropdown-menu-item' onClick={() => setModalType(ModalStatus.BuiltIn)}>
<span>{t('导入监控大盘')}</span>
</li>
<li
className='ant-dropdown-menu-item'
onClick={async () => {
if (selectRowKeys.length) {
let exportData = await exportDashboard(busiId as number, selectRowKeys);
setExportData(JSON.stringify(exportData.dat, null, 2));
setModalType(ModalStatus.Export);
} else {
message.warning(t('未选择任何大盘'));
}
}}
>
<span>{t('导出监控大盘')}</span>
</li>
<li
className='ant-dropdown-menu-item'
onClick={() => {
if (selectRowKeys.length) {
confirm({
title: '是否批量删除大盘?',
onOk: async () => {
const reuqests = selectRowKeys.map((id) => {
console.log(id);
return removeDashboard(busiId as number, id);
});
Promise.all(reuqests).then(() => {
message.success(t('批量删除大盘成功'));
});
// TODO: 删除完后立马刷新数据有时候不是实时的，这里暂时间隔0.5s后再刷新列表
setTimeout(() => {
(ref?.current as any)?.refreshList();
}, 500);
},
onCancel() {},
});
} else {
message.warning(t('未选择任何大盘'));
}
}}
>
<span>{t('批量删除大盘')}</span>
</li>
</ul>
}
trigger={['click']}
>
<Button onClick={(e) => e.stopPropagation()}>
{t('更多操作')}
<DownOutlined
style={{
marginLeft: 2,
}}
/>
</Button>
</Dropdown>
</div>
</div>
</div>
<Table
dataSource={dashboardList}
className='dashboard-table'
columns={dashboardColumn}
pagination={{
total: dashboardList?.length,
showTotal(total: number) {
return `共 ${total} 条数据`;
},
pageSizeOptions: [30, 50, 100, 300],
defaultPageSize: 30,
showSizeChanger: true,
}}
rowKey='id'
rowSelection={{
selectedRowKeys: selectRowKeys,
onChange: (selectedRowKeys: number[]) => {
setSelectRowKeys(selectedRowKeys);
},
}}
></Table>
</div>
) : (
<BlankBusinessPlaceholder text='监控大盘' />
)}
</div>
<Modal
title={editing ? t('编辑监控大盘') : t('创建新监控大盘')}
visible={isModalVisible}
onOk={handleOk}
onCancel={() => {
setIsModalVisible(false);
}}
destroyOnClose
>
<Form {...layout} form={form} preserve={false}>
<Form.Item
label={t('大盘名称')}
name='name'
wrapperCol={{
span: 24,
}}
rules={[
{
required: true,
message: t('请输入大盘名称'),
},
]}
>
<Input />
</Form.Item>
<Form.Item
wrapperCol={{
span: 24,
}}
label={t('分类标签')}
name='tags'
>
<Select
mode='tags'
dropdownStyle={{
display: 'none',
}}
placeholder={t('请输入分类标签(请用回车分割)')}
></Select>
</Form.Item>
<Form.Item name='id' hidden>
<Input />
</Form.Item>
</Form>
</Modal>
<ImportAndDownloadModal
bgid={busiId}
status={modalType}
crossCluster={false}
fetchBuiltinFunc={getBuiltinDashboards}
submitBuiltinFunc={createBuiltinDashboards}
onClose={() => {
setModalType(ModalStatus.None);
}}
onSuccess={() => {
(ref?.current as any)?.refreshList();
}}
onSubmit={handleImportDashboard}
label='大盘'
title={
ModalStatus.Export === modalType ? (
'大盘'
) : (
<Tabs defaultActiveKey={ModalStatus.BuiltIn} onChange={(e: ModalStatus) => setModalType(e)} className='custom-import-alert-title'>
<TabPane tab=' 导入内置大盘模块' key={ModalStatus.BuiltIn}></TabPane>
<TabPane tab='导入大盘JSON' key={ModalStatus.Import}></TabPane>
</Tabs>
)
}
exportData={exportData}
/>
</PageLayout>
);
}
