zx_home/src/views/template/templateCreat.vue

<template>
    <div class="mainBox" v-loading="this.$store.state.template.loading==true" element-loading-text="请稍等">
        <!-- 顶部菜单 start ---------------------------------------->
        <div class="topMenuBox">
            <div>
                <el-button icon="el-icon-refresh" type="primary" @click="randomTemplate('page')">
                    <!--首页-->
                    <span v-if="this.$store.state.template.pageStatus == 1">随机生成模板</span>
                    <!--频道页-->
                    <span v-if="this.$store.state.template.pageStatus == 2">随机生成模板</span>
                    <!--列表页-->
                    <span v-if="this.$store.state.template.pageStatus == 3">随机生成模板</span>
                    <!--详情页-->
                    <span v-if="this.$store.state.template.pageStatus == 4">随机生成模板</span>
                    <!--搜索页-->
                    <span v-if="this.$store.state.template.pageStatus == 5">随机生成模板</span>
                    <!--单页列表-->
                    <span v-if="this.$store.state.template.pageStatus == 6">随机生成模板</span>
                    <!--单页详情-->
                    <span v-if="this.$store.state.template.pageStatus == 7">随机生成模板</span>
                </el-button>
            </div>
            <div class="topMenuRightBox">
                <img src="@/assets/template/preview.png" class="previewImg" @click="setPreviewStatus" v-if="this.$store.state.template.previewStatus==false"/>
                <img src="@/assets/template/close.png" class="previewImg"  @click="setPreviewStatus" v-else/>
                <el-button type="primary" @click="saveTemplate">保存</el-button>
                <el-button type="info" @click="goStyle">上一步</el-button> 
            </div>
            <div class="componentPreview" v-if="this.$store.state.template.componentPreviewStatus==true">
                <div class="componentPreviewTitle"><span>通栏预览</span></div>
                <div class="componentPreviewImgBox">
                    <img :src="this.$store.state.template.componentPreviewImg" class="componentPreviewImg"/>
                </div>
            </div>
        </div>
        <!-- 顶部菜单 end ---------------------------------------->
        <!-- 画布 start ---------------------------------------->
        <div class="websiteBox">
            <div class="pageTabsBox">
                <div v-if="this.$store.state.template.showPage.index==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 1 ? 'active' : '']" @click="openPage(1)">首页</div>
                <div v-if="this.$store.state.template.showPage.class==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 2 ? 'active' : '']" @click="openPage(2)">频道页</div>
                <div v-if="this.$store.state.template.showPage.list==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 3 ? 'active' : '']" @click="openPage(3)">列表页</div>
                <div v-if="this.$store.state.template.showPage.article==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 4 ? 'active' : '']" @click="openPage(4)">详情页</div>
                <div v-if="this.$store.state.template.showPage.search==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 5 ? 'active' : '']" @click="openPage(5)">搜索页</div>
                <div v-if="this.$store.state.template.showPage.aloneList==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 6 ? 'active' : '']" @click="openPage(6)">单页（列表）</div>
                <div v-if="this.$store.state.template.showPage.aloneArticle==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 7 ? 'active' : '']" @click="openPage(7)">单页（详情）</div>
            </div>
            <pageIndex v-if="this.$store.state.template.pageStatus == 1"/>
            <pageClass v-if="this.$store.state.template.pageStatus == 2"/>
            <pageList v-if="this.$store.state.template.pageStatus == 3"/>
            <pageArticle v-if="this.$store.state.template.pageStatus == 4"/>
            <pageSearch v-if="this.$store.state.template.pageStatus == 5"/>
            <pageAboutList v-if="this.$store.state.template.pageStatus == 6"/>
            <pageAboutArticle v-if="this.$store.state.template.pageStatus == 7"/>
        </div>
        <!-- 画布 end ---------------------------------------->

        <!-- 弹出框 start ---------------------------------------->
        <!-- 这里我去掉了:visible.sync 因为弹出框的关闭事件需要手动触发 -->
        <el-dialog title="编辑组件信息" :visible="this.$store.state.template.editWindowStatus" :close-on-click-modal="false" @close="closeEditWindow" @open="updateWindowData">
            <editWindow />
        </el-dialog>
        <el-dialog title="更换组件样式" :visible="this.$store.state.template.editComponentWindowStatus" :close-on-click-modal="false" @close="closeComponentStyleWindow" @open="updateWindowData">
            <componentWindow />
        </el-dialog>
        <el-dialog title="模板检查" :visible="this.$store.state.template.editWebsiteTemplateJsonWindow" :close-on-click-modal="false" @close="closeEditWebsiteTemplateJsonWindow">
            <checkWindow />
        </el-dialog>
        <!-- 弹出框 start ---------------------------------------->

        <!-- AI 预览中 start ---------------------------------------->
        <div class="aiPreviewBox" v-if="this.$route.query.mode=='ai'">
            <div class="aiPreviewBoxTitle">
                <div class="aiPreviewBoxTitleText">AI预览中:</div>
                <div><span>您现在仍可以手动编辑模板</span></div>
                <div><span>若您确认无误，可以点击下</span></div>
                <div><span>方的保存按钮</span></div>
            </div>
            <div>
                <el-button type="primary" icon="el-icon-check" @click="saveTemplate">保存模板</el-button>
            </div>
            <div class="aiPreviewBoxReturnLink">
                <a href="/#/templateAI?website_id=109">返回会话，我仍需修改</a>
            </div>
        </div>
        <!-- AI 预览中 end ---------------------------------------->
    </div>
