Skip to content

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

访客记录重做，小区bug修复，设施预订动态新增待完善 

Signed-off-by: cellee's avatarcellee <893264950@qq.com>
parent 81903387
Show whitespace changes
Inline Side-by-side
Showing with 744 additions and 264 deletions
src/components/Facilitys/Facilitys.tsx
View file @ bf791811
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import './index.less'; import './index.less';
import { Input, Button, Upload, Form, Select } from 'antd'; import { Input, Button, Upload, Form, Select, message } from 'antd';
const { Option } = Select; const { Option } = Select;
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import { Link, useIntl, connect, Dispatch, history } from 'umi'; import { Link, useIntl, connect, Dispatch, history } from 'umi';
import { event } from '@/.umi/plugin-locale/locale';
const Facilitys = (props: any) => { const Facilitys = (props: any) => {
// //传递值
const { updata, disabled } = props;
console.log(disabled);
//上传列表
const [fileList, setFileList] = useState([[], [], [], [], []]);
// 新增按钮
const uploadButton = ( const uploadButton = (
<div> <div>
<PlusOutlined /> <PlusOutlined />
...@@ -14,8 +23,51 @@ const Facilitys = (props: any) => { ...@@ -14,8 +23,51 @@ const Facilitys = (props: any) => {
</div> </div>
); );
// 列表 // 上传属性
const fileList: any = []; 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 ( return (
<> <>
<Form.List <Form.List
...@@ -33,32 +85,34 @@ const Facilitys = (props: any) => { ...@@ -33,32 +85,34 @@ const Facilitys = (props: any) => {
{(fields, { add, remove }, { errors }) => ( {(fields, { add, remove }, { errors }) => (
<> <>
{fields.map((field, index) => ( {fields.map((field, index) => (
<Form.Item required={false} key={field.key}> <Form.Item required={false} key={field.key} style={{ marginBottom: 0 }}>
{/* 每一个上传的组件 */} {/* 每一个上传的组件 */}
<div className="test"> <div className={'test'}>
<div className="diy-box"> <div className={'diybox'}>
<Upload <Upload
fileList={fileList} fileList={fileList[field.key]}
action="https://www.mocky.io/v2/5cc8019d300000980a055e76" data={carryData(field.key)}
listType="picture-card" {...uploadProps}
style={{ display: 'inline-block', width: '110px' }} disabled={disabled}
// onPreview={this.handlePreview}
// onChange={this.handleChange}
> >
{fileList.length >= 1 ? null : uploadButton} {fileList[field.key].length >= 1 ? null : uploadButton}
</Upload> </Upload>
<div className="name"> <div className={'Facility'}>
<Form.Item <Form.Item
label="Facility name" label={`Facility Name ${index}`}
name="username" name={field.key}
rules={[{ required: true, message: 'Please input your username!' }]} rules={[{ required: true, message: 'Please input Facility Name!' }]}
> >
<Input /> <Input placeholder="Facility Name" disabled={disabled} />
</Form.Item> </Form.Item>
<div className="over"> <div className={'over'}>
{fields.length > 1 ? ( {fields.length > 1 ? (
<Button type="link" onClick={() => remove(field.name)}> <Button
type="link"
disabled={disabled}
onClick={() => remove(field.name)}
>
Delete Delete
</Button> </Button>
) : null} ) : null}
...@@ -68,15 +122,18 @@ const Facilitys = (props: any) => { ...@@ -68,15 +122,18 @@ const Facilitys = (props: any) => {
</div> </div>
</Form.Item> </Form.Item>
))} ))}
{fields.length < 5 ? (
<Form.Item> <Form.Item>
<Button <Button
type="dashed" type="dashed"
onClick={() => add()} onClick={() => add()}
style={{ width: '100px', height: '100px' }} style={{ width: '100px', height: '100px' }}
icon={<PlusOutlined />} icon={<PlusOutlined />}
disabled={disabled}
></Button> ></Button>
<Form.ErrorList errors={errors} /> <Form.ErrorList errors={errors} />
</Form.Item> </Form.Item>
) : null}
</> </>
)} )}
</Form.List> </Form.List>
......
src/components/Facilitys/index.less
View file @ bf791811
.ant-form-item-control-input-content {
display: flex;
flex-wrap: wrap;
}
.test { .test {
width: 240px; width: 240px;
display: inline-block; display: flex;
margin-right: 20px; margin-right: 20px;
.ant-upload-picture-card-wrapper { .ant-upload-picture-card-wrapper {
width: 110px; width: 110px;
} }
.diy-box { .ant-form-item {
width: 210px; margin-bottom: 5px;
}
.diybox {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.name { .name {
width: 100px; width: 100px;
display: inline-block; display: inline-block;
margin-left: 10px; margin-left: 10px;
.ant-form-item {
margin-bottom: 5px;
}
} }
.over { .over {
text-align: center; text-align: center;
......
src/components/PictureOptions/PictureOptionsRow.tsx
View file @ bf791811
...@@ -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('');
...@@ -112,7 +112,7 @@ const PictureOptionsRow = (props: any) => { ...@@ -112,7 +112,7 @@ const PictureOptionsRow = (props: any) => {
const handleChange = ({ file, fileList }) => { const handleChange = ({ file, fileList }) => {
// 给传递的附加名字 // 给传递的附加名字
props.data.fileName = fileList[0].name; // props.data.fileName = fileList[0].name;
console.log(props.data); console.log(props.data);
console.log(fileList); console.log(fileList);
let tmp = fileList; let tmp = fileList;
...@@ -144,7 +144,7 @@ const PictureOptionsRow = (props: any) => { ...@@ -144,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/VisitorRecord.ts
View file @ bf791811
...@@ -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/Details.tsx
View file @ bf791811
...@@ -164,7 +164,8 @@ const Detail = (props: any) => { ...@@ -164,7 +164,8 @@ 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.residentialAddress}&nbsp;&nbsp; SINGAPORE &nbsp;
{/* 这是去掉 新加坡 英文字段 */}
{detailData.rows.residentialZipCode.substring( {detailData.rows.residentialZipCode.substring(
detailData.rows.residentialZipCode.length - 6, detailData.rows.residentialZipCode.length - 6,
detailData.rows.residentialZipCode.length, detailData.rows.residentialZipCode.length,
......
src/pages/CommunityManagement/FacilityBookings/Facility.tsx
View file @ bf791811
...@@ -172,11 +172,6 @@ const Facility = (props: any) => { ...@@ -172,11 +172,6 @@ const Facility = (props: any) => {
} }
}; };
const onBillChange = (values: any, allValues: any) => {
if (values['communityName'] != null) {
setExtend(values['communityName']);
}
};
const onFinishFailed = (errorInfo: any) => { const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo); console.log('Failed:', errorInfo);
}; };
...@@ -202,7 +197,11 @@ const Facility = (props: any) => { ...@@ -202,7 +197,11 @@ const Facility = (props: any) => {
formRef.current.setFieldsValue(tmp); formRef.current.setFieldsValue(tmp);
}; };
// 生成数组 // 监听是否选择了小区
const [imgOpen, setImgOpen] = useState(true);
const [ctyName, setCtyName] = useState(null);
// 生成数组 -- 时间
const createArray = (num: any) => { const createArray = (num: any) => {
var arr = []; var arr = [];
for (let i = 1; i < num; i++) { for (let i = 1; i < num; i++) {
...@@ -214,28 +213,47 @@ const Facility = (props: any) => { ...@@ -214,28 +213,47 @@ const Facility = (props: any) => {
} }
return arr; return arr;
}; };
const Option = Select.Option;
//小时 //小时
const hourS = createArray(24).map((item) => <option key={item}>{`${item}:00`}</option>); const hourS = createArray(24).map((item) => (
<Option value={item} key={item}>{`${item}:00`}</Option>
));
// 列表 // 图片列表
const fileList: any = []; 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 ( return (
<div className={'base'}> <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 <Form
ref={formRef} ref={formRef}
form={form}
name="basic" name="basic"
onFinish={onFinish} onFinish={onFinish}
onFinishFailed={onFinishFailed} onFinishFailed={onFinishFailed}
onValuesChange={onBillChange}
validateMessages={validateMessages} validateMessages={validateMessages}
> >
{/* 选择小区 */} {/* 选择小区 */}
<Form.Item label="Community" name="communityName"> <Form.Item label="Community" name="communityName">
<Input style={{ width: 240 }} placeholder="Community Name" /> <SearchOptionsCommnity
// ubmit={extendName}
opname={opname}
/>
</Form.Item> </Form.Item>
{/* 设施名称 以及费用 */} {/* 设施名称 以及费用 */}
...@@ -266,10 +284,28 @@ const Facility = (props: any) => { ...@@ -266,10 +284,28 @@ const Facility = (props: any) => {
<hr></hr> <hr></hr>
{/* 设施品类上传 */} {/* 设施品类上传 */}
<Form.Item label="Facility Classification"> <Form.Item label="Facility Classification" className="flex">
<Facilitys></Facilitys> <Facilitys
disabled={imgOpen}
updata={{
// userToken: token,
imageType: 'categoriesImageName',
extends: ctyName,
}}
></Facilitys>
</Form.Item> </Form.Item>
{/* 设施详情上传 */} {/* 设施详情上传 */}
<Form.Item name="categoriesDetailsImageName" label="Facility Details">
<PictureOptionsRow
over={imgOpen}
data={{
userToken: token,
imageType: 'categoriesDetailsImageName',
extends: ctyName,
}}
/>
</Form.Item>
{/* 时间 */} {/* 时间 */}
<Form.Item label="Opening Hours"> <Form.Item label="Opening Hours">
......
src/pages/CommunityManagement/FacilityBookings/css/index.less
View file @ bf791811
...@@ -274,44 +274,55 @@ ...@@ -274,44 +274,55 @@
} }
// 自定义 // 自定义
.ant-tabs > .ant-tabs-nav, .basediy {
.ant-tabs > div > .ant-tabs-nav { .ant-tabs > .ant-tabs-nav,
.ant-tabs > div > .ant-tabs-nav {
margin: 0; margin: 0;
} }
hr {
border: 0; .flex {
height: 1px; .ant-form-item-control-input-content {
background: #eee; display: flex;
margin-bottom: 24px; flex-wrap: wrap;
} }
.ant-input-group { }
.ant-input-group {
display: flex; display: flex;
.ant-form-item { .ant-form-item {
margin-right: 20px; margin-right: 20px;
} }
} }
.diyspan { .diyspan {
display: inline-block; display: inline-block;
margin: 0 10px; margin: 0 10px;
} }
.diyp { .diyp {
margin-bottom: 24px; margin-bottom: 24px;
font-size: 18px; font-size: 18px;
color: #333; color: #333;
font-weight: 500; font-weight: 500;
} }
.ant-input-prefix, .ant-input-prefix,
.ant-input-suffix { .ant-input-suffix {
color: #888; color: #888;
} }
.ant-form-item-required, .ant-form-item-required,
.ant-form-item-label > label { .ant-form-item-label > label {
min-width: 100px; min-width: 100px;
text-align: right; text-align: right;
}
// .ant-form-item-control-input-content {
// display: flex;
// flex-wrap: wrap;
// }
} }
.ant-form-item-control-input-content { hr {
display: flex; border: 0;
flex-wrap: wrap; height: 1px;
background: #eee;
margin-bottom: 24px;
} }
src/pages/CommunityManagement/VisitorRecord/VisitorRecord copy.tsx 0 → 100644
View file @ bf791811
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 @ bf791811
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 @ bf791811
.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 @ bf791811
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);
// 备注 // 备注
......
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