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

<template>
    <div>
        <!-- 全局组件：页头 -->
        <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
            <headSector />
        </div>
        <!-- 全局组件：导航 -->
        <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
            <menuSector />
        </div>
        <div 
            id="content" 
            class="canvasBox"
        >
            <grid-layout 
                :auto-size="true"
                :class="this.$store.state.template.pageData.class.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
                ref="gridlayout" 
                :layout="this.$store.state.template.pageData.class"
                :layout.sync="this.$store.state.template.pageData.class" 
                :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.class" 
                    :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>
                        <!-- 1.广告通栏 -->
                        <div v-if="item.type == 'adSector'" class="moduleBox">
                            <adSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        <!-- 2.频道菜单 -->
                        <div v-if="item.type == 'channelMenu'" class="moduleBox">
                            <channelMenu :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        <!-- 3.滚动图文组合 -->
                        <div v-if="item.type == 'scrollTextSector'" class="moduleBox">
                            <scrollTextSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        <!-- 4.新闻多图组合1 -->
                        <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
                            <manyPictureSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        <!-- 5.新闻多图组合2 -->
                        <div v-if="item.type == 'commentSector'" class="moduleBox">
                            <commentSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                        <!-- 6.新闻多图组合3 -->
                        <div v-if="item.type == 'listSector'" class="moduleBox">
                            <listSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
                        </div>
                    </div>
                </grid-item>
            </grid-layout>
        </div>

        <!-- 全局组件：页尾 -->
        <div class="FixedModuleBoxBottom">
            <footerSector />
        </div>
    </div>
</template>

<script>
//页面公用组件 start------------------------------------------------------------>
//引入公用样式
import '@/styles/global.less';
import { GridLayout, GridItem } from "vue-grid-layout";
//1.页面公用组件 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';
//新闻图文组合1
import manyPictureSector from '../style/sector/body/index/list/1200x470/1.vue';
//新闻图文组合2
import commentSector from '../style/sector/body/index/list/1200x470/2.vue';
//新闻图文组合3
import listSector from '../style/sector/body/index/list/1200x980/1.vue';
//频道菜单
import channelMenu from '../style/sector/body/class/menu/1200x100/1.vue';
//滚动图文组合
import scrollTextSector from '../style/sector/body/class/banner/1200x410/1.vue';
//2.引入自助建站组件 end------------------------------------------------------------>

export default {
    components: {
        GridLayout,//画布
        GridItem,//画布组件
        headSector,//全局页头
        menuSector,//全局导航
        adSector,//通栏广告
        manyPictureSector,//新闻图文组合1
        commentSector,//新闻图文组合2
        listSector,//新闻图文组合3
        channelMenu,//频道菜单
        scrollTextSector,//滚动图文组合
        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:10px;
        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;
            border: 2px dashed #999;
            border-radius: 8px;
            background-color: #fff1cc;
            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;
}

//占位元素颜色
::v-deep .vue-grid-placeholder {
  background: #ccc !important;
  opacity: 0.3;
}

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