设施防止多次点击

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

src/components/Facilitys/Facilitys.tsx

@@ -30,6 +30,10 @@ const Facilitys = (props: any) => {
   //
   const [idKey, setidKey] = useState(10001);
 
+  // 储存上传状态
+  const [loads, setLoads] = useState([] as any);
+  const [loadsId, setLoadsId] = useState(null as any);
+
   // 传递给后台加 key
   const updetaTow = (key: any) => {
     let data = updata;
@@ -52,6 +56,8 @@ const Facilitys = (props: any) => {
     setpreviewVisible(false);
   };
 
+  // console.log(FacilitysList);
+
   // 上传属性
   const uploadProps: any = {
     listType: 'picture-card',
@@ -80,10 +86,13 @@ const Facilitys = (props: any) => {
 
         // 存储到mode里面去
         dispatch({ type: module + '/genxin', list });
-
-        console.log(list);
+        loads[loadsId] = false;
+        setLoads([...loads]);
       } else if (info.file.status === 'error') {
         message.error(`${info.file.name} file upload failed.`);
+      } else {
+        loads[loadsId] = true;
+        setLoads([...loads]);
       }
     },
   };
@@ -93,7 +102,7 @@ const Facilitys = (props: any) => {
     setidKey(idKey + 1);
     let list = FacilitysList;
     let adds = {
-      id: '-1',
+      id: '12123',
       fileList: [],
       name: '',
       disabled: true,
@@ -133,17 +142,25 @@ const Facilitys = (props: any) => {
 
     list[key].fileList = [];
 
+    //loading 上传状态
+    let arr = loads;
+    loads[key] = false;
+    setLoadsId(key);
+    // console.log(arr);
+    setLoads([...arr]);
+
     // 存储到mode里面去
     dispatch({ type: module + '/genxin', list });
   };
 
-  // 新增按钮
-  const uploadButton = (
-    <div>
-      <PlusOutlined />
-      <div className="ant-upload-text">Upload</div>
-    </div>
-  );
+  // 点击了新增按钮
+  const ossPend = (i: any) => {
+    // console.log(i);
+    let arr = loads;
+    loads[i] = false;
+    setLoadsId(i);
+    setLoads([...arr]);
+  };
 
   // 输入框内容
   const monitor = (e: any, index: any) => {
@@ -174,8 +191,14 @@ const Facilitys = (props: any) => {
                       onRemove={() => {
                         deleteImgs(index, item.id);
                       }} //移除
+                      onClick={() => ossPend(index)}
                     >
-                      {FacilitysList[index].fileList.length > 0 ? null : uploadButton}
+                      {FacilitysList[index].fileList.length > 0 || loads[index] ? null : (
+                        <div>
+                          <PlusOutlined />
+                          <div className="ant-upload-text">Upload</div>
+                        </div>
+                      )}
                     </Upload>
 
                     <div className={'Facility'} key={item.id}>

src/components/PictureOptions/PictureOptionsRow.tsx

@@ -169,7 +169,7 @@ const PictureOptionsRow = (props: any) => {
         onChange={handleChange} // 点击上传
         disabled={props.over}
       >
-        {fileList.length >= limitNum || props.over ? null : props.disabled ? null : uploadButton}
+        {fileList.length >= limitNum || props.overs ? null : props.disabled ? null : uploadButton}
       </Upload>
       <Modal
         title="Preview"

src/components/SelectOptions/index.jsx

@@ -93,6 +93,7 @@ class SelectOptions extends React.PureComponent {
   componentWillReceiveProps(nextProps) {
     // 如果存在更新 就拿取最新的选中小区值
     // 判断是不是props 的最新值  否则每次点击都要更新
+    // console.log(nextProps.checklist);
     if (nextProps.checklist !== this.props.checklist) {
       this.setState({
         checkedList: nextProps.checklist,
@@ -101,6 +102,7 @@ class SelectOptions extends React.PureComponent {
   }
 
   componentDidUpdate(prevProps) {
+    // console.log(prevProps.checklist);
     if (this.props.show != null) {
       if (this.props.show == this.state.flag) {
         // console.log(this.props.show);

src/components/TitleSearch/TitleSearch copy.tsx

@@ -6,10 +6,11 @@ import styles from './index.less';
 import BackButton from '../BackButton/BackButton';
 import TitleGet from '../TitleGet/TitleGet';
 
+import { SearchOutlined } from '@ant-design/icons';
 import { Input, Row, Col, Form, Select, Button, DatePicker } from 'antd';
 const { Option } = Select;
 
-import SelectOptions from '../../components/SelectOptions/index';
+import SelectOptions from '../SelectOptions/Tow';
 import { gray } from 'chalk';
 import SearchOptionsCommnity from '../SearchOptions/SearchOptionsCommnity';
 
@@ -174,7 +175,7 @@ const TitleSearch = (props: any) => {
                 htmlType="submit"
                 style={{ backgroundColor: '#e7f4ff', color: 'rgba(24,144,255,1)' }}
               >
-                Search
+                <SearchOutlined /> Search
               </Button>
             </Form.Item>
           </>

src/layouts/SecurityLayout copy.tsx

-import React from 'react';
-import { PageLoading } from '@ant-design/pro-layout';
-import { Redirect, connect, ConnectProps, StateType, history, Link } from 'umi';
-import { stringify } from 'querystring';
-import { ConnectState } from '@/models/connect';
-import { CurrentUser } from '@/models/user';
-import { getCookie } from '@/utils/method';
-import { message } from 'antd';
-import moment from 'moment';
-import { logOut } from '@/utils/log';
-
-interface SecurityLayoutProps extends ConnectProps {
-  loading?: boolean;
-  currentUser?: CurrentUser;
-  login?: StateType;
-}
-
-interface SecurityLayoutState {
-  token: String;
-  isReady: boolean;
-}
-
-class SecurityLayout extends React.Component<SecurityLayoutProps, SecurityLayoutState> {
-  state: SecurityLayoutState = {
-    isReady: false,
-    token: '',
-  };
-
-  render() {
-    const { children, loading } = this.props;
-    // You can replace it to your authentication rule (such as check token exists)
-    // 你可以把它替换成你自己的登录认证规则（比如判断 token 是否存在）
-
-    const perList = [
-      { key: '1', path: '/UserManagement/LIFEUserManagement' },
-      { key: '18', path: '/UserManagement/ServiceProviderManagement' },
-      { key: '15', path: '/PropertyManagement' },
-      { key: '17', path: '/CommercialService/CommunityMaintenance' },
-      { key: '20', path: '/CommercialService/OwnerComplaints' },
-      { key: '23', path: '/CommercialService/ProblemFeedback' },
-      { key: '26', path: '/CommercialService/RenovationApplication' },
-      { key: '29', path: '/CommercialService/AccessCardApplication' },
-      { key: '33', path: '/CommercialService/ReportOnline' },
-      { key: '36', path: '/CommercialService/ShelfLifeService' },
-      // cellee 负责部分
-      // 合同
-      { key: '39', path: '/ContractManagement' },
-      { key: '40', path: '/ContractManagement/Detail' },
-      { key: '41', path: '/ContractManagement/Add' },
-      { key: '42', path: '/ContractManagement/Edit' },
-      // 小区
-      { path: '/CommunityManagement/CellList', title: '小区列表', key: '44' },
-      { path: '/CommunityManagement/CellList/Detail', title: '查看小区', key: '44' },
-      { path: '/CommunityManagement/CellList/Add', title: '编辑小区', key: '45' },
-      { path: '/CommunityManagement/CellList/Add', title: '添加小区', key: '46' },
-      // 小区公告
-      { path: '/CommunityManagement/CommunityAnnouncement', title: '小区公告', key: '48' },
-      { path: '/CommunityManagement/CommunityAnnouncement/Detail', title: '查看公告', key: '49' },
-      { path: '/CommunityManagement/CommunityAnnouncement/Edit', title: '编辑公告', key: '50' },
-      { path: '/CommunityManagement/CommunityAnnouncement/Add', title: '添加公告', key: '51' },
-      // 小区设施
-      { path: '/CommunityManagement/FacilityBookings', title: '小区设施', key: '52' },
-      { path: '/CommunityManagement/FacilityBookings/Detail', title: '查看预约设施', key: '53' },
-      { path: '/CommunityManagement/FacilityBookings/Booking', title: '添加预约设施', key: '54' },
-      {
-        path: '/CommunityManagement/FacilityBookings/FacilityApply',
-        title: '添加预约设施',
-        key: '54',
-      },
-      {
-        path: '/CommunityManagement/FacilityBookings/FacilityDetail',
-        title: '查看设施',
-        key: '57',
-      },
-      { path: '/CommunityManagement/FacilityBookings/FacilityEdit', title: '编辑设施', key: '58' },
-      { path: '/CommunityManagement/FacilityBookings/Adding', title: '添加设施', key: '59' },
-      // 访客记录
-      { path: '/CommunityManagement/VisitorRecord', title: '访客记录', key: '60' },
-      // 账号管理
-      { path: '/AccountManagement/account', title: '账号管理', key: '62' },
-      { path: '/AccountManagement/account/Detail', title: '查看账号', key: '63' },
-      { path: '/AccountManagement/account/edit', title: '编辑账号', key: '64' },
-      { path: '/AccountManagement/account/Add', title: '添加账号', key: '65' },
-      //报告员
-      { path: '/AccountManagement/service', title: '报告员', key: '71' },
-    ];
-
-    // 用户重新打开需要重新登录
-    let time = localStorage.getItem('loginTime');
-    const tokenLogin = time ? JSON.parse(time) : '';
-
-    if (history.location.pathname == '/') {
-      // const isLogin = currentUser && currentUser.name;//isLogin为关键点
-      var isLogin = false;
-      if (getCookie('token').length != 0) {
-        isLogin = true;
-      }
-      const queryString = stringify({
-        redirect: window.location.href,
-      });
-      if (!isLogin && loading) {
-        return <PageLoading />;
-      }
-      if (!isLogin && window.location.pathname !== '/user/login') {
-        return <Redirect to={`/user/login?${queryString}`} />;
-      }
-
-      return children;
-    } else if (tokenLogin && moment().diff(moment(tokenLogin), 'minutes') < 30) {
-      // 刷新时间
-      localStorage.setItem('loginTime', JSON.stringify(moment().format('YYYY-MM-DD HH:mm:ss')));
-
-      // 在判断权限
-      const permission = JSON.parse(localStorage.getItem('permission') || '[]');
-
-      let perObj = perList.filter((obj) => {
-        return obj.path === location.pathname;
-      });
-
-      if (perObj.length !== 0) {
-        if (permission.indexOf(perObj[0].key) < 0) {
-          history.push('/403');
-        }
-      }
-
-      return children;
-    } else {
-      // 退出登录
-      message.warning('Expired login !');
-      setTimeout(function () {
-        logOut();
-      }, 1000);
-      return false;
-    }
-  }
-}
-
-export default connect(({ user, loading, login }: ConnectState) => ({
-  currentUser: user.currentUser,
-  loading: loading.models.user,
-  login: login,
-}))(SecurityLayout);

src/layouts/SecurityLayout.tsx

@@ -80,6 +80,8 @@ class SecurityLayout extends React.Component<SecurityLayoutProps, SecurityLayout
       { path: '/AccountManagement/account/Detail', title: '查看账号', key: '63' },
       { path: '/AccountManagement/account/edit', title: '编辑账号', key: '64' },
       { path: '/AccountManagement/account/Add', title: '添加账号', key: '65' },
+      //报告员
+      { path: '/AccountManagement/service', title: '报告员', key: '71' },
     ];
 
     // 用户重新打开需要重新登录

src/pages/AccountManagement/Service/serviceDetail.tsx

 /*
  * @Author: your name
  * @Date: 2021-03-02 14:39:40
- * @LastEditTime: 2021-03-04 11:07:39
+ * @LastEditTime: 2021-03-05 14:49:14
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \tostumi\src\pages\AccountManagement\Service\serviceEdit.tsx
@@ -133,6 +133,7 @@ const service = (props: any) => {
                 limitNums={10}
                 imgs={ImageSrc}
                 over={true}
+                overs={true}
               />
             </Form.Item>
             <hr></hr>