feat(Design): 优化题目顺序和索引

- 调整题目移动逻辑,更新题目索引
- 修复新建题目时的索引问题
- 优化选择题目组件,实时更新题目索引
- 调整调查创建页面,初始化时设置题目索引
This commit is contained in:
陈昱达
2025-03-20 21:14:00 +08:00
parent 778f1eb569
commit b59e82c884
4 changed files with 51 additions and 31 deletions

2
components.d.ts vendored
View File

@@ -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']

View File

@@ -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;
}; };

View File

@@ -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">

View File

@@ -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>