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

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>