From d74cbcb229313634771fb15a53f92f8d39b2c2cd Mon Sep 17 00:00:00 2001
From: Dawn1Ocean <1785590531@qq.com>
Date: Thu, 19 Sep 2024 13:59:56 +0800
Subject: [PATCH] feat: add edit dutytable page

---
 config/routes.ts                              |  13 ++-
 src/pages/Admin/DutyTable/EditTable/index.tsx | 105 ++++++++++++++++++
 .../Admin/DutyTable/EditTable/tableItem.tsx   |  10 ++
 src/pages/Admin/DutyTable/index.tsx           |  64 ++++++++++-
 4 files changed, 190 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/Admin/DutyTable/EditTable/index.tsx
 create mode 100644 src/pages/Admin/DutyTable/EditTable/tableItem.tsx

diff --git a/config/routes.ts b/config/routes.ts
index 5ce9588..fcd5896 100644
--- a/config/routes.ts
+++ b/config/routes.ts
@@ -13,7 +13,11 @@ export default [
     routes: [
       { path: '/admin', redirect: '/admin/dutyinfo' },
       { path: '/admin/dutyinfo', name: '值班信息', component: './Admin/DutyInfo' },
-      { path: '/admin/dutytable', name: '值班表管理', component: './Admin/DutyTable' },
+      {
+        path: '/admin/dutytable',
+        name: '值班表管理',
+        component: './Admin/DutyTable',
+      },
       { path: '/admin/logs', name: '日志', component: './Admin/Logs' },
     ],
   },
@@ -29,6 +33,13 @@ export default [
       { path: '/leader/askleave', name: '请假管理', component: './Leader/AskLeave' },
     ],
   },
+  {
+    path: '/admin/dutytable/edit',
+    component: './Admin/DutyTable/EditTable',
+    menu: {
+      hideInMenu: true,
+    },
+  },
   { name: '关于我们', icon: 'thunderbolt', path: '/about', component: './About' },
   { path: '/', redirect: '/welcome' },
   { path: '*', layout: false, component: './404' },
diff --git a/src/pages/Admin/DutyTable/EditTable/index.tsx b/src/pages/Admin/DutyTable/EditTable/index.tsx
new file mode 100644
index 0000000..7badf20
--- /dev/null
+++ b/src/pages/Admin/DutyTable/EditTable/index.tsx
@@ -0,0 +1,105 @@
+import { Todo } from '@/components';
+import { PageContainer } from '@ant-design/pro-components';
+import { Card, Modal } from 'antd';
+import React, { useState } from 'react';
+
+const EditTable: React.FC = () => {
+  const [isSaveOpen, setIsSaveOpen] = useState(false);
+  const [isSetOpen, setIsSetOpen] = useState(false);
+
+  // const showSave = () => {
+  //   setIsSaveOpen(true);
+  // };
+
+  const handleSaveOk = () => {
+    setIsSaveOpen(false);
+  };
+
+  const handleSaveCancel = () => {
+    setIsSaveOpen(false);
+  };
+
+  // const showSet = () => {
+  //   setIsSetOpen(true);
+  // };
+
+  const handleSetOk = () => {
+    setIsSetOpen(false);
+  };
+
+  const handleSetCancel = () => {
+    setIsSetOpen(false);
+  };
+
+  // const columns: ProColumns<DataSourceType>[] = [
+  //   {
+  //     title: '活动名称',
+  //     dataIndex: 'title',
+  //     width: '30%',
+  //     formItemProps: {
+  //       rules: [
+  //         {
+  //           required: true,
+  //           whitespace: true,
+  //           message: '此项是必填项',
+  //         },
+  //         {
+  //           message: '必须包含数字',
+  //           pattern: /[0-9]/,
+  //         },
+  //         {
+  //           max: 16,
+  //           whitespace: true,
+  //           message: '最长为 16 位',
+  //         },
+  //         {
+  //           min: 6,
+  //           whitespace: true,
+  //           message: '最小为 6 位',
+  //         },
+  //       ],
+  //     },
+  //   },
+  //   {
+  //     title: '状态',
+  //     key: 'state',
+  //     dataIndex: 'state',
+  //     valueType: 'select',
+  //     valueEnum: {
+  //       all: { text: '全部', status: 'Default' },
+  //       open: {
+  //         text: '未解决',
+  //         status: 'Error',
+  //       },
+  //       closed: {
+  //         text: '已解决',
+  //         status: 'Success',
+  //       },
+  //     },
+  //   },
+  //   {
+  //     title: '描述',
+  //     dataIndex: 'decs',
+  //   },
+  // ];
+
+  return (
+    <PageContainer>
+      <Modal title="确认保存？" open={isSaveOpen} onOk={handleSaveOk} onCancel={handleSaveCancel}>
+        <p>保存后将回到值班表页面！</p>
+      </Modal>
+      <Modal
+        title="确认设为当前值班表？"
+        open={isSetOpen}
+        onOk={handleSetOk}
+        onCancel={handleSetCancel}
+      >
+        <p>同一时间只能启用一份值班表！</p>
+      </Modal>
+      <Card>
+        <Todo />
+      </Card>
+    </PageContainer>
+  );
+};
+export default EditTable;
diff --git a/src/pages/Admin/DutyTable/EditTable/tableItem.tsx b/src/pages/Admin/DutyTable/EditTable/tableItem.tsx
new file mode 100644
index 0000000..c04e4c4
--- /dev/null
+++ b/src/pages/Admin/DutyTable/EditTable/tableItem.tsx
@@ -0,0 +1,10 @@
+export type TableItem = {
+  id: React.Key;
+  mon?: string;
+  tue?: string;
+  wed?: string;
+  thu?: string;
+  fri?: string;
+  sat?: string;
+  sun?: string;
+};
diff --git a/src/pages/Admin/DutyTable/index.tsx b/src/pages/Admin/DutyTable/index.tsx
index ff8f1af..32f43b1 100644
--- a/src/pages/Admin/DutyTable/index.tsx
+++ b/src/pages/Admin/DutyTable/index.tsx
@@ -1,12 +1,61 @@
 import { PageContainer, ProList } from '@ant-design/pro-components';
