【Jeecg 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'));

      });

    });
    
  }
}