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

import React, { useState, useEffect } from "react";
import { Tag, Button, Card, Table, Select, Input, Flex, Typography, message, Popover, Image } from "antd";
import { CheckCircleFilled } from "@ant-design/icons";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { NS_SAFETY_EVAL_BUSINESS } from "~/enumerate/namespace";
import { tools } from "@cqsjjb/jjb-common-lib";

const { TextArea } = Input;
const { router } = tools;

const ControlContent = (props) => {
  const projectId = router.query?.id;
  const { processControlDetail, processControlFiles } =
    props.safetyEvalBusiness || {};
  const { processControl, controllers, reviewItems } =
    processControlDetail || {};

  const [selectPeople, setSelectPeople] = useState(null);
 
  // 当前步骤：1-过程控制审核 2-机构负责人签发 3-项目归档
  const [step, setStep] = useState(1);

  // 过程控制审核
  const [rows, setRows] = useState([]);
  

  // 项目归档
  const [files, setFiles] = useState([]);
 

  // 机构负责人签发
  const [approvalOpinion, setApprovalOpinion] = useState("");

  const fetchDetail = () => {
    props.evalProcessControlDetail({ projectId }).then((res) => {
      if (res?.success) {
      
        if (res?.data?.signTaskPersonCo) {
          setSelectPeople({
            value: res?.data?.signTaskPersonCo?.signerPersonnelId,
            label: res?.data?.signTaskPersonCo?.signerName,
          });
        }
      }
    });
  };

  const fetchFiles = () => {
    props.evalProcessControlFiles({ projectId });
  };

  useEffect(() => {
    if (projectId) {
      fetchDetail();
      fetchFiles();
    }
  }, [projectId]);

  useEffect(() => {
    if (reviewItems) {
      setRows(
        reviewItems.map((item) => ({
          ...item,
          _key: item.id || item.reviewDimensionCode,
        })),
      );
    }
    
    if (processControl?.opinionContent) {
      setApprovalOpinion(processControl.opinionContent);
      
    }
  }, [processControlDetail]);

  useEffect(() => {
    if (processControlFiles) {
      setFiles(processControlFiles);
    }
  }, [processControlFiles]);

  const updateRow = (index, field, value) => {
    const next = [...rows];
    next[index] = { ...next[index], [field]: value };
    setRows(next);
  };

  const isDispatched =
    processControl?.reviewerSignatureTaskStatus !== "non_dispatched";
  const isSignatureCompleted =
    processControl?.reviewerSignatureTaskStatus === "completed";


  const canArchive = isSignatureCompleted ;

  // 过程控制签字提交（confirm）
  const handleConfirm = async (resultCode) => {
    if (!projectId) return;
    if(!rows.every((r) => r.reviewConclusion)){
      message.error("请填写所有核查项的结果");
      return;
    }
    const payload = {
      id: processControl?.id,
      projectId,
      resultCode,
      opinionContent: approvalOpinion,
      reviewItems: rows.map((r) => ({
        bizType: "eval_process_control",
        bizId: processControl?.id,
        reviewDimensionCode: r.reviewDimensionCode,
        reviewDimensionName: r.reviewDimensionName,
        reviewFocus: r.reviewFocus,
        reviewConclusion: r.reviewConclusion,
        reviewOpinion: r.reviewOpinion,
      })),
    };
    const res = await props.evalProcessControlConfirm(payload);
    if (res?.success !== false) {
      message.success(
        resultCode === "passed" ? "已提交通过审核" : "已提交退回修改",
      );
      fetchDetail();     
    }
  };

  // 下发签字任务（assign）
  const handleAssign = async () => {
    if (!projectId) return;
    const res = await props.evalProcessControlAssign({
      projectId,
      signTaskPersonCmd: {
        signerPersonnelId: selectPeople?.value,
        signerName: selectPeople?.label,
      },
      opinionContent: approvalOpinion,
    });
    if (res?.success !== false) {
      message.success("已下发签字任务");
      fetchDetail();
    }
  };

  // 归档项目并入库
  const handleArchive = async () => {
    if (!projectId) return;
    const res = await props.evalProcessControlArchive({ projectId });
    if (res?.success !== false) {
      message.success("项目已归档入库");
      fetchDetail();
      props.getDetail?.();
    }
  };

  const reviewColumns = [
    { title: "程序审核项", dataIndex: "reviewDimensionName", width: 120 },
    { title: "核查内容", dataIndex: "reviewFocus", width: 200 },
    {
      title: "结果",
      dataIndex: "reviewConclusion",
      width: 150,
      render: (val, _, idx) => (
        <Select
          value={val}
          size="small"
          style={{ width: 130 }}
          allowClear
          placeholder="请选择结果"
          onChange={(v) => updateRow(idx, "reviewConclusion", v)}
        >
          <Select.Option value="conform_to">符合</Select.Option>
          <Select.Option value="not_conform_to">不符合</Select.Option>
        </Select>
      ),
    },
    {
      title: "意见",
      dataIndex: "reviewOpinion",
      render: (val, _, idx) => (
        <Input
          size="small"
          value={val}
          allowClear
          maxLength={60}
          placeholder="请输入意见"
          onChange={(e) => updateRow(idx, "reviewOpinion", e.target.value)}
        />
      ),
    },
  ];

  const isImage = (name) =>
    /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i.test(name || "");

  const fileColumns = [
    { title: "流程名称", dataIndex: "processName", ellipsis: true },
    { title: "条目名称", dataIndex: "itemName", ellipsis: true },
    
    {
      title: "文件",
      dataIndex: "projectDocUrl",
    
      render: (val) => {
        let files = [];
        if (typeof val === "string") {
          try { files = JSON.parse(val); } catch { files = []; }
        } else if (Array.isArray(val)) {
          files = val;
        }
        if (!files.length) return "-";
        return (
          <Flex vertical gap={2}>
              <Popover
                title="附件列表"
                content={
                  <Flex vertical gap={4} >
                    {files.map((f, i) => {
                      const url = f.url || f.response?.url;
                      return isImage(f.name) ? (
                        <Flex key={f.uid || i} align="center" gap={4}>
                          {(
                            <Image
                              src={url}
                              width={80}
                            />
                          )}
                        </Flex>
                      ) : (
                        <a
                          key={f.uid || i}
                          style={{ cursor: "pointer" }}
                          onClick={() => window.open(url)}
                        >
                        {f.name || "查看文件"}
                        </a>
                      );
                    })}
                  </Flex>
                }
                trigger="hover"
                placement="topLeft"
              >
                <a
                  onClick={(e) => e.preventDefault()}
                  style={{ cursor: "pointer" }}
                >
                  {files.length}个附件
                </a>
              </Popover>
          </Flex>
        );
      },
    },
    
  ];

  const STEP_ITEMS = [
    { key: 1, label: "过程控制审核" },
    { key: 2, label: "机构负责人签发" },
    { key: 3, label: "项目归档" },
  ];

  return (
    <div>
      <Flex
        gap={0}
        style={{ marginBottom: 16, borderBottom: "1px solid #e8e8e8" }}
      >
        {STEP_ITEMS.map((item) => (
          <Button
            key={item.key}
            type="text"
            onClick={() => setStep(item.key)}
            style={{
              minWidth: 128,
              borderBottom:
                step === item.key
                  ? "3px solid #1677ff"
                  : "3px solid transparent",
              borderRadius: 0,
              fontWeight: step === item.key ? 700 : 400,
              color: step === item.key ? "#1677ff" : undefined,
              background: step === item.key ? "#e6f4ff" : "transparent",
            }}
          >
            {item.label}
          </Button>
        ))}
      </Flex>

      {step === 1 && (
        <Card
          title="过程控制审核"
          style={{ marginBottom: 16 }}
          styles={{ body: { paddingBottom: 0 } }}
        >
          <Table
            dataSource={rows}
            columns={reviewColumns}
            rowKey="_key"
            pagination={false}
            size="small"
          />

          <Flex justify="flex-end" gap={8} style={{ padding: "12px 0" }}>
            <Button
              type="primary"
              onClick={() => handleConfirm("passed")}
              loading={props.safetyEvalBusiness?.processControlConfirmLoading}
            >
              过程控制签字提交
            </Button>
          </Flex>
        </Card>
      )}

      {step === 2 && (
        <Card
          title="机构负责人签发"
          style={{ marginBottom: 16 }}
          styles={{ body: { paddingBottom: 0 } }}
        >
          <div className="final-approval-card">
            <div
              style={{
                marginBottom: 12,
                display: "flex",
                alignItems: "center",
                gap: 8,
              }}
            >
              <CheckCircleFilled style={{ color: "#52c41a", fontSize: 16 }} />
              <span>无可能引发法律纠纷的重大风险</span>
            </div>
            <div
              style={{
                marginBottom: 12,
                display: "flex",
                alignItems: "center",
                gap: 8,
              }}
            >
              <CheckCircleFilled style={{ color: "#52c41a", fontSize: 16 }} />
              <span>评价过程无违规现象</span>
            </div>
            <div
              style={{
                marginBottom: 12,
                display: "flex",
                alignItems: "center",
                gap: 8,
              }}
            >
              <CheckCircleFilled style={{ color: "#52c41a", fontSize: 16 }} />
              <span>全过程记录和签字完整</span>
            </div>

            <div style={{ marginBottom: 12 }}>
              <Typography.Text strong>签发意见</Typography.Text>
              <TextArea
                rows={3}
                value={approvalOpinion}
                onChange={(e) => setApprovalOpinion(e.target.value)}
                placeholder="请输入签发意见"
                style={{ marginTop: 4 }}
              />
            </div>

            <Flex
              justify="space-between"
              align="center"
              style={{ paddingBottom: 16 }}
            >
              <Flex gap={8} align="center">
                <Typography.Text type="secondary">
                  评价机构负责人
                </Typography.Text>
                <Select
                  placeholder="请选择评价机构负责人"
                  size="small"
                  allowClear
                  style={{ width: 180 }}
                  disabled={isDispatched}
                  value={selectPeople?.value}
                  onChange={(value, option) => {
                    setSelectPeople(option);
                  }}
                  options={(controllers || []).map((r) => ({
                    value: r.personnelId,
                    label: r.personnelName,
                  }))}
                />
                <Button
                  size="small"
                  onClick={handleAssign}
                  loading={
                    props.safetyEvalBusiness?.processControlAssignLoading
                  }
                  disabled={isDispatched || !selectPeople?.value}
                >
                  {isDispatched ? "已下发APP签字" : "下发APP签字"}
                </Button>
              </Flex>
            </Flex>
          </div>
        </Card>
      )}

      {step === 3 && (
        <Card
          title="项目归档"
          style={{ marginBottom: 16 }}
          styles={{ body: { paddingBottom: 0 } }}
        >
          <div className="pf-permission">
            <Tag color="blue" className="pf-tag">
              项目归档
            </Tag>
            <span className="pf-desc">
              项目过程文件清单，确认签字完成后归档入库
            </span>
          </div>

          <Table
            dataSource={files}
            columns={fileColumns}
            rowKey={(record) =>
              `${record.processName}-${record.materialName}-${record.itemName}`
            }
            pagination={false}
            size="small"
          />

          <Flex
            justify="space-between"
            align="center"
            style={{ marginTop: 12, paddingBottom: 16 }}
          >
            
            <Button
              type="primary"
              onClick={handleArchive}
              loading={props.safetyEvalBusiness?.processControlArchiveLoading}
              disabled={!canArchive}
              title={
                !canArchive
                  ? !isSignatureCompleted
                    ? "需签字完成后才可归档"
                    : "需生成归档交接单后才可归档"
                  : ""
              }
            >
              双方签字并确认入库
            </Button>
          </Flex>
        </Card>
      )}
    </div>
  );
};

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