缓存数据

<!--
*   数据请求缓存
*-->
<template>
  <div class="LocalWraper">
    <div class="householdInformation flex-row">
      <div class="left flex-column justify-end">
        <slot name="left">
          户主
          <br />
          配偶
        </slot>
      </div>
      <div class="wraper flex1" style="width: calc(100% - 180px)">
        <el-tabs v-model="selecThousehold" type="card" @tab-click="tabClick">
          <el-tab-pane
            :name="item.userId"
            :userId="item.userId"
            v-for="(item, index) in households"
            :key="index"
            style="line-height: 0px"
          >
            <span slot="label">
              <span>
                {{ item.householdName }}
              </span>
              <br />
              <span>
                {{ item.tying }}
              </span>
            </span>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="right flex-column justify-end fs12">
        <div>
          <input
            type="number"
            v-model="currentPage"
            class="page-input"
            style="width: 40px"
            @blur="blurFetch"
            min="1"
            :max="pages"
          />
          <span>  /  {{ pages }}</span>
        </div>
        <div>共有{{ total }}条</div>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script>
import request from '@/utils/request'
import axios from 'axios'
export default {
  name: 'LocalWraper',
  model: {
    prop: 'formDate',
    event: 'receiveData',
  },
  props: {
    formDate: {
      type: Object | Array,
    },
    fetchTabFn: {
      //请求切换tab数据的方法
      type: Function,
      required: true,
    },
    url: {
      //tab 切换请求的地址
      type: String,
      default:
        'https://www.fastmock.site/mock/51e49da465b516d667c21948552ec35b/menu/getMenuslist',
    },
    size: {
      type: Number,
      default: 20,
    },
  },
  data() {
    return {
      selecThousehold: '1',
      dataManage: null,
      total: 0,
      currentPage: 1,
      households: [],
    }
  },
  created() {
    this.loadTabspanel()
  },
  async mounted() {
    this.dataManage = await (function () {
      let userInfo = {}
      return (window.localMesinfo = (function () {
        return {
          setUser: function (userId, cb = () => {}) {
            if (userId in userInfo) {
              return false
            }
            return cb()
              .then((res) => {
                userInfo[userId] = res.data.data.list
                return userInfo[userId]
              })
              .catch((error) => {
                 return this.$message.error(error)
              })
          },
          getUser: function (userId, cb = () => {}) {
            if (userId in userInfo) {
              return userInfo[userId]
            }
            return this.setUser(userId, cb)
          },
          removeAll: function () {
            userInfo = {}
          },
          destory: function () {
            userInfo = null
            window.localMesinfo = null
            userInfo = {}
            delete window.localMesinfo
            console.log('闭包释放')
          },
        }
      })())
    })()
  },
  methods: {
    async loadTabspanel() {
      //加载 tabs 切换
      if (this.fetchTabFn) {
        let { households, total, pages } = await this.fetchTabFn({
          currentPage: this.currentPage,
          size:this.size,
        })
        this.households = households
        this.total = total
        this.pages = pages
        this.selecThousehold = '1'
        this.tabClick()
        this.dataManage && this.dataManage.removeAll()
      }
    },
    blurFetch() {
      if (this.currentPage > this.pages) {
        this.currentPage = this.pages
      }
      this.loadTabspanel()
    },
    async getUserById(userId) {
      let localData = await this.dataManage.getUser(userId, () => {
        return axios.get(this.url,{
          params:{
            userId 
          }
        })
        // return request({
        //   url: this.url,
        //   method: 'get',
        //   query: {},
        // })
      })
      this.$emit('receiveData', localData)
    },
    tabClick() {
      //根据点击的tab 加载对应数据
      this.getUserById(this.selecThousehold)
    },
  },
  beforeDestroy() {
    this.dataManage.destory()
  },
}
</script>
<style lang="scss" scoped>
.householdInformation {
  height: 70px;
  line-height: 30px;
  .left {
    width: 90px;
    font-size: 14px;
    color: #303133;
    text-align: center;
    border: 1px solid transparent;
    border-bottom: 1px solid #e4e7ed;
  }
  .right {
    width: 90px;
    text-align: center;
    border: 1px solid transparent;
    border-bottom: 1px solid #e4e7ed;
    color: #515a6e;
    .page-input {
      height: 25px;
      background: #ffffff;
      border: 1px solid #dcdfe6;
    }
  }
  ::v-deep .el-tabs {
    height: 100% !important;
    padding-top: 10px;
    box-sizing: border-box;
    .el-tabs__header {
      margin-bottom: 0px !important;
      .el-tabs__nav-wrap {
        height: 100% !important;
        .el-tabs__nav-prev,
        .el-tabs__nav-next {
          height: 60px !important;
          line-height: 60px !important;
        }
        .el-tabs__item {
          height: 60px !important;
          line-height: 28px !important;
          border: 1px solid transparent !important;
        }
        .el-tabs__item.is-active {
          border-left-color: #e4e7ed !important;
          border-right-color: #e4e7ed !important;
          border-bottom: 1px solid #ffffff !important;
          border-top: 1px solid #e4e7ed !important;
          position: relative;
        }
        .el-tabs__nav {
          border: none !important;
        }
        .el-tabs__nav-prev,
        .el-tabs__nav-next {
          width: 20px;
          background-color: #f6f8f9;
          border: 1px solid transparent;
          border-top-color: #dcdfe6;
          border-left-color: #dcdfe6;
        }
        .el-tabs__nav-next {
          border-right-color: #dcdfe6;
        }
      }
    }
  }
}
</style>

