stores/index.js
import {
createStore
} from "vuex";
//计算高度
let height = window.innerHeight;
//计算分辨率
let width = window.innerWidth;
let activeIndex = localStorage.getItem("activeIndex");
if (activeIndex == null || activeIndex == "" || activeIndex == undefined) {
activeIndex = "1";
}
//用户菜单
let menuList = localStorage.getItem("menuList");
if (menuList == undefined || menuList == "null" || menuList == null || menuList == "") {
menuList = [];
} else {
menuList = JSON.parse(menuList);
}
const store = createStore({
state: function () {
return {
width: width,
height: height,
activeIndex:activeIndex,
//当前用户的权限
menuList: menuList,
};
},
mutations: {
setActiveIndex: function (state, value) {
state.activeIndex = value;
localStorage.setItem("activeIndex", value);
},
setMenuList: function (state, value) {
state.menuList = value;
localStorage.setItem("menuList", JSON.stringify(value));
},
},
modules: {
},
});
export default store;
router/index.js
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'layout',
component: () => import('@/views/layout/LayoutContainer.vue'),
children:[
{
path: '/companyAccount',
name: 'companyAccount',
component: () => import('@/views/layout/components/CompanyAccount.vue')
},
{
path: '/historyAccount',
name: 'historyAccount',
component: () => import('@/views/layout/components/HistoryAccount.vue')
}
]
},
]
})
export default router
lib/setting.js
const SETTING = {
//系统菜单配置示例
Menu: {
CompanyAccount: {
name: "companyAccount",
title: "菜单1",
index: "0",
children: []
},
HistoryAccount: {
name: "historyAccount",
title: "菜单2",
index: "1",
children: []
},
}
}
export default SETTING
home.vue
<template>
<el-container :style="getStyle()">
<!-- <el-header class="pageHeader">
<el-row justify="end" style="height:100%"></el-row>
</el-header> -->
<el-container>
<el-aside :style="asideStyle">
<el-scrollbar :height="height - 64">
<the-menu @foldMenu="foldMenu"></the-menu>
</el-scrollbar>
</el-aside>
<el-main style="background:#fff;">
<router-view ></router-view>
<!-- <el-tabs v-model="tabName" type="card" :closable="true" v-on:tab-click="changeTab"
v-on:tab-remove="removeTab" v-else>
<el-tab-pane v-for="item in tabList" :key="item.name" :name="item.name">
<template v-slot:label>
{{ item.title }}
</template>
<keep-alive>
<component v-bind:is="item.name" :xdata="item"></component>
</keep-alive>
</el-tab-pane>
</el-tabs> -->
</el-main>
</el-container>
</el-container>
</template>
<script setup>
import stores from '../../stores/index.js'
import TheMenu from '@/components/TheMenu.vue'
import MainComponent from '@/views/layout/components/mainComponent.vue'
import { getInstuiresService, selectRecordByCondition } from '@/service/index.js'
import { computed, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const asideStyle = ref({})
onMounted( () => {
getAsideStyle(0,'#f7f9fc')
})
const getStyle = () => {
let h = stores.state.height;
return {
height: h + "px"
}
}
// flag:0-展开 1-折叠
let getAsideStyle = (flag,backgroundColor) => {
var h = stores.state.height;
var style = {
width: flag == 0 ? "240px": "66px",
height: h + "px",
border: "none",
backgroundColor: backgroundColor,
zIndex: 99
};
asideStyle.value = style
}
const foldMenu = (state,backgroundColor) => {
debugger
getAsideStyle(state,backgroundColor)
}
const height = computed(() => {
//将dept变量中stuffs列表的长度赋值给numberofStuff
return stores.state.height
})
const state = reactive({
form: {
name: '正元地理信息',
region: 'huabei',
industry: '石油和天然气开采业',
emissionsWay: '固定燃烧'
},
stepCode: 'one',
Selectedindustry: null,
industriesList: [],
//默认选中
defaultActive: '1',
carbonIndustryInfo: [],
isShow: false,
dialogVisible: false
})
const tableData = ref([])
// 确定事件
// const ConfirmChange = () => {
// router.push('/arithmetic')
// state.isShow = true
// }
// 获取选取行业
const initInstuires = async () => {
await getInstuiresService().then((res) => {
if (res.data.code === 200) {
state.industriesList = res.data.data
if (res.data.data.length > 0) {
state.Selectedindustry = res.data.data[0]
}
}
})
}
const updateDefaultActive = async (item) => {
state.defaultActive = item.id
state.Selectedindustry = item
}
onMounted(() => {
initInstuires()
})
const queryHisForm = ref({
data: {},
page: {
pageIndex: 1,
pageSize: 10,
}
})
const handleSizeChange = (num) => {
}
const handleCurrentChange = (num) => {
queryHisForm.value.page.pageIndex = num;
showHistoryRecord()
}
const tableTotal = ref(0)
// 查询并展示 历史核算列表
const showHistoryRecord = async () => {
await selectRecordByCondition(queryHisForm.value).then((res) => {
if (res.data.status === 200) {
tableData.value = res.data.data
tableTotal.value = res.data.page.totalCount
}
})
state.dialogVisible = true
}
const toRecordDetail = (row) => {
router.push({
path: '/arithmeticDetail',
query: { id: row.id, choiceKeyList: '52,54'.toString() }
})
}
const toRecordResult = (row) => {
router.push({ path: '/result', query: { id: row.id } })
}
</script>
<style scoped lang="less">
.el-footer {
display: flex;
width: 100%;
height: 2.375rem;
color: white;
font-size: 0.8rem;
font-weight: 700;
align-items: center;
justify-content: center;
background-color: #589957;
}
</style>
TheMenu.vue
<!--
Author:lixg
Date:2022-03-07 14:54
Describe:菜单组件
-->
<template>
<div class="menuBox">
<!-- background-color='#f7f9fc' -->
<el-menu v-on:select="handleSelect" :collapse="isCollapse" class="el-menu-vertical-demo" text-color="#03bf8a"
active-text-color="#ffffff" :default-active="activeIndex" :background-color='isCollapse?"#03bf8a":"#f7f9fc"'>
<el-menu-item v-bind:index="state.Menu.CompanyAccount.index" class="oneLevelMenu">
<i :class="isCollapse?'el-icon-menu-default1':'el-icon-menu-default'"></i>
<template #title>{{ getMenuName(state.Menu.CompanyAccount) }}</template>
</el-menu-item>
<el-menu-item v-bind:index="state.Menu.HistoryAccount.index" class="oneLevelMenu">
<i :class="isCollapse?'el-icon-menu-default1':'el-icon-menu-default'"></i>
<template #title>{{ getMenuName(state.Menu.HistoryAccount) }}</template>
</el-menu-item>
<el-menu-item v-bind:index="state.Menu.Test.index" class="oneLevelMenu">
<i :class="isCollapse?'el-icon-menu-default1':'el-icon-menu-default'"></i>
<template #title>{{ getMenuName(state.Menu.Test) }}</template>
</el-menu-item>
</el-menu>
<div class="collapse_true" @click="foldMenu(1,'#03bf8a')" v-show="!isCollapse">
<div v-for="i in 3"></div>
</div>
<div class="collapse_false" @click="foldMenu(0,'#f7f9fc')" v-show="isCollapse" >
<div v-for="i in 3"></div>
</div>
</div>
</template>
<script setup>
import { computed, onMounted, reactive, ref, defineEmits } from 'vue'
import SetInfo from '../lib/setting.js'
import stores from '../stores/index.js'
import { useRoute, useRouter } from 'vue-router'
import { v4 as uuidv4 } from 'uuid';
const isCollapse = ref(false)
const router = useRouter()
const route = useRoute()
const emit = defineEmits(['foldMenu'])
const state = reactive({
Menu: SetInfo.Menu
})
const activeIndex = computed(() => {
return stores.state.activeIndex
})
let menuList = computed(() => {
return stores.state.menuList
})
const handleSelect = (index) => {
if (index == null) {
index = 1;
}
stores.commit("setActiveIndex", index);
var name = "";
for (var key in state.Menu) {
if (state.Menu[key].index == index) {
name = state.Menu[key].name;
break;
}
if (name != "") {
break;
}
}
router.push({
name: name,
params: { random: uuidv4() },
});
}
const getMenuName = (menu) => {
var menuInfo = menuList.value.find(item => {
return item.title == menu.title;
})
if (menuInfo) {
return menuInfo.title;
}
else {
return menu.title;
}
}
// 菜单折叠
const foldMenu = (state,backgroundColor) => {
isCollapse.value = state == 1 ? true : false;
emit("foldMenu", state,backgroundColor)
}
</script>
<style scoped lang="less">
.el-menu {
width: "240px";
border-right: none;
}
.el-menu .is-active {
background-color: #0ed79e;
}
.el-icon-menu-default {
background: url(../img/LayoutContainer/menu-default.png) center no-repeat;
// background-size: cover;
}
.el-icon-menu-default:before {
content: "\8d3a";
font-size: 14px;
visibility: hidden;
}
.el-menu .is-active .el-icon-menu-default {
background: url(../img/LayoutContainer/menu-active.png) center no-repeat;
}
.el-icon-menu-default1{
background: url(../img/LayoutContainer/menu-active.png) center no-repeat;
}
.el-icon-menu-default1:before {
content: "\8d3a";
font-size: 14px;
visibility: hidden;
}
.collapse_true {
width: 220px;
height: 28px;
padding: 10px;
background: #f0f1f2;
bottom: 0;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
div {
width: 40px;
height: 3px;
background-color: #999;
}
}
.collapse_false {
width: 25px;
height: 28px;
margin: 10px 20px;
// background: #f0f1f2;
bottom: 0;
position: absolute;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
div {
width: 3px;
height: 30px;
background-color: #fff;
}
}
</style>
