修改详情页面添加产品路由参数传递，页面展示，监听表单刷新事件

src/components/brand/detail/sagaBrandDetail.vue

@@ -67,7 +67,7 @@
         isShow: false,
         system: [],
         total: 0,
-        table: []
+        table: [],
       }
     },
     computed: {
@@ -130,6 +130,7 @@
             let def = this.system[i][j].DefClass
             for (let k = 0; k < def.length; k++) {
               def[k].show = k == index ? true : false
+              this.$emit('systemCode', def[k].Code)
             }
           }
         }

src/components/brand/sagaBrand.vue

@@ -64,28 +64,29 @@
 </template>
 
 <script>
-import { brandQuery } from "@/api/brand"
-export default {
-  components: {},
-  created() {
-    // this.brandList = brandList
-    this.getBrandData();
-  },
-  mounted() {
-    this.boxWidth = this.$refs.brandBox.clientWidth
-    let listener = document.querySelector('.page-content-scroll')
-    listener.addEventListener('scroll', this.onScroll)
-  },
-  props: {
-    pageType: {
-      type: String,
-      default: 'brand'
-    }, //页面类型(brand/product)
-  },
-  data() {
-    return {
-      sortMap: {
-        zh: "中文排序",
+  import {brandQuery} from "@/api/brand"
+
+  export default {
+    components: {},
+    created() {
+      // this.brandList = brandList
+      this.getBrandData();
+    },
+    mounted() {
+      this.boxWidth = this.$refs.brandBox.clientWidth
+      let listener = document.querySelector('.page-content-scroll')
+      listener.addEventListener('scroll', this.onScroll)
+    },
+    props: {
+      pageType: {
+        type: String,
+        default: 'brand'
+      }, //页面类型(brand/product)
+    },
+    data() {
+      return {
+        sortMap: {
+          zh: "中文排序",
         en: "英文排序",
       },
       sortName: "中文排序",
@@ -121,8 +122,11 @@ export default {
         this.$emit("updatebrand", brand)
       } else {
         console.log('跳转到产品页面')
-        console.log(brand)
         this.$router.push({path: 'brand/brandDetail', query: brand})
+        // this.$router.push({
+        //   name: 'brandDetail',
+        //   params: brand
+        // })
       }
     },
     handleClickLetter(e) { //点击字母锚点

src/components/product/detail/sagaProductDetail.vue

@@ -121,6 +121,7 @@
     },
     mounted() {
     },
+    watch: {},
     computed: {
       ...mapGetters('layout', ['dictionary']),
     },
@@ -163,7 +164,7 @@
           GroupId: this.dictionary.groupId,
           Type: this.dictionary.dictionaryType,
           ProjectId: this.dictionary.projectId,
-          Filters: `prodCode='${this.$route.query.code}'`
+          Filters: `prodCode='${this.$route.params.code}'`
         }
         prodTypeQuery(params, res => {
           this.total = res.Total
@@ -207,6 +208,8 @@
             i.check = item.check
           }
         })
+        let brand = this.allSelect.find(i => i.check)
+        this.$emit('brand', brand)
         this.handleQuery(this.allSelect)
       },
       deleteCurrent(item, index) {
@@ -216,6 +219,8 @@
             i.check = item.check
           }
         })
+        let brand = this.allSelect.find(i => i.check)
+        this.$emit('brand', brand)
         this.handleQuery(this.allSelect)
       },
       handleQuery(arr) {

src/components/product/productTool.vue

@@ -28,7 +28,7 @@
 
   export default {
     components: {selectTree, remoteSearch},
-    props: ['showSelect'],
+    props: ['showSelect', 'ProdCode', 'brandObject'],
     created() {
       this.getDictionaryQuery()
     },

src/components/product/sagaProduct.vue

@@ -64,11 +64,15 @@
   },
   methods: {
     handleDetail(val, major, system) {
-      console.log(val, 'val', major, system)
+      //val.Code 设备编码
       this.$router.push({
         path: 'product/productDetail',
         query: {major: major.Name, system: system.AliasName, class: val.AliasName, code:val.Code}
       })
+      // this.$router.push({
+      //   name: 'productDetail',
+      //   params: {major: major.Name, system: system.AliasName, class: val.AliasName, code: val.Code}
+      // })
     },
     getProductType() {// 获取产品类型数据
       let params = {

src/components/supplement/sagaSupplement.vue

@@ -138,6 +138,11 @@
     mounted() {
       let listener = document.querySelector('.saga-brand-box')
       listener.addEventListener('scroll', this.onScroll)
+      window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
+
+    },
+    destroyed() {
+      window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
     },
     data() {
       let checkBrand = (rule, value, callback) => {
@@ -181,6 +186,19 @@
     ...mapGetters('layout', ['dictionary']),
   },
   methods: {
+    beforeunloadHandler(e) {
+      let {BrandID, ProdCode, Model, ProdFile, ProdParam} = this.ruleForm
+      // if (BrandID || ProdCode || ruleForm || Object.keys(ProdFile).length > 0 || Object.keys(ProdParam).length > 0) {
+      if (BrandID || ProdCode || Model) {
+        e.preventDefault();
+        // 兼容IE8和Firefox之前的版本
+        if (e) {
+          e.returnValue = '关闭aaa'
+        }
+        return '关闭111'
+      }
+
+    },
     getProdType() {// 获取产品类型
       let params = {
         Type: this.dictionary.dictionaryType,
@@ -196,13 +214,18 @@
           }
         })
         this.productList = res.Content
-        if (this.$route.params.ProdID) {//如果是修改,加载信息点
+        if (this.$route.params.ProdCode) {//如果是修改,加载信息点
           this.handleChangeProduct(this.$route.params.ProdCode)
         }
+        if (this.$route.params.BrandID) {
+          this.ruleForm.BrandID = this.$route.params.Brand.BrandID
+        }
       })
     },
     getBrandNum5() {// 获取最新创建过产品型号的5个品牌(如果是修改的话只显示修改产品的品牌)
-      if (this.$route.params.ProdID) {
+      // if (this.$route.params.Brand) {
+      if (this.$route.params.Brand && Object.keys(this.$route.params.Brand).length > 0) {
+
         this.defaultBrandList = [this.$route.params.Brand]
         this.brandList = [this.$route.params.Brand]
       } else {
@@ -239,9 +262,11 @@
           }
         })
         this.AttachmentInfo = res.Content.AttachmentInfo
-        if (this.$route.params.ProdID) {//判断是否是修改,回显修改内容
-          let {Brand, ProdID, prodCname, ...ruleForm} = this.$route.params
-          this.ruleForm = Object.assign(this.ruleForm, ruleForm)
+        if (this.$route.params.ProdCode) {//判断是否是修改,回显修改内容
+          if (!this.ruleForm.ProdCode) {
+            let {Brand, ProdID, prodCname, ...ruleForm} = this.$route.params
+            this.ruleForm = Object.assign(this.ruleForm, ruleForm)
+          }
         }
       })
     },

src/router/system.js

@@ -61,7 +61,7 @@ export default [
       },
       {
         path:'/brand/brandDetail',
-        name:'brand',
+        name:'brandDetail',
         component: brandDetail
       }
     ]

