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> |