增加预约查看组件

src/pages/ElecEvalReserve/index.tsx

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