From 3b68db049910e038aad37885d820b3c319d0d9fd Mon Sep 17 00:00:00 2001
From: dhy1725534722 <1725534722@qq.com>
Date: Wed, 2 Aug 2023 15:25:18 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/cosmeticsFile/medical.vue           |   9 +-
 .../components/cosmeticsArchives.vue          | 832 +++++++++++-------
 src/views/productsMsg/components/health.vue   | 550 +++++++++++-
 3 files changed, 1044 insertions(+), 347 deletions(-)

diff --git a/src/views/cosmeticsFile/medical.vue b/src/views/cosmeticsFile/medical.vue
index 3d860b6..45d348c 100644
--- a/src/views/cosmeticsFile/medical.vue
+++ b/src/views/cosmeticsFile/medical.vue
@@ -432,6 +432,10 @@ export default {
   width: 82%;
   padding: 0;
 }
+::v-deep .el-input {
+  width: 50% !important;
+  margin-left: 25px;
+}
 ::v-deep .el-dialog:not(.is-fullscreen) {
   margin-bottom: 1vh !important;
 }
@@ -489,8 +493,5 @@ export default {
 .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/productsMsg/components/cosmeticsArchives.vue b/src/views/productsMsg/components/cosmeticsArchives.vue
index b79abf1..3d22b30 100644
--- a/src/views/productsMsg/components/cosmeticsArchives.vue
+++ b/src/views/productsMsg/components/cosmeticsArchives.vue
@@ -1,341 +1,370 @@
 <template>
   <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>
-    <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>
+    <div class="right-content">
+      <div class="tabs">
+        <el-tabs
+          v-model="activeName"
+          style="color: #edeef0"
+        >
+          <el-tab-pane label="查询条件" name="first">
+            <div class="screen">
+              <div class="task-name">
+                <span class="task-name-text">产品名称：</span>
+                <div class="task-input">
+                  <el-input
+                    v-model="queryCondition.fullTextSearch"
+                    placeholder="请输入内容"
+                  ></el-input>
+                </div>
+              </div>
+              <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.approvalNumber"
+                    placeholder="请输入内容"
+                  ></el-input>
+                </div>
+              </div>
 
-              <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
+              <div class="btn">
+                <el-button size="mini" icon="el-icon-refresh-left">重置</el-button>
+                <el-button size="mini" type="primary" icon="el-icon-search">查询</el-button>
+              </div>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+        <div class="tabsTwo" :style="tabsTwoStyle">
+          <el-tabs
+          v-model="activeName"
+          style="color: #edeef0"
+        >
+          <el-tab-pane label="化妆品列表" name="first">
+            <div class="daochu">
+              <div class="btn">
+                导出
+              </div>
+            </div>
+            <div class="mytable">
+              <el-table
+                ref="multipleTable"
+                :data="tableData"
+                tooltip-effect="dark"
+                border
+                style="width: 100%"
+                @selection-change="handleSelectionChange">
+                <el-table-column
+                  type="selection"
+                  header-align="center"
+                  class-name="column-text-one"
+                  width="44">
+                </el-table-column>
+                <el-table-column
+                  label="序号"
+                  width="50">
+                  <template slot-scope="scope">{{ scope.row.date }}</template>
+                </el-table-column>
+                <el-table-column
+                  prop="name"
+                  label="产品名称"
                   >
-                  <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>
+                </el-table-column>
+                <el-table-column
+                  prop="firmName"
+                  label="备案编码"
+                  show-overflow-tooltip>
+                </el-table-column>
+                <el-table-column
+                  prop="firmName"
+                  label="生产企业"
+                  show-overflow-tooltip>
+                </el-table-column>
+                
+                <el-table-column
+                  prop="address"
+                  label="操作"
+                  width="180"
+                >
+                  <template slot-scope="scope">
+                    <div class="button">
+                      <el-button
+                        size="mini"
+                        type="primary"
+                        class="xiangqing"
+                        plain
+                        @click="handleEdit(scope.$index, scope.row)"
+                        >详情</el-button
+                      >
+                      <el-button
+                        size="mini"
+                        type="primary"
+                        class="bianji"
+                        plain
+                        @click="handleView(scope.$index, scope.row)"
+                        >编辑</el-button
+                      >
+                    </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <div class="pagination">
+                <!-- <span class="custom"
+                  >共{{ total }}条，显示{{
+                    total == 0
+                      ? "0"
+                      : queryCondition.current == 1
+                      ? "1"
+                      : queryCondition.size * (queryCondition.current - 1) + 1
+                  }}-{{ numberMap() }}条</span
+                > -->
+                <span class="custom">
+                  共100条，显示1-10条
+                </span>
+                <el-pagination
+                  background
+                  :page-sizes="[10, 15]"
+                  :total="total"
+                  layout=" prev, pager, next, sizes, jumper"
+                  @current-change="currentChange"
+                  @size-change="sizeChange"
+                  :current-page.sync="currentPage"
+                  :page-size.sync="pageSize"
+                >
+                </el-pagination>
+              </div>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
         </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";
-import samplingDetail from "../../cosmeticsFile/samplingDetail";
-import drugProvince from '../../cosmeticsFile/drugProvince';
-import medical from '../../cosmeticsFile/medical'
+
+<script>
 export default {
-  components: {},
+  components: {
+  },
   data() {
     return {
-      drugnum: "(20)",
+      drugnum:"(20)",
       activeName: "first",
-      queryCondition: {
-        fullTextSearch: "", // 全文检索
-        firmName: "", // 企业名称
-        approvalNumber: "", // 批准文号
-        taskName: "", // 产品名称
-        PrescriptionContent: "", // 处方内容
-        majorFunction: "", // 功能主治
-        startTime: "", // 开始日期
-        endTime: "", // 结束日期
-        checkList: [],
-        checkListTwo: [],
+      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,
+      tableData: [{
+        date: '1',
+        name: '辽-xxxx',
+        type:"药品",
+        approvalNumber:"12421432143214321",
+        firmName:"XXX有限公司",
+      }, {
+        date: '2',
+        name: '辽-aaaa',
+        type:"医疗器械",
+        approvalNumber:"12421432143214321",
+        firmName:"XXX有限公司",
+      }, {
+        date: '3',
+        name: '辽-zzzz',
+        type:"化妆品",
+        approvalNumber:"12421432143214321",
+        firmName:"XXX有限公司",
+      }, {
+        date: '4',
+        name: '辽-qqqq',
+        type:"药品",
+        approvalNumber:"12421432143214321",
+        firmName:"XXX有限公司",
+      }, {
+        date: '5',
+        name: '辽-xxxx',
+        type:"医疗器械",
+        approvalNumber:"12421432143214321",
+        firmName:"XXX有限公司",
+      }, {
+        date: '6',
+        name: '辽-aaaa',
+        type:"化妆品",
+        approvalNumber:"12421432143214321",
+        firmName:"XXX有限公司",
+      }, {
+        date: '7',
+        name: '辽-zzzz',
+        type:"药品",
+        approvalNumber:"12421432143214321",
+        firmName:"XXX有限公司",
+      }, {
+        date: '8',
+        name: '辽-qqqq',
+        type:"医疗器械",
+        approvalNumber:"12421432143214321",
+        firmName:"XXX有限公司",
+      }, {
+        date: '9',
+        name: '辽-xxxx',
+        type:"化妆品",
+        approvalNumber:"12421432143214321",
+        firmName:"XXX有限公司",
+      }, {
+        date: '10',
+        name: '辽-aaaa',
+        type:"药品",
+        approvalNumber:"12421432143214321",
+        firmName:"XXX有限公司",
+      }],
+      tabsTwoStyle:{
+        height:''
       },
+      multipleSelection:[],
+      total:100,
+      currentPage:1,
+      pageSize:10,
     };
   },
-  components: {
-    samplingDetail,
-    drugDetail,
-    drugProvince,
-    medical
+  mounted() {
+    document.getElementsByClassName(
+    "el-pagination__jump"
+  )[0].childNodes[0].nodeValue = "跳至";
+    this.$nextTick(()=>{
+      let dom = document.getElementsByClassName('tabsTwo');
+      let height = dom[0].getBoundingClientRect();
+      // let windowWidth = window.innerWidth;
+      let windowHeight = window.innerHeight;
+      let relativeHeight = windowHeight - height.top
+      this.tabsTwoStyle.height = relativeHeight + 'px'
+    })
   },
-  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();
+    handleSelectionChange(val){
+      this.multipleSelection = val;
+    },
+    currentChange(val){
+
+    },
+    sizeChange(val){
+
+    },
+    // 详情
+    handleEdit(index,row){
+      console.log(index)
+      this.$router.push({name:'productInfo'})
+    },
+    // 编辑
+    handleView(index,row){
+
     },
   },
 };
 </script>
-  
-  <style lang="scss" scoped>
-::v-deep .el-table--medium .el-table__cell {
-  padding: 4px 0;
-}
+
+<style lang="scss" scoped>
 .container {
   height: 100%;
   box-sizing: border-box;
+  display: flex;
+  align-items: center;
   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;
-      }
-    }
+  // padding: 10px;
+  & > div {
+    flex: 1;
+    height: 100%;
   }
-  .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;
+  & > div:nth-child(2) {
+    flex: 2;
+    margin: 0 10px;
+  }
+  .middle {
+    height: 100%;
+    background: #ffff;
+    border-radius: 8px;
+    overflow: hidden;
   }
-  .screen {
-    padding: 15px 0 26px 28px;
+  .left,
+  .right {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
     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);
+    & > div {
+      width: 100%;
+      border-radius: 8px;
+      flex: 1;
+      background: #ffffff;
+    }
+  }
+  .right-content {
+    background-color: #fff;
+    ::v-deep .el-tabs__header{
+      margin: 0;
+      .el-tabs__nav-scroll {
+        padding-left: 15px;
+        padding-top: 3px;
       }
-      .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;
-        }
+      .el-tabs__item {
+        font-size: 18px;
+        font-family: Source Han Sans SC-Bold, Source Han Sans SC;
+        font-weight: bold;
+        color: #323233;
+      }
+      .el-tabs__active-bar {
+        background-color: #1349C5;
+        height: 2px;
+        border-radius: 0px 0px 0px 0px;
       }
     }
-    .checkbox-group-name {
-      width: 695px;
+    .tabs {
+      background: #F2F2F2 ;
+      box-shadow: 0px 0px 12px 0px rgba(194, 212, 226, 0.64);
+      border-radius: vw(10);
+      min-height: 88vh;
+      // padding-top: 3px;
+      // padding-left: 15px;
+      ::v-deep .el-tabs {
+        background-color: #fff;
+      }
     }
-    .time-interval {
+    .screen {
+      padding: 15px 0 26px 28px;
       display: flex;
+      flex-wrap: wrap;
       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 {
+      .task-name {
         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;
-          }
+        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: 243px;
-            height: 30px;
+            width: 251px;
+            height: 32px;
           }
           ::v-deep .el-input__inner {
             width: 100%;
@@ -344,59 +373,182 @@ export default {
             font-family: Source Han Sans CN;
             font-weight: 400;
             // color: #B1B6BF;
-            line-height: 30px;
+            line-height: 50px;
             padding-left: 15px;
-            border: none;
-            cursor: pointer;
           }
         }
-        .symbol {
-          background: rgba(219, 224, 232, 0.5);
-          width: 40px;
-          height: 30px;
+      }
+      .checkbox-group-name {
+        width: 695px;
+      }
+      .btn{
+        width: 100%;
+        // padding-left: 600px;
+        text-align: center;
+        margin-top:15px;
+      }
+      .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;
+          }
+        }
+      }
+    }
+    .tabsTwo {
+      margin: 10px 0;
+      overflow-y: scroll;
+      // padding: 10px 0;
+      padding-bottom: 20px;
+      background-color: #fff;
+      .daochu {
+        padding: 10px;
+        .btn {
+          display: flex;
           justify-content: center;
-          font-size: 16px;
-          font-family: Source Han Sans CN;
+          width: 64px;
+          height: 32px;
+          background: #1E80EB;
+          border-radius: 4px 4px 4px 4px;
+          font-size: 14px;
+          font-family: MicrosoftYaHei-, MicrosoftYaHei;
+          font-weight: normal;
+          color: #FFFFFF;
+          line-height: 31px;
+        }
+      }
+      .mytable {
+        width: 99%;
+        margin: 0 auto;
+        ::v-deep .column-text-one {
+          text-align: center;
+        }
+        ::v-deep .el-table td {
+          height: 40px;
+          padding: 0;
+        }
+        ::v-deep .el-table th {
+          height: 40px;
+          padding: 0;
+          font-size: 14px;
+          font-family: Source Han Sans SC-Medium, Source Han Sans SC;
+          font-weight: bold;
+          color: #292f38;
+          line-height: 36px;
+        }
+        .button {
+          display: flex;
+          align-items: center;
+          .xiangqing {
+            height: 23px;
+            padding: 3px;
+            border-radius: 4px;
+            line-height: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-right: 5px;
+            background: #EBF5FF;
+            border: 1px solid #A1CBF8;
+            ::v-deep span {
+              display: inline-block;
+              color: #0E7CF4;
+            }
+          }
+          .bianji {
+            height: 23px;
+            padding: 3px;
+            border-radius: 4px;
+            line-height: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: #FFEFE3;
+            border: 1px solid #FFC89F;
+            ::v-deep span {
+              display: inline-block;
+              color: #F88129;
+            }
+          }
+        }
+      }
+      .pagination {
+        margin-top: 17px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        // padding-bottom: vh(20);
+        ::v-deep .el-pagination__jump {
+          margin: 0;
+        }
+        .custom {
+          font-size: 14px;
+          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
           font-weight: 400;
           color: #292f38;
-          line-height: 28px;
+          line-height: 18px;
         }
       }
     }
