AIPlatform/src/js/userManager.js

const $ = require('jquery');
require("../css/itemManager.less");
require('./../resource/jquery-ui/jquery-ui.min.js');
require('./modal.js');
const {api} = require('./api.js')
const {post,emptyBox,initScroll} = require('./utils.js')
const switchIconOpen = require("./../images/btn_open.png")
const switchIconClose = require("./../images/btn_close.png")
const iconDown= require("./../images/arrow_down.png")
const iconUp = require("./../images/arrow_up.png")
const arrowLeft= require("./../images/arrow_left.png")
const arrowRight = require("./../images/arrow_right.png")

let casesId="", name="", isReject ="", isUsed ="",casesIdTemp="", nameTemp="", isRejectTemp ="", isUsedTemp =""
$(".selectModuleType").append(`<img class="arrow" src=${iconDown} alt="下拉">`)
$(".selectReject").append(`<img class="arrow" src=${iconDown} alt="下拉">`)
$(".selectUsed").append(`<img class="arrow" src=${iconDown} alt="下拉">`)
$(".abnormalClear").click(function(){
    window.location.reload()
})
//获取表格数据
function getTabData(activePage){
    let params = {
        "current": activePage,
        "deptId": casesId||"",
        "linkman": name||"",
        "roleId": isReject||"",
        "size": 15
    }
    post(api.userPage,params).then(res =>{
        if(res.data.code == '0'){
            const data = res.data.data.records
            const totalPage = res.data.data.pages
            const totalNum = res.data.data.total
            renderTab(data,activePage)
            if(totalPage > 1){
                renderPagination(totalPage,Number(activePage),totalNum)
            } else{
                $('.pagination').html("")
            }

        }else{}
    }).catch((e) =>{
    
    })
}
$(".moduleItemInp").on("input", function(e){
    const val = $(this).val().trim()
    nameTemp = val
})
$(".filter").on("click", function(e){
    casesId=casesIdTemp, name=nameTemp, isReject =isRejectTemp, isUsed =isUsedTemp
    getTabData(1)
})
$('.selectModuleType').on("click", function(e){
    e.stopPropagation()
    $(".rejectList ").css("display","none")
    $(".usedList ").css("display", "none")
    $(".selectReject .arrow").attr("src",iconDown)
    $(".selectUsed .arrow").attr("src",iconDown)
    const showList =  $(".moduleTypeList ").css("display")
    if(showList == "none" ||!showList){
        $(".moduleTypeList ").css("display","block")
        $(".selectModuleType .arrow").attr("src",iconUp)
    }else{
        $(".moduleTypeList ").css("display", "none")
        $(".selectModuleType .arrow").attr("src",iconDown)
    }
})
    
$('.selectReject').on("click", function(e){
    e.stopPropagation()
    $(".moduleTypeList ").css("display", "none")
    $(".usedList ").css("display", "none")
    $(".selectModuleType .arrow").attr("src",iconDown)
    $(".selectUsed .arrow").attr("src",iconDown)
    const showList =  $(".rejectList ").css("display")
    if(showList == "none" ||!showList){
        $(".rejectList ").css("display","block")
        $(".selectUsed .arrow").attr("src",iconUp)
    }else{
        $(".rejectList ").css("display", "none")
        $(".selectUsed .arrow").attr("src",iconDown)
    }
})
$('.selectUsed').on("click", function(e){
    e.stopPropagation()
    $(".moduleTypeList ").css("display", "none")
    $(".rejectList ").css("display","none")
    $(".selectModuleType .arrow").attr("src",iconDown)
    $(".selectReject .arrow").attr("src",iconDown)
    const showList =  $(".usedList ").css("display")
    if(showList == "none" ||!showList){
        $(".usedList ").css("display","block")
        $(".selectUsed .arrow").attr("src",iconUp)
    }else{
        $(".usedList ").css("display", "none")
        $(".selectUsed .arrow").attr("src",iconDown)
    }
})
bindUsedSelect()
getTabData(1)
getmoduleTypeList()
function renderTab(data,activePage){
    let str = ``
    for(let i = 0; i < data.length; i++){
        const item = data[i]
        str += `
            <tr data-id=${item.id} data-index=${i}>
                <td  class="textCenter">${(activePage-1)*10 + i+1}</td>
                <td class="textCenter">${item.linkman}</td>
                <td class="textCenter">${item.deptName||''}</td>
                <td class="textCenter">${item.roleName||''}</td>
                <td  class="textCenter">
                    <div class="itemMsgInfoBox">
                        <p class="itemInfoRight itemReject">
                            <img data-id="${item.userId}" data-status="${item.status}" class="switchImg roleSelect" src=${item.status==1?switchIconOpen:switchIconClose} /><span class="imgInfo"> ${item.status==1?"启用":"禁用"}</span>
                        </p>
                    </div>
                </td>
                <td class="textCenter clearfix"><span data-title="科室" data-id="${item.userId}" class="editItem deptEdit fl">科室编辑</span><span data-id="${item.userId}" data-title="角色" class="editItem roleEdit fr">角色编辑</span></td>
            </tr>
        `
    }
    $('.tbody').html(str?str:emptyBox())
    bindEdit(data,activePage)
    // initScroll("usrContain","Y",1)
}

