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

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

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { /* useTemplateRef, */ ref, computed, type Component } from 'vue';
import { type Component, computed, defineModel } 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';
@@ -10,6 +10,9 @@ const question = defineModel<question>('element', {
return {};
}
});
const rowRecord = defineModel<unknown[]>('rowRecord', { required: false, default: () => [] });
const isPreview = defineModel<boolean>('isPreview', { required: false, default: false });
// eslint-disable-next-line
const activeComponent = computed<Component>(() => {
switch (question.value.question_type) {
@@ -24,16 +27,19 @@ const activeComponent = computed<Component>(() => {
if (question.value?.list) question.value.options = question.value?.list;
// 行标签
const rows = ref(question.value?.options[0] ?? []);
const rows = defineModel<questionOptionType[]>('rows', { required: false, default: () => [] });
rows.value.length < 1 && (rows.value = question.value?.options[0] ?? []);
// 列标签
const cols = ref(question.value?.options[1] ?? []);
const cols = defineModel<questionOptionType[]>('cols', { required: false, default: () => [] });
cols.value.length < 1 && (cols.value = question.value?.options[1] ?? []);
// console.log(rows.value, cols.value);
// const columnLabels = useTemplateRef<HTMLElement[]>('columnLabels');
// 注意, element.options 里面的东西是数组，第一项内容是行标签内容，第二项内容是列标签内容
// 类型 AI 生成 切勿盲目相信，以实际为准
/* const props = */ defineProps<{
/* const props = */
defineProps<{
index: number;
active: boolean;
}>();
@@ -62,54 +68,16 @@ const emitValue = () => {
</template>
<template #input>
<!-- <div style="width: 1000px; overflow: scroll">-->
<Component :is="activeComponent" v-model:rows="rows" v-model:cols="cols" />
<!-- </div>-->
<Component
:is="activeComponent"
v-model:rowRecord="rowRecord"
v-model:element="question"
v-model:rows="rows"
v-model:cols="cols"
:isPreview="isPreview"
style="overflow: scroll; width: 88vw"
/>
</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 lang="scss" scoped>