Merge branch '12_4_dangyunlong' into dev

.env.fengrui

@@ -2,4 +2,4 @@
 ENV = 'fengrui'
 
 # base api
-VUE_APP_BASE_API = 'http://192.168.1.115:9501'
+VUE_APP_BASE_API = 'http://192.168.1.113:9501'

src/api/template.js

@@ -1,4 +1,77 @@
 import request from '@/utils/request'
 
-//mock
+//1.自助建站 start ------------------------------------->
 
+//1.1 搜索网站
+export function getWebsiteintel(data) {
+  return request({
+    url: '/website/getWebsiteintel',
+    method: 'post',
+    data
+  })
+}
+
+//1.2 添加网站基本信息 如果只传入website_id，则验证是否已经关联导航池
+export function addWebsiteTemplateintel(data) {
+  return request({
+    url: '/website/addWebsiteTemplateintel',
+    method: 'post',
+    data
+  })
+}
+
+//1.3 获取网站基本信息
+export function getWebsiteTemplateintel(data) {
+  return request({
+    url: '/website/getWebsiteTemplateintel',
+    method: 'post',
+    data
+  })
+}
+
+//1.4 修改网站基本信息
+export function upWebsiteTemplateintel(data) {
+  return request({
+    url: '/website/upWebsiteTemplateintel',
+    method: 'post',
+    data
+  })
+}
+
+//1.5 获取所有风格
+export function getAllTemplateClass(data) {
+  return request({
+    url: '/website/getAllTemplateClass',
+    method: 'post',
+    data
+  })
+}
+
+//1.6 搜索并获取所有网站模板
+export function getWebsiteTemplateList(data) {
+  return request({
+    url: '/website/getWebsiteTemplateList',
+    method: 'post',
+    data
+  })
+}
+
+//1.7 保存用户选择的模板
+export function addWebsiteTemplateclassintel(data) {
+  return request({
+    url: '/website/addWebsiteTemplateclassintel',
+    method: 'post',
+    data
+  })
+}
+
+//1.8 获取用户选择的模板
+export function getWebsiteTemplateclassintel(data) {
+  return request({
+    url: '/website/getWebsiteTemplateclassintel',
+    method: 'post',
+    data
+  })
+}
+
+//自助建站 end ------------------------------------->

src/layout/components/template/componentMenu.vue

@@ -15,11 +15,11 @@
         <div v-if="this.$store.state.template.pageStatus == 1">
           <indexSector/>
         </div>
-        <!--列表页-->
+        <!--列表板块-->
         <div v-if="this.$store.state.template.pageStatus == 3">
           <listSector/>
         </div>
-        <!--详情页-->
+        <!--详情板块-->
         <div v-if="this.$store.state.template.pageStatus == 4">
           <articleSector/>
         </div>
@@ -31,9 +31,7 @@
 <script>
 //首页可选板块
 import indexSector from './pages/index/sector.vue';
-//列表可选板块
 import listSector from './pages/list/sector.vue';
-//详情可选板块
 import articleSector from './pages/article/sector.vue';
 
 export default {

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

@@ -1,52 +1,22 @@
 <template>
   <div class="sectorBox">
-    <!-- <div class="sectorItemBox" @click="addModule('headSector',19)">
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/headSector.png" />
-      </div>
-      <div class="sectorItemTitle">页头</div>
-    </div>
-    <div class="sectorItemBox" @click="addModule('menuSector',2)">
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/menuSector.png" />
-      </div>
-      <div class="sectorItemTitle">网站导航</div>
-    </div> -->
     <div class="sectorItemBox" @click="addModule('imgTitleSector',8,imgTitleSector)" @drag="drag('imgTitleSector',8,imgTitleSector)" @dragend="dragend('imgTitleSector',8,imgTitleSector)" >
       <div class="sectorItem">
         <img src="@/assets/template/sector/imgTitleSector.png"/>
       </div>
       <div class="sectorItemTitle">通栏广告</div>
     </div>
-    <div class="sectorItemBox" @click="addModule('bannerSector',33,bannerSector)" @drag="drag('bannerSector',33,bannerSector)" @dragend="dragend('bannerSector',33,bannerSector)" >
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/bannerSector.png"/>
-      </div>
-      <div class="sectorItemTitle">焦点图</div>
-    </div>
-    <div class="sectorItemBox" @click="addModule('manyPictureSector',49,manyPictureSector)" @drag="drag('manyPictureSector',49,manyPictureSector)" @dragend="dragend('manyPictureSector',49,manyPictureSector)" >
+    <div class="sectorItemBox" @click="addModule('mainArticle',122,mainArticle)" @drag="drag('mainArticle',33,mainArticle)" @dragend="dragend('mainArticle',33,mainArticle)" >
       <div class="sectorItem">
-        <img src="@/assets/template/sector/moreServicesSector.png"/>
+        <img src="@/assets/template/sector/articleSector.png"/>
       </div>
-      <div class="sectorItemTitle">多图菜单</div>
-    </div>
-    <div class="sectorItemBox" @click="addModule('commentSector',44,commentSector)" @drag="drag('commentSector',44,commentSector)" @dragend="dragend('commentSector',44,commentSector)" >
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/commentSector.png"/>
-      </div>
-      <div class="sectorItemTitle">文章列表带评论</div>
+      <div class="sectorItemTitle">文章详情</div>
     </div>
     <div class="sectorItemBox" @click="addModule('listSector',33,listSector)" @drag="drag('listSector',33,listSector)" @dragend="dragend('listSector',33,listSector)" >
       <div class="sectorItem">
         <img src="@/assets/template/sector/newsSector.png"/>
       </div>
-      <div class="sectorItemTitle">文章列表</div>
-    </div>
-    <div class="sectorItemBox" @click="addModule('onlyImgSector',32,onlyImgSector)" @drag="drag('onlyImgSector',32,onlyImgSector)" @dragend="dragend('onlyImgSector',32,onlyImgSector)" >
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/imgSector.png"/> 
-      </div>
-      <div class="sectorItemTitle">纯图片组合</div>
+      <div class="sectorItemTitle">次级文章列表</div>
     </div>
     <div class="sectorItemBox" @click="addModule('friendShipLinkSector',20,friendShipLinkSector)" @drag="drag('friendShipLinkSector',20,friendShipLinkSector)" @dragend="dragend('friendShipLinkSector',20,friendShipLinkSector)" >
       <div class="sectorItem">
@@ -54,12 +24,6 @@
       </div>
       <div class="sectorItemTitle">友情链接</div>
     </div>
-    <!-- <div class="sectorItemBox">
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/footerSector.png" @click="addModule('footerSector',38)"/>
-      </div>
-      <div class="sectorItemTitle">页尾板块</div>
-    </div> -->
   </div>
 </template>
 
@@ -334,9 +298,31 @@ export default {
             componentData:{}
           }
         ]
-      }
+      },
       //友情链接板块 end---------------------------------------->
 
+      //文章详情板块 start---------------------------------------->
+      mainArticle:{
+        sectorName:"mainArticle",//主文章列表
+        componentList:[
+          {
+            component_type:9, //页面必备组件
+            component_style:1, //文章详情
+            component_name:"mainArticle",
+            sort:1,
+            componentData:{
+              category_id:[], //文章详情
+              page:1,
+              pageSize:1,
+              listType:[
+                "details"//文章详情
+              ]
+            }
+          },
+        ]
+      }
+      //文章详情板块 end---------------------------------------->
+
     }
   },
   methods: {
@@ -379,7 +365,6 @@ export default {
     .sectorItemBox {
       box-sizing: border-box;
       padding: 0 20px 40px 20px;
-      height: 130px;
       cursor: pointer;
       .sectorItem {
         border: 1px solid #333644;

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

@@ -1,52 +1,22 @@
 <template>
   <div class="sectorBox">
-    <!-- <div class="sectorItemBox" @click="addModule('headSector',19)">
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/headSector.png" />
-      </div>
-      <div class="sectorItemTitle">页头</div>
-    </div>
-    <div class="sectorItemBox" @click="addModule('menuSector',2)">
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/menuSector.png" />
-      </div>
-      <div class="sectorItemTitle">网站导航</div>
-    </div> -->
     <div class="sectorItemBox" @click="addModule('imgTitleSector',8,imgTitleSector)" @drag="drag('imgTitleSector',8,imgTitleSector)" @dragend="dragend('imgTitleSector',8,imgTitleSector)" >
       <div class="sectorItem">
         <img src="@/assets/template/sector/imgTitleSector.png"/>
       </div>
       <div class="sectorItemTitle">通栏广告</div>
     </div>
-    <div class="sectorItemBox" @click="addModule('bannerSector',33,bannerSector)" @drag="drag('bannerSector',33,bannerSector)" @dragend="dragend('bannerSector',33,bannerSector)" >
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/bannerSector.png"/>
-      </div>
-      <div class="sectorItemTitle">焦点图</div>
-    </div>
-    <div class="sectorItemBox" @click="addModule('manyPictureSector',49,manyPictureSector)" @drag="drag('manyPictureSector',49,manyPictureSector)" @dragend="dragend('manyPictureSector',49,manyPictureSector)" >
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/moreServicesSector.png"/>
-      </div>
-      <div class="sectorItemTitle">多图菜单</div>
-    </div>
-    <div class="sectorItemBox" @click="addModule('commentSector',44,commentSector)" @drag="drag('commentSector',44,commentSector)" @dragend="dragend('commentSector',44,commentSector)" >
+    <div class="sectorItemBox" @click="addModule('mainListSector',92,mainListSector)" @drag="drag('mainListSector',33,mainListSector)" @dragend="dragend('mainListSector',33,mainListSector)" >
       <div class="sectorItem">
-        <img src="@/assets/template/sector/commentSector.png"/>
+        <img src="@/assets/template/sector/listSector.png"/>
       </div>
-      <div class="sectorItemTitle">文章列表带评论</div>
+      <div class="sectorItemTitle">主文章列表</div>
     </div>
     <div class="sectorItemBox" @click="addModule('listSector',33,listSector)" @drag="drag('listSector',33,listSector)" @dragend="dragend('listSector',33,listSector)" >
       <div class="sectorItem">
         <img src="@/assets/template/sector/newsSector.png"/>
       </div>
-      <div class="sectorItemTitle">文章列表</div>
-    </div>
-    <div class="sectorItemBox" @click="addModule('onlyImgSector',32,onlyImgSector)" @drag="drag('onlyImgSector',32,onlyImgSector)" @dragend="dragend('onlyImgSector',32,onlyImgSector)" >
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/imgSector.png"/> 
-      </div>
-      <div class="sectorItemTitle">纯图片组合</div>
+      <div class="sectorItemTitle">次级文章列表</div>
     </div>
     <div class="sectorItemBox" @click="addModule('friendShipLinkSector',20,friendShipLinkSector)" @drag="drag('friendShipLinkSector',20,friendShipLinkSector)" @dragend="dragend('friendShipLinkSector',20,friendShipLinkSector)" >
       <div class="sectorItem">
@@ -54,12 +24,6 @@
       </div>
       <div class="sectorItemTitle">友情链接</div>
     </div>
-    <!-- <div class="sectorItemBox">
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/footerSector.png" @click="addModule('footerSector',38)"/>
-      </div>
-      <div class="sectorItemTitle">页尾板块</div>
-    </div> -->
   </div>
 </template>
 
@@ -92,157 +56,6 @@ export default {
       },
       //添加通栏广告模块 start---------------------------------------->
 
-      //添加banner模块 start---------------------------------------->
-      bannerSector:{
-        sectorName:"bannerSector",//板块名称
-        componentList:[
-          {
-            component_type:1,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
-            component_style:1,//该组件使用哪个展示样式
-            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_style:1,
-            component_name:"banner",
-            sort:2,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:3,
-              listType:[
-                "title",//标题
-                "imgUrl"//缩略图片
-              ]
-            }
-          },
-          {
-            component_type:1,
-            component_style:1,
-            component_name:"tabsNews",
-            sort:3,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:5,
-              listType:[
-                "title",//标题
-                "created_time",//创建时间
-                "introduce",//描述
-              ]
-            }
-          },
-        ]
-      },
-      //添加banner模块 end---------------------------------------->
-
-      //添加多图板块 start---------------------------------------->
-      manyPictureSector:{
-        sectorName:"manyPictureSector",//板块名称
-        componentList:[
-          {
-            component_type:7, //纯文本
-            component_style:1,
-            component_name:"styleTitle",
-            sort:1,
-            componentData:{
-              text:"板块标题"
-            }
-          },
-          {
-            component_type:6, //静态组件无需传递数据
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"fivePicture",
-            sort:2,
-            componentData:{}
-          },
-          {
-            component_type:1,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"tabsNews",
-            sort:3,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:3,
-              listType:[
-                "title",//标题
-                "created_time",//创建时间
-              ]
-            }
-          },
-          {
-            component_type:1,
-            component_style: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_style:1,//该组件使用哪个展示样式
-            component_name:"styleTitle",
-            sort:1,
-            componentData:{
-              text:"板块标题"
-            }
-          },
-          {
-            component_type:1,
-            component_style:2,//该组件使用哪个展示样式
-            component_name:"tabsCalendarNews",
-            sort:2,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:6,
-              listType:[
-                "title",
-                "created_time",
-                "introduce"
-              ]
-            }
-          },
-          {
-            component_type:8,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"calendar", //评论组件无需提交数据
-            sort:3,
-            componentData:{}
-          },
-        ]
-      },
-      //文章列表带评论板块 end---------------------------------------->
-
       //文章列表板块 start---------------------------------------->
       listSector:{
         sectorName:"listSector",//板块名称
@@ -290,29 +103,6 @@ export default {
       },
       //文章列表板块 end---------------------------------------->
 
-      //纯图片组合 start---------------------------------------->
-      onlyImgSector:{
-        sectorName:"onlyImgSector",//板块名称
-        componentList:[
-          {
-            component_type:1,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"",
-            sort:1,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:7,
-              listType:[
-                "title",
-                "imgUrl"
-              ]
-            }
-          }
-        ]
-      },
-      //纯图片组合 end---------------------------------------->
-
       //友情链接板块 start---------------------------------------->
       friendShipLinkSector:{
         sectorName:"friendShipLinkSector",//友情链接无需提交数据
@@ -334,9 +124,35 @@ export default {
             componentData:{}
           }
         ]
-      }
+      },
       //友情链接板块 end---------------------------------------->
 