//获取用户科室列表
function getDeptList(id,activePage,title){
    post(api.getUserDepts,{userId:id}).then(res =>{
        let data = res.data;
        if(data.code == '0'){
            let result = data.data
            // console.log(result,'科室列表')
            editItem(result,activePage,title)
        }else{}
    }).catch((e) =>{
    
    })
}
//获取用户角色列表
function getUserList(id,activePage,title){
    post(api.getUserRoles,{userId:id}).then(res =>{
        let data = res.data;
        if(data.code == '0'){
            const result = data.data
            // console.log(result,'角色列表')
            editItemRole(result,activePage,title)
        }else{}
    }).catch((e) =>{
    
    })
}
function bindEdit(data,activePage){
    $('.editItem').click(function(e){
        const index = $(this).parents("tr").attr('data-index') 
        const id = $(this).attr('data-id') 
        const title = $(this).attr('data-title') 
        if(title == "科室"){
            getDeptList(id,activePage,title)
        }else if(title == "角色"){
            getUserList(id,activePage,title)
        }
    })
    $(".roleSelect").click(function(){
        const id = $(this).attr('data-id')
        const status = $(this).attr('data-status')
        let that = $(this);
        if(status == 1){
            toggleOnOff(api.disable,id,that,status)
        }else{
            toggleOnOff(api.enable,id,that,status)
        }
    })
}
//启用禁用
function toggleOnOff(url,id,that,status){
    //$.alerModal({type:"loading"});
    post(url,{userId:id}).then(res =>{
        if(res.data.code == '0'){
            // const data = res.data.data
            that.attr({
                "src":status==1?switchIconClose:switchIconOpen,
                "data-status":status==1?0:1
            })
            that.siblings().html(status==1?' 禁用':' 启用')
            $.alerModal({"message":"修改成功",type:"tip",time:'1000',isFather: true,win: true, fatherWrapper: $("#mainBox", parent.document)});
        }else{
            $.alerModal({"message":'修改失败,请重试~',type:"tip",time:'1000',isFather: true,win: 'default', fatherWrapper: $("#mainBox", parent.document)});
            console.log(res)
        }
        $(".loading").remove()
    }).catch((e) =>{
            $.alerModal({"message":'修改失败,请重试~',type:"tip",time:'1000',isFather: true,win: 'default', fatherWrapper: $("#mainBox", parent.document)});
            $(".loading").remove()
    })
}

// YH-QXGL-YHGL
$(".menu .page", parent.document).removeClass("active")
$(parent.document).find(".menu .page[code=YH-QXGL-YHGL]").addClass("active")

let leftDeptLis = [],
    rightDeptLis = [],
    selectDeptLeft = [],
    selectDeptRight = [],
    leftRoleLis = [],
    rightRoleLis = [],
    selectRoleLeft = [],
    selectRoleRight = [];
