Skip to content

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

useReducer的 使用 

Signed-off-by: cellee's avatarcellee <893264950@qq.com>
parent a9e0b23a
Show whitespace changes
Inline Side-by-side
Showing with 707 additions and 146 deletions
src/layouts/SecurityLayout.tsx
View file @ 139b07d7
......@@ -5,7 +5,7 @@ import { stringify } from 'querystring';
import { ConnectState } from '@/models/connect';
import { CurrentUser } from '@/models/user';
import { getCookie } from '@/utils/method';
import { Result, Button } from 'antd';
import { message } from 'antd';
interface SecurityLayoutProps extends ConnectProps {
loading?: boolean;
......@@ -105,6 +105,13 @@ class SecurityLayout extends React.Component<SecurityLayoutProps, SecurityLayout
const permission = JSON.parse(localStorage.getItem('permission') || '[]');
// 用户重新打开需要重新登录
const tokenLogin = JSON.parse(sessionStorage.getItem('token') || '[]');
if (tokenLogin.length == 0) {
message.warning('Login Expired !');
return <Redirect to={`/user/login`} />;
}
let perObj = perList.filter((obj) => {
return obj.path === location.pathname;
});
......
src/models/login.ts
View file @ 139b07d7
......@@ -97,6 +97,9 @@ const Model: LoginModelType = {
localStorage.setItem('userInfo', JSON.stringify(userMessage));
localStorage.setItem('permission', JSON.stringify(userMessage.permission));
console.log('获取到Token:' + getCookie('token'));
// 设置 session 登录 token
sessionStorage.setItem('token', JSON.stringify(userMessage.token));
yield put({
type: 'saveToken',
token: userMessage.token,
......
src/pages/CommunityManagement/FacilityBookings/BookingDetail.tsx
View file @ 139b07d7
......@@ -152,7 +152,7 @@ const BookingDetail = (props: any) => {
{DataSave.communityName}
</Descriptions.Item>
<Descriptions.Item label="Booking Facilities">
{DataSave.facilityTitle}
{DataSave.categoriesName}
</Descriptions.Item>
<Descriptions.Item label="Booking Time">
{DataSave.subscribeDate} {ExtractTime}
......
src/pages/ContractManagement/Contract.tsx
View file @ 139b07d7
......@@ -124,11 +124,6 @@ const Contract = (props: any) => {
RA(19, obj);
};
// 刷新
const onReset2 = () => {
RA(19, term);
};
// 表单提交
const onFinishContract = (value: any) => {
if (!value.communityName && !value.contractNumber && !value.contractTitle) {
......@@ -213,7 +208,7 @@ const Contract = (props: any) => {
density: false,
fullScreen: false,
reload: () => {
onReset2();
onReset();
},
setting: false,
}}
......
src/pages/ContractManagement/ContractContent copy.tsx 0 → 100644
View file @ 139b07d7
import React, { useState, useEffect, useRef } from 'react';
import styles from './ContractContent.less';
import {
Input,
Form,
message,
Upload,
Button,
DatePicker,
Pagination,
Modal,
Spin,
Image,
} from 'antd';
import { PlusOutlined, LeftOutlined, LoadingOutlined } from '@ant-design/icons';
import { Link, useIntl, connect, Dispatch, Loading } from 'umi';
import { RA } from '@/services/tos';
import LINE from '../../components/Line/Line';
import TextArea from 'antd/lib/input/TextArea';
import moment from 'moment';
import './ContractContent.less';
// 配置英文
import 'moment/locale/en-au';
import locale from 'antd/es/date-picker/locale/en_US';
import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommnity';
import { tipList } from '@/utils/tip';
import FileViewer from 'react-file-viewer';
import PDF from 'react-pdf-js';
import { randomString } from '@/utils/string';
const ContractContent = (props: any) => {
const { Contract, dispatch, FileImg, loading } = props;
const { DataSaveDetail } = Contract;
const { RangePicker } = DatePicker; // 日期组件
const [form] = Form.useForm(); // 表单
const RA = (index: any, values: any) => {
dispatch({ type: 'Contract/RA', playload: { index: index, body: values } });
};
// 设置之前时间不能选择
function disabledDate(current: any) {
return current && current <= moment().subtract(1, 'days').endOf('day');
}
const [fileList, setFileList] = useState([] as any); // 图片列表
const [uploadUp, setUploadUp] = useState(true); // 禁止上传 直到选择了小区后
const [comtyName, setComtyName] = useState(null); // 小区名字
const [tipTime, setTipTime] = useState(['previous month', 'two months'] as any); //提示时间
const [tipModal, settipModal] = useState(false); //附件弹窗
const [fileInfo, setfileInfo] = useState(null as any); //附件内容
//pdf 页码内容
const [numPages, setNumPages] = useState(1 as any); // 总页码数
const [pageNumber, setPageNumber] = useState(1); // 当前页码数
const [imgInfo, setimgInfo] = useState(null as any); //本地图片预览
const [previewVisible, setPreviewVisible] = useState(false); //本地图片预览弹窗
const [imgLoad, setimgLoad] = useState(false); //本地图片预览
useEffect(() => {
// 如果是添加传来没有值的时候 就清空 否则 赋值给表单
if (DataSaveDetail == null) {
// 清空表单
form.resetFields();
} else {
// 发起图片请求
let objData = {
type: 'tosContractPreview',
fileName: DataSaveDetail.contractFileName,
extends: DataSaveDetail.communityName,
};
RA(47, objData);
// 打开禁止
setUploadUp(false);
// 提示时间
let a1 = moment(DataSaveDetail.contractValidEndDate)
.subtract(2, 'month')
.format('YYYY-MM-DD');
let a2 = moment(DataSaveDetail.contractValidEndDate)
.subtract(1, 'month')
.format('YYYY-MM-DD');
setTipTime([a1, a2]);
// 给到上传绑定
setComtyName(DataSaveDetail.communityName);
// 表单内容
form.setFieldsValue({
...DataSaveDetail,
upload: 'ok',
time: [
moment(DataSaveDetail.contractValidStartDate),
moment(DataSaveDetail.contractValidEndDate),
],
});
}
}, [DataSaveDetail]);
// 监听上传图片列表
useEffect(() => {
if (FileImg != null) {
let obj = new Array();
for (var i in FileImg) {
let a = {
uid: i,
name: FileImg[i].fileName,
status: 'done',
type: FileImg[i].fileName.match(/\.([^\.]+)$/)[1].toLowerCase(),
url: FileImg[i].fileUrl,
};
console.log();
obj.push(a);
}
setFileList([...obj]);
} else {
setFileList([]);
}
}, [FileImg]);
// 监听列表
useEffect(() => {
if (fileList.length == 0) {
form.setFieldsValue['upload'] = null;
}
}, [fileList]);
// 返回
const goToReturn = () => {
// console.log(fileList)
history.back();
};
// 提交
const onFinish = (values: any) => {
// 判断有没有文件
if (fileList.length == 0) {
message.error('Please upload the attachment!');
} else {
values.contractValidStartDate = values.time[0].format('YYYY-MM-DD');
values.contractValidEndDate = values.time[1].format('YYYY-MM-DD');
let data = new Array();
for (let i = 0; i < fileList.length; i++) {
data.push(fileList[i].name);
}
values.contractFileNameList = data;
// 编辑
if (DataSaveDetail != null) {
values.id = DataSaveDetail.id;
}
RA(27, values);
// RA(27, values)
}
};
// 上传文件设置
const uploadProps = {
accept: '.docx,.jpg,.png,.pdf',
action: '/tos/image/upload',
data: { imageType: 'tosContract', extends: comtyName },
fileList: fileList,
onChange: ({ file }: { file: any }) => {
console.log(file);
if (file.status === 'uploading') {
setimgLoad(true);
}
if (file.status === 'error') {
message.error(file.name + ' Upload failed !');
setimgLoad(false);
}
if (file.status === 'done') {
message.success(file.name + ' Upload Successful !');
// 实现在线预览
let obj = {
uid: randomString(12),
name: file.name,
status: 'done',
type: file.name.match(/\.([^\.]+)$/)[1].toLowerCase(),
url: file.response.data,
};
setFileList([...fileList, obj]);
// 添加到表单
form.setFieldsValue({
upload: 'ok',
});
setimgLoad(false);
}
},
};
// // 设置提示倒计时
const changeTime = (data: any, dateStrings: any) => {
if (data != null) {
let a1 = moment(data[1]).subtract(2, 'month').format('YYYY-MM-DD');
let a2 = moment(data[1]).subtract(1, 'month').format('YYYY-MM-DD');
setTipTime([a1, a2]);
}
};
// 选择小区名字并赋值
const opname = (value: any) => {
// 打开上传 如果选择了 小区就打开 否则 禁止上传
value ? setUploadUp(false) : setUploadUp(true);
// 如果切换了 清掉上传的图片
if (value != comtyName) {
setFileList([]);
}
setComtyName(value); // 赋值小区名字 给到上传
form.setFieldsValue({
communityName: value,
});
};
//本地图预览处理
function getBase64(file: any) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
//点击预览
const onPreviews = async (file: any) => {
// 有值的话 就是本地预览
if (file.size) {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
let info = {
previewImage: file.url || file.preview,
previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
};
setPreviewVisible(true); // 弹窗
setimgInfo(info); // 图片信息
} else {
setfileInfo(file); // 设置选择的文件
console.log(file);
settipModal(true);
}
};
// 关闭预览弹窗
const handleCancel = () => {
settipModal(false);
};
// pdf 总页数
const onDocumentLoadSuccess = (pages: any) => {
setNumPages(pages);
};
// const onDocumentLoadSuccess = ({ numPages }: any) => {
// //numPages是总页数
// setNumPages(numPages);
// };
// 切换pdf 总数
const onChangePage = (page: any) => {
setPageNumber(page);
};
// 文件上传判断
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;
}
// 移除文件
const onRemove = async (file: any) => {
let fileListArr = fileList;
for (let i in fileListArr) {
if (fileListArr[i].uid == file.uid) {
fileListArr.splice(i, 1);
}
}
setFileList([...fileListArr]);
};
// 文件上传按钮
const uploadButton = (
<div>
{imgLoad ? <LoadingOutlined /> : <PlusOutlined />}
<div style={{ marginTop: 5 }}>Upload</div>
</div>
);
return (
<>
<Spin spinning={loading}>
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>{DataSaveDetail ? 'Edit' : 'Add'} Contract</div>
<button className={styles.item3} onClick={goToReturn}>
<LeftOutlined />
Back
</button>
</div>
{/* 表单 initialValues={defForm} */}
<Form
// ref={formRef}
autoComplete="off"
form={form}
name="basic"
initialValues={DataSaveDetail}
onFinish={onFinish}
// initialValues={defForm}
>
<div className="contract_box">
<div className="list2">
<Form.Item
name="contractNumber"
label="Contract Number"
rules={[{ required: true, message: `${tipList[0]}` }]}
>
<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: 300 }} placeholder="Contract Party A" />
</Form.Item>
</div>
<div className="item_1">
<Form.Item
name="contractPartyB"
label="Contract Party B"
rules={[{ required: true, message: `${tipList[2]}` }]}
>
<Input style={{ width: 300 }} placeholder="Contract Party B" />
</Form.Item>
</div>
</div>
{/* 小区 */}
<div className="list2">
<div className="main">
<Form.Item
labelAlign="right"
name="communityName"
label="Community Name"
rules={[{ required: true, message: `${tipList[3]}` }]}
>
<SearchOptionsCommnity
defaultName={DataSaveDetail ? DataSaveDetail.communityName : null}
// ubmit={extendName}
opname={opname}
/>
</Form.Item>
</div>
</div>
{/* 合同标题 */}
<div className="list2">
<Form.Item
labelAlign="right"
name="contractTitle"
label="Contract Title"
rules={[{ required: true, message: `${tipList[4]}` }]}
>
<Input style={{ width: 500 }} placeholder="Contract Title" />
</Form.Item>
</div>
{/* 起止时间 */}
<div className="list2">
<Form.Item
name="time"
labelAlign="right"
label="Contract Time"
rules={[{ required: true, message: `${tipList[5]}` }]}
>
<RangePicker
locale={locale}
defaultValue={DataSaveDetail ? DataSaveDetail.time : null}
// disabledDate={disabledDate} // 时间限制
placeholder={['Effective Date', 'Expiration Date']}
onChange={changeTime}
/>
</Form.Item>
</div>
{/* 附件上传 */}
<div className="list2">
<Form.Item
labelAlign="right"
name="upload"
label="Contract Annex"
rules={[{ required: true, message: `Please upload the attachment!` }]}
>
<Upload
{...uploadProps}
listType={'picture-card'}
disabled={uploadUp}
beforeUpload={beforeUpload}
onPreview={onPreviews}
onRemove={onRemove}
>
{fileList.length >= 3 ? null : uploadButton}
</Upload>
</Form.Item>
</div>
{/* 合同内容 */}
<div className="list2">
<div className={styles.box8item2x1}>
<Form.Item
rules={[{ required: true, message: `${tipList[5]}` }]}
label="Contract Remarks"
name="contractRemindContent"
style={{ marginBottom: 0 }}
>
<TextArea
style={{ padding: 8, width: 600 }}
placeholder="Remarks"
showCount={true}
autoSize={{ minRows: 6, maxRows: 6 }}
></TextArea>
</Form.Item>
</div>
<div
className={styles.box8item2x2}
style={{ marginLeft: 150, textTransform: 'capitalize' }}
>
<p style={{ marginBottom: 0 }}>
The system will send e-mail notification in the{' '}
<span style={{ color: 'red' }}>{tipTime[0]}</span> and{' '}
<span style={{ color: 'red' }}>{tipTime[1]}</span> that the contract is about to
expire !
</p>
<p style={{ marginBottom: 0 }}>
<span style={{ color: 'red' }}>*</span> If the time has passed, it will not be
sent
</p>
{/* <span style={{color:'#f00'}}>&nbsp;{stateTime}</span> */}
</div>
</div>
<div>
<LINE />
<Button type="primary" htmlType="submit" loading={loading}>
Submit
</Button>
</div>
</div>
</Form>
{/* 附件预览 */}
<Modal
title={fileInfo != null ? fileInfo.name : 'File Preview'}
visible={tipModal}
width={800}
onCancel={handleCancel}
style={{ textAlign: 'center' }}
footer={null}
>
{fileInfo != null ? (
fileInfo.type == 'pdf' ? (
// pdf 换一种
<>
<PDF
file={fileInfo.url}
// file={stringSplit(fileInfo.url, 'm/cash')}
page={pageNumber}
scale={1.25}
onDocumentComplete={onDocumentLoadSuccess}
/>
<Pagination
style={{ textAlign: 'center', marginTop: 10, display: 'block' }}
simple
defaultCurrent={pageNumber}
total={numPages * 10}
onChange={onChangePage}
/>
</>
) : fileInfo.type == 'jpg' || fileInfo.type == 'png' ? (
// 图片用指定格式
<Image
src={fileInfo.url}
preview={false}
style={{ margin: '0 auto', textAlign: 'center' }}
/>
) : (
<FileViewer
fileType={fileInfo.type}
filePath={fileInfo.url}
// filePath={stringSplit(fileInfo.url, 'm/cash')}
/>
)
) : (
''
)}
</Modal>
{/* 本地附件预览 */}
{imgInfo != null ? (
<Modal
visible={previewVisible}
title={imgInfo.previewTitle}
footer={null}
onCancel={() => {
setPreviewVisible(false);
}}
>
<img alt="example" style={{ width: '100%' }} src={imgInfo.previewImage} />
</Modal>
) : (
''
)}
</div>
</Spin>
</>
);
};
function mapStateToProps(state: any) {
const { ContractModel, Contract } = state;
const FileImg = Contract.FileImg;
const loading = state.loading.models.Contract || false;
return {
ContractModel,
Contract,
FileImg,
loading,
};
}
export default connect(mapStateToProps)(ContractContent);
src/pages/ContractManagement/ContractContent.tsx
View file @ 139b07d7
import React, { useState, useEffect, useRef } from 'react';
import React, { useState, useEffect, useReducer } from 'react';
import styles from './ContractContent.less';
import {
Input,
......@@ -12,19 +12,13 @@ import {
Spin,
Image,
} from 'antd';
const { TextArea } = Input;
import { PlusOutlined, LeftOutlined, LoadingOutlined } from '@ant-design/icons';
import { Link, useIntl, connect, Dispatch, Loading } from 'umi';
import { RA } from '@/services/tos';
import LINE from '../../components/Line/Line';
import TextArea from 'antd/lib/input/TextArea';
import { connect } from 'umi';
import LINE from '@/components/Line/Line';
import moment from 'moment';
import './ContractContent.less';
// 配置英文
import 'moment/locale/en-au';
import locale from 'antd/es/date-picker/locale/en_US';
import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommnity';
import { tipList } from '@/utils/tip';
......@@ -34,6 +28,65 @@ import PDF from 'react-pdf-js';
import { randomString } from '@/utils/string';
/******* useState 改造 useReducer *********/
// 初始值
const contentState = {
fileList: [], // 图片列表
uploadUp: true, // 禁止上传 直到选择了小区后
comtyName: null, // 已选小区名字
tipTime: ['previous month', 'two months'], //时间提示
tipModal: false, //附件弹窗
fileInfo: null, //附件内容
numPages: 1, // pdf 总页码数
pageNumber: 1, // pdf 当前页码数
imgInfo: null, //本地图片预览信息
previewVisible: false, //本地图片预览弹窗
imgLoad: false, //本地图片上传加载
};
// 方法
const contentReducer = (state, action) => {
switch (action.type) {
case 'setFileList': // 改变图片列表
return { ...state, fileList: action.payload };
case 'setUploadUp': // 附件上传限制
return { ...state, uploadUp: action.payload };
case 'setComtyName': // 小区名字
return { ...state, comtyName: action.payload };
case 'setTipTime': // 时间提示
return { ...state, tipTime: action.payload };
case 'settipModal': // 附件弹窗
return { ...state, tipModal: action.payload };
case 'setfileInfo': // 附件内容
return { ...state, fileInfo: action.payload };
case 'setNumPages': // PDF总页码数
return { ...state, numPages: action.payload };
case 'setPageNumber': // PDF当前页码数
return { ...state, pageNumber: action.payload };
case 'setimgInfo': // 本地图片预览信息
return { ...state, imgInfo: action.payload };
case 'setPreviewVisible': // 本地图片预览弹窗
return { ...state, previewVisible: action.payload };
case 'setimgLoad': // 本地图片上传加载
return { ...state, imgLoad: action.payload };
default:
break;
}
};
/******* useState 改造 useReducer *********/
const ContractContent = (props: any) => {
const { Contract, dispatch, FileImg, loading } = props;
......@@ -44,25 +97,8 @@ const ContractContent = (props: any) => {
dispatch({ type: 'Contract/RA', playload: { index: index, body: values } });
};
// 设置之前时间不能选择
function disabledDate(current: any) {
return current && current <= moment().subtract(1, 'days').endOf('day');
}
const [fileList, setFileList] = useState([] as any); // 图片列表
const [uploadUp, setUploadUp] = useState(true); // 禁止上传 直到选择了小区后
const [comtyName, setComtyName] = useState(null); // 小区名字
const [tipTime, setTipTime] = useState(['previous month', 'two months'] as any); //提示时间
const [tipModal, settipModal] = useState(false); //附件弹窗
const [fileInfo, setfileInfo] = useState(null as any); //附件内容
//pdf 页码内容
const [numPages, setNumPages] = useState(1 as any); // 总页码数
const [pageNumber, setPageNumber] = useState(1); // 当前页码数
const [imgInfo, setimgInfo] = useState(null as any); //本地图片预览
const [previewVisible, setPreviewVisible] = useState(false); //本地图片预览弹窗
const [imgLoad, setimgLoad] = useState(false); //本地图片预览
/* 使用 useReducer */
const [state, dispatchs] = useReducer(contentReducer, contentState);
useEffect(() => {
// 如果是添加传来没有值的时候 就清空 否则 赋值给表单
......@@ -79,7 +115,8 @@ const ContractContent = (props: any) => {
RA(47, objData);
// 打开禁止
setUploadUp(false);
// setUploadUp(false);
dispatchs({ type: 'setUploadUp', payload: false });
// 提示时间
let a1 = moment(DataSaveDetail.contractValidEndDate)
......@@ -88,10 +125,13 @@ const ContractContent = (props: any) => {
let a2 = moment(DataSaveDetail.contractValidEndDate)
.subtract(1, 'month')
.format('YYYY-MM-DD');
setTipTime([a1, a2]);
// setTipTime([a1, a2]);
dispatchs({ type: 'setTipTime', payload: [a1, a2] });
// 给到上传绑定
setComtyName(DataSaveDetail.communityName);
// setComtyName(DataSaveDetail.communityName);
dispatchs({ type: 'setComtyName', payload: DataSaveDetail.communityName });
// 表单内容
form.setFieldsValue({
...DataSaveDetail,
......@@ -119,18 +159,20 @@ const ContractContent = (props: any) => {
console.log();
obj.push(a);
}
setFileList([...obj]);
// setFileList([...obj]);
dispatchs({ type: 'setFileList', payload: [...obj] });
} else {
setFileList([]);
// setFileList([]);
dispatchs({ type: 'setFileList', payload: [] });
}
}, [FileImg]);
// 监听列表
useEffect(() => {
if (fileList.length == 0) {
if (state.fileList.length == 0) {
form.setFieldsValue['upload'] = null;
}
}, [fileList]);
}, [state.fileList]);
// 返回
const goToReturn = () => {
......@@ -141,14 +183,14 @@ const ContractContent = (props: any) => {
// 提交
const onFinish = (values: any) => {
// 判断有没有文件
if (fileList.length == 0) {
if (state.fileList.length == 0) {
message.error('Please upload the attachment!');
} else {
values.contractValidStartDate = values.time[0].format('YYYY-MM-DD');
values.contractValidEndDate = values.time[1].format('YYYY-MM-DD');
let data = new Array();
for (let i = 0; i < fileList.length; i++) {
data.push(fileList[i].name);
for (let i = 0; i < state.fileList.length; i++) {
data.push(state.fileList[i].name);
}
values.contractFileNameList = data;
......@@ -166,16 +208,18 @@ const ContractContent = (props: any) => {
const uploadProps = {
accept: '.docx,.jpg,.png,.pdf',
action: '/tos/image/upload',
data: { imageType: 'tosContract', extends: comtyName },
fileList: fileList,
data: { imageType: 'tosContract', extends: state.comtyName },
fileList: state.fileList,
onChange: ({ file }: { file: any }) => {
console.log(file);
if (file.status === 'uploading') {
setimgLoad(true);
// setimgLoad(true);
dispatchs({ type: 'setimgLoad', payload: true });
}
if (file.status === 'error') {
message.error(file.name + ' Upload failed !');
setimgLoad(false);
// setimgLoad(false);
dispatchs({ type: 'setimgLoad', payload: false });
}
if (file.status === 'done') {
message.success(file.name + ' Upload Successful !');
......@@ -189,12 +233,14 @@ const ContractContent = (props: any) => {
url: file.response.data,
};
setFileList([...fileList, obj]);
// setFileList([...fileList, obj]);
dispatchs({ type: 'setFileList', payload: [...state.fileList, obj] });
// 添加到表单
form.setFieldsValue({
upload: 'ok',
});
setimgLoad(false);
// setimgLoad(false);
dispatchs({ type: 'setimgLoad', payload: false });
}
},
};
......@@ -204,19 +250,25 @@ const ContractContent = (props: any) => {
if (data != null) {
let a1 = moment(data[1]).subtract(2, 'month').format('YYYY-MM-DD');
let a2 = moment(data[1]).subtract(1, 'month').format('YYYY-MM-DD');
setTipTime([a1, a2]);
// setTipTime([a1, a2]);
dispatchs({ type: 'setTipTime', payload: [a1, a2] });
}
};
// 选择小区名字并赋值
const opname = (value: any) => {
// 打开上传 如果选择了 小区就打开 否则 禁止上传
value ? setUploadUp(false) : setUploadUp(true);
value
? dispatchs({ type: 'setUploadUp', payload: false })
: dispatchs({ type: 'setUploadUp', payload: true });
// 如果切换了 清掉上传的图片
if (value != comtyName) {
setFileList([]);
if (value != state.comtyName) {
// setFileList([]);
dispatchs({ type: 'setFileList', payload: [] });
}
setComtyName(value); // 赋值小区名字 给到上传
// setComtyName(value); // 赋值小区名字 给到上传
dispatchs({ type: 'setComtyName', payload: value });
form.setFieldsValue({
communityName: value,
});
......@@ -243,23 +295,28 @@ const ContractContent = (props: any) => {
previewImage: file.url || file.preview,
previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
};
setPreviewVisible(true); // 弹窗
setimgInfo(info); // 图片信息
// setPreviewVisible(true); // 弹窗
dispatchs({ type: 'setPreviewVisible', payload: true });
// setimgInfo(info); // 图片信息
dispatchs({ type: 'setimgInfo', payload: info });
} else {
setfileInfo(file); // 设置选择的文件
console.log(file);
settipModal(true);
// setfileInfo(file); // 设置选择的文件
// settipModal(true); // 打开弹窗
dispatchs({ type: 'setfileInfo', payload: file });
dispatchs({ type: 'settipModal', payload: true });
}
};
// 关闭预览弹窗
const handleCancel = () => {
settipModal(false);
// settipModal(false);
dispatchs({ type: 'settipModal', payload: false });
};
// pdf 总页数
const onDocumentLoadSuccess = (pages: any) => {
setNumPages(pages);
// setNumPages(pages);
dispatchs({ type: 'setNumPages', payload: pages });
};
// const onDocumentLoadSuccess = ({ numPages }: any) => {
......@@ -269,7 +326,8 @@ const ContractContent = (props: any) => {
// 切换pdf 总数
const onChangePage = (page: any) => {
setPageNumber(page);
// setPageNumber(page);
dispatchs({ type: 'setPageNumber', payload: page });
};
// 文件上传判断
......@@ -284,19 +342,20 @@ const ContractContent = (props: any) => {
// 移除文件
const onRemove = async (file: any) => {
let fileListArr = fileList;
let fileListArr = state.fileList;
for (let i in fileListArr) {
if (fileListArr[i].uid == file.uid) {
fileListArr.splice(i, 1);
}
}
setFileList([...fileListArr]);
// setFileList([...fileListArr]);
dispatchs({ type: 'setFileList', payload: [...fileListArr] });
};
// 文件上传按钮
const uploadButton = (
<div>
{imgLoad ? <LoadingOutlined /> : <PlusOutlined />}
{state.imgLoad ? <LoadingOutlined /> : <PlusOutlined />}
<div style={{ marginTop: 5 }}>Upload</div>
</div>
);
......@@ -392,7 +451,6 @@ const ContractContent = (props: any) => {
rules={[{ required: true, message: `${tipList[5]}` }]}
>
<RangePicker
locale={locale}
defaultValue={DataSaveDetail ? DataSaveDetail.time : null}
// disabledDate={disabledDate} // 时间限制
placeholder={['Effective Date', 'Expiration Date']}
......@@ -412,12 +470,12 @@ const ContractContent = (props: any) => {
<Upload
{...uploadProps}
listType={'picture-card'}
disabled={uploadUp}
disabled={state.uploadUp}
beforeUpload={beforeUpload}
onPreview={onPreviews}
onRemove={onRemove}
>
{fileList.length >= 3 ? null : uploadButton}
{state.fileList.length >= 3 ? null : uploadButton}
</Upload>
</Form.Item>
</div>
......@@ -445,9 +503,9 @@ const ContractContent = (props: any) => {
>
<p style={{ marginBottom: 0 }}>
The system will send e-mail notification in the{' '}
<span style={{ color: 'red' }}>{tipTime[0]}</span> and{' '}
<span style={{ color: 'red' }}>{tipTime[1]}</span> that the contract is about to
expire !
<span style={{ color: 'red' }}>{state.tipTime[0]}</span> and{' '}
<span style={{ color: 'red' }}>{state.tipTime[1]}</span> that the contract is
about to expire !
</p>
<p style={{ marginBottom: 0 }}>
<span style={{ color: 'red' }}>*</span> If the time has passed, it will not be
......@@ -468,44 +526,44 @@ const ContractContent = (props: any) => {
{/* 附件预览 */}
<Modal
title={fileInfo != null ? fileInfo.name : 'File Preview'}
visible={tipModal}
title={state.fileInfo != null ? state.fileInfo.name : 'File Preview'}
visible={state.tipModal}
width={800}
onCancel={handleCancel}
style={{ textAlign: 'center' }}
footer={null}
>
{fileInfo != null ? (
fileInfo.type == 'pdf' ? (
{state.fileInfo != null ? (
state.fileInfo.type == 'pdf' ? (
// pdf 换一种
<>
<PDF
file={fileInfo.url}
file={state.fileInfo.url}
// file={stringSplit(fileInfo.url, 'm/cash')}
page={pageNumber}
page={state.pageNumber}
scale={1.25}
onDocumentComplete={onDocumentLoadSuccess}
/>
<Pagination
style={{ textAlign: 'center', marginTop: 10, display: 'block' }}
simple
defaultCurrent={pageNumber}
total={numPages * 10}
defaultCurrent={state.pageNumber}
total={state.numPages * 10}
onChange={onChangePage}
/>
</>
) : fileInfo.type == 'jpg' || fileInfo.type == 'png' ? (
) : state.fileInfo.type == 'jpg' || state.fileInfo.type == 'png' ? (
// 图片用指定格式
<Image
src={fileInfo.url}
src={state.fileInfo.url}
preview={false}
style={{ margin: '0 auto', textAlign: 'center' }}
/>
) : (
<FileViewer
fileType={fileInfo.type}
filePath={fileInfo.url}
fileType={state.fileInfo.type}
filePath={state.fileInfo.url}
// filePath={stringSplit(fileInfo.url, 'm/cash')}
/>
)
......@@ -515,16 +573,17 @@ const ContractContent = (props: any) => {
</Modal>
{/* 本地附件预览 */}
{imgInfo != null ? (
{state.imgInfo != null ? (
<Modal
visible={previewVisible}
title={imgInfo.previewTitle}
visible={state.previewVisible}
title={state.imgInfo.previewTitle}
footer={null}
onCancel={() => {
setPreviewVisible(false);
// setPreviewVisible(false);
dispatchs({ type: 'setPreviewVisible', payload: false });
}}
>
<img alt="example" style={{ width: '100%' }} src={imgInfo.previewImage} />
<img alt="example" style={{ width: '100%' }} src={state.imgInfo.previewImage} />
</Modal>
) : (
''
......
src/pages/ContractManagement/ContractDetail.tsx
View file @ 139b07d7
......@@ -5,7 +5,8 @@ import { LeftOutlined } from '@ant-design/icons';
import { connect, history } from 'umi';
import LINE from '../../components/Line/Line';
import TextArea from 'antd/lib/input/TextArea';
const { TextArea } = Input;
import PDF from 'react-pdf-js';
import moment from 'moment';
......@@ -119,30 +120,6 @@ const ContractContent = (props: any) => {
history.go(-1);
};
// 提交
const onFinish = (values: any) => {
// 判断有没有文件
if (fileList.length == 0) {
message.error('Please upload the attachment!');
} else {
values.contractValidStartDate = values.time[0].format('YYYY-MM-DD');
values.contractValidEndDate = values.time[1].format('YYYY-MM-DD');
let data = new Array();
for (let i = 0; i < fileList.length; i++) {
data.push(fileList[i].name);
}
values.contractFileNameList = data;
// 编辑
if (DataSaveDetail != null) {
values.id = DataSaveDetail.id;
}
RA(27, values);
// RA(27, values)
}
};
// 上传文件设置
const uploadProps = {
accept: '.docx,.jpg,.png,.pdf',
......@@ -163,30 +140,6 @@ const ContractContent = (props: any) => {
},
};
// // 设置提示倒计时
const changeTime = (data: any, dateStrings: any) => {
if (data != null) {
let a1 = moment(data[1]).subtract(2, 'month').format('YYYY-MM-DD');
let a2 = moment(data[1]).subtract(1, 'month').format('YYYY-MM-DD');
setTipTime([a1, a2]);
}
console.log(dateStrings);
};
// 选择小区名字并赋值
const opname = (value: any) => {
// 打开上传 如果选择了 小区就打开 否则 禁止上传
value ? setUploadUp(false) : setUploadUp(true);
// 如果切换了 清掉上传的图片
if (value != comtyName) {
setFileList([]);
}
setComtyName(value); // 赋值小区名字 给到上传
form.setFieldsValue({
communityName: value,
});
};
//本地图预览处理
function getBase64(file: any) {
return new Promise((resolve, reject) => {
......@@ -251,8 +204,6 @@ const ContractContent = (props: any) => {
form={form}
name="basic"
initialValues={DataSaveDetail}
onFinish={onFinish}
// initialValues={defForm}
>
<div className="contract_box">
<div className="list2">
......@@ -296,8 +247,6 @@ const ContractContent = (props: any) => {
>
<SearchOptionsCommnity
defaultName={DataSaveDetail ? DataSaveDetail.communityName : null}
// ubmit={extendName}
opname={opname}
disabled={true}
/>
</Form.Item>
......@@ -327,7 +276,6 @@ const ContractContent = (props: any) => {
defaultValue={DataSaveDetail ? DataSaveDetail.time : null}
disabledDate={disabledDate}
placeholder={['Effective Date', 'Expiration Date']}
onChange={changeTime}
disabled
/>
</Form.Item>
......
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