获取菜单；权限添加

src/layout/components/SiderBar.vue

@@ -8,10 +8,10 @@
       <el-menu-item v-for="item in menuItems" :key="item.route" :index="item.route" :class="activeRoute == item.route ? 'is-active' : ''" >
         <template #default>
           <i class="iconfont" :class="item.icon"></i>
-          <span v-if="!isCollapse">{{ item.label }}</span>
+          <span v-if="!isCollapse">{{ item.title }}</span>
         </template>
         <template #title>
-          <span v-if="isCollapse">{{ item.label }}</span>
+          <span v-if="isCollapse">{{ item.title }}</span>
         </template>
       </el-menu-item>
     </el-menu>
@@ -23,32 +23,33 @@ export default {
 }
 </script>
 <script lang="ts" setup> 
-import { ref, watch } from 'vue';
+import { ref, watch, onMounted } from 'vue';
 import { useRoute } from 'vue-router'
+import router from '@/router';
 
 const route = useRoute()
 const activeRoute = ref(route.path)
 watch(() => route.path, (newVal) => {
   activeRoute.value = newVal
 })
+
 const isCollapse = ref(false)
-const menuItems = ref([
-  {
-    label: '学校管理',
-    icon: 'icon_xuexiaoguanli',
-    route: '/main/school',
-  },
-  {
-    label: '运维管理',
-    icon: 'icon_yunweiyonghu',
-    route: '/main/manager',
-  },
-  {
-    label: '联考管理',
-    icon: 'icon_liankaoguanli',
-    route: '/main/examination',
+interface menuItem {
+  label: string;
+  icon: string;
+  route: string;
+}
+const menuItems = ref<menuItem[]>()
+
+onMounted(() => {
+  const menuListStr = localStorage.getItem('menuList')
+  console.log(menuListStr)
+  if (menuListStr) {
+    menuItems.value = JSON.parse(menuListStr)
+    router.push(menuItems.value[0].route)
   }
-])
+  console.log(menuItems.value)
+});
 const toggleCollapse = () => {
   isCollapse.value = !isCollapse.value
 }

src/layout/components/header.vue

@@ -99,9 +99,11 @@ const UserCommand = (command: string) => {
     loginOutFn()
   }
 }
+// 打开修改密码弹窗
 const setPassWord = () => {
   dialogShow.value = true
 }
+// 退出登录
 const loginOutFn = async () => {
   console.log(userInfo.value.username)
   const res = await loginOut(userInfo.value.userid)
@@ -114,6 +116,7 @@ const loginOutFn = async () => {
   }
 }
 const submitLoading = ref(false)
