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 './index.less';
import { Input, Button, Upload, Form, Select } from 'antd';
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 />
......@@ -14,8 +23,51 @@ const Facilitys = (props: any) => {
</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 (
<>
<Form.List
......@@ -33,32 +85,34 @@ const Facilitys = (props: any) => {
{(fields, { add, remove }, { errors }) => (
<>
{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="diy-box">
<div className={'test'}>
<div className={'diybox'}>
<Upload
fileList={fileList}
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
listType="picture-card"
style={{ display: 'inline-block', width: '110px' }}
// onPreview={this.handlePreview}
// onChange={this.handleChange}
fileList={fileList[field.key]}
data={carryData(field.key)}
{...uploadProps}
disabled={disabled}
>
{fileList.length >= 1 ? null : uploadButton}
{fileList[field.key].length >= 1 ? null : uploadButton}
</Upload>
<div className="name">
<div className={'Facility'}>
<Form.Item
label="Facility name"
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
label={`Facility Name ${index}`}
name={field.key}
rules={[{ required: true, message: 'Please input Facility Name!' }]}
>
<Input />
<Input placeholder="Facility Name" disabled={disabled} />
</Form.Item>
<div className="over">
<div className={'over'}>
{fields.length > 1 ? (
<Button type="link" onClick={() => remove(field.name)}>
<Button
type="link"
disabled={disabled}
onClick={() => remove(field.name)}
>
Delete
</Button>
) : null}
......@@ -68,15 +122,18 @@ const Facilitys = (props: any) => {
</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>
......
src/components/Facilitys/index.less
View file @ bf791811
.ant-form-item-control-input-content {
display: flex;
flex-wrap: wrap;
}
.test {
width: 240px;
display: inline-block;
display: flex;
margin-right: 20px;
.ant-upload-picture-card-wrapper {
width: 110px;
}
.diy-box {
width: 210px;
.ant-form-item {
margin-bottom: 5px;
}
.diybox {
display: flex;
justify-content: space-between;
.name {
width: 100px;
display: inline-block;
margin-left: 10px;
.ant-form-item {
margin-bottom: 5px;
}
}
.over {
text-align: center;
......
src/components/PictureOptions/PictureOptionsRow.tsx
View file @ bf791811
......@@ -21,7 +21,7 @@ const uploadButton = (
);
import { getUrlPicName } from '../../utils/string';
const PictureOptionsRow = (props: any) => {
const { value, onChange, limitNums } = props;
const { value, onChange, limitNums, over } = props;
const [fileList, setFileList] = useState([]);
const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage, setPreviewImage] = useState('');
......@@ -112,7 +112,7 @@ const PictureOptionsRow = (props: any) => {
const handleChange = ({ file, fileList }) => {
// 给传递的附加名字
props.data.fileName = fileList[0].name;
// props.data.fileName = fileList[0].name;
console.log(props.data);
console.log(fileList);
let tmp = fileList;
......@@ -144,7 +144,7 @@ const PictureOptionsRow = (props: any) => {
fileList={fileList}
onPreview={handlePreview}
onChange={handleChange}
disabled={props.disabled}
disabled={props.over}
beforeUpload={beforeUpload}
>
{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';
import { message } from 'antd';
import { Link, useIntl, connect, Dispatch, history } from 'umi';
import { routerRedux } from 'dva/router'
import { routerRedux } from 'dva/router';
import { printf } from '@/utils/log';
......@@ -12,59 +12,56 @@ export default {
Data: null,
Result: null,
DataSave: null,
DataSaveDetail:null,
DataSaveDetail: null,
},
reducers: {
returnPage(state, { Data}) {
returnPage(state, { Data }) {
return { ...state, Data };
},
returnResult(state, { Result}) {
return { ...state, Result};
returnResult(state, { Result }) {
return { ...state, Result };
},
returnDataSave(state, { DataSave }) {
return {...state,DataSave}
return { ...state, DataSave };
},
returnDataSaveDetail(state, { DataSaveDetail }) {
return {...state,DataSaveDetail}
return { ...state, DataSaveDetail };
},
},
effects: {
//标准请求
*RA({ playload }, { call, put }) {
const resp = yield call(service.RA, playload);
console.log(resp)
if (resp.code == 500||resp.error_code!="0000") {
}
if (resp.error_code != "0000") {
printf(playload, resp)
console.log(resp);
if (resp.code == 500 || resp.error_code != '0000') {
}
else {
if (resp.error_code != '0000') {
printf(playload, resp);
} else {
switch (playload.index) {
case 26: {
let Data = resp.data;
case 26:
{
// 总数据
let Data = resp.data.rows;
let DataSave = resp.data.rows;
yield put({ type: 'returnPage', Data });
} break;
yield put({ type: 'returnDataSave', DataSave });
}
break;
}
}
},
*ResultClear({ }, { put }) {
var tmp=null
yield put({type: 'returnResult', tmp} )
*ResultClear({}, { put }) {
var tmp = null;
yield put({ type: 'returnResult', tmp });
},
*SA({ playload }, { call, put }) {
var DataSave = playload
yield put({type: 'returnDataSave', DataSave} )
var Data = playload;
yield put({ type: 'returnPage', Data });
},
},
};
src/pages/CommunityManagement/CellList/Details.tsx
View file @ bf791811
......@@ -164,7 +164,8 @@ const Detail = (props: any) => {
<div className="item">
<label>Community Address：</label>
<span>
{detailData.rows.residentialAddress}&nbsp;
{detailData.rows.residentialAddress}&nbsp;&nbsp; SINGAPORE &nbsp;
{/* 这是去掉 新加坡 英文字段 */}
{detailData.rows.residentialZipCode.substring(
detailData.rows.residentialZipCode.length - 6,
detailData.rows.residentialZipCode.length,
......
src/pages/CommunityManagement/FacilityBookings/Facility.tsx
View file @ bf791811
......@@ -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) => {
console.log('Failed:', errorInfo);
};
......@@ -202,7 +197,11 @@ const Facility = (props: any) => {
formRef.current.setFieldsValue(tmp);
};
// 生成数组
// 监听是否选择了小区
const [imgOpen, setImgOpen] = useState(true);
const [ctyName, setCtyName] = useState(null);
// 生成数组 -- 时间
const createArray = (num: any) => {
var arr = [];
for (let i = 1; i < num; i++) {
......@@ -214,28 +213,47 @@ const Facility = (props: any) => {
}
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 [form] = Form.useForm();
// 选择小区名字并赋值
const opname = (value: any) => {
if (value) {
setImgOpen(false); // 允许图片上传
setCtyName(value); // 给小区赋值
form.setFieldsValue({
communityName: value, // 给表单赋值
});
} else {
// 设置是否能点击上传
setImgOpen(true);
}
};
return (
<div className={'base'}>
<div className={'base basediy'}>
{/* 头部组件v1.2 */}
<TitleBack title={PATHNAME} url={getUrlLast(location.pathname) + '?Facility=true'} />
<Form
ref={formRef}
form={form}
name="basic"
onFinish={onFinish}
onFinishFailed={onFinishFailed}
onValuesChange={onBillChange}
validateMessages={validateMessages}
>
{/* 选择小区 */}
<Form.Item label="Community" name="communityName">
<Input style={{ width: 240 }} placeholder="Community Name" />
<SearchOptionsCommnity
// ubmit={extendName}
opname={opname}
/>
</Form.Item>
{/* 设施名称 以及费用 */}
......@@ -266,10 +284,28 @@ const Facility = (props: any) => {
<hr></hr>
{/* 设施品类上传 */}
<Form.Item label="Facility Classification">
<Facilitys></Facilitys>
<Form.Item label="Facility Classification" className="flex">
<Facilitys
disabled={imgOpen}
updata={{
// userToken: token,
imageType: 'categoriesImageName',
extends: ctyName,
}}
></Facilitys>
</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">
......
src/pages/CommunityManagement/FacilityBookings/css/index.less
View file @ bf791811
......@@ -274,44 +274,55 @@
}
// 自定义
.ant-tabs > .ant-tabs-nav,
.ant-tabs > div > .ant-tabs-nav {
.basediy {
.ant-tabs > .ant-tabs-nav,
.ant-tabs > div > .ant-tabs-nav {
margin: 0;
}
hr {
border: 0;
height: 1px;
background: #eee;
margin-bottom: 24px;
}
.ant-input-group {
}
.flex {
.ant-form-item-control-input-content {
display: flex;
flex-wrap: wrap;
}
}
.ant-input-group {
display: flex;
.ant-form-item {
margin-right: 20px;
}
}
.diyspan {
}
.diyspan {
display: inline-block;
margin: 0 10px;
}
.diyp {
}
.diyp {
margin-bottom: 24px;
font-size: 18px;
color: #333;
font-weight: 500;
}
.ant-input-prefix,
.ant-input-suffix {
}
.ant-input-prefix,
.ant-input-suffix {
color: #888;
}
}
.ant-form-item-required,
.ant-form-item-label > label {
.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;
// }
}
.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 @ 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 { Input ,Tabs,Table,Space, Button} from 'antd';
import React, { useState, useEffect, useRef } from 'react';
import { Input, Tabs, Table, Form, Button, message, DatePicker } from 'antd';
const { TabPane } = Tabs;
import {connect} from 'umi';
import { connect } from 'umi';
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
// 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>)],
])
const module = 'VisitorRecord';
import TitleSearch from '@/components/TitleSearch/TitleSearch'
import { RA } from '@/utils/method';
const module="VisitorRecord"
const VisitorRecord = (props:any) => {
const VisitorRecord = (props: any) => {
const { dispatch, Data, DataSave, loading } = props;
const { dispatch, Data } = props;
const TosVisitorRecordGet = (values: any) => { dispatch({ type: 'tosVisitorRecord/get', playload: values }) };
useEffect(() => {
RA(26, { inviterAddress: '', visitorCommunity: '' }, module, dispatch);
}, [1]);
const TosVisitorRecordGet = (values: any) => {
dispatch({ type: 'tosVisitorRecord/get', playload: values });
};
// 新增搜索的时间 原来时间是时间戳格式
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) => {
console.log(values)
const CallBackTitleSearch = (values: any) => {
console.log(values);
// visitorCommunity
TosVisitorRecordGet({
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 (
<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}
<>
<div className="VisitorRecord">
<Form
autoComplete="off"
layout="inline"
form={form}
name="contract"
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"
style={{ marginTop: 16 }}
dataSource={Data.rows}
dataSource={Data != null ? Data : ''}
columns={columns}
pagination={pagination}
// 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>
</>
);
};
function map(state:any) {
const { Data} = state[module]
return { Data}
function map(state: any) {
const { Data, DataSave } = state[module];
const loading = state.loading.models.VisitorRecord;
return { Data, DataSave, loading };
}
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 { Input ,Tabs,Table,Space, Button} from 'antd';
import React, { useState, useEffect, useRef } from 'react';
import { Input, Tabs, Table, Form, Button, message, DatePicker } from 'antd';
const { TabPane } = Tabs;
import {connect} from 'umi';
import { connect } from 'umi';
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
// 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>)],
])
const module = 'VisitorRecord';
import TitleSearch from '@/components/TitleSearch/TitleSearch'
import { RA } from '@/utils/method';
const module="VisitorRecord"
const VisitorRecord = (props:any) => {
const VisitorRecord = (props: any) => {
const { dispatch, Data, DataSave, loading } = props;
const { dispatch, Data } = props;
const TosVisitorRecordGet = (values: any) => { dispatch({ type: 'tosVisitorRecord/get', playload: values }) };
useEffect(() => {
RA(26, { inviterAddress: '', visitorCommunity: '' }, module, dispatch);
}, [1]);
const TosVisitorRecordGet = (values: any) => {
dispatch({ type: 'tosVisitorRecord/get', playload: values });
};
// 新增搜索的时间 原来时间是时间戳格式
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) => {
console.log(values)
const CallBackTitleSearch = (values: any) => {
console.log(values);
// visitorCommunity
TosVisitorRecordGet({
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 (
<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}
<>
<div className="VisitorRecord">
<Form
autoComplete="off"
layout="inline"
form={form}
name="contract"
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"
style={{ marginTop: 16 }}
dataSource={Data.rows}
dataSource={Data != null ? Data : ''}
columns={columns}
pagination={pagination}
// 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>
</>
);
};
function map(state:any) {
const { Data} = state[module]
return { Data}
function map(state: any) {
const { Data, DataSave } = state[module];
const loading = state.loading.models.VisitorRecord;
return { Data, DataSave, loading };
}
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