</template>

<script>
//页面公用组件 start------------------------------------------------------------>
import '@/styles/global.less';
import editWindow from './public/editWindow.vue';
import componentWindow from './public/componentWindow.vue';
import checkWindow from './public/checkWindow.vue';
//页面公用组件 end------------------------------------------------------------>

//页面组件 start------------------------------------------------------------>
import pageIndex from './page/pageIndex.vue';
import pageClass from './page/pageClass.vue';
import pageList from './page/pageList.vue';
import pageArticle from './page/pageArticle.vue';
import pageSearch from './page/pageSearch.vue';
import pageAboutList from './page/pageAboutList.vue';
import pageAboutArticle from './page/pageAboutArticle.vue';
//页面组件 end------------------------------------------------------------>

export default {
    components: {
        //引入页面组件
        pageIndex,
        pageClass,
        pageList,
        pageArticle,
        pageSearch,
        pageAboutList,
        pageAboutArticle,
        editWindow,
        componentWindow,
        checkWindow
    },
    data() {
        return {
            //0.全局配置 start------------------------------------------------------------>
            windowStatus: false,
            editPageStatus:1,//当前正在配置的页面 0 首页 1 分类页 2 列表页 3 详情页
            websiteId:0,//网站id
            style:0,//网站风格
            rowHeight:10,
            pageStatus:[],
            //0.全局配置 end------------------------------------------------------------>

            //1.编辑模块 start------------------------------------------------------------>
            formLabelWidth: '120px',
            //1.编辑模块 end------------------------------------------------------------>
        }
    },
    methods: {
        //0.全局操作 start ------------------------------------------------------------>
        //上一步  
        goStyle(){
            this.$confirm('返回上一步会导致当前页面数据丢失, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$router.push({
                    path: '/templateStyle',
                    query: {
                        website_id:this.$route.query.website_id
                    }
                }); 
            })
        },
        //保存模板
        saveTemplate(){
            this.$store.commit('template/saveTemplate');
        },
        //打开弹出框
        openWindow(item) {
            this.editModule = item.i;
            this.windowStatus = true;
        },
        //关闭弹出框
        closeWindow() {
            this.windowStatus = false;
        },
        //切换编辑的页面
        openPage(num){
            this.$store.commit('template/setPageStatus',num);
        },
        //关闭编辑弹出框
        closeEditWindow(){
            this.$store.commit('template/closeEditWindowStatus');
        },
        //关闭选择组件样式弹出框
        closeComponentStyleWindow(){
            this.$store.commit('template/closeComponentStyleStatus');
        },
        //关闭提交数据弹出框
        closeEditWebsiteTemplateJsonWindow(){
            this.$store.commit('template/closeEditWebsiteTemplateJsonWindow');
        },
        //更新编辑窗口中的数据
        updateWindowData(){
            //console.log("9999999")
            this.$store.commit('template/updateWindowData');
        },
        //设置预览状态
        setPreviewStatus(){
            this.$store.commit('template/setPreviewStatus');
        },
        //随机生成模板
        randomTemplate(type){
            // console.log(this.websiteId) //网站id
            // console.log(this.$route.query.style) //模板id
            // console.log(this.$store.state.template.pageStatus) //当前要编辑的页面
            if(type=='page'){
                let data = {
                    website_id:this.websiteId,
                    template_id:this.$route.query.style,
                    page:this.$store.state.template.pageStatus
                }
                this.$store.dispatch('template/randomWebTemplate',data).then(res=>{
                    if(res.code==200){
                        console.log(res)
                        //第一步：清理当前页面中画布的数据
                        this.$store.commit('template/clearWebsiteTemplatePage');
                        //第二步：把随机模板的数据填充到画布
                        this.$store.commit('template/setRandomTemplate',res.data);
                        //this.$store.commit('template/setWebsiteTemplate',res.data);
                    }else{
                        this.$message.error(res.message);
                    }
                })
            }else{
                console.log("开始随机全站模板！")
                let data = {
                    website_id:this.websiteId,
                    template_id:this.$route.query.style,
                }
                this.$store.dispatch('template/randomWebTemplate',data).then(res=>{
                    if(res.code==200){
                        //执行全站模板随机
                        this.$store.commit('template/setAllRandomTemplate',res.data);
                    }
                })
            }
        },
        //0.全局操作 end ------------------------------------------------------------>
    },
    mounted(){
        //1.设置网站id并且保存到vuex
        this.websiteId = this.$route.query.website_id;
        this.$store.commit('template/setEditWebsiteId',this.websiteId);
        //2.设置网站风格并且保存到vuex
        this.style = this.$route.query.style;
        this.$store.commit('template/setClassNumber',this.style);
        //3.获取网站导航池
        this.$store.dispatch('template/getWebCategoryList',{website_id:this.websiteId,pid:0,num:23,placeid:1,is_show:1});
        //4.获取网站详情
        this.$store.dispatch('template/getAdminSiteInfo',{website_id:this.websiteId});
        //5.获取网站底部信息
        this.$store.dispatch('template/getAdminWebsiteFootAll',{website_id:this.websiteId,is_diyweb:1}).then(res=>{
            //检测网站状态 0=未创建模板 1=已创建模板
            let webStatus = res.data.foot_info.status;
            if(res.code==200){
                //先判断用户是否处于AI预览模式
                if(this.$route.query.mode=='ai'){
                    let data = {
                        "session_id":this.$route.query.session_id
                    }
                    //查询模板草稿箱
                    this.$store.dispatch('template/getTemplateDraftboxList',data).then(res=>{
                        let canvasData = JSON.parse(res.data.canvas_data);
                        if(res.code==200){
                            this.$store.commit('template/setWebsiteTemplate',canvasData,"ai");
                        }else{
                            this.$message.error(res.message);
                        }
                    });
                }else{
                    //网站状态为1，已经创建了模板
                    this.$store.dispatch('template/getWebsiteTemplate',{website_id:this.websiteId}).then(res=>{
                        if(res.code==200){
                            //需要回显，把内容注入到画布
                            //console.log(res.data.canvas_data)
                            let canvasData = JSON.parse(res.data.canvas_data);
                            //把回显内容填入画布
                            //网站状态为1，创建过模板
                            if(webStatus==1){
                                this.$store.commit('template/setWebsiteTemplate',canvasData,"edit");
                            }
                            //判断是否使用了搜索页
                            if(res.data.page_type.includes(5)){
                                console.log("使用了搜索页")
                                this.$store.commit('template/setSearchPageStatus',true);
                            }else{
                                console.log("没有使用搜索页")
                                this.$store.commit('template/setSearchPageStatus',false);
                                this.$store.commit('template/clearSearchPageData');
                            }
                        }else{
                            this.$message.error(res.message);
                        }
                    });
                    //网站状态为0，没有创建过模板
                    if(webStatus==0){
                        this.randomTemplate('all');
                    }
                }
            }else{
                this.$message.error(res.message);
            }
        });
    }
}
</script>

