发表于: 2017-07-30 23:44:09
2 829
1、完成页面剩余的,公司标签传参请求,删除,编辑和上下架功能,后台部分功能已经全部实现。
标签值叠加为字符串。先获取所有标签节点,在保存时判断当前节点checked属性是否为选中状态(打印输出节点时,可以看到里面对应的属性相当多,后续可操作性比较广泛),然后将当前值进行叠加,得出最后的传参值(最后会多一个逗号,但是不影响)。
angular.forEach(inputDom,function (obj) {
if(obj.checked==true){
inputChecked=obj.value + ',' + inputChecked;
}
})
保存后根据返回信息,进行弹窗提示及返回上一页。之前返回做的是用$state.go传参跳转,比较麻烦,而且有2个不同页面可以进入编辑状态。后面改为直接返回解决问题,而且js原生代码也很简单,后面跟一个强制刷新,返回页面就是原状态页面(带参数),体验也很好。
if(resp.data.message=="success"){
//弹出提示,返回当前公司列表!
alert("保存成功,确认后返回上一页!")
//返回上一页
window.history.back(-1);location.reload();
}
由于职位页面请求返回参数,缺少一个公司冻结状态(上下架时会有不同状态提示),考虑到避免多一次请求,直接做的后端验证,请求成功/失败时进行对应提示。缺点的话,可能冻结提示会稍微慢一点(前端先请求后面点击时直接验证与点击进行后端验证的差异)。
if (resp.data.message == "success") {
vm.btbAlert(t3); //提示上/下架成功
request(data); //重新请求数据,页面状态不变
}
else {
vm.btbAlert(t4); //提示请求失败,检查公司冻结状态
}
重点说一下模态框,由于复用率很高,直接提出来作为函数使用,mes为提示消息,res为回调函数后面定义,最后在需要的地方,执行一次函数就行了。由于多个页面都需要用到,且样式需要固定,后期优化时会使用$root定义为全局函数进行公用,使用时部分代参即可。
vm.btbConfirm=function (mes,res) {
return bootbox.confirm({
message: mes,
title: "操作提示",
size:'large',
buttons: {
//定义样式及显示文字,略
},
callback:function(result)
{res(result)}
})}
function res(result){
if (result) {
if (shelf == 1) {
vm.btbAlert(error);
}
else {
httpGet.deleteJoblist(id)
.then(function (resp) {
if (resp.data.message == "success") {
vm.btbAlert(del);
request(data);
}
})
}
}
}
收获:模态框改成公共函数统一样式,实现复用,代码量会大幅减少。节点属性值的获取。
困难:暂无。
计划:开始进行前台代码编写,主要是get请求页面渲染,没有修改保存等操作相对简单些,但是交互逻辑更复杂,这方面会难一点。
评论