增加预约查看组件
This commit is contained in:
@ -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做为 代替原本的0,1
|
//使用接口返回值的id做为 代替原本的0,1
|
||||||
@ -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
|
||||||
|
Reference in New Issue
Block a user