曹大哥

src/views/tabbar/globalFormDetail.vue

@@ -4,13 +4,6 @@
         <!--表格内容 start------------------------------------------------------------>
         <div class="layerBox">
             <tableTitle :name="tableDivTitle" />
-            
-            {{ table_head[11] }}
-            <div class="">------------</div>
-            <div class="">------------</div>
-            <div class="">------------</div>
-            <div class="">------------</div>
-            {{table_body[11]}}  
             <el-row>
                 <template>
                     <el-table class="my-table" :data="table_body" style="width: 100%">
@@ -23,13 +16,9 @@
                             :width="head.width || ''">
                             <!-- 动态内容 -->
                             <template slot-scope="scope">
-          
-        
-
                                 <template v-if="table_head[index].field_type !== '7'">
-                                      
                                     {{table_per_fun(table_head[index],Object.values(scope.row)[index])}}
-                                    
+
                                 </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]))">
@@ -94,46 +83,27 @@
                 <el-form-item 
                 v-for="(head, index) in table_head" 
                         :key="index"
-                        :label="head.title + ':'+head.field_type+ ':'+dialog_inp_arr[index]+ '+'+head.is_check+ '+'+head.regular"
-                        :prop="head.field"
-                        
-                        :rules="[{ 
-                                    required:true, 
-                                    message: head.title + '不能为空', 
-                                    trigger: 'blur',
-                                    validator: (rule, value, callback) => {
-
-                                        if (!value || value.trim() === '') {
-
-                                            this.$message.error(`${head.title}:不能为空`);
-                                            callback(new Error(head.title + '不能为空'))
-                                        } else {
-                                            callback()
-                                            return
-                                        }
-                                        
-                                         
-
-                                    }
-                                }]">
+                        :label="head.title"
+                        :prop="`field_${index}`"
+                        :rules="getValidationRules(head, index)">
  
  
 
                         <!-- 文本文字1 -->
                         <el-input 
                             v-if="head.field_type==1"
-                            v-model="dialog_inp_arr[index]"
+                            v-model="ruleForm[`field_${index}`]"
                             :disabled="head.title === '编号' ? true : false"
-                            @blur="handleBlurValidation(head.title, dialog_inp_arr[index])">
+                            @blur="handleBlurValidation(head.title, ruleForm[`field_${index}`])">
                         </el-input>
  
                         <!-- 多行textarea 2-->
                         <el-input
                             v-if="head.field_type==2"
-                            v-model="dialog_inp_arr[index]"
+                            v-model="ruleForm[`field_${index}`]"
                             type="textarea"
                             :autosize="{ minRows: 2, maxRows: 4 }"
-                            @blur="handleBlurValidation(head.title, dialog_inp_arr[index])"
+                            @blur="handleBlurValidation(head.title, ruleForm[`field_${index}`])"
                         >
                         </el-input>
 
@@ -141,7 +111,7 @@
                         <el-radio-group 
 
                             v-if="head.field_type==3" 
-                            v-model="dialog_inp_arr[index]"
+                            v-model="ruleForm[`field_${index}`]"
                             >
                              
                             <el-radio 
@@ -159,7 +129,7 @@
                         <el-select 
                             v-if="head.field_type==4"
                             placeholder="请选择"
-                            v-model="dialog_inp_arr[index]"
+                            v-model="ruleForm[`field_${index}`]"
                             
                             style="width: 100%">
                             <el-option
@@ -172,7 +142,7 @@
   
                         <el-checkbox-group 
                             v-if="head.field_type==5"
-                             v-model="dialog_inp_arr[index]"> 
+                             v-model="ruleForm[`field_${index}`]"> 
                             <el-checkbox 
                                 v-for="(per_obj, per_index) in head.option_value"
                                 :key="per_index"
@@ -184,7 +154,7 @@
                         <!-- 日期选择器 6 -->
                         <el-date-picker
                             v-if="head.field_type==6"
-                            v-model="dialog_inp_arr[index]"
+                            v-model="ruleForm[`field_${index}`]"
                             type="date"
                             value-format="yyyy-MM-dd"
                             placeholder="选择日期"
@@ -193,8 +163,8 @@
                         
                         <!-- 上传单文件 7-->
                           
