crm_front_v3/src/views/system_manage/depart_manage/departManage.vue

<script setup>
import { ref,reactive } from 'vue'
import {useDepart} from './hooks/use-depart'
import { departInterence } from '@/api/api.js'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { Search } from '@element-plus/icons-vue'

const {
        defaultDepart,defaultGroup,departArr,tableParams,tableData,groupTeamId,
        getDepartArr,getTableUser,
        useTreeMove,useTreeEvent,useDepartTable
    } = useDepart()
const {checkAllowDrag,checkAllowDrop,handleDropOver} = useTreeMove()
const {act_node,clickNode,initDepart,openNodeDialog,removeNode} = useTreeEvent()
const {
        changeStatus,getUserDetail,
        openUserDialog,openResetPassDialog,openMoveDepartDialog
    } = useDepartTable()

const defaultProp = {label:'DepartmentName',children:'Child'}
const tableColumns = [
    { label:"姓名", key:"RealName" },{ label:"账号", key:"AdminName" },{ label:"手机号", key:"Mobile"},
    { label:"角色", key:"RoleName" },{ label:"部门/分组", key:"DepartmentGroup" },{ label:"状态", key:"Enabled"}
]
let isShowloadding = ref('')
//切换表格页码
function handleCurrentChange(page){
    tableParams.pageNo = page
    getTableUser()
}

let shareCustomDepartmentId = ref(0)
function setShareCustomDepartId(){
    // 不同环境下 共享客户组的DepartmentId不一样
    if(process.env.NODE_ENV == 'development'||process.env.NODE_ENV == 'test'){
        shareCustomDepartmentId.value = 61
    }else if(process.env.NODE_ENV == 'production'){
        shareCustomDepartmentId.value = 37
    }
}
//同步每刻
function synchronizationMEIKE(){}


//获取用户数据
getTableUser()
//获取部门结构
getDepartArr()
//设置shareCustomDepartmentId的值
setShareCustomDepartId()
</script>

