|
|
|
|
@ -3,31 +3,65 @@
|
|
|
|
|
<div class="drugInfo-top">
|
|
|
|
|
<div class="top-left">
|
|
|
|
|
<div class="drug-name">
|
|
|
|
|
<span>{{ pruduct.key }} ：</span>
|
|
|
|
|
<span>{{ pruduct.key }} ：</span>
|
|
|
|
|
<!-- <span class="Name">{{ 暂无 }}</span> -->
|
|
|
|
|
<span class="Name">{{ pruduct.value || '暂无' }}</span>
|
|
|
|
|
<span class="Name">{{ pruduct.value || "暂无" }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="drug-tag">
|
|
|
|
|
<span v-for="item in tags" :key="item.id">{{ item.name }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-button type="primary" plain size="mini" @click="goBack">返回</el-button>
|
|
|
|
|
<el-button type="primary" plain @click="goBack">返回</el-button>
|
|
|
|
|
</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="">
|
|
|
|
|
<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="">
|
|
|
|
|
<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="">
|
|
|
|
|
<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>
|
|
|
|
|
@ -65,96 +99,101 @@
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="drug-exit" :style="drugExitStyle">
|
|
|
|
|
<!-- <router-view></router-view> -->
|
|
|
|
|
<component :is="currentComponent" :transinformation="transinformation" @getCPName="getCPName"></component>
|
|
|
|
|
<component
|
|
|
|
|
:is="currentComponent"
|
|
|
|
|
:transinformation="transinformation"
|
|
|
|
|
@getCPName="getCPName"
|
|
|
|
|
></component>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import basicInfo from "./drugBasicInfo/drugBasicInfo"
|
|
|
|
|
import PZchouyang from "./PZchouyang/PZchouyang"
|
|
|
|
|
import adverseReaction from "./adverseReaction/adverseReaction"
|
|
|
|
|
import basicInfo from "./drugBasicInfo/drugBasicInfo";
|
|
|
|
|
import PZchouyang from "./PZchouyang/PZchouyang";
|
|
|
|
|
import adverseReaction from "./adverseReaction/adverseReaction";
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
row:{},
|
|
|
|
|
tags:[
|
|
|
|
|
row: {},
|
|
|
|
|
tags: [
|
|
|
|
|
{
|
|
|
|
|
id:1,
|
|
|
|
|
name:'百年产品'
|
|
|
|
|
},{
|
|
|
|
|
id:2,
|
|
|
|
|
name:'疗效显著'
|
|
|
|
|
id: 1,
|
|
|
|
|
name: "百年产品",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 2,
|
|
|
|
|
name: "疗效显著",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
action:1,
|
|
|
|
|
currentComponent:'basicInfo',
|
|
|
|
|
drugExitStyle:{
|
|
|
|
|
height:'',
|
|
|
|
|
action: 1,
|
|
|
|
|
currentComponent: "basicInfo",
|
|
|
|
|
drugExitStyle: {
|
|
|
|
|
height: "",
|
|
|
|
|
},
|
|
|
|
|
// isOne:false,
|
|
|
|
|
id:null,
|
|
|
|
|
token:null,
|
|
|
|
|
id: null,
|
|
|
|
|
token: null,
|
|
|
|
|
//产品名称
|
|
|
|
|
pruduct:{
|
|
|
|
|
key:'某某产品',
|
|
|
|
|
value:'-'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
pruduct: {
|
|
|
|
|
key: "某某产品",
|
|
|
|
|
value: "-",
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
components:{
|
|
|
|
|
components: {
|
|
|
|
|
basicInfo,
|
|
|
|
|
PZchouyang,
|
|
|
|
|
adverseReaction
|
|
|
|
|
adverseReaction,
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
methods: {
|
|
|
|
|
//获取名称
|
|
|
|
|
getCPName(e){
|
|
|
|
|
this.pruduct.key = e.key
|
|
|
|
|
this.pruduct.value = e.value
|
|
|
|
|
getCPName(e) {
|
|
|
|
|
this.pruduct.key = e.key;
|
|
|
|
|
this.pruduct.value = e.value;
|
|
|
|
|
},
|
|
|
|
|
goBack(){
|
|
|
|
|
this.$router.go(-1)
|
|
|
|
|
goBack() {
|
|
|
|
|
this.$router.go(-1);
|
|
|
|
|
},
|
|
|
|
|
// tabs切换
|
|
|
|
|
actionTab(id){
|
|
|
|
|
actionTab(id) {
|
|
|
|
|
this.action = id;
|
|
|
|
|
if(id == 1) {
|
|
|
|
|
this.currentComponent = 'basicInfo'
|
|
|
|
|
if (id == 1) {
|
|
|
|
|
this.currentComponent = "basicInfo";
|
|
|
|
|
// this.$router.push({ name:'drugBasicInfo' })
|
|
|
|
|
this.$nextTick(()=>{
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.getHeight();
|
|
|
|
|
})
|
|
|
|
|
} else if(id == 2) {
|
|
|
|
|
this.currentComponent = 'PZchouyang'
|
|
|
|
|
this.$nextTick(()=>{
|
|
|
|
|
});
|
|
|
|
|
} 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(()=>{
|
|
|
|
|
} else if (id == 3) {
|
|
|
|
|
this.currentComponent = "adverseReaction";
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.getHeight();
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
// this.$router.push({ name:'adverseReaction' })
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
getHeight(){
|
|
|
|
|
let dom = document.getElementsByClassName('drug-exit');
|
|
|
|
|
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'
|
|
|
|
|
let relativeHeight = windowHeight - height.top - 10;
|
|
|
|
|
this.drugExitStyle.height = relativeHeight + "px";
|
|
|
|
|
},
|
|
|
|
|
async getVRdgYpwhGxwz(res){
|
|
|
|
|
async getVRdgYpwhGxwz(res) {
|
|
|
|
|
let data = await this.$api.productDetails.vRdgYpwhGxwz(res);
|
|
|
|
|
this.name = data.data.yptymc;
|
|
|
|
|
},
|
|
|
|
|
async ylqxJnyelcp(res){
|
|
|
|
|
let data = await this.$api.productDetails.ylqxJnyelcp(res);
|
|
|
|
|
async ylqxJnyelcp(res) {
|
|
|
|
|
let data = await this.$api.productDetails.ylqxJnyelcp(res);
|
|
|
|
|
this.name = data.data.cpmc;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
// watch: {
|
|
|
|
|
// $route: {
|
|
|
|
|
@ -165,33 +204,33 @@ export default {
|
|
|
|
|
// immediate: true, //第一次就执行
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
computed:{
|
|
|
|
|
transinformation(){
|
|
|
|
|
switch(this.currentComponent) {
|
|
|
|
|
case 'basicInfo':
|
|
|
|
|
computed: {
|
|
|
|
|
transinformation() {
|
|
|
|
|
switch (this.currentComponent) {
|
|
|
|
|
case "basicInfo":
|
|
|
|
|
return {
|
|
|
|
|
b:this.id,
|
|
|
|
|
token:this.token,
|
|
|
|
|
}
|
|
|
|
|
case 'PZchouyang':
|
|
|
|
|
b: this.id,
|
|
|
|
|
token: this.token,
|
|
|
|
|
};
|
|
|
|
|
case "PZchouyang":
|
|
|
|
|
return {
|
|
|
|
|
b:this.id,
|
|
|
|
|
token:this.token,
|
|
|
|
|
}
|
|
|
|
|
case 'adverseReaction':
|
|
|
|
|
b: this.id,
|
|
|
|
|
token: this.token,
|
|
|
|
|
};
|
|
|
|
|
case "adverseReaction":
|
|
|
|
|
return {
|
|
|
|
|
b:this.id,
|
|
|
|
|
token:this.token,
|
|
|
|
|
}
|
|
|
|
|
b: this.id,
|
|
|
|
|
token: this.token,
|
|
|
|
|
};
|
|
|
|
|
default:
|
|
|
|
|
return {
|
|
|
|
|
b:4,
|
|
|
|
|
token:'暂无'
|
|
|
|
|
}
|
|
|
|
|
b: 4,
|
|
|
|
|
token: "暂无",
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
mounted(){
|
|
|
|
|
mounted() {
|
|
|
|
|
// params刷新数据会丢失
|
|
|
|
|
// console.log(this.$route.params)
|
|
|
|
|
// this.row = JSON.parse(this.$route.params.row)
|
|
|
|
|
@ -207,7 +246,6 @@ export default {
|
|
|
|
|
// } else if(paramsLabel == 'qxzczh') {
|
|
|
|
|
// this.ylqxJnyelcp(params[2].split('=')[1]);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// // 判断是用⌈ 返回 ⌋ 还是用⌈ X ⌋ 用来返回上一级
|
|
|
|
|
// if(this.id == '1') {
|
|
|
|
|
// this.goback = true;
|
|
|
|
|
@ -217,22 +255,22 @@ export default {
|
|
|
|
|
// 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);
|
|
|
|
|
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;
|
|
|
|
|
border-bottom: vw(1) solid #edeef0;
|
|
|
|
|
.close {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
@ -248,12 +286,12 @@ export default {
|
|
|
|
|
font-size: vw(18);
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #6A6C6F;
|
|
|
|
|
color: #6a6c6f;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.Name {
|
|
|
|
|
// margin-left: ;
|
|
|
|
|
color: #292F38;
|
|
|
|
|
color: #292f38;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.drug-tag {
|
|
|
|
|
@ -267,19 +305,18 @@ export default {
|
|
|
|
|
margin-right: vw(10);
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
padding: vh(4) vw(13);
|
|
|
|
|
background-color: #66C691;
|
|
|
|
|
background-color: #66c691;
|
|
|
|
|
border-radius: vw(2);
|
|
|
|
|
|
|
|
|
|
&:nth-of-type(2) {
|
|
|
|
|
background-color: #EABB48;
|
|
|
|
|
background-color: #eabb48;
|
|
|
|
|
}
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -290,9 +327,9 @@ export default {
|
|
|
|
|
.tabs {
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
border-bottom: vw(1) solid #DBE0E8;
|
|
|
|
|
border-bottom: vw(1) solid #dbe0e8;
|
|
|
|
|
.tab {
|
|
|
|
|
border: vw(1) solid #DBE0E8;
|
|
|
|
|
border: vw(1) solid #dbe0e8;
|
|
|
|
|
padding: vh(7) vw(22);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
@ -300,7 +337,7 @@ export default {
|
|
|
|
|
margin-right: vw(9);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
&:last-child{
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -321,12 +358,12 @@ export default {
|
|
|
|
|
font-size: vw(16);
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #2F3742;
|
|
|
|
|
color: #2f3742;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.actionTab {
|
|
|
|
|
background-color: #1E80EB;
|
|
|
|
|
|
|
|
|
|
background-color: #1e80eb;
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
@ -340,5 +377,8 @@ export default {
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
::v-deep.pzChouyang .tables .el-table td{
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
