完成新增小区，小区列表搜索优化，新增小区详情页面

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

config/config.ts

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

src/components/TitleSearch/TitleSearch copy.tsx

+import React, { useState, useEffect, useRef } from 'react';
+import { Link, useIntl, connect, Dispatch, history } from 'umi';
+
+import styles from './index.less';
+
+import BackButton from '../BackButton/BackButton';
+import TitleGet from '../TitleGet/TitleGet';
+
+import { Input, Row, Col, Form, Select, Button, DatePicker } from 'antd';
+const { Option } = Select;
+
+import SelectOptions from '../../components/SelectOptions/index';
+import { gray } from 'chalk';
+import SearchOptionsCommnity from '../SearchOptions/SearchOptionsCommnity';
+
+const TitleSearch = (props: any) => {
+  // 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, checklist, status, communitySelect, defaultValue } = props;
+
+
+  const time = props.time;
+  const community = props.community;
+  const [selectOptions, setSelectOptions] = useState(true)
+  const [communitys, setCommunitys] = useState(CommunityList)
+  const [communitySingle, setCommunitySingle] = useState(null)
+  const [datePicker, setDate] = useState(null)
+
+  const [form] = Form.useForm()
+
+  const tosCommunityget = (values: any) => { dispatch({ type: 'Init/tosCommunityget', playload: values }) };
+  useEffect(() => {
+    // console.log("标题搜寻组件初始化") OK
+    if (CommunityList == null) {
+      // console.log("小区数量初始化") OK
+      tosCommunityget(null)
+    }
+    if (defaultValue != null) {
+      form.setFieldsValue(defaultValue)
+    }
+  }, []);
+
+  useEffect(() => {
+
+    if (defaultValue != null) {
+      form.setFieldsValue(defaultValue)
+    }
+  }, [defaultValue])
+  useEffect(() => {
+
+    // console.log(CommunityList)
+
+    if (CommunityList != null) {
+      // console.log("小区数量初始化完毕") OK
+      var tmp = {}
+      tmp[community] = CommunityList
+      // props.onSubmit(tmp) 禁用 改用组件初始化
+      setCommunitys(CommunityList)
+    }
+  }, [CommunityList])
+
+
+
+  const onFinish = (values: any) => {
+    if (datePicker) {
+      values[time[0]] = datePicker;
+    }
+    if (community) {
+      values[community] = communitys
+    }
+    console.log('Success:', values);
+    props.onSubmit(values)
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log('Failed:', errorInfo);
+  };
+
+  const onChange = (date: any, dateString: string) => {
+    setDate(dateString)
+  }
+
+  const printContent = (comment: any) => {
+    setCommunitys(comment)
+  }
+
+  // 选择小区名字并赋值
+  const opname = (value: any) => {
+    form.setFieldsValue({
+      'communityName': value
+    })
+  }
+
+  return (
+    <>
+      <Form form={form} name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed}>
+
+        <Row gutter={32}>
+          {
+            communitySelect != null ?
+              <Col key={"communitySelect_"} ><Form.Item name={"communityName"}><SearchOptionsCommnity titleSearch={true} opname={opname} /></Form.Item></Col>
+              : null
+          }
+          {
+            key != null ?
+              key.map((item, index) => {
+                return (
+                  <Col key={"KeyCol_" + index}><Form.Item name={item}><Input placeholder={name[index]} allowClear /></Form.Item></Col>
+                )
+              })
+              : null
+          }
+          {
+            status != null ?
+              status.map((item, index) => {
+                return (
+                  <Col key={"StatusCol_" + index}>
+                    <Form.Item name={item.name[0]}>
+                      <Select style={{ width: 160 }} placeholder={item.name[1]} allowClear={true}>
+                        {
+                          item.data.map(word => {
+                            return (
+                              <Option key={word} value={word[0]}>{word[1]}</Option>
+                            )
+                          })
+                        }
+                      </Select>
+                    </Form.Item>
+                  </Col>
+                )
+              })
+              : null
+          }
+          {
+            time != null ?
+              <Col key={"datePicker_"} > <DatePicker placeholder={time[1]} onChange={onChange} /></Col>
+              : null
+          }
+          {
+            community == null ?
+              <Col><Form.Item><Button type="primary" htmlType="submit">Search</Button></Form.Item></Col>
+              : null
+          }
+        </Row>
+        {
+          community != null ?
+            <>
+              {
+                CommunityList != null ?
+                  <SelectOptions checklist={checklist} single={single} list={CommunityList.sort()} show={selectOptions} onSubmit={printContent} /> :
+                  null
+              }
+
+              <Form.Item><Button type="primary" htmlType="submit" style={{ backgroundColor: "#e7f4ff", color: "rgba(24,144,255,1)" }}>Search</Button></Form.Item>
+            </> : null
+        }
+
+
+      </Form>
+
+
+
+
+    </>
+  );
+};
+function mapStateToProps(state: any) {
+  // console.log("state参数",state)
+  const { CommunityList } = state.Init;
+  return {
+    CommunityList,
+  };
+}
+export default connect(mapStateToProps)(TitleSearch);
+// time={["key","预订时间筛选"]}
+// status = [{name:"status",data:["处理", "未处理"]}]
+// listkey={['A', 'C']}    list={['订单状态', '预订时间筛选']}
+
+// <TitleSearch
+// status={[{
+//   name: ["status", "订单状态"],
+//   data: [[0, "全部"], [1, "已申请"], [2, "已预订"], [3, "已使用"], [4, "已取消"]]
+// }]}
+// time={["key", "预订时间筛选"]}
+// community={"communityName"}
+// // single={true}
+// onSubmit={CallBackTitleSearch} />
\ No newline at end of file

