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

<template>
    <div class="end_item container">
        <div class="container_left end_item">
            <FormSearchGroup :searchList="accountFormSearhList" @searchChange="HandleSearchChange"/>
            <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" 
                            @tabChange="HandleProvinceChange" />
                    </div>
                    <div class="content_right">
                        <span v-if="isConfigMode" class="config_switch_desc">
                            {{ 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>
                        <el-button class="button_border" @click="HandleOpenGroup">分组管理</el-button>
                    </div>
                </div>
            </div>
            <div class="page_jg_20" />
            <Table :hidePagination="true" 
                :tableColumns="filterGroupTableColumns" 
                :tableData="groupPeopleTableData">
                <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]?.length > 0">
                            <el-tooltip
                                v-for="(staff,index) in row?.[column.name]"
                                :key="staff.id"
                            effect="dark"
                            :content="`${staff.userName}`"
                            placement="top-start"
                            >
                            <div v-if="isConfigMode" class="teacher_tag">
                                <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="staff.userName">{{staff.userName}}</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>

    <!-- 分组管理弹窗 -->
    <FormTableEdit 
        style="flex-grow: 0;"
        addOperationName="增加分组" 
        :startDragIndex="()=>{return 0}" 
        :endDragIndex="(params)=>{return params.length}" 
        formTitle="分组管理" 
        :middleColumnItm="{name:'title',label:'分组名称'}"
        :disabledDeleteRowScene="DisabledDeleteGroupRowScene"
        :disabledEditRowScene="()=>{return false}"
        :defaultTableData="gorupTableData"
        v-model:formVisible="formVisible"
        v-model:deleteFlag="deleteFlag"
        v-model:formDialogConfirmFlag="formDialogConfirmFlag"
        @editConfirm = 'HandleEditGroup'
        @addConfirm = 'HandleAddGroup'
        @deleteConfirm = 'HandleDeleteGroup'
        @tableDrag="HandlTableDrag"
        @entiretyConfirm = "formDialogConfirmFlag = 'success'"
        >
        <template #title="{row,currentIndex}">
            <el-input v-model="row.title" v-if="row.tmpId" placeholder="请输fdff入内容" />
            <span v-else>{{ row.title }}</span>
        </template>
    </FormTableEdit>


     <!-- 地区 组内用户 删除弹窗 -->
    <Dialog 
        style="flex-grow: 0;"
        v-if="dialogVisible"
        :submitLoading="dialogSubmitLoading"
        :visible="dialogVisible"
        @confirm="HandleDialogConfirm"
        @close="HandleDialogClose">
        请确认是否确认删除{{ currentDeleteColumn.label }}  {{currentDeleteCell.userName}}   {{provinceTablist.find(item=>item.key == defaultProvince)?.label}}{{currentDeleteRow.city.cityName}}的权限？
    </Dialog>

</template>


<script setup lang="ts">
import { onMounted, 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 FormTableEdit from '@/baseComponents/formTableEdit/index.vue'

import Dialog from '@/baseComponents/Dialog.vue';

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

import {
    getAllUserApi,
    getGroupListApi,
    addGroupListApi,
    deleteGroupListApi,
    updateGroupListApi,
    getGroupDataApi,

    addCityGroupPeopleApi,
    deleteCityGroupPeopleApi,
    sortGroupListApi,

} from '@/api/groupManage'

import { ElMessage } from 'element-plus';
/**
 * 1. 左侧 员工相关信息及操作
 */
// 员工账号信息
const userAccountData = ref([])
// 当前选中的用户
const selectedUser = ref()

const searchParams = ref({
    queryStr:'',
})
// 设置表行选中 样式
const tableRowClassName = ({row,rowIndex})=>{
  if(row.id == selectedUser.value?.id){
    return 'active_row'
  }
}
// 行选中 选择员工
const HandleSelectUser = (user) => {
  selectedUser.value = {
    id:user.id,
    username:user.username,
    account:user.account,
  };
};

// 获取所有的用户
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. 右侧分组展示信息 及操作
 */
// 分组信息
const isConfigMode = ref(false)
const defaultProvince = ref('')
const filterGroupTableColumns = ref([...groupTableColumns.value])
const groupPeopleTableData = ref([]) //分组人员表格配置


/** 处理不同省份下的 城市 组别员工 配置 */
const allProvinceUserConfig = ref([])  //所有省份下的用户配置信息

// 获取所有省份、所有市区下的组别人员配置
const GetGroupData = async ()=>{
    let res = await getGroupDataApi()
    if(res?.code == 200){
        allProvinceUserConfig.value = res.data
        provinceTablist.value = res.data.map(item=>{
            return {
                label:item.provinceName,
                key:item.provinceId,
            }
        })
        // 赋值默认的省份
        defaultProvince.value = provinceTablist.value[0]?.key
        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,
        account:selectedUser.value?.account 
    }
    if (!row[cell]) {
        row[cell] = [];
    
    }

    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()
    }
};


/**
 * 3. 删除员工的弹窗 及操作
 */
const dialogVisible = ref(false)
const dialogSubmitLoading = ref(false)
const currentDeleteCell = ref()  //当前准备删除的（员工）单元格数据
const currentDeleteRow = ref()  //当前准备删除的（员工）所在行数据
const currentDeleteColumn = ref()  //当前准备删除的（员工）所在列信息
// 移除员工
const HandleDialogConfirm = async ()=>{
    dialogSubmitLoading.value = true
    let res = undefined
    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 = ()=>{
    currentDeleteCell.value = null
    currentDeleteRow.value = null
    currentDeleteColumn.value = null
    dialogVisible.value = false
    dialogSubmitLoading.value = false
}
const OpenDeleteDialog = (row, cellObj,index)=>{
    if (!isConfigMode.value) return;
    dialogVisible.value = true
    currentDeleteCell.value = row[cellObj.name][index]
    currentDeleteRow.value = row
    currentDeleteColumn.value = cellObj
}


/**
 * 4. 分组管理 弹窗相关配置
 */
const formVisible = ref(false)
const formDialogConfirmFlag = ref('')
const deleteFlag = ref('')
const gorupTableData = ref([])
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 = {
        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 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 HandleDeleteGroup = async (row)=>{
    let res = await deleteGroupListApi(row.id)
    if(res?.code == 200){
        ElMessage.success(res?.msg)
        // 删除执行内容
        deleteFlag.value = 'success'
        await GetGroupList()
    }
}

// 处理分组排序
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){
        ElMessage.success(res?.msg)
        await GetGroupList()
    }else{
        gorupTableData.value =  [...originData]
    }
}

// 分组行禁删的条件 ====
const DisabledDeleteGroupRowScene = (row,currentIndex,tableData)=>{
    if(row.delStatus === 0){
        return false
    }else{
        return true
    }
}


onMounted(async ()=>{
    await GetAllUserList()
    await GetGroupList()
    await GetGroupData()
})


</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{
            height: auto;
            align-self: flex-start;
            align-items: center;
            word-break: keep-all;
            flex-wrap: wrap;
            .button_border{
                font-weight: 600;
            }
        }
        .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 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>