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

import { Button, Modal, Space, Table } from "antd";
import { useState } from "react";
import { TITLE_LEVEL_MAP } from "~/enumerate/enterpriseOptions";
import StaffViewModal from "~/components/StaffViewModal";
import OrgPersonnelSelectModal from "./OrgPersonnelSelectModal";

const PersonnelStep=({
  personnelList = [],
  disabled,
  onAdd,
  onRemove,
})=> {
  const [selectOpen, setSelectOpen] = useState(false);
  const [viewId, setViewId] = useState("");
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

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

  const handleBatchRemove = () => {
    const records = selectedRowKeys
      .map((key) => personnelList.find(
        (item) => String(item.sourcePersonnelId || item.id) === key,
      ))
      .filter(Boolean);
    if (records.length > 0) {
      onRemove?.(records);
    }
    
  };

  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 && (
          <Space size="small">
            <Button type="primary" size="small" onClick={() => setSelectOpen(true)}>添加人员信息</Button>
            {selectedRowKeys.length > 0 && (
              <Button danger size="small" onClick={handleBatchRemove}>批量删除</Button>
            )}
          </Space>
        )}
      </div>
      <Table
        size="small"
        rowKey={(record) => String(record.sourcePersonnelId || record.id)}
        pagination={false}
        scroll={{ y: 400 }}
        dataSource={personnelList}
        rowSelection={!disabled ? {
          selectedRowKeys,
          onChange: setSelectedRowKeys,
        } : undefined}
        columns={[
          { title: "序号", width: 60, render: (_, __, index) => index + 1 },
          { title: "人员姓名", dataIndex: "userName", render: (_, record) => record.userName || record.personName },
          { title: "类型", dataIndex: "personTypeName" },
          
          { title: "职称", dataIndex: "titleName", render: (_, record) => TITLE_LEVEL_MAP[record.titleCode] ?? (record.titleCode || "-") },
          {
            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("")}
      />
    </>
  );
}

export default PersonnelStep;