src/baseComponents/Table.vue

@@ -63,7 +63,7 @@ interface ColumnProperty  {
   fixed?:String,
   align?:String,
   minWidth?:String,
-  custom:String,
+  custom:Boolean,
   customHeader?:Boolean,
   hidden:Boolean,
 }

src/baseComponents/formTableEdit/index.vue

@@ -18,7 +18,6 @@
                     :tableData="tableData"
                     :hidePagination="true">
                     <template #moveable="{row,currentIndex}">
-                        <slot></slot>
                         <TableRowDragUpDown  
                             :startIndex="startDragIndex()"
                             :endIndex="endDragIndex(tableData)"
@@ -30,8 +29,10 @@
                     <template #num="{row,currentIndex}">
                         {{ currentIndex }}
                     </template>
-                    <template v-slot:[middleColumnItm?.name]="{row}">
-                        <slot :name="[middleColumnItm?.name]" :row="row">
+                    <template v-slot:[middleColumnItm?.name]="{row,currentIndex}">
+                        <slot :name="[middleColumnItm?.name]" :row="row" :currentIndex="currentIndex">
+                            <el-input v-model="row[middleColumnItm.name]" v-if="row.tmpId" placeholder="请输入内容" />
+                            <span v-else>{{ row?.[middleColumnItm?.name] }}</span>
                         </slot>
                     </template>
 
@@ -61,7 +62,7 @@
                 </Table>
                 <div class="add_option" @click="HandleAddConfig"> 
                     <el-icon><CloseBold /></el-icon>
-                    <span>增加选项配置</span>
+                    <span>{{ addOperationName }}</span>
                 </div>
             </div>
         </template>
