safety-eval-service-frontend/src/pages/Container/SafetyEvalBusiness/ProjectFlow/TeamContent.js

import React, { useEffect, useState } from "react";
import {
  Tag, Button, Card, Row, Col, Table, Statistic, Flex, Modal, Radio, Checkbox, message, Spin,
} from "antd";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { NS_SAFETY_EVAL_BUSINESS } from "~/enumerate/namespace";
import { tools } from "@cqsjjb/jjb-common-lib";

const { router } = tools;

const ROLE_DEFINITIONS = [
  { value: "MARKETING_BUSINESS_REP", name: "市场部业务员", unique: false, summary: "获取项目基础信息，形成风险分析记录；风险通过后签订合同并下达任务通知单。" },
  { value: "TECHNICAL_LEAD", name: "技术负责人", unique: false, summary: "评估人员专业匹配与技术可行性，审核检查表并开展评价报告技术审核。" },
  { value: "PROCESS_CONTROL_LEAD", name: "过程控制负责人", unique: true, summary: "核查利益冲突、资质范围和人员配置，负责受控管理、程序合规审核及归档前校验。" },
  { value: "FINANCE_STAFF", name: "财务人员", unique: false, summary: "核算人工、费用、税金和利润等全成本，评估项目经济性及合同金额合理性。" },
  { value: "EVALUATION_AGENCY_HEAD", name: "评价机构负责人", unique: false, summary: "综合多方意见决定是否承接项目，并在全部审核通过后终审签发评价报告。" },
  { value: "EVALUATION_DEPT_MANAGER", name: "评价部经理", unique: false, summary: "签发项目组任命文件，审核组长资格、行业经验及成员专业配置。" },
  { value: "PROJECT_LEAD", name: "项目负责人（项目组组长）", unique: true, summary: "制定实施计划并组织启动、初勘、检查表、现场勘查、整改复查及报告编制。" },
  { value: "PROJECT_TEAM_MEMBERS", name: "项目组各专业组员", unique: false, summary: "按专业分工开展资料收集、检查表编制、现场检查、危险辨识和评价报告专业内容编写。" },
  { value: "INTERNAL_AUDITOR", name: "内审人", unique: false, summary: "审核报告初稿及修改结果，重点核查依据、危险辨识、单元划分、评价方法和结论。" },
  { value: "REPORT_COMPILER", name: "报告编制人", unique: false, summary: "整合各专业内容形成报告初稿，根据各级审核意见修改并整理全过程档案。" },
  { value: "ARCHIVES_ADMIN", name: "档案管理员", unique: false, summary: "办理档案交接、编号、分类、装订和入库，并按规定开展报告信息公开。" },
];

