Skip to content

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

预览组件重做，bug修复 

Signed-off-by: cellee's avatarcellee <893264950@qq.com>
parent f4c7c6cc
Show whitespace changes
Inline Side-by-side
Showing with 83 additions and 116 deletions
src/components/PictureOptions/PictureOptionsRow.tsx
View file @ 264be1ad
import React, { useState, useEffect } from 'react';
import { Upload, Modal, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
function getBase64(file: File) {
return new Promise((resolve, reject) => {
......@@ -12,12 +12,6 @@ function getBase64(file: File) {
});
}
const uploadButton = (
<div>
<PlusOutlined />
<div className="ant-upload-text">Upload</div>
</div>
);
import { getUrlPicName } from '../../utils/string';
const PictureOptionsRow = (props: any) => {
const { value, onChange, limitNums } = props;
......@@ -27,6 +21,8 @@ const PictureOptionsRow = (props: any) => {
const [limitNum, setLimitNum] = useState(5);
const handleCancel = () => setPreviewVisible(false);
const [imgLoad, setimgLoad] = useState(false); //图片上传 load状态
useEffect(() => {
if (limitNums != null) {
setLimitNum(limitNums);
......@@ -74,28 +70,13 @@ const PictureOptionsRow = (props: any) => {
// }
}, [props.defaultValue]);
// useEffect(() => {
// if (props.disabled) {
// if (value != null) {
// var tmp = value
// var result = new Array()
// var resultToInside = new Array()
// console.log("图片集使用表单组件");
// console.log(tmp)
// if (tmp.url != null) {
// tmp.map((item: any, index: any) => {
// if (item.name == null) {
// item.name = getUrlPicName(item.url)
// item.uid = index
// }
// result.push(item)
// resultToInside.push(item.name)
// })
// setFileList(result)
// }
// }
// }
// }, [value])
// 加载logo
const uploadButton = (
<div>
{imgLoad ? <LoadingOutlined /> : <PlusOutlined />}
<div className="ant-upload-text">Upload</div>
</div>
);
const handlePreview = async (file: any) => {
if (!file.url && !file.preview) {
......@@ -108,13 +89,20 @@ const PictureOptionsRow = (props: any) => {
const handleChange = ({ file, fileList }: any) => {
// 给传递的附加名字
// props.data.fileName = fileList[0].name;
let tmp = fileList;
setFileList(tmp.filter((file: any) => !!file.status || file.status == null));
file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
if (file.status == 'done') {
let tmp = fileList.filter((file: any) => {
return file.status == 'done';
});
setFileList(tmp);
var result = new Array();
fileList.map((item: { name: string }, index: number) => {
tmp.map((item: { name: string }, index: number) => {
result.push(item.name);
});
onChange(result);
}
};
function beforeUpload(file: any) {
// 文件类型判断
......@@ -123,10 +111,9 @@ const PictureOptionsRow = (props: any) => {
if (!isJpgOrPng) {
message.error('You can only upload JPG/PNG file!');
}
// 文件大小判断
const isLt2M = file.size / 1024 / 1024 <= 2;
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('Image must be less than or equal to 2MB!');
message.error('Image must smaller than 2MB!');
}
return isJpgOrPng && isLt2M;
}
......@@ -148,6 +135,7 @@ const PictureOptionsRow = (props: any) => {
</Upload>
<Modal
title="Preview"
width={640}
footer={null}
visible={previewVisible}
onOk={handleCancel}
......
src/components/PreView/PreViewTow.tsx
View file @ 264be1ad
......@@ -15,7 +15,7 @@ import FileViewer from 'react-file-viewer';
import { stringSplit } from '@/utils/string';
const PreView = (props: any) => {
const { OpenUrl, loading } = props;
const { OpenUrl, loading, dispatch } = props;
const [Icon, setIcon] = useState(null as any); // 图标显示哪一个控制
const [ModalTip, setModalTip] = useState(false); // 弹窗控制
......@@ -25,7 +25,6 @@ const PreView = (props: any) => {
// 图标显示判断
useEffect(() => {
console.log(OpenUrl);
if (OpenUrl) {
OpenUrl.type == 'pdf' ? setIcon(IconPdf) : setIcon(IconImg);
} else {
......@@ -36,6 +35,8 @@ const PreView = (props: any) => {
//点击预览
const opens = () => {
setModalTip(true);
// 每次关闭预览都要清掉弹窗图片信息 -- 防止编辑打开页面直接弹出窗口
// dispatch({ type: 'CellList/urlRemove' });
};
// 隐藏弹窗
......@@ -90,7 +91,8 @@ const PreView = (props: any) => {
{OpenUrl != null && OpenUrl.type == 'pdf' ? (
<>
<PDF
file={OpenUrl ? stringSplit(OpenUrl.url, 'm/cash') : ''}
// file={OpenUrl ? stringSplit(OpenUrl.url, 'm/cash') : ''}
file={OpenUrl ? OpenUrl : ''}
page={pageNumber}
scale={1.25}
onDocumentComplete={onDocumentLoadSuccess}
......
src/components/PreView/index.tsx
View file @ 264be1ad
......@@ -27,7 +27,6 @@ const PreView = (props: any) => {
// 图标显示判断
useEffect(() => {
console.log(OpenUrl);
if (OpenUrl) {
OpenUrl.match(/\.([^\.]+)$/)[1].toLowerCase() == 'pdf' ? setIcon(IconPdf) : setIcon(IconImg);
} else {
......@@ -59,6 +58,8 @@ const PreView = (props: any) => {
extends: CellList.detailData.rows.residentialName,
};
RA(47, msg, module, dispatch);
// 每次关闭预览都要清掉弹窗图片信息 -- 防止编辑打开页面直接弹出窗口
dispatch({ type: 'CellList/urlRemove' });
};
// 隐藏弹窗
......@@ -115,7 +116,8 @@ const PreView = (props: any) => {
{ModalInfo != null && ModalInfo.type == 'pdf' ? (
<>
<PDF
file={ModalInfo ? stringSplit(ModalInfo.url, 'm/cash') : ''}
// file={ModalInfo ? stringSplit(ModalInfo.url, 'm/cash') : ''}
file={ModalInfo ? ModalInfo.url : ''}
page={pageNumber}
onDocumentComplete={onDocumentLoadSuccess}
/>
......
src/models/CommunityManagement/CellList.ts
View file @ 264be1ad
......@@ -28,7 +28,6 @@ export default {
return { ...state, Result };
},
returnDataSave(state, { DataSave }) {
console.log(DataSave);
return { ...state, DataSave };
},
returnDataSaveDetail(state, { detailData }) {
......@@ -60,7 +59,6 @@ export default {
printf(playload, resp);
message.error(`${resp.error_code}:${resp.error_msg}`);
} else {
console.log('成功？');
switch (playload.index) {
case 24:
{
......@@ -118,8 +116,8 @@ export default {
},
*urlRemove({}, { put }) {
let nus = null;
yield put({ type: 'returnImgurl', nus });
let imgUrl = null;
yield put({ type: 'returnImgurl', imgUrl });
},
*comRemove({}, { put }) {
......
src/pages/CommunityManagement/CellList/Adds.tsx
View file @ 264be1ad
......@@ -69,7 +69,6 @@ const Adds = (props: any) => {
useEffect(() => {
// 如果是添加传来没有值的时候 就清空 否则 赋值给表单
if (Data) {
console.log(Data);
// 返回列表
form.setFieldsValue({
// 必填的
......@@ -109,7 +108,7 @@ const Adds = (props: any) => {
setcodeStrat(true);
setTipMain('Binding Content Already Exists, Cannot Be Modified！');
} else {
console.log('新建');
// console.log('新建');
}
}, [Data]);
......@@ -123,7 +122,6 @@ const Adds = (props: any) => {
type: imgUrl.name.match(/\.([^\.]+)$/)[1].toLowerCase(),
url: imgUrl.url,
};
console.log(info);
setpreviewImage(info);
setpreviewVisible(true);
// openDows(imgUrl.url, imgUrl.name);
......@@ -155,7 +153,7 @@ const Adds = (props: any) => {
// 文件大小判断
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('Image must smaller than 2MB!');
message.error('File must be less than or equal to 2MB!');
}
return isLt2M;
}
......@@ -244,9 +242,10 @@ const Adds = (props: any) => {
const onFinish = (values: any) => {
let { residentialZipCode, residentialAddress, residentialName } = values.des;
let tel = values.info.tel;
if (residentialZipCode.length < 6) {
message.error('Please Enter 6-digit Zip Code！');
if (values.residentialManagerUserName.length < 2) {
message.error('Please Enter 2-digit Zip Code！');
} else if (residentialZipCode.length < 6) {
message.error('Please Enter The Correct Name！');
} else if (tel.length != 8 && tel.length != 11) {
message.error('Incorrect Contact Information！');
} else {
......@@ -286,7 +285,7 @@ const Adds = (props: any) => {
obj.residentialHotlineName = values.help.residentialHotlineName
? undeFi(values.help.residentialHotlineName)
: 'Community Hotline';
obj.residentialHotline = values.help.residentialHotlineName
obj.residentialHotline = values.help.residentialHotline
? undeFi(values.help.residentialHotline)
: values.info.tel;
// 编辑的时候 为空 判断
......@@ -307,6 +306,7 @@ const Adds = (props: any) => {
if (Data) {
obj.id = Data.id;
}
console.log(values);
console.log(obj);
// 上传
RA(29, obj, 'CellList', dispatch);
......@@ -314,7 +314,6 @@ const Adds = (props: any) => {
// 返回
const goToReturn = () => {
// console.log(fileList)
history.go(-1);
};
......@@ -404,6 +403,7 @@ const Adds = (props: any) => {
wrapperCol={{ span: 18 }}
layout="horizontal"
labelAlign="left"
scrollToFirstError={true}
>
<Form.Item label="Community Name" name="des" rules={[{ required: false }]}>
<Input.Group compact>
......@@ -632,7 +632,6 @@ const Adds = (props: any) => {
// export default Adds;
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;
......
src/pages/CommunityManagement/CellList/CellList.tsx
View file @ 264be1ad
......@@ -89,7 +89,6 @@ const CellLists = (props: any) => {
// 监听是否有数据
useEffect(() => {
if (village == null) {
console.log(term);
RA(48, term, module, dispatch);
}
}, [village]);
......@@ -99,15 +98,16 @@ const CellLists = (props: any) => {
};
const goToAdd = () => {
SA(null, module, dispatch); // 清空之前传递的数据
dispatch({ type: module + '/urlRemove' }); // 清掉图片信息
history.push('/CommunityManagement/CellList/Add');
};
const goToEdit = (values: any, e: any) => {
// console.log(values);
dispatch({ type: module + '/urlRemove' }); // 清掉图片信息
SA(values, module, dispatch);
history.push('/CommunityManagement/CellList/Add');
};
const goToDetail = (values: any, e: any) => {
// console.log(values);
dispatch({ type: module + '/urlRemove' }); // 清掉图片信息
SA(values, module, dispatch);
history.push('/CommunityManagement/CellList/Detail');
};
......@@ -115,7 +115,6 @@ const CellLists = (props: any) => {
// 点击搜索
const CallBackTitleSearch = (comment: any) => {
console.log(comment);
if (comment.communityName.length > 0 || typeof comment.label !== 'undefined') {
let obj = {
residentialManagerUserName: comment.label,
......@@ -205,7 +204,6 @@ 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/CommunityAnnouncement/Add.tsx
View file @ 264be1ad
......@@ -125,7 +125,7 @@ const Add = (props: any) => {
tmp.noticEndTime = values.noticEndTime ? values.noticEndTime.format('YYYY-MM-DD') : null;
delete tmp.community;
delete tmp.file;
// RA(28, tmp, module, dispatch);
RA(28, tmp, module, dispatch);
};
// 设置之前时间不能选择
......
src/pages/ContractManagement/Contract.tsx
View file @ 264be1ad
......@@ -82,8 +82,8 @@ const Contract = (props: any) => {
{ title: 'Community Name', dataIndex: 'communityName' }, // 小区名
{ title: 'Contacts', dataIndex: 'communityAccount' }, // 联系人
{ title: 'Phone', dataIndex: 'communityPhone' }, // 联系电话
{ title: 'Valid Start Date', dataIndex: 'contractValidStartDate' }, // 生效时间
{ title: 'Valid End Date', dataIndex: 'contractValidEndDate' }, // 到期时间
{ title: 'Start Date', dataIndex: 'contractValidStartDate' }, // 生效时间
{ title: 'End Date', dataIndex: 'contractValidEndDate' }, // 到期时间
// { title: "Contract File", dataIndex: 'contractFileName' }, // 附件
{
title: 'Actions',
......
src/pages/ContractManagement/ContractContent.tsx
View file @ 264be1ad
......@@ -164,7 +164,7 @@ const ContractContent = (props: any) => {
// 上传文件设置
const uploadProps = {
accept: '.doc,.docx,.jpg,.png,.pdf',
accept: '.docx,.jpg,.png,.pdf',
action: '/tos/image/upload',
data: { imageType: 'tosContract', extends: comtyName },
fileList: fileList,
......@@ -309,9 +309,7 @@ const ContractContent = (props: any) => {
// initialValues={defForm}
>
<div className="contract_box">
{/* 合同编号、甲方、乙方 */}
<div className="list_1">
<div className="item_1">
<div className="list2">
<Form.Item
name="contractNumber"
label="Contract Number"
......@@ -320,13 +318,15 @@ const ContractContent = (props: any) => {
<Input style={{ width: 200 }} placeholder="Contract Number" />
</Form.Item>
</div>
{/* 合同编号、甲方、乙方 */}
<div className="list_1">
<div className="item_1">
<Form.Item
name="contractPartyA"
label="Contract Party A"
rules={[{ required: true, message: `${tipList[1]}` }]}
>
<Input style={{ width: 200 }} placeholder="Contract Party A" />
<Input style={{ width: 300 }} placeholder="Contract Party A" />
</Form.Item>
</div>
<div className="item_1">
......@@ -335,7 +335,7 @@ const ContractContent = (props: any) => {
label="Contract Party B"
rules={[{ required: true, message: `${tipList[2]}` }]}
>
<Input style={{ width: 200 }} placeholder="Contract Party B" />
<Input style={{ width: 300 }} placeholder="Contract Party B" />
</Form.Item>
</div>
</div>
......@@ -364,7 +364,7 @@ const ContractContent = (props: any) => {
label="Contract Title"
rules={[{ required: true, message: `${tipList[4]}` }]}
>
<Input style={{ width: 200 }} placeholder="Contract Title" />
<Input style={{ width: 500 }} placeholder="Contract Title" />
</Form.Item>
</div>
......@@ -478,28 +478,6 @@ const ContractContent = (props: any) => {
total={numPages * 10}
onChange={onChangePage}
/>
{/* <Document
// file={stringSplit(fileInfo.url, 'm/cash')} //文档地址
file={stringSplit(fileInfo.url, 'm/cash')} //文档地址
onLoadSuccess={onDocumentLoadSuccess}
scale={1.25}
>
<Page
key={numPages}
defaultCurrent={numPages} //当前页页码
pageNumber={pageNumber}
scale={1.25}
// width={800}
/>
</Document>
<Pagination
style={{ textAlign: 'center', marginTop: 10, display: 'block' }}
simple
defaultCurrent={pageNumber}
total={numPages * 10}
onChange={onChangePage}
/> */}
</>
) : fileInfo.type == 'jpg' || fileInfo.type == 'png' ? (
// 图片用指定格式
......
src/pages/ContractManagement/ContractDetail.tsx
View file @ 264be1ad
......@@ -162,7 +162,7 @@ const ContractContent = (props: any) => {
// 上传文件设置
const uploadProps = {
accept: '.doc,.docx,.jpg,.png,.pdf',
accept: '.docx,.jpg,.png,.pdf',
action: '/tos/image/upload',
data: { imageType: 'tosContract', extends: comtyName },
fileList: fileList,
......@@ -272,9 +272,7 @@ const ContractContent = (props: any) => {
// initialValues={defForm}
>
<div className="contract_box">
{/* 合同编号、甲方、乙方 */}
<div className="list_1">
<div className="item_1">
<div className="list2">
<Form.Item
name="contractNumber"
label="Contract Number"
......@@ -283,13 +281,15 @@ const ContractContent = (props: any) => {
<Input style={{ width: 200 }} disabled placeholder="Contract Number" />
</Form.Item>
</div>
{/* 合同编号、甲方、乙方 */}
<div className="list_1">
<div className="item_1">
<Form.Item
name="contractPartyA"
label="Contract Party A"
rules={[{ required: true, message: `${tipList[1]}` }]}
>
<Input style={{ width: 200 }} disabled placeholder="Contract Party A" />
<Input style={{ width: 300 }} disabled placeholder="Contract Party A" />
</Form.Item>
</div>
<div className="item_1">
......@@ -298,7 +298,7 @@ const ContractContent = (props: any) => {
label="Contract Party B"
rules={[{ required: true, message: `${tipList[2]}` }]}
>
<Input style={{ width: 200 }} disabled placeholder="Contract Party B" />
<Input style={{ width: 300 }} disabled placeholder="Contract Party B" />
</Form.Item>
</div>
</div>
......@@ -328,7 +328,7 @@ const ContractContent = (props: any) => {
label="Contract Title"
rules={[{ required: true, message: `${tipList[4]}` }]}
>
<Input style={{ width: 200 }} disabled placeholder="Contract Title" />
<Input style={{ width: 500 }} disabled placeholder="Contract Title" />
</Form.Item>
</div>
......@@ -429,7 +429,8 @@ const ContractContent = (props: any) => {
// pdf 换一种
<>
<PDF
file={stringSplit(fileInfo.url, 'm/cash')}
// file={stringSplit(fileInfo.url, 'm/cash')}
file={fileInfo.url}
page={pageNumber}
scale={1.25}
onDocumentComplete={onDocumentLoadSuccess}
......@@ -453,7 +454,8 @@ const ContractContent = (props: any) => {
) : (
<FileViewer
fileType={fileInfo.type}
filePath={stringSplit(fileInfo.url, 'm/cash')}
// filePath={stringSplit(fileInfo.url, 'm/cash')}
filePath={fileInfo.url}
/>
)
) : (
......
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