+    .tabsTwo::-webkit-scrollbar {display:none}
   }
 }
-//===================
-::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
diff --git a/src/views/productsMsg/components/health.vue b/src/views/productsMsg/components/health.vue
index 85acc76..aaf4e95 100644
--- a/src/views/productsMsg/components/health.vue
+++ b/src/views/productsMsg/components/health.vue
@@ -1,5 +1,549 @@
 <template>
-    <div>   
-        adsfadsfasdfasdfasdf
+  <div class="container">
+    <div class="right-content">
+      <div class="tabs">
+        <el-tabs v-model="activeName" style="color: #edeef0">
+          <el-tab-pane label="查询条件" name="first">
+            <div class="screen">
+              <div class="task-name">
+                <span class="task-name-text">产品名称：</span>
+                <div class="task-input">
+                  <el-input
+                    v-model="queryCondition.fullTextSearch"
+                    placeholder="请输入内容"
+                  ></el-input>
+                </div>
+              </div>
+              <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.approvalNumber"
+                    placeholder="请输入内容"
+                  ></el-input>
+                </div>
+              </div>
+
+              <div class="btn">
+                <el-button size="mini" icon="el-icon-refresh-left"
+                  >重置</el-button
+                >
+                <el-button size="mini" type="primary" icon="el-icon-search"
+                  >查询</el-button
+                >
+              </div>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+        <div class="tabsTwo" :style="tabsTwoStyle">
+          <el-tabs v-model="activeName" style="color: #edeef0">
+            <el-tab-pane label="医疗器械列表" name="first">
+              <div class="daochu">
+                <div class="btn">导出</div>
+              </div>
+              <div class="mytable">
+                <el-table
+                  ref="multipleTable"
+                  :data="tableData"
+                  tooltip-effect="dark"
+                  border
+                  style="width: 100%"
+                  @selection-change="handleSelectionChange"
+                >
+                  <el-table-column
+                    type="selection"
+                    header-align="center"
+                    class-name="column-text-one"
+                    width="44"
+                  >
+                  </el-table-column>
+                  <el-table-column label="序号" width="50">
+                    <template slot-scope="scope">{{ scope.row.date }}</template>
+                  </el-table-column>
+                  <el-table-column prop="name" label="产品名称">
+                  </el-table-column>
+                  <el-table-column
+                    prop="firmName"
+                    label="注册证号/备案号"
+                    show-overflow-tooltip
+                  >
+                  </el-table-column>
+                  <el-table-column
+                    prop="firmName"
+                    label="生产企业"
+                    show-overflow-tooltip
+                  >
+                  </el-table-column>
+
+                  <el-table-column prop="address" label="操作" width="180">
+                    <template slot-scope="scope">
+                      <div class="button">
+                        <el-button
+                          size="mini"
+                          type="primary"
+                          class="xiangqing"
+                          plain
+                          @click="handleEdit(scope.$index, scope.row)"
+                          >详情</el-button
+                        >
+                        <el-button
+                          size="mini"
+                          type="primary"
+                          class="bianji"
+                          plain
+                          @click="handleView(scope.$index, scope.row)"
+                          >编辑</el-button
+                        >
+                      </div>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <div class="pagination">
+                  <!-- <span class="custom"
+                    >共{{ total }}条，显示{{
+                      total == 0
+                        ? "0"
+                        : queryCondition.current == 1
+                        ? "1"
+                        : queryCondition.size * (queryCondition.current - 1) + 1
+                    }}-{{ numberMap() }}条</span
+                  > -->
+                  <span class="custom"> 共100条，显示1-10条 </span>
+                  <el-pagination
+                    background
+                    :page-sizes="[10, 15]"
+                    :total="total"
+                    layout=" prev, pager, next, sizes, jumper"
+                    @current-change="currentChange"
+                    @size-change="sizeChange"
+                    :current-page.sync="currentPage"
+                    :page-size.sync="pageSize"
+                  >
+                  </el-pagination>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
     </div>
