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 request from 'umi-request';
+import { useEffect, useState } from 'react';
 import { Info } from './info';
 
 const waitTime = (time: number = 100) => {
@@ -13,59 +20,107 @@ 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>
-        <ProForm<Info>
-          submitter={{
-            render: (props, doms) => {
-              return (
-                <Row>
-                  <Col span={14} offset={4}>
-                    <Space>{doms}</Space>
-                  </Col>
-                </Row>
-              );
-            },
-          }}
-          onFinish={async (values) => {
-            await waitTime(2000);
-            console.log(values);
-            message.success('提交成功');
-          }}
-          params={{}}
-          request={async (params = {} as Record<string, any>) =>
-            request<Info>('/admin/duty/current', {
-              params,
-            })
-          }
-        >
-          <ProFormRadio.Group
-            style={{
-              margin: 16,
+        {!loading && (
+          <ProForm<Info>
+            submitter={{
+              render: (props, doms) => {
+                return (
+                  <Row>
+                    <Col span={14} offset={4}>
+                      <Space>{doms}</Space>
+                    </Col>
+                  </Row>
+                );
+              },
             }}
-          />
-          <ProFormText
-            width="md"
-            name="inDutyCnt"
-            label="值班人数"
-            tooltip="请输入数字"
-            placeholder="请输入值班人数"
-          />
-          <ProFormText
-            width="md"
-            name="offDutyReason"
-            label="暂停值班原因"
-            placeholder="请输入暂停值班的原因"
-          />
-          <ProFormText
-            name="dutyRecoverTime"
-            width="md"
-            label="值班恢复时间"
-            placeholder="请输入值班恢复的时间"
-          />
-        </ProForm>
+            onFinish={async (values) => {
+              await waitTime(2000);
+              console.log(values);
+              message.success('提交成功');
+            }}
+            initialValues={dutyInfo}
+          >
+            <ProFormRadio.Group
+              style={{
+                margin: 16,
+              }}
+            />
+            <ProFormDigit
+              label="值班人数"
+              name="inDutyCnt"
+              placeholder="请输入值班人数"
+              width="sm"
+              min={0}
+              max={10}
+            />
+            <ProFormText
+              width="md"
+              name="offDutyReason"
+              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 [todayPT, setTodayPT] = useState(0);
-  const [report, setReport] = useState(0);
-  const [oreo, setOreo] = useState(0);
-  const [totalPT, setTotalPT] = useState(0);
-  const [allSuccess, setAllSuccess] = useState(0);
-  const [all, setAll] = useState(0);
+  const [stat, setStat] = useState<Stat>({
+    todayPT: 0,
+    totalPT: 0,
+    oreo: 0,
+    report: 0,
+    allSuccess: 0,
+    all: 0,
+  });
+  const [loading, setLoading] = useState(true);
 
   useLayoutEffect(() => {
     getStat()
       .then((res) => {
-        const data = res.data;
-        setTodayPT(data.todayPT);
-        setReport(data.report);
-        setOreo(data.oreo);
-        setTotalPT(data.totalPT);
-        setAllSuccess(data.allSuccess);
-        setAll(data.all);
+        setStat(res.data);
+        setLoading(false);
       })
       .catch((err) => {
         messageApi.open({
@@ -63,62 +61,70 @@ const Logs: React.FC = () => {
   return (
     <PageContainer>
       {contextHolder}
-      <Card style={{ color: '#f5f5f5' }}>
-        <RcResizeObserver
-          key="resize-observer"
-          onResize={(offset) => {
-            setResponsive(offset.width < 596);
-          }}
-        >
-          <ProCard split={responsive ? 'horizontal' : 'vertical'}>
-            <ProCard colSpan="Auto">
-              <ProCard hoverable>左侧内容</ProCard>
-            </ProCard>
-            <ProCard colSpan="170px">
-              <StatisticCard
-                hoverable
-                style={{ marginTop: '0vh' }}
-                statistic={{
-                  title: '今日预填写工单数',
-                  value: todayPT,
-                  description: (
-                    <Statistic
-                      style={{ marginTop: '15vh', marginBottom: '8vh' }}
-                      title="今日反馈数"
-                      value={report}
-                    />
-                  ),
-                }}
-              />
-            </ProCard>
-            <ProCard colSpan="360px">
-              <StatisticCard.Group direction={responsive ? 'row' : 'column'}>
+      {!loading && (
+        <Card style={{ color: '#f5f5f5' }}>
+          <RcResizeObserver
+            key="resize-observer"
+            onResize={(offset) => {
+              setResponsive(offset.width < 596);
+            }}
+          >
+            <ProCard split={responsive ? 'horizontal' : 'vertical'}>
+              <ProCard colSpan="Auto">
+                <ProCard hoverable>左侧内容</ProCard>
+              </ProCard>
+              <ProCard colSpan="170px">
                 <StatisticCard
                   hoverable
-                  chart={percentRing(Math.round(((oreo / totalPT) * 1000) / 10), '#00CC66')}
+                  style={{ marginTop: '0vh' }}
                   statistic={{
-                    title: '加入 Oreo 工单数',
-                    value: oreo,
-                    description: <Statistic title="预填写工单总数" value={totalPT} />,
+                    title: '今日预填写工单数',
+                    value: stat.todayPT,
+                    description: (
+                      <Statistic
+                        style={{ marginTop: '15vh', marginBottom: '8vh' }}
+                        title="今日反馈数"
+                        value={stat.report}
+                      />
+                    ),
                   }}
-                  chartPlacement="left"
                 />
-                <StatisticCard
-                  hoverable
-                  style={{ marginTop: '3vh' }}
-                  chart={percentRing(Math.round((allSuccess / all) * 1000) / 10, '#66AFF4')}
-                  statistic={{
-                    title: '维修成功次数',
-                    value: allSuccess,
-                    description: <Statistic title="Oreo、ETA 总工单数" value={all} />,
-                  }}
-                  chartPlacement="left"
-                />
-              </StatisticCard.Group>
+              </ProCard>
+              <ProCard colSpan="360px">
+                <StatisticCard.Group direction={responsive ? 'row' : 'column'}>
+                  <StatisticCard
+                    hoverable
+                    chart={percentRing(
+                      Math.round(((stat.oreo / stat.totalPT) * 1000) / 10),
+                      '#00CC66',
+                    )}
+                    statistic={{
+                      title: '加入 Oreo 工单数',
+                      value: stat.oreo,
+                      description: <Statistic title="预填写工单总数" value={stat.totalPT} />,
+                    }}
+                    chartPlacement="left"
+                  />
+                  <StatisticCard
+                    hoverable
+                    style={{ marginTop: '3vh' }}
+                    chart={percentRing(
+                      Math.round((stat.allSuccess / stat.all) * 1000) / 10,
+                      '#66AFF4',
+                    )}
+                    statistic={{
+                      title: '维修成功次数',
+                      value: stat.allSuccess,
+                      description: <Statistic title="Oreo、ETA 总工单数" value={stat.all} />,
+                    }}
+                    chartPlacement="left"
+                  />
+                </StatisticCard.Group>
+              </ProCard>
             </ProCard>
-          </ProCard>
-        </RcResizeObserver>
-      </Card>
+          </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;
-  };
 }