ylst-h5/src/views/Design/components/ActionCompoents/OptionAction.vue

<template>
  <div class="option-action">
    <draggable
      :data="element"
      item-key="option_index"
      :handle="handle"
      chosenClass="chosen"
      animation="300"
      :scroll="true"
      @update:data="updateData"
    >
      <!-- eslint-disable-next-line -->
      <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">
    <div class="van-action-sheet-title">操作选项</div>

    <van-cell-group :border="false" class="br12 round-group">
      <van-cell title="固定置底">
        <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="设为其他项">
        <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>
      <!--复选时出现-->
      <checkbox-action
        v-if="question?.question_type === 2"
        v-model="activeOption.is_remove_other"
      ></checkbox-action>
    </van-cell-group>
  </van-action-sheet>
  <van-action-sheet
    v-model:show="moveShow"
    cancel-text="取消"
    :actions="actions"
    @select="optionMove"
    @cancel="moveShow = false"
  >
    <!--    <template #description>-->
    <!--      <div class="flex flex-start">操作选项</div>-->
    <!--    </template>-->
    <!--    <van-cell-group :border="false" class="ml10">-->
    <!--      <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 CheckboxAction from './components/OptionItemAction/CheckboxAction.vue';
import { ref } from 'vue';
import { showConfirmDialog } from 'vant';
import Draggable from '@/views/Design/components/Draggable.vue';
defineProps({
  active: {
    type: Boolean,
    default: false
  },
  question: {
    type: Object,
    default: () => {
      // 空
    }
  },
  handle: {
    type: String,
    default: ''
  }
});

const element = defineModel('data', {
  type: Array,
  default: () => []
});
const actions = [
  { name: '上移选项', action: 'up' },
  { name: '下移选项', action: 'down' }
];
// const emit = defineEmits(['update:data']);
const show = ref(false);
const moveShow = ref(false);
const activeOption = ref({});
const activeIndex = ref(-1);

const updateData = (newValue) => {
  element.value = newValue;
};

// emit('update:data');
/**
 * @name 打开model弹窗
 * @created_date 2025/3/4
 * @description
 **/
const openOptionActionModel = (item, index) => {
  show.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;
  }
};

// 删除当前选项

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;

  & .option-action-container {
    font-size: 16px;

    & .mobilefont {
      font-size: 16px;
    }

    & .mobilefont + .mobilefont {
      margin-left: 5px;
    }

    & .van-icon + .van-icon {
      margin-left: 5px;
    }

    & .van-icon + .mobilefont {
      margin-left: 5px;
    }
  }
}
</style>