From d72dc2c4dc7eacf8ce42efc9a0abd82b6763c0ee Mon Sep 17 00:00:00 2001
From: dhy1725534722 <1725534722@qq.com>
Date: Tue, 1 Aug 2023 21:13:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=B9=E5=87=BA=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/permission.js                             |   1 +
 src/router/index.js                           |   7 +
 src/views/cosmeticsFile/detail.vue            |  59 +++
 src/views/cosmeticsFile/drugDetail.vue        | 447 +++++++++++++++++
 src/views/cosmeticsFile/drugProvince.vue      | 397 +++++++++++++++
 src/views/cosmeticsFile/medical.vue           | 450 ++++++++++++++++++
 src/views/cosmeticsFile/samplingDetail.vue    | 415 ++++++++++++++++
 .../components/cosmeticsArchives.vue          | 403 +++++++++++++++-
 8 files changed, 2176 insertions(+), 3 deletions(-)
 create mode 100644 src/views/cosmeticsFile/detail.vue
 create mode 100644 src/views/cosmeticsFile/drugDetail.vue
 create mode 100644 src/views/cosmeticsFile/drugProvince.vue
 create mode 100644 src/views/cosmeticsFile/medical.vue
 create mode 100644 src/views/cosmeticsFile/samplingDetail.vue

