修复切换行政区域的报错问题

src/pages/ProjectFiles/file.tsx

@@ -1,10 +1,11 @@
 import { CloseCircleOutlined, MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Card, Col, Form, Popover, Row, message, Divider, Select, Input, Upload } from 'antd';
+import type { FormInstance } from 'antd';
 import { history, useLocation } from 'umi';
 import type { Location } from 'umi';
 
 import type { FC } from 'react';
-import React, { useState, Fragment } from 'react';
+import React, { useState, Fragment, useRef } from 'react';
 import ProForm, {
   ProFormSelect,
   ProFormText,
@@ -112,7 +113,7 @@ const ProjectFileCreate: FC<Record<string, any>> = () => {
   const readOnly = query?.action === 'view';
   const id = query?.id; // 文件 id
 
-  const [regionDictType, setRegionDictType] = useState<string>('1');
+  const formRef = useRef<FormInstance>();
   const [error, setError] = useState<ErrorField[]>([]);
   const getErrorInfo = (errors: ErrorField[]) => {
     const errorCount = errors.filter((item) => item.errors.length > 0).length;
@@ -179,6 +180,7 @@ const ProjectFileCreate: FC<Record<string, any>> = () => {
       <ProForm
         layout="horizontal"
         requiredMark
+        formRef={formRef}
         submitter={{
           searchConfig: {
             submitText: '建档完成',
@@ -354,10 +356,12 @@ const ProjectFileCreate: FC<Record<string, any>> = () => {
                   rules={[{ required: true, message: '请选择项目所在行政区域类型' }]}
                   options={regionDictTypeOptions}
                   fieldProps={{
-                    onChange: (e) => {
-                      setRegionDictType(e.target.value);
-                    },
                     disabled: readOnly,
+                    onChange: () => {
+                      formRef.current?.setFieldsValue({
+                        regionDict: undefined,
+                      });
+                    },
                   }}
                 />
               </Col>
@@ -385,47 +389,56 @@ const ProjectFileCreate: FC<Record<string, any>> = () => {
                 </ProFormDependency>
               </Col>
               <Col span={12}>
-                {regionDictType === '1' ? (
+                <ProFormDependency name={['regionDictType']}>
-                  <ProForm.Item
+                  {({ regionDictType }, ...rest) => {
-                    name="regionDict"
+                    console.log(rest);
-                    label={<span>&#8203;</span>}
+                    return (
-                    required={false}
+                      <>
-                    colon={false}
+                        {regionDictType === '1' ? (
-                    rules={[
+                          <ProForm.Item
-                      {
+                            name="regionDict"
-                        required: true,
+                            label={<span>&#8203;</span>}
-                        validator: (_, value) => {
+                            required={false}
-                          if (!value || !value.province || !value.city || !value.district) {
+                            colon={false}
-                            return Promise.reject(new Error('请完整选择省市区'));
+                            rules={[
-                          }
+                              {
-                          return Promise.resolve();
+                                required: true,
-                        }
+                                validator: (_, value) => {
-                      }
+                                  if (!value || !value.province || !value.city || !value.district) {
-                    ]}
+                                    return Promise.reject(new Error('请完整选择省市区'));
-                  >
+                                  }
-                    <CitySelect
+                                  return Promise.resolve();
-                      placeholder={{
+                                }
-                        province: '请选择省份',
+                              }
-                        city: '请选择城市',
+                            ]}
-                        district: '请选择区域',
+                          >
-                      }}
+                            <CitySelect
-                      disabled={readOnly}
+                              placeholder={{
-                    />
+                                province: '请选择省份',
-                  </ProForm.Item>
+                                city: '请选择城市',
-                ) : (
+                                district: '请选择区域',
-                  <ProFormSelect
+                              }}
-                    name="regionDict"
+                              disabled={readOnly}
-                    label={<span>&#8203;</span>}
+                            />
-                    required={false}
+                          </ProForm.Item>
-                    colon={false}
+                        ) : (
-                    rules={[{ required: true, message: '请选择项目所在行政区域' }]}
+                          <ProFormSelect
-                    options={regionOutsideOptions}
+                            name="regionDict"
-                    placeholder="请选择行政区域"
+                            label={<span>&#8203;</span>}
-                    fieldProps={{
+                            required={false}
-                      disabled: readOnly,
+                            colon={false}
-                    }}
+                            rules={[{ required: true, message: '请选择项目所在行政区域' }]}
-                  />
+                            options={regionOutsideOptions}
-                )}
+                            placeholder="请选择行政区域"
+                            fieldProps={{
+                              disabled: readOnly,
+                            }}
+                          />
+                        )}
+                      </>
+                    );
+                  }}
+                </ProFormDependency>
               </Col>
             </Row>
             <Row gutter={16}>