fix:矩阵题优化

components.d.ts

@@ -2,7 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-export {};
+export {}
 
 /* prettier-ignore */
 declare module 'vue' {

src/assets/css/public.scss

@@ -296,7 +296,7 @@ input {
   font-weight: unset;
 }
 
- .van-popup--bottom.van-popup--round{
+.van-popup--bottom.van-popup--round {
-   background: linear-gradient( 180deg, #E8FAD7 0%, #FFFFFF 8%);
+  background: linear-gradient(180deg, #e8fad7 0%, #ffffff 8%);
- }
+}
 //background: linear-gradient( 180deg, #E8FAD7 0%, #FFFFFF 100%);

src/components/contenteditable.vue

@@ -18,7 +18,7 @@
       <!--      v-html="modelValue"-->
       <!--      :placeholder="placeholder"-->
       <!--    ></p>-->
-      <div class="right-icon ml10" style="margin-left: 20px">
+      <div class="right-icon ml10">
         <slot name="right-icon"></slot>
       </div>
     </div>

src/utils/common.js

@@ -10,20 +10,17 @@ import {
   nps
 } from '@/utils/importJsons';
 
-import radioPng from '@/views/Design/images/1.png'
+import radioPng from '@/views/Design/images/1.png';
-import checkboxPng from '@/views/Design/images/2.png'
+import checkboxPng from '@/views/Design/images/2.png';
-import completionPng from '@/views/Design/images/4.png'
+import completionPng from '@/views/Design/images/4.png';
-import ratePng from '@/views/Design/images/5.png'
+import ratePng from '@/views/Design/images/5.png';
-import textImagePng from '@/views/Design/images/6.png'
+import textImagePng from '@/views/Design/images/6.png';
-import martrixQuestionCheckboxPng from '@/views/Design/images/10.png'
+import martrixQuestionCheckboxPng from '@/views/Design/images/10.png';
-import martrixQuestionRadioPng from '@/views/Design/images/9.png'
+import martrixQuestionRadioPng from '@/views/Design/images/9.png';
-import martrixQuestionTextPng from '@/views/Design/images/8.png'
+import martrixQuestionTextPng from '@/views/Design/images/8.png';
-import uploadPng from '@/views/Design/images/18.png'
+import uploadPng from '@/views/Design/images/18.png';
-import signPng from '@/views/Design/images/22.png'
+import signPng from '@/views/Design/images/22.png';
-import nspPng from '@/views/Design/images/106.png'
+import nspPng from '@/views/Design/images/106.png';
-
-
-
 
 const basicQuesTypeList = [
   {
@@ -63,7 +60,7 @@ const basicQuesTypeList = [
     json: martrixQuestion
   },
   {
-    icon:martrixQuestionCheckboxPng,
+    icon: martrixQuestionCheckboxPng,
     name: '矩阵多选',
     question_type: 10,
     json: martrixQuestion
@@ -93,7 +90,7 @@ const basicQuesTypeList = [
     json: signQuestion
   },
   {
-    icon:nspPng,
+    icon: nspPng,
     name: 'NPS',
     question_type: 106,
     json: nps

src/views/Design/components/Questions/MatrixQuestion.vue

@@ -140,10 +140,10 @@ const errorMessage = defineModel('errorMessage', {
               <div :style="{ width: `${tableWidth}px`, height: '30px' }"></div>
             </template>
             <template #default="{ row /*, column, $index*/ }">
-              <div style="position: relative">
+              <div style="position: relative" class="flex align-center space-between">
-                <el-text truncated>
+                <div :style="{ width: `${tableWidth - 50}px` }">
                   <contenteditable v-model="row.option" :active="active" @blur="emitValue" />
-                </el-text>
+                </div>
                 <van-popover
                   v-model="row.showAction"
                   placement="left-end"
@@ -167,10 +167,10 @@ const errorMessage = defineModel('errorMessage', {
             style="position: relative"
           >
             <template #header>
-              <div>
+              <div class="flex align-center space-between">
-                <el-text truncated :style="{ width: `${tableWidth}px` }">
+                <div :style="{ width: `${tableWidth - 20}px` }">
                   <contenteditable v-model="col.option" :active="active" @blur="emitValue" />
-                </el-text>
+                </div>
                 <van-popover
                   v-model="col.showAction"
                   placement="left-end"
@@ -218,9 +218,9 @@ input[type='text'] {
 }
 
 .icon {
-  position: absolute;
+  //position: absolute;
-  top: 15%;
+  //top: 15%;
-  right: 0;
+  //right: 0;
 
   & > svg {
     height: 15px;

src/views/Survey/views/Create/Index.vue

@@ -99,22 +99,19 @@
           <van-col :span="6">添加题目</van-col>
         </van-row>
 
-        <div class="ques_list flex align-center " style="flex-wrap:wrap">
+        <div class="ques_list flex align-center" style="flex-wrap: wrap">
           <div
-              class="icon-item"
+            class="icon-item"
             v-for="item in quesList"
             :key="item.type"
             @click="questionEvent(item)"
           >
+            <img :src="item.icon" alt="" />
+            <p>{{ item.name }}</p>
+            <!--            <template #icon>-->
 
-              <img :src="item.icon" alt="">
+            <!--              <span class="mobilefont grid-icon" v-html="item.icon"></span>-->
-              <p>{{item.name}}</p>
+            <!--            </template>-->
-<!--            <template #icon>-->
-
-
-
-<!--              <span class="mobilefont grid-icon" v-html="item.icon"></span>-->
-<!--            </template>-->
           </div>
         </div>
       </van-popup>
@@ -386,7 +383,7 @@ import { useRoute, useRouter } from 'vue-router';
 import YLPicker from '@/components/YLPicker.vue';
 import { getPages } from '@/utils/public';
 import { showConfirmDialog, showFailToast, showToast } from 'vant';
-import {Position} from "@element-plus/icons-vue";
+import { Position } from '@element-plus/icons-vue';
 
 // 获取 Store 实例
 const counterStore = useCounterStore();
@@ -1040,31 +1037,29 @@ onBeforeMount(() => {
     margin: 20px 0 10px 20px;
     font-weight: bold;
     font-size: 19px;
-    & div{
+    & div {
       font-size: 19px;
     }
   }
 
   .ques_list {
     gap: 10px;
-    margin:20px 12px 30px 12px;
+    margin: 20px 12px 30px 12px;
-    .icon-item{
+    .icon-item {
       flex: 1 1 calc(25% - 7.5px); // 每个元素占25%，减去间隙的一半（10px / 2 = 5px）
       min-width: calc(25% - 7.5px);
       max-width: calc(25% - 7.5px);
       text-align: center;
       position: relative;
       height: 88px;
-      & p{
+      & p {
-
+        width: 100%;
-        width:100%;
         position: absolute;
-        bottom:11px;
+        bottom: 11px;
-        font-size:14px;
+        font-size: 14px;
-        text-align:center;
+        text-align: center;
         color: #000000;
         font-weight: 500;
-
       }
     }
   }
@@ -1119,13 +1114,12 @@ onBeforeMount(() => {
   }
 }
 
-
+.icon-item {
-.icon-item{
+  width: 76px;
-  width:76px;
+  height: 88px;
-  height:88px;
+  img {
-  img{
+    width: 100%;
-    width:100%;
+    height: 100%;
-    height:100%
   }
 }
 

src/views/Survey/views/Preview/components/questions/PreviewChoice.vue

@@ -1,6 +1,11 @@
 <template>
-  <choice v-model:answer="choiceValue" :element="question" :index="answerIndex" :is-preview="true"
+  <choice
-    :errorMessage="question.error" />
+    v-model:answer="choiceValue"
+    :element="question"
+    :index="answerIndex"
+    :is-preview="true"
+    :errorMessage="question.error"
+  />
 </template>
 <script setup lang="ts">
 import { watch, ref, computed } from 'vue';
@@ -21,7 +26,7 @@ const choiceValue = ref<string>('0');
 
 // 初始化数据，因为 preview 的数据源和 element 的数据源不相同， 所以需要配置一遍数据
 initData();
-function initData () {
+function initData() {
   question.value.options = list.value;
 }
 
@@ -34,9 +39,9 @@ if (answer.value) {
 /**
  * 如果再次加载组件， 组件内已经有 answer. 那么开始解析答案
  */
-function parseAnswer () {
+function parseAnswer() {
   for (const key in answer.value.value) {
-    choiceValue.value = (key);
+    choiceValue.value = key;
   }
 }