构建json数据

构建json数据

src/layout/components/template/pages/index/sector.vue

@@ -12,7 +12,7 @@
       </div>
       <div class="sectorItemTitle">网站导航</div>
     </div> -->
-    <div class="sectorItemBox" @click="addIndexModule('imgTitleSector',6)">
+    <div class="sectorItemBox" @click="addIndexModule('imgTitleSector',6,imgTitleSector)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/imgTitleSector.png" />
       </div>
@@ -20,25 +20,25 @@
     </div>
     <div class="sectorItemBox">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/bannerSector.png" @click="addIndexModule('bannerSector',34)"/>
+        <img src="@/assets/template/sector/bannerSector.png" @click="addIndexModule('bannerSector',34,bannerSector)"/>
       </div>
       <div class="sectorItemTitle">焦点图</div>
     </div>
     <div class="sectorItemBox">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/moreServicesSector.png" @click="addIndexModule('manyPictureSector',41)"/>
+        <img src="@/assets/template/sector/moreServicesSector.png" @click="addIndexModule('manyPictureSector',41,manyPictureSector)"/>
       </div>
       <div class="sectorItemTitle">多图菜单</div>
     </div>
     <div class="sectorItemBox">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/commentSector.png" @click="addIndexModule('commentSector',40)"/>
+        <img src="@/assets/template/sector/commentSector.png" @click="addIndexModule('commentSector',40,commentSector)"/>
       </div>
       <div class="sectorItemTitle">文章列表带评论</div>
     </div>
     <div class="sectorItemBox">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/newsSector.png" @click="addIndexModule('listSector',28)"/>
+        <img src="@/assets/template/sector/newsSector.png" @click="addIndexModule('listSector',28,listSector)"/>
       </div>
       <div class="sectorItemTitle">文章列表</div>
     </div>
@@ -92,7 +92,7 @@ export default {
         sectorName:"bannerSector",//板块名称
         componentList:[
           {
-            component_type:1,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字
+            component_type:1,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
             component_name:"mainTitle",//组件名称
             sort:1,//组件排序
             componentData:{//该组件请求的数据
@@ -157,11 +157,154 @@ export default {
             sort:2,
             componentData:{}
           },
+          {
+            component_type:1,
+            component_name:"tabsNews",
+            sort:3,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:3,
+              listType:[
+                "title",//标题
+                "created_time",//创建时间
+              ]
+            }
+          },
+          {
+            component_type:1,
+            component_name:"tabsNews",
+            sort:4,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:3,
+              listType:[
+                "title",//标题
+                "created_time",//创建时间
+              ]
+            }
+          },
         ]
       },
       //添加多图板块 end---------------------------------------->
 
+      //文章列表带评论板块 end---------------------------------------->
+      commentSector:{
+        sectorName:"commentSector",//板块名称
+        componentList:[
+          {
+            component_type:7, //纯文本
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
+          {
+            component_type:1,
+            component_name:"tabsCalendarNews",
+            sort:2,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:6,
+              listType:[
+                "title",
+                "created_time",
+                "introduce"
+              ]
+            }
+          },
+          {
+            component_type:8,
+            component_name:"calendar", //评论组件无需提交数据
+            sort:3,
+            componentData:{}
+          },
+        ]
+      },
+      //文章列表带评论板块 end---------------------------------------->
 
