AIPlatform/src/js/allotCheckTask.js

const $ = require('jquery');
require("../css/allotCheckTask.less");
require('./modal.js');
const {api,ywCheckApi} = require('./api.js')
const {post,getCookie,emptyBox,listenScroll} = require('./utils.js')
require('./../resource/jquery-ui/jquery-ui.min.js');
require('./../resource/jquery-ui/jquery-ui.min.css');
const iconCheck= require("./../images/icon_check.png")
const iconUnCheck = require("./../images/icon_unchecked.png")
const iconRadio=require("./../images/radio.png")
const iconUnRadio=require("./../images/unradio.png")
const  iconCalenBlue= require("./../images/icon_calen_blue.png")
const  iconCalenGrey= require("./../images/icon_calen_grey.png")
const iconDown= require("./../images/arrow_down.png")
const iconUp = require("./../images/arrow_up.png")
const loadingImg = require("./../images/loading.gif")
const arrowLeft= require("./../images/arrow_left.png")
const arrowRight = require("./../images/arrow_right.png")
listenScroll()
let tabList = [], data_desc=["leaveHospitalDate"],data_asc=[];
let global_DeptCheckers = {},global_Checkers={4:[],5:[],6:[]},global_CheckerId='',global_CheckerName='',
    global_DeptId='',global_DeptMId="",global_DeptAllId='',global_deptData = {},global_activeTabCode='0',global_TaskCodes=[];
let isPlacefile = getCookie('isPlacefile')||1
/*if(isPlacefile != 1){
    data_desc=["behospital_date"]
}*/

$(function() {
    const checkAuth = getCookie('checkAuth');
    /*if(!checkAuth){
        $(".tabs").hide();
        toast("没有质控核查权限!");
        return
    }*/
    const tabs = (checkAuth||'').replace(/[^456]/g,'');
    if(tabs.length===0){
        $(".tabs").hide();
        toast("没有质控核查权限!");
        return;
    }else if(tabs.length<2){
        //只有一个权限，隐藏tab切换
        $(".tabs").hide();
    }else{//隐藏没有权限的tab
        const last = "456".replace(tabs,'');
        $(".tabs [data-code="+(last-4)+"]").parent().hide();
    }
    global_activeTabCode=tabs.substr(0,1)-4;
    $(".tabs [data-code="+global_activeTabCode+"]").addClass("active");
    if(global_activeTabCode=='0'){
        $(".patDeptFilter").hide();
    }
    //初始化日期
    $.datepicker.regional['zh-CN'] = {
        clearText: '清除',
        clearStatus: '清除已选日期',
        closeText: '关闭',
        closeStatus: '不改变当前选择',
        prevText: '<上月',
        prevStatus: '显示上月',
        prevBigText: '<<',
        prevBigStatus: '显示上一年',
        nextText: '下月>',
        nextStatus: '显示下月',
        nextBigText: '>>',
        nextBigStatus: '显示下一年',
        currentText: '今天',
        currentStatus: '显示本月',
        monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'],
        monthNamesShort: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'],
        yearNamesShort: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'],
        monthStatus: '选择月份',
        yearStatus: '选择年份',
        weekHeader: '周',
        weekStatus: '年内周次',
        dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
        dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
        dayNamesMin: ['日','一','二','三','四','五','六'],
        dayStatus: '设置 DD 为一周起始',
        dateStatus: '选择 m月 d日, DD',
        dateFormat: 'yy-mm-dd',
        firstDay: 1,
        initStatus: '请选择日期',
        isRTL: false};
    $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
    const days = new Date().getDate()-1;
    let startDate = "-"+days+"d",endDate=new Date();
    $( "#datepicker" ).datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat:"yy-mm-dd",
    }).datepicker( "setDate", startDate);
    $( "#datepicker2" ).datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat:"yy-mm-dd",
    }).datepicker( "setDate",endDate);
    $( "#datepicker3" ).datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat:"yy-mm-dd",
    });
    $( "#datepicker4" ).datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat:"yy-mm-dd",
    });

    $('.datapickerBox').append(`<img class="iconCalen" src=${iconCalenGrey} />`)
    $('.iconCalen').on("mouseenter", function(e){
        $(this).attr("src", iconCalenBlue)
    })
    $('.iconCalen').on("mouseleave", function(e){
        $(this).attr("src", iconCalenGrey)
    })
    $('.iconCalen').on("click", function(e){
        $(this).parent().find("input").focus()
    })
    //保存分配
    $(".save-btn").click(function(){
        allotTask(0);
    })
    //菜单选中状态
    $(".menu .page", parent.document).removeClass("active")
    $(parent.document).find(".menu .page[code=YH-ZKHC-FPHCRW]").addClass("active")
    //表格容器高度计算
    setBoxHeight();
    $(window).resize(function() {
        setBoxHeight();
    });

