缓存数据
<pre><code class="language-markdown"><!--
* 数据请求缓存
*-->
<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>&nbsp;&nbsp;/&nbsp;&nbsp;{{ 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></code></pre>
<h1>使用方法</h1>
<pre><code class="language-markdown"><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></code></pre>