8.25 接口联调

This commit is contained in:
jl-zhoujl2
2022-08-25 14:09:42 +08:00
parent ce82c1552e
commit 7d3372342a
5 changed files with 408 additions and 473 deletions

View File

@ -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;

View File

@ -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 = {
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 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 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 columns: ProColumns<any>[] = [
{
title: '评标室名称',
dataIndex: 'name',
align: 'center',
render: (_, record, index) => {
return {
children: _,
props: {
rowSpan: index % 24 == 0 ? 24 : 0,
//表格数据
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: '可容纳人数(人)',
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,
},
{
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 tabColumns) {
},
{
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,
@ -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' }}>
<Button key="last-week" size='small' type="primary">
</Button>
<Button key="after-week" size='small' type="primary">
</Button>
</Space>
{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="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 >
);
};

View 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,
});
}