-                       <template v-if="head.field_type==7" v-model="dialog_inp_arr[index]">
-                                {{ dialog_inp_arr[index] }}
+                       <template v-if="head.field_type==7">
+                                {{ ruleForm[`field_${index}`] }}
                        </template>  
 
                         <!-- 上传img 8-->
@@ -206,7 +176,7 @@
                             :show-file-list="false"
                              :before-upload="(file) => beforeAvatarUpload(file, index)">
   
-                            <img v-if="dialog_inp_arr[index]" :src="dialog_inp_arr[index]" class="avatar"> 
+                            <img v-if="ruleForm[`field_${index}`]" :src="ruleForm[`field_${index}`]" class="avatar"> 
 
                             <div v-else class="chooseImgDiv">
                                 <div>
@@ -215,9 +185,9 @@
                                 <div>选择图片</div>
                                 </div>
                             </div>
-                            <input type="hidden" v-model="dialog_inp_arr[index]">
+                            <input type="hidden" v-model="ruleForm[`field_${index}`]">
                             <span class="photo_tips">推荐图片长宽比例为 16:9，大小不能超过 500 K。</span>
-                            <div v-if="hovering && dialog_inp_arr[index]" 
+                            <div v-if="hovering && ruleForm[`field_${index}`]" 
                                 class="delete-button"
                                   @click="handleDelete(index)">
                                 <i class="el-icon-delete"></i>
