Commit 2a973837 authored by maple's avatar maple

[new]设施添加

parent b7e2f806
...@@ -214,7 +214,7 @@ export default defineConfig({ ...@@ -214,7 +214,7 @@ export default defineConfig({
name: 'facilitybookings', name: 'facilitybookings',
routes: [ routes: [
{ path: "./", component: './CommunityManagement/FacilityBookings/FacilityBookings' }, { path: "./", component: './CommunityManagement/FacilityBookings/FacilityBookings' },
{ path: "./Adding", component: './CommunityManagement/FacilityBookings/FacilityBookingsSetting' }, { path: "./Adding", component: './CommunityManagement/FacilityBookings/FacilityManager' },
{ path: "./Booking", component: './CommunityManagement/FacilityBookings/Bookings' }, { path: "./Booking", component: './CommunityManagement/FacilityBookings/Bookings' },
{path:"./Detail",component:'./CommunityManagement/FacilityBookings/Detail'} {path:"./Detail",component:'./CommunityManagement/FacilityBookings/Detail'}
] ]
......
import React, { useState } from 'react';
import styles from './index.less';
import { Upload, Modal,Row,Col,Input } from 'antd';
import { PlusOutlined,PictureFilled } from '@ant-design/icons';
import { OmitProps } from 'antd/lib/transfer/ListBody';
function getBase64(file:any) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
const Picture = (props:any) => {
const [previewVisible, setPreviewVisible] = useState(false)
const [previewImage, setPreviewImage] = useState('')
const [previewTitle, setPreviewTitle] = useState('')
const [fileList, setFileList] = useState([])
const handleCancel = () => {
setPreviewVisible(false)
}
const handlePreview = async file => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
setPreviewImage(file.url || file.preview)
setPreviewVisible(true)
setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1))
};
const handleChange = ({ file,fileList }) => {
let tmp=fileList
setFileList(tmp)
// console.log(fileList)
if (file.status === 'done') {
console.log("success upload picture")
props.onSubmit(file.name)
}
}
const uploadButton = (
<div>
<PictureFilled style={{ fontSize: '28px' }}/>
<div className="ant-upload-text">Upload</div>
</div>
);
const uploadpic = (
<Upload
action="/tos/image/upload"
listType="picture-card"
data={props.data}
fileList={fileList}
onPreview={handlePreview} onChange={handleChange}>
{fileList.length >= 1 ? null : uploadButton}
</Upload>
)
return (
<div>
{uploadpic}
<Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
<img alt="example" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
);
};
export default Picture;
import React, { useState } from 'react';
import styles from './index.less';
import { Upload, Modal,Row,Col,Input,List,Card, Button } from 'antd';
import { PlusOutlined,PictureFilled } from '@ant-design/icons';
import Picture from './Picture';
const PictureOptions = (props:any) => {
const [fileList, setFileList] = useState([{index: 0,name:null,pic:null}])
const [fileListLen, setFileListLen] = useState(0)
const add = () => {
setFileListLen(fileListLen + 1)
setFileList(fileList => ([...fileList, {index:fileListLen + 1,name:null,pic:null}]))
}
const Delete = (index: any, e: any) => {
var tmp = fileList
tmp.splice(index, 1);
console.log("删除")
console.log(tmp)
setFileList(fileList => ([...tmp]))
console.log(fileList)
props.putSubmit( CheckParm(tmp))
}
const CheckParm = (values: Array<any>) => {
var tmp = new Array()
values.map((item, index) => {
if (item.name != null && item.pic != null) {
tmp.push(item.name+"&"+item.pic)
} else {
tmp=[]
}
})
return tmp
}
const PictureName=(index: any,values:any) => {
var tmp = fileList
tmp[index].pic = values
props.putSubmit( CheckParm(tmp))
}
const InputGet = (index: any, e: any) => {
var tmp = fileList
tmp[index].name = e.target.value
props.putSubmit(CheckParm(tmp))
}
return (
<div>
{
fileList.map((item, index) => {
return (
<Row key={item.index}>
<Col><Picture onSubmit={PictureName.bind(this, index)} data={props.data}/></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>
</Col>
</Row>
)
})
}
<div>
<Button type="primary" onClick={add}>Add New</Button>
</div>
</div>
);
};
export default PictureOptions;
import React, { useState } from 'react';
import styles from './index.less';
import { Upload, Modal,Row,Col,Input,List,Card, Button } from 'antd';
import { PlusOutlined,PictureFilled } from '@ant-design/icons';
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
const uploadButton = (
<div>
<PlusOutlined />
<div className="ant-upload-text">Upload</div>
</div>
);
const PictureOptionsRow = (props:any) => {
const [fileList, setFileList] = useState([])
const [previewVisible, setPreviewVisible] = useState(false)
const [previewImage,setPreviewImage]=useState('')
const handleCancel = () => setPreviewVisible(false);
const handlePreview = async file => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
setPreviewImage(file.url || file.preview)
setPreviewVisible(true)
};
const handleChange = ({ file, fileList }) => {
let tmp=fileList
setFileList(tmp)
var result=new Array()
fileList.map((item, index) => {
result.push(item.name)
})
props.putSubmit(result)
}
return (
<div>
<Upload
action="/tos/image/upload"
listType="picture-card"
data={props.data}
fileList={fileList}
onPreview={handlePreview}
onChange={handleChange}
>
{fileList.length >= 8 ? null : uploadButton}
</Upload>
<Modal
visible={previewVisible}
onCancel={handleCancel}
>
<img alt="example" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
);
};
export default PictureOptionsRow;
//头部组件
.item0{
float: left;
}
.item1{
float: left;
margin-left: 16px;
line-height: 34px;
}
.item2{
float: right;
}
.clear{
clear: both;
}
.clear0{
.clear();
margin-bottom: 35px;
}
import React, { useState } from 'react';
import { TimePicker } from 'antd';
const { RangePicker } = TimePicker;
import moment from 'moment';
import { PlusCircleFilled,MinusCircleFilled,DeleteOutlined } from '@ant-design/icons';
import { Row,Col } from 'antd';
import { Color } from 'chalk';
import Item from 'antd/lib/list/Item';
const format = 'HH:mm';
const TimeSelect = (props:any) => {
const [times, setTimes] = useState([{index: 0,time:null}])
const [timesLen, setTimesLen] = useState(0)
const add =() => {
setTimesLen(timesLen + 1)
setTimes(times => ([...times, {index:timesLen + 1,time:null}]))
}
const Delete=(index:any) => {
var tmp = times
tmp.splice(index, 1);
setTimes(times => ([...tmp]))
props.putSubmit( CheckParm(tmp))
}
const timeForm = (values: any) => {
var result = new Array()
values.map((items, index) => {
result.push(moment(items).format('hh:mm'))
})
return result[0] + "-" + result[1]
}
const CheckParm = (values: Array<any>) => {
var tmp = new Array()
values.map((item, index) => {
if (item.time != null) {
tmp.push(item.time)
} else {
tmp = []
}
})
return tmp
}
const timeChange = (index: any, values: any) => {
var tmp = times;
tmp[index].time =timeForm(values)
props.putSubmit(CheckParm(tmp))
}
return (
<>
<Row gutter={8}>
<Col>
{
times.map((item, index) => {
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>
</Row>
)
})
}
</Col>
<Col>
<PlusCircleFilled style={{ fontSize: 20, cursor: "pointer", marginTop: 8,color:"rgba(24,144,255,1)"}} onClick={add} />
</Col>
</Row>
</>
);
};
export default TimeSelect;
//头部组件
.item0{
float: left;
}
.item1{
float: left;
margin-left: 16px;
line-height: 34px;
}
.item2{
float: right;
}
.clear{
clear: both;
}
.clear0{
.clear();
margin-bottom: 35px;
}
import SelectOptions from '../../components/SelectOptions/index';
#TitleSearch #TitleSearch
time={["key","预订时间筛选"]} time={["key","预订时间筛选"]}
status = [{name:"status",data:["处理", "未处理"]}] status = [{name:"status",data:["处理", "未处理"]}]
listkey={['A', 'C']} list={['订单状态', '预订时间筛选']} listkey={['A', 'C']} list={['订单状态', '预订时间筛选']}
<TitleSearch onSubmit={TitleSearchContent}/> <TitleSearch onSubmit={TitleSearchContent}/>
#
\ No newline at end of file
...@@ -104,8 +104,6 @@ const Detail = (props:any) => { ...@@ -104,8 +104,6 @@ const Detail = (props:any) => {
<Col span={3}>{DataSave.subscribeTime}</Col> <Col span={3}>{DataSave.subscribeTime}</Col>
</Row> </Row>
<Row gutter={8} style={{marginTop:16}}> <Row gutter={8} style={{marginTop:16}}>
<Col>用户姓名</Col><Col span={3}>{DataSave.accountName}</Col> <Col>用户姓名</Col><Col span={3}>{DataSave.accountName}</Col>
<Col>联系电话</Col><Col span={3}>{DataSave.accountPhone}</Col> <Col>联系电话</Col><Col span={3}>{DataSave.accountPhone}</Col>
...@@ -139,11 +137,8 @@ const Detail = (props:any) => { ...@@ -139,11 +137,8 @@ const Detail = (props:any) => {
</Row> </Row>
<div style={{ marginTop: 16 }}> <div style={{ marginTop: 16 }}>
<Radio.Group onChange={backFee} defaultValue={1}> <Radio.Group onChange={backFee} defaultValue={1}>
<Radio value={1} style={radioStyle}>全额退还</Radio> <Radio value={1} style={radioStyle}>全额退还</Radio>
<Radio value={2} style={radioStyle}>部分退还 {backFeeFlag ?<><Input onChange={getBackMarginFee} style={{ width: 80 }} /> $</>:null}</Radio> <Radio value={2} style={radioStyle}>部分退还 {backFeeFlag ?<><Input onChange={getBackMarginFee} style={{ width: 80 }} /> $</>:null}</Radio>
</Radio.Group> </Radio.Group>
......
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Upload,Modal,Button,Space,Pagination,Tooltip, Radio, Form,Row, Col,Select } from 'antd';
const { Option } = Select;
import { Link, useIntl, connect, Dispatch } from 'umi';
import { FieldTimeOutlined } from '@ant-design/icons';
import PictureOptions from '../../../components/PictureOptions/PictureOptions';
import PictureOptionsRow from '../../../components/PictureOptions/PictureOptionsRow';
import TitleBack from '../../../components/TitleBack/TitleBack';
import TimeSelect from '../../../components/TimeSelect/TimeSelect';
import Line from '../../../components/Line/Line';
const FacilityManager = (props:any) => {
const { dispatch, location, token } = props;
const [Ref1, setRef1] = useState([])
const [Ref2, setRef2] = useState([])
const [Ref3, setRef3] = useState([])
const PictureOptionsRef = (values:any) => {
console.log(values)
setRef1(values)
}
const TimeSelectRef = (values:any) => {
console.log(values)
setRef3(values)
}
const PictureOptionsRowRef = (values:any) => {
console.log(values)
setRef2(values)
}
const onFinish = (values: any) => {
var result = values
result.categoriesName= Ref1
result.categoriesDetailsImageName= Ref2
result.reservationQuantumTime= Ref3
console.log('Success:', result);
};
const onFinishFailed = (errorInfo:any) => {
console.log('Failed:', errorInfo);
};
return (
<div className={styles.base}>
{token}
{/* 头部组件v1.2 */}
<TitleBack title="Add Facility" />
<Form name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed} >
<Row gutter={32}>
<Col>所属小区</Col>
<Col> <Form.Item name="communityName" ><Input /></Form.Item></Col>
</Row>
<Row gutter={32} style={{marginTop:28}}>
<Col>设施名称</Col>
<Col><Form.Item name="facilityName" ><Input /></Form.Item></Col>
<Col>费用</Col>
<Col><Form.Item name="communityManagerFee" ><Input placeholder="$00.00"/></Form.Item></Col>
<Col>押金</Col>
<Col><Form.Item name="communityMargin" ><Input placeholder="$00.00"/></Form.Item></Col>
</Row>
<Row gutter={32} style={{marginTop:28}}>
<Col>设施品类</Col>
<Col><PictureOptions putSubmit={PictureOptionsRef}
data={{
userToken: token,
imageType: 'categoriesImageName',
extend: 'A7',
}} />
</Col>
</Row>
<Row gutter={32} style={{marginTop:28}}>
<Col>设施详情</Col>
<Col><PictureOptionsRow putSubmit={PictureOptionsRowRef} data={{
userToken: token,
imageType: 'categoriesImageName',
extend: 'A7',
}} /></Col>
</Row>
<Line />
<Row gutter={32} style={{marginTop:28}}>
<Col>开放时间</Col>
<Col> <Input placeholder="09:00-20:00" suffix={<FieldTimeOutlined />} style={{width:160}} /></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>
</Row>
<Row gutter={8}>
<Col>
<Form.Item name="periodType" >
<Select placeholder="period" allowClear style={{width:80}}>
<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>
</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>
</Form>
</div>
);
};
function mapStateToProps(state:any) {
const { } = state.FacilityBookings;
const { token } = state.login;
return {
token
};
}
export default connect(mapStateToProps)(FacilityManager);
...@@ -277,3 +277,4 @@ ...@@ -277,3 +277,4 @@
position: absolute; position: absolute;
left: 502px; left: 502px;
} }
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