feat:新增 填空题

src/stores/modules/common.ts

@@ -1495,7 +1495,7 @@ export const useCommonStore = defineStore('common', {
         {
           id: '17835010',
           title: 'A6',
-          stem: '<p>请问您为什么<span style="text-decoration: underline; color: #2dc26b;" data-mce-style="text-decoration: underline; color: #2dc26b;"><strong>喜欢</strong></span>这些地方？</p><p><img style="height: 50px; max-height: 440px;" src="https://test-cxp-public-web-1302259445.cos.ap-beijing.myqcloud.com/uat-yls/packing/imgs/1725421981418_809_mao-23.jpg"></p>',
+          stem: '<p>请问您为什么<span style="text-decoration: underline; color: #2dc26b;" data-mce-style="text-decoration: underline; color: #2dc26b;"><strong>喜欢</strong></span>这些地方？</p>',
           other: '概念诊断问卷配置概念诊断1',
           question_index: 6,
           question_type: 4,
@@ -2832,7 +2832,7 @@ export const useCommonStore = defineStore('common', {
         {
           id: '17835015',
           title: 'B4',
-          stem: '<p>请问您为什么<span style="text-decoration: underline; color: #e03e2d;" data-mce-style="text-decoration: underline; color: #e03e2d;"><strong>不喜欢</strong></span>这些地方？</p><p><img style="height: 50px; max-height: 440px;" src="https://test-cxp-public-web-1302259445.cos.ap-beijing.myqcloud.com/uat-yls/packing/imgs/1725421988964_889_mao-012-small.jpg"></p>',
+          stem: '<p>请问您为什么<span style="text-decoration: underline; color: #e03e2d;" data-mce-style="text-decoration: underline; color: #e03e2d;"><strong>不喜欢</strong></span>这些地方？</p>',
           other: '概念诊断问卷配置概念诊断2',
           question_index: 11,
           question_type: 4,

src/views/Design/Index.vue

@@ -21,7 +21,14 @@
             :element="element"
             :active="chooseQuestionId === element.id"
           ></base-select>
+          <Completion
+            v-if="element.question_type === 4"
+            :element="element"
+            :active="chooseQuestionId === element.id"
+            sn="lXEBBpE2"
+          ></Completion>
         </choose-question>
+
         <!--        {{ element.question_type }}-->
         <!--        {{questionInfo.survey.pages.length}}-->
         <paging
@@ -43,6 +50,7 @@ import Draggable from './components/Draggable.vue';
 import BaseSelect from './components/Questions/BaseSelect.vue';
 import ChooseQuestion from './components/ChooseQuestion.vue';
 import Paging from './components/Questions/paging/Paging.vue';
+import Completion from './components/Questions/Completion.vue';
 
 const activeIndex = ref(-1);
 /**

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

@@ -0,0 +1,67 @@
+<template>
+  <div class="cont">
+    <van-field
+      v-model="element.stem"
+      :label="element.stem"
+      :required="element.config.is_required === 1"
+      label-align="top"
+    >
+      <template #label>
+        <div
+          :contenteditable="active"
+          class="van-field"
+          @blur="saveStem($event, element)"
+          v-html="element.stem"
+        ></div>
+      </template>
+      <template #input>
+        <div contenteditable="true" class="input other_input"></div>
+      </template>
+    </van-field>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const props = defineProps({
+  element: {
+    type: Object,
+    default: () => {
+      //补充
+    }
+  },
+  active: {
+    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 saveStem = (e) => {
+  localElement.value.stem = e.target.innerHTML;
+  // 如果需要，可以在这里发出事件以通知父组件
+  // this.$emit('update:element', localElement.value);
+};
+</script>
+
+<style scoped lang="scss">
+.cont {
+  .other_input {
+    width: 100%;
+    height: 40px;
+    margin-bottom: 10px;
+    padding: 3px 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    outline: none;
+  }
+}
+
+.text_value {
+  border: 1px solid #ccc !important;
+}
+</style>