增加预约查看组件

This commit is contained in:
517612449@qq.com
2022-08-25 17:49:48 +08:00
parent 28632ac119
commit a68735b641

View File

@ -1,16 +1,24 @@
import React, { useState, useRef, useEffect } from 'react'; import React, { useState, useRef, useEffect } from 'react';
import { Button, Tabs, PageHeader,message } from 'antd'; import { Button, Tabs, message, Card } from 'antd';
import ProTable, { ActionType } from '@ant-design/pro-table'; import ProTable, { ActionType } from '@ant-design/pro-table';
import { reserveList, roomList, cancelReserve } from './service'; import { reserveList, roomList, cancelReserve } from './service';
import '@/assets/ld_style.less'; import '@/assets/ld_style.less';
import { getURLInformation, isNotEmpty } from '@/utils/CommonUtils'; import { getURLInformation, isNotEmpty } from '@/utils/CommonUtils';
import MeetingReservation from '@/components/ElecBidEvaluation/MeetingReservation';
const { TabPane } = Tabs; const { TabPane } = Tabs;
const Index: React.FC<{}> = () => { const Index: React.FC<{}> = () => {
const checkRelationRef = useRef<ActionType>(); //操作数据后刷新列表 const checkRelationRef = useRef<ActionType>(); //操作数据后刷新列表
const [areaNameList, setAreaNameList] = useState<any>();
const [areaList, setAreaList] = useState<any>();
//预约id
const [meetId, setMeetId] = useState<string>("");
//预约弹窗
const [modalVisible, setModalVisible] = useState<boolean>(false);
//刷新参数
const [refresh, setRefresh] = useState<number>(0);
const [areaNameList, setAreaNameList] = useState({});
/*拉取数据*/ /*拉取数据*/
useEffect(() => { useEffect(() => {
initAreaNameList(); initAreaNameList();
@ -27,6 +35,7 @@ const Index: React.FC<{}> = () => {
// areaNameList.push(tempDetail); // areaNameList.push(tempDetail);
// }) // })
let areaNameList = {}; let areaNameList = {};
setAreaList(res.data);
//将拿到的返回值遍历 //将拿到的返回值遍历
res.data.map((item: { id: string | number; areaName: any; })=>{ res.data.map((item: { id: string | number; areaName: any; })=>{
//使用接口返回值的id做为 代替原本的01 //使用接口返回值的id做为 代替原本的01
@ -39,18 +48,23 @@ const Index: React.FC<{}> = () => {
} }
}) })
}; };
//查看预约
const viewMeet = (id: any) => {
setMeetId(id);
setModalVisible(true);
}
/** /**
* 取消预约 * 取消预约
* @param record * @param record
*/ */
const cancel = async (record: any) => { const cancel = async (record: any) => {
cancelReserve(record.id).then(res => { cancelReserve(record.id).then(res => {
if (res.code == 200 && res.data) { if (res.code == 200 && res.data) {
message.success('预约取消成功'); message.success('预约取消成功');
} }
}); });
}; };
const current = getURLInformation('current'); const current = getURLInformation('current');
const columns: any = [ const columns: any = [
@ -64,8 +78,7 @@ const Index: React.FC<{}> = () => {
}, },
{ {
title: '评标室', title: '评标室',
dataIndex: 'areaName', dataIndex: 'areaId',
valueType: 'select',
valueEnum: areaNameList, valueEnum: areaNameList,
search: true, search: true,
width: '10%', width: '10%',
@ -133,6 +146,13 @@ const Index: React.FC<{}> = () => {
search: false, search: false,
width: '3%', width: '3%',
}, },
{
title: '评标室',
dataIndex: 'areaId',
valueEnum: areaNameList,
search: true,
width: '10%',
},
{ {
title: '会议名称', title: '会议名称',
dataIndex: 'meetingName', dataIndex: 'meetingName',
@ -148,12 +168,14 @@ const Index: React.FC<{}> = () => {
{ {
title: '预约开始时间', title: '预约开始时间',
dataIndex: 'reserveStartDate', dataIndex: 'reserveStartDate',
valueType: 'dateTime',
search: true, search: true,
width: '10%', width: '10%',
}, },
{ {
title: '预约结束时间', title: '预约结束时间',
dataIndex: 'reserveEndDate', dataIndex: 'reserveEndDate',
valueType: 'dateTime',
search: true, search: true,
width: '10%', width: '10%',
}, },
@ -177,6 +199,9 @@ const Index: React.FC<{}> = () => {
return ( return (
<> <>
<Button type="text" onClick={() => viewMeet(record.id)} danger>
</Button>
<Button hidden={ record.status > 0 } type="text" onClick={() => cancel(record)} danger> <Button hidden={ record.status > 0 } type="text" onClick={() => cancel(record)} danger>
</Button> </Button>
@ -191,11 +216,11 @@ const Index: React.FC<{}> = () => {
return ( return (
<> <>
<PageHeader title="预约管理" />
<Card title="预约管理">
<Tabs defaultActiveKey="1"> <Tabs defaultActiveKey="1">
<TabPane tab="评标预约" key="1"> <TabPane tab="评标预约" key="1">
<ProTable {areaNameList && <ProTable
actionRef={checkRelationRef} actionRef={checkRelationRef}
className="proSearch" className="proSearch"
columns={columns} columns={columns}
@ -246,6 +271,8 @@ const Index: React.FC<{}> = () => {
</Button>, </Button>,
]; ];
}, },
labelWidth: 'auto',
span: 4,
}} }}
pagination={{ pagination={{
defaultCurrent: isNotEmpty(current) ? Number(current) : 1, defaultCurrent: isNotEmpty(current) ? Number(current) : 1,
@ -253,14 +280,18 @@ const Index: React.FC<{}> = () => {
showSizeChanger: false, showSizeChanger: false,
}} //默认显示条数 }} //默认显示条数
toolBarRender={false} toolBarRender={false}
/> />}
</TabPane> </TabPane>
<TabPane tab="会议预约" key="2"> <TabPane tab="会议预约" key="2">
<ProTable {areaNameList && <ProTable
className="proSearch" className="proSearch"
columns={otherColumns} columns={otherColumns}
params={{ reserveType: 'meeting' }} params={{ reserveType: 'meeting' }}
size="small" size="small"
search={{
labelWidth: 'auto',
span: 4,
}}
request={async (params) => request={async (params) =>
await reserveList(params).then((res) => { await reserveList(params).then((res) => {
if (res.code == 200) { if (res.code == 200) {
@ -286,10 +317,14 @@ const Index: React.FC<{}> = () => {
showSizeChanger: false, showSizeChanger: false,
}} //默认显示条数 }} //默认显示条数
toolBarRender={false} toolBarRender={false}
/> />}
</TabPane> </TabPane>
</Tabs> </Tabs>
{modalVisible && <MeetingReservation modalVisible={modalVisible} onCancel={() => { setModalVisible(false); }} roomList={areaList} status={'2'} meetId={meetId} onSubmit={() => { setModalVisible(false); setRefresh(refresh => refresh + 1) }} />}
</Card>
</> </>
); );
}; };
export default Index export default Index