Merge branch 'feature/feature-20250331-h5' of https://e.coding.yili.com/yldc/ylst/ylst-survey-h5 into feature/feature-20250331-h5
This commit is contained in:
Huangzhe
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"explorer.confirmDelete": false,
|
||||
"editor.fontSize": 18,
|
||||
"editor.fontSize": 16,
|
||||
"workbench.editorAssociations": {
|
||||
"*.ipynb": "jupyter.notebook.ipynb"
|
||||
},
|
||||
|
||||
3
components.d.ts
vendored
3
components.d.ts
vendored
@@ -2,7 +2,7 @@
|
||||
// @ts-nocheck
|
||||
// Generated by unplugin-vue-components
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
export {}
|
||||
export {};
|
||||
|
||||
/* prettier-ignore */
|
||||
declare module 'vue' {
|
||||
@@ -10,6 +10,7 @@ declare module 'vue' {
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
VanActionSheet: typeof import('vant/es')['ActionSheet']
|
||||
VanButton: typeof import('vant/es')['Button']
|
||||
VanCell: typeof import('vant/es')['Cell']
|
||||
VanCellGroup: typeof import('vant/es')['CellGroup']
|
||||
VanCheckbox: typeof import('vant/es')['Checkbox']
|
||||
|
||||
@@ -32,6 +32,10 @@ a,
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.flex-warp {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@@ -6,7 +6,13 @@
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled"
|
||||
/>
|
||||
>
|
||||
<span style="float: left" v-html="item.label"></span>
|
||||
</el-option>
|
||||
<template #label="{ label }">
|
||||
<!-- {{ option }}-->
|
||||
<div v-html="label"></div>
|
||||
</template>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
@@ -70,7 +76,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.yl-select {
|
||||
height: 44px; /* 增加高度以适应触摸 */
|
||||
height: 35px; /* 增加高度以适应触摸 */
|
||||
padding: 10px; /* 增加内边距 */
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,24 +1,60 @@
|
||||
<template>
|
||||
<div class="design-create">
|
||||
<draggable v-model:data="questionInfo.questions" item-key="id" handle=".moverQues" chosenClass="chosen"
|
||||
animation="300" :scroll="true">
|
||||
<draggable
|
||||
v-model:data="questionInfo.questions"
|
||||
item-key="id"
|
||||
handle=".moverQues"
|
||||
chosenClass="chosen"
|
||||
animation="300"
|
||||
:scroll="true"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<choose-question :element="element" :questions="questionInfo.questions" :index="index"
|
||||
:chooseQuestionId="chooseQuestionId" @get-choose-question-id="getChooseQuestionId">
|
||||
<base-select v-if="element.question_type === 1" :element="element"
|
||||
:active="chooseQuestionId === element.id"></base-select>
|
||||
<Completion v-if="element.question_type === 4" :element="element" :active="chooseQuestionId === element.id"
|
||||
sn="lXEBBpE2"></Completion>
|
||||
<choose-question
|
||||
:element="element"
|
||||
:questions="questionInfo.questions"
|
||||
:index="index"
|
||||
:chooseQuestionId="chooseQuestionId"
|
||||
@get-choose-question-id="getChooseQuestionId"
|
||||
>
|
||||
<!-- 选择题 -->
|
||||
<Choice
|
||||
v-if="element.question_type === 1"
|
||||
:element="element"
|
||||
:active="chooseQuestionId === element.id"
|
||||
></Choice>
|
||||
<!-- 填空题 -->
|
||||
<Completion
|
||||
v-if="element.question_type === 4"
|
||||
:element="element"
|
||||
:active="chooseQuestionId === element.id"
|
||||
sn="lXEBBpE2"
|
||||
></Completion>
|
||||
|
||||
<martrix-question v-if="element.question_type === 9" :element="element"
|
||||
:active="chooseQuestionId === element.id" />
|
||||
<martrix-question
|
||||
v-if="element.question_type === 9"
|
||||
:element="element"
|
||||
:active="chooseQuestionId === element.id"
|
||||
/>
|
||||
|
||||
<!-- 打分题 -->
|
||||
<Rate
|
||||
v-if="element.question_type === 5"
|
||||
:element="element"
|
||||
:active="chooseQuestionId === element.id"
|
||||
sn="lXEBBpE2"
|
||||
/>
|
||||
<!-- @update="updateHandle" -->
|
||||
</choose-question>
|
||||
|
||||
<!-- {{ element.question_type }}-->
|
||||
<!-- {{questionInfo.survey.pages.length}}-->
|
||||
<paging v-if="!element.question_type && questionInfo.survey.pages.length > 1" :info="element" :index="index"
|
||||
:active="pageIsActive(activeIndex, questionInfo.questions, element.page)" @click.stop="" />
|
||||
<paging
|
||||
v-if="!element.question_type && questionInfo.survey.pages.length > 1"
|
||||
:info="element"
|
||||
:index="index"
|
||||
:active="pageIsActive(activeIndex, questionInfo.questions, element.page)"
|
||||
@click.stop=""
|
||||
/>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
@@ -28,16 +64,18 @@ import { ref, onMounted } from 'vue';
|
||||
import { useCounterStore } from '@/stores/counter';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import Draggable from './components/Draggable.vue';
|
||||
import BaseSelect from './components/Questions/BaseSelect.vue';
|
||||
import Choice from './components/Questions/Choice.vue';
|
||||
import ChooseQuestion from './components/ChooseQuestion.vue';
|
||||
import Paging from './components/Questions/paging/Paging.vue';
|
||||
import Completion from './components/Questions/Completion.vue';
|
||||
import MartrixQuestion from './components/Questions/MartrixQuestion.vue';
|
||||
import Rate from './components/Questions/Rate.vue';
|
||||
|
||||
const activeIndex = ref(-1);
|
||||
/**
|
||||
* 工具函数
|
||||
*/
|
||||
function util () {
|
||||
function util() {
|
||||
/** 通过id找到数组中对应的下标 */
|
||||
const getIndexById = (arr, id) => arr.findIndex((i) => i.id === id);
|
||||
/** 通过分页找到数组中对应的下标 */
|
||||
|
||||
@@ -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, index) in logics" :key="index">
|
||||
<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 class="mv10">
|
||||
<header><strong>题前隐藏逻辑</strong></header>
|
||||
<question-before
|
||||
v-model="questionsInfo.logics"
|
||||
:skipType="skipType"
|
||||
:activeQuestion="activeQuestion"
|
||||
></question-before>
|
||||
<van-button>添加逻辑</van-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <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,
|
||||
@@ -162,8 +182,8 @@ const getSkipTypeText = (skipType) => {
|
||||
const ls = [];
|
||||
logics.map((item) => {
|
||||
if (
|
||||
item.skip_type === skipType
|
||||
&& item.question_index === activeQuestion.value.question_index
|
||||
item.skip_type === skipType &&
|
||||
item.question_index === activeQuestion.value.question_index
|
||||
) {
|
||||
ls.push(item);
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -0,0 +1,309 @@
|
||||
<template>
|
||||
<template v-for="(item, index) in logics" :key="index">
|
||||
<div
|
||||
v-if="item.skip_type === skipType && item.question_index === activeQuestion.question_index"
|
||||
>
|
||||
<div class="mt10">
|
||||
<template v-for="(log, logIndex) in item.logic" :key="logIndex">
|
||||
<div class="flex align-center space-between">
|
||||
<div class="question-before mb10">
|
||||
<!-- if always-->
|
||||
<yl-select
|
||||
v-model="log.logic"
|
||||
:options="logIndex === 0 ? settingIfOptions : settingAndOptions"
|
||||
class="if mr10"
|
||||
@change="logicIf($event, index)"
|
||||
></yl-select>
|
||||
<!-- 问题-->
|
||||
<yl-select
|
||||
v-if="log.logic !== 'always'"
|
||||
v-model="log.question_index"
|
||||
class="question"
|
||||
:options="beforeQuesOptions"
|
||||
placeholder="请选择问题"
|
||||
></yl-select>
|
||||
<!-- 为空 不为空-->
|
||||
<yl-select
|
||||
v-if="log.logic !== 'always'"
|
||||
v-model="log.is_answer"
|
||||
class="answer mr10 mt10"
|
||||
:options="answerOptions"
|
||||
></yl-select>
|
||||
<!-- 选项 or 分组 -->
|
||||
<yl-select
|
||||
v-if="log.logic !== 'always' && log.is_answer !== 0"
|
||||
v-model="log.is_option_group"
|
||||
:options="groupOptions"
|
||||
class="mr10 group mt10"
|
||||
></yl-select>
|
||||
<!-- 符号-->
|
||||
<yl-select
|
||||
v-if="log.logic !== 'always' && log.is_answer !== 0"
|
||||
v-model="log.operator"
|
||||
:options="symbolOptions"
|
||||
class="mr10 symbol mt10"
|
||||
></yl-select>
|
||||
<!-- 分组 option 选项option-->
|
||||
<div
|
||||
v-if="log.logic !== 'always' && log.is_answer !== 0"
|
||||
class="flex align-center space-between option mt10"
|
||||
>
|
||||
<yl-select
|
||||
v-if="log.is_option_group === 0"
|
||||
v-model="log.option_index"
|
||||
class="mr10"
|
||||
:options="changeQuestionIndex(log.question_index, log)"
|
||||
></yl-select>
|
||||
<yl-select
|
||||
v-else
|
||||
v-model="log.group_index"
|
||||
class="mr10"
|
||||
:options="changeQuestionIndex(log.question_index, log)"
|
||||
></yl-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action">
|
||||
<van-icon
|
||||
v-if="logIndex !== 0 || log.logic === 'always'"
|
||||
name="clear"
|
||||
class="mr10"
|
||||
@click="deleteLogic(logIndex, item.logic, index)"
|
||||
></van-icon>
|
||||
<van-icon
|
||||
v-if="log.logic !== 'always'"
|
||||
name="add"
|
||||
@click="addLogic(logIndex, item.logic)"
|
||||
></van-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 如果是题前隐藏-->
|
||||
<div v-if="skipType === 1">隐藏本题</div>
|
||||
</div>
|
||||
|
||||
<van-divider
|
||||
:dashed="true"
|
||||
:hairline="false"
|
||||
content-position="right"
|
||||
:style="{ borderColor: '#bfbfbf' }"
|
||||
>
|
||||
<van-icon name="delete">删除</van-icon>
|
||||
</van-divider>
|
||||
<!-- <div-->
|
||||
<!-- v-if="item.skip_type === skipType && item.question_index === activeQuestion.question_index"-->
|
||||
<!-- >-->
|
||||
<!-- del-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<script setup>
|
||||
import YlSelect from '@/components/YLSelect.vue';
|
||||
import { ref } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useCounterStore } from '@/stores/counter';
|
||||
const store = useCounterStore();
|
||||
const { questionsInfo } = storeToRefs(store);
|
||||
const logics = ref(questionsInfo.value.logics);
|
||||
const questions = questionsInfo.value.questions;
|
||||
const props = defineProps({
|
||||
activeQuestion: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
skipType: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
// 变量为beforeList questions里面 获取activeQuestion 之前所有的题目
|
||||
|
||||
const questionIndex = questions.findIndex((item) => {
|
||||
return item.id === props.activeQuestion.id;
|
||||
});
|
||||
|
||||
// 当前题目之前的列表
|
||||
let beforeQuesOptions = [];
|
||||
if (questionIndex > 0) {
|
||||
beforeQuesOptions = questions.slice(0, questionIndex).map((item) => {
|
||||
return {
|
||||
...item,
|
||||
label: item.stem,
|
||||
value: item.question_index
|
||||
};
|
||||
});
|
||||
}
|
||||
// 题目选项
|
||||
let optionOptions = [];
|
||||
|
||||
const changeQuestionIndex = (value, logicItem) => {
|
||||
if (!value) {
|
||||
return [];
|
||||
}
|
||||
beforeQuesOptions.map((item) => {
|
||||
if (item.question_index === value) {
|
||||
if (logicItem.is_option_group === 0) {
|
||||
optionOptions = item.options[0].map((optItem) => {
|
||||
return {
|
||||
...optItem,
|
||||
label: optItem.option,
|
||||
value: optItem.option_index
|
||||
};
|
||||
});
|
||||
} else if (logicItem.is_option_group === 1) {
|
||||
optionOptions = item.config.option_groups.option_group.map((groupItem) => {
|
||||
return {
|
||||
...groupItem,
|
||||
label: groupItem.title,
|
||||
value: groupItem.group_index
|
||||
};
|
||||
});
|
||||
} else {
|
||||
optionOptions = [];
|
||||
}
|
||||
}
|
||||
});
|
||||
return optionOptions;
|
||||
};
|
||||
|
||||
// 删除 题目设置
|
||||
const deleteLogic = (logIndex, item, index) => {
|
||||
item.splice(logIndex, 1);
|
||||
// 如果小删除 删除后一个都没有了 就删除掉整个数组
|
||||
if (item.length === 0) {
|
||||
logics.value.splice(index, 1);
|
||||
}
|
||||
};
|
||||
// 添加题目
|
||||
const addLogic = (logIndex, item) => {
|
||||
item.splice(logIndex + 1, 0, {
|
||||
logic: 'and',
|
||||
question_index: '',
|
||||
question_type: '',
|
||||
is_answer: 1,
|
||||
operator: '=',
|
||||
option_index: '',
|
||||
relation_question_index: 0,
|
||||
type: 0,
|
||||
is_option_group: '',
|
||||
group_index: null
|
||||
});
|
||||
};
|
||||
const groupOptions = [
|
||||
{
|
||||
label: '选项',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '分组',
|
||||
value: 1
|
||||
// disabled: true
|
||||
}
|
||||
];
|
||||
const settingIfOptions = [
|
||||
{ label: 'if', value: 'if' },
|
||||
{ label: 'always', value: 'always' }
|
||||
];
|
||||
const settingAndOptions = [{ label: 'and', value: 'and' }];
|
||||
const answerOptions = [
|
||||
{ label: '为空', value: 0 },
|
||||
{ label: '不为空', value: 1 }
|
||||
];
|
||||
|
||||
const symbolOptions = [
|
||||
{
|
||||
label: '=',
|
||||
value: '='
|
||||
},
|
||||
{
|
||||
label: '≠',
|
||||
value: '≠'
|
||||
},
|
||||
{
|
||||
label: '>',
|
||||
value: '>'
|
||||
},
|
||||
{
|
||||
label: '≥',
|
||||
value: '>'
|
||||
},
|
||||
{
|
||||
label: '<',
|
||||
value: '<'
|
||||
},
|
||||
{
|
||||
label: '≤',
|
||||
value: '≤'
|
||||
}
|
||||
];
|
||||
|
||||
const logicIf = (value, index) => {
|
||||
if (value === 'always') {
|
||||
logics.value[index].logic = [logics.value[index].logic[0]];
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mr10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mt10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mb10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mv10 {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.action {
|
||||
flex: none;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.question-before {
|
||||
& .if {
|
||||
flex: none;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
& .question {
|
||||
flex: none;
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
& .group {
|
||||
flex: none;
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
& .answer {
|
||||
flex: none;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
& .symbol {
|
||||
flex: none;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
& .option {
|
||||
//width: 120px;
|
||||
width: 100%;
|
||||
|
||||
//flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -8,7 +8,7 @@
|
||||
<slot></slot>
|
||||
<!-- 题目操作-->
|
||||
<van-cell v-if="chooseQuestionId === element.id" class="choose-question-active-container">
|
||||
<template v-if="element.question_type === 1" #icon>
|
||||
<template v-if="element.question_type === 1 || element.question_type === 5" #icon>
|
||||
<div class="flex align-center" @click="radioAddOption">
|
||||
<van-icon name="add" class="fs20"></van-icon>
|
||||
<span class="ml10">添加选项</span>
|
||||
@@ -79,13 +79,14 @@ const radioAddOption = () => {
|
||||
option_type: 0,
|
||||
limit_right_content: ''
|
||||
},
|
||||
option_index: 1,
|
||||
option_index: element.value.last_option_index + 1,
|
||||
parent_id: 0,
|
||||
type: 0,
|
||||
cascade: [],
|
||||
config: []
|
||||
});
|
||||
});
|
||||
element.value.last_option_index += 1;
|
||||
};
|
||||
|
||||
// emit 事件
|
||||
|
||||
@@ -99,29 +99,26 @@ const handleMartrixAction = (action: 'delete' | 'setting' | 'more') => {
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.martrix-table {
|
||||
border-collapse: collapse;
|
||||
|
||||
color: black;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
color: black;
|
||||
|
||||
th,
|
||||
td {
|
||||
|
||||
border: 1px solid #ddd;
|
||||
border-width: 0 0 1px 0;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-width: 0 0 1px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.martrix-table-action {
|
||||
|
||||
margin-top: 10px;
|
||||
|
||||
.van-icon {
|
||||
font-size: 12px;
|
||||
color: lightgreen;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.martrix-table-action-tool {
|
||||
@@ -129,8 +126,8 @@ const handleMartrixAction = (action: 'delete' | 'setting' | 'more') => {
|
||||
justify-content: flex-end;
|
||||
|
||||
&>span {
|
||||
font-size: 16px;
|
||||
margin-right: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
150
src/views/Design/components/Questions/Rate.vue
Normal file
150
src/views/Design/components/Questions/Rate.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<van-field
|
||||
v-model="element.stem"
|
||||
:label="element.stem"
|
||||
:required="element.config.is_required === 1"
|
||||
label-align="top"
|
||||
>
|
||||
<template #label>
|
||||
<div
|
||||
:contenteditable="active"
|
||||
class="van-field"
|
||||
@blur="saveStem($event, element)"
|
||||
v-html="element.stem"
|
||||
></div>
|
||||
</template>
|
||||
<template #input>
|
||||
<div v-for="(optionItem, optionItemIndex) in element.options" :key="optionItemIndex">
|
||||
<div v-for="(item, index) in optionItem" :key="index" @click="chooseOption(item)">
|
||||
<div
|
||||
:contenteditable="item.id === chooseId"
|
||||
class="van-field"
|
||||
v-html="item.option"
|
||||
></div>
|
||||
<ul>
|
||||
<li
|
||||
v-for="(rate, rateIndex) in rateItem"
|
||||
:key="rateIndex"
|
||||
class="rate_item"
|
||||
:class="{ active_item: rate.active }"
|
||||
@click="getItem(rate)"
|
||||
>
|
||||
{{ rate.label }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</van-field>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const rateItem = ref([
|
||||
{
|
||||
label: 1,
|
||||
active: false
|
||||
},
|
||||
{
|
||||
label: 2,
|
||||
active: false
|
||||
},
|
||||
{
|
||||
label: 3,
|
||||
active: false
|
||||
},
|
||||
{
|
||||
label: 4,
|
||||
active: false
|
||||
},
|
||||
{
|
||||
label: 5,
|
||||
active: false
|
||||
},
|
||||
{
|
||||
label: 6,
|
||||
active: false
|
||||
},
|
||||
{
|
||||
label: 7,
|
||||
active: false
|
||||
},
|
||||
{
|
||||
label: 8,
|
||||
active: false
|
||||
},
|
||||
{
|
||||
label: 9,
|
||||
active: false
|
||||
},
|
||||
{
|
||||
label: 10,
|
||||
active: false
|
||||
}
|
||||
]);
|
||||
const props = defineProps({
|
||||
element: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
// 补充
|
||||
}
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
sn: { type: String, default: '' },
|
||||
questionType: { type: [String, Number], default: 4 }
|
||||
});
|
||||
const element = ref(props.element);
|
||||
const chooseId = ref('');
|
||||
// 创建一个本地副本以保存更改
|
||||
const localElement = ref({ ...props.element });
|
||||
|
||||
const saveStem = (e) => {
|
||||
localElement.value.stem = e.target.innerHTML;
|
||||
// 如果需要，可以在这里发出事件以通知父组件
|
||||
// this.$emit('update:element', localElement.value);
|
||||
};
|
||||
|
||||
const chooseOption = (item) => {
|
||||
console.log(item);
|
||||
chooseId.value = item.id;
|
||||
};
|
||||
const getItem = (value) => {
|
||||
chooseId.value = value.id;
|
||||
rateItem.value.forEach((item, index) => {
|
||||
rateItem.value[index].active = item.label <= value.label;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
background-color: #fff;
|
||||
|
||||
ul {
|
||||
// border: 1px solid red;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.rate_item {
|
||||
margin: 0 3px;
|
||||
margin-top: 5px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
color: #666;
|
||||
|
||||
// border: 1px solid red;
|
||||
}
|
||||
|
||||
.active_item {
|
||||
background-color: #70b936;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -11,7 +11,8 @@
|
||||
class="iconfont active-icon"
|
||||
:style="{ marginRight: isLastPage ? '0' : '16px' }"
|
||||
@click="activePage"
|
||||
></i>
|
||||
></i
|
||||
>
|
||||
<template v-if="!isLastPage">
|
||||
<i class="iconfont moverQues" style="margin-right: 16px"></i>
|
||||
<i class="iconfont" @click="deleteHandle"></i>
|
||||
|
||||
@@ -39,7 +39,8 @@
|
||||
</van-cell-group>
|
||||
|
||||
<!-- 底部功能性按钮 -->
|
||||
<div style="
|
||||
<div
|
||||
style="
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
@@ -49,7 +50,8 @@
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: white;
|
||||
">
|
||||
"
|
||||
>
|
||||
<div>设置</div>
|
||||
<div style="display: flex; flex-direction: row; justify-content: space-around; width: 60%">
|
||||
<button size="small">预览</button>
|
||||
|
||||
@@ -8,9 +8,11 @@
|
||||
|
||||
<van-cell-group inset style="margin-top: 20px;padding: 30px;">
|
||||
<div>
|
||||
<img width="100%"
|
||||
<img
|
||||
width="100%"
|
||||
src="https://files.axshare.com/gsc/DR6075/44/1a/03/441a03a8b1004755a7a392b311acf97f/images/%E6%8A%95%E6%94%BE/u14.jpg?pageId=2f9ba10c-92b8-4c9b-b40b-04e65a0b4333"
|
||||
alt="" />
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="qrcode">
|
||||
<img src="" alt="" width="100px" height="100px" />
|
||||
@@ -22,16 +24,18 @@
|
||||
<div>移动端仅做数据回收，问卷数据分析请前往PC端浏览</div>
|
||||
<div class="operation">
|
||||
<span v-for="item in 2" :key="item">
|
||||
<img width="30px"
|
||||
src="https://files.axshare.com/gsc/DR6075/44/1a/03/441a03a8b1004755a7a392b311acf97f/images/%E6%8A%95%E6%94%BE/u21.png?pageId=2f9ba10c-92b8-4c9b-b40b-04e65a0b4333" />
|
||||
|
||||
<img
|
||||
width="30px"
|
||||
src="https://files.axshare.com/gsc/DR6075/44/1a/03/441a03a8b1004755a7a392b311acf97f/images/%E6%8A%95%E6%94%BE/u21.png?pageId=2f9ba10c-92b8-4c9b-b40b-04e65a0b4333"
|
||||
/>
|
||||
|
||||
复制链接
|
||||
</span>
|
||||
</div>
|
||||
</van-cell-group>
|
||||
<!-- 底部功能性按钮 -->
|
||||
<div style="
|
||||
<div
|
||||
style="
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
@@ -41,7 +45,8 @@
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: white;
|
||||
">
|
||||
"
|
||||
>
|
||||
<van-button block>取消</van-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user