From 0381821f8e724540066159cfd8253966c39c2ac8 Mon Sep 17 00:00:00 2001
From: dhy1725534722 <1725534722@qq.com>
Date: Tue, 1 Aug 2023 09:49:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           | 127 ++++---
 src/views/{netWorkStat => drugFile}/index.vue |  74 +++-
 src/views/index.vue                           |  56 +--
 src/views/productsMsg/index.vue               | 333 +++++++++++++++++-
 4 files changed, 513 insertions(+), 77 deletions(-)
 rename src/views/{netWorkStat => drugFile}/index.vue (59%)

diff --git a/src/router/index.js b/src/router/index.js
index 6098fd8..171a7dd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -61,6 +61,7 @@ export const constantRoutes = [
     component: () => import("@/views/error/401"),
     hidden: true,
   },
+
   {
     path: '',
     component: () => import("@/views/index"),
@@ -74,67 +75,103 @@ export const constantRoutes = [
         component: () => import("@/views/administrative/index"),
         meta: { title: "行政审批", icon: "netWork" },
       },
-    ]
-  },
-  {
-    path: '/A',
-    component: () => import("@/views/index"),
-    redirect: "enterpriseMsg",
-    isDiy: true,
-    children: [
       {
-        path: 'enterpriseMsg',
+        path: '/enterpriseMsg',
         name: "企业档案",
         icon: require("@/assets/images/tree4.svg"),
         component: () => import("@/views/enterpriseMsg/index"),
         meta: { title: "企业档案", icon: "netWork" },
       },
-    ]
-  },
-  {
-    path: '/B',
-    component: () => import("@/views/index"),
-    redirect: "logout",
-    isDiy: true,
-    children: [
       {
-        path: "logout",
+        path: "/logout",
         name: "依法注销",
         icon: require("@/assets/images/tree4.svg"),
         component: () => import("@/views/logout/index"),
         meta: { title: "依法注销", icon: "netWork" },
       },
-    ]
-  },
-  {
-    path: '/productsMsg',
-    component: () => import("@/views/index"),
-    redirect: "drugArchives",
-    isDiy: true,
-    children: [
       {
-        path: "drugArchives",
-        name: "药品档案",
+        path: '/productsMsg',
+        name: "产品档案",
         icon: require("@/assets/images/tree4.svg"),
-        component: () => import("@/views/productsMsg/components/drugArchives.vue"),
-        meta: { title: "药品档案", icon: "netWork" },
-      },
-      {
-        path: "cosmeticsArchives",
-        name: "化妆品档案",
-        icon: require("@/assets/images/tree4.svg"),
-        component: () => import("@/views/productsMsg/components/cosmeticsArchives.vue"),
-        meta: { title: "化妆品档案", icon: "netWork" },
-      },
-      {
-        path: "health",
-        name: "医疗器械档案",
-        icon: require("@/assets/images/tree4.svg"),
-        component: () => import("@/views/productsMsg/components/health.vue"),
-        meta: { title: "医疗器械档案", icon: "netWork" },
-      },
+        component: () => import("@/views/productsMsg/index"),
+        meta: { title: "产品档案", icon: "netWork" },
+      }
     ]
   },
