epmet-work-pc-chengyang/src/views/components/resiSearch.vue

<template>
  <div class="resi-container">
    <!-- <el-card class="resi-card"> -->
    <div>

      <el-form :inline="true"
               class="header_form_box"
               v-for="(item, index) in sliceList(itemList, 4)"
               :class="boxHeight ? 'm-form-box-height-auto' : 'm-form-box-height'"
               :key="index">
        <el-form-item v-for="n in item"
                      :key="n.id">
          <div class="resi-cell">
            <div style="width:100px;text-align: right;padding-right:14px ;">{{ n.label }}:</div>
            <div class="resi-cell-value"
                 :class="n.itemType === 'radio' && 'resi-cell-value-radio'">
              <el-input v-if="n.itemType === 'input' || n.itemType === 'textarea'"
                        v-model.trim="form[n.columnName]"
                        class="u-item-width-normal"
                        size="small"
                        clearable
                        placeholder="请输入内容">
              </el-input>
              <template v-else-if="n.itemType == 'inputRange'">
                <!-- <el-input
                    v-model.trim="form[n.columnName]"
                    class="resi-cell-input"
                    size="small"
                    clearable
                    placeholder="请输入内容"
                  /> -->
                <inputRange style="height:37px;"
                            v-model="form[n.columnName]"
                            :type="n.validType"
                            @change="handleAgeChange" />
              </template>
              <template v-else-if="n.itemType === 'datepicker'">
                <el-date-picker style="width:218px ;"
                                v-if="n.queryType === 'daterange'"
                                v-model.trim="timer.startPickerTime"
                                :picker-options="startPickerOptions"
                                type="date"
                                align="right"
                                unlink-panels
                                placeholder="开始时间"
                                class="u-item-width-daterange"
                                size="small"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd">
                </el-date-picker>
                <el-date-picker style="width:219px ;"
                                v-if="n.queryType === 'daterange'"
                                v-model.trim="timer.endPickerTime"
                                :picker-options="endPickerOptions"
                                class="u-item-width-daterange u-data-tag"
                                size="small"
                                type="date"
                                value-format="yyyy-MM-dd"
                                value="yyyy-MM-dd"
                                placeholder="结束时间">
                </el-date-picker>
                <el-date-picker v-else
                                v-model.trim="form[n.columnName]"
                                class="resi-cell-input"
                                type="inputRange"
                                size="small"
                                clearable
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期">
                </el-date-picker>
              </template>
              <el-select v-else-if="n.itemType === 'select' || n.itemType === 'radio'"
                         v-model.trim="form[n.columnName]"
                         placeholder="请选择"
                         size="small"
                         clearable
                         class="u-item-width-normal"
                         :collapse-tags="n.multiSelect == 1 ? true : false"
                         :multiple="n.multiSelect == 1 ? true : false">
                <el-option v-for="item in n.options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
              <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 === 'checkbox'">
                <el-checkbox-group v-model="form[n.columnName]">
                  <el-checkbox v-for="ns in n.options"
                               :key="ns.value"
                               :label="ns.value">{{ ns.label }}</el-checkbox>
                </el-checkbox-group>
              </template>
            </div>
          </div>
        </el-form-item>

        <el-form-item prop="agencyIdArray">
          <span style="width:100px;text-align: right;padding-right:14px;display: inline-block; ">所属组织:</span>
          <el-cascader class="u-item-width-normal"
                       ref="myCascader"
                       v-model="agencyIdArray"
                       :options="orgOptions"
                       :props="orgOptionProps"
                       :show-all-levels="false"
                       @change="handleChangeAgency"></el-cascader>
        </el-form-item>

        <el-form-item prop="VILLAGE_ID">
          <div class="resi-cell">
            <div class="resi-cell-value">
              <span style="width:100px;text-align: right;padding-right:14px;display: inline-block; ">所属房屋:</span>
              <el-select v-model.trim="form.VILLAGE_ID"
                         placeholder="请选择小区"
                         size="small"
                         filterable
                         clearable
                         class="u-item-width-communitycascader"
                         @clear="handleClearVillage"
                         @change="handleChangeV">
                <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"
                         placeholder="楼号"
                         size="small"
                         filterable
                         clearable
                         style="margin-left: 5px"
                         class="u-item-width-buildcascader"
                         :disabled="changeVDisabled"
                         @clear="handleClearBuild"
                         @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="changeBDisabled"
                         placeholder="单元"
                         size="small"
                         filterable
                         clearable
                         style="margin-left: 5px"
                         class="u-item-width-buildcascader"
                         @click="handleClearDan"
                         @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="changeDDisabled"
                         placeholder="房号"
                         size="small"
                         filterable
                         clearable
                         style="margin-left: 5px"
                         class="u-item-width-buildcascader">
                <el-option v-for="item in optionsH"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <el-row v-if="showSmartSearchForm"
            class="resi-row-more M_m0">

      <el-col :span="24">
        <span style="width:100px;">智能查询</span>
        <el-button v-for="btnItem in btnList"
                   :key="btnItem.index"
                   size="small"
                   :class="selBtnIndex === btnItem.index ? 'diy-button--blue' : 'diy-button--gray'"
                   @click="handelSelSmartBtn(btnItem.index)">{{ btnItem.name }}</el-button>

      </el-col>
      <el-col>
        <smart-search-rule ref="ref_rule"
                           :formType="formType"></smart-search-rule>
      </el-col>
    </el-row>
    <el-row v-if="isArrow"
            class="resi-search">

      <el-col :span="24">
        <el-button type="primary"
                   size="small"
                   plain
                   class="diy-button--blue"
                   @click="handleSmartSearch">智能查询</el-button>
        <el-button style="margin-left:10px"
                   size="small"
                   class="diy-button--white"
                   type="primary"
                   plain
                   @click="resetForm">重置</el-button>
        <el-button type="primary"
                   size="small"
                   class="diy-button--blue"
                   @click="handleSearch"
                   plain>查询 </el-button>
        <el-button style="margin-left:15px"
                   size="small"
                   class="div-table-button--blue showUnfold"
                   type="text"
                   @click="boxHeight = !boxHeight">{{ boxHeight ? '收起' : '展开' }}<i :class="boxHeight ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></el-button>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import inputRange from './rangeInput.vue'