//切换tab
    $(".tabBox .tabs button").on("click",(e)=>{
        const me = e.target;
        global_activeTabCode = $(me).attr("data-code");
        $(".tabBox .tabs button").removeClass("active");
        $(me).addClass("active");
        if(global_activeTabCode=='0'){
            $(".patDeptFilter").hide();
        }else{
            $(".patDeptFilter").show();
        }
        clearCheckerFilter();
        clearFilter();
        //刷新质控员、任务列表
        //getCheckerList();
        //const data = global_Checkers[+global_activeTabCode+4];
        getCheckerList();
        getTabData(1);
        /*rendeDeptList();
        rendeCheckerList();
        renderCheckerTable();*/
    });

//任务筛选
    $(".filter").on("click", function(e){
        const behosDateStart1 = $("#datepicker1").val()         //出院日期
        const behosDateEnd1 = $("#datepicker2").val()
        const behosDateStartTime1 = new Date(behosDateStart1).getTime()
        const behosDateEndTime1 = new Date(behosDateEnd1).getTime()
        const behosDateStart = $("#datepicker3").val()         //出院日期
        const behosDateEnd = $("#datepicker4").val()
        const behosDateStartTime = new Date(behosDateStart).getTime()
        const behosDateEndTime = new Date(behosDateEnd).getTime()
        if(behosDateStartTime > behosDateEndTime){
            $.alerModal({"message":'生成日期开始时间不能大于结束时间~',type:"tip",time:'1000',isFather: true, fatherWrapper: $("#mainBox", parent.document)});
            return
        }
        if(behosDateStartTime1 > behosDateEndTime1){
            $.alerModal({"message":'出院日期开始时间不能大于结束时间~',type:"tip",time:'1000',isFather: true, fatherWrapper: $("#mainBox", parent.document)});
            return
        }
        getTabData(1)
    })
//重置
    $(".abnormalClear").on("click", function(e){
        clearFilter();
        getTabData(1)
    })

//关闭弹窗事件
    $(".modal-container .close").click(function(){
        $(".modal-container").hide();
    });

//科室选择
    $('.selectDept').on("click", function(e){
        e.stopPropagation()
        $(".checkerList ").css("display", "none")
        $(".selectChecker .arrow").attr("src",iconDown)
        $(".deptList ").css("display","block")

    })
//病人科室选择
    $('.selectAllDept').on("click", function(e){
        e.stopPropagation()
        $(".checkerList ").css("display", "none")
        $(".selectChecker .arrow").attr("src",iconDown)
        $(".deptAllList ").css("display","block")

    })
//质控员选择
    $('.selectChecker').on("click", function(e){
        e.stopPropagation()
        $(".deptList ").css("display", "none")
        $(".selectChecker .arrow").attr("src",iconDown)
        $(".checkerList").css("display","block")
    })
//关闭下拉事件
    $(document).on("click", function(){
        $(".deptList ").css("display", "none")
        $(".deptAllList ").css("display", "none")
        $(".checkerList").css("display", "none")
        $(".selectDept .arrow").attr("src",iconDown)
        $(".selectAllDept .arrow").attr("src",iconDown)
        $(".selectChecker .arrow").attr("src",iconDown)
    })

//获取科室列表
    getAllDeptList()

//获取核查人员列表
    getCheckerList()
    getTabData(1)
});

