8.4

src/pages/AppointmentManage/components/MeetingReservation.tsx

@@ -1,16 +1,27 @@
 import React, { useState } from 'react';
-import { Button, DatePicker, Form, Input, Modal, Select, Space, Spin } from 'antd';
+import { Button, DatePicker, DatePickerProps, Form, Input, Modal, Select, Space, Spin } from 'antd';
+import moment from 'moment'
 
 interface MeetingReservationProps {
     modalVisible: boolean;
     onCancel: () => void;
 }
 const layout = {
-    labelCol: { span: 5 },
+    labelCol: { span: 7 },
-    wrapperCol: { span: 17 },
+    wrapperCol: { span: 14 },
 };
 const tailLayout = {
-    wrapperCol: { offset: 5, span: 17 },
+    wrapperCol: { offset: 7, span: 14 },
+};
+const validateMessages = {
+    required: '请填写此项',
+};
+const range = (start: number, end: number) => {
+    const result = [];
+    for (let i = start; i < end; i++) {
+        result.push(i);
+    }
+    return result;
 };
 
 const MeetingReservation: React.FC<MeetingReservationProps> = (props) => {
@@ -23,6 +34,13 @@ const MeetingReservation: React.FC<MeetingReservationProps> = (props) => {
     const onFinish = (values: any) => {
         console.log(values);
     };
+    function disabledDate(current: any) {
+        return current && current < moment().startOf('day');
+    }
+    const disabledDateTime = () => ({
+        disabledHours: () => [...range(0, 7), ...range(19, 24)],
+    });
+    const dateFormat: DatePickerProps['format'] = value => value.startOf('hour').format('YYYY-MM-DD HH:mm:ss');
 
     return (
         <Modal
@@ -31,11 +49,11 @@ const MeetingReservation: React.FC<MeetingReservationProps> = (props) => {
             visible={modalVisible}
             onCancel={() => onCancel()}
             centered
-            width={'70%'}
+            width={600}
             footer={null}
         >
             <Spin spinning={loading}>
-                <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
+                <Form {...layout} form={form} name="control-hooks" onFinish={onFinish} validateMessages={validateMessages}>
                     <Form.Item name="gender" label="评标室" rules={[{ required: true }]}>
                         <Select
                             placeholder="选择评标室"
@@ -47,22 +65,22 @@ const MeetingReservation: React.FC<MeetingReservationProps> = (props) => {
                         </Select>
                     </Form.Item>
                     <Form.Item name="note" label="会议名称" rules={[{ required: true }]}>
-                        <Input />
+                        <Input placeholder="会议名称" />
                     </Form.Item>
                     <Form.Item name="num" label="会议人数" rules={[{ required: true }]}>
-                        <Input />
+                        <Input type="number" placeholder="会议人数" suffix="人" />
                     </Form.Item>
                     <Form.Item name="startTime" label="会议开始时间" rules={[{ required: true }]}>
-                        <DatePicker showTime showNow={false} showHour={false} />
+                        <DatePicker showTime={{ defaultValue: moment().hour(7) }} showNow={false} disabledDate={disabledDate} disabledTime={disabledDateTime} showMinute={false} showSecond={false} format={dateFormat} style={{ width: '100%' }} />
                     </Form.Item>
                     <Form.Item name="endTime" label="会议结束时间" rules={[{ required: true }]}>
-                        <DatePicker showTime showNow={false} showHour={false} />
+                        <DatePicker showTime={{ defaultValue: moment().hour(7) }} showNow={false} disabledDate={disabledDate} disabledTime={disabledDateTime} showMinute={false} showSecond={false} format={dateFormat} style={{ width: '100%' }} />
                     </Form.Item>
                     <Form.Item name="people" label="预约人" rules={[{ required: true }]}>
-                        <Input />
+                        <Input placeholder="预约人" />
                     </Form.Item>
                     <Form.Item name="contact" label="预约人联系方式" rules={[{ required: true }]}>
-                        <Input />
+                        <Input placeholder="预约人联系方式" />
                     </Form.Item>
                     <Form.Item {...tailLayout}>
                         <Space>

src/pages/AppointmentManage/index.tsx

@@ -1,12 +1,15 @@
+import ProList from '@ant-design/pro-list';
 import type { ActionType, ProColumns } from '@ant-design/pro-table';
 import ProTable from '@ant-design/pro-table';
-import { Button, Card, Space } from 'antd';
+import { Button, Card, Space, Tag } from 'antd';
-import React, { useEffect, useState } from 'react';
+import React, { ReactText, useEffect, useState } from 'react';
 import { useRef } from 'react';
 import MeetingReservation from './components/MeetingReservation';
 
 const orange_bg = { background: '#f59a23', color: '#0000ff' };
 const green_bg = { background: '#4b7902' };
+const align_middle = { display: 'flex', alignItems: 'center' };
+const tag_size = { height: '20px', width: '20px' };
 
 const data = {
     week: [
@@ -290,6 +293,29 @@ const data = {
     ]
 }
 
+const dataSource = [
+    {
+        "id": "1",
+        "title": '集团第一评标室',
+        "rs": "10",
+    },
+    {
+        "id": "2",
+        "title": '集团第二评标室',
+        "rs": "18",
+    },
+    {
+        "id": "3",
+        "title": '集团第三评标室',
+        "rs": "29",
+    }
+]
+
+const ScreenTable = (props: { tableData: any[], tabColumns: any[], record: any }) => {
+    const { tableData, tabColumns, record } = props;
+    const actionRef = useRef<ActionType>();
+    //表格列
+    const [tableColumns, setTableColumns] = useState<ProColumns<any>[]>([]);
     const columns: ProColumns<any>[] = [
         {
             title: '评标室名称',
@@ -323,7 +349,7 @@ const columns: ProColumns<any>[] = [
             colSpan: 2,
             render: (_, record, index) => {
                 return {
-                children: "00:00 ~ 24:00",
+                    children: "07:00 ~ 18:00",
                     props: {
                         rowSpan: index % 24 == 0 ? 24 : 0,
                     }
@@ -343,17 +369,8 @@ const columns: ProColumns<any>[] = [
             hideInTable: true,
         },
     ];
-
-export default () => {
-    const actionRef = useRef<ActionType>();
-    //表格列
-    const [tableColumns, setTableColumns] = useState<ProColumns<any>[]>([]);
-    //表格数据
-    const [tableData, setTableData] = useState<any[]>([]);
-    //预约弹窗
-    const [modalVisible, setModalVisible] = useState<boolean>(false);
     useEffect(() => {
-        for (const ite of data.week) {
+        for (const ite of tabColumns) {
             columns.push({
                 title: <span>{ite.week}<br />{ite.date}</span>,
                 dataIndex: ite.id,
@@ -375,10 +392,17 @@ export default () => {
             })
         }
         setTableColumns(columns);
-        setTableData(data.data);
     }, []);
     return (
-        <Card title="评标室预约情况" bodyStyle={{ padding: '1px 24px 24px', height: window.innerHeight - 120, overflowY: 'auto' }}>
+        <div>
+            <Space style={{ margin: '10px 0' }}>
+                <Button key="last-week" size='small' type="primary">
+                    上一周
+                </Button>
+                <Button key="after-week" size='small' type="primary">
+                    下一周
+                </Button>
+            </Space>
             <ProTable<any>
                 columns={tableColumns}
                 actionRef={actionRef}
@@ -390,31 +414,49 @@ export default () => {
                 pagination={false}
                 options={false}
                 dateFormatter="string"
-                toolbar={{
+            />
-                    title: (
+        </div>
+    )
+}
+
+export default () => {
+    //预约弹窗
+    const [modalVisible, setModalVisible] = useState<boolean>(false);
+    const [expandedRowKeys, setExpandedRowKeys] = useState<readonly ReactText[]>([]);
+
+    return (
+        <Card title="评标室预约情况" bodyStyle={{ padding: '16px 0px 24px', height: window.innerHeight - 120, overflowY: 'auto' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0 24px 16px' }}>
                 <Space>
-                            <Button key="last-week" type="primary">
-                                上一周
-                            </Button>
-                            <Button key="after-week" type="primary">
-                                下一周
-                            </Button>
                     <Button key="yuyue" type="primary" onClick={() => setModalVisible(true)}>
                         预约
                     </Button>
-                        </Space>
+                    <Button key="yuyueconfirm">
-                    ),
-                    actions: [
-                        <Button key="yuyueconfirm" type="primary">
                         查看预约详情
-                        </Button>,
+                    </Button>
-                        <Button key="reserved" type="primary" style={{ background: '#f59a23', cursor: 'default', border: 'none' }}>
+                </Space>
-                            已预约
+                <Space>
-                        </Button>,
+                    <div style={align_middle}><Tag color="#f59a23" style={tag_size}></Tag>已预约</div>
-                        <Button key="no-appo" type="primary" style={{ background: '#4b7902', cursor: 'default', border: 'none' }}>
+                    <div style={align_middle}><Tag color="#4b7902" style={tag_size}></Tag>未预约</div>
-                            未预约
+                </Space>
-                        </Button>,
+            </div>
-                    ],
+            <ProList<any>
+                rowKey="id"
+                expandable={{
+                    expandedRowKeys, onExpandedRowsChange: setExpandedRowKeys,
+                }}
+                dataSource={dataSource}
+                toolBarRender={false}
+                metas={{
+                    title: {
+                        render: (_: any, record: any) => <span onClick={() => setExpandedRowKeys(keys => keys.includes(record.id) ? [] : [record.id])}>{record.title}</span>,
+                    },
+                    subTitle: {
+                        render: (_: any, record: any) => `可容纳人数：${record.rs}人`,
+                    },
+                    description: {
+                        render: (_: any, record: any) => <ScreenTable tableData={data.data} tabColumns={data.week} record={record} />,
+                    },
                 }}
             />
             {modalVisible && <MeetingReservation modalVisible={modalVisible} onCancel={() => setModalVisible(false)} />}