From ca37297a8e21b586f3319966484f4edaf9f6256c Mon Sep 17 00:00:00 2001 From: jl-zhoujl2 Date: Tue, 2 Aug 2022 17:17:20 +0800 Subject: [PATCH 1/3] 8.2 --- config/router.config.ts | 4 + .../components/MeetingReservation.tsx | 83 ++++ src/pages/AppointmentManage/index.tsx | 423 ++++++++++++++++++ 3 files changed, 510 insertions(+) create mode 100644 src/pages/AppointmentManage/components/MeetingReservation.tsx create mode 100644 src/pages/AppointmentManage/index.tsx diff --git a/config/router.config.ts b/config/router.config.ts index f1e96f5..5b18a69 100644 --- a/config/router.config.ts +++ b/config/router.config.ts @@ -111,6 +111,10 @@ export default [ }, ...home,//各角色主页 ...menuaZhaoBiao,//项目菜单所有路由 + { + path: '/AppointmentManage', + component: './AppointmentManage', + }, {//问卷调查 name: 'Questionnaire', icon: 'UnorderedListOutlined', diff --git a/src/pages/AppointmentManage/components/MeetingReservation.tsx b/src/pages/AppointmentManage/components/MeetingReservation.tsx new file mode 100644 index 0000000..00cd0bf --- /dev/null +++ b/src/pages/AppointmentManage/components/MeetingReservation.tsx @@ -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 = (props) => { + const { modalVisible, onCancel } = props; + const [form] = Form.useForm(); + const { Option } = Select; + //loading + const [loading, setLoading] = useState(false); + + const onFinish = (values: any) => { + console.log(values); + }; + + return ( + onCancel()} + centered + width={'70%'} + footer={null} + > + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + ); +}; + +export default MeetingReservation; diff --git a/src/pages/AppointmentManage/index.tsx b/src/pages/AppointmentManage/index.tsx new file mode 100644 index 0000000..1b7eb1c --- /dev/null +++ b/src/pages/AppointmentManage/index.tsx @@ -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[] = [ + { + 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(); + //表格列 + const [tableColumns, setTableColumns] = useState[]>([]); + //表格数据 + const [tableData, setTableData] = useState([]); + //预约弹窗 + const [modalVisible, setModalVisible] = useState(false); + useEffect(() => { + for (const ite of data.week) { + columns.push({ + title: {ite.week}
{ite.date}, + 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 ( + + + columns={tableColumns} + actionRef={actionRef} + bordered + size='small' + dataSource={tableData} + rowKey="id" + search={false} + pagination={false} + options={false} + dateFormatter="string" + toolbar={{ + title: ( + + + + + + ), + actions: [ + , + , + , + ], + }} + /> + {modalVisible && setModalVisible(false)} />} + + ); +}; \ No newline at end of file From ce82c1552eb0765a4b227b1b32cd25efc383e73b Mon Sep 17 00:00:00 2001 From: jl-zhoujl2 Date: Thu, 4 Aug 2022 10:45:22 +0800 Subject: [PATCH 2/3] 8.4 --- .../components/MeetingReservation.tsx | 42 +++- src/pages/AppointmentManage/index.tsx | 208 +++++++++++------- 2 files changed, 155 insertions(+), 95 deletions(-) diff --git a/src/pages/AppointmentManage/components/MeetingReservation.tsx b/src/pages/AppointmentManage/components/MeetingReservation.tsx index 00cd0bf..5b98474 100644 --- a/src/pages/AppointmentManage/components/MeetingReservation.tsx +++ b/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 }, - 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 = (props) => { @@ -23,6 +34,13 @@ const MeetingReservation: React.FC = (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 ( = (props) => { visible={modalVisible} onCancel={() => onCancel()} centered - width={'70%'} + width={600} footer={null} > -
+ - + - + - + - + - + - + diff --git a/src/pages/AppointmentManage/index.tsx b/src/pages/AppointmentManage/index.tsx index 1b7eb1c..4031d98 100644 --- a/src/pages/AppointmentManage/index.tsx +++ b/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 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,70 +293,84 @@ const data = { ] } -const columns: ProColumns[] = [ +const dataSource = [ { - title: '评标室名称', - dataIndex: 'name', - align: 'center', - render: (_, record, index) => { - return { - children: _, - props: { - rowSpan: index % 24 == 0 ? 24 : 0, - } - } - } + "id": "1", + "title": '集团第一评标室', + "rs": "10", }, { - title: '可容纳人数（人）', - dataIndex: 'rs', - align: 'center', - render: (_, record, index) => { - return { - children: _, - props: { - rowSpan: index % 24 == 0 ? 24 : 0, - } - } - } + "id": "2", + "title": '集团第二评标室', + "rs": "18", }, { - 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, - }, -]; + "id": "3", + "title": '集团第三评标室', + "rs": "29", + } +] -export default () => { +const ScreenTable = (props: { tableData: any[], tabColumns: any[], record: any }) => { + const { tableData, tabColumns, record } = props; const actionRef = useRef(); //表格列 const [tableColumns, setTableColumns] = useState[]>([]); - //表格数据 - const [tableData, setTableData] = useState([]); - //预约弹窗 - const [modalVisible, setModalVisible] = useState(false); + const columns: ProColumns[] = [ + { + 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: "07:00 ~ 18:00", + props: { + rowSpan: index % 24 == 0 ? 24 : 0, + } + } + } + }, + { + dataIndex: "time", + align: 'right', + width: '60px', + colSpan: 0, + }, + { + title: '预约时间', + dataIndex: "info_time", + valueType: 'date', + hideInTable: true, + }, + ]; useEffect(() => { - for (const ite of data.week) { + for (const ite of tabColumns) { columns.push({ title: {ite.week}
{ite.date}, dataIndex: ite.id, @@ -375,10 +392,17 @@ export default () => { }) } setTableColumns(columns); - setTableData(data.data); }, []); return ( - +
+ + + + columns={tableColumns} actionRef={actionRef} @@ -390,31 +414,49 @@ export default () => { pagination={false} options={false} dateFormatter="string" - toolbar={{ - title: ( - - - - - - ), - actions: [ - , - , - , - ], + /> +
+ ) +} + +export default () => { + //预约弹窗 + const [modalVisible, setModalVisible] = useState(false); + const [expandedRowKeys, setExpandedRowKeys] = useState([]); + + return ( + +
+ + + + + +
已预约
+
未预约
+ +
+ + rowKey="id" + expandable={{ + expandedRowKeys, onExpandedRowsChange: setExpandedRowKeys, + }} + dataSource={dataSource} + toolBarRender={false} + metas={{ + title: { + render: (_: any, record: any) => setExpandedRowKeys(keys => keys.includes(record.id) ? [] : [record.id])}>{record.title}, + }, + subTitle: { + render: (_: any, record: any) => `可容纳人数：${record.rs}人`, + }, + description: { + render: (_: any, record: any) => , + }, }} /> {modalVisible && setModalVisible(false)} />} From 7d3372342a392adb8d209a13c8057daac5285e78 Mon Sep 17 00:00:00 2001 From: jl-zhoujl2 Date: Thu, 25 Aug 2022 14:09:42 +0800 Subject: [PATCH 3/3] =?UTF-8?q?8.25=20=E6=8E=A5=E5=8F=A3=E8=81=94=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ElecBidEvaluation/MeetingReservation.tsx | 211 +++++++ src/components/ElecBidEvaluation/service.ts | 29 + .../components/MeetingReservation.tsx | 101 ---- src/pages/AppointmentManage/index.tsx | 519 +++++------------- src/pages/AppointmentManage/service.ts | 21 + 5 files changed, 408 insertions(+), 473 deletions(-) create mode 100644 src/components/ElecBidEvaluation/MeetingReservation.tsx create mode 100644 src/components/ElecBidEvaluation/service.ts delete mode 100644 src/pages/AppointmentManage/components/MeetingReservation.tsx create mode 100644 src/pages/AppointmentManage/service.ts diff --git a/src/components/ElecBidEvaluation/MeetingReservation.tsx b/src/components/ElecBidEvaluation/MeetingReservation.tsx new file mode 100644 index 0000000..a4f6e8b --- /dev/null +++ b/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 = (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(false); + //初始化 + const [skeleing, setSkeleing] = useState(false); + //窗口状态 0-新建 1-编辑 2-查看 + const [modalStatus, setModalStatus] = useState(status); + //评标室类型 meeting-会议室 eval-评标室 + const [meetType, setMeetType] = useState("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: , + 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 ( + onCancel()} + centered + width={600} + footer={skeleing ? [] : [ + , + , + , + , + ]} + > + + + + {meetType == "meeting" ? ( + <> + + + + + +