+      //文章列表板块 start---------------------------------------->
+      listSector:{
+        sectorName:"listSector",//板块名称
+        componentList:[
+          {
+            component_type:7, //纯文本
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
+          {
+            component_type:1,
+            component_name:"listNews",
+            sort:2,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:5,
+              listType:[
+                "title",
+                "created_time"
+              ]
+            }
+          },
+          {
+            component_type:1,
+            component_name:"listNews",
+            sort:3,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:5,
+              listType:[
+                "title",
+                "created_time"
+              ]
+            }
+          },
+        ]
+      },
+      //文章列表板块 end---------------------------------------->
+
+      //纯图片组合 start---------------------------------------->
+      onlyImgSector:{
+        sectorName:"onlyImgSector",//板块名称
+        componentList:[
+          {
+            component_type:1,
+            component_name:"",
+            sort:1,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:7,
+              listType:[
+                "title",
+                "imgUrl"
+              ]
+            }
+          }
+        ]
+      },
+      //纯图片组合 end---------------------------------------->
+
+      //友情链接板块 start---------------------------------------->
+      friendShipLinkSector:{
+        sectorName:"friendShipLinkSector",//友情链接无需提交数据
+        componentList:[
+          {
+            component_type:4,
+            component_name:"",
+            sort:1,
+            componentData:{}
+          }
+        ]
+      }
+      //友情链接板块 end---------------------------------------->
 
     }
   },

src/store/modules/template.js

@@ -23,8 +23,6 @@ const state = {
     aloneList:[],//自定义列表页
     aloneArticle:[],//自定义详情页
   },
-  editWindowStatus:false,//编辑弹出框是否显示
-  editWindowTitle:"",//编辑弹出框标题
   // layout: [
   //   // i = id 
   //   // w = 最大宽度是12
