Skip to content

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

设施新增重做 

Signed-off-by: cellee's avatarcellee <893264950@qq.com>
parent 4ac63b98
Hide whitespace changes
Inline Side-by-side
Showing with 1198 additions and 414 deletions
src/components/Facilitys/Facilitys copy.tsx deleted 100644 → 0
View file @ 4ac63b98
import React, { useState, useEffect, useRef } from 'react';
import './index.less';
import { Input, Button, Upload, Form, Select, message, Modal } from 'antd';
const { Option } = Select;
import { PlusOutlined } from '@ant-design/icons';
import { Link, useIntl, connect, Dispatch, history } from 'umi';
import { event } from '@/.umi/plugin-locale/locale';
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 Facilitys = (props: any) => {
//传递值
const { updata, disabled } = props;
console.log(disabled);
//上传列表
const [fileList, setFileList] = useState([]);
//显示隐藏
const [previewVisible, setpreviewVisible] = useState(false);
// 名称
const [previewTitle, setpreviewTitle] = useState('');
// 图片地址
const [previewImage, setpreviewImage] = useState(null);
// 新增按钮
const uploadButton = (
<div>
<PlusOutlined />
<div className="ant-upload-text">Upload</div>
</div>
);
// 上传属性
const uploadProps = {
listType: 'picture-card',
accept: '.jpeg,.png,.jpg',
action: '/tos/image/upload',
// fileList: fileList,
onChange(info: any) {
console.log(info);
if (info.file.status === 'done') {
message.success(`${info.file.name} file uploaded successfully`);
// 拿到key 值 开始存储
let list = fileList;
// setFileList(list); // 注意 不能直接赋值 因为使用完全绑定需要全部更新
setFileList([...list]);
console.log(fileList);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
},
};
// 上传
const carryData = (key: any) => {
console.log(`key值是${key}`);
updata.identification = key;
console.log(updata);
return updata;
};
// 预览
const handlePreview = async (file) => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
setpreviewImage(file.url || file.preview);
setpreviewTitle(file.name);
setpreviewVisible(true);
};
// 点击遮罩回调
const handleCancel = () => {
setpreviewVisible(false);
};
// 点击移除图片
const handRemove = () => {
setFileList([...fileList]);
};
return (
<>
<Form.List
name="names"
rules={[
{
validator: async (_, names) => {
// if (!names || names.length < 2) {
// return Promise.reject(new Error('At least 2 passengers'));
// }
},
},
]}
>
{(fields, { add, remove }, { errors }) => (
<>
{fields.map((field, index) => (
<Form.Item required={false} key={field.key} style={{ marginBottom: 0 }}>
{/* 每一个上传的组件 */}
<div className={'test'}>
<div className={'diybox'}>
<Upload
fileList={fileList}
data={carryData(index)}
{...uploadProps}
disabled={disabled}
onPreview={handlePreview}
onRemove={handRemove}
>
{/* 这里存在一个bug 当 key 超过 fileList 的默认值后 会报错 */}
{fileList.length >= 1 ? null : uploadButton}
</Upload>
<div className={'Facility'}>
<Form.Item
label={`Facility Name ${index}`}
name={field.key}
rules={[{ required: true, message: 'Please input Facility Name!' }]}
>
<Input placeholder="Facility Name" disabled={disabled} />
</Form.Item>
<div className={'over'}>
{fields.length > 1 ? (
<Button
type="link"
disabled={disabled}
onClick={() => remove(field.name)}
>
Delete
</Button>
) : null}
</div>
</div>
</div>
</div>
</Form.Item>
))}
{fields.length < 5 ? (
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
style={{ width: '100px', height: '100px' }}
icon={<PlusOutlined />}
disabled={disabled}
></Button>
<Form.ErrorList errors={errors} />
</Form.Item>
) : null}
</>
)}
</Form.List>
{/* 预览表格 */}
<Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
<img alt="example" style={{ width: '100%' }} src={previewImage} />
</Modal>
</>
);
};
export default Facilitys;
src/components/Facilitys/Facilitys.tsx
View file @ 47d17e5f
import React, { useState } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import './index.less'; import './index.less';
import { Button, Form, message, Modal } from 'antd'; import { Button, Form, message, Modal, Input, Upload } from 'antd';
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import FacilitysTow from './FacilitysTow'; // import FacilitysTow from './FacilitysTow';
import { Link, useIntl, connect, Dispatch, history } from 'umi'; import { Link, useIntl, connect, Dispatch, history } from 'umi';
function getBase64(file) { function getBase64(file: any) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const reader = new FileReader(); const reader = new FileReader();
reader.readAsDataURL(file); reader.readAsDataURL(file);
...@@ -13,54 +13,218 @@ function getBase64(file) { ...@@ -13,54 +13,218 @@ function getBase64(file) {
reader.onerror = (error) => reject(error); reader.onerror = (error) => reject(error);
}); });
} }
const module = 'FacilityBookings';
const Facilitys = (props: any) => { const Facilitys = (props: any) => {
//传递值 //传递值
const { updata, disabled } = props; const { updata, disabled, FacilitysList, dispatch, dumps } = props;
//上传列表
// const [FacilitysList, setFileList] = useState(FacilitysList);
//显示隐藏
const [previewVisible, setpreviewVisible] = useState(false);
// 名称
const [previewTitle, setpreviewTitle] = useState('');
// 图片地址
const [previewImage, setpreviewImage] = useState('');
// 传递给后台加 key
const updetaTow = (key: any) => {
let data = updata;
data.identification = key;
return data;
};
//绑定值
const updetaList = (key: any) => {
return FacilitysList[key].fileList;
};
// 预览
const handlePreview = async (file: any) => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
setpreviewImage(file.url || file.preview);
setpreviewTitle(file.name);
setpreviewVisible(true);
};
// 点击移除图片
const handRemove = (key: any) => {
// let list = fileList;
// 将图片信息提交给state
deleteImg(key);
};
// 点击遮罩回调
const handleCancel = () => {
setpreviewVisible(false);
};
// 上传属性
const uploadProps: any = {
listType: 'picture-card',
accept: '.jpeg,.png,.jpg',
action: '/tos/image/upload',
onChange(info: any) {
// console.log(info);
if (info.file.status === 'done') {
message.success(`${info.file.name} file uploaded successfully`);
// 拿到key 值 开始存储
let key = info.fileList[0].response.data.identification;
let list = FacilitysList;
list[key].id = key;
list[key].fileList = info.fileList;
// 存储到mode里面去
dispatch({ type: module + '/genxin', list });
// 当前页面也要刷新
// let list = fileList;
// setFileList(list); // 注意 不能直接赋值 因为使用完全绑定需要全部更新
// setFileList(list);
// let list: any = [...fileList, ...info.fileList];
// setFileList(list);
console.log(list);
// 将图片信息提交给state
// let data = { val: info.file.name, key: keys };
// dispatch({ type: module + '/retImgsList', data });
// 结束
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
},
};
// 新增动作
const add = () => {
let list = FacilitysList;
let adds = {
id: '-1',
fileList: [],
name: '',
};
// 验证已添加的是否上传完整
let complete = list.every((item: any) => {
// return item.fileList.length > 0 && item.name !== '';
return item.fileList.length > 0;
});
if (list.length == 0 || complete) {
list.push(adds);
// 存储到mode里面去
dispatch({ type: module + '/genxin', list });
} else {
// 提示每一项都要填写完
message.error('Please fill out each item ！');
}
};
//删除动作
const deleteImg = (key: any) => {
let list = FacilitysList;
list[key].name = '';
// 这里还要清除表单的值，否则再次新增输入框的值会重复出现
dumps(key);
list.splice(key, 1);
// 存储到mode里面去
dispatch({ type: module + '/genxin', list });
};
// 新增按钮
const uploadButton = (
<div>
<PlusOutlined />
<div className="ant-upload-text">Upload</div>
</div>
);
// 输入框内容
const monitor = (e: any) => {
let list = FacilitysList;
let { id, value } = e.target;
if (id == 'basic_shebei_0') {
id = 0;
}
list[id].name = value;
dispatch({ type: module + '/genxin', list });
};
return ( return (
<> <>
<Form.List <Form.Item name="picList" required={false} style={{ marginBottom: 0 }}>
name="picList" {FacilitysList.map((item: any, index: any, key: any) => {
rules={[ return (
{ <div className={'test'} key={'pic_' + index}>
validator: async (_, names) => { <div className={'diybox'} key={'pic_' + index}>
// if (!names || names.length < 2) { <Upload
// return Promise.reject(new Error('At least 2 passengers')); {...uploadProps}
// } fileList={
}, FacilitysList[index].fileList.length > 0 ? FacilitysList[index].fileList : false
}, }
]} // data={updata}
> data={updetaTow(index)} // 携带数据
{(fields, { add, remove }, { errors }) => ( disabled={disabled} // 禁止
<> onPreview={handlePreview} // 预览
{fields.map((field, index) => ( onRemove={() => {
<Form.Item required={false} key={field.key} style={{ marginBottom: 0 }}> handRemove(index);
<FacilitysTow updata={updata} disabled={disabled} keys={field.key}></FacilitysTow> }} //移除
</Form.Item> >
))} {FacilitysList[index].fileList.length > 0 ? null : uploadButton}
{fields.length < 5 ? ( </Upload>
<Form.Item>
<Button <div className={'Facility'} key={'pic_' + index}>
type="dashed" <Form.Item
onClick={() => add()} label={`Facility Name ${index + 1}`}
style={{ width: '100px', height: '100px' }} name={'shebei_' + index}
icon={<PlusOutlined />} rules={[{ required: true, message: 'Please input Facility Name!' }]}
disabled={disabled} >
></Button> <Input
<Form.ErrorList errors={errors} /> placeholder="Facility Name"
</Form.Item> disabled={disabled}
) : null} id={index}
</> onChange={(e: any) => monitor(e)}
)} value={FacilitysList[index].name}
</Form.List> />
</Form.Item>
<div className={'over'}>
<Button type="link" disabled={disabled} onClick={() => deleteImg(index)}>
Delete
</Button>
</div>
</div>
</div>
</div>
);
})}
</Form.Item>
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
style={{ width: '100px', height: '100px' }}
icon={<PlusOutlined />}
disabled={disabled}
></Button>
</Form.Item>
{/* 预览表格 */}
<Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
<img alt="example" style={{ width: '100%' }} src={previewImage} />
</Modal>
</> </>
); );
}; };
function mapStateToProps(state: any) { function mapStateToProps(state: any) {
const { imgList } = state.FacilityBookings; const { FacilitysList } = state.FacilityBookings;
console.log(FacilitysList);
return { return {
imgList, FacilitysList,
}; };
} }
export default connect(mapStateToProps)(Facilitys); export default connect(mapStateToProps)(Facilitys);
src/components/Facilitys/FacilitysTow.tsx deleted 100644 → 0
View file @ 4ac63b98
import React, { useState, useEffect, useRef } from 'react';
import './index.less';
import { Input, Upload, Form, Select, message, Modal } from 'antd';
const { Option } = Select;
import { PlusOutlined } from '@ant-design/icons';
import { Link, useIntl, connect, Dispatch, history } from 'umi';
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 module = 'FacilityBookings';
const FacilitysTow = (props: any) => {
const { updata, disabled, keys, dispatch } = props;
//上传列表
const [fileList, setFileList] = useState([]);
//显示隐藏
const [previewVisible, setpreviewVisible] = useState(false);
// 名称
const [previewTitle, setpreviewTitle] = useState('');
// 图片地址
const [previewImage, setpreviewImage] = useState('');
// 新增按钮
const uploadButton = (
<div>
<PlusOutlined />
<div className="ant-upload-text">Upload</div>
</div>
);
// 上传属性
const uploadProps = {
listType: 'picture-card',
accept: '.jpeg,.png,.jpg',
action: '/tos/image/upload',
// fileList: fileList,
onChange(info: any) {
console.log(info);
if (info.file.status === 'done') {
message.success(`${info.file.name} file uploaded successfully`);
// 拿到key 值 开始存储
// let key = info.fileList[0].response.data.identification;
// let list = fileList;
// list[key] = info.fileList;
// setFileList(list); // 注意 不能直接赋值 因为使用完全绑定需要全部更新
// setFileList(list);
let list: any = [...fileList, ...info.fileList];
setFileList(list);
console.log(info);
// 将图片信息提交给state
let data = { val: info.file.name, key: keys };
dispatch({ type: module + '/retImgsList', data });
// 结束
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
},
};
// 预览
const handlePreview = async (file) => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
setpreviewImage(file.url || file.preview);
setpreviewTitle(file.name);
setpreviewVisible(true);
};
// 点击遮罩回调
const handleCancel = () => {
setpreviewVisible(false);
};
// 点击移除图片
const handRemove = () => {
// let list = fileList;
setFileList([]);
// 将图片信息提交给state
let data = { key: keys };
dispatch({ type: module + '/overImgList', data });
};
// 输入框内容
const monitor = (e: any) => {
let data = { val: e.target.value, key: keys };
dispatch({ type: module + '/retImgsName', data });
};
return (
<div>
{}
{/* 每一个上传的组件 */}
<div className={'test'}>
<div className={'diybox'}>
<Upload
fileList={fileList}
data={updata}
{...uploadProps}
disabled={disabled}
onPreview={handlePreview}
onRemove={handRemove}
>
{/* 这里存在一个bug 当 key 超过 fileList 的默认值后 会报错 */}
{fileList.length >= 1 ? null : uploadButton}
</Upload>
<div className={'Facility'}>
<Form.Item
label={`Facility Name ${keys}`}
name={keys.key}
rules={[{ required: true, message: 'Please input Facility Name!' }]}
>
<Input placeholder="Facility Name" onChange={monitor} disabled={disabled} />
</Form.Item>
<div className={'over'}>
{/* {fields.length > 1 ? (
<Button type="link" disabled={disabled} onClick={() => remove(field.name)}>
Delete
</Button>
) : null} */}
</div>
</div>
</div>
</div>
{/* 预览表格 */}
<Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
<img alt="example" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
);
};
function mapProps(state: any) {
console.log(state.FacilityBookings);
console.log('------------------');
const { imgList } = state.FacilityBookings;
return {
imgList,
};
}
export default connect(mapProps)(FacilitysTow);
src/components/OnTime/OnTime.tsx
View file @ 47d17e5f
...@@ -3,9 +3,11 @@ import { Select } from 'antd'; ...@@ -3,9 +3,11 @@ import { Select } from 'antd';
const Option = Select.Option; const Option = Select.Option;
const OnTime = (porps: any) => { const OnTime = (porps: any) => {
// placeholder 默认显示 disabled 是否禁止 openSelect 选中函数 limit 限制时间 // placeholder 默认显示 disabled 是否禁止
let { placeholder, disabled, openSelect, limit } = porps; // openSelect 选中函数 limit 限制时间 type 类型 时开始还是结束 1 就是结束 结尾是59
let { placeholder, disabled, openSelect, limit, type } = porps;
console.log(limit);
// 生成数组 -- 时间 // 生成数组 -- 时间
const createArray = (num: any) => { const createArray = (num: any) => {
var arr = []; var arr = [];
...@@ -21,11 +23,15 @@ const OnTime = (porps: any) => { ...@@ -21,11 +23,15 @@ const OnTime = (porps: any) => {
//小时 //小时
const hourS = createArray(24).map((item) => const hourS = createArray(24).map((item) =>
// 处理限制时间 // 处理限制时间段
limit ? ( limit ? (
<Option value={item + ':00'} key={item} disabled={Times(item, limit)}>{`${item}:00`}</Option> <Option value={item + (type ? ':59' : ':00')} key={item} disabled={Times(item, limit)}>
{item + (type ? ':59' : ':00')}
</Option>
) : ( ) : (
<Option value={item + ':00'} key={item}>{`${item}:00`}</Option> <Option value={item + (type ? ':59' : ':00')} key={item}>
{item + (type ? ':59' : ':00')}
</Option>
), ),
); );
......
src/models/CommunityManagement/FacilityBookings.ts
View file @ 47d17e5f
...@@ -29,8 +29,8 @@ export default { ...@@ -29,8 +29,8 @@ export default {
// 不知道前面是干嘛的，自增公告列表 // 不知道前面是干嘛的，自增公告列表
NoticeList: [], NoticeList: [],
imgList: [{}, {}, {}, {}, {}], // 设施图片列表 resultTime: null, // 设施已预约时间段
resultTime:null, // 设施已预约时间段 FacilitysList: [],// 动态新增组件
}, },
reducers: { reducers: {
...@@ -41,9 +41,9 @@ export default { ...@@ -41,9 +41,9 @@ export default {
}, },
// 设施图片列表 // 设施图片列表
retImgsList(state,{data}) { retImgsList(state, { list }) {
state.imgList[data.key]['pic'] = data.val; let FacilitysList = list;
return state return { ...state, FacilitysList}
}, },
// 设施图片名称 // 设施图片名称
...@@ -242,8 +242,10 @@ export default { ...@@ -242,8 +242,10 @@ export default {
yield put({type: 'returnResult', null} ) yield put({type: 'returnResult', null} )
}, },
// 更新列表
*genxin({ list }, { put }) {
yield put({type: 'retImgsList', list} )
}
}, },
......
src/pages/CommunityManagement/FacilityBookings/Bookings.tsx
View file @ 47d17e5f
...@@ -352,15 +352,17 @@ const Bookings = (props: any) => { ...@@ -352,15 +352,17 @@ const Bookings = (props: any) => {
disabled={prohibit} disabled={prohibit}
limit={curString.categoriesOpenTime} limit={curString.categoriesOpenTime}
openSelect={startTimes} openSelect={startTimes}
type={0}
/> />
</Form.Item> </Form.Item>
<span className="diyspan">-</span> <span className="diyspan">-</span>
<Form.Item name="endTime" noStyle> <Form.Item name="endTime" noStyle>
<OnTime <OnTime
placeholder={'Closing Time'} placeholder={'Closing Time'} // 默认值
disabled={prohibit} disabled={prohibit} // 是否禁止
limit={curString.categoriesOpenTime} limit={curString.categoriesOpenTime} // 禁止时间段
openSelect={endTimes} openSelect={endTimes} // 时间类型
type={1}
/> />
</Form.Item> </Form.Item>
</Form.Item> </Form.Item>
......
src/pages/CommunityManagement/FacilityBookings/Facility copy 2.tsx 0 → 100644
View file @ 47d17e5f
import React, { useState, useEffect, useRef } from 'react';
import './css/index.less';
import {
Input,
TimePicker,
InputNumber,
Button,
Space,
Pagination,
Tooltip,
Upload,
Form,
Select,
message,
} from 'antd';
const { RangePicker } = TimePicker;
const { Option } = Select;
import { PlusOutlined, MinusCircleOutlined, ClearOutlined } from '@ant-design/icons';
import { Link, useIntl, connect, Dispatch, history } 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';
import { getNumber } from '../../../utils/string';
import SearchOptionsCommnity from '../../../components/SearchOptions/SearchOptionsCommnity';
import { NewFaci } from '@/utils/tip';
// categoriesDetailsImageName: ["test.jpg"],
// categoriesName: ["篮球场A&test.jpg"],
// reservationQuantumTime: ["09:00-07:00"]
import Facilitys from '@/components/Facilitys/Facilitys';
import { getUrlLast, numberToString } from '../../../utils/string';
import { checkParam, timeForm } from '@/utils/method';
import { validateMessages } from '@/utils/params';
const module = 'FacilityBookings';
import moment from 'moment';
const Facility = (props: any) => {
const { dispatch, location, token, sourceData, DataSave, Result, imgList, load } = props;
const RA = (index: any, values: any) => {
dispatch({ type: 'FacilityBookings/RA', playload: { index: index, body: values } });
};
const ResultClear = () => {
dispatch({ type: 'FacilityBookings/ResultClear' });
};
const openCheck = true;
const [Ref3, setRef3] = useState([]);
const [extend, setExtend] = useState(null);
const [timeExtend, setTimeExtend] = useState(null);
const [pictrueExtend, setPictrueExtend] = useState({ pic: null, pics: null, tab: 3 });
const [facilityDetail, setFacilityDetail] = useState(false);
const [PATHNAME, setPATHNAME] = useState('');
const formRef = useRef(null);
// 再监听列表
const [extImgList, setextImgList] = useState(imgList);
useEffect(() => {
console.log('变化');
console.log(imgList);
if (imgList != null) {
setextImgList(imgList);
}
}, [imgList]);
useEffect(() => {
if (Result != null) {
console.log('页面结果');
console.log(Result);
ResultClear();
history.push('/CommunityManagement/FacilityBookings');
}
}, [Result]);
const RA_S = () => {
if (DataSave != null) {
console.log('请求的设施ID为：' + DataSave.id);
RA(7, {
userToken: token,
facilitieId: DataSave.id,
});
} else {
history.go(-1);
}
};
useEffect(() => {
if (sourceData != null) {
console.log('【传入详情，当前数据不为空】');
console.log(sourceData);
setExtend(sourceData.communityName);
setTimeExtend(sourceData.reservationQuantumTime);
// 中断
// setPictrueExtend({tab:null,pic:null,pics:null})
console.log('重点检查');
console.log(sourceData);
formRef.current.setFieldsValue(sourceData);
}
}, [sourceData]);
useEffect(() => {
var tmp = pictrueExtend;
if (location.pathname.indexOf('FacilityEdit') > -1) {
setPATHNAME('Edit Facility');
tmp.tab = 1;
setPictrueExtend(tmp);
RA_S();
} else if (location.pathname.indexOf('FacilityDetail') > -1) {
setFacilityDetail(true);
tmp.tab = 2;
setPictrueExtend(tmp);
setPATHNAME('Facility Detail');
RA_S();
} else {
tmp.tab = 3;
setPictrueExtend(tmp);
setPATHNAME('Add Facility');
}
}, []);
// const TimeSelectRef = (values:any) => {
// setRef3(values)
// }
// 提交
const onFinish = (values: any) => {
var result = values;
// 过滤表单;
let imgs = extImgList.filter((item: any) => (Object.keys(item).length == 0 ? false : true));
console.log(imgs.length);
// 开放时间判断
if (imgs.length == 0) {
message.error('Please upload at least one facility!');
} else if (!result.endTime && !result.startTime) {
message.error('Please select the opening time!');
} else {
// 先处理设施和时间
let categoriesName: any = [];
let reservationQuantumTime: any = [
moment(result.startTime, 'HH:mm').format('HH:mm'),
moment(result.endTime, 'HH:mm').format('HH:mm'),
];
for (var i in imgs) {
if (imgs[i].name && imgs[i].pic) {
categoriesName[i] = `${imgs[i].name}&${imgs[i].pic}`;
} else {
message.error('Please fill in the name of the facility!');
return;
}
}
result.categoriesName = categoriesName; // 设施内容
result.reservationQuantumTime = reservationQuantumTime; // 开放时间段
result.categoriesOpenTime = `${result.startTime}-${result.endTime}`; // 预约时间段 二开需要
delete result.startTime;
delete result.periodType;
delete result.picList;
console.log(reservationQuantumTime);
console.log(result);
RA(6, result);
// 如果有了 开始上传
// if (categoriesName) {
// }
}
return false;
// if (Ref3.length!=0) {
// result.reservationQuantumTime = Ref3
// } else {
result.reservationQuantumTime = [timeForm(result.categoriesOpenTime, 'HH:mm')];
var categoriesOpenTime = timeForm(result.categoriesOpenTime, 'HH:mm');
result.categoriesOpenTime = categoriesOpenTime;
// }
// console.log(timeForm(result.categoriesOpenTime,'HH:mm'))
// result.categoriesOpenTime = "09:00-20:00"
if (result.communityManagerFee == null) {
result.communityManagerFee = numberToString(0);
} else {
result.communityManagerFee = numberToString(result.communityManagerFee);
}
if (result.communityMargin == null) {
result.communityMargin = numberToString(0);
} else {
result.communityMargin = numberToString(result.communityMargin);
}
if (
result.canReservationDay <= result.cancelReservationDay ||
result.canReservationDay <= result.nomarginCancelReservationDay
) {
message.error('can Reservation Day is invaild!', 3);
result.canReservationDay = null;
} else {
console.log('Should be check:', result);
if (checkParam(result)) {
//中断
if (pictrueExtend.tab == 3) {
if (Result == null) {
console.log('提交');
RA(6, result);
}
} else {
result.id = DataSave.id;
console.log('编辑');
if (Result == null) {
RA(17, result);
}
}
} else {
message.error('Error,Please finish it,not empty!', 3);
}
}
};
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
};
const Subscribe = () => {
history.push(getUrlLast(location.pathname) + '/FacilityApply');
};
const keyup_tool = (value: any) => {
return getNumber(value.replace(/[^\d^\.]+/g, ''));
};
const keyup_communityManagerFee = (e: any) => {
e.target.value = keyup_tool(e.target.value);
formRef.current.setFieldsValue({ communityManagerFee: e.target.value });
};
const keyup_communityMargin = (e: any) => {
e.target.value = keyup_tool(e.target.value);
formRef.current.setFieldsValue({ communityMargin: e.target.value });
};
const keyup = (keyname: any, e: any) => {
e.target.value = e.target.value.replace(/[^\d^\.]+/g, '');
var tmp = {};
tmp[keyname] = e.target.value;
formRef.current.setFieldsValue(tmp);
};
// 监听是否选择了小区
const [imgOpen, setImgOpen] = useState(true);
const [ctyName, setCtyName] = useState(null);
// 生成数组 -- 时间
const createArray = (num: any) => {
var arr = [];
for (let i = 1; i < num; i++) {
if (i < 10) {
arr[i] = `0${i}`;
} else {
arr[i] = i;
}
}
return arr;
};
const Option = Select.Option;
//小时
const hourS = createArray(24).map((item) => (
<Option value={item + ':00'} key={item}>{`${item}:00`}</Option>
));
// 图片列表
const fileList: any = [];
// 表单标识
const [form] = Form.useForm();
// 选择小区名字并赋值
const opname = (value: any) => {
if (value) {
setImgOpen(false); // 允许图片上传
setCtyName(value); // 给小区赋值
form.setFieldsValue({
communityName: value, // 给表单赋值
});
} else {
// 设置是否能点击上传
setImgOpen(true);
}
};
return (
<div className={'base basediy'}>
{/* 头部组件v1.2 */}
<TitleBack title={PATHNAME} url={getUrlLast(location.pathname) + '?Facility=true'} />
<Form
ref={formRef}
form={form}
name="basic"
onFinish={onFinish}
onFinishFailed={onFinishFailed}
validateMessages={validateMessages}
>
{/* 选择小区 */}
<Form.Item label="Community" name="communityName" rules={NewFaci[0]}>
<SearchOptionsCommnity
// ubmit={extendName}
opname={opname}
/>
</Form.Item>
{/* 设施名称 以及费用 */}
<Input.Group>
<Form.Item label="Facility" name="facilityName" rules={NewFaci[1]}>
<Input placeholder="Facility Name" />
</Form.Item>
<Form.Item label="Fee($)" name="communityManagerFee" rules={NewFaci[2]}>
<span className="divIconMoney">$</span>
<InputNumber
onKeyUp={keyup_communityManagerFee}
prefix="$"
placeholder="00.00"
disabled={facilityDetail}
min={0}
max={999}
step={0.01}
style={{ paddingLeft: '12px', width: '120px' }}
/>
</Form.Item>
<Form.Item label="Deposit" name="communityMargin" rules={NewFaci[3]}>
<span className="divIconMoney">$</span>
<InputNumber
onKeyUp={keyup_communityMargin}
prefix="$"
placeholder="00.00"
disabled={facilityDetail}
min={0}
max={999}
step={0.01}
style={{ paddingLeft: '12px', width: '120px' }}
/>
</Form.Item>
</Input.Group>
<hr></hr>
{/* 设施品类上传 */}
<Form.Item label="Facility Classification" className="flex required">
<Facilitys
disabled={imgOpen}
updata={{
// userToken: token,
imageType: 'categoriesImageName',
extends: ctyName,
}}
></Facilitys>
</Form.Item>
{/* 设施详情上传 */}
<Form.Item name="categoriesDetailsImageName" label="Facility Details" rules={NewFaci[4]}>
<PictureOptionsRow
over={imgOpen}
data={{
userToken: token,
imageType: 'categoriesDetailsImageName',
extends: ctyName,
}}
/>
</Form.Item>
{/* 时间 */}
<Form.Item label="Opening Hours" className="required">
<Form.Item name="startTime" noStyle>
<Select style={{ width: 140 }} placeholder="Start Time">
{hourS}
</Select>
</Form.Item>
<span className="diyspan">-</span>
<Form.Item name="endTime" noStyle>
<Select style={{ width: 140 }} placeholder="Closing Time">
{hourS}
</Select>
</Form.Item>
</Form.Item>
<hr></hr>
{/* ------------- */}
<p className="diyp">Appointment Settings : </p>
{/* 预约设置 */}
<Input.Group>
<Form.Item name="cancelReservationDay" label="Early Cancellation" rules={NewFaci[5]}>
<Input
onKeyUp={keyup.bind(this, 'cancelReservationDay')}
disabled={facilityDetail}
prefix="Advance"
suffix="Day"
style={{ width: 160, textAlign: 'center' }}
placeholder="0"
/>
</Form.Item>
<Form.Item
label="No deposit to cancel reservation"
name="nomarginCancelReservationDay"
rules={NewFaci[6]}
>
<Input
onKeyUp={keyup.bind(this, 'nomarginCancelReservationDay')}
disabled={facilityDetail}
prefix="Advance"
suffix="Day"
style={{ width: 160, textAlign: 'center' }}
placeholder="0"
/>
</Form.Item>
<Form.Item label="Booking" name="canReservationDay" rules={NewFaci[7]}>
<Input
onKeyUp={keyup.bind(this, 'canReservationDay')}
placeholder="0"
style={{ width: 160, textAlign: 'center' }}
disabled={facilityDetail}
prefix="Advance"
suffix="Day"
/>
</Form.Item>
</Input.Group>
{/* 设置次数 */}
<Input.Group>
<Form.Item label="Appointment Cycle" name="periodType" rules={NewFaci[8]}>
<Select
placeholder="Period"
allowClear
style={{ width: 120 }}
disabled={facilityDetail}
>
<Option value="1">Week</Option>
<Option value="2">Month</Option>
<Option value="3">Year</Option>
</Select>
</Form.Item>
<Form.Item name="canReservationNum" rules={NewFaci[9]}>
<Input
onKeyUp={keyup.bind(this, 'canReservationNum')}
placeholder="second"
style={{ width: 120 }}
disabled={facilityDetail}
suffix="second"
/>
</Form.Item>
</Input.Group>
<hr></hr>
{/* <Row gutter={32} style={{ marginTop: 28 }}>
<Col>Appointment Period</Col>
<Col><TimeSelect putSubmit={TimeSelectRef} defaultValue={timeExtend} disabled={facilityDetail}/></Col>
</Row> */}
{facilityDetail ? (
<>
<Button type="primary" onClick={Subscribe} loading={load}>
Subscribe
</Button>
</>
) : (
<>
<Button type="primary" htmlType="submit" loading={load}>
Submit
</Button>
</>
)}
</Form>
</div>
);
};
function mapStateToProps(state: any) {
const { sourceData, DataSave, Result, imgList } = state.FacilityBookings;
const { token } = state.login;
const load =
typeof state.loading.models.FacilityBookings == 'undefined'
? true
: state.loading.models.FacilityBookings;
return {
DataSave,
sourceData,
token,
Result,
imgList,
load,
};
}
export default connect(mapStateToProps)(Facility);
// ["10:00-12:00","13:00-14:00"]
// defultValue={[{ url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png", name: "篮球场A"},{ url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png", name: "篮球场B" }]}
// defultValue={[{ url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" }]}
// const Data = {
// canReservationDay: "5",
// canReservationNum: "6",
// cancelReservationDay: "3",
// categoriesOpenTime: "09:00-20:00",
// communityManagerFee: "18",
// communityMargin: "20",
// communityName: "A9",
// facilityName: "篮球场",
// nomarginCancelReservationDay: "4",
// periodType: "2",
// }
src/pages/CommunityManagement/FacilityBookings/Facility.tsx
View file @ 47d17e5f
...@@ -28,7 +28,7 @@ import TimeSelect from '../../../components/TimeSelect/TimeSelect'; ...@@ -28,7 +28,7 @@ import TimeSelect from '../../../components/TimeSelect/TimeSelect';
import Line from '../../../components/Line/Line'; import Line from '../../../components/Line/Line';
import { getNumber } from '../../../utils/string'; import { getNumber } from '../../../utils/string';
import SearchOptionsCommnity from '../../../components/SearchOptions/SearchOptionsCommnity'; import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommnity';
import { NewFaci } from '@/utils/tip'; import { NewFaci } from '@/utils/tip';
...@@ -45,7 +45,9 @@ const module = 'FacilityBookings'; ...@@ -45,7 +45,9 @@ const module = 'FacilityBookings';
import moment from 'moment'; import moment from 'moment';
const Facility = (props: any) => { const Facility = (props: any) => {
const { dispatch, location, token, sourceData, DataSave, Result, imgList, load } = props; const { dispatch, location, token, sourceData, DataSave, Result, load, FacilitysList } = props;
console.log(DataSave);
const RA = (index: any, values: any) => { const RA = (index: any, values: any) => {
dispatch({ type: 'FacilityBookings/RA', playload: { index: index, body: values } }); dispatch({ type: 'FacilityBookings/RA', playload: { index: index, body: values } });
...@@ -66,15 +68,13 @@ const Facility = (props: any) => { ...@@ -66,15 +68,13 @@ const Facility = (props: any) => {
const formRef = useRef(null); const formRef = useRef(null);
// 再监听列表 // 页面进来 先清一遍 图片列表
const [extImgList, setextImgList] = useState(imgList);
useEffect(() => { useEffect(() => {
console.log('变化'); if (DataSave == null) {
console.log(imgList); let list: any = [];
if (imgList != null) { dispatch({ type: module + '/genxin', list });
setextImgList(imgList);
} }
}, [imgList]); }, [1]);
useEffect(() => { useEffect(() => {
if (Result != null) { if (Result != null) {
...@@ -140,8 +140,12 @@ const Facility = (props: any) => { ...@@ -140,8 +140,12 @@ const Facility = (props: any) => {
const onFinish = (values: any) => { const onFinish = (values: any) => {
var result = values; var result = values;
// 过滤表单; // 过滤表单;
let imgs = extImgList.filter((item: any) => (Object.keys(item).length == 0 ? false : true)); let imgs: any = [];
console.log(imgs.length);
for (let i in FacilitysList) {
imgs[i] = `${FacilitysList[i].fileList[0].name}&${FacilitysList[i].name}`;
}
// 开放时间判断 // 开放时间判断
if (imgs.length == 0) { if (imgs.length == 0) {
message.error('Please upload at least one facility!'); message.error('Please upload at least one facility!');
...@@ -149,24 +153,15 @@ const Facility = (props: any) => { ...@@ -149,24 +153,15 @@ const Facility = (props: any) => {
message.error('Please select the opening time!'); message.error('Please select the opening time!');
} else { } else {
// 先处理设施和时间 // 先处理设施和时间
let categoriesName: any = [];
let reservationQuantumTime: any = [ let reservationQuantumTime: any = [
moment(result.startTime, 'HH:mm').format('HH:mm'), moment(result.startTime, 'HH:mm').format('HH:mm'),
moment(result.endTime, 'HH:mm').format('HH:mm'), moment(result.endTime, 'HH:mm').format('HH:mm'),
]; ];
for (var i in imgs) { let categoriesName: any = imgs; // 设施图片
if (imgs[i].name && imgs[i].pic) {
categoriesName[i] = `${imgs[i].name}&${imgs[i].pic}`;
} else {
message.error('Please fill in the name of the facility!');
return;
}
}
result.categoriesName = categoriesName; // 设施内容 result.categoriesName = categoriesName; // 设施内容
result.reservationQuantumTime = reservationQuantumTime; // 开放时间段 result.reservationQuantumTime = reservationQuantumTime; // 开放时间段
result.categoriesOpenTime = `${result.startTime}-${result.endTime}`; // 预约时间段 二开需要 result.categoriesOpenTime = `${result.startTime}-${result.endTime}`; // 预约时间段 二开需要
delete result.startTime; delete result.startTime;
delete result.periodType;
delete result.picList; delete result.picList;
console.log(reservationQuantumTime); console.log(reservationQuantumTime);
console.log(result); console.log(result);
...@@ -272,7 +267,7 @@ const Facility = (props: any) => { ...@@ -272,7 +267,7 @@ const Facility = (props: any) => {
)); ));
// 图片列表 // 图片列表
const fileList: any = [];
// 表单标识 // 表单标识
const [form] = Form.useForm(); const [form] = Form.useForm();
// 选择小区名字并赋值 // 选择小区名字并赋值
...@@ -288,6 +283,14 @@ const Facility = (props: any) => { ...@@ -288,6 +283,14 @@ const Facility = (props: any) => {
setImgOpen(true); setImgOpen(true);
} }
}; };
// 子组件清除表单的 输入框值
const dumps = (key: any) => {
form.setFieldsValue({
['shebei_' + key]: '',
});
};
return ( return (
<div className={'base basediy'}> <div className={'base basediy'}>
{/* 头部组件v1.2 */} {/* 头部组件v1.2 */}
...@@ -304,6 +307,7 @@ const Facility = (props: any) => { ...@@ -304,6 +307,7 @@ const Facility = (props: any) => {
<Form.Item label="Community" name="communityName" rules={NewFaci[0]}> <Form.Item label="Community" name="communityName" rules={NewFaci[0]}>
<SearchOptionsCommnity <SearchOptionsCommnity
// ubmit={extendName} // ubmit={extendName}
defaultName={DataSave != null ? DataSave.communityName : ''}
opname={opname} opname={opname}
/> />
</Form.Item> </Form.Item>
...@@ -352,6 +356,7 @@ const Facility = (props: any) => { ...@@ -352,6 +356,7 @@ const Facility = (props: any) => {
imageType: 'categoriesImageName', imageType: 'categoriesImageName',
extends: ctyName, extends: ctyName,
}} }}
dumps={dumps}
></Facilitys> ></Facilitys>
</Form.Item> </Form.Item>
...@@ -360,7 +365,7 @@ const Facility = (props: any) => { ...@@ -360,7 +365,7 @@ const Facility = (props: any) => {
<PictureOptionsRow <PictureOptionsRow
over={imgOpen} over={imgOpen}
data={{ data={{
userToken: token, // userToken: token,
imageType: 'categoriesDetailsImageName', imageType: 'categoriesDetailsImageName',
extends: ctyName, extends: ctyName,
}} }}
...@@ -474,19 +479,19 @@ const Facility = (props: any) => { ...@@ -474,19 +479,19 @@ const Facility = (props: any) => {
}; };
function mapStateToProps(state: any) { function mapStateToProps(state: any) {
const { sourceData, DataSave, Result, imgList } = state.FacilityBookings; const { sourceData, DataSave, Result, FacilitysList } = state.FacilityBookings;
const { token } = state.login; const { token } = state.login;
const load = const load =
typeof state.loading.models.FacilityBookings == 'undefined' typeof state.loading.models.FacilityBookings == 'undefined'
? true ? false
: state.loading.models.FacilityBookings; : state.loading.models.FacilityBookings;
return { return {
DataSave, DataSave,
sourceData, sourceData,
token, token,
Result, Result,
imgList,
load, load,
FacilitysList,
}; };
} }
export default connect(mapStateToProps)(Facility); export default connect(mapStateToProps)(Facility);
......
src/pages/CommunityManagement/FacilityBookings/FacilityBookings copy.tsx 0 → 100644
View file @ 47d17e5f
import React, { useState, useEffect } from 'react';
import { Input, Tabs, Pagination, 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 managerFeeStatusDes = ['Not paid', 'Paid', 'Returned'];
const marginFeeStatusDes = ['Not paid', 'Paid', 'Not Returned', 'Returned part', 'Returned all'];
const statusDes = ['All', 'Applied', 'Reserved', 'Used', 'Cancelled', 'Completed'];
import { getUrlLastParams } from '../../../utils/string';
import './css/index.less';
import ProTable from '@ant-design/pro-table';
import { PlusOutlined, ClockCircleOutlined, ClearOutlined } from '@ant-design/icons';
import moment from 'moment';
const FacilityBookings = (props: any) => {
const { formatMessage } = useIntl();
const { dispatch, location, Data, Data2, token, DataSave, curString, Result, loading } = props;
const RA = (index: any, values: any) => {
console.log(values);
dispatch({
type: 'FacilityBookings/RA',
playload: { index: index, body: values },
});
};
const SA = (values: any) => {
dispatch({ type: 'FacilityBookings/SA', playload: values });
};
const QA = (values: any) => {
dispatch({ type: 'FacilityBookings/QA', playload: values });
};
const CA = () => {
dispatch({ type: 'FacilityBookings/CA', playload: null });
};
const [columns, setColumns] = useState([]);
const [columns2, setColumns2] = useState([]);
const goToFunction = () => {
if (curString.tab == 2) {
CA();
// 先清空上传图片列表
dispatch({ type: 'FacilityBookings/overAllImgList' });
} else {
// 清空之前的数据
let Data3 = null;
dispatch({ type: 'FacilityBookings/returnPage3', Data3 });
}
history.push(location.pathname + (curString.tab == 1 ? '/Booking' : '/Adding'));
};
// 预约详情跳转
const goToDetail = (values: any) => {
SA(values);
history.push(location.pathname + '/Detail');
};
// 列表2 点击跳转
const makeOperator = (values: any, index: any) => {
const path = ['/FacilityDetail', '/FacilityEdit', '/FacilityApply'];
SA(values);
console.log('准备页面跳转');
console.log(curString);
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>
<ClockCircleOutlined style={{ color: '#666' }} />
&nbsp;
{moment(record.createTime.time).format('YYYY-MM-DD')}
</div>
),
],
[
'Booking Schedule',
'subscribeDate',
(text: any) => (
<div>
<ClockCircleOutlined style={{ color: '#666' }} />
&nbsp;
{moment(text).format('YYYY-MM-DD')}
</div>
),
],
['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 = [
['Community', 'communityName'],
['Facilty', 'facilityName'],
['Open Time', 'categoriesOpenTime'],
[
'Action',
null,
(text: any, record: any) => (
<Space size="middle">
<a onClick={() => makeOperator(record, 0)}>Detail</a>
<a onClick={() => makeOperator(record, 1)}>Edit</a>
<a onClick={() => makeOperator(record, 2)}>Booking</a>
</Space>
),
],
];
setColumns(objectColumns(key));
setColumns2(objectColumns(key2));
console.log('页面刷新');
console.log(DataSave);
console.log(curString);
if (curString.tab == 1) {
RA(9, {
userToken: token,
pageNum: curString.curPage,
subscribeDate: curString.subscribeDate,
status: curString.status,
communityNameList: curString.communityNameList,
});
} else {
RA(8, { userToken: token, pageNum: curString.curPage2 });
}
}, []);
const CallBackTitleSearch = (comment: any) => {
console.log(comment);
if (curString.tab == 1) {
if (comment.communityName != null || comment.key != null || comment.status != null) {
var tmp = curString;
tmp.subscribeDate = comment.key;
if (comment.status == null || comment.status == undefined) {
tmp.status = 0;
} else {
tmp.status = comment.status;
}
tmp.communityNameList = comment.communityName;
tmp.curPage = 1;
QA(tmp);
console.log(tmp);
//中断
RA(9, {
userToken: token,
pageNum: '1',
subscribeDate: tmp.subscribeDate,
status: tmp.status,
communityNameList: comment.communityName,
});
}
} else {
if (comment.communityName != null || comment.facilityName != null) {
var tmp = curString;
tmp.communityNameList = comment.communityName;
tmp.facilityName = comment.facilityName;
tmp.curPage = 1;
QA(tmp);
RA(8, {
communityNameList: comment.communityName,
facilityName: comment.facilityName,
pageNum: '1',
});
}
}
};
function TabCallback(tab: any) {
var tmp = curString;
tmp.tab = tab;
QA(tmp);
if (tab == 1) {
RA(9, {
userToken: token,
status: curString.status,
subscribeDate: curString.subscribeDate,
pageNum: curString.curPage,
communityNameList: curString.communityNameList,
});
} else {
RA(8, { userToken: token, pageNum: curString.curPage2 });
}
}
function Pagechange(current: any, pageSize: any) {
if (curString.tab == 1) {
var tmp = curString;
tmp.curPage = current;
QA(tmp);
RA(9, {
userToken: token,
pageNum: current,
subscribeDate: curString.subscribeDate,
status: curString.status,
communityNameList: curString.communityNameList,
});
} else {
var tmp = curString;
tmp.curPage2 = current;
QA(tmp);
if (curString.communityNameList != null) {
RA(8, {
userToken: token,
pageNum: current,
communityNameList: curString.communityNameList,
});
} else {
RA(8, { userToken: token, pageNum: current });
}
}
}
return (
<>
<div className="base">
{/* 头部组件 */}
{curString.tab == 1 ? (
<>
<TitleSearch
status={[
{
name: ['status', 'Order status'],
data: [
[0, 'All'],
[1, 'Applied'],
[2, 'Reserved'],
[3, 'Used'],
[4, 'Cancelled'],
],
},
]}
time={['key', 'Booking time ']}
community={'communityName'}
checklist={curString.communityNameList != null ? curString.communityNameList : null}
onSubmit={CallBackTitleSearch}
/>
</>
) : (
<>
<TitleSearch
listkey={['facilityName']}
list={['Facility name']}
community={'communityName'}
onSubmit={CallBackTitleSearch}
/>
</>
)}
</div>
{/* 下方及搜索 */}
<div className={'base'}>
{/* <div style={{ position: 'relative', height: 40 }}>
<Button type="primary" style={{ position: 'absolute', right: 0 }} onClick={goToFunction}>
{curString.tab == 1 ? 'Booking' : 'Add Facility'}
</Button>
</div> */}
<Tabs
defaultActiveKey={curString.tab.toString()}
onChange={TabCallback}
className="diytabs"
>
<TabPane tab="Facility Bookings" key="1">
<ProTable
loading={loading}
rowKey="id"
dataSource={Data.data}
columns={columns}
// pagination={{
// current: curString.curPage,
// total: Data.total.totalRow,
// showSizeChanger: false,
// onChange: Pagechange,
// }}
pagination={false}
search={false}
toolBarRender={() => [
<Button key="3" type="primary" onClick={goToFunction}>
<PlusOutlined />
添加预约
</Button>,
]}
options={{
density: true,
fullScreen: true,
reload: () => {
// onReset();
},
setting: false,
}}
headerTitle="预约列表"
/>
{curString ? (
<div className="pages">
<Pagination
current={curString.curPage}
total={Data.total.totalRow}
// pageSizeOptions={[]}
showSizeChanger={false}
// pageSize={village.page.curPageSize}
onChange={Pagechange}
/>
</div>
) : (
''
)}
</TabPane>
<TabPane tab="Facility Management" key="2">
<ProTable
loading={loading}
rowKey="id"
dataSource={Data2.data}
columns={columns2}
pagination={{
current: curString.curPage2,
total: Data2.total.totalRow,
showSizeChanger: false,
onChange: Pagechange,
}}
// pagination={false} // 隐藏默认分页
search={false}
toolBarRender={() => [
<Button key="3" type="primary" onClick={goToFunction}>
<PlusOutlined />
添加设施
</Button>,
]}
options={{
density: true,
fullScreen: true,
reload: () => {
// onReset();
},
setting: false,
}}
headerTitle="设施列表"
/>
</TabPane>
</Tabs>
</div>
</>
);
};
function mapStateToProps(state: any) {
const { Data, Data2, DataSave, curString, Result } = state.FacilityBookings;
const { token } = state.login;
const loading =
typeof state.loading.models.FacilityBookings == 'undefined'
? true
: state.loading.models.FacilityBookings;
return {
Data,
Data2,
DataSave,
curString,
Result,
token,
loading,
};
}
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/FacilityBookings.tsx
View file @ 47d17e5f
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Input, Tabs, Table, Space, Button } from 'antd'; import { Input, Tabs, Pagination, Space, Button } from 'antd';
const { TabPane } = Tabs; const { TabPane } = Tabs;
import { Link, useIntl, connect, Dispatch, history } from 'umi'; import { Link, useIntl, connect, Dispatch, history } from 'umi';
...@@ -102,7 +102,8 @@ const FacilityBookings = (props: any) => { ...@@ -102,7 +102,8 @@ const FacilityBookings = (props: any) => {
(text: any) => ( (text: any) => (
<div> <div>
<ClockCircleOutlined style={{ color: '#666' }} /> <ClockCircleOutlined style={{ color: '#666' }} />
&nbsp;{text} &nbsp;
{moment(text).format('YYYY-MM-DD')}
</div> </div>
), ),
], ],
...@@ -295,12 +296,13 @@ const FacilityBookings = (props: any) => { ...@@ -295,12 +296,13 @@ const FacilityBookings = (props: any) => {
rowKey="id" rowKey="id"
dataSource={Data.data} dataSource={Data.data}
columns={columns} columns={columns}
pagination={{ // pagination={{
current: curString.curPage, // current: curString.curPage,
total: Data.total.totalRow, // total: Data.total.totalRow,
showSizeChanger: false, // showSizeChanger: false,
onChange: Pagechange, // onChange: Pagechange,
}} // }}
pagination={false}
search={false} search={false}
toolBarRender={() => [ toolBarRender={() => [
<Button key="3" type="primary" onClick={goToFunction}> <Button key="3" type="primary" onClick={goToFunction}>
...@@ -318,6 +320,21 @@ const FacilityBookings = (props: any) => { ...@@ -318,6 +320,21 @@ const FacilityBookings = (props: any) => {
}} }}
headerTitle="预约列表" headerTitle="预约列表"
/> />
{curString ? (
<div className="pages">
<Pagination
current={curString.curPage}
total={Data.total.totalRow}
// pageSizeOptions={[]}
showSizeChanger={false}
// pageSize={village.page.curPageSize}
onChange={Pagechange}
/>
</div>
) : (
''
)}
</TabPane> </TabPane>
<TabPane tab="Facility Management" key="2"> <TabPane tab="Facility Management" key="2">
......
src/pages/CommunityManagement/FacilityBookings/css/index.less
View file @ 47d17e5f
...@@ -356,3 +356,8 @@ hr { ...@@ -356,3 +356,8 @@ hr {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.pages {
background: #fff;
text-align: right;
padding: 20px 10px 10px;
}
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