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

import React, { useState, useEffect } from "react";
import { Form, Button, Flex, Typography, Steps, Tag, Card, Table, message } from "antd";
import { CheckCircleFilled, DownloadOutlined } 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";
import AttachmentUpload from "~/components/AttachmentUpload";
import "./index.less";

const { router } = tools;

const STAGES = [
  { key: "notice",        index: "01", label: "从业告知" },
  { key: "inspection",    index: "02", label: "现场勘查" },
  { key: "rectification", index: "03", label: "整改通知" },
  { key: "enterprise",    index: "04", label: "企业整改" },
  { key: "review",        index: "05", label: "整改复查" },
];

const ATTACH_TYPE = {
  notice:        "PRACTICE_NOTIFICATION",
  inspection:    "SITE_INSPECTION_FORM",
  rectification: "RECTIFICATION_NOTICE",
  enterprise:    "ENTERPRISE_RECTIFICATION",
  review:        "RECTIFICATION_REVIEW",
};

const downloadTemplate = async () => {
  try {
    const res = await fetch("https://test-dragon-yf-pub.oss-cn-hangzhou.aliyuncs.com/jjb/6a608cb30dc53ed98d0b13ae.pdf");
    const blob = await res.blob();
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "从业告知书模板.pdf";
    a.click();
    URL.revokeObjectURL(url);
  } catch {
    message.error("下载失败，请重试");
  }
};

const NoticePanel = () => (
  <div>
    <div className="pf-section-header">
      <div>
        <span style={{ fontSize: 20, fontWeight: 600, color: "#1677ff", marginRight: 8 }}>01</span>
        <Typography.Text strong style={{ fontSize: 15 }}>安全评价检测检验机构从业告知书</Typography.Text>
        <Typography.Paragraph type="secondary" style={{ margin: 0 }}>支持在线填写后打印；阶段试行期间，以机构盖章版上传归档作为完成依据。</Typography.Paragraph>
      </div>
    </div>
    <div style={{ background: "#f0f5ff", padding: "8px 12px", borderRadius: 6, marginBottom: 16, display: "flex", gap: 16, fontSize: 13 }}>
      <strong>办理方式</strong>
      <span>在线填写用于生成、打印标准告知书</span>
      <span>打印盖章后上传扫描件或清晰照片</span>
      <Tag color="blue">完成节点必须留存盖章件</Tag>
    </div>
    <div className="pf-template-card">
      <div className="pf-template-left">
        <span className="pf-template-icon">📄</span>
        <div>
          <div className="pf-template-name">从业告知书模板</div>
          <div className="pf-template-desc">PDF 格式，可下载后在线填写并打印盖章</div>
        </div>
      </div>
      <Button type="primary" ghost size="small" icon={<DownloadOutlined />} onClick={downloadTemplate}>
        下载模板
      </Button>
    </div>
  </div>
);

const InspectionPanel = () => (
  <div>
    <div className="pf-section-header">
      <div>
        <span style={{ fontSize: 20, fontWeight: 600, color: "#1677ff", marginRight: 8 }}>02</span>
        <Typography.Text strong style={{ fontSize: 15 }}>现场人员打卡与检查表</Typography.Text>
        <Typography.Paragraph type="secondary" style={{ margin: 0 }}>主要核验项目组人员是否真实到场，留存APP人脸、GPS、签到签退、现场照片及本人签字记录。</Typography.Paragraph>
      </div>
      <Tag color="success">打卡与检查表完整</Tag>
    </div>

    <Card type="inner" size="small" title="人员现场打卡情况" style={{ marginBottom: 12 }}>
      <Table
        dataSource={[
          { name: "张建国", role: "项目负责人", face: "通过", gps: "正常", signIn: "08:52", signOut: "16:45", duration: "7h53m", photos: 12, sign: "已签字" },
          { name: "李明华", role: "报告编制人", face: "通过", gps: "正常", signIn: "08:55", signOut: "16:43", duration: "7h48m", photos: 9, sign: "已签字" },
          { name: "赵东升", role: "专业组员", face: "通过", gps: "正常", signIn: "08:57", signOut: "16:40", duration: "7h43m", photos: 7, sign: "已签字" },
        ]}
        columns={[
          { title: "人员", dataIndex: "name" },
          { title: "项目角色", dataIndex: "role" },
          { title: "人脸识别", dataIndex: "face", render: (v) => <Tag color="success">{v}</Tag> },
          { title: "GPS定位", dataIndex: "gps", render: (v) => <Tag color="success">{v}</Tag> },
          { title: "签到时间", dataIndex: "signIn" },
          { title: "签退时间", dataIndex: "signOut" },
          { title: "在场时长", dataIndex: "duration" },
          { title: "现场照片", dataIndex: "photos", render: (v) => <Button type="link" size="small">{v}张</Button> },
          { title: "本人签字", dataIndex: "sign", render: (v) => <Tag color="success">{v}</Tag> },
        ]}
        rowKey="name"
        pagination={false}
        size="small"
      />
      <div style={{ display: "flex", gap: 24, marginTop: 8, fontSize: 12 }}>
        <span>打卡企业地址：重庆市渝北区化工园区东路18号</span>
        <span>允许打卡范围：企业地址周边500米</span>
        <span>签到日期：2026-07-15</span>
      </div>
    </Card>
  </div>
);

