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

import React, { useEffect, useState } from "react";
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';
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;
  region: string;
  supplierType: string;
  personName: string;
  regTime: string;
  status: string;
  idCard?: string;
  personPhone?: string;
  type?: string;
  createTime?: string;
}
interface Props {
  dispatch: any;
}
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<TreeNode[]>([]);
  const [treeSelected, setTreeSelected] = useState<string[]>([]);
  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 handleSearch = () => {
    setPagination(p => ({ ...p, current: 1 }));
    getList(selectedKeys);
  };
  const handleReset = () => {
    form.resetFields();
    setPagination(p => ({ ...p, current: 1 }));
    getList(selectedKeys);
  };

  const handleTreeSelect = (keys: React.Key[]) => {
    const key = keys[0] as string;
    if(key) {
      setSelectedKeys(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 {
      const values = form.getFieldsValue();
      const { code, data, message } = await getPagePe({ pageNo, pageSize, treeId, ...values });
      if (code === 200) {
        setData(data.records);
        setPagination({ current: pageNo, pageSize, total: data.total });
      } else {
        message.error(message);
      }
    } finally {
      setLoading(false);
    }
  };

  // 初始化
  useEffect(() => {
    setTreeLoading(true);
    treeData({}).then((res) => {
      const { code, data } = res;
      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: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
      width: 60,
      render: (_: any, __: any, idx: number) => (((pagination.current ?? 1) - 1) * (pagination.pageSize ?? 10)) + idx + 1,
    },
    {
      title: '姓名',
      dataIndex: 'personName',
      key: 'personName',
      align: 'center',
      ellipsis: true,
      render: (dom, record) =>
        <Tooltip title={record.personName}>
          <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: '操作',
      key: 'option',
      align: 'center',
      width: 140,
      render: (record: any) => (
        <Space>
          <a onClick={() => { 
             dispatch({
              type: 'globalModal/show',
              payload: {
                id: record.id,
              },
            });
           }}>查看</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.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>
            </Form.Item>
            <Form.Item>
              <Button className="buttonReset" icon={<DeleteOutlined />} onClick={handleReset}>重置</Button>
            </Form.Item>
            <Form.Item style={{ marginLeft: 'auto' }}>
              <Button className="buttonOther" type="primary" onClick={() => {
                window.open(`${SERVER_BASE}/coscoSupplierBase/getPagePeExport`, '_blank');
              }}>
                数据导出
              </Button>
            </Form.Item>
          </Form>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <div className={`treeBlock${collapsed ? ' collapsed' : ''}`}>
            {!collapsed && (
              <>
                <div className="dataTree">
                  <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>
                </div>
              </>
            )}
            {collapsed && (
              <div className="shrinkBlock expandOnly">
                <div className="btn" onClick={() => setCollapsed(false)}><DoubleRightOutlined /></div>
              </div>
            )}
          </div>
          <div className="rightMain" style={{ width: collapsed ? 'calc(100% - 30px)' : 'calc(100% - 310px)' }}>
            <Table
              rowKey="id"
              columns={columns}
              dataSource={data}
              loading={loading}
              pagination={{ ...tableProps.pagination, total: pagination.total }}
              onChange={(pagination) => getList(selectedKeys, pagination.current!, pagination.pageSize!)}
              style={{ flex: 1, minHeight: 0 }}
              scroll={{ y: 'calc(100vh - 350px)' }}
            />
          </div>
        </div>
      </div>
      <SupplierViewModal visible={viewVisible} record={currentRecord} onCancel={() => setViewVisible(false)} />
      <SupplierDetailModal visible={detailVisible} record={currentRecord} onCancel={() => setDetailVisible(false)} />
    </>
  );
};

export default connect()(PersonQualifiedSupplierQuery);