添加权限列表的接口调用

src/api/userPrivilegeManagement.ts

@@ -39,4 +39,37 @@ export const deleteUserRoleConfigApi = (id:any) => {
 }
 
 
-/** 用户角色配置查询操作 */
+/** 用户角色配置查询操作 */
+
+// 获取用户权限列表
+export const getUserRoleConfigListApi = (data:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/role/pageListData`,
+        method: 'post',
+        data
+    })
+}
+
+// 权限列表——联动查询下拉接口
+export const getPrivilegeHeaderSearchListApi = () => {
+    return request({
+        url: `${adminPrefix}/api/v1/role/groupList`,
+        method: 'get',
+    })
+}
+
+// 权限列表——角色下拉接口
+export const getRoleListApi = () => {
+    return request({
+        url: `${adminPrefix}/api/v1/role/List`,
+        method: 'get',
+    })
+}
+
+// 权限列表查询组员下拉接口
+export const getGroupMembersListApi = () => {
+    return request({
+        url: `${adminPrefix}/api/v1/role/userList`,
+        method: 'get',
+    })
+}

src/views/userPrivilegeManagement/groupList/index.vue

@@ -105,15 +105,12 @@ const groupList = ref([])  // 分组列表
 // 省份列表
 const provinceList = computed(()=>{
     console.log('省份列表',allProvinceUserConfig.value)
-    return [
-        { label: '全部省份', value: 'all' },
-        ...(allProvinceUserConfig.value.map(item=>{
+    return allProvinceUserConfig.value.map(item=>{
             return {
                 label:item.provinceName,
                 value:item.provinceId,
             }
-        }))
-    ]
+        }) || []
 }) 
 // 城市列表
 const cityList = computed(()=>{
@@ -128,13 +125,7 @@ const cityList = computed(()=>{
             }) || []
             return cities
         }).flat()
-        return [
-            {
-                label:'全部地区',
-                value:'all'
-            },
-            ...provinceCityList
-        ]
+        return provinceCityList
     }else{
         let  provinceCityList =  (allProvinceUserConfig.value.find(item=>item.provinceId === searchParams.value.province)?.cityData || []).map(city=>{
             return {
@@ -142,14 +133,8 @@ const cityList = computed(()=>{
                 value:city.cityId,
                 userList:city.userData
             }
-        })
-        return [
-            {
-                label:'全部地区',
-                value:'all'
-            },
-            ...provinceCityList
-        ]
+        }) || []
+        return provinceCityList
     }
 })
 // 与 城市  和分组 有关 的用户列表
@@ -157,44 +142,32 @@ const userList = computed(()=>{
     if(searchParams.value.city === 'all'){  //所有城市
         // 所有组下的人员
         if(searchParams.value.group == 'all'){
-            let userOption = [
-                {
-                    label:'全部组员',
-                    value:'all'
-                },  
-                ...(cityList.value.slice(1).map(city=>{
+            let userOption = (cityList.value.slice(1).map(city=>{
                     return Object.values(city.userList)
                 }).flat(Infinity).map(item=>{
                     return {
                         label:item.userName,
                         value:item.userId
                     }
-                }))
-            ].map(item=>{
-                return JSON.stringify(item)
-            })
+                })).map(item=>{
+                    return JSON.stringify(item)
+                }) || []
+
             return [...(new Set(userOption))].map(item=>{
                 return JSON.parse(item)
             })
-
         }else{
             // 指定组下的人员，
-            let userOption = [
-                {
-                    label:'全部组员',
-                    value:'all'
-                },
-                ...(cityList.value.slice(1).map(city=>{
+            let userOption = (cityList.value.slice(1).map(city=>{
                     return city.userList[searchParams.value.group]
                 }).flat(Infinity).map(item=>{
                     return {
                         label:item.userName,
                         value:item.userId
                     }
-                }))
-            ].map(item=>{
-                return JSON.stringify(item)
-            })
+                })).map(item=>{
+                    return JSON.stringify(item)
+                }) || []
             return [...(new Set(userOption))].map(item=>{
                 return JSON.parse(item)
             })
@@ -207,14 +180,8 @@ const userList = computed(()=>{
                     label:item.userName,
                     value:item.userId
                 }
-            })
-            return [
-                {
-                    label:'全部组员',
-                    value:'all'
-                },
-                ...cityPeople
-            ]
+            }) || []
+            return cityPeople
         }else{
             let cityPeopleDispatch = cityList.value.find(item=>item.value === searchParams.value.city)?.userList
             let cityGroupPeople = cityPeopleDispatch?.[searchParams.value.group]?.map(item=>{
@@ -223,13 +190,7 @@ const userList = computed(()=>{
                     value:item.userId
                 }
             }) || []
-            return [
-                {
-                    label:'全部组员',
-                    value:'all'
-                },
-                ...cityGroupPeople
-            ]
+            return cityGroupPeople
         }
     }
 })
@@ -241,21 +202,30 @@ const searchList = computed(()=>[
         type: 'select',
         placeholder: '请选择',
         defaultValue:searchParams.value.province,
-        options: provinceList.value
+        options: [
+            { label: '全部省份', value: 'all' },     
+            ...(provinceList.value)
+        ]
     },
     {
         key: 'city',
         type: 'select',
         placeholder: '全部地区',
         defaultValue:searchParams.value.city,
-        options: cityList.value
+        options: [
+            {label:'全部地区',value:'all'},
+            ...(cityList.value)
+        ]
     },
     {
         key: 'group',
         type: 'select',
         placeholder: '全部分组',
         defaultValue:searchParams.value.group,
-        options: groupList.value
+        options: [
+            {label:'全部分组', value:'all'},
+            ...groupList.value
+        ]
     },
     {
         key: 'member',
@@ -263,7 +233,10 @@ const searchList = computed(()=>[
         placeholder: '全部组员',
         defaultValue:searchParams.value.member,
         hidden: false,
-        options: userList.value
+        options: [
+            {label:'全部组员', value:'all'},
+            ...userList.value
+        ]
     },
     {
         key: 'queryStr',
@@ -306,14 +279,9 @@ const GetGroupList = async ()=>{
                 label:item.title,
                 value:item.id
             }
-        })
-        groupList.value = [
-            {
-                label:'全部分组',
-                value:'all'
-            },
-            ...groupData
-        ]
+        }) || []
+        groupList.value = groupData
+       
     }
 }
 

src/views/userPrivilegeManagement/permissionList/formSearchGroup.ts

@@ -1,48 +0,0 @@
-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

@@ -3,65 +3,215 @@
         <div class="page_search">
             <div class="search_content">
                 <div class="content_left">
-                    <FormSearchGroup :searchList="searchList" />
+                    <FormSearchGroup :searchList="searchList" @searchChange="HandleSearchChange"/>
                 </div>
             </div>
         </div>
         <div class="page_jg_20"></div>
         <Table :pageSize="pageSize" :currentPage="currentPage"  :totalNum="totalNum" 
-            :tableColumns="tableColumns" :tableData="tableData">
+            :tableColumns="tableColumns" :tableData="tableData"
+            @paginationChange="HandlePaginationChange">
             <template #num="{row,currentIndex}">
                 {{ (currentPage - 1) * pageSize + currentIndex  }}
             </template>
             <template #operation="{row}">
                 <div class="table_row_option">
-                    <span class="el_button_delete">删除</span>
+                    <span class="el_button_delete" @click="OpenDeleteDialog(row)">删除</span>
                 </div>
             </template>
         </Table>
     </div>
 
+    <!-- 删除弹窗 -->
+    <Dialog :visible="deleteDialogVisible" 
+        :submitLoading="deleteSubmitLoading"
+        @close="CloseDeleteDialog"
+        @confirm="HandleDeleteConfirm">
+    </Dialog>
+
 </template>
 
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, onMounted, 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([
+import {
+    getUserRoleConfigListApi,
+    getRoleListApi,
+    deleteUserRoleConfigApi,
+    getGroupMembersListApi,
+} from '@/api/userPrivilegeManagement'
+
+import {getGroupListApi} from '@/api/groupManage'
+import Dialog from '@/baseComponents/Dialog.vue';
+
+
+
+
+const searchList = computed(()=>[
     {
-        index: 1,
-        account: '123456789',
-        name: '陈越',
-        groupName: '项目1组',
-        roleName:'管理员',
-        operation: '删除' // 对应操作列，通常存储按钮文本或状态标识
+        key: 'role',
+        type: 'select',
+        placeholder: '请选择',
+        defaultValue:searchParams.value.role,
+        options: [
+            { label: '全部角色', value: 'all' },
+            ...(roleOption.value)
+        ]
     },
     {
-        index: 2,
-        account: '123456789',
-        name: '张静怡',
-        groupName: '项目1组',
-        roleName:'组长',
-        operation: '删除'
+        key: 'group',
+        type: 'select',
+        placeholder: '全部分组',
+        defaultValue:searchParams.value.group,
+        options: [
+            { label: '全部分组', value: 'all' },
+            ...(groupOption.value)
+        ]
     },
     {
-        index: 3,
-        account: '123456789',
-        name: '朱函睿',
-        groupName: '项目1组',
-        roleName:'组长',
-        operation: '删除'
-    }
+        key: 'member',
+        type: 'select',
+        placeholder: '全部组员',
+        defaultValue:searchParams.value.member,
+        hidden: false,
+        options: [
+            { label: '全部组员', value: 'all' },
+            ...groupMemberOption.value
+        ]
+    },
+    {
+        key: 'queryStr',
+        type: 'input',
+        defaultValue:searchParams.value.queryStr,
+        placeholder: '请输入', 
+    },
 ])
+
+
+const searchParams= ref({
+    role:'all',
+    group:'all',
+    member:'all',
+    queryStr:'',
+})
+const groupOption = ref([])  //分组配置
+const roleOption = ref([])  //角色配置
+const groupMemberOption = ref([])
+const GetGroupList = async ()=>{
+    let res = await getGroupListApi()
+    if(res?.code == 200){
+        groupOption.value = res.data.map(item=>{
+            return {
+                label:item.title,
+                value:item.id,
+            }
+        })
+    }
+}
+const GetRoleList = async ()=>{
+    let res = await getRoleListApi()
+    if(res?.code == 200){
+        roleOption.value = res.data?.map(item=>{
+            return {
+                label:item.title,
+                value:item.id
+            }
+        })
+    }
+}
+const GetGroupMembersList = async ()=>{
+    let res = await getGroupMembersListApi()
+    if(res?.code == 200){
+
+        let userList =  res.data.map(item=>{
+            return JSON.stringify({
+                label:item.userName,
+                value:item.userId
+            })
+        })
+        groupMemberOption.value = [...(new Set(userList))].map(item=>{
+            return JSON.parse(item)
+        })
+    }
+
+}
+
+const HandleSearchChange = async (params,key)=>{
+    searchParams.value = {...params }
+    await GetPrivilegeList()
+}
+
+
+// 表格分页参数
+const pageSize = ref(20)
+const currentPage = ref(1)
+const totalNum = ref(0)
+const tableData = ref([])
+// 获取权限列表
+const GetPrivilegeList =  async()=>{
+    let params = {
+        roleId:searchParams.value.role == 'all' ? '' :  searchParams.value.role,	
+        userId:searchParams.value.member == 'all' ? '' : searchParams.value.member,		
+        groupId:searchParams.value.group  == 'all' ? '' : searchParams.value.group,		
+        queryStr:searchParams.value.queryStr,	
+        pageNum:currentPage.value,	
+        pageSize:pageSize.value,
+    }
+    let res = await getUserRoleConfigListApi(params)
+
+    if(res?.code == 200){
+        tableData.value = res.data?.records || []
+        totalNum.value = res.data.total
+    }
+}
+
+const HandlePaginationChange = async (params:any)=>{
+    const {type,val} = params
+    if(type == 'currentPage'){
+        currentPage.value = val
+        await GetPrivilegeList()
+    }
+}
+
+/**
+ * 删除弹窗有关操作
+ */
+const deleteDialogVisible = ref(false)
+const deleteSubmitLoading = ref(false)
+const currentDeleteRow = ref({})
+const CloseDeleteDialog = ()=>{
+    deleteSubmitLoading.value = false
+    deleteDialogVisible.value = false
+}
+const OpenDeleteDialog = (row)=>{
+    currentDeleteRow.value = row
+    deleteDialogVisible.value = true
+}
+const HandleDeleteConfirm = async ()=>{
+    deleteSubmitLoading.value = true
+    let res = undefined
+    try{
+        res = await deleteUserRoleConfigApi(currentDeleteRow.value.id)
+    }catch{}
+    if(res?.code == 200){
+        CloseDeleteDialog()
+        await GetPrivilegeList()
+    }else{
+        deleteSubmitLoading.value = false
+    }
+}
+
+onMounted(async ()=>{
+    await GetPrivilegeList()
+    await GetGroupList()
+    await GetRoleList()
+    await GetGroupMembersList()
+})
 </script>
 
 

src/views/userPrivilegeManagement/permissionList/table.ts

@@ -20,7 +20,7 @@ export const tableColumns = ref([
         custom: false,
     },
     {
-        name: 'name',
+        name: 'userName',
         label: '姓名',
         width: '120',
         fixed: '',