文件上传优化

src/layout/components/Sidebar/Item.vue

@@ -18,14 +18,14 @@ export default {
 
     if (icon) {
       if (icon.includes('el-icon')) {
-        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
+        // vnodes.push(<i class={[icon, 'sub-el-icon']} />)
       } else {
         // vnodes.push(<svg-icon icon-class={icon}/>)
       }
     }
 
     if (title) {
-      vnodes.push(<span slot='title'>{(title)}</span>)
+      // vnodes.push(<span slot='title'>{(title)}</span>)
     }
     return vnodes
   }

src/router/index.js

@@ -87,6 +87,11 @@ export const asyncRoutes = [
     component: Layout,
     redirect: '/dashboard',
     children: [
+
+
+
+
+
       {
         path: 'dashboard',
         component: () => import('@/views/dashboard/index'),
@@ -229,6 +234,10 @@ export const asyncRoutes = [
           },
         ]
       }
+
+
+
+
     ]
   },
 

src/router/modules/charts.js

+/*
+ * @Author: czj
+ * @Date: 2023-02-24 16:50:23
+ * @Description: 
+ * @FilePath: \AdministrationHome\src\router\modules\charts.js
+ */
 /** When your routing table is too long, you can split it into small modules**/
 
-import Layout from '@/layout'
+// import Layout from '@/layout'
 
-const chartsRouter = {
-  path: '/charts',
-  component: Layout,
-  redirect: 'noRedirect',
-  name: 'Charts',
-  meta: {
-    title: 'Charts',
-    icon: 'chart'
-  },
-  children: [
-    {
-      path: 'keyboard',
-      component: () => import('@/views/charts/keyboard'),
-      name: 'KeyboardChart',
-      meta: { title: 'Keyboard Chart', noCache: true }
-    },
-    {
-      path: 'line',
-      component: () => import('@/views/charts/line'),
-      name: 'LineChart',
-      meta: { title: 'Line Chart', noCache: true }
-    },
-    {
-      path: 'mix-chart',
-      component: () => import('@/views/charts/mix-chart'),
-      name: 'MixChart',
-      meta: { title: 'Mix Chart', noCache: true }
-    }
-  ]
-}
+// const chartsRouter = {
+//   path: '/charts',
+//   component: Layout,
+//   redirect: 'noRedirect',
+//   name: 'Charts',
+//   meta: {
+//     title: 'Charts',
+//     icon: 'chart'
+//   },
+//   children: [
+//     {
+//       path: 'keyboard',
+//       component: () => import('@/views/charts/keyboard'),
+//       name: 'KeyboardChart',
+//       meta: { title: 'Keyboard Chart', noCache: true }
+//     },
+//     {
+//       path: 'line',
+//       component: () => import('@/views/charts/line'),
+//       name: 'LineChart',
+//       meta: { title: 'Line Chart', noCache: true }
+//     },
+//     {
+//       path: 'mix-chart',
+//       component: () => import('@/views/charts/mix-chart'),
+//       name: 'MixChart',
+//       meta: { title: 'Mix Chart', noCache: true }
+//     }
+//   ]
+// }
 
-export default chartsRouter
+// export default chartsRouter

src/router/modules/components.js

-/** When your routing table is too long, you can split it into small modules **/
+// /** When your routing table is too long, you can split it into small modules **/
 
-import Layout from '@/layout'
+// import Layout from '@/layout'
 