<style scoped lang="less">
//顶部菜单
.topMenuBox {
    padding: 20px 30px 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    position: relative;
    .topMenuRightBox {
        display: flex;
        align-items: center;
        cursor: pointer;
        position: relative;
        .previewImg {
            margin-right: 20px;
        }
    }
    .componentPreview {
        position: fixed;
        width: 640px;
        height: 300px;
        z-index: 999;
        background: #fff;
        left: 220px;
        top: 100px;
        box-sizing: border-box;
        padding: 5px 20px 20px 20px;
        box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.25);
        .componentPreviewTitle {
            height: 40px;
            font-size: 16px;
            line-height: 40px;
            span {
                border-left: 3px solid #5570F1;
                padding-left: 10px;
            }
        }
        .componentPreviewImgBox {
            height: 235px;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
                max-width: 600px;
                max-height: 235px;
            }
        }
    }
}
//拖拽布局容器
.websiteBox {
    min-width: 1310px;
    margin: 60px 30px 30px 30px;
    background: #fff;
    border: 1px solid #E9EDF7;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    /*构建的页面类型*/
    .pageTabsBox {
        position: absolute;
        border-top:1px solid #E9EDF7;
        border-left:1px solid #E9EDF7;
        border-right:1px solid #E9EDF7;
        display: flex;
        align-items: center;
        top: -37px;
        left: 0;
        .pageTabsItem {
            padding: 10px 20px;
            background: #fff;
            font-size: 14px;
            color: #666;
            border-bottom:1px solid #E9EDF7;
            cursor: pointer;
            border-right:1px solid #E9EDF7;
        }
        .active {
            border-bottom:1px solid #fff;
            background: #fff;
            border-right:1px solid #E9EDF7;
        }
    }
}

