用户管理和服务商管理 缓存优化处理

src/components/TitleSearch/TitleSearch.tsx

@@ -14,30 +14,25 @@ import { gray } from 'chalk';
 import SearchOptionsCommnity from '../SearchOptions/SearchOptionsCommnity';
 
 const TitleSearch = (props: any) => {
-  // console.log("===================================", props)
-
-  const { dispatch, CommunityList } = props;
+  const {
+    dispatch,
+    CommunityList,
+    single,
+    checklist,
+    status,
+    communitySelect,
+    defaultValue,
+    time,
+    username,
+  } = props;
 
   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;
-
-  // username 为 小区列表管理者名字筛选
-  const { single, checklist, status, communitySelect, defaultValue, time, username } = props;
 
   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 [datePicker, setDate] = useState(null as any);
 
   const [form] = Form.useForm();
 
@@ -197,23 +192,9 @@ const TitleSearch = (props: any) => {
   );
 };
 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} />

src/pages/UserManagement/LIFEUserManagement/Users.tsx

@@ -8,64 +8,86 @@ import { Link, useIntl, connect, Dispatch, history } from 'umi';
 
 import TitleSearch from '../../../components/TitleSearch/TitleSearch';
 
-
 import { timestampToTime } from '../../../utils/time';
-import { PAGE, RA, URLCLEAR, getCookie, DataClear, URL, filterObjbyTg, urlEncode, filterObj } from '@/utils/method';
+import {
+  PAGE,
+  RA,
+  URLCLEAR,
+  getCookie,
+  DataClear,
+  URL,
+  filterObjbyTg,
+  urlEncode,
+  filterObj,
+} from '@/utils/method';
+
 import PageData from '@/models/Common/PageData';
 
