Vue通过getAction的finally来最大程度避免影响主数据呈现问题
企业信息列表，查看某条记录时，弹窗页里要求展示企业的用户名，而用户名字段不在企业表里。
为此，我们需要修改弹窗页的渲染方法。
methods: {
enterpriseInfo (record) {
this.form.resetFields();
let product;
if(record.product == 'HUICHUXING'){
product = '惠出行';
}else if(record.product == 'BOSSKG'){
product = 'BOSS开工';
}else if(record.product == 'HUICHUXING，BOSSKG' || record.product == 'BOSSKG，HUICHUXING'){
product = '惠出行,BOSS开工';
}else{
product = '业务未开通';
}
this.model = Object.assign({}, record);
this.model.product = product;
this.visible = true;
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model,'enterpriseName','address','legalName','email','phone','userName','licensePic',
'ipList','taxpayerNo','billAddress','bankName','bankCardNo','billPhone','product'));
});
}
}
我的想法很清晰，recoord代表的是指定的企业的信息，在this.visible = true;前，给this.model.userName属性重新赋值。
服务端接口很快实现了。不过，修改这个vue页面的时候倒是吃力了。对于Jeecg-boot 的这套前段UI框架Ant Design Jeecg Vue，虽然已经跟了几个项目了，依然是一知半解。
自然是通过getAction来赋值了，然并卵。因为getAction是异步请求，所以，肯定是不起作用了。
那么，该怎么办呢？
一个小伙给出了方案，当然，这也是我不得已而为之的方案————在getAction请求成功的方法里，给userName赋值，然后，再进行页面渲染。
methods: {
enterpriseInfo (record) {
......
this.visible = true;
getAction('/ent/getEnterpriseLoginAcc?enterpriseId=' + record.enterpriseId).then(response => {
record.userName = response.result.loginAcc;
this.model = Object.assign({}, record);
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'enterpriseName', 'address', 'legalName', 'email', 'phone', 'userName', 'licensePic', 'taxpayerNo', 'billAddress', 'bankName', 'bankCardNo', 'billPhone', 'product', 'industryType1', 'industryType2'));
});
});
}
}
这样虽然实现了，但与我的想法有些不一致。怎么讲？假如说，执行getAction出问题，那么整个页面将无法呈现。这岂不因小失大！
后来，问一个前端的同事，终于指点了迷津。 同事发的如下这个示意图，提示可在1处、2处做文章。
当然，经过尝试，发现类似getAction\postAction\putAction除了.then()、.catch()外，还有finally()。那看来，在没有其他方案的情况下，————也许没有其他方案了————这是最好的方案了，也符合我的期望。
methods: {
enterpriseInfo (record) {
......
this.visible = true;
this.$nextTick(() => {
getAction('/ent/getEnterpriseLoginAcc?enterpriseId='+record.enterpriseId).then(res => {
if(res.success) {
this.model.userName = res.result.loginAcc;
}
}).finally(() => {
// console.log("userName= "+this.model.userName)
this.form.setFieldsValue(pick(this.model,'enterpriseName','address','legalName','email','phone','userName','licensePic',
'ipList','taxpayerNo','billAddress','bankName','bankCardNo','billPhone','product','industryType1','industryType2'));
});
});
}
}
更多精彩内容其他人还在看
理解Javascript闭包
闭包是ECMAScript一个很重要的特征，但是却很难用合适的定义来描述它。虽然闭包很难清晰地描述，但是，却很容易创建，或者说，不小心创建。然而，闭包的存在其实是有一定的潜在问题的。为了避免“不小心”地创建闭包，以及更好地利用闭包的优点，有必要理解闭包的机制。闭包的定义 ... 查看详情
收藏 0赞 0分享
JS实现切换标签页效果实例代码
在网页<head>区添加以下代码复制代码 代码如下:<style type="text/css"> <!-- BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-S... 查看详情
收藏 0赞 0分享
js将json格式内容转换成对象的方法
复制代码 代码如下:{"options":"[{\"text\":\"王家湾\",\"value\":\"9\"},{\"text\":\"李家湾\",\"valu e\":\"10\"},{\"text\":\"邵家湾\",\"value\":\"13\"}]"}
<... 查看详情
收藏 0赞 0分享
jQuery Mobile 导航栏代码
导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。
默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role="button"）。
使用 data-role="navbar" 属性来定义导航栏：复制代码 代码如下:<div data-role="he... 查看详情
收藏 0赞 0分享
基于jquery插件实现常见的幻灯片效果
在网站中使用幻灯片效果的目前很普遍，如何实现，自己经过一番研究，本以为很复杂，想不到却很简单。有现成的jquery插件jquery.KinSlideshow.js。 使用jquery.KinSlideshow.js就可以很轻松的实现幻灯片效果 htm代码： 复制代码 代码如下: ... 查看详情
收藏 0赞 0分享
多种方法实现JS动态添加事件
方法一、setAttribute var obj = document.getElementById("obj"); obj.setAttribute("onclick", "javascript:alert('测试');"); 但是IE不支持用 setAttribute 设置某... 查看详情
收藏 0赞 0分享
JS实现拖动示例代码
getBoundingClientRect() 来获取页面元素的位置 复制代码 代码如下: document.documentElement.getBoundingClientRect 该方法返回一个对象，从而获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，即分别代... 查看详情
收藏 0赞 0分享
JS滚轮事件onmousewheel使用介绍
典型的应用时鼠标滚轮滚动控制图片或者文字的大小，例如此类的转动鼠标滚轮实现缩放等等交互效果中，会用到 Mousewheel 事件。在大多数浏览器（IE6, IE7, IE8, Opera 10+, Safari 5+）中，都提供了 “mousewheel” 事件。滚轮事件的兼容性... 查看详情
收藏 0赞 0分享
框架页面高度自动刷新的Javascript脚本
实现原理：加载index.htm时候，每隔1秒钟自动调用脚本刷新框架页面代码 代码优点：只需要设置index.html框架页面中的脚本，调用加载的子页面中不需要设置任何代码。 index.htm代码如下： 复制代码 代码如下: <!DOCTYPE html PUBLIC "... 查看详情
收藏 0赞 0分享