新增品类项增加名称字段

2025-07-29 16:18:08 +08:00
parent a54be1d5a6
commit ce39764f08
24 changed files with 541 additions and 257 deletions
--- a/src/pages/supplier/admission/SupplierCategoryEntry/components/CreateModal.tsx
+++ b/src/pages/supplier/admission/SupplierCategoryEntry/components/CreateModal.tsx
@ -1,11 +1,26 @@
 import React, { useState, useEffect } from 'react';
-import { Modal, Form, Button, Tree, message, Input } from 'antd';
+import { Modal, Form, Button, Tree, message, Input, Spin } from 'antd';
 //组件
 import SupplierSelector from './SupplierSelector';
 import AccessDepartmentSelect from '@/components/AccessDepartmentSelect';
 // 请求
 import { categoryTree, add } from '../services';
+interface CategoryNode {
+    key: string;
+    title: string;
+    children?: CategoryNode[];
+}

+function flattenTree(
+    tree: CategoryNode[],
+    map: Record<string, string> = {}
+): Record<string, string> {
+    tree.forEach((node) => {
+        map[node.key] = node.title;
+        if (node.children) flattenTree(node.children, map);
+    });
+    return map;
+}
 // 主体
 const CreateModal: React.FC<{ visible: boolean; onCancel: () => void; }> = ({ visible, onCancel }) => {

@ -21,6 +36,7 @@ const CreateModal: React.FC<{ visible: boolean; onCancel: () => void; }> = ({ vi
    //品类选择渲染数据
    const [categoriesTreeData, setCategoriesTreeData] = useState([]);
    //提交防抖
+    const [treeLoading, setTreeLoading] = useState(true);
    const [submitting, setSubmitting] = useState(false);
    //品类选择数据中字段转换
    const convertTreeData = (data: any) => {
@ -60,11 +76,17 @@ const CreateModal: React.FC<{ visible: boolean; onCancel: () => void; }> = ({ vi
        const leafKeys = findLeafKeys(convertTreeData(categoriesTreeData));
        const onlyLeafChecked = keys.filter(key => leafKeys.includes(String(key)));

-        console.log(onlyLeafChecked, 'onlyLeafChecked', leafKeys, keys);
+         // 平铺tree获取id=>title映射
+         const keyTitleMap = flattenTree(convertTreeData(categoriesTreeData));
+         // 拼 categoryItem 数组
+         const coscoAccessCategoryList = onlyLeafChecked.map((id) => ({
+             categoryId: id,
+             categoryName: keyTitleMap[id] || '',
+         }));


        setCheckedKeys(keys); // UI 显示用，还是全量
-        form.setFieldsValue({ categoryIds: onlyLeafChecked }); // 只存叶子到表单
+        form.setFieldsValue({ categoryIds: onlyLeafChecked, coscoAccessCategoryList }); // 只存叶子到表单

        // ==============================
        // 增加自动拼标题的逻辑
@ -123,6 +145,7 @@ const CreateModal: React.FC<{ visible: boolean; onCancel: () => void; }> = ({ vi
            };
            categoryIds: string[];
            supplierIds: string[];
+            coscoAccessCategoryList: { categoryName: string; categoryId: string; }[];
        } = {
            coscoAccessWork: {
                accessWorkName: '',
@ -130,7 +153,8 @@ const CreateModal: React.FC<{ visible: boolean; onCancel: () => void; }> = ({ vi
                orgId: '',
            },
            categoryIds: [],
-            supplierIds: [],
+                coscoAccessCategoryList: [],
+                supplierIds: [],
        };
        //标题名称
        finalPayload.coscoAccessWork.accessWorkName = values.accessWorkName;
@ -139,7 +163,8 @@ const CreateModal: React.FC<{ visible: boolean; onCancel: () => void; }> = ({ vi
        //准入单位
        finalPayload.coscoAccessWork.orgId = values.orgId;
        //品类选择
-        finalPayload.categoryIds = values.categoryIds;
+        finalPayload.coscoAccessCategoryList = values.coscoAccessCategoryList;
+        // finalPayload.categoryIds = values.categoryIds;
        //选择供应商
        if (values.supplier.length != 0) {
            values.supplier.forEach((item: { id: string }) => {
@ -168,12 +193,15 @@ const CreateModal: React.FC<{ visible: boolean; onCancel: () => void; }> = ({ vi
    //初始化
    useEffect(() => {
        if (visible) {
+            setTreeLoading(true);
            categoryTree().then((res) => {
                const { code, data } = res;
                if (code == 200) {
                    setCategoriesTreeData(data)
                }
-            })
+            }).finally(() => {
+                setTreeLoading(false);
+            });
        }
    }, [visible, form]);
    return (
@ -230,12 +258,19 @@ const CreateModal: React.FC<{ visible: boolean; onCancel: () => void; }> = ({ vi
                    </Button>
                    <span style={{ marginLeft: 10 }}>{`${form.getFieldValue('supplier') ? form.getFieldValue('supplier')[0].supplierType === 'ovs' ? form.getFieldValue('supplier')[0].nameEn : form.getFieldValue('supplier')[0].name : ''}`}</span>
                </Form.Item>
-
+                <Form.Item name="coscoAccessCategoryList" noStyle>
+                       <Input type="hidden" />
+                 </Form.Item>
                <Form.Item
                    label="品类选择"
                    name="categoryIds"
                    rules={[{ required: true, message: '请选择准入品类' }]}
                >
+                     {treeLoading ? (
+                        <div style={{ padding: '24px 0', textAlign: 'center' }}>
+                            <Spin tip="品类数据加载中..." />
+                        </div>
+                    ) : (
                    <Tree
                        checkable
                        selectable={false}
@ -250,7 +285,7 @@ const CreateModal: React.FC<{ visible: boolean; onCancel: () => void; }> = ({ vi
                            padding: 8,
                            borderRadius: 4,
                        }}
-                    />
+                    />)}
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 6 }}>
--- a/src/pages/supplier/admission/SupplierCategoryEntry/components/ViewModal.tsx
+++ b/src/pages/supplier/admission/SupplierCategoryEntry/components/ViewModal.tsx
@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Modal, Descriptions } from 'antd';
+import { Modal, Descriptions, Spin } from 'antd';
 import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';

 import { coscoAccessWorkCategory } from '../services'
@ -34,21 +34,26 @@ const ViewModal: React.FC<{
  //渲染数据
  const [data, setData] = useState<Data | null>(null);
  const supplierDetailModal = useSupplierDetailModal();
+  const [loading, setLoading] = useState(false);

  //初始化
  useEffect(() => {
    if (record.id) {
+      setLoading(true);
      coscoAccessWorkCategory(record.id).then((res) => {
        const { code, data } = res;
        if (code == 200) {
          setData(data)
        }
-      })
+      }).finally(() => setLoading(false));
+    } else {
+      setData(null);
    }
  }, [record])

  return (
    <Modal title="查看详情" visible={visible} footer={null} onCancel={onCancel}>
+      <Spin spinning={loading}>
      {data && (
        <Descriptions bordered column={1}  labelStyle={{ width: 160 }}>
          <Descriptions.Item label="准入部门">{data.coscoAccessWork.deptName}</Descriptions.Item>
@ -69,7 +74,7 @@ const ViewModal: React.FC<{
          
          <Descriptions.Item label="审批结果">{data.coscoAccessWork.approveStatusText}</Descriptions.Item>
        </Descriptions>
-      )}
+      )}</Spin>
    </Modal>
  );
 };
--- a/src/pages/supplier/admission/SupplierCategoryEntryReview/components/ViewModal.tsx
+++ b/src/pages/supplier/admission/SupplierCategoryEntryReview/components/ViewModal.tsx
@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Modal, Descriptions } from 'antd';
+import { Modal, Descriptions, Spin } from 'antd';
 import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';

 import { coscoAccessWorkCategory } from '../services'
@ -34,43 +34,48 @@ const ViewModal: React.FC<{
  //渲染数据
  const [data, setData] = useState<Data | null>(null);
  const supplierDetailModal = useSupplierDetailModal();
+  const [loading, setLoading] = useState(false);

  //初始化
  useEffect(() => {
    if (record.id) {
+      setLoading(true);
      coscoAccessWorkCategory(record.id).then((res) => {
        const { code, data } = res;
        if (code == 200) {
          setData(data)
        }
-      })
+      }).finally(() => setLoading(false));
+    } else {
+      setData(null);
    }
  }, [record])

  return (
    <Modal title="查看详情" visible={visible} footer={null} onCancel={onCancel}>
-      {data && (
-        <Descriptions bordered column={1}>
-          <Descriptions.Item label="准入部门">{data.coscoAccessWork.deptName}</Descriptions.Item>
-          <Descriptions.Item label="准入供应商">
-            {data.coscoAccessSupplierList.map((item) => {
-              return (
-                <div style={{ margin: '5px', color: '#004f8e', cursor: 'pointer' }} onClick={() => supplierDetailModal?.(item.supplierId)} >{item.supplierName}</div>
-              )
-            })}
-          </Descriptions.Item>
-          <Descriptions.Item label="申请准入品类">
-            {data.coscoAccessCategoryList.map((item) => {
-              return (
-                <div style={{ margin: '5px' }}>{item.categoryName}</div>
-              )
-            })}
-          </Descriptions.Item>
-          
-          <Descriptions.Item label="审批结果">{data.coscoAccessWork.approveStatusText}</Descriptions.Item>
-        </Descriptions>
-      )}
-    </Modal>
+       <Spin spinning={loading}>
+        {data && (
+          <Descriptions bordered column={1}>
+            <Descriptions.Item label="准入部门">{data.coscoAccessWork.deptName}</Descriptions.Item>
+            <Descriptions.Item label="准入供应商">
+              {data.coscoAccessSupplierList.map((item) => {
+                return (
+                  <div style={{ margin: '5px', color: '#004f8e', cursor: 'pointer' }} onClick={() => supplierDetailModal?.(item.supplierId)} >{item.supplierName}</div>
+                )
+              })}
+            </Descriptions.Item>
+            <Descriptions.Item label="申请准入品类">
+              {data.coscoAccessCategoryList.map((item) => {
+                return (
+                  <div style={{ margin: '5px' }}>{item.categoryName}</div>
+                )
+              })}
+            </Descriptions.Item>
+            
+            <Descriptions.Item label="审批结果">{data.coscoAccessWork.approveStatusText}</Descriptions.Item>
+          </Descriptions>
+        )}</Spin>
+    </Modal>  
  );
 };

--- a/src/pages/supplier/admission/SupplierEntryReview/components/ViewModal.tsx
+++ b/src/pages/supplier/admission/SupplierEntryReview/components/ViewModal.tsx
@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Modal, Descriptions } from 'antd';
+import { Modal, Descriptions, Spin } from 'antd';
 import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';

 import { coscoAccessWork } from '../services'
@ -50,20 +50,26 @@ const ViewModal: React.FC<{
  //渲染数据
  const [data, setData] = useState<Data | null>(null);
  const supplierDetailModal = useSupplierDetailModal();
+    const [loading, setLoading] = useState(false);
+  
  //初始化
  useEffect(() => {
    if (record) {
+      setLoading(true);
      coscoAccessWork(record).then((res) => {
        const { code, data } = res;
        if (code == 200) {
          setData(data)
        }
-      })
+      }).finally(() => setLoading(false));
+    } else {
+      setData(null);
    }
  }, [record])

  return (
    <Modal title="查看详情" visible={visible} footer={null} onCancel={onCancel} width={800} >
+      <Spin spinning={loading}>
      {data && (
        <Descriptions bordered column={1} labelStyle={{ width: 160 }}>
          <Descriptions.Item label="准入部门">{data.coscoAccessWork.deptName}</Descriptions.Item>
@ -77,6 +83,13 @@ const ViewModal: React.FC<{

          {data.coscoAccessWork.accessType === 'scattered' && (
            <>
+              <Descriptions.Item label="申请准入品类">
+                {data.coscoAccessCategoryList.map((item) => {
+                  return (
+                    <div style={{ margin: '5px' }}>{item.categoryName}</div>
+                  )
+                })}
+              </Descriptions.Item>
              <Descriptions.Item label="准入说明">{data.coscoAccessWork.accessDesc}</Descriptions.Item>
              <Descriptions.Item label="附件">
                <a href={data.coscoAccessWorkAttachments.fileUrl} target="_blank" rel="noreferrer">{data.coscoAccessWorkAttachments.fileName}</a>
@ -84,12 +97,21 @@ const ViewModal: React.FC<{
            </>
          )}
          {data.coscoAccessWork.accessType === 'offline' && (
+            <>
+              <Descriptions.Item label="申请准入品类">
+                {data.coscoAccessCategoryList.map((item) => {
+                  return (
+                    <div style={{ margin: '5px' }}>{item.categoryName}</div>
+                  )
+                })}
+              </Descriptions.Item>
              <Descriptions.Item label="供应商符合性审查">
                  <a href={data.coscoAccessWorkAttachments.fileUrl} target="_blank" rel="noreferrer">{data.coscoAccessWorkAttachments.fileName}</a>
              </Descriptions.Item>
+            </>
+             
          )}

-
          {data.coscoAccessWork.accessType === 'online' && (
            <>
              <Descriptions.Item label="申请准入品类">
@ -113,7 +135,7 @@ const ViewModal: React.FC<{
          )}

        </Descriptions>
-      )}
+      )}</Spin>
    </Modal>
  );
 };
--- a/src/pages/supplier/admission/admissionManagement/components/CreateModal.tsx
+++ b/src/pages/supplier/admission/admissionManagement/components/CreateModal.tsx
@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Modal, Form, Button, Tree, message, DatePicker, Radio, Upload, Input } from 'antd';
+import { Modal, Form, Button, Tree, message, DatePicker, Radio, Upload, Input, Spin } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 import type { UploadFile } from 'antd/es/upload/interface';
 //组件
@ -25,6 +25,23 @@ interface ReviewerSelectorData {
    selected: Reviewer[];
    leader: Reviewer | null;
 }
+
+interface CategoryNode {
+    key: string;
+    title: string;
+    children?: CategoryNode[];
+}
+
+function flattenTree(
+    tree: CategoryNode[],
+    map: Record<string, string> = {}
+): Record<string, string> {
+    tree.forEach((node) => {
+        map[node.key] = node.title;
+        if (node.children) flattenTree(node.children, map);
+    });
+    return map;
+}
 // 主体
 const CreateModal: React.FC<{ visible: boolean; onCancel: () => void; }> = ({ visible, onCancel }) => {

@ -47,6 +64,7 @@ const CreateModal: React.FC<{ visible: boolean; onCancel: () => void; }> = ({ vi
    const [reviewerModalVisible, setReviewerModalVisible] = useState(false);
    const [divisionModalVisible, setDivisionModalVisible] = useState(false);
    //提交防抖
+    const [treeLoading, setTreeLoading] = useState(true);
    const [submitting, setSubmitting] = useState(false);
    //品类选择渲染数据
    const [categoriesTreeData, setCategoriesTreeData] = useState([]);
@ -88,8 +106,16 @@ const CreateModal: React.FC<{ visible: boolean; onCancel: () => void; }> = ({ vi
        const leafKeys = findLeafKeys(convertTreeData(categoriesTreeData));
        const onlyLeafChecked = keys.filter(key => leafKeys.includes(String(key)));

+        // 平铺tree获取id=>title映射
+        const keyTitleMap = flattenTree(convertTreeData(categoriesTreeData));
+        // 拼 categoryItem 数组
+        const coscoAccessCategoryList = onlyLeafChecked.map((id) => ({
+            categoryId: id,
+            categoryName: keyTitleMap[id] || '',
+        }));
+
        setCheckedKeys(keys); // UI 显示用，还是全量
-        form.setFieldsValue({ categoryIds: onlyLeafChecked }); // 只存叶子到表单
+        form.setFieldsValue({ categoryIds: onlyLeafChecked, coscoAccessCategoryList }); // 只存叶子到表单
    };
    // 选择准入方式
    const onMethodChange = (e: any) => {
@ -157,6 +183,7 @@ const CreateModal: React.FC<{ visible: boolean; onCancel: () => void; }> = ({ vi
                categoryIds: string[];
                supplierIds: string[];
                coscoAccessUserls: { userId: string; deptId: string; isLeader: number }[];
+                coscoAccessCategoryList: { categoryName: string; categoryId: string; }[];
                coscoAccessItems: { itemName: string; reviewBy: string[] }[];
                coscoAccessWorkAttachments: any;
                attachmentsType: any;
@ -173,11 +200,12 @@ const CreateModal: React.FC<{ visible: boolean; onCancel: () => void; }> = ({ vi
                categoryIds: [],
                supplierIds: [],
                coscoAccessUserls: [],
+                coscoAccessCategoryList: [],
                coscoAccessItems: [],
                coscoAccessWorkAttachments: {},
                attachmentsType: {},
            };
-    
+
            //标题名称
            finalPayload.coscoAccessWork.accessWorkName = values.accessWorkName;
            //准入方式
@ -189,7 +217,8 @@ const CreateModal: React.FC<{ visible: boolean; onCancel: () => void; }> = ({ vi
            // 准入说明
            finalPayload.coscoAccessWork.accessDesc = values.accessDesc;
            //品类选择
-            finalPayload.categoryIds = values.categoryIds;
+            finalPayload.coscoAccessCategoryList = values.coscoAccessCategoryList;
+            // finalPayload.categoryIds = values.categoryIds;
            //选择供应商
            values.supplier.forEach((item: { id: string }) => {
                finalPayload.supplierIds.push(item.id)
@ -218,35 +247,38 @@ const CreateModal: React.FC<{ visible: boolean; onCancel: () => void; }> = ({ vi
                });
            } else {
                // 供应商符合性审查
-                if(values.supplierCompliance) {
+                if (values.supplierCompliance) {
                    finalPayload.coscoAccessWorkAttachments = values.supplierCompliance[0].response;
                    finalPayload.coscoAccessWorkAttachments.fileUrl = values.supplierCompliance[0].response.url;
                }
            }
            const res = await add(finalPayload);
            if (res?.success) {
-              message.success('创建成功');
-              form.resetFields();
-              setCheckedKeys([]);
-              setSelectedReviewers({ selected: [], leader: null, });
-              setAdmissionMethod('online');
-              onCancel();
+                message.success('创建成功');
+                form.resetFields();
+                setCheckedKeys([]);
+                setSelectedReviewers({ selected: [], leader: null, });
+                setAdmissionMethod('online');
+                onCancel();
            } else {
-              message.error('创建失败');
+                message.error('创建失败');
            }
        } finally {
-          setSubmitting(false); // 无论成功失败都解锁
+            setSubmitting(false); // 无论成功失败都解锁
        }
    };
    //初始化
    useEffect(() => {
        if (visible) {
+            setTreeLoading(true);
            categoryTree().then((res) => {
                const { code, data } = res;
                if (code == 200) {
                    setCategoriesTreeData(data)
                }
-            })
+            }).finally(() => {
+                setTreeLoading(false);
+            });
            form.setFieldsValue({ method: 'online' });
        }
    }, [visible, form]);
@ -291,7 +323,7 @@ const CreateModal: React.FC<{ visible: boolean; onCancel: () => void; }> = ({ vi
                    name="deptId"
                    rules={[{ required: true, message: '请选择准入部门' }]}
                >
-                    <AccessDepartmentSelect style={{width: '100%'}} orgCategory='' onChange={onChangeDepartmentSelect} />
+                    <AccessDepartmentSelect style={{ width: '100%' }} orgCategory='' onChange={onChangeDepartmentSelect} />
                </Form.Item>
                <Form.Item name="orgId" noStyle>
                    <Input type="hidden" />
@ -308,27 +340,34 @@ const CreateModal: React.FC<{ visible: boolean; onCancel: () => void; }> = ({ vi
                        <Radio value="scattered">零星采购/应急采购/个人供应商</Radio>
                    </Radio.Group>
                </Form.Item>
-
+                <Form.Item name="coscoAccessCategoryList" noStyle>
+                    <Input type="hidden" />
+                </Form.Item>
                <Form.Item
                    label="品类选择"
                    name="categoryIds"
                    rules={[{ required: true, message: '请选择准入品类' }]}
                >
-                    <Tree
-                        checkable
-                        selectable={false}
-                        treeData={convertTreeData(categoriesTreeData)}
-                        checkedKeys={checkedKeys}
-                        onCheck={onCheck}
-                        defaultExpandAll
-                        style={{
-                            maxHeight: 200,
-                            overflowY: 'auto',
-                            border: '1px solid #d9d9d9',
-                            padding: 8,
-                            borderRadius: 4,
-                        }}
-                    />
+                    {treeLoading ? (
+                        <div style={{ padding: '24px 0', textAlign: 'center' }}>
+                            <Spin tip="品类数据加载中..." />
+                        </div>
+                    ) : (
+                        <Tree
+                            checkable
+                            selectable={false}
+                            treeData={convertTreeData(categoriesTreeData)}
+                            checkedKeys={checkedKeys}
+                            onCheck={onCheck}
+                            defaultExpandAll
+                            style={{
+                                maxHeight: 200,
+                                overflowY: 'auto',
+                                border: '1px solid #d9d9d9',
+                                padding: 8,
+                                borderRadius: 4,
+                            }}
+                        />)}
                </Form.Item>

                <Form.Item
@ -418,7 +457,7 @@ const CreateModal: React.FC<{ visible: boolean; onCancel: () => void; }> = ({ vi
                            label="评审分工"
                            name="division"
                            rules={[
-                                { 
+                                {
                                    required: true,
                                    validator: (_, value) => {
                                        if (!value || !Array.isArray(value) || value.length === 0) {
@ -495,7 +534,7 @@ const CreateModal: React.FC<{ visible: boolean; onCancel: () => void; }> = ({ vi
                )}

                <Form.Item wrapperCol={{ offset: 6 }}>
-                    <Button type="primary" htmlType="submit" style={{ marginRight: 8 }}  disabled={submitting}>
+                    <Button type="primary" htmlType="submit" style={{ marginRight: 8 }} disabled={submitting}>
                        {admissionMethod === 'online' ? '确认' : admissionMethod === 'offline' ? '提交审批' : '提交'}

                    </Button>
--- a/src/pages/supplier/admission/admissionManagement/components/DivisionModal.tsx
+++ b/src/pages/supplier/admission/admissionManagement/components/DivisionModal.tsx
@ -66,13 +66,19 @@ const DivisionModal: React.FC<{
  };
  //全部评审项 多选
  const handleReviewerCheckAllColumn = (reviewerKey: string, checked: boolean) => {
-    const newData = data.map(row => ({
-      ...row,
-      reviewerChecks: {
-        ...row.reviewerChecks,
-        [reviewerKey]: checked,
-      },
-    }));
+    const newData = data.map(row => {
+      const reviewerChecks = { ...row.reviewerChecks };
+      if (checked) {
+        reviewerChecks[reviewerKey] = true;
+      } else {
+        // 取消全选时，彻底移除这个key
+        delete reviewerChecks[reviewerKey];
+      }
+      return {
+        ...row,
+        reviewerChecks,
+      };
+    });
    setData(newData);
  };

--- a/src/pages/supplier/admission/admissionManagement/components/ViewModal.tsx
+++ b/src/pages/supplier/admission/admissionManagement/components/ViewModal.tsx
@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Modal, Descriptions } from 'antd';
+import { Modal, Descriptions, Spin  } from 'antd';
 import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';

 import { coscoAccessWork } from '../services'
@ -49,24 +49,31 @@ const ViewModal: React.FC<{
 }> = ({ visible, record = {}, onCancel }) => {
  //渲染数据
  const [data, setData] = useState<Data | null>(null);
-    const supplierDetailModal = useSupplierDetailModal();
-  
+  const supplierDetailModal = useSupplierDetailModal();
+  const [loading, setLoading] = useState(false);
+
  //初始化
  useEffect(() => {
    if (record.id) {
-      coscoAccessWork(record.id).then((res) => {
-        const { code, data } = res;
-        if (code == 200) {
-          setData(data)
-        }
-      })
+      setLoading(true);
+      coscoAccessWork(record.id)
+        .then((res) => {
+          const { code, data } = res;
+          if (code == 200) {
+            setData(data);
+          }
+        })
+        .finally(() => setLoading(false));
+    } else {
+      setData(null);
    }
-  }, [record])
+  }, [record]);

  return (
    <Modal title="查看详情" visible={visible} footer={null} onCancel={onCancel} width={800}>
+       <Spin spinning={loading}>
      {data && (
-        <Descriptions bordered column={1}  labelStyle={{ width: 160 }}>
+        <Descriptions bordered column={1} labelStyle={{ width: 160 }}>
          <Descriptions.Item label="准入部门">{data.coscoAccessWork.deptName}</Descriptions.Item>
          <Descriptions.Item label="准入供应商">
            {data.coscoAccessSupplierList.map((item) => {
@ -79,6 +86,13 @@ const ViewModal: React.FC<{

          {data.coscoAccessWork.accessType === 'scattered' && (
            <>
+              <Descriptions.Item label="申请准入品类">
+                {data.coscoAccessCategoryList.map((item) => {
+                  return (
+                    <div style={{ margin: '5px' }}>{item.categoryName}</div>
+                  )
+                })}
+              </Descriptions.Item>
              <Descriptions.Item label="准入说明">{data.coscoAccessWork.accessDesc}</Descriptions.Item>
              <Descriptions.Item label="附件">
                <a href={data.coscoAccessWorkAttachments.fileUrl} target="_blank" rel="noreferrer">{data.coscoAccessWorkAttachments.fileName}</a>
@ -86,9 +100,18 @@ const ViewModal: React.FC<{
            </>
          )}
          {data.coscoAccessWork.accessType === 'offline' && (
-              <Descriptions.Item label="供应商符合性审查">
-                  <a href={data.coscoAccessWorkAttachments.fileUrl} target="_blank" rel="noreferrer">{data.coscoAccessWorkAttachments.fileName}</a>
+            <>
+              <Descriptions.Item label="申请准入品类">
+                {data.coscoAccessCategoryList.map((item) => {
+                  return (
+                    <div style={{ margin: '5px' }}>{item.categoryName}</div>
+                  )
+                })}
              </Descriptions.Item>
+              <Descriptions.Item label="供应商符合性审查">
+                <a href={data.coscoAccessWorkAttachments.fileUrl} target="_blank" rel="noreferrer">{data.coscoAccessWorkAttachments.fileName}</a>
+              </Descriptions.Item>
+            </>
          )}


@ -116,6 +139,7 @@ const ViewModal: React.FC<{

        </Descriptions>
      )}
+      </Spin>
    </Modal>
  );
 };
--- a/src/pages/supplier/admission/admissionReviewManagement/components/ViewModal.tsx
+++ b/src/pages/supplier/admission/admissionReviewManagement/components/ViewModal.tsx
@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Modal, Descriptions } from 'antd';
+import { Modal, Descriptions, Spin } from 'antd';

 import { coscoAccessWork } from '../services'
 import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
@ -50,22 +50,30 @@ const ViewModal: React.FC<{
  //渲染数据
  const [data, setData] = useState<Data | null>(null);
  const supplierDetailModal = useSupplierDetailModal();
+  const [loading, setLoading] = useState(false);
+  
  //初始化
-  useEffect(() => {
-    if (record.id) {
-      coscoAccessWork(record.id).then((res) => {
-        const { code, data } = res;
-        if (code == 200) {
-          setData(data)
-        }
-      })
-    }
-  }, [record])
+    useEffect(() => {
+      if (record.id) {
+        setLoading(true);
+        coscoAccessWork(record.id)
+          .then((res) => {
+            const { code, data } = res;
+            if (code == 200) {
+              setData(data);
+            }
+          })
+          .finally(() => setLoading(false));
+      } else {
+        setData(null);
+      }
+    }, [record]);

  return (
    <Modal title="查看详情" visible={visible} footer={null} onCancel={onCancel} width={800}>
+      <Spin spinning={loading}> 
      {data && (
-        <Descriptions bordered column={1}  labelStyle={{ width: 160 }}>
+        <Descriptions bordered column={1} labelStyle={{ width: 160 }}>
          <Descriptions.Item label="准入部门" >{data.coscoAccessWork.deptName}</Descriptions.Item>
          <Descriptions.Item label="准入供应商">

@ -79,6 +87,13 @@ const ViewModal: React.FC<{

          {data.coscoAccessWork.accessType === 'scattered' && (
            <>
+              <Descriptions.Item label="申请准入品类">
+                {data.coscoAccessCategoryList.map((item) => {
+                  return (
+                    <div style={{ margin: '5px' }}>{item.categoryName}</div>
+                  )
+                })}
+              </Descriptions.Item>
              <Descriptions.Item label="准入说明">{data.coscoAccessWork.accessDesc}</Descriptions.Item>
              <Descriptions.Item label="附件">
                <a href={data.coscoAccessWorkAttachments.fileUrl} target="_blank" rel="noreferrer">{data.coscoAccessWorkAttachments.fileName}</a>
@ -86,9 +101,17 @@ const ViewModal: React.FC<{
            </>
          )}
          {data.coscoAccessWork.accessType === 'offline' && (
-              <Descriptions.Item label="供应商符合性审查">
-                  <a href={data.coscoAccessWorkAttachments.fileUrl} target="_blank" rel="noreferrer">{data.coscoAccessWorkAttachments.fileName}</a>
+            <>
+              <Descriptions.Item label="申请准入品类">
+                {data.coscoAccessCategoryList.map((item) => {
+                  return (
+                    <div style={{ margin: '5px' }}>{item.categoryName}</div>
+                  )
+                })}
              </Descriptions.Item>
+              <Descriptions.Item label="供应商符合性审查">
+                <a href={data.coscoAccessWorkAttachments.fileUrl} target="_blank" rel="noreferrer">{data.coscoAccessWorkAttachments.fileName}</a>
+              </Descriptions.Item></>
          )}


@ -116,6 +139,7 @@ const ViewModal: React.FC<{

        </Descriptions>
      )}
+      </Spin>
    </Modal>
  );
 };