-const componentsRouter = {
-  path: '/components',
-  component: Layout,
-  redirect: 'noRedirect',
-  name: 'ComponentDemo',
-  meta: {
-    title: 'Components',
-    icon: 'component'
-  },
-  children: [
-    {
-      path: 'tinymce',
-      component: () => import('@/views/components-demo/tinymce'),
-      name: 'TinymceDemo',
-      meta: { title: 'Tinymce' }
-    },
-    {
-      path: 'markdown',
-      component: () => import('@/views/components-demo/markdown'),
-      name: 'MarkdownDemo',
-      meta: { title: 'Markdown' }
-    },
-    {
-      path: 'json-editor',
-      component: () => import('@/views/components-demo/json-editor'),
-      name: 'JsonEditorDemo',
-      meta: { title: 'JSON Editor' }
-    },
-    {
-      path: 'split-pane',
-      component: () => import('@/views/components-demo/split-pane'),
-      name: 'SplitpaneDemo',
-      meta: { title: 'SplitPane' }
-    },
-    {
-      path: 'avatar-upload',
-      component: () => import('@/views/components-demo/avatar-upload'),
-      name: 'AvatarUploadDemo',
-      meta: { title: 'Upload' }
-    },
-    {
-      path: 'dropzone',
-      component: () => import('@/views/components-demo/dropzone'),
-      name: 'DropzoneDemo',
-      meta: { title: 'Dropzone' }
-    },
-    {
-      path: 'sticky',
-      component: () => import('@/views/components-demo/sticky'),
-      name: 'StickyDemo',
-      meta: { title: 'Sticky' }
-    },
-    {
-      path: 'count-to',
-      component: () => import('@/views/components-demo/count-to'),
-      name: 'CountToDemo',
-      meta: { title: 'Count To' }
-    },
-    {
-      path: 'mixin',
-      component: () => import('@/views/components-demo/mixin'),
-      name: 'ComponentMixinDemo',
-      meta: { title: 'Component Mixin' }
-    },
-    {
-      path: 'back-to-top',
-      component: () => import('@/views/components-demo/back-to-top'),
-      name: 'BackToTopDemo',
-      meta: { title: 'Back To Top' }
-    },
-    {
-      path: 'drag-dialog',
-      component: () => import('@/views/components-demo/drag-dialog'),
-      name: 'DragDialogDemo',
-      meta: { title: 'Drag Dialog' }
-    },
-    {
-      path: 'drag-select',
-      component: () => import('@/views/components-demo/drag-select'),
-      name: 'DragSelectDemo',
-      meta: { title: 'Drag Select' }
-    },
-    {
-      path: 'dnd-list',
-      component: () => import('@/views/components-demo/dnd-list'),
-      name: 'DndListDemo',
-      meta: { title: 'Dnd List' }
-    },
-    {
-      path: 'drag-kanban',
-      component: () => import('@/views/components-demo/drag-kanban'),
-      name: 'DragKanbanDemo',
-      meta: { title: 'Drag Kanban' }
-    }
-  ]
-}
+// const componentsRouter = {
+//   path: '/components',
+//   component: Layout,
+//   redirect: 'noRedirect',
+//   name: 'ComponentDemo',
+//   meta: {
+//     title: 'Components',
+//     icon: 'component'
+//   },
+//   children: [
+//     {
+//       path: 'tinymce',
+//       component: () => import('@/views/components-demo/tinymce'),
+//       name: 'TinymceDemo',
+//       meta: { title: 'Tinymce' }
+//     },
+//     {
+//       path: 'markdown',
+//       component: () => import('@/views/components-demo/markdown'),
+//       name: 'MarkdownDemo',
+//       meta: { title: 'Markdown' }
+//     },
+//     {
+//       path: 'json-editor',
+//       component: () => import('@/views/components-demo/json-editor'),
+//       name: 'JsonEditorDemo',
+//       meta: { title: 'JSON Editor' }
+//     },
+//     {
+//       path: 'split-pane',
+//       component: () => import('@/views/components-demo/split-pane'),
+//       name: 'SplitpaneDemo',
+//       meta: { title: 'SplitPane' }
+//     },
+//     {
+//       path: 'avatar-upload',
+//       component: () => import('@/views/components-demo/avatar-upload'),
+//       name: 'AvatarUploadDemo',
+//       meta: { title: 'Upload' }
+//     },
+//     {
+//       path: 'dropzone',
+//       component: () => import('@/views/components-demo/dropzone'),
+//       name: 'DropzoneDemo',
+//       meta: { title: 'Dropzone' }
+//     },
+//     {
+//       path: 'sticky',
+//       component: () => import('@/views/components-demo/sticky'),
+//       name: 'StickyDemo',
+//       meta: { title: 'Sticky' }
+//     },
+//     {
+//       path: 'count-to',
+//       component: () => import('@/views/components-demo/count-to'),
+//       name: 'CountToDemo',
+//       meta: { title: 'Count To' }
+//     },
+//     {
+//       path: 'mixin',
+//       component: () => import('@/views/components-demo/mixin'),
+//       name: 'ComponentMixinDemo',
+//       meta: { title: 'Component Mixin' }
+//     },
+//     {
+//       path: 'back-to-top',
+//       component: () => import('@/views/components-demo/back-to-top'),
+//       name: 'BackToTopDemo',
+//       meta: { title: 'Back To Top' }
+//     },
+//     {
+//       path: 'drag-dialog',
+//       component: () => import('@/views/components-demo/drag-dialog'),
+//       name: 'DragDialogDemo',
+//       meta: { title: 'Drag Dialog' }
+//     },
+//     {
+//       path: 'drag-select',
+//       component: () => import('@/views/components-demo/drag-select'),
+//       name: 'DragSelectDemo',
+//       meta: { title: 'Drag Select' }
+//     },
+//     {
+//       path: 'dnd-list',
+//       component: () => import('@/views/components-demo/dnd-list'),
+//       name: 'DndListDemo',
+//       meta: { title: 'Dnd List' }
+//     },
+//     {
+//       path: 'drag-kanban',
+//       component: () => import('@/views/components-demo/drag-kanban'),
+//       name: 'DragKanbanDemo',
+//       meta: { title: 'Drag Kanban' }
+//     }
+//   ]
+// }
 
