2022-03-30 前端沙龙

一：逻辑校验 （避免上线bug、出现bug快速定位问题）

在进行逻辑校验时一定要注意数据类型、数据有无值，特别是接口返回数据处理逻辑要非常注意。
- 开发时因为数据都是想要的，所以不会报错，但是生产数据是千变万化的

getTableData(record: any) {
    // 例子
   ajax({ regId: record.regId })
      .then(data => {
        this.reportInfo = data;
        this.reportInfo.processStatus = record.processStatus;
      })
      .catch(error => {
      });
  }

getPatData(record: any) {
    // 严谨示例
   ajax({ regId: record.regId })
      .then(data => {
        // data有值但字段不全、或者直接为空
        if(data?.fields?.processStatus){
          this.reportInfo.processStatus = data.fields.processStatus;
        }else{
          message.error('请求患者信息内无processStatus值，可能会影响部分功能')
        }
        if(data && Object.keys(data).length > 0 && !!data.registraId){ // data === {} 不可信
          this.reportInfo = data;
        }else{
          message.error('请求患者信息内无registraId值，请重试')
          this.getPatData(record) // 可以自己再调用一遍，注意写各count限制请求次数
        }
      })
      .catch(error => {
          message.error('获取患者信息失败:'+error)
      });
  }

async init(record: any) {
  const aaaa= await this.getPatientInfoById(record.id);
  if (!aaaa) { return false; }
  await this.getModalityData();
  const bbbb= await this.getDeptConfig();
  const cccc= await this.getDeptCAConfig(bbbb);
  record.userRole = cccc
  const dddd= await hospitalHttp.getHospitalList('');
  if (!!dddd) {
  }
  await this.getLockReport(record)
}

常规写法：if(data && data.menuData && data.menuData.fields && data.menuData.fields.obj && data.menuData.fields.obj.name){}
?简易写法：if(data.menuData?.fields?.obj?.name){}

   if (Number(this.menuData.patTypeId) === 2) { // 住院病历
     this.visibleEmr = true
   }

   提交审核

• 严谨代码虽然看似多了不少代码量，前端也无法保证接口数据正确与否，但是一旦出问题会
  1、把问题直接抛出不会让使用者后知后觉
  2、方便开发者定位问题
  3、多个请求同步执行时，如果不严格判断数据存在与否，会造成定位bug非常困难

二、组件化开发

• vue框架两大特性：数据驱动、组件化
  组件化的初衷是把一个系统内多地通用的功能抽离，然后进行复用，提高开发速度、方便后续维护
  而不是当需要减少代码量的时候就抽为组件

  
    {{item.name}}
    
  
   // 患者类型
    patTypes: any = [
      { value: '', name: '病人来源' },
      { value: '1', name: '门诊' },
      { value: '2', name: '住院' },
      { value: '3', name: '体检' }
    ];

• 比如科室、模态 ... 等还需要请求接口获取
• 封装示例：