档案更新

src/App.vue

@@ -7,7 +7,7 @@
 
 <script>
 import ThemePicker from "@/components/ThemePicker";
-import autofit from 'autofit.js'
+// import autofit from 'autofit.js'
 export default {
   name: "App",
   components: { ThemePicker },
@@ -33,17 +33,17 @@ export default {
     //   renderDom: "#app",
     //   resize: true
     // }, false) // 可关闭控制台运行提示输出
+    //! 检查getselfInfo
     /* npm run build:prod
         sudo mv ggfw-dangan.zip /usr/share/nginx/html/ggfw-dangan 在 MSSM-Dev 文件夹下 移动压缩包到 ggfw文件夹下
       	
-              cd /usr/share/nginx/html/ggfw-dangan 移动到文件夹下
+        cd /usr/share/nginx/html/ggfw-dangan 移动到文件夹下
-      	
+  
-              unzip ggfw-dangan.zip -d .  解压
+        unzip ggfw-dangan.zip -d .  解压
-      	
-              rm ./html.zip 删除当前目录下的压缩包 弹出确定删除 打 y 并回车
       
-              
+       
- 
+        
+     
    */
   },
 };

src/api/archives/cosmetics.js

@@ -46,22 +46,51 @@ export default {
             params: query,
         });
     },
-     //分页条件查询药品批件数据
+    //分页条件查询药品批件数据
-     vRdgYpwhGxwz(query) {
+    vRdgYpwhGxwz(query) {
         return request({
             url: "/pharmaceuticals/vRdgYpwhGxwz",
             method: "GET",
             params: query,
         });
     },
-        //分页条件查询药品批件数据
+     //分页条件查询药品批件数据
-        deasCorpTcmpFiling(query) {
+     vRdgYpwhGxwzylList(query) {
-            return request({
+        return request({
-                url: "/pharmaceuticals/deasCorpTcmpFiling",
+            url: "/pharmaceuticals/vRdgYpwhGxwz/ylList",
-                method: "GET",
+            method: "GET",
-                params: query,
+            params: query,
-            });
+        });
-        },
+    },
+    //分页条件查询药品批件数据
+    deasCorpTcmpFiling(query) {
+        return request({
+            url: "/pharmaceuticals/deasCorpTcmpFiling",
+            method: "GET",
+            params: query,
+        });
+    },
+
+    //分页条件查询受托生产企业数据
+    entrustedEnter(query) {
+        return request({
+            url: "/pharmaceuticals/entrustedEnter",
+            method: "GET",
+            params: query,
+        });
+    },
+    //分页条件查询受托生产企业数据
+    entrustedEnterexport(query) {
+        return request({
+            url: "/pharmaceuticals/entrustedEnter/export",
+            method: "GET",
+            params: query, headers: {
+                'Content-Type': 'application/json; charset=UTF-8',
+            },
+            responseType: 'blob'    //在请求中加上这一行，特别重要
+
+        });
+    },
 
 
 }

src/api/archives/updata.js

@@ -37,4 +37,15 @@ export function dcylqx(query) {
         params: query,
         responseType: 'blob'
     });
+}
+
+    //分页条件查询受托生产企业数据
+export function entrustedEnterexport(query) {
+    return request({
+        url: "/pharmaceuticals/entrustedEnter/export",
+        method: "GET",
+        params: query,
+        responseType: 'blob'
+    });
+
 }

src/layout/components/AppMain.vue