src/components/TitleSearch/TitleSearch.tsx

@@ -18,68 +18,69 @@ const TitleSearch = (props: any) => {
 
   const { dispatch, CommunityList } = props;
 
-  const key = props.listkey
+  const key = props.listkey;
+
+  console.log(props);
+
   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 time = props.time;
 
-  const { single, checklist, status, communitySelect, defaultValue } = props;
-
+  // username 为 小区列表管理者名字筛选
+  const { single, checklist, status, communitySelect, defaultValue, time, username } = props;
 
-  const time = props.time;
   const community = props.community;
-  const [selectOptions, setSelectOptions] = useState(true)
-  const [communitys, setCommunitys] = useState(CommunityList)
-  const [communitySingle, setCommunitySingle] = useState(null)
-  const [datePicker, setDate] = useState(null)
+  const [selectOptions, setSelectOptions] = useState(true);
+  const [communitys, setCommunitys] = useState(CommunityList);
+  const [communitySingle, setCommunitySingle] = useState(null);
+  const [datePicker, setDate] = useState(null);
 
-  const [form] = Form.useForm()
+  const [form] = Form.useForm();
 
-  const tosCommunityget = (values: any) => { dispatch({ type: 'Init/tosCommunityget', playload: values }) };
+  const tosCommunityget = (values: any) => {
+    dispatch({ type: 'Init/tosCommunityget', playload: values });
+  };
   useEffect(() => {
     // console.log("标题搜寻组件初始化") OK
     if (CommunityList == null) {
       // console.log("小区数量初始化") OK
-      tosCommunityget(null)
+      tosCommunityget(null);
     }
     if (defaultValue != null) {
-      form.setFieldsValue(defaultValue)
+      form.setFieldsValue(defaultValue);
     }
   }, []);
 
   useEffect(() => {
-
     if (defaultValue != null) {
-      form.setFieldsValue(defaultValue)
+      form.setFieldsValue(defaultValue);
     }
-  }, [defaultValue])
+  }, [defaultValue]);
   useEffect(() => {
-
     // console.log(CommunityList)
 
     if (CommunityList != null) {
       // console.log("小区数量初始化完毕") OK
-      var tmp = {}
-      tmp[community] = CommunityList
+      var tmp = {};
+      tmp[community] = CommunityList;
       // props.onSubmit(tmp) 禁用 改用组件初始化
-      setCommunitys(CommunityList)
+      setCommunitys(CommunityList);
     }
-  }, [CommunityList])
-
-
+  }, [CommunityList]);
 
   const onFinish = (values: any) => {
     if (datePicker) {
       values[time[0]] = datePicker;
     }
     if (community) {
-      values[community] = communitys
+      values[community] = communitys;
     }
     console.log('Success:', values);
-    props.onSubmit(values)
+    props.onSubmit(values);
   };
 
   const onFinishFailed = (errorInfo: any) => {
@@ -87,90 +88,111 @@ const TitleSearch = (props: any) => {
   };
 
   const onChange = (date: any, dateString: string) => {
-    setDate(dateString)
-  }
+    setDate(dateString);
+  };
 
   const printContent = (comment: any) => {
-    setCommunitys(comment)
-  }
+    setCommunitys(comment);
+  };
 
   // 选择小区名字并赋值
   const opname = (value: any) => {
     form.setFieldsValue({
-      'communityName': value
-    })
-  }
+      communityName: value,
+    });
+  };
 
   return (
     <>
       <Form form={form} name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed}>