function upDataLis(leftDeptLis,rightDeptLis){
    let allLeft = '',allRight = '';
    for(let i = 0;i < leftDeptLis.length;i++){//未选中
        allLeft+=`
            <li class="eclips" data-flg="0" data-id="${leftDeptLis[i].deptId}"><img class="select" src="${require('../images/icon_unchecked.png')}"/>${leftDeptLis[i].deptName}</li>
        `
    }
    for(let j = 0;j < rightDeptLis.length;j++){//已选
        allRight+=`
            <li class="eclips" data-flg="0" data-id="${rightDeptLis[j].deptId}"><img class="select" src="${require('../images/icon_unchecked.png')}"/>${rightDeptLis[j].deptName}</li>
        `
    }
    $("#partLeftNo", parent.document).html(allLeft)
    $("#partRightSelect", parent.document).html(allRight)
    $(".partLeft li", parent.document).click(function(){
        let dataFlg = $(this).attr("data-flg")
        let deptId = $(this).attr("data-id")
        $(this).attr({
            "data-flg":dataFlg == 0?1:0
        }).children("img").attr({
            src:dataFlg == 0?require('../images/icon_check.png'):require('../images/icon_unchecked.png'),
        })
        if(dataFlg == 0){
            selectDeptLeft.push(deptId)
        }else{
            selectDeptLeft.splice($.inArray(deptId,selectDeptLeft),1)
        }
    })
    $(".partRight li", parent.document).click(function(){
        let dataFlg = $(this).attr("data-flg")
        let deptId = $(this).attr("data-id")
        $(this).attr({
            "data-flg":dataFlg == 0?1:0
        }).children("img").attr({
            src:dataFlg == 0?require('../images/icon_check.png'):require('../images/icon_unchecked.png')
        })
        if(dataFlg == 0){
            selectDeptRight.push(deptId)
        }else{
            selectDeptRight.splice($.inArray(deptId,selectDeptRight),1)
        }
    })
}
function upDataLisRole(leftDeptLis,rightDeptLis){
    let allLeft = '',allRight = '';
    for(let i = 0;i < leftDeptLis.length;i++){//未选中
        allLeft+=`
            <li class="eclips" data-flg="0" data-id="${leftDeptLis[i].id}"><img class="select" src="${require('../images/icon_unchecked.png')}"/>${leftDeptLis[i].name}</li>
        `
    }
    for(let j = 0;j < rightDeptLis.length;j++){//已选
        allRight+=`
            <li class="eclips" data-flg="0" data-id="${rightDeptLis[j].id}"><img class="select" src="${require('../images/icon_unchecked.png')}"/>${rightDeptLis[j].name}</li>
        `
    }
    $("#partLeftNo", parent.document).html(allLeft)
    $("#partRightSelect", parent.document).html(allRight)
    $(".partLeft li", parent.document).click(function(){
        let dataFlg = $(this).attr("data-flg")
        let deptId = $(this).attr("data-id")
        $(this).attr({
            "data-flg":dataFlg == 0?1:0
        }).children("img").attr({
            src:dataFlg == 0?require('../images/icon_check.png'):require('../images/icon_unchecked.png'),
        })
        if(dataFlg == 0){
            selectRoleLeft.push(deptId)
        }else{
            selectRoleLeft.splice($.inArray(deptId,selectRoleLeft),1)
        }
    })
    $(".partRight li", parent.document).click(function(){
        let dataFlg = $(this).attr("data-flg")
        let deptId = $(this).attr("data-id")
        $(this).attr({
            "data-flg":dataFlg == 0?1:0
        }).children("img").attr({
            src:dataFlg == 0?require('../images/icon_check.png'):require('../images/icon_unchecked.png')
        })
        if(dataFlg == 0){
            selectRoleRight.push(deptId)
        }else{
            selectRoleRight.splice($.inArray(deptId,selectRoleRight),1)
        }
    })
}
//修改科室
function editItem(result,activePage,title){
    $('.pop-box').remove()
    $('.container').append('<div class="pop-box"></div>')
    let userId = result.userId;
    leftDeptLis = result.notSelDepts||[],rightDeptLis = result.selDepts||[];
    const str = `
        <div class="itemMsgBox">
            <div class="mask"></div>
            <div class="itemMsgContent" style="height:552px;width:680px;margin: -276px 0 0 -340px;">
                <p class="itemMsgTitle">${title}编辑 <img class="iconClose" src=${require('./../images/icon_close_default.png')} alt="关闭" /></p>
                <div class="itemContentBoxLisL itemContentBoxLis">
                    <p class="title">所有${title}</p>
                    <ul class="partLeft partPub" id="partLeftNo">
                    
                    </ul>
                </div>
                <div class="activeGo">
                    <p class="activeGoRight"><img src="${require('../images/goRight.png')}" /></p>
                    <p class="btm activeGoLeft"><img src="${require('../images/goLeft.png')}" /></p>
                </div>
                <div class="itemContentBoxLisR itemContentBoxLis">
                    <p class="title">已选${title}</p>
                    <ul class="partRight partPub" id="partRightSelect">
                    
                    </ul>
                </div>
                <div class="clearfix"></div>
                <div class="confirmEditBox"><span class="confirmEdit">保存</span></div>
            </div>
        </div>
    `
    $("#mainBox", parent.document).append(str)
    
    upDataLis(leftDeptLis,rightDeptLis)
    $("#mainBox .itemMsgBox .iconClose", parent.document).on("click", function(e){
        $("#mainBox .itemMsgBox", parent.document).remove()
    })
    $("#mainBox .itemMsgBox .activeGoRight", parent.document).on("click", function(e){//数据往右
        let selectDeptLeftTmp = selectDeptLeft
        if(selectDeptLeftTmp.length == 0){
            $.alerModal({type:"tip",message:"请先选择内容",isFather: true, fatherWrapper: $("#mainBox", parent.document)});
            return
        }
        for(let j = 0;j < selectDeptLeftTmp.length;j++){
            for(let i = 0;i < leftDeptLis.length;i++){
                if(leftDeptLis[i].deptId == selectDeptLeftTmp[j]){
                    rightDeptLis.push(leftDeptLis[i])
                    leftDeptLis.splice(i,1)
                }
            }
        }
        upDataLis(leftDeptLis,rightDeptLis)
        selectDeptLeft=[]
    })
    $("#mainBox .itemMsgBox .activeGoLeft", parent.document).on("click", function(e){//数据往左
        let selectDeptRightTmp = selectDeptRight
        if(selectDeptRightTmp.length == 0){
            $.alerModal({type:"tip",message:"请先选择内容",isFather: true, fatherWrapper: $("#mainBox", parent.document)});
            return
        }
        for(let j = 0;j < selectDeptRightTmp.length;j++){
            for(let i = 0;i < rightDeptLis.length;i++){
                if(rightDeptLis[i].deptId == selectDeptRightTmp[j]){
                    leftDeptLis.push(rightDeptLis[i])
                    rightDeptLis.splice(i,1)
                }
            }
        }
        upDataLis(leftDeptLis,rightDeptLis)
        selectDeptRight=[]
    })
    $("#mainBox .itemMsgBox .confirmEdit", parent.document).on("click", function(){
        saveEdit(userId,activePage)
    })
}
//修改角色
function editItemRole(result,activePage,title){
    $('.pop-box').remove()
    $('.container').append('<div class="pop-box"></div>')
    let userId = result.userId;
    leftRoleLis = result.notSelRoles||[],rightRoleLis = result.selRoles||[];
    const str = `
        <div class="itemMsgBox">
            <div class="mask"></div>
            <div class="itemMsgContent" style="height:552px;width:680px;margin: -276px 0 0 -340px;">
                <p class="itemMsgTitle">${title}编辑 <img class="iconClose" src=${require('./../images/icon_close_default.png')} alt="关闭" /></p>
                <div class="itemContentBoxLisL itemContentBoxLis">
                    <p class="title">所有${title}</p>
                    <ul class="partLeft partPub" id="partLeftNo">
                    
                    </ul>
                </div>
                <div class="activeGo">
                    <p class="activeGoRight"><img src="${require('../images/goRight.png')}" /></p>
                    <p class="btm activeGoLeft"><img src="${require('../images/goLeft.png')}" /></p>
                </div>
                <div class="itemContentBoxLisR itemContentBoxLis">
                    <p class="title">已选${title}</p>
                    <ul class="partRight partPub" id="partRightSelect">
                    
                    </ul>
                </div>
                <div class="clearfix"></div>
                <div class="confirmEditBox"><span class="confirmEdit">保存</span></div>
            </div>
        </div>
    `
    $("#mainBox", parent.document).append(str)
    
    upDataLisRole(leftRoleLis,rightRoleLis)
    $("#mainBox .itemMsgBox .iconClose", parent.document).on("click", function(e){
        $("#mainBox .itemMsgBox", parent.document).remove()
    })
    $("#mainBox .itemMsgBox .activeGoRight", parent.document).on("click", function(e){//数据往右
        let selectDeptLeftTmp = selectRoleLeft
        if(selectDeptLeftTmp.length == 0){
            $.alerModal({type:"tip",message:"请先选择内容",isFather: true, fatherWrapper: $("#mainBox", parent.document)});
            return
        }
        let leftDeptLis = leftRoleLis
        for(let j = 0;j < selectDeptLeftTmp.length;j++){
            for(let i = 0;i < leftDeptLis.length;i++){
                if(leftDeptLis[i].id == selectDeptLeftTmp[j]){
                    rightRoleLis.push(leftDeptLis[i])
                    leftRoleLis.splice(i,1)
                }
            }
        }
        
        // console.log(leftRoleLis,rightRoleLis)
        upDataLisRole(leftRoleLis,rightRoleLis)
        selectRoleLeft=[]
    })
    $("#mainBox .itemMsgBox .activeGoLeft", parent.document).on("click", function(e){//数据往左
        let selectDeptRightTmp = selectRoleRight
        if(selectDeptRightTmp.length == 0){
            $.alerModal({type:"tip",message:"请先选择内容",isFather: true, fatherWrapper: $("#mainBox", parent.document)});
            return
        }
        let rightDeptLis = rightRoleLis
        for(let j = 0;j < selectDeptRightTmp.length;j++){
            for(let i = 0;i < rightDeptLis.length;i++){
                if(rightDeptLis[i].id == selectDeptRightTmp[j]){
                    leftRoleLis.push(rightDeptLis[i])
                    rightRoleLis.splice(i,1)
                }
            }
        }
        upDataLisRole(leftRoleLis,rightRoleLis)
        selectRoleRight=[]
    })
    $("#mainBox .itemMsgBox .confirmEdit", parent.document).on("click", function(){
        saveEditRole(userId,activePage)
    })
}