-const module = "User"
-const module2 = "History"
-const module3 = "PageData"
-const Users = (props: any) => {
+const module = 'User';
+const module2 = 'History';
+const module3 = 'PageData';
 
+// const string2mean = [[0, "未注册"], [1, "注册"], [2, "注销"]]
+const string2mean = [
+  [0, 'Unregistered'],
+  [1, 'Registered'],
+  [2, 'Deregistered'],
+];
+
+// 筛选条件对象
+let readyData: any = {
+  pageNum: 1,
+  owerName: '',
+  communityArray: [],
+};
+// 节流阀
+let flag: boolean = false;
+const Users = (props: any) => {
   const { formatMessage } = useIntl();
 
   const { dispatch, location, Data, CommunityList, pageData, history_url } = props;
 
-  const SA = (values: any) => { dispatch({ type: 'User/SA', playload: values }) };
-
-  const nameofowner = formatMessage({ id: 'R.charge.input.nameofowner' })
-  const inputProject = formatMessage({ id: 'R.charge.input.project' })
-  const username = formatMessage({ id: 'R.charge.username' })
-  const project = formatMessage({ id: 'R.charge.project' })
-  const unit = formatMessage({ id: 'R.charge.unit' })
-  const status = formatMessage({ id: 'R.charge.status' })
-  const submissionTime = formatMessage({ id: 'R.charge.submissionTime' })
-  const actions = formatMessage({ id: 'R.charge.actions' })
-  const search = formatMessage({ id: 'R.charge.search' })
-  const addaccount = formatMessage({ id: 'R.charge.addaccount' })
-  const paymentsetting = formatMessage({ id: 'R.charge.paymentsetting' })
-
-  // const string2mean = [[0, "未注册"], [1, "注册"], [2, "注销"]]
-  const string2mean = [[0, "Unregistered"], [1, "Registered"], [2, "Deregistered"]]
-
-  const [curString, setCurString] = useState({ defaultCurrent: 1 })
-  const [loading, setLoading] = useState(false)
-  const [fileUploading, setFileUploading] = useState(false)
+  const SA = (values: any) => {
+    dispatch({ type: 'User/SA', playload: values });
+  };
 
-  const [compent, setCompent] = useState({ loading: false, fileUploading: false })
-  const [pageStart, setPageStart] = useState(false)
+  const username = formatMessage({ id: 'R.charge.username' });
+  const project = formatMessage({ id: 'R.charge.project' });
+  const unit = formatMessage({ id: 'R.charge.unit' });
+  const status = formatMessage({ id: 'R.charge.status' });
+  const submissionTime = formatMessage({ id: 'R.charge.submissionTime' });
+  const actions = formatMessage({ id: 'R.charge.actions' });
 
-  const [TestData, setTestData] = useState({})
-  // 存储当前页码
-  const [pageNum, setPageNum] = useState(1)
-  // 存储小区筛选条件
-  const [readyData, setReadyData] = useState(null as any)
+  const [loading, setLoading] = useState(false);
+  const [fileUploading, setFileUploading] = useState(false);
+  const [compent, setCompent] = useState({ loading: false, fileUploading: false });
 
   // 表格模块
   const columns = [
-    { title: username, dataIndex: 'owerName', },
-    { title: project, dataIndex: 'communityName', },
-    // { title: project, dataIndex: 'unit', },
-    // { title: unit, dataIndex: 'living', },
-    { title: unit, render: (text: any, record: any) => (<div>{record.buildingNumber + "#" + record.floorNumber + "—" + record.roomNumber}</div>) },
-    { title: status, dataIndex: 'enable', render: (text: any, record: any) => (<div>{string2mean[text][1]}</div>) },
-    { title: submissionTime, render: (text: any, record: any) => (<div>{timestampToTime(record.createTime.time)}</div>) },
+    { title: username, dataIndex: 'owerName' },
+    { title: project, dataIndex: 'communityName' },
+    {
+      title: unit,
+      render: (text: any, record: any) => (
+        <div>{record.buildingNumber + '#' + record.floorNumber + '—' + record.roomNumber}</div>
+      ),
+    },
+    {
+      title: status,
+      dataIndex: 'enable',
+      render: (text: any, record: any) => <div>{string2mean[text][1]}</div>,
+    },
+    {
+      title: submissionTime,
+      render: (text: any, record: any) => <div>{timestampToTime(record.createTime.time)}</div>,
+    },
     {
       title: actions,
       render: (text: any, record: any) => (
         <Space size="middle">
-          <a onClick={goToEdit.bind(this, record)} disabled={record.enable == 2 ? true : false}>Edit</a>
+          <a onClick={goToEdit.bind(this, record)} disabled={record.enable == 2 ? true : false}>
+            Edit
+          </a>
           <a onClick={goToDetail.bind(this, record)}>Detail</a>
         </Space>
       ),
@@ -75,132 +97,156 @@ const Users = (props: any) => {
   // 上传的模块
   const propsUpload = {
     name: 'file',
-    action: () => { return "http://47.74.233.180:8651/tos/excel/upload?userId=" + getCookie("id") },
+    action: () => {
+      return 'http://47.74.233.180:8651/tos/excel/upload?userId=' + getCookie('id');
+    },
     beforeUpload: (file: any) => {
-      if (file.type !== "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
+      if (file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
         message.error(`${file.name}  file format is incorrect!`);
       }
       return file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
     },
     onChange(info: any) {
       if (info.file.status == 'uploading') {
-        setFileUploading(true)
+        setFileUploading(true);
       }
       if (info.file.status === 'done') {
-        if (info.file.response.error_code == "0000") {
-          history.push(location.pathname + "/Result")
+        if (info.file.response.error_code == '0000') {
+          history.push(location.pathname + '/Result');
         } else {
-          history.push(location.pathname + "/ResultFailed")
-          message.error(`${info.file.name} file upload failed.` + 'failed count is ' + info.file.response.data.count);
-          setFileUploading(false)
+          history.push(location.pathname + '/ResultFailed');
+          message.error(
+            `${info.file.name} file upload failed.` +
+              'failed count is ' +
+              info.file.response.data.count,
+          );
+          setFileUploading(false);
         }
       } else if (info.file.status === 'error') {
         message.error(`${info.file.name} file upload failed.`);
-        setFileUploading(false)
+        setFileUploading(false);
       }
     },
     showUploadList: false,
-  }
+  };
 
-  // 判断数据是否回来
+  // 监听路由变化更新数据
   useEffect(() => {
-    if (Data != null) {
-      setLoading(false)
+    if (location.query) {
+      readyData = {
+        ...readyData,
+        ...location.query,
+      };
     }
-  }, [Data])
 
-  useEffect(() => {
-    if (location.query.owerName) {
-      setTestData({
-        OwnerName: location.query.owerName
-      })
+    if (CommunityList && flag === false) {
+      flag = true;
+      getList(CommunityList);
     }
-    setPageNum(parseInt(location.query.pageNum) || 1)
+  }, [location]);
 
-    setLoading(true)
+  // 监听小区列表是否回来
+  useEffect(() => {
+    if (CommunityList && flag === false) {
+      flag = true;
+      getList(CommunityList);
+    }
+  }, [CommunityList]);
 
+  // 请求拿取数据
+  const getList = (CommunityList: []) => {
+    if (readyData.communityArray.length === 0) {
+      readyData.communityArray = CommunityList;
+    }
+    setLoading(true);
     //获取数据
-    RA(12, {
-      owerName: location.query.owerName !== undefined ? (location.query.owerName) : null,
-      communityArray: (readyData === null || readyData.length === 0) ? CommunityList : readyData,
-      pageNum: location.query.pageNum || 1
-    }, module, dispatch);
+    RA(
+      12,
+      {
+        ...readyData,
+      },
+      module,
+      dispatch,
+    );
+  };
 
-  }, [location])
+  // 判断数据是否回来
+  useEffect(() => {
+    if (Data != null) {
+      flag = false;
+      setLoading(false);
+    }
+  }, [Data]);
 
   const goToDetail = (values: any, e: any) => {
-    SA(values)
-    PAGE(readyData, module3, dispatch)//保存页面参数
-    history.push(location.pathname + '/Detail')
-  }
+    SA(values);
+    history.push(location.pathname + '/Detail');
+  };
+
   const goToEdit = (values: any, e: any) => {
-    SA(values)
-    PAGE(readyData, module3, dispatch)
-    URL({ pathname: location.pathname + '/Edit', status: 1 }, module2, dispatch)
-    history.push(location.pathname + '/Edit')
-  }
+    SA(values);
+    URL({ pathname: location.pathname + '/Edit', status: 1 }, module2, dispatch);
+    history.push(location.pathname + '/Edit');
+  };
 
   const goToAdd = () => {
-    URL({ pathname: location.pathname + '/Add', status: 1 }, module2, dispatch)
-    history.push(location.pathname + '/Add')
-  }
+    URL({ pathname: location.pathname + '/Add', status: 1 }, module2, dispatch);
+    history.push(location.pathname + '/Add');
+  };
 
   // LIFE用户管理页面的搜索按钮
   const CallBackTitleSearch = (comment: any) => {
-
-    // 将筛选条件存储起来
-    setReadyData(comment.serviceCommunityList)
-    setPageNum(1)
+    console.log(comment);
+    readyData.communityArray = comment.serviceCommunityList;
 
     /*页面跳转*/
-    if (comment.OwnerName) {
-      history.push(location.pathname + urlEncode(filterObj({
+    history.push(
+      location.pathname +
+        urlEncode(
+          filterObj({
             owerName: comment.OwnerName,
             pageNum: 1,
-      })))
-    } else {
-      history.push(location.pathname + urlEncode(filterObj({
-        pageNum: 1,
-      })))
-    }
-
-  }
+          }),
+        ),
+    );
+  };
 
+  // 切换页码
   const pageChange = (values: any) => {
     // 将当前页码存储起来
-    setPageNum(values.current)
-
-    /*页面跳转*/
-    var tmp = filterObjbyTg(location.query, [])
-    tmp["pageNum"] = values.current
-    location.query.owerName ? tmp["owerName"] = location.query.owerName : null
-    history.push(location.pathname + urlEncode(tmp))
-  }
+    var tmp = filterObjbyTg(location.query, ['owerName']);
+    tmp['pageNum'] = values.current;
+    history.push(location.pathname + urlEncode(tmp));
+  };
 
   return (
     <div className={styles.base}>
       {/* 头部组件 */}
       <TitleSearch
-        listkey={["OwnerName"]}
-        list={["Owner Name"]}
-        community={"serviceCommunityList"}
+        listkey={['OwnerName']}
+        list={['Owner Name']}
+        community={'serviceCommunityList'}
         onSubmit={CallBackTitleSearch}
-        defaultValue={TestData}
-        checklist={pageData}
+        defaultValue={{ OwnerName: readyData.owerName }}
+        checklist={readyData.communityArray.length !== 0 ? readyData.communityArray : null}
       />
 
       {/* 内容组件 */}
       <div className={styles.box2}>
-        <button className={styles.buttonAdd2} onClick={goToAdd}>Create New Owner</button>
-        <div className={styles.buttonAdd} >
+        <button className={styles.buttonAdd2} onClick={goToAdd}>
+          Create New Owner
+        </button>
+        <div className={styles.buttonAdd}>
           <Upload {...propsUpload}>
             <Button icon={compent.fileUploading ? null : <UploadOutlined />}>
-              {compent.fileUploading ?
+              {compent.fileUploading ? (
                 <>
                   <Spin indicator={<LoadingOutlined style={{ fontSize: 16 }} spin />} />
                   Uploading
                 </>
-                : "Batch Upload"}
+              ) : (
+                'Batch Upload'
+              )}
             </Button>
           </Upload>
         </div>
@@ -208,25 +254,31 @@ const Users = (props: any) => {
 
       {/* 列表组件 */}
       <Table
-        rowKey={"id"}
+        rowKey={'id'}
         loading={loading}
         style={{ marginTop: 16 }}
         dataSource={Data != null ? Data.data.list : []}
         columns={columns}
-        pagination={Data != null ? { current: pageNum, total: Data.data.page.totalRow, showSizeChanger: false, pageSize: Data.data.page.curPageSize } : {}}
-        onChange={pageChange} />
-
+        pagination={
+          Data != null
+            ? {
+                current: readyData.pageNum,
+                total: Data.data.page.totalRow,
+                showSizeChanger: false,
+                pageSize: Data.data.page.curPageSize,
+              }
+            : {}
+        }
+        onChange={pageChange}
+      />
     </div>
   );
 };
 
-
 function mapStateToProps(state: any) {
-
-  const { sourceData, DataSave, Data, } = state.User;
+  const { sourceData, DataSave, Data } = state.User;
   const { history_url } = state.History;
   const { pageData } = state.PageData;
-  const { token } = state.login;
   const { CommunityList } = state.Init;
   return {
     Data,
@@ -234,12 +286,8 @@ function mapStateToProps(state: any) {
     sourceData,
     pageData,
     history_url,
-    // token
     CommunityList,
   };
 }
 
-
-
 export default connect(mapStateToProps)(Users);
-

src/pages/UserManagement/ServiceProviderManagement/Edit.tsx

@@ -8,68 +8,72 @@ import SelectOptions from '../../../components/SelectOptions/index';
 import TitleBack from '../../../components/TitleBack/TitleBack';
 import { RA } from '@/utils/method';
 
-const module = "User"
+const module = 'User';
+let options: Array<{}> = [];
 const Edit = (props: any) => {
-
   const { dispatch, CurData, SaveChooseData, location, CommunityList, DataServices } = props;
-  const TosTosServiceProviderSave = (values: any) => { dispatch({ type: 'ServiceProvider/TosTosServiceProviderSave', playload: values }) };
+  const TosTosServiceProviderSave = (values: any) => {
+    dispatch({ type: 'ServiceProvider/TosTosServiceProviderSave', playload: values });
+  };
 
   const [CList, setCList] = useState(CommunityList);
-  const [SList, setSList] = useState(["1"])
+  const [SList, setSList] = useState(['1']);
 
-  const [load, setload] = useState(false)
+  const [load, setload] = useState(false);
 
-  const printContent = (List: any) => { setCList(List) }
+  const printContent = (List: any) => {
+    setCList(List);
+  };
   const formRef = useRef(null);
 
-
   useEffect(() => {
-    console.log(SaveChooseData)
-    RA(43, { serviceName: "" }, module, dispatch)
-
+    console.log(SaveChooseData);
+    RA(43, {}, module, dispatch);
   }, []);
+
   useEffect(() => {
     if (DataServices != null) {
-
-      console.log(DataServices)
-      var tmp = DataServices.data.serviceScopeList
-
-      console.log(tmp)
+      var tmp = DataServices.data.serviceScopeList;
+      options = tmp.map((v: string, i: number) => {
+        return {
+          label: v,
+          value: i.toString(),
+        };
+      });
 
       if (SaveChooseData != null) {
-        formRef.current.setFieldsValue(SaveChooseData)
+        formRef.current.setFieldsValue(SaveChooseData);
       }
     }
-  }, [DataServices])
+  }, [DataServices]);
   const onFinish = (values: any) => {
-    var val = values
-    val.serviceCommunityList = CList
+    var val = values;
+    val.serviceCommunityList = CList;
     // val.serviceScopeList = SList
-    val.creator = "admin";
-    val.updater = "admin";
-    setload(true)
-    TosTosServiceProviderSave(val)
-  };
-  const onFinishFailed = (errorInfo: any) => {
-    console.log('Failed:', errorInfo)
+    val.creator = 'admin';
+    val.updater = 'admin';
+    setload(true);
+    TosTosServiceProviderSave(val);
   };
 
   return (
     <div className={styles.base}>
-
       {/* 头部组件v1.2 */}
       <TitleBack title="Edit Service Provider" />
 
-      <Form ref={formRef} name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed}>
+      <Form ref={formRef} name="basic" onFinish={onFinish}>
         <Spin spinning={load} tip="In the submission,Please Wait...">
           <div className={styles.box1}>
             <div className={styles.box1item1}>Company Name</div>
             <div className={styles.box1item2}>
-              <Form.Item name="providerName"
-                rules={[{
+              <Form.Item
+                name="providerName"
+                rules={[
+                  {
                     required: true,
-                  message: "Please enter the company name!"
-                }]}
+                    message: 'Please enter the company name!',
+                  },
+                ]}
               >
                 <Input style={{ width: 260 }} placeholder="Please enter company name" />
               </Form.Item>
@@ -78,10 +82,12 @@ const Edit = (props: any) => {
             <div className={styles.box1item4}>
               <Form.Item
                 name="providerAddress"
-                rules={[{
+                rules={[
+                  {
                     required: true,
-                  message: "Please enter your office address!"
-                }]}
+                    message: 'Please enter your office address!',
+                  },
+                ]}
               >
                 <Input style={{ width: 200 }} placeholder="Single Line Input" />
               </Form.Item>
@@ -90,19 +96,25 @@ const Edit = (props: any) => {
 
           <div className={styles.line}></div>
 
-          <SelectOptions list={CommunityList.sort()} checklist={SaveChooseData != null ? SaveChooseData.serviceCommunityList : null} onSubmit={printContent} />
+          <SelectOptions
+            list={CommunityList ? CommunityList.sort() : []}
+            checklist={SaveChooseData != null ? SaveChooseData.serviceCommunityList : null}
+            onSubmit={printContent}
+          />
 
           <div className={styles.box2}>
             <div className={styles.box2item1}>Services Available</div>
             <div className={styles.box2item2}>
               <Form.Item
                 name="serviceScopeList"
-                rules={[{
+                rules={[
+                  {
                     required: true,
-                  message: "Please select at least one service available!"
-                }]}
+                    message: 'Please select at least one service available!',
+                  },
+                ]}
               >
-                <Checkbox.Group options={DataServices != null ? DataServices.data.serviceScopeList : null} />
+                <Checkbox.Group options={options} />
               </Form.Item>
             </div>
           </div>
@@ -112,59 +124,63 @@ const Edit = (props: any) => {
             <div className={styles.box3item2}>
               <Form.Item
                 name="contactName"
-                rules={[{
+                rules={[
+                  {
                     required: true,
-                  message: "Please enter the name of the person in charge!"
-                }]}
+                    message: 'Please enter the name of the person in charge!',
+                  },
+                ]}
               >
-                <Input style={{ width: 200 }}
-                  placeholder="Please enter a name"
-                />
+                <Input style={{ width: 200 }} placeholder="Please enter a name" />
               </Form.Item>
             </div>
           </div>
 
           <div className={styles.box4}>
             <div className={styles.box4item1}>Contact Details</div>
-            <div className={styles.box4item2}><Form.Item name="contactPhone"><Input style={{ width: 200 }} placeholder="Telephone" /></Form.Item></div>
+            <div className={styles.box4item2}>
+              <Form.Item name="contactPhone">
+                <Input style={{ width: 200 }} placeholder="Telephone" />
+              </Form.Item>
+            </div>
             <div className={styles.box4item3}>
               <Form.Item
                 name="contactEmail"
-                rules={[{
+                rules={[
+                  {
                     required: true,
-                  type: "email",
-                  message: "Please enter the correct email address!"
-                }]}
+                    type: 'email',
+                    message: 'Please enter the correct email address!',
+                  },
+                ]}
               >
-                <Input style={{ width: 200 }} placeholder="E-mail" /></Form.Item></div>
+                <Input style={{ width: 200 }} placeholder="E-mail" />
+              </Form.Item>
+            </div>
           </div>
-
 
           <div className={styles.line}></div>
           <Form.Item>
-            <Button type="primary" htmlType="submit">Submit</Button>
+            <Button type="primary" htmlType="submit">
+              Submit
+            </Button>
           </Form.Item>
         </Spin>
       </Form>
-
     </div>
   );
 };
 
 function mapStateToProps(state: any) {
   const { CurData, SaveChooseData } = state.ServiceProvider;
-  const { DataServices, } = state.User;
+  const { DataServices } = state.User;
   const { CommunityList } = state.Init;
   return {
     CurData,
     SaveChooseData,
     CommunityList,
-    DataServices
+    DataServices,
   };
 }
 
-
-
 export default connect(mapStateToProps)(Edit);
-
-

src/pages/UserManagement/ServiceProviderManagement/ServiceProviderManagement.tsx

@@ -4,176 +4,243 @@ import styles from './index.less';
 import { Form, Input, Spin, Table, Space, Button } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
 
-import { urlEncode, filterObj, filterObjbyTg } from '@/utils/method';
+import { urlEncode, filterObj, filterObjbyTg, RA } from '@/utils/method';
 
 import { Link, useIntl, connect, Dispatch, history } from 'umi';
 
 import TitleSearch from '../../../components/TitleSearch/TitleSearch';
+import { TosSecurityGuarderGet } from '@/services/tos';
+
+const module = 'User';
+// 服务范围数据
+let options: Array<[]> = [];
+
+// 筛选参数
+let readyData: any = {
+  pageNum: 1,
+  serviceCommunityList: [],
+  serviceScope: '',
+  providerName: '',
+};
+// 节流阀
+let flag = false;
 
 const ServiceProviderManagement = (props: any) => {
-  const { formatMessage } = useIntl();
-
-  const [pageNum, setPageNum] = useState(1)
-
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
 
-  const [testData, setTestData] = useState(null as any);
+  const { dispatch, location, Data, CommunityList, DataServices } = props;
 
-  const { dispatch, location, Data, CommunityList } = props;
-  const RA = (index: any, values: any) => { dispatch({ type: 'ServiceProvider/RA', playload: { index: index, body: values } }) };
-  const TosTosServiceProviderGet = (values: any) => {
-    dispatch({
-      type: 'ServiceProvider/TosTosServiceProviderGet',
-      playload: values
-    })
+  const SaveChooseData = (values: any) => {
+    dispatch({ type: 'ServiceProvider/SaveChooseData', playload: values });
   };
 
-  const SaveChooseData = (values: any) => { dispatch({ type: 'ServiceProvider/SaveChooseData', playload: values }) };
-
-  // const GetList = () => {
-  //   if (CommunityList != null) {
-  //     TosTosServiceProviderGet({
-  //       providerName: "",
-  //       serviceCommunityList: CommunityList
-  //     })
-  //   }
-  // }
-  // useEffect(() => {
-  //   console.log(CommunityList)
-  //   GetList()
-  // }, [CommunityList]);
-
   const goToDetail = (values: any, e: any) => {
-    SaveChooseData(values)
-    history.push(location.pathname + '/Detail')
-  }
+    SaveChooseData(values);
+    history.push(location.pathname + '/Detail');
+  };
   const goToCreate = () => {
-    SaveChooseData(null)
-    history.push(location.pathname + '/Edit')
-  }
+    SaveChooseData(null);
+    history.push(location.pathname + '/Edit');
+  };
   const goToEdit = (values: any, e: any) => {
-    SaveChooseData(values)
-    history.push(location.pathname + '/Edit')
-  }
-  const goToServices = () => { history.push(location.pathname + '/Services') }
+    SaveChooseData(values);
+    history.push(location.pathname + '/Edit');
+  };
+  const goToServices = () => {
+    history.push(location.pathname + '/Services');
+  };
 
   const columns = [
-    { title: "Service Provider", dataIndex: 'providerName', },
-    { title: "contact Name", dataIndex: 'contactName', },
+    { title: 'Service Provider', dataIndex: 'providerName' },
+    { title: 'contact Name', dataIndex: 'contactName' },
 
     {
-      title: "Contacts",
+      title: 'Contacts',
       dataIndex: 'contactPhone',
     },
-    /*{ title: "Contact Details",dataIndex: 'contactEmail',},*/
     {
-      title: "Services Available",
-      dataIndex: 'serviceScope',
+      title: 'Services Available',
+      dataIndex: 'serviceScopeList',
+      render: (text: any, record: any) => {
+        let str: string = '';
+        text.forEach((v: string, i: number) => {
+          str += i === text.length - 1 ? v : v + ',';
+        });
+        return str;
+      },
     },
-    { title: "Account Status", dataIndex: 'enable', },
+    { title: 'Account Status', dataIndex: 'enable' },
     {
-      title: "Actions",
+      title: 'Actions',
       render: (text: any, record: any) => (
-        <Space size="middle"><a onClick={goToDetail.bind(this, record)}>Detail</a><a onClick={goToEdit.bind(this, record)}>edit</a></Space>
+        <Space size="middle">
+          <a onClick={goToDetail.bind(this, record)}>Detail</a>
+          <a onClick={goToEdit.bind(this, record)}>edit</a>
+        </Space>
       ),
     },
   ];
-  const dataSource = (values: any) => {
-    let tmp = values;
-    for (let items in tmp) {
-      switch (tmp[items].enable) {
-        case 0: tmp[items].enable = "unregistered"; break;
-        case 1: tmp[items].enable = "registered"; break;
-        case 2: break;
-      }
-    }
-    for (let items in tmp) {
-      switch (tmp[items].serviceScope) {
-        case 0: tmp[items].serviceScope = "清洁"; break;
-        case 1: tmp[items].serviceScope = "维修"; break;
-        case 2: tmp[items].serviceScope = "保安"; break;
-        case 3: tmp[items].serviceScope = "会计"; break;
-      }
-    }
 
-    return tmp;
-  }
+  // 拿取服务商列表
+  useEffect(() => {
+    RA(43, {}, module, dispatch);
+  }, []);
 
   useEffect(() => {
-    if (Data != null) {
-      setLoading(false)
-      console.log("核查的地方")
-      console.log(Data)
+    if (DataServices) {
+      options = DataServices.data.serviceScopeList.map((v: string, i: number) => {
+        return [i, v];
+      });
     }
-  }, [Data])
+  }, [DataServices]);
 