//高度适应
function setBoxHeight() {
    const ht = window.innerHeight;
    $('.table-cont').height(ht - 319 + 'px');
    $('.overAuto').height(ht - 174 + 'px');
}

//病人列表获取筛选值
function getFilterData(){
    const obj = {};
    $(".overAuto.fr .filterBox input[code]").map((i,it)=>{
        obj[$(it).attr("code")]=$(it).val()
    })
    return obj;
}

//获取分配核查任务列表数据
function getTabData(activePage){
    const filterData = getFilterData();
    const dept = global_DeptMId||global_DeptId||global_DeptAllId;
    const deptList=dept.trim()?[dept]:[];
    const param = {
        current:activePage,
        asc:data_asc,     //升序
        desc:data_desc,       //降序
        size: 15,
        jobType:global_activeTabCode,    //0-科室任务 1-院级 2-质控科
        ...filterData,
        deptList:deptList,
        endTime:filterData.endTime+" 23:59:59"
    };
    $('.pagination').html("");
    $('.patientTable .tbody').html(emptyBox('努力加载中...','',8))
    return post(ywCheckApi.getAllotCheckList,param).then(res =>{
        if(res.data.code == '0'){
            const data = res.data.data;
            tabList = data.records;
            const totalPage = data.pages;
            const totalNum = data.total;
            renderTab(tabList)
            renderPagination(totalPage,Number(activePage),totalNum)
            if(totalPage > 0){
                renderPagination(totalPage,Number(activePage),totalNum)
            } else{
                $('.pagination').html("")
            }
        }else{
            $.alerModal({"message":res.data.msg,type:"tip",time:'1000',isFather: true, fatherWrapper: $("#mainBox", parent.document)});
        }
    }).catch((e) =>{

    })
}

function clearCheckerFilter(){
    $('.selectDept i').text('全部')
    $('.selectAllDept i').text('全部')
    $(".deptList").css("display", "none")
    $(".deptAllList").css("display", "none")
    $('.selectChecker i').text('全部')
    $(".checkerList").css("display", "none")
    global_DeptMId="";
    global_DeptId="";
    global_CheckerId="";
    global_CheckerName="";
}

