<template>
|
<div class="menu-setting">
|
<card-wrapper :title="$t('Config')">
|
<el-button type="primary" size="mini" slot="tools" @click="updateMenu"
|
>{{ $t('Submit') }}</el-button
|
>
|
<el-tree
|
ref="menuTree"
|
:data="menus"
|
show-checkbox
|
node-key="id"
|
:default-checked-keys="checkedKeys"
|
:current-node-key="currentKeys"
|
:props="defaultProps"
|
@check="checkChange"
|
></el-tree>
|
</card-wrapper>
|
<card-wrapper class="left32 page-menu" :title="$t('RealtimePreview')">
|
<page-nav :menus="menus" :status="true"></page-nav>
|
</card-wrapper>
|
</div>
|
</template>
|
|
<script>
|
import CardWrapper from "@/views/pageSetting/components/cardWrapper";
|
import getPageMenu from "@/assets/js/tools/getPageMenu";
|
import PageNav from "@/layout/components/Sidebar/PageNav";
|
import { getPageMenuApi, updatePageMenuApi } from "@/views/pageSetting/js/api";
|
import i18n from '../i18n/menuSetting';
|
import { createI18nOption } from '@/assets/js/tools/i18n';
|
const i18nMixin = createI18nOption(i18n);
|
export default {
|
name: "menuSetting",
|
mixins: [i18nMixin],
|
components: {
|
CardWrapper,
|
PageNav
|
},
|
data() {
|
return {
|
menus: getPageMenu(),
|
defaultProps: {
|
children: "childrens",
|
label: "label"
|
},
|
checkedKeys: [],
|
currentKeys: ""
|
};
|
},
|
methods: {
|
getPageMenu() {
|
getPageMenuApi()
|
.then(res => {
|
let rs = res.data;
|
let data = [];
|
if (rs.code == 1) {
|
data = rs.data;
|
}
|
this.menus = getPageMenu();
|
this.changeMenus(this.menus, data);
|
this.changeChangeKeys(this.menus);
|
})
|
.catch(error => {
|
console.log(error);
|
});
|
},
|
changeChangeKeys(menus) {
|
this.checkedKeys = [];
|
menus.forEach(menus => {
|
if (menus.enableduse && menus.noChild) {
|
this.checkedKeys.push(menus.id);
|
}
|
if (menus.childrens) {
|
menus.childrens.forEach(children => {
|
if (children.enableduse) {
|
this.checkedKeys.push(children.id);
|
}
|
});
|
}
|
});
|
},
|
updateMenu() {
|
let loading = this.$layer.loading();
|
let menus = getPageMenu();
|
// menus[0].childrens = [];
|
menus.forEach(v => {
|
v.childrens = v.childrens || [];
|
});
|
// console.log(JSON.stringify(menus), this.menus);
|
this.changeMenus(menus, this.menus);
|
|
updatePageMenuApi(menus)
|
.then(res => {
|
let rs = res.data;
|
if (rs.code == 1) {
|
this.$layer.msg("修改成功");
|
} else {
|
this.$layer.msg("修改失败");
|
}
|
this.$layer.close(loading);
|
})
|
.catch(error => {
|
this.$layer.close(loading);
|
this.$layer.msg("修改失败");
|
});
|
},
|
changeMenus(menus, list) {
|
let lang = this.$store.state.settings.lang;
|
menus.forEach(menu => {
|
let item = "";
|
for (let i = 0; i < list.length; i++) {
|
if (menu.id == list[i].id) {
|
item = list[i];
|
menu.lableEnUs = item.lableEnUs;
|
menu.label = 'US' == lang ? menu.lableEnUs : menu.label;
|
break;
|
}
|
}
|
if (item && item.childrens) {
|
item.childrens.forEach(children => {
|
for (let i = 0; i < menu.childrens.length; i++) {
|
let item2 = menu.childrens[i];
|
if (item2.id == children.id) {
|
item2.lableEnUs = children.lableEnUs;
|
item2.label = 'US' == lang ? children.lableEnUs : children.label;
|
item2.enableduse = children.enableduse;
|
break;
|
}
|
}
|
});
|
}
|
});
|
},
|
checkChange() {
|
let checkedKeys = this.$refs.menuTree.getCheckedKeys();
|
this.menus.forEach(menu => {
|
if (menu.childrens) {
|
menu.childrens.forEach(children => {
|
let isIn = false;
|
for (let i = 0; i < checkedKeys.length; i++) {
|
if (children.id == checkedKeys[i]) {
|
isIn = true;
|
break;
|
}
|
}
|
children.enableduse = isIn;
|
});
|
}
|
});
|
}
|
},
|
mounted() {
|
this.getPageMenu();
|
this.$bus.$on('langChanged', () => {
|
this.getPageMenu();
|
});
|
}
|
};
|
</script>
|
|
<style scoped>
|
.menu-setting {
|
height: 100%;
|
text-align: center;
|
box-sizing: border-box;
|
padding-bottom: 8px;
|
}
|
.left32 {
|
margin-left: 32px;
|
}
|
</style>
|