-  useEffect(() => {
+  // 请求
+  const TosTosServiceProviderGet = () => {
+    if (readyData.serviceCommunityList.length === 0) {
+      readyData.serviceCommunityList = CommunityList;
+    }
+    dispatch({
+      type: 'ServiceProvider/TosTosServiceProviderGet',
+      playload: { ...readyData },
+    });
+  };
 
-    setPageNum(1)
-    setLoading(true)
-    TosTosServiceProviderGet({
+  // 监听路由url
+  useEffect(() => {
+    if (location.query) {
+      readyData = {
+        ...readyData,
         ...location.query,
-      serviceCommunityList: (testData === null || testData.length === 0) ? CommunityList : testData,
-      pageNum: 1
-    })
+      };
+    }
 
+    if (CommunityList && flag === false) {
+      flag = true;
+      setLoading(true);
+      TosTosServiceProviderGet();
+    }
+  }, [location]);
 
-  }, [location])
+  // 监听小区数据
+  useEffect(() => {
+    if (CommunityList && flag === false) {
+      flag = true;
+      setLoading(true);
+      TosTosServiceProviderGet();
+    }
+  }, [CommunityList]);
 
-  const CallBackTitleSearch = (comment: any) => {
-    console.log(comment)
-    console.log(location.pathname)
+  // 数据核查
+  useEffect(() => {
+    if (Data != null) {
+      flag = false;
+      setLoading(false);
+    }
+  }, [Data]);
 
   //页面搜索
-    setTestData(comment.serviceCommunityList)
-    history.push(location.pathname + urlEncode(filterObj({
+  const CallBackTitleSearch = (comment: any) => {
+    readyData.serviceCommunityList = comment.serviceCommunityList;
+    history.push(
+      location.pathname +
+        urlEncode(
+          filterObj({
             providerName: comment.providerName,
             serviceScope: comment.status,
-      pageNum: location.query.pageNum || 1
-    })))
-  }
+            pageNum: 1,
+          }),
+        ),
+    );
+  };
 
