添加预定完成

Signed-off-by: cellee <893264950@qq.com>

src/components/OnTime/OnTime.tsx

+import React from 'react';
+import { Select } from 'antd';
+const Option = Select.Option;
+
+const OnTime = (porps: any) => {
+  // placeholder 默认显示  disabled  是否禁止   openSelect  选中函数  limit 限制时间
+  let { placeholder, disabled, openSelect, limit } = porps;
+
+  // 生成数组 -- 时间
+  const createArray = (num: any) => {
+    var arr = [];
+    for (let i = 1; i < num; i++) {
+      if (i < 10) {
+        arr[i] = `0${i}`;
+      } else {
+        arr[i] = i;
+      }
+    }
+    return arr;
+  };
+
+  //小时
+  const hourS = createArray(24).map((item) =>
+    // 处理限制时间
+    limit ? (
+      <Option value={item + ':00'} key={item} disabled={Times(item, limit)}>{`${item}:00`}</Option>
+    ) : (
+      <Option value={item + ':00'} key={item}>{`${item}:00`}</Option>
+    ),
+  );
+
+  // 字符串截取判断
+  function Times(item: any, openTime: string) {
+    if (
+      parseInt(item) >= parseInt(openTime.slice(0, 2)) &&
+      parseInt(item) <= parseInt(openTime.slice(6, 8))
+    ) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  return (
+    <>
+      <Select
+        style={{ width: 140 }}
+        placeholder={placeholder}
+        disabled={disabled}
+        onSelect={openSelect}
+      >
+        {hourS}
+      </Select>
+    </>
+  );
+};
+
+export default OnTime;

src/models/CommunityManagement/FacilityBookings.ts

@@ -29,7 +29,8 @@ export default {
 
     // 不知道前面是干嘛的，自增公告列表
     NoticeList: [],
-    imgList:[{},{},{},{},{}]     // 设施图片列表
+    imgList: [{}, {}, {}, {}, {}],     // 设施图片列表
+    resultTime:null,  // 设施已预约时间段
   },
 
   reducers: {
@@ -65,8 +66,11 @@ export default {
       return state
     },
 
-    returnPage(state, { Data,DataPage,DataSave}) {
-      return { ...state, Data,DataPage,DataSave };
+    // returnPage(state, { Data,DataPage,DataSave}) {
+    //   return { ...state, Data,DataPage,DataSave };
+    // },
+    returnPage(state, { Data }) {
+      return { ...state, Data};
     },
     returnPage2(state, { Data2 }) {
       return { ...state, Data2 };
@@ -77,7 +81,7 @@ export default {
     returnDataSave(state, { DataSave }) {
       return { ...state, DataSave};
     },
-    DataSaveDetail(state, { DataSaveDetail,}) {
+    DataSaveDetail(state, { DataSaveDetail, }) {
      return  { ...state, DataSaveDetail };
     },
     returnSource(state, { sourceData }) {
@@ -88,7 +92,12 @@ export default {
     },
     returnResult(state, { Result }) {
       return { ...state, Result };
-    }
+    },
+
+    // 时间
+    onResult(state, { resultTime }) {
+      return { ...state, resultTime };
+    },
 
   },
 
@@ -122,28 +131,22 @@ export default {
         // console.log('===========================')  
         // console.log(playload)  
         switch (playload.index) {
-          case 0:
-          case 9:
-            {
-              let Data = {data:resp.data.list,total:resp.data.page} ; 
-              yield put({ type: 'returnPage', Data });
+          case 1:
+          {
+            let Data3 = resp.data;  
+            if (JSON.stringify(Data3) == "{}") {
+              Data3 = false
+              // 提示小区没有设施
+              message.error('There Are No Facilities In The Community !');
             }
-            break;
-            case 1:
-            {
-              let Data3 = resp.data;  
-              if (JSON.stringify(Data3) == "{}") {
-                Data3 = false
-                // 提示小区没有设施
-                message.error('There Are No Facilities In The Community !');
-              }
-              yield put({ type: 'returnPage3', Data3});
-                
-            }break;
+            yield put({ type: 'returnPage3', Data3});
+              
+          }break;
+          case 2: {
             
-          case 2:{
             let DataSaveDetail = resp.data; 
             yield put({ type: 'DataSaveDetail', DataSaveDetail });
+
           } break;
           case 3:
           case 4: 
@@ -188,12 +191,29 @@ export default {
             let Data2 = {data:resp.data.list,total:resp.data.page}; 
             yield put({ type: 'returnPage2', Data2, });            
           } break;
+          case 0:
+          case 9: {
+            let Data = {data:resp.data.list,total:resp.data.page} ; 
+            yield put({ type: 'returnPage', Data });
+          }break;
+
 
           // 自增公告列表
           case 25:{
             let NoticeList = resp.data;
             yield put({ type: 'retuNotice',payload:NoticeList,  });  
-          }
+          } break;
+          // 时间查询
+          case 50:{
+            let resultTime = [];
+            let data = resp.data;
+            for (var i = 0; i < data.length; i += 2){ 
+              let a = data[i] + '-' + data[i+1];
+              resultTime.push(a);
+            }
+            console.log(resultTime)
+            yield put({ type: 'onResult', resultTime });  
+          }break;
         }
 
       }

src/pages/CommunityManagement/FacilityBookings/BookingDetail.tsx

-import React, { useState, useEffect,useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import styles from './css/index.less';
-import { Input ,Menu,Table,Space,Form,Radio, Modal,Row,Col, Button, message } from 'antd';
+import './css/index.less';
+import {
+  Input,
+  Descriptions,
+  Spin,
+  Space,
+  Form,
+  Radio,
+  Modal,
+  Row,
+  Col,
+  Button,
+  message,
+} from 'antd';
 
 import { Link, useIntl, connect, Dispatch } from 'umi';
 
-
 import TitleBack from '../../../components/TitleBack/TitleBack';
 import Line from '../../../components/Line/Line';
 import { timestampToTime3 } from '../../../utils/time';
 import TextArea from 'antd/lib/input/TextArea';
 
+import { getUrlLast } from '../../../utils/string';
+const BookingDetail = (props: any) => {
+  const { dispatch, location, DataSave, DataSaveDetail, token, load } = props;
 
-import {getUrlLast} from '../../../utils/string';
-const BookingDetail = (props:any) => {
+  const RA = (index: any, values: any) => {
+    dispatch({ type: 'FacilityBookings/RA', playload: { index: index, body: values } });
+  };
 
-  const { dispatch,location, DataSave,DataSaveDetail,token} = props;
-  const RA = (index:any,values: any) => { dispatch({ type: 'FacilityBookings/RA', playload: { index: index, body: values } }) };
-  
   useEffect(() => {
-    console.log(DataSave.id)
-    RA(2,{ accountCategoriesId: DataSave.id })
-  }, []); 
-
+    if (DataSave != null) {
+      RA(2, { accountCategoriesId: DataSave.id });
+    }
+  }, [DataSave]);
 
   // const statusDes = ["全部", "已申请", "已预订", "已使用", "已取消", "已完成"]
-  const statusDes = ["All", "Applied", "Reserved", "Used", "Cancelled", "Completed"]
+  const statusDes = ['All', 'Applied', 'Reserved', 'Used', 'Cancelled', 'Completed'];
 
-  const [modalVisible,setModalVisible]=useState(false)
-  const [modalItem,setModalIteme]=useState({title:"",tab:1})
-  const [backFeeFlag, setBackFeeFlag] = useState(false)
-  const [curbackFee, setCurBackFee] = useState(0)
+  const [modalVisible, setModalVisible] = useState(false);
+  const [modalItem, setModalIteme] = useState({ title: '', tab: 1 });
+  const [backFeeFlag, setBackFeeFlag] = useState(false);
+  const [curbackFee, setCurBackFee] = useState(0);
   useEffect(() => {
     if (DataSaveDetail != null) {
-      setCurBackFee(DataSaveDetail.marginFee)
+      setCurBackFee(DataSaveDetail.marginFee);
     }
-  }, [DataSaveDetail])
-  
-  const radioStyle = {display: 'block',height: '30px',lineHeight: '30px'}
-        
+  }, [DataSaveDetail]);
+
+  const radioStyle = { display: 'block', height: '30px', lineHeight: '30px' };
+
   const formRef = useRef(null);
-  const backFee = (e:any) => {      
-    if (e.target.value== 1) {
-      setBackFeeFlag(false)
-      setCurBackFee(DataSaveDetail.marginFee)
+  const backFee = (e: any) => {
+    if (e.target.value == 1) {
+      setBackFeeFlag(false);
+      setCurBackFee(DataSaveDetail.marginFee);
     } else {
-      setBackFeeFlag(true)
+      setBackFeeFlag(true);
     }
-  } 
+  };
 
   const onFinish = (values: any) => {
-    var val = values
-    if (val.backMarginFeeReason== null) {
-      message.error("Back marginFee reason is empty!",3)
+    var val = values;
+    if (val.backMarginFeeReason == null) {
+      message.error('Back marginFee reason is empty!', 3);
     } else {
       var RAVAL = {
         accountCategoriesId: DataSave.id,
         backMarginFee: curbackFee.toString(),
         backMarginFeeReason: val.backMarginFeeReason,
         accountName: DataSave.accountName,
-        backFeeStatus: curbackFee == DataSaveDetail.marginFee ? "0" : "1",
-        marginFee: (DataSaveDetail.marginFee).toString()
-      }
-    
-      console.log(RAVAL)
-      RA(3, RAVAL)
+        backFeeStatus: curbackFee == DataSaveDetail.marginFee ? '0' : '1',
+        marginFee: DataSaveDetail.marginFee.toString(),
+      };
+
+      console.log(RAVAL);
+      RA(3, RAVAL);
     }
   };
-  const onFinishFailed = (errorInfo: any) => { console.log('Failed:', errorInfo) };
-  
-  const getBackMarginFee = (e:any) => {
-    setCurBackFee(e.target.value)
-  }
+  const onFinishFailed = (errorInfo: any) => {
+    console.log('Failed:', errorInfo);
+  };
+
+  const getBackMarginFee = (e: any) => {
+    setCurBackFee(e.target.value);
+  };
   const makeFee = () => {
-    setModalIteme({title:"Deposit And Fee",tab:2})
-    setModalVisible(true)   
-  }
+    setModalIteme({ title: 'Deposit And Fee', tab: 2 });
+    setModalVisible(true);
+  };
   const showModal = () => {
-    setModalIteme({title:"Cancel Reservation",tab:1})
-    setModalVisible(true)    
+    setModalIteme({ title: 'Cancel Reservation', tab: 1 });
+    setModalVisible(true);
   };
-  const handleOk = (e:any) => {
-    setModalVisible(false)
+  const handleOk = (e: any) => {
+    setModalVisible(false);
     if (modalItem.tab == 1) {
       var RAVAL = {
         accountCategoriesId: DataSave.id,
         userToken: token,
-      }
-      RA(5, RAVAL)
+      };
+      RA(5, RAVAL);
     } else {
       var RAVAL2 = {
         accountCategoriesId: DataSave.id,
         accountName: DataSave.accountName,
-        managerFee:(DataSaveDetail.managerFee).toString(),
-        marginFee:(DataSaveDetail.marginFee).toString()
-      }
-      RA(4,RAVAL2)
+        managerFee: DataSaveDetail.managerFee.toString(),
+        marginFee: DataSaveDetail.marginFee.toString(),
+      };
+      RA(4, RAVAL2);
     }
   };
-  const handleCancel = (e:any) => {
-    setModalVisible(false)
-  }
+  const handleCancel = (e: any) => {
+    setModalVisible(false);
+  };
   return (
-    <div className={styles.base}>
-      
-      <TitleBack title={"View Facility Bookings"} url={getUrlLast(location.pathname)+'?Facility=false'}/>
-
-      <Row gutter={8}>
-        <Col>Booking Status</Col><Col span={2}>{statusDes[DataSave.status]}</Col>
-        <Col>Order Time</Col><Col span={2}>{timestampToTime3(DataSave.createTime.time)}</Col>
-      </Row>
-      <Line />
-      <Row gutter={8}>
-        <Col>Service Community</Col><Col span={3}>{DataSave.communityName}</Col>
-        <Col>Booking Facilities</Col><Col span={3}>{DataSave.facilityTitle}</Col>
-        <Col>Booking Time</Col><Col span={3}>{DataSave.subscribeDate}</Col>
-        <Col span={3}>{DataSave.subscribeTime}</Col>
-      </Row>
-        
-      <Row gutter={8} style={{marginTop:16}}>
-        <Col>User Name</Col><Col span={3}>{DataSave.accountName}</Col>
-        <Col>Contact Number</Col><Col span={3}>{DataSave.accountPhone}</Col>
-        <Col>Unit</Col>
-        <Col span={3}>{DataSave.buildNumber}# {DataSave.floorNumber}-{DataSave.roomNumber}</Col>
-      </Row>
-      <Line />
-      {
-        (DataSaveDetail != null && DataSave.status==1 &&DataSaveDetail.managerFee>0)?
-        <>
-        <Row gutter={8} style={{ marginTop: 16 }}>
-          <Col>Management Fee Required</Col><Col span={2}>{DataSaveDetail.managerFee}</Col>
-        </Row>
-        <Row gutter={8} style={{ marginTop: 16 }}>
-          <Col>Deposit Required</Col><Col span={2}>{DataSaveDetail.marginFee}</Col>
-        </Row>
-      <div  style={{marginTop:16}}>
-      <Button type="primary" onClick={makeFee}>Pay</Button>
-      </div>
-        <Line />
-        </>:null          
-      }
-
-      {
-        (DataSaveDetail != null&&DataSave.marginFeeStatus == 1&&DataSaveDetail.managerFee>0) ?
-          <>
-            <Form ref={formRef} name="basic2" onFinish={onFinish} onFinishFailed={onFinishFailed} >             
-          <Row gutter={8} style={{ marginTop: 16 }}>
-              <Col>已交管理费</Col><Col span={2}>{DataSaveDetail.managerFee}</Col>
-              <Col>已交押金</Col><Col span={2}>{DataSaveDetail.marginFee}</Col>
-            </Row>
-
-              <div style={{ marginTop: 16 }}>             
+    <>
+      {DataSave != null ? (
+        <Spin spinning={load}>
+          <div className={styles.base}>
+            <TitleBack
+              title={'View Facility Bookings'}
+              url={getUrlLast(location.pathname) + '?Facility=false'}
+            />
+            <Descriptions>
+              <Descriptions.Item label="Booking Status">
+                {statusDes[DataSave.status]}
+              </Descriptions.Item>
+              <Descriptions.Item label="Order Time">
+                {timestampToTime3(DataSave.createTime.time)}
+              </Descriptions.Item>
+            </Descriptions>
+
+            <hr />
+
+            <Descriptions>
+              <Descriptions.Item label="Service Community">
+                {DataSave.communityName}
+              </Descriptions.Item>
+              <Descriptions.Item label="Booking Facilities">
+                {DataSave.facilityTitle}
+              </Descriptions.Item>
+              <Descriptions.Item label="Booking Time">
+                {DataSave.subscribeDate}-{DataSave.subscribeTime}
+              </Descriptions.Item>
+              <Descriptions.Item label="User Name">{DataSave.accountName}</Descriptions.Item>
+              <Descriptions.Item label="Contact Number">{DataSave.accountPhone}</Descriptions.Item>
+              <Descriptions.Item label="Unit">
+                {DataSave.buildNumber}# {DataSave.floorNumber}-{DataSave.roomNumber}
+              </Descriptions.Item>
+            </Descriptions>
+
+            <hr />
+
+            {DataSaveDetail != null && DataSave.status == 1 && DataSaveDetail.managerFee > 0 ? (
+              <>
+                <Row gutter={8} style={{ marginTop: 16 }}>
+                  <Col>Management Fee Required</Col>
+                  <Col span={2}>{DataSaveDetail.managerFee}</Col>
+                </Row>
+                <Row gutter={8} style={{ marginTop: 16 }}>
+                  <Col>Deposit Required</Col>
+                  <Col span={2}>{DataSaveDetail.marginFee}</Col>
+                </Row>
+                <div style={{ marginTop: 16 }}>
+                  <Button type="primary" onClick={makeFee}>
+                    Pay
+                  </Button>
+                </div>
+                <Line />
+              </>
+            ) : null}
+            {DataSaveDetail != null &&
+            DataSave.marginFeeStatus == 1 &&
+            DataSaveDetail.managerFee > 0 ? (
+              <>
+                <Form
+                  ref={formRef}
+                  name="basic2"
+                  onFinish={onFinish}
+                  onFinishFailed={onFinishFailed}
+                >
+                  <Row gutter={8} style={{ marginTop: 16 }}>
+                    <Col>已交管理费</Col>
+                    <Col span={2}>{DataSaveDetail.managerFee}</Col>
+                    <Col>已交押金</Col>
+                    <Col span={2}>{DataSaveDetail.marginFee}</Col>
+                  </Row>
+
+                  <div style={{ marginTop: 16 }}>
                     <Radio.Group onChange={backFee} defaultValue={1}>
-                      <Radio value={1} style={radioStyle}>全额退还</Radio>                                                           
-                      <Radio value={2} style={radioStyle}>部分退还 {backFeeFlag ?<><Input onChange={getBackMarginFee} style={{ width: 80 }} /> $</>:null}</Radio>                                                                       
-                </Radio.Group>                  
-            </div>
-
-            {
-              backFeeFlag ?
-              <div style={{ marginTop: 16 }}> 
-                <Form.Item name="backMarginFeeReason"><TextArea autoSize={false} style={{ padding: 8, width: 400, height: 80 }} placeholder="Reasons for partial refund of deposit..."></TextArea></Form.Item>
-               </div>
-              :null
-            }
-          <div style={{marginTop:16}}>
-            <Form.Item><Button type="primary" htmlType="submit">退还押金</Button></Form.Item>
+                      <Radio value={1} style={radioStyle}>
+                        全额退还
+                      </Radio>
+                      <Radio value={2} style={radioStyle}>
+                        部分退还{' '}
+                        {backFeeFlag ? (
+                          <>
+                            <Input onChange={getBackMarginFee} style={{ width: 80 }} /> $
+                          </>
+                        ) : null}
+                      </Radio>
+                    </Radio.Group>
+                  </div>
+
+                  {backFeeFlag ? (
+                    <div style={{ marginTop: 16 }}>
+                      <Form.Item name="backMarginFeeReason">
+                        <TextArea
+                          autoSize={false}
+                          style={{ padding: 8, width: 400, height: 80 }}
+                          placeholder="Reasons for partial refund of deposit..."
+                        ></TextArea>
+                      </Form.Item>
+                    </div>
+                  ) : null}
+                  <div style={{ marginTop: 16 }}>
+                    <Form.Item>
+                      <Button type="primary" htmlType="submit" loading={load}>
+                        退还押金
+                      </Button>
+                    </Form.Item>
+                  </div>
+                  <Line />
+                </Form>
+              </>
+            ) : null}
+            {DataSave.status == 1 || DataSave.status == 2 ? (
+              <Button onClick={showModal} loading={load}>
+                取消预约
+              </Button>
+            ) : null}
+            <Modal
+              okText="Yes"
+              cancelText="No"
+              title={modalItem.title}
+              visible={modalVisible}
+              onOk={handleOk}
+              onCancel={handleCancel}
+            >
+              {modalItem.tab == 1 ? (
+                <p>
+                  Are you sure you want to cancel the booking {DataSave.subscribeDate} ,
+                  {DataSave.subscribeTime}, {DataSave.facilityTitle}
+                </p>
+              ) : (
+                <p>
+                  Are you sure you confirm the payment of {DataSave.subscribeDate}{' '}
+                  {DataSave.subscribeTime} {DataSave.facilityTitle}
+                </p>
+              )}
+            </Modal>
           </div>
-          <Line />
-          </Form>
-          </>:null
-      }
-      
-      {
-        (DataSave.status == 1 || DataSave.status == 2) ?
-          <Button onClick={showModal}>取消预约</Button>
-          : null
-      }
-      
-      <Modal okText="Yes" cancelText="No" title={modalItem.title} visible={modalVisible} onOk={handleOk} onCancel={handleCancel}>  
-        {
-          modalItem.tab == 1 ?<p>Are you sure you want to cancel the booking {DataSave.subscribeDate} ,{DataSave.subscribeTime}, {DataSave.facilityTitle}</p>
-          :<p>Are you sure you confirm the payment of {DataSave.subscribeDate} {DataSave.subscribeTime} {DataSave.facilityTitle}</p>
-        }  
- 
-      </Modal>
-
-      
-    </div>
+        </Spin>
+      ) : null}
+    </>
   );
 };
 
-function mapStateToProps(state:any) {
-  const { DataSave,DataSaveDetail } = state.FacilityBookings;  
-  const { token } = state.login;  
+function mapStateToProps(state: any) {
+  const { DataSave, DataSaveDetail } = state.FacilityBookings;
+  const { token } = state.login;
+  const load =
+    typeof state.loading.models.FacilityBookings == 'undefined'
+      ? true
+      : state.loading.models.FacilityBookings;
   return {
     DataSave,
     DataSaveDetail,
-    token
+    token,
+    load,
   };
 }
 
 export default connect(mapStateToProps)(BookingDetail);
 
-
 // accountId: ""
 // accountName: "小文"
 // accountPhone: "15917568033"

src/pages/CommunityManagement/FacilityBookings/Bookings.tsx

@@ -12,7 +12,7 @@ import {
   Row,
   Col,
   message,
-  Result,
+  Select,
 } from 'antd';
 const { RangePicker } = TimePicker;
 
@@ -31,8 +31,10 @@ import { validateMessages } from '@/utils/params';
 import moment from 'moment';
 import { BookingsTip } from '@/utils/tip';
 
+import OnTime from '@/components/OnTime/OnTime';
+
 const Bookings = (props: any) => {
-  const { dispatch, Data3, Result, DataSave, token, load } = props;
+  const { dispatch, Data3, Result, DataSave, token, load, resultTime } = props;
 
   const RA = (index: any, values: any) => {
     dispatch({ type: 'FacilityBookings/RA', playload: { index: index, body: values } });
@@ -48,6 +50,7 @@ const Bookings = (props: any) => {
   };
 
   const [comminityValues, setComminityValues] = useState(null);
+  // 已选设施列表信息
   const [curString, setCurString] = useState({
     communityManagerFee: null,
     communityMargin: null,
@@ -56,10 +59,9 @@ const Bookings = (props: any) => {
   const [loading, setLoading] = useState(false);
   const formRef = useRef(null);
 
-  // 是否不可选
-  const [prohibit, setProhibit] = useState(true);
-
-  console.log(curString);
+  const [prohibit, setProhibit] = useState(true); // 输入框是否不可选
+  const [result, setResultTime] = useState(resultTime); // 已预约时间段
+  const [soltTime, setSoltTime] = useState(['', '']); // 已选时间
 
   useEffect(() => {
     if (DataSave != null) {
@@ -89,13 +91,24 @@ const Bookings = (props: any) => {
   // 选择小区监听是不是有值
   useEffect(() => {
     setLoading(false);
-    console.log(Data3);
     if (!Data3) {
       // 如果没有值 要把Data3 从 false  复原成  null   并提示
       dispatch({ type: 'FacilityBookings/returnPage3' });
+      // 再次把下方判断条件清空 和 禁用
+      setCurString({ communityManagerFee: null });
+      setProhibit(true);
+      setResultTime(null);
+      setSoltTime([]);
     }
   }, [Data3]);
 
+  // 监听 已选时间段
+  useEffect(() => {
+    if (resultTime != null) {
+      setResultTime(resultTime);
+    }
+  }, [resultTime]);
+
   const format = 'HH:mm';
 
   const checkParam = (values: any) => {
@@ -114,10 +127,16 @@ const Bookings = (props: any) => {
     return flag;
   };
 
+  // 保存提交
   const onFinish = (value: any) => {
     console.log('Success:');
     var tmp = value;
     console.log(value);
+    // 判断时间选择
+    if (soltTime.length < 2 || !soltTime[0]) {
+      message.error('Please Fill In The Appointment Period!');
+    }
+
     // tmp.categoriesId = null
     // tmp.facilitiesId = null
     // tmp.communityName = null
@@ -129,13 +148,9 @@ const Bookings = (props: any) => {
       tmp.categoriesName = value.categoriesName.categoriesName;
     }
     if (value.subscribeDate != null) {
-      tmp.subscribeDate = value.subscribeDate.format('YYYY-M-D');
+      tmp.subscribeDate = value.subscribeDate.format('YYYY-MM-DD');
     }
     if (value.reservedTimeList != null) {
-      tmp.reservedTimeList = [
-        value.reservedTimeList[0].format('HH:mm'),
-        value.reservedTimeList[1].format('HH:mm'),
-      ];
     }
     if (comminityValues != null) {
       tmp.communityName = comminityValues;
@@ -147,13 +162,15 @@ const Bookings = (props: any) => {
     if (tmp.accountName.length < 2) {
       message.error('User Name Should be limit 2~30!', 3);
     } else {
+      tmp.reservedTimeList = soltTime; // 预约时间
+      RA(11, tmp);
       //还差检测
-      if (checkParam(tmp)) {
-        console.log(tmp);
-        RA(11, tmp);
-      } else {
-        message.error('Error,Please finish it,not empty!', 3);
-      }
+      // if (checkParam(tmp)) {
+      //   console.log(tmp);
+      //   RA(11, tmp);
+      // } else {
+      //   message.error('Error,Please Finish It,Not Empty!', 3);
+      // }
     }
     // console.log(checkParam(tmp))
     // console.log(comminityValues)
@@ -162,12 +179,14 @@ const Bookings = (props: any) => {
   const RadioChoose = (e: any) => {
     Data3.map((item: any, index: any) => {
       item.categorieList.map((thing: any, i: any) => {
+        console.log(thing);
         if (thing.categoriesId == e.target.value.categoriesId) {
           setCurString({
             communityManagerFee: parseInt(item.communityManagerFee).toFixed(2),
             communityMargin: parseInt(item.communityMargin).toFixed(2),
             categoriesOpenTime: item.categoriesOpenTime,
-            id: item.facilitiesId,
+            categoriesId: thing.categoriesId,
+            facilitiesId: thing.facilitiesId,
           });
 
           // 选择后取消输入框禁止
@@ -184,9 +203,15 @@ const Bookings = (props: any) => {
   const getFacility = (values: any) => {
     SAClear();
     setComminityValues(values);
-    console.log(values);
     RA(1, { userToken: token, communityName: values });
     setLoading(true);
+    // 如果切换了小区 再次把下方判断的内容清空 和 禁用
+    setCurString({
+      communityManagerFee: null,
+    });
+    setProhibit(true);
+    setResultTime(null);
+    setSoltTime([]);
   };
 
   // 设置之前时间不能选择
@@ -197,6 +222,26 @@ const Bookings = (props: any) => {
   // 确认日期
   const confirmData = (value: any) => {
     console.log(value);
+    let data = {
+      categoriesId: curString.categoriesId,
+      facilitiesId: curString.facilitiesId,
+      subscribeDate: moment(value).format('YYYY-MM-DD'),
+    };
+
+    RA(50, data);
+  };
+
+  // 下拉选择
+  const startTimes = (value: any) => {
+    let s = soltTime;
+    s[0] = value;
+    setSoltTime(s);
+  };
+  // 结束时间
+  const endTimes = (value: any) => {
+    let s = soltTime;
+    s[1] = value;
+    setSoltTime(s);
   };
 
   return (
@@ -219,10 +264,10 @@ const Bookings = (props: any) => {
           {/* <Input.Search style={{ width: 200, height: 32 }} onSearch={getFacility} loading={loading} defaultValue={}/> */}
         </div>
       </div>
-      {Data3 ? (
+      {Data3 && Data3.length > 0 ? (
         <>
           <Form ref={formRef} name="basic" onFinish={onFinish} validateMessages={validateMessages}>
-            <div className={styles.box2}>
+            <div className="box2 required">
               <div className={styles.box2item1}>Facility Bookings : </div>
               <div className={styles.box2item2}>
                 <Form.Item name="categoriesName">
@@ -244,7 +289,7 @@ const Bookings = (props: any) => {
             </div>
             <div className={styles.line}></div>
 
-            <div className={styles.box3}>
+            <div className="box3 required">
               <div className={styles.box3item1}>User Name : </div>
               <div className={styles.box3item2}>
                 <Form.Item name="accountName" rules={BookingsTip[0]}>
@@ -267,7 +312,7 @@ const Bookings = (props: any) => {
               </div>
             </div>
 
-            <div className={styles.box4}>
+            <div className="box4 required">
               <div className={styles.box4item1}>Unit : </div>
               <div className="divbox4">
                 <Form.Item name="buildNumber" rules={BookingsTip[2]}>
@@ -285,7 +330,7 @@ const Bookings = (props: any) => {
             </div>
             <div className={styles.line}></div>
 
-            <div className={styles.box5}>
+            <div className="box5 required">
               <div className={styles.box5item1}>Booking Schedule : </div>
               <div className={styles.box5item2}>
                 <Row gutter={8}>
@@ -300,18 +345,47 @@ const Bookings = (props: any) => {
                     </Form.Item>
                   </Col>
                   <Col>
-                    <Form.Item name="reservedTimeList" rules={BookingsTip[6]}>
-                      <RangePicker
-                        placeholder={['Start Time', 'End Time']}
-                        format={format}
-                        disabled={prohibit}
-                      />
+                    <Form.Item label="Opening Hours" className="required">
+                      <Form.Item name="startTime" noStyle>
+                        <OnTime
+                          placeholder={'Start Time'}
+                          disabled={prohibit}
+                          limit={curString.categoriesOpenTime}
+                          openSelect={startTimes}
+                        />
+                      </Form.Item>
+                      <span className="diyspan">-</span>
+                      <Form.Item name="endTime" noStyle>
+                        <OnTime
+                          placeholder={'Closing Time'}
+                          disabled={prohibit}
+                          limit={curString.categoriesOpenTime}
+                          openSelect={endTimes}
+                        />
+                      </Form.Item>
                     </Form.Item>
                   </Col>
                 </Row>
               </div>
             </div>
-            {curString.communityManagerFee != null ? (
+
+            {/* 提示已选时间段 */}
+            {result != null && result.length > 0 ? (
+              <div className={styles.box3}>
+                <div className={styles.box3item1}>Reserved Time Period：</div>
+                <div className="boxdiyitem">
+                  {result.map((item: any, index: any) => {
+                    return (
+                      <span className="diyspan3" key={index}>
+                        {item}
+                      </span>
+                    );
+                  })}
+                </div>
+              </div>
+            ) : null}
+
+            {curString.communityManagerFee != null && Data3 ? (
               <>
                 <div className={styles.box6}>
                   <div className={styles.box6item1}>Management fee required : </div>
@@ -340,7 +414,8 @@ const Bookings = (props: any) => {
             <Button
               htmlType="submit"
               type="primary"
-              loading={false}
+              loading={load}
+              disabled={prohibit}
               style={{ width: 80, height: 32 }}
             >
               Submit
@@ -353,13 +428,20 @@ const Bookings = (props: any) => {
 };
 
 function mapStateToProps(state: any) {
-  const { Data3, Result, DataSave } = state.FacilityBookings;
+  const { Data3, Result, DataSave, resultTime } = state.FacilityBookings;
+  const load =
+    typeof state.loading.models.FacilityBookings == 'undefined'
+      ? true
+      : state.loading.models.FacilityBookings;
+  console.log(Data3);
   const { token } = state.login;
   return {
     Data3,
     Result,
     DataSave,
     token,
+    resultTime,
+    load,
   };
 }
 export default connect(mapStateToProps)(Bookings);

src/pages/CommunityManagement/FacilityBookings/FacilityBookings.tsx

@@ -28,7 +28,7 @@ import moment from 'moment';
 const FacilityBookings = (props: any) => {
   const { formatMessage } = useIntl();
 
-  const { dispatch, location, Data, Data2, token, DataSave, curString, Result } = props;
+  const { dispatch, location, Data, Data2, token, DataSave, curString, Result, loading } = props;
 
   const RA = (index: any, values: any) => {
     console.log(values);
@@ -48,7 +48,6 @@ const FacilityBookings = (props: any) => {
     dispatch({ type: 'FacilityBookings/CA', playload: null });
   };
 
-  const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState([]);
   const [columns2, setColumns2] = useState([]);
 
@@ -57,16 +56,22 @@ const FacilityBookings = (props: any) => {
       CA();
       // 先清空上传图片列表
       dispatch({ type: 'FacilityBookings/overAllImgList' });
+    } else {
+      // 清空之前的数据
+      let Data3 = null;
+      dispatch({ type: 'FacilityBookings/returnPage3', Data3 });
     }
     history.push(location.pathname + (curString.tab == 1 ? '/Booking' : '/Adding'));
   };
+
+  // 预约详情跳转
   const goToDetail = (values: any) => {
     SA(values);
-    console.log('准备页面跳转');
-    console.log(curString);
     history.push(location.pathname + '/Detail');
   };
-  const makeOperator = (values: any, index: any, e: any) => {
+
+  // 列表2 点击跳转
+  const makeOperator = (values: any, index: any) => {
     const path = ['/FacilityDetail', '/FacilityEdit', '/FacilityApply'];
     SA(values);
     console.log('准备页面跳转');
@@ -125,9 +130,9 @@ const FacilityBookings = (props: any) => {
         null,
         (text: any, record: any) => (
           <Space size="middle">
-            <a onClick={makeOperator.bind(this, record, 0)}>Detail</a>
-            <a onClick={makeOperator.bind(this, record, 1)}>Edit</a>
-            <a onClick={makeOperator.bind(this, record, 2)}>Booking</a>
+            <a onClick={() => makeOperator(record, 0)}>Detail</a>
+            <a onClick={() => makeOperator(record, 1)}>Edit</a>
+            <a onClick={() => makeOperator(record, 2)}>Booking</a>
           </Space>
         ),
       ],
@@ -150,10 +155,6 @@ const FacilityBookings = (props: any) => {
     }
   }, []);
 
-  useEffect(() => {
-    setLoading(false);
-  }, [Data, Data2]);
-
   const CallBackTitleSearch = (comment: any) => {
     console.log(comment);
 
@@ -195,7 +196,6 @@ const FacilityBookings = (props: any) => {
     }
   };
   function TabCallback(tab: any) {
-    setLoading(true);
     var tmp = curString;
     tmp.tab = tab;
     QA(tmp);
@@ -212,7 +212,6 @@ const FacilityBookings = (props: any) => {
     }
   }
   function Pagechange(current: any, pageSize: any) {
-    setLoading(true);
     if (curString.tab == 1) {
       var tmp = curString;
       tmp.curPage = current;
@@ -285,12 +284,15 @@ const FacilityBookings = (props: any) => {
           </Button>
         </div> */}
 
-        <Tabs defaultActiveKey={curString.tab.toString()} onChange={TabCallback}>
+        <Tabs
+          defaultActiveKey={curString.tab.toString()}
+          onChange={TabCallback}
+          className="diytabs"
+        >
           <TabPane tab="Facility Bookings" key="1">
             <ProTable
               loading={loading}
               rowKey="id"
-              style={{ marginTop: 16 }}
               dataSource={Data.data}
               columns={columns}
               pagination={{
@@ -322,7 +324,6 @@ const FacilityBookings = (props: any) => {
             <ProTable
               loading={loading}
               rowKey="id"
-              style={{ marginTop: 16 }}
               dataSource={Data2.data}
               columns={columns2}
               pagination={{
@@ -359,6 +360,10 @@ const FacilityBookings = (props: any) => {
 function mapStateToProps(state: any) {
   const { Data, Data2, DataSave, curString, Result } = state.FacilityBookings;
   const { token } = state.login;
+  const loading =
+    typeof state.loading.models.FacilityBookings == 'undefined'
+      ? true
+      : state.loading.models.FacilityBookings;
   return {
     Data,
     Data2,
@@ -366,6 +371,7 @@ function mapStateToProps(state: any) {
     curString,
     Result,
     token,
+    loading,
   };
 }
 export default connect(mapStateToProps)(FacilityBookings);

src/pages/CommunityManagement/FacilityBookings/css/Bookings.less

@@ -188,3 +188,36 @@
     margin: 0 20px;
   }
 }
+.required {
+  position: relative;
+  padding-left: 10px;
+  &::after {
+    content: '*';
+    display: block;
+    color: #f00;
+    font-size: 14px;
+    position: absolute;
+    left: 0;
+    top: 8px;
+    width: 10px;
+    // transform: translateY(-50%);
+  }
+}
+
+.boxdiyitem {
+  position: absolute;
+  left: 135px;
+}
+
+.diyspan,
+.diyspan3 {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+.diyspan3 {
+  color: #f00;
+  line-height: 32px;
+  margin: 0;
+  margin-left: 30px;
+}

src/pages/CommunityManagement/FacilityBookings/css/index.less

@@ -350,3 +350,9 @@ hr {
     // transform: translateY(-50%);
   }
 }
+
+.diytabs {
+  .ant-tabs-nav {
+    margin-bottom: 0;
+  }
+}

src/utils/params.ts

@@ -136,6 +136,7 @@ export const requestList = [
   ['/tos/fileAndImage/preview', '47 获取附件地址', {}],
   ['/tos/tosCommunity/get/list', '48 修改获取小区列表', {}],
   ['/tos/community/delete', '49 关闭小区', {}],
+  ['/tos/community/facilities/subscribeTime/query', '50 设施预订时间段查询', {}],
 ];
 
 const params = [

src/utils/tip.ts

@@ -43,10 +43,10 @@ export const NewFaci = [
 
 // 设施预订
 export const BookingsTip = [
-  [{ required: false, message: 'Please select community' }],
-  [{ required: false, message: 'Please input Facility Name' }],
-  [{ required: false, message: 'Please Set management fee' }],
-  [{ required: false, message: 'Please Set Setting deposit' }],
-  [{ required: false, message: 'Please Upload facility photos' }],
-  [{ required: false, message: 'Required' }],
+  [{ required: true, message: 'Please input Name ' }],
+  [{ required: true, message: 'Please input Contact Details' }],
+  [{ required: true, message: 'Required' }],
+  [{ required: true, message: 'Required' }],
+  [{ required: true, message: 'Required' }],
+  [{ required: true, message: 'Please Select The Date' }],
 ];