//模块 start------------------------------------------------------------> 
.moduleBox {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    justify-content: space-between;
    box-sizing: border-box;
    border: 2px dashed #19499F;
}
//模块 end------------------------------------------------------------> 

//栅格布局 start------------------------------------------------------------> 
.grid-item-content {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    height: 100%;
    overflow: hidden;
}
.grid-layout {
    grid-gap: 0;
    row-gap: 0;
}
.vue-grid-placeholder {
    background-color: #f0f0f0 !important; /* 更改为你想要的颜色 */
    opacity: 0.8;
    border: 2px dashed #f0f0f0;
}
//栅格布局 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------------------------------------------------------------>*/

//AI悬浮窗 start------------------------------------------------------------> 
.aiPreviewBox {
    position: fixed;
    bottom: 20px;
    right: 0;
    background: #fff;
    padding: 0 20px 20px 20px;
    border-left: 3px solid #5570F1;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.25);
    .aiPreviewBoxTitle {
        font-size: 16px;
        color: #333;
        margin-bottom: 10px;
        color: #5570F1;
        .aiPreviewBoxTitleText {
            font-weight: bold;
            font-size: 16px;
            padding: 15px 0 10px 0;
        }
        span {
            color:#666;
            font-size: 14px;
        }
    }
    .aiPreviewBoxReturnLink {
        font-size: 14px;
        text-decoration: underline;
        color: #999;
        margin-top: 10px;
    }
}
//AI悬浮窗 end------------------------------------------------------------> 
</style>