+  // 切换页码
   const pageChange = (values: any) => {
-    // setPageNum(values.current)
-    console.log(values)
-    /*页面跳转*/
-    var tmp = filterObjbyTg(location.query, [])
-    tmp["pageNum"] = values.current
-    history.push(location.pathname + urlEncode(tmp))
-  }
+    let tmp = filterObjbyTg(location.query, ['providerName', 'serviceScope']);
+    tmp['pageNum'] = values.current;
+    history.push(location.pathname + urlEncode(tmp));
+  };
 
+  // 数据处理
+  const dataSource = (values: any) => {
+    let tmp = values;
+    for (let items in tmp) {
+      switch (tmp[items].enable) {
+        case 0:
+          tmp[items].enable = 'unregistered';
+          break;
+        case 1:
+          tmp[items].enable = 'registered';
+          break;
+        case 2:
+          break;
+      }
+    }
+    for (let items in tmp) {
+      for (let items1 in tmp[items].serviceScopeList) {
+        switch (tmp[items].serviceScopeList[items1]) {
+          case '0':
+            tmp[items].serviceScopeList[items1] = '保安';
+            break;
+          case '1':
+            tmp[items].serviceScopeList[items1] = '会计';
+            break;
+          case '2':
+            tmp[items].serviceScopeList[items1] = '维修';
+            break;
+          case '3':
+            tmp[items].serviceScopeList[items1] = '清洁';
+            break;
+        }
+      }
+    }
+    return tmp;
+  };
 
