增加列表页和详情页

增加列表页和详情页

src/layout/components/template/componentMenu.vue

@@ -1,30 +1,27 @@
 <template>
   <div class="componentMenuBox" id="componentMenuBox">
     <div class="componentMenuTitle">
-      <div v-if="this.$store.state.template.menuType == 1 && this.$store.state.template.pageStatus == 1">首页可选板块：</div>
-      <div v-if="this.$store.state.template.menuType == 2 && this.$store.state.template.pageStatus == 1">首页可选组件：</div>
-      <div v-if="this.$store.state.template.menuType == 1 && this.$store.state.template.pageStatus == 2">分类页可选板块：</div>
-      <div v-if="this.$store.state.template.menuType == 2 && this.$store.state.template.pageStatus == 2">分类页选组件：</div>
-      <div v-if="this.$store.state.template.menuType == 1 && this.$store.state.template.pageStatus == 3">列表页可选板块：</div>
-      <div v-if="this.$store.state.template.menuType == 2 && this.$store.state.template.pageStatus == 3">列表页选组件：</div>
-      <div v-if="this.$store.state.template.menuType == 1 && this.$store.state.template.pageStatus == 4">详情页可选板块：</div>
-      <div v-if="this.$store.state.template.menuType == 2 && this.$store.state.template.pageStatus == 4">详情页选组件：</div>
-      <div v-if="this.$store.state.template.menuType == 1 && this.$store.state.template.pageStatus == 5">搜索页可选板块：</div>
-      <div v-if="this.$store.state.template.menuType == 2 && this.$store.state.template.pageStatus == 5">搜索页选组件：</div>
-      <div v-if="this.$store.state.template.menuType == 1 && this.$store.state.template.pageStatus == 6">自定义列表页可选板块：</div>
-      <div v-if="this.$store.state.template.menuType == 2 && this.$store.state.template.pageStatus == 6">自定义列表页选组件：</div>
-      <div v-if="this.$store.state.template.menuType == 1 && this.$store.state.template.pageStatus == 7">自定义详情页可选板块：</div>
-      <div v-if="this.$store.state.template.menuType == 2 && this.$store.state.template.pageStatus == 7">自定义详情页选组件：</div>
+      <div v-if="this.$store.state.template.pageStatus == 1">首页可选板块：</div>
+      <div v-if="this.$store.state.template.pageStatus == 2">分类页可选板块：</div>
+      <div v-if="this.$store.state.template.pageStatus == 3">列表页可选板块：</div>
+      <div v-if="this.$store.state.template.pageStatus == 4">详情页可选板块：</div>
+      <div v-if="this.$store.state.template.pageStatus == 5">搜索页可选板块：</div>
+      <div v-if="this.$store.state.template.pageStatus == 6">自定义列表页可选板块：</div>
+      <div v-if="this.$store.state.template.pageStatus == 7">自定义详情页可选板块：</div>
     </div>
     <div>
       <el-scrollbar wrap-class="scrollbar-wrapper">
         <!--首页板块-->
-        <div v-if="this.$store.state.template.menuType == 1 && this.$store.state.template.pageStatus == 1">
+        <div v-if="this.$store.state.template.pageStatus == 1">
           <indexSector/>
         </div>
-        <!--首页组件-->
-        <div v-if="this.$store.state.template.menuType == 2 && this.$store.state.template.pageStatus == 1">
-          
+        <!--列表板块-->
+        <div v-if="this.$store.state.template.pageStatus == 3">
+          <listSector/>
+        </div>
+        <!--详情板块-->
+        <div v-if="this.$store.state.template.pageStatus == 4">
+          <articleSector/>
         </div>
       </el-scrollbar>
     </div>
@@ -34,11 +31,15 @@
 <script>
 //首页板块
 import indexSector from './pages/index/sector.vue';
