feat(Design): 优化问卷设计样式和功能

- 实现选项功能

- 添加内容可编辑组件拖拽排序功能
- 优化题目和选项的样式
- 添加右键拖拽功能

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

@@ -1,15 +1,31 @@
 <template>
   <div class="option-action">
-    <template v-for="(item, index) in data" :key="index">
-      <div class="flex align-center option-action-container">
-        <slot name="item" :element="item" :index="index"></slot>
-        <span v-if="active" class="flex">
-          <van-icon class-prefix="mobilefont" name="setting " @click="openMoveModel(item, index)" />
-          <van-icon class-prefix="mobilefont" name="gengduo " @click="openOptionActionModel(item, index)" />
-          <van-icon class-prefix="mobilefont" name="del1 " @click="deleteOption(index)" />
-        </span>
-      </div>
-    </template>
+    <draggable
+      v-model:data="data"
+      item-key="option_index"
+      :handle="handle"
+      chosenClass="chosen"
+      animation="300"
+      :scroll="true"
+    >
+      <template #item="{ element, index }">
+        <div class="flex align-center option-action-container">
+          <slot name="item" :element="element" :index="index"></slot>
+          <span v-if="active" class="flex">
+            <!--<van-icon class-prefix="mobilefont"
+            name="setting "
+              @click="openMoveModel(element, index)
+              "/>-->
+            <van-icon
+              class-prefix="mobilefont"
+              name="gengduo "
+              @click="openOptionActionModel(element, index)"
+            />
+            <van-icon class-prefix="mobilefont" name="del1 " @click="deleteOption(index)" />
+          </span>
+        </div>
+      </template>
+    </draggable>
   </div>
   <!--  操作项弹窗-->
   <van-action-sheet v-model:show="show">
@@ -66,15 +82,8 @@
 import CheckboxAction from './components/OptionItemAction/CheckboxAction.vue';
 import { ref } from 'vue';
 import { showConfirmDialog } from 'vant';
+import Draggable from '@/views/Design/components/Draggable.vue';
 const props = defineProps({
-  data: {
-    type: Object,
-    default: () => {
-      return {
-        stem: ''
-      };
-    }
-  },
   active: {
     type: Boolean,
     default: false
@@ -84,9 +93,17 @@ const props = defineProps({
     default: () => {
       // 空
     }
+  },
+  handle: {
+    type: String,
+    default: ''
   }
 });
 
+const data = defineModel('data', {
+  type: Array,
+  default: () => []
+});
 const actions = [
   { name: '上移选项', action: 'up' },
   { name: '下移选项', action: 'down' }
@@ -109,31 +126,31 @@ const openOptionActionModel = (item, index) => {
   activeOption.value = item;
   activeIndex.value = index;
 };
-const openMoveModel = (item, index) => {
-  moveShow.value = true;
-  activeOption.value = item;
-  activeIndex.value = index;
-};
+// const openMoveModel = (item, index) => {
+//   moveShow.value = true;
+//   activeOption.value = item;
+//   activeIndex.value = index;
+// };
 // 上下移动
 const optionMove = (action) => {
   switch (action.action) {
-  case 'up':
-    if (activeIndex.value === 0) {
-      moveShow.value = false;
-      return false;
-    }
-    // 向上移动
-    element.value.splice(activeIndex.value - 1, 0, element.value.splice(activeIndex.value, 1)[0]);
-    activeIndex.value -= 1;
-    break;
-  case 'down':
-    if (activeIndex.value === element.value.length - 1) {
-      moveShow.value = false;
-      return false;
-    }
-    element.value.splice(activeIndex.value + 1, 0, element.value.splice(activeIndex.value, 1)[0]);
-    activeIndex.value += 1;
-    break;
+    case 'up':
+      if (activeIndex.value === 0) {
+        moveShow.value = false;
+        return false;
+      }
+      // 向上移动
+      element.value.splice(activeIndex.value - 1, 0, element.value.splice(activeIndex.value, 1)[0]);
+      activeIndex.value -= 1;
+      break;
+    case 'down':
+      if (activeIndex.value === element.value.length - 1) {
+        moveShow.value = false;
+        return false;
+      }
+      element.value.splice(activeIndex.value + 1, 0, element.value.splice(activeIndex.value, 1)[0]);
+      activeIndex.value += 1;
+      break;
   }
 };
 
@@ -164,7 +181,7 @@ const deleteOption = (index) => {
   & .option-action-container {
     font-size: 16px;
 
-    & .mobilefont{
+    & .mobilefont {
       font-size: 16px;
     }