分组管理：默认列表添加省份渲染和表头的组别渲染

src/api/groupManage.ts

@@ -46,4 +46,12 @@ export const updateGroupListApi = (data:any) => {
     })
 }
 
-// 
+// 
+// 表格查询接口 ——未知
+// export const 
+export const getGroupDataApi = () => {
+    return request({
+        url: `${adminPrefix}/api/v1/group/tableData`,
+        method: 'get',
+    })
+}

src/baseComponents/TabSearch.vue

@@ -120,6 +120,7 @@ const HandleTabChange = async (params) =>{
 
 .line_tab{
     display: flex;
+    flex-wrap: wrap;
     gap:24px;
     padding-bottom: 10px;
     color:#666666;
@@ -147,6 +148,9 @@ const HandleTabChange = async (params) =>{
 
 .box_tab,
 .line_tab{
+    >span{
+        word-break: keep-all;
+    }
     .disabled{
         cursor: not-allowed;
     }

src/views/userPrivilegeManagement/groupManage/index.vue

@@ -21,7 +21,7 @@
                     </div>
                     <div class="content_right">
                         <span v-if="isConfigMode" class="config_switch_desc">
-                            {{ selectedUser?.id ? `当前选中的员工：${selectedUser.name}` : '暂无选中的员工' }}
+                            {{ selectedUser?.id ? `当前选中的员工：${selectedUser.username}` : '暂无选中的员工' }}
                             </span>
                         <el-switch v-model="isConfigMode"  style="--el-switch-on-color: #2E64FA" />
                         <span class="config_switch_desc" :style="{color:isConfigMode ? '#2E64FA' : '#999999'}">选中员工配置关系</span>
@@ -30,21 +30,21 @@
                 </div>
             </div>
             <div class="page_jg_20" />
-            <Table :tableColumns="tableColumns" :tableData="groupPeopleTableData">
-                 <template v-for="column in tableColumns.slice(1)" :key="column.name"   v-slot:[column.name]="{row}"> 
+            <Table :tableColumns="filterGroupTableColumns" :tableData="groupPeopleTableData">
+                 <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]">
                             <el-tooltip
                             effect="dark"
-                            :content="`${row?.[column.name].name}`"
+                            :content="`${row?.[column.name].username}`"
                             placement="top-start"
                             >
                             <div v-if="isConfigMode" class="teacher_tag">
-                                <span :title="row?.[column.name].name">{{ row?.[column.name].name }}</span>
+                                <span :title="row?.[column.name].username">{{ row?.[column.name].username }}</span>
                                 <el-icon class="delete_icon" @click.stop="OpenDeleteDialog(row, column,)"><Close /></el-icon>
                             </div>
                             <div v-else class="disabled_teacher">
-                                <span :title="row?.[column.name].name">{{ row?.[column.name].name}}</span>
+                                <span :title="row?.[column.name].username">{{ row?.[column.name].username}}</span>
                             </div>
                             </el-tooltip>
                         </template>
@@ -93,7 +93,7 @@
         :visible="dialogVisible"
         @confirm="HandleDialogConfirm"
         @close="HandleDialogClose">
-        请确认是否确认删除{{ currentDeleteColumn.label }}  {{currentDeleteRow[currentDeleteColumn.name].name}}   {{provinceTablist.find(item=>item.key == defaultProvince)?.label}}{{currentDeleteRow.region}}  的权限？
+        请确认是否确认删除{{ currentDeleteColumn.label }}  {{currentDeleteRow[currentDeleteColumn.name].username}}   {{provinceTablist.find(item=>item.key == defaultProvince)?.label}}{{currentDeleteRow.region}}  的权限？
     </Dialog>
 
 </template>
@@ -109,7 +109,7 @@ import FormTableEdit from '@/baseComponents/formTableEdit/index.vue'
 
 import Dialog from '@/baseComponents/Dialog.vue';
 
-import {tableColumns,userTableColumns} from './table'
+import {groupTableColumns,userTableColumns, } from './table'
 import {provinceTablist} from './tabSearch'
 
 import {
@@ -117,8 +117,14 @@ import {
     getGroupListApi,
     addGroupListApi,
     deleteGroupListApi,
-    updateGroupListApi
+    updateGroupListApi,
+    getGroupDataApi,
 } from '@/api/groupManage'
+
+import {
+    getProvinceConfigListApi,
+} from '@/api/parameterConfig'
+
 import { ElMessage } from 'element-plus';
 /**
  * 1. 左侧 员工相关信息及操作
@@ -141,7 +147,7 @@ const tableRowClassName = ({row,rowIndex})=>{
 const HandleSelectUser = (user) => {
   selectedUser.value = {
     id:user.id,
-    name:user.name,
+    username:user.username,
     account:user.account,
   };
 };
@@ -171,29 +177,17 @@ const HandleSearchChange = async (params,key)=>{
 // 分组信息
 const isConfigMode = ref(false)
 const defaultProvince = ref('beijing')
+
+const filterGroupTableColumns = ref([...groupTableColumns.value])
+
 const groupPeopleTableData = ref([
      {
         id:'1',
         region:'东城区',
         project1:{id:'1',name:'xxx'},
-        project2:{id:'1',name:'xxx'},
-        project3:{id:'1',name:'xxx'},
-        project4:{id:'1',name:'xxx'},
-        project5:{id:'1',name:'xxx'},
-        project6:{id:'1',name:'xxx'},
-        project7:{id:'1',name:'xxx'},
-    },
-    {
-        id:'2',
-        region:'西城区',
-        project1:{id:'1',name:'xxx'},
-        project2:{id:'1',name:'xxx'},
-        project3:{id:'1',name:'xxx'},
-        project4:{id:'1',name:'xxx'},
-        project5:{id:'1',name:'xxx'},
-        project6:{id:'1',name:'xxx'},
-        project7:{id:'1',name:'xxx'},
+      
     },
+
 ])
 
 // 添加员工
@@ -203,7 +197,7 @@ const HandleAddUser = async (row, cell) => {
 
     let teacherMsg = { 
         id: selectedUser.value?.id, 
-        name: selectedUser.value?.name,
+        username: selectedUser.value?.username,
         account:selectedUser.value?.account 
     }
 
@@ -313,9 +307,43 @@ 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()
+    if(res?.code == 200){
+        provinceTablist.value = res.data.map(item=>{
+            return {
+                label:item.name,
+                key:item.id,
+            }
+        })
+        defaultProvince.value = provinceTablist.value[0]?.key
+
+        // 获取默认省份的配置数据 ——待完善
     }
 }
 
+
 const DisabledDeleteGroupRowScene = (row,currentIndex,tableData)=>{
     if(row.delStatus === 0){
         return false
@@ -324,9 +352,17 @@ const DisabledDeleteGroupRowScene = (row,currentIndex,tableData)=>{
     }
 }
 
+
+// 接口报错 —— 待完善
+const GetGroupData = async ()=>{
+    let res = await getGroupDataApi()
+}
+
 onMounted(async ()=>{
     await GetAllUserList()
     await GetGroupList()
+    // await GetGroupData()
+    await GetProvinceConfigList()
 })
 
 
@@ -362,7 +398,12 @@ onMounted(async ()=>{
             line-height: 1.5;
         }
         .content_right{
+            align-self: flex-start;
             align-items: center;
+            word-break: keep-all;
+            .button_border{
+                font-weight: 600;
+            }
         }
         .config_switch_desc{
             font-size: 14px;

src/views/userPrivilegeManagement/groupManage/tabSearch.ts

@@ -2,24 +2,8 @@ import { ref } from "vue";
 
 
 export const  provinceTablist = ref([
-    {
-        label:'北京市',
-        key:'beijing',
-    },
-    {
-        label:'上海市',
-        key:'shanghai',
-    },
-    {
-        label:'天津市',
-        key:'tianjin',
-    },
-    {
-        label:'河北',
-        key:'hebei',
-    },
-    {
-        label:'辽宁',
-        key:'liaoning',
-    },
+    // {
+    //     label:'北京市',
+    //     key:'beijing',
+    // },
 ])

src/views/userPrivilegeManagement/groupManage/table.ts

@@ -1,7 +1,5 @@
 import { ref } from "vue";
 
-
-
 export const userTableColumns = ref([
     {
         name:'account',
@@ -25,7 +23,7 @@ export const userTableColumns = ref([
 
 
 
-export const tableColumns = ref([
+export const groupTableColumns = ref([
     {
         name: 'region',
         label: '项目组',
@@ -35,67 +33,4 @@ export const tableColumns = ref([
         minWidth: '',
         custom: false,
     },
-    {
-        name: 'project1',
-        label: '项目1组',
-        width: '120',
-        fixed: '',
-        align: 'center',
-        minWidth: '',
-        custom: true,
-    },
-    {
-        name: 'project2',
-        label: '项目2组',
-        width: '120',
-        fixed: '',
-        align: 'center',
-        minWidth: '',
-        custom: true,
-    },
-    {
-        name: 'project3',
-        label: '项目3组',
-        width: '120',
-        fixed: '',
-        align: 'center',
-        minWidth: '',
-        custom: true,
-    },
-    {
-        name: 'project4',
-        label: '项目4组',
-        width: '120',
-        fixed: '',
-        align: 'center',
-        minWidth: '',
-        custom: true,
-    },
-    {
-        name: 'project5',
-        label: '项目5组',
-        width: '120',
-        fixed: '',
-        align: 'center',
-        minWidth: '',
-        custom: true,
-    },
-    {
-        name: 'project6',
-        label: '项目6组',
-        width: '120',
-        fixed: '',
-        align: 'center',
-        minWidth: '',
-        custom: true,
-    },
-    {
-        name: 'project7',
-        label: '项目7组',
-        width: '120',
-        fixed: '',
-        align: 'center',
-        minWidth: '',
-        custom: true,
-    },
 ]);