8.25 接口联调

src/components/ElecBidEvaluation/MeetingReservation.tsx

@@ -0,0 +1,211 @@
+import React, { useEffect, useState } from 'react';
+import { Button, DatePicker, DatePickerProps, Form, Input, message, Modal, Select, Skeleton, Spin } from 'antd';
+import moment from 'moment'
+import { cancelMeeting, getMeetingData, saveMeeting } from './service';
+import { isNotEmpty } from '@/utils/CommonUtils';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { dateTimeFormatter, echoDateTimeFormatter } from '@/utils/DateUtils';
+
+interface MeetingReservationProps {
+    modalVisible: boolean;
+    onCancel: () => void;
+    onSubmit?: () => void;
+    roomList?: any[];//评标室列表 带问号的参数可不传
+    status: string;//状态 0-新建 1-编辑 2-查看
+    meetId?: string;//预约id
+}
+const layout = {
+    labelCol: { span: 7 },
+    wrapperCol: { 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;
+};
+/**
+ * 评标室预约管理-会议室预约弹窗
+ * @param props 
+ * @returns 
+ */
+const MeetingReservation: React.FC<MeetingReservationProps> = (props) => {
+    const { modalVisible, onCancel, onSubmit, roomList, status, meetId } = props;
+    const [form] = Form.useForm();
+    const { Option } = Select;
+    const { confirm } = Modal;
+    const { TextArea } = Input;
+    //loading
+    const [loading, setLoading] = useState<boolean>(false);
+    //初始化
+    const [skeleing, setSkeleing] = useState<boolean>(false);
+    //窗口状态 0-新建 1-编辑 2-查看
+    const [modalStatus, setModalStatus] = useState<string | undefined>(status);
+    //评标室类型 meeting-会议室 eval-评标室
+    const [meetType, setMeetType] = useState<string>("meeting");
+
+    const onFinish = (values: any) => {
+        console.log(values);
+        if (values.reserveStartDate < moment().format(dateTimeFormatter)) {
+            message.info("开始时间不可早于当前时间");
+            return;
+        }
+        const params = JSON.parse(JSON.stringify(values));//深拷贝
+        params.reserveStartDate = moment(params.reserveStartDate).format(dateTimeFormatter);
+        params.reserveEndDate = moment(params.reserveEndDate).format(dateTimeFormatter);
+        setLoading(true);
+        saveMeeting(params).then(res => {
+            if (res?.code == 200) {
+                message.success("保存成功");
+                onSubmit && onSubmit();
+            }
+        }).finally(() => {
+            setLoading(false);
+        })
+    };
+    //不可选天
+    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');
+    //获取预约信息
+    const getMeetData = () => {
+        setSkeleing(true);
+        getMeetingData(meetId).then(res => {
+            if (res?.code == 200) {
+                setSkeleing(false);
+                const data = res?.data;
+                setMeetType(data.reserveType);//变更窗口类型
+                if (data.reserveType == "meeting") {
+                    data.reserveStartDate = echoDateTimeFormatter(data.reserveStartDate);
+                    data.reserveEndDate = echoDateTimeFormatter(data.reserveEndDate);
+                }
+                form.setFieldsValue(data);
+            }
+        })
+    }
+    //取消预约
+    const cancelMeet = () => {
+        confirm({
+            title: "确认取消预约？",
+            icon: <ExclamationCircleOutlined />,
+            centered: true,
+            content: '',
+            async onOk() {
+                await cancelMeeting(meetId).then(res => {
+                    if (res?.code == 200) {
+                        message.success("取消预约成功");
+                        onSubmit && onSubmit();
+                    }
+                })
+            },
+            onCancel() { },
+        });
+    }
+    useEffect(() => {
+        if (isNotEmpty(meetId)) {
+            getMeetData();
+        }
+    }, [meetId])
+
+    return (
+        <Modal
+            destroyOnClose
+            title={skeleing ? null : meetType == "meeting" ? "会议室预约" : "详情"}
+            visible={modalVisible}
+            onCancel={() => onCancel()}
+            centered
+            width={600}
+            footer={skeleing ? [<Skeleton.Button active />] : [
+                <Button key="close" onClick={onCancel}>
+                    返回
+                </Button>,
+                <Button key="save" type="primary" onClick={() => form.submit()} hidden={meetType == "eval" || meetType == undefined || modalStatus == "2"}>
+                    保存
+                </Button>,
+                <Button key="edit" onClick={() => { setModalStatus("1"); }} hidden={meetType == "eval" || meetType == undefined || modalStatus == "1" || modalStatus == "0"}>
+                    修改预约
+                </Button>,
+                <Button type="primary" key="cancel" hidden={modalStatus == "0"} onClick={() => cancelMeet()}>
+                    取消预约
+                </Button>,
+            ]}
+        >
+            <Spin spinning={loading}>
+                <Skeleton loading={skeleing} active>
+                    <Form {...layout} form={form} name="control-hooks" onFinish={onFinish} validateMessages={validateMessages}>
+                        {meetType == "meeting" ? (
+                            <>
+                                <Form.Item name="id" label="会议id" hidden>
+                                    <Input />
+                                </Form.Item>
+                                <Form.Item name="areaId" label="评标室" rules={[{ required: !(modalStatus == "2") }]}>
+                                    <Select
+                                        placeholder="选择评标室"
+                                        allowClear
+                                        disabled={modalStatus == "2"}
+                                    >
+                                        {roomList?.map(item => (<Option value={item.id} key={item.id}>{item.areaName}</Option>))}
+                                    </Select>
+                                </Form.Item>
+                                <Form.Item name="meetingName" label="会议名称" rules={[{ required: !(modalStatus == "2") }]}>
+                                    <TextArea placeholder="会议名称" disabled={modalStatus == "2"} autoSize maxLength={50} />
+                                </Form.Item>
+                                <Form.Item name="numberInMeeting" label="会议人数" rules={[{ required: !(modalStatus == "2") }]}>
+                                    <Input type="number" placeholder="会议人数" suffix="人" disabled={modalStatus == "2"} maxLength={5} />
+                                </Form.Item>
+                                <Form.Item name="reserveStartDate" label="会议开始时间" rules={[{ required: !(modalStatus == "2") }]}>
+                                    <DatePicker showTime={{ defaultValue: moment().hour(7) }} showNow={false} disabledDate={disabledDate} disabledTime={disabledDateTime} showMinute={false} showSecond={false} format={dateFormat} style={{ width: '100%' }} disabled={modalStatus == "2"} />
+                                </Form.Item>
+                                <Form.Item name="reserveEndDate" label="会议结束时间" rules={[{ required: !(modalStatus == "2") }]}>
+                                    <DatePicker showTime={{ defaultValue: moment().hour(7) }} showNow={false} disabledDate={disabledDate} disabledTime={disabledDateTime} showMinute={false} showSecond={false} format={dateFormat} style={{ width: '100%' }} disabled={modalStatus == "2"} />
+                                </Form.Item>
+                                <Form.Item name="reserveBy" label="预约人" rules={[{ required: !(modalStatus == "2") }]}>
+                                    <Input placeholder="预约人" disabled={modalStatus == "2"} maxLength={50} />
+                                </Form.Item>
+                                <Form.Item name="reserveContactNumber" label="预约人联系方式" rules={[{ required: !(modalStatus == "2") }]}>
+                                    <Input placeholder="预约人联系方式" disabled={modalStatus == "2"} maxLength={50} />
+                                </Form.Item>
+                            </>
+                        ) : (
+                            <>
+                                <Form.Item name="projectName" label="项目名称">
+                                    <TextArea readOnly bordered={false} autoSize />
+                                </Form.Item>
+                                <Form.Item name="projectNum" label="项目编号">
+                                    <Input readOnly bordered={false} />
+                                </Form.Item>
+                                <Form.Item name="sectionNames" label="标段名称">
+                                    <TextArea readOnly bordered={false} autoSize />
+                                </Form.Item>
+                                <Form.Item name="reserveStartDate" label="预计开始时间">
+                                    <Input readOnly bordered={false} />
+                                </Form.Item>
+                                <Form.Item name="reserveEndDate" label="预计结束时间">
+                                    <Input readOnly bordered={false} />
+                                </Form.Item>
+                                <Form.Item name="reserveBy" label="预约人">
+                                    <Input readOnly bordered={false} />
+                                </Form.Item>
+                                <Form.Item name="reserveContactNumber" label="预约人联系方式">
+                                    <Input readOnly bordered={false} />
+                                </Form.Item>
+                            </>
+                        )}
+                    </Form>
+                </Skeleton>
+            </Spin>
+        </Modal>
+    );
+};
+
+export default MeetingReservation;

src/components/ElecBidEvaluation/service.ts

@@ -0,0 +1,29 @@
+import request from '@/utils/request';
+
+/**
+ * 根据预约id获取预约信息
+ */
+export async function getMeetingData(id: any) {
+    return request('/api/biz-service-ebtp-evaluation/v1/eval/room/reserve/infoById/' + id, {
+        method: 'GET',
+    });
+}
+
+/**
+ * 保存预约
+ */
+export async function saveMeeting(data: any) {
+    return request('/api/biz-service-ebtp-evaluation/v1/eval/room/reserve/meeting/save', {
+        method: 'POST',
+        data: { ...data }
+    });
+}
+
+/**
+ * 取消预约
+ */
+export async function cancelMeeting(id: any) {
+    return request('/api/biz-service-ebtp-evaluation/v1/eval/room/reserve/cancel/' + id, {
+        method: 'GET',
+    });
+}

src/pages/AppointmentManage/components/MeetingReservation.tsx

@@ -1,101 +0,0 @@
-import React, { useState } from 'react';
-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: 7 },
-    wrapperCol: { span: 14 },
-};
-const tailLayout = {
-    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) => {
-    const { modalVisible, onCancel } = props;
-    const [form] = Form.useForm();
-    const { Option } = Select;
-    //loading
-    const [loading, setLoading] = useState<boolean>(false);
-
-    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
-            destroyOnClose
-            title="会议室预约"
-            visible={modalVisible}
-            onCancel={() => onCancel()}
-            centered
-            width={600}
-            footer={null}
-        >
-            <Spin spinning={loading}>
-                <Form {...layout} form={form} name="control-hooks" onFinish={onFinish} validateMessages={validateMessages}>
-                    <Form.Item name="gender" label="评标室" rules={[{ required: true }]}>
-                        <Select
-                            placeholder="选择评标室"
-                            allowClear
-                        >
-                            <Option value="1">集团第一评标室</Option>
-                            <Option value="2">集团第二评标室</Option>
-                            <Option value="3">集团第三评标室</Option>
-                        </Select>
-                    </Form.Item>
-                    <Form.Item name="note" label="会议名称" rules={[{ required: true }]}>
-                        <Input placeholder="会议名称" />
-                    </Form.Item>
-                    <Form.Item name="num" label="会议人数" rules={[{ required: true }]}>
-                        <Input type="number" placeholder="会议人数" suffix="人" />
-                    </Form.Item>
-                    <Form.Item name="startTime" label="会议开始时间" rules={[{ required: true }]}>
-                        <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={{ 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 placeholder="预约人" />
-                    </Form.Item>
-                    <Form.Item name="contact" label="预约人联系方式" rules={[{ required: true }]}>
-                        <Input placeholder="预约人联系方式" />
-                    </Form.Item>
-                    <Form.Item {...tailLayout}>
-                        <Space>
-                            <Button type="primary" htmlType="submit">
-                                保存
-                            </Button>
-                            <Button htmlType="button" onClick={onCancel}>
-                                取消
-                            </Button>
-                        </Space>
-                    </Form.Item>
-                </Form>
-            </Spin>
-        </Modal>
-    );
-};
-
-export default MeetingReservation;

src/pages/AppointmentManage/index.tsx

@@ -4,373 +4,81 @@ import ProTable from '@ant-design/pro-table';
 import { Button, Card, Space, Tag } from 'antd';
 import React, { ReactText, useEffect, useState } from 'react';
 import { useRef } from 'react';
-import MeetingReservation from './components/MeetingReservation';
+import MeetingReservation from '@/components/ElecBidEvaluation/MeetingReservation';
+import { getRecordData, getSiteList } from './service';
+import { isEmpty } from '@/utils/CommonUtils';
 
-const orange_bg = { background: '#f59a23', color: '#0000ff' };
+const orange_bg = { background: '#f59a23', color: '#0000ff', cursor: 'pointer', width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
 const green_bg = { background: '#4b7902' };
 const align_middle = { display: 'flex', alignItems: 'center' };
 const tag_size = { height: '20px', width: '20px' };
 
-const data = {
+const ScreenTable = (props: { record: any, onCellClick: (id: any) => void, refresh: number }) => {
-    week: [
+    const { record, onCellClick, refresh } = props;
-        {
-            id: "01",
-            week: '周一',
-            date: "2022年7月18日",
-        },
-        {
-            id: "02",
-            week: '周二',
-            date: "2022年7月19日"
-        },
-        {
-            id: "03",
-            week: '周三',
-            date: "2022年7月20日"
-        },
-        {
-            id: "04",
-            week: '周四',
-            date: "2022年7月21日"
-        },
-        {
-            id: "05",
-            week: '周五',
-            date: "2022年7月22日"
-        },
-        {
-            id: "06",
-            week: '周六',
-            date: "2022年7月23日"
-        },
-        {
-            id: "07",
-            week: '周日',
-            date: "2022年7月24日"
-        },
-    ],
-    data: [
-        {
-            "id": "2",
-            "name": "集团第一评标室",
-            "rs": "10",
-            "time": "07:00",
-            "01": {
-                "id": "123",
-                "hymc": "标段1",
-                "kssj": "2022-07-18 07:00:00",
-                "jssj": "2022-07-18 08:00:00",
-                "iskssj": true,
-                "hour": 1
-            },
-            "02": {
-                "id": "456",
-                "hymc": "评标室汇报会议",
-                "kssj": "2022-07-18 07:00:00",
-                "jssj": "2022-07-18 10:00:00",
-                "iskssj": true,
-                "hour": 3
-            },
-            "03": null,
-            "04": null,
-            "05": null,
-            "06": null,
-            "07": null,
-        },
-        {
-            "id": "3",
-            "name": "集团第一评标室",
-            "rs": "10",
-            "time": "08:00",
-            "01": null,
-            "02": {
-                "id": "456",
-                "hymc": "评标室汇报会议",
-                "kssj": "2022-07-18 07:00:00",
-                "jssj": "2022-07-18 10:00:00",
-                "iskssj": false,
-                "hour": 3
-            },
-            "03": null,
-            "04": null,
-            "05": null,
-            "06": null,
-            "07": null,
-        },
-        {
-            "id": "4",
-            "name": "集团第一评标室",
-            "rs": "10",
-            "time": "09:00",
-            "01": null,
-            "02": {
-                "id": "456",
-                "hymc": "评标室汇报会议",
-                "kssj": "2022-07-18 07:00:00",
-                "jssj": "2022-07-18 10:00:00",
-                "iskssj": false,
-                "hour": 3
-            },
-            "03": {
-                "id": "789",
-                "hymc": "标段2",
-                "kssj": "2022-07-18 09:00:00",
-                "jssj": "2022-07-18 10:00:00",
-                "iskssj": true,
-                "hour": 1
-            },
-            "04": null,
-            "05": null,
-            "06": null,
-            "07": null,
-        },
-        {
-            "id": "5",
-            "name": "集团第一评标室",
-            "rs": "10",
-            "time": "10:00",
-            "01": null,
-            "02": null,
-            "03": null,
-            "04": null,
-            "05": null,
-            "06": null,
-            "07": null,
-        },
-        {
-            "id": "6",
-            "name": "集团第一评标室",
-            "rs": "10",
-            "time": "11:00",
-            "01": null,
-            "02": null,
-            "03": null,
-            "04": null,
-            "05": null,
-            "06": null,
-            "07": null,
-        },
-        {
-            "id": "7",
-            "name": "集团第一评标室",
-            "rs": "10",
-            "time": "12:00",
-            "01": null,
-            "02": null,
-            "03": null,
-            "04": null,
-            "05": null,
-            "06": null,
-            "07": null,
-        },
-        {
-            "id": "8",
-            "name": "集团第一评标室",
-            "rs": "10",
-            "time": "13:00",
-            "01": {
-                "id": "012",
-                "hymc": "评标室汇报会议2",
-                "kssj": "2022-07-18 13:00:00",
-                "jssj": "2022-07-18 17:00:00",
-                "iskssj": true,
-                "hour": 4
-            },
-            "02": null,
-            "03": null,
-            "04": {
-                "id": "213",
-                "hymc": "标段3",
-                "kssj": "2022-07-18 13:00:00",
-                "jssj": "2022-07-18 14:00:00",
-                "iskssj": true,
-                "hour": 1
-            },
-            "05": null,
-            "06": null,
-            "07": {
-                "id": "367",
-                "hymc": "标段4",
-                "kssj": "2022-07-18 13:00:00",
-                "jssj": "2022-07-18 15:00:00",
-                "iskssj": true,
-                "hour": 2
-            },
-        },
-        {
-            "id": "9",
-            "name": "集团第一评标室",
-            "rs": "10",
-            "time": "14:00",
-            "01": {
-                "id": "012",
-                "hymc": "评标室汇报会议2",
-                "kssj": "2022-07-18 13:00:00",
-                "jssj": "2022-07-18 17:00:00",
-                "iskssj": false,
-                "hour": 4
-            },
-            "02": null,
-            "03": null,
-            "04": null,
-            "05": null,
-            "06": null,
-            "07": {
-                "id": "367",
-                "hymc": "标段4",
-                "kssj": "2022-07-18 13:00:00",
-                "jssj": "2022-07-18 15:00:00",
-                "iskssj": false,
-                "hour": 2
-            },
-        },
-        {
-            "id": "10",
-            "name": "集团第一评标室",
-            "rs": "10",
-            "time": "15:00",
-            "01": {
-                "id": "012",
-                "hymc": "评标室汇报会议2",
-                "kssj": "2022-07-18 13:00:00",
-                "jssj": "2022-07-18 17:00:00",
-                "iskssj": false,
-                "hour": 4
-            },
-            "02": null,
-            "03": null,
-            "04": null,
-            "05": null,
-            "06": null,
-            "07": null,
-        },
-        {
-            "id": "11",
-            "name": "集团第一评标室",
-            "rs": "10",
-            "time": "16:00",
-            "01": {
-                "id": "012",
-                "hymc": "评标室汇报会议2",
-                "kssj": "2022-07-18 13:00:00",
-                "jssj": "2022-07-18 17:00:00",
-                "iskssj": false,
-                "hour": 4
-            },
-            "02": null,
-            "03": null,
-            "04": null,
-            "05": null,
-            "06": null,
-            "07": null,
-        },
-        {
-            "id": "12",
-            "name": "集团第一评标室",
-            "rs": "10",
-            "time": "17:00",
-            "01": null,
-            "02": null,
-            "03": null,
-            "04": null,
-            "05": null,
-            "06": null,
-            "07": null,
-        },
-        {
-            "id": "13",
-            "name": "集团第一评标室",
-            "rs": "10",
-            "time": "18:00",
-            "01": null,
-            "02": null,
-            "03": null,
-            "04": null,
-            "05": null,
-            "06": null,
-            "07": null,
-        },
-    ]
-}
-
-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>[] = [
+    //表格数据
-        {
+    const [tableData, setTableData] = useState<any[]>([]);
-            title: '评标室名称',
+    //星期偏移量
-            dataIndex: 'name',
+    const offset = useRef<number>(0);
-            align: 'center',
+
-            render: (_, record, index) => {
+    //表格列拼接
-                return {
+    const columnsSplice = (weeksData: any[]) => {
-                    children: _,
+        const columns: ProColumns<any>[] = [
-                    props: {
+            {
-                        rowSpan: index % 24 == 0 ? 24 : 0,
+                title: '评标室名称',
+                dataIndex: 'name',
+                align: 'center',
+                render: (_, record, index) => {
+                    return {
+                        children: _,
+                        props: {
+                            rowSpan: index % 24 == 0 ? 24 : 0,
+                        }
                     }
                 }
-            }
+            },
-        },
+            {
-        {
+                title: '可容纳人数（人）',
-            title: '可容纳人数（人）',
+                dataIndex: 'rs',
-            dataIndex: 'rs',
+                align: 'center',
-            align: 'center',
+                render: (_, record, index) => {
-            render: (_, record, index) => {
+                    return {
-                return {
+                        children: _,
-                    children: _,
+                        props: {
-                    props: {
+                            rowSpan: index % 24 == 0 ? 24 : 0,
-                        rowSpan: index % 24 == 0 ? 24 : 0,
+                        }
                     }
                 }
-            }
+            },
-        },
+            {
-        {
+                title: '场次',
-            title: '场次',
+                align: 'center',
-            align: 'center',
+                colSpan: 2,
-            colSpan: 2,
+                render: (_, record, index) => {
-            render: (_, record, index) => {
+                    return {
-                return {
+                        children: "07:00 ~ 18:00",
-                    children: "07:00 ~ 18:00",
+                        props: {
-                    props: {
+                            rowSpan: index % 24 == 0 ? 24 : 0,
-                        rowSpan: index % 24 == 0 ? 24 : 0,
+                        }
                     }
                 }
-            }
+            },
-        },
+            {
-        {
+                dataIndex: "time",
-            dataIndex: "time",
+                align: 'right',
-            align: 'right',
+                width: '100px',
-            width: '60px',
+                colSpan: 0,
-            colSpan: 0,
+            },
-        },
+            {
-        {
+                title: '预约时间',
-            title: '预约时间',
+                dataIndex: "info_time",
-            dataIndex: "info_time",
+                valueType: 'date',
-            valueType: 'date',
+                hideInTable: true,
-            hideInTable: true,
+            },
-        },
+        ];
-    ];
+        for (const ite of weeksData) {
-    useEffect(() => {
-        for (const ite of tabColumns) {
             columns.push({
                 title: <span>{ite.week}<br />{ite.date}</span>,
                 dataIndex: ite.id,
@@ -378,7 +86,8 @@ const ScreenTable = (props: { tableData: any[], tabColumns: any[], record: any }
                 ellipsis: true,
                 onCell: (record) => {
                     return {
-                        style: record[ite.id]?.iskssj ? orange_bg : green_bg
+                        style: record[ite.id]?.iskssj ? orange_bg : green_bg,
+                        onClick: record[ite.id]?.iskssj ? () => onCellClick(record[ite.id]?.id) : void 0,
                     }
                 },
                 render: (_: any, record: any) => {
@@ -392,24 +101,48 @@ const ScreenTable = (props: { tableData: any[], tabColumns: any[], record: any }
             })
         }
         setTableColumns(columns);
-    }, []);
+    }
+
+    const getTableData = () => {
+        getRecordData({ areaId: record?.id, offset: offset.current }).then(res => {
+            if (res?.code == 200) {
+                const data = res?.data;
+                columnsSplice(data.week);
+                setTableData(data.data);
+            }
+        })
+    }
+    const weekChange = (param: string) => {
+        if (param == "1") {
+            offset.current += 1;
+        } else if (param == "0") {
+            offset.current -= 1;
+        }
+        getTableData();
+    }
+    useEffect(() => {
+        //获取预约记录
+        getTableData();
+    }, [refresh]);
     return (
         <div>
-            <Space style={{ margin: '10px 0' }}>
+            {tableData.length > 0 && (
-                <Button key="last-week" size='small' type="primary">
+                <Space style={{ margin: '10px 0' }}>
-                    上一周
+                    <Button key="last-week" size='small' type="primary" onClick={() => weekChange("0")}>
-                </Button>
+                        上一周
-                <Button key="after-week" size='small' type="primary">
+                    </Button>
-                    下一周
+                    <Button key="after-week" size='small' type="primary" onClick={() => weekChange("1")}>
-                </Button>
+                        下一周
-            </Space>
+                    </Button>
+                </Space>
+            )}
             <ProTable<any>
                 columns={tableColumns}
                 actionRef={actionRef}
                 bordered
                 size='small'
                 dataSource={tableData}
-                rowKey="id"
+                rowKey="time"
                 search={false}
                 pagination={false}
                 options={false}
@@ -422,20 +155,62 @@ const ScreenTable = (props: { tableData: any[], tabColumns: any[], record: any }
 export default () => {
     //预约弹窗
     const [modalVisible, setModalVisible] = useState<boolean>(false);
+    //评标场所列表数据
+    const [siteListData, setSiteListData] = useState<any[]>([]);
+    //评标场所列表展开
     const [expandedRowKeys, setExpandedRowKeys] = useState<readonly ReactText[]>([]);
+    //预约状态
+    const [meetStatus, setMeetStatus] = useState<string>("2");
+    //预约id
+    const [meetId, setMeetId] = useState<string>("");
+    //刷新参数
+    const [refresh, setRefresh] = useState<number>(0);
+
+    //获取评标场所
+    const getSiteListData = (key: any) => {
+        getSiteList().then(res => {
+            if (res?.code == 200) {
+                const data = res?.data;
+                setSiteListData(data);
+                if (key == "0" && data?.length > 0) {
+                    setExpandedRowKeys([data[0].id]);
+                }
+            }
+        })
+    }
+    //新建预约
+    const createMeet = () => {
+        setMeetStatus("0");
+        setMeetId("");
+        setModalVisible(true);
+    }
+    //查看预约
+    const viewMeet = (id: any) => {
+        setMeetStatus("2");
+        setMeetId(id);
+        setModalVisible(true);
+    }
+    //查看预约详情跳转
+    const viewMeetContent = () => {
+        window.open("/ElecEvalReserve");
+    }
+
+    useEffect(() => {
+        getSiteListData("0");
+    }, [])
 
     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="yuyue" type="primary" onClick={() => setModalVisible(true)}>
+                    <Button key="yuyue" type="primary" onClick={() => createMeet()}>
                         预约
                     </Button>
-                    <Button key="yuyueconfirm">
+                    <Button key="yuyueconfirm" onClick={() => viewMeetContent()}>
                         查看预约详情
                     </Button>
                 </Space>
-                <Space>
+                <Space size="middle">
                     <div style={align_middle}><Tag color="#f59a23" style={tag_size}></Tag>已预约</div>
                     <div style={align_middle}><Tag color="#4b7902" style={tag_size}></Tag>未预约</div>
                 </Space>
@@ -445,21 +220,21 @@ export default () => {
                 expandable={{
                     expandedRowKeys, onExpandedRowsChange: setExpandedRowKeys,
                 }}
-                dataSource={dataSource}
+                dataSource={siteListData}
                 toolBarRender={false}
                 metas={{
                     title: {
-                        render: (_: any, record: any) => <span onClick={() => setExpandedRowKeys(keys => keys.includes(record.id) ? [] : [record.id])}>{record.title}</span>,
+                        render: (_: any, record: any) => <span onClick={() => setExpandedRowKeys(keys => keys.includes(record.id) ? [] : [record.id])}>{record.areaName}</span>,
                     },
                     subTitle: {
-                        render: (_: any, record: any) => `可容纳人数：${record.rs}人`,
+                        render: (_: any, record: any) => `可容纳人数：${isEmpty(record.areaNumber) ? '' : record.areaNumber}人`,
                     },
                     description: {
-                        render: (_: any, record: any) => <ScreenTable tableData={data.data} tabColumns={data.week} record={record} />,
+                        render: (_: any, record: any) => <ScreenTable record={record} onCellClick={viewMeet} refresh={refresh} />,
                     },
                 }}
             />
-            {modalVisible && <MeetingReservation modalVisible={modalVisible} onCancel={() => setModalVisible(false)} />}
+            {modalVisible && <MeetingReservation modalVisible={modalVisible} onCancel={() => { setModalVisible(false); getSiteListData("1") }} roomList={siteListData} status={meetStatus} meetId={meetId} onSubmit={() => { setModalVisible(false); setRefresh(refresh => refresh + 1) }} />}
         </Card >
     );
 };

src/pages/AppointmentManage/service.ts

@@ -0,0 +1,21 @@
+import request from '@/utils/request';
+
+/**
+ * 获取评标场所信息
+ */
+export async function getSiteList() {
+    return request('/api/biz-service-ebtp-evaluation/v1/elec/eval/room/list', {
+        method: 'GET',
+    });
+}
+
+/**
+ * 获取预约记录
+ * @params
+ */
+export async function getRecordData(params: any) {
+    return request('/api/biz-service-ebtp-evaluation/v1/eval/room/reserve/query/overview', {
+        method: 'GET',
+        params: params,
+    });
+}