fix: 修改文件名大小写

src/views/Design/Index.vue

@@ -21,20 +21,29 @@
           @setting="emitFun.setting"
           @logics="emitFun.logics"
         >
+          <!-- 打分题 -->
+          <Rate
+            v-if="element.question_type === 5"
+            :element="computedElement(element)"
+            :index="index"
+            :active="chooseQuestionId === element.id"
+            @update:element="updateElement"
+          />
           <!-- 选择题 -->
           <Choice
             v-if="element.question_type === 1 || element.question_type === 2"
-            :element="element"
             :index="index"
             :active="chooseQuestionId === element.id"
+            :element="computedElement(element)"
+            @update:element="updateElement"
           ></Choice>
           <!-- 填空题 -->
           <Completion
             v-if="element.question_type === 4"
             :index="index"
-            :element="element"
+            :element="computedElement(element)"
             :active="chooseQuestionId === element.id"
-            sn="lXEBBpE2"
+            @update:element="updateElement"
           ></Completion>
 
           <!-- 矩阵题 -->
@@ -44,49 +53,45 @@
                 element.question_type === 9 ||
                 element.question_type === 10
             "
-            :element="element"
+            :element="computedElement(element)"
             :index="index"
             :active="chooseQuestionId === element.id"
+            @update:element="updateElement"
           />
 
           <!-- 签名题 -->
           <sign-question
             v-if="[22].includes(element.question_type)"
-            :element="element"
+            :element="computedElement(element)"
             :index="index"
             :active="chooseQuestionId === element.id"
+            @update:element="updateElement"
           />
 
           <!-- 文件上传题 -->
           <file-upload
             v-if="element.question_type === 18"
-            :element="element"
+            :element="computedElement(element)"
             :index="index"
             :active="chooseQuestionId === element.id"
+            @update:element="updateElement"
           ></file-upload>
 
-          <!-- 打分题 -->
-          <Rate
-            v-if="element.question_type === 5"
-            :element="element"
-            :index="index"
-            :active="chooseQuestionId === element.id"
-            sn="lXEBBpE2"
-          />
-
           <!--图文-->
           <TextWithImages
             v-if="element.question_type === 6"
-            :element="element"
+            :element="computedElement(element)"
             :index="index"
             :active="chooseQuestionId === element.id"
+            @update:element="updateElement"
           />
           <!--图文-->
           <NPS
             v-if="element.question_type === 106"
-            :element="element"
+            :element="computedElement(element)"
             :index="index"
             :active="chooseQuestionId === element.id"
+            @update:element="updateElement"
           />
           <!--组件底部左侧操作-->
           <template #action="{ element: el }">
@@ -129,7 +134,7 @@
 <script setup>
 import { v4 as uuidv4 } from 'uuid';
 import * as Base64 from 'js-base64';
-import { ref, onMounted, watch, computed } from 'vue';
+import { ref, onMounted, watch, computed, reactive } from 'vue';
 import { useCounterStore } from '@/stores/counter';
 import { storeToRefs } from 'pinia';
 import { useRoute } from 'vue-router';
@@ -162,6 +167,14 @@ const { filterGap, activeId } = defineProps({
   }
 });
 
+const computedElement = computed(() => (element) => {
+  return reactive({
+    ...element,
+    // 添加需要响应式的属性
+    options: element.options.map((opt) => reactive(opt))
+  });
+});
+
 watch(
   () => activeId,
   (newVal) => {
@@ -221,12 +234,26 @@ const counterStore = useCounterStore();
 const store = storeToRefs(counterStore);
 
 const chooseQuestionId = ref('');
+const chooseQuestionIndex = ref(-1);
+
 const questionInfo = computed(() => store.questionsInfo.value);
+// 自动更新 题型
+watch(
+  () => questionInfo.value.questions[chooseQuestionIndex.value],
+  (newVal) => {
+    if (newVal) {
+      console.log(newVal, 232313);
+      saveQueItem(questionInfo.value.logics, [newVal]);
+    }
+  },
+  { deep: true }
+);
 
 const emit = defineEmits(['getActiveQuestion']);
 // 获取选中的题目的ID
-const getChooseQuestionId = (questionItem) => {
+const getChooseQuestionId = (questionItem, index) => {
   chooseQuestionId.value = questionItem.id;
+  chooseQuestionIndex.value = index;
   // 向外传出选中的题目
   emit('getActiveQuestion', questionItem);
 };
@@ -267,6 +294,7 @@ const actionEvent = (item, el) => {
 const actionFun = {
   //  单选事件  添加选项
   radioAddOption: (element) => {
+    console.log(element);
     element.options.map((item) => {
       item.push({
         id: uuidv4(),
@@ -346,7 +374,13 @@ const emitFun = {
     saveQueItem(questionInfo.value.logics, [item]);
   }
 };
-
+// 直接切割 变更为响应式
+const updateElement = (newElement) => {
+  const index = questionInfo.value.questions.findIndex((q) => q.id === newElement.id);
+  if (index !== -1) {
+    questionInfo.value.questions.splice(index, 1, newElement);
+  }
+};
 onMounted(() => {
   questionInfo.value = store.questionsInfo.value;
 });