hz/ylst-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/feature/feature-20250331-h5' into feature/feature-20250331-h5

Browse Source
This commit is contained in:
Huangzhe
2025-03-13 09:38:22 +08:00
parent 691007d9f6 7566dbe1c3
commit 0b2151145f
33 changed files with 1020 additions and 949 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/views/Design/components/Questions/MatrixCheckbox.vue
View File

@@ -1,51 +1,51 @@
<template>
<table class="matrix-table">
<thead>
<tr>
<th></th>
<td v-for="col in columns" :key="col.option">
<!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
<input
v-if="col.editor"
v-model="col.option"
v-focus
type="text"
@focusout="col.editor = false"
@click="handleRowNameChange(col.option!)"
/>
<span v-else @click="handleRowNameChange(col.option!)" v-html="col.option"/>
</td>
</tr>
<tr>
<th></th>
<td v-for="col in columns" :key="col.option">
<!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
<input
v-if="col.editor"
v-model="col.option"
v-focus
type="text"
@focusout="col.editor = false"
@click="handleRowNameChange(col.option!)"
/>
<span v-else @click="handleRowNameChange(col.option!)" v-html="col.option" />
</td>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in rows" :key="rowIndex">
<th v-html="row.option"/>
<td v-for="(col, colIndex) in columns" :key="colIndex">
<input
type="checkbox"
:value="`${rowIndex + 1}_${colIndex + 1}`"
:checked="isOptionChecked(rowIndex, colIndex)"
@change="handleColNameChange(row.option, col.option, $event)"
/>
</td>
</tr>
<tr v-for="(row, rowIndex) in rows" :key="rowIndex">
<th v-html="row.option" />
<td v-for="(col, colIndex) in columns" :key="colIndex">
<input
type="checkbox"
:value="`${rowIndex + 1}_${colIndex + 1}`"
:checked="isOptionChecked(rowIndex, colIndex)"
@change="handleColNameChange(row.option, col.option, $event)"
/>
</td>
</tr>
</tbody>
</table>
</template>
<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';
import {vFocus} from '@/utils/directives/useVFocus';
import { defineProps } from 'vue';
import { vFocus } from '@/utils/directives/useVFocus';
const props = defineProps<{
rows: { option: string }[];
columns: { option: string, editor?: boolean }[];
columns: { option: string; editor?: boolean }[];
questionType: number;
matrixAnswer: { [key: string]: any };
rowRecord: (number | string)[];
rowRecord:(number | string)[];
}>();
const emits = defineEmits(['update:matrixAnswer', 'update:rowRecord']);
/* const emits = */ defineEmits(['update:matrixAnswer', 'update:rowRecord']);
const isOptionChecked = (rowIndex: number, colIndex: number): boolean => {
const key = `R${rowIndex + 1}_C${colIndex + 1}`;
@@ -57,31 +57,32 @@ const handleRowNameChange = (value: string) => {
// 你可以在这里添加其他逻辑
};
const handleColNameChange = (rowOption: string, colOption: string, e: Event) => {
const target = e.target as HTMLInputElement;
const col = props.columns.findIndex(option => option.option === colOption);
const row = props.rows.findIndex(option => option.option === rowOption);
if (props.questionType === 10) {
if (target.checked) {
props.rowRecord[col] = (props.rowRecord[col] || []).concat(row + 1);
} else {
props.rowRecord[col] = (props.rowRecord[col] || []).filter(item => item !== row + 1);
}
props.matrixAnswer = {};
props.rows.forEach((rowOption, rowIndex) => {
const colOptions = props.rowRecord[rowIndex];
if (colOptions) {
colOptions.forEach((col: any) => {
props.matrixAnswer[`R${rowIndex + 1}_C${col}`] = true;
});
}
});
}
emits('update:matrixAnswer', props.matrixAnswer);
emits('update:rowRecord', props.rowRecord);
};
// const handleColNameChange = (rowOption: string, colOption: string, e: Event) => {
// const target = e.target as HTMLInputElement;
// const col = props.columns.findIndex(option => option.option === colOption);
// const row = props.rows.findIndex(option => option.option === rowOption);
//
// if (props.questionType === 10) {
// if (target.checked) {
// props.rowRecord[col] = (props.rowRecord[col] || []).concat(row + 1);
// } else {
// props.rowRecord[col] = (props.rowRecord[col] || []).filter(item => item !== row + 1);
// }
// const newMatrixAnswer: { [key: string]: boolean } = {};
// const newRowRecord: (number | string)[] = [...props.rowRecord];
// props.rows.forEach((rowOption, rowIndex) => {
// const colOptions = newRowRecord[rowIndex];
// if (colOptions) {
// colOptions.forEach((col: any) => {
// newMatrixAnswer[`R${rowIndex + 1}_C${col}`] = true;
// });
// }
// });
// }
//
// emits('update:matrixAnswer', newMatrixAnswer);
// emits('update:rowRecord', newRowRecord);
// };
</script>
<style scoped lang="scss">
@@ -96,4 +97,4 @@ const handleColNameChange = (rowOption: string, colOption: string, e: Event) =>
border: 1px solid #ddd;
text-align: center;
}
</style>
</style>