-export default componentsRouter
+// export default componentsRouter

src/router/modules/nested.js

-/** When your routing table is too long, you can split it into small modules **/
+/*
+ * @Author: czj
+ * @Date: 2023-02-24 16:50:23
+ * @Description: 
+ * @FilePath: \AdministrationHome\src\router\modules\nested.js
+ */
+// /** When your routing table is too long, you can split it into small modules **/
 
-import Layout from '@/layout'
+// import Layout from '@/layout'
 
-const nestedRouter = {
-  path: '/nested',
-  component: Layout,
-  redirect: '/nested/menu1/menu1-1',
-  name: 'Nested',
-  meta: {
-    title: 'Nested Routes',
-    icon: 'nested'
-  },
-  children: [
-    {
-      path: 'menu1',
-      component: () => import('@/views/nested/menu1/index'), // Parent router-view
-      name: 'Menu1',
-      meta: { title: 'Menu 1' },
-      redirect: '/nested/menu1/menu1-1',
-      children: [
-        {
-          path: 'menu1-1',
-          component: () => import('@/views/nested/menu1/menu1-1'),
-          name: 'Menu1-1',
-          meta: { title: 'Menu 1-1' }
-        },
-        {
-          path: 'menu1-2',
-          component: () => import('@/views/nested/menu1/menu1-2'),
-          name: 'Menu1-2',
-          redirect: '/nested/menu1/menu1-2/menu1-2-1',
-          meta: { title: 'Menu 1-2' },
-          children: [
-            {
-              path: 'menu1-2-1',
-              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
-              name: 'Menu1-2-1',
-              meta: { title: 'Menu 1-2-1' }
-            },
-            {
-              path: 'menu1-2-2',
-              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
-              name: 'Menu1-2-2',
-              meta: { title: 'Menu 1-2-2' }
-            }
-          ]
-        },
-        {
-          path: 'menu1-3',
-          component: () => import('@/views/nested/menu1/menu1-3'),
-          name: 'Menu1-3',
-          meta: { title: 'Menu 1-3' }
-        }
-      ]
-    },
-    {
-      path: 'menu2',
-      name: 'Menu2',
-      component: () => import('@/views/nested/menu2/index'),
-      meta: { title: 'Menu 2' }
-    }
-  ]
-}
+// const nestedRouter = {
+//   path: '/nested',
+//   component: Layout,
+//   redirect: '/nested/menu1/menu1-1',
+//   name: 'Nested',
+//   meta: {
+//     title: 'Nested Routes',
+//     icon: 'nested'
+//   },
+//   children: [
+//     {
+//       path: 'menu1',
+//       component: () => import('@/views/nested/menu1/index'), // Parent router-view
+//       name: 'Menu1',
+//       meta: { title: 'Menu 1' },
+//       redirect: '/nested/menu1/menu1-1',
+//       children: [
+//         {
+//           path: 'menu1-1',
+//           component: () => import('@/views/nested/menu1/menu1-1'),
+//           name: 'Menu1-1',
+//           meta: { title: 'Menu 1-1' }
+//         },
+//         {
+//           path: 'menu1-2',
+//           component: () => import('@/views/nested/menu1/menu1-2'),
+//           name: 'Menu1-2',
+//           redirect: '/nested/menu1/menu1-2/menu1-2-1',
+//           meta: { title: 'Menu 1-2' },
+//           children: [
+//             {
+//               path: 'menu1-2-1',
+//               component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
+//               name: 'Menu1-2-1',
+//               meta: { title: 'Menu 1-2-1' }
+//             },
+//             {
+//               path: 'menu1-2-2',
+//               component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
+//               name: 'Menu1-2-2',
+//               meta: { title: 'Menu 1-2-2' }
+//             }
+//           ]
+//         },
+//         {
+//           path: 'menu1-3',
+//           component: () => import('@/views/nested/menu1/menu1-3'),
+//           name: 'Menu1-3',
+//           meta: { title: 'Menu 1-3' }
+//         }
+//       ]
+//     },
+//     {
+//       path: 'menu2',
+//       name: 'Menu2',
+//       component: () => import('@/views/nested/menu2/index'),
+//       meta: { title: 'Menu 2' }
+//     }
+//   ]
+// }
 
-export default nestedRouter
+// export default nestedRouter

src/router/modules/table.js

