核心算法完成

核心算法完成

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

@@ -12,43 +12,43 @@
       </div>
       <div class="sectorItemTitle">网站导航</div>
     </div> -->
-    <div class="sectorItemBox" @click="addModule('imgTitleSector',8,imgTitleSector)">
+    <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('bannerSector',33,bannerSector)">
+    <div class="sectorItemBox" @click="addModule('bannerSector',33,bannerSector)" @drag="drag('bannerSector',33,bannerSector)" @dragend="dragend('bannerSector',33,bannerSector)" >
       <div class="sectorItem">
         <img src="@/assets/template/sector/bannerSector.png"/>
       </div>
       <div class="sectorItemTitle">焦点图</div>
     </div>
-    <div class="sectorItemBox" @click="addModule('manyPictureSector',49,manyPictureSector)">
+    <div class="sectorItemBox" @click="addModule('manyPictureSector',49,manyPictureSector)" @drag="drag('manyPictureSector',49,manyPictureSector)" @dragend="dragend('manyPictureSector',49,manyPictureSector)" >
       <div class="sectorItem">
         <img src="@/assets/template/sector/moreServicesSector.png"/>
       </div>
       <div class="sectorItemTitle">多图菜单</div>
     </div>
-    <div class="sectorItemBox" @click="addModule('commentSector',44,commentSector)">
+    <div class="sectorItemBox" @click="addModule('commentSector',44,commentSector)" @drag="drag('commentSector',44,commentSector)" @dragend="dragend('commentSector',44,commentSector)" >
       <div class="sectorItem">
         <img src="@/assets/template/sector/commentSector.png"/>
       </div>
       <div class="sectorItemTitle">文章列表带评论</div>
     </div>
-    <div class="sectorItemBox" @click="addModule('listSector',33,listSector)">
+    <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('onlyImgSector',32,onlyImgSector)">
+    <div class="sectorItemBox" @click="addModule('onlyImgSector',32,onlyImgSector)" @drag="drag('onlyImgSector',32,onlyImgSector)" @dragend="dragend('onlyImgSector',32,onlyImgSector)" >
       <div class="sectorItem">
         <img src="@/assets/template/sector/imgSector.png"/> 
       </div>
       <div class="sectorItemTitle">纯图片组合</div>
     </div>
-    <div class="sectorItemBox" @click="addModule('friendShipLinkSector',20,friendShipLinkSector)">
+    <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>
@@ -338,14 +338,34 @@ export default {
     }
   },
   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);
     }
   }
 }

src/store/modules/template.js