//保存科室修改
function saveEdit(id,activePage){
    let ids = []
    if(rightDeptLis.length==0){
        $.alerModal({"message":"请选择科室",type:"tip",time:'1000',isFather: true, fatherWrapper: $("#mainBox", parent.document)});
        return
    }
    for(let i = 0;i < rightDeptLis.length;i++){
        ids.push(rightDeptLis[i].deptId)
    }
    const param = {
        "deptIds": ids,
        "userId": id
      }
    post(api.editUserDepts,param).then(res =>{
        if(res.data.code == '0'){
            // const data = res.data.data
            getTabData(activePage)
            $.alerModal({"message":"修改成功",type:"tip",time:'1000',isFather: true,win: true, fatherWrapper: $("#mainBox", parent.document)});
            $('#mainBox .itemMsgBox', parent.document).remove()
        }else{
            $.alerModal({"message":'修改失败,请重试~',type:"tip",time:'1000',isFather: true,win: 'default', fatherWrapper: $("#mainBox", parent.document)});

        }
    }).catch((e) =>{
        $.alerModal({"message":'修改失败,请重试~',type:"tip",time:'1000',isFather: true,win: 'default', fatherWrapper: $("#mainBox", parent.document)});
    
    })
}
//保存角色修改
function saveEditRole(id,activePage){
    let ids = []
    if(rightRoleLis.length==0){
        $.alerModal({"message":"请选择角色",type:"tip",time:'1000',isFather: true, fatherWrapper: $("#mainBox", parent.document)});
        return
    }
    for(let i = 0;i < rightRoleLis.length;i++){
        ids.push(rightRoleLis[i].id)
    }
    const param = {
        "roleIds": ids,
        "userId": id
      }
    post(api.editUserRoles,param).then(res =>{
        if(res.data.code == '0'){
            // const data = res.data.data
            getTabData(activePage)
            $.alerModal({"message":"修改成功",type:"tip",time:'1000',isFather: true,win: true, fatherWrapper: $("#mainBox", parent.document)});
            $('#mainBox .itemMsgBox', parent.document).remove()
        }else{
            $.alerModal({"message":'修改失败,请重试~',type:"tip",time:'1000',isFather: true,win: 'default', fatherWrapper: $("#mainBox", parent.document)});

        }
    }).catch((e) =>{
        $.alerModal({"message":'修改失败,请重试~',type:"tip",time:'1000',isFather: true,win: 'default', fatherWrapper: $("#mainBox", parent.document)});
    
    })
}

