构建json数据

构建json数据

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

@@ -16,7 +16,7 @@
       <div class="sectorItem">
         <img src="@/assets/template/sector/imgTitleSector.png" />
       </div>
-      <div class="sectorItemTitle">图片标题</div>
+      <div class="sectorItemTitle">通栏广告</div>
     </div>
     <div class="sectorItemBox">
       <div class="sectorItem">
@@ -73,14 +73,104 @@ export default {
   },
   data() {
     return {
-      
+      //添加通栏广告模块 start---------------------------------------->
+      imgTitleSector:{
+        sectorName:"imgTitleSector",//板块名称
+        componentList:[
+          {
+            component_type:3,
+            component_name:"",
+            sort:1,
+            componentList:[]//该组件不请求指定类型的数据，但是后端需要返回imgUrl
+          }
+        ]
+      },
+      //添加通栏广告模块 start---------------------------------------->
+
+      //添加banner模块 start---------------------------------------->
+      bannerSector:{
+        sectorName:"bannerSector",//板块名称
+        componentList:[
+          {
+            component_type:1,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字
+            component_name:"mainTitle",//组件名称
+            sort:1,//组件排序
+            componentData:{//该组件请求的数据
+              category_id:[],//请求的导航id 如果上面的component_type是1，这里只会有1个[[1]],如果是2，这里就会有多个[[1,3],[1,4,8]]
+              page:1,//请求第几页
+              pageSize:1,//请求的条数
+              listType:[//请求的数据应该包含哪些字段
+                "title",//标题
+                //"created_time",//创建时间
+                //"author",//作者
+                //"imgUrl",//缩略图片
+                //"introduce",//描述
+              ]
+            }
+          },
+          {
+            component_type:1,
+            component_name:"banner",
+            sort:2,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:3,
+              listType:[
+                "imgUrl"
+              ]
+            }
+          },
+          {
+            component_type:1,
+            component_name:"tabsNews",
+            sort:3,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:5,
+              listType:[
+                "imgUrl",
+                "created_time",
+              ]
+            }
+          },
+        ]
+      },
+      //添加banner模块 end---------------------------------------->
+
+      //添加多图板块 start---------------------------------------->
+      manyPictureSector:{
+        sectorName:"manyPictureSector",//板块名称
+        componentList:[
+          {
+            component_type:7, //纯文本
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
+          {
+            component_type:6, //静态组件无需传递数据
+            component_name:"fivePicture",
+            sort:2,
+            componentData:{}
+          },
+        ]
+      },
+      //添加多图板块 end---------------------------------------->
+
+
+
     }
   },
   methods: {
-    addIndexModule(type,h){
+    addIndexModule(type,h,jsonData){
       let data = {
         type: type,
-        h: h
+        h: h,
+        jsonData: jsonData
       }
       console.log(data);
       this.$store.commit('template/addIndexModule',data);

src/store/modules/template.js

@@ -143,6 +143,11 @@ const mutations = {
       });
       console.log(state.pageData.index);
     }
+
+    //添加板块数据到webSiteData.template.index
+    //state.webSiteData.template.index.push()
+    console.log(data);
+
     
   },
   //删除首页板块

src/views/template/public/editWindow.vue

@@ -1,29 +1,30 @@
 <template>
   <div class="editWindowBox">
     <div class="editWindowBoxContent">
-
       <!--普通新闻类型-->
       <div>
-        <el-form :model="form.type1data" 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="parentKey" v-model="form.type1data.pid_arr" placeholder="请选择网站导航" :props="parentData" filterable clearable></el-cascader>
+        <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.type1data.pageSize" placeholder="请输入请求的条数" disabled/>
+            <el-input v-model="form.pageSize" placeholder="请输入请求的条数" disabled/>
           </el-form-item>
         </el-form>
       </div>
+
       <!--tabs类型-->
       <!-- <div>
-        <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="parentKey" v-model="form.pid_arr" placeholder="请选择网站导航" :props="parentData" filterable clearable></el-cascader>
+        <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.pageSize" placeholder="请输入请求的条数" disabled/>
+            <el-input v-model="form.type2data.pageSize" placeholder="请输入请求的条数" disabled/>
           </el-form-item>
         </el-form>
       </div> -->
+      
 
     </div>
     <div class="editWindowBoxFooter">
@@ -67,9 +68,38 @@ export default {
       formRules:{
         pid_arr: [{type:'array',required:true,trigger:'blur',message:'必须选择一个导航！',validator:validatePid}],
       },
-      //获取导航池id start---------------------------------------->
-      parentKey:0,//获取父级导航
-      parentData: {
+      //获取单个导航id start---------------------------------------->
+      oneParentKey:0,
+      oneParentData: {
+        checkStrictly: true,
+        lazy: true,
+        async lazyLoad (node, resolve) {
+          const { level, data } = node;
+          if (data && data.children && data.children.length !== 0) {
+            return resolve(node)
+          }
+          console.log(level)
+          let parentId = level == 0 ? 0 : data.value
+          let parames = {
+            'pid':parentId
+          }
+          self.$store.dispatch('pool/categoryList',parames).then(res=> {
+            if (res.data) {
+              const nodes = res.data.map(item => ({
+                value: item.id,
+                label: item.name,
+                leaf: level >= 3,
+                children: []
+              }))
+              resolve(nodes)
+            }
+          })
+        }
+      },
+      //获取单个导航id end---------------------------------------->
+      //获取多个导航id start---------------------------------------->
+      moreParentKey:0,
+      moreParentData: {
         checkStrictly: true,
         multiple: true,
         lazy: true,
@@ -96,7 +126,7 @@ export default {
           })
         }
       },
-      //获取导航池id end---------------------------------------->
+      //获取导航id end---------------------------------------->
     };
   },
   methods: {
@@ -104,13 +134,12 @@ export default {
       this.$store.commit('template/closeEditWindowStatus');
     },
     submitData(){
-      console.log(this.form.type1data.pid_arr)
-      // this.$refs.form.validate(valid => {
-      //   if (valid) {
-      //     console.log("123")
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          console.log("保存数据！")
          
-      //   }
-      // })
+        }
+      })
     }
   },
   mounted() {