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

@@ -297,6 +297,6 @@ input {
 }
 
 .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 checkboxPng from '@/views/Design/images/2.png'
-import completionPng from '@/views/Design/images/4.png'
-import ratePng from '@/views/Design/images/5.png'
-import textImagePng from '@/views/Design/images/6.png'
-import martrixQuestionCheckboxPng from '@/views/Design/images/10.png'
-import martrixQuestionRadioPng from '@/views/Design/images/9.png'
-import martrixQuestionTextPng from '@/views/Design/images/8.png'
-import uploadPng from '@/views/Design/images/18.png'
-import signPng from '@/views/Design/images/22.png'
-import nspPng from '@/views/Design/images/106.png'
-
-
-
+import radioPng from '@/views/Design/images/1.png';
+import checkboxPng from '@/views/Design/images/2.png';
+import completionPng from '@/views/Design/images/4.png';
+import ratePng from '@/views/Design/images/5.png';
+import textImagePng from '@/views/Design/images/6.png';
+import martrixQuestionCheckboxPng from '@/views/Design/images/10.png';
+import martrixQuestionRadioPng from '@/views/Design/images/9.png';
+import martrixQuestionTextPng from '@/views/Design/images/8.png';
+import uploadPng from '@/views/Design/images/18.png';
+import signPng from '@/views/Design/images/22.png';
+import nspPng from '@/views/Design/images/106.png';
 
 const basicQuesTypeList = [
   {

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">
-                <el-text truncated>
+              <div style="position: relative" class="flex align-center space-between">
+                <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>
-                <el-text truncated :style="{ width: `${tableWidth}px` }">
+              <div class="flex align-center space-between">
+                <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;
-  top: 15%;
-  right: 0;
+  //position: absolute;
+  //top: 15%;
+  //right: 0;
 
   & > svg {
     height: 15px;

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

@@ -106,13 +106,10 @@
             :key="item.type"
             @click="questionEvent(item)"
           >
-
-              <img :src="item.icon" alt="">
+            <img :src="item.icon" alt="" />
             <p>{{ item.name }}</p>
             <!--            <template #icon>-->
 
-
-
             <!--              <span class="mobilefont grid-icon" v-html="item.icon"></span>-->
             <!--            </template>-->
           </div>
@@ -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();
@@ -1056,7 +1053,6 @@ onBeforeMount(() => {
       position: relative;
       height: 88px;
       & p {
-
         width: 100%;
         position: absolute;
         bottom: 11px;
@@ -1064,7 +1060,6 @@ onBeforeMount(() => {
         text-align: center;
         color: #000000;
         font-weight: 500;
-
       }
     }
   }
@@ -1119,13 +1114,12 @@ onBeforeMount(() => {
   }
 }
 
-
 .icon-item {
   width: 76px;
   height: 88px;
   img {
     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"
-    :errorMessage="question.error" />
+  <choice
+    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';
@@ -36,7 +41,7 @@ if (answer.value) {
  */
 function parseAnswer() {
   for (const key in answer.value.value) {
-    choiceValue.value = (key);
+    choiceValue.value = key;
   }
 }