function clearFilter(){
    $(".overAuto.fr input").val("");
    data_desc=["leaveHospitalDate"];
    global_DeptAllId="";
    /*if(isPlacefile != 1){
        data_desc=["behospital_date"]
    }*/
    data_asc=[];

    //默认日期为本月
    const days = new Date().getDate()-1;
    let startDate = "-"+days+"d",endDate=new Date();
    $( "#datepicker" ).datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat:"yy-mm-dd",
    }).datepicker( "setDate", startDate);
    $( "#datepicker2" ).datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat:"yy-mm-dd"
    }).datepicker( "setDate",endDate);
    $( "#datepicker3" ).datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat:"yy-mm-dd",
    });
    $( "#datepicker4" ).datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat:"yy-mm-dd"
    });
    $("th[code]").removeClass("asc desc")
}
//病人列表排序事件
function bindOrder(){
    $(".patientTable th[code]").off("click").on("click",function(e){
        const code=$(this).attr("code");
        if(data_asc[0]===code){
            data_desc=[code];
            data_asc=[];
            $("th[code]").removeClass("asc desc");
            $(this).addClass("desc");
        }else{
            data_desc=[];
            data_asc=[code];
            $("th[code]").removeClass("asc desc");
            $(this).addClass("asc");
        }
        getTabData(1);
        // console.log(code)
    });
}
//已分配列表排序事件
function bindTaskOrder(){
    $(".taskTable th[code]").off("click").on("click",function(e){
        const code=$(this).attr("code");
        let d_desc=[],d_asc=[];
        if(data_asc[0]===code){
            d_desc=[code];
            d_asc=[];
            $(".taskTable th[code]").removeClass("asc desc");
            $(this).addClass("desc");
        }else{
            d_desc=[];
            d_asc=[code];
            $(".taskTable th[code]").removeClass("asc desc");
            $(this).addClass("asc");
        }
        getTasksList({desc:d_desc,asc:d_asc});
        // console.log(code)
    });
}
//质控员列表渲染
function renderCheckerTable(d){
    const data = d?d:global_Checkers[+global_activeTabCode+4];
    let str = ``,code="";
    global_CheckerId="";
    if(!data||data.length===0){
        $('.checkerTable .tbody').html(emptyBox(null,4))
        //if(!noTasksUpdate){getTabData(1);}
        //   initScroll("qcList","YX",1)
        return;
    }
    //获取任务列表数据
    //if(!noTasksUpdate){getTabData(1);}

    const titles = $(".checkerTable .tabTitle th[valCode]");
    for(let i = 0; i < data.length; i++){
        const item = data[i]

        str += `
            <tr  data-index=${i}>
                <td class="operaItem checkerRadio textCenter" code="${item.doctorId}" data-dept=${item.deptId} data-name="${item.doctorName}"><img src="${iconUnRadio}" alt=""></td>
                `
            for(let i=0;i<titles.length;i++){
                code=$(titles[i]).attr('valCode');
                if(code==="jobNum"){
                    str +=  `<td class="textCenter"><a class="job-num" data-index=${i} data-dept=${item.deptId} data-id="${item.doctorId}" data-name="${item.doctorName}">${ item[code]}<a></td>`
                }else{
                    str +=  `<td class="textCenter"><span data-index=${i}>${ item[code]}<span></td>`
                }
            }
        str += "</tr>"
    }
    $('.checkerTable .tbody').html(str);
    selectCheckerTb();
    bindTaskNumEvent();
}
//选中质控员
function selectCheckerTb(){
    $(".checkerRadio").click(function(){
        global_CheckerId=$(this).attr("code");
        global_CheckerName=$(this).attr("data-name");
        global_DeptMId=$(this).attr("data-dept");
        getTabData(1)
        $(".checkerRadio img").attr('src',iconUnRadio);
        $(this).find("img").attr('src',iconRadio);
    });
}
//选中任务
function selectTaskTb(){
    $(".taskCheck").unbind("click").click(function(){
        const id=$(this).attr("code");
        const it =$(this).find("img");
        const codes = global_TaskCodes.join(",")+",";
        if(it.is(".active")){
            $(this).find("img").attr('src',iconUnCheck);
            global_TaskCodes = codes.replace(id+",","").replace(/^,|,$/,'').split(",");
        }else{
            $(this).find("img").attr('src',iconCheck);
            global_TaskCodes.push(id);
        }
        it.toggleClass('active');

    });
}
//待分配任务列表渲染
function renderTab(data){
    let str = ``,code=""
    global_TaskCodes=[];
    if(data.length===0){
      $('.patientTable .tbody').html(emptyBox(null,7))
    //   initScroll("qcList","YX",1)
      return;
    }
    const titles = $(".patientTable .tabTitle th[valCode]");
    for(let i = 0; i < data.length; i++){
        const item = data[i]

        str += `
            <tr  data-index=${i}>
                <td class="operaItem taskCheck textCenter" code="${item.behospitalCode}"><img src="${iconUnCheck}" alt=""></td>`;
        for(let i=0;i<titles.length;i++){
            code=$(titles[i]).attr('valCode');
            str +=  `<td class="textCenter"><span data-index=${i}>${ item[code] || "-"}<span></td>`
        }
        str += "</tr>"
    }

    $('.patientTable .tbody').html(str)
    selectTaskTb();
    bindOrder()
}
//任务数点击事件
function bindTaskNumEvent(){
    $(".job-num").unbind("click").click(function(){
        global_CheckerId = $(this).attr("data-id");
        global_CheckerName=$(this).attr("data-name");
        global_DeptMId=$(this).attr("data-dept");
        $(".modal-container").show();
        getTasksList();
    })
}
//获取全部科室数据
function getAllDeptList(){
    post(api.getDeptList,{}).then(res =>{
        if(res.data.code == '0'){
           const  deptList = res.data.data||[]
            rendeAllDeptList(deptList)
        }else{rendeAllDeptList([])}
    }).catch((e) =>{

    })
}