@@ -45,6 +43,13 @@ const state = {
   //2.站点数据 end------------------------------------------------------------>
 
   //3.网站数据 start------------------------------------------------------------>
+  editWindowStatus:false,//编辑弹出框是否显示
+  editWindowTitle:"",//编辑弹出框标题
+  editSectorId:0,//当前正在编辑的板块id
+  editComponentSort:0,//当前正在编辑的组件id
+  editComponentType:0,//当前正在编辑的组件类型
+  editComponentSize:0,//当前组件展示的条数
+
   webSiteData:{
     //1.base网站基本信息
     base:{
@@ -55,40 +60,16 @@ const state = {
       styleId:1,//风格id
     },
     //3.板块信息 header,menu,footer 是页面自带的无需构建
-    template:[  
+    template:{  
-      { //index = 首页 class=分类页 list=列表页 article=详情页 search=搜索页 aloneList=自定义列表页 aloneArticle=自定义详情页
+      //index = 首页 class=分类页 list=列表页 article=详情页 search=搜索页 aloneList=自定义列表页 aloneArticle=自定义详情页
-        index:[{
+      index:[],
-          sectorName:"bannerName",//板块名称
+      class:[],//分类页
-          sectorId:1,//板块id
+      list:[],//列表页
-          sort:1,//板块排序
+      article:[],//详情页
-          componentList:[
+      search:[],//搜索页
-            {
+      aloneList:[],//自定义列表页
-              component_type:1,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件
+      aloneArticle:[],//自定义详情页
-              component_name:"componentName",//组件名称
+    }
-              sort:1,//组件排序
-              componentData:{//该组件请求的数据
-                category_id:[[5,11],[6,24,45]],//请求的导航id 如果上面的component_type是1，这里只会有1个[[1]],如果是2，这里就会有多个
-                page:1,//请求第几页
-                pageSize:1,//请求的条数
-                listType:[//请求的数据应该包含哪些字段
-                  "title",//标题
-                  "created_time",//创建时间
-                  "author",//作者
-                  "imgUrl",//缩略图片
-                  "introduce",//描述
-                ]
-              }
-            }
-          ]
-        }],
-        class:[],//分类页
-        list:[],//列表页
-        article:[],//详情页
-        search:[],//搜索页
-        aloneList:[],//自定义列表页
-        aloneArticle:[],//自定义详情页
-      }
-    ]
   }
   //3.网站数据 end------------------------------------------------------------>
 }
@@ -111,14 +92,21 @@ const mutations = {
     state.pageStatus = num;
   },
   //打开编辑弹出框
-  setEditWindowStatus(state,title){
+  setEditWindowStatus(state,data){
+    console.log(data);
     state.editWindowStatus = true;
-    state.editWindowTitle = title;
+    state.editSectorId = data.id;
+    state.editComponentSort = data.sort;
+    state.editComponentType = data.type;
+    state.editComponentSize = data.size;
   },
   //关闭编辑弹出框
   closeEditWindowStatus(state){
     state.editWindowStatus = false;
-    state.editWindowTitle = "";
+    state.editSectorId = "";
+    state.editComponentSort = "";
+    state.editComponentType = "";
+    state.editComponentSize = "";
   },
   //0.全局配置 start------------------------------------------------------------>
   //1.配置模块 start------------------------------------------------------------>
@@ -130,8 +118,10 @@ const mutations = {
       return;
     }else{
       //data.type 组件名称 data.h 模块高度 
-      // 计算当前布局的最大 y 值
+      //计算当前布局的最大 y 值
       const maxY = Math.max(...state.pageData.index.map(item => item.y), 0);
+      //添加板块id
+      
       state.pageData.index.push({
         i: state.pageData.index.length, 
         x: 0, 
@@ -139,16 +129,14 @@ const mutations = {
         w: 12, 
         h: data.h, 
         type: data.type,
-        content:""
+        content:"123",
+        sectorData:data.jsonData
       });
-      console.log(state.pageData.index);
+      console.log(state.pageData.index.length);
-    }
+      data.jsonData.sectorId = state.pageData.index.length;
+      console.log(data.jsonData);
 
-    //添加板块数据到webSiteData.template.index
+    }
-    //state.webSiteData.template.index.push()
-    console.log(data);
-
-    
   },
   //删除首页板块
   deleteIndexModule(state,data){
@@ -280,7 +268,30 @@ const mutations = {
       
   //   }
   // },
+  //格式化模板信息
+  formatTemplateInfo(state, data) {
+    //console.log(data.type);
+    //按照data.data.y的大小排序
+    data.data.sort((a, b) => a.y - b.y);
+    //获取板块的sort
+    for (let index in data.data) {
+      console.log(data.data[index].sectorData);
+      data.data[index].sectorData.sort = Number(index)+1;
+      if(data.type=="index"){
+        state.webSiteData.template.index.push(data.data[index].sectorData)
+      }
+    }
+  },
+  //保存模板
+  saveTemplate(state) {
+    //调用mutations中的方法无需使用$store
+    //格式化index的信息
+    this.commit('template/formatTemplateInfo',{data:state.pageData.index,type:"index"});
+    
+    console.log(state.webSiteData);
+  },
   //1.配置模块 end------------------------------------------------------------>
+
   //2.获取站点信息 start------------------------------------------------------------>
   //获取站点详情
   setWebsiteInfo(state,data){

src/views/chat/contacts.vue

@@ -215,8 +215,8 @@
         <div>
           <el-form :model="form" ref="form" autocomplete="off" label-position="left">
             <div class="formDiv">
-              <el-form-item label="备注" :label-width="formLabelWidth" class="custom-align-right">
+              <el-form-item label="验证消息：" :label-width="formLabelWidth" class="custom-align-right">
-                <el-input v-model="addform.remark" autocomplete="off"  placeholder="请输入备注.."></el-input>
+                <el-input v-model="addform.remark" autocomplete="off"  placeholder="我是.."></el-input>
               </el-form-item>
             </div> 
           </el-form>

src/views/chat/hall.vue

@@ -670,7 +670,7 @@
                   <div class="fileWindowMessageItem">
                     <div class="fileWindowMessageItemInfo">
                       <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
-                      <div class="fileWindowMessageItemTime">{{item.updated_at}}</div>
+                      <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
                     </div>
                     <div class="fileWindowMessageItemText">{{item.content}}</div>
                   </div>
@@ -685,7 +685,7 @@
                   <div class="fileWindowMessageItem">
                     <div class="fileWindowMessageItemInfo">
                       <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
-                      <div class="fileWindowMessageItemTime">{{item.updated_at}}</div>
+                      <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
                     </div>
                     <div class="fileWindowMessageItemText">
                       <img :src="item.content" class="fileWindowMessageItemImage">
@@ -702,7 +702,7 @@
                   <div class="fileWindowMessageItem">
                     <div class="fileWindowMessageItemInfo">
                       <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
-                      <div class="fileWindowMessageItemTime">{{item.updated_at}}</div>
+                      <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
                     </div>
                     <div class="fileWindowMessageItemText">
                       <div class="messageTypeFile">

src/views/role/components/userDefault.vue

@@ -118,7 +118,7 @@
           <el-form-item label="手机号：" :label-width="formLabelWidth" prop="mobile" class="custom-align-right">
             <el-input v-model="form.mobile" autocomplete="off" placeholder="请输入手机号.."></el-input>
           </el-form-item>
-          <el-form-item label="有效期：" :label-width="formLabelWidth" prop="timeList" class="custom-align-right">
+          <el-form-item label="有效期：" :label-width="formLabelWidth" prop="timeList" class="custom-align-right" v-if="form.long_time==false">
             <el-date-picker
               v-model="timeList"
               type="daterange"
@@ -130,6 +130,19 @@
             </el-date-picker>
             <el-checkbox v-model="form.long_time" :true-label="1" :false-label="0" class="longTimeCheckbox">无限期</el-checkbox>
           </el-form-item>
+          <div class="timeBox" v-else>
+            <div class="timeTitle"><span>*</span>有效期：</div>
+            <el-date-picker
+              v-model="timeList"
+              type="daterange"
+              :disabled="form.long_time === 1"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :picker-options="pickerOptions">
+            </el-date-picker>
+            <el-checkbox v-model="form.long_time" :true-label="1" :false-label="0" class="longTimeCheckbox">无限期</el-checkbox>
+          </div>
           <el-form-item label="籍贯：" :label-width="formLabelWidth" prop="" class="custom-align-right">
             <CityCascader v-model="form.native_place_arr_id" @update-city-id="update_native_place_arr_id"></CityCascader>
           </el-form-item>
@@ -264,8 +277,8 @@ export default {
         birthday:"",//出生年月
         gender:"1",//性别
         mobile:"",//手机号
-        native_place_arr_id:"",//籍贯
+        native_place_arr_id:[],//籍贯
-        address_arr_id:"",//详细地址
+        address_arr_id:[],//详细地址
         address:"",//详细地址
         from_time:"",//有效期开始时间
         to_time:"",//有效期结束时间
@@ -274,6 +287,7 @@ export default {
         email:"",//电子邮箱
         other:[],//相关资料
         remark:"",//提示词
+        zip_code:"",//邮编
       },
       timeList:[],//时间段
       otherList:[],//相关资料列表
@@ -676,6 +690,26 @@ export default {
   .longTimeCheckbox {
     margin-left: 10px;
   }
+  .timeBox {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 22px;
+    .timeTitle {
+      width: 110px;
+      text-align: right;
+      font-size: 14px;
+      color: #606266;
+      font-weight: bold;
+      height: 36px;
+      line-height: 36px;
+      margin-right: 10px;
+      span {
+        color: red;
+        margin-right: 5px;
+      }
+    }
+  }
   //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
   ::v-deep .custom-form-item > .el-form-item__label {
     line-height: 140px !important;
@@ -690,4 +724,4 @@ export default {
     width: 100%; /* 禁止用户拖拽调整大小 */
   }
   //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
-</style>
+</style>

src/views/template/page/pageIndex.vue

@@ -29,31 +29,31 @@
           </div> -->
           <!-- 图片标题模块 --> 
           <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
-            <imgTitleSector />
+            <imgTitleSector :id="item.i"/>
           </div>
           <!-- 焦点图模块 --> 
           <div v-if="item.type == 'bannerSector'" class="moduleBox">
-            <bannerSector />
+            <bannerSector :id="item.i"/>
           </div>
           <!-- 多图模块 --> 
           <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
-            <manyPictureSector />
+            <manyPictureSector :id="item.i"/>
           </div>
           <!-- 评论模块 --> 
           <div v-if="item.type == 'commentSector'" class="moduleBox">
-            <commentSector />
+            <commentSector :id="item.i"/>
           </div>
           <!-- 双联文章列表模块 --> 
           <div v-if="item.type == 'listSector'" class="moduleBox">
-            <listSector />
+            <listSector :id="item.i"/>
           </div>
           <!-- 纯图片组合模块 --> 
           <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
-            <onlyImgSector />
+            <onlyImgSector :id="item.i"/>
           </div>
           <!-- 友情链接模块 --> 
           <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
-            <friendShipLinkSector />
+            <friendShipLinkSector :id="item.i"/>
           </div>
           <!-- 页尾板块 --> 
           <!-- <div v-if="item.type == 'footerSector'" class="moduleBox">

src/views/template/public/editBtn.vue

@@ -7,10 +7,22 @@
 <script>
 export default {
   props: {
-    belongSectorId: {
+    id: {
-      type: Number,
+      type:Number,
-      default: 0
+      default:0
     },
+    sort:{
+      type:Number,
+      default:0
+    },
+    type:{//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
+      type:Number,
+      default:0
+    },
+    size:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -19,7 +31,14 @@ export default {
   },
   methods: {
     openEditWindow(){
-      this.$store.commit('template/setEditWindowStatus');
+      let data = {
+        id:this.id,
+        sort:this.sort,
+        type:this.type,
+        size:this.size
+      }
+      console.log(data);
+      this.$store.commit('template/setEditWindowStatus',data);
     }
   },
   mounted() {

src/views/template/public/editWindow.vue

@@ -1,29 +1,39 @@
 <template>
   <div class="editWindowBox">
     <div class="editWindowBoxContent">
-      <!--普通新闻类型-->
       <div>
+        板块id:{{this.$store.state.template.editSectorId}} 组件sort:{{this.$store.state.template.editComponentSort}} 组件type:{{this.$store.state.template.editComponentType}} 展示条数:{{this.$store.state.template.editComponentSize}}
+      </div>
+      <!--普通新闻类型-->
+      <div v-if="this.$store.state.template.editComponentType == 1">
         <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
           <el-form-item label="网站导航：" :label-width="formLabelWidth" class="custom-align-right">
             <el-cascader :key="oneParentKey" v-model="form.pid_arr" placeholder="请选择网站导航" :props="oneParentData" filterable clearable></el-cascader>
           </el-form-item>
           <el-form-item label="显示条数：" :label-width="formLabelWidth" class="custom-align-right">
-            <el-input v-model="form.pageSize" placeholder="请输入请求的条数" disabled/>
+            <el-input v-model="this.$store.state.template.editComponentSize" placeholder="请输入请求的条数" disabled/>
           </el-form-item>
         </el-form>
       </div>
-
       <!--tabs类型-->
-      <!-- <div>
+      <div v-if="this.$store.state.template.editComponentType == 2">
         <el-form :model="form.type2data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
           <el-form-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
             <el-cascader :key="moreParentKey" v-model="form.type2data.pid_arr" placeholder="请选择网站导航" :props="moreParentData" filterable clearable></el-cascader>
           </el-form-item>
           <el-form-item label="显示条数：" :label-width="formLabelWidth" class="custom-align-right">
-            <el-input v-model="form.type2data.pageSize" placeholder="请输入请求的条数" disabled/>
+            <el-input v-model="this.$store.state.template.editComponentSize" placeholder="请输入请求的条数" disabled/>
           </el-form-item>
         </el-form>
-      </div> -->
+      </div>
+      <!--广告-->
+      <div v-if="this.$store.state.template.editComponentType == 3">
+        <el-form :model="form.type3data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="广告位名称：" :label-width="formLabelWidth" prop="adsName" class="custom-align-right">
+            <el-input v-model="form.type3data.adsName" placeholder="请输入广告位名称" disabled/>
+          </el-form-item>
+        </el-form>
+      </div>
       
 
     </div>
@@ -37,10 +47,7 @@
 <script>
 export default {
   props: {
-    editType:{
+
-      type:String,
-      default:""
-    },
   },
   data() {
     let self = this;
@@ -52,21 +59,35 @@ export default {
         callback()
       }
     }
+    const validateEmpty = (rule,value,callback) => {
+      if (!value || value.trim() === "") {
+        callback(new Error('请填写广告位名称！'));
+      } else {
+        callback();
+      }
+    }
     return {
       formLabelWidth:"120px",
-      //新闻类型
+      
       form:{
+        //单导航新闻
         type1data:{
           pid_arr:[],
           pageSize:""
         },
+        //tabs多导航新闻
         type2data:{
           pid_arr:[],
           pageSize:""
+        },
+        //广告
+        type3data:{
+          adName:""
         }
       },
       formRules:{
         pid_arr: [{type:'array',required:true,trigger:'blur',message:'必须选择一个导航！',validator:validatePid}],
+        adsName: [{required:true,trigger:'blur',message:'请填写广告位名称！',validator:validateEmpty}],
       },
       //获取单个导航id start---------------------------------------->
       oneParentKey:0,

src/views/template/style/1/bannerSector.vue

@@ -1,16 +1,17 @@
 <template>
   <div class="bannerBox">
     <div class="itemTopBox">
-      <mainTitle />
+      <editBtn :id="id" :sort="1" :type="1" :size="1"/>
+      <mainTitle :id="id" :sort="1"/>
     </div>
     <div class="itemBottomBox">
       <div class="bannerLayerBox">
-        <editBtn />
+        <!-- <editBtn :id="id" :sort="2"/> -->
-        <banner />
+        <banner :id="id" :sort="2"/>
       </div>
       <div class="NewsListBox">
-        <editBtn />
+        <!-- <editBtn :id="id" :sort="3"/> -->
-        <tabsNews />
+        <tabsNews :id="id" :sort="3"/>
       </div>
     </div>
   </div>
@@ -30,7 +31,10 @@ export default {
     editBtn
   },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -41,6 +45,7 @@ export default {
     
   },
   mounted() {
+    
   },
 };
 </script>

src/views/template/style/1/components/mainTitle.vue

@@ -1,22 +1,16 @@
 <template>
   <div class="mainTitleBox">
-    <editBtn />
     <img src="@/assets/template/component/newsIcon.png" />
     <div class="mainTitleText">习近平在中华全国供销合作社成立70周年</div>
   </div>
 </template>
 
 <script>
-import editBtn from '../../../public/editBtn.vue';
-
 export default {
-  components: {
-    editBtn
-  },
   props: {
-    name:{
+    id:{
-      type:String,
+      type:Number,
-      default:''
+      default:0
     },
     sort:{
       type:Number,
@@ -25,7 +19,7 @@ export default {
   },
   data() {
     return {
-      componentId:1
+      
     };
   },
   methods: {
@@ -43,7 +37,6 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    position: relative;
     img {
       width: 54px;
       height: 54px;

src/views/template/templateCreat.vue

@@ -7,7 +7,7 @@
       </div>
       <div class="topMenuRightBox">
         <img src="@/assets/template/preview.png" class="previewImg"/>
-        <el-button type="primary" @click="gotoList">保存</el-button>
+        <el-button type="primary" @click="saveTemplate">保存</el-button>
         <el-button type="info" @click="goStyle">上一步</el-button>
       </div>
     </div>
@@ -89,6 +89,10 @@ export default {
         path: '/templateList'
       });
     },
+    //保存模板
+    saveTemplate(){
+      this.$store.commit('template/saveTemplate');
+    },
     //打开弹出框
     openWindow(item) {
       this.editModule = item.i;