Skip to content

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

小区公告，合同模板修复，账号编辑 

Signed-off-by: cellee's avatarcellee <893264950@qq.com>
parent f8fa3286
Hide whitespace changes
Inline Side-by-side
Showing with 973 additions and 132 deletions
config/config.ts
View file @ b8ae18d8
......@@ -344,7 +344,7 @@ export default defineConfig({
routes: [
{ path: './', component: './AccountManagement/account/Account' },
{ path: './edit', component: './AccountManagement/account/AccountEdit' },
{ path: './Add', component: './AccountManagement/account/AccountEdit' },
{ path: './Add', component: './AccountManagement/account/AccountAdds' },
{ path: './reset', component: './AccountManagement/account/AccountReset' },
],
},
......
src/components/SearchOptions/SearchOptionsCommnity.tsx
View file @ b8ae18d8
......@@ -4,7 +4,7 @@ import SearchOptions from './SearchOptions';
import SearchOptionsTow from './SearchOptionsTow';
const SearchOptionsCommnity = (props: any) => {
const { dispatch, CommunityList, opname, defaultName, type } = props;
const { dispatch, CommunityList, opname, defaultName, type, disabled } = props;
const tosCommunityget = (values: any) => {
dispatch({ type: 'Init/tosCommunityget', playload: values });
......@@ -32,6 +32,7 @@ const SearchOptionsCommnity = (props: any) => {
// onSubmit={extendName} />
<SearchOptionsTow
disabled={disabled}
list={CommunityList}
extendName={extendName}
def={defaultName}
......
src/components/SearchOptions/SearchOptionsTow.tsx
View file @ b8ae18d8
......@@ -3,7 +3,7 @@ import { Select } from 'antd';
const { Option } = Select;
const SearchOptionsTow = (porps: any) => {
const { list, extendName, def, type } = porps;
const { list, extendName, def, type, disabled } = porps;
const options = list.map((d: any, index: number) => (
<Option value={d} key={index}>
......@@ -27,6 +27,7 @@ const SearchOptionsTow = (porps: any) => {
optionFilterProp="children"
onChange={onChange}
defaultValue={def}
disabled={disabled}
>
{options}
</Select>
......@@ -39,6 +40,7 @@ const SearchOptionsTow = (porps: any) => {
optionFilterProp="children"
onChange={onChange}
defaultValue={def}
disabled={disabled}
>
{options}
</Select>
......
src/models/CommunityManagement/Account.ts
View file @ b8ae18d8
......@@ -34,7 +34,7 @@ export default {
//标准请求
*RA({ playload }, { call, put }) {
const resp = yield call(service.RA, playload);
console.log(resp);
if (resp.code == 500 || resp.error_code != '0000') {
}
if (resp.error_code != '0000') {
......@@ -47,8 +47,17 @@ export default {
// yield put({ type: 'returnPage', Data });
}
break;
case 38:
{
console.log(resp);
}
break;
case 42:
{
// 保存成功， 清掉原来数据 并且跳转
message.success('Submitted Successfully !');
let Data = null;
yield put({ type: 'returnPage', Data });
history.go(-1);
}
break;
......@@ -66,7 +75,7 @@ export default {
break;
case 52: // 修改账号状态
{
let Result = resp.data;
let Result = resp.error_code;
yield put({ type: 'returnResult', Result });
}
break;
......@@ -74,13 +83,18 @@ export default {
}
},
*ReData({}, { put }) {
var Data = null;
yield put({ type: 'returnPage', Data });
},
*ResultClear({}, { put }) {
var tmp = null;
yield put({ type: 'returnResult', tmp });
},
*SA({ playload }, { call, put }) {
var DataSave = playload;
*SA({ DataSave }, { call, put }) {
console.log(DataSave);
yield put({ type: 'returnDataSave', DataSave });
},
},
......
src/pages/AccountManagement/account/Account.less
View file @ b8ae18d8
hr {
border: 0;
height: 1px;
background: #eee;
margin-bottom: 24px;
}
.contop {
background: #fff;
padding: 20px;
border-right: 4px;
margin-bottom: 15px;
h3 {
margin-bottom: 0;
margin-bottom: 15px;
position: relative;
.back {
position: absolute;
......
src/pages/AccountManagement/account/Account.tsx
View file @ b8ae18d8
......@@ -23,12 +23,21 @@ const Account = (props: any) => {
if (Data == null) {
Refresh();
}
}, [Data]); //页面进来执行一次
}, [Data]); //监听Data执行一次
// 监听改变状态提交结果
useEffect(() => {
if (Result != null) {
console.log('改变');
// console.log('改变取消弹窗重新加载，在清空结果');
// let obj = {
// userStatus: accountName.userStatus == 0 ? 1 : 0,
// userID: accountName.tosUserId,
// };
// RA(52, obj);
setOver(false);
// 清除结果
dispatch({ type: 'Account/ResultClear' });
dispatch({ type: 'Account/ReData' });
}
}, [Result]);
......@@ -128,10 +137,17 @@ const Account = (props: any) => {
// 编辑- 新增
const edit = (item: any) => {
item == 1 ? history.push('./account/Add') : history.push('./account/edit');
// console.log(item);
if (item == 1) {
history.push('./account/Add');
} else {
let DataSave = item;
dispatch({ type: 'Account/SA', DataSave });
history.push('./account/edit');
}
};
// 停用账号
// 停用账号弹窗
const lockS = (item: any) => {
setOver(true);
setaccountName(item);
......@@ -278,7 +294,6 @@ const Account = (props: any) => {
};
const AccountProps = (styte: any) => {
console.log(styte);
const { Data, DataSave, DataSaveDetail, Result } = styte.Account;
const loading = styte.loading.models.Account || false;
return {
......
src/pages/AccountManagement/account/AccountAdds.tsx 0 → 100644
View file @ b8ae18d8
import React, { useState, useEffect, useRef } from 'react';
import {
Form,
Input,
Button,
Pagination,
message,
Descriptions,
Checkbox,
Tree,
Radio,
} from 'antd';
import { connect, history } from 'umi';
import { SearchOutlined, ClearOutlined, EditOutlined, LeftOutlined } from '@ant-design/icons';
import { getCookie } from '@/utils/method';
import './Account.less';
import { zhCnFaci } from '@/utils/power';
import { AccountTip } from '@/utils/tip';
import SelectCommunity from '@/components/SelectCommunity';
import { getNumber } from '@/utils/string'; // 正则
import { RA } from '@/utils/method';
import moment from 'moment';
const Account = (props: any) => {
const module = 'Account';
const { dispatch, Data, DataSave, DataSaveDetail, Result, loading, CommunityList } = props;
// 拉取数据的条件存储
const [term, setTerm] = useState({} as any);
// 小区列表
// const [comList, setCommunityList] = useState(CommunityList as any);
// // 数据
// useEffect(() => {
// if (CommunityList != null) {
// setCommunityList(CommunityList);
// }
// }, [CommunityList]);
// 权限列表
const treeData = zhCnFaci;
const [expandedKeys, setExpandedKeys] = useState<string[]>([]); // 展开栏目
const [checkedKeys, setCheckedKeys] = useState<string[]>([]); // 默认已选栏目
const [selectedKeys, setSelectedKeys] = useState<string[]>([]); // 设置选中的树节点
const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true); // 树形菜单展开关闭
// 单选 二级还是三级管理员
const [values, setvalues] = useState(2); // 树形菜单展开关闭
// 表单标识
const [form] = Form.useForm();
const formRef = useRef(null);
// 保存提交
const onFinishContract = async (value: any) => {
// console.log(value);
if (checkedKeys.length == 0) {
// 权限
message.error('Please Select Permission!');
return false;
} else if (value.community.value == null || value.community.value.length == 0) {
// 小区
message.error('Please Select The Jurisdiction Area!');
return false;
} else if (value.tosUserName.length < 6) {
// 账号长度
message.error('The Account Password is Greater Than 6 Digits!');
return false;
} else {
value.tosUserServiceCellList = value.community.value; // 管辖小区
value.tosUserEmail = value.tosUserName; // 邮箱就是账号
value.tosUserLevel = values; //级别
value.creatorName = getCookie('name'); //新建者账号
value.creatorId = getCookie('id'); //新建者ID
delete value.community;
// console.log(value);
// 另传权限
let obj = {
userName: value.tosUserName,
userPassword: value.tosUserPwd,
permissionArray: checkedKeys.sort((n1, n2) => {
return parseInt(n1) - parseInt(n2);
}),
};
// console.log(obj);
RA(38, value, module, dispatch); // 信息上传
RA(42, obj, module, dispatch); // 权限上传
}
};
//goToReturn
const goToReturn = () => {
history.go(-1);
};
// 全选
const onCheckAllChange = (e: any) => {};
// 展开/收起树形菜单触发
const onExpand = (expandedKeys: any) => {
setExpandedKeys(expandedKeys);
setAutoExpandParent(false);
};
// 点击单个触发
const onCheck = (checkedKeys: any) => {
console.log('onCheck', checkedKeys);
setCheckedKeys(checkedKeys);
};
// 点击树节点触发 - 大栏目
const onSelect = (selectedKeys: any, info: any) => {
console.log('onSelect', info);
setSelectedKeys(selectedKeys);
};
// 管理员级别样式
const radioStyle = {
display: 'block',
height: '30px',
lineHeight: '30px',
marginBottom: '15px',
};
//级别切换
const onRadio = (e: any) => {
setvalues(e.target.value);
};
//手机号
const keyup_communityManagerFee = (e: any) => {
e.target.value = keyup_tool(e.target.value);
};
const keyup_tool = (value: any) => {
return getNumber(value.replace(/[^\d^\.]+/g, ''));
};
// 选择小区名字并赋值
return (
<>
<div className="contop" style={{ padding: '12px 20px' }}>
<h3 className="capi">
<EditOutlined />
&nbsp; Add Account
<div className="back">
<Button onClick={goToReturn}>
<LeftOutlined />
Back
</Button>
</div>
</h3>
<hr></hr>
<Form
ref={formRef}
form={form}
autoComplete="off"
// layout="inline"
layout="horizontal"
name="contract"
onFinish={onFinishContract}
>
<Descriptions column={{ xs: 1, sm: 2, md: 3 }}>
<Descriptions.Item>
<Form.Item name="tosUserName" label="Account ID" rules={AccountTip[0]}>
<Input placeholder="Login Account" className="input" />
</Form.Item>
</Descriptions.Item>
</Descriptions>
<Descriptions column={{ xs: 1, sm: 2, md: 3 }}>
<Descriptions.Item>
<Form.Item name="tosAccountName" label="Name" rules={AccountTip[1]}>
<Input placeholder="Name Of Administrator" className="input" />
</Form.Item>
</Descriptions.Item>
<Descriptions.Item>
<Form.Item name="tosUserPhone" label="Phone" rules={AccountTip[2]}>
<Input
placeholder="Contact Information"
className="input"
maxLength={11}
onKeyUp={keyup_communityManagerFee}
/>
</Form.Item>
</Descriptions.Item>
</Descriptions>
<Form.Item name="community" label="Community">
<SelectCommunity />
</Form.Item>
<div className="diy" style={{ marginBottom: '14px' }}>
<div className="label">
<span className="title">Privilege Level：</span>
</div>
<div className="label">
<Radio.Group defaultValue={values} onChange={onRadio}>
<Radio style={radioStyle} value={2}>
Two Level Administrator
</Radio>
<Radio style={radioStyle} value={3}>
Three Level Administrator
{/* <Input placeholder="三级管理员" style={{ width: 160, marginLeft: 10 }} /> */}
</Radio>
</Radio.Group>
</div>
</div>
<div className="diy" style={{ marginBottom: '24px' }}>
<div className="label">
<span className="title">Permission List：</span>
</div>
<div className="label">
<Tree
checkable
onExpand={onExpand}
expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent}
onCheck={onCheck}
checkedKeys={checkedKeys}
onSelect={onSelect}
selectedKeys={selectedKeys}
treeData={treeData}
/>
</div>
</div>
<div className="diy">
<div className="label"></div>
<div className="label">
<Button type="primary" htmlType="submit" loading={loading}>
Submit
</Button>
</div>
</div>
</Form>
</div>
</>
);
};
const AccountProps = (state: any) => {
console.log(state);
const { Data, DataSave, DataSaveDetail, Result } = state.Account;
const { CommunityList } = state.Init; // 小区列表
const loading = state.loading.models.Account || false;
return {
Data,
DataSave,
DataSaveDetail,
Result,
loading,
CommunityList,
};
};
export default connect(AccountProps)(Account);
src/pages/AccountManagement/account/AccountEdit.tsx
View file @ b8ae18d8
......@@ -29,40 +29,53 @@ const Account = (props: any) => {
const { dispatch, Data, DataSave, DataSaveDetail, Result, loading, CommunityList } = props;
// 拉取数据的条件存储
const [term, setTerm] = useState({} as any);
// 小区列表
// const [comList, setCommunityList] = useState(CommunityList as any);
// // 数据
// useEffect(() => {
// if (CommunityList != null) {
// setCommunityList(CommunityList);
// }
// }, [CommunityList]);
// 权限列表
const treeData = zhCnFaci;
const [expandedKeys, setExpandedKeys] = useState<string[]>(['0']); // 展开栏目
const [checkedKeys, setCheckedKeys] = useState<string[]>(['3']); // 默认已选栏目
const [expandedKeys, setExpandedKeys] = useState<string[]>([]); // 展开栏目
const [checkedKeys, setCheckedKeys] = useState<string[]>([]); // 默认已选栏目
const [selectedKeys, setSelectedKeys] = useState<string[]>([]); // 设置选中的树节点
const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true); // 树形菜单展开关闭
// 单选 二级还是三级管理员
const [values, setvalues] = useState(2); // 树形菜单展开关闭
// 已选小区
const [ServiceCell, setServiceCell] = useState(null as any);
// 表单标识
const [form] = Form.useForm();
const formRef = useRef(null);
// 拉取数据的条件存储
// const [term, setTerm] = useState({} as any);
// 小区列表
// const [comList, setCommunityList] = useState(CommunityList as any);
// // 数据
useEffect(() => {
if (DataSave != null) {
console.log(DataSave);
// 赋值
form.setFieldsValue({
tosUserName: DataSave.tosUserName,
tosUserPhone: DataSave.tosUserPhone,
tosAccountName: DataSave.tosAccountName,
});
setvalues(DataSave.tosUserLevel); // 等级
setServiceCell(DataSave.tosUserServiceCell.split(',')); // 已选小区
}
}, [DataSave]);
// 保存提交
const onFinishContract = (value: any) => {
console.log(value);
const onFinishContract = async (value: any) => {
// console.log(value);
if (checkedKeys.length == 0) {
// 权限
message.error('Please Select Permission!');
return false;
} else if (value.community.value.length == 0) {
} else if (value.community.value == null || value.community.value.length == 0) {
// 小区
message.error('Please Select The Jurisdiction Area!');
return false;
......@@ -77,7 +90,7 @@ const Account = (props: any) => {
value.creatorName = getCookie('name'); //新建者账号
value.creatorId = getCookie('id'); //新建者ID
delete value.community;
console.log(value);
// console.log(value);
// 另传权限
let obj = {
......@@ -87,12 +100,13 @@ const Account = (props: any) => {
return parseInt(n1) - parseInt(n2);
}),
};
console.log(obj);
// console.log(obj);
RA(38, value, module, dispatch); // 信息上传
RA(42, obj, module, dispatch); // 权限上传
}
};
//goToReturn
const goToReturn = () => {
history.go(-1);
......@@ -146,7 +160,7 @@ const Account = (props: any) => {
<div className="contop" style={{ padding: '12px 20px' }}>
<h3 className="capi">
<EditOutlined />
&nbsp; {DataSave ? 'Edit' : 'Add'} Account
&nbsp; Edit Account
<div className="back">
<Button onClick={goToReturn}>
<LeftOutlined />
......@@ -154,8 +168,8 @@ const Account = (props: any) => {
</Button>
</div>
</h3>
</div>
<div className="contop">
<hr></hr>
<Form
ref={formRef}
form={form}
......@@ -167,7 +181,7 @@ const Account = (props: any) => {
>
<Descriptions column={{ xs: 1, sm: 2, md: 3 }}>
<Descriptions.Item>
<Form.Item name="tosUserName" label="Account ID" rules={AccountTip[2]}>
<Form.Item name="tosUserName" label="Account ID" rules={AccountTip[0]}>
<Input placeholder="Login Account" className="input" />
</Form.Item>
</Descriptions.Item>
......@@ -175,12 +189,12 @@ const Account = (props: any) => {
<Descriptions column={{ xs: 1, sm: 2, md: 3 }}>
<Descriptions.Item>
<Form.Item name="tosAccountName" label="Name" rules={AccountTip[0]}>
<Form.Item name="tosAccountName" label="Name" rules={AccountTip[1]}>
<Input placeholder="Name Of Administrator" className="input" />
</Form.Item>
</Descriptions.Item>
<Descriptions.Item>
<Form.Item name="tosUserPhone" label="Phone" rules={AccountTip[1]}>
<Form.Item name="tosUserPhone" label="Phone" rules={AccountTip[2]}>
<Input
placeholder="Contact Information"
className="input"
......@@ -246,7 +260,6 @@ const Account = (props: any) => {
};
const AccountProps = (state: any) => {
console.log(state);
const { Data, DataSave, DataSaveDetail, Result } = state.Account;
const { CommunityList } = state.Init; // 小区列表
const loading = state.loading.models.Account || false;
......
src/pages/CommunityManagement/CommunityAnnouncement/Add.tsx
View file @ b8ae18d8
......@@ -26,8 +26,10 @@ const Add = (props: any) => {
const formRef = useRef(null);
const [form] = Form.useForm();
// 图片地址
const [ImageSrc, setImageSrc] = useState([] as any);
const [ImageSrc, setImageSrc] = useState([] as any); // 图片显示地址
const [ImageName, setImageName] = useState([] as any); // 全部图片名称
const [timeT, settimeT] = useState(true); // 结束时间是否禁止选择
const [timeOver, settimeOver] = useState(1); // 结束时间禁止天数
// 监听传递过来的值
useEffect(() => {
......@@ -48,21 +50,29 @@ const Add = (props: any) => {
fileName: DataSave.noticImageName,
};
RA(47, msg, module, dispatch);
// 解除结束时间不可选
settimeT(false);
// 图片名
setImageName(DataSave.noticImageName.split(','));
}
}, [DataSave]);
// 监听图片状态 ImgSrc
useEffect(() => {
if (ImgSrc != null) {
let imgUrl = [
{
uid: '-1',
name: 'image.png',
let a = ImgSrc.map((item: any, index: number) => {
let key = Object.keys(item)[0];
return {
uid: index,
name: key,
status: 'done',
url: ImgSrc,
},
];
setImageSrc(imgUrl);
url: item[key],
};
});
// 图片列表
setImageSrc(a);
}
}, [ImgSrc]);
......@@ -98,7 +108,6 @@ const Add = (props: any) => {
// 提交
const onFinish = (values: any) => {
// console.log(values);
var tmp = values;
if (DataSave != null) {
tmp.id = DataSave.id; // 如果是修改传递的 修改ID
......@@ -107,11 +116,11 @@ const Add = (props: any) => {
tmp.communityNum = values.community.value;
tmp.noticScope = '' + values.community.index;
delete tmp.community;
// 文件名
tmp.noticImageName = values.file ? values.file[0] : null;
// 文件名 如果动了。 新增删除 就传新的， 否则传旧的
tmp.noticImageName = values.file ? values.file : ImageName.join(','); // 传递来的 和 表单的在一起
tmp.noticStartTime = values.noticStartTime.format('YYYY-MM-DD');
tmp.noticEndTime = values.noticEndTime ? values.noticEndTime.format('YYYY-MM-DD') : null;
// console.log(tmp);
RA(28, tmp, module, dispatch);
};
......@@ -120,6 +129,22 @@ const Add = (props: any) => {
return current && current <= moment().subtract(1, 'days').endOf('day');
}
function disabledDateOver(current: any) {
return current && current <= moment().subtract(timeOver, 'days').endOf('day');
}
// 开始时间选择后打开结束时间
const startTime = (date: any) => {
settimeT(false);
// 清除结束时间
form.setFieldsValue({
noticEndTime: null,
});
// 结束时间
let day = moment().diff(date, 'days') + 1;
settimeOver(day);
};
return (
<>
<Spin spinning={loading}>
......@@ -177,10 +202,16 @@ const Add = (props: any) => {
style={{ width: 200 }}
placeholder="Effective Dates"
disabledDate={disabledDate}
onChange={startTime}
/>
</Form.Item>
<Form.Item name="noticEndTime" className="diyItem" label="Expiration Date" rules={[]}>
<DatePicker style={{ width: 200 }} placeholder="Expiration Dates" />
<DatePicker
style={{ width: 200 }}
placeholder="Expiration Dates"
disabledDate={disabledDateOver}
disabled={timeT}
/>
</Form.Item>
<hr />
<Form.Item style={{ marginBottom: 5 }} className="diyItem" label=" " colon={false}>
......
src/pages/CommunityManagement/CommunityAnnouncement/CommunityAnnouncement.tsx
View file @ b8ae18d8
......@@ -165,7 +165,7 @@ const CommunityAnnouncement = (props: any) => {
} else {
// 要看是哪里分页
let mlist = { ...value };
mlist.communityNumList = value.communityNumList;
mlist.communityNumList = value.communityNumList.length > 0 ? value.communityNumList : null;
mlist.pageNum = 1;
// 把内容存进去
SA(DetailPage(mlist), module, dispatch);
......
src/pages/ContractManagement/Contract.tsx
View file @ b8ae18d8
......@@ -53,7 +53,7 @@ const Contract = (props: any) => {
title: 'Contract Number',
render: function (record: any) {
let mom = moment(record.contractValidEndDate).diff(moment(), 'months');
console.log(mom);
// console.log(mom);
if (mom < 2) {
return (
<Tooltip title="Due Soon" placement="right" color={'red'} key={record.id}>
......
src/pages/ContractManagement/ContractDetail copy.tsx 0 → 100644
View file @ b8ae18d8
import React, { useEffect, useState } from 'react';
import { connect, history } from 'umi';
import { Spin, Descriptions } from 'antd';
import { LeftOutlined } from '@ant-design/icons';
import moment from 'moment';
import './ContractContent.less';
import PreView from '@/components/PreView/PreViewTow';
const ContractDetail = (props: any) => {
const { Contract, dispatch, FileImg, loading } = props;
const { DataSaveDetail } = Contract;
const RA = (index: any, values: any) => {
dispatch({ type: 'Contract/RA', playload: { index: index, body: values } });
};
const goToReturn = () => {
history.go(-1);
};
const [fileList, setFileList] = useState([] as any); // 图片列表
const [tipTime, setTipTime] = useState(['previous month', 'two months'] as any); //提示时间
// 带来信息
useEffect(() => {
if (DataSaveDetail == null) {
history.push('/ContractManagement');
} else {
// 请求
let objData = {
type: 'tosContractPreview',
fileName: DataSaveDetail.contractFileName,
extends: DataSaveDetail.communityName,
};
RA(47, objData);
// 设置提示时间
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]);
}
}, [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,
};
obj.push(a);
}
setFileList([...obj]);
} else {
setFileList([]);
}
}, [FileImg]);
return (
<Spin spinning={loading}>
{DataSaveDetail ? (
<div className="base">
{/* 头部组件 */}
<div className="box">
<div className="item1">Detail Contract</div>
<button className="item3" onClick={goToReturn}>
<LeftOutlined />
Back
</button>
</div>
<div className="">
<Descriptions title="" bordered layout="vertical">
<Descriptions.Item label="Contract Number :">
{DataSaveDetail.contractNumber}
</Descriptions.Item>
<Descriptions.Item label="Party A :">
{DataSaveDetail.contractPartyA}
</Descriptions.Item>
<Descriptions.Item label="Party B :">
{DataSaveDetail.contractPartyB}
</Descriptions.Item>
<Descriptions.Item label="Contract Title :" span={2}>
{DataSaveDetail.contractTitle}
</Descriptions.Item>
<Descriptions.Item label="Community Name :">
{DataSaveDetail.communityName}
</Descriptions.Item>
<Descriptions.Item label="Date :">
<p>
{DataSaveDetail.contractValidStartDate} ~ {DataSaveDetail.contractValidEndDate}
</p>
<p style={{ marginBottom: 0, color: '#999' }}>
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> */}
</Descriptions.Item>
<Descriptions.Item label="Contacts :">
{DataSaveDetail.communityAccount}
</Descriptions.Item>
<Descriptions.Item label="Phone :">{DataSaveDetail.communityPhone}</Descriptions.Item>
<Descriptions.Item label="Contract Annex :" span={3}>
{fileList.map((item: any, index: number) => {
return <PreView OpenUrl={item} key={index}></PreView>;
})}
</Descriptions.Item>
<Descriptions.Item label="Contract Remarks :">
{DataSaveDetail.contractRemindContent}
</Descriptions.Item>
</Descriptions>
</div>
</div>
) : (
''
)}
</Spin>
);
};
function mapStateToProps(state: any) {
const { Contract } = state;
const { FileImg } = Contract;
const loading = state.loading.models.Contract || false;
return {
Contract,
FileImg,
loading,
};
}
export default connect(mapStateToProps)(ContractDetail);
src/pages/ContractManagement/ContractDetail.tsx
View file @ b8ae18d8
import React, { useEffect, useState } from 'react';
import { connect, history } from 'umi';
import { Spin, Descriptions } from 'antd';
import { LeftOutlined } from '@ant-design/icons';
import moment from 'moment';
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 } from '@ant-design/icons';
import { Link, useIntl, connect, history, 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 PreView from '@/components/PreView/PreViewTow';
import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommnity';
import { tipList } from '@/utils/tip';
const ContractDetail = (props: any) => {
import FileViewer from 'react-file-viewer';
import PDF from 'react-pdf-js';
import { stringSplit } 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 } });
};
const goToReturn = () => {
history.go(-1);
};
// 设置之前时间不能选择
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); //本地图片预览弹窗
// 带来信息
useEffect(() => {
// 如果是添加传来没有值的时候 就清空 否则 赋值给表单
if (DataSaveDetail == null) {
// 清空表单
// form.resetFields();
history.push('/ContractManagement');
} else {
// 请求
// 发起图片请求
let objData = {
type: 'tosContractPreview',
fileName: DataSaveDetail.contractFileName,
......@@ -34,7 +76,10 @@ const ContractDetail = (props: any) => {
};
RA(47, objData);
// 设置提示时间
// 打开禁止
setUploadUp(false);
// 提示时间
let a1 = moment(DataSaveDetail.contractValidEndDate)
.subtract(2, 'month')
.format('YYYY-MM-DD');
......@@ -42,10 +87,22 @@ const ContractDetail = (props: any) => {
.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();
......@@ -57,6 +114,7 @@ const ContractDetail = (props: any) => {
type: FileImg[i].fileName.match(/\.([^\.]+)$/)[1].toLowerCase(),
url: FileImg[i].fileUrl,
};
console.log();
obj.push(a);
}
setFileList([...obj]);
......@@ -65,82 +123,374 @@ const ContractDetail = (props: any) => {
}
}, [FileImg]);
// 监听列表
useEffect(() => {
if (fileList.length == 0) {
form.setFieldsValue['upload'] = null;
}
}, [fileList]);
// 返回
const goToReturn = () => {
// console.log(fileList)
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: '.doc,.docx,.jpg,.png,.pdf',
action: '/tos/image/upload',
data: { imageType: 'tosContract', extends: comtyName },
fileList: fileList,
onChange({ file, fileList }: { file: any; fileList: any }) {
setFileList(fileList);
// 添加到表单
form.setFieldsValue({
upload: 'ok',
});
if (file.status == 'done') {
message.success(file.name, 3);
}
},
};
// // 设置提示倒计时
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) => {
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);
};
// 切换pdf 总数
const onChangePage = (page: any) => {
setPageNumber(page);
};
return (
<Spin spinning={loading}>
{DataSaveDetail ? (
<div className="base">
<>
<Spin spinning={loading}>
<div className={styles.base}>
{/* 头部组件 */}
<div className="box">
<div className="item1">Detail Contract</div>
<button className="item3" onClick={goToReturn}>
<div className={styles.box}>
<div className={styles.item1}>{DataSaveDetail ? 'Detail' : 'Add'} Contract</div>
<button className={styles.item3} onClick={goToReturn}>
<LeftOutlined />
Back
</button>
</div>
<div className="">
<Descriptions title="" bordered layout="vertical">
<Descriptions.Item label="Contract Number :">
{DataSaveDetail.contractNumber}
</Descriptions.Item>
<Descriptions.Item label="Party A :">
{DataSaveDetail.contractPartyA}
</Descriptions.Item>
<Descriptions.Item label="Party B :">
{DataSaveDetail.contractPartyB}
</Descriptions.Item>
<Descriptions.Item label="Contract Title :" span={2}>
{DataSaveDetail.contractTitle}
</Descriptions.Item>
<Descriptions.Item label="Community Name :">
{DataSaveDetail.communityName}
</Descriptions.Item>
<Descriptions.Item label="Date :">
<p>
{DataSaveDetail.contractValidStartDate} ~ {DataSaveDetail.contractValidEndDate}
</p>
<p style={{ marginBottom: 0, color: '#999' }}>
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> */}
</Descriptions.Item>
<Descriptions.Item label="Contacts :">
{DataSaveDetail.communityAccount}
</Descriptions.Item>
<Descriptions.Item label="Phone :">{DataSaveDetail.communityPhone}</Descriptions.Item>
<Descriptions.Item label="Contract Annex :" span={3}>
{fileList.map((item: any, index: number) => {
return <PreView OpenUrl={item} key={index}></PreView>;
})}
</Descriptions.Item>
<Descriptions.Item label="Contract Remarks :">
{DataSaveDetail.contractRemindContent}
</Descriptions.Item>
</Descriptions>
</div>
{/* 表单 initialValues={defForm} */}
<Form
// ref={formRef}
autoComplete="off"
form={form}
name="basic"
initialValues={DataSaveDetail}
onFinish={onFinish}
// initialValues={defForm}
>
<div className="contract_box">
{/* 合同编号、甲方、乙方 */}
<div className="list_1">
<div className="item_1">
<Form.Item
name="contractNumber"
label="Contract Number"
rules={[{ required: true, message: `${tipList[0]}` }]}
>
<Input style={{ width: 200 }} disabled placeholder="Contract Number" />
</Form.Item>
</div>
<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" />
</Form.Item>
</div>
<div className="item_1">
<Form.Item
name="contractPartyB"
label="Contract Party B"
rules={[{ required: true, message: `${tipList[2]}` }]}
>
<Input style={{ width: 200 }} disabled 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}
disabled={true}
/>
</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: 200 }} disabled 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}
disabled
/>
</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={true}
onPreview={onPreviews}
>
{fileList.length >= 3 ? null : <PlusOutlined />}
</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}
disabled
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} disabled>
Submit
</Button>
</div>
</div>
</Form>
{/* 附件预览 */}
<Modal
title="File Preview"
visible={tipModal}
width={800}
onCancel={handleCancel}
style={{ textAlign: 'center' }}
footer={null}
>
{fileInfo != null ? (
fileInfo.type == 'pdf' ? (
// pdf 换一种
<>
<PDF
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={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>
</Spin>
</>
);
};
function mapStateToProps(state: any) {
const { Contract } = state;
const { FileImg } = Contract;
const { ContractModel, Contract } = state;
const FileImg = Contract.FileImg;
const loading = state.loading.models.Contract || false;
return {
ContractModel,
Contract,
FileImg,
loading,
};
}
export default connect(mapStateToProps)(ContractDetail);
export default connect(mapStateToProps)(ContractContent);
src/utils/tip.ts
View file @ b8ae18d8
......@@ -53,9 +53,9 @@ export const BookingsTip = [
// 账号新增编辑
export const AccountTip = [
[{ required: true, type: 'email', message: 'Please enter email address !' }],
[{ required: true, message: 'Required' }],
[{ required: true, message: 'Required' }],
[{ required: true, message: 'Required' }],
[{ required: true, message: 'Please enter the correct contact information !' }],
[{ required: true, message: 'Required' }],
[{ required: true, message: 'Required' }],
[{ required: true, message: 'Required' }],
......
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