-
         <Row gutter={32}>
-          {
-            communitySelect != null ?
-              <Col key={"communitySelect_"} ><Form.Item name={"communityName"}><SearchOptionsCommnity titleSearch={true} opname={opname} /></Form.Item></Col>
-              : null
-          }
-          {
-            key != null ?
-              key.map((item, index) => {
+          {communitySelect != null ? (
+            <Col key={'communitySelect_'}>
+              <Form.Item name={'communityName'}>
+                <SearchOptionsCommnity titleSearch={true} opname={opname} />
+              </Form.Item>
+            </Col>
+          ) : null}
+          {key != null
+            ? key.map((item, index) => {
                 return (
-                  <Col key={"KeyCol_" + index}><Form.Item name={item}><Input placeholder={name[index]} allowClear /></Form.Item></Col>
-                )
+                  <Col key={'KeyCol_' + index}>
+                    <Form.Item name={item}>
+                      <Input placeholder={name[index]} allowClear />
+                    </Form.Item>
+                  </Col>
+                );
               })
-              : null
-          }
-          {
-            status != null ?
-              status.map((item, index) => {
+            : null}
+
+          {/* 小区列表的管理员姓名搜索 */}
+          {username != null ? (
+            <Col key={'username_' + username[0]}>
+              <Form.Item name={username[0]} label="Username">
+                <Input placeholder={username[1]} allowClear />
+              </Form.Item>
+            </Col>
+          ) : null}
+
+          {status != null
+            ? status.map((item, index) => {
                 return (
-                  <Col key={"StatusCol_" + index}>
+                  <Col key={'StatusCol_' + index}>
                     <Form.Item name={item.name[0]}>
                       <Select style={{ width: 160 }} placeholder={item.name[1]} allowClear={true}>
-                        {
-                          item.data.map(word => {
-                            return (
-                              <Option key={word} value={word[0]}>{word[1]}</Option>
-                            )
-                          })
-                        }
+                        {item.data.map((word) => {
+                          return (
+                            <Option key={word} value={word[0]}>
+                              {word[1]}
+                            </Option>
+                          );
+                        })}
                       </Select>
                     </Form.Item>
                   </Col>
-                )
+                );
               })
-              : null
-          }
-          {
-            time != null ?
-              <Col key={"datePicker_"} > <DatePicker placeholder={time[1]} onChange={onChange} /></Col>
-              : null
-          }
-          {
-            community == null ?
-              <Col><Form.Item><Button type="primary" htmlType="submit">Search</Button></Form.Item></Col>
-              : null
-          }
+            : null}
+          {time != null ? (
+            <Col key={'datePicker_'}>
+              {' '}
+              <DatePicker placeholder={time[1]} onChange={onChange} />
+            </Col>
+          ) : null}
+          {community == null ? (
+            <Col>
+              <Form.Item>
+                <Button type="primary" htmlType="submit">
+                  Search
+                </Button>
+              </Form.Item>
+            </Col>
+          ) : null}
         </Row>
-        {
-          community != null ?
-            <>
-              {
-                CommunityList != null ?
-                  <SelectOptions checklist={checklist} single={single} list={CommunityList.sort()} show={selectOptions} onSubmit={printContent} /> :
-                  null
-              }
-
-              <Form.Item><Button type="primary" htmlType="submit" style={{ backgroundColor: "#e7f4ff", color: "rgba(24,144,255,1)" }}>Search</Button></Form.Item>
-            </> : null
-        }
-
-
+        {community != null ? (
+          <>
+            {CommunityList != null ? (
+              <SelectOptions
+                checklist={checklist}
+                single={single}
+                list={CommunityList.sort()}
+                show={selectOptions}
+                onSubmit={printContent}
+              />
+            ) : null}
+
+            <Form.Item>
+              <Button
+                type="primary"
+                htmlType="submit"
+                style={{ backgroundColor: '#e7f4ff', color: 'rgba(24,144,255,1)' }}
+              >
+                Search
+              </Button>
+            </Form.Item>
+          </>
+        ) : null}
       </Form>
-
-
-
-
     </>
   );
 };
