个人与集团供应商增加部门

src/pages/supplier/informationRetrieval/personQualifiedSupplierQuery/index.tsx

@@ -1,22 +1,14 @@
 import React, { useEffect, useState } from "react";
-//第三方UI库/组件
-import { Form, Button, Table, Input, Tree, Space, Tooltip } from 'antd';
+import { Form, Button, Table, Input, Tree, Space, Tooltip, Spin } from 'antd';
 import { SearchOutlined, DeleteOutlined, DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons';
-//类型定义
 import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
-//umi 相关
 import { connect } from 'umi';
-//本地组件、弹窗、业务逻辑
 import SupplierViewModal from './components/SupplierViewModal';
 import SupplierDetailModal from './components/SupplierDetailModal';
-//本地服务/接口
 import { treeData, getPagePe } from './services';
-//统一列表分页
 import tableProps from '@/utils/tableProps'
 
-//下拉数据接口
 type OptionType = { label: string; value: string };
-// 列表数据接口
 interface Data {
   id: number;
   name: string;
@@ -25,62 +17,95 @@ interface Data {
   personName: string;
   regTime: string;
   status: string;
+  idCard?: string;
+  personPhone?: string;
+  type?: string;
+  createTime?: string;
 }
 interface Props {
   dispatch: any;
 }
-const personQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
-  //搜搜表单
+interface TreeNode {
+  key: string;
+  title: string;
+  orgId: string;
+  orgName: string;
+  [key: string]: any;
+  children?: TreeNode[];
+}
+
+function formatTreeData(nodes: any[]): TreeNode[] {
+  return nodes.map(node => ({
+    ...node,
+    key: node.orgId,
+    title: node.orgName
+  }));
+}
+
+function updateNodeChildren(list: TreeNode[], key: string, children: TreeNode[]): TreeNode[] {
+  return list.map(item => {
+    if (item.key === key) return { ...item, children };
+    if (item.children) return { ...item, children: updateNodeChildren(item.children, key, children) };
+    return item;
+  });
+}
+
+const findFirstLeafKey = (nodes: any[]): string | undefined => {
+  for (const node of nodes) {
+    if (!node.children) return node.key;
+    const found = findFirstLeafKey(node.children);
+    if (found) return found;
+  }
+  return undefined;
+};
+
+const PersonQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
   const [form] = Form.useForm();
-  // 树数据
-  const [dataTree, setDataTree] = useState<any[]>([]);
-  //默认选中树
+  const [dataTree, setDataTree] = useState<TreeNode[]>([]);
   const [treeSelected, setTreeSelected] = useState<string[]>([]);
-  //当前树key
   const [selectedKeys, setSelectedKeys] = useState<string>('');
-  //列表数据
   const [data, setData] = useState<Data[]>([]);
-  //列表加载
   const [loading, setLoading] = useState(false);
-  //分页
+  const [treeLoading, setTreeLoading] = useState(false);
   const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 });
-  //查看是否显示状态
   const [viewVisible, setViewVisible] = useState(false);
-  //准入明细是否显示状态
   const [detailVisible, setDetailVisible] = useState(false);
-  //查看、准入明细 参数传递
   const [currentRecord, setCurrentRecord] = useState<any>(null);
-  // 境内/境外下拉数据
-  const [regionOptions, setRegionOptions] = useState<OptionType[]>([]);
-  //集采类别
-  const [categoryOptions, setCategoryOptions] = useState<OptionType[]>([]);
-  //集采库
-  const [storeOptions, setStoreOptions] = useState<OptionType[]>([]);
-  // 导出
-  const handleExport = () => {
-    window.open(
-      `${SERVER_BASE}/coscoSupplierBase/getPagePeExport`,
-      '_blank',
-    );
-  };
+
   // 查询
   const handleSearch = () => {
-    setPagination({ ...pagination, current: 1 });
+    setPagination(p => ({ ...p, current: 1 }));
     getList(selectedKeys);
   };
-  // 重置
   const handleReset = () => {
     form.resetFields();
-    setPagination({ ...pagination, current: 1 });
+    setPagination(p => ({ ...p, current: 1 }));
     getList(selectedKeys);
   };
-  // 点击树节点请求右表
+
   const handleTreeSelect = (keys: React.Key[]) => {
     const key = keys[0] as string;
     setSelectedKeys(key);
-    getList(key)
+    setTreeSelected([key]);
+    getList(key);
   };
