一：逻辑校验 （避免上线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
}
<a-checkbox v-if="activeType.toString() === '1'" :checked="importRdcIsContune">提交审核</a-checkbox>
- 严谨代码虽然看似多了不少代码量，前端也无法保证接口数据正确与否，但是一旦出问题会
1、把问题直接抛出不会让使用者后知后觉
2、方便开发者定位问题
3、多个请求同步执行时，如果不严格判断数据存在与否，会造成定位bug非常困难
二、组件化开发
- vue框架两大特性：数据驱动、组件化
组件化的初衷是把一个系统内多地通用的功能抽离，然后进行复用，提高开发速度、方便后续维护
而不是当需要减少代码量的时候就抽为组件
<a-select v-model="patTypeId" placeholder="选择类型" >
<a-select-option v-for="item in patTypes" :key="item.value" :value="item.value">{{item.name}}
</a-select-option>
</a-select>
// 患者类型
patTypes: any = [
{ value: '', name: '病人来源' },
{ value: '1', name: '门诊' },
{ value: '2', name: '住院' },
{ value: '3', name: '体检' }
];
- 比如科室、模态 ... 等还需要请求接口获取
- 封装示例：
<template>
<el-select
v-model='s_value'
multiple
filterable
remote
placeholder='请选择科室'
@change="$emit('change')"
:loading='loading'>
<el-option
v-for='item in list'
:key='item.value'
:label='item.label'
:value='item.value'>
</el-option>
</el-select>
</template>
<script>
import { getDeptData } from "@/api/index";
export default {
data() {
return {
loading: false,
list: [],
}
},
props:{
value:{ type:Array,default: ()=>[],required:true}, // v-model 双向绑定
hosid:{ type:String,default: '',required:true}
},
computed: {
s_value: { // v-model 双向绑定
get() {
return [...this.value]
},
set(val) {
this.$emit('input', [...val])
}
}
},
mounted() {
this.loading = true
let query = {
hosid:this.hosid
}
getDeptData(query)
.then((res)={
if(res && res.length){
this.list = list
}else{
this.$message.warning('获取科室数据失败')
}
}).catch((err)={
this.$message.warning('获取科室数据失败'+err)
}).finally(()=>{
this.loading = false
})
}
}
使用时：
import elPacsDeptSelect from '@/components/elPacsDeptSelect.vue';
<el-pacs-deptSelect v-model="patTypeId" placeholder="选择科室" @change=""/>
- 日常开发中可复用的，以pacs为例：科室、模态、患者类型、部位树、表格、右键菜单...
组件化：重复性工作一劳永逸、方便维护
近期pacs的编辑器、滚动加载表格、右键菜单 会封装为公用组件。之前功能找机会慢慢替换
公用方法抽离：
/**
* 防抖函数
* @param fn
* @param time
*/
export function debounce(fn, time = 50) {
let timer = null
return function(...args) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args)
}, time)
}
}
export function checkNull (str) {
if (str === null) {
return true
}
if (str == "") {
return true
}
if (str == "undefined") {
return true
}
var regu = "^[ ]+$"
var re = new RegExp(regu)
return re.test(str)
}
// main.js
import { checkNull, debounce } from '@/util/util.js'
Vue.prototype.$checkNull = checkNull
Vue.prototype.$debounce = debounce
// 使用：
if(!this.$checkNull(val)){ }
searchItem:this.$debounce(function(val) {
// 业务逻辑
},200)
三、页面样式、操作逻辑、功能排版保持严谨
问题：领导评审的时候看的是什么？
问题：客户重复性工作用户体验来源于什么？
image.png
要求提测代码时不该滚动的区域不滚动、该对齐的对齐...，不遵循的话可能会不允许你提测~~///(^v^)\~~
vue中监听dom尺寸变化库推荐：
element-resize-detector : https://www.npmjs.com/package/element-resize-detector
四、数据计算不可在前端出错
- 统一使用 decimal.js: https://www.npmjs.com/package/decimal.js
import Decimal from 'decimal.js';
togglePrice = new Decimal(togglePrice).add(new Decimal(data.amount))
// 经典的0.1 +0.2 = 0.3
0.3 - 0.1 // 0.19999999999999998
x = new Decimal(0.3)
x.minus(0.1) // '0.2'
x // '0.3'
五、代码分支、提交规范
写法示例：
[feat] 报告列表、就诊列表、登记列表新增锁定标识、解锁弹窗功能
[update] 审核报告提示信息优化
[fix] pacs登记列表刷新页面后报获取列表配置失败提示修复
- 目前执行情况略差
六、库的使用
- 特别是UI组件库不要乱用，实在想用先看看gitlab上的start数量，因为不成熟没有经过大量用户验证的库，维护和扩展性比较差，一旦用了中后期进退两难
- 推荐只使用element-ui和纯手写
七、对自己的产出负责、多自测
image.png
- 开发环境、测试环境都要测试，避免出现改了bug造了新bug的情况
七、写好备注、一个方法代码函数严格控制不超过150行
- 利于后续修改维护、减少在不了解业务的前提下，改一处bug新增一处bug
