分组管理：添加用户列表、分组配置接口调用

src/api/groupManage.ts

@@ -0,0 +1,49 @@
+// src/api/login.ts
+import request from '../utils/request.js'
+let adminPrefix = import.meta.env.VITE_API_ADMIN_PRE
+
+// 查询所有用户
+export const getAllUserApi = (params:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/group/users/list`,
+        method: 'get',
+        params
+    })
+}
+
+// 分组管理操作
+// 分组列表查询接口
+export const getGroupListApi = () => {
+    return request({
+        url: `${adminPrefix}/api/v1/group/manager/groupList`,
+        method: 'get',
+    })
+}
+
+// 新增分组数据接口
+export const addGroupListApi = (data:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/group/manager/groupAdd`,
+        method: 'post',
+        data
+    })
+}
+
+// 删除分组数据接口
+export const deleteGroupListApi = (id:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/group/manager/groupDel/${id}`,
+        method: 'get',
+    })
+}
+
+// 修改分组数据接口
+export const updateGroupListApi = (data:any) => {
+    return request({
+        url: `${adminPrefix}/api/v1/group/manager/groupUpdate`,
+        method: 'post',
+        data
+    })
+}
+
+// 

src/baseComponents/formTableEdit/index.vue

@@ -164,6 +164,15 @@ const configTableDom = ref()
 
 // 处理表行的上下移动
 const HandleRowMove = (val)=>{
+    // 移动前要保证 没有编辑中的数据
+    // 整体点击确认前，要保证单条编辑已经全部完成
+    let result = val.find(item=>{
+        return (item.editFlag || item.tmpId)
+    })
+    if(result){
+        ElMessage.warning('请先保存未保存的数据')
+        return
+    }
     emit('tableDrag',val)
     // tableData.value = val
 }

src/components/settingCard/SettingCard.vue

@@ -292,9 +292,9 @@ const HandleDeleteConfirm = async (row)=>{
 
     if(res?.code == 200){
         ElMessage.success(res?.msg)
-        tableData.value = tableData.value.filter(item=>{
-            return item.id !== row.id
-        })
+        // tableData.value = tableData.value.filter(item=>{
+        //     return item.id !== row.id
+        // })
         emit('deleteSuccess')
     }
     deleteFlag.value = 'success'
@@ -302,15 +302,6 @@ const HandleDeleteConfirm = async (row)=>{
 
 // 表单整体确认
 const HandleDragOperation = async (params)=>{
-    // 整体点击确认前，要保证单条编辑已经全部完成
-    let result = params.find(item=>{
-        return (item.editFlag || item.tmpId)
-    })
-    if(result){
-        ElMessage.warning('请先保存未保存的数据')
-        return
-    }
-
     // 先临时存储原始数据
     let originTableData = JSON.parse(JSON.stringify(tableData.value))
     // 拖拽后的数据

src/views/userPrivilegeManagement/groupManage/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="end_item container">
         <div class="container_left end_item">
-            <FormSearchGroup :searchList="accountFormSearhList" />
+            <FormSearchGroup :searchList="accountFormSearhList" @searchChange="HandleSearchChange"/>
             <div class="page_jg_20"/>
             <Table 
                 :hidePagination="true"
@@ -62,11 +62,11 @@
     <FormTableEdit 
         style="flex-grow: 0;"
         addOperationName="增加分组" 
-        :startDragIndex="startDragIndex" 
-        :endDragIndex="endDragIndex" 
+        :startDragIndex="()=>{return 0}" 
+        :endDragIndex="(params)=>{return params.length}" 
         formTitle="分组管理" 
-        :middleColumnItm="{name:'groupName',label:'分组名称'}"
-        :disabledDeleteRowScene="()=>{return false}"
+        :middleColumnItm="{name:'title',label:'分组名称'}"
+        :disabledDeleteRowScene="DisabledDeleteGroupRowScene"
         :disabledEditRowScene="()=>{return false}"
         :defaultTableData="gorupTableData"
         v-model:formVisible="formVisible"
@@ -75,11 +75,12 @@
         @editConfirm = 'HandleEditGroup'
         @addConfirm = 'HandleAddGroup'
         @deleteConfirm = 'HandleDeleteGroup'
-        @entiretyConfirm = 'HandleConfirmEntiretyGroup'
+        @tableDrag="HandlTableDrag"
+        @entiretyConfirm = "formDialogConfirmFlag = 'success'"
         >
-        <template #groupName="{row,currentIndex}">
-            <el-input v-model="row.groupName" v-if="row.tmpId" placeholder="请输fdff入内容" />
-            <span v-else>{{ row.groupName }}</span>
+        <template #title="{row,currentIndex}">
+            <el-input v-model="row.title" v-if="row.tmpId" placeholder="请输fdff入内容" />
+            <span v-else>{{ row.title }}</span>
         </template>
     </FormTableEdit>
 
@@ -99,7 +100,7 @@
 
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
 import {accountFormSearhList} from './formSearch'
 import Table from '@/baseComponents/Table.vue';
@@ -111,25 +112,25 @@ import Dialog from '@/baseComponents/Dialog.vue';
 import {tableColumns,userTableColumns} from './table'
 import {provinceTablist} from './tabSearch'
 
-
+import {
+    getAllUserApi,
+    getGroupListApi,
+    addGroupListApi,
+    deleteGroupListApi,
+    updateGroupListApi
+} from '@/api/groupManage'
+import { ElMessage } from 'element-plus';
 /**
  * 1. 左侧 员工相关信息及操作
  */
 // 员工账号信息
-const userAccountData = ref([
-    {
-        account:'xxx',
-        name:'xx',
-        id:'1',
-    },
-    {
-        account:'xxx',
-        name:'xx2',
-        id:'2',
-    },
-])
+const userAccountData = ref([])
 // 当前选中的用户
 const selectedUser = ref()
+
+const searchParams = ref({
+    queryStr:'',
+})
 // 设置表行选中 样式
 const tableRowClassName = ({row,rowIndex})=>{
   if(row.id == selectedUser.value?.id){
@@ -145,7 +146,24 @@ const HandleSelectUser = (user) => {
   };
 };
 
+// 获取所有的用户
+const GetAllUserList = async ()=>{
+    let params = {
+        username:searchParams.value.queryStr
+    }
+    let res = await getAllUserApi(params)
+    if(res?.code == 200){
+        userAccountData.value = res.data || []
+    }
+}
 
+const HandleSearchChange = async (params,key)=>{
+    searchParams.value = {
+        ...searchParams.value,
+        ...params
+    }
+    await GetAllUserList()
+}
 
 /**
  * 2. 右侧分组展示信息 及操作
@@ -236,41 +254,80 @@ const OpenDeleteDialog = (row, cellObj)=>{
 const formVisible = ref(false)
 const formDialogConfirmFlag = ref('')
 const deleteFlag = ref('')
-const gorupTableData = ref([
-    {
-        id:'xxx',
-        groupName:'xxxx'
-    }
-])
+const gorupTableData = ref([])
 const HandleOpenGroup = ()=>{
     formVisible.value = true
 }
-const startDragIndex = ()=>{
-    return 0
+
+
+// 修改分组
+const HandleEditGroup = async (row,params,sortCode)=>{
+    let transferParams = {
+        id: row.id,
+        title: params.title,
+        sortCode
+    }
+    let res =  await updateGroupListApi(transferParams)
+    if(res?.code == 200){
+        ElMessage.success(res?.msg)
+        row.editFlag = ''
+        row.tmpId = ''
+        console.log('当前行',row)
+        // 重新查询
+        await GetGroupList()
+    }
 }
-const endDragIndex = (tableData)=>{
-    return tableData.length
+// 添加分组
+const HandleAddGroup = async (row,params,sortCode)=>{
+    let transferParams = {
+        title: params.title,
+        sortCode
+    }
+    let res = await addGroupListApi(transferParams)
+    if(res?.code == 200){
+        ElMessage.success(res?.msg)
+        row.tmpId = ''
+        await GetGroupList()
+    }
 }
-const HandleEditGroup = (row,params)=>{
-    row.editFlag = ''
-    row.tmpId = ''
+// 删除分组
+const HandleDeleteGroup = async (row)=>{
+    let res = await deleteGroupListApi(row.id)
+    if(res?.code == 200){
+        ElMessage.success(res?.msg)
+        // 删除执行内容
+        deleteFlag.value = 'success'
+        await GetGroupList()
+    }
 }
-const HandleAddGroup = (row,params)=>{
-    row.tmpId = ''
+
+// 处理表行的拖拽 _待完善
+const HandlTableDrag = ()=>{
+    // 拖拽接口—— 待完善
+
+    
 }
-const HandleDeleteGroup = (row)=>{
-    gorupTableData.value = gorupTableData.value.filter(item=>{
-        return item.id !== row.id
-    })
-    // 删除执行内容
-    deleteFlag.value = 'success'
+
+// 获取分组列表信息
+const GetGroupList = async ()=>{
+    let res = await getGroupListApi()
+    if(res?.code == 200){
+        gorupTableData.value = res.data
+    }
 }
-const HandleConfirmEntiretyGroup = ()=>{
-    setTimeout(()=>{
-        formDialogConfirmFlag.value = 'fail'
-    },1000)
+
+const DisabledDeleteGroupRowScene = (row,currentIndex,tableData)=>{
+    if(row.delStatus === 0){
+        return false
+    }else{
+        return true
+    }
 }
 
+onMounted(async ()=>{
+    await GetAllUserList()
+    await GetGroupList()
+})
 
 
 </script>

src/views/userPrivilegeManagement/groupManage/table.ts

@@ -13,7 +13,7 @@ export const userTableColumns = ref([
         custom:false,
     },
     {
-        name:'name',
+        name:'username',
         label:'姓名',
         width:'80',
         fixed:'',
@@ -27,10 +27,10 @@ export const userTableColumns = ref([
 
 export const tableColumns = ref([
     {
-        name: 'region', // 对应“项目组”列，通常作为行头
+        name: 'region',
         label: '项目组',
         width: '120',
-        fixed: 'left', // 建议固定首列，防止横向滚动时看不清区域
+        fixed: 'left',
         align: 'center',
         minWidth: '',
         custom: false,