for(let i = 0; i < arr.length; i++)

<!-- 監(jiān)測(cè)構(gòu)建信息對(duì)話框 -->
<a-modal
    :title="monitorTitle"
    :visible="monitorModalVisible"
    @ok="monitorModalOk"
    @cancel="monitorModalCancel"
    okText="確定"
    cancelText="取消"
    :width=850>
    <!-- 當(dāng)控制展開折疊的數(shù)組有值時(shí)再渲染:注意點(diǎn)三/四 -->
    <div v-if="monitorExpand.length > 0">
        <!-- 通過數(shù)值一循環(huán)生成監(jiān)測(cè)區(qū) -->
        <div  v-for="(item1,index1) in Number(addForm.add_monitor_number)" :key="index1">
            <!-- 監(jiān)測(cè)區(qū)標(biāo)題與展開折疊文字 -->
            <div class="monitor">
                <span class="monitor_title">監(jiān)測(cè)區(qū)-{{item1}}</span>
                <!-- 控制監(jiān)測(cè)區(qū)折疊與展開的文字與圖標(biāo) -->
                <div>
                    <span v-show="monitorExpand[index1].expanded" @click="monitorFormExpand(index1)" style="color:#4257B9;cursor: pointer;">
                        <a-icon type="up"/>
                        <span>折疊</span>
                    </span>
                    <span v-show="!monitorExpand[index1].expanded" @click="monitorFormExpand(index1)" style="color:#4257B9;cursor: pointer;">
                        <a-icon type="down"/>
                        <span>展開</span>
                    </span>
                </div>
            </div>
            <!-- 監(jiān)測(cè)區(qū)表單，需要展開折疊的效果，所以需要變量來控制 -->
            <div class="monitor_form" v-show="monitorExpand[index1].expanded">
                <a-form-model ref="monitorFormRef" :model="monitorForm" :label-col="{span:6}" :wrapper-col="{ span: 17 }">
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item label="名稱：" :rules="{ required: true, message: '名稱不能為空', trigger: 'blur'}" :prop="'monitor_area.'+index1+'.monitor_name'">
                                <a-input v-model="monitorForm.monitor_area[index1].monitor_name" placeholder="請(qǐng)輸入監(jiān)測(cè)構(gòu)建信息" :disabled="modalDisabled"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="位置：" :rules="{ required: true, message: '位置不能為空', trigger: 'blur'}" :prop="'monitor_area.'+index1+'.monitor_position'">
                                <a-input v-model="monitorForm.monitor_area[index1].monitor_position" placeholder="請(qǐng)輸入監(jiān)測(cè)構(gòu)建信息" :disabled="modalDisabled"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-form-model-item label="監(jiān)測(cè)點(diǎn)數(shù)值：" :label-col="{span:3}" :wrapper-col="{ span:21 }">
                        <!-- 通過數(shù)值二循環(huán)生成監(jiān)測(cè)點(diǎn)數(shù) -->
                        <a-col :span="4" v-for="(item2,index2) in Number(addForm.add_point_number)" :key="index2">
                            <a-form-model-item :style="{ marginRight:'5px'}" :rules="{ required: true, message: '數(shù)值不能為空', trigger: 'blur'}" :prop="'monitor_area.'+index1+'.points.'+index2">
                                <a-input v-model="monitorForm.monitor_area[index1].points[index2]" :placeholder="index2+1" :disabled="modalDisabled"/>
                            </a-form-model-item>
                        </a-col>
                    </a-form-model-item>
                </a-form-model>
            </div>
        </div>
    </div>
</a-modal>

// 按鈕點(diǎn)擊事件
inputPointMessage(){
    // 在添加時(shí)，只有輸入了測(cè)區(qū)數(shù)量以及監(jiān)測(cè)點(diǎn)數(shù)，才能進(jìn)行構(gòu)建信息的填寫
    if(this.addTitle=='添加'){
        if(this.addForm.add_monitor_number == ''){
            return this.$message.warning('請(qǐng)先輸入測(cè)區(qū)數(shù)量')
        }
        if(this.addForm.add_point_number == '')
            return this.$message.warning('請(qǐng)先輸入監(jiān)測(cè)點(diǎn)數(shù)')
    }
    // 生成控制折疊展開的數(shù)組和表單綁定對(duì)象，使用let聲明，避免出現(xiàn)意外的全局變量
    for(let i = 0; i < this.addForm.add_monitor_number ;i++){
        // 生成控制折疊展開的數(shù)組
        this.monitorExpand.push({expanded:true});
        // 生成表單綁定對(duì)象
        this.monitorForm.monitor_area.push({
            // 名稱
            monitor_name :'',
            // 位置
            monitor_position :'',
            // 保存監(jiān)測(cè)點(diǎn)數(shù)的數(shù)組
            points :[]
        })
    }
    // 打開對(duì)話框
    this.monitorModalVisible = true
},

