修改菜单权限

src/components/FormModel.vue

+<template>
+    <a-form ref="formRef" :model="form" :layout="layout" @submit="handleSubmit">
+        <a-form-item field="name" label="Username">
+            <a-input v-model="form.name" placeholder="please enter your username..." />
+        </a-form-item>
+
+        <a-form-item>
+            <a-button html-type="submit">Submit</a-button>
+            <slot></slot>
+           
+        </a-form-item>
+    </a-form>
+</template>
+<script setup>
+import { computed } from 'vue';
+import { string } from 'vue-types';
+
+const props = defineProps({
+    FormData: Object,
+    layout: {
+        type: String,
+        default:'inline'
+    }
+})
+const datas = computed(() => { return props.FormData })
+const form = reactive({
+    name:"11"
+})
+// 点击提交
+function handleSubmit({values, errors}) {
+    console.log('values:', values, '\nerrors:', errors)
+    }
+</script>
+<style></style>
\ No newline at end of file

src/layouts/default/header/components/user-dropdown/index.vue

@@ -44,7 +44,7 @@
 import { useSplitMenu } from '/@/layouts/default/menu/useLayoutMenu';
 import { Dropdown, Menu } from 'ant-design-vue';
 import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
-import { defineComponent, computed, ref, toRef,watch } from 'vue';
+import { defineComponent, computed, ref, toRef,watch,watchEffect } from 'vue';
 import { Icon } from '/@/components/Icon';
 import { SITE_URL } from '/@/settings/siteSetting';
 import { useUserStore } from '/@/store/modules/user';