@@ -108,6 +109,7 @@ const props = defineProps({
     },
     width:{  //弹窗宽度
         type:String,
+        default:'680px'
     },
     formTitle:{  //弹窗标题
         type:String,
@@ -125,9 +127,17 @@ const props = defineProps({
     disabledEditRowScene:{  // 禁止编辑行 的条件 ：true 禁止   false 允许
         type:Function
     },
+    addOperationName:{
+        type:String,
+        default:'增加'
+    }
 })
 
-const emit = defineEmits(['editConfirm','addConfirm','deleteConfirm','entiretyConfirm'])
+const emit = defineEmits([
+    'editConfirm',  // 执行到最后要添加 row.editFlag = ''
+    'addConfirm',  // 执行到最后要添加 row.tmpId = ''
+    'deleteConfirm',
+    'entiretyConfirm'])
 
 /**
  * 1. 参数配置： 表单弹窗信息

src/components/settingCard/SettingCard.vue

@@ -113,7 +113,6 @@ const disabledDeleteRowScene = (row,currentIndex,newTableData)=>{
 const HandleEditConfirm = (row,params)=>{
     console.log('')
     // row?.[props?.middleColumnItm?.name] =  editRes?.data?.[props?.middleColumnItm?.name]
-    row.tmpId = ''
     row.editFlag = ''
 }
 // 表格行 新增确认
@@ -123,7 +122,6 @@ const HandleAddConfirm = (row,params)=>{
     // row.id = res?.data?.id
     // row?.[props?.middleColumnItm?.name] =  editRes?.data?.[props?.middleColumnItm?.name]
     row.tmpId = ''
-    row.editFlag = ''
 }
 // 表格行 删除确认
 const HandleDeleteConfirm = (row)=>{

src/views/userPrivilegeManagement/groupList/formSearchGroup.ts

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

@@ -0,0 +1,73 @@
+<template>
+    <div class="end_item">
+        <div class="page_search">
+            <div class="search_content">
+                <div class="content_left">
+                    <FormSearchGroup :searchList="searchList" />
+                </div>
+            </div>
+        </div>
+        <div class="page_jg_20"></div>
+        <Table :pageSize="pageSize" :currentPage="currentPage"  :totalNum="totalNum" 
+            :tableColumns="tableColumns" :tableData="tableData">
+            <template #num="{row,currentIndex}">
+                {{ (currentPage - 1) * pageSize + currentIndex  }}
+            </template>
+            <template #operation="{row}">
+                <div class="table_row_option">
+                    <span class="el_button_delete">删除</span>
+                </div>
+            </template>
+        </Table>
+    </div>
+
+</template>
+
+
+<script setup lang="ts">
+import { 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([
+    {
+        index: 1,
+        account: '123456789',
+        name: '陈越',
+        province: '辽宁',
+        region: '沈阳',
+        groupName: '项目1组',
+        operation: '删除' // 对应操作列，通常存储按钮文本或状态标识
+    },
+    {
+        index: 2,
+        account: '123456789',
+        name: '张静怡',
+        province: '辽宁',
+        region: '沈阳',
+        groupName: '项目1组',
+        operation: '删除'
+    },
+    {
+        index: 3,
+        account: '123456789',
+        name: '朱函睿',
+        province: '辽宁',
+        region: '沈阳',
+        groupName: '项目1组',
+        operation: '删除'
+    }
+])
+</script>
+
+
+<style lang="scss" scoped>
+
+</style>

src/views/userPrivilegeManagement/groupList/table.ts

@@ -0,0 +1,68 @@
+import { ref } from "vue";
+
+export const tableColumns = ref([
+    {
+        name: 'num',
+        label: '序号',
+        width: '80',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: true, 
+    },
+    {
+        name: 'account',
+        label: '账号',
+        width: '120',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'name',
+        label: '姓名',
+        width: '120',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'province',
+        label: '省份',
+        width: '100',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'region',
+        label: '地区',
+        width: '100',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'groupName',
+        label: '分组名称',
+        width: '120',
+        fixed: '',
+        align: 'center',
+        minWidth: '',
+        custom: false,
+      
+    },
+    {
+        name: 'operation',
+        label: '操作',
+        width: '100',
+        fixed: 'right', // 操作列通常固定在右侧
+        align: 'center',
+        minWidth: '',
+        custom: true, // 操作列通常需要自定义插槽来渲染按钮
+    }
+]);

src/views/userPrivilegeManagement/groupManage/index.vue

@@ -21,17 +21,16 @@
                     </div>
                     <div class="content_right">
                         <span v-if="isConfigMode" class="config_switch_desc">
-                            {{ selectedUser?.id ? `当前选中的用户：${selectedUser.name}` : '暂无选中的用户' }}
+                            {{ selectedUser?.id ? `当前选中的员工：${selectedUser.name}` : '暂无选中的员工' }}
                             </span>
-                        <el-switch v-model="isConfigMode" 
-                            style="--el-switch-on-color: #2E64FA"
-                            active-text="选中用户配置任课关系" />
-                        <el-button class="button_border">分组管理</el-button>
+                        <el-switch v-model="isConfigMode"  style="--el-switch-on-color: #2E64FA" />
+                        <span class="config_switch_desc" :style="{color:isConfigMode ? '#2E64FA' : '#999999'}">选中员工配置关系</span>
+                        <el-button class="button_border" @click="HandleOpenGroup">分组管理</el-button>
                     </div>
                 </div>
             </div>
             <div class="page_jg_20" />
-            <Table :tableColumns="tableColumns" :tableData="groupTableData">
+            <Table :tableColumns="tableColumns" :tableData="groupPeopleTableData">
                  <template v-for="column in tableColumns.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]">
@@ -50,7 +49,7 @@
                             </el-tooltip>
                         </template>
                         <template v-else>
-                            <span v-if="isConfigMode" class="placeholder_text" >请选择用户</span>
+                            <span v-if="isConfigMode" class="placeholder_text" >请选择员工</span>
                             <span v-else>-</span>
                         </template>
                   </div>
@@ -58,6 +57,29 @@
             </Table>
         </div>
     </div>
+
+    <FormTableEdit 
+        addOperationName="增加分组" 
+        :startDragIndex="startDragIndex" 
+        :endDragIndex="endDragIndex" 
+        formTitle="分组管理" 
+        :middleColumnItm="{name:'groupName',label:'分组名称'}"
+        :disabledDeleteRowScene="()=>{return false}"
+        :disabledEditRowScene="()=>{return false}"
+        :defaultTableData="gorupTableData"
+        v-model:formVisible="formVisible"
+        v-model:deleteFlag="deleteFlag"
+        v-model:formDialogConfirmFlag="formDialogConfirmFlag"
+        @editConfirm = 'HandleEditGroup'
+        @addConfirm = 'HandleAddGroup'
+        @deleteConfirm = 'HandleDeleteGroup'
+        @entiretyConfirm = 'HandleConfirmEntiretyGroup'
+        >
+        <template #groupName="{row,currentIndex}">
+            <el-input v-model="row.groupName" v-if="row.tmpId" placeholder="请输fdff入内容" />
+            <span v-else>{{ row.groupName }}</span>
+        </template>
+    </FormTableEdit>
 </template>
 
 
@@ -67,12 +89,13 @@ import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
 import {accountFormSearhList} from './formSearch'
 import Table from '@/baseComponents/Table.vue';
 import TabSearch from '@/baseComponents/TabSearch.vue';
+import FormTableEdit from '@/baseComponents/formTableEdit/index.vue'
 
 import {tableColumns,userTableColumns} from './table'
 import {provinceTablist} from './tabSearch'
 
 
-// 用户账号信息
+// 员工账号信息
 const userAccountData = ref([
     {
         account:'xxx',
@@ -89,8 +112,8 @@ const userAccountData = ref([
 // 分组信息
 const isConfigMode = ref(false)
 const defaultProvince = ref('beijing')
-const groupTableData = ref([
-    {
+const groupPeopleTableData = ref([
+     {
         id:'1',
         region:'xxx',
         project1:{id:'1',name:'xxx'},
@@ -114,7 +137,7 @@ const groupTableData = ref([
     },
 ])
 
-const selectedUser = ref({})
+const selectedUser = ref()
 
 // 设置表行选中 样式
 const tableRowClassName = ({row,rowIndex})=>{
@@ -122,7 +145,7 @@ const tableRowClassName = ({row,rowIndex})=>{
     return 'active_row'
   }
 }
-// 行选中 选择用户
+// 行选中 选择员工
 const HandleSelectUser = (user) => {
   selectedUser.value = {
     id:user.id,
@@ -131,7 +154,7 @@ const HandleSelectUser = (user) => {
   };
 };
 
-// 添加用户
+// 添加员工
 const HandleAddUser = async (row, cell) => {
     if (!isConfigMode.value) return;
     if (!selectedUser.value) return;
@@ -163,7 +186,7 @@ const HandleAddUser = async (row, cell) => {
 };
 
 
-// 移除用户
+// 移除员工
 const HandleRemoveUser = async (row, cell, index,type) => {
     if (!isConfigMode.value) return;
     let id = null
@@ -180,6 +203,50 @@ const HandleRemoveUser = async (row, cell, index,type) => {
 
 
 
+// 分组管理相关配置
+const formVisible = ref(false)
+
+const formDialogConfirmFlag = ref('')
+const deleteFlag = ref('')
+
+const gorupTableData = ref([
+    {
+        id:'xxx',
+        groupName:'xxxx'
+    }
+])
+
+const HandleOpenGroup = ()=>{
+    formVisible.value = true
+
+}
+
+const startDragIndex = ()=>{
+    return 0
+}
+const endDragIndex = (tableData)=>{
+    return tableData.length
+}
+
+const HandleEditGroup = (row,params)=>{
+    row.editFlag = ''
+}
+const HandleAddGroup = (row,params)=>{
+    row.tmpId = ''
+}
+
+const HandleDeleteGroup = (row)=>{
+    gorupTableData.value = gorupTableData.value.filter(item=>{
+        return item.id !== row.id
+    })
+    // 删除执行内容
+    deleteFlag.value = 'success'
+}
+const HandleConfirmEntiretyGroup = ()=>{
+    setTimeout(()=>{
+        formDialogConfirmFlag.value = 'fail'
+    },1000)
+}
 </script>
 
 
@@ -227,7 +294,7 @@ const HandleRemoveUser = async (row, cell, index,type) => {
      
             text-align: center;
             flex-wrap: wrap;
-            padding: 8px;
+            padding: 8px 0;
             gap: 8px;
 
             .placeholder_text,

src/views/userPrivilegeManagement/index.vue

@@ -13,7 +13,11 @@
             <UserManage  v-if="defaultTabKey == 'userManage'"/>
             <!-- 分组管理 -->
             <GroupManage  v-if="defaultTabKey == 'groupManage'"/>
-
+            <!-- 分组列表 -->
+            <GroupList  v-if="defaultTabKey == 'groupList'" />
+            <!-- 权限管理 -->
+            <PermissionManage v-if="defaultTabKey == 'permissionManage'" />
+            
 
         </div>
     </div>
@@ -27,7 +31,8 @@ import { tabList } from './tabSearch';
 
 import UserManage from './userManage/index.vue';
 import GroupManage from './groupManage/index.vue'
-
+import GroupList from './groupList/index.vue'
+import PermissionManage from './permissionManage/index.vue'
 const defaultTabKey = ref('userManage')
 
 const HandleTabChange = (val)=>{

src/views/userPrivilegeManagement/permissionManage/formSearch.ts

@@ -0,0 +1,11 @@
+import { ref } from "vue";
+
+
+export const  accountFormSearhList = ref([
+    {
+        key:'queryStr',
+        type:'input',
+        placeholder:'请输入',
+        defaultValue:'',
+    }
+])

src/views/userPrivilegeManagement/permissionManage/index.vue

@@ -0,0 +1,274 @@
+<template>
+    <div class="end_item container">
+        <div class="container_left end_item">
+            <FormSearchGroup :searchList="accountFormSearhList" />
+            <div class="page_jg_20"/>
+            <Table 
+                :hidePagination="true"
+                class="teacher_table"
+                :tableColumns="userTableColumns" 
+                :tableData="userAccountData"
+                :tableRowClassName="tableRowClassName"
+                @rowClick="HandleSelectUser"
+            ></Table>
+        </div>
+        <div  class="container_right end_item">
+            <div class="page_search">
+                <div class="search_content">
+                    <div class="content_left">
+                        <TabSearch :tabList="roleList" 
+                            :defaultTabKey="defaultRole" tabType="line" />
+                    </div>
+                    <div class="content_right">
+                        <span v-if="isConfigMode" class="config_switch_desc">
+                            {{ selectedUser?.id ? `当前选中的员工：${selectedUser.name}` : '暂无选中的员工' }}
+                            </span>
+                        <el-switch v-model="isConfigMode"  style="--el-switch-on-color: #2E64FA" />
+                        <span class="config_switch_desc" :style="{color:isConfigMode ? '#2E64FA' : '#999999'}">选中员工配置关系</span>
+                    </div>
+                </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}"> 
+                    <div class="cell_container" @click="HandleAddUser(row, column.name)">
+
+                        <template v-if="row?.[column.name] && row?.[column.name]?.length > 0">
+                            <template v-for="(user,idx) in row?.[column.name]">
+                                <el-tooltip
+                                    effect="dark"
+                                    :content="`${user.name}`"
+                                    placement="top-start"
+                                >
+                                    <div v-if="isConfigMode" class="teacher_tag">
+                                        <span :title="user.name">{{ user.name }}</span>
+                                        <el-icon class="delete_icon" @click.stop="HandleRemoveUser(row, column.name, idx,'administrative')"><Close /></el-icon>
+                                    </div>
+                                    <div v-else class="disabled_teacher">
+                                        <span :title="user.name">{{ user.name}}</span>
+                                    </div>
+                                </el-tooltip>
+                            </template>
+                        </template>
+                        <template v-else>
+                            <span v-if="isConfigMode" class="placeholder_text" >请选择员工</span>
+                            <span v-else>-</span>
+                        </template>
+                  </div>
+                </template>
+            </Table>
+        </div>
+    </div>
+
+</template>
+
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
+import {accountFormSearhList} from './formSearch'
+import Table from '@/baseComponents/Table.vue';
+import TabSearch from '@/baseComponents/TabSearch.vue';
+
+import {tableColumns,userTableColumns} from './table'
+import {roleList} from './tabSearch'
+
+
+// 员工账号信息
+const userAccountData = ref([
+    {
+        account:'xxx',
+        name:'xx',
+        id:'1',
+    },
+    {
+        account:'xxx',
+        name:'xx2',
+        id:'2',
+    },
+])
+
+// 分组信息
+const isConfigMode = ref(false)
+const defaultRole = ref('projectLeader')
+const groupPeopleTableData = ref([
+     {
+        id:'1',
+        region:'xxx',
+        project1:[{id:'1',name:'xxx'}],
+    },
+    {
+        id:'2',
+        region:'xxx',
+        project1:[],
+    },
+])
+
+const selectedUser = ref()
+
+// 设置表行选中 样式
+const tableRowClassName = ({row,rowIndex})=>{
+  if(row.id == selectedUser.value?.id){
+    return 'active_row'
+  }
+}
+// 行选中 选择员工
+const HandleSelectUser = (user) => {
+  selectedUser.value = {
+    id:user.id,
+    name:user.name,
+    account:user.account,
+  };
+};
+
+// 添加员工
+const HandleAddUser = async (row, cell) => {
+    if (!isConfigMode.value) return;
+    if (!selectedUser.value) return;
+
+    let teacherMsg = { 
+        id: selectedUser.value?.id, 
+        name: selectedUser.value?.name,
+        account:selectedUser.value?.account 
+    }
+    if (!row[cell]) {
+        row[cell] = [];
+    }
+    console.log('row.cell',row[cell])
+    row[cell].push(teacherMsg)
+
+    // let res = await saveTeachingRelationshipApi({
+    //     ...teacherMsg,
+    //     evaluationId:route.query.id,
+    //     evaluationGradeId:searchParmams.value.gradeId,
+    //     evaluationSubjectId:cell,
+    //     evaluationClassId:row.className.evaluationClassId,
+    //     classType:searchParmams.value.classType == 'teach' ? 1 : 0  //班级类型，0-行政班，1-教学班
+    // })
+    // if(res?.code == 200){
+        // ElMessage.success(res?.msg)
+        // row[cell].push({...teacherMsg,id:res?.data});
+    // }
+};
+
+
+// 移除员工
+const HandleRemoveUser = async (row, cell, index,type) => {
+    if (!isConfigMode.value) return;
+    let id = null
+    let res = undefined
+
+    row[cell].splice(index,1)
+    
+
+    // id = row[cell][index].id
+    // res = await deleteTeachingRelationshipApi(id)
+    // if(res?.code == 200){
+    //     ElMessage.success(res?.msg)
+    //     row[cell].splice(index, 1);
+    // }
+};
+
+
+</script>
+
+
+<style lang="scss" scoped>
+
+.container{
+    width: 100%;
+    overflow: auto;
+    flex-direction: row;
+    gap:20px;
+
+    .container_left{
+        width: 200px;
+
+        :deep(.el-table__body){
+            tr.active_row td
+            {
+                background-color: rgba(46, 100, 250,0.1) !important;
+                border:none;
+                color: #2e64fa;
+            }
+        }
+
+
+    }
+
+    .container_right{
+        width: calc(100% - 220px);
+        .content_left{
+            line-height: 1.5;
+        }
+        .content_right{
+            align-items: center;
+        }
+        .config_switch_desc{
+            font-size: 14px;
+        }
+
+        .cell_container {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            text-align: center;
+            flex-wrap: wrap;
+            padding: 8px 0;
+            gap: 8px;
+
+            .placeholder_text,
+            .disabled_teacher{
+                width: 90px;
+                height: 34px;
+                font-weight: 400;
+                font-size: 14px;
+                text-align: center;
+                line-height: 34px;
+                background-color: #f3f3f3;
+                border-radius: 4px;
+                cursor: pointer;
+            }
+            .placeholder_text {
+                color: #CCCCCC;
+            }
+            .disabled_teacher {
+                color: #666666;
+            }
+
+            // 教师标签样式
+            .teacher_tag {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 0 8px;
+
+                min-width: 90px;
+                height: 34px;
+                font-weight: 400;
+                font-size: 14px;
+                color: #2E64FA;
+                text-align: center;
+                line-height: 34px;
+                background: rgba(46, 100, 250, 0.1);
+                border-radius: 4px;
+
+                // 删除图标样式 (对应原 img 标签样式)
+                .delete_icon {
+                width: 12px;
+                height: 12px;
+                cursor: pointer;
+                font-size: 12px;
+                margin-left: 10px; /* 保留原代码中 i 标签的 margin-left 习惯 */
+                }
+            }
+        }
+
+
+
+    }
+}
+
+</style>

