8.4
This commit is contained in:
jl-zhoujl2
@ -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 },
|
||||
wrapperCol: { span: 17 },
|
||||
labelCol: { span: 7 },
|
||||
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>
|
||||
|
||||
@ -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 React, { useEffect, useState } from 'react';
|
||||
import { Button, Card, Space, Tag } from 'antd';
|
||||
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,7 +293,30 @@ const data = {
|
||||
]
|
||||
}
|
||||
|
||||
const columns: ProColumns<any>[] = [
|
||||
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: '评标室名称',
|
||||
dataIndex: 'name',
|
||||
@ -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,
|
||||
}
|
||||
@ -342,18 +368,9 @@ const columns: ProColumns<any>[] = [
|
||||
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) {
|
||||
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>
|
||||
),
|
||||
actions: [
|
||||
<Button key="yuyueconfirm" type="primary">
|
||||
<Button key="yuyueconfirm">
|
||||
查看预约详情
|
||||
</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>,
|
||||
],
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<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>
|
||||
</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)} />}
|
||||
|
||||
Reference in New Issue
Block a user