@@ -105,13 +105,13 @@ export default defineComponent({
     const go = useGo();
     const menus = menusStore()
 
-    watch(
-    () => menus.menus,
-    (val) => {
-      if (val.title == '首页')
-       actives.value=0
-    }
-  );
+    watchEffect(() => {
+      menusRef.value.forEach((v: any, index) => {
+        
+        if (menus.menus.title == v.title)
+         actives.value=index
+      })
+      });
 
     const getUserInfo = computed(() => {
       const { realname = '', avatar, desc } = userStore.getUserInfo || {};
@@ -132,8 +132,14 @@ export default defineComponent({
     function select(v, index) {
       // 存起来
       actives.value = index
+      console.log(v,'v')
       menus.setMenus(v)
-      go(v.path)
+      if (v?.children) {
+        go(v?.children[0]?.path) 
+      } else {
+        go(v.path)
+      }
+      
 
     }
     /**

src/layouts/default/index.vue

 <template>
   <Layout :class="prefixCls" v-bind="lockEvents">
     <!-- <LayoutFeatures /> -->
-    <LayoutHeader   />
+    <LayoutHeader />
     <Layout :class="[layoutClass]">
       <!-- 左边 -->
-      <LayoutSideBar v-if="menus?.menus?.title!='首页'&&menus?.menus?.title!='待办事项'" />
+      <LayoutSideBar v-if="menus?.menus?.title != '首页' && menus?.menus?.title != '待办事项'" />
       <!-- 左边结束 -->
       <Layout :class="`${prefixCls}-main`">
-        <LayoutMultipleHeader  v-if="menus?.menus?.title!='首页'&&menus?.menus?.title!='待办事项'" />
+        <LayoutMultipleHeader v-if="menus?.menus?.title != '首页' && menus?.menus?.title != '待办事项'" />
         <LayoutContent />
         <LayoutFooter />
       </Layout>
@@ -16,80 +16,107 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, computed, unref, ref } from 'vue';
-  import { Layout } from 'ant-design-vue';
-  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
-  import menusStore from '/@/store/menu'
-  import LayoutHeader from './header/index.vue';
-  import LayoutContent from './content/index.vue';
-  import LayoutSideBar from './sider/index.vue';
-  import LayoutMultipleHeader from './header/MultipleHeader.vue';
+import { defineComponent, computed, unref, toRef, watch } from 'vue';
+import { Layout } from 'ant-design-vue';
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+import menusStore from '/@/store/menu'
+import { useSplitMenu } from '/@/layouts/default/menu/useLayoutMenu';
+import LayoutHeader from './header/index.vue';
+import LayoutContent from './content/index.vue';
+import LayoutSideBar from './sider/index.vue';
+import LayoutMultipleHeader from './header/MultipleHeader.vue';
+import { useRoute } from 'vue-router';
+import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
+import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+import { useDesign } from '/@/hooks/web/useDesign';
+import { useLockPage } from '/@/hooks/web/useLockPage';
+import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
+import { useAppInject } from '/@/hooks/web/useAppInject';
 
-  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useLockPage } from '/@/hooks/web/useLockPage';
-
-  import { useAppInject } from '/@/hooks/web/useAppInject';
+export default defineComponent({
+  name: 'DefaultLayout',
+  props: {
+    splitType: {
+      type: Number as PropType<MenuSplitTyeEnum>,
+      default: MenuSplitTyeEnum.NONE,
+    },
 
-  export default defineComponent({
-    name: 'DefaultLayout',
-    components: {
-      LayoutFeatures: createAsyncComponent(() => import('/@/layouts/default/feature/index.vue')),
-      LayoutFooter: createAsyncComponent(() => import('/@/layouts/default/footer/index.vue')),
-      LayoutHeader,
-      LayoutContent,
-      LayoutSideBar,
-      LayoutMultipleHeader,
-      Layout,
+    // menu Mode
+    menuMode: {
+      type: [String] as PropType<Nullable<MenuModeEnum>>,
+      default: '',
     },
-    setup() {
-      const { prefixCls } = useDesign('default-layout');
-      const { getIsMobile } = useAppInject();
-      const { getShowFullHeaderRef } = useHeaderSetting();
-      const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting();
-      const menus = menusStore()
-      // Create a lock screen monitor
-      const lockEvents = useLockPage();
+  },
+  components: {
+    LayoutFeatures: createAsyncComponent(() => import('/@/layouts/default/feature/index.vue')),
+    LayoutFooter: createAsyncComponent(() => import('/@/layouts/default/footer/index.vue')),
+    LayoutHeader,
+    LayoutContent,
+    LayoutSideBar,
+    LayoutMultipleHeader,
+    Layout,
+  },
+  setup(props) {
+    const { prefixCls } = useDesign('default-layout');
+    const { getIsMobile } = useAppInject();
+    const { getShowFullHeaderRef } = useHeaderSetting();
+    const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting();
+    const menus = menusStore()
+    // Create a lock screen monitor
+    const lockEvents = useLockPage();
+    const router = useRoute();
+    const { menusRef } = useSplitMenu(toRef(props, 'splitType'));
 
-      const layoutClass = computed(() => {
-        let cls: string[] = ['ant-layout'];
-        if (unref(getIsMixSidebar) || unref(getShowMenu)) {
-          cls.push('ant-layout-has-sider');
-        }
-        return cls;
-      });
+    watch(
+      () => menusRef.value,
+      () => {
+        menusRef?.value.forEach((v: any) => {
+          if (router.matched[0] && v.title == router.matched[0].meta.title) {
+            menus.setMenus(v)
 
-      return {
-        getShowFullHeaderRef,
-        getShowSidebar,
-        prefixCls,
-        getIsMobile,
-        getIsMixSidebar,
-        layoutClass,
-        lockEvents,
-        menus,
-      };
-    },
-  });
+          }
+        });
+      }
+    );
+
+    const layoutClass = computed(() => {
+      let cls: string[] = ['ant-layout'];
+      if (unref(getIsMixSidebar) || unref(getShowMenu)) {
+        cls.push('ant-layout-has-sider');
+      }
+      return cls;
+    });
+
+    return {
+      getShowFullHeaderRef,
+      getShowSidebar,
+      prefixCls,
+      getIsMobile,
+      getIsMixSidebar,
+      layoutClass,
+      lockEvents,
+      menus,
+    };
+  },
+});
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-default-layout';
+@prefix-cls: ~'@{namespace}-default-layout';
 
-  .@{prefix-cls} {
-    display: flex;
-    width: 100%;
-    min-height: 100%;
-    background-color: @content-bg;
-    flex-direction: column;
+.@{prefix-cls} {
+  display: flex;
+  width: 100%;
+  min-height: 100%;
+  background-color: @content-bg;
+  flex-direction: column;
 
-    > .ant-layout {
-      min-height: 100%;
-    }
+  >.ant-layout {
+    min-height: 100%;
+  }
 
-    &-main {
-      width: 100%;
-      margin-left: 1px;
-    }
+  &-main {
+    width: 100%;
+    margin-left: 1px;
   }
+}
 </style>

src/router/index.ts

@@ -12,7 +12,6 @@ const getRouteNames = (array: any[]) =>
     getRouteNames(item.children || []);
   });
 getRouteNames(basicRoutes);
-
 // app router
 export const router = createRouter({
   history: createWebHistory(import.meta.env.VITE_PUBLIC_PATH),

src/router/routes/index.ts

@@ -38,7 +38,14 @@ export const LoginRoute: AppRouteRecordRaw = {
     title: t('routes.basic.login'),
   },
 };
-
+export const DemosRoute: AppRouteRecordRaw = {
+  path: '/demos',
+  name: 'demos',
+  component: () => import('/@/views/demose.vue'),
+  meta: {
+    title: '测试',
+  },
+};
 //update-begin---author:wangshuai ---date:20220629  for：auth2登录页面路由------------
 export const Oauth2LoginRoute: AppRouteRecordRaw = {
   path: '/oauth2-app/login',
@@ -66,4 +73,4 @@ export const TokenLoginRoute: AppRouteRecordRaw = {
 };
 
 // Basic routing without permission
-export const basicRoutes = [LoginRoute, RootRoute, ...mainOutRoutes, REDIRECT_ROUTE, PAGE_NOT_FOUND_ROUTE, TokenLoginRoute, Oauth2LoginRoute];
+export const basicRoutes = [LoginRoute, RootRoute,DemosRoute, ...mainOutRoutes, REDIRECT_ROUTE, PAGE_NOT_FOUND_ROUTE, TokenLoginRoute, Oauth2LoginRoute];

src/utils/auth/isAuth.ts

+import { usePermissionStore } from '/@/store/modules/permission';
+const auth = usePermissionStore()
+
+export function isAuth(key: String) {
+    for (let i = 0; i < auth.allAuthList.length; i++){
+        if ( auth.allAuthList[i].action === key) {
+            if (auth.allAuthList[i].type != 2) return true
+            else return false
+        }
+    }
+   
+}
\ No newline at end of file

src/views/demos.vue

+<template>
+    <div>
+       <Form :FormData="FormData" />
+    </div>
+</template>
+
+<script setup>
+import Form from '/@/components/FormModel.vue'
+let FormData = ref(
+    [
+        {
+            name: 'name',
+            type: 'text',
+            label:'名称'
+        },
+        {
+            name: 'class',
+            type: 'text',
+            label:'班级'
+        },
+    ]
+)
+</script>
\ No newline at end of file

src/views/system/user/index.vue

@@ -4,7 +4,7 @@
     <BasicTable @register="registerTable" :rowSelection="rowSelection">
       <!--插槽:table标题-->
       <template #tableTitle>
-        <a-button type="primary" preIcon="ant-design:plus-outlined"  @click="handleCreate"> 新增</a-button>
+        <a-button type="primary" preIcon="ant-design:plus-outlined"  @click="handleCreate" v-show="isAuth('system:user:add')"> 新增</a-button>
         <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
         <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls" >导入</j-upload-button>
         <a-button type="primary" @click="handleSyncUser" preIcon="ant-design:sync-outlined"> 同步流程</a-button>
@@ -56,7 +56,8 @@
 <script lang="ts" name="system-user" setup>
   //ts语法
   import { ref, computed, unref } from 'vue';
-  import { BasicTable, TableAction, ActionItem } from '/@/components/Table';
+import { BasicTable, TableAction, ActionItem } from '/@/components/Table';
+  import {isAuth} from '/@/utils/auth/isAuth'
   import UserDrawer from './UserDrawer.vue';
   import UserRecycleBinModal from './UserRecycleBinModal.vue';
   import PasswordModal from './PasswordModal.vue';
@@ -241,7 +242,8 @@
   /**
    * 操作栏
    */
-  function getTableAction(record): ActionItem[] {
+function getTableAction(record): ActionItem[] {
+  if (isAuth('system:user:edit')) {
     return [
       {
         label: '编辑',
@@ -249,11 +251,16 @@
         // ifShow: () => hasPermission('system:user:edit'),
       },
     ];
+  } else {
+    return []
+  }
+  
   }
   /**
    * 下拉操作栏
    */
-  function getDropDownAction(record): ActionItem[] {
+function getDropDownAction(record): ActionItem[] {
+    
     return [
       {
         label: '详情',