添加权限列表静态页面

src/views/userPrivilegeManagement/groupList/table.ts

@@ -60,9 +60,9 @@ export const tableColumns = ref([
         name: 'operation',
         label: '操作',
         width: '100',
-        fixed: 'right', // 操作列通常固定在右侧
+        fixed: 'right', 
         align: 'center',
         minWidth: '',
-        custom: true, // 操作列通常需要自定义插槽来渲染按钮
+        custom: true, 
     }
 ]);

src/views/userPrivilegeManagement/index.vue

@@ -17,8 +17,8 @@
             <GroupList  v-if="defaultTabKey == 'groupList'" />
             <!-- 权限管理 -->
             <PermissionManage v-if="defaultTabKey == 'permissionManage'" />
-            
-
+            <!-- 权限列表 -->
+            <PermissionList   v-if="defaultTabKey == 'permissionList'" />
         </div>
     </div>
 </template>
@@ -33,6 +33,8 @@ import UserManage from './userManage/index.vue';
 import GroupManage from './groupManage/index.vue'
 import GroupList from './groupList/index.vue'
 import PermissionManage from './permissionManage/index.vue'
+import PermissionList from './permissionList/index.vue'
+
 const defaultTabKey = ref('userManage')
 
 const HandleTabChange = (val)=>{

src/views/userPrivilegeManagement/permissionList/formSearchGroup.ts

@@ -0,0 +1,48 @@
+import { ref } from "vue";
+
+export const searchList = ref([
+    {
+        key: 'role',
+        type: 'select',
+        placeholder: '请选择',
+        defaultValue:'all',
+        options: [
+            { label: '全部角色', value: 'all' },
+            { label: '项目组长', value: '110000' },
+            { label: '管理员', value: '310000' }
+        ]
+    },
+    {
+        key: 'region',
+        type: 'select',
+        placeholder: '全部地区',
+        defaultValue:'all',
+        options: [
+            { label: '全部地区', value: 'all' }
+        ]
+    },
+    {
+        key: 'group',
+        type: 'select',
+        placeholder: '全部分组',
+        defaultValue:'all',
+        options: [
+            { label: '全部分组', value: 'all' }
+        ]
+    },
+    {
+        key: 'member',
+        type: 'select',
+        placeholder: '全部组员',
+        defaultValue:'all',
+        hidden: false,
+        options: [
+            { label: '全部组员', value: 'all' }
+        ]
+    },
+    {
+        key: 'keyword',
+        type: 'input',
+        placeholder: '请输入', 
+    },
+])

src/views/userPrivilegeManagement/permissionList/index.vue

@@ -0,0 +1,70 @@
+<template>
+    <div class="end_item">
+        <div class="page_search">
+            <div class="search_content">
+                <div class="content_left">
+                    <FormSearchGroup :searchList="searchList" />
+                </div>
+            </div>
+        </div>
+        <div class="page_jg_20"></div>
+        <Table :pageSize="pageSize" :currentPage="currentPage"  :totalNum="totalNum" 
+            :tableColumns="tableColumns" :tableData="tableData">
+            <template #num="{row,currentIndex}">
+                {{ (currentPage - 1) * pageSize + currentIndex  }}
+            </template>
+            <template #operation="{row}">
+                <div class="table_row_option">
+                    <span class="el_button_delete">删除</span>
+                </div>
+            </template>
+        </Table>
+    </div>
+
+</template>
+
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
+
+import {searchList} from './formSearchGroup'
+import Table from '@/baseComponents/Table.vue';
+
+import {tableColumns} from './table'
+
+const pageSize = ref(20)
+const currentPage = ref(1)
+const totalNum = ref(0)
+const tableData = ref([
+    {
+        index: 1,
+        account: '123456789',
+        name: '陈越',
+        groupName: '项目1组',
+        roleName:'管理员',
+        operation: '删除' // 对应操作列，通常存储按钮文本或状态标识
+    },
+    {
+        index: 2,
+        account: '123456789',
+        name: '张静怡',
+        groupName: '项目1组',
+        roleName:'组长',
+        operation: '删除'
+    },
+    {
+        index: 3,
+        account: '123456789',
+        name: '朱函睿',
+        groupName: '项目1组',
+        roleName:'组长',
+        operation: '删除'
+    }
+])
+</script>
+
+
+<style lang="scss" scoped>
+
+</style>

src/views/userPrivilegeManagement/permissionList/table.ts

@@ -0,0 +1,60 @@
+import { ref } from "vue";
+
+export const tableColumns = ref([
+    {
+        name: 'num',
+        label: '序号',
+        width: '80',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: true, 
+    },
+    {
+        name: 'account',
+        label: '账号',
+        width: '120',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'name',
+        label: '姓名',
+        width: '120',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'groupName',
+        label: '分组名称',
+        width: '120',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+      
+    },
+    {
+        name: 'roleName',
+        label: '角色',
+        width: '120',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+      
+    },
+    {
+        name: 'operation',
+        label: '操作',
+        width: '100',
+        fixed: 'right', 
+        align: 'center',
+        minWidth: '',
+        custom: true, 
+    }
+]);

src/views/userPrivilegeManagement/permissionManage/table.ts

@@ -37,7 +37,7 @@ export const tableColumns = ref([
     },
     {
         name: 'project1',
-        label: '项目1组',
+        label: '项目组长',
         width: '320',
         fixed: '',
         align: 'left',