[new]设施添加

config/config.ts

@@ -214,7 +214,7 @@ export default defineConfig({
                   name: 'facilitybookings',
                   routes: [
                     { path: "./", component: './CommunityManagement/FacilityBookings/FacilityBookings' },
-                    { path: "./Adding", component: './CommunityManagement/FacilityBookings/FacilityBookingsSetting' },
+                    { path: "./Adding", component: './CommunityManagement/FacilityBookings/FacilityManager' },
                     { path: "./Booking", component: './CommunityManagement/FacilityBookings/Bookings' },
                     {path:"./Detail",component:'./CommunityManagement/FacilityBookings/Detail'}
                   ]                  

src/components/PictureOptions/Picture.tsx

+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;
+
+
+

src/components/PictureOptions/PictureOptions.tsx

+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;
+
+
+

src/components/PictureOptions/PictureOptionsRow.tsx

+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;
+
+
+
+

src/components/PictureOptions/index.less

+//头部组件
+.item0{
+    float: left;
+}
+
+.item1{
+    float: left;
+    margin-left: 16px;
+    line-height: 34px;
+}
+.item2{
+    float: right;
+}
+
+.clear{
+    clear: both;
+}
+.clear0{
+    .clear();
+    margin-bottom: 35px;
+}

src/components/TimeSelect/TimeSelect.tsx

+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;

src/components/TimeSelect/index.less

+//头部组件
+.item0{
+    float: left;
+}
+
+.item1{
+    float: left;
+    margin-left: 16px;
+    line-height: 34px;
+}
+.item2{
+    float: right;
+}
+
+.clear{
+    clear: both;
+}
+.clear0{
+    .clear();
+    margin-bottom: 35px;
+}

src/components/组件使用说明书.txt

+
+import SelectOptions from '../../components/SelectOptions/index';
+
 #TitleSearch
 time={["key","预订时间筛选"]}
 status = [{name:"status",data:["处理", "未处理"]}]
 listkey={['A', 'C']}    list={['订单状态', '预订时间筛选']}
 <TitleSearch onSubmit={TitleSearchContent}/>
+
+#
\ No newline at end of file

src/pages/CommunityManagement/FacilityBookings/Detail.tsx

@@ -104,8 +104,6 @@ const Detail = (props:any) => {
         <Col span={3}>{DataSave.subscribeTime}</Col>
       </Row>
         
-    
-      
       <Row gutter={8} style={{marginTop:16}}>
         <Col>用户姓名</Col><Col span={3}>{DataSave.accountName}</Col>
         <Col>联系电话</Col><Col span={3}>{DataSave.accountPhone}</Col>
@@ -139,11 +137,8 @@ const Detail = (props:any) => {
             </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.Group>
 

src/pages/CommunityManagement/FacilityBookings/FacilityManager.tsx

+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);

src/pages/CommunityManagement/FacilityBookings/index.less

@@ -277,3 +277,4 @@
     position: absolute;
     left: 502px;
 }
+