src/views/userPrivilegeManagement/permissionManage/tabSearch.ts

@@ -0,0 +1,13 @@
+import { ref } from "vue";
+
+
+export const  roleList = ref([
+    {
+        label:'项目组长',
+        key:'projectLeader',
+    },
+    {
+        label:'管理员',
+        key:'manager',
+    },
+])

src/views/userPrivilegeManagement/permissionManage/table.ts

@@ -0,0 +1,48 @@
+import { ref } from "vue";
+
+
+
+export const userTableColumns = ref([
+    {
+        name:'account',
+        label:'账号',
+        width:'80',
+        fixed:'',
+        align:'center',
+        minWidth:'',
+        custom:false,
+    },
+    {
+        name:'name',
+        label:'姓名',
+        width:'80',
+        fixed:'',
+        align:'center',
+        minWidth:'',
+        custom:false,
+    },
+])
+
+
+// 动态变更项 ————
+export const tableColumns = ref([
+    {
+        name: 'region', // 对应“项目组”列，通常作为行头
+        label: '项目组',
+        width: '80',
+        fixed: 'left', // 建议固定首列，防止横向滚动时看不清区域
+        align: 'center',
+        minWidth: '',
+        custom: false,
+    },
+    {
+        name: 'project1',
+        label: '项目1组',
+        width: '320',
+        fixed: '',
+        align: 'left',
+        minWidth: '',
+        custom: true,
+    },
+   
+]);