+  // {
+  //   path: '',
+  //   component: () => import("@/views/index"),
+  //   redirect: "/administrative",
+  //   isDiy: true,
+  //   children: [
+  //     {
+  //       path: "/administrative",
+  //       name: "行政审批",
+  //       icon: require("@/assets/images/tree4.svg"),
+  //       component: () => import("@/views/administrative/index"),
+  //       meta: { title: "行政审批", icon: "netWork" },
+  //     },
+  //   ]
+  // },
+  // {
+  //   path: '/A',
+  //   component: () => import("@/views/index"),
+  //   redirect: "enterpriseMsg",
+  //   isDiy: true,
+  //   children: [
+  //     {
+  //       path: 'enterpriseMsg',
+  //       name: "企业档案",
+  //       icon: require("@/assets/images/tree4.svg"),
+  //       component: () => import("@/views/enterpriseMsg/index"),
+  //       meta: { title: "企业档案", icon: "netWork" },
+  //     },
+  //   ]
+  // },
+  // {
+  //   path: '/B',
+  //   component: () => import("@/views/index"),
+  //   redirect: "logout",
+  //   isDiy: true,
+  //   children: [
+  //     {
+  //       path: "logout",
+  //       name: "依法注销",
+  //       icon: require("@/assets/images/tree4.svg"),
+  //       component: () => import("@/views/logout/index"),
+  //       meta: { title: "依法注销", icon: "netWork" },
+  //     },
+  //   ]
+  // },
+  // {
+  //   path: '/productsMsg',
+  //   component: () => import("@/views/index"),
+  //   redirect: "drugArchives",
+  //   isDiy: true,
+  //   children: [
+  //     {
+  //       path: "drugArchives",
+  //       name: "药品档案",
+  //       icon: require("@/assets/images/tree4.svg"),
+  //       component: () => import("@/views/productsMsg/components/drugArchives.vue"),
+  //       meta: { title: "药品档案", icon: "netWork" },
+  //     },
+  //     {
+  //       path: "cosmeticsArchives",
+  //       name: "化妆品档案",
+  //       icon: require("@/assets/images/tree4.svg"),
+  //       component: () => import("@/views/productsMsg/components/cosmeticsArchives.vue"),
+  //       meta: { title: "化妆品档案", icon: "netWork" },
+  //     },
+  //     {
+  //       path: "health",
+  //       name: "医疗器械档案",
+  //       icon: require("@/assets/images/tree4.svg"),
+  //       component: () => import("@/views/productsMsg/components/health.vue"),
+  //       meta: { title: "医疗器械档案", icon: "netWork" },
+  //     },
+  //   ]
+  // },
   //可以按着若依的思路来写,把菜单全部都设置成一级路由，然后有下拉选择框的去进行区别判断设置成二级子路由
 ];
 
diff --git a/src/views/netWorkStat/index.vue b/src/views/drugFile/index.vue
similarity index 59%
rename from src/views/netWorkStat/index.vue
rename to src/views/drugFile/index.vue
index ebe8348..bcb0ba2 100644
--- a/src/views/netWorkStat/index.vue
+++ b/src/views/drugFile/index.vue
@@ -1,6 +1,21 @@
 <template>
   <div class="container">
-    <div class="left">
+    <div class="right-content">
+      <div class="name-content">
+        <div class="drug-name">
+          <span class="name">药品通用名称 : </span>
+          <span class="tag">健母宝经典修护精华液</span>
+          <div class="info-Tag">
+            <div>10年老企</div>
+            <div>高风险企业</div>
+          </div>
+        </div>
+        <div class="close-icon">
+          <i class="el-icon-close" size="50"></i>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="left">
       <div class="left-grids">
         <gridsTitle title="检查人员组成" />
         <div class="main">
