refactor: request in DutyInfo & Welcome

src/pages/Admin/DutyInfo/index.tsx

@@ -1,7 +1,14 @@
-import { PageContainer, ProForm, ProFormRadio, ProFormText } from '@ant-design/pro-components';
+import { getDutyInfo } from '@/services/api';
+import {
+  PageContainer,
+  ProForm,
+  ProFormDateTimeRangePicker,
+  ProFormDigit,
+  ProFormRadio,
+  ProFormText,
+} from '@ant-design/pro-components';
 import { Card, Col, Row, Space, message } from 'antd';
-// import { useState } from 'react';
+import { useEffect, useState } from 'react';
-import request from 'umi-request';
 import { Info } from './info';
 
 const waitTime = (time: number = 100) => {
@@ -13,10 +20,30 @@ const waitTime = (time: number = 100) => {
 };
 
 const DutyInfo: React.FC = () => {
-  // const [isNormalDuty, setIsNormalDuty] = useState(true);
+  const [dutyInfo, setDutyInfo] = useState<Info>();
+  const [loading, setLoading] = useState(true);
+  const [messageApi, contextHolder] = message.useMessage();
+  useEffect(() => {
+    getDutyInfo()
+      .then((res) => {
+        setDutyInfo(res.data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        messageApi.open({
+          type: 'error',
+          content: '获取失败！' + err,
+        });
+      });
+  });
+  // const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() =>
+  //   defaultData.map((item) => item.id),
+  // );
   return (
     <PageContainer>
+      {contextHolder}
       <Card>
+        {!loading && (
           <ProForm<Info>
             submitter={{
               render: (props, doms) => {
@@ -34,24 +61,20 @@ const DutyInfo: React.FC = () => {
               console.log(values);
               message.success('提交成功');
             }}
-          params={{}}
+            initialValues={dutyInfo}
-          request={async (params = {} as Record<string, any>) =>
-            request<Info>('/admin/duty/current', {
-              params,
-            })
-          }
           >
             <ProFormRadio.Group
               style={{
                 margin: 16,
               }}
             />
-          <ProFormText
+            <ProFormDigit
-            width="md"
-            name="inDutyCnt"
               label="值班人数"
-            tooltip="请输入数字"
+              name="inDutyCnt"
               placeholder="请输入值班人数"
+              width="sm"
+              min={0}
+              max={10}
             />
             <ProFormText
               width="md"
@@ -59,13 +82,45 @@ const DutyInfo: React.FC = () => {
               label="暂停值班原因"
               placeholder="请输入暂停值班的原因"
             />
+            <ProFormText
+              width="md"
+              name="place"
+              label="其他值班地点"
+              placeholder="请输入特殊值班地点"
+            />
             <ProFormText
               name="dutyRecoverTime"
               width="md"
               label="值班恢复时间"
               placeholder="请输入值班恢复的时间"
             />
+            <ProForm.Item label="值班时间" name="dataSource" trigger="onValuesChange">
+              {/* <EditableProTable<DataSourceType>
+              rowKey="id"
+              toolBarRender={false}
+              columns={columns}
+              recordCreatorProps={{
+                newRecordType: 'dataSource',
+                position: 'top',
+                record: () => ({
+                  id: Date.now(),
+                  addonBefore: 'ccccccc',
+                  decs: 'testdesc',
+                }),
+              }}
+              editable={{
+                type: 'multiple',
+                editableKeys,
+                onChange: setEditableRowKeys,
+                actionRender: (row, _, dom) => {
+                  return [dom.delete];
+                },
+              }}
+            /> */}
+            </ProForm.Item>
+            <ProFormDateTimeRangePicker name="dateTimeRange" label="值班时间" />
           </ProForm>
+        )}
       </Card>
     </PageContainer>
   );

src/pages/Welcome/index.tsx

@@ -5,6 +5,7 @@ import { PageContainer, ProCard, StatisticCard } from '@ant-design/pro-component
 import { Card, Statistic, message } from 'antd';
 import RcResizeObserver from 'rc-resize-observer';
 import { useLayoutEffect, useState } from 'react';
+import { Stat } from './stat';
 
 const percentRing = (percent: number, frontColor: string): React.JSX.Element => {
   const TinyRing = Tiny.Ring as (props: TinyRingConfig) => JSX.Element;
@@ -34,24 +35,21 @@ const percentRing = (percent: number, frontColor: string): React.JSX.Element =>
 const Logs: React.FC = () => {
   const [responsive, setResponsive] = useState(false);
   const [messageApi, contextHolder] = message.useMessage();
-
+  const [stat, setStat] = useState<Stat>({
-  const [todayPT, setTodayPT] = useState(0);
+    todayPT: 0,
-  const [report, setReport] = useState(0);
+    totalPT: 0,
-  const [oreo, setOreo] = useState(0);
+    oreo: 0,
-  const [totalPT, setTotalPT] = useState(0);
+    report: 0,
-  const [allSuccess, setAllSuccess] = useState(0);
+    allSuccess: 0,
-  const [all, setAll] = useState(0);
+    all: 0,
+  });
+  const [loading, setLoading] = useState(true);
 
   useLayoutEffect(() => {
     getStat()
       .then((res) => {
-        const data = res.data;
+        setStat(res.data);
-        setTodayPT(data.todayPT);
+        setLoading(false);
-        setReport(data.report);
-        setOreo(data.oreo);
-        setTotalPT(data.totalPT);
-        setAllSuccess(data.allSuccess);
-        setAll(data.all);
       })
       .catch((err) => {
         messageApi.open({
@@ -63,6 +61,7 @@ const Logs: React.FC = () => {
   return (
     <PageContainer>
       {contextHolder}
+      {!loading && (
         <Card style={{ color: '#f5f5f5' }}>
           <RcResizeObserver
             key="resize-observer"
@@ -80,12 +79,12 @@ const Logs: React.FC = () => {
                   style={{ marginTop: '0vh' }}
                   statistic={{
                     title: '今日预填写工单数',
-                  value: todayPT,
+                    value: stat.todayPT,
                     description: (
                       <Statistic
                         style={{ marginTop: '15vh', marginBottom: '8vh' }}
                         title="今日反馈数"
-                      value={report}
+                        value={stat.report}
                       />
                     ),
                   }}
@@ -95,22 +94,28 @@ const Logs: React.FC = () => {
                 <StatisticCard.Group direction={responsive ? 'row' : 'column'}>
                   <StatisticCard
                     hoverable
-                  chart={percentRing(Math.round(((oreo / totalPT) * 1000) / 10), '#00CC66')}
+                    chart={percentRing(
+                      Math.round(((stat.oreo / stat.totalPT) * 1000) / 10),
+                      '#00CC66',
+                    )}
                     statistic={{
                       title: '加入 Oreo 工单数',
-                    value: oreo,
+                      value: stat.oreo,
-                    description: <Statistic title="预填写工单总数" value={totalPT} />,
+                      description: <Statistic title="预填写工单总数" value={stat.totalPT} />,
                     }}
                     chartPlacement="left"
                   />
                   <StatisticCard
                     hoverable
                     style={{ marginTop: '3vh' }}
-                  chart={percentRing(Math.round((allSuccess / all) * 1000) / 10, '#66AFF4')}
+                    chart={percentRing(
+                      Math.round((stat.allSuccess / stat.all) * 1000) / 10,
+                      '#66AFF4',
+                    )}
                     statistic={{
                       title: '维修成功次数',
-                    value: allSuccess,
+                      value: stat.allSuccess,
-                    description: <Statistic title="Oreo、ETA 总工单数" value={all} />,
+                      description: <Statistic title="Oreo、ETA 总工单数" value={stat.all} />,
                     }}
                     chartPlacement="left"
                   />
@@ -119,6 +124,7 @@ const Logs: React.FC = () => {
             </ProCard>
           </RcResizeObserver>
         </Card>
+      )}
     </PageContainer>
   );
 };

src/pages/Welcome/stat.ts

@@ -0,0 +1,8 @@
+export type Stat = {
+  todayPT: number;
+  totalPT: number;
+  oreo: number;
+  report: number;
+  allSuccess: number;
+  all: number;
+};

src/services/api.ts

@@ -1,6 +1,7 @@
 // @ts-ignore
 /* eslint-disable */
 import { Info } from '@/pages/Admin/DutyInfo/info';
+import { Stat } from '@/pages/Welcome/stat';
 import { request } from '@umijs/max';
 import { API } from './typings';
 
@@ -37,7 +38,7 @@ export async function login(body: API.LoginParams, options?: { [key: string]: an
 /** 获取首页信息 GET /stats */
 export async function getStat(options?: { [key: string]: any }) {
   return request<{
-    data: API.Stat;
+    data: Stat;
   }>('/stats', {
     method: 'GET',
     ...(options || {}),

src/services/typings.d.ts

@@ -41,12 +41,4 @@ declare namespace API {
     size: number;
     data: LogsItem[];
   };
-  type Stat = {
-    todayPT: number;
-    totalPT: number;
-    oreo: number;
-    report: number;
-    allSuccess: number;
-    all: number;
-  };
 }