admin_home/src/views/template/page/pageArticle.vue

<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.article.length == 0">
      <img src="@/assets/template/creat.png">
      <div>请点击一个左侧板块，开始您的网站创建</div>
    </div> -->
    <!--使用gridKey来强制更新视图-->
    <div 
        id="content" 
        class="canvasBox"
    >
      <grid-layout 
        :auto-size="true"
        :class="this.$store.state.template.pageData.article.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
        ref="gridlayout"
        :layout="this.$store.state.template.pageData.article" 
        :layout.sync="this.$store.state.template.pageData.article"
        :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.article" 
          :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 == 'adSector'" class="moduleBox">
              <adSector :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>
            <!-- 11.文章详情 --> 
            <div v-if="item.type == 'mainArticle'" class="moduleBox">
              <mainArticle :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------------------------------------------------------------>
//顶部
import headSector from '../style/sector/head/1.vue';
//一级菜单导肮
import menuSector from '../style/sector/menu/1.vue';
//底部
import footerSector from '../style/sector/foot/1.vue';
//通栏组件
//通栏广告
import adSector from '../style/sector/body/ad/1200x90/1.vue';



// import manyPictureSector from '../style/sector/6.vue';//多图
// import commentSector from '../style/sector/7.vue';//评论
// import listSector from '../style/sector/8.vue';//文章列表
// import onlyImgSector from '../style/sector/9.vue';//纯图片组合
// import friendShipLinkSector from '../style/sector/10.vue';//友情链接
// import mainArticle from '../style/sector/12.vue';//文章详情
//自助建站组件 end------------------------------------------------------------>


export default {
  components: {
    GridLayout,
    GridItem,
    //板块组件 style1
    headSector,
    menuSector,
    adSector,
    // manyPictureSector,
    // commentSector,
    // listSector,
    // onlyImgSector,
    // friendShipLinkSector,
    //mainArticle
    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;
}

//画布调整
.canvasBox {
    margin-top: 20px;
}

.FixedMainModuleBox {
  min-height: 450px;
  background-color: #fff;
  background: url('../../../assets/template/creat.png') no-repeat center center;
}

.FixedMainModuleBoxAuto {
  min-height: 450px;
  background-color: #fff;
}

//栅格布局 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>