解决json出现复数id的bug

解决json出现复数id的bug

src/layout/components/template/pages/index/sector.vue

@@ -12,9 +12,9 @@
       </div>
       <div class="sectorItemTitle">网站导航</div>
     </div> -->
-    <div class="sectorItemBox" @click="addIndexModule('imgTitleSector',6,imgTitleSector)">
+    <div class="sectorItemBox">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/imgTitleSector.png" />
+        <img src="@/assets/template/sector/imgTitleSector.png" @click="addIndexModule('imgTitleSector',6,imgTitleSector)"/>
       </div>
       <div class="sectorItemTitle">通栏广告</div>
     </div>
@@ -44,13 +44,13 @@
     </div>
     <div class="sectorItemBox">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/imgSector.png" @click="addIndexModule('onlyImgSector',24)"/>
+        <img src="@/assets/template/sector/imgSector.png" @click="addIndexModule('onlyImgSector',24,onlyImgSector)"/>
       </div>
       <div class="sectorItemTitle">纯图片组合</div>
     </div>
     <div class="sectorItemBox">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/linkSector.png" @click="addIndexModule('friendShipLinkSector',15)"/>
+        <img src="@/assets/template/sector/linkSector.png" @click="addIndexModule('friendShipLinkSector',15,friendShipLinkSector)"/>
       </div>
       <div class="sectorItemTitle">友情链接</div>
     </div>

src/store/modules/template.js

@@ -120,8 +120,7 @@ const mutations = {
       //data.type 组件名称 data.h 模块高度 
       //计算当前布局的最大 y 值
       const maxY = Math.max(...state.pageData.index.map(item => item.y), 0);
-      //添加板块id
-      
+      //添加板块id  
       state.pageData.index.push({
         i: state.pageData.index.length, 
         x: 0, 
@@ -129,13 +128,13 @@ const mutations = {
         w: 12, 
         h: data.h, 
         type: data.type,
-        content:"123",
+        content:"",
         sectorData:data.jsonData
       });
-      console.log(state.pageData.index.length);
+      console.log("当前添加的板块id：" + state.pageData.index.length);
       data.jsonData.sectorId = state.pageData.index.length;
-      console.log(data.jsonData);
-
+      console.log("添加完毕后的数据：");
+      console.log(state.pageData.index);
     }
   },
   //删除首页板块
@@ -146,6 +145,8 @@ const mutations = {
       }
     }
     Message.success('模块已删除！');
+    console.log("删除后的数据结构：");
+    console.log(state.pageData.index);
   },
   //修改首页板块高度
   setIndexModuleHeight(state,data){
@@ -273,14 +274,22 @@ const mutations = {
     //console.log(data.type);
     //按照data.data.y的大小排序
     data.data.sort((a, b) => a.y - b.y);
+    console.log(data,data);
+    let websiteData = [];
     //获取板块的sort
     for (let index in data.data) {
       console.log(data.data[index].sectorData);
       data.data[index].sectorData.sort = Number(index)+1;
       if(data.type=="index"){
-        state.webSiteData.template.index.push(data.data[index].sectorData)
+        //不要把数据直接保存到state.webSiteData.template中，否则无法删除
+        websiteData.push(data.data[index].sectorData)
       }
     }
+    //保存到对应的页面json中
+    if(data.type=="index"){
+      state.webSiteData.template.index = websiteData;
+    }
+
   },
   //保存模板
   saveTemplate(state) {

src/styles/global.less

@@ -274,6 +274,34 @@
   }
 }
 
+/*测试助手 正式版本移除 start------------------------------------------------------------>*/
+.testAssistant {
+  border: 1px dashed #19499F;
+  padding: 10px;
+  margin-bottom: 10px;
+  background: #E9EDF7;
+  margin-bottom: 30px;
+  .testAssistantTitle {
+    font-size: 12px;
+    font-weight: bold;
+    color: #19499F;
+  }
+  .testAssistantContent {
+    padding-top: 10px;
+    .testAssistantContentItem {
+      padding-top: 5px;
+      color: #19499F;
+      font-weight: bold;
+      span {
+        font-weight: bold;
+        font-size: 14px;
+        color: #333;
+        margin-right: 10px;
+      }
+    }
+  }
+}
+/*测试助手 正式版本移除 end------------------------------------------------------------>*/
 
 
 /*页面布局 end------------------------------------------------------------>*/

