Commit b178aac3 authored by cellee's avatar cellee

合同模块

Signed-off-by: cellee's avatarcellee <893264950@qq.com>
parent a1294638
......@@ -204,6 +204,7 @@ export default defineConfig({
{ path: './', component: './ContractManagement/Contract' },
{ path: './Detail', component: './ContractManagement/ContractContent' },
{ path: './Edit',component:'./ContractManagement/ContractContent'},
{ path: './Add',component:'./ContractManagement/ContractContent'},
]
},
{
......
......@@ -3,11 +3,11 @@ import { SearchOutlined } from '@ant-design/icons';
const { Option } = Select;
class SearchOptions extends React.Component {
state = {
};
state = {};
constructor(props) {
super(props);
const {list,defaultValue,disabled} = this.props;
console.log(props)
// console.log("重要的")
this.state={
data: [],
......
import React, { useState,useEffect} from 'react';
import { Link, useIntl, connect, Dispatch, history } from 'umi';
import React, { useEffect } from 'react';
import { connect } from 'umi';
import SearchOptions from './SearchOptions';
import SearchOptionsTow from './SearchOptionsTow';
const SearchOptionsCommnity = (props: any) => {
const {dispatch, CommunityList,defaultValue,titleSearch,placeholder,disabled,value,onChange} = props;
const {dispatch, CommunityList, opname ,defaultName} = props;
const tosCommunityget = (values:any) => {dispatch({type: 'Init/tosCommunityget',playload:values})};
useEffect(() => {
......@@ -16,14 +17,23 @@ const SearchOptionsCommnity = (props: any) => {
const extendName = (values: any) => {
props.alone==true ?
props.onSubmit(values):
onChange(values)
// console.log(values)
opname(values)
}
return (
<>{CommunityList!=null?
<SearchOptions titleSearch={titleSearch} disabled={disabled} placeholder={placeholder} defaultValue={props.defaultValue!=null?props.defaultValue:value} list={CommunityList} onSubmit={extendName} />
// <SearchOptions
// titleSearch={titleSearch}
// disabled={disabled}
// placeholder={placeholder}
// defaultValue={props.defaultValue!=null?props.defaultValue:value}
// list={CommunityList}
// onSubmit={extendName} />
<SearchOptionsTow list={CommunityList} extendName={extendName} def = {defaultName}></SearchOptionsTow>
:null
}
</>
......
import React from 'react'
import { Select } from 'antd';
const { Option } = Select;
const SearchOptionsTow = (porps:any) => {
const {list,extendName,def} = porps;
const options = list.map((d:any,index:number) => <Option value={d} key={index}>{d}</Option>);
function onChange(value:any) {
// console.log(`selected ${value}`);
extendName(value)
}
return (
<div>
<Select
showSearch
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
onChange={onChange}
defaultValue={def}
>
{options}
</Select>
</div>
)
}
export default SearchOptionsTow
......@@ -12,6 +12,7 @@ export default {
Result: null,
DataSave: null,
DataSaveDetail:null,
playload:{}
},
reducers: {
......@@ -27,6 +28,9 @@ export default {
returnDataSaveDetail(state, { DataSaveDetail }) {
return {...state,DataSaveDetail}
},
returnPath(state, { playload}) {
return { ...state, playload };
},
},
effects: {
......@@ -59,15 +63,25 @@ export default {
}break;
case 27: {
message.success('save success !');
var tmp=resp
yield put({ type: 'returnResult', tmp })
history.back()
setTimeout(function(){
history.goBack()
},1000)
} break;
}
}
},
// url 带参数
*RA2({ playload }, { call, put }){
console.log("开始请求")
const resp = yield call(service.RA2, playload);
console.log(resp)
},
*ResultClear({ }, { put }) {
var tmp=null
yield put({type: 'returnResult', tmp} )
......@@ -78,6 +92,27 @@ export default {
yield put({type: 'returnDataSave', DataSave} )
},
*Paths({ playload }, { put }){
yield put({type: 'returnPath', playload} )
}
},
subscriptions: {
setup({ dispatch, history }) {
// 监听 路由
return history.listen(({ pathname }) => {
let path = {
path : pathname
}
dispatch({
type: 'Paths', // 选择返回值
playload:{
path
},
})
});
}
}
};
import { getRemoveList } from '@/services/package/contract';
import { message } from 'antd';
const ContractModel = {
//model标识
namespace: 'ContractModel',
// 数据
state: {
list:[],
page:1,
totalRow:0,
type:'Add',
record:-1,
},
// 同步
reducers: {
reGetList(state:any,{ payload }:{payload:any}) {
return Object.assign({}, state, payload)
// return {...payload}
}
},
// 异步
effects: {
// 拉取列表
*getList({payload}:{payload:any}, { put, call}:{ put:any, call:any}) {
const data = yield call(getRemoveList,payload);
if(data){
yield put({
type: 'reGetList',
payload:{
list:data.list,
page:payload.page.pageNum,
totalRow:data.page.totalRow
},
})
}else{
message.error('列表获取失败')
}
},
*getMove({payload}:{payload:any},{ put, call}:{ put:any, call:any}){
yield put({
type: 'reGetList',
payload:payload,
})
}
},
};
export default ContractModel;
\ No newline at end of file
import React, { useState, useEffect,useRef} from 'react';
import { Input ,Tabs,Row,Col, Button,Form,Radio} from 'antd';
import { Input ,Tabs,Row,Col, Button,Form,Radio,message} from 'antd';
const { TabPane } = Tabs;
import {connect,history} from 'umi';
......@@ -52,6 +52,7 @@ const CardDetail = (props:any) => {
const onFinish = (values:any) => {
var tmp={
communityId : DataSave.communityId,
id:DataSave.id,
ownerId:DataSave.ownerId,
applyStatus:values.applyStatus,
......@@ -60,6 +61,8 @@ const CardDetail = (props:any) => {
}
console.log(tmp)
RA(34,tmp,module,dispatch)
message.success('Success Operation!');
history.push('/CommercialService/AccessCardApplication')
}
return (
......
......@@ -71,12 +71,14 @@ const Detail = (props:any) => {
},[])
const onFinish = (values:any) => {
var val = values
console.log(values)
var val = values;
val.handleName =getCookie("name")
val.handleContacts=getCookie("phone")
val.type =""+ location.query.serviceType
val.id = location.query.id
val.userId = location.query.user_id
val.communityId = location.query.community_id
val.handleStatus = "1"
// val.file=fileList
console.log('Success:', val)
......
......@@ -34,8 +34,20 @@ const PropertyServices = (props: any) => {
];
const goToDetail = (value: any, record: any, e: any) => {
console.log(value);
console.log(serviceTypeGobal);
console.log(record);
//页面递进
history.push(location.pathname+(value==0?"/Edit":"/Detail")+urlEncode({serviceType: serviceTypeGobal,id: record.id,user_id:record.user_id}))
history.push(
location.pathname+(value==0?"/Edit":"/Detail")+urlEncode(
{
serviceType: serviceTypeGobal,
id: record.id,
user_id:record.user_id,
community_id:record.community_id
}
)
)
}
useEffect(() => {
......@@ -80,6 +92,8 @@ const PropertyServices = (props: any) => {
//获取数据
setLoading(true)
console.log(serviceType)
console.log(location.query)
RA(40, {
serviceType: serviceType,
handleStatus: location.query.handleStatus != undefined ? parseInt(location.query.handleStatus) : null,
......
import React, { useState, useEffect,useRef} from 'react';
import { Input ,Tabs,Row,Col, Button,Form,Radio} from 'antd';
import { Input ,Tabs,Row,Col, Button,Form,Radio ,message} from 'antd';
const { TabPane,} = Tabs;
import {connect,history} from 'umi';
......@@ -54,6 +54,7 @@ const RenovationDetail = (props:any) => {
const onFinish = (values:any) => {
var tmp={
communityId : DataSave.communityId,
id:DataSave.id,
ownerId:DataSave.ownerId,
decorationStatus:values.decorationStatus,
......@@ -63,7 +64,10 @@ const RenovationDetail = (props:any) => {
type:"6"
}
console.log(tmp)
RA(33,tmp,module,dispatch)
RA(33,tmp,module,dispatch);
message.success('Success Operation!');
history.push('/CommercialService/RenovationApplication')
}
return (
<div style={{ width: "100%", minWidth: 1020, padding: 34, backgroundColor: "#ffffff" }}>
......
......@@ -4,7 +4,8 @@ const { TabPane } = Tabs;
import {connect,history} from 'umi';
// 图标
import { SearchOutlined } from '@ant-design/icons';
import TitleSearch from '@/components/TitleSearch/TitleSearch'
......@@ -61,7 +62,18 @@ const CellList = (props:any) => {
{/* <TitleSearch listkey={['communityName']} list={['Community Name']} onSubmit={CallBackTitleSearch}/> */}
<div style={{display: "flex"}}>
<SearchOptionsCommnity alone={true} onSubmit={CallbackSearch} />
<Input placeholder="Administrator Name" allowClear onChange={onChange} style={{width:200,marginLeft: 20}} />
{/* 添加管理员姓名的搜索 */}
<Input
placeholder="Administrator Name"
allowClear
onChange={onChange}
style={{width:200,marginLeft: 20}} />
{/* 点击搜索 */}
<Button type="primary" icon={<SearchOutlined />} style={{width:80,marginLeft: 20}} >
搜索
</Button>
</div>
<div style={{height:80,position:"relative"}}>
<div style={{ position: "absolute", right: 0 }}>
......
......@@ -5,6 +5,11 @@ const { TabPane } = Tabs;
import { objectColumns } from '@/utils/string';
import {timestampToTime3, timestampToTime} from '@/utils/time'
// 搜索框
import TitleSearch from '../../../components/TitleSearch/TitleSearch';
// communityNum: "A7"
// count: 0
// createTime: "Jul 8, 2020 7:38:37 PM"
......@@ -35,14 +40,83 @@ const CommunityAnnouncement = (props:any) => {
["noticScope", "noticScope"],
["Actions",null, (text: any, record: any) => (<Space size="middle"> <a>Detail</a></Space>)],
])
const { dispatch, Data } = props;
const { dispatch, Data, curString } = props;
useEffect(() => {
RA(25,{communityNum: "", noticTitlel: "" },module,dispatch)
},[])
//
const RA = (index:any,values: any) => {
console.log(values)
dispatch({
type: 'FacilityBookings/RA',
playload: {index:index, body:values }
})
};
const SA = (values: any) => { dispatch({ type: 'FacilityBookings/SA', playload: values }) };
const QA = (values: any) => { dispatch({ type: 'FacilityBookings/QA', playload: values }) };
const CA = () => { dispatch({ type: 'FacilityBookings/CA', playload: null }) };
const CallBackTitleSearch= (comment: any) => {
console.log(comment)
if (curString.tab == 1) {
if (comment.communityName != null || comment.key != null || comment.status != null) {
var tmp = curString
tmp.subscribeDate = comment.key
if (comment.status == null||comment.status==undefined) {
tmp.status = 0;
} else {
tmp.status = comment.status
}
tmp.communityNameList = comment.communityName
tmp.curPage=1
QA(tmp)
console.log(tmp)
//中断
RA(9, { userToken: token, pageNum: "1", subscribeDate: tmp.subscribeDate, status: tmp.status,communityNameList:comment.communityName })
}
} else {
if (comment.communityName != null || comment.facilityName != null) {
var tmp = curString
tmp.communityNameList = comment.communityName
tmp.facilityName = comment.facilityName
tmp.curPage=1
QA(tmp)
RA(8, {communityNameList: comment.communityName, facilityName: comment.facilityName, pageNum: "1"})
}
}
}
return (
<div style={{ width: "100%", minWidth: 1020, padding: 34, backgroundColor: "#ffffff" }}>
{/* 搜索组件 */}
{
curString.tab == 1 ?
<>
<TitleSearch
status={[{
name: ["status", "Order status"],
data: [[0, "All"], [1, "Applied"], [2, "Reserved"], [3, "Used"], [4, "Cancelled"]]
}]}
time={["key", "Booking time "]}
community={"communityName"}
checklist={curString.communityNameList!=null?curString.communityNameList:null}
onSubmit={CallBackTitleSearch} />
</> :
<>
<TitleSearch
listkey={['facilityName']} list={['Facility name']}
community={"communityName"}
onSubmit={CallBackTitleSearch} />
</>
}
<div style={{height:80,position:"relative"}}>
<div style={{ position: "absolute", right: 0 }}><Button type="primary" onClick={goToAdd}>Create new Announcement</Button></div>
</div>
......@@ -61,8 +135,23 @@ const CommunityAnnouncement = (props:any) => {
function map(state:any) {
const { Data} = state[module]
return { Data}
const { curString } = state.FacilityBookings;
return { Data,curString}
}
export default connect(map)(CommunityAnnouncement);
// function mapStateToProps(state:any) {
// const { Data, Data2,DataSave,curString,Result } = state.FacilityBookings;
// const { token } = state.login;
// return {
// Data,
// Data2,
// DataSave,
// curString,
// Result,
// token
// };
// }
// export default connect(mapStateToProps)(FacilityBookings);
//备注 发布人缺少 发布时间格式错误
\ No newline at end of file
......@@ -27,8 +27,15 @@ const FacilityBookings = (props:any) => {
const { formatMessage } = useIntl();
const { dispatch, location, Data, Data2, token,DataSave,curString,Result } = props;
const RA = (index:any,values: any) => { dispatch({ type: 'FacilityBookings/RA', playload: {index:index, body:values } }) };
const RA = (index:any,values: any) => {
console.log(values)
dispatch({
type: 'FacilityBookings/RA',
playload: {index:index, body:values }
})
};
const SA = (values: any) => { dispatch({ type: 'FacilityBookings/SA', playload: values }) };
const QA = (values: any) => { dispatch({ type: 'FacilityBookings/QA', playload: values }) };
......@@ -106,6 +113,8 @@ const FacilityBookings = (props:any) => {
const CallBackTitleSearch= (comment: any) => {
console.log(comment)
if (curString.tab == 1) {
if (comment.communityName != null || comment.key != null || comment.status != null) {
var tmp = curString
......
......@@ -4,7 +4,7 @@ const { TabPane } = Tabs;
import {connect} from 'umi';
import { objectColumns } from '@/utils/string';
import { objectColumns } from '@/utils/string';
// cdkCode: 998974
// cdkStatus: "0"
......@@ -27,13 +27,17 @@ import { objectColumns } from '@/utils/string';
// updateTime: "Sep 7, 2020 6:13:06 PM"
// visitorsName: "销赃"
// visitorsPhone: "18535669865"
const columns = objectColumns( [
["User Name", "inviterName"],
["Visitor", "visitorsName"],
["Security Guard", "securityGuardName"],
["Number Plate", "numberPlate"],
["Address", "inviterAddress"],
["Actions",null, (text: any, record: any) => (<Space size="middle"> <a>Detail</a></Space>)],
["Number Plate", "numberPlate"],
["time", "updateTime"],
["community", "visitorCommunity"],
["unit", "inviterAddress"]
// ["Actions",null, (text: any, record: any) => (<Space size="middle"> <a>Detail</a></Space>)],
])
import TitleSearch from '@/components/TitleSearch/TitleSearch'
......@@ -42,16 +46,28 @@ const module="VisitorRecord"
const VisitorRecord = (props:any) => {
const { dispatch, Data } = props;
const TosVisitorRecordGet = (values: any) => { dispatch({ type: 'tosVisitorRecord/get', playload: values }) };
useEffect(() => {
RA(26,{inviterAddress: "", visitorCommunity: ""},module,dispatch)
}, [])
const CallBackTitleSearch = (values:any) => {
console.log(values)
// visitorCommunity
TosVisitorRecordGet({
visitorCommunity: values.inviterAddress,
})
}
const pagination={defaultCurrent:1,total: Data!=null?Data.length:0}
return (
<div style={{ width: "100%", minWidth: 1020, padding: 34, backgroundColor: "#ffffff" }}>
<TitleSearch listkey={['inviterAddress']} list={['Community Name']} onSubmit={CallBackTitleSearch}/>
<div style={{ width: "100%", minWidth: 1020, padding: 34, backgroundColor: "#ffffff" }}>
<TitleSearch listkey={['inviterAddress']}
list={['Community Name']}
community={"serviceCommunityList"}
onSubmit={CallBackTitleSearch}/>
{Data!=null?
<Table
loading={false}
......@@ -59,7 +75,9 @@ const VisitorRecord = (props:any) => {
style={{ marginTop: 16 }}
dataSource={Data.rows}
columns={columns}
pagination={{ current: 1, total: Data.total}} />:null}
pagination={pagination}
// pagination={{ current: 1, total: Data.total}}
/>:null}
</div>
);
};
......
import React, { useState, useEffect } from 'react';
import React , { useState, useEffect } from 'react';
import { Space, Button, message , Pagination ,Form ,Input } from 'antd';
import { connect, history, Loading } from 'umi';
import { PlusOutlined } from '@ant-design/icons';
import ProTable from '@ant-design/pro-table';
import moment from 'moment';
import styles from './ContractContent.less';
import styles from './index.less';
import { Input ,Menu,Table,Space,Row} from 'antd';
import { Link, useIntl, connect, Dispatch, history } from 'umi';
import { RA } from '@/services/tos';
const Contract = (props:any) => {
const { formatMessage } = useIntl();
const { dispatch,location,Data,Result } = props;
const {location,ContractModel,dispatch,loading } = props;
const RA = (index: any, values: any) => { dispatch({ type: 'Contract/RA', playload: { index: index, body: values } }) };
const SA = (values: any) => { dispatch({ type: 'Contract/SA', playload: values }) };
useEffect(() => {
console.log("合同页面")
RA(19, {
pageNum:"1",
contractNumber:"",
contractTitle:"",
communityName:""
})
}, [])
useEffect(() => {
if (Data != null) {
console.log(Data)
// const [confirmLoading,setConfirmLoading] = useState(false); // 表单加载loding
// 把请求装在一个地方
function requst(payload){
dispatch({type:'ContractModel/getList', payload:payload})}
// 数据
useEffect(()=>{
let payload = {
index: 19,
page:{
pageNum:ContractModel.page
}
}
},[Data])
const goToDetail = (record: any, e: any) => {
SA(record)
history.push(location.pathname+'/Detail')
}
const goToEdit = (record: any, e: any) => {
SA(record)
history.push(location.pathname+'/Edit')
requst(payload);
},[1]) //页面进来执行一次
// 跳转
const Jump = (record:any,Jump:String)=>{
console.log(record)
console.log(Jump)
dispatch({
type: 'ContractModel/getMove',
payload: {
type:Jump,
record:record,
},
});
// if(record == 0){
// history.push(location.pathname + '/' + Jump)
// }
// console.log(location.pathname + '/' + Jump)
history.push(location.pathname + '/' + Jump)
}
// 表头
const columns = [
{title: "Community Name",dataIndex: 'communityName'},
{ title: "Contract File", dataIndex: 'contractFileName' },
{ title: "Company",render: (text: any, record: any) => (<><div>{record.contractPartyA}</div><div>{record.contractPartyB}</div></>)},
{title: "Contract Number",dataIndex: 'contractNumber'},
{title: "Contract Title",dataIndex: 'contractTitle'},
{ title: "Valid End Date", dataIndex: 'contractValidEndDate'},
{title: "Valid Start Date",dataIndex: 'contractValidStartDate'},
{
title: "Contract Number",
render:function(record:any) {
let mom = moment(record.contractValidEndDate).diff(moment(), 'day');
return <span className={mom < 30? styles.red : ''}>{record.contractNumber}</span>
}
}, // 合同编号
{
title: "Company",
render: (text:any, record:any) => (
<>
<div>
<span>Party A : {record.contractPartyA}</span>
</div>
<div>
<span>Party B : {record.contractPartyB}</span>
</div>
</>
)
}, //合同方
{title: "Contract Title",dataIndex: 'contractTitle'}, // 合同标题
{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: "Contract File", dataIndex: 'contractFileName' }, // 附件
{
title: "Actions",
render: (text: any, record: any) => (
<Space size="middle">
<a onClick={goToEdit.bind(this, record)}>Edit</a>
<a onClick={goToDetail.bind(this,record)}>Detail</a>
<a onClick={()=>{Jump(record,'Edit')}}>Edit</a>
<a onClick={()=>{Jump(record,'Detail')}}>Detail</a>
</Space>
),
},
},// 操作
];
return (
<div className={styles.base}>
{/* 头部组件 */}
<div className={styles.box}>
<input className={styles.item1} placeholder={"Project Name"} />
<input className={styles.item2} placeholder={"Service Type"} />
<input className={styles.item2} placeholder={"Order Status"} />
<button className={styles.item3}>Search</button>
</div>
{/* 内容组件 */}
<div className={styles.box2}>
// 页面切换
const paginationHandler = (page: number, pageSize?: number)=>{
dispatch({
type: 'ContractModel/getList',
payload: {
index:19,
page:{
pageNum:page,
}
},
});
}
// 刷新
const resetHandler = () => {
dispatch({
type: 'ContractModel/getList',
payload: {
index:19,
page:{
pageNum:ContractModel.page,
}
},
});
};
<button className={styles.buttonAdd} onClick={goToEdit}> + Add To</button>
</div>
{/* 列表组件 */}
{
Data!=null?<Table rowKey={"id"} style={{ marginTop: 16 }} dataSource={Data.list} columns={columns} pagination={{ defaultCurrent: 1, total: Data.totalRow }} />:null
}
// 表单标识
const [form] = Form.useForm()
// 重置
const onReset = () => {
form.resetFields();
requst();
};
// 表单提交
const onFinishContract = (value:any)=>{
// console.log(value)
if(!value.communityName&&!value.contractNumber&&!value.contractTitle){
message.error('Please enter one of them!')
}else{
// RA(19, {
// pageNum:"1",
// contractNumber:value.contractNumber,
// contractTitle:value.contractTitle,
// communityName:value.communityName
// })
}
}
return (
</div>
<>
<div className={styles.contop}>
<Form
autoComplete= "off"
layout="inline"
form={form}
name="contract"
onFinish={onFinishContract}
>
<Form.Item name="communityName">
<Input allowClear placeholder='Community name' />
</Form.Item>
<Form.Item name="contractNumber">
<Input allowClear placeholder='Contract No' />
</Form.Item>
<Form.Item name="contractTitle">
<Input allowClear placeholder='Contract Title' />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit"> Search </Button>
<Button htmlType="button" onClick={onReset} style={{marginLeft:'15px'}}>Reset</Button>
</Form.Item>
</Form>
</div>
<div className={styles.listbox}>
<ProTable
// request={requestHeadl}
pagination={false} // 隐藏默认分页
rowKey={"id"}
dataSource={ContractModel.list}
columns={columns}
search={false}
loading={loading}
toolBarRender={() => [
<Button key="3" type="primary" onClick={()=>{Jump(0,'Add')}}>
<PlusOutlined />Add Contract
</Button>,
]}
options={{
density: true,
fullScreen: true,
reload: () => {
resetHandler();
},
setting: false,
}}
headerTitle="Contract list"
// pagination={{ defaultCurrent: 1, total: Data.totalRow }}
/>
<div className={styles.pages}>
<Pagination
current={ContractModel.page}
total={ContractModel.totalRow}
onChange={paginationHandler}
// onShowSizeChange={pageSizeHandler}
// current={users.meta.page}
// pageSize={users.meta.per_page}
/>
</div>
</div>
</>
);
};
function mapStateToProps(state:any) {
const { Data,curString,Result } = state.Contract;
function mapStateToProps({ ContractModel }) {
const loading = ContractModel.list.length > 0 ? false: true;
return {
Data,
curString,
Result,
ContractModel,
loading
};
}
export default connect(mapStateToProps)(Contract);
import React, { useState, useEffect } from 'react';
import { Input ,Table,Space,Form,Button,message} from 'antd';
import { Link, useIntl, connect, Dispatch, history, Loading } from 'umi';
import ProTable, { ProColumns, TableDropdown, ActionType } from '@ant-design/pro-table';
import { RA } from '@/services/tos';
import { times } from 'lodash';
import moment from 'moment';
import styles from './index.less';
import './ContractContent.less';
const Contract = (props:any) => {
const { formatMessage } = useIntl();
const { dispatch,location,Data,Result ,loading } = props;
const RA = (index: any, values: any) => { dispatch({ type: 'Contract/RA', playload: { index: index, body: values } }) };
const SA = (values: any) => { dispatch({ type: 'Contract/SA', playload: values }) };
// 把请求装在一个地方
function requst(){RA(19, {pageNum:"1",contractNumber:"",contractTitle:"",communityName:""})}
useEffect(() => {
console.log("合同页面")
requst()
}, [])
useEffect(() => {
if (Data != null) {
console.log(Data)
}
},[Data])
const goToDetail = (record: any, e: any) => {
SA(record)
history.push(location.pathname+'/Detail')
}
const goToEdit = (record: any, e: any) => {
SA(record)
history.push(location.pathname+'/Edit')
}
const goToAdd = (record: any) => {
SA(record)
history.push(location.pathname+'/Add')
}
// 日期处理
function CountDown(record: any) {
return record.contractValidEndDate
};
// 表头
const columns = [
{
title: "Contract Number",
render:function(record) {
let mom = moment(record.contractValidEndDate).diff(moment(), 'day');
return <span className={mom < 30? 'red' : ''}>{record.contractNumber}</span>
}
}, // 合同编号
{
title: "Company",
render: (text:any, record:any) => (
<>
<div>
<span>Party A : {record.contractPartyA}</span>
</div>
<div>
<span>Party B : {record.contractPartyB}</span>
</div>
</>
)
}, //合同方
{title: "Contract Title",dataIndex: 'contractTitle'}, // 合同标题
{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: "Contract File", dataIndex: 'contractFileName' }, // 附件
{
title: "Actions",
render: (text: any, record: any) => (
<Space size="middle">
<a onClick={goToEdit.bind(this, record)}>Edit</a>
<a onClick={goToDetail.bind(this,record)}>Detail</a>
</Space>
),
},// 操作
];
// 表单标识
const [form] = Form.useForm()
// 重置
const onReset = () => {
form.resetFields();
requst()
};
// 表单提交
const onFinishContract = (value:any)=>{
// console.log(value)
if(!value.communityName&&!value.contractNumber&&!value.contractTitle){
message.error('Please enter one of them!')
}else{
RA(19, {
pageNum:"1",
contractNumber:value.contractNumber,
contractTitle:value.contractTitle,
communityName:value.communityName
})
}
}
return (
<div className={styles.base}>
{/* 头部组件 */}
{/* <div className={styles.box}>
<Form
autoComplete= "off"
layout="inline"
form={form}
name="contract"
onFinish={onFinishContract}
>
<Form.Item name="communityName">
<Input allowClear placeholder='Community name' />
</Form.Item>
<Form.Item name="contractNumber">
<Input allowClear placeholder='Contract No' />
</Form.Item>
<Form.Item name="contractTitle">
<Input allowClear placeholder='Contract Title' />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit"> Search </Button>
<Button htmlType="button" onClick={onReset} style={{marginLeft:'15px'}}>Reset</Button>
</Form.Item>
</Form>
</div> */}
{/* 内容组件 */}
<div className={styles.box2}>
<button className={styles.buttonAdd} onClick={goToAdd}> + Add To</button>
</div>
{/* 列表组件 */}
{
<ProTable
request={requestHeadl}
rowKey={"id"}
style={{ marginTop: 16 }}
columns={columns}
pagination={{ defaultCurrent: 1, total: Data.totalRow }}
loading={ loading }
/>
}
</div>
);
};
function mapStateToProps(state) {
const { Data,curString,Result } = state.Contract;
const loading = state.loading.models.user;
return {
Data,
curString,
Result,
loading
};
}
export default connect(mapStateToProps)(Contract);
......@@ -4,8 +4,7 @@
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
min-width: 1020px;
padding: 20px;
}
//头部组件
......@@ -180,4 +179,61 @@
font-weight:400;
color:rgba(153,153,153,1);
line-height:30px;
}
.contop{
padding: 20px;
background: #fff;
margin-bottom: 20px;
}
// 字符串变红
.red{
color: red;
}
// 合同详情
.contract_box{
overflow: hidden;
.list_1{
display: flex;
justify-content: flex-start;
justify-items: center;
flex-wrap: wrap;
.item_1{
display: flex;
justify-content: flex-start;
justify-items: center;
line-height: 34px;
margin-right: 20px;
label{
display: inline-block;
width: 150px;
}
}
}
.list2{
display: flex;
justify-content: flex-start;
justify-items: center;
flex-wrap: wrap;
.label{
width: 150px;
line-height: 34px;
}
.main{
// margin-bottom: 24px;
}
}
}
.listbox{
width: 100%;
background-color: #ffffff;
padding: 10px;
}
.pages{
text-align: right;
padding: 10px ;
}
\ No newline at end of file
import React, { useState, useEffect,useRef} from 'react';
import styles from './ContractContent.less';
import { Input ,Form,Table,Space,Pagination,Tooltip, message } from 'antd';
import { Input ,Form, message,Upload, Button, DatePicker ,Space, } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { Link, useIntl, connect, Dispatch } from 'umi';
import { DatePicker } from 'antd';
import { Upload, Button } from 'antd';
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';
const ContractContent = (props: any) => {
const {dispatch,location,DataSave,DataSaveDetail } = props;
const formRef = useRef(null);
const ContractContent = (props: any) => {
const { ContractModel,dispatch } = props;
const { RangePicker } = DatePicker; // 日期组件
const [form] = Form.useForm(); // 表单
const RA = (index: any, values: any) => { dispatch({ type: 'Contract/RA', playload: { index: index, body: values } }) };
const [editFlag, setEditFlag] = useState(false);
const [extend, setExtend] = useState();
const [fileList, setFileList] = useState([]);
// const ad = [{ uid:"1",name: "A.pdf",status: "done" }]
// 设置之前时间不能选择
function disabledDate(current:any) {
return current && current <= moment().subtract(1, "days").endOf('day');
}
const startTime = moment().format('YYYY-MM-DD'); // 开始默认事件
const overTime = moment().add(1, 'month').format('YYYY-MM-DD'); // 结束默认事件
const [fileList, setFileList] = useState([] as any);
useEffect(()=>{
// 如果是添加传来没有值的时候 就清空 否则 赋值给表单
if(ContractModel.record === -1){
// 返回列表
}else if(ContractModel.record === 0){
form.resetFields()
}else{
let arr = ContractModel.record.contractFileName.split(',');
let obj = new Array;
for(var i in arr){
let a = {
uid: arr[i],
name: arr[i],
url:'http://'
}
obj.push(a)
}
setFileList([...obj])
// setFileList([{ uid: 1,name:DataSaveDetail.contractFileName }])
form.setFieldsValue({
...ContractModel.record,
time:[moment(ContractModel.record.contractValidStartDate),moment(ContractModel.record.contractValidEndDate)],
})
}
} ,[ContractModel])
// const goToReturn = () => {
// // console.log(fileList)
// history.back()
// }
// // 提交
const onFinish = (values:any) => {
values.contractValidStartDate = values.time[0].format('YYYY-MM-DD')
values.contractValidEndDate = values.time[1].format('YYYY-MM-DD')
let file = fileList;
let data = new Array();
for (let i = 0; i < file.length; i++){
data.push(fileList[i].name)
}
values.contractFileNameList = data;
if(ContractModel.record.id === undefined){
// 添加
RA(27, values)
}else{
// 修改
}
// RA(27, values)
}
// 上传文件设置
const uploadProps = {
accept:".pdf,",
action:"/tos/image/upload",
data: { imageType: "tosContract", extends: extend },
accept:".doc,.docx,.jpg,.png,.pdf" ,
action:"/tos/image/upload",
data: { imageType: "tosContract" },
fileList:fileList,
onChange({ file, fileList }) {
let tmp=fileList
setFileList(tmp.filter(file => !!file.status))
setFileList(fileList)
if (file.status == 'done') {
console.log(fileList);
message.success( file.name,3)
}
},
};
useEffect(() => {
if ((location.pathname).indexOf("/Edit")>-1) {
setEditFlag(true)
} else {
setEditFlag(false)
}
}, [location.pathname]);
useEffect(() => {
if (DataSave!=null) {
console.log(DataSave)
RA(20, {
contractId: DataSave.id
})
}
}, [DataSave])
useEffect(() => {
if (DataSaveDetail != null) {
console.log(DataSaveDetail)
if (editFlag) {
setExtend(DataSaveDetail.communityName)
var result=new Array()
// if (DataSaveDetail.fileUrls != null) {
// DataSaveDetail.contractFileName.map((item:any, index:any) => {
// result.push({ uid: index,name:item })
// })
// }
setFileList([{ uid: 1,name:DataSaveDetail.contractFileName }])
formRef.current.setFieldsValue({
contractFileName: "cleanFiles",
contractNumber: "456",
contractPartyA: "国企A",
contractPartyB: "民企B",
contractTitle: "清洁服务协议",
contractValidEndDate: moment("2020-09-21", "YYYY-MM-DD"),
contractValidStartDate: moment("2020-08-28","YYYY-MM-DD"),
})
}
}
}, [DataSaveDetail])
const goToReturn = () => {
// console.log(fileList)
history.back()
}
};
// communityName: "A7"
// contractFileName: "cleanFiles"
// contractNumber: "456"
// contractPartyA: "国企A"
// contractPartyB: "民企B"
// contractTitle: "清洁服务协议"
// contractValidEndDate: "2020-09-21"
// contractValidStartDate: "2020-08-28"
// count: 0
// createTime: "Aug 1, 2020 4:15:47 PM"
// deleted: 0
// extend: ""
// fileUrls: Array(1)
// 0: "http://acc-huahu
const extendName = (values:any) => {
console.log(values);
setExtend(values)
// 时间提示
// let tipTime = moment(defForm.time[1]).subtract(25, 'days').format('YYYY-MM-DD');
// let dec = moment(tipTime).diff(startTime,'days') > 1 ? tipTime : 'Due soon';
// const [stateTime,setmodalTime] = useState(dec); // 监听时间变化 -- 结束时间
// // 设置提示倒计时 25 天
const changeTime = (data:any,dateStrings:any)=>{
// if(overTime != dateStrings[1]){
// moment(dateStrings[1]).diff(startTime,'days') > 25 ?
// setmodalTime(moment(dateStrings[1]).subtract(25, 'days').format('YYYY-MM-DD')) :
// setmodalTime('Due soon');
// }
// form.setFieldsValue({
// 'time' : [moment(dateStrings[0]),moment(dateStrings[1])]
// })
}
const onFinish = (values:any) => {
values.contractValidStartDate= values.contractValidStartDate.format('YYYY-MM-DD')
values.contractValidEndDate = values.contractValidEndDate.format('YYYY-MM-DD')
values.communityName = extend
var data=new Array()
for (var i = 0; i < fileList.length; i++){
data.push(fileList[i].name)
}
values.contractFileNameList=data
RA(27, values)
console.log(values)
// 选择小区名字并赋值
const opname = (value:any)=>{
form.setFieldsValue({
'communityName' : value
})
}
return (
<div className={styles.base}>
{/* 头部组件 */}
{/* 头部组件 */}
<div className={styles.box}>
<div className={styles.item1}>{editFlag ? "Edit Service Provider" : "Service Provider Detail"}</div>
<button className={styles.item3} onClick={goToReturn}>返回</button>
</div>
{/* </div>
// "contractNumber":"7891222",
// "contractPartyA":"央企Q",
// "contractPartyB":"私企E",
// "communityName":"A7",
// "contractValidStartDate":"2020-07-01",
// "contractValidEndDate":"2020-08-01",
// "contractFileName":"维修协议概述",
// "contractRemindContent":"提醒内容111",
// "contractFileNameList": ["A.pdf"] */}
<Form ref={formRef} name="basic" onFinish={onFinish} >
<div className={styles.box1}>
<div className={styles.box1item1}>Contract Code</div>
<div className = { styles.box1item2 } > {editFlag?(<Form.Item name="contractNumber"><Input style={{width:200}} placeholder="Contract Code" /></Form.Item>):(DataSaveDetail!=null?DataSaveDetail.contractNumber:null)}</div>
<div className={styles.box1item3}>Contract Party A</div>
<div className={styles.box1item4}>{editFlag?(<Form.Item name="contractPartyA"><Input style={{width:200}} placeholder="Corporate Name" /></Form.Item>):(DataSaveDetail!=null?DataSaveDetail.contractPartyA:null)}</div>
<div className={styles.box1item5}>Contract Party B</div>
<div className={styles.box1item6}>{editFlag?(<Form.Item name="contractPartyB"><Input style={{width:200}} placeholder="Corporate Name" /></Form.Item>):(DataSaveDetail!=null?DataSaveDetail.contractPartyB:null)}</div>
<div className={styles.item1}>{ContractModel.type} Service Provider</div>
{/* <button className={styles.item3} onClick={goToReturn}>&lt;Back</button> */}
</div>
{/* 表单 initialValues={defForm} */}
<Form
// ref={formRef}
autoComplete= "off"
form={form}
name="basic"
initialValues={ContractModel.record}
onFinish={onFinish}
// initialValues={defForm}
>
<div className='contract_box'>
{/* 合同编号、甲方、乙方 */}
<div className='list_1'>
<div className='item_1'>
<label>Contract Number</label>
<Form.Item name="contractNumber">
<Input style={{width:200}} placeholder="Contract Code" />
</Form.Item>
</div>
<div className='item_1'>
<label>Contract Party A</label>
<Form.Item name="contractPartyA">
<Input style={{width:200}} placeholder="Corporate Name" />
</Form.Item>
</div>
<div className='item_1'>
<label>Contract Party B</label>
<Form.Item name="contractPartyB">
<Input style={{width:200}} placeholder="Corporate Name" />
</Form.Item>
</div>
</div>
{/* 小区 */}
<div className='list2'>
<div className='label'>
<span>Community Name</span>
</div>
<div className='main'>
<Form.Item
name="communityName"
rules={[{ required: true, message: 'Please Choice CommunityName!' }]}>
<SearchOptionsCommnity
defaultName={ContractModel.record.communityName}
// ubmit={extendName}
opname={opname}
/>
</Form.Item>
</div>
</div>
{/* 合同标题 */}
<div className='list2'>
<div className='label'>
<span>Contract Title</span>
</div>
<div className='main'>
<Form.Item name="contractTitle">
<Input style={{width:200}} placeholder="XXXX Labor Contract" />
</Form.Item>
</div>
</div>
<div className={styles.box5}>
<div className={styles.box5item1}>Project</div>
<div className={styles.box5item2}>{editFlag?(<SearchOptionsCommnity defaultValue={extend} onSubmit={extendName} />):(DataSaveDetail!=null?DataSaveDetail.communityName:null)}</div>
</div>
<div className={styles.box4}>
<div className={styles.box4item1}>Contract Title</div>
<div className={styles.box4item2}>{editFlag?(<Form.Item name="contractFileName"><Input style={{width:200}} placeholder="XXXX Labor Contract" /></Form.Item>):(DataSaveDetail!=null?DataSaveDetail.contractTitle:null)}</div>
</div>
<div className={styles.box6}>
<div className={styles.box6item1}>Effective Date</div>
<div className={styles.box6item2}>{editFlag ? (<Form.Item name="contractValidStartDate"><DatePicker style={{width:140}}/></Form.Item>) : (<div className={styles.box6item2x1}>{DataSaveDetail!=null?DataSaveDetail.contractValidEndDate:null}</div>)}</div>
<div className={styles.box6item3}>{editFlag ? (<Form.Item name="contractValidEndDate"><DatePicker style={{width:140}}/></Form.Item>) : (<div className={styles.box6item2x1}>{DataSaveDetail!=null?DataSaveDetail.contractValidStartDate:null}</div>)}</div>
</div>
{
editFlag ? (
<div className={styles.box7p}>
<div className={styles.box7item1}>Contract</div>
<div className={styles.box7item0}>
{extend != null ?
<Upload {...uploadProps}>
{/* 起止时间 */}
<div className='list2'>
<div className='label'>
<span>Effective Date</span>
</div>
<div className='main'>
<Form.Item name="time">
<RangePicker
locale={locale}
defaultValue={ContractModel.time}
disabledDate={disabledDate}
// onChange={changeTime}
/>
</Form.Item>
</div>
</div>
{/* 附件上传 */}
<div className='list2'>
<div className='label'>
<span>Contract</span>
</div>
<div className='main'>
<Form.Item>
<Upload
{...uploadProps} >
<Button>
<UploadOutlined /> Upload
</Button>
</Upload>:null
}
</Button>
</Upload>
</Form.Item>
</div>
</div>
) : (
<div className={styles.box7}>
<div className={styles.box7item1}>Contract</div>
<div className={styles.box7item2}>{DataSaveDetail!=null?DataSaveDetail.contractFileName:null}</div>
<div className={styles.box7item3}><a href={DataSaveDetail!=null?DataSaveDetail.fileUrls:null}>Preview</a></div>
{/* 合同内容 */}
<div className='list2'>
<div className='label'>
<span>Contract Content</span>
</div>
<div className='main'>
<div className={styles.box8item2x1}>
<Form.Item name="contractRemindContent">
<TextArea autoSize={false} style={{ padding: 8, width: 600, height: 194 }}>
</TextArea>
</Form.Item>
</div>
<div className={styles.box8item2x2}>
The system will send out reminders of contract expiration on 25 .
{/* <span style={{color:'#f00'}}>&nbsp;{stateTime}</span> */}
</div>
</div>
</div>
)
}
<div className={styles.box8}>
<div className={styles.box8item1}>Reminder Content</div>
<div className={styles.box8item2}>
<div className={styles.box8item2x1}>
{
editFlag ? (<Form.Item name="contractRemindContent"><TextArea autoSize={false} style={{ padding: 8, width: 600, height: 194 }}></TextArea></Form.Item>) : (
<TextArea autoSize={false} style={{padding:8,width:600,height:194}} disabled defaultValue={"Please note the information..."}></TextArea>
)
}
<div>
<LINE/>
<Button type="primary" htmlType="submit">Conserve</Button>
</div>
<div className={styles.box8item2x2}>The system will send out reminders of contract expiration on 25</div>
</div>
</div>
{
editFlag ? (<div>
<LINE/>
<Button type="primary" htmlType="submit">Submit</Button>
</div>):(<div />)
}
</Form>
</div>
)
}
function mapStateToProps(state:any) {
const { DataSave,Result,DataSaveDetail } = state.Contract;
function mapStateToProps({ ContractModel }) {
return {
DataSave,
DataSaveDetail
ContractModel
};
}
export default connect(mapStateToProps)(ContractContent);
......@@ -4,7 +4,7 @@
.base {
width: 100%;
background-color: #ffffff;
padding: 34px;
padding: 30px;
}
//边栏1
......@@ -13,7 +13,7 @@
width: 100%;
height: 34px;
position: relative;
margin-bottom: 56px;
margin-bottom: 30px;
}
.input{
width:200px;
......
// import request { , extend } from 'umi';
import request from 'umi-request';
// 请求列表
import { requestList } from '@/utils/params';
let headers = { 'Content-Type': 'application/json'}
function Body(values:any) { return {method: 'POST',body: JSON.stringify(values),headers:headers}}
// 列表
export const getRemoveList = async (playload:any) =>{
// 改造获取页码
console.log(playload)
console.log('开始请求')
let url = (requestList[playload.index])[0]
return request(url, Body(playload.page))
.then(function(response) {
if(response.error_code == '0000'){
return response.data
}else{
return false
}
})
.catch(function(error) { return false; });
}
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