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

feat: 矩阵样式更改

Browse Source 
- 通过 matrixQuestion 来适配相应的矩阵问题
- 矩阵的样式更新
This commit is contained in:
Huangzhe
2025-03-17 20:56:00 +08:00
parent 748f197ed3
commit f8f88ddb44
6 changed files with 287 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
components.d.ts vendored
View File

@@ -32,7 +32,6 @@ declare module 'vue' {
VanGrid: typeof import('vant/es')['Grid']
VanGridItem: typeof import('vant/es')['GridItem']
VanIcon: typeof import('vant/es')['Icon']
VanList: typeof import('vant/es')['List']
VanNavBar: typeof import('vant/es')['NavBar']
VanPicker: typeof import('vant/es')['Picker']
VanPopup: typeof import('vant/es')['Popup']
@@ -41,8 +40,6 @@ declare module 'vue' {
VanRow: typeof import('vant/es')['Row']
VanStepper: typeof import('vant/es')['Stepper']
VanSwitch: typeof import('vant/es')['Switch']
VanTab: typeof import('vant/es')['Tab']
VanTabs: typeof import('vant/es')['Tabs']
YLCascader: typeof import('./src/components/YLCascader.vue')['default']
YLInput: typeof import('./src/components/YLInput.vue')['default']
YLPicker: typeof import('./src/components/YLPicker.vue')['default']

177
src/views/Design/components/Questions/MartrixQuestion.vue
View File

@@ -1,38 +1,38 @@
<script setup lang="ts">
import { useTemplateRef, toRefs } from 'vue';
import { /* useTemplateRef, */ ref, computed, type Component } from 'vue';
import MatrixCheckbox from '@/views/Design/components/Questions/MatrixCheckbox.vue';
import MatrixText from '@/views/Design/components/Questions/MatrixText.vue';
import MatrixRadio from '@/views/Design/components/Questions/MatrixRadio.vue';
const columnLabels = useTemplateRef<HTMLElement[]>('columnLabels');
const question = defineModel<question>('element', { default: () => ({}), required: false });
// eslint-disable-next-line
const activeComponent = computed<Component>(() => {
switch (question.value.question_type) {
case 8:
return MatrixText;
case 9:
return MatrixRadio;
case 10:
return MatrixCheckbox;
}
});
if (question.value?.list) question.value.options = question.value?.list;
// 行标签
const rows = ref(question.value?.options[0] ?? []);
// 列标签
const cols = ref(question.value?.options[1] ?? []);
console.log(rows.value, cols.value);
// const columnLabels = useTemplateRef<HTMLElement[]>('columnLabels');
// 注意, element.options 里面的东西是数组，第一项内容是行标签内容，第二项内容是列标签内容
// 类型 AI 生成 切勿盲目相信，以实际为准
const props = defineProps<{
element: any;
/* const props = */ defineProps<{
index: number;
active: boolean;
}>();
const { element } = toRefs(props);
/**
* input 类型映射，里面自行处理逻辑返回对应类型
* // remark: 填空内容 question_type 8
* // remark: 单选打分矩阵 question_type 9
* // remark: 多选矩阵内容 question_type 10
* @default 'radio'
*/
const tableInputTypeMapping = (/** regx?: any */) => {
switch (element.value.question_type) {
case 8:
return 'text';
case 9:
return 'radio';
case 10:
return 'checkbox';
default:
return 'radio';
}
};
const emit = defineEmits(['update:element']);
const emitValue = () => {
emit('update:element', element.value);
};
@@ -50,67 +50,74 @@ const emitValue = () => {
</template>
<!-- 使用 title 插槽来自定义标题 -->
<template #label>
<contenteditable v-model="element.stem" :active="active" @blur="emitValue"></contenteditable>
<h1>
<contenteditable v-model="element.stem" :active="active" @blur="emitValue" />
</h1>
</template>
<!-- 使用 label 插槽来自定义标题 -->
<template #input>
<table class="martrix-table">
<thead>
<tr>
<!-- 第一行内容为空 -->
<th></th>
<!-- 第二行内容开始填充 -->
<td v-for="col in element.options[1]" :key="col.option" ref="columnLabels">
<contenteditable
v-model="col.option"
:active="active"
@blur="emitValue"
></contenteditable>
</td>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="row in element.options[0]" :key="row.option">
<!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
<td>
<contenteditable
v-model="row.option"
:active="active"
@blur="emitValue"
></contenteditable>
</td>
<td v-for="col in element.options[1]" :key="col.option" class="td-input">
<!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
<input :id="col.option" :type="tableInputTypeMapping()" :name="row.option" />
</td>
<td v-if="element.config.is_limit_right_content === 1">
<contenteditable
v-model="row.option_config.limit_right_content"
:active="active"
@blur="emitValue"
>
</contenteditable>
</td>
</tr>
</tbody>
</table>
<Component :is="activeComponent" v-model:rows="rows" v-model:cols="cols" />
</template>
<!-- 使用 label 插槽来自定义标题 -->
<!-- <template #input>-->
<!-- <table class="matrix-table">-->
<!-- <thead>-->
<!-- <tr>-->
<!-- &lt;!&ndash; 第一行内容为空 &ndash;&gt;-->
<!-- <th></th>-->
<!-- &lt;!&ndash; 第二行内容开始填充 &ndash;&gt;-->
<!-- <td v-for="col in element.options[1]" :key="col.option" ref="columnLabels">-->
<!-- <contenteditable-->
<!-- v-model="col.option"-->
<!-- :active="active"-->
<!-- @blur="emitValue"-->
<!-- ></contenteditable>-->
<!-- </td>-->
<!-- </tr>-->
<!-- </thead>-->
<!-- <tbody>-->
<!-- <tr v-for="row in element.options[0]" :key="row.option">-->
<!-- &lt;!&ndash; 编辑状态，单次点击出输入框，失焦后关闭 &ndash;&gt;-->
<!-- <td>-->
<!-- <contenteditable-->
<!-- v-model="row.option"-->
<!-- :active="active"-->
<!-- @blur="emitValue"-->
<!-- ></contenteditable>-->
<!-- </td>-->
<!-- <td v-for="col in element.options[1]" :key="col.option" class="td-input">-->
<!-- &lt;!&ndash; 编辑状态，单次点击出输入框，失焦后关闭 &ndash;&gt;-->
<!-- <input :id="col.option" :type="tableInputTypeMapping()" :name="row.option" />-->
<!-- </td>-->
<!-- <td v-if="element.config.is_limit_right_content === 1">-->
<!-- <contenteditable-->
<!-- v-model="row.option_config.limit_right_content"-->
<!-- :active="active"-->
<!-- @blur="emitValue"-->
<!-- >-->
<!-- </contenteditable>-->
<!-- </td>-->
<!-- </tr>-->
<!-- </tbody>-->
<!-- </table>-->
<!-- </template>-->
</van-field>
</template>
<style scoped lang="scss">
.martrix-table {
<style lang="scss">
.matrix-table {
width: 100%;
border-collapse: collapse;
color: black;
& > tbody {
overflow: scroll;
}
th,
td {
padding: 8px;
border: 1px solid #ddd;
//min-width: 80px;
//padding: 8px;
border-width: 0 0 1px;
text-align: center;
}
@@ -130,6 +137,7 @@ input[type='text'] {
input[type='checkbox'] {
border: 1px solid #ddd;
border-radius: 5px;
background-color: red;
outline: none;
}
@@ -138,23 +146,4 @@ input[type='radio'] {
border-radius: 5px;
outline: none;
}
.martrix-table-action {
margin-top: 10px;
.van-icon {
color: lightgreen;
font-size: 12px;
}
.martrix-table-action-tool {
display: flex;
justify-content: flex-end;
& > span {
margin-right: 6px;
font-size: 16px;
}
}
}
</style>

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

@@ -4,23 +4,27 @@
<tr>
<th></th>
<td 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>
<!-- <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>-->
</td>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in rows" :key="rowIndex">
<th v-html="row.option"></th>
<td v-for="(col, colIndex) in cols" :key="colIndex">
<!-- <th v-html="row.option"></th>-->
<contenteditable v-model="row.option" :active="active" @blur="emitValue" />
<th v-for="(col, colIndex) in cols" :key="colIndex">
<input
type="checkbox"
:name="`R${rowIndex + 1}`"
@@ -28,15 +32,15 @@
:checked="isOptionChecked(rowIndex, colIndex)"
@change="handleMatrixRadioChange(rowIndex, colIndex)"
/>
</td>
</th>
</tr>
</tbody>
</table>
</template>
<script setup lang="ts">
import { defineProps } from 'vue';
import { vFocus } from '@/utils/directives/useVFocus';
// import { defineProps } from 'vue';
// import { vFocus } from '@/utils/directives/useVFocus';
// 记录行和列的索引
const rowRecord = defineModel<number[][]>('rowRecord', { required: false, default: () => [] });
@@ -44,14 +48,16 @@ const rowRecord = defineModel<number[][]>('rowRecord', { required: false, defaul
// 检查 rowRecord 是否存在
// console.log(`rowRecord:`, rowRecord.value);
const active = defineModel('active', { required: false, default: true });
/* const isPreview = */ defineModel<boolean>('isPreview', { required: false, default: false });
defineProps<{
rows: OptionType[];
cols: OptionType[];
}>();
const rows = defineModel('rows', { required: false, default: () => [] });
const cols = defineModel('cols', { required: false, default: () => [] });
// const emits = defineEmits(['update:matrixAnswer', 'update:rowRecord']);
const emitValue = () => {
emit('update:element', element.value);
};
// 判断是否选中
const isOptionChecked = (rowIndex: number, colIndex: number): boolean => {
// [
@@ -64,10 +70,10 @@ const isOptionChecked = (rowIndex: number, colIndex: number): boolean => {
return rowRecord.value[rowIndex].includes(colIndex);
};
const handleRowNameChange = (/* value: string */) => {
// console.log(`row change: ${value}`);
// 你可以在这里添加其他逻辑
};
// const handleRowNameChange = (/* value: string */) => {
// // console.log(`row change: ${value}`);
// // 你可以在这里添加其他逻辑
// };
// 当 matrix radio 选中时，更新 rowRecord 和 matrixAnswer
function handleMatrixRadioChange(row: number, col: number) {
@@ -108,16 +114,4 @@ function handleMatrixRadioChange(row: number, col: number) {
// };
</script>
<style scoped lang="scss">
.matrix-table {
width: 100%;
border-collapse: collapse;
}
.matrix-table th,
.matrix-table td {
padding: 8px;
border: 1px solid #ddd;
text-align: center;
}
</style>
<style scoped lang="scss"></style>

244
src/views/Design/components/Questions/MatrixQuestion.vue
View File

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

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

@@ -3,26 +3,27 @@
<thead>
<tr>
<th></th>
<td v-for="col in cols" :key="col.option">
<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>
</td>
<!-- <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">
<th v-html="row.option"></th>
<contenteditable v-model="row.option" :active="active" @blur="emitValue" />
<td v-for="(col, colIndex) in cols" :key="colIndex">
<input
type=" "
type="radio"
:name="`R${rowIndex + 1}`"
:value="`${rowIndex + 1}_${colIndex + 1}`"
:checked="isOptionChecked(rowIndex, colIndex)"
@@ -35,8 +36,8 @@
</template>
<script setup lang="ts">
import { defineProps } from 'vue';
import { vFocus } from '@/utils/directives/useVFocus';
// import { defineProps } from 'vue';
// import { vFocus } from '@/utils/directives/useVFocus';
// 记录行和列的索引
const rowRecord = defineModel<number[]>('rowRecord', { required: false, default: () => [] });
@@ -45,11 +46,11 @@ const rowRecord = defineModel<number[]>('rowRecord', { required: false, default:
// console.log(`rowRecord:`, rowRecord.value);
/* const isPreview = */ defineModel<boolean>('isPreview', { required: false, default: false });
defineProps<{
rows: OptionType[];
cols: OptionType[];
}>();
const rows = defineModel('rows', { required: false, default: () => [] });
const cols = defineModel('cols', { required: false, default: () => [] });
const active = defineModel('active', { required: false, default: true });
console.log(rows.value, cols.value);
// const emits = defineEmits(['update:matrixAnswer', 'update:rowRecord']);
// 判断是否选中
@@ -62,10 +63,10 @@ const isOptionChecked = (rowIndex: number, colIndex: number): boolean => {
// return !!matrixAnswer.value?.[key];
};
const handleRowNameChange = (/* value: string */) => {
// console.log(`row change: ${value}`);
// 你可以在这里添加其他逻辑
};
// const handleRowNameChange = (/* value: string */) => {
// // console.log(`row change: ${value}`);
// // 你可以在这里添加其他逻辑
// };
// 当 matrix radio 选中时，更新 rowRecord 和 matrixAnswer
function handleMatrixRadioChange(row: number, col: number) {
@@ -91,18 +92,9 @@ function handleMatrixRadioChange(row: number, col: number) {
// emits('update:matrixAnswer', props.matrixAnswer);
// emits('update:rowRecord', props.rowRecord);
// };
const emitValue = () => {
emit('update:element', element.value);
};
</script>
<style scoped lang="scss">
.matrix-table {
width: 100%;
border-collapse: collapse;
}
.matrix-table th,
.matrix-table td {
padding: 8px;
border: 1px solid #ddd;
text-align: center;
}
</style>
<style scoped lang="scss"></style>

55
src/views/Design/components/Questions/MatrixText.vue
View File

@@ -3,23 +3,26 @@
<thead>
<tr>
<th></th>
<td v-for="col in cols" :key="col.option">
<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>
</td>
<!-- <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">
<th v-html="row.option"></th>
<!-- <th v-html="row.option"></th>-->
<contenteditable v-model="row.option" :active="active" @blur="emitValue" />
<td v-for="(col, colIndex) in cols" :key="colIndex">
<input
type="text"
@@ -34,27 +37,23 @@
</template>
<script setup lang="ts">
import { defineProps } from 'vue';
import { vFocus } from '@/utils/directives/useVFocus';
// 记录行和列的索引
const rowRecord = defineModel<string[][]>('rowRecord', { required: false, default: () => [] });
// const matrixAnswer = defineModel<{ [key: string]: 1 }>('matrixAnswer', { required: false, default: () => ({}) });
// 检查 rowRecord 是否存在
// console.log(`rowRecord:`, rowRecord.value);
const active = defineModel('active', { required: false, default: true });
/* const isPreview = */ defineModel<boolean>('isPreview', { required: false, default: false });
defineProps<{
rows: OptionType[];
cols: OptionType[];
}>();
const rows = defineModel('rows', { required: false, default: () => [] });
const cols = defineModel('cols', { required: false, default: () => [] });
// const emits = defineEmits(['update:matrixAnswer', 'update:rowRecord']);
const handleRowNameChange = (/* value: string */) => {
// const handleRowNameChange = (/* value: string */) => {
// console.log(`row change: ${value}`);
// 你可以在这里添加其他逻辑
};
// };
function getInputValue(row: number, col: number) {
// console.log(`row: ${row}, col: ${col}`);
@@ -96,16 +95,4 @@ function handleMatrixTextChange(row: number, col: number, e: Event) {
// };
</script>
<style scoped lang="scss">
.matrix-table {
width: 100%;
border-collapse: collapse;
}
.matrix-table th,
.matrix-table td {
padding: 8px;
border: 1px solid #ddd;
text-align: center;
}
</style>
<style scoped lang="scss"></style>