-/** When your routing table is too long, you can split it into small modules **/
+/*
+ * @Author: czj
+ * @Date: 2023-02-24 16:50:23
+ * @Description: 
+ * @FilePath: \AdministrationHome\src\router\modules\table.js
+ */
+// /** When your routing table is too long, you can split it into small modules **/
 
-import Layout from '@/layout'
+// import Layout from '@/layout'
 
-const tableRouter = {
-  path: '/table',
-  component: Layout,
-  redirect: '/table/complex-table',
-  name: 'Table',
-  meta: {
-    title: 'Table',
-    icon: 'table'
-  },
-  children: [
-    {
-      path: 'dynamic-table',
-      component: () => import('@/views/table/dynamic-table/index'),
-      name: 'DynamicTable',
-      meta: { title: 'Dynamic Table' }
-    },
-    {
-      path: 'drag-table',
-      component: () => import('@/views/table/drag-table'),
-      name: 'DragTable',
-      meta: { title: 'Drag Table' }
-    },
-    {
-      path: 'inline-edit-table',
-      component: () => import('@/views/table/inline-edit-table'),
-      name: 'InlineEditTable',
-      meta: { title: 'Inline Edit' }
-    },
-    {
-      path: 'complex-table',
-      component: () => import('@/views/table/complex-table'),
-      name: 'ComplexTable',
-      meta: { title: 'Complex Table' }
-    }
-  ]
-}
-export default tableRouter
+// const tableRouter = {
+//   path: '/table',
+//   component: Layout,
+//   redirect: '/table/complex-table',
+//   name: 'Table',
+//   meta: {
+//     title: 'Table',
+//     icon: 'table'
+//   },
+//   children: [
+//     {
+//       path: 'dynamic-table',
+//       component: () => import('@/views/table/dynamic-table/index'),
+//       name: 'DynamicTable',
+//       meta: { title: 'Dynamic Table' }
+//     },
+//     {
+//       path: 'drag-table',
+//       component: () => import('@/views/table/drag-table'),
+//       name: 'DragTable',
+//       meta: { title: 'Drag Table' }
+//     },
+//     {
+//       path: 'inline-edit-table',
+//       component: () => import('@/views/table/inline-edit-table'),
+//       name: 'InlineEditTable',
+//       meta: { title: 'Inline Edit' }
+//     },
+//     {
+//       path: 'complex-table',
+//       component: () => import('@/views/table/complex-table'),
+//       name: 'ComplexTable',
+//       meta: { title: 'Complex Table' }
+//     }
+//   ]
+// }
+// export default tableRouter

src/store/modules/permission.js

@@ -47,12 +47,20 @@ const mutations = {
     state.routes = constantRoutes.concat(routes)
   }
 }
+/* 
+
+  1. // component: (resolve) => require([`${element.component}`], resolve) // // 变量component: '@/pages/drawSvg/index.vue', // 会报错
+2.// component: (resolve) => require([`@/pages/${element.component}/index.vue`], resolve)//变量 component: 'drawSvg',//ok
+*/
+
 //处理路由地址 不能用 import。使用require，异步
