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