Merge branch 'feature/feature-20250331-h5' of https://e.coding.yili.com/yldc/ylst/ylst-survey-h5 into feature

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

@@ -1,30 +1,53 @@
 <template>
   <div class="option-action">
-    <template v-for="(item, index) in data" :key="item.id">
+    <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 name="close"></van-icon>
-          <van-icon name="more-o" @click="openOptionActionModel"></van-icon>
+          <van-icon name="close" @click="deleteOption(index)"></van-icon>
+          <van-icon name="more-o" @click="openOptionActionModel(item, index)"></van-icon>
         </span>
       </div>
     </template>
   </div>
+  <!--  操作项弹窗-->
   <van-action-sheet v-model:show="show">
     <template #description>
       <div class="flex flex-start">操作选项</div>
     </template>
-    <div class="">
-      <van-cell title="固定置底"></van-cell>
-      <van-cell title="固定置底"></van-cell>
-      <van-cell title="固定置底"></van-cell>
-      <van-cell title="固定置底"></van-cell>
-    </div>
+    <van-cell-group :border="false" class="ml10">
+      <van-cell title="固定置底" :border="false">
+        <template #right-icon>
+          <van-switch
+            v-model="activeOption.is_fixed"
+            class="option-action-sheet-switch"
+            size="0.5rem"
+            :active-value="1"
+            :inactive-value="0"
+          ></van-switch>
+        </template>
+      </van-cell>
+      <van-cell title="设为其他项" :border="false">
+        <template #right-icon>
+          <van-switch
+            v-model="activeOption.is_other"
+            class="option-action-sheet-switch"
+            size="0.5rem"
+            :active-value="1"
+            :inactive-value="0"
+          ></van-switch>
+        </template>
+      </van-cell>
+      <van-divider></van-divider>
+      <van-cell title="下移选项" :border="false" @click="optionMove('down')"></van-cell>
+      <van-cell title="上移选项" :border="false" @click="optionMove('up')"></van-cell>
+    </van-cell-group>
   </van-action-sheet>
 </template>
 <script setup>
 import { ref } from 'vue';
-defineProps({
+import { showConfirmDialog } from 'vant';
+const props = defineProps({
   data: {
     type: Object,
     default: () => {
@@ -40,17 +63,66 @@ defineProps({
 });
 // const emit = defineEmits(['update:data']);
 const show = ref(false);
+const activeOption = ref({});
+const activeIndex = ref(-1);
+const element = ref(props.data);
 
+// emit('update:data');
 /**
  * @name 打开model弹窗
  * @created_date 2025/3/4
  * @description
  **/
-const openOptionActionModel = () => {
+const openOptionActionModel = (item, index) => {
   show.value = true;
+  activeOption.value = item;
+  activeIndex.value = index;
+};
+
+// 上下移动
+const optionMove = (action) => {
+  switch (action) {
+  case 'up':
+    if (activeIndex.value === 0) {
+      show.value = false;
+      return;
+    }
+    // 向上移动
+    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) {
+      show.value = false;
+      return;
+    }
+    element.value.splice(activeIndex.value + 1, 0, element.value.splice(activeIndex.value, 1)[0]);
+    activeIndex.value += 1;
+    break;
+  }
+};
+
+// 删除当前选项
+
+const deleteOption = (index) => {
+  showConfirmDialog({
+    title: '提示',
+    message: '是否删除选项？'
+  })
+    .then(() => {
+      // on confirm
+      element.value.splice(index, 1);
+    })
+    .catch(() => {
+      // on cancel
+    });
 };
 </script>
 <style scoped lang="scss">
+.ml10 {
+  margin-left: 10px;
+}
+
 .option-action {
   font-size: 20px;