Skip to content

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

[new]设施预约

parent b6c63568
Show whitespace changes
Inline Side-by-side
Showing with 1771 additions and 120 deletions
config/config.ts
View file @ b7e2f806
......@@ -122,6 +122,15 @@ export default defineConfig({
name: 'commercialservice',
icon:'ConsoleSqlOutlined',
routes: [
{
path: './CommunityMaintenance',
name: 'communitymaintenance',
routes: [
{ path: './', component: './CommercialService/PropertyServices' },
{ path: './Detail', component: './CommercialService/Detail' },
{path: './Edit',component:'./CommercialService/Detail'},
]
},
{
path: './OwnerComplaints',
name: 'ownercomplaints',
......@@ -201,9 +210,14 @@ export default defineConfig({
component:'./runTest/Template'
},
{
path: '/CommunityManagement/FacilityBookings',
path: './FacilityBookings',
name: 'facilitybookings',
component:'./runTest/Template'
routes: [
{ path: "./", component: './CommunityManagement/FacilityBookings/FacilityBookings' },
{ path: "./Adding", component: './CommunityManagement/FacilityBookings/FacilityBookingsSetting' },
{ path: "./Booking", component: './CommunityManagement/FacilityBookings/Bookings' },
{path:"./Detail",component:'./CommunityManagement/FacilityBookings/Detail'}
]
},
{
path: '/CommunityManagement/VisitorRecord',
......
src/components/SelectOptions/index.jsx
View file @ b7e2f806
......@@ -35,35 +35,6 @@ class SelectOptions extends React.Component {
state = {
};
componentDidMount(){
var name=getLocale();
//console.log(name)
if(name=="zh-CN"){
this.setState({
selectoptionsOpen : '展开',
selectoptionsPutItAway :'收起',
selectoptionsSelected : '已选',
selectoptionsSelectAll : '全选',
selectoptionsSelectNone : '全不选',
selectoptionsAll:'所有',
selectoptionsSearchCell :'搜索小区',
selectoptionsAllCell:'全部小区',
componetVisible:'展开',
})
}else{
this.setState({
selectoptionsOpen : 'Open',
selectoptionsPutItAway :'Put It Away',
selectoptionsSelected : 'Selected',
selectoptionsSelectAll : 'Select All',
selectoptionsSelectNone : 'Unselect All',
selectoptionsAll:'All',
selectoptionsSearchCell :'Search cell',
selectoptionsAllCell:'All Cell',
componetVisible:'Open',
})
}
};
constructor(props) {
super(props);
......@@ -74,43 +45,76 @@ class SelectOptions extends React.Component {
}
if(checklist==null){
this.state = {
selectoptionsOpen : 'Open',
selectoptionsPutItAway :'Put It Away',
selectoptionsSelected : 'Selected',
selectoptionsSelectNone : 'Select None',
selectoptionsAll:'All',
selectoptionsSearchCell :'Search cell',
menuList:ArrayToPingYin.get(list),
componetVisible:'Open',
checkedListOptions:list,
checkedList: list,
indeterminate: false,
checkAll: true,
checkNone: false,
resultList:list,
flag:false
};
}else{
console.log(checklist)
this.state = {
selectoptionsOpen : 'Open',
selectoptionsPutItAway :'Put It Away',
selectoptionsSelected : 'Selected',
selectoptionsSelectNone : 'Select None',
selectoptionsAll:'All',
selectoptionsSearchCell :'Search cell',
menuList:ArrayToPingYin.get(list),
componetVisible:'Open',
checkedListOptions:list,
checkedList: checklist,
indeterminate: false,
checkAll: true,
checkNone: false,
resultList:checklist,
flag:false
};
}
}
componentDidUpdate(){
if(this.props.show!=null){
if(this.props.show==this.state.flag){
console.log(this.props.show)
if(this.props.show==false){
this.setState({componetVisible:this.state.selectoptionsOpen,flag:true})
console.log("初始化")
}else{
this.setState({componetVisible:this.state.selectoptionsPutItAway,flag:false})
console.log("初始化")
}
console.log(this.state.componetVisible)
}
}
}
componentDidMount(){
var name=getLocale();
//console.log(name)
if(name=="zh-CN"){
this.setState({
selectoptionsOpen : '展开',
selectoptionsPutItAway :'收起',
selectoptionsSelected : '已选',
selectoptionsSelectAll : '全选',
selectoptionsSelectNone : '全不选',
selectoptionsAll:'所有',
selectoptionsSearchCell :'搜索小区',
selectoptionsAllCell:'全部小区',
componetVisible:'收起',
})
}else{
this.setState({
selectoptionsOpen : 'Open',
selectoptionsPutItAway :'Put It Away',
selectoptionsSelected : 'Selected',
selectoptionsSelectAll : 'Select All',
selectoptionsSelectNone : 'Unselect All',
selectoptionsAll:'All',
selectoptionsSearchCell :'Search cell',
selectoptionsAllCell:'All Cell',
componetVisible:'Put It Away',
})
}
console.log("初始化2")
};
hideAndexpand = ()=> {
if(this.state.componetVisible==this.state.selectoptionsOpen){
......@@ -205,7 +209,7 @@ class SelectOptions extends React.Component {
<div style={{ position:"absolute",left:5,top:5}}>{this.state.selectoptionsSelected}{this.state.resultList.length==this.props.list.length?this.state.selectoptionsAllCell:null}</div>
<div style={{ position:"absolute",right:16,top:5,cursor:"pointer"}} onClick={()=>this.hideAndexpand()}>{this.state.componetVisible}<DownOutlined /></div>
</div>
<div style={{padding:5}}>{this.state.resultList.length==this.props.list.length?null:getDotText(this.state.resultList)}</div>
<div style={{paddingLeft:15,paddingRight:15,paddingBottom:20}}>{this.state.resultList.length==this.props.list.length?null:getDotText(this.state.resultList)}</div>
</>
:
<div style={{width:"100%",backgroundColor:"#eeeeee"}}>
......@@ -213,7 +217,7 @@ class SelectOptions extends React.Component {
<div style={{ position:"absolute",left:5,top:5}}>{this.state.resultList.length==0?this.state.selectoptionsSelectNone:this.state.selectoptionsSelected}{this.state.resultList.length==this.props.list.length?this.state.selectoptionsAllCell:null}</div>
<div style={{ position:"absolute",right:16,top:5,cursor:"pointer"}} onClick={()=>this.hideAndexpand()}>{this.state.componetVisible} <UpOutlined /></div>
</div>
<div style={{padding:5}}>{this.state.resultList.length==this.props.list.length?null:getDotText(this.state.resultList)}</div>
<div style={{paddingLeft:15,paddingRight:15,paddingBottom:20}}>{this.state.resultList.length==this.props.list.length?null:getDotText(this.state.resultList)}</div>
<div style={{width:"100%",backgroundColor:"#eeeeee",userSelect:"none"}}>
<div style={{width:"100%",height:40, position:"relative"}}>
<div style={{fontSize:14,position:"absolute"}}>
......
src/components/TitleSearch/TitleSearch.tsx
View file @ b7e2f806
import React from 'react';
import React, { useState } from 'react';
import styles from './index.less';
import BackButton from '../BackButton/BackButton';
import TitleGet from '../TitleGet/TitleGet';
import { Input, Row, Col, Form, Select, Button } from 'antd';
import { Input, Row, Col, Form, Select, Button,DatePicker } from 'antd';
const { Option } = Select;
// const key = ['A', 'C']
// const status = [{name:"status",data:["处理", "未处理"]}]
import SelectOptions from '../../components/SelectOptions/index';
import { gray } from 'chalk';
const TitleSearch= (props:any) => {
......@@ -18,7 +18,14 @@ const TitleSearch= (props:any) => {
const status = props.status;
const time = props.time;
const community = props.community;
const [selectOptions, setSelectOptions] = useState(true)
const [datePicker, setDate]=useState(null)
const onFinish = values => {
if (datePicker) {
values[time[0]] = datePicker;
}
console.log('Success:', values);
props.onSubmit(values)
};
......@@ -27,8 +34,13 @@ const TitleSearch= (props:any) => {
console.log('Failed:', errorInfo);
};
const onChange = (date:any,dateString:string) => {
setDate(dateString)
}
const printContent = (comment: any)=>{
console.log(comment)
}
return (
<>
<Form name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed}>
......@@ -47,13 +59,12 @@ const TitleSearch= (props:any) => {
status != null ?
status.map((item, index) => {
return (
<Col key={"StatusCol_" + index}><Form.Item name={item.name}>
<Select style={{width:160}}>
<Option value="none"> </Option>
<Col key={"StatusCol_" + index}><Form.Item name={item.name[0]}>
<Select style={{width:160}} placeholder={item.name[1]} allowClear={true}>
{
item.data.map(word => {
return (
<Option key={word} value="word">{word}</Option>
<Option key={word} value={word[0]}>{word[1]}</Option>
)
})
}
......@@ -62,8 +73,26 @@ const TitleSearch= (props:any) => {
})
:null
}
{
time != null ?
<Col key={"datePicker_"} > <DatePicker placeholder={time[1]} onChange={onChange} /></Col>
: null
}
{
community == null ?
<Col><Form.Item><Button type="primary" htmlType="submit">Search</Button></Form.Item></Col>
: null
}
</Row>
{
community != null ?
<>
<SelectOptions list={["A", "B", "C", "D", "E", "F"].sort()} show={selectOptions} onSubmit={printContent} />
<Form.Item><Button type="primary" htmlType="submit" style={{ backgroundColor: "#e7f4ff",color:"rgba(24,144,255,1)"}}>Search</Button></Form.Item>
</> : null
}
</Form>
......
src/components/TreeAction/TreeAction.tsx
View file @ b7e2f806
......@@ -6,84 +6,84 @@ import { Tree } from 'antd';
const treeData = [
{
title: 'LIFE用户管理',
key: '0-0',
key: 'A',
children: [
{title: '查看LIFE用户',key: '0-0-1'},
{ title: '编辑LIFE用户', key: '0-0-2' },
{ title: '添加业主档案', key: '0-0-3' },
{title: '注销业主档案',key: '0-0-4'},
{title: '查看LIFE用户',key: '2'},
{ title: '编辑LIFE用户', key: '3' },
{ title: '添加业主档案', key: '4' },
{title: '注销业主档案',key: '5'},
],
},
{ title: '数据中心', key: '0-1' },
{ title: '数据中心', key: '1' },
{
title: '服务商管理',
key: '0-2',
key: 'B',
children: [
{title: '查看服务商',key: '0-2-1'},
{ title: '编辑服务商', key: '0-2-2' },
{ title: '添加服务商', key: '0-2-3' },
{title: '注销服务商',key: '0-2-4'},
{title: '查看服务商',key: '6'},
{ title: '编辑服务商', key: '7' },
{ title: '添加服务商', key: '8' },
{title: '注销服务商',key: '9'},
],
},
{
title: '物业费管理',
key: '0-3',
key: 'C',
children: [
{title: '查看物业费记录',key: '0-3-1'},
{ title: '添加物业费记录', key: '0-3-2' },
{title: '查看物业费记录',key: '10'},
{ title: '添加物业费记录', key: '11' },
],
},
{
title: '物业管理',
key: '0-4',
key: 'D',
children: [
{title: '查看物业服务',key: '0-4-1'},
{ title: '编辑物业服务', key: '0-4-2' },
{ title: '注销物业服务', key: '0-4-3' },
{title: '查看物业服务',key: '12'},
{ title: '编辑物业服务', key: '13' },
{ title: '注销物业服务', key: '14' },
],
},
{
title: '订单管理',
key: '0-5',
key: 'E',
children: [
{title: '查看订单',key: '0-5-1'},
{ title: '编辑订单', key: '0-5-2' },
{title: '查看订单',key: '15'},
{ title: '编辑订单', key: '16' },
],
},
{
title: '合同管理',
key: '0-6',
key: 'F',
children: [
{title: '查看合同',key: '0-6-1'},
{ title: '编辑合同', key: '0-6-2' },
{ title: '添加合同', key: '0-6-3' },
{title: '查看合同',key: '17'},
{ title: '编辑合同', key: '18' },
{ title: '添加合同', key: '19'},
],
},
{
title: '小区管理',
key: '0-7',
key: 'G',
children: [
{title: '查看小区',key: '0-7-1'},
{ title: '编辑小区', key: '0-7-2' },
{ title: '添加小区', key: '0-7-3' },
{title: '查看小区',key: '20'},
{ title: '编辑小区', key: '21' },
{ title: '添加小区', key: '22' },
],
},
{ title: '访客记录', key: '1-0' },
{ title: '访客记录', key: '26' },
{
title: '预订设施',
key: '0-8',
key: 'H',
children: [
{title: '查看预定服务',key: '0-8-1'},
{ title: '编辑预定服务', key: '0-8-2' },
{ title: '添加预定服务', key: '0-8-3' },
{title: '查看预定服务',key: '27'},
{ title: '编辑预定服务', key: '28' },
{ title: '添加预定服务', key: '29' },
],
},
{
title: '后台管理',
key: '0-9',
key: 'I',
children: [
{title: '查看后台账号',key: '0-9-1'},
{ title: '配置后台账号', key: '0-9-2' },
{title: '查看后台账号',key: '30'},
{ title: '配置后台账号', key: '31' },
],
},
];
......@@ -91,17 +91,30 @@ const treeData = [
const TreeAction = (props:any) => {
const onSelect = (selectedKeys, info) => {
console.log('selected', selectedKeys, info);
const onSelect = (selectedKeys:any, info:any) => {
// console.log('selected', selectedKeys, info);
};
const onCheck = (checkedKeys, info) => {
props.onSubmit(checkedKeys)
const onCheck = (checkedKeys:any, info:any) => {
const checklist = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
var array=new Array()
checkedKeys.map((items:any, index:any) => {
var nothave=true
checklist.map((check, i) => {
if (items == check) {
nothave=false
}
})
if (nothave) {
array.push(items)
}
})
props.onSubmit(array)
};
return (
<>
<Tree checkable defaultExpandedKeys={[]} defaultSelectedKeys={[]} defaultCheckedKeys={['0-0','0-1','0-2','0-3','0-4','0-5','0-6','0-7','0-8','0-9','1-0']}
<Tree checkable defaultExpandedKeys={[]} defaultSelectedKeys={[]} defaultCheckedKeys={['A','B','C','D','E','F','G','H','I','1','26']}
onSelect={onSelect}
onCheck={onCheck}
treeData={treeData}/>
......
src/components/组件使用说明书.txt 0 → 100644
View file @ b7e2f806
#TitleSearch
time={["key","预订时间筛选"]}
status = [{name:"status",data:["处理", "未处理"]}]
listkey={['A', 'C']} list={['订单状态', '预订时间筛选']}
<TitleSearch onSubmit={TitleSearchContent}/>
\ No newline at end of file
src/locales/en-US/menu.ts
View file @ b7e2f806
......@@ -56,6 +56,7 @@ export default {
'menu.usemanagement.serviceproviders': 'Service Providers',
'menu.propertymanagement': 'Property Management',
'menu.commercialservice': 'Commercial Service',
'menu.commercialservice.communitymaintenance': 'Community maintenance',
'menu.commercialservice.ownercomplaints': 'Owner Complaints',
'menu.commercialservice.problemfeedback': 'Problem Feedback',
'menu.commercialservice.renovationapplication': 'Renovation Application',
......
src/locales/zh-CN/menu.ts
View file @ b7e2f806
......@@ -56,6 +56,7 @@ export default {
'menu.usemanagement.serviceproviders': '服务商管理',
'menu.propertymanagement': '物业费管理',
'menu.commercialservice': '物业服务',
'menu.commercialservice.communitymaintenance': '小区保养',
'menu.commercialservice.ownercomplaints': '业主投诉',
'menu.commercialservice.problemfeedback': '问题反馈',
'menu.commercialservice.renovationapplication': '装修申请',
......
src/models/CommunityManagement/FacilityBookings.ts 0 → 100644
View file @ b7e2f806
import * as service from '../../services/tos';
import { message } from 'antd';
import { routerRedux } from 'dva/router'
export default {
namespace: 'FacilityBookings',
state: {
Data: null,
DataPage:{totalRow:0},
Data2: null,
Data3: null,
Data4:null,
Data3Error: false,
DataSave: null,
DataSaveDetail:null,
},
reducers: {
returnPage(state, { Data,DataPage}) {
return { ...state, Data,DataPage };
},
returnPage2(state, { Data2 }) {
return { ...state, Data2 };
},
returnPage3(state, { Data3,Data4 }) {
return { ...state, Data3,Data4 };
},
returnData3Error(state, { Data3Error }) {
return { ...state, Data3Error };
},
returnDataSave(state, { DataSave }) {
return { ...state, DataSave};
},
DataSaveDetail(state, { DataSaveDetail,}) {
return { ...state, DataSaveDetail };
}
},
effects: {
// 模糊查询设施
*TosCommunityFacilitiesFuzzyQuery({ playload }, { call, put }) {
const resp = yield call(service.TosCommunityFacilitiesFuzzyQuery, playload);
console.log(resp)
if (resp.code == 500) {
window.location.href = '/500';
} else {
let Data2 = resp.data.list;
yield put({ type: 'returnPage2', Data2, });
}
},
//预订设施查询
*RA({ playload }, { call, put }) {
const resp = yield call(service.RA, playload);
console.log(resp)
if (resp.code == 500) {
//window.location.href = '/500';
} else {
switch (playload.index) {
case 0:
{
let DataPage = resp.data.page;
let Data = resp.data.list;
yield put({ type: 'returnPage', Data,DataPage });
}
break;
case 1:
{
if (resp.error_code != "0000") {
let Data3Error =true;
yield put({ type: 'returnData3Error', Data3Error });
} else {
let Data3 = resp.data.categorieList;
var Data4 = { communityManagerFee: resp.data.communityManagerFee, communityMargin: resp.data.communityMargin };
console.log(Data4)
yield put({ type: 'returnPage3', Data3, Data4});
}
}break;
case 2:{
let DataSaveDetail = resp.data;
yield put({ type: 'DataSaveDetail', DataSaveDetail });
} break;
case 3: {
window.location.href = '/CommunityManagement/FacilityBookings';
} break;
case 4: {
window.location.href = '/CommunityManagement/FacilityBookings';
} break;
case 5: {
window.location.href = '/CommunityManagement/FacilityBookings';
} break;
}
}
},
*IA({ playload }, { call, put }) {
var Data3 = null
let Data3Error = false;
yield put({ type: 'returnData3Error', Data3Error });
yield put({ type: 'returnPage3', Data3 });
},
*SA({ playload }, { call, put }) {
var DataSave = playload
yield put({type: 'returnDataSave', DataSave} )
}
},
};
src/models/CommunityService.ts
View file @ b7e2f806
......@@ -29,7 +29,7 @@ export default {
*TosCommunityServiceGet({ playload }, { call, put }) {
const resp = yield call(service.TosCommunityServiceGet, playload);
console.log(resp)
if (resp.code == 500) {
if (resp.error_code != 0) {
window.location.href = '/500';
} else {
let Data = resp.data.rows;
......@@ -39,7 +39,7 @@ export default {
*TosCommuntiyServiceReply({ playload }, { call, put }) {
const resp = yield call(service.TosCommuntiyServiceReply, playload);
console.log(resp)
if (resp.code == 500) {
if (resp.error_code != 0) {
window.location.href = '/500';
} else {
//window.location.href = '/CommercialService/OwnerComplaints';
......@@ -50,7 +50,7 @@ export default {
*TosCommunityServiceGetDetail({ playload }, { call, put }) {
const resp = yield call(service.TosCommunityServiceGetDetail, playload);
console.log(resp)
if (resp.code == 500) {
if (resp.error_code !=0 ) {
window.location.href = '/500';
} else {
var tmp = resp.data.rows[0].tosOwerModel;
......
src/models/init.ts
View file @ b7e2f806
......@@ -22,7 +22,6 @@ export default {
*tosCommunityget({ playload }, { call, put }) {
console.log(playload)
const resp = yield call(service.tosCommunityget, playload);
console.log(resp)
let CommunityList = resp.data.communityList;
yield put({ type: 'returnCommunityList', CommunityList, });
},
......
src/pages/CommercialService/Detail.tsx
View file @ b7e2f806
......@@ -48,12 +48,17 @@ const Detail = (props:any) => {
const TosCommuntiyServiceReply = (values: any) => { dispatch({ type: 'CommunityService/TosCommuntiyServiceReply', playload: values }) };
const setCurDataDetail = () => { dispatch({ type: 'CommunityService/setCurDataDetail' }) };
const [headTitle, setHeadTitle] = useState("");
const headTitles = ["Reply To Community maintenance", "Reply", "Reply", "Reply", "Reply"]
useEffect(() => {
setCurDataDetail()
TosCommunityServiceGetDetail({
serviceType:CurData.service_type,
id:CurData.id
})
setHeadTitle(headTitles[CurData.service_type-1])
},[]);
useEffect(() => {
......@@ -110,7 +115,7 @@ const Detail = (props:any) => {
<div className={styles.base}>
{/* 头部组件v1.2 */}
<TitleBack title="Payment Settings" />
<TitleBack title={headTitle} />
{/* 内容组件 */}
<div className={styles.box1}>
......
src/pages/CommercialService/PropertyServices.tsx
View file @ b7e2f806
......@@ -22,7 +22,7 @@ const PropertyServices = (props: any) => {
const pagination = { defaultCurrent: 1, total: Data!=null?Data.length:0 }
const [loading,setLoading]=useState(false)
const goToFunction = (value, record, e) => {
console.log(record)
......@@ -61,16 +61,19 @@ const PropertyServices = (props: any) => {
useEffect(() => {
var init="1"
if (location.pathname == "/CommercialService/RenovationApplication") { init = "1"}
if (location.pathname == "/CommercialService/CommunityMaintenance") { init = "1"}
else if(location.pathname == "/CommercialService/ShelfLifeService") {init = "2"}
else if (location.pathname == "/CommercialService/OwnerComplaints") { init = "3" }
else if (location.pathname == "/CommercialService/ReportOnline") { init = "4" }
else if(location.pathname == "/CommercialService/ProblemFeedback") {init = "5"}
setLoading(true)
TosCommunityServiceGet({serviceType:init})
},[]);
const printContent = (comment: any)=>{
useEffect(() => {
setLoading(false)
},[Data]);
const TitleSearchContent = (comment: any)=>{
console.log(comment)
}
......@@ -78,7 +81,7 @@ const PropertyServices = (props: any) => {
<div className={styles.base}>
<TitleSearch listkey={['A', 'C']} list={['Hello', 'world']} status={[{ name: "status", data: ["处理", "未处理"] }]} onSubmit={printContent}/>
<TitleSearch listkey={['A', 'C']} list={['Hello', 'world']} status={[{ name: ["status","status"], data: [[0,"处理"], [1,"未处理"]]}]} onSubmit={TitleSearchContent}/>
{/* <div style={{position:"relative", width: "100%", height: 40 }}>
<div style={{ position: "absolute", right: 0 }}>
{
......@@ -87,7 +90,7 @@ const PropertyServices = (props: any) => {
</div>
</div> */}
{/* 列表组件 */}
<Table rowKey={"id"} style={{ marginTop: 16 }} dataSource={Data} columns={columns} pagination={pagination} />
<Table loading={loading} rowKey={"id"} style={{ marginTop: 16 }} dataSource={Data} columns={columns} pagination={pagination} />
</div>
);
......
src/pages/CommunityManagement/FacilityBookings/Bookings.less 0 → 100644
View file @ b7e2f806
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
}
//头部组件
.box{
width: 100%;
height: 64px;
position: relative;
}
.item1{
position: absolute;
width: 180px;
text-align: center;
border-left: 5px solid rgba(24,144,255,1);
font-family:'Source Han Sans CN';
font-size: 18px;
font-weight: 600;
color: #000000;
}
.item2{
width:300px;
position: absolute;
left: (300px);
line-height: 30px;
}
.item4{
position: absolute;
left: (500px);
line-height: 30px;
}
.item3{
width:80px;
height: 32px;
position: absolute;
right: 0;
outline: none;
background:none;
cursor: pointer;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
}
.box1{
width: 100%;
height: 34px;
position: relative;
margin-bottom: 26px;
}
.box1item1{
position: absolute;
}
.box1item2{
position: absolute;
left: 161px;
}
.box2{
width: 100%;
position: relative;
}
.box2item1{
position: absolute;
}
.box2item2{
width: 336px;
padding-left: 161px;
}
// 线栏
.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;
}
.box3item2{
position: absolute;
left: 161px;
}
.box3item3{
position: absolute;
left: 467px;
}
.box3item4{
position: absolute;
left: 592px;
}
.box4{
width: 100%;
height: 32px;
position: relative;
}
.box4item1{
position: absolute;
}
.box4item2{
position: absolute;
left: 161px;
}
.box4item3{
position: absolute;
left: 257px;
}
.box4item4{
position: absolute;
left: 281px;
}
.box5{
width: 100%;
height: 32px;
position: relative;
margin-bottom: 28px;
}
.box5item1{
position: absolute;
}
.box5item2{
position: absolute;
left: 161px;
}
.box6{
width: 100%;
height: 32px;
position: relative;
}
.box6item1{
position: absolute;
}
.box6item2{
position: absolute;
left: 216px;
}
\ No newline at end of file
src/pages/CommunityManagement/FacilityBookings/Bookings.tsx 0 → 100644
View file @ b7e2f806
import React, { useState, useEffect } from 'react';
import styles from './Bookings.less';
import { Input ,DatePicker,Button,Space,Pagination,message, Radio,TimePicker,Row, Col } from 'antd';
const { RangePicker } = TimePicker;
import moment from 'moment';
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 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(() => {
IA()
}, []);
useEffect(() => {
if (Data3Error) {
message.error('Check the community name,no found facility!');
setLoading(false)
IA()
}
}, [Data3Error]);
useEffect(() => {
setLoading(false)
}, [Data3]);
const [radioGroupValue,setRadioGroupValue]=useState(0)
const changeRadio = () => {
}
const getFacility = (values: any) => {
RA(1, { userToken: token, communityName: values })
setLoading(true)
}
const format="HH:mm"
const Mitime=(values:any) => {
console.log(values)
}
return (
<div className={styles.base}>
{/* 头部组件v1.2 */}
<TitleBack title="Facility Bookings" />
<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} />
</div>
</div>
{Data3 != null ?
<>
<div className={styles.box2}>
<div className={styles.box2item1}>Facility Bookings</div>
<div className={styles.box2item2}>
<Radio.Group onChange={changeRadio} defaultValue={1}>
{
Data3.map((item, index) => {
return (
<Radio key={"Radio_" + index} value={item.categoriesId}>{item.categoriesName}</Radio>
)
})
}
</Radio.Group>
</div>
</div>
<div className={styles.line}></div>
<div className={styles.box3}>
<div className={styles.box3item1}>User Name</div>
<div className={styles.box3item2}><Input style={{ width: 200 }} /></div>
<div className={styles.box3item3}>Contact Details</div>
<div className={styles.box3item4}><Input style={{ width: 200 }} /></div>
</div>
<div className={styles.box4}>
<div className={styles.box4item1}>Unit</div>
<div className={styles.box4item2}><Input style={{ width: 80 }} /></div>
<div className={styles.box4item3}>#</div>
<div className={styles.box4item4}><Input style={{ width: 80 }} /></div>
</div>
<div className={styles.line}></div>
<div className={styles.box5}>
<div className={styles.box5item1}>Booking Schedule</div>
<div className={styles.box5item2}>
<Row gutter={8}>
<Col> <DatePicker /></Col>
<Col> <RangePicker defaultValue={moment('12:30', format)} onChange={Mitime} format={format}/></Col>
</Row>
</div>
</div>
<div className={styles.box6}>
<div className={styles.box6item1}>Management fee required</div>
<div className={styles.box6item2}>${Data4.communityManagerFee}</div>
</div>
<div className={styles.box6}>
<div className={styles.box6item1}>Deposit is required</div>
<div className={styles.box6item2}>${Data4.communityMargin}</div>
</div>
<div className={styles.line}></div><Button type="primary" style={{ width: 80, height: 32 }}>提交</Button>
</> : null
}
</div>
);
};
function mapStateToProps(state:any) {
const { Data3,Data4,Data3Error } = state.FacilityBookings;
const { token } = state.login;
return {
Data3,
Data4,
Data3Error,
token
};
}
export default connect(mapStateToProps)(Bookings);
src/pages/CommunityManagement/FacilityBookings/BookingsView.less 0 → 100644
View file @ b7e2f806
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
}
//头部组件
.box{
width: 100%;
height: 64px;
position: relative;
}
.item1{
position: absolute;
width: 320px;
text-align: center;
border-left: 5px solid rgba(24,144,255,1);
font-family:'Source Han Sans CN';
font-size: 18px;
font-weight: 600;
color: #000000;
}
.item3{
width:80px;
height: 32px;
position: absolute;
right: 0;
outline: none;
background:none;
cursor: pointer;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
}
//内容组件
// 线栏
.line{
width: 100%;
height: 1px;
border-top: 1px solid rgba(217,217,217,1);
margin-top: 28px;
margin-bottom: 28px;
}
.box1{
width: 100%;
height: 34px;
position: relative;
}
.box1item1{
position: absolute;
}
.box1item2{
position: absolute;
left: 182px;
}
.box1item3{
position: absolute;
left: 440px;
}
.box1item4{
position: absolute;
left: 529px;
}
.box1item5{
position: absolute;
right:0;
}
.box2{
width: 100%;
height: 34px;
position: relative;
}
.box2item1{
position: absolute;
}
.box2item2{
position: absolute;
left: 182px;
}
.box2item3{
position: absolute;
left: 374px;
}
.box2item4{
position: absolute;
left: 500px;
}
.box2item5{
position: absolute;
left: 682px;
}
.box2item6{
position: absolute;
left: 814px;
}
.box2item7{
position: absolute;
left: 910px;
}
.box2item8{
position: absolute;
left: 950px;
}
.box3{
position: relative;
width: 100%;
height: 34px;
}
.box3item1{
position: absolute;
}
.box3item2{
position: absolute;
left: 121px;
}
.box3item3{
position: absolute;
left: 256px;
}
.box3item4{
position: absolute;
left: 372px;
}
.box3item5{
position: absolute;
left: 524px;
}
.box3item6{
position: absolute;
left: 567px;
}
.box4{
width: 100%;
height: 34px;
position: relative;
}
.box4item1{
position: absolute;
}
.box4item2{
position: absolute;
left: 216px;
}
.box5{
width: 100%;
height: 34px;
position: relative;
margin-bottom: 16px;
}
.box5item1{
position: absolute;
}
.box5item2{
position: absolute;
left: 242px;
}
.box6{
padding-left: 254px;
position: relative;
}
.box6item{
position: absolute;
width: 300px;
height: 80px;
}
//按钮
.search{
width:194px;
height:34px;
border:1px solid rgba(24,144,255,1);
border-radius:2px;
background-color:#e7f4ff;
outline: none;
font-size:14px;
font-weight:400;
color:rgba(24,144,255,1);
line-height:34px;
cursor: pointer;
margin-top: 16px;
}
src/pages/CommunityManagement/FacilityBookings/BookingsView.tsx 0 → 100644
View file @ b7e2f806
import React, { useState, useEffect } from 'react';
import styles from './BookingsView.less';
import { Input ,Menu,Table,Space,Pagination,Tooltip, Button, Radio } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
import TextArea from 'antd/lib/input/TextArea';
import TitleBack from '../../../components/TitleBack/TitleBack';
const BookingsView = () => {
return (
<div className={styles.base}>
{/* 头部组件v1.2 */}
<TitleBack title="View Facilty Bookings" />
{/* 内容组件 */}
<div className={styles.box1}>
<div className={styles.box1item1}>Appointment Status</div>
<div className={styles.box1item2}>Reservation Successful</div>
<div className={styles.box1item3}>OrderTime</div>
<div className={styles.box1item4}>02-12 10:20</div>
<div className={styles.box1item5}><Button style={{width:152}}>取消</Button></div>
</div>
<div className={styles.line}></div>
<div className={styles.box2}>
<div className={styles.box2item1}>Service Community</div>
<div className={styles.box2item2}>Constant company</div>
<div className={styles.box2item3}>Faciity Bookings</div>
<div className={styles.box2item4}>Swimming pool A</div>
<div className={styles.box2item5}>Booking Schedule</div>
<div className={styles.box2item6}>02-22 10:30</div>
<div className={styles.box2item7}>——</div>
<div className={styles.box2item8}>02-22 10:30</div>
</div>
<div className={styles.box3}>
<div className={styles.box3item1}>User Name</div>
<div className={styles.box3item2}>Josephine</div>
<div className={styles.box3item3}>Contract Details</div>
<div className={styles.box3item4}>13466573211</div>
<div className={styles.box3item5}>Unit</div>
<div className={styles.box3item6}>03#15-2020</div>
</div>
<div className={styles.line}></div>
<div className={styles.box4}>
<div className={styles.box4item1}>Management fee required</div>
<div className={styles.box4item2}>$ 100.00</div>
</div>
<div className={styles.box4}>
<div className={styles.box4item1}>Deposit is Required</div>
<div className={styles.box4item2}>$ 100.00</div>
</div>
{/* <Button style={{ width: 80, marginTop: 28 }}>支付</Button> */}
<div style={{marginBottom:19}}><Radio>Full Refund of Deposit</Radio></div>
<div className={styles.box5}>
<div className={styles.box5item1}><Radio>Partial Refund Of Deposit </Radio></div>
<div className={styles.box5item2}>$ <Input style={{width:80}}/></div>
</div>
<div className={styles.box6}>
<div className={styles.box6item1}><TextArea autoSize={false} style={{ width: 300,height:80}}/></div>
</div>
<button className={styles.search}>Return The Deposit Money</button>
</div>
);
};
export default BookingsView;
src/pages/CommunityManagement/FacilityBookings/Detail.less 0 → 100644
View file @ b7e2f806
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
}
//头部组件
.item0{
float: left;
}
.item0_1{
float: left;
line-height: 32px;
margin-left: 38px;
}
.item1{
float: left;
width: 120px;
}
.item1_1{
float: left;
margin-left: 16px;
}
.item2{
float: right;
}
.clear{
clear: both;
}
.clear0{
.clear();
margin-bottom: 35px;
}
.clear1{
.clear();
margin-bottom: 16px;
}
\ No newline at end of file
src/pages/CommunityManagement/FacilityBookings/Detail.tsx 0 → 100644
View file @ b7e2f806
import React, { useState, useEffect,useRef } from 'react';
import styles from './index.less';
import { Input ,Menu,Table,Space,Form,Radio, Modal,Row,Col, Button } 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 { values } from 'lodash';
const Detail = (props:any) => {
const { dispatch, DataSave,DataSaveDetail,token} = props;
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 })
}, []);
const statusDes = ["全部", "已申请", "已预订", "已使用", "已取消", "已完成"]
const [modalVisible,setModalVisible]=useState(false)
const [backFeeFlag, setBackFeeFlag] = useState(false)
const [curbackFee, setCurBackFee] = useState(0)
useEffect(() => {
if (DataSaveDetail != null) {
setCurBackFee(DataSaveDetail.marginFee)
}
}, [DataSaveDetail])
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)
} else {
setBackFeeFlag(true)
}
}
const onFinish = (values: any) => {
var val = values
var RAVAL = {
accountCategoriesId: DataSave.id,
backMarginFee: curbackFee.toString(),
backMarginFeeReason: val.backMarginFeeReason==null?"":val.backMarginFeeReason,
accountName:DataSave.accountName,
backFeeStatus:curbackFee==DataSaveDetail.marginFee?"0":"1",
marginFee:(DataSaveDetail.marginFee).toString()
}
console.log(RAVAL)
RA(3,RAVAL)
};
const onFinishFailed = (errorInfo: any) => { console.log('Failed:', errorInfo) };
const getBackMarginFee = (e:any) => {
setCurBackFee(e.target.value)
}
const makeFee = () => {
var RAVAL = {
accountCategoriesId: DataSave.id,
accountName: DataSave.accountName,
managerFee:(DataSaveDetail.managerFee).toString(),
marginFee:(DataSaveDetail.marginFee).toString()
}
RA(4,RAVAL)
}
const showModal = () => {
setModalVisible(true)
};
const handleOk = (e:any) => {
setModalVisible(false)
var RAVAL = {
accountCategoriesId: DataSave.id,
userToken: token,
}
RA(5,RAVAL)
};
const handleCancel = (e:any) => {
setModalVisible(false)
}
return (
<div className={styles.base}>
<TitleBack title={"View Facility Bookings"}/>
<Row gutter={8}>
<Col>预订状态</Col><Col span={2}>{statusDes[DataSave.status]}</Col>
<Col>下单时间</Col><Col span={2}>{timestampToTime3(DataSave.createTime.time)}</Col>
</Row>
<Line />
<Row gutter={8}>
<Col>服务小区</Col><Col span={3}>{DataSave.communityName}</Col>
<Col>预订设施</Col><Col span={3}>{DataSave.facilityTitle}</Col>
<Col>预订时间</Col><Col span={3}>{DataSave.subscribeDate}</Col>
<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>
<Col>单元</Col>
<Col span={3}>{DataSave.buildNumber}# {DataSave.floorNumber}-{DataSave.roomNumber}</Col>
</Row>
<Line />
{
(DataSaveDetail != null && DataSave.status==1)?
<>
<Row gutter={8} style={{ marginTop: 16 }}>
<Col>需要管理费</Col><Col span={2}>{DataSaveDetail.managerFee}</Col>
</Row>
<Row gutter={8} style={{ marginTop: 16 }}>
<Col>需要押金</Col><Col span={2}>{DataSaveDetail.marginFee}</Col>
</Row>
<div style={{marginTop:16}}>
<Button type="primary" onClick={makeFee}>缴费</Button>
</div>
<Line />
</>:null
}
{
(DataSaveDetail != null&&DataSave.marginFeeStatus == 1) ?
<>
<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>
</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>
</div>
{
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>
</div>
:null
}
<div style={{marginTop:16}}>
<Form.Item><Button type="primary" htmlType="submit">退还押金</Button></Form.Item>
</div>
<Line />
</Form>
</>:null
}
{
(DataSave.status == 1 || DataSave.status == 2) ?
<Button onClick={showModal}>取消预约</Button>
: null
}
<Modal okText="Yes" cancelText="No" title="Cancel Reservation" visible={modalVisible} onOk={handleOk} onCancel={handleCancel}>
<p>Are you sure you want to cancel the booking {DataSave.subscribeDate} {DataSave.subscribeTime} {DataSave.facilityTitle}</p>
</Modal>
</div>
);
};
function mapStateToProps(state:any) {
const { DataSave,DataSaveDetail } = state.FacilityBookings;
const { token } = state.login;
return {
DataSave,
DataSaveDetail,
token
};
}
export default connect(mapStateToProps)(Detail);
// accountId: ""
// accountName: "小文"
// accountPhone: "15917568033"
// baseQuery: null
// categoriesId: "868871abe5294075863a572d9ed4d533"
// categoriesImageUrl: ""
// categoriesName: ""
// communityId: "2df3a85e28b942edaf03f0ed765ff897"
// communityName: "A7"
// count: 0
// createTime: {date: 20, day: 4, hours: 17, minutes: 20, month: 7, …}
// deleted: 0
// description: ""
// extend: ""
// facilitiesId: "868871abe5294075863a572d9ed4d511"
// facilityTitle: ""
// id: "7b664a44a2a34add819f391dcb23675b"
// managerFeeStatus: 1
// marginFeeStatus: 1
// pageNum: 0
// status: 4
// subscribeDate: "2020-09-12"
// subscribeTime: "09:00,10:00"
// 预订状态
// 下单时间
// 服务小区
// 预订设施
// 预订时间
// 用户姓名
// 联系电话
// 单元
src/pages/CommunityManagement/FacilityBookings/FacilityBookings.tsx 0 → 100644
View file @ b7e2f806
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Tabs,Table,Space, Button} from 'antd';
const { TabPane } = Tabs;
import { Link, useIntl, connect, Dispatch,history } from 'umi';
import { objectColumns } from '../../../utils/string';
import { timestampToTime } from '../../../utils/time';
import TitleSearch from '../../../components/TitleSearch/TitleSearch';
const managerFeeStatusDes= ["未交", "已交", "已退"]
const marginFeeStatusDes = ["未交", "已交", "未退", "已退部分", "已退全部"]
const statusDes = ["全部", "已申请", "已预订", "已使用", "已取消", "已完成"]
const FacilityBookings = (props:any) => {
const { formatMessage } = useIntl();
const { dispatch, location, Data,DataPage,Data2,token} = props;
const TosCommunityFacilitiesFuzzyQuery = (values: any) => { dispatch({ type: 'FacilityBookings/TosCommunityFacilitiesFuzzyQuery', playload: values }) };
const RA = (values: any) => { dispatch({ type: 'FacilityBookings/RA', playload: {index:0, body:values } }) };
const SA = (values: any) => { dispatch({ type: 'FacilityBookings/SA', playload: values }) };
const [tab, setTab] = useState(1)
const [curPage, setCurPage] = useState(1)
const [loading, setLoading] = useState(false)
const [columns, setColumns] = useState([])
const [columns2, setColumns2] = useState([])
const goToFunction = () => {
history.push(location.pathname + (tab==1?'/Booking':'/Adding'))
}
const goToDetail = (values:any) => {
SA(values)
history.push(location.pathname + '/Detail')
}
const makeOperator = (values: any,index:any, e: any) => {
const path = ['/FacilityDetail', '/FacilityEdit', '/FacilityApply']
//console.log(path[index])
history.push(location.pathname + path[index])
}
useEffect(() => {
const key = [
["Service Community", "communityName"],
["User Name", "accountName"],
["Facility Bookings", "facilityTitle"],
["Order Time", null, (text: any, record: any) => (<div>{timestampToTime(record.createTime.time)}</div>)],
["Booking Schedule", "subscribeDate"],
["Fee", "managerFeeStatus",(text: any) => (<div>{managerFeeStatusDes[text]}</div>)],
["Deposit", "marginFeeStatus",(text: any) => (<div>{marginFeeStatusDes[text]}</div>)],
["Status", "status",(text: any) => (<div>{statusDes[text]}</div>)],
["Actions",null, (text: any, record: any) => (<Space size="middle"> <a onClick={goToDetail.bind(this,record)}>Detail</a></Space>)],
]
const key2 = [
["小区", "communityName"],
["设施", "facilityName"],
["开发时间", "categoriesOpenTime"],
["操作", null, (text: any, record: any) => (<Space size="middle">
<a onClick={makeOperator.bind(this,record,0)}>详情</a>
<a onClick={makeOperator.bind(this,record,1)}>编辑</a>
<a onClick={makeOperator.bind(this,record,2)}>预约</a>
</Space>)]
]
setColumns(objectColumns(key))
setColumns2(objectColumns(key2))
RA({ userToken: token, pageNum: 1 })
TosCommunityFacilitiesFuzzyQuery({ userToken: token, pageNum: 1 })
},[]);
useEffect(() => {
setLoading(false)
},[Data]);
const TitleSearchContent = (comment: any) => {
console.log(comment)
}
function TabCallback(key: any) { setTab(key) }
function Pagechange(current: any, pageSize: any) {
setCurPage(current)
RA({ userToken: token, pageNum: current })
setLoading(true)
}
return (
<div className={styles.base}>
{/* 头部组件 */}
<TitleSearch status={[{ name: ["status", "订单状态"], data: [[0, "未预约"], [1, "已缴费"]] }]} time={["key", "预订时间筛选"]} community={true} onSubmit={TitleSearchContent} />
<div style={{position:"relative",height:40}}>
<Button type="primary" style={{ position: "absolute", right: 0 }} onClick={goToFunction}>{tab==1?"Booking":"Add Facility"}</Button>
</div>
<Tabs defaultActiveKey="1" onChange={TabCallback}>
<TabPane tab="Facility Bookings" key="1">
<Table loading={loading} rowKey="id" style={{ marginTop: 16 }} dataSource={Data } columns={columns} pagination={{ current: curPage, total: DataPage.totalRow, showSizeChanger: false, onChange:Pagechange }} />
</TabPane>
<TabPane tab="Facility Management" key="2">
<Table rowKey="id" style={{ marginTop: 16 }} dataSource={Data2} columns={columns2} pagination={{ current: curPage, total: DataPage.totalRow, showSizeChanger: false, onChange: Pagechange }} />
</TabPane>
</Tabs>
</div>
);
};
function mapStateToProps(state:any) {
const { Data,DataPage,Data2 } = state.FacilityBookings;
const { token } = state.login;
return {
Data,
DataPage,
Data2,
token
};
}
export default connect(mapStateToProps)(FacilityBookings);
// status：预约设施状态 0:全部 1：已申请 2：已预订 3：已使用 4：已取消 5：已完成
// manager_fee_status：管理费 0：未 1：已交 2：已退
// margin_fee_status：押金 0：未 1：已交 2：未退 3：已退部分 4：已退全部 5：
src/pages/CommunityManagement/FacilityBookings/FacilityBookingsSetting.tsx 0 → 100644
View file @ b7e2f806
import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Input ,Upload,Modal,Button,Space,Pagination,Tooltip, Radio, Checkbox } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi';
import { PlusOutlined } from '@ant-design/icons';
function getBase64(file: Blob) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
import TitleBack from '../../../components/TitleBack/TitleBack';
const FacilityBookingsSetting = () => {
const [namelist, setNamelist] = useState(['A']);
const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage, setPreviewImage] = useState("");
const [previewTitle, setPreviewTitle] = useState("");
const [fileList, setFileList] = useState([]);
const uploadButton = ( <div><PlusOutlined /> <div className="ant-upload-text">Upload</div></div>);
const handleCancel = () => { setPreviewVisible(false) };
const handleChange = (Obj: any) => { setFileList(Obj.fileList) }
const handlePreview = async (file: { url: string; preview: string; originFileObj: Blob; name: any; }) => {
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 onCreate = () => {
let newlist = [...namelist];
newlist.push('D')
console.log(newlist)
setNamelist(newlist)
}
const onDelete = () => {
let newlist = [...namelist];
newlist.pop();
setNamelist(newlist)
}
return (
<div className={styles.base}>
{/* 头部组件v1.2 */}
<TitleBack title="Add Facility" />
<div className={styles.box1}>
<div className={styles.box1item1}>Project</div>
<div className={styles.box1item2}><Input.Search style={{width:200}} /></div>
</div>
<div className={styles.box2}>
<div className={styles.box2item1}>Facility Name</div>
<div className={styles.box2item2}><Input style={{ width: 200 }} /></div>
<div className={styles.box2item3}>Management Expense</div>
<div className={styles.box2item4}><Input style={{ width: 80 }} /></div>
<div className={styles.box2item5}>Deposit</div>
<div className={styles.box2item6}><Input style={{width:80}} /></div>
</div>
<div style={{marginBottom:20}}>Facility Category</div>
<ul className={styles.ulist}>
{
namelist.map((item, index) => {
return (
<div key={"namelist"+index}>
<li className={styles.llist}><div className={styles.alist2}>
<div className={styles.alist1}>
<Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange}>
{fileList.length >= 1? null : uploadButton}
</Upload>
<Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
<img alt="picture" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
<div className={styles.alist2box}>
<div className={styles.alist2boxitem1}>Name</div>
<div className={styles.alist2boxitem2}><Input style={{width:120}}/></div>
<div className={styles.alist2boxitem3}><div style={{cursor:"pointer",color:"#FF5151",fontWeight:600}} onClick={onDelete}>Delete</div></div>
</div>
</div>
</li>
</div>
)})
}
<li className={styles.llist}><div className={styles.alist3} onClick={onCreate}><PlusOutlined /></div></li>
</ul>
<div><p className={styles.alist2boxNone}>none</p></div>
<div className={styles.box3}>
<div className={styles.box3item1}>Facility Detail</div>
<div className={styles.box3item2}>
<div className={styles.box3group1}>
<Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange}>
{fileList.length >= 1? null : uploadButton}
</Upload>
<Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
<img alt="picture" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
</div>
</div>
<div className={styles.line}></div>
<div className={styles.box5}>
<div className={styles.box5item1}>Opening Hours</div>
<div className={styles.box5item2}>09:00~20:00</div>
</div>
<div className={styles.box6}>
<div className={styles.box6item1}>Settings For Booking</div>
<div className={styles.box6item2}><Input style={{width:80}} /></div>
<div className={styles.box6item3}>Cancel Appointment</div>
<div className={styles.box6item4}><Input style={{width:80}}/></div>
<div className={styles.box6item5}>No deposit,cancellation</div>
<div className={styles.box6item6}><Input style={{width:80}}/></div>
<div className={styles.box6item7}>Bookable</div>
</div>
<div className={styles.box7}>
<div className={styles.box7item1}><Input style={{width:120}}/></div>
<div className={styles.box7item2}><Input style={{width:80}}/></div>
</div>
<div className={styles.box8}>
<div className={styles.box8item1}><Checkbox>Fixed Time Period For Each Appointment</Checkbox></div>
<div className={styles.box8item2}><Input style={{width:100}}/></div>
<div className={styles.box8item3}> —</div>
<div className={styles.box8item4}><Input style={{width:100}}/></div>
</div>
<div className={styles.line}></div>
<Button type="primary" style={{ width: 80, height: 32 }}>提交</Button>
</div>
);
};
export default FacilityBookingsSetting;
src/pages/CommunityManagement/FacilityBookings/index.less 0 → 100644
View file @ b7e2f806
@import '~antd/lib/style/themes/default.less';
//基石
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
}
//头部组件
.box{
width: 100%;
height: 64px;
position: relative;
}
.item1{
position: absolute;
width: 180px;
text-align: center;
border-left: 5px solid rgba(24,144,255,1);
font-family:'Source Han Sans CN';
font-size: 18px;
font-weight: 600;
color: #000000;
}
.item3{
width:80px;
height: 32px;
position: absolute;
right: 0;
outline: none;
background:none;
cursor: pointer;
border:1px solid rgba(217,217,217,1);
border-radius:2px;
}
.box1{
width: 100%;
height: 34px;
position: relative;
margin-bottom: 28px;
}
.box1item1{
position: absolute;
}
.box1item2{
position: absolute;
left: 139px;
}
.box2{
width: 100%;
height: 34px;
position: relative;
margin-bottom: 28px;
}
.box2item1{
position: absolute;
}
.box2item2{
position: absolute;
left: 139px;
}
.box2item3{
position: absolute;
left: 407px;
}
.box2item4{
position: absolute;
left: 565px;
}
.box2item5{
position: absolute;
left: 713px;
}
.box2item6{
position: absolute;
left: 778px;
}
.box3{
position: relative;
margin-bottom: 28px;
}
.box3item1{
position: absolute;
}
.box3item2{
padding-left: 160px;
}
.box3group1{
width: 266px;
height: 100px;
}
.box4{
position: relative;
}
.box4item1{
position: absolute;
}
.box4item2{
padding-left: 160px;
}
.ulist{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.llist{
display:inline;
}
.alist{
float:left;
width: 160px;
}
.alist1{
position: relative;
width: 100px;
height: 100px;
}
.alist2{
float: left;
width: 326px;
margin-bottom: 20px;
z-index: 1;
}
.alist2box{
width: 100%;
height: 100%;
position: relative;
}
.alist2boxitem1{
position: absolute;
top: -100px;
left: 127px;
}
.alist2boxitem2{
position: absolute;
top: -100px;
left: 180px;
}
.alist2boxitem3{
position: absolute;
top: -40px;
left: 216px;
}
.alist2boxNone{
color: #ffffff;
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
}
.alist3{
z-index: 10;
cursor: pointer;
float: left;
width: 100px;
height: 100px;
line-height: 100px;
background-color: rgba(244,244,244,1);
text-align: center;
}
// 线栏
.line{
width: 100%;
height: 1px;
border-top: 1px solid rgba(217,217,217,1);
margin-top: 28px;
margin-bottom: 28px;
}
.box5{
position: relative;
width: 100%;
height: 34px;
margin-bottom: 28px;
}
.box5item1{
position: absolute;
}
.box5item2{
position: absolute;
left: 186px;
}
.box6{
position: relative;
line-height: 34px;
width: 100%;
height: 34px;
margin-bottom: 32px;
}
.box6item1{
position: absolute;
}
.box6item2{
position: absolute;
left: 186px;
}
.box6item3{
position: absolute;
left: 276px;
}
.box6item4{
position: absolute;
left: 478px;
}
.box6item5{
position: absolute;
left: 569px;
}
.box6item6{
position: absolute;
left: 794px;
}
.box6item7{
position: absolute;
left: 885px;
}
.box7{
position: relative;
width: 100%;
height: 34px;
margin-bottom: 28px;
}
.box7item1{
position: absolute;
left: 186px;
}
.box7item2{
position: absolute;
left: 323px;
}
.box8{
position: relative;
width: 100%;
height: 34px;
}
.box8item1{
position: absolute;
}
.box8item2{
position: absolute;
left: 346px;
}
.box8item3{
position: absolute;
left: 462px;
color: rgba(217,217,217,1);
}
.box8item4{
position: absolute;
left: 502px;
}
\ No newline at end of file
src/services/tos.ts
View file @ b7e2f806
......@@ -49,3 +49,31 @@ export function TosCommunityServiceGetDetail(values: any) {
export function TosCommuntiyServiceReply(values: any) {
return request('/tos/communtiy/service/reply',{method: 'POST',body: JSON.stringify(values),headers:{ 'Content-Type': 'application/json'}})
}
//小区管理
const headers = { 'Content-Type': 'application/json'}
function Body(values:any) { return {method: 'POST',body: JSON.stringify(values),headers:headers}}
// 设施管理
export function TosCommunityFacilitiesFuzzyQuery(values: any) {
return request('/tos/community/facilities/fuzzy/query',Body(values))
}
const requestList = [
"/tos/community/facilities/categories/subscribe/list",//0 请求预订列表
"/tos/community/facilities/get",//1 设施品类获取
"/tos/community/facilities/categories/detail/get",//2缴费详情
"/tos/community/facilities/categories/fee/back",//3退还押金
"/tos/community/facilities/categories/fee/pay",//4缴费
"/tos/community/categories/subscribe/cancel",//5取消预约
]
function requestAuto(url:string,values:any) {
return request(url, Body(values))
}
export function RA(playload: any) {
console.log(playload)
console.log(playload.index)
console.log(requestList[playload.index])
return requestAuto(requestList[playload.index],playload.body)
}
\ No newline at end of file
src/utils/string.ts
View file @ b7e2f806
......@@ -5,3 +5,14 @@ export const stringSplit=(string:any,rex:any)=>{
return string;
}
// 构建对象
export const objectColumns=(key:any) => {
const name = ["title", "dataIndex", "render"]
var temp = new Array()
key.map((items:any) => {
var values: any = {}; items.map((thing:any, i:any) => { values[name[i]] = thing }); temp.push(values)
})
return temp
}
\ No newline at end of file
src/utils/time.ts
View file @ b7e2f806
export const timestampToTime=(timestamp:any)=>{
var date = new Date(timestamp);//*1000//getHours getMinutes getSeconds
return date.getDate() + '-'+ (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'+date.getFullYear();
}
//2020/7/14/18:09:00
export const timestampToTime2=(timestamp:any)=>{
......@@ -10,7 +6,7 @@ export const timestampToTime2=(timestamp:any)=>{
return date.getFullYear()+'/' + (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + ' '+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds()
}
//月份补零
function addTZero(time) {
let tmp = time + 1 < 10 ? '0' + time : time + 1
return tmp
......@@ -25,3 +21,10 @@ export const timestampToTime3=(timestamp:any)=>{
return addZero(date.getDate()) + '-'+ addTZero(date.getMonth()) + ' '+addZero(date.getHours())+ ':'+addZero(date.getMinutes());
}
// 03-08-2020
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();
}
\ 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