// 信息表單的展開折疊
monitorFormExpand(index){
    this.monitorExpand[index].expanded = !this.monitorExpand[index].expanded
},

// 監(jiān)測(cè)構(gòu)建信息對(duì)話框確定按鈕
monitorModalOk(){
     // 在點(diǎn)擊對(duì)話框確定的時(shí)候，對(duì)表單進(jìn)行校驗(yàn)
     console.log(this.$refs.monitorFormRef)
     // 創(chuàng)建空數(shù)組，保存多個(gè)校驗(yàn)結(jié)果
     let valids = []
     this.$refs.monitorFormRef.forEach((item)=>{
         item.validate(valid => {
             // 將校驗(yàn)結(jié)果保存到數(shù)組中，當(dāng)前item對(duì)應(yīng)表單的校驗(yàn)全部通過為true,否則為false
             valids.push(valid)
         });
     });
     console.log(valids,'valids')
     // 遍歷校驗(yàn)結(jié)果數(shù)組，只要一個(gè)為false，則返回false，否則返回true
     let finalValid = valids.every((item)=>{
         return item == true
     });
     console.log(finalValid,'finalValid')
     // 當(dāng)全部表單的表單項(xiàng)沒有全部通過，直接返回
     if(!finalValid) return
     // 執(zhí)行拿到數(shù)據(jù)之后的業(yè)務(wù)代碼,業(yè)務(wù)代碼不進(jìn)行演示
     // 關(guān)閉當(dāng)前對(duì)話框
     this.monitorModalVisible = false
 },

//  測(cè)區(qū)數(shù)量
 add_monitor_number: [{required: true, message: '測(cè)區(qū)數(shù)量不能為空', trigger: 'blur' },
         {type:'number',message:'僅支持輸入正整數(shù)(不包含0)', trigger: 'blur',transform(value){ 
         if(value){
             // 將輸入的值轉(zhuǎn)為數(shù)字
             var val = Number(value)
             if(/^[+]{0,1}(\d+)$/.test(val) && val != 0) return val
             // 返回false即為校驗(yàn)失敗
             return false
         }
 }} ],

 // 按鈕點(diǎn)擊事件
// 按鈕點(diǎn)擊事件
inputPointMessage(){
      // 定義變量判斷用戶輸入了相應(yīng)的值才可以進(jìn)行表單的渲染,都通過校驗(yàn)時(shí)為true,否則為false
      let tempValid = true;
      // 對(duì)數(shù)值一和數(shù)值二兩個(gè)值的正確性進(jìn)行校驗(yàn)(只能是正整數(shù),不包含零),只有兩個(gè)值的校驗(yàn)通過了才可以繼續(xù)對(duì)表單進(jìn)行渲染
      this.$refs.addFormRef.validateField(['add_monitor_number','add_point_number'],(error)=>{
          // 當(dāng)error存在即校驗(yàn)未全部通過,
          if (error) tempValid = false;
      })
      console.log(tempValid)
      // 校驗(yàn)不通過直接返回
      if(!tempValid) return;
      // if(this.addTitle=='添加'){
      //     if(this.addForm.add_monitor_number == ''){
      //         return this.$message.warning('請(qǐng)先輸入測(cè)區(qū)數(shù)量')
      //     }
      //     if(this.addForm.add_point_number == ''){
      //         return this.$message.warning('請(qǐng)先輸入監(jiān)測(cè)點(diǎn)數(shù)')
      //     }
      // }
      // 生成控制折疊展開的數(shù)組和表單綁定對(duì)象，使用let聲明，避免出現(xiàn)意外的全局變量
      for(let i = 0; i < this.addForm.add_monitor_number ;i++){
          // 生成控制折疊展開的數(shù)組
          this.monitorExpand.push({expanded:true});
          // 生成表單綁定對(duì)象
          this.monitorForm.monitor_area.push({
              // 名稱
              monitor_name :'',
              // 位置
              monitor_position :'',
              // 保存監(jiān)測(cè)點(diǎn)數(shù)的數(shù)組
              points :[]
          })
      }
      // 打開對(duì)話框
      this.monitorModalVisible = true
  },

// 當(dāng)前表單沒有綁定數(shù)據(jù)時(shí),生成表單對(duì)象
if(this.monitorForm.monitor_area.length == 0){
    // 生成控制折疊展開的數(shù)組和表單綁定對(duì)象，使用let聲明，避免出現(xiàn)意外的全局變量
    for(let i = 0; i < this.addForm.add_monitor_number ;i++){
        // 生成控制折疊展開的數(shù)組
        this.monitorExpand.push({expanded:true});
        // 生成表單綁定對(duì)象
        this.monitorForm.monitor_area.push({
            // 名稱
            actual_measure_region_name :'',
            // 位置
            actual_measure_region_position :'',
            // 保存監(jiān)測(cè)點(diǎn)數(shù)的數(shù)組
            actual_measure_region_value :[]
        })
    }
}