预订完善，基本解决

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

src/pages/CommunityManagement/FacilityBookings/BookingDetail.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import styles from './css/index.less';
 import './css/index.less';
 import {
-  Input,
+  InputNumber,
   Descriptions,
   Spin,
   Space,
@@ -41,15 +41,17 @@ const BookingDetail = (props: any) => {
 
   const [modalVisible, setModalVisible] = useState(false);
   const [modalItem, setModalIteme] = useState({ title: '', tab: 1 });
-  const [backFeeFlag, setBackFeeFlag] = useState(false);
+  const [backFeeFlag, setBackFeeFlag] = useState(false); // 部分退费 与 全部退费
   const [curbackFee, setCurBackFee] = useState(0);
+
+  // 设置默认全款退费
   useEffect(() => {
     if (DataSaveDetail != null) {
       setCurBackFee(DataSaveDetail.marginFee);
     }
   }, [DataSaveDetail]);
 
-  const radioStyle = { display: 'block', height: '30px', lineHeight: '30px' };
+  const radioStyle = { display: 'block', height: '50px', lineHeight: '50px' };
 
   const formRef = useRef(null);
   const backFee = (e: any) => {
@@ -63,8 +65,11 @@ const BookingDetail = (props: any) => {
 
   const onFinish = (values: any) => {
     var val = values;
-    if (val.backMarginFeeReason == null) {
-      message.error('Back marginFee reason is empty!', 3);
+    // 如果选择了 部分退款 则 需要填写 理由 且不为全额退款的默认值
+    if (curbackFee == DataSaveDetail.marginFee) {
+      message.error('Please Fill In The Refund Amount Less Than The Full Amount!', 3);
+    } else if (backFeeFlag && val.backMarginFeeReason == null) {
+      message.error('Back MarginFee Reason Is Empty!', 3);
     } else {
       var RAVAL = {
         accountCategoriesId: DataSave.id,
@@ -83,8 +88,9 @@ const BookingDetail = (props: any) => {
     console.log('Failed:', errorInfo);
   };
 
+  // 退款金额改变
   const getBackMarginFee = (e: any) => {
-    setCurBackFee(e.target.value);
+    setCurBackFee(e);
   };
   const makeFee = () => {
     setModalIteme({ title: 'Deposit And Fee', tab: 2 });
@@ -182,28 +188,37 @@ const BookingDetail = (props: any) => {
                   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>
+                  <Descriptions>
+                    <Descriptions.Item label="Management Expense">
+                      $ {parseInt(DataSaveDetail.managerFee).toFixed(2)}
+                    </Descriptions.Item>
+                    <Descriptions.Item label="Deposit">
+                      $ {parseInt(DataSaveDetail.marginFee).toFixed(2)}
+                    </Descriptions.Item>
+                  </Descriptions>
 
-                  <div style={{ marginTop: 16 }}>
                   <Radio.Group onChange={backFee} defaultValue={1}>
                     <Radio value={1} style={radioStyle}>
-                        全额退还
+                      Full Refund
                     </Radio>
                     <Radio value={2} style={radioStyle}>
-                        部分退还{' '}
+                      Partial Refund
                       {backFeeFlag ? (
                         <>
-                            <Input onChange={getBackMarginFee} style={{ width: 80 }} /> $
+                          <InputNumber
+                            placeholder="00.00"
+                            min={0}
+                            max={parseInt(DataSaveDetail.marginFee).toFixed(2)}
+                            maxLength={6}
+                            step={0.01}
+                            prefix="$"
+                            onChange={getBackMarginFee}
+                            style={{ width: 80, marginLeft: 10 }}
+                          />
                         </>
                       ) : null}
                     </Radio>
                   </Radio.Group>
-                  </div>
 
                   {backFeeFlag ? (
                     <div style={{ marginTop: 16 }}>
@@ -219,7 +234,7 @@ const BookingDetail = (props: any) => {
                   <div style={{ marginTop: 16 }}>
                     <Form.Item>
                       <Button type="primary" htmlType="submit" loading={load}>
-                        退还押金
+                        Deposit Refunds
                       </Button>
                     </Form.Item>
                   </div>
@@ -229,7 +244,7 @@ const BookingDetail = (props: any) => {
             ) : null}
             {DataSave.status == 1 || DataSave.status == 2 ? (
               <Button onClick={showModal} loading={load}>
-                取消预约
+                Cancel Reservation
               </Button>
             ) : null}
             <Modal

src/pages/CommunityManagement/FacilityBookings/Facility.tsx

@@ -45,7 +45,7 @@ const module = 'FacilityBookings';
 import moment from 'moment';
 
 const Facility = (props: any) => {
-  const { dispatch, location, token, sourceData, DataSave, Result, imgList } = props;
+  const { dispatch, location, token, sourceData, DataSave, Result, imgList, load } = props;
 
   const RA = (index: any, values: any) => {
     dispatch({ type: 'FacilityBookings/RA', playload: { index: index, body: values } });
@@ -457,13 +457,13 @@ const Facility = (props: any) => {
         </Row> */}
         {facilityDetail ? (
           <>
-            <Button type="primary" onClick={Subscribe}>
+            <Button type="primary" onClick={Subscribe} loading={load}>
               Subscribe
             </Button>
           </>
         ) : (
           <>
-            <Button type="primary" htmlType="submit">
+            <Button type="primary" htmlType="submit" loading={load}>
               Submit
             </Button>
           </>
@@ -474,15 +474,19 @@ const Facility = (props: any) => {
 };
 
 function mapStateToProps(state: any) {
-  console.log(state);
   const { sourceData, DataSave, Result, imgList } = state.FacilityBookings;
   const { token } = state.login;
+  const load =
+    typeof state.loading.models.FacilityBookings == 'undefined'
+      ? true
+      : state.loading.models.FacilityBookings;
   return {
     DataSave,
     sourceData,
     token,
     Result,
     imgList,
+    load,
   };
 }
 export default connect(mapStateToProps)(Facility);

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

@@ -73,7 +73,6 @@
   line-height: 32px;
 }
 .box2item2 {
-  width: 336px;
   padding-left: 135px;
 }
 // 线栏

src/utils/tip.ts

@@ -29,16 +29,16 @@ export const Notice = [
 
 // 新增设施
 export const NewFaci = [
-  [{ 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: false, message: 'Required' }],
-  [{ required: false, message: 'Required' }],
-  [{ required: false, message: 'Required' }],
-  [{ required: false, message: 'Required' }],
+  [{ required: true, message: 'Please select community' }],
+  [{ required: true, message: 'Please input Facility Name' }],
+  [{ required: true, message: 'Please Set management fee' }],
+  [{ required: true, message: 'Please Set Setting deposit' }],
+  [{ required: true, message: 'Please Upload facility photos' }],
+  [{ required: true, message: 'Required' }],
+  [{ required: true, message: 'Required' }],
+  [{ required: true, message: 'Required' }],
+  [{ required: true, message: 'Required' }],
+  [{ required: true, message: 'Required' }],
 ];
 
 // 设施预订