|
|
<template>
|
|
|
<div class="productinformation">
|
|
|
<div class="drugInfo-top">
|
|
|
<div class="top-left">
|
|
|
<div class="drug-name">
|
|
|
<span>药品通用名称：</span>
|
|
|
<!-- <span class="Name">{{ 暂无 }}</span> -->
|
|
|
<span class="Name">暂无</span>
|
|
|
</div>
|
|
|
<div class="drug-tag">
|
|
|
<span v-for="item in tags" :key="item.id">{{ item.name }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<el-button v-if="goback" type="primary" plain size="mini" @click="goBack">返回</el-button>
|
|
|
<i v-else class="el-icon-close close" @click="goBack"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="drugInfo-bottom">
|
|
|
<div class="content-tabs">
|
|
|
<div class="tabs">
|
|
|
<div class="tab" @click="actionTab(1)" :class="action == 1 ? 'actionTab':''">
|
|
|
<img :class="action !== 1 ? 'actionImage' : ''" :src="action == 1 ? `${require('@/assets/images/home/icon1-1@2x.png')}`:`${require('@/assets/images/home/icon1-2@2x.png')}`" alt="">
|
|
|
<span>基本信息</span>
|
|
|
</div>
|
|
|
<div class="tab" @click="actionTab(2)" :class="action == 2 ? 'actionTab':''">
|
|
|
<img :src="action == 2 ? `${require('@/assets/images/home/icon2-1@2x.png')}`:`${require('@/assets/images/home/icon2-2@2x.png')}`" alt="">
|
|
|
<span>品种抽样</span>
|
|
|
</div>
|
|
|
<div class="tab" @click="actionTab(3)" :class="action == 3 ? 'actionTab':''">
|
|
|
<img :src="action == 3 ? `${require('@/assets/images/home/icon5-1@2x.png')}`:`${require('@/assets/images/home/icon5-2@2x.png')}`" alt="">
|
|
|
<span>不良反应</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="drug-input" v-show="action == 2 || action == 3 ">
|
|
|
<div class="inputs">
|
|
|
<div class="rank" v-show="action == 2">
|
|
|
<div class="input--label">抽样级别：</div>
|
|
|
<el-select v-model="value" placeholder="请选择抽样级别">
|
|
|
<el-option
|
|
|
v-for="item in options"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div class="rank" v-show="action == 3">
|
|
|
<div class="input--label">报告编号：</div>
|
|
|
<div>
|
|
|
<el-input v-model="number" placeholder="请输入报告编号"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="number">
|
|
|
<div class="input--label">{{ action == 3 ? '患者姓名：':'抽样编号：' }}</div>
|
|
|
<div>
|
|
|
<el-input v-model="name" :placeholder="action == 3 ? '请输入患者姓名':'请输入抽样编号'"></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="search-btns">
|
|
|
<button class="reset" @click="reset">重置</button>
|
|
|
<button class="inquire" @click="inquire(1)">查询</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="drug-exit" :style="drugExitStyle">
|
|
|
<!-- <router-view></router-view> -->
|
|
|
<component :is="currentComponent" :transinformation="transinformation"></component>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import basicInfo from "./drugBasicInfo/drugBasicInfo"
|
|
|
import PZchouyang from "./PZchouyang/PZchouyang"
|
|
|
import adverseReaction from "./adverseReaction/adverseReaction"
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
row:{},
|
|
|
tags:[
|
|
|
{
|
|
|
id:1,
|
|
|
name:'百年产品'
|
|
|
},{
|
|
|
id:2,
|
|
|
name:'疗效显著'
|
|
|
},
|
|
|
],
|
|
|
options:[
|
|
|
{
|
|
|
value:0,
|
|
|
label:'国抽'
|
|
|
},{
|
|
|
value:1,
|
|
|
label:'省抽'
|
|
|
},
|
|
|
],
|
|
|
value:'',
|
|
|
action:1,
|
|
|
// action == 3 报告编号 ⌈ 输入框绑定的值 ⌋
|
|
|
number:'',
|
|
|
// action == 2抽样编号/action == 3患者姓名 ⌈ 输入框绑定的值 ⌋
|
|
|
name:'',
|
|
|
currentComponent:'basicInfo',
|
|
|
drugExitStyle:{
|
|
|
height:'',
|
|
|
},
|
|
|
// isOne:false,
|
|
|
goback:true,
|
|
|
id:null,
|
|
|
token:null,
|
|
|
}
|
|
|
},
|
|
|
components:{
|
|
|
basicInfo,
|
|
|
PZchouyang,
|
|
|
adverseReaction
|
|
|
},
|
|
|
methods:{
|
|
|
goBack(){
|
|
|
this.$router.go(-1)
|
|
|
},
|
|
|
// tabs切换
|
|
|
actionTab(id){
|
|
|
this.action = id;
|
|
|
if(id == 1) {
|
|
|
this.currentComponent = 'basicInfo'
|
|
|
// this.$router.push({ name:'drugBasicInfo' })
|
|
|
this.$nextTick(()=>{
|
|
|
this.getHeight();
|
|
|
})
|
|
|
} else if(id == 2) {
|
|
|
this.currentComponent = 'PZchouyang'
|
|
|
this.$nextTick(()=>{
|
|
|
this.getHeight();
|
|
|
})
|
|
|
// this.$router.push({ name:'PZchouyang' })
|
|
|
} else if(id == 3) {
|
|
|
this.currentComponent = 'adverseReaction'
|
|
|
this.$nextTick(()=>{
|
|
|
this.getHeight();
|
|
|
})
|
|
|
// this.$router.push({ name:'adverseReaction' })
|
|
|
}
|
|
|
},
|
|
|
inquire(){
|
|
|
// this.isOne = true;
|
|
|
},
|
|
|
reset(){
|
|
|
// this.isOne = false;
|
|
|
},
|
|
|
getHeight(){
|
|
|
let dom = document.getElementsByClassName('drug-exit');
|
|
|
let height = dom[0].getBoundingClientRect();
|
|
|
let windowWidth = window.innerWidth;
|
|
|
let windowHeight = window.innerHeight;
|
|
|
let relativeHeight = windowHeight - height.top - 10
|
|
|
this.drugExitStyle.height = relativeHeight + 'px'
|
|
|
}
|
|
|
},
|
|
|
// watch: {
|
|
|
// $route: {
|
|
|
// handler(to, from) {
|
|
|
// // 药品详情的三个标签页tab高亮切换
|
|
|
// this.action = to.meta.id;
|
|
|
// },
|
|
|
// immediate: true, //第一次就执行
|
|
|
// },
|
|
|
// },
|
|
|
computed:{
|
|
|
transinformation(){
|
|
|
switch(this.currentComponent) {
|
|
|
case 'basicInfo':
|
|
|
return {
|
|
|
b:this.id,
|
|
|
token:this.token,
|
|
|
}
|
|
|
case 'PZchouyang':
|
|
|
return {
|
|
|
b:this.id,
|
|
|
token:this.token,
|
|
|
}
|
|
|
case 'adverseReaction':
|
|
|
return {
|
|
|
b:this.id,
|
|
|
token:this.token,
|
|
|
}
|
|
|
default:
|
|
|
return {
|
|
|
b:4,
|
|
|
token:'暂无'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
mounted(){
|
|
|
// params刷新数据会丢失
|
|
|
// console.log(this.$route.params)
|
|
|
// this.row = JSON.parse(this.$route.params.row)
|
|
|
// this.row = this.$route.params.row;
|
|
|
let search = window.location.search.slice(1);
|
|
|
let params = search.split('&');
|
|
|
if (params[0].includes('b')) {
|
|
|
this.id = params[0].split('=')[1]
|
|
|
this.token = params[1].split('=')[1]
|
|
|
}
|
|
|
if(this.id == '1') {
|
|
|
this.goback = true;
|
|
|
} else {
|
|
|
this.goback = false;
|
|
|
}
|
|
|
this.$nextTick(()=>{
|
|
|
this.getHeight();
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@import "@/assets/styles/utils.scss";
|
|
|
.productinformation {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: rgba(255,255,255,0.9);
|
|
|
box-shadow: 0px 0px vw(12) 0px rgba(194,212,226,0.64);
|
|
|
border-radius: vw(10) vw(10) 0 0;
|
|
|
.drugInfo-top {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
padding: vh(15) vw(25);
|
|
|
border-bottom: vw(1) solid #EDEEF0;
|
|
|
.close {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.top-left {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
.drug-name {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
span {
|
|
|
font-size: vw(18);
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: 400;
|
|
|
color: #6A6C6F;
|
|
|
}
|
|
|
|
|
|
.Name {
|
|
|
// margin-left: ;
|
|
|
color: #292F38;
|
|
|
}
|
|
|
}
|
|
|
.drug-tag {
|
|
|
width: vw(200);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-left: vw(10);
|
|
|
|
|
|
span {
|
|
|
font-size: vw(14);
|
|
|
margin-right: vw(10);
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: 400;
|
|
|
color: #FFFFFF;
|
|
|
padding: vh(4) vw(13);
|
|
|
background-color: #66C691;
|
|
|
border-radius: vw(2);
|
|
|
|
|
|
&:nth-of-type(2) {
|
|
|
background-color: #EABB48;
|
|
|
}
|
|
|
&:last-child {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.drugInfo-bottom {
|
|
|
padding: 0 vw(25);
|
|
|
.content-tabs {
|
|
|
margin-top: vh(25);
|
|
|
.tabs {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
border-bottom: vw(1) solid #DBE0E8;
|
|
|
.tab {
|
|
|
border: vw(1) solid #DBE0E8;
|
|
|
padding: vh(7) vw(22);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
border-bottom: none;
|
|
|
margin-right: vw(9);
|
|
|
cursor: pointer;
|
|
|
|
|
|
&:last-child{
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
|
|
|
img {
|
|
|
width: vw(18);
|
|
|
height: vw(18);
|
|
|
margin-right: vw(3);
|
|
|
}
|
|
|
|
|
|
.actionImage {
|
|
|
padding: vw(1.5);
|
|
|
width: vw(18);
|
|
|
height: vw(18);
|
|
|
margin-right: vw(3);
|
|
|
}
|
|
|
|
|
|
span {
|
|
|
font-size: vw(16);
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: 400;
|
|
|
color: #2F3742;
|
|
|
}
|
|
|
}
|
|
|
.actionTab {
|
|
|
background-color: #1E80EB;
|
|
|
|
|
|
span {
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.drug-input {
|
|
|
background: #F5F9FC;
|
|
|
padding: vh(40) vw(22);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.inputs {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.rank , .number {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.input--label {
|
|
|
font-size: vw(16);
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: 400;
|
|
|
color: #6A6C6F;
|
|
|
}
|
|
|
::v-deep .el-input__inner {
|
|
|
width: vw(386);
|
|
|
height: vw(40);
|
|
|
border-radius: vw(2);
|
|
|
}
|
|
|
::v-deep .el-select__caret::before {
|
|
|
line-height: vw(40);
|
|
|
}
|
|
|
}
|
|
|
.number {
|
|
|
margin-left: vw(39);
|
|
|
}
|
|
|
}
|
|
|
.search-btns {
|
|
|
margin-left: vw(40);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.inquire {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
border: none;
|
|
|
width: vw(64);
|
|
|
height: vh(40);
|
|
|
background: #1e80eb;
|
|
|
border-radius: vw(4);
|
|
|
font-size: vw(16);
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
line-height: vh(50);
|
|
|
margin-left: vw(10);
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.reset {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
width: vw(64);
|
|
|
height: vh(40);
|
|
|
border: vw(1) solid #1e80eb;
|
|
|
border-radius: vw(4);
|
|
|
background-color: #fff;
|
|
|
font-size: vw(16);
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: 400;
|
|
|
color: #1e80eb;
|
|
|
line-height: vh(50);
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.drug-exit {
|
|
|
margin-top: vh(25);
|
|
|
padding-bottom: vw(20);
|
|
|
overflow-y: scroll;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
