| 1 |
- {"ast":null,"code":"import \"core-js/modules/es.array.filter.js\";\nimport \"core-js/modules/es.array.includes.js\";\nimport \"core-js/modules/es.object.to-string.js\";\nimport \"core-js/modules/es.string.includes.js\";\nimport \"core-js/modules/web.timers.js\";\nexport default {\n name: 'App',\n data: function data() {\n return {\n searchQuery: '',\n showSidebar: false,\n windowWidth: window.innerWidth,\n selectedProcessType: 'employee'\n };\n },\n computed: {\n currentRoute: function currentRoute() {\n return this.$route.path;\n },\n filteredItems: function filteredItems() {\n var _this = this;\n var items = [{\n path: '/process/employee',\n title: '员工入职流程'\n }, {\n path: '/process/x6',\n title: 'X6员工入职流程图'\n }, {\n path: '/process/sales',\n title: '销售订单流程'\n }, {\n path: '/process/shipping',\n title: '发货业务流程'\n }];\n return items.filter(function (item) {\n return item.title.toLowerCase().includes(_this.searchQuery.toLowerCase());\n });\n },\n isMobile: function isMobile() {\n return this.windowWidth < 768;\n },\n isEmployeeProcessActive: function isEmployeeProcessActive() {\n return this.selectedProcessType === 'employee' || this.currentRoute === '/process/employee';\n },\n isSalesProcessActive: function isSalesProcessActive() {\n return this.selectedProcessType === 'sales' || this.currentRoute === '/process/sales';\n },\n isShippingProcessActive: function isShippingProcessActive() {\n return this.selectedProcessType === 'shipping' || this.currentRoute === '/process/shipping';\n }\n },\n methods: {\n handleSearch: function handleSearch() {\n // 搜索逻辑保留，可以过滤菜单项\n },\n handleResize: function handleResize() {\n this.windowWidth = window.innerWidth;\n },\n handleMobileMenuSelect: function handleMobileMenuSelect() {\n var _this2 = this;\n // 在应用选择类型变更后再关闭侧边栏\n setTimeout(function () {\n _this2.showSidebar = false;\n }, 300);\n },\n handleProcessTypeChange: function handleProcessTypeChange(type) {\n this.selectedProcessType = type;\n // 通知流程组件更新流程类型\n this.$root.$emit('change-process-type', type);\n }\n },\n mounted: function mounted() {\n window.addEventListener('resize', this.handleResize);\n\n // 根据当前路径初始化\n var currentPath = this.$route.path;\n if (currentPath.includes('employee')) {\n this.selectedProcessType = 'employee';\n } else if (currentPath.includes('sales')) {\n this.selectedProcessType = 'sales';\n } else if (currentPath.includes('shipping')) {\n this.selectedProcessType = 'shipping';\n }\n },\n beforeDestroy: function beforeDestroy() {\n window.removeEventListener('resize', this.handleResize);\n }\n};","map":{"version":3,"names":["name","data","searchQuery","showSidebar","windowWidth","window","innerWidth","selectedProcessType","computed","currentRoute","$route","path","filteredItems","_this","items","title","filter","item","toLowerCase","includes","isMobile","isEmployeeProcessActive","isSalesProcessActive","isShippingProcessActive","methods","handleSearch","handleResize","handleMobileMenuSelect","_this2","setTimeout","handleProcessTypeChange","type","$root","$emit","mounted","addEventListener","currentPath","beforeDestroy","removeEventListener"],"sources":["src/App.vue"],"sourcesContent":["<template>\n <div id=\"app\">\n <el-container>\n <!-- 移动端显示的顶部栏 -->\n <el-header v-if=\"isMobile\" class=\"mobile-header\">\n <div class=\"mobile-header-content\">\n <i class=\"el-icon-s-platform\" style=\"font-size: 24px; color: #409EFF;\"></i>\n <h3 class=\"mobile-title\">业务流程管理</h3>\n <i class=\"el-icon-s-unfold\" @click=\"showSidebar = true\"></i>\n </div>\n </el-header>\n \n <!-- 侧边栏 - 在移动端作为抽屉显示 -->\n <el-drawer\n v-if=\"isMobile\"\n title=\"业务流程导航\"\n :visible.sync=\"showSidebar\"\n direction=\"ltr\"\n size=\"80%\">\n <div class=\"mobile-sidebar\">\n <div class=\"search-container\">\n <el-input\n v-model=\"searchQuery\"\n placeholder=\"搜索业务名称\"\n prefix-icon=\"el-icon-search\"\n clearable\n @input=\"handleSearch\">\n </el-input>\n </div>\n \n <!-- 移动端流程类型选择器 -->\n <div class=\"process-type-selector\">\n <h4>业务流程导航</h4>\n <el-menu class=\"process-type-menu\" :router=\"true\">\n <el-menu-item index=\"/process/employee\" @click=\"handleProcessTypeChange('employee')\" :class=\"{'is-active': isEmployeeProcessActive}\">\n <i class=\"el-icon-user\"></i>\n <span>员工入职流程</span>\n </el-menu-item>\n <el-menu-item index=\"/process/sales\" @click=\"handleProcessTypeChange('sales')\" :class=\"{'is-active': isSalesProcessActive}\">\n <i class=\"el-icon-goods\"></i>\n <span>销售订单流程</span>\n </el-menu-item>\n <el-menu-item index=\"/process/shipping\" @click=\"handleProcessTypeChange('shipping')\" :class=\"{'is-active': isShippingProcessActive}\">\n <i class=\"el-icon-truck\"></i>\n <span>发货业务流程</span>\n </el-menu-item>\n <el-menu-item index=\"/process/x6\">\n <i class=\"el-icon-position\"></i>\n <span>X6员工入职流程图</span>\n </el-menu-item>\n </el-menu>\n </div>\n </div>\n </el-drawer>\n \n <!-- 桌面端的常规侧边栏 -->\n <el-aside v-if=\"!isMobile\" width=\"250px\">\n <div class=\"logo-container\">\n <!-- 使用 Element UI 图标临时替代 logo -->\n <i class=\"el-icon-s-platform\" style=\"font-size: 40px; color: #409EFF;\"></i>\n </div>\n <div class=\"search-container\">\n <el-input\n v-model=\"searchQuery\"\n placeholder=\"搜索业务名称\"\n prefix-icon=\"el-icon-search\"\n clearable\n @input=\"handleSearch\">\n </el-input>\n </div>\n \n <!-- 流程类型选择器 -->\n <div class=\"process-type-selector\">\n <h4>业务流程导航</h4>\n <el-menu class=\"process-type-menu\" :router=\"true\" :default-active=\"currentRoute\">\n <el-menu-item index=\"/process/employee\" @click=\"handleProcessTypeChange('employee')\" :class=\"{'is-active': isEmployeeProcessActive}\">\n <i class=\"el-icon-user\"></i>\n <span>员工入职流程</span>\n </el-menu-item>\n <el-menu-item index=\"/process/sales\" @click=\"handleProcessTypeChange('sales')\" :class=\"{'is-active': isSalesProcessActive}\">\n <i class=\"el-icon-goods\"></i>\n <span>销售订单流程</span>\n </el-menu-item>\n <el-menu-item index=\"/process/shipping\" @click=\"handleProcessTypeChange('shipping')\" :class=\"{'is-active': isShippingProcessActive}\">\n <i class=\"el-icon-truck\"></i>\n <span>发货业务流程</span>\n </el-menu-item>\n <el-menu-item index=\"/process/x6\">\n <i class=\"el-icon-position\"></i>\n <span>X6员工入职流程图</span>\n </el-menu-item>\n </el-menu>\n </div>\n </el-aside>\n <el-main>\n <router-view></router-view>\n </el-main>\n </el-container>\n </div>\n</template>\n\n<script>\nexport default {\n name: 'App',\n data() {\n return {\n searchQuery: '',\n showSidebar: false,\n windowWidth: window.innerWidth,\n selectedProcessType: 'employee'\n }\n },\n computed: {\n currentRoute() {\n return this.$route.path\n },\n filteredItems() {\n const items = [\n { path: '/process/employee', title: '员工入职流程' },\n { path: '/process/x6', title: 'X6员工入职流程图' },\n { path: '/process/sales', title: '销售订单流程' },\n { path: '/process/shipping', title: '发货业务流程' }\n ];\n \n return items.filter(item => \n item.title.toLowerCase().includes(this.searchQuery.toLowerCase())\n )\n },\n isMobile() {\n return this.windowWidth < 768\n },\n isEmployeeProcessActive() {\n return this.selectedProcessType === 'employee' || this.currentRoute === '/process/employee'\n },\n isSalesProcessActive() {\n return this.selectedProcessType === 'sales' || this.currentRoute === '/process/sales'\n },\n isShippingProcessActive() {\n return this.selectedProcessType === 'shipping' || this.currentRoute === '/process/shipping'\n }\n },\n methods: {\n handleSearch() {\n // 搜索逻辑保留，可以过滤菜单项\n },\n handleResize() {\n this.windowWidth = window.innerWidth\n },\n handleMobileMenuSelect() {\n // 在应用选择类型变更后再关闭侧边栏\n setTimeout(() => {\n this.showSidebar = false;\n }, 300);\n },\n handleProcessTypeChange(type) {\n this.selectedProcessType = type\n // 通知流程组件更新流程类型\n this.$root.$emit('change-process-type', type)\n }\n },\n mounted() {\n window.addEventListener('resize', this.handleResize)\n \n // 根据当前路径初始化\n const currentPath = this.$route.path\n if (currentPath.includes('employee')) {\n this.selectedProcessType = 'employee'\n } else if (currentPath.includes('sales')) {\n this.selectedProcessType = 'sales'\n } else if (currentPath.includes('shipping')) {\n this.selectedProcessType = 'shipping'\n }\n },\n beforeDestroy() {\n window.removeEventListener('resize', this.handleResize)\n }\n}\n</script>\n\n<style>\n#app {\n font-family: Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n height: 100vh;\n}\n\n.el-container {\n height: 100%;\n}\n\n.el-aside {\n background-color: #f8f9fa;\n border-right: 1px solid #e9ecef;\n}\n\n.logo-container {\n padding: 20px;\n text-align: center;\n}\n\n.search-container {\n padding: 0 20px 20px 20px;\n}\n\n/* 流程类型选择器样式 */\n.process-type-selector {\n margin: 0 20px 20px;\n padding: 10px 0;\n background-color: transparent;\n border-radius: 0;\n box-shadow: none;\n transition: all 0.3s ease;\n border-bottom: 1px solid #e9ecef;\n}\n\n.process-type-selector h4 {\n margin-top: 0;\n margin-bottom: 12px;\n color: #909399;\n font-size: 14px;\n font-weight: 500;\n padding: 0 20px;\n}\n\n.process-type-menu {\n border-right: none;\n}\n\n.process-type-menu .el-menu-item {\n height: 56px;\n line-height: 56px;\n font-size: 16px;\n}\n\n.process-type-menu .el-menu-item i {\n margin-right: 5px;\n font-size: 18px;\n}\n\n.process-type-menu .el-menu-item:hover {\n background-color: #f2f6fc;\n}\n\n.process-type-menu .el-menu-item.is-active {\n color: #409EFF;\n background-color: #ecf5ff;\n border-left: 3px solid #409EFF;\n}\n\n.el-menu-vertical {\n border-right: none;\n}\n\n.el-main {\n padding: 20px;\n background-color: #fff;\n overflow-x: auto;\n}\n\n.el-menu-item {\n font-size: 16px;\n}\n\n.el-menu-item i {\n margin-right: 5px;\n font-size: 18px;\n}\n\n/* 移动端样式 */\n.mobile-header {\n background-color: #fff;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n padding: 0;\n}\n\n.mobile-header-content {\n height: 60px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 15px;\n}\n\n.mobile-title {\n margin: 0;\n font-size: 18px;\n color: #303133;\n}\n\n.mobile-sidebar {\n padding: 20px 0;\n}\n\n.el-drawer__body {\n padding: 0;\n}\n\n.el-drawer__header {\n margin-bottom: 0;\n padding: 15px 20px;\n border-bottom: 1px solid #ebeef5;\n}\n\n@media (max-width: 767px) {\n .el-main {\n padding: 15px;\n }\n \n .search-container {\n padding: 0 15px 15px 15px;\n }\n \n .process-type-selector {\n margin: 0 15px 15px;\n padding: 10px 0;\n }\n \n .process-type-selector h4 {\n padding: 0 15px;\n }\n \n .process-type-menu .el-menu-item {\n height: 48px;\n line-height: 48px;\n padding: 0 15px;\n }\n}\n</style> "],"mappings":";;;;;AAsGA;EACAA,IAAA;EACAC,IAAA,WAAAA,KAAA;IACA;MACAC,WAAA;MACAC,WAAA;MACAC,WAAA,EAAAC,MAAA,CAAAC,UAAA;MACAC,mBAAA;IACA;EACA;EACAC,QAAA;IACAC,YAAA,WAAAA,aAAA;MACA,YAAAC,MAAA,CAAAC,IAAA;IACA;IACAC,aAAA,WAAAA,cAAA;MAAA,IAAAC,KAAA;MACA,IAAAC,KAAA,IACA;QAAAH,IAAA;QAAAI,KAAA;MAAA,GACA;QAAAJ,IAAA;QAAAI,KAAA;MAAA,GACA;QAAAJ,IAAA;QAAAI,KAAA;MAAA,GACA;QAAAJ,IAAA;QAAAI,KAAA;MAAA,EACA;MAEA,OAAAD,KAAA,CAAAE,MAAA,WAAAC,IAAA;QAAA,OACAA,IAAA,CAAAF,KAAA,CAAAG,WAAA,GAAAC,QAAA,CAAAN,KAAA,CAAAX,WAAA,CAAAgB,WAAA;MAAA,CACA;IACA;IACAE,QAAA,WAAAA,SAAA;MACA,YAAAhB,WAAA;IACA;IACAiB,uBAAA,WAAAA,wBAAA;MACA,YAAAd,mBAAA,wBAAAE,YAAA;IACA;IACAa,oBAAA,WAAAA,qBAAA;MACA,YAAAf,mBAAA,qBAAAE,YAAA;IACA;IACAc,uBAAA,WAAAA,wBAAA;MACA,YAAAhB,mBAAA,wBAAAE,YAAA;IACA;EACA;EACAe,OAAA;IACAC,YAAA,WAAAA,aAAA;MACA;IAAA,CACA;IACAC,YAAA,WAAAA,aAAA;MACA,KAAAtB,WAAA,GAAAC,MAAA,CAAAC,UAAA;IACA;IACAqB,sBAAA,WAAAA,uBAAA;MAAA,IAAAC,MAAA;MACA;MACAC,UAAA;QACAD,MAAA,CAAAzB,WAAA;MACA;IACA;IACA2B,uBAAA,WAAAA,wBAAAC,IAAA;MACA,KAAAxB,mBAAA,GAAAwB,IAAA;MACA;MACA,KAAAC,KAAA,CAAAC,KAAA,wBAAAF,IAAA;IACA;EACA;EACAG,OAAA,WAAAA,QAAA;IACA7B,MAAA,CAAA8B,gBAAA,gBAAAT,YAAA;;IAEA;IACA,IAAAU,WAAA,QAAA1B,MAAA,CAAAC,IAAA;IACA,IAAAyB,WAAA,CAAAjB,QAAA;MACA,KAAAZ,mBAAA;IACA,WAAA6B,WAAA,CAAAjB,QAAA;MACA,KAAAZ,mBAAA;IACA,WAAA6B,WAAA,CAAAjB,QAAA;MACA,KAAAZ,mBAAA;IACA;EACA;EACA8B,aAAA,WAAAA,cAAA;IACAhC,MAAA,CAAAiC,mBAAA,gBAAAZ,YAAA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