@@ -266,8 +236,13 @@ export default {
             imgUrl:"",
             arr_1:[1,23,12,3],
             up_edit_obj:{},//编辑后提交的数据
-            dialog_inp_arr:[ ],
-            activeIndex: 0, // 新增当前操作行索引
+            ruleForm: {
+            },
+            rules: {
+                listTitle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                contentTitle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                contentDetail: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            },
             table_head:[],//列表头
             table_body:[],//列表内容
             tableDivTitle: "查看内容",  //列表标题
@@ -286,13 +261,7 @@ export default {
             listTitle: '', //网站名称id
             contentTitle: '', //广告位名称
             //弹框相关
-            ruleForm: {
-            },
-            rules: {
-                listTitle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-                contentTitle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-                contentDetail: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-            }
+            activeIndex: 0, // 新增当前操作行索引
         }
     },
     methods: {
@@ -370,9 +339,13 @@ export default {
             this.up_edit_obj = this.table_body[the_index]
             
             
-             this.dialog_inp_arr = Object.values(this.table_body[the_index]).map(value => {
+             // 初始化 ruleForm
+            this.ruleForm = {}
+            const values = Object.values(this.table_body[the_index])
+            values.forEach((value, index) => {
                 // 将数字字符串转为数值类型（针对radio的label类型）
-                return typeof value === 'string' && !isNaN(value) ? Number(value) : value
+                const convertedValue = typeof value === 'string' && !isNaN(value) ? Number(value) : value
+                this.$set(this.ruleForm, `field_${index}`, convertedValue)
             })
            
            
@@ -381,10 +354,6 @@ export default {
             this.dialogTableVisible = true
             // console.log(id, val);
             this.activeIndex = the_index//点击的是第几个
-             // 添加字段映射（保持原有数组结构）
-            this.table_head.forEach((head, index) => {
-                this.$set(this.ruleForm, head.field, this.dialog_inp_arr[index])
-            })
         },
         //1.8 删除 
         go_cancel(id) {
@@ -454,7 +423,7 @@ export default {
             const new_all_arr = Object.values(all_obj || {});    
 
   
-            this.dialog_inp_arr[the_index]=act_label_arr 
+            this.ruleForm[`field_${the_index}`]=act_label_arr 
              
 
             return new_all_arr
@@ -532,7 +501,7 @@ export default {
             load_img_api(formData).then(res => {
             if (res.code === 200) {
                 this.$message.success('上传成功');
-                this.$set(this.dialog_inp_arr, index, res.data.imgUrl);  // 使用index更新对应位置
+                this.$set(this.ruleForm, `field_${index}`, res.data.imgUrl);  // 使用index更新对应位置
             } else {
                 this.$message.error(res.message || '上传失败');
             }
@@ -544,48 +513,19 @@ export default {
 
         // 删除图片
         handleDelete(index) {
-             this.$set(this.dialog_inp_arr, index, '');
+             this.$set(this.ruleForm, `field_${index}`, '');
             
         },
                 // 弹出层相关方法
                 // 1.9 提交表单
         submitForm(formName) {
-              // 新增正则验证逻辑
-                const regexValidations = this.table_head
-                    .map((head, index) => ({
-                        head,
-                        value: this.dialog_inp_arr[index],
-                        index
-                    }))
-                    .filter(item => item.head.is_check == 1 && item.head.regular);
-
-                for (const { head, value, index } of regexValidations) {
-                    // console.log("head===----------",head.regular)
-                    // head.title==
-                     
-                        try {
-                            const reg = new RegExp(head.regular);
-                            if (!reg.test(value)) {
-                                this.$message.error(head.regular_error || `${head.title}格式不正确`);
-                                this.$refs[formName].validate(() => {}); // 触发错误提示
-                                return;
-                            }
-                        } catch(e) {
-                            // console.error('正则表达式错误:', e);
-                            this.$message.error('校验规则配置错误');
-                            return;
-                        }
-                         
-                     
-
-                }
-                
                 // 转换复选框数据（数组转字符串）
-                const convertedData = this.dialog_inp_arr.map((value, index) => {
-                    if (this.table_head[index]?.field_type === 5) {
+                const convertedData = this.table_head.map((head, index) => {
+                    const value = this.ruleForm[`field_${index}`];
+                    if (head.field_type === 5) {
                         return Array.isArray(value) && value.length === 1 
                             ? value[0] 
-                            : value.join(',');
+                            : Array.isArray(value) ? value.join(',') : value;
                     }
                     return value;
                 });
@@ -596,22 +536,7 @@ export default {
                     the_obj[key] = convertedData[index];
                 });
                 the_obj.table_id = +this.$route.query.id;
-                const emptyFields = this.dialog_inp_arr
-                    .map((value, index) => ({ 
-                        index, 
-                        field: this.table_head[index]?.title,
-                        value 
-                    }))
-                    .filter(item => !item.value || item.value.toString().trim() === '');
-                if (emptyFields.length > 0) {
-                    emptyFields.forEach(item => {
-                        this.$message.error(`${item.field}:不能为空`);
-                    });
-                    return;
-                }
-                
                 
-                // return 
                 this.$refs[formName].validate((valid) => {
                     if (valid) {
                         // 验证通过后的提交逻辑
@@ -643,6 +568,62 @@ export default {
                     if (!value || value.trim() === '') {
                         this.$message.error(`${fieldName}:不能为空`);
                     }
+                },
+                getValidationRules(head, index) {
+                    const rules = [];
+                    
+                    // 调试信息
+                    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);
+                        rules.push({
+                            required: true,
+                            message: head.regular_error || `${head.title}格式不正确`,
+                            trigger: 'blur',
+                            validator: (rule, value, callback) => {
+                                console.log(`验证字段 ${head.title}:`, value, '类型:', typeof value);
+                                // 空值检查
+                                if (!value || value.toString().trim() === '') {
+                                    callback(new Error(head.regular_error || `${head.title}不能为空`));
+                                    return;
+                                }
+                                
+                                // 正则验证
+                                try {
+                                    // 处理正则表达式字符串格式
+                                    let regexPattern = head.regular;
+                                    
+                                    // 如果正则表达式包含 / 分隔符，需要提取模式部分
+                                    if (regexPattern.startsWith('/') && regexPattern.includes('/')) {
+                                        const lastSlashIndex = regexPattern.lastIndexOf('/');
+                                        regexPattern = regexPattern.substring(1, lastSlashIndex);
+                                    }
+                                    
+                                    console.log(`处理后的正则表达式:`, regexPattern);
+                                    const reg = new RegExp(regexPattern);
+                                    const testResult = reg.test(value);
+                                    console.log(`正则测试结果:`, testResult, `值: "${value}"`, `正则: ${regexPattern}`);
+                                    
+                                    if (!testResult) {
+                                        callback(new Error(head.regular_error || `${head.title}格式不正确`));
+                                    } else {
+                                        callback();
+                                    }
+                                } catch (e) {
+                                    console.error('正则表达式错误:', e);
+                                    callback(new Error('校验规则配置错误'));
+                                }
+                            }
+                        });
+                    }
+                    
+                    return rules;
                 }
             },