Skip to content

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

新建编辑小区 附件上传预览重做更新，文案修复 

Signed-off-by: cellee's avatarcellee <893264950@qq.com>
parent f0bf87b9
Hide whitespace changes
Inline Side-by-side
Showing with 194 additions and 44 deletions
src/models/CommunityManagement/CellList.ts
View file @ 2b7a1dde
......@@ -76,7 +76,12 @@ export default {
{
let Result = resp;
yield put({ type: 'returnResult', Result });
// 新增成功清空Data 用来刷新最新数据
let Data = null;
let village = null;
yield put({ type: 'returnPage', Data });
yield put({ type: 'returnVillage', village });
// 提示跳转
message.success(`Information saved successfully!`);
history.push('/CommunityManagement/CellList');
}
......
src/pages/CommunityManagement/CellList/Adds.tsx
View file @ 2b7a1dde
import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { LeftOutlined, EditOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import {
LeftOutlined,
EditOutlined,
UploadOutlined,
LinkOutlined,
PlusOutlined,
} from '@ant-design/icons';
import { Form, Input, Button, TimePicker, Checkbox, Upload, message, Spin } from 'antd';
Form,
Input,
Image,
Button,
TimePicker,
Checkbox,
Upload,
message,
Spin,
Modal,
Pagination,
} from 'antd';
// 样式
import './celllist.less';
import { RA, ResultClear } from '@/utils/method';
......@@ -18,13 +24,18 @@ import moment from 'moment';
import { getNumber } from '@/utils/string'; // 正则
import imgs from '@/assets/logo_icon_bg.png';
import FileViewer from 'react-file-viewer';
import PDF from 'react-pdf-js';
const { RangePicker } = TimePicker;
// 接口申明
interface objc {}
const Adds = (props: any) => {
const { Data, dispatch, loading, Result } = props;
const module = 'CellList';
const { Data, dispatch, loading, Result, imgUrl } = props;
const [form] = Form.useForm();
......@@ -34,20 +45,26 @@ const Adds = (props: any) => {
{ label: 'Offline Payment', value: '1' },
];
// 表单物业费提交值
const [PropertyFee, setPropertyFee] = useState(['1']);
// 楼巴上传列表
const [loubaUpload, setLouba] = useState([] as any);
// 物业办事指南列表
const [guideUpload, setGuide] = useState([] as any);
// 保质期服务列表
const [periodUpload, setPeriod] = useState([] as any);
const [PropertyFee, setPropertyFee] = useState(['1']); // 表单物业费提交值
const [loubaUpload, setLouba] = useState([] as any); // 楼巴上传列表
const [guideUpload, setGuide] = useState([] as any); // 物业办事指南列表
const [periodUpload, setPeriod] = useState([] as any); // 保质期服务列表
// 监听用户填写小区名 以及后续禁止输入 提示信息
const [codename, setCodeName] = useState('');
const [codeStrat, setcodeStrat] = useState(false);
const [tipMain, setTipMain] = useState('');
const [previewVisible, setpreviewVisible] = useState(false); // 预览弹窗显示隐藏
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(() => {
// 如果是添加传来没有值的时候 就清空 否则 赋值给表单
......@@ -96,12 +113,31 @@ const Adds = (props: any) => {
}
}, [Data]);
// 返回上传格式 和 地址
function backUpload(str: string, index: number, url?: any) {
// 监听编辑预览是否获取到地址以及发生改变
useEffect(() => {
if (imgUrl != null) {
let info = {
uid: '1',
name: imgUrl.name,
status: 'done',
type: imgUrl.name.match(/\.([^\.]+)$/)[1].toLowerCase(),
url: imgUrl.url,
};
console.log(info);
setpreviewImage(info);
setpreviewVisible(true);
// openDows(imgUrl.url, imgUrl.name);
}
}, [imgUrl]);
// 编辑 返回上传格式 和 地址
function backUpload(str: any, index: number, url?: any) {
let a = {
uid: str + index,
name: str,
url: url ? url : imgs,
status: 'done',
type: str.match(/\.([^\.]+)$/)[1].toLowerCase(),
url: 'Transfer', // 需要调取接口
};
return a;
}
......@@ -114,13 +150,36 @@ const Adds = (props: any) => {
data: { imageType: 'tosCreateCommunity', extends: codename },
};
// 文件上传判断
function beforeUpload(file: any) {
// 文件大小判断
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('Image must smaller than 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, fileList }: any) {
console.log(file);
console.log(fileList);
onChange({ file }: any) {
file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
if (file.status === 'done') {
setLouba(fileList);
setLouba(BackFormat(file.name, file.response.data));
setcodeStrat(true);
setTipMain('Binding Content Already Exists, Cannot Be Modified！');
}
......@@ -128,11 +187,13 @@ const Adds = (props: any) => {
uploadMsg(file);
},
};
// 指南上传
const upload2 = {
onChange({ file, fileList }: any) {
file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
if (file.status === 'done') {
setGuide(fileList);
setGuide(BackFormat(file.name, file.response.data));
setcodeStrat(true);
setTipMain('Binding Content Already Exists, Cannot Be Modified！');
}
......@@ -144,8 +205,9 @@ const Adds = (props: any) => {
// 保质期上传
const upload3 = {
onChange({ file, fileList }: any) {
file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
if (file.status === 'done') {
setPeriod(fileList);
setPeriod(BackFormat(file.name, file.response.data));
setcodeStrat(true);
setTipMain('Binding Content Already Exists, Cannot Be Modified！');
}
......@@ -275,11 +337,52 @@ const Adds = (props: any) => {
// 上传按钮
const uploadButton = (
<div>
<PlusOutlined />
{imgLoad ? <LoadingOutlined /> : <PlusOutlined />}
<div style={{ marginTop: 8 }}>Upload</div>
</div>
);
// 文件预览
const handlePreview = async (file: any) => {
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);
}
};
// 点击移除图片
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 (
<>
<Spin spinning={loading} tip="loading..." size="large">
......@@ -370,9 +473,6 @@ const Adds = (props: any) => {
rules={village[6] as any}
>
<Input style={{ width: '160px' }} placeholder="Contacts" maxLength={30} />
{/* <Button type="text">
<PlusCircleOutlined style={{ fontSize: '18px', color: '#08c' }} />
</Button> */}
</Form.Item>
<Form.Item label="Property Fee" name="propertyFee" style={{ marginBottom: '0' }}>
......@@ -382,15 +482,6 @@ const Adds = (props: any) => {
<Checkbox onChange={onChange} checked>
Offline Payment
</Checkbox>
{/* <Checkbox.Group
options={plainOptions}
defaultValue={PropertyFee}
onChange={onChange}
/> */}
{/* <div className="tip capi">
<span>*</span>There will be a service charge for online payment
</div> */}
</Form.Item>
<hr />
......@@ -405,8 +496,11 @@ const Adds = (props: any) => {
{...uploads}
{...upload1}
fileList={loubaUpload}
beforeUpload={beforeUpload}
listType="picture-card"
disabled={codename == '' ? true : false}
onPreview={() => handlePreview(loubaUpload[0])} // 预览
onRemove={() => handRemove(1)} //移除
>
{loubaUpload.length >= 1 ? null : uploadButton}
</Upload>
......@@ -421,8 +515,11 @@ const Adds = (props: any) => {
{...uploads}
{...upload2}
fileList={guideUpload}
beforeUpload={beforeUpload}
listType="picture-card"
disabled={codename == '' ? true : false}
onPreview={() => handlePreview(guideUpload[0])} // 预览
onRemove={() => handRemove(2)} //移除
>
{guideUpload.length >= 1 ? null : uploadButton}
</Upload>
......@@ -441,8 +538,11 @@ const Adds = (props: any) => {
{...uploads}
{...upload3}
fileList={periodUpload}
beforeUpload={beforeUpload}
listType="picture-card"
disabled={codename == '' ? true : false}
onPreview={() => handlePreview(periodUpload[0])} // 预览
onRemove={() => handRemove(3)} //移除
>
{periodUpload.length >= 1 ? null : uploadButton}
</Upload>
......@@ -482,6 +582,49 @@ const Adds = (props: any) => {
</Form.Item>
</Form>
</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>
</>
);
......@@ -491,8 +634,9 @@ const Adds = (props: any) => {
function map(state: any) {
// console.log(state);
const Data = state.CellList.DataSave;
const { imgUrl } = state.CellList;
const loading = state.loading.models.CellList ? state.loading.models.CellList : false;
const { Result } = state.CellList;
return { Data, loading, Result };
return { Data, loading, Result, imgUrl };
}
export default connect(map)(Adds);
src/pages/CommunityManagement/CellList/CellList.tsx
View file @ 2b7a1dde
......@@ -119,7 +119,7 @@ const CellLists = (props: any) => {
if (comment.communityName.length > 0 || typeof comment.label !== 'undefined') {
let obj = {
residentialManagerUserName: comment.label,
communityNameList: comment.communityName,
communityNameList: comment.communityName.length > 0 ? comment.communityName : null, // 如果为空就返回null 否则后台不好判断
pageNum: 1,
};
setTerm(obj); // 存进搜索条件
......@@ -205,6 +205,7 @@ const CellLists = (props: any) => {
};
function map(state: any) {
console.log(state);
const loading = state.loading.models.CellList;
const { Data, curString, village } = state[module];
return { Data, loading, curString, village };
......
src/pages/CommunityManagement/CellList/Details.tsx
View file @ 2b7a1dde
......@@ -197,7 +197,7 @@ const Detail = (props: any) => {
{/* ---------- */}
<div className="item">
<label>Administrators：</label>
<label>Administrator：</label>
<span>{detailData.rows.residentialManagerUserName}</span>
</div>
{/* ---------- */}
......@@ -213,7 +213,7 @@ const Detail = (props: any) => {
<div className="celBox">
<div className="list-item">
<div className="item">
<label>Louba Timetable：</label>
<label>Shuttle Bus Timetable：</label>
<PreView OpenUrl={detailData.rows.balouscheduleUrl}></PreView>
</div>
{/* ---------- */}
......@@ -223,7 +223,7 @@ const Detail = (props: any) => {
</div>
{/* ---------- */}
<div className="item">
<label>Shelf Life Service：</label>
<label>Warranty Period Service：</label>
<PreView OpenUrl={detailData.rows.lifeServiceUrl}></PreView>
</div>
</div>
......
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