feat(Design): 优化题目顺序和索引
- 调整题目移动逻辑,更新题目索引 - 修复新建题目时的索引问题 - 优化选择题目组件,实时更新题目索引 - 调整调查创建页面,初始化时设置题目索引
This commit is contained in:
2
components.d.ts
vendored
2
components.d.ts
vendored
@@ -31,12 +31,14 @@ declare module 'vue' {
|
|||||||
VanCol: typeof import('vant/es')['Col']
|
VanCol: typeof import('vant/es')['Col']
|
||||||
VanDivider: typeof import('vant/es')['Divider']
|
VanDivider: typeof import('vant/es')['Divider']
|
||||||
VanField: typeof import('vant/es')['Field']
|
VanField: typeof import('vant/es')['Field']
|
||||||
|
VanForm: typeof import('vant/es')['Form']
|
||||||
VanGrid: typeof import('vant/es')['Grid']
|
VanGrid: typeof import('vant/es')['Grid']
|
||||||
VanGridItem: typeof import('vant/es')['GridItem']
|
VanGridItem: typeof import('vant/es')['GridItem']
|
||||||
VanIcon: typeof import('vant/es')['Icon']
|
VanIcon: typeof import('vant/es')['Icon']
|
||||||
VanList: typeof import('vant/es')['List']
|
VanList: typeof import('vant/es')['List']
|
||||||
VanNavBar: typeof import('vant/es')['NavBar']
|
VanNavBar: typeof import('vant/es')['NavBar']
|
||||||
VanPicker: typeof import('vant/es')['Picker']
|
VanPicker: typeof import('vant/es')['Picker']
|
||||||
|
VanPopover: typeof import('vant/es')['Popover']
|
||||||
VanPopup: typeof import('vant/es')['Popup']
|
VanPopup: typeof import('vant/es')['Popup']
|
||||||
VanRadio: typeof import('vant/es')['Radio']
|
VanRadio: typeof import('vant/es')['Radio']
|
||||||
VanRadioGroup: typeof import('vant/es')['RadioGroup']
|
VanRadioGroup: typeof import('vant/es')['RadioGroup']
|
||||||
|
|||||||
@@ -274,7 +274,6 @@ const questionMove = (action) => {
|
|||||||
questions.value.splice(questionIndex.value, 1);
|
questions.value.splice(questionIndex.value, 1);
|
||||||
questions.value.splice(questionIndex.value + 1, 0, temp);
|
questions.value.splice(questionIndex.value + 1, 0, temp);
|
||||||
emit('move', 'down');
|
emit('move', 'down');
|
||||||
|
|
||||||
questionIndex.value += 1;
|
questionIndex.value += 1;
|
||||||
} else if (action.action === 'up') {
|
} else if (action.action === 'up') {
|
||||||
if (questionIndex.value === 0) {
|
if (questionIndex.value === 0) {
|
||||||
@@ -295,6 +294,7 @@ const questionMove = (action) => {
|
|||||||
const temp = JSON.parse(JSON.stringify(questions.value[questionIndex.value]));
|
const temp = JSON.parse(JSON.stringify(questions.value[questionIndex.value]));
|
||||||
const newQuestion = {
|
const newQuestion = {
|
||||||
...temp,
|
...temp,
|
||||||
|
title: questionIndex.value + 1,
|
||||||
id: uuidv4(),
|
id: uuidv4(),
|
||||||
question_index: questionsInfo.value.survey.last_question_index + 1
|
question_index: questionsInfo.value.survey.last_question_index + 1
|
||||||
};
|
};
|
||||||
@@ -311,8 +311,8 @@ const getSkipTypeText = (skipType) => {
|
|||||||
const ls = [];
|
const ls = [];
|
||||||
logics.map((item) => {
|
logics.map((item) => {
|
||||||
if (
|
if (
|
||||||
item.skip_type === skipType
|
item.skip_type === skipType &&
|
||||||
&& item.question_index === activeQuestion.value.question_index
|
item.question_index === activeQuestion.value.question_index
|
||||||
) {
|
) {
|
||||||
ls.push(item);
|
ls.push(item);
|
||||||
}
|
}
|
||||||
@@ -328,13 +328,13 @@ const getSkipTypeText = (skipType) => {
|
|||||||
|
|
||||||
const questionSetting = (type) => {
|
const questionSetting = (type) => {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'before':
|
case 'before':
|
||||||
questionBeforeShow.value = true;
|
questionBeforeShow.value = true;
|
||||||
|
|
||||||
break;
|
break;
|
||||||
case 'after':
|
case 'after':
|
||||||
questionBeforeShow.value = true;
|
questionBeforeShow.value = true;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
skipType.value = type === 'before' ? 1 : 0;
|
skipType.value = type === 'before' ? 1 : 0;
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -41,12 +41,9 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import QuestionAction from '@/views/Design/components/ActionCompoents/QuestionAction.vue';
|
import QuestionAction from '@/views/Design/components/ActionCompoents/QuestionAction.vue';
|
||||||
import { basicQuesTypeList } from '@/utils/common.js';
|
import { basicQuesTypeList } from '@/utils/common.js';
|
||||||
|
import { watch } from 'vue';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
index: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
questions: {
|
questions: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => []
|
default: () => []
|
||||||
@@ -66,6 +63,22 @@ const props = defineProps({
|
|||||||
default: true
|
default: true
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
const element = defineModel('element', {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const index = defineModel('index', {
|
||||||
|
type: Number
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => index.value,
|
||||||
|
(newVal) => {
|
||||||
|
element.value.title = newVal + 1;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
// 获取题目选项
|
// 获取题目选项
|
||||||
const getQuestionType = (type) => {
|
const getQuestionType = (type) => {
|
||||||
@@ -78,12 +91,6 @@ const getQuestionType = (type) => {
|
|||||||
return typeName;
|
return typeName;
|
||||||
};
|
};
|
||||||
|
|
||||||
const element = defineModel('element', {
|
|
||||||
type: Object,
|
|
||||||
default: () => {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// if (props.index + 1 !== Number(element.value.title)) {
|
// if (props.index + 1 !== Number(element.value.title)) {
|
||||||
// element.value.title = props.index + 1;
|
// element.value.title = props.index + 1;
|
||||||
// }
|
// }
|
||||||
@@ -93,7 +100,7 @@ const emit = defineEmits(['getChooseQuestionId', 'move', 'copy', 'setting', 'log
|
|||||||
|
|
||||||
// 选中题目
|
// 选中题目
|
||||||
const chooseItem = () => {
|
const chooseItem = () => {
|
||||||
emit('getChooseQuestionId', element.value, props.index);
|
emit('getChooseQuestionId', element.value, index.value);
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@@ -420,25 +420,35 @@ const saveTitle = () => {
|
|||||||
const quesList = ref(basicQuesTypeList);
|
const quesList = ref(basicQuesTypeList);
|
||||||
|
|
||||||
const questionEvent = (item) => {
|
const questionEvent = (item) => {
|
||||||
|
cons;
|
||||||
|
// 更新坐标
|
||||||
|
let index = questionInfo.value.questions.length + 1;
|
||||||
|
if (activeId.value) {
|
||||||
|
let filterIndex = questionInfo.value.questions.findIndex((item) => {
|
||||||
|
return item.id === activeId.value;
|
||||||
|
});
|
||||||
|
index = filterIndex + 2;
|
||||||
|
}
|
||||||
let questionJson = {};
|
let questionJson = {};
|
||||||
const id = uuidv4();
|
const id = uuidv4();
|
||||||
questionJson = JSON.parse(
|
questionJson = JSON.parse(
|
||||||
JSON.stringify({
|
JSON.stringify({
|
||||||
...item.json,
|
...item.json,
|
||||||
id,
|
id,
|
||||||
|
title: index,
|
||||||
question_type: Number(item.question_type),
|
question_type: Number(item.question_type),
|
||||||
question_index: questionInfo.value.survey.last_question_index + 1,
|
question_index: questionInfo.value.survey.last_question_index + 1,
|
||||||
options:
|
options:
|
||||||
item.json.options.length > 0
|
item.json.options.length > 0
|
||||||
? item.json.options.map((item) => {
|
? item.json.options.map((item) => {
|
||||||
return item.map((it) => {
|
return item.map((it) => {
|
||||||
return {
|
return {
|
||||||
...it,
|
...it,
|
||||||
// 主键生成
|
// 主键生成
|
||||||
id: uuidv4()
|
id: uuidv4()
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
: []
|
: []
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
@@ -527,9 +537,10 @@ const getQuestionDetail = () => {
|
|||||||
return snQuestions({ sn: route.query.sn }).then((res) => {
|
return snQuestions({ sn: route.query.sn }).then((res) => {
|
||||||
if (res.data) {
|
if (res.data) {
|
||||||
questionInfo.value.survey = Object.assign({}, res.data.data.survey);
|
questionInfo.value.survey = Object.assign({}, res.data.data.survey);
|
||||||
questionInfo.value.questions = res.data.data.questions.map((item) => {
|
questionInfo.value.questions = res.data.data.questions.map((item, index) => {
|
||||||
return {
|
return {
|
||||||
...item
|
...item,
|
||||||
|
title: index + 1
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
questionInfo.value.logics = res.data.data.logics.map((item) => {
|
questionInfo.value.logics = res.data.data.logics.map((item) => {
|
||||||
@@ -577,7 +588,7 @@ const previewQuestion = () => {
|
|||||||
router.push({ name: 'preview', query: { ...route.query } });
|
router.push({ name: 'preview', query: { ...route.query } });
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(async() => {
|
onMounted(async () => {
|
||||||
await getQuestionDetail();
|
await getQuestionDetail();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user