From 9461c9242082a2fe93612589b30672a7ba6d6ca4 Mon Sep 17 00:00:00 2001
From: dhy1725534722 <1725534722@qq.com>
Date: Wed, 2 Aug 2023 11:26:04 +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

---
 .../cosmeticsFile/components/descriptions.vue |  45 ++
 .../cosmeticsFile/components/headerTitle.vue  |  50 ++
 src/views/cosmeticsFile/drugDetail.vue        | 531 ++++++++------
 src/views/cosmeticsFile/drugProvince.vue      | 503 ++++++++------
 src/views/cosmeticsFile/medical.vue           | 476 +++++++------
 src/views/cosmeticsFile/samplingDetail.vue    | 656 +++++++++++-------
 .../components/cosmeticsArchives.vue          |  16 +-
 7 files changed, 1356 insertions(+), 921 deletions(-)
 create mode 100644 src/views/cosmeticsFile/components/descriptions.vue
 create mode 100644 src/views/cosmeticsFile/components/headerTitle.vue

diff --git a/src/views/cosmeticsFile/components/descriptions.vue b/src/views/cosmeticsFile/components/descriptions.vue
new file mode 100644
index 0000000..1fd34db
--- /dev/null
+++ b/src/views/cosmeticsFile/components/descriptions.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <el-descriptions class="margin-top" :column="2" border>
+      <el-descriptions-item v-for="(item, index) in descriptionsList" :key="index" :span="item.span">
+        <template slot="label"> {{ item.label }} </template>
+        {{ item.value }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+
+    //   list2: {
+    //     asd: 123123213,
+    //     idsd: "hahhah",
+    //   },
+    };
+  },
+  props: {
+    descriptionsList: {
+      type: Array,
+      default: [],
+    },
+  },
+  methods: {},
+  created() {
+    // for (let key in this.list2) {
+    //   this.list1.forEach((values, index) => {
+    //     if (values.data === key) {
+    //       this.list1[index].value = this.list2[key];
+    //     }
+    //   });
+    // }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.margin-top {
+  margin: 15px 0;
+}
+</style>
+
diff --git a/src/views/cosmeticsFile/components/headerTitle.vue b/src/views/cosmeticsFile/components/headerTitle.vue
new file mode 100644
index 0000000..95246ef
--- /dev/null
+++ b/src/views/cosmeticsFile/components/headerTitle.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div class="header--title">
+      <div class="title--left">
+        <div class="line"></div>
+        <div class="title">{{ header }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    header: {
+      type: String,
+      default: "",
+    },
+  },
+  methods: {},
+  created() {},
+};
+</script>
+<style lang="scss" scoped>
+.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;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/cosmeticsFile/drugDetail.vue b/src/views/cosmeticsFile/drugDetail.vue
index edbd673..ea9e1fa 100644
--- a/src/views/cosmeticsFile/drugDetail.vue
+++ b/src/views/cosmeticsFile/drugDetail.vue
@@ -24,222 +24,14 @@
       </div>
 
       <div v-if="action == 0">
-        <div class="header--title">
-          <div class="title--left">
-            <div class="line"></div>
-            <div class="title">国家药品抽检信息</div>
-          </div>
+        <div class="mar">
+          <headerTitle header="国家药品抽检信息"></headerTitle>
         </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>
+        <descriptions :descriptionsList="list1"></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 class="mar">
+          <headerTitle header="检验项目信息"></headerTitle>
         </div>
         <el-table v-loading="loading" :data="tableList" border :stripe="false">
           <el-table-column type="index" label="序号" width="50" />
@@ -282,6 +74,8 @@
 </template>
 
 <script>
+import headerTitle from "./components/headerTitle";
+import descriptions from "./components/descriptions";
 export default {
   data() {
     return {
@@ -354,8 +148,314 @@ export default {
       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;
@@ -365,7 +465,6 @@ export default {
     },
     currentChange() {},
     sizeChange() {},
- 
   },
 };
 </script>
@@ -398,8 +497,8 @@ export default {
     }
   }
 }
