From 24d1ee325649af7cee195dd5cff76b89c45e7a11 Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Fri, 12 Nov 2021 15:56:13 +0800
Subject: [PATCH] ss

---
 .../visual/basicinfo/cpts/people-more.vue     | 816 ++++++++++++++++++
 src/views/modules/visual/basicinfo/people.vue |  10 +
 2 files changed, 826 insertions(+)
 create mode 100644 src/views/modules/visual/basicinfo/cpts/people-more.vue

diff --git a/src/views/modules/visual/basicinfo/cpts/people-more.vue b/src/views/modules/visual/basicinfo/cpts/people-more.vue
new file mode 100644
index 00000000..1be440e7
--- /dev/null
+++ b/src/views/modules/visual/basicinfo/cpts/people-more.vue
@@ -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>
diff --git a/src/views/modules/visual/basicinfo/people.vue b/src/views/modules/visual/basicinfo/people.vue
index d2093ff3..67cefbb4 100644
--- a/src/views/modules/visual/basicinfo/people.vue
+++ b/src/views/modules/visual/basicinfo/people.vue
@@ -99,6 +99,16 @@
               <img src="@/assets/img/shuju/people/close.png" />
             </div>
 
+            <edit-resi
+              v-if="dialogEditVisible"
+              ref="baseForm"
+              :disabled="disabled"
+              :form-info="editForm"
+              :fixed="true"
+              :form-list="formList"
+              @changegroup="handleChangeGroup"
+            />
+
             <div class="list">
               <div class="item">所属网格：商区社区第一网格</div>
               <div class="item">所属网格：商区社区第一网格</div>