动态更新面包屑导航

2025-07-03 14:40:22 +08:00
parent c8b28a4a29
commit 7114466b26
10 changed files with 586 additions and 511 deletions
--- a/src/pages/supplierAnnualManage/supplierAnnualTaskManage/supplierAnnualTaskManageAdd.tsx
+++ b/src/pages/supplierAnnualManage/supplierAnnualTaskManage/supplierAnnualTaskManageAdd.tsx
@ -8,6 +8,7 @@ import SupplierSelectStep from './components/SupplierSelectStep';
 import EvaluatorSelectStep from './components/EvaluatorSelectStep';
 import styles from './supplierAnnualTaskManageAdd.less';
 import type { SupplierTaskModelState } from '@/models/supplierAnnualTaskManage';
+import type { BreadcrumbState } from '@/models/breadcrumb';

 const { Step } = Steps;

@ -38,7 +39,7 @@ interface PageProps extends ConnectProps {
 * 供应商任务管理添加/编辑组件
 * 使用步骤式表单引导用户完成添加或编辑任务的流程
 */
-const SupplierTaskManageAdd: React.FC<PageProps> = ({ supplierAnnualTaskManage, dispatch }) => {
+const SupplierTaskManageAdd: React.FC<PageProps> = ({ supplierAnnualTaskManage, dispatch, breadcrumb }) => {
  const intl = useIntl();
  // 获取dva model中的状态
  const { currentStep, loading, detailLoading } = supplierAnnualTaskManage;
@ -85,14 +86,23 @@ const SupplierTaskManageAdd: React.FC<PageProps> = ({ supplierAnnualTaskManage,
   * 组件卸载时重置状态
   */
  useEffect(() => {
+    if (isEditMode && dispatch) {
+      dispatch({
+        type: 'breadcrumb/updateBreadcrumbName',
+        payload: intl.formatMessage({ id: 'supplierAnnualTaskManage.edit.title' }),
+      });
+    }
    return () => {
      if (dispatch) {
        dispatch({
          type: 'supplierAnnualTaskManage/resetState',
        });
+        dispatch({
+          type: 'breadcrumb/resetBreadcrumb',
+        });
      }
    };
-  }, [dispatch]);
+  }, [dispatch, isEditMode]);

  // 步骤配置，定义每个步骤的标题、描述和内容组件
  const steps = [
@ -274,7 +284,8 @@ const SupplierTaskManageAdd: React.FC<PageProps> = ({ supplierAnnualTaskManage,

 // 将dva model中的状态映射到组件props
 export default connect(
-  ({ supplierAnnualTaskManage }: { supplierAnnualTaskManage: SupplierTaskModelState }) => ({
+  ({ supplierAnnualTaskManage, breadcrumb }: { supplierAnnualTaskManage: SupplierTaskModelState, breadcrumb: BreadcrumbState }) => ({
    supplierAnnualTaskManage,
+    breadcrumb,
  }),
 )(SupplierTaskManageAdd);
--- a/src/pages/supplierAnnualManage/supplierAnnualTemplateManage/supplierAnnualTemplateManageAdd.tsx
+++ b/src/pages/supplierAnnualManage/supplierAnnualTemplateManage/supplierAnnualTemplateManageAdd.tsx
@ -17,23 +17,17 @@ import {
  Popconfirm,
  Modal,
 } from 'antd';
-import { history, useLocation, useIntl } from 'umi';
-import {
-  ArrowLeftOutlined,
-  SaveOutlined,
-  PlusOutlined,
-  DeleteOutlined,
-} from '@ant-design/icons';
+import { history, useLocation, useIntl, connect, FormattedMessage } from 'umi';
+import type { ConnectProps, Dispatch } from 'umi';
+import { ArrowLeftOutlined, SaveOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons';
 import CategorySelector from '@/components/CategorySelector';
-import {
-  AnnualTemplateStatus,
-  AnnualTemplateStatusText,
-} from '@/dicts/supplierAnnualDict';
+import type { BreadcrumbState } from '@/models/breadcrumb';
+import { AnnualTemplateStatus, AnnualTemplateStatusText } from '@/dicts/supplierAnnualDict';
 import {
  addAnnualTemplate,
  updateAnnualTemplate,
  getAnnualTemplateDetail,
-  getAllAnnualTemplates
+  getAllAnnualTemplates,
 } from '@/servers/api/supplierAnnual';
 import styles from './supplierAnnualTemplateManage.less';

@ -53,33 +47,30 @@ const CategoryLimitationType = {
  UNIVERSAL: '0', // 不限
  LIMITED: '1', // 限制
 };
-
-// 品类限制类型文本
-const CategoryLimitationTypeText = {
-  [CategoryLimitationType.UNIVERSAL]: '不限',
-  [CategoryLimitationType.LIMITED]: '限制',
-};
-
 // 是否星号项常量
 const StarOptions = {
  YES: '1',
  NO: '0',
 };

-// 是否星号项文本
-const StarOptionsText = {
-  [StarOptions.YES]: '是',
-  [StarOptions.NO]: '否',
-};
-
-const SupplierAnnualTemplateManageAdd: React.FC = () => {
+interface PageProps extends ConnectProps {
+  breadcrumb: BreadcrumbState; // dva model状态
+  dispatch: Dispatch; // dva dispatch方法
+}
+const SupplierAnnualTemplateManageAdd: React.FC<PageProps> = ({ breadcrumb, dispatch }) => {
  const intl = useIntl();
+
  const [form] = Form.useForm();
  const [loading, setLoading] = useState<boolean>(false);
  const [isEdit, setIsEdit] = useState<boolean>(false);
-  const [templateDetail, setTemplateDetail] = useState<supplierAnnualTemplateManage.TemplateDetailData | null>(null);
-  const [templateList, setTemplateList] = useState<supplierAnnualTemplateManage.TemplateRecord[]>([]);
-  const [indicatorList, setIndicatorList] = useState<supplierAnnualTemplateManage.IndicatorItem[]>([]);
+  const [templateDetail, setTemplateDetail] =
+    useState<supplierAnnualTemplateManage.TemplateDetailData | null>(null);
+  const [templateList, setTemplateList] = useState<supplierAnnualTemplateManage.TemplateRecord[]>(
+    [],
+  );
+  const [indicatorList, setIndicatorList] = useState<supplierAnnualTemplateManage.IndicatorItem[]>(
+    [],
+  );

  // 获取路由传递的数据
  const location = useLocation<LocationState>();
@ -90,9 +81,22 @@ const SupplierAnnualTemplateManageAdd: React.FC = () => {
      setLoading(true);
      const res = await getAllAnnualTemplates();
      if (res.success && res.data) {
-        setTemplateList(res.data);
+        // 如果是修改,需要过滤掉自己
+        if (location.state?.editData) {
+          setTemplateList(
+            res.data.filter(
+              (template: supplierAnnualTemplateManage.TemplateRecord) =>
+                template.id !== location.state.editData?.id,
+            ),
+          );
+        } else {
+          setTemplateList(res.data);
+        }
      } else {
-        message.error(res.message || intl.formatMessage({ id: 'supplierAnnualTemplateManage.list.getListFailed' }));
+        message.error(
+          res.message ||
+            intl.formatMessage({ id: 'supplierAnnualTemplateManage.list.getListFailed' }),
+        );
      }
      setLoading(false);
    } catch (error) {
@ -124,7 +128,10 @@ const SupplierAnnualTemplateManageAdd: React.FC = () => {
          setIndicatorList(res.data.indicatorList);
        }
      } else {
-        message.error(res.message || intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.getDetailFailed' }));
+        message.error(
+          res.message ||
+            intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.getDetailFailed' }),
+        );
      }
      setLoading(false);
    } catch (error) {
@ -133,7 +140,21 @@ const SupplierAnnualTemplateManageAdd: React.FC = () => {
      setLoading(false);
    }
  };
+  useEffect(() => {
+    if (location.state?.editData?.id && dispatch) {
+      dispatch({
+        type: 'breadcrumb/updateBreadcrumbName',
+        payload: intl.formatMessage({ id: "supplierAnnualTemplateManage.add.edit" }),
+      });
+    }

+    // 组件卸载时重置面包屑
+    return () => {
+      dispatch({
+        type: 'breadcrumb/resetBreadcrumb',
+      });
+    };
+  }, [dispatch, intl, location]);
  // 初始化编辑数据
  useEffect(() => {
    // 获取所有模板列表
@ -176,20 +197,27 @@ const SupplierAnnualTemplateManageAdd: React.FC = () => {
      }

      if (res && res.success) {
-        message.success(isEdit
-          ? intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.submitSuccess' })
-          : intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.saveSuccess' }));
+        message.success(
+          isEdit
+            ? intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.submitSuccess' })
+            : intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.saveSuccess' }),
+        );
        history.goBack();
      } else {
-        message.error(res?.message || (isEdit
-          ? intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.submitFailed' })
-          : intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.saveFailed' })));
+        message.error(
+          res?.message ||
+            (isEdit
+              ? intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.submitFailed' })
+              : intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.saveFailed' })),
+        );
      }
    } catch (error) {
      console.error('提交失败:', error);
-      message.error(isEdit
-        ? intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.submitFailed' })
-        : intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.saveFailed' }));
+      message.error(
+        isEdit
+          ? intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.submitFailed' })
+          : intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.saveFailed' }),
+      );
    } finally {
      setLoading(false);
    }
@ -199,17 +227,21 @@ const SupplierAnnualTemplateManageAdd: React.FC = () => {
  const handleSubmit = async (values: any) => {
    // 检查指标列表
    if (!indicatorList || indicatorList.length === 0) {
-      message.error(intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.atLeastOneIndicator' }));
+      message.error(
+        intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.atLeastOneIndicator' }),
+      );
      return;
    }

    // 检查指标名称不能为空
-    const emptyNameIndex = indicatorList.findIndex(item => !item.itemName);
+    const emptyNameIndex = indicatorList.findIndex((item) => !item.itemName);
    if (emptyNameIndex !== -1) {
-      message.error(intl.formatMessage(
-        { id: 'supplierAnnualTemplateManage.add.indicatorNameRequired' },
-        { index: emptyNameIndex + 1 }
-      ));
+      message.error(
+        intl.formatMessage(
+          { id: 'supplierAnnualTemplateManage.add.indicatorNameRequired' },
+          { index: emptyNameIndex + 1 },
+        ),
+      );
      return;
    }

@ -235,7 +267,7 @@ const SupplierAnnualTemplateManageAdd: React.FC = () => {
      cancelText: intl.formatMessage({ id: 'supplierAnnualTemplateManage.common.cancel' }),
      onOk: async () => {
        await submitFormData(submitData);
-      }
+      },
    });
  };

@ -255,20 +287,27 @@ const SupplierAnnualTemplateManageAdd: React.FC = () => {

          // 复制指标列表
          if (res.data.indicatorList && res.data.indicatorList.length > 0) {
-            const copiedList = JSON.parse(JSON.stringify(res.data.indicatorList)).map((item: any) => {
-              // 删除id，防止ID冲突
-              delete item.id;
-              return item;
-            });
+            const copiedList = JSON.parse(JSON.stringify(res.data.indicatorList)).map(
+              (item: any) => {
+                // 删除id，防止ID冲突
+                delete item.id;
+                return item;
+              },
+            );
            setIndicatorList(copiedList);
          }
        } else {
-          message.error(res.message || intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.getDetailFailed' }));
+          message.error(
+            res.message ||
+              intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.getDetailFailed' }),
+          );
        }
        setLoading(false);
      } catch (error) {
        console.error('获取模板详情失败:', error);
-        message.error(intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.getDetailFailed' }));
+        message.error(
+          intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.getDetailFailed' }),
+        );
        setLoading(false);
      }
    }
@ -320,7 +359,9 @@ const SupplierAnnualTemplateManageAdd: React.FC = () => {
        <Input
          value={text}
          onChange={(e) => handleIndicatorChange(index, 'itemName', e.target.value)}
-          placeholder={`${intl.formatMessage({ id: 'supplierAnnualTemplateManage.common.pleaseInput' })}${intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.checkItem' })}`}
+          placeholder={`${intl.formatMessage({
+            id: 'supplierAnnualTemplateManage.common.pleaseInput',
+          })}${intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.checkItem' })}`}
        />
      ),
    },
@ -335,8 +376,12 @@ const SupplierAnnualTemplateManageAdd: React.FC = () => {
          onChange={(value) => handleIndicatorChange(index, 'isStar', value)}
          className={styles.starSelector}
        >
-          <Option value={StarOptions.YES}>{intl.formatMessage({ id: 'supplierAnnualTemplateManage.common.yes' })}</Option>
-          <Option value={StarOptions.NO}>{intl.formatMessage({ id: 'supplierAnnualTemplateManage.common.no' })}</Option>
+          <Option value={StarOptions.YES}>
+            {intl.formatMessage({ id: 'supplierAnnualTemplateManage.common.yes' })}
+          </Option>
+          <Option value={StarOptions.NO}>
+            {intl.formatMessage({ id: 'supplierAnnualTemplateManage.common.no' })}
+          </Option>
        </Select>
      ),
    },
@ -355,12 +400,19 @@ const SupplierAnnualTemplateManageAdd: React.FC = () => {
            />
          )}
          <Popconfirm
-            title={intl.formatMessage({ id: 'supplierAnnualTemplateManage.modal.deleteConfirmContent' })}
+            title={intl.formatMessage({
+              id: 'supplierAnnualTemplateManage.modal.deleteConfirmContent',
+            })}
            onConfirm={() => handleDeleteIndicator(index)}
            okText={intl.formatMessage({ id: 'supplierAnnualTemplateManage.common.confirm' })}
            cancelText={intl.formatMessage({ id: 'supplierAnnualTemplateManage.common.cancel' })}
          >
-            <Button type="link" danger icon={<DeleteOutlined />} title={intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.deleteIndicator' })} />
+            <Button
+              type="link"
+              danger
+              icon={<DeleteOutlined />}
+              title={intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.deleteIndicator' })}
+            />
          </Popconfirm>
        </Space>
      ),
@ -369,143 +421,223 @@ const SupplierAnnualTemplateManageAdd: React.FC = () => {

  return (
    <div className="common-container">
-        <div className={styles.pageHeader}>
-          <Title level={4} style={{ margin: 0 }}>
-            {isEdit
-              ? intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.edit' })
-              : intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.title' })
-            }
-          </Title>
-          <Button type="link" icon={<ArrowLeftOutlined />} onClick={handleBack}>
-            {intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.back' })}
-          </Button>
+      <div className={styles.pageHeader}>
+        <Title level={4} style={{ margin: 0 }}>
+          {isEdit
+            ? intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.edit' })
+            : intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.title' })}
+        </Title>
+        <Button type="link" icon={<ArrowLeftOutlined />} onClick={handleBack}>
+          {intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.back' })}
+        </Button>
+      </div>
+
+      <Form
+        form={form}
+        onFinish={handleSubmit}
+        initialValues={{
+          categoryLimitation: CategoryLimitationType.UNIVERSAL,
+          status: AnnualTemplateStatus.DRAFT,
+        }}
+        labelCol={{ span: 7 }}
+        wrapperCol={{ span: 17 }}
+      >
+        <Spin spinning={loading}>
+          <Card
+            title={intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.basicInfo' })}
+            bordered={false}
+            className={styles.innerCard}
+          >
+            <Row gutter={24}>
+              <Col span={8}>
+                <Form.Item
+                  label={intl.formatMessage({
+                    id: 'supplierAnnualTemplateManage.list.templateName',
+                  })}
+                  name="templateName"
+                  rules={[
+                    {
+                      required: true,
+                      message: `${intl.formatMessage({
+                        id: 'supplierAnnualTemplateManage.common.pleaseInput',
+                      })}${intl.formatMessage({
+                        id: 'supplierAnnualTemplateManage.list.templateName',
+                      })}`,
+                    },
+                  ]}
+                >
+                  <Input
+                    placeholder={`${intl.formatMessage({
+                      id: 'supplierAnnualTemplateManage.common.pleaseInput',
+                    })}${intl.formatMessage({
+                      id: 'supplierAnnualTemplateManage.list.templateName',
+                    })}`}
+                    maxLength={50}
+                  />
+                </Form.Item>
+              </Col>
+              <Col span={8}>
+                <Form.Item
+                  label={intl.formatMessage({
+                    id: 'supplierAnnualTemplateManage.add.categoryLimitation',
+                  })}
+                  name="categoryLimitation"
+                  rules={[
+                    {
+                      required: true,
+                      message: `${intl.formatMessage({
+                        id: 'supplierAnnualTemplateManage.common.pleaseSelect',
+                      })}${intl.formatMessage({
+                        id: 'supplierAnnualTemplateManage.add.categoryLimitation',
+                      })}`,
+                    },
+                  ]}
+                >
+                  <Radio.Group>
+                    <Radio value={CategoryLimitationType.UNIVERSAL}>
+                      {intl.formatMessage({
+                        id: 'supplierAnnualTemplateManage.add.categoryLimitationUniversal',
+                      })}
+                    </Radio>
+                    <Radio value={CategoryLimitationType.LIMITED}>
+                      {intl.formatMessage({
+                        id: 'supplierAnnualTemplateManage.add.categoryLimitationLimited',
+                      })}
+                    </Radio>
+                  </Radio.Group>
+                </Form.Item>
+              </Col>
+              <Col span={8}>
+                <Form.Item
+                  noStyle
+                  shouldUpdate={(prevValues, currentValues) =>
+                    prevValues.categoryLimitation !== currentValues.categoryLimitation
+                  }
+                >
+                  {({ getFieldValue }) => {
+                    const categoryLimitation = getFieldValue('categoryLimitation');
+                    return categoryLimitation === CategoryLimitationType.LIMITED ? (
+                      <Form.Item
+                        label={intl.formatMessage({
+                          id: 'supplierAnnualTemplateManage.add.selectCategory',
+                        })}
+                        name="categoryId"
+                        rules={[
+                          {
+                            required: true,
+                            message: `${intl.formatMessage({
+                              id: 'supplierAnnualTemplateManage.common.pleaseSelect',
+                            })}${intl.formatMessage({
+                              id: 'supplierAnnualTemplateManage.list.category',
+                            })}`,
+                          },
+                        ]}
+                      >
+                        <CategorySelector multiple={false} />
+                      </Form.Item>
+                    ) : null;
+                  }}
+                </Form.Item>
+              </Col>
+            </Row>
+
+            <Row gutter={24}>
+              <Col span={8}>
+                <Form.Item
+                  label={intl.formatMessage({
+                    id: 'supplierAnnualTemplateManage.add.selectTemplate',
+                  })}
+                  name="copyTemplateId"
+                >
+                  <Select
+                    placeholder={intl.formatMessage({
+                      id: 'supplierAnnualTemplateManage.common.pleaseSelect',
+                    })}
+                    loading={templateList.length === 0}
+                    onSelect={handleTemplateSelect}
+                  >
+                    {templateList.map((template) =>
+                      template.id ? (
+                        <Option key={template.id} value={template.id}>
+                          {template.templateName}
+                        </Option>
+                      ) : null,
+                    )}
+                  </Select>
+                </Form.Item>
+              </Col>
+              <Col span={8}>
+                <Form.Item
+                  label={intl.formatMessage({ id: 'supplierAnnualTemplateManage.list.status' })}
+                  name="status"
+                  rules={[
+                    {
+                      required: true,
+                      message: `${intl.formatMessage({
+                        id: 'supplierAnnualTemplateManage.common.pleaseSelect',
+                      })}${intl.formatMessage({ id: 'supplierAnnualTemplateManage.list.status' })}`,
+                    },
+                  ]}
+                >
+                  <Radio.Group>
+                    <Radio value={AnnualTemplateStatus.DRAFT}>
+                      {AnnualTemplateStatusText[AnnualTemplateStatus.DRAFT]}
+                    </Radio>
+                    <Radio value={AnnualTemplateStatus.ENABLED}>
+                      {AnnualTemplateStatusText[AnnualTemplateStatus.ENABLED]}
+                    </Radio>
+                    <Radio value={AnnualTemplateStatus.DISABLED}>
+                      {AnnualTemplateStatusText[AnnualTemplateStatus.DISABLED]}
+                    </Radio>
+                  </Radio.Group>
+                </Form.Item>
+              </Col>
+            </Row>
+          </Card>
+
+          <Divider />
+
+          <Card
+            title={intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.indicatorInfo' })}
+            bordered={false}
+            className={styles.innerCard}
+          >
+            <Table
+              columns={columns}
+              dataSource={indicatorList}
+              bordered
+              rowKey="orderBy"
+              size="middle"
+              pagination={false}
+              locale={{
+                emptyText: intl.formatMessage({
+                  id: 'supplierAnnualTemplateManage.add.noIndicatorData',
+                }),
+              }}
+              className={styles.indicatorTable}
+            />
+          </Card>
+        </Spin>
+
+        <div className={styles.formActions}>
+          <Space>
+            <Button onClick={handleBack}>
+              {intl.formatMessage({ id: 'supplierAnnualTemplateManage.common.cancel' })}
+            </Button>
+            <Button type="primary" htmlType="submit" loading={loading} icon={<SaveOutlined />}>
+              {isEdit
+                ? intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.update' })
+                : intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.save' })}
+            </Button>
+          </Space>
        </div>
-
-        <Form
-          form={form}
-          onFinish={handleSubmit}
-          initialValues={{
-            categoryLimitation: CategoryLimitationType.UNIVERSAL,
-            status: AnnualTemplateStatus.DRAFT,
-          }}
-          labelCol={{ span: 7 }}
-          wrapperCol={{ span: 17 }}
-        >
-          <Spin spinning={loading}>
-            <Card title={intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.basicInfo' })} bordered={false} className={styles.innerCard}>
-              <Row gutter={24}>
-                <Col span={8}>
-                  <Form.Item
-                    label={intl.formatMessage({ id: 'supplierAnnualTemplateManage.list.templateName' })}
-                    name="templateName"
-                    rules={[{ required: true, message: `${intl.formatMessage({ id: 'supplierAnnualTemplateManage.common.pleaseInput' })}${intl.formatMessage({ id: 'supplierAnnualTemplateManage.list.templateName' })}` }]}
-                  >
-                    <Input placeholder={`${intl.formatMessage({ id: 'supplierAnnualTemplateManage.common.pleaseInput' })}${intl.formatMessage({ id: 'supplierAnnualTemplateManage.list.templateName' })}`} maxLength={50} />
-                  </Form.Item>
-                </Col>
-                <Col span={8}>
-                  <Form.Item
-                    label={intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.categoryLimitation' })}
-                    name="categoryLimitation"
-                    rules={[{ required: true, message: `${intl.formatMessage({ id: 'supplierAnnualTemplateManage.common.pleaseSelect' })}${intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.categoryLimitation' })}` }]}
-                  >
-                    <Radio.Group>
-                      <Radio value={CategoryLimitationType.UNIVERSAL}>
-                        {intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.categoryLimitationUniversal' })}
-                      </Radio>
-                      <Radio value={CategoryLimitationType.LIMITED}>
-                        {intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.categoryLimitationLimited' })}
-                      </Radio>
-                    </Radio.Group>
-                  </Form.Item>
-                </Col>
-                <Col span={8}>
-                  <Form.Item
-                    noStyle
-                    shouldUpdate={(prevValues, currentValues) =>
-                      prevValues.categoryLimitation !== currentValues.categoryLimitation
-                    }
-                  >
-                    {({ getFieldValue }) => {
-                      const categoryLimitation = getFieldValue('categoryLimitation');
-                      return categoryLimitation === CategoryLimitationType.LIMITED ? (
-                        <Form.Item
-                          label={intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.selectCategory' })}
-                          name="categoryId"
-                          rules={[{ required: true, message: `${intl.formatMessage({ id: 'supplierAnnualTemplateManage.common.pleaseSelect' })}${intl.formatMessage({ id: 'supplierAnnualTemplateManage.list.category' })}` }]}
-                        >
-                          <CategorySelector multiple={false} />
-                        </Form.Item>
-                      ) : null;
-                    }}
-                  </Form.Item>
-                </Col>
-              </Row>
-
-              <Row gutter={24}>
-                <Col span={8}>
-                  <Form.Item
-                    label={intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.selectTemplate' })}
-                    name="copyTemplateId"
-                  >
-                    <Select
-                      placeholder={intl.formatMessage({ id: 'supplierAnnualTemplateManage.common.pleaseSelect' })}
-                      loading={templateList.length === 0}
-                      onSelect={handleTemplateSelect}
-                    >
-                      {templateList.map(template => (
-                        template.id ? (
-                          <Option key={template.id} value={template.id}>
-                            {template.templateName}
-                          </Option>
-                        ) : null
-                      ))}
-                    </Select>
-                  </Form.Item>
-                </Col>
-                <Col span={8}>
-                  <Form.Item
-                    label={intl.formatMessage({ id: 'supplierAnnualTemplateManage.list.status' })}
-                    name="status"
-                    rules={[{ required: true, message: `${intl.formatMessage({ id: 'supplierAnnualTemplateManage.common.pleaseSelect' })}${intl.formatMessage({ id: 'supplierAnnualTemplateManage.list.status' })}` }]}
-                  >
-                    <Radio.Group>
-                      <Radio value={AnnualTemplateStatus.DRAFT}>{AnnualTemplateStatusText[AnnualTemplateStatus.DRAFT]}</Radio>
-                      <Radio value={AnnualTemplateStatus.ENABLED}>{AnnualTemplateStatusText[AnnualTemplateStatus.ENABLED]}</Radio>
-                      <Radio value={AnnualTemplateStatus.DISABLED}>{AnnualTemplateStatusText[AnnualTemplateStatus.DISABLED]}</Radio>
-                    </Radio.Group>
-                  </Form.Item>
-                </Col>
-              </Row>
-            </Card>
-
-            <Divider />
-
-            <Card title={intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.indicatorInfo' })} bordered={false} className={styles.innerCard}>
-              <Table
-                columns={columns}
-                dataSource={indicatorList}
-                bordered
-                rowKey="orderBy"
-                size="middle"
-                pagination={false}
-                locale={{ emptyText: intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.noIndicatorData' }) }}
-                className={styles.indicatorTable}
-              />
-            </Card>
-          </Spin>
-
-          <div className={styles.formActions}>
-            <Space>
-              <Button onClick={handleBack}>{intl.formatMessage({ id: 'supplierAnnualTemplateManage.common.cancel' })}</Button>
-              <Button type="primary" htmlType="submit" loading={loading} icon={<SaveOutlined />}>
-                {isEdit ? intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.update' }) : intl.formatMessage({ id: 'supplierAnnualTemplateManage.add.save' })}
-              </Button>
-            </Space>
-          </div>
-        </Form>
+      </Form>
    </div>
  );
 };

-export default SupplierAnnualTemplateManageAdd;
+// export default SupplierAnnualTemplateManageAdd;
+// 将dva model中的状态映射到组件props
+export default connect(({ breadcrumb }: { breadcrumb: BreadcrumbState }) => ({
+  breadcrumb,
+}))(SupplierAnnualTemplateManageAdd);