合同模块

Signed-off-by: cellee <893264950@qq.com>

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,
+    },
+    // 同步
+    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

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

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

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

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