Skip to content

T
TOSTUMI
Commit c9dd3d6c authored by Sixiang_Zzb's avatar Sixiang_Zzb
Browse files
Options

Merge branch 'final' of http://120.77.240.215:9701/Maple/tostumi into final

parents 52713595 a17c7b26
Show whitespace changes
Inline Side-by-side
Showing with 2316 additions and 924 deletions
src/components/BackButton/BackButton.tsx
View file @ c9dd3d6c
...@@ -30,7 +30,9 @@ const BackButton = (props: any) => { ...@@ -30,7 +30,9 @@ const BackButton = (props: any) => {
return ( return (
<> <>
{url != null ? ( {url != null ? (
<Button onClick={goToReturnByParam}>Back</Button> <Button onClick={goToReturnByParam}>
<LeftOutlined /> Back
</Button>
) : ( ) : (
<Button onClick={goToReturn}> <Button onClick={goToReturn}>
<LeftOutlined /> <LeftOutlined />
......
src/components/Facilitys/Facilitys.tsx 0 → 100644
View file @ c9dd3d6c
import React, { useState, useEffect, useRef } from 'react';
import './index.less';
import { Input, Button, Upload, Form, Select, message } 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';
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"
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[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>
</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>
</>
);
};
export default Facilitys;
src/components/Facilitys/index.less 0 → 100644
View file @ c9dd3d6c
.test {
width: 240px;
display: flex;
margin-right: 20px;
.ant-upload-picture-card-wrapper {
width: 110px;
}
.ant-form-item {
margin-bottom: 5px;
}
.diybox {
display: flex;
justify-content: space-between;
.name {
width: 100px;
display: inline-block;
margin-left: 10px;
}
.over {
text-align: center;
}
}
}
src/components/PictureOptions/PictureOptionsRow.tsx
View file @ c9dd3d6c
...@@ -21,7 +21,7 @@ const uploadButton = ( ...@@ -21,7 +21,7 @@ const uploadButton = (
); );
import { getUrlPicName } from '../../utils/string'; import { getUrlPicName } from '../../utils/string';
const PictureOptionsRow = (props: any) => { const PictureOptionsRow = (props: any) => {
const { value, onChange, limitNums } = props; const { value, onChange, limitNums, over } = props;
const [fileList, setFileList] = useState([]); const [fileList, setFileList] = useState([]);
const [previewVisible, setPreviewVisible] = useState(false); const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage, setPreviewImage] = useState(''); const [previewImage, setPreviewImage] = useState('');
...@@ -111,6 +111,9 @@ const PictureOptionsRow = (props: any) => { ...@@ -111,6 +111,9 @@ const PictureOptionsRow = (props: any) => {
}; };
const handleChange = ({ file, fileList }) => { const handleChange = ({ file, fileList }) => {
// 给传递的附加名字
// props.data.fileName = fileList[0].name;
console.log(props.data);
console.log(fileList); console.log(fileList);
let tmp = fileList; let tmp = fileList;
setFileList(tmp.filter((file) => !!file.status || file.status == null)); setFileList(tmp.filter((file) => !!file.status || file.status == null));
...@@ -141,7 +144,7 @@ const PictureOptionsRow = (props: any) => { ...@@ -141,7 +144,7 @@ const PictureOptionsRow = (props: any) => {
fileList={fileList} fileList={fileList}
onPreview={handlePreview} onPreview={handlePreview}
onChange={handleChange} onChange={handleChange}
disabled={props.disabled} disabled={props.over}
beforeUpload={beforeUpload} beforeUpload={beforeUpload}
> >
{fileList.length >= limitNum ? null : props.disabled ? null : uploadButton} {fileList.length >= limitNum ? null : props.disabled ? null : uploadButton}
......
src/models/CommunityManagement/CommunityAnnouncement.ts
View file @ c9dd3d6c
...@@ -12,7 +12,8 @@ export default { ...@@ -12,7 +12,8 @@ export default {
Data: null, //公告列表 Data: null, //公告列表
Result: null, //新增、编辑保存成功信息 Result: null, //新增、编辑保存成功信息
DataSave: null, // 列表内容 DataSave: null, // 列表内容
DataSaveDetail: {pageNum: 1}, // 页码 DataSaveDetail: { pageNum: 1 }, // 页码
ImgSrc: null,
}, },
reducers: { reducers: {
...@@ -23,14 +24,17 @@ export default { ...@@ -23,14 +24,17 @@ export default {
return { ...state, Result }; return { ...state, Result };
}, },
returnDataSave(state, { playload }) { returnDataSave(state, { playload }) {
console.log(playload) console.log(playload);
let DataSave = playload.DataSave let DataSave = playload.DataSave;
return { ...state, DataSave }; return { ...state, DataSave };
}, },
returnDataSaveDetail(state, {playload}) { returnDataSaveDetail(state, { playload }) {
// console.log(playload.DataSaveDetail) // console.log(playload.DataSaveDetail)
let DataSaveDetail = playload.DataSaveDetail let DataSaveDetail = playload.DataSaveDetail;
return { ...state, DataSaveDetail}; return { ...state, DataSaveDetail };
},
returnImg(state, { ImgSrc }) {
return { ...state, ImgSrc };
}, },
}, },
...@@ -57,6 +61,13 @@ export default { ...@@ -57,6 +61,13 @@ export default {
yield put({ type: 'returnResult', Result }); yield put({ type: 'returnResult', Result });
} }
break; break;
case 47:
{
let ImgSrc = resp.data;
yield put({ type: 'returnImg', ImgSrc });
}
console.log('图片请求成功');
break;
} }
}, },
...@@ -71,11 +82,14 @@ export default { ...@@ -71,11 +82,14 @@ export default {
}, },
*SA({ playload }, { put }) { *SA({ playload }, { put }) {
console.log(playload) console.log(playload);
// 这里传递两个值来。 一个是修改同步的方法 一个是修改值的名称 一个是修改 的数据 // 这里传递两个值来。 一个是修改同步的方法 一个是修改值的名称 一个是修改 的数据
yield put({ type: playload.Method , playload:{ yield put({
[playload.DefaultName]:playload.Data type: playload.Method,
}}); playload: {
[playload.DefaultName]: playload.Data,
},
});
}, },
}, },
}; };
src/models/CommunityManagement/VisitorRecord.ts
View file @ c9dd3d6c
...@@ -2,7 +2,7 @@ import * as service from '../../services/tos'; ...@@ -2,7 +2,7 @@ import * as service from '../../services/tos';
import { message } from 'antd'; import { message } from 'antd';
import { Link, useIntl, connect, Dispatch, history } from 'umi'; import { Link, useIntl, connect, Dispatch, history } from 'umi';
import { routerRedux } from 'dva/router' import { routerRedux } from 'dva/router';
import { printf } from '@/utils/log'; import { printf } from '@/utils/log';
...@@ -12,59 +12,56 @@ export default { ...@@ -12,59 +12,56 @@ export default {
Data: null, Data: null,
Result: null, Result: null,
DataSave: null, DataSave: null,
DataSaveDetail:null, DataSaveDetail: null,
}, },
reducers: { reducers: {
returnPage(state, { Data}) { returnPage(state, { Data }) {
return { ...state, Data }; return { ...state, Data };
}, },
returnResult(state, { Result}) { returnResult(state, { Result }) {
return { ...state, Result}; return { ...state, Result };
}, },
returnDataSave(state, { DataSave }) { returnDataSave(state, { DataSave }) {
return {...state,DataSave} return { ...state, DataSave };
}, },
returnDataSaveDetail(state, { DataSaveDetail }) { returnDataSaveDetail(state, { DataSaveDetail }) {
return {...state,DataSaveDetail} return { ...state, DataSaveDetail };
}, },
}, },
effects: { effects: {
//标准请求 //标准请求
*RA({ playload }, { call, put }) { *RA({ playload }, { call, put }) {
const resp = yield call(service.RA, playload); const resp = yield call(service.RA, playload);
console.log(resp) console.log(resp);
if (resp.code == 500||resp.error_code!="0000") { if (resp.code == 500 || resp.error_code != '0000') {
}
if (resp.error_code != "0000") {
printf(playload, resp)
} }
else { if (resp.error_code != '0000') {
printf(playload, resp);
} else {
switch (playload.index) { switch (playload.index) {
case 26: { case 26:
{
let Data = resp.data; // 总数据
let Data = resp.data.rows;
let DataSave = resp.data.rows;
yield put({ type: 'returnPage', Data }); yield put({ type: 'returnPage', Data });
yield put({ type: 'returnDataSave', DataSave });
} break; }
break;
} }
} }
}, },
*ResultClear({ }, { put }) { *ResultClear({}, { put }) {
var tmp=null var tmp = null;
yield put({type: 'returnResult', tmp} ) yield put({ type: 'returnResult', tmp });
}, },
*SA({ playload }, { call, put }) { *SA({ playload }, { call, put }) {
var DataSave = playload var Data = playload;
yield put({type: 'returnDataSave', DataSave} ) yield put({ type: 'returnPage', Data });
}, },
}, },
}; };
src/pages/CommunityManagement/CellList/Adds.tsx
View file @ c9dd3d6c
...@@ -9,6 +9,7 @@ import { history } from 'umi'; ...@@ -9,6 +9,7 @@ import { history } from 'umi';
import { village } from '@/utils/tip'; import { village } from '@/utils/tip';
import moment from 'moment'; import moment from 'moment';
import { parseInt } from 'lodash';
const { RangePicker } = TimePicker; const { RangePicker } = TimePicker;
...@@ -18,8 +19,6 @@ interface objc {} ...@@ -18,8 +19,6 @@ interface objc {}
const Adds = (props: any) => { const Adds = (props: any) => {
const { Data, dispatch, loading, Result } = props; const { Data, dispatch, loading, Result } = props;
console.log(loading);
const [form] = Form.useForm(); const [form] = Form.useForm();
//物业费选择 //物业费选择
...@@ -68,7 +67,10 @@ const Adds = (props: any) => { ...@@ -68,7 +67,10 @@ const Adds = (props: any) => {
form.setFieldsValue({ form.setFieldsValue({
// 必填的 // 必填的
des: { des: {
residentialZipCode: Data.residentialZipCode, residentialZipCode: Data.residentialZipCode.substring(
Data.residentialZipCode.length - 6,
Data.residentialZipCode.length,
),
residentialAddress: Data.residentialAddress, residentialAddress: Data.residentialAddress,
residentialName: Data.residentialName, residentialName: Data.residentialName,
}, },
...@@ -311,7 +313,11 @@ const Adds = (props: any) => { ...@@ -311,7 +313,11 @@ const Adds = (props: any) => {
</Form.Item> </Form.Item>
<Form.Item name={['des', 'residentialAddress']} noStyle rules={village[0] as any}> <Form.Item name={['des', 'residentialAddress']} noStyle rules={village[0] as any}>
<Input style={{ width: '360px' }} placeholder="Please enter community adds" /> <Input
style={{ width: '360px' }}
placeholder="Please enter community adds"
disabled={codeStrat}
/>
</Form.Item> </Form.Item>
<div className="li"> <div className="li">
......
src/pages/CommunityManagement/CellList/Details.tsx
View file @ c9dd3d6c
...@@ -164,7 +164,12 @@ const Detail = (props: any) => { ...@@ -164,7 +164,12 @@ const Detail = (props: any) => {
<div className="item"> <div className="item">
<label>Community Address：</label> <label>Community Address：</label>
<span> <span>
{detailData.rows.residentialAddress}&nbsp;{detailData.rows.residentialZipCode}{' '} {detailData.rows.residentialAddress}&nbsp;&nbsp; SINGAPORE &nbsp;
{/* 这是去掉 新加坡 英文字段 */}
{detailData.rows.residentialZipCode.substring(
detailData.rows.residentialZipCode.length - 6,
detailData.rows.residentialZipCode.length,
)}{' '}
</span> </span>
</div> </div>
{/* ---------- */} {/* ---------- */}
......
src/pages/CommunityManagement/CommunityAnnouncement/Add.tsx
View file @ c9dd3d6c
...@@ -4,7 +4,7 @@ const { TabPane } = Tabs; ...@@ -4,7 +4,7 @@ const { TabPane } = Tabs;
import { connect, history } from 'umi'; import { connect, history } from 'umi';
import { RA } from '@/utils/method'; import { RA, SA } from '@/utils/method';
import TitleBack from '@/components/TitleBack/TitleBack'; import TitleBack from '@/components/TitleBack/TitleBack';
// import FileUpload from '@/components/FileUpload/FileUpload'; // import FileUpload from '@/components/FileUpload/FileUpload';
import { validateMessages } from '@/utils/params'; import { validateMessages } from '@/utils/params';
...@@ -13,7 +13,7 @@ import TextArea from 'antd/lib/input/TextArea'; ...@@ -13,7 +13,7 @@ import TextArea from 'antd/lib/input/TextArea';
import SelectCommunity from '@/components/SelectCommunity'; import SelectCommunity from '@/components/SelectCommunity';
// import Line from '@/components/Line/Line'; // import Line from '@/components/Line/Line';
// import TimeComfirm from '@/components/TimeComfirm/TimeComfirm'; // import TimeComfirm from '@/components/TimeComfirm/TimeComfirm';
import imgs from '@/assets/logo_icon_bg.png';
import './ann.less'; import './ann.less';
import { Notice } from '@/utils/tip'; import { Notice } from '@/utils/tip';
import { getCookie } from '@/utils/method'; import { getCookie } from '@/utils/method';
...@@ -21,54 +21,86 @@ import moment from 'moment'; ...@@ -21,54 +21,86 @@ import moment from 'moment';
const module = 'CommunityAnnouncement'; const module = 'CommunityAnnouncement';
const Add = (props: any) => { const Add = (props: any) => {
const { dispatch, Result, loading , DataSave } = props; const { dispatch, Result, loading, DataSave, ImgSrc } = props;
const formRef = useRef(null); const formRef = useRef(null);
const [form] = Form.useForm(); const [form] = Form.useForm();
// 默认附件值 console.log(ImgSrc);
const defaultImg = [{
uid: '-1',
name: 'image.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
}]
const [DefaultImage, setDefaultImage] = useState([] as any);
// 监听传递过来的值 // 监听传递过来的值
useEffect(() => { useEffect(() => {
if (DataSave != null) { if (DataSave != null) {
console.log(moment(DataSave.noticStartTime)) // let tim = DataSave.noticStartTime.time;
// 赋值 // 赋值
form.setFieldsValue({ form.setFieldsValue({
noticTitle:DataSave.noticTitlel, noticTitle: DataSave.noticTitlel,
noticText:DataSave.noticText, noticText: DataSave.noticText,
// noticStartTime:moment(DataSave.noticStartTime), // noticStartTime: moment(tim).format('YYYY-MM-DD'),
// noticEndTime:DataSave.noticEndTime?moment(DataSave.noticEndTime, 'YYYY-MM-DD HH:mm:ss'):'', // noticEndTime:DataSave.noticEndTime?moment(DataSave.noticEndTime, 'YYYY-MM-DD HH:mm:ss'):'',
}) });
// 图片 // 发起请求图片
setDefaultImage(defaultImg); let msg = {
type: 'tosCommunityNoticePreview',
fileName: DataSave.noticImageName,
};
RA(47, msg, module, dispatch);
} }
}, [DataSave]); }, [DataSave]);
// 图片地址
const [ImageSrc, setImageSrc] = useState([] as any);
// 监听图片状态 ImgSrc
useEffect(() => {
if (ImgSrc != null) {
let imgUrl = [
{
uid: '-1',
name: 'image.png',
status: 'done',
url: ImgSrc,
},
];
setImageSrc(imgUrl);
}
}, [ImgSrc]);
// 监听是不是提交成功 // 监听是不是提交成功
useEffect(() => { useEffect(() => {
if (Result != null) { if (Result != null) {
// 移除传递来的信息
dispatch({ dispatch({
type: `${module}/ResultRemove`, type: `${module}/ResultRemove`,
}); });
// 重新刷新页面
let page = {
noticTitlel: '',
creator: '',
pageNum: 1,
};
// 把内容存进去
SA(DetailPage(page), module, dispatch);
message.success('Released Successfully'); message.success('Released Successfully');
history.push('/CommunityManagement/CommunityAnnouncement'); history.push('/CommunityManagement/CommunityAnnouncement');
} }
}, [Result]); }, [Result]);
// 分业数据
const DetailPage = (page: any) => {
let data = {
Method: 'returnDataSaveDetail',
DefaultName: 'DataSaveDetail',
Data: page,
};
return data;
};
// 提交 // 提交
const onFinish = (values: any) => { const onFinish = (values: any) => {
console.log(values); // console.log(values);
var tmp = values; var tmp = values;
if(DataSave != null){ if (DataSave != null) {
tmp.id = DataSave.id; // 如果是修改传递的 修改ID tmp.id = DataSave.id; // 如果是修改传递的 修改ID
} }
tmp.creatorId = getCookie('id'); // 管理员 ID tmp.creatorId = getCookie('id'); // 管理员 ID
...@@ -77,11 +109,9 @@ const Add = (props: any) => { ...@@ -77,11 +109,9 @@ const Add = (props: any) => {
delete tmp.community; delete tmp.community;
// 文件名 // 文件名
tmp.noticImageName = values.file ? values.file[0] : null; tmp.noticImageName = values.file ? values.file[0] : null;
tmp.noticStartTime = values.noticStartTime.format('YYYY-MM-DD HH:mm:ss'); tmp.noticStartTime = values.noticStartTime.format('YYYY-MM-DD');
tmp.noticEndTime = values.noticEndTime tmp.noticEndTime = values.noticEndTime ? values.noticEndTime.format('YYYY-MM-DD') : null;
? values.noticEndTime.format('YYYY-MM-DD HH:mm:ss') // console.log(tmp);
: null;
console.log(tmp);
RA(28, tmp, module, dispatch); RA(28, tmp, module, dispatch);
}; };
...@@ -94,7 +124,9 @@ const Add = (props: any) => { ...@@ -94,7 +124,9 @@ const Add = (props: any) => {
<> <>
<Spin spinning={loading}> <Spin spinning={loading}>
<div style={{ width: '100%', padding: 20, backgroundColor: '#ffffff' }}> <div style={{ width: '100%', padding: 20, backgroundColor: '#ffffff' }}>
<TitleBack title={DataSave == null ? 'Add Announcement' : "Edit Announcement"}></TitleBack> <TitleBack
title={DataSave == null ? 'Add Announcement' : 'Edit Announcement'}
></TitleBack>
<Form <Form
ref={formRef} ref={formRef}
...@@ -105,18 +137,15 @@ const Add = (props: any) => { ...@@ -105,18 +137,15 @@ const Add = (props: any) => {
validateMessages={validateMessages} validateMessages={validateMessages}
> >
<Form.Item name={'community'} className="diyItem" label="Community" rules={Notice[0]}> <Form.Item name={'community'} className="diyItem" label="Community" rules={Notice[0]}>
<SelectCommunity checklist = {DataSave == null ? null : DataSave.communityNum.split(",")} /> <SelectCommunity
checklist={DataSave == null ? null : DataSave.communityNum.split(',')}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item name="noticTitle" className="diyItem" label="Notice Title" rules={Notice[1]}>
name='noticTitle'
className="diyItem"
label="Notice Title"
rules={Notice[1]}
>
<Input style={{ width: 200 }} placeholder="Please input the notice title" /> <Input style={{ width: 200 }} placeholder="Please input the notice title" />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name='noticText' name="noticText"
className="diyItem" className="diyItem"
label="Notice Content" label="Notice Content"
rules={Notice[2]} rules={Notice[2]}
...@@ -134,7 +163,7 @@ const Add = (props: any) => { ...@@ -134,7 +163,7 @@ const Add = (props: any) => {
imageType: 'tosNotice', imageType: 'tosNotice',
}} }}
limitNums={1} limitNums={1}
defaultValue = { DefaultImage } defaultValue={ImageSrc}
/> />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
...@@ -143,10 +172,18 @@ const Add = (props: any) => { ...@@ -143,10 +172,18 @@ const Add = (props: any) => {
label="Effective Dates" label="Effective Dates"
rules={Notice[3]} rules={Notice[3]}
> >
<DatePicker showTime placeholder="Effective Dates" disabledDate={disabledDate} /> <DatePicker
style={{ width: 200 }}
placeholder="Effective Dates"
disabledDate={disabledDate}
/>
</Form.Item> </Form.Item>
<Form.Item name="noticEndTime" className="diyItem" label="Expiration Date" rules={[]}> <Form.Item name="noticEndTime" className="diyItem" label="Expiration Date" rules={[]}>
<DatePicker showTime placeholder="Expiration Dates" disabledDate={disabledDate} /> <DatePicker
style={{ width: 200 }}
placeholder="Expiration Dates"
disabledDate={disabledDate}
/>
</Form.Item> </Form.Item>
<hr /> <hr />
<Form.Item style={{ marginBottom: 5 }} className="diyItem" label=" " colon={false}> <Form.Item style={{ marginBottom: 5 }} className="diyItem" label=" " colon={false}>
...@@ -162,9 +199,8 @@ const Add = (props: any) => { ...@@ -162,9 +199,8 @@ const Add = (props: any) => {
}; };
function map(state: any) { function map(state: any) {
// console.log(state) const { Result, DataSave, ImgSrc } = state[module];
const { Result, DataSave } = state[module];
const loading = state.loading.models.CommunityAnnouncement; const loading = state.loading.models.CommunityAnnouncement;
return { Result, loading , DataSave }; return { Result, loading, DataSave, ImgSrc };
} }
export default connect(map)(Add); export default connect(map)(Add);
src/pages/CommunityManagement/CommunityAnnouncement/CommunityAnnouncement.tsx
View file @ c9dd3d6c
...@@ -34,14 +34,15 @@ const CommunityAnnouncement = (props: any) => { ...@@ -34,14 +34,15 @@ const CommunityAnnouncement = (props: any) => {
useEffect(() => { useEffect(() => {
dispatch({ type: module + '/returnDataSave', playload: { DataSave: null } }); dispatch({ type: module + '/returnDataSave', playload: { DataSave: null } });
dispatch({ type: module + '/returnDataSaveDetail', playload: { DataSaveDetail: null } }); dispatch({ type: module + '/returnDataSaveDetail', playload: { DataSaveDetail: null } });
dispatch({ type: module + '/returnImg', playload: { DataSaveDetail: null } });
}, [1]); }, [1]);
// 表头 // 表头
const columns = [ const columns: any = [
{ {
title: 'Community', title: 'Community',
dataIndex: 'communityNum', dataIndex: 'communityNum',
width: 400, width: 240,
ellipsis: { ellipsis: {
showTitle: false, showTitle: false,
}, },
...@@ -59,19 +60,19 @@ const CommunityAnnouncement = (props: any) => { ...@@ -59,19 +60,19 @@ const CommunityAnnouncement = (props: any) => {
dataIndex: 'noticStartTime', dataIndex: 'noticStartTime',
render: (record: any) => ( render: (record: any) => (
<Space size="middle"> <Space size="middle">
{record != null ? moment(record.noticEndTime).format('YYYY-MM-DD HH:mm:ss') : null} {record != null ? moment(record.time).format('YYYY-MM-DD') : null}
</Space> </Space>
), ),
}, },
{ {
title: 'NoticScope', title: 'NoticScope',
dataIndex: 'noticScope', dataIndex: 'noticStatus',
render: function (text: any) { render: function (text: any) {
switch (text) { switch (text) {
case 1: case 1:
return <Tag color="green">Publishing</Tag>; // 发布中 return <Tag color="green">Publishing</Tag>; // 发布中
break; break;
case 0: case 2:
return <Tag color="red">Expired</Tag>; // 已过期 return <Tag color="red">Expired</Tag>; // 已过期
break; break;
default: default:
...@@ -158,7 +159,7 @@ const CommunityAnnouncement = (props: any) => { ...@@ -158,7 +159,7 @@ const CommunityAnnouncement = (props: any) => {
// 表单提交 // 表单提交
const onFinishContract = (value: any) => { const onFinishContract = (value: any) => {
console.log(value); // console.log(value);
if (!value.communityNumList && !value.noticTitlel && !value.creator) { if (!value.communityNumList && !value.noticTitlel && !value.creator) {
message.error('Please enter one of them!'); message.error('Please enter one of them!');
} else { } else {
...@@ -202,7 +203,7 @@ const CommunityAnnouncement = (props: any) => { ...@@ -202,7 +203,7 @@ const CommunityAnnouncement = (props: any) => {
<SearchOptionsCommnity <SearchOptionsCommnity
// ubmit={extendName} // ubmit={extendName}
opname={opname} opname={opname}
type={1} type={1} // 单选还是多选 单选就直接去掉
/> />
</Form.Item> </Form.Item>
<Form.Item name="noticTitlel"> <Form.Item name="noticTitlel">
......
src/pages/CommunityManagement/CommunityAnnouncement/Detail.tsx
View file @ c9dd3d6c
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { connect, history } from 'umi'; import { connect, history } from 'umi';
import { Button, Row, Col, Descriptions, Image, Badge ,Tag} from 'antd'; import { Button, Row, Col, Descriptions, Image, Badge, Tag, Spin } from 'antd';
import { LeftOutlined, EyeOutlined, } from '@ant-design/icons'; import { LeftOutlined, EyeOutlined } from '@ant-design/icons';
import './ann.less'; import './ann.less';
import moment from 'moment'; import moment from 'moment';
import imgs from '@/assets/logo_icon_bg.png'; import imgs from '@/assets/logo_icon_bg.png';
import { RA } from '@/utils/method';
import { getDetailCommunityList } from '@/services/tosUser';
const module = 'CommunityAnnouncement'; const module = 'CommunityAnnouncement';
const Detail = (props: any) => { const Detail = (props: any) => {
const { dispatch, loading, DataSave } = props; const { dispatch, loading, DataSave, ImgSrc } = props;
// 返回 // 返回
const goToReturn = () => { const goToReturn = () => {
...@@ -20,12 +22,60 @@ const Detail = (props: any) => { ...@@ -20,12 +22,60 @@ const Detail = (props: any) => {
useEffect(() => { useEffect(() => {
if (DataSave == null) { if (DataSave == null) {
history.push('/CommunityManagement/CommunityAnnouncement'); history.push('/CommunityManagement/CommunityAnnouncement');
} else {
// 发起请求图片地址
let msg = {
// userToken: '',
// type: ans.substr(ans.lastIndexOf('.') + 1),
type: 'tosCommunityNoticePreview',
fileName: DataSave.noticImageName,
};
RA(47, msg, module, dispatch);
} }
}, [DataSave]); }, [DataSave]);
// 图片地址
const [ImageSrc, setImageSrc] = useState(imgs);
// 监听图片状态 ImgSrc
useEffect(() => {
if (ImgSrc != null) {
setImageSrc(ImgSrc);
}
}, [ImgSrc]);
// 状态返回
function hanFunStart(start: any) {
switch (start) {
case 1:
return <Badge status="success" text="Publishing" />;
// <Tag color="green">Publishing</Tag>; // 发布中
break;
case 2:
return <Badge status="error" text="Expired" />; // 已过期
break;
default:
return <Badge status="processing" text="Waiting for release" />; // 等待发布
break;
}
}
//小区返回
function CommunityLists(list: any) {
let listBack = list.split(',').map((item: any, index: any) => {
let last: number = parseInt(index % 10);
return (
<Tag color={`#${last}b0`} style={{ marginBottom: 3 }} key={index}>
{item}
</Tag>
);
});
return listBack;
}
return ( return (
<> <>
{DataSave != null ? {DataSave != null ? (
<div className="form"> <div className="form">
{/* 头部 */} {/* 头部 */}
<h3> <h3>
...@@ -42,57 +92,59 @@ const Detail = (props: any) => { ...@@ -42,57 +92,59 @@ const Detail = (props: any) => {
<Row> <Row>
<Col span={12}> <Col span={12}>
<Descriptions title="Notice Info" layout="vertical" bordered> <Descriptions title="Notice Info" layout="vertical" bordered>
<Descriptions.Item label="Title：" span={2}>{DataSave.noticTitlel}</Descriptions.Item> {/* 标题 */}
<Descriptions.Item label="Title：" span={2}>
{DataSave.noticTitlel}
</Descriptions.Item>
{/* 发布者 */}
<Descriptions.Item label="Publisher：">{DataSave.creator}</Descriptions.Item> <Descriptions.Item label="Publisher：">{DataSave.creator}</Descriptions.Item>
<Descriptions.Item label="Effective Dates：">2020-11-02 09:00:00</Descriptions.Item> {/* 生效时间 */}
<Descriptions.Item label="Expiration Date：">2020-11-08 09:00:00</Descriptions.Item> <Descriptions.Item label="Effective Dates：">
{moment(DataSave.noticStartTime.time).format('YYYY-MM-DD')}
</Descriptions.Item>
{/* 结束时间 */}
<Descriptions.Item label="Expiration Date：">
{DataSave.noticEndTime != null
? moment(DataSave.noticEndTime.time).format('YYYY-MM-DD')
: 'Permanent'}
</Descriptions.Item>
{/* 状态 */}
<Descriptions.Item label="NoticScope：" span={3}> <Descriptions.Item label="NoticScope：" span={3}>
<Badge status="processing" text="Publishing" /> {hanFunStart(DataSave.noticStatus)}
</Descriptions.Item> </Descriptions.Item>
{/* 生效小区 */}
<Descriptions.Item label="Effective Community：" span={3}> <Descriptions.Item label="Effective Community：" span={3}>
<Tag color="#e10">小区1</Tag> {CommunityLists(DataSave.communityNum)}
<Tag color="#e20">小区1</Tag>
<Tag color="#e30">小区1</Tag>
<Tag color="#e40">小区1</Tag>
<Tag color="#e50">小区1</Tag>
<Tag color="#e60">小区1</Tag>
<Tag color="#e70">小区1</Tag>
</Descriptions.Item> </Descriptions.Item>
{/* 内容 */}
<Descriptions.Item label="Notice Content：" span={3}> <Descriptions.Item label="Notice Content：" span={3}>
<p>{DataSave.noticText}</p> <p>{DataSave.noticText}</p>
</Descriptions.Item> </Descriptions.Item>
</Descriptions> </Descriptions>
</Col> </Col>
<Col span={12} style={{ textAlign: 'center' }}> <Col span={12} style={{ textAlign: 'center' }}>
<div className='famg'> <div className="famg">
<div> <div>
<Image <Spin spinning={loading}>
width={200} <Image width={200} src={ImageSrc} />
src={imgs} </Spin>
/>
<p>Enclosure</p> <p>Enclosure</p>
</div> </div>
</div> </div>
</Col> </Col>
</Row> </Row>
</div> </div>
: '' ) : (
} ''
)}
</> </>
) );
} };
function map(state: any) { function map(state: any) {
// console.log(state) // console.log(state);
const { DataSave } = state[module]; const { DataSave, ImgSrc } = state[module];
const loading = state.loading.models.CommunityAnnouncement; const loading = state.loading.models.CommunityAnnouncement;
return { loading, DataSave }; return { loading, DataSave, ImgSrc };
} }
export default connect(map)(Detail); export default connect(map)(Detail);
src/pages/CommunityManagement/FacilityBookings/Facility copy.tsx 0 → 100644
View file @ c9dd3d6c
import React, { useState, useEffect, useRef } from 'react';
import styles from './css/index.less';
import {
Input,
TimePicker,
Modal,
Button,
Space,
Pagination,
Tooltip,
Radio,
Form,
Row,
Col,
Select,
message,
} from 'antd';
const { RangePicker } = TimePicker;
const { Option } = Select;
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';
// categoriesDetailsImageName: ["test.jpg"],
// categoriesName: ["篮球场A&test.jpg"],
// reservationQuantumTime: ["09:00-07:00"]
import { getUrlLast, numberToString } from '../../../utils/string';
import { checkParam, timeForm } from '@/utils/method';
import { validateMessages } from '@/utils/params';
const Facility = (props: any) => {
const { dispatch, location, token, sourceData, DataSave, Result } = 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);
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;
// 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 onBillChange = (values: any, allValues: any) => {
if (values['communityName'] != null) {
setExtend(values['communityName']);
}
};
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);
};
return (
<div className={styles.base}>
{/* 头部组件v1.2 */}
<TitleBack title={PATHNAME} url={getUrlLast(location.pathname) + '?Facility=true'} />
<Form
ref={formRef}
name="basic"
onFinish={onFinish}
onFinishFailed={onFinishFailed}
onValuesChange={onBillChange}
validateMessages={validateMessages}
>
<Row gutter={32}>
<Col>Community</Col>
<Col>
<Form.Item name="communityName">
<SearchOptionsCommnity disabled={pictrueExtend.tab != 3 ? true : false} />
</Form.Item>
</Col>
</Row>
<Row gutter={32} style={{ marginTop: 28 }}>
<Col>Facility</Col>
<Col>
<Form.Item name="facilityName" rules={[{ required: openCheck }]}>
<Input placeholder="Facility Name" disabled={facilityDetail} />
</Form.Item>
</Col>
<Col>Fee($)</Col>
<Col>
<Form.Item name="communityManagerFee" rules={[{ required: openCheck }]}>
<Input
onKeyUp={keyup_communityManagerFee}
prefix="$"
placeholder="00.00"
disabled={facilityDetail}
allowClear
/>
</Form.Item>
</Col>
<Col>Deposit</Col>
<Col>
<Form.Item name="communityMargin" rules={[{ required: openCheck }]}>
<Input
onKeyUp={keyup_communityMargin}
prefix="$"
placeholder="00.00"
disabled={facilityDetail}
allowClear
/>
</Form.Item>
</Col>
</Row>
<Row gutter={32} style={{ marginTop: 28 }}>
{extend != null ? (
<>
<Col>Category Of Facilities</Col>
<Col>
<Form.Item name="categoriesName">
<PictureOptions
disabled={facilityDetail}
data={{
userToken: token,
imageType: 'categoriesImageName',
extends: extend,
}}
/>
</Form.Item>{' '}
</Col>
</>
) : null}
</Row>
<Row gutter={32} style={{ marginTop: 28 }}>
{extend != null ? (
<>
<Col>Facility Details</Col>
<Col>
<Form.Item name="categoriesDetailsImageName">
<PictureOptionsRow
disabled={facilityDetail}
data={{
userToken: token,
imageType: 'categoriesDetailsImageName',
extends: extend,
}}
/>
</Form.Item>
</Col>
</>
) : null}
</Row>
<Line />
<Row gutter={32} style={{ marginTop: 28 }}>
<Col>Opening Hours</Col>
{/* <Input placeholder="09:00-20:00" suffix={<FieldTimeOutlined />} style={{width:160}}/> */}
<Col>
<Form.Item name="categoriesOpenTime" rules={[{ required: openCheck }]}>
<RangePicker format={'HH'} hourStep={1} />
</Form.Item>
</Col>
</Row>
<Row gutter={32} style={{}}>
<Col>Appointment Settings</Col>
<Col>
<Row gutter={20}>
<Col>
<Form.Item
name="cancelReservationDay"
rules={[{ required: openCheck }]}
label="Early cancellation"
>
<Input
onKeyUp={keyup.bind(this, 'cancelReservationDay')}
placeholder="Cancel the reservation"
style={{ width: 160 }}
disabled={facilityDetail}
suffix="Day"
/>
</Form.Item>
</Col>
<Col>
<Form.Item
name="nomarginCancelReservationDay"
rules={[{ required: openCheck }]}
label="Automatic cancellation without deposit"
>
<Input
onKeyUp={keyup.bind(this, 'nomarginCancelReservationDay')}
placeholder="No deposit,cancellation"
style={{ width: 160 }}
disabled={facilityDetail}
suffix="Day"
/>
</Form.Item>
</Col>
<Col>
<Form.Item
name="canReservationDay"
rules={[{ required: openCheck }]}
label="Advance booking is available"
>
<Input
onKeyUp={keyup.bind(this, 'canReservationDay')}
placeholder="Bookable"
style={{ width: 160 }}
disabled={facilityDetail}
suffix="Day"
/>
</Form.Item>
</Col>
</Row>
<Row gutter={8}>
<Col>
<Form.Item
name="periodType"
rules={[{ required: openCheck }]}
label="Appointment Cycle"
>
<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>
</Col>
<Col>
<Form.Item name="canReservationNum" rules={[{ required: openCheck }]}>
<Input
onKeyUp={keyup.bind(this, 'canReservationNum')}
placeholder="times"
style={{ width: 120 }}
disabled={facilityDetail}
suffix="Times"
/>
</Form.Item>
</Col>
</Row>
</Col>
</Row>
{/* <Row gutter={32} style={{ marginTop: 28 }}>
<Col>Appointment Period</Col>
<Col><TimeSelect putSubmit={TimeSelectRef} defaultValue={timeExtend} disabled={facilityDetail}/></Col>
</Row> */}
{facilityDetail ? (
<>
<Line />
<Button type="primary" onClick={Subscribe}>
Subscribe
</Button>
</>
) : (
<>
<Line />
<Button type="primary" htmlType="submit">
Submit
</Button>
</>
)}
</Form>
</div>
);
};
function mapStateToProps(state: any) {
const { sourceData, DataSave, Result } = state.FacilityBookings;
const { token } = state.login;
return {
DataSave,
sourceData,
token,
Result,
};
}
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 @ c9dd3d6c
import React, { useState, useEffect,useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import styles from './css/index.less'; import './css/index.less';
import { Input, TimePicker, Modal, Button, Space, Pagination, Tooltip, Radio, Form, Row, Col, Select, message } from 'antd'; import {
Input,
TimePicker,
Modal,
Button,
Space,
Pagination,
Tooltip,
Upload,
Form,
Select,
message,
} from 'antd';
const { RangePicker } = TimePicker; const { RangePicker } = TimePicker;
const { Option } = Select; const { Option } = Select;
import { Link, useIntl, connect, Dispatch,history } from 'umi'; import { PlusOutlined, MinusCircleOutlined, ClearOutlined } from '@ant-design/icons';
import { Link, useIntl, connect, Dispatch, history } from 'umi';
import { FieldTimeOutlined } from '@ant-design/icons'; import { FieldTimeOutlined } from '@ant-design/icons';
import PictureOptions from '../../../components/PictureOptions/PictureOptions'; import PictureOptions from '../../../components/PictureOptions/PictureOptions';
...@@ -19,274 +33,386 @@ import SearchOptionsCommnity from '../../../components/SearchOptions/SearchOptio ...@@ -19,274 +33,386 @@ import SearchOptionsCommnity from '../../../components/SearchOptions/SearchOptio
// categoriesDetailsImageName: ["test.jpg"], // categoriesDetailsImageName: ["test.jpg"],
// categoriesName: ["篮球场A&test.jpg"], // categoriesName: ["篮球场A&test.jpg"],
// reservationQuantumTime: ["09:00-07:00"] // reservationQuantumTime: ["09:00-07:00"]
import Facilitys from '@/components/Facilitys/Facilitys';
import { getUrlLast,numberToString } from '../../../utils/string' import { getUrlLast, numberToString } from '../../../utils/string';
import {checkParam, timeForm} from '@/utils/method' import { checkParam, timeForm } from '@/utils/method';
import { validateMessages } from '@/utils/params'; import { validateMessages } from '@/utils/params';
const Facility = (props:any) => { const Facility = (props: any) => {
const { dispatch, location, token, sourceData, DataSave, Result } = props;
const { dispatch, location, token,sourceData,DataSave,Result} = props;
const RA = (index:any,values: any) => { dispatch({ type: 'FacilityBookings/RA', playload: { index: index, body: values } }) }; const RA = (index: any, values: any) => {
const ResultClear = () => { dispatch({ type: 'FacilityBookings/ResultClear' })} dispatch({ type: 'FacilityBookings/RA', playload: { index: index, body: values } });
};
const ResultClear = () => {
dispatch({ type: 'FacilityBookings/ResultClear' });
};
const openCheck = true const openCheck = true;
const [Ref3, setRef3] = useState([]) const [Ref3, setRef3] = useState([]);
const [extend, setExtend] = useState(null) const [extend, setExtend] = useState(null);
const [timeExtend, setTimeExtend] = useState(null) const [timeExtend, setTimeExtend] = useState(null);
const [pictrueExtend,setPictrueExtend]=useState({pic:null,pics:null,tab:3}) const [pictrueExtend, setPictrueExtend] = useState({ pic: null, pics: null, tab: 3 });
const [facilityDetail, setFacilityDetail] = useState(false) const [facilityDetail, setFacilityDetail] = useState(false);
const [PATHNAME, setPATHNAME] = useState("") const [PATHNAME, setPATHNAME] = useState('');
const formRef = useRef(null); const formRef = useRef(null);
useEffect(() => { useEffect(() => {
if (Result != null) { if (Result != null) {
console.log("页面结果") console.log('页面结果');
console.log(Result) console.log(Result);
ResultClear() ResultClear();
history.push("/CommunityManagement/FacilityBookings") history.push('/CommunityManagement/FacilityBookings');
} }
}, [Result]) }, [Result]);
const RA_S = () => { const RA_S = () => {
if (DataSave != null) { if (DataSave != null) {
console.log("请求的设施ID为："+ DataSave.id) console.log('请求的设施ID为：' + DataSave.id);
RA(7, { RA(7, {
"userToken": token, userToken: token,
"facilitieId": DataSave.id facilitieId: DataSave.id,
}); });
} else { } else {
history.go(-1) history.go(-1);
}
} }
};
useEffect(() => { useEffect(() => {
if (sourceData != null) { if (sourceData != null) {
console.log("【传入详情，当前数据不为空】") console.log('【传入详情，当前数据不为空】');
console.log(sourceData) console.log(sourceData);
setExtend(sourceData.communityName) setExtend(sourceData.communityName);
setTimeExtend(sourceData.reservationQuantumTime) setTimeExtend(sourceData.reservationQuantumTime);
// 中断 // 中断
// setPictrueExtend({tab:null,pic:null,pics:null}) // setPictrueExtend({tab:null,pic:null,pics:null})
console.log("重点检查"); console.log('重点检查');
console.log(sourceData); console.log(sourceData);
formRef.current.setFieldsValue(sourceData) formRef.current.setFieldsValue(sourceData);
} }
}, [sourceData]) }, [sourceData]);
useEffect(() => { useEffect(() => {
var tmp=pictrueExtend var tmp = pictrueExtend;
if ((location.pathname).indexOf("FacilityEdit") > -1) { if (location.pathname.indexOf('FacilityEdit') > -1) {
setPATHNAME("Edit Facility") setPATHNAME('Edit Facility');
tmp.tab=1 tmp.tab = 1;
setPictrueExtend(tmp) setPictrueExtend(tmp);
RA_S() RA_S();
} } else if (location.pathname.indexOf('FacilityDetail') > -1) {
else if ((location.pathname).indexOf("FacilityDetail") > -1) { setFacilityDetail(true);
setFacilityDetail(true) tmp.tab = 2;
tmp.tab=2 setPictrueExtend(tmp);
setPictrueExtend(tmp) setPATHNAME('Facility Detail');
setPATHNAME("Facility Detail") RA_S();
RA_S()
} else { } else {
tmp.tab=3 tmp.tab = 3;
setPictrueExtend(tmp) setPictrueExtend(tmp);
setPATHNAME("Add Facility") setPATHNAME('Add Facility');
} }
},[]) }, []);
// const TimeSelectRef = (values:any) => { // const TimeSelectRef = (values:any) => {
// setRef3(values) // setRef3(values)
// } // }
const onFinish = (values: any) => { const onFinish = (values: any) => {
var result = values console.log(values);
var result = values;
return false;
// if (Ref3.length!=0) { // if (Ref3.length!=0) {
// result.reservationQuantumTime = Ref3 // result.reservationQuantumTime = Ref3
// } else { // } else {
result.reservationQuantumTime = [timeForm(result.categoriesOpenTime, 'HH:mm')] result.reservationQuantumTime = [timeForm(result.categoriesOpenTime, 'HH:mm')];
var categoriesOpenTime=timeForm(result.categoriesOpenTime,'HH:mm') var categoriesOpenTime = timeForm(result.categoriesOpenTime, 'HH:mm');
result.categoriesOpenTime=categoriesOpenTime result.categoriesOpenTime = categoriesOpenTime;
// } // }
// console.log(timeForm(result.categoriesOpenTime,'HH:mm')) // console.log(timeForm(result.categoriesOpenTime,'HH:mm'))
// result.categoriesOpenTime = "09:00-20:00" // result.categoriesOpenTime = "09:00-20:00"
if (result.communityManagerFee == null) { if (result.communityManagerFee == null) {
result.communityManagerFee=numberToString(0) result.communityManagerFee = numberToString(0);
} else { } else {
result.communityManagerFee=numberToString(result.communityManagerFee) result.communityManagerFee = numberToString(result.communityManagerFee);
} }
if (result.communityMargin == null) { if (result.communityMargin == null) {
result.communityMargin=numberToString(0) result.communityMargin = numberToString(0);
} else { } else {
result.communityMargin=numberToString(result.communityMargin) result.communityMargin = numberToString(result.communityMargin);
} }
if (result.canReservationDay <= result.cancelReservationDay || result.canReservationDay <= result.nomarginCancelReservationDay) { if (
message.error("can Reservation Day is invaild!", 3) result.canReservationDay <= result.cancelReservationDay ||
result.canReservationDay = null result.canReservationDay <= result.nomarginCancelReservationDay
) {
message.error('can Reservation Day is invaild!', 3);
result.canReservationDay = null;
} else { } else {
console.log('Should be check:', result); console.log('Should be check:', result);
if (checkParam(result)) { if (checkParam(result)) {
//中断 //中断
if (pictrueExtend.tab == 3) { if (pictrueExtend.tab == 3) {
if (Result == null) { if (Result == null) {
console.log("提交") console.log('提交');
RA(6, result); RA(6, result);
} }
} else { } else {
result.id = DataSave.id result.id = DataSave.id;
console.log("编辑") console.log('编辑');
if (Result == null) { if (Result == null) {
RA(17, result); RA(17, result);
} }
} }
} else {
message.error('Error,Please finish it,not empty!', 3);
} else { message.error("Error,Please finish it,not empty!", 3) } }
} }
}; };
const onFinishFailed = (errorInfo: any) => {
const onBillChange = (values: any, allValues: any) => {
if (values["communityName"] != null) {
setExtend(values["communityName"])
}
}
const onFinishFailed = (errorInfo:any) => {
console.log('Failed:', errorInfo); console.log('Failed:', errorInfo);
}; };
const Subscribe = () => { const Subscribe = () => {
history.push(getUrlLast(location.pathname)+ "/FacilityApply") history.push(getUrlLast(location.pathname) + '/FacilityApply');
} };
const keyup_tool=(value: any)=>{ const keyup_tool = (value: any) => {
return getNumber(value.replace(/[^\d^\.]+/g, '') ) return getNumber(value.replace(/[^\d^\.]+/g, ''));
} };
const keyup_communityManagerFee = (e: any) => { const keyup_communityManagerFee = (e: any) => {
e.target.value =keyup_tool(e.target.value) e.target.value = keyup_tool(e.target.value);
formRef.current.setFieldsValue({communityManagerFee:e.target.value}) formRef.current.setFieldsValue({ communityManagerFee: e.target.value });
} };
const keyup_communityMargin = (e: any) => { const keyup_communityMargin = (e: any) => {
e.target.value =keyup_tool(e.target.value) e.target.value = keyup_tool(e.target.value);
formRef.current.setFieldsValue({communityMargin:e.target.value}) formRef.current.setFieldsValue({ communityMargin: e.target.value });
} };
const keyup = (keyname:any,e: any) => { const keyup = (keyname: any, e: any) => {
e.target.value = (e.target.value).replace(/[^\d^\.]+/g, '') e.target.value = e.target.value.replace(/[^\d^\.]+/g, '');
var tmp = {} var tmp = {};
tmp[keyname]=e.target.value tmp[keyname] = e.target.value;
formRef.current.setFieldsValue(tmp) formRef.current.setFieldsValue(tmp);
} };
return ( // 监听是否选择了小区
<div className={styles.base}> 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} 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 */} {/* 头部组件v1.2 */}
<TitleBack title={PATHNAME} url={getUrlLast(location.pathname) + "?Facility=true"} /> <TitleBack title={PATHNAME} url={getUrlLast(location.pathname) + '?Facility=true'} />
<Form ref={formRef} name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed} onValuesChange={onBillChange} validateMessages={validateMessages} > <Form
ref={formRef}
<Row gutter={32}> form={form}
<Col>Community</Col> name="basic"
<Col><Form.Item name="communityName" ><SearchOptionsCommnity disabled={pictrueExtend.tab!=3?true:false} /></Form.Item></Col> onFinish={onFinish}
</Row> onFinishFailed={onFinishFailed}
<Row gutter={32} style={{marginTop:28}}> validateMessages={validateMessages}
<Col>Facility</Col> >
<Col><Form.Item name="facilityName" rules={[{required:openCheck}]}><Input placeholder="Facility Name" disabled={facilityDetail}/></Form.Item></Col> {/* 选择小区 */}
<Col>Fee($)</Col> <Form.Item label="Community" name="communityName">
<Col><Form.Item name="communityManagerFee" rules={[{required:openCheck}]}><Input onKeyUp={keyup_communityManagerFee} prefix="$" placeholder="00.00" disabled={facilityDetail} allowClear/></Form.Item></Col> <SearchOptionsCommnity
<Col>Deposit</Col> // ubmit={extendName}
<Col><Form.Item name="communityMargin" rules={[{required:openCheck}]}><Input onKeyUp={keyup_communityMargin} prefix="$" placeholder="00.00" disabled={facilityDetail} allowClear/></Form.Item></Col> opname={opname}
</Row> />
</Form.Item>
<Row gutter={32} style={{ marginTop: 28 }}>
{ {/* 设施名称 以及费用 */}
extend != null ?<> <Input.Group>
<Col>Category Of Facilities</Col> <Form.Item label="Facility" name="facilityName">
<Col> <Input placeholder="Facility Name" />
<Form.Item name="categoriesName" > </Form.Item>
<PictureOptions disabled={facilityDetail} <Form.Item label="Fee($)" name="communityManagerFee">
data={{ <Input
userToken: token, onKeyUp={keyup_communityManagerFee}
prefix="$"
placeholder="00.00"
disabled={facilityDetail}
allowClear
/>
</Form.Item>
<Form.Item label="Deposit" name="communityMargin">
<Input
onKeyUp={keyup_communityMargin}
prefix="$"
placeholder="00.00"
disabled={facilityDetail}
allowClear
/>
</Form.Item>
</Input.Group>
<hr></hr>
{/* 设施品类上传 */}
<Form.Item label="Facility Classification" className="flex">
<Facilitys
disabled={imgOpen}
updata={{
// userToken: token,
imageType: 'categoriesImageName', imageType: 'categoriesImageName',
extends: extend, extends: ctyName,
}} /></Form.Item > </Col> }}
</> : null ></Facilitys>
} </Form.Item>
</Row>
<Row gutter={32} style={{ marginTop: 28 }}> {/* 设施详情上传 */}
{ <Form.Item name="categoriesDetailsImageName" label="Facility Details">
extend != null ?<> <PictureOptionsRow
<Col>Facility Details</Col> over={imgOpen}
<Col>
<Form.Item name="categoriesDetailsImageName" >
<PictureOptionsRow disabled={facilityDetail}
data={{ data={{
userToken: token, userToken: token,
imageType: 'categoriesDetailsImageName', imageType: 'categoriesDetailsImageName',
extends: extend, extends: ctyName,
}} /></Form.Item ></Col> }}
</> />
:null </Form.Item>
}
</Row> {/* 时间 */}
<Line /> <Form.Item label="Opening Hours">
<Row gutter={32} style={{marginTop:28}}> <Select style={{ width: 140 }} placeholder="Start Time">
<Col >Opening Hours</Col> {hourS}
{/* <Input placeholder="09:00-20:00" suffix={<FieldTimeOutlined />} style={{width:160}}/> */} </Select>
<Col><Form.Item name="categoriesOpenTime" rules={[{required:openCheck}]}><RangePicker format={'HH'} hourStep={1} /></Form.Item></Col> <span className="diyspan">-</span>
</Row> <Select style={{ width: 140 }} placeholder="Closing Time">
{hourS}
<Row gutter={32} style={{}}> </Select>
<Col>Appointment Settings</Col> </Form.Item>
<Col>
<Row gutter={20}> <hr></hr>
<Col><Form.Item name="cancelReservationDay" rules={[{required:openCheck}]} label="Early cancellation"><Input onKeyUp={keyup.bind(this,"cancelReservationDay")} placeholder="Cancel the reservation" style={{width:160}} disabled={facilityDetail} suffix="Day"/></Form.Item></Col>
<Col><Form.Item name="nomarginCancelReservationDay" rules={[{required:openCheck}]} label="Automatic cancellation without deposit"><Input onKeyUp={keyup.bind(this,"nomarginCancelReservationDay")} placeholder="No deposit,cancellation" style={{ width: 160 }} disabled={facilityDetail} suffix="Day" /></Form.Item></Col> {/* ------------- */}
<Col><Form.Item name="canReservationDay" rules={[{required:openCheck}]} label="Advance booking is available"><Input onKeyUp={keyup.bind(this,"canReservationDay")} placeholder="Bookable" style={{width:160}} disabled={facilityDetail} suffix="Day"/></Form.Item></Col> <p className="diyp">Appointment Settings : </p>
</Row>
<Row gutter={8}> {/* 预约设置 */}
<Col> <Input.Group>
<Form.Item name="periodType" rules={[{required:openCheck}]} label="Appointment Cycle"> <Form.Item name="cancelReservationDay" label="Early Cancellation">
<Select placeholder="period" allowClear style={{width:120}} disabled={facilityDetail}> <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">
<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">
<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">
<Select
placeholder="Period"
allowClear
style={{ width: 120 }}
disabled={facilityDetail}
>
<Option value="1">Week</Option> <Option value="1">Week</Option>
<Option value="2">Month</Option> <Option value="2">Month</Option>
<Option value="3">Year</Option> <Option value="3">Year</Option>
</Select> </Select>
</Form.Item> </Form.Item>
</Col> <Form.Item name="canReservationNum">
<Col><Form.Item name="canReservationNum" rules={[{required:openCheck}]} ><Input onKeyUp={keyup.bind(this,"canReservationNum")} placeholder="times" style={{width:120}} disabled={facilityDetail} suffix="Times"/></Form.Item></Col> <Input
</Row> onKeyUp={keyup.bind(this, 'canReservationNum')}
</Col> placeholder="Times"
</Row> style={{ width: 120 }}
disabled={facilityDetail}
suffix="Times"
/>
</Form.Item>
</Input.Group>
<hr></hr>
{/* <Row gutter={32} style={{ marginTop: 28 }}> {/* <Row gutter={32} style={{ marginTop: 28 }}>
<Col>Appointment Period</Col> <Col>Appointment Period</Col>
<Col><TimeSelect putSubmit={TimeSelectRef} defaultValue={timeExtend} disabled={facilityDetail}/></Col> <Col><TimeSelect putSubmit={TimeSelectRef} defaultValue={timeExtend} disabled={facilityDetail}/></Col>
</Row> */} </Row> */}
{ {facilityDetail ? (
facilityDetail ? <><Line /><Button type="primary" onClick={Subscribe}>Subscribe</Button></> : <>
<><Line /><Button type="primary" htmlType="submit">Submit</Button></> <Button type="primary" onClick={Subscribe}>
} Subscribe
</Button>
</>
) : (
<>
<Button type="primary" htmlType="submit">
Submit
</Button>
</>
)}
</Form> </Form>
</div> </div>
); );
}; };
function mapStateToProps(state:any) { function mapStateToProps(state: any) {
const { sourceData, DataSave ,Result} = state.FacilityBookings; const { sourceData, DataSave, Result } = state.FacilityBookings;
const { token } = state.login; const { token } = state.login;
return { return {
DataSave, DataSave,
sourceData, sourceData,
token, token,
Result Result,
}; };
} }
export default connect(mapStateToProps)(Facility); export default connect(mapStateToProps)(Facility);
...@@ -306,4 +432,3 @@ export default connect(mapStateToProps)(Facility); ...@@ -306,4 +432,3 @@ export default connect(mapStateToProps)(Facility);
// nomarginCancelReservationDay: "4", // nomarginCancelReservationDay: "4",
// periodType: "2", // periodType: "2",
// } // }
src/pages/CommunityManagement/FacilityBookings/FacilityBookings.tsx
View file @ c9dd3d6c
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import styles from './css/index.less'; import { Input, Tabs, Table, Space, Button } from 'antd';
import { Input ,Tabs,Table,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';
import { objectColumns } from '../../../utils/string'; import { objectColumns } from '../../../utils/string';
import { timestampToTime } from '../../../utils/time'; import { timestampToTime } from '../../../utils/time';
import TitleSearch from '../../../components/TitleSearch/TitleSearch'; import TitleSearch from '../../../components/TitleSearch/TitleSearch';
// const managerFeeStatusDes= ["未交", "已交", "已退"] // const managerFeeStatusDes= ["未交", "已交", "已退"]
// const marginFeeStatusDes = ["未交", "已交", "未退", "已退部分", "已退全部"] // const marginFeeStatusDes = ["未交", "已交", "未退", "已退部分", "已退全部"]
// const statusDes = ["全部", "已申请", "已预订", "已使用", "已取消", "已完成"] // const statusDes = ["全部", "已申请", "已预订", "已使用", "已取消", "已完成"]
const managerFeeStatusDes= ["Not paid", "Paid", "Returned"] const managerFeeStatusDes = ['Not paid', 'Paid', 'Returned'];
const marginFeeStatusDes = ["Not paid", "Paid", "Not Returned", "Returned part", "Returned all"] const marginFeeStatusDes = ['Not paid', 'Paid', 'Not Returned', 'Returned part', 'Returned all'];
const statusDes = ["All", "Applied", "Reserved", "Used", "Cancelled", "Completed"] const statusDes = ['All', 'Applied', 'Reserved', 'Used', 'Cancelled', 'Completed'];
import { getUrlLastParams } from '../../../utils/string'; import { getUrlLastParams } from '../../../utils/string';
const FacilityBookings = (props:any) => { import './css/index.less';
const { formatMessage } = useIntl(); import ProTable from '@ant-design/pro-table';
import { PlusOutlined, SearchOutlined, ClearOutlined } from '@ant-design/icons';
const { dispatch, location, Data, Data2, token,DataSave,curString,Result } = props; const FacilityBookings = (props: any) => {
const { formatMessage } = useIntl();
const { dispatch, location, Data, Data2, token, DataSave, curString, Result } = props;
const RA = (index:any,values: any) => { const RA = (index: any, values: any) => {
console.log(values) console.log(values);
dispatch({ dispatch({
type: 'FacilityBookings/RA', type: 'FacilityBookings/RA',
playload: {index:index, body:values } 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 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 [loading, setLoading] = useState(false)
const [columns, setColumns] = useState([])
const [columns2, setColumns2] = useState([])
const CA = () => {
dispatch({ type: 'FacilityBookings/CA', playload: null });
};
const [loading, setLoading] = useState(false);
const [columns, setColumns] = useState([]);
const [columns2, setColumns2] = useState([]);
const goToFunction = () => { const goToFunction = () => {
if(curString.tab==2){CA()} if (curString.tab == 2) {
history.push(location.pathname + (curString.tab==1?'/Booking':'/Adding')) CA();
}
const goToDetail = (values:any) => {
SA(values)
console.log("准备页面跳转")
console.log(curString)
history.push(location.pathname + '/Detail')
} }
const makeOperator = (values: any,index:any, e: any) => { history.push(location.pathname + (curString.tab == 1 ? '/Booking' : '/Adding'));
};
const path = ['/FacilityDetail', '/FacilityEdit', '/FacilityApply'] const goToDetail = (values: any) => {
SA(values) SA(values);
console.log("准备页面跳转") console.log('准备页面跳转');
console.log(curString) console.log(curString);
history.push(location.pathname + path[index]) history.push(location.pathname + '/Detail');
} };
const makeOperator = (values: any, index: any, e: any) => {
const path = ['/FacilityDetail', '/FacilityEdit', '/FacilityApply'];
SA(values);
console.log('准备页面跳转');
console.log(curString);
history.push(location.pathname + path[index]);
};
useEffect(() => { useEffect(() => {
const key = [ const key = [
["Service Community", "communityName"], ['Service Community', 'communityName'],
["User Name", "accountName"], ['User Name', 'accountName'],
["Facility Bookings", "facilityTitle"], ['Facility Bookings', 'facilityTitle'],
["Order Time", null, (text: any, record: any) => (<div>{timestampToTime(record.createTime.time)}</div>)], [
'Order Time',
["Booking Schedule", "subscribeDate"], null,
["Fee", "managerFeeStatus",(text: any) => (<div>{managerFeeStatusDes[text]}</div>)], (text: any, record: any) => <div>{timestampToTime(record.createTime.time)}</div>,
["Deposit", "marginFeeStatus",(text: any) => (<div>{marginFeeStatusDes[text]}</div>)], ],
["Status", "status", (text: any) => (<div>{statusDes[text]}</div>)],
['Booking Schedule', 'subscribeDate'],
["Actions",null, (text: any, record: any) => (<Space size="middle"> <a onClick={goToDetail.bind(this,record)}>Detail</a></Space>)], ['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 = [ const key2 = [
["Community", "communityName"], ['Community', 'communityName'],
["Facilty", "facilityName"], ['Facilty', 'facilityName'],
["Open Time", "categoriesOpenTime"], ['Open Time', 'categoriesOpenTime'],
["Action", null, (text: any, record: any) => (<Space size="middle"> [
<a onClick={makeOperator.bind(this,record,0)}>Detail</a> 'Action',
<a onClick={makeOperator.bind(this,record,1)}>Edit</a> null,
<a onClick={makeOperator.bind(this,record,2)}>Booking</a> (text: any, record: any) => (
</Space>)] <Space size="middle">
] <a onClick={makeOperator.bind(this, record, 0)}>Detail</a>
setColumns(objectColumns(key)) <a onClick={makeOperator.bind(this, record, 1)}>Edit</a>
setColumns2(objectColumns(key2)) <a onClick={makeOperator.bind(this, record, 2)}>Booking</a>
console.log("页面刷新") </Space>
console.log(DataSave) ),
console.log(curString) ],
];
setColumns(objectColumns(key));
setColumns2(objectColumns(key2));
console.log('页面刷新');
console.log(DataSave);
console.log(curString);
if (curString.tab == 1) { if (curString.tab == 1) {
RA(9, { userToken: token, pageNum: curString.curPage, subscribeDate: curString.subscribeDate, status: curString.status,communityNameList:curString.communityNameList }) RA(9, {
userToken: token,
pageNum: curString.curPage,
subscribeDate: curString.subscribeDate,
status: curString.status,
communityNameList: curString.communityNameList,
});
} else { } else {
RA(8,{ userToken: token, pageNum: curString.curPage2 }) RA(8, { userToken: token, pageNum: curString.curPage2 });
} }
}, []);
},[]);
useEffect(() => { useEffect(() => {
setLoading(false) setLoading(false);
}, [Data,Data2]); }, [Data, Data2]);
const CallBackTitleSearch= (comment: any) => { const CallBackTitleSearch = (comment: any) => {
console.log(comment) console.log(comment);
if (curString.tab == 1) { if (curString.tab == 1) {
if (comment.communityName != null || comment.key != null || comment.status != null) { if (comment.communityName != null || comment.key != null || comment.status != null) {
var tmp = curString var tmp = curString;
tmp.subscribeDate = comment.key tmp.subscribeDate = comment.key;
if (comment.status == null||comment.status==undefined) { if (comment.status == null || comment.status == undefined) {
tmp.status = 0; tmp.status = 0;
} else { } else {
tmp.status = comment.status tmp.status = comment.status;
} }
tmp.communityNameList = comment.communityName tmp.communityNameList = comment.communityName;
tmp.curPage=1 tmp.curPage = 1;
QA(tmp) QA(tmp);
console.log(tmp) console.log(tmp);
//中断 //中断
RA(9, { userToken: token, pageNum: "1", subscribeDate: tmp.subscribeDate, status: tmp.status,communityNameList:comment.communityName }) RA(9, {
userToken: token,
pageNum: '1',
subscribeDate: tmp.subscribeDate,
status: tmp.status,
communityNameList: comment.communityName,
});
} }
} else { } else {
if (comment.communityName != null || comment.facilityName != null) { if (comment.communityName != null || comment.facilityName != null) {
var tmp = curString var tmp = curString;
tmp.communityNameList = comment.communityName tmp.communityNameList = comment.communityName;
tmp.facilityName = comment.facilityName tmp.facilityName = comment.facilityName;
tmp.curPage=1 tmp.curPage = 1;
QA(tmp) QA(tmp);
RA(8, {communityNameList: comment.communityName, facilityName: comment.facilityName, pageNum: "1"}) RA(8, {
communityNameList: comment.communityName,
} facilityName: comment.facilityName,
pageNum: '1',
});
} }
} }
};
function TabCallback(tab: any) { function TabCallback(tab: any) {
setLoading(true) setLoading(true);
var tmp = curString var tmp = curString;
tmp.tab = tab tmp.tab = tab;
QA(tmp) QA(tmp);
if (tab == 1) { if (tab == 1) {
RA(9, { userToken: token, pageNum: curString.curPage, subscribeDate: curString.subscribeDate, status: curString.status,communityNameList:curString.communityNameList }) RA(9, {
userToken: token,
pageNum: curString.curPage,
subscribeDate: curString.subscribeDate,
status: curString.status,
communityNameList: curString.communityNameList,
});
} else { } else {
RA(8,{ userToken: token, pageNum: curString.curPage2 }) RA(8, { userToken: token, pageNum: curString.curPage2 });
} }
} }
function Pagechange(current: any, pageSize: any) { function Pagechange(current: any, pageSize: any) {
setLoading(true) setLoading(true);
if (curString.tab == 1) { if (curString.tab == 1) {
var tmp = curString var tmp = curString;
tmp.curPage = current tmp.curPage = current;
QA(tmp) QA(tmp);
RA(9, { userToken: token, pageNum: current, subscribeDate: curString.subscribeDate, status: curString.status,communityNameList:curString.communityNameList}) RA(9, {
userToken: token,
pageNum: current,
subscribeDate: curString.subscribeDate,
status: curString.status,
communityNameList: curString.communityNameList,
});
} else { } else {
var tmp = curString var tmp = curString;
tmp.curPage2 = current tmp.curPage2 = current;
QA(tmp) QA(tmp);
if (curString.communityNameList != null) { if (curString.communityNameList != null) {
RA(8, { userToken: token, pageNum: current, communityNameList: curString.communityNameList}) RA(8, {
userToken: token,
pageNum: current,
communityNameList: curString.communityNameList,
});
} else { } else {
RA(8, { userToken: token, pageNum: current,}) RA(8, { userToken: token, pageNum: current });
} }
} }
} }
return ( return (
<div className={styles.base}> <>
<div className="base">
{/* 头部组件 */} {/* 头部组件 */}
{ {curString.tab == 1 ? (
curString.tab == 1 ?
<> <>
<TitleSearch <TitleSearch
status={[{ status={[
name: ["status", "Order status"], {
data: [[0, "All"], [1, "Applied"], [2, "Reserved"], [3, "Used"], [4, "Cancelled"]] name: ['status', 'Order status'],
}]} data: [
time={["key", "Booking time "]} [0, 'All'],
community={"communityName"} [1, 'Applied'],
checklist={curString.communityNameList!=null?curString.communityNameList:null} [2, 'Reserved'],
onSubmit={CallBackTitleSearch} /> [3, 'Used'],
</> : [4, 'Cancelled'],
],
},
]}
time={['key', 'Booking time ']}
community={'communityName'}
checklist={curString.communityNameList != null ? curString.communityNameList : null}
onSubmit={CallBackTitleSearch}
/>
</>
) : (
<> <>
<TitleSearch <TitleSearch
listkey={['facilityName']} list={['Facility name']} listkey={['facilityName']}
community={"communityName"} list={['Facility name']}
onSubmit={CallBackTitleSearch} /> community={'communityName'}
onSubmit={CallBackTitleSearch}
/>
</> </>
} )}
<div style={{position:"relative",height:40}}>
<Button type="primary" style={{ position: "absolute", right: 0 }} onClick={goToFunction}>{curString.tab==1?"Booking":"Add Facility"}</Button>
</div> </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}> <Tabs defaultActiveKey={curString.tab.toString()} onChange={TabCallback}>
<TabPane tab="Facility Bookings" key="1"> <TabPane tab="Facility Bookings" key="1">
<Table loading={loading} rowKey="id" style={{ marginTop: 16 }} dataSource={Data.data } columns={columns} pagination={{ current: curString.curPage, total: Data.total.totalRow, showSizeChanger: false, onChange:Pagechange }} /> <Table
loading={loading}
rowKey="id"
style={{ marginTop: 16 }}
dataSource={Data.data}
columns={columns}
pagination={{
current: curString.curPage,
total: Data.total.totalRow,
showSizeChanger: false,
onChange: Pagechange,
}}
/>
</TabPane> </TabPane>
<TabPane tab="Facility Management" key="2"> <TabPane tab="Facility Management" key="2">
<Table loading={loading} rowKey="id" style={{ marginTop: 16 }} dataSource={Data2.data} columns={columns2} pagination={{ current: curString.curPage2, total: Data2.total.totalRow, showSizeChanger: false, onChange: Pagechange }} /> <ProTable
loading={loading}
rowKey="id"
style={{ marginTop: 16 }}
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={() => {
// goToAdd(0, {});
goToFunction();
}}
>
<PlusOutlined />
添加设施
</Button>,
]}
options={{
density: true,
fullScreen: true,
reload: () => {
// onReset();
},
setting: false,
}}
headerTitle="设施列表"
/>
</TabPane> </TabPane>
</Tabs> </Tabs>
</div> </div>
</>
); );
}; };
function mapStateToProps(state:any) { function mapStateToProps(state: any) {
const { Data, Data2,DataSave,curString,Result } = state.FacilityBookings; const { Data, Data2, DataSave, curString, Result } = state.FacilityBookings;
const { token } = state.login; const { token } = state.login;
return { return {
Data, Data,
...@@ -228,12 +337,11 @@ function mapStateToProps(state:any) { ...@@ -228,12 +337,11 @@ function mapStateToProps(state:any) {
DataSave, DataSave,
curString, curString,
Result, Result,
token token,
}; };
} }
export default connect(mapStateToProps)(FacilityBookings); export default connect(mapStateToProps)(FacilityBookings);
// status：预约设施状态 0:全部 1：已申请 2：已预订 3：已使用 4：已取消 5：已完成 // status：预约设施状态 0:全部 1：已申请 2：已预订 3：已使用 4：已取消 5：已完成
// manager_fee_status：管理费 0：未 1：已交 2：已退 // manager_fee_status：管理费 0：未 1：已交 2：已退
// margin_fee_status：押金 0：未 1：已交 2：未退 3：已退部分 4：已退全部 5： // margin_fee_status：押金 0：未 1：已交 2：未退 3：已退部分 4：已退全部 5：
src/pages/CommunityManagement/FacilityBookings/css/index.less
View file @ c9dd3d6c
...@@ -4,277 +4,325 @@ ...@@ -4,277 +4,325 @@
.base { .base {
width: 100%; width: 100%;
background-color: #ffffff; background-color: #ffffff;
padding: 34px; padding: 16px;
min-width: 1020px; margin-bottom: 15px;
} }
//头部组件 //头部组件
.box{ .box {
width: 100%; width: 100%;
height: 64px; height: 64px;
position: relative; position: relative;
} }
.item1{ .item1 {
position: absolute; position: absolute;
width: 180px; width: 180px;
text-align: center; text-align: center;
border-left: 5px solid rgba(24,144,255,1); border-left: 5px solid rgba(24, 144, 255, 1);
font-family:'Source Han Sans CN'; font-family: 'Source Han Sans CN';
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #000000; color: #000000;
} }
.item3{ .item3 {
width:80px; width: 80px;
height: 32px; height: 32px;
position: absolute; position: absolute;
right: 0; right: 0;
outline: none; outline: none;
background:none; background: none;
cursor: pointer; cursor: pointer;
border:1px solid rgba(217,217,217,1); border: 1px solid rgba(217, 217, 217, 1);
border-radius:2px; border-radius: 2px;
} }
.box1{ .box1 {
width: 100%; width: 100%;
height: 34px; height: 34px;
position: relative; position: relative;
margin-bottom: 28px; margin-bottom: 28px;
} }
.box1item1{ .box1item1 {
position: absolute; position: absolute;
} }
.box1item2{ .box1item2 {
position: absolute; position: absolute;
left: 139px; left: 139px;
} }
.box2 {
.box2{
width: 100%; width: 100%;
height: 34px; height: 34px;
position: relative; position: relative;
margin-bottom: 28px; margin-bottom: 28px;
} }
.box2item1{ .box2item1 {
position: absolute; position: absolute;
} }
.box2item2{ .box2item2 {
position: absolute; position: absolute;
left: 139px; left: 139px;
} }
.box2item3{ .box2item3 {
position: absolute; position: absolute;
left: 407px; left: 407px;
} }
.box2item4{ .box2item4 {
position: absolute; position: absolute;
left: 565px; left: 565px;
} }
.box2item5{ .box2item5 {
position: absolute; position: absolute;
left: 713px; left: 713px;
} }
.box2item6{ .box2item6 {
position: absolute; position: absolute;
left: 778px; left: 778px;
} }
.box3 {
.box3{
position: relative; position: relative;
margin-bottom: 28px; margin-bottom: 28px;
} }
.box3item1{ .box3item1 {
position: absolute; position: absolute;
} }
.box3item2{ .box3item2 {
padding-left: 160px; padding-left: 160px;
} }
.box3group1{ .box3group1 {
width: 266px; width: 266px;
height: 100px; height: 100px;
} }
.box4{ .box4 {
position: relative; position: relative;
} }
.box4item1{ .box4item1 {
position: absolute; position: absolute;
} }
.box4item2{ .box4item2 {
padding-left: 160px; padding-left: 160px;
} }
.ulist{ .ulist {
float:left; float: left;
width:100%; width: 100%;
padding:0; padding: 0;
margin:0; margin: 0;
list-style-type:none; list-style-type: none;
} }
.llist{ .llist {
display:inline; display: inline;
} }
.alist{ .alist {
float:left; float: left;
width: 160px; width: 160px;
} }
.alist1{ .alist1 {
position: relative; position: relative;
width: 100px; width: 100px;
height: 100px; height: 100px;
} }
.alist2{ .alist2 {
float: left; float: left;
width: 326px; width: 326px;
margin-bottom: 20px; margin-bottom: 20px;
z-index: 1; z-index: 1;
} }
.alist2box{ .alist2box {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
} }
.alist2boxitem1{ .alist2boxitem1 {
position: absolute; position: absolute;
top: -100px; top: -100px;
left: 127px; left: 127px;
} }
.alist2boxitem2{ .alist2boxitem2 {
position: absolute; position: absolute;
top: -100px; top: -100px;
left: 180px; left: 180px;
} }
.alist2boxitem3{ .alist2boxitem3 {
position: absolute; position: absolute;
top: -40px; top: -40px;
left: 216px; left: 216px;
} }
.alist2boxNone{ .alist2boxNone {
color: #ffffff; color: #ffffff;
moz-user-select: -moz-none; moz-user-select: -moz-none;
-moz-user-select: none; -moz-user-select: none;
-o-user-select:none; -o-user-select: none;
-khtml-user-select:none; -khtml-user-select: none;
-webkit-user-select:none; -webkit-user-select: none;
-ms-user-select:none; -ms-user-select: none;
user-select:none; user-select: none;
} }
.alist3{ .alist3 {
z-index: 10; z-index: 10;
cursor: pointer; cursor: pointer;
float: left; float: left;
width: 100px; width: 100px;
height: 100px; height: 100px;
line-height: 100px; line-height: 100px;
background-color: rgba(244,244,244,1); background-color: rgba(244, 244, 244, 1);
text-align: center; text-align: center;
} }
// 线栏 // 线栏
.line{ .line {
width: 100%; width: 100%;
height: 1px; height: 1px;
border-top: 1px solid rgba(217,217,217,1); border-top: 1px solid rgba(217, 217, 217, 1);
margin-top: 28px; margin-top: 28px;
margin-bottom: 28px; margin-bottom: 28px;
} }
.box5{ .box5 {
position: relative; position: relative;
width: 100%; width: 100%;
height: 34px; height: 34px;
margin-bottom: 28px; margin-bottom: 28px;
} }
.box5item1{ .box5item1 {
position: absolute; position: absolute;
} }
.box5item2{ .box5item2 {
position: absolute; position: absolute;
left: 186px; left: 186px;
} }
.box6{ .box6 {
position: relative; position: relative;
line-height: 34px; line-height: 34px;
width: 100%; width: 100%;
height: 34px; height: 34px;
margin-bottom: 32px; margin-bottom: 32px;
} }
.box6item1{ .box6item1 {
position: absolute; position: absolute;
} }
.box6item2{ .box6item2 {
position: absolute; position: absolute;
left: 186px; left: 186px;
} }
.box6item3{ .box6item3 {
position: absolute; position: absolute;
left: 276px; left: 276px;
} }
.box6item4{ .box6item4 {
position: absolute; position: absolute;
left: 478px; left: 478px;
} }
.box6item5{ .box6item5 {
position: absolute; position: absolute;
left: 569px; left: 569px;
} }
.box6item6{ .box6item6 {
position: absolute; position: absolute;
left: 794px; left: 794px;
} }
.box6item7{ .box6item7 {
position: absolute; position: absolute;
left: 885px; left: 885px;
} }
.box7 {
.box7{
position: relative; position: relative;
width: 100%; width: 100%;
height: 34px; height: 34px;
margin-bottom: 28px; margin-bottom: 28px;
} }
.box7item1{ .box7item1 {
position: absolute; position: absolute;
left: 186px; left: 186px;
} }
.box7item2{ .box7item2 {
position: absolute; position: absolute;
left: 323px; left: 323px;
} }
.box8{ .box8 {
position: relative; position: relative;
width: 100%; width: 100%;
height: 34px; height: 34px;
} }
.box8item1{ .box8item1 {
position: absolute; position: absolute;
} }
.box8item2{ .box8item2 {
position: absolute; position: absolute;
left: 346px; left: 346px;
} }
.box8item3{ .box8item3 {
position: absolute; position: absolute;
left: 462px; left: 462px;
color: rgba(217,217,217,1); color: rgba(217, 217, 217, 1);
} }
.box8item4{ .box8item4 {
position: absolute; position: absolute;
left: 502px; left: 502px;
} }
// 自定义
.basediy {
.ant-tabs > .ant-tabs-nav,
.ant-tabs > div > .ant-tabs-nav {
margin: 0;
}
.flex {
.ant-form-item-control-input-content {
display: flex;
flex-wrap: wrap;
}
}
.ant-input-group {
display: flex;
.ant-form-item {
margin-right: 20px;
}
}
.diyspan {
display: inline-block;
margin: 0 10px;
}
.diyp {
margin-bottom: 24px;
font-size: 18px;
color: #333;
font-weight: 500;
}
.ant-input-prefix,
.ant-input-suffix {
color: #888;
}
.ant-form-item-required,
.ant-form-item-label > label {
min-width: 100px;
text-align: right;
}
// .ant-form-item-control-input-content {
// display: flex;
// flex-wrap: wrap;
// }
}
hr {
border: 0;
height: 1px;
background: #eee;
margin-bottom: 24px;
}
src/pages/CommunityManagement/VisitorRecord/VisitorRecord copy.tsx 0 → 100644
View file @ c9dd3d6c
import React, { useState, useEffect } from 'react';
import { Input ,Tabs,Table,Space, Button} from 'antd';
const { TabPane } = Tabs;
import {connect} from 'umi';
import { objectColumns } from '@/utils/string';
// cdkCode: 998974
// cdkStatus: "0"
// count: 0
// createTime: "Sep 7, 2020 6:12:35 PM"
// deleted: 0
// enable: 0
// extend: ""
// id: "8f8b49308c0b4fb4a0e6b9d6af0aaa1e"
// inviterAddress: "TANGDE2#01#01#01"
// inviterId: "2597108b72f64a5da34892c14f0e6a57"
// inviterName: "啊啊啊"
// inviterPhone: "2536727886@qq.com"
// linkStatus: 1
// numberPlate: "粤A465123"
// securityGuardCommunity: "unkown"
// securityGuardName: "unkown"
// securityGuardPhone: "unkown"
// status: 1
// updateTime: "Sep 7, 2020 6:13:06 PM"
// visitorsName: "销赃"
// visitorsPhone: "18535669865"
const columns = objectColumns( [
["User Name", "inviterName"],
["Visitor", "visitorsName"],
["Security Guard", "securityGuardName"],
["Number Plate", "numberPlate"],
["time", "updateTime"],
["community", "visitorCommunity"],
["unit", "inviterAddress"]
// ["Actions",null, (text: any, record: any) => (<Space size="middle"> <a>Detail</a></Space>)],
])
import TitleSearch from '@/components/TitleSearch/TitleSearch'
import { RA } from '@/utils/method';
const module="VisitorRecord"
const VisitorRecord = (props:any) => {
const { dispatch, Data } = props;
const TosVisitorRecordGet = (values: any) => { dispatch({ type: 'tosVisitorRecord/get', playload: values }) };
useEffect(() => {
RA(26,{inviterAddress: "", visitorCommunity: ""},module,dispatch)
}, [])
const CallBackTitleSearch = (values:any) => {
console.log(values)
// visitorCommunity
TosVisitorRecordGet({
visitorCommunity: values.inviterAddress,
})
}
const pagination={defaultCurrent:1,total: Data!=null?Data.length:0}
return (
<div style={{ width: "100%", minWidth: 1020, padding: 34, backgroundColor: "#ffffff" }}>
<TitleSearch listkey={['inviterAddress']}
list={['Community Name']}
community={"serviceCommunityList"}
onSubmit={CallBackTitleSearch}/>
{Data!=null?
<Table
loading={false}
rowKey="id"
style={{ marginTop: 16 }}
dataSource={Data.rows}
columns={columns}
pagination={pagination}
// pagination={{ current: 1, total: Data.total}}
/>:null}
</div>
);
};
function map(state:any) {
const { Data} = state[module]
return { Data}
}
export default connect(map)(VisitorRecord);
// 备注
// 列表缺少访客时间
// 搜索缺少到达时间、访客姓名
src/pages/CommunityManagement/VisitorRecord/VisitorRecord.tsx
View file @ c9dd3d6c
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Input ,Tabs,Table,Space, Button} from 'antd'; import { Input, Tabs, Table, Form, Button, message, DatePicker } from 'antd';
const { TabPane } = Tabs; const { TabPane } = Tabs;
import { connect } from 'umi';
import {connect} from 'umi';
import { objectColumns } from '@/utils/string'; import { objectColumns } from '@/utils/string';
import ProTable from '@ant-design/pro-table';
import { RA, SA } from '@/utils/method';
import { PlusOutlined, SearchOutlined, ClearOutlined } from '@ant-design/icons';
import './index.less';
import moment from 'moment';
// cdkCode: 998974 const module = 'VisitorRecord';
// cdkStatus: "0"
// count: 0
// createTime: "Sep 7, 2020 6:12:35 PM"
// deleted: 0
// enable: 0
// extend: ""
// id: "8f8b49308c0b4fb4a0e6b9d6af0aaa1e"
// inviterAddress: "TANGDE2#01#01#01"
// inviterId: "2597108b72f64a5da34892c14f0e6a57"
// inviterName: "啊啊啊"
// inviterPhone: "2536727886@qq.com"
// linkStatus: 1
// numberPlate: "粤A465123"
// securityGuardCommunity: "unkown"
// securityGuardName: "unkown"
// securityGuardPhone: "unkown"
// status: 1
// updateTime: "Sep 7, 2020 6:13:06 PM"
// visitorsName: "销赃"
// visitorsPhone: "18535669865"
const columns = objectColumns( [
["User Name", "inviterName"],
["Visitor", "visitorsName"],
["Security Guard", "securityGuardName"],
["Number Plate", "numberPlate"],
["time", "updateTime"],
["community", "visitorCommunity"],
["unit", "inviterAddress"]
// ["Actions",null, (text: any, record: any) => (<Space size="middle"> <a>Detail</a></Space>)],
])
import TitleSearch from '@/components/TitleSearch/TitleSearch' const VisitorRecord = (props: any) => {
import { RA } from '@/utils/method'; const { dispatch, Data, DataSave, loading } = props;
const module="VisitorRecord"
const VisitorRecord = (props:any) => {
const { dispatch, Data } = props; useEffect(() => {
const TosVisitorRecordGet = (values: any) => { dispatch({ type: 'tosVisitorRecord/get', playload: values }) }; RA(26, { inviterAddress: '', visitorCommunity: '' }, module, dispatch);
}, [1]);
const TosVisitorRecordGet = (values: any) => {
dispatch({ type: 'tosVisitorRecord/get', playload: values });
};
// 新增搜索的时间 原来时间是时间戳格式
useEffect(() => { useEffect(() => {
RA(26,{inviterAddress: "", visitorCommunity: ""},module,dispatch) if (Data != null) {
}, []) Data.forEach((item: any) => {
item.showTime = moment(item.updateTime).format('YYYY-MM-DD');
});
}
}, [Data]);
// 表头
const columns: any = [
{ title: 'Invitees Name', dataIndex: 'inviterName' },
{ title: 'Visitor Name', dataIndex: 'visitorsName' },
{ title: 'Security Guard', dataIndex: 'securityGuardName' },
{ title: 'Number Plate', dataIndex: 'numberPlate' },
// 隐藏的搜索框
{ title: 'Visitor Time', hideInTable: true, dataIndex: 'showTime', valueType: 'date' },
{ title: 'Visitor Time', dataIndex: 'updateTime', valueType: 'date' },
{ title: 'Community', dataIndex: 'visitorCommunity' },
{ title: 'Unit', dataIndex: 'inviterAddress' },
// ["Actions",null, (text: any, record: any) => (<Space size="middle"> <a>Detail</a></Space>)],
];
const CallBackTitleSearch = (values:any) => { const CallBackTitleSearch = (values: any) => {
console.log(values) console.log(values);
// visitorCommunity // visitorCommunity
TosVisitorRecordGet({ TosVisitorRecordGet({
visitorCommunity: values.inviterAddress, visitorCommunity: values.inviterAddress,
}) });
};
const [form] = Form.useForm();
// 分页
const pagination: any = {
defaultCurrent: 1,
total: Data != null ? Data.length : 0,
defaultPageSize: 12,
showSizeChanger: false,
size: 'default',
};
// 搜索配置
// const searchInfo = {
// filterType: 'light',
// searchText: 'Search',
// resetText: 'Reset',
// };
// 多条件筛选
//@param condition 过滤条件
//@param data 需要过滤的数据
let filter = (condition: any, data: any) => {
return data.filter((item: any) => {
return Object.keys(condition).every((key) => {
return String(item[key])
.toLowerCase()
.includes(String(condition[key]).trim().toLowerCase());
});
});
};
// 点击搜索
const onSubmitForm = (value: any) => {
// 有的话需要先转换 否则会被清除
if (value.showTime) {
value.showTime = moment(value.showTime).format('YYYY-MM-DD');
}
// 清除 undefind
let info = JSON.parse(stringifyNoEmptyField(value));
if (JSON.stringify(info) == '{}') {
message.info('Please select a search');
} else {
if (info.showTime) {
info.showTime = moment(info.showTime).format('YYYY-MM-DD');
}
console.log(info);
let Datas = filter(info, DataSave);
SA(Datas, module, dispatch);
} }
const pagination={defaultCurrent:1,total: Data!=null?Data.length:0} };
// 点击重置
const onResetFrom = () => {
onReset();
};
// 刷新
const onReset = () => {
SA(DataSave, module, dispatch);
};
// 去掉null undefined 无效字段
function removeEmptyField(obj: any) {
var newObj = {};
if (typeof obj == 'string') {
obj = JSON.parse(obj);
}
if (obj instanceof Array) {
newObj = [];
}
if (obj instanceof Object) {
for (var attr in obj) {
if (
obj.hasOwnProperty(attr) &&
obj[attr] !== '' &&
obj[attr] !== null &&
obj[attr] !== undefined
) {
if (obj[attr] instanceof Object) {
newObj[attr] = removeEmptyField(obj[attr]);
} else if (
typeof obj[attr] == 'string' &&
((obj[attr].indexOf('{') > -1 && obj[attr].indexOf('}') > -1) ||
(obj[attr].indexOf('[') > -1 && obj[attr].indexOf(']') > -1))
) {
try {
var attrObj = JSON.parse(obj[attr]);
if (attrObj instanceof Object) {
newObj[attr] = removeEmptyField(attrObj);
}
} catch (e) {
newObj[attr] = obj[attr];
}
} else {
newObj[attr] = obj[attr];
}
}
}
}
return newObj;
}
function stringifyNoEmptyField(obj: any) {
var newObj = removeEmptyField(obj);
for (var attr in newObj) {
if (newObj.hasOwnProperty(attr) && newObj[attr] instanceof Array) {
newObj[attr] = JSON.stringify(newObj[attr]);
}
}
return JSON.stringify(newObj);
}
return ( return (
<div style={{ width: "100%", minWidth: 1020, padding: 34, backgroundColor: "#ffffff" }}> <>
<TitleSearch listkey={['inviterAddress']} <div className="VisitorRecord">
list={['Community Name']} <Form
community={"serviceCommunityList"} autoComplete="off"
onSubmit={CallBackTitleSearch}/> layout="inline"
{Data!=null? form={form}
<Table name="contract"
loading={false} onFinish={onSubmitForm}
>
<Form.Item name="visitorsName">
<Input allowClear placeholder="Please input Visitor Name." style={{ width: 240 }} />
</Form.Item>
<Form.Item name="showTime">
<DatePicker format="YYYY-MM-DD" placeholder="Select Date" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" icon={<SearchOutlined />} loading={loading}>
Search{' '}
</Button>
<Button
htmlType="button"
onClick={onReset}
style={{ marginLeft: '15px' }}
icon={<ClearOutlined />}
loading={loading}
>
{' '}
Reset
</Button>
</Form.Item>
</Form>
</div>
<div style={{ width: '100%', padding: 16, backgroundColor: '#ffffff' }}>
<ProTable
loading={loading}
rowKey="id" rowKey="id"
style={{ marginTop: 16 }} dataSource={Data != null ? Data : ''}
dataSource={Data.rows}
columns={columns} columns={columns}
pagination={pagination} pagination={pagination}
// pagination={{ current: 1, total: Data.total}} // pagination={{ current: 1, total: Data.total}}
/>:null} search={false}
options={{
density: true,
fullScreen: true,
reload: () => {
onReset();
},
setting: false,
}}
headerTitle="Visitor List"
onReset={onResetFrom}
onSubmit={onSubmitForm}
/>
</div> </div>
</>
); );
}; };
function map(state:any) { function map(state: any) {
const { Data} = state[module] const { Data, DataSave } = state[module];
return { Data} const loading = state.loading.models.VisitorRecord;
return { Data, DataSave, loading };
} }
export default connect(map)(VisitorRecord); export default connect(map)(VisitorRecord);
// 备注 // 备注
......
src/pages/CommunityManagement/VisitorRecord/index.less 0 → 100644
View file @ c9dd3d6c
.ant-pro-table-search {
margin-bottom: 0;
padding: 15px;
}
.VisitorRecord {
padding: 15px;
background: #fff;
margin-bottom: 15px;
}
src/pages/CommunityManagement/visitorRecord/VisitorRecord.tsx
View file @ c9dd3d6c
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Input ,Tabs,Table,Space, Button} from 'antd'; import { Input, Tabs, Table, Form, Button, message, DatePicker } from 'antd';
const { TabPane } = Tabs; const { TabPane } = Tabs;
import { connect } from 'umi';
import {connect} from 'umi';
import { objectColumns } from '@/utils/string'; import { objectColumns } from '@/utils/string';
import ProTable from '@ant-design/pro-table';
import { RA, SA } from '@/utils/method';
import { PlusOutlined, SearchOutlined, ClearOutlined } from '@ant-design/icons';
import './index.less';
import moment from 'moment';
// cdkCode: 998974 const module = 'VisitorRecord';
// cdkStatus: "0"
// count: 0
// createTime: "Sep 7, 2020 6:12:35 PM"
// deleted: 0
// enable: 0
// extend: ""
// id: "8f8b49308c0b4fb4a0e6b9d6af0aaa1e"
// inviterAddress: "TANGDE2#01#01#01"
// inviterId: "2597108b72f64a5da34892c14f0e6a57"
// inviterName: "啊啊啊"
// inviterPhone: "2536727886@qq.com"
// linkStatus: 1
// numberPlate: "粤A465123"
// securityGuardCommunity: "unkown"
// securityGuardName: "unkown"
// securityGuardPhone: "unkown"
// status: 1
// updateTime: "Sep 7, 2020 6:13:06 PM"
// visitorsName: "销赃"
// visitorsPhone: "18535669865"
const columns = objectColumns( [
["User Name", "inviterName"],
["Visitor", "visitorsName"],
["Security Guard", "securityGuardName"],
["Number Plate", "numberPlate"],
["time", "updateTime"],
["community", "visitorCommunity"],
["unit", "inviterAddress"]
// ["Actions",null, (text: any, record: any) => (<Space size="middle"> <a>Detail</a></Space>)],
])
import TitleSearch from '@/components/TitleSearch/TitleSearch' const VisitorRecord = (props: any) => {
import { RA } from '@/utils/method'; const { dispatch, Data, DataSave, loading } = props;
const module="VisitorRecord"
const VisitorRecord = (props:any) => {
const { dispatch, Data } = props; useEffect(() => {
const TosVisitorRecordGet = (values: any) => { dispatch({ type: 'tosVisitorRecord/get', playload: values }) }; RA(26, { inviterAddress: '', visitorCommunity: '' }, module, dispatch);
}, [1]);
const TosVisitorRecordGet = (values: any) => {
dispatch({ type: 'tosVisitorRecord/get', playload: values });
};
// 新增搜索的时间 原来时间是时间戳格式
useEffect(() => { useEffect(() => {
RA(26,{inviterAddress: "", visitorCommunity: ""},module,dispatch) if (Data != null) {
}, []) Data.forEach((item: any) => {
item.showTime = moment(item.updateTime).format('YYYY-MM-DD');
});
}
}, [Data]);
// 表头
const columns: any = [
{ title: 'Invitees Name', dataIndex: 'inviterName' },
{ title: 'Visitor Name', dataIndex: 'visitorsName' },
{ title: 'Security Guard', dataIndex: 'securityGuardName' },
{ title: 'Number Plate', dataIndex: 'numberPlate' },
// 隐藏的搜索框
{ title: 'Visitor Time', hideInTable: true, dataIndex: 'showTime', valueType: 'date' },
{ title: 'Visitor Time', dataIndex: 'updateTime', valueType: 'date' },
{ title: 'Community', dataIndex: 'visitorCommunity' },
{ title: 'Unit', dataIndex: 'inviterAddress' },
// ["Actions",null, (text: any, record: any) => (<Space size="middle"> <a>Detail</a></Space>)],
];
const CallBackTitleSearch = (values:any) => { const CallBackTitleSearch = (values: any) => {
console.log(values) console.log(values);
// visitorCommunity // visitorCommunity
TosVisitorRecordGet({ TosVisitorRecordGet({
visitorCommunity: values.inviterAddress, visitorCommunity: values.inviterAddress,
}) });
};
const [form] = Form.useForm();
// 分页
const pagination: any = {
defaultCurrent: 1,
total: Data != null ? Data.length : 0,
defaultPageSize: 12,
showSizeChanger: false,
size: 'default',
};
// 搜索配置
// const searchInfo = {
// filterType: 'light',
// searchText: 'Search',
// resetText: 'Reset',
// };
// 多条件筛选
//@param condition 过滤条件
//@param data 需要过滤的数据
let filter = (condition: any, data: any) => {
return data.filter((item: any) => {
return Object.keys(condition).every((key) => {
return String(item[key])
.toLowerCase()
.includes(String(condition[key]).trim().toLowerCase());
});
});
};
// 点击搜索
const onSubmitForm = (value: any) => {
// 有的话需要先转换 否则会被清除
if (value.showTime) {
value.showTime = moment(value.showTime).format('YYYY-MM-DD');
}
// 清除 undefind
let info = JSON.parse(stringifyNoEmptyField(value));
if (JSON.stringify(info) == '{}') {
message.info('Please select a search');
} else {
if (info.showTime) {
info.showTime = moment(info.showTime).format('YYYY-MM-DD');
}
console.log(info);
let Datas = filter(info, DataSave);
SA(Datas, module, dispatch);
} }
const pagination={defaultCurrent:1,total: Data!=null?Data.length:0} };
// 点击重置
const onResetFrom = () => {
onReset();
};
// 刷新
const onReset = () => {
SA(DataSave, module, dispatch);
};
// 去掉null undefined 无效字段
function removeEmptyField(obj: any) {
var newObj = {};
if (typeof obj == 'string') {
obj = JSON.parse(obj);
}
if (obj instanceof Array) {
newObj = [];
}
if (obj instanceof Object) {
for (var attr in obj) {
if (
obj.hasOwnProperty(attr) &&
obj[attr] !== '' &&
obj[attr] !== null &&
obj[attr] !== undefined
) {
if (obj[attr] instanceof Object) {
newObj[attr] = removeEmptyField(obj[attr]);
} else if (
typeof obj[attr] == 'string' &&
((obj[attr].indexOf('{') > -1 && obj[attr].indexOf('}') > -1) ||
(obj[attr].indexOf('[') > -1 && obj[attr].indexOf(']') > -1))
) {
try {
var attrObj = JSON.parse(obj[attr]);
if (attrObj instanceof Object) {
newObj[attr] = removeEmptyField(attrObj);
}
} catch (e) {
newObj[attr] = obj[attr];
}
} else {
newObj[attr] = obj[attr];
}
}
}
}
return newObj;
}
function stringifyNoEmptyField(obj: any) {
var newObj = removeEmptyField(obj);
for (var attr in newObj) {
if (newObj.hasOwnProperty(attr) && newObj[attr] instanceof Array) {
newObj[attr] = JSON.stringify(newObj[attr]);
}
}
return JSON.stringify(newObj);
}
return ( return (
<div style={{ width: "100%", minWidth: 1020, padding: 34, backgroundColor: "#ffffff" }}> <>
<TitleSearch listkey={['inviterAddress']} <div className="VisitorRecord">
list={['Community Name']} <Form
community={"serviceCommunityList"} autoComplete="off"
onSubmit={CallBackTitleSearch}/> layout="inline"
{Data!=null? form={form}
<Table name="contract"
loading={false} onFinish={onSubmitForm}
>
<Form.Item name="visitorsName">
<Input allowClear placeholder="Please input Visitor Name." style={{ width: 240 }} />
</Form.Item>
<Form.Item name="showTime">
<DatePicker format="YYYY-MM-DD" placeholder="Select Date" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" icon={<SearchOutlined />} loading={loading}>
Search{' '}
</Button>
<Button
htmlType="button"
onClick={onReset}
style={{ marginLeft: '15px' }}
icon={<ClearOutlined />}
loading={loading}
>
{' '}
Reset
</Button>
</Form.Item>
</Form>
</div>
<div style={{ width: '100%', padding: 16, backgroundColor: '#ffffff' }}>
<ProTable
loading={loading}
rowKey="id" rowKey="id"
style={{ marginTop: 16 }} dataSource={Data != null ? Data : ''}
dataSource={Data.rows}
columns={columns} columns={columns}
pagination={pagination} pagination={pagination}
// pagination={{ current: 1, total: Data.total}} // pagination={{ current: 1, total: Data.total}}
/>:null} search={false}
options={{
density: true,
fullScreen: true,
reload: () => {
onReset();
},
setting: false,
}}
headerTitle="Visitor List"
onReset={onResetFrom}
onSubmit={onSubmitForm}
/>
</div> </div>
</>
); );
}; };
function map(state:any) { function map(state: any) {
const { Data} = state[module] const { Data, DataSave } = state[module];
return { Data} const loading = state.loading.models.VisitorRecord;
return { Data, DataSave, loading };
} }
export default connect(map)(VisitorRecord); export default connect(map)(VisitorRecord);
// 备注 // 备注
......
src/utils/tip.ts
View file @ c9dd3d6c
...@@ -12,7 +12,7 @@ export const tipList = [ ...@@ -12,7 +12,7 @@ export const tipList = [
// 小区提示 // 小区提示
export const village = [ export const village = [
[{ required: true, message: ' ' }], [{ required: true, message: 'Please select community' }],
[{ required: true, message: 'Please select working hours !' }], [{ required: true, message: 'Please select working hours !' }],
[{ required: true, message: 'Please enter the community administrator !' }], [{ required: true, message: 'Please enter the community administrator !' }],
[{ required: true, message: 'Please enter the phone number and email address !' }], [{ required: true, message: 'Please enter the phone number and email address !' }],
...@@ -21,8 +21,14 @@ export const village = [ ...@@ -21,8 +21,14 @@ export const village = [
//公告提示 //公告提示
export const Notice = [ export const Notice = [
[{ required: true, message: '小区' }], [{ required: true, message: 'Please select community' }],
[{ required: true, message: '标题' }], [{ required: true, message: 'Please input the notice title.' }],
[{ required: true, message: '内容' }], [{ required: true, message: 'Please input the announcement content.' }],
[{ required: true, message: '日期' }], [{ required: true, message: 'Please choose the effective time of the announcement.' }],
]; ];
// 时间
export const Time = {
hour: [1, 2],
minute: [],
};
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