After Width: | Height: | Size: 3.8 KiB |
After Width: | Height: | Size: 5.7 KiB |
After Width: | Height: | Size: 4.5 KiB |
After Width: | Height: | Size: 4.6 KiB |
After Width: | Height: | Size: 4.7 KiB |
After Width: | Height: | Size: 3.6 KiB |
After Width: | Height: | Size: 4.4 KiB |
After Width: | Height: | Size: 5.0 KiB |
After Width: | Height: | Size: 3.7 KiB |
After Width: | Height: | Size: 5.4 KiB |
After Width: | Height: | Size: 4.7 KiB |
After Width: | Height: | Size: 5.3 KiB |
After Width: | Height: | Size: 5.2 KiB |
After Width: | Height: | Size: 3.8 KiB |
After Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 2.4 MiB |
@ -0,0 +1,267 @@ |
|||||
|
<template> |
||||
|
<div class="sys-menu-container"> |
||||
|
<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="900px"> |
||||
|
<template #header> |
||||
|
<div style="color: #fff"> |
||||
|
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon> |
||||
|
<span> {{ props.title }} </span> |
||||
|
</div> |
||||
|
</template> |
||||
|
<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto"> |
||||
|
<el-row :gutter="5"> |
||||
|
<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20"> |
||||
|
<el-form-item label="检测码" prop="barcode" :rules="[{ required: true, message: '检测码不能为空', trigger: 'blur' }]"> |
||||
|
<el-input v-model="state.ruleForm.barcode" placeholder="检测码" clearable /> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20"> |
||||
|
<el-form-item label="样本类型" prop="sampleType" :rules="[{ required: true, message: '样本类型不能为空', trigger: 'blur' }]"> |
||||
|
<el-input v-model="state.ruleForm.sampleType" placeholder="样本类型" clearable /> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20"> |
||||
|
<el-form-item label="检测项目" prop="testingType" :rules="[{ required: true, message: '检测项目不能为空', trigger: 'blur' }]"> |
||||
|
<el-input v-model="state.ruleForm.testingType" placeholder="检测项目" clearable /> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20"> |
||||
|
<el-form-item label="检测技术" prop="testingMethod" :rules="[{ required: true, message: '检测技术不能为空', trigger: 'blur' }]"> |
||||
|
<el-input v-model="state.ruleForm.testingMethod" placeholder="检测技术" clearable /> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20"> |
||||
|
<el-form-item label="送检日期" prop="submissionTime" :rules="[{ required: true, message: '送检日期不能为空', trigger: 'blur' }]"> |
||||
|
<el-date-picker |
||||
|
v-model="state.ruleForm.submissionTime" |
||||
|
type="date" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20"> |
||||
|
<el-form-item label="报告日期" prop="reportTime" :rules="[{ required: true, message: '报告日期不能为空', trigger: 'blur' }]"> |
||||
|
<el-date-picker |
||||
|
v-model="state.ruleForm.reportTime" |
||||
|
type="date" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20"> |
||||
|
<el-form-item label="样本采集"> |
||||
|
<el-radio-group v-model="state.ruleForm.sampleQuality"> |
||||
|
<el-radio :value="true">合格</el-radio> |
||||
|
<el-radio :value="false">不合格</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20"> |
||||
|
<el-form-item label="DNA 抽提"> |
||||
|
<el-radio-group v-model="state.ruleForm.dnaExtraction"> |
||||
|
<el-radio :value="true">合格</el-radio> |
||||
|
<el-radio :value="false">不合格</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20"> |
||||
|
<el-form-item label="PCR"> |
||||
|
<el-radio-group v-model="state.ruleForm.pcr"> |
||||
|
<el-radio :value="true">合格</el-radio> |
||||
|
<el-radio :value="false">不合格</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20"> |
||||
|
<el-form-item label="飞行时间质谱"> |
||||
|
<el-radio-group v-model="state.ruleForm.tofMs"> |
||||
|
<el-radio :value="true">合格</el-radio> |
||||
|
<el-radio :value="false">不合格</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20"> |
||||
|
<el-form-item label="基因分型分析"> |
||||
|
<el-radio-group v-model="state.ruleForm.genotypingAnalysis"> |
||||
|
<el-radio :value="true">合格</el-radio> |
||||
|
<el-radio :value="false">不合格</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20"> |
||||
|
<el-form-item label="评估遗传风险"> |
||||
|
<el-radio-group v-model="state.ruleForm.geneticRiskAssessment"> |
||||
|
<el-radio :value="true">合格</el-radio> |
||||
|
<el-radio :value="false">不合格</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20" style="margin-bottom:0 !important"> |
||||
|
<el-form-item label="基因检测报告"> |
||||
|
<el-radio-group v-model="state.ruleForm.report"> |
||||
|
<el-radio :value="true">合格</el-radio> |
||||
|
<el-radio :value="false">不合格</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row :gutter="35" v-for="(item, i) in state.ruleForm.tumors" :key="i"> |
||||
|
<el-divider border-style="dashed" content-position="center"> |
||||
|
<!-- <div style="color: #b1b3b8">类型{{ i }}</div> --> |
||||
|
</el-divider> |
||||
|
<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20"> |
||||
|
<el-form-item label="检测类型" :prop="'tumors.'+i+'.tumorId'" :rules="[{ required: true, message: '检测类型不能为空', trigger: 'blur' }]"> |
||||
|
<el-select v-model="item.code" placeholder="检测类型" collapse-tags collapse-tags-tooltip class="w100" @change="cancerChange(i)"> |
||||
|
<el-option v-for="cancer in state.cancerList" :key="cancer.id" :label="cancer.value" :value="cancer.code" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20"> |
||||
|
<el-form-item label="遗传风险值" :prop="'tumors.'+i+'.riskScore'" :rules="[{ required: true, message: '遗传风险值不能为空', trigger: 'blur' }]"> |
||||
|
<el-input-number v-model="item.riskScore" placeholder="遗传风险值" class="w100" clearable /> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8" class="mb20" v-for="lo in item.loci" :key="lo.value"> |
||||
|
<el-form-item :label="lo.label"> |
||||
|
<el-select v-model="lo.riskId" :placeholder="lo.label" collapse-tags collapse-tags-tooltip class="w100"> |
||||
|
<el-option v-for="cld in lo.children" :key="cld.id" :label="cld.label" :value="cld.value" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<div><el-button type="primary" @click="state.ruleForm.tumors.push({})">新增检测类型</el-button></div> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<span class="dialog-footer"> |
||||
|
<el-button @click="cancel">取 消</el-button> |
||||
|
<el-button type="primary" @click="submit">确 定</el-button> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup name="editGenetic"> |
||||
|
import { onMounted, reactive, ref } from 'vue'; |
||||
|
import { addGeneReport, getTumor } from '/@/api/api'; |
||||
|
// import { Plus } from '@element-plus/icons-vue' |
||||
|
import { Local } from '/@/utils/storage'; |
||||
|
import { getAPI } from '/@/utils/axios-utils'; |
||||
|
import { SysDictDataApi } from '/@/api-services/api'; |
||||
|
// import { fa } from 'element-plus/es/locale'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
title: String, |
||||
|
}); |
||||
|
const emits = defineEmits(['handleQuery']); |
||||
|
const ruleFormRef = ref(); |
||||
|
const state = reactive({ |
||||
|
isShowDialog: false, |
||||
|
dialogUploadVisible: false, |
||||
|
ruleForm: { |
||||
|
tumors: [] |
||||
|
} as any, |
||||
|
tumorObj: {}, |
||||
|
cancerList: [], |
||||
|
token: Local.get('access-token') |
||||
|
}); |
||||
|
|
||||
|
onMounted(async ()=>{ |
||||
|
let resDicData = await getAPI(SysDictDataApi).apiSysDictDataDataListCodeGet('cancer'); |
||||
|
state.cancerList = resDicData.data.result; |
||||
|
}) |
||||
|
|
||||
|
// 打开弹窗 |
||||
|
const openDialog = (row: any) => { |
||||
|
// state.ruleForm = JSON.parse(JSON.stringify(row)); |
||||
|
state.ruleForm = { |
||||
|
customerId: row.id, |
||||
|
testingMethod: '飞行时间质谱', |
||||
|
sampleType: '口腔黏膜细胞', |
||||
|
testingType: (row.isMale?'女':'男') + '性肿瘤十项', |
||||
|
sampleQuality: true, |
||||
|
dnaExtraction: true, |
||||
|
pcr: true, |
||||
|
tofMs: true, |
||||
|
genotypingAnalysis: true, |
||||
|
geneticRiskAssessment: true, |
||||
|
report: true, |
||||
|
tumors: [{}] |
||||
|
}; |
||||
|
state.ruleForm.customerId = row.id; |
||||
|
state.isShowDialog = true; |
||||
|
ruleFormRef.value?.resetFields(); |
||||
|
}; |
||||
|
// 关闭弹窗 |
||||
|
const closeDialog = () => { |
||||
|
emits('handleQuery'); |
||||
|
state.isShowDialog = false; |
||||
|
}; |
||||
|
// 取消 |
||||
|
const cancel = () => { |
||||
|
state.isShowDialog = false; |
||||
|
}; |
||||
|
const cancerChange = async (i) => { |
||||
|
let item = state.ruleForm.tumors[i] |
||||
|
item.loci = []; |
||||
|
let res = await getTumor(item.code) |
||||
|
item.tumorId = res.data?.result?.id; |
||||
|
res.data?.result?.geneLoci.map(g => { |
||||
|
let types = []; |
||||
|
g.types.map(type => { |
||||
|
types.push({ |
||||
|
label: type.genekType, |
||||
|
value: type.id, |
||||
|
}) |
||||
|
}); |
||||
|
item.loci.push({ |
||||
|
label: g.name+'-'+g.position, |
||||
|
locusId: g.id, |
||||
|
children: types |
||||
|
}) |
||||
|
}); |
||||
|
console.log(999, state.ruleForm); |
||||
|
// state.tumorObj[val] = res.data?.result?.geneLoci || null; |
||||
|
}; |
||||
|
|
||||
|
const getRiskLevel = (item) => { |
||||
|
let averageRiskScore = state.cancerList.find(_ => _.code == item.code); |
||||
|
// item.averageRiskScore = averageRiskScore?.extData - 0; |
||||
|
const val = item.riskScore/averageRiskScore?.extData; |
||||
|
if (val >= 5) { |
||||
|
return 7 |
||||
|
} else if (val>=2) { |
||||
|
return 6 |
||||
|
} else if (val>=1.1){ |
||||
|
return 5 |
||||
|
} else if (val >=0.9) { |
||||
|
return 4 |
||||
|
} else if (val >= 0.5) { |
||||
|
return 3 |
||||
|
} else if (val >= 0.2) { |
||||
|
return 2 |
||||
|
} else { |
||||
|
return 1 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 提交 |
||||
|
const submit = () => { |
||||
|
ruleFormRef.value.validate(async (valid: boolean) => { |
||||
|
if (!valid) return; |
||||
|
state.ruleForm.tumors.map(item => { |
||||
|
item.riskLevel = getRiskLevel(item); |
||||
|
}) |
||||
|
await addGeneReport(state.ruleForm); |
||||
|
|
||||
|
closeDialog(); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 导出对象 |
||||
|
defineExpose({ openDialog }); |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.avatar-uploader .avatar { |
||||
|
width: 178px; |
||||
|
height: 178px; |
||||
|
display: block; |
||||
|
} |
||||
|
</style> |