feat(Design): 新增矩阵题型和文件上传题型

- 新增矩阵题型组件和相关配置
- 新增文件上传题型组件和相关配置
-优化签名题型组件
- 添新的 CSS 样式类

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

@@ -5,7 +5,7 @@ const columnLabels = useTemplateRef<HTMLElement[]>('columnLabels');
 
 // 注意, element.options 里面的东西是数组，第一项内容是行标签内容，第二项内容是列标签内容
 // 类型 AI 生成 切勿盲目相信，以实际为准
-const { element, index } = defineProps<{ element: MatrixSurveyQuestion, index: number }>();
+const { element, index } = defineProps<{ element: MatrixSurveyQuestion; index: number }>();
 
 const rowRecord = new Array(element.options[0].length);
 // matrix 答案
@@ -50,7 +50,6 @@ const vFocus: Directive = {
  */
 function handleRowNameChange(/* value: string */) {
   // if (!value) return;
-  console.log(`row change`);
 }
 
 /**
@@ -58,15 +57,14 @@ function handleRowNameChange(/* value: string */) {
  */
 function handleColNameChange(rowOption: string, colOption: string, e: any) {
   // if (!value) return;
-  const col = element.options[0].findIndex(option => {
+  const col = element.options[0].findIndex((option) => {
     return option.option === colOption;
   });
 
-  const row = element.options[1].findIndex(option => {
+  const row = element.options[1].findIndex((option) => {
     return option.option === rowOption;
   });
 
-  console.log(`${col + 1}_${row + 1}`);
   // 不同的 question_type 的 matrix 问卷处理不同的结果
   switch (element.question_type) {
   case 8: {
@@ -120,7 +118,6 @@ function handleColNameChange(rowOption: string, colOption: string, e: any) {
     break;
   }
 }
-
 </script>
 
 <template>
@@ -145,7 +142,11 @@ function handleColNameChange(rowOption: string, colOption: string, e: any) {
             <td v-for="col in element.options[1]" :key="col.option" ref="columnLabels">
               <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
               <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="col.editor = true" v-html="col.option"></span>
@@ -153,17 +154,25 @@ function handleColNameChange(rowOption: string, colOption: string, e: any) {
           </tr>
         </thead>
         <tbody>
-          <tr v-for="(row) in element.options[0]" :key="row.option">
+          <tr v-for="row in element.options[0]" :key="row.option">
             <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
             <td>
-              <input v-if="row.editor" v-model="row.option" v-focus type="text" @focusout="row.editor = false" />
+              <input
+                v-if="row.editor"
+                v-model="row.option"
+                v-focus
+                type="text"
+                @focusout="row.editor = false"
+              />
               <span v-else @click="row.editor = true" v-html="row.option"></span>
             </td>
             <td v-for="col in element.options[1]" :key="col.option">
               <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
               <input
-                :id="col.option" :type="tableInputTypeMapping()" :name="row.option"
-                @change="handleColNameChange(col.option!, row.option!,$event)"
+                :id="col.option"
+                :type="tableInputTypeMapping()"
+                :name="row.option"
+                @change="handleColNameChange(col.option!, row.option!, $event)"
               />
             </td>
           </tr>