新增设施预约时间组件

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

src/components/OnTime/OnTime.less

+.ontime-box {
+  position: relative;
+  box-sizing: border-box;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  &.disabled {
+    background: #f5f5f5;
+    border-color: #d9d9d9;
+    cursor: not-allowed;
+  }
+  .ims {
+    min-height: 30px;
+    line-height: 30px;
+    padding: 0 6px 0 10px;
+    color: #000;
+    font-size: 14px;
+    transition: all 0.5s;
+    cursor: pointer;
+    &.active {
+      color: #999;
+    }
+    span {
+      display: inline-block;
+      padding: 0 6px;
+    }
+  }
+
+  .icon {
+    transform: scale(0.9);
+    transform: rotate(0);
+    transition: all 0.3s;
+    &.icon-up {
+      transform: rotate(180deg);
+    }
+  }
+  //   时间段选择
+  .slot {
+    position: absolute;
+    top: calc(100% + 2px);
+    left: 0;
+    border: 1px solid #d9d9d9;
+    padding: 8px 8px 0;
+    z-index: 10;
+    background: #fff;
+    border-radius: 2px;
+    min-width: 396px;
+
+    // 可选时间
+    .opens {
+      display: flex;
+      justify-content: end;
+      align-items: center;
+      flex-wrap: wrap;
+      span.sapa {
+        cursor: pointer;
+        display: inline-block;
+        padding: 2px 4px;
+        margin: 0 8px 8px 0;
+        font-size: 13px;
+        letter-spacing: 1px;
+        border: 1px solid #d9d9d9;
+        border-radius: 2px;
+        transition: all 0.5s;
+        &:nth-child(4n) {
+          margin-right: 0;
+        }
+
+        &.active {
+          border-color: #1890ff;
+          background: #1890ff;
+          color: #fff;
+        }
+        &.disabled {
+          cursor: not-allowed;
+          border-color: #f9f9f9;
+          background: #f9f9f9;
+          color: #999;
+        }
+        //去掉双击页面内容的蓝色背景
+        -moz-user-select: none; /*火狐*/
+        -webkit-user-select: none; /*webkit浏览器*/
+        -ms-user-select: none; /*IE10*/
+        -khtml-user-select: none; /*早期浏览器*/
+        user-select: none;
+      }
+
+      // 无数据
+      .nodata {
+        width: 100%;
+        min-height: 80px;
+        padding: 20px 0;
+        text-align: center;
+        li {
+          padding-top: 10px;
+        }
+        span {
+          transform: scale(2);
+        }
+      }
+    }
+
+    // 按钮
+    .oks {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      margin-bottom: 8px;
+      button {
+        &:nth-child(1) {
+          margin-right: 6px;
+        }
+      }
+    }
+  }
+}

src/components/OnTime/OnTimeTow.tsx

@@ -3,7 +3,7 @@ import { TimePicker } from 'antd';
 const { RangePicker } = TimePicker;
 import moment from 'moment';
 
-const OnTime = (porps: any) => {
+const OnTimeTow = (porps: any) => {
   //  disabled  是否禁止
   //  limit 默认开放时间
   //  inhibitTime  禁止选择时间
@@ -53,4 +53,4 @@ const OnTime = (porps: any) => {
   );
 };
 
-export default OnTime;
+export default OnTimeTow;

src/models/CommunityManagement/FacilityBookings.ts

@@ -133,7 +133,7 @@ export default {
             if (JSON.stringify(Data3) == "{}") {
               Data3 = false
               // 提示小区没有设施
-              message.error('There Are No Facilities In The Community !');
+              message.warning('There Are No Facilities In The Community !');
             }
             yield put({ type: 'returnPage3', Data3});
               

src/pages/AccountManagement/account/AccountAdds.tsx

@@ -204,10 +204,10 @@ const Account = (props: any) => {
         permissionArray: newData,
       };
 
-      console.log(value);
-      console.log(obj);
-      // RA(38, value, module, dispatch); // 信息上传
-      // RA(42, obj, module, dispatch); // 权限上传
+      // console.log(value);
+      // console.log(obj);
+      RA(38, value, module, dispatch); // 信息上传
+      RA(42, obj, module, dispatch); // 权限上传
       return true;
     }
   };

src/pages/AccountManagement/account/AccountEdit.tsx

@@ -529,7 +529,7 @@ const Account = (props: any) => {
     localStorage.getItem('towAccount') || '[{"id":1,"tosAccountName":"test"}]',
   );
 
