动态更新面包屑导航

src/pages/supplierEvaluateManage/supplierTemplateManage/supplierTemplateManageAdd.tsx

@@ -16,7 +16,9 @@ import {
   Spin,
   Modal,
 } from 'antd';
-import { history, useLocation, useIntl } from 'umi';
+import { history, useLocation, useIntl, connect } from 'umi';
+import type { Dispatch,ConnectProps } from 'umi';
+import type { BreadcrumbState } from '@/models/breadcrumb';
 import { ArrowLeftOutlined, SaveOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 import EvaluateTemplateTable from '@/components/EvaluateTemplateTable';
 import CategorySelector from '@/components/CategorySelector';
@@ -50,6 +52,11 @@ interface FormValues {
   [key: string]: any;
 }
 
+interface PageProps extends ConnectProps {
+  breadcrumb: BreadcrumbState; // dva model状态
+  dispatch: Dispatch; // dva dispatch方法
+}
+
 interface LocationState {
   isEdit?: boolean;
   editData?: SupplierTemplateManage.TemplateItem;
@@ -57,7 +64,7 @@ interface LocationState {
 
 const { Title } = Typography;
 
-const SupplierTemplateManageAdd: React.FC = () => {
+const SupplierTemplateManageAdd: React.FC<PageProps> = ({ breadcrumb, dispatch }) => {
   const intl = useIntl();
   const [form] = Form.useForm<FormValues>();
   const [loading, setLoading] = useState<boolean>(false);
@@ -79,7 +86,12 @@ const SupplierTemplateManageAdd: React.FC = () => {
     try {
       const res = await getAllTemplates();
       if (res.success && res.data) {
-        setTemplateList(res.data);
+        // 如果是修改,需要过滤掉自己
+        if (location.state?.editData) {
+          setTemplateList(res.data.filter((template: SupplierTemplateManage.TemplateItem) => template.id !== location.state.editData?.id));
+        } else {
+          setTemplateList(res.data);
+        }
       } else {
         message.error(intl.formatMessage({ id: 'supplierTemplateManage.message.getTemplateListFailed' }) || res.message);
       }
@@ -122,6 +134,19 @@ const SupplierTemplateManageAdd: React.FC = () => {
       setLoading(false);
     }
   };
+  useEffect(() => {
+    if (location.state?.editData?.id && dispatch) {
+      dispatch({
+        type: 'breadcrumb/updateBreadcrumbName',
+        payload: intl.formatMessage({ id: "supplierTemplateManage.edit.title" }),
+      });
+    }
+    return () => {
+      dispatch({
+        type: 'breadcrumb/resetBreadcrumb',
+      });
+    };
+  }, [dispatch, intl, location]);
   // 初始化编辑数据
   useEffect(() => {
     // 获取所有模板列表
@@ -450,4 +475,9 @@ const SupplierTemplateManageAdd: React.FC = () => {
   );
 };
 
-export default SupplierTemplateManageAdd;
+
+// export default SupplierTemplateManageAdd;
+// 将dva model中的状态映射到组件props
+export default connect(({ breadcrumb }: { breadcrumb: BreadcrumbState }) => ({
+  breadcrumb,
+}))(SupplierTemplateManageAdd);