初步完工

src/pages/A6_1ques/A6QInfo/EchBox/index.tsx

@@ -1,6 +1,10 @@
 import React, { useEffect, useRef, useState } from "react";
 import styles from "./index.module.scss";
-import { DataResTabListTabCutType, DataResTabListType, columnsObj } from "..";
+import {
+  DataResTabListTabCutType,
+  DataResTabListType,
+  columnsObj,
+} from "../data";
 
 import * as echarts from "echarts/core";
 import { TitleComponent } from "echarts/components";
@@ -175,7 +179,7 @@ function EchBox({ type, info }: Props) {
     }));
 
     setDataRes(arr);
-    console.log(arr);
+    // console.log(arr);
 
     const dom = EchBox1.current;
     if (dom) {
@@ -204,7 +208,7 @@ function EchBox({ type, info }: Props) {
                 </div>
                 <div className="EchBox2Son1_3">
                   {v.customDesc.map((v2, i2) => (
-                    <div key={i2}>{v2}</div>
+                    <div key={i2}>{i2+1}：{v2}</div>
                   ))}
                 </div>
               </div>

src/pages/A6_1ques/A6QInfo/Tab2Look.tsx

@@ -1,27 +1,163 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import styles from "./index.module.scss";
 import { Button, Modal } from "antd";
+import { A6Q_APIresListLook } from "@/store/action/A6_1ques";
+import { DataResTabListTxtType, columnsObj } from "./data";
+import classNames from "classnames";
+import { domShowFu } from "@/utils/domShow";
+import { MessageFu } from "@/utils/message";
+import htmlToPdf2 from "@/utils/htmlToPdf2";
+import dayjs from "dayjs";
 
-// type Props
+type InfoSonOptionsType = {
+  id: number;
+  name: string;
+  customDesc: string;
+  perm: boolean;
+  sort: number;
+};
+
+type InfoSonType = {
+  id: number;
+  question: string;
+  type: DataResTabListTxtType;
+  options: InfoSonOptionsType[];
+};
+
+type InfoType = {
+  id: number;
+  name: string;
+  publishDate: string;
+  description: string;
+  questions: InfoSonType[];
+};
+
+type Props = {
+  waiId: number;
+  fatherInfo: { id: number; time: string; txt: "" | "查看" | "导出结果" };
+  colseFu: () => void;
+};
+
+function Tab1Look({ waiId, fatherInfo, colseFu }: Props) {
+  const [info, setInfo] = useState({} as InfoType);
+
+  const getInfoFu = useCallback(async () => {
+    const res = await A6Q_APIresListLook(waiId, fatherInfo.id);
+    if (res.code === 0) {
+      setInfo(res.data);
+    }
+  }, [fatherInfo.id, waiId]);
+
+  useEffect(() => {
+    getInfoFu();
+  }, [getInfoFu]);
+
+  // 点击 导出结果
+  useEffect(() => {
+    if (fatherInfo.txt === "导出结果") {
+      domShowFu("#AsyncSpinLoding", true);
+
+      if (info.id) {
+        window.setTimeout(() => {
+          const dom = document.querySelector(".T1Cen") as HTMLDivElement;
+          if (dom) {
+            const name =
+              "问卷结果" + dayjs(new Date()).format("YYYY-MM-DD HH:mm");
+
+            htmlToPdf2(dom, name, () => {
+              colseFu();
+              domShowFu("#AsyncSpinLoding", false);
+            });
+          } else {
+            colseFu();
+            MessageFu.warning("找不到元素!");
+            domShowFu("#AsyncSpinLoding", false);
+          }
+        }, 500);
+      }
+    }
+  }, [colseFu, fatherInfo.txt, info.id]);
 
- function Tab2Look() {
-  
   return (
     <Modal
-      wrapClassName={styles.Tab2Look}
+      wrapClassName={styles.Tab1Look}
       open={true}
-      title={`自定义结果`}
+      title="结果明细"
       footer={
         [] // 设置footer为空，去掉 取消 确定默认按钮
       }
     >
-      <div className="T2btn">
-        <Button>关闭</Button>
+      <div className="T1Main">
+        <div className="T1Cen">
+          <div className="T1title">{info.name}</div>
+          <div className="T1time">
+            <span>发布时间：</span>
+            {info.publishDate}&emsp;&emsp;<span>提交时间：</span>
+            {fatherInfo.time}
+          </div>
+          <div
+            className="T1text"
+            dangerouslySetInnerHTML={{ __html: info.description }}
+          ></div>
+
+          {/* 主体 */}
+          {info.questions && info.questions.length
+            ? info.questions.map((v, i) => (
+                <div key={v.id} className="T1list">
+                  <div className="T1list1">
+                    {i + 1}：{v.question}（{v.type}题）
+                  </div>
+                  {v.options && v.options.length
+                    ? v.options.map((v2, i2) => (
+                        <div key={v2.id} className="T1list2">
+                          {v.type === "填空" ? (
+                            <div className="T1list3">
+                              {v2.customDesc || "（空）"}
+                            </div>
+                          ) : (
+                            <div
+                              className={classNames(
+                                "T1list4",
+                                v2.perm ? "T1list4Ac" : ""
+                              )}
+                            >
+                              <div className="T1list5">
+                                {v.type === "排序" ? (
+                                  <div className="T1listSort">{v2.sort}</div>
+                                ) : null}
+                                {v2.name === "其他"
+                                  ? "Z"
+                                  : Reflect.get(columnsObj, i2)}
+                                ：
+                              </div>
+                              <div className="T1list6">
+                                {v2.name === "其他"
+                                  ? "自定义回答：" + (v2.customDesc || "（空）")
+                                  : v2.name}
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      ))
+                    : null}
+                  {/* {v.type === "填空" ? (
+                    <div className="T1list2">{v.}</div>
+                  ) : (
+                    <div className="T1list3"></div>
+                  )} */}
+                </div>
+              ))
+            : null}
+        </div>
+      </div>
+
+      <div className="T1btn">
+        <Button onClick={colseFu}>关闭</Button>
       </div>
     </Modal>
-  )
+  );
 }
 
-const MemoTab2Look = React.memo(Tab2Look);
+const MemoTab1Look = React.memo(Tab1Look);
 
-export default MemoTab2Look;
+export default MemoTab1Look;

src/pages/A6_1ques/A6QInfo/data.ts

@@ -0,0 +1,37 @@
+export const columnsObj = {
+  0: "A",
+  1: "B",
+  2: "C",
+  3: "D",
+  4: "E",
+  5: "F",
+  6: "G",
+};
+
+export type DataResListType = {
+  id: number;
+  createTime: string;
+};
+
+export type DataResTabListTabCutType = "表格" | "柱状图" | "折线图" | "饼图";
+
+export type DataResTabListOptionsType = {
+  pcs: number;
+  score: null | number;
+  customDesc: string;
+  name: string;
+};
+
+export type DataResTabListTxtType = "单选" | "多选" | "排序" | "填空";
+
+export type DataResTabListType = {
+  id: number;
+  type: DataResTabListTxtType;
+  question: string;
+  tabCut: {
+    name: DataResTabListTabCutType;
+    done: boolean;
+  }[];
+  tabAc: DataResTabListTabCutType;
+  optionsCount: DataResTabListOptionsType[];
+};

src/pages/A6_1ques/A6QInfo/index.module.scss

@@ -155,18 +155,128 @@
 }
 
 // 结果统计 查看自定义结果的弹窗
-.Tab2Look {
+.Tab1Look {
   :global {
     .ant-modal-close {
       display: none;
     }
 
     .ant-modal {
-      width: 800px !important;
+      top: 30px;
+      width: 1000px !important;
     }
 
-    .T2btn {
-      margin-top: 20px;
+    .ant-modal-content {
+      padding: 20px 0 10px !important;
+
+      .ant-modal-header {
+        padding: 0 20px;
+      }
+    }
+
+    .T1Main {
+      border-top: 1px solid #ccc;
+      height: 700px;
+      overflow-y: auto;
+      font-size: 16px;
+
+
+      .T1Cen {
+        padding: 10px 20px 0px;
+
+        .T1title {
+          font-weight: 700;
+          font-size: 18px;
+          margin-bottom: 8px;
+        }
+
+        .T1time {
+          &>span {
+            font-weight: 700;
+          }
+        }
+
+        .T1text {
+          margin-top: 8px;
+          padding-bottom: 15px;
+
+          .image-wrap {
+            text-align: center;
+            display: block;
+            margin: 8px auto;
+
+            img {
+              max-width: 500px;
+              max-height: 300px;
+            }
+          }
+
+          p {
+            min-height: 15px;
+          }
+        }
+
+        .T1list {
+          margin-bottom: 15px;
+
+          .T1list1 {
+            font-weight: 700;
+            margin-bottom: 5px;
+          }
+
+          .T1list2 {
+            span {
+              font-weight: 700;
+            }
+
+            .T1list3 {
+              padding-left: 30px;
+              margin-top: 8px;
+            }
+
+            .T1list4 {
+              padding: 4px 0;
+              margin-bottom: 8px;
+              border-radius: 16px;
+              display: flex;
+
+
+
+              .T1list5 {
+
+                width: 60px;
+                text-align: right;
+
+                .T1listSort {
+                  margin-right: 10px;
+                  display: inline-block;
+                  width: 22px;
+                  height: 22px;
+                  background-color: var(--themeColor);
+                  color: #fff;
+                  text-align: center;
+                  line-height: 22px;
+                  border-radius: 50%;
+                }
+
+              }
+
+              .T1list6 {
+                width: calc(100% - 60px);
+              }
+            }
+
+            .T1list4Ac {
+              color: #52c41a;
+              // background-color: #52c41a;
+            }
+          }
+        }
+      }
+    }
+
+    .T1btn {
+      margin-top: 15px;
       text-align: center;
     }
   }

src/pages/A6_1ques/A6QInfo/index.tsx

@@ -8,42 +8,15 @@ import { domShowFu } from "@/utils/domShow";
 import { MessageFu } from "@/utils/message";
 import dayjs from "dayjs";
 import EchBox from "./EchBox";
-
-export const columnsObj = {
-  0: "A",
-  1: "B",
-  2: "C",
-  3: "D",
-  4: "E",
-  5: "F",
-  6: "G",
-};
-
-type DataResListType = {
-  id: number;
-  createTime: string;
-};
-
-export type DataResTabListTabCutType = "表格" | "柱状图" | "折线图" | "饼图";
-type DataResTabListTxtType = "单选" | "多选" | "排序" | "填空";
-export type DataResTabListOptionsType = {
-  pcs: number;
-  score: null | number;
-  customDesc: string;
-  name: string;
-};
-
-export type DataResTabListType = {
-  id: number;
-  type: DataResTabListTxtType;
-  question: string;
-  tabCut: {
-    name: DataResTabListTabCutType;
-    done: boolean;
-  }[];
-  tabAc: DataResTabListTabCutType;
-  optionsCount: DataResTabListOptionsType[];
-};
+import Tab1Look from "./Tab2Look";
+import {
+  DataResListType,
+  DataResTabListOptionsType,
+  DataResTabListTabCutType,
+  DataResTabListTxtType,
+  DataResTabListType,
+  columnsObj,
+} from "./data";
 
 type DataType = {
   id: number;
@@ -230,10 +203,30 @@ function A6QInfo({ sId, closeFu }: Props) {
             render: (item: DataResListType) => (
               <>
                 {/* 待完善 */}
-                <Button size="small" type="text">
+                <Button
+                  size="small"
+                  type="text"
+                  onClick={() =>
+                    setTab1Info({
+                      id: item.id,
+                      time: item.createTime,
+                      txt: "查看",
+                    })
+                  }
+                >
                   查看
                 </Button>
-                <Button size="small" type="text">
+                <Button
+                  size="small"
+                  type="text"
+                  onClick={() =>
+                    setTab1Info({
+                      id: item.id,
+                      time: item.createTime,
+                      txt: "导出结果",
+                    })
+                  }
+                >
                   导出结果
                 </Button>
               </>
@@ -271,6 +264,13 @@ function A6QInfo({ sId, closeFu }: Props) {
     }, 500);
   }, []);
 
+  // 点击 左侧的结果明细 查看 和导出
+  const [tab1Info, setTab1Info] = useState({
+    id: 0,
+    time: "",
+    txt: "" as "" | "查看" | "导出结果",
+  });
+
   return (
     <div className={styles.A6QInfo}>
       <div className="A6QInfoBoxCC">
@@ -398,6 +398,15 @@ function A6QInfo({ sId, closeFu }: Props) {
           </div>
         </div>
       </div>
+
+      {/* 结果明细的 查看 和 导出 */}
+      {tab1Info.txt ? (
+        <Tab1Look
+          waiId={sId}
+          fatherInfo={tab1Info}
+          colseFu={() => setTab1Info({ id: 0, time: "", txt: "" })}
+        />
+      ) : null}
     </div>
   );
 }

src/store/action/A6_1ques.ts

@@ -51,6 +51,18 @@ export const A6Q_APIresTabList = (id: number) => {
   return http.get(`cms/questionnaire/report/${id}`);
 };
 
+/**
+ * 结果明细-查看
+ */
+export const A6Q_APIresListLook = (
+  questionnaireId: number,
+  answerPcsId: number
+) => {
+  return http.get(
+    `cms/questionnaire/submit/detail/${questionnaireId}/${answerPcsId}`
+  );
+};
+
 // ------------------------题目管理-----------------------
 
 /**