cxw-010203

package.json

@@ -15,6 +15,7 @@
     "nprogress": "^0.2.0",
     "vue": "^2.6.11",
     "vue-router": "^3.5.3",
+    "vuescroll": "^4.17.3",
     "vuex": "^3.6.2"
   },
   "devDependencies": {

src/main.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-11-18 17:15:53
- * @LastEditTime: 2021-11-22 15:40:15
+ * @LastEditTime: 2021-11-26 16:18:36
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /ansu-business/src/main.js
@@ -12,13 +12,16 @@ import './styles/index.less';
 import mixins from "@/mixins"
 import Antd from 'ant-design-vue';
 import 'ant-design-vue/dist/antd.css';
+import vuescroll from 'vuescroll';
+import createOps from '@/utils/ops';
 import { Button } from 'ant-design-vue';
 Vue.use(Button);
 Vue.use(Antd);
 Vue.use(mixins);
 import store from "@/store";
 import router from "@/permission";
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
+Vue.use(vuescroll, {ops: createOps(true, true),name: 'vue-scroll'});
 
 new Vue({
   render: h => h(App),

src/router/basic.js

@@ -1,141 +1,141 @@
 /*
  * @Author: your name
  * @Date: 2021-11-24 14:45:04
- * @LastEditTime: 2021-11-24 15:27:01
+ * @LastEditTime: 2021-11-26 16:15:03
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /LittleBeeSaas/src/router/basic.js
  */
 export default [
     {
-        path: '/Console',
+        path: '/Basic/Console',
         name: "Console",
         title: "控制台",
         hide: false,
         icon: 'container',
-        component: resolve => require(['@/views/Console'], resolve),
+        component: resolve => require(['@/views/Basic/Console'], resolve),
         meta: {title: '控制台'}
     },
     {
-        path: '/Employee',
+        path: '/Basic/Employee',
         name: "Employee",
         title: "员工管理",
         icon: 'database',
         hide: false,
-        component: resolve => require(['@/views/Employee'], resolve),
+        component: resolve => require(['@/views/Basic/Employee'], resolve),
         meta: {title: '员工管理'}
     },
     {
-        path: '/Authority',
+        path: '/Basic/Authority',
         name: "Authority",
         title: "权限管理",
         icon: 'profile',
         hide: false,
-        component: resolve => require(['@/views/Authority'], resolve),
+        component: resolve => require(['@/views/Basic/Authority'], resolve),
         meta: {title: '权限管理'},
         children: [
             {
-                path: '/Authority/_member',
+                path: '/Basic/Authority/_member',
                 name: "Authority_member",
                 title: "成员管理",
                 icon: 'profile', 
                 hide: false,
-                component: resolve => require(['@/views/Authority/_member'], resolve),
+                component: resolve => require(['@/views/Basic/Authority/_member'], resolve),
                 meta: {title: '成员管理'},
             },
             {
-                path: '/Authority/_role',
+                path: '/Basic/Authority/_role',
                 name: "Authority_role",
                 title: "角色管理",
                 icon: 'profile', 
                 hide: false,
-                component: resolve => require(['@/views/Authority/_role'], resolve),
+                component: resolve => require(['@/views/Basic/Authority/_role'], resolve),
                 meta: {title: '角色管理'},
             }
         ]
     },
     {
-        path: '/Attendance',
+        path: '/Basic/Attendance',
         name: "Attendance",
         title: "考勤管理",
         icon: 'profile',
         hide: false,
-        component: resolve => require(['@/views/Attendance'], resolve),
+        component: resolve => require(['@/views/Basic/Attendance'], resolve),
         meta: {title: '考勤管理'},
         children: [
             {
-                path: '/Attendance/record',
+                path: '/Basic/Attendance/record',
                 name: "Attendance_record",
                 title: "考勤记录",
                 icon: 'profile', 
                 hide: false,
-                component: resolve => require(['@/views/Attendance/_record'], resolve),
+                component: resolve => require(['@/views/Basic/Attendance/_record'], resolve),
                 meta: {title: '考勤记录'},
             },
             {
-                path: '/Attendance/application',
+                path: '/Basic/Attendance/application',
                 name: "Attendance_application",
                 title: "申请记录",
                 icon: 'profile', 
                 hide: false,
-                component: resolve => require(['@/views/Attendance/_application'], resolve),
+                component: resolve => require(['@/views/Basic/Attendance/_application'], resolve),
                 meta: {title: '申请记录'},
             },
             {
-                path: '/Attendance/attendanceteam',
+                path: '/Basic/Attendance/attendanceteam',
                 name: "Attendance_attendanceteam",
                 title: "考勤小组",
                 icon: 'profile', 
                 hide: false,
-                component: resolve => require(['@/views/Attendance/_attendanceteam'], resolve),
+                component: resolve => require(['@/views/Basic/Attendance/_attendanceteam'], resolve),
                 meta: {title: '考勤小组'},
             },
             {
-                path: '/Attendance/scheduling',
+                path: '/Basic/Attendance/scheduling',
                 name: "Attendance_scheduling",
                 title: "排班计划",
                 icon: 'profile', 
                 hide: false,
-                component: resolve => require(['@/views/Attendance/_scheduling'], resolve),
+                component: resolve => require(['@/views/Basic/Attendance/_scheduling'], resolve),
                 meta: {title: '排班计划'},
             },
 
         ]
     },
     {
-        path: '/Community',
+        path: '/Basic/Community',
         name: "Community",
         title: "社区档案",
         icon: 'profile',
         hide: false,
-        component: resolve => require(['@/views/Community'], resolve),
+        component: resolve => require(['@/views/Basic/Community'], resolve),
         meta: {title: '社区档案'},
         children: [
             {
-                path: '/Community/_balcony',
+                path: '/Basic/Community/_balcony',
                 name: "Community_balcony",
                 title: "楼座管理",
                 icon: 'profile', 
                 hide: false,
-                component: resolve => require(['@/views/Community/_balcony'], resolve),
+                component: resolve => require(['@/views/Basic/Community/_balcony'], resolve),
                 meta: {title: '楼座管理'},
             },
             {
-                path: '/Community/_house',
+                path: '/Basic/Community/_house',
                 name: "Community_house",
                 title: "房屋管理",
                 icon: 'profile', 
                 hide: false,
-                component: resolve => require(['@/views/Community/_house'], resolve),
+                component: resolve => require(['@/views/Basic/Community/_house'], resolve),
                 meta: {title: '房屋管理'},
             },
             {
-                path: '/Community/owner',
+                path: '/Basic/Community/owner',
                 name: "Community_owner",
                 title: "业主管理",
                 icon: 'profile', 
                 hide: false,
-                component: resolve => require(['@/views/Community/_owner'], resolve),
+                component: resolve => require(['@/views/Basic/Community/_owner'], resolve),
                 meta: {title: '业主管理'},
             },
 

src/router/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-11-18 17:30:38
- * @LastEditTime: 2021-11-24 17:43:23
+ * @LastEditTime: 2021-11-26 16:15:14
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /ansu-business/src/router/index.js
@@ -28,7 +28,7 @@ const router = [
         name: "Layout",
         title: "外框",
         component: Layout,
-        redirect: '/Console',
+        redirect: '/Basic/Console',
         meta: {title: '首页'},
         children: [...basic]
     },

src/utils/ops.js

@@ -0,0 +1,49 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-16 09:48:35
+ * @LastEditTime: 2021-11-02 17:07:15
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/utils/gol/ops.js
+ */
+export default function createOps(scrollingX = true, scrollingY = true) {
+ return {
+    vuescroll: {
+        mode: "native",  //模式:pc natice 移动端是slice
+        sizeStrategy: "percent",  //父元素是否是固定的是就percent 不是就是number 填一个数值
+        detectResize: true,  //内容是否根据页面调整
+    },
+    scrollPanel: {
+        initialScrollY: false,  //初始化距离顶部的位置
+        initialScrollX: false,  //初始化距离左侧的位置
+        scrollingX: scrollingX,  // 是否开启横向滚动
+        scrollingY: scrollingY,  //是否开启竖向滚动
+        speed: 300,       //多长时间内完成一次滚动。 数值越小滚动的速度越快。
+        easing: 'easeInQuad', //默认动画
+        verticalNativeBarPos: "right",
+        maxHeight: undefined,  //这是滚动条最大高度,内容高度小于 maxHeight 时高度自适应，超出的话出现滚动条。
+        maxWidth: undefined,   //这是滚动条最大宽度,内容宽度小于 maxWidth 时高度自适应，超出的话出现滚动条。
+    },
+    rail: {
+        background: "#000000", //轨道的背景色。
+        opacity: 0,            //轨道的透明度。 0是透明，1是不透明
+        size: "6px",             //轨道的尺寸。
+        specifyBorderRadius: false, //是否指定轨道的 borderRadius， 如果不那么将会自动设置。
+        gutterOfEnds: null,
+        gutterOfSide: "0px",      //距离容器的距离
+        keepShow: false,          //是否即使 bar 不存在的情况下也保持显示。
+    },
+    bar: {
+        showDelay: 500,             //在鼠标离开容器后多长时间隐藏滚动条。
+        onlyShowBarOnScroll: true,  //是否只在滚动时显示 bar。
+        keepShow: false,            //滚动条是否保持显示。
+        background: "#bebfbe",      //滚动条背景色。
+        opacity: 1,                 //滚动条透明度。
+        hoverStyle: false,
+        specifyBorderRadius: false,  //是否指定滚动条的 borderRadius， 如果不那么和轨道的保持一致。
+        minSize: false,              //为 bar 设置一个最小尺寸, 从 0 到 1. 如 0.3, 代表 30%.
+        size: "6px",                 //bar 的尺寸。
+        disable: false,              //是否禁用滚动条。
+    },
+ }
+}

src/views/Layout/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-18 17:27:08
- * @LastEditTime: 2021-11-24 15:34:41
+ * @LastEditTime: 2021-11-26 16:19:53
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /ansu-business/src/views/Layout/index.vue
@@ -9,8 +9,10 @@
 <template>
     <a-layout id="components-layout-demo-custom-trigger">
         <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
-            <div class="logo"><img class="m1" src="../../assets/images/logo.png" /><span class="s1" v-if="!collapsed">小蜜蜂SaaS</span></div>
+            <vue-scroll>
-            <yMenu :csd="collapsed"></yMenu>
+                <div class="logo"><img class="m1" src="../../assets/images/logo.png" /><span class="s1" v-if="!collapsed">小蜜蜂SaaS</span></div>
+                <yMenu :csd="collapsed"></yMenu>
+            </vue-scroll>
         </a-layout-sider>
         <a-layout>
             <a-layout-header style="background: #fff; padding: 0; height: 42px">
@@ -58,24 +60,24 @@ export default {
             menuTags: [
                 {
                     label: "基础功能",
-                    value: "a"
+                    value: "a",
                 },
                 {
                     label: "缴费管理",
-                    value: "b"
+                    value: "b",
                 },
                 {
                     label: "智慧商城",
-                    value: "c"
+                    value: "c",
                 },
                 {
                     label: "运营管理",
-                    value: "d"
+                    value: "d",
                 },
                 {
                     label: "设置",
-                    value: "e"
+                    value: "e",
-                }
+                },
             ],
         };
     },
@@ -86,7 +88,7 @@ export default {
         },
         handlerTags(n) {
             this.tagActive = n;
-        }
+        },
     },
 };
 </script>
@@ -108,10 +110,10 @@ export default {
     justify-content: center;
     align-items: center;
     .m1 {
-       height: 24px;
+        height: 24px;
-       background: #fff;
+        background: #fff;
-       padding: 3px;
+        padding: 3px;
-       border-radius: 2px;
+        border-radius: 2px;
     }
     .s1 {
         display: block;
@@ -140,9 +142,8 @@ export default {
     }
     .h-d1-item-active {
         .s1 {
-             border-bottom: 2px solid #5679b1;
+            border-bottom: 2px solid #5679b1;
         }
-       
     }
 }
 .h-d2 {

yarn.lock

@@ -8525,6 +8525,11 @@ vue@^2.6.11:
   resolved "https://registry.npmmirror.com/vue/download/vue-2.6.14.tgz?cache=0&sync_timestamp=1636947969556&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fvue%2Fdownload%2Fvue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
   integrity sha1-5RqlJQJQ1Wmj+606ilpofWA24jU=
 
+vuescroll@^4.17.3:
+  version "4.17.3"
+  resolved "https://registry.yarnpkg.com/vuescroll/-/vuescroll-4.17.3.tgz#e1c29372a007e0dff0cee6b4515783d43924f9e1"
+  integrity sha512-5P3hje/fYjo1eAB0Y8zboLbaq/mnPNczYyZ1aPHHM6wIFKcqal9Mi42CBCZizUnEtoXtbsGlnyLcVbnalTNptA==
+
 vuex@^3.6.2:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"