分组列表添加列表查询和删除接口调用，联动查询待完善

src/api/groupManage.ts

@@ -82,3 +82,16 @@ export const deleteCityGroupPeopleApi = (id:any) => {
         method: 'post',
     })
 }
+
+
+// 人员分组列表信息
+export const getCityGroupPeopleListApi = (params:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/group/pageListData`,
+        method: 'get',
+        params
+    })
+}
+
+
+

src/views/userPrivilegeManagement/groupList/formSearchGroup.ts

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

@@ -3,68 +3,352 @@
         <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">
+        <Table :pageSize="pageSize" :currentPage="currentPage"  
+            :totalNum="totalNum" :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>
+                    <!--row.delStatus 删除状态，0-可删除，1-不可删除 -->
+                    <span :class="row.delStatus === 0 ? 'el_button_delete' : 'option_disabled'" 
+                        @click="OpenDeleteDialog(row)">
+                        删除
+                    </span>
                 </div>
             </template>
         </Table>
     </div>
 
+    <Dialog 
+        style="flex-grow: 0;"
+        v-if="dialogVisible"
+        :submitLoading="dialogSubmitLoading"
+        :visible="dialogVisible"
+        @confirm="HandleDialogConfirm"
+        @close="HandleDialogClose">
+        请确认是否确认删除{{ currentDeleteRow.groupName }}  {{currentDeleteRow.userName}}  {{currentDeleteRow.cityName}}{{currentDeleteRow.provinceName}}的权限？
+    </Dialog>
+
 </template>
 
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
+import { ref,onMounted,computed } from 'vue';
+import {ElMessage} from 'element-plus'
 
-import {searchList} from './formSearchGroup'
+import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
+import Dialog from '@/baseComponents/Dialog.vue';
 import Table from '@/baseComponents/Table.vue';
 
 import {tableColumns} from './table'
 
+import { getCityGroupPeopleListApi,deleteCityGroupPeopleApi,
+    getGroupDataApi,getGroupListApi,
+ } from '@/api/groupManage';
+import jsPDF from 'jspdf';
+
+
+ /**
+  * 表格查询有关信息
+  */
 const pageSize = ref(20)
 const currentPage = ref(1)
 const totalNum = ref(0)
-const tableData = ref([
+const tableData = ref([])
+// 表格分页变化
+const HandlePaginationChange = async (params)=>{
+    const { type, val } = params
+    if(type === 'currentPage'){
+        currentPage.value = val
+        await GetCityGroupPeopleList()
+    }
+}
+// 获取分组列表人员信息
+const GetCityGroupPeopleList = async ()=>{
+    let params = {
+        groupId:searchParams.value.group == 'all' ? '' : searchParams.value.group,
+        userId:searchParams.value.member == 'all' ? '' : searchParams.value.member,
+        provinceId:searchParams.value.province == 'all' ? '' : searchParams.value.province,
+        cityId:searchParams.value.city == 'all' ? '' : searchParams.value.city,
+        queryStr:searchParams.value.queryStr,
+        pageNum:currentPage.value,
+        pageSize:pageSize.value,
+    }
+    let res = await getCityGroupPeopleListApi(params)
+    if(res?.code === 200){
+        totalNum.value = res.data.total
+        tableData.value = res.data.records
+    }
+}
+
+
+/**
+ * 级联下拉筛选有关信息
+ */
+// 查询参数
+const searchParams = ref({
+    province:'all',
+    city:'all',
+    group:'all',
+    member:'all',
+    queryStr:'',
+})
+const allProvinceUserConfig = ref([])  // 所有省份、所有市区下的组别人员配置
+const groupList = ref([])  // 分组列表
+// 省份列表
+const provinceList = computed(()=>{
+    console.log('省份列表',allProvinceUserConfig.value)
+    return [
+        { label: '全部省份', value: 'all' },
+        ...(allProvinceUserConfig.value.map(item=>{
+            return {
+                label:item.provinceName,
+                value:item.provinceId,
+            }
+        }))
+    ]
+}) 
+// 城市列表
+const cityList = computed(()=>{
+    if(searchParams.value.province === 'all'){
+        return [ { label:'全部地区', value:'all'} ]
+    }else{
+        let  provinceCityList =  (allProvinceUserConfig.value.find(item=>item.provinceId === searchParams.value.province)?.cityData || []).map(city=>{
+            return {
+                label:city.cityName,
+                value:city.cityId,
+                userList:city.userData
+            }
+        })
+        return [
+            {
+                label:'全部地区',
+                value:'all'
+            },
+            ...provinceCityList
+        ]
+    }
+})
+// 与 城市 有关 用户列表  __省份选全部的时候的用户展示还需要——添加——待完成
+const userList = computed(()=>{
+    // 与城市和省份都有关
+    if(searchParams.value.city === 'all'){  //所有城市
+        // 判断省份
+        if(searchParams.value.province === 'all'){ //所有省份
+            return [{ label:'全部组员', value:'all' }]
+        }else{   //指定省份
+            // 获取当前省份 所有城市
+            // 指定组下的人员
+            if(searchParams.value.group == 'all'){
+                let userOption = [
+                    {
+                        label:'全部组员',
+                        value:'all'
+                    },  
+                    ...(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)
+                })
+                return [...(new Set(userOption))].map(item=>{
+                    return JSON.parse(item)
+                })
+
+            }else{
+                // 获取当前省份 所有城市
+                // 所有人员，
+                let userOption = [
+                    {
+                        label:'全部组员',
+                        value:'all'
+                    },
+                    ...(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)
+                })
+                return [...(new Set(userOption))].map(item=>{
+                    return JSON.parse(item)
+                })
+            }
+        }
+    }else{
+        // 既和城市有关，也和分组有关
+        if(searchParams.value.group == 'all'){
+            let cityPeopleDispatch = cityList.value.find(item=>item.value === searchParams.value.city)?.userList
+            let cityPeople = Object.values(cityPeopleDispatch).flat(Infinity)?.map(item=>{
+                return {
+                    label:item.userName,
+                    value:item.userId
+                }
+            })
+            return [
+                {
+                    label:'全部组员',
+                    value:'all'
+                },
+                ...cityPeople
+            ]
+        }else{
+            let cityPeopleDispatch = cityList.value.find(item=>item.value === searchParams.value.city)?.userList
+            let cityGroupPeople = cityPeopleDispatch?.[searchParams.value.group]?.map(item=>{
+                return {
+                    label:item.userName,
+                    value:item.userId
+                }
+            }) || []
+            return [
+                {
+                    label:'全部组员',
+                    value:'all'
+                },
+                ...cityGroupPeople
+            ]
+        }
+    }
+})
+
+// 筛选配置项
+const searchList = computed(()=>[
     {
-        index: 1,
-        account: '123456789',
-        name: '陈越',
-        province: '辽宁',
-        region: '沈阳',
-        groupName: '项目1组',
-        operation: '删除' // 对应操作列，通常存储按钮文本或状态标识
+        key: 'province',
+        type: 'select',
+        placeholder: '请选择',
+        defaultValue:searchParams.value.province,
+        options: provinceList.value
     },
     {
-        index: 2,
-        account: '123456789',
-        name: '张静怡',
-        province: '辽宁',
-        region: '沈阳',
-        groupName: '项目1组',
-        operation: '删除'
+        key: 'city',
+        type: 'select',
+        placeholder: '全部地区',
+        defaultValue:searchParams.value.city,
+        options: cityList.value
     },
     {
-        index: 3,
-        account: '123456789',
-        name: '朱函睿',
-        province: '辽宁',
-        region: '沈阳',
-        groupName: '项目1组',
-        operation: '删除'
-    }
+        key: 'group',
+        type: 'select',
+        placeholder: '全部分组',
+        defaultValue:searchParams.value.group,
+        options: groupList.value
+    },
+    {
+        key: 'member',
+        type: 'select',
+        placeholder: '全部组员',
+        defaultValue:searchParams.value.member,
+        hidden: false,
+        options: userList.value
+    },
+    {
+        key: 'queryStr',
+        type: 'input',
+        defaultValue:searchParams.value.queryStr,
+        placeholder: '请输入', 
+    },
 ])
+// 处理查询参数的变更
+const HandleSearchChange = async (params,key)=>{
+    console.log('触发的变更',params)
+    searchParams.value = {...params}
+    switch(key){
+        case 'province':
+            searchParams.value.city = 'all'
+            searchParams.value.member = 'all'
+            break
+        case 'city':
+            searchParams.value.member = 'all'
+    }
+    await GetCityGroupPeopleList()
+}
+
+// 获取所有省份、所有市区下的组别人员配置
+const GetGroupData = async ()=>{
+    let res = await getGroupDataApi()
+    if(res?.code == 200){
+        allProvinceUserConfig.value = res.data
+        console.log('省份列表',allProvinceUserConfig.value)
+    }
+}
+// 获取分组列表信息
+const GetGroupList = async ()=>{
+    let res = await getGroupListApi()
+    if(res?.code == 200){
+        let groupData = res.data.map(item=>{
+            return {
+                label:item.title,
+                value:item.id
+            }
+        })
+        groupList.value = [
+            {
+                label:'全部分组',
+                value:'all'
+            },
+            ...groupData
+        ]
+    }
+}
+
+
+/** 删除弹窗有关信息 */
+const dialogVisible = ref(false)
+const dialogSubmitLoading = ref(false)
+const currentDeleteRow = ref()  //当前准备删除的行数据
+// 移除员工
+const HandleDialogConfirm = async ()=>{
+    dialogSubmitLoading.value = true
+    let res = undefined
+    try{
+        res = await deleteCityGroupPeopleApi(currentDeleteRow.value.id)
+    }catch{}
+    if(res?.code == 200){
+        ElMessage.success(res?.msg)
+        HandleDialogClose()
+        // 重新查询列表信息
+        await GetCityGroupPeopleList()
+    }else{
+        dialogSubmitLoading.value = false
+    }
+}
+
+const HandleDialogClose = ()=>{
+    currentDeleteRow.value = null
+    dialogVisible.value = false
+    dialogSubmitLoading.value = false
+}
+const OpenDeleteDialog = (row)=>{
+    dialogVisible.value = true
+    currentDeleteRow.value = row
+}
+
+
+
+onMounted(async ()=>{
+    // 获取所有分组下的人员配置
+    await GetGroupData()
+    await GetGroupList()
+    await GetCityGroupPeopleList()
+})
 </script>
 
 

src/views/userPrivilegeManagement/groupList/table.ts

@@ -20,7 +20,7 @@ export const tableColumns = ref([
         custom: false,
     },
     {
-        name: 'name',
+        name: 'userName',
         label: '姓名',
         width: '120',
         fixed: '',
@@ -29,7 +29,7 @@ export const tableColumns = ref([
         custom: false,
     },
     {
-        name: 'province',
+        name: 'provinceName',
         label: '省份',
         width: '100',
         fixed: '',
@@ -38,7 +38,7 @@ export const tableColumns = ref([
         custom: false,
     },
     {
-        name: 'region',
+        name: 'cityName',
         label: '地区',
         width: '100',
         fixed: '',

src/views/userPrivilegeManagement/groupManage/index.vue

@@ -31,7 +31,9 @@
                 </div>
             </div>
             <div class="page_jg_20" />
-            <Table :tableColumns="filterGroupTableColumns" :tableData="groupPeopleTableData">
+            <Table :hidePagination="true" 
+                :tableColumns="filterGroupTableColumns" 
+                :tableData="groupPeopleTableData">
                 <template #city="{row}">
                     {{ row?.city?.cityName }}
                 </template>
@@ -100,7 +102,7 @@
         :visible="dialogVisible"
         @confirm="HandleDialogConfirm"
         @close="HandleDialogClose">
-        请确认是否确认删除{{ currentDeleteColumn.label }}  {{currentDeleteCell.userName}}   {{provinceTablist.find(item=>item.key == defaultProvince)?.label}}{{currentDeleteRow.region}}  的权限？
+        请确认是否确认删除{{ currentDeleteColumn.label }}  {{currentDeleteCell.userName}}   {{provinceTablist.find(item=>item.key == defaultProvince)?.label}}{{currentDeleteRow.city.cityName}}的权限？
     </Dialog>
 
 </template>
@@ -197,26 +199,20 @@ const groupPeopleTableData = ref([]) //分组人员表格配置
 
 /** 处理不同省份下的 城市 组别员工 配置 */
 const allProvinceUserConfig = ref([])  //所有省份下的用户配置信息
-// 获取已经配置的省份信息
-const GetProvinceConfigList = async ()=>{
-    let res = await getProvinceConfigListApi()
+
+// 获取所有省份、所有市区下的组别人员配置
+const GetGroupData = async ()=>{
+    let res = await getGroupDataApi()
     if(res?.code == 200){
+        allProvinceUserConfig.value = res.data
         provinceTablist.value = res.data.map(item=>{
             return {
-                label:item.name,
-                key:item.id,
+                label:item.provinceName,
+                key:item.provinceId,
             }
         })
         // 赋值默认的省份
         defaultProvince.value = provinceTablist.value[0]?.key
-    }
-}
-
-// 获取所有省份、所有市区下的组别人员配置
-const GetGroupData = async ()=>{
-    let res = await getGroupDataApi()
-    if(res?.code == 200){
-        allProvinceUserConfig.value = res.data
         RenderProvincePeopleConfig()
     }
 }
@@ -429,10 +425,6 @@ const DisabledDeleteGroupRowScene = (row,currentIndex,tableData)=>{
 onMounted(async ()=>{
     await GetAllUserList()
     await GetGroupList()
-
-
-    // 省份 和省份人员配置 上下顺序不能颠倒
-    await GetProvinceConfigList()
     await GetGroupData()
 })