();
- const [searchParams, setSearchParams] = useState<{ name: string }>();
- const content = (
-
- {
- setSearchParams({ name: value });
- actionRef.current?.reload();
- }}
- />
-
- );
+ const [searchParams, setSearchParams] = useState>();
+ const [loading, setLoading] = useState(false);
+ const [items, setItems] = useState<{ key: string; label: React.JSX.Element }[]>([]);
+
const initSso = (idpInitUrl: string) => {
const div = window.document.createElement('div');
div.innerHTML =
@@ -64,42 +74,40 @@ const CardList = () => {
document.body.removeChild(div);
};
- const renderBadge = (count: number, active = false) => {
- return (
-
- );
- };
+ useAsyncEffect(async () => {
+ setLoading(true);
+ const { result, success } = await getAppGroupList().finally(() => {
+ setLoading(false);
+ });
+ if (success && result) {
+ let data: { key: string; label: React.JSX.Element }[] = [];
+ result.forEach((item) => {
+ data.push({
+ key: item.id,
+ label: (
+
+ {item.name}
+ {renderBadge(item.appCount, currentGroup === item.id)}
+
+ ),
+ });
+ });
+ setItems(data);
+ // 如果有分组，取第一个分组
+ if (data.length > 0) {
+ setSearchParams({ groupId: data[0].key });
+ actionRef.current?.reload();
+ }
+ // 手动请求
+ else {
+ actionRef.current?.reload();
+ }
+ }
+ }, []);
return (
-
-
-
+
rowKey="id"
split
@@ -111,32 +119,34 @@ const CardList = () => {
xl: 4,
xxl: 5,
}}
- request={queryAppList}
- pagination={{}}
- toolbar={{
- menu: {
- type: 'tab',
- activeKey,
- items: [
- {
- key: 'tab1',
- label: 开发分组{renderBadge(99, activeKey === 'tab1')},
- },
- {
- key: 'tab2',
- label: 运维分组{renderBadge(32, activeKey === 'tab2')},
- },
- ],
- onChange(key) {
- setActiveKey(key);
- },
- },
+ loading={loading}
+ onLoadingChange={(loading) => {
+ setLoading(loading);
}}
+ manualRequest
+ request={queryAppList}
+ toolbar={
+ items.length > 0
+ ? {
+ menu: {
+ type: 'tab',
+ activeKey: currentGroup,
+ items: items,
+ onChange(key) {
+ if (key) {
+ setCurrentGroup(key);
+ setSearchParams((values) => {
+ return { ...values, groupId: key };
+ });
+ actionRef.current?.reload();
+ }
+ },
+ },
+ }
+ : {}
+ }
params={searchParams}
actionRef={actionRef}
- tableExtraRender={() => {
- return {content};
- }}
renderItem={(item: AppList) => {
return (
item &&
@@ -147,8 +157,11 @@ const CardList = () => {
hoverable
bordered={false}
onClick={async () => {
- if (item.initLoginType === InitLoginType.PORTAL_OR_APP_INIT_SSO) {
- initSso(item.initLoginUrl);
+ if (
+ item.initLoginType === InitLoginType.portal_or_app_init_sso &&
+ item?.initLoginUrl
+ ) {
+ initSso(item?.initLoginUrl);
return;
}
message.warning(
@@ -175,6 +188,33 @@ const CardList = () => {
)
);
}}
+ tableExtraRender={() => {
+ return (
+
+ {
+ setSearchParams({ ...searchParams, ...values });
+ actionRef.current?.reload();
+ return Promise.resolve();
+ }}
+ onReset={() => {
+ if (items.length > 0) {
+ setSearchParams({ groupId: currentGroup });
+ } else {
+ setSearchParams({});
+ }
+ actionRef.current?.reload();
+ }}
+ >
+
+
+
+ );
+ }}
/>