添加分组列表静态页面

src/baseComponents/Table.vue

@@ -63,7 +63,7 @@ interface ColumnProperty  {
   fixed?:String,
   align?:String,
   minWidth?:String,
-  custom:String,
+  custom:Boolean,
   customHeader?:Boolean,
   hidden:Boolean,
 }

src/views/userPrivilegeManagement/groupList/formSearchGroup.ts

@@ -0,0 +1,48 @@
+import { ref } from "vue";
+
+export const searchList = ref([
+    {
+        key: 'province',
+        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/groupList/index.vue

@@ -0,0 +1,73 @@
+<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: '陈越',
+        province: '辽宁',
+        region: '沈阳',
+        groupName: '项目1组',
+        operation: '删除' // 对应操作列，通常存储按钮文本或状态标识
+    },
+    {
+        index: 2,
+        account: '123456789',
+        name: '张静怡',
+        province: '辽宁',
+        region: '沈阳',
+        groupName: '项目1组',
+        operation: '删除'
+    },
+    {
+        index: 3,
+        account: '123456789',
+        name: '朱函睿',
+        province: '辽宁',
+        region: '沈阳',
+        groupName: '项目1组',
+        operation: '删除'
+    }
+])
+</script>
+
+
+<style lang="scss" scoped>
+
+</style>

src/views/userPrivilegeManagement/groupList/table.ts

@@ -0,0 +1,68 @@
+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: 'province',
+        label: '省份',
+        width: '100',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'region',
+        label: '地区',
+        width: '100',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'groupName',
+        label: '分组名称',
+        width: '120',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+      
+    },
+    {
+        name: 'operation',
+        label: '操作',
+        width: '100',
+        fixed: 'right', // 操作列通常固定在右侧
+        align: 'center',
+        minWidth: '',
+        custom: true, // 操作列通常需要自定义插槽来渲染按钮
+    }
+]);

src/views/userPrivilegeManagement/index.vue

@@ -13,7 +13,11 @@
             <UserManage  v-if="defaultTabKey == 'userManage'"/>
             <!-- 分组管理 -->
             <GroupManage  v-if="defaultTabKey == 'groupManage'"/>
-
+            <!-- 分组列表 -->
+            <GroupList  v-if="defaultTabKey == 'groupList'" />
+            <!-- 权限管理 -->
+            <PermissionManage v-if="defaultTabKey == 'permissionManage'" />
+            
 
         </div>
     </div>
@@ -27,7 +31,8 @@ import { tabList } from './tabSearch';
 
 import UserManage from './userManage/index.vue';
 import GroupManage from './groupManage/index.vue'
-
+import GroupList from './groupList/index.vue'
+import PermissionManage from './permissionManage/index.vue'
 const defaultTabKey = ref('userManage')
 
 const HandleTabChange = (val)=>{