前端初始化

2022-08-31 13:33:52 +08:00
commit 0a11097b80
108 changed files with 14283 additions and 0 deletions
@@ -0,0 +1,173 @@
+<template>
+    <el-container>
+        <el-header>
+            <Header></Header>
+
+        </el-header>
+        <el-container class="main-content">
+            <el-aside width="200px">
+                <el-scrollbar class="menu">
+                    <Menu :menuData="menuData"></Menu>
+                </el-scrollbar>
+            </el-aside>
+            <el-main>
+                <el-scrollbar class="main main1">
+                    <router-view/>
+                </el-scrollbar>
+            </el-main>
+        </el-container>
+    </el-container>
+</template>
+
+<script>
+    import Header from '@/components/Header';
+    import Menu from '@/components/Menu';
+
+    export default {
+        name: "Layout",
+        components: {
+            Header,
+            Menu
+        },
+        data() {
+            return {
+                menuData: []
+            }
+        },
+        watch: {
+            '$route.path': {
+                handler(val) {
+                    this.getMenu();
+                },
+                deep: true
+            }
+        },
+        methods: {
+            handleTree(arr, parentId) {
+                let cloneData = JSON.parse(JSON.stringify(arr)); // 对源数据深度克隆
+                return cloneData.filter((father) => {
+                    let branchArr = cloneData.filter(child => father.id === child.parentId); //返回每一项的子级数组
+                    father.children = branchArr.length > 0 ? branchArr : null; //如果存在子级，则给父级添加一个children属性，并赋值
+                    return father.parentId === parentId; //返回第一层
+                })
+            },
+            addLevel(data, level) {
+                data.forEach(item => {
+                    item.level = level;
+                    if (item.children) {
+                        this.addLevel(item.children, level + 1);
+                    }
+                });
+                return data;
+            },
+            getMenu() {
+                if (!this.$route.query.id) {
+                    return this.$router.push({path: '/report/list', query:{"id": "AEHJB8YNJ3"}});
+                }
+                let data = JSON.parse(JSON.stringify(this.$store.state.menuData));
+                let menu = data.filter(item => item.parentId === this.$route.query.id);
+                let menuData = [];
+                let menuFun = (menu) => {
+                    menuData = [...menuData, ...menu];
+                    let parentIds = menu.map(item => item.id);
+                    if (parentIds.length) {
+                        menuFun(data.filter(item => parentIds.find(el => el === item.parentId)))
+                  }
+              };
+              menuFun(menu);
+              let treeData = this.handleTree(menuData, this.$route.query.id);
+              this.menuData = this.addLevel(treeData, 1);
+            },
+            getSysMenu() {
+              this.$api.role.sysRoleGetRoleHome({roleId: this.$store.state.userInfo.roleIdList[0]}).then(({data}) => {
+                if (data === null) {
+                  data = []
+                }
+                data = data.sort((a, b) => a.sort - b.sort);
+                let menu = data;//.filter(item => item.belong);
+                let menuData = [];
+                let menuFun = (menu) => {
+                  menuData = [...menuData, ...menu]
+                  let parentIds = menu.map(item => item.parentId);
+                  if (parentIds.length) {
+                    menuFun(data.filter(item => parentIds.find(el => el === item.id)))
+                  }
+                }
+                menuFun(menu);
+
+                let treeData = menuData.map(item => ({
+                  id: item.id,
+                  parentId: item.parentId,
+                  label: item.name,
+                  href: item.href,
+                  icon: item.iconHref,
+                  isCollage: true,
+                  belong: item.belong,
+                  isUrl: item.isUrl
+                }));
+                // 去重
+                let obj = {};
+                treeData.forEach(item => {
+                  obj[item.id] = item;
+                })
+
+                this.$store.commit('saveMenuData', Object.values(obj));
+
+                this.getMenu();
+              });
+            }
+        },
+        created() {
+            // 判定菜单是否存在，存在则不加载
+            let menuData = this.$store.state.menuData;
+            if (menuData.length == 0) {
+              this.getSysMenu();
+            } else {
+              this.getMenu();
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .el-header {
+        background: url("../assets/imgs/bg-header.png") no-repeat center center;
+        background-size: cover;
+        padding: 0;
+    }
+
+    .main-content {
+        height: calc(100vh - 60px);
+
+        .el-aside {
+            background-color: #FFFFFF;
+
+            .menu {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .el-main {
+            background-color: #F8F8FA;
+            padding: 0;
+
+            ::v-deep .main.el-scrollbar {
+                height: 100%;
+
+                .el-scrollbar__view {
+                    padding: 10px 8px;
+                }
+            }
+
+            ::v-deep .main1.el-scrollbar {
+                height: 100%;
+
+                .el-scrollbar__view {
+                    height: 100% !important;
+                    padding: 10px 8px;
+                }
+            }
+        }
+    }
+</style>