update 菜单完善

Web/src/common/login/index.js

@@ -1,6 +1,6 @@
 import { api } from '@/common/api'
 import { token } from '@/common/token'
-import { GLOBAL_INFO_KEY, APP_MENU_KEY } from '@/common/storage'
+import { GLOBAL_INFO_KEY, ACTIVE_APP_KEY } from '@/common/storage'
 import { encryptByDES, decryptByDES } from '@/util/des'
 import app from '@/main'
 
@@ -50,7 +50,7 @@ const doLogout = () => {
             if (success) {
                 removeGlobal()
                 token.value = ''
-                window.localStorage.removeItem(APP_MENU_KEY)
+                window.localStorage.removeItem(ACTIVE_APP_KEY)
                 if (app.$route.path === '/') {
                     app.$router.replace('/login')
                 } else {

Web/src/common/storage/index.js

@@ -1,11 +1,11 @@
 const SESSION_KEY = '__SESSION'
 const SETTING_KEY = '__SETTINGS'
 const GLOBAL_INFO_KEY = '__GLOBAL_INFO'
-const APP_MENU_KEY = '__APP_MENU'
+const ACTIVE_APP_KEY = '__ACTIVE_APP'
 
 export {
     SESSION_KEY,
     SETTING_KEY,
     GLOBAL_INFO_KEY,
-    APP_MENU_KEY
+    ACTIVE_APP_KEY
 }

Web/src/components/yoAuthorityView/index.js

@@ -59,11 +59,18 @@ export default {
         renderCheckbox(data) {
             return (
                 <div class="yo-authority-view--checkbox">
+                    {data.visibleParent && data.type == 2 &&
+                        <a-tooltip placement="top" title="选中此项才会显示父节点">
+                            <a-icon type="eye" style={{ color: '#1890ff' }} class="mr-xxs" />
+                        </a-tooltip>
+                    }
                     <a-checkbox
                         value={data.id}
                         checked={data.checked}
                         onChange={(e) => this.onChange(e, data)}
-                    >{data.title}</a-checkbox>
+                    >
+                        {data.title}
+                    </a-checkbox>
                 </div>
             )
         },
@@ -100,7 +107,16 @@ export default {
 
             this.onSelect(e.target.checked, item)
 
-            this.$emit('select', this.list.filter(p => p.checked).map(p => p.id), this.list.filter(p => p.checked || p.indeterminate).map(p => p.id))
+            const visible = this.getVisible()
+
+            this.$emit('select',
+                // 返回所有选中
+                this.list.filter(p => p.checked).map(p => p.id),
+                // 返回所有选中和半选
+                this.list.filter(p => p.checked || p.indeterminate).map(p => p.id),
+                // 返回所有选中和半选,但是不返回没有子级选中visibleParent的半选
+                visible
+            )
         },
 
         onSelect(check, item) {
@@ -167,6 +183,42 @@ export default {
             })
         },
 
+        getVisible() {
+            const checked = this.list.filter(p => p.checked)
+            const caseChildren = checked.filter(p => p.visibleParent || p.type != 2)
+            const visibleParents = []
+            // 递归寻找父级
+            const findVisibleParents = (children) => {
+                const parents = []
+                children.forEach(item => {
+                    if (item.parentId) {
+                        const parent = this.list.find(p => p.id === item.parentId)
+                        if (parent) {
+                            parents.push(parent)
+                            visibleParents.push(parent)
+                        }
+                    }
+                })
+                if (parents.length) {
+                    findVisibleParents(parents)
+                }
+            }
+
+            findVisibleParents(caseChildren)
+
+            const checkedIds = checked.map(p => p.id)
+            const visibleParentsIds = visibleParents.map(p => p.id)
+
+            const result = checkedIds
+            visibleParentsIds.forEach(p => {
+                if (result.indexOf(p) === -1) {
+                    result.push(p)
+                }
+            })
+
+            return result
+        },
+
     },
 
     render() {

Web/src/pages/system/menu/form.vue

@@ -94,8 +94,11 @@
           <a-form-model-item label="权限标识" prop="permission" v-if="form.type == 2">
             <a-input placeholder="请输入权限标识" v-model="form.permission" />
           </a-form-model-item>
+          <a-form-model-item label="关联上级菜单显示" prop="visibleParent" v-if="form.type == 2">
+            <a-switch v-model="form.visibleParent" />
+          </a-form-model-item>
           <a-form-model-item label="可见性">
-            <a-switch checked-children="可见" un-checked-children="隐藏" v-model="form.visible" />
+            <a-switch v-model="form.visible" />
           </a-form-model-item>
           <!-- 图标只有[按钮]不可用 -->
           <a-form-model-item label="图标" v-if="form.type != 2">
@@ -132,6 +135,7 @@ const defaultValue = {
   type: '1',
   openType: '1',
   weight: '1',
+  visibleParent: false,
   visible: true,
   sort: 100,
 };

Web/src/pages/system/role/menuForm.vue

@@ -69,8 +69,8 @@ export default {
       });
     },
 
-    onSelect(a1, a2) {
-      this.selectedKeys = a2;
+    onSelect(a1, a2, a3) {
+      this.selectedKeys = a3;
     },
 
     onOk() {

Web/src/views/main/_layout/sider/app.vue

@@ -37,10 +37,6 @@ export default {
     },
   },
 
-  created() {
-    console.log(this.apps);
-  },
-
   methods: {
     onChangeApp(app) {
       this.$emit('change-app', app);

Web/src/views/main/_layout/sider/index.vue

@@ -82,6 +82,9 @@ export default {
   mounted() {
     // swiper不能使用vue版本的组件.效果相当差
     swiper = new Swiper('#layout--swiper-container', siderSwiperOptions);
+    this.$nextTick(() => {
+      this.onUpdateSwiper();
+    });
 
     window.addEventListener('resize', () => {
       if (this.$root.global.settings.layout === 'left-menu' || this.$root.global.settings.layout === 'right-menu') {

Web/src/views/main/index.vue

@@ -40,7 +40,7 @@ import Content from './_layout/content';
 import Setting from './setting';
 
 import { setGlobal } from '@/common/login';
-import { APP_MENU_KEY } from '@/common/storage';
+import { ACTIVE_APP_KEY } from '@/common/storage';
 
 import { EMPTY_ID } from '@/util/global';
 
@@ -210,13 +210,7 @@ export default {
       this.nav.loading = true;
       this.$api.sysMenuChange({ application: app.code }).then(({ data }) => {
         this.nav.apps.map((p) => (p.active = p.code === app.code));
-        window.localStorage.setItem(
-          APP_MENU_KEY,
-          JSON.stringify({
-            ...this.nav.apps.find((p) => p.active),
-            menus: data,
-          })
-        );
+        window.localStorage.removeItem(ACTIVE_APP_KEY);
         this.onSetNav({
           apps: this.nav.apps,
           menus: data,
@@ -229,20 +223,19 @@ export default {
     onSetNav(nav) {
       // 从本地存储获取当前选中的应用及菜单
       this.nav.apps = nav.apps;
-      const storage = JSON.parse(window.localStorage.getItem(APP_MENU_KEY));
-      if (storage) {
-        this.nav.apps.map((p) => (p.active = p.code === storage.code));
-        this.serializeMenu(storage.menus);
+      const code = window.localStorage.getItem(ACTIVE_APP_KEY);
+      if (code) {
+        this.nav.apps.map((p) => (p.active = p.code === code.code));
+        this.onChangeApp({
+          code,
+        });
       } else {
         // 将默认选中菜单存储
-        window.localStorage.setItem(
-          APP_MENU_KEY,
-          JSON.stringify({
-            ...nav.apps.find((p) => p.active),
-            menus: nav.menus,
-          })
-        );
-        this.serializeMenu(nav.menus);
+        const app = nav.apps.find((p) => p.active);
+        if (app) {
+          window.localStorage.setItem(ACTIVE_APP_KEY, app.code);
+          this.serializeMenu(nav.menus);
+        }
       }
     },