import smartSearchRule from './smartSearchRule.vue'
export default {
  name: 'ResiSearch',
  components: {
    inputRange, smartSearchRule
  },
  props: {
    formList: {
      type: Array,
      default: () => []
    },
    columnName: {
      type: String,
      default: ''
    },
    showGrid: {
      type: Boolean,
      default: false
    },
    isArrow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    let initForm = (arr, columnName) => {
      let _form = {}
      // console.log('formInfo', obj)
      // if (Object.keys(obj).length > 0) {
      //   _form = { ...obj }
      //   return _form
      // }
      arr.forEach((item) => {
        if (item.itemType == 'checkbox') _form[item.columnName] = []
        else if (item.queryType == 'resi_category' && columnName) {
          _form[item.columnName] = [columnName]
        } else if (columnName && columnName === item.columnName) _form[item.columnName] = '1'
        else if (item.itemType == 'inputRange') _form[item.columnName] = { start: '', end: '' }
        else _form[item.columnName] = ''
      })
      return _form
    }
    let itemList = this.formList.map(item => {
      console.log(item);
      if (item.itemType == 'inputRange' && item.funType == 'agetoyear') {
        item.columnName = 'age'
      }
      return {
        ...item
      }
    })


    let form = initForm(itemList, this.columnName)
    let tempFormList = itemList.map(item => {

      return {
        ...item,
        isChange: (item.queryType == 'resi_category' && this.columnName) || this.columnName === item.columnName ? true : false
      }
    })
    let constForm = {
      ...form,
      GRID_ID: '',
      VILLAGE_ID: '',
      BUILD_ID: '',
      UNIT_ID: '',
      HOME_ID: ''
    }
    let orgOptionProps = {
      multiple: false,
      value: 'agencyId',
      label: 'agencyName',
      children: 'subAgencyList',
      checkStrictly: true
    }
    let endDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
      let nowData = Date.now()
      if (this.updateStartDate) {
        let startTime = new Date(this.updateStartDate)
        return time.getTime() > nowData || time.getTime() < startTime || time.getTime() === startTime
      } else {
        return time.getTime() > nowData
      }

    }
    let startDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
      let nowData = Date.now()
      return time.getTime() > nowData
    }

    return {
      boxHeight: true,
      pageLoading: false,
      openSearch: false,
      optionsV: [],
      optionsB: [],
      optionsH: [],
      optionsD: [],
      optionsG: [],
      orgOptions: [],
      orgOptionProps,
      agencyIdArray: [],
      value: '',
      // 1
      itemList,
      fixedList: [],
      fixedForm: {
        AGENCY_ID: '',
        GRID_ID: '',
        VILLAGE_ID: '',
        BUILD_ID: '',
        UNIT_ID: '',
        HOME_ID: ''
      },
      constForm,
      form: {
        ...form,
        AGENCY_ID: '',
        GRID_ID: '',
        VILLAGE_ID: '',
        BUILD_ID: '',
        UNIT_ID: '',
        HOME_ID: ''
      },
      tempFormList,
      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])
            }
          }
        ]
      },

      queryType: {
        'AGENCY_ID': 'like'
      },

      showSmartSearchForm: false,
      formType: 'add',
      selBtnIndex: 1,
      btnList: [
        {
          name: '自定义查询',
          index: 1,

        },
        {
          name: '租户',
          index: 2,
          ruleList: [
            {
              selSmartType: 'house',
              nextLogicalRel: "",
              nextLogicalRelName: "",
              personRule: {
                ruleDesc: '',//规则描述文字，例如：基础信息性别等于女
                itemGroupId: '',
                itemId: '',
                queryType: '',
                colTable: '',
                colKey: '',
                colVal: '',

                itemList: [],
                colType: '',//详细参数的组件类型
                colOption: [],
                itemGroupName: '',
                itemLabel: '',
                queryTypeName: '',
                colValLabel: '',
              },
              houseRule: {
                colKey: "RENT_FLAG",
                colTable: "ic_house",
                colVal: "1",
                colValLabel: "出租",
                itemGroupId: null,
                itemGroupName: "房屋信息",
                itemId: null,
                itemLabel: "房屋状态",
                nextLogicalRel: "",
                nextLogicalRelName: "",
                queryType: "=",
                queryTypeName: "等于",
                ruleDesc: "房屋信息房屋状态等于出租",

              },
            },
          ]
        },
        // {
        //   name: '第一党支部党员',
        //   index: 3,
        //   ruleList: [
        //     {
        //       selSmartType: 'person',
        //       nextLogicalRel: "",
        //       nextLogicalRelName: "",
        //       personRule: {
        //         colKey: "IS_BDHJ",
        //         colTable: "ic_resi_user",
        //         colVal: "1",
        //         colValLabel: "是",
        //         itemGroupId: "45687aa479955f9d06204d415238f7cc_0",
        //         itemGroupName: "基础信息",
        //         itemId: "20220422102809_1005",
        //         itemLabel: "本地户籍",
        //         queryType: "=",
        //         queryTypeName: "等于",
        //         ruleDesc: "基础信息本地户籍等于是",
        //       },
        //       houseRule: {
        //         ruleDesc: '',
        //         queryType: '',
        //         colTable: '',
        //         colKey: '',
        //         colVal: '',

        //         titleName: '房屋信息',
        //         colType: '',//详细参数的组件类型
        //         colOption: [],
        //         itemGroupName: '房屋信息',
        //         itemLabel: '',
        //         queryTypeName: '',
        //         colValLabel: '',

        //       },
        //     },
        //   ]
        // }
      ],
      endPickerOptions: {
        disabledDate: endDisabledDate
      },
      startPickerOptions: {
        disabledDate: startDisabledDate
      },
      timer: {
        startPickerTime: '',
        endPickerTime: ''
      }
    }
  },
  computed: {
    sliceList () {
      return function (data, count) {
        // 接收
        if (data !== undefined) {
          let index = 0
          let arrTemp = []
          for (let i = 0; i < data.length; i++) {
            index = parseInt(0)
            if (arrTemp.length <= index) {
              arrTemp.push([])
            }
            arrTemp[index].push(data[i])
            // console.log(data[i],'zhi');
          }
          return arrTemp
        }
      }
    },
    changeVDisabled () {
      return !this.form.VILLAGE_ID
    },
    changeBDisabled () {
      return !this.form.BUILD_ID
    },
    changeDDisabled () {
      return !this.form.UNIT_ID
    },
  },
  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.constForm = { ...val }
      },
      deep: true
    },
    timer: {
      handler (newVal) {
        this.handelWatchStartDate(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    // this.initForm()
    // console.log('formcccc---', this.form)
    this.getOrgTreeList()
    this.getGridList()
    this.getValiheList()
    if (this.columnName) this.handleChangeForm(this.columnName)
  },
  methods: {
    handleSmartSearch () {
      this.showSmartSearchForm = !this.showSmartSearchForm
    },
    handelSelSmartBtn (index) {

      this.selBtnIndex = index
    },
    handelWatchStartDate (val) {
      return val
    },
    initForm () {
      this.formList.forEach((item) => {
        this.$set(this.form, item.columnName, '')
      })
      console.log('formcccc---', this.form)
    },
    computdSpan (len) {
      return len == 1 ? 24 : 6
    },
    handleClearVillage () {
      this.form.BUILD_ID = ''
      this.form.HOME_ID = ''
    },
    handleClearBuild () {
      this.form.BUILD_ID = ''
      this.form.UNIT_ID = ''
      this.form.HOME_ID = ''
    },
    handleClearDan () {
      this.form.UNIT_ID = ''
      this.form.HOME_ID = ''
    },
    resetForm (formName) {
      for (const n in this.form) {
        if (n == 'age') {
          this.form.age = {
            start: '',
            end: ''
          }
        } else if (n == 'BIRTHDAY') {
          this.form.BIRTHDAY = []
          this.timer.startPickerTime = null
          this.timer.endPickerTime = null
        } else if (typeof this.form[n] == 'object') this.form[n] = []
        else this.form[n] = ''
      }
      this.agencyIdArray = []
      // let arr3 = [...arr1, ...arr]
      this.$emit('search', [])
      // this.handleSearch()
      // this.orgOptions = [];
    },
    handleSearch () {
      if (this.showSmartSearchForm) {
        let refObj = this.$refs['ref_rule']
        refObj.getRule()
      } else {
        // debugger
        // console.log('formmmmm---', this.form)
        const itemTypes = ['daterange', 'timerange', 'checkbox']
        let a = this.tempFormList.filter(item => item.itemType != 'inputRange')
        let arr = a.filter(n => n.isChange).map((item) => {
          return {
            queryType: item.queryType,
            tableName: item.tableName,
            columnName: item.columnName,
            columnValue: this.form[item.columnName] &&
              (itemTypes.includes(item.queryType) ||
                itemTypes.includes(item.itemType) || item.multiSelect == 1
                ? this.form[item.columnName]
                : [this.form[item.columnName].toString()])
          }
        })
        const arr2 = arr.filter(item => item.columnValue.length > 0)
        let arr1 = this.fixedList
          .filter((n) => n.columnValue.length > 0)
          .map((item) => {
            return {
              ...item
            }
          })
        var arr4 = []
        var arr3 = [...arr1, ...arr2];
        if (this.timer.startPickerTime && this.timer.endPickerTime) {
          arr4 = [{
            queryType: 'daterange',
            tableName: 'ic_resi_user',
            columnName: 'BIRTHDAY',
            columnValue: [this.timer.startPickerTime || '', this.timer.endPickerTime || '']
          }]
          arr3 = [...arr1, ...arr2, ...arr4]
        } else {
          let i = arr3.findIndex(item => item.columnName == 'BIRTHDAY')
          console.log(i, '标');
          arr3 = arr3.splice(i, 1)
          console.log(arr3);
        }
        this.$emit('search', arr3)
        arr3 = []
        return arr3

      }

    },
    handleOpenSearch () {
      this.openSearch = !this.openSearch
    },
    handleAgeChange (val) {
      // debugger
      console.log('val----age---', val)
      // console.log(v);
      if (val.start) {
        const s = this.computedBirth1(val.start)
        const e = this.computedBirth(val.start)
        this.form.BIRTHDAY = [s, e]
      } else {
        this.form.BIRTHDAY = []
        return
      }

    },
    handleChangeAgency (val) {
      let obj = this.$refs["myCascader"].getCheckedNodes()[0].data
      if (obj) {
        if (obj.level === 'grid') {
          this.form.GRID_ID = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : '';
          this.form.AGENCY_ID = ''
        } else {
          this.form.AGENCY_ID = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : '';
          this.form.GRID_ID = ''
        }

      } else {
        this.form.AGENCY_ID = ''
        this.form.GRID_ID = ''
      }

      this.form.VILLAGE_ID = ''
      this.form.BUILD_ID = ''
      this.form.UNIT_ID = ''
      this.form.HOME_ID = ''
      this.getValiheList()
    },
    handleChangeGrid (val) {
      console.log('val', val)
      this.form.VILLAGE_ID = ''
      this.form.BUILD_ID = ''
      this.form.UNIT_ID = ''
      this.form.HOME_ID = ''
      this.getValiheList()
    },
    handleChangeV (val) {
      console.log('val', val)
      this.form.BUILD_ID = ''
      this.form.UNIT_ID = ''
      this.form.HOME_ID = ''
      this.getBuildList()
    },
    handleChangeB (val) {
      console.log('val', val)
      this.form.UNIT_ID = ''
      this.form.HOME_ID = ''
      this.getUniList()
    },
    handleChangeD (val) {
      console.log('val', val)
      this.form.HOME_ID = ''
      this.getHouseList()
    },
    // 监听基础form
    handleChangeForm (val) {
      for (let n in this.fixedForm) {
        if (n === val) {
          if (this.fixedList.length > 0) {
            let _item = {}
            let hasVal = false
            this.fixedList.forEach((item, index) => {
              if (item.columnName == val) {
                hasVal = true
                item.columnValue[0] = this.form[val]
                if (!this.form[val]) this.fixedList.splice(index, 1)
                console.log('fixedList----val', this.fixedList)
              } else {
                _item = {
                  queryType: this.queryType[val] ? this.queryType[val] : 'equal',//'equal',
                  tableName: 'ic_resi_user',
                  columnName: val,
                  columnValue: [this.form[val]]
                }
                console.log('fixedList----else', _item)
                // this.$set(this.fixedList, index, _item)
              }
            })
            if (Object.keys(_item).length > 0 && !hasVal) this.fixedList.push(_item)
          } else {
            this.$set(this.fixedList, 0, {
              queryType: this.queryType[val] ? this.queryType[val] : 'equal',//'equal',
              tableName: 'ic_resi_user',
              columnName: val,
              columnValue: [this.form[val]]
            })
          }
        }
      }
      console.log('fixedList----999', this.fixedList)
      this.tempFormList.forEach((item) => {
        if (item.columnName === val) item.isChange = true
      })
    },
    getOrgTreeList () {
      const { user } = this.$store.state
      this.$http
        .post('/gov/org/customeragency/agencygridtree', {})
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          } else {
            console.log('获取组织树成功', res.data)
            this.orgOptions = []
            this.orgOptions.push(res.data)
          }
        })
        .catch(() => {
          return this.$message.error('网络错误')
        })
    },
    getGridList () {
      const { user } = this.$store.state
      this.$http
        .post('/gov/org/customergrid/gridoption', { agencyId: user.agencyId, purpose: 'query' })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          } else {
            console.log('获取查询详情成功', res.data)
            this.optionsG = res.data
          }
        })
        .catch(() => {
          return this.$message.error('网络错误')
        })
    },
    getValiheList () {
      const { user } = this.$store.state
      this.$http
        .post('/gov/org/icneighborhood/neighborhoodoption', {
          gridId: this.form.GRID_ID,
          agencyId: this.form.AGENCY_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('网络错误')
        })
    },
    computedBirth (age) {
      let now = new Date();
      let nowYear = now.getFullYear();
      let nowMonth = now.getMonth() + 1;
      let nowDay = now.getDate(); // 按照减法原理，先day相减，不够向month借；然后month相减，不够向year借；最后year相减。
      let subYear = nowYear - age
      if (nowMonth < 10) {
        nowMonth = '0' + nowMonth
      }
      if (nowDay < 10) {
        nowDay = '0' + nowDay
      }
      return subYear + '-' + nowMonth + '-' + nowDay
    },
    computedBirth1 (age) {
      let now = new Date();
      let nowYear = now.getFullYear();
      let nowMonth = now.getMonth() + 1;
      let nowDay = now.getDate(); // 按照减法原理，先day相减，不够向month借；然后month相减，不够向year借；最后year相减。
      let subYear = nowYear - age
      if (nowMonth < 10) {
        nowMonth = '0' + nowMonth
      }
      if (nowDay < 10) {
        nowDay = '0' + nowDay
      }
      return subYear - 1 + '-' + nowMonth + '-' + nowDay
    }
  }
}
</script>

<style lang="scss" scope>
@import "@/assets/scss/modules/management/list-main.scss";
@import "@/assets/scss/modules/visual/communityManage.scss";

.header_form_box {
  display: flex;
  flex-wrap: wrap;
}
.resi-search {
  // padding-right: 20px;
  .el-col {
    text-align: right;
  }
}
.resi-container .resi-cell {
  display: flex;
  align-items: center;

  .resi-cell-label {
    flex-shrink: 0;
    min-width: 70px;
    box-sizing: border-box;
    margin-right: 15px;
    text-align: right;
    // line-height: 32;
  }
  .resi-cell-label1 {
    width: max-content;
  }
  .resi-cell-value-radio {
    display: flex;
    align-items: center;
    min-height: 32px;
  }
  .resi-cell-input {
    max-width: 200px;
  }
  .resi-cell--daterange {
    max-width: 240px;
  }
  .resi-cell-select {
    max-width: 200px;
    box-sizing: border-box;
    margin-right: 10px;
    &-middle {
      width: 130px;
    }
    &-small {
      width: 88px;
    }
  }
  .resi-cell-select:last-child {
    margin-right: 0;
  }
}
</style>