@@ -61,7 +61,7 @@ export default {
 
 ::-webkit-scrollbar {
   margin: 0;
-  width: 10px;
+  width: 12px;
   height: 12px;
 }
 

src/permission.js

@@ -7,6 +7,7 @@ import { getToken } from "@/utils/auth";
 
 // 踢出系统
 function kickOut() {
+  // console.log(123132);
   if (process.env.NODE_ENV === "production") {
     setTimeout(() => {
       location.href = location.origin + "/login";
@@ -38,6 +39,7 @@ router.beforeEach((to, from, next) => {
   let token = localStorage.getItem('MSSM-LIAONING__TOKEN')
   if (token) {
     if (store.state.myselfPermission.routerList.length == 0) {
+      
       store.dispatch("GetPermission").then((res) => {
         // 获取查询参数
         next({ path: to.path });
@@ -53,12 +55,14 @@ router.beforeEach((to, from, next) => {
       if (current.length > 0) {
         next();
       } else {
+        next();
+
         //根据参数判断是否可以跳
-        if (to.query.type && to.path == '/cosmeticsDetail') {
+        // if (to.query.type && to.path == '/cosmeticsDetail') {
-          next();
+        //   next();
-        } else {
+        // } else {
-          Message.error("无权限访问！");
+        //   Message.error("无权限访问！");
-        }
+        // }
       }
     }
   } else {

src/router/index.js

@@ -67,49 +67,90 @@ export const constantRoutes = [
     redirect: "drugArchives",
     isDiy: true,
     children: [
-  
+
       {
         path: "/drugArchives",
         name: "drugArchives",
         icon: require("@/assets/images/tree4.svg"),
         component: () => import("@/views/productsMsg/index.vue"),
-        meta: { title: "药品档案",  keepAlive:true  },
+        meta: { title: "药品档案", keepAlive: true },
+        redirect: '/drugArchives/yaopinbapz',
+        children: [
+          {
+            path: "/drugArchives/yaopinbapz",
+            name: "yaopinbapz",
+            icon: require("@/assets/images/tree4.svg"),
+            component: () => import("@/views/productsMsg/drugArchives/yaopinbapz.vue"),
+            meta: { title: "注册备案品种", keepAlive: true },
+          }, {
+            path: "/drugArchives/yaopinstscpz",
+            name: "yaopinstscpz",
+            icon: require("@/assets/images/tree4.svg"),
+            component: () => import("@/views/productsMsg/drugArchives/yaopinstscpz.vue"),
+            meta: { title: "受托生产品种", keepAlive: true },
+          },
+          {
+            path: "/drugArchives/yaopinyuanliao",
+            name: "yaopinstscpz",
+            icon: require("@/assets/images/tree4.svg"),
+            component: () => import("@/views/productsMsg/drugArchives/yaopinyuanliao.vue"),
+            meta: { title: "原料药品种", keepAlive: true },
+          },
+        ]
+
+      },
+      {
+        path: "/zyzj",
+        name: "zyzj",
+        icon: require("@/assets/images/tree4.svg"),
+        component: () => import("@/views/productsMsg/zyzj.vue"),
+        meta: { title: "传统中药制剂档案", keepAlive: true },
       },
       {
         path: "/cosmeticsArchives",
         name: "cosmeticsArchives",
         icon: require("@/assets/images/tree4.svg"),
         component: () => import("@/views/productsMsg/components/cosmeticsArchives.vue"),
-        meta: { title: "化妆品档案",keepAlive: true },
+        meta: { title: "化妆品档案", keepAlive: true },
+        redirect: '/cosmeticsArchives/bapz',
+        children: [
+          {
+            path: "/cosmeticsArchives/bapz",
+            name: "bapz",
+            icon: require("@/assets/images/tree4.svg"),
+            component: () => import("@/views/productsMsg/components/bapz.vue"),
+            meta: { title: "注册备案品种", keepAlive: true },
+          }, {
+            path: "/cosmeticsArchives/stscpz",
+            name: "stscpz",
+            icon: require("@/assets/images/tree4.svg"),
+            component: () => import("@/views/productsMsg/components/stscpz.vue"),
+            meta: { title: "受托生产品种", keepAlive: true },
+          },
+        ]
       },
       {
         path: "/cosmeticsDetail",
         name: "cosmeticsDetail",
         icon: require("@/assets/images/tree4.svg"),
         component: () => import("@/views/productsMsg/components/productInfo.vue"),
-        meta: { title: "详情",keepAlive: true },
+        meta: { title: "详情", keepAlive: true },
       },
       {
         path: "/health",
         name: "health",
         icon: require("@/assets/images/tree4.svg"),
         component: () => import("@/views/productsMsg/components/health.vue"),
-        meta: { title: "医疗器械档案", keepAlive: true},
+        meta: { title: "医疗器械档案", keepAlive: true },
-      },
-      {
-        path: "/zyzj",
-        name: "zyzj",
-        icon: require("@/assets/images/tree4.svg"),
-        component: () => import("@/views/productsMsg/zyzj.vue"),
-        meta: { title: "传统中药制剂档案", keepAlive: true},
-      },
-      {
-        path: "/portal",
-        name: "portal",
-        icon: require("@/assets/images/tree4.svg"),
-        component: () => import("@/views/portal/index.vue"),
-        meta: { title: "首页",  },
       },
+      
+      // {
+      //   path: "/portal",
+      //   name: "portal",
+      //   icon: require("@/assets/images/tree4.svg"),
+      //   component: () => import("@/views/portal/index.vue"),
+      //   meta: { title: "首页",  },
+      // },
     ]
   },
   //可以按着若依的思路来写,把菜单全部都设置成一级路由，然后有下拉选择框的去进行区别判断设置成二级子路由

src/store/modules/myselfPermission.js

@@ -52,7 +52,6 @@ const selfPermission = {
       return new Promise((resolve, reject) => {
         getselfInfo()
           .then((res) => {
-            console.log(res);
             if (res.message == '未知的token,请重新登录！' || res.status == 40002) {
               setTimeout(() => {
                 // location.href = location.origin + "/login";
@@ -72,6 +71,8 @@ const selfPermission = {
 
             //存储用户信息
             commit("SET_USERDATA", infoData.userDto);
+            console.log(789,infoData.userDto);
+         
             let ismyobj = {
               "稽查一处": "沈阳市",
               "稽查二处": "大连市",
@@ -99,6 +100,13 @@ const selfPermission = {
             // );
             // commit("SET_PERMISSIONLIST", menuButton);
             //过滤菜单
+            if(infoData.userDto.userCode == "admin"){
+              let fileTreeOut = staticRouter.filter(item=>item.meta.title !='详情')
+              fileTreeOut[0].meta.affix = true
+              commit("SET_ROUTER", fileTreeOut);
+              resolve(fileTreeOut.length > 0 ? fileTreeOut[0].path : []);
+              return 
+            }
             let menuTree = infoData.menuTree.filter(
               (item) => item.appCode == "CPGL"
             );
@@ -126,14 +134,16 @@ const selfPermission = {
 };
 
 function filterTree(tree, result) {
+ 
   tree.forEach((item) => {
     staticRouter.forEach((router, index) => {
       if (item.menuUrl == router.path) {
+        console.log(router);
         result.push(router);
       }
-      if (item.childMenuList != null) {
+      // if (item.childMenuList != null) {
-        filterTree(tree[index].childMenuList, result[index].children);
+      //   filterTree(tree[index].childMenuList, result[index].children);
-      }
+      // }
     });
   });
   return result;

src/utils/request.js

@@ -15,8 +15,8 @@ axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
 // 创建axios实例
 const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
-  // baseURL: location.origin + process.env.VUE_APP_BASE_API2,
+  baseURL: location.origin + process.env.VUE_APP_BASE_API2,
-  baseURL: process.env.VUE_APP_BASE_API2,
+  // baseURL: process.env.VUE_APP_BASE_API2, 
   // 超时
   timeout: 15000,
 });

src/views/components/MapCars.vue

@@ -99,6 +99,7 @@ export default {
     created() { },
 
     mounted() {
+        // 记录是否有身份
         this.mystort = this.$store.getters.usersort
         this.mystortTow = this.$store.getters.usersort
         this.$nextTick(() => {
@@ -136,7 +137,7 @@ export default {
 
                 }
 
-            } else if (this.echartstitle == "化妆品") {
+            } else if (this.echartstitle == "化妆品/注册备案品种" || this.echartstitle == "化妆品/委托生产品种") {
                 let msg1 = await this.$api.apparatus.gccptypecount({ area: this.mystortTow });
                 if (msg1.code == 200) {
                     msg1.data.forEach(item => {
@@ -162,7 +163,7 @@ export default {
 
                     })
                 }
-            } 
+            }
 
 
             // if (this.leafletitle == "药品") {
@@ -208,7 +209,7 @@ export default {
                 jiekou("vRdgYpwhGxwztareacount")
             } else if (this.echartstitle == "传统中药") {
                 jiekou("deasCorpTcmpFilingChangeHis")
-            } else if (this.echartstitle == "化妆品") {
+            } else if (this.echartstitle == "化妆品/注册备案品种") {
                 let msg2 = await this.$api.apparatus["gccpareacount"]({ area: data })
 
                 if (msg2.code == 200) {
@@ -258,8 +259,14 @@ export default {
                     data: this.chartData,
                     axisTick: {
                         alignWithLabel: true
-                    }
+                    },
+                    axisLabel: {
+                        formatter: function (value) {
+                            return value.split('\n').join('\n'); // 使用换行符将标签内容分行
+                        },
+                    },
                 }],
+               
                 yAxis: [{
                     type: 'value'
                 }],
@@ -267,7 +274,11 @@ export default {
                     name: 'Direct',
                     type: 'bar',
                     barWidth: '20%', // 调整柱子宽度为 20%
-                    data: this.chartDatatow
+                    data: this.chartDatatow,
+                    label: {
+                        show: true,
+                        position: 'top',
+                    },
                 }]
             };
 
@@ -451,8 +462,6 @@ export default {
             console.log();
             if (this.mylayer) {
                 if (this.mylayer.feature.properties.name == e.target.feature.properties.name) {
-
-
                     this.mylayer.setStyle({
                         weight: 0.5,
                         color: "#fff",

src/views/components/MapCarsLog.vue

@@ -0,0 +1,562 @@
+<template>
+    <div class="box" id="box">
+        <div class="btna">
+            <!--  -->
+            <el-button type="primary" :icon="collapsechange ? 'el-icon-remove-outline' : 'el-icon-circle-plus-outline '"
+                @click="collapsechange = !collapsechange">
+                {{ collapsechange ? '收起' : ' 展开' }}
+            </el-button>
+        </div>
+
+        <div class="box1" v-show="collapsechange">
+            <div class="titlestyle">生产地市统计</div>
+            <div id="leafletMap" class="leafletMap"></div>
+        </div>
+        <div class="box2" id="box2" v-show="collapsechange">
+            <div class="titlestyle">{{ echartstitle }}类型统计</div>
+            <div class="echarts" id="echarts"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+import cityJson from "@/utils/mapJson/liaoning-city.json";
+import cityCenter from "@/utils/mapJson/cityCenter.json";
+import province from "@/utils/mapJson/liaoning-province.json";
+
+
+import * as echarts from "echarts";
+import elementResizeDetectorMaker from 'element-resize-detector'
+
+export default {
+    name: 'MapCars',
+    components: {},
+    data() {
+        return {
+            collapsechange: true,
+            mygeojson: null,
+            cityData: {
+                沈阳市: 0,
+                大连市: 0,
+                鞍山市: 0,
+                抚顺市: 0,
+                本溪市: 0,
+                丹东市: 0,
+                锦州市: 0,
+                营口市: 0,
+                阜新市: 0,
+                辽阳市: 0,
+                盘锦市: 0,
+                铁岭市: 0,
+                朝阳市: 0,
+                葫芦岛市: 0,
+                沈抚示范区: 0,
+            },
+            allInspector: 0,
+            //字典
+            dict: {},
+            legendList: [
+                { color: "#28599C", text: ">=600" },
+                { color: "#3477B2", text: "400-599" },
+                { color: "#4499CE", text: "200-399" },
+                { color: "#59BBEC", text: "100-199" },
+                { color: "#9BD3F5", text: "1-99" },
+                { color: "#C5F0FF", text: "0" },
+            ],
+            globalMap: null,
+            latitude: "40.904726971438656",
+            longitude: "122.80196410332945",
+            zoom: 8,
+            maxZoom: 18,
+            minZoom: 7,
+            layerObj: {
+                provinceLayer: null,
+                cityLayer: null,
+                textLayer1: null,
+            },
+            mylayer: null,
+            myChart: null,
+            mygeojson: null,
+            mystort: null,
+            mystortTow: null,
+            chartData: ["其他"],
+            chartDatatow: [10],
+            clickShow: true,
+        };
+    },
+    props: {
+        leafletitle: {
+            type: String,
+            default: '档案'
+        },
+        echartstitle: {
+            type: String,
+            default: '档案'
+        },
+
+
+    },
+    created() { },
+
+    mounted() {
+        // 记录是否有身份
+        this.mystort = this.$store.getters.usersort
+        this.mystortTow = this.$store.getters.usersort
+        this.$nextTick(() => {
+            this.myChart = echarts.init(document.getElementById("echarts"));
+            this.isEcharts()
+            this.initMap()
+        });
+        // 监听窗口大小变化事件
+    },
+
+    methods: {
+        async isEcharts() {
+            this.chartDatatow = []
+            this.chartData = []
+            if (this.echartstitle == "医疗器械") {
+                let msg1 = await this.$api.apparatus.typecount({ area: this.mystortTow });
+                if (msg1.code == 200) {
+                    msg1.data.forEach(item => {
+                        this.chartDatatow.push(item.count)
+                        this.chartData.push(item.cplb)
+                    })
+                    this.clickShow = true
+                }
+            } else if (this.echartstitle == "药品") {
+                let msg1 = await this.$api.apparatus.vRdgYpwhGxwztypecount({ area: this.mystortTow });
+                if (msg1.code == 200) {
+                    msg1.data.forEach(item => {
+                        if (item.ypfl && item.ypfl != 'null') {
+                            this.chartDatatow.push(item.count)
+                            this.chartData.push(item.ypfl)
+                        }
+
+                    })
+                    this.clickShow = true
+
+                }
+
+            } else if (this.echartstitle == "化妆品/注册备案品种" || this.echartstitle == "化妆品/委托生产品种") {
+                let msg1 = await this.$api.apparatus.gccptypecount({ area: this.mystortTow });
+                if (msg1.code == 200) {
+                    msg1.data.forEach(item => {
+                        if (item.type && item.type != 'null') {
+                            this.chartDatatow.push(item.count)
+                            this.chartData.push(item.type)
+                        }
+
+                    })
+                    this.clickShow = true
+
+                }
+            } else if (this.echartstitle == "传统中药") {
+
+                let msg1 = await this.$api.apparatus.deasCorpTcmpFilingtypecount({ area: this.mystortTow });
+                if (msg1.code == 200 && msg1.data.length != 0) {
+                    msg1.data.forEach(item => {
+                        if (item.jx && item.jx != 'null') {
+                            this.chartDatatow.push(item.count)
+                            this.chartData.push(item.jx)
+                        }
+                        this.clickShow = true
+
+                    })
+                } else {
+                    this.chartDatatow = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0
+                    ]
+                    this.chartData = ["散剂",
+                        "片剂",
+                        "颗粒剂",
+                        "胶囊剂",
+                        "溶液剂",
+                        "乳剂",
+                        "混悬剂",
+                        "注射剂",
+                        "喷雾剂",
+                        "气雾剂",
+                        "原料药"]
+                    this.clickShow = true
+
+                }
+            }
+
+
+            // if (this.leafletitle == "药品") {
+            //     let msg1 = await this.$api.apparatus.vRdgYpwhGxwztypecount({ area: this.mystortTow });
+            //     if (msg1.code == 200) {
+            //         console.log(msg1.data);
+            //         msg1.data.forEach(item => {
+            //             let obj = {
+            //                 value: item.count,
+            //                 name: item.ypfl,
+            //             }
+            //             this.chartDatatow.push(obj)
+            //             this.chartData.push(item.ypfl)
+            //         })
+            //     }
+
+
+            // }
+            this.mycharts()
+        },
+        async isLefleat(data = '1') {
+            this.cityData = {
+                沈阳市: 0,
+                大连市: 0,
+                鞍山市: 0,
+                抚顺市: 0,
+                本溪市: 0,
+                丹东市: 0,
+                锦州市: 0,
+                营口市: 0,
+                阜新市: 0,
+                辽阳市: 0,
+                盘锦市: 0,
+                铁岭市: 0,
+                朝阳市: 0,
+                葫芦岛市: 0,
+                沈抚示范区: 0,
+            }
+            let _this = this
+            if (this.echartstitle == "医疗器械") {
+                jiekou("ylqxJnyelcpareacount")
+            } else if (this.echartstitle == "药品") {
+                jiekou("vRdgYpwhGxwztareacount")
+            } else if (this.echartstitle == "传统中药") {
+                jiekou("deasCorpTcmpFilingChangeHis")
+            } else if (this.echartstitle == "化妆品/注册备案品种") {
+                let msg2 = await this.$api.apparatus["gccpareacount"]({ area: data })
+
+                if (msg2.code == 200) {
+                    msg2.data.forEach(item => {
+
+                        this.cityData[item.area] = item.count
+                    })
+                }
+
+                this.initPoitCenter(this.cityData);
+            }
+            async function jiekou(data) {
+                let msg2 = await _this.$api.apparatus[data]()
+                if (msg2.code == 200) {
+                    msg2.data.forEach(item => {
+                        _this.cityData[item.area] = item.count
+                    })
+                }
+                _this.initPoitCenter(_this.cityData);
+
+            }
+
+        },
+        mycharts() {
+
+            let option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    formatter: function (params) {
+                        if (params && params.length > 0) {
+                            return params[0].name + ' : ' + params[0].value;
+                        }
+                        return '';
+                    },
+                },
+                grid: {
+                    left: '0%', // 增加左侧空间
+                    right: '4%',
+                    top: '6%',
+                    bottom: '0%',
+
+                    containLabel: true
+                },
+                xAxis: [{
+                    type: 'category',
+                    data: this.chartData,
+                    axisTick: {
+                        alignWithLabel: true
+                    },
+                    axisLabel: {
+                        // 移除或减少旋转角度
+                        interval: 0, // 设置为 0，每个刻度都显示
+                        rotate: -50, // 将刻度文字旋转90度
+                        formatter: function (value) {
+                            return value.split('\n').join('\n');
+                        },
+                    },
+                }],
+                yAxis: [{
+                    type: 'value',
+                  
+                }],
+                series: [{
+                    name: 'Direct',
+                    type: 'bar',
+                    barWidth: '30%', // 调整柱子宽度为 20%
+                    data: this.chartDatatow,
+                    label: {
+                        show: true,
+                        position: 'top',
+                    },
+                }],
+            };
+
+            this.myChart.setOption(option, true);
+
+
+        },
+        initMap() {
+            this.globalMap = L.map("leafletMap", {
+                center: [this.latitude, this.longitude], // 地图中心[纬度，经度]
+                // zoom: this.zoom,
+                // maxZoom: this.maxZoom,
+                // minZoom: this.minZoom,
+                zoomControl: false, // 放大缩小按钮
+                zoomSnap: 0,
+                attributionControl: false, // 右下角leaflet图标
+                scrollWheelZoom: false,
+                dragging: false,
+                doubleClickZoom: false,
+                scrollWheelZoom: false,
+                dragging: false,
+            });
+            // 省
+            this.globalMap.createPane("provinceLayer");
+            this.globalMap.getPane("provinceLayer").style.zIndex = 504;
+            this.globalMap.getPane("provinceLayer").style.pointerEvents = "none";
+            this.layerObj.provinceLayer = L.layerGroup().addTo(this.globalMap);
+            //市
+            this.globalMap.createPane("cityLayer");
+            this.globalMap.getPane("cityLayer").style.zIndex = 505;
+            this.globalMap.getPane("cityLayer").style.pointerEvents = "none";
+            this.layerObj.cityLayer = L.layerGroup().addTo(this.globalMap);
+
+            this.globalMap.createPane("textLayer1");
+            this.globalMap.getPane("textLayer1").style.zIndex = 506;
+            this.globalMap.getPane("textLayer1").style.pointerEvents = "none";
+            this.layerObj.textLayer1 = L.layerGroup().addTo(this.globalMap);
+
+            this.provinceLayer();
+            this.initCityLayer(this.cityData);
+            this.initPoitCenter(this.cityData);
+
+            this.globalMap.on('click', () => {
+                this.globalMap.fitBounds(this.mygeojson.getBounds());
+
+            })
+            this.isLefleat('1')
+
+
+        },
+        //省级图层
+        provinceLayer() {
+            this.mygeojson = L.geoJSON(province, {
+                style: function () {
+                    return {
+                        weight: 2,
+                        color: "#36527D",
+                        fillColor: "",
+                        fillOpacity: 1,
+                    };
+                },
+            }).addTo(this.layerObj.provinceLayer);
+            this.globalMap.fitBounds(this.mygeojson.getBounds());
+
+
+            let erd = elementResizeDetectorMaker();
+            let that = this;
+            erd.listenTo(document.getElementById("echarts"), function (element) {
+                that.myChart.resize();
+                that.globalMap.fitBounds(that.mygeojson.getBounds());
+
+            })
+        },
+        showinitCityLayer() {
+            this.initCityLayer(this.cityData)
+            this.mystortTow = this.$store.getters.usersort
+            this.isEcharts()
+            // this.isLefleat()
+        },
+        // 市级图层
+        initCityLayer(data) {
+            let _this = this;
+            let geojson = L.geoJSON(cityJson, {
+                onEachFeature: function onEachFeature(feature, layer) {
+                    layer.on({
+                        click: function zoomToFeature(e) {
+                            if (!_this.mystort && _this.clickShow) {
+                                _this.mystortTow = feature.properties.name
+                                _this.highlightFeature(e, geojson)
+                                _this.clickShow = false
+                            }
+
+                        },
+                    });
+                },
+                style: (geoJsonFeature) => {
+                    let num = data[geoJsonFeature.properties.name];
+                    let style = {
+                        weight: 0.5,
+                        color: "#fff",
+                        fillColor: "#87CEEB",
+                        fillOpacity: 1,
+                    };
+                    if (geoJsonFeature.properties.name == this.mystort) {
+                        style.fillColor = "#FFFF00";
+                    }
+                    return style;
+                },
+            }).addTo(this.layerObj.cityLayer);
+
+            // this.globalMap.fitBounds(geojson.getBounds());
+
+            //   市中心点
+        },
+
+        initPoitCenter(data) {
+            let ismyobj = {
+                "沈阳市": "稽查一处",
+                "大连市": "稽查二处",
+                "鞍山市": "稽查三处",
+                "抚顺市": "稽查四处",
+                "本溪市": "稽查五处",
+                "丹东市": "稽查六处",
+                "锦州市": "稽查七处",
+                "营口市": "稽查八处",
+                "阜新市": "稽查九处",
+                "辽阳市": "稽查十处",
+                "铁岭市": "稽查十一处",
+                "朝阳市": "稽查十二处",
+                "盘锦市": "稽查十三处",
+                "葫芦岛市": "稽查十四处"
+            }
+
+            // <div class="circle"></div>
+            let geoJSON = L.geoJSON(cityCenter, {
+                pointToLayer: (feature, latlng) => {
+                    if (!this.mystort && feature.properties.fName != '沈抚示范区') {
+                        return L.marker(latlng, {
+                            icon: L.divIcon({
+                                className: "city-marker",
+                                html: `<div class="marker-data">
+                        <div class="data-box">
+                            ${data[feature.properties.fName]}
+                        </div>
+                        <div class="city-name">${ismyobj[feature.properties.fName]}</div>
+                        <div class="city-name">（${feature.properties.fName}）</div>
+                    </div>`,
+                            }),
+                        });
+                    } else if (feature.properties.fName == this.mystort && feature.properties.fName != '沈抚示范区') {
+                        return L.marker(latlng, {
+                            icon: L.divIcon({
+                                className: "city-marker",
+                                html: `<div class="marker-data" >
+                        <div class="data-box">
+                            ${data[feature.properties.fName]}
+                        </div>
+                        <div class="city-name">${ismyobj[feature.properties.fName]}</div>
+                        <div class="city-name">（${feature.properties.fName}）</div>
+                    </div>`,
+                            }),
+                        });
+                    } else if (feature.properties.fName != '沈抚示范区') {
+                        return L.marker(latlng, {
+                            icon: L.divIcon({
+                                className: "city-marker",
+                                html: `<div class="marker-data">
+                       
+                        <div class="city-name">${feature.properties.fName}</div>
+                    </div>`,
+                            }),
+                        });
+                    }
+
+                },
+            }).addTo(this.layerObj.textLayer1);
+
+            // this.globalMap.fitBounds(geoJSON.getBounds());
+        },
+        highlightFeature(e, geojson) {
+            console.log();
+            if (this.mylayer) {
+                if (this.mylayer.feature.properties.name == e.target.feature.properties.name) {
+                    this.mylayer.setStyle({
+                        weight: 0.5,
+                        color: "#fff",
+                        fillColor: "#87CEEB",
+                        fillOpacity: 1,
+                    });
+
+                    this.mylayer = null;
+                    this.$emit('arealist', "")
+                    this.mystortTow = null
+                    this.isEcharts()
+                    return
+                } else {
+                    geojson.resetStyle(this.mylayer);
+
+                }
+            }
+
+            this.mylayer = e.target;
+            this.mylayer.setStyle({
+                weight: 0.3,
+                color: "#000",
+                dashArray: "",
+                fillOpacity: 1,
+                fillColor: "#FFFF00"
+            });
+            this.$emit('arealist', this.mylayer.feature.properties.name)
+            this.isEcharts()
+            this.mylayer.bringToFront();
+
+        },
+    },
+    computed: {}
+}
+</script>
+<style scoped lang='scss'>
+.box {
+    position: relative;
+    padding: 15px;
+    display: flex;
+
+    .btna {
+        position: absolute;
+        right: 20px;
+        top: -40px;
+    }
+
+    .echarts {
+        width: 45vw;
+        height: 60vh;
+    }
+
+    .box1 {
+        width: 45vw;
+        height: 60vh;
+
+        .leafletMap {
+            /* 水平居中 */
+            background-color: #fff;
+            min-width: 100%;
+            min-height: 100%;
+        }
+    }
+
+}
+
+::v-deep .leaflet-map-pane {}
+
+.titlestyle {
+    padding: 0 0 0 10px;
+    margin: 0 0 0 20px;
+    border-left: 5px solid #1e80eb;
+    color: #1e80eb;
+    font-size: 18px;
+    font-weight: 600;
+}
+</style>

src/views/index.vue

@@ -6,21 +6,42 @@
     </div>
     <div class="body-container" v-else>
       <div class="tree-menu">
-        <router-link tag="div" :to="{ path: item.path }" v-for="(item, index) in myRouter" :key="index"
+        <!-- <router-link tag="div" :to="{ path: item.path }" v-for="(item, index) in myRouter" :key="index"
           active-class="routerActive">
-          <div class="view-child" @click="$store.commit('SET_ROUTWESHOWFALS')">
+          <div class="mydiv">
-            <img :src="item.icon" alt="" class="router-icon" />
+            <div class="view-child" @click="$store.commit('SET_ROUTWESHOWFALS')">
-            {{ item.meta.title }}
+              <img :src="item.icon" alt="" class="router-icon" />
+              {{ item.meta.title }}
+            </div>
           </div>
-          <div></div>
+        </router-link> -->
-        </router-link>
+
+
+        <el-menu class="el-menu-vertical-demo" :router="true" :default-active="activeMenu">
+          <div v-for="(item, index) in myRouter" :key="item.path">
+            <el-submenu index="1" v-if="item.children">
+              <template slot="title">
+                <img :src="item.icon" alt="" class="router-icon" />
+                <span>{{ item.meta.title }}</span>
+              </template>
+              <el-menu-item-group>
+                <el-menu-item :index="itemb.path" v-for="(itemb, indexb) in item.children">{{
+                  itemb.meta.title }}</el-menu-item>
+              </el-menu-item-group>
+            </el-submenu>
+            <el-menu-item :index="item.path" v-else>
+              <img :src="item.icon" alt="" class="router-icon" />
+              <span slot="title">{{ item.meta.title }}</span>
+            </el-menu-item>
+          </div>
+        </el-menu>
+
       </div>
       <div class="view-box">
         <tags-view ref="tagsView" />
         <div class="child-views">
           <keep-alive>
             <router-view></router-view>
-
           </keep-alive>
 
         </div>
@@ -42,10 +63,17 @@ export default {
   computed: {
     //获取自定义路由
     myRouter() {
+      console.log("路由", this.$store.state.myselfPermission.routerList);
+
       return this.$store.state.myselfPermission.routerList.filter((item) => item.name != "portal");
       // return this.$store.state.myselfPermission.routerList;
       //.slice(0,this.$store.state.myselfPermission.routerList.length-1)
     },
+    activeMenu() {
+      // 返回当前激活的路由路径
+      console.log(this.$route.path);
+      return this.$route.path;
+    },
   },
   created() { },
 };
@@ -59,6 +87,12 @@ export default {
   margin-right: 10px;
 }
 
+::v-deep .el-submenu.is-active {
+  background: none !important;
+  border-radius: 5px !important;
+
+}
+
 ::v-deep .el-submenu__title {
   padding: 0 8px !important;
 }
@@ -69,7 +103,8 @@ export default {
 }
 
 ::v-deep .el-menu-item-group .el-menu-item {
-  padding-left: 35px !important;
+  align-items: center;
+  margin-left: 20px !important;
 }
 
 ::v-deep .el-menu-item-group__title {
@@ -89,12 +124,13 @@ export default {
     }
 
     .tree-menu {
+      overflow: hidden;
       background: #465970;
       width: 180px;
       box-sizing: border-box;
       padding: 14px 10px;
 
-      &>div {
+      .mydiv {
         width: 200px;
         height: 40px;
         display: flex;
@@ -142,4 +178,69 @@ export default {
     font-weight: 600;
   }
 }
+
+::v-deep .el-menu {
+  border-right: none;
+  background: none;
+
+  .router-icon {
+    display: inline-block;
+    height: 16px;
+    width: 16px;
+    margin-right: 6px;
+  }
+
+  .el-submenu__title {
+    height: 40px;
+    line-height: 40px;
+    border-radius: 5px;
+    color: #ffffff;
+
+    i {
+      color: #ffffff;
+    }
+
+    &:hover {
+      background: #1e80eb;
+      border-radius: 5px;
+    }
+
+    &:focus {
+      background: #1e80eb;
+      border-radius: 5px;
+
+    }
+  }
+
+  .is-active {
+    background: #1e80eb ;
+    border-radius: 5px ;
+  }
+
+  .el-menu-item {
+    min-width: 0;
+    // display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 400;
+    color: #ffffff;
+    padding: 0 10px;
+    margin-bottom: 5px;
+    height: 40px;
+    line-height: 40px;
+
+
+
+    &:hover {
+      background: #1e80eb;
+      border-radius: 5px;
+    }
+
+    &:focus {
+      background: #1e80eb;
+      border-radius: 5px;
+
+    }
+  }
+}
 </style>

src/views/monitor/operlog/index.vue

@@ -103,7 +103,7 @@
     </el-row>
 
     <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
-      <el-table-column type="selection" width="50" align="center" />
+      <el-table-column type="selection" width="60" align="center" />
       <el-table-column label="日志编号" align="center" prop="operId" />
       <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
       <el-table-column label="操作类型" align="center" prop="businessType">

src/views/productsMsg/components/bapz.vue

@@ -0,0 +1,781 @@
+<template>
+  <div class="container">
+    <div class="tabs">
+      <div class="headerText">
+        <div class="searchP">统计分析</div>
+      </div>
+      <div>
+        <MapCars leafletitle="化妆品" echartstitle="化妆品/注册备案品种" @arealist="arealist" ref="mapcars" v-if="MapCarsshow" />
+      </div>
+    </div>
+    <div class="tabs">
+      <div class="headerText">
+        <div class="searchP">查询条件</div>
+      </div>
+      <el-form ref="form1" :model="form1">
+        <div style="margin-top: 10px">
+          <!-- <el-row>
+            <div class="title-box">基本信息查询：</div>
+
+            <el-col :span="21">
+              <el-form-item label="查询条件">
+                <el-input v-model="form1.name" placeholder="请输入产品名称"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row> -->
+        </div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="产品名称">
+              <el-input v-model="form1.cpmc" placeholder="请输入产品名称" clearable @clear="isclear"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="注册/备案编号">
+              <el-input v-model="form1.babm" placeholder="请输入注册/备案编号" clearable @clear="isclear"></el-input>
+            </el-form-item>
+          </el-col>
+          <!-- <el-col :span="8">
+            <el-form-item label="生产企业">
+              <el-input v-model="form1.scqy" placeholder="请输入生产企业" clearable @clear="isclear"></el-input>
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="8">
+            <el-form-item label="使用人群" placeholder="请输入使用人群">
+              <el-input v-model="form1.syrq" placeholder="请输入使用人群" clearable @clear="isclear"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <!-- <el-col :span="7">
+            <el-form-item label="注册证编号">
+              <el-input v-model="form1.name" placeholder="请输入注册证编号"></el-input>
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="8">
+            <el-form-item label="化妆品类型" placeholder="请输入化妆品类型">
+              <el-select v-model="types" placeholder="请选择化妆品类型" @change="changeType">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="注册/备案人" placeholder="请输入注册/备案人">
+              <el-input v-model="form1.scqy" placeholder="请输入注册/备案人" clearable @clear="isclear"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+
+            <el-form-item label="生产企业" placeholder="请输入生产企业">
+              <el-input v-model="form1.jnfzr" placeholder="请输入生产企业" clearable @clear="isclear"></el-input>
+            </el-form-item>
+          </el-col>
+          <!-- <el-col :span="8">
+            <div class="logformitem">
+              <el-form-item label="生产企业/境内责任人" placeholder="请输入境内责任人">
+                <el-input v-model="form1.jnfzr" placeholder="生产企业/境内责任人" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </div>
+          </el-col> -->
+
+        </el-row>
+        <el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="注册/备案状态">
+                <!-- <el-input v-model="form1.status" placeholder="请输入注册/备案状态" clearable @clear="isclear"></el-input> -->
+                <el-select v-model="form1.status" placeholder="请选择注册/备案状态" >
+                <el-option v-for="item in optionsTwo" :key="item.value" :label="item.value" :value="item.value">
+                </el-option>
+              </el-select>
+              </el-form-item>
+          
+            </el-col>
+
+            <el-col :span="8">
+              <el-form-item label="生产许可证">
+                <el-input v-model="form1.scxkz" placeholder="请输入生产许可证" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-row>
+        <el-row>
+          <div class="footBox" v-show="bthshow">
+            <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
+            <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
+            <el-button type="success" icon="el-icon-circle-plus-outline" @click="collapsechange(0)">展开</el-button>
+          </div>
+        </el-row>
+        <div v-show="!bthshow">
+          <el-row>
+            <div class="title-box">产品抽检信息查询：</div>
+            <el-col :span="8">
+              <el-form-item label="检验项目">
+                <el-input v-model="form1.cjxm" placeholder="请输入检验项目" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="检验受理编号">
+                <el-input v-model="form1.jyslbh" placeholder="请输入检验受理编号" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="抽样编号">
+                <el-input v-model="form1.cybh" placeholder="请输入抽样编号" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="抽样级别">
+                <el-input v-model="form1.cyjb" placeholder="请输入抽样级别" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="抽样日期" placeholder="请输入化抽样日期">
+                <el-input v-model="form1.cyrq" placeholder="抽样日期" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <div class="title-box">不良事件信息查询：</div>
+            <el-col :span="8">
+              <el-form-item label="发生年份">
+                <el-input v-model="form1.fsnf" placeholder="请输入发生年份" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <div class="logformitem">
+                <el-form-item label="不良事件报告编号">
+                  <el-input v-model="form1.blfybgbh" placeholder="请输入不良事件报告编号" clearable @clear="isclear"></el-input>
+                </el-form-item>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="不良事件类型">
+                <el-input v-model="form1.blfylx" placeholder="请输入不良事件类型" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+
+          </el-row>
+
+          <div class="footBox " v-show="!bthshow">
+            <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
+            <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
+            <el-button type="success" icon="el-icon-remove-outline" @click="collapsechange(1)">收起</el-button>
+          </div>
+        </div>
+      </el-form>
+
+    </div>
+    <div class="tabsBottom">
+      <div class="foot-main">
+        <div class="headerText">
+          <div class="searchP">产品列表</div>
+        </div>
+        <div class="exportBtn">
+          <div>
+            <div class="mybuttom" :class="form1.allStatus == item.value ? 'mybuttomshow' : ''" v-show="types == '1'" round
+              v-for="(item, index) in btnArr" @click="xuanzelist(item)">{{
+                item.label
+              }}</div>
+          </div>
+          <el-button type="primary" icon="el-icon-edit-outline" @click="exportList()">导出</el-button>
+
+        </div>
+        <section class="table-box">
+          <div class="table-item">
+            <el-table v-loading="loading" :data="tableData" border height="500" style="width: 100%">
+              <el-table-column type="selection" width="60" align="center">
+              </el-table-column>
+              <el-table-column type="index" label="序号" width="80" align="center" />
+              <el-table-column label="产品名称" min-width="200" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.cpmc }}
+                </template>
+              </el-table-column>
+              <!-- :label="A2" -->
+              <el-table-column label="注册/备案号" min-width="270" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.bah || scope.row.zczh }}
+                </template>
+              </el-table-column>
+              <el-table-column label="注册/备案日期" min-width="200" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.sj || scope.row.pzrq || shijianguolv(scope.row.sqsj) }}
+                </template>
+              </el-table-column>
+              <el-table-column label="注册/备案状态" min-width="200" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.status }}
+                </template>
+              </el-table-column>
+              <el-table-column label="注册/备案人" min-width="250" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.zcr || scope.row.qymc }}
+                </template>
+              </el-table-column>
+              <el-table-column label="注册/备案人统一社会信用代码" min-width="300" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.tyshxydw }}
+                </template>
+              </el-table-column>
+              <el-table-column label="生产企业" min-width="250" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.scqymc || scope.row.jnzrr }}
+                </template>
+              </el-table-column>
+              <el-table-column label="生产企业许可证编号" min-width="250" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.xkzbh }}
+                </template>
+              </el-table-column>
+              <el-table-column label="生产企业地址" min-width="250" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.dzSc }}
+                </template>
+              </el-table-column>
+
+              <el-table-column label="操作" width="120" fixed="right" align="center">
+                <template slot-scope="scope">
+                  <el-button type="primary" @click="toDetail(scope.row)">详情</el-button>
+                  <!-- <el-button size="mini" plain type="warning">编辑</el-button> -->
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </section>
+        <pagination :total="total" :page="form.current" :limit="form.size" @pagination="getPagination"
+          :current-page.sync="form.current"></pagination>
+      </div>
+    </div>
+    <el-dialog title="提示" :visible.sync="showCK" width="30%">
+      <span>{{ src }}</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeDC()">取 消</el-button>
+        <el-button type="primary" @click="openDC()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { download, dchzpsj } from "../../../api/archives/updata";
+import { Notification, MessageBox, Message, Loading } from "element-ui";
+
+import MapCars from "@/views/components/MapCars.vue";
+
+export default {
+  components: { MapCars },
+  data() {
+    return {
+      MapCarsshow: true,
+      loading: false,
+      tableData: [],
+      A1: "产品名称",
+      A2: "备案编码",
+      A3: "生产企业",
+      types: "1",
+      total: 0,
+      options: [
+        {
+          value: "1",
+          label: "国产化妆品",
+        },
+        {
+          value: "2",
+          label: "国产特殊化妆品",
+        },
+        {
+          value: "3",
+          label: "进口化妆品",
+        },
+        {
+          value: "4",
+          label: "进口特殊化妆品",
+        },
+      ],
+      optionsTwo:[ {
+          value: "有效",
+          label: "有效",
+        },{
+          value: "取消备案",
+          label: "取消备案",
+        },{
+          value: "注销",
+          label: "注销",
+        },],
+      form1: {
+        babm: "",
+        cpmc: "",
+        name: "",
+        scqy: "",
+        // 统一查询
+        cjxm: "", // 检验项目
+        jyslbh: "", //检验受理编号
+        cybh: "", // 抽样编号
+        cyjb: "", // 抽样级别
+        cyrq: "", // 抽样日期
+        blfybgbh: "", // 不良事件报告编号
+        blfylx: "", //不良事件类型
+        fsnf: "", // 发生年份
+        zcrbar: "",//注册人备案人
+        jnfzr: "",//境内负责人
+        syrq: "", // 使用人群
+        status: "",
+        allStatus:"",
+        scxkz:"",
+        area: this.$store.getters.usersort
+      },
+      form: {
+        size: 20,
+        current: 1,
+        area: this.$store.getters.usersort
+      },
+      jieliuShow: true,
+
+      loadA: null,
+      showCK: false,
+      src: "",
+      bthshow: true,
+      scoltitle: "展开",
+      btnArrshow: "",
+      btnArr: [{
+        label: '全部',
+        iscss: "warning",
+        value: ""
+      }, {
+        label: '自产',
+        iscss: "success",
+        value: 1
+      }, {
+        label: '委托',
+        iscss: "primary",
+        value: 2
+      }]
+    };
+  },
+  mounted() {
+
+    this.form1.name = this.$route.query.value || "";
+    if (this.form1.name) {
+      this.searchList();
+    } else {
+      this.changeType("1");
+    }
+  },
+  created() {
+  },
+  methods: {
+    shijianguolv(data) {
+      if (data) {
+        return data.split(" ")[0]
+      } else {
+        return ""
+      }
+    },
+    // 点击input上的x号
+    isclear() {
+      this.searchList()
+    },
+    // 全部 自产 委托
+    xuanzelist(item) {
+
+      this.form1.allStatus = item.value
+      this.searchList();
+      // if(item == '全部') {}
+      // if(item == '自产') {}
+      // if(item == '委托') {}
+    },
+    arealist(area) {
+      this.form.area = area
+      this.form1.area = area
+      this.getData(this.types);
+
+    },
+    collapsechange(e) {
+      if (e == 0) {
+        this.bthshow = false
+      } else {
+        this.bthshow = true
+      }
+    },
+    openDC() {
+      this.showCK = false;
+      this.loadA = Loading.service({
+        text: "正在下载数据，请稍候",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      let query1 = {
+        //导出使用区分化妆品类型 1为国产化妆品 2为国产特殊化妆品 3为进口化妆品 4为进口特殊化妆品
+        type: this.types,
+        //生产企业
+        scqy: this.form1.scqy,
+        //产品名称
+        cpmc: this.form1.cpmc,
+        //注册证编号
+        name: this.form1.name,
+        //备案编号
+        babm: this.form1.babm,
+      };
+      dchzpsj(query1)
+        .then((res) => {
+          const blob = new Blob([res], { type: res.type });
+          // blob.text().then((res11) => console.log(res11));
+          console.log(blob.stream());
+          const link = document.createElement("a");
+          link.href = window.URL.createObjectURL(blob);
+          link.style.display = "none";
+          //到时候判断是哪个化妆品数据
+          link.download = this.filterTypes(this.types) + ".xlsx";
+          link.click();
+          this.loadA.close();
+          this.$message({
+            type: "success",
+            message: "导出成功",
+          });
+        })
+        .catch((err) => {
+          this.$message({
+            type: "info",
+            message: "导出失败",
+          });
+        });
+    },
+    closeDC() {
+      this.showCK = false;
+      this.$message({
+        type: "info",
+        message: "已取消导出",
+      });
+    },
+    exportList() {
+      this.src = `确定导出${this.form1.cpmc ? `产品名称为${this.form1.cpmc}、` : ""
+        }${this.form1.babm ? `备案编号为${this.form1.babm}、` : ""}${this.form1.scqy ? `生产企业为${this.form1.scqy}、` : ""
+        }${this.form1.name ? `注册证编号为${this.form1.name}、` : ""
+        }${`化妆品类型为${this.filterTypes(this.types)}、`}数据吗?`;
+      this.showCK = true;
+    },
+    filterTypes(e) {
+      let arr = this.options.filter((value1) => {
+        return value1.value == e;
+      });
+      return arr[0].label;
+    },
+    jieliuFunc() {
+      if (this.jieliuShow) {
+        this.getData(this.types);
+        this.jieliuShow = false;
+        setTimeout(() => {
+          this.jieliuShow = true;
+        }, 500);
+      } else {
+        this.$message("点击过快");
+      }
+    },
+    //去内嵌页面
+    toDetail(e) {
+      console.log(e);
+      let data = "";
+      if (this.types == "1") {
+        data = e.bah;
+      } else if (this.types == "2") {
+        data = e.zczh;
+      } else if (this.types == "3") {
+        data = e.bah;
+      } else if (this.types == "4") {
+        data = e.zczh;
+      }
+      //利用type区分三种档案
+      //利用flag区分四种化妆品详情 然后分别调用不同的详情接口gt
+      this.$router.push({
+        path: `/cosmeticsDetail`,
+        query: { type: "1", flag: this.types, data },
+      });
+    },
+    //搜索
+    searchList() {
+      this.form.current = 1;
+
+      for (let i in this.form1) {
+        this.form[i] = this.form1[i];
+      }
+      this.jieliuFunc();
+    },
+    getPagination(e) {
+      console.log(e);
+      this.form.current = e.page;
+      this.form.size = e.limit;
+      this.chinaCosmetics();
+    },
+    //重置
+    reset(type) {
+      this.types = "1";
+      this.form1 = {
+        babm: "",
+        cpmc: "",
+        name: "",
+        scqy: "",
+        // 统一查询
+        name: "",
+        cjxm: "",
+        jyslbh: "",
+        cybh: "",
+        cyjb: "",
+        cyrq: "",
+        blfybgbh: "",
+        blfylx: "",
+        fsnf: "",
+        status: "",
+        allStatus:"",
+        scxkz:"",
+        area: this.$store.getters.usersort
+      };
+      this.form = {
+        size: 20,
+        current: 1,
+      };
+      if (type != 1) {
+        this.$refs["mapcars"].showinitCityLayer()
+      }
+
+      this.jieliuFunc();
+    },
+    //国产化妆品
+    async chinaCosmetics() {
+      this.loading = true;
+      let msg1 = await this.$api.cosmetics.domesticList(this.form);
+      this.tableData = msg1.data.records;
+      this.total = msg1.data.total;
+      this.form.size = msg1.data.size;
+      this.form.current = msg1.data.current;
+      this.loading = false;
+    },
+    //国产特殊化妆品
+    async chinaSpecialCosmetics() {
+      this.loading = true;
+      let msg1 = await this.$api.cosmetics.specialList(this.form);
+      this.tableData = msg1.data.records;
+      this.tableData.forEach((item) => {
+        item.status = '有效'
+      })
+      this.total = msg1.data.total;
+      this.form.size = msg1.data.size;
+      this.form.current = msg1.data.current;
+      this.loading = false;
+    },
+    //进口化妆品
+    async importCosmetics() {
+      this.loading = true;
+      let msg1 = await this.$api.cosmetics.importList(this.form);
+      this.tableData = msg1.data.records;
+      this.total = msg1.data.total;
+      this.form.size = msg1.data.size;
+      this.form.current = msg1.data.current;
+      this.loading = false;
+    },
+    //进口特殊化妆品
+    async importSpecialCosmetics() {
+      this.loading = true;
+      let msg1 = await this.$api.cosmetics.importSpecialList(this.form);
+      this.tableData = msg1.data.records;
+      this.tableData.forEach((item) => {
+        item.status = '有效'
+      })
+      this.total = msg1.data.total;
+      this.form.size = msg1.data.size;
+      this.form.current = msg1.data.current;
+      this.loading = false;
+    },
+    async getData(e) {
+      if (e == "1") {
+        this.A2 = "备案编码";
+        this.A3 = "生产企业";
+        this.chinaCosmetics();
+      } else if (e == "2") {
+        this.A2 = "批准日期";
+        this.A3 = "省份";
+        this.chinaSpecialCosmetics();
+      } else if (e == "3") {
+        this.A2 = "备案编码";
+        this.A3 = "生产企业";
+        this.importCosmetics();
+      } else if (e == "4") {
+        this.A2 = "批准日期";
+        this.A3 = "省份";
+        this.importSpecialCosmetics();
+      }
+    },
+    async changeType(e) {
+      // this.reset();
+      this.$refs["mapcars"].isLefleat(e)
+
+      this.getData(e);
+    },
+  },
+  beforeRouteLeave(to, from, next) {
+    if (to.path != '/cosmeticsDetail') {
+      this.reset(1)
+    }
+    this.MapCarsshow = false
+
+    next()
+  },
+  activated(to, from, next) {
+    this.MapCarsshow = true
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog:not(.is-fullscreen) {
+  margin-top: 30vh !important;
+}
+
+::v-deep .el-dialog__body {
+  padding: 15px;
+}
+
+::v-deep .el-select {
+  width: 100% !important;
+}
+
+.container {
+  height: 100%;
+  // overflow: auto;
+  background: #f2f2f2;
+
+  .headerText {
+    width: 100%;
+    padding: 10px 20px;
+    border-bottom: 1px solid #f2f3f5;
+    color: #323233;
+    font-size: 20px;
+    font-weight: bold;
+
+    .searchP {
+      position: relative;
+      cursor: pointer;
+
+      &::before {
+        content: "";
+        width: 78px;
+        height: 3px;
+        background: #1349c5;
+        position: absolute;
+        bottom: -10px;
+      }
+    }
+  }
+
+  .tabs {
+    margin-bottom: 10px;
+    width: 100%;
+    background: #fff;
+  }
+}
+
+//===================
+::v-deep .el-button--medium {
+  padding: 8px;
+}
+
+.footBox {
+  width: 97.5%;
+  text-align: center;
+  padding-bottom: 10px;
+}
+
+.tabsBottom {
+
+  .foot-main {
+    height: 100%;
+    // min-height: 600px;
+    width: 100%;
+    background: white;
+  }
+}
+
+.exportBtn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
+}
+
+.table-box {
+  padding: 0px 20px;
+
+  .table-item {}
+}
+
+.pagination {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px 20px;
+}
+
+
+::v-deep .el-table {
+  overflow: auto;
+
+}
+
+::v-deep .el-collapse-item__header {
+  padding-left: 80vw;
+  font-size: 20px;
+  font-weight: 600;
+
+  .el-collapse-item__arrow {
+    margin-left: 20px;
+  }
+
+
+}
+
+.title-box {
+  position: relative;
+  padding-left: 30px;
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  color: #1349c5;
+}
+
+::v-deep .el-collapse {
+  border: none;
+}
+
+::v-deep .logformitem {
+  .el-form-item__label {
+    line-height: 20px;
+  }
+}
+
+.mybuttom {
+  margin: 0 10px;
+  display: inline-block;
+  padding: 5px 20px;
+  background-color: rgba(30, 128, 235, 0.1);
+  border-radius: 8px;
+  border: 1px solid #1e80eb;
+  font-size: 14px;
+  color: #1e80eb;
+  font-family: Source Han Sans CN;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #1e80eb;
+    color: #ffffff;
+    border: 1px solid #1e80eb;
+  }
+}
+
+.mybuttomshow {
+  background-color: #1e80eb;
+  color: #ffffff;
+  border: 1px solid #1e80eb;
+}
+</style>

src/views/productsMsg/components/cosmeticsArchives.vue

@@ -1,621 +1,24 @@
-<template>
+
-  <div class="container">
+<template>
-    <div class="tabs">
+    <div>
-      <div class="headerText">
+        <keep-alive>
-        <div class="searchP">统计分析</div>
+            <router-view></router-view>
-      </div>
+        </keep-alive>
-      <div>
+    </div>
-        <MapCars leafletitle="化妆品" echartstitle="化妆品"  @arealist="arealist" ref="mapcars"  v-if="MapCarsshow" />
+</template>
-      </div>
+
-    </div>
+<script>
-    <div class="tabs">
+export default {
-      <div class="headerText">
+    name: '',
-        <div class="searchP">查询条件</div>
+    components: {},
-      </div>
+    data() {
-      <el-form ref="form1" :model="form1">
+        return {
-        <div style="margin-top: 10px">
+        }
-          <!-- <el-row>
+    },
-            <div class="title-box">基本信息查询：</div>
+    created() { },
-
+    mounted() { },
-            <el-col :span="21">
+    methods: {},
-              <el-form-item label="查询条件">
+    computed: {}
-                <el-input v-model="form1.name" placeholder="请输入产品名称"></el-input>
+}
-              </el-form-item>
+</script>
-            </el-col>
+<style scoped lang='scss'></style>
-          </el-row> -->
-        </div>
-        <el-row>
-          <el-col :span="8">
-            <el-form-item label="产品名称">
-              <el-input v-model="form1.cpmc" placeholder="请输入产品名称"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="备案编号">
-              <el-input v-model="form1.babm" placeholder="请输入备案编号"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="生产企业">
-              <el-input v-model="form1.scqy" placeholder="请输入生产企业"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <!-- <el-col :span="7">
-            <el-form-item label="注册证编号">
-              <el-input v-model="form1.name" placeholder="请输入注册证编号"></el-input>
-            </el-form-item>
-          </el-col> -->
-          <el-col :span="8">
-            <el-form-item label="化妆品类型" placeholder="请输入化妆品类型">
-              <el-select v-model="types" placeholder="请选择化妆品类型" @change="changeType">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
-                </el-option>
-              </el-select> </el-form-item></el-col>
-       
-        </el-row>
-        <el-row>
-          <div class="footBox" v-show="bthshow">
-            <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
-            <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
-            <el-button type="success" icon="el-icon-circle-plus-outline" @click="collapsechange(0)">展开</el-button>
-          </div>
-        </el-row>
-        <div v-show="!bthshow">
-          <el-row>
-            <div class="title-box">产品抽检信息查询：</div>
-            <el-col :span="8">
-              <el-form-item label="检验项目">
-                <el-input v-model="form1.cjxm" placeholder="请输入检验项目"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="检验受理编号">
-                <el-input v-model="form1.jyslbh" placeholder="请输入检验受理编号"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="抽样编号">
-                <el-input v-model="form1.cybh" placeholder="请输入抽样编号"></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="8">
-              <el-form-item label="抽样级别">
-                <el-input v-model="form1.cyjb" placeholder="请输入抽样级别"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="抽样日期" placeholder="请输入化抽样日期">
-                <el-input v-model="form1.cyrq" placeholder="抽样日期"></el-input>
-               </el-form-item>
-              </el-col>
-          </el-row>
-          <el-row>
-            <div class="title-box">不良事件信息查询：</div>
-            <el-col :span="8">
-              <el-form-item label="发生年份">
-                <el-input v-model="form1.fsnf" placeholder="请输入发生年份"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <div class="logformitem">
-                <el-form-item label="不良事件报告编号">
-                  <el-input v-model="form1.blfybgbh" placeholder="请输入不良事件报告编号"></el-input>
-                </el-form-item>
-              </div>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="不良事件类型">
-                <el-input v-model="form1.blfylx" placeholder="请输入不良事件类型"></el-input>
-              </el-form-item>
-            </el-col>
-
-          </el-row>
-          <div class="footBox " v-show="!bthshow">
-            <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
-            <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
-            <el-button type="success" icon="el-icon-remove-outline" @click="collapsechange(1)">收起</el-button>
-          </div>
-        </div>
-      </el-form>
-
-    </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" @click="exportList()">导出</el-button>
-        </div>
-        <section class="table-box">
-          <div class="table-item">
-            <el-table v-loading="loading" :data="tableData" border>
-              <el-table-column type="selection" width="50" align="center">
-              </el-table-column>
-              <el-table-column type="index" label="序号" width="80" align="center"/>
-              <el-table-column label="产品名称" width="380" align="center">
-                <template slot-scope="scope">
-                  {{ scope.row.cpmc }}
-                </template>
-              </el-table-column>
-              <!-- :label="A2" -->
-              <el-table-column label="注册/备案号" width="230" align="center">
-                <template slot-scope="scope">
-                  {{ scope.row.bah || scope.row.zczh }}
-                </template>
-              </el-table-column>
-              <el-table-column label="注册/备案日期" width="240" align="center">
-                <template slot-scope="scope">
-                  {{ scope.row.sj || scope.row.pzrq }}
-                </template>
-              </el-table-column>
-              <el-table-column label="注册/备案人" width="240" align="center">
-                <template slot-scope="scope">
-                  {{ scope.row.lxr || scope.row.zcr }}
-                </template>
-              </el-table-column>
-              <el-table-column label="生产企业/境内责任人" width="280" align="center">
-                <template slot-scope="scope">
-                  {{ scope.row.qymc || scope.row.zcr || scope.row.jnzrr }}
-                </template>
-              </el-table-column>
-              <el-table-column label="操作" class-name="small-padding fixed-width" width="100" fixed="right" align="center">
-                <template slot-scope="scope">
-                  <el-button type="primary" @click="toDetail(scope.row)">详情</el-button>
-                  <!-- <el-button size="mini" plain type="warning">编辑</el-button> -->
-                </template>
-              </el-table-column>
-            </el-table>
-          </div>
-        </section>
-        <pagination :total="total" :page="form.current" :limit="form.size" @pagination="getPagination"
-          :current-page.sync="form.current"></pagination>
-      </div>
-    </div>
-    <el-dialog title="提示" :visible.sync="showCK" width="30%">
-      <span>{{ src }}</span>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="closeDC()">取 消</el-button>
-        <el-button type="primary" @click="openDC()">确 定</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { download, dchzpsj } from "../../../api/archives/updata";
-import { Notification, MessageBox, Message, Loading } from "element-ui";
-import logVue from '../../monitor/job/log.vue';
-import MapCars from "@/views/components/MapCars.vue";
-
-export default {
-  components: {MapCars},
-  data() {
-    return {
-      MapCarsshow:true,
-      loading: false,
-      tableData: [],
-      A1: "产品名称",
-      A2: "备案编码",
-      A3: "生产企业",
-      types: "1",
-      total: 0,
-      options: [
-        {
-          value: "1",
-          label: "国产化妆品",
-        },
-        {
-          value: "2",
-          label: "国产特殊化妆品",
-        },
-        {
-          value: "3",
-          label: "进口化妆品",
-        },
-        {
-          value: "4",
-          label: "进口特殊化妆品",
-        },
-      ],
-      form1: {
-        babm: "",
-        cpmc: "",
-        name: "",
-        scqy: "",
-        // 统一查询
-        name: "",
-        cjxm: "",
-        jyslbh: "",
-        cybh: "",
-        cyjb: "",
-        cyrq: "",
-        blfybgbh: "",
-        blfylx: "",
-        fsnf: "",
-        area: this.$store.getters.usersort
-      },
-      form: {
-        size: 20,
-        current: 1,
-        area: this.$store.getters.usersort
-      },
-      jieliuShow: true,
-
-      loadA: null,
-      showCK: false,
-      src: "",
-      bthshow: true,
-      scoltitle: "展开"
-    };
-  },
-  mounted() {
-    
-    this.form1.name = this.$route.query.value || "";
-    if (this.form1.name) {
-      this.searchList();
-    } else {
-      this.changeType("1");
-    }
-  },
-  created() {
-  },
-  methods: {
-    arealist(area) {
-      this.form.area = area
-      this.form1.area = area
-      this.getData(this.types);
-
-    },
-    collapsechange(e) {
-      if (e == 0) {
-        this.bthshow = false
-      } else {
-        this.bthshow = true
-      }
-    },
-    openDC() {
-      this.showCK = false;
-      this.loadA = Loading.service({
-        text: "正在下载数据，请稍候",
-        spinner: "el-icon-loading",
-        background: "rgba(0, 0, 0, 0.7)",
-      });
-      let query1 = {
-        //导出使用区分化妆品类型 1为国产化妆品 2为国产特殊化妆品 3为进口化妆品 4为进口特殊化妆品
-        type: this.types,
-        //生产企业
-        scqy: this.form1.scqy,
-        //产品名称
-        cpmc: this.form1.cpmc,
-        //注册证编号
-        name: this.form1.name,
-        //备案编号
-        babm: this.form1.babm,
-      };
-      dchzpsj(query1)
-        .then((res) => {
-          const blob = new Blob([res], { type: res.type });
-          // blob.text().then((res11) => console.log(res11));
-          console.log(blob.stream());
-          const link = document.createElement("a");
-          link.href = window.URL.createObjectURL(blob);
-          link.style.display = "none";
-          //到时候判断是哪个化妆品数据
-          link.download = this.filterTypes(this.types) + ".xlsx";
-          link.click();
-          this.loadA.close();
-          this.$message({
-            type: "success",
-            message: "导出成功",
-          });
-        })
-        .catch((err) => {
-          this.$message({
-            type: "info",
-            message: "导出失败",
-          });
-        });
-    },
-    closeDC() {
-      this.showCK = false;
-      this.$message({
-        type: "info",
-        message: "已取消导出",
-      });
-    },
-    exportList() {
-      this.src = `确定导出${this.form1.cpmc ? `产品名称为${this.form1.cpmc}、` : ""
-        }${this.form1.babm ? `备案编号为${this.form1.babm}、` : ""}${this.form1.scqy ? `生产企业为${this.form1.scqy}、` : ""
-        }${this.form1.name ? `注册证编号为${this.form1.name}、` : ""
-        }${`化妆品类型为${this.filterTypes(this.types)}、`}数据吗?`;
-      this.showCK = true;
-    },
-    filterTypes(e) {
-      let arr = this.options.filter((value1) => {
-        return value1.value == e;
-      });
-      return arr[0].label;
-    },
-    jieliuFunc() {
-      if (this.jieliuShow) {
-        this.getData(this.types);
-        this.jieliuShow = false;
-        setTimeout(() => {
-          this.jieliuShow = true;
-        }, 500);
-      } else {
-        this.$message("点击过快");
-      }
-    },
-    //去内嵌页面
-    toDetail(e) {
-      console.log(e);
-      let data = "";
-      if (this.types == "1") {
-        data = e.bah;
-      } else if (this.types == "2") {
-        data = e.zczh;
-      } else if (this.types == "3") {
-        data = e.bah;
-      } else if (this.types == "4") {
-        data = e.zczh;
-      }
-      //利用type区分三种档案
-      //利用flag区分四种化妆品详情 然后分别调用不同的详情接口gt
-      this.$router.push({
-        path: `/cosmeticsDetail`,
-        query: { type: "1", flag: this.types, data },
-      });
-    },
-    //搜索
-    searchList() {
-      this.form.current = 1;
-
-      for (let i in this.form1) {
-        this.form[i] = this.form1[i];
-      }
-      this.jieliuFunc();
-    },
-    getPagination(e) {
-      console.log(e);
-      this.form.current = e.page;
-      this.form.size = e.limit;
-      this.chinaCosmetics();
-    },
-    //重置
-    reset(type) {
-      this.types = "1";
-      this.form1 = {
-        babm: "",
-        cpmc: "",
-        name: "",
-        scqy: "",
-        // 统一查询
-        name: "",
-        cjxm: "",
-        jyslbh: "",
-        cybh: "",
-        cyjb: "",
-        cyrq: "",
-        blfybgbh: "",
-        blfylx: "",
-        fsnf: "",
-        area: this.$store.getters.usersort
-      };
-      this.form = {
-        size: 20,
-        current: 1,
-      };
-      if(type!=1){
-        this.$refs["mapcars"].showinitCityLayer()
-      }
-
-      this.jieliuFunc();
-    },
-    //国产化妆品
-    async chinaCosmetics() {
-      this.loading = true;
-      let msg1 = await this.$api.cosmetics.domesticList(this.form);
-      this.tableData = msg1.data.records;
-      this.total = msg1.data.total;
-      this.form.size = msg1.data.size;
-      this.form.current = msg1.data.current;
-      this.loading = false;
-    },
-    //国产特殊化妆品
-    async chinaSpecialCosmetics() {
-      this.loading = true;
-      let msg1 = await this.$api.cosmetics.specialList(this.form);
-      this.tableData = msg1.data.records;
-      this.total = msg1.data.total;
-      this.form.size = msg1.data.size;
-      this.form.current = msg1.data.current;
-      this.loading = false;
-    },
-    //进口化妆品
-    async importCosmetics() {
-      this.loading = true;
-      let msg1 = await this.$api.cosmetics.importList(this.form);
-      this.tableData = msg1.data.records;
-      this.total = msg1.data.total;
-      this.form.size = msg1.data.size;
-      this.form.current = msg1.data.current;
-      this.loading = false;
-    },
-    //进口特殊化妆品
-    async importSpecialCosmetics() {
-      this.loading = true;
-      let msg1 = await this.$api.cosmetics.importSpecialList(this.form);
-      this.tableData = msg1.data.records;
-      this.total = msg1.data.total;
-      this.form.size = msg1.data.size;
-      this.form.current = msg1.data.current;
-      this.loading = false;
-    },
-    async getData(e) {
-      if (e == "1") {
-        this.A2 = "备案编码";
-        this.A3 = "生产企业";
-        this.chinaCosmetics();
-      } else if (e == "2") {
-        this.A2 = "批准日期";
-        this.A3 = "省份";
-        this.chinaSpecialCosmetics();
-      } else if (e == "3") {
-        this.A2 = "备案编码";
-        this.A3 = "生产企业";
-        this.importCosmetics();
-      } else if (e == "4") {
-        this.A2 = "批准日期";
-        this.A3 = "省份";
-        this.importSpecialCosmetics();
-      }
-    },
-    async changeType(e) {
-      // this.reset();
-      this.$refs["mapcars"].isLefleat(e)
-
-      this.getData(e);
-    },
-  },
-  beforeRouteLeave(to, from, next) {
-    if (to.path != '/cosmeticsDetail') {
-      this.reset(1)
-    }
-    this.MapCarsshow = false
-
-    next()
-  },
-  activated(to, from, next) {
-    this.MapCarsshow = true
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-::v-deep .el-dialog:not(.is-fullscreen) {
-  margin-top: 30vh !important;
-}
-
-::v-deep .el-dialog__body {
-  padding: 15px;
-}
-
-::v-deep .el-select {
-  width: 100% !important;
-}
-
-.container {
-  height: 100%;
-  // overflow: auto;
-  background: #f2f2f2;
-
-  .headerText {
-    width: 100%;
-    padding: 10px 20px;
-    border-bottom: 1px solid #f2f3f5;
-    color: #323233;
-    font-size: 20px;
-    font-weight: bold;
-
-    .searchP {
-      position: relative;
-      cursor: pointer;
-
-      &::before {
-        content: "";
-        width: 78px;
-        height: 3px;
-        background: #1349c5;
-        position: absolute;
-        bottom: -10px;
-      }
-    }
-  }
-
-  .tabs {
-    margin-bottom: 10px;
-    width: 100%;
-    background: #fff;
-  }
-}
-
-//===================
-::v-deep .el-button--medium {
-  padding: 8px;
-}
-
-.footBox {
-  width:97.5%;
-  text-align: center;
-  padding-bottom: 10px;
-}
-
-.tabsBottom {
-
-  .foot-main {
-    height: 100%;
-    // min-height: 600px;
-    width: 100%;
-    background: white;
-  }
-}
-
-.exportBtn {
-  padding: 10px 20px;
-}
-
-.table-box {
-  padding: 0px 20px;
-
-  .table-item {}
-}
-
-.pagination {
-  display: flex;
-  justify-content: space-between;
-  padding: 15px 20px;
-}
-
-
-::v-deep .el-table {
-  overflow: auto;
-
-}
-
-::v-deep .el-collapse-item__header {
-  padding-left: 80vw;
-  font-size: 20px;
-  font-weight: 600;
-
-  .el-collapse-item__arrow {
-    margin-left: 20px;
-  }
-
-
-}
-
-.title-box {
-  position: relative;
-  padding-left: 30px;
-  font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 20px;
-  color: #1349c5;
-}
-
-::v-deep .el-collapse {
-  border: none;
-}
-
-::v-deep .logformitem {
-  .el-form-item__label {
-    line-height: 20px;
-  }
-}
-</style>

src/views/productsMsg/components/health.vue

@@ -28,20 +28,30 @@
         <el-row>
           <el-col :span="8">
             <el-form-item label="产品名称">
-              <el-input v-model="form1.cpmc" placeholder="请输入产品名称"></el-input>
+              <el-input v-model="form1.cpmc" placeholder="请输入产品名称" clearable @clear="isclear"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="8">
+            <div class="logformitem">
+              <el-form-item label="结构及组成或主要组成部分">
+
+                <el-input v-model="form1.jgjzccf" placeholder="请输入结构及组成或主要组成部分" clearable @clear="isclear"></el-input>
+
+              </el-form-item>
+
+            </div>
+          </el-col>
+          <!-- <el-col :span="8">
             <el-form-item label="产品类别">
               <el-select v-model="form1.cplb" placeholder="请选择产品类别">
                 <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label">
                 </el-option>
               </el-select>
             </el-form-item>
-          </el-col>
+          </el-col> -->
           <el-col :span="8">
-            <el-form-item label="生产企业">
+            <el-form-item label="注册/备案人">
-              <el-input v-model="form1.scqy" placeholder="请输入生产企业"></el-input>
+              <el-input v-model="form1.scqy" placeholder="请输入注册/备案人" clearable @clear="isclear"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
@@ -49,14 +59,14 @@
           <el-col :span="8">
             <div class="logformitem">
               <el-form-item label="注册证编号或备案编号">
-                <el-input v-model="form1.zczh" placeholder="请输入注册证编号或备案编号"></el-input>
+                <el-input v-model="form1.zczh" placeholder="请输入注册证编号或备案编号" clearable @clear="isclear"></el-input>
               </el-form-item>
             </div>
           </el-col>
           <el-col :span="8">
             <div class="logformitem">
               <el-form-item label="注册证状态/备案凭证状态">
-                <el-select v-model="form1.ppztDm" placeholder="请选择注册证/备案凭证状态">
+                <el-select v-model="form1.ppztDm" placeholder="请选择注册证/备案凭证状态" clearable @clear="isclear">
                   <el-option v-for="item in optionsTow" :key="item.value" :label="item.label" :value="item.value">
                   </el-option>
                 </el-select>
@@ -66,7 +76,8 @@
           <el-col :span="8">
             <div>
               <el-form-item label="结构特征">
-                <el-select v-model="form1.ylqxjgtz" placeholder="请选择结构特征" :disabled="form1.cplb == '第三类'">
+                <el-select v-model="form1.ylqxjgtz" placeholder="请选择结构特征" :disabled="form1.cplb == '第三类'" clearable
+                  @clear="isclear">
                   <el-option v-for="item in optionsSan" :key="item.value" :label="item.label" :value="item.label">
                   </el-option>
                 </el-select>
@@ -85,7 +96,8 @@
           <el-col :span="8">
             <div class="logformitem">
               <el-form-item label="是否为优先注册产品">
-                <el-select v-model="form1.sfYxz" placeholder="请选择是否为优先注册产品" :disabled="form1.cplb == '第三类'">
+                <el-select v-model="form1.sfYxz" placeholder="请选择是否为优先注册产品" :disabled="form1.cplb == '第三类'" clearable
+                  @clear="isclear">
                   <el-option v-for="item in optionsSi" :key="item.value" :label="item.label" :value="item.label">
                   </el-option>
                 </el-select>
@@ -95,7 +107,8 @@
           <el-col :span="8">
             <div>
               <el-form-item label="是否为创新产品">
-                <el-select v-model="form1.sfCxcp" placeholder="请选择是否为创新产品" :disabled="form1.cplb == '第一类'||form1.cplb == '第三类'">
+                <el-select v-model="form1.sfCxcp" placeholder="请选择是否为创新产品"
+                  :disabled="form1.cplb == '第一类' || form1.cplb == '第三类'" clearable @clear="isclear">
                   <el-option v-for="item in optionsSi" :key="item.value" :label="item.label" :value="item.label">
                   </el-option>
                 </el-select>
@@ -105,7 +118,8 @@
           <el-col :span="8">
             <div class="logformitem">
               <el-form-item label="是否为应急注册产品">
-                <el-select v-model="form1.sfyjzccp" placeholder="请选择是否为应急注册产品" :disabled="form1.cplb == '第三类'">
+                <el-select v-model="form1.sfyjzccp" placeholder="请选择是否为应急注册产品" :disabled="form1.cplb == '第三类'" clearable
+                  @clear="isclear">
                   <el-option v-for="item in optionsSi" :key="item.value" :label="item.label" :value="item.label">
                   </el-option>
                 </el-select>
@@ -117,7 +131,8 @@
           <el-col :span="8">
             <div class="logformitem">
               <el-form-item label="是否为附条件审批产品">
-                <el-select v-model="form1.sfFjtjspcp" placeholder="请选择是否为附条件审批产品" :disabled="form1.cplb == '第三类'">
+                <el-select v-model="form1.sfFjtjspcp" placeholder="请选择是否为附条件审批产品" :disabled="form1.cplb == '第三类'"
+                  clearable @clear="isclear">
                   <el-option v-for="item in optionsSi" :key="item.value" :label="item.label" :value="item.label">
                   </el-option>
                 </el-select>
@@ -128,22 +143,14 @@
             <div>
               <el-form-item label="分类编码">
 
-                <el-input v-model="form1.ylqxflbm" placeholder="请输入分类编码" :disabled="form1.cplb == '第三类'"></el-input>
+                <el-input v-model="form1.ylqxflbm" placeholder="请输入分类编码" :disabled="form1.cplb == '第三类'" clearable
+                  @clear="isclear"></el-input>
 
               </el-form-item>
 
             </div>
           </el-col>
-          <el-col :span="8">
-            <div class="logformitem">
-              <el-form-item label="结构及组成或主要组成部分">
-
-                <el-input v-model="form1.jgjzccf" placeholder="请输入结构及组成或主要组成部分"></el-input>
-
-              </el-form-item>
 
-            </div>
-          </el-col>
         </el-row>
         <el-row>
           <div class="footBox" v-show="bthshow">
@@ -153,7 +160,7 @@
           </div>
         </el-row>
         <div v-show="!bthshow">
-          <el-row>
+          <el-row v-if="false">
             <div class="title-box">审评受理信息查询：</div>
             <el-col :span="8">
               <el-form-item label="受理号">
@@ -172,7 +179,7 @@
             </el-col>
           </el-row>
 
-          <el-row>
+          <el-row v-if="false">
             <div class="title-box">注册检验、体系核查信息查询：</div>
             <el-col :span="8">
               <el-form-item label="样品编号">
@@ -190,7 +197,7 @@
               </el-form-item>
             </el-col>
           </el-row>
-          <el-row>
+          <el-row v-if="false">
             <el-col :span="8">
               <el-form-item label="核查受理号">
                 <el-input v-model="form1.cyjb" placeholder="请输入核查受理号"></el-input>
@@ -207,7 +214,7 @@
             </el-col>
           </el-row>
 
-          <el-row>
+          <el-row v-if="false">
             <div class="title-box">临床试验信息查询：</div>
             <el-col :span="8">
               <el-form-item label="试验日期">
@@ -225,13 +232,65 @@
               </el-form-item>
             </el-col>
           </el-row>
-          <el-row>
+          <el-row v-if="false">
             <el-col :span="8">
               <el-form-item label="试验核查日期">
                 <el-input v-model="form1.syhcrq" placeholder="请输入试验核查日期"></el-input>
               </el-form-item>
             </el-col>
           </el-row>
+
+          <el-row>
+            <div class="title-box">产品抽检信息查询：</div>
+            <el-col :span="8">
+              <el-form-item label="检验项目">
+                <el-input v-model="form1.cjxm" placeholder="请输入检验项目" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="检验受理编号">
+                <el-input v-model="form1.jyslbh" placeholder="请输入检验受理编号" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="抽样编号">
+                <el-input v-model="form1.cybh" placeholder="请输入抽样编号" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="抽样级别">
+                <el-input v-model="form1.cyjb" placeholder="请输入抽样级别" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="抽样日期" placeholder="请输入化抽样日期">
+                <el-input v-model="form1.cyrq" placeholder="抽样日期" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <div class="title-box">不良事件信息查询：</div>
+            <el-col :span="8">
+              <el-form-item label="发生年份">
+                <el-input v-model="form1.fsnf" placeholder="请输入发生年份" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <div class="logformitem">
+                <el-form-item label="不良事件报告编号">
+                  <el-input v-model="form1.blfybgbh" placeholder="请输入不良事件报告编号" clearable @clear="isclear"></el-input>
+                </el-form-item>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="不良事件类型">
+                <el-input v-model="form1.blfylx" placeholder="请输入不良事件类型" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+
+          </el-row>
           <el-row>
             <div class="footBox" v-show="!bthshow">
               <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
@@ -252,38 +311,46 @@
           <div class="searchP">产品列表</div>
         </div>
         <div class="exportBtn">
+
+          <div>
+            <div round class="mybuttom" :class="btnArrshow == item.label ? 'mybuttomshow' : ''"
+              v-for="(item, index) in btnArr" @click="xuanzelist(item)">{{ item.label
+              }}</div>
+          </div>
           <el-button type="primary" icon="el-icon-edit-outline" @click="exportList()">导出</el-button>
         </div>
         <section class="table-box">
           <div class="table-item">
-            <el-table v-loading="loading" :data="tableData" border>
+            <el-table v-loading="loading" :data="tableData" border height="500" style="width: 100%">
-              <el-table-column type="selection" width="50" align="center" />
+              <el-table-column type="selection" width="60" align="center" />
               <el-table-column type="index" label="序号" width="80" align="center" />
-              <el-table-column label="产品名称" prop="cpmc" width="180" align="center">
+              <el-table-column label="产品名称" prop="cpmc" min-width="120" align="center">
               </el-table-column>
-              <el-table-column label="产品类型" prop="cplx" width="180" align="center"></el-table-column>
+              <el-table-column label="产品类型" prop="cplx" min-width="120" align="center"></el-table-column>
-              <el-table-column label="生产企业" prop="zcsqr" width="280" align="center"></el-table-column>
+              <el-table-column label="产品管理类别" prop="cplb" min-width="160" align="center"></el-table-column>
-              <el-table-column label="产品管理类别" prop="cplb" width="180" align="center"></el-table-column>
+
-              <el-table-column label="注册证编号/备案编号" prop="zczh" width="280" align="center">
+              <el-table-column label=" 注册证状态/备案凭证状态" prop="ppztDm" min-width="280" align="center">
-              </el-table-column>
-              <el-table-column label="统一社会信用代码" prop="shxydm" width="280" align="center">
-              </el-table-column>
-              <el-table-column label="批准日期" prop="pzrq" width="200" align="center">
                 <template slot-scope="scope">
-                  {{ scope.row.pzrq.split(" ")[0] }}
+                  {{ zczt(scope.row.ppztDm) }}
                 </template>
               </el-table-column>
-              <el-table-column label="注册厂家" prop="zcsqr" width="280" align="center">
+              <el-table-column label="批准日期" prop="pzrq" min-width="120" align="center">
                 <template slot-scope="scope">
-                  {{ scope.row.zcsqr }}
+                  {{ scope.row.pzrq.split(" ")[0] }}
                 </template>
               </el-table-column>
-              <el-table-column label=" 注册证状态/备案凭证状态" prop="ppztDm" width="280" align="center">
+              <el-table-column label="注册证编号/备案编号" prop="zczh" min-width="220" align="center">
+              </el-table-column>
+              <el-table-column label="统一社会信用代码" prop="shxydm" min-width="220" align="center">
+              </el-table-column>
+              <el-table-column label="注册厂家" prop="zcsqr" min-width="160" align="center">
                 <template slot-scope="scope">
-                  {{ zczt(scope.row.ppztDm) }}
+                  {{ scope.row.zcsqr }}
                 </template>
               </el-table-column>
-              <el-table-column label="操作" class-name="small-padding fixed-width" width="100" fixed="right" align="center">
+              <el-table-column label="生产地址" prop="scdz" min-width="230" align="center"></el-table-column>
+
+              <el-table-column label="操作" width="100" fixed="right" align="center">
                 <template slot-scope="scope">
                   <el-button type="primary" @click="toDetail(scope.row)">详情</el-button>
                   <!-- <el-button size="mini" plain type="warning">编辑</el-button> -->
@@ -363,19 +430,19 @@ export default {
         current: 1,
         // 统一查询
         name: "",
-        cjxm: "",
+        cjxm: "", // 检验项目
-        jyslbh: "",
+        jyslbh: "", //检验受理编号
-        cybh: "",
+        cybh: "",  //抽样编号
-        cyjb: "",
+        cyjb: "", // 抽样级别
-        cyrq: "",
+        cyrq: "", // 抽样日期
-        blfybgbh: "",
+        blfybgbh: "", // 不良事件报告编号
-        blfylx: "",
+        blfylx: "",  // 不良事件类型
-        fsnf: "",
+        fsnf: "",  // 发生年份
-        lcsymc: "",
+
-        jcrq: "",
+        lcsymc: "", // 临床试验名称
-        syrq: "",
+        jcrq: "", // 检查日期
-        syhcrq: "",
+        syrq: "", // 试验日期
-
+        syhcrq: "", //试验核查日期
         ppztDm: "",// 注册证状态/备案凭证状态
         ylqxjgtz: '', //结构特征 1有源 2 无源
         sfCxcp: '',// 是否为创新产品 1是 2 否
@@ -384,6 +451,7 @@ export default {
         sfFjtjspcp: "",//是否为附加条件审批产品 1是 2 否
         ylqxflbm: "",//输入分类编码
         jgjzccf: "",//结构及组成或主要组成部
+        cplx: "",
         area: this.$store.getters.usersort
 
       },
@@ -399,7 +467,45 @@ export default {
       src: "",
       bthshow: true,
       scoltitle: "展开",
-      echartstlist: null
+      echartstlist: null,
+      btnArrshow: "全部",
+      btnArr: [{
+        label: '全部',
+        iscss: "warning",
+        value: '',
+        cplx: ""
+
+      }, {
+        label: '一类医疗器械',
+        iscss: "warning",
+        value: '第一类',
+        cplx: "医疗器械"
+      }, {
+        label: '一类体外试剂',
+        iscss: "warning",
+        value: '第一类',
+        cplx: "体外试剂"
+      }, {
+        label: '二类医疗器械',
+        iscss: "success",
+        value: '第二类',
+        cplx: "医疗器械"
+      }, {
+        label: '二类体体外试剂',
+        iscss: "success",
+        value: '第二类',
+        cplx: "体外试剂"
+      }, {
+        label: '三类医疗器械',
+        iscss: "primary",
+        value: '第三类',
+        cplx: "医疗器械"
+      }, {
+        label: '三类体外试剂',
+        iscss: "primary",
+        value: '第三类',
+        cplx: "体外试剂"
+      }]
     };
   },
   async mounted() {
@@ -414,6 +520,17 @@ export default {
   created() {
   },
   methods: {
+    // 点击input上的x号
+    isclear() {
+      this.searchList()
+    },
+    //全部、三类医疗器械、三类体外试剂、二类医疗器械、二类体体外试剂、一类医疗器械、一类体外试剂
+    xuanzelist(item) {
+      this.btnArrshow = item.label
+      this.form1.cplb = item.value
+      this.form1.cplx = item.cplx
+      this.searchList()
+    },
     arealist(area) {
       this.form.area = area
       this.form1.area = area
@@ -500,6 +617,7 @@ export default {
     },
     //重置
     reset(type) {
+      this.btnArrshow = '全部'
       this.form1 = {
         cplb: "",
         cpmc: "",
@@ -529,6 +647,7 @@ export default {
         sfyjzccp: "",//是否为应急注册产品 1是 2 否
         ylqxflbm: "",//输入分类编码
         jgjzccf: "",//结构及组成或主要组成部
+        cplx: "",
         area: this.$store.getters.usersort
       };
       this.form = {
@@ -651,6 +770,9 @@ export default {
 }
 
 .exportBtn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   padding: 10px 20px;
 }
 
@@ -706,4 +828,28 @@ export default {
   margin-bottom: 20px;
   color: #1349c5;
 }
-</style>
+
+.mybuttom {
+  margin: 0 10px;
+  display: inline-block;
+  padding: 5px 20px;
+  background-color: rgba(30, 128, 235, 0.1);
+  border-radius: 8px;
+  border: 1px solid #1e80eb;
+  font-size: 14px;
+  color: #1e80eb;
+  font-family: Source Han Sans CN;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #1e80eb;
+    color: #ffffff;
+    border: 1px solid #1e80eb;
+  }
+}
+
+.mybuttomshow {
+  background-color: #1e80eb;
+  color: #ffffff;
+  border: 1px solid #1e80eb;
+}</style>

src/views/productsMsg/components/stscpz.vue

@@ -0,0 +1,692 @@
+<template>
+  <div class="container">
+    <div class="tabs" v-if="false">
+      <div class="headerText">
+        <div class="searchP">统计分析</div>
+      </div>
+      <div>
+        <MapCars leafletitle="化妆品" echartstitle="化妆品/委托生产品种" @arealist="arealist" ref="mapcars" v-if="MapCarsshow" />
+      </div>
+    </div>
+    <div class="tabs">
+      <div class="headerText">
+        <div class="searchP">查询条件</div>
+      </div>
+      <el-form ref="form1" :model="form1">
+        <div style="margin-top: 10px">
+          <!-- <el-row>
+            <div class="title-box">基本信息查询：</div>
+
+            <el-col :span="21">
+              <el-form-item label="查询条件">
+                <el-input v-model="form1.name" placeholder="请输入产品名称"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row> -->
+        </div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="产品名称">
+              <el-input v-model="form1.cpmc" placeholder="请输入产品名称" clearable @clear="isclear"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="注册/备案号">
+              <el-input v-model="form1.babm" placeholder="请输入备案编号" clearable @clear="isclear"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="注册/备案人" placeholder="请输入注册/备案人">
+              <el-input v-model="form1.qymc" placeholder="请输入注册/备案人" clearable @clear="isclear"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+
+          <el-col :span="8">
+            <div class="logformitem">
+              <el-form-item label="注册/备案人统一社会信用代码">
+                <el-input v-model="form1.zcrtyshxydm" placeholder="请输入注册/备案人统一社会信用代码" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="生产企业名称">
+              <el-input v-model="form1.scqy" placeholder="请输入生产企业" clearable @clear="isclear"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="生产许可证" placeholder="请输入生产许可证">
+              <el-input v-model="form1.scqyxkzbh" placeholder="请输入生产许可证" clearable @clear="isclear"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <div class="logformitem">
+              <el-form-item label="生产企业统一社会信用代码">
+                <el-input v-model="form1.scqytyshxydm" placeholder="请输入生产企业统一社会信用代码" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="使用人群">
+              <el-input v-model="form1.syrq" placeholder="请输入检验项目" clearable @clear="isclear"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <div class="footBox" v-show="bthshow">
+            <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
+            <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
+            <!-- <el-button type="success" icon="el-icon-circle-plus-outline" @click="collapsechange(0)">展开</el-button> -->
+          </div>
+        </el-row>
+        <div v-show="!bthshow" v-if="false">
+          <el-row>
+            <div class="title-box">产品抽检信息查询：</div>
+            <el-col :span="8">
+              <el-form-item label="检验项目">
+                <el-input v-model="form1.cjxm" placeholder="请输入检验项目" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="检验受理编号">
+                <el-input v-model="form1.jyslbh" placeholder="请输入检验受理编号" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="抽样编号">
+                <el-input v-model="form1.cybh" placeholder="请输入抽样编号" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="抽样级别">
+                <el-input v-model="form1.cyjb" placeholder="请输入抽样级别" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="抽样日期" placeholder="请输入化抽样日期">
+                <el-input v-model="form1.cyrq" placeholder="抽样日期" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <div class="title-box">不良事件信息查询：</div>
+            <el-col :span="8">
+              <el-form-item label="发生年份">
+                <el-input v-model="form1.fsnf" placeholder="请输入发生年份" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <div class="logformitem">
+                <el-form-item label="不良事件报告编号">
+                  <el-input v-model="form1.blfybgbh" placeholder="请输入不良事件报告编号" clearable @clear="isclear"></el-input>
+                </el-form-item>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="不良事件类型">
+                <el-input v-model="form1.blfylx" placeholder="请输入不良事件类型" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+
+          </el-row>
+          <div class="footBox " v-show="!bthshow">
+            <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
+            <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
+            <el-button type="success" icon="el-icon-remove-outline" @click="collapsechange(1)">收起</el-button>
+          </div>
+        </div>
+      </el-form>
+
+    </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" @click="exportList()">导出</el-button>
+        </div>
+        <section class="table-box">
+          <div class="table-item">
+            <el-table v-loading="loading" :data="tableData" border height="500" >
+              <el-table-column type="selection" width="60" align="center">
+              </el-table-column>
+              <el-table-column type="index" label="序号" width="80" align="center" />
+              <el-table-column label="产品名称" min-width="180" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.cpmc }}
+                </template>
+              </el-table-column>
+              <!-- :label="A2" -->
+              <el-table-column label="注册/备案号" min-width="270" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.bah }}
+                </template>
+              </el-table-column>
+              <el-table-column label="注册/备案日期" min-width="170" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.sqsj.split(" ")[0] }}
+                </template>
+              </el-table-column>
+
+              <el-table-column label="注册/备案状态" min-width="160" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.status }}
+                </template>
+              </el-table-column>
+              <el-table-column label="注册/备案人" min-width="230" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.qymc }}
+                </template>
+              </el-table-column>
+              <el-table-column label="注册/备案人统一社会信用代码" min-width="300" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.tyshxydm }}
+                </template>
+              </el-table-column>
+              <el-table-column label="生产企业名称" min-width="220" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.scqymc }}
+                </template>
+              </el-table-column>
+
+              <el-table-column label="生产企业地址" min-width="220" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.dzScqy }}
+                </template>
+              </el-table-column>
+              <el-table-column label="生产企业统一社会信用代码" min-width="280" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.tyshxydmScqy }}
+                </template>
+              </el-table-column>
+              <el-table-column label="生产许可证" min-width="200" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.scqyXkzbh }}
+                </template>
+              </el-table-column>
+              <el-table-column label="使用人群" min-width="130" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.syrq }}
+                </template>
+              </el-table-column>
+
+              <!-- class-name="small-padding fixed-width" -->
+              <el-table-column label="操作" width="100" fixed="right" align="center">
+                <template slot-scope="scope">
+                  <el-button type="primary" @click="toDetail(scope.row)">详情</el-button>
+                  <!-- <el-button size="mini" plain type="warning">编辑</el-button> -->
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </section>
+        <pagination :total="total" :page="form.current" :limit="form.size" @pagination="getPagination"
+          :current-page.sync="form.current"></pagination>
+      </div>
+    </div>
+    <el-dialog title="提示" :visible.sync="showCK" width="30%">
+      <span>{{ src }}</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeDC()">取 消</el-button>
+        <el-button type="primary" @click="openDC()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { download, entrustedEnterexport } from "../../../api/archives/updata";
+import { Notification, MessageBox, Message, Loading } from "element-ui";
+// import logVue from '../../monitor/job/log.vue';
+import MapCars from "@/views/components/MapCars.vue";
+
+export default {
+  components: { MapCars },
+  data() {
+    return {
+      MapCarsshow: true,
+      loading: false,
+      tableData: [],
+      A1: "产品名称",
+      A2: "备案编码",
+      A3: "生产企业",
+      types: "1",
+      total: 0,
+      options: [
+        {
+          value: "1",
+          label: "化妆品/受托生产品种",
+        },
+        {
+          value: "2",
+          label: "国产特殊化妆品",
+        },
+        {
+          value: "3",
+          label: "进口化妆品",
+        },
+        {
+          value: "4",
+          label: "进口特殊化妆品",
+        },
+      ],
+      form1: {
+        babm: "",
+        cpmc: "",
+        name: "",
+        scqy: "",
+        // 统一查询
+        name: "",
+        cjxm: "",
+        jyslbh: "",
+        cybh: "",
+        cyjb: "",
+        cyrq: "",
+        blfybgbh: "",
+        blfylx: "",
+        fsnf: "",
+        qymc: "",
+        syrq:"",
+        scqyXkzbh:"",
+        zcrtyshxydm:"",//注册备案人统一社会信用代码
+        scqytyshxydm:"",//	生产企业统一社会信用代
+        scqyxkzbh:"",//生产企业许可证编号
+        area: this.$store.getters.usersort
+      },
+      form: {
+        size: 20,
+        current: 1,
+        area: this.$store.getters.usersort
+      },
+      jieliuShow: true,
+
+      loadA: null,
+      showCK: false,
+      src: "",
+      bthshow: true,
+      scoltitle: "展开"
+    };
+  },
+  mounted() {
+
+    this.form1.name = this.$route.query.value || "";
+    if (this.form1.name) {
+      this.searchList();
+    } else {
+      this.changeType("1");
+    }
+  },
+  created() {
+  },
+  methods: {
+    // 点击input上的x号
+    isclear() {
+      this.searchList()
+    },
+    arealist(area) {
+      this.form.area = area
+      this.form1.area = area
+      this.getData(this.types);
+
+    },
+    collapsechange(e) {
+      if (e == 0) {
+        this.bthshow = false
+      } else {
+        this.bthshow = true
+      }
+    },
+    openDC() {
+      this.showCK = false;
+      this.loadA = Loading.service({
+        text: "正在下载数据，请稍候",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      let query1 = {
+        //导出使用区分化妆品类型 1为国产化妆品 2为国产特殊化妆品 3为进口化妆品 4为进口特殊化妆品
+        // type: this.types,
+        //生产企业
+        scqy: this.form1.scqy,
+        //产品名称
+        cpmc: this.form1.cpmc,
+        //注册证编号
+        name: this.form1.name,
+        //备案编号
+        babm: this.form1.babm,
+      };
+      entrustedEnterexport(query1)
+        .then((res) => {
+          const blob = new Blob([res], { type: res.type });
+          // blob.text().then((res11) => console.log(res11));
+          console.log(blob.stream());
+          const link = document.createElement("a");
+          link.href = window.URL.createObjectURL(blob);
+          link.style.display = "none";
+          //到时候判断是哪个化妆品数据
+          link.download = this.filterTypes(this.types) + ".xlsx";
+          link.click();
+          this.loadA.close();
+          this.$message({
+            type: "success",
+            message: "导出成功",
+          });
+        })
+        .catch((err) => {
+          this.$message({
+            type: "info",
+            message: "导出失败",
+          });
+          this.loadA.close();
+
+        });
+    },
+    closeDC() {
+      this.showCK = false;
+      this.$message({
+        type: "info",
+        message: "已取消导出",
+      });
+    },
+    exportList() {
+      this.src = `确定导出${this.form1.cpmc ? `产品名称为${this.form1.cpmc}、` : ""
+        }${this.form1.babm ? `备案编号为${this.form1.babm}、` : ""}${this.form1.scqy ? `生产企业为${this.form1.scqy}、` : ""
+        }${this.form1.name ? `注册证编号为${this.form1.name}、` : ""
+        }${`化妆品类型为${this.filterTypes(this.types)}、`}数据吗?`;
+      this.showCK = true;
+    },
+    filterTypes(e) {
+      let arr = this.options.filter((value1) => {
+        return value1.value == e;
+      });
+      return arr[0].label;
+    },
+    jieliuFunc() {
+      if (this.jieliuShow) {
+        this.getData(this.types);
+        this.jieliuShow = false;
+        setTimeout(() => {
+          this.jieliuShow = true;
+        }, 500);
+      } else {
+        this.$message("点击过快");
+      }
+    },
+    //去内嵌页面
+    toDetail(e) {
+      console.log(e);
+      let data = "";
+      if (this.types == "1") {
+        data = e.bah;
+      } else if (this.types == "2") {
+        data = e.zczh;
+      } else if (this.types == "3") {
+        data = e.bah;
+      } else if (this.types == "4") {
+        data = e.zczh;
+      }
+      //利用 type 区分三种档案
+      //利用flag区分四种化妆品详情 然后分别调用不同的详情接口gt
+      this.$router.push({
+        path: `/cosmeticsDetail`,
+        query: { type: "1", flag: 5, data },
+      });
+    },
+    //搜索
+    searchList() {
+      this.form.current = 1;
+
+      for (let i in this.form1) {
+        this.form[i] = this.form1[i];
+      }
+      this.jieliuFunc();
+    },
+    getPagination(e) {
+      console.log(e);
+      this.form.current = e.page;
+      this.form.size = e.limit;
+      this.chinaCosmetics();
+    },
+    //重置
+    reset(type) {
+      this.types = "1";
+      this.form1 = {
+        babm: "",
+        cpmc: "",
+        name: "",
+        scqy: "",
+        // 统一查询
+        name: "",
+        cjxm: "",
+        jyslbh: "",
+        cybh: "",
+        cyjb: "",
+        cyrq: "",
+        blfybgbh: "",
+        blfylx: "",
+        fsnf: "",
+        qymc: "",
+        syrq:"",
+        scqyXkzbh:"",
+        zcrtyshxydm:"",//注册备案人统一社会信用代码
+        scqytyshxydm:"",//	生产企业统一社会信用代
+        scqyxkzbh:"",//生产企业许可证编号
+        area: this.$store.getters.usersort
+      };
+      this.form = {
+        size: 20,
+        current: 1,
+      };
+      if (type != 1) {
+        // this.$refs["mapcars"].showinitCityLayer()
+      }
+
+      this.jieliuFunc();
+    },
+    //国产化妆品
+    async chinaCosmetics() {
+      this.loading = true;
+      let msg1 = await this.$api.cosmetics.entrustedEnter(this.form);
+      this.tableData = msg1.data.records;
+      this.total = msg1.data.total;
+      this.form.size = msg1.data.size;
+      this.form.current = msg1.data.current;
+      this.loading = false;
+    },
+    //国产特殊化妆品
+    async chinaSpecialCosmetics() {
+      this.loading = true;
+      let msg1 = await this.$api.cosmetics.specialList(this.form);
+      this.tableData = msg1.data.records;
+      this.total = msg1.data.total;
+      this.form.size = msg1.data.size;
+      this.form.current = msg1.data.current;
+      this.loading = false;
+    },
+    //进口化妆品
+    async importCosmetics() {
+      this.loading = true;
+      let msg1 = await this.$api.cosmetics.importList(this.form);
+      this.tableData = msg1.data.records;
+      this.total = msg1.data.total;
+      this.form.size = msg1.data.size;
+      this.form.current = msg1.data.current;
+      this.loading = false;
+    },
+    //进口特殊化妆品
+    async importSpecialCosmetics() {
+      this.loading = true;
+      let msg1 = await this.$api.cosmetics.importSpecialList(this.form);
+      this.tableData = msg1.data.records;
+      this.total = msg1.data.total;
+      this.form.size = msg1.data.size;
+      this.form.current = msg1.data.current;
+      this.loading = false;
+    },
+    async getData(e) {
+      if (e == "1") {
+        this.A2 = "备案编码";
+        this.A3 = "生产企业";
+        this.chinaCosmetics();
+      } else if (e == "2") {
+        this.A2 = "批准日期";
+        this.A3 = "省份";
+        this.chinaSpecialCosmetics();
+      } else if (e == "3") {
+        this.A2 = "备案编码";
+        this.A3 = "生产企业";
+        this.importCosmetics();
+      } else if (e == "4") {
+        this.A2 = "批准日期";
+        this.A3 = "省份";
+        this.importSpecialCosmetics();
+      }
+    },
+    async changeType(e) {
+      // this.reset();
+      // this.$refs["mapcars"].isLefleat(e)
+      this.getData(e);
+    },
+  },
+  beforeRouteLeave(to, from, next) {
+    if (to.path != '/cosmeticsDetail') {
+      this.reset(1)
+    }
+    this.MapCarsshow = false
+
+    next()
+  },
+  activated(to, from, next) {
+    this.MapCarsshow = true
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog:not(.is-fullscreen) {
+  margin-top: 30vh !important;
+}
+
+::v-deep .el-dialog__body {
+  padding: 15px;
+}
+
+::v-deep .el-select {
+  width: 100% !important;
+}
+
+.container {
+  height: 100%;
+  // overflow: auto;
+  background: #f2f2f2;
+
+  .headerText {
+    width: 100%;
+    padding: 10px 20px;
+    border-bottom: 1px solid #f2f3f5;
+    color: #323233;
+    font-size: 20px;
+    font-weight: bold;
+
+    .searchP {
+      position: relative;
+      cursor: pointer;
+
+      &::before {
+        content: "";
+        width: 78px;
+        height: 3px;
+        background: #1349c5;
+        position: absolute;
+        bottom: -10px;
+      }
+    }
+  }
+
+  .tabs {
+    margin-bottom: 10px;
+    width: 100%;
+    background: #fff;
+  }
+}
+
+//===================
+::v-deep .el-button--medium {
+  padding: 8px;
+}
+
+.footBox {
+  width: 97.5%;
+  text-align: center;
+  padding-bottom: 10px;
+}
+
+.tabsBottom {
+
+  .foot-main {
+    height: 100%;
+    // min-height: 600px;
+    width: 100%;
+    background: white;
+  }
+}
+
+.exportBtn {
+  padding: 10px 20px;
+}
+
+.table-box {
+  padding: 0px 20px;
+
+  .table-item {}
+}
+
+.pagination {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px 20px;
+}
+
+
+::v-deep .el-table {
+  overflow: auto;
+
+}
+
+::v-deep .el-collapse-item__header {
+  padding-left: 80vw;
+  font-size: 20px;
+  font-weight: 600;
+
+  .el-collapse-item__arrow {
+    margin-left: 20px;
+  }
+
+
+}
+
+.title-box {
+  position: relative;
+  padding-left: 30px;
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  color: #1349c5;
+}
+
+::v-deep .el-collapse {
+  border: none;
+}
+
+::v-deep .logformitem {
+  .el-form-item__label {
+    line-height: 20px;
+  }
+}
+</style>

src/views/productsMsg/drugArchives/yaopinbapz.vue

@@ -0,0 +1,647 @@
+<template>
+  <div class="container">
+    <div class="tabs">
+      <div class="headerText">
+        <div class="searchP">统计分析</div>
+      </div>
+      <div>
+        <MapCars leafletitle="药品" echartstitle="药品" @arealist="arealist" ref="mapcars" v-if="MapCarsshow" />
+      </div>
+    </div>
+    <div class="tabs">
+      <div class="headerText">
+        <div class="searchP">查询条件</div>
+      </div>
+      <el-form ref="form1" :model="form1">
+        <div style="margin-top: 10px">
+          <!-- <el-row>
+              <el-col :span="21">
+                <el-form-item label="查询条件">
+                  <el-input v-model="form1.name" placeholder="请输入产品名称"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row> -->
+        </div>
+
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="产品名称">
+              <el-input v-model="form1.cpmc" placeholder="请输入产品名称" clearable @clear="isclear"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="药品分类">
+              <el-select v-model="form1.ypfl" placeholder="请选择药品分类" clearable @clear="isclear">
+                <el-option v-for="item in ypType" :key="item" :label="item" :value="item">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="批准文号">
+              <el-input v-model="form1.pzwh" placeholder="请输入批准文号" clearable @clear="isclear"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="生产单位">
+              <el-input v-model="form1.scqy" placeholder="请输入生产单位" clearable @clear="isclear"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="剂型">
+              <el-select v-model="form1.jx" placeholder="请选择剂型" clearable @clear="isclear">
+                <el-option v-for="item in jxType" :key="item" :label="item" :value="item">
+                </el-option>
+              </el-select> </el-form-item></el-col>
+          <el-col :span="8">
+            <el-form-item label="持有人">
+              <el-input v-model="form1.ssxkcyr" placeholder="请输入持有人" clearable @clear="isclear"></el-input>
+            </el-form-item></el-col>
+
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="药品编码">
+              <el-input v-model="form1.ypbm" placeholder="请输入药品编码" clearable @clear="isclear"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <div class="footBox" v-show="bthshow">
+          <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
+          <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
+          <el-button type="success" icon="el-icon-circle-plus-outline" @click="collapsechange(0)">展开</el-button>
+        </div>
+        <div v-show="!bthshow">
+          <el-row>
+            <div class="title-box">产品抽检信息查询：</div>
+            <el-col :span="8">
+              <el-form-item label="检验项目">
+                <el-input v-model="form1.cjxm" placeholder="请输入检验项目" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="检验受理编号">
+                <el-input v-model="form1.jyslbh" placeholder="请输入检验受理编号" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="抽样编号">
+                <el-input v-model="form1.cybh" placeholder="请输入抽样编号" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="抽样级别">
+                <el-input v-model="form1.cyjb" placeholder="请输入抽样级别" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="抽样日期" placeholder="请输入化抽样日期">
+                <el-input v-model="form1.cyrq" placeholder="抽样日期" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <div class="title-box">不良事件信息查询：</div>
+            <el-col :span="8">
+              <el-form-item label="发生年份">
+                <el-input v-model="form1.fsnf" placeholder="请输入发生年份" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <div class="logformitem">
+                <el-form-item label="不良事件报告编号">
+                  <el-input v-model="form1.blfybgbh" placeholder="请输入不良事件报告编号" clearable @clear="isclear"></el-input>
+                </el-form-item>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="不良事件类型">
+                <el-input v-model="form1.blfylx" placeholder="请输入不良事件类型" clearable @clear="isclear"></el-input>
+              </el-form-item>
+            </el-col>
+
+          </el-row>
+          <div class="footBox " v-show="!bthshow">
+            <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
+            <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
+            <el-button type="success" icon="el-icon-remove-outline" @click="collapsechange(1)">收起</el-button>
+          </div>
+        </div>
+      </el-form>
+
+    </div>
+    <div class="tabsBottom">
+      <div class="foot-main">
+        <div class="headerText">
+          <div class="searchP">药品列表</div>
+        </div>
+        <div class="exportBtn">
+          <div>
+            <div class="mybuttom" :class="btnShow == item.value ? 'mybuttomshow' : ''" round
+              v-for="(item, index) in btnArr" @click="xuanzelist(item)">{{
+                item.label
+              }}</div>
+          </div>
+          <el-button type="primary" icon="el-icon-edit-outline" @click="exportList()">导出</el-button>
+        </div>
+        <section class="table-box">
+          <div class="table-item">
+            <el-table v-loading="loading" :data="tableData" border height="500" style="width: 100%">
+              <el-table-column type="index" label="序号" width="80" align="center" />
+              <el-table-column label="产品名称" min-width="160" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.yptymc }}
+                </template>
+              </el-table-column>
+              <el-table-column label="批准文号" min-width="160" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.yppzwh }}
+                </template>
+              </el-table-column>
+              <el-table-column label="药品分类" min-width="120" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.ypfl }}
+                </template>
+              </el-table-column>
+              <el-table-column label="剂型" min-width="100" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.jx }}
+                </template>
+              </el-table-column>
+              <el-table-column label="规格" min-width="120" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.ypgg }}
+                </template>
+              </el-table-column>
+              <el-table-column label="批准日期" min-width="110" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.pzrq }}
+                </template>
+              </el-table-column>
+              <el-table-column label="批准文号限期" min-width="140" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.yppzwhyxq }}
+                </template>
+              </el-table-column>
+              <el-table-column label="生产单位" min-width="170" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.ypscqymc }}
+                </template>
+              </el-table-column>
+              <el-table-column label="生产地址" min-width="170" align="center">
+                <template slot-scope="scope">
+                  <div class="norepet">{{ scope.row.scdz }}</div>
+                </template>
+              </el-table-column>
+              <!-- <el-table-column label="生产企业" min-width="230" align="center">
+                  <template slot-scope="scope">
+                    {{ scope.row.ypscqymc }}
+                  </template>
+                </el-table-column> -->
+              <el-table-column label="操作" width="100" fixed="right" align="center">
+                <template slot-scope="scope">
+                  <el-button type="primary" @click="toDetail(scope.row)">查看</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </section>
+        <pagination :total="total" :page="form.current" :limit="form.size" @pagination="getPagination"
+          :current-page.sync="form.current" :page-sizes="[5, 10, 20]"></pagination>
+      </div>
+    </div>
+    <el-dialog title="提示" :visible.sync="showCK" width="30%">
+      <span>{{ src }}</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeDC()">取 消</el-button>
+        <el-button type="primary" @click="openDC()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+  
+<script>
+import { download, dcyp } from "../../../api/archives/updata";
+import { Notification, MessageBox, Message, Loading, TabPane } from "element-ui";
+import MapCars from "@/views/components/MapCars.vue";
+
+export default {
+  components: {
+    MapCars,
+  },
+  data() {
+    return {
+      MapCarsshow: true,
+      bthshow: true,
+
+      //===========
+      loading: false,
+      tableData: [],
+      total: 0,
+      form1: {
+        cpmc: "", //产品名称
+        jx: "", //剂型
+        pzwh: "", //批准文号
+        scqy: "",//生产单位
+        ypfl: "", //药品分类
+        name: "",
+        ssxkcyr: "", // 持有人
+        ypbm: "", //药品编码
+        sfyblfy: "",  //是否有不良反应
+        // 统一查询
+        cjxm: "", // 检验项目
+        jyslbh: "", //检验受理编号
+        cybh: "", //抽样编号
+        cyjb: "", // 抽样级别
+        cyrq: "", // 抽样日期
+        blfybgbh: "", // 不良事件报告编号
+        blfylx: "", // 不良事件类型
+        fsnf: "", // 发生年份
+        area: this.$store.getters.usersort,
+        myEntrust: "全部",
+        type: ""
+      },
+      form: {
+        size: 20,
+        current: 1,
+        area: this.$store.getters.usersort,
+        myEntrust: "全部",
+        type: ""
+      },
+      //药品分类
+      ypType: ["中药", "生物制品", "化学药品"],
+      //剂型
+      jxType: [
+        "散剂",
+        "片剂",
+        "颗粒剂",
+        "胶囊剂",
+        "溶液剂",
+        "乳剂",
+        "混悬剂",
+        "注射剂",
+        "喷雾剂",
+        "气雾剂",
+        "原料药"
+      ],
+      shif: ["是", "否"],
+      btnArr: [{
+        label: '全部',
+        iscss: "warning",
+        value: "全部"
+      }, {
+        label: '自产',
+        iscss: "success",
+        value: '自产'
+      }, {
+        label: '委托',
+        iscss: "primary",
+        value: '委托'
+      }],
+      btnShow: "全部",
+      jieliuShow: true,
+
+      loadA: null,
+      showCK: false,
+      src: "",
+    };
+  },
+  mounted() {
+    this.form1.name = this.$route.query.value || "";
+    if (this.form1.name) {
+      this.searchList();
+    } else {
+      this.chinaCosmetics(1);
+    }
+  },
+  created() {
+
+  },
+  methods: {
+    // 全部 自产 委托
+    xuanzelist(item) {
+      this.btnShow=item.label
+      if (item.label == '全部') {
+        this.form1.myEntrust = '全部';
+        this.form1.type = "";
+      } else {
+        this.form1.myEntrust = ''
+        this.form1.type = item.label;
+      }
+      this.searchList();
+      // if(item == '全部') {}
+      // if(item == '自产') {}
+      // if(item == '委托') {}
+    },
+    // 点击input上的x号
+    isclear() {
+      this.searchList()
+    },
+    // 展开收起按钮
+    collapsechange(e) {
+      if (e == 0) {
+        this.bthshow = false
+      } else {
+        this.bthshow = true
+      }
+    },
+    // echarts lefet 回调函数
+    arealist(area) {
+      this.form.area = area
+      this.form1.area = area
+      this.chinaCosmetics()
+    },
+    // 确定导出
+    openDC() {
+      this.showCK = false;
+      this.loadA = Loading.service({
+        text: "正在下载数据，请稍候",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      dcyp(this.form1).then((res) => {
+        const blob = new Blob([res], { type: res.type });
+        const link = document.createElement("a");
+        link.href = window.URL.createObjectURL(blob);
+        link.style.display = "none";
+        link.download = "药品" + ".xlsx";
+        link.click();
+        this.loadA.close();
+        this.$message({
+          type: "success",
+          message: "导出成功",
+        }).catch((err) => {
+          this.$message({
+            type: "info",
+            message: "导出失败",
+          });
+        });
+      });
+    },
+    // 取消导出
+    closeDC() {
+      this.showCK = false;
+      this.$message({
+        type: "info",
+        message: "已取消导出",
+      });
+    },
+    // 导出按钮
+    exportList() {
+      this.src = `确定导出${this.form1.cpmc ? `产品名称为${this.form1.cpmc}、` : ""
+        }${this.form1.ypfl ? `药品分类为${this.form1.ypfl}、` : ""}${this.form1.pzwh ? `批准文号为${this.form1.pzwh}、` : ""
+        }${this.form1.scqy ? `生产单位为${this.form1.scqy}、` : ""}${this.form1.jx ? `剂型为${this.form1.jx}、` : ""
+        }数据吗?`;
+      this.showCK = true;
+    },
+    // 查询按钮
+    jieliuFunc() {
+      if (this.jieliuShow) {
+        this.chinaCosmetics();
+        this.jieliuShow = false;
+        setTimeout(() => {
+          this.jieliuShow = true;
+        }, 500);
+      } else {
+        this.$message("点击过快");
+      }
+    },
+    //去内嵌页面
+    toDetail(e) {
+      setTimeout(() => {
+        this.$router.push({
+          path: `/cosmeticsDetail`,
+          query: { type: "2", data: e.yppzwh },
+        });
+      }, 1000);
+    },
+    //搜索
+    searchList() {
+      this.form.current = 1;
+      for (let i in this.form1) {
+        this.form[i] = this.form1[i];
+      }
+      this.jieliuFunc();
+    },
+    // 分页
+    getPagination(e) {
+      this.form.current = e.page;
+      this.form.size = e.limit;
+      this.chinaCosmetics(1);
+    },
+    //重置
+    reset(type) {
+      this.btnShow = '全部'
+      this.form1 = {
+        //产品名称
+        cpmc: "",
+        //剂型
+        jx: "",
+        //批准文号
+        pzwh: "",
+        //生产单位
+        scqy: "",
+        //药品分类
+        ypfl: "",
+        // 统一查询
+        name: "",
+        // 是否抽检
+        ssxkcyr: "",
+        ypbm: "",
+        //是否有不良反应
+        sfyblfy: "",
+        // 统一查询
+        cjxm: "",
+        jyslbh: "",
+        cybh: "",
+        cyjb: "",
+        cyrq: "",
+        blfybgbh: "",
+        blfylx: "",
+        fsnf: "",
+        myEntrust: "全部",
+        type: "",
+        area: this.$store.getters.usersort
+
+      };
+      this.form = {
+        size: 20,
+        current: 1,
+        area: this.$store.getters.usersort,
+        myEntrust: "全部",
+        type: ""
+      };
+      if (type != 1) {
+        this.$refs["mapcars"].showinitCityLayer()
+      }
+      this.jieliuFunc();
+    },
+    // 药品
+    async chinaCosmetics() {
+      this.loading = true;
+      let msg1 = await this.$api.cosmetics.vRdgYpwhGxwz(this.form);
+      this.tableData = msg1.data.records;
+      this.total = msg1.data.total;
+      this.form.size = msg1.data.size;
+      this.form.current = msg1.data.current;
+      this.loading = false;
+    },
+  },
+  beforeRouteLeave(to, from, next) {
+    if (to.path != '/cosmeticsDetail') {
+      this.reset(1)
+      this.MapCarsshow = false
+    }
+    next()
+  },
+  activated(to, from, next) {
+    this.MapCarsshow = true
+
+  }
+
+};
+</script>
+  
+<style lang="scss" scoped>
+::v-deep .el-dialog:not(.is-fullscreen) {
+  margin-top: 30vh !important;
+}
+
+::v-deep .el-dialog__body {
+  padding: 15px;
+}
+
+::v-deep .el-select {
+  width: 100% !important;
+}
+
+.container {
+  height: 100%;
+  // overflow: auto;
+  background: #f2f2f2;
+
+  .headerText {
+    width: 100%;
+    padding: 10px 20px;
+    border-bottom: 1px solid #f2f3f5;
+    color: #323233;
+    font-size: 20px;
+    font-weight: bold;
+
+    .searchP {
+      position: relative;
+      cursor: pointer;
+
+      &::before {
+        content: "";
+        width: 78px;
+        height: 3px;
+        background: #1349c5;
+        position: absolute;
+        bottom: -10px;
+      }
+    }
+  }
+
+  .tabs {
+    width: 100%;
+    background: #fff;
+    margin-bottom: 10px;
+
+
+  }
+}
+
+//===================
+::v-deep .el-button--medium {
+  padding: 8px;
+}
+
+.footBox {
+  width: 97.5%;
+  text-align: center;
+  padding-bottom: 10px;
+}
+
+.tabsBottom {
+  // height: 70%;
+
+  .foot-main {
+    height: 100%;
+    // min-height: 600px;
+    width: 100%;
+    background: white;
+  }
+}
+
+.exportBtn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
+}
+
+.table-box {
+  overflow-y: auto;
+  padding: 0 20px;
+
+  .table-item {}
+}
+
+.pagination {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px 20px;
+}
+
+
+
+::v-deep .el-table {
+  overflow: auto;
+}
+
+::v-deep .logformitem {
+  .el-form-item__label {
+    line-height: 20px;
+  }
+}
+
+.title-box {
+  position: relative;
+  padding-left: 30px;
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  color: #1349c5;
+}
+
+.mybuttom {
+  margin: 0 10px;
+  display: inline-block;
+  padding: 5px 20px;
+  background-color: rgba(30, 128, 235, 0.1);
+  border-radius: 8px;
+  border: 1px solid #1e80eb;
+  font-size: 14px;
+  color: #1e80eb;
+  font-family: Source Han Sans CN;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #1e80eb;
+    color: #ffffff;
+    border: 1px solid #1e80eb;
+  }
+}
+
+.mybuttomshow {
+  background-color: #1e80eb;
+  color: #ffffff;
+  border: 1px solid #1e80eb;
+}
+</style>
+  