+      //主文章列表 start---------------------------------------->
+      mainListSector:{
+        sectorName:"mainListSector",//主文章列表
+        componentList:[
+          {
+            component_type:9, //页面必备组件类型
+            component_style:1,
+            component_name:"listMain",
+            sort:1,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:1,
+              listType:[
+                "title",
+                "created_time",//创建时间
+                //"author",//作者
+                //"imgUrl",//缩略图片
+                //"introduce",//描述
+              ]
+            }
+          },
+        ]
+      }
+      //主文章列表 end---------------------------------------->
+
     }
   },
   methods: {
@@ -379,7 +195,6 @@ export default {
     .sectorItemBox {
       box-sizing: border-box;
       padding: 0 20px 40px 20px;
-      height: 130px;
       cursor: pointer;
       .sectorItem {
         border: 1px solid #333644;

src/store/modules/template.js

@@ -1,5 +1,8 @@
-import {getSiteInfo,getSiteCategory,selectWebsiteDepartment,selectWebsiteArea,getWebsiteArticlesList,
-  selectWebsiteArticleInfo,getWebsiteCategory} from '@/api/cms'
+//cms中的接口 用于模板中的职能，导航池
+import {getSiteInfo,getSiteCategory,selectWebsiteDepartment,selectWebsiteArea,getWebsiteArticlesList,selectWebsiteArticleInfo,getWebsiteCategory} from '@/api/cms'
+//自助建站的接口 用于添加基本信息
+import {getWebsiteintel,addWebsiteTemplateintel,getWebsiteTemplateintel,upWebsiteTemplateintel,getAllTemplateClass,getWebsiteTemplateList,addWebsiteTemplateclassintel,
+  getWebsiteTemplateclassintel} from '@/api/template'
 
 import { Message } from 'element-ui'; //注意在这里引入是非常不符合规范的
 
@@ -193,14 +196,54 @@ const mutations = {
       if(state.editComponentType == 7){
         state.componentViewData.titleName = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.text;
       }
-
     }
     //pageStatus==2 分类页
     if(state.pageStatus == 2){}
     //pageStatus==3 列表页
-    if(state.pageStatus == 3){}
+    if(state.pageStatus == 3){
+      const targetModuleIndex = state.pageData.list.findIndex(module => module.i === data.id);
+      //判断组件类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
+      if(state.editComponentType == 1){
+        state.componentViewData.pid_arr = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+        state.componentViewData.pageSize = state.editComponentSize;
+      }
+      //2=tabs新闻选项卡
+      if(state.editComponentType == 2){
+        state.componentViewData.pid_arr = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+        state.componentViewData.pageSize = state.editComponentSize;
+      }
+      //3=广告名称
+      if(state.editComponentType == 3){
+        state.componentViewData.adName = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.text;
+      }
+      //7=标题
+      if(state.editComponentType == 7){
+        state.componentViewData.titleName = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.text;
+      }
+    }
     //pageStatus==4 详情页
-    if(state.pageStatus == 4){}
+    if(state.pageStatus == 4){
+      
+      const targetModuleIndex = state.pageData.article.findIndex(module => module.i === data.id);
+      //判断组件类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
+      if(state.editComponentType == 1){
+        state.componentViewData.pid_arr = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+        state.componentViewData.pageSize = state.editComponentSize;
+      }
+      //2=tabs新闻选项卡
+      if(state.editComponentType == 2){
+        state.componentViewData.pid_arr = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+        state.componentViewData.pageSize = state.editComponentSize;
+      }
+      //3=广告名称
+      if(state.editComponentType == 3){
+        state.componentViewData.adName = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.text;
+      }
+      //7=标题
+      if(state.editComponentType == 7){
+        state.componentViewData.titleName = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.text;
+      }
+    }
     //pageStatus==5 搜索页
     if(state.pageStatus == 5){}
     //pageStatus==6 自定义列表页
@@ -216,8 +259,9 @@ const mutations = {
   },
   //添加板块
   addModule(state,data){
-    //pageStatus==1 首页
+    //pageStatus==1 首页 index
     if(state.pageStatus == 1){
+      //开始复制 start------------------------------------------------------------>
       //判断当前一共有多少个模块最多能添加10个
       if(state.pageData.index.length >= 10){
         Message.error('最多只能添加10个模块！');
@@ -288,20 +332,162 @@ const mutations = {
             state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display="block";
           } catch {}
         }
-
       }
+      //开始复制 end------------------------------------------------------------>
     }
-    //pageStatus==2 分类页
+    //pageStatus==2 分类页 class
     if(state.pageStatus == 2){}
-    //pageStatus==3 列表页
-    if(state.pageStatus == 3){}
-    //pageStatus==4 详情页
-    if(state.pageStatus == 4){}
-    //pageStatus==5 搜索页
+    //pageStatus==3 列表页 list
+    if(state.pageStatus == 3){
+      //开始复制 start------------------------------------------------------------>
+      //判断当前一共有多少个模块最多能添加10个
+      if(state.pageData.list.length >= 10){
+        Message.error('最多只能添加10个模块！');
+        return;
+      }else{
+        //判断是拖拽的还是点击添加进来的 click=点击
+        if(data.source == "click"){
+          console.log("通过点击添加一个板块");
+          //通过时间戳生成id
+          const currentTimestamp = Date.now();
+          let id = currentTimestamp;
+          //data.type 组件名称 data.h 模块高度 
+          //计算当前布局的最大 y 值
+          const maxY = Math.max(...state.pageData.list.map(item => item.y), 0);
+          console.log(data);
+          //设置数据在构建json中的位置
+          let dataSort = state.pageData.list.length;
+
+          //添加板块id  
+          state.pageData.list.push({
+            i: id,
+            x: 0, 
+            y: maxY + 1, 
+            w: 12, 
+            h: data.h, 
+            type: data.type,
+            content:data.jsonData,
+            dataSort:dataSort
+          });
+
+        }
+
+        //drag=拖拽
+        if(data.source == "drag"){
+          //拖拽添加
+          console.log("通过拖拽添加一个板块");
+          //通过时间戳生成id
+          const currentTimestamp = Date.now();
+          let id = currentTimestamp;
+          //data.type 组件名称 data.h 模块高度 
+          //计算当前布局的最大 y 值
+          const maxY = Math.max(...state.pageData.list.map(item => item.y), 0);
+          console.log(data);
+          //设置数据在构建json中的位置
+          let dataSort = state.pageData.list.length;
+          //添加板块id  
+          state.pageData.list.push({
+            //i: state.pageData.list.length, //base 0.0.1 此方法会导致重复的id出现
+            i: id,
+            x: data.x, 
+            y: data.y, 
+            w: 12, 
+            h: data.h, 
+            type: data.type,
+            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+            content:data.jsonData,
+            dataSort:dataSort
+          });
+          console.log("当前添加模块的dataSort为：" + dataSort);
+          //当前的页面构建数据
+          console.log(state.pageData.list);
+          //需要调查一下这里最后的1，1
+          state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1,1);
+          try {
+            state.gridlayoutObj.$children[state.pageData.list.length].$refs.item.style.display="block";
+          } catch {}
+        }
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
+    //pageStatus==4 详情页 article
+    if(state.pageStatus == 4){
+      //开始复制 start------------------------------------------------------------>
+      //判断当前一共有多少个模块最多能添加10个
+      if(state.pageData.article.length >= 10){
+        Message.error('最多只能添加10个模块！');
+        return;
+      }else{
+        //判断是拖拽的还是点击添加进来的 click=点击
+        if(data.source == "click"){
+          console.log("通过点击添加一个板块");
+          //通过时间戳生成id
+          const currentTimestamp = Date.now();
+          let id = currentTimestamp;
+          //data.type 组件名称 data.h 模块高度 
+          //计算当前布局的最大 y 值
+          const maxY = Math.max(...state.pageData.article.map(item => item.y), 0);
+          console.log(data);
+          //设置数据在构建json中的位置
+          let dataSort = state.pageData.article.length;
+
+          //添加板块id  
+          state.pageData.article.push({
+            i: id,
+            x: 0, 
+            y: maxY + 1, 
+            w: 12, 
+            h: data.h, 
+            type: data.type,
+            content:data.jsonData,
+            dataSort:dataSort
+          });
+
+        }
+
+        //drag=拖拽
+        if(data.source == "drag"){
+          //拖拽添加
+          console.log("通过拖拽添加一个板块");
+          //通过时间戳生成id
+          const currentTimestamp = Date.now();
+          let id = currentTimestamp;
+          //data.type 组件名称 data.h 模块高度 
+          //计算当前布局的最大 y 值
+          const maxY = Math.max(...state.pageData.article.map(item => item.y), 0);
+          console.log(data);
+          //设置数据在构建json中的位置
+          let dataSort = state.pageData.article.length;
+          //添加板块id  
+          state.pageData.article.push({
+            //i: state.pageData.article.length, //base 0.0.1 此方法会导致重复的id出现
+            i: id,
+            x: data.x, 
+            y: data.y, 
+            w: 12, 
+            h: data.h, 
+            type: data.type,
+            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+            content:data.jsonData,
+            dataSort:dataSort
+          });
+          console.log("当前添加模块的dataSort为：" + dataSort);
+          //当前的页面构建数据
+          console.log(state.pageData.article);
+          //需要调查一下这里最后的1，1
+          state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1,1);
+          try {
+            state.gridlayoutObj.$children[state.pageData.article.length].$refs.item.style.display="block";
+          } catch {}
+        }
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
+    //pageStatus==5 搜索页 search
     if(state.pageStatus == 5){}
-    //pageStatus==6 自定义列表页
+    //pageStatus==6 自定义列表页 aloneList
     if(state.pageStatus == 6){}
-    //pageStatus==7 自定义详情页
+    //pageStatus==7 自定义详情页 aloneArticle
     if(state.pageStatus == 7){}
   },
   //删除板块
@@ -310,6 +496,7 @@ const mutations = {
     //data.dataSort = dataSort
     //pageStatus==1 首页
     if(state.pageStatus == 1){
+      //开始复制 start------------------------------------------------------------>
       //必须通过重新查找id的方式来删除
       const indexToRemove = state.pageData.index.findIndex(item => item.i === data.i);
       if (indexToRemove !== -1) {
@@ -319,6 +506,7 @@ const mutations = {
       } else {
         Message.warning('未找到要删除的模块！');
       }
+      //开始复制 end------------------------------------------------------------>
       // base 0.0.2 如果使用splice方法删除sort，当你就剩下最后一个的时候，会出现找不到那个元素的问题
       // state.pageData.index.splice(data.dataSort,1);
       // Message.success('模块已删除！');
@@ -327,9 +515,33 @@ const mutations = {
     //pageStatus==2 分类页
     if(state.pageStatus == 2){}
     //pageStatus==3 列表页
-    if(state.pageStatus == 3){}
+    if(state.pageStatus == 3){
+      //开始复制 start------------------------------------------------------------>
+      //必须通过重新查找id的方式来删除
+      const indexToRemove = state.pageData.list.findIndex(item => item.i === data.i);
+      if (indexToRemove !== -1) {
+        state.pageData.list.splice(indexToRemove, 1);
+        Message.success('模块已删除！');
+        console.log('模块已删除，当前的页面构建数据为：', state.pageData.list);
+      } else {
+        Message.warning('未找到要删除的模块！');
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
     //pageStatus==4 详情页
-    if(state.pageStatus == 4){}
+    if(state.pageStatus == 4){
+      //开始复制 start------------------------------------------------------------>
+      //必须通过重新查找id的方式来删除
+      const indexToRemove = state.pageData.article.findIndex(item => item.i === data.i);
+      if (indexToRemove !== -1) {
+        state.pageData.article.splice(indexToRemove, 1);
+        Message.success('模块已删除！');
+        console.log('模块已删除，当前的页面构建数据为：', state.pageData.article);
+      } else {
+        Message.warning('未找到要删除的模块！');
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
     //pageStatus==5 搜索页
     if(state.pageStatus == 5){}
     //pageStatus==6 自定义列表页
@@ -346,6 +558,7 @@ const mutations = {
     console.log(id,dataSort,sort,num);
     //pageStatus==1 首页
     if(state.pageStatus == 1){
+      //开始复制 start------------------------------------------------------------>
       // 获取当前模块数据并进行深拷贝
       let module = JSON.parse(JSON.stringify(state.pageData.index[dataSort]));
       //module.content.componentList[sort].component_style = num;
@@ -360,13 +573,48 @@ const mutations = {
       Vue.set(state.pageData.index, dataSort, module);
       console.log("当前的板块数据为：");
       console.log(state.pageData.index);
+      //开始复制 end------------------------------------------------------------>
     }
     //pageStatus==2 分类页
     if(state.pageStatus == 2){}
     //pageStatus==3 列表页
-    if(state.pageStatus == 3){}
+    if(state.pageStatus == 3){
+      //开始复制 start------------------------------------------------------------>
+      // 获取当前模块数据并进行深拷贝
+      let module = JSON.parse(JSON.stringify(state.pageData.list[dataSort]));
+      //module.content.componentList[sort].component_style = num;
+      //确保修改属性时 Vue 能监控到变化
+      Vue.set(module.content.componentList, sort, {
+        ...module.content.componentList[sort],
+        component_style: num
+      });
+      // 拷贝后直接替换原来的板块
+      //state.pageData.index[id] = module;
+      // 使用Vue.set来强制视图更新
+      Vue.set(state.pageData.list, dataSort, module);
+      console.log("当前的板块数据为：");
+      console.log(state.pageData.list);
+      //开始复制 end------------------------------------------------------------>
+    }
     //pageStatus==4 详情页
-    if(state.pageStatus == 4){}
+    if(state.pageStatus == 4){
+      //开始复制 start------------------------------------------------------------>
+      // 获取当前模块数据并进行深拷贝
+      let module = JSON.parse(JSON.stringify(state.pageData.article[dataSort]));
+      //module.content.componentList[sort].component_style = num;
+      //确保修改属性时 Vue 能监控到变化
+      Vue.set(module.content.componentList, sort, {
+        ...module.content.componentList[sort],
+        component_style: num
+      });
+      // 拷贝后直接替换原来的板块
+      //state.pageData.index[id] = module;
+      // 使用Vue.set来强制视图更新
+      Vue.set(state.pageData.article, dataSort, module);
+      console.log("当前的板块数据为：");
+      console.log(state.pageData.article);
+      //开始复制 end------------------------------------------------------------>
+    }
     //pageStatus==5 搜索页
     if(state.pageStatus == 5){}
     //pageStatus==6 自定义列表页
@@ -380,6 +628,7 @@ const mutations = {
     console.log("当前编辑板块：" + data.id)
     //pageStatus==1 首页
     if(state.pageStatus == 1){
+      //开始复制 start------------------------------------------------------------>
       const targetModuleIndex = state.pageData.index.findIndex(module => module.i === data.id);
       console.log("要修改的模块id为：") //找到要修改的板块
       console.log(data.sort) //找到要修改的板块
@@ -439,13 +688,106 @@ const mutations = {
       }
       //8=评论
       //if(state.editComponentType == 8){}
+      //开始复制 end------------------------------------------------------------>
     }
     //pageStatus==2 分类页
     if(state.pageStatus == 2){}
     //pageStatus==3 列表页
-    if(state.pageStatus == 3){}
+    if(state.pageStatus == 3){
+      //开始复制 start------------------------------------------------------------>
+      const targetModuleIndex = state.pageData.list.findIndex(module => module.i === data.id);
+      console.log("要修改的模块id为：") //找到要修改的板块
+      console.log(data.sort) //找到要修改的板块
+      console.log(targetModuleIndex) //找到要修改的板块
+      if(state.editComponentType == 1){
+        // 获取当前模块数据并进行深拷贝
+        let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex])); // 深拷贝整个模块
+        // 更新 category_id 和 pageSize
+        module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
+        module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
+        // 使用Vue.set来强制视图更新
+        Vue.set(state.pageData.list, targetModuleIndex, module); // 替换为深拷贝的模块
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.list);
+      }
+      //2=tabs新闻选项卡
+      if(state.editComponentType == 2){
+        // 获取当前模块数据并进行深拷贝
+        let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex])); // 深拷贝整个模块
+        // 更新 category_id 和 pageSize
+        module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
+        module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
+        // 使用Vue.set来强制视图更新
+        Vue.set(state.pageData.list, targetModuleIndex, module); // 替换为深拷贝的模块
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.list);
+      }
+      //3=广告
+      if(state.editComponentType == 3){;
+        let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex]));
+        module.content.componentList[data.sort].componentData.text = data.data.adName;
+        Vue.set(state.pageData.list, targetModuleIndex, module);
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.list);
+      }
+      //7=文本
+      if(state.editComponentType == 7){
+        let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex]));
+        module.content.componentList[data.sort].componentData.text = data.data.titleName;
+        Vue.set(state.pageData.list, targetModuleIndex, module);
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.list);
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
     //pageStatus==4 详情页
-    if(state.pageStatus == 4){}
+    if(state.pageStatus == 4){
+      //开始复制 start------------------------------------------------------------>
+      const targetModuleIndex = state.pageData.article.findIndex(module => module.i === data.id);
+      console.log("要修改的模块id为：") //找到要修改的板块
+      console.log(data.sort) //找到要修改的板块
+      console.log(targetModuleIndex) //找到要修改的板块
+      if(state.editComponentType == 1){
+        // 获取当前模块数据并进行深拷贝
+        let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex])); // 深拷贝整个模块
+        // 更新 category_id 和 pageSize
+        module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
+        module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
+        // 使用Vue.set来强制视图更新
+        Vue.set(state.pageData.article, targetModuleIndex, module); // 替换为深拷贝的模块
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.article);
+      }
+      //2=tabs新闻选项卡
+      if(state.editComponentType == 2){
+        // 获取当前模块数据并进行深拷贝
+        let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex])); // 深拷贝整个模块
+        // 更新 category_id 和 pageSize
+        module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
+        module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
+        // 使用Vue.set来强制视图更新
+        Vue.set(state.pageData.article, targetModuleIndex, module); // 替换为深拷贝的模块
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.article);
+      }
+      //3=广告
+      if(state.editComponentType == 3){;
+        let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex]));
+        module.content.componentList[data.sort].componentData.text = data.data.adName;
+        Vue.set(state.pageData.article, targetModuleIndex, module);
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.article);
+      }
+      //7=文本
+      if(state.editComponentType == 7){
+        let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex]));
+        module.content.componentList[data.sort].componentData.text = data.data.titleName;
+        Vue.set(state.pageData.article, targetModuleIndex, module);
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.article);
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
     //pageStatus==5 搜索页
     if(state.pageStatus == 5){}
     //pageStatus==6 自定义列表页
