refactor(Design): 重构设计页面组件和逻辑

- 修改 QuestionAction 组件,优化题前隐藏和题后跳转的逻辑和界面
- 更新 ChooseQuestion 组件,改进选项索引的处理方式
- 调整 Design/Index 组件,替换 BaseSelect 为 Choice 组件
- 更新 components.d.ts,添加 VanButton 和 VanDialog 的类型声明
This commit is contained in:
陈昱达
2025-03-05 16:14:09 +08:00
parent 5f32c9eeee
commit af00e94f87
12 changed files with 1072 additions and 273 deletions

View File

@@ -35,12 +35,12 @@
<van-divider></van-divider>
<van-cell title="题前隐藏" :border="false" @click="questionSetting('before')">
<template #right-icon>
<span> {{ getSkipTypeText(0) }} <van-icon name="arrow"></van-icon></span>
<span> {{ getSkipTypeText(1) }} <van-icon name="arrow"></van-icon></span>
</template>
</van-cell>
<van-cell title="题后跳转" :border="false" @click="questionSetting('after')">
<template #right-icon>
<span> {{ getSkipTypeText(1) }} <van-icon name="arrow"></van-icon></span>
<span> {{ getSkipTypeText(0) }} <van-icon name="arrow"></van-icon></span>
</template>
</van-cell>
<van-divider></van-divider>
@@ -54,25 +54,52 @@
<van-popup
v-model:show="questionBeforeShow"
title="题前隐藏逻辑"
label="题前隐藏逻辑"
position="bottom"
:overlay="false"
closeable
close-icon="close"
round
:style="{ minHeight: '60%' }"
:style="{ maxHeight: '75%' }"
>
<template v-for="(item, logicIndex) in logics" :key="logicIndex">
<div
v-if="item.skip_type === skipType && item.question_index === activeQuestion.question_index"
class="mv10 question-setting"
>
<template v-for="(log, logIndex) in item.logic" :key="logIndex">
<yl-select
v-model="log.logic"
:options="settingIfOption"
class="question-setting-if"
></yl-select>
<yl-select v-model="log.logic" :options="settingIfOption"></yl-select>
</template>
</div>
</template>
<div class="mv10">
<header><strong>题前隐藏逻辑</strong></header>
<question-before
v-model="questionsInfo.logics"
:skipType="skipType"
:activeQuestion="activeQuestion"
></question-before>
<van-button>添加逻辑</van-button>
</div>
<!-- <template v-for="(item, index) in logics" :key="index" class="flex">-->
<!-- <div class="flex space-between mv10">-->
<!-- <div-->
<!-- v-if="-->
<!-- item.skip_type === skipType && item.question_index === activeQuestion.question_index-->
<!-- "-->
<!-- class="question-setting"-->
<!-- >-->
<!-- <template v-for="(log, logIndex) in item.logic" :key="logIndex">-->
<!-- <div>-->
<!-- <yl-select-->
<!-- v-model="log.logic"-->
<!-- :options="settingIfOption"-->
<!-- class="question-setting-if"-->
<!-- ></yl-select>-->
<!-- <yl-select v-model="log.logic" :options="settingIfOption"></yl-select>-->
<!-- </div>-->
<!-- </template>-->
<!-- </div>-->
<!-- <div-->
<!-- v-if="-->
<!-- item.skip_type === skipType && item.question_index === activeQuestion.question_index-->
<!-- "-->
<!-- >-->
<!-- del-->
<!-- </div>-->
<!-- </div>-->
<!-- </template>-->
</van-popup>
</template>
<script setup>
@@ -80,18 +107,11 @@ import { showConfirmDialog } from 'vant';
import { ref } from 'vue';
import { useCounterStore } from '@/stores/counter';
import { storeToRefs } from 'pinia';
import YlSelect from '@/components/YLSelect.vue';
import QuestionBefore from '@/views/Design/components/ActionCompoents/components/QuestionBefore.vue';
const store = useCounterStore();
const { questionsInfo } = storeToRefs(store);
const logics = questionsInfo.value.logics;
const settingIfOption = [
{ label: 'if', value: 'if' },
{ label: 'always', value: 'always' }
];
const props = defineProps({
index: {
type: Number,
@@ -187,7 +207,7 @@ const questionSetting = (type) => {
questionBeforeShow.value = true;
break;
}
skipType.value = type === 'before' ? 0 : 1;
skipType.value = type === 'before' ? 1 : 0;
};
</script>
<style scoped lang="scss">
@@ -205,10 +225,6 @@ const questionSetting = (type) => {
//max-width: 90vw;
}
.question-setting-if {
width: 140px;
}
.question-action-container {
font-size: 20px;