feat: 完成 预览功能， 适配组件

- 完成预览的功能，可以提供回看已经提交的内容
- 适配单选、矩阵、文件上传、填空等组件
- question 的类型添加 answre 字段

src/views/Design/components/Questions/MatrixCheckbox.vue

@@ -3,29 +3,23 @@
     <thead>
       <tr>
         <th></th>
-        <td v-for="col in columns" :key="col.option">
+        <td v-for="col in cols" :key="col.option">
           <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
           <input
-            v-if="col.editor"
-            v-model="col.option"
-            v-focus
-            type="text"
-            @focusout="col.editor = false"
+            v-if="col.editor" v-model="col.option" v-focus type="text" @focusout="col.editor = false"
             @click="handleRowNameChange(col.option!)"
           />
-          <span v-else @click="handleRowNameChange(col.option!)" v-html="col.option" />
+          <span v-else @click="handleRowNameChange(col.option!)" v-html="col.option"></span>
         </td>
       </tr>
     </thead>
     <tbody>
       <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
-        <th v-html="row.option" />
-        <td v-for="(col, colIndex) in columns" :key="colIndex">
+        <th v-html="row.option"></th>
+        <td v-for="(col, colIndex) in cols" :key="colIndex">
           <input
-            type="checkbox"
-            :value="`${rowIndex + 1}_${colIndex + 1}`"
-            :checked="isOptionChecked(rowIndex, colIndex)"
-            @change="handleColNameChange(row.option, col.option, $event)"
+            type="checkbox" :name="`R${rowIndex + 1}`" :value="`${rowIndex + 1}_${colIndex + 1}`"
+            :checked="isOptionChecked(rowIndex, colIndex)" @change="handleMatrixRadioChange(rowIndex, colIndex)"
           />
         </td>
       </tr>
@@ -37,50 +31,73 @@
 import { defineProps } from 'vue';
 import { vFocus } from '@/utils/directives/useVFocus';
 
-const props = defineProps<{
-  rows: { option: string }[];
-  columns: { option: string; editor?: boolean }[];
-  questionType: number;
-  matrixAnswer: { [key: string]: any };
-  rowRecord:(number | string)[];
+// 记录行和列的索引
+const rowRecord = defineModel<number[][]>('rowRecord', { required: false, default: () => [] });
+// const matrixAnswer = defineModel<{ [key: string]: 1 }>('matrixAnswer', { required: false, default: () => ({}) });
+// 检查 rowRecord 是否存在
+console.log(`rowRecord:`, rowRecord.value);
+
+/* const isPreview =  */defineModel<boolean>('isPreview', { required: false, default: false });
+defineProps<{
+  rows: OptionType[];
+  cols: OptionType[];
 }>();
 
-/* const emits = */ defineEmits(['update:matrixAnswer', 'update:rowRecord']);
+// const emits = defineEmits(['update:matrixAnswer', 'update:rowRecord']);
 
+// 判断是否选中
 const isOptionChecked = (rowIndex: number, colIndex: number): boolean => {
-  const key = `R${rowIndex + 1}_C${colIndex + 1}`;
-  return !!props.matrixAnswer[key];
+  // [
+  //   [0, 1],
+  //   [0, 1]
+  // ]
+  if (!rowRecord.value[rowIndex]) {
+    return false;
+  }
+  return rowRecord.value[rowIndex].includes(colIndex);
 };
 
-const handleRowNameChange = () => {
+const handleRowNameChange = (/* value: string */) => {
+  // console.log(`row change: ${value}`);
   // 你可以在这里添加其他逻辑
 };
 
-// const handleColNameChange = (rowOption: string, colOption: string, e: Event) => {
-//   const target = e.target as HTMLInputElement;
-//   const col = props.columns.findIndex(option => option.option === colOption);
-//   const row = props.rows.findIndex(option => option.option === rowOption);
-//
-//   if (props.questionType === 10) {
-//     if (target.checked) {
-//       props.rowRecord[col] = (props.rowRecord[col] || []).concat(row + 1);
-//     } else {
-//       props.rowRecord[col] = (props.rowRecord[col] || []).filter(item => item !== row + 1);
-//     }
-//     const newMatrixAnswer: { [key: string]: boolean } = {};
-//     const newRowRecord: (number | string)[] = [...props.rowRecord];
-//     props.rows.forEach((rowOption, rowIndex) => {
-//       const colOptions = newRowRecord[rowIndex];
-//       if (colOptions) {
-//         colOptions.forEach((col: any) => {
-//           newMatrixAnswer[`R${rowIndex + 1}_C${col}`] = true;
-//         });
-//       }
-//     });
-//   }
-//
-//   emits('update:matrixAnswer', newMatrixAnswer);
-//   emits('update:rowRecord', newRowRecord);
+// 当 matrix radio 选中时，更新 rowRecord 和 matrixAnswer
+function handleMatrixRadioChange(row: number, col: number) {
+  // 获取 colIndexArray
+  if (!rowRecord.value[row]) {
+    // 如果没有对应的row，创建一个
+    rowRecord.value[row] = [];
+  }
+  // cols 的逻辑 和 handleMatrixRadioChange 一致
+  const cols = rowRecord.value[row];
+
+  // 检查 cols 对应的 col 是否有 数值
+  if (cols.includes(col)) {
+    // 如果有，删除
+    cols.splice(cols.indexOf(col), 1);
+  } else {
+    // 如果没有，添加
+    cols.push(col);
+  }
+
+  console.log(`rowRecord:`, rowRecord.value);
+}
+// const handleColNameChange = (rowOption: string, colOption: string) => {
+// // const target = e.target as HTMLInputElement;
+// const col = props.columns.findIndex((option) => option.option === colOption);
+// const row = props.rows.findIndex((option) => option.option === rowOption);
+
+// if (props.questionType === 9) {
+//   props.rowRecord[col] = row + 1;
+//   props.matrixAnswer = {};
+//   props.rowRecord.forEach((row, index) => {
+//     props.matrixAnswer[`${index + 1}_${row}`] = 1;
+//   });
+// }
+
+// emits('update:matrixAnswer', props.matrixAnswer);
+// emits('update:rowRecord', props.rowRecord);
 // };
 </script>