-  //列表方法
+
+  // 懒加载树节点
+  const onLoadTreeData = async (treeNode: any) => {
+    if (treeNode.children && treeNode.children.length > 0) return;
+    setTreeLoading(true);
+    try {
+      const res = await treeData({ upOrgId: treeNode.orgId });
+      const { code, data } = res;
+      if (code === 200) {
+        const children = formatTreeData(data);
+        setDataTree(origin => updateNodeChildren(origin, treeNode.key, children));
+      }
+    } finally {
+      setTreeLoading(false);
+    }
+  };
+
   const getList = async (treeId: string, pageNo: number = 1, pageSize: number = 10) => {
     setLoading(true);
     try {
@@ -90,39 +115,33 @@ const personQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
         setData(data.records);
         setPagination({ current: pageNo, pageSize, total: data.total });
       } else {
-        message.error(message)
+        message.error(message);
       }
     } finally {
       setLoading(false);
     }
   };
-  // 辅助递归找第一个叶子 key（一般最下层为叶子）
-  const findFirstLeafKey = (nodes: any[]): string | undefined => {
-    for (const node of nodes) {
-      if (!node.children || node.children.length === 0) return node.key;
-      const found = findFirstLeafKey(node.children);
-      if (found) return found;
-    }
-    return undefined;
-  };
-  // 初始化时选中树第一个叶子节点，并请求右表
+
+  // 初始化
   useEffect(() => {
-    //tree数据
-    treeData().then((res) => {
+    setTreeLoading(true);
+    treeData({}).then((res) => {
       const { code, data } = res;
-      if (code == 200) {
-        setDataTree(data)
-        const key = findFirstLeafKey(data);
-        if (key) {
-          setSelectedKeys(key);
-          setTreeSelected([key])
-          getList(key)
+      if (code === 200) {
+        const tree = formatTreeData(data);
+        setDataTree(tree);
+        const firstLeafKey = findFirstLeafKey(tree);
+        if (firstLeafKey) {
+          setSelectedKeys(firstLeafKey);
+          setTreeSelected([firstLeafKey]);
+          getList(firstLeafKey);
         }
       }
-    })
+    }).finally(() => {
+      setTreeLoading(false);
+    });
   }, []);
 
-
   const columns: ColumnsType<Data> = [
     {
       title: '序号',
@@ -140,53 +159,21 @@ const personQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
       ellipsis: true,
       render: (dom, record) =>
         <Tooltip title={record.personName}>
-          <a
-            onClick={() => {
-              dispatch({
-                type: 'globalModal/show',
-                payload: {
-                  id: record.id,
-                },
-              });
-            }}
-          >
+          <a onClick={() => {
+            dispatch({
+              type: 'globalModal/show',
+              payload: { id: record.id },
+            });
+          }}>
             {record.personName}
           </a>
         </Tooltip>,
     },
-    {
-      title: '身份证号',
-      dataIndex: 'idCard',
-      key: 'idCard',
-      align: 'center',
-      ellipsis: true,
-    },
-    {
-      title: '联系电话',
-      dataIndex: 'personPhone',
-      key: 'personPhone',
-      align: 'center',
-      ellipsis: true,
-    },
-    {
-      title: '准入单位',
-      dataIndex: 'type',
-      key: 'type',
-      align: 'center',
-    },
-    {
-      title: '创建部门',
-      dataIndex: 'regTime',
-      key: 'regTime',
-      align: 'center',
-    },
-    {
-      title: '创建时间',
-      dataIndex: 'createTime',
-      key: 'createTime',
-      align: 'center',
-      ellipsis: true,
-    },
+    { title: '身份证号', dataIndex: 'idCard', key: 'idCard', align: 'center', ellipsis: true },
+    { title: '联系电话', dataIndex: 'personPhone', key: 'personPhone', align: 'center', ellipsis: true },
+    { title: '准入单位', dataIndex: 'type', key: 'type', align: 'center' },
+    { title: '创建部门', dataIndex: 'regTime', key: 'regTime', align: 'center' },
+    { title: '创建时间', dataIndex: 'createTime', key: 'createTime', align: 'center', ellipsis: true },
     {
       title: '操作',
       key: 'option',
@@ -194,43 +181,38 @@ const personQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
       width: 140,
       render: (record: any) => (
         <Space>
-          <a
-            onClick={() => { setCurrentRecord(record.id); setViewVisible(true); }}
-          >查看</a>
-          <a
-            onClick={() => { setCurrentRecord(record.id); setDetailVisible(true); }}
-          >准入明细</a>
+          <a onClick={() => { setCurrentRecord(record.id); setViewVisible(true); }}>查看</a>
+          <a onClick={() => { setCurrentRecord(record.id); setDetailVisible(true); }}>准入明细</a>
         </Space>
       ),
     },
   ];
+
   const [collapsed, setCollapsed] = useState(false);
+
   return (
     <>
       <div className="common-container on">
         <div className="filter-action-row" style={{ backgroundColor: '#fff', padding: '24px' }}>
-          <Form
-            form={form}
-            layout="inline"
-            className="filter-form"
-          >
+          <Form form={form} layout="inline" className="filter-form">
             <Form.Item name="personName" label="姓名">
               <Input placeholder="请输入姓名关键字" style={{ width: 180 }} maxLength={20} allowClear />
             </Form.Item>
-
             <Form.Item name="idCard" label="身份证号">
               <Input placeholder="请输入身份证号关键字" style={{ width: 180 }} maxLength={18} allowClear />
             </Form.Item>
             <Form.Item>
-              <Button className="buttonSubmit" type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={handleSearch} >
+              <Button className="buttonSubmit" type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={handleSearch}>
                 搜索
               </Button>
             </Form.Item>
             <Form.Item>
-              <Button className="buttonReset" icon={<DeleteOutlined />} onClick={handleReset} >重置</Button>
+              <Button className="buttonReset" icon={<DeleteOutlined />} onClick={handleReset}>重置</Button>
             </Form.Item>
             <Form.Item style={{ marginLeft: 'auto' }}>
-              <Button className="buttonOther" type="primary" onClick={handleExport}>
+              <Button className="buttonOther" type="primary" onClick={() => {
+                window.open(`${SERVER_BASE}/coscoSupplierBase/getPagePeExport`, '_blank');
+              }}>
                 数据导出
               </Button>
             </Form.Item>
@@ -241,14 +223,17 @@ const personQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
             {!collapsed && (
               <>
                 <div className="dataTree">
-                  {dataTree.length > 0 && (
-                    <Tree
-                      treeData={dataTree}
-                      defaultExpandAll
-                      selectedKeys={treeSelected}
-                      onSelect={handleTreeSelect}
-                    />
-                  )}
+                  <Spin spinning={treeLoading}>
+                    {dataTree.length > 0 && (
+                      <Tree
+                        treeData={dataTree}
+                        selectedKeys={treeSelected}
+                        onSelect={handleTreeSelect}
+                        loadData={onLoadTreeData}
+                        defaultExpandAll={false}
+                      />
+                    )}
+                  </Spin>
                 </div>
                 <div className="shrinkBlock">
                   <div className="btn" onClick={() => setCollapsed(true)}><DoubleLeftOutlined /></div>
@@ -270,26 +255,15 @@ const personQualifiedSupplierQuery: React.FC<Props> = ({ dispatch }) => {
               pagination={{ ...tableProps.pagination, total: pagination.total }}
               onChange={(pagination) => getList(selectedKeys, pagination.current!, pagination.pageSize!)}
               style={{ flex: 1, minHeight: 0 }}
-          scroll={{ y: 'calc(100vh - 350px)' }}
+              scroll={{ y: 'calc(100vh - 350px)' }}
             />
           </div>
         </div>
       </div>
-
-      {/* 查看组件 */}
-      <SupplierViewModal
-        visible={viewVisible}
-        record={currentRecord}
-        onCancel={() => setViewVisible(false)}
-      />
-      {/* 准入明细组件 */}
-      <SupplierDetailModal
-        visible={detailVisible}
-        record={currentRecord}
-        onCancel={() => setDetailVisible(false)}
-      />
+      <SupplierViewModal visible={viewVisible} record={currentRecord} onCancel={() => setViewVisible(false)} />
+      <SupplierDetailModal visible={detailVisible} record={currentRecord} onCancel={() => setDetailVisible(false)} />
     </>
   );
 };
 
-export default connect()(personQualifiedSupplierQuery);
+export default connect()(PersonQualifiedSupplierQuery);