+// 修改密码提交
 const confirmPassWord = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
   await formEl.validate(async(valid) => {
@@ -128,6 +131,11 @@ const confirmPassWord = async (formEl: FormInstance | undefined) => {
         if(res.code == 200) {
           ElMessage.success(res.msg)
           dialogShow.value = false
+          // 清除本地存储信息
+          localStorage.removeItem('token')
+          localStorage.removeItem('userInfo')
+          // 跳转登录页面
+          router.push('/login')
         }else {
           ElMessage.error(res.msg)
         }

src/views/examination/index.vue

@@ -56,7 +56,7 @@
               {{ selectRow?.tenantName }} 下辖学校：{{ selectRow?.childrenCount || '-' }}
             </div>
             <div class="content_right" v-if="selectRow?.tenantName">
-              <el-button class="button_background" @click="addSchool">新增学校</el-button>
+              <el-button class="button_background" @click="addSchool" v-if="permissions.includes('examinationCreate')">新增学校</el-button>
             </div>
           </div>
         </div>
@@ -90,7 +90,7 @@
               <el-table-column label="操作" align="center" width="60">
                 <template #default="{ row }">
                   <div class="table_row_option">
-                    <div class="button_delete" @click="DeleteSchool(row)">删除</div>
+                    <div class="button_delete" @click="DeleteSchool(row)" v-if="permissions.includes('examinationDelete')">删除</div>
                   </div>
                 </template>
               </el-table-column>
@@ -133,7 +133,9 @@ const selectRow = ref<SchoolItem>({
   childrenCount: 0,
   children: []
 })
+const permissions = ref([]) // 权限列表
 onMounted(() => {
+  permissions.value = JSON.parse(localStorage.getItem('permissions'))
   GetJoinExamList()
 })
 const handleRowClick = (row: any) => {

src/views/login/login.vue

@@ -17,7 +17,7 @@
         </div>
         <div class="login_info_message">后台管理系统登录</div>
         <div class="login_info_input">
-          <el-form :model="userInfo" :rules="rules" ref="userInfoForm" @submit.prevent="SubmitLogin">
+          <el-form ref="userInfoForm" @submit.prevent="SubmitLogin">
             <el-form-item prop="userName">
               <el-input v-model="userName" placeholder="请输入账号" clearable @keyup.enter="SubmitLogin">
                 <template #prefix>
@@ -253,6 +253,8 @@ const SubmitLogin = () => {
       if (res.code === 200) {
           console.log("登录成功返回",res)
           localStorage.setItem('token', res.data.tokenValue)
+          localStorage.setItem('menuList', JSON.stringify(res.data.pcMenuVOS))
+          localStorage.setItem('permissions', JSON.stringify(res.data.permissions))
           // 登录成功后调用获取用户信息接口
           return getUserInfo(res.data.token)
       }

src/views/manager/index.vue

@@ -11,7 +11,7 @@
         </div>
         <div class="content_right">
           <el-button class="button_border_gray" @click="Refresh"><img src="@/assets/icon/refresh.svg" alt="" style="margin-right: 5px;">刷新</el-button>
-          <el-button class="button_background" @click="AddManager" >新增用户</el-button>
+          <el-button class="button_background" @click="AddManager" v-if="permissions.includes('managerCreate')">新增用户</el-button>
         </div>
       </div>
     </div>
@@ -38,9 +38,9 @@
           <el-table-column label="操作" align="center" fixed="right" min-width="120">
             <template #default="scope">
               <div class="table_row_option">
-                <div class="button_editor" @click="EditManager(scope.row)">编辑</div>
-                <div class="button_editor" @click="EditPassword(scope.row)">重置密码</div>
-                <div class="button_delete" @click="DeleteManager(scope.row)">删除</div>
+                <div class="button_editor" @click="EditManager(scope.row)" v-if="permissions.includes('managerUpdate')">编辑</div>
+                <div class="button_editor" @click="EditPassword(scope.row)" v-if="permissions.includes('managerPassword')">重置密码</div>
+                <div class="button_delete" @click="DeleteManager(scope.row)" v-if="permissions.includes('managerDelete')">删除</div>
               </div>
             </template>
           </el-table-column>
@@ -101,8 +101,11 @@ const GetUserList = async() => {
 const GoSearch = () => {
   GetUserList()
 }
+
+const permissions = ref([]) // 权限列表
 // 组件挂载时自动加载数据
 onMounted(() => {
+  permissions.value = JSON.parse(localStorage.getItem('permissions'))
   GetUserList()//加载表格数据
 })
 

src/views/school/index.vue

@@ -51,8 +51,8 @@
             <el-button class="button_border_gray" @click="Refresh">
               <img src="@/assets/icon/refresh.svg" alt="" style="margin-right: 5px;">刷新
             </el-button>
-            <el-button class="button_border" @click="OpenSubject">开通科目</el-button>
-            <el-button class="button_background" @click="addUser">新增用户</el-button>
+            <el-button class="button_border" @click="OpenSubject" v-if="permissions.includes('schoolOpenSubjects')">开通科目</el-button>
+            <el-button class="button_background" @click="addUser" v-if="permissions.includes('schoolCreate')">新增用户</el-button>
           </div>
         </div>
       </div>
@@ -107,16 +107,16 @@
             <el-table-column label="操作" width="280" fixed="right" align="center">
               <template #default="{ row }">
                 <div class="table_row_option">
-                  <span v-if="row.status == 0" class="button_delete" @click="ChangeStatus(row, '解冻')">
+                  <span v-if="row.status == 0 && permissions.includes('schoolFreeze')" class="button_delete" @click="ChangeStatus(row, '解冻')">
                     解冻
                   </span>
-                  <span v-else class="button_editor text_color_orange" @click="ChangeStatus(row, '冻结')">
+                  <span v-if="row.status != 0 && permissions.includes('schoolFreeze')" class="button_editor text_color_orange" @click="ChangeStatus(row, '冻结')">
                     冻结
                   </span>
-                  <span class="button_editor" @click="EditUser(row)">编辑</span>
-                  <span class="button_editor" @click="OpenAuth(row)">权限</span>
-                  <span class="button_editor" @click="resetPassWord(row)">重置密码</span>
-                  <span class="button_editor" :class="row.status == 0 ? 'disabled_text' : ''" @click="GoTeach(row)">进入学校</span>
+                  <span class="button_editor" @click="EditUser(row)" v-if="permissions.includes('schoolUpdate')">编辑</span>
+                  <span class="button_editor" @click="OpenAuth(row)" v-if="permissions.includes('schoolPermission')">权限</span>
+                  <span class="button_editor" @click="resetPassWord(row)" v-if="permissions.includes('schoolPassword')">重置密码</span>
+                  <span class="button_editor" :class="row.status == 0 ? 'disabled_text' : ''" @click="GoTeach(row)" v-if="permissions.includes('UserInfo')">进入学校</span>
                 </div>
               </template>
             </el-table-column>
@@ -199,12 +199,14 @@ const passwordDialog = reactive({
   label: '', // 名称label
   remark: '' // 提示语
 }) // 重置密码弹窗数据
+const permissions = ref([]) // 权限列表
 provide('showDialog', showDialog) // 新增用户弹窗是否展示
 provide('dialogData', dialogData) // 新增用户弹窗数据
 provide('authData', authData) // 设置权限弹窗数据
 provide('subjectShowDialog', subjectShowDialog) // 开通科目弹窗数据
 provide('passwordDialog', passwordDialog) // 重置密码弹窗数据
 onMounted(() => {
+  permissions.value = JSON.parse(localStorage.getItem('permissions'))
   GetSchoolNumber()
   GetSchoolList()
 })