-import { Card, Space, Tag } from 'antd';
+import { history } from '@umijs/max';
+import { Button, Card, Modal, Space, Tag } from 'antd';
 import moment from 'moment';
+import React, { useState } from 'react';
 import request from 'umi-request';
 import { DutyTableItem } from './dutyTableItem';
 
 const DutyTable: React.FC = () => {
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+  const [isSetOpen, setIsSetOpen] = useState(false);
+
+  const showDelete = () => {
+    setIsDeleteOpen(true);
+  };
+
+  const handleDeleteOk = () => {
+    setIsDeleteOpen(false);
+  };
+
+  const handleDeleteCancel = () => {
+    setIsDeleteOpen(false);
+  };
+
+  const showSet = () => {
+    setIsSetOpen(true);
+  };
+
+  const handleSetOk = () => {
+    setIsSetOpen(false);
+  };
+
+  const handleSetCancel = () => {
+    setIsSetOpen(false);
+  };
+
+  const newDutyTable = () => {
+    history.push('/admin/dutytable/edit');
+  };
+
   return (
     <PageContainer>
+      <Modal
+        title="确认删除？"
+        open={isDeleteOpen}
+        onOk={handleDeleteOk}
+        onCancel={handleDeleteCancel}
+      >
+        <p>删除后将无法恢复！</p>
+      </Modal>
+      <Modal
+        title="确认设为当前值班表？"
+        open={isSetOpen}
+        onOk={handleSetOk}
+        onCancel={handleSetCancel}
+      >
+        <p>同一时间只能启用一份值班表！</p>
+      </Modal>
       <Card>
         <ProList<DutyTableItem>
           search={{
@@ -59,10 +108,23 @@ const DutyTable: React.FC = () => {
                 <a href="" target="_blank" rel="noopener noreferrer" key="view">
                   查看
                 </a>,
+                <a onClick={showSet} key="view">
+                  设为当前值班表
+                </a>,
+                <a onClick={showDelete} key="view">
+                  删除
+                </a>,
               ],
               search: false,
             },
           }}
+          toolbar={{
+            actions: [
+              <Button type="primary" key="primary" onClick={newDutyTable}>
+                新建值班表
+              </Button>,
+            ],
+          }}
         />
       </Card>
     </PageContainer>