全局表单-2025-6-25

src/views/tabbar/globalFormDetail.vue

@@ -21,17 +21,21 @@
 
                                 </template>
                                 <template v-if="table_head[index].field_type == '7'" >
-                                    <button @click="file_fun(table_per_fun(table_head[index],Object.values(scope.row)[index]))">
-                                            预览
-                                    </button>
-                                    
+                                     
+
+                                    <div class="listLookBtn" @click="file_fun(table_per_fun(table_head[index],Object.values(scope.row)[index]))">
+                                        <i class="el-icon-view"></i>
+                                        预览
+                                    </div>
                                     
                                 </template>
 
                                 <template v-if="table_head[index].field_type == '8'">
+                                     
                                     <img class="img"
                                         style="width:55px;height:55px;"
-                                        :src=" Object.values(scope.row).join(',').split(',')[index] "
+                                        v-if="Object.values(scope.row).join(',').split(',')[index].trim()" 
+                                        :src="Object.values(scope.row).join(',').split(',')[index].trim() "
                                         title="" alt=""
                                     > 
                                 </template>
@@ -164,7 +168,12 @@
                         <!-- 上传单文件 7-->
                           
                        <template v-if="head.field_type==7">
-                                {{ ruleForm[`field_${index}`] }}
+ 
+                                
+                                <button @click="file_fun(table_per_fun(head, ruleForm[`field_${index}`] ))">
+                                    预览
+                                </button>
+
                        </template>  
 
                         <!-- 上传img 8-->
@@ -176,22 +185,23 @@
                             :show-file-list="false"
                              :before-upload="(file) => beforeAvatarUpload(file, index)">
   
-                            <img v-if="ruleForm[`field_${index}`]" :src="ruleForm[`field_${index}`]" class="avatar"> 
+                                <img v-if="ruleForm[`field_${index}`]" :src="ruleForm[`field_${index}`]" class="avatar"> 
 
-                            <div v-else class="chooseImgDiv">
-                                <div>
-                                <img src="@/assets/public/upload/noImage.png">
+                                <div v-else class="chooseImgDiv">
+                                    <div>
+                                    <img src="@/assets/public/upload/noImage.png">
 
-                                <div>选择图片</div>
+                                    <div>选择图片</div>
+                                    </div>
+                                </div>
+                                <input type="hidden" v-model="ruleForm[`field_${index}`]">
+                                <span class="photo_tips">推荐图片长宽比例为 16:9，大小不能超过 500 K。</span>
+                                <!-- <div v-if="true"  -->
+                                <div v-if="hovering && ruleForm[`field_${index}`]" 
+                                    class="delete-button"
+                                    @click="handleDelete(index)">
+                                    <i class="el-icon-delete"></i>
                                 </div>
-                            </div>
-                            <input type="hidden" v-model="ruleForm[`field_${index}`]">
-                            <span class="photo_tips">推荐图片长宽比例为 16:9，大小不能超过 500 K。</span>
-                            <div v-if="hovering && ruleForm[`field_${index}`]" 
-                                class="delete-button"
-                                  @click="handleDelete(index)">
-                                <i class="el-icon-delete"></i>
-                            </div>
                             </el-upload>
                         </div>
   
@@ -219,7 +229,7 @@ export default {
     components: {
         tableTitle,//表格标题
         myEditor,
-    },
+    }, 
     data() {
         const validateEmpty = (rule, value, callback) => {
             if (value.length == 0) {
@@ -265,10 +275,7 @@ export default {
         }
     },
     methods: {
-
-        fun_rg(){
-            console.log("----------------")
-        },
+ 
 
         convertStringArray(strArray) {
         try {
@@ -573,21 +580,21 @@ export default {
                     const rules = [];
                     
                     // 调试信息
-                    console.log(`字段 ${head.title}:`, {
-                        is_check: head.is_check,
-                        regular: head.regular,
-                        field_type: head.field_type
-                    });
+                    // console.log(`字段 ${head.title}:`, {
+                    //     is_check: head.is_check,
+                    //     regular: head.regular,
+                    //     field_type: head.field_type
+                    // });
                     
                     // 检查是否需要验证：is_check 为 1 且有 regular 正则表达式
                     if ((head.is_check === 1 || head.is_check === '1') && head.regular) {
-                        console.log(`为字段 ${head.title} 添加验证规则:`, head.regular);
+                        // console.log(`为字段 ${head.title} 添加验证规则:`, head.regular);
                         rules.push({
                             required: true,
                             message: head.regular_error || `${head.title}格式不正确`,
                             trigger: 'blur',
                             validator: (rule, value, callback) => {
-                                console.log(`验证字段 ${head.title}:`, value, '类型:', typeof value);
+                                // console.log(`验证字段 ${head.title}:`, value, '类型:', typeof value);
                                 // 空值检查
                                 if (!value || value.toString().trim() === '') {
                                     callback(new Error(head.regular_error || `${head.title}不能为空`));
@@ -605,10 +612,10 @@ export default {
                                         regexPattern = regexPattern.substring(1, lastSlashIndex);
                                     }
                                     
-                                    console.log(`处理后的正则表达式:`, regexPattern);
+                                    // console.log(`处理后的正则表达式:`, regexPattern);
                                     const reg = new RegExp(regexPattern);
                                     const testResult = reg.test(value);
-                                    console.log(`正则测试结果:`, testResult, `值: "${value}"`, `正则: ${regexPattern}`);
+                                    // console.log(`正则测试结果:`, testResult, `值: "${value}"`, `正则: ${regexPattern}`);
                                     
                                     if (!testResult) {
                                         callback(new Error(head.regular_error || `${head.title}格式不正确`));
@@ -875,7 +882,7 @@ input[aria-hidden=true] {
     position: relative;
     overflow: hidden;
     width: 178px;
-    height: 178px;
+    height:auto;
     
     &:hover {
       border-color: #409EFF;
@@ -883,41 +890,50 @@ input[aria-hidden=true] {
     
     .avatar {
       width: 100%;
-      height: 100%;
+      height: 177px;
       display: block;
     }
-    
+     
+
     .chooseImgDiv {
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100%;
       color: #8c939d;
-      
+      width:100%;
       img {
         width: 60px;
         height: 60px;
-        margin-bottom: 10px;
+        margin:10px auto 0;
+
       }
     }
   }
   
   .delete-button {
     position: absolute;
-    right: 10px;
-    top: 10px;
+    right: 33%;
+    top: 33%;
     color: #fff;
     background: rgba(0,0,0,0.5);
     padding: 5px;
     border-radius: 50%;
     cursor: pointer;
+     
+    width:33%;height: 60px;
   }
-  
+  .delete-button .el-icon-delete{
+    font-size: 33px;
+    margin-top:  6px;
+  }
+
   .photo_tips {
     display: block;
     margin-top: 10px;
     font-size: 12px;
     color: #999;
+    line-height:22px;
   }
 }
 </style>