const SimpleUploadPanel = ({ index, title, desc }) => (
  <div>
    <div className="pf-section-header">
      <div>
        <span style={{ fontSize: 20, fontWeight: 600, color: "#1677ff", marginRight: 8 }}>{index}</span>
        <Typography.Text strong style={{ fontSize: 15 }}>{title}</Typography.Text>
        <Typography.Paragraph type="secondary" style={{ margin: 0 }}>{desc}</Typography.Paragraph>
      </div>
    </div>
  </div>
);

const STEP_PANELS = {
  notice: () => <NoticePanel />,
  inspection: () => <InspectionPanel />,
  rectification: () => (
    <SimpleUploadPanel
      index="03" title="整改通知单上传"
      desc="本节点不在线编制整改通知，只归档机构已出具的《整改通知单》文件；上传成功即完成，后续可替换修改。"
    />
  ),
  enterprise: () => (
    <SimpleUploadPanel
      index="04" title="企业整改报告上传"
      desc="企业线下提交《整改报告》后，由机构人员上传归档；本系统不提供企业在线提交和逐项整改流程。"
    />
  ),
  review: () => (
    <SimpleUploadPanel
      index="05" title="整改复查单上传"
      desc="机构人员现场复查后，将经双方签字确认的《整改复查单》上传归档；上传后本节点自动标记完成。"
    />
  ),
};

const SurveyContent = (props) => {
  const [form] = Form.useForm();
  const [activeStage, setActiveStage] = useState("notice");
  const [attachMap, setAttachMap] = useState({});
  const { evalSurveyListLoading, evalSurveySaveAttachLoading } = props.safetyEvalBusiness;
  const projectId = router.query?.id;
  const currentIdx = STAGES.findIndex((s) => s.key === activeStage);
  const isFirst = currentIdx === 0;
  const isLast = currentIdx === STAGES.length - 1;

  const loadAttachments = async () => {
    if (!projectId) return;
    const res = await props.evalSurveyList({ projectId });
    if (res?.success !== false) {
      const map = {};
      (res?.data || []).forEach((item) => {
        const key = item.attachTypeCode;
        try {
          const parsed = JSON.parse(item.fileUrl);
          map[key] = Array.isArray(parsed) ? parsed : [];
        } catch {
          map[key] = [];
        }
      });
      setAttachMap(map);
      // 回填所有步骤的附件到表单
      const values = {};
      Object.entries(ATTACH_TYPE).forEach(([, typeCode]) => {
        values[typeCode] = map[typeCode] || [];
      });
      form.setFieldsValue(values);
    }
  };

  useEffect(() => {
    loadAttachments();
  }, []);

  const goPrev = () => {
    if (currentIdx > 0) setActiveStage(STAGES[currentIdx - 1].key);
  };

  const goNext = () => {
    if (currentIdx < STAGES.length - 1) setActiveStage(STAGES[currentIdx + 1].key);
  };

  const handleSave = async () => {
    const values = form.getFieldsValue();
    const payload = [];
    for (const [key, typeCode] of Object.entries(ATTACH_TYPE)) {
      const fileList = values[typeCode] || [];
      const validFiles = fileList.filter((f) => f.status === "done" && f.url);
      if (validFiles.length === 0) {
        setActiveStage(key);
        message.warning(`请先在"${STAGES.find((s) => s.key === key).label}"步骤上传附件`);
        return;
      }
      payload.push({
        projectId,
        attachTypeCode: typeCode,
        fileUrl: JSON.stringify(fileList),
      });
    }
    const res = await props.evalSurveySaveAttach(payload);
    if (res?.success !== false) {
      message.success("保存成功");
      props.getDetail();
    }
  };

  return (
    <div>
      <Steps
        current={currentIdx}
        onChange={(idx) => setActiveStage(STAGES[idx].key)}
        style={{ marginBottom: 16 }}
        items={STAGES.map((s) => ({ title: s.label }))}
      />

      {STEP_PANELS[activeStage]()}

      <Form form={form} layout="vertical">
        {Object.entries(ATTACH_TYPE).map(([key, typeCode]) => (
          <div key={key} style={{ display: key === activeStage ? "block" : "none" }}>
            <AttachmentUpload
              name={typeCode}
              label="上传附件"
              maxCount={10}
              accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.xls,.xlsx"
              extra="支持 PDF、Word、JPG、PNG、Excel 格式，最多上传 10 个文件"
            />
          </div>
        ))}
      </Form>

      <Flex justify="flex-end" gap={8} style={{ marginTop: 16 }}>
        {!isFirst && <Button onClick={goPrev} disabled={evalSurveySaveAttachLoading}>上一步</Button>}
        {isLast ? (
          <Button type="primary" onClick={handleSave} loading={evalSurveySaveAttachLoading}>保存</Button>
        ) : (
          <Button type="primary" onClick={goNext} disabled={evalSurveySaveAttachLoading}>下一步</Button>
        )}
      </Flex>
    </div>
  );
};

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