@@ -194,4 +216,4 @@ export default connect(mapStateToProps)(TitleSearch);
 // time={["key", "预订时间筛选"]}
 // community={"communityName"}
 // // single={true}
-// onSubmit={CallBackTitleSearch} />
\ No newline at end of file
+// onSubmit={CallBackTitleSearch} />

src/models/CommunityManagement/CellList.ts

@@ -41,21 +41,26 @@ export default {
       console.log(resp)
       // if (resp.code == 500||resp.error_code!="0000") {     
       // }
-      if (resp.error_code != "0000") {
+      if (resp.code == 500 && resp.error_code != "0000") {
         getObjectInfo(playload.body)
-        printf(playload, resp)        
-      }          
-      switch (playload.index) {
-        case 24: {            
-          let Data = resp.data;          
-          yield put({ type: 'returnPage', Data });            
+        printf(playload, resp)
+        message.error(`${resp.code}:${resp.msg}`)
+      } else { 
+        switch (playload.index) {
+          case 24: {            
+            let Data = resp.data;          
+            yield put({ type: 'returnPage', Data });            
+            } break;
+          case 29: {
+            let Result = resp;          
+            yield put({ type: 'returnResult', Result }); 
+            message.success(`新增成功！`)
           } break;
-        case 29: {
-          let Result = resp;          
-          yield put({ type: 'returnResult', Result });  
-        } break;
+        }
+        history.push('/CommunityManagement/CellList');
       }
       
+      
     },
 
     *ResultClear({ }, { put }) {

src/pages/CommunityManagement/CellList/CellList.tsx

 import React, { useState, useEffect } from 'react';
-import { Input ,Tabs,Table,Space, Button ,Form ,message} from 'antd';
-const { TabPane } = Tabs;
-
-import {connect,history} from 'umi';
+import { Space, Button, Form, message } from 'antd';
+import { connect, history } from 'umi';
 
 // 图标
-import { SearchOutlined,ClearOutlined,PlusOutlined } from '@ant-design/icons';
+import { PlusOutlined } from '@ant-design/icons';
 import ProTable from '@ant-design/pro-table';
 
-
-import TitleSearch from '@/components/TitleSearch/TitleSearch'
-import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommnity'
+import TitleSearch from '@/components/TitleSearch/TitleSearch';
 import { RA, SA } from '@/utils/method';
-import { objectColumns } from '@/utils/string'; 
-import { timestampToTime } from '@/utils/time';
-import CommunitySearch from "@/components/CommunitySearch/CommunitySearch";
-const module="CellList"
-
-import './celllist.less'
+import { objectColumns } from '@/utils/string';
+const module = 'CellList';
 
-const CellList = (props:any) => {
+import './celllist.less';
 
+const CellList = (props: any) => {
   const columns = objectColumns([
-    ["Community", "residentialName"],
-    ["Administrator", "residentialManagerUserName"],  
-    ["Operation Hours", null, (text: any, record: any) => (<div></div>)],
-    ["Office Tel", "residentialPhone"],
-    ["Address", "residentialAddress"],    
-    ["Actions", null, (text: any, record: any) => (<Space size="middle">
-      <a onClick={goToDetail.bind(this, record)}>Edit</a>
-      <a onClick={goToDetail.bind(this,record)}>Detail</a>
-    </Space>)],
-  ])
-  
-
-  const { dispatch, Data , loading  , curString} = props;
-
-
-  const onChange = e => {
-    e.persist();
-    console.log("表单输入的值", e.target.value);
-  };
+    ['Community', 'residentialName'],
+    ['Administrator', 'residentialManagerUserName'],
+    [
+      'Operation Hours',
+      null,
+      (text: any, record: any) => (
+        <div>
+          <span>{record.residentialStartWorking}</span>
+          <span>-</span>
+          <span>{record.residentialEndWorking}</span>
+        </div>
+      ),
+    ],
+    ['Office Tel', 'residentialPhone'],
+    ['Address', 'residentialAddress'],
+    [
+      'Actions',
+      null,
+      (text: any, record: any) => (
+        <Space size="middle">
+          <a onClick={goToDetail.bind(this, record)}>Edit</a>
+          <a onClick={goToDetail.bind(this, record)}>Detail</a>
+        </Space>
+      ),
+    ],
+  ]);
 
+  const { dispatch, Data, loading, curString } = props;
+  console.log(curString);
   useEffect(() => {
-    RA(24, {communityName: "" }, module, dispatch);
-  }, [])
+    RA(24, { communityName: '' }, module, dispatch);
+  }, []);
   useEffect(() => {
     if (Data != null) {
       //console.log(columnsVal)
     }
-  }, [Data])
-  const CallbackSearch = (values:any) => {    
-    RA(24, {communityName: values }, module, dispatch);
-  }
+  }, [Data]);
+  const CallbackSearch = (values: any) => {
+    RA(24, { communityName: values }, module, dispatch);
+  };
   const goToAdd = () => {
-    history.push("./CellList/Add");
-  }
+    SA('', module, dispatch); // 清空之前传递的数据
+    history.push('./CellList/Add');
+  };
   const goToDetail = (values: any, e: any) => {
-    SA(values,module,dispatch)
-    history.push("./CellList/Detail");
-  }
+    // console.log(values);
+    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
-      }
+  const CallBackTitleSearch = (comment: any) => {
+    if (comment.communityName.length > 0 || typeof comment.label !== 'undefined') {
+      let tmp: any = new Object();
+      tmp.adminName = comment.label;
+      tmp.communityName = comment.communityName;
+      tmp.curPage = 1;
+      // QA(tmp);
+      console.log(tmp);
+      // CallbackSearch()
+      //中断
+      // RA(9, {
+      //   userToken: token,
+      //   pageNum: '1',
+      //   subscribeDate: tmp.subscribeDate,
+      //   status: tmp.status,
+      //   communityNameList: comment.communityName,
+      // }, module, dispatch);
+    } else {
+      message.error('请输入管理员姓名或选择小区进行搜索！');
     }
   };
