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.
		
		
		
		
		
			
		
			
				
					
					
						
							819 lines
						
					
					
						
							27 KiB
						
					
					
				
			
		
		
		
			
			
			
				
					
				
				
					
				
			
		
		
	
	
							819 lines
						
					
					
						
							27 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> | |
|         <resi-form v-for="(item, index) in addList" :key="index"  :ref="'baseForms' + index" :columns="3" :form-list="formList" :form-id="'baseForms' + item" /> | |
|       </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" 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" @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 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 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 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> | |
|                     </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" placeholder="请选择楼号" size="small" | |
|                   clearable class="resi-cell-select" @change="handleChangeB" | |
|                   > | |
|                     <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" placeholder="请选择" size="small" | |
|                   clearable class="resi-cell-select resi-cell-select-small" | |
|                   > | |
|                     <el-option | |
|                       v-for="item in optionsH" | |
|                       :key="item.value" | |
|                       :label="item.label" | |
|                       :value="item.value"> | |
|                     </el-option> | |
|                   </el-select> | |
|                   <el-select v-model.trim="form.HOME_ID" placeholder="请选择" size="small" | |
|                   clearable class="resi-cell-select-small" | |
|                   > | |
|                     <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]" | |
|                         class="resi-cell-input" | |
|                         size="small" | |
|                         clearable | |
|                         placeholder="请输入内容" | |
|                         > | |
|                       </el-input> | |
|                       <el-input | |
|                         v-else | |
|                         v-model.trim="form[n.columnName]" | |
|                         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]" | |
|                       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]" | |
|                       type="daterange" | |
|                       align="right" | |
|                       unlink-panels | |
|                       range-separator="至" | |
|                       start-placeholder="开始日期" | |
|                       end-placeholder="结束日期" | |
|                       value-format="yyyy-MM-dd" | |
|                       > | |
|                     </el-date-picker> | |
|                     <el-time-picker | |
|                       v-else-if="n.itemType === 'timepicker'" | |
|                       v-model.trim="form[n.columnName]" | |
|                       placeholder="任意时间点"> | |
|                     </el-time-picker> | |
|                     <el-time-picker | |
|                       v-else-if="n.itemType === 'timerange'" | |
|                       v-model.trim="form[n.columnName]" | |
|                       is-range | |
|                       class="resi-cell-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" | |
|                     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 }" | |
|                       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]" | |
|                       :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">{{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: 'resiForm', | |
|   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 {} | |
|       } | |
|     }, | |
|     // 渲染一行几列 | |
|     columns: { | |
|       type: Number, | |
|       default: 4 | |
|     }, | |
|     supportAdd: { // 单表多条数据 | |
|       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 | |
|       } | |
|       arr.forEach(item => { | |
|         if (item.multiSelect) _form[item.columnName] = [] | |
|         else _form[item.columnName] = '' | |
| 
 | |
|         // if (item.optionSourceType === 'remote') { | |
|         //   this.getOptionsLists(item.optionSourceValue).then(res => { | |
|         //     item.options = res | |
|         //   }) | |
|         // } | |
|       }) | |
|       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) | |
|     console.log('rulessss', rules) | |
|     let tempFormList = [ ...this.formList ] | |
|     let constForm = { | |
|       ...form, | |
|       GRID_ID: '', | |
|       VILLAGE_ID: '', | |
|       BUILD_ID: '', | |
|       UNIT_ID: '', | |
|       HOME_ID: '' | |
|     } | |
|     return { | |
|       openSearch: false, | |
|       fixedForm: { | |
|         GRID_ID: '', | |
|         VILLAGE_ID: '', | |
|         BUILD_ID: '', | |
|         UNIT_ID: '', | |
|         HOME_ID: '' | |
|       }, | |
|       fixedList: { | |
|         AGENCY_ID: this.$store.state.user.agencyId | |
|       }, | |
|       form: { | |
|         ...form, | |
|         GRID_ID: '', | |
|         VILLAGE_ID: '', | |
|         BUILD_ID: '', | |
|         UNIT_ID: '', | |
|         HOME_ID: '' | |
|       }, | |
|       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' }] | |
|       }, | |
|       value: '', | |
|       optionsV: [], | |
|       optionsB: [], | |
|       optionsH: [], | |
|       optionsD: [], | |
|       optionsG: [], | |
|       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.push(this.addCount++) | |
|     if (this.fixed) this.getGridList() | |
|   }, | |
|   methods: { | |
|     initForm () { | |
|       this.formList.forEach(async item => { | |
|         console.log('initform---item', item.label, item.optionSourceType) | |
|         // if (item.optionSourceType === 'remote') { | |
|         //   await this.getOptionsLists(item.optionSourceValue).then(res => { | |
|         //     item.options = res | |
|         //   }) | |
|         // } | |
|       }) | |
|     }, | |
|     handleOpenSearch () { | |
|       this.openSearch = !this.openSearch | |
|     }, | |
|     handleAddRow () { | |
|       this.addList.push(this.addCount++) | |
|     }, | |
|     // 监听固定四列 | |
|     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 => { | |
|         // console.log('columnName', item.columnName, columnName) | |
|         if (item.columnName === columnName && item.itemType === 'radio' && item.childGroup) { | |
|           console.log('columnName', item.columnName, columnName) | |
|           this.$emit('changegroup', { value, childGroup: item.childGroup }) | |
|         } | |
|       }) | |
|     }, | |
|     handleChangeGrid (val) { | |
|       console.log('val', val) | |
|       this.form.VILLAGE_ID = '' | |
|       this.form.BUILD_ID = '' | |
|       this.form.UNIT_ID = '' | |
|       this.form.HOME_ID = '' | |
|       this.getValiheList() | |
|       if (!val) { | |
|         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() | |
|     }, | |
|     // 监听基础form | |
|     handleChangeForm (val) { | |
|       if (this.fixed) { | |
|         // let item = {} | |
|         for (let n in this.fixedForm) { | |
|           if (n === val) { | |
|             // item = { | |
|             //   [val]: this.form[val] | |
|             // } | |
|             // this.fixedList.push(item) | |
|             this.$set(this.fixedList, val, this.form[val]) | |
|           } | |
|         } | |
|       } | |
|       console.log('fixedList----999', this.fixedList) | |
|       this.tempFormList.forEach(item => { | |
|         if (item.columnName === val) item.isChange = true | |
|       }) | |
|     }, | |
|     handlerMuscForm () { | |
|       let arr = [] | |
|       this.addList.forEach(item => { | |
|         // console.log('handlerMuscForm----000', this.$refs['baseForms' + item][0].handleForm()) | |
|         arr.push([ ...this.$refs['baseForms' + item][0].handleForm() ]) | |
|       }) | |
|       // console.log('handlerMuscForm----111', arr) | |
|       let arr2 = arr.reduce(function (a, b) { return a.concat(b) }) | |
|       // console.log('handlerMuscForm----222', arr2) | |
|       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) | |
|           // console.log('hash[name]---', hash[name], res, res[hash[name] - 1], item) | |
|         } else { | |
|           hash[name] = ++i | |
|           res.push({ | |
|             list: [...item.list], | |
|             supportAdd: this.supportAdd, | |
|             tableName: name | |
|           }) | |
|           // console.log('hash[name]0000---', hash[name], res) | |
|         } | |
|       }) | |
|       // console.log('handlerMuscForm----333', res) | |
|       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 = [] | |
|           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], | |
|               tableName: name | |
|             }) | |
|           }) | |
|           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] | |
|               // return _form | |
|             }) | |
|             if (this.fixed) { | |
|               for (let n in this.fixedList) { | |
|                 _form[n] = this.fixedList[n] | |
|               } | |
|             } | |
|             newForm.push({ | |
|               tableName: item.tableName, | |
|               supportAdd: this.supportAdd, | |
|               list: Object.keys(_form).length > 0 ? [{ ..._form }] : [] | |
|             }) | |
|           }) | |
|           return newForm | |
|         } else { | |
|           console.log('error submit!!') | |
|           return false | |
|         } | |
|       }) | |
|       if (this.supportAdd) newForm = this.handlerMuscForm() | |
|       return newForm | |
|     }, | |
|     getGridList () { | |
|       const { user } = this.$store.state | |
|       console.log('agencyId', user) | |
|       this.$http | |
|         .post('/gov/org/customergrid/gridoption', { agencyId: user.agencyId, purpose: 'addorupdate' }) | |
|         .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('网络错误') | |
|         }) | |
|     }, | |
|     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 | |
|     } | |
|   } | |
| } | |
| </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; | |
| } | |
| .resi-cell-value { | |
|   :deep .el-col { | |
|     margin-right: 20px; | |
|   } | |
|   // .resi-cell-range { | |
|   //   width: 180px; | |
|   // } | |
| } | |
| </style> | |
| <style lang="scss" scoped> | |
| 
 | |
| .resi-form .resi-row { | |
|   margin-bottom: 0; | |
| } | |
| 
 | |
| 
 | |
|   .resi-cell-value .resi-cell-textarea { | |
|     width: 300px; | |
|   } | |
|   .resi-cell-col { | |
|     display: flex; | |
|     .el-form-item { | |
|       margin-right: 10px; | |
|     } | |
|   } | |
|   .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>
 | |
| 
 |