feat: 答案转PDF调整

src/modules/paper-export/components/AnswerTemplateView.vue

@@ -15,6 +15,18 @@
               {{ row.serialNo | numberToChaineseFilter }}、{{ row.name }}
               {{ row.title }}
             </template>
+            <template v-else-if="row.isGroup">
+              <div class="answer-group" :id="row.id">
+                <div
+                  v-for="item in row.items"
+                  :key="item.id"
+                  class="answer-group-item"
+                >
+                  <span>{{ item.serialNo + ". " }}</span>
+                  <question-answer :data="item"></question-answer>
+                </div>
+              </div>
+            </template>
             <template v-else>
               <span>{{ row.serialNo + ". " }}</span>
               <question-answer :data="row"></question-answer>
@@ -41,6 +53,18 @@
             {{ row.serialNo | numberToChaineseFilter }}、{{ row.name }}
             {{ row.title }}
           </template>
+          <template v-else-if="row.isGroup">
+            <div class="answer-group" :id="row.id">
+              <div
+                v-for="item in row.items"
+                :key="item.id"
+                class="answer-group-item"
+              >
+                <span>{{ item.serialNo + ". " }}</span>
+                <question-answer :data="item"></question-answer>
+              </div>
+            </div>
+          </template>
           <template v-else>
             <span>{{ row.serialNo + ". " }}</span>
             <question-answer :data="row"></question-answer>
@@ -106,6 +130,9 @@ export default {
       }
 
       const allList = [];
+      const groupableTypes = ["SINGLE_ANSWER_QUESTION", "BOOL_ANSWER_QUESTION"];
+      let groupIndex = 0;
+
       paperDetails.forEach((detail) => {
         if (!detail.paperDetailUnits?.length) {
           return;
@@ -119,33 +146,67 @@ export default {
           title: detail.title,
         });
 
+        let currentGroup = null;
+
         detail.paperDetailUnits.forEach((unit) => {
           const question = unit.question;
+          const processQuestion = (q, isSub = false) => {
+            const item = {
+              id: isSub
+                ? `question-${detail.number}-${question.questionSeq}-${q.questionSeq}`
+                : `question-${detail.number}-${q.questionSeq}`,
+              isDetail: false,
+              serialNo: q.questionSeq,
+              questionType: q.questionType,
+              quesAnswer: q.quesAnswer,
+            };
+
+            if (groupableTypes.includes(item.questionType)) {
+              if (!currentGroup) {
+                groupIndex++;
+                currentGroup = {
+                  id: `group-${detail.number}-${groupIndex}`,
+                  isGroup: true,
+                  items: [],
+                };
+                allList.push(currentGroup);
+              }
+              if (currentGroup.items.length < 5) {
+                currentGroup.items.push(item);
+              } else {
+                // Start a new group if current group is full
+                groupIndex++;
+                currentGroup = {
+                  id: `group-${detail.number}-${groupIndex}`,
+                  isGroup: true,
+                  items: [item],
+                };
+                allList.push(currentGroup);
+              }
+            } else {
+              // If the current question is not groupable, end the current group
+              currentGroup = null;
+              allList.push(item);
+            }
+          };
+
           if (question.subQuestions?.length) {
+            // Treat subquestions independently regarding grouping
+            currentGroup = null; // Reset group when entering subquestions
             question.subQuestions.forEach((subQues) => {
-              allList.push({
-                id: `question-${detail.number}-${question.questionSeq}-${subQues.questionSeq}`,
-                isDetail: false,
-                serialNo: subQues.questionSeq,
-                questionType: subQues.questionType,
-                quesAnswer: subQues.quesAnswer,
-              });
+              processQuestion(subQues, true);
             });
-            return;
+            currentGroup = null; // Reset group after processing subquestions
+          } else {
+            processQuestion(question);
           }
-
-          allList.push({
-            id: `question-${detail.number}-${question.questionSeq}`,
-            isDetail: false,
-            serialNo: question.questionSeq,
-            questionType: question.questionType,
-            quesAnswer: question.quesAnswer,
-          });
         });
+        // Ensure the last group is reset if the detail ends
+        currentGroup = null;
       });
 
       this.allList = allList;
-      // console.log(allList);
+      // console.log('Processed allList:', JSON.stringify(allList, null, 2));
     },
     autoPage() {
       const pageList = [[]];
@@ -173,3 +234,36 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.answer-group {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.answer-group-item {
+  flex: 0 0 20%; /* Allow 5 items per row */
+  box-sizing: border-box;
+  padding-right: 10px; /* Add some space between items */
+}
+
+/* Hide the origin view used for calculation */
+.origin-view {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+  visibility: hidden;
+  height: 0;
+  overflow: hidden;
+}
+
+.page-box-answer .origin-item {
+  margin-bottom: 5px; /* Adjust spacing for non-grouped items */
+}
+
+.page-box-answer .is-detail-title {
+  margin-top: 10px;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+</style>