使用方法

<template>
  <div class="WomanCase-container">
    <LocalWraper
      v-model="formInline"
      url="https://www.fastmock.site/mock/51e49da465b516d667c21948552ec35b/menu/getMenuslist"
      :fetchTabFn="fetchTabFn"
    >
      <template slot="left">
        户主223
        <br />
        配偶
      </template>
      <div style="margin-top: 24px">
        <el-form
          :inline="true"
          :model="formInline"
          style="padding: 10px"
          class="demo-form-inline"
          label-width="100px"
        >
          <div>
            <el-form-item label="婚姻状况" style="text-align: center">
              <el-input
                v-model="formInline.user"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
            <el-form-item label="奖扶日期">
              <el-select v-model="formInline.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="特扶日期">
              <el-input
                v-model="formInline.user"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
            <el-form-item label="流动情况">
              <el-input
                v-model="formInline.user"
                placeholder="流动情况"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="formInline.region" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <div class="photo">图片</div>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="户口性质" style="text-align: center">
              <el-input
                v-model="formInline.user"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
            <el-form-item label="独证日期">
              <el-select v-model="formInline.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="国籍">
              <el-input
                v-model="formInline.user"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
            <el-form-item label="民族">
              <el-select v-model="formInline.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="健康状况">
              <el-input
                v-model="formInline.user"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="门牌" style="text-align: center">
              <el-input v-model="formInline.user" placeholder="门牌"></el-input>
            </el-form-item>
            <el-form-item label="出生地">
              <el-input v-model="formInline.user" placeholder="出生地">
                <i
                  class="el-icon-map-location el-input__icon"
                  slot="suffix"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item label="职业">
              <el-input
                v-model="formInline.user"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
            <el-form-item label="服务处所">
              <el-select v-model="formInline.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="电话">
              <el-input
                v-model="formInline.user"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="门牌" style="text-align: center">
              <el-input v-model="formInline.user" placeholder="门牌"></el-input>
            </el-form-item>
            <el-form-item label="出生地">
              <el-input v-model="formInline.user" placeholder="出生地">
                <i
                  class="el-icon-map-location el-input__icon"
                  slot="suffix"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item label="职业">
              <el-input
                v-model="formInline.user"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
            <el-form-item label="服务处所">
              <el-select v-model="formInline.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="电话">
              <el-input
                v-model="formInline.user"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
        <div class="linesplite"></div>
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          style="padding: 10px"
          label-width="100px"
        >
          <div>
            <el-form-item label="婚姻状况" style="text-align: center">
              <el-input
                v-model="formInline.user"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
            <el-form-item label="奖扶日期">
              <el-select v-model="formInline.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="特扶日期">
              <el-input
                v-model="formInline.user"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
            <el-form-item label="流动情况">
              <el-input
                v-model="formInline.user"
                placeholder="流动情况"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="formInline.region" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" style="position: relative">
              <div class="photo">图片</div>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="户口性质" style="text-align: center">
              <el-input
                v-model="formInline.user"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
            <el-form-item label="独证日期">
              <el-select v-model="formInline.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="国籍">
              <el-input
                v-model="formInline.user"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
            <el-form-item label="民族">
              <el-select v-model="formInline.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="健康状况">
              <el-input
                v-model="formInline.user"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="门牌" style="text-align: center">
              <el-input v-model="formInline.user" placeholder="门牌"></el-input>
            </el-form-item>
            <el-form-item label="出生地">
              <el-input v-model="formInline.user" placeholder="出生地">
                <i
                  class="el-icon-map-location el-input__icon"
                  slot="suffix"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item label="职业">
              <el-input
                v-model="formInline.user"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
            <el-form-item label="服务处所">
              <el-select v-model="formInline.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="电话">
              <el-input
                v-model="formInline.user"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="门牌" style="text-align: center">
              <el-input v-model="formInline.user" placeholder="门牌"></el-input>
            </el-form-item>
            <el-form-item label="出生地">
              <el-input v-model="formInline.user" placeholder="出生地">
                <i
                  class="el-icon-map-location el-input__icon"
                  slot="suffix"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item label="职 业">
              <el-input
                v-model="formInline.user"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
            <el-form-item label="服务处所">
              <el-select v-model="formInline.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="电      话">
              <el-input
                v-model="formInline.user"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
        <div class="linesplite"></div>
        <div class="person-info" style="padding: 0 20px">
          <div
            class="flex-row justify-between align-items-center"
            style="height: 60px"
          >
            <el-radio-group v-model="activeName">
              <el-radio-button label="basicInformation" style="margin: 0 10px">
                生育证
              </el-radio-button>
              <el-radio-button label="marriage" style="margin: 0 10px">
                孕前优生
              </el-radio-button>
              <el-radio-button label="flow" style="margin: 0 10px">
                优生优育
              </el-radio-button>
              <el-radio-button label="planningGains" style="margin: 0 10px">
                妊娠史
              </el-radio-button>
              <el-radio-button label="planningGains" style="margin: 0 10px">
                妊娠史
              </el-radio-button>

              <el-radio-button label="planningGains" style="margin: 0 10px">
                子女
              </el-radio-button>
              <el-radio-button label="planningGains" style="margin: 0 10px">
                病残儿鉴定
              </el-radio-button>
              <el-radio-button label="planningGains" style="margin: 0 10px">
                避孕史
              </el-radio-button>
              <el-radio-button label="planningGains" style="margin: 0 10px">
                避孕随访
              </el-radio-button>

              <el-radio-button label="planningGains" style="margin: 0 10px">
                环孕检
              </el-radio-button>
              <el-radio-button label="planningGains" style="margin: 0 10px">
                计生处理
              </el-radio-button>
              <el-radio-button label="planningGains" style="margin: 0 10px">
                生殖保健
              </el-radio-button>
              <el-radio-button label="planningGains" style="margin: 0 10px">
                村民自治
              </el-radio-button>
            </el-radio-group>
            <div class="btns">
              <el-button
                type="primary"
                class="add"
                @click="onSubmit"
                icon="el-icon-circle-plus-outline"
              >
                添加
              </el-button>
              <el-button
                type="primary"
                class="delete"
                @click="onSubmit"
                icon="el-icon-delete"
              >
                删除
              </el-button>
            </div>
          </div>
          <component :is="activeName"></component>
        </div>
      </div>
    </LocalWraper>


  </div>
</template>

<script>
import LocalWraper from '@/components/LocalWraper'
import BirthCertificate from './BirthCertificate.vue'
import request from '@/utils/request'
export default {
  name: 'WomanCase',
  components: { LocalWraper, BirthCertificate }, //https://www.fastmock.site/mock/51e49da465b516d667c21948552ec35b/menu/fetchTab
  data() {
    return {
      formInline: {
        name: 123,
      },
      fetchTabFn: (query) => {
        //测试,后面替换
        return request({
          url:'https://www.fastmock.site/mock/51e49da465b516d667c21948552ec35b/menu/fetchTab',
          method: 'get',
          query: query,
        }) 
      },
      formInline2: {
        name: 'test',
      },
      activeName: 'BirthCertificate',
    }
  },
  methods: {
    onSubmit() {},
  },
}
</script>
<style lang="scss" scoped>
::v-deep {
  .el-radio-button__inner {
    border-left: 1px solid #dcdfe6 !important;
  }
}
.photo {
  width: 140px;
  height: 166px;
  line-height: 166px;
  text-align: center;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  position: absolute;
  left: 20px;
}
</style>