src/views/productsMsg/drugArchives/yaopinstscpz.vue

@@ -0,0 +1,582 @@
+<template>
+    <div class="container">
+        <!-- <div class="tabs">
+            <div class="headerText">
+                <div class="searchP">统计分析</div>
+            </div>
+            <div>
+                <MapCars leafletitle="药品" echartstitle="药品" @arealist="arealist" ref="mapcars" v-if="MapCarsshow" />
+            </div>
+        </div> -->
+        <div class="tabs">
+            <div class="headerText">
+                <div class="searchP">查询条件</div>
+            </div>
+            <el-form ref="form1" :model="form1">
+                <div style="margin-top: 10px">
+                    <!-- <el-row>
+              <el-col :span="21">
+                <el-form-item label="查询条件">
+                  <el-input v-model="form1.name" placeholder="请输入产品名称"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row> -->
+                </div>
+
+                <el-row>
+                    <el-col :span="8">
+                        <el-form-item label="产品名称">
+                            <el-input v-model="form1.cpmc" placeholder="请输入产品名称" clearable @clear="isclear"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="药品分类">
+                            <el-select v-model="form1.ypfl" placeholder="请选择药品分类" clearable @clear="isclear">
+                                <el-option v-for="item in ypType" :key="item" :label="item" :value="item">
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="批准文号">
+                            <el-input v-model="form1.pzwh" placeholder="请输入批准文号" clearable @clear="isclear"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="8">
+                        <el-form-item label="生产单位">
+                            <el-input v-model="form1.scqy" placeholder="请输入生产单位" clearable @clear="isclear"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="剂型">
+                            <el-select v-model="form1.jx" placeholder="请选择剂型" clearable @clear="isclear">
+                                <el-option v-for="item in jxType" :key="item" :label="item" :value="item">
+                                </el-option>
+                            </el-select> </el-form-item></el-col>
+                    <el-col :span="8">
+                        <el-form-item label="持有人">
+                            <el-input v-model="form1.ssxkcyr" placeholder="请输入持有人" clearable @clear="isclear"></el-input>
+                        </el-form-item></el-col>
+
+                </el-row>
+                <el-row>
+                    <el-col :span="8">
+                        <el-form-item label="药品编码">
+                            <el-input v-model="form1.ypbm" placeholder="请输入药品编码" clearable @clear="isclear"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <div class="footBox" v-show="bthshow">
+                    <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
+                    <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
+                    <el-button type="success" icon="el-icon-circle-plus-outline" @click="collapsechange(0)">展开</el-button>
+                </div>
+                <div v-show="!bthshow">
+                    <el-row>
+                        <div class="title-box">产品抽检信息查询：</div>
+                        <el-col :span="8">
+                            <el-form-item label="检验项目">
+                                <el-input v-model="form1.cjxm" placeholder="请输入检验项目" clearable @clear="isclear"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item label="检验受理编号">
+                                <el-input v-model="form1.jyslbh" placeholder="请输入检验受理编号" clearable
+                                    @clear="isclear"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item label="抽样编号">
+                                <el-input v-model="form1.cybh" placeholder="请输入抽样编号" clearable @clear="isclear"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="8">
+                            <el-form-item label="抽样级别">
+                                <el-input v-model="form1.cyjb" placeholder="请输入抽样级别" clearable @clear="isclear"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item label="抽样日期" placeholder="请输入化抽样日期">
+                                <el-input v-model="form1.cyrq" placeholder="抽样日期" clearable @clear="isclear"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <div class="title-box">不良事件信息查询：</div>
+                        <el-col :span="8">
+                            <el-form-item label="发生年份">
+                                <el-input v-model="form1.fsnf" placeholder="请输入发生年份" clearable @clear="isclear"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <div class="logformitem">
+                                <el-form-item label="不良事件报告编号">
+                                    <el-input v-model="form1.blfybgbh" placeholder="请输入不良事件报告编号" clearable
+                                        @clear="isclear"></el-input>
+                                </el-form-item>
+                            </div>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item label="不良事件类型">
+                                <el-input v-model="form1.blfylx" placeholder="请输入不良事件类型" clearable
+                                    @clear="isclear"></el-input>
+                            </el-form-item>
+                        </el-col>
+
+                    </el-row>
+                    <div class="footBox " v-show="!bthshow">
+                        <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
+                        <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
+                        <el-button type="success" icon="el-icon-remove-outline" @click="collapsechange(1)">收起</el-button>
+                    </div>
+                </div>
+            </el-form>
+
+        </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" @click="exportList()">导出</el-button>
+                </div>
+                <section class="table-box">
+                    <div class="table-item">
+                        <el-table v-loading="loading" :data="tableData" border height="500" style="width: 100%">
+                            <el-table-column type="index" label="序号" width="80" align="center" />
+                            <el-table-column label="产品名称" min-width="160" align="center">
+                                <template slot-scope="scope">
+                                    {{ scope.row.yptymc }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="批准文号" min-width="160" align="center">
+                                <template slot-scope="scope">
+                                    {{ scope.row.yppzwh }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="药品分类" min-width="120" align="center">
+                                <template slot-scope="scope">
+                                    {{ scope.row.ypfl }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="剂型" min-width="100" align="center">
+                                <template slot-scope="scope">
+                                    {{ scope.row.jx }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="规格" min-width="120" align="center">
+                                <template slot-scope="scope">
+                                    {{ scope.row.ypgg }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="批准日期" min-width="110" align="center">
+                                <template slot-scope="scope">
+                                    {{ scope.row.pzrq }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="批准文号限期" min-width="140" align="center">
+                                <template slot-scope="scope">
+                                    {{ scope.row.yppzwhyxq }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="生产单位" min-width="170" align="center">
+                                <template slot-scope="scope">
+                                    {{ scope.row.ypscqymc }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="生产地址" min-width="170" align="center">
+                                <template slot-scope="scope">
+                                    <div class="norepet">{{ scope.row.scdz }}</div>
+                                </template>
+                            </el-table-column>
+                            <!-- <el-table-column label="生产企业" min-width="230" align="center">
+                  <template slot-scope="scope">
+                    {{ scope.row.ypscqymc }}
+                  </template>
+                </el-table-column> -->
+                            <el-table-column label="操作" width="100" fixed="right" align="center">
+                                <template slot-scope="scope">
+                                    <el-button type="primary" @click="toDetail(scope.row)">查看</el-button>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </section>
+                <pagination :total="total" :page="form.current" :limit="form.size" @pagination="getPagination"
+                    :current-page.sync="form.current" :page-sizes="[5, 10, 20]"></pagination>
+            </div>
+        </div>
+        <el-dialog title="提示" :visible.sync="showCK" width="30%">
+            <span>{{ src }}</span>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="closeDC()">取 消</el-button>
+                <el-button type="primary" @click="openDC()">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+  
+<script>
+import { download, dcyp } from "../../../api/archives/updata";
+import { Notification, MessageBox, Message, Loading, TabPane } from "element-ui";
+// import MapCars from "@/views/components/MapCars.vue";
+
+export default {
+    components: {
+        // MapCars,
+    },
+    data() {
+        return {
+            MapCarsshow: true,
+            bthshow: true,
+
+            //===========
+            loading: false,
+            tableData: [],
+            total: 0,
+            form1: {
+                cpmc: "", //产品名称
+                jx: "", //剂型
+                pzwh: "", //批准文号
+                scqy: "",//生产单位
+                ypfl: "", //药品分类
+                name: "",
+                ssxkcyr: "", // 持有人
+                ypbm: "", //药品编码
+                sfyblfy: "",  //是否有不良反应
+                // 统一查询
+                cjxm: "", // 检验项目
+                jyslbh: "", //检验受理编号
+                cybh: "", //抽样编号
+                cyjb: "", // 抽样级别
+                cyrq: "", // 抽样日期
+                blfybgbh: "", // 不良事件报告编号
+                blfylx: "", // 不良事件类型
+                fsnf: "", // 发生年份
+                area: this.$store.getters.usersort,
+                type: "受托"
+
+            },
+            form: {
+                size: 20,
+                current: 1,
+                area: this.$store.getters.usersort,
+                type: "受托"
+            },
+            //药品分类
+            ypType: ["中药", "生物制品", "化学药品"],
+            //剂型
+            jxType: [
+                "散剂",
+                "片剂",
+                "颗粒剂",
+                "胶囊剂",
+                "溶液剂",
+                "乳剂",
+                "混悬剂",
+                "注射剂",
+                "喷雾剂",
+                "气雾剂",
+                "原料药"
+            ],
+            shif: ["是", "否"],
+            jieliuShow: true,
+
+            loadA: null,
+            showCK: false,
+            src: "",
+        };
+    },
+    mounted() {
+        this.form1.name = this.$route.query.value || "";
+        if (this.form1.name) {
+            this.searchList();
+        } else {
+            this.chinaCosmetics(1);
+        }
+    },
+    created() {
+
+    },
+    methods: {
+        // 点击input上的x号
+        isclear() {
+            this.searchList()
+        },
+        // 展开收起按钮
+        collapsechange(e) {
+            if (e == 0) {
+                this.bthshow = false
+            } else {
+                this.bthshow = true
+            }
+        },
+        // echarts lefet 回调函数
+        arealist(area) {
+            this.form.area = area
+            this.form1.area = area
+            this.form.type = "受托"
+            this.form1.type = "受托"
+            this.chinaCosmetics()
+        },
+        // 确定导出
+        openDC() {
+            this.showCK = false;
+            this.loadA = Loading.service({
+                text: "正在下载数据，请稍候",
+                spinner: "el-icon-loading",
+                background: "rgba(0, 0, 0, 0.7)",
+            });
+            dcyp(this.form1).then((res) => {
+                const blob = new Blob([res], { type: res.type });
+                const link = document.createElement("a");
+                link.href = window.URL.createObjectURL(blob);
+                link.style.display = "none";
+                link.download = "药品" + ".xlsx";
+                link.click();
+                this.loadA.close();
+                this.$message({
+                    type: "success",
+                    message: "导出成功",
+                }).catch((err) => {
+                    this.$message({
+                        type: "info",
+                        message: "导出失败",
+                    });
+                });
+            });
+        },
+        // 取消导出
+        closeDC() {
+            this.showCK = false;
+            this.$message({
+                type: "info",
+                message: "已取消导出",
+            });
+        },
+        // 导出按钮
+        exportList() {
+            this.src = `确定导出${this.form1.cpmc ? `产品名称为${this.form1.cpmc}、` : ""
+                }${this.form1.ypfl ? `药品分类为${this.form1.ypfl}、` : ""}${this.form1.pzwh ? `批准文号为${this.form1.pzwh}、` : ""
+                }${this.form1.scqy ? `生产单位为${this.form1.scqy}、` : ""}${this.form1.jx ? `剂型为${this.form1.jx}、` : ""
+                }数据吗?`;
+            this.showCK = true;
+        },
+        // 查询按钮
+        jieliuFunc() {
+            if (this.jieliuShow) {
+                this.chinaCosmetics();
+                this.jieliuShow = false;
+                setTimeout(() => {
+                    this.jieliuShow = true;
+                }, 500);
+            } else {
+                this.$message("点击过快");
+            }
+        },
+        //去内嵌页面
+        toDetail(e) {
+            setTimeout(() => {
+                this.$router.push({
+                    path: `/cosmeticsDetail`,
+                    query: { type: "2", data: e.yppzwh },
+                });
+            }, 1000);
+        },
+        //搜索
+        searchList() {
+            this.form.current = 1;
+            for (let i in this.form1) {
+                this.form[i] = this.form1[i];
+            }
+            this.jieliuFunc();
+        },
+        // 分页
+        getPagination(e) {
+            this.form.current = e.page;
+            this.form.size = e.limit;
+            this.chinaCosmetics(1);
+        },
+        //重置
+        reset(type) {
+            this.form1 = {
+                //产品名称
+                cpmc: "",
+                //剂型
+                jx: "",
+                //批准文号
+                pzwh: "",
+                //生产单位
+                scqy: "",
+                //药品分类
+                ypfl: "",
+                // 统一查询
+                name: "",
+                // 是否抽检
+                ssxkcyr: "",
+                ypbm: "",
+                //是否有不良反应
+                sfyblfy: "",
+                // 统一查询
+                cjxm: "",
+                jyslbh: "",
+                cybh: "",
+                cyjb: "",
+                cyrq: "",
+                blfybgbh: "",
+                blfylx: "",
+                fsnf: "",
+                area: this.$store.getters.usersort,
+                type: "受托"
+            };
+            this.form = {
+                size: 20,
+                current: 1,
+                area: this.$store.getters.usersort,
+                type: "受托"
+            };
+           
+            this.jieliuFunc();
+        },
+        // 药品
+        async chinaCosmetics() {
+            this.loading = true;
+            let msg1 = await this.$api.cosmetics.vRdgYpwhGxwz(this.form);
+            this.tableData = msg1.data.records;
+            this.total = msg1.data.total;
+            this.form.size = msg1.data.size;
+            this.form.current = msg1.data.current;
+            this.loading = false;
+        },
+    },
+    beforeRouteLeave(to, from, next) {
+        if (to.path != '/cosmeticsDetail') {
+            this.reset(1)
+            this.MapCarsshow = false
+        }
+        next()
+    },
+    activated(to, from, next) {
+        this.MapCarsshow = true
+
+    }
+
+};
+</script>
+  
+<style lang="scss" scoped>
+::v-deep .el-dialog:not(.is-fullscreen) {
+    margin-top: 30vh !important;
+}
+
+::v-deep .el-dialog__body {
+    padding: 15px;
+}
+
+::v-deep .el-select {
+    width: 100% !important;
+}
+
+.container {
+    height: 100%;
+    // overflow: auto;
+    background: #f2f2f2;
+
+    .headerText {
+        width: 100%;
+        padding: 10px 20px;
+        border-bottom: 1px solid #f2f3f5;
+        color: #323233;
+        font-size: 20px;
+        font-weight: bold;
+
+        .searchP {
+            position: relative;
+            cursor: pointer;
+
+            &::before {
+                content: "";
+                width: 78px;
+                height: 3px;
+                background: #1349c5;
+                position: absolute;
+                bottom: -10px;
+            }
+        }
+    }
+
+    .tabs {
+        width: 100%;
+        background: #fff;
+        margin-bottom: 10px;
+
+
+    }
+}
+
+//===================
+::v-deep .el-button--medium {
+    padding: 8px;
+}
+
+.footBox {
+    width: 97.5%;
+    text-align: center;
+    padding-bottom: 10px;
+}
+
+.tabsBottom {
+    // height: 70%;
+
+    .foot-main {
+        height: 100%;
+        // min-height: 600px;
+        width: 100%;
+        background: white;
+    }
+}
+
+.exportBtn {
+    padding: 10px 20px;
+}
+
+.table-box {
+    overflow-y: auto;
+    padding: 0 20px;
+
+    .table-item {}
+}
+
+.pagination {
+    display: flex;
+    justify-content: space-between;
+    padding: 15px 20px;
+}
+
+
+
+::v-deep .el-table {
+    overflow: auto;
+}
+
+::v-deep .logformitem {
+    .el-form-item__label {
+        line-height: 20px;
+    }
+}
+
+.title-box {
+    position: relative;
+    padding-left: 30px;
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: #1349c5;
+}
+</style>
+  

src/views/productsMsg/drugArchives/yaopinyuanliao.vue

@@ -0,0 +1,566 @@
+<template>
+    <div class="container">
+        <!-- <div class="tabs">
+            <div class="headerText">
+                <div class="searchP">统计分析</div>
+            </div>
+            <div>
+                <MapCars leafletitle="药品" echartstitle="药品" @arealist="arealist" ref="mapcars" v-if="MapCarsshow" />
+            </div>
+        </div> -->
+        <div class="tabs">
+            <div class="headerText">
+                <div class="searchP">查询条件</div>
+            </div>
+            <el-form ref="form1" :model="form1">
+                <div style="margin-top: 10px">
+                    <!-- <el-row>
+              <el-col :span="21">
+                <el-form-item label="查询条件">
+                  <el-input v-model="form1.name" placeholder="请输入产品名称"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row> -->
+                </div>
+
+                <el-row>
+                    <el-col :span="8">
+                        <el-form-item label="产品名称">
+                            <el-input v-model="form1.pzName" placeholder="请输入产品名称" clearable @clear="isclear"></el-input>
+                        </el-form-item>
+                    </el-col>
+
+                    <el-col :span="8">
+                        <el-form-item label="产品来源">
+                            <el-input v-model="form1.cpSource" placeholder="请输入产品来源" clearable @clear="isclear"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="登记号">
+                            <el-input v-model="form1.djh" placeholder="请输入登记号" clearable @clear="isclear"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+
+                    <el-col :span="8">
+                        <el-form-item label="企业名称">
+                            <el-input v-model="form1.qymc" placeholder="请输入企业名称" clearable @clear="isclear"></el-input>
+                        </el-form-item></el-col>
+                    <el-col :span="8">
+                        <el-form-item label="生产许可证">
+                            <el-input v-model="form1.scxkz" placeholder="请输入生产许可证" clearable @clear="isclear"></el-input>
+                        </el-form-item></el-col>
+
+                </el-row>
+                <div class="footBox" v-show="bthshow">
+                    <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
+                    <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
+                    <!-- <el-button type="success" icon="el-icon-circle-plus-outline" @click="collapsechange(0)">展开</el-button> -->
+                </div>
+                <div v-if="false">
+                    <el-row>
+                        <div class="title-box">产品抽检信息查询：</div>
+                        <el-col :span="8">
+                            <el-form-item label="检验项目">
+                                <el-input v-model="form1.cjxm" placeholder="请输入检验项目" clearable @clear="isclear"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item label="检验受理编号">
+                                <el-input v-model="form1.jyslbh" placeholder="请输入检验受理编号" clearable
+                                    @clear="isclear"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item label="抽样编号">
+                                <el-input v-model="form1.cybh" placeholder="请输入抽样编号" clearable @clear="isclear"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="8">
+                            <el-form-item label="抽样级别">
+                                <el-input v-model="form1.cyjb" placeholder="请输入抽样级别" clearable @clear="isclear"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item label="抽样日期" placeholder="请输入化抽样日期">
+                                <el-input v-model="form1.cyrq" placeholder="抽样日期" clearable @clear="isclear"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <div class="title-box">不良事件信息查询：</div>
+                        <el-col :span="8">
+                            <el-form-item label="发生年份">
+                                <el-input v-model="form1.fsnf" placeholder="请输入发生年份" clearable @clear="isclear"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <div class="logformitem">
+                                <el-form-item label="不良事件报告编号">
+                                    <el-input v-model="form1.blfybgbh" placeholder="请输入不良事件报告编号" clearable
+                                        @clear="isclear"></el-input>
+                                </el-form-item>
+                            </div>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item label="不良事件类型">
+                                <el-input v-model="form1.blfylx" placeholder="请输入不良事件类型" clearable
+                                    @clear="isclear"></el-input>
+                            </el-form-item>
+                        </el-col>
+
+                    </el-row>
+                    <div class="footBox " v-show="!bthshow">
+                        <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
+                        <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
+                        <el-button type="success" icon="el-icon-remove-outline" @click="collapsechange(1)">收起</el-button>
+                    </div>
+                </div>
+            </el-form>
+
+        </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" @click="exportList()">导出</el-button>
+                </div>
+                <section class="table-box">
+                    <div class="table-item">
+                        <el-table v-loading="loading" :data="tableData" border height="500" style="width: 100%">
+                            <el-table-column type="index" label="序号" width="80" align="center" />
+                            <el-table-column label="品种名称" min-width="130" align="center">
+                                <template slot-scope="scope">
+                                    {{ scope.row.pzName }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="登记号" min-width="170" align="center">
+                                <template slot-scope="scope">
+                                    {{ scope.row.djh }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="产品来源" min-width="120" align="center">
+                                <template slot-scope="scope">
+                                    {{ scope.row.cpSource }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="规格" min-width="100" align="center">
+                                <template slot-scope="scope">
+                                    {{ scope.row.gg }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="包装规格" min-width="180" align="center">
+                                <template slot-scope="scope">
+                                    {{ scope.row.bzgg }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="生产许可证" min-width="150" align="center">
+                                <template slot-scope="scope">
+                                    {{ scope.row.scxkz }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="生产许可证状态" min-width="180" align="center">
+                                <template slot-scope="scope">
+                                    {{ dataArr[scope.row.scxkzStatus] || "--" }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="企业名称" min-width="200" align="center">
+                                <template slot-scope="scope">
+                                    {{ scope.row.qymc }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="统一社会信用代码" min-width="200" align="center">
+                                <template slot-scope="scope">
+                                    <div class="norepet">{{ scope.row.uniscid }}</div>
+                                </template>
+                            </el-table-column>
+
+                            <el-table-column label="操作" width="100" fixed="right" align="center">
+                                <template slot-scope="scope">
+                                    <el-button type="primary" @click="toDetail(scope.row)">查看</el-button>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </section>
+                <pagination :total="total" :page="form.current" :limit="form.size" @pagination="getPagination"
+                    :current-page.sync="form.current" :page-sizes="[5, 10, 20]"></pagination>
+            </div>
+        </div>
+        <el-dialog title="提示" :visible.sync="showCK" width="30%">
+            <span>{{ src }}</span>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="closeDC()">取 消</el-button>
+                <el-button type="primary" @click="openDC()">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+  
+<script>
+import { download, dcyp } from "../../../api/archives/updata";
+import { Notification, MessageBox, Message, Loading, TabPane } from "element-ui";
+// import MapCars from "@/views/components/MapCars.vue";
+
+export default {
+    components: {
+        // MapCars,
+    },
+    data() {
+        return {
+            MapCarsshow: true,
+            bthshow: true,
+
+            //===========
+            loading: false,
+            tableData: [],
+            total: 0,
+            form1: {
+                qymc:"",
+                pzName: "", //产品名称
+                jx: "", //剂型
+                cpSource: "", //批准文号
+                djh: "",//生产单位
+                ypfl: "", //药品分类
+                name: "",
+                scxkz: "", // 持有人
+                ypbm: "", //药品编码
+                sfyblfy: "",  //是否有不良反应
+                // 统一查询
+                cjxm: "", // 检验项目
+                jyslbh: "", //检验受理编号
+                cybh: "", //抽样编号
+                cyjb: "", // 抽样级别
+                cyrq: "", // 抽样日期
+                blfybgbh: "", // 不良事件报告编号
+                blfylx: "", // 不良事件类型
+                fsnf: "", // 发生年份
+                area: this.$store.getters.usersort,
+
+            },
+            dataArr: {
+                1: '有效',
+                2: '撤销',
+                4: '过期',
+                7: '注销',
+            },
+
+            form: {
+                size: 20,
+                current: 1,
+                area: this.$store.getters.usersort,
+            },
+            //药品分类
+            ypType: ["中药", "生物制品", "化学药品"],
+            //剂型
+            jxType: [
+                "散剂",
+                "片剂",
+                "颗粒剂",
+                "胶囊剂",
+                "溶液剂",
+                "乳剂",
+                "混悬剂",
+                "注射剂",
+                "喷雾剂",
+                "气雾剂",
+                "原料药"
+            ],
+            shif: ["是", "否"],
+            jieliuShow: true,
+
+            loadA: null,
+            showCK: false,
+            src: "",
+        };
+    },
+    mounted() {
+        this.form1.name = this.$route.query.value || "";
+        if (this.form1.name) {
+            this.searchList();
+        } else {
+            this.chinaCosmetics(1);
+        }
+    },
+    created() {
+
+    },
+    methods: {
+        // 点击input上的x号
+        isclear() {
+            this.searchList()
+        },
+        // 展开收起按钮
+        collapsechange(e) {
+            if (e == 0) {
+                this.bthshow = false
+            } else {
+                this.bthshow = true
+            }
+        },
+        // echarts lefet 回调函数
+        arealist(area) {
+            this.form.area = area
+            this.form1.area = area
+            this.chinaCosmetics()
+        },
+        // 确定导出
+        openDC() {
+            this.showCK = false;
+            this.loadA = Loading.service({
+                text: "正在下载数据，请稍候",
+                spinner: "el-icon-loading",
+                background: "rgba(0, 0, 0, 0.7)",
+            });
+            dcyp(this.form1).then((res) => {
+                const blob = new Blob([res], { type: res.type });
+                const link = document.createElement("a");
+                link.href = window.URL.createObjectURL(blob);
+                link.style.display = "none";
+                link.download = "药品" + ".xlsx";
+                link.click();
+                this.loadA.close();
+                this.$message({
+                    type: "success",
+                    message: "导出成功",
+                }).catch((err) => {
+                    this.$message({
+                        type: "info",
+                        message: "导出失败",
+                    });
+                });
+            });
+        },
+        // 取消导出
+        closeDC() {
+            this.showCK = false;
+            this.$message({
+                type: "info",
+                message: "已取消导出",
+            });
+        },
+        // 导出按钮
+        exportList() {
+            this.src = `确定导出${this.form1.pzName ? `产品名称为${this.form1.pzName}、` : ""
+                }${this.form1.ypfl ? `药品分类为${this.form1.ypfl}、` : ""}${this.form1.cpSource ? `批准文号为${this.form1.cpSource}、` : ""
+                }${this.form1.djh ? `生产单位为${this.form1.djh}、` : ""}${this.form1.jx ? `剂型为${this.form1.jx}、` : ""
+                }数据吗?`;
+            this.showCK = true;
+        },
+        // 查询按钮
+        jieliuFunc() {
+            if (this.jieliuShow) {
+                this.chinaCosmetics();
+                this.jieliuShow = false;
+                setTimeout(() => {
+                    this.jieliuShow = true;
+                }, 500);
+            } else {
+                this.$message("点击过快");
+            }
+        },
+        //去内嵌页面
+        toDetail(e) {
+            setTimeout(() => {
+                this.$router.push({
+                    path: `/cosmeticsDetail`,
+                    query: { type: "5", data: e.xh },
+                });
+            }, 1000);
+        },
+        //搜索
+        searchList() {
+            this.form.current = 1;
+            for (let i in this.form1) {
+                this.form[i] = this.form1[i];
+            }
+            this.jieliuFunc();
+        },
+        // 分页
+        getPagination(e) {
+            this.form.current = e.page;
+            this.form.size = e.limit;
+            this.chinaCosmetics(1);
+        },
+        //重置
+        reset(type) {
+            this.form1 = {
+
+                qymc:"",
+                //产品名称
+                pzName: "",
+                //剂型
+                jx: "",
+                //批准文号
+                cpSource: "",
+                //生产单位
+                djh: "",
+                //药品分类
+                ypfl: "",
+                // 统一查询
+                name: "",
+                // 是否抽检
+                scxkz: "",
+                ypbm: "",
+                //是否有不良反应
+                sfyblfy: "",
+                // 统一查询
+                cjxm: "",
+                jyslbh: "",
+                cybh: "",
+                cyjb: "",
+                cyrq: "",
+                blfybgbh: "",
+                blfylx: "",
+                fsnf: "",
+                area: this.$store.getters.usersort,
+            };
+            this.form = {
+                size: 20,
+                current: 1,
+                area: this.$store.getters.usersort,
+            };
+            this.jieliuFunc();
+        },
+        // 药品
+        async chinaCosmetics() {
+            this.loading = true;
+            let msg1 = await this.$api.cosmetics.vRdgYpwhGxwzylList(this.form);
+            this.tableData = msg1.data.records;
+            this.total = msg1.data.total;
+            this.form.size = msg1.data.size;
+            this.form.current = msg1.data.current;
+            this.loading = false;
+        },
+    },
+    beforeRouteLeave(to, from, next) {
+        if (to.path != '/cosmeticsDetail') {
+            this.reset(1)
+            this.MapCarsshow = false
+        }
+        next()
+    },
+    activated(to, from, next) {
+        this.MapCarsshow = true
+
+    }
+
+};
+</script>
+  
+<style lang="scss" scoped>
+::v-deep .el-dialog:not(.is-fullscreen) {
+    margin-top: 30vh !important;
+}
+
+::v-deep .el-dialog__body {
+    padding: 15px;
+}
+
+::v-deep .el-select {
+    width: 100% !important;
+}
+
+.container {
+    height: 100%;
+    // overflow: auto;
+    background: #f2f2f2;
+
+    .headerText {
+        width: 100%;
+        padding: 10px 20px;
+        border-bottom: 1px solid #f2f3f5;
+        color: #323233;
+        font-size: 20px;
+        font-weight: bold;
+
+        .searchP {
+            position: relative;
+            cursor: pointer;
+
+            &::before {
+                content: "";
+                width: 78px;
+                height: 3px;
+                background: #1349c5;
+                position: absolute;
+                bottom: -10px;
+            }
+        }
+    }
+
+    .tabs {
+        width: 100%;
+        background: #fff;
+        margin-bottom: 10px;
+
+
+    }
+}
+
+//===================
+::v-deep .el-button--medium {
+    padding: 8px;
+}
+
+.footBox {
+    width: 97.5%;
+    text-align: center;
+    padding-bottom: 10px;
+}
+
+.tabsBottom {
+    // height: 70%;
+
+    .foot-main {
+        height: 100%;
+        // min-height: 600px;
+        width: 100%;
+        background: white;
+    }
+}
+
+.exportBtn {
+    padding: 10px 20px;
+}
+
+.table-box {
+    overflow-y: auto;
+    padding: 0 20px;
+
+    .table-item {}
+}
+
+.pagination {
+    display: flex;
+    justify-content: space-between;
+    padding: 15px 20px;
+}
+
+
+
+::v-deep .el-table {
+    overflow: auto;
+}
+
+::v-deep .logformitem {
+    .el-form-item__label {
+        line-height: 20px;
+    }
+}
+
+.title-box {
+    position: relative;
+    padding-left: 30px;
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: #1349c5;
+}
+</style>
+  

src/views/productsMsg/index.vue

@@ -1,475 +1,24 @@
-<template>
-  <div class="container">
-    <div class="tabs">
-      <div class="headerText">
-        <div class="searchP">统计分析</div>
-      </div>
-      <div>
-        <MapCars leafletitle="药品" echartstitle="药品" @arealist="arealist" ref="mapcars" v-if="MapCarsshow" />
-      </div>
-    </div>
-    <div class="tabs">
-      <div class="headerText">
-        <div class="searchP">查询条件</div>
-      </div>
-      <el-form ref="form1" :model="form1">
-        <div style="margin-top: 10px">
-          <!-- <el-row>
-            <el-col :span="21">
-              <el-form-item label="查询条件">
-                <el-input v-model="form1.name" placeholder="请输入产品名称"></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row> -->
-        </div>
-
-        <el-row>
-          <el-col :span="8">
-            <el-form-item label="产品名称">
-              <el-input v-model="form1.cpmc" placeholder="请输入产品名称"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="药品分类">
-              <el-select v-model="form1.ypfl" placeholder="请选择药品分类">
-                <el-option v-for="item in ypType" :key="item" :label="item" :value="item">
-                </el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="批准文号">
-              <el-input v-model="form1.pzwh" placeholder="请输入批准文号"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="8">
-            <el-form-item label="生产企业">
-              <el-input v-model="form1.scqy" placeholder="请输入生产企业"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="剂型">
-              <el-select v-model="form1.jx" placeholder="请选择剂型">
-                <el-option v-for="item in jxType" :key="item" :label="item" :value="item">
-                </el-option>
-              </el-select> </el-form-item></el-col>
-          <el-col :span="8">
-            <el-form-item label="是否抽检">
-              <el-select v-model="form1.sfcj" placeholder="请选择">
-                <el-option v-for="item in shif" :key="item" :label="item" :value="item">
-                </el-option>
-              </el-select> </el-form-item></el-col>
-
-        </el-row>
-        <el-row>
-          <el-col :span="8">
-            <el-form-item label="是否有不良反应">
-              <el-select v-model="form1.sfyblfy" placeholder="请选择">
-                <el-option v-for="item in shif" :key="item" :label="item" :value="item">
-                </el-option>
-              </el-select> </el-form-item>
-          </el-col>
-
 
-        </el-row>
+<template>
-        <div class="footBox">
+  <div>
-          <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
+      <keep-alive>
-          <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
+          <router-view></router-view>
-        </div>
+      </keep-alive>
-
-      </el-form>
-
-    </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" @click="exportList()">导出</el-button>
-        </div>
-        <section class="table-box">
-          <div class="table-item">
-            <el-table v-loading="loading" :data="tableData" border>
-              <el-table-column type="index" label="序号" width="80" align="center" />
-              <el-table-column label="产品名称" width="230" align="center">
-                <template slot-scope="scope">
-                  {{ scope.row.yptymc }}
-                </template>
-              </el-table-column>
-              <el-table-column label="批准文号" width="280" align="center">
-                <template slot-scope="scope">
-                  {{ scope.row.yppzwh }}
-                </template>
-              </el-table-column>
-              <el-table-column label="药品分类" width="120" align="center">
-                <template slot-scope="scope">
-                  {{ scope.row.ypfl }}
-                </template>
-              </el-table-column>
-              <el-table-column label="剂型" width="120" align="center">
-                <template slot-scope="scope">
-                  {{ scope.row.jx }}
-                </template>
-              </el-table-column>
-              <el-table-column label="规格" width="120" align="center">
-                <template slot-scope="scope">
-                  {{ scope.row.ypgg }}
-                </template>
-              </el-table-column>
-              <el-table-column label="批准日期" min-width="180" align="center">
-                <template slot-scope="scope">
-                  {{ scope.row.pzrq }}
-                </template>
-              </el-table-column>
-              <el-table-column label="批准文号有限期" min-width="200" align="center">
-                <template slot-scope="scope">
-                  {{ scope.row.yppzwhyxq }}
-                </template>
-              </el-table-column>
-              <el-table-column label="生产单位" min-width="230" align="center">
-                <template slot-scope="scope">
-                  {{ scope.row.ypscqymc }}
-                </template>
-              </el-table-column>
-              <el-table-column label="生产地址" min-width="230" align="center">
-                <template slot-scope="scope">
-                  <div class="norepet">{{ scope.row.scdz }}</div>
-                </template>
-              </el-table-column>
-              <el-table-column label="生产企业" min-width="230" align="center">
-                <template slot-scope="scope">
-                  {{ scope.row.ypscqymc }}
-                </template>
-              </el-table-column>
-              <el-table-column label="操作" class-name="small-padding fixed-width" width="100" fixed="right" align="center">
-                <template slot-scope="scope">
-                  <el-button type="primary" @click="toDetail(scope.row)">查看</el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-          </div>
-        </section>
-        <pagination :total="total" :page="form.current" :limit="form.size" @pagination="getPagination"
-          :current-page.sync="form.current" :page-sizes="[5, 10, 20]"></pagination>
-      </div>
-    </div>
-    <el-dialog title="提示" :visible.sync="showCK" width="30%">
-      <span>{{ src }}</span>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="closeDC()">取 消</el-button>
-        <el-button type="primary" @click="openDC()">确 定</el-button>
-      </span>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { download, dcyp } from "../../api/archives/updata";
-import { Notification, MessageBox, Message, Loading, TabPane } from "element-ui";
-import MapCars from "@/views/components/MapCars.vue";
-
 export default {
-  components: {
+  name: '',
-    MapCars,
+  components: {},
-  },
   data() {
-    return {
+      return {
-      MapCarsshow: true,
-      //===========
-      loading: false,
-      tableData: [],
-      total: 0,
-      form1: {
-        //产品名称
-        cpmc: "",
-        //剂型
-        jx: "",
-        //批准文号
-        pzwh: "",
-        //生产企业
-        scqy: "",
-        //药品分类
-        ypfl: "",
-        // 统一查询
-        name: "",
-        // 是否抽检
-        sfcj: "",
-        //是否有不良反应
-        sfyblfy: "",
-        area: this.$store.getters.usersort
-
-      },
-      form: {
-        size: 20,
-        current: 1,
-        area: this.$store.getters.usersort
-      },
-      //药品分类
-      ypType: ["中药", "生物制品", "化学药品"],
-      //剂型
-      jxType: [
-        "散剂",
-        "片剂",
-        "颗粒剂",
-        "胶囊剂",
-        "溶液剂",
-        "乳剂",
-        "混悬剂",
-        "注射剂",
-        "喷雾剂",
-        "气雾剂",
-      ],
-      shif: ["是", "否"],
-      jieliuShow: true,
-
-      loadA: null,
-      showCK: false,
-      src: "",
-    };
-  },
-  mounted() {
-    this.form1.name = this.$route.query.value || "";
-    if (this.form1.name) {
-      this.searchList();
-    } else {
-      this.chinaCosmetics(1);
-    }
-  },
-  created() {
-
-  },
-  methods: {
-    arealist(area) {
-      this.form.area = area
-      this.form1.area = area
-      this.chinaCosmetics()
-    },
-    openDC() {
-      this.showCK = false;
-      this.loadA = Loading.service({
-        text: "正在下载数据，请稍候",
-        spinner: "el-icon-loading",
-        background: "rgba(0, 0, 0, 0.7)",
-      });
-      dcyp(this.form1).then((res) => {
-        const blob = new Blob([res], { type: res.type });
-        const link = document.createElement("a");
-        link.href = window.URL.createObjectURL(blob);
-        link.style.display = "none";
-        link.download = "药品" + ".xlsx";
-        link.click();
-        this.loadA.close();
-        this.$message({
-          type: "success",
-          message: "导出成功",
-        }).catch((err) => {
-          this.$message({
-            type: "info",
-            message: "导出失败",
-          });
-        });
-      });
-    },
-    closeDC() {
-      this.showCK = false;
-      this.$message({
-        type: "info",
-        message: "已取消导出",
-      });
-    },
-    exportList() {
-      this.src = `确定导出${this.form1.cpmc ? `产品名称为${this.form1.cpmc}、` : ""
-        }${this.form1.ypfl ? `药品分类为${this.form1.ypfl}、` : ""}${this.form1.pzwh ? `批准文号为${this.form1.pzwh}、` : ""
-        }${this.form1.scqy ? `生产企业为${this.form1.scqy}、` : ""}${this.form1.jx ? `剂型为${this.form1.jx}、` : ""
-        }数据吗?`;
-      this.showCK = true;
-    },
-    jieliuFunc() {
-      if (this.jieliuShow) {
-        this.chinaCosmetics();
-        this.jieliuShow = false;
-        setTimeout(() => {
-          this.jieliuShow = true;
-        }, 500);
-      } else {
-        this.$message("点击过快");
-      }
-    },
-    //去内嵌页面
-    toDetail(e) {
-      setTimeout(() => {
-        this.$router.push({
-          path: `/cosmeticsDetail`,
-          query: { type: "2", data: e.yppzwh },
-        });
-      }, 1000);
-    },
-    //搜索
-    searchList() {
-      this.form.current = 1;
-      for (let i in this.form1) {
-        this.form[i] = this.form1[i];
-      }
-      this.jieliuFunc();
-    },
-    getPagination(e) {
-      this.form.current = e.page;
-      this.form.size = e.limit;
-      this.chinaCosmetics(1);
-    },
-    //重置
-    reset(type) {
-      this.form1 = {
-        //产品名称
-        cpmc: "",
-        //剂型
-        jx: "",
-        //批准文号
-        pzwh: "",
-        //生产企业
-        scqy: "",
-        //药品分类
-        ypfl: "",
-        // 统一查询
-        name: "",
-        // 是否抽检
-        sfcj: "",
-        //是否有不良反应
-        sfyblfy: "",
-        area: this.$store.getters.usersort
-
-      };
-      this.form = {
-        size: 20,
-        current: 1,
-        area: this.$store.getters.usersort
-      };
-      if (type != 1) {
-        this.$refs["mapcars"].showinitCityLayer()
       }
-      this.jieliuFunc();
-    },
-    // 药品
-    async chinaCosmetics() {
-      this.loading = true;
-      let msg1 = await this.$api.cosmetics.vRdgYpwhGxwz(this.form);
-      this.tableData = msg1.data.records;
-      this.total = msg1.data.total;
-      this.form.size = msg1.data.size;
-      this.form.current = msg1.data.current;
-      this.loading = false;
-    },
   },
-  beforeRouteLeave(to, from, next) {
+  created() { },
-    if (to.path != '/cosmeticsDetail') {
+  mounted() { },
-      this.reset(1)
+  methods: {},
-      this.MapCarsshow = false
+  computed: {}
-    }
-    next()
-  },
-  activated(to, from, next) {
-    this.MapCarsshow = true
-
-  }
-
-};
-</script>
-
-<style lang="scss" scoped>
-::v-deep .el-dialog:not(.is-fullscreen) {
-  margin-top: 30vh !important;
-}
-
-::v-deep .el-dialog__body {
-  padding: 15px;
 }
-
+</script>
-::v-deep .el-select {
+<style scoped lang='scss'></style>
-  width: 100% !important;
-}
-
-.container {
-  height: 100%;
-  // overflow: auto;
-  background: #f2f2f2;
-
-  .headerText {
-    width: 100%;
-    padding: 10px 20px;
-    border-bottom: 1px solid #f2f3f5;
-    color: #323233;
-    font-size: 20px;
-    font-weight: bold;
-
-    .searchP {
-      position: relative;
-      cursor: pointer;
-
-      &::before {
-        content: "";
-        width: 78px;
-        height: 3px;
-        background: #1349c5;
-        position: absolute;
-        bottom: -10px;
-      }
-    }
-  }
-
-  .tabs {
-    width: 100%;
-    background: #fff;
-    margin-bottom: 10px;
-
-
-  }
-}
-
-//===================
-::v-deep .el-button--medium {
-  padding: 8px;
-}
-
-.footBox {
-  width: 97.5%;
-  text-align: center;
-  padding-bottom: 10px;
-}
-
-.tabsBottom {
-  // height: 70%;
-
-  .foot-main {
-    height: 100%;
-    // min-height: 600px;
-    width: 100%;
-    background: white;
-  }
-}
-
-.exportBtn {
-  padding: 10px 20px;
-}
-
-.table-box {
-  overflow-y: auto;
-  padding: 0 20px;
-
-  .table-item {}
-}
-
-.pagination {
-  display: flex;
-  justify-content: space-between;
-  padding: 15px 20px;
-}
-
-
-
-::v-deep .el-table {
-  overflow: auto;
-}
-</style>

src/views/productsMsg/zyzj.vue

@@ -5,7 +5,7 @@
         <div class="searchP">统计分析</div>
       </div>
       <div>
-        <MapCars leafletitle="传统中药" echartstitle="传统中药" @arealist="arealist" ref="mapcars" v-if="MapCarsshow"/>
+        <MapCars leafletitle="传统中药" echartstitle="传统中药" @arealist="arealist" ref="mapcars" v-if="MapCarsshow" />
       </div>
     </div>
     <div class="tabs">
@@ -25,17 +25,17 @@
         <el-row>
           <el-col :span="8">
             <el-form-item label="通用名称">
-              <el-input v-model="form1.tymc" placeholder="请输入通用名称"></el-input>
+              <el-input v-model="form1.tymc" placeholder="请输入通用名称" clearable @clear="isclear"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="备案号">
-              <el-input v-model="form1.bah" placeholder="请输入备案号"></el-input>
+              <el-input v-model="form1.bah" placeholder="请输入备案号" clearable @clear="isclear"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label=" 剂型">
-              <el-select v-model="form1.jx" placeholder=" 请选择剂型">
+              <el-select v-model="form1.jx" placeholder=" 请选择剂型" clearable @clear="isclear">
                 <el-option v-for="item in jxType" :key="item" :label="item" :value="item">
                 </el-option>
               </el-select>
@@ -46,16 +46,16 @@
           <el-col :span="8">
             <div class="logformitem">
               <el-form-item label="医疗机构名称">
-                <el-input v-model="form1.yljgmc" placeholder="请输入医疗机构名称"></el-input>
+                <el-input v-model="form1.yljgmc" placeholder="请输入医疗机构名称" clearable @clear="isclear"></el-input>
               </el-form-item>
             </div>
           </el-col>
-         
+
         </el-row>
         <div class="footBox">
-            <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
+          <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
-            <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
+          <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
-          </div>
+        </div>
       </el-form>
 
     </div>
@@ -69,50 +69,51 @@
         </div>
         <section class="table-box">
           <div class="table-item">
-            <el-table v-loading="loading" :data="tableData" border>
+            <el-table v-loading="loading" :data="tableData" border  height="500" style="width: 100%">
-              <el-table-column type="index" label="序号" width="80" align="center"/>
+              <el-table-column type="index" label="序号" width="80" align="center" />
-              <el-table-column label="通用名称" width="180" align="center">
+              <el-table-column label="通用名称" min-width="120" align="center">
                 <template slot-scope="scope">
                   {{ scope.row.tymc }}
                 </template>
               </el-table-column>
-              <el-table-column label="备案号" width="280" align="center">
+              <el-table-column label="备案号" min-width="280" align="center">
                 <template slot-scope="scope">
                   {{ scope.row.bah }}
                 </template>
               </el-table-column>
-              <el-table-column label="统一社会信用代码" width="280" align="center">
+            
-                <template slot-scope="scope">
+              <el-table-column label="剂型" min-width="100" align="center">
-                  {{ scope.row.uniscid }}
-                </template>
-              </el-table-column>
-              <el-table-column label="剂型" width="180" align="center">
                 <template slot-scope="scope">
                   {{ scope.row.jx }}
                 </template>
               </el-table-column>
-              <el-table-column label="规格" width="180" align="center">
+              <el-table-column label="规格" min-width="120" align="center">
                 <template slot-scope="scope">
                   {{ scope.row.gg }}
                 </template>
               </el-table-column>
-              <el-table-column label="备案状态" width="180" align="center">
+              <el-table-column label="备案状态" min-width="120" align="center">
                 <template slot-scope="scope">
                   {{ scope.row.status }}
                 </template>
               </el-table-column>
-              <el-table-column label="医疗机构名称" width="280" align="center">
+              <el-table-column label="医疗机构名称" min-width="160" align="center">
                 <template slot-scope="scope">
                   {{ scope.row.yljgmc }}
                 </template>
               </el-table-column>
-
+          
-              <el-table-column label="医疗机构制剂许可证编号" width="300" align="center">
+              <el-table-column label="医疗机构制剂许可证编号" min-width="290" align="center">
                 <template slot-scope="scope">
                   {{ scope.row.zjxkzbh }}
                 </template>
               </el-table-column>
-              <el-table-column label="操作" class-name="small-padding fixed-width" width="100" fixed="right" align="center">
+              <el-table-column label="统一社会信用代码" min-width="210" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.uniscid }}
+                </template>
+              </el-table-column>
+              <el-table-column label="操作"  width="100" fixed="right" align="center">
                 <template slot-scope="scope">
                   <el-button type="primary" @click="toDetail(scope.row)">查看</el-button>
                 </template>
@@ -137,7 +138,7 @@
 <script>
 import { download, dcyp } from "../../api/archives/updata";
 import { Notification, MessageBox, Message, Loading } from "element-ui";
-import MapCars from "@/views/components/MapCars.vue";
+import MapCars from "@/views/components/MapCarsLog.vue";
 
 export default {
   components: { MapCars },
@@ -185,6 +186,7 @@ export default {
         "注射剂",
         "喷雾剂",
         "气雾剂",
+        "原料药"
       ],
       jieliuShow: true,
 
@@ -205,6 +207,10 @@ export default {
   created() {
   },
   methods: {
+    // 点击input上的x号
+    isclear() {
+      this.searchList()
+    },
     arealist(area) {
       this.form.area = area
       this.form1.area = area
@@ -305,7 +311,7 @@ export default {
         size: 20,
         current: 1,
       };
-      if(type!=1){
+      if (type != 1) {
         this.$refs["mapcars"].showinitCityLayer()
       }
 
@@ -380,7 +386,7 @@ export default {
     width: 100%;
     background: #fff;
     margin-bottom: 10px;
-    
+
   }
 }
 
@@ -390,7 +396,7 @@ export default {
 }
 
 .footBox {
-  width:97.5%;
+  width: 97.5%;
 
   text-align: center;
   padding-bottom: 10px;

vue.config.js

@@ -43,7 +43,8 @@ module.exports = {
     proxy: {
       "/configApi": {
         // target: "https://dev-mssm-liaoning.imian.org.cn/ggfw-api",
-        target: "http://192.168.0.114:9023/ggfw-api",
+        // target: "http://172.24.20.196/ggfw-api",
+        target: "http://192.168.0.111:9023/ggfw-api",
         
         changeOrigin: true,
         pathRewrite: {
@@ -51,7 +52,7 @@ module.exports = {
         },
       },
       "/api": {
-        target: "https://dev-mssm-liaoning.imian.org.cn",
+        target: "https://dev-mssm-liaoning.lesdev.cn",
         changeOrigin: true,
         pathRewrite: {
           ["api"]: "",