预约时间大改

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

src/components/OnTime/OnTimeTow.tsx

+import React from 'react';
+import { TimePicker } from 'antd';
+const { RangePicker } = TimePicker;
+import moment from 'moment';
+
+const OnTime = (porps: any) => {
+  //  disabled  是否禁止
+  //  limit 默认开放时间
+  //  inhibitTime  禁止选择时间
+  //  onChanges  时间选择事件
+  let { disabled, limit, inhibitTime, onChanges } = porps;
+
+  // 禁止时间  数组格式
+  const disabledHours = () => {
+    // 禁止的小时数组
+    let result = [];
+
+    // 设施默认的开放时间
+    let lim = limit ? limit.split('-') : [];
+    for (var i = 0; i < 24; i++) {
+      if (
+        i < parseInt(moment(lim[0], 'HH:ss').format('HH')) ||
+        i > parseInt(moment(lim[1], 'HH:ss').format('HH'))
+      ) {
+        result.push(i);
+      }
+    }
+
+    // 选择日期禁止的时间
+    if (inhibitTime) {
+      for (let j in inhibitTime) {
+        result.push(parseInt(moment(inhibitTime[j], 'HH:ss').format('HH')));
+      }
+    }
+
+    // 去重排序
+    return [...new Set(result)].sort((x, y) => x - y);
+  };
+
+  return (
+    <>
+      <RangePicker
+        minuteStep={60}
+        format="HH:mm"
+        onChange={(time: any, timeString: any) => {
+          onChanges(time, timeString);
+        }}
+        allowClear={false}
+        disabled={disabled}
+        disabledHours={disabledHours}
+      />
+    </>
+  );
+};
+
+export default OnTime;

src/models/CommunityManagement/FacilityBookings.ts

@@ -192,12 +192,7 @@ export default {
           } 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);
-            }
+            let resultTime = resp.data;
             yield put({ type: 'onResult', resultTime });  
           } break;
           

src/pages/AccountManagement/SystemFeedback/BugDetail.tsx

