Skip to content

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

新增小区设施，优化其他bug 

Signed-off-by: cellee's avatarcellee <893264950@qq.com>
parent a17c7b26
Hide whitespace changes
Inline Side-by-side
Showing with 511 additions and 136 deletions
src/components/Facilitys/Facilitys copy.tsx 0 → 100644
View file @ ad72a9ef
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 @ ad72a9ef
import React, { useState, useEffect, useRef } from 'react';
import React, { useState } from 'react';
import './index.less';
import { Input, Button, Upload, Form, Select, message } from 'antd';
const { Option } = Select;
import { Button, Form, message, Modal } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import FacilitysTow from './FacilitysTow';
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 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);
console.log(fileList);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
},
};
// 上传
const carryData = (key: any) => {
updata.identification = key;
return updata;
};
// const handleChange = {};
// const handleChange = (key) => {
// console.log(key);
// // let tmp = fileList;
// // setFileList(tmp.filter((file) => !!file.status));
// // if (file.status == 'done') {
// // console.log(fileList);
// // message.success(file.name, 3);
// // if (props.reg != null) {
// // // onChange(Fromate2(fileList,props.reg))
// // } else {
// // // onChange(fileList)
// // }
// // }
// };
return (
<>
<Form.List
name="names"
name="picList"
rules={[
{
validator: async (_, names) => {
......@@ -86,40 +35,7 @@ const Facilitys = (props: any) => {
<>
{fields.map((field, index) => (
<Form.Item required={false} key={field.key} style={{ marginBottom: 0 }}>
{/* 每一个上传的组件 */}
<div className={'test'}>
<div className={'diybox'}>
<Upload
fileList={fileList[field.key]}
data={carryData(field.key)}
{...uploadProps}
disabled={disabled}
>
{fileList[field.key].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>
<FacilitysTow updata={updata} disabled={disabled} keys={field.key}></FacilitysTow>
</Form.Item>
))}
{fields.length < 5 ? (
......@@ -141,4 +57,10 @@ const Facilitys = (props: any) => {
);
};
export default Facilitys;
function mapStateToProps(state: any) {
const { imgList } = state.FacilityBookings;
return {
imgList,
};
}
export default connect(mapStateToProps)(Facilitys);
src/components/Facilitys/FacilitysTow.tsx 0 → 100644
View file @ ad72a9ef
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/models/CommunityManagement/FacilityBookings.ts
View file @ ad72a9ef
......@@ -28,7 +28,8 @@ export default {
Result:null,
// 不知道前面是干嘛的，自增公告列表
NoticeList:[]
NoticeList: [],
imgList:[{},{},{},{},{}] // 设施图片列表
},
reducers: {
......@@ -37,8 +38,32 @@ export default {
let NoticeList = payload;
return { ...state, NoticeList}
},
///
// 设施图片列表
retImgsList(state,{data}) {
state.imgList[data.key]['pic'] = data.val;
return state
},
// 设施图片名称
retImgsName(state, { data }) {
state.imgList[data.key]['name'] =data.val;
console.log(state)
return state
},
// 清除图片
overImgList(state,{ data }) {
state.imgList[data.key] = {};
console.log(state)
return state
},
// 清除所有图片
overAllImgList(state) {
state.imgList = [{},{},{},{},{}];
return state
},
returnPage(state, { Data,DataPage,DataSave}) {
return { ...state, Data,DataPage,DataSave };
......@@ -185,6 +210,9 @@ export default {
*ResultClear({}, {put}) {
yield put({type: 'returnResult', null} )
},
},
......
src/pages/CommunityManagement/FacilityBookings/Facility.tsx
View file @ ad72a9ef
......@@ -3,7 +3,7 @@ import './css/index.less';
import {
Input,
TimePicker,
Modal,
InputNumber,
Button,
Space,
Pagination,
......@@ -30,6 +30,8 @@ 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"]
......@@ -39,8 +41,11 @@ 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 } = props;
const { dispatch, location, token, sourceData, DataSave, Result, imgList } = props;
const RA = (index: any, values: any) => {
dispatch({ type: 'FacilityBookings/RA', playload: { index: index, body: values } });
......@@ -61,6 +66,19 @@ const Facility = (props: any) => {
const formRef = useRef(null);
// 进来先清空上传图片列表
useEffect(() => {
dispatch({ type: module + '/overAllImgList' });
}, [1]);
// 再监听列表
const [extImgList, setextImgList] = useState(imgList);
useEffect(() => {
console.log('变化');
console.log(imgList);
setextImgList(imgList);
}, [imgList]);
useEffect(() => {
if (Result != null) {
console.log('页面结果');
......@@ -121,9 +139,43 @@ const Facility = (props: any) => {
// setRef3(values)
// }
// 提交
const onFinish = (values: any) => {
console.log(values);
var result = values;
// 过滤表单;
let imgs = extImgList.filter((item: any) => (Object.keys(item).length == 0 ? false : true));
// 开放时间判断
if (imgs.length < 1) {
message.error('请至少上传一个设施');
} else if (!result.endTime && !result.startTime) {
message.error('请选择开放时间');
} 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('请填写设备名称');
return;
}
}
result.categoriesName = categoriesName;
result.reservationQuantumTime = reservationQuantumTime;
console.log(reservationQuantumTime);
console.log(result);
RA(6, result);
// 如果有了 开始上传
// if (categoriesName) {
// }
}
return false;
// if (Ref3.length!=0) {
// result.reservationQuantumTime = Ref3
......@@ -216,7 +268,7 @@ const Facility = (props: any) => {
const Option = Select.Option;
//小时
const hourS = createArray(24).map((item) => (
<Option value={item} key={item}>{`${item}:00`}</Option>
<Option value={item + ':00'} key={item}>{`${item}:00`}</Option>
));
// 图片列表
......@@ -249,7 +301,7 @@ const Facility = (props: any) => {
validateMessages={validateMessages}
>
{/* 选择小区 */}
<Form.Item label="Community" name="communityName">
<Form.Item label="Community" name="communityName" rules={NewFaci[0]}>
<SearchOptionsCommnity
// ubmit={extendName}
opname={opname}
......@@ -258,25 +310,33 @@ const Facility = (props: any) => {
{/* 设施名称 以及费用 */}
<Input.Group>
<Form.Item label="Facility" name="facilityName">
<Form.Item label="Facility" name="facilityName" rules={NewFaci[1]}>
<Input placeholder="Facility Name" />
</Form.Item>
<Form.Item label="Fee($)" name="communityManagerFee">
<Input
<Form.Item label="Fee($)" name="communityManagerFee" rules={NewFaci[2]}>
<span className="divIconMoney">$</span>
<InputNumber
onKeyUp={keyup_communityManagerFee}
prefix="$"
placeholder="00.00"
disabled={facilityDetail}
allowClear
min={0}
max={999}
step={0.01}
style={{ paddingLeft: '12px', width: '120px' }}
/>
</Form.Item>
<Form.Item label="Deposit" name="communityMargin">
<Input
<Form.Item label="Deposit" name="communityMargin" rules={NewFaci[3]}>
<span className="divIconMoney">$</span>
<InputNumber
onKeyUp={keyup_communityMargin}
prefix="$"
placeholder="00.00"
disabled={facilityDetail}
allowClear
min={0}
max={999}
step={0.01}
style={{ paddingLeft: '12px', width: '120px' }}
/>
</Form.Item>
</Input.Group>
......@@ -284,7 +344,7 @@ const Facility = (props: any) => {
<hr></hr>
{/* 设施品类上传 */}
<Form.Item label="Facility Classification" className="flex">
<Form.Item label="Facility Classification" className="flex required">
<Facilitys
disabled={imgOpen}
updata={{
......@@ -296,7 +356,7 @@ const Facility = (props: any) => {
</Form.Item>
{/* 设施详情上传 */}
<Form.Item name="categoriesDetailsImageName" label="Facility Details">
<Form.Item name="categoriesDetailsImageName" label="Facility Details" rules={NewFaci[4]}>
<PictureOptionsRow
over={imgOpen}
data={{
......@@ -308,14 +368,18 @@ const Facility = (props: any) => {
</Form.Item>
{/* 时间 */}
<Form.Item label="Opening Hours">
<Select style={{ width: 140 }} placeholder="Start Time">
{hourS}
</Select>
<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>
<Select style={{ width: 140 }} placeholder="Closing Time">
{hourS}
</Select>
<Form.Item name="endTime" noStyle>
<Select style={{ width: 140 }} placeholder="Closing Time">
{hourS}
</Select>
</Form.Item>
</Form.Item>
<hr></hr>
......@@ -325,7 +389,7 @@ const Facility = (props: any) => {
{/* 预约设置 */}
<Input.Group>
<Form.Item name="cancelReservationDay" label="Early Cancellation">
<Form.Item name="cancelReservationDay" label="Early Cancellation" rules={NewFaci[5]}>
<Input
onKeyUp={keyup.bind(this, 'cancelReservationDay')}
disabled={facilityDetail}
......@@ -335,7 +399,11 @@ const Facility = (props: any) => {
placeholder="0"
/>
</Form.Item>
<Form.Item label="No deposit to cancel reservation" name="nomarginCancelReservationDay">
<Form.Item
label="No deposit to cancel reservation"
name="nomarginCancelReservationDay"
rules={NewFaci[6]}
>
<Input
onKeyUp={keyup.bind(this, 'nomarginCancelReservationDay')}
disabled={facilityDetail}
......@@ -345,7 +413,7 @@ const Facility = (props: any) => {
placeholder="0"
/>
</Form.Item>
<Form.Item label="Booking" name="canReservationDay">
<Form.Item label="Booking" name="canReservationDay" rules={NewFaci[7]}>
<Input
onKeyUp={keyup.bind(this, 'canReservationDay')}
placeholder="0"
......@@ -359,7 +427,7 @@ const Facility = (props: any) => {
{/* 设置次数 */}
<Input.Group>
<Form.Item label="Appointment Cycle" name="periodType">
<Form.Item label="Appointment Cycle" name="periodType" rules={NewFaci[8]}>
<Select
placeholder="Period"
allowClear
......@@ -371,13 +439,13 @@ const Facility = (props: any) => {
<Option value="3">Year</Option>
</Select>
</Form.Item>
<Form.Item name="canReservationNum">
<Form.Item name="canReservationNum" rules={NewFaci[9]}>
<Input
onKeyUp={keyup.bind(this, 'canReservationNum')}
placeholder="Times"
placeholder="second"
style={{ width: 120 }}
disabled={facilityDetail}
suffix="Times"
suffix="second"
/>
</Form.Item>
</Input.Group>
......@@ -406,13 +474,15 @@ const Facility = (props: any) => {
};
function mapStateToProps(state: any) {
const { sourceData, DataSave, Result } = state.FacilityBookings;
console.log(state);
const { sourceData, DataSave, Result, imgList } = state.FacilityBookings;
const { token } = state.login;
return {
DataSave,
sourceData,
token,
Result,
imgList,
};
}
export default connect(mapStateToProps)(Facility);
......
src/pages/CommunityManagement/FacilityBookings/css/index.less
View file @ ad72a9ef
......@@ -326,3 +326,27 @@ hr {
background: #eee;
margin-bottom: 24px;
}
.divIconMoney {
position: absolute;
z-index: 99;
top: 50%;
transform: translateY(-50%);
left: 8px;
color: #999;
}
.required {
position: relative;
padding-left: 10px;
&::after {
content: '*';
display: block;
color: #f00;
font-size: 14px;
position: absolute;
left: 0;
top: 8px;
// transform: translateY(-50%);
}
}
src/pages/CommunityManagement/VisitorRecord/VisitorRecord.tsx
View file @ ad72a9ef
......@@ -173,7 +173,7 @@ const VisitorRecord = (props: any) => {
name="contract"
onFinish={onSubmitForm}
>
<Form.Item name="visitorsName">
<Form.Item name="inviterName">
<Input allowClear placeholder="Please input Visitor Name." style={{ width: 240 }} />
</Form.Item>
<Form.Item name="showTime">
......
src/pages/CommunityManagement/visitorRecord/VisitorRecord.tsx
View file @ ad72a9ef
......@@ -173,7 +173,7 @@ const VisitorRecord = (props: any) => {
name="contract"
onFinish={onSubmitForm}
>
<Form.Item name="visitorsName">
<Form.Item name="inviterName">
<Input allowClear placeholder="Please input Visitor Name." style={{ width: 240 }} />
</Form.Item>
<Form.Item name="showTime">
......
src/utils/tip.ts
View file @ ad72a9ef
......@@ -27,8 +27,16 @@ export const Notice = [
[{ required: true, message: 'Please choose the effective time of the announcement.' }],
];
// 时间
export const Time = {
hour: [1, 2],
minute: [],
};
// 新增设施
export const NewFaci = [
[{ required: false, message: 'Please select community' }],
[{ required: false, message: 'Please input Facility Name' }],
[{ required: false, message: 'Please Set management fee' }],
[{ required: false, message: 'Please Set Setting deposit' }],
[{ required: false, message: 'Please Upload facility photos' }],
[{ required: false, message: 'Required' }],
[{ required: false, message: 'Required' }],
[{ required: false, message: 'Required' }],
[{ required: false, message: 'Required' }],
[{ required: false, message: 'Required' }],
];
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