feature: 添加loading加载

src/pages/grpc.tsx

@@ -0,0 +1,126 @@
+import './index.less';
+import { Layout, Tabs, Table } from 'antd';
+import useUrlState from '@ahooksjs/use-url-state';
+import { useMount } from 'ahooks'
+import api from '../api/api'
+import { useState } from 'react';
+import timestampToTime from '@/utils';
+import { useLocation, useRouteMatch } from 'umi';
+import { useRequest } from 'ahooks';
+const { TabPane } = Tabs;
+type Detail = {
+  Detail: string
+  Env: string
+  Host: string
+  Port: number
+  ServiceName: string
+  UpTime: number
+  Version?: string
+}
+const data: Detail[] = [
+  // {
+  //   Detail: "",
+  //   Env: "qa",
+  //   Host: "127.0.0.1",
+  //   Port: 6910,
+  //   ServiceName: "com.ywt.gapi.check_prescription.CheckPrescriptionService",
+  //   UpTime: 1649995051,
+  //   Version: "",
+  // },
+];
+const data2: Detail[] = data.map(item => { return { ...item, Env: 'dev' } })
+const data3: Detail[] = data.map(item => { return { ...item, Env: 'qa1' } })
+const data4: Detail[] = data.map(item => { return { ...item, Env: 'prod' } })
+export default function IndexPage() {
+  const [key, setKey] = useState('qa')
+  const [list, setList] = useState(data)
+  const [tabsList, setTabsList] = useState([])
+  const [label, setLabel] = useUrlState()
+  const { loading, run} = useRequest(api.getGrpclist,{
+    manual: true,
+    onSuccess:(result)=>{
+      setList(result)
+    }
+  })
+  
+  useMount(() => {
+    initData()
+  })
+
+  const params = useRouteMatch();
+  const location = useLocation();
+
+  const columns = [
+    {
+      title: '服务名称',
+      dataIndex: 'ServiceName',
+    },
+    {
+      title: 'IP',
+      dataIndex: 'Host',
+    },
+    {
+      title: '端口',
+      dataIndex: 'Port',
+    },
+    {
+      title: 'Env',
+      dataIndex: 'Env',
+    },
+    {
+      title: '上线时间',
+      dataIndex: 'UpTime',
+      render: (text: number) => <a>{timestampToTime(text)}</a>
+    },
+    {
+      title: '备注',
+      dataIndex: 'Detail',
+    },
+  ];
+
+
+  const initData = async () => {
+    const tabs = await api.getenvsApi()
+    const env = location.search.slice(5)
+    run(env ? env : tabs[0])
+    setTabsList(tabs)
+    env && setLabel({ env })
+    setKey(env ? env : tabs[0])
+  }
+
+
+  const tabChange = async (index: string) => {
+    setKey(index)
+    const instance = tabsList.find(item => item === index)
+    if (instance) {
+      run(instance)
+      setLabel({ env: instance })
+    }
+  }
+
+
+  return (
+    <Layout>
+      <div style={{ justifyContent: 'center' }}>
+        <Tabs defaultActiveKey={key} activeKey={key} onChange={tabChange}>
+          {tabsList.map((item) => {
+            return (
+              <TabPane tab={item} key={item} >
+
+              </TabPane>
+            )
+          })}
+        </Tabs>
+        <Table
+          columns={columns}
+          dataSource={list}
+          key="tablekey11"
+          pagination={{pageSize: 100}}
+          loading={loading}
+        >
+        </Table>
+      </div>
+    </Layout>
+  );
+}
+

src/pages/index.less

@@ -1,6 +1,15 @@
 .title {
   background: rgb(121, 242, 157);
 }