@@ -538,6 +880,7 @@ const mutations = {
   drag(state, data) {
     // pageStatus == 1 首页
     if (state.pageStatus == 1) {
+      //开始复制 start------------------------------------------------------------>
       let parentRect = document.getElementById('content').getBoundingClientRect();
       //console.log(parentRect); 获取画布
       let mouseInGrid = false;
@@ -578,13 +921,98 @@ const mutations = {
           state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop');
         }
       }
+      //开始复制 end------------------------------------------------------------>
     }
     // pageStatus == 2 分类页
     if (state.pageStatus == 2) {}
     // pageStatus == 3 列表页
-    if (state.pageStatus == 3) {}
+    if (state.pageStatus == 3) {
+      //开始复制 start------------------------------------------------------------>
+      let parentRect = document.getElementById('content').getBoundingClientRect();
+      //console.log(parentRect); 获取画布
+      let mouseInGrid = false;
+      if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
+        mouseInGrid = true;
+      }
+      //如果没有占位符就创建一个
+      if (mouseInGrid === true && (state.pageData.list.findIndex(item => item.i === 'drop')) === -1) {
+        state.pageData.list.push({
+          x: (state.pageData.list.length * 2) % (this.colNum || 12),
+          y: state.pageData.list.length + (this.colNum || 12), // puts it at the bottom
+          w: 12,
+          h: 2,
+          i: 'drop',
+        });
+      }
+      //如果已经存在占位符
+      let index = state.pageData.list.findIndex(item => item.i === 'drop');
+      if (index !== -1) {
+        try {
+          state.gridlayoutObj.$children[state.pageData.list.length].$refs.item.style.display = "none";
+        } catch {
+
+        }
+        let el = state.gridlayoutObj.$children[index];
+        el.dragging = {"top": state.mouseXY.y - parentRect.top, "left": state.mouseXY.x - parentRect.left};
+        let new_pos = el.calcXY(state.mouseXY.y - parentRect.top, state.mouseXY.x - parentRect.left);
+
+        if (mouseInGrid === true) {
+          state.gridlayoutObj.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 12);
+          state.DragPos.i = String(index);
+          state.DragPos.x = state.pageData.list[index].x;
+          state.DragPos.y = state.pageData.list[index].y;
+        }
+        if (mouseInGrid === false) {
+          state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
+          state.pageData.list = state.pageData.list.filter(obj => obj.i !== 'drop');
+        }
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
     // pageStatus == 4 详情页
-    if (state.pageStatus == 4) {}
+    if (state.pageStatus == 4) {
+      //开始复制 start------------------------------------------------------------>
+      let parentRect = document.getElementById('content').getBoundingClientRect();
+      //console.log(parentRect); 获取画布
+      let mouseInGrid = false;
+      if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
+        mouseInGrid = true;
+      }
+      //如果没有占位符就创建一个
+      if (mouseInGrid === true && (state.pageData.article.findIndex(item => item.i === 'drop')) === -1) {
+        state.pageData.article.push({
+          x: (state.pageData.article.length * 2) % (this.colNum || 12),
+          y: state.pageData.article.length + (this.colNum || 12), // puts it at the bottom
+          w: 12,
+          h: 2,
+          i: 'drop',
+        });
+      }
+      //如果已经存在占位符
+      let index = state.pageData.article.findIndex(item => item.i === 'drop');
+      if (index !== -1) {
+        try {
+          state.gridlayoutObj.$children[state.pageData.article.length].$refs.item.style.display = "none";
+        } catch {
+
+        }
+        let el = state.gridlayoutObj.$children[index];
+        el.dragging = {"top": state.mouseXY.y - parentRect.top, "left": state.mouseXY.x - parentRect.left};
+        let new_pos = el.calcXY(state.mouseXY.y - parentRect.top, state.mouseXY.x - parentRect.left);
+
+        if (mouseInGrid === true) {
+          state.gridlayoutObj.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 12);
+          state.DragPos.i = String(index);
+          state.DragPos.x = state.pageData.article[index].x;
+          state.DragPos.y = state.pageData.article[index].y;
+        }
+        if (mouseInGrid === false) {
+          state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
+          state.pageData.article = state.pageData.article.filter(obj => obj.i !== 'drop');
+        }
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
     // pageStatus == 5 搜索页
     if (state.pageStatus == 5) {}
     // pageStatus == 6 自定义列表页
@@ -594,9 +1022,9 @@ const mutations = {
   },
   //拖拽结束 定位落点
   dragend(state, data) {
-
     // pageStatus == 1 首页
     if (state.pageStatus == 1) {
+      //开始复制 start------------------------------------------------------------>
       //获取画布尺寸
       let parentRect = document.getElementById('content').getBoundingClientRect();
       //判断是否在画布内
@@ -636,15 +1064,69 @@ const mutations = {
         }
         //开发到这里了，注意我可能还需要上面那个 this.$refs.gridLayout.dragEvent方法
         this.commit('template/addModule',sendData);
-
       }
+      //开始复制 end------------------------------------------------------------>
     }
     // pageStatus == 2 分类页
     if (state.pageStatus == 2) {}
     // pageStatus == 3 列表页
-    if (state.pageStatus == 3) {}
+    if (state.pageStatus == 3) {
+      //开始复制 start------------------------------------------------------------>
+      //获取画布尺寸
+      let parentRect = document.getElementById('content').getBoundingClientRect();
+      //判断是否在画布内
+      let mouseInGrid = false;
+      if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
+          mouseInGrid = true;
+      }
+      //如果在画布内，开始创建元素
+      if (mouseInGrid === true) {
+        alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
+        state.gridlayoutObj.dragEvent('dragend', 'drop', state.DragPos.x, state.DragPos.y, 1, 1);
+        state.pageData.list = state.pageData.list.filter(obj => obj.i !== 'drop');
+
+        let sendData = {
+          source:"drag",//添加时判断此模块来自外部拖拽，而不是点击
+          type:data.type,
+          h:data.h,
+          jsonData:data.jsonData,
+          x: state.DragPos.x,
+          y: state.DragPos.y,
+          w: 12,
+        }
+        this.commit('template/addModule',sendData);
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
     // pageStatus == 4 详情页
-    if (state.pageStatus == 4) {}
+    if (state.pageStatus == 4) {
+      //开始复制 start------------------------------------------------------------>
+      //获取画布尺寸
+      let parentRect = document.getElementById('content').getBoundingClientRect();
+      //判断是否在画布内
+      let mouseInGrid = false;
+      if (((state.mouseXY.x > parentRect.left) && (state.mouseXY.x < parentRect.right)) && ((state.mouseXY.y > parentRect.top) && (state.mouseXY.y < parentRect.bottom))) {
+          mouseInGrid = true;
+      }
+      //如果在画布内，开始创建元素
+      if (mouseInGrid === true) {
+        alert(`Dropped element props:\n${JSON.stringify(state.DragPos, ['x', 'y', 'w', 'h'], 2)}`);
+        state.gridlayoutObj.dragEvent('dragend', 'drop', state.DragPos.x, state.DragPos.y, 1, 1);
+        state.pageData.article = state.pageData.article.filter(obj => obj.i !== 'drop');
+
+        let sendData = {
+          source:"drag",//添加时判断此模块来自外部拖拽，而不是点击
+          type:data.type,
+          h:data.h,
+          jsonData:data.jsonData,
+          x: state.DragPos.x,
+          y: state.DragPos.y,
+          w: 12,
+        }
+        this.commit('template/addModule',sendData);
+      }
+      //开始复制 end------------------------------------------------------------>
+    }
     // pageStatus == 5 搜索页
     if (state.pageStatus == 5) {}
     // pageStatus == 6 自定义列表页
@@ -663,9 +1145,17 @@ const mutations = {
     // pageStatus == 2 分类页
     if (state.pageStatus == 2) {}
     // pageStatus == 3 列表页
-    if (state.pageStatus == 3) {}
+    if (state.pageStatus == 3) {
+      console.log(data);
+      state.pageData.list[data.i].h = data.h;
+      console.log(state.pageData.list[data.i]);
+    }
     // pageStatus == 4 详情页
-    if (state.pageStatus == 4) {}
+    if (state.pageStatus == 4) {
+      console.log(data);
+      state.pageData.article[data.i].h = data.h;
+      console.log(state.pageData.article[data.i]);
+    }
     // pageStatus == 5 搜索页
     if (state.pageStatus == 5) {}
     // pageStatus == 6 自定义列表页
@@ -686,15 +1176,22 @@ const mutations = {
       console.log(clonedData.data[index].content);
       // 使用 Vue.set 来确保属性变更能被 Vue 追踪
       Vue.set(clonedData.data[index].content, 'sort', Number(index) + 1);
-      if (data.type == "index") {
-        // 不要把数据直接保存到 state.webSiteData.template 中，否则无法删除
-        websiteData.push(clonedData.data[index].content);
-      }
+      // if (data.type == "index") {
+      //   // 不要把数据直接保存到 state.webSiteData.template 中，否则无法删除
+      //   websiteData.push(clonedData.data[index].content);
+      // }
+      websiteData.push(clonedData.data[index].content);
     }
     // 保存到对应的页面 json 中
     if (data.type == "index") {
       state.webSiteData.template.index = websiteData;
     }
+    if (data.type == "list") {
+      state.webSiteData.template.list = websiteData;
+    }
+    if (data.type == "article") {
+      state.webSiteData.template.article = websiteData;
+    }
   },
   //保存模板
   saveTemplate(state) {
@@ -703,6 +1200,10 @@ const mutations = {
     //调用mutations中的方法无需使用$store
     //格式化index的信息
     this.commit('template/formatTemplateInfo',{data:state.pageData.index,type:"index"});
+    //格式化list的信息
+    this.commit('template/formatTemplateInfo',{data:state.pageData.list,type:"list"});
+    //格式化article的信息
+    this.commit('template/formatTemplateInfo',{data:state.pageData.article,type:"article"});
     console.log(state.webSiteData);
   },
   //随机生成模板
@@ -771,7 +1272,7 @@ const mutations = {
 }
 
 const actions = {
-  //1.站点数据 start------------------------------------------------------------>
+  //1.显示画板组件数据 start------------------------------------------------------------>
   //获取网站基本信息
   getSiteInfo({commit},data){
     return new Promise((resolve, reject) => {
@@ -836,7 +1337,90 @@ const actions = {
       })
     })
   },
-  //1.站点数据 end------------------------------------------------------------>
+  //1.显示画板组件数据 end------------------------------------------------------------>
+  
+  //2.构建网站json start------------------------------------------------------------>
+  //搜索网站
+  getWebsiteintel({commit},data){
+    return new Promise((resolve, reject) => {
+      getWebsiteintel(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //添加网站基本信息 如果只传入website_id，则验证是否已经关联导航池
+  addWebsiteTemplateintel({commit},data){
+    return new Promise((resolve, reject) => {
+      addWebsiteTemplateintel(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //获取网站基本信息
+  getWebsiteTemplateintel({commit},data){
+    return new Promise((resolve, reject) => {
+      getWebsiteTemplateintel(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //修改网站基本信息
+  upWebsiteTemplateintel({commit},data){
+    return new Promise((resolve, reject) => {
+      upWebsiteTemplateintel(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //获取所有风格
+  getAllTemplateClass({commit},data){
+    return new Promise((resolve, reject) => {
+      getAllTemplateClass(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //搜索并获取所有网站模板
+  getWebsiteTemplateList({commit},data){
+    return new Promise((resolve, reject) => {
+      getWebsiteTemplateList(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //保存用户选择的模板
+  addWebsiteTemplateclassintel({commit},data){
+    return new Promise((resolve, reject) => {
+      addWebsiteTemplateclassintel(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //获取用户选择的模板
+  getWebsiteTemplateclassintel({commit},data){
+    return new Promise((resolve, reject) => {
+      getWebsiteTemplateclassintel(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //2.构建网站json end------------------------------------------------------------>
 }
 
 export default {

src/views/chat/hall.vue

@@ -2506,6 +2506,25 @@ export default {
       this.imgZoomUrl = url;
       this.imgZoomStatus = true;
     },
+    //5.9 创建链接 防止websocket意外中断
+    getWebsocket(){
+      //判断当前的route是否为/hall，否则不触发这个方法
+      if(this.$route.path=="/hall"){
+        this.$confirm('您的会话意外断开，是否重新连接？', '提示', {
+          confirmButtonText: '重新连接',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          //强制刷新页面
+          window.location.reload();
+        }).catch(() => {
+          //取消刷新
+          this.$message.error("您的连接已中断！")
+        });
+      }else{
+        console.log("前往其他页面，关闭ws！")
+      }
+    }
     //5.websocket会话 end---------------------------------------->
   },
   mounted() {
@@ -2523,7 +2542,9 @@ export default {
     //当连接关闭的时候关闭websocket
     this.ws.addEventListener('close', function (event) {
       // 连接关闭时执行的操作
-      console.log("关闭链接",event)
+      console.log("连接被关闭！",event)
+      // 弹窗询问用户是否手动刷新
+      that.getWebsocket();
     });
     
     //开启websocket连接 end---------------------------------------->

src/views/template/page/pageArticle.vue

@@ -0,0 +1,322 @@
+<template>
+  <div>
+    <!-- 1.页头板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <headSector />
+    </div>
+    <!-- 2.导航板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <menuSector />
+    </div>
+    <!-- 无内容占位符 -->
+    <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.article.length == 0">
+      <img src="@/assets/template/creat.png">
+      <div>请点击一个左侧板块，开始您的网站创建</div>
+    </div>
+    <!--使用gridKey来强制更新视图-->
+    <div id="content">
+      <grid-layout 
+        ref="gridlayout"
+        :layout="this.$store.state.template.pageData.article" 
+        :layout.sync="this.$store.state.template.pageData.article"
+        :col-num="12" 
+        :row-height="rowHeight" 
+        :margin="[0,0]" 
+        :is-draggable="true" 
+        :is-resizable="true" 
+        :key="this.$store.state.template.gridKey
+        ">
+        <grid-item 
+          v-for="(item, index) in this.$store.state.template.pageData.article" 
+          :key="item.i" 
+          :i="item.i" 
+          :x="item.x" 
+          :y="item.y" 
+          :w="item.w" 
+          :h="item.h" 
+          :is-resizable="false">
+          <div class="grid-item-content">
+            <div class="grid-tools-menu" v-if="$store.state.template.previewStatus==false">
+              <!-- 移动板块-->
+              <!-- <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
+              <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span> -->
+              <span @click="deleteModule(item.i,item.dataSort)"><i class="el-icon-close"></i></span>
+            </div>
+            <!-- 4.广告模块 -->
+            <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
+              <imgTitleSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 5.焦点图模块 -->
+            <div v-if="item.type == 'bannerSector'" class="moduleBox">
+              <bannerSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 6.多图模块 -->
+            <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
+              <manyPictureSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 7.评论模块 -->
+            <div v-if="item.type == 'commentSector'" class="moduleBox">
+              <commentSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 8.双联文章列表模块 -->
+            <div v-if="item.type == 'listSector'" class="moduleBox">
+              <listSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 9.纯图片组合模块 --> 
+            <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
+              <onlyImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 10.友情链接模块 --> 
+            <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
+              <friendShipLinkSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 11.文章详情 --> 
+            <div v-if="item.type == 'mainArticle'" class="moduleBox">
+              <mainArticle :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+          </div>
+        </grid-item>
+      </grid-layout>
+    </div>
+    <div class="FixedModuleBoxBottom">
+      <!-- 3.页尾模块 -->
+      <footerSector />
+    </div>
+  </div>
+</template>
+
+<script>
+//页面公用组件 start------------------------------------------------------------>
+//引入公用样式
+import '@/styles/global.less';
+import {GridLayout, GridItem} from "vue-grid-layout";
+//页面公用组件 end------------------------------------------------------------>
+
+//自助建站组件 start------------------------------------------------------------>
+//style1
+import headSector from '../style/1/sector/1.vue';//顶部
+import menuSector from '../style/1/sector/2.vue';//菜单
+import imgTitleSector from '../style/1/sector/4.vue';//广告
+import bannerSector from '../style/1/sector/5.vue';//焦点图
+import manyPictureSector from '../style/1/sector/6.vue';//多图
+import commentSector from '../style/1/sector/7.vue';//评论
+import listSector from '../style/1/sector/8.vue';//文章列表
+import onlyImgSector from '../style/1/sector/9.vue';//纯图片组合
+import friendShipLinkSector from '../style/1/sector/10.vue';//友情链接
+import footerSector from '../style/1/sector/3.vue';//底部
+import mainArticle from '../style/1/sector/12.vue';//文章详情
+//自助建站组件 end------------------------------------------------------------>
+
+
+export default {
+  components: {
+    GridLayout,
+    GridItem,
+    //板块组件 style1
+    headSector,
+    menuSector,
+    imgTitleSector,
+    bannerSector,
+    manyPictureSector,
+    commentSector,
+    listSector,
+    onlyImgSector,
+    friendShipLinkSector,
+    footerSector,
+    mainArticle
+  },
+  data() {
+    return {
+      //0.全局配置 start------------------------------------------------------------>
+      windowStatus: false,
+      rowHeight:10,
+      //0.全局配置 end------------------------------------------------------------>
+      //1.编辑模块 start------------------------------------------------------------>
+      formLabelWidth: '120px',
+      editModule: "",//待编辑的模块
+      //1.编辑模块 end------------------------------------------------------------>
+    }
+  },
+  mounted() {
+    //必备操作
+    //1.获得vuex中的鼠标对象
+    let mouseObj = this.$store.state.template.mouseXY;
+    //2.获得gridlayout对象
+    this.$store.commit('template/setGridlayoutObj',this.$refs.gridlayout);
+    //3.监听鼠标按住以后的移动事件
+    document.addEventListener("dragover", function (e,store) {
+      mouseObj.x = e.clientX;
+      mouseObj.y = e.clientY;
+      // mouseXY.x = e.clientX;
+      // mouseXY.y = e.clientY;
+    },false);
+  },
+  methods: {
+    //0.全局操作 start ------------------------------------------------------------>
+    //0.1上一步  
+    goStyle(){
+      this.$router.push({
+        path: '/templateStyle',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    //0.2下一步
+    gotoList(){
+      this.$router.push({
+        path: '/templateList'
+      });
+    },
+    //0.全局操作 end ------------------------------------------------------------>
+
+    //1.模块操作 start ------------------------------------------------------------>
+    //1.1 移动模块
+    moveModule(i,moveType){
+      this.$store.commit('template/moveModule',{i:i,moveType:moveType});
+    },
+    //1.2 删除模块
+    deleteModule(i,dataSort){
+      let data = {
+        i:i,
+        dataSort:dataSort
+      }
+      this.$store.commit('template/deleteModule',data);
+    },
+    //1.3 打开弹出框
+    openWindow(item) {
+      this.editModule = item.i;
+      this.windowStatus = true;
+    },
+    //1.4 关闭弹出框
+    closeWindow() {
+      this.windowStatus = false;
+    }
+    //1.模块操作 end ------------------------------------------------------------>
+  }
+}
+</script>
+
+<style scoped lang="less">
+//拖拽demo
+.droppable-element {
+  width: 150px;
+  text-align: center;
+  background: #fdd;
+  border: 1px solid black;
+  margin: 10px 0;
+  padding: 10px;
+}
+//模块 start------------------------------------------------------------> 
+.sectorBorder {
+  border: 2px dashed #eee;
+}
+.moduleBox {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  justify-content: space-between;
+  box-sizing: border-box;
+  //border: 2px dashed #eee;
+}
+.moduleBoxBorder {
+  border: 2px dashed #eee;
+}
+//固定的模块
+.FixedModuleBox {
+  width: 100%;
+  margin-bottom: 20px;
+  //border: 2px dashed #eee;
+}
+.FixedModuleBoxBottom {
+  width: 100%;
+}
+.FixedMainModuleBox {
+  width: 100%;
+  font-size: 18px;
+  color: #999;
+  text-align: center;
+  img {
+    margin-bottom: 20px;
+  }
+  padding: 100px;
+  //background: #F5F7FB;
+  margin-bottom: 20px;
+}
+.FixedMainModuleBoxBorder {
+  border: 2px dashed #eee;
+}
+//模块 end------------------------------------------------------------> 
+//栅格布局 start------------------------------------------------------------> 
+.grid-item-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  
+  .grid-tools-menu {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    span {
+      width: 38px;
+      height: 38px;
+      line-height: 38px;
+      text-align: center;
+      font-size: 30px;
+      cursor: pointer;
+      color: #999;
+      // display: flex;
+      // align-items: center;
+      // justify-content: center;
+      // cursor: pointer;
+      // margin: 5px;
+      // color: #000;
+      // background: #fff;
+      // border: 1px solid #000;
+      // border-radius: 5px;
+      // width: 24px;
+      // height: 24px;
+      // line-height: 24px;
+      // text-align: center;
+      // font-size: 14px;
+      // transition: all 0.3s;
+      // &:hover {
+      //   color: #fff;
+      //   background: #000;
+      // }
+      transition: all 0.3s;
+      &:hover {
+        color: #333;
+      }
+    }
+  }
+}
+.grid-layout {
+  grid-gap: 0;
+  row-gap: 0;
+}
+//栅格布局 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>

src/views/template/page/pageIndex-copy.vue

@@ -1,278 +0,0 @@
-<template>
-  <div class="grid-layout-demo">
-    <!-- 1.页头板块 -->
-    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
-      <headSector />
-    </div>
-    <!-- 2.导航板块 -->
-    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
-      <menuSector />
-    </div>
-    <!-- 占位符 -->
-    <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.index.length == 0">
-      <img src="@/assets/template/creat.png">
-      <div>您选择的板块将展示到此区域</div>
-    </div>
-    <!--使用gridKey来强制更新视图-->
-    <grid-layout :layout="this.$store.state.template.pageData.index" :margin="[0,0]" :col-num="12" :row-height="rowHeight" :is-draggable="true" :is-resizable="true" :key="this.$store.state.template.gridKey">
-      <grid-item v-for="(item, index) in this.$store.state.template.pageData.index" :key="item.i" :i="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :is-resizable="false">
-        <div class="grid-item-content">
-          <div class="grid-tools-menu" v-if="$store.state.template.previewStatus==false">
-            <!-- 移动板块-->
-            <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
-            <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span>
-            <span @click="deleteModule(item.i,item.dataSort)"><i class="el-icon-close"></i></span>
-          </div>
-          <!-- 4.广告模块 -->
-          <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
-            <imgTitleSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 5.焦点图模块 -->
-          <div v-if="item.type == 'bannerSector'" class="moduleBox">
-            <bannerSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 6.多图模块 -->
-          <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
-            <manyPictureSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 7.评论模块 -->
-          <div v-if="item.type == 'commentSector'" class="moduleBox">
-            <commentSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 8.双联文章列表模块 -->
-          <div v-if="item.type == 'listSector'" class="moduleBox">
-            <listSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 9.纯图片组合模块 --> 
-          <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
-            <onlyImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 10.友情链接模块 --> 
-          <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
-            <friendShipLinkSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-        </div>
-      </grid-item>
-    </grid-layout>
-    <div class="FixedModuleBoxBottom">
-      <!-- 3.页尾模块 -->
-      <footerSector />
-    </div>
-  </div>
-</template>
-
-<script>
-//页面公用组件 start------------------------------------------------------------>
-//引入公用样式
-import '@/styles/global.less';
-//引入vue-grid-layout拖拽效果
-import { GridLayout, GridItem } from 'vue-grid-layout';
-//页面公用组件 end------------------------------------------------------------>
-
-//自助建站组件 start------------------------------------------------------------>
-//style1
-import headSector from '../style/1/sector/1.vue';//顶部
-import menuSector from '../style/1/sector/2.vue';//菜单
-import imgTitleSector from '../style/1/sector/4.vue';//广告
-import bannerSector from '../style/1/sector/5.vue';//焦点图
-import manyPictureSector from '../style/1/sector/6.vue';//多图
-import commentSector from '../style/1/sector/7.vue';//评论
-import listSector from '../style/1/sector/8.vue';//文章列表
-import onlyImgSector from '../style/1/sector/9.vue';//纯图片组合
-import friendShipLinkSector from '../style/1/sector/10.vue';//友情链接
-import footerSector from '../style/1/sector/3.vue';//底部
-//自助建站组件 end------------------------------------------------------------>
-
-export default {
-  components: {
-    //拖拽组件
-    GridLayout,
-    GridItem,
-    //板块组件 style1
-    headSector,
-    menuSector,
-    imgTitleSector,
-    bannerSector,
-    manyPictureSector,
-    commentSector,
-    listSector,
-    onlyImgSector,
-    friendShipLinkSector,
-    footerSector
-  },
-  data() {
-    return {
-      //0.全局配置 start------------------------------------------------------------>
-      windowStatus: false,
-      rowHeight:10,
-      //0.全局配置 end------------------------------------------------------------>
-      //1.编辑模块 start------------------------------------------------------------>
-      formLabelWidth: '120px',
-      editModule: "",//待编辑的模块
-      //1.编辑模块 end------------------------------------------------------------>
-    }
-  },
-  methods: {
-    //0.全局操作 start ------------------------------------------------------------>
-    //0.1上一步  
-    goStyle(){
-      this.$router.push({
-        path: '/templateStyle',
-        query: {
-          id: this.editId
-        }
-      });
-    },
-    //0.2下一步
-    gotoList(){
-      this.$router.push({
-        path: '/templateList'
-      });
-    },
-    //0.全局操作 end ------------------------------------------------------------>
-
-    //1.模块操作 start ------------------------------------------------------------>
-    //1.1 移动模块
-    moveModule(i,moveType){
-      this.$store.commit('template/moveModule',{i:i,moveType:moveType});
-    },
-    //1.2 删除模块
-    deleteModule(i,dataSort){
-      let data = {
-        i:i,
-        dataSort:dataSort
-      }
-      this.$store.commit('template/deleteModule',data);
-    },
-    //1.3 打开弹出框
-    openWindow(item) {
-      this.editModule = item.i;
-      this.windowStatus = true;
-    },
-    //1.4 关闭弹出框
-    closeWindow() {
-      this.windowStatus = false;
-    }
-    //1.模块操作 end ------------------------------------------------------------>
-  },
-  mounted(){
-
-  }
-}
-</script>
-
-<style scoped lang="less">
-  //模块 start------------------------------------------------------------> 
-  .sectorBorder {
-    border: 2px dashed #eee;
-  }
-  .moduleBox {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    justify-content: space-between;
-    box-sizing: border-box;
-    //border: 2px dashed #eee;
-  }
-  .moduleBoxBorder {
-    border: 2px dashed #eee;
-  }
-  //固定的模块
-  .FixedModuleBox {
-    width: 100%;
-    margin-bottom: 20px;
-    //border: 2px dashed #eee;
-  }
-  .FixedModuleBoxBottom {
-    width: 100%;
-  }
-  .FixedMainModuleBox {
-    width: 100%;
-    font-size: 18px;
-    color: #999;
-    text-align: center;
-    img {
-      margin-bottom: 20px;
-    }
-    padding: 100px;
-    //background: #F5F7FB;
-    margin-bottom: 20px;
-  }
-  .FixedMainModuleBoxBorder {
-    border: 2px dashed #eee;
-  }
-  //模块 end------------------------------------------------------------> 
-  //栅格布局 start------------------------------------------------------------> 
-  .grid-item-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #fff;
-    height: 100%;
-    overflow: hidden;
-    position: relative;
-    
-    .grid-tools-menu {
-      position: absolute;
-      top: 0;
-      right: 0;
-      z-index: 99;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      span {
-        width: 38px;
-        height: 38px;
-        line-height: 38px;
-        text-align: center;
-        font-size: 30px;
-        cursor: pointer;
-        color: #999;
-        // display: flex;
-        // align-items: center;
-        // justify-content: center;
-        // cursor: pointer;
-        // margin: 5px;
-        // color: #000;
-        // background: #fff;
-        // border: 1px solid #000;
-        // border-radius: 5px;
-        // width: 24px;
-        // height: 24px;
-        // line-height: 24px;
-        // text-align: center;
-        // font-size: 14px;
-        // transition: all 0.3s;
-        // &:hover {
-        //   color: #fff;
-        //   background: #000;
-        // }
-        transition: all 0.3s;
-        &:hover {
-          color: #333;
-        }
-      }
-    }
-  }
-  .grid-layout {
-    grid-gap: 0;
-    row-gap: 0;
-  }
-  //栅格布局 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>  
-

src/views/template/page/pageIndex-copy2.vue

@@ -1,278 +0,0 @@
-<template>
-  <div class="grid-layout-demo">
-    <!-- 1.页头板块 -->
-    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
-      <headSector />
-    </div>
-    <!-- 2.导航板块 -->
-    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
-      <menuSector />
-    </div>
-    <!-- 占位符 -->
-    <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.index.length == 0">
-      <img src="@/assets/template/creat.png">
-      <div>您选择的板块将展示到此区域</div>
-    </div>
-    <!--使用gridKey来强制更新视图-->
-    <grid-layout :layout="this.$store.state.template.pageData.index" :margin="[0,0]" :col-num="12" :row-height="rowHeight" :is-draggable="true" :is-resizable="true" :key="this.$store.state.template.gridKey">
-      <grid-item v-for="(item, index) in this.$store.state.template.pageData.index" :key="item.i" :i="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :is-resizable="false">
-        <div class="grid-item-content">
-          <div class="grid-tools-menu" v-if="$store.state.template.previewStatus==false">
-            <!-- 移动板块-->
-            <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
-            <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span>
-            <span @click="deleteModule(item.i,item.dataSort)"><i class="el-icon-close"></i></span>
-          </div>
-          <!-- 4.广告模块 -->
-          <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
-            <imgTitleSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 5.焦点图模块 -->
-          <div v-if="item.type == 'bannerSector'" class="moduleBox">
-            <bannerSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 6.多图模块 -->
-          <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
-            <manyPictureSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 7.评论模块 -->
-          <div v-if="item.type == 'commentSector'" class="moduleBox">
-            <commentSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 8.双联文章列表模块 -->
-          <div v-if="item.type == 'listSector'" class="moduleBox">
-            <listSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 9.纯图片组合模块 --> 
-          <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
-            <onlyImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-          <!-- 10.友情链接模块 --> 
-          <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
-            <friendShipLinkSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
-          </div>
-        </div>
-      </grid-item>
-    </grid-layout>
-    <div class="FixedModuleBoxBottom">
-      <!-- 3.页尾模块 -->
-      <footerSector />
-    </div>
-  </div>
-</template>
-
-<script>
-//页面公用组件 start------------------------------------------------------------>
-//引入公用样式
-import '@/styles/global.less';
-//引入vue-grid-layout拖拽效果
-import { GridLayout, GridItem } from 'vue-grid-layout';
-//页面公用组件 end------------------------------------------------------------>
-
-//自助建站组件 start------------------------------------------------------------>
-//style1
-import headSector from '../style/1/sector/1.vue';//顶部
-import menuSector from '../style/1/sector/2.vue';//菜单
-import imgTitleSector from '../style/1/sector/4.vue';//广告
-import bannerSector from '../style/1/sector/5.vue';//焦点图
-import manyPictureSector from '../style/1/sector/6.vue';//多图
-import commentSector from '../style/1/sector/7.vue';//评论
-import listSector from '../style/1/sector/8.vue';//文章列表
-import onlyImgSector from '../style/1/sector/9.vue';//纯图片组合
-import friendShipLinkSector from '../style/1/sector/10.vue';//友情链接
-import footerSector from '../style/1/sector/3.vue';//底部
-//自助建站组件 end------------------------------------------------------------>
-
-export default {
-  components: {
-    //拖拽组件
-    GridLayout,
-    GridItem,
-    //板块组件 style1
-    headSector,
-    menuSector,
-    imgTitleSector,
-    bannerSector,
-    manyPictureSector,
-    commentSector,
-    listSector,
-    onlyImgSector,
-    friendShipLinkSector,
-    footerSector
-  },
-  data() {
-    return {
-      //0.全局配置 start------------------------------------------------------------>
-      windowStatus: false,
-      rowHeight:10,
-      //0.全局配置 end------------------------------------------------------------>
-      //1.编辑模块 start------------------------------------------------------------>
-      formLabelWidth: '120px',
-      editModule: "",//待编辑的模块
-      //1.编辑模块 end------------------------------------------------------------>
-    }
-  },
-  methods: {
-    //0.全局操作 start ------------------------------------------------------------>
-    //0.1上一步  
-    goStyle(){
-      this.$router.push({
-        path: '/templateStyle',
-        query: {
-          id: this.editId
-        }
-      });
-    },
-    //0.2下一步
-    gotoList(){
-      this.$router.push({
-        path: '/templateList'
-      });
-    },
-    //0.全局操作 end ------------------------------------------------------------>
-
-    //1.模块操作 start ------------------------------------------------------------>
-    //1.1 移动模块
-    moveModule(i,moveType){
-      this.$store.commit('template/moveModule',{i:i,moveType:moveType});
-    },
-    //1.2 删除模块
-    deleteModule(i,dataSort){
-      let data = {
-        i:i,
-        dataSort:dataSort
-      }
-      this.$store.commit('template/deleteModule',data);
-    },
-    //1.3 打开弹出框
-    openWindow(item) {
-      this.editModule = item.i;
-      this.windowStatus = true;
-    },
-    //1.4 关闭弹出框
-    closeWindow() {
-      this.windowStatus = false;
-    }
-    //1.模块操作 end ------------------------------------------------------------>
-  },
-  mounted(){
-
-  }
-}
-</script>
-
-<style scoped lang="less">
-  //模块 start------------------------------------------------------------> 
-  .sectorBorder {
-    border: 2px dashed #eee;
-  }
-  .moduleBox {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    justify-content: space-between;
-    box-sizing: border-box;
-    //border: 2px dashed #eee;
-  }
-  .moduleBoxBorder {
-    border: 2px dashed #eee;
-  }
-  //固定的模块
-  .FixedModuleBox {
-    width: 100%;
-    margin-bottom: 20px;
-    //border: 2px dashed #eee;
-  }
-  .FixedModuleBoxBottom {
-    width: 100%;
-  }
-  .FixedMainModuleBox {
-    width: 100%;
-    font-size: 18px;
-    color: #999;
-    text-align: center;
-    img {
-      margin-bottom: 20px;
-    }
-    padding: 100px;
-    //background: #F5F7FB;
-    margin-bottom: 20px;
-  }
-  .FixedMainModuleBoxBorder {
-    border: 2px dashed #eee;
-  }
-  //模块 end------------------------------------------------------------> 
-  //栅格布局 start------------------------------------------------------------> 
-  .grid-item-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #fff;
-    height: 100%;
-    overflow: hidden;
-    position: relative;
-    
-    .grid-tools-menu {
-      position: absolute;
-      top: 0;
-      right: 0;
-      z-index: 99;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      span {
-        width: 38px;
-        height: 38px;
-        line-height: 38px;
-        text-align: center;
-        font-size: 30px;
-        cursor: pointer;
-        color: #999;
-        // display: flex;
-        // align-items: center;
-        // justify-content: center;
-        // cursor: pointer;
-        // margin: 5px;
-        // color: #000;
-        // background: #fff;
-        // border: 1px solid #000;
-        // border-radius: 5px;
-        // width: 24px;
-        // height: 24px;
-        // line-height: 24px;
-        // text-align: center;
-        // font-size: 14px;
-        // transition: all 0.3s;
-        // &:hover {
-        //   color: #fff;
-        //   background: #000;
-        // }
-        transition: all 0.3s;
-        &:hover {
-          color: #333;
-        }
-      }
-    }
-  }
-  .grid-layout {
-    grid-gap: 0;
-    row-gap: 0;
-  }
-  //栅格布局 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>  
-

src/views/template/page/pageList.vue

@@ -0,0 +1,306 @@
+<template>
+  <div>
+    <!-- 1.页头板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <headSector />
+    </div>
+    <!-- 2.导航板块 -->
+    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
+      <menuSector />
+    </div>
+    <!-- 无内容占位符 -->
+    <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.list.length == 0">
+      <img src="@/assets/template/creat.png">
+      <div>请点击一个左侧板块，开始您的网站创建</div>
+    </div>
+    <!--使用gridKey来强制更新视图-->
+    <div id="content">
+      <grid-layout 
+        ref="gridlayout"
+        :layout="this.$store.state.template.pageData.list" 
+        :layout.sync="this.$store.state.template.pageData.list"
+        :col-num="12" 
+        :row-height="rowHeight" 
+        :margin="[0,0]" 
+        :is-draggable="true" 
+        :is-resizable="true" 
+        :key="this.$store.state.template.gridKey
+        ">
+        <grid-item 
+          v-for="(item, index) in this.$store.state.template.pageData.list" 
+          :key="item.i" 
+          :i="item.i" 
+          :x="item.x" 
+          :y="item.y" 
+          :w="item.w" 
+          :h="item.h" 
+          :is-resizable="false">
+          <div class="grid-item-content">
+            <div class="grid-tools-menu" v-if="$store.state.template.previewStatus==false">
+              <!-- 移动板块-->
+              <!-- <span @click="moveModule(item.i,'up')"><i class="el-icon-sort-up"></i></span>
+              <span @click="moveModule(item.i,'down')"><i class="el-icon-sort-down"></i></span> -->
+              <span @click="deleteModule(item.i,item.dataSort)"><i class="el-icon-close"></i></span>
+            </div>
+            <!-- 4.广告模块 -->
+            <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
+              <imgTitleSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 8.双联文章列表模块 -->
+            <div v-if="item.type == 'listSector'" class="moduleBox">
+              <listSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 10.友情链接模块 --> 
+            <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
+              <friendShipLinkSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+            <!-- 11.主文章列表模块 --> 
+            <div v-if="item.type == 'mainListSector'" class="moduleBox">
+              <mainListSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
+          </div>
+        </grid-item>
+      </grid-layout>
+    </div>
+    <div class="FixedModuleBoxBottom">
+      <!-- 3.页尾模块 -->
+      <footerSector />
+    </div>
+  </div>
+</template>
+
+<script>
+//页面公用组件 start------------------------------------------------------------>
+//引入公用样式
+import '@/styles/global.less';
+import {GridLayout, GridItem} from "vue-grid-layout";
+//页面公用组件 end------------------------------------------------------------>
+
+//自助建站组件 start------------------------------------------------------------>
+//style1
+import headSector from '../style/1/sector/1.vue';//顶部
+import menuSector from '../style/1/sector/2.vue';//菜单
+import imgTitleSector from '../style/1/sector/4.vue';//广告
+import bannerSector from '../style/1/sector/5.vue';//焦点图
+import manyPictureSector from '../style/1/sector/6.vue';//多图
+import commentSector from '../style/1/sector/7.vue';//评论
+import listSector from '../style/1/sector/8.vue';//文章列表
+import onlyImgSector from '../style/1/sector/9.vue';//纯图片组合
+import friendShipLinkSector from '../style/1/sector/10.vue';//友情链接
+import footerSector from '../style/1/sector/3.vue';//底部
+import mainListSector from '../style/1/sector/11.vue';//主文章列表
+//自助建站组件 end------------------------------------------------------------>
+
+
+export default {
+  components: {
+    GridLayout,
+    GridItem,
+    //板块组件 style1
+    headSector,
+    menuSector,
+    imgTitleSector,
+    bannerSector,
+    manyPictureSector,
+    commentSector,
+    listSector,
+    mainListSector,
+    onlyImgSector,
+    friendShipLinkSector,
+    footerSector
+  },
+  data() {
+    return {
+      //0.全局配置 start------------------------------------------------------------>
+      windowStatus: false,
+      rowHeight:10,
+      //0.全局配置 end------------------------------------------------------------>
+      //1.编辑模块 start------------------------------------------------------------>
+      formLabelWidth: '120px',
+      editModule: "",//待编辑的模块
+      //1.编辑模块 end------------------------------------------------------------>
+    }
+  },
+  mounted() {
+    //必备操作
+    //1.获得vuex中的鼠标对象
+    let mouseObj = this.$store.state.template.mouseXY;
+    //2.获得gridlayout对象
+    this.$store.commit('template/setGridlayoutObj',this.$refs.gridlayout);
+    //3.监听鼠标按住以后的移动事件
+    document.addEventListener("dragover", function (e,store) {
+      mouseObj.x = e.clientX;
+      mouseObj.y = e.clientY;
+      // mouseXY.x = e.clientX;
+      // mouseXY.y = e.clientY;
+    },false);
+  },
+  methods: {
+    //0.全局操作 start ------------------------------------------------------------>
+    //0.1上一步  
+    goStyle(){
+      this.$router.push({
+        path: '/templateStyle',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    //0.2下一步
+    gotoList(){
+      this.$router.push({
+        path: '/templateList'
+      });
+    },
+    //0.全局操作 end ------------------------------------------------------------>
+
+    //1.模块操作 start ------------------------------------------------------------>
+    //1.1 移动模块
+    moveModule(i,moveType){
+      this.$store.commit('template/moveModule',{i:i,moveType:moveType});
+    },
+    //1.2 删除模块
+    deleteModule(i,dataSort){
+      let data = {
+        i:i,
+        dataSort:dataSort
+      }
+      this.$store.commit('template/deleteModule',data);
+    },
+    //1.3 打开弹出框
+    openWindow(item) {
+      this.editModule = item.i;
+      this.windowStatus = true;
+    },
+    //1.4 关闭弹出框
+    closeWindow() {
+      this.windowStatus = false;
+    }
+    //1.模块操作 end ------------------------------------------------------------>
+  }
+}
+</script>
+
+<style scoped lang="less">
+//拖拽demo
+.droppable-element {
+  width: 150px;
+  text-align: center;
+  background: #fdd;
+  border: 1px solid black;
+  margin: 10px 0;
+  padding: 10px;
+}
+//模块 start------------------------------------------------------------> 
+.sectorBorder {
+  border: 2px dashed #eee;
+}
+.moduleBox {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  justify-content: space-between;
+  box-sizing: border-box;
+  //border: 2px dashed #eee;
+}
+.moduleBoxBorder {
+  border: 2px dashed #eee;
+}
+//固定的模块
+.FixedModuleBox {
+  width: 100%;
+  margin-bottom: 20px;
+  //border: 2px dashed #eee;
+}
+.FixedModuleBoxBottom {
+  width: 100%;
+}
+.FixedMainModuleBox {
+  width: 100%;
+  font-size: 18px;
+  color: #999;
+  text-align: center;
+  img {
+    margin-bottom: 20px;
+  }
+  padding: 100px;
+  //background: #F5F7FB;
+  margin-bottom: 20px;
+}
+.FixedMainModuleBoxBorder {
+  border: 2px dashed #eee;
+}
+//模块 end------------------------------------------------------------> 
+//栅格布局 start------------------------------------------------------------> 
+.grid-item-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  
+  .grid-tools-menu {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    span {
+      width: 38px;
+      height: 38px;
+      line-height: 38px;
+      text-align: center;
+      font-size: 30px;
+      cursor: pointer;
+      color: #999;
+      // display: flex;
+      // align-items: center;
+      // justify-content: center;
+      // cursor: pointer;
+      // margin: 5px;
+      // color: #000;
+      // background: #fff;
+      // border: 1px solid #000;
+      // border-radius: 5px;
+      // width: 24px;
+      // height: 24px;
+      // line-height: 24px;
+      // text-align: center;
+      // font-size: 14px;
+      // transition: all 0.3s;
+      // &:hover {
+      //   color: #fff;
+      //   background: #000;
+      // }
+      transition: all 0.3s;
+      &:hover {
+        color: #333;
+      }
+    }
+  }
+}
+.grid-layout {
+  grid-gap: 0;
+  row-gap: 0;
+}
+//栅格布局 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>

src/views/template/public/componentWindow.vue

@@ -194,6 +194,32 @@
           </table>
         </div>
         <!--9.友情链接组件 end---------------------------------------->
+        <!--10.列表页-主文章列表 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 10" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/list/list3style.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--10.列表页-主文章列表 end---------------------------------------->
+        <!--11.详情页-主文章详情 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 11" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/article/article1style.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--11.详情页-主文章详情 end---------------------------------------->
       </div>
     </div>
     <div class="componentWindowBoxFooter">
@@ -260,8 +286,10 @@ export default {
           margin-right: 10px;
           background: #F5F7FB;
           border:1px solid #F5F7FB;
+          overflow: hidden;
           img {
-            width: 100%;
+            width: 200px;
+            display: block;
           }
           &:hover {
             border:1px solid #19499F;

src/views/template/public/convertBtn.vue

@@ -37,8 +37,12 @@ export default {
         style = this.$store.state.template.pageData.index[this.dataSort].content.componentList[this.sort].component_style;
       }
       if(this.$store.state.template.pageStatus==2){}
-      if(this.$store.state.template.pageStatus==3){}
-      if(this.$store.state.template.pageStatus==4){}
+      if(this.$store.state.template.pageStatus==3){
+        style = this.$store.state.template.pageData.list[this.dataSort].content.componentList[this.sort].component_style;
+      }
+      if(this.$store.state.template.pageStatus==4){
+        style = this.$store.state.template.pageData.article[this.dataSort].content.componentList[this.sort].component_style;
+      }
       if(this.$store.state.template.pageStatus==5){}
       if(this.$store.state.template.pageStatus==6){}
       if(this.$store.state.template.pageStatus==7){}

src/views/template/public/editWindow.vue

@@ -43,6 +43,7 @@
             <div v-if="this.$store.state.template.editComponentType == 6">静态html组件</div>
             <div v-if="this.$store.state.template.editComponentType == 7">文本</div>
             <div v-if="this.$store.state.template.editComponentType == 8">评论组件</div>
+            <div v-if="this.$store.state.template.editComponentType == 9">页面必备组件</div>
           </div>
           <div class="testAssistantContentItem">
             <div>展示条数:</div>
@@ -141,6 +142,14 @@
           </el-form-item>
         </el-form>
       </div>
+      <!--9.页面必备组件-->
+      <div v-if="this.$store.state.template.editComponentType == 9">
+        <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="页面必备组件不支持编辑" disabled/>
+          </el-form-item>
+        </el-form>
+      </div>
     </div>
     <div class="editWindowBoxFooter">
       <el-button type="info" @click="closeEditWindow">取消</el-button>

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

@@ -0,0 +1,85 @@
+<template>
+  <div class="mainAricleTextBox">
+    <div class="mainAricleTextTitle">各地加强部署落实2023年全国农产品质量安全监管工作会议要求</div>
+    <div class="mainArticleMore">
+      <div>来源:农业农村部</div>
+      <div>日期:2025-01-19 20:56</div>
+      <div>浏览次数:347</div>
+    </div>
+    <div class="mainArticleDetails">
+      <div><img src="@/assets/template/component/articleImg.png" /></div>
+      <div>3月21日，2023年全国农产品质量安全监管工作会议在云南昆明召开，马有祥副部长出席并讲话。会后，各地农业农村部门高度重视，迅速行动，结合本地实际扎实推进农产品质量安全各项工作。</div>
+      <div>一、深入学习会议精神，加强工作部署安排。各地农业农村部门迅速传达会议精神，紧盯重点、凝心聚力，强化工作部署。</div>
+      <div>一是及时汇报传达。吉林、河南及时向省政府汇报会议精神，省政府将农产品质量安全监管工作作为重点工作推进。四川、广西、天津等地召开省级监管工作会议，福建、吉林畜牧、内蒙古农牧、大连等地第一时间向负责人呈报会议精神和初步贯彻意见报告，将农产品质量安全工作作为厅重点工作共同推进。</div>
+      <div>二是压实工作责任。上海、山西、北京、青岛等地结合《2023年农产品质量安全监管工作要点》重点任务，形成印发2023年全省(市)农产品质量安全监管工作要点。黑龙江将会议精神及全国各地网格化管理经验材料、典型发言材料汇编印发全省各市县深入学习。辽宁与各市签订2023年农产品质量安全监管工作目标责任状，全面推进农产品质量安全监管工作。</div>
+      <div>三是加强调查研究。广东印发关于开展全省农产品质量安全大调研工作的通知，成立调研工作小组开展农产品质量安全调研指导工作。西藏4月初赴拉萨曲水县开展调研，深入县级监测站、蔬菜种植基地，对豇豆种植管理情况开展专题调研，向群众宣传规范购药、用药知识。</div>
+      <div>二、聚焦重点品种，全力抓好农产品质量安全监管工作。</div>
+      <div>一是集中力量解决豇豆农残问题。各地根据会议精神，加强组织领导，坚持产管并重、疏堵结合，推动豇豆治理工作。海南省政府分管领导亲自挂帅、靠前指挥，组织各市县各市县负责同志深入田间地头召开虹豆现场会，层层压实责任，并推行“防虫网+”种植模式、半定量检测、赋码追溯等措施，加强豇豆上市前和出岛把关。云南、陕西等地成立豇豆领导小组和专家指导专班，突出重点地区、重点时节、重点问题印发分片包抓通知，强化部省市联动，压实属地责任。江西召开全省豇豆农药残留突出问题攻坚治理工作推进视频会议，做到精准指导、精准抽检、精准监管、精准督促。</div>
+      <div>二是持续强化监测预警。各地根据会议精神，印发省级农产品质量安全监测工作通知，明确2023年定量监测总数量不少于1.7批次千人，加强农产品质量安全风险监测结果分析。湖南分解落实定量检测任务14万批次，达到2批次/千人的标准。江苏印发省级农产品质量安全专项风险监测白皮书，并收集了2022年11月-2023年3月全省草莓监测数据，汇总成“草莓质量安全风险提示'</div>
+      <div>三是加大农资打假力度。3月23-24日贵州省农业农村厅、市场监管局、公安厅联合检查黔东南州农资打假整治工作，查获一批问题农资，当地执法部门当场登记查封，立案查处。4月上旬，山西运城开展放心农资下乡进村宣传活动，加强对农民群众的宣传教育和风险提醒，提高识假辨假和依法维权意识。</div>
+      <div>三、提高全民安全意识，推进农产品高质量发展。</div>
+      <div>一是加强法律法规宣传。多地坚持以活动促宣传，推动形成社会共治局面。四川启动开展“百县千乡万户”普法守法安全用药大实训。山东畜牧常态化推进“畜产品质量安全知识进万家”“消费者体验日”“实验室开放日”等活动，正向引导社会工作消费观。</div>
+      <div>二是推动农产品标准化优质化发展。各地根据会议部署安排，用技术标准引领，增加优质农产品供给。河北推进衡沧高品质蔬菜产业示范建设，制定主栽品种全产业链标准体系，围绕饶阳西红柿等10个典型品种，开展品质指标体系构建。甘肃加强与兰州海关协作通过共建农产品质量安全监管体系，推动甘肃省特色优质农产品扩大进出口。</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .mainAricleTextBox {
+    .mainAricleTextTitle {
+      font-size: 24px;
+      color: #333333;
+      padding-bottom: 30px;
+      text-align: center;
+      padding-top: 40px;
+      padding-bottom: 40px;
+    }
+    .mainArticleMore {
+      color: #999;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-bottom: 20px;
+      div {
+        margin-right: 30px;
+      }
+    }
+    .mainArticleDetails {
+      border-top: 1px solid #D9D9D9;
+      padding-top: 40px;
+      div {
+        text-indent: 2em;
+        margin-bottom: 20px;
+        &:last-child{
+          margin-bottom: 0;
+        }
+      }
+      img {
+        display: block;
+        margin: 0 auto;
+        width: 500px;
+        margin-bottom: 40px;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,105 @@
+<template>
+  <div class="NewsListBox">
+    <div class="listMainBox">
+      <div class="listMainTitle">
+        <span>地方动态</span>
+      </div>
+    </div>
+    <div class="NewsPageListBox">
+      <ul>
+        <li><a href="javascript:void">喜报!河池近日，启明创投、中国乡村发展基金会、四川蒙顶山合作社发展培训学院</a></li>
+        <li><a href="javascript:void">[营口]省专家组对我市生猪屠宰企业升级改造进行现场指导</a></li>
+        <li><a href="javascript:void">[辽宁]开启动物疫病防控和检疫工作新篇章——辽宁省动物疫病预防控制中心举行挂</a></li>
+        <li><a href="javascript:void">暖边绿境”共建活动情暖边境职工 在东港五四农场结硕果</a></li>
+        <li><a href="javascript:void">吉林省长春市大田播种陆续展开 粮食作物播种面积稳定在2500万亩</a></li>
+        <li><a href="javascript:void">喜报!河池近日，启明创投、中国乡村发展基金会、四川蒙顶山合作社发展培训学院</a></li>
+        <li><a href="javascript:void">[营口]省专家组对我市生猪屠宰企业升级改造进行现场指导</a></li>
+        <li><a href="javascript:void">[辽宁]开启动物疫病防控和检疫工作新篇章——辽宁省动物疫病预防控制中心举行挂</a></li>
+        <li><a href="javascript:void">暖边绿境”共建活动情暖边境职工 在东港五四农场结硕果</a></li>
+        <li><a href="javascript:void">吉林省长春市大田播种陆续展开 粮食作物播种面积稳定在2500万亩</a></li>
+        <li><a href="javascript:void">喜报!河池近日，启明创投、中国乡村发展基金会、四川蒙顶山合作社发展培训学院</a></li>
+        <li><a href="javascript:void">[营口]省专家组对我市生猪屠宰企业升级改造进行现场指导</a></li>
+        <li><a href="javascript:void">[辽宁]开启动物疫病防控和检疫工作新篇章——辽宁省动物疫病预防控制中心举行挂</a></li>
+        <li><a href="javascript:void">暖边绿境”共建活动情暖边境职工 在东港五四农场结硕果</a></li>
+        <li><a href="javascript:void">吉林省长春市大田播种陆续展开 粮食作物播种面积稳定在2500万亩</a></li>
+      </ul>
+    </div>
+    <div class="paginationBox">
+      <el-pagination
+        background
+        layout="total,prev,pager,next"
+        :total="1000">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .NewsListBox {
+    width: 100%;
+    .listMainBox {
+      padding-top: 20px;
+      margin-bottom: 30px;
+      .listMainTitle {
+        width: 100%;
+        border-bottom: 1px solid #D9D9D9;
+        height: 48px;
+        span {
+          border-bottom: 2px solid #19499F;
+          height: 48px;
+          line-height: 48px;
+          display: inline-block;
+          color: #19499F;
+          font-weight: bold;
+        }
+      }
+    }
+    .NewsPageListBox {
+      ul {
+        padding: 0;
+        margin: 0;
+        li {
+          list-style-type: none;
+          padding-left: 16px;
+          background: url('../../../../../../assets/template/component/listyle.png') no-repeat left center;
+          margin-bottom: 20px;
+        }
+        li:nth-child(5n) {
+          padding-bottom: 30px;
+          margin-bottom: 30px;
+          border-bottom:1px dashed #D9D9D9;
+          background: url('../../../../../../assets/template/component/listyle.png') no-repeat left 7px;
+        }
+        li:nth-child(15) {
+          padding-bottom: 30px;
+          margin-bottom: 30px;
+          border-bottom:0;
+          background: url('../../../../../../assets/template/component/listyle.png') no-repeat left 7px;
+        }
+      }
+    }
+    .paginationBox {
+      text-align: center;
+    }
+  }
+  
+</style>

src/views/template/style/1/sector/10.vue

@@ -3,15 +3,45 @@
     <div :class="['friendShipLinkSectorTitle', {componentBorder: $store.state.template.previewStatus==false}]">
       <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1" :y="y"/>
       <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="2"/>
-      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
-        <title1Style />
+      <!--index页面-->
+      <div v-if="this.$store.state.template.pageStatus == 1">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+          <title1Style />
+        </div>
+      </div>
+      <!--list页面-->
+      <div v-if="this.$store.state.template.pageStatus == 3">
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style == 1">
+          <title1Style />
+        </div>
+      </div>
+      <!--article页面-->
+      <div v-if="this.$store.state.template.pageStatus == 4">
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[0].component_style == 1">
+          <title1Style />
+        </div>
       </div>
     </div>
     <div :class="['friendShipLinkSectorItemBox', {componentBorder: $store.state.template.previewStatus==false}]">
       <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="4" :size="1" :y="y"/>
       <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="9"/>
-      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
-        <link1Style />
+      <!--index页面-->
+      <div v-if="this.$store.state.template.pageStatus == 1">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
+          <link1Style />
+        </div>
+      </div>
+      <!--list页面-->
+      <div v-if="this.$store.state.template.pageStatus == 3">
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[1].component_style == 1">
+          <link1Style />
+        </div>
+      </div>
+      <!--article页面-->
+      <div v-if="this.$store.state.template.pageStatus == 4">
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[1].component_style == 1">
+          <link1Style />
+        </div>
       </div>
     </div>
   </div>

src/views/template/style/1/sector/11.vue

@@ -0,0 +1,63 @@
+<template>
+  <div :class="['listSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+    <div :class="['listSectorMainBox', {componentBorder: $store.state.template.previewStatus==false}]">
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="15" :y="y"/>
+      <convertBtn :id="id" :sort="0" :type="10"/>
+      <list1Style />
+    </div>
+  </div>
+</template>
+
+<script>
+import editBtn from '../../../public/editBtn.vue'
+import convertBtn from '../../../public/convertBtn.vue'
+import list1Style from '../components/mainList/1.vue'
+
+export default {
+  components: {
+    editBtn,
+    convertBtn,
+    list1Style
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    y:{
+      type:Number,
+      default:0
+    },
+    dataSort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .listSectorBox {
+    width: 100%;
+    height: 900px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .componentBorder{
+      border: 2px dashed #999;
+    }
+    .listSectorMainBox {
+      width: 80%;
+      height: 900px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+    }
+  }
+</style>

src/views/template/style/1/sector/12.vue

@@ -0,0 +1,63 @@
+<template>
+  <div :class="['articleSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+    <div :class="['articleSectorMainBox', {componentBorder: $store.state.template.previewStatus==false}]">
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="9" :size="1" :y="y"/>
+      <convertBtn :id="id" :sort="0" :type="11"/>
+      <article1Style />
+    </div>
+  </div>
+</template>
+
+<script>
+import editBtn from '../../../public/editBtn.vue'
+import convertBtn from '../../../public/convertBtn.vue'
+import article1Style from '../components/mainArticle/1.vue'
+
+export default {
+  components: {
+    editBtn,
+    convertBtn,
+    article1Style
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    y:{
+      type:Number,
+      default:0
+    },
+    dataSort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .articleSectorBox {
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .componentBorder{
+      border: 2px dashed #999;
+    }
+    .articleSectorMainBox {
+      width: 80%;
+      height: 1200px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+    }
+  }
+</style>

src/views/template/style/1/sector/4.vue

@@ -3,18 +3,52 @@
     <div class="imgSectorBox">
       <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="3" :size="1" :y="y"/>
       <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="3"/>
-      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
-        <useStyle1 />
+      <!--index页面-->
+      <div v-if="this.$store.state.template.pageStatus == 1">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+          <useStyle1 />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
+          <useStyle2 />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 3">
+          <useStyle3 />
+        </div>
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 4">
+          <useStyle4 />
+        </div>
       </div>
-      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
-        <useStyle2 />
+      <!--list页面-->
+      <div v-if="this.$store.state.template.pageStatus == 3">
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style == 1">
+          <useStyle1 />
+        </div>
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style == 2">
+          <useStyle2 />
+        </div>
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style == 3">
+          <useStyle3 />
+        </div>
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style == 4">
+          <useStyle4 />
+        </div>
       </div>
-      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 3">
-        <useStyle3 />
-      </div>
-      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 4">
-        <useStyle4 />
+      <!--article页面-->
+      <div v-if="this.$store.state.template.pageStatus == 4">
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[0].component_style == 1">
+          <useStyle1 />
+        </div>
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[0].component_style == 2">
+          <useStyle2 />
+        </div>
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[0].component_style == 3">
+          <useStyle3 />
+        </div>
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[0].component_style == 4">
+          <useStyle4 />
+        </div>
       </div>
+
     </div>
   </div>
 </template>

src/views/template/style/1/sector/8.vue

@@ -3,11 +3,27 @@
     <div :class="['listSectorBoxTitle', {componentBorder: $store.state.template.previewStatus==false}]">
       <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1" :y="y"/>
       <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="2"/>
-      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
-        <title1Style />
+      <!--index页面-->
+      <div v-if="this.$store.state.template.pageStatus == 1">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+          <title1Style />
+        </div>
+      </div>
+      <!--list页面-->
+      <div v-if="this.$store.state.template.pageStatus == 3">
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style == 1">
+          <title1Style />
+        </div>
+      </div>
+      <!--article页面-->
+      <div v-if="this.$store.state.template.pageStatus == 4">
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[0].component_style == 1">
+          <title1Style />
+        </div>
       </div>
     </div>
-    <div class="listSectorBoxContent">
+    <!--index页面-->
+    <div class="listSectorBoxContent" v-if="this.$store.state.template.pageStatus == 1">
       <div :class="['listNewsRight', {componentBorder: $store.state.template.previewStatus==false}]">
         <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="5" :y="y"/>
         <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="6"/>
@@ -35,6 +51,64 @@
         </div>
       </div>
     </div>
+    <!--list页面-->
+    <div class="listSectorBoxContent" v-if="this.$store.state.template.pageStatus == 3">
+      <div :class="['listNewsRight', {componentBorder: $store.state.template.previewStatus==false}]">
+        <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="5" :y="y"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="6"/>
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[1].component_style == 1">
+          <list1Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[1].component_style == 2">
+          <list2Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[1].component_style == 3">
+          <list3Style />
+        </div>
+      </div>
+      <div :class="['listNewsRight', {componentBorder: $store.state.template.previewStatus==false}]">
+        <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="1" :size="5" :y="y"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="6"/>
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[2].component_style == 1">
+          <list1Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[2].component_style == 2">
+          <list2Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[2].component_style == 3">
+          <list3Style />
+        </div>
+      </div>
+    </div>
+    <!--article页面-->
+    <div class="listSectorBoxContent" v-if="this.$store.state.template.pageStatus == 4">
+      <div :class="['listNewsRight', {componentBorder: $store.state.template.previewStatus==false}]">
+        <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="5" :y="y"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="6"/>
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[1].component_style == 1">
+          <list1Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[1].component_style == 2">
+          <list2Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[1].component_style == 3">
+          <list3Style />
+        </div>
+      </div>
+      <div :class="['listNewsRight', {componentBorder: $store.state.template.previewStatus==false}]">
+        <editBtn :id="id" :dataSort="dataSort" :sort="2" :type="1" :size="5" :y="y"/>
+        <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="6"/>
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[2].component_style == 1">
+          <list1Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[2].component_style == 2">
+          <list2Style />
+        </div>
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[2].component_style == 3">
+          <list3Style />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 

src/views/template/templateBase.vue

@@ -10,11 +10,12 @@
         <div class="formDiv">
           <el-form-item label="常规模板类型：" :label-width="formLabelWidth" prop="role_id" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-checkbox-group v-model="form.template_base_type">
+              <el-checkbox-group v-model="form.page_type">
                 <el-checkbox label="1" disabled>首页</el-checkbox>
                 <el-checkbox label="2">分类页</el-checkbox>
                 <el-checkbox label="3">列表页</el-checkbox>
                 <el-checkbox label="4">详情页</el-checkbox>
+                <el-checkbox label="5">搜索页</el-checkbox>
               </el-checkbox-group>
             </div>
           </el-form-item>
@@ -22,13 +23,13 @@
             <div class="formLabelFloatBox">
               <div class="labelTitleStyle">
                 单页模板类型：
-                <el-tooltip class="item" effect="dark" content="说明文字" placement="top">
+                <el-tooltip class="item" effect="dark" content="该类型仅供底部导航栏使用" placement="top">
                   <i class="el-icon-question"></i>
                 </el-tooltip>
               </div>
-              <el-checkbox-group v-model="form.template_special_type">
-                <el-checkbox label="1">自定义列表页</el-checkbox>
-                <el-checkbox label="2" disabled>自定义详情页</el-checkbox>
+              <el-checkbox-group v-model="form.page_type">
+                <el-checkbox label="6">自定义列表页</el-checkbox>
+                <el-checkbox label="7" disabled>自定义详情页</el-checkbox>
               </el-checkbox-group>
             </div>
           </el-form-item>
@@ -37,40 +38,36 @@
       <div class="layerBox">
         <tableTitle :name="templateInfoTitle"/>
         <div class="formDiv">
-          <el-form-item label="网站声明：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="网站声明：" :label-width="formLabelWidth" prop="statement" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.statement" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="主办单位：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="主办单位：" :label-width="formLabelWidth" prop="organizer" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.organizer" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="版权信息：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="版权信息：" :label-width="formLabelWidth" prop="copyright_information" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.copyright_information" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="联系电话：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="联系电话：" :label-width="formLabelWidth" prop="contact_number" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.contact_number" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="公司地址：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="公司地址：" :label-width="formLabelWidth" prop="company_address" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.company_address" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="项目LOGO：" class="custom-align-right">
+          <el-form-item label="项目LOGO：" class="custom-align-right" prop="project_logo">
             <div class="uploaderBox">
-              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
-                <!-- <img v-if="imgUrl" :src="imgUrl" class="avatar">
-                <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="projectLogoUpload">
                 <!-- 预览图片 -->
-                <img v-if="form.project_img_src" :src="form.project_img_src" class="avatar">
-                <!-- 上传图标 -->
-                <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                <img v-if="project_logo_src" :src="project_logo_src" class="avatar">
                 <div v-else class="chooseImgDiv">
                   <div>
                     <img src="@/assets/public/upload/noImage.png">
@@ -78,27 +75,24 @@
                   </div>
                 </div>
               </el-upload>
+              <input type="hidden" v-model="form.project_logo">
             </div>
           </el-form-item>
-          <el-form-item label="项目名称：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="项目名称：" :label-width="formLabelWidth" prop="project_name" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.project_name" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="项目网址：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="项目网址：" :label-width="formLabelWidth" prop="project_url" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.project_url" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="公司LOGO：" class="custom-align-right">
+          <el-form-item label="公司LOGO：" class="custom-align-right" prop="company_logo">
             <div class="uploaderBox">
-              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
-                <!-- <img v-if="imgUrl" :src="imgUrl" class="avatar">
-                <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="companyLogoUpload">
                 <!-- 预览图片 -->
-                <img v-if="form.project_img_src" :src="form.project_img_src" class="avatar">
-                <!-- 上传图标 -->
-                <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                <img v-if="company_logo_src" :src="company_logo_src" class="avatar">
                 <div v-else class="chooseImgDiv">
                   <div>
                     <img src="@/assets/public/upload/noImage.png">
@@ -106,36 +100,47 @@
                   </div>
                 </div>
               </el-upload>
+              <input type="hidden" v-model="form.company_logo">
             </div>
           </el-form-item>
-          <el-form-item label="公司名称：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="公司名称：" :label-width="formLabelWidth" prop="company_name" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.company_name" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="公司网址：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="公司网址：" :label-width="formLabelWidth" prop="company_url" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.company_url" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="网站备案号：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="网站备案号：" :label-width="formLabelWidth" prop="icp_number" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.icp_number" placeholder="请输入.."></el-input>
             </div>  
           </el-form-item>
-          <el-form-item label="网安备案号：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="网站备链接：" :label-width="formLabelWidth" prop="icp_number_url" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.icp_number_url" placeholder="请输入.."></el-input>
+            </div>  
+          </el-form-item>
+          <el-form-item label="网安备案号：" :label-width="formLabelWidth" prop="record_number" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input type="text" v-model="form.record_number" placeholder="请输入.."></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="网安备案号链接" :label-width="formLabelWidth" prop="record_number_url" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input type="text" v-model="form.record_number_url" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="客服QQ号1：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="客服QQ号：" :label-width="formLabelWidth" prop="customer_service_qq" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.customer_service_qq" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="客服QQ号2：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="通联QQ号：" :label-width="formLabelWidth" prop="communications" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.communications" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
         </div>
@@ -143,7 +148,8 @@
     </el-form>
     <div class="bottomBtnBox">
       <el-button type="info" @click="goToWebsite">返回</el-button>
-      <el-button type="primary" @click="goToStyle">下一步</el-button>
+      <el-button type="primary" @click="editData" v-if="this.$route.query.step!=undefined">编辑并进入下一步</el-button>
+      <el-button type="primary" @click="addData" v-else>保存并进入下一步</el-button>
     </div>
   </div>
 </template>
@@ -163,13 +169,6 @@ export default {
   },
   data() {
     // 配置验证规则：用于表单验证
-    const validatePassword = (rule, value, callback) => {
-      if (value.length < 6) {
-        callback(new Error('密码不能低于6位！'))
-      } else {
-        callback()
-      }
-    }
     const validateEmpty = (rule,value,callback) => {
       if (value.length == 0) {
         callback(new Error('该项不能为空！'))
@@ -184,14 +183,47 @@ export default {
       formLabelWidth:"120px",
       editId:"",
       form:{
-        template_base_type:["1"],//常规类型
-        template_special_type:["2"],//特殊类型
-        website_statement:"",//网站声明
-        project_img_src:"",
+        website_id:"",//网站id
+        page_type:["1","7"],//页面类型
+        statement:"",//网站声明
+        organizer:"",//主办单位
+        copyright_information:"",//版权信息
+        contact_number:"",//联系电话
+        company_address:"",//公司地址
+        project_logo:"",//项目logo
+        project_name:"",//项目名称
+        project_url:"",//项目网址
+        company_logo:"",//公司logo
+        company_name:"",//公司名称
+        company_url:"",//公司网址
+        icp_number:"",//网站备案号
+        icp_number_url:"",//网站备案号链接
+        record_number:"",//网安备案号
+        record_number_url:"",//网安备案号链接
+        customer_service_qq:"",//客服qq客服
+        communications:"",//通联qq客服
       },
+      project_logo_src:"",//项目logo缩略图
+      company_logo_src:"",//公司logo缩略图
       //配置from表单验证规则
       loginRules: { 
-        website_statement: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        statement: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        organizer: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        copyright_information: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        contact_number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        company_address: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        project_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        project_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        company_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        company_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        icp_number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        record_number: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        icp_number_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        record_number_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        company_logo: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        project_logo: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        customer_service_qq: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        communications: [{ required: true, trigger: 'blur', validator: validateEmpty }],
       }
     };
   },
@@ -200,11 +232,17 @@ export default {
     //上一步
     goToWebsite(){
       this.$router.push({
-        path: '/webSite'
+        path: '/templateList'
       });
     },
     //下一步
     goToStyle(){
+      //先判断表达能否提交
+      this.$refs.form.validate(valid => {
+        if (valid) {
+
+        }
+      })
       this.$router.push({
         path: '/templateStyle',
         query: {
@@ -215,82 +253,154 @@ export default {
     //0.全局操作 end ------------------------------------------------------------>
 
     //1.提交表单 start ------------------------------------------------------------>
-    //提交表单
+    //1.1提交表单
     addData(){
-      console.log(this.form);
-      //1.先验证用户是否已经存在
-      this.$store.dispatch('template/addBasic',this.form).then(res=>{
-        if(res.code==200){
-          this.$message.success('基本信息添加成功！请选择模板风格');
-          //进入下一步
-          this.goToStyle();
+      this.form.website_id = this.$route.query.website_id;
+      //console.log(this.form);
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.$store.dispatch('template/addWebsiteTemplateintel',this.form).then(res=>{
+            if(res.code==200){
+              this.$message.success('网站基本信息保存成功！');
+              //跳转到风格选择页面
+              this.$router.push({
+                path: '/templateStyle',
+                query: {
+                  website_id: this.$route.query.website_id,
+                  step:1
+                }
+              });
+            }else{
+              this.$message.error(res.message);
+            }
+          })
         }
-      }).catch(error=>{
-        this.$message.error('网络错误，请重试！');
       })
     },
-    //提交表单 start ------------------------------------------------------------>
-
-    //2.编辑表单 start ------------------------------------------------------------>
-    //获得用户信息
-    getUserInfo(){
-      this.$store.dispatch('userMember/getUser',{id:this.editId}).then(res=>{
-        console.log(res);
-        //回显数据
-        this.form.type_id = res.data.type_id;
-        this.form.user_name = res.data.user_name;
-        this.form.role_id = res.data.role_id;
-        this.form.real_name = res.data.real_name;
-        this.form.mobile = res.data.mobile;
-        this.form.gender = res.data.gender + "";
-
-      }).catch(error=>{
+    //1.2上传项目logo
+    projectLogoUpload(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isPNG = file.type === 'image/png';
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isJPG && !isPNG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+        return false;
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!');
+        return false;
+      }
+      const formData = new FormData();
+      formData.append('file', file);
+      this.$store.dispatch('pool/uploadFile',formData).then(res=> {
+        this.project_logo_src = res.data.imgUrl;//显示缩略图
+        this.form.project_logo = res.data.imgUrl;//提供表单地址
+        console.log(res.data.imgUrl)
+      }).catch(() => {
         this.$message({
-          type: 'info',
+          type: 'warning',
           message: '网络错误，请重试！'
         });
       })
+      // 阻止默认的上传行为
+      return false;
     },
-    //修改用户
-    editData(){
-      this.$store.dispatch('userMember/verifyUserInfo',{id:this.editId,user_name:this.form.user_name}).then(res=>{
-        if(res.code==0){
-          this.form.id = this.editId;
-          delete this.form.password;
-          delete this.form.confirm_password;
-          //如果code为0表示用户不存在，提交表单
-          this.$store.dispatch('userMember/updateUser',this.form).then(res=>{
-            console.log(res);
-            this.$message({
-              type: 'success',
-              message: '用户添加成功！'
-            });
-            this.goList();
-          })
-        }else if(res.code==200){
-          //如果code==200 表示用户存在，阻止进一步提交
-          this.$message({
-            type: 'warning',
-            message: '该账号已被注册，请更换其他账号！'
-          });
-        }
-      }).catch(error=>{
+    //1.3上传公司logo
+    companyLogoUpload(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isPNG = file.type === 'image/png';
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isJPG && !isPNG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+        return false;
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!');
+        return false;
+      }
+      const formData = new FormData();
+      formData.append('file', file);
+      this.$store.dispatch('pool/uploadFile',formData).then(res=> {
+        this.company_logo_src = res.data.imgUrl;//显示缩略图
+        this.form.company_logo = res.data.imgUrl;//提供表单地址
+        console.log(res.data.imgUrl)
+      }).catch(() => {
         this.$message({
-          type: 'info',
+          type: 'warning',
           message: '网络错误，请重试！'
         });
       })
+      // 阻止默认的上传行为
+      return false;
     },
-    //编辑表单 end ------------------------------------------------------------>
+    //提交表单 start ------------------------------------------------------------>
+
+    //2.编辑表单 start ------------------------------------------------------------>
+    //2.1回显数据
+    getWebsiteBase(website_id){
+      this.$store.dispatch('template/getWebsiteTemplateintel',{website_id:website_id}).then(res=>{
+        if(res.code==200){
+          this.form.website_id = res.data.website_id;//网站id
+          this.form.page_type = res.data.page_type;//页面类型
+          this.form.statement = res.data.statement;//网站声明
+          this.form.organizer = res.data.organizer;//主办单位
+          this.form.copyright_information = res.data.copyright_information;//版权信息
+          this.form.contact_number = res.data.contact_number;//联系电话
+          this.form.company_address = res.data.company_address;//公司地址
+          this.form.project_logo = res.data.project_logo;//项目logo
+          this.project_logo_src = res.data.project_logo;//项目logo缩略图
+          this.form.project_name = res.data.project_name;//项目名称
+          this.form.project_url = res.data.project_url;//项目网址
+          this.form.company_logo = res.data.company_logo;//公司logo
+          this.company_logo_src = res.data.company_logo;//公司logo缩略图
+          this.form.company_name = res.data.company_name;//公司名称
+          this.form.company_url = res.data.company_url;//公司网址
+          this.form.icp_number = res.data.icp_number;//网站备案号
+          this.form.icp_number_url = res.data.icp_number_url;//网站备案号链接
+          this.form.record_number = res.data.record_number;//网安备案号
+          this.form.record_number_url = res.data.record_number_url;//网安备案号链接
+          this.form.customer_service_qq = res.data.customer_service_qq;//客服qq客服
+          this.form.communications = res.data.communications;//通联qq客服
+        }else{
+          this.$message.error(res.message);
+        }
+      })
+    },
+    //2.2提交编辑的数据
+    editData(){
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.$store.dispatch('template/upWebsiteTemplateintel',this.form).then(res=>{
+            if(res.code==200){
+              this.$message.success('网站基本信息编辑成功！');
+              this.$router.push({
+                path: '/templateStyle',
+                query: {
+                  website_id: this.$route.query.website_id,
+                  step:this.$route.query.step
+                }
+              });
+            }else{
+              this.$message.error(res.message);
+            }
+          })
+        }
+      })
+    },
+    //2.编辑表单 end ------------------------------------------------------------>
 
   },
   mounted(){
     //1.展示步骤
     this.$store.commit('template/showStepStatus');
     //2.判断是新建还是回显
-    if(this.$route.query.id!=undefined){
-      this.editId = this.$route.query.id;
+    if(this.$route.query.step!=undefined){
       console.log("编辑模板！")
+      if(this.$route.query.website_id){
+        this.getWebsiteBase(this.$route.query.website_id);
+      }else{
+        this.$message.error("无法编辑，缺少关键参数！");
+      }
     }else{
       console.log("添加模板基本信息！")
     }

src/views/template/templateCreat.vue

@@ -25,6 +25,8 @@
         <div :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 ---------------------------------------->
 
@@ -59,12 +61,16 @@ import componentWindow from './public/componentWindow.vue';
 
 //页面组件 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
   },

src/views/template/templateList.vue

@@ -13,10 +13,10 @@
           <el-col :span="8">
             <div class="searchBox">
               <div class="searchTitle">应用状态：</div>
-              <el-select v-model="getApiData.website_status" placeholder="请选择应用状态..">
-                <el-option label="全部" value="2"></el-option>
-                <el-option label="已应用" value="1"></el-option>
-                <el-option label="未应用" value="0"></el-option>
+              <el-select v-model="getApiData.status" placeholder="请选择应用状态..">
+                <el-option label="未构建" value="0"></el-option>
+                <el-option label="未应用" value="1"></el-option>
+                <el-option label="已应用" value="2"></el-option>
               </el-select>
             </div>
           </el-col>
@@ -36,29 +36,44 @@
       <el-row>
         <template>
           <el-table :data="tableData" style="width: 100%">
-            <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
+            <el-table-column fixed prop="website_id" label="网站id" width="80"></el-table-column>
             <el-table-column prop="website_name" label="网站名称"></el-table-column>
-            <el-table-column prop="template_name" label="风格名称" width="100">
+            <el-table-column prop="name" label="风格名称" width="100">
               <template slot-scope="scope">
-                <div v-if="scope.row.template_name==''"></div>
-                <div v-else>{{scope.row.template_name}}</div>
+                <div v-if="scope.row.name==''||scope.row.name==null">未选择</div>
+                <div v-else>{{scope.row.name}}</div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="page_type" label="模板页面">
+              <template slot-scope="scope">
+                <div v-if="scope.row.page_type==''||scope.row.page_type==null">未选择</div>
+                <div v-else>{{scope.row.page_type}}</div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="created_at" label="创建时间">
+              <template slot-scope="scope">
+                <div v-if="scope.row.created_at==''||scope.row.created_at==null">未创建</div>
+                <div v-else>{{scope.row.created_at}}</div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="updated_at" label="更新时间">
+              <template slot-scope="scope">
+                <div v-if="scope.row.updated_at==''||scope.row.updated_at==null">未更新</div>
+                <div v-else>{{scope.row.updated_at}}</div>
               </template>
             </el-table-column>
-            <el-table-column prop="template_page" label="模板页面"></el-table-column>
-            <el-table-column prop="created_at" label="创建时间"></el-table-column>
-            <el-table-column prop="updated_at" label="更新时间"></el-table-column>
             <el-table-column prop="status" label="状态" width="100">
               <template slot-scope="scope">
-                <div v-if="scope.row.status==0">未构建</div>
-                <div v-if="scope.row.status==1">未应用</div>
-                <div v-if="scope.row.status==2">已应用</div>
+                <div v-if="scope.row.template_status==0">未构建</div>
+                <div v-if="scope.row.template_status==1">未应用</div>
+                <div v-if="scope.row.template_status==2">已应用</div>
               </template>
             </el-table-column>
             <el-table-column fixed="right" label="操作" header-align="center" width="180">
               <template slot-scope="scope">
                 <div class="listBtnBox">
-                  <div class="listEditBtn" @click="getDataMain(scope.row.id)" v-if="scope.row.status==2"><i class="el-icon-edit-outline"></i>编辑</div>
-                  <div class="listSaveBtn" @click="creatWebsite(scope.row.id)" v-if="scope.row.status==0||scope.row.status==1"><i class="el-icon-brush"></i>构建</div>
+                  <div class="listEditBtn" @click="getDataMain(scope.row.website_id,scope.row.action_id)" v-if="scope.row.action_id!=null"><i class="el-icon-edit-outline"></i>编辑</div>
+                  <div class="listSaveBtn" @click="creatWebsite(scope.row.website_id)" v-else><i class="el-icon-brush"></i>构建</div>
                   <div class="listMainBtn"><i class="el-icon-link"></i>应用</div>
                 </div>
               </template>
@@ -97,19 +112,10 @@ export default {
       tableDivTitle:"模板列表",
       useTemplateName:"已选择风格",
       windowStatus:false,//弹出框
-      tableData:[
-        {id:11,website_name:"中国三农市场网",template_name:"",template_page:"",created_at:"",updated_at:"",status:0},
-        {id:11,website_name:"中农兴业网",template_name:"怒火蔓延",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2},
-        {id:11,website_name:"中农兴业市场网",template_name:"毒舌律师",template_page:"首页,分类页,列表页,详情页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
-        {id:11,website_name:"中农兴业网",template_name:"",template_page:"首页,分类页,列表页,详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:0},
-        {id:5,website_name:"金政网",template_name:"存亡之战",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2},
-        {id:6,website_name:"三农资讯网",template_name:"老无所依",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2},
-        {id:7,website_name:"农民网",template_name:"金刚川",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2},
-        {id:8,website_name:"中国三农市场网",template_name:"八佰",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2},
-        {id:9,website_name:"中农兴业网",template_name:"破地狱",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2},
-        {id:10,website_name:"中国金政网",template_name:"慕然回首",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2}
-      ],//内容
-      getApiData:{  
+      tableData:[],//内容
+      getApiData:{
+        website_name:"",
+        status:"",
         page:1,//当前是第几页
         pageSize:10,//一共多少条
       },
@@ -145,66 +151,109 @@ export default {
     //1.请求数据 start ------------------------------------------------------------>
     //1.1 开始请求列表信息方法
     getData(){
-      this.$store.dispatch('pool/getWebList',this.getApiData).then(res=> {
-        let newData = [];
-        for(let item of res.data.rows){
-          if(item.city_name==null){item.city_name="--"}
-          newData.push(item)
+      this.$store.dispatch('template/getWebsiteintel',this.getApiData).then(res=> {
+        if(res.code!=200){
+          this.$message.error(res.message)
+          this.tableData = [];
+          this.page = 1;
+          this.allCount = 0;
+        }else{
+          let newData = [];
+          for (let item of res.data.rows) {
+            if (item.page_type != null) {
+              for (let idx = 0; idx < item.page_type.length; idx++) {
+                if (item.page_type[idx] == "1") {item.page_type[idx] = "首页"}
+                if (item.page_type[idx] == "2") {item.page_type[idx] = "分类页"}
+                if (item.page_type[idx] == "3") {item.page_type[idx] = "列表页"}
+                if (item.page_type[idx] == "4") {item.page_type[idx] = "详情页"}
+                if (item.page_type[idx] == "5") {item.page_type[idx] = "搜索页"}
+                if (item.page_type[idx] == "6") {item.page_type[idx] = "自定义列表页"}
+                if (item.page_type[idx] == "7") {item.page_type[idx] = "自定义详情页"}
+              }
+              // 将数组转换为字符串，并去掉两端的 [ 和 ]
+              item.page_type = item.page_type.join(", ");
+            }
+            newData.push(item);
+          }
+          this.tableData = newData; //给与内容
+          this.allCount = res.data.count; //给与总条数
         }
-        this.tableData = newData; //给与内容
-        this.allCount = res.data.count; //给与总条数
-      }).catch(() => {
-        this.$message({
-          type: 'warning',
-          message: '网络错误，请重试！'
-        });
-      })
-    },
-    
-    //选择风格
-    useIt(id){
-      console.log(id)
-      this.tableData.forEach(item=>{
-        item.status = 0;
       })
-      this.tableData.find(item=>item.id==id).status = 1;
     },
-
-    //1.4 列表内容分页
+    //1.2 列表内容分页
     //直接跳转
     handleSizeChange(val) {
       this.getApiData.page = val;
       this.getData();
     },
-    //1.5 点击分页
+    //1.3 点击分页
     handleCurrentChange(val) {
       this.getApiData.page = val;
       this.getData();
     },
     //列表和分页相关 end ------------------------------------------------------------>
 
+    //2.跳转操作 start ------------------------------------------------------------>
     //构建网站
-    creatWebsite(id){
-      this.$router.push({
-        path: '/templateBase',
-        query: {
-          id: id
+    creatWebsite(website_id){
+      this.$store.dispatch('template/addWebsiteTemplateintel',{website_id:website_id}).then(res=> {
+        if(res.code!=200){
+          this.$message.error(res.message)
+        }else{
+          //可以进入下一步，带着website_id过去
+          this.$router.push({
+            path: '/templateBase',
+            query: {
+              website_id: website_id
+            }
+          });
         }
-      });
+      })
     },
-
     //编辑网站
-    getDataMain(id){
-      this.$router.push({
-        path: '/templateCreat',
-        query: {
-          id: id
-        }
-      });
+    getDataMain(website_id,step){
+      //根据步骤跳转到相应的页面
+      if(step==1){
+        this.$router.push({
+          path: '/templateBase',
+          query: {
+            website_id: website_id,
+            step:step
+          }
+        });
+      }
+      if(step==1){
+        this.$router.push({
+          path: '/templateBase',
+          query: {
+            website_id: website_id,
+            step:step
+          }
+        });
+      }
+      if(step==2){
+        this.$router.push({
+          path: '/templateStyle',
+          query: {
+            website_id: website_id,
+            step:step
+          }
+        });
+      }
+      if(step>2){
+        this.$router.push({
+          path: '/templateCreat',
+          query: {
+            website_id: website_id,
+            step:step
+          }
+        });
+      }
     }
+    //2.跳转操作 end ------------------------------------------------------------>
   },
   mounted(){
-    //this.getData();
+    this.getData();
   }
 }
 </script>

src/views/template/templateStyle.vue

@@ -11,21 +11,18 @@
           <el-col :span="8">
             <div class="searchBox">
               <div class="searchTitle">模板风格</div>
-              <el-select v-model="getApiData.islink" placeholder="请选择..">
-                <el-option label="全部" value="0"></el-option>
-                <el-option label="简约" value="1"></el-option>
-                <el-option label="商务" value="2"></el-option>
-                <el-option label="科技" value="3"></el-option>
-                <el-option label="金融" value="4"></el-option>
-                <el-option label="教育" value="5"></el-option>
-                <el-option label="医疗" value="6"></el-option>
-                <el-option label="政府" value="7"></el-option>
+              <el-select v-model="getApiData.template_class_id" placeholder="请选择..">
+                <el-option
+                  v-for="item in allClass"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
               </el-select>
             </div>
           </el-col>
           <el-col :span="16">
             <div class="searchBtnBox">
-              <el-button @click="clearSearchList">重置</el-button>
               <el-button type="primary" @click="getData('search')">搜索</el-button>
             </div>
           </el-col>
@@ -38,9 +35,9 @@
       <tableTitle :name="tableDivTitle"/>
       <div class="templateStyleBox">
         <div class="templateStyleItem" v-for="(item,index) in tableData" :key="index">
-          <div :class="['templateStyleItemBox',{active:item.status === 1}]" @click="useIt(item.id)">
-            <img :src="item.img">
-            <div class="templateStyleItemTitle">{{item.title}}</div>
+          <div :class="['templateStyleItemBox',{active:item.status === 1}]" @click="useIt(item)">
+            <img :src="item.template_img[0].url">
+            <div class="templateStyleItemTitle">{{item.template_name}}</div>
           </div>
         </div>
       </div>
@@ -51,28 +48,10 @@
     <div class="layerBox">
       <tableTitle :name="useTemplateName"/>
       <div class="thumbnailBox">
-        <div class="thumbnailItem" @click="showImg">
+        <div class="thumbnailItem" @click="showImg(item.url)" v-for="item in userData">
           <div class="thumbnailItemBox">
-            <img src="@/assets/template/style1.png">
-            <div class="thumbnailItemTitle">首页</div>
-          </div>
-        </div>
-        <div class="thumbnailItem">
-          <div class="thumbnailItemBox">
-            <img src="@/assets/template/style1.png">
-            <div class="thumbnailItemTitle">分类页</div>
-          </div>
-        </div>
-        <div class="thumbnailItem">
-          <div class="thumbnailItemBox">
-            <img src="@/assets/template/style1.png">
-            <div class="thumbnailItemTitle">列表页</div>
-          </div>
-        </div>
-        <div class="thumbnailItem">
-          <div class="thumbnailItemBox">
-            <img src="@/assets/template/style1.png">
-            <div class="thumbnailItemTitle">详情页</div>
+            <img :src="item.url">
+            <div class="thumbnailItemTitle">{{item.name}}</div>
           </div>
         </div>
       </div>
@@ -80,21 +59,19 @@
     <!--步骤按钮 start------------------------------------------------------------>
     <div class="btnBox">
       <el-button type="info" @click="goBase">上一步</el-button>
-      <el-button type="primary" @click="goCreat">下一步</el-button>
+      <el-button type="primary" @click="editData" v-if="this.$route.query.step>=2">编辑并进入下一步</el-button>
+      <el-button type="primary" @click="addData" v-else>保存并进入下一步</el-button>
     </div>
     <!--步骤按钮 end------------------------------------------------------------>
     <!--表格内容 end------------------------------------------------------------>
 
-
     <!--弹出框 start------------------------------------------------------------>
     <el-dialog title="模板详情" :visible.sync="windowStatus" :close-on-click-modal="false">
-      <el-form :model="form" ref="form" :rules="formRules" label-position="left">
-        <div class="imgZoomBox">
-          <img src="@/assets/template/style1.png">
-        </div>
-      </el-form>
+      <div class="imgZoomBox">
+        <img :src="classPic">
+      </div>
       <div slot="footer" class="dialog-footer">
-        <div>
+        <div class="alignCenterBox">
           <el-button @click="windowStatus=false">关闭</el-button>
         </div>
       </div>
@@ -122,21 +99,19 @@ export default {
       templateStepTitle:"仅需四步，即可完成模板创建",
       tableDivTitle:"模板列表",
       useTemplateName:"已选择风格",
+      allClass:[],//所有风格
       windowStatus:false,//弹出框
-      tableData:[
-        {id:1,img:require("@/assets/template/style1.png"),title:"廉政风云",status:1},
-        {id:2,img:require("@/assets/template/style2.png"),title:"误判",status:0},
-        {id:3,img:require("@/assets/template/style3.png"),title:"逆转裁判",status:0},
-        {id:4,img:require("@/assets/template/style4.png"),title:"寒战",status:0},
-        {id:5,img:require("@/assets/template/style5.png"),title:"冲锋车",status:0},
-        {id:6,img:require("@/assets/template/style6.png"),title:"无间道",status:0},
-        {id:7,img:require("@/assets/template/style7.png"),title:"机动部队",status:0},
-        {id:8,img:require("@/assets/template/style8.png"),title:"枪火",status:0},
-      ],//内容
-      editId:0,//要修改的网站id
-      getApiData:{
-        
+      classPic:"",//放大缩略图
+      tableData:[],//内容
+      getApiData:{//搜索功能
+        website_id:"",
+        template_class_id:"",
+        page:1,
+        pageSize:10
       },
+      //用户选择的页面模板
+      userData:[],
+      userTemplateId:"",//用户选择的模板风格id
       allCount:0,//总条数
       //分页相关 end ------------------------------------------------------------>
     }
@@ -145,79 +120,92 @@ export default {
     //0.全局操作 start ------------------------------------------------------------>
     //上一步  
     goBase(){
-      this.$router.push({
-        path: '/templateBase',
-        query: {
-          id: this.editId
-        }
-      });
+      //先判断当前的url里面是否存在website_id和step
+      if(this.$route.query.step!=undefined&&this.$route.query.website_id!=undefined){
+        this.$router.push({
+          path: '/templateBase',
+          query: {
+            website_id: this.$route.query.website_id,
+            step:this.$route.query.step
+          }
+        });
+      }else{
+        this.$router.push({
+          path: '/templateBase',
+          query: {
+            website_id: this.$route.query.website_id
+          }
+        });
+      }
     },
     //下一步
-    goCreat(id){
-      let data = {
-        id:id
-      }
+    goCreat(){
       this.$router.push({
         path: '/templateCreat',
         query: {
-          id: this.editId
+          website_id: this.$route.query.website_id
         }
       });
     },
     //放大缩略图
     showImg(img){
       this.windowStatus = true;
+      this.classPic = img;
     },
     //0.全局操作 end ------------------------------------------------------------>
 
-    //1.1 开始请求列表信息方法
+    //1.风格列表 start ------------------------------------------------------------>
+    //1.1 获得所有风格
+    getAllClass(type){
+      this.$store.dispatch('template/getAllTemplateClass',this.getApiData).then(res=> {
+        if(res.code!=200){
+          this.$message.error(res.message)
+        }else{
+          for(let item of res.data){
+            let data = {};
+            data.value = item.id
+            data.label = item.name
+            this.allClass.push(data)
+          }
+        }
+      })
+    },
+    //1.2 获得所有模板
     getData(type){
-      if(type=="search"){
-        this.getApiData.page = 1;
-      }
-      this.$store.dispatch('news/getArticleList',this.getApiData).then(res=> {
-        //格式化：islink=0为不使用外面 islink=1为使用外链
-        //status=1为显示 status=2为不显示
-        let data = [];
-        for(let item of res.data.rows){
-          // if(item.status==0){item.status="隐藏"}
-          // if(item.status==1){item.status="显示"}
-          // if(item.status==404){item.status="已删除"}
-          if(item.islink==0){item.islink="否"}
-          if(item.islink==1){item.islink="是"}
-          data.push(item)
+      this.$store.dispatch('template/getWebsiteTemplateList',this.getApiData).then(res=> {
+        if(res.code != 200){
+          this.$message.error(res.message)
+          //展示数据
+          this.tableData = [];
+          //总条数
+          this.allCount = 0;
+          //还原当前页数
+          this.getApiData.page = 1;
+        }else{
+          for(let item of res.data.rows){
+            item.status = 0;
+          }
+          console.log(res.data.rows)
+          //展示数据
+          this.tableData = res.data.rows;
+          //总条数
+          this.allCount = res.data.count;
+          //判断是否需要回显选择
+          if(this.$route.query.step!=undefined&&this.$route.query.step>=2){
+            this.getUserTemplate();
+          }
         }
-        this.tableData = res.data.rows; //给与内容
-        this.allCount = res.data.count; //给与总条数
-      }).catch(() => {
-        this.$message({
-          type: 'warning',
-          message: '网络错误，请重试！'
-        });
       })
     },
-    
-    //选择风格
-    useIt(id){
-      console.log(id)
-      this.tableData.forEach(item=>{
+    //1.3 选中一个模板
+    useIt(item){
+      for(let item of this.tableData){
         item.status = 0;
-      })
-      this.tableData.find(item=>item.id==id).status = 1;
+      }
+      item.status = 1;
+      this.userData = item.template_img;
+      this.userTemplateId = item.id;
     },
-
-
-
-
-
-
-
-
-
-
-
-
-
     //1.4 列表内容分页
     //直接跳转
     handleSizeChange(val) {
@@ -229,12 +217,94 @@ export default {
       this.getApiData.page = val;
       this.getData();
     },
-    //列表和分页相关 end ------------------------------------------------------------>
+    //1.风格列表 end ------------------------------------------------------------>
+    //2.提交风格模板 start ------------------------------------------------------------>
+    addData(){
+      //2.1 判断是否已经选择了模板
+      console.log(this.userData.length)
+      if(this.userData.length==0){
+        console.log("未选择模板")
+        this.$message.error("必须选择一个模板风格！")
+      }else{
+        let data = {
+          website_id:this.$route.query.website_id,
+          template_id:this.userTemplateId
+        }
+        //console.log(this.userTemplateId)
+        //this.$route.query.website_id
+        this.$store.dispatch('template/addWebsiteTemplateclassintel',data).then(res=> {
+          if(res.code!=200){
+            this.$message.error(res.message)
+          }else{
+            this.$message.success('模板风格保存成功！');
+            //保存模板风格成功,开始构建网站
+            this.$router.push({
+              path: '/templateCreat',
+              query: {
+                website_id: this.$route.query.website_id,
+                step:2
+              }
+            });
+          }
+        })
+      }
+    },
+    //回显数据
+    getUserTemplate(){
+      this.$store.dispatch('template/getWebsiteTemplateclassintel',{website_id:this.$route.query.website_id}).then(res=> {
+        let that = this;
+        if(res.code!=200){
+          this.$message.error(res.message)
+        }else{
+          for(let item of that.tableData){
+            if(item.id == res.data.tid){
+              item.status = 1;
+            }
+          }
+          //给与所选缩略图
+          this.userData = res.data.template_img;
+          //给与所选id
+          this.userTemplateId = res.data.tid;
+        }
+      })
+    },
+    editData(){
+      //编辑的时候就不用判断是否有选中了，因为必定有选中的
+      let data = {
+        website_id:this.$route.query.website_id,
+        template_id:this.userTemplateId
+      }
+      //console.log(this.userTemplateId)
+      //this.$route.query.website_id
+      this.$store.dispatch('template/addWebsiteTemplateclassintel',data).then(res=> {
+        if(res.code!=200){
+          this.$message.error(res.message)
+        }else{
+          this.$message.success('模板风格编辑成功！');
+          //保存模板风格成功,开始构建网站
+          this.$router.push({
+            path: '/templateCreat',
+            query: {
+              website_id: this.$route.query.website_id,
+              step:this.$route.query.step,
+            }
+          });
+        }
+      })
+    }
+    //2.提交风格模板 end ------------------------------------------------------------>
   },
   mounted(){
-    if(this.$route.query.id!=undefined){
-      this.editId = this.$route.query.id;
+    //给与网站id
+    this.getApiData.website_id = this.$route.query.website_id;
+    //获取所有风格
+    this.getAllClass();
+    //获取所有模板
+    this.getData();
+    
+    if(this.$route.query.step!=undefined&&this.$route.query.step>=2){
       console.log("编辑风格！")
+      //this.getUserTemplate();
     }else{
       console.log("选择风格！")
     }
@@ -269,6 +339,7 @@ export default {
       .thumbnailItemBox {
         background: #ECEFFD;
         border-radius: 10px;
+        padding: 10px;
         position: relative;
         cursor: pointer;
         .thumbnailItemTitle {
@@ -285,7 +356,9 @@ export default {
       }
     }
     img {
-      height: 180px;
+      width: 140px;
+      height: 140px;
+      display: block;
     }
   }
   .templateStyleBox {
@@ -303,7 +376,7 @@ export default {
       .templateStyleItemBox {
         background: #fff;
         border-radius: 10px;
-        padding-top: 10px;
+        padding:20px 20px 0 20px;
         border-top: 5px solid #E9EDF7;
         border-bottom: 5px solid #E9EDF7;
         border-left: 1px solid #E9EDF7;
@@ -328,7 +401,8 @@ export default {
         padding: 10px 0;
       }
       img {
-        width: 100%;
+        width: 200px;
+        height: 340px;
       }
     }
   }
@@ -337,5 +411,8 @@ export default {
       width: 100%;
     }
   }
+  .alignCenterBox {
+    text-align: center;
+  }
 </style>