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;
 });

src/views/Design/components/ChooseQuestion.vue

@@ -58,7 +58,7 @@ const emit = defineEmits(['getChooseQuestionId', 'move', 'copy']);
 // 选中题目
 const chooseItem = () => {
   // 使用从 defineProps 接收的 element 对象
-  emit('getChooseQuestionId', props.element);
+  emit('getChooseQuestionId', props.element, props.index);
 };
 </script>
 <style scoped lang="scss">

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

@@ -10,7 +10,7 @@
       {{ index + 1 }}
     </template>
     <template #label>
-      <contenteditable v-model="element.stem" :active="active"></contenteditable>
+      <contenteditable v-model="element.stem" :active="active" @blur="emitValue"></contenteditable>
     </template>
     <template #input>
       <template v-for="(item, optionIndex) in element.options" :key="item.id">
@@ -30,12 +30,7 @@
               >
                 <template #default>
                   <div class="flex align-center van-cell">
-                    <div
+                    <contenteditable v-model="it.option" :active="active"></contenteditable>
-                      class="van-cell--borderless choice-html"
-                      :contenteditable="active"
-                      @blur="saveOption($event, it)"
-                      v-html="it.option"
-                    ></div>
                     <div v-if="it.is_other">
                       <input class="other-input" type="text" />
                     </div>
@@ -61,12 +56,7 @@
               >
                 <template #default>
                   <div class="flex align-center van-cell">
-                    <div
+                    <contenteditable v-model="it.option" :active="active"></contenteditable>
-                      class="van-cell--borderless choice-html"
-                      :contenteditable="active"
-                      @blur="saveOption($event, it)"
-                      v-html="it.option"
-                    ></div>
                     <div v-if="it.is_other">
                       <input class="other-input" type="text" />
                     </div>
@@ -82,7 +72,7 @@
 </template>
 <script setup>
 import OptionAction from '@/views/Design/components/ActionCompoents/OptionAction.vue';
-import { ref, defineAsyncComponent } from 'vue';
+import { defineAsyncComponent, toRefs } from 'vue';
 const Contenteditable = defineAsyncComponent(() => import('@/components/contenteditable.vue'));
 const props = defineProps({
   element: {
@@ -102,10 +92,10 @@ const props = defineProps({
     default: 0
   }
 });
-
+const { element } = toRefs(props);
-const element = ref(props.element);
+const emit = defineEmits(['update:element']);
-const saveOption = (e, ele) => {
+const emitValue = () => {
-  ele.option = e.target.innerHTML;
+  emit('update:element', element.value);
 };
 </script>
 <style scoped lang="scss">

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

@@ -10,12 +10,11 @@
         {{ index + 1 }}
       </template>
       <template #label>
-        <div
+        <contenteditable
-          :contenteditable="active"
+          v-model="element.stem"
-          class="van-field"
+          :active="active"
-          @blur="saveStem($event, element)"
+          @blur="emitValue"
-          v-html="element.stem"
+        ></contenteditable>
-        ></div>
       </template>
       <template #input>
         <div contenteditable="true" class="input other_input"></div>
@@ -25,7 +24,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { toRefs } from 'vue';
 const props = defineProps({
   element: {
     type: Object,
@@ -41,17 +40,14 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
-  sn: { type: String, default: '' },
   questionType: { type: [String, Number], default: 4 }
 });
-const element = ref(props.element);
 // 创建一个本地副本以保存更改
-const localElement = ref({ ...props.element });
+const emit = defineEmits(['update:element']);
+const { element } = toRefs(props);
 
-const saveStem = (e) => {
+const emitValue = () => {
-  localElement.value.stem = e.target.innerHTML;
+  emit('update:element', element.value);
-  // 如果需要，可以在这里发出事件以通知父组件
-  // this.$emit('update:element', localElement.value);
 };
 </script>
 

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

@@ -10,12 +10,11 @@
         {{ index + 1 }}
       </template>
       <template #label>
-        <div
+        <contenteditable
-          :contenteditable="active"
+          v-model="element.stem"
-          class="van-field"
+          :active="active"
-          @blur="saveStem($event, element)"
+          @blur="emitValue"
-          v-html="element.stem"
+        ></contenteditable>
-        ></div>
       </template>
       <template #input>
         <div v-for="(optionItem, optionItemIndex) in element.options" :key="optionItemIndex">
@@ -24,11 +23,7 @@
             :key="optionIndex"
             @click="chooseOption(item)"
           >
-            <div
+            <contenteditable v-model="item.option" :active="active"></contenteditable>
-              :contenteditable="item.id === chooseId"
-              class="van-field"
-              v-html="item.option"
-            ></div>
             <RateCharacter :config="element.config"></RateCharacter>
             <div class="tips">
               <p>{{ element.config.prompt_left }}</p>
@@ -43,12 +38,13 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, toRefs, watch } from 'vue';
 import RateCharacter from './RateCharacter.vue';
 
 const props = defineProps({
   element: {
-    type: Object
+    type: Object,
+    required: true
   },
   active: {
     type: Boolean,
@@ -61,14 +57,22 @@ const props = defineProps({
   sn: { type: String, default: '' },
   questionType: { type: [String, Number], default: 4 }
 });
-const element = ref(props.element);
-const chooseId = ref('');
-// 创建一个本地副本以保存更改
-const localElement = ref({ ...props.element });
 
-const saveStem = (e) => {
+const emit = defineEmits(['update:element']);
-  localElement.value.stem = e.target.innerHTML;
+
+const chooseId = ref('');
+const { element } = toRefs(props);
+
+const emitValue = (newVal) => {
+  emit('update:element', newVal || element.value);
 };
+watch(
+  element.value,
+  (newVal) => {
+    emitValue(newVal);
+  },
+  { deep: true }
+);
 
 const chooseOption = (item) => {
   chooseId.value = item.id;