tabs标签页的使用——el-tabs动态组件的使用、sessionStorage.getItem、sessionStorage.setItem、goBack返回

tabs标签页的使用——el-tabs动态组件的使用、sessionStorage.getItem、sessionStorage.setItem、goBack返回

效果

点击打印的数据

1、主页面

index.vue

<!-- * @Author: author @163.com * @Date: 2023-08-25 19:56:45 * @LastEditors: author @163.com * @LastEditTime: 2023-08-25 19:56:45 * @FilePath: \sgtech-prj-webapp\src\app\science\views\comquart\variousUnits\comInplement.vue * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <template> <div class="main-content"> <el-tabs v-model="manageZnIndex" class="demo-tabs" @tab-click="handleClick"> <el-tab-pane v-for="item in tabPanes" :key="item.label[1]" :label="item.label[0]" :name="item.label[1]" > <component :is="item.component" v-if="manageZnIndex === item.label[1]" /> </el-tab-pane> </el-tabs> </div> </template> <script setup> import options from './options' const tabPanes = computed(() => options.filter((item) => item.hidden)) const manageZnIndex = ref( sessionStorage.getItem('manageZnIndex') || tabPanes.value[0]?.label[1] ) const handleClick = (tab) => { console.log(88, tab) sessionStorage.setItem('manageZnIndex', tab.props.name) } </script> <style lang="scss" scoped> @import url('@/views/style/main.scss'); </style> 

2、公共样式

src\app\science\views\style\main.scss

.box-main { 
    padding: 0px; background: #f8f8f8; } .p-top78 { 
    padding: 78px 0 0; } .p-top58 { 
    padding: 58px 0 0; } .bg-white { 
    min-height: 80vh; padding: 20px 30px; background: #fff; } .page-header { 
    padding-left: 30px; background: #fff; } .item-content{ 
    width: 100%; } .item-relevance { 
    display: flex; justify-content: flex-start; margin: 16px 0px; } .form-content { 
    width: 100%; margin: 16px 0px 0; } .page-title{ 
    font-size: 14px; } .item-btn{ 
    display: flex; justify-content: flex-end; width: 100%; margin: 5px 0 10px; } .item-center-btn{ 
    position: fixed; bottom: 0px; left: 240px; z-index: 9; display: flex; justify-content: center; width: calc(100vw - 240px); height: 40px; padding: 10px 0 0; margin: 10px 0 10px; background: #fff; } .inline-form .ym-form-item__content { 
    margin-left: 0px !important; } .inline-form .ym-input { 
    width: 100% !important; } .inline-form .width25 { 
    float: left; width: 25%; } .inline-form .ym-form-item__content div:first-child { 
    display: flex; flex: 1; } .inline-form .ym-select { 
    flex: 1; } .inline-form .ym-date-editor { 
    display: flex; } .inline-form .ym-date-editor .ym-input__wrapper { 
    flex: 1; } .inline-form .ym-input-number { 
    flex: 1; } .inline-form .ym-input__inner { 
    text-align: left; } .inline-form .ym-input__wrapper { 
    padding-right: 11px !important; padding-left: 11px !important; } 

3、引用的组件数组

src\app\science\views\comquart\variousUnits\options.js

import guiFill from './guiFill.vue' import demand from './demand.vue' import guideline from './guideline.vue' import guiExpert from './guiExpert.vue' import mainMation from './mainMation.vue' import { 
    handelLimit } from '@src/utils/limits' export default [ { 
    label: ['需求填报', 'guiFill'], component: guiFill, hidden: handelLimit('zntab_05'), }, { 
    label: ['需求管理', 'demand'], component: demand, hidden: handelLimit('zntab_07'), }, { 
    label: ['指南编制专家推荐', 'guideline'], component: guideline, hidden: handelLimit('zntab_06'), }, { 
    label: ['指南编制专家确定', 'guiExpert'], component: guiExpert, hidden: handelLimit('zntab_02'), }, { 
    label: ['指南信息维护', 'mainMation'], component: mainMation, hidden: handelLimit('zntab_04'), }, ] 

src\utils\limits.js

// 使用说明 // v-if="handelLimit('opt0003')" // import {handelLimit}from "@src/utils/limits" const menuInfos = sessionStorage.getItem('menuInfo') const getFlatArr = (arr) => { 
    return arr.reduce((val, item) => { 
    let flatArr = [...val, item] if (item.children && item.children.length !== 0) { 
    flatArr = [...flatArr, ...getFlatArr(item.children)] } return flatArr }, []) } // 控制页面按钮 export const handelLimit = (btnId) => { 
    if (process.env.VUE_APP_ENV === 'development') return true if (menuInfos === null || menuInfos === '') return false const menuInfoArr = JSON.parse(menuInfos) const data = getFlatArr(menuInfoArr) return data.some((item) => item.busicode == btnId) } //获取当前登录人 export const getSystemUserId = (createUser) => { 
    const loginUserInfo = JSON.parse(sessionStorage.getItem('loginUserInfo')) if ( loginUserInfo === null || loginUserInfo === '' || !loginUserInfo.systemUserId || loginUserInfo.systemUserId === null ) return false return loginUserInfo.systemUserId === createUser } 

4、引用的组件主页

src\app\science\views\comquart\variousUnits\guideline.vue

<template> <div> <el-button type="primary" @click="handleClick('add')">添加专家</el-button> </div> </template> <script setup> //页面跳转 const handleClick = (type, row) => { const query = { type: type ? type : null, id: row ? row.id : null, }; router.push({ path: "/comquart/variousUnits/guideAddDetail", query }); }; </script> 

5、引用的组件详情页

src\app\science\views\comquart\variousUnits\guideAddDetail.vue

<template> <div class="box-main"> <el-page-header class="page-header" :content="title" @back="goBack" /> </div> </template> <script setup> const title = ref("指南编制专家新建"); const route = useRoute(); const router = useRouter(); if (route.query.type === "view") { title.value = "专家"; showButton.value = false; } else if (route.query.type === "edit") { title.value = "指南编制专家编辑"; } // 返回主页 const goBack = async () => { router.push({ path: "/comquart/variousUnits/comInplement", }); }; </script> <style lang="scss" scoped> @import url("../../style/main.scss"); .page-header { border-bottom: 20px solid #f8f8f8; :deep(.ym-page-header__header) { height: 40px; line-height: 40px; } } </style> 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/goyykf/10689.html