add dutyinfo page

doc/api.md

@@ -65,7 +65,7 @@ data:
 ```json
 {
   "isNormalDuty": true, // 判断是否是正常值班时间
-  "currentDuty": "1", // 判断是否正在值班 / 值哪一班 "1" | "2" | "3" => 正在值班，"off" => 值班下班
+  "currentDuty": "1", // 判断是否正在值班 / 值哪一班 "1" | "2" | "3" => 正在值班，"off" => 暂停值班， "0" => 值班下班
   "inDutyCnt": 3,
   "otherDutyTime": [], // 正常值班时为空
   "offDutyReason": "",
@@ -81,7 +81,7 @@ data:
 ```json
 {
   "isNormalDuty": false, // 判断是否是正常值班时间
-  "currentDuty": "others", // 判断是否正在值班 / 值哪一班 "others" => 正在值班，"off" => 值班下班
+  "currentDuty": "others", // 判断是否正在值班 / 值哪一班 "others" => 正在值班，"off" => 暂停值班， "0" => 值班下班
   "inDutyCnt": 3,
   "otherDutyTime": [
     {

mock/requestRecord.mock.js

@@ -36,26 +36,31 @@ module.exports = {
   'GET /admin/duty/current': {
     success: true,
     data: {
-      isNormalDuty: false,
+      isNormalDuty: true,
       currentDuty: 'off',
       inDutyCnt: 3,
       otherDutyTime: [
         {
-          name: '第一班',
+          id: 1,
+          title: '第一班',
+          place: 'fsaf',
           range: ['2024-03-07T19:52:48.523303', '2024-03-07T19:52:48.523303'],
         },
         {
-          name: '第二班',
+          id: 2,
+          title: '第二班',
+          place: 'fsdhhv',
           range: ['2024-03-07T19:52:48.523303', '2024-03-07T19:52:48.523303'],
         },
         {
-          name: '第三班',
+          id: 3,
+          title: '第三班',
+          place: 'fdshq',
           range: ['2024-03-07T19:52:48.523303', '2024-03-07T19:52:48.523303'],
         },
       ],
       offDutyReason: '期中考试周',
-      place: '',
+      dutyRecoverTime: '2024-03-07T19:52:48.523303',
-      dutyRecoverTime: '下周一',
     },
   },
   'POST /admin/duty/update': {

src/pages/Admin/DutyInfo/index.tsx

@@ -1,33 +1,71 @@
-import { getDutyInfo } from '@/services/api';
+import { getDutyInfo, updateDutyInfo } from '@/services/api';
 import {
+  EditableProTable,
   PageContainer,
+  ProColumns,
   ProForm,
-  ProFormDateTimeRangePicker,
+  ProFormDateTimePicker,
+  ProFormDependency,
   ProFormDigit,
   ProFormRadio,
   ProFormText,
 } from '@ant-design/pro-components';
-import { Card, Col, Row, Space, message } from 'antd';
+import { Card, message } from 'antd';
 import { useEffect, useState } from 'react';
 import { Info } from './info';
 
-const waitTime = (time: number = 100) => {
+type Shift = {
-  return new Promise((resolve) => {
+  id: React.Key;
-    setTimeout(() => {
+  title: string;
-      resolve(true);
+  place: string;
-    }, time);
+  range: string[];
-  });
 };
 
+const columns: ProColumns<Shift>[] = [
+  {
+    title: '值班名称',
+    dataIndex: 'title',
+    width: '15%',
+  },
+  {
+    title: '值班地点',
+    dataIndex: 'place',
+    width: '15%',
+  },
+  {
+    title: '值班时间',
+    dataIndex: 'range',
+    valueType: 'dateTimeRange',
+    width: '40%',
+  },
+  {
+    title: '操作',
+    valueType: 'option',
+    width: '10%',
+  },
+];
+
 const DutyInfo: React.FC = () => {
   const [dutyInfo, setDutyInfo] = useState<Info>();
   const [loading, setLoading] = useState(true);
   const [messageApi, contextHolder] = message.useMessage();
+
+  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() => []);
+
   useEffect(() => {
     getDutyInfo()
       .then((res) => {
-        console.log(res.data);
+        const data = res.data;
-        setDutyInfo(res.data);
+        console.log(data);
+        setDutyInfo({
+          dutyStatus:
+            data.currentDuty === 'off' ? 'pause' : data.isNormalDuty ? 'others' : 'normal',
+          inDutyCnt: data.inDutyCnt,
+          otherDutyTime: data.otherDutyTime,
+          offDutyReason: data.offDutyReason,
+          dutyRecoverTime: data.dutyRecoverTime,
+        });
+        setEditableRowKeys(data.otherDutyTime.map((item) => item.id));
         setLoading(false);
       })
       .catch((err) => {
@@ -37,9 +75,7 @@ const DutyInfo: React.FC = () => {
         });
       });
   }, []);
-  // const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() =>
+
-  //   defaultData.map((item) => item.id),
-  // );
   return (
     <PageContainer>
       {contextHolder}
@@ -47,66 +83,96 @@ const DutyInfo: React.FC = () => {
         {!loading && (
             <ProForm<Info>
               submitter={{
-              render: (props, doms) => {
+                resetButtonProps: { style: { display: 'none' } },
-                return (
+                submitButtonProps: {
-                  <Row>
+                  style: { width: '31%' },
-                    <Col span={14} offset={4}>
+                },
-                      <Space>{doms}</Space>
+                render: (_, doms) => {
-                    </Col>
+                  return <div style={{ textAlign: 'center' }}>{doms}</div>;
-                  </Row>
-                );
                 },
               }}
-            onFinish={async (values) => {
+              onFinish={updateDutyInfo}
-              await waitTime(2000);
-              console.log(values);
-              message.success('提交成功');
-            }}
               initialValues={dutyInfo}
             >
+              <div style={{ justifyContent: 'center', display: 'flex' }}>
               <ProFormRadio.Group
-              style={{
+                name="dutyStatus"
-                margin: 16,
+                label="值班状态"
-              }}
+                options={[
-            />
+                  {
-            <ProFormDigit
+                    label: '正常值班',
-              label="值班人数"
+                    value: 'normal',
-              name="inDutyCnt"
+                  },
-              placeholder="请输入值班人数"
+                  {
-              width="sm"
+                    label: '特殊值班',
-              min={0}
+                    value: 'others',
-              max={10}
+                  },
+                  {
+                    label: '值班暂停',
+                    value: 'pause',
+                  },
+                ]}
               />
+              </div>
+              <div style={{ justifyContent: 'center', display: 'flex' }}>
+              <ProFormDependency name={['dutyStatus']}>
+                {({ dutyStatus }) => {
+                  if (dutyStatus === 'pause') {
+                    return (
+                      <div>
                         <ProFormText
                           width="md"
                           name="offDutyReason"
-              label="暂停值班原因"
+                          label="值班暂停原因"
                           placeholder="请输入暂停值班的原因"
                         />
-            <ProFormText
+                        <ProFormDateTimePicker
-              width="md"
-              name="place"
-              label="其他值班地点"
-              placeholder="请输入特殊值班地点"
-            />
-            <ProFormText
                           name="dutyRecoverTime"
                           width="md"
                           label="值班恢复时间"
-              placeholder="请输入值班恢复的时间"
                         />
-            <ProForm.Item label="值班时间" name="dataSource" trigger="onValuesChange">
+                      </div>
-              {/* <EditableProTable<DataSourceType>
+                    );
+                  }
+                  return (
+                    <ProFormDigit
+                      label="当前值班人数"
+                      name="inDutyCnt"
+                      placeholder="请输入值班人数"
+                      width="md"
+                      min={0}
+                      max={10}
+                    />
+                  );
+                }}
+              </ProFormDependency>
+              </div>
+              <ProFormDependency name={['dutyStatus']}>
+                {({ dutyStatus }) => {
+                  if (dutyStatus === 'others') {
+                    return (
+                      <div style={{ justifyContent: 'center', display: 'flex' }}>
+                        <ProForm.Item
+                          label="其他值班班次"
+                          name="dataSource"
+                          initialValue={dutyInfo?.otherDutyTime}
+                          trigger="onValuesChange"
+                          style={{ width: '80%' }}
+                        >
+                          <EditableProTable<Shift>
                             rowKey="id"
                             toolBarRender={false}
                             columns={columns}
                             recordCreatorProps={{
                               newRecordType: 'dataSource',
-                position: 'top',
+                              position: 'bottom',
+                              creatorButtonText: '新建一个值班班次',
+                              style: { width: '100%', margin: 'auto', marginTop: '2%' },
                               record: () => ({
                                 id: Date.now(),
-                  addonBefore: 'ccccccc',
+                                title: '',
-                  decs: 'testdesc',
+                                place: '',
+                                range: [],
                               }),
                             }}
                             editable={{
@@ -117,9 +183,13 @@ const DutyInfo: React.FC = () => {
                                 return [dom.delete];
                               },
                             }}
-            /> */}
+                          />
                         </ProForm.Item>
-            <ProFormDateTimeRangePicker name="dateTimeRange" label="值班时间" />
+                      </div>
+                    );
+                  }
+                }}
+              </ProFormDependency>
             </ProForm>
         )}
       </Card>

src/pages/Admin/DutyInfo/info.ts

@@ -1,13 +1,22 @@
 export type Shift = {
-  name: string;
+  id: React.Key;
+  title: string;
+  place: string;
   range: string[];
 };
 
-export type Info = {
+export type ServerInfo = {
   isNormalDuty: boolean;
   inDutyCnt: number;
   currentDuty: string;
-  place: string;
+  otherDutyTime: Shift[];
+  offDutyReason: string;
+  dutyRecoverTime: string;
+}
+
+export type Info = {
+  dutyStatus: string;
+  inDutyCnt: number;
   otherDutyTime: Shift[];
   offDutyReason: string;
   dutyRecoverTime: string;

src/services/api.ts

@@ -1,6 +1,6 @@
 // @ts-ignore
 /* eslint-disable */
-import { Info } from '@/pages/Admin/DutyInfo/info';
+import { Info, ServerInfo } from '@/pages/Admin/DutyInfo/info';
 import { Stat } from '@/pages/Welcome/stat';
 import { request } from '@umijs/max';
 import { API } from './typings';
@@ -48,9 +48,18 @@ export async function getStat(options?: { [key: string]: any }) {
 /** 获取当前值班信息 GET /admin/duty/current */
 export async function getDutyInfo(options?: { [key: string]: any }) {
   return request<{
-    data: Info;
+    data: ServerInfo;
   }>('/admin/duty/current', {
     method: 'GET',
     ...(options || {}),
   });
 }
+
+/** 上传当前值班信息 POST /admin/duty/update */
+export async function updateDutyInfo(body: Info, options?: { [key: string]: any }) {
+  return request<boolean | void>('/admin/duty/update', {
+    method: 'POST',
+    data: body,
+    ...(options || {}),
+  });
+}