-function routerCom(view_path) {
-  return (resolve) => require([view_path], resolve);
+function routerCom(view_path) {//不支持全路径,支持拼接路径
+  return (resolve) => require([`@/${view_path}`], resolve);
 }
 //过滤数据 /转为树结构
 function filterRouterData(list) {
+  console.log('路由处理的原始数据@@@');
+  console.log(list);
   let result = []
   let map = {}
   if (!Array.isArray(list)) return [];
@@ -93,15 +101,17 @@ const actions = {
     return new Promise(async resolve => {
       let response = await get_permission_btn_menu()
       /* route_tree_all(permission); //转为树结构 */
-      let route_list = filterRouterData(response.permission);
-      // console.log('<<<<<<<<<<<<<<<<<<组装好的路由列表>>>>>>>>>>>>>>>>>>>>>>>>');
+      // let route_list = filterRouterData(response.permission);
+      // console.log('<<<<<<<<<<<<<组装好的路由列表>>>>>>>>>>>>>');
       // console.log(route_list);
       // console.log('权限菜单数据>>>>>>>>>>');
       // console.log(response);
       // console.log('本地路由数据@@@@@@@@@@');
       // console.log(asyncRoutes);
-      // asyncRoutes[0].children = route_list
+      // asyncRoutes[0].children = route_list;
       let accessedRoutes = asyncRoutes || [];
+      console.log('处理好的路由数据');
+      console.log(accessedRoutes);
       commit('SET_ROUTES', accessedRoutes)
       resolve(accessedRoutes)
     })

src/styles/sidebar.css

+:export {
+  menuText: #bfcbd9;
+  menuActiveText: #409EFF;
+  subMenuActiveText: #f4f4f5;
+  menuBg: #304156;
+  menuHover: #263445;
+  subMenuBg: #1f2d3d;
+  subMenuHover: #001528;
+  sideBarWidth: 210px;
+}
+
+#app .main-container {
+  min-height: 100%;
+  transition: margin-left .28s;
+  margin-left: 210px;
+  position: relative;
+}
+
+#app .sidebar-container {
+  transition: width 0.28s;
+  width: 210px !important;
+  background-color: #304156;
+  height: 100%;
+  position: fixed;
+  font-size: 0px;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  overflow: hidden;
+}
+
+#app .sidebar-container .horizontal-collapse-transition {
+  transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+}
+
+#app .sidebar-container .scrollbar-wrapper {
+  overflow-x: hidden !important;
+}
+
+#app .sidebar-container .el-scrollbar__bar.is-vertical {
+  right: 0px;
+}
+
+#app .sidebar-container .el-scrollbar {
+  height: 100%;
+}
+
+#app .sidebar-container.has-logo .el-scrollbar {
+  height: calc(100% - 50px);
+}
+
+#app .sidebar-container .is-horizontal {
+  display: none;
+}
+
+#app .sidebar-container a {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+}
+
+#app .sidebar-container .svg-icon {
+  margin-right: 16px;
+}
+
+#app .sidebar-container .sub-el-icon {
+  margin-right: 12px;
+  margin-left: -2px;
+}
+
+#app .sidebar-container .el-menu {
+  border: none;
+  height: 100%;
+  width: 100% !important;
+}
+
+#app .sidebar-container .submenu-title-noDropdown:hover,
+#app .sidebar-container .el-submenu__title:hover {
+  background-color: #263445 !important;
+}
+
+#app .sidebar-container .is-active > .el-submenu__title {
+  color: #f4f4f5 !important;
+}
+
+#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title,
+#app .sidebar-container .el-submenu .el-menu-item {
+  min-width: 210px !important;
+  background-color: #1f2d3d !important;
+}
+
+#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title:hover,
+#app .sidebar-container .el-submenu .el-menu-item:hover {
+  background-color: #001528 !important;
+}
+
+#app .hideSidebar .sidebar-container {
+  width: 54px !important;
+}
+
+#app .hideSidebar .main-container {
+  margin-left: 54px;
+}
+
+#app .hideSidebar .submenu-title-noDropdown {
+  padding: 0 !important;
+  position: relative;
+}
+
+#app .hideSidebar .submenu-title-noDropdown .el-tooltip {
+  padding: 0 !important;
+}
+
+#app .hideSidebar .submenu-title-noDropdown .el-tooltip .svg-icon {
+  margin-left: 20px;
+}
+
+#app .hideSidebar .submenu-title-noDropdown .el-tooltip .sub-el-icon {
+  margin-left: 19px;
+}
+
+#app .hideSidebar .el-submenu {
+  overflow: hidden;
+}
+
+#app .hideSidebar .el-submenu > .el-submenu__title {
+  padding: 0 !important;
+}
+
+#app .hideSidebar .el-submenu > .el-submenu__title .svg-icon {
+  margin-left: 20px;
+}
+
+#app .hideSidebar .el-submenu > .el-submenu__title .sub-el-icon {
+  margin-left: 19px;
+}
+
+#app .hideSidebar .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
+  display: none;
+}
+
+#app .hideSidebar .el-menu--collapse .el-submenu > .el-submenu__title > span {
+  height: 0;
+  width: 0;
+  overflow: hidden;
+  visibility: hidden;
+  display: inline-block;
+}
+
+#app .el-menu--collapse .el-menu .el-submenu {
+  min-width: 210px !important;
+}
+
+#app .mobile .main-container {
+  margin-left: 0px;
+}
+
+#app .mobile .sidebar-container {
+  transition: transform .28s;
+  width: 210px !important;
+}
+
+#app .mobile.hideSidebar .sidebar-container {
+  pointer-events: none;
+  transition-duration: 0.3s;
+  transform: translate3d(-210px, 0, 0);
+}
+
+#app .withoutAnimation .main-container,
+#app .withoutAnimation .sidebar-container {
+  transition: none;
+}
+
+.el-menu--vertical > .el-menu .svg-icon {
+  margin-right: 16px;
+}
+
+.el-menu--vertical > .el-menu .sub-el-icon {
+  margin-right: 12px;
+  margin-left: -2px;
+}
+
+.el-menu--vertical .nest-menu .el-submenu > .el-submenu__title:hover,
+.el-menu--vertical .el-menu-item:hover {
+  background-color: #263445 !important;
+}
+
+.el-menu--vertical > .el-menu--popup {
+  max-height: 100vh;
+  overflow-y: auto;
+}
+
+.el-menu--vertical > .el-menu--popup::-webkit-scrollbar-track-piece {
+  background: #d3dce6;
+}
+
+.el-menu--vertical > .el-menu--popup::-webkit-scrollbar {
+  width: 6px;
+}
+
+.el-menu--vertical > .el-menu--popup::-webkit-scrollbar-thumb {
+  background: #99a9bf;
+  border-radius: 20px;
+}

