| 1 |
- {"remainingRequest":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\layout\\navBars\\breadcrumb\\breadcrumb.vue?vue&type=style&index=0&id=a68ffd92&scoped=true&lang=scss","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\layout\\navBars\\breadcrumb\\breadcrumb.vue","mtime":1761185180053},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQoubGF5b3V0LW5hdmJhcnMtYnJlYWRjcnVtYiB7DQogIC8vIGZsZXg6IDE7DQogIGhlaWdodDogaW5oZXJpdDsNCiAgZGlzcGxheTogZmxleDsNCiAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAgcGFkZGluZy1sZWZ0OiAxNXB4Ow0KICAubGF5b3V0LW5hdmJhcnMtYnJlYWRjcnVtYi1pY29uIHsNCiAgICBjdXJzb3I6IHBvaW50ZXI7DQogICAgZm9udC1zaXplOiAxOHB4Ow0KICAgIG1hcmdpbi1yaWdodDogMTVweDsNCiAgICBjb2xvcjogdmFyKC0tcHJldi1iZy10b3BCYXJDb2xvcik7DQogICAgb3BhY2l0eTogMC44Ow0KICAgICY6aG92ZXIgew0KICAgICAgb3BhY2l0eTogMTsNCiAgICB9DQogIH0NCiAgLmxheW91dC1uYXZiYXJzLWJyZWFkY3J1bWItc3BhbiB7DQogICAgb3BhY2l0eTogMC43Ow0KICAgIGNvbG9yOiB2YXIoLS1wcmV2LWJnLXRvcEJhckNvbG9yKTsNCiAgfQ0KICAubGF5b3V0LW5hdmJhcnMtYnJlYWRjcnVtYi1pY29uZm9udCB7DQogICAgZm9udC1zaXplOiAxNHB4Ow0KICAgIG1hcmdpbi1yaWdodDogNXB4Ow0KICB9DQp9DQo="},{"version":3,"sources":["breadcrumb.vue"],"names":[],"mappings":";AA4LA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"breadcrumb.vue","sourceRoot":"src/layout/navBars/breadcrumb","sourcesContent":["<template>\r\n <div class=\"layout-navbars-breadcrumb\">\r\n <!-- {{[...breadCrumbList,...crumbPast]}} -->\r\n <i\r\n v-if=\"collapseShow\"\r\n class=\"layout-navbars-breadcrumb-icon\"\r\n :class=\"getThemeConfig.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'\"\r\n v-db-click\r\n @click=\"onThemeConfigChange\"\r\n ></i>\r\n <el-breadcrumb class=\"layout-navbars-breadcrumb-hide\" v-if=\"isShowcrumb\" :style=\"{ display: isShowBreadcrumb }\">\r\n <transition-group name=\"breadcrumb\" mode=\"out-in\">\r\n <el-breadcrumb-item v-for=\"(v, k) in [...breadCrumbList, ...crumbPast]\" :key=\"v.path\">\r\n <span v-if=\"k == 1\" class=\"layout-navbars-breadcrumb-span\">\r\n <Icon\r\n :type=\"v.icon\"\r\n class=\"ivu-icon layout-navbars-breadcrumb-iconfont\"\r\n v-if=\"getThemeConfig.isBreadcrumbIcon\"\r\n />{{ $t(v.title) }}\r\n </span>\r\n <a v-else v-db-click @click.prevent=\"onBreadcrumbClick(v)\">\r\n <Icon\r\n :type=\"v.icon\"\r\n class=\"ivu-icon layout-navbars-breadcrumb-iconfont\"\r\n v-if=\"getThemeConfig.isBreadcrumbIcon\"\r\n />{{ $t(v.title) }}\r\n </a>\r\n </el-breadcrumb-item>\r\n </transition-group>\r\n </el-breadcrumb>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { Local } from '@/utils/storage.js';\r\nimport { R } from '@/libs/util';\r\nimport { getMenuopen } from '@/libs/util';\r\n\r\nexport default {\r\n name: 'layoutBreadcrumb',\r\n data() {\r\n return {\r\n breadcrumbList: [],\r\n routeSplit: [],\r\n routeSplitFirst: '',\r\n routeSplitIndex: 1,\r\n };\r\n },\r\n computed: {\r\n breadCrumbList() {\r\n let menuList = this.$store.state.menus.menusName;\r\n let openMenus = getMenuopen(this.$route, menuList);\r\n let allMenuList = R(menuList, []);\r\n let selectMenu = [];\r\n if (allMenuList.length > 0) {\r\n openMenus.forEach((i) => {\r\n allMenuList.forEach((a) => {\r\n if (i === a.path) {\r\n selectMenu.push(a);\r\n }\r\n });\r\n });\r\n }\r\n return selectMenu;\r\n },\r\n crumbPast() {\r\n let that = this;\r\n let menuList = that.$store.state.menus.menusName;\r\n let allMenuList = R(menuList, []);\r\n let selectMenu = [];\r\n if (allMenuList.length > 0) {\r\n allMenuList.forEach((a) => {\r\n if (that.$route.path === a.path) {\r\n selectMenu.push(a);\r\n }\r\n });\r\n }\r\n return selectMenu;\r\n },\r\n // 获取布局配置信息\r\n getThemeConfig() {\r\n return this.$store.state.themeConfig.themeConfig;\r\n },\r\n // 动态设置经典、横向布局不显示\r\n isShowBreadcrumb() {\r\n const { layout, isBreadcrumb } = this.$store.state.themeConfig.themeConfig;\r\n if (layout === 'transverse' || layout === 'classic') {\r\n return 'none';\r\n } else {\r\n return isBreadcrumb ? '' : 'none';\r\n }\r\n },\r\n isShowcrumb() {\r\n const { layout } = this.$store.state.themeConfig.themeConfig;\r\n if (layout === 'transverse' || layout === 'classic') {\r\n return false;\r\n } else {\r\n return true;\r\n }\r\n },\r\n collapseShow() {\r\n return ['defaults', 'columns'].includes(this.$store.state.themeConfig.themeConfig.layout);\r\n },\r\n },\r\n mounted() {\r\n this.initRouteSplit(this.$route.path);\r\n },\r\n methods: {\r\n // breadcrumb 当前项点击时\r\n onBreadcrumbClick(v) {\r\n const { redirect, path } = v;\r\n if (redirect) this.$router.push(redirect);\r\n else this.$router.push(path);\r\n },\r\n // breadcrumb icon 点击菜单展开与收起\r\n onThemeConfigChange() {\r\n if (\r\n this.$store.state.themeConfig.themeConfig.layout == 'columns' &&\r\n !this.$store.state.menus.childMenuList.length &&\r\n this.$store.state.themeConfig.themeConfig.isCollapse\r\n ) {\r\n return;\r\n }\r\n this.$store.state.themeConfig.themeConfig.isCollapse = !this.$store.state.themeConfig.themeConfig.isCollapse;\r\n this.setLocalThemeConfig();\r\n },\r\n // 存储布局配置\r\n setLocalThemeConfig() {\r\n Local.remove('themeConfigPrev');\r\n Local.set('themeConfigPrev', this.$store.state.themeConfig.themeConfig);\r\n },\r\n // 递归设置 breadcrumb\r\n getBreadcrumbList(arr) {\r\n arr.map((item) => {\r\n this.routeSplit.map((v, k, arrs) => {\r\n if (this.routeSplitFirst === item.path) {\r\n this.routeSplitFirst += `/${arrs[this.routeSplitIndex]}`;\r\n this.breadcrumbList.push(item);\r\n this.routeSplitIndex++;\r\n if (item.children) this.getBreadcrumbList(item.children);\r\n }\r\n });\r\n });\r\n },\r\n // 当前路由分割处理\r\n initRouteSplit(path) {\r\n this.breadcrumbList = [\r\n {\r\n path: '/',\r\n meta: {\r\n title: this.$store.state.routesList.routesList[0].title,\r\n icon: this.$store.state.routesList.routesList[0].icon,\r\n },\r\n },\r\n ];\r\n // this.routeSplit = path.split('/');\r\n // this.routeSplit.shift();\r\n this.routeSplitFirst = path;\r\n this.routeSplitIndex = 1;\r\n this.getBreadcrumbList(this.$store.state.routesList.routesList);\r\n },\r\n },\r\n // 监听路由的变化\r\n watch: {\r\n $route: {\r\n handler(newVal) {\r\n // this.initRouteSplit(newVal.path);\r\n let menuList = this.$store.state.menus.menusName;\r\n let openMenus = getMenuopen(newVal, menuList);\r\n let allMenuList = R(menuList, []);\r\n let selectMenu = [];\r\n if (allMenuList.length > 0) {\r\n openMenus.forEach((i) => {\r\n allMenuList.forEach((a) => {\r\n if (i === a.path) {\r\n selectMenu.push(a);\r\n }\r\n });\r\n });\r\n }\r\n },\r\n deep: true,\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.layout-navbars-breadcrumb {\r\n // flex: 1;\r\n height: inherit;\r\n display: flex;\r\n align-items: center;\r\n padding-left: 15px;\r\n .layout-navbars-breadcrumb-icon {\r\n cursor: pointer;\r\n font-size: 18px;\r\n margin-right: 15px;\r\n color: var(--prev-bg-topBarColor);\r\n opacity: 0.8;\r\n &:hover {\r\n opacity: 1;\r\n }\r\n }\r\n .layout-navbars-breadcrumb-span {\r\n opacity: 0.7;\r\n color: var(--prev-bg-topBarColor);\r\n }\r\n .layout-navbars-breadcrumb-iconfont {\r\n font-size: 14px;\r\n margin-right: 5px;\r\n }\r\n}\r\n</style>\r\n"]}]}
|