-  console.log(towAccount);
+  // console.log(towAccount);
 
   // 选择哪个二级账号
   const handleChange = (value: any) => {

src/pages/CommunityManagement/CellList/Adds.tsx

@@ -450,7 +450,11 @@ const Adds = (props: any) => {
             </Form.Item>
 
             <Form.Item label="Working Hours" name="workingHours" rules={village[3] as any}>
-              <RangePicker format="HH:mm" placeholder={['Start Time', 'End Time']} />
+              <RangePicker
+                minuteStep={60}
+                format="HH:mm"
+                placeholder={['Start Time', 'End Time']}
+              />
             </Form.Item>
 
             <Form.Item label="Community Telephone" name="info" rules={[{ required: false }]}>

src/pages/CommunityManagement/FacilityBookings/Bookings.tsx

@@ -17,7 +17,8 @@ import { validateMessages } from '@/utils/params';
 import moment from 'moment';
 import { BookingsTip } from '@/utils/tip';
 // 自定义时间段
-import OnTime from '@/components/OnTime/OnTimeTow';
+// import OnTimeTow from '@/components/OnTime/OnTimeTow';
+import OnTimeTow from '@/components/OnTime/OnTime';
 
 const Bookings = (props: any) => {
   const { dispatch, Data3, Result, DataSave, token, load, resultTime, Remaining } = props;
@@ -139,17 +140,17 @@ const Bookings = (props: any) => {
 
     // 没有次数
     if (Remaining.canReservationNum == 0) {
-      message.error('No bookable times');
+      message.warning('No bookable times');
       return false;
     }
     // 判断时间选择
     if (value.Time == null) {
-      message.error('Please Fill In The Appointment Period!');
+      message.warning('Please Fill In The Appointment Period!');
       return false;
     }
     // 手机判断
     if (tmp.accountPhone && tmp.accountPhone.length != 11 && tmp.accountPhone.length != 8) {
-      message.error('Please Fill In The Contact Information Correctly!');
+      message.warning('Please Fill In The Contact Information Correctly!');
       return false;
     }
     // 小区信息
@@ -173,12 +174,10 @@ const Bookings = (props: any) => {
     }
     // 姓名长度
     if (tmp.accountName && tmp.accountName.length < 2) {
-      message.error('User Name Should be limit 2~30!', 3);
+      message.warning('User Name Should be limit 2~30!', 3);
     } else {
-      tmp.reservedTimeList = [
-        moment(value.Time[0]).format('HH:mm'),
-        moment(value.Time[1]).format('HH:mm'),
-      ]; // 预约时间
+      // tmp.reservedTimeList = Array.from(new Set(value.Time)); // 预约时间   不需要去重也可
+      tmp.reservedTimeList = value.Time; // 预约时间
 
       // 选择的总时间段
       let times = [] as any;
@@ -204,7 +203,7 @@ const Bookings = (props: any) => {
       // 如果选择的时间段有其他包含的话 给出提示，否则 可以提交
       if (fruit) {
         // 判断选的时间 是不是结束时间小于开始时间
-        message.error('Reservation period already exists!');
+        message.warning('Reservation period already exists!');
         return false;
       } else {
         delete tmp.Time;
@@ -325,12 +324,13 @@ const Bookings = (props: any) => {
   };
 
   // 点击确定时间
-  const onChanges = (value: any, b: any) => {
-    // console.log(value);
-    // console.log(b);
+  const onChanges = (value: any) => {
+    let a = parseInt(moment(value[1], 'HH:mm').format('HH')) - 1;
+    let b = moment(a, 'HH').format('HH:mm');
+    let c = [value[0], b];
     // 修改后的时间
     formRef.current.setFieldsValue({
-      Time: [moment(b[0], 'HH:mm'), moment(b[1], 'HH:mm')],
+      Time: c,
     });
   };
 
@@ -415,7 +415,7 @@ const Bookings = (props: any) => {
                   </Col>
                   <Col>
                     <Form.Item label="Reserve Time" name="Time" noStyle>
-                      <OnTime
+                      <OnTimeTow
                         disabled={prohibit}
                         limit={curString.categoriesOpenTime} // 设施默认禁止时间段
                         inhibitTime={result} // 选择日期后的禁止时间

src/pages/ContractManagement/ContractContent.tsx

@@ -506,11 +506,11 @@ const ContractContent = (props: any) => {
                   style={{ marginLeft: 150, textTransform: 'capitalize' }}
                 >
                   <p style={{ marginBottom: 0 }}>
-                    The system will send e-mail notification in the{' '}
-                    <span style={{ color: 'red' }}>{state.tipTime[0]}</span> and{' '}
+                    The system will send email on{' '}
+                    <span style={{ color: 'red' }}>{state.tipTime[0]}</span> ,{' '}
                     <span style={{ color: 'red' }}>{state.tipTime[1]}</span> and{' '}
-                    <span style={{ color: 'red' }}>{state.tipTime[2]}</span> that the contract is
-                    about to expire !
+                    <span style={{ color: 'red' }}>{state.tipTime[2]}</span> before the contract is
+                    about to expire!
                   </p>
                   <p style={{ marginBottom: 0 }}>
                     <span style={{ color: 'red' }}>*</span> If the time has passed, it will not be

src/pages/ContractManagement/ContractDetail.tsx

@@ -35,7 +35,7 @@ const ContractContent = (props: any) => {
   const [fileList, setFileList] = useState([] as any); // 图片列表
   const [uploadUp, setUploadUp] = useState(true); // 禁止上传 直到选择了小区后
   const [comtyName, setComtyName] = useState(null); // 小区名字
-  const [tipTime, setTipTime] = useState(['previous month', 'two months'] as any); //提示时间
+  const [tipTime, setTipTime] = useState(['previous month', 'two months', 'there months'] as any); //提示时间
   const [tipModal, settipModal] = useState(false); //附件弹窗
   const [fileInfo, setfileInfo] = useState(null as any); //附件内容
   //pdf 页码内容
@@ -64,13 +64,14 @@ const ContractContent = (props: any) => {
       setUploadUp(false);
 
       // 提示时间
-      let a1 = moment(DataSaveDetail.contractValidEndDate)
-        .subtract(2, 'month')
-        .format('YYYY-MM-DD');
-      let a2 = moment(DataSaveDetail.contractValidEndDate)
-        .subtract(1, 'month')
-        .format('YYYY-MM-DD');
-      setTipTime([a1, a2]);
+      // 提示时间
+      let a1 = timeOver(DataSaveDetail.contractValidEndDate, 2);
+      let a2 = timeOver(DataSaveDetail.contractValidEndDate, 1);
+      let a3 = timeOver(DataSaveDetail.contractValidEndDate, 3);
+
+      // setTipTime([a1, a2]);
+
+      setTipTime([a3, a1, a2]);
 
       // 给到上传绑定
       setComtyName(DataSaveDetail.communityName);
@@ -86,6 +87,11 @@ const ContractContent = (props: any) => {
     }
   }, [DataSaveDetail]);
 
+  // 时间转换
+  const timeOver = (time: any, day: any) => {
+    return moment(time).subtract(day, 'month').format('YYYY-MM-DD');
+  };
+
   // 监听上传图片列表
   useEffect(() => {
     if (FileImg != null) {
@@ -191,7 +197,7 @@ const ContractContent = (props: any) => {
         <div className={styles.base}>
           {/* 头部组件 */}
           <div className={styles.box}>
-            <div className={styles.item1}>{DataSaveDetail ? 'Detail' : 'Add'} Contract</div>
+            <div className={styles.item1}>Contract Details</div>
             <button className={styles.item3} onClick={goToReturn}>
               <LeftOutlined />
               Back
@@ -312,10 +318,10 @@ const ContractContent = (props: any) => {
                   style={{ marginLeft: 150, textTransform: 'capitalize' }}
                 >
                   <p style={{ marginBottom: 0 }}>
-                    The system will send e-mail notification in the{' '}
-                    <span style={{ color: 'red' }}>{tipTime[0]}</span> and{' '}
-                    <span style={{ color: 'red' }}>{tipTime[1]}</span> that the contract is about to
-                    expire !
+                    The system will send email on <span style={{ color: 'red' }}>{tipTime[0]}</span>{' '}
+                    , <span style={{ color: 'red' }}>{tipTime[1]}</span> and{' '}
+                    <span style={{ color: 'red' }}>{tipTime[2]}</span> before the contract is about
+                    to expire!
                   </p>
                   <p style={{ marginBottom: 0 }}>
                     <span style={{ color: 'red' }}>*</span> If the time has passed, it will not be

src/pages/runTest/Template.tsx

+/*
+ * @Author: your name
+ * @Date: 2020-11-19 16:54:53
+ * @LastEditTime: 2021-01-29 20:21:05
+ * @LastEditors: your name
+ * @Description: In User Settings Edit
+ * @FilePath: \tostumi\src\pages\runTest\Template.tsx
+ */
 import React, { useEffect } from 'react';
 import styles from './index.less';
 
@@ -22,7 +30,7 @@ const Guard = (props: any) => {
 
   return (
     <div className={styles.base}>
-      <TitleGet title={'Version 1.6.0'} />
+      <TitleGet title={'Version 1.6.1'} />
       {/* <p>
         token:{page.token}
         name:{getCookie('name')}