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

- 实现选项功能

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

src/assets/css/public.scss

@@ -51,3 +51,51 @@
     background-color: rgba(0, 0, 0, 0.7) !important;
   }
 }
+
+.contenteditable {
+  width: 100%;
+}
+
+.contenteditable-input {
+  width: 100%;
+  padding: 5px 8px;
+  border: none;
+  border-radius: 8px;
+  background: #fafbfc;
+  outline: 1px solid #f4f4f4;
+  font-size: 14px;
+}
+
+.contenteditable-label {
+  width: 100%;
+
+  //outline: 1px solid #ccc;
+  //border-bottom: 1px solid #ccc;
+}
+
+.contenteditable-question-title {
+  & .van-cell__title {
+    position: relative;
+
+    &::after {
+      content: ' ';
+      position: absolute;
+      bottom: -2px;
+      box-sizing: border-box;
+      width: 100%;
+      border-bottom: 0.0267rem solid #ebedf0;
+      pointer-events: none;
+      transform: scaleY(0.5);
+    }
+
+    &:focus-within::after {
+      border-bottom-color: $theme-color;
+    }
+
+    & .contenteditable-label {
+      & :focus {
+        //color: green;
+      }
+    }
+  }
+}

src/components/contenteditable.vue

@@ -1,11 +1,16 @@
 <template>
+  <div class="flex contenteditable align-center space-between" :class="className">
     <p
       ref="editor"
       :contenteditable="active"
-    class="van-field"
+      class="van-field contenteditable-content"
-    :class="className"
       v-html="modelValue"
     ></p>
+    <div class="right-icon ml10">
+      <slot name="right-icon"></slot>
+    </div>
+  </div>
+
   <div v-if="showAction && active" ref="editorAction" class="editor-action">
     <button v-for="item in actions" :key="item.name" @click="funEvent(item, $event)">
       {{ item.label }}
@@ -138,6 +143,14 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
+.contenteditable-content {
+  width: 100%;
+}
+
+.right-icon {
+  color: #c4c9d4;
+}
+
 .editor-action {
   position: fixed;
   bottom: 0;

src/views/Design/Index.vue

@@ -4,7 +4,7 @@
       v-if="questionInfo.questions.length > 0"
       v-model:data="questionInfo.questions"
       item-key="id"
-      handle=".moverQues"
+      handle=".moveQuestion"
       chosenClass="chosen"
       animation="300"
       :scroll="true"
@@ -105,8 +105,11 @@
                   class="flex"
                 >
                   <template v-for="(act, actIndex) in item.actions" :key="actIndex">
-                    <div class="flex align-center action-item" @click="actionEvent(act, el)">
+                    <div
-                      <van-icon :name="act.icon"></van-icon>
+                      class="flex align-center action-item theme-color"
+                      @click="actionEvent(act, el)"
+                    >
+                      <van-icon :name="act.icon" class="icons"></van-icon>
                       <span class="ml10">{{ act.label }}</span>
                     </div>
                   </template>
@@ -269,7 +272,7 @@ const actionOptions = [
     actions: [
       {
         label: '添加选项',
-        icon: 'add',
+        icon: 'add-o',
         fun: 'radioAddOption'
       }
     ]
@@ -280,12 +283,12 @@ const actionOptions = [
     actions: [
       {
         label: '添加行标签',
-        icon: 'add',
+        icon: 'add-o',
         fun: 'addMatrixRowOption'
       },
       {
         label: '添加列标签',
-        icon: 'add',
+        icon: 'add-o',
         fun: 'addMatrixColumnOption'
       }
     ]
@@ -448,7 +451,11 @@ onMounted(() => {
   //background-color: #e9eef3;
   color: #333;
 
-  .slot-actions {
+  ::v-deep .slot-actions {
+    & .action-item {
+      font-size: 15px;
+    }
+
     & .action-item + .action-item {
       margin-left: 10px;
     }

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">
+    <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="item" :index="index"></slot>
+          <slot name="item" :element="element" :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"
-          <van-icon class-prefix="mobilefont" name="gengduo " @click="openOptionActionModel(item, index)" />
+            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,11 +126,11 @@ const openOptionActionModel = (item, index) => {
   activeOption.value = item;
   activeIndex.value = index;
 };
-const openMoveModel = (item, index) => {
+// const openMoveModel = (item, index) => {
-  moveShow.value = true;
+//   moveShow.value = true;
-  activeOption.value = item;
+//   activeOption.value = item;
-  activeIndex.value = index;
+//   activeIndex.value = index;
-};
+// };
 // 上下移动
 const optionMove = (action) => {
   switch (action.action) {

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

@@ -4,13 +4,18 @@
     :label="element.stem"
     :required="element.config.is_required === 1"
     label-align="top"
-    class="base-select"
+    class="contenteditable-question-title base-select"
   >
     <template #left-icon>
       {{ index + 1 }}
     </template>
     <template #label>
-      <contenteditable v-model="element.stem" :active="active" @blur="emitValue"></contenteditable>
+      <contenteditable
+        v-model="element.stem"
+        className="contenteditable-label"
+        :active="active"
+        @blur="emitValue"
+      ></contenteditable>
     </template>
     <template #input>
       <template v-for="(item, optionIndex) in element.options" :key="item.id">
@@ -19,6 +24,7 @@
             v-model:data="element.options[optionIndex]"
             :active="active"
             :question="element"
+            handle=".moverQues"
           >
             <template #item="{ element: it, index: itIndex }">
               <van-radio
@@ -31,7 +37,17 @@
                 <!--       自定义文本         -->
                 <template #default>
                   <div class="flex align-center van-cell">
-                    <contenteditable v-model="it.option" :active="active"></contenteditable>
+                    <contenteditable
+                      v-model="it.option"
+                      className="contenteditable-input"
+                      :active="active"
+                    >
+                      <template #right-icon>
+                        <div v-if="active" class="moverQues">
+                          <van-icon class-prefix="mobilefont" name="option "></van-icon>
+                        </div>
+                      </template>
+                    </contenteditable>
                     <div v-if="it.is_other">
                       <input class="other-input" type="text" />
                     </div>
@@ -57,7 +73,17 @@
               >
                 <template #default>
                   <div class="flex align-center van-cell">
-                    <contenteditable v-model="it.option" :active="active"></contenteditable>
+                    <contenteditable
+                      v-model="it.option"
+                      className="contenteditable-input"
+                      :active="active"
+                    >
+                      <template #right-icon>
+                        <div v-if="active" class="moverQues">
+                          <van-icon class-prefix="mobilefont" name="option "></van-icon>
+                        </div>
+                      </template>
+                    </contenteditable>
                     <div v-if="it.is_other">
                       <input class="other-input" type="text" />
                     </div>