Skip to content

T
TOSTUMI
Commit e9315581 authored by cellee's avatar cellee
Browse files
Options

添加预定完成 

Signed-off-by: cellee's avatarcellee <893264950@qq.com>
parent 1c2ac72c
Show whitespace changes
Inline Side-by-side
Showing with 507 additions and 228 deletions
src/components/OnTime/OnTime.tsx 0 → 100644
View file @ e9315581
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
View file @ e9315581
......@@ -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,13 +131,6 @@ 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 });
}
break;
case 1:
{
let Data3 = resp.data;
......@@ -140,10 +142,11 @@ export default {
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
View file @ e9315581
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 { dispatch,location, DataSave,DataSaveDetail,token} = props;
const RA = (index:any,values: any) => { dispatch({ type: 'FacilityBookings/RA', playload: { index: index, body: values } }) };
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])
}, [DataSaveDetail]);
const radioStyle = {display: 'block',height: '30px',lineHeight: '30px'}
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()
}
backFeeStatus: curbackFee == DataSaveDetail.marginFee ? '0' : '1',
marginFee: DataSaveDetail.marginFee.toString(),
};
console.log(RAVAL)
RA(3, RAVAL)
console.log(RAVAL);
RA(3, RAVAL);
}
};
const onFinishFailed = (errorInfo: any) => { console.log('Failed:', errorInfo) };
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
};
const getBackMarginFee = (e:any) => {
setCurBackFee(e.target.value)
}
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(),
};
const handleCancel = (e:any) => {
setModalVisible(false)
RA(4, RAVAL2);
}
};
const handleCancel = (e: any) => {
setModalVisible(false);
};
return (
<>
{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>
<TitleBack title={"View Facility Bookings"} url={getUrlLast(location.pathname)+'?Facility=false'}/>
<hr />
<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>
<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>
<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)?
<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>
<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>
<Col>Deposit Required</Col>
<Col span={2}>{DataSaveDetail.marginFee}</Col>
</Row>
<div style={{marginTop:16}}>
<Button type="primary" onClick={makeFee}>Pay</Button>
<div style={{ marginTop: 16 }}>
<Button type="primary" onClick={makeFee}>
Pay
</Button>
</div>
<Line />
</>:null
}
{
(DataSaveDetail != null&&DataSave.marginFeeStatus == 1&&DataSaveDetail.managerFee>0) ?
</>
) : null}
{DataSaveDetail != null &&
DataSave.marginFeeStatus == 1 &&
DataSaveDetail.managerFee > 0 ? (
<>
<Form ref={formRef} name="basic2" onFinish={onFinish} onFinishFailed={onFinishFailed} >
<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>
<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 value={1} style={radioStyle}>
全额退还
</Radio>
<Radio value={2} style={radioStyle}>
部分退还{' '}
{backFeeFlag ? (
<>
<Input onChange={getBackMarginFee} style={{ width: 80 }} /> $
</>
) : null}
</Radio>
</Radio.Group>
</div>
{
backFeeFlag ?
{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>
<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>
) : 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}>取消预约</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>
}
</>
) : 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>
</Spin>
) : null}
</>
);
};
function mapStateToProps(state:any) {
const { DataSave,DataSaveDetail } = state.FacilityBookings;
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
View file @ e9315581
......@@ -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 {
//还差检测
if (checkParam(tmp)) {
console.log(tmp);
tmp.reservedTimeList = soltTime; // 预约时间
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}
<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
View file @ e9315581
......@@ -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
View file @ e9315581
......@@ -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
View file @ e9315581
......@@ -350,3 +350,9 @@ hr {
// transform: translateY(-50%);
}
}
.diytabs {
.ant-tabs-nav {
margin-bottom: 0;
}
}
src/utils/params.ts
View file @ e9315581
......@@ -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
View file @ e9315581
......@@ -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' }],
];
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment