添加新的组件配置

src/components/editEl/carousel1.vue

@@ -1,15 +1,14 @@
 <template>
   <div style="height: 650px;">
-
     <div class="swiper mySwiper" v-if="show">
       <div class="swiper-wrapper">
         <div class="swiper-slide" v-for="(item,k) in data.list" :key="k">
           <UploadEl :data="item" field="img"/>
           <div class="inner">
-            <div class="title" contenteditable="true" @blur="edit1('title', k,$event)">
+            <div class="title" contenteditable="true" @blur="edit1('title', k, $event)">
               {{ item.title }}
             </div>
-            <div class="value" contenteditable="true" @blur="edit1('value', k,$event)">
+            <div class="value" contenteditable="true" @blur="edit1('value', k, $event)">
               {{ item.value }}
             </div>
           </div>
@@ -24,8 +23,6 @@
       <div class="swiper-button-next"></div>
       <div class="swiper-button-prev"></div>
     </div>
-
-
   </div>
 </template>
 

src/components/editEl/indexSwiper.vue

@@ -4,8 +4,10 @@
       <el-carousel-item v-for="(item,k) in data.swiper" :key="k">
         <div style="position: relative;width: 100%;height: 100%;">
           <UploadEl :data="item" field="portalConfigPic"/>
-          <div class="title" contenteditable="true" @blur="edit1('title', k,$event)">{{ item.portalConfigTitle }}</div>
-          <div class="subTitle" contenteditable="true" @blur="edit1('value', k,$event)">{{
+          <div class="title" contenteditable="true" @blur="edit1('portalConfigTitle', k,$event)">
+            {{ item.portalConfigTitle }}
+          </div>
+          <div class="subTitle" contenteditable="true" @blur="edit1('portalConfigDesc', k,$event)">{{
               item.portalConfigDesc
             }}
           </div>

src/layout/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
+             style="position: sticky;top: 0;z-index: 9999;">
+      <el-menu-item index="1">首页</el-menu-item>
+      <el-menu-item index="2">关于海威</el-menu-item>
+      <el-menu-item index="3">行业方案</el-menu-item>
+      <el-menu-item index="4">产品中心</el-menu-item>
+      <el-menu-item index="5">联系我们</el-menu-item>
+    </el-menu>
+    <router-view></router-view>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      activeIndex: '1',
+      menuRouteMap: {
+        '1': {path: '/editor'},
+        '2': {path: '/editor'},
+        '3': {path: '/editor',},
+        '4': {path: '/productCenter/edit'},
+        '5': {path: '/editor'},
+      }
+    };
+  },
+  mounted() {
+  },
+  watch: {
+    $route() {
+    }
+  },
+  methods: {
+    handleSelect(key) {
+      const target = this.menuRouteMap[key];
+      if (!target) {
+        return;
+      }
+      this.$router.push(target)
+    }
+  }
+}
+</script>
+<style>
+
+</style>

src/router/index.js

@@ -1,17 +1,24 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import Layout from '@/layout'
 
 Vue.use(Router)
 
 export default new Router({
-  routes: [{
-    path: '/', redirect: '/editor',
-  },
-    {
-      path: '/editor', component: () => import('@/views/editPage/index.vue'),
-    },
-    {
-      path: '/productCenter/edit', component: () => import('@/views/productCenter/edit/index.vue'),
-    }
-  ]
+    routes: [
+
+        {
+            path: '',
+            component: Layout,
+            redirect: '/editor',
+            children: [
+                {
+                    path: '/editor', component: () => import('@/views/editPage/index.vue'),
+                },
+                {
+                    path: '/productCenter/edit', component: () => import('@/views/productCenter/edit/index.vue'),
+                }
+            ]
+        },
+    ]
 })

src/views/editPage/index.vue

@@ -60,7 +60,7 @@
       </div>
     </div>
     <div v-if="type === '3'">
-      <IndexSwiper :data="components ||{}"/>
+      <IndexSwiper v-if="components && components.swiper" :data="components ||{}"/>
       <ClassicCase class="classicCase" :data="components ||{}"/>
       <ProductCenter class="productCenter" :data="components ||{}"/>
     </div>
@@ -438,9 +438,16 @@ export default {
     }
   },
   mounted() {
-    if (this.$route.query.type && this.$route.query.id) {
-
-      if (this.$route.query.type === '1') {
+    this.initByRoute();
+  },
+  watch: {
+    $route() {
+      this.initByRoute();
+    }
+  },
+  methods: {
+    initByRoute() {
+      if (this.$route.query.type === '1' && this.$route.query.id) {
         this.props = {checkStrictly: true, value: 'webMenuId', label: 'webMenuName'}
         selectMenuTree().then(v => {
           this.options = v.data.find(vv => vv.webMenuId === 4).children
@@ -451,11 +458,10 @@ export default {
           })
         })
       }
-      if (this.$route.query.type === '2') {
+      if (this.$route.query.type === '2' && this.$route.query.id) {
         this.props = {checkStrictly: true, value: 'id', label: 'name', children: 'list'}
         getHwWeb(7).then(res => {
           this.options = JSON.parse(res?.data?.webJsonString || '{}').productList || []
-
           this.type = this.$route.query.type
           this.value = this.$route.query.id.split(',').map(v => parseFloat(v))
           listHwWeb1({webCode: this.value[0], typeId: this.value[1], deviceId: this.value[2]}).then(e => {
@@ -463,10 +469,14 @@ export default {
           })
         })
       }
-
-    }
-  },
-  methods: {
+      if (this.$route.query.type === '3') {
+        this.type = '3'
+        this.value = []
+        getHwWeb(-1).then(res => {
+          this.components = JSON.parse(res?.data?.webJsonString || '{}')
+        })
+      }
+    },
     edit(key, e) {
       this[key] = e.target.innerText
     },
@@ -574,7 +584,6 @@ export default {
       }
     },
     typeChange(e) {
-      console.log(e)
       if (e === '1') {
         selectMenuTree().then(v => {
           this.options = v.data.find(vv => vv.webMenuId === 4).children
@@ -582,6 +591,7 @@ export default {
         this.props = {checkStrictly: true, value: 'webMenuId', label: 'webMenuName'}
       }
       if (e === '2') {
+        console.log(1)
         getHwWeb(7).then(res => {
           this.options = JSON.parse(res?.data?.webJsonString || '{}').productList || []
           // this.pageData = JSON.parse(res?.data?.webJsonString || '[]')
@@ -591,7 +601,6 @@ export default {
       if (e === '3') {
         getHwWeb(-1).then(res => {
           this.components = JSON.parse(res?.data?.webJsonString || '{}')
-          this.$set(this.components, 'swiper', [])
           console.log(this.components)
         })
       }
@@ -665,4 +674,5 @@ export default {
   width: 100%;
   text-align: center;
 }
-</style>
+
+</style>

src/views/productCenter/edit/produceModel.vue

@@ -121,6 +121,7 @@ export default {
   top: 10px;
   cursor: pointer;
 }
+
 .title {
   padding-top: 4.2vw;
   width: 100%;