|
|
<template>
|
|
|
<div>
|
|
|
<!-- <el-dialog
|
|
|
title="提示"
|
|
|
:visible.sync="dialogVisible"
|
|
|
width="75%"
|
|
|
:close-on-click-modal="true"
|
|
|
:destroy-on-close="true"
|
|
|
:append-to-body="true"
|
|
|
>
|
|
|
<div slot="title" class="headerText">详情</div> -->
|
|
|
<div class="content-tabs">
|
|
|
<div class="tabs">
|
|
|
<div class="tab" v-for="(item, index) in options" :key="index" @click="actionTab(index)"
|
|
|
:class="action == index ? 'actionTab' : ''">
|
|
|
{{ item }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div v-if="action == 0">
|
|
|
<div class="mar">
|
|
|
<headerTitle header="国家药品抽检信息"></headerTitle>
|
|
|
</div>
|
|
|
<descriptions :descriptionsList="list1"></descriptions>
|
|
|
</div>
|
|
|
<div v-if="action == 1">
|
|
|
<div class="mar">
|
|
|
<headerTitle header="检验项目信息"></headerTitle>
|
|
|
</div>
|
|
|
<el-table v-loading="loading" :data="tableList" border :stripe="false">
|
|
|
<el-table-column type="index" label="序号" width="50" />
|
|
|
<el-table-column label="检验大类" prop="name" />
|
|
|
<el-table-column label="检验项目" prop="type"> </el-table-column>
|
|
|
|
|
|
<el-table-column label="标准规定" prop="num" />
|
|
|
<el-table-column label="检验结果" prop="enterpriseName">
|
|
|
</el-table-column>
|
|
|
<el-table-column label="检验结论" prop="num" />
|
|
|
<el-table-column label="检验依据" prop="enterpriseName">
|
|
|
</el-table-column>
|
|
|
<el-table-column label="检验序号" prop="num" />
|
|
|
<el-table-column label="报告类别" prop="enterpriseName">
|
|
|
</el-table-column>
|
|
|
<el-table-column label="抽样编号" prop="enterpriseName">
|
|
|
</el-table-column>
|
|
|
<el-table-column label="药品通用名" prop="enterpriseName">
|
|
|
</el-table-column>
|
|
|
<el-table-column label="编辑时间" prop="enterpriseName">
|
|
|
</el-table-column>
|
|
|
<el-table-column label="更新时间" prop="enterpriseName">
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<div class="pagination">
|
|
|
<span class="custom">共100条，显示1条</span>
|
|
|
<el-pagination background @current-change="currentChange" @size-change="sizeChange" :page-sizes="[10, 5]"
|
|
|
layout=" prev, pager, next, sizes, jumper" :total="querydata.total">
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- </el-dialog> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import headerTitle from "@/views/firmContent/components/headerTitle";
|
|
|
import descriptions from "@/views/components/descriptions.vue";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
dialogVisible: false,
|
|
|
action: 0,
|
|
|
options: ["基本信息", "检验项目"],
|
|
|
loading: false,
|
|
|
tableList: [
|
|
|
{
|
|
|
name: "辽宁护肤霜",
|
|
|
type: "化妆品",
|
|
|
num: "1231231231231",
|
|
|
enterpriseName: "xxxx有限公司",
|
|
|
},
|
|
|
{
|
|
|
name: "辽宁护肤霜",
|
|
|
type: "药品",
|
|
|
num: "1231231231231",
|
|
|
enterpriseName: "xxxx有限公司",
|
|
|
},
|
|
|
{
|
|
|
name: "辽宁护肤霜",
|
|
|
type: "医疗器械",
|
|
|
num: "1231231231231",
|
|
|
enterpriseName: "xxxx有限公司",
|
|
|
},
|
|
|
{
|
|
|
name: "辽宁护肤霜",
|
|
|
type: "化妆品",
|
|
|
num: "1231231231231",
|
|
|
enterpriseName: "xxxx有限公司",
|
|
|
},
|
|
|
{
|
|
|
name: "辽宁护肤霜",
|
|
|
type: "医疗器械",
|
|
|
num: "1231231231231",
|
|
|
enterpriseName: "xxxx有限公司",
|
|
|
},
|
|
|
{
|
|
|
name: "辽宁护肤霜",
|
|
|
type: "化妆品",
|
|
|
num: "1231231231231",
|
|
|
enterpriseName: "xxxx有限公司",
|
|
|
},
|
|
|
{
|
|
|
name: "辽宁护肤霜",
|
|
|
type: "医疗器械",
|
|
|
num: "1231231231231",
|
|
|
enterpriseName: "xxxx有限公司",
|
|
|
},
|
|
|
{
|
|
|
name: "辽宁护肤霜",
|
|
|
type: "化妆品",
|
|
|
num: "1231231231231",
|
|
|
enterpriseName: "xxxx有限公司",
|
|
|
},
|
|
|
{
|
|
|
name: "辽宁护肤霜",
|
|
|
type: "医疗器械",
|
|
|
num: "1231231231231",
|
|
|
enterpriseName: "xxxx有限公司",
|
|
|
},
|
|
|
{
|
|
|
name: "辽宁护肤霜",
|
|
|
type: "化妆品",
|
|
|
num: "1231231231231",
|
|
|
enterpriseName: "xxxx有限公司",
|
|
|
},
|
|
|
],
|
|
|
querydata: {
|
|
|
total: 11,
|
|
|
},
|
|
|
list1: [
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "药品通用名称",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "药品商品名称",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "药品批准文号",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "药品类别",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "药品上市许可持有人",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "药品上市许可持有人统一社会信用代码",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "药品上市许可持有人地址",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "药品上市持有人所在省份",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "剂型",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "制剂规格",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "包装规格",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "抽样编号",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "抽样数量",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "有效期",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "来源",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "抽样环节",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "批号",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "有效期截至日期",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "被抽样单位统一社会信用代码",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "被抽样单位名称",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "被抽样单位地址",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "抽样地点性质",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "抽样单位名称全称",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "抽样单位所在省份",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "药品单价",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "药品总价",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "生产日期",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "样品存放现场温度",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "样品存放现场湿度",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "抽样日期",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "抽样级别",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "抽样单位经手人",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "承检机构",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "生产企业是否否认生产",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "基本药物 ",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "抽样任务",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "最终检验结论",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "检验证书编号",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "报告签发日期",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "复检结论",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "复检检验依据",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "复检报告书编号",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "复检报告签发日期",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "收样或退样日期",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "原检结论",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "补充检验结果",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "计划ID",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "计划名称",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "编辑时间",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
{
|
|
|
span: 1,
|
|
|
label: "更新时间",
|
|
|
value: "",
|
|
|
data: "",
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
components: {
|
|
|
descriptions,
|
|
|
headerTitle,
|
|
|
},
|
|
|
methods: {
|
|
|
open() {
|
|
|
this.dialogVisible = true;
|
|
|
},
|
|
|
actionTab(e) {
|
|
|
this.action = e;
|
|
|
},
|
|
|
currentChange() { },
|
|
|
sizeChange() { },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
::v-deep .el-dialog__header {
|
|
|
background: #f8f9fa;
|
|
|
}
|
|
|
|
|
|
.headerText {
|
|
|
color: #333333;
|
|
|
}
|
|
|
|
|
|
.header--title {
|
|
|
margin: 15px 0;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
.title--left {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
.line {
|
|
|
width: 4px;
|
|
|
height: 16px;
|
|
|
background: #1e80eb;
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
font-size: vb(18);
|
|
|
font-weight: bold;
|
|
|
color: #1e80eb;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.mar {
|
|
|
margin: 10px 0;
|
|
|
}
|
|
|
|
|
|
::v-deep .el-descriptions-row>th {
|
|
|
width: 18%;
|
|
|
background: #f5f7fa;
|
|
|
color: #292f38;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
::v-deep .el-descriptions-row>td {
|
|
|
width: 32%;
|
|
|
}
|
|
|
|
|
|
::v-deep .el-dialog:not(.is-fullscreen) {
|
|
|
margin-bottom: 1vh !important;
|
|
|
}
|
|
|
|
|
|
.content-tabs {
|
|
|
.tabs {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
border-bottom: 1px solid #dbe0e8;
|
|
|
|
|
|
.tab {
|
|
|
border: 1px solid #dbe0e8;
|
|
|
background: #f8f9f9;
|
|
|
color: #292f38;
|
|
|
padding: 7px 18px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
border-bottom: none;
|
|
|
margin-right: 7px;
|
|
|
cursor: pointer;
|
|
|
|
|
|
&:last-child {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.actionTab {
|
|
|
background-color: #1e80eb;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.pagination {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
padding-top: 20px;
|
|
|
}
|
|
|
</style> |
