完成分组管理接口调用

src/api/groupManage.ts

@@ -46,12 +46,39 @@ export const updateGroupListApi = (data:any) => {
     })
 }
 
-// 
-// 表格查询接口 ——未知
-// export const 
+// 分组排序数据接口
+export const sortGroupListApi = (data:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/group/manager/groupSort`,
+        method: 'post',
+        data
+    })
+}
+
+
+/** 人员配置/管理/查询 操作  */
+
+// 获取所有省份、所有市区下的组别人员配置 接口
 export const getGroupDataApi = () => {
     return request({
         url: `${adminPrefix}/api/v1/group/tableData`,
         method: 'get',
     })
-}
+}
+
+// 设置分组用户数据接口
+export const addCityGroupPeopleApi = (data:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/group/userAdd`,
+        method: 'post',
+        data,
+    })
+}
+
+// 删除分组用户数据接口
+export const deleteCityGroupPeopleApi = (id:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/group/userDel/${id}`,
+        method: 'post',
+    })
+}

src/views/userPrivilegeManagement/groupManage/index.vue

@@ -17,7 +17,8 @@
                 <div class="search_content">
                     <div class="content_left">
                         <TabSearch :tabList="provinceTablist" 
-                            :defaultTabKey="defaultProvince" tabType="line" />
+                            :defaultTabKey="defaultProvince" tabType="line" 
+                            @tabChange="HandleProvinceChange" />
                     </div>
                     <div class="content_right">
                         <span v-if="isConfigMode" class="config_switch_desc">
@@ -31,20 +32,26 @@
             </div>
             <div class="page_jg_20" />
             <Table :tableColumns="filterGroupTableColumns" :tableData="groupPeopleTableData">
-                 <template v-for="column in filterGroupTableColumns.slice(1)" :key="column.name"   v-slot:[column.name]="{row}"> 
+                <template #city="{row}">
+                    {{ row?.city?.cityName }}
+                </template>
+
+                <template v-for="column in filterGroupTableColumns.slice(1)" :key="column.name"   v-slot:[column.name]="{row}"> 
                     <div class="cell_container" @click="HandleAddUser(row, column.name)">
-                        <template v-if="row?.[column.name]">
+                        <template v-if="row?.[column.name]?.length > 0">
                             <el-tooltip
+                                v-for="(staff,index) in row?.[column.name]"
+                                :key="staff.id"
                             effect="dark"
-                            :content="`${row?.[column.name].username}`"
+                            :content="`${staff.userName}`"
                             placement="top-start"
                             >
                             <div v-if="isConfigMode" class="teacher_tag">
-                                <span :title="row?.[column.name].username">{{ row?.[column.name].username }}</span>
-                                <el-icon class="delete_icon" @click.stop="OpenDeleteDialog(row, column,)"><Close /></el-icon>
+                                <span :title="staff.userName">{{ staff.userName }}</span>
+                                <el-icon class="delete_icon" @click.stop="OpenDeleteDialog(row, column,index)"><Close /></el-icon>
                             </div>
                             <div v-else class="disabled_teacher">
-                                <span :title="row?.[column.name].username">{{ row?.[column.name].username}}</span>
+                                <span :title="staff.userName">{{staff.userName}}</span>
                             </div>
                             </el-tooltip>
                         </template>
@@ -93,7 +100,7 @@
         :visible="dialogVisible"
         @confirm="HandleDialogConfirm"
         @close="HandleDialogClose">
-        请确认是否确认删除{{ currentDeleteColumn.label }}  {{currentDeleteRow[currentDeleteColumn.name].username}}   {{provinceTablist.find(item=>item.key == defaultProvince)?.label}}{{currentDeleteRow.region}}  的权限？
+        请确认是否确认删除{{ currentDeleteColumn.label }}  {{currentDeleteCell.userName}}   {{provinceTablist.find(item=>item.key == defaultProvince)?.label}}{{currentDeleteRow.region}}  的权限？
     </Dialog>
 
 </template>
@@ -119,6 +126,11 @@ import {
     deleteGroupListApi,
     updateGroupListApi,
     getGroupDataApi,
+
+    addCityGroupPeopleApi,
+    deleteCityGroupPeopleApi,
+    sortGroupListApi,
+
 } from '@/api/groupManage'
 
 import {
@@ -180,33 +192,84 @@ const defaultProvince = ref('beijing')
 
 const filterGroupTableColumns = ref([...groupTableColumns.value])
 
-const groupPeopleTableData = ref([
-     {
-        id:'1',
-        region:'东城区',
-        project1:{id:'1',name:'xxx'},
-      
-    },
+const groupPeopleTableData = ref([]) //分组人员表格配置
 
-])
 
-// 添加员工
+/** 处理不同省份下的 城市 组别员工 配置 */
+const allProvinceUserConfig = ref([])  //所有省份下的用户配置信息
+// 获取已经配置的省份信息
+const GetProvinceConfigList = async ()=>{
+    let res = await getProvinceConfigListApi()
+    if(res?.code == 200){
+        provinceTablist.value = res.data.map(item=>{
+            return {
+                label:item.name,
+                key:item.id,
+            }
+        })
+        // 赋值默认的省份
+        defaultProvince.value = provinceTablist.value[0]?.key
+    }
+}
+
+// 获取所有省份、所有市区下的组别人员配置
+const GetGroupData = async ()=>{
+    let res = await getGroupDataApi()
+    if(res?.code == 200){
+        allProvinceUserConfig.value = res.data
+        RenderProvincePeopleConfig()
+    }
+}
+// 处理省份切换
+const HandleProvinceChange = (val)=>{
+    defaultProvince.value = val
+    RenderProvincePeopleConfig()
+}
+// 渲染 不同省份下的  表格人员配置
+const RenderProvincePeopleConfig = ()=>{
+     let defaultProvinceConfig =  allProvinceUserConfig.value.find(item=>{
+        return item.provinceId == defaultProvince.value
+       })
+       groupPeopleTableData.value = defaultProvinceConfig.cityData.map(item=>{
+        return {
+            city:{
+                cityName:item.cityName,
+                cityId:item.cityId
+            },
+            ...(item.userData)
+        }
+       })
+}
+
+/** 省市 分组 添加员工 */
 const HandleAddUser = async (row, cell) => {
     if (!isConfigMode.value) return;
     if (!selectedUser.value) return;
 
     let teacherMsg = { 
         id: selectedUser.value?.id, 
-        username: selectedUser.value?.username,
+        userName: selectedUser.value?.username,
         account:selectedUser.value?.account 
     }
-
     if (!row[cell]) {
         row[cell] = [];
     
     }
-    row[cell] = teacherMsg;
 
+    let params = {
+        groupId: cell,
+        userId: teacherMsg.id,
+        provinceId: defaultProvince.value,
+        cityId: row.city.cityId,
+    }
+    let res = await addCityGroupPeopleApi(params)
+    if(res?.code == 200){
+        ElMessage.success(res?.msg)
+        teacherMsg.id = res.data
+        row[cell].push(teacherMsg);
+        // 重新查询分组 _更新禁删权限
+        await GetGroupList()
+    }
 };
 
 
@@ -219,12 +282,23 @@ const currentDeleteCell = ref()  //当前准备删除的（员工）单元格数
 const currentDeleteRow = ref()  //当前准备删除的（员工）所在行数据
 const currentDeleteColumn = ref()  //当前准备删除的（员工）所在列信息
 // 移除员工
-const HandleDialogConfirm = ()=>{
-    let id = null
+const HandleDialogConfirm = async ()=>{
+    dialogSubmitLoading.value = true
     let res = undefined
-    currentDeleteRow.value[currentDeleteColumn.value.name] = ''
-    // id = currentDeleteCell.value.id
-    HandleDialogClose()
+    try{
+        res = await deleteCityGroupPeopleApi(currentDeleteCell.value.id)
+    }catch{}
+    if(res?.code == 200){
+        ElMessage.success(res?.msg)
+        currentDeleteRow.value[currentDeleteColumn.value.name] = currentDeleteRow.value[currentDeleteColumn.value.name].filter(item=>{
+            return item.id !== currentDeleteCell.value.id
+        })
+        HandleDialogClose()
+        // 重新查询分组 _更新禁删权限
+        await GetGroupList()
+    }else{
+        dialogSubmitLoading.value = false
+    }
 }
 
 const HandleDialogClose = ()=>{
@@ -232,11 +306,12 @@ const HandleDialogClose = ()=>{
     currentDeleteRow.value = null
     currentDeleteColumn.value = null
     dialogVisible.value = false
+    dialogSubmitLoading.value = false
 }
-const OpenDeleteDialog = (row, cellObj)=>{
+const OpenDeleteDialog = (row, cellObj,index)=>{
     if (!isConfigMode.value) return;
     dialogVisible.value = true
-    currentDeleteCell.value = row[cellObj.name]
+    currentDeleteCell.value = row[cellObj.name][index]
     currentDeleteRow.value = row
     currentDeleteColumn.value = cellObj
 }
@@ -253,7 +328,30 @@ const HandleOpenGroup = ()=>{
     formVisible.value = true
 }
 
+// 获取分组列表信息 并赋值给表头
+const GetGroupList = async ()=>{
+    let res = await getGroupListApi()
+    if(res?.code == 200){
+        gorupTableData.value = res.data
 
+        let extraTableColumns = res.data.map(item=>{
+            return {
+                name: item.id,
+                label: item.title,
+                width: '120',
+                fixed: '',
+                align: 'center',
+                minWidth: '',
+                custom: true,
+            }
+        })
+        // 给默认展示的表格的组头信息赋值
+        filterGroupTableColumns.value = [
+            ...groupTableColumns.value,
+            ...extraTableColumns
+        ]
+    }
+}
 // 修改分组
 const HandleEditGroup = async (row,params,sortCode)=>{
     let transferParams = {
@@ -295,55 +393,30 @@ const HandleDeleteGroup = async (row)=>{
     }
 }
 
-// 处理表行的拖拽 _待完善
-const HandlTableDrag = ()=>{
-    // 拖拽接口—— 待完善
-
-    
-}
-
-// 获取分组列表信息
-const GetGroupList = async ()=>{
-    let res = await getGroupListApi()
-    if(res?.code == 200){
-        gorupTableData.value = res.data
-
-        let extraTableColumns = res.data.map(item=>{
-            return {
-                name: item.id,
-                label: item.title,
-                width: '120',
-                fixed: '',
-                align: 'center',
-                minWidth: '',
-                custom: true,
-            }
-        })
-        // 给默认展示的表格的组头信息赋值
-        filterGroupTableColumns.value = [
-            ...groupTableColumns.value,
-            ...extraTableColumns
-        ]
-    }
-}
-
-
-const GetProvinceConfigList = async ()=>{
-    let res = await getProvinceConfigListApi()
+// 处理分组排序
+const HandlTableDrag = async (val)=>{
+    console.log('拖拽后的数据',val)
+    // 排序后的表行数据
+    let originData = JSON.parse(JSON.stringify(gorupTableData.value))
+    gorupTableData.value =  JSON.parse(JSON.stringify(val))
+
+    let transferData = val.map((item,index)=>{
+        return {
+            id: item?.id,
+            title:item.title,
+            sortCode: index + 1,
+        }
+    })
+    let res = await sortGroupListApi(transferData)
     if(res?.code == 200){
-        provinceTablist.value = res.data.map(item=>{
-            return {
-                label:item.name,
-                key:item.id,
-            }
-        })
-        defaultProvince.value = provinceTablist.value[0]?.key
-
-        // 获取默认省份的配置数据 ——待完善
+        ElMessage.success(res?.msg)
+        await GetGroupList()
+    }else{
+        gorupTableData.value =  [...originData]
     }
 }
 
-
+// 分组行禁删的条件 ====
 const DisabledDeleteGroupRowScene = (row,currentIndex,tableData)=>{
     if(row.delStatus === 0){
         return false
@@ -353,16 +426,14 @@ const DisabledDeleteGroupRowScene = (row,currentIndex,tableData)=>{
 }
 
 
-// 接口报错 —— 待完善
-const GetGroupData = async ()=>{
-    let res = await getGroupDataApi()
-}
-
 onMounted(async ()=>{
     await GetAllUserList()
     await GetGroupList()
-    await GetGroupData()
+
+
+    // 省份 和省份人员配置 上下顺序不能颠倒
     await GetProvinceConfigList()
+    await GetGroupData()
 })
 
 

src/views/userPrivilegeManagement/groupManage/table.ts

@@ -25,12 +25,12 @@ export const userTableColumns = ref([
 
 export const groupTableColumns = ref([
     {
-        name: 'region',
+        name: 'city',
         label: '项目组',
         width: '120',
         fixed: 'left',
         align: 'center',
         minWidth: '',
-        custom: false,
+        custom: true,
     },
 ]);