@@ -45,7 +60,7 @@
           <LevelPie />
         </div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -86,6 +101,7 @@ export default {
   display: flex;
   align-items: center;
   background: #f2f2f2;
+  padding: 10px;
   & > div {
     flex: 1;
     height: 100%;
@@ -119,5 +135,59 @@ export default {
   .main {
     height: calc(100% - 40px);
   }
+  .right-content {
+    background-color: #fff;
+    .name-content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px;
+      border-bottom: 1px solid #F2F3F5;
+      .drug-name {
+        display: flex;
+        align-items: center;
+        font-size: 18px;
+        font-family: Source Han Sans SC-Bold, Source Han Sans SC;
+        font-weight: bold;
+        color: #323233;
+        .name {
+
+        }
+        .tag {
+          color: #1349C5;
+          margin-left: 4px;
+        }
+        .info-Tag {
+          // margin-top: vh(9);
+          margin-left: 12px;
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          div {
+            padding: 4px 11px;
+            margin-right: 10px;
+            background: #DDEBFA;
+            border-radius: 4px;
+            color: #1E80EB;
+            &:last-child {
+              margin-right: 0;
+              background: #FDEBEB;
+              border-radius: 4px;
+              color: #E42424;
+            }
+          }
+          
+        }
+      }
+      .close-icon {
+        cursor: pointer;
+        i {
+          font-size: 25px;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/index.vue b/src/views/index.vue
index d7da493..d739866 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -88,7 +88,7 @@ export default {
           meta: { title: "行政审批", icon: "netWork" },
         },
         {
-          path: "/A/enterpriseMsg",
+          path: "/enterpriseMsg",
           name: "企业档案",
           icon: require("@/assets/images/tree4.svg"),
           component: () => import("@/views/enterpriseMsg/index"),
@@ -101,35 +101,35 @@ export default {
           component: () => import("@/views/index"),
           redirect: "drugArchives",
           isDiy: true,
-          children: [
-            {
-              path: "/productsMsg/drugArchives",
-              name: "药品档案",
-              icon: require("@/assets/images/tree4.svg"),
-              component: () =>
-                import("@/views/productsMsg/components/drugArchives.vue"),
-              meta: { title: "药品档案", icon: "netWork" },
-            },
-            {
-              path: "/productsMsg/cosmeticsArchives",
-              name: "化妆品档案",
-              icon: require("@/assets/images/tree4.svg"),
-              component: () =>
-                import("@/views/productsMsg/components/cosmeticsArchives.vue"),
-              meta: { title: "化妆品档案", icon: "netWork" },
-            },
-            {
-              path: "/productsMsg/health",
-              name: "医疗器械档案",
-              icon: require("@/assets/images/tree4.svg"),
-              component: () =>
-                import("@/views/productsMsg/components/health.vue"),
-              meta: { title: "医疗器械档案", icon: "netWork" },
-            },
-          ],
+          // children: [
+          //   {
+          //     path: "/productsMsg/drugArchives",
+          //     name: "药品档案",
+          //     icon: require("@/assets/images/tree4.svg"),
+          //     component: () =>
+          //       import("@/views/productsMsg/components/drugArchives.vue"),
+          //     meta: { title: "药品档案", icon: "netWork" },
+          //   },
+          //   {
+          //     path: "/productsMsg/cosmeticsArchives",
+          //     name: "化妆品档案",
+          //     icon: require("@/assets/images/tree4.svg"),
+          //     component: () =>
+          //       import("@/views/productsMsg/components/cosmeticsArchives.vue"),
+          //     meta: { title: "化妆品档案", icon: "netWork" },
+          //   },
+          //   {
+          //     path: "/productsMsg/health",
+          //     name: "医疗器械档案",
+          //     icon: require("@/assets/images/tree4.svg"),
+          //     component: () =>
+          //       import("@/views/productsMsg/components/health.vue"),
+          //     meta: { title: "医疗器械档案", icon: "netWork" },
+          //   },
+          // ],
         },
         {
-          path: "/B/logout",
+          path: "/logout",
           name: "依法注销",
           icon: require("@/assets/images/tree4.svg"),
           component: () => import("@/views/logout/index"),
diff --git a/src/views/productsMsg/index.vue b/src/views/productsMsg/index.vue
index 5b0c7a5..6e3983c 100644
--- a/src/views/productsMsg/index.vue
+++ b/src/views/productsMsg/index.vue
@@ -1,3 +1,332 @@
 <template>
-    <div>   3333</div>
-</template>
\ No newline at end of file
+    <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="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 class="task-name">
+                  <span class="task-name-text">产品名称：</span>
+                  <div class="task-input">
+                    <el-input
+                      v-model="queryCondition.taskName"
+                      placeholder="请输入内容"
+                    ></el-input>
+                  </div>
+                </div>
+                <div class="time-interval">
+                  <div class="interval-text">
+                    批号有效期：
+                  </div>
+                  <div class="interval-select">
+                    <div class="star-time">
+                      <el-date-picker
+                        v-model="queryCondition.startTime"
+                        type="datetime"
+                        align="right"
+                        :clearable="false"
+                        format="yyyy-MM-dd HH:mm:ss"
+                        value-format="yyyy-MM-dd HH:mm:ss"
+                        placeholder="请选择开始时间"
+                      >
+                      </el-date-picker>
+                      <!-- <i class="el-icon-date data_icon"></i> -->
+                    </div> 
+                    <!-- <i class="el-icon-sort-up"></i> -->
+                    <div class="symbol">~</div>
+                    <div class="end-time">
+                      <el-date-picker
+                        v-model="queryCondition.endTime"
+                        type="datetime"
+                        align="right"
+                        :clearable="false"
+                        format="yyyy-MM-dd HH:mm:ss"
+                        value-format="yyyy-MM-dd HH:mm:ss"
+                        placeholder="请选择结束时间"
+                      >
+                      </el-date-picker>
+                      <i class="el-icon-date data_icon"></i>
+                    </div>
+                  </div>
+                </div>
+                <div class="task-name">
+                  <span class="task-name-text">产品标签：</span>
+                  <div class="task-checkbox">
+                    <el-checkbox-group v-model="queryCondition.checkList">
+                      <el-checkbox label="全部"></el-checkbox>
+                      <el-checkbox label="百年产品"></el-checkbox>
+                      <el-checkbox label="疗效显著"></el-checkbox>
+                      <el-checkbox label="无刺激"></el-checkbox>
+                    </el-checkbox-group>
+                  </div>
+                </div>
+                <div class="task-name">
+                  <span class="task-name-text">产品筛选：</span>
+                  <div class="task-checkbox">
+                    <el-checkbox-group v-model="queryCondition.checkListTwo">
+                      <el-checkbox label="全部"></el-checkbox>
+                      <el-checkbox :label="'药品' + drugnum"></el-checkbox>
+                      <el-checkbox label="医疗器械"></el-checkbox>
+                      <el-checkbox label="化妆品"></el-checkbox>
+                    </el-checkbox-group>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    components: {
+    },
+    data() {
+      return {
+        drugnum:"(20)",
+        activeName: "first",
+        queryCondition:{
+          fullTextSearch:"",             // 全文检索
+          firmName:"",                   // 企业名称
+          approvalNumber:"",             // 批准文号
+          taskName:"",                   // 产品名称
+          PrescriptionContent:"",        // 处方内容
+          majorFunction:"",              // 功能主治
+          startTime:"",                  // 开始日期
+          endTime:"",                    // 结束日期
+          checkList:[],
+          checkListTwo:[],
+        },
+      };
+    },
+    mounted() {},
+    methods: {},
+  };
+  </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;
+      }
+    }
+    .middle-box {
+      margin: 10px;
+    }
+  
+    .main {
+      height: calc(100% - 40px);
+    }
+    .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: rgba(255, 255, 255, 0.9);
+        box-shadow: 0px 0px 12px 0px rgba(194, 212, 226, 0.64);
+        border-radius: vw(10);
+        min-height: 90vh;
+        // padding-top: 3px;
+        // padding-left: 15px;
+      }
+      .screen {
+        padding: 15px 0 26px 28px;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        .task-name {
+          display: flex;
+          align-items: center;
+          margin-right: 30px;
+          .task-name-text {
+            font-size: 16px;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            color: #6a6c6f;
+            line-height: 50px;
+            // margin-right: vw(10);
+          }
+          .task-input {
+            width: 251px;
+            height: 32px;
+            ::v-deep .el-input {
+              width: 251px;
+              height: 32px;
+            }
+            ::v-deep .el-input__inner {
+              width: 100%;
+              height: 100%;
+              font-size: 16px;
+              font-family: Source Han Sans CN;
+              font-weight: 400;
+              // color: #B1B6BF;
+              line-height: 50px;
+              padding-left: 15px;
+            }
+          }
+        }
+        .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;
+            }
+          }
+        }
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file