feat(Design): 优化题目和选项的移动操作
- 在 OptionAction 组件中添加新的移动选项功能 - 在 QuestionAction 组件中增加题目移动和复制功能- 更新组件样式，替换部分图标 - 优化移动操作的交互逻辑
This commit is contained in:
陈昱达
2
components.d.ts
vendored
2
components.d.ts
vendored
@@ -16,11 +16,11 @@ declare module 'vue' {
|
||||
VanCheckbox: typeof import('vant/es')['Checkbox']
|
||||
VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
|
||||
VanCol: typeof import('vant/es')['Col']
|
||||
VanDialog: typeof import('vant/es')['Dialog']
|
||||
VanDivider: typeof import('vant/es')['Divider']
|
||||
VanField: typeof import('vant/es')['Field']
|
||||
VanIcon: typeof import('vant/es')['Icon']
|
||||
VanPopup: typeof import('vant/es')['Popup']
|
||||
VanRate: typeof import('vant/es')['Rate']
|
||||
VanRow: typeof import('vant/es')['Row']
|
||||
VanSearch: typeof import('vant/es')['Search']
|
||||
VanSwitch: typeof import('vant/es')['Switch']
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
<slot name="item" :element="item" :index="index"></slot>
|
||||
<span v-if="active" class="flex">
|
||||
<van-icon name="close" @click="deleteOption(index)"></van-icon>
|
||||
<van-icon name="setting-o" @click="openMoveModel(item, index)"></van-icon>
|
||||
<van-icon name="more-o" @click="openOptionActionModel(item, index)"></van-icon>
|
||||
</span>
|
||||
</div>
|
||||
@@ -43,6 +44,21 @@
|
||||
<van-cell title="上移选项" :border="false" @click="optionMove('up')"></van-cell>
|
||||
</van-cell-group>
|
||||
</van-action-sheet>
|
||||
<van-action-sheet
|
||||
v-model:show="moveShow"
|
||||
cancel-text="取消"
|
||||
@select="optionMove"
|
||||
@cancel="moveShow = false"
|
||||
:actions="actions"
|
||||
>
|
||||
<!-- <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 { ref } from 'vue';
|
||||
@@ -61,8 +77,14 @@ const props = defineProps({
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
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 element = ref(props.data);
|
||||
@@ -78,23 +100,27 @@ const openOptionActionModel = (item, index) => {
|
||||
activeOption.value = item;
|
||||
activeIndex.value = index;
|
||||
};
|
||||
|
||||
const openMoveModel = (item, index) => {
|
||||
moveShow.value = true;
|
||||
activeOption.value = item;
|
||||
activeIndex.value = index;
|
||||
};
|
||||
// 上下移动
|
||||
const optionMove = (action) => {
|
||||
switch (action) {
|
||||
switch (action.action) {
|
||||
case 'up':
|
||||
if (activeIndex.value === 0) {
|
||||
show.value = false;
|
||||
return;
|
||||
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) {
|
||||
show.value = false;
|
||||
return;
|
||||
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;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="container question-action-container flex">
|
||||
<van-icon name="delete" @click="deleteQuestion"></van-icon>
|
||||
<van-icon name="clear" @click="deleteQuestion"></van-icon>
|
||||
<van-icon name="setting" @click="openQuestionSettingModel"></van-icon>
|
||||
<van-icon name="more" @click="openQuestionActionModel"></van-icon>
|
||||
</div>
|
||||
|
||||
@@ -48,9 +49,21 @@
|
||||
<van-cell title="上移题目" :border="false" @click="questionMove('up')"></van-cell>
|
||||
</van-cell-group>
|
||||
</van-action-sheet>
|
||||
<!-- 移动 复制-->
|
||||
<van-action-sheet
|
||||
v-model:show="questionShow"
|
||||
title=""
|
||||
@select="questionMove"
|
||||
:actions="actions"
|
||||
cancel-text="取消"
|
||||
>
|
||||
<!-- <van-cell-group :border="false" class="ml10">-->
|
||||
<!-- <van-cell title="下移题目" :border="false" @click="questionMove('down')"></van-cell>-->
|
||||
<!-- <van-cell title="上移题目" :border="false" @click="questionMove('up')"></van-cell>-->
|
||||
<!-- </van-cell-group>-->
|
||||
</van-action-sheet>
|
||||
|
||||
<!-- 题目操作 题前 题后-->
|
||||
|
||||
<van-popup
|
||||
v-model:show="questionBeforeShow"
|
||||
:close-on-click-overlay="false"
|
||||
@@ -86,6 +99,7 @@ import QuestionBefore from '@/views/Design/components/ActionCompoents/components
|
||||
const store = useCounterStore();
|
||||
const { questionsInfo } = storeToRefs(store);
|
||||
const logics = questionsInfo.value.logics;
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
const props = defineProps({
|
||||
index: {
|
||||
@@ -113,7 +127,13 @@ const questions = ref(props.questions);
|
||||
const activeQuestion = ref(props.data);
|
||||
|
||||
const show = ref(false);
|
||||
const questionShow = ref(false);
|
||||
const questionBeforeShow = ref(false);
|
||||
const actions = [
|
||||
{ name: '上移题目', action: 'up' },
|
||||
{ name: '下移题目', action: 'down' },
|
||||
{ name: '复制题目', action: 'copy' }
|
||||
];
|
||||
const deleteQuestion = () => {
|
||||
showConfirmDialog({
|
||||
title: '提示',
|
||||
@@ -132,22 +152,35 @@ const deleteQuestion = () => {
|
||||
const openQuestionActionModel = () => {
|
||||
show.value = true;
|
||||
};
|
||||
|
||||
const openQuestionSettingModel = () => {
|
||||
questionShow.value = true;
|
||||
};
|
||||
// 题目上下移动
|
||||
const questionMove = (action) => {
|
||||
if (action === 'down') {
|
||||
if (action.action === 'down') {
|
||||
if (props.questionIndex === questions.value.length - 1) {
|
||||
return;
|
||||
}
|
||||
const temp = questions.value[props.questionIndex];
|
||||
questions.value.splice(props.questionIndex, 1);
|
||||
questions.value.splice(props.questionIndex + 1, 0, temp);
|
||||
} else {
|
||||
} else if (action.action === 'up') {
|
||||
if (props.questionIndex === 0) {
|
||||
return;
|
||||
}
|
||||
const temp = questions.value[props.questionIndex];
|
||||
questions.value.splice(props.questionIndex, 1);
|
||||
questions.value.splice(props.questionIndex - 1, 0, temp);
|
||||
} else {
|
||||
// 复制 题目 生成新的id 更新最新的 last index
|
||||
const temp = questions.value[props.questionIndex];
|
||||
questions.value.splice(props.questionIndex + 1, 0, {
|
||||
...temp,
|
||||
id: uuidv4(),
|
||||
question_index: questionsInfo.value.survey.last_question_index + 1
|
||||
});
|
||||
questionsInfo.value.survey.last_question_index += 1;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -193,10 +226,12 @@ const questionSetting = (type) => {
|
||||
.mv10 {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.before-or-after {
|
||||
height: 500px;
|
||||
overflow: auto;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.y-select {
|
||||
min-width: 10vw;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user