add dutyinfo page

2024-05-07 19:49:48 +08:00 · 2024-05-07 19:49:48 +08:00 · 8f062b0e8c
parent 1ff36f366d
commit 8f062b0e8c
5 changed files with 194 additions and 101 deletions
--- a/doc/api.md
+++ b/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": [
    {
--- a/mock/requestRecord.mock.js
+++ b/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: '下周一',
+      dutyRecoverTime: '2024-03-07T19:52:48.523303',
    },
  },
  'POST /admin/duty/update': {
--- a/src/pages/Admin/DutyInfo/index.tsx
+++ b/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) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
+type Shift = {
+  id: React.Key;
+  title: string;
+  place: string;
+  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);
-        setDutyInfo(res.data);
+        const data = 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>
-            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('提交成功');
-            }}
-            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<Info>
+              submitter={{
+                resetButtonProps: { style: { display: 'none' } },
+                submitButtonProps: {
+                  style: { width: '31%' },
+                },
+                render: (_, doms) => {
+                  return <div style={{ textAlign: 'center' }}>{doms}</div>;
                },
              }}
-            /> */}
-            </ProForm.Item>
-            <ProFormDateTimeRangePicker name="dateTimeRange" label="值班时间" />
-          </ProForm>
+              onFinish={updateDutyInfo}
+              initialValues={dutyInfo}
+            >
+              <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>
--- a/src/pages/Admin/DutyInfo/info.ts
+++ b/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;
--- a/src/services/api.ts
+++ b/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 || {}),
+  });
+}