feat: 矩阵样式更改
- 通过 matrixQuestion 来适配相应的矩阵问题 - 矩阵的样式更新
This commit is contained in:
Huangzhe
@@ -1,123 +1,127 @@
|
||||
<script setup lang="ts">
|
||||
import { useTemplateRef, ref, type Directive } from 'vue';
|
||||
// import MatrixRadio from '@/views/Design/components/Questions/MatrixRadio.vue';
|
||||
// import MatrixText from '@/views/Design/components/Questions/MatrixText.vue';
|
||||
// import MatrixCheckbox from '@/views/Design/components/Questions/MatrixCheckbox.vue';
|
||||
|
||||
const columnLabels = useTemplateRef<HTMLElement[]>('columnLabels');
|
||||
|
||||
// 注意, element.options 里面的东西是数组，第一项内容是行标签内容，第二项内容是列标签内容
|
||||
// 类型 AI 生成 切勿盲目相信，以实际为准
|
||||
const { element, index } = defineProps<{ element: MatrixSurveyQuestion; index: number }>();
|
||||
|
||||
const rowRecord = new Array(element.options[0].length);
|
||||
// matrix 答案
|
||||
const matrixAnswer = ref({
|
||||
question_index: index,
|
||||
answer: {} as any
|
||||
});
|
||||
|
||||
/**
|
||||
* input 类型映射，里面自行处理逻辑返回对应类型
|
||||
* // remark: 填空内容 question_type 8
|
||||
* // remark: 单选打分矩阵 question_type 9
|
||||
* // remark: 多选矩阵内容 question_type 10
|
||||
* @default 'radio'
|
||||
*/
|
||||
const tableInputTypeMapping = (/** regx?: any */) => {
|
||||
switch (element.question_type) {
|
||||
case 8:
|
||||
return 'text';
|
||||
case 9:
|
||||
return 'radio';
|
||||
case 10:
|
||||
return 'checkbox';
|
||||
default:
|
||||
return 'radio';
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 自定义指令，用于在元素挂载后自动获取焦点
|
||||
*/
|
||||
const vFocus: Directive = {
|
||||
mounted(el: HTMLInputElement) {
|
||||
el.focus();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* row 的数值变动之后，触发的事件
|
||||
* @param {string} value
|
||||
* @return {void}
|
||||
*/
|
||||
function handleRowNameChange(/* value: string */) {
|
||||
// if (!value) return;
|
||||
}
|
||||
|
||||
/**
|
||||
* col 的数值变动之后，触发的事件
|
||||
*/
|
||||
function handleColNameChange(rowOption: string, colOption: string, e: any) {
|
||||
// if (!value) return;
|
||||
const col = element.options[0].findIndex((option) => {
|
||||
return option.option === colOption;
|
||||
});
|
||||
|
||||
const row = element.options[1].findIndex((option) => {
|
||||
return option.option === rowOption;
|
||||
});
|
||||
|
||||
// 不同的 question_type 的 matrix 问卷处理不同的结果
|
||||
switch (element.question_type) {
|
||||
case 8: {
|
||||
// 获取输入框元素
|
||||
const inputElement = e.target as HTMLInputElement;
|
||||
// 如果没有获取到输入框元素，则直接返回
|
||||
if (!inputElement) return;
|
||||
// 将输入框的值保存到 rowRecord 对应位置
|
||||
rowRecord[col] = e!.target!.value;
|
||||
// 清空 matrixAnswer 的 answer 属性
|
||||
matrixAnswer.value.answer = {};
|
||||
// 遍历所有行选项
|
||||
element.options[0].forEach((_, rowIndex) => {
|
||||
// 获取当前行记录
|
||||
const colOptions = rowRecord[rowIndex];
|
||||
// 如果当前行有记录，则更新 matrixAnswer 的 answer 属性
|
||||
if (colOptions) {
|
||||
matrixAnswer.value.answer[`R${rowIndex + 1}_C${col + 1}`] = colOptions;
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 9:
|
||||
// 将选择的行索引加1后保存到 rowRecord 对应位置
|
||||
rowRecord[col] = row + 1;
|
||||
// 清空 matrixAnswer 的 answer 属性
|
||||
matrixAnswer.value.answer = {};
|
||||
// 遍历 rowRecord，更新 matrixAnswer 的 answer 属性
|
||||
rowRecord.forEach((row, index) => {
|
||||
matrixAnswer.value.answer[`${index + 1}_${row}`] = 1;
|
||||
});
|
||||
break;
|
||||
case 10:
|
||||
// 将选择的行索引加1后添加到 rowRecord 对应位置的数组中
|
||||
rowRecord[col] = (rowRecord[col] || []).concat(row + 1);
|
||||
// 清空 matrixAnswer 的 answer 属性
|
||||
matrixAnswer.value.answer = {};
|
||||
// 遍历所有行选项
|
||||
element.options[0].forEach((rowOption, rowIndex) => {
|
||||
// 获取当前行记录
|
||||
const colOptions = rowRecord[rowIndex];
|
||||
// 如果当前行有记录，则更新 matrixAnswer 的 answer 属性
|
||||
if (colOptions) {
|
||||
colOptions.forEach((col: any) => {
|
||||
matrixAnswer.value.answer[`R${rowIndex + 1}_C${col}`] = true;
|
||||
});
|
||||
}
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
// import { useTemplateRef, ref, type Directive } from 'vue';
|
||||
//
|
||||
// const columnLabels = useTemplateRef<HTMLElement[]>('columnLabels');
|
||||
//
|
||||
// // 注意, element.options 里面的东西是数组，第一项内容是行标签内容，第二项内容是列标签内容
|
||||
// // 类型 AI 生成 切勿盲目相信，以实际为准
|
||||
// const { element, index } = defineProps<{ element: MatrixSurveyQuestion; index: number }>();
|
||||
//
|
||||
// const rowRecord = new Array(element.options[0].length);
|
||||
// // matrix 答案
|
||||
// const matrixAnswer = ref({
|
||||
// question_index: index,
|
||||
// answer: {} as any
|
||||
// });
|
||||
//
|
||||
// /**
|
||||
// * input 类型映射，里面自行处理逻辑返回对应类型
|
||||
// * // remark: 填空内容 question_type 8
|
||||
// * // remark: 单选打分矩阵 question_type 9
|
||||
// * // remark: 多选矩阵内容 question_type 10
|
||||
// * @default 'radio'
|
||||
// */
|
||||
// const tableInputTypeMapping = (/** regx?: any */) => {
|
||||
// switch (element.question_type) {
|
||||
// case 8:
|
||||
// return 'text';
|
||||
// case 9:
|
||||
// return 'radio';
|
||||
// case 10:
|
||||
// return 'checkbox';
|
||||
// default:
|
||||
// return 'radio';
|
||||
// }
|
||||
// };
|
||||
//
|
||||
// /**
|
||||
// * 自定义指令，用于在元素挂载后自动获取焦点
|
||||
// */
|
||||
// const vFocus: Directive = {
|
||||
// mounted(el: HTMLInputElement) {
|
||||
// el.focus();
|
||||
// }
|
||||
// };
|
||||
//
|
||||
// /**
|
||||
// * row 的数值变动之后，触发的事件
|
||||
// * @param {string} value
|
||||
// * @return {void}
|
||||
// */
|
||||
// function handleRowNameChange(/* value: string */) {
|
||||
// // if (!value) return;
|
||||
// }
|
||||
//
|
||||
// /**
|
||||
// * col 的数值变动之后，触发的事件
|
||||
// */
|
||||
// function handleColNameChange(rowOption: string, colOption: string, e: any) {
|
||||
// // if (!value) return;
|
||||
// const col = element.options[0].findIndex((option) => {
|
||||
// return option.option === colOption;
|
||||
// });
|
||||
//
|
||||
// const row = element.options[1].findIndex((option) => {
|
||||
// return option.option === rowOption;
|
||||
// });
|
||||
//
|
||||
// // 不同的 question_type 的 matrix 问卷处理不同的结果
|
||||
// switch (element.question_type) {
|
||||
// case 8: {
|
||||
// // 获取输入框元素
|
||||
// const inputElement = e.target as HTMLInputElement;
|
||||
// // 如果没有获取到输入框元素，则直接返回
|
||||
// if (!inputElement) return;
|
||||
// // 将输入框的值保存到 rowRecord 对应位置
|
||||
// rowRecord[col] = e!.target!.value;
|
||||
// // 清空 matrixAnswer 的 answer 属性
|
||||
// matrixAnswer.value.answer = {};
|
||||
// // 遍历所有行选项
|
||||
// element.options[0].forEach((_, rowIndex) => {
|
||||
// // 获取当前行记录
|
||||
// const colOptions = rowRecord[rowIndex];
|
||||
// // 如果当前行有记录，则更新 matrixAnswer 的 answer 属性
|
||||
// if (colOptions) {
|
||||
// matrixAnswer.value.answer[`R${rowIndex + 1}_C${col + 1}`] = colOptions;
|
||||
// }
|
||||
// });
|
||||
// break;
|
||||
// }
|
||||
// case 9:
|
||||
// // 将选择的行索引加1后保存到 rowRecord 对应位置
|
||||
// rowRecord[col] = row + 1;
|
||||
// // 清空 matrixAnswer 的 answer 属性
|
||||
// matrixAnswer.value.answer = {};
|
||||
// // 遍历 rowRecord，更新 matrixAnswer 的 answer 属性
|
||||
// rowRecord.forEach((row, index) => {
|
||||
// matrixAnswer.value.answer[`${index + 1}_${row}`] = 1;
|
||||
// });
|
||||
// break;
|
||||
// case 10:
|
||||
// // 将选择的行索引加1后添加到 rowRecord 对应位置的数组中
|
||||
// rowRecord[col] = (rowRecord[col] || []).concat(row + 1);
|
||||
// // 清空 matrixAnswer 的 answer 属性
|
||||
// matrixAnswer.value.answer = {};
|
||||
// // 遍历所有行选项
|
||||
// element.options[0].forEach((rowOption, rowIndex) => {
|
||||
// // 获取当前行记录
|
||||
// const colOptions = rowRecord[rowIndex];
|
||||
// // 如果当前行有记录，则更新 matrixAnswer 的 answer 属性
|
||||
// if (colOptions) {
|
||||
// colOptions.forEach((col: any) => {
|
||||
// matrixAnswer.value.answer[`R${rowIndex + 1}_C${col}`] = true;
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// break;
|
||||
// default:
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -200,7 +204,7 @@ input[type='text'] {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.martrix-table-action {
|
||||
.matrix-table-action {
|
||||
margin-top: 10px;
|
||||
|
||||
.van-icon {
|
||||
@@ -208,7 +212,7 @@ input[type='text'] {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.martrix-table-action-tool {
|
||||
.matrix-table-action-tool {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user