@@ -58,9 +58,9 @@ const BugDetail = (props: any) => {
           </Descriptions.Item>
           <Descriptions.Item label="Submission time" style={{ paddingBottom: 16 }}>
             {DataSave
-              ? moment(DataSave.updateTime.time).format('YYYY-MM-DD hh') +
-                ':00' +
-                (parseInt(moment(DataSave.updateTime.time).format('HH')) > 11 ? 'PM' : 'AM')
+              ? moment(DataSave.updateTime.time).format('YYYY-MM-DD hh:mm') +
+                // ':00' +
+                (parseInt(moment(DataSave.updateTime.time).format('HH')) > 11 ? ' PM' : ' AM')
               : '-'}
           </Descriptions.Item>
         </Descriptions>

src/pages/AccountManagement/SystemFeedback/SystemFeedback.tsx

@@ -31,9 +31,9 @@ const SystemFeedback = (props: any) => {
       dataIndex: 'createTime',
       render: (text: any) => {
         let data =
-          moment(text.time).format('YYYY-MM-DD hh') +
-          ':00' +
-          (parseInt(moment(text.time).format('HH')) > 11 ? 'PM' : 'AM');
+          moment(text.time).format('YYYY-MM-DD hh:mm') +
+          // ':00' +
+          (parseInt(moment(text.time).format('HH')) > 11 ? ' PM' : ' AM');
 
         // let data = moment(text.time).calendar();
         return data;

src/pages/CommunityManagement/FacilityBookings/Bookings.tsx

@@ -17,7 +17,7 @@ import { validateMessages } from '@/utils/params';
 import moment from 'moment';
 import { BookingsTip } from '@/utils/tip';
 // 自定义时间段
-import OnTime from '@/components/OnTime/OnTime';
+import OnTime from '@/components/OnTime/OnTimeTow';
 
 const Bookings = (props: any) => {
   const { dispatch, Data3, Result, DataSave, token, load, resultTime, Remaining } = props;
@@ -50,15 +50,23 @@ const Bookings = (props: any) => {
 
   const [prohibit, setProhibit] = useState(true); // 输入框是否不可选
   const [result, setResultTime] = useState(null as any); // 已预约时间段
-  const [soltTime, setSoltTime] = useState(['', '']); // 已选时间
 
   const [bookTime, setBookTime] = useState(1); // 默认延后预订时间
 
   const [Unit, setUnit] = useState({} as any); // 输入框的值
 
+  const [UnitName, setUnitName] = useState([] as any); // 楼栋搜索的家庭成员
+
   // 表单标识
   const [form] = Form.useForm();
 
+  // 输入楼栋搜索 后台返回的值 Remaining
+  useEffect(() => {
+    if (Remaining) {
+      setUnitName(Remaining.owerList);
+    }
+  }, [Remaining]);
+
   // 选择的小区名
   useEffect(() => {
     if (DataSave != null) {
@@ -96,7 +104,6 @@ const Bookings = (props: any) => {
       setCurString({ communityManagerFee: null });
       setProhibit(true);
       setResultTime(null);
-      setSoltTime([]);
     }
   }, [Data3]);
 
@@ -123,8 +130,14 @@ const Bookings = (props: any) => {
   // 保存提交
   const onFinish = (value: any) => {
     var tmp = value;
+
+    // 没有次数
+    if (Remaining.canReservationNum == 0) {
+      message.error('No bookable times');
+      return false;
+    }
     // 判断时间选择
-    if (soltTime.length < 2 || !soltTime[0]) {
+    if (value.Time == null) {
       message.error('Please Fill In The Appointment Period!');
       return false;
     }
@@ -133,45 +146,38 @@ const Bookings = (props: any) => {
       message.error('Please Fill In The Contact Information Correctly!');
       return false;
     }
-
-    // 没有次数
-    if (Remaining.canReservationNum == 0) {
-      message.error('No bookable times');
-      return false;
-    }
-
+    // 小区信息
     if (value.categoriesName != null) {
       tmp.categoriesId = value.categoriesName.categoriesId;
       tmp.facilitiesId = value.categoriesName.facilitiesId;
       tmp.categoriesName = value.categoriesName.categoriesName;
     }
+    // 日期
     if (value.subscribeDate != null) {
       tmp.subscribeDate = value.subscribeDate.format('YYYY-MM-DD');
     }
-    if (value.reservedTimeList != null) {
-    }
+    // 小区名
     if (comminityValues != null) {
       tmp.communityName = comminityValues;
     }
+    // 设施费用
     if (curString != null) {
       tmp.communityManagerFee = numberToString(curString.communityManagerFee);
       tmp.communityMargin = numberToString(curString.communityMargin);
     }
+    // 姓名长度
     if (tmp.accountName && tmp.accountName.length < 2) {
       message.error('User Name Should be limit 2~30!', 3);
-    } else if (
-      soltTime &&
-      moment(soltTime[0], 'HH:mm').format('HH') > moment(soltTime[1], 'HH:mm').format('HH')
-    ) {
-      // 判断选的时间 是不是结束时间小于开始时间
-      message.error('Appointment time range error');
     } else {
-      tmp.reservedTimeList = soltTime; // 预约时间
+      tmp.reservedTimeList = [
+        moment(value.Time[0]).format('HH:mm'),
+        moment(value.Time[1]).format('HH:mm'),
+      ]; // 预约时间
 
       // 选择的总时间段
       let times = [] as any;
-      for (let i = 0; i <= parseInt(moment(soltTime[1], 'HH:mm').format('HH')); i++) {
-        if (i >= parseInt(moment(soltTime[0], 'HH:mm').format('HH'))) {
+      for (let i = 0; i <= parseInt(moment(value.Time[1], 'HH:mm').format('HH')); i++) {
+        if (i >= parseInt(moment(value.Time[0], 'HH:mm').format('HH'))) {
           times.push(moment(i, 'HH').format('HH:mm'));
         }
       }
@@ -195,6 +201,7 @@ const Bookings = (props: any) => {
         message.error('Reservation period already exists!');
         return false;
       } else {
+        console.log(tmp);
         RA(11, tmp);
       }
     }
@@ -210,8 +217,7 @@ const Bookings = (props: any) => {
       floorNumber: '',
       roomNumber: '',
       subscribeDate: '',
-      startTime: '',
-      endTime: '',
+      Time: null,
     });
     // 再把提示时间删除
     setResultTime(null);
@@ -245,19 +251,17 @@ const Bookings = (props: any) => {
   const getFacility = (values: any) => {
     SAClear();
     setComminityValues(values);
-    RA(1, { userToken: token, communityName: values });
-    setLoading(true);
     // 如果切换了小区 再次把下方判断的内容清空 和 禁用
     setCurString({
       communityManagerFee: null,
     });
-    setProhibit(true);
     setResultTime(null);
-    setSoltTime([]);
-    // formRef.current.resetFields({ accountName: null }); // 清空已填写的表单
+    RA(1, { userToken: token, communityName: values });
+    setLoading(true);
+    setProhibit(true);
   };
 
-  // 设置之前时间不能选择
+  // 设置之前日期不能选择
   function disabledDate(current: any) {
     return current && current <= moment().subtract(bookTime, 'days').endOf('day');
   }
@@ -273,19 +277,6 @@ const Bookings = (props: any) => {
     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);
-  };
-
   // 鼠标移走
   const onBlur = (e: any) => {
     switch (e.target.id) {
@@ -300,6 +291,27 @@ const Bookings = (props: any) => {
     }
   };
 
+  // 姓名判断
+  const onBlurName = (e: any) => {
+    for (let i in UnitName) {
+      if (e.target.value == UnitName[i].owerName) {
+        formRef.current.setFieldsValue({
+          accountPhone: UnitName[i].owerPhone,
+        });
+      }
+    }
+  };
+
+  // 点击确定时间
+  const onChanges = (value: any, b: any) => {
+    // console.log(value);
+    // console.log(b);
+    // 修改后的时间
+    formRef.current.setFieldsValue({
+      Time: [moment(b[0], 'HH:mm'), moment(b[1], 'HH:mm')],
+    });
+  };
+
   return (
     <div className={styles.base}>
       {/* 头部组件v1.2 */}
@@ -318,7 +330,6 @@ const Bookings = (props: any) => {
               disabled={DataSave && DataSave.type == 2 ? true : false}
             />
           </Spin>
-          {/* <Input.Search style={{ width: 200, height: 32 }} onSearch={getFacility} loading={loading} defaultValue={}/> */}
         </div>
       </div>
       {Data3 && Data3.length > 0 ? (
@@ -329,27 +340,11 @@ const Bookings = (props: any) => {
             name="basic"
             onFinish={onFinish}
             validateMessages={validateMessages}
-            // autocomplete="off"
           >
             <div className="box2 required">
               <div className={styles.box2item1}>Facilities Available: </div>
               <div className={styles.box2item2}>
                 <Form.Item name="categoriesName">
-                  {/* <Radio.Group defaultValue={1} onChange={RadioChoose}>
-                    {Data3.map((item: any, index: any) => {
-                      var tmp = new Array();
-                      item.categorieList.map((thing: any, i: any) => {
-                        tmp.push(
-                          <Radio key={thing.categoriesId} value={thing}>
-                            {thing.categoriesName}
-                          </Radio>,
-                        );
-                      });
-
-                      return tmp;
-                    })}
-                  </Radio.Group> */}
-
                   <Radio.Group onChange={RadioChoose}>
                     {Data3.map((item: any, index: any) => {
                       return (
@@ -427,6 +422,7 @@ const Bookings = (props: any) => {
                     placeholder="Name Of Subscriber"
                     disabled={prohibit}
                     maxLength={30}
+                    onBlur={onBlurName}
                   />
                 </Form.Item>
               </div>
@@ -459,50 +455,19 @@ const Bookings = (props: any) => {
                     </Form.Item>
                   </Col>
                   <Col>
-                    <Form.Item label="Opening Hours" className="required">
-                      <Form.Item name="startTime" noStyle>
-                        <OnTime
-                          placeholder={'Start Time'}
-                          disabled={prohibit}
-                          limit={curString.categoriesOpenTime}
-                          openSelect={startTimes}
-                          type={0}
-                          inhibitTime={result}
-                        />
-                      </Form.Item>
-                      <span className="diyspan"> </span>
-                      <Form.Item name="endTime" noStyle>
-                        <OnTime
-                          placeholder={'Closing Time'} // 默认值
-                          disabled={prohibit} // 是否禁止
-                          limit={curString.categoriesOpenTime} // 禁止时间段
-                          openSelect={endTimes} //  时间类型
-                          type={0}
-                          inhibitTime={result}
-                        />
-                      </Form.Item>
+                    <Form.Item label="Reserve Time" name="Time" noStyle>
+                      <OnTime
+                        disabled={prohibit}
+                        limit={curString.categoriesOpenTime} // 设施默认禁止时间段
+                        inhibitTime={result} // 选择日期后的禁止时间
+                        onChanges={onChanges}
+                      />
                     </Form.Item>
                   </Col>
                 </Row>
               </div>
             </div>
 
-            {/* 提示已选时间段 */}
-            {/* {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}>
@@ -531,7 +496,7 @@ const Bookings = (props: any) => {
                   <div className={styles.box6}>
                     <div className={styles.box6item1}>Remaining times : </div>
                     <div className={styles.box6item2}>
-                      <BarChartOutlined style={{ color: '#999', marginRight: 10 }} />
+                      <BarChartOutlined style={{ color: '#999' }} />
                       <span style={{ color: '#f00' }}>{Remaining.canReservationNum}</span> times
                     </div>
                   </div>