//获取科室，角色列表
function getmoduleTypeList(){
    post(api.getDeptListUser,{
        "inputStr": ""
      }).then(res =>{
        if(res.data.code == '0'){
           const  moduleTypeList = res.data.data
           renderModuleTypeList(moduleTypeList)
        }else{}
    }).catch((e) =>{
    
    })
    post(api.listForUserRole).then(res =>{
        if(res.data.code == '0'){
           const  moduleTypeList = res.data.data
           renderRoleTypeList(moduleTypeList)
        }else{}
    }).catch((e) =>{
    
    })
}


function renderRoleTypeList(moduleTypeList){
    let str = `<li class="modeTypeItem " data-id="" data-name="全部">全部</li>`
    for(let i = 0; i < moduleTypeList.length; i++){
        str += `<li class="modeTypeItem ellipsis" title=${moduleTypeList[i].name} data-id=${moduleTypeList[i].id} data-name=${moduleTypeList[i].name}> ${moduleTypeList[i].name}</li>`
    }
    $('.rejectList').html(str)
    bindRoleTypeSelect()
}
function renderModuleTypeList(moduleTypeList){
    let str = `<li class="modeTypeItem " data-id="" data-name="全部">全部</li>`
    for(let i = 0; i < moduleTypeList.length; i++){
        str += `<li class="modeTypeItem ellipsis" title=${moduleTypeList[i].deptName} data-id=${moduleTypeList[i].deptId} data-name=${moduleTypeList[i].deptName}> ${moduleTypeList[i].deptName}</li>`
    }
    $('.moduleTypeList').html(str)
    bindModuleTypeSelect()
}

