Merge branch 'final' of http://120.77.240.215:9701/Maple/tostumi into final

config/config.ts

@@ -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'},
               ]
             },
             {

src/components/SearchOptions/SearchOptions.jsx

@@ -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: [],

src/components/SearchOptions/SearchOptionsCommnity.tsx

-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
       }
     </>

src/components/SearchOptions/SearchOptionsTow.tsx

+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

src/models/CommunityManagement/Contract.ts

@@ -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
+                },
+            })
+        });
+    }
+  }
+
 };

src/models/LContract/Contract.ts

+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,
+       loding:true,
+    },
+    // 同步
+    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,
+                        loding:false
+                    },
+                })
+            }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

src/pages/CommercialService/CardDetail.tsx

 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 (

src/pages/CommercialService/Detail.tsx

@@ -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)

src/pages/CommercialService/PropertyServices.tsx

@@ -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,

src/pages/CommercialService/RenovationDetail.tsx

 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" }}>

src/pages/CommunityManagement/CellList/CellList.tsx

 import React, { useState, useEffect } from 'react';
-import { Input ,Tabs,Table,Space, Button} from 'antd';
+import { Input ,Tabs,Table,Space, Button ,Form ,message} from 'antd';
 const { TabPane } = Tabs;
 
 import {connect,history} from 'umi';
 
-
+// 图标
+import { SearchOutlined,ClearOutlined,PlusOutlined } from '@ant-design/icons';
+import ProTable from '@ant-design/pro-table';
 
 
 import TitleSearch from '@/components/TitleSearch/TitleSearch'
@@ -14,6 +16,9 @@ import { objectColumns } from '@/utils/string';
 import { timestampToTime } from '@/utils/time';
 import CommunitySearch from "@/components/CommunitySearch/CommunitySearch";
 const module="CellList"
+
+import './celllist.less'
+
 const CellList = (props:any) => {
 
   const columns = objectColumns([
@@ -54,24 +59,105 @@ const CellList = (props:any) => {
     SA(values,module,dispatch)
     history.push("./CellList/Detail");
   }
+
+  
+  // 表单标识
+  const [form] = Form.useForm()
+  // 表单提交
+  const onFinishContract = (value:any)=>{
+    // console.log(value)
+    if(!value.communityName&&!value.contractNumber&&!value.contractTitle){
+      message.error('Please enter one of them!')
+    }else{
+      console.log(value)
+      let payload = {
+        index: 19,
+        page:{
+          pageNum:1,
+          contractNumber:value.contractNumber,
+          contractTitle:value.contractTitle,
+          communityName:value.communityName
+        }
+      }
+      // requst(payload);
+    }
+  }
+
+  // 选择小区名字并赋值
+  const opname = (value:any)=>{
+    form.setFieldsValue({
+      'communityName' : value
+    })
+  }
+  // 重置
+  const onReset = () => {
+    form.resetFields();
+    let payload = {
+      index: 19,
+      page:{
+        pageNum:1
+      }
+    }
+  };
+  
   return (
-    <div style={{ width: "100%", minWidth: 1020, padding: 34, backgroundColor: "#ffffff" }}> 
+    <div > 
     {
         Data != null ? <>
           {/* <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}} />
-          </div>
-          <div style={{height:80,position:"relative"}}>
-            <div style={{ position: "absolute", right: 0 }}>
-              <Button type="primary" onClick={goToAdd}>Create new Community</Button>
-            </div>
+          <div className='contop'>
+            <Form
+                autoComplete= "off"
+                layout="inline"
+                form={form}
+                name="contract"
+                onFinish={onFinishContract}
+              >
+                <Form.Item name="communityName">
+                  <SearchOptionsCommnity 
+                      // ubmit={extendName} 
+                      opname={opname} />
+                </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" icon={<SearchOutlined />} loading={false}>Search </Button>
+                  <Button htmlType="button" onClick={onReset} style={{marginLeft:'15px'}}  icon={<ClearOutlined />} loading={false}> Reset</Button>
+                </Form.Item>
+              </Form>
           </div>
-          <Table loading={false} rowKey="id" style={{ marginTop: 16 }}
+          <ProTable 
+            // request={requestHeadl}
+            pagination={false}      // 隐藏默认分页
+            rowKey={"id"} 
+            dataSource={Data.rows}
+            columns={columns} 
+            search={false}
+            loading={false}
+            toolBarRender={() => [
+              <Button key="3" type="primary" onClick={()=>{}}>
+                <PlusOutlined />Add Contract
+              </Button>,
+            ]}
+            options={{
+              density: true,
+              fullScreen: true,
+              reload: () => {
+                // resetHandler();
+              },
+              setting: false,
+            }}
+            headerTitle="Create new Community"
+            // pagination={{ defaultCurrent: 1, total: Data.totalRow }} 
+            />
+          {/* <Table loading={false} rowKey="id" style={{ marginTop: 16 }}
             dataSource={Data.rows}
             columns={columns}
-            pagination={{ defaultCurrent: 1, total: Data.total}} />  
+            pagination={{ defaultCurrent: 1, total: Data.total}} />   */}
           
         </> : null
     }  

src/pages/CommunityManagement/CellList/celllist.css

+.contop {
+  padding: 20px;
+  background: #fff;
+  margin-bottom: 20px;
+}
+.listbox {
+  width: 100%;
+  background-color: #ffffff;
+  padding: 10px;
+}

src/pages/CommunityManagement/CellList/celllist.less

+.contop{
+    padding: 20px;
+    background: #fff;
+    margin-bottom: 20px;
+}
+.listbox{
+    width: 100%;
+    background-color: #ffffff;
+    padding: 10px;
+}

src/pages/CommunityManagement/CommunityAnnouncement/CommunityAnnouncement.tsx

@@ -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

src/pages/CommunityManagement/FacilityBookings/FacilityBookings.tsx

@@ -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      

src/pages/CommunityManagement/VisitorRecord/VisitorRecord.tsx

@@ -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>
   );
 };

src/pages/ContractManagement/Contract.tsx

-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,SearchOutlined,ClearOutlined } 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';
 
-
+import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommnity';
 
 const Contract = (props:any) => {
-  const { formatMessage } = useIntl();
 
-  const { dispatch,location,Data,Result } = props;
+  const {location,dispatch,ContractModel,userListLoading } = 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)
-    }
-  },[Data])
+  
+  console.log(userListLoading)
 