src/views/template/public/editWindow.vue

@@ -1,8 +1,17 @@
 <template>
   <div class="editWindowBox">
     <div class="editWindowBoxContent">
-      <div>
-        板块id:{{this.$store.state.template.editSectorId}} 组件sort:{{this.$store.state.template.editComponentSort}} 组件type:{{this.$store.state.template.editComponentType}} 展示条数:{{this.$store.state.template.editComponentSize}}
+      <!--开发助手-->
+      <div class="testAssistant">
+        <div class="testAssistantTitle">
+          开发助手：当前窗口在正式版本中将被移除。
+        </div>
+        <div class="testAssistantContent">
+          <div class="testAssistantContentItem"><span>板块id:</span>{{this.$store.state.template.editSectorId}}</div>
+          <div class="testAssistantContentItem"><span>组件sort:</span>{{this.$store.state.template.editComponentSort}}</div>
+          <div class="testAssistantContentItem"><span>组件type:</span>{{this.$store.state.template.editComponentType}}</div>
+          <div class="testAssistantContentItem"><span>展示条数:</span>{{this.$store.state.template.editComponentSize}}</div>
+        </div>
       </div>
       <!--普通新闻类型-->
       <div v-if="this.$store.state.template.editComponentType == 1">

src/views/template/style/1/bannerSector.vue

@@ -1,16 +1,13 @@
 <template>
   <div class="bannerBox">
     <div class="itemTopBox">
-      <editBtn :id="id" :sort="1" :type="1" :size="1"/>
       <mainTitle :id="id" :sort="1"/>
     </div>
     <div class="itemBottomBox">
       <div class="bannerLayerBox">
-        <!-- <editBtn :id="id" :sort="2"/> -->
         <banner :id="id" :sort="2"/>
       </div>
       <div class="NewsListBox">
-        <!-- <editBtn :id="id" :sort="3"/> -->
         <tabsNews :id="id" :sort="3"/>
       </div>
     </div>

src/views/template/style/1/components/banner.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="bannerItemBox">
+    <editBtn :id="id" :sort="sort" :type="1" :size="3"/>
     <el-carousel height="226px">
       <el-carousel-item :key="1">
         <img src="@/assets/template/component/banner1.png" /> 
@@ -15,9 +16,20 @@
 </template>
 
 <script>
+import editBtn from '../../../public/editBtn.vue'
 export default {
+  components: {
+    editBtn
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {

src/views/template/style/1/components/mainTitle.vue

@@ -1,12 +1,17 @@
 <template>
   <div class="mainTitleBox">
+    <editBtn :id="id" :sort="sort" :type="1" :size="1"/>
     <img src="@/assets/template/component/newsIcon.png" />
     <div class="mainTitleText">习近平在中华全国供销合作社成立70周年</div>
   </div>
 </template>
 
 <script>
+import editBtn from '../../../public/editBtn.vue'
 export default {
+  components: {
+    editBtn
+  },
   props: {
     id:{
       type:Number,

src/views/template/style/1/components/tabsNews.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="tabsNewsBox">
+    <editBtn :id="id" :sort="3" :type="2" :size="5"/>
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane label="地方动态" name="first">
         <ul class="newsListBox">
@@ -33,9 +34,20 @@
 </template>
 
 <script>
+import editBtn from '../../../public/editBtn.vue'
 export default {
+  components: {
+    editBtn
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {

src/views/template/style/1/imgTitleSector.vue

@@ -1,16 +1,23 @@
 <template>
   <div class="imgTitleSectorBox">
     <div class="imgSectorBox">
+      <editBtn :id="id" :sort="1" :type="3" :size="1"/>
       <img src="@/assets/template/sector/imgTitleSector.png" />
     </div>
   </div>
 </template>
 
 <script>
-
+import editBtn from '../../public/editBtn.vue'
 export default {
+  components: {
+    editBtn
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -30,6 +37,7 @@ export default {
       border: 1px dashed #5570F1;
       width: 80%;
       height: 60px;
+      position: relative;
       img {
         width: 100%;
         height: 100%;