src/styles/sidebar.min.css

+:export{menuText:#bfcbd9;menuActiveText:#409EFF;subMenuActiveText:#f4f4f5;menuBg:#304156;menuHover:#263445;subMenuBg:#1f2d3d;subMenuHover:#001528;sideBarWidth:210px}#app .main-container{min-height:100%;transition:margin-left .28s;margin-left:210px;position:relative}#app .sidebar-container{transition:width 0.28s;width:210px !important;background-color:#304156;height:100%;position:fixed;font-size:0px;top:0;bottom:0;left:0;z-index:1001;overflow:hidden}#app .sidebar-container .horizontal-collapse-transition{transition:0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out}#app .sidebar-container .scrollbar-wrapper{overflow-x:hidden !important}#app .sidebar-container .el-scrollbar__bar.is-vertical{right:0px}#app .sidebar-container .el-scrollbar{height:100%}#app .sidebar-container.has-logo .el-scrollbar{height:calc(100% - 50px)}#app .sidebar-container .is-horizontal{display:none}#app .sidebar-container a{display:inline-block;width:100%;overflow:hidden}#app .sidebar-container .svg-icon{margin-right:16px}#app .sidebar-container .sub-el-icon{margin-right:12px;margin-left:-2px}#app .sidebar-container .el-menu{border:none;height:100%;width:100% !important}#app .sidebar-container .submenu-title-noDropdown:hover,#app .sidebar-container .el-submenu__title:hover{background-color:#263445 !important}#app .sidebar-container .is-active>.el-submenu__title{color:#f4f4f5 !important}#app .sidebar-container .nest-menu .el-submenu>.el-submenu__title,#app .sidebar-container .el-submenu .el-menu-item{min-width:210px !important;background-color:#1f2d3d !important}#app .sidebar-container .nest-menu .el-submenu>.el-submenu__title:hover,#app .sidebar-container .el-submenu .el-menu-item:hover{background-color:#001528 !important}#app .hideSidebar .sidebar-container{width:54px !important}#app .hideSidebar .main-container{margin-left:54px}#app .hideSidebar .submenu-title-noDropdown{padding:0 !important;position:relative}#app .hideSidebar .submenu-title-noDropdown .el-tooltip{padding:0 !important}#app .hideSidebar .submenu-title-noDropdown .el-tooltip .svg-icon{margin-left:20px}#app .hideSidebar .submenu-title-noDropdown .el-tooltip .sub-el-icon{margin-left:19px}#app .hideSidebar .el-submenu{overflow:hidden}#app .hideSidebar .el-submenu>.el-submenu__title{padding:0 !important}#app .hideSidebar .el-submenu>.el-submenu__title .svg-icon{margin-left:20px}#app .hideSidebar .el-submenu>.el-submenu__title .sub-el-icon{margin-left:19px}#app .hideSidebar .el-submenu>.el-submenu__title .el-submenu__icon-arrow{display:none}#app .hideSidebar .el-menu--collapse .el-submenu>.el-submenu__title>span{height:0;width:0;overflow:hidden;visibility:hidden;display:inline-block}#app .el-menu--collapse .el-menu .el-submenu{min-width:210px !important}#app .mobile .main-container{margin-left:0px}#app .mobile .sidebar-container{transition:transform .28s;width:210px !important}#app .mobile.hideSidebar .sidebar-container{pointer-events:none;transition-duration:0.3s;transform:translate3d(-210px, 0, 0)}#app .withoutAnimation .main-container,#app .withoutAnimation .sidebar-container{transition:none}.el-menu--vertical>.el-menu .svg-icon{margin-right:16px}.el-menu--vertical>.el-menu .sub-el-icon{margin-right:12px;margin-left:-2px}.el-menu--vertical .nest-menu .el-submenu>.el-submenu__title:hover,.el-menu--vertical .el-menu-item:hover{background-color:#263445 !important}.el-menu--vertical>.el-menu--popup{max-height:100vh;overflow-y:auto}.el-menu--vertical>.el-menu--popup::-webkit-scrollbar-track-piece{background:#d3dce6}.el-menu--vertical>.el-menu--popup::-webkit-scrollbar{width:6px}.el-menu--vertical>.el-menu--popup::-webkit-scrollbar-thumb{background:#99a9bf;border-radius:20px}

src/styles/sidebar.scss

+@import './variables.scss';
+
 #app {
 
   .main-container {
@@ -191,6 +193,7 @@
     .svg-icon {
       margin-right: 16px;
     }
+
     .sub-el-icon {
       margin-right: 12px;
       margin-left: -2px;

src/views/retrieve/components/EmailRetrieve.vue

@@ -75,7 +75,7 @@ export default {
     };
     return {
       retrieve_params: {
-        email: '2664109446@qq.com',//手机号
+        email: '',//手机号
         verification_key: '',//验证key
         verification_code: '',//短信验证码
         new_password: '',//新密码
@@ -125,7 +125,7 @@ export default {
     },
     //切换找回方式
     retrieveType() {
-      this.$emit('retrieveType', 'email');
+      this.$emit('retrieveType', 'phone');
     },
     //返回登录
     toLogin() {
@@ -175,8 +175,11 @@ export default {
           console.log('要提交的参数');
           console.log(params);
           email_updata_user_password(params).then(res => {
-            if (res.code == 200) {
-              this.$message.success('修改成功')
+            if (res.err_code == 200) {
+              this.$message.success('修改成功，即将放回登录页')
+              setTimeout(() => {
+                this.$router.push('/login');
+              }, 2000);
             }
             console.log('邮箱修改密码');
             console.log(res);

src/views/retrieve/components/PhoneRetrieve.vue

@@ -27,24 +27,30 @@
       </el-form-item>
       <el-form-item prop="new_password">
         <span>新密码</span>
-        <el-input v-model="retrieve_params.new_password">
-          <i slot="suffix" class="el-input__icon el-icon-view"></i>
+        <el-tooltip v-model="capsTooltip1" content="大写锁定打开" placement="right" manual>
+          <el-input v-model="retrieve_params.new_password" type="password" @keyup.native="checkCapslock1"
+            @blur="capsTooltip1 = false">
+            <!-- <i slot="suffix" class="el-input__icon el-icon-view"></i> -->
           </el-input>
+        </el-tooltip>
       </el-form-item>
       <el-form-item prop="affirm_password">
         <span>确认密码</span>
-        <el-input v-model="retrieve_params.affirm_password">
-          <i slot="suffix" class="el-input__icon el-icon-view"></i>
+        <el-tooltip v-model="capsTooltip2" content="大写锁定打开" placement="right" manual>
+          <el-input v-model="retrieve_params.affirm_password" type="password" @keyup.native="checkCapslock2"
+            @blur="capsTooltip2 = false">
+            <!-- <i slot="suffix" class="el-input__icon el-icon-view"></i> -->
           </el-input>
+        </el-tooltip>
       </el-form-item>
     </el-form>
     <div style="margin-top: 20px;">
-      <el-button type="primary" style="width:100%;">重置密码</el-button>
+      <el-button type="primary" style="width:100%;" @click="resettingSubmit">重置密码</el-button>
     </div>
     <div>
       <el-row>
         <el-col :span="12">
-          <el-button type="text" size="mini">邮箱找回</el-button>
+          <el-button type="text" size="mini" @click="retrieveType">邮箱找回</el-button>
         </el-col>
         <el-col :span="12" style="text-align: right;">
           <el-button type="text" size="mini" @click="toLogin">返回登陆</el-button>
@@ -55,11 +61,21 @@
 </template>
 
 <script>
+import { get_short_message_code, short_message_updata_user_password } from '@/api/user';
 export default {
   data() {
+    let validatePass2 = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入密码'))
+      } else if (value !== this.retrieve_params.new_password) {
+        callback(new Error('两次输入密码不一致!'))
+      } else {
+        callback()
+      }
+    };
     return {
       retrieve_params: {
-        phone: '2664109446@qq.com',//手机号
+        phone: '',//手机号
         verification_key: '',//验证key
         verification_code: '',//短信验证码
         new_password: '',//新密码
@@ -77,7 +93,7 @@ export default {
           { required: true, message: '请输入新密码', trigger: 'blur' },
         ],
         affirm_password: [
-          { required: true, message: '请确认密码', trigger: 'blur' },
+          { required: true, validator: validatePass2, trigger: 'blur' },
         ],
       },
 
@@ -86,6 +102,9 @@ export default {
 
       time: null,
       timer: null,
+
+      capsTooltip1: false,
+      capsTooltip2: false,
     };
   },
 
@@ -96,6 +115,18 @@ export default {
   mounted() { },
 
   methods: {
+    checkCapslock1(e) {
+      const { key } = e
+      this.capsTooltip1 = key && key.length === 1 && (key >= 'A' && key <= 'Z')
+    },
+    checkCapslock2(e) {
+      const { key } = e
+      this.capsTooltip2 = key && key.length === 1 && (key >= 'A' && key <= 'Z')
+    },
+    //切换找回方式
+    retrieveType() {
+      this.$emit('retrieveType', 'email');
+    },
     //返回登录
     toLogin() {
       // this.$router.go(-1);
@@ -107,10 +138,11 @@ export default {
         if (errMsg) {
           console.log('手机号验证未通过');
         } else {
-          let email = this.$Aesencrypt(this.retrieve_params.phone);
-          get_email_code({ email: email }).then(res => {
+          let phone = this.$Aesencrypt(this.retrieve_params.phone);
+          get_short_message_code({ phone: phone }).then(res => {
             console.log('获取验证码回调');
             console.log(res);
+            this.retrieve_params.verification_key = res.key;
             const _that = this;
             this.is_repeated_click = true;
             // let time = 60, timer = null;
@@ -126,11 +158,37 @@ export default {
                 this.time--;
               }
             }, 1000);
-
           })
         }
       })
     },
+    //重置提交
+    resettingSubmit() {
+      this.$refs.retrieveForm.validate((valid) => {
+        if (valid) {
+          let params = this.$removeProperty({
+            verification_key: this.retrieve_params.verification_key,
+            password: this.$Aesencrypt(this.retrieve_params.affirm_password),
+            verification_code: this.retrieve_params.verification_code,
+          })
+          console.log('要提交的参数');
+          console.log(params);
+          short_message_updata_user_password(params).then(res => {
+            if (res.err_code == 200) {
+              this.$message.success('修改成功，即将放回登录页')
+              setTimeout(() => {
+                this.$router.push('/login');
+              }, 2000);
+            }
+            console.log('邮箱修改密码');
+            console.log(res);
+          })
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
   }
 }
 

src/views/retrieve/index.vue

@@ -12,10 +12,10 @@
       <div class="content_body">
         <h1 class="content_title">国家烟草质检中心系统</h1>
         <div>
-          <el-card>
+          <el-card v-if="retrieve_type == 'email'">
             <email-retrieve @retrieveType="retrieveType"></email-retrieve>
           </el-card>
-          <el-card>
+          <el-card v-if="retrieve_type == 'phone'">
             <phone-retrieve @retrieveType="retrieveType"></phone-retrieve>
           </el-card>
 
@@ -32,7 +32,7 @@ import PhoneRetrieve from './components/PhoneRetrieve.vue';
 export default {
   data() {
     return {
-      retrieve_type: 'email',
+      retrieve_type: 'phone',
     };
   },
 
@@ -45,6 +45,7 @@ export default {
   methods: {
     retrieveType(val) {
       console.log(val);
+      this.retrieve_type = val;
     },
   }
 }

src/views/student/examination_questions/detail/index.vue

@@ -252,8 +252,8 @@ export default {
     getExaminationQuestionsAll() {
       this.examination_questions_all_list = [];
       get_examination_questions_all().then(res => {
-        console.log('获取全套试题');
-        console.log(res);
+        // console.log('获取全套试题');
+        // console.log(res);
         if (res.length) {
           res.forEach(element => {
             this.examination_questions_all_list.push({ value: element.id, label: element.title, children: [], })
@@ -280,8 +280,6 @@ export default {
     //获取方位
     getTobaccoProvince() {
       get_tobacco_province().then(res => {
-        console.log('烟草区域信息');
-        console.log(res);
         this.position_data = res || [];
         for (let i in res) {
           this.getProvinceList(res[i].name)
@@ -304,8 +302,6 @@ export default {
       }
       /* { name_is_value: true } 获取汉字值的列表 */
       get_province_list({ area: val }).then(res => {
-        console.log('获取省市区数据');
-        console.log(res);
         if (res.length) {
           // this.province_list = removeNodeInTree(res);
           this.province_data[val] = removeNodeInTree(res);
@@ -318,16 +314,13 @@ export default {
     //获取全部烟草等级
     getTobaccoAll() {
       get_tobacco_all_info().then(res => {
-        console.log('获取全部烟草品种');
-        console.log(res);
+
         this.tobacco_all_lists = res || [];
       })
     },
     //获取全部烟草等级
     getTobaccoGradesAll() {
       get_tobacco_grades_all().then(res => {
-        console.log('全部烟草等级');
-        console.log(res);
         this.tobacco_grades_all_lists = res || [];
       })
     },
@@ -396,7 +389,7 @@ export default {
       console.log('试题上传');
       console.log(val);
       const formData = new FormData();
-      formData.append('file', val)
+      formData.append('file', val.file)
       let id = this.examination_questions_id;
 
       examination_question_detail_upload(id, formData).then(res => {