-.ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap {
+
+.ant-tabs>.ant-tabs-nav .ant-tabs-nav-wrap {
   justify-content: center !important;
 }
+
+.welcome {
+  background-color: #fff;
+  padding: 40px;
+  font-size: 34px;
+  color: #1a73e8;
+  font-weight: 700;
+}

src/pages/index.tsx

@@ -1,122 +1,17 @@
-import './index.less';
-import { Layout, Menu, Tabs, Table, Divider, Tag } from 'antd';
-import React from 'react';
-import useUrlState from '@ahooksjs/use-url-state';
+import { Calendar } from 'antd';
 import { useMount } from 'ahooks'
-import api from '../api/api'
-import { useEffect, useState } from 'react';
-import timestampToTime from '@/utils';
-import { useHistory, useLocation, useParams, useRouteMatch, withRouter } from 'umi';
-const { TabPane } = Tabs;
-const { SubMenu } = Menu;
-const { Column, ColumnGroup } = Table;
-const { Header, Content, Sider } = Layout;
-type Detail = {
-  Detail: string
-  Env: string
-  Host: string
-  Port: number
-  ServiceName: string
-  UpTime: number
-  Version?: string
-}
-const data: Detail[] = [
-  // {
-  //   Detail: "",
-  //   Env: "qa",
-  //   Host: "127.0.0.1",
-  //   Port: 6910,
-  //   ServiceName: "com.ywt.gapi.check_prescription.CheckPrescriptionService",
-  //   UpTime: 1649995051,
-  //   Version: "",
-  // },
-];
-const data2: Detail[] = data.map(item => { return { ...item, Env: 'dev' } })
-const data3: Detail[] = data.map(item => { return { ...item, Env: 'qa1' } })
-const data4: Detail[] = data.map(item => { return { ...item, Env: 'prod' } })
-export default function IndexPage() {
-  const [key, setKey] = useState('qa')
-  const [list, setList] = useState(data)
-  const [tabsList, setTabsList] = useState([])
-  const [label, setLabel] = useUrlState()
-  useMount(() => {
-    initData()
-  })
-  const params = useRouteMatch();
-  const location = useLocation();
-
-  const columns = [
-    {
-      title: '服务名称',
-      dataIndex: 'ServiceName',
-    },
-    {
-      title: 'IP',
-      dataIndex: 'Host',
-    },
-    {
-      title: '端口',
-      dataIndex: 'Port',
-    },
-    {
-      title: 'Env',
-      dataIndex: 'Env',
-    },
-    {
-      title: '上线时间',
-      dataIndex: 'UpTime',
-      render: (text: number) => <a>{timestampToTime(text)}</a>
-    },
-    {
-      title: '备注',
-      dataIndex: 'Detail',
-    },
-  ];
+import './index.less'
+import api from '@/api/api';
 
+export default function IndexPage() {
 
-  const initData = async () => {
+  useMount(async () => {
     const tabs = await api.getenvsApi()
-    const env = location.search.slice(5)
-    const grpcList = await api.getGrpclist(env ? env : tabs[0])
-    setTabsList(tabs)
-    setList(grpcList)
-    env && setLabel({ env })
-    setKey(env ? env : tabs[0])
-  }
-
-
-  const tabChange = async (index: string) => {
-    setKey(index)
-    const instance = tabsList.find(item => item === index)
-    if (instance) {
-      const grpcList = await api.getGrpclist(instance)
-      setList(grpcList)
-      setLabel({ env: instance })
-    }
-  }
-
-
+  })
   return (
-    <Layout>
-      <div style={{ justifyContent: 'center' }}>
-        <Tabs defaultActiveKey={key} activeKey={key} onChange={tabChange}>
-          {tabsList.map((item) => {
-            return (
-              <TabPane tab={item} key={item} >
-
-              </TabPane>
-            )
-          })}
-        </Tabs>
-        <Table
-          columns={columns}
-          dataSource={list}
-          key="tablekey11"
-          pagination={{pageSize: 100}}
-        >
-        </Table>
-      </div>
-    </Layout>
-  );
-}
-
+    <div className='welcome'>
+      <div>WelCome</div>
+      <div>欢迎来到医务通服务看板</div>
+    </div>
+  )
+}

src/pages/home.tsx → src/pages/rest.tsx

@@ -1,16 +1,13 @@
 import './index.less';
-import { Layout, Menu, Tabs, Table, Divider, Tag } from 'antd';
-import React from 'react';
+import { Layout, Tabs, Table } from 'antd';
 import useUrlState from '@ahooksjs/use-url-state';
 import { useMount } from 'ahooks'
 import api from '../api/api'
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import timestampToTime from '@/utils';
 import { useLocation } from 'umi';
+import { useRequest } from 'ahooks';
 const { TabPane } = Tabs;
-const { SubMenu } = Menu;
-const { Column, ColumnGroup } = Table;
-const { Header, Content, Sider } = Layout;
 type Detail = {
   Detail: string
   Env: string
@@ -38,7 +35,13 @@ export default function IndexPage() {
   const [key, setKey] = useState('qa')
   const [list, setList] = useState(data)
   const [tabsList, setTabsList] = useState([])
-  const [label, setLabel] = useUrlState({ env: '' })
+  const [label, setLabel] = useUrlState()
+  const { loading, run } = useRequest(api.restlist,{
+    manual: true,
+    onSuccess:(result)=>{
+      setList(result)
+    }
+  })
   useMount(() => {
     initData()
   })
@@ -73,13 +76,10 @@ export default function IndexPage() {
 
   const initData = async () => {
     const tabs = await api.getenvsApi()
-    console.log('tabstabstabstabsz',tabs)
     const env = location.search.slice(5)
-    console.log('env',env)
-    const restList = await api.restlist(env ? env : tabs[0])
+    run(env ? env : tabs[0])
     setTabsList(tabs)
-    setList(restList)
-    setLabel({ env: env ? env : '' })
+    env && setLabel({ env })
     setKey(env ? env : tabs[0])
   }
 
@@ -88,8 +88,7 @@ export default function IndexPage() {
     setKey(index)
     const instance = tabsList.find(item => item === index)
     if (instance) {
-      const restList = await api.restlist(instance)
-      setList(restList)
+      run(instance)
       setLabel({ env: instance })
     }
   }
@@ -112,6 +111,7 @@ export default function IndexPage() {
           dataSource={list}
           key="tablekey11"
           pagination={{pageSize: 100}}
+          loading={loading}
         >
         </Table>
       </div>

src/router/index.tsx

@@ -1,8 +1,18 @@
 export default [
   {
-    path: '/grpcService',
+    path: '/',
     component: '@/pages/index',
     menu: {
+      name: '首页',
+      flatMenu: false,
+      hideInMenu: false,
+      hideChildrenInMenu: false,
+    },
+  },
+  {
+    path: '/grpcService',
+    component: '@/pages/grpc',
+    menu: {
       name: 'GRPC服务',
       flatMenu: false,
       hideInMenu: false,
@@ -11,7 +21,7 @@ export default [
   },
   {
     path: '/restService',
-    component: '@/pages/home',
+    component: '@/pages/rest',
     menu: {
       name: 'REST服务',
       flatMenu: false,