测试bug修复

src/components/SearchOptions/SearchOptionsTow.tsx

@@ -12,6 +12,9 @@ const SearchOptionsTow = (porps: any) => {
   ));
   function onChange(value: any) {
     // console.log(`selected ${value}`);
+    if (!value) {
+      value = '';
+    }
     extendName(value);
   }
   return (

src/components/TagSelect/index.jsx

@@ -5,7 +5,7 @@ import styles from './index.less';
 
 class TagSelect extends React.Component {
   state = {
-    value: this.props.value!=null?this.props.value:[],
+    value: this.props.value != null ? this.props.value : [],
     inputVisible: false,
     inputValue: '',
     editInputIndex: -1,
@@ -19,32 +19,31 @@ class TagSelect extends React.Component {
   //   console.log("--组件加载完成--")
   //   console.log(this.state.value)
   // }
-  handleClose = removedTag => {
-    const value = this.state.value.filter(tag => tag !== removedTag);
+  handleClose = (removedTag) => {
+    const value = this.state.value.filter((tag) => tag !== removedTag);
     console.log(value);
     this.setState({ value });
-    this.props.onChange(value)
+    this.props.onChange(value);
   };
 
   showInput = () => {
     this.setState({ inputVisible: true }, () => this.input.focus());
   };
 
-  handleInputChange = e => {
-  
+  handleInputChange = (e) => {
     this.setState({ inputValue: e.target.value });
   };
 
   handleInputConfirm = () => {
     const { inputValue } = this.state;
     let { value } = this.state;
-  
+
     if (inputValue && value.indexOf(inputValue) === -1) {
       this.props.onAdd(inputValue);
       value = [...value, inputValue];
     }
     console.log(value);
-    this.props.onChange(value)
+    this.props.onChange(value);
     this.setState({
       value,
       inputVisible: false,
@@ -52,7 +51,7 @@ class TagSelect extends React.Component {
     });
   };
 
-  handleEditInputChange = e => {
+  handleEditInputChange = (e) => {
     this.setState({ editInputValue: e.target.value });
   };
 
@@ -60,7 +59,7 @@ class TagSelect extends React.Component {
     this.setState(({ value, editInputIndex, editInputValue }) => {
       const newTags = [...value];
       newTags[editInputIndex] = editInputValue;
-      this.props.onChange(newTags)
+      this.props.onChange(newTags);
       return {
         value: newTags,
         editInputIndex: -1,
@@ -69,20 +68,26 @@ class TagSelect extends React.Component {
     });
   };
 
-  saveInputRef = input => {
+  saveInputRef = (input) => {
     this.input = input;
   };
 
-  saveEditInputRef = input => {
+  saveEditInputRef = (input) => {
     this.editInput = input;
   };
 
   render() {
     const { value, inputVisible, inputValue, editInputIndex, editInputValue } = this.state;
+
+    console.log(value);
+
     return (
       <>
-        {
-          value.map((tag, index) => {
+        <Tag className="editTag" key="Accountant">
+          Accountant
+        </Tag>
+
+        {value.map((tag, index) => {
           if (editInputIndex === index) {
             return (
               <Input
@@ -108,13 +113,11 @@ class TagSelect extends React.Component {
               onClose={() => this.handleClose(tag)}
             >
               <span
-                onDoubleClick={e => {
-               
-                    this.setState({ editInputIndex: index, editInputValue: tag }, () => {
-                      this.editInput.focus();
-                    });
-                    e.preventDefault();
-                
+                onDoubleClick={(e) => {
+                  this.setState({ editInputIndex: index, editInputValue: tag }, () => {
+                    this.editInput.focus();
+                  });
+                  e.preventDefault();
                 }}
               >
                 {isLongTag ? `${tag.slice(0, 20)}...` : tag}
@@ -128,9 +131,8 @@ class TagSelect extends React.Component {
           ) : (
             tagElem
           );
-          })
-        }
-        
+        })}
+
         {inputVisible && (
           <Input
             ref={this.saveInputRef}
@@ -153,4 +155,4 @@ class TagSelect extends React.Component {
   }
 }
 
-export default TagSelect;
\ No newline at end of file
+export default TagSelect;

src/models/ServiceProvider.ts

@@ -62,7 +62,7 @@ export default {
       } else {
         let CurData = true;
         yield put({ type: 'returnCurData' }, CurData);
-        message.success('operator success!', 1.5, () => {
+        message.success('Operator Success!', 1.5, () => {
           window.location.href = '/UserManagement/ServiceProviderManagement';
         });
       }

src/pages/CommercialService/CardAdd.tsx

-import React, { useState, useEffect, useRef } from 'react';
-import { Input, Tabs, Table, Space, Button, Form, Row, Col, Layout, message, Spin } from 'antd';
-const { TabPane } = Tabs;
+import React, { useState, useEffect } from 'react';
+import { Input, Button, Form, message, Spin } from 'antd';
 
 import { connect, history } from 'umi';
 
@@ -10,7 +9,6 @@ import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommn
 import Line from '@/components/Line/Line';
 import TextArea from 'antd/lib/input/TextArea';
 import Relationship from '@/components/Relationship/Relationship';
-import { useForm } from 'antd/es/form/util';
 import { validateMessages } from '@/utils/params';
 import styles from './css/index.less';
 
@@ -69,23 +67,59 @@ const CardAdd = (props: any) => {
     form.resetFields();
   }, []);
 
-  const checkData = (rule: any, value: any, callback: any) => {
+  // const checkData: (rule: any, value: string, callback: any) => void = (
+  //   rule: any,
+  //   value: any,
+  //   callback: any,
+  // ) => {
+  //   if (value) {
+  //     if (/^\d$/) {
+
+  //     } else {
+
+  //     }
+  //   }
+  //   callback()
+  // };
+
+  const checkData2: (rule: any, value: string, cb: any) => void = (rule, value, cb) => {
     if (value) {
       if (/^[a-zA-Z0-9]+$/g.test(value)) {
-        callback();
+        cb();
       } else {
-        callback(new Error('Only numbers and letters can be entered!'));
+        cb(new Error('Only numbers and letters can be entered!'));
       }
     }
-    callback();
+    cb();
   };
 
-  const checkName = (rule: any, value: any, callback: any) => {
-    if (!value || !value.trim()) {
-      callback(new Error('*it is required!'));
+  // const checkName: (rule: any, value: string, callback: any) => void = (
+  //   rule: any,
+  //   value: any,
+  //   callback: any,
+  // ) => {
+  //   if (value) {
+  //     if () {
+
+  //     } else {
+  //       callback(new Error(''));
+  //     }
+  //   }
+  //   callback();
+  // };
+
+  // 手机号码验证
+  const phoneNumber: (rule: any, value: string, cb: any) => void = (rule, value, cb) => {
+    if (value) {
+      if (/^\d{8}$|^1[3|5|7|8|9]\d{9}$/.test(value)) {
+        cb();
+      } else {
+        cb(new Error('The format is incorrect!'));
+      }
     }
-    callback();
+    cb();
   };
+
   return (
     <div style={{ width: '100%', minWidth: 1020, padding: 34, backgroundColor: '#ffffff' }}>
       <TitleBack title={'Apply Card Add'}></TitleBack>
@@ -101,7 +135,7 @@ const CardAdd = (props: any) => {
                 name="buildNumber"
                 style={{ marginRight: 16 }}
                 className={styles.buildNumber}
-                rules={[{ required: true, validator: checkData }]}
+                rules={[{ required: true, type: 'number', message: 'Only number can be entered' }]}
               >
                 <Input style={{ width: 80 }} placeholder={'BLK'} />
               </Form.Item>
@@ -110,7 +144,7 @@ const CardAdd = (props: any) => {
                 name="floorNumber"
                 style={{ marginRight: 16 }}
                 className={styles.floorNumber}
-                rules={[{ required: true, validator: checkData }]}
+                rules={[{ required: true, type: 'number', message: 'Only number can be entered' }]}
               >
                 <Input style={{ width: 80 }} placeholder={'Floor'} />
               </Form.Item>
@@ -118,18 +152,14 @@ const CardAdd = (props: any) => {
               <Form.Item
                 name="roomNumber"
                 className={styles.roomNumber}
-                rules={[{ required: true, validator: checkData }]}
+                rules={[{ required: true, validator: checkData2 }]}
               >
                 <Input style={{ width: 120 }} placeholder={'Room'} />
               </Form.Item>
             </Input.Group>
           </Form.Item>
 
-          <Form.Item
-            name="zipCode"
-            wrapperCol={{ ...Layout.wrapperCol, offset: 3 }}
-            rules={[{ required: true }]}
-          >
+          <Form.Item name="zipCode" wrapperCol={{ offset: 3 }} rules={[{ required: true }]}>
             <Input
               style={{ width: 580 }}
               placeholder={'Display the address and postcode automatically according to the'}
@@ -142,14 +172,18 @@ const CardAdd = (props: any) => {
               <Form.Item
                 name="communityOwner"
                 style={{ marginRight: 20 }}
-                rules={[{ required: true, validator: checkName }]}
+                rules={[{ required: true, max: 8, min: 2 }]}
               >
                 <Input placeholder={'Name'} />
               </Form.Item>
               <Form.Item style={{ marginRight: 20 }} label={'Contact Information'}>
                 <Input hidden={true} />
               </Form.Item>
-              <Form.Item name="communityOwnerPhone" style={{ marginRight: 20 }}>
+              <Form.Item
+                name="communityOwnerPhone"
+                style={{ marginRight: 20 }}
+                rules={[{ validator: phoneNumber }]}
+              >
                 <Input placeholder={'Phone number'} />
               </Form.Item>
               <Form.Item name="communityOwnerEmail" rules={[{ required: true, type: 'email' }]}>
@@ -165,14 +199,18 @@ const CardAdd = (props: any) => {
               <Form.Item
                 name="applyName"
                 style={{ marginRight: 20 }}
-                rules={[{ required: true, validator: checkName }]}
+                rules={[{ required: true, max: 8, min: 2 }]}
               >
                 <Input placeholder={'Name'} />
               </Form.Item>
               <Form.Item style={{ marginRight: 20 }} label={'Contact Information'}>
                 <Input hidden={true} />
               </Form.Item>
-              <Form.Item name="applyNamePhone" style={{ marginRight: 20 }}>
+              <Form.Item
+                name="applyNamePhone"
+                style={{ marginRight: 20 }}
+                rules={[{ validator: phoneNumber }]}
+              >
                 <Input placeholder={'Phone number'} />
               </Form.Item>
               <Form.Item name="applyNameEmail" rules={[{ required: true, type: 'email' }]}>
@@ -194,7 +232,7 @@ const CardAdd = (props: any) => {
             <TextArea style={{ width: 400 }}></TextArea>
           </Form.Item>
           <Line></Line>
-          <Form.Item wrapperCol={{ ...Layout.wrapperCol, offset: 3 }}>
+          <Form.Item wrapperCol={{ offset: 3 }}>
             <Button type="primary" htmlType="submit">
               Submit
             </Button>

src/pages/CommercialService/CardDetail.tsx

@@ -80,7 +80,7 @@ const CardDetail = (props: any) => {
             <Row gutter={8} style={{ marginTop: 16 }}>
               <Col>Address:</Col>
               <Col>
-                {DataSave.zip_address} {DataSave.zip_code}
+                {DataSave.zip_address},{DataSave.zip_code}
               </Col>
             </Row>
 

src/pages/PropertyManagement/ChargeDetail.tsx

@@ -20,7 +20,6 @@ const ChargeDetail = (props: any) => {
 
   useEffect(() => {
     console.log(CurData);
-    console.log(stringSplit(CurData.billFileUrl, 'm/cash'));
     if (!CurData) {
       history.back();
     }

src/pages/PropertyManagement/ChargeManager.tsx

@@ -11,11 +11,27 @@ import { filterObj, urlEncode, filterObjbyTg } from '@/utils/method';
 
 import TitleSearch from '../../components/TitleSearch/TitleSearch';
 
-import ProTable, { ProColumns, TableDropdown, ActionType } from '@ant-design/pro-table';
+import ProTable, { ProColumns } from '@ant-design/pro-table';
 interface readyData {
   [key: string]: any;
 }
 
+interface GithubIssueItem {
+  url: string;
+  id: number;
+  number: number;
+  title: string;
+  labels: {
+    name: string;
+    color: string;
+  }[];
+  state: string;
+  comments: number;
+  created_at: string;
+  updated_at: string;
+  closed_at?: string;
+}
+
 let readyData = {
   tosOwnerName: '',
   communityName: '',
@@ -24,16 +40,9 @@ let readyData = {
 
 const ChargeManager = (props: any) => {
   const { dispatch, location, Data } = props;
-
-  const { formatMessage } = useIntl();
-  const username = formatMessage({ id: 'R.charge.username' });
-  const project = formatMessage({ id: 'R.charge.project' });
-  const unit = formatMessage({ id: 'R.charge.unit' });
-  const submissionTime = formatMessage({ id: 'R.charge.submissionTime' });
-  const actions = formatMessage({ id: 'R.charge.actions' });
-
   const [loading, setLoading] = useState(false);
 
+  // 详情页
   const goToDetail = (values: any) => {
     const permissionArr = JSON.parse(localStorage.getItem('permission') || '');
     if (permissionArr.indexOf('10') < 0) {
@@ -44,22 +53,24 @@ const ChargeManager = (props: any) => {
     history.push('/PropertyManagementDetail');
   };
 
+  // 存储详情页数据
   const getById = (values: any) => {
     dispatch({ type: 'PropertyManagement/getById', playload: values });
   };
-
+  // 获取数据
   const get = (values: any) => {
     dispatch({ type: 'PropertyManagement/get', playload: values });
   };
+
   // 进入页面先请求一次
   useEffect(() => {
     setLoading(true);
-    get({
-      communityName: '',
-      tosOwnerName: '',
-      pageNum: 1,
-    });
-  }, [1]);
+    readyData = {
+      ...readyData,
+      ...location.query,
+    };
+    get(readyData);
+  }, [location]);
 
   // 监听数据返回
   useEffect(() => {
@@ -71,29 +82,19 @@ const ChargeManager = (props: any) => {
   // 搜索按钮
   const TitleSearchContent = (comment: any) => {
     setLoading(true);
-    get({
-      communityName: comment.communityName,
-      tosOwnerName: comment.tosOwnerName,
-      pageNum: 1,
-    });
+    console.log(comment);
+    history.push(
+      location.pathname +
+        urlEncode(
+          filterObj({
+            ...comment,
+            pageNum: 1,
+          }),
+        ),
+    );
   };
 
-  interface GithubIssueItem {
-    url: string;
-    id: number;
-    number: number;
-    title: string;
-    labels: {
-      name: string;
-      color: string;
-    }[];
-    state: string;
-    comments: number;
-    created_at: string;
-    updated_at: string;
-    closed_at?: string;
-  }
-
+  // 列表数据
   const columns: ProColumns<GithubIssueItem>[] = [
     {
       title: 'User Name',
@@ -132,18 +133,21 @@ const ChargeManager = (props: any) => {
       pageNum: 1,
       tosOwnerName: '',
     };
-    get({
-      ...readyData,
-    });
+    history.push(location.pathname + urlEncode(filterObj(readyData)));
   };
 
   // 切换页码
   const changePage = (value: any) => {
-    readyData.pageNum = value.current;
     setLoading(true);
-    get({
-      ...readyData,
-    });
+    history.push(
+      location.pathname +
+        urlEncode(
+          filterObj({
+            ...readyData,
+            pageNum: value.current,
+          }),
+        ),
+    );
   };
 
   return (
@@ -153,31 +157,35 @@ const ChargeManager = (props: any) => {
         list={['TosOwnerName']}
         communitySelect={true}
         onSubmit={TitleSearchContent}
-        // defaultValue={{ ...readyData }}
+        defaultValue={readyData}
       />
 
-      <ProTable<GithubIssueItem>
-        columns={columns}
-        dataSource={Data !== null ? Data.list : []}
-        rowKey={'id'}
-        search={false}
-        loading={loading}
-        onChange={changePage}
-        pagination={{
-          pageSize: Data !== null ? Data.page.curPageSize : 0,
-          showSizeChanger: false,
-          total: Data !== null ? Data.page.totalRow : '',
-          current: Data !== null ? Data.page.currentPage : 1,
-        }}
-        options={{
-          density: true,
-          fullScreen: true,
-          reload: () => {
-            resetHandler();
-          },
-          setting: false,
-        }}
-      />
+      {Data !== null ? (
+        <ProTable<GithubIssueItem>
+          columns={columns}
+          dataSource={Data.list}
+          rowKey={'id'}
+          search={false}
+          loading={loading}
+          onChange={changePage}
+          pagination={{
+            pageSize: Data.page.curPageSize,
+            showSizeChanger: false,
+            total: Data.page.totalRow,
+            current: +readyData.pageNum,
+          }}
+          options={{
+            density: true,
+            fullScreen: true,
+            reload: () => {
+              resetHandler();
+            },
+            setting: false,
+          }}
+        />
+      ) : (
+        <></>
+      )}
     </div>
   );
 };

src/pages/UserManagement/ServiceProviderManagement/AccoutingContent.tsx

-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import styles from './AccoutingContent.less';
-import { Button, Modal, message } from 'antd';
+import { Button, Modal, message, Spin } from 'antd';
 
 import { connect } from 'umi';
 
@@ -17,6 +17,8 @@ const AccoutingContent = (props: {
 }) => {
   const { SaveChooseData, dispatch, Result, history } = props;
 
+  const [loading, setLoading] = useState(false);
+
   const goToReturn = () => {
     history.goBack();
   };
@@ -39,6 +41,7 @@ const AccoutingContent = (props: {
       icon: <ExclamationCircleOutlined />,
       content: 'Are you sure want to write off?',
       onOk() {
+        setLoading(true);
         dispatch({ type: 'ServiceProvider/DelServiceProvider', playload: { id } });
       },
       onCancel() {
@@ -50,6 +53,7 @@ const AccoutingContent = (props: {
   useEffect(() => {
     console.log(Result);
     if (Result !== null) {
+      setLoading(false);
       if (Result) {
         dispatch({ type: 'ServiceProvider/ResultClear' });
         message.success('Logout successful!', 3, () => {
@@ -62,59 +66,82 @@ const AccoutingContent = (props: {
     }
   }, [Result]);
 
+  const copy = () => {
+    const copyEle = document.querySelector('#copy'); // 获取要复制的节点
+    const range = document.createRange(); // 创造range
+    window.getSelection()?.removeAllRanges(); //清除页面中已有的selection
+    range.selectNode(copyEle as any); // 选中需要复制的节点
+    window.getSelection()?.addRange(range); // 执行选中元素
+    const copyStatus = document.execCommand('Copy'); // 执行copy操作
+    // 对成功与否定进行提示
+    if (copyStatus) {
+      message.success('Copy Success');
+    } else {
+      message.error('Copy Failure,Please copy manually');
+    }
+    window.getSelection()?.removeAllRanges(); //清除页面中已有的selection
+  };
+
   return (
     <div className={styles.base}>
-      {/* 头部组件 */}
-      <div className={styles.box}>
-        <div className={styles.item1}>Accounting information</div>
-        <button className={styles.item3} onClick={goToReturn}>
-          Back
-        </button>
-      </div>
-
-      {SaveChooseData.enable === 'Normal' ? (
-        <div className={styles.writeOff}>
-          <Button
-            icon={<PoweroffOutlined />}
-            type="primary"
-            danger
-            onClick={handleClick.bind(this, SaveChooseData.id)}
-          >
-            Write Off
+      <Spin spinning={loading}>
+        {/* 头部组件 */}
+        <div className={styles.box}>
+          <div className={styles.item1}>Accounting information</div>
+          <button className={styles.item3} onClick={goToReturn}>
+            Back
+          </button>
+        </div>
+
+        {SaveChooseData.enable === 'Normal' ? (
+          <div className={styles.writeOff}>
+            <Button
+              icon={<PoweroffOutlined />}
+              type="primary"
+              danger
+              onClick={handleClick.bind(this, SaveChooseData.id)}
+            >
+              Write Off
+            </Button>
+          </div>
+        ) : (
+          <div />
+        )}
+
+        <div className={styles.box1}>
+          <div className={styles.box1item1}>Company Name</div>
+          <div className={styles.box1item2}>{SaveChooseData.providerName}</div>
+          <div className={styles.box1item3}>Office Address</div>
+          <div className={styles.box1item4}>{SaveChooseData.providerAddress}</div>
+        </div>
+        <Line />
+        <div style={{ marginBottom: 28 }}>Service Community</div>
+        <ShowOptions list={SaveChooseData.serviceCommunityList} />
+        <div className={styles.box2}>
+          <div className={styles.box2item1}>Services Available</div>
+          <div className={styles.box2item2}>Accounting</div>
+        </div>
+
+        <div className={styles.box2}>
+          <div className={styles.box2item1}>Person In Charge</div>
+          <div className={styles.box2item2}>{SaveChooseData.contactName}</div>
+        </div>
+
+        <div className={styles.box3}>
+          <div className={styles.box3item1}>Contact Details</div>
+          <div className={styles.box3item2}>{SaveChooseData.contactPhone}</div>
+          <div className={styles.box3item3}>{SaveChooseData.contactEmail}</div>
+        </div>
+        <div className={styles.box4}>
+          <div className={styles.box3item1}>Upload the address</div>
+          <div className={styles.box3item2} id="copy">
+            http://bill.huahuico.com/
+          </div>
+          <Button size="small" className={styles.box3item3} onClick={copy.bind(this)}>
+            复制
           </Button>
         </div>
-      ) : (
-        <div />
-      )}
-
-      <div className={styles.box1}>
-        <div className={styles.box1item1}>Company Name</div>
-        <div className={styles.box1item2}>{SaveChooseData.providerName}</div>
-        <div className={styles.box1item3}>Office Address</div>
-        <div className={styles.box1item4}>{SaveChooseData.providerAddress}</div>
-      </div>
-      <Line />
-      <div style={{ marginBottom: 28 }}>Service Community</div>
-      <ShowOptions list={SaveChooseData.serviceCommunityList} />
-      <div className={styles.box2}>
-        <div className={styles.box2item1}>Services Available</div>
-        <div className={styles.box2item2}>Accounting</div>
-      </div>
-
-      <div className={styles.box2}>
-        <div className={styles.box2item1}>Person In Charge</div>
-        <div className={styles.box2item2}>{SaveChooseData.contactName}</div>
-      </div>
-
-      <div className={styles.box3}>
-        <div className={styles.box3item1}>Contact Details</div>
-        <div className={styles.box3item2}>{SaveChooseData.contactPhone}</div>
-        <div className={styles.box3item3}>{SaveChooseData.contactEmail}</div>
-      </div>
-      <div className={styles.box4}>
-        <div className={styles.box3item1}>Upload the address</div>
-        <div className={styles.box3item2}>http://bill.huahuico.com/</div>
-      </div>
+      </Spin>
     </div>
   );
 };

src/pages/UserManagement/ServiceProviderManagement/Detail.tsx

 import React, { useState, useEffect } from 'react';
 import styles from './Detail.less';
-import { Button, Table, Space, message, Modal } from 'antd';
+import { Button, Table, Space, message, Modal, Spin } from 'antd';
 
 import { Link, useIntl, connect, Dispatch, history } from 'umi';
 
@@ -13,6 +13,8 @@ const { confirm } = Modal;
 const Detail = (props: any) => {
   const { dispatch, Data, CurDataFollow, location, SaveChooseData, Result } = props;
 
+  const [loading, setLoding] = useState(false);
+
   const TosSecurityGuarderGet = (values: any) => {
     dispatch({ type: 'ServiceProvider/TosSecurityGuarderGet', playload: values });
   };
@@ -66,6 +68,7 @@ const Detail = (props: any) => {
       icon: <ExclamationCircleOutlined />,
       content: 'Are you sure want to write off?',
       onOk() {
+        setLoding(true);
         dispatch({ type: 'ServiceProvider/DelServiceProvider', playload: { id } });
       },
       onCancel() {
@@ -77,9 +80,10 @@ const Detail = (props: any) => {
   useEffect(() => {
     console.log(Result);
     if (Result !== null) {
+      setLoding(false);
       if (Result) {
         dispatch({ type: 'ServiceProvider/ResultClear' });
-        message.success('Logout successful!', 3, () => {
+        message.success('Logout successful!', 2, () => {
           history.goBack();
         });
       } else {
@@ -91,80 +95,83 @@ const Detail = (props: any) => {
 
   return (
     <div className={styles.base}>
-      {SaveChooseData !== null ? (
-        <>
-          <TitleBack title="Service Provider Details" />
-          {SaveChooseData.enable === 'Normal' ? (
-            <div className={styles.writeOff}>
-              <Button
-                icon={<PoweroffOutlined />}
-                type="primary"
-                danger
-                onClick={handleClick.bind(this, SaveChooseData.id)}
-              >
-                Write Off
-              </Button>
-            </div>
-          ) : (
-            <div />
-          )}
-          <div className={styles.bigbox}>
-            <div className={styles.box0}>
-              {/* <div className={styles.box0item1}></div> */}
-              {/* <div className={styles.box0item2}>{SaveChooseData.serviceCommunityList}</div> */}
-            </div>
-            <div className={styles.box1}>
-              <div className={styles.box1item1}>Company Name</div>
-              <div className={styles.box1item2}>{SaveChooseData.providerName}</div>
-            </div>
+      <Spin spinning={loading}>
+        {SaveChooseData !== null ? (
+          <>
+            <TitleBack title="Service Provider Details" />
+            {SaveChooseData.enable === 'Normal' ? (
+              <div className={styles.writeOff}>
+                <Button
+                  icon={<PoweroffOutlined />}
+                  type="primary"
+                  danger
+                  onClick={handleClick.bind(this, SaveChooseData.id)}
+                >
+                  Write Off
+                </Button>
+              </div>
+            ) : (
+              <div />
+            )}
+            <div className={styles.bigbox}>
+              <div className={styles.box0}>
+                {/* <div className={styles.box0item1}></div> */}
+                {/* <div className={styles.box0item2}>{SaveChooseData.serviceCommunityList}</div> */}
+              </div>
+              <div className={styles.box1}>
+                <div className={styles.box1item1}>Company Name</div>
+                <div className={styles.box1item2}>{SaveChooseData.providerName}</div>
+              </div>
 
-            <div className={styles.box2}>
-              <div className={styles.box2item1}>Office Address</div>
-              <div className={styles.box2item2}>{SaveChooseData.providerAddress}</div>
-            </div>
+              <div className={styles.box2}>
+                <div className={styles.box2item1}>Office Address</div>
+                <div className={styles.box2item2}>{SaveChooseData.providerAddress}</div>
+              </div>
 
-            <div className={styles.box3}>
-              <div className={styles.box3item1}>Person In Charge</div>
-              <div className={styles.box3item2}>{SaveChooseData.contactName}</div>
-            </div>
+              <div className={styles.box3}>
+                <div className={styles.box3item1}>Person In Charge</div>
+                <div className={styles.box3item2}>{SaveChooseData.contactName}</div>
+              </div>
 
-            <div className={styles.box4}>
-              <div className={styles.box4item1}>Contact Details</div>
-              <div className={styles.box4item2}>
-                {SaveChooseData.contactPhone} &nbsp;&nbsp;&nbsp;&nbsp; {SaveChooseData.contactEmail}
+              <div className={styles.box4}>
+                <div className={styles.box4item1}>Contact Details</div>
+                <div className={styles.box4item2}>
+                  {SaveChooseData.contactPhone} &nbsp;&nbsp;&nbsp;&nbsp;{' '}
+                  {SaveChooseData.contactEmail}
+                </div>
               </div>
-            </div>
 
-            <div className={styles.box5}>
-              <div className={styles.box5item1}>Services Available</div>
-              <div className={styles.box5item2}>{SaveChooseData.serviceScope}</div>
+              <div className={styles.box5}>
+                <div className={styles.box5item1}>Services Available</div>
+                <div className={styles.box5item2}>{SaveChooseData.serviceScope}</div>
+              </div>
+
+              <div className={styles.box6}>
+                <div className={styles.box1item1}>Service Community</div>
+              </div>
+              {SaveChooseData.serviceCommunityList != null ? (
+                <ShowOptions
+                  list={SaveChooseData.serviceCommunityList}
+                  defaultValue={'Put It Away'}
+                />
+              ) : (
+                <></>
+              )}
             </div>
 
-            <div className={styles.box6}>
-              <div className={styles.box1item1}>Service Community</div>
+            <div className={styles.box7}>
+              <div className={styles.box1item1}>Security Guard Account</div>
             </div>
-            {SaveChooseData.serviceCommunityList != null ? (
-              <ShowOptions
-                list={SaveChooseData.serviceCommunityList}
-                defaultValue={'Put It Away'}
-              />
-            ) : (
-              <></>
-            )}
-          </div>
-
-          <div className={styles.box7}>
-            <div className={styles.box1item1}>Security Guard Account</div>
-          </div>
-          <Table
-            rowKey={'id'}
-            style={{ marginTop: 16 }}
-            dataSource={CurDataFollow}
-            columns={columns}
-            pagination={pagination}
-          />
-        </>
-      ) : null}
+            <Table
+              rowKey={'id'}
+              style={{ marginTop: 16 }}
+              dataSource={CurDataFollow}
+              columns={columns}
+              pagination={pagination}
+            />
+          </>
+        ) : null}
+      </Spin>
     </div>
   );
 };

src/pages/UserManagement/ServiceProviderManagement/Services.tsx

@@ -16,8 +16,8 @@ const Services = (props: any) => {
   const formRef = useRef(null as any);
 
   useEffect(() => {
-    RA(43, { serviceName: '' }, module, dispatch);
-  }, [location]);
+    RA(43, {}, module, dispatch);
+  }, []);
 
   useEffect(() => {
     if (DataServices != null) {
@@ -26,10 +26,14 @@ const Services = (props: any) => {
         return v['serviceName'];
       });
       console.log(tmp);
+      tmp = tmp.filter((v: string) => {
+        return v !== 'Accountant';
+      });
       formRef.current['setFieldsValue']({ serviceName: tmp });
     }
   }, [DataServices]);
 
+  // 提交服务范围
   const onFinish = (values: any) => {
     console.log(values);
     // RA(
@@ -42,10 +46,15 @@ const Services = (props: any) => {
     //   dispatch,
     // );
   };
+
+  // 添加服务范围
   const Add = (values: any) => {
     console.log(values);
   };
+
+  // 删除服务范围
   const Remove = (values: any) => {};
+
   return (
     <div className={styles.base}>
       <TitleBack title={'Services Available Management'}></TitleBack>
@@ -57,7 +66,11 @@ const Services = (props: any) => {
           </Form.Item>
         ) : null}
         <Line />
-        {/* <Form.Item ><Button type="primary" htmlType="submit">Submit</Button></Form.Item> */}
+        <Form.Item>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
+        </Form.Item>
       </Form>
     </div>
   );

src/utils/params.ts

@@ -106,21 +106,8 @@ export const requestList = [
       permissionArray: ['2', '1', '3', '4'],
     },
   ],
-  [
-    '/tos/tosServiceScope/get',
-    '43 获取服务范围',
-    {
-      serviceName: '',
-    },
-  ],
-  [
-    '/tos/tosServiceScope/save',
-    '44 添加服务范围',
-    {
-      id: '5',
-      serviceName: '律政',
-    },
-  ],
+  ['/tos/tosServiceScope/get', '43 获取服务范围'],
+  ['/tos/tosServiceScope/save', '44 添加服务范围'],
   [
     '/tos/user/getAllInfrom',
     '45 获取后台列表',