function getCheckerList(){
    post(ywCheckApi.getCheckUserMap,{jobType:+global_activeTabCode+4}).then(res =>{
        if(res.data.code == '0'){
            const list = res.data.data||{};
            global_deptData = list;
            formatDeptChecker(list);
        }else{rendeCheckerList([])}
    }).catch((e) =>{

    })
}

//获取质控员任务列表
function getTasksList(param={}){console.log(222,global_activeTabCode)
    post(ywCheckApi.getTaskByUserId,{...param,jobType:global_activeTabCode,checkId:global_CheckerId,deptList:[global_DeptMId]}).then(res =>{
        if(res.data.code == '0'){
            const list = res.data.data||{};
            renderTaskTable(list);
        }else{rendeCheckerList()}
    }).catch((e) =>{

    })
}

//质控员任务列表渲染
function renderTaskTable(data) {
    let str = ``, code = "";
    if (!data || data.length === 0) {
        $('.taskTable .tbody').html(emptyBox(null, 7))
        return;
    }

    const titles = $(".taskTable .tabTitle th[valCode]");console.log(data)
    for (let i = 0; i < data.length; i++) {
        const item = data[i];
        str += `<tr data-index=${i}>`;
        for (let i = 0; i < titles.length; i++) {
            code = $(titles[i]).attr('valCode');
            str += `<td class="textCenter"><span data-index=${i}>${ item[code] || "-"}<span></td>`
        }
        str+=`<td class="operaItem textCenter"><a class="delete ${item.delFlag?'':'disable'}" code="${item.behospitalCode}">移除</a></td><tr>`
    }
    $('.taskTable .tbody').html(str);
    bindDeleteEvent();
    bindTaskOrder();
}
//移除任务事件
function bindDeleteEvent(){
    const dom = `<div class="del-pop">
                        <div class="pop-title">确定移除该任务吗？</div>
                        <div class="pop-btns">
                            <button class="del-confirm">确定</button>
                            <button class="cancel">取消</button>
                        </div>
                    </div>`;
    $(".taskTable .delete:not(.disable)").unbind("click").click(function(e){
        global_TaskCodes=[$(this).attr("code")];console.log(3)
        $(dom).insertAfter($(this)).show();
        $(".del-pop .cancel").unbind("click").click(function(){
            $(".del-pop").hide();
        });
        $(".del-pop .del-confirm").unbind("click").click(function(){
            allotTask(1);
        });
    });
}

//科室筛选质控员
function formatDeptChecker(list){
    const k=+global_activeTabCode +4;
    const allCheckArrs = list[k];
    global_Checkers={4:[],5:[],6:[]}
    allCheckArrs.map((it)=>{
        global_DeptCheckers[it.deptId]=it.deptcheckUsers;
        global_Checkers[k].push(...it.deptcheckUsers);
    });
    rendeDeptList();
    rendeCheckerList();
    renderCheckerTable();
}
//渲染科室列表
function rendeAllDeptList(list){
    if(list.length == 0){
      $(".deptAllList").html("")
      return
    }
    let str = `<li class="deptAllItem ellipsis" data-id=" " data-name="全部">全部</li>`;
    for(let i = 0; i < list.length; i++){
        str += `<li class="deptAllItem ellipsis" title=${list[i]['deptName']} data-id=${list[i]['deptId']} data-name=${list[i].deptName}> ${list[i].deptName}</li>`
    }
    $(".deptAllList").html(str)
    bindAllDeptSelect()
}

//渲染当前用户科室列表
function rendeDeptList(){
    const list = global_deptData[+global_activeTabCode+4];
    if(!list||list.length == 0){
        $(".deptList").html("")
        return
    }
    let str = `<li class="deptItem ellipsis" data-id=" " data-name="全部">全部</li>`;
    for(let i = 0; i < list.length; i++){
        str += `<li class="deptItem ellipsis" title=${list[i]['deptName']} data-id=${list[i]['deptId']} data-name=${list[i].deptName}> ${list[i].deptName}</li>`
    }
    $(".deptList").html(str)
    bindDeptSelect()
}


