admin_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">
          <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>
    <!-- 顶部菜单 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"/>
      <pageList v-if="this.$store.state.template.pageStatus == 3"/>
      <pageArticle v-if="this.$store.state.template.pageStatus == 4"/>
    </div>
    <!-- 画布 end ---------------------------------------->

    <!-- 弹出框 start ---------------------------------------->
    <!-- 这里我去掉了:visible.sync 因为弹出框的关闭事件需要手动触发 -->
    <el-dialog title="编辑组件信息" :visible="this.$store.state.template.editWindowStatus" :close-on-click-modal="false" @close="closeEditWindow" @open="addWindowKey">
      <editWindow />
    </el-dialog>
    <el-dialog title="更换组件样式" :visible="this.$store.state.template.editComponentWindowStatus" :close-on-click-modal="false" @close="closeComponentStyleWindow">
      <componentWindow />
    </el-dialog>
    <el-dialog title="模板检查" :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> -->
      <checkWindow />
    </el-dialog>
    <!-- 弹出框 start ---------------------------------------->
  </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 pageList from './page/pageList.vue';
import pageArticle from './page/pageArticle.vue';
//页面组件 end------------------------------------------------------------>

export default {
  components: {
    //引入页面组件
    pageIndex,
    pageList,
    pageArticle,
    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,
            step:this.$route.query.step
          }
        }); 
      })
    },
    //保存模板
    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');
    },
    //增加级联选择器key
    addWindowKey(){
      this.$store.commit('template/addWindowKey');
    },
    //设置预览状态
    setPreviewStatus(){
      this.$store.commit('template/setPreviewStatus');
    },
    //随机生成模板
    randomTemplate(){
      this.$store.commit('template/randomTemplate');
    },
    //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/getSiteCategory',{website_id:this.websiteId});
    //4.获取网站详情
    this.$store.dispatch('template/getAdminSiteInfo',{website_id:this.websiteId});
    //5.获取网站底部信息
    this.$store.dispatch('template/getAdminWebsiteFootAll',{website_id:this.websiteId});
  }
}
</script>

<style scoped lang="less">
  //顶部菜单
  .topMenuBox {
    padding: 20px 30px 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    .topMenuRightBox {
      display: flex;
      align-items: center;
      cursor: pointer;
      .previewImg {
        margin-right: 20px;
      }
    }
  }
  //拖拽布局容器
  .websiteBox {
    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: -1px;
      .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------------------------------------------------------------> 
  // .layerTabsBox {
  //   margin: 30px;
  //   border-radius: 20px;
  //   background: #fff;
  //   border: 1px solid #d3d3d3;
  //   -webkit-box-sizing: border-box;
  //   box-sizing: border-box;
  //   display: flex;
  //   align-items: center;
  //   justify-content: space-between;
  //   overflow: hidden;
  //   .layerTabsItem {
  //     width: 33.33%; /* 每个占3分之一的空间 */
  //     padding: 10px 20px;
  //     cursor: pointer;
  //     text-align: center;
  //     font-size: 14px;
  //     border-right: 1px solid #d3d3d3;
  //     background: #fff;
  //   }
  //   .active {
  //     background: #5570F1;
  //     color: #fff;
  //   }
  // }
  // .layerBox {
  //   padding-bottom: 10px;
  // }
  //菜单 end------------------------------------------------------------> 

  //模块 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------------------------------------------------------------>*/
</style>