构建json

构建json

src/store/modules/template.js

@@ -46,46 +46,42 @@ const state = {
 
   //3.网站数据 start------------------------------------------------------------>
   webData:{
-    websiteId:"",//网站id
-    index:[
-      {
-        sectorName:"header",//板块名称
-        sectorId:"1",//板块id
-        sort:1,//排序 //1,2和最后一个是固定的 header,menu,footer
-        componentList:[
-          {
-            component_name:"mainTitle",//组件名称
-            sort:1,//排序
-            category_id:1,//导航池id
-            pageSize:1,//请求多少条
-            listType:[//希望返回什么样的数据
-              "title",//标题
-              "created_time",//发布时间
-              "author",//作者
-              "imgUrl",//缩略图图片
-            ]
-          }
-        ]
-      },
+    //1.base网站基本信息
+    base:{
+      websiteId:"",//网站id 
+    },
+    //2.style信息
+    style:{
+      styleId:"",//风格id
+    },
+    //3.板块信息 header,menu,footer 是页面自带的无需构建
+    template:[  
       {
-        sectorName:"menuSector",
-        sectorId:"2",
-        sort:2,
-        componentList:[]
-      },
-      { //最多只能添加13个模块,也就是说第1,2,13个是固定的
-        sectorName:"footerSector",
-        sectorId:"13",
-        sort:13,
-        componentList:[]
+        index:[{
+          sectorName:"bannerSector",
+          sectorId:1,
+          sort:1,
+          componentList:[
+            {
+              component_type:1,
+              component_name:"mainTitle",
+              sort:1,
+              componentData:{
+                category_id:1,
+                pageSize:1,
+                listType:[
+                  "title",
+                  "created_time",
+                  "author",
+                  "imgUrl",
+                  //...
+                ]
+              }
+            }
+          ]
+        }]
       }
-    ],//首页
-    class:[],//分类页
-    list:[],//列表页
-    article:[],//详情页
-    search:[],//搜索页
-    aloneList:[],//自定义列表页
-    aloneArticle:[],//自定义详情页
+    ]
   }
   //3.网站数据 end------------------------------------------------------------>
 }

src/views/template/public/editWindow.vue

@@ -1,7 +1,21 @@
 <template>
   <div class="editWindowBox">
     <div class="editWindowBoxContent">
-      
+      <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-item>
+        <el-form-item label="请求条数：" :label-width="formLabelWidth" class="custom-align-right">
+          <el-select v-model="form.pageSize" placeholder="请选择">
+            <el-option
+              v-for="item in form.sizeData"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
     </div>
     <div class="editWindowBoxFooter">
       <el-button type="info" @click="closeEditWindow">取消</el-button>
@@ -16,8 +30,60 @@ export default {
       
   },
   data() {
+    let self = this;
+    const validatePid = (rule,value,callback) => {
+      if (value.length === 0) {
+          callback(new Error('必须选择一个导航！'))
+      } else {
+          callback()
+      }
+    }
     return {
-      
+      formLabelWidth:"120px",
+      form:{
+        pid_arr:[],
+        pageSize:1,
+        sizeData:[
+          {value:1,label:"1"},
+          {value:2,label:"2"},
+          {value:3,label:"3"},
+          {value:4,label:"4"},
+          {value:5,label:"5"},
+        ]
+      },
+      formRules:{
+        pid_arr: [{type:'array',required:true,trigger:'change',message:'必须选择一个导航！',validator:validatePid}],
+      },
+      //获取导航池id start---------------------------------------->
+      parentKey:0,//获取父级导航
+      parentData: {
+        checkStrictly: true,
+        multiple: 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---------------------------------------->
     };
   },
   methods: {
@@ -34,10 +100,19 @@ export default {
 <style scoped lang="less">
   .editWindowBox {
     .editWindowBoxContent {
+      width: 100%;
       padding: 20px;
     }
     .editWindowBoxFooter {
       text-align: right;
     }
   }
+  //表单微调 start------------------------------------------------------------>
+  ::v-deep .editWindowBoxContent .el-cascader{
+    width: 100% !important;
+  }
+  ::v-deep .editWindowBoxContent .el-select--medium {
+    width: 100% !important;
+  }
+  //表单微调 end------------------------------------------------------------>
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="bannerBox">
     <div class="itemTopBox">
-      <mainTitle />
+      <mainTitle :sectorName="sectorName " :sort="1"/>
     </div>
     <div class="itemBottomBox">
       <div class="bannerLayerBox">

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

@@ -17,6 +17,10 @@ export default {
     name:{
       type:String,
       default:''
+    },
+    sort:{
+      type:Number,
+      default:0
     }
   },
   data() {