<template>
<!-- 随访审核详情 -->
<div class="follow-form">
<!-- <ConfigForms form-type="2" formClass="follow-form"></ConfigForms> -->
<el-container>
<el-aside width="auto">
<div class="follow-tab">
<p class="tab-title">筛查病例数据</p>
<el-tabs tab-position="right" style="height: 200px;" v-model="activeTab">
<el-tab-pane
:label="'第'+ Number(index+1) + '次随访数据'"
v-for="(item,index) in formDataList"
:key="index"
:name="String(index)"
></el-tab-pane>
</el-tabs>
</div>
</el-aside>
<el-main>
<read-form ref="form" :options="followupForm" :formEdit="formEdit"></read-form>
</el-main>
<el-aside width="auto" class="transition-box">
<div class="follow-list">
<ul class="list">
<li v-for="(item, index) in screenList" :key="index">
<div class="time">{{ item.time }}</div>
<div class="time">{{ item.code }}</div>
<div class="time">{{ item.name }}</div>
</li>
</ul>
</div>
</el-aside>
</el-container>
</div>
</template>
<script>
import ConfigForms from "@/views/screening/components/ConfigForms.vue"
import ReadForm from "@/components/FormComponents/ReadForm/index"
export default {
name: "followReview",
components: {
ConfigForms,
ReadForm
},
props: {
tabActive:{
type:String,
},
formDataList: {
type: Array,
},
},
data() {
return {
followupForm:{
column: [],
labelPosition: 'left',
labelSuffix: '：',
labelWidth: 180,
gutter: 0,
menuBtn: true,
submitBtn: true,
submitText: '提交',
emptyBtn: true,
emptyText: '清空',
nextTabBtn: true,
nextTabText: '下一页',
menuPosition: 'center',
group: [
{
label: '第二次随访调查',
prop: '1669858313508_15761',
arrow: true,
collapse: true,
display: true,
labelWidth: 8,
column: [
{
type: 'date',
display: true,
importantField: true,
styles: {},
prop: 'first_follow_time',
label: '随访时间',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd',
dicType: '',
fieldType: 'date',
tableName: '随访计划',
tableCode: 'gas_follow',
tableId: '1597491580053323777',
notFilter: false,
cType: '',
subfield: false,
span: 24,
autoRequired: 0,
personalRequired: 0,
width: 12
},
{
type: 'input',
display: true,
importantField: true,
styles: {},
prop: 'follow_contents', //待改
label: '存活情况',
fieldType: 'text',
tableName: '随访计划',
tableCode: 'gas_follow',
tableId: '1597491580053323777',
notFilter: false,
cType: '',
subfield: false,
autoRequired: 0,
personalRequired: 0,
span: 24,
width: 12
}
]
},
{
label: '是否接受胃镜检查',
prop: '1669860991131_8643',
arrow: true,
collapse: true,
display: true,
labelWidth: 8,
showIndex:true,
column: [{
type: 'radio',
display: true,
importantField: true,
styles: {},
label: '是否接受检查',
prop: 'is_accept',
dicData: [{
label: '是',
value: '1',
id: '1595347527757000705',
parentId: ''
}, {
label: '否',
value: '0',
id: '1595347502595371010',
parentId: ''
}],
dynamicshSet: [{
value: '1',
target: '1669861007378_67152'
}],
dicType: 'd-sf',
props: {
label: 'label',
value: 'value'
},
fieldType: 'tinyint',
fieldLength: '2',
tableName: '胃镜检查',
tableCode: 'gastroscope',
tableId: '1597468524048121858',
notFilter: false,
cType: '',
subfield: false,
autoRequired: 0,
personalRequired: 0,
span: 24,
lg: 24
}]
},
{
label: '胃镜检查结果',
prop: '1669861007378_67152',
arrow: true,
collapse: true,
display: true,
labelWidth: 8,
showIndex:true,
column: [
{
type: 'datetime',
display: true,
importantField: true,
styles: {},
color:"#4B65FF",
label: '检查时间',
prop: 'check_time',
dicData: [{
label: '是',
value: '1',
id: '1595347527757000705',
parentId: ''
}, {
label: '否',
value: '0',
id: '1595347502595371010',
parentId: ''
}],
dynamicshSet: [],
dicOption: 'static',
dicType: '',
props: {
label: 'label',
value: 'value'
},
fieldType: 'datetime',
fieldLength: '',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
tableName: '胃镜检查',
tableCode: 'gastroscope',
tableId: '1597468524048121858',
notFilter: false,
cType: '',
subfield: false,
autoRequired: 0,
personalRequired: 0,
span: 24,
width: 12
},
{
type: 'radio',
display: true,
importantField: true,
styles: {},
prop: 'check_type',
label: '胃镜检查方式',
fieldType: 'int',
fieldLength: '11',
autoRequired: 0,
personalRequired: 0,
dicData: [
{
label: '胃镜普通白光检查',
value: '1',
id: '1597475602204557314',
parentId: ''
}, {
label: '胃镜普通白光检查+LCI检查',
value: '2',
id: '1597475677853024258',
parentId: ''
}, {
label: '磁控胶囊胃镜检查',
value: '3',
id: '1597475763517489154',
parentId: ''
}
],
dynamicshSet: [],
dicType: 'gas_check_type',
props: {
label: 'label',
value: 'value'
},
tableName: '胃镜检查',
tableCode: 'gastroscope',
tableId: '1597468524048121858',
notFilter: false,
cType: '',
subfield: false,
span: 24
},
{
type: 'radio',
display: true,
importantField: true,
styles: {},
autoRequired: 0,
personalRequired: 0,
dicData: [{
label: '未见异常',
value: '1',
id: '1597476184780800001',
parentId: ''
}, {
label: '异常',
value: '2',
id: '1597476229722767361',
parentId: ''
}],
dynamicshSet: [{
value: '2',
target: 'detail_check_type'
}, {
value: '2',
target: 'diagnosis'
}],
dicType: 'check_result',
props: {
label: 'label',
value: 'value'
},
prop: 'check_result',
label: '检查结果',
fieldType: 'tinyint',
fieldLength: '2',
tableName: '胃镜检查',
tableCode: 'gastroscope',
tableId: '1597468524048121858',
notFilter: false,
cType: '',
subfield: false,
span: 24
},
{
type: 'checkbox',
display: true,
importantField: true,
styles: {},
autoRequired: 0,
personalRequired: 0,
dicData: [{
label: 'NBI',
value: '1',
id: '1597476883899973634',
parentId: ''
}, {
label: 'FICE',
value: '2',
id: '1597476919312482306',
parentId: ''
}, {
label: 'I-SC',
value: '3',
id: '1597476961561706498',
parentId: ''
}, {
label: 'BLI',
value: '4',
id: '1597476996303126529',
parentId: ''
}, {
label: '放大内镜',
value: '5',
id: '1597477029488459778',
parentId: ''
}, {
label: '激光共聚焦显微内镜',
value: '6',
id: '1597477062287917057',
parentId: ''
}, {
label: '荧光内镜',
value: '7',
id: '1597477097977249793',
parentId: ''
}, {
label: '化学染色',
value: '8',
id: '1597477133691748353',
parentId: ''
}],
dynamicshSet: [],
dicType: 'gas_detail_check_type',
props: {
label: 'label',
value: 'value'
},
prop: 'detail_check_type',
label: '胃镜精查方式',
fieldType: 'varchar',
fieldLength: '255',
tableName: '胃镜检查',
tableCode: 'gastroscope',
tableId: '1597468524048121858',
notFilter: false,
cType: '',
subfield: false,
span: 24
},
{
type: 'radio',
display: true,
importantField: true,
styles: {},
autoRequired: 0,
personalRequired: 0,
dicData: [{
label: '未见异常',
value: '1',
id: '1597476184780800001',
parentId: ''
}, {
label: '异常',
value: '2',
id: '1597476229722767361',
parentId: ''
}],
dynamicshSet: [{
value: '2',
target: 'esophagus_level'
}, {
value: '2',
target: 'esophagus_position'
}, {
value: '2',
target: 'early_esophagus_cancer'
}, {
value: '2',
target: 'period_esophagus_cancer'
}, {
value: '2',
target: 'is_barret_esophagus'
}, {
value: '2',
target: 'is_back_esophagus'
}, {
value: '2',
target: 'inogm_level'
}, {
value: '2',
target: 'inogm_position'
}, {
value: '2',
target: 'early_gastric_cancer'
}, {
value: '2',
target: 'period_gastric_cancer'
}, {
value: '2',
target: 'atrophic_gastriti'
}, {
value: '2',
target: 'gastric_ulcer'
}, {
value: '2',
target: 'gastric_polyp_type'
}, {
value: '2',
target: 'gastric_polyp'
}, {
value: '2',
target: 'non_atrophic_gastriti'
}, {
value: '2',
target: 'is_duodenal_ulcer'
}, {
value: '2',
target: 'other_pathology'
}],
dicType: 'check_result',
props: {
label: 'label',
value: 'value'
},
prop: 'diagnosis',
label: '最后诊断',
fieldType: 'tinyint',
fieldLength: '4',
tableName: '胃镜检查',
tableCode: 'gastroscope',
tableId: '1597468524048121858',
notFilter: false,
cType: '',
subfield: false,
span: 24
},
]
},
{
label: '实验室检查',
prop: '1669863751318_50013',
arrow: true,
collapse: true,
display: true,
labelWidth: 8,
showIndex:true,
column: [
{
type: 'input',
display: true,
importantField: true,
styles: {},
prop: 'G_17',
label: '胃泌素17',
fieldType: 'varchar',
fieldLength: '255',
tableName: '实验室检查',
tableCode: 'gas_exam',
tableId: '1597466741234040833',
notFilter: false,
cType: '',
subfield: false,
autoRequired: 0,
personalRequired: 0,
span: 24,
width: 12,
unit:"pmol/L",
color:"#5972FF"
},
{
type: 'input',
display: true,
importantField: true,
styles: {},
prop: 'PG_I',
label: '胃蛋白酶原I（PG I）',
fieldType: 'varchar',
fieldLength: '255',
tableName: '实验室检查',
tableCode: 'gas_exam',
tableId: '1597466741234040833',
notFilter: false,
cType: '',
subfield: false,
span: 24,
width: 12
},
{
type: 'input',
display: true,
importantField: true,
styles: {},
prop: 'PG_II',
label: '胃蛋白酶原II（PG II）',
fieldType: 'varchar',
fieldLength: '255',
tableName: '实验室检查',
tableCode: 'gas_exam',
tableId: '1597466741234040833',
notFilter: false,
cType: '',
subfield: false,
span: 24,
width: 12
},
{
type: 'radio',
display: true,
importantField: true,
styles: {},
prop: 'IgG',
label: 'Hp抗体（IgG）检测',
fieldType: 'varchar',
fieldLength: '255',
autoRequired: 0,
personalRequired: 0,
dicData: [{
label: '阴性',
value: '1',
id: '1598150963816923138',
parentId: ''
}, {
label: '阳性',
value: '2',
id: '1598150992287858689',
parentId: ''
}],
dynamicshSet: [],
dicType: 'hp_antibody',
props: {
label: 'label',
value: 'value'
},
tableName: '实验室检查',
tableCode: 'gas_exam',
tableId: '1597466741234040833',
notFilter: false,
cType: '',
subfield: false,
span: 24
},
{
type: 'input',
display: true,
importantField: true,
styles: {},
prop: 'img_path',
label: '图片资料',
fieldType: 'varchar',
fieldLength: '255',
tableName: '实验室检查',
tableCode: 'gas_exam',
tableId: '1597466741234040833',
notFilter: false,
cType: '',
subfield: false,
span: 24,
width: 12
}
]
},
{
label: '风险评估',
prop: '1669864316349_49130',
arrow: true,
collapse: true,
display: true,
labelWidth: 8,
showIndex:true,
column: [
{
type: 'input',
display: true,
importantField: true,
styles: {},
autoRequired: 0,
personalRequired: 0,
prop: 'risk_score',
label: '风险评分',
fieldType: 'varchar',
fieldLength: '255',
tableName: '风险评估',
tableCode: 'gas_risk_assessment',
tableId: '1598151898370768898',
notFilter: false,
cType: '',
subfield: false,
span: 24,
width: 12
},
{
type: 'input',
display: true,
importantField: true,
styles: {},
prop: 'risk_rank',
label: '风险等级',
fieldType: 'varchar',
fieldLength: '20',
tableName: '风险评估',
tableCode: 'gas_risk_assessment',
tableId: '1598151898370768898',
notFilter: false,
cType: '',
subfield: false,
span: 24,
width: 12
},
]
},
{
label: '第一次随访计划',
prop: '1669858313508_15760',
arrow: true,
collapse: true,
display: true,
labelWidth: 8,
column: [
{
type: 'radio',
display: true,
importantField: true,
styles: {},
prop: 'is_continue_follow',
label: '是否随访',
dicData: [{
label: '是',
value: '1',
id: '1595347527757000705',
parentId: ''
}, {
label: '否',
value: '0',
id: '1595347502595371010',
parentId: ''
}],
dynamicshSet: [],
dicType: 'd-sf',
props: {
label: 'label',
value: 'value'
},
fieldType: 'tinyint',
fieldLength: '2',
tableName: '随访计划',
tableCode: 'gas_follow',
tableId: '1597491580053323777',
notFilter: false,
cType: '',
subfield: false,
value: '1',
span: 24,
autoRequired: 0,
personalRequired: 0
},
{
type: 'date',
display: true,
importantField: true,
styles: {},
prop: 'first_follow_time',
label: '随访时间',
format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd',
dicType: '',
fieldType: 'date',
tableName: '随访计划',
tableCode: 'gas_follow',
tableId: '1597491580053323777',
notFilter: false,
cType: '',
subfield: false,
span: 12,
autoRequired: 0,
personalRequired: 0,
width: 12
},
{
type: 'input',
display: true,
importantField: true,
styles: {},
prop: 'follow_contents',
label: '随访内容',
fieldType: 'text',
tableName: '随访计划',
tableCode: 'gas_follow',
tableId: '1597491580053323777',
notFilter: false,
cType: '',
subfield: false,
autoRequired: 0,
personalRequired: 0,
span: 12,
width: 12
}
]
},
]
},
// formEdit:{
// },
activeTab:'0',
screenList: [
{
time: "2020-12-12 11:11:11",
code: "UK102",
name: "修改第一次随访计划",
},
],
}
},
watch:{
tabActive(val){
this.activeTab = val
}
},
computed:{
//当前随访数据
formEdit:{
get(){
return this.formDataList[this.activeTab]
},
set(){
}
}
},
created() {
},
mounted(){
this.formEdit = this.formDataList[this.activeTab]
},
methods: {},
}
</script>
<style lang="scss" scoped>
::v-deep {
.el-tabs--card > .el-tabs__header {
width: calc(100% - 100px);
border-bottom: none;
}
.el-tabs--card > .el-tabs__header .el-tabs__nav {
border: none;
}
.el-tabs--card > .el-tabs__header .el-tabs__item {
min-width: 116px;
text-align: center;
background: #f0f1fa;
font-size: 14px;
border: none;
}
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
background: #4e68ff;
color: #fff;
}
.el-main {
padding: 0px 20px;
}
.el-aside {
padding-bottom: 20px;
}
}
.follow-tab {
::v-deep {
border-radius: 4px;
border: 1px solid #cccccc;
height: 100%;
.el-tabs__header {
margin-left: 0px;
}
.el-tabs__nav-wrap.is-right::after {
width: 0px;
}
.el-tabs__active-bar.is-right {
width: 3px;
height: 52px !important;
}
.el-tabs--right {
height: auto !important;
}
.tab-title {
padding: 16px;
background: #fafafa;
color: #333333;
border-bottom: 1px solid #cccccc;
}
.el-tabs__item {
padding: 16px;
width: 180px;
background: #fafafa;
height: auto;
line-height: inherit;
border-bottom: 1px solid #cccccc;
transition: all 1s;
}
.el-tabs__item.is-active {
background: transparent;
}
}
}
.follow-list {
border-radius: 4px;
border: 1px solid #cccccc;
height: 100%;
background: #fafafa;
li {
padding: 16px;
border-bottom: 1px solid #ccc;
// cursor: pointer;
.time {
font-size: 14px;
margin-bottom: 8px;
font-family: AlibabaPuHuiTiR;
text-align: left;
&:first-child {
color: #4e68ff;
}
}
}
}
.follow-form {
::v-deep {
.el-collapse-item__header {
// border-width: 0px 0px 0px;
border: none !important;
}
.row24 {
border-top: 1px solid #cccccc;
}
.custom-form-item {
border-width: 1px 0px 0px;
}
.el-collapse-item {
margin-bottom: 20px;
border-radius: 4px;
overflow: hidden;
border: 1px solid #cccccc;
}
.el-collapse-item:not(:last-child) {
}
.el-collapse-item__wrap {
border: none;
}
// .row24.el-col-lg-12:nth-child(2n) {
// border-width: 0px 0px 0px 1px;
// }
.el-form-item {
padding: 0px;
}
}
}
</style>