2 changed files with 826 additions and 0 deletions
			
			
		@ -0,0 +1,816 @@ | 
				
			|||
<template> | 
				
			|||
  <div :id="formId" class="resi-container"> | 
				
			|||
    <el-form :ref="formId" class="resi-form" :model="form" :rules="rules" :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="form.GRID_ID" label="所属网格" required> | 
				
			|||
              <!-- <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" | 
				
			|||
                  > | 
				
			|||
                    <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 :prop="form.VILLAGE_ID" label="所属小区" required> | 
				
			|||
                <div class="resi-cell-value"> | 
				
			|||
                  <el-select v-model.trim="form.VILLAGE_ID" :disabled="disabled" placeholder="请选择小区" size="small" | 
				
			|||
                  clearable class="resi-cell-select" | 
				
			|||
                  > | 
				
			|||
                    <el-option | 
				
			|||
                      v-for="item in optionsV" | 
				
			|||
                      :key="item.value" | 
				
			|||
                      :label="item.label" | 
				
			|||
                      :value="item.value"> | 
				
			|||
                    </el-option> | 
				
			|||
                  </el-select> | 
				
			|||
                  <el-select v-model.trim="form.BUILD_ID" :disabled="disabled" placeholder="请选择楼号" size="small" | 
				
			|||
                  clearable 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-select v-model.trim="form.UNIT_ID" :disabled="disabled" placeholder="请选择单元" size="small" | 
				
			|||
                  clearable 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-select v-model.trim="form.HOME_ID" :disabled="disabled" placeholder="请选择房号" size="small" | 
				
			|||
                  clearable class="resi-cell-select resi-cell-select-middle" | 
				
			|||
                  > | 
				
			|||
                    <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-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" :required="Boolean(n.required)"> | 
				
			|||
                <!-- <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" | 
				
			|||
                      :props="{ checkStrictly: true }" | 
				
			|||
                      :disabled="disabled" | 
				
			|||
                      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' | 
				
			|||
    }, | 
				
			|||
    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] = [ | 
				
			|||
              { validator: checkMObile, trigger: 'blur' } | 
				
			|||
            ] | 
				
			|||
          } else if (item.validType === 'id_card') { | 
				
			|||
            rules[item.columnName] = [ | 
				
			|||
              { 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: [], | 
				
			|||
      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---ggg', this.form) | 
				
			|||
    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() | 
				
			|||
    }, | 
				
			|||
    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.$store.state.user.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 | 
				
			|||
      this.$http | 
				
			|||
        .post('/gov/org/customergrid/gridoption', { agencyId: user.agencyId }) | 
				
			|||
        .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: user.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 { | 
				
			|||
    max-width: 180px; | 
				
			|||
} | 
				
			|||
 | 
				
			|||
</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-select { | 
				
			|||
    width: 180px; | 
				
			|||
    box-sizing: border-box; | 
				
			|||
    margin-right: 10px; | 
				
			|||
    &-middle { | 
				
			|||
      width: 130px; | 
				
			|||
    } | 
				
			|||
    &-small { | 
				
			|||
      width: 88px; | 
				
			|||
    } | 
				
			|||
  } | 
				
			|||
  .resi-cell-select:last-child { | 
				
			|||
    margin-right: 0; | 
				
			|||
  } | 
				
			|||
// } | 
				
			|||
</style> | 
				
			|||
					Loading…
					
					
				
		Reference in new issue