物业服务新增图片上传时阻止提交

src/components/PictureOptions/PictureOptionsRow.tsx

@@ -15,14 +15,15 @@ function getBase64(file: File) {
 }
 
 import { getUrlPicName } from '../../utils/string';
+import { connect } from 'umi';
 const PictureOptionsRow = (props: any) => {
-  const { value, onChange, limitNums, imgs } = props;
+  const { value, onChange, limitNums, imgs, loadding, dispatch } = props;
   const [fileList, setFileList] = useState([] as any);
   const [previewVisible, setPreviewVisible] = useState(false);
   const [previewImage, setPreviewImage] = useState('');
   const [limitNum, setLimitNum] = useState(5);
   const handleCancel = () => setPreviewVisible(false);
-  const [imgLoad, setimgLoad] = useState(false); //图片上传 load状态
+  // const [imgLoad, setimgLoad] = useState(false); //图片上传 load状态
 
   useEffect(() => {
     if (limitNums != null) {
@@ -63,7 +64,7 @@ const PictureOptionsRow = (props: any) => {
   // 加载logo
   const uploadButton = (
     <div>
-      {imgLoad ? <LoadingOutlined /> : <PlusOutlined />}
+      {loadding ? <LoadingOutlined /> : <PlusOutlined />}
       <div className="ant-upload-text">Upload</div>
     </div>
   );
@@ -76,11 +77,20 @@ const PictureOptionsRow = (props: any) => {
     setPreviewVisible(true);
   };
 
+  const setLoadding = (value: boolean) => {
+    dispatch({
+      type: 'CommunityService/setLoadding',
+      payload: {
+        loadding: value,
+      },
+    });
+  };
+
   const handleChange = ({ file, fileList }: any) => {
     // 给传递的附加名字
     // props.data.fileName = fileList[0].name;
 
-    file.status === 'uploading' ? setimgLoad(true) : setimgLoad(false);
+    file.status === 'uploading' ? setLoadding(true) : setLoadding(false);
 
     if (file.status == 'done') {
       let tmp = fileList.filter((file: any) => {
@@ -159,4 +169,11 @@ const PictureOptionsRow = (props: any) => {
   );
 };
 
-export default PictureOptionsRow;
+function mapStateToProps(state: { CommunityService: { loadding: boolean } }) {
+  const { loadding } = state.CommunityService;
+  return {
+    loadding,
+  };
+}
+
+export default connect(mapStateToProps)(PictureOptionsRow);

src/models/CommunityManagement/CommunityService.ts

@@ -18,6 +18,7 @@ export default {
     Data8: null,
     Result: null,
     DataSaveDetail: null,
+    loadding: false,
   },
 
   reducers: {
@@ -45,6 +46,9 @@ export default {
     returnDataSaveDetail(state: object, { DataSaveDetail }: any) {
       return { ...state, DataSaveDetail };
     },
+    returnLoadding(state: object, { loadding }: { loadding: boolean }) {
+      return { ...state, loadding }
+    }
   },
 
   effects: {
@@ -199,5 +203,9 @@ export default {
       let Data7 = null;
       yield put({ type: 'returnPage7', Data7 });
     },
+
+    *setLoadding({ payload }: { payload: { loadding: boolean } }, { put }: any) {
+      yield put({ type: 'returnLoadding', ...payload });
+    },
   },
 };

src/pages/CommercialService/Detail.tsx

@@ -16,7 +16,7 @@ const treatStatus = ['Pending', 'Processed'];
 const Detail = (props: any) => {
   const [editorFlag, setEditorFlag] = useState(true);
 
-  const { dispatch, location, CurDataDetail } = props;
+  const { dispatch, location, CurDataDetail, loadding } = props;
   const fromRef = useRef(null) as any;
   const RA = (index: any, values: any) => {
     dispatch({ type: 'CommunityService/RA', playload: { index: index, body: values } });
@@ -232,7 +232,7 @@ const Detail = (props: any) => {
                       <Col span={3}></Col>
                       <Col>
                         <Form.Item>
-                          <Button type="primary" htmlType="submit">
+                          <Button disabled={loadding} type="primary" htmlType="submit">
                             Submit
                           </Button>
                         </Form.Item>
@@ -252,9 +252,10 @@ const Detail = (props: any) => {
 };
 
 function mapStateToProps(state: any) {
-  const { CurDataDetail } = state.CommunityService;
+  const { CurDataDetail, loadding } = state.CommunityService;
   return {
     CurDataDetail,
+    loadding,
   };
 }
 export default connect(mapStateToProps)(Detail);