首页 > 其他分享 >layui 分页-列表数据删除重新渲染分页问题

layui 分页-列表数据删除重新渲染分页问题

时间:2022-11-03 14:33:49浏览次数:60  
标签:layer 分页 渲染 layui id item let pageList page

new Vue({
    el: '#jobIndex',
    data: {
        userInfo: {},
        jobList: [],
        jobForm: {
            username: '',
            password: '',
            mobile: '',
            department: ''
        },
        currentTab: 0, //当前选择的列表分类
        tabList: [
            {
                name: '招聘中',
                status: 1
            },
            {
                name: '已关闭',
                status: 0
            }
        ],
        list_status: 1, //1=发布中 0=关闭
        pageList: {
            tmpListTotal: 0,
            isFirstPage: true,
            page: 1,
            total: 0,
            pageSize: 5,
        },
        keyword: '', // 搜索关键字
        checkboxGroup: [],
        checkAll: [],
        positionDialogVisible: false,
        q_code: null, // 地址二维码
    },
    created() {
        let _userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
        this.userInfo = _userInfo;
        this.currentTab = Number(getQueryVariable('type'));
        if (this.currentTab) {
            this.getJobList(this.pageList.page, 0); // 已关闭职位
        } else {
            this.getJobList(this.pageList.page, this.list_status);
        }
    },
    methods: {
        getJobList(_page, _status) {
            let _param = {
                token: this.userInfo.token,
                page: _page,
                status: _status
            }
            if (this.keyword) {
                _param.keyword = this.keyword
            }
            let _this = this;
            ajaxPost(_param, 'api?operate=company.position.index', function (res) {
                _this.jobList = res.data.data;
                _this.pageList.total = res.data.total;
                _this.pageList.pageSize = res.data.per_page;
               /* if (_this.pageList.isFirstPage) {
                    _this.pageInit(_this.pageList.total);
                }*/
                _this.pageInit(_this.pageList.total);  // 重新获取数据列表,每次都要重新渲染分页

            });
        },

        searchFn() {
            let _this = this;
            _this.getJobList(1, this.list_status);
        },

        /*关闭、开启职位*/
        changePosition(_item) {
            let _this = this;
            let _param = {
                token: this.userInfo.token,
                id: _item.id,
                status: _item.status == 0 ? 1 : 0
            }
            ajaxPost(_param, 'api?operate=company.position.start_close', function () {
                _item.status == 1 ? _msg_title = '关闭职位成功!' : _msg_title = '开启职位成功!';
                layer.msg(_msg_title, {time: 2000});
                switch (_item.status) {
                    case 0:
                        _this.currentTab = 1;
                        break;
                    case 1:
                        _this.currentTab = 0;
                        break;
                }
                _this.getJobList(_this.pageList.page, _item.status);
            })
        },

        /*删除职位*/
        deletePosition(_item) {
            let _this = this;
            let _param = {
                token: this.userInfo.token,
                id: _item.id,
            }
            layer.open({
                title: "删除职位",
                content: '确定删除该职位吗?',
                btn: ['确定', '取消'],
                yes: function (_index) {
                    layer.close(_index);
                    ajaxPost(_param, 'api?operate=company.position.del', function (res) {
                        layer.msg(res.msg);
                        setTimeout(function () {
                            _this.getJobList(_this.pageList.page, 0);
                        }, 2000)
                    })
                },
                btn2: function () {
                    layer.msg('取消删除', {time: 2000});
                }
            });

        },

        /*分页初始化*/
        pageInit(listTotal) {
            let _this = this;
            if (listTotal === 0) {
                $("#list_page").hide();

            } else {
                $("#list_page").show();
            }
            layui.use(['laypage', 'layer'], function () {
                let laypage = layui.laypage, layer = layui.layer;
                if (listTotal) {
                    _this.pageList.tmpListTotal = listTotal;
                } else {
                    listTotal = _this.pageList.tmpListTotal;
                }
                //页码初始化
                laypage.render({
                    elem: 'list_page'
                    , theme: '#007AFF'
                    , count: listTotal //数据总数
                    , limit: _this.pageList.pageSize // 每页条数
                    , prev: "上一页"
                    , next: "下一页"
                 , curr:_this.pageList.page   // 很重要,否则当页码数据减少即不足一页时会出现页码不渲染的bug
                    , jump: function (obj, first) {
                        _this.pageList.page = obj.curr;
                        if (!first) {
                            _this.pageList.isFirstPage = false;
                            _this.getJobList(_this.pageList.page, _this.list_status);
                        } else {
                            _this.pageList.isFirstPage = true;
                        }

                    }
                });
            });
        },

        goLaunch(_id) {
            if (this.userInfo.company_vip == 1) {
                window.open("?page=launchPosition" + '&pos_id=' + _id + '&total=' + this.pageList.total);
            } else {
                let _title = "您直聘虎,请先充值会员再使用该功能模块";
                if (this.userInfo.company_end_time) {
                    _title = "您的会员已到期,请续费后再使用该功能";
                }
                layer.msg(_title, {time: 2000})
            }
        },
        addLaunch() {
            if (this.userInfo.company_id) {
                if (this.userInfo.company_vip == 1) {
                    window.open("?page=launchPosition&total=" + this.pageList.total);
                } else {
                    let _title = "您不是招聘会员,请先充值会员再使用该功能模块";
                    if (this.userInfo.company_end_time) {
                        _title = "您的会员已到期,请续费后再使用该功能";
                    }
                    layer.msg(_title, {time: 2000})
                }
            } else {
                layer.confirm("温馨提示:亲,您还没有添加企业信息哦,请先前往添加", {
                    btn: ['确认', '取消']
                }, function (index) {
                    window.open("?page=company");

                    layer.close(index);
                }, function () {
                    layer.msg('取消发布', {time: 2000})
                });
            }
        },
        /*职位状态分类切换*/
        changeList(_index, _status) {
            let _this = this;
            _this.currentTab = _index;
            _this.list_status = _status;
            _this.pageList.isFirstPage = true;
            _this.getJobList(1, _this.list_status);
        },

        /*跳转职位详情*/
        goDetail(_id) {
            window.open("?page=positionDetail&id=" + _id + "&total=" + this.pageList.total);
        },


        /*跳转投递、收藏职位列表*/
        goJobPage(_type, _item) {
            window.open("?page=tag_resume&type=" + _type + '&id=' + _item.id);
        },

        /*分享到qq*/
        shareTo(_item) {
            let _this = this;
            let _url = HtmlConfig.SHARE_HOST + "?page=positionDetail&id=" + _item.id + "&total=" + _this.pageList.total;
            /* 生成二维码 */
            setTimeout(() => {
                $("#qrcode").qrcode({
                    text: _url, //设置二维码内容
                    render: "table", //设置渲染方式
                    width: 200, //设置宽度,默认生成的二维码大小是 256×256
                    height: 200, //设置高度
                    typeNumber: -1, //计算模式
                    background: "#ffffff", //背景颜色
                    foreground: "#000000" //前景颜色
                });
                let _child = $("#qrcode").children();
                if (_child.length > 1) {
                    $("#qrcode").children().eq(0).remove();
                }
            }, 200);
            _this.positionDialogVisible = !_this.positionDialogVisible;
        },

        /*批量刪除*/
        deleteFn() {
            let _this = this;
            /*  let checkedAll = [];
              _this.jobList.forEach(item => {
                  if(item.relation == true){
                      checkedAll.push(item.id)   //确认的时候取状态为true的值,并把要用的字段取出来
                  }
              })
              // var checkedAll = [...new Set(this.checkedCities)] //数组去重
              console.log('checkedAll',checkedAll)*/
            let _len = _this.checkboxGroup.length;
            if (_len == 0) {
                layer.msg('请至少选择一个职位后再操作');
            } else {
                layer.confirm("确定删除所选" + _len + "个职位吗?", {
                    btn: ['确认', '取消']
                }, function (index) {
                    let _param = {
                        token: _this.userInfo.token,
                        id: _this.checkboxGroup.join(','),
                    }
                    ajaxPost(_param, 'api?operate=company.position.del', function (res) {
                        layer.msg(res.msg);
                        setTimeout(function () {
                            layer.close(index);
                            _this.getJobList(_this.pageList.page, _this.list_status);
                        }, 2000)
                    })
                }, function () {
                    layer.msg('取消操作');
                    _this.checkboxGroup = [];
                });
            }

        },
        /*全选*/
        handleCheckAllChange(e) {
            let _this = this;
            _this.checkAll = e;
            if (_this.checkAll) {
                _this.jobList.forEach(item => {
                    item.relation = true; //只改变数据的状态
                })
            } else {
                _this.jobList.forEach(item => {
                    item.relation = false;
                })
            }
        },
        changeGroup(e) {
            let _this = this;
            _this.checkboxGroup = e;
            // console.log('_this.checkboxGroup',_this.checkboxGroup);
        },

        /*刷新职位*/
        goRefresh(_id) {
            let _param = {
                token: this.userInfo.token,
                id: _id
            }
            ajaxPost(_param, 'api?operate=company.position.refresh_position', function (res) {
                layer.msg(res.msg);
            })
        }
    }
});

 

标签:layer,分页,渲染,layui,id,item,let,pageList,page
From: https://www.cnblogs.com/LindaBlog/p/16854326.html

相关文章