@@ -70,6 +70,7 @@ const state = {
   //4.构造的网站数据 start------------------------------------------------------------>
   editWindowStatus:false,//编辑组件弹出框是否显示
   editComponentWindowStatus:false,//选择组件样式弹出框是否显示
+  editWebsiteTemplateJsonWindow:false,//当前准备提交的数据 后期删除
   editWindowTitle:"",//编辑弹出框标题
   editSectorId:0,//当前正在编辑的板块id
   editDataSort:0,//当前正在编辑的数据位置
@@ -160,6 +161,10 @@ const mutations = {
   closeComponentStyleStatus(state){
     state.editComponentWindowStatus = false;
   },
+  //关闭提交数据弹出框
+  closeEditWebsiteTemplateJsonWindow(state){
+    state.editWebsiteTemplateJsonWindow = false;
+  },
   //选择组件样式
   selectComponentStyleNumber(state,data){
     state.editComponentStyle = data;
@@ -218,31 +223,72 @@ const mutations = {
         Message.error('最多只能添加10个模块！');
         return;
       }else{
-        //通过时间戳生成id
-        const currentTimestamp = Date.now();
-        let id = currentTimestamp;
-        //data.type 组件名称 data.h 模块高度 
-        //计算当前布局的最大 y 值
-        const maxY = Math.max(...state.pageData.index.map(item => item.y), 0);
-        console.log(data);
-        //设置数据在构建json中的位置
-        let dataSort = state.pageData.index.length;
-        //添加板块id  
-        state.pageData.index.push({
-          //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-          i: id,
-          x: 0, 
-          y: maxY + 1, 
-          w: 12, 
-          h: data.h, 
-          type: data.type,
-          //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-          content:data.jsonData,
-          dataSort:dataSort
-        });
-        console.log("当前添加模块的dataSort为：" + dataSort);
-        //当前的页面构建数据
-        console.log(state.pageData.index);
+        //判断是拖拽的还是点击添加进来的 click=点击
+        if(data.source == "click"){
+          console.log("通过点击添加一个板块");
+          //通过时间戳生成id
+          const currentTimestamp = Date.now();
+          let id = currentTimestamp;
+          //data.type 组件名称 data.h 模块高度 
+          //计算当前布局的最大 y 值
+          const maxY = Math.max(...state.pageData.index.map(item => item.y), 0);
+          console.log(data);
+          //设置数据在构建json中的位置
+          let dataSort = state.pageData.index.length;
+          //添加板块id  
+          state.pageData.index.push({
+            //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
+            i: id,
+            x: 0, 
+            y: maxY + 1, 
+            w: 12, 
+            h: data.h, 
+            type: data.type,
+            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+            content:data.jsonData,
+            dataSort:dataSort
+          });
+          console.log("当前添加模块的dataSort为：" + dataSort);
+          //当前的页面构建数据
+          console.log(state.pageData.index);
+        }
+
+        //drag=拖拽
+        if(data.source == "drag"){
+          //拖拽添加
+          console.log("通过拖拽添加一个板块");
+          //通过时间戳生成id
+          const currentTimestamp = Date.now();
+          let id = currentTimestamp;
+          //data.type 组件名称 data.h 模块高度 
+          //计算当前布局的最大 y 值
+          const maxY = Math.max(...state.pageData.index.map(item => item.y), 0);
+          console.log(data);
+          //设置数据在构建json中的位置
+          let dataSort = state.pageData.index.length;
+          //添加板块id  
+          state.pageData.index.push({
+            //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
+            i: id,
+            x: data.x, 
+            y: data.y, 
+            w: 12, 
+            h: data.h, 
+            type: data.type,
+            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+            content:data.jsonData,
+            dataSort:dataSort
+          });
+          console.log("当前添加模块的dataSort为：" + dataSort);
+          //当前的页面构建数据
+          console.log(state.pageData.index);
+          //需要调查一下这里最后的1，1
+          state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1,1);
+          try {
+            state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display="block";
+          } catch {}
+        }
+
       }
     }
     //pageStatus==2 分类页
@@ -489,79 +535,122 @@ const mutations = {
     // if (state.pageStatus == 7) {}
   },
   //从外部拖拽板块
-  drag: function (state, data) {
-    let parentRect = document.getElementById('content').getBoundingClientRect();
-    //console.log(parentRect); 获取画布
-    let mouseInGrid = false;
-    if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
-      mouseInGrid = true;
-    }
-    //state.gridlayoutObj
-    //如果没有占位符就创建一个
-    if (mouseInGrid === true && (state.pageData.index.findIndex(item => item.i === 'drop')) === -1) {
-      state.pageData.index.push({
-        x: (state.pageData.index.length * 2) % (this.colNum || 12),
-        y: state.pageData.index.length + (this.colNum || 12), // puts it at the bottom
-        w: 12,
-        h: 2,
-        i: 'drop',
-      });
-    }
-    //如果已经存在占位符
-    let index = state.pageData.index.findIndex(item => item.i === 'drop');
-    if (index !== -1) {
-      try {
-        state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display = "none";
-      } catch {
-
+  drag(state, data) {
+    // pageStatus == 1 首页
+    if (state.pageStatus == 1) {
+      let parentRect = document.getElementById('content').getBoundingClientRect();
+      //console.log(parentRect); 获取画布
+      let mouseInGrid = false;
+      if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
+        mouseInGrid = true;
       }
-      let el = state.gridlayoutObj.$children[index];
-      el.dragging = {"top": state.mouseXY.y - parentRect.top, "left": state.mouseXY.x - parentRect.left};
-      let new_pos = el.calcXY(state.mouseXY.y - parentRect.top, state.mouseXY.x - parentRect.left);
-
-      if (mouseInGrid === true) {
-        state.gridlayoutObj.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 12);
-        state.DragPos.i = String(index);
-        state.DragPos.x = state.pageData.index[index].x;
-        state.DragPos.y = state.pageData.index[index].y;
+      //state.gridlayoutObj
+      //如果没有占位符就创建一个
+      if (mouseInGrid === true && (state.pageData.index.findIndex(item => item.i === 'drop')) === -1) {
+        state.pageData.index.push({
+          x: (state.pageData.index.length * 2) % (this.colNum || 12),
+          y: state.pageData.index.length + (this.colNum || 12), // puts it at the bottom
+          w: 12,
+          h: 2,
+          i: 'drop',
+        });
       }
-      if (mouseInGrid === false) {
-        state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
-        state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop');
+      //如果已经存在占位符
+      let index = state.pageData.index.findIndex(item => item.i === 'drop');
+      if (index !== -1) {
+        try {
+          state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display = "none";
+        } catch {
+
+        }
+        let el = state.gridlayoutObj.$children[index];
+        el.dragging = {"top": state.mouseXY.y - parentRect.top, "left": state.mouseXY.x - parentRect.left};
+        let new_pos = el.calcXY(state.mouseXY.y - parentRect.top, state.mouseXY.x - parentRect.left);
+
+        if (mouseInGrid === true) {
+          state.gridlayoutObj.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 12);
+          state.DragPos.i = String(index);
+          state.DragPos.x = state.pageData.index[index].x;
+          state.DragPos.y = state.pageData.index[index].y;
+        }
+        if (mouseInGrid === false) {
+          state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
+          state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop');
+        }
       }
     }
+    // pageStatus == 2 分类页
+    if (state.pageStatus == 2) {}
+    // pageStatus == 3 列表页
+    if (state.pageStatus == 3) {}
+    // pageStatus == 4 详情页
+    if (state.pageStatus == 4) {}
+    // pageStatus == 5 搜索页
+    if (state.pageStatus == 5) {}
+    // pageStatus == 6 自定义列表页
+    if (state.pageStatus == 6) {}
+    // pageStatus == 7 自定义详情页
+    if (state.pageStatus == 7) {}
   },
   //拖拽结束 定位落点
-  dragend: function (state, data) {
-    //获取画布尺寸
-    let parentRect = document.getElementById('content').getBoundingClientRect();
-    //判断是否在画布内
-    let mouseInGrid = false;
-    if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
-        mouseInGrid = true;
-    }
-    //如果在画布内，开始创建元素
-    if (mouseInGrid === true) {
-      alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
-      state.gridlayoutObj.dragEvent('dragend', 'drop', state.DragPos.x, state.DragPos.y, 1, 1);
-      state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop');
-      
-      // UNCOMMENT below if you want to add a grid-item
-      /*
-      this.layout.push({
-          x: DragPos.x,
-          y: DragPos.y,
-          w: 1,
-          h: 1,
-          i: DragPos.i,
-      });
-      this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x,DragPos.y,1,1);
-      try {
-          this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="block";
-      } catch {
+  dragend(state, data) {
+
+    // pageStatus == 1 首页
+    if (state.pageStatus == 1) {
+      //获取画布尺寸
+      let parentRect = document.getElementById('content').getBoundingClientRect();
+      //判断是否在画布内
+      let mouseInGrid = false;
+      if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
+          mouseInGrid = true;
+      }
+      //如果在画布内，开始创建元素
+      if (mouseInGrid === true) {
+        alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
+        state.gridlayoutObj.dragEvent('dragend', 'drop', state.DragPos.x, state.DragPos.y, 1, 1);
+        state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop');
+
+        // UNCOMMENT below if you want to add a grid-item
+        /*
+        this.layout.push({
+            x: DragPos.x,
+            y: DragPos.y,
+            w: 1,
+            h: 1,
+            i: DragPos.i,
+        });
+        this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x,DragPos.y,1,1);
+        try {
+            this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="block";
+        } catch {
+        }
+        */
+        let sendData = {
+          source:"drag",//添加时判断此模块来自外部拖拽，而不是点击
+          type:data.type,
+          h:data.h,
+          jsonData:data.jsonData,
+          x: state.DragPos.x,
+          y: state.DragPos.y,
+          w: 12,
+        }
+        //开发到这里了，注意我可能还需要上面那个 this.$refs.gridLayout.dragEvent方法
+        this.commit('template/addModule',sendData);
+
       }
-      */
     }
+    // pageStatus == 2 分类页
+    if (state.pageStatus == 2) {}
+    // pageStatus == 3 列表页
+    if (state.pageStatus == 3) {}
+    // pageStatus == 4 详情页
+    if (state.pageStatus == 4) {}
+    // pageStatus == 5 搜索页
+    if (state.pageStatus == 5) {}
+    // pageStatus == 6 自定义列表页
+    if (state.pageStatus == 6) {}
+    // pageStatus == 7 自定义详情页
+    if (state.pageStatus == 7) {}
   },
   //修改首页板块高度
   setModuleHeight(state,data){
@@ -607,6 +696,9 @@ const mutations = {
   },
   //保存模板
   saveTemplate(state) {
+    //临时展示保存的数据 后期移除
+    state.editWebsiteTemplateJsonWindow = true;
+
     //调用mutations中的方法无需使用$store
     //格式化index的信息
     this.commit('template/formatTemplateInfo',{data:state.pageData.index,type:"index"});
@@ -619,6 +711,8 @@ const mutations = {
     const randomIndex = Math.floor(Math.random() * 3); // Generates a random number between 1 and 2
     console.log(`随机生成的数字是: ${randomIndex}`);
 
+    Message.warning("该功能研发中");
+
     // pageStatus == 1 首页
     if (state.pageStatus == 1) {}
     // pageStatus == 2 分类页

src/views/template/page/pageIndex.vue

@@ -8,22 +8,10 @@
     <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
       <menuSector />
     </div>
-
-
-    <div 
-      @drag="$store.commit('template/drag')" 
-      @dragend="$store.commit('template/dragend')" 
-      class="droppable-element" 
-      draggable="true" 
-      unselectable="on">
-        要拖拽的板块
-    </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>请点击一个左侧板块，开始您的网站创建</div>
     </div>
     <!--使用gridKey来强制更新视图-->
     <div id="content">
@@ -50,8 +38,8 @@
           <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="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.广告模块 -->
@@ -158,7 +146,47 @@ export default {
     },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>

src/views/template/templateCreat.vue

@@ -36,6 +36,16 @@
     <el-dialog title="更换组件样式" :visible="this.$store.state.template.editComponentWindowStatus" :close-on-click-modal="false" @close="closeComponentStyleWindow">
       <componentWindow />
     </el-dialog>
+    <el-dialog title="当前提交的webSiteTemplateJson" :visible="this.$store.state.template.editWebsiteTemplateJsonWindow" :close-on-click-modal="false" @close="closeEditWebsiteTemplateJsonWindow">
+      <div class="editWebsiteTemplateJsonBox">
+        <pre>{{this.$store.state.template.webSiteData}}</pre>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <div class="footerBtnbox">
+          <el-button type="primary" @click="gotoList">保存并退出</el-button>
+        </div>
+      </div>
+    </el-dialog>
     <!-- 弹出框 start ---------------------------------------->
   </div>
 </template>
@@ -91,6 +101,7 @@ export default {
     },
     //下一步
     gotoList(){
+      this.$store.commit('template/closeEditWebsiteTemplateJsonWindow');
       this.$router.push({
         path: '/templateList'
       });
@@ -120,6 +131,10 @@ export default {
     closeComponentStyleWindow(){
       this.$store.commit('template/closeComponentStyleStatus');
     },
+    //关闭提交数据弹出框
+    closeEditWebsiteTemplateJsonWindow(){
+      this.$store.commit('template/closeEditWebsiteTemplateJsonWindow');
+    },
     //设置预览状态
     setPreviewStatus(){
       this.$store.commit('template/setPreviewStatus');
@@ -197,6 +212,12 @@ export default {
     }
   }
 
+  //提交数据展示窗口
+  .editWebsiteTemplateJsonBox {
+    height: 300px;
+    overflow-y: auto;
+  }
+
   //菜单 start------------------------------------------------------------> 
   // .layerTabsBox {
   //   margin: 30px;