+import listSector from './pages/list/sector.vue';
+import articleSector from './pages/article/sector.vue';
 
 export default {
   name: 'componentMenu',
   components:{
-    indexSector
+    indexSector,
+    listSector,
+    articleSector
   },
   props: {
     

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

@@ -0,0 +1,369 @@
+<template>
+  <div class="sectorBox">
+    <div class="sectorItemBox" @click="addModule('imgTitleSector',8,imgTitleSector)" @drag="drag('imgTitleSector',8,imgTitleSector)" @dragend="dragend('imgTitleSector',8,imgTitleSector)" >
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/imgTitleSector.png"/>
+      </div>
+      <div class="sectorItemTitle">通栏广告</div>
+    </div>
+    <div class="sectorItemBox" @click="addModule('listSector',33,listSector)" @drag="drag('listSector',33,listSector)" @dragend="dragend('listSector',33,listSector)" >
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/articleSector.png"/>
+      </div>
+      <div class="sectorItemTitle">文章详情</div>
+    </div>
+    <div class="sectorItemBox" @click="addModule('listSector',33,listSector)" @drag="drag('listSector',33,listSector)" @dragend="dragend('listSector',33,listSector)" >
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/newsSector.png"/>
+      </div>
+      <div class="sectorItemTitle">次级文章列表</div>
+    </div>
+    <div class="sectorItemBox" @click="addModule('friendShipLinkSector',20,friendShipLinkSector)" @drag="drag('friendShipLinkSector',20,friendShipLinkSector)" @dragend="dragend('friendShipLinkSector',20,friendShipLinkSector)" >
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/linkSector.png"/>
+      </div>
+      <div class="sectorItemTitle">友情链接</div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    type: {
+     
+    },
+  },
+  data() {
+    return {
+      //添加通栏广告模块 start---------------------------------------->
+      imgTitleSector:{
+        sectorName:"imgTitleSector",//板块名称
+        componentList:[
+          {
+            component_type:3,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"",
+            sort:1,
+            componentData:{
+              text:"通栏广告", //广告位名称
+              width:1200, //广告位宽度
+              height:60, //广告位高度
+            }//该组件不请求指定类型的数据，但是后端需要返回imgUrl
+          }
+        ]
+      },
+      //添加通栏广告模块 start---------------------------------------->
+
+      //添加banner模块 start---------------------------------------->
+      bannerSector:{
+        sectorName:"bannerSector",//板块名称
+        componentList:[
+          {
+            component_type:1,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"mainTitle",//组件名称
+            sort:1,//组件排序
+            componentData:{//该组件请求的数据
+              category_id:[],//请求的导航id 如果上面的component_type是1，这里只会有1个[[1]],如果是2，这里就会有多个[[1,3],[1,4,8]]
+              page:1,//请求第几页
+              pageSize:1,//请求的条数
+              listType:[//请求的数据应该包含哪些字段
+                "title",//标题
+                //"created_time",//创建时间
+                //"author",//作者
+                //"imgUrl",//缩略图片
+                //"introduce",//描述
+              ]
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,
+            component_name:"banner",
+            sort:2,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:3,
+              listType:[
+                "title",//标题
+                "imgUrl"//缩略图片
+              ]
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,
+            component_name:"tabsNews",
+            sort:3,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:5,
+              listType:[
+                "title",//标题
+                "created_time",//创建时间
+                "introduce",//描述
+              ]
+            }
+          },
+        ]
+      },
+      //添加banner模块 end---------------------------------------->
+
+      //添加多图板块 start---------------------------------------->
+      manyPictureSector:{
+        sectorName:"manyPictureSector",//板块名称
+        componentList:[
+          {
+            component_type:7, //纯文本
+            component_style:1,
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
+          {
+            component_type:6, //静态组件无需传递数据
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"fivePicture",
+            sort:2,
+            componentData:{}
+          },
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"tabsNews",
+            sort:3,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:3,
+              listType:[
+                "title",//标题
+                "created_time",//创建时间
+              ]
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"tabsNews",
+            sort:4,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:3,
+              listType:[
+                "title",//标题
+                "created_time",//创建时间
+              ]
+            }
+          },
+        ]
+      },
+      //添加多图板块 end---------------------------------------->
+
+      //文章列表带评论板块 end---------------------------------------->
+      commentSector:{
+        sectorName:"commentSector",//板块名称
+        componentList:[
+          {
+            component_type:7, //纯文本
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
+          {
+            component_type:1,
+            component_style:2,//该组件使用哪个展示样式
+            component_name:"tabsCalendarNews",
+            sort:2,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:6,
+              listType:[
+                "title",
+                "created_time",
+                "introduce"
+              ]
+            }
+          },
+          {
+            component_type:8,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"calendar", //评论组件无需提交数据
+            sort:3,
+            componentData:{}
+          },
+        ]
+      },
+      //文章列表带评论板块 end---------------------------------------->
+
+      //文章列表板块 start---------------------------------------->
+      listSector:{
+        sectorName:"listSector",//板块名称
+        componentList:[
+          {
+            component_type:7,//纯文本
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"listNews",
+            sort:2,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:5,
+              listType:[
+                "title",
+                "created_time"
+              ]
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"listNews",
+            sort:3,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:5,
+              listType:[
+                "title",
+                "created_time"
+              ]
+            }
+          },
+        ]
+      },
+      //文章列表板块 end---------------------------------------->
+
+      //纯图片组合 start---------------------------------------->
+      onlyImgSector:{
+        sectorName:"onlyImgSector",//板块名称
+        componentList:[
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"",
+            sort:1,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:7,
+              listType:[
+                "title",
+                "imgUrl"
+              ]
+            }
+          }
+        ]
+      },
+      //纯图片组合 end---------------------------------------->
+
+      //友情链接板块 start---------------------------------------->
+      friendShipLinkSector:{
+        sectorName:"friendShipLinkSector",//友情链接无需提交数据
+        componentList:[
+          {
+            component_type:7, //纯文本
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
+          {
+            component_type:4,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"",
+            sort:1,
+            componentData:{}
+          }
+        ]
+      }
+      //友情链接板块 end---------------------------------------->
+
+    }
+  },
+  methods: {
+    //添加模块
+    addModule(type,h,jsonData){
+      let data = {
+        source:"click",//添加方式为点击
+        type: type,
+        h: h,
+        jsonData: jsonData
+      }
+      console.log(data);
+      this.$store.commit('template/addModule',data);
+    },
+    //拖拽开始
+    drag(type,h,jsonData){
+      let data = {
+        type: type,
+        h: h,
+        jsonData: jsonData
+      }
+      this.$store.commit('template/drag',data);
+    },
+    //拖拽结束
+    dragend(type,h,jsonData){
+      let data = {
+        type: type,
+        h: h,
+        jsonData: jsonData
+      }
+      this.$store.commit('template/dragend',data);
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .sectorBox {
+    height: 100%;
+    .sectorItemBox {
+      box-sizing: border-box;
+      padding: 0 20px 40px 20px;
+      cursor: pointer;
+      .sectorItem {
+        border: 1px solid #333644;
+        padding: 10px;
+        border-radius: 8px;
+        &:hover {
+          background: #333644;
+          transform: scale(1.1);
+          transition: all 0.2s ease-in-out;
+        }
+        img {
+          display: block;
+          width: 100%;
+        }
+      }
+      .sectorItemTitle {
+        color: #fff;
+        font-size: 14px;
+        padding: 10px 0 0 0;
+        text-align: center;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,369 @@
+<template>
+  <div class="sectorBox">
+    <div class="sectorItemBox" @click="addModule('imgTitleSector',8,imgTitleSector)" @drag="drag('imgTitleSector',8,imgTitleSector)" @dragend="dragend('imgTitleSector',8,imgTitleSector)" >
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/imgTitleSector.png"/>
+      </div>
+      <div class="sectorItemTitle">通栏广告</div>
+    </div>
+    <div class="sectorItemBox" @click="addModule('listSector',33,listSector)" @drag="drag('listSector',33,listSector)" @dragend="dragend('listSector',33,listSector)" >
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/listSector.png"/>
+      </div>
+      <div class="sectorItemTitle">主文章列表</div>
+    </div>
+    <div class="sectorItemBox" @click="addModule('listSector',33,listSector)" @drag="drag('listSector',33,listSector)" @dragend="dragend('listSector',33,listSector)" >
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/newsSector.png"/>
+      </div>
+      <div class="sectorItemTitle">次级文章列表</div>
+    </div>
+    <div class="sectorItemBox" @click="addModule('friendShipLinkSector',20,friendShipLinkSector)" @drag="drag('friendShipLinkSector',20,friendShipLinkSector)" @dragend="dragend('friendShipLinkSector',20,friendShipLinkSector)" >
+      <div class="sectorItem">
+        <img src="@/assets/template/sector/linkSector.png"/>
+      </div>
+      <div class="sectorItemTitle">友情链接</div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    type: {
+     
+    },
+  },
+  data() {
+    return {
+      //添加通栏广告模块 start---------------------------------------->
+      imgTitleSector:{
+        sectorName:"imgTitleSector",//板块名称
+        componentList:[
+          {
+            component_type:3,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"",
+            sort:1,
+            componentData:{
+              text:"通栏广告", //广告位名称
+              width:1200, //广告位宽度
+              height:60, //广告位高度
+            }//该组件不请求指定类型的数据，但是后端需要返回imgUrl
+          }
+        ]
+      },
+      //添加通栏广告模块 start---------------------------------------->
+
+      //添加banner模块 start---------------------------------------->
+      bannerSector:{
+        sectorName:"bannerSector",//板块名称
+        componentList:[
+          {
+            component_type:1,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"mainTitle",//组件名称
+            sort:1,//组件排序
+            componentData:{//该组件请求的数据
+              category_id:[],//请求的导航id 如果上面的component_type是1，这里只会有1个[[1]],如果是2，这里就会有多个[[1,3],[1,4,8]]
+              page:1,//请求第几页
+              pageSize:1,//请求的条数
+              listType:[//请求的数据应该包含哪些字段
+                "title",//标题
+                //"created_time",//创建时间
+                //"author",//作者
+                //"imgUrl",//缩略图片
+                //"introduce",//描述
+              ]
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,
+            component_name:"banner",
+            sort:2,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:3,
+              listType:[
+                "title",//标题
+                "imgUrl"//缩略图片
+              ]
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,
+            component_name:"tabsNews",
+            sort:3,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:5,
+              listType:[
+                "title",//标题
+                "created_time",//创建时间
+                "introduce",//描述
+              ]
+            }
+          },
+        ]
+      },
+      //添加banner模块 end---------------------------------------->
+
+      //添加多图板块 start---------------------------------------->
+      manyPictureSector:{
+        sectorName:"manyPictureSector",//板块名称
+        componentList:[
+          {
+            component_type:7, //纯文本
+            component_style:1,
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
+          {
+            component_type:6, //静态组件无需传递数据
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"fivePicture",
+            sort:2,
+            componentData:{}
+          },
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"tabsNews",
+            sort:3,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:3,
+              listType:[
+                "title",//标题
+                "created_time",//创建时间
+              ]
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"tabsNews",
+            sort:4,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:3,
+              listType:[
+                "title",//标题
+                "created_time",//创建时间
+              ]
+            }
+          },
+        ]
+      },
+      //添加多图板块 end---------------------------------------->
+
+      //文章列表带评论板块 end---------------------------------------->
+      commentSector:{
+        sectorName:"commentSector",//板块名称
+        componentList:[
+          {
+            component_type:7, //纯文本
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
+          {
+            component_type:1,
+            component_style:2,//该组件使用哪个展示样式
+            component_name:"tabsCalendarNews",
+            sort:2,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:6,
+              listType:[
+                "title",
+                "created_time",
+                "introduce"
+              ]
+            }
+          },
+          {
+            component_type:8,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"calendar", //评论组件无需提交数据
+            sort:3,
+            componentData:{}
+          },
+        ]
+      },
+      //文章列表带评论板块 end---------------------------------------->
+
+      //文章列表板块 start---------------------------------------->
+      listSector:{
+        sectorName:"listSector",//板块名称
+        componentList:[
+          {
+            component_type:7,//纯文本
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"listNews",
+            sort:2,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:5,
+              listType:[
+                "title",
+                "created_time"
+              ]
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"listNews",
+            sort:3,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:5,
+              listType:[
+                "title",
+                "created_time"
+              ]
+            }
+          },
+        ]
+      },
+      //文章列表板块 end---------------------------------------->
+
+      //纯图片组合 start---------------------------------------->
+      onlyImgSector:{
+        sectorName:"onlyImgSector",//板块名称
+        componentList:[
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"",
+            sort:1,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:7,
+              listType:[
+                "title",
+                "imgUrl"
+              ]
+            }
+          }
+        ]
+      },
+      //纯图片组合 end---------------------------------------->
+
+      //友情链接板块 start---------------------------------------->
+      friendShipLinkSector:{
+        sectorName:"friendShipLinkSector",//友情链接无需提交数据
+        componentList:[
+          {
+            component_type:7, //纯文本
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
+          {
+            component_type:4,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"",
+            sort:1,
+            componentData:{}
+          }
+        ]
+      }
+      //友情链接板块 end---------------------------------------->
+
+    }
+  },
+  methods: {
+    //添加模块
+    addModule(type,h,jsonData){
+      let data = {
+        source:"click",//添加方式为点击
+        type: type,
+        h: h,
+        jsonData: jsonData
+      }
+      console.log(data);
+      this.$store.commit('template/addModule',data);
+    },
+    //拖拽开始
+    drag(type,h,jsonData){
+      let data = {
+        type: type,
+        h: h,
+        jsonData: jsonData
+      }
+      this.$store.commit('template/drag',data);
+    },
+    //拖拽结束
+    dragend(type,h,jsonData){
+      let data = {
+        type: type,
+        h: h,
+        jsonData: jsonData
+      }
+      this.$store.commit('template/dragend',data);
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .sectorBox {
+    height: 100%;
+    .sectorItemBox {
+      box-sizing: border-box;
+      padding: 0 20px 40px 20px;
+      cursor: pointer;
+      .sectorItem {
+        border: 1px solid #333644;
+        padding: 10px;
+        border-radius: 8px;
+        &:hover {
+          background: #333644;
+          transform: scale(1.1);
+          transition: all 0.2s ease-in-out;
+        }
+        img {
+          display: block;
+          width: 100%;
+        }
+      }
+      .sectorItemTitle {
+        color: #fff;
+        font-size: 14px;
+        padding: 10px 0 0 0;
+        text-align: center;
+      }
+    }
+  }
+</style>

src/views/template/page/pageArticle.vue

@@ -0,0 +1,316 @@
+<template>
+  <div>
+    <!-- 1.页头板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <headSector />
+    </div>
+    <!-- 2.导航板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <menuSector />
+    </div>
+    <!-- 无内容占位符 -->
+    <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.index.length == 0">
+      <img src="@/assets/template/creat.png">
+      <div>请点击一个左侧板块，开始您的网站创建</div>
+    </div>
+    <!--使用gridKey来强制更新视图-->
+    <div id="content">
+      <grid-layout 
+        ref="gridlayout"
+        :layout="this.$store.state.template.pageData.index" 
+        :layout.sync="this.$store.state.template.pageData.index"
+        :col-num="12" 
+        :row-height="rowHeight" 
+        :margin="[0,0]" 
+        :is-draggable="true" 
+        :is-resizable="true" 
+        :key="this.$store.state.template.gridKey
+        ">
+        <grid-item 
+          v-for="(item, index) in this.$store.state.template.pageData.index" 
+          :key="item.i" 
+          :i="item.i" 
+          :x="item.x" 
+          :y="item.y" 
+          :w="item.w" 
+          :h="item.h" 
+          :is-resizable="false">
+          <div class="grid-item-content">
+            <div class="grid-tools-menu" v-if="$store.state.template.previewStatus==false">
+              <!-- 移动板块-->
+              <!-- <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
+              <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span> -->
+              <span @click="deleteModule(item.i,item.dataSort)"><i class="el-icon-close"></i></span>
+            </div>
+            <!-- 4.广告模块 -->
+            <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
+              <imgTitleSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 5.焦点图模块 -->
+            <div v-if="item.type == 'bannerSector'" class="moduleBox">
+              <bannerSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 6.多图模块 -->
+            <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
+              <manyPictureSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 7.评论模块 -->
+            <div v-if="item.type == 'commentSector'" class="moduleBox">
+              <commentSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 8.双联文章列表模块 -->
+            <div v-if="item.type == 'listSector'" class="moduleBox">
+              <listSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 9.纯图片组合模块 --> 
+            <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
+              <onlyImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 10.友情链接模块 --> 
+            <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
+              <friendShipLinkSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+          </div>
+        </grid-item>
+      </grid-layout>
+    </div>
+    <div class="FixedModuleBoxBottom">
+      <!-- 3.页尾模块 -->
+      <footerSector />
+    </div>
+  </div>
+</template>
+
+<script>
+//页面公用组件 start------------------------------------------------------------>
+//引入公用样式
+import '@/styles/global.less';
+import {GridLayout, GridItem} from "vue-grid-layout";
+//页面公用组件 end------------------------------------------------------------>
+
+//自助建站组件 start------------------------------------------------------------>
+//style1
+import headSector from '../style/1/sector/1.vue';//顶部
+import menuSector from '../style/1/sector/2.vue';//菜单
+import imgTitleSector from '../style/1/sector/4.vue';//广告
+import bannerSector from '../style/1/sector/5.vue';//焦点图
+import manyPictureSector from '../style/1/sector/6.vue';//多图
+import commentSector from '../style/1/sector/7.vue';//评论
+import listSector from '../style/1/sector/8.vue';//文章列表
+import onlyImgSector from '../style/1/sector/9.vue';//纯图片组合
+import friendShipLinkSector from '../style/1/sector/10.vue';//友情链接
+import footerSector from '../style/1/sector/3.vue';//底部
+//自助建站组件 end------------------------------------------------------------>
+
+
+export default {
+  components: {
+    GridLayout,
+    GridItem,
+    //板块组件 style1
+    headSector,
+    menuSector,
+    imgTitleSector,
+    bannerSector,
+    manyPictureSector,
+    commentSector,
+    listSector,
+    onlyImgSector,
+    friendShipLinkSector,
+    footerSector
+  },
+  data() {
+    return {
+      //0.全局配置 start------------------------------------------------------------>
+      windowStatus: false,
+      rowHeight:10,
+      //0.全局配置 end------------------------------------------------------------>
+      //1.编辑模块 start------------------------------------------------------------>
+      formLabelWidth: '120px',
+      editModule: "",//待编辑的模块
+      //1.编辑模块 end------------------------------------------------------------>
+    }
+  },
+  mounted() {
+    //必备操作
+    //1.获得vuex中的鼠标对象
+    let mouseObj = this.$store.state.template.mouseXY;
+    //2.获得gridlayout对象
+    this.$store.commit('template/setGridlayoutObj',this.$refs.gridlayout);
+    //3.监听鼠标按住以后的移动事件
+    document.addEventListener("dragover", function (e,store) {
+      mouseObj.x = e.clientX;
+      mouseObj.y = e.clientY;
+      // mouseXY.x = e.clientX;
+      // mouseXY.y = e.clientY;
+    },false);
+  },
+  methods: {
+    //0.全局操作 start ------------------------------------------------------------>
+    //0.1上一步  
+    goStyle(){
+      this.$router.push({
+        path: '/templateStyle',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    //0.2下一步
+    gotoList(){
+      this.$router.push({
+        path: '/templateList'
+      });
+    },
+    //0.全局操作 end ------------------------------------------------------------>
+
+    //1.模块操作 start ------------------------------------------------------------>
+    //1.1 移动模块
+    moveModule(i,moveType){
+      this.$store.commit('template/moveModule',{i:i,moveType:moveType});
+    },
+    //1.2 删除模块
+    deleteModule(i,dataSort){
+      let data = {
+        i:i,
+        dataSort:dataSort
+      }
+      this.$store.commit('template/deleteModule',data);
+    },
+    //1.3 打开弹出框
+    openWindow(item) {
+      this.editModule = item.i;
+      this.windowStatus = true;
+    },
+    //1.4 关闭弹出框
+    closeWindow() {
+      this.windowStatus = false;
+    }
+    //1.模块操作 end ------------------------------------------------------------>
+  }
+}
+</script>
+
+<style scoped lang="less">
+//拖拽demo
+.droppable-element {
+  width: 150px;
+  text-align: center;
+  background: #fdd;
+  border: 1px solid black;
+  margin: 10px 0;
+  padding: 10px;
+}
+//模块 start------------------------------------------------------------> 
+.sectorBorder {
+  border: 2px dashed #eee;
+}
+.moduleBox {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  justify-content: space-between;
+  box-sizing: border-box;
+  //border: 2px dashed #eee;
+}
+.moduleBoxBorder {
+  border: 2px dashed #eee;
+}
+//固定的模块
+.FixedModuleBox {
+  width: 100%;
+  margin-bottom: 20px;
+  //border: 2px dashed #eee;
+}
+.FixedModuleBoxBottom {
+  width: 100%;
+}
+.FixedMainModuleBox {
+  width: 100%;
+  font-size: 18px;
+  color: #999;
+  text-align: center;
+  img {
+    margin-bottom: 20px;
+  }
+  padding: 100px;
+  //background: #F5F7FB;
+  margin-bottom: 20px;
+}
+.FixedMainModuleBoxBorder {
+  border: 2px dashed #eee;
+}
+//模块 end------------------------------------------------------------> 
+//栅格布局 start------------------------------------------------------------> 
+.grid-item-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  
+  .grid-tools-menu {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    span {
+      width: 38px;
+      height: 38px;
+      line-height: 38px;
+      text-align: center;
+      font-size: 30px;
+      cursor: pointer;
+      color: #999;
+      // display: flex;
+      // align-items: center;
+      // justify-content: center;
+      // cursor: pointer;
+      // margin: 5px;
+      // color: #000;
+      // background: #fff;
+      // border: 1px solid #000;
+      // border-radius: 5px;
+      // width: 24px;
+      // height: 24px;
+      // line-height: 24px;
+      // text-align: center;
+      // font-size: 14px;
+      // transition: all 0.3s;
+      // &:hover {
+      //   color: #fff;
+      //   background: #000;
+      // }
+      transition: all 0.3s;
+      &:hover {
+        color: #333;
+      }
+    }
+  }
+}
+.grid-layout {
+  grid-gap: 0;
+  row-gap: 0;
+}
+//栅格布局 end------------------------------------------------------------> 
+//执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+::v-deep .custom-form-item > .el-form-item__label {
+  line-height: 140px !important;
+}
+::v-deep .custom-textarea .el-textarea__inner {
+  resize: none; /* 禁止用户拖拽调整大小 */
+}
+::v-deep .custom-align-right .el-form-item__label {
+  text-align: right; /* 设置标签文字右对齐 */
+}
+::v-deep .shadowBox .el-button--mini.is-circle {
+  border-radius: 50% !important;
+}
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/template/page/pageIndex-copy.vue

@@ -1,278 +0,0 @@
-<template>
-  <div class="grid-layout-demo">
-    <!-- 1.页头板块 -->
-    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
-      <headSector />
-    </div>
-    <!-- 2.导航板块 -->
-    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
-      <menuSector />
-    </div>
-    <!-- 占位符 -->
-    <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.index.length == 0">
-      <img src="@/assets/template/creat.png">
-      <div>您选择的板块将展示到此区域</div>
-    </div>
-    <!--使用gridKey来强制更新视图-->
-    <grid-layout :layout="this.$store.state.template.pageData.index" :margin="[0,0]" :col-num="12" :row-height="rowHeight" :is-draggable="true" :is-resizable="true" :key="this.$store.state.template.gridKey">
-      <grid-item v-for="(item, index) in this.$store.state.template.pageData.index" :key="item.i" :i="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :is-resizable="false">
-        <div class="grid-item-content">
-          <div class="grid-tools-menu" v-if="$store.state.template.previewStatus==false">
-            <!-- 移动板块-->
-            <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
-            <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span>
-            <span @click="deleteModule(item.i,item.dataSort)"><i class="el-icon-close"></i></span>
-          </div>
-          <!-- 4.广告模块 -->
-          <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
-            <imgTitleSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 5.焦点图模块 -->
-          <div v-if="item.type == 'bannerSector'" class="moduleBox">
-            <bannerSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 6.多图模块 -->
-          <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
-            <manyPictureSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 7.评论模块 -->
-          <div v-if="item.type == 'commentSector'" class="moduleBox">
-            <commentSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 8.双联文章列表模块 -->
-          <div v-if="item.type == 'listSector'" class="moduleBox">
-            <listSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 9.纯图片组合模块 --> 
-          <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
-            <onlyImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 10.友情链接模块 --> 
-          <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
-            <friendShipLinkSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-        </div>
-      </grid-item>
-    </grid-layout>
-    <div class="FixedModuleBoxBottom">
-      <!-- 3.页尾模块 -->
-      <footerSector />
-    </div>
-  </div>
-</template>
-
-<script>
-//页面公用组件 start------------------------------------------------------------>
-//引入公用样式
-import '@/styles/global.less';
-//引入vue-grid-layout拖拽效果
-import { GridLayout, GridItem } from 'vue-grid-layout';
-//页面公用组件 end------------------------------------------------------------>
-
-//自助建站组件 start------------------------------------------------------------>
-//style1
-import headSector from '../style/1/sector/1.vue';//顶部
-import menuSector from '../style/1/sector/2.vue';//菜单
-import imgTitleSector from '../style/1/sector/4.vue';//广告
-import bannerSector from '../style/1/sector/5.vue';//焦点图
-import manyPictureSector from '../style/1/sector/6.vue';//多图
-import commentSector from '../style/1/sector/7.vue';//评论
-import listSector from '../style/1/sector/8.vue';//文章列表
-import onlyImgSector from '../style/1/sector/9.vue';//纯图片组合
-import friendShipLinkSector from '../style/1/sector/10.vue';//友情链接
-import footerSector from '../style/1/sector/3.vue';//底部
-//自助建站组件 end------------------------------------------------------------>
-
-export default {
-  components: {
-    //拖拽组件
-    GridLayout,
-    GridItem,
-    //板块组件 style1
-    headSector,
-    menuSector,
-    imgTitleSector,
-    bannerSector,
-    manyPictureSector,
-    commentSector,
-    listSector,
-    onlyImgSector,
-    friendShipLinkSector,
-    footerSector
-  },
-  data() {
-    return {
-      //0.全局配置 start------------------------------------------------------------>
-      windowStatus: false,
-      rowHeight:10,
-      //0.全局配置 end------------------------------------------------------------>
-      //1.编辑模块 start------------------------------------------------------------>
-      formLabelWidth: '120px',
-      editModule: "",//待编辑的模块
-      //1.编辑模块 end------------------------------------------------------------>
-    }
-  },
-  methods: {
-    //0.全局操作 start ------------------------------------------------------------>
-    //0.1上一步  
-    goStyle(){
-      this.$router.push({
-        path: '/templateStyle',
-        query: {
-          id: this.editId
-        }
-      });
-    },
-    //0.2下一步
-    gotoList(){
-      this.$router.push({
-        path: '/templateList'
-      });
-    },
-    //0.全局操作 end ------------------------------------------------------------>
-
-    //1.模块操作 start ------------------------------------------------------------>
-    //1.1 移动模块
-    moveModule(i,moveType){
-      this.$store.commit('template/moveModule',{i:i,moveType:moveType});
-    },
-    //1.2 删除模块
-    deleteModule(i,dataSort){
-      let data = {
-        i:i,
-        dataSort:dataSort
-      }
-      this.$store.commit('template/deleteModule',data);
-    },
-    //1.3 打开弹出框
-    openWindow(item) {
-      this.editModule = item.i;
-      this.windowStatus = true;
-    },
-    //1.4 关闭弹出框
-    closeWindow() {
-      this.windowStatus = false;
-    }
-    //1.模块操作 end ------------------------------------------------------------>
-  },
-  mounted(){
-
-  }
-}
-</script>
-
-<style scoped lang="less">
-  //模块 start------------------------------------------------------------> 
-  .sectorBorder {
-    border: 2px dashed #eee;
-  }
-  .moduleBox {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    justify-content: space-between;
-    box-sizing: border-box;
-    //border: 2px dashed #eee;
-  }
-  .moduleBoxBorder {
-    border: 2px dashed #eee;
-  }
-  //固定的模块
-  .FixedModuleBox {
-    width: 100%;
-    margin-bottom: 20px;
-    //border: 2px dashed #eee;
-  }
-  .FixedModuleBoxBottom {
-    width: 100%;
-  }
-  .FixedMainModuleBox {
-    width: 100%;
-    font-size: 18px;
-    color: #999;
-    text-align: center;
-    img {
-      margin-bottom: 20px;
-    }
-    padding: 100px;
-    //background: #F5F7FB;
-    margin-bottom: 20px;
-  }
-  .FixedMainModuleBoxBorder {
-    border: 2px dashed #eee;
-  }
-  //模块 end------------------------------------------------------------> 
-  //栅格布局 start------------------------------------------------------------> 
-  .grid-item-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #fff;
-    height: 100%;
-    overflow: hidden;
-    position: relative;
-    
-    .grid-tools-menu {
-      position: absolute;
-      top: 0;
-      right: 0;
-      z-index: 99;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      span {
-        width: 38px;
-        height: 38px;
-        line-height: 38px;
-        text-align: center;
-        font-size: 30px;
-        cursor: pointer;
-        color: #999;
-        // display: flex;
-        // align-items: center;
-        // justify-content: center;
-        // cursor: pointer;
-        // margin: 5px;
-        // color: #000;
-        // background: #fff;
-        // border: 1px solid #000;
-        // border-radius: 5px;
-        // width: 24px;
-        // height: 24px;
-        // line-height: 24px;
-        // text-align: center;
-        // font-size: 14px;
-        // transition: all 0.3s;
-        // &:hover {
-        //   color: #fff;
-        //   background: #000;
-        // }
-        transition: all 0.3s;
-        &:hover {
-          color: #333;
-        }
-      }
-    }
-  }
-  .grid-layout {
-    grid-gap: 0;
-    row-gap: 0;
-  }
-  //栅格布局 end------------------------------------------------------------> 
-  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
-  ::v-deep .custom-form-item > .el-form-item__label {
-    line-height: 140px !important;
-  }
-  ::v-deep .custom-textarea .el-textarea__inner {
-    resize: none; /* 禁止用户拖拽调整大小 */
-  }
-  ::v-deep .custom-align-right .el-form-item__label {
-    text-align: right; /* 设置标签文字右对齐 */
-  }
-  ::v-deep .shadowBox .el-button--mini.is-circle {
-    border-radius: 50% !important;
-  }
-  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
-</style>  
-

src/views/template/page/pageIndex-copy2.vue

@@ -1,278 +0,0 @@
-<template>
-  <div class="grid-layout-demo">
-    <!-- 1.页头板块 -->
-    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
-      <headSector />
-    </div>
-    <!-- 2.导航板块 -->
-    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
-      <menuSector />
-    </div>
-    <!-- 占位符 -->
-    <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.index.length == 0">
-      <img src="@/assets/template/creat.png">
-      <div>您选择的板块将展示到此区域</div>
-    </div>
-    <!--使用gridKey来强制更新视图-->
-    <grid-layout :layout="this.$store.state.template.pageData.index" :margin="[0,0]" :col-num="12" :row-height="rowHeight" :is-draggable="true" :is-resizable="true" :key="this.$store.state.template.gridKey">
-      <grid-item v-for="(item, index) in this.$store.state.template.pageData.index" :key="item.i" :i="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :is-resizable="false">
-        <div class="grid-item-content">
-          <div class="grid-tools-menu" v-if="$store.state.template.previewStatus==false">
-            <!-- 移动板块-->
-            <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
-            <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span>
-            <span @click="deleteModule(item.i,item.dataSort)"><i class="el-icon-close"></i></span>
-          </div>
-          <!-- 4.广告模块 -->
-          <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
-            <imgTitleSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 5.焦点图模块 -->
-          <div v-if="item.type == 'bannerSector'" class="moduleBox">
-            <bannerSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 6.多图模块 -->
-          <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
-            <manyPictureSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 7.评论模块 -->
-          <div v-if="item.type == 'commentSector'" class="moduleBox">
-            <commentSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 8.双联文章列表模块 -->
-          <div v-if="item.type == 'listSector'" class="moduleBox">
-            <listSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 9.纯图片组合模块 --> 
-          <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
-            <onlyImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 10.友情链接模块 --> 
-          <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
-            <friendShipLinkSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-        </div>
-      </grid-item>
-    </grid-layout>
-    <div class="FixedModuleBoxBottom">
-      <!-- 3.页尾模块 -->
-      <footerSector />
-    </div>
-  </div>
-</template>
-
-<script>
-//页面公用组件 start------------------------------------------------------------>
-//引入公用样式
-import '@/styles/global.less';
-//引入vue-grid-layout拖拽效果
-import { GridLayout, GridItem } from 'vue-grid-layout';
-//页面公用组件 end------------------------------------------------------------>
-
-//自助建站组件 start------------------------------------------------------------>
-//style1
-import headSector from '../style/1/sector/1.vue';//顶部
-import menuSector from '../style/1/sector/2.vue';//菜单
-import imgTitleSector from '../style/1/sector/4.vue';//广告
-import bannerSector from '../style/1/sector/5.vue';//焦点图
-import manyPictureSector from '../style/1/sector/6.vue';//多图
-import commentSector from '../style/1/sector/7.vue';//评论
-import listSector from '../style/1/sector/8.vue';//文章列表
-import onlyImgSector from '../style/1/sector/9.vue';//纯图片组合
-import friendShipLinkSector from '../style/1/sector/10.vue';//友情链接
-import footerSector from '../style/1/sector/3.vue';//底部
-//自助建站组件 end------------------------------------------------------------>
-
-export default {
-  components: {
-    //拖拽组件
-    GridLayout,
-    GridItem,
-    //板块组件 style1
-    headSector,
-    menuSector,
-    imgTitleSector,
-    bannerSector,
-    manyPictureSector,
-    commentSector,
-    listSector,
-    onlyImgSector,
-    friendShipLinkSector,
-    footerSector
-  },
-  data() {
-    return {
-      //0.全局配置 start------------------------------------------------------------>
-      windowStatus: false,
-      rowHeight:10,
-      //0.全局配置 end------------------------------------------------------------>
-      //1.编辑模块 start------------------------------------------------------------>
-      formLabelWidth: '120px',
-      editModule: "",//待编辑的模块
-      //1.编辑模块 end------------------------------------------------------------>
-    }
-  },
-  methods: {
-    //0.全局操作 start ------------------------------------------------------------>
-    //0.1上一步  
-    goStyle(){
-      this.$router.push({
-        path: '/templateStyle',
-        query: {
-          id: this.editId
-        }
-      });
-    },
-    //0.2下一步
-    gotoList(){
-      this.$router.push({
-        path: '/templateList'
-      });
-    },
-    //0.全局操作 end ------------------------------------------------------------>
-
-    //1.模块操作 start ------------------------------------------------------------>
-    //1.1 移动模块
-    moveModule(i,moveType){
-      this.$store.commit('template/moveModule',{i:i,moveType:moveType});
-    },
-    //1.2 删除模块
-    deleteModule(i,dataSort){
-      let data = {
-        i:i,
-        dataSort:dataSort
-      }
-      this.$store.commit('template/deleteModule',data);
-    },
-    //1.3 打开弹出框
-    openWindow(item) {
-      this.editModule = item.i;
-      this.windowStatus = true;
-    },
-    //1.4 关闭弹出框
-    closeWindow() {
-      this.windowStatus = false;
-    }
-    //1.模块操作 end ------------------------------------------------------------>
-  },
-  mounted(){
-
-  }
-}
-</script>
-
-<style scoped lang="less">
-  //模块 start------------------------------------------------------------> 
-  .sectorBorder {
-    border: 2px dashed #eee;
-  }
-  .moduleBox {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    justify-content: space-between;
-    box-sizing: border-box;
-    //border: 2px dashed #eee;
-  }
-  .moduleBoxBorder {
-    border: 2px dashed #eee;
-  }
-  //固定的模块
-  .FixedModuleBox {
-    width: 100%;
-    margin-bottom: 20px;
-    //border: 2px dashed #eee;
-  }
-  .FixedModuleBoxBottom {
-    width: 100%;
-  }
-  .FixedMainModuleBox {
-    width: 100%;
-    font-size: 18px;
-    color: #999;
-    text-align: center;
-    img {
-      margin-bottom: 20px;
-    }
-    padding: 100px;
-    //background: #F5F7FB;
-    margin-bottom: 20px;
-  }
-  .FixedMainModuleBoxBorder {
-    border: 2px dashed #eee;
-  }
-  //模块 end------------------------------------------------------------> 
-  //栅格布局 start------------------------------------------------------------> 
-  .grid-item-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #fff;
-    height: 100%;
-    overflow: hidden;
-    position: relative;
-    
-    .grid-tools-menu {
-      position: absolute;
-      top: 0;
-      right: 0;
-      z-index: 99;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      span {
-        width: 38px;
-        height: 38px;
-        line-height: 38px;
-        text-align: center;
-        font-size: 30px;
-        cursor: pointer;
-        color: #999;
-        // display: flex;
-        // align-items: center;
-        // justify-content: center;
-        // cursor: pointer;
-        // margin: 5px;
-        // color: #000;
-        // background: #fff;
-        // border: 1px solid #000;
-        // border-radius: 5px;
-        // width: 24px;
-        // height: 24px;
-        // line-height: 24px;
-        // text-align: center;
-        // font-size: 14px;
-        // transition: all 0.3s;
-        // &:hover {
-        //   color: #fff;
-        //   background: #000;
-        // }
-        transition: all 0.3s;
-        &:hover {
-          color: #333;
-        }
-      }
-    }
-  }
-  .grid-layout {
-    grid-gap: 0;
-    row-gap: 0;
-  }
-  //栅格布局 end------------------------------------------------------------> 
-  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
-  ::v-deep .custom-form-item > .el-form-item__label {
-    line-height: 140px !important;
-  }
-  ::v-deep .custom-textarea .el-textarea__inner {
-    resize: none; /* 禁止用户拖拽调整大小 */
-  }
-  ::v-deep .custom-align-right .el-form-item__label {
-    text-align: right; /* 设置标签文字右对齐 */
-  }
-  ::v-deep .shadowBox .el-button--mini.is-circle {
-    border-radius: 50% !important;
-  }
-  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
-</style>  
-

src/views/template/page/pageList.vue

@@ -0,0 +1,316 @@
+<template>
+  <div>
+    <!-- 1.页头板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <headSector />
+    </div>
+    <!-- 2.导航板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <menuSector />
+    </div>
+    <!-- 无内容占位符 -->
+    <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.index.length == 0">
+      <img src="@/assets/template/creat.png">
+      <div>请点击一个左侧板块，开始您的网站创建</div>
+    </div>
+    <!--使用gridKey来强制更新视图-->
+    <div id="content">
+      <grid-layout 
+        ref="gridlayout"
+        :layout="this.$store.state.template.pageData.index" 
+        :layout.sync="this.$store.state.template.pageData.index"
+        :col-num="12" 
+        :row-height="rowHeight" 
+        :margin="[0,0]" 
+        :is-draggable="true" 
+        :is-resizable="true" 
+        :key="this.$store.state.template.gridKey
+        ">
+        <grid-item 
+          v-for="(item, index) in this.$store.state.template.pageData.index" 
+          :key="item.i" 
+          :i="item.i" 
+          :x="item.x" 
+          :y="item.y" 
+          :w="item.w" 
+          :h="item.h" 
+          :is-resizable="false">
+          <div class="grid-item-content">
+            <div class="grid-tools-menu" v-if="$store.state.template.previewStatus==false">
+              <!-- 移动板块-->
+              <!-- <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
+              <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span> -->
+              <span @click="deleteModule(item.i,item.dataSort)"><i class="el-icon-close"></i></span>
+            </div>
+            <!-- 4.广告模块 -->
+            <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
+              <imgTitleSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 5.焦点图模块 -->
+            <div v-if="item.type == 'bannerSector'" class="moduleBox">
+              <bannerSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 6.多图模块 -->
+            <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
+              <manyPictureSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 7.评论模块 -->
+            <div v-if="item.type == 'commentSector'" class="moduleBox">
+              <commentSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 8.双联文章列表模块 -->
+            <div v-if="item.type == 'listSector'" class="moduleBox">
+              <listSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 9.纯图片组合模块 --> 
+            <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
+              <onlyImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 10.友情链接模块 --> 
+            <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
+              <friendShipLinkSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+          </div>
+        </grid-item>
+      </grid-layout>
+    </div>
+    <div class="FixedModuleBoxBottom">
+      <!-- 3.页尾模块 -->
+      <footerSector />
+    </div>
+  </div>
+</template>
+
+<script>
+//页面公用组件 start------------------------------------------------------------>
+//引入公用样式
+import '@/styles/global.less';
+import {GridLayout, GridItem} from "vue-grid-layout";
+//页面公用组件 end------------------------------------------------------------>
+
+//自助建站组件 start------------------------------------------------------------>
+//style1
+import headSector from '../style/1/sector/1.vue';//顶部
+import menuSector from '../style/1/sector/2.vue';//菜单
+import imgTitleSector from '../style/1/sector/4.vue';//广告
+import bannerSector from '../style/1/sector/5.vue';//焦点图
+import manyPictureSector from '../style/1/sector/6.vue';//多图
+import commentSector from '../style/1/sector/7.vue';//评论
+import listSector from '../style/1/sector/8.vue';//文章列表
+import onlyImgSector from '../style/1/sector/9.vue';//纯图片组合
+import friendShipLinkSector from '../style/1/sector/10.vue';//友情链接
+import footerSector from '../style/1/sector/3.vue';//底部
+//自助建站组件 end------------------------------------------------------------>
+
+
+export default {
+  components: {
+    GridLayout,
+    GridItem,
+    //板块组件 style1
+    headSector,
+    menuSector,
+    imgTitleSector,
+    bannerSector,
+    manyPictureSector,
+    commentSector,
+    listSector,
+    onlyImgSector,
+    friendShipLinkSector,
+    footerSector
+  },
+  data() {
+    return {
+      //0.全局配置 start------------------------------------------------------------>
+      windowStatus: false,
+      rowHeight:10,
+      //0.全局配置 end------------------------------------------------------------>
+      //1.编辑模块 start------------------------------------------------------------>
+      formLabelWidth: '120px',
+      editModule: "",//待编辑的模块
+      //1.编辑模块 end------------------------------------------------------------>
+    }
+  },
+  mounted() {
+    //必备操作
+    //1.获得vuex中的鼠标对象
+    let mouseObj = this.$store.state.template.mouseXY;
+    //2.获得gridlayout对象
+    this.$store.commit('template/setGridlayoutObj',this.$refs.gridlayout);
+    //3.监听鼠标按住以后的移动事件
+    document.addEventListener("dragover", function (e,store) {
+      mouseObj.x = e.clientX;
+      mouseObj.y = e.clientY;
+      // mouseXY.x = e.clientX;
+      // mouseXY.y = e.clientY;
+    },false);
+  },
+  methods: {
+    //0.全局操作 start ------------------------------------------------------------>
+    //0.1上一步  
+    goStyle(){
+      this.$router.push({
+        path: '/templateStyle',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    //0.2下一步
+    gotoList(){
+      this.$router.push({
+        path: '/templateList'
+      });
+    },
+    //0.全局操作 end ------------------------------------------------------------>
+
+    //1.模块操作 start ------------------------------------------------------------>
+    //1.1 移动模块
+    moveModule(i,moveType){
+      this.$store.commit('template/moveModule',{i:i,moveType:moveType});
+    },
+    //1.2 删除模块
+    deleteModule(i,dataSort){
+      let data = {
+        i:i,
+        dataSort:dataSort
+      }
+      this.$store.commit('template/deleteModule',data);
+    },
+    //1.3 打开弹出框
+    openWindow(item) {
+      this.editModule = item.i;
+      this.windowStatus = true;
+    },
+    //1.4 关闭弹出框
+    closeWindow() {
+      this.windowStatus = false;
+    }
+    //1.模块操作 end ------------------------------------------------------------>
+  }
+}
+</script>
+
+<style scoped lang="less">
+//拖拽demo
+.droppable-element {
+  width: 150px;
+  text-align: center;
+  background: #fdd;
+  border: 1px solid black;
+  margin: 10px 0;
+  padding: 10px;
+}
+//模块 start------------------------------------------------------------> 
+.sectorBorder {
+  border: 2px dashed #eee;
+}
+.moduleBox {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  justify-content: space-between;
+  box-sizing: border-box;
+  //border: 2px dashed #eee;
+}
+.moduleBoxBorder {
+  border: 2px dashed #eee;
+}
+//固定的模块
+.FixedModuleBox {
+  width: 100%;
+  margin-bottom: 20px;
+  //border: 2px dashed #eee;
+}
+.FixedModuleBoxBottom {
+  width: 100%;
+}
+.FixedMainModuleBox {
+  width: 100%;
+  font-size: 18px;
+  color: #999;
+  text-align: center;
+  img {
+    margin-bottom: 20px;
+  }
+  padding: 100px;
+  //background: #F5F7FB;
+  margin-bottom: 20px;
+}
+.FixedMainModuleBoxBorder {
+  border: 2px dashed #eee;
+}
+//模块 end------------------------------------------------------------> 
+//栅格布局 start------------------------------------------------------------> 
+.grid-item-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  
+  .grid-tools-menu {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    span {
+      width: 38px;
+      height: 38px;
+      line-height: 38px;
+      text-align: center;
+      font-size: 30px;
+      cursor: pointer;
+      color: #999;
+      // display: flex;
+      // align-items: center;
+      // justify-content: center;
+      // cursor: pointer;
+      // margin: 5px;
+      // color: #000;
+      // background: #fff;
+      // border: 1px solid #000;
+      // border-radius: 5px;
+      // width: 24px;
+      // height: 24px;
+      // line-height: 24px;
+      // text-align: center;
+      // font-size: 14px;
+      // transition: all 0.3s;
+      // &:hover {
+      //   color: #fff;
+      //   background: #000;
+      // }
+      transition: all 0.3s;
+      &:hover {
+        color: #333;
+      }
+    }
+  }
+}
+.grid-layout {
+  grid-gap: 0;
+  row-gap: 0;
+}
+//栅格布局 end------------------------------------------------------------> 
+//执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+::v-deep .custom-form-item > .el-form-item__label {
+  line-height: 140px !important;
+}
+::v-deep .custom-textarea .el-textarea__inner {
+  resize: none; /* 禁止用户拖拽调整大小 */
+}
+::v-deep .custom-align-right .el-form-item__label {
+  text-align: right; /* 设置标签文字右对齐 */
+}
+::v-deep .shadowBox .el-button--mini.is-circle {
+  border-radius: 50% !important;
+}
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/template/templateCreat.vue

@@ -25,6 +25,8 @@
         <div :class="['pageTabsItem', this.$store.state.template.pageStatus === 7 ? 'active' : '']" @click="openPage(7)">自定义详情页</div> -->
       </div>
       <pageIndex v-if="this.$store.state.template.pageStatus == 1"/>
+      <pageList v-if="this.$store.state.template.pageStatus == 3"/>
+      <pageArticle v-if="this.$store.state.template.pageStatus == 4"/>
     </div>
     <!-- 画布 end ---------------------------------------->
 
@@ -59,12 +61,16 @@ import componentWindow from './public/componentWindow.vue';
 
 //页面组件 start------------------------------------------------------------>
 import pageIndex from './page/pageIndex.vue';
+import pageList from './page/pageList.vue';
+import pageArticle from './page/pageArticle.vue';
 //页面组件 end------------------------------------------------------------>
 
 export default {
   components: {
     //引入页面组件
     pageIndex,
+    pageList,
+    pageArticle,
     editWindow,
     componentWindow
   },