//质控员列表渲染
function rendeCheckerList(arr){
    const list = arr?arr:global_Checkers[+global_activeTabCode+4];
    if(list.length == 0){
        $(".checkerList").html("")
        return
    }
    let str = `<li class="checkerItem ellipsis" data-id=" " data-name="全部">全部</li>`;
    for(let i = 0; i < list.length; i++){
        str += `<li class="checkerItem ellipsis" data-id=${list[i]['doctorId']} data-dept=${list[i]['deptId']} data-name=${list[i].doctorName}> ${list[i].doctorName}</li>`
    }
    $(".checkerList").html(str)
    bindCheckerSelect()
}
//质控员列表科室选择
function bindDeptSelect(){
    $('.deptItem').on("mousedown",function(){
        const deptItemName = $(this).attr("data-name")
        global_DeptId = $(this).attr("data-id")
        global_DeptAllId="";
        global_DeptMId="";
        $('.selectDept i').text(deptItemName)
        $('.selectDept').attr('title',deptItemName)
        $(".deptList").css("display", "none")
        //质控员选择清空
        $('.selectChecker i').text('全部')
        $('.selectChecker').attr('title','全部')
        const data = +global_DeptId?global_DeptCheckers[global_DeptId]:global_Checkers[+global_activeTabCode+4];
        console.log(data,global_DeptId)
        rendeCheckerList(data||[]);
        renderCheckerTable(data);
        getTabData(1);
    })
}
//病人列表科室选择
function bindAllDeptSelect(){
    $('.deptAllItem').on("mousedown",function(){
        const deptItemName = $(this).attr("data-name")
        global_DeptId="";
        global_DeptMId="";
        global_DeptAllId = $(this).attr("data-id");
        $('.selectAllDept i').text(deptItemName)
        $('.selectAllDept').attr('title',deptItemName)
        $(".deptAllList").css("display", "none")
        getTabData(1)
    })
}
//质控员选择
function bindCheckerSelect(){
    $('.checkerItem').on("mousedown",function(){
        const itemName = $(this).attr("data-name")
        const itemId = $(this).attr("data-id")
        $('.selectChecker i').text(itemName)
        $('.selectChecker').attr('title',itemName)
        $(".checkerList").css("display", "none")
        global_DeptAllId="";
        if(!itemId.trim()){
            renderCheckerTable();
            return
        }
        const dept=$(this).attr("data-dept");
        const totalArr = global_DeptId?global_DeptCheckers[global_DeptId]:global_Checkers[+global_activeTabCode+4];
        const arr = totalArr.find((it)=>itemId===it.doctorId&&dept===it.deptId);
        renderCheckerTable([arr]);
    })
}
function loading(){
    const str = `
    <div class="loadingBox">
            <div class="mask"></div>
            <img class="loadingImg" src=${loadingImg}  alt="loading" />
        </div>
    `
    $("#mainBox", parent.document).append(str)
}
function hideLoading(){
    $("#mainBox .loadingBox", parent.document).remove()
}

function allotTask(flag){
    if(!global_CheckerId){
        toast("请先选择质控员");
        return;
    }
    if(global_TaskCodes.length===0){
        toast("请选择至少一个任务");
        return;
    }
    const param = {
        checkId:global_CheckerId,
        checkName:global_CheckerName,
        distributionType:flag,
        behospitalCodes:global_TaskCodes,
    }
    post(ywCheckApi.allotTask,param).then(res =>{
        if(res.data.code == '0'){
            global_TaskCodes=[];
            getCheckerList();
            getTabData(1);
            flag&&getTasksList();       //移除时更新已分配任务列表弹窗数据
            toast("操作成功");
        }else{
            toast(res.data.msg||'保存分配失败,请重试~');
        }
    }).catch((e) =>{

    })
}
//气泡提示
function toast(msg) {
    $.alerModal({"message":msg,type:"tip",time:'1000',isFather: true, fatherWrapper: $("#mainBox", parent.document)});
}
//分页渲染
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)
        }
    })

}