@ant-design/icons#SwitcherOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#SwitcherOutlined.
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 jetlinks-ui-antd with MIT License | 4 votes |
|
Screen = (props: Props) => {
const [categoryList, setCategoryList] = useState([]);
const [dataList, setDataList] = useState({
data: [],
pageIndex: 0,
total: 0,
pageSize: 0
});
const [id, setId] = useState('');
const [url, setUrl] = useState('');
const [saveVisible, setSaveVisible] = useState(false);
const [editVisible, setEditVisible] = useState(false);
const [copyVisible, setCopyVisible] = useState(false);
const [param, setParam] = useState({});
const [searchParam, setSearchParam] = useState({pageSize: 12, pageIndex: 0, terms: {type: 'big_screen'}});
const token = getAccessToken();
const handleSearch = (params: any) => {
setSearchParam(params);
api.screen.query(encodeQueryParam(params)).then(res => {
if (res.status === 200) {
setDataList(res.result)
}
})
};
let delConfirm = (id: string) => {
confirm({
title: '删除大屏',
icon: <ExclamationCircleOutlined/>,
content: '确认删除该大屏？',
onOk() {
api.screen.remove(id).then(res => {
if (res.status === 200) {
handleSearch(searchParam);
}
})
},
onCancel() {
message.info('已取消')
}
})
};
let updateState = (state: string, id: string) => {
confirm({
title: `${state === 'enabled' ? '禁用' : '启用'}大屏`,
icon: <ExclamationCircleOutlined/>,
content: `确认${state === 'enabled' ? '禁用' : '启用'}该大屏`,
onOk() {
api.screen.update(id, {
state: {
value: state === 'enabled' ? 'disabled' : 'enabled'
}
}).then(res => {
if (res.status === 200) {
handleSearch(searchParam);
}
})
},
onCancel() {
message.info('已取消')
}
})
};
const uploadProps = (item: any) => {
api.screen.save(item).then(res => {
if (res.status === 200) {
message.success('导入成功');
handleSearch(searchParam);
}
})
};
const onChange = (page: number, pageSize: number) => {
handleSearch({
pageIndex: page - 1,
pageSize,
terms: searchParam.terms
});
};
let getView = (view: any) => {
let children = [];
if (view.children && view.children.length > 0) {
children = view.children.map((i: any) => {
return getView(i)
});
return {
id: view.id,
children: children,
pId: view.parentId,
value: view.id,
title: view.name
}
} else {
return {
id: view.id,
pId: view.parentId,
value: view.id,
title: view.name
}
}
};
useEffect(() => {
//获取跳转url
api.screen.getUrl().then((res) => {
if(res.status === 200){
if(res.result.urls['big-screen-path'] != ''){
setUrl(res.result.urls['big-screen-path'])
}else{
message.error('配置错误,请联系管理员');
}
}
});
api.categoty.queryNoPaging({}).then(res => {
if (res.status === 200) {
setCategoryList(res.result);
}
});
handleSearch(searchParam);
}, []);
const findCategory = (id:string)=>{
const category: Partial<CategoryItem> =
categoryList.find((i:any) => i.id === id) || {};
return category.name;
};
return (
<PageHeaderWrapper title="大屏管理">
<Card bordered={false}>
<div className={styles.tableList}>
<div>
<SearchForm
search={(params: any) => {
handleSearch({
terms: {...params, type: 'big_screen'},
pageSize: 8,
});
}}
formItems={[{
label: '大屏名称',
key: 'name$LIKE',
type: 'string',
},
{
label: '大屏分类',
key: 'catalogId$LIKE',
type: 'list',
props: {
data: categoryList,
// mode: 'default',
showSearch:true
}
}]}
/>
</div>
<div className={styles.tableListOperator}>
<Button icon="plus" type="primary" onClick={() => setSaveVisible(true)}>新建大屏</Button>
<Divider type="vertical"/>
<Upload
action="/jetlinks/file/static"
headers={{
'X-Access-Token': getAccessToken(),
}}
showUploadList={false} accept='.json' beforeUpload={(file) => {
const reader = new FileReader();
reader.readAsText(file);
reader.onload = (result) => {
try {
uploadProps(JSON.parse(result.target.result));
} catch (error) {
message.error('文件格式错误');
}
}
}}>
<Button><Icon type="upload"/>快速导入</Button>
</Upload>
</div>
</div>
</Card>
<div style={{marginBottom: '30px'}}>
<div className={styles.cardList}>
<List<any>
rowKey="id"
grid={{gutter: 24, xl: 4, lg: 3, md: 2, sm: 2, xs: 1}}
dataSource={dataList.data || []}
pagination={{
current: dataList.pageIndex + 1,
total: dataList.total,
pageSize: dataList.pageSize,
onChange,
showQuickJumper: true,
showSizeChanger: true,
hideOnSinglePage: true,
pageSizeOptions: ['8', '16', '40', '80'],
style: {marginTop: -20},
showTotal: (total: number) =>
`共 ${total} 条记录 第 ${dataList.pageIndex + 1}/${Math.ceil(
dataList.total / dataList.pageSize,
)}页`
}}
renderItem={item => {
if (item && item.id) {
let metadata = item.metadata != undefined && item.metadata != "" ? JSON.parse(item.metadata) : {};
return (
<List.Item key={item.id}>
<Card hoverable bodyStyle={{paddingBottom: 20}}
onMouseEnter={() => setId(item.id)} onMouseLeave={() => setId('')}
actions={[
<Tooltip placement="bottom" title="编辑">
<EditOutlined onClick={() => {
setEditVisible(true);
setParam({
id: item.id,
name: item.name,
description: item.description,
catalogId: item.catalogId,
url: url
})
}}/>
</Tooltip>,
<Tooltip placement="bottom" title="预览">
<EyeOutlined onClick={() => {
url != '' ? window.open(url + '#/view/' + item.id + '?token=' + token, '_blank') : message.error('配置错误,请联系管理员')
}}/>
</Tooltip>,
<Tooltip placement="bottom" title="复制">
<SwitcherOutlined onClick={() => {
setCopyVisible(true);
setParam({url: url, metadata: item.metadata})
}}/>
</Tooltip>,
<Tooltip placement="bottom" title="下载">
<Icon type="download" onClick={() => {
downloadObject(item, '大屏')
}}/>
</Tooltip>,
<Tooltip key="more_actions" title="">
<Dropdown overlay={
<Menu>
<Menu.Item key="1">
<Button onClick={() => {
updateState(item.state.value, item.id)
}} icon={item.state.value === 'enabled' ? 'close' : 'check'} type="link">
{item.state.value === 'enabled' ? '禁用' : '启用'}
</Button>
</Menu.Item>
{item.state.value === 'disabled' && (
<Menu.Item key="2">
<Button icon="delete" type="link" onClick={() => {
delConfirm(item.id)
}}>删除</Button>
</Menu.Item>
)}
</Menu>
}>
<Icon type="ellipsis"/>
</Dropdown>
</Tooltip>,
]}
>
<Card.Meta
avatar={<Avatar size={60} src={ metadata.visual != undefined && metadata.visual.backgroundUrl != undefined ? metadata.visual.backgroundUrl : false }/>}
title={<AutoHide title={item.name} style={{width: '95%',fontWeight:600}}/>}
description={<AutoHide title={item.id} style={{width: '95%'}}/>}
/>
<div className={styles.status}>
<div style={{textAlign: 'center', minWidth: '80px'}}>
<p>状态: <span style={{fontWeight:600}}>已{item.state.text}</span></p>
</div>
<div style={{textAlign: 'center', minWidth: '80px'}}>
<p>分类: <span style={{fontWeight:600}}>{findCategory(item.catalogId)}</span></p>
</div>
</div>
<div className={styles.edit} style={{display: item.id == id ? 'block' : 'none'}}>
<div className={styles.editBtn}><a onClick={() => {
url != '' ? window.open(url + `#/build/${id}?token=${token}`, '_blank') : message.error('配置错误,请联系管理员')
}}>编辑</a></div>
</div>
</Card>
</List.Item>
);
}
return;
}}
/>
</div>
{saveVisible && <Save data={url} close={() => {
setSaveVisible(false)
}} save={() => {
setSaveVisible(false);
handleSearch(searchParam);
}}/>}
{copyVisible && <Copy data={param} close={() => {
setCopyVisible(false)
}} save={() => {
setCopyVisible(false);
handleSearch(searchParam);
}}/>}
{editVisible && <Edit data={param} close={() => {
setEditVisible(false)
}} save={() => {
setEditVisible(false);
handleSearch(searchParam);
}}/>}
</div>
</PageHeaderWrapper>
)
}
Example #3
| Source File: screenValue.tsx From jetlinks-ui-antd with MIT License | 4 votes |
|
ScreenValue = (props: Props) => {
const [dataList, setDataList] = useState({
data: [],
pageIndex: 0,
total: 0,
pageSize: 0
});
const [saveVisible, setSaveVisible] = useState(false);
const [editVisible, setEditVisible] = useState(false);
const [param, setParam] = useState({});
const handleSearch = () => {
api.screen.query({ }).then(res => {
if (res.status === 200) {
setDataList(res.result)
}
})
}
let delConfirm = (id: string) => {
confirm({
title: '删除大屏',
icon: <ExclamationCircleOutlined />,
onOk() {
api.screen.remove(id).then(res => {
if (res.status === 200) {
handleSearch()
}
})
}
});
}
function copyConfirm() {
confirm({
title: '复制大屏',
icon: <ExclamationCircleOutlined />,
content: '确认复制',
onOk() {
console.log('OK');
},
onCancel() {
console.log('Cancel');
},
});
}
useEffect(() => {
handleSearch();
}, []);
return (
<div>
<div className={styles.cardList}>
{/* <Button icon="plus" type="primary" onClick={i => setSaveVisible(true)}>新建大屏</Button> */}
<List<any>
rowKey="id"
grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
dataSource={ dataList.data || []}
pagination={{
current: dataList.pageIndex + 1,
total: dataList.total,
pageSize: dataList.pageSize,
showQuickJumper: true,
showSizeChanger: true,
// hideOnSinglePage: true,
pageSizeOptions: ['8', '16', '40', '80'],
// // style: { marginTop: -20 },
showTotal: (total: number) =>
`共 ${total} 条记录 第 ${dataList.pageIndex + 1}/${Math.ceil(
dataList.total / dataList.pageSize,
)}页`
}}
renderItem={item => {
if (item && item.id) {
return (
<List.Item key={item.id}>
<Card hoverable bodyStyle={{ paddingBottom: 20 }}
actions={[
<Tooltip placement="bottom" title="删除">
<DeleteOutlined onClick={() => {delConfirm(item.id)}} />
</Tooltip>,
<Tooltip placement="bottom" title="编辑">
<EditOutlined onClick={() => {setEditVisible(true); setParam({id: item.id, name: item.name, description: item.description, catalogId: props.data})}} />
</Tooltip>,
<Tooltip placement="bottom" title="查看">
<DeleteOutlined onClick={() => {}} />
{/* <EyeOutlined onClick={i => { window.open(`http://localhost:8080/view/${item.id}`, '_blank') }} /> */}
</Tooltip>,
<Tooltip placement="bottom" title="复制">
<SwitcherOutlined onClick={copyConfirm} />
</Tooltip>
]}
>
<Card.Meta
avatar={<Avatar size={40} src="https://oss.bladex.vip/caster/upload/20200512/f26107bbb77a84949285617848745d81.jpg"/>}
title={<AutoHide title={item.name} style={{ width: '95%' }} />}
description={<AutoHide title={item.id} style={{ width: '95%' }} />}
/>
<div className={styles.status}>
<p>已{item.state.text}</p>
</div>
</Card>
</List.Item>
);
}
return;
}}
/>
</div>
{saveVisible && <Save data={props.data} close={() => {
setSaveVisible(false)
}} save={() => {setSaveVisible(false);handleSearch();}} />}
{editVisible && <Save data={param} close={() => {
setEditVisible(false)
}} save={() => {setEditVisible(false);handleSearch();}} />}
</div >
)
}
Example #4
| Source File: index.tsx From jetlinks-ui-antd with MIT License | 4 votes |
|
Screen = (props: Props) => {
// const [categoryList, setCategoryList] = useState([]);
const [dataList, setDataList] = useState({
data: [],
pageIndex: 0,
total: 0,
pageSize: 0,
});
const [id, setId] = useState('');
const [url, setUrl] = useState('');
const [saveVisible, setSaveVisible] = useState(false);
const [editVisible, setEditVisible] = useState(false);
const [copyVisible, setCopyVisible] = useState(false);
const [param, setParam] = useState({});
const [searchParam, setSearchParam] = useState({
pageSize: 8,
pageIndex: 0,
terms: { type: 'vis_configuration' },
});
const token = getAccessToken();
const handleSearch = (params: any) => {
setSearchParam(params);
api.screen.query(encodeQueryParam(params)).then(res => {
if (res.status === 200) {
setDataList(res.result);
}
});
};
let delConfirm = (id: string) => {
confirm({
title: '删除组态',
icon: <ExclamationCircleOutlined />,
content: '确认删除该组态？',
onOk() {
api.screen.remove(id).then(res => {
if (res.status === 200) {
handleSearch(searchParam);
}
});
},
onCancel() {
message.info('已取消');
},
});
};
let updateState = (state: string, id: string) => {
confirm({
title: `${state === 'enabled' ? '禁用' : '启用'}组态`,
icon: <ExclamationCircleOutlined />,
content: `确认${state === 'enabled' ? '禁用' : '启用'}该组态`,
onOk() {
api.screen
.update(id, {
state: {
value: state === 'enabled' ? 'disabled' : 'enabled',
},
})
.then(res => {
if (res.status === 200) {
handleSearch(searchParam);
}
});
},
onCancel() {
message.info('已取消');
},
});
};
const uploadProps = (item: any) => {
api.screen.save(item).then(res => {
if (res.status === 200) {
message.success('导入成功');
handleSearch(searchParam);
}
});
};
const onListChange = (page: number, pageSize: number) => {
console.log(page, pageSize, 'jahaha');
handleSearch({
pageIndex: page - 1,
pageSize,
terms: searchParam.terms,
});
};
let getView = (view: any) => {
let children = [];
if (view.children && view.children.length > 0) {
children = view.children.map((i: any) => {
return getView(i);
});
return {
id: view.id,
children: children,
pId: view.parentId,
value: view.id,
title: view.name,
};
} else {
return {
id: view.id,
pId: view.parentId,
value: view.id,
title: view.name,
};
}
};
useEffect(() => {
//获取跳转url
api.screen.getUrl().then(res => {
if (res.status === 200) {
if (
res.result.urls['vis-configuration'] !== '' &&
res.result.urls['vis-configuration'] !== undefined
) {
setUrl(res.result.urls['vis-configuration']);
} else {
message.error('配置错误,请联系管理员');
// setUrl('http://localhost:8000/')
}
}
});
// api.categoty.queryNoPaging({}).then(res => {
// if (res.status === 200) {
// setCategoryList(res.result);
// }
// });
handleSearch(searchParam);
}, []);
// const findCategory = (id:string)=>{
// const category: Partial<CategoryItem> =
// categoryList.find((i:any) => i.id === id) || {};
// return category.name;
// };
return (
<PageHeaderWrapper title="组态管理">
<Card bordered={false}>
<div className={styles.tableList}>
<div>
<SearchForm
search={(params: any) => {
handleSearch({
terms: { ...params, type: 'vis_configuration' },
pageSize: 8,
});
}}
formItems={[
{
label: '组态名称',
key: 'name$LIKE',
type: 'string',
},
// {
// label: '组态分类',
// key: 'classifiedId$LIKE',
// type: 'list',
// props: {
// data: categoryList,
// mode: 'default'
// }
// }
]}
/>
</div>
<div className={styles.tableListOperator}>
<Button icon="plus" type="primary" onClick={() => setSaveVisible(true)}>
新建组态
</Button>
<Divider type="vertical" />
<Upload
action="/jetlinks/file/static"
headers={{
'X-Access-Token': getAccessToken(),
}}
showUploadList={false}
accept=".json"
beforeUpload={file => {
const reader = new FileReader();
reader.readAsText(file);
reader.onload = result => {
try {
uploadProps(JSON.parse(result.target.result));
} catch (error) {
message.error('文件格式错误');
}
};
}}
>
<Button>
<Icon type="upload" />
快速导入
</Button>
</Upload>
</div>
</div>
</Card>
<div style={{ marginBottom: '30px' }}>
<div className={styles.cardList}>
<List<any>
rowKey="id"
grid={{ gutter: 24, xl: 4, lg: 3, md: 2, sm: 2, xs: 1 }}
dataSource={dataList.data || []}
pagination={{
current: dataList.pageIndex + 1,
total: dataList.total,
pageSize: dataList.pageSize,
onChange: (page, pageSize) => {
onListChange(page, pageSize || 8);
},
onShowSizeChange: (page, size) => {
onListChange(page, size);
},
showQuickJumper: true,
showSizeChanger: true,
// hideOnSinglePage: true,
pageSizeOptions: ['8', '16', '40', '80'],
style: { marginTop: -20 },
showTotal: (total: number) =>
`共 ${total} 条记录 第 ${dataList.pageIndex + 1}/${Math.ceil(
dataList.total / dataList.pageSize,
)}页`,
}}
renderItem={item => {
if (item && item.id) {
let metadata =
item.metadata != undefined && item.metadata != ''
? JSON.parse(item.metadata)
: {};
return (
<List.Item key={item.id}>
<Card
hoverable
bodyStyle={{ paddingBottom: 20 }}
onMouseEnter={() => setId(item.id)}
onMouseLeave={() => setId('')}
actions={[
<Tooltip placement="bottom" title="编辑">
<EditOutlined
onClick={() => {
setEditVisible(true);
setParam({
id: item.id,
name: item.name,
description: item.description,
catalogId: item.catalogId,
url: url,
});
}}
/>
</Tooltip>,
<Tooltip placement="bottom" title="预览">
<EyeOutlined
onClick={() => {
url != ''
? window.open(url + `#/?id=${id}&token=${token}`, '_blank')
: message.error('配置错误,请联系管理员');
}}
/>
</Tooltip>,
<Tooltip placement="bottom" title="复制">
<SwitcherOutlined
onClick={() => {
setCopyVisible(true);
setParam({ url: url, metadata: item.metadata });
}}
/>
</Tooltip>,
<Tooltip placement="bottom" title="下载">
<Icon
type="download"
onClick={() => {
downloadObject(item, '组态');
}}
/>
</Tooltip>,
<Tooltip key="more_actions" title="">
<Dropdown
overlay={
<Menu>
<Menu.Item key="1">
<Button
onClick={() => {
updateState(item.state.value, item.id);
}}
icon={item.state.value === 'enabled' ? 'close' : 'check'}
type="link"
>
{item.state.value === 'enabled' ? '禁用' : '启用'}
</Button>
</Menu.Item>
{item.state.value === 'disabled' && (
<Menu.Item key="2">
<Button
icon="delete"
type="link"
onClick={() => {
delConfirm(item.id);
}}
>
删除
</Button>
</Menu.Item>
)}
</Menu>
}
>
<Icon type="ellipsis" />
</Dropdown>
</Tooltip>,
]}
>
<Card.Meta
avatar={
<Avatar
size={60}
src={
metadata.visual != undefined &&
metadata.visual.backgroundUrl != undefined
? metadata.visual.backgroundUrl
: false
}
/>
}
title={
<AutoHide title={item.name} style={{ width: '95%', fontWeight: 600 }} />
}
description={<AutoHide title={item.id} style={{ width: '95%' }} />}
/>
<div className={styles.status}>
<div style={{ textAlign: 'center', minWidth: '80px' }}>
<p>
状态: <span style={{ fontWeight: 600 }}>已{item.state.text}</span>
</p>
</div>
<div style={{ textAlign: 'center', minWidth: '80px' }}>
{/* <p>分类: <span style={{fontWeight:600}}>{findCategory(item.catalogId)}</span></p> */}
</div>
</div>
<div
className={styles.edit}
style={{ display: item.id == id ? 'block' : 'none' }}
>
<div className={styles.editBtn}>
<a
onClick={() => {
url != ''
? window.open(url + `#/?id=${id}&token=${token}`, '_blank')
: message.error('配置错误,请联系管理员');
}}
>
编辑
</a>
</div>
</div>
</Card>
</List.Item>
);
}
return;
}}
/>
</div>
{saveVisible && (
<Save
data={url}
close={() => {
setSaveVisible(false);
}}
save={() => {
setSaveVisible(false);
handleSearch(searchParam);
}}
/>
)}
{copyVisible && (
<Copy
data={param}
close={() => {
setCopyVisible(false);
}}
save={() => {
setCopyVisible(false);
handleSearch(searchParam);
}}
/>
)}
{editVisible && (
<Edit
data={param}
close={() => {
setEditVisible(false);
}}
save={() => {
setEditVisible(false);
handleSearch(searchParam);
}}
/>
)}
</div>
</PageHeaderWrapper>
);
}
