8.2
This commit is contained in:
jl-zhoujl2
@ -111,6 +111,10 @@ export default [
|
|||||||
},
|
},
|
||||||
...home,//各角色主页
|
...home,//各角色主页
|
||||||
...menuaZhaoBiao,//项目菜单所有路由
|
...menuaZhaoBiao,//项目菜单所有路由
|
||||||
|
{
|
||||||
|
path: '/AppointmentManage',
|
||||||
|
component: './AppointmentManage',
|
||||||
|
},
|
||||||
{//问卷调查
|
{//问卷调查
|
||||||
name: 'Questionnaire',
|
name: 'Questionnaire',
|
||||||
icon: 'UnorderedListOutlined',
|
icon: 'UnorderedListOutlined',
|
||||||
|
|||||||
@ -0,0 +1,83 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Button, DatePicker, Form, Input, Modal, Select, Space, Spin } from 'antd';
|
||||||
|
|
||||||
|
interface MeetingReservationProps {
|
||||||
|
modalVisible: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
const layout = {
|
||||||
|
labelCol: { span: 5 },
|
||||||
|
wrapperCol: { span: 17 },
|
||||||
|
};
|
||||||
|
const tailLayout = {
|
||||||
|
wrapperCol: { offset: 5, span: 17 },
|
||||||
|
};
|
||||||
|
|
||||||
|
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);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title="会议室预约"
|
||||||
|
visible={modalVisible}
|
||||||
|
onCancel={() => onCancel()}
|
||||||
|
centered
|
||||||
|
width={'70%'}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
<Spin spinning={loading}>
|
||||||
|
<Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
|
||||||
|
<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 />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="num" label="会议人数" rules={[{ required: true }]}>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="startTime" label="会议开始时间" rules={[{ required: true }]}>
|
||||||
|
<DatePicker showTime showNow={false} showHour={false} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="endTime" label="会议结束时间" rules={[{ required: true }]}>
|
||||||
|
<DatePicker showTime showNow={false} showHour={false} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="people" label="预约人" rules={[{ required: true }]}>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="contact" label="预约人联系方式" rules={[{ required: true }]}>
|
||||||
|
<Input />
|
||||||
|
</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;
|
||||||
423
src/pages/AppointmentManage/index.tsx
Normal file
423
src/pages/AppointmentManage/index.tsx
Normal file
@ -0,0 +1,423 @@
|
|||||||
|
import type { ActionType, ProColumns } from '@ant-design/pro-table';
|
||||||
|
import ProTable from '@ant-design/pro-table';
|
||||||
|
import { Button, Card, Space } from 'antd';
|
||||||
|
import React, { 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 data = {
|
||||||
|
week: [
|
||||||
|
{
|
||||||
|
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 columns: ProColumns<any>[] = [
|
||||||
|
{
|
||||||
|
title: '评标室名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
align: 'center',
|
||||||
|
render: (_, record, index) => {
|
||||||
|
return {
|
||||||
|
children: _,
|
||||||
|
props: {
|
||||||
|
rowSpan: index % 24 == 0 ? 24 : 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '可容纳人数（人）',
|
||||||
|
dataIndex: 'rs',
|
||||||
|
align: 'center',
|
||||||
|
render: (_, record, index) => {
|
||||||
|
return {
|
||||||
|
children: _,
|
||||||
|
props: {
|
||||||
|
rowSpan: index % 24 == 0 ? 24 : 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '场次',
|
||||||
|
align: 'center',
|
||||||
|
colSpan: 2,
|
||||||
|
render: (_, record, index) => {
|
||||||
|
return {
|
||||||
|
children: "00:00 ~ 24:00",
|
||||||
|
props: {
|
||||||
|
rowSpan: index % 24 == 0 ? 24 : 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dataIndex: "time",
|
||||||
|
align: 'right',
|
||||||
|
width: '60px',
|
||||||
|
colSpan: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '预约时间',
|
||||||
|
dataIndex: "info_time",
|
||||||
|
valueType: 'date',
|
||||||
|
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) {
|
||||||
|
columns.push({
|
||||||
|
title: <span>{ite.week}<br />{ite.date}</span>,
|
||||||
|
dataIndex: ite.id,
|
||||||
|
align: 'center',
|
||||||
|
ellipsis: true,
|
||||||
|
onCell: (record) => {
|
||||||
|
return {
|
||||||
|
style: record[ite.id]?.iskssj ? orange_bg : green_bg
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render: (_: any, record: any) => {
|
||||||
|
return {
|
||||||
|
children: record[ite.id]?.hymc,
|
||||||
|
props: {
|
||||||
|
rowSpan: record[ite.id]?.iskssj ? record[ite.id]?.hour : record[ite.id]?.hour ? 0 : 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
setTableColumns(columns);
|
||||||
|
setTableData(data.data);
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<Card title="评标室预约情况" bodyStyle={{ padding: '1px 24px 24px', height: window.innerHeight - 120, overflowY: 'auto' }}>
|
||||||
|
<ProTable<any>
|
||||||
|
columns={tableColumns}
|
||||||
|
actionRef={actionRef}
|
||||||
|
bordered
|
||||||
|
size='small'
|
||||||
|
dataSource={tableData}
|
||||||
|
rowKey="id"
|
||||||
|
search={false}
|
||||||
|
pagination={false}
|
||||||
|
options={false}
|
||||||
|
dateFormatter="string"
|
||||||
|
toolbar={{
|
||||||
|
title: (
|
||||||
|
<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>
|
||||||
|
),
|
||||||
|
actions: [
|
||||||
|
<Button key="yuyueconfirm" type="primary">
|
||||||
|
查看预约详情
|
||||||
|
</Button>,
|
||||||
|
<Button key="reserved" type="primary" style={{ background: '#f59a23', cursor: 'default', border: 'none' }}>
|
||||||
|
已预约
|
||||||
|
</Button>,
|
||||||
|
<Button key="no-appo" type="primary" style={{ background: '#4b7902', cursor: 'default', border: 'none' }}>
|
||||||
|
未预约
|
||||||
|
</Button>,
|
||||||
|
],
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{modalVisible && <MeetingReservation modalVisible={modalVisible} onCancel={() => setModalVisible(false)} />}
|
||||||
|
</Card >
|
||||||
|
);
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user