You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							867 lines
						
					
					
						
							28 KiB
						
					
					
				
			
		
		
		
			
			
			
				
					
				
				
					
				
			
		
		
	
	
							867 lines
						
					
					
						
							28 KiB
						
					
					
				
								<template>
							 | 
						|
								  <div :id="formId" class="resi-container">
							 | 
						|
								    <el-form :ref="formId" class="resi-form" :model="form" :rules="rulesForm" :label-width="labelWidth">
							 | 
						|
								      <template v-if="supportAdd">
							 | 
						|
								        <el-row style="margin-bottom: 10px;">
							 | 
						|
								          <el-col :span="24">
							 | 
						|
								            <el-button icon="el-icon-plus" size="small" @click="handleAddRow"></el-button>
							 | 
						|
								          </el-col>
							 | 
						|
								        </el-row>
							 | 
						|
								        <edit-form v-for="(item, index) in addList" :key="index"  :ref="'baseForms' + index" :columns="3"
							 | 
						|
								        :form-list="item.itemList || formList" :form-id="'baseForms' + item.row" />
							 | 
						|
								      </template>
							 | 
						|
								      <template v-else>
							 | 
						|
								        <el-row v-if="fixed" class="resi-row">
							 | 
						|
								          <!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> -->
							 | 
						|
								          <el-col :span="6">
							 | 
						|
								              <el-form-item prop="GRID_ID" label="所属网格">
							 | 
						|
								              <!-- <div class="resi-cell"> -->
							 | 
						|
								                <!-- <div class="resi-cell-label">{{n.label}}</div> -->
							 | 
						|
								                <div class="resi-cell-value">
							 | 
						|
								                  <el-select v-model.trim="form.GRID_ID" :disabled="disabled" placeholder="请选择网格" size="small"
							 | 
						|
								                  clearable class="resi-cell-select" @change="handleChangeGrid"
							 | 
						|
								                  >
							 | 
						|
								                    <el-option
							 | 
						|
								                      v-for="item in optionsG"
							 | 
						|
								                      :key="item.value"
							 | 
						|
								                      :label="item.label"
							 | 
						|
								                      :value="item.value">
							 | 
						|
								                    </el-option>
							 | 
						|
								                  </el-select>
							 | 
						|
								                </div>
							 | 
						|
								              <!-- </div> -->
							 | 
						|
								            </el-form-item>
							 | 
						|
								          </el-col>
							 | 
						|
								          <el-col :span="18">
							 | 
						|
								              <el-form-item label="所属房屋" required>
							 | 
						|
								                <div class="resi-cell-value">
							 | 
						|
								                  <div class="resi-cell-col">
							 | 
						|
								                    <el-form-item prop="VILLAGE_ID">
							 | 
						|
								                      <el-select v-model.trim="form.VILLAGE_ID" placeholder="请选择小区" size="small"
							 | 
						|
								                      clearable class="resi-cell-select" :disabled="disabled" @change="handleChangeV"
							 | 
						|
								                      >
							 | 
						|
								                        <el-option
							 | 
						|
								                          v-for="item in optionsV"
							 | 
						|
								                          :key="item.value"
							 | 
						|
								                          :label="item.label"
							 | 
						|
								                          :value="item.value">
							 | 
						|
								                        </el-option>
							 | 
						|
								                      </el-select>
							 | 
						|
								                    </el-form-item>
							 | 
						|
								                    <el-form-item prop="BUILD_ID">
							 | 
						|
								                      <el-select v-model.trim="form.BUILD_ID" placeholder="请选择楼号" size="small"
							 | 
						|
								                      clearable :disabled="disabled" class="resi-cell-select resi-cell-select-middle" @change="handleChangeB"
							 | 
						|
								                      >
							 | 
						|
								                        <el-option
							 | 
						|
								                          v-for="item in optionsB"
							 | 
						|
								                          :key="item.value"
							 | 
						|
								                          :label="item.label"
							 | 
						|
								                          :value="item.value">
							 | 
						|
								                        </el-option>
							 | 
						|
								                      </el-select>
							 | 
						|
								                    </el-form-item>
							 | 
						|
								                    <el-form-item prop="UNIT_ID">
							 | 
						|
								                      <el-select v-model.trim="form.UNIT_ID" placeholder="请选择单元" size="small"
							 | 
						|
								                      clearable :disabled="disabled" class="resi-cell-select resi-cell-select-middle" @change="handleChangeD"
							 | 
						|
								                      >
							 | 
						|
								                        <el-option
							 | 
						|
								                          v-for="item in optionsD"
							 | 
						|
								                          :key="item.value"
							 | 
						|
								                          :label="item.label"
							 | 
						|
								                          :value="item.value">
							 | 
						|
								                        </el-option>
							 | 
						|
								                      </el-select>
							 | 
						|
								                    </el-form-item>
							 | 
						|
								                    <el-form-item prop="HOME_ID">
							 | 
						|
								                      <el-select v-model.trim="form.HOME_ID" placeholder="请选择房号" size="small"
							 | 
						|
								                      clearable :disabled="disabled" class="resi-cell-select resi-cell-select-middle"
							 | 
						|
								                      @change="handleChangeH"
							 | 
						|
								                      >
							 | 
						|
								                        <el-option
							 | 
						|
								                          v-for="item in optionsH"
							 | 
						|
								                          :key="item.value"
							 | 
						|
								                          :label="item.label"
							 | 
						|
								                          :value="item.value">
							 | 
						|
								                        </el-option>
							 | 
						|
								                      </el-select>
							 | 
						|
								                    </el-form-item>
							 | 
						|
								                  </div>
							 | 
						|
								                  <!-- <el-col :span="6">
							 | 
						|
								                    
							 | 
						|
								                  </el-col>
							 | 
						|
								                  <el-col :span="6">
							 | 
						|
								                    
							 | 
						|
								                  </el-col>
							 | 
						|
								                  <el-col :span="6">
							 | 
						|
								                    
							 | 
						|
								                  </el-col>
							 | 
						|
								                  <el-col :span="6">
							 | 
						|
								                    
							 | 
						|
								                  </el-col> -->
							 | 
						|
								                </div>
							 | 
						|
								            </el-form-item>
							 | 
						|
								          </el-col>
							 | 
						|
								          <!-- <el-col :span="6">
							 | 
						|
								              <el-form-item :prop="form.BUILD_ID" label="所属楼宇">
							 | 
						|
								                <div class="resi-cell-value">
							 | 
						|
								                  <el-select v-model.trim="form.BUILD_ID" :disabled="disabled" placeholder="请选择楼号" size="small"
							 | 
						|
								                  clearable class="resi-cell-select"
							 | 
						|
								                  >
							 | 
						|
								                    <el-option
							 | 
						|
								                      v-for="item in optionsB"
							 | 
						|
								                      :key="item.value"
							 | 
						|
								                      :label="item.label"
							 | 
						|
								                      :value="item.value">
							 | 
						|
								                    </el-option>
							 | 
						|
								                  </el-select>
							 | 
						|
								                </div>
							 | 
						|
								            </el-form-item>
							 | 
						|
								          </el-col>
							 | 
						|
								          <el-col :span="6">
							 | 
						|
								              <el-form-item :prop="form.HOME_ID" label="所属家庭">
							 | 
						|
								                <div class="resi-cell-value">
							 | 
						|
								                  <el-select v-model.trim="form.HOME_ID" :disabled="disabled" placeholder="请选择" size="small"
							 | 
						|
								                  clearable class="resi-cell-select"
							 | 
						|
								                  >
							 | 
						|
								                    <el-option
							 | 
						|
								                      v-for="item in optionsH"
							 | 
						|
								                      :key="item.value"
							 | 
						|
								                      :label="item.label"
							 | 
						|
								                      :value="item.value">
							 | 
						|
								                    </el-option>
							 | 
						|
								                  </el-select>
							 | 
						|
								                </div>
							 | 
						|
								            </el-form-item>
							 | 
						|
								          </el-col> -->
							 | 
						|
								        </el-row>
							 | 
						|
								        <el-row v-for="(item, index) in sliceList(formList, columns)" :key="index" class="resi-row">
							 | 
						|
								            <!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> -->
							 | 
						|
								            <el-col v-for="n in item" :key="n.itemId" :span="item.length === 1 ? 24 : (24/columns)"
							 | 
						|
								            :style="n.itemType === 'divider' && 'display: none;'">
							 | 
						|
								              <el-form-item :prop="n.columnName" :label="n.label">
							 | 
						|
								                <!-- <div class="resi-cell"> -->
							 | 
						|
								                  <!-- <div class="resi-cell-label">{{n.label}}</div> -->
							 | 
						|
								                  <div class="resi-cell-value">
							 | 
						|
								                    <template v-if="n.itemType === 'input' || n.itemType === 'textarea'">
							 | 
						|
								                      <el-input
							 | 
						|
								                        v-if="n.validType"
							 | 
						|
								                        v-model.trim="form[n.columnName]"
							 | 
						|
								                        :disabled="disabled"
							 | 
						|
								                        class="resi-cell-input"
							 | 
						|
								                        size="small"
							 | 
						|
								                        clearable
							 | 
						|
								                        placeholder="请输入内容"
							 | 
						|
								                        >
							 | 
						|
								                      </el-input>
							 | 
						|
								                      <el-input
							 | 
						|
								                        v-else
							 | 
						|
								                        v-model.trim="form[n.columnName]"
							 | 
						|
								                        :disabled="disabled"
							 | 
						|
								                        class="resi-cell-input"
							 | 
						|
								                        size="small"
							 | 
						|
								                        clearable
							 | 
						|
								                        placeholder="请输入内容"
							 | 
						|
								                        >
							 | 
						|
								                      </el-input>
							 | 
						|
								                    </template>
							 | 
						|
								                    <!-- <template v-if="n.itemType === 'textarea'">
							 | 
						|
								                      <el-input
							 | 
						|
								                        v-model.trim="form[n.columnName]"
							 | 
						|
								                        class="resi-cell-textarea"
							 | 
						|
								                        size="small"
							 | 
						|
								                        type="textarea"
							 | 
						|
								                        clearable
							 | 
						|
								                        placeholder="请输入内容"
							 | 
						|
								                        >
							 | 
						|
								                      </el-input>
							 | 
						|
								                    </template> -->
							 | 
						|
								                    <el-date-picker
							 | 
						|
								                      v-else-if="n.itemType === 'datepicker'"
							 | 
						|
								                      v-model.trim="form[n.columnName]"
							 | 
						|
								                      :disabled="disabled"
							 | 
						|
								                      class="resi-cell-input"
							 | 
						|
								                      type="date"
							 | 
						|
								                      size="small"
							 | 
						|
								                      clearable
							 | 
						|
								                      placeholder="选择日期"
							 | 
						|
								                      format="yyyy 年 MM 月 dd 日"
							 | 
						|
								                      value-format="yyyy-MM-dd">
							 | 
						|
								                    </el-date-picker>
							 | 
						|
								                    <el-date-picker
							 | 
						|
								                      v-else-if="n.itemType === 'daterange'"
							 | 
						|
								                      v-model.trim="form[n.columnName]"
							 | 
						|
								                      :disabled="disabled"
							 | 
						|
								                      type="daterange"
							 | 
						|
								                      align="right"
							 | 
						|
								                      unlink-panels
							 | 
						|
								                      value-format="yyyy-MM-dd"
							 | 
						|
								                      range-separator="至"
							 | 
						|
								                      start-placeholder="开始日期"
							 | 
						|
								                      end-placeholder="结束日期"
							 | 
						|
								                      >
							 | 
						|
								                    </el-date-picker>
							 | 
						|
								                    <el-time-picker
							 | 
						|
								                      v-else-if="n.itemType === 'timepicker'"
							 | 
						|
								                      v-model.trim="form[n.columnName]"
							 | 
						|
								                      :disabled="disabled"
							 | 
						|
								                      placeholder="任意时间点">
							 | 
						|
								                    </el-time-picker>
							 | 
						|
								                    <el-time-picker
							 | 
						|
								                      v-else-if="n.itemType === 'timerange'"
							 | 
						|
								                      v-model.trim="form[n.columnName]"
							 | 
						|
								                      :disabled="disabled"
							 | 
						|
								                      is-range
							 | 
						|
								                      range-separator="至"
							 | 
						|
								                      start-placeholder="开始时间"
							 | 
						|
								                      end-placeholder="结束时间"
							 | 
						|
								                      placeholder="选择时间范围">
							 | 
						|
								                    </el-time-picker>
							 | 
						|
								                    <el-select v-else-if="n.itemType === 'select'" v-model.trim="form[n.columnName]"
							 | 
						|
								                    :multiple="n.multiSelect"
							 | 
						|
								                    :disabled="disabled"
							 | 
						|
								                    placeholder="请选择" size="small" clearable class="resi-cell-select">
							 | 
						|
								                      <el-option
							 | 
						|
								                        v-for="item in n.options || options"
							 | 
						|
								                        :key="item.value"
							 | 
						|
								                        :label="item.label"
							 | 
						|
								                        :value="item.value">
							 | 
						|
								                      </el-option>
							 | 
						|
								                    </el-select>
							 | 
						|
								                    <!-- <el-cascader
							 | 
						|
								                      :options="options"
							 | 
						|
								                      :props="{ checkStrictly: true }"
							 | 
						|
								                      clearable></el-cascader> -->
							 | 
						|
								                    <el-cascader
							 | 
						|
								                      v-else-if="n.itemType === 'cascader'"
							 | 
						|
								                      v-model.trim="form[n.columnName]"
							 | 
						|
								                      :options="n.options"
							 | 
						|
								                      :disabled="disabled"
							 | 
						|
								                      :props="{ emitPath: false }"
							 | 
						|
								                      clearable
							 | 
						|
								                      size="small"
							 | 
						|
								                      class="resi-cell-select">
							 | 
						|
								                    </el-cascader>
							 | 
						|
								                    <template v-else-if="n.itemType === 'radio'">
							 | 
						|
								                      <el-radio v-for="ns in n.options" :key="ns.value" v-model.trim="form[n.columnName]" :disabled="disabled"
							 | 
						|
								                      :label="ns.value">
							 | 
						|
								                        {{ ns.label }}
							 | 
						|
								                      </el-radio>
							 | 
						|
								                      <!-- <el-radio v-model.trim="form[n.columnName]" label="1">备选项</el-radio> -->
							 | 
						|
								                    </template>
							 | 
						|
								                    <template v-else-if="n.itemType === 'checkbox'">
							 | 
						|
								                      <el-checkbox-group v-model.trim="form[n.columnName]">
							 | 
						|
								                        <el-checkbox v-for="ns in n.options" :key="ns.value" :label="ns.value" :disabled="disabled">{{ns.label}}</el-checkbox>
							 | 
						|
								                        <!-- <el-checkbox label="n.la"></el-checkbox> -->
							 | 
						|
								                      </el-checkbox-group>
							 | 
						|
								                    </template>
							 | 
						|
								                  </div>
							 | 
						|
								                <!-- </div> -->
							 | 
						|
								              </el-form-item>
							 | 
						|
								            </el-col>
							 | 
						|
								        </el-row>
							 | 
						|
								      </template>
							 | 
						|
								    </el-form>
							 | 
						|
								  </div>
							 | 
						|
								</template>
							 | 
						|
								
							 | 
						|
								<script>
							 | 
						|
								import { isCard, isMobile } from '@/utils/validate'
							 | 
						|
								
							 | 
						|
								export default {
							 | 
						|
								  name: 'editForm',
							 | 
						|
								  props: {
							 | 
						|
								    fixed: {
							 | 
						|
								      type: Boolean,
							 | 
						|
								      default: false
							 | 
						|
								    },
							 | 
						|
								    labelWidth: {
							 | 
						|
								      type: String,
							 | 
						|
								      default: '100px'
							 | 
						|
								    },
							 | 
						|
								    formId: {
							 | 
						|
								      type: String,
							 | 
						|
								      default: 'resiForm'
							 | 
						|
								    },
							 | 
						|
								    agencyId: {
							 | 
						|
								      type: String,
							 | 
						|
								      default: ''
							 | 
						|
								    },
							 | 
						|
								    formList: {
							 | 
						|
								      type: Array,
							 | 
						|
								      default: function () {
							 | 
						|
								        return []
							 | 
						|
								      }
							 | 
						|
								    },
							 | 
						|
								    formInfo: {
							 | 
						|
								      type: Object,
							 | 
						|
								      default: function () {
							 | 
						|
								        return {}
							 | 
						|
								      }
							 | 
						|
								    },
							 | 
						|
								    mutiList: {
							 | 
						|
								      type: Array,
							 | 
						|
								      default: function () {
							 | 
						|
								        return []
							 | 
						|
								      }
							 | 
						|
								    },
							 | 
						|
								    // 渲染一行几列
							 | 
						|
								    columns: {
							 | 
						|
								      type: Number,
							 | 
						|
								      default: 4
							 | 
						|
								    },
							 | 
						|
								    supportAdd: { // 单表多条数据
							 | 
						|
								      type: Boolean,
							 | 
						|
								      default: false
							 | 
						|
								    },
							 | 
						|
								    disabled: { // 单表多条数据
							 | 
						|
								      type: Boolean,
							 | 
						|
								      default: false
							 | 
						|
								    }
							 | 
						|
								  },
							 | 
						|
								  data () {
							 | 
						|
								    // let form = {}
							 | 
						|
								    // let rules = {}
							 | 
						|
								    let checkMObile = (rule, value, callback) => {
							 | 
						|
								      if (value === '') {
							 | 
						|
								        callback(new Error('请输入手机号'))
							 | 
						|
								      } else {
							 | 
						|
								        if (!isMobile(value)) {
							 | 
						|
								          callback(new Error('手机号格式不正确'))
							 | 
						|
								        }
							 | 
						|
								        callback()
							 | 
						|
								      }
							 | 
						|
								    }
							 | 
						|
								    let checkIdCard = (rule, value, callback) => {
							 | 
						|
								      if (value === '') {
							 | 
						|
								        callback(new Error('请输入身份证'))
							 | 
						|
								      } else {
							 | 
						|
								        if (!isCard(value)) {
							 | 
						|
								          callback(new Error('身份证号格式不正确'))
							 | 
						|
								        }
							 | 
						|
								        callback()
							 | 
						|
								      }
							 | 
						|
								    }
							 | 
						|
								    let initForm = (obj, arr) => {
							 | 
						|
								      let _form = {}
							 | 
						|
								      // console.log('formInfo', obj)
							 | 
						|
								      if (Object.keys(obj).length > 0) {
							 | 
						|
								        _form = { ...obj }
							 | 
						|
								        // return _form
							 | 
						|
								      }
							 | 
						|
								      const itemTypes = ['cascader', 'daterange', 'timerange']
							 | 
						|
								      arr.forEach(item => {
							 | 
						|
								        if (item.multiSelect || itemTypes.includes(item.itemType)) {
							 | 
						|
								          if (item.columnValue && item.columnValue.indexOf(',') > -1) _form[item.columnName] = item.columnValue.split(',')
							 | 
						|
								          else _form[item.columnName] = (item.columnValue && [item.columnValue]) || []
							 | 
						|
								        } else _form[item.columnName] = item.columnValue || ''
							 | 
						|
								      })
							 | 
						|
								      // console.log('_from0000---', arr)
							 | 
						|
								      return _form
							 | 
						|
								    }
							 | 
						|
								    let initRules = (arr) => {
							 | 
						|
								      let rules = {}
							 | 
						|
								      arr.forEach(item => {
							 | 
						|
								        if (item.required) {
							 | 
						|
								          if (item.validType === 'mobile') {
							 | 
						|
								            rules[item.columnName] = [
							 | 
						|
								              { required: true, validator: checkMObile, trigger: 'blur' }
							 | 
						|
								            ]
							 | 
						|
								          } else if (item.validType === 'id_card') {
							 | 
						|
								            rules[item.columnName] = [
							 | 
						|
								              { required: true, validator: checkIdCard, trigger: 'blur' }
							 | 
						|
								            ]
							 | 
						|
								          } else {
							 | 
						|
								            rules[item.columnName] = [
							 | 
						|
								              { required: true, message: `请输入${item.label}`, trigger: 'blur' }
							 | 
						|
								            ]
							 | 
						|
								          }
							 | 
						|
								        }
							 | 
						|
								      })
							 | 
						|
								      return rules
							 | 
						|
								    }
							 | 
						|
								    let form = initForm(this.formInfo, this.formList)
							 | 
						|
								    let rules = initRules(this.formList)
							 | 
						|
								    let tempFormList = [ ...this.formList ]
							 | 
						|
								    let constForm = {
							 | 
						|
								      ...form
							 | 
						|
								    }
							 | 
						|
								    return {
							 | 
						|
								      openSearch: false,
							 | 
						|
								      fixedForm: {
							 | 
						|
								        GRID_ID: '',
							 | 
						|
								        VILLAGE_ID: '',
							 | 
						|
								        BUILD_ID: '',
							 | 
						|
								        UNIT_ID: '',
							 | 
						|
								        HOME_ID: ''
							 | 
						|
								      },
							 | 
						|
								      fixedList: {},
							 | 
						|
								      form: {
							 | 
						|
								        ...form
							 | 
						|
								      },
							 | 
						|
								      constForm,
							 | 
						|
								      tempFormList,
							 | 
						|
								      addCount: 0,
							 | 
						|
								      addList: [],
							 | 
						|
								      rulesForm: {
							 | 
						|
								        ...rules,
							 | 
						|
								        VILLAGE_ID: [{ required: true, message: `请选择小区`, trigger: 'blur' }],
							 | 
						|
								        GRID_ID: [{ required: true, message: `请选择网格`, trigger: 'blur' }],
							 | 
						|
								        BUILD_ID: [{ required: true, message: `请选择楼号`, trigger: 'blur' }],
							 | 
						|
								        UNIT_ID: [{ required: true, message: `请选择单元`, trigger: 'blur' }],
							 | 
						|
								        HOME_ID: [{ required: true, message: `请选择房号`, trigger: 'blur' }]
							 | 
						|
								      },
							 | 
						|
								      // rules,
							 | 
						|
								      value: '',
							 | 
						|
								      optionsV: [],
							 | 
						|
								      optionsB: [],
							 | 
						|
								      optionsH: [],
							 | 
						|
								      optionsG: [],
							 | 
						|
								      optionsD: [],
							 | 
						|
								      pickerOptions: {
							 | 
						|
								        shortcuts: [{
							 | 
						|
								          text: '最近一周',
							 | 
						|
								          onClick (picker) {
							 | 
						|
								            const end = new Date()
							 | 
						|
								            const start = new Date()
							 | 
						|
								            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
							 | 
						|
								            picker.$emit('pick', [start, end])
							 | 
						|
								          }
							 | 
						|
								        }, {
							 | 
						|
								          text: '最近一个月',
							 | 
						|
								          onClick (picker) {
							 | 
						|
								            const end = new Date()
							 | 
						|
								            const start = new Date()
							 | 
						|
								            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
							 | 
						|
								            picker.$emit('pick', [start, end])
							 | 
						|
								          }
							 | 
						|
								        }, {
							 | 
						|
								          text: '最近三个月',
							 | 
						|
								          onClick (picker) {
							 | 
						|
								            const end = new Date()
							 | 
						|
								            const start = new Date()
							 | 
						|
								            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
							 | 
						|
								            picker.$emit('pick', [start, end])
							 | 
						|
								          }
							 | 
						|
								        }]
							 | 
						|
								      }
							 | 
						|
								    }
							 | 
						|
								  },
							 | 
						|
								  computed: {
							 | 
						|
								    sliceList () {
							 | 
						|
								      return function (data, count) {
							 | 
						|
								        if (data !== undefined) {
							 | 
						|
								          let index = 0
							 | 
						|
								          let arrTemp = []
							 | 
						|
								          let arrTemp1 = []
							 | 
						|
								          let arr1 = []
							 | 
						|
								          let arr2 = []
							 | 
						|
								          let _i = 0
							 | 
						|
								          let _index = 0
							 | 
						|
								          for (let i = 0; i < data.length; i++) {
							 | 
						|
								            if (data[i].itemType === 'divider' || data[i].itemType === 'checkbox') {
							 | 
						|
								              _i = i + 1
							 | 
						|
								            }
							 | 
						|
								          }
							 | 
						|
								          arr1 = data.slice(0, _i)
							 | 
						|
								          arr2 = data.slice(_i, data.length)
							 | 
						|
								          for (let i = 0; i < arr1.length; i++) {
							 | 
						|
								            index = parseInt(i / count)
							 | 
						|
								            if (arrTemp.length <= index) {
							 | 
						|
								              arrTemp.push([])
							 | 
						|
								            }
							 | 
						|
								            arrTemp[index].push(arr1[i])
							 | 
						|
								          }
							 | 
						|
								          for (let i = 0; i < arr2.length; i++) {
							 | 
						|
								            _index = parseInt(i / count)
							 | 
						|
								            if (arrTemp1.length <= _index) {
							 | 
						|
								              arrTemp1.push([])
							 | 
						|
								            }
							 | 
						|
								            arrTemp1[_index].push(arr2[i])
							 | 
						|
								          }
							 | 
						|
								          arrTemp = arrTemp.concat(arrTemp1)
							 | 
						|
								          return arrTemp
							 | 
						|
								        }
							 | 
						|
								      }
							 | 
						|
								    }
							 | 
						|
								  },
							 | 
						|
								  watch: {
							 | 
						|
								    form: {
							 | 
						|
								      handler (val, val2) {
							 | 
						|
								        console.log('valpppp----', val, val2)
							 | 
						|
								        for (let n in val) {
							 | 
						|
								          if (this.constForm[n] !== val[n]) {
							 | 
						|
								            this.handleChangeForm(n)
							 | 
						|
								            console.log('nnnnnn', n)
							 | 
						|
								            this.handleChangeGroup(n, val[n])
							 | 
						|
								          }
							 | 
						|
								        }
							 | 
						|
								        this.constForm = { ...val }
							 | 
						|
								      },
							 | 
						|
								      deep: true
							 | 
						|
								    }
							 | 
						|
								  },
							 | 
						|
								  created () {
							 | 
						|
								    this.initForm()
							 | 
						|
								    console.log('formInfo---gggreg', this.rulesForm)
							 | 
						|
								    if (this.supportAdd) {
							 | 
						|
								      this.addList = [...this.mutiList]
							 | 
						|
								      // console.log('addList----111', this.addList)
							 | 
						|
								    }
							 | 
						|
								    if (this.fixed) {
							 | 
						|
								      this.getGridList()
							 | 
						|
								      this.getValiheList()
							 | 
						|
								      this.getBuildList()
							 | 
						|
								      this.getUniList()
							 | 
						|
								      this.getHouseList()
							 | 
						|
								    }
							 | 
						|
								  },
							 | 
						|
								  methods: {
							 | 
						|
								    initForm () {
							 | 
						|
								      this.formList.forEach(async item => {
							 | 
						|
								        if (item.optionSourceType === 'remote') {
							 | 
						|
								          await this.getOptionsLists(item.optionSourceValue).then(res => {
							 | 
						|
								            item.options = this.getTreeData(res)
							 | 
						|
								          })
							 | 
						|
								        }
							 | 
						|
								      })
							 | 
						|
								    },
							 | 
						|
								    getTreeData(data){
							 | 
						|
								      if (!Array.isArray(data)) return []
							 | 
						|
								      let arr = data.map(item => {
							 | 
						|
								        let _item = {}
							 | 
						|
								        if (item.children) {
							 | 
						|
								          if (item.children.length === 0) _item = { ...item, children: undefined }
							 | 
						|
								          else _item = { ...item, children: this.getTreeData(item.children)}
							 | 
						|
								        } else {
							 | 
						|
								          _item = { ...item }
							 | 
						|
								        }
							 | 
						|
								        return _item
							 | 
						|
								      })
							 | 
						|
								      return arr
							 | 
						|
								    },
							 | 
						|
								    handleOpenSearch () {
							 | 
						|
								      this.openSearch = !this.openSearch
							 | 
						|
								    },
							 | 
						|
								    handleAddRow () {
							 | 
						|
								      this.addList.push({
							 | 
						|
								        row: this.addList.length,
							 | 
						|
								        itemList: this.formList
							 | 
						|
								      })
							 | 
						|
								    },
							 | 
						|
								    // 监听固定四列
							 | 
						|
								    handleFiexedForm (val) {
							 | 
						|
								      let item = {
							 | 
						|
								        [val]: this.fixedForm[val]
							 | 
						|
								      }
							 | 
						|
								      this.fixedList.push(item)
							 | 
						|
								      this.$set(this.fixedList, val, this.fixedForm[val])
							 | 
						|
								    },
							 | 
						|
								    // 监听分组
							 | 
						|
								    handleChangeGroup (columnName, value) {
							 | 
						|
								      this.tempFormList.forEach(item => {
							 | 
						|
								        if (item.columnName === columnName && item.itemType === 'radio' && item.childGroup) {
							 | 
						|
								          console.log('columnName', item.columnName, columnName)
							 | 
						|
								          this.$emit('changegroup', { value, childGroup: item.childGroup })
							 | 
						|
								        }
							 | 
						|
								      })
							 | 
						|
								    },
							 | 
						|
								    // 监听基础form
							 | 
						|
								    handleChangeForm (val) {
							 | 
						|
								      if (this.fixed) {
							 | 
						|
								        for (let n in this.fixedForm) {
							 | 
						|
								          if (n === val) {
							 | 
						|
								            this.$set(this.fixedList, val, this.form[val])
							 | 
						|
								          }
							 | 
						|
								        }
							 | 
						|
								      }
							 | 
						|
								      this.tempFormList.forEach(item => {
							 | 
						|
								        if (item.columnName === val) item.isChange = true
							 | 
						|
								      })
							 | 
						|
								    },
							 | 
						|
								    handleChange () {
							 | 
						|
								      // this.handleForm()
							 | 
						|
								    },
							 | 
						|
								    handleChangeGrid (val) {
							 | 
						|
								      console.log('val', val)
							 | 
						|
								      this.form.VILLAGE_ID = ''
							 | 
						|
								      this.form.BUILD_ID = ''
							 | 
						|
								      this.form.UNIT_ID = ''
							 | 
						|
								      this.form.HOME_ID = ''
							 | 
						|
								      this.getValiheList()
							 | 
						|
								      this.getBuildList()
							 | 
						|
								      this.getUniList()
							 | 
						|
								      this.getHouseList()
							 | 
						|
								    },
							 | 
						|
								    handleChangeV (val) {
							 | 
						|
								      console.log('val', val)
							 | 
						|
								      this.form.BUILD_ID = ''
							 | 
						|
								      this.form.UNIT_ID = ''
							 | 
						|
								      this.form.HOME_ID = ''
							 | 
						|
								      this.getBuildList()
							 | 
						|
								      this.getUniList()
							 | 
						|
								      this.getHouseList()
							 | 
						|
								    },
							 | 
						|
								    handleChangeB (val) {
							 | 
						|
								      console.log('val', val)
							 | 
						|
								      this.form.UNIT_ID = ''
							 | 
						|
								      this.form.HOME_ID = ''
							 | 
						|
								      this.getUniList()
							 | 
						|
								      this.getHouseList()
							 | 
						|
								    },
							 | 
						|
								    handleChangeD () {
							 | 
						|
								      this.form.HOME_ID = ''
							 | 
						|
								      this.getHouseList()
							 | 
						|
								    },
							 | 
						|
								    // 为了实现根据房屋类型改版是否租户的需求
							 | 
						|
								    handleChangeH(val){
							 | 
						|
								      let item = this.optionsH.find(item => item.value === val);
							 | 
						|
								      if(item && item.type == '1'){
							 | 
						|
								        this.form.IS_TENANT = '1'
							 | 
						|
								        console.log('item-----', item)
							 | 
						|
								      } else this.form.IS_TENANT = '0'
							 | 
						|
								    },
							 | 
						|
								    handlerMuscForm () {
							 | 
						|
								      let arr = []
							 | 
						|
								      this.addList.forEach(item => {
							 | 
						|
								        // console.log('handlerMuscForm----000', this.$refs['baseForms' + item.row || item][0].handleForm())
							 | 
						|
								        arr.push([ ...this.$refs['baseForms' + item.row][0].handleForm() ])
							 | 
						|
								      })
							 | 
						|
								      if (arr.length === 0) return arr
							 | 
						|
								      let arr2 = arr.reduce(function (a, b) { return a.concat(b) })
							 | 
						|
								      let hash = {}
							 | 
						|
								      let i = 0
							 | 
						|
								      let res = []
							 | 
						|
								      // let finalArr = []
							 | 
						|
								      arr2.forEach((item) => {
							 | 
						|
								        let name = item.tableName
							 | 
						|
								        if (hash[name]) {
							 | 
						|
								          res[hash[name] - 1].list.push(...item.list)
							 | 
						|
								        } else {
							 | 
						|
								          hash[name] = ++i
							 | 
						|
								          res.push({
							 | 
						|
								            list: [...item.list],
							 | 
						|
								            supportAdd: this.supportAdd,
							 | 
						|
								            tableName: name
							 | 
						|
								          })
							 | 
						|
								        }
							 | 
						|
								      })
							 | 
						|
								      return res
							 | 
						|
								    },
							 | 
						|
								    resetForm () {
							 | 
						|
								      this.$refs[this.formId].resetFields()
							 | 
						|
								    },
							 | 
						|
								    handleForm () {
							 | 
						|
								      let newForm = []
							 | 
						|
								      this.$refs[this.formId].validate((valid) => {
							 | 
						|
								        if (valid) {
							 | 
						|
								          var hash = {}
							 | 
						|
								          var i = 0
							 | 
						|
								          var res = []
							 | 
						|
								          let ID = this.tempFormList[0].ID
							 | 
						|
								          this.tempFormList.forEach(function (item) {
							 | 
						|
								            var name = item.tableName
							 | 
						|
								            hash[name] ? res[hash[name] - 1].list.push(item) : hash[name] = ++i && res.push({
							 | 
						|
								              list: [item],
							 | 
						|
								              ID: item.ID,
							 | 
						|
								              tableName: name
							 | 
						|
								            })
							 | 
						|
								          })
							 | 
						|
								          // console.log('resssssss', res)
							 | 
						|
								          const itemTypes = ['cascader', 'daterange', 'timerange']
							 | 
						|
								          res.forEach(item => {
							 | 
						|
								            let _form = {}
							 | 
						|
								            item.list.filter(n => n.isChange).forEach(r => {
							 | 
						|
								              _form[r.columnName] = r.multiSelect || itemTypes.includes(r.itemType) ? this.form[r.columnName].toString() : this.form[r.columnName]
							 | 
						|
								              if (r.ID) {
							 | 
						|
								                _form.ID = r.ID
							 | 
						|
								              }
							 | 
						|
								              // return _form
							 | 
						|
								            })
							 | 
						|
								            if (this.fixed) {
							 | 
						|
								              for (let n in this.fixedList) {
							 | 
						|
								                _form[n] = this.fixedList[n]
							 | 
						|
								              }
							 | 
						|
								              if (Object.keys(_form).length > 0) {
							 | 
						|
								                if (!_form.AGENCY_ID) _form.AGENCY_ID = this.agencyId
							 | 
						|
								              }
							 | 
						|
								              if (!_form.ID) _form.ID = ID
							 | 
						|
								            }
							 | 
						|
								            console.log('objeckeyssss', Object.keys(_form), _form)
							 | 
						|
								            newForm.push({
							 | 
						|
								              tableName: item.tableName,
							 | 
						|
								              supportAdd: this.supportAdd,
							 | 
						|
								              ID: item.ID,
							 | 
						|
								              list: Object.keys(_form).length > 0 ? [{ ..._form }] : []
							 | 
						|
								            })
							 | 
						|
								          })
							 | 
						|
								          console.log('newFormhhhhh', newForm)
							 | 
						|
								          return newForm
							 | 
						|
								        } else {
							 | 
						|
								          console.log('error submit!!')
							 | 
						|
								          return false
							 | 
						|
								        }
							 | 
						|
								      })
							 | 
						|
								      if (this.supportAdd) newForm = this.handlerMuscForm()
							 | 
						|
								      return newForm
							 | 
						|
								    },
							 | 
						|
								    async getOptionsLists (url) {
							 | 
						|
								      let options = []
							 | 
						|
								      // console.log('getOptionsList----', url)
							 | 
						|
								      await this.$http
							 | 
						|
								        .post(url, { formCode: 'resi_base_info' })
							 | 
						|
								        .then(({ data: res }) => {
							 | 
						|
								          if (res.code !== 0) {
							 | 
						|
								            return this.$message.error(res.msg)
							 | 
						|
								          } else {
							 | 
						|
								            options = res.data
							 | 
						|
								          }
							 | 
						|
								        })
							 | 
						|
								        .catch(() => {
							 | 
						|
								          return this.$message.error('网络错误')
							 | 
						|
								        })
							 | 
						|
								      return options
							 | 
						|
								    },
							 | 
						|
								    getGridList () {
							 | 
						|
								      const { user } = this.$store.state
							 | 
						|
								      let purpose = 'query'
							 | 
						|
								      if (this.disabled) purpose = 'query'
							 | 
						|
								      else purpose = 'addorupdate'
							 | 
						|
								      this.$http
							 | 
						|
								        .post('/gov/org/customergrid/gridoption', { agencyId: this.agencyId, purpose })
							 | 
						|
								        .then(({ data: res }) => {
							 | 
						|
								          if (res.code !== 0) {
							 | 
						|
								            return this.$message.error(res.msg)
							 | 
						|
								          } else {
							 | 
						|
								            console.log('获取查询详情成功', res.data)
							 | 
						|
								            this.optionsG = res.data
							 | 
						|
								          }
							 | 
						|
								        })
							 | 
						|
								        .catch(() => {
							 | 
						|
								          return this.$message.error('网络错误')
							 | 
						|
								        })
							 | 
						|
								    },
							 | 
						|
								    getValiheList () {
							 | 
						|
								      const { user } = this.$store.state
							 | 
						|
								      this.$http
							 | 
						|
								        .post('/gov/org/icneighborhood/neighborhoodoption', { gridId: this.form.GRID_ID, agencyId: this.agencyId })
							 | 
						|
								        .then(({ data: res }) => {
							 | 
						|
								          if (res.code !== 0) {
							 | 
						|
								            return this.$message.error(res.msg)
							 | 
						|
								          } else {
							 | 
						|
								            console.log('获取查询详情成功', res.data)
							 | 
						|
								            this.optionsV = res.data
							 | 
						|
								          }
							 | 
						|
								        })
							 | 
						|
								        .catch(() => {
							 | 
						|
								          return this.$message.error('网络错误')
							 | 
						|
								        })
							 | 
						|
								    },
							 | 
						|
								    getBuildList () {
							 | 
						|
								      this.$http
							 | 
						|
								        .post('/gov/org/icbuilding/buildingoption', { neighborHoodId: this.form.VILLAGE_ID })
							 | 
						|
								        .then(({ data: res }) => {
							 | 
						|
								          if (res.code !== 0) {
							 | 
						|
								            return this.$message.error(res.msg)
							 | 
						|
								          } else {
							 | 
						|
								            console.log('获取查询详情成功', res.data)
							 | 
						|
								            this.optionsB = res.data
							 | 
						|
								          }
							 | 
						|
								        })
							 | 
						|
								        .catch(() => {
							 | 
						|
								          return this.$message.error('网络错误')
							 | 
						|
								        })
							 | 
						|
								    },
							 | 
						|
								    getUniList () {
							 | 
						|
								      this.$http
							 | 
						|
								        .post('/gov/org/icbuildingunit/unitoption', { buildingId: this.form.BUILD_ID })
							 | 
						|
								        .then(({ data: res }) => {
							 | 
						|
								          if (res.code !== 0) {
							 | 
						|
								            return this.$message.error(res.msg)
							 | 
						|
								          } else {
							 | 
						|
								            console.log('获取查询详情成功', res.data)
							 | 
						|
								            this.optionsD = res.data
							 | 
						|
								          }
							 | 
						|
								        })
							 | 
						|
								        .catch(() => {
							 | 
						|
								          return this.$message.error('网络错误')
							 | 
						|
								        })
							 | 
						|
								    },
							 | 
						|
								    getHouseList () {
							 | 
						|
								      this.$http
							 | 
						|
								        .post('/gov/org/ichouse/houseoption', { unitId: this.form.UNIT_ID })
							 | 
						|
								        .then(({ data: res }) => {
							 | 
						|
								          if (res.code !== 0) {
							 | 
						|
								            return this.$message.error(res.msg)
							 | 
						|
								          } else {
							 | 
						|
								            console.log('获取查询详情成功', res.data)
							 | 
						|
								            this.optionsH = res.data
							 | 
						|
								          }
							 | 
						|
								        })
							 | 
						|
								        .catch(() => {
							 | 
						|
								          return this.$message.error('网络错误')
							 | 
						|
								        })
							 | 
						|
								    }
							 | 
						|
								  }
							 | 
						|
								}
							 | 
						|
								</script>
							 | 
						|
								
							 | 
						|
								<style lang="scss" scoped>
							 | 
						|
								.resi-form {
							 | 
						|
								  :deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
							 | 
						|
								    width: 100% !important;
							 | 
						|
								  }
							 | 
						|
								}
							 | 
						|
								.resi-cell-value .resi-cell-input {
							 | 
						|
								    width: 190px;
							 | 
						|
								}
							 | 
						|
								
							 | 
						|
								</style>
							 | 
						|
								<style lang="scss" scoped>
							 | 
						|
								
							 | 
						|
								.resi-form .resi-row {
							 | 
						|
								  margin-bottom: 0;
							 | 
						|
								}
							 | 
						|
								
							 | 
						|
								// .resi-form .resi-cell {
							 | 
						|
								//   display: flex;
							 | 
						|
								//   align-items: center;
							 | 
						|
								  // .resi-cell-label {
							 | 
						|
								  //   width: 70px;
							 | 
						|
								  //   box-sizing: border-box;
							 | 
						|
								  //   margin-right: 15px;
							 | 
						|
								  //   text-align: right;
							 | 
						|
								  // }
							 | 
						|
								  // .resi-cell-value-radio {
							 | 
						|
								  //   display: flex;
							 | 
						|
								  //   align-items: center;
							 | 
						|
								  //   min-height: 36px;
							 | 
						|
								  // }
							 | 
						|
								  //  .resi-cell-value .resi-cell-input {
							 | 
						|
								  //   width: 180px;
							 | 
						|
								  // }
							 | 
						|
								
							 | 
						|
								  .resi-cell-value .resi-cell-textarea {
							 | 
						|
								    width: 300px;
							 | 
						|
								  }
							 | 
						|
								  .resi-cell-col {
							 | 
						|
								    display: flex;
							 | 
						|
								    .el-form-item {
							 | 
						|
								      margin-right: 10px;
							 | 
						|
								    }
							 | 
						|
								  }
							 | 
						|
								  .resi-cell-select {
							 | 
						|
								    width: 190px;
							 | 
						|
								    box-sizing: border-box;
							 | 
						|
								    margin-right: 10px;
							 | 
						|
								    &-middle {
							 | 
						|
								      width: 130px;
							 | 
						|
								    }
							 | 
						|
								    &-small {
							 | 
						|
								      width: 88px;
							 | 
						|
								    }
							 | 
						|
								  }
							 | 
						|
								  .resi-cell-select:last-child {
							 | 
						|
								    margin-right: 0;
							 | 
						|
								  }
							 | 
						|
								// }
							 | 
						|
								</style>
							 | 
						|
								
							 |