-  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')
+  // 把请求装在一个地方
+  function requst(payload:any){
+    dispatch({type:'ContractModel/getList', payload:payload})
   }
 
+  // 数据
+  useEffect(()=>{
+    let payload = {
+      index: 19,
+      page:{
+        pageNum:ContractModel.page
+      }
+    }
+    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();
+    let payload = {
+      index: 19,
+      page:{
+        pageNum:1
       }
+    }
+    requst(payload);
+  };
 
+   // 表单提交
+   const onFinishContract = (value:any)=>{
+    // console.log(value)
+    if(!value.communityName&&!value.contractNumber&&!value.contractTitle){
+      message.error('Please enter one of them!')
+    }else{
+      console.log(value)
+      let payload = {
+        index: 19,
+        page:{
+          pageNum:1,
+          contractNumber:value.contractNumber,
+          contractTitle:value.contractTitle,
+          communityName:value.communityName
+        }
+      }
+      requst(payload);
+    }
+  }
 
+   // 选择小区名字并赋值
+  const opname = (value:any)=>{
+    form.setFieldsValue({
+      'communityName' : value
+    })
+  }
+  return (
 
-    </div>
+    <>
+      <div className={styles.contop}>
+        <Form
+              autoComplete= "off"
+              layout="inline"
+              form={form}
+              name="contract"
+              onFinish={onFinishContract}
+            >
+              <Form.Item name="communityName">
+                <SearchOptionsCommnity 
+                    // ubmit={extendName} 
+                    opname={opname} />
+              </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" icon={<SearchOutlined />} loading={userListLoading}>Search </Button>
+                <Button htmlType="button" onClick={onReset} style={{marginLeft:'15px'}}  icon={<ClearOutlined />} loading={userListLoading}> 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={userListLoading}
+          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;
+const mapStateToProps = ({
+  ContractModel,
+  loading,
+}: {
+  ContractModel: any;
+  loading: Loading;
+}) => {
+  console.log(loading)
   return {
-    Data,
-    curString,
-    Result,
+    ContractModel,
+    userListLoading: loading.models.ContractModel,
   };
-}
-export default connect(mapStateToProps)(Contract);
+};
+
+export default connect(mapStateToProps)(Contract);
\ No newline at end of file

src/pages/ContractManagement/Contract2.tsx

+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);

src/pages/ContractManagement/ContractContent.less

@@ -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

src/pages/ContractManagement/ContractContent.tsx

 import React, { useState, useEffect,useRef} from 'react';
 import styles from './ContractContent.less';
-import { Input ,Form,Table,Space,Pagination,Tooltip, message } 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 { Input ,Form, message,Upload, Button, DatePicker ,Space, } from 'antd';
+import { UploadOutlined ,LeftOutlined } 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';
-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" }]
-  const uploadProps = {
-    accept:".pdf,",
-    action:"/tos/image/upload",
-    data: { imageType: "tosContract", extends: extend },
-    fileList:fileList,
-    onChange({ file, fileList }) {
-      let tmp=fileList
-      setFileList(tmp.filter(file => !!file.status))
-      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])
+    // 设置之前时间不能选择
+  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');  // 结束默认事件
   
-  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"),
-        })
+  const [fileList, setFileList] = useState([] as any);
+
+
+  console.log(ContractModel)
+
+  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)],
+        
+      })
+
+
     }
-  }, [DataSaveDetail])
-  
+
+  } ,[1])
+
   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)
-  }
+  // // 提交
   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++){
+    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
-    RA(27, values)
-    console.log(values)
+    values.contractFileNameList = data;
+
+    if(ContractModel.record.id === undefined){
+      // 添加
+      RA(27, values)
+    }else{
+      // 修改
+
+    }
+    // RA(27, values)
   }
+
+
+  // 上传文件设置
+  const uploadProps = {
+    accept:".doc,.docx,.jpg,.png,.pdf" ,
+    action:"/tos/image/upload",  
+    data: { imageType: "tosContract" },   
+    fileList:fileList,
+    onChange({ file, fileList }:{file:any,fileList:any} ) {
+
+      setFileList(fileList)
+
+      if (file.status == 'done') {
+        message.success( file.name,3)
+      }
+    }
+  };
+
+
+  // 时间提示
+  // 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 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}><LeftOutlined />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 }: {ContractModel:any}) {
+
   return {
-    DataSave,
-    DataSaveDetail
+    ContractModel
   };
 }
 export default connect(mapStateToProps)(ContractContent);

src/pages/ContractManagement/index.less

@@ -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;

src/services/package/contract.ts

+// 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; }); 
+}