152 lines
4.5 KiB
Vue
152 lines
4.5 KiB
Vue
<template>
|
||
<el-table :data="rows" style="width: 100%">
|
||
<el-table-column width="140">
|
||
<template #header></template>
|
||
<template #default="{ row /*, column, $index*/ }">
|
||
<el-text truncated>
|
||
<contenteditable v-model="row.option" :active="active" @blur="emitValue" />
|
||
</el-text>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column v-for="(col, colIndex) in cols" :key="col.option" width="100">
|
||
<template #header>
|
||
<el-text truncated>
|
||
<contenteditable
|
||
v-if="col.option"
|
||
v-model="col.option"
|
||
:active="active"
|
||
@blur="emitValue"
|
||
/>
|
||
<van-field v-else v-model="col.option" placeholder="请输入"></van-field>
|
||
</el-text>
|
||
</template>
|
||
<template #default="{ /*row, column, */ $index: rowIndex }">
|
||
<input
|
||
type="checkbox"
|
||
:name="`R${rowIndex + 1}`"
|
||
:checked="isOptionChecked(rowIndex, colIndex)"
|
||
@change="handleMatrixCheckboxChange(rowIndex, colIndex)"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
// import { defineProps } from 'vue';
|
||
// import { vFocus } from '@/utils/directives/useVFocus';
|
||
|
||
// 记录行和列的索引
|
||
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 active = defineModel<boolean>('active', { required: false, default: true });
|
||
/* const isPreview = */ defineModel<boolean>('isPreview', { required: false, default: false });
|
||
const rows = defineModel<questionOptionType[]>('rows', { required: false, default: () => [] });
|
||
const cols = defineModel<questionOptionType[]>('cols', { required: false, default: () => [] });
|
||
const element = defineModel<question>('element', {
|
||
required: false,
|
||
default: () => {
|
||
/**/
|
||
}
|
||
});
|
||
|
||
const emit = defineEmits(['update:matrixAnswer', 'update:rowRecord', 'update:element']);
|
||
|
||
// 判断是否选中
|
||
const isOptionChecked = (rowIndex: number, colIndex: number): boolean => {
|
||
// [
|
||
// [0, 1],
|
||
// [0, 1]
|
||
// ]
|
||
if (!rowRecord.value[rowIndex]) {
|
||
return false;
|
||
}
|
||
return rowRecord.value[rowIndex].includes(colIndex);
|
||
};
|
||
|
||
// const handleRowNameChange = (/* value: string */) => {
|
||
// // console.log(`row change: ${value}`);
|
||
// // 你可以在这里添加其他逻辑
|
||
// };
|
||
|
||
// 当 matrix radio 选中时，更新 rowRecord 和 matrixAnswer
|
||
function handleMatrixCheckboxChange(row: number, col: number) {
|
||
// 获取 colIndexArray
|
||
if (!rowRecord.value[row]) {
|
||
// 如果没有对应的row，创建一个
|
||
rowRecord.value[row] = [];
|
||
}
|
||
// cols 的逻辑 和 handleMatrixRadioChange 一致
|
||
const cols = rowRecord.value[row];
|
||
|
||
// 检查 cols 对应的 col 是否有 数值
|
||
if (cols.includes(col)) {
|
||
// 如果有，删除
|
||
cols.splice(cols.indexOf(col), 1);
|
||
} else {
|
||
// 如果没有，添加
|
||
cols.push(col);
|
||
}
|
||
|
||
// console.log(`rowRecord:`, rowRecord.value);
|
||
}
|
||
// const handleColNameChange = (rowOption: string, colOption: string) => {
|
||
// // 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 === 9) {
|
||
// props.rowRecord[col] = row + 1;
|
||
// props.matrixAnswer = {};
|
||
// props.rowRecord.forEach((row, index) => {
|
||
// props.matrixAnswer[`${index + 1}_${row}`] = 1;
|
||
// });
|
||
// }
|
||
|
||
// emits('update:matrixAnswer', props.matrixAnswer);
|
||
// emits('update:rowRecord', props.rowRecord);
|
||
// };
|
||
const emitValue = (/* val: unknown */) => {
|
||
emit('update:element', element.value);
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import '@/assets/css/theme';
|
||
|
||
.matrix-table {
|
||
text-align: left;
|
||
}
|
||
|
||
.matrix-checkbox {
|
||
position: relative;
|
||
overflow: hidden;
|
||
width: 15px;
|
||
height: 15px;
|
||
border: 1px solid #f4f4f4;
|
||
border-radius: 4px;
|
||
outline: none;
|
||
cursor: pointer;
|
||
appearance: none; /* 去除默认样式 */
|
||
//transition: border-color 0.3s;
|
||
}
|
||
|
||
.matrix-checkbox:checked {
|
||
border-color: transparent; /* 选中时边框颜色 */
|
||
}
|
||
|
||
.matrix-checkbox:checked::before {
|
||
content: '\e728';
|
||
position: absolute;
|
||
width: 15px;
|
||
height: 15px;
|
||
background-color: $theme-color; /* 选中颜色 */
|
||
color: #fff;
|
||
line-height: 15px;
|
||
text-align: center;
|
||
}
|
||
</style>
|