-  
-  // 点击搜索
-  
-  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 ? <>
+    <div>
+      {Data != null ? (
+        <>
           {/* <TitleSearch listkey={['communityName']}   list={['Community Name']}  onSubmit={CallBackTitleSearch}/> */}
-          <div className='contop'>
-          <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}
-                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={loading}>Search </Button>
-                  <Button htmlType="button" onClick={onReset} style={{marginLeft:'15px'}}  icon={<ClearOutlined />} loading={loading}> Reset</Button>
-                </Form.Item>
-              </Form> */}
+          <div className="contop">
+            <TitleSearch
+              username={['label', '请输入管理员姓名']}
+              community={'communityName'}
+              checklist={curString.communityNameList != null ? curString.communityNameList : null}
+              onSubmit={CallBackTitleSearch}
+            />
           </div>
-          <ProTable 
+          <ProTable
             // request={requestHeadl}
-            pagination={false}      // 隐藏默认分页
-            rowKey={"id"} 
+            pagination={false} // 隐藏默认分页
+            rowKey={'id'}
             dataSource={Data.rows}
-            columns={columns} 
+            columns={columns}
             search={false}
             loading={loading}
             toolBarRender={() => [
               <Button key="3" type="primary" onClick={goToAdd}>
-                <PlusOutlined />Create new Community
+                <PlusOutlined />
+                Create new Community
               </Button>,
             ]}
             options={{
@@ -183,24 +124,22 @@ const CellList = (props:any) => {
               setting: false,
             }}
             headerTitle="Community List"
-            // pagination={{ defaultCurrent: 1, total: Data.totalRow }} 
-            />
+            // 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}} />   */}
-          
-        </> : null
-    }  
-      
+        </>
+      ) : null}
     </div>
   );
 };
 
