clientManageSystem/src/views/userPrivilegeManagement/groupManage/index.vue

<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="provinceTablist" 
                            :defaultTabKey="defaultProvince" 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"
                            active-text="选中用户配置任课关系" />
                        <el-button class="button_border">分组管理</el-button>
                    </div>
                </div>
            </div>
            <div class="page_jg_20" />
            <Table :tableColumns="tableColumns" :tableData="groupTableData">
                 <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]">
                            <el-tooltip
                            effect="dark"
                            :content="`${row?.[column.name].name}`"
                            placement="top-start"
                            >
                            <div v-if="isConfigMode" class="teacher_tag">
                                <span :title="row?.[column.name].name">{{ row?.[column.name].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="row?.[column.name].name">{{ row?.[column.name].name}}</span>
                            </div>
                            </el-tooltip>
                        </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 {formSearhList,accountFormSearhList} from './formSearch'
import Table from '@/baseComponents/Table.vue';
import TabSearch from '@/baseComponents/TabSearch.vue';

import {tableColumns,userTableColumns} from './table'
import {provinceTablist} from './tabSearch'


// 用户账号信息
const userAccountData = ref([
    {
        account:'xxx',
        name:'xx',
        id:'1',
    },
    {
        account:'xxx',
        name:'xx2',
        id:'2',
    },
])

// 分组信息
const isConfigMode = ref(false)
const defaultProvince = ref('beijing')
const groupTableData = ref([
    {
        id:'1',
        region:'xxx',
        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:'xxx',
        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'},
    },
])

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] = [];
    
    }
    row[cell] = 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] = '';

    // 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: center;
     
            text-align: center;
            flex-wrap: wrap;
            padding: 8px;
            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>