//模块类型选择
function bindModuleTypeSelect(){
    $('.moduleTypeList .modeTypeItem').on("click",function(){
        const modeTypeItemName = $(this).attr("data-name")
        const modeTypeItemId = $(this).attr("data-id")
        casesIdTemp =modeTypeItemId
        $('.selectModuleType').html(modeTypeItemName).attr("title",modeTypeItemName)
        $(".selectModuleType").append(`<img class="arrow" src=${iconDown} alt="下拉">`)

        $(".moduleTypeList ").css("display", "none")
    })
}
function bindRoleTypeSelect(){
    $('.rejectList .modeTypeItem').on("click",function(){
        const modeTypeItemName = $(this).attr("data-name")
        const modeTypeItemId = $(this).attr("data-id")
        isRejectTemp =modeTypeItemId
        $('.selectReject').html(modeTypeItemName)
        $(".selectReject").append(`<img class="arrow" src=${iconDown} alt="下拉">`)

        $(".moduleTypeList ").css("display", "none")
    })
}

//是否启用选择
function bindUsedSelect(){
    $('.usedItem').on("click",function(){
        const usedItemName = $(this).attr("data-name")
        const usedItemItemId = $(this).attr("data-id")
        isUsedTemp =usedItemItemId
        $('.selectUsed').html(usedItemName)
        $(".usedList").css("display", "none")
        $(".selectUsed").append(`<img class="arrow" src=${iconDown} alt="下拉">`)
    })
}