const TeamContent = (props) => {
  const { safetyEvalBusiness, evalProjectMemberPage, evalProjectMemberSave } = props;
  const { evalProjectDetailData, memberLoading, memberSaveLoading } = safetyEvalBusiness || {};
  const participants = evalProjectDetailData?.participants || [];
  const projectId = router.query?.id;

  const [modalOpen, setModalOpen] = useState(false);
  const [selectedRole, setSelectedRole] = useState(null);
  const [selectedPersons, setSelectedPersons] = useState([]);
  const [teamMembers, setTeamMembers] = useState([]);

  const fetchData = async () => {
    if (!projectId) return;
    const res = await evalProjectMemberPage({ projectId });
    if (res?.success !== false && res?.data) {
      setTeamMembers(
        res.data.map((item) => ({
          ...item,
          roles: (item.role || []).map((r) => ({
            role: r,
            duty: item.responsibility || ROLE_DEFINITIONS.find((d) => d.value === r)?.summary || "",
          })),
        })),
      );
    }
  };

  useEffect(() => {
    if (evalProjectDetailData?.id) fetchData();
  }, [projectId, evalProjectDetailData?.id]);

  const isUniqueRole = selectedRole && ROLE_DEFINITIONS.find((r) => r.value === selectedRole)?.unique;

  const handlePersonChange = (checkedValues) => {
    if (isUniqueRole && checkedValues.length > 1) {
      setSelectedPersons([checkedValues[checkedValues.length - 1]]);
      return;
    }
    setSelectedPersons(checkedValues);
  };

  const handleOpenModal = () => {
    setSelectedRole(null);
    setSelectedPersons([]);
    setModalOpen(true);
  };

  const handleConfirm = () => {
    if (!selectedRole) { message.warning("请选择1个项目角色"); return; }
    if (selectedPersons.length === 0) { message.warning("请至少选择1名人员"); return; }
    const role = ROLE_DEFINITIONS.find((r) => r.value === selectedRole);
    if (role?.unique && selectedPersons.length > 1) { message.warning("该角色为单人唯一角色，只能选择1名人员"); return; }

    const newEntries = selectedPersons.map((personId) => {
      const p = participants.find((item) => item.id === personId);
      const existing = teamMembers.find((m) => m.personnelId === personId);
      return {
        personnelId: p.id,
        personnelName: p.name,
        deptName: p.deptName,
        capacity: p.capacity,
        ...(existing?.id ? { id: existing.id } : {}),
        roles: [{ role: selectedRole, duty: role?.summary || "" }],
      };
    });

    setTeamMembers((prev) => {
      const merged = [...prev];
      newEntries.forEach((entry) => {
        const existing = merged.find((m) => m.personnelId === entry.personnelId);
        if (existing) {
          if (!existing.roles.find((r) => r.role === entry.roles[0].role)) {
            existing.roles.push(entry.roles[0]);
          }
        } else {
          merged.push(entry);
        }
      });
      return merged;
    });
    setModalOpen(false);
  };

  const handleRemovePerson = (personnelId) => {
    setTeamMembers((prev) => prev.filter((m) => m.personnelId !== personnelId));
  };

  const handleSave = async () => {
    const payload = teamMembers.map((m) => ({
      id: m.id,
      projectId,
      personnelId: m.personnelId,
      personnelName: m.personnelName,
      deptName: m.deptName,
      capacity: m.capacity,
      role: m.roles.map((r) => r.role),
      responsibility: m.roles[0]?.duty,
    }));
    const res = await evalProjectMemberSave(payload);
    if (res?.success !== false) {
      message.success("保存成功");
      fetchData();
    }
  };

  const allRoles = teamMembers.flatMap((m) => m.roles.map((r) => r.role));

  const columns = [
    { title: "姓名", dataIndex: "personnelName", width: 120, ellipsis: true },
    { title: "部门/岗位", dataIndex: "deptName", width: 200, ellipsis: true },
    {
      title: "项目角色", dataIndex: "roles", width: 350,
      render: (roles) => (
        <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
          {roles.map((r) => (
            <Tag key={r.role} color="blue">
              {ROLE_DEFINITIONS.find((d) => d.value === r.role)?.name || r.role}
            </Tag>
          ))}
        </div>
      ),
    },
    { title: "资质与专业", dataIndex: "capacity", width: 200, ellipsis: true },
    {
      title: "主要职责", dataIndex: "roles", ellipsis: true,
      render: (roles) => roles.map((r) => r.duty).join("；"),
    },
    {
      title: "操作", width: 80, fixed: "right",
      render: (_, record) => (
        <Button type="link" danger size="small" onClick={() => handleRemovePerson(record.personnelId)}>移除</Button>
      ),
    },
  ];

  return (
    <Spin spinning={memberLoading}>
      <div>
        <div className="pf-permission">
          <Tag color="blue" className="pf-tag">评价部经理 / 机构主账号</Tag>
          <span className="pf-desc">
            添加人员时可同时选择多个项目角色和多名人员；普通角色可配置多人。"项目负责人（项目组组长）"和"过程控制负责人"每个项目只能配置1人，选择任一唯一角色时，本次只能选择1名人员。
          </span>
        </div>

        <Row gutter={16} className="pf-stats-row">
          <Col span={6}>
            <Card size="small">
              <Statistic title="已配置人员" value={teamMembers.length} suffix="人" />
            </Card>
          </Col>
          <Col span={6}>
            <Card size="small">
              <Statistic title="已覆盖角色" value={new Set(allRoles).size + " / 11"} />
            </Card>
          </Col>
          <Col span={6}>
            <Card size="small">
              <Statistic title="项目负责人" value={allRoles.includes("PROJECT_LEAD") ? "已配置" : "待配置"}
                valueStyle={{ color: allRoles.includes("PROJECT_LEAD") ? "#52c41a" : "#faad14" }} />
            </Card>
          </Col>
          <Col span={6}>
            <Card size="small">
              <Statistic title="过程控制负责人" value={allRoles.includes("PROCESS_CONTROL_LEAD") ? "已配置" : "待配置"}
                valueStyle={{ color: allRoles.includes("PROCESS_CONTROL_LEAD") ? "#52c41a" : "#faad14" }} />
            </Card>
          </Col>
        </Row>

        <Flex justify="flex-end" className="pf-add-bar">
          <Button type="primary" size="small" onClick={handleOpenModal}>＋ 添加人员与角色</Button>
        </Flex>

        <Table dataSource={teamMembers} columns={columns} rowKey="personnelId" pagination={false} scroll={{ x: 1600, y: 320 }} />

        <details className="pf-role-guide">
          <summary className="pf-role-guide-title">查看11类项目角色职责说明</summary>
          <div className="pf-role-guide-grid">
            {ROLE_DEFINITIONS.map((role) => (
              <div key={role.value} className="pf-role-card">
                <strong className="pf-role-card-title">
                  {role.name}
                  {role.unique && <Tag color="blue" className="pf-unique-tag">单人唯一</Tag>}
                </strong>
                <p className="pf-role-card-desc">{role.summary}</p>
              </div>
            ))}
          </div>
        </details>

        <Flex justify="flex-end" gap={8} className="pf-bottom-actions">
          <Button onClick={handleSave} loading={memberSaveLoading}>暂存</Button>
          <Button>生成项目组任命文件</Button>
          <Button type="primary">确认项目组</Button>
        </Flex>

        <Modal title="添加项目人员与角色" open={modalOpen} onCancel={() => setModalOpen(false)} width={700}
          footer={
            <Flex justify="flex-end" gap={8}>
              <Button onClick={() => setModalOpen(false)}>取消</Button>
              <Button type="primary" onClick={handleConfirm}>确认添加</Button>
            </Flex>
          }
        >
          <div className="pf-modal-hint">
            {selectedRole && ROLE_DEFINITIONS.find((r) => r.value === selectedRole)?.unique
              ? `已选择唯一角色，人员数量限制为1人。当前已选 ${selectedPersons.length} 人。`
              : `已选择 ${selectedRole ? 1 : 0} 个角色、${selectedPersons.length} 名人员。`}
          </div>

          <div className="pf-modal-section">
            <h4 className="pf-modal-section-title">1. 选择项目角色</h4>
            <Radio.Group value={selectedRole}
              onChange={(e) => { setSelectedRole(e.target.value); setSelectedPersons([]); }}
              className="pf-w-full"
            >
              <div className="pf-choice-grid">
                {ROLE_DEFINITIONS.map((role) => (
                  <label key={role.value}
                    className={`pf-choice-card ${selectedRole === role.value ? "pf-choice-card-active" : ""}`}
                  >
                    <Radio value={role.value} className="pf-hidden-control" />
                    <strong className="pf-choice-card-name">
                      {role.name}
                      {role.unique && <Tag color="blue" className="pf-unique-tag">单人唯一</Tag>}
                    </strong>
                    <span className="pf-choice-card-sub">{role.summary}</span>
                  </label>
                ))}
              </div>
            </Radio.Group>
          </div>

          <div>
            <h4 className="pf-modal-section-title">2. 选择人员（可多选）</h4>
            {participants.length === 0 ? (
              <div className="pf-empty">暂无可用人员数据</div>
            ) : (
              <Checkbox.Group value={selectedPersons} onChange={handlePersonChange} className="pf-w-full">
                <div className="pf-choice-grid-full">
                  {participants.map((person) => (
                    <label key={person.id}
                      className={`pf-choice-card ${selectedPersons.includes(person.id) ? "pf-choice-card-active" : ""}`}
                    >
                      <Checkbox value={person.id} className="pf-hidden-control" />
                      <strong className="pf-choice-card-name">{person.name} · {person.deptName}</strong>
                      <span className="pf-choice-card-sub">
                        {person.posName}{person.capacity ? ` · ${person.capacity}` : ""}
                      </span>
                    </label>
                  ))}
                </div>
              </Checkbox.Group>
            )}
          </div>
        </Modal>
      </div>
    </Spin>
  );
};

export default Connect([NS_SAFETY_EVAL_BUSINESS], true)(TeamContent);