+  // table组件配置
   const pagination = {
-    current: pageNum,
+    current: readyData.pageNum,
     total: Data !== null ? Data.page.totalRow : null,
-    showSizeChanger: false
-  }
-
+    showSizeChanger: false,
+  };
 
   return (
-
     <div className={styles.base}>
       {/* 头部组件 */}
-
       <TitleSearch
-        listkey={["providerName"]}
-        list={["Service Provider"]}
-        status={[{
-          name: ["status", "服务范围"],
-          data: [[null, "全部"], [0, "清洁"], [1, "维修"], [2, "保安"], [3, "会计"]]
-        }]}
-        community={"serviceCommunityList"}
-        onSubmit={CallBackTitleSearch} />
+        listkey={['providerName']}
+        list={['Service Provider']}
+        status={[
+          {
+            name: ['status', '服务范围'],
+            data: [[null, '全部'], ...options],
+          },
+        ]}
+        community={'serviceCommunityList'}
+        onSubmit={CallBackTitleSearch}
+        defaultValue={{
+          providerName: readyData.providerName,
+          status: parseInt(readyData.serviceScope),
+        }}
+        checklist={
+          readyData.serviceCommunityList.length !== 0 ? readyData.serviceCommunityList : null
+        }
+      />
 
       {/* 内容组件 */}
       <div className={styles.box2}>
-        <button className={styles.buttonAdd2} onClick={goToServices}>Avail Services</button>
-        <button className={styles.buttonAdd} onClick={goToCreate}>Create New</button>
+        <button className={styles.buttonAdd2} onClick={goToServices}>
+          Avail Services
+        </button>
+        <button className={styles.buttonAdd} onClick={goToCreate}>
+          Create New
+        </button>
       </div>
 
       {/* 列表组件 */}
       <Spin spinning={Data != null ? false : true}>
-        <Table size="small" rowKey={"id"}
+        <Table
+          size="small"
+          rowKey={'id'}
           style={{ marginTop: 16 }}
           loading={loading}
           columns={columns}
@@ -182,20 +249,19 @@ const ServiceProviderManagement = (props: any) => {
           onChange={pageChange}
         />
       </Spin>
-
     </div>
-
   );
 };
 
 function mapStateToProps(state: any) {
   const { Data } = state.ServiceProvider;
-  const { DataProvider } = state.User;
+  const { DataProvider, DataServices } = state.User;
   const { CommunityList } = state.Init;
   return {
     Data,
     DataProvider,
-    CommunityList
+    CommunityList,
+    DataServices,
   };
 }