diff --git a/src/permission.js b/src/permission.js
index ab778d1..e5267d9 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -27,6 +27,7 @@ const whiteList = [
   '/productsMsg/drugArchives',
   '/productsMsg/cosmeticsArchives',
   '/productsMsg/health',
+  '/productsMsg/cosmeticsDetail',
   '/B/logout'
 ];
 router.beforeEach((to, from, next) => {
diff --git a/src/router/index.js b/src/router/index.js
index 6098fd8..e1b4279 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -126,6 +126,13 @@ export const constantRoutes = [
         component: () => import("@/views/productsMsg/components/cosmeticsArchives.vue"),
         meta: { title: "化妆品档案", icon: "netWork" },
       },
+      {
+        path: "cosmeticsDetail",
+        name: "化妆品详情",
+        icon: require("@/assets/images/tree4.svg"),
+        component: () => import("@/views/cosmeticsFile/detail.vue"),
+        meta: { title: "化妆品详情", icon: "netWork" },
+      },
       {
         path: "health",
         name: "医疗器械档案",
diff --git a/src/views/cosmeticsFile/detail.vue b/src/views/cosmeticsFile/detail.vue
new file mode 100644
index 0000000..828d769
--- /dev/null
+++ b/src/views/cosmeticsFile/detail.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="container">
+    <div class="headerText">
+      <span>药品通用名称 : </span>
+      <span class="header-name">健母宝经典修护精华液</span>
+      <button class="headerBtn c1">百年产品</button>
+      <button class="headerBtn c2">进口化妆品</button>
+    </div>
+    <div class="section-main">
+      <div></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  components: {},
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.container {
+  background: #fff;
+}
+.headerText {
+  height: 60px;
+  width: 100%;
+  padding: 15px 20px;
+  border-bottom: 1px solid #f2f3f5;
+  color: #323233;
+  font-size: 20px;
+  font-weight: bold;
+  .header-name {
+    color: #1349c5;
+  }
+  .headerBtn {
+    font-size: 14px;
+    margin-left: 8px;
+    border-radius: 3px;
+  }
+  .c1 {
+    background: #c3edff;
+    border: 1px solid #17adeb;
+    color: #26aee6;
+  }
+  .c2 {
+    background: #ffedc3;
+    border: 1px solid #eb9917;
+    color: #e68d26;
+  }
+}
+.section-main {
+  height: calc(100% - 60px);
+  padding: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/cosmeticsFile/drugDetail.vue b/src/views/cosmeticsFile/drugDetail.vue
new file mode 100644
index 0000000..edbd673
--- /dev/null
+++ b/src/views/cosmeticsFile/drugDetail.vue
@@ -0,0 +1,447 @@
+<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="header--title">
+          <div class="title--left">
+            <div class="line"></div>
+            <div class="title">国家药品抽检信息</div>
+          </div>
+        </div>
+        <el-descriptions class="margin-top" :column="2" border>
+          <el-descriptions-item>
+            <template slot="label"> 药品通用名称</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 药品商品名称</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 药品批准文号 </template>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 药品类别</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 药品上市许可持有人 </template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              药品上市许可持有人统一社会信用代码
+            </template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 药品上市许可持有人地址 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 药品上市持有人所在省份 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 剂型 </template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 制剂规格 </template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 包装规格</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 抽样编号</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">抽样数量</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">有效期</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 来源</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 抽样环节</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 批号</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 有效期截至日期</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 被抽样单位统一社会信用代码</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 被抽样单位名称</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 被抽样单位地址</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 抽样地点性质</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 抽样单位名称全称</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 抽样单位所在省份</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 药品单价</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 药品总价</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 生产日期</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 样品存放现场温度</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">样品存放现场湿度</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">抽样日期</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 抽样级别</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 抽样单位经手人</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 承检机构</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 生产企业是否否认生产</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 基本药物 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 抽样任务 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 最终检验结论</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 检验证书编号</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 报告签发日期</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 复检结论</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 复检检验依据</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 复检报告书编号</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 复检报告签发日期</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 收样或退样日期</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 原检结论</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 补充检验结果</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 计划ID</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 计划名称</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 编辑时间</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 更新时间</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <div v-if="action == 1">
+        <div class="header--title">
+          <div class="title--left">
+            <div class="line"></div>
+            <div class="title">检验项目信息</div>
+          </div>
+        </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>
+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,
+      },
+    };
+  },
+  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;
+    }
+  }
+}
+.margin-top {
+  margin: 15px 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>
\ No newline at end of file
diff --git a/src/views/cosmeticsFile/drugProvince.vue b/src/views/cosmeticsFile/drugProvince.vue
new file mode 100644
index 0000000..2aedad0
--- /dev/null
+++ b/src/views/cosmeticsFile/drugProvince.vue
@@ -0,0 +1,397 @@
+<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>
+        <div class="header--title">
+          <div class="title--left">
+            <div class="line"></div>
+            <div class="title">基本信息</div>
+          </div>
+        </div>
+        <el-descriptions class="margin-top" :column="2" border>
+          <el-descriptions-item>
+            <template slot="label"> 计划名称 </template>
+            tracyonePlanA
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 抽样单号编号 </template>
+            903434034934
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 抽样环节 </template>
+            2021-01-01
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 抽样时间 </template>
+            省级监督检查
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="header--title">
+          <div class="title--left">
+            <div class="line"></div>
+            <div class="title">被抽样单位信息</div>
+          </div>
+        </div>
+        <el-descriptions class="margin-top" :column="2" border>
+          <el-descriptions-item>
+            <template slot="label"> 被抽样单位名称 </template>
+            大石桥市天泽精制滑石粉厂
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 统一社会信用代码 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 地区（市、州、盟） </template>
+            沈阳市
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 县 (市、区) </template>
+            省级监督检查
+          </el-descriptions-item>
+          <el-descriptions-item :span="2">
+            <template slot="label"> 详细地址 </template>
+            永安大道116号
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 法定代表人/主要负责人 </template>
+            xxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 联系人 </template>
+            177777777777
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 抽样地点性质 </template>
+            xxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">电话 </template>
+            177777777777
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="header--title">
+          <div class="title--left">
+            <div class="line"></div>
+            <div class="title">样品基本信息</div>
+          </div>
+        </div>
+        <el-descriptions class="margin-top" :column="2" border>
+          <el-descriptions-item>
+            <template slot="label"> 样品通用名称</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 生产日期 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 样品批号</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 药品来源 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 有效期限</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 制剂类型 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 制剂规格</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 药品细类 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 药品大类</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 样品贮存相对温度</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 药品贮存温度</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+
+          <el-descriptions-item>
+            <template slot="label"> 是否基药</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item :span="2">
+            <template slot="label"> 是否国家药品集中招标采购中标品种 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+
+          <el-descriptions-item>
+            <template slot="label"> 进口分包装企业 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 进口分包装批号</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="header--title">
+          <div class="title--left">
+            <div class="line"></div>
+            <div class="title">受托生产企业信息</div>
+          </div>
+        </div>
+        <el-descriptions class="margin-top" :column="2" border>
+          <el-descriptions-item :span="2">
+            <template slot="label"> 选择涉及主体</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 委托单位企业名称1</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 委托单位企业地址1</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 委托单位企业名称1</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 委托单位企业地址2</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="header--title">
+          <div class="title--left">
+            <div class="line"></div>
+            <div class="title">抽样单位信息</div>
+          </div>
+        </div>
+        <el-descriptions class="margin-top" :column="2" border>
+          <el-descriptions-item :span="2">
+            <template slot="label"> 抽样单位名称</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 地区（市、州、盟） </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 县（市、区） </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item :span="2">
+            <template slot="label"> 详细地址 </template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 电话 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 联系人</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 备注（需要其他说明的情况）</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="header--title">
+          <div class="title--left">
+            <div class="line"></div>
+            <div class="title">检验信息</div>
+          </div>
+        </div>
+        <div class="lastBox">
+          <el-descriptions class="margin-top" :column="2" border>
+            <el-descriptions-item :span="2">
+              <template slot="label"> 报告书编号</template>
+              xxxxxxxxxxxxxxx
+            </el-descriptions-item>
+            <el-descriptions-item :span="2">
+              <template slot="label"> 检验类型</template>
+              xxxxxxxxxxxxx
+            </el-descriptions-item>
+            <el-descriptions-item :span="2">
+              <template slot="label"> 检验依据 </template>
+              xxxxxxxxxxxxx
+            </el-descriptions-item>
+            <el-descriptions-item :span="2">
+              <template slot="label"> 检验项目 </template>
+              <el-table
+                v-loading="loading"
+                :data="tableList"
+                border
+                :stripe="false"
+              >
+                <el-table-column type="index" label="序号" width="55" />
+                <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 label="检验结论" prop="enterpriseName">
+                </el-table-column>
+              </el-table>
+            </el-descriptions-item>
+            <el-descriptions-item :span="2">
+              <template slot="label">检验报告书结论</template>
+              xxxxxxxxxxxxx
+            </el-descriptions-item>
+            <el-descriptions-item :span="2">
+              <template slot="label">报告附件</template>
+              <div class="fileBox">
+                <span>
+                  <i class="el-icon-s-marketing"></i>
+                </span>
+                <div>A项目检验报告.doc</div>
+                <div class="file-icon">
+                  <i class="el-icon-download"></i>
+                  下载
+                </div>
+              </div>
+            </el-descriptions-item>
+            <el-descriptions-item :span="2">
+              <template slot="label">签发日期</template>
+              xxxxxxxxxxxxx
+            </el-descriptions-item>
+            <el-descriptions-item :span="2">
+              <template slot="label">检验单位</template>
+              xxxxxxxxxxxxx
+            </el-descriptions-item>
+          </el-descriptions>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+  <script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      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有限公司",
+        },
+      ],
+    };
+  },
+  methods: {
+    open() {
+      this.dialogVisible = true;
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+::v-deep .el-dialog__header {
+  background: #f8f9fa;
+}
+.headerText {
+  color: #333333;
+}
+.header--title {
+  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;
+    }
+  }
+}
+.margin-top {
+  margin: 15px 0;
+}
+::v-deep .el-descriptions-row > th {
+  width: 20%;
+  background: #f5f7fa;
+  color: #292f38;
+  font-weight: 500;
+}
+::v-deep .el-descriptions-row > td {
+  width: 30%;
+}
+::v-deep .lastBox .el-descriptions-row > td {
+  width: 80%;
+}
+::v-deep .el-dialog:not(.is-fullscreen) {
+  margin-bottom: 1vh !important;
+}
+.fileBox {
+  margin-top: 8px;
+  display: flex;
+  color: #333;
+  cursor: pointer;
+  & > span {
+    font-size: 14px;
+  }
+  .file-icon {
+    color: #02d1a6;
+    margin-left: 40px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/cosmeticsFile/medical.vue b/src/views/cosmeticsFile/medical.vue
new file mode 100644
index 0000000..0345106
--- /dev/null
+++ b/src/views/cosmeticsFile/medical.vue
@@ -0,0 +1,450 @@
+<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>
+        <div class="header--title">
+          <div class="title--left">
+            <div class="line"></div>
+            <div class="title">基本信息</div>
+          </div>
+        </div>
+        <el-descriptions class="margin-top" :column="2" border>
+          <el-descriptions-item>
+            <template slot="label"> 计划名称 </template>
+            tracyonePlanA
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 计划类型 </template>
+            903434034934
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 品种名称 </template>
+            2021-01-01
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 抽样省局</template>
+            省级监督检查
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 抽样编号 </template>
+            2021-01-01
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 抽样日期</template>
+            省级监督检查
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="header--title">
+          <div class="title--left">
+            <div class="line"></div>
+            <div class="title">抽样情况</div>
+          </div>
+        </div>
+        <el-descriptions class="margin-top" :column="2" border>
+          <el-descriptions-item>
+            <template slot="label"> 指示产品名称 </template>
+            大石桥市天泽精制滑石粉厂
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 产品注册标准（产品技术要求）</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 产品注册证（备案号）</template>
+            沈阳市
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">生产单位省份</template>
+            省级监督检查
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 标示生产单位 </template>
+            永安大道116号
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">地址 </template>
+            xxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">电话 </template>
+            177777777777
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">传真 </template>
+            177777777777
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">规格/型号 </template>
+            177777777777
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">生产日期/批号/出厂编号 </template>
+            177777777777
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">生产或购进数量 </template>
+            177777777777
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">已销售或使用数量 </template>
+            177777777777
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">库存数量 </template>
+            177777777777
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">抽样数量 </template>
+            177777777777
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">有效期截至日期 </template>
+            177777777777
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">抽样地点</template>
+            177777777777
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">商标</template>
+            177777777777
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="header--title">
+          <div class="title--left">
+            <div class="line"></div>
+            <div class="title">被抽样企业和单位情况</div>
+          </div>
+        </div>
+        <el-descriptions class="margin-top" :column="2" border>
+          <el-descriptions-item>
+            <template slot="label"> 抽样环节</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 许可证（备案号） </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 企业和单位名称</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 地址 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 法定代表人或负责人</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 邮政编码</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 电话</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 传真 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="header--title">
+          <div class="title--left">
+            <div class="line"></div>
+            <div class="title">其他信息</div>
+          </div>
+        </div>
+        <div class="radioBox">
+          <el-descriptions class="margin-top" :column="2" border>
+            <el-descriptions-item :span="2">
+              <template slot="label"> 列入省抽计划原因</template>
+
+              <el-radio-group v-model="radio">
+                <el-radio :label="0">本行政区域内注册或者备案的产品</el-radio>
+                <el-radio :label="1"
+                  >产品风险较高，但未列入国抽，与高抽补充品种</el-radio
+                >
+                <el-radio :label="2">列入上一年省抽计划但实际未抽到的</el-radio>
+                <el-radio :label="1"
+                  >列入上一年国抽计划但未实际未抽到的</el-radio
+                >
+                <el-radio :label="2">既往国家抽查检验不符合规定的</el-radio>
+                <el-radio :label="1">既往本省省级抽查检验不符合规定的</el-radio>
+                <el-radio :label="2"
+                  >日常监管、不良事件检测等发现可能存在质量问题的</el-radio
+                >
+                <el-radio :label="2"
+                  >国家或省级抽查检验中确认非标示生产企业生产的</el-radio
+                >
+                <el-radio :label="2">在用医疗器械检验</el-radio>
+                <el-radio :label="2"
+                  >其他监管需要的（另请在备注栏里说明原因）</el-radio
+                >
+                <el-input v-model="input" placeholder="请输入内容"></el-input>
+              </el-radio-group>
+            </el-descriptions-item>
+            <el-descriptions-item :span="2">
+              <template slot="label"> 已传的检验报告</template>
+              <div class="fileBox">
+                <span>
+                  <i class="el-icon-s-marketing"></i>
+                </span>
+                <div>A项目检验报告.doc</div>
+                <div class="file-icon">
+                  <i class="el-icon-download"></i>
+                  下载
+                </div>
+              </div>
+              <div class="fileBox">
+                <span>
+                  <i class="el-icon-s-marketing"></i>
+                </span>
+                <div>A项目检验报告.doc</div>
+                <div class="file-icon">
+                  <i class="el-icon-download"></i>
+                  下载
+                </div>
+              </div>
+            </el-descriptions-item>
+          </el-descriptions>
+        </div>
+        <div class="header--title">
+          <div class="title--left">
+            <div class="line"></div>
+            <div class="title">检验信息</div>
+          </div>
+        </div>
+        <el-descriptions class="margin-top" :column="2" border>
+          <el-descriptions-item>
+            <template slot="label">检验机构</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 检验依据 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item :span="2">
+            <template slot="label"> 检验结果 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+
+          <el-descriptions-item :span="2">
+            <template slot="label"> 不合格项目 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 备注</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="header--title">
+          <div class="title--left">
+            <div class="line"></div>
+            <div class="title">检验项目</div>
+          </div>
+        </div>
+        <div class="lastBox">
+          <el-table
+            v-loading="loading"
+            :data="tableList"
+            border
+            :stripe="false"
+          >
+            <el-table-column type="index" label="序号" width="55" />
+            <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 label="条款路径" prop="enterpriseName" />
+            <el-table-column label="判定原则" prop="enterpriseName" />
+            <el-table-column label="备注" prop="enterpriseName" />
+            <el-table-column label="检验结果" prop="enterpriseName" />
+            <el-table-column label="检验结论" prop="enterpriseName" />
+            <el-table-column label="不合格项目细化名称" prop="enterpriseName" />
+            <el-table-column label="不合格项目说明" prop="enterpriseName" />
+            <el-table-column label="不合格项目危害" prop="enterpriseName" />
+          </el-table>
+          <div class="isYes">
+            <header>综合判定</header>
+            <div class="is-items">
+              <section>
+                本品按《辽宁省药品监督管理局关于协助做好我省疫情放防控类医疗器械抽检工作的函》（辽药监械函【2022】170号）及鲁械标准2022141343检验，结果符合规定
+              </section>
+              <div class="lastAside">合格</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+    <script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      loading: false,
+      radio: 0,
+      input: "",
+      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有限公司",
+        },
+      ],
+    };
+  },
+  methods: {
+    open() {
+      this.dialogVisible = true;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+::v-deep .el-dialog__header {
+  background: #f8f9fa;
+}
+.headerText {
+  color: #333333;
+}
+.header--title {
+  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;
+    }
+  }
+}
+.margin-top {
+  margin: 15px 0;
+}
+::v-deep .el-descriptions-row > th {
+  width: 18%;
+  background: #f5f7fa;
+  color: #292f38;
+  font-weight: 500;
+}
+::v-deep .el-descriptions-row > td {
+  width: 32%;
+}
+.lastBox {
+  margin-top: 15px;
+}
+::v-deep .radioBox .el-descriptions-row > td {
+  width: 82%;
+}
+::v-deep .lastBox .el-descriptions-row > th {
+  width: 10% !important;
+}
+::v-deep .lastBox .el-descriptions-row > td {
+  width: 82%;
+  padding: 0;
+}
+::v-deep .el-dialog:not(.is-fullscreen) {
+  margin-bottom: 1vh !important;
+}
+.fileBox {
+  margin: 8px 0;
+  display: flex;
+  color: #333;
+  cursor: pointer;
+  & > span {
+    font-size: 14px;
+  }
+  .file-icon {
+    color: #02d1a6;
+    margin-left: 40px;
+  }
+}
+.isYes {
+  margin-top: 10px;
+  display: flex;
+  border: 1px solid #e6ebf5;
+  height: 50px;
+  header {
+    height: 100%;
+    width: 12%;
+    padding-left:8px;
+    background: #f5f7fa;
+    display: flex;
+    color: #292f38;
+    align-items: center;
+  }
+  .is-items {
+    height: 100%;
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+    section {
+      width: 90%;
+      display: flex;
+      align-items: center;
+    }
+    .lastAside {
+      width: 5%;
+      height: 100%;
+      background: #22c98d;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/cosmeticsFile/samplingDetail.vue b/src/views/cosmeticsFile/samplingDetail.vue
new file mode 100644
index 0000000..97d829b
--- /dev/null
+++ b/src/views/cosmeticsFile/samplingDetail.vue
@@ -0,0 +1,415 @@
+<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>
+        <div class="header--title">
+          <div class="title--left">
+            <div class="line"></div>
+            <div class="title">基本信息</div>
+          </div>
+        </div>
+        <el-descriptions class="margin-top" :column="2"   border>
+          <el-descriptions-item>
+            <template slot="label"> 计划名称 </template>
+            tracyonePlanA
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 抽样单号编号 </template>
+            903434034934
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 抽样时间 </template>
+            2021-01-01
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 任务来源 </template>
+            省级监督检查
+          </el-descriptions-item>
+          <el-descriptions-item :span="2">
+            <template slot="label"> 抽样地点性质 </template>
+            生产环境：其他.....
+            <br />
+            经营环节：小商店
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="header--title">
+          <div class="title--left">
+            <div class="line"></div>
+            <div class="title">被抽样单位信息</div>
+          </div>
+        </div>
+        <el-descriptions class="margin-top" :column="2"   border>
+          <el-descriptions-item>
+            <template slot="label"> 被抽样单位名称 </template>
+            大石桥市天泽精制滑石粉厂
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 统一社会信用代码 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 地区（市、州、盟） </template>
+            沈阳市
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 县 (市、区) </template>
+            省级监督检查
+          </el-descriptions-item>
+          <el-descriptions-item :span="2">
+            <template slot="label"> 详细地址 </template>
+            永安大道116号
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 联系人 </template>
+            xxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 电话 </template>
+            177777777777
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="header--title">
+          <div class="title--left">
+            <div class="line"></div>
+            <div class="title">样品基本信息</div>
+          </div>
+        </div>
+        <el-descriptions class="margin-top" :column="2"   border>
+          <el-descriptions-item>
+            <template slot="label"> 样品通用名称</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 样品类别 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 样品批号</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 生产日期 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 有效期限</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 抽样数量 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 包装规格</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 保质期 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 注册证编号/备案编号</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 进口包装企业 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 进口分包装批号</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 现场结算 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 单价</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 总价 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 实际总价</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 保存条件 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 是否进口</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 原产地</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 生产/进货数量</template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="header--title">
+          <div class="title--left">
+            <div class="line"></div>
+            <div class="title">标示注册人/备案人/受托生产企业等信息</div>
+          </div>
+        </div>
+        <el-descriptions class="margin-top" :column="2"   border>
+          <el-descriptions-item>
+            <template slot="label"> 注册人/备案人所属省份</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 注册人/备案人名称 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 注册/备案人地址</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 境内责任人所属省份 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 境内责任人名称</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 境内责任人地址 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 受托生产企业所属省份</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 受托生产企业名称 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 受托生产企业地址</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">委托单位所属省份 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 委托单位名称</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 委托单位地址 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">生产企业/代理商所属省份</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 生产企业/代理商名称 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 生产企业/代理商地址</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 是否进口 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 样品进口地区</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="header--title">
+          <div class="title--left">
+            <div class="line"></div>
+            <div class="title">抽样单位信息</div>
+          </div>
+        </div>
+        <el-descriptions class="margin-top" :column="2"   border>
+          <el-descriptions-item :span="2">
+            <template slot="label"> 抽样单位名称</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item :span="2">
+            <template slot="label"> 地区（市、州、盟） </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 抽样人</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 电话 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 抽样人</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 电话 </template>
+            xxxxxxxxxxxxx
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"> 备注</template>
+            xxxxxxxxxxxxxxx
+          </el-descriptions-item>
+        </el-descriptions>
+        <div class="header--title">
+          <div class="title--left">
+            <div class="line"></div>
+            <div class="title">检验信息</div>
+          </div>
+        </div>
+        <div class="lastBox">
+          <el-descriptions class="margin-top" :column="2"   border>
+            <el-descriptions-item :span="2">
+              <template slot="label"> 检验机构名称</template>
+              xxxxxxxxxxxxxxx
+            </el-descriptions-item>
+            <el-descriptions-item :span="2">
+              <template slot="label"> 是否合格 </template>
+              xxxxxxxxxxxxx
+            </el-descriptions-item>
+            <el-descriptions-item :span="2">
+              <template slot="label"> 不合格项目类型 </template>
+              xxxxxxxxxxxxx
+            </el-descriptions-item>
+            <el-descriptions-item :span="2">
+              <template slot="label"> 不合格项目详情 </template>
+              xxxxxxxxxxxxx
+            </el-descriptions-item>
+            <el-descriptions-item :span="2">
+              <template slot="label">检验结果 </template>
+              xxxxxxxxxxxxx
+            </el-descriptions-item>
+            <el-descriptions-item :span="2">
+              <template slot="label">结果单位 </template>
+              xxxxxxxxxxxxx
+            </el-descriptions-item>
+            <el-descriptions-item :span="2">
+              <template slot="label">判定依据 </template>
+              xxxxxxxxxxxxx
+            </el-descriptions-item>
+            <el-descriptions-item :span="2">
+              <template slot="label">检验依据 </template>
+              xxxxxxxxxxxxx
+            </el-descriptions-item>
+            <el-descriptions-item :span="2">
+              <template slot="label">限值规定 </template>
+              xxxxxxxxxxxxx
+            </el-descriptions-item>
+            <el-descriptions-item :span="2">
+              <template slot="label">检验报告 </template>
+              <div class="fileBox">
+                <span>
+                  <i class="el-icon-s-marketing"></i>
+                </span>
+                <div>A项目检验报告.doc</div>
+                <div class="file-icon">
+                  <i class="el-icon-download"></i>
+                  下载
+                </div>
+              </div>
+            </el-descriptions-item>
+            <el-descriptions-item :span="2">
+              <template slot="label">备注 </template>
+              xxxxxxxxxxxxx
+            </el-descriptions-item>
+          </el-descriptions>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+    };
+  },
+  methods: {
+    open() {
+      this.dialogVisible = true;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog__header {
+  background: #f8f9fa;
+}
+.headerText {
+  color: #333333;
+}
+.header--title {
+  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;
+    }
+  }
+}
+.margin-top {
+  margin: 15px 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 .lastBox .el-descriptions-row > td {
+  width: 82%;
+}
+::v-deep .el-dialog:not(.is-fullscreen) {
+  margin-bottom: 1vh !important;
+}
+.fileBox {
+  margin-top: 8px;
+  display: flex;
+  color: #333;
+  cursor: pointer;
+  & > span {
+    font-size: 14px;
+  }
+  .file-icon {
+    color: #02d1a6;
+    margin-left: 40px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/productsMsg/components/cosmeticsArchives.vue b/src/views/productsMsg/components/cosmeticsArchives.vue
index a076494..e3a6e70 100644
--- a/src/views/productsMsg/components/cosmeticsArchives.vue
+++ b/src/views/productsMsg/components/cosmeticsArchives.vue
@@ -1,5 +1,402 @@
 <template>
-    <div>   
-        dsafasdfasdfasdfasd
+  <div class="container">
+    <div class="tabs">
+      <div class="headerText">
+        <div class="searchP">查询条件</div>
+      </div>
+      <div class="screen">
+        <div class="task-name">
+          <span class="task-name-text">产品名称：</span>
+          <div class="task-input">
+            <el-input
+              v-model="queryCondition.firmName"
+              placeholder="请输入内容"
+            ></el-input>
+          </div>
+        </div>
+        <div class="task-name">
+          <span class="task-name-text">备案编码：</span>
+          <div class="task-input">
+            <el-input
+              v-model="queryCondition.PrescriptionContent"
+              placeholder="请输入内容"
+            ></el-input>
+          </div>
+        </div>
+        <div class="task-name">
+          <span class="task-name-text">生产企业：</span>
+          <div class="task-input">
+            <el-input
+              v-model="queryCondition.majorFunction"
+              placeholder="请输入内容"
+            ></el-input>
+          </div>
+        </div>
+      </div>
+      <div class="footBox">
+        <el-button icon="el-icon-refresh-left">重置</el-button>
+        <el-button type="primary" icon="el-icon-search">查询</el-button>
+      </div>
     </div>
-</template>
\ No newline at end of file
+    <div class="tabsBottom">
+      <div class="foot-main">
+        <div class="headerText">
+          <div class="searchP">产品列表</div>
+        </div>
+        <div class="exportBtn">
+          <el-button type="primary" icon="el-icon-edit-outline">导出</el-button>
+        </div>
+        <section class="table-box">
+          <div class="table-item">
+            <el-table
+              v-loading="loading"
+              :data="tableList"
+              border
+              :stripe="false"
+            >
+              <el-table-column type="selection" width="55" align="center" />
+              <el-table-column type="index" label="序号" width="55" />
+
+              <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="操作"
+                class-name="small-padding fixed-width"
+                width="150"
+              >
+                <template>
+                  <el-button
+                    size="mini"
+                    plain
+                    type="primary"
+                    @click="toDetail()"
+                    >详情</el-button
+                  >
+                  <el-button size="mini" plain type="warning">编辑</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </section>
+        <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>
+    </div>
+    <!-- 化妆品的弹出框 -->
+    <drugDetail ref="drugDetail"></drugDetail>
+    <!-- 药品 国抽详情 -->
+    <samplingDetail ref="sampling"></samplingDetail>
+    <!-- 药品 省抽详情 -->
+    <drugProvince ref="drugProvince"></drugProvince>
+    <!-- 医疗器械详情 -->
+    <medical ref="medical"></medical>
+  </div>
+</template>
+  
+  <script>
+import drugDetail from "../../cosmeticsFile/drugDetail.vue";
+import samplingDetail from "../../cosmeticsFile/drugDetail.vue";
+import drugProvince from '../../cosmeticsFile/drugProvince.vue';
+import medical from '../../cosmeticsFile/medical.vue'
+export default {
+  components: {},
+  data() {
+    return {
+      drugnum: "(20)",
+      activeName: "first",
+      queryCondition: {
+        fullTextSearch: "", // 全文检索
+        firmName: "", // 企业名称
+        approvalNumber: "", // 批准文号
+        taskName: "", // 产品名称
+        PrescriptionContent: "", // 处方内容
+        majorFunction: "", // 功能主治
+        startTime: "", // 开始日期
+        endTime: "", // 结束日期
+        checkList: [],
+        checkListTwo: [],
+      },
+      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,
+      },
+    };
+  },
+  components: {
+    samplingDetail,
+    drugDetail,
+    drugProvince,
+    medical
+  },
+  mounted() {},
+  methods: {
+    currentChange() {},
+    sizeChange() {},
+    toDetail() {
+      // this.$router.push({
+      //   name: "化妆品详情",
+      //   path: "/productsMsg/cosmeticsDetail",
+      // });
+      // this.$refs.sampling.open()
+      // this.$refs.drugDetail.open();
+      // this.$refs.drugProvince.open();
+      this.$refs.medical.open();
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+::v-deep .el-table--medium .el-table__cell {
+  padding: 4px 0;
+}
+.container {
+  height: 100%;
+  box-sizing: border-box;
+  background: #f2f2f2;
+
+  .headerText {
+    width: 100%;
+    padding: 10px 20px;
+    border-bottom: 1px solid #f2f3f5;
+    color: #323233;
+    font-size: 20px;
+    font-weight: bold;
+    .searchP {
+      position: relative;
+      cursor: pointer;
+      &::before {
+        content: "";
+        width: 78px;
+        height: 3px;
+        background: #1349c5;
+        position: absolute;
+        bottom: -10px;
+      }
+    }
+  }
+  .tabs {
+    height: 25%;
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 0px 0px 12px 0px rgba(194, 212, 226, 0.64);
+    border-radius: vw(10);
+    padding-bottom: 20px;
+    //   min-height: 90vh;
+    // padding-top: 3px;
+    // padding-left: 15px;
+  }
+  .screen {
+    padding: 15px 0 26px 28px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    .task-name {
+      display: flex;
+      align-items: center;
+      margin-right: 30px;
+      .task-name-text {
+        font-size: 16px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #6a6c6f;
+        line-height: 50px;
+        // margin-right: vw(10);
+      }
+      .task-input {
+        width: 251px;
+        height: 32px;
+        ::v-deep .el-input {
+          width: 251px;
+          height: 32px;
+        }
+        ::v-deep .el-input__inner {
+          width: 100%;
+          height: 100%;
+          font-size: 16px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          // color: #B1B6BF;
+          line-height: 50px;
+          padding-left: 15px;
+        }
+      }
+    }
+    .checkbox-group-name {
+      width: 695px;
+    }
+    .time-interval {
+      display: flex;
+      align-items: center;
+      margin-right: 20px;
+      .interval-text {
+        font-size: 16px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #6a6c6f;
+        // line-height: 50px;
+        // margin-right: vw(10);
+      }
+      .interval-select {
+        display: flex;
+        align-items: center;
+        border: 1px solid #dbe0e8;
+        border-radius: 4px;
+        height: 32px;
+        .star-time,
+        .end-time {
+          position: relative;
+          .data_icon {
+            position: absolute;
+            top: 50%;
+            right: 17px;
+            z-index: 9;
+            color: #c0c4cc;
+            font-size: 14px;
+            transform: translateY(-50%);
+          }
+          ::v-deep .el-input__prefix {
+            display: none;
+          }
+          ::v-deep .el-input {
+            width: 243px;
+            height: 30px;
+          }
+          ::v-deep .el-input__inner {
+            width: 100%;
+            height: 100%;
+            font-size: 16px;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            // color: #B1B6BF;
+            line-height: 30px;
+            padding-left: 15px;
+            border: none;
+            cursor: pointer;
+          }
+        }
+        .symbol {
+          background: rgba(219, 224, 232, 0.5);
+          width: 40px;
+          height: 30px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 16px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #292f38;
+          line-height: 28px;
+        }
+      }
+    }
+  }
+}
+//===================
+::v-deep .el-button--medium {
+  padding: 8px;
+}
+.footBox {
+  width: 100%;
+  text-align: center;
+}
+.tabsBottom {
+  height: 75%;
+  padding-top: 10px;
+  .foot-main {
+    height: 100%;
+    width: 100%;
+    background: white;
+  }
+}
+.exportBtn {
+  padding: 10px 20px;
+}
+.table-box {
+  padding: 0 20px;
+  .table-item {
+  }
+}
+.pagination {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 20px;
+  padding-top: 20px;
+}
+</style>
+  
\ No newline at end of file