-</template>
\ No newline at end of file
+  </div>
+</template>
+  
+  <script>
+export default {
+  components: {},
+  data() {
+    return {
+      drugnum: "(20)",
+      activeName: "first",
+      queryCondition: {
+        fullTextSearch: "", // 全文检索
+        firmName: "", // 企业名称
+        approvalNumber: "", // 批准文号
+        taskName: "", // 产品名称
+        PrescriptionContent: "", // 处方内容
+        majorFunction: "", // 功能主治
+        startTime: "", // 开始日期
+        endTime: "", // 结束日期
+        checkList: [],
+        checkListTwo: [],
+      },
+      tableData: [
+        {
+          date: "1",
+          name: "辽-xxxx",
+          type: "药品",
+          approvalNumber: "12421432143214321",
+          firmName: "XXX有限公司",
+        },
+        {
+          date: "2",
+          name: "辽-aaaa",
+          type: "医疗器械",
+          approvalNumber: "12421432143214321",
+          firmName: "XXX有限公司",
+        },
+        {
+          date: "3",
+          name: "辽-zzzz",
+          type: "化妆品",
+          approvalNumber: "12421432143214321",
+          firmName: "XXX有限公司",
+        },
+        {
+          date: "4",
+          name: "辽-qqqq",
+          type: "药品",
+          approvalNumber: "12421432143214321",
+          firmName: "XXX有限公司",
+        },
+        {
+          date: "5",
+          name: "辽-xxxx",
+          type: "医疗器械",
+          approvalNumber: "12421432143214321",
+          firmName: "XXX有限公司",
+        },
+        {
+          date: "6",
+          name: "辽-aaaa",
+          type: "化妆品",
+          approvalNumber: "12421432143214321",
+          firmName: "XXX有限公司",
+        },
+        {
+          date: "7",
+          name: "辽-zzzz",
+          type: "药品",
+          approvalNumber: "12421432143214321",
+          firmName: "XXX有限公司",
+        },
+        {
+          date: "8",
+          name: "辽-qqqq",
+          type: "医疗器械",
+          approvalNumber: "12421432143214321",
+          firmName: "XXX有限公司",
+        },
+        {
+          date: "9",
+          name: "辽-xxxx",
+          type: "化妆品",
+          approvalNumber: "12421432143214321",
+          firmName: "XXX有限公司",
+        },
+        {
+          date: "10",
+          name: "辽-aaaa",
+          type: "药品",
+          approvalNumber: "12421432143214321",
+          firmName: "XXX有限公司",
+        },
+      ],
+      tabsTwoStyle: {
+        height: "",
+      },
+      multipleSelection: [],
+      total: 100,
+      currentPage: 1,
+      pageSize: 10,
+    };
+  },
+  mounted() {
+    document.getElementsByClassName(
+      "el-pagination__jump"
+    )[0].childNodes[0].nodeValue = "跳至";
+    this.$nextTick(() => {
+      let dom = document.getElementsByClassName("tabsTwo");
+      let height = dom[0].getBoundingClientRect();
+      // let windowWidth = window.innerWidth;
+      let windowHeight = window.innerHeight;
+      let relativeHeight = windowHeight - height.top;
+      this.tabsTwoStyle.height = relativeHeight + "px";
+    });
+  },
+  methods: {
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    currentChange(val) {},
+    sizeChange(val) {},
+    // 详情
+    handleEdit(index, row) {
+      console.log(index);
+      this.$router.push({ name: "productInfo" });
+    },
+    // 编辑
+    handleView(index, row) {},
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.container {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  background: #f2f2f2;
+  // padding: 10px;
+  & > div {
+    flex: 1;
+    height: 100%;
+  }
+  & > div:nth-child(2) {
+    flex: 2;
+    margin: 0 10px;
+  }
+  .middle {
+    height: 100%;
+    background: #ffff;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  .left,
+  .right {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    & > div {
+      width: 100%;
+      border-radius: 8px;
+      flex: 1;
+      background: #ffffff;
+    }
+  }
+  .right-content {
+    background-color: #fff;
+    ::v-deep .el-tabs__header {
+      margin: 0;
+      .el-tabs__nav-scroll {
+        padding-left: 15px;
+        padding-top: 3px;
+      }
+      .el-tabs__item {
+        font-size: 18px;
+        font-family: Source Han Sans SC-Bold, Source Han Sans SC;
+        font-weight: bold;
+        color: #323233;
+      }
+      .el-tabs__active-bar {
+        background-color: #1349c5;
+        height: 2px;
+        border-radius: 0px 0px 0px 0px;
+      }
+    }
+    .tabs {
+      background: #f2f2f2;
+      box-shadow: 0px 0px 12px 0px rgba(194, 212, 226, 0.64);
+      border-radius: vw(10);
+      min-height: 88vh;
+      // padding-top: 3px;
+      // padding-left: 15px;
+      ::v-deep .el-tabs {
+        background-color: #fff;
+      }
+    }
+    .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;
+      }
+      .btn {
+        width: 100%;
+        //   padding-left: 600px;
+        text-align: center;
+        margin-top: 15px;
+      }
+      .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;
+          }
+        }
+      }
+    }
+    .tabsTwo {
+      margin: 10px 0;
+      overflow-y: scroll;
+      // padding: 10px 0;
+      padding-bottom: 20px;
+      background-color: #fff;
+      .daochu {
+        padding: 10px;
+        .btn {
+          display: flex;
+          justify-content: center;
+          width: 64px;
+          height: 32px;
+          background: #1e80eb;
+          border-radius: 4px 4px 4px 4px;
+          font-size: 14px;
+          font-family: MicrosoftYaHei-, MicrosoftYaHei;
+          font-weight: normal;
+          color: #ffffff;
+          line-height: 31px;
+        }
+      }
+      .mytable {
+        width: 99%;
+        margin: 0 auto;
+        ::v-deep .column-text-one {
+          text-align: center;
+        }
+        ::v-deep .el-table td {
+          height: 40px;
+          padding: 0;
+        }
+        ::v-deep .el-table th {
+          height: 40px;
+          padding: 0;
+          font-size: 14px;
+          font-family: Source Han Sans SC-Medium, Source Han Sans SC;
+          font-weight: bold;
+          color: #292f38;
+          line-height: 36px;
+        }
+        .button {
+          display: flex;
+          align-items: center;
+          .xiangqing {
+            height: 23px;
+            padding: 3px;
+            border-radius: 4px;
+            line-height: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-right: 5px;
+            background: #ebf5ff;
+            border: 1px solid #a1cbf8;
+            ::v-deep span {
+              display: inline-block;
+              color: #0e7cf4;
+            }
+          }
+          .bianji {
+            height: 23px;
+            padding: 3px;
+            border-radius: 4px;
+            line-height: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: #ffefe3;
+            border: 1px solid #ffc89f;
+            ::v-deep span {
+              display: inline-block;
+              color: #f88129;
+            }
+          }
+        }
+      }
+      .pagination {
+        margin-top: 17px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        // padding-bottom: vh(20);
+        ::v-deep .el-pagination__jump {
+          margin: 0;
+        }
+        .custom {
+          font-size: 14px;
+          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+          font-weight: 400;
+          color: #292f38;
+          line-height: 18px;
+        }
+      }
+    }
+    .tabsTwo::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+</style>
+  
\ No newline at end of file