前端最终规范


缓存数据

<pre><code class="language-markdown">&lt;!-- * 数据请求缓存 *--&gt; &lt;template&gt; &lt;div class="LocalWraper"&gt; &lt;div class="householdInformation flex-row"&gt; &lt;div class="left flex-column justify-end"&gt; &lt;slot name="left"&gt; 户主 &lt;br /&gt; 配偶 &lt;/slot&gt; &lt;/div&gt; &lt;div class="wraper flex1" style="width: calc(100% - 180px)"&gt; &lt;el-tabs v-model="selecThousehold" type="card" @tab-click="tabClick"&gt; &lt;el-tab-pane :name="item.userId" :userId="item.userId" v-for="(item, index) in households" :key="index" style="line-height: 0px" &gt; &lt;span slot="label"&gt; &lt;span&gt; {{ item.householdName }} &lt;/span&gt; &lt;br /&gt; &lt;span&gt; {{ item.tying }} &lt;/span&gt; &lt;/span&gt; &lt;/el-tab-pane&gt; &lt;/el-tabs&gt; &lt;/div&gt; &lt;div class="right flex-column justify-end fs12"&gt; &lt;div&gt; &lt;input type="number" v-model="currentPage" class="page-input" style="width: 40px" @blur="blurFetch" min="1" :max="pages" /&gt; &lt;span&gt;&amp;nbsp;&amp;nbsp;/&amp;nbsp;&amp;nbsp;{{ pages }}&lt;/span&gt; &lt;/div&gt; &lt;div&gt;共有{{ total }}条&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;slot&gt;&lt;/slot&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; 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 = () =&gt; {}) { if (userId in userInfo) { return false } return cb() .then((res) =&gt; { userInfo[userId] = res.data.data.list return userInfo[userId] }) .catch((error) =&gt; { return this.$message.error(error) }) }, getUser: function (userId, cb = () =&gt; {}) { 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 &amp;&amp; this.dataManage.removeAll() } }, blurFetch() { if (this.currentPage &gt; this.pages) { this.currentPage = this.pages } this.loadTabspanel() }, async getUserById(userId) { let localData = await this.dataManage.getUser(userId, () =&gt; { 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() }, } &lt;/script&gt; &lt;style lang="scss" scoped&gt; .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; } } } } } &lt;/style&gt;</code></pre> <h1>使用方法</h1> <pre><code class="language-markdown">&lt;template&gt; &lt;div class="WomanCase-container"&gt; &lt;LocalWraper v-model="formInline" url="https://www.fastmock.site/mock/51e49da465b516d667c21948552ec35b/menu/getMenuslist" :fetchTabFn="fetchTabFn" &gt; &lt;template slot="left"&gt; 户主223 &lt;br /&gt; 配偶 &lt;/template&gt; &lt;div style="margin-top: 24px"&gt; &lt;el-form :inline="true" :model="formInline" style="padding: 10px" class="demo-form-inline" label-width="100px" &gt; &lt;div&gt; &lt;el-form-item label="婚姻状况" style="text-align: center"&gt; &lt;el-input v-model="formInline.user" placeholder="审批人" &gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="奖扶日期"&gt; &lt;el-select v-model="formInline.region" placeholder="活动区域"&gt; &lt;el-option label="区域一" value="shanghai"&gt;&lt;/el-option&gt; &lt;el-option label="区域二" value="beijing"&gt;&lt;/el-option&gt; &lt;/el-select&gt; &lt;/el-form-item&gt; &lt;el-form-item label="特扶日期"&gt; &lt;el-input v-model="formInline.user" placeholder="审批人" &gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="流动情况"&gt; &lt;el-input v-model="formInline.user" placeholder="流动情况" &gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="性别"&gt; &lt;el-select v-model="formInline.region" placeholder="性别"&gt; &lt;el-option label="男" value="1"&gt;&lt;/el-option&gt; &lt;el-option label="女" value="2"&gt;&lt;/el-option&gt; &lt;/el-select&gt; &lt;/el-form-item&gt; &lt;el-form-item label=""&gt; &lt;div class="photo"&gt;图片&lt;/div&gt; &lt;/el-form-item&gt; &lt;/div&gt; &lt;div&gt; &lt;el-form-item label="户口性质" style="text-align: center"&gt; &lt;el-input v-model="formInline.user" placeholder="审批人" &gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="独证日期"&gt; &lt;el-select v-model="formInline.region" placeholder="活动区域"&gt; &lt;el-option label="区域一" value="shanghai"&gt;&lt;/el-option&gt; &lt;el-option label="区域二" value="beijing"&gt;&lt;/el-option&gt; &lt;/el-select&gt; &lt;/el-form-item&gt; &lt;el-form-item label="国籍"&gt; &lt;el-input v-model="formInline.user" placeholder="审批人" &gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="民族"&gt; &lt;el-select v-model="formInline.region" placeholder="活动区域"&gt; &lt;el-option label="区域一" value="shanghai"&gt;&lt;/el-option&gt; &lt;el-option label="区域二" value="beijing"&gt;&lt;/el-option&gt; &lt;/el-select&gt; &lt;/el-form-item&gt; &lt;el-form-item label="健康状况"&gt; &lt;el-input v-model="formInline.user" placeholder="审批人" &gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;/div&gt; &lt;div&gt; &lt;el-form-item label="门牌" style="text-align: center"&gt; &lt;el-input v-model="formInline.user" placeholder="门牌"&gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="出生地"&gt; &lt;el-input v-model="formInline.user" placeholder="出生地"&gt; &lt;i class="el-icon-map-location el-input__icon" slot="suffix" &gt;&lt;/i&gt; &lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="职业"&gt; &lt;el-input v-model="formInline.user" placeholder="审批人" &gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="服务处所"&gt; &lt;el-select v-model="formInline.region" placeholder="活动区域"&gt; &lt;el-option label="区域一" value="shanghai"&gt;&lt;/el-option&gt; &lt;el-option label="区域二" value="beijing"&gt;&lt;/el-option&gt; &lt;/el-select&gt; &lt;/el-form-item&gt; &lt;el-form-item label="电话"&gt; &lt;el-input v-model="formInline.user" placeholder="审批人" &gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;/div&gt; &lt;div&gt; &lt;el-form-item label="门牌" style="text-align: center"&gt; &lt;el-input v-model="formInline.user" placeholder="门牌"&gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="出生地"&gt; &lt;el-input v-model="formInline.user" placeholder="出生地"&gt; &lt;i class="el-icon-map-location el-input__icon" slot="suffix" &gt;&lt;/i&gt; &lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="职业"&gt; &lt;el-input v-model="formInline.user" placeholder="审批人" &gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="服务处所"&gt; &lt;el-select v-model="formInline.region" placeholder="活动区域"&gt; &lt;el-option label="区域一" value="shanghai"&gt;&lt;/el-option&gt; &lt;el-option label="区域二" value="beijing"&gt;&lt;/el-option&gt; &lt;/el-select&gt; &lt;/el-form-item&gt; &lt;el-form-item label="电话"&gt; &lt;el-input v-model="formInline.user" placeholder="审批人" &gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;/div&gt; &lt;/el-form&gt; &lt;div class="linesplite"&gt;&lt;/div&gt; &lt;el-form :inline="true" :model="formInline" class="demo-form-inline" style="padding: 10px" label-width="100px" &gt; &lt;div&gt; &lt;el-form-item label="婚姻状况" style="text-align: center"&gt; &lt;el-input v-model="formInline.user" placeholder="审批人" &gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="奖扶日期"&gt; &lt;el-select v-model="formInline.region" placeholder="活动区域"&gt; &lt;el-option label="区域一" value="shanghai"&gt;&lt;/el-option&gt; &lt;el-option label="区域二" value="beijing"&gt;&lt;/el-option&gt; &lt;/el-select&gt; &lt;/el-form-item&gt; &lt;el-form-item label="特扶日期"&gt; &lt;el-input v-model="formInline.user" placeholder="审批人" &gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="流动情况"&gt; &lt;el-input v-model="formInline.user" placeholder="流动情况" &gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="性别"&gt; &lt;el-select v-model="formInline.region" placeholder="性别"&gt; &lt;el-option label="男" value="1"&gt;&lt;/el-option&gt; &lt;el-option label="女" value="2"&gt;&lt;/el-option&gt; &lt;/el-select&gt; &lt;/el-form-item&gt; &lt;el-form-item label="" style="position: relative"&gt; &lt;div class="photo"&gt;图片&lt;/div&gt; &lt;/el-form-item&gt; &lt;/div&gt; &lt;div&gt; &lt;el-form-item label="户口性质" style="text-align: center"&gt; &lt;el-input v-model="formInline.user" placeholder="审批人" &gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="独证日期"&gt; &lt;el-select v-model="formInline.region" placeholder="活动区域"&gt; &lt;el-option label="区域一" value="shanghai"&gt;&lt;/el-option&gt; &lt;el-option label="区域二" value="beijing"&gt;&lt;/el-option&gt; &lt;/el-select&gt; &lt;/el-form-item&gt; &lt;el-form-item label="国籍"&gt; &lt;el-input v-model="formInline.user" placeholder="审批人" &gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="民族"&gt; &lt;el-select v-model="formInline.region" placeholder="活动区域"&gt; &lt;el-option label="区域一" value="shanghai"&gt;&lt;/el-option&gt; &lt;el-option label="区域二" value="beijing"&gt;&lt;/el-option&gt; &lt;/el-select&gt; &lt;/el-form-item&gt; &lt;el-form-item label="健康状况"&gt; &lt;el-input v-model="formInline.user" placeholder="审批人" &gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;/div&gt; &lt;div&gt; &lt;el-form-item label="门牌" style="text-align: center"&gt; &lt;el-input v-model="formInline.user" placeholder="门牌"&gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="出生地"&gt; &lt;el-input v-model="formInline.user" placeholder="出生地"&gt; &lt;i class="el-icon-map-location el-input__icon" slot="suffix" &gt;&lt;/i&gt; &lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="职业"&gt; &lt;el-input v-model="formInline.user" placeholder="审批人" &gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="服务处所"&gt; &lt;el-select v-model="formInline.region" placeholder="活动区域"&gt; &lt;el-option label="区域一" value="shanghai"&gt;&lt;/el-option&gt; &lt;el-option label="区域二" value="beijing"&gt;&lt;/el-option&gt; &lt;/el-select&gt; &lt;/el-form-item&gt; &lt;el-form-item label="电话"&gt; &lt;el-input v-model="formInline.user" placeholder="审批人" &gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;/div&gt; &lt;div&gt; &lt;el-form-item label="门牌" style="text-align: center"&gt; &lt;el-input v-model="formInline.user" placeholder="门牌"&gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="出生地"&gt; &lt;el-input v-model="formInline.user" placeholder="出生地"&gt; &lt;i class="el-icon-map-location el-input__icon" slot="suffix" &gt;&lt;/i&gt; &lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="职 业"&gt; &lt;el-input v-model="formInline.user" placeholder="审批人" &gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;el-form-item label="服务处所"&gt; &lt;el-select v-model="formInline.region" placeholder="活动区域"&gt; &lt;el-option label="区域一" value="shanghai"&gt;&lt;/el-option&gt; &lt;el-option label="区域二" value="beijing"&gt;&lt;/el-option&gt; &lt;/el-select&gt; &lt;/el-form-item&gt; &lt;el-form-item label="电 话"&gt; &lt;el-input v-model="formInline.user" placeholder="审批人" &gt;&lt;/el-input&gt; &lt;/el-form-item&gt; &lt;/div&gt; &lt;/el-form&gt; &lt;div class="linesplite"&gt;&lt;/div&gt; &lt;div class="person-info" style="padding: 0 20px"&gt; &lt;div class="flex-row justify-between align-items-center" style="height: 60px" &gt; &lt;el-radio-group v-model="activeName"&gt; &lt;el-radio-button label="basicInformation" style="margin: 0 10px"&gt; 生育证 &lt;/el-radio-button&gt; &lt;el-radio-button label="marriage" style="margin: 0 10px"&gt; 孕前优生 &lt;/el-radio-button&gt; &lt;el-radio-button label="flow" style="margin: 0 10px"&gt; 优生优育 &lt;/el-radio-button&gt; &lt;el-radio-button label="planningGains" style="margin: 0 10px"&gt; 妊娠史 &lt;/el-radio-button&gt; &lt;el-radio-button label="planningGains" style="margin: 0 10px"&gt; 妊娠史 &lt;/el-radio-button&gt; &lt;el-radio-button label="planningGains" style="margin: 0 10px"&gt; 子女 &lt;/el-radio-button&gt; &lt;el-radio-button label="planningGains" style="margin: 0 10px"&gt; 病残儿鉴定 &lt;/el-radio-button&gt; &lt;el-radio-button label="planningGains" style="margin: 0 10px"&gt; 避孕史 &lt;/el-radio-button&gt; &lt;el-radio-button label="planningGains" style="margin: 0 10px"&gt; 避孕随访 &lt;/el-radio-button&gt; &lt;el-radio-button label="planningGains" style="margin: 0 10px"&gt; 环孕检 &lt;/el-radio-button&gt; &lt;el-radio-button label="planningGains" style="margin: 0 10px"&gt; 计生处理 &lt;/el-radio-button&gt; &lt;el-radio-button label="planningGains" style="margin: 0 10px"&gt; 生殖保健 &lt;/el-radio-button&gt; &lt;el-radio-button label="planningGains" style="margin: 0 10px"&gt; 村民自治 &lt;/el-radio-button&gt; &lt;/el-radio-group&gt; &lt;div class="btns"&gt; &lt;el-button type="primary" class="add" @click="onSubmit" icon="el-icon-circle-plus-outline" &gt; 添加 &lt;/el-button&gt; &lt;el-button type="primary" class="delete" @click="onSubmit" icon="el-icon-delete" &gt; 删除 &lt;/el-button&gt; &lt;/div&gt; &lt;/div&gt; &lt;component :is="activeName"&gt;&lt;/component&gt; &lt;/div&gt; &lt;/div&gt; &lt;/LocalWraper&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; 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) =&gt; { //测试,后面替换 return request({ url:'https://www.fastmock.site/mock/51e49da465b516d667c21948552ec35b/menu/fetchTab', method: 'get', query: query, }) }, formInline2: { name: 'test', }, activeName: 'BirthCertificate', } }, methods: { onSubmit() {}, }, } &lt;/script&gt; &lt;style lang="scss" scoped&gt; ::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; } &lt;/style&gt;</code></pre>

页面列表

ITEM_HTML