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,90 +75,122 @@ const DutyInfo: React.FC = () => {
         });
       });
   }, []);
-  // const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() =>
+
-  //   defaultData.map((item) => item.id),
-  // );
   return (
     <PageContainer>
       {contextHolder}
       <Card>
         {!loading && (
-          <ProForm<Info>
+            <ProForm<Info>
-            submitter={{
+              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) => {
-              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];
                 },
               }}
-            /> */}
+              onFinish={updateDutyInfo}
-            </ProForm.Item>
+              initialValues={dutyInfo}
-            <ProFormDateTimeRangePicker name="dateTimeRange" label="值班时间" />
+            >
-          </ProForm>
+              <div style={{ justifyContent: 'center', display: 'flex' }}>
+              <ProFormRadio.Group
+                name="dutyStatus"
+                label="值班状态"
+                options={[
+                  {
+                    label: '正常值班',
+                    value: 'normal',
+                  },
+                  {
+                    label: '特殊值班',
+                    value: 'others',
+                  },
+                  {
+                    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="值班暂停原因"
+                          placeholder="请输入暂停值班的原因"
+                        />
+                        <ProFormDateTimePicker
+                          name="dutyRecoverTime"
+                          width="md"
+                          label="值班恢复时间"
+                        />
+                      </div>
+                    );
+                  }
+                  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: 'bottom',
+                              creatorButtonText: '新建一个值班班次',
+                              style: { width: '100%', margin: 'auto', marginTop: '2%' },
+                              record: () => ({
+                                id: Date.now(),
+                                title: '',
+                                place: '',
+                                range: [],
+                              }),
+                            }}
+                            editable={{
+                              type: 'multiple',
+                              editableKeys,
+                              onChange: setEditableRowKeys,
+                              actionRender: (row, _, dom) => {
+                                return [dom.delete];
+                              },
+                            }}
+                          />
+                        </ProForm.Item>
+                      </div>
+                    );
+                  }
+                }}
+              </ProFormDependency>
+            </ProForm>
         )}
       </Card>
     </PageContainer>

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 || {}),
+  });
+}