admin_home/src/views/website/creatWebsite.vue

<template>
  <div class="mainBox">
    <div class="layerBox">
      <tableTitle :name="headerTitle"/>
      <div class="menuTopBox">
        <div class="menuItem" @click="addModule(1)">
          <img src="@/assets/public/sidebar/default/index.png">
          顶部菜单（含登录）
        </div>
        <div class="menuItem" @click="addModule(2)">
          <img src="@/assets/public/sidebar/default/index.png">
          Logo栏
        </div>
        <div class="menuItem" @click="addModule(3)">
          <img src="@/assets/public/sidebar/default/index.png">
          导航菜单
        </div>
        <div class="menuItem" @click="addModule(4)">
          <img src="@/assets/public/sidebar/default/index.png">
          轮播图
        </div>
        <div class="menuItem" @click="addModule(5)">
          <img src="@/assets/public/sidebar/default/index.png">
          多分类列表
        </div>
        <div class="menuItem" @click="addModule(6)">
          <img src="@/assets/public/sidebar/default/index.png">
          多图列表
        </div>
        <div class="menuItem" @click="addModule(7)">
          <img src="@/assets/public/sidebar/default/index.png">
          纯文本列表
        </div>
        <div class="menuItem" @click="addModule(8)">
          <img src="@/assets/public/sidebar/default/index.png">
          图文列表
        </div>
        <div class="menuItem" @click="addModule(9)">
          <img src="@/assets/public/sidebar/default/index.png">
          排行榜列表
        </div>
        <div class="menuItem" @click="addModule(10)">
          <img src="@/assets/public/sidebar/default/index.png">
          友情链接
        </div>
        <div class="menuItem" @click="addModule(11)">
          <img src="@/assets/public/sidebar/default/index.png">
          纯文本
        </div>
      </div>
    </div>
    <div class="layerBox">
      <tableTitle :name="websiteTitle"/>
      <!-- 栅格布局 start ---------------------------------------->
      <div class="grid-layout-demo">
        <grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true">
          <grid-item
            v-for="(item, index) in layout"
            :key="item.i"
            :i="item.i"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
          >
            <div class="grid-item-content">
              <!-- 模块内容 --> 
              <div v-if="item.type == 1">
                111
              </div>



              {{ item.content }}
              <button @click="openWindow(item)">编辑</button>
            </div>
          </grid-item>
        </grid-layout>
      </div>
      <!-- 栅格布局 end ---------------------------------------->
    </div>

    <!--弹出框 start------------------------------------------------------------>
    <el-dialog title="编辑模块" :visible.sync="windowStatus">
      <el-form :model="form" ref="form" autocomplete="off" label-position="left">
        <div class="formDiv">
          <el-form-item label="内容" :label-width="formLabelWidth" prop="alias" class="custom-align-right">
            <el-input v-model="form.content" autocomplete="off"></el-input>
            <input type="hidden" v-model="form.seo_title">
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div>
          <el-button @click="closeWindow">取 消</el-button>
          <el-button type="primary" @click="editGridItem">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!--弹出框 end------------------------------------------------------------>

  </div>
</template>

<script>
//引入公用样式
import '@/styles/global.less';
//引入vue-grid-layout
import { GridLayout, GridItem } from 'vue-grid-layout';
//标题
import tableTitle from './components/tableTitle';

export default {
  components: {
    GridLayout,
    GridItem,
    tableTitle
  },
  data() {
    return {
      //页面 start------------------------------------------------------------>
      headerTitle: '模块',
      websiteTitle: '预览',
      windowStatus: false,
      //页面 end------------------------------------------------------------>

      //弹出框 start------------------------------------------------------------>
      formLabelWidth: '120px',
      editModule: "",//待编辑的模块
      form: {
        content: '',
      },
      //弹出框 end------------------------------------------------------------>

      //预览 start------------------------------------------------------------>
      layout: [
        // i = id 
        // w = 最大宽度是12
        // { i: "0", x: 0, y: 0, w: 12, h: 2, content:""},
        // { i: "1", x: 0, y: 0, w: 12, h: 2, content:""},
        // { i: "2", x: 3, y: 0, w: 3, h: 2, content:""},
        // { i: "3", x: 6, y: 0, w: 3, h: 2, content:""}
      ]
      //预览 end------------------------------------------------------------>
    }
  },
  methods: {
    //添加模块
    addModule(type) {
      console.log(type);
      this.layout.push({
         i: this.layout.length, 
         x: 0, 
         y: 0, 
         w: 12, 
         h: 1, 
         type: type, //1=顶部菜单（含登录） ..
         content:""});
    },





    //打开弹出框
    openWindow(item) {
      this.editModule = item.i;
      this.windowStatus = true;
    },

    //编辑栅格布局
    editGridItem() {
      console.log(this.editModule);
      //找对在栅栏中对应的窗口，把编辑的值放进去
      for(let i = 0; i < this.layout.length; i++) {
        if(this.layout[i].i == this.editModule) {
          this.layout[i].content = this.form.content;
        }
      }
      //关闭窗口
      this.windowStatus = false;
    },

    //关闭弹出框
    closeWindow() {
      this.windowStatus = false;
    }

  },
  mounted(){
    const id = this.$route.query.id;
    console.log('Retrieved ID from route:', id);
  }
}
</script>

<style scoped lang="less">


  //菜单 start------------------------------------------------------------> 
  .layerBox {
    padding-bottom: 10px;
  }
  .menuTopBox{
    display: flex;
    flex-wrap: wrap;
  }
  .menuItem{
    display: flex;
    align-items: center;
    border-radius:10px;
    padding: 5px 10px;
    cursor: pointer;
    background: #f0f2f5;
    font-size: 14px;
    color: #666;
    margin-right: 10px;
    margin-bottom: 10px;
    img {
      margin-right: 5px;
    }
  }

  //栅格布局 start------------------------------------------------------------> 
  .grid-layout-demo {
    background-color: #f0f2f5;
    padding: 20px;
  }
  .grid-item-content {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    height: 100%;
  }
  //栅格布局 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穿透scope选择器 end------------------------------------------------------------>*/
</style>