小区列表改版，以及小区公告列表改版，新增小区界面重做

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

config/config.ts

@@ -217,7 +217,7 @@ export default defineConfig({
                   name: 'celllist',
                   routes:[
                     { path: './', component: './CommunityManagement/CellList/CellList' },
-                    { path: './Add', component: './CommunityManagement/CellList/Add' },
+                    { path: './Add', component: './CommunityManagement/CellList/Adds' },
                     {path:'./Detail',component:'./CommunityManagement/CellList/Detail'},
                   ]
                 },

src/components/SearchOptions/SearchOptionsTow.tsx

@@ -17,7 +17,7 @@ const SearchOptionsTow = (porps:any) => {
             <Select
                 showSearch
                 style={{ width: 200 }}
-                placeholder="Select a person"
+                placeholder="Community Name"
                 optionFilterProp="children"
                 onChange={onChange}
                 defaultValue={def}

src/components/TitleSearch/TitleSearch.tsx

@@ -14,17 +14,20 @@ import { gray } from 'chalk';
 import SearchOptionsCommnity from '../SearchOptions/SearchOptionsCommnity';
 
 const TitleSearch = (props: any) => {
-  console.log("===================================", props)
+  // console.log("===================================", props)
 
   const { dispatch, CommunityList } = props;
 
   const key = props.listkey
   const name = props.list;
-  const single = props.single
-  const checklist = props.checklist;
-  const status = props.status;
-  const communitySelect = props.communitySelect
-  const defaultValue = props.defaultValue
+  // const single = props.single
+  // const checklist = props.checklist;
+  // const status = props.status;
+  // const communitySelect = props.communitySelect
+  // const defaultValue = props.defaultValue;
+
+  const {single,checklist,status,communitySelect,defaultValue} = props;
+
 
   const time = props.time;
   const community = props.community;
@@ -55,7 +58,7 @@ const TitleSearch = (props: any) => {
   }, [defaultValue])
   useEffect(() => {
 
-    console.log(CommunityList)
+    // console.log(CommunityList)
 
     if (CommunityList != null) {
       // console.log("小区数量初始化完毕") OK

src/models/CommunityManagement/FacilityBookings.ts

@@ -26,9 +26,20 @@ export default {
     },
     
     Result:null,
+
+    // 不知道前面是干嘛的，自增公告列表
+    NoticeList:[]
   },
 
   reducers: {
+    // 自增公告列表
+    retuNotice(state,{ payload }:{payload:any}){
+      let NoticeList = payload;
+      return { ...state, NoticeList}
+    },
+    ///
+
+
     returnPage(state, { Data,DataPage,DataSave}) {
       return { ...state, Data,DataPage,DataSave };
     },
@@ -62,7 +73,7 @@ export default {
     *RA({ playload }, { call, put }) {
       
       const resp = yield call(service.RA, playload);
-      console.log(resp)
+     
       if (resp.code == 500||resp.error_code!="0000") {
         // window.location.href = '/500';
       }
@@ -82,7 +93,9 @@ export default {
             break;                
         }
       }    
-      else {      
+      else {    
+        // console.log('===========================')  
+        // console.log(playload)  
         switch (playload.index) {
           case 0:
           case 9:
@@ -139,6 +152,12 @@ export default {
             let Data2 = {data:resp.data.list,total:resp.data.page}; 
             yield put({ type: 'returnPage2', Data2, });            
           } break;
+
+          // 自增公告列表
+          case 25:{
+            let NoticeList = resp.data;
+            yield put({ type: 'retuNotice',payload:NoticeList,  });  
+          }
         }
 
       }

src/models/user.ts

 import { Effect, Reducer } from 'umi';
 
-import { queryCurrent, query as queryUsers } from '@/services/user';
+import { queryCurrent, query as queryUsers} from '@/services/user';
 
 export interface CurrentUser {
   avatar?: string;
@@ -41,12 +41,14 @@ const UserModel: UserModelType = {
 
 
     *fetch(_, { call, put }) {
-      const response = yield call(queryUsers);
-      console.error(response)
-      yield put({
-        type: 'save',
-        payload: response,
-      });
+
+      console.log(call)
+      // const response = yield call(queryUsers);
+      // console.error(response)
+      // yield put({
+      //   type: 'save',
+      //   payload: response,
+      // });
     },
     *fetchCurrent({ playload }, { call, put }) {
       console.log("response")

src/pages/CommunityManagement/CellList/Adds.tsx

+import React from 'react';
+import { LeftOutlined, EditOutlined } from '@ant-design/icons';
+import { Form, Input, Button, Select, TimePicker } from 'antd';
+// 样式
+import './celllist.less';
+
+const { RangePicker } = TimePicker;
+
+const Adds = () => {
+  const onFinish = (values: any) => {
+    console.log('Success:', values);
+  };
+  return (
+    <div className="box">
+      {/* 头部 */}
+      <div className="back">
+        <Button onClick={() => {}}>
+          <LeftOutlined />
+          Back
+        </Button>
+      </div>
+
+      <div className="form">
+        <h3>
+          <EditOutlined />
+          &nbsp; 添加小区
+        </h3>
+        <Form
+          name="basic"
+          onFinish={onFinish}
+          labelCol={{ span: 3 }}
+          wrapperCol={{ span: 18 }}
+          layout="horizontal"
+          labelAlign="left"
+        >
+          <Form.Item label="Community Name" name="communityName">
+            <Input style={{ width: 120 }} placeholder="6 Postcode" maxLength={6} />{' '}
+            <span className="span">
+              小区地址小区地址小区地址小区地址小区地址小区地址小区地址小区地址小区地址小区地址小区地址
+            </span>{' '}
+            <div>
+              <li className="li">小区名字</li>
+            </div>
+          </Form.Item>
+          <Form.Item label="Working Hours" name="workingHours">
+            <Input />
+          </Form.Item>
+          <Form.Item label="Community Telephone" name="communityTelephone">
+            <Input />
+          </Form.Item>
+          <Form.Item label="Administrators" name="adminiStrators">
+            <Input />
+          </Form.Item>
+          <Form.Item label="Property fee">
+            <RangePicker />
+          </Form.Item>
+          <Form.Item label="Louba Timetable" name="loubaTimetable">
+            <Input />
+          </Form.Item>
+          <Form.Item label="Property Guide" name="propertyGuide">
+            <Input />
+          </Form.Item>
+          <Form.Item label="Period of Service" name="period">
+            <Input />
+          </Form.Item>
+
+          <Form.Item label="Help Phone" name="helpPhone">
+            <Input />
+          </Form.Item>
+
+          <Form.Item label=" " colon={false}>
+            <Button type="primary" htmlType="submit">
+              Submit
+            </Button>
+          </Form.Item>
+        </Form>
+      </div>
+    </div>
+  );
+};
+
+export default Adds;

src/pages/CommunityManagement/CellList/CellList.tsx

@@ -34,7 +34,8 @@ const CellList = (props:any) => {
   ])
   
 
-  const { dispatch, Data } = props;
+  const { dispatch, Data , loading  , curString} = props;
+
 
   const onChange = e => {
     e.persist();
@@ -100,13 +101,43 @@ const CellList = (props:any) => {
     }
   };
   
+  // 点击搜索
+  
+  const CallBackTitleSearch= (comment: any) => {
+    console.log(comment)
+
+    // 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 })
+    // }
+  }
   return (
     <div > 
     {
         Data != null ? <>
           {/* <TitleSearch listkey={['communityName']}   list={['Community Name']}  onSubmit={CallBackTitleSearch}/> */}
           <div className='contop'>
-            <Form
+          <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} />
+            {/* <Form
                 autoComplete= "off"
                 layout="inline"
                 form={form}
@@ -125,10 +156,10 @@ const CellList = (props:any) => {
                   <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>
+                  <Button type="primary" htmlType="submit" icon={<SearchOutlined />} loading={loading}>Search </Button>
+                  <Button htmlType="button" onClick={onReset} style={{marginLeft:'15px'}}  icon={<ClearOutlined />} loading={loading}> Reset</Button>
                 </Form.Item>
-              </Form>
+              </Form> */}
           </div>
           <ProTable 
             // request={requestHeadl}
@@ -137,10 +168,10 @@ const CellList = (props:any) => {
             dataSource={Data.rows}
             columns={columns} 
             search={false}
-            loading={false}
+            loading={loading}
             toolBarRender={() => [
-              <Button key="3" type="primary" onClick={()=>{}}>
-                <PlusOutlined />Add Contract
+              <Button key="3" type="primary" onClick={goToAdd}>
+                <PlusOutlined />Create new Community
               </Button>,
             ]}
             options={{
@@ -151,7 +182,7 @@ const CellList = (props:any) => {
               },
               setting: false,
             }}
-            headerTitle="Create new Community"
+            headerTitle="Community List"
             // pagination={{ defaultCurrent: 1, total: Data.totalRow }} 
             />
           {/* <Table loading={false} rowKey="id" style={{ marginTop: 16 }}
@@ -167,7 +198,9 @@ const CellList = (props:any) => {
 };
 
 function map(state:any) {
-  const { Data} = state[module]
-  return { Data}
+  console.log(state)
+  const loading = state.loading.models.CellList
+  const { Data ,curString } = state[module]
+  return { Data , loading ,curString}
 }
 export default connect(map)(CellList);
\ No newline at end of file

src/pages/CommunityManagement/CellList/celllist.css

@@ -3,6 +3,7 @@
   background: #fff;
   margin-bottom: 20px;
 }
+
 .listbox {
   width: 100%;
   background-color: #ffffff;

src/pages/CommunityManagement/CellList/celllist.less

@@ -8,3 +8,43 @@
     background-color: #ffffff;
     padding: 10px;
 }
+
+// 添加
+.box{
+    padding: 20px;
+    border: 1px solid #efefef;
+    border-radius: 3px;
+    background: #fff;
+    box-shadow: 0 1px 1px #ccc;
+
+    .back{
+        margin-bottom: 20px;
+    }
+    .form{
+        h3{
+            margin-bottom: 30px;
+        }
+        .span,.li{
+            display: inline-block;
+            min-width: 240px;
+            line-height: 30px;
+            background: #efefef;
+            font-size: 15px;
+            margin-top: -3px;
+            vertical-align: middle;
+            margin-left: 12px;
+            padding: 0 6px;
+            border-radius: 2px;
+            border: 1px solid #d9d9d9;
+            color: #000;
+        }
+        .li{
+            min-width: 140px;
+            margin-top: 15px;
+            margin-left: 0;            
+        }
+        input{
+            width: 240px;
+        }
+    }
+}
\ No newline at end of file

src/pages/CommunityManagement/CommunityAnnouncement/CommunityAnnouncement.tsx

 import React, { useState, useEffect } from 'react';
-import {connect,history} from 'umi';
-import { Input ,Tabs,Table,Space, Button} from 'antd';
+import {connect,history,useModel,Loading} from 'umi';
+import { Input ,Tabs,Table,Space, Button,Tooltip} from 'antd';
 const { TabPane } = Tabs;
 
-import { objectColumns } from '@/utils/string'; 
+import { PlusOutlined,SearchOutlined,ClearOutlined } from '@ant-design/icons';
+import ProTable from '@ant-design/pro-table';
+
+// import { objectColumns } from '@/utils/string'; 
 import {timestampToTime3, timestampToTime} from '@/utils/time'
 
 // 搜索框
@@ -25,7 +28,7 @@ import TitleSearch from '../../../components/TitleSearch/TitleSearch';
 // updateTime: "Jun 28, 2020 7:38:39 PM"
 
 
-import { RA } from '@/utils/method';
+// import { RA } from '@/utils/method';
 
 const goToAdd = () => {
   history.push("./CommunityAnnouncement/Add");
@@ -33,34 +36,64 @@ const goToAdd = () => {
 const module="CommunityAnnouncement"
 const CommunityAnnouncement = (props:any) => {
 
-  const columns = objectColumns( [
-    ["community", "communityNum"],
-    ["Title", "noticTitlel"],
-    ["Publish Time", "noticStartTime", (text: any, record: any) => (<Space size="middle">{text!=null? timestampToTime(text.time):null}</Space>)],  
-    ["noticScope", "noticScope"],    
-    ["Actions",null, (text: any, record: any) => (<Space size="middle"> <a>Detail</a></Space>)],
-  ])
-  const { dispatch, Data, curString } = props;
+
+  const { dispatch, Data, curString , loading } = props;
+
+
+  const columns = [
+    {
+      title:"community", 
+      dataIndex:"communityNum",
+      width: 400,
+      ellipsis: {
+        showTitle: false,
+      },
+    },
+    {
+      title:"Title", 
+      dataIndex:"noticTitlel",
+    },
+    {
+      title:"Publish Time", 
+      dataIndex:"noticStartTime",
+      render:(text: any, record: any) => (
+        <Space size="middle">
+          {text!=null? timestampToTime(text.time):null}
+        </Space>
+      )
+    },
+    {
+      title:"noticScope", 
+      dataIndex:"noticScope",
+    },
+    {
+      title:"Actions", 
+      render:(text: any, record: any) => (
+        <Space size="middle"><a>Detail</a></Space>
+      ),
+    },
+  ];
   useEffect(() => {
-    RA(25,{communityNum: "", noticTitlel: "" },module,dispatch)
-  },[])
+    RA(25,{communityNum: "", noticTitlel: "" , pageNum:1 },module,dispatch)
+  },[1])
 
 
   // 
   
   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)
 
@@ -104,6 +137,7 @@ const CommunityAnnouncement = (props:any) => {
                 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} />
@@ -116,28 +150,39 @@ const CommunityAnnouncement = (props:any) => {
         </>
       }  
 
-
-      <div style={{height:80,position:"relative"}}>            
-        <div style={{ position: "absolute", right: 0 }}><Button type="primary" onClick={goToAdd}>Create new Announcement</Button></div>            
-      </div>
-      
       {Data!=null?
-      <Table
-        loading={false}
+      <ProTable
+        loading={loading}
         rowKey="id"
         style={{ marginTop: 16 }}
         dataSource={Data.rows}
         columns={columns}
-        pagination={{ current: 1, total: Data.total}} />:null}   
+        pagination={false}      // 隐藏默认分页
+        search={false}
+        toolBarRender={() => [
+          <Button key="3" type="primary" onClick={goToAdd}>
+            <PlusOutlined />Create new Announcement
+          </Button>,
+        ]}
+        options={{
+          density: true,
+          fullScreen: true,
+          reload: () => {
+            // resetHandler();
+          },
+          setting: false,
+        }}
+        headerTitle="Announcement list"
+      />:null}   
     </div>
   );
 };
 
 function map(state:any) {
-  const { Data} = state[module]
-  
+  const loading = state.loading.models.FacilityBookings;
+  const Data = state.FacilityBookings.NoticeList;
   const { curString } = state.FacilityBookings;
-  return { Data,curString}
+  return { Data,curString,loading }
 }
 export default connect(map)(CommunityAnnouncement);
 

src/pages/ContractManagement/Contract.tsx

@@ -177,7 +177,7 @@ const Contract = (props:any) => {
                     opname={opname} />
               </Form.Item>
               <Form.Item name="contractNumber">
-                <Input allowClear  placeholder='Contract No'  />
+                <Input allowClear  placeholder='Contract Number'  />
               </Form.Item>
               <Form.Item name="contractTitle">
                 <Input allowClear  placeholder='Contract Title' />
@@ -192,10 +192,10 @@ const Contract = (props:any) => {
       <div className={styles.listbox}>
         <ProTable 
           // request={requestHeadl}
-          pagination={false}      // 隐藏默认分页
           rowKey={"id"} 
           dataSource={ContractModel.list}
           columns={columns} 
+          pagination={false}      // 隐藏默认分页
           search={false}
           loading={userListLoading}
           toolBarRender={() => [

src/pages/ContractManagement/ContractContent.less

@@ -208,21 +208,14 @@
             label{
                 display: inline-block;
                 width: 150px;
+                line-height: 32px;
             }
         }
     }
-    .list2{
-        display: flex;
-        justify-content: flex-start;
-        justify-items: center;
-        flex-wrap: wrap;
-        .label{
-            width: 150px;
-            line-height: 34px;
-        }
-        .main{
-            // margin-bottom: 24px;
-        }
+    .ant-form-item-label > label,.label{
+        display: inline-block;
+        width: 150px;
+        line-height: 32px;
     }
 
 }

src/pages/ContractManagement/ContractContent.tsx

@@ -17,6 +17,7 @@ import locale from 'antd/es/date-picker/locale/en_US';
 
 
 import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommnity';
+import {tipList} from '@/utils/tip'
 
 const ContractContent = (props: any) => {
   const { ContractModel,dispatch } = props;
@@ -34,7 +35,7 @@ const ContractContent = (props: any) => {
   const [fileList, setFileList] = useState([] as any);
 
 
-  console.log(ContractModel)
+  console.log(tipList)
 
   useEffect(()=>{
     // 如果是添加传来没有值的时候 就清空  否则  赋值给表单
@@ -162,33 +163,38 @@ const ContractContent = (props: any) => {
           {/* 合同编号、甲方、乙方 */}
           <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 
+                name="contractNumber"
+                label="Contract Number"
+                rules={[{ required: true, message: `${tipList[0]}` }]}>
+                <Input style={{width:200}} placeholder="Contract Number" />
               </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 
+                name="contractPartyA"
+                label="Contract Party A"
+                rules={[{ required: true, message: `${tipList[1]}` }]}>
+                <Input style={{width:200}} placeholder="Contract Party A" />
               </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 
+                name="contractPartyB" 
+                label="Contract Party B"
+                rules={[{ required: true, message: `${tipList[2]}` }]}>
+                <Input style={{width:200}} placeholder="Contract Party B" />
               </Form.Item>
             </div>
           </div>
           {/* 小区 */}
           <div className='list2'>
-            <div className='label'>
-              <span>Community Name</span>
-            </div>
             <div className='main'>
               <Form.Item 
+                labelAlign='right'
                 name="communityName" 
-                rules={[{ required: true, message: 'Please Choice CommunityName!' }]}>
+                label="Community Name"
+                rules={[{ required: true, message: `${tipList[3]}` }]}>
                 <SearchOptionsCommnity 
                   defaultName={ContractModel.record.communityName} 
                   // ubmit={extendName} 
@@ -199,23 +205,22 @@ const ContractContent = (props: any) => {
           </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 
+              labelAlign='right'
+              name="contractTitle"
+              label="Contract Title"
+              rules={[{ required: true, message: `${tipList[4]}` }]}>
+              <Input style={{width:200}} placeholder="Contract Title" />
             </Form.Item>
-            </div>
           </div>
 
           {/* 起止时间 */}
           <div className='list2'>
-            <div className='label'>
-              <span>Effective Date</span>
-            </div>
-            <div className='main'>
-            <Form.Item name="time">
+            <Form.Item 
+              name="time"
+              labelAlign='right'
+              label="Contract Time"
+              rules={[{ required: true, message: `${tipList[5]}` }]}>
               <RangePicker 
                   locale={locale}
                   defaultValue={ContractModel.time}
@@ -223,17 +228,15 @@ const ContractContent = (props: any) => {
                   // onChange={changeTime}
                   />
             </Form.Item>
-            </div>
           </div>
           
 
           {/* 附件上传 */}
           <div className='list2'>
-            <div className='label'>
-              <span>Contract</span>
-            </div>
-            <div className='main'>
-              <Form.Item>
+              <Form.Item
+                labelAlign='right'
+                label="Contract Annex"
+                rules={[{ required: true, message: `${tipList[6]}` }]}>
                 <Upload 
                 {...uploadProps} >
                   <Button>
@@ -241,25 +244,20 @@ const ContractContent = (props: any) => {
                   </Button>
                 </Upload>
               </Form.Item>
-            </div>
           </div>
           
           {/* 合同内容 */}
           <div className='list2'>
-            <div className='label'>
-              <span>Contract Content</span>
+            <div className={styles.box8item2x1}>
+            <Form.Item 
+                name="contractRemindContent">
+              <TextArea autoSize={false} style={{ padding: 8, width: 600, height: 194 }}>
+              </TextArea>
+            </Form.Item>
             </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 className={styles.box8item2x2}>
+              The system will send out reminders of contract expiration on 25 .  
+              {/* <span style={{color:'#f00'}}>&nbsp;{stateTime}</span> */}
             </div>
           </div>
 

src/utils/tip.ts

+export const tipList = [
+    // 合同提示
+    ['Please Input Contract Numbe!'],
+    ['Please Input Contract Party A!'],
+    ['Please Input Contract Party B!'],
+    ['Please Choice CommunityName!'],
+    ['Please Choice Contract Title!'],
+    ['Please Choice Contract Time!'],
+    ['Please upload Contract Annex!'],
+    // ['Please Input Contract Remarks!'],
+]
\ No newline at end of file