<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: 18px;
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>