<template>
    <div class="depart_container">
        <div class="left_cont">
            <div class="company_top" @click="initDepart">
                <img src="@/assets/img/set_m/home_ico.png" alt="" style="width:30px;height:30px;">
                <span :class="(!defaultGroup&&!defaultDepart)?'act':''">部门信息</span>
            </div>
            <el-tree
                ref="departTree"
                class="depart_tree"
                style="margin-top:27px;"
                :data="departArr"
                node-key="unicodeKey"
                :props="defaultProp"
                draggable 
                :allow-drag="checkAllowDrag"
                :allow-drop="checkAllowDrop"
                check-strictly
                empty-text="暂无部门"
                @node-drop="handleDropOver">
                <template #default="{node,data}">
                    <span class="custom-tree-node" @click="clickNode(node,data)">
                        <span>{{ node.label }}</span>
                        <span style="display:flex;align-items:center;" v-show="act_node===data.unicodeKey">
                            <img src="~@/assets/img/data_m/move_ico.png" alt="" class="icon-img" @click.stop>
                            <img src="~@/assets/img/set_m/add.png" alt="" class="icon-img" @click.stop="openNodeDialog('add',data,node)" v-if="data.IsDepartment">
                            <img src="~@/assets/img/set_m/add.png" alt="" class="icon-img" @click.stop="openNodeDialog('add',data,node)" v-if="data.IsGroup">
                            <img src="~@/assets/img/set_m/edit.png" alt="" class="icon-img" @click.stop="openNodeDialog('edit',data,node)">
                            <el-popconfirm
                                @onConfirm="removeNode(node,data)"
                                confirmButtonText='删除'
                                cancelButtonText='取消'
                                confirmButtonType="text"
                                icon="el-icon-info"
                                iconColor="red"
                                title="确定删除吗"
                                v-if="data.DepartmentId!=shareCustomDepartmentId"
                            >
                            <!-- 共享客户组不允许删除 -->
                                <template #reference>
                                    <img src="~@/assets/img/set_m/del.png" alt="" style="width:12px;height:12px;margin-top:4px">
                                </template>
                            </el-popconfirm>
                        </span>
                    </span>
                </template>
            </el-tree>
            <div class="noDepart" @click="openNodeDialog('add',{},{level:0})">
                <img src="~@/assets/img/set_m/add_ico.png" alt="" style="width:16px;height:16px;margin-right:10px;">
                <span>新建部门</span>
            </div>
        </div>
        <div class="right_cont">
            <div class="right_cont_top">
                <div>
                    <el-button type="primary" @click="openUserDialog('add',{})">添加用户</el-button>
                    <el-button type="primary" @click="synchronizationMEIKE" style="margin-left: 26px;">同步每刻</el-button>
                </div>
                <el-input
                    placeholder="姓名/账号/手机号搜索"
                    v-model="tableParams.searchTxt"
                    :prefix-icon="Search"
                    clearable
                    @input="initDepart"
                    style="max-width:359px">
                </el-input>
            </div>
            <div class="right_cont_bot">
                <el-table 
                    :data="tableData"
                    @row-click="getUserDetail"
                    v-loading="isShowloadding"
                    element-loading-text="数据加载中..."
                    highlight-current-row border
                >
                    <el-table-column v-for="column in tableColumns" :key="column.key"
                        :prop="column.key"
                        :label="column.label"
                        align="center"
                    >
                        <template #default="{row}">
                            <span v-if="column.key==='Enabled'"
                                :style="{color:row.Enabled===0?'#FF0000':null}"
                            >{{row.Enabled===0?'禁用':'启用'}}</span>
                            <span v-else-if="column.key==='RealName'">
                                <el-tag
                                    v-if="row.LabelVal" 
                                    :style="row.LabelVal==1||row.LabelVal==2?'color:#fff;background:#409EFF':'color:#409EFF;background:#ECF5FF'" 
                                    style="position:absolute;left:10px"
                                >{{
                                    row.LabelVal==1?'超管'
                                    :row.LabelVal==2?'管理员'
                                    :row.LabelVal==3?'部门经理'
                                    :row.LabelVal==4?'组长':'主管'
                                }}</el-tag>
                                <span style="position: relative;">{{row.RealName}}</span>
                            </span>
                            <span v-else>{{row[column.key]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="260">
                        <template #default="{row}">
                            <div style="color:#4099ef; font-size:24px;display: flex;gap:0 10px;">
                                <span class="editsty" @click.stop="openUserDialog('edit',row)">编辑</span>
                                <span class="editsty" @click.stop="openResetPassDialog(row)">重置密码</span>
                                <span class="editsty" @click.stop="openMoveDepartDialog(row)">移动分组</span>
                                <span 
                                    class="editsty" 
                                    @click.stop="changeStatus(row)"
                                >{{row.Enabled===0?'启用':'禁用'}}</span>
                                <!-- <span class="deletesty" @click.stop="delUser(row)">删除</span> -->
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-config-provider :locale="zhCn">
                    <el-pagination background layout="total,prev,pager,next,jumper" :current-page="tableParams.pageNo"
                        :page-size="tableParams.pageSize" :total="tableParams.total"
                        @current-change="handleCurrentChange" style="margin-top: 60px; justify-content: flex-end;">
                    </el-pagination>
                </el-config-provider>
                <!-- 用户详情右侧弹窗 -->
                
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
    .depart_container {
        * {
            box-sizing: border-box;
        }

        .el-popper {
            padding: 20px !important;
        }

        .fade {
            transition: all 0.5s;
        }

        display: flex;
        background: #f5f7f9;

        // reset
        .el-form-item__label {
            font-size: 16px;
            padding-right: 20px !important;
        }

        .el-tag {
            font-size: 12px !important;
        }

        .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
            content: '';
        }

        .el-tag {
            margin-right: 10px;
        }

        .el-cascader .el-input {
            width: 100%;
        }

        .left_cont {
            width: 16%;
            min-width: 200px;
            margin-right: 20px;
            height: calc(100vh - 120px);
            overflow-y: auto;
            border-radius: 4px;
            background: #fff;
            padding: 20px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);

            .company_top {
                display: flex;
                align-items: flex-end;
                font-size: 16px;
                color: #333;
                cursor: pointer;

                span {
                    width: 100%;
                    padding: 4px 10px 0;

                    &:hover {
                        background: #F5F7FA;
                    }
                }

                .act {
                    background: #F0F4FF;
                }
            }

            :deep(.depart_tree) {
                font-size: 15px;
                color: #333;

                .custom-tree-node {
                    display: flex !important;
                    justify-content: space-between;
                    align-items: center;
                    display: block;
                    flex: 1;
                    .icon-img{
                        width:12px;
                        height:12px;
                        margin-right:10px;
                    }
                }

                .el-tree-node__content {
                    margin-bottom: 15px !important;
                }

                .el-tree-node__children {
                    .el-tree-node {
                        margin-bottom: 8px !important;
                        padding-left: 18px;
                    }

                    .el-tree-node__content {
                        margin-bottom: 5px !important;
                        padding-left: 0 !important;
                    }
                }

                .el-icon.el-tree-node__expand-icon{
                    svg{
                        display: none;
                    }
                    &::before{
                        content: url("@/assets/img/set_m/slide.png") !important;
                    }
                    &.expanded::before{
                        content: url("@/assets/img/set_m/down.png") !important;
                    }
                }

                .el-tree-node__expand-icon.expanded {
                    -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
                }

                .el-tree-node.is-current>.el-tree-node__content {
                    background-color: #F0F4FF !important;
                }

                .el-tree-node__content {
                    padding-right: 10px !important;
                }
            }

            .noDepart {
                margin-top: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #409EFF;
                font-size: 16px;
                cursor: pointer;
            }
        }

        .right_cont {
            width: 82%;
            background: #F5F7F9;
            height: calc(100vh - 120px);
            // box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            display: flex;
            flex-direction: column;

            .right_cont_top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border: 1px solid #ECECEC;
                padding: 20px 30px;
                background: #fff;
                border-radius: 4px;
                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
            }

            .right_cont_bot {
                flex: 1;
                overflow-y: auto;
                padding: 20px 30px;
                background: #fff;
                margin-top: 20px;
                position: relative;
                border: 1px solid #ECECEC;
                border-radius: 4px;
                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);

                .right_shadow {
                    width: 350px;
                    background: #fff;
                    position: absolute;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    overflow-y: hidden;
                    z-index: 2;
                    box-shadow: -3px 0 6px rgba(0, 0, 0, 0.1);
                    border: 1px solid #ececec;
                    padding: 60px 30px;

                    .shadow_top {
                        display: flex;
                        align-items: center;
                    }

                    .shadow_info {
                        margin-top: 30px;
                        margin-bottom: 40px;
                        font-size: 16px;
                        color: #333;
                        height: calc(100% - 120px);
                        overflow-y: auto;

                        .info_item {
                            margin-bottom: 20px;

                            .item_tit {
                                margin-bottom: 10px;
                            }
                        }
                    }

                    .close_btn {
                        width: 16px;
                        height: 16px;
                        position: absolute;
                        right: 20px;
                        top: 20px;
                    }
                }
            }
        }
    }
</style>