safety-eval-service-frontend/src/pages/Container/QualApplication/FilingForm/components/PersonnelStep.jsx

import { Button, Modal, Space, Table } from "antd";
import { useState } from "react";
import StaffViewModal from "~/pages/Container/EnterpriseInfo/PersonnelInfo/StaffViewModal";

import OrgPersonnelSelectModal from "./OrgPersonnelSelectModal";

export default function PersonnelStep({
  personnelList = [],
  disabled,
  onAdd,
  onRemove,
}) {
  const [selectOpen, setSelectOpen] = useState(false);
  const [viewId, setViewId] = useState("");

  const existingIds = personnelList.map((item) => String(item.sourcePersonnelId || ""));

  return (
    <>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12 }}>
        <span style={{ fontWeight: 600 }}>
          备案人员信息
          <span style={{ marginLeft: 8, color: "rgba(0,0,0,0.45)", fontWeight: 400 }}>
            当前 {personnelList.length} 人
          </span>
        </span>
        {!disabled && (
          <Button type="primary" size="small" onClick={() => setSelectOpen(true)}>添加人员信息</Button>
        )}
      </div>
      <Table
        size="small"
        rowKey="id"
        pagination={false}
        dataSource={personnelList}
        columns={[
          { title: "序号", width: 60, render: (_, __, index) => index + 1 },
          { title: "人员姓名", dataIndex: "personName" },
          { title: "类型", dataIndex: "personTypeName" },
          { title: "职务", dataIndex: "positionName" },
          { title: "职称", dataIndex: "titleName" },
          {
            title: "操作",
            width: 140,
            render: (_, record) => (
              <Space size="small">
                <Button
                  type="link"
                  size="small"
                  onClick={() => setViewId(record.sourcePersonnelId || record.id)}
                >
                  查看
                </Button>
                {!disabled && (
                  <Button type="link" size="small" danger onClick={() => onRemove?.(record)}>删除</Button>
                )}
              </Space>
            ),
          },
        ]}
      />
      <OrgPersonnelSelectModal
        open={selectOpen}
        existingIds={existingIds}
        onCancel={() => setSelectOpen(false)}
        onConfirm={(ids, rows) => {
          onAdd?.(ids, rows);
          setSelectOpen(false);
        }}
      />
      <StaffViewModal
        open={!!viewId}
        currentId={viewId}
  
        onCancel={() => setViewId("")}
      />
    </>
  );
}