src/views/brand/detail/index.vue

@@ -1,20 +1,64 @@
 <template>
   <div class="brand-detail">
-    <productTool/>
-    <sagaBrandDetail/>
+    <div class="saga-toolbar-box">
+
+    <div class="saga-toolbar-main">
+      <span style="float: right;">
+        <el-button type="primary" @click="handProduct">添加产品</el-button>
+      </span>
+    </div>
+    </div>
+    <sagaBrandDetail @systemCode="systemCode"/>
   </div>
 </template>
 
 <script>
-  import productTool from "@/components/product/productTool";
   import sagaBrandDetail from "@/components/brand/detail/sagaBrandDetail";
 
   export default {
     name: "index",
-    components: {productTool, sagaBrandDetail}
+    components: {sagaBrandDetail},
+    data() {
+      return {
+        ProdCode: ''
+      }
+    },
+    created() {
+    },
+    methods: {
+      systemCode(ProdCode) {
+        this.ProdCode = ProdCode
+      },
+      handProduct() {
+        //跳转添加产品的路由
+        let param = {}
+        //设备 require 编码code  品牌 require brandID
+        param.ProdCode = this.ProdCode
+        param.BrandID = this.$route.query.BrandID
+        param.Brand = this.$route.query
+        this.$router.push({name: 'supplement', params: param})
+      },
+    }
   }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+  .saga-toolbar-box {
+    position: absolute;
+    top: 48px;
+    left: 0;
+    width: 100%;
+    height: 70px;
+    background: #fff;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
+    z-index: 11;
+
+    .saga-toolbar-main {
+      width: 1200px;
+      height: 100%;
+      margin: auto;
+      padding-top: 20px;
 
+    }
+  }
 </style>

src/views/product/detail/index.vue

@@ -1,25 +1,62 @@
 <template>
   <div class="productDetailTool">
-    <productTool  :showSelect="showSelect"/>
-    <sagaProductDetail/>
+    <div class="saga-toolbar-box">
+      <div class="saga-toolbar-main">
+        <span style="float: right;">
+        <el-button type="primary" @click="handProduct">添加产品</el-button>
+      </span>
+      </div>
+    </div>
+    <sagaProductDetail @brand="brand"/>
   </div>
 </template>
 
 <script>
-  import productTool from "../../../components/product/productTool";
   import sagaProductDetail from "../../../components/product/detail/sagaProductDetail";
 
   export default {
     name: "index",
-    components: {productTool,sagaProductDetail},
+    components: {sagaProductDetail},
     data() {
       return {
-        showSelect:false
+        showSelect: false,
+        brandObject: {}
       }
-  }
+    },
+    methods: {
+      brand(val) {
+        this.brandObject = val
+      },
+      handProduct() {
+        let param = {}
+        //设备 require 编码code  品牌 require brandID
+        param.ProdCode = this.$route.query.code
+        param.BrandID = this.brandObject.BrandID
+        param.Brand = this.brandObject
+
+        this.$router.push({name: 'supplement', params: param})
+      }
+    }
   }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+  .saga-toolbar-box {
+    position: absolute;
+    top: 48px;
+    left: 0;
+    width: 100%;
+    height: 70px;
+    background: #fff;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
+    z-index: 11;
 
+    .saga-toolbar-main {
+      width: 1200px;
+      height: 100%;
+      margin: auto;
+      padding-top: 20px;
+
+    }
+  }
 </style>

src/views/supplement/index.vue

@@ -6,6 +6,11 @@
 </template>
 
 <script>
+  // window.onbeforeunload=function(e){
+  //   console.log(this.$route,'route')
+  //   // var e = window.event||e;
+  //   // e.returnValue=("确定离开当前页面吗？");
+  // }
   import supplementTool from "@/components/supplement/supplementTool";
   import sagaSupplement from "@/components/supplement/sagaSupplement";
 
@@ -13,6 +18,7 @@
     name: "index",
     components: {supplementTool, sagaSupplement},
     methods: {
+
       addProduct() {
         this.$refs.supplement.submitForm()
       },