Commit 1867a7fc authored by cellee's avatar cellee

新增小区重构、编辑公司信息

Signed-off-by: cellee's avatarcellee <893264950@qq.com>
parent e4f72d22
...@@ -96,5 +96,10 @@ export default { ...@@ -96,5 +96,10 @@ export default {
changeOrigin: true, changeOrigin: true,
pathRewrite: { '^': '' }, pathRewrite: { '^': '' },
}, },
// '/tos/': {
// target: 'https://8eqzf3.39nat.com',
// changeOrigin: true,
// pathRewrite: { '^': '' },
// },
}, },
}; };
/* /*
* @Author: your name * @Author: your name
* @Date: 2021-02-01 14:54:48 * @Date: 2021-02-01 14:54:48
* @LastEditTime: 2021-02-18 16:48:37 * @LastEditTime: 2021-02-20 15:59:43
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: \tostumi\src\components\Form\PdfUpload.tsx * @FilePath: \tostumi\src\components\Form\PdfUpload.tsx
*/ */
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import { Input, Upload, message, Button, Modal, Pagination } from 'antd'; import { Input, Upload, message, Button, Modal, Pagination } from 'antd';
import { import {
LoadingOutlined, LoadingOutlined,
...@@ -17,15 +17,22 @@ import { ...@@ -17,15 +17,22 @@ import {
import PDF from 'react-pdf-js'; import PDF from 'react-pdf-js';
import './zip.less';
interface PriceInputProps { interface PriceInputProps {
value?: any; detailvalue?: any;
onChange?: any; onChange?: any;
disabled?: any; // 禁用状态 disabled?: any; // 禁用状态
action?: any; // 传递地址 action?: any; // 传递地址
data?: any; // 附带数据 data?: any; // 附带数据
} }
const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled, action, data }) => { const PdfUpload: React.FC<PriceInputProps> = ({
detailvalue,
onChange,
disabled,
action,
data,
}) => {
const [loading, setLoading] = useState([false, false, false, false, false]); // 上传中控制 const [loading, setLoading] = useState([false, false, false, false, false]); // 上传中控制
const [idx, setIdx] = useState(0); // 点击的第几个 const [idx, setIdx] = useState(0); // 点击的第几个
const [imgList, setImgList] = useState([] as any); // 列表 const [imgList, setImgList] = useState([] as any); // 列表
...@@ -36,6 +43,54 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled, ...@@ -36,6 +43,54 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled,
const [numPages, setNumPages] = useState(1 as any); // 总页码数 const [numPages, setNumPages] = useState(1 as any); // 总页码数
const [pageNumber, setPageNumber] = useState(1); // 当前页码数 const [pageNumber, setPageNumber] = useState(1); // 当前页码数
// 默认值
useEffect(() => {
if (detailvalue) {
let obj = [] as any;
for (let i in detailvalue) {
let item = {
id: i,
name: detailvalue[i].description,
fileList: [
{
uid: i,
name: detailvalue[i].pdfName,
status: 'done',
url: detailvalue[i].pdfUrl,
},
],
tip: false,
message: 'Required',
};
// 抽取相同的属性合并
if (obj.length > 0) {
let filterValue = obj.filter((v: any) => {
return v.name == detailvalue[i].description;
});
if (filterValue.length > 0) {
obj.forEach((n: any) => {
if (n.name == detailvalue[i].description) {
n.fileList.push({
uid: i,
name: detailvalue[i].pdfName,
status: 'done',
url: detailvalue[i].pdfUrl,
});
}
});
} else {
obj.push(item);
}
} else {
obj.push(item);
}
}
setImgList([...obj]);
onChange && onChange(obj);
}
}, [detailvalue]);
// 上传前检测 // 上传前检测
function beforeUpload(file: any) { function beforeUpload(file: any) {
const isJpgOrPng = file.type === 'application/pdf' || file.type === 'pdf'; const isJpgOrPng = file.type === 'application/pdf' || file.type === 'pdf';
...@@ -124,12 +179,12 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled, ...@@ -124,12 +179,12 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled,
// 删除的按钮 // 删除的按钮
const del = (index: any) => { const del = (index: any) => {
let list = JSON.parse(JSON.stringify(imgList)); if (!disabled) {
list.splice(index, 1); let list = JSON.parse(JSON.stringify(imgList));
list.splice(index, 1);
setImgList([...list]); setImgList([...list]);
onChange && onChange(list);
onChange && onChange(list); }
}; };
//携带数据 、 传递给后台加 key //携带数据 、 传递给后台加 key
...@@ -218,6 +273,8 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled, ...@@ -218,6 +273,8 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled,
onChange={inpChange} onChange={inpChange}
id={index} id={index}
value={item.name} value={item.name}
disabled={disabled}
maxLength={30}
/> />
{item.tip ? <span className="tips">{item.message}</span> : null} {item.tip ? <span className="tips">{item.message}</span> : null}
</div> </div>
...@@ -241,6 +298,7 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled, ...@@ -241,6 +298,7 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled,
// id={index} // id={index}
iconRender={icons} // 上传成功后的图标 iconRender={icons} // 上传成功后的图标
disabled={disabled}
> >
{item.fileList && item.fileList.length >= 5 ? null : ( {item.fileList && item.fileList.length >= 5 ? null : (
<div> <div>
...@@ -250,12 +308,16 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled, ...@@ -250,12 +308,16 @@ const PdfUpload: React.FC<PriceInputProps> = ({ value = {}, onChange, disabled,
</div> </div>
)} )}
</Upload> </Upload>
<MinusCircleOutlined
className="pdf-icon" {/* 可以编辑才能出来 */}
onClick={() => { {disabled ? null : (
del(index); <MinusCircleOutlined
}} className="pdf-icon"
/> onClick={() => {
del(index);
}}
/>
)}
</div> </div>
</div> </div>
); );
......
/* /*
* @Author: your name * @Author: your name
* @Date: 2021-01-30 16:16:41 * @Date: 2021-01-30 16:16:41
* @LastEditTime: 2021-02-01 15:12:24 * @LastEditTime: 2021-02-20 11:32:44
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: \tostumi\src\components\Form\ZipCode.tsx * @FilePath: \tostumi\src\components\Form\ZipCode.tsx
*/ */
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import { Input } from 'antd'; import { Input } from 'antd';
import './zip.less'; import './zip.less';
...@@ -20,22 +20,48 @@ interface PriceValue { ...@@ -20,22 +20,48 @@ interface PriceValue {
interface PriceInputProps { interface PriceInputProps {
value?: PriceValue; value?: PriceValue;
onChange?: (value: PriceValue) => void; onChange?: (value: PriceValue) => void;
insdInps?: any; disabled?: any;
LoseFocus?: any;
defaultvalue?: any;
} }
const ZipCode: React.FC<PriceInputProps> = ({ value = {}, onChange, insdInps }) => { // disabled 是否禁止修改 LoseFocus 监听小区名称更改 onChange 数据变化触发表单验证 value 默认值
const ZipCode: React.FC<PriceInputProps> = ({
value = {},
onChange,
disabled,
LoseFocus,
defaultvalue,
}) => {
const [details, setDetails] = useState(null as any); // 详情
useEffect(() => {
if (defaultvalue) {
setDetails({ ...defaultvalue });
}
}, [defaultvalue]);
const triggerChange = (changedValue: any) => { const triggerChange = (changedValue: any) => {
console.log(changedValue);
if (onChange) { if (onChange) {
onChange({ ...value, ...changedValue }); onChange({ ...value, ...changedValue });
} }
if (changedValue.residentialName) {
insdInps(changedValue.residentialName);
}
}; };
const onNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => { const onNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
triggerChange({ [e.target.name]: e.target.value }); triggerChange({ [e.target.name]: e.target.value });
let obj = {
[e.target.name]: e.target.value,
};
if (e.target.name == 'residentialZipCode' && e.target.value.length > 6) {
return false;
}
setDetails({ ...defaultvalue, ...value, ...obj });
};
const onblurs = (v: any) => {
LoseFocus(v.target.value);
}; };
return ( return (
...@@ -49,6 +75,15 @@ const ZipCode: React.FC<PriceInputProps> = ({ value = {}, onChange, insdInps }) ...@@ -49,6 +75,15 @@ const ZipCode: React.FC<PriceInputProps> = ({ value = {}, onChange, insdInps })
onChange={onNumberChange} onChange={onNumberChange}
style={{ marginRight: '10px', width: 120 }} style={{ marginRight: '10px', width: 120 }}
placeholder="6 Postcode" placeholder="6 Postcode"
disabled={disabled}
value={
details && details.residentialZipCode
? details.residentialZipCode.substring(
details.residentialZipCode.length - 6,
details.residentialZipCode.length,
)
: null
}
/> />
<Input <Input
...@@ -58,6 +93,8 @@ const ZipCode: React.FC<PriceInputProps> = ({ value = {}, onChange, insdInps }) ...@@ -58,6 +93,8 @@ const ZipCode: React.FC<PriceInputProps> = ({ value = {}, onChange, insdInps })
onChange={onNumberChange} onChange={onNumberChange}
style={{ width: '360px' }} style={{ width: '360px' }}
placeholder="Please enter community adds" placeholder="Please enter community adds"
disabled={disabled}
value={details ? details.residentialAddress : null}
/> />
</div> </div>
...@@ -69,7 +106,15 @@ const ZipCode: React.FC<PriceInputProps> = ({ value = {}, onChange, insdInps }) ...@@ -69,7 +106,15 @@ const ZipCode: React.FC<PriceInputProps> = ({ value = {}, onChange, insdInps })
onChange={onNumberChange} onChange={onNumberChange}
style={{ marginRight: '10px', width: '240px' }} style={{ marginRight: '10px', width: '240px' }}
placeholder="Please enter community name" placeholder="Please enter community name"
onBlur={onblurs}
disabled={disabled}
value={details ? details.residentialName : null}
/> />
{disabled ? (
<span className="tip">There are attachments and no modifications are allowed.</span>
) : (
''
)}
</div> </div>
</span> </span>
); );
......
...@@ -5,6 +5,11 @@ ...@@ -5,6 +5,11 @@
margin-bottom: 5px; margin-bottom: 5px;
} }
.tip {
font-size: 14px;
color: #f00;
}
// pdf上传 // pdf上传
.pdf { .pdf {
......
...@@ -17,7 +17,7 @@ function getBase64(file: File) { ...@@ -17,7 +17,7 @@ function getBase64(file: File) {
import { getUrlPicName } from '../../utils/string'; import { getUrlPicName } from '../../utils/string';
import { connect } from 'umi'; import { connect } from 'umi';
const PictureOptionsRow = (props: any) => { const PictureOptionsRow = (props: any) => {
const { value, onChange, limitNums, imgs, loadding, dispatch } = props; const { value, onChange, limitNums, imgs, loadding, dispatch, CommunityValue } = props;
const [fileList, setFileList] = useState([] as any); const [fileList, setFileList] = useState([] as any);
const [previewVisible, setPreviewVisible] = useState(false); const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage, setPreviewImage] = useState(''); const [previewImage, setPreviewImage] = useState('');
...@@ -55,6 +55,22 @@ const PictureOptionsRow = (props: any) => { ...@@ -55,6 +55,22 @@ const PictureOptionsRow = (props: any) => {
} }
}, [value]); }, [value]);
// 小区的banner
useEffect(() => {
if (CommunityValue) {
let arr = [] as any;
let obj = {
uid: CommunityValue.id || 0,
name: CommunityValue.bannerName || 'lose',
status: 'done',
url: CommunityValue.bannerUrl,
};
arr.push(obj);
setFileList(arr);
onChange && onChange(arr);
}
}, [CommunityValue]);
useEffect(() => { useEffect(() => {
if (imgs != null) { if (imgs != null) {
setFileList(imgs); setFileList(imgs);
......
...@@ -18,6 +18,8 @@ export default { ...@@ -18,6 +18,8 @@ export default {
SubResult: null, // 结果 SubResult: null, // 结果
Info: null, // 二级管辖小区和权限 Info: null, // 二级管辖小区和权限
Means: null,
}, },
reducers: { reducers: {
...@@ -26,6 +28,11 @@ export default { ...@@ -26,6 +28,11 @@ export default {
return { ...state, Info }; return { ...state, Info };
}, },
// 公司资料
returnMeans(state, { Means }) {
return { ...state, Means };
},
returnPage(state, { Data }) { returnPage(state, { Data }) {
return { ...state, Data }; return { ...state, Data };
}, },
...@@ -123,6 +130,20 @@ export default { ...@@ -123,6 +130,20 @@ export default {
yield put({ type: 'returnInfo', Info }); yield put({ type: 'returnInfo', Info });
} }
break; break;
case 65: // 编辑公司信息
{
let Means = null;
yield put({ type: 'returnMeans', Means });
}
break;
case 66: // 获取公司信息
{
let Means = resp.data;
yield put({ type: 'returnMeans', Means });
}
break;
} }
} }
}, },
......
...@@ -65,9 +65,9 @@ export default { ...@@ -65,9 +65,9 @@ export default {
} }
break; break;
case 29: // 小区新增编辑 case 29: // 小区新增编辑
case 63: // 小区新增编辑(新接口)
{ {
let Result = resp; let Result = resp;
yield put({ type: 'returnResult', Result });
// 新增成功清空Data 用来刷新最新数据 // 新增成功清空Data 用来刷新最新数据
let Data = null; let Data = null;
let village = null; let village = null;
...@@ -79,6 +79,7 @@ export default { ...@@ -79,6 +79,7 @@ export default {
} }
break; break;
case 32: // 获取小区详情 case 32: // 获取小区详情
case 64: // 获取小区详情
{ {
let detailData = resp.data; let detailData = resp.data;
yield put({ type: 'returnDataSaveDetail', detailData }); yield put({ type: 'returnDataSaveDetail', detailData });
...@@ -133,5 +134,10 @@ export default { ...@@ -133,5 +134,10 @@ export default {
var DataSave = playload; var DataSave = playload;
yield put({ type: 'returnDataSave', DataSave }); yield put({ type: 'returnDataSave', DataSave });
}, },
*delRemove({ playload }, { call, put }) {
var detailData = null;
yield put({ type: 'returnDataSaveDetail', detailData });
},
}, },
}; };
/* /*
* @Author: your name * @Author: your name
* @Date: 2020-11-19 16:54:53 * @Date: 2020-11-19 16:54:53
* @LastEditTime: 2021-01-30 15:54:42 * @LastEditTime: 2021-02-20 18:27:10
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: \tostumi\src\pages\AccountManagement\CompanyInformation\CompanyInformation.tsx * @FilePath: \tostumi\src\pages\AccountManagement\CompanyInformation\CompanyInformation.tsx
*/ */
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { LeftOutlined, EditOutlined } from '@ant-design/icons';
import { Input, Form, Button, Spin } from 'antd';
import { connect } from 'umi';
import styles from './index.less'; import styles from './index.less';
import { Input, Menu, Table, Space, Pagination, Tooltip, Button } from 'antd';
import { Link, useIntl, connect, Dispatch } from 'umi'; const CompanyInformation = (props: any) => {
const { dispatch, Means, loading } = props;
const [ModelExcel, setModelExcel] = useState(false); //编辑状态
//请求
const RA = (index: any, values: any) => {
dispatch({ type: 'Account/RA', playload: { index: index, body: values } });
};
const [form] = Form.useForm(); // 表单标识
useEffect(() => {
if (Means != null) {
form.setFieldsValue({
companyName: Means.companyName,
companyPhone: Means.companyPhone,
companyEmail: Means.companyEmail,
});
} else {
setModelExcel(false);
RA(66, {});
}
}, [Means]);
// 编辑切换
const goToReturn = () => {
setModelExcel(!ModelExcel);
};
//表单提交
const onFinish = (values: any) => {
values.id = Means.id;
console.log('Success:', values);
RA(65, values);
};
const CompanyInformation = () => {
return ( return (
<div className={styles.base}> <Spin spinning={loading}>
<div className={styles.box1}> <div className={styles.base}>
<div className={styles.box1item1}>Management Company :</div> <div className={styles.box}>
<div style={{ position: 'absolute', left: 160 }}> <div className={styles.item1}>Company Information</div>
<p>TOS Pte Ltd</p>
{/* <Input style={{ width: 200 }} value="TOS Pte Ltd" /> */}
</div>
{/* <div className={styles.box1item3}> <Button>Edit</Button></div> */}
</div>
<div className={styles.box2}> {ModelExcel ? (
<div className={styles.box2item1}>Contact Number :</div> <Button onClick={goToReturn}>
<div className={styles.box2item2}> <LeftOutlined />
<p>67441692</p> Back
{/* <Input style={{ width: 200 }} value="67441692" /> */} </Button>
</div> ) : (
</div> <Button onClick={goToReturn}>
<div className={styles.box2}> <EditOutlined />
<div className={styles.box2item1}>Contact Email :</div> Edit
<div className={styles.box2item2}> </Button>
<p>admin.tos@crems.com.sg</p> )}
{/* <Input style={{ width: 200 }} value="admin.tos@crems.com.sg" /> */}
</div> </div>
<Form name="basic" form={form} onFinish={onFinish}>
<div className={styles.box1}>
<div className={styles.box1item1}>Management Company :</div>
<div style={{ position: 'absolute', left: 160 }}>
<p>{Means ? Means.companyName : null}</p>
{/* <Input style={{ width: 200 }} value="TOS Pte Ltd" /> */}
<Form.Item label="" name="companyName" style={{ display: 'none' }}>
<Input value="TOS Pte Ltd" />
</Form.Item>
</div>
{/* <div className={styles.box1item3}> <Button>Edit</Button></div> */}
</div>
<div className={styles.box2}>
<div className={styles.box2item1}>Contact Number :</div>
<div className={styles.box2item2}>
{ModelExcel ? (
<Form.Item
label=""
name="companyPhone"
rules={[{ required: true, message: 'Please input companyPhone!' }]}
>
<Input maxLength={11} />
</Form.Item>
) : (
<p>{Means ? Means.companyPhone : null}</p>
)}
{/* <Input style={{ width: 200 }} value="67441692" /> */}
</div>
</div>
<div className={styles.box2}>
<div className={styles.box2item1}>Contact Email :</div>
<div className={styles.box2item2}>
{ModelExcel ? (
<Form.Item
label=""
name="companyEmail"
rules={[{ required: true, message: 'Please input companyEmail!' }]}
>
<Input />
</Form.Item>
) : (
<p>{Means ? Means.companyEmail : null}</p>
)}
{/* <Input style={{ width: 200 }} value="admin.tos@crems.com.sg" /> */}
</div>
</div>
{ModelExcel ? (
<div>
<hr></hr>
<Button type="primary" htmlType="submit" loading={loading}>
Submit
</Button>
</div>
) : (
''
)}
</Form>
</div> </div>
</div> </Spin>
); );
}; };
export default CompanyInformation; const Company = (styte: any) => {
const { Means } = styte.Account;
const loading = styte.loading.models.Account || false;
return {
Means,
loading,
};
};
export default connect(Company)(CompanyInformation);
...@@ -4,9 +4,28 @@ ...@@ -4,9 +4,28 @@
.base { .base {
width: 100%; width: 100%;
background-color: #ffffff; background-color: #ffffff;
padding: 30px 30px 10px; padding: 20px;
input {
width: 240px;
}
}
.box {
width: 100%;
height: 34px;
position: relative;
margin-bottom: 30px;
display: flex;
justify-content: space-between;
align-items: center;
.item1 {
text-indent: 15px;
border-left: 5px solid rgb(24, 144, 255);
font-family: 'Source Han Sans CN';
font-size: 18px;
font-weight: 600;
color: rgb(0, 0, 0);
}
} }
.box1 { .box1 {
width: 100%; width: 100%;
height: 34px; height: 34px;
...@@ -38,3 +57,10 @@ ...@@ -38,3 +57,10 @@
position: absolute; position: absolute;
left: 158px; left: 158px;
} }
hr {
border: 0;
height: 1px;
background: #eee;
margin-bottom: 24px;
}
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import { LeftOutlined, EditOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons'; import { LeftOutlined, EditOutlined } from '@ant-design/icons';
import { import { Form, Input, Button, TimePicker, Checkbox, Spin } from 'antd';
Form,
Input,
Image,
Button,
TimePicker,
Checkbox,
Upload,
message,
Spin,
Modal,
Pagination,
} from 'antd';
// 样式 // 样式
import './celllist.less'; import './celllist.less';
import { RA } from '@/utils/method'; import { RA } from '@/utils/method';
...@@ -23,84 +11,84 @@ import { village } from '@/utils/tip'; ...@@ -23,84 +11,84 @@ import { village } from '@/utils/tip';
import moment from 'moment'; import moment from 'moment';
import { getNumber } from '@/utils/string'; // 正则 import { getNumber } from '@/utils/string'; // 正则
import FileViewer from 'react-file-viewer'; import PictureOptionsRow from '@/components/PictureOptions/PictureOptionsRow'; // banner 上传
import PDF from 'react-pdf-js'; import Facilities from '@/components/Form/ZipCode'; // 小区邮编地址名称
import PdfUpload from '@/components/Form/PdfUpload'; // 多图上传
const { RangePicker } = TimePicker; const { RangePicker } = TimePicker;
const Adds = (props: any) => { const Adds = (props: any) => {
const module = 'CellList'; const module = 'CellList';
const { Data, dispatch, loading, imgUrl, Result } = props; const { Data, detailData, dispatch, loading, imgUrl, Result } = props;
const [form] = Form.useForm(); const [form] = Form.useForm();
const [PropertyFee, setPropertyFee] = useState(['1']); // 表单物业费提交值 const [PropertyFee, setPropertyFee] = useState(['1']); // 表单物业费提交值
const [codename, setCodeName] = useState(null); // 监听用户填写小区名
const [loubaUpload, setLouba] = useState([] as any); // 楼巴上传列表 const [tips, setTips] = useState([false, false, false]); // 三个自定义上传的提示
const [guideUpload, setGuide] = useState([] as any); // 物业办事指南列表 const [forms, setForms] = useState(false); // 第三个上传开关
const [periodUpload, setPeriod] = useState([] as any); // 保质期服务列表
// 监听用户填写小区名 以及后续禁止输入 提示信息 const [codeStrat, setcodeStrat] = useState(true); // 是否开放上传 默认没填写不允许
const [codename, setCodeName] = useState(''); const [info, setInfo] = useState(false); // 是否允许更改小区邮编地址名称 默认可以
const [codeStrat, setcodeStrat] = useState(false);
const [tipMain, setTipMain] = useState('');
const [previewVisible, setpreviewVisible] = useState(false); // 预览弹窗显示隐藏 const [banners, setBanners] = useState(null as any); // bannner
const [previewImage, setpreviewImage] = useState({} as any); // 预览图片信息
//pdf 页码内容
const [numPages, setNumPages] = useState(1 as any); // 总页码数
const [pageNumber, setPageNumber] = useState(1); // 当前页码数
const [imgLoad, setimgLoad] = useState(false); //图片上传 load状态
// 赋值 // 赋值
useEffect(() => { useEffect(() => {
// 如果是添加传来没有值的时候 就清空 否则 赋值给表单 // 如果是添加传来没有值的时候 就清空 否则 赋值给表单
if (Data) { if (Data) {
// 返回列表 //发起请求
RA(64, { id: Data.id }, module, dispatch);
} else {
console.log('新建');
}
}, [Data]);
// 详情
useEffect(() => {
if (Data && detailData) {
let { communityData } = detailData;
// 赋值
form.setFieldsValue({ form.setFieldsValue({
// 必填的 // communityData,
des: { des: {
residentialZipCode: Data.residentialZipCode.substring( residentialZipCode: communityData.residentialZipCode.substring(
Data.residentialZipCode.length - 6, communityData.residentialZipCode.length - 6,
Data.residentialZipCode.length, communityData.residentialZipCode.length,
), ),
residentialAddress: Data.residentialAddress, residentialAddress: communityData.residentialAddress,
residentialName: Data.residentialName, residentialName: communityData.residentialName,
}, },
workingHours: [ workingHours: [
moment(Data.residentialStartWorking, 'HH:mm'), moment(communityData.residentialStartWorking, 'HH:mm'),
moment(Data.residentialEndWorking, 'HH:mm'), moment(communityData.residentialEndWorking, 'HH:mm'),
], ],
info: { residentialPhone: communityData.residentialPhone,
tel: Data.residentialPhone, residentialEmail: communityData.residentialEmail,
email: Data.residentialEmail, residentialManagerUserName: communityData.residentialManagerUserName,
},
residentialManagerUserName: Data.residentialManagerUserName,
help: { help: {
residentialHotlineName: Data.residentialHotlineName, residentialHotlineName: communityData.residentialHotlineName,
residentialHotline: Data.residentialHotline, residentialHotline: communityData.residentialHotline,
time: [ time: [
moment(Data.residentialHotlineServieStartTime, 'HH:mm'), moment(communityData.residentialHotlineServieStartTime, 'HH:mm'),
moment(Data.residentialHotlineServieEndTime, 'HH:mm'), moment(communityData.residentialHotlineServieEndTime, 'HH:mm'),
], ],
}, },
}); });
// 上传
setLouba(Data.balouscheduleUrl ? [backUpload(Data.balouscheduleUrl, Data.id)] : []); setCodeName(communityData.residentialName); // 小区名 -- 上传需要
setGuide(Data.serviceGuideUrl ? [backUpload(Data.serviceGuideUrl, Data.id)] : []); setInfo(true); // 禁止修改小区基本信息
// setPeriod(Data.lifeServiceUrl ? [backUpload(Data.lifeServiceUrl, Data.id)] : []); setcodeStrat(false); //开放文件上传
// 小区名 -- 上传需要
setCodeName(Data.residentialName); // 看第三个有值么~ 有的话打开
setcodeStrat(true); if (detailData.communityFormsPdfList && detailData.communityFormsPdfList.length > 0) {
setTipMain('Binding Content Already Exists, Cannot Be Modified!'); setForms(true);
} else { }
// console.log('新建');
} }
}, [Data]); }, [detailData]);
// 提交成功与否 // 提交成功与否
useEffect(() => { useEffect(() => {
...@@ -115,6 +103,8 @@ const Adds = (props: any) => { ...@@ -115,6 +103,8 @@ const Adds = (props: any) => {
} }
}, [Result, Data]); }, [Result, Data]);
// 监听表单的值
// 监听编辑预览是否获取到地址以及发生改变 // 监听编辑预览是否获取到地址以及发生改变
useEffect(() => { useEffect(() => {
if (imgUrl != null) { if (imgUrl != null) {
...@@ -131,104 +121,6 @@ const Adds = (props: any) => { ...@@ -131,104 +121,6 @@ const Adds = (props: any) => {
} }
}, [imgUrl]); }, [imgUrl]);
// 编辑 返回上传格式 和 地址
function backUpload(str: any, index: number, url?: any) {
let a = {
uid: str + index,
name: str,
status: 'done',
type: str.match(/\.([^\.]+)$/)[1].toLowerCase(),
url: 'Transfer', // 需要调取接口
};
return a;
}
// 上传设置
const uploads = {
name: 'file',
accept: '.jpg,.png,.pdf',
action: '/tos/image/upload',
data: { imageType: 'tosCreateCommunity', extends: codename },
};
// 文件上传判断
function beforeUpload(file: any) {
// 文件大小判断
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('File must be less than or equal to 2MB!');
}
return isLt2M;
}
// 上传返回格式
function BackFormat(name: any, url: any) {
let imgs = [
{
uid: '-1',
name: name,
status: 'done',
type: name.match(/\.([^\.]+)$/)[1].toLowerCase(),
url: url,
},
];
return imgs;
}
// 楼巴上传
const upload1 = {
onChange({ file }: any) {
file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
if (file.status === 'done') {
let data = file.response.data;
setLouba(BackFormat(data.imageName, data.url));
setcodeStrat(true);
setTipMain('Binding Content Already Exists, Cannot Be Modified!');
}
// 结果
uploadMsg(file);
},
};
// 指南上传
const upload2 = {
onChange({ file, fileList }: any) {
file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
if (file.status === 'done') {
let data = file.response.data;
setGuide(BackFormat(data.imageName, data.url));
setcodeStrat(true);
setTipMain('Binding Content Already Exists, Cannot Be Modified!');
}
// 结果
uploadMsg(file);
},
};
// 保质期上传
// const upload3 = {
// onChange({ file }: any) {
// file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
// if (file.status === 'done') {
// let data = file.response.data;
// setPeriod(BackFormat(data.imageName, data.url));
// setcodeStrat(true);
// setTipMain('Binding Content Already Exists, Cannot Be Modified!');
// }
// // 结果
// uploadMsg(file);
// },
// };
// 上传提示
function uploadMsg(file: any) {
if (file.status === 'done') {
// message.success(`${file.name} File Uploaded Successfully`);
} else if (file.status === 'error') {
message.error(`${file.name} File Upload Failed.`);
}
}
// 多选选择改变值 // 多选选择改变值
function onChange(checkedValues: any) { function onChange(checkedValues: any) {
// 修改选择值 // 修改选择值
...@@ -244,78 +136,99 @@ const Adds = (props: any) => { ...@@ -244,78 +136,99 @@ const Adds = (props: any) => {
} }
} }
// 表单验证 // 提取pdf地址文件名出来
const onFinish = (values: any) => { const pickUp = (list: any) => {
let { residentialZipCode } = values.des; let newArr = [];
let tel = values.info.tel; // 如果存在
if (values.residentialManagerUserName.length < 2) { if (list) {
message.error('Please Enter 2-digit Administrator Name!'); //循环一次
} else if (residentialZipCode.length < 6) { for (let i in list) {
message.error('Please Enter The Correct Name!'); // 判断有没有错误
} else if (tel.length != 8 && tel.length != 11) { if (list[i].name == '' || list[i].fileList.length == 0) {
message.error('Incorrect Contact Information!'); return '错误';
} else {
let name = list[i].name;
let page = list[i].fileList;
//再循环拼接
for (let v in page) {
name += '&' + page[v].name;
}
newArr.push(name);
}
}
return newArr;
} else { } else {
onUpDate(values); return [];
} }
}; };
// 表单提交 // 表单提交
function onUpDate(values: any) { function onFinish(values: any) {
// 额外判断 let mainPdfList = pickUp(values.mainPdfList);
let obj: any = new Object(); let essentialPdfList = pickUp(values.essentialPdfList);
obj.propertyFee = PropertyFee; if (mainPdfList == '错误') {
let a = tips;
a[0] = true;
setTips([...a]);
return false;
} else if (essentialPdfList == '错误') {
let b = tips;
b[1] = true;
setTips([...b]);
return false;
}
// 小区信息; // 小区信息;
let { residentialZipCode, residentialAddress, residentialName } = values.des; let { residentialZipCode, residentialAddress, residentialName } = values.des;
values.residentialZipCode = `SINGAPORE ${residentialZipCode}`;
values.residentialAddress = residentialAddress;
values.residentialName = residentialName;
obj.residentialZipCode = `SINGAPORE ${residentialZipCode}`; // 支付方式
obj.residentialAddress = residentialAddress; values.propertyFee = PropertyFee.join('');
obj.residentialName = residentialName;
// 小区时间与管理员 // 小区时间与管理员
obj.residentialManagerUserName = undeFi(values.residentialManagerUserName); values.residentialManagerUserName = undeFi(values.residentialManagerUserName);
obj.residentialStartWorking = values.workingHours[0].format('HH:mm'); values.residentialStartWorking = values.workingHours[0].format('HH:mm');
obj.residentialEndWorking = values.workingHours[1].format('HH:mm'); values.residentialEndWorking = values.workingHours[1].format('HH:mm');
obj.residentialPhone = values.info.tel;
obj.residentialEmail = values.info.email;
// 上传内容 // 上传内容
values.bannerUrl = values.bannerUrl ? values.bannerUrl.join('') : null;
obj.balouscheduleUrl = undeFi(loubaUpload.map((item: any) => item.name)[0]); values.mainPdfList = pickUp(values.mainPdfList);
obj.serviceGuideUrl = undeFi(guideUpload.map((item: any) => item.name)[0]); values.essentialPdfList = pickUp(values.essentialPdfList);
// obj.lifeServiceUrl = undeFi(periodUpload.map((item: any) => item.name)[0]); values.formsPdfList = pickUp(values.formsPdfList);
// 小区热线 // 小区热线
// 表单结构存在数据不存在情况, 所以要多判断一次 let { residentialHotline, residentialHotlineName, time } = values.help;
if (values.help) {
obj.residentialHotlineName = values.help.residentialHotlineName // 没选的话就上面小区联系人和方式
? undeFi(values.help.residentialHotlineName) values.residentialHotline = residentialHotline
: 'Community Hotline'; ? undeFi(residentialHotline)
obj.residentialHotline = values.help.residentialHotline : values.residentialPhone;
? undeFi(values.help.residentialHotline) values.residentialHotlineName = residentialHotlineName
: values.info.tel; ? undeFi(residentialHotlineName)
// 编辑的时候 为空 判断 : values.residentialManagerUserName;
if (values.help.time) {
obj.residentialHotlineServieStartTime = undeFi(values.help.time[0]).format('HH:mm'); // 没选的话就上面小区时间
obj.residentialHotlineServieEndTime = undeFi(values.help.time[1]).format('HH:mm'); if (time) {
} else { values.residentialHotlineServieStartTime = undeFi(time[0].format('HH:mm'));
obj.residentialHotlineServieStartTime = values.workingHours[0].format('HH:mm'); values.residentialHotlineServieEndTime = undeFi(time[1].format('HH:mm'));
obj.residentialHotlineServieEndTime = values.workingHours[1].format('HH:mm');
}
} else { } else {
obj.residentialHotlineName = values.info.tel; values.residentialHotlineServieStartTime = values.workingHours[0].format('HH:mm');
obj.residentialHotline = values.info.tel; values.residentialHotlineServieEndTime = values.workingHours[1].format('HH:mm');
obj.residentialHotlineServieStartTime = values.workingHours[0].format('HH:mm');
obj.residentialHotlineServieEndTime = values.workingHours[1].format('HH:mm');
} }
delete values.des;
delete values.help;
delete values.workingHours;
if (Data) { if (Data) {
obj.id = Data.id; values.id = Data.id;
} }
console.log(values); console.log(values);
console.log(obj);
// 上传 // 上传
RA(29, obj, 'CellList', dispatch); RA(63, values, module, dispatch);
} }
// 返回 // 返回
...@@ -323,12 +236,6 @@ const Adds = (props: any) => { ...@@ -323,12 +236,6 @@ const Adds = (props: any) => {
history.go(-1); history.go(-1);
}; };
// 小区名输入监听ant
function insdInp(value: string) {
setCodeName(value);
return value;
}
// 正则手机号 // 正则手机号
const keyup_tool = (value: any) => { const keyup_tool = (value: any) => {
return getNumber(value.replace(/[^\d^\.]+/g, '')); return getNumber(value.replace(/[^\d^\.]+/g, ''));
...@@ -339,53 +246,68 @@ const Adds = (props: any) => { ...@@ -339,53 +246,68 @@ const Adds = (props: any) => {
e.target.value = keyup_tool(e.target.value); e.target.value = keyup_tool(e.target.value);
}; };
// 上传按钮 // 邮编小区名字验证
const uploadButton = ( const checkPrice = (_: any, value: any) => {
<div> //先所有禁止
{imgLoad ? <LoadingOutlined /> : <PlusOutlined />} setcodeStrat(true);
<div style={{ marginTop: 8 }}>Upload</div>
</div>
);
// 文件预览 if (!value) {
const handlePreview = async (file: any) => { return Promise.reject('Please fill in the basic information !');
if (file.url == 'Transfer') {
// 这是编辑的预览, 需要发送一个请求
let msg = {
// userToken: '',
// type: ans.substr(ans.lastIndexOf('.') + 1),
type: 'tosCommunityFileService',
fileName: file.name,
extends: Data.residentialName,
};
RA(47, msg, module, dispatch);
} else {
setpreviewImage(file);
setpreviewVisible(true);
} }
}; if (!value.residentialZipCode || value.residentialZipCode.trim() == '') {
return Promise.reject('Please enter the postcode !');
} else if (value.residentialZipCode.length < 6 || !/^\d+$/.test(value.residentialZipCode)) {
return Promise.reject('Wrong zip code !');
} else if (
!value.residentialAddress ||
value.residentialAddress.trim() == '' ||
value.residentialAddress.length < 2
) {
return Promise.reject('Please enter the address of the community !');
} else if (!value.residentialName || value.residentialName.trim() == '') {
return Promise.reject('Please enter the community name !');
} else {
// 设置下方可选再打开禁止
setcodeStrat(false);
// 点击移除图片 return Promise.resolve();
const handRemove = (key: any) => { }
key == 1 ? setLouba([]) : key == 2 ? setGuide([]) : setPeriod([]);
}; };
// 点击遮罩回调 //表单字段更新
const handleCancel = () => { const onValuesChange = (v: any) => {
setpreviewVisible(false); // console.log(v);
// 每次关闭预览都要清掉弹窗图片信息 -- 防止编辑打开页面直接弹出窗口 if (
setpreviewImage({}); (v.hasOwnProperty('mainPdfList') &&
dispatch({ type: module + '/urlRemove' }); v.mainPdfList.length > 0 &&
v.mainPdfList[0].fileList.length > 0) ||
(v.hasOwnProperty('essentialPdfList') &&
v.essentialPdfList.length > 0 &&
v.essentialPdfList[0].fileList.length > 0) ||
(v.hasOwnProperty('formsPdfList') &&
v.formsPdfList.length > 0 &&
v.formsPdfList[0].fileList.length > 0) ||
(v.hasOwnProperty('bannerUrl') && v.bannerUrl.length > 0)
) {
// console.log('上传了附件');
setInfo(true);
}
}; };
// pdf 总页数 // 小区名称离开验证
const onDocumentLoadSuccess = (pages: any) => { const LoseFocus = (v: any) => {
setNumPages(pages); // 判断鼠标离开是不是跟上次储存的小区名是否一致
if (v == codename) {
// console.log('一致的');
} else {
// console.log('不一致的');
setCodeName(v);
}
}; };
// 切换pdf 总数 // 第三个上传切换
const onChangePage = (page: any) => { const switchs = () => {
setPageNumber(page); setForms(!forms);
}; };
return ( return (
...@@ -410,50 +332,29 @@ const Adds = (props: any) => { ...@@ -410,50 +332,29 @@ const Adds = (props: any) => {
layout="horizontal" layout="horizontal"
labelAlign="left" labelAlign="left"
scrollToFirstError={true} scrollToFirstError={true}
onValuesChange={onValuesChange}
> >
{/* 小区邮编、地址和名称 */}
<Form.Item <Form.Item
label="Community Name"
name="des" name="des"
rules={[{ required: false }]} label="Community Name"
rules={[{ validator: checkPrice }]}
style={{ marginBottom: 15 }}
className="must" className="must"
> >
<Input.Group compact> <Facilities
<Form.Item name={['des', 'residentialZipCode']} noStyle rules={village[0] as any}> disabled={info}
<Input LoseFocus={(v: any) => {
style={{ marginRight: '10px', width: 120 }} LoseFocus(v);
placeholder="6 Postcode" }}
maxLength={6} defaultvalue={
onKeyUp={keyup_communityManagerFee} Data && detailData && Data && detailData.communityData
/> ? detailData.communityData
</Form.Item> : null
}
<Form.Item name={['des', 'residentialAddress']} noStyle rules={village[1] as any}> />
<Input
style={{ width: '360px' }}
placeholder="Please enter community adds"
disabled={codeStrat}
/>
</Form.Item>
<div className="li">
<Form.Item
name={['des', 'residentialName']}
normalize={insdInp}
noStyle
rules={village[2] as any}
>
<Input
style={{ marginRight: '10px', width: '260px' }}
placeholder="Please enter community name"
disabled={codeStrat}
/>
</Form.Item>
{/* 不可修改提示 */}
<span className="redFs">{tipMain}</span>
</div>
</Input.Group>
</Form.Item> </Form.Item>
{/* 小区时间 */}
<Form.Item label="Working Hours" name="workingHours" rules={village[3] as any}> <Form.Item label="Working Hours" name="workingHours" rules={village[3] as any}>
<RangePicker <RangePicker
minuteStep={60} minuteStep={60}
...@@ -461,40 +362,32 @@ const Adds = (props: any) => { ...@@ -461,40 +362,32 @@ const Adds = (props: any) => {
placeholder={['Start Time', 'End Time']} placeholder={['Start Time', 'End Time']}
/> />
</Form.Item> </Form.Item>
{/* 小区联系方式 */}
<Form.Item <Form.Item
name="residentialPhone"
label="Community Telephone" label="Community Telephone"
name="info" rules={village[4] as any}
rules={[{ required: false }]}
className="must"
> >
<Input.Group compact> <Input
<Form.Item name={['info', 'tel']} noStyle rules={village[4] as any}> style={{ marginRight: '10px', width: '240px' }}
<Input placeholder="Please enter phone"
style={{ marginRight: '10px', width: '160px' }} maxLength={11}
placeholder="Please enter phone" onKeyUp={keyup_communityManagerFee}
maxLength={11} />
onKeyUp={keyup_communityManagerFee}
/>
</Form.Item>
<Button type="text">-</Button>
<Form.Item name={['info', 'email']} noStyle rules={village[5] as any}>
<Input
style={{ marginLeft: '10px', width: '180px' }}
placeholder="Please enter email"
/>
</Form.Item>
</Input.Group>
</Form.Item> </Form.Item>
{/* 小区邮箱 */}
<Form.Item name="residentialEmail" label="Community Mailbox" rules={village[5] as any}>
<Input style={{ width: '240px' }} placeholder="Please enter email" />
</Form.Item>
{/* 小区管理员 */}
<Form.Item <Form.Item
label="Administrator" label="Administrator"
name="residentialManagerUserName" name="residentialManagerUserName"
rules={village[6] as any} rules={village[6] as any}
> >
<Input style={{ width: '160px' }} placeholder="Name" maxLength={30} /> <Input style={{ width: '240px' }} placeholder="Please enter name" maxLength={30} />
</Form.Item> </Form.Item>
{/* 小区缴费方式 */}
<Form.Item label="Property Fee" name="propertyFee" style={{ marginBottom: '0' }}> <Form.Item label="Property Fee" name="propertyFee" style={{ marginBottom: '0' }}>
<Checkbox onChange={onChange} disabled> <Checkbox onChange={onChange} disabled>
Online Payment Online Payment
...@@ -503,80 +396,121 @@ const Adds = (props: any) => { ...@@ -503,80 +396,121 @@ const Adds = (props: any) => {
Offline Payment Offline Payment
</Checkbox> </Checkbox>
</Form.Item> </Form.Item>
<hr /> <hr />
{/* 上传部分 */} {/* banner上传部分 */}
<Form.Item <Form.Item
label="Shuttle Bus Timetable" name={'bannerUrl'}
name="balouscheduleFile" label="Banner:"
style={{ marginBottom: '0', minHeight: 159 }} colon={false}
style={{
marginBottom: 8,
}}
> >
<Upload <PictureOptionsRow
{...uploads} action="/tos/image/upload"
{...upload1} data={{
fileList={loubaUpload} imageType: 'communityBannerImage',
beforeUpload={beforeUpload} extends: codename,
listType="picture-card" }}
disabled={codename == '' ? true : false} limitNums={1}
onPreview={() => handlePreview(loubaUpload[0])} // 预览 CommunityValue={Data && detailData && detailData.banner ? detailData.banner : null}
onRemove={() => handRemove(1)} //移除 // imgs={ImageSrc}
> // disabled={codeStrat}
{loubaUpload.length >= 1 ? null : uploadButton} />
</Upload>
<div className="tip">
<span>Support Files:.jpg, .png, .pdf</span>
</div>
</Form.Item> </Form.Item>
{/* 第一个上传 */}
{/* 上传部分 */}
<Form.Item <Form.Item
label="Property Guide" name={'mainPdfList'}
name="serviceGuideFile" label="Maintenance Schedule:"
style={{ marginBottom: '0', minHeight: 159 }} colon={false}
style={{
marginBottom: tips[0] ? 4 : 14,
}}
> >
<Upload <PdfUpload
{...uploads} action="/tos/community/pdf/upload"
{...upload2} data={{
fileList={guideUpload} type: 'tosCommunityPdf',
beforeUpload={beforeUpload} extends: codename,
listType="picture-card" }}
disabled={codename == '' ? true : false} disabled={codeStrat}
onPreview={() => handlePreview(guideUpload[0])} // 预览 detailvalue={
onRemove={() => handRemove(2)} //移除 Data && detailData && detailData.communityMainPdfList
> ? detailData.communityMainPdfList
{guideUpload.length >= 1 ? null : uploadButton} : null
</Upload> }
<div className="tip"> ></PdfUpload>
<span>Support Files:.jpg, .png, .pdf</span>
</div>
</Form.Item> </Form.Item>
{tips[0] ? (
{/* 上传部分 */} <p style={{ margin: '6px 0 10px 160px', color: '#f00' }}>
{/* <Form.Item Please complete or delete the incomplete part !
label="Warranty Period Service" </p>
name="lifeServiceFile" ) : (
style={{ marginBottom: '0', minHeight: 159 }} ''
)}
{/* 第二个上传 */}
<Form.Item
name={'essentialPdfList'}
label="Essential Information:"
colon={false}
style={{
marginBottom: tips[1] ? 4 : 14,
}}
> >
<Upload <PdfUpload
{...uploads} action="/tos/community/pdf/upload"
{...upload3} data={{
fileList={periodUpload} type: 'tosCommunityPdf',
beforeUpload={beforeUpload} extends: codename,
listType="picture-card" }}
disabled={codename == '' ? true : false} disabled={codeStrat}
onPreview={() => handlePreview(periodUpload[0])} // 预览 detailvalue={
onRemove={() => handRemove(3)} //移除 Data && detailData && detailData.communityEssentialPdfList
> ? detailData.communityEssentialPdfList
{periodUpload.length >= 1 ? null : uploadButton} : null
</Upload> }
<div className="tip"> ></PdfUpload>
<span>Support Files:.jpg, .png, .pdf</span> </Form.Item>{' '}
</div> {tips[1] ? (
</Form.Item> */} <p style={{ margin: '6px 0 10px 160px', color: '#f00' }}>
Please complete or delete the incomplete part !
</p>
) : (
''
)}
{/* 第三个上传 */}
<div className="formBox">
{forms ? (
<div className="pdfform">
<p style={{ marginBottom: 6 }}>Form</p>
<Form.Item
name={'formsPdfList'}
label=""
colon={false}
style={{ marginBottom: 0 }}
>
<PdfUpload
action="/tos/community/pdf/upload"
data={{
type: 'tosCommunityPdf',
extends: codename,
}}
disabled={codeStrat}
detailvalue={
Data && detailData && detailData.communityFormsPdfList
? detailData.communityFormsPdfList
: null
}
></PdfUpload>
</Form.Item>
</div>
) : (
<div className="acitves">
<Button onClick={switchs}>Form</Button>
</div>
)}
</div>
<hr /> <hr />
{/* 帮助中心 */} {/* 帮助中心 */}
<Form.Item label="Help Center" name="help"> <Form.Item label="Help Center" name="help">
<Input.Group compact> <Input.Group compact>
...@@ -596,7 +530,6 @@ const Adds = (props: any) => { ...@@ -596,7 +530,6 @@ const Adds = (props: any) => {
</Form.Item> </Form.Item>
</Input.Group> </Input.Group>
</Form.Item> </Form.Item>
<hr /> <hr />
{/* 提交 */} {/* 提交 */}
<Form.Item label="" colon={false}> <Form.Item label="" colon={false}>
...@@ -606,49 +539,6 @@ const Adds = (props: any) => { ...@@ -606,49 +539,6 @@ const Adds = (props: any) => {
</Form.Item> </Form.Item>
</Form> </Form>
</div> </div>
{/* 附件预览 */}
<Modal
title={previewImage != null ? previewImage.name : 'File Preview'}
visible={previewVisible}
width={800}
onCancel={handleCancel}
style={{ textAlign: 'center' }}
footer={null}
>
{previewImage != null ? (
previewImage.type == 'pdf' ? (
// pdf 换一种
<>
<PDF
file={previewImage.url}
page={pageNumber}
scale={1.25}
onDocumentComplete={onDocumentLoadSuccess}
/>
<Pagination
style={{ textAlign: 'center', marginTop: 10, display: 'block' }}
simple
defaultCurrent={pageNumber}
total={numPages * 10}
onChange={onChangePage}
/>
</>
) : previewImage.type == 'jpg' || previewImage.type == 'png' ? (
// 图片用指定格式
<Image
src={previewImage.url}
preview={false}
style={{ margin: '0 auto', textAlign: 'center' }}
/>
) : (
<FileViewer fileType={previewImage.type} filePath={previewImage.url} />
)
) : (
''
)}
</Modal>
</Spin> </Spin>
</> </>
); );
...@@ -657,10 +547,9 @@ const Adds = (props: any) => { ...@@ -657,10 +547,9 @@ const Adds = (props: any) => {
// export default Adds; // export default Adds;
function map(state: any) { function map(state: any) {
// console.log(state); // console.log(state);
const Data = state.CellList.DataSave; const Data = state.CellList.DataSave;
const { imgUrl, Result } = state.CellList; const { imgUrl, Result, detailData } = state.CellList;
const loading = state.loading.models.CellList ? state.loading.models.CellList : false; const loading = state.loading.models.CellList ? state.loading.models.CellList : false;
return { Data, loading, Result, imgUrl }; return { Data, loading, Result, imgUrl, detailData };
} }
export default connect(map)(Adds); export default connect(map)(Adds);
...@@ -8,6 +8,7 @@ import { ...@@ -8,6 +8,7 @@ import {
Button, Button,
TimePicker, TimePicker,
Checkbox, Checkbox,
Upload,
message, message,
Spin, Spin,
Modal, Modal,
...@@ -22,9 +23,8 @@ import { village } from '@/utils/tip'; ...@@ -22,9 +23,8 @@ import { village } from '@/utils/tip';
import moment from 'moment'; import moment from 'moment';
import { getNumber } from '@/utils/string'; // 正则 import { getNumber } from '@/utils/string'; // 正则
import PictureOptionsRow from '@/components/PictureOptions/PictureOptionsRow'; // banner 上传 import FileViewer from 'react-file-viewer';
import Facilities from '@/components/Form/ZipCode'; // 小区邮编地址名称 import PDF from 'react-pdf-js';
import PdfUpload from '@/components/Form/PdfUpload'; // 多图上传
const { RangePicker } = TimePicker; const { RangePicker } = TimePicker;
...@@ -37,22 +37,23 @@ const Adds = (props: any) => { ...@@ -37,22 +37,23 @@ const Adds = (props: any) => {
const [PropertyFee, setPropertyFee] = useState(['1']); // 表单物业费提交值 const [PropertyFee, setPropertyFee] = useState(['1']); // 表单物业费提交值
// 监听用户填写小区名 以及后续禁止输入 提示信息 const [loubaUpload, setLouba] = useState([] as any); // 楼巴上传列表
const [codename, setCodeName] = useState(null); const [guideUpload, setGuide] = useState([] as any); // 物业办事指南列表
const [periodUpload, setPeriod] = useState([] as any); // 保质期服务列表
const [tips, setTips] = useState([false, false, false]); // 三个自定义上传的提示
// const [codeStrat, setcodeStrat] = useState(false); // 监听用户填写小区名 以及后续禁止输入 提示信息
// const [tipMain, setTipMain] = useState(''); const [codename, setCodeName] = useState('');
const [codeStrat, setcodeStrat] = useState(false);
const [tipMain, setTipMain] = useState('');
// const [previewVisible, setpreviewVisible] = useState(false); // 预览弹窗显示隐藏 const [previewVisible, setpreviewVisible] = useState(false); // 预览弹窗显示隐藏
// const [previewImage, setpreviewImage] = useState({} as any); // 预览图片信息 const [previewImage, setpreviewImage] = useState({} as any); // 预览图片信息
// //pdf 页码内容 //pdf 页码内容
// const [numPages, setNumPages] = useState(1 as any); // 总页码数 const [numPages, setNumPages] = useState(1 as any); // 总页码数
// const [pageNumber, setPageNumber] = useState(1); // 当前页码数 const [pageNumber, setPageNumber] = useState(1); // 当前页码数
// const [imgLoad, setimgLoad] = useState(false); //图片上传 load状态 const [imgLoad, setimgLoad] = useState(false); //图片上传 load状态
// 赋值 // 赋值
useEffect(() => { useEffect(() => {
...@@ -89,13 +90,13 @@ const Adds = (props: any) => { ...@@ -89,13 +90,13 @@ const Adds = (props: any) => {
}, },
}); });
// 上传 // 上传
// setLouba(Data.balouscheduleUrl ? [backUpload(Data.balouscheduleUrl, Data.id)] : []); setLouba(Data.balouscheduleUrl ? [backUpload(Data.balouscheduleUrl, Data.id)] : []);
// setGuide(Data.serviceGuideUrl ? [backUpload(Data.serviceGuideUrl, Data.id)] : []); setGuide(Data.serviceGuideUrl ? [backUpload(Data.serviceGuideUrl, Data.id)] : []);
// setPeriod(Data.lifeServiceUrl ? [backUpload(Data.lifeServiceUrl, Data.id)] : []); // setPeriod(Data.lifeServiceUrl ? [backUpload(Data.lifeServiceUrl, Data.id)] : []);
// 小区名 -- 上传需要 // 小区名 -- 上传需要
setCodeName(Data.residentialName); setCodeName(Data.residentialName);
// setcodeStrat(true); setcodeStrat(true);
// setTipMain('Binding Content Already Exists, Cannot Be Modified!'); setTipMain('Binding Content Already Exists, Cannot Be Modified!');
} else { } else {
// console.log('新建'); // console.log('新建');
} }
...@@ -130,6 +131,104 @@ const Adds = (props: any) => { ...@@ -130,6 +131,104 @@ const Adds = (props: any) => {
} }
}, [imgUrl]); }, [imgUrl]);
// 编辑 返回上传格式 和 地址
function backUpload(str: any, index: number, url?: any) {
let a = {
uid: str + index,
name: str,
status: 'done',
type: str.match(/\.([^\.]+)$/)[1].toLowerCase(),
url: 'Transfer', // 需要调取接口
};
return a;
}
// 上传设置
const uploads = {
name: 'file',
accept: '.jpg,.png,.pdf',
action: '/tos/image/upload',
data: { imageType: 'tosCreateCommunity', extends: codename },
};
// 文件上传判断
function beforeUpload(file: any) {
// 文件大小判断
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('File must be less than or equal to 2MB!');
}
return isLt2M;
}
// 上传返回格式
function BackFormat(name: any, url: any) {
let imgs = [
{
uid: '-1',
name: name,
status: 'done',
type: name.match(/\.([^\.]+)$/)[1].toLowerCase(),
url: url,
},
];
return imgs;
}
// 楼巴上传
const upload1 = {
onChange({ file }: any) {
file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
if (file.status === 'done') {
let data = file.response.data;
setLouba(BackFormat(data.imageName, data.url));
setcodeStrat(true);
setTipMain('Binding Content Already Exists, Cannot Be Modified!');
}
// 结果
uploadMsg(file);
},
};
// 指南上传
const upload2 = {
onChange({ file, fileList }: any) {
file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
if (file.status === 'done') {
let data = file.response.data;
setGuide(BackFormat(data.imageName, data.url));
setcodeStrat(true);
setTipMain('Binding Content Already Exists, Cannot Be Modified!');
}
// 结果
uploadMsg(file);
},
};
// 保质期上传
// const upload3 = {
// onChange({ file }: any) {
// file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
// if (file.status === 'done') {
// let data = file.response.data;
// setPeriod(BackFormat(data.imageName, data.url));
// setcodeStrat(true);
// setTipMain('Binding Content Already Exists, Cannot Be Modified!');
// }
// // 结果
// uploadMsg(file);
// },
// };
// 上传提示
function uploadMsg(file: any) {
if (file.status === 'done') {
// message.success(`${file.name} File Uploaded Successfully`);
} else if (file.status === 'error') {
message.error(`${file.name} File Upload Failed.`);
}
}
// 多选选择改变值 // 多选选择改变值
function onChange(checkedValues: any) { function onChange(checkedValues: any) {
// 修改选择值 // 修改选择值
...@@ -145,98 +244,78 @@ const Adds = (props: any) => { ...@@ -145,98 +244,78 @@ const Adds = (props: any) => {
} }
} }
// 提取pdf地址文件名出来 // 表单验证
const pickUp = (list: any) => { const onFinish = (values: any) => {
let newArr = []; let { residentialZipCode } = values.des;
// 如果存在 let tel = values.info.tel;
if (list) { if (values.residentialManagerUserName.length < 2) {
//循环一次 message.error('Please Enter 2-digit Administrator Name!');
for (let i in list) { } else if (residentialZipCode.length < 6) {
// 判断有没有错误 message.error('Please Enter The Correct Name!');
if (list[i].name == '' || list[i].fileList.length == 0) { } else if (tel.length != 8 && tel.length != 11) {
return '错误'; message.error('Incorrect Contact Information!');
} else {
let name = list[i].name;
let page = list[i].fileList;
//再循环拼接
for (let v in page) {
name += '&' + page[v].name;
}
newArr.push(name);
}
}
return newArr;
} else { } else {
return null; onUpDate(values);
} }
}; };
// 表单提交 // 表单提交
function onFinish(values: any) { function onUpDate(values: any) {
let mainPdfList = pickUp(values.mainPdfList); // 额外判断
let essentialPdfList = pickUp(values.essentialPdfList); let obj: any = new Object();
if (mainPdfList == '错误') { obj.propertyFee = PropertyFee;
let a = tips;
a[0] = true;
setTips([...a]);
return false;
} else if (essentialPdfList == '错误') {
let b = tips;
b[1] = true;
setTips([...b]);
return false;
}
// 小区信息; // 小区信息;
let { residentialZipCode, residentialAddress, residentialName } = values.des; let { residentialZipCode, residentialAddress, residentialName } = values.des;
values.residentialZipCode = `SINGAPORE ${residentialZipCode}`;
values.residentialAddress = residentialAddress;
values.residentialName = residentialName;
// 支付方式 obj.residentialZipCode = `SINGAPORE ${residentialZipCode}`;
values.propertyFee = PropertyFee.join(''); obj.residentialAddress = residentialAddress;
obj.residentialName = residentialName;
// 小区时间与管理员 // 小区时间与管理员
values.residentialManagerUserName = undeFi(values.residentialManagerUserName); obj.residentialManagerUserName = undeFi(values.residentialManagerUserName);
values.residentialStartWorking = values.workingHours[0].format('HH:mm'); obj.residentialStartWorking = values.workingHours[0].format('HH:mm');
values.residentialEndWorking = values.workingHours[1].format('HH:mm'); obj.residentialEndWorking = values.workingHours[1].format('HH:mm');
obj.residentialPhone = values.info.tel;
obj.residentialEmail = values.info.email;
// 上传内容 // 上传内容
values.bannerUrl = values.bannerUrl ? values.bannerUrl.join('') : null;
values.mainPdfList = pickUp(values.mainPdfList); obj.balouscheduleUrl = undeFi(loubaUpload.map((item: any) => item.name)[0]);
values.essentialPdfList = pickUp(values.essentialPdfList); obj.serviceGuideUrl = undeFi(guideUpload.map((item: any) => item.name)[0]);
// values.formsPdfList = pickUp(values.formsPdfList); // obj.lifeServiceUrl = undeFi(periodUpload.map((item: any) => item.name)[0]);
// 小区热线 // 小区热线
let { residentialHotline, residentialHotlineName, time } = values.help; // 表单结构存在数据不存在情况, 所以要多判断一次
if (values.help) {
// 没选的话就上面小区联系人和方式 obj.residentialHotlineName = values.help.residentialHotlineName
values.residentialHotline = residentialHotline ? undeFi(values.help.residentialHotlineName)
? undeFi(residentialHotline) : 'Community Hotline';
: values.residentialPhone; obj.residentialHotline = values.help.residentialHotline
values.residentialHotlineName = residentialHotlineName ? undeFi(values.help.residentialHotline)
? undeFi(residentialHotlineName) : values.info.tel;
: values.residentialManagerUserName; // 编辑的时候 为空 判断
if (values.help.time) {
// 没选的话就上面小区时间 obj.residentialHotlineServieStartTime = undeFi(values.help.time[0]).format('HH:mm');
if (time) { obj.residentialHotlineServieEndTime = undeFi(values.help.time[1]).format('HH:mm');
values.residentialHotlineServieStartTime = undeFi(time[0].format('HH:mm')); } else {
values.residentialHotlineServieEndTime = undeFi(time[1].format('HH:mm')); obj.residentialHotlineServieStartTime = values.workingHours[0].format('HH:mm');
obj.residentialHotlineServieEndTime = values.workingHours[1].format('HH:mm');
}
} else { } else {
values.residentialHotlineServieStartTime = values.workingHours[0].format('HH:mm'); obj.residentialHotlineName = values.info.tel;
values.residentialHotlineServieEndTime = values.workingHours[1].format('HH:mm'); obj.residentialHotline = values.info.tel;
obj.residentialHotlineServieStartTime = values.workingHours[0].format('HH:mm');
obj.residentialHotlineServieEndTime = values.workingHours[1].format('HH:mm');
} }
delete values.des;
delete values.help;
delete values.workingHours;
if (Data) { if (Data) {
values.id = Data.id; obj.id = Data.id;
} }
console.log(values); console.log(values);
console.log(obj);
// 上传 // 上传
RA(63, values, 'CellList', dispatch); RA(29, obj, 'CellList', dispatch);
} }
// 返回 // 返回
...@@ -244,11 +323,10 @@ const Adds = (props: any) => { ...@@ -244,11 +323,10 @@ const Adds = (props: any) => {
history.go(-1); history.go(-1);
}; };
// 小区名输入监听赋值 // 小区名输入监听ant
function insdInp(value: any) { function insdInp(value: string) {
if (value.trim() != '') { setCodeName(value);
setCodeName(value); return value;
}
} }
// 正则手机号 // 正则手机号
...@@ -261,28 +339,55 @@ const Adds = (props: any) => { ...@@ -261,28 +339,55 @@ const Adds = (props: any) => {
e.target.value = keyup_tool(e.target.value); e.target.value = keyup_tool(e.target.value);
}; };
// 邮编小区名字验证 // 上传按钮
const checkPrice = (_: any, value: any) => { const uploadButton = (
if (!value) { <div>
return Promise.reject('Please fill in the basic information !'); {imgLoad ? <LoadingOutlined /> : <PlusOutlined />}
} <div style={{ marginTop: 8 }}>Upload</div>
if (!value.residentialZipCode || value.residentialZipCode.trim() == '') { </div>
return Promise.reject('Please enter the postcode !'); );
} else if (value.residentialZipCode.length < 6 || !/^\d+$/.test(value.residentialZipCode)) {
return Promise.reject('Wrong zip code !'); // 文件预览
} else if ( const handlePreview = async (file: any) => {
!value.residentialAddress || if (file.url == 'Transfer') {
value.residentialAddress.trim() == '' || // 这是编辑的预览, 需要发送一个请求
value.residentialAddress.length < 2 let msg = {
) { // userToken: '',
return Promise.reject('Please enter the address of the community !'); // type: ans.substr(ans.lastIndexOf('.') + 1),
} else if (!value.residentialName || value.residentialName.trim() == '') { type: 'tosCommunityFileService',
return Promise.reject('Please enter the community name !'); fileName: file.name,
extends: Data.residentialName,
};
RA(47, msg, module, dispatch);
} else { } else {
return Promise.resolve(); setpreviewImage(file);
setpreviewVisible(true);
} }
}; };
// 点击移除图片
const handRemove = (key: any) => {
key == 1 ? setLouba([]) : key == 2 ? setGuide([]) : setPeriod([]);
};
// 点击遮罩回调
const handleCancel = () => {
setpreviewVisible(false);
// 每次关闭预览都要清掉弹窗图片信息 -- 防止编辑打开页面直接弹出窗口
setpreviewImage({});
dispatch({ type: module + '/urlRemove' });
};
// pdf 总页数
const onDocumentLoadSuccess = (pages: any) => {
setNumPages(pages);
};
// 切换pdf 总数
const onChangePage = (page: any) => {
setPageNumber(page);
};
return ( return (
<> <>
<Spin spinning={loading} tip="loading..." size="large"> <Spin spinning={loading} tip="loading..." size="large">
...@@ -306,21 +411,49 @@ const Adds = (props: any) => { ...@@ -306,21 +411,49 @@ const Adds = (props: any) => {
labelAlign="left" labelAlign="left"
scrollToFirstError={true} scrollToFirstError={true}
> >
{/* 小区邮编、地址和名称 */}
<Form.Item <Form.Item
name="des"
label="Community Name" label="Community Name"
rules={[{ validator: checkPrice }]} name="des"
style={{ marginBottom: 15 }} rules={[{ required: false }]}
className="must" className="must"
> >
<Facilities <Input.Group compact>
insdInps={(value: any) => { <Form.Item name={['des', 'residentialZipCode']} noStyle rules={village[0] as any}>
insdInp(value); <Input
}} style={{ marginRight: '10px', width: 120 }}
/> placeholder="6 Postcode"
maxLength={6}
onKeyUp={keyup_communityManagerFee}
/>
</Form.Item>
<Form.Item name={['des', 'residentialAddress']} noStyle rules={village[1] as any}>
<Input
style={{ width: '360px' }}
placeholder="Please enter community adds"
disabled={codeStrat}
/>
</Form.Item>
<div className="li">
<Form.Item
name={['des', 'residentialName']}
normalize={insdInp}
noStyle
rules={village[2] as any}
>
<Input
style={{ marginRight: '10px', width: '260px' }}
placeholder="Please enter community name"
disabled={codeStrat}
/>
</Form.Item>
{/* 不可修改提示 */}
<span className="redFs">{tipMain}</span>
</div>
</Input.Group>
</Form.Item> </Form.Item>
{/* 小区时间 */}
<Form.Item label="Working Hours" name="workingHours" rules={village[3] as any}> <Form.Item label="Working Hours" name="workingHours" rules={village[3] as any}>
<RangePicker <RangePicker
minuteStep={60} minuteStep={60}
...@@ -328,32 +461,40 @@ const Adds = (props: any) => { ...@@ -328,32 +461,40 @@ const Adds = (props: any) => {
placeholder={['Start Time', 'End Time']} placeholder={['Start Time', 'End Time']}
/> />
</Form.Item> </Form.Item>
{/* 小区联系方式 */}
<Form.Item <Form.Item
name="residentialPhone"
label="Community Telephone" label="Community Telephone"
rules={village[4] as any} name="info"
rules={[{ required: false }]}
className="must"
> >
<Input <Input.Group compact>
style={{ marginRight: '10px', width: '240px' }} <Form.Item name={['info', 'tel']} noStyle rules={village[4] as any}>
placeholder="Please enter phone" <Input
maxLength={11} style={{ marginRight: '10px', width: '160px' }}
onKeyUp={keyup_communityManagerFee} placeholder="Please enter phone"
/> maxLength={11}
</Form.Item> onKeyUp={keyup_communityManagerFee}
{/* 小区邮箱 */} />
<Form.Item name="residentialEmail" label="Community Mailbox" rules={village[5] as any}> </Form.Item>
<Input style={{ width: '240px' }} placeholder="Please enter email" /> <Button type="text">-</Button>
<Form.Item name={['info', 'email']} noStyle rules={village[5] as any}>
<Input
style={{ marginLeft: '10px', width: '180px' }}
placeholder="Please enter email"
/>
</Form.Item>
</Input.Group>
</Form.Item> </Form.Item>
{/* 小区管理员 */}
<Form.Item <Form.Item
label="Administrator" label="Administrator"
name="residentialManagerUserName" name="residentialManagerUserName"
rules={village[6] as any} rules={village[6] as any}
> >
<Input style={{ width: '240px' }} placeholder="Please enter name" maxLength={30} /> <Input style={{ width: '160px' }} placeholder="Name" maxLength={30} />
</Form.Item> </Form.Item>
{/* 小区缴费方式 */}
<Form.Item label="Property Fee" name="propertyFee" style={{ marginBottom: '0' }}> <Form.Item label="Property Fee" name="propertyFee" style={{ marginBottom: '0' }}>
<Checkbox onChange={onChange} disabled> <Checkbox onChange={onChange} disabled>
Online Payment Online Payment
...@@ -362,75 +503,80 @@ const Adds = (props: any) => { ...@@ -362,75 +503,80 @@ const Adds = (props: any) => {
Offline Payment Offline Payment
</Checkbox> </Checkbox>
</Form.Item> </Form.Item>
<hr /> <hr />
{/* banner上传部分 */} {/* 上传部分 */}
<Form.Item <Form.Item
name={'bannerUrl'} label="Shuttle Bus Timetable"
label="Banner:" name="balouscheduleFile"
colon={false} style={{ marginBottom: '0', minHeight: 159 }}
style={{
marginBottom: 8,
}}
> >
<PictureOptionsRow <Upload
action="/tos/image/upload" {...uploads}
data={{ {...upload1}
imageType: 'communityBannerImage', fileList={loubaUpload}
// extends: codename, beforeUpload={beforeUpload}
}} listType="picture-card"
limitNums={1} disabled={codename == '' ? true : false}
// imgs={ImageSrc} onPreview={() => handlePreview(loubaUpload[0])} // 预览
/> onRemove={() => handRemove(1)} //移除
>
{loubaUpload.length >= 1 ? null : uploadButton}
</Upload>
<div className="tip">
<span>Support Files:.jpg, .png, .pdf</span>
</div>
</Form.Item> </Form.Item>
{/* 第一个上传 */}
{/* 上传部分 */}
<Form.Item <Form.Item
name={'mainPdfList'} label="Property Guide"
label="Maintenance Schedule:" name="serviceGuideFile"
colon={false} style={{ marginBottom: '0', minHeight: 159 }}
style={{
marginBottom: tips[0] ? 4 : 14,
}}
> >
<PdfUpload <Upload
action="/tos/community/pdf/upload" {...uploads}
data={{ {...upload2}
type: 'tosCommunityPdf', fileList={guideUpload}
extends: codename, beforeUpload={beforeUpload}
}} listType="picture-card"
></PdfUpload> disabled={codename == '' ? true : false}
onPreview={() => handlePreview(guideUpload[0])} // 预览
onRemove={() => handRemove(2)} //移除
>
{guideUpload.length >= 1 ? null : uploadButton}
</Upload>
<div className="tip">
<span>Support Files:.jpg, .png, .pdf</span>
</div>
</Form.Item> </Form.Item>
{tips[0] ? (
<p style={{ margin: '6px 0 10px 160px', color: '#f00' }}> {/* 上传部分 */}
Please complete or delete the incomplete part ! {/* <Form.Item
</p> label="Warranty Period Service"
) : ( name="lifeServiceFile"
'' style={{ marginBottom: '0', minHeight: 159 }}
)}
{/* 第二个上传 */}
<Form.Item
name={'essentialPdfList'}
label=" Essential Information:"
colon={false}
style={{
marginBottom: tips[1] ? 4 : 14,
}}
> >
<PdfUpload <Upload
action="/tos/community/pdf/upload" {...uploads}
data={{ {...upload3}
type: 'tosCommunityPdf', fileList={periodUpload}
extends: codename, beforeUpload={beforeUpload}
}} listType="picture-card"
></PdfUpload> disabled={codename == '' ? true : false}
</Form.Item>{' '} onPreview={() => handlePreview(periodUpload[0])} // 预览
{tips[1] ? ( onRemove={() => handRemove(3)} //移除
<p style={{ margin: '6px 0 10px 160px', color: '#f00' }}> >
Please complete or delete the incomplete part ! {periodUpload.length >= 1 ? null : uploadButton}
</p> </Upload>
) : ( <div className="tip">
'' <span>Support Files:.jpg, .png, .pdf</span>
)} </div>
</Form.Item> */}
<hr /> <hr />
{/* 帮助中心 */} {/* 帮助中心 */}
<Form.Item label="Help Center" name="help"> <Form.Item label="Help Center" name="help">
<Input.Group compact> <Input.Group compact>
...@@ -450,6 +596,7 @@ const Adds = (props: any) => { ...@@ -450,6 +596,7 @@ const Adds = (props: any) => {
</Form.Item> </Form.Item>
</Input.Group> </Input.Group>
</Form.Item> </Form.Item>
<hr /> <hr />
{/* 提交 */} {/* 提交 */}
<Form.Item label="" colon={false}> <Form.Item label="" colon={false}>
...@@ -459,6 +606,49 @@ const Adds = (props: any) => { ...@@ -459,6 +606,49 @@ const Adds = (props: any) => {
</Form.Item> </Form.Item>
</Form> </Form>
</div> </div>
{/* 附件预览 */}
<Modal
title={previewImage != null ? previewImage.name : 'File Preview'}
visible={previewVisible}
width={800}
onCancel={handleCancel}
style={{ textAlign: 'center' }}
footer={null}
>
{previewImage != null ? (
previewImage.type == 'pdf' ? (
// pdf 换一种
<>
<PDF
file={previewImage.url}
page={pageNumber}
scale={1.25}
onDocumentComplete={onDocumentLoadSuccess}
/>
<Pagination
style={{ textAlign: 'center', marginTop: 10, display: 'block' }}
simple
defaultCurrent={pageNumber}
total={numPages * 10}
onChange={onChangePage}
/>
</>
) : previewImage.type == 'jpg' || previewImage.type == 'png' ? (
// 图片用指定格式
<Image
src={previewImage.url}
preview={false}
style={{ margin: '0 auto', textAlign: 'center' }}
/>
) : (
<FileViewer fileType={previewImage.type} filePath={previewImage.url} />
)
) : (
''
)}
</Modal>
</Spin> </Spin>
</> </>
); );
...@@ -467,6 +657,7 @@ const Adds = (props: any) => { ...@@ -467,6 +657,7 @@ const Adds = (props: any) => {
// export default Adds; // export default Adds;
function map(state: any) { function map(state: any) {
// console.log(state); // console.log(state);
const Data = state.CellList.DataSave; const Data = state.CellList.DataSave;
const { imgUrl, Result } = state.CellList; const { imgUrl, Result } = state.CellList;
const loading = state.loading.models.CellList ? state.loading.models.CellList : false; const loading = state.loading.models.CellList ? state.loading.models.CellList : false;
......
...@@ -2,8 +2,6 @@ import React, { useState, useEffect } from 'react'; ...@@ -2,8 +2,6 @@ import React, { useState, useEffect } from 'react';
import { Space, Button, message, Pagination } from 'antd'; import { Space, Button, message, Pagination } from 'antd';
import { connect, history } from 'umi'; import { connect, history } from 'umi';
// 图标
import { PlusOutlined } from '@ant-design/icons';
import ProTable from '@ant-design/pro-table'; import ProTable from '@ant-design/pro-table';
import TitleSearch from '@/components/TitleSearch/TitleSearch'; import TitleSearch from '@/components/TitleSearch/TitleSearch';
...@@ -89,8 +87,9 @@ const CellLists = (props: any) => { ...@@ -89,8 +87,9 @@ const CellLists = (props: any) => {
// 清除操作之前的数据 // 清除操作之前的数据
const emptys = (data: any, url: any) => { const emptys = (data: any, url: any) => {
dispatch({ type: module + '/urlRemove' }); // 清掉图片信息 dispatch({ type: module + '/urlRemove' }); // 清掉图片信息
SA(data, module, dispatch); dispatch({ type: module + '/delRemove' }); // 清掉之前的详情
dispatch({ type: module + '/ResultClear' }); // 清空之前保存成功的结果 dispatch({ type: module + '/ResultClear' }); // 清空之前保存成功的结果
SA(data, module, dispatch);
history.push(url); history.push(url);
}; };
...@@ -198,6 +197,7 @@ function map(state: any) { ...@@ -198,6 +197,7 @@ function map(state: any) {
const loading = state.loading.models.CellList; const loading = state.loading.models.CellList;
const Init = state.Init; const Init = state.Init;
const { Data, curString, village } = state[module]; const { Data, curString, village } = state[module];
// console.log(village);
return { Data, loading, curString, village, Init }; return { Data, loading, curString, village, Init };
} }
export default connect(map)(CellLists); export default connect(map)(CellLists);
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import { LeftOutlined, EyeOutlined, PoweroffOutlined } from '@ant-design/icons'; import { LeftOutlined, EyeOutlined } from '@ant-design/icons';
import { Modal, Input, Button, Spin, Checkbox, Image, message, Divider, Result } from 'antd'; import { Modal, Input, Button, Spin, Checkbox, Image, message, Divider, Result, Form } from 'antd';
import { history } from 'umi'; import { history } from 'umi';
// 样式 // 样式
import './celllist.less'; import './celllist.less';
import { RA } from '@/utils/method'; import { RA } from '@/utils/method';
import hfor from '@/assets/h5.png'; import hfor from '@/assets/h5.png';
import PreView from '@/components/PreView'; import PictureOptionsRow from '@/components/PictureOptions/PictureOptionsRow'; // banner 上传
import PdfUpload from '@/components/Form/PdfUpload'; // 多图上传
// import PreView from '@/components/PreView';
import Axios from 'axios'; import Axios from 'axios';
import fileDownload from 'js-file-download'; import fileDownload from 'js-file-download';
...@@ -27,8 +30,10 @@ const Detail = (props: any) => { ...@@ -27,8 +30,10 @@ const Detail = (props: any) => {
const [ModelResult, setModelResult] = useState(null as any); const [ModelResult, setModelResult] = useState(null as any);
useEffect(() => { useEffect(() => {
console.log(DataSave);
if (DataSave) { if (DataSave) {
RA(32, { id: DataSave.id }, module, dispatch); // 32 老的接口 64 新的接口
RA(64, { id: DataSave.id }, module, dispatch);
} else { } else {
// 返回列表 // 返回列表
history.push('/CommunityManagement/CellList'); history.push('/CommunityManagement/CellList');
...@@ -36,9 +41,8 @@ const Detail = (props: any) => { ...@@ -36,9 +41,8 @@ const Detail = (props: any) => {
}, [1]); }, [1]);
useEffect(() => { useEffect(() => {
if (detailData == null) { if (detailData) {
// 返回列表 console.log(detailData);
history.push('/CommunityManagement/CellList');
} }
}, [detailData]); }, [detailData]);
...@@ -57,7 +61,7 @@ const Detail = (props: any) => { ...@@ -57,7 +61,7 @@ const Detail = (props: any) => {
setModelResult(overCom); setModelResult(overCom);
// 在删除搜索小区 // 在删除搜索小区
let a = detailData.rows.residentialName; // 当前删除小区 let a = detailData.communityData.residentialName; // 当前删除小区
let c = CommunityList.filter((item: any) => item != a); // 过滤掉 let c = CommunityList.filter((item: any) => item != a); // 过滤掉
dispatch({ type: 'Init/delCommunityget', playload: { Result: c } }); dispatch({ type: 'Init/delCommunityget', playload: { Result: c } });
...@@ -115,7 +119,7 @@ const Detail = (props: any) => { ...@@ -115,7 +119,7 @@ const Detail = (props: any) => {
// type: ans.substr(ans.lastIndexOf('.') + 1), // type: ans.substr(ans.lastIndexOf('.') + 1),
type: 'tosCommunityFileService', type: 'tosCommunityFileService',
fileName: ans, fileName: ans,
extends: detailData.rows.residentialName, extends: detailData.communityData.residentialName,
}; };
RA(47, msg, module, dispatch); RA(47, msg, module, dispatch);
...@@ -135,196 +139,258 @@ const Detail = (props: any) => { ...@@ -135,196 +139,258 @@ const Detail = (props: any) => {
<> <>
{!ModelExcel ? ( {!ModelExcel ? (
<Spin spinning={loading}> <Spin spinning={loading}>
{detailData.rows ? ( {detailData && detailData.communityData ? (
<div className="form" style={{ width: '100%', minHeight: '20vh' }}> <>
<h3> <div className="form" style={{ width: '100%', minHeight: '20vh' }}>
<EyeOutlined /> <h3>
&nbsp;Community Details <EyeOutlined />
<div className="back"> &nbsp;Community Details
<Button onClick={goToReturn}> <div className="back">
<LeftOutlined /> <Button onClick={goToReturn}>
Back <LeftOutlined />
</Button> Back
</div> </Button>
</h3>
<Divider />
<div className="celBox">
{/* 激活码 */}
<div className="code">
<li>Community Activation Code</li>
<div
style={{
width: 122,
height: 122,
border: '1px solid #f0f0f0',
margin: '0 auto',
}}
>
<Image width={120} src={detailData.visitorUrl} />
</div>
{/* <Image width={140} src={detailData.visitorUrl} fallback={imgs} /> */}
<li className="lis">{detailData.rows.cdkCode}</li>
</div>
{/* 详情 */}
<div className="list-item">
<div className="item">
<label>Community Name:</label>
<span>{detailData.rows.residentialName}</span>
</div>
{/* ---------- */}
<div className="item">
<label>Community Address:</label>
<span>
{detailData.rows.residentialAddress}&nbsp;&nbsp; SINGAPORE &nbsp;
{/* 这是去掉 新加坡 英文字段 */}
{detailData.rows.residentialZipCode.substring(
detailData.rows.residentialZipCode.length - 6,
detailData.rows.residentialZipCode.length,
)}{' '}
</span>
</div> </div>
{/* ---------- */} </h3>
<div className="item">
<label>Working Hours:</label> <Divider />
<span>
{detailData.rows.residentialStartWorking} -{' '} <div className="celBox">
{detailData.rows.residentialEndWorking} {/* 激活码 */}
</span> <div className="code">
<li>Community Activation Code</li>
<div
style={{
width: 122,
height: 122,
border: '1px solid #f0f0f0',
margin: '0 auto',
}}
>
<Image width={120} src={detailData.visitorUrl} />
</div>
{/* <Image width={140} src={detailData.visitorUrl} fallback={imgs} /> */}
<li className="lis">{detailData.communityData.cdkCode}</li>
</div> </div>
{/* ---------- */}
<div className="inst"> {/* 详情 */}
<div className="list-item">
<div className="item"> <div className="item">
<label>Community Telephone:</label> <label>Community Name:</label>
<span>{detailData.rows.residentialPhone}</span> <span>{detailData.communityData.residentialName}</span>
</div> </div>
{/* ---------- */}
<div className="item"> <div className="item">
<label>Community Email:</label> <label>Community Address:</label>
<span>{detailData.rows.residentialEmail}</span> <span>
{detailData.communityData.residentialAddress}&nbsp;&nbsp; SINGAPORE &nbsp;
{/* 这是去掉 新加坡 英文字段 */}
{detailData.communityData.residentialZipCode.substring(
detailData.communityData.residentialZipCode.length - 6,
detailData.communityData.residentialZipCode.length,
)}{' '}
</span>
</div>
{/* ---------- */}
<div className="item">
<label>Working Hours:</label>
<span>
{detailData.communityData.residentialStartWorking} -{' '}
{detailData.communityData.residentialEndWorking}
</span>
</div>
{/* ---------- */}
<div className="inst">
<div className="item">
<label>Community Telephone:</label>
<span>{detailData.communityData.residentialPhone}</span>
</div>
<div className="item">
<label>Community Email:</label>
<span>{detailData.communityData.residentialEmail}</span>
</div>
</div> </div>
</div>
{/* ---------- */} {/* ---------- */}
<div className="item"> <div className="item">
<label>Administrator:</label> <label>Administrator:</label>
<span>{detailData.rows.residentialManagerUserName}</span> <span>{detailData.communityData.residentialManagerUserName}</span>
</div> </div>
{/* ---------- */} {/* ---------- */}
<div className="item" style={{ marginBottom: '0' }}> <div className="item" style={{ marginBottom: '0' }}>
<label>Property Fee:</label> <label>Property Fee:</label>
<Checkbox.Group options={plainOptions} defaultValue={['1']} /> <Checkbox.Group options={plainOptions} defaultValue={['1']} />
</div>
</div> </div>
</div> </div>
</div>
<Divider /> <Divider />
<div className="celBox"> {/* 上传的图片组 */}
<div className="list-item"> <Form.Item label="Banner :" colon={false} style={{ marginBottom: 14 }}>
<div className="item"> <PictureOptionsRow
<label>Shuttle Bus Timetable:</label> action="/tos/image/upload"
<PreView OpenUrl={detailData.rows.balouscheduleUrl}></PreView> data={{
</div> imageType: 'communityBannerImage',
{/* ---------- */} // extends: codename,
<div className="item"> }}
<label>Property Guide:</label> limitNums={1}
<PreView OpenUrl={detailData.rows.serviceGuideUrl}></PreView> CommunityValue={detailData && detailData.banner ? detailData.banner : null}
// imgs={ImageSrc}
// disabled={codeStrat}
/>
</Form.Item>
<Form.Item
label="Maintenance Schedule :"
colon={false}
style={{ marginBottom: 14 }}
>
<PdfUpload
action="/tos/community/pdf/upload"
data={{
type: 'tosCommunityPdf',
// extends: codename,
}}
disabled={true}
detailvalue={
detailData && detailData.communityMainPdfList
? detailData.communityMainPdfList
: null
}
></PdfUpload>
</Form.Item>
<Form.Item
label="Essential Information :"
colon={false}
style={{ marginBottom: 14 }}
>
<PdfUpload
action="/tos/community/pdf/upload"
data={{
type: 'tosCommunityPdf',
// extends: codename,
}}
disabled={true}
detailvalue={
detailData && detailData.communityEssentialPdfList
? detailData.communityEssentialPdfList
: null
}
></PdfUpload>
</Form.Item>
<div className="formBox">
<div className="pdfform">
<p style={{ marginBottom: 6 }}>Form</p>
<Form.Item label="" colon={false} style={{ marginBottom: 0 }}>
<PdfUpload
action="/tos/community/pdf/upload"
data={{
type: 'tosCommunityPdf',
// extends: codename,
}}
disabled={true}
detailvalue={
detailData && detailData.communityFormsPdfList
? detailData.communityFormsPdfList
: null
}
></PdfUpload>
</Form.Item>
</div> </div>
{/* ---------- */}
{/* <div className="item">
<label>Warranty Period Service:</label>
<PreView OpenUrl={detailData.rows.lifeServiceUrl}></PreView>
</div> */}
</div> </div>
</div>
<Divider /> <Divider />
<div className="celBox"> <div className="celBox">
<div className="list-item"> <div className="list-item">
<div className="item item_span"> <div className="item item_span">
<label>Help Center:</label> <label>Help Center:</label>
<span>{detailData.rows.residentialHotlineName}</span> <span>{detailData.communityData.residentialHotlineName}</span>
<span>{detailData.rows.residentialHotline}</span> <span>{detailData.communityData.residentialHotline}</span>
<span>{detailData.rows.residentialHotlineServieStartTime}</span> <span>{detailData.communityData.residentialHotlineServieStartTime}</span>
<span>{detailData.rows.residentialHotlineServieStartTime ? '-' : ''}</span> <span>
<span>{detailData.rows.residentialHotlineServieEndTime}</span> {detailData.communityData.residentialHotlineServieStartTime ? '-' : ''}
</span>
<span>{detailData.communityData.residentialHotlineServieEndTime}</span>
</div>
</div> </div>
</div> </div>
</div>
<Divider /> <Divider />
<div className="celBox"> <div className="celBox">
<div className="list-item"> <div className="list-item">
<div className="item"> <div className="item">
<label>Temporary Code:</label> <label>Temporary Code:</label>
<Image width={64} src={hfor} /> <Image width={64} src={hfor} />
<Button <Button
type="link" type="link"
onClick={() => { onClick={() => {
openDows(require('@/assets/h5.png'), 'code.png'); openDows(require('@/assets/h5.png'), 'code.png');
}} }}
> >
Download Download
</Button> </Button>
<Input
placeholder="Basic usage"
disabled
style={{ width: '280px' }}
value="http://47.74.233.180:8651/tosVisitorNo"
/>
<Button
type="link"
onClick={() => {
copy('http://47.74.233.180:8651/tosVisitorNo');
}}
>
Copy
</Button>
</div>
</div>
</div>
<Input {user && user.currentUser.permission.includes('47') ? (
placeholder="Basic usage" <div>
disabled <Divider />
style={{ width: '280px' }}
value="http://47.74.233.180:8651/tosVisitorNo"
/>
<Button <Button
type="link" danger
onClick={() => { style={{ marginRight: '15px' }}
copy('http://47.74.233.180:8651/tosVisitorNo'); loading={false}
}} onClick={openModel}
> >
Copy {' '}
<span className="capi">Close the community</span>
</Button> </Button>
</div> </div>
</div> ) : (
''
)}
{/* 确认关闭框 */}
<Modal
title="Are You Sure You Want To Close The Community ?"
visible={ModelFee}
centered={true}
onCancel={handleCancel}
onOk={handleOk}
okText="Yes"
cancelText="No"
okType="danger"
confirmLoading={loading}
>
<p className="capi">
Close the community will delete{' '}
<span style={{ color: 'red' }}> all owners </span>
in the community .
</p>
<p className="capi">please operate carefully!</p>
</Modal>
</div> </div>
</>
{user && user.currentUser.permission.includes('47') ? (
<div>
<Divider />
<Button
danger
style={{ marginRight: '15px' }}
loading={false}
onClick={openModel}
>
{' '}
<span className="capi">Close the community</span>
</Button>
</div>
) : (
''
)}
{/* 确认关闭框 */}
<Modal
title="Are You Sure You Want To Close The Community ?"
visible={ModelFee}
centered={true}
onCancel={handleCancel}
onOk={handleOk}
okText="Yes"
cancelText="No"
okType="danger"
confirmLoading={loading}
>
<p className="capi">
Close the community will delete <span style={{ color: 'red' }}> all owners </span>
in the community .
</p>
<p className="capi">please operate carefully!</p>
</Modal>
</div>
) : ( ) : (
'' ''
)} )}
......
...@@ -168,3 +168,14 @@ img { ...@@ -168,3 +168,14 @@ img {
} }
} }
} }
// 第三个上传
.formBox {
margin: 20px 0 20px 160px;
.acitves {
}
.pdfform {
background: #f4f4f4;
padding: 15px;
}
}
/* /*
* @Author: your name * @Author: your name
* @Date: 2020-11-19 20:34:18 * @Date: 2020-11-19 20:34:18
* @LastEditTime: 2021-02-18 16:50:47 * @LastEditTime: 2021-02-20 18:14:15
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: \tostumi\src\utils\params.ts * @FilePath: \tostumi\src\utils\params.ts
...@@ -96,4 +96,7 @@ export const requestList = [ ...@@ -96,4 +96,7 @@ export const requestList = [
['/tos/bookingService/delete', '61 设施删除', {}], ['/tos/bookingService/delete', '61 设施删除', {}],
['/tos/community/download/excel', '62 关闭小区后获取当前小区预约需要退费的表格', {}], ['/tos/community/download/excel', '62 关闭小区后获取当前小区预约需要退费的表格', {}],
['/tos/tosCommunity/saveCommunity', '63 新建小区PDF版本', {}], ['/tos/tosCommunity/saveCommunity', '63 新建小区PDF版本', {}],
['/tos/tosCommunity/get/detail2', '64 获取小区详情(新增)', {}],
['/tos/tosCompany/edit', '65 修改公司信息', {}],
['/tos/tosCompany/get', '66 获取公司信息', {}],
]; ];
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