feat(Design): 选择题支持单选和多选功能

- 修改 Choice 组件，支持单选和多选的渲染逻辑
- 新增 CheckboxAction 组件，用于多选题的排它项设置
- 更新 QuestionAction 组件，适配新的单选和多选逻辑
- 调整 Index 组件，支持单选和多选题的显示
- 修改 stores 中的 question_type 值，以区分单选和多选

components.d.ts

@@ -13,6 +13,8 @@ declare module 'vue' {
     VanButton: typeof import('vant/es')['Button']
     VanCell: typeof import('vant/es')['Cell']
     VanCellGroup: typeof import('vant/es')['CellGroup']
+    VanCheck: typeof import('vant/es')['Check']
+    VanCheckbo: typeof import('vant/es')['Checkbo']
     VanCheckbox: typeof import('vant/es')['Checkbox']
     VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
     VanCol: typeof import('vant/es')['Col']
@@ -21,6 +23,8 @@ declare module 'vue' {
     VanField: typeof import('vant/es')['Field']
     VanIcon: typeof import('vant/es')['Icon']
     VanPopup: typeof import('vant/es')['Popup']
+    VanRadio: typeof import('vant/es')['Radio']
+    VanRadioGroup: typeof import('vant/es')['RadioGroup']
     VanRow: typeof import('vant/es')['Row']
     VanSearch: typeof import('vant/es')['Search']
     VanSwitch: typeof import('vant/es')['Switch']

src/stores/modules/common.ts

@@ -264,7 +264,7 @@ export const useCommonStore = defineStore('common', {
           stem: '请选择一个选项',
           other: '',
           question_index: 30,
-          question_type: 1,
+          question_type: 2,
           config: {
             placeholder: '',
             version: '',

src/views/Design/Index.vue

@@ -18,7 +18,7 @@
         >
           <!-- 选择题 -->
           <Choice
-            v-if="element.question_type === 1"
+            v-if="element.question_type === 1 || element.question_type === 2"
             :element="element"
             :active="chooseQuestionId === element.id"
           ></Choice>
@@ -151,7 +151,7 @@ const getChooseQuestionId = (questionItem) => {
 // 组件对应的操作
 const actionOptions = [
   {
-    question_type: [1, 5],
+    question_type: [1, 2, 5],
     actions: [
       {
         label: '添加选项',

src/views/Design/components/ActionCompoents/OptionAction.vue

@@ -39,9 +39,11 @@
           ></van-switch>
         </template>
       </van-cell>
-      <van-divider></van-divider>
+      <!--复选时出现-->
-      <van-cell title="下移选项" :border="false" @click="optionMove('down')"></van-cell>
+      <checkbox-action
-      <van-cell title="上移选项" :border="false" @click="optionMove('up')"></van-cell>
+        v-if="question?.question_type === 2"
+        v-model="activeOption.is_remove_other"
+      ></checkbox-action>
     </van-cell-group>
   </van-action-sheet>
   <van-action-sheet
@@ -61,6 +63,7 @@
   </van-action-sheet>
 </template>
 <script setup>
+import CheckboxAction from './components/OptionItemAction/CheckboxAction.vue';
 import { ref } from 'vue';
 import { showConfirmDialog } from 'vant';
 const props = defineProps({
@@ -75,6 +78,12 @@ const props = defineProps({
   active: {
     type: Boolean,
     default: false
+  },
+  question: {
+    type: Object,
+    default: () => {
+      // 空
+    }
   }
 });
 

src/views/Design/components/ActionCompoents/QuestionAction.vue

@@ -88,7 +88,7 @@ import { showConfirmDialog } from 'vant';
 import { ref } from 'vue';
 import { useCounterStore } from '@/stores/counter';
 import { storeToRefs } from 'pinia';
-import QuestionBefore from '@/views/Design/components/ActionCompoents/components/QuestionBefore.vue';
+import QuestionBefore from '@/views/Design/components/ActionCompoents/components/QuestionItemAction/QuestionBefore.vue';
 import { v4 as uuidv4 } from 'uuid';
 const store = useCounterStore();
 const { questionsInfo } = storeToRefs(store);

src/views/Design/components/ActionCompoents/components/OptionItemAction/CheckboxAction.vue

@@ -0,0 +1,38 @@
+<template>
+  <van-cell class="checkbox-action-container" title="设为排它项" :border="false">
+    <template #right-icon>
+      <van-switch
+        :model-value="localActiveOption"
+        class="option-action-sheet-switch"
+        size="0.5rem"
+        :active-value="1"
+        :inactive-value="0"
+        @update:model-value="updateIsRemoveOther"
+      ></van-switch>
+    </template>
+  </van-cell>
+</template>
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 0
+  }
+});
+const emit = defineEmits(['update:modelValue']);
+
+const localActiveOption = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue);
+  }
+});
+
+const updateIsRemoveOther = (newValue) => {
+  emit('update:modelValue', newValue);
+};
+</script>
+<style scoped lang="scss"></style>

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

@@ -15,13 +15,13 @@
       ></div>
     </template>
     <template #input>
-      <van-checkbox-group>
       <template v-for="(item, index) in element.options" :key="index">
-          <option-action v-model:data="element.options[index]" :active="active">
+        <van-radio-group v-if="element.question_type === 1">
+          <option-action v-model:data="element.options[index]" :active="active" :question="element">
             <template #item="{ element: it, index: itIndex }">
-              <van-checkbox
+              <van-radio
                 :key="itIndex"
-                :name="it.value"
+                :name="it.option_index"
                 :label="it.label"
                 :disabled="it.disabled"
                 icon-size="0.45rem"
@@ -29,7 +29,34 @@
                 <template #default>
                   <div class="flex align-center van-cell">
                     <div
-                      class="van-cell--borderless"
+                      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>
+                  </div>
+                </template>
+              </van-radio>
+            </template>
+          </option-action>
+        </van-radio-group>
+        <van-checkbox-group v-if="element.question_type === 2" shape="square">
+          <option-action v-model:data="element.options[index]" :active="active" :question="element">
+            <template #item="{ element: it, index: itIndex }">
+              <van-checkbox
+                :key="itIndex"
+                :name="it.option_index"
+                :label="it.label"
+                :disabled="it.disabled"
+                icon-size="0.45rem"
+              >
+                <template #default>
+                  <div class="flex align-center van-cell">
+                    <div
+                      class="van-cell--borderless choice-html"
                       :contenteditable="active"
                       @blur="saveOption($event, it)"
                       v-html="it.option"
@@ -42,9 +69,9 @@
               </van-checkbox>
             </template>
           </option-action>
-        </template>
         </van-checkbox-group>
       </template>
+    </template>
   </van-field>
 </template>
 <script setup>
@@ -74,16 +101,26 @@ const saveStem = (e, ele) => {
 };
 </script>
 <style scoped lang="scss">
+.choice-html {
+  width: 100%;
+}
+
 .base-select {
-  & .van-checkbox-group {
+  & .van-checkbox-group,
+  .van-radio-group {
     width: 100%;
 
-    & .van-checkbox {
+    & .van-checkbox,
+    .van-radio {
       width: 100%;
 
       & ::v-deep .van-checkbox__label {
         width: 100%;
       }
+
+      & ::v-deep .van-radio__label {
+        width: 100%;
+      }
     }
   }