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

feat: 重构矩阵问卷

Browse Source 
- 重构矩阵，现在单选矩阵可以自由左右滚动
This commit is contained in:
Huangzhe
2025-03-19 17:12:21 +08:00
parent 1dd85051bb
commit 62cfc0986e
6 changed files with 201 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,58 +1,82 @@
<template>
<table class="matrix-table">
<thead>
<tr>
<th></th>
<th v-for="col in cols" :key="col.option">
<contenteditable v-model="col.option" :active="active" @blur="emitValue" />
<!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
<!-- <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"></span>-->
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in rows" :key="rowIndex">
<contenteditable v-model="row.option" :active="active" @blur="emitValue" />
<td v-for="(col, colIndex) in cols" :key="colIndex">
<input
type="radio"
class="van-icon matrix-radio"
:name="`R${rowIndex + 1}`"
:value="`${rowIndex + 1}_${colIndex + 1}`"
:checked="isOptionChecked(rowIndex, colIndex)"
@change="handleMatrixRadioChange(rowIndex, colIndex)"
/>
</td>
</tr>
</tbody>
</table>
<!-- <table class="matrix-table">-->
<!-- <thead>-->
<!-- <tr>-->
<!-- <th></th>-->
<!-- <th v-for="col in cols" :key="col.option">-->
<!-- <contenteditable-->
<!-- v-if="col.option"-->
<!-- v-model="col.option"-->
<!-- :active="active"-->
<!-- @blur="emitValue"-->
<!-- />-->
<!-- <van-field v-else placeholder="请输入" v-model="col.option" v-focus />-->
<!-- </th>-->
<!-- </tr>-->
<!-- </thead>-->
<!-- <tbody>-->
<!-- <tr v-for="(row, rowIndex) in rows" :key="rowIndex">-->
<!-- <contenteditable v-model="row.option" :active="active" @blur="emitValue" />-->
<!-- <td v-for="(col, colIndex) in cols" :key="colIndex">-->
<!-- <input-->
<!-- type="radio"-->
<!-- class="van-icon matrix-radio"-->
<!-- :name="`R${rowIndex + 1}`"-->
<!-- :value="`${rowIndex + 1}_${colIndex + 1}`"-->
<!-- :checked="isOptionChecked(rowIndex, colIndex)"-->
<!-- @change="handleMatrixRadioChange(rowIndex, colIndex)"-->
<!-- />-->
<!-- </td>-->
<!-- </tr>-->
<!-- </tbody>-->
<!-- </table>-->
<el-table :data="rows" style="width: 100%">
<el-table-column width="140">
<template #header></template>
<template #default="{ row /*, column, $index*/ }"> <div v-html="row.option"></div></template>
</el-table-column>
<el-table-column v-for="(col, colIndex) in cols" :key="col.option" width="100">
<template #header>
<contenteditable
v-if="col.option"
v-model="col.option"
:active="active"
@blur="emitValue"
/>
<van-field v-else v-model="col.option" placeholder="请输入"></van-field>
</template>
<template #default="{ /*row, column, */ $index: rowIndex }">
<input
type="radio"
:name="`R${rowIndex + 1}`"
:checked="isOptionChecked(rowIndex, colIndex)"
@change="handleMatrixRadioChange(rowIndex, colIndex)"
/>
</template>
</el-table-column>
</el-table>
</template>
<script setup lang="ts">
// import { defineProps } from 'vue';
// import { vFocus } from '@/utils/directives/useVFocus';
// 记录行和列的索引
// import { getDomText } from '@/utils/utils';
const rowRecord = defineModel<number[]>('rowRecord', { required: false, default: () => [] });
// const matrixAnswer = defineModel<{ [key: string]: 1 }>('matrixAnswer', { required: false, default: () => ({}) });
// 检查 rowRecord 是否存在
// console.log(`rowRecord:`, rowRecord.value);
/* const isPreview = */ defineModel<boolean>('isPreview', { required: false, default: false });
const rows = defineModel<number[]>('rows', { required: false, default: () => [] });
const cols = defineModel<number[]>('cols', { required: false, default: () => [] });
const active = defineModel<boolean>('active', { required: false, default: true });
// console.log(rows.value, cols.value);
// const emits = defineEmits(['update:matrixAnswer', 'update:rowRecord']);
const rows = defineModel<questionOptionType[]>('rows', { required: false, default: () => [] });
const cols = defineModel<questionOptionType[]>('cols', { required: false, default: () => [] });
/* const active = */ defineModel<boolean>('active', { required: false, default: true });
const element = defineModel<question>('element', {
required: false,
default: () => {
/**/
}
});
const emit = defineEmits(['update:matrixAnswer', 'update:rowRecord', 'update:element']);
// 判断是否选中
const isOptionChecked = (rowIndex: number, colIndex: number): boolean => {
@@ -93,7 +117,8 @@ function handleMatrixRadioChange(row: number, col: number) {
// emits('update:matrixAnswer', props.matrixAnswer);
// emits('update:rowRecord', props.rowRecord);
// };
const emitValue = () => {
const emitValue = (val: unknown) => {
console.log(val);
emit('update:element', element.value);
};
</script>