-.margin-top {
-  margin: 15px 0;
+.mar {
+  margin: 10px 0;
 }
 ::v-deep .el-descriptions-row > th {
   width: 18%;
diff --git a/src/views/cosmeticsFile/drugProvince.vue b/src/views/cosmeticsFile/drugProvince.vue
index 2aedad0..4082d9b 100644
--- a/src/views/cosmeticsFile/drugProvince.vue
+++ b/src/views/cosmeticsFile/drugProvince.vue
@@ -10,215 +10,19 @@
     >
       <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>
+        <headerTitle header="基本信息"></headerTitle>
+        <descriptions :descriptionsList="list1"></descriptions>
+        <headerTitle header="被抽样单位信息"></headerTitle>
+        <descriptions :descriptionsList="list2"></descriptions>
+        <headerTitle header="样品基本信息"></headerTitle>
+        <descriptions :descriptionsList="list3"></descriptions>
+        <headerTitle header="受托生产企业信息"></headerTitle>
+        <descriptions :descriptionsList="list4"></descriptions>
+        <headerTitle header="抽样单位信息"></headerTitle>
+        <descriptions :descriptionsList="list5"></descriptions>
+        <headerTitle header="检验信息"></headerTitle>
         <div class="lastBox">
+          <button>初检</button>
           <el-descriptions class="margin-top" :column="2" border>
             <el-descriptions-item :span="2">
               <template slot="label"> 报告书编号</template>
@@ -246,7 +50,7 @@
                 </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>
               </el-table>
@@ -283,6 +87,8 @@
   </div>
 </template>
   <script>
+import headerTitle from "./components/headerTitle";
+import descriptions from "./components/descriptions";
 export default {
   data() {
     return {
@@ -326,8 +132,267 @@ export default {
           enterpriseName: "xxxx有限公司",
         },
       ],
+      //基本信息
+      list1: [
+        {
+          span: 1,
+          label: "计划名称",
+          value: "",
+          data: "asd",
+        },
+        {
+          span: 1,
+          label: "抽样单号编号",
+          value: "",
+          data: "idsd",
+        },
+        {
+          span: 1,
+          label: "抽样环节",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "抽样时间",
+          value: "",
+          data: "",
+        },
+      ],
+      //被抽样单位信息
+      list2: [
+        {
+          span: 1,
+          label: "被抽样单位名称",
+          value: "",
+          data: "asd",
+        },
+        {
+          span: 1,
+          label: "统一社会信用代码",
+          value: "",
+          data: "idsd",
+        },
+        {
+          span: 1,
+          label: "地区（市、州、盟）",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "县 (市、区)",
+          value: "",
+          data: "",
+        },
+        {
+          span: 2,
+          label: "详细地址",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "法定代表人/主要负责人",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "联系人 ",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "抽样地点性质",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "电话 ",
+          value: "",
+          data: "",
+        },
+      ],
+      //样品基本信息
+      list3: [
+        {
+          span: 1,
+          label: "样品通用名称",
+          value: "",
+          data: "asd",
+        },
+        {
+          span: 1,
+          label: "生产日期",
+          value: "",
+          data: "idsd",
+        },
+        {
+          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: 2,
+          label: "是否国家药品集中招标采购中标品种",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "进口分包装企业",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "进口分包装批号",
+          value: "",
+          data: "",
+        },
+      ],
+      //受托生产企业信息
+      list4: [
+        {
+          span: 2,
+          label: "选择涉及主体",
+          value: "",
+          data: "asd",
+        },
+        {
+          span: 1,
+          label: "委托单位企业名称1",
+          value: "",
+          data: "asd",
+        },
+        {
+          span: 1,
+          label: "委托单位企业地址1",
+          value: "",
+          data: "asd",
+        },
+        {
+          span: 1,
+          label: "委托单位企业名称1",
+          value: "",
+          data: "asd",
+        },
+        {
+          span: 1,
+          label: "委托单位企业地址1",
+          value: "",
+          data: "asd",
+        },
+      ],
+      //抽样单位信息
+      list5: [
+        {
+          span: 2,
+          label: "抽样单位名称",
+          value: "",
+          data: "asd",
+        },
+        {
+          span: 1,
+          label: "地区（市、州、盟）",
+          value: "",
+          data: "asd",
+        },
+        {
+          span: 1,
+          label: "县（市、区）",
+          value: "",
+          data: "asd",
+        },
+        {
+          span: 2,
+          label: "详细地址",
+          value: "",
+          data: "asd",
+        },
+        {
+          span: 1,
+          label: "电话",
+          value: "",
+          data: "asd",
+        },
+        {
+          span: 1,
+          label: "联系人",
+          value: "",
+          data: "asd",
+        },
+        {
+          span: 1,
+          label: "备注（需要其他说明的情况）",
+          value: "",
+          data: "asd",
+        },
+      ],
     };
   },
+  components: {
+    descriptions,
+    headerTitle,
+  },
   methods: {
     open() {
       this.dialogVisible = true;
@@ -363,9 +428,7 @@ export default {
     }
   }
 }
-.margin-top {
-  margin: 15px 0;
-}
+
 ::v-deep .el-descriptions-row > th {
   width: 20%;
   background: #f5f7fa;
@@ -375,6 +438,22 @@ export default {
 ::v-deep .el-descriptions-row > td {
   width: 30%;
 }
+.lastBox {
+  width: 100%;
+  margin-top:15px;
+  border: 1px dashed #dee2ee;
+  button {
+    background: #1e80eb;
+    font-size:14px;
+    padding:4px 14px;
+    color: #fff;
+    border: none;
+    border-radius: 0px 0px 15px 0px;
+  }
+}
+.margin-top{
+  margin: 20px;
+}
 ::v-deep .lastBox .el-descriptions-row > td {
   width: 80%;
 }
diff --git a/src/views/cosmeticsFile/medical.vue b/src/views/cosmeticsFile/medical.vue
index 0345106..3d860b6 100644
--- a/src/views/cosmeticsFile/medical.vue
+++ b/src/views/cosmeticsFile/medical.vue
@@ -10,165 +10,17 @@
     >
       <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>
+        <headerTitle header="基本信息"></headerTitle>
+        <descriptions :descriptionsList="list1"></descriptions>
+        <headerTitle header="抽样情况"></headerTitle>
+        <descriptions :descriptionsList="list2"></descriptions>
+        <headerTitle header="被抽样企业和单位情况"></headerTitle>
+        <descriptions :descriptionsList="list3"></descriptions>
+        <headerTitle header="其他信息"></headerTitle>
         <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"
@@ -190,7 +42,11 @@
                 <el-radio :label="2"
                   >其他监管需要的（另请在备注栏里说明原因）</el-radio
                 >
-                <el-input v-model="input" placeholder="请输入内容"></el-input>
+                <el-input
+                  v-model="input"
+                  size="mini"
+                  placeholder="请输入内容"
+                ></el-input>
               </el-radio-group>
             </el-descriptions-item>
             <el-descriptions-item :span="2">
@@ -218,41 +74,9 @@
             </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>
+        <headerTitle header="检验信息"></headerTitle>
+        <descriptions :descriptionsList="list4"></descriptions>
+        <headerTitle header="检验项目"></headerTitle>
         <div class="lastBox">
           <el-table
             v-loading="loading"
@@ -290,9 +114,239 @@
   </div>
 </template>
     <script>
+    import headerTitle from "./components/headerTitle";
+import descriptions from "./components/descriptions";
 export default {
   data() {
     return {
+      //基本信息
+      list1: [
+        {
+          span: 1,
+          label: "计划名称",
+          value: "",
+          data: "asd",
+        },
+        {
+          span: 1,
+          label: "计划类型",
+          value: "",
+          data: "idsd",
+        },
+        {
+          span: 1,
+          label: "品种名称",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "抽样省局",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "抽样编号",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "抽样日期",
+          value: "",
+          data: "",
+        },
+      ],
+      //抽样情况
+      list2: [
+        {
+          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: "",
+        },
+      ],
+      //被抽样企业和单位情况
+      list3: [
+        {
+          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: "",
+        },
+      ],
+      //检验信息
+      list4: [
+        {
+          span: 1,
+          label: "检验机构",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "检验依据",
+          value: "",
+          data: "",
+        },
+        {
+          span: 2,
+          label: "检验结果",
+          value: "",
+          data: "",
+        },
+        {
+          span: 2,
+          label: "不合格项目",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "备注",
+          value: "",
+          data: "",
+        },
+      ],
       dialogVisible: false,
       loading: false,
       radio: 0,
@@ -337,6 +391,10 @@ export default {
       ],
     };
   },
+  components: {
+    descriptions,
+    headerTitle
+  },
   methods: {
     open() {
       this.dialogVisible = true;
@@ -348,29 +406,7 @@ export default {
 ::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;
 }
@@ -420,7 +456,7 @@ export default {
   header {
     height: 100%;
     width: 12%;
-    padding-left:8px;
+    padding-left: 8px;
     background: #f5f7fa;
     display: flex;
     color: #292f38;
@@ -434,6 +470,7 @@ export default {
     section {
       width: 90%;
       display: flex;
+      padding-left:10px;
       align-items: center;
     }
     .lastAside {
@@ -447,4 +484,13 @@ export default {
     }
   }
 }
+</style>
+<style lang="scss">
+.el-radio {
+  margin-top: 10px;
+}
+.el-input {
+  width: 50% !important;
+  margin-left: 25px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/cosmeticsFile/samplingDetail.vue b/src/views/cosmeticsFile/samplingDetail.vue
index 97d829b..d9644cf 100644
--- a/src/views/cosmeticsFile/samplingDetail.vue
+++ b/src/views/cosmeticsFile/samplingDetail.vue
@@ -10,276 +10,21 @@
     >
       <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>
+        <headerTitle header="基本信息"></headerTitle>
+        <descriptions :descriptionsList="list1"></descriptions>
+        <headerTitle header="被抽样单位信息"></headerTitle>
+        <descriptions :descriptionsList="list2"></descriptions>
+        <headerTitle header="样品基本信息"></headerTitle>
+        <descriptions :descriptionsList="list3"></descriptions>
+        <headerTitle
+          header="标示注册人/备案人/受托生产企业等信息"
+        ></headerTitle>
+        <descriptions :descriptionsList="list4"></descriptions>
+        <headerTitle header="抽样单位信息"></headerTitle>
+        <descriptions :descriptionsList="list5"></descriptions>
+        <headerTitle header="检验信息"></headerTitle>
         <div class="lastBox">
-          <el-descriptions class="margin-top" :column="2"   border>
+          <el-descriptions class="margin-top" :column="2" border>
             <el-descriptions-item :span="2">
               <template slot="label"> 检验机构名称</template>
               xxxxxxxxxxxxxxx
@@ -328,6 +73,26 @@
                   下载
                 </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>
+              <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>
@@ -340,12 +105,363 @@
   </div>
 </template>
 <script>
+import headerTitle from "./components/headerTitle";
+import descriptions from "./components/descriptions";
 export default {
   data() {
     return {
       dialogVisible: false,
+      //基本信息
+      list1: [
+        {
+          span: 1,
+          label: "计划名称",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "抽样单号编号",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "抽样时间",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "任务来源",
+          value: "",
+          data: "",
+        },
+        {
+          span: 2,
+          label: "抽样地点性质",
+          value: "",
+          data: "",
+        },
+      ],
+      //被抽样单位信息
+      list2: [
+        {
+          span: 1,
+          label: "被抽样单位名称",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "统一社会信用代码 ",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "地区（市、州、盟）",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "县 (市、区)",
+          value: "",
+          data: "",
+        },
+        {
+          span: 2,
+          label: "详细地址",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "联系人",
+          value: "",
+          data: "",
+        },
+        {
+          span: 1,
+          label: "电话",
+          value: "",
+          data: "",
+        },
+      ],
+      //样品基本信息
+      list3: [
+        {
+          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: "",
+        },
+      ],
+      //标示注册人/备案人/受托生产企业等信息
+      list4: [
+        {
+          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: "",
+        },
+      ],
+      //抽样单位信息
+      list5: [
+        {
+          span: 2,
+          label: "抽样单位名称",
+          value: "",
+          data: "",
+        },
+        {
+          span: 2,
+          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: "",
+        },
+      ],
     };
   },
+  components: {
+    descriptions,
+    headerTitle,
+  },
   methods: {
     open() {
       this.dialogVisible = true;
@@ -400,7 +516,7 @@ export default {
   margin-bottom: 1vh !important;
 }
 .fileBox {
-  margin-top: 8px;
+  margin: 8px 0;
   display: flex;
   color: #333;
   cursor: pointer;
diff --git a/src/views/productsMsg/components/cosmeticsArchives.vue b/src/views/productsMsg/components/cosmeticsArchives.vue
index e3a6e70..bae66ff 100644
--- a/src/views/productsMsg/components/cosmeticsArchives.vue
+++ b/src/views/productsMsg/components/cosmeticsArchives.vue
@@ -96,9 +96,9 @@
         </div>
       </div>
     </div>
-    <!-- 化妆品的弹出框 -->
-    <drugDetail ref="drugDetail"></drugDetail>
     <!-- 药品 国抽详情 -->
+    <drugDetail ref="drugDetail"></drugDetail>
+    <!-- 化妆品-->
     <samplingDetail ref="sampling"></samplingDetail>
     <!-- 药品 省抽详情 -->
     <drugProvince ref="drugProvince"></drugProvince>
@@ -108,10 +108,10 @@
 </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'
+import drugDetail from "../../cosmeticsFile/drugDetail";
+import samplingDetail from "../../cosmeticsFile/samplingDetail";
+import drugProvince from '../../cosmeticsFile/drugProvince';
+import medical from '../../cosmeticsFile/medical'
 export default {
   components: {},
   data() {
@@ -213,10 +213,10 @@ export default {
       //   name: "化妆品详情",
       //   path: "/productsMsg/cosmeticsDetail",
       // });
-      // this.$refs.sampling.open()
+      this.$refs.sampling.open()
       // this.$refs.drugDetail.open();
       // this.$refs.drugProvince.open();
-      this.$refs.medical.open();
+      // this.$refs.medical.open();
     },
   },
 };