Skip to content

T
TOSTUMI
Commit 54d57050 authored by maple's avatar maple
Browse files
Options

[finish]设施整体

parent 2a973837
Hide whitespace changes
Inline Side-by-side
Showing with 299 additions and 65 deletions
config/config.ts
View file @ 54d57050
......@@ -216,7 +216,10 @@ export default defineConfig({
{ path: "./", component: './CommunityManagement/FacilityBookings/FacilityBookings' },
{ path: "./Adding", component: './CommunityManagement/FacilityBookings/FacilityManager' },
{ path: "./Booking", component: './CommunityManagement/FacilityBookings/Bookings' },
{path:"./Detail",component:'./CommunityManagement/FacilityBookings/Detail'}
{ path: "./Detail", component: './CommunityManagement/FacilityBookings/Detail' },
{ path: "./FacilityEdit", component: './CommunityManagement/FacilityBookings/FacilityManager' },
{ path: "./FacilityDetail", component: './CommunityManagement/FacilityBookings/FacilityManager' },
{path:"./FacilityApply",component:'./CommunityManagement/FacilityBookings/Bookings'}
]
},
{
......
src/components/PictureOptions/Picture.tsx
View file @ 54d57050
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Upload, Modal,Row,Col,Input } from 'antd';
......@@ -20,10 +20,28 @@ const Picture = (props:any) => {
const [previewTitle, setPreviewTitle] = useState('')
const [fileList, setFileList] = useState([])
useEffect(() => {
var tmp = props.defaultValue
console.log(tmp)
var checkFlag=false
if (tmp != null) {
tmp.map((item, index) => {
if (item.name == null) {
checkFlag=true
}
})
if (!checkFlag) {
console.log("picture")
console.log(tmp)
setFileList(tmp)
}
}
},[])
const handleCancel = () => {
setPreviewVisible(false)
}
const handlePreview = async file => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
......@@ -56,7 +74,7 @@ const Picture = (props:any) => {
data={props.data}
fileList={fileList}
onPreview={handlePreview} onChange={handleChange}>
onPreview={handlePreview} onChange={handleChange} disabled={props.disabled}>
{fileList.length >= 1 ? null : uploadButton}
</Upload>
)
......
src/components/PictureOptions/PictureOptions.tsx
View file @ 54d57050
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import styles from './index.less';
......@@ -8,16 +8,39 @@ import { PlusOutlined,PictureFilled } from '@ant-design/icons';
import Picture from './Picture';
import { getUrlPicName } from '../../utils/string';
const PictureOptions = (props:any) => {
const [fileList, setFileList] = useState([{index: 0,name:null,pic:null}])
const [fileList, setFileList] = useState([])
const [fileListLen, setFileListLen] = useState(0)
const add = () => {
setFileListLen(fileListLen + 1)
setFileList(fileList => ([...fileList, {index:fileListLen + 1,name:null,pic:null}]))
setFileList(fileList => ([...fileList, {index:fileListLen + 1,name:null,pic:null}]))
}
useEffect(() => {
var tmp = props.defultValue
if (tmp != null) {
var initArray = new Array()
tmp.map((item: any, index: any) => {
if (item.pic == null) {
item.pic = getUrlPicName(item.url)
}
initArray.push({
index: index,
name: item.name,
pic: item.pic,
url: item.url,
uid: index,
status:"Done"})
})
setFileList(initArray)
props.putSubmit( CheckParm(initArray))
setFileListLen(initArray.length + 1)
} else {
setFileList([{index: 0,name:null,pic:null}])
}
},[])
const Delete = (index: any, e: any) => {
var tmp = fileList
......@@ -58,10 +81,13 @@ const PictureOptions = (props:any) => {
fileList.map((item, index) => {
return (
<Row key={item.index}>
<Col><Picture onSubmit={PictureName.bind(this, index)} data={props.data}/></Col>
<Col><Picture onSubmit={PictureName.bind(this, index)} data={props.data} defaultValue={[item]} disabled={props.disabled}/></Col>
<Col>
<Row><Input placeholder={"Facility Name"+item.index} onChange={InputGet.bind(this,index)}/></Row>
<Row style={{marginTop:20}}><a onClick={Delete.bind(this,index)}>delete</a></Row>
<Row><Input placeholder={"Facility Name"} onChange={InputGet.bind(this, index)} defaultValue={item.name} disabled={props.disabled}/></Row>
{
props.disabled ? null :
<Row style={{ marginTop: 20 }}><a onClick={Delete.bind(this, index)}>delete</a></Row>
}
</Col>
</Row>
)
......@@ -69,7 +95,11 @@ const PictureOptions = (props:any) => {
}
<div>
<Button type="primary" onClick={add}>Add New</Button>
{
props.disabled?null:
<Button type="primary" onClick={add}>Add New</Button>
}
</div>
</div>
......
src/components/PictureOptions/PictureOptionsRow.tsx
View file @ 54d57050
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import styles from './index.less';
......@@ -21,7 +21,7 @@ const uploadButton = (
<div className="ant-upload-text">Upload</div>
</div>
);
import { getUrlPicName } from '../../utils/string';
const PictureOptionsRow = (props:any) => {
const [fileList, setFileList] = useState([])
......@@ -29,6 +29,24 @@ const PictureOptionsRow = (props:any) => {
const [previewImage,setPreviewImage]=useState('')
const handleCancel = () => setPreviewVisible(false);
useEffect(() => {
if (props.defultValue!=null) {
var tmp = props.defultValue;
var result = new Array()
var resultToInside=new Array()
tmp.map((item, index) => {
if (item.name == null) {
item.name = getUrlPicName(item.url)
item.uid=index
}
result.push(item)
resultToInside.push(item.name)
})
setFileList(result)
props.putSubmit(resultToInside)
}
}, [])
const handlePreview = async file => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
......@@ -56,9 +74,10 @@ const PictureOptionsRow = (props:any) => {
data={props.data}
fileList={fileList}
onPreview={handlePreview}
onChange={handleChange}
onChange={handleChange}
disabled={props.disabled}
>
{fileList.length >= 8 ? null : uploadButton}
{fileList.length >= 8 ? null : (props.disabled?null:uploadButton)}
</Upload>
<Modal
visible={previewVisible}
......
src/components/TimeSelect/TimeSelect.tsx
View file @ 54d57050
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { TimePicker } from 'antd';
const { RangePicker } = TimePicker;
import moment from 'moment';
......@@ -10,12 +10,27 @@ import { Color } from 'chalk';
import Item from 'antd/lib/list/Item';
const format = 'HH:mm';
import {timeToMoment} from '../../utils/time'
const TimeSelect = (props:any) => {
const [times, setTimes] = useState([{index: 0,time:null}])
const [times, setTimes] = useState([])
const [timesLen, setTimesLen] = useState(0)
useEffect(() => {
if (props.defaultValue != null) {
var tmp = props.defaultValue
console.log(tmp)
var result=new Array()
tmp.map((item, index) => {
result.push({index:index,time:item})
})
setTimes(result)
setTimesLen(result.length)
props.putSubmit( CheckParm(result))
} else {
setTimes([{index: 0,time:null}])
}
},[])
const add =() => {
setTimesLen(timesLen + 1)
setTimes(times => ([...times, {index:timesLen + 1,time:null}]))
......@@ -59,17 +74,23 @@ const TimeSelect = (props:any) => {
return (
<Row key={item.index} style={{marginBottom:16}}>
<Col>
<RangePicker defaultValue={moment('9:00', format)} minuteStep={5} format={format} onChange={timeChange.bind(this,index)}/>
</Col>
<Col><DeleteOutlined style={{ cursor: "pointer", marginTop: 10, marginLeft: 8, color: "red" }} onClick={Delete}/> </Col>
<RangePicker disabled={props.disabled} defaultValue={timeToMoment(item.time)} minuteStep={5} format={format} onChange={timeChange.bind(this,index)}/>
</Col>
{
props.disabled?null: <Col><DeleteOutlined style={{ cursor: "pointer", marginTop: 10, marginLeft: 8, color: "red" }} onClick={Delete}/> </Col>
}
</Row>
)
})
}
</Col>
<Col>
<PlusCircleFilled style={{ fontSize: 20, cursor: "pointer", marginTop: 8,color:"rgba(24,144,255,1)"}} onClick={add} />
</Col>
{
props.disabled?null:<Col> <PlusCircleFilled style={{ fontSize: 20, cursor: "pointer", marginTop: 8,color:"rgba(24,144,255,1)"}} onClick={add} /></Col>
}
</Row>
</>
......
src/models/CommunityManagement/FacilityBookings.ts
View file @ 54d57050
......@@ -13,7 +13,9 @@ export default {
Data4:null,
Data3Error: false,
DataSave: null,
DataSaveDetail:null,
DataSaveDetail: null,
sourceData:null,
},
reducers: {
......@@ -34,7 +36,10 @@ export default {
},
DataSaveDetail(state, { DataSaveDetail,}) {
return { ...state, DataSaveDetail };
}
},
returnSource(state, { sourceData }) {
return { ...state, sourceData };
}
},
effects: {
......@@ -92,6 +97,26 @@ export default {
case 5: {
window.location.href = '/CommunityManagement/FacilityBookings';
} break;
case 6: {
window.location.href = '/CommunityManagement/FacilityBookings';
} break;
case 7: {
let tmp = resp.data;
let sourceData = {
canReservationDay: tmp.canReservationDay,
canReservationNum: tmp.canReservationNum,
cancelReservationDay: tmp.cancelReservationDay,
categoriesOpenTime: tmp.categoriesOpenTime,
communityManagerFee: tmp.communityManagerFee,
communityMargin: tmp.communityMargin,
communityName: tmp.communityName,
facilityName: tmp.facilityName,
nomarginCancelReservationDay: tmp.nomarginCancelReservationDay,
periodType: tmp.periodType,
}
console.log(sourceData)
yield put({ type: 'returnSource', sourceData });
} break;
}
}
......
src/pages/CommunityManagement/FacilityBookings/Bookings.tsx
View file @ 54d57050
......@@ -10,12 +10,16 @@ import { Link, useIntl, connect, Dispatch } from 'umi';
import TitleBack from '../../../components/TitleBack/TitleBack';
const Bookings = (props:any) => {
const { dispatch, location, Data3,Data3Error,Data4,token} = props;
const { dispatch, location, Data3,Data3Error,Data4,DataSave,token} = props;
const RA = (index:any,values: any) => { dispatch({ type: 'FacilityBookings/RA', playload: { index: index, body: values } }) };
const IA = () => { dispatch({ type: 'FacilityBookings/IA' }) };
const [loading, setLoading] = useState(false);
useEffect(() => {
RA(1, { userToken: token, communityName: DataSave.communityName })
}, [DataSave]);
useEffect(() => {
IA()
}, []);
......@@ -52,7 +56,7 @@ const Bookings = (props:any) => {
<div className={styles.box1}>
<div className={styles.box1item1}>Project</div>
<div className={styles.box1item2}>
<Input.Search style={{ width: 200, height: 32 }} onSearch={getFacility} loading={loading} />
<Input.Search style={{ width: 200, height: 32 }} onSearch={getFacility} loading={loading} defaultValue={DataSave.communityName}/>
</div>
</div>
{Data3 != null ?
......@@ -117,13 +121,14 @@ const Bookings = (props:any) => {
};
function mapStateToProps(state:any) {
const { Data3,Data4,Data3Error } = state.FacilityBookings;
const { Data3,Data4,Data3Error,DataSave } = state.FacilityBookings;
const { token } = state.login;
return {
Data3,
Data4,
Data3Error,
token
DataSave,
token,
};
}
export default connect(mapStateToProps)(Bookings);
src/pages/CommunityManagement/FacilityBookings/FacilityBookings.tsx
View file @ 54d57050
......@@ -43,7 +43,7 @@ const FacilityBookings = (props:any) => {
const makeOperator = (values: any,index:any, e: any) => {
const path = ['/FacilityDetail', '/FacilityEdit', '/FacilityApply']
//console.log(path[index])
SA(values)
history.push(location.pathname + path[index])
}
......
src/pages/CommunityManagement/FacilityBookings/FacilityManager.tsx
View file @ 54d57050
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect,useRef } from 'react';
import styles from './index.less';
import { Input ,Upload,Modal,Button,Space,Pagination,Tooltip, Radio, Form,Row, Col,Select } from 'antd';
import { Input ,Upload,Modal,Button,Space,Pagination,Tooltip, Radio, Form,Row, Col,Select, message } from 'antd';
const { Option } = Select;
import { Link, useIntl, connect, Dispatch } from 'umi';
......@@ -11,14 +11,67 @@ import PictureOptionsRow from '../../../components/PictureOptions/PictureOptions
import TitleBack from '../../../components/TitleBack/TitleBack';
import TimeSelect from '../../../components/TimeSelect/TimeSelect';
import Line from '../../../components/Line/Line';
import { values } from 'lodash';
// categoriesDetailsImageName: ["test.jpg"],
// categoriesName: ["篮球场A&test.jpg"],
// reservationQuantumTime: ["09:00-07:00"]
const Data = {
canReservationDay: "5",
canReservationNum: "6",
cancelReservationDay: "3",
categoriesOpenTime: "09:00-20:00",
communityManagerFee: "18",
communityMargin: "20",
communityName: "A9",
facilityName: "篮球场",
nomarginCancelReservationDay: "4",
periodType: "2",
}
const FacilityManager = (props:any) => {
const { dispatch, location, token } = props;
const { dispatch, location, token,sourceData,DataSave} = props;
const RA = (index:any,values: any) => { dispatch({ type: 'FacilityBookings/RA', playload: { index: index, body: values } }) };
const [Ref1, setRef1] = useState([])
const [Ref2, setRef2] = useState([])
const [Ref3, setRef3] = useState([])
const [extend, setExtend] = useState(null)
const [facilityDetail, setFacilityDetail] = useState(false)
const [PATHNAME, setPATHNAME] = useState("")
const formRef = useRef(null);
const RA_S= () => {
RA(7, {
"userToken":token,
"facilitieId":DataSave.id
});
}
useEffect(() => {
if (sourceData != null) {
console.log(sourceData)
formRef.current.setFieldsValue(sourceData)
}
},[sourceData])
useEffect(() => {
console.log("init one")
console.log(DataSave)
if ((location.pathname).indexOf("FacilityEdit") > -1) {
setPATHNAME("Edit Facility")
RA_S()
}
else if ((location.pathname).indexOf("FacilityDetail") > -1) {
setFacilityDetail(true)
setPATHNAME("Facility Detail")
RA_S()
} else {
setPATHNAME("Add Facility")
}
// history.push(location.pathname +'/Detail?providerName='+values.providerName)
},[])
const PictureOptionsRef = (values:any) => {
console.log(values)
setRef1(values)
......@@ -31,105 +84,140 @@ const FacilityManager = (props:any) => {
console.log(values)
setRef2(values)
}
const checkParam = (values: any) => {
var flag = true
for (var i in values) {
console.log(values[i]); //111,222,333,444
if (values[i] == null) {
flag=false
} else {
if(values[i].length == 0){ flag=false}
}
}
// for (var item in values) {
// if (typeof (values[item]) == "string") {
// if (values[item] == null || values[item].length == 0) {
// flag = false
// }
// } else if (typeof (values[item]) == "object") {
// if (values[item] == null || values[item].length == 0) {
// flag = false
// }
// }
// }
return flag
}
const onFinish = (values: any) => {
var result = values
result.categoriesName= Ref1
result.categoriesDetailsImageName= Ref2
result.reservationQuantumTime= Ref3
console.log('Success:', result);
result.reservationQuantumTime = Ref3
result.categoriesOpenTime="09:00-20:00"
if (checkParam(result)) {
console.log('Success:', result);
// RA(6, values);
}else{message.error("Error,Please finish it,not empty!",3)}
};
const onFinishFailed = (errorInfo:any) => {
console.log('Failed:', errorInfo);
};
const extendName = (values:any) => {
setExtend(values)
}
return (
<div className={styles.base}>
{token}
{/* 头部组件v1.2 */}
<TitleBack title="Add Facility" />
<Form name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed} >
<TitleBack title={PATHNAME} />
<Form ref={formRef} name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed} >
<Row gutter={32}>
<Col>所属小区</Col>
<Col> <Form.Item name="communityName" ><Input /></Form.Item></Col>
<Col> <Form.Item name="communityName" ><Input onChange={extendName} disabled={facilityDetail}/></Form.Item></Col>
</Row>
<Row gutter={32} style={{marginTop:28}}>
<Col>设施名称</Col>
<Col><Form.Item name="facilityName" ><Input /></Form.Item></Col>
<Col><Form.Item name="facilityName" ><Input disabled={facilityDetail}/></Form.Item></Col>
<Col>费用</Col>
<Col><Form.Item name="communityManagerFee" ><Input placeholder="$00.00"/></Form.Item></Col>
<Col><Form.Item name="communityManagerFee" ><Input placeholder="$00.00" disabled={facilityDetail}/></Form.Item></Col>
<Col>押金</Col>
<Col><Form.Item name="communityMargin" ><Input placeholder="$00.00"/></Form.Item></Col>
<Col><Form.Item name="communityMargin" ><Input placeholder="$00.00" disabled={facilityDetail}/></Form.Item></Col>
</Row>
<Row gutter={32} style={{marginTop:28}}>
<Col>设施品类</Col>
<Col><PictureOptions putSubmit={PictureOptionsRef}
<Col><PictureOptions disabled={facilityDetail} defultValue={[{ url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png", name: "篮球场A"},{ url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png", name: "篮球场B" }]} putSubmit={PictureOptionsRef}
data={{
userToken: token,
imageType: 'categoriesImageName',
extend: 'A7',
extend: extend,
}} />
</Col>
</Row>
<Row gutter={32} style={{marginTop:28}}>
<Col>设施详情</Col>
<Col><PictureOptionsRow putSubmit={PictureOptionsRowRef} data={{
<Col><PictureOptionsRow disabled={facilityDetail} putSubmit={PictureOptionsRowRef} data={{
userToken: token,
imageType: 'categoriesImageName',
extend: 'A7',
}} /></Col>
extend: extend,
}}
defultValue={[{ url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" }]} /></Col>
</Row>
<Line />
<Row gutter={32} style={{marginTop:28}}>
<Col>开放时间</Col>
<Col> <Input placeholder="09:00-20:00" suffix={<FieldTimeOutlined />} style={{width:160}} /></Col>
<Col> <Input placeholder="09:00-20:00" suffix={<FieldTimeOutlined />} style={{width:160}} disabled/></Col>
</Row>
<Row gutter={32} style={{marginTop:28}}>
<Col>预约设置</Col>
<Col>
<Row gutter={100}>
<Col><Form.Item name="cancelReservationDay" ><Input placeholder="取消预订" style={{width:160}}/></Form.Item></Col>
<Col><Form.Item name="nomarginCancelReservationDay" ><Input placeholder="不交押金，取消预订" style={{width:160}} /></Form.Item></Col>
<Col><Form.Item name="canReservationDay" ><Input placeholder="可预订" style={{width:160}}/></Form.Item></Col>
<Col><Form.Item name="cancelReservationDay" ><Input placeholder="取消预订" style={{width:160}} disabled={facilityDetail}/></Form.Item></Col>
<Col><Form.Item name="nomarginCancelReservationDay" ><Input placeholder="不交押金，取消预订" style={{width:160}} disabled={facilityDetail}/></Form.Item></Col>
<Col><Form.Item name="canReservationDay" ><Input placeholder="可预订" style={{width:160}} disabled={facilityDetail}/></Form.Item></Col>
</Row>
<Row gutter={8}>
<Col>
<Form.Item name="periodType" >
<Select placeholder="period" allowClear style={{width:80}}>
<Select placeholder="period" allowClear style={{width:120}} disabled={facilityDetail}>
<Option value="1">Day</Option>
<Option value="2">Month</Option>
<Option value="3">Year</Option>
</Select>
</Form.Item>
</Col>
<Col><Form.Item name="canReservationNum" ><Input placeholder="times" style={{width:80}}/></Form.Item></Col>
<Col><Form.Item name="canReservationNum" ><Input placeholder="times" style={{width:80}} disabled={facilityDetail}/></Form.Item></Col>
</Row>
</Col>
</Row>
<Row gutter={32} style={{ marginTop: 28 }}>
<Col>预约时段</Col>
<Col><TimeSelect putSubmit={TimeSelectRef}/></Col>
</Row>
<Line />
<Button type="primary" htmlType="submit">Submit</Button>
<Col><TimeSelect putSubmit={TimeSelectRef} defaultValue={["10:00-12:00","13:00-14:00"]} disabled={facilityDetail}/></Col>
</Row>
{
facilityDetail ? null :
<><Line /><Button type="primary" htmlType="submit">Submit</Button></>
}
</Form>
</div>
);
};
function mapStateToProps(state:any) {
const { } = state.FacilityBookings;
const {sourceData,DataSave } = state.FacilityBookings;
const { token } = state.login;
return {
DataSave,
sourceData,
token
};
}
......
src/services/tos.ts
View file @ 54d57050
......@@ -67,6 +67,8 @@ const requestList = [
"/tos/community/facilities/categories/fee/back",//3退还押金
"/tos/community/facilities/categories/fee/pay",//4缴费
"/tos/community/categories/subscribe/cancel",//5取消预约
"/tos/community/facilities/add",//6 新增小区设施
"/tos/bookingService/lookUp",//7 查看小区设施
]
function requestAuto(url:string,values:any) {
return request(url, Body(values))
......
src/utils/string.ts
View file @ 54d57050
......@@ -15,4 +15,11 @@ export const objectColumns=(key:any) => {
var values: any = {}; items.map((thing:any, i:any) => { values[name[i]] = thing }); temp.push(values)
})
return temp
}
//取url中图片名字
export const getUrlPicName=(str:string)=>{
var tmp=str.split("?")
var tmp2=tmp[0].split("/")
return(tmp2[tmp2.length-1])
}
\ No newline at end of file
src/utils/time.ts
View file @ 54d57050
import moment from 'moment';
const format = 'HH:mm';
//2020/7/14/18:09:00
export const timestampToTime2=(timestamp:any)=>{
......@@ -27,4 +29,18 @@ export const timestampToTime = (timestamp: any) => {
var date = new Date(timestamp);//*1000//getHours getMinutes getSeconds
return addZero(date.getDate()) + '-'+ (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'+date.getFullYear();
}
//时间转换
// 时间的拆分 var tmp = ["10:00-12:00", "13:00-14:00"]
export const timeToMoment = (tmp: any) => {
if (tmp == null) return null
// var result = new Array()
// tmp.map((item:any, index:any) => {
// var piece = item.split('-')
// result.push([moment(piece[0], format), moment(piece[1], format)])
// })
// return result;
var piece = tmp.split('-')
return [moment(piece[0], format), moment(piece[1], format)]
}
\ No newline at end of file
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