Merge branch '20220802-评标室预约情况' of http://10.124.128.2:8888/eshop/fe_service_ebtp_frontend into master-电子评标室-预约管理-liuh
This commit is contained in:
517612449@qq.com
211
src/components/ElecBidEvaluation/MeetingReservation.tsx
Normal file
211
src/components/ElecBidEvaluation/MeetingReservation.tsx
Normal file
@ -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;
|
||||
29
src/components/ElecBidEvaluation/service.ts
Normal file
29
src/components/ElecBidEvaluation/service.ts
Normal file
@ -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',
|
||||
});
|
||||
}
|
||||
240
src/pages/AppointmentManage/index.tsx
Normal file
240
src/pages/AppointmentManage/index.tsx
Normal file
@ -0,0 +1,240 @@
|
||||
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, Tag } from 'antd';
|
||||
import React, { ReactText, useEffect, useState } from 'react';
|
||||
import { useRef } from 'react';
|
||||
import MeetingReservation from '@/components/ElecBidEvaluation/MeetingReservation';
|
||||
import { getRecordData, getSiteList } from './service';
|
||||
import { isEmpty } from '@/utils/CommonUtils';
|
||||
|
||||
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 ScreenTable = (props: { record: any, onCellClick: (id: any) => void, refresh: number }) => {
|
||||
const { record, onCellClick, refresh } = props;
|
||||
const actionRef = useRef<ActionType>();
|
||||
//表格列
|
||||
const [tableColumns, setTableColumns] = useState<ProColumns<any>[]>([]);
|
||||
//表格数据
|
||||
const [tableData, setTableData] = useState<any[]>([]);
|
||||
//星期偏移量
|
||||
const offset = useRef<number>(0);
|
||||
|
||||
//表格列拼接
|
||||
const columnsSplice = (weeksData: any[]) => {
|
||||
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: "07:00 ~ 18:00",
|
||||
props: {
|
||||
rowSpan: index % 24 == 0 ? 24 : 0,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
dataIndex: "time",
|
||||
align: 'right',
|
||||
width: '100px',
|
||||
colSpan: 0,
|
||||
},
|
||||
{
|
||||
title: '预约时间',
|
||||
dataIndex: "info_time",
|
||||
valueType: 'date',
|
||||
hideInTable: true,
|
||||
},
|
||||
];
|
||||
for (const ite of weeksData) {
|
||||
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,
|
||||
onClick: record[ite.id]?.iskssj ? () => onCellClick(record[ite.id]?.id) : void 0,
|
||||
}
|
||||
},
|
||||
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);
|
||||
}
|
||||
|
||||
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>
|
||||
{tableData.length > 0 && (
|
||||
<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" onClick={() => weekChange("1")}>
|
||||
下一周
|
||||
</Button>
|
||||
</Space>
|
||||
)}
|
||||
<ProTable<any>
|
||||
columns={tableColumns}
|
||||
actionRef={actionRef}
|
||||
bordered
|
||||
size='small'
|
||||
dataSource={tableData}
|
||||
rowKey="time"
|
||||
search={false}
|
||||
pagination={false}
|
||||
options={false}
|
||||
dateFormatter="string"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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={() => createMeet()}>
|
||||
预约
|
||||
</Button>
|
||||
<Button key="yuyueconfirm" onClick={() => viewMeetContent()}>
|
||||
查看预约详情
|
||||
</Button>
|
||||
</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>
|
||||
</div>
|
||||
<ProList<any>
|
||||
rowKey="id"
|
||||
expandable={{
|
||||
expandedRowKeys, onExpandedRowsChange: setExpandedRowKeys,
|
||||
}}
|
||||
dataSource={siteListData}
|
||||
toolBarRender={false}
|
||||
metas={{
|
||||
title: {
|
||||
render: (_: any, record: any) => <span onClick={() => setExpandedRowKeys(keys => keys.includes(record.id) ? [] : [record.id])}>{record.areaName}</span>,
|
||||
},
|
||||
subTitle: {
|
||||
render: (_: any, record: any) => `可容纳人数：${isEmpty(record.areaNumber) ? '' : record.areaNumber}人`,
|
||||
},
|
||||
description: {
|
||||
render: (_: any, record: any) => <ScreenTable record={record} onCellClick={viewMeet} refresh={refresh} />,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{modalVisible && <MeetingReservation modalVisible={modalVisible} onCancel={() => { setModalVisible(false); getSiteListData("1") }} roomList={siteListData} status={meetStatus} meetId={meetId} onSubmit={() => { setModalVisible(false); setRefresh(refresh => refresh + 1) }} />}
|
||||
</Card >
|
||||
);
|
||||
};
|
||||
21
src/pages/AppointmentManage/service.ts
Normal file
21
src/pages/AppointmentManage/service.ts
Normal file
@ -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,
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user