admin_home/src/views/template/page/pageList.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.list.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.list.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
                ref="gridlayout" 
                :layout="this.$store.state.template.pageData.list"
                :layout.sync="this.$store.state.template.pageData.list" 
                :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.list" 
                    :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>
                        <!-- 8.双联文章列表模块 -->
                        <div v-if="item.type == 'listSector'" class="moduleBox">
                            <listSector :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 == 'mainListSector'" class="moduleBox">
                            <mainListSector :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 mainListSector from '../style/sector/11.vue';//主文章列表
//自助建站组件 end------------------------------------------------------------>


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

//画布调整
.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>