-function map(state:any) {
-  console.log(state)
-  const loading = state.loading.models.CellList
-  const { Data ,curString } = state[module]
-  return { Data , loading ,curString}
+function map(state: any) {
+  // 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
+export default connect(map)(CellList);

src/pages/CommunityManagement/CellList/Details.tsx

+import React, { useState, useEffect } from 'react';
+import { connect } from 'dva';
+import {
+  LeftOutlined,
+  EyeOutlined,
+  PoweroffOutlined,
+  FileJpgOutlined,
+  FilePdfOutlined,
+} from '@ant-design/icons';
+import { Modal, Input, Button, TimePicker, Checkbox, Image, message, Divider, Avatar } from 'antd';
+// 样式
+import './celllist.less';
+import { RA } from '@/utils/method';
+
+import moment from 'moment';
+
+// 接口申明
+
+const Adds = (props: any) => {
+  const { Data, dispatch } = props;
+
+  useEffect(() => {
+    // 如果是添加传来没有值的时候 就清空  否则  赋值给表单
+    if (Data) {
+      // 返回列表
+      console.log('编辑');
+      console.log(Data);
+    } else {
+      console.log('新建');
+    }
+  }, [1]);
+
+  //物业费选择
+  const plainOptions = [
+    { label: '线上缴费', value: '0', disabled: true },
+    { label: '线下缴费', value: '1', disabled: true },
+  ];
+  // 关闭提示框
+  const [ModelFee, setModelFee] = useState(false);
+
+  // 返回
+  const goToReturn = () => {
+    // console.log(fileList)
+    history.back();
+  };
+
+  // 复制
+  const copy = () => {};
+
+  // 打开弹窗
+  const openModel = () => {
+    setModelFee(true);
+  };
+  // 关闭弹窗
+  const handleCancel = () => {
+    setModelFee(false);
+  };
+  // 关闭小区
+  const handleOk = () => {
+    setModelFee(false);
+    message.success('您已关闭小区！');
+    history.back();
+  };
+
+  return (
+    <div className="form">
+      <h3>
+        <EyeOutlined />
+        &nbsp;小区详情
+        <div className="back">
+          <Button
+            type="primary"
+            danger
+            style={{ marginRight: '15px' }}
+            icon={<PoweroffOutlined />}
+            loading={false}
+            onClick={openModel}
+          >
+            关闭小区
+          </Button>
+          <Button onClick={goToReturn}>
+            <LeftOutlined />
+            Back
+          </Button>
+        </div>
+      </h3>
+
+      <Divider />
+
+      <div className="box">
+        {/* 激活码 */}
+        <div className="code">
+          <li>激活码</li>
+          <Avatar
+            shape="square"
+            style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
+            size={120}
+            icon={<FileJpgOutlined />}
+          />
+        </div>
+
+        {/* 详情 */}
+        <div className="list-item">
+          <div className="item">
+            <label>小区名字：</label>
+            <span>XXXXX</span>
+          </div>
+          {/* ---------- */}
+          <div className="item">
+            <label>详细地址：</label>
+            <span>XXXXX</span>
+          </div>
+          {/* ---------- */}
+          <div className="item">
+            <label>工作时间：</label>
+            <span>XXXXX</span>
+          </div>
+          {/* ---------- */}
+          <div className="inst">
+            <div className="item">
+              <label>小区联系电话：</label>
+              <span>XXXXX</span>
+            </div>
+            <div className="item">
+              <label>小区邮箱：</label>
+              <span>XXXXX</span>
+            </div>
+          </div>
+
+          {/* ---------- */}
+          <div className="item">
+            <label>小区管理员：</label>
+            <span>XXXXX</span>
+          </div>
+          {/* ---------- */}
+          <div className="item" style={{ marginBottom: '0' }}>
+            <label>物业费：</label>
+            <Checkbox.Group options={plainOptions} defaultValue={['1']} />
+          </div>
+        </div>
+      </div>
+
+      <Divider />
+
+      <div className="box">
+        <div className="list-item">
+          <div className="item">
+            <label>楼巴时刻表：</label>
+            <Avatar
+              shape="square"
+              style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
+              size={64}
+              icon={<FileJpgOutlined />}
+            />
+            <Button type="link">预览</Button>
+          </div>
+          {/* ---------- */}
+          <div className="item">
+            <label>物业办事指南：</label>
+            <Avatar
+              shape="square"
+              style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
+              size={64}
+              icon={<FilePdfOutlined />}
+            />
+            <Button type="link">预览</Button>
+          </div>
+          {/* ---------- */}
+          <div className="item">
+            <label>保质期服务：</label>
+            <Avatar
+              shape="square"
+              style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
+              size={64}
+            />
+            <Button type="link">预览</Button>
+          </div>
+        </div>
+      </div>
+
+      <Divider />
+
+      <div className="box">
+        <div className="list-item">
+          <div className="item">
+            <label>帮助中心：</label>
+            <span>1</span>
+            <span>2</span>
+            <span>3</span>
+            <span>4</span>
+          </div>
+        </div>
+      </div>
+
+      <Divider />
+
+      <div className="box">
+        <div className="list-item">
+          <div className="item">
+            <label>临时到访码下载：</label>
+            <Avatar
+              shape="square"
+              style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
+              size={64}
+            />
+            <Button type="link">下载</Button>
+
+            <Input placeholder="Basic usage" disabled value="12333333333" />
+            <Button type="link" onClick={copy}>
+              复制
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* 确认关闭框 */}
+      <Modal title="确认关闭小区吗?" visible={ModelFee} onCancel={handleCancel} onOk={handleOk}>
+        <p>
+          关闭小区将会<span style={{ color: 'red' }}>删除</span>小区内
+          <span style={{ color: 'red' }}>所有</span>业主，请谨慎操作！
+        </p>
+      </Modal>
+    </div>
+  );
+};
+
+// export default Adds;
+function map(state: any) {
+  const Data = state.CellList.DataSave;
+  const loading = state.loading.models.CellList;
+  return { Data, loading };
+}
+export default connect(map)(Adds);

src/pages/CommunityManagement/CellList/celllist.less

-.contop{
-    padding: 20px;
-    background: #fff;
-    margin-bottom: 20px;
+li {
+  list-style: none;
+}
+.contop {
+  padding: 20px;
+  background: #fff;
+  margin-bottom: 20px;
 }
-.listbox{
-    width: 100%;
-    background-color: #ffffff;
-    padding: 10px;
+.listbox {
+  width: 100%;
+  background-color: #ffffff;
+  padding: 10px;
 }
 
 // 添加
-.form{
-    padding: 20px;
-    border: 1px solid #efefef;
-    border-radius: 3px;
-    background: #fff;
-    box-shadow: 0 1px 1px #ccc;
-    h3{
-        margin-bottom: 30px;
-        position: relative;
-        .back{
-            position: absolute;
-            right: 0;
-            top: 0;
-            margin-bottom: 20px;
-            background: #fff;
-        }
-    }
-    .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: #999;
+.form {
+  padding: 20px;
+  border: 1px solid #efefef;
+  border-radius: 3px;
+  background: #fff;
+  box-shadow: 0 1px 1px #ccc;
+  h3 {
+    margin-bottom: 30px;
+    position: relative;
+    .back {
+      position: absolute;
+      right: 0;
+      top: 0;
+      margin-bottom: 20px;
+      background: #fff;
     }
-    .li{
-        min-width: 140px;
-        margin-top: 15px;
-        margin-left: 0;            
-    }
-    input,.ant-upload-list{
-        width: 240px;
-    }
-    .ant-picker-range{
-        width: 240px;
-        input{
-            width: 100%;
-        }
+  }
+
+  .li {
+    min-width: 140px;
+    margin-top: 15px;
+    margin-left: 0;
+    display: block;
+  }
+  input,
+  .ant-upload-list {
+    width: 240px;
+  }
+  .ant-picker-range {
+    width: 240px;
+    input {
+      width: 100%;
     }
-    .list{
+  }
+  .list {
+    display: inline-block;
+  }
+  .ant-checkbox-group {
+    line-height: 34px;
+  }
+  hr {
+    border: 0;
+    height: 1px;
+    background: #eee;
+    margin-bottom: 20px;
+  }
+  .tip {
+    padding: 15px 0;
+  }
+
+  .ant-form-item-label > label {
+    width: 160px;
+  }
+
+  // 详情页
+
+  .box {
+    position: relative;
+    .item {
+      font-size: 15px;
+      line-height: 35px;
+      margin-bottom: 10px;
+      label {
         display: inline-block;
+        min-width: 110px;
+      }
     }
-    .ant-checkbox-group{
-        line-height: 34px;
-    }
-    hr{
-        border: 0;
-        height: 1px;
-        background: #eee;
-        margin-bottom: 20px;
+
+    .inst {
+      display: flex;
+      .item {
+        flex: 1;
+        &:nth-child(2) {
+          flex: 2;
+        }
+      }
     }
-    .tip{
-        padding:15px 0;
+    .code {
+      position: absolute;
+      right: 5%;
+      top: 50%;
+      transform: translateY(-65%);
+      li {
+        text-align: center;
+        line-height: 35px;
+      }
     }
+  }
+}
+.ant-picker-time-panel-column {
+  width: 100px;
 }

src/utils/params.ts

@@ -58,7 +58,8 @@ export const requestList = [
       file: ['A.jpg'],
     },
   ],
-  ['/tos/tosManageCommunity/save', '29 新建一个小区', {}],
+  // ['/tos/tosManageCommunity/save', '29 新建一个小区', {}],
+  ['/tos/tosCommunity/save', '29 新建一个小区', {}],
   ['/tos/tosOrder/get', '30 获取订单详情', {}],
   ['/tos/property/community/houseCard/query', '31 获取住户卡列表', {}],
   ['/tos/tosCommunity/get/detail', '32 获取小区详情', {}],