Skip to content

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

新增小区搜索也一并新增，预定设施功能完善，预订列表提示等内容完善 

Signed-off-by: cellee's avatarcellee <893264950@qq.com>
parent 8ca7af94
Hide whitespace changes
Inline Side-by-side
Showing with 577 additions and 387 deletions
src/components/SelectOptions/index.jsx
View file @ f208c44a
...@@ -53,14 +53,12 @@ function getDotText(arr) { ...@@ -53,14 +53,12 @@ function getDotText(arr) {
} }
} }
class SelectOptions extends React.Component { class SelectOptions extends React.PureComponent {
state = {}; state = {};
constructor(props) { constructor(props) {
super(props); super(props);
const { list, dispatch, checklist } = this.props; const { list, dispatch, checklist } = this.props;
console.log(list);
if (list == null) { if (list == null) {
//console.error("组件错误:没有数据导入") //console.error("组件错误:没有数据导入")
} }
...@@ -102,7 +100,8 @@ class SelectOptions extends React.Component { ...@@ -102,7 +100,8 @@ class SelectOptions extends React.Component {
} }
console.log(this.state.componetVisible); console.log(this.state.componetVisible);
} }
// console.log(this.props.list); if (this.props.list.length > this.state.checkedList.length) {
}
// console.log(prevProps.list); // console.log(prevProps.list);
// if (this.props.list.length > prevProps.list.length) { // if (this.props.list.length > prevProps.list.length) {
// console.log(this.props.list); // console.log(this.props.list);
...@@ -229,7 +228,7 @@ class SelectOptions extends React.Component { ...@@ -229,7 +228,7 @@ class SelectOptions extends React.Component {
}; };
// 索引 -- 全部点击 // 索引 -- 全部点击
itemSelectAll = (e) => { itemSelectAll = (e) => {
console.log(this.props.list); // console.log(this.props.list);
this.setState({ this.setState({
checkedListOptions: this.props.list, checkedListOptions: this.props.list,
checkedList: this.state.resultList, checkedList: this.state.resultList,
......
src/models/CommunityManagement/CellList.ts
View file @ f208c44a
...@@ -64,8 +64,10 @@ export default { ...@@ -64,8 +64,10 @@ export default {
switch (playload.index) { switch (playload.index) {
case 24: case 24:
{ {
let CommunityList = null;
yield put({ type: 'Init/returnCommunityList', CommunityList });
let Data = resp.data; let Data = resp.data;
let CommunityList = resp.data.communityList; CommunityList = resp.data.communityList;
yield put({ type: 'returnPage', Data }); yield put({ type: 'returnPage', Data });
yield put({ type: 'Init/returnCommunityList', CommunityList }); yield put({ type: 'Init/returnCommunityList', CommunityList });
} }
......
src/models/CommunityManagement/Contract.ts
View file @ f208c44a
...@@ -2,117 +2,113 @@ import * as service from '../../services/tos'; ...@@ -2,117 +2,113 @@ import * as service from '../../services/tos';
import { message } from 'antd'; import { message } from 'antd';
import { Link, useIntl, connect, Dispatch, history } from 'umi'; import { Link, useIntl, connect, Dispatch, history } from 'umi';
import { routerRedux } from 'dva/router' import { routerRedux } from 'dva/router';
export default { export default {
namespace: 'Contract', namespace: 'Contract',
state: { state: {
Data: { data: [], total: 0 }, Data: { data: [], total: 0 },
curString:{}, curString: {},
Result: null, Result: null,
DataSave: null, DataSave: null,
DataSaveDetail:null, DataSaveDetail: null,
playload:{} playload: {},
}, },
reducers: { reducers: {
returnPage(state, { Data}) { returnPage(state, { Data }) {
return { ...state, Data }; return { ...state, Data };
}, },
returnResult(state, { Result}) { returnResult(state, { Result }) {
return { ...state, Result}; return { ...state, Result };
}, },
returnDataSave(state, { DataSave }) { returnDataSave(state, { DataSave }) {
return {...state,DataSave} return { ...state, DataSave };
}, },
returnDataSaveDetail(state, { DataSaveDetail }) { returnDataSaveDetail(state, { DataSaveDetail }) {
return {...state,DataSaveDetail} return { ...state, DataSaveDetail };
}, },
returnPath(state, { playload}) { returnPath(state, { playload }) {
return { ...state, playload }; return { ...state, playload };
}, },
}, },
effects: { effects: {
//预订设施查询 //预订设施查询
*RA({ playload }, { call, put }) { *RA({ playload }, { call, put }) {
console.log("开始请求") console.log('开始请求');
const resp = yield call(service.RA, playload); const resp = yield call(service.RA, playload);
console.log(resp) console.log(resp);
if (resp.code == 500||resp.error_code!="0000") { if (resp.code == 500 || resp.error_code != '0000') {
// window.location.href = '/500'; // window.location.href = '/500';
} }
if (resp.error_code != "0000") { if (resp.error_code != '0000') {
console.log("请求错误码:"+"("+playload.index+")" + resp.error_code) console.log('请求错误码:' + '(' + playload.index + ')' + resp.error_code);
console.log(playload) console.log(playload);
} else {
}
else {
switch (playload.index) { switch (playload.index) {
case 19: case 19:
{ {
let Data = resp.data; let Data = resp.data;
yield put({ type: 'returnPage', Data}); yield put({ type: 'returnPage', Data });
} break; }
break;
case 20: case 20:
{ {
let DataSaveDetail = resp.data; let DataSaveDetail = resp.data;
yield put({ type: 'returnDataSaveDetail', DataSaveDetail}); yield put({ type: 'returnDataSaveDetail', DataSaveDetail });
}
}break; break;
case 27: { case 27:
message.success('save success !'); {
var tmp=resp message.success('save success !');
yield put({ type: 'returnResult', tmp }) var tmp = resp;
setTimeout(function(){ yield put({ type: 'returnResult', tmp });
history.goBack() setTimeout(function () {
},1000) history.goBack();
} break; }, 1000);
}
break;
} }
} }
}, },
// url 带参数 // url 带参数
*RA2({ playload }, { call, put }){ // *RA2({ playload }, { call, put }){
console.log("开始请求") // console.log("开始请求")
const resp = yield call(service.RA2, playload); // const resp = yield call(service.RA2, playload);
console.log(resp) // console.log(resp)
}, // },
*ResultClear({ }, { put }) { *ResultClear({}, { put }) {
var tmp=null var tmp = null;
yield put({type: 'returnResult', tmp} ) yield put({ type: 'returnResult', tmp });
}, },
*SA({ playload }, { call, put }) { *SA({ playload }, { call, put }) {
var DataSave = playload var DataSave = playload;
yield put({type: 'returnDataSave', DataSave} ) yield put({ type: 'returnDataSave', DataSave });
}, },
*Paths({ playload }, { put }){ *Paths({ playload }, { put }) {
yield put({type: 'returnPath', playload} ) yield put({ type: 'returnPath', playload });
} },
}, },
subscriptions: { subscriptions: {
setup({ dispatch, history }) { setup({ dispatch, history }) {
// 监听 路由 // 监听 路由
return history.listen(({ pathname }) => { return history.listen(({ pathname }) => {
let path = { let path = {
path : pathname path: pathname,
} };
dispatch({ dispatch({
type: 'Paths', // 选择返回值 type: 'Paths', // 选择返回值
playload:{ playload: {
path path,
}, },
})
}); });
} });
} },
},
}; };
src/models/CommunityManagement/FacilityBookings.ts
View file @ f208c44a
...@@ -131,8 +131,14 @@ export default { ...@@ -131,8 +131,14 @@ export default {
break; break;
case 1: case 1:
{ {
let Data3 = resp.data; let Data3 = resp.data;
yield put({ type: 'returnPage3', Data3}); if (JSON.stringify(Data3) == "{}") {
Data3 = false
// 提示小区没有设施
message.error('There Are No Facilities In The Community !');
}
yield put({ type: 'returnPage3', Data3});
}break; }break;
case 2:{ case 2:{
...@@ -154,6 +160,11 @@ export default { ...@@ -154,6 +160,11 @@ export default {
let tmp = resp.data; let tmp = resp.data;
const reg = [["url", "categoriesImageUrl"], ["name", "categoriesName"]] const reg = [["url", "categoriesImageUrl"], ["name", "categoriesName"]]
const reg2 = [["url", null]] const reg2 = [["url", null]]
//let sourceData = tmp;
// sourceData.categoriesOpenTime= timeToMoment(tmp.categoriesOpenTime);
// sourceData.categoriesName = Fromate(tmp.categoriesList, reg),
// sourceData.categoriesDetailsImageName = Fromate(tmp.facilitiesImageList, reg2)
let sourceData = { let sourceData = {
canReservationDay: tmp.canReservationDay, canReservationDay: tmp.canReservationDay,
canReservationNum: tmp.canReservationNum, canReservationNum: tmp.canReservationNum,
......
src/pages/CommunityManagement/FacilityBookings/Bookings.tsx
View file @ f208c44a
import React, { useState, useEffect,useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import styles from './css/Bookings.less'; import styles from './css/Bookings.less';
import { Spin,Input ,DatePicker,Button,Form, Radio,TimePicker,Row, Col,message, Result} from 'antd'; import './css/Bookings.less';
import {
Spin,
Input,
DatePicker,
Button,
Form,
Radio,
TimePicker,
Row,
Col,
message,
Result,
} from 'antd';
const { RangePicker } = TimePicker; const { RangePicker } = TimePicker;
import {connect } from 'umi'; import { DollarOutlined, ClockCircleOutlined } from '@ant-design/icons';
import { connect } from 'umi';
import TitleBack from '../../../components/TitleBack/TitleBack'; import TitleBack from '../../../components/TitleBack/TitleBack';
import SearchOptionsCommnity from '../../../components/SearchOptions/SearchOptionsCommnity'; import SearchOptionsCommnity from '../../../components/SearchOptions/SearchOptionsCommnity';
...@@ -13,226 +26,335 @@ import SearchOptionsCommnity from '../../../components/SearchOptions/SearchOptio ...@@ -13,226 +26,335 @@ import SearchOptionsCommnity from '../../../components/SearchOptions/SearchOptio
import { numberToString } from '../../../utils/string'; import { numberToString } from '../../../utils/string';
import { checkData, checkInput } from '@/utils/method'; import { checkData, checkInput } from '@/utils/method';
import { validateMessages } from '@/utils/params'; import { validateMessages } from '@/utils/params';
const Bookings = (props:any) => {
// 日期
const { dispatch, Data3,Result,DataSave,token} = props; import moment from 'moment';
const RA = (index:any,values: any) => { dispatch({ type: 'FacilityBookings/RA', playload: { index: index, body: values } }) }; import { BookingsTip } from '@/utils/tip';
const IA = () => { dispatch({ type: 'FacilityBookings/IA' }) };
const SAClear = () => { dispatch({ type: 'FacilityBookings/SA',playload:null }) }; const Bookings = (props: any) => {
const ResultClear = () => { dispatch({ type: 'FacilityBookings/ResultClear' }) }; const { dispatch, Data3, Result, DataSave, token, load } = props;
const RA = (index: any, values: any) => {
dispatch({ type: 'FacilityBookings/RA', playload: { index: index, body: values } });
};
const IA = () => {
dispatch({ type: 'FacilityBookings/IA' });
};
const SAClear = () => {
dispatch({ type: 'FacilityBookings/SA', playload: null });
};
const ResultClear = () => {
dispatch({ type: 'FacilityBookings/ResultClear' });
};
const [comminityValues, setComminityValues] = useState(null); const [comminityValues, setComminityValues] = useState(null);
const [curString,setCurString]=useState({communityManagerFee:null,communityMargin:null}) const [curString, setCurString] = useState({
communityManagerFee: null,
communityMargin: null,
categoriesOpenTime: null,
} as any);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const formRef = useRef(null); const formRef = useRef(null);
// 是否不可选
const [prohibit, setProhibit] = useState(true);
console.log(curString);
useEffect(() => { useEffect(() => {
if (DataSave != null) { if (DataSave != null) {
console.log("页面进入参数") console.log('页面进入参数');
console.log(DataSave) console.log(DataSave);
setComminityValues(DataSave.communityName) setComminityValues(DataSave.communityName);
RA(1, { userToken: token, communityName: DataSave.communityName ,facilitieId:DataSave.id}) RA(1, { userToken: token, communityName: DataSave.communityName, facilitieId: DataSave.id });
} }
}, [DataSave]); }, [DataSave]);
useEffect(() => { useEffect(() => {
IA() IA();
}, []); }, []);
useEffect(() => { useEffect(() => {
if (Result != null) { if (Result != null) {
console.log(Result) console.log(Result);
message.error(Result.msg); message.error(Result.msg);
if (Result.index == 1) { if (Result.index == 1) {
IA() IA();
} }
setLoading(false) setLoading(false);
ResultClear() ResultClear();
} }
}, [Result]); }, [Result]);
useEffect(() => { // 选择小区监听是不是有值
setLoading(false) useEffect(() => {
if (Data3!=null) { setLoading(false);
console.log(Data3) console.log(Data3);
if (!Data3) {
// 如果没有值 要把Data3 从 false 复原成 null 并提示
dispatch({ type: 'FacilityBookings/returnPage3' });
} }
}, [Data3]); }, [Data3]);
const format = 'HH:mm';
const getFacility = (values: any) => {
SAClear()
setComminityValues(values)
console.log(values)
RA(1, { userToken: token, communityName: values })
setLoading(true)
}
const format = "HH:mm"
const checkParam = (values: any) => { const checkParam = (values: any) => {
var flag = true var flag = true;
for (var i in values) { for (var i in values) {
// console.log(values[i]); // console.log(values[i]);
if (values[i] == null) { if (values[i] == null) {
flag=false flag = false;
} else { } else {
if(values[i].length == 0){ flag=false} if (values[i].length == 0) {
} flag = false;
}
}
} }
return flag return flag;
} };
const onFinish = (value:any) => { const onFinish = (value: any) => {
console.log("Success:") console.log('Success:');
var tmp = value var tmp = value;
console.log(value) console.log(value);
// tmp.categoriesId = null // tmp.categoriesId = null
// tmp.facilitiesId = null // tmp.facilitiesId = null
// tmp.communityName = null // tmp.communityName = null
// tmp.communityManagerFee = null // tmp.communityManagerFee = null
// tmp.communityMargin=null // tmp.communityMargin=null
if (value.categoriesName != null) { if (value.categoriesName != null) {
tmp.categoriesId = value.categoriesName.categoriesId tmp.categoriesId = value.categoriesName.categoriesId;
tmp.facilitiesId=value.categoriesName.facilitiesId tmp.facilitiesId = value.categoriesName.facilitiesId;
tmp.categoriesName = value.categoriesName.categoriesName tmp.categoriesName = value.categoriesName.categoriesName;
} }
if (value.subscribeDate!= null) { if (value.subscribeDate != null) {
tmp.subscribeDate=value.subscribeDate.format('YYYY-M-D') tmp.subscribeDate = value.subscribeDate.format('YYYY-M-D');
} }
if (value.reservedTimeList != null) { if (value.reservedTimeList != null) {
tmp.reservedTimeList = [value.reservedTimeList[0].format('HH:mm'), value.reservedTimeList[1].format('HH:mm')] tmp.reservedTimeList = [
value.reservedTimeList[0].format('HH:mm'),
value.reservedTimeList[1].format('HH:mm'),
];
} }
if (comminityValues!=null) { if (comminityValues != null) {
tmp.communityName=comminityValues tmp.communityName = comminityValues;
} }
if (curString != null) { if (curString != null) {
tmp.communityManagerFee = numberToString(curString.communityManagerFee);
tmp.communityManagerFee = numberToString(curString.communityManagerFee) tmp.communityMargin = numberToString(curString.communityMargin);
tmp.communityMargin= numberToString(curString.communityMargin)
} }
if (tmp.accountName.length<2) { if (tmp.accountName.length < 2) {
message.error("User Name Should be limit 2~30!", 3) message.error('User Name Should be limit 2~30!', 3);
} else { } else {
//还差检测 //还差检测
if (checkParam(tmp)) { if (checkParam(tmp)) {
console.log(tmp) console.log(tmp);
RA(11, tmp) RA(11, tmp);
} else { } else {
message.error("Error,Please finish it,not empty!", 3) message.error('Error,Please finish it,not empty!', 3);
} }
} }
// console.log(checkParam(tmp)) // console.log(checkParam(tmp))
// console.log(comminityValues) // console.log(comminityValues)
// console.log(tmp) // console.log(tmp)
} };
const RadioChoose = (e:any) => { const RadioChoose = (e: any) => {
Data3.map((item: any, index: any) => { Data3.map((item: any, index: any) => {
item.categorieList.map((thing:any, i:any) => { item.categorieList.map((thing: any, i: any) => {
if (thing.categoriesId == (e.target.value).categoriesId) { if (thing.categoriesId == e.target.value.categoriesId) {
setCurString({ setCurString({
communityManagerFee: item.communityManagerFee, communityManagerFee: parseInt(item.communityManagerFee).toFixed(2),
communityMargin:item.communityMargin communityMargin: parseInt(item.communityMargin).toFixed(2),
}) categoriesOpenTime: item.categoriesOpenTime,
id: item.facilitiesId,
});
// 选择后取消输入框禁止
setProhibit(false);
// console.log(item.communityManagerFee) // console.log(item.communityManagerFee)
// console.log(item.communityMargin) // console.log(item.communityMargin)
} }
}) });
}) });
};
// 选择小区名字发起请求
const getFacility = (values: any) => {
SAClear();
setComminityValues(values);
console.log(values);
RA(1, { userToken: token, communityName: values });
setLoading(true);
};
// 设置之前时间不能选择
function disabledDate(current: any) {
return current && current <= moment().subtract(1, 'days').endOf('day');
} }
// 确认日期
const confirmData = (value: any) => {
console.log(value);
};
return ( return (
<div className={styles.base}> <div className={styles.base}>
{/* 头部组件v1.2 */} {/* 头部组件v1.2 */}
<TitleBack title="Facility Bookings" /> <TitleBack title="Facility Bookings" />
<div className={styles.box1}> <div className={styles.box1}>
<div className={styles.box1item1}>Project</div> <div className={styles.box1item1}>Project : </div>
<div className={styles.box1item2}> <div className={styles.box1item2}>
<Spin spinning={loading} tip="Finding..."> <Spin spinning={loading} tip="Finding...">
<SearchOptionsCommnity alone={true} placeholder={"Community Name"} defaultValue={DataSave != null ? DataSave.communityName : null} onSubmit={getFacility} /> <SearchOptionsCommnity
alone={true}
placeholder={'Community Name'}
opname={getFacility}
defaultValue={DataSave != null ? DataSave.communityName : null}
// onSubmit={getFacility}
/>
</Spin> </Spin>
{/* <Input.Search style={{ width: 200, height: 32 }} onSearch={getFacility} loading={loading} defaultValue={}/> */} {/* <Input.Search style={{ width: 200, height: 32 }} onSearch={getFacility} loading={loading} defaultValue={}/> */}
</div> </div>
</div> </div>
{Data3 != null ? {Data3 ? (
<> <>
<Form ref={formRef} name="basic" onFinish={onFinish} validateMessages={validateMessages} > <Form ref={formRef} name="basic" onFinish={onFinish} validateMessages={validateMessages}>
<div className={styles.box2}> <div className={styles.box2}>
<div className={styles.box2item1}>Facility Bookings</div> <div className={styles.box2item1}>Facility Bookings : </div>
<div className={styles.box2item2}> <div className={styles.box2item2}>
<Form.Item name="categoriesName" > <Form.Item name="categoriesName">
<Radio.Group defaultValue={1} onChange={RadioChoose}> <Radio.Group defaultValue={1} onChange={RadioChoose}>
{ {Data3.map((item: any, index: any) => {
Data3.map((item: any, index: any) => { var tmp = new Array();
var tmp=new Array() item.categorieList.map((thing: any, i: any) => {
item.categorieList.map((thing: any, i: any) => { tmp.push(
tmp.push(<Radio key={thing.categoriesId} value={thing}>{thing.categoriesName}</Radio>) <Radio key={thing.categoriesId} value={thing}>
}) {thing.categoriesName}
return ( </Radio>,
tmp );
) });
}) return tmp;
} })}
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
</div>
</div> </div>
</div> <div className={styles.line}></div>
<div className={styles.line}></div>
<div className={styles.box3}>
<div className={styles.box3}> <div className={styles.box3item1}>User Name : </div>
<div className={styles.box3item1}>User Name</div> <div className={styles.box3item2}>
<div className={styles.box3item2}><Form.Item name="accountName" rules={[{required:true,min:2,max:30}]} ><Input style={{ width: 200 }} /></Form.Item></div> <Form.Item name="accountName" rules={BookingsTip[0]}>
<div className={styles.box3item3}>Contact Details</div> <Input
<div className={styles.box3item4}><Form.Item name="accountPhone" rules={[{required:true},{validator: checkData, trigger: 'blur'}]} ><Input style={{ width: 200 }}/></Form.Item></div> style={{ width: 200 }}
</div> placeholder="Name Of Subscriber"
disabled={prohibit}
<div className={styles.box4}> />
<div className={styles.box4item1}>Unit</div> </Form.Item>
<div className={styles.box4item2}><Form.Item name="buildNumber" rules={[{required:true},{validator: checkData, trigger: 'blur'}]}><Input placeholder="building" style={{ width: 80 }} /></Form.Item></div> </div>
<div className={styles.box4item3}>#</div> <div className={styles.box3item3}>Contact Details : </div>
<div className={styles.box4item4}><Form.Item name="floorNumber" rules={[{required:true},{validator: checkData, trigger: 'blur'}]}><Input placeholder="floor" style={{ width: 80 }} /></Form.Item></div> <div className={styles.box3item4}>
<div className={styles.box4item5}>——</div> <Form.Item name="accountPhone" rules={BookingsTip[1]}>
<div className={styles.box4item6}><Form.Item name="roomNumber" rules={[{required:true},{validator: checkData, trigger: 'blur'}]}><Input placeholder="room" style={{ width: 80 }} /></Form.Item></div> <Input
</div> style={{ width: 200 }}
placeholder="Contact Information"
<div className={styles.line}></div> disabled={prohibit}
/>
<div className={styles.box5}> </Form.Item>
<div className={styles.box5item1}>Booking Schedule</div> </div>
<div className={styles.box5item2}>
<Row gutter={8}>
<Col><Form.Item name="subscribeDate" rules={[{required:true}]}><DatePicker /></Form.Item></Col>
<Col><Form.Item name="reservedTimeList" rules={[{required:true}]}><RangePicker format={format}/></Form.Item></Col>
</Row>
</div> </div>
<div className={styles.box4}>
<div className={styles.box4item1}>Unit : </div>
<div className="divbox4">
<Form.Item name="buildNumber" rules={BookingsTip[2]}>
<Input placeholder="Building" style={{ width: 80 }} disabled={prohibit} />
</Form.Item>
<span className="jio">#</span>
<Form.Item name="floorNumber" rules={BookingsTip[3]}>
<Input placeholder="Floor" style={{ width: 80 }} disabled={prohibit} />
</Form.Item>
<span className="heng">--</span>
<Form.Item name="roomNumber" rules={BookingsTip[4]}>
<Input placeholder="Room" style={{ width: 80 }} disabled={prohibit} />
</Form.Item>
</div>
</div> </div>
{ <div className={styles.line}></div>
curString.communityManagerFee!=null?
<> <div className={styles.box5}>
<div className={styles.box6}> <div className={styles.box5item1}>Booking Schedule : </div>
<div className={styles.box6item1}>Management fee required</div> <div className={styles.box5item2}>
<div className={styles.box6item2}>${curString.communityManagerFee}</div> <Row gutter={8}>
<Col>
<Form.Item name="subscribeDate" rules={BookingsTip[5]}>
<DatePicker
placeholder="Select Date"
disabledDate={disabledDate}
onChange={confirmData}
disabled={prohibit}
/>
</Form.Item>
</Col>
<Col>
<Form.Item name="reservedTimeList" rules={BookingsTip[6]}>
<RangePicker
placeholder={['Start Time', 'End Time']}
format={format}
disabled={prohibit}
/>
</Form.Item>
</Col>
</Row>
</div> </div>
</div>
{curString.communityManagerFee != null ? (
<>
<div className={styles.box6}>
<div className={styles.box6item1}>Management fee required : </div>
<div className={styles.box6item2}>
<DollarOutlined style={{ color: '#999' }} /> {curString.communityManagerFee}
</div>
</div>
<div className={styles.box6}> <div className={styles.box6}>
<div className={styles.box6item1}>Deposit is required</div> <div className={styles.box6item1}>Deposit is required : </div>
<div className={styles.box6item2}>${curString.communityMargin}</div> <div className={styles.box6item2}>
</div> <DollarOutlined style={{ color: '#999' }} /> {curString.communityMargin}
</>:null </div>
} </div>
<div className={styles.box6}>
<div className={styles.line}></div><Button htmlType="submit" type="primary" style={{ width: 80, height: 32 }}>Submit</Button> <div className={styles.box6item1}>Opening Hours : </div>
<div className={styles.box6item2}>
<ClockCircleOutlined style={{ color: '#999' }} /> {curString.categoriesOpenTime}
</div>
</div>
</>
) : null}
<div className={styles.line}></div>
<Button
htmlType="submit"
type="primary"
loading={false}
style={{ width: 80, height: 32 }}
>
Submit
</Button>
</Form> </Form>
</> : null </>
} ) : null}
</div> </div>
); );
}; };
function mapStateToProps(state:any) { function mapStateToProps(state: any) {
const { Data3,Result,DataSave } = state.FacilityBookings; const { Data3, Result, DataSave } = state.FacilityBookings;
const { token } = state.login; const { token } = state.login;
return { return {
Data3, Data3,
Result, Result,
......
src/pages/CommunityManagement/FacilityBookings/Facility.tsx
View file @ f208c44a
...@@ -66,17 +66,14 @@ const Facility = (props: any) => { ...@@ -66,17 +66,14 @@ const Facility = (props: any) => {
const formRef = useRef(null); const formRef = useRef(null);
// 进来先清空上传图片列表
useEffect(() => {
dispatch({ type: module + '/overAllImgList' });
}, [1]);
// 再监听列表 // 再监听列表
const [extImgList, setextImgList] = useState(imgList); const [extImgList, setextImgList] = useState(imgList);
useEffect(() => { useEffect(() => {
console.log('变化'); console.log('变化');
console.log(imgList); console.log(imgList);
setextImgList(imgList); if (imgList != null) {
setextImgList(imgList);
}
}, [imgList]); }, [imgList]);
useEffect(() => { useEffect(() => {
...@@ -144,12 +141,12 @@ const Facility = (props: any) => { ...@@ -144,12 +141,12 @@ const Facility = (props: any) => {
var result = values; var result = values;
// 过滤表单; // 过滤表单;
let imgs = extImgList.filter((item: any) => (Object.keys(item).length == 0 ? false : true)); let imgs = extImgList.filter((item: any) => (Object.keys(item).length == 0 ? false : true));
console.log(imgs.length);
// 开放时间判断 // 开放时间判断
if (imgs.length < 1) { if (imgs.length == 0) {
message.error('请至少上传一个设施'); message.error('Please upload at least one facility!');
} else if (!result.endTime && !result.startTime) { } else if (!result.endTime && !result.startTime) {
message.error('请选择开放时间'); message.error('Please select the opening time!');
} else { } else {
// 先处理设施和时间 // 先处理设施和时间
let categoriesName: any = []; let categoriesName: any = [];
...@@ -161,13 +158,16 @@ const Facility = (props: any) => { ...@@ -161,13 +158,16 @@ const Facility = (props: any) => {
if (imgs[i].name && imgs[i].pic) { if (imgs[i].name && imgs[i].pic) {
categoriesName[i] = `${imgs[i].name}&${imgs[i].pic}`; categoriesName[i] = `${imgs[i].name}&${imgs[i].pic}`;
} else { } else {
message.error('请填写设备名称'); message.error('Please fill in the name of the facility!');
return; return;
} }
} }
result.categoriesName = categoriesName; result.categoriesName = categoriesName; // 设施内容
result.reservationQuantumTime = reservationQuantumTime; result.reservationQuantumTime = reservationQuantumTime; // 开放时间段
result.categoriesOpenTime = `${result.startTime}-${result.endTime}`; // 预约时间段 二开需要
delete result.startTime;
delete result.periodType;
delete result.picList;
console.log(reservationQuantumTime); console.log(reservationQuantumTime);
console.log(result); console.log(result);
RA(6, result); RA(6, result);
......
src/pages/CommunityManagement/FacilityBookings/FacilityBookings.tsx
View file @ f208c44a
...@@ -21,7 +21,9 @@ import { getUrlLastParams } from '../../../utils/string'; ...@@ -21,7 +21,9 @@ import { getUrlLastParams } from '../../../utils/string';
import './css/index.less'; import './css/index.less';
import ProTable from '@ant-design/pro-table'; import ProTable from '@ant-design/pro-table';
import { PlusOutlined, SearchOutlined, ClearOutlined } from '@ant-design/icons'; import { PlusOutlined, ClockCircleOutlined, ClearOutlined } from '@ant-design/icons';
import moment from 'moment';
const FacilityBookings = (props: any) => { const FacilityBookings = (props: any) => {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
...@@ -53,6 +55,8 @@ const FacilityBookings = (props: any) => { ...@@ -53,6 +55,8 @@ const FacilityBookings = (props: any) => {
const goToFunction = () => { const goToFunction = () => {
if (curString.tab == 2) { if (curString.tab == 2) {
CA(); CA();
// 先清空上传图片列表
dispatch({ type: 'FacilityBookings/overAllImgList' });
} }
history.push(location.pathname + (curString.tab == 1 ? '/Booking' : '/Adding')); history.push(location.pathname + (curString.tab == 1 ? '/Booking' : '/Adding'));
}; };
...@@ -78,10 +82,25 @@ const FacilityBookings = (props: any) => { ...@@ -78,10 +82,25 @@ const FacilityBookings = (props: any) => {
[ [
'Order Time', 'Order Time',
null, null,
(text: any, record: any) => <div>{timestampToTime(record.createTime.time)}</div>, (text: any, record: any) => (
<div>
<ClockCircleOutlined style={{ color: '#666' }} />
&nbsp;
{moment(record.createTime.time).format('YYYY-MM-DD')}
</div>
),
], ],
['Booking Schedule', 'subscribeDate'], [
'Booking Schedule',
'subscribeDate',
(text: any) => (
<div>
<ClockCircleOutlined style={{ color: '#666' }} />
&nbsp;{text}
</div>
),
],
['Fee', 'managerFeeStatus', (text: any) => <div>{managerFeeStatusDes[text]}</div>], ['Fee', 'managerFeeStatus', (text: any) => <div>{managerFeeStatusDes[text]}</div>],
['Deposit', 'marginFeeStatus', (text: any) => <div>{marginFeeStatusDes[text]}</div>], ['Deposit', 'marginFeeStatus', (text: any) => <div>{marginFeeStatusDes[text]}</div>],
['Status', 'status', (text: any) => <div>{statusDes[text]}</div>], ['Status', 'status', (text: any) => <div>{statusDes[text]}</div>],
...@@ -268,7 +287,7 @@ const FacilityBookings = (props: any) => { ...@@ -268,7 +287,7 @@ const FacilityBookings = (props: any) => {
<Tabs defaultActiveKey={curString.tab.toString()} onChange={TabCallback}> <Tabs defaultActiveKey={curString.tab.toString()} onChange={TabCallback}>
<TabPane tab="Facility Bookings" key="1"> <TabPane tab="Facility Bookings" key="1">
<Table <ProTable
loading={loading} loading={loading}
rowKey="id" rowKey="id"
style={{ marginTop: 16 }} style={{ marginTop: 16 }}
...@@ -280,6 +299,22 @@ const FacilityBookings = (props: any) => { ...@@ -280,6 +299,22 @@ const FacilityBookings = (props: any) => {
showSizeChanger: false, showSizeChanger: false,
onChange: Pagechange, onChange: Pagechange,
}} }}
search={false}
toolBarRender={() => [
<Button key="3" type="primary" onClick={goToFunction}>
<PlusOutlined />
添加预约
</Button>,
]}
options={{
density: true,
fullScreen: true,
reload: () => {
// onReset();
},
setting: false,
}}
headerTitle="预约列表"
/> />
</TabPane> </TabPane>
...@@ -299,14 +334,7 @@ const FacilityBookings = (props: any) => { ...@@ -299,14 +334,7 @@ const FacilityBookings = (props: any) => {
// pagination={false} // 隐藏默认分页 // pagination={false} // 隐藏默认分页
search={false} search={false}
toolBarRender={() => [ toolBarRender={() => [
<Button <Button key="3" type="primary" onClick={goToFunction}>
key="3"
type="primary"
onClick={() => {
// goToAdd(0, {});
goToFunction();
}}
>
<PlusOutlined /> <PlusOutlined />
添加设施 添加设施
</Button>, </Button>,
......
src/pages/CommunityManagement/FacilityBookings/css/Bookings.less
View file @ f208c44a
...@@ -2,167 +2,189 @@ ...@@ -2,167 +2,189 @@
//基石 //基石
.base { .base {
width: 100%; width: 100%;
background-color: #ffffff; background-color: #ffffff;
padding: 34px; padding: 20px;
min-width: 1020px;
} }
//头部组件 //头部组件
.box{ .box {
width: 100%; width: 100%;
height: 64px; height: 64px;
position: relative; position: relative;
} }
.item1{ .item1 {
position: absolute; position: absolute;
width: 180px; width: 180px;
text-align: center; text-align: center;
border-left: 5px solid rgba(24,144,255,1); border-left: 5px solid rgba(24, 144, 255, 1);
font-family:'Source Han Sans CN'; font-family: 'Source Han Sans CN';
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #000000; color: #000000;
}
} .item2 {
.item2{ width: 300px;
width:300px; position: absolute;
position: absolute; left: (300px);
left: (300px); line-height: 30px;
line-height: 30px; }
}
.item4 {
.item4{ position: absolute;
position: absolute; left: (500px);
left: (500px); line-height: 30px;
line-height: 30px; }
} .item3 {
.item3{ width: 80px;
width:80px; height: 32px;
height: 32px; position: absolute;
position: absolute; right: 0;
right: 0;
outline: none;
outline: none; background: none;
background:none; cursor: pointer;
cursor: pointer;
border: 1px solid rgba(217, 217, 217, 1);
border:1px solid rgba(217,217,217,1); border-radius: 2px;
border-radius:2px; }
}
.box1 {
.box1{ width: 100%;
width: 100%; height: 34px;
height: 34px; position: relative;
position: relative; margin-bottom: 26px;
margin-bottom: 26px; }
} .box1item1 {
.box1item1{ position: absolute;
position: absolute; line-height: 32px;
} }
.box1item2{ .box1item2 {
position: absolute; position: absolute;
left: 161px; left: 135px;
} }
.box2{ .box2 {
width: 100%; width: 100%;
position: relative; position: relative;
}
} .box2item1 {
.box2item1{ position: absolute;
position: absolute; line-height: 32px;
} }
.box2item2{ .box2item2 {
width: 336px; width: 336px;
padding-left: 161px; padding-left: 135px;
} }
// 线栏 // 线栏
.line{ .line {
width: 100%;
height: 1px;
border-top: 1px solid rgba(217, 217, 217, 1);
margin-top: 28px;
margin-bottom: 28px;
}
.box3 {
width: 100%;
height: 32px;
position: relative;
margin-bottom: 28px;
}
.box3item1 {
position: absolute;
line-height: 32px;
}
.box3item2 {
position: absolute;
left: 135px;
}
.box3item3 {
position: absolute;
left: 467px;
line-height: 32px;
}
.box3item4 {
position: absolute;
left: 592px;
}
.box4 {
width: 100%;
min-height: 32px;
position: relative;
&::after {
content: '';
display: block;
width: 100%; width: 100%;
height: 1px; clear: both;
border-top: 1px solid rgba(217,217,217,1); }
margin-top: 28px;
margin-bottom: 28px;
} }
.box4item1 {
.box3{ position: absolute;
width: 100%; line-height: 32px;
height: 32px;
position: relative;
margin-bottom: 28px;
} }
.box3item1{ .box4item2 {
position: absolute; position: absolute;
left: 135px;
} }
.box3item2{ .box4item3 {
position: absolute; position: absolute;
left: 161px; left: 257px;
} }
.box3item3{ .box4item4 {
position: absolute; position: absolute;
left: 467px; left: 281px;
} }
.box3item4{ .box4item5 {
position: absolute; position: absolute;
left: 592px; left: 365px;
} }
.box4{ .box4item6 {
width: 100%; position: absolute;
height: 32px; left: 380px;
position: relative;
}
.box4item1{
position: absolute;
}
.box4item2{
position: absolute;
left: 161px;
} }
.box4item3{
position: absolute; .box5 {
left: 257px; width: 100%;
} height: 32px;
.box4item4{ position: relative;
position: absolute; margin-bottom: 28px;
left: 281px;
} }
.box4item5{ .box5item1 {
position: absolute; position: absolute;
left: 365px; line-height: 32px;
} }
.box5item2 {
.box4item6{ position: absolute;
position: absolute; left: 135px;
left: 380px;
} }
.box6 {
.box5{ width: 100%;
width: 100%; height: 32px;
height: 32px; position: relative;
position: relative; margin-bottom: 20px;
margin-bottom: 28px;
} }
.box5item1{ .box6item1 {
position: absolute; position: absolute;
} }
.box5item2{ .box6item2 {
position: absolute; position: absolute;
left: 161px; left: 216px;
} }
.box6{ .divbox4 {
width: 100%; position: absolute;
height: 32px; left: 135px;
position: relative; .ant-form-item {
display: inline-block;
} }
.box6item1{ .jio,
position: absolute; .heng {
display: inline-block;
line-height: 32px;
margin: 0 20px;
}
} }
.box6item2{
position: absolute;
left: 216px;
}
\ No newline at end of file
src/utils/tip.ts
View file @ f208c44a
...@@ -40,3 +40,13 @@ export const NewFaci = [ ...@@ -40,3 +40,13 @@ export const NewFaci = [
[{ required: false, message: 'Required' }], [{ required: false, message: 'Required' }],
[{ required: false, message: 'Required' }], [{ required: false, message: 'Required' }],
]; ];
// 设施预订
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' }],
];
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