feat: 添加按钮权限

src/directives/modules/auth.ts

@@ -19,7 +19,9 @@ const auth: Directive = {
     }
 
     if (value && value instanceof Array && value.length > 0) {
-      const hasPermissions = value.every(item => all_permission === item || permissions.includes(item))
+      const hasPermissions = value.some(item => {
+        return all_permission === item || permissions.includes(item)
+      })
       if (!hasPermissions) {
         el.parentNode && el.parentNode.removeChild(el)
       }

src/layouts/components/AppTools/Avatar.vue

@@ -27,9 +27,10 @@
 <script setup lang="ts" name="Avatar">
 import { LOGIN_URL } from '@/constants'
 import router from '@/router'
-import { useUserStore } from '@/stores'
+import { useTabsStore, useUserStore } from '@/stores'
 import PasswordDialog from '@/views/system/user/components/PasswordDialog.vue'
 const userStore = useUserStore()
+const tabsStore = useTabsStore()
 // 退出登录
 const logout = () => {
   ElMessageBox.confirm('您是否确认退出登录?', '温馨提示', {
@@ -39,7 +40,7 @@ const logout = () => {
   }).then(async () => {
     // 1.执行退出登录接口
     await userStore.userLogout()
-
+    tabsStore.clear()
     // 2.重定向到登陆页
     router.replace(LOGIN_URL)
     ElMessage.success('退出登录成功！')

src/stores/interface/index.ts

@@ -24,7 +24,7 @@ export interface UserState {
 }
 
 export type UserInfo = {
-  userId?: number
+  userId?: string
   account: string
   userName: string
   orgId: string

src/stores/modules/tabs.ts

@@ -60,6 +60,9 @@ export const useTabsStore = defineStore('eco-tabs', {
       this.tabsMenuList.forEach(item => {
         if (item.path === nowFullPath) item.title = title
       })
+    },
+    clear() {
+      this.tabsMenuList = []
     }
   },
   persist: true

src/views/system/config/index.vue

@@ -3,13 +3,23 @@
     <ProTable ref="proTableRef" title="参数配置" row-key="configId" :columns="columns" :search-columns="searchColumns" :request-api="getTableList">
       <!-- 表格 header 按钮 -->
       <template #tableHeader="scope">
-        <el-button type="primary" icon="CirclePlus" @click="openDrawer('新增')"> 新增 </el-button>
-        <el-button type="danger" icon="Delete" plain :disabled="!scope.isSelected" @click="batchDelete(scope.selectedListIds)"> 批量删除 </el-button>
+        <el-button type="primary" icon="CirclePlus" v-auth="['system:config:add']" @click="openDrawer('新增')"> 新增 </el-button>
+        <el-button
+          type="danger"
+          icon="Delete"
+          v-auth="['system:config:delete']"
+          plain
+          :disabled="!scope.isSelected"
+          @click="batchDelete(scope.selectedListIds)">
+          批量删除
+        </el-button>
       </template>
 
       <template #operation="{ row }">
-        <el-button type="primary" link icon="EditPen" @click="openDrawer('编辑', row)"> 编辑 </el-button>
-        <el-button v-if="row.isLock !== '1'" type="primary" link icon="Delete" @click="deleteRow(row)"> 删除 </el-button>
+        <el-button type="primary" link icon="EditPen" v-auth="['system:config:edit']" @click="openDrawer('编辑', row)"> 编辑 </el-button>
+        <el-button v-if="row.isLock !== '1'" type="primary" link icon="Delete" v-auth="['system:config:delete']" @click="deleteRow(row)">
+          删除
+        </el-button>
       </template>
     </ProTable>
     <ConfigDrawer ref="drawerRef" size="40%" />

src/views/system/files/index.vue

@@ -5,11 +5,19 @@
       <template #tableHeader="scope">
         <el-button type="primary" icon="Upload" @click="upload()"> 上传Dialog </el-button>
         <el-button type="primary" icon="Upload" @click="upload1()"> 上传Drawer </el-button>
-        <el-button type="danger" icon="Delete" plain :disabled="!scope.isSelected" @click="batchDelete(scope.selectedListIds)"> 批量删除 </el-button>
+        <el-button
+          type="danger"
+          icon="Delete"
+          v-auth="['system:files:delete']"
+          plain
+          :disabled="!scope.isSelected"
+          @click="batchDelete(scope.selectedListIds)">
+          批量删除
+        </el-button>
       </template>
 
       <template #operation="{ row }">
-        <el-button type="primary" link icon="Delete" @click="deleteRow(row)"> 删除 </el-button>
+        <el-button type="primary" link icon="Delete" v-auth="['system:files:delete']" @click="deleteRow(row)"> 删除 </el-button>
         <el-button type="primary" link icon="Download" @click="useDownload.download(row.fileId)"> 下载 </el-button>
       </template>
     </ProTable>

src/views/system/menu/index.vue

@@ -11,7 +11,7 @@
       :default-expand-all="defaultExpandAllKey">
       <!-- 表格 header 按钮 -->
       <template #tableHeader>
-        <el-button type="primary" icon="CirclePlus" @click="openDrawer('新增')"> 新增 </el-button>
+        <el-button type="primary" icon="CirclePlus" v-auth="['system:menu:add']" @click="openDrawer('新增')"> 新增 </el-button>
         <el-button type="info" icon="Sort" @click="changeExpand"> 展开/折叠 </el-button>
       </template>
       <!-- 图标 -->
@@ -23,8 +23,10 @@
       </template>
 
       <template #operation="{ row }">
-        <el-button type="primary" link icon="EditPen" @click="openDrawer('编辑', row)"> 编辑 </el-button>
-        <el-button v-if="row.isLock !== '1'" type="primary" link icon="Delete" @click="deleteRow(row)"> 删除 </el-button>
+        <el-button type="primary" link icon="EditPen" v-auth="['system:menu:edit']" @click="openDrawer('编辑', row)"> 编辑 </el-button>
+        <el-button v-if="row.isLock !== '1'" type="primary" link icon="Delete" v-auth="['system:menu:delete']" @click="deleteRow(row)">
+          删除
+        </el-button>
       </template>
     </ProTable>
     <MenuDrawer ref="drawerRef" size="50%" />

src/views/system/org/index.vue

@@ -12,13 +12,13 @@
         :request-api="getTableList">
         <!-- 表格 header 按钮 -->
         <template #tableHeader="scope">
-          <el-button type="primary" icon="CirclePlus" @click="openDrawer('新增')"> 新增组织 </el-button>
-          <el-button type="danger" icon="Delete" plain :disabled="!scope.isSelected"> 批量删除 </el-button>
+          <el-button type="primary" icon="CirclePlus" v-auth="['system:org:add']" @click="openDrawer('新增')"> 新增组织 </el-button>
+          <el-button type="danger" icon="Delete" v-auth="['system:org:delete']" plain :disabled="!scope.isSelected"> 批量删除 </el-button>
         </template>
 
         <template #operation="{ row }">
-          <el-button type="primary" link icon="EditPen" @click="openDrawer('编辑', row)"> 编辑 </el-button>
-          <el-button v-if="row.id !== 1" type="primary" link icon="Delete"> 删除 </el-button>
+          <el-button type="primary" link icon="EditPen" v-auth="['system:org:edit']" @click="openDrawer('编辑', row)"> 编辑 </el-button>
+          <el-button v-if="row.id !== 1" type="primary" link icon="Delete" v-auth="['system:org:delete']"> 删除 </el-button>
         </template>
       </ProTable>
     </div>

src/views/system/position/index.vue

@@ -19,15 +19,21 @@
         @reset="reset">
         <!-- 表格 header 按钮 -->
         <template #tableHeader="scope">
-          <el-button type="primary" icon="CirclePlus" @click="openDrawer('新增')"> 新增职位 </el-button>
-          <el-button type="danger" icon="Delete" plain :disabled="!scope.isSelected" @click="batchDelete(scope.selectedListIds)">
+          <el-button type="primary" icon="CirclePlus" v-auth="['system:position:add']" @click="openDrawer('新增')"> 新增职位 </el-button>
+          <el-button
+            type="danger"
+            icon="Delete"
+            v-auth="['system:position:delete']"
+            plain
+            :disabled="!scope.isSelected"
+            @click="batchDelete(scope.selectedListIds)">
             批量删除
           </el-button>
         </template>
 
         <template #operation="{ row }">
-          <el-button type="primary" link icon="EditPen" @click="openDrawer('编辑', row)"> 编辑 </el-button>
-          <el-button type="primary" link icon="Delete" @click="deleteRow(row)"> 删除 </el-button>
+          <el-button type="primary" link icon="EditPen" v-auth="['system:position:edit']" @click="openDrawer('编辑', row)"> 编辑 </el-button>
+          <el-button type="primary" link icon="Delete" v-auth="['system:position:delete']" @click="deleteRow(row)"> 删除 </el-button>
         </template>
       </ProTable>
     </div>

src/views/system/role/components/PermissionsDrawer.vue

@@ -13,7 +13,7 @@
     <el-table :data="mergeData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
       <el-table-column prop="moduleName" width="180">
         <template #header>
-          <el-checkbox label="权限模块" @change="handleChange"></el-checkbox>
+          <el-checkbox label="权限模块" v-model="checkbox" @change="handleChange"></el-checkbox>
         </template>
         <template #default="{ row }">
           <div>
@@ -23,7 +23,7 @@
       </el-table-column>
       <el-table-column prop="code">
         <template #header>
-          <el-checkbox label="权限点" @change="handleChange"></el-checkbox>
+          <el-checkbox label="权限点" v-model="checkbox" @change="handleChange"></el-checkbox>
         </template>
         <template #default="{ row }">
           <div>
@@ -135,6 +135,7 @@ const allPermissions = ref<PermissionsVO[]>([])
 const hasPermissions = ref<string[]>([])
 const mergeData = ref<MergeDataProps[]>([])
 
+const checkbox = ref(false)
 const drawerVisible = ref(false)
 const drawerProps = ref<EcoDrawerProps>({
   title: '',

src/views/system/role/index.vue

@@ -3,15 +3,25 @@
     <ProTable ref="proTableRef" title="参数配置" row-key="roleId" :columns="columns" :search-columns="searchColumns" :request-api="getTableList">
       <!-- 表格 header 按钮 -->
       <template #tableHeader="scope">
-        <el-button type="primary" icon="CirclePlus" @click="openDrawer('新增')"> 新增 </el-button>
-        <el-button type="danger" icon="Delete" plain :disabled="!scope.isSelected" @click="batchDelete(scope.selectedListIds)"> 批量删除 </el-button>
+        <el-button type="primary" icon="CirclePlus" v-auth="['system:role:add']" @click="openDrawer('新增')"> 新增 </el-button>
+        <el-button
+          type="danger"
+          icon="Delete"
+          v-auth="['system:role:delete']"
+          plain
+          :disabled="!scope.isSelected"
+          @click="batchDelete(scope.selectedListIds)">
+          批量删除
+        </el-button>
       </template>
 
       <template #operation="{ row }">
         <div class="operation-group">
-          <el-button type="primary" link icon="EditPen" v-auth="[]" @click="openDrawer('编辑', row)"> 编辑 </el-button>
-          <el-button v-if="row.isLock !== '1'" type="primary" link icon="Delete" @click="deleteRow(row)"> 删除 </el-button>
-          <div class="group" v-if="row.isLock !== '1'">
+          <el-button type="primary" link icon="EditPen" v-auth="['system:role:edit']" @click="openDrawer('编辑', row)"> 编辑 </el-button>
+          <el-button v-if="row.isLock !== '1'" type="primary" link icon="Delete" v-auth="['system:role:delete']" @click="deleteRow(row)">
+            删除
+          </el-button>
+          <div class="group" v-if="row.isLock !== '1' && userStore.user.userId === '1'">
             <el-dropdown trigger="click">
               <el-button type="primary" link icon="DArrowRight"> 授权 </el-button>
               <template #dropdown>
@@ -38,7 +48,9 @@ import { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTabl
 import { useDictOptions, useHandleData } from '@/hooks'
 import { RoleBO, RoleQuery, RoleVO } from '@/api/interface/system/role'
 import PermissionsDrawer from './components/PermissionsDrawer.vue'
+import { useUserStore } from '@/stores'
 
+const userStore = useUserStore()
 const proTableRef = ref<ProTableInstance>()
 
 // 表格配置项

src/views/system/user/index.vue

@@ -13,16 +13,24 @@
         @reset="reset">
         <!-- 表格 header 按钮 -->
         <template #tableHeader="scope">
-          <el-button type="primary" icon="CirclePlus" @click="openDrawer('新增')"> 新增用户 </el-button>
-          <el-button type="danger" icon="Delete" plain :disabled="!scope.isSelected" @click="batchDelete(scope.selectedListIds)">
+          <el-button type="primary" icon="CirclePlus" v-auth="['system:user:add']" @click="openDrawer('新增')"> 新增用户 </el-button>
+          <el-button
+            type="danger"
+            icon="Delete"
+            v-auth="['system:user:delete']"
+            plain
+            :disabled="!scope.isSelected"
+            @click="batchDelete(scope.selectedListIds)">
             批量删除
           </el-button>
         </template>
 
         <template #operation="{ row }">
           <div class="operation-group">
-            <el-button type="primary" link icon="EditPen" @click="openDrawer('编辑', row)"> 编辑 </el-button>
-            <el-button v-if="row.isLock !== '1'" type="primary" link icon="Delete" @click="deleteRow(row)"> 删除 </el-button>
+            <el-button type="primary" link icon="EditPen" v-auth="['system:user:edit']" @click="openDrawer('编辑', row)"> 编辑 </el-button>
+            <el-button v-if="row.isLock !== '1'" type="primary" link icon="Delete" v-auth="['system:user:delete']" @click="deleteRow(row)">
+              删除
+            </el-button>
             <div class="group" v-if="row.isLock !== '1'">
               <el-dropdown trigger="click">
                 <el-button type="primary" link icon="DArrowRight"> 更多 </el-button>