//分页渲染
function renderPagination(totalPage,activePage,totalNum){
    let str = `<span class="totalSum">共${totalPage}页/${totalNum}条数据</span><span class="prePage"><img class="arrowPage" src=${arrowLeft} /></span>`
    if(totalPage <= 6){
        for(let i = 1; i <= totalPage; i++){
            str += `<span class="pageNum ${'page'+i}" data-page=${i}>${i}</span>`
        }
    }else{
        if(activePage <= 3){ //选中页数小于4
            for(let i = 1; i <= 4; i++){
                str += `<span class="pageNum ${'page'+i}" data-page=${i}>${i}</span>`
            }
            str += `<span class="more" >...</span>`
        str += `<span class="pageNum ${'page'+totalPage}" data-page=${totalPage}>${totalPage}</span>`

        } else if(activePage > totalPage -3){
            str += `<span class="pageNum page1" data-page=1>1</span>`
            str += `<span class="more" >...</span>`
            str += `<span class="pageNum ${'page'+(totalPage-3)}" data-page=${totalPage -3}>${totalPage -3}</span>`
            str += `<span class="pageNum ${'page'+(totalPage-2)}" data-page=${totalPage -2}>${totalPage -2}</span>`
            str += `<span class="pageNum ${'page'+(totalPage-1)}" data-page=${totalPage -1}>${totalPage -1}</span>`
            str += `<span class="pageNum ${'page'+totalPage}" data-page=${totalPage}>${totalPage}</span>`
        } else {
            str += `<span class="pageNum page1" data-page=1>1</span>`
            str += `<span class="more" >...</span>`
            str += `<span class="pageNum ${'page'+(activePage -1)}" data-page=${activePage -1}>${activePage -1}</span>`
            str += `<span class="pageNum ${'page'+activePage}" data-page=${activePage}>${activePage}</span>`
            str += `<span class="pageNum ${'page'+(activePage +1)}" data-page=${activePage +1}>${activePage +1}</span>`
            str += `<span class="more" >...</span>`
            str += `<span class="pageNum ${'page'+totalPage}" data-page=${totalPage}>${totalPage}</span>`
        }
       
    }
    str += `<span class="nextPage"><img class="arrowPage" src=${arrowRight} /></span>`
    $('.pagination').html(str)
    $('.page' + activePage).addClass('activePage')
    $(".pageNum").on("click", function(e){
        const activePageNow = Number($(this).attr('data-page'))
        getTabData(activePageNow)
        // renderPagination(totalPage,activePageNow,totalNum)
    })
    $(".prePage").on("click", function(e){
        let activePageNow = Number($(".activePage").attr('data-page'))
        if(activePageNow > 1){
            activePageNow--
            getTabData(activePageNow)
            // renderPagination(totalPage,activePageNow,totalNum)
        }
    })
    $(".nextPage").on("click", function(e){
        let activePageNow = Number($(".activePage").attr('data-page'))
        if(activePageNow < totalPage){
            activePageNow++
            getTabData(activePageNow)
            // renderPagination(totalPage,activePageNow,totalNum)
        }
    })
    
}

$(document).on("click", function(){
    $(".moduleTypeList ").css("display", "none")
    $(".rejectList ").css("display","none")
    $(".usedList ").css("display", "none")
    $(".selectModuleType .arrow").attr("src",iconDown)
    $(".selectReject .arrow").attr("src",iconDown)
    $(".selectUsed .arrow").attr("src",iconDown)
})