居民信息222

epmet-oper-web/src/utils/validate.js

@@ -29,3 +29,11 @@ export function isPhone (s) {
 export function isURL (s) {
   return /^http[s]?:\/\/.*/.test(s)
 }
+
+/**
+ * 身份证
+ * @param {*} s
+ */
+export function isCard (s) {
+  return /^(\d{15}$)|(^\d{17}([0-9]|X)$)/.test(s)
+}

epmet-oper-web/src/views/components/resiForm.vue

@@ -1,47 +1,76 @@
 <template>
-  <div class="resi-container">
+  <div :id="formId" class="resi-container">
-    <el-form class="resi-form">
+    <el-form :ref="formId" class="resi-form" :model="form" :rules="rules" :label-width="labelWidth">
-      <el-row v-for="(item, index) in sliceList(formList, 4)" :key="index" class="resi-row" :gutter="20">
+      <el-row v-for="(item, index) in sliceList(formList, 4)" :key="index" class="resi-row">
-          <el-col v-for="n in item" :key="n.id" :span="6">
+          <el-col v-for="n in item" :key="n.id" :span="n.item_type === 'textarea'&&24 || 6">
-             <el-form-item>
+             <el-form-item :prop="n.column_name" :label="n.label">
-              <div class="resi-cell">
+              <!-- <div class="resi-cell"> -->
-                <div class="resi-cell-label">{{n.label}}</div>
+                <!-- <div class="resi-cell-label">{{n.label}}</div> -->
-                <div class="resi-cell-value" :class="n.item_type === 'radio' && 'resi-cell-value-radio'">
+                <div class="resi-cell-value">
-                  <el-input
+                  <template v-if="n.item_type === 'input'">
-                    v-if="n.item_type === 'input'"
+                    <el-input
-                    class="resi-cell-input"
+                      v-if="n.valid_type"
-                    size="small"
+                      v-model="form[n.column_name]"
-                    placeholder="请输入内容"
+                      class="resi-cell-input"
-                    >
+                      size="small"
-                  </el-input>
+                      clearable
+                      placeholder="请输入内容"
+                      >
+                    </el-input>
+                    <el-input
+                      v-else
+                      v-model="form[n.column_name]"
+                      class="resi-cell-input"
+                      size="small"
+                      clearable
+                      placeholder="请输入内容"
+                      >
+                    </el-input>
+                  </template>
+                  <template v-if="n.item_type === 'textarea'">
+                    <el-input
+                      v-model="form[n.column_name]"
+                      class="resi-cell-textarea"
+                      size="small"
+                      type="textarea"
+                      clearable
+                      placeholder="请输入内容"
+                      >
+                    </el-input>
+                  </template>
                   <el-date-picker
                     v-else-if="n.item_type === 'date'"
-                    v-model="value"
+                    v-model="form[n.column_name]"
                     class="resi-cell-input"
                     type="date"
                     size="small"
+                    clearable
                     placeholder="选择日期">
                   </el-date-picker>
-                  <el-select v-else-if="n.item_type === 'select'" v-model="value" placeholder="请选择" size="small" class="resi-cell-select">
+                  <el-select v-else-if="n.item_type === 'select'" v-model="form[n.column_name]"
+                  placeholder="请选择" size="small" clearable class="resi-cell-select">
                     <el-option
-                      v-for="item in options"
+                      v-for="item in n.option_source_value || options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                     </el-option>
                   </el-select>
                   <template v-else-if="n.item_type === 'radio'">
-                    <el-radio label="1">备选项</el-radio>
+                    <el-radio v-for="ns in n.option_source_value" :key="ns.value" v-model="form[n.column_name]"
-                    <el-radio label="1">备选项</el-radio>
+                    :label="ns.value">
+                      {{ ns.label }}
+                    </el-radio>
+                    <!-- <el-radio v-model="form[n.column_name]" label="1">备选项</el-radio> -->
                   </template>
                   <template v-else-if="n.item_type === 'checkbox'">
-                    <el-checkbox-group v-model="checkList">
+                    <el-checkbox-group v-model="form[n.column_name]">
                       <el-checkbox label="复选框 A"></el-checkbox>
                       <el-checkbox label="复选框 B"></el-checkbox>
                     </el-checkbox-group>
                   </template>
                 </div>
-              </div>
+              <!-- </div> -->
             </el-form-item>
           </el-col>
         </el-row>
@@ -50,20 +79,19 @@
 </template>
 
 <script>
-let form = {}
+import { isCard, isMobile } from '@/utils/validate'
-function initForm (obj, arr) {
+
-  console.log('formInfo', obj)
-  if (Object.keys(obj).length > 0) {
-    form = { ...obj }
-    return
-  }
-  arr.forEach(item => {
-    form[item.column_name] = ''
-    // this.$set(form, item.column_name, '')
-  })
-}
 export default {
+  name: 'resiForm',
   props: {
+    labelWidth: {
+      type: String,
+      default: '100px'
+    },
+    formId: {
+      type: String,
+      default: 'resiForm'
+    },
     formList: {
       type: Array,
       default: function () {
@@ -78,8 +106,61 @@ export default {
     }
   },
   data () {
-    console.log('data-ttttt--', this.formList)
+    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) => {
+      console.log('formInfo', obj)
+      if (Object.keys(obj).length > 0) {
+        form = { ...obj }
+        return
+      }
+      arr.forEach(item => {
+        form[item.column_name] = ''
+      })
+    }
+    let initRules = (arr) => {
+      let rules = {}
+      arr.forEach(item => {
+        if (item.require) {
+          if (item.valid_type === 'mobile') {
+            rules[item.column_name] = [
+              { validator: checkMObile, trigger: 'blur' }
+            ]
+          } else if (item.valid_type === 'id_card') {
+            rules[item.column_name] = [
+              { validator: checkIdCard, trigger: 'blur' }
+            ]
+          } else {
+            rules[item.column_name] = [
+              { required: true, message: `请输入${item.label}`, trigger: 'blur' }
+            ]
+          }
+        }
+      })
+      return rules
+    }
     initForm(this.formInfo, this.formList)
+    let rules = initRules(this.formList)
     return {
       openSearch: false,
       options: [{
@@ -99,6 +180,7 @@ export default {
         label: '北京烤鸭'
       }],
       form,
+      rules,
       value: '',
       checkList: ['选中且禁用', '复选框 A']
     }
@@ -144,76 +226,49 @@ export default {
 </script>
 
 <style lang="scss">
-.resi-container .resi-card {
+.el-date-editor.el-input, .el-date-editor.el-input__inner {
-  position: relative;
+  width: 100% !important;
-  overflow: visible;
-}
-.resi-down {
-  position: absolute;
-  left: 50%;
-  bottom: -10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 46px;
-  height: 12px;
-  box-sizing: border-box;
-  margin-left: -23rpx;
-  cursor: pointer;
-  background: #FFFFFF;
-  border-radius: 0 0 10px 10px;
-  img {
-    display: block;
-  }
-}
-.resi-row-box {
-  height: 104px;
-  overflow: hidden;
-  transition: height .5s;
-}
-.resi-row-more {
-  height: max-content;
-  transition: height .5s;
 }
+</style>
+<style lang="scss" scoped>
+
 .resi-form .resi-row {
   margin-bottom: 0;
 }
-.resi-search {
+
-  .el-col {
+// .resi-form .resi-cell {
-    text-align: right;
+//   display: flex;
-  }
+//   align-items: center;
-}
+  // .resi-cell-label {
-.resi-cell {
+  //   width: 70px;
-  display: flex;
+  //   box-sizing: border-box;
-  align-items: center;
+  //   margin-right: 15px;
-  .resi-cell-label {
+  //   text-align: right;
-    width: 70px;
+  // }
-    box-sizing: border-box;
+  // .resi-cell-value-radio {
-    margin-right: 15px;
+  //   display: flex;
-    text-align: right;
+  //   align-items: center;
-    // line-height: 32;
+  //   min-height: 36px;
-  }
+  // }
-  .resi-cell-value-radio {
+  //  .resi-cell-value .resi-cell-input {
-    display: flex;
+  //   width: 180px;
-    align-items: center;
+  // }
-    min-height: 32px;
+  .resi-cell-value .resi-cell-textarea {
-  }
+    width: 300px;
-  .resi-cell-input {
-    width: 180px;
-  }
-  .resi-cell-select {
-    width: 180px;
-    box-sizing: border-box;
-    margin-right: 10px;
-    &-middle {
-      width: 130px;
-    }
-    &-small {
-      width: 88px;
-    }
   }
+  // .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>

epmet-oper-web/src/views/components/resiSearch.vue

@@ -12,6 +12,7 @@
                   v-model="form[n.column_name]"
                   class="resi-cell-input"
                   size="small"
+                  clearable
                   placeholder="请输入内容"
                   >
                 </el-input>
@@ -21,9 +22,10 @@
                   class="resi-cell-input"
                   type="date"
                   size="small"
+                  clearable
                   placeholder="选择日期">
                 </el-date-picker>
-                <el-select v-else-if="n.item_type === 'select'" v-model="form[n.column_name]" placeholder="请选择" size="small" class="resi-cell-select">
+                <el-select v-else-if="n.item_type === 'select'" v-model="form[n.column_name]" placeholder="请选择" size="small" clearable class="resi-cell-select">
                   <el-option
                     v-for="item in options"
                     :key="item.value"

epmet-oper-web/src/views/modules/base/resi.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <resi-search :form-list="formList" @search="handleSearch" />
+    <resi-search :form-list="searchList" @search="handleSearch" />
     <el-card class="resi-card-table">
       <div class="resi-row-btn">
         <el-button type="warning" size="small">导出</el-button>
-        <el-button type="success" size="small">新增</el-button>
+        <el-button type="success" size="small" @click="handleAdd">新增</el-button>
         <el-button type="primary" size="small">下载人口模板</el-button>
         <el-button type="danger" size="small">导入人口数据</el-button>
       </div>
@@ -46,7 +46,28 @@
       width="80%"
       :close-on-click-modal="true"
       :before-close="handleClose">
-      <resi-form :form-list="formList" />
+      <resi-form ref="baseForm" :form-list="formList" />
+      <div class="resi-other">
+        <div class="resi-other-title">其他</div>
+        <div class="tabs-other-info">
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane v-for="item in tabsList" :key="item.column_name" :label="item.label" :name="item.column_name">
+              <resi-form :ref="item.column_name" :form-id="item.column_name" :form-list="tabsForm" />
+            </el-tab-pane>
+            <!-- <el-tab-pane label="配置管理" name="second">
+              <resi-form :form-id="'second'" :form-list="tabsForm" />
+            </el-tab-pane>
+            <el-tab-pane label="角色管理" name="third">
+              <resi-form :form-id="'third'" :form-list="tabsForm" />
+            </el-tab-pane>
+            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
+          </el-tabs>
+        </div>
+      </div>
+      <div class="resi-btns">
+        <el-button size="small">取消</el-button>
+        <el-button type="primary" size="small" @click="handleSUbmit">提交</el-button>
+      </div>
     </el-dialog>
 
   </div>
@@ -62,9 +83,10 @@ export default {
   },
   data () {
     return {
-      dialogVisible: true,
+      dialogVisible: false,
       openSearch: false,
       currentPage: 1,
+      activeName: 'edu',
       tableData: [{
         date: '2016-05-02',
         name: '王小虎',
@@ -82,68 +104,571 @@ export default {
         name: '王小虎',
         address: '上海市普陀区金沙江路 1516 弄'
       }],
-      formList: [{
+      searchList: [{
         label: '所属网格',
         item_type: 'input',
         option_source_type: '',
         sort: '1',
+        require: true,
+        valid_type: null,
         column_name: 'grid'
       }, {
         label: '小区名称',
+        require: true,
         item_type: 'select',
         option_source_type: '',
         sort: '1',
+        valid_type: null,
         column_name: 'shequ'
       }, {
         label: '户籍查询',
+        require: true,
         item_type: 'input',
         option_source_type: '',
         sort: '1',
+        valid_type: null,
         column_name: 'huji'
       }, {
         label: '本地户籍',
         item_type: 'select',
+        require: true,
         option_source_type: '',
         sort: '1',
+        valid_type: null,
         column_name: 'huji1'
       }, {
         label: '姓名',
         item_type: 'input',
         option_source_type: '',
         sort: '1',
+        valid_type: null,
+        require: true,
         column_name: 'username'
       }, {
         label: '手机号',
         item_type: 'input',
+        valid_type: 'mobile',
+        require: true,
         option_source_type: '',
         sort: '1',
         column_name: 'userMobile'
       }, {
         label: '身份证',
         item_type: 'input',
+        require: true,
         option_source_type: '',
         sort: '1',
+        valid_type: 'id_card',
         column_name: 'idcard'
       }, {
         label: '出生日期',
         item_type: 'date',
+        valid_type: null,
+        require: true,
         option_source_type: '',
         sort: '1',
         column_name: 'birthday'
       }, {
         label: '联系人',
+        valid_type: null,
         item_type: 'checkbox',
+        require: true,
         option_source_type: '',
         sort: '1',
         column_name: 'contact'
       }, {
         label: '联系人手机',
         item_type: 'radio',
+        valid_type: null,
+        require: true,
         option_source_type: '',
         sort: '1',
         column_name: 'contactMobile'
       }],
-      value: ''
+      value: '',
+      formList: [{
+        label: '所属网格',
+        item_type: 'select',
+        option_source_type: '',
+        sort: '1',
+        require: true,
+        valid_type: null,
+        column_name: 'grid'
+      }, {
+        label: '所属楼宇',
+        require: true,
+        item_type: 'select',
+        option_source_type: '',
+        sort: '1',
+        valid_type: null,
+        column_name: 'shequ'
+      }, {
+        label: '所属家庭',
+        require: true,
+        item_type: 'input',
+        option_source_type: '',
+        sort: '1',
+        valid_type: null,
+        column_name: 'house'
+      }, {
+        label: '本地户籍',
+        item_type: 'select',
+        require: true,
+        option_source_type: '',
+        option_source_value: [{
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 0
+        }],
+        sort: '1',
+        valid_type: null,
+        column_name: 'huji'
+      }, {
+        label: '姓名',
+        item_type: 'input',
+        option_source_type: '',
+        sort: '1',
+        valid_type: null,
+        require: true,
+        column_name: 'username'
+      }, {
+        label: '性别',
+        item_type: 'select',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        option_source_value: [{
+          label: '男',
+          value: 1
+        }, {
+          label: '女',
+          value: 2
+        }],
+        sort: '1',
+        column_name: 'sex'
+      }, {
+        label: '手机号',
+        item_type: 'input',
+        require: true,
+        option_source_type: '',
+        sort: '1',
+        valid_type: 'mobile',
+        column_name: 'userMobile'
+      }, {
+        label: '身份证',
+        item_type: 'input',
+        valid_type: 'id_card',
+        require: true,
+        option_source_type: '',
+        sort: '1',
+        column_name: 'idcard'
+      }, {
+        label: '出生日期',
+        valid_type: null,
+        item_type: 'date',
+        require: false,
+        option_source_type: '',
+        sort: '1',
+        column_name: 'birthday'
+      }, {
+        label: '联系人',
+        item_type: 'input',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        sort: '1',
+        column_name: 'contactUser'
+      }, {
+        label: '联系人手机',
+        item_type: 'input',
+        valid_type: null,
+        require: true,
+        option_source_type: '',
+        sort: '1',
+        column_name: 'contactMobile'
+      }, {
+        label: '九小场所',
+        item_type: 'select',
+        valid_type: null,
+        require: true,
+        option_source_type: '',
+        sort: '1',
+        column_name: 'jiuxiao'
+      }, {
+        label: '备注',
+        item_type: 'textarea',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        sort: '1',
+        column_name: 'remarks'
+      }, {
+        label: '党员：',
+        item_type: 'radio',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        option_source_value: [{
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 0
+        }],
+        sort: '1',
+        column_name: 'party'
+      }, {
+        label: '低保：',
+        item_type: 'radio',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        option_source_value: [{
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 0
+        }],
+        sort: '1',
+        column_name: 'dibao'
+      }, {
+        label: '保障房：',
+        item_type: 'radio',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        option_source_value: [{
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 0
+        }],
+        sort: '1',
+        column_name: 'baozf'
+      }, {
+        label: '失业：',
+        item_type: 'radio',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        option_source_value: [{
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 0
+        }],
+        sort: '1',
+        column_name: 'shiye'
+      }, {
+        label: '育龄妇女：',
+        item_type: 'radio',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        option_source_value: [{
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 0
+        }],
+        sort: '1',
+        column_name: 'yulingfunv'
+      }, {
+        label: '退役军人：',
+        item_type: 'radio',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        option_source_value: [{
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 0
+        }],
+        sort: '1',
+        column_name: 'tuiyijunren'
+      }, {
+        label: '统战人员：',
+        item_type: 'radio',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        option_source_value: [{
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 0
+        }],
+        sort: '1',
+        column_name: 'tzrenyuan'
+      }, {
+        label: '信访人员：',
+        item_type: 'radio',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        option_source_value: [{
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 0
+        }],
+        sort: '1',
+        column_name: 'xfreny'
+      }, {
+        label: '志愿者：',
+        item_type: 'radio',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        option_source_value: [{
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 0
+        }],
+        sort: '1',
+        column_name: 'zhiyuanzhe'
+      }, {
+        label: '高龄：',
+        item_type: 'radio',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        option_source_value: [{
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 0
+        }],
+        sort: '1',
+        column_name: 'gaoling'
+      }, {
+        label: '空巢：',
+        item_type: 'radio',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        option_source_value: [{
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 0
+        }],
+        sort: '1',
+        column_name: 'kongc'
+      }, {
+        label: '失独：',
+        item_type: 'radio',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        option_source_value: [{
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 0
+        }],
+        sort: '1',
+        column_name: 'shidu'
+      }, {
+        label: '失能：',
+        item_type: 'radio',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        option_source_value: [{
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 0
+        }],
+        sort: '1',
+        column_name: 'shineng'
+      }, {
+        label: '失智：',
+        item_type: 'radio',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        option_source_value: [{
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 0
+        }],
+        sort: '1',
+        column_name: 'shizhi'
+      }, {
+        label: '残疾：',
+        item_type: 'radio',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        option_source_value: [{
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 0
+        }],
+        sort: '1',
+        column_name: 'canji'
+      }, {
+        label: '大病：',
+        item_type: 'radio',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        option_source_value: [{
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 0
+        }],
+        sort: '1',
+        column_name: 'dabing'
+      }, {
+        label: '慢病：',
+        item_type: 'radio',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        option_source_value: [{
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 0
+        }],
+        sort: '1',
+        column_name: 'manbing'
+      }, {
+        label: '特殊：',
+        item_type: 'radio',
+        valid_type: null,
+        require: false,
+        option_source_type: '',
+        option_source_value: [{
+          label: '是',
+          value: 1
+        }, {
+          label: '否',
+          value: 0
+        }],
+        sort: '1',
+        column_name: 'teshu'
+      }],
+      tabsForm: [{
+        label: '所属网格',
+        item_type: 'input',
+        option_source_type: '',
+        sort: '1',
+        require: true,
+        valid_type: null,
+        column_name: 'grid'
+      }, {
+        label: '小区名称',
+        require: true,
+        item_type: 'select',
+        option_source_type: '',
+        sort: '1',
+        valid_type: null,
+        column_name: 'shequ'
+      }, {
+        label: '户籍查询',
+        require: true,
+        item_type: 'input',
+        option_source_type: '',
+        sort: '1',
+        valid_type: null,
+        column_name: 'huji'
+      }, {
+        label: '本地户籍',
+        item_type: 'select',
+        require: true,
+        option_source_type: '',
+        sort: '1',
+        valid_type: null,
+        column_name: 'huji1'
+      }, {
+        label: '姓名',
+        item_type: 'input',
+        option_source_type: '',
+        sort: '1',
+        valid_type: null,
+        require: true,
+        column_name: 'username'
+      }],
+      tabsList: [{
+        label: '教育',
+        column_name: 'edu',
+        children: []
+      }, {
+        label: '兴趣爱好',
+        column_name: 'xingqu',
+        children: []
+      }, {
+        label: '宗教信仰',
+        column_name: 'zongjiao',
+        children: []
+      }, {
+        label: '健康信息',
+        column_name: 'jiank',
+        children: []
+      }, {
+        label: '工作信息',
+        column_name: 'job',
+        children: []
+      }, {
+        label: '经济状况',
+        column_name: 'jingji',
+        children: []
+      }, {
+        label: '家庭信息',
+        column_name: 'family',
+        children: []
+      }, {
+        label: '居住需求',
+        column_name: 'juzhu',
+        children: []
+      }, {
+        label: '教育发发发',
+        column_name: 'edu1',
+        children: []
+      }, {
+        label: '教育滚滚滚',
+        column_name: 'edu2',
+        children: []
+      }, {
+        label: '教育哈哈哈',
+        column_name: 'edu3',
+        children: []
+      }, {
+        label: '教育急急急',
+        column_name: 'edu4',
+        children: []
+      }, {
+        label: '教育快快快',
+        column_name: 'edu5',
+        children: []
+      }]
     }
   },
   methods: {
@@ -158,16 +683,77 @@ export default {
     },
     handleSearch (val) {
       console.log('searchhh--', val)
+    },
+    handleClick (tab, event) {
+      console.log(tab, event)
+    },
+    handleAdd () {
+      this.dialogVisible = true
+    },
+    handleSUbmit () {
+      console.log('baseform', this.$refs)
+
+      this.tabsList.forEach(item => {
+        console.log('otherFOrm', this.$refs[item.column_name][0].form)
+      })
     }
   }
 }
 </script>
 
 <style lang="scss">
+.tabs-other-info {
+  .el-tabs__item {
+    // width: 50px;
+    height: 20px;
+    box-sizing: border-box;
+    margin-right: 7px;
+    padding: 0 10px !important;
+    font-size: 8px;
+    font-weight: 500;
+    color: #666666;
+    line-height: 20px;
+    background: #EBECF1;
+    border-radius: 2px;
+  }
+  .el-tabs__nav-wrap::after, .el-tabs__active-bar {
+    display: none;
+  }
+  .el-tabs__nav-next, .el-tabs__nav-prev {
+    line-height: 20px;
+  }
+
+}
+</style>
+
+<style lang="scss" scoped>
 .resi-card-table {
   margin-top: 20px;
 }
 .resi-row-btn {
   margin-bottom: 13px;
 }
+.resi-other {
+  width: 100%;
+  display: flex;
+  .resi-other-title {
+    width: 100px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+    // padding: 6px 12px 0 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+    text-align: center;
+  }
+  .tabs-other-info {
+    // padding-left: 60px;
+  }
+}
+
+.resi-btns {
+  margin-top: 20px;
+  text-align: center;
+}
+
 </style>