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

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

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

@@ -3,14 +3,10 @@
     <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>
@@ -20,11 +16,10 @@
     <tbody>
       <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
         <th v-html="row.option"></th>
-        <td v-for="(col, colIndex) in columns" :key="colIndex">
+        <td v-for="(col, colIndex) in cols" :key="colIndex">
           <input
-            type="text"
-            :value="matrixAnswer[`${rowIndex + 1}_${colIndex + 1}`]"
-            @change="handleColNameChange(row.option, col.option, $event, rowIndex, colIndex)"
+            type="text" :name="`R${rowIndex + 1}`" :value="getInputValue(rowIndex, colIndex)"
+            @change="handleMatrixTextChange(rowIndex, colIndex, $event)"
           />
         </td>
       </tr>
@@ -33,36 +28,66 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, defineEmits } from 'vue';
+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 };
+// 记录行和列的索引
+const rowRecord = defineModel<string[][]>('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']);
+// const emits = defineEmits(['update:matrixAnswer', 'update:rowRecord']);
 
 const handleRowNameChange = (/* value: string */) => {
   // console.log(`row change: ${value}`);
   // 你可以在这里添加其他逻辑
 };
 
-const handleColNameChange = (
-  rowOption: string,
-  colOption: string,
-  e: Event,
-  rowIndex: number,
-  colIndex: number
-) => {
-  const target = e.target as HTMLInputElement;
-  const key = `R${rowIndex + 1}_C${colIndex + 1}`;
-  const newMatrixAnswer = { ...props.matrixAnswer, [key]: target.value };
+function getInputValue(row: number, col: number) {
+  console.log(`row: ${row}, col: ${col}`);
+  console.log(`rowRecord:`, rowRecord.value);
 
-  emits('update:matrixAnswer', newMatrixAnswer);
-};
+  return rowRecord.value?.[row]?.[col] ?? '';
+}
+
+// 当 matrix text 选中时，更新 rowRecord 和 matrixAnswer
+function handleMatrixTextChange(row: number, col: number, e: Event) {
+  const target = e.target as HTMLInputElement;
+  const inputValue = target.value;
+
+  // 获取 colIndexArray
+  if (!rowRecord.value[row]) {
+    // 如果没有对应的row，创建一个
+    rowRecord.value[row] = [];
+  }
+  // cols 的逻辑 和 handleMatrixRadioChange 一致
+  const cols = rowRecord.value[row];
+  cols[col] = inputValue;
+  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>
 
 <style scoped lang="scss">