layui 分页-列表数据删除重新渲染分页问题
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);
})
}
}
});
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/16854326.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」