Merge branch 'pre' of http://git.bjzxtw.org.cn:3000/zxt/admin_home into pre

src/api/cms.js

@@ -5,7 +5,7 @@ import request from '@/utils/request'
 //1.1 获取网站基本信息
 export function getSiteInfo(data) {
   return request({
-    url: 'web/getSiteInfo',
+    url: '/web/getSiteInfo',
     method: 'post',
     data
   })

src/api/company.js

@@ -0,0 +1,57 @@
+// 企业管理
+import request from '@/utils/request'
+
+//获取企业列表
+export const getCompanyList = (params) => {
+    return request({
+        url: '/public/getCompanyList',
+        method: 'get',
+        params
+    })
+}
+
+//新增企业
+export const addCompany = (data) => {
+    return request({
+        url: '/public/addCompany',
+        method: 'post',
+        data
+    })
+}
+
+//删除企业
+export const delCompany = (data) => {
+    return request({
+        url: '/public/delCompany',
+        method: 'post',
+        data
+    })
+}
+
+//编辑企业
+export const upCompany = (data) => {
+    return request({
+        url: '/public/upCompany',
+        method: 'post',
+        data
+    })
+}
+
+//审核企业
+export const checkCompany = (data) => {
+    return request({
+        url: '/public/checkCompany',
+        method: 'post',
+        data
+    })
+}
+
+//企业详情
+export const getCompanyInfo = (params) => {
+    return request({
+        url: '/public/getCompanyInfo',
+        method: 'get',
+        params
+    })
+}
+

src/api/genre.js

@@ -0,0 +1,96 @@
+// 最新-自助建站
+
+import request from '@/utils/request'
+// 风格管理  start------------------------------------------------------------
+
+//获取风格列表
+export function getTemplateClassList(params) {
+    return request({
+        url: '/public/getTemplateClassList',
+        method: 'get',
+        params
+    })
+}
+//新增风格
+export function addTemplateClass(data) {
+    return request({
+        url: '/public/addTemplateClass',
+        method: 'post',
+        data
+    })
+}
+//更新风格
+export function upTemplateClass(data) {
+    return request({
+        url: '/public/upTemplateClass',
+        method: 'post',
+        data
+    })
+}
+//删除风格
+export function delTemplateClass(data) {
+    return request({
+        url: '/public/delTemplateClass',
+        method: 'post',
+        data
+    })
+}
+// 风格管理  end------------------------------------------------------------
+
+
+// 皮肤管理  start------------------------------------------------------------
+
+//获取风格名称
+export const getTemplateClass=(data)=>{
+    return request({
+        url:'/public/getTemplateClass',
+        method:'post',
+        data
+    })
+}
+
+//获取皮肤列表
+export const getTemplateList = (data) => {
+    return request({
+        url: '/public/getTemplateList',
+        method: 'post',
+        data
+    })
+}
+
+//新增皮肤
+export const addTemplate = (data) => {
+    return request({
+        url: '/public/addTemplate',
+        method: 'post',
+        data
+    })
+}
+
+//删除皮肤
+export const delTemplate=(data)=>{
+    return request({
+        url:'/public/delTemplate',
+        method:'post',
+        data
+    })
+}
+
+//更新皮肤
+export const updateTemplate = (data) => {
+    return request({
+        url: '/public/updateTemplate',
+        method: 'post',
+        data
+    })
+}
+
+//获取皮肤详情
+export const getTemplateInfo=(data)=>{
+    return request({
+        url:'/public/getTemplateInfo',
+        method:'post',
+        data
+    })
+}
+// 皮肤管理  end------------------------------------------------------------

src/api/module.js

@@ -44,4 +44,39 @@ export const getComponentInfo = (data) => {
         method: 'post',
         data
     })
-}
+}
+
+// -------------自助建站-*-静态资源管理-----fr------start
+//获取静态资源列表
+export const getStaticResourceList = (params) => {
+    return request({
+        url: '/website/getStaticResourceList',
+        method: 'get',
+        params
+    })
+}
+//添加静态资源
+export const addStaticResource = (data) => {
+    return request({
+        url: '/website/addStaticResource',
+        method: 'post',
+        data
+    })
+}
+//删除静态资源
+export const delStaticResource = (data) => {
+    return request({
+        url: '/website/delStaticResource',
+        method: 'post',
+        data
+    })
+}
+//修改静态资源
+export const upStaticResource = (data) => {
+    return request({
+        url: '/website/upStaticResource',
+        method: 'post',
+        data
+    })
+}
+// -------------自助建站-*-静态资源管理-----fr------end

src/api/pool.js

@@ -378,3 +378,12 @@ export function getWebFootInfo(params) {
 }
 
 //关联导航池 end ------------------------------------->
+
+export function cloneWebsite(data) {
+  return request({
+    url: '/website/cloneWebsite',
+    method: 'post',
+    data
+  })
+}
+

src/api/router.js

@@ -0,0 +1,45 @@
+// 路由白名单
+import request from '@/utils/request'
+
+//路由白名单列表
+export const getWhiteRouterList = (params) => {
+  return request({
+    url: '/website/getWhiteRouterList',
+    method: 'get',
+    params
+  })
+}
+// 创建路由白名单
+export const addWhiteRouter = (data) => {
+  return request({
+    url: '/website/addWhiteRouter',
+    method: 'post',
+    data
+  })
+}
+
+// 删除路由白名单
+export const delWhiteRouter = (data) => {
+  return request({
+    url: '/website/delWhiteRouter',
+    method: 'post',
+    data
+  })
+}
+
+//更新路由白名单
+export const upWhiteRouter = (data) => {
+  return request({
+    url: '/website/upWhiteRouter',    
+    method: 'post',    
+    data  
+  })
+} 
+//获取路由白名单详情
+export const getWhiteRouterInfo = (params) => {
+  return request({
+    url: '/website/getWhiteRouterInfo',
+    method: 'get',
+    params
+  })
+} 

src/api/size.js

@@ -0,0 +1,49 @@
+// 组件
+import request from '@/utils/request'
+
+//获取尺寸列表
+export const getSizeList = (params) => {
+    return request({
+        url: '/website/getSizeList',
+        method: 'get',
+        params,
+        
+    })
+    console.log("-----------------------",params) // 打印响应数据，以便检查是否正确获取到了用户信息
+}
+
+//新增尺寸
+export const addSize = (data) => {
+    return request({
+        url: '/website/addSize',
+        method: 'post',
+        data
+    })
+}
+
+//编辑尺寸
+export const upSize = (data) => {
+    return request({
+        url: '/website/upSize',
+        method: 'post',
+        data
+    })
+}
+
+//删除尺寸
+export const delSize = (data) => {
+    return request({
+        url: '/website/delSize',
+        method: 'post',
+        data
+    })
+}
+
+//获取尺寸详情
+export const getSizeInfo = (params) => {
+    return request({
+        url: '/website/getSizeInfo',
+        method: 'get',
+        params
+    })
+}

src/api/style.js

@@ -1,4 +1,4 @@
-// 风格
+// 皮肤
 import request from '@/utils/request'
 
 //获取风格名称
@@ -10,7 +10,7 @@ export const getTemplateClass=(data)=>{
     })
 }
 
-//获取风格列表
+//获取皮肤列表
 export const getTemplateList = (data) => {
     return request({
         url: '/public/getTemplateList',
@@ -19,7 +19,7 @@ export const getTemplateList = (data) => {
     })
 }
 
-//新增风格
+//新增皮肤
 export const addTemplate = (data) => {
     return request({
         url: '/public/addTemplate',
@@ -28,7 +28,7 @@ export const addTemplate = (data) => {
     })
 }
 
-//删除风格
+//删除皮肤
 export const delTemplate=(data)=>{
     return request({
         url:'/public/delTemplate',
@@ -37,7 +37,7 @@ export const delTemplate=(data)=>{
     })
 }
 
-//更新风格
+//更新皮肤
 export const updateTemplate = (data) => {
     return request({
         url: '/public/updateTemplate',
@@ -46,7 +46,7 @@ export const updateTemplate = (data) => {
     })
 }
 
-//获取风格详情
+//获取皮肤详情
 export const getTemplateInfo=(data)=>{
     return request({
         url:'/public/getTemplateInfo',

src/api/template.js

@@ -21,11 +21,11 @@ export function addWebsiteTemplateintel(data) {
 }
 
 //1.3 获取网站基本信息
-export function getWebsiteTemplateintel(data) {
+export function getAdminSiteInfo(params) {
   return request({
-    url: '/website/getWebsiteTemplateintel',
-    method: 'post',
-    data
+    url: '/web/getAdminSiteInfo',
+    method: 'get',
+    params
   })
 }
 
@@ -118,4 +118,23 @@ export function sectorComponentList(params) {
     params
   })
 }
+
+//1.14 获得底部信息
+export function getAdminWebsiteFootAll(params) {
+    return request({
+        url: '/web/getAdminWebsiteFootAll',
+        method: 'get',
+        params
+    })
+}
+
+//1.15 批量添加导航
+export function addTwinAdPlace(data) {
+    return request({
+        url: '/ad/addTwinAdPlace',
+        method: 'post',
+        data
+    })
+}
+
 //自助建站 end ------------------------------------->

src/layout/components/Navbar.vue

@@ -35,24 +35,33 @@
                 <span class="noticeMessageNew" v-if="msg.good.length > 0"></span>
               </div>
             </div>
-            <div :class="{ 'noticeTabs': true, 'active': tabsIndex == 3 }" @click="changeTabs(3)">
-
+            <div :class="{ 'noticeTabs': true, 'active': tabsIndex == 4 }" @click="changeTabs(4)">
               <div class="noticeTabsItem">
-                求职招聘
-                <span class="noticeMessageNew"></span>
+                书刊
+                <span class="noticeMessageNew" v-if="msg.book.length > 0"></span>
               </div>
             </div>
-
-            <div :class="{ 'noticeTabs': true, 'active': tabsIndex == 4 }" @click="changeTabs(4)">
+            <div :class="{ 'noticeTabs': true, 'active': tabsIndex == 3 }" @click="changeTabs(3)">
               <div class="noticeTabsItem">
-                书刊
-                <span class="noticeMessageNew"></span>
+                求职招聘
+                <span class="noticeMessageNew"
+                  v-if="msg.job_hunting.length > 0 || msg.job_recruiting.length > 0 || msg.job_apply.length > 0 || msg.job_resume.length > 0">
+                </span>
               </div>
             </div>
           </div>
           <div class="noticeTabsLine" v-if="tabsIndex == 3" style="height: 20px; margin: 0px; margin-top: -20px;">
             <ul class="noticeTabsLink">
-              <li v-if="qiu" @click="changeJob(1)">求职
+              <li v-if="userType == 1">
+                求职
+              </li>
+              <li v-if="userType == 3">
+                招聘
+              </li>
+            </ul>
+            <ul class="noticeTabsLink" v-if="userType == 10000">
+              <li v-if="qiu" @click="changeJob(1)">
+                求职
                 <img src="@/assets/public/nav/arrowDown.png" class="arrowDown" />
               </li>
               <li v-if="zhao" @click="changeJob(2)">
@@ -62,16 +71,18 @@
             </ul>
           </div>
           <div class="noticeTabsLinkLine">
-            <div v-if="userType == 10000">
+            <div v-if="userType == 10000 || userType == 1 || userType == 3">
               <div v-if="tabsIndex == 1" @click="goToPath(1, 0)">待审核列表</div>
               <div v-if="tabsIndex == 2" @click="goToPath(2, 0)">待审核列表</div>
-              <div class="qiuFlex" v-if="tabsIndex == 3 && qiu == true" @click="goToPath(3, 0)">
+              <div class="qiuFlex" v-if="tabsIndex == 3 && qiu == true && (userType == 10000 || userType == 1)"
+                @click="goToPath(3, 0)">
                 <span :class="{ 'qiuPillow': true, 'qiuPillowHover': qiu1 == true }" @mouseover="handleQiu(1)"
                   @click="goToPath(3.1, 0)">待审核列表</span>
                 <span :class="{ 'qiuPillow': true, 'qiuPillowHover': qiu2 == true }" @mouseover="handleQiu(2)"
                   @click="goToPath(3.2, 0)">职场机会</span>
               </div>
-              <div class="qiuFlex" v-if="tabsIndex == 3 && zhao == true">
+              <div class="qiuFlex" v-if="tabsIndex == 3 && zhao == true && (userType == 10000 || userType == 3)"
+                @click="goToPath(3, 0)">
                 <span :class="{ 'qiuPillow': true, 'qiuPillowHover': zhao1 == true }" @mouseover="handleQiu(3)"
                   @click="goToPath(3.3, 0)">待审核列表</span>
                 <span :class="{ 'qiuPillow': true, 'qiuPillowHover': zhao2 == true }" @mouseover="handleQiu(4)"
@@ -130,7 +141,7 @@
             </div>
           </div>
           <!-- 求职信息  待审核 -->
-          <div class="noticeTabsDataBox" v-if="tabsIndex == 3 && qiu == true && qiu1 == true">
+          <div class="noticeTabsDataBox" v-if="tabsIndex == 3 && qiu == true && qiu1 == true && userType == 10000">
             <div v-if="msg.job_hunting && msg.job_hunting.length > 0">
               <div class="noticeTabsDataItem" v-for="item in msg.job_hunting" :key="item.id"
                 @click="goToPath(3.1, item.id)">
@@ -155,7 +166,7 @@
           </div>
 
           <!-- 求职信息  职场机会 -->
-          <div class="noticeTabsDataBox" v-if="tabsIndex == 3 && qiu == true && qiu2 == true">
+          <div class="noticeTabsDataBox" v-if="tabsIndex == 3 && qiu == true && qiu2 == true && userType == 10000">
             <div v-if="msg.job_apply && msg.job_apply.length > 0">
               <div class="noticeTabsDataItem" v-for="item in msg.job_apply" :key="item.id"
                 @click="goToPath(3.2, item.recruit_id)">
@@ -182,7 +193,7 @@
           </div>
 
           <!-- 招聘信息  招聘信息  job_recruiting -->
-          <div class="noticeTabsDataBox" v-if="tabsIndex == 3 && zhao == true && zhao1 == true">
+          <div class="noticeTabsDataBox" v-if="tabsIndex == 3 && zhao == true && zhao1 == true && userType == 10000">
             <div v-if="msg.job_recruiting && msg.job_recruiting.length > 0">
               <div class="noticeTabsDataItem" v-for="item in msg.job_recruiting" :key="item.id"
                 @click="goToPath(3.3, item.id)">
@@ -208,10 +219,115 @@
             </div>
           </div>
 
+          <!-- 招聘信息  人才库   job_apply -->
+          <div class="noticeTabsDataBox" v-if="tabsIndex == 3 && zhao == true && zhao2 == true && userType == 10000">
+            <div v-if="msg.job_apply && msg.job_apply.length > 0">
+              <div class="noticeTabsDataItem" v-for="item in msg.job_apply" :key="item.id"
+                @click="goToPath(3.4, item.hunt_id)">
+                <!-- 人才库 job_apply -->
+                <div class="noticeTabsDataItemImg newsIcon">
+                  <img src="@/assets/public/nav/message-news.png">
+                </div>
+                <div class="noticeTabsDataItemContent">
 
+                  <div class="noticeNewsTitle">{{ item.user_name + ': 求职了' + '-' + item.business_name +
+                    '-' +
+                    item.job_name }}</div>
+                  <div class="noticeNewsTime">{{ item.updated_at }}</div>
+                </div>
+              </div>
+            </div>
+            <div v-else class="noticeTabsDataItemEmpty">
+              <div class="noticeEmpty">
+                <img src="@/assets/public/nav/message-empty.png">
+              </div>
+              <div class="noticeEmptyText">
+                暂无消息
+              </div>
+            </div>
+          </div>
+
+          <!-- 求职信息  待审核 -->
+          <div class="noticeTabsDataBox" v-if="tabsIndex == 3 && qiu == true && qiu1 == true && userType == 1">
+            <div v-if="msg.job_hunting && msg.job_hunting.length > 0">
+              <div class="noticeTabsDataItem" v-for="item in msg.job_hunting" :key="item.id"
+                @click="goToPath(3.1, item.id)">
+                <!-- 待审核求职 -->
+                <div class="noticeTabsDataItemImg newsIcon">
+                  <img src="@/assets/public/nav/message-news.png">
+                </div>
+                <div class="noticeTabsDataItemContent">
+                  <div class="noticeNewsTitle">{{ item.user_name + ':' + item.website_name + '-' + '发布求职信息了' }}</div>
+                  <div class="noticeNewsTime">{{ item.updated_at }}</div>
+                </div>
+              </div>
+            </div>
+            <div v-else class="noticeTabsDataItemEmpty">
+              <div class="noticeEmpty">
+                <img src="@/assets/public/nav/message-empty.png">
+              </div>
+              <div class="noticeEmptyText">
+                暂无消息
+              </div>
+            </div>
+          </div>
+
+          <!-- 求职信息  职场机会 -->
+          <div class="noticeTabsDataBox" v-if="tabsIndex == 3 && qiu == true && qiu2 == true && userType == 1">
+            <div v-if="msg.job_apply && msg.job_apply.length > 0">
+              <div class="noticeTabsDataItem" v-for="item in msg.job_apply" :key="item.id"
+                @click="goToPath(3.2, item.recruit_id)">
+
+                <div class="noticeTabsDataItemImg newsIcon">
+                  <img src="@/assets/public/nav/message-news.png">
+                </div>
+                <div class="noticeTabsDataItemContent">
+                  <div class="noticeNewsTitle">{{ item.business_name + ':' + item.website_name + ' ' + '关注了' +
+                    item.user_name
+                    + '的简历' }}</div>
+                  <div class="noticeNewsTime">{{ item.updated_at }}</div>
+                </div>
+              </div>
+            </div>
+            <div v-else class="noticeTabsDataItemEmpty">
+              <div class="noticeEmpty">
+                <img src="@/assets/public/nav/message-empty.png">
+              </div>
+              <div class="noticeEmptyText">
+                暂无消息
+              </div>
+            </div>
+          </div>
+
+          <!-- 招聘信息  招聘信息  job_recruiting -->
+          <div class="noticeTabsDataBox" v-if="tabsIndex == 3 && zhao == true && zhao1 == true && userType == 3">
+            <div v-if="msg.job_recruiting && msg.job_recruiting.length > 0">
+              <div class="noticeTabsDataItem" v-for="item in msg.job_recruiting" :key="item.id"
+                @click="goToPath(3.3, item.id)">
+                <!-- 招聘信息 job_recruiting -->
+                <div class="noticeTabsDataItemImg newsIcon">
+                  <img src="@/assets/public/nav/message-news.png">
+                </div>
+                <div class="noticeTabsDataItemContent">
+                  <div class="noticeNewsTitle">{{ item.user_name + ':' + item.website_name + ' ' + '-' + item.title
+                    + '岗位' }}
+                  </div>
+                  <div class="noticeNewsTime">{{ item.updated_at }}</div>
+                </div>
+              </div>
+            </div>
+            <div v-else class="noticeTabsDataItemEmpty">
+              <div class="noticeEmpty">
+                <img src="@/assets/public/nav/message-empty.png">
+              </div>
+              <div class="noticeEmptyText">
+                暂无消息
+              </div>
+            </div>
+          </div>
 
           <!-- 招聘信息  人才库   job_apply -->
-          <div class="noticeTabsDataBox" v-if="tabsIndex == 3 && zhao == true && zhao2 == true">
+          <div class="noticeTabsDataBox" v-if="tabsIndex == 3 && zhao == true && zhao2 == true && userType == 3">
             <div v-if="msg.job_apply && msg.job_apply.length > 0">
               <div class="noticeTabsDataItem" v-for="item in msg.job_apply" :key="item.id"
                 @click="goToPath(3.4, item.hunt_id)">
@@ -343,7 +459,7 @@ export default {
       qiu1: true,
       qiu2: false,
       zhao1: true,
-      zhao2: false
+      zhao2: false,
     }
   },
   computed: {
@@ -357,6 +473,9 @@ export default {
     this.getMsg();
     //获得用户类型
     this.userType = getUseType();
+    if (this.userType == 1) {
+      this.qiu = true;
+    }
 
     // 添加点击事件监听器
     document.addEventListener('click', this.handleClickOutside);
@@ -426,9 +545,9 @@ export default {
     //2.1 获取通知消息列表
     getMsg() {
       this.$store.dispatch('news/getMSG').then(response => {
-        console.log(response);
+        console.log('response1111111111', response);
         this.msg = response.data;
-        console.log(this.msg);
+        // console.log(this.msg);
       }).catch(error => {
         console.log(error);
       });
@@ -860,6 +979,7 @@ export default {
 }
 
 .noticeTabsLink {
+  padding-left: 10px;
   //  去掉圆点
   list-style: none;
 }

src/layout/components/template/componentMenu.vue

@@ -2,12 +2,12 @@
   <div class="componentMenuBox" id="componentMenuBox">
     <div class="componentMenuTitle">
       <div v-if="this.$store.state.template.pageStatus == 1">首页可选板块：</div>
-      <div v-if="this.$store.state.template.pageStatus == 2">分类页可选板块：</div>
+      <div v-if="this.$store.state.template.pageStatus == 2">频道页可选板块：</div>
       <div v-if="this.$store.state.template.pageStatus == 3">列表页可选板块：</div>
       <div v-if="this.$store.state.template.pageStatus == 4">详情页可选板块：</div>
       <div v-if="this.$store.state.template.pageStatus == 5">搜索页可选板块：</div>
-      <div v-if="this.$store.state.template.pageStatus == 6">自定义列表页可选板块：</div>
-      <div v-if="this.$store.state.template.pageStatus == 7">自定义详情页可选板块：</div>
+      <div v-if="this.$store.state.template.pageStatus == 6">底部列表页可选板块：</div>
+      <div v-if="this.$store.state.template.pageStatus == 7">底部详情页可选板块：</div>
     </div>
     <div>
       <el-scrollbar wrap-class="scrollbar-wrapper">
@@ -72,7 +72,7 @@ export default {
       height: 100%;
     }
     .el-scrollbar {
-      height: calc(100vh - 100px);
+      height: calc(100vh - 60px);
     }
     .componentMenuTitle {
       padding: 37px 0 30px 0;

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

@@ -1,8 +1,8 @@
 <template>
   <div class="sectorBox">
-    <div class="sectorItemBox" @click="addModule('imgTitleSector',8,imgTitleSector)" @drag="drag('imgTitleSector',8,imgTitleSector)" @dragend="dragend('imgTitleSector',8,imgTitleSector)" >
+    <div class="sectorItemBox" @click="addModule('adSector',8,adSector)" @drag="drag('adSector',8,adSector)" @dragend="dragend('adSector',8,adSector)" >
       <div class="sectorItem">
-        <img src="@/assets/template/sector/imgTitleSector.png"/>
+        <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" />
       </div>
       <div class="sectorItemTitle">通栏广告</div>
     </div>
@@ -38,8 +38,8 @@ export default {
   data() {
     return {
       //添加通栏广告模块 start---------------------------------------->
-      imgTitleSector:{
-        sectorName:"imgTitleSector",//板块名称
+      adSector:{
+        sectorName:"adSector",//板块名称
         componentList:[
           {
             component_type:3,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论

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

@@ -1,407 +1,588 @@
 <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 class="sectorBox">
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('adSector', 12, adSector)"
+            @drag="drag('adSector', 12, adSector)" 
+            @dragend="dragend('adSector', 12, adSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" />
+            </div>
+            <div class="sectorItemTitle">通栏广告</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('headLineSector', 17, headLineSector)" 
+            @drag="drag('headLineSector', 17, headLineSector)"
+            @dragend="dragend('headLineSector', 17, headLineSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748914467583559.png" />
+            </div>
+            <div class="sectorItemTitle">网站头条</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('bannerSector', 44, bannerSector)"
+            @drag="drag('bannerSector', 44, bannerSector)" 
+            @dragend="dragend('bannerSector', 44, bannerSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/174899892158949.png" />
+            </div>
+            <div class="sectorItemTitle">焦点图</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('manyPictureSector', 47, manyPictureSector)"
+            @drag="drag('manyPictureSector', 47, manyPictureSector)"
+            @dragend="dragend('manyPictureSector', 47, manyPictureSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749085058737998.jpg" />
+            </div>
+            <div class="sectorItemTitle">新闻图文组合1</div>
+        </div>
+        <div 
+            class="sectorItemBox"
+            @click="addModule('commentSector', 47, commentSector)"
+            @drag="drag('commentSector', 47, commentSector)" 
+            @dragend="dragend('commentSector', 47, commentSector)">
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749170683104422.jpg" />
+            </div>
+            <div class="sectorItemTitle">新闻图文组合2</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('listSector', 98, listSector)"
+            @drag="drag('listSector', 98, listSector)" 
+            @dragend="dragend('listSector', 98, listSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749200397579402.jpg" />
+            </div>
+            <div class="sectorItemTitle">新闻图文组合3</div>
+        </div>
+        <div 
+            class="sectorItemBox" 
+            @click="addModule('onlyImgSector', 51, onlyImgSector)"
+            @drag="drag('onlyImgSector', 51, onlyImgSector)" 
+            @dragend="dragend('onlyImgSector', 51, onlyImgSector)"
+        >
+            <div class="sectorItem">
+                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749451127220319.jpg" />
+            </div>
+            <div class="sectorItemTitle">带广告新闻组合</div>
+        </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="sectorItem">
-        <img src="@/assets/template/sector/commentSector.png"/>
-      </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>
-    <div class="sectorItemBox" @click="addModule('friendShipLinkSector',20,friendShipLinkSector)" @drag="drag('friendShipLinkSector',20,friendShipLinkSector)" @dragend="dragend('friendShipLinkSector',20,friendShipLinkSector)" >
-      <div class="sectorItem">
-        <img src="@/assets/template/sector/linkSector.png"/>
-      </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>
 
 <script>
 
 export default {
-  props: {
-    type: {
-     
+    props: {
+        type: {
+
+        },
     },
-  },
-  data() {
-    return {
-      //添加通栏广告模块 start---------------------------------------->
-      imgTitleSector:{
-        sectorName:"imgTitleSector",//板块名称
-        componentList:[
-          {
-            component_type:3,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"",
-            sort:1,
-            componentData:{
-              ad_id:"",//广告位id
-              text:"通栏广告", //广告位名称
-              width:1200, //广告位宽度
-              height:60, //广告位高度
-            }//该组件不请求指定类型的数据，但是后端需要返回imgUrl
-          }
-        ]
-      },
-      //添加通栏广告模块 start---------------------------------------->
+    data() {
+        return {
+            //模块1通栏广告模块 start---------------------------------------->
+            adSector: {
+                "sectorName": "adSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 2,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 
+                        "component_style": 1,//组件选择了哪个版式
+                        "sort": 1,
+                        "componentData": {}
+                    }
+                ],
+                "ad": {
+                    "width": 1200, //宽度
+                    "height": 90, //高度
+                    "name": "",//广告名称
+                    "price": 0,//价格
+                    "introduce":"",//介绍
+                    "website_id": "",//网站id
+                    "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
+                    "typeid": 2,//广告类型 - 2 图片
+                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+                }
+            },
+            //添加通栏广告模块 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---------------------------------------->
+            headLineSector: {
+                "sectorName": "headLineSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,//组件类型 1=新闻 2=广告
+                        "component_style": 1,//该组件使用哪个展示样式
+                        "sort": 1,//排序位置
+                        "componentData": {
+                            "level": 1,
+                            "imgSize": 0,
+                            "textSize": 4,
+                            "child": {
+                                "id": "",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    }
+                ]
+            },
+            //添加头条广告模块 start---------------------------------------->
 
-      //添加多图板块 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---------------------------------------->
+            //添加banner模块 start---------------------------------------->
+            bannerSector: {
+                "sectorName": "bannerSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,//组件类型 1=新闻 2=广告
+                        "component_style": 1,//该组件使用哪个展示样式
+                        "sort": 1,//排序位置
+                        "componentData": {
+                            "level": 2,
+                            "imgSize": 5,
+                            "textSize": 0,
+                            "child": {
+                                "id": "",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,//组件类型 1=新闻 2=广告
+                        "component_style": 1,//该组件使用哪个展示样式
+                        "sort": 2,//排序位置
+                        "componentData": {
+                            "level": 6,
+                            "imgSize": 0,
+                            "textSize": 10,
+                            "child": {
+                                "id": "",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    }
+                ]
+            },
+            //添加banner模块 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---------------------------------------->
+            //两列新闻组合模块1 start---------------------------------------->
+            manyPictureSector: {
+                sectorName: "manyPictureSector",//板块名称
+                componentList: [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 3,
+                            "textSize": 9,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 2,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 3,
+                            "textSize": 6,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    }
+                ]
+            },
+            //两列新闻组合模块1 end---------------------------------------->
 
-      //文章列表板块 start---------------------------------------->
-      listSector:{
-        sectorName:"listSector",//板块名称
-        componentList:[
-          {
-            component_type:7,//纯文本
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"styleTitle",
-            sort:1,
-            componentData:{
-              text:"板块标题"
-            }
-          },
-          {
-            component_type:1,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"listNews",
-            sort:2,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:5,
-              listType:[
-                "title",
-                "created_time"
-              ]
-            }
-          },
-          {
-            component_type:1,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"listNews",
-            sort:3,
-            componentData:{
-              category_id:[],
-              page:1,
-              pageSize:5,
-              listType:[
-                "title",
-                "created_time"
-              ]
-            }
-          },
-        ]
-      },
-      //文章列表板块 end---------------------------------------->
+            //两列新闻组合模块2 end---------------------------------------->
+            commentSector: {
+                sectorName: "commentSector",//板块名称
+                componentList: [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 2,
+                            "textSize": 12,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 2,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 1,
+                            "textSize": 3,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    }
+                ]
+            },
+            //两列新闻组合模块2 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---------------------------------------->
+            //两列新闻组合模块3 start---------------------------------------->
+            listSector: {
+                sectorName: "listSector",//板块名称
+                componentList: [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 2,
+                            "textSize": 12,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 2,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 1,
+                            "textSize": 3,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 3,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 1,
+                            "textSize": 3,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    }
+                ]
+            },
+            //两列新闻组合模块3 end---------------------------------------->
 
-      //友情链接板块 start---------------------------------------->
-      friendShipLinkSector:{
-        sectorName:"friendShipLinkSector",//友情链接无需提交数据
-        componentList:[
-          {
-            component_type:7, //纯文本
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"styleTitle",
-            sort:1,
-            componentData:{
-              text:"板块标题"
+            //带广告新闻组合 start---------------------------------------->
+            onlyImgSector: {
+                "sectorName": "onlyImgSector",//板块名称
+                "componentList": [
+                    {
+                        "component_type": 1,
+                        "component_style": 1,
+                        "sort": 1,
+                        "componentData": {
+                            "category_id":"",
+                            "category_arr":"",
+                            "name":"请选择导航..",
+                            "level":"",
+                            "imgSize": 3,
+                            "textSize": 4,
+                            "child":{
+                                "id":"",
+                                "imgSize": "",
+                                "textSize": ""
+                            },
+                            "listType": [
+                                "id",
+                                "title",
+                                "imgurl",
+                                "author",
+                                "updated_at",
+                                "introduce",
+                                "islink",
+                                "linkurl",
+                                "copyfrom",
+                                "cat_arr_id",
+                                "catid",
+                                "pinyin"
+                            ],
+                        }
+                    },
+                ],
+                "ad": {
+                    "width": 450, //宽度
+                    "height": 290, //高度
+                    "name": "",//广告名称
+                    "price": 0,//价格
+                    "introduce":"",//介绍
+                    "website_id": "",//网站id
+                    "thumb": "http://img.bjzxtw.org.cn/pre/image/png/20250609/174945725555092.png",//示例图 - 默认值
+                    "typeid": 2,//广告类型 - 2 图片
+                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+                }
             }
-          },
-          {
-            component_type:4,
-            component_style:1,//该组件使用哪个展示样式
-            component_name:"",
-            sort:1,
-            componentData:{}
-          }
-        ]
-      }
-      //友情链接板块 end---------------------------------------->
-
-    }
-  },
-  methods: {
-    //添加模块
-    addModule(type,h,jsonData){
-      let data = {
-        source:"click",//添加方式为点击
-        type: type,
-        h: h,
-        jsonData: jsonData
-      }
-      console.log(data);
-      this.$store.commit('template/addModule',data);
-    },
-    //拖拽开始
-    drag(type,h,jsonData){
-      let data = {
-        type: type,
-        h: h,
-        jsonData: jsonData
-      }
-      this.$store.commit('template/drag',data);
+            //带广告新闻组合 end---------------------------------------->
+        }
     },
-    //拖拽结束
-    dragend(type,h,jsonData){
-      let data = {
-        type: type,
-        h: h,
-        jsonData: jsonData
-      }
-      this.$store.commit('template/dragend',data);
+    methods: {
+        //添加模块
+        addModule(type, h, jsonData) {
+            let data = {
+                source: "click",//添加方式为点击
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            console.log(data);
+            this.$store.commit('template/addModule', data);
+        },
+        //拖拽开始
+        drag(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/drag', data);
+        },
+        //拖拽结束
+        dragend(type, h, jsonData) {
+            let data = {
+                type: type,
+                h: h,
+                jsonData: jsonData
+            }
+            this.$store.commit('template/dragend', data);
+        }
     }
-  }
 }
 </script>
 
 <style scoped lang="less">
-  .sectorBox {
+.sectorBox {
     height: 100%;
+
     .sectorItemBox {
-      box-sizing: border-box;
-      padding: 0 20px 40px 20px;
-      height: 130px;
-      cursor: pointer;
-      .sectorItem {
-        border: 1px solid #333644;
-        padding: 10px;
-        border-radius: 8px;
-        &:hover {
-          background: #333644;
-          transform: scale(1.1);
-          transition: all 0.2s ease-in-out;
+        box-sizing: border-box;
+        padding: 0 20px 40px 20px;
+        cursor: pointer;
+
+        .sectorItem {
+            border: 1px solid #333644;
+            padding: 10px;
+            border-radius: 8px;
+
+            &:hover {
+                background: #333644;
+                transform: scale(1.1);
+                transition: all 0.2s ease-in-out;
+            }
+
+            img {
+                display: block;
+                width: 100%;
+            }
         }
-        img {
-          display: block;
-          width: 100%;
+
+        .sectorItemTitle {
+            color: #fff;
+            font-size: 14px;
+            padding: 10px 0 0 0;
+            text-align: center;
         }
-      }
-      .sectorItemTitle {
-        color: #fff;
-        font-size: 14px;
-        padding: 10px 0 0 0;
-        text-align: center;
-      }
     }
-  }
+}
 </style>

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

@@ -1,8 +1,8 @@
 <template>
   <div class="sectorBox">
-    <div class="sectorItemBox" @click="addModule('imgTitleSector',8,imgTitleSector)" @drag="drag('imgTitleSector',8,imgTitleSector)" @dragend="dragend('imgTitleSector',8,imgTitleSector)" >
+    <div class="sectorItemBox" @click="addModule('adSector',8,adSector)" @drag="drag('adSector',8,adSector)" @dragend="dragend('adSector',8,adSector)" >
       <div class="sectorItem">
-        <img src="@/assets/template/sector/imgTitleSector.png"/>
+        <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" />
       </div>
       <div class="sectorItemTitle">通栏广告</div>
     </div>
@@ -38,8 +38,8 @@ export default {
   data() {
     return {
       //添加通栏广告模块 start---------------------------------------->
-      imgTitleSector:{
-        sectorName:"imgTitleSector",//板块名称
+      adSector:{
+        sectorName:"adSector",//板块名称
         componentList:[
           {
             component_type:3,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论

src/permission.js

@@ -31,6 +31,7 @@ router.beforeEach(async (to, from, next) => {
         if (to.path === '/login') {
             //获取登录参数，是backurl还是userurl
             let loginType = getLoginType(window.location.href)
+
             if(loginType == 'userurl'){
                 //如果是userurl
                 const userurl = hashParams();
@@ -77,10 +78,38 @@ router.beforeEach(async (to, from, next) => {
                     window.location.href = backurl + '?backurl=' + backurl + '&admintoken=' + getToken()
                 }
             }
+
+            //出现这种情况，说明用户使用的是管理员登录
+            if(loginType == null){
+                const userInfo = await getInfo();
+                //此时不需要返回C端
+                if(userInfo.code == 400){
+                    console.log("用户没有访问权限，将跳转到无权限页面！")
+                    if (to.path !== '/no-permission') {
+                        //到达此页面后直接清理token,避免出现用户直接从url返回login导致无限循环
+                        removeToken()
+                        //避免重复跳转
+                        next({path:'/no-permission'})
+                    } else {
+                        //已经在无权限页面，不再跳转
+                        next()
+                    }
+                    NProgress.done()
+                }else{
+                    setUseType(userInfo.data.type_id, 86400)
+                    setWebSiteId(userInfo.data.website_id, 86400)
+                    //console.log("用户有访问权限，访问继续！")
+                    next()
+                }
+            }
+
         } else {
             //3.4.2 如果有token，但是没在登录页面
             const hasRoles = store.getters.roles && store.getters.roles.length > 0
-            //此时分为两种情况，一种是用户通过路由访问，一种是用户从url直接访问（刷新）时执行
+            // console.log(223344)
+            // console.log(store.getters.roles)
+            // console.log(store.getters.roles.length)
+            //console.log("roles:" + hasRoles)
             if (hasRoles) {
                 const userInfo = await getInfo();
                 //如果用户没有权限登录该网站，返回登录页面
@@ -99,26 +128,16 @@ router.beforeEach(async (to, from, next) => {
                 }else{
                     setUseType(userInfo.data.type_id, 86400)
                     setWebSiteId(userInfo.data.website_id, 86400)
-                    console.log("用户有访问权限，访问继续！")
-
-                    //稳定性待测试
-                    if(router.options.routes.length < 2){
-                        console.log("用户路由出现异常，重新获取路由菜单！")
-                        const { roles } = await store.dispatch('user/getInfo')
-                        const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
-                        router.addRoutes(accessRoutes)
-                        console.log("添加路由成功！")
-                    }
+                    //console.log("用户有访问权限，访问继续！")
                     next()
                 }
             } else {
-                //页面刷新的时候执行
                 try {
                     const { roles } = await store.dispatch('user/getInfo')
                     const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
                     router.addRoutes(accessRoutes)
                     next({ ...to, replace: true })
-                    console.log("添加路由成功！")
+                    //console.log("添加路由成功！")
                 } catch (error) {
                     await store.dispatch('user/resetToken')
                     Message.error(error || 'Has Error')

src/router/index.js

@@ -322,6 +322,22 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/routerList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/router/routerList'),
+        meta: {
+          title: '路由白名单',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
   {
     path: '/hall',
     component: Layout,
@@ -560,7 +576,7 @@ export const constantRoutes = [
         path: '',
         component: () => import('@/views/news/jobHuntingListApply'),
         meta: {
-          title: '求职信息',
+          title: '求职审核列表',
           hidden: true,
           breadcrumb: true
         }
@@ -1122,6 +1138,22 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/imgList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/imgList.vue'),
+        meta: {
+          title: '静态资源管理',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
   // {
   //   path: '/documentation',
   //   component: Layout,
@@ -1164,7 +1196,57 @@ export const constantRoutes = [
         }
       }
     ]
-  }
+  },
+  // --------------企业管理fr--------------start---------
+  {
+    path: '/companyList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/company/companyList.vue'),
+        meta: {
+          title: '企业列表',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/checkcompanyList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/company/checkcompanyList.vue'),
+        meta: {
+          title: '待审核列表',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/creatCompany',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/company/creatCompany'),
+        meta: {
+          title: '添加企业',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  // --------------企业管理fr--------------end---------
 ]
 
 /**
@@ -1457,4 +1539,4 @@ export function resetRouter() {
   router.matcher = newRouter.matcher // reset router
 }
 
-export default router
+export default router

src/router/modules/dangyunlong.js

@@ -67,5 +67,53 @@ const dangyunlongRouter= [
       }
     ]
   },
+  {
+    path: '/size',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/size'),
+        meta: {
+          title: '尺寸',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/skin',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/skin'),
+        meta: {
+          title: '皮肤',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/deploy',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/deploy'),
+        meta: {
+          title: '部署列表',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
 ]
 export default dangyunlongRouter

src/store/modules/company.js

@@ -0,0 +1,72 @@
+import { getCompanyList,addCompany,delCompany,upCompany,checkCompany,getCompanyInfo} from '@/api/company'
+
+const state = {
+
+}
+
+const mutations = {
+
+}
+
+const actions = {
+    getCompanyList({commit},data) {
+        return new Promise((resolve, reject) => {
+            getCompanyList(data).then(response => {
+            resolve(response)
+          }).catch(error => {
+            reject(error)
+          })
+        })
+      },
+      addCompany({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            addCompany(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    delCompany({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            delCompany(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    upCompany({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            upCompany(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    checkCompany({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            checkCompany(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    getCompanyInfo({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getCompanyInfo(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+}
+export default {
+    namespaced: true,
+    state,
+    mutations,
+    actions
+}

src/store/modules/genre.js

@@ -0,0 +1,128 @@
+import { getTemplateClassList,addTemplateClass,upTemplateClass,delTemplateClass,
+    getTemplateClass,getTemplateList,addTemplate,delTemplate,updateTemplate,getTemplateInfo
+ } from '@/api/genre'
+
+const state = {
+
+}
+
+const mutations = {
+
+}
+
+const actions = {
+    // 风格管理  start------------------------------------------------------------
+    getTemplateClassList({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getTemplateClassList(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    addTemplateClass({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            addTemplateClass(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    upTemplateClass({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            upTemplateClass(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    delTemplateClass({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            delTemplateClass(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    // 风格管理  end------------------------------------------------------------
+
+
+    // 皮肤管理  start------------------------------------------------------------
+    //获取风格名称
+    getTemplateClass({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getTemplateClass(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+
+    //获取皮肤列表
+    getTemplateList({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getTemplateList(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+
+    //新增皮肤
+    addTemplate({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            addTemplate(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+
+    //删除皮肤
+    delTemplate({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            delTemplate(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+
+    //更新皮肤
+    updateTemplate({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            updateTemplate(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+
+    //获取皮肤详情
+    getTemplateInfo({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getTemplateInfo(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+}
+
+
+export default {
+    namespaced: true,
+    state,
+    mutations,
+    actions
+}

src/store/modules/module.js

@@ -0,0 +1,63 @@
+import { getStaticResourceList,addStaticResource,delStaticResource,upStaticResource} from '@/api/module'
+
+const state = {
+
+}
+
+const mutations = {
+
+}
+
+const actions = {
+    // getStaticResourceList({ commit }, data) {
+    //     return new Promise((resolve, reject) => {
+    //         getStaticResourceList(data).then(response => {
+    //             resolve(response)
+    //         }).catch(error => {
+    //             reject(error)
+    //         })
+    //     })
+    // },
+    getStaticResourceList({commit},data) {
+        return new Promise((resolve, reject) => {
+            getStaticResourceList(data).then(response => {
+            resolve(response)
+          }).catch(error => {
+            reject(error)
+          })
+        })
+      },
+    addStaticResource({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            addStaticResource(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    delStaticResource({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            delStaticResource(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    upStaticResource({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            upStaticResource(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+}
+export default {
+    namespaced: true,
+    state,
+    mutations,
+    actions
+}

src/store/modules/pool.js

@@ -13,8 +13,8 @@ import {
   get_website_tag_arr_api, del_website_tag_arr_api, edit_website_tag_api, add_website_tag_api, drop_website_tag_api,
   detail_website_tag_api,
 
-  get_creatNews_nav_api, get_creatNews_nav_son_api
-
+  get_creatNews_nav_api, get_creatNews_nav_son_api,
+  cloneWebsite
 
 
 
@@ -476,6 +476,17 @@ const actions = {
     })
   },
   //关联导航池 end ---------------------------------------->
+  
+  //克隆网站
+  cloneWebsite({ commit }, data) {
+    return new Promise((resolve, reject) => {
+      cloneWebsite(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
 }
 
 

src/store/modules/size.js

@@ -0,0 +1,64 @@
+import { getSizeList,addSize,upSize,delSize,getSizeInfo} from '@/api/size'
+
+const state = {
+
+}
+
+const mutations = {
+
+}
+
+const actions = {
+    getSizeList({commit},data) {
+        return new Promise((resolve, reject) => {
+            getSizeList(data).then(response => {
+            resolve(response)
+            console.log("-----------------------",response) // 打印响应数据，以便检查是否正确获取到了用户信息
+          }).catch(error => {
+            reject(error)
+          })
+        })
+      },
+      addSize({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            addSize(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    upSize({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            upSize(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    delSize({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            delSize(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    getSizeInfo({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getSizeInfo(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+}
+export default {
+    namespaced: true,
+    state,
+    mutations,
+    actions
+}

src/store/modules/template.js

@@ -1,10 +1,12 @@
 //cms中的接口 获取网站基本信息，网站导航，网站底部导航，网站行政区划，行政职能
-import {getSiteInfo,getSiteCategory,getFooterCategoryList,selectWebsiteArea,selectWebsiteDepartment } from '@/api/cms'
+import { getSiteInfo, getSiteCategory, getFooterCategoryList} from '@/api/cms'
 //自助建站的接口 用于添加基本信息
-import {getWebsiteintel,addWebsiteTemplateintel,getWebsiteTemplateintel,upWebsiteTemplateintel,getAllTemplateClass,getWebsiteTemplateList,addWebsiteTemplateclassintel,
-  getWebsiteTemplateclassintel,addWebsiteTemplate,getWebsiteTemplateInfo,getWebsiteTemplateData} from '@/api/template'
+import {
+    getWebsiteintel, addWebsiteTemplateintel, getAdminSiteInfo, upWebsiteTemplateintel, getAllTemplateClass, getWebsiteTemplateList, addWebsiteTemplateclassintel,
+    getWebsiteTemplateclassintel, addWebsiteTemplate, getWebsiteTemplateInfo, getWebsiteTemplateData, getAdminWebsiteFootAll, addTwinAdPlace
+} from '@/api/template'
 
-import { Message } from 'element-ui'; //注意在这里引入是非常不符合规范的
+import { Message,MessageBox } from 'element-ui'; //注意在这里引入是非常不符合规范的
 
 import Vue from 'vue';  //导入Vue 因为我们要进行深层次的json修改，深拷贝的数据无法令视图更新
 //所以我们需要使用Vue的$set方法来强制视图更新，在vuex中没有this，这里我们需要通过引入vue来使用vue.$set
@@ -16,1685 +18,1687 @@ import randomIndex1 from '@/utils/templateJson/index/style1/1.js';
 import randomIndex2 from '@/utils/templateJson/index/style1/2.js';
 
 const state = {
-  //0.全局配置 start------------------------------------------------------------> 
-  editWebsiteId: "",//当前编辑网站的id
-  editWebsiteClass:"",//当前编辑网站的风格
-  stepStatus: true,//是否显示现在进行到哪一步：true=显示 false=不显示
-  //0.全局配置 end------------------------------------------------------------>
-  
-  //1.画布数据 start------------------------------------------------------------>
-  pageStatus:1,//当前编辑哪个页面  1=首页 2=分类页 3=列表页 4=详情页 5=搜索页 6=自定义列表页 7=自定义详情页 
-  menuType:1, //当前菜单显示板块还是组件 1=板块 2=组件 
-  previewStatus:false,//是否预览
-  gridKey:0,//使用gridKey来强制更新视图
-  loading:false,//是否显示加载中
-  ad_id:"",//生成储存的广告id
-  showPage:{ //哪些页面可以被展示
-    index:true,
-    class:false,
-    list:true,
-    article:true,
-    search:false,
-    aloneList:false,
-    aloneArticle:false
-  },
-  pageData: { //自助建站拖拽板块的数据，注意，这里并不是提交到后台的数据
-    index:[
-      
-    ],//首页
-    class:[],//分类页
-    list:[],//列表页
-    article:[],//详情页
-    search:[],//搜索页
-    aloneList:[],//自定义列表页
-    aloneArticle:[],//自定义详情页
-  },
-  // layout: [
-  //   // i = id 
-  //   // w = 最大宽度是12
-  //   // { i: "0", x: 0, y: 0, w: 12, h: 2, content:""},
-  //   // { i: "1", x: 0, y: 0, w: 12, h: 2, content:""},
-  // ],
-  //1.画布数据 end------------------------------------------------------------>
+    //0.全局配置 start------------------------------------------------------------> 
+    editWebsiteId: "",//当前编辑网站的id
+    adKey: "",//当前编辑网站的缩写
+    editWebsiteClass: "",//当前编辑网站的风格
+    stepStatus: true,//是否显示现在进行到哪一步：true=显示 false=不显示
+    pageDataStatus:{//页面数据完整度
+        index:{
+            sector:0,//当前板块数量，为0表示一个都没有，最少需要1个模块才能保存
+            cid:0,//缺少的导航池id 为0表示没有缺少
+            ad:0,//缺少的广告名称，为0表示没有缺少
+            adPrice:0//缺少的广告价格，为0表示没有缺少
+        }
+    },
+    //0.全局配置 end------------------------------------------------------------>
 
-  //2.站点数据 start------------------------------------------------------------>
-  webSiteInfo:"",//网站信息
-  webSiteMenu:"",//网站包含的导航池
-  area:{//地区
-    economize:[],//省区
-    market:[],//市区
-    county:[]//县区
-  },
-  departmentList:[],//职能部门
-  //2.站点数据 end------------------------------------------------------------>
+    //1.画布数据 start------------------------------------------------------------>
+    pageStatus: 1,//当前编辑哪个页面  1=首页 2=分类页 3=列表页 4=详情页 5=搜索页 6=自定义列表页 7=自定义详情页 
+    menuType: 1, //当前菜单显示板块还是组件 1=板块 2=组件 
+    previewStatus: false,//是否预览
+    gridKey: 0,//使用gridKey来强制更新视图
+    loading: false,//是否显示加载中
+    ad_id: "",//生成储存的广告标识
+    showPage: { //哪些页面可以被展示
+        index: true,
+        class: true,
+        list: true,
+        article: true,
+        search: true,
+        aloneList: true,
+        aloneArticle: true
+    },
+    pageData: { //自助建站拖拽板块的数据，注意，这里并不是提交到后台的数据
+        index: [],//首页
+        class: [],//分类页
+        list: [],//列表页
+        article: [],//详情页
+        search: [],//搜索页
+        aloneList: [],//自定义列表页
+        aloneArticle: [],//自定义详情页
+    },
+    // layout: [
+    //   // i = id 
+    //   // w = 最大宽度是12
+    //   // { i: "0", x: 0, y: 0, w: 12, h: 2, content:""},
+    //   // { i: "1", x: 0, y: 0, w: 12, h: 2, content:""},
+    // ],
+    //1.画布数据 end------------------------------------------------------------>
 
-  //3.画布构造 start------------------------------------------------------------>
-  editSectorY:0,//当前组件在画布中的位置
-  mouseXY:{//鼠标位置
-    "x": 12, 
-    "y": 33
-  },
-  DragPos:{//创建的占位符大小
-    "x": null, 
-    "y": null, 
-    "w": 12, 
-    "h": 2, 
-    "i": null
-  },
-  //获得gridlayout对象
-  gridlayoutObj:null,
-  //3.画布构造 end------------------------------------------------------------>
+    //2.站点数据 start------------------------------------------------------------>
+    webSiteInfo: "",//网站信息
+    webSiteMenu: "",//网站包含的导航池
+    webSiteFooterInfo: "",//网站底部信息
+    area: {//地区
+        economize: [],//省区
+        market: [],//市区
+        county: []//县区
+    },
+    departmentList: [],//职能部门
+    //2.站点数据 end------------------------------------------------------------>
 
-  //4.构造的网站数据 start------------------------------------------------------------>
-  editWindowStatus:false,//编辑组件弹出框是否显示
-  editComponentWindowStatus:false,//选择组件样式弹出框是否显示
-  editWebsiteTemplateJsonWindow:false,//当前准备提交的数据 后期删除
-  editWindowTitle:"",//编辑弹出框标题
-  editSectorId:0,//当前正在编辑的板块id
-  editDataSort:0,//当前正在编辑的数据位置
-  editComponentSort:0,//当前正在编辑的组件id
-  editComponentType:0,//当前正在编辑的组件类型
-  editComponentSize:0,//当前组件展示的条数
-  editComponentStyle:0,//当前编辑的组件样式
-  editWebsiteCategory:[],//当前网站全部关联导航
-  webSiteData:{
-    //1.base网站基本信息
-    base:{
-      websiteId:"",//网站id
+    //3.画布构造 start------------------------------------------------------------>
+    editSectorY: 0,//当前组件在画布中的位置
+    mouseXY: {//鼠标位置
+        "x": 12,
+        "y": 33
     },
-    //2.style信息
-    style:{
-      styleId:"",//风格id
+    DragPos: {//创建的占位符大小
+        "x": null,
+        "y": null,
+        "w": 12,
+        "h": 2,
+        "i": null
     },
-    //3.板块信息 header,menu,footer 是页面自带的无需构建
-    template:{  
-      //index = 首页 class=分类页 list=列表页 article=详情页 search=搜索页 aloneList=自定义列表页 aloneArticle=自定义详情页
-      index:[],
-      class:[],//分类页
-      list:[],//列表页
-      article:[],//详情页
-      search:[],//搜索页
-      aloneList:[],//自定义列表页
-      aloneArticle:[],//自定义详情页
-    }
-  },
-  canSubmit:false,//当前数据是否可以被提交
-  //4.构造的网站数据 end------------------------------------------------------------>
+    //获得gridlayout对象
+    gridlayoutObj: null,
+    //3.画布构造 end------------------------------------------------------------>
 
-  //5.组件回显数据 start------------------------------------------------------------>
-  componentViewData:{
-    pid_arr:[],//导航池
-    pageSize:"",//展示条数
-    adName:"",//广告名称
-    titleName:"",//标题名称
-  }
-  //5.组件回显数据 start------------------------------------------------------------>
+    //4.构造的网站数据 start------------------------------------------------------------>
+    editWindowStatus: false,//编辑组件弹出框是否显示
+    editComponentWindowStatus: false,//选择组件样式弹出框是否显示
+    editWebsiteTemplateJsonWindow: false,//当前准备提交的数据 后期删除
+    editWindowTitle: "",//编辑弹出框标题
+    editSectorId: 0,//当前正在编辑的板块id
+    editDataSort: 0,//当前正在编辑的数据位置
+    editComponentSort: 0,//当前正在编辑的组件id
+    editComponentType: 0,//当前正在编辑的组件类型
+    editComponentSize: 0,//当前组件文字新闻数量
+    editComponentSizeImg:0,//当前组件图片新闻数量
+    editComponentStyle: 0,//当前编辑的组件样式
+    editWebsiteCategory: [],//当前网站全部关联导航
+    webSiteData: {
+        //1.base网站基本信息
+        base: {
+            websiteId: "",//网站id
+        },
+        //2.style信息
+        style: {
+            styleId: "",//风格id
+        },
+        //3.板块信息 header,menu,footer 是页面自带的无需构建
+        template: {
+            //index = 首页 class=分类页 list=列表页 article=详情页 search=搜索页 aloneList=自定义列表页 aloneArticle=自定义详情页
+            index: [],
+            class: [],//分类页
+            list: [],//列表页
+            article: [],//详情页
+            search: [],//搜索页
+            aloneList: [],//自定义列表页
+            aloneArticle: []//自定义详情页
+        },
+        //4.广告位
+        ad: {
+            top:{
+                "width": 830,//宽度
+                "height": 110,//高度
+                "name": "",//广告名称
+                "price": 0,//价格
+                "introduce":"",//介绍
+                "website_id": "",//网站id
+                "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
+                "typeid": 2,//广告类型 - 2 图片
+                "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
+            },
+            index: [],
+            class: [],
+            list: [],
+            article: [],
+            search: [],
+            aloneList: [],
+            aloneArticle: []
+        }
+    },
+    canSubmit: false,//当前数据是否可以被提交
+    //4.构造的网站数据 end------------------------------------------------------------>
+
+    //5.组件回显数据 start------------------------------------------------------------>
+    componentViewData: {
+        pid_arr: [],//导航池
+        pageSize: "",//展示文字新闻条数
+        pageSizeImg: "",//展示图片新闻条数
+        adName: "",//广告名称
+        titleName: "",//标题名称
+        windowKey:0,//级联选择器的key
+    }
+    //5.组件回显数据 start------------------------------------------------------------>
 }
 
 const mutations = {
-  //0.全局配置 start------------------------------------------------------------>
-  //设置网站的id
-  setEditWebsiteId(state,id){
-    state.editWebsiteId = id;
-  },
-  //设置网站的风格
-  setClassNumber(state,id){
-    state.editWebsiteClass = id;
-  },
-  //展示步骤
-  showStepStatus(state){
-    state.stepStatus = true;
-  },
-  //隐藏步骤
-  hiddenStepStatus(state){
-    state.stepStatus = false;
-  },
-  //设置步骤
-  setPageStatus(state,num){
-    state.pageStatus = num;
-  },
-  //设置预览状态
-  setPreviewStatus(state){
-    state.previewStatus = !state.previewStatus;
-  },
-  //打开编辑组件弹出框
-  setEditWindowStatus(state,data){
-    state.editWindowStatus = true;
-    state.editSectorId = data.id;
-    state.editSectorY = data.y;
-    state.editDataSort = data.dataSort;
-    state.editComponentSort = data.sort;
-    state.editComponentType = data.type;
-    state.editComponentSize = data.size;
-  },
-  //关闭编辑组件弹出框
-  closeEditWindowStatus(state){
-    state.editWindowStatus = false;
-  },
-  //打开选择组件样式弹出框
-  setComponentStyleStatus(state,data){
-    state.editComponentWindowStatus = true;
-    state.editSectorId = data.id;
-    state.editDataSort = data.dataSort;
-    state.editComponentSort = data.sort;
-    state.editComponentType = data.type;
-    state.editComponentStyle = data.style;
-  },
-  //关闭选择组件样式弹出框
-  closeComponentStyleStatus(state){
-    state.editComponentWindowStatus = false;
-  },
-  //关闭提交数据弹出框
-  closeEditWebsiteTemplateJsonWindow(state){
-    state.editWebsiteTemplateJsonWindow = false;
-  },
-  //选择组件样式
-  selectComponentStyleNumber(state,data){
-    state.editComponentStyle = data;
-  },
-  //设置组件回显数据
-  setComponentViewData(state,data){
-    //首页
-    if(state.pageStatus == 1){
-      //找到要修改的板块
-      const targetModuleIndex = state.pageData.index.findIndex(module => module.i === data.id);
-      //判断组件类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
-      if(state.editComponentType == 1){
-        state.componentViewData.pid_arr = state.pageData.index[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.index[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
-        state.componentViewData.pageSize = state.editComponentSize;
-      }
-      //3=广告名称
-      if(state.editComponentType == 3){
-        state.componentViewData.adName = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.text;
-      }
-      //7=标题
-      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){
-      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){
-      
-      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 自定义列表页
-    if(state.pageStatus == 6){}
-    //pageStatus==7 自定义详情页
-    if(state.pageStatus == 7){}
-  },
-  //生成一个随机的广告id
-  getRandomAdid(state){
-    //网站id
-    const websiteId = state.editWebsiteId;
-    // 生成 3 个随机字母 (a-z)
-    const randomLettersOne = Math.random().toString(36).substring(2, 5);  // 生成随机字母并去除前面的 "0."
-    // 获取当前时间戳（毫秒级）
-    const timestamp = Date.now();
-    // 生成 5 个随机字母 (a-z)
-    const randomLettersTwo = Math.random().toString(36).substring(2, 7);  // 生成随机字母并去除前面的 "0."
-    // 拼接时间戳和随机字母生成唯一 ID
-    const ad_id = `${websiteId}${randomLettersOne}${timestamp}${randomLettersTwo}`;
-    state.ad_id = ad_id;
-  },
-  //0.全局配置 start------------------------------------------------------------>
-  //1.配置模块 start------------------------------------------------------------>
-  //获得gridlayout对象
-  setGridlayoutObj(state,data){
-    state.gridlayoutObj = data;
-  },
-  //添加板块
-  addModule(state,data){
-    //pageStatus==1 首页 index
-    if(state.pageStatus == 1){
-      //开始复制 start------------------------------------------------------------>
-      //判断当前一共有多少个模块最多能添加10个
-      if(state.pageData.index.length >= 10){
-        Message.error('最多只能添加10个模块！');
-        return;
-      }else{
-        console.log(data.jsonData)
-        //判断是拖拽的还是点击添加进来的 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.index.map(item => item.y), 0);
-          console.log(data);
-          //设置数据在构建json中的位置
-          let dataSort = state.pageData.index.length;
-          //判断添加的是否为广告模块 如果是 添加一个ad_id
-          if(data.jsonData.componentList[0].component_type==3){
-            this.commit("template/getRandomAdid")
-            //添加板块id  
-            state.pageData.index.push({
-              //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-              i: id,
-              x: 0, 
-              y: maxY + 1, 
-              w: 12, 
-              h: data.h, 
-              type: data.type,
-              adid: state.ad_id,
-              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-              content:data.jsonData,
-              dataSort:dataSort,
-            });
-          }else{
-            state.pageData.index.push({
-              //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-              i: id,
-              x: 0, 
-              y: maxY + 1, 
-              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.index);
+    //0.全局配置 start------------------------------------------------------------>
+    //设置网站的id
+    setEditWebsiteId(state, id) {
+        state.editWebsiteId = id;
+    },
+    //设置网站缩写
+    setAdKey(state, key) {
+        state.adKey = key;
+    },
+    //设置网站的风格
+    setClassNumber(state, id) {
+        state.editWebsiteClass = id;
+    },
+    //展示步骤
+    showStepStatus(state) {
+        state.stepStatus = true;
+    },
+    //隐藏步骤
+    hiddenStepStatus(state) {
+        state.stepStatus = false;
+    },
+    //设置步骤
+    setPageStatus(state, num) {
+        state.pageStatus = num;
+    },
+    //设置预览状态
+    setPreviewStatus(state) {
+        state.previewStatus = !state.previewStatus;
+    },
+    //打开编辑组件弹出框
+    setEditWindowStatus(state, data) {
+        state.editWindowStatus = true;
+        state.editSectorId = data.id;
+        state.editSectorY = data.y;
+        state.editDataSort = data.dataSort;
+        state.editComponentSort = data.sort;
+        state.editComponentType = data.type;
+        state.editComponentSize = data.size;
+        state.editComponentSizeImg = data.sizeImg;
+    },
+    //增加级联选择器key
+    addWindowKey(state) {
+        state.componentViewData.windowKey++;
+    },
+    //关闭编辑组件弹出框
+    closeEditWindowStatus(state) {
+        state.editWindowStatus = false;
+    },
+    //打开选择组件样式弹出框
+    setComponentStyleStatus(state, data) {
+        state.editComponentWindowStatus = true;
+        state.editSectorId = data.id;
+        state.editDataSort = data.dataSort;
+        state.editComponentSort = data.sort;
+        state.editComponentType = data.type;
+        state.editComponentStyle = data.style;
+    },
+    //关闭选择组件样式弹出框
+    closeComponentStyleStatus(state) {
+        state.editComponentWindowStatus = false;
+    },
+    //关闭提交数据弹出框
+    closeEditWebsiteTemplateJsonWindow(state) {
+        state.editWebsiteTemplateJsonWindow = false;
+    },
+    //选择组件样式
+    selectComponentStyleNumber(state, data) {
+        state.editComponentStyle = data;
+    },
+    //设置组件回显数据
+    setComponentViewData(state, data) {
+        //首页
+        if (state.pageStatus == 1) {
+            //找到要修改的板块
+            const targetModuleIndex = state.pageData.index.findIndex(module => module.i === data.id);
+            //判断组件类型 1=新闻 2=广告
+            //1=新闻 需要设置导航id
+            if (state.editComponentType == 1) {
+                state.componentViewData.pid_arr = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.category_arr;
+                state.componentViewData.pageSize = state.editComponentSize;
+                state.componentViewData.pageSizeImg = state.editComponentSizeImg;
+            }
+            //2=设置广告名称
+            if (state.editComponentType == 2) {
+                //state.componentViewData.adName = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.text;
+                state.componentViewData.adName = state.pageData.index[targetModuleIndex].content.ad.name;
+            }
+        }
+        //pageStatus==2 分类页
+        if (state.pageStatus == 2) {}
+        //pageStatus==3 列表页
+        if (state.pageStatus == 3) {
+            const targetModuleIndex = state.pageData.list.findIndex(module => module.i === data.id);
+            //判断组件类型 1=新闻 2=广告
+            //1=新闻 需要设置导航id
+            if (state.editComponentType == 1) {
+                state.componentViewData.pid_arr = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.category_arr;
+                state.componentViewData.pageSize = state.editComponentSize;
+                state.componentViewData.pageSizeImg = state.editComponentSizeImg;
+            }
+            //2=设置广告名称
+            if (state.editComponentType == 2) {
+                state.componentViewData.adName = state.pageData.list[targetModuleIndex].content.componentList[data.sort].componentData.text;
+            }
+        }
+        //pageStatus==4 详情页
+        if (state.pageStatus == 4) {
+            const targetModuleIndex = state.pageData.article.findIndex(module => module.i === data.id);
+            //判断组件类型 1=新闻 2=广告
+            //1=新闻 需要设置导航id
+            if (state.editComponentType == 1) {
+                state.componentViewData.pid_arr = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.category_arr;
+                state.componentViewData.pageSize = state.editComponentSize;
+            }
+            //2=设置广告名称
+            if (state.editComponentType == 2) {
+                state.componentViewData.adName = state.pageData.article[targetModuleIndex].content.componentList[data.sort].componentData.text;
+            }
+        }
+        //pageStatus==5 搜索页
+        if (state.pageStatus == 5) {}
+        //pageStatus==6 底部列表页
+        if (state.pageStatus == 6) {}
+        //pageStatus==7 底部详情页
+        if (state.pageStatus == 7) {}
+    },
+    //生成广告id
+    getAdkey(state,sort) {
+        
+    },
+    //清空广告位
+    clearAd(state) {
+        state.webSiteData.ad.index = [];
+        state.webSiteData.ad.class = [];
+        state.webSiteData.ad.list = [];
+        state.webSiteData.ad.article = [];
+        state.webSiteData.ad.search = [];
+        state.webSiteData.ad.aloneList = [];
+        state.webSiteData.ad.aloneArticle = [];
+    },
+    //0.全局配置 start------------------------------------------------------------>
+    //1.配置模块 start------------------------------------------------------------>
+    //获得gridlayout对象
+    setGridlayoutObj(state, data) {
+        state.gridlayoutObj = data;
+    },
+    //添加板块 - 在此处进行是否可以添加的判断
+    addModule(state, data) {
+        //pageStatus==1 首页 index
+        if (state.pageStatus == 1) {
+            if (state.pageData.index.length >= 10) {
+                Message.error('最多只能添加10个通栏！');
+                return;
+            } else {
+                console.log(data.jsonData)
+                //判断当前板块是否含有广告位
+                // if(data.jsonData.ad){
+                //     MessageBox.confirm('您正在添加含有广告位的通栏，此通栏添加后不可删除，但是可以通过：“广告管理 -> 广告位管理” 进行编辑，确定吗？', '注意', {
+                //         confirmButtonText: '确定',
+                //         cancelButtonText: '取消',
+                //     }).then(() => {
+                //         this.commit('template/pushModule', data);
+                //     }).catch(() => {
+                //         Message.success('已取消添加通栏！');
+                //     });
+                // }else{
+                //     this.commit('template/pushModule', data);
+                // }
+                this.commit('template/pushModule', data);
+            }
         }
+        //pageStatus==2 分类页 class
+        if (state.pageStatus == 2) { }
+        //pageStatus==3 列表页 list
+        if (state.pageStatus == 3) { }
+        //pageStatus==4 详情页 article
+        if (state.pageStatus == 4) { }
+        //pageStatus==5 搜索页 search
+        if (state.pageStatus == 5) { }
+        //pageStatus==6 自定义列表页 aloneList
+        if (state.pageStatus == 6) { }
+        //pageStatus==7 自定义详情页 aloneArticle
+        if (state.pageStatus == 7) { }
+    },
+    //该数据可以添加到画布
+    pushModule(state,data){
+        if (state.pageStatus == 1) {
+            console.log(data.jsonData)
+            //判断是拖拽的还是点击添加进来的 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.index.map(item => item.y), 0);
+                console.log(data);
+                //设置数据在构建json中的位置
+                let dataSort = state.pageData.index.length;
+                //判断添加的是否为广告模块 如果是 添加一个ad_id
+                state.pageData.index.push({
+                    //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
+                    i: id,
+                    x: 0,
+                    y: maxY + 1,
+                    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.index);
+            }
 
-        //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.index.map(item => item.y), 0);
-          console.log(data);
-          //设置数据在构建json中的位置
-          let dataSort = state.pageData.index.length;
-          //判断添加的是否为广告模块 如果是 添加一个ad_id
-          if(data.jsonData.componentList[0].component_type==3){
-            this.commit("template/getRandomAdid")
-            //添加板块id  
-            state.pageData.index.push({
-              //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-              i: id,
-              x: 0, 
-              y: maxY + 1, 
-              w: 12, 
-              h: data.h, 
-              type: data.type,
-              adid: state.ad_id,
-              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-              content:data.jsonData,
-              dataSort:dataSort,
-            });
-          }else{
-            state.pageData.index.push({
-              //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-              i: id,
-              x: 0, 
-              y: maxY + 1, 
-              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.index);
-          //需要调查一下这里最后的1，1
-          state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1,1);
-          try {
-            state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display="block";
-          } catch {}
+            //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.index.map(item => item.y), 0);
+                console.log(data);
+                //设置数据在构建json中的位置
+                let dataSort = state.pageData.index.length;
+                //判断添加的是否为广告模块 如果是 添加一个ad_id
+                state.pageData.index.push({
+                    //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
+                    i: id,
+                    x: 0,
+                    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.index);
+                //需要调查一下这里最后的1，1
+                state.gridlayoutObj.dragEvent('dragend', data.i, data.x, data.y, 1, 1);
+                try {
+                    state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display = "block";
+                } catch { 
+
+                }
+            }
         }
-      }
-      //开始复制 end------------------------------------------------------------>
-    }
-    //pageStatus==2 分类页 class
-    if(state.pageStatus == 2){}
-    //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;
-          //判断添加的是否为广告模块 如果是 添加一个ad_id
-          if(data.jsonData.componentList[0].component_type==3){
-            this.commit("template/getRandomAdid")
-            //添加板块id  
-            state.pageData.list.push({
-              //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-              i: id,
-              x: 0, 
-              y: maxY + 1, 
-              w: 12, 
-              h: data.h, 
-              type: data.type,
-              adid: state.ad_id,
-              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-              content:data.jsonData,
-              dataSort:dataSort,
-            });
-          }else{
-            state.pageData.list.push({
-              //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-              i: id,
-              x: 0, 
-              y: maxY + 1, 
-              w: 12, 
-              h: data.h, 
-              type: data.type,
-              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-              content:data.jsonData,
-              dataSort:dataSort,
-            });
-          }
+        //pageStatus==2 分类页 class
+        if (state.pageStatus == 2) { }
+        //pageStatus==3 列表页 list
+        if (state.pageStatus == 3) {
+            //判断是拖拽的还是点击添加进来的 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;
+                state.pageData.list.push({
+                    //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
+                    i: id,
+                    x: 0,
+                    y: maxY + 1,
+                    w: 12,
+                    h: data.h,
+                    type: data.type,
+                    //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+                    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;
+                state.pageData.list.push({
+                    //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
+                    i: id,
+                    x: 0,
+                    y: maxY + 1,
+                    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 { }
+            }
         }
+        //pageStatus==4 详情页 article
+        if (state.pageStatus == 4) {
+            //判断是拖拽的还是点击添加进来的 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;
+                    state.pageData.article.push({
+                        //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
+                        i: id,
+                        x: 0,
+                        y: maxY + 1,
+                        w: 12,
+                        h: data.h,
+                        type: data.type,
+                        //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
+                        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;
-          //判断添加的是否为广告模块 如果是 添加一个ad_id
-          if(data.jsonData.componentList[0].component_type==3){
-            this.commit("template/getRandomAdid")
-            //添加板块id  
-            state.pageData.list.push({
-              //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-              i: id,
-              x: 0, 
-              y: maxY + 1, 
-              w: 12, 
-              h: data.h, 
-              type: data.type,
-              adid: state.ad_id,
-              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-              content:data.jsonData,
-              dataSort:dataSort,
-            });
-          }else{
-            state.pageData.list.push({
-              //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-              i: id,
-              x: 0, 
-              y: maxY + 1, 
-              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 {}
+                //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;
+                    state.pageData.article.push({
+                        //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
+                        i: id,
+                        x: 0,
+                        y: maxY + 1,
+                        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==4 详情页 article
-    if(state.pageStatus == 4){
-      //开始复制 start------------------------------------------------------------>
-      //判断当前一共有多少个模块最多能添加10个
-      if(state.pageData.article.length >= 10){
-        Message.error('最多只能添加10个模块！');
-        return;
-      }else{
-        //判断添加的是否为广告模块 如果是 添加一个ad_id
-        if(data.jsonData.componentList[0].component_type==3){
-          //生成一个随机的ad_id给广告模块
-          this.commit("template/getRandomAdid");
-          console.log("添加广告模块！id为：" + state.ad_id)
-          data.jsonData.componentList[0].componentData.ad_id = state.ad_id;
+        //pageStatus==5 搜索页 search
+        if (state.pageStatus == 5) { }
+        //pageStatus==6 自定义列表页 aloneList
+        if (state.pageStatus == 6) { }
+        //pageStatus==7 自定义详情页 aloneArticle
+        if (state.pageStatus == 7) { }
+    },
+    //删除板块
+    deleteModule(state, data) {
+        //data.i = id
+        //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) {
+            //     state.pageData.index.splice(indexToRemove, 1);
+            //     Message.success('模块已删除！');
+            //     console.log('模块已删除，当前的页面构建数据为：', state.pageData.index);
+            // } else {
+            //     Message.warning('未找到要删除的模块！');
+            // }
+            //开始复制 end------------------------------------------------------------>
+            // base 0.0.2 如果使用splice方法删除sort，当你就剩下最后一个的时候，会出现找不到那个元素的问题
+            // state.pageData.index.splice(data.dataSort,1);
+            // Message.success('模块已删除！');
+            // console.log(state.pageData.index);
+            // 深拷贝整个数组
+            try {
+                // 1. 先找到要删除的模块
+                const indexToRemove = state.pageData.index.findIndex(item => item.i === data.i);
+                if (indexToRemove === -1) {
+                    Message.warning('未找到要删除的模块！');
+                    return;
+                }
+                // 2. 创建新的数组，不包含要删除的模块
+                const newModules = state.pageData.index.filter(item => item.i !== data.i);
+                // 3. 重新计算所有模块的 dataSort
+                newModules.forEach((module, index) => {
+                    module.dataSort = index;
+                });
+                // 4. 使用 Vue.set 更新整个数组
+                Vue.set(state.pageData, 'index', newModules);
+                // 5. 强制更新 gridKey 以触发视图重新渲染
+                state.gridKey += 1;
+                Message.success('模块已删除！');
+                console.log('模块已删除，当前的页面构建数据为：', state.pageData.index);
+            } catch (error) {
+                console.error('删除模块时发生错误:', error);
+                Message.error('删除模块时发生错误，请重试！');
+            }
         }
-        
-        //判断是拖拽的还是点击添加进来的 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;
-          //判断添加的是否为广告模块 如果是 添加一个ad_id
-          if(data.jsonData.componentList[0].component_type==3){
-            this.commit("template/getRandomAdid")
-            //添加板块id  
-            state.pageData.article.push({
-              //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-              i: id,
-              x: 0, 
-              y: maxY + 1, 
-              w: 12, 
-              h: data.h, 
-              type: data.type,
-              adid: state.ad_id,
-              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-              content:data.jsonData,
-              dataSort:dataSort,
-            });
-          }else{
-            state.pageData.article.push({
-              //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-              i: id,
-              x: 0, 
-              y: maxY + 1, 
-              w: 12, 
-              h: data.h, 
-              type: data.type,
-              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-              content:data.jsonData,
-              dataSort:dataSort,
+        //pageStatus==2 分类页
+        if (state.pageStatus == 2) { }
+        //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('未找到要删除的模块！');
+            // }
+            try {
+                // 1. 先找到要删除的模块
+                const indexToRemove = state.pageData.list.findIndex(item => item.i === data.i);
+                if (indexToRemove === -1) {
+                    Message.warning('未找到要删除的模块！');
+                    return;
+                }
+                // 2. 创建新的数组，不包含要删除的模块
+                const newModules = state.pageData.list.filter(item => item.i !== data.i);
+                // 3. 重新计算所有模块的 dataSort
+                newModules.forEach((module, index) => {
+                    module.dataSort = index;
+                });
+                // 4. 使用 Vue.set 更新整个数组
+                Vue.set(state.pageData, 'list', newModules);
+                // 5. 强制更新 gridKey 以触发视图重新渲染
+                state.gridKey += 1;
+                Message.success('模块已删除！');
+                console.log('模块已删除，当前的页面构建数据为：', state.pageData.list);
+            } catch (error) {
+                console.error('删除模块时发生错误:', error);
+                Message.error('删除模块时发生错误，请重试！');
+            }
+            //开始复制 end------------------------------------------------------------>
+        }
+        //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------------------------------------------------------------>
+            try {
+                // 1. 先找到要删除的模块
+                const indexToRemove = state.pageData.article.findIndex(item => item.i === data.i);
+                if (indexToRemove === -1) {
+                    Message.warning('未找到要删除的模块！');
+                    return;
+                }
+                // 2. 创建新的数组，不包含要删除的模块
+                const newModules = state.pageData.article.filter(item => item.i !== data.i);
+                // 3. 重新计算所有模块的 dataSort
+                newModules.forEach((module, index) => {
+                    module.dataSort = index;
+                });
+                // 4. 使用 Vue.set 更新整个数组
+                Vue.set(state.pageData, 'list', newModules);
+                // 5. 强制更新 gridKey 以触发视图重新渲染
+                state.gridKey += 1;
+                Message.success('模块已删除！');
+                console.log('模块已删除，当前的页面构建数据为：', state.pageData.article);
+            } catch (error) {
+                console.error('删除模块时发生错误:', error);
+                Message.error('删除模块时发生错误，请重试！');
+            }
+        }
+        //pageStatus==5 搜索页
+        if (state.pageStatus == 5) { }
+        //pageStatus==6 自定义列表页
+        if (state.pageStatus == 6) { }
+        //pageStatus==7 自定义详情页
+        if (state.pageStatus == 7) { }
+    },
+    //设置组件样式
+    setComponentStyleNumber(state, data) {
+        let id = state.editSectorId;
+        let dataSort = state.editDataSort;
+        let sort = state.editComponentSort;
+        let num = state.editComponentStyle;
+        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;
+            //确保修改属性时 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.index, dataSort, module);
+            console.log("当前的板块数据为：");
+            console.log(state.pageData.index);
+            //开始复制 end------------------------------------------------------------>
         }
-
-        //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;
-          //判断添加的是否为广告模块 如果是 添加一个ad_id
-          if(data.jsonData.componentList[0].component_type==3){
-            this.commit("template/getRandomAdid")
-            //添加板块id  
-            state.pageData.article.push({
-              //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-              i: id,
-              x: 0, 
-              y: maxY + 1, 
-              w: 12, 
-              h: data.h, 
-              type: data.type,
-              adid: state.ad_id,
-              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-              content:data.jsonData,
-              dataSort:dataSort,
+        //pageStatus==2 分类页
+        if (state.pageStatus == 2) { }
+        //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
             });
-          }else{
-            state.pageData.article.push({
-              //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-              i: id,
-              x: 0, 
-              y: maxY + 1, 
-              w: 12, 
-              h: data.h, 
-              type: data.type,
-              //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-              content:data.jsonData,
-              dataSort:dataSort,
+            // 拷贝后直接替换原来的板块
+            //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) {
+            //开始复制 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
             });
-          }
-          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 {}
+            // 拷贝后直接替换原来的板块
+            //state.pageData.index[id] = module;
+            // 使用Vue.set来强制视图更新
+            Vue.set(state.pageData.article, dataSort, module);
+            console.log("当前的板块数据为：");
+            console.log(state.pageData.article);
+            //开始复制 end------------------------------------------------------------>
         }
-      }
-      //开始复制 end------------------------------------------------------------>
-    }
-    //pageStatus==5 搜索页 search
-    if(state.pageStatus == 5){}
-    //pageStatus==6 自定义列表页 aloneList
-    if(state.pageStatus == 6){}
-    //pageStatus==7 自定义详情页 aloneArticle
-    if(state.pageStatus == 7){}
-  },
-  //删除板块
-  deleteModule(state,data){
-    //data.i = id
-    //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) {
-        state.pageData.index.splice(indexToRemove, 1);
-        Message.success('模块已删除！');
-        console.log('模块已删除，当前的页面构建数据为：', state.pageData.index);
-      } else {
-        Message.warning('未找到要删除的模块！');
-      }
-      //开始复制 end------------------------------------------------------------>
-      // base 0.0.2 如果使用splice方法删除sort，当你就剩下最后一个的时候，会出现找不到那个元素的问题
-      // state.pageData.index.splice(data.dataSort,1);
-      // Message.success('模块已删除！');
-      // console.log(state.pageData.index);
-    }
-    //pageStatus==2 分类页
-    if(state.pageStatus == 2){}
-    //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){
-      //开始复制 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 自定义列表页
-    if(state.pageStatus == 6){}
-    //pageStatus==7 自定义详情页
-    if(state.pageStatus == 7){}
-  },
-  //设置组件样式
-  setComponentStyleNumber(state,data){
-    let id = state.editSectorId;
-    let dataSort = state.editDataSort;
-    let sort = state.editComponentSort;
-    let num = state.editComponentStyle;
-    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;
-      //确保修改属性时 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.index, dataSort, module);
-      console.log("当前的板块数据为：");
-      console.log(state.pageData.index);
-      //开始复制 end------------------------------------------------------------>
-    }
-    //pageStatus==2 分类页
-    if(state.pageStatus == 2){}
-    //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){
-      //开始复制 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 自定义列表页
-    if(state.pageStatus == 6){}
-    //pageStatus==7 自定义详情页
-    if(state.pageStatus == 7){}
-  },
-  //保存组件设置的数据
-  saveComponentData(state,data){
-    //传入的板块id
-    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) //找到要修改的板块
-      console.log(targetModuleIndex) //找到要修改的板块
-      //console.log(targetModuleIndex) //找到要修改的板块
-      //state.pageData.index[targetModuleIndex].content.componentList[data.sort] //当前编辑的组件 
-      //data.data.pid_arr //导航池
-      //state.editComponentSize //展示条数
+        //pageStatus==5 搜索页
+        if (state.pageStatus == 5) { }
+        //pageStatus==6 自定义列表页
+        if (state.pageStatus == 6) { }
+        //pageStatus==7 自定义详情页
+        if (state.pageStatus == 7) { }
+    },
+    //保存全局广告的数据
+    saveAdData(state, data) {
+        state.webSiteData.ad.top.name = data.data.name;
+        state.webSiteData.ad.top.introduce = data.data.introduce;
+        state.webSiteData.ad.top.price = data.data.price;
+    },
+    //保存组件设置的数据
+    saveComponentData(state, data) {
+        //传入的板块id
+        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) //找到要修改的板块
+            console.log(targetModuleIndex) //找到要修改的板块
 
-      //判断数据的类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
-      //1=普通新闻
-      //注意，vue有一个bug就是，当你修改复杂对象的时候，如果对象的内部是数组
-      //vue可能无法检测到变化，而当你修改无法被检测变化的数据时，就会把所有数据都修改成相同的值
-      //解决办法是通过vue的set方法将整个对象，即你的数组外层那个对象进行深拷贝，然后修改完再替换回去
-      if(state.editComponentType == 1){
-        // 获取当前模块数据并进行深拷贝
-        let module = JSON.parse(JSON.stringify(state.pageData.index[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.index, targetModuleIndex, module); // 替换为深拷贝的模块
-        console.log("当前的板块数据为：");
-        console.log(state.pageData.index);
-      }
-      //2=tabs新闻选项卡
-      if(state.editComponentType == 2){
-        // 获取当前模块数据并进行深拷贝
-        let module = JSON.parse(JSON.stringify(state.pageData.index[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.index, targetModuleIndex, module); // 替换为深拷贝的模块
-        console.log("当前的板块数据为：");
-        console.log(state.pageData.index);
-      }
-      //3=广告
-      if(state.editComponentType == 3){;
-        let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex]));
-        module.content.componentList[data.sort].componentData.text = data.data.adName;
-        Vue.set(state.pageData.index, targetModuleIndex, module);
-        console.log("当前的板块数据为：");
-        console.log(state.pageData.index);
-      }
-      //4=友情链接
-      //if(state.editComponentType == 4){}
-      //6=静态组件
-      //if(state.editComponentType == 6){}
-      //7=文本
-      if(state.editComponentType == 7){
-        let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex]));
-        module.content.componentList[data.sort].componentData.text = data.data.titleName;
-        Vue.set(state.pageData.index, targetModuleIndex, module);
-        console.log("当前的板块数据为：");
-        console.log(state.pageData.index);
-      }
-      //8=评论
-      //if(state.editComponentType == 8){}
-      //开始复制 end------------------------------------------------------------>
-    }
-    //pageStatus==2 分类页
-    if(state.pageStatus == 2){}
-    //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){
-      //开始复制 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 自定义列表页
-    if(state.pageStatus == 6){}
-    //pageStatus==7 自定义详情页
-    if(state.pageStatus == 7){}
-  },
-  //通过按钮移动板块 (暂时停用)
-  moveModule(state, data) {
-    Message.error("该功能暂时禁用")
-    // pageStatus == 1 首页
-    // if (state.pageStatus == 1) {
-    //   const moveType = data.moveType;
-    //   const moduleId = data.i;
-    //   const modules = state.pageData.index;
-  
-    //   // 深拷贝 modules，避免直接操作原数据
-    //   const newModules = JSON.parse(JSON.stringify(modules));
-  
-    //   // 查找模块在数组中的实际索引
-    //   const thisIndex = newModules.findIndex(module => module.i === moduleId);
-    //   if (thisIndex === -1) {
-    //     Message.error('模块未找到！');
-    //     return;
-    //   }
-    //   const thisY = newModules[thisIndex].y;
-    //   let thatY;
-  
-    //   if (moveType === 'up') {
-    //     thatY = Math.max(
-    //       ...newModules.filter(item => item.y < thisY).map(item => item.y)
-    //     );
-    //     if (thatY === -Infinity) {
-    //       Message.error('已经是顶部了！');
-    //       return;
-    //     }
-    //     const thatIndex = newModules.findIndex(item => item.y === thatY);
-    //     if (thatIndex === -1) {
-    //       Message.error('上方模块未找到！');
-    //       return;
-    //     }
-    //     // 交换y值
-    //     [newModules[thisIndex].y, newModules[thatIndex].y] = [newModules[thatIndex].y, newModules[thisIndex].y];
-  
-    //   } else if (moveType === 'down') {
-    //     thatY = Math.min(
-    //       ...newModules.filter(item => item.y > thisY).map(item => item.y)
-    //     );
-    //     if (thatY === Infinity) {
-    //       Message.error('已经是底部了！');
-    //       return;
-    //     }
-    //     const thatIndex = newModules.findIndex(item => item.y === thatY);
-    //     if (thatIndex === -1) {
-    //       Message.error('下方模块未找到！');
-    //       return;
-    //     }
-    //     // 交换y值
-    //     [newModules[thisIndex].y, newModules[thatIndex].y] = [newModules[thatIndex].y, newModules[thisIndex].y];
-    //   } else {
-    //     Message.error('未知的移动类型！');
-    //     return;
-    //   }
-  
-    //   // 交换后对模块进行排序以确保顺序一致
-    //   newModules.sort((a, b) => a.y - b.y);
-      
-    //   // 使用 Vue.set 强制更新数组，确保视图更新
-    //   //Vue.set(state.pageData, 'index', newModules); // 这里更新整个数组
-    //   state.pageData.index = newModules;
-    //   //state.gridKey+=1;
-  
-    //   console.log(state.pageData.index); // 打印查看是否已修改
-    // }
-  
-    // // pageStatus == 2 分类页
-    // if (state.pageStatus == 2) {}
-    // // pageStatus == 3 列表页
-    // if (state.pageStatus == 3) {}
-    // // pageStatus == 4 详情页
-    // if (state.pageStatus == 4) {}
-    // // pageStatus == 5 搜索页
-    // if (state.pageStatus == 5) {}
-    // // pageStatus == 6 自定义列表页
-    // if (state.pageStatus == 6) {}
-    // // pageStatus == 7 自定义详情页
-    // if (state.pageStatus == 7) {}
-  },
-  //从外部拖拽板块
-  drag(state, data) {
-    // pageStatus == 1 首页
-    if (state.pageStatus == 1) {
-      //开始复制 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;
-      }
-      //state.gridlayoutObj
-      //如果没有占位符就创建一个
-      if (mouseInGrid === true && (state.pageData.index.findIndex(item => item.i === 'drop')) === -1) {
-        state.pageData.index.push({
-          x: (state.pageData.index.length * 2) % (this.colNum || 12),
-          y: state.pageData.index.length + (this.colNum || 12), // puts it at the bottom
-          w: 12,
-          h: 2,
-          i: 'drop',
-        });
-      }
-      //如果已经存在占位符
-      let index = state.pageData.index.findIndex(item => item.i === 'drop');
-      if (index !== -1) {
-        try {
-          state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display = "none";
-        } catch {
+            //组件类型 1=新闻 2=广告
+            
+            //注意，vue有一个bug就是，当你修改复杂对象的时候，如果对象的内部是数组
+            //vue可能无法检测到变化，而当你修改无法被检测变化的数据时，就会把所有数据都修改成相同的值
+            //解决办法是通过vue的set方法将整个对象，即你的数组外层那个对象进行深拷贝，然后修改完再替换回去
 
-        }
-        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);
+            //1=新闻
+            if (state.editComponentType == 1) {
+                // 获取当前模块数据并进行深拷贝
+                let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex])); // 深拷贝整个模块
+                // 更新 category_id 和 pageSize
+                module.content.componentList[data.sort].componentData.category_id = data.data.pid_id; // 设置 category_id
+                module.content.componentList[data.sort].componentData.category_arr = data.data.pid_arr; // 设置 category_arr 用于显示
+                module.content.componentList[data.sort].componentData.name = data.data.name; //设置导航池名字
+                module.content.componentList[data.sort].componentData.textSize = state.editComponentSize; // 设置 pageSize
+                module.content.componentList[data.sort].componentData.imgSize = state.editComponentSizeImg; // 设置 pageSize
 
-        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.index[index].x;
-          state.DragPos.y = state.pageData.index[index].y;
+                // 使用Vue.set来强制视图更新
+                Vue.set(state.pageData.index, targetModuleIndex, module); // 替换为深拷贝的模块
+                console.log("当前的板块数据为：");
+                console.log(state.pageData.index);
+            }
+            //2=广告
+            if (state.editComponentType == 2) {
+                let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex]));
+                //module.content.componentList[data.sort].componentData.text = data.data.adName;
+                module.content.ad.name = data.data.adName;
+                module.content.ad.introduce = data.data.adName;
+                module.content.ad.price = data.data.price;
+                Vue.set(state.pageData.index, targetModuleIndex, module);
+                console.log("当前的板块数据为：");
+                console.log(state.pageData.index);
+                //设置用于回显的广告名，否则会导致回显的广告名和实际的广告名不一致
+                //因为广告名没有默认值，这会导致watch监听不到，所以这里需要手动设置
+                state.componentViewData.adName = data.data.adName;
+            }
+            //开始复制 end------------------------------------------------------------>
         }
-        if (mouseInGrid === false) {
-          state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
-          state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop');
+
+        //pageStatus==2 频道页
+        if (state.pageStatus == 2) {}
+
+        //pageStatus==3 列表页
+        if (state.pageStatus == 3) {
+            //开始复制 start------------------------------------------------------------>
+            //1=新闻
+            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_id; // 设置 category_id
+                module.content.componentList[data.sort].componentData.category_arr = data.data.pid_arr; // 设置 category_arr 用于显示
+                module.content.componentList[data.sort].componentData.name = data.data.name; //设置导航池名字
+                module.content.componentList[data.sort].componentData.textSize = state.editComponentSize; // 设置 pageSize
+                module.content.componentList[data.sort].componentData.imgSize = state.editComponentSizeImg; // 设置 pageSize
+
+                // 使用Vue.set来强制视图更新
+                Vue.set(state.pageData.list, targetModuleIndex, module); // 替换为深拷贝的模块
+                console.log("当前的板块数据为：");
+                console.log(state.pageData.list);
+            }
+            //2=广告
+            if (state.editComponentType == 2) {
+                let module = JSON.parse(JSON.stringify(state.pageData.list[targetModuleIndex]));
+                //module.content.componentList[data.sort].componentData.text = data.data.adName;
+                module.content.ad.name = data.data.adName;
+                module.content.ad.introduce = data.data.adName;
+                module.content.ad.price = data.data.price;
+                Vue.set(state.pageData.list, targetModuleIndex, module);
+                console.log("当前的板块数据为：");
+                console.log(state.pageData.list);
+                state.componentViewData.adName = data.data.adName;
+            }
+            //开始复制 end------------------------------------------------------------>
         }
-      }
-      //开始复制 end------------------------------------------------------------>
-    }
-    // pageStatus == 2 分类页
-    if (state.pageStatus == 2) {}
-    // 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 {
 
+
+        //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.category_arr = data.data.pid_arr; // 设置 category_arr 用于显示
+                module.content.componentList[data.sort].componentData.name = data.data.name; //设置导航池名字
+                module.content.componentList[data.sort].componentData.textSize = state.editComponentSize; // 设置 pageSize
+                module.content.componentList[data.sort].componentData.imgSize = state.editComponentSizeImg; // 设置 pageSize
+
+                // 使用Vue.set来强制视图更新
+                Vue.set(state.pageData.article, targetModuleIndex, module); // 替换为深拷贝的模块
+                console.log("当前的板块数据为：");
+                console.log(state.pageData.article);
+            }
+            //2=广告
+            if (state.editComponentType == 2) {
+                let module = JSON.parse(JSON.stringify(state.pageData.article[targetModuleIndex]));
+                //module.content.componentList[data.sort].componentData.text = data.data.adName;
+                module.content.ad.name = data.data.adName;
+                module.content.ad.introduce = data.data.adName;
+                module.content.ad.price = data.data.price;
+                Vue.set(state.pageData.article, targetModuleIndex, module);
+                console.log("当前的板块数据为：");
+                console.log(state.pageData.article);
+                state.componentViewData.adName = data.data.adName;
+            }
+            //开始复制 end------------------------------------------------------------>
         }
-        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);
+        //pageStatus==5 搜索页
+        if (state.pageStatus == 5) {}
+        //pageStatus==6 底部列表页
+        if (state.pageStatus == 6) {}
+        //pageStatus==7 底部详情页
+        if (state.pageStatus == 7) {}
+    },
+    //通过按钮移动板块 (暂时停用)
+    moveModule(state, data) {
+        Message.error("该功能暂时禁用")
+        // pageStatus == 1 首页
+        // if (state.pageStatus == 1) {
+        //   const moveType = data.moveType;
+        //   const moduleId = data.i;
+        //   const modules = state.pageData.index;
+
+        //   // 深拷贝 modules，避免直接操作原数据
+        //   const newModules = JSON.parse(JSON.stringify(modules));
+
+        //   // 查找模块在数组中的实际索引
+        //   const thisIndex = newModules.findIndex(module => module.i === moduleId);
+        //   if (thisIndex === -1) {
+        //     Message.error('模块未找到！');
+        //     return;
+        //   }
+        //   const thisY = newModules[thisIndex].y;
+        //   let thatY;
+
+        //   if (moveType === 'up') {
+        //     thatY = Math.max(
+        //       ...newModules.filter(item => item.y < thisY).map(item => item.y)
+        //     );
+        //     if (thatY === -Infinity) {
+        //       Message.error('已经是顶部了！');
+        //       return;
+        //     }
+        //     const thatIndex = newModules.findIndex(item => item.y === thatY);
+        //     if (thatIndex === -1) {
+        //       Message.error('上方模块未找到！');
+        //       return;
+        //     }
+        //     // 交换y值
+        //     [newModules[thisIndex].y, newModules[thatIndex].y] = [newModules[thatIndex].y, newModules[thisIndex].y];
+
+        //   } else if (moveType === 'down') {
+        //     thatY = Math.min(
+        //       ...newModules.filter(item => item.y > thisY).map(item => item.y)
+        //     );
+        //     if (thatY === Infinity) {
+        //       Message.error('已经是底部了！');
+        //       return;
+        //     }
+        //     const thatIndex = newModules.findIndex(item => item.y === thatY);
+        //     if (thatIndex === -1) {
+        //       Message.error('下方模块未找到！');
+        //       return;
+        //     }
+        //     // 交换y值
+        //     [newModules[thisIndex].y, newModules[thatIndex].y] = [newModules[thatIndex].y, newModules[thisIndex].y];
+        //   } else {
+        //     Message.error('未知的移动类型！');
+        //     return;
+        //   }
+
+        //   // 交换后对模块进行排序以确保顺序一致
+        //   newModules.sort((a, b) => a.y - b.y);
+
+        //   // 使用 Vue.set 强制更新数组，确保视图更新
+        //   //Vue.set(state.pageData, 'index', newModules); // 这里更新整个数组
+        //   state.pageData.index = newModules;
+        //   //state.gridKey+=1;
+
+        //   console.log(state.pageData.index); // 打印查看是否已修改
+        // }
+
+        // // pageStatus == 2 分类页
+        // if (state.pageStatus == 2) {}
+        // // pageStatus == 3 列表页
+        // if (state.pageStatus == 3) {}
+        // // pageStatus == 4 详情页
+        // if (state.pageStatus == 4) {}
+        // // pageStatus == 5 搜索页
+        // if (state.pageStatus == 5) {}
+        // // pageStatus == 6 自定义列表页
+        // if (state.pageStatus == 6) {}
+        // // pageStatus == 7 自定义详情页
+        // if (state.pageStatus == 7) {}
+    },
+    //从外部拖拽板块
+    drag(state, data) {
+        // pageStatus == 1 首页
+        if (state.pageStatus == 1) {
+            //开始复制 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;
+            }
+            //state.gridlayoutObj
+            //如果没有占位符就创建一个
+            if (mouseInGrid === true && (state.pageData.index.findIndex(item => item.i === 'drop')) === -1) {
+                state.pageData.index.push({
+                    x: (state.pageData.index.length * 2) % (this.colNum || 12),
+                    y: state.pageData.index.length + (this.colNum || 12), // puts it at the bottom
+                    w: 12,
+                    h: 2,
+                    i: 'drop',
+                });
+            }
+            //如果已经存在占位符
+            let index = state.pageData.index.findIndex(item => item.i === 'drop');
+            if (index !== -1) {
+                try {
+                    state.gridlayoutObj.$children[state.pageData.index.length].$refs.item.style.display = "none";
+                } catch {
 
-        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;
+                }
+                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.index[index].x;
+                    state.DragPos.y = state.pageData.index[index].y;
+                }
+                if (mouseInGrid === false) {
+                    state.gridlayoutObj.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 2, 12);
+                    state.pageData.index = state.pageData.index.filter(obj => obj.i !== 'drop');
+                }
+            }
+            //开始复制 end------------------------------------------------------------>
         }
-        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');
+        // pageStatus == 2 分类页
+        if (state.pageStatus == 2) { }
+        // 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------------------------------------------------------------>
         }
-      }
-      //开始复制 end------------------------------------------------------------>
-    }
-    // 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 {
+        // 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------------------------------------------------------------>
         }
-        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);
+        // pageStatus == 5 搜索页
+        if (state.pageStatus == 5) { }
+        // pageStatus == 6 自定义列表页
+        if (state.pageStatus == 6) { }
+        // pageStatus == 7 自定义详情页
+        if (state.pageStatus == 7) { }
+    },
+    //拖拽结束 定位落点
+    dragend(state, data) {
+        // pageStatus == 1 首页
+        if (state.pageStatus == 1) {
+            //开始复制 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.index = state.pageData.index.filter(obj => obj.i !== 'drop');
 
-        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;
+                // UNCOMMENT below if you want to add a grid-item
+                /*
+                this.layout.push({
+                    x: DragPos.x,
+                    y: DragPos.y,
+                    w: 1,
+                    h: 1,
+                    i: DragPos.i,
+                });
+                this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x,DragPos.y,1,1);
+                try {
+                    this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="block";
+                } catch {
+                }
+                */
+                let sendData = {
+                    source: "drag",//添加时判断此模块来自外部拖拽，而不是点击
+                    type: data.type,
+                    h: data.h,
+                    jsonData: data.jsonData,
+                    x: state.DragPos.x,
+                    y: state.DragPos.y,
+                    w: 12,
+                }
+                //开发到这里了，注意我可能还需要上面那个 this.$refs.gridLayout.dragEvent方法
+                this.commit('template/addModule', sendData);
+            }
+            //开始复制 end------------------------------------------------------------>
         }
-        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');
+        // pageStatus == 2 分类页
+        if (state.pageStatus == 2) { }
+        // 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------------------------------------------------------------>
         }
-      }
-      //开始复制 end------------------------------------------------------------>
-    }
-    // pageStatus == 5 搜索页
-    if (state.pageStatus == 5) {}
-    // pageStatus == 6 自定义列表页
-    if (state.pageStatus == 6) {}
-    // pageStatus == 7 自定义详情页
-    if (state.pageStatus == 7) {}
-  },
-  //拖拽结束 定位落点
-  dragend(state, data) {
-    // pageStatus == 1 首页
-    if (state.pageStatus == 1) {
-      //开始复制 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.index = state.pageData.index.filter(obj => obj.i !== 'drop');
+        // 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');
 
-        // UNCOMMENT below if you want to add a grid-item
-        /*
-        this.layout.push({
-            x: DragPos.x,
-            y: DragPos.y,
-            w: 1,
-            h: 1,
-            i: DragPos.i,
-        });
-        this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x,DragPos.y,1,1);
-        try {
-            this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="block";
-        } catch {
+                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 自定义列表页
+        if (state.pageStatus == 6) { }
+        // pageStatus == 7 自定义详情页
+        if (state.pageStatus == 7) { }
+    },
+    //修改首页板块高度
+    setModuleHeight(state, data) {
+        // pageStatus == 1 首页
+        if (state.pageStatus == 1) {
+            console.log(data);
+            state.pageData.index[data.i].h = data.h;
+            console.log(state.pageData.index[data.i]);
         }
-        */
-        let sendData = {
-          source:"drag",//添加时判断此模块来自外部拖拽，而不是点击
-          type:data.type,
-          h:data.h,
-          jsonData:data.jsonData,
-          x: state.DragPos.x,
-          y: state.DragPos.y,
-          w: 12,
+        // pageStatus == 2 分类页
+        if (state.pageStatus == 2) { }
+        // 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) {
+            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 自定义列表页
+        if (state.pageStatus == 6) { }
+        // pageStatus == 7 自定义详情页
+        if (state.pageStatus == 7) { }
+    },
+    //格式化模板信息
+    formatTemplateInfo(state, data) {
+        //1.处理广告位
+        //先把广告位的数据清空，再重新获取
+        //this.commit('template/clearAd');
+        // 深拷贝数据，避免直接修改原数据
+        let clonedData = JSON.parse(JSON.stringify(data));
+        // 按照 clonedData.data.y 的大小排序
+        clonedData.data.sort((a, b) => a.y - b.y);
+        //获取当前页面名称
+        let getPageName = () =>{
+            if(state.pageStatus==1){return "index";}
+            if(state.pageStatus==2){return "category";}
+            if(state.pageStatus==3){return "list";}
+            if(state.pageStatus==4){return "detail";}
+            if(state.pageStatus==5){return "search";}
+            if(state.pageStatus==6){return "page";}
+            if(state.pageStatus==7){return "page";}
+        }
+        // 取出每个通栏中的广告，并保存到state.webSiteData.ad中
+        for (let index in clonedData.data) {
+            if(clonedData.data[index].content.ad){
+                let pageName = getPageName();
+                let ad_index = Number(index)+1;
+                let ad_tag = `${state.adKey}_${pageName}_${ad_index}`;
+                clonedData.data[index].content.ad.website_id = state.editWebsiteId;
+                clonedData.data[index].content.ad.ad_tag = ad_tag;
+                state.webSiteData.ad[data.type].push(clonedData.data[index].content.ad);
+            }
+            // for(let item of clonedData.data[index].content.componentList){
+            //     if(item.componentData.category_id!=undefined){
+            //         console.log("--------------------------------")
+            //         console.log(item);
+            //     }
+            // }
         }
-        //开发到这里了，注意我可能还需要上面那个 this.$refs.gridLayout.dragEvent方法
-        this.commit('template/addModule',sendData);
-      }
-      //开始复制 end------------------------------------------------------------>
-    }
-    // pageStatus == 2 分类页
-    if (state.pageStatus == 2) {}
-    // 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,
+
+        //设置全局的广告位名称
+        state.webSiteData.ad.top.website_id = state.editWebsiteId;
+        state.webSiteData.ad.top.ad_tag = `${state.adKey}_top`
+
+        let websiteData = [];
+        // 获取板块的 sort
+        for (let index = 0; index < clonedData.data.length; index++) {
+            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);
+            // }
+            websiteData.push(clonedData.data[index].content);
         }
-        this.commit('template/addModule',sendData);
-      }
-      //开始复制 end------------------------------------------------------------>
-    }
-    // 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');
+        // 保存到对应的页面 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) {
+        //第一步：
+        //保存网站id和模板风格id
+        state.webSiteData.base.websiteId = state.editWebsiteId;
+        state.webSiteData.style.styleId = state.editWebsiteClass;
+        //第二步：
+        //格式化数据
+        //2.1 清理广告位数据
+        this.commit('template/clearAd');
+        //2.2 格式化index页面数据
+        this.commit('template/formatTemplateInfo', { data: state.pageData.index, type: "index" });
+        //2.3 格式化list的信息
+        //this.commit('template/formatTemplateInfo', { data: state.pageData.list, type: "list" });
+        //3.4 格式化article的信息
+        //this.commit('template/formatTemplateInfo', { data: state.pageData.article, type: "article" });
+        //展示构造json 后期移除
+        state.editWebsiteTemplateJsonWindow = true;
 
-        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/pageCheck', {data: state.pageData});
+    },
+    //检测模板完整度
+    pageCheck(state, data) {
+        //获得首页板块数量
+        state.pageDataStatus.index.sector = data.data.index.length;
+        //获得首页没有设置导航池的板块数量
+        let noCid = 0;
+        for(let index in data.data.index){
+            for(let i in data.data.index[index].content.componentList){
+                //console.log(data.data.index[index].content.componentList[i].componentData.category_id)
+                if(data.data.index[index].content.componentList[i].componentData.category_id!=undefined){
+                    if(data.data.index[index].content.componentList[i].componentData.category_id==""){
+                        noCid++;
+                    }
+                }
+            }
         }
-        this.commit('template/addModule',sendData);
-      }
-      //开始复制 end------------------------------------------------------------>
-    }
-    // pageStatus == 5 搜索页
-    if (state.pageStatus == 5) {}
-    // pageStatus == 6 自定义列表页
-    if (state.pageStatus == 6) {}
-    // pageStatus == 7 自定义详情页
-    if (state.pageStatus == 7) {}
-  },
-  //修改首页板块高度
-  setModuleHeight(state,data){
-    // pageStatus == 1 首页
-    if (state.pageStatus == 1) {
-      console.log(data);
-      state.pageData.index[data.i].h = data.h;
-      console.log(state.pageData.index[data.i]);
-    }
-    // pageStatus == 2 分类页
-    if (state.pageStatus == 2) {}
-    // 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) {
-      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 自定义列表页
-    if (state.pageStatus == 6) {}
-    // pageStatus == 7 自定义详情页
-    if (state.pageStatus == 7) {}
-  },
-  //格式化模板信息
-  formatTemplateInfo(state, data) {
-    // 深拷贝数据，避免直接修改原数据
-    let clonedData = JSON.parse(JSON.stringify(data));
-    // 把ad_id传进去
-    for(let item of clonedData.data){
-      if(item.adid){
-        item.content.componentList[0].componentData.ad_id = item.adid;
-      }
-    }
-    // 按照 clonedData.data.y 的大小排序
-    clonedData.data.sort((a, b) => a.y - b.y);
-    //console.log(clonedData, clonedData);
-    let websiteData = [];
-    // 获取板块的 sort
-    for (let index = 0; index < clonedData.data.length; index++) {
-      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);
-      // }
-      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) {
-    //临时展示保存的数据 后期移除
-    state.editWebsiteTemplateJsonWindow = true;
-    //调用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);
-    // console.log(state.editWebsiteId)
-    //给与网站id和模板风格id
-    state.webSiteData.base.websiteId = state.editWebsiteId;
-    state.webSiteData.style.styleId = state.editWebsiteClass;
-  },
-  //随机生成模板
-  randomTemplate(state){
-    state.loading = true;
-    const randomIndex = Math.floor(Math.random() * 2); // Generates a random number between 1 and 2
-    console.log(`随机生成的数字是: ${randomIndex}`);
-    //console.log(randomIndex1)
-    //console.log(randomIndex2)
-    //Message.warning("该功能研发中");
+        state.pageDataStatus.index.cid = noCid;
+        //获得首页没有设置广告名称的组件数量
+        let noAd = 0;
+        for(let index in data.data.index){
+            //console.log(data.data.index[index].content.ad)
+            if(data.data.index[index].content.ad!=undefined){
+                if(data.data.index[index].content.ad.name==""){
+                    noAd++;
+                }
+            }
+        }   
+        //全局广告特殊处理
+        if(state.webSiteData.ad.top.name==""){
+            noAd++;
+        }
+        //console.log(noAd) 
+        state.pageDataStatus.index.ad = noAd;
 
-    // pageStatus == 1 首页
-    if (state.pageStatus == 1) {
-      // 先清空里面的内容
-      Vue.set(state.pageData, 'index', []);
-      // 深拷贝 randomIndex1 和 randomIndex2
-      const newData1 = JSON.parse(JSON.stringify(randomIndex1));
-      const newData2 = JSON.parse(JSON.stringify(randomIndex2));
-      if (randomIndex == 0) {
-        Vue.set(state.pageData, 'index', newData1);
-      }
-      if (randomIndex == 1) {
-        Vue.set(state.pageData, 'index', newData2);
-      }
-      state.loading = false;
-    }
-    // pageStatus == 2 分类页
-    if (state.pageStatus == 2) {}
-    // pageStatus == 3 列表页
-    if (state.pageStatus == 3) {
-      Message.warning("暂无模板可用！");
-      state.loading = false;
-    }
-    // pageStatus == 4 详情页
-    if (state.pageStatus == 4) {
-      Message.warning("暂无模板可用！");
-      state.loading = false;
-    }
-    // pageStatus == 5 搜索页
-    if (state.pageStatus == 5) {}
-    // pageStatus == 6 自定义列表页
-    if (state.pageStatus == 6) {}
-    // pageStatus == 7 自定义详情页
-    if (state.pageStatus == 7) {}
-  },
-  //提交数据之前执行完整度检查
-  IntegrityCheck(state){
-    //先设置为true看能否通过判断
-    state.canSubmit = true;
-    //先判断当前有哪几个板块可用
-    //state.canSubmit == false 不可以提交
-    //state.canSubmit == true 可以提交
-    //首页
-    if(state.showPage.index == true){
-      if(state.template.index == []){
-        state.canSubmit = false;
-      }
-    }
-    //分类页
-    if(state.showPage.class == true){
-      if(state.template.class == []){
-        state.canSubmit = false;
-      }
-    }
-    //列表页
-    if(state.showPage.list == true){
-      if(state.template.list == []){
-        state.canSubmit = false;
-      }
-    }
-    //详情页
-    if(state.showPage.article == true){
-      if(state.template.article == []){
-        state.canSubmit = false;
-      }
-    }
-    //搜索页
-    if(state.showPage.search == true){
-      if(state.template.search == []){
-        state.canSubmit = false;
-      }
-    }
-    //自定义列表页
-    if(state.showPage.aloneList == true){
-      if(state.template.aloneList == []){
-        state.canSubmit = false;
-      }
-    }
-    //自定义详情页
-    if(state.showPage.aloneArticle == true){
-      if(state.template.aloneArticle == []){
-        state.canSubmit = false;
-      }
-    }
+        //获得首页没有设置广告价格的组件数量
+        let noAdPrice = 0;
+        for(let index in data.data.index){
+            if(data.data.index[index].content.ad!=undefined){
+                if(data.data.index[index].content.ad.price==0){
+                    noAdPrice++;
+                }
+            }
+        }
+        //全局广告特殊处理
+        if(state.webSiteData.ad.top.price==0){
+            noAdPrice++;
+        }
+        state.pageDataStatus.index.adPrice = noAdPrice;
+    },
+    //随机生成模板
+    randomTemplate(state) {
+        state.loading = true;
+        const randomIndex = Math.floor(Math.random() * 2); // Generates a random number between 1 and 2
+        console.log(`随机生成的数字是: ${randomIndex}`);
+        //console.log(randomIndex1)
+        //console.log(randomIndex2)
+        //Message.warning("该功能研发中");
 
-    //最后判断一下是否可以提交
-    if(state.canSubmit == ture){
+        // pageStatus == 1 首页
+        if (state.pageStatus == 1) {
+            // 先清空里面的内容
+            Vue.set(state.pageData, 'index', []);
+            // 深拷贝 randomIndex1 和 randomIndex2
+            const newData1 = JSON.parse(JSON.stringify(randomIndex1));
+            const newData2 = JSON.parse(JSON.stringify(randomIndex2));
+            if (randomIndex == 0) {
+                Vue.set(state.pageData, 'index', newData1);
+            }
+            if (randomIndex == 1) {
+                Vue.set(state.pageData, 'index', newData2);
+            }
+            state.loading = false;
+        }
+        // pageStatus == 2 分类页
+        if (state.pageStatus == 2) { }
+        // pageStatus == 3 列表页
+        if (state.pageStatus == 3) {
+            Message.warning("暂无模板可用！");
+            state.loading = false;
+        }
+        // pageStatus == 4 详情页
+        if (state.pageStatus == 4) {
+            Message.warning("暂无模板可用！");
+            state.loading = false;
+        }
+        // pageStatus == 5 搜索页
+        if (state.pageStatus == 5) { }
+        // pageStatus == 6 自定义列表页
+        if (state.pageStatus == 6) { }
+        // pageStatus == 7 自定义详情页
+        if (state.pageStatus == 7) { }
+    },
+    //1.配置模块 end------------------------------------------------------------>
 
-    }else{
-      Message.error('您还有未构建的页面，请检查！');
-    }
-  },
-  //1.配置模块 end------------------------------------------------------------>
+    //2.获取站点信息 start------------------------------------------------------------>
+    //获取站点顶部详情
+    setWebsiteInfo(state, data) {
+        state.webSiteInfo = data;
+    },
+    setWebsiteFooterInfo(state, data) {
+        state.webSiteFooterInfo = data;
+    },
+    //获取站点导航池
+    setGetSiteCategory(state, data) {
+        let allData = []
+        for (let index in data) {
+            //导航最多只显示24个，超出部分不显示
+            if (index < 24) {
+                allData.push(data[index])
+            }
+        }
+        state.webSiteMenu = allData;
+    },
+    //设置地区
+    setArea(state, data) {
+        //都没有的时候返回的是省
+        if (data.province == undefined) {
+            state.area.economize = data;
+        }
+        //没有region的时候返回的是市
+        if (data.province != undefined && data.city != undefined && data.region == undefined) {
+            state.area.market = data.city;
+        }
+        //有region的时候返回的是县
+        if (data.province != undefined && data.city != undefined && data.region != undefined) {
+            state.area.county = data.region;
+        }
+    },
+    //设置职能
+    setDepartment(state, data) {
+        for (let item of data) {
+            let options = {
+                value: item.id,
+                label: item.name
+            }
+            state.departmentList.push(options)
+        }
+        console.log(state.departmentList)
+    },
+    //获取全部导航
+    setWebsiteCategory(state, data) {
+        let arrayData = []
+        for (let item of data) {
+            let options = {
+                key: item.id,
+                label: item.name,
+                value: item.id
+            }
+            arrayData.push(options);
+        }
+        state.editWebsiteCategory = arrayData;
+    },
+    //2.获取站点信息 end------------------------------------------------------------>
 
-  //2.获取站点信息 start------------------------------------------------------------>
-  //获取站点详情
-  setWebsiteInfo(state,data){
-    state.webSiteInfo = data;
-  },
-  //获取站点导航池
-  setGetSiteCategory(state,data) {
-    state.webSiteMenu = data;
-  },
-  //设置地区
-  setArea(state,data){
-    //都没有的时候返回的是省
-    if(data.province==undefined){
-      state.area.economize = data;
-    }
-    //没有region的时候返回的是市
-    if(data.province!=undefined&&data.city!=undefined&&data.region==undefined){
-      state.area.market = data.city;
-    }
-    //有region的时候返回的是县
-    if(data.province!=undefined&&data.city!=undefined&&data.region!=undefined){
-      state.area.county = data.region;
-    }
-  },
-  //设置职能
-  setDepartment(state,data){
-    for(let item of data){
-      let options = {
-        value: item.id,
-        label: item.name
-      }
-      state.departmentList.push(options)
-    }
-    console.log(state.departmentList)
-  },
-  //获取全部导航
-  setWebsiteCategory(state,data){
-    let arrayData = []
-    for(let item of data){
-      let options = {
-        key:item.id,
-        label:item.name,
-        value:item.id
-      }
-      arrayData.push(options);
+    //3.提示信息 start------------------------------------------------------------>
+    alertMessage(state, data) {
+        Message({
+            message: "配置阶段仅展示，无法真实调用该功能！",
+            type: 'warning',
+            duration: 0,
+            showClose: true
+        });
     }
-    state.editWebsiteCategory = arrayData;
-  },
-  //2.获取站点信息 end------------------------------------------------------------>
+    //3.提示信息 end------------------------------------------------------------>
 }
 
 const actions = {
-  //1.显示画板组件数据 start------------------------------------------------------------>
-  //1.1 获取网站基本信息
-  getSiteInfo({commit},data){
-    return new Promise((resolve, reject) => {
-      getSiteInfo(data).then(response => {
-        commit('setWebsiteInfo', response.data);
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-  //1.2 获取网站导航池
-  getSiteCategory({commit},data){
-    return new Promise((resolve, reject) => {
-      getSiteCategory(data).then(response => {
-        commit('setGetSiteCategory', response.data);
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-  //1.3 获取网站底部导航
-  getFooterCategoryList({commit},data){
-    return new Promise((resolve, reject) => {
-      getFooterCategoryList(data).then(response => {
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-  //1.4 获取行政区划
-  selectWebsiteArea({commit},data){
-    return new Promise((resolve, reject) => {
-      selectWebsiteArea(data).then(response => {
-        commit('setArea', response.data);
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-  //1.5 获取所有职能部门
-  selectWebsiteDepartment({commit},data){
-    return new Promise((resolve, reject) => {
-      selectWebsiteDepartment(data).then(response => {
-        commit('setDepartment', response.data);
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-  //1.显示画板组件数据 end------------------------------------------------------------>
-  
-  //2.构建网站json start------------------------------------------------------------>
-  //2.1 搜索网站
-  getWebsiteintel({commit},data){
-    return new Promise((resolve, reject) => {
-      getWebsiteintel(data).then(response => {
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-  //2.2 添加网站基本信息 如果只传入website_id，则验证是否已经关联导航池
-  addWebsiteTemplateintel({commit},data){
-    return new Promise((resolve, reject) => {
-      addWebsiteTemplateintel(data).then(response => {
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-  //2.3 获取网站基本信息
-  getWebsiteTemplateintel({commit},data){
-    return new Promise((resolve, reject) => {
-      getWebsiteTemplateintel(data).then(response => {
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-  //2.4 修改网站基本信息
-  upWebsiteTemplateintel({commit},data){
-    return new Promise((resolve, reject) => {
-      upWebsiteTemplateintel(data).then(response => {
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-  //2.5 获取所有风格
-  getAllTemplateClass({commit},data){
-    return new Promise((resolve, reject) => {
-      getAllTemplateClass(data).then(response => {
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-  //2.6 搜索并获取所有网站风格
-  getWebsiteTemplateList({commit},data){
-    return new Promise((resolve, reject) => {
-      getWebsiteTemplateList(data).then(response => {
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-  //2.7 保存用户选择的风格
-  addWebsiteTemplateclassintel({commit},data){
-    return new Promise((resolve, reject) => {
-      addWebsiteTemplateclassintel(data).then(response => {
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-  //2.8 获取用户选择的风格
-  getWebsiteTemplateclassintel({commit},data){
-    return new Promise((resolve, reject) => {
-      getWebsiteTemplateclassintel(data).then(response => {
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-  //2.9 保存模板
-  addWebsiteTemplate({commit},data){
-    return new Promise((resolve, reject) => {
-      addWebsiteTemplate(data).then(response => {
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-  //2.10 获取模板配置
-  getWebsiteTemplateInfo({commit},data){
-    return new Promise((resolve, reject) => {
-      getWebsiteTemplateInfo(data).then(response => {
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-  //2.11 预览模板信息
-  getWebsiteTemplateData({commit},data){
-    return new Promise((resolve, reject) => {
-      getWebsiteTemplateData(data).then(response => {
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-  //2.构建网站json end------------------------------------------------------------>
+    //1.显示画板组件数据 start------------------------------------------------------------>
+    //1.1 获取网站基本信息
+    getSiteInfo({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getSiteInfo(data).then(response => {
+                commit('setWebsiteInfo', response.data);
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //1.2 获取网站导航池
+    getSiteCategory({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getSiteCategory(data).then(response => {
+                commit('setGetSiteCategory', response.data);
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //1.3 获取网站底部导航
+    getFooterCategoryList({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getFooterCategoryList(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //1.显示画板组件数据 end------------------------------------------------------------>
+
+    //2.构建网站json start------------------------------------------------------------>
+    //2.1 搜索网站
+    getWebsiteintel({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getWebsiteintel(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //2.2 添加网站基本信息 如果只传入website_id，则验证是否已经关联导航池
+    addWebsiteTemplateintel({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            addWebsiteTemplateintel(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //2.3 获取网站基本信息
+    getAdminSiteInfo({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getAdminSiteInfo(data).then(response => {
+                commit('setWebsiteInfo', response.data);
+                commit('setAdKey', response.data.ad_key);
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //2.4 修改网站基本信息
+    upWebsiteTemplateintel({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            upWebsiteTemplateintel(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //2.5 获取所有风格
+    getAllTemplateClass({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getAllTemplateClass(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //2.6 搜索并获取所有网站风格
+    getWebsiteTemplateList({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getWebsiteTemplateList(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //2.7 保存用户选择的风格
+    addWebsiteTemplateclassintel({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            addWebsiteTemplateclassintel(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //2.8 获取用户选择的风格
+    getWebsiteTemplateclassintel({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getWebsiteTemplateclassintel(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //2.9 保存模板
+    addWebsiteTemplate({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            addWebsiteTemplate(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //2.10 获取模板配置
+    getWebsiteTemplateInfo({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getWebsiteTemplateInfo(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //2.11 预览模板信息
+    getWebsiteTemplateData({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getWebsiteTemplateData(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //2.12 获得网站底部信息
+    getAdminWebsiteFootAll({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            getAdminWebsiteFootAll(data).then(response => {
+                commit('setWebsiteFooterInfo', response.data);
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //2.13 批量创建广告位
+    addTwinAdPlace({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            addTwinAdPlace(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
+    },
+    //2.构建网站json end------------------------------------------------------------>
 }
 
 export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
+    namespaced: true,
+    state,
+    mutations,
+    actions
 }

src/store/modules/user.js

@@ -166,10 +166,10 @@ const actions = {
         commit('SET_ROLES', roles)
         commit('SET_USERID', data.id)
         commit('SET_NAME', nickname)
-        console.log("开始设置身份详情")
-        console.log(nickname)
+        //console.log("开始设置身份详情")
+        //console.log(nickname)
         commit('SET_AVATAR', avatar)
-        console.log(avatar)
+        //console.log(avatar)
         commit('SET_INTRODUCTION', introduction)
         commit('SET_ROLE_ID', role_id)
         //设置用户等级

src/styles/global.less

@@ -359,4 +359,4 @@
 //   margin-bottom: 5px;
 // }
 
-// el-cascader高度 end
+// el-cascader高度 end

src/styles/theme/body/index/banner/list/style1.less

@@ -0,0 +1,108 @@
+.bannerItemBox {
+    position: relative;
+    .roll_num_box {
+        position: absolute;
+        z-index: 2;
+        left: 60px;
+        bottom: 16px;
+        height: 30px;
+        line-height: 30px;
+        color: #fff;
+        font-size: 16px;
+        .roll_num_box_new {
+            font-size: 20px;
+        }
+    }
+    .dot1 {
+        display: block;
+        word-break: keep-all;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .swiper_dot1 {
+        display: block;
+        width: 100%;
+        line-height: 60px;
+        height: 60px;
+        color: #fff;
+        font-size: 18px;
+        text-indent: 20px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 100;
+        box-sizing: border-box;
+        padding: 0 144px;
+        background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
+    }
+    .el-carousel {
+        /deep/.el-carousel__arrow i {
+            font-size: 33px !important;
+        }
+        .roll_1_box {
+            position: relative;
+        }
+        /deep/.el-carousel__arrow--left {
+            position: absolute;
+            width: 35px;
+            height: 57px;
+            color: #fff;
+            background: rgba(0, 0, 0, 0);
+            left: 9px;
+            border: none;
+            border-radius: 0;
+            top: 100%;
+            margin-top: -32px;
+        }
+        /deep/.el-carousel__arrow--right {
+            width: 35px;
+            height: 57px;
+            color: #fff;
+            background: rgba(0, 0, 0, 0);
+            position: absolute;
+            right: 9;
+            border: none;
+            border-radius: 0;
+            top: 100%;
+            margin-top: -32px;
+        }
+        /deep/ .el-carousel__indicators {
+            // 指示器
+            left: unset;
+            transform: unset;
+            right: 10px;
+            bottom: 11px;
+        }
+        /deep/ .el-carousel__button {
+            // 指示器按钮
+            width: 10px;
+            height: 10px;
+            border: none;
+            border-radius: 5px;
+            background: #fff;
+            opacity: 1;
+        }
+        /deep/ .is-active .el-carousel__button {
+            // 指示器激活按钮
+            background: #255590;
+            width: 25px;
+            opacity: 1;
+
+        }
+        /deep/ .el-carousel__container {
+            height: 100%;
+        }
+    }
+    .custom-indicator button {
+        background-color: #fff;
+        opacity: 1;
+        width: 8px;
+        height: 8px;
+    }
+    .custom-indicator button.is-active {
+        background-color: #DD7D18;
+        width: 58px;
+        opacity: 1;
+    }
+}

src/styles/theme/body/index/headLine/style1.less

@@ -0,0 +1,37 @@
+.headLineStyle1 {
+    width: 1200px;
+    height: 140px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 30px 100px 30px 100px;
+    .headLineTitle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 30px;
+        font-weight: bold;
+        color: #004564;
+        margin-bottom: 10px;
+        img {
+            margin-right: 20px;
+        }
+    }
+    .headLineContent{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        color:#333333;
+        div {
+            margin-right: 40px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+}
+
+

src/styles/theme/body/index/headLine/style2.less

@@ -0,0 +1,35 @@
+.headLineStyle2 {
+    width: 1200px;
+    height: 140px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 30px 100px 30px 100px;
+    .headLineTitle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 30px;
+        font-weight: bold;
+        color: #004564;
+        margin-bottom: 10px;
+        img {
+            margin-right: 20px;
+        }
+    }
+    .headLineContent{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 18px;
+        color:#333333;
+        div {
+            margin-right: 40px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+}

src/styles/theme/foot/style1.less

@@ -0,0 +1,129 @@
+.componentBorder {
+    border: 2px dashed #999;
+}
+.footerStyle1 {
+    width: 100%;
+    margin:0 auto;
+    .imgLinkBox {
+        width:1200px;
+        height:140px;
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        overflow: hidden;
+        margin:0 auto;
+        margin-bottom: 20px;
+        box-sizing: content-box;
+        img {
+            width:170px;
+            height:60px;
+            margin-right: 36px;
+            display: block;
+            margin-bottom: 20px;
+            &:nth-child(6n) {
+                margin-right: 0;
+            }
+        }
+    }
+    .textLinkBox {
+        width: 1200px;
+        margin:0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        box-sizing: content-box;
+        .textLinkBoxLeft {
+            color: #333;
+            font-weight: bold;
+            span {
+                display: block;
+                margin-bottom: 20px;
+            }
+        }
+        .textLinkBoxRight {
+            width: 1083px;
+            color:#333;
+            display: flex;
+            align-items: flex-start;
+            flex-wrap: wrap;
+            span {
+                margin-right: 50px;
+                display: block;
+                margin-bottom: 20px;
+            }
+        }
+    }
+    .footerMenuBox {
+        border-bottom: none;
+        background-color: #1C5468;
+        .footerMenu {
+            width: 1200px;
+            margin:0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 50px;
+            div{
+                color:#fff;
+                font-size: 14px;
+                font-weight: bold;
+                width: 200px;
+                border-right: 1px solid #193D4A;
+                text-align: center;
+                &:last-child {
+                    border-right: none;
+                }
+            }
+        }
+    }
+    .footerInfoBox {
+        width:1200px;
+        padding-bottom: 30px;
+        margin:0 auto;
+        box-sizing: content-box;
+        .footerInfoBoxContent {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .footerInfoBoxContentLeft {
+                width: 10%;
+                box-sizing: border-box;
+                padding-right: 10px;
+                img {
+                    width: 100%;
+                    display: block;
+                }
+            }
+            .footerInfoBoxContentMain {
+                padding-top: 40px;
+                font-size: 14px;
+                text-align: center;
+                div {
+                    text-align: center;
+                    padding-bottom: 10px;
+                    color: #333;
+                }
+            }
+            .footerInfoBoxContentRight {
+                width: 10%;
+                box-sizing: border-box;
+                padding-left: 10px;
+                img {
+                    width: 100%;
+                    display: block;
+                }
+            }
+        }
+        .footerInfoBoxBottom {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-top: 40px;
+            img {
+                width: 10%;
+                display: block;
+                margin-right: 10px;
+            }
+        }
+    }
+}

src/styles/theme/foot/style2.less

@@ -0,0 +1,129 @@
+.componentBorder {
+    border: 2px dashed #999;
+}
+.footerStyle2 {
+    width: 100%;
+    margin:0 auto;
+    .imgLinkBox {
+        width:1200px;
+        height:140px;
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        overflow: hidden;
+        margin:0 auto;
+        margin-bottom: 20px;
+        box-sizing: content-box;
+        img {
+            width:170px;
+            height:60px;
+            margin-right: 36px;
+            display: block;
+            margin-bottom: 20px;
+            &:nth-child(6n) {
+                margin-right: 0;
+            }
+        }
+    }
+    .textLinkBox {
+        width: 1200px;
+        margin:0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        box-sizing: content-box;
+        .textLinkBoxLeft {
+            color: #333;
+            font-weight: bold;
+            span {
+                display: block;
+                margin-bottom: 20px;
+            }
+        }
+        .textLinkBoxRight {
+            width: 1083px;
+            color:#333;
+            display: flex;
+            align-items: flex-start;
+            flex-wrap: wrap;
+            span {
+                margin-right: 50px;
+                display: block;
+                margin-bottom: 20px;
+            }
+        }
+    }
+    .footerMenuBox {
+        border-bottom: none;
+        background-color: #2F7ADD;
+        .footerMenu {
+            width: 1200px;
+            margin:0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 50px;
+            div{
+                color:#fff;
+                font-size: 14px;
+                font-weight: bold;
+                width: 200px;
+                text-align: center;
+                border-right: 1px solid #1962C3;
+                &:last-child {
+                    border-right: none;
+                }
+            }
+        }
+    }
+    .footerInfoBox {
+        width:1200px;
+        padding-bottom: 30px;
+        margin:0 auto;
+        box-sizing: content-box;
+        .footerInfoBoxContent {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .footerInfoBoxContentLeft {
+                width: 10%;
+                box-sizing: border-box;
+                padding-right: 10px;
+                img {
+                    width: 100%;
+                    display: block;
+                }
+            }
+            .footerInfoBoxContentMain {
+                padding-top: 40px;
+                font-size: 14px;
+                text-align: center;
+                div {
+                    text-align: center;
+                    padding-bottom: 10px;
+                    color: #333;
+                }
+            }
+            .footerInfoBoxContentRight {
+                width: 10%;
+                box-sizing: border-box;
+                padding-left: 10px;
+                img {
+                    width: 100%;
+                    display: block;
+                }
+            }
+        }
+        .footerInfoBoxBottom {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-top: 40px;
+            img {
+                width: 10%;
+                display: block;
+                margin-right: 10px;
+            }
+        }
+    }
+}

src/styles/theme/head/style1.less

@@ -0,0 +1,63 @@
+//编辑边框
+.componentBorder {
+    border: 2px dashed #999;
+}
+//风格1
+.headStyle1 {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    .headTopBox {
+        width: 100%;
+        height: 200px;
+        background: url('http://img.bjzxtw.org.cn/pre/image/png/20250527/174830610715978.png') top repeat-x;
+        .headTopBoxBg {
+            width: 1200px;
+            height: 30px;
+            line-height: 30px;
+            font-size: 12px;
+            margin: 0 auto;
+            color: #666666;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .headTopInfoLeft {
+                font-size: 12px;
+                color:#666666;
+            }
+            .headTopInfoRight {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .headInfoItem {
+                    display: flex;
+                    align-items: center;
+                    margin-right: 10px;
+                    cursor: pointer;
+                    img {
+                        margin-right: 5px;
+                    }
+                }
+                .headInfoItem:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+        .headLogoBox {
+            width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            height: 170px;
+            align-items: center;
+            justify-content: space-between;
+            .headAdTopBox {
+                position: relative;
+                img{
+                    display: block;
+                }
+            }
+        }
+    }
+}

src/styles/theme/menu/style1.less

@@ -0,0 +1,80 @@
+.menuStyle1 {
+    width: 100%;
+    height: 130px;
+    background: #1C5468;
+    .componentBorder {
+        border-left: 2px dashed #999;
+        border-right: 2px dashed #999;
+    }
+    .menuBoxBg {
+        width: 1200px;
+        height: 130px;
+        background: #1C5468;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .menuBox {
+            box-sizing: border-box;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            div {
+                width: 12.5%;
+                cursor: pointer;
+                box-sizing: border-box;
+                font-size: 14px;
+                height: 22px;
+                line-height: 22px;
+                text-align: center;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                text-align: center;
+                color: #fff;
+                background: #1C5468;
+                border-right: #002D41 1px solid;
+                border-left: #29799D 1px solid;
+                margin-bottom: 15px;
+                /* 当是第17个及以后的div时去掉margin-bottom */
+                &:nth-child(n+17) {
+                    margin-bottom: 0;
+                }
+                /* 每行的第一个（第1、9、17...个）去掉左边框 */
+                &:nth-child(8n+1) {
+                    border-left: none;
+                }
+                /* 每行的最后一个（第8、16、24...个）去掉右边框 */
+                &:nth-child(8n) {
+                    border-right: none;
+                }
+                /* 最后一行的最后一个（如果总数不是8的倍数）去掉右边框 */
+                &:last-child {
+                    border-right: none;
+                }
+            }
+        }
+    }
+    .menuSectorInputBox {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 14px;
+        width: 80%;
+        margin: 0 auto;
+        border-top: none;
+        height: 50px;
+        .menuSectorInputBoxItem {
+            padding: 0 10px;
+            input {
+                margin-right: 10px;
+            }
+            .el-select {
+                margin-right: 10px;
+            }
+        }
+    }
+    .componentMenuBorder {
+        border: 2px dashed #999;
+    }
+}

src/styles/theme/menu/style2.less

@@ -0,0 +1,80 @@
+.menuStyle2 {
+    width: 100%;
+    height: 130px;
+    background: #2F7ADD;
+    .componentBorder {
+        border-left: 2px dashed #999;
+        border-right: 2px dashed #999;
+    }
+    .menuBoxBg {
+        width: 1200px;
+        height: 130px;
+        background: #2F7ADD;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .menuBox {
+            box-sizing: border-box;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            div {
+                width: 12.5%;
+                cursor: pointer;
+                box-sizing: border-box;
+                font-size: 14px;
+                height: 22px;
+                line-height: 22px;
+                text-align: center;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                text-align: center;
+                color: #fff;
+                background: #2F7ADD;
+                border-right: #1A63C4 1px solid;
+                border-left: #4C92EF 1px solid;
+                margin-bottom: 15px;
+                /* 当是第17个及以后的div时去掉margin-bottom */
+                &:nth-child(n+17) {
+                    margin-bottom: 0;
+                }
+                /* 每行的第一个（第1、9、17...个）去掉左边框 */
+                &:nth-child(8n+1) {
+                    border-left: none;
+                }
+                /* 每行的最后一个（第8、16、24...个）去掉右边框 */
+                &:nth-child(8n) {
+                    border-right: none;
+                }
+                /* 最后一行的最后一个（如果总数不是8的倍数）去掉右边框 */
+                &:last-child {
+                    border-right: none;
+                }
+            }
+        }
+    }
+    .menuSectorInputBox {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 14px;
+        width: 80%;
+        margin: 0 auto;
+        border-top: none;
+        height: 50px;
+        .menuSectorInputBoxItem {
+            padding: 0 10px;
+            input {
+                margin-right: 10px;
+            }
+            .el-select {
+                margin-right: 10px;
+            }
+        }
+    }
+    .componentMenuBorder {
+        border: 2px dashed #999;
+    }
+}

src/types/vue-grid-layout.d.ts

@@ -0,0 +1,5 @@
+declare module 'vue-grid-layout' {
+  import { Component } from 'vue'
+  export const GridLayout: Component
+  export const GridItem: Component
+} 

src/views/advertise/adPlaceList.vue

@@ -8,9 +8,9 @@
                     <div class="searchBox">
                         <div class="searchTitle">网站名称</div>
                         <el-select v-model="webSiteName_id" :multiple="false" :multiple-limit="1" filterable remote
-                            reserve-keyword placeholder="请输入网站名称" clearable :remote-method="getWebNavList"
+                            reserve-keyword placeholder="请输入网站名称" clearable :remote-method="getWebNavLists"
                             :loading="webSiteLoading" @change="selectWebSite">
-                            <el-option v-for="item in webSiteList" :key="item.value" :label="item.label"
+                            <el-option v-for="item in webSiteLists" :key="item.value" :label="item.label"
                                 :value="item.value">
                             </el-option>
                         </el-select>
@@ -105,7 +105,7 @@
                     <el-form-item label="网站名称:" prop="webName">
                         <el-select v-model="ruleForm.webName" :multiple="false" :multiple-limit="1" filterable remote
                             reserve-keyword placeholder="请输入网站名称" :remote-method="getWebNavList"
-                            :loading="webSiteLoading" @change="detectionWebSite">
+                            :loading="webSiteLoading" @change="detectionWebSite" :disabled="disabledFields.webName">
                             <el-option v-for="item in webSiteList" :key="item.value" :label="item.label"
                                 :value="item.value">
                             </el-option>
@@ -115,7 +115,7 @@
                         <el-input v-model="ruleForm.adName" placeholder="请输入广告位名称"></el-input>
                     </el-form-item>
                     <el-form-item label="广告位标识:" prop="adTag">
-                        <el-input v-model="ruleForm.adTag" placeholder="请输入广告位标识"></el-input>
+                        <el-input v-model="ruleForm.adTag" placeholder="请输入广告位标识" :disabled="disabledFields.adTag"></el-input>
                     </el-form-item>
                     <el-form-item label="广告位介绍:" prop="adDesc">
                         <el-input v-model="ruleForm.adDesc" type="textarea" :rows="2" placeholder="请输入广告位介绍"
@@ -150,11 +150,11 @@
                         </div>
                     </el-form-item>
                     <el-form-item label="广告类型:" prop="adType">
-                        <el-radio v-model="ruleForm.adType" label='2'>图片</el-radio>
+                        <el-radio v-model="ruleForm.adType" label='2' :disabled="disabledFields.adType">图片</el-radio>
                     </el-form-item>
                     <el-form-item label="广告位大小:" prop="adSize">
-                        <el-select v-model="ruleForm.adSize" placeholder="请选择广告位大小" @change="change">
-                            <el-option v-for="item in options" :key="item.id" :label="item.size" :value="item.id">
+                        <el-select v-model="ruleForm.adSize" placeholder="请选择广告位大小" @change="change" :disabled="disabledFields.adSize">
+                            <el-option v-for="item in options" :key="item.id" :label="item.size" :value="item.id" >
                             </el-option>
                         </el-select>
                     </el-form-item>
@@ -207,6 +207,7 @@ export default {
 
             // 可以输入的搜索框相关
             webSiteList: [],//获取关联网站列表
+            webSiteLists: [],
             webSiteLoading: false,
 
             //3.4 上传logo图片
@@ -232,7 +233,12 @@ export default {
             webSiteName_id: '', //网站名称id
             adPlaceName: '', //广告位名称
             website_id: "", //网站id
-
+            disabledFields: {
+                webName: false,
+                adTag: false,
+                adType: false,
+                adSize: false
+            },
             ruleForm: {
                 webName: '', //网站名称
                 adName: '', //广告位名称
@@ -412,6 +418,15 @@ export default {
             console.log(id, val);
             // console.log("状态", val.status);
 
+            // 检查 website_column_arr_id 数组是否包含 2
+            const shouldDisable = val.website_column_arr_id && val.website_column_arr_id.includes(2);
+            this.disabledFields = {
+                webName: shouldDisable,
+                adTag: shouldDisable,
+                adType: shouldDisable,
+                adSize: shouldDisable
+            };
+
             //数据回显
             this.website_id = val.website_id
             this.ruleForm.webName = val.website_name //网站名称
@@ -628,7 +643,7 @@ export default {
         getWebNavList(query) {
             if (query !== '') {
                 this.webSiteLoading = true;
-                let data = { keyword: query }
+                let data = { keyword: query ,website_column_id:2}
                 let dataArr = [];
                 this.$store.dispatch('pool/getNavWebList', data).then(res => {
                     console.log(res.data)
@@ -651,6 +666,33 @@ export default {
                 this.navList = [];
             }
         },
+        
+        getWebNavLists(query) {
+            if (query !== '') {
+                this.webSiteLoading = true;
+                let data = { keyword: query}
+                let dataArr = [];
+                this.$store.dispatch('pool/getNavWebList', data).then(res => {
+                    console.log(res.data)
+                    for (let item of res.data) {
+                        let data = {};
+                        data.key = item.id;
+                        data.value = item.id;
+                        data.label = item.website_name;
+                        dataArr.push(data)
+                    }
+                    this.webSiteLists = dataArr;
+                    this.webSiteLoading = false;
+                }).catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '网络错误，请重试！'
+                    });
+                })
+            } else {
+                this.navList = [];
+            }
+        },
     },
     mounted() {
         this.getData()

src/views/company/checkcompanyList.vue

@@ -0,0 +1,361 @@
+<template>
+  <div class="mainBox">
+    <!--搜索功能 start------------------------------------------------------------>
+    <div class="layerBox_search">
+      <div class="layerBoxLine">
+        <el-row>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">标题：</div>
+              <el-input placeholder="请输入标题" autocomplete="off" v-model="getApiData.title" />
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle"> 网站名称：</div>
+              <el-input placeholder="请输入网站名称" autocomplete="off" v-model="getApiData.website_name" />
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">资讯状态：</div>
+              <el-select v-model="getApiData.status" placeholder="请选择..">
+                <el-option label="待审核" value="0"></el-option>
+                <el-option label="已拒绝" value="2"></el-option>
+              </el-select>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+
+    <div class="layerBoxNoBg">
+      <div>
+        <el-button type="primary" @click="goCreat">添加企业</el-button>
+      </div>
+      <div>
+        <el-button @click="clearSearchList">重置</el-button>
+        <el-button type="primary" @click="getData('search')">搜索</el-button>
+      </div>
+    </div>
+    <!--搜索功能 end------------------------------------------------------------>
+
+    <!--表格内容 start------------------------------------------------------------>
+    <div class="layerBox">
+      <tableTitle :name="tableDivTitle" />
+      <el-row>
+        <template>
+          <el-table :data="tableData" style="width: 100%">
+            <el-table-column fixed prop="id" label="ID" width="80"></el-table-column>
+            <el-table-column prop="title" label="企业题目" width="300">
+              <template slot-scope="scope">
+                <el-popover placement="top-start" width="340" trigger="hover" :content="scope.row.title">
+                  <span slot="reference" class="titleWidth">{{ scope.row.title }}</span>
+                </el-popover>
+              </template>
+            </el-table-column>
+            <el-table-column prop="category_name" label="栏目名称" width="210"></el-table-column>
+            <el-table-column prop="website_name" label="网站名称" width="210"></el-table-column>
+            <el-table-column prop="updated_at" label="修改时间" width=""></el-table-column>
+            <el-table-column prop="status" label="状态" width="">
+              <template slot-scope="scope">
+                <span v-if="scope.row.status == 0">待审核</span>
+                <span v-if="scope.row.status == 1">已通过</span>
+                <span v-if="scope.row.status == 2">已拒绝</span>
+              </template>
+            </el-table-column>
+            <el-table-column fixed="right" label="操作" width="350" header-align="center"
+              v-if="creatNews_user_type == 10000">
+              <template slot-scope="scope">
+                <div class="listBtnBox">
+                  <div class="listMainBtn" @click="getUpRow(scope.row.id, tableData)"><i class="el-icon-check"></i>审核
+                  </div>
+                  <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i
+                      class="el-icon-delete"></i>删除</div>
+                  <div class="listEditBtn" @click="goEdit(scope.row.id, tableData)"><i
+                      class="el-icon-edit-outline"></i>编辑</div>
+                </div>
+              </template>
+            </el-table-column>
+            
+            <el-table-column fixed="right" label="操作" width="180" header-align="center"
+              v-if="creatNews_user_type != 10000">
+              <template slot-scope="scope">
+                <div class="listBtnBox">
+                  <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i
+                      class="el-icon-delete"></i>删除</div>
+                  <div class="listEditBtn" @click="goEdit(scope.row.id, tableData)"><i
+                      class="el-icon-edit-outline"></i>编辑</div>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+      </el-row>
+    </div>
+    <!--分页 start------------------------------------------------------------>
+    <div class="alignBox">
+      <el-row>
+        <el-col :span="24">
+          <el-pagination @size-change="handleSizeChange" :current-page="getApiData.page"
+            @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper"
+            :total="allCount"></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+    <!--分页 end------------------------------------------------------------>
+    <!--表格内容 end------------------------------------------------------------>
+        <!--弹出框1：外部表单弹出框 start------------------------------------------------------------>
+        <el-dialog title="请输入驳回理由" :visible.sync="examineWindow" :close-on-click-modal="false">
+          <el-form :model="form" ref="form" :rules="formRules" label-position="left">
+            <div class="formDiv">
+              <el-form-item label="驳回原因：" :label-width="formLabelWidth" prop="reason" class="custom-align-right">
+                <el-input type="textarea" v-model="form.reason" class="custom-textarea" placeholder="请输入驳回原因"
+                  :rows="3"></el-input>
+              </el-form-item>
+            </div>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <div>
+              <el-button type="info" @click="examineWindow = false">取消</el-button>
+              <el-button type="primary" @click="examineToServe">确定</el-button>
+            </div>
+          </div>
+        </el-dialog>
+        <!--弹出框1：外部表单弹出框 end------------------------------------------------------------>
+  </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle';
+//引入公用样式
+import '@/styles/global.less';
+//获得用户身份
+import { getUseType } from '@/utils/auth'
+
+export default {
+  components: {
+    tableTitle,//表格标题
+  },
+  data() {
+    let self = this;
+    //表单验证
+    const validateEmpty = (rule, value, callback) => {
+      if (value == '') {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      //1.列表和分页相关 start ------------------------------------------------------------>
+      formLabelWidth: "120px",//表单label宽度
+      tableDivTitle: "企业列表",
+      tableData: [],//内容
+      webSiteData: [],//可选网站列表
+      creatNews_user_type: 0,//用户类型
+      //选择要发布的网站
+      webSiteForm: {
+        ignore_ids: []
+      },
+      status: 0,//审核状态
+      ids: [],//待选网站列表
+      loading: false,//loading
+      editId: 0,//要修改的网站id
+      selectStatusWindow: false,//反选窗口
+      getApiData: {
+        id: "",//id
+        title: "",//标题
+        website_name: "",//导航池id
+        ischeck: 1,//待审核列表  1      已审核列表     2
+        islink: "",//是否使用外链
+        status: null,//企业状态
+        page: 1,//当前是第几页
+        pageSize: 10,//一共多少条
+      },
+      //提交驳回
+      form: {
+        reason: ""
+      },
+      formRules: {
+        //导航池名称不能为空
+        reason: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+      },
+      allCount: 0,//总条数
+      examineWindow: false,//审核窗口
+      //分页相关 end ------------------------------------------------------------>
+    }
+  },
+  methods: {
+    //1.列表和分页相关 start ------------------------------------------------------------>
+    //1.1 开始请求列表信息方法
+    getData(type) {
+      if (type == "search") {
+        this.getApiData.page = 1;
+      }
+      this.$store.dispatch('company/getCompanyList', this.getApiData).then(res => {
+        //格式化：islink=0为不使用外面 islink=1为使用外链
+        //status=1为显示 status=2为不显示
+        let data = [];
+        this.tableData = res.data.data; //给与内容
+        this.allCount = res.data.total; //给与总条数
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    //1.2 删除内容
+    deleteRow(id) {
+      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log("当前删除：" + id)
+        this.$store.dispatch('company/delCompany', { id: id }).then(res => {
+          this.getData();
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'warning',
+            message: '网络错误，请重试！'
+          });
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '已取消删除'
+        });
+      });
+    },
+    //1.4 列表内容分页
+    //直接跳转
+    handleSizeChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.5 点击分页
+    handleCurrentChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.6 重置按钮
+    clearSearchList() {
+      this.tableData = [];
+      this.getApiData.id = "";
+      this.getApiData.title = "";
+      this.getApiData.website_name = "";
+      this.getApiData.status = null;
+      this.getApiData.page = 1;
+      this.getApiData.pageSize = 10;
+      this.getData();
+    },
+    //列表和分页相关 end ------------------------------------------------------------>
+
+    //2.添加新闻 start ------------------------------------------------------------>
+    //跳转到企业发布页面
+    goCreat() {
+      this.$router.push({
+        path: '/creatCompany',
+      });
+    },
+    goEdit(id) {
+      let data = {
+        id: id,
+        to: "checkCompany"
+      }
+      this.$router.push({
+        path: '/creatCompany',
+        query: data
+      });
+    },
+    // },
+   //1.4 审核温江
+   getUpRow(id) {
+    //设置待审核的id
+    this.editId = id;
+    console.log(id)
+    this.$confirm('将此文章通过审核吗?', '提示', {
+      confirmButtonText: '通过',
+      cancelButtonText: '拒绝',
+      distinguishCancelAndClose: true,  // 关键配置项，用于区分取消和关闭按钮
+      type: 'warning'
+    }).then(() => {
+      this.upRow(id, 1)
+    }).catch((the_reback) => {
+      //输入驳回理由
+      
+      if (the_reback == "cancel") {
+        //输入驳回理由
+        // console.log("驳回" )
+        this.examineWindow = true;
+      }
+
+    })
+  },
+  // //3.5 修改文章状态
+  upRow(id, status) {
+      let data = {
+        id: id,
+        status: status
+      }
+      this.$store.dispatch('company/checkCompany', data).then(res => {
+        if (res.code == 200) {
+          this.$message({
+            type: 'success',
+            message: '操作成功！'
+          });
+          this.getData();
+        }
+      })
+    },
+    //3.编辑新闻 end ------------------------------------------------------------>
+
+    //提交驳回内容
+    examineToServe(id) {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          let data = {
+            id: this.editId,
+            status: 2,//驳回status
+            reason: this.form.reason
+          }
+          this.$store.dispatch('company/checkCompany', data).then(res => {
+            if (res.code == 200) {
+              this.$message({
+                type: 'success',
+                message: '操作成功！'
+              });
+              this.getData();
+              this.form.reason = "";//清空上一次的输入
+              this.examineWindow = false;
+            }
+          })
+        } else {
+          this.$message.error("驳回理由不能为空！")
+        }
+      })
+    },
+  },
+  mounted() {
+    this.creatNews_user_type = getUseType()
+    //1.获得初始数据
+    this.getData();
+  }
+}
+</script>
+
+<style scoped lang="less">
+.titleWidth {
+  width: 350px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

src/views/company/companyList.vue

@@ -0,0 +1,421 @@
+<template>
+    <div class="mainBox">
+      <!--搜索功能 start------------------------------------------------------------>
+      <div class="layerBox_search">
+        <div class="layerBoxLine">
+          <el-row>
+            <el-col :span="8">
+              <div class="searchBox">
+                <div class="searchTitle">标题：</div>
+                <el-input placeholder="请输入标题" autocomplete="off" v-model="getApiData.title" />
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="searchBox">
+                <div class="searchTitle"> 网站名称：</div>
+                <el-input placeholder="请输入网站名称" autocomplete="off" v-model="getApiData.category_name" />
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+  
+      <div class="layerBoxNoBg">
+        <div>
+          <el-button type="primary" @click="goCreat">添加企业</el-button>
+        </div>
+        <div>
+          <el-button @click="clearSearchList">重置</el-button>
+          <el-button type="primary" @click="getData('search')">搜索</el-button>
+        </div>
+      </div>
+      <!--搜索功能 end------------------------------------------------------------>
+  
+      <!--表格内容 start------------------------------------------------------------>
+      <div class="layerBox">
+        <tableTitle :name="tableDivTitle" />
+        <el-row>
+          <template>
+            <el-table :data="tableData" style="width: 100%">
+              <el-table-column fixed prop="id" label="ID" width="80"></el-table-column>
+              <el-table-column prop="title" label="企业题目" width="300">
+                <template slot-scope="scope">
+                  <el-popover placement="top-start" width="340" trigger="hover" :content="scope.row.title">
+                    <span slot="reference" class="titleWidth">{{ scope.row.title }}</span>
+                  </el-popover>
+                </template>
+              </el-table-column>
+              <el-table-column prop="category_name" label="栏目名称" width="210"></el-table-column>
+              <el-table-column prop="website_name" label="网站名称" width="210"></el-table-column>
+              <el-table-column prop="updated_at" label="修改时间" width=""></el-table-column>
+              <el-table-column prop="status" label="状态" width="">
+                <template slot-scope="scope">
+                  <span v-if="scope.row.status == 0">待审核</span>
+                  <span v-if="scope.row.status == 1">已通过</span>
+                  <span v-if="scope.row.status == 2">已拒绝</span>
+                </template>
+              </el-table-column>
+              <el-table-column fixed="right" label="操作" width="350" header-align="center"
+                v-if="creatNews_user_type == 10000">
+                <template slot-scope="scope">
+                  <div class="listBtnBox">
+                    <div class="listUpBtn" @click="returnRow(scope.row.id, tableData)"><i
+                        class="el-icon-refresh-right"></i>撤回</div>
+                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i
+                        class="el-icon-delete"></i>删除</div>
+                    <div class="listEditBtn" @click="goEdit(scope.row.id, tableData)"><i
+                        class="el-icon-edit-outline"></i>编辑</div>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column fixed="right" label="操作" width="180" header-align="center"
+                v-if="creatNews_user_type != 10000">
+                <template slot-scope="scope">
+                  <div class="listBtnBox">
+                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i
+                        class="el-icon-delete"></i>删除</div>
+                    <div class="listEditBtn" @click="goEdit(scope.row.id, tableData)"><i
+                        class="el-icon-edit-outline"></i>编辑</div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </template>
+        </el-row>
+      </div>
+      <!--分页 start------------------------------------------------------------>
+      <div class="alignBox">
+        <el-row>
+          <el-col :span="24">
+            <el-pagination @size-change="handleSizeChange" :current-page="getApiData.page"
+              @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper"
+              :total="allCount"></el-pagination>
+          </el-col>
+        </el-row>
+      </div>
+      <!--分页 end------------------------------------------------------------>
+      <!--表格内容 end------------------------------------------------------------>
+  
+      <!--弹出框：选择要发布的网站 start------------------------------------------------------------>
+      <el-dialog title="请选择不要发布的网站" :visible.sync="selectStatusWindow" :close-on-click-modal="false">
+        <el-form label-position="left">
+          <div class="formDiv">
+            <el-table v-loading="loading" ref="multipleTable" :data="webSiteData" tooltip-effect="dark"
+              style="width: 100%" @selection-change="handleSelectionChange">
+              <el-table-column type="selection" width="55"></el-table-column>
+              <el-table-column prop="website_id" label="网站id"></el-table-column>
+              <el-table-column prop="website_name" label="网站名称"></el-table-column>
+            </el-table>
+          </div>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <div>
+            <el-button type="info" @click="selectStatusWindow = false">取消</el-button>
+            <el-button type="primary" @click="selectWebSiteToServe">确定</el-button>
+          </div>
+        </div>
+      </el-dialog>
+      <!--弹出框：选择要发布的网站 end------------------------------------------------------------>
+    </div>
+  </template>
+  
+  <script>
+  //表格标题
+  import tableTitle from './components/tableTitle';
+  //引入公用样式
+  import '@/styles/global.less';
+  //获得用户身份
+  import { getUseType } from '@/utils/auth'
+  
+  export default {
+    components: {
+      tableTitle,//表格标题
+    },
+    data() {
+      return {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        tableDivTitle: "企业列表",
+        tableData: [],//内容
+        webSiteData: [],//可选网站列表
+        creatNews_user_type: 0,//用户类型
+        //选择要发布的网站
+        webSiteForm: {
+          ignore_ids: []
+        },
+        ids: [],//待选网站列表
+        loading: false,//loading
+        editId: 0,//要修改的网站id
+        selectStatusWindow: false,//反选窗口
+        getApiData: {
+          id: "",//id
+          title: "",//标题
+          category_name: "",//导航池id
+          ischeck: 2,//待审核列表  1      已审核列表     2
+          islink: "",//是否使用外链
+          status: 1,//企业状态
+          page: 1,//当前是第几页
+          pageSize: 10,//一共多少条
+        },
+        allCount: 0,//总条数
+        //分页相关 end ------------------------------------------------------------>
+      }
+    },
+    methods: {
+      //1.列表和分页相关 start ------------------------------------------------------------>
+      //1.1 开始请求列表信息方法
+      getData(type) {
+        if (type == "search") {
+          this.getApiData.page = 1;
+        }
+        this.$store.dispatch('company/getCompanyList', this.getApiData).then(res => {
+          //格式化：islink=0为不使用外面 islink=1为使用外链
+          //status=1为显示 status=2为不显示
+          let data = [];
+          this.tableData = res.data.data; //给与内容
+          this.allCount = res.data.total; //给与总条数
+        }).catch(() => {
+          this.$message({
+            type: 'warning',
+            message: '网络错误，请重试！'
+          });
+        })
+      },
+      //1.2 删除内容
+      deleteRow(id) {
+        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          console.log("当前删除：" + id)
+          this.$store.dispatch('company/delCompany', { id: id }).then(res => {
+            this.getData();
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+          }).catch(() => {
+            this.$message({
+              type: 'warning',
+              message: '网络错误，请重试！'
+            });
+          })
+        }).catch(() => {
+          this.$message({
+            type: 'warning',
+            message: '已取消删除'
+          });
+        });
+      },
+      //1.3 修改网站状态
+      upRow(id, status) {
+        let data = {
+          id: id,
+          status: status
+        }
+        this.$store.dispatch('company/upCompany', data).then(res => {
+          if (res.code == 200) {
+            this.$message({
+              type: 'success',
+              message: '企业状态已修改!'
+            });
+          }
+        }).catch(() => {
+          this.$message({
+            type: 'warning',
+            message: '已取消删除'
+          });
+        });
+      },
+      //1.4 列表内容分页
+      //直接跳转
+      handleSizeChange(val) {
+        this.getApiData.page = val;
+        this.getData();
+      },
+      //1.5 点击分页
+      handleCurrentChange(val) {
+        this.getApiData.page = val;
+        this.getData();
+      },
+      //1.6 重置按钮
+      clearSearchList() {
+        this.tableData = [];
+        this.getApiData.id = "";
+        this.getApiData.title = "";
+        this.getApiData.category_name = "";
+        this.getApiData.author = "";
+        this.getApiData.islink = "";
+        this.getApiData.status = "";
+        this.getApiData.page = 1;
+        this.getApiData.pageSize = 10;
+        this.getData();
+      },
+      //列表和分页相关 end ------------------------------------------------------------>
+  
+      //2.添加新闻 start ------------------------------------------------------------>
+      //跳转到企业发布页面
+      goCreat() {
+        this.$router.push({
+          path: '/creatCompany',
+        });
+      },
+      goEdit(id) {
+        let data = {
+          id: id
+        }
+        this.$router.push({
+          path: '/creatCompany',
+          query: data
+        });
+      },
+      //添加新闻 end ------------------------------------------------------------>
+  
+      //3.编辑新闻 start ------------------------------------------------------------>
+      //3.1 打开反选窗口
+      selectRow(cid, row) {
+        console.log(row)
+        this.selectStatusWindow = true;
+        //给与编辑的id
+        this.editId = row.id;
+        //给与编辑的状态
+        this.editStatus = row.status;
+        //把cid转换成数组，然后取出最后一位
+  
+        let cidLast = "";
+        // 判断cid是否为数组
+        if (!Array.isArray(cid)) {
+          let cidArr = cid.replace(/[\[\]]/g, '').split(',');
+          cidLast = cidArr[cidArr.length - 1];
+        } else {
+          cidLast = cid[cid.length - 1];
+        }
+        this.getWebsiteNavPoolSite(cidLast, row)
+      },
+      //3.2 获取可选网站列表
+      getWebsiteNavPoolSite(cid, row) {
+        this.loading = true;
+        let ignoreIds = JSON.parse(row.ignore_ids);
+        this.webSiteData = [];
+        this.$store.dispatch('news/getWebsiteNavPoolSite', { category_id: cid }).then(res => {
+          //this.webSiteData = res.data;
+          for (let item of res.data) {
+            if (item.website_name != null) {
+              this.webSiteData.push(item)
+            }
+          }
+  
+          //延迟一会返显，否则可能显示不了
+          if (res.data.length > 0 && ignoreIds != null) {
+            setTimeout(() => {
+              for (let index in this.webSiteData) {
+                if (ignoreIds.includes(this.webSiteData[index].website_id)) {
+                  //调用回显方法
+                  this.toggleSelection([this.webSiteData[index]])
+                }
+              }
+              this.loading = false;
+            }, 500)
+          } else {
+            this.loading = false;
+          }
+        })
+      },
+      //3.3 回显 选中的方法 
+      toggleSelection(rows) {
+        console.log(rows)
+        if (rows) {
+          rows.forEach(row => {
+            this.$refs.multipleTable.toggleRowSelection(row);
+          });
+        } else {
+          this.$refs.multipleTable.clearSelection();
+        }
+      },
+      //3.4 把选择的网站保存到待选择的网站列表
+      handleSelectionChange(val) {
+        console.log(val)
+        this.ids = val;
+      },
+      //3.5 提交选择的网站列表
+      selectWebSiteToServe(id) {
+        let ids = [];
+        for (let item of this.ids) {
+          ids.push(item.website_id)
+        }
+        //把数组转换为字符串
+        //let idsStr = ids.join(',');
+        //把数组转换为字符串
+        let idsStr = JSON.stringify(ids);
+  
+        if (idsStr.length == 0) {
+          this.$message.error("至少需要选择一个网站！")
+          return;
+        } else {
+          let data = {
+            id: this.editId,
+            ignore_ids: idsStr,
+            status: this.editStatus
+          }
+          this.$store.dispatch('news/upArticleStatus', data).then(res => {
+            console.log(res)
+            if (res.code == 200) {
+              this.$message({
+                type: 'success',
+                message: '企业绑定网站成功！'
+              });
+              this.selectStatusWindow = false;
+              this.getData();
+            } else {
+              this.$message.error(res.data.msg)
+            }
+          })
+        }
+      },
+      //3.6 撤回审核
+      returnRow(id) {
+        this.$confirm('确定要撤回吗?', '提示', {
+          confirmButtonText: '撤回',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          //撤回，把文章状态修改为0，重新进行审核
+          this.upRow(id, 0)
+        })
+      },
+      //3.5 修改文章状态
+      upRow(id, status) {
+        let data = {
+          id: id,
+          status: 0
+        }
+        this.$store.dispatch('company/checkCompany', data).then(res => {
+          if (res.code == 200) {
+            this.$message({
+              type: 'success',
+              message: '操作成功！'
+            });
+            this.getData();
+          }
+        })
+      },
+      //3.编辑新闻 end ------------------------------------------------------------>
+  
+    },
+    mounted() {
+      this.creatNews_user_type = getUseType()
+      //1.获得初始数据
+      this.getData();
+    }
+  }
+  </script>
+  
+  <style scoped lang="less">
+  .titleWidth {
+    width: 350px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  </style>
+  

src/views/company/components/CityCascader.vue

@@ -0,0 +1,106 @@
+<template>
+  <el-cascader
+    :key="cascaderKey"
+    v-model="internalValue"
+    placeholder="请选择地区"
+    :props="SearchCityData"
+    filterable
+    clearable
+    @change="handleChange">
+  </el-cascader>
+</template>
+
+<script>
+export default {
+  props: {
+    value: { // 接收外部传递的 v-model 值
+      type: [Array, String], // 允许传入数组或字符串类型的数据
+      default: () => [],
+    },
+  },
+  data() {
+    let self = this;
+    return {
+      internalValue: [], // 用于与级联选择器进行双向绑定的内部数据
+      cascaderKey: 0, // 用于强制刷新 cascader
+      SearchCityData: {
+        checkStrictly: true,
+        lazy: true,
+        async lazyLoad(node, resolve) {
+          const { level, data } = node;
+          let parentId = level == 0 ? 0 : data.value;
+          let parames = {
+            pid: parentId,
+          };
+          self.$store
+            .dispatch("pool/getcityList", parames)
+            .then((res) => {
+              if (res.data) {
+                const nodes = res.data.map((item) => ({
+                  value: item.id,
+                  label: item.name,
+                  leaf: level >= 3,
+                  children: [],
+                }));
+                resolve(nodes);
+              }
+            })
+            .catch(() => {
+              this.$message({
+                type: "info",
+                message: "网络错误，请重试！",
+              });
+            });
+        },
+      },
+    };
+  },
+  watch: {
+    value: {
+      immediate: true, // 组件挂载时立即执行
+      handler(newVal) {
+        try {
+          const parsedValue = Array.isArray(newVal) ? newVal : JSON.parse(newVal);
+          this.internalValue = parsedValue; // 设置内部值
+          if (parsedValue.length) {
+            this.loadCascaderPath(parsedValue); // 动态加载回显的路径
+          }
+        } catch (error) {
+          console.error("无法解析传入的值:", error);
+          this.internalValue = []; // 如果解析失败，重置为默认空数组
+        }
+      },
+    },
+  },
+  methods: {
+    handleChange(value) {
+      // 当选择变化时，向父组件发送更新的值
+      this.$emit("input", value); // v-model 双向绑定
+      this.$emit("update-city-id", value); // 额外事件，方便父组件监听
+    },
+    async loadCascaderPath(path) {
+      for (let i = 0; i < path.length; i++) {
+        const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
+        const level = i; // 当前层级的索引
+        await this.$store.dispatch('pool/getcityList', { pid: parentId })
+          .then((res) => {
+            const nodes = res.data.map(item => ({
+              value: item.id,
+              label: item.name,
+              leaf: level >= 3, // 假设4层结构，设置叶子节点标记
+            }));
+            // 级联选择器加载数据
+            if (level === path.length - 1) {
+              this.internalValue = path; // 确保最后一级路径正确设置
+              this.cascaderKey += 1; // 强制刷新 cascader
+            }
+          });
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 可根据需要自定义样式 */
+</style>

src/views/company/components/tableTitle.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="tableTitle">
+    <span class="tableFloatLine"></span>
+    {{ name }}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+.tableTitle {
+  color: #333333;
+  position: relative;
+  padding-bottom: 20px;
+  margin-top: 20px;
+
+  .tableFloatLine {
+    width: 3px;
+    height: 16px;
+    background: #5570F1;
+    display: block;
+    position: absolute;
+    left: -20px;
+    top: 1px;
+  }
+}
+</style>

src/views/company/components/tableTitle1.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="tableTitle">
+    <span class="tableFloatLine"></span>
+    {{ name }}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+.tableTitle {
+  color: #333333;
+  position: relative;
+  padding-bottom: 20px;
+
+  .tableFloatLine {
+    width: 3px;
+    height: 16px;
+    background: #5570F1;
+    display: block;
+    position: absolute;
+    left: -20px;
+    top: 1px;
+  }
+}
+</style>

src/views/company/creatCompany.vue

@@ -0,0 +1,1076 @@
+<template>
+  <div class="mainBox">
+    <div class="layerBox">
+      <tableTitle :name="tableDivTitle" />
+      <el-form :model="form" ref="form" :rules="formRules" label-position="left" label-width="140px">
+        <div class="formDiv">
+          <div v-if="creatNews_user_type == 10000">
+            <el-form-item label="站点名称：" prop="website_id" class="custom-align-right">
+              <el-cascader :key="parentKey" v-model="form.website_id" placeholder="请选择站点名称"
+                popper-class="my_cascader" :options="creatNews_nav_pool_arr"
+                @change="creatNews_nav_pool_change_fun(form.website_id)" filterable clearable></el-cascader>
+            </el-form-item>
+            <el-form-item label="栏目名称：" prop="cat_arr_id" class="custom-align-right">
+                <el-cascader :key="parentKey_2" v-model="form.cat_arr_id" placeholder="请选择要绑定的展示名称" 
+                popper-class="my_cascader" style="height: 100%;" :props="parentData_2" filterable clearable>
+                </el-cascader>
+            </el-form-item>
+          </div>
+          <div v-if="creatNews_user_type != 10000">
+            <el-form-item label="栏目名称：" prop="cat_arr_id" class="custom-align-right">
+              <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的展示名称" :props="parentData"
+                  popper-class="my_cascader" style="height: 100%;" filterable clearable>
+              </el-cascader>
+            </el-form-item>
+          </div>
+          <div>
+          <el-form-item label="企业名称：" prop="title" class="custom-align-right">
+            <el-input v-model="form.title" autocomplete="off" placeholder="请输入企业名称"></el-input>
+            <!-- <el-checkbox v-model="form.islink">是否使用外链</el-checkbox> -->
+          </el-form-item>
+          <el-form-item label="作者：" prop="author" class="custom-align-right">
+            <el-input v-model="form.author" autocomplete="off" placeholder="请输入作者"></el-input>
+          </el-form-item>
+          <el-form-item label="来源名称：" prop="source" class="custom-align-right">
+            <el-input v-model="form.source" autocomplete="off" placeholder="请输入来源名称"></el-input>
+          </el-form-item>
+          <el-form-item label="来源链接：" prop="source_url" class="custom-align-right">
+            <el-input v-model="form.source_url" autocomplete="off" placeholder="请输入来源链接"></el-input>
+          </el-form-item>
+          <div>
+            <el-form-item label="缩略图：" class="custom-align-right" prop="">
+              <div class="uploaderBox" @mouseenter="hovering = true" mouseleave="hovering = false">
+                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                  :before-upload="beforeAvatarUpload">
+                  <!-- 预览图片 -->
+                  <img v-if="imgUrl" :src="imgUrl" class="avatar">
+                  <div v-else class="chooseImgDiv">
+                    <div>
+                      <img src="@/assets/public/upload/noImage.png">
+                      <div>选择图片</div>
+                    </div>
+                  </div>
+                </el-upload>
+                <input type="hidden" v-model="form.imgurl">
+                <span class="photo_tips">推荐图片长宽比例为 16:9，大小不能超过 500 K。</span>
+                <div v-if="hovering && imgUrl" class="delete-button" @click="handleDelete">
+                  <i class="el-icon-delete"></i>
+                </div>
+              </div>
+            </el-form-item>
+            <el-form-item label="内容简介：" prop="description" class="custom-align-right">
+              <el-input v-model="form.description" autocomplete="off" placeholder="请输入内容简介" type="textarea" :rows="3"></el-input>
+            </el-form-item>
+            <el-form-item label="企业关键词：" prop="" class="custom-align-right">
+              <template #label>
+                <span class="askBox">
+                  企业关键词：
+                  <el-tooltip class="item" effect="dark" content="企业关键词，如：三农市场网、全国三农、信息一体化。" placement="top">
+                    <i class="el-icon-question"></i>
+                  </el-tooltip>
+                </span>
+              </template>
+              <tagInput :initialTags="tags" @tags-updated="updateTags"></tagInput>
+            </el-form-item>
+            <el-form-item label="企业描述：" prop="" class="custom-align-right">
+              <template #label>
+                <span class="askBox">
+                  企业描述：
+                  <el-tooltip class="item" effect="dark" content="企业描述，如：中国三农市场网创建以来，社会效益和会员经济效益贡献。" placement="top">
+                    <i class="el-icon-question"></i>
+                  </el-tooltip>
+                </span>
+              </template>
+              <el-input type="textarea" v-model="form.introduce" class="custom-textarea"
+                placeholder="请输入企业描述"></el-input>
+            </el-form-item>
+            <el-form-item label="企业性质：" prop="jobnature_id" class="custom-align-right">
+              <el-select v-model="form.jobnature_id" clearable 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-select>
+            </el-form-item>
+            <el-form-item label="负责人：" prop="manager" class="custom-align-right">
+              <el-input v-model="form.manager" autocomplete="off" placeholder="请输入负责人"></el-input>
+            </el-form-item>
+            <el-form-item label="联系人：" prop="content_person" class="custom-align-right">
+              <el-input v-model="form.content_person" autocomplete="off" placeholder="请输入联系人"></el-input>
+            </el-form-item>
+            <el-form-item label="企业网址：" prop="company_url" class="custom-align-right">
+              <el-input v-model="form.company_url" autocomplete="off" placeholder="请输入企业网址"></el-input>
+            </el-form-item>
+            <el-form-item label="联系电话：" prop="telephone" class="custom-align-right">
+              <el-input v-model="form.telephone" autocomplete="off" placeholder="请输入联系电话"></el-input>
+            </el-form-item>
+            <el-form-item label="手机：" prop="mobile" class="custom-align-right">
+              <el-input v-model="form.mobile" autocomplete="off" placeholder="请输入手机"></el-input>
+            </el-form-item>
+            <el-form-item label="QQ：" prop="QQ" class="custom-align-right">
+              <el-input v-model="form.QQ" autocomplete="off" placeholder="请输入QQ"></el-input>
+            </el-form-item>
+            <el-form-item label="邮编：" prop="post_code" class="custom-align-right">
+              <el-input v-model="form.post_code" autocomplete="off" placeholder="请输入邮编"></el-input>
+            </el-form-item>
+            <el-form-item label="传真：" prop="fax" class="custom-align-right">
+              <el-input v-model="form.fax" autocomplete="off" placeholder="请输入传真"></el-input>
+            </el-form-item>
+            <el-form-item label="电子邮件：" prop="email" class="custom-align-right">
+              <el-input v-model="form.email" autocomplete="off" placeholder="请输入电子邮件"></el-input>
+            </el-form-item>
+            <el-form-item label="主营分类：" prop="main_business" class="custom-align-right">
+              <el-input v-model="form.main_business" autocomplete="off" placeholder="请输入主营分类"></el-input>
+            </el-form-item>
+            <el-form-item label="行政区划：" class="custom-align-right" prop="city_arr_id">
+              <CityCascader v-model="form.city_arr_id" @update-city-id="update_city_arr_id"></CityCascader>
+            </el-form-item>
+            <el-form-item label="详细地址：" prop="adress" class="custom-align-right">
+              <el-input v-model="form.adress" autocomplete="off" placeholder="请输入详细地址"></el-input>
+            </el-form-item>
+            <el-form-item label="公司性质：" prop="nature_id" class="custom-align-right">
+              <el-select v-model="form.nature_id" clearable placeholder="请选择公司的性质">
+                <el-option v-for="item in companynature_array" :key="item.id" :label="item.nature_name" :value="item.id">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="行业分类：" prop="hy_id" class="custom-align-right">
+              <el-select v-model="form.hy_id" clearable placeholder="请选择公司的行业分类">
+                <el-option v-for="item in hy_array" :key="item.hyid" :label="item.hyname" :value="item.hyid">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="注册资本：" prop="zc_money" class="custom-align-right">
+              <el-input v-model="form.zc_money" autocomplete="off" placeholder="请输入注册资本"></el-input>
+            </el-form-item>
+            <el-form-item label="注册地址：" prop="zc_address" class="custom-align-right">
+              <el-input v-model="form.zc_address" autocomplete="off" placeholder="请输入注册地址"></el-input>
+            </el-form-item>
+            <el-form-item label="经营模式：" prop="manage_model" class="custom-align-right">
+              <el-input v-model="form.manage_model" autocomplete="off" placeholder="请输入经营模式"></el-input>
+            </el-form-item>
+            <el-form-item label="成立日期：" prop="data" class="custom-align-right">
+              <el-date-picker v-model="form.data" placeholder="请选择成立日期"> </el-date-picker>
+            </el-form-item>
+            <el-form-item label="主营产品或服务：" prop="main_products" class="custom-align-right">
+              <el-input v-model="form.main_products" autocomplete="off" placeholder="请输入主营产品或服务"></el-input>
+            </el-form-item>
+            <el-form-item label="主要采购产品：" prop="main_buy_products" class="custom-align-right">
+              <el-input v-model="form.main_buy_products" autocomplete="off" placeholder="请输入主要采购产品"></el-input>
+            </el-form-item>
+            <el-form-item label="员工人数：" prop="number_id" class="custom-align-right">
+              <el-select v-model="form.number_id" clearable placeholder="请选择公司的员工人数">
+                <el-option v-for="item in companysize_array" :key="item.evalue" :label="item.ename" :value="item.evalue">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="主要职能：" prop="main_functions" class="custom-align-right">
+              <el-input v-model="form.main_functions" autocomplete="off" placeholder="请输入公司的主要职能"></el-input>
+            </el-form-item>
+              <el-form-item label="企业内容：" prop="content" class="custom-align-right">
+                <myEditor ref="myEditor" v-model="form.content"></myEditor>
+              </el-form-item>
+              <el-form-item label="" prop="commend_id" class="custom-align-right">
+                <draggable v-model="form.commend_id" @end="onDragEnd">
+                  <el-tag :key="item.id" v-for="item in form.commend_id" closable :disable-transitions="false"
+                    @close="handleClose(item)"> {{ item }}
+                  </el-tag>
+                </draggable>
+              </el-form-item>
+            </div>
+          </div>
+        </div>
+      </el-form>
+    </div>
+    <div class="bottomBtnBox">
+      <el-button type="info" @click="returnPage">返回</el-button>
+      <el-button type="primary" @click="editToServe" v-if="editStatus == true">确定</el-button>
+      <el-button type="primary" @click="addToServe" v-else>确定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getWebSiteId, getUseType } from '@/utils/auth'
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+//引入tag标签组件
+import tagInput from '../../components/InputTag/index.vue';
+//引入公用样式
+import '@/styles/global.less';
+//城市级联选择器
+import CityCascader from './components/CityCascader';
+//引入富文本编辑器
+import myEditor from '../../components/edit/myEditor.vue';
+//引入拖拽组件
+import draggable from 'vuedraggable';
+
+export default {
+  components: {
+    tableTitle,
+    CityCascader,
+    tagInput,
+    myEditor,
+    draggable
+  },
+  data() {
+    //0.全局操作 start ------------------------------------------------------------>
+    //表单验证
+    const validateEmpty = (rule, value, callback) => {
+      if (value == '') {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    const validateArray = (rule, value, callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    const validateRadio = (rule, value, callback) => {
+      if (value != '1' || value != '0') {
+        callback()
+      } else {
+        callback()
+      }
+    }
+    const validateZero = (rule, value, callback) => {
+      if (value == 0 || value == '' || value == "0") {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    let self = this;
+    //0.全局操作 end ------------------------------------------------------------>
+    return {
+      loading: false,
+      logoUrl: '',
+      hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+      tags: [],//标签数组
+      websiteid: 0,
+      creatNews_pid_num: "0",//请求子导航用的pid
+      creatNews_nav_pool_arr: [],//
+      creatNews_add_nav_pool_arr: [],//
+      creatNews_son_website_id_num: "",
+      checked: false,
+      formLabelWidth: '80px',//表单的长度
+      //1.表单项 start ------------------------------------------------------------>
+      editStatus: false,
+      tableDivTitle:"添加企业",
+      disclaimer: true,//免责声明
+      //提交表单
+      creatNews_user_type: 0,//判断用户类型'
+      created_at: "",//创建时间
+
+      // 企业专属-下拉列表
+      companynature_array: [],//企业性质
+      hy_array: [],//行业分类
+      companysize_array: [],//公司规模
+      form: {
+        website_id: 0,//站点id
+        cat_arr_id: [],//导航池名称
+        nav_add_pool_id: [],//导航池子级
+        title: '',//企业标题
+        author: "",//作者
+        source: "",//来源名称
+        source_url: "",//来源地址
+        imgurl: "",//缩略图
+        introduce: "",//描述
+        keyword: "",//关键词
+        description: "",//简介
+        jobnature_id: null,//企业性质
+        manager: "",//负责人
+        content_person: "",//联系人
+        company_url: "",//企业网址
+        telephone: "",//联系电话
+        mobile: "",//手机
+        QQ: "",//QQ
+        post_code: "",//邮编
+        fax: "",//传真
+        email: "",//电子邮件
+        main_business: "",//主营分类
+        adress: "",//详细地址
+        nature_id: null,//公司性质
+        hy_id: null,//行业分类
+        zc_money: "",//注册资本
+        zc_address: "",//注册地址
+        manage_model: "",//经营模式
+        data: null,//成立日期
+        main_products: "",//主营产品或服务
+        main_buy_products: "",//主要采购产品
+        number_id: null,//员工人数
+        main_functions: "",//主要职能
+        content: "",//企业内容
+        user_type: "??",//判断用户类型'
+        city_arr_id: [],//行政区划
+        city_id: "",//区划最后一个数字
+        status: 0,//状态状态：0：未审核；1：已审核；2：已拒绝；
+      },
+      //1.2 表单验证规则
+      formRules: {
+        //导航池名称不能为空
+        website_id: [{ required: true, trigger: 'blur', validator: validateZero }],
+        //企业名称不能为空
+        title: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        //如果使用了外链，外链地址不能为空
+        // city_arr_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        //导航池名称不能为空
+        cat_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
+        //行政区划
+        city_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
+        //内容不能为空
+        content: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+      },
+
+      //1.4图片上传
+      imgUrl: "",//在页面上显示缩略图
+      //获取父级导航池
+      parentKey: 0,//获取父级导航
+      parentData: {
+        checkStrictly: true,
+        lazy: true,
+        async lazyLoad(node, resolve) {
+          const { level, data } = node;
+          if (data && data.children && data.children.length !== 0) {
+            return resolve(node)
+          }
+          let parentId;
+          parentId = level == 0 ? 0 : data.value;
+          let parames = {
+            'type': 1,
+            'website_id': getWebSiteId(),
+            'pid': parentId
+          }
+          self.$store.dispatch('pool/get_creatNews_nav_son_actions', parames).then(res => {
+            if (res.data) {
+              const nodes = res.data.map(item => ({
+                value: item.category_id,
+                label: item.name,
+                leaf: level >= 3,
+                children: [],
+                disabled: item.type != 1
+              }))
+              resolve(nodes)
+            }
+          })
+        }
+      },
+      parentKey_2: 0,//获取父级导航 
+      parentData_2: {
+        checkStrictly: true,
+        lazy: true,
+        async lazyLoad(node, resolve) {
+          const { level, data } = node;
+          if (data && data.children && data.children.length !== 0) {
+            return resolve(node)
+          }
+          let parentId;
+          if (self.ifwebsitId == true) {
+            console.log("网站选择已经改变！")
+            parentId = 0;
+            self.ifwebsitId = false;
+            self.cat_arr_id = [];
+          } else {
+            parentId = level == 0 ? 0 : data.value;
+            self.ifwebsitId = false;
+          }
+          let parames = {
+            'type': 1,
+            'website_id': self.form.website_id,
+            'pid': parentId
+          }
+          self.$store.dispatch('pool/get_creatNews_nav_son_actions', parames).then(res => {
+            if (res.data) {
+              const nodes = res.data.map(item => ({
+                value: item.category_id,
+                label: item.alias,
+                leaf: level >= 3,
+                children: [],
+                disabled: item.type != 1
+              }))
+              resolve(nodes)
+            }
+          })
+        }
+      },
+      inputList: [
+        { value: '' }
+      ]
+      //表单项 end ------------------------------------------------------------>
+    };
+
+  }, watch: {
+    '$route'(to, from) {
+      console.log(from, '---------------------------------------');
+      // 监听路由参数中的 id 变化，若变化则更新页面状态并获取数据
+      if (to.query.id) {
+        this.getMainData();
+      }
+    },
+  },
+  methods: {
+    // 3.获取行业分类
+    get_hyid(value) {
+      this.$store.dispatch('news/getIndustry').then(res => {
+        this.hy_array = res.data;
+      })
+    },
+     //13.获取公司规模
+     get_company_size(value) {
+      this.$store.dispatch('news/getCompanySize').then(res => {
+        this.companysize_array = res.data;
+      })
+    },
+    //14.获取公司性质
+    get_company_nature(value) {
+      this.$store.dispatch('news/getCompanyNature').then(res => {
+        this.companynature_array = res.data;
+      })
+    },
+    //1.提交表单 start ------------------------------------------------------------>
+    //1.1 直接上传图片
+    beforeAvatarUpload(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.imgUrl = res.data.imgUrl;//显示缩略图
+        this.form.imgurl = res.data.imgUrl;//提供表单地址
+        console.log(res.data.imgUrl)
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+
+      // 阻止默认的上传行为
+      return false;
+    },
+    //1.2 提交表单
+    addToServe() {
+      
+      //取出行政职能和行政区划数组的最后一个数字
+      if (this.form.city_arr_id == "[]" || this.form.city_arr_id == null) {
+        this.form.city_arr_id = '[]'
+        this.form.city_id = 0;
+      } else {
+        if (JSON.parse(this.form.city_arr_id.length == 0)) {
+          this.form.city_id = 0;
+        } else {
+          this.form.city_id = this.form.city_arr_id[this.form.city_arr_id.length - 1];
+        }
+      }
+      // this.form.keyword = JSON.stringify(this.form.keyword);
+      //判断用户身份
+      if (this.creatNews_user_type == 10000) {
+        console.log("用户身份为管理员,无需审核直接发布!")
+        this.form.status = 1;
+      } else {
+        console.log("用户身份为其他用户,提交到审核!")
+        this.form.status = 0;
+        this.form.website_id = this.websiteid;
+      }
+      // console.log("this.form.city_arr_id==", JSON.stringify(this.form.city_arr_id));
+      
+      //先进行验证
+      console.log( "this.form==", this.form);
+
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          // delete formData.cat_arr_id;
+          if (this.form.data) {
+            // 使用日期格式化工具函数
+            const formatDate = (dateString, format = 'YYYY-MM-DD') => {
+              const date = new Date(dateString);
+              const year = date.getFullYear();
+              const month = String(date.getMonth() + 1).padStart(2, '0');
+              const day = String(date.getDate()).padStart(2, '0');
+              
+              return format
+                .replace('YYYY', year)
+                .replace('MM', month) 
+                .replace('DD', day);
+            };
+            
+            // 格式化日期并赋值给form.data
+            this.form.data = formatDate(this.form.data);
+            console.log('格式化后的日期:', this.form.data);
+          } else {
+            // 如果没有日期字段，可以设置默认值或其他处理
+            this.form.data = null;
+          }
+          const formData = { ...this.form };
+          formData.city_arr_id = Array.isArray(this.form.city_arr_id) ? JSON.stringify(this.form.city_arr_id):  this.form.city_arr_id ;
+          console.log("formData==", typeof(this.form.city_arr_id));
+          
+          delete formData.commend_id;
+          delete formData.nav_add_pool_id;
+          delete formData.user_type;
+          console.log("formData==格式化后的日期", formData);
+          // delete formData.data;
+          this.$store.dispatch('company/addCompany', formData).then(res => {
+            if (res.code == 200) {
+              console.log("企业发布成功！200")
+              //汇报结果
+              if (this.creatNews_user_type == 10000) {
+                this.$message({
+                  type: 'success',
+                  message: '已成功添加企业！'
+                });
+                this.cleatForm(2);
+                //返回列表页
+                this.returnPage()
+              } else {
+                this.$message({
+                  type: 'success',
+                  message: '待管理员审核！'
+                });
+                this.cleatForm(2);
+                //返回列表页
+                this.returnPage()
+              }
+            } else {
+              this.$message({
+                type: 'error',
+                message: res.message
+              });
+
+
+            }
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+    },
+    //1.3 清理表单
+    cleatForm() {
+        this.form.website_id = 0;
+        this.form.cat_arr_id = [];
+        this.form.nav_add_pool_id = [],//导航池子级
+        this.form.title = "";
+        this.form.author = "";
+        this.form.source = "";
+        this.form.source_url = "";
+        this.form.imgurl = "";
+        this.form.introduce = "";
+        this.form.keyword = "";
+        this.form.description = "";
+        this.form.jobnature_id = null;
+        this.form.manager = "";
+        this.form.content_person = "";
+        this.form.company_url = "";
+        this.form.telephone = "";
+        this.form.mobile = "";
+        this.form.QQ = "";
+        this.form.post_code = "";
+        this.form.fax = "";
+        this.form.email = "";
+        this.form.main_business = "";
+        this.form.adress = "";
+        this.form.nature_id = null;
+        this.form.hy_id = null;
+        this.form.zc_money = "";
+        this.form.zc_address = "";
+        this.form.manage_model = "";
+        this.form.data = "";
+        this.form.main_products = "";
+        this.form.main_buy_products = "";
+        this.form.number_id = null;
+        this.form.main_functions = "";
+        this.form.content = "";
+        this.form.city_arr_id = [];
+        this.form.city_id = "";
+        this.form.status = 0;
+    },
+    //1.4更新详细地址
+    update_city_arr_id(value) {
+      console.log("行政区划ID已更新:", value);
+      this.form.city_arr_id = value;
+    },
+    //1.5 删除图片
+    handleDelete() {
+      // 删除图片
+      this.imgUrl = ''; // 清空图片 URL
+      this.form.imgurl = ''; // 清空表单中的图片 URL
+    },
+    //提交表单 end ------------------------------------------------------------>
+
+    //2.跳转操作 start ------------------------------------------------------------>
+    returnPage() {
+      if (this.$route.query.to == "checkCompany") {
+        this.$router.push({
+          path: '/checkcompanyList',
+        });
+      } else {
+        this.$router.push({
+          path: '/companyList',
+        });
+      }
+    },
+    //跳转操作 end ------------------------------------------------------------>
+
+    //3.回显操作 ------------------------------------------------------------>
+    //3.1回显数据
+    getMainData() {
+      let data = {
+        id: this.$route.query.id
+      };
+      this.$store.dispatch('company/getCompanyInfo', data).then(res => {
+        this.form.title = res.data.title;
+        if (typeof res.data.website_id === 'string') {
+          this.form.website_id = Number(res.data.website_id);
+        } else {
+          this.form.website_id = res.data.website_id//站点名称
+        }
+        this.created_at = res.data.created_at;
+        this.form.cat_arr_id = Array.isArray(res.data.cat_arr_id) ? res.data.cat_arr_id : JSON.parse(res.data.cat_arr_id);
+        console.log(this.form.cat_arr_id)
+        //回显导航池 连同非管理员得一起刷新
+        this.parentKey += 1; // 触发级联选择器重新加载
+        this.loadCascaderPath(this.form.cat_arr_id); // 加载路径数据
+        this.parentKey_2 += 1; // 触发级联选择器重新加载
+        this.loadCascaderPath(this.form.cat_arr_id); // 加载路径数据
+        //回显行政区划
+        this.form.city_arr_id = JSON.parse(res.data.city_arr_id);
+
+        //回显其他数据
+        this.form.imgurl = res.data.imgurl;
+        this.imgUrl = res.data.imgurl;
+        this.form.keyword = res.data.keyword;
+        this.tags = res.data.keyword ? res.data.keyword.split(",") : '';
+        this.form.description = res.data.description;
+        this.form.introduce = res.data.introduce;
+        //回显编辑器内容
+        this.$nextTick(() => {
+          this.form.content = res.data.content;
+        });
+        this.form.author = res.data.author;
+        this.form.jobnature_id = res.data.jobnature_id;
+        this.form.manager = res.data.manager;
+        this.form.source = res.data.source;
+        this.form.source_url = res.data.source_url;
+        this.form.status = res.data.status;
+        this.form.manager = res.data.manager;
+        this.form.content_person = res.data.content_person;
+        this.form.company_url = res.data.company_url;
+        this.form.telephone = res.data.telephone;
+        this.form.mobile = res.data.mobile;
+        this.form.QQ = res.data.QQ;
+        this.form.post_code = res.data.post_code;
+        this.form.fax = res.data.fax;
+        this.form.email = res.data.email;
+        this.form.main_business = res.data.main_business;
+        this.form.adress = res.data.adress;
+        this.form.nature_id = res.data.nature_id;
+        this.form.hy_id = res.data.hy_id;
+        this.form.zc_money = res.data.zc_money;
+        this.form.zc_address = res.data.zc_address;
+        this.form.manage_model = res.data.manage_model;
+        this.form.data = res.data.data;
+        this.form.main_business = res.data.main_business;
+        this.form.main_buy_products = res.data.main_buy_products;
+        this.form.main_products = res.data.main_products;
+        this.form.main_functions = res.data.main_functions;
+        this.form.number_id = res.data.number_id;
+        console.log(this.inputList)
+      })
+    },
+    async loadCascaderPath(path) {
+      for (let i = 0; i < path.length; i++) {
+        const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
+        const level = i; // 当前层级的索引
+
+        await this.$store.dispatch('pool/categoryList', { pid: parentId })
+          .then((res) => {
+            const nodes = res.data.map(item => ({
+              value: item.id,
+              label: item.name,
+              leaf: level >= 3, // 假设4层结构，设置叶子节点标记
+            }));
+
+            // 级联选择器加载数据
+            if (level === path.length - 1) {
+              this.form.cat_arr_id = path; // 确保最后一级路径正确设置
+              this.parentKey += 1; // 强制刷新 cascader
+            }
+          });
+      }
+    },
+    //1.3提交修改
+    editToServe() {
+      //不使用外联 验证投票逻辑
+      this.form.id = this.editId;
+      //先进行验证
+      this.$refs.form.validate(valid => {
+      if (valid) {
+          // 如果没有，可以根据实际情况修改
+        if (this.form.data) {
+          // 使用日期格式化工具函数
+          const formatDate = (dateString, format = 'YYYY-MM-DD') => {
+            const date = new Date(dateString);
+            const year = date.getFullYear();
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            
+            return format
+              .replace('YYYY', year)
+              .replace('MM', month)
+              .replace('DD', day);
+          };
+          
+          // 格式化日期并赋值给form.data
+          this.form.data = formatDate(this.form.data);
+          console.log('格式化后的日期:', this.form.data);
+        } else {
+          // 如果没有日期字段，可以设置默认值或其他处理
+          this.form.data = null;
+        }
+        // ===== 日期处理逻辑结束 =====
+          //取出行政职能和行政区划数组的最后一个数字
+          if (this.form.city_arr_id == "[]" || this.form.city_arr_id == null) {
+            this.form.city_arr_id = '[]'
+            this.form.city_id = 0;
+          } else {
+            if (JSON.parse(this.form.city_arr_id.length == 0)) {
+              this.form.city_id = 0;
+            } else {
+              this.form.city_id = this.form.city_arr_id[this.form.city_arr_id.length - 1];
+            }
+          }
+          if (this.creatNews_user_type == 10000) {
+            console.log("用户身份为管理员,无需审核直接发布!")
+            this.form.status = 1;
+          } else {
+            console.log("用户身份为其他用户,提交到审核!")
+            this.form.status = 0;
+            this.form.website_id = this.websiteid;
+          }
+          console.log("this.form111==", this.form);
+          const formData = { ...this.form };
+          // console.log("this.form222==", this.form);
+          formData.city_arr_id = Array.isArray(this.form.city_arr_id) ? JSON.stringify(this.form.city_arr_id):  this.form.city_arr_id ;
+          
+          delete formData.commend_id;
+          delete formData.nav_add_pool_id;
+          delete formData.user_type;
+          // console.log("formData==", formData);
+          this.$store.dispatch('company/upCompany', formData).then(res => {
+          if (res.code != 200) {
+
+            this.$message({
+              type: 'error',
+              message: res.message
+            });
+
+          } else {
+            //汇报结果
+            if (this.creatNews_user_type == 10000) {
+              this.$message({
+                type: 'success',
+                message: '已成功编辑企业！'
+              });
+              this.cleatForm(2);
+              //返回列表页
+              this.returnPage()
+            } else {
+              this.$message({
+                type: 'success',
+                message: '待管理员审核！'
+              });
+              this.cleatForm(2);
+              //返回列表页
+              this.returnPage()
+            }
+          }
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+    },
+    //1.4 修改是否原创
+    changeIsOriginal() {
+      if (this.form.is_original == 1) {
+        this.form.source = "本网";
+      } else {
+        this.form.source = "";
+        this.form.source_url = "";
+      }
+    },
+    //跳转操作 end ------------------------------------------------------------>
+
+
+    //5.站点选择 曹国庆 start ------------------------------------------------------------>
+    get_creatNews_form_id_fun() {
+      //判断用户类型ajax
+      this.$store.dispatch('public/getInfo').then(res => {
+        //     console.log("res======",res)
+        this.form.user_type = res.data.type_id;
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    get_creatNews_nav_pool_arr_fun() {//
+      this.$store.dispatch('pool/get_creatNews_nav_actions', { page: 1, pageSize: 666666 }).then(res => {
+        res.data.rows.forEach((per_obj) => {
+          let new_per = {
+            label: per_obj.website_name,
+            value: per_obj.id,
+          }
+          this.creatNews_nav_pool_arr.push(new_per)
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    creatNews_nav_pool_change_fun() {
+      //开启导航池级联选择器
+      this.ifwebsitId = true;
+      console.log(this.ifwebsitId);
+      //  导航池级
+      let that = this;
+      // console.log("website_id",this.form.website_id)
+      this.form.website_id = this.form.website_id[0];
+      that.parentKey_2 += 1;
+      this.$store.dispatch('pool/get_creatNews_nav_son_actions', { type: 1, pid: String(this.creatNews_pid_num), website_id: String(this.form.website_id) }).then(res => {
+        if (res.data.length == 0) {//没有导航池子级
+          // alert("没有导航池子级");
+          return
+        }
+        this.creatNews_add_nav_pool_arr = res.data;
+        this.creatNews_add_nav_pool_arr.forEach((per_obj) => {
+          per_obj.label = per_obj.name,
+            per_obj.value = per_obj.id,
+            this.creatNews_pid_num = per_obj.category_id
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    updateTags(newTags) {
+      this.tags = newTags;
+      if(this.tags.length == 0){
+        this.form.keyword = '';
+      }else{
+        this.form.keyword = JSON.stringify(newTags);
+      }
+     
+      console.log(this.form.keyword);
+    },
+    //推荐等级多选获取到的数据
+    levelChange(value) {
+      this.form.level = value;
+    },
+    getNews() {
+      this.$store.dispatch('news/getArticleList', { page: 1, pageSize: 20 }).then(res => {
+        let data = [];
+        for (let item of res.data.rows) {
+          data.push(item)
+        }
+        this.commend_article = data;
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    // 远程搜索方法
+    remoteMethod(query) {
+      const artical_params = { page: 1, pageSize: 20, id: query }
+      if (query !== '') {
+        this.loading = true;
+        //如果全是数字，就id，其他就是搜title
+        let reg = /^[0-9]+$/;
+        let isNum = reg.test(query);
+        if (isNum) {
+          delete artical_params.title;
+          artical_params.id = query;
+        } else {
+          delete artical_params.id;
+          artical_params.title = query;
+        }
+        this.$store.dispatch('company/getCompanyList', artical_params).then(res => {
+          this.loading = false;
+          let data = [];
+          for (let item of res.data.rows) {
+            data.push(item);
+          }
+          this.commend_article = data;
+        }).catch(() => {
+          this.loading = false;
+          this.$message({
+            type: 'info',
+            message: '网络错误，请重试！'
+          });
+        });
+      } else {
+        this.commend_article = [];
+      }
+    },
+    //5.站点选择 曹国庆 end ------------------------------------------------------------>
+
+    //6.问卷 刘佳伟 start ------------------------------------------------------------>
+    addInput(index) {
+      // 在当前索引后插入一个新的输入框对象
+      if (this.inputList.length > 10) {
+        this.$message.warning('最多只能添加10个文本框');
+        return false;
+      }
+      this.inputList.splice(index + 1, 0, { value: '' });
+    },
+    deleteInput(index) {
+      if (this.inputList.length > 1) {
+        // 如果输入框数量大于 1，则删除当前索引对应的输入框对象
+        this.inputList.splice(index, 1);
+      } else {
+        this.$message.warning('至少保留一个输入框');
+      }
+    },
+    onDragEnd() {
+      // 处理拖拽结束事件（如果需要）
+      console.log('拖拽结束', this.commend_article);
+    },
+    handleClose(item) {
+      const index = this.form.commend_id.indexOf(item);
+      if (index > -1) {
+        this.form.commend_id.splice(index, 1);
+      }
+    },
+    //6.问卷 刘佳伟 end ------------------------------------------------------------>
+  },
+  mounted() {
+    console.log("mounted")
+    this.getNews()
+    console.log(this.commend_article, '-------news-------');
+    this.creatNews_user_type = getUseType()
+    this.websiteid = getWebSiteId()
+    //1.获得站点标识
+    this.get_company_nature()  //企业性质
+    this.get_hyid()    //企业行业
+    this.get_company_size()   //企业规模
+    this.get_creatNews_form_id_fun()
+    this.get_creatNews_nav_pool_arr_fun()
+    //2.判断是新建还是回显
+    if (this.$route.query.id != undefined) {
+      this.editId = this.$route.query.id;
+      this.editStatus = true;
+      // this.tableDivTitle = "编辑企业";
+      console.log("编辑企业！")
+      this.getMainData();
+    } else {
+      this.editStatus = false;
+      // this.tableDivTitle = "添加企业";
+      console.log("添加企业！")
+    }
+  },
+};
+</script>
+
+<style scoped lang="less">
+//执行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 .el-popper {
+  height: 500px;
+}
+
+::v-deep .el-select {
+  width: 100%;
+  /* 禁止用户拖拽调整大小 */
+}
+
+::v-deep .el-input-group__prepend {
+  color: black !important;
+}
+
+.formLabelFloatBox {
+  margin-bottom: 10px;
+  position: relative;
+
+  .formLabeladdIcon {
+    position: absolute;
+    right: 45px;
+    top: 5px;
+    width: 38px;
+    height: 24px;
+  }
+
+  .formLabelDelIcon {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    width: 38px;
+    height: 24px;
+  }
+}
+
+//该项不能为空几个字的位置
+::v-deep .el-form-item__error {
+  color: #ff4949;
+  font-size: 12px;
+  line-height: 1;
+  padding-top: 4px;
+  position: relative;
+  // top: 22%;
+  // left: 93%;
+}
+
+//输入框距离底部的距离
+::v-deep .el-form-item {
+  margin-bottom: 5px;
+}
+
+//图片提示文字样式
+.photo_tips {
+  font-size: 12px;
+  color: #999;
+}
+
+// 执行v-deep穿透scope选择器 end------------------------------------------------------------></style>

src/views/componentGallery/deploy.vue

@@ -0,0 +1,438 @@
+<!-- 风格 -->
+<template>
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">网站名称</div>
+                        <el-input v-model="templateName" clearable placeholder="请输入网站名称"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">运行状态</div>
+                        <el-select v-model="templateStyle" clearable placeholder="请选择应用状态">
+                            <el-option>未部署</el-option>
+                            <el-option>运行中</el-option>
+                            <el-option>已停止</el-option>
+                        </el-select>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData" style="width: 100%">
+                        <el-table-column fixed prop="id" label="编号" width="90"></el-table-column>
+                        <el-table-column prop="server_website_name" label="网站名称" width=""></el-table-column>
+                        <el-table-column prop="server_url" label="域名" width=""></el-table-column>
+                        <el-table-column prop="server_port" label="运行端口" width=""></el-table-column>
+                        <el-table-column prop="server_path" label="运行目录" width=""></el-table-column>
+                        <el-table-column prop="server_status" label="运行状态" width=""></el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------------------>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
+                        :total="total">
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+export default {
+    components: {
+        tableTitle,//表格标题-
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            // 1.1  初始化数据 ---------------------------------
+            tableDivTitle: "网站服务列表",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            templateLoading: true,//页面加载中
+
+            tableData: [
+                {
+                    id: 1,
+                    server_website_name: '孪生站-农业类站点1',
+                    server_url: 'http://ls1.chsnzxw.com.cn',
+                    server_port: '10014',
+                    server_path: '/www/ls1chsnzxwcomcn/',
+                    server_status: '运行中'
+                },
+                {
+                    id: 2,
+                    server_website_name: '孪生站-农业类站点2',
+                    server_url: 'http://ls2.chsnzxw.com.cn',
+                    server_port: '10015',
+                    server_path: '/www/ls2chsnzxwcomcn/',
+                    server_status: '已停止'
+                }
+            ],//表格数据
+
+
+            //1.2 搜索框相关 ----------------------------------
+            templateStyle: '',//模板风格
+            templateName: '',//模板名称
+
+
+            // 1.3 分页相关 -----------------------------------
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 获得服务器运行状态
+        getData() {
+            
+        },
+        
+       
+        //1.3 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.4 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.5 搜索按钮
+        goSearch() {
+            
+        },
+        //1.6 重置按钮
+        goReset() {
+           
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+    },
+    mounted() {
+        this.getData()
+        this.getStyleList() //获取模板风格
+    },
+}
+</script>
+
+<style scoped lang="less">
+input[aria-hidden=true] {
+    display: none !important;
+}
+
+// 提示信息
+.tips {
+    margin: 30px;
+    background-color: #e9ecf9;
+    border-radius: 11px;
+
+    .tipsIcon {
+        margin: 10px 15px;
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        background: url("../../assets/advertise/Info Circle.png") no-repeat;
+        vertical-align: middle;
+    }
+
+    .tipsText {
+        font-size: 14px;
+        color: #666666;
+    }
+}
+
+// 头部
+.title {
+    margin: 30px 30px 20px 30px;
+    padding: 30px 30px 40px 30px;
+    background-color: #fff;
+    border-radius: 20px 20px 20px 20px;
+    border: 1px solid #E9EDF7;
+
+    .left {
+        float: left;
+    }
+
+    .right {
+        float: right;
+    }
+
+
+    .searchBox {
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 80%;
+        }
+
+        .searchTitle {
+            padding-bottom: 10px;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 14px;
+            color: #999999;
+            line-height: 16px;
+        }
+
+        .el-select {
+            width: 100%;
+            display: inline-block;
+            position: relative;
+        }
+    }
+
+
+    .btnList {
+        float: right;
+        padding-top: 28px;
+
+        button {
+            height: 38px;
+            border: none;
+            border-radius: 8px;
+            padding: 0 30px;
+        }
+
+        .search {
+            background-color: #5570f1;
+            color: #fff;
+            margin-right: 20px;
+        }
+
+        .reset {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 16px;
+            color: #333333;
+            background: #F5F7FB;
+            border-radius: 8px 8px 8px 8px;
+            border: 1px solid rgba(85, 112, 241, 0.11);
+        }
+    }
+}
+
+.layerBox {
+    padding: 30px 20px;
+    position: relative;
+
+    .btn {
+        position: absolute;
+        top: 30px;
+        right: 20px;
+        height: 38px;
+        color: #fff;
+        background-color: #5570f1;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 28px 9px;
+        box-sizing: border-box;
+    }
+
+    .listBtnBox {
+        justify-content: left;
+    }
+
+
+    .listDeleteBtn,
+    .listEditBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 20px;
+        width: 76px;
+        height: 36px;
+        line-height: 36px;
+    }
+
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-input--medium,
+    ::v-deep .el-form-item__label {
+        line-height: 36px;
+        font-size: 16px;
+    }
+}
+
+// 弹出层内容
+.dialogText {
+    margin: 0 7px 0 3px;
+    padding-bottom: 1px;
+    padding: 30px 60px 1px 20px;
+    background-color: #f5f7fb;
+
+    .adImage {
+        width: 140px;
+        height: 140px;
+        line-height: 210px;
+        border-radius: 12px;
+        border: 1px solid rgba(85, 112, 241, 0.11);
+
+        img {
+            width: 140px;
+            height: 80px;
+        }
+    }
+
+    .uploaderBox,
+    .avatar-upload-container {
+        display: inline-block;
+    }
+
+    .avatar-uploader {
+        background-color: #fff;
+    }
+
+    .uploaderBox {
+        margin-right: 20px;
+        position: relative;
+
+        h5 {
+            text-align: center;
+            font-size: 14px;
+            font-weight: 400;
+            color: #999999;
+            margin-top: 0px;
+        }
+    }
+
+    ::v-deep .avatar {
+        width: 140px;
+        height: auto;
+    }
+
+    .price {
+        ::v-deep .el-input {
+            width: 29%;
+        }
+    }
+
+    .example {
+        font-family: Microsoft YaHei;
+        color: #5570F1;
+    }
+
+    .el_btnList {
+        margin-right: 15px;
+        margin-top: 20px;
+    }
+
+    //日期时间选择器的宽
+    ::v-deep .el-date-editor.el-input {
+        width: 48%;
+    }
+
+    ::v-deep .el-button+.el-button {
+        margin-left: 0px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+}
+
+// 弹出层按钮
+.dialogBtn {
+    text-align: center;
+    margin: 50px auto 20px;
+
+    button {
+        width: 184px;
+        padding: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        border: none;
+        border-radius: 12px 12px 12px 12px;
+    }
+
+    // 取消
+    .cancel {
+        color: #333333;
+        background-color: #f5f7fb;
+        border: 2px solid rgba(85, 112, 241, 0.11);
+    }
+
+    // 提交
+    .submit {
+        color: #fff;
+        background-color: #5570F1;
+        margin-left: 40px;
+    }
+}
+
+//审核弹出框
+.radioGroup {
+    ::v-deep .el-form-item {
+        margin-top: 40px;
+        margin-bottom: 0;
+    }
+}
+
+.graph {
+    background-color: #f5f7fb;
+    padding: 60px 100px;
+    overflow: hidden;
+
+    li {
+        float: left;
+    }
+
+    >li:first-child {
+        margin-right: 100px;
+    }
+}
+
+.dialog-footer {
+    margin: 0 auto;
+}
+</style>

src/views/componentGallery/imgList.vue

@@ -0,0 +1,869 @@
+<template>
+    <div>
+        <div class="title">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">网站名称</div>
+                        <el-input v-model="websiteName" clearable placeholder="请输入网站名称"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">文件名称</div>
+                        <el-input v-model="imgAlias" clearable placeholder="请输入文件名称"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                      <div class="searchTitle">文件类型</div>
+                      <el-select v-model="imgType" placeholder="请选择文件类型" filterable clearable>
+                        <el-option :key="'jpg'" :label="'jpg'" :value="'jpg'">jpg</el-option>
+                        <el-option :key="'jpeg'" :label="'jpeg'" :value="'jpeg'">jpeg</el-option>
+                        <el-option :key="'png'" :label="'png'" :value="'png'">png</el-option>
+                      </el-select>
+                    </div>
+                  </el-col>
+                <el-col :span="6" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <button class="btn" @click="addWebsite">添加图片</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData" style="width: 100%" >
+                        <el-table-column fixed prop="id" label="编号" width="90"></el-table-column>
+                        <el-table-column label="缩略图">
+                            <template slot-scope="scope">
+                                <img :src="scope.row.img_url" class="pic">
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="img_alias" label="图片别名"></el-table-column>
+                        <el-table-column prop="img_type" label="图片类型"></el-table-column>
+                        <el-table-column prop="img_url" label="图片地址"></el-table-column>
+                        <el-table-column prop="img_size" label="文件大小"></el-table-column>
+                        <el-table-column prop="website_name" label="所属网站" width="">
+                        </el-table-column>
+                        <el-table-column fixed="right" label="操作" width="300">
+                            <template slot-scope="scope">
+                              <div class="listBtnBox">
+                                <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
+                                  <i class="el-icon-delete"></i> 删除
+                                </div>
+                                <div class="listEditBtn" @click="handleViewImage(scope.row)">
+                                    <i class="el-icon-view"></i> 查看
+                                </div>
+                                <div class="listEditBtn" @click="upWebsite(scope.row)">
+                                    <i class="el-icon-edit-outline"></i> 编辑
+                                </div>
+                              </div>
+                            </template>
+                          </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
+                        :total="total">
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+
+        <!-- 弹出框 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="45%" top="8vh" :close-on-click-modal="false">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="关联网站名称:" prop="website_id">
+                        <el-select v-model="ruleForm.website_id" :multiple="false" :multiple-limit="1" filterable remote
+                            reserve-keyword placeholder="请输入关联网站名称" :remote-method="getWebNavList" :loading="webSiteLoading" @change="detectionWebSite">
+                            <el-option v-for="item in webSiteList" :key="item.value" :label="item.label"
+                                :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="文件别名:" prop="img_alias">
+                        <el-input v-model="ruleForm.img_alias" placeholder="请输入文件别名"></el-input>
+                    </el-form-item>
+                    <el-form-item label="组件展示图:" prop="img_url" :label-width="formLabelWidth">
+                        <div class="uploaderBox">
+                            <!-- 图片预览和信息展示 -->
+     
+                            <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
+                                <div v-if="logoUrl"  class="image-preview">
+                                    <img :src="logoUrl" class="avatar">
+                                    
+                                </div>
+                                
+                                <!-- 上传图标 -->
+                                <div v-else class="chooseImgDiv">
+                                    <div>
+                                        <img src="@/assets/public/upload/noImage.png">
+                                        <div>选择图片</div>
+                                    </div>
+                                </div>
+                            </el-upload>
+                            <div v-if="logoUrl" class="image-meta">
+                                <p>文件名：{{ this.ruleForm.name ||imageInfo.name }}</p>
+                                <p>文件大小：{{ this.ruleForm.img_size || imageInfo.size }}</p>
+                            </div>
+                            <!-- 删除按钮，当鼠标悬浮时显示 -->
+                            <div v-if=" logoUrl" class="delete-button" @click="handleDelete">
+                                <i class="el-icon-delete"></i>
+                            </div>
+                        </div>
+                     </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="cancelForm">取消</el-button>
+                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog>
+        <!-- 弹出框 end----------------------------------------------------------->
+        <!-- 新增图片查看弹框 -->
+        <el-dialog title="图片预览" :visible.sync="viewImageVisible" width="80%"  top="5vh"    :close-on-click-modal="true">
+            <div style="text-align: center; padding: 30px 0;">
+                <img
+                    :src="currentImageUrl"
+                    alt="图片预览"
+                    style="max-width: 90%; max-height: 70vh; border-radius: 12px; box-shadow: 0 0 20px rgba(0,0,0,0.1)"
+                >
+                <div style="margin-top: 20px; font-size: 14px; color: #666;">
+                    <span>图片地址：</span>
+                    <span style="word-break: break-all; color: #5570F1; margin-left: 10px;">
+                        {{ currentImageUrl }}
+                    </span>
+                </div>
+            </div>
+        </el-dialog>
+        <!-- 新增图片查看弹框 end-->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+// import { getComponentList, addComponent, delComponent, updateComponent, getComponentInfo } from '@/api/module'
+import { getSectorList } from '@/api/plate'
+import { getTemplateClass } from '@/api/style'
+import { upWebsiteCategory } from '@/api/pool';
+export default {
+    components: {
+        tableTitle,//表格标题-
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            webSiteList: [], // 网站列表
+             // 新增查看弹框相关变量
+             viewImageVisible: false, // 控制弹框显示状态
+             currentImageUrl: '', // 当前查看的图片地址
+            websiteOptions: [], //网站列表
+            // 新增图片信息字段
+            imageInfo: { name: '', size: '', type: '' },
+            // 移除 dialogName、activeid 等编辑相关变量
+            dialogTableVisible: false, // 仅保留添加弹窗
+            // 1.1 初始化数据
+            tableDivTitle: "静态资源管理列表",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            moduleLoading: true, //表格数据加载中
+
+            tableData: [],//表格数据
+            options: [],//版块列表
+            activeid: "", //活动id
+            styleOptions: [],//关联版块
+            plateOptions: [],//关联版块
+            selectedId: '',
+            selectedOptions: [],
+            cascaderProps: {
+                value: "id", // 指定实际表示值的字段为id
+                label: "name", // 指定实际表示显示文本的字段为name
+                expandTrigger: 'hover',
+                checkStrictly: true, // 严格模式，只能选择叶子节点
+                children: 'children',
+            },
+            webSiteLoading: false,
+
+            // 1.2 搜索框相关
+            websiteName: '', //网站名称
+            imgAlias: '', //文件别名
+            imgType: '', //文件类型
+
+            //3.4 上传logo图片
+            logoUrl: '',
+            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+
+            value: '',
+
+
+            // 分页相关
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+
+            formLabelWidth: '', //广告示例图相关
+
+
+            template_id: '', //关联风格id
+            sector_id: '', //关联版块id
+
+            ruleForm: {
+                img_alias: '', //静态资源管名称
+                img_url: '',//静态资源管展示
+                website_id: '', //关联网站名称
+                id: '', //id
+                img_size: '', //文件大小
+            },
+
+            rules: {
+                img_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        }
+    },
+    methods: {
+        // 查看图片方法（修正方法名和参数）
+        handleViewImage(row) {
+            // 从行数据中获取图片地址（假设图片地址字段为 img_url，需根据实际数据调整）
+            this.currentImageUrl = row.img_url;
+            this.viewImageVisible = true;
+        },
+        
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            this.$store.dispatch('module/getStaticResourceList',{page: this.page,pageSize: this.pageSize}).then(res=> {
+                console.log("*******************",res.data.row);
+                this.tableData =  res.data.row; //给与内容
+                this.total = res.data.count; //给与总条数
+              }).catch(() => {
+                this.$message({
+                  type: 'info',
+                  message: '网络错误，请重试！'
+                });
+              })
+        },
+        //获取版块列表
+        getList() {
+            this.$store.dispatch('module/getStaticResourceList',{page: this.page,pageSize: this.pageSize}).then(res=> {
+                console.log("*******************",res.data.row);
+                this.tableData =  res.data.row; //给与内容
+                this.total = res.data.count; //给与总条数
+              }).catch(() => {
+                this.$message({
+                  type: 'info',
+                  message: '网络错误，请重试！'
+                });
+              })
+        },
+        //1.2 删除内容
+        deleteRow(id) {
+            console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+                this.$store.dispatch('module/delStaticResource', { id: id }).then(res => {
+                    console.log(res.data);
+                    if (res.code == 200) {
+                        this.$message({
+                            message: '删除成功',
+                            type: 'success'
+                        })
+                        this.getData()
+                    }
+                }).catch(error => {
+                    console.error('删除失败:', error);
+                    this.$message({
+                        message: '删除失败',
+                        type: 'error'
+                    });
+                });
+
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '已取消删除'
+                });
+            });
+        },
+        // 1.3 查看图片
+        viewImage(url) {
+            // 打开图片放大弹框，这里假设存在一个名为 imageDialogVisible 的变量控制弹框显示，以及一个 imageUrl 变量存储要展示的图片地址
+            this.dialogTableVisible = true;
+            this.imageUrl = url;
+        },
+
+        handleChange(value) {
+            console.log('val', value);
+            this.template_id = value[0]
+            this.sector_id = value[1]
+            console.log("当前选中的父级：", this.template_id);
+            console.log("当前选中的子级：", this.sector_id);
+            // 当选中的选项发生变化时触发
+            if (value.length > 0) {
+                const selectedValue = value[value.length - 1]; // 获取最后一级选中的值
+                this.fetchChildren(selectedValue); // 请求对应的子选项
+
+            }
+        },
+
+        //1.4 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.5 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.6 搜索按钮
+        goSearch() {
+            const data = {
+                website_name: this.websiteName, //网站名称
+                img_alias: this.imgAlias, //文件别名
+                img_type: this.imgType, //文件类型
+                page: 1, //页码
+                pageSize: 10, //每页条数
+            }
+            this.$store.dispatch('module/getStaticResourceList',data).then(res=> {
+            this.tableData =  res.data.row; //给与内容
+            this.total = res.data.count; //给与总条数
+            }).catch(() => {
+            this.$message({
+                type: 'info',
+                message: '网络错误，请重试！'
+            });
+            })
+        },
+        //1.7 重置按钮
+        goReset() {
+            this.websiteName = ""
+            this.imgAlias = ""
+            this.imgType = ""
+            this.page = 1
+            this.pageSize = 10
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+        getWebNavList(query) {
+            if (query !== '') {
+                this.webSiteLoading = true;
+                let data = { keyword: query }
+                console.log("-----------------",data);
+                let dataArr = [];
+                this.$store.dispatch('pool/getNavWebList', data).then(res => {
+                    console.log(res.data)
+                    for (let item of res.data) {
+                        let data = {};
+                        data.key = item.id;
+                        data.value = item.id;
+                        data.label = item.website_name;
+                        dataArr.push(data)
+                    }
+                    this.webSiteList = dataArr;
+                    this.webSiteLoading = false;
+                }).catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '网络错误，请重试！'
+                    });
+                })
+            } else {
+                this.navList = [];
+            }
+        },
+        //1.8 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加图片"
+            //添加时清空回显回来的数据
+            this.ruleForm.website_id = '' //网站id
+            this.ruleForm.img_alias = '' //图片别名
+            this.ruleForm.img_size = '' //图片大小
+            this.ruleForm.img_url = '' //图片地址
+            this.logoUrl = '' //图片展示图
+            console.log("添加",this.ruleForm);
+
+        },
+        // 1.9 编辑
+        upWebsite(row) {
+            this.dialogTableVisible = true; // 显示弹窗
+            this.dialogName = "编辑"; // 编辑弹窗名称
+            console.log("编辑", row);
+            this.activeid = row.id; // 存储当前编辑的活动ID
+            this.ruleForm.img_alias = row.img_alias; // 回显图片别名
+            // this.ruleForm.img_size = row.img_size    //图片大小
+            this.ruleForm.img_url = row.img_url      //图片地址
+            this.logoUrl = row.img_url //图片展示图
+            this.ruleForm.website_id = row.website_name //网站id
+            this.ruleForm.id = row.id //id
+            this.ruleForm.name = row.name //图片名称
+            this.ruleForm.img_size = row.img_size //图片尺寸
+            // beforeAvatarUpload(row)
+            
+        },
+        // 弹出层相关方法
+        // 提交表单
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    console.log('submit!');
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+            if (this.dialogName === "添加图片") {
+                // 直接从 data 中获取参数
+                if(this.ruleForm.website_id == 'undefind' || this.ruleForm.website_id == ''){
+                    this.ruleForm.website_id = 0;
+                }
+                const data = {
+                    img_alias: this.ruleForm.img_alias,
+                    img_url: this.ruleForm.img_url,
+                    website_id: this.ruleForm.website_id ?? 0,
+                    img_size: this.imageInfo.size,
+
+                };
+                console.log("添加", data);
+                // 直接传递 data 作为参数，而不是 {data}
+                this.$store.dispatch('module/addStaticResource', data).then(res => {
+                    if (res.code === 200) {
+                        this.$message({
+                            message: '添加成功',
+                            type:'success'
+                        });
+                        this.dialogTableVisible = false;
+                        this.getData();
+                    } else if (res.code === 0) {
+                        this.$message({
+                            message: res.data.message,
+                            type: 'error'
+                        });
+                    }
+                }).catch(error => {
+                    console.error('添加失败:', error);
+                    this.$message({
+                        message: '添加过程中出现错误，请重试',
+                        type: 'error'
+                    });
+                });
+            }
+
+            if (this.website_id == '') {
+                this.$message({
+                    message: '请输入并选择网站名称',
+                    type: 'error'
+                })
+                this.dialogVisible = true
+            }
+
+            if (this.dialogName == "编辑") {
+                this.$store.dispatch('module/upStaticResource', this.ruleForm).then(res => {
+                    if (res.code === 200) {
+                        this.$message({
+                            message: '编辑成功',
+                            type:'success'
+                        });
+                        this.dialogTableVisible = false;
+                        this.getData();
+                    }else{
+                        this.$message({
+                            message: res.data.message,
+                            type: 'error'
+                        })
+                    }
+                })
+            }
+
+        },
+        //取消添加或编辑
+        cancelForm() {
+            this.dialogTableVisible = false
+        },
+        //3.6 上传图片操作
+        beforeAvatarUpload(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;
+            }
+          
+            // 解析图片信息
+            this.imageInfo.name = file.name;
+            this.imageInfo.size = this.formatFileSize(file.size); // 新增格式化方法
+            this.imageInfo.type = file.type.split('/')[1].toUpperCase(); // 获取文件类型（JPG/PNG）
+          
+            const formData = new FormData();
+            formData.append('file', file);
+          
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+              this.logoUrl = res.data.imgUrl;
+              this.ruleForm.img_url = res.data.imgUrl;
+            }).catch(() => {
+              this.$message({ type: 'info', message: '网络错误，请重试！' });
+            });
+          
+            return false;
+        },
+          
+        // 新增文件大小格式化方法
+        formatFileSize(bytes) {
+        if (bytes === 0) return '0 B';
+        const units = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(1024));
+        return `${parseFloat((bytes / Math.pow(1024, i)).toFixed(2))} ${units[i]}`;
+        },
+        handleDelete() {
+            // 删除图片
+            this.logoUrl = ''; // 清空图片 URL
+        },
+
+        //搜索部分的输入关键词下拉框
+        selectWebSite(value) {
+            this.webSiteName_id = value
+        },
+
+        //添加 / 编辑弹窗中输入关键词下拉框 
+        // 判断是否已经关联了网站
+        detectionWebSite(value) {
+            console.log(value);
+            this.website_id = value
+            console.log(this.website_id);
+
+        },
+        changeViewImage(img_alias,id) {
+            this.dialogTableVisible = true; // 显示编辑弹窗
+            this.dialogName = '编辑'; // 设置编辑弹窗标题为"编辑"
+            this.ruleForm.img_alias = img_alias; // 将当前行的 img_alias 赋值给 ruleForm 的 img_alias
+        },
+
+    },
+    mounted() {
+        this.getData()
+        this.getList()
+    },
+}
+</script>
+
+<style scoped lang="less">
+input[aria-hidden=true] {
+    display: none !important;
+}
+
+// 提示信息
+.tips {
+    margin: 30px;
+    background-color: #e9ecf9;
+    border-radius: 11px;
+
+    .tipsIcon {
+        margin: 10px 15px;
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        background: url("../../assets/advertise/Info Circle.png") no-repeat;
+        vertical-align: middle;
+    }
+
+    .tipsText {
+        font-size: 14px;
+        color: #666666;
+    }
+}
+
+// 头部
+.title {
+    margin: 30px 30px 20px 30px;
+    padding: 30px 30px 40px 30px;
+    background-color: #fff;
+    border-radius: 20px 20px 20px 20px;
+    border: 1px solid #E9EDF7;
+
+    .left {
+        float: left;
+    }
+
+    .right {
+        float: right;
+    }
+
+
+    .searchBox {
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 80%;
+        }
+
+        .searchTitle {
+            padding-bottom: 10px;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 14px;
+            color: #999999;
+            line-height: 16px;
+        }
+
+        .el-select {
+            width: 100%;
+            display: inline-block;
+            position: relative;
+        }
+    }
+
+
+    .btnList {
+        float: right;
+        padding-top: 28px;
+
+        button {
+            height: 38px;
+            border: none;
+            border-radius: 8px;
+            padding: 0 30px;
+        }
+
+        .search {
+            background-color: #5570f1;
+            color: #fff;
+            margin-right: 20px;
+        }
+
+        .reset {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 16px;
+            color: #333333;
+            background: #F5F7FB;
+            border-radius: 8px 8px 8px 8px;
+            border: 1px solid rgba(85, 112, 241, 0.11);
+        }
+    }
+}
+
+.layerBox {
+    padding: 30px 20px;
+    position: relative;
+
+    .btn {
+        position: absolute;
+        top: 30px;
+        right: 20px;
+        height: 38px;
+        color: #fff;
+        background-color: #5570f1;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 28px 9px;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+    }
+
+    .listBtnBox {
+        justify-content: left;
+    }
+
+
+    .listDeleteBtn,
+    .listEditBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 20px;
+        width: 76px;
+        height: 36px;
+        line-height: 36px;
+    }
+    .listViewBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 20px;
+        width: 76px;
+        height: 36px;
+        line-height: 36px;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-input--medium,
+    ::v-deep .el-form-item__label {
+        line-height: 36px;
+        font-size: 16px;
+    }
+}
+
+// 弹出层内容
+.dialogText {
+    margin: 0 7px 0 3px;
+    padding-bottom: 1px;
+    padding: 30px 60px 1px 20px;
+    background-color: #f5f7fb;
+
+    .el-cascader--medium {
+        font-size: 14px;
+        line-height: 36px;
+        width: 100%;
+    }
+
+    .adImage {
+        width: 140px;
+        height: 140px;
+        line-height: 210px;
+        border-radius: 12px;
+        border: 1px solid rgba(85, 112, 241, 0.11);
+
+        img {
+            width: 140px;
+            height: 80px;
+        }
+    }
+
+
+
+    ::v-deep .avatar {
+        width: 140px;
+        height: auto;
+    }
+
+    .price {
+        ::v-deep .el-input {
+            width: 29%;
+        }
+    }
+
+    .example {
+        font-family: Microsoft YaHei;
+        color: #5570F1;
+    }
+
+    .el_btnList {
+        margin-right: 15px;
+        margin-top: 20px;
+    }
+
+    //日期时间选择器的宽
+    ::v-deep .el-date-editor.el-input {
+        width: 48%;
+    }
+
+    ::v-deep .el-button+.el-button {
+        margin-left: 0px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+}
+
+// 弹出层按钮
+.dialogBtn {
+    text-align: center;
+    margin: 50px auto 20px;
+
+    button {
+        width: 184px;
+        padding: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        border: none;
+        border-radius: 12px 12px 12px 12px;
+    }
+
+    // 取消
+    .cancel {
+        color: #333333;
+        background-color: #f5f7fb;
+        border: 2px solid rgba(85, 112, 241, 0.11);
+    }
+
+    // 提交
+    .submit {
+        color: #fff;
+        background-color: #5570F1;
+        margin-left: 40px;
+    }
+}
+
+//审核弹出框
+.radioGroup {
+    ::v-deep .el-form-item {
+        margin-top: 40px;
+        margin-bottom: 0;
+    }
+}
+
+.graph {
+    background-color: #f5f7fb;
+    padding: 60px 100px;
+    overflow: hidden;
+
+    li {
+        float: left;
+    }
+
+    >li:first-child {
+        margin-right: 100px;
+    }
+}
+
+.dialog-footer {
+    margin: 0 auto;
+}
+/* 可选：添加弹框内图片样式 */
+.el-dialog__body {
+    padding: 30px !important;
+    text-align: center;
+  }
+
+.pic {
+    max-width: 160px;
+    height: 18px;
+    display: block;
+}
+</style>

src/views/componentGallery/module.vue

@@ -6,27 +6,53 @@
             <el-row>
                 <el-col :span="6" class="left">
                     <div class="searchBox">
-                        <div class="searchTitle">版块</div>
-                        <el-select v-model="templateName" clearable placeholder="请选择版块">
+                        <div class="searchTitle">组件名称</div>
+                        <el-input v-model="componentName" clearable placeholder="请输入组件名称"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">所属通栏</div>
+                        <el-input v-model="componentName" clearable placeholder="请输入通栏名称"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">所属风格</div>
+                        <el-select v-model="templateName" clearable placeholder="请选择风格">
                             <el-option v-for="item in options" :key="item.id" :label="item.sector_name"
                                 :value="item.id">
                             </el-option>
                         </el-select>
                     </div>
                 </el-col>
+                <el-col :span="6" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+            <el-row class="rowMargin">
                 <el-col :span="6" class="left">
                     <div class="searchBox">
                         <div class="searchTitle">组件名称</div>
                         <el-input v-model="componentName" clearable placeholder="请输入组件名称"></el-input>
                     </div>
                 </el-col>
-                <el-col :span="8" class="right">
-                    <div class="btnList">
-                        <button class="search" @click="goSearch">搜索</button>
-                        <button class="reset" @click="goReset">重置</button>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">尺寸</div>
+                        <div class="sizeBox">
+                            <div class="sizeInput"><el-input v-model="plateName" clearable placeholder="宽"></el-input> </div>
+                            <div class="sizeInputSymbol">*</div>
+                            <div class="sizeInput"><el-input v-model="plateName" clearable placeholder="高"></el-input></div>
+                        </div>
                     </div>
                 </el-col>
             </el-row>
+
+
         </div>
         <!--表格内容 start------------------------------------------------------------>
         <div class="layerBox">
@@ -35,16 +61,14 @@
             <el-row>
                 <template>
                     <el-table class="my-table" :data="tableData" style="width: 100%" v-loading="moduleLoading">
-                        <el-table-column fixed prop="id" label="编号" width="90">
-                        </el-table-column>
-                        <el-table-column prop="component_name" label="组件名称" width="">
-                        </el-table-column>
-                        <el-table-column prop="component_code" label="组件代码" width="">
-                        </el-table-column>
-                        <el-table-column prop="created_at" label="添加时间" width="">
-                        </el-table-column>
-                        <el-table-column prop="updated_at" label="修改时间" width="">
-                        </el-table-column>
+                        <el-table-column fixed prop="id" label="编号" width="90"></el-table-column>
+                        <el-table-column prop="component_name" label="组件名称" width=""></el-table-column>
+                        <el-table-column prop="component_size" label="尺寸" width=""></el-table-column>
+                        <el-table-column prop="component_skin" label="所属皮肤" width=""></el-table-column>
+                        <el-table-column prop="component_skin" label="所属风格" width=""></el-table-column>
+                        <el-table-column prop="component_page" label="所属页面" width=""></el-table-column>
+                        <el-table-column prop="created_at" label="添加时间" width=""></el-table-column>
+                        <el-table-column prop="updated_at" label="修改时间" width=""></el-table-column>
                         <el-table-column fixed="right" label="操作" width="200">
                             <template slot-scope="scope">
                                 <div class="listBtnBox">
@@ -82,17 +106,58 @@
             :close-on-click-modal="false">
             <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                 <div class="dialogText">
-                    <el-form-item label="关联版块:" prop="plateName">
+                    <el-form-item label="组件名称:" prop="component_name">
+                        <el-input v-model="ruleForm.component_name" placeholder="请输入组件名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="所属页面:" prop="plateName">
+                        <el-select v-model="ruleForm.plateName" clearable placeholder="请选择所属页面">
+                            <el-option>首页</el-option>
+                            <el-option>列表页</el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="所属风格:" prop="plateName">
+                        <el-select v-model="ruleForm.plateName" clearable placeholder="请选择所属页面">
+                            <el-option>简约</el-option>
+                            <el-option>黑暗</el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="风格id:" prop="component_name">
+                        <el-input v-model="ruleForm.component_name" placeholder="请输入组件名称" disabled></el-input>
+                    </el-form-item>
+                    <el-form-item label="所属皮肤:" prop="plateName">
+                        <el-select v-model="ruleForm.plateName" clearable placeholder="请选择所属皮肤">
+                            <el-option>简约</el-option>
+                            <el-option>黑暗</el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="皮肤id:" prop="component_name">
+                        <el-input v-model="ruleForm.component_name" placeholder="请输入组件名称" disabled></el-input>
+                    </el-form-item>
+                    <el-form-item label="所属通栏:" prop="plateName">
                         <el-cascader v-model="ruleForm.plateName" :options="styleOptions" :props="cascaderProps"
                             :disabled="this.dialogName === '编辑'" @change="handleChange" placeholder="请选择关联的版块名称"
                             clearable>
                         </el-cascader>
                     </el-form-item>
-                    <el-form-item label="组件名称:" prop="component_name">
-                        <el-input v-model="ruleForm.component_name" placeholder="请输入组件名称"></el-input>
+                    <el-form-item label="通栏id:" prop="component_name">
+                        <el-input v-model="ruleForm.component_name" placeholder="请输入组件名称" disabled></el-input>
+                    </el-form-item>
+                    <el-form-item label="尺寸:" prop="plateName">
+                        <el-select v-model="ruleForm.plateName" clearable placeholder="请选择所属皮肤">
+                            <el-option>600x480</el-option>
+                            <el-option>300x200</el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="组件关键词:" prop="component_code">
+                        <el-input v-model="ruleForm.component_code" placeholder="请输入关键词"
+                            :disabled="this.dialogName === '编辑'"></el-input>
+                    </el-form-item>
+                    <el-form-item label="含有图片新闻数量:" prop="component_code">
+                        <el-input v-model="ruleForm.component_code" placeholder="请输入关键词"
+                            :disabled="this.dialogName === '编辑'"></el-input>
                     </el-form-item>
-                    <el-form-item label="组件代码:" prop="component_code">
-                        <el-input v-model="ruleForm.component_code" placeholder="请输入组件代码"
+                    <el-form-item label="含有文字新闻数量:" prop="component_code">
+                        <el-input v-model="ruleForm.component_code" placeholder="请输入关键词"
                             :disabled="this.dialogName === '编辑'"></el-input>
                     </el-form-item>
                     <el-form-item label="组件展示图:" prop="component_img" :label-width="formLabelWidth"
@@ -710,6 +775,27 @@ input[aria-hidden=true] {
     }
 }
 
+.sizeBox {
+    display: flex;
+    align-items: center;
+    width: 80%;
+    .sizeInputSymbol {
+        width: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .sizeInput {
+        width: 50%;
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 100%;
+        }
+    }
+}
+
 // 弹出层内容
 .dialogText {
     margin: 0 7px 0 3px;
@@ -832,4 +918,8 @@ input[aria-hidden=true] {
 .dialog-footer {
     margin: 0 auto;
 }
+
+.rowMargin {
+    margin-top: 20px;
+}
 </style>

src/views/componentGallery/plate.vue

@@ -4,6 +4,12 @@
         <!-- 头部搜索框部分 -->
         <div class="title">
             <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">通栏名称</div>
+                        <el-input v-model="plateName" clearable placeholder="请输入通栏名称"></el-input>
+                    </div>
+                </el-col>
                 <el-col :span="6" class="left">
                     <div class="searchBox">
                         <div class="searchTitle">模板风格</div>
@@ -15,35 +21,47 @@
                 </el-col>
                 <el-col :span="6" class="left">
                     <div class="searchBox">
-                        <div class="searchTitle">版块</div>
-                        <el-input v-model="plateName" clearable placeholder="请输入版块名称"></el-input>
+                        <div class="searchTitle">所属皮肤</div>
+                        <el-input v-model="plateName" clearable placeholder="请输入皮肤名称"></el-input>
                     </div>
                 </el-col>
-                <el-col :span="8" class="right">
+                <el-col :span="6" class="right">
                     <div class="btnList">
                         <button class="search" @click="goSearch">搜索</button>
                         <button class="reset" @click="goReset">重置</button>
                     </div>
                 </el-col>
             </el-row>
+            <el-row class="rowMargin">
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">尺寸</div>
+                        <div class="sizeBox">
+                            <div class="sizeInput"><el-input v-model="plateName" clearable placeholder="宽"></el-input> </div>
+                            <div class="sizeInputSymbol">*</div>
+                            <div class="sizeInput"><el-input v-model="plateName" clearable placeholder="高"></el-input></div>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
         </div>
         <!--表格内容 start------------------------------------------------------------>
         <div class="layerBox">
             <tableTitle :name="tableDivTitle" />
-            <button class="btn" @click="addWebsite">添加版块</button>
+            <button class="btn" @click="addWebsite">添加通栏</button>
             <el-row>
                 <template>
                     <el-table class="my-table" :data="tableData" style="width: 100%" v-loading="plateLoading">
-                        <el-table-column fixed prop="id" label="编号" width="90">
-                        </el-table-column>
-                        <el-table-column prop="sector_name" label="版块" width="">
-                        </el-table-column>
-                        <el-table-column prop="sector_code" label="版块代码" width="">
-                        </el-table-column>
-                        <el-table-column prop="created_at" label="添加时间" width="">
-                        </el-table-column>
-                        <el-table-column prop="updated_at" label="修改时间" width="">
+                        <el-table-column fixed prop="id" label="编号" width="90"></el-table-column>
+                        <el-table-column prop="sector_name" label="通栏名称" width=""></el-table-column>
+                        <el-table-column prop="sector_size" label="尺寸" width=""></el-table-column>
+                        <el-table-column prop="template_name" label="所属皮肤" width=""></el-table-column>
+                        <el-table-column prop="template_class_name" label="所属风格" width=""></el-table-column>
+                        <el-table-column prop="type_page" label="所属页面" width="">
+
                         </el-table-column>
+                        <el-table-column prop="created_at" label="添加时间" width=""></el-table-column>
+                        <el-table-column prop="updated_at" label="修改时间" width=""></el-table-column>
                         <el-table-column fixed="right" label="操作" width="200">
                             <template slot-scope="scope">
                                 <div class="listBtnBox">
@@ -81,19 +99,44 @@
             :close-on-click-modal="false">
             <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                 <div class="dialogText">
-                    <el-form-item label="关联风格名称:" prop="templateStyle">
+                    <el-form-item label="通栏名称:" prop="plateName">
+                        <el-input v-model="ruleForm.plateName" placeholder="输入通栏名称" disabled></el-input>
+                    </el-form-item>
+                    <el-form-item label="所属页面:" prop="plateName">
+                        <el-select v-model="ruleForm.templateStyle" placeholder="请选择所属页面" :disabled="this.dialogName === '编辑'" @change="changeTemplateStyle">
+                            <el-option>首页</el-option>
+                            <el-option>列表</el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="所属风格:" prop="templateStyle">
                         <el-select v-model="ruleForm.templateStyle" placeholder="请选择关联风格名称"
+                            :disabled="this.dialogName === '编辑'" @change="changeTemplateStyle">
+                            <el-option v-for="item in options" :key="item.class_id" :label="item.name" :value="item.class_id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="风格id:" prop="plateName">
+                        <el-input v-model="ruleForm.plateName" placeholder="所属风格id" disabled></el-input>
+                    </el-form-item>
+                    <el-form-item label="所属皮肤:" prop="templateStyle">
+                        <el-select v-model="ruleForm.templateStyle" placeholder="请选择所属皮肤"
                             :disabled="this.dialogName === '编辑'" @change="changeTemplateStyle">
                             <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                             </el-option>
                         </el-select>
                     </el-form-item>
-                    <el-form-item label="版块名称:" prop="plateName">
-                        <el-input v-model="ruleForm.plateName" placeholder="请输入版块名称"></el-input>
+                    <el-form-item label="皮肤id:" prop="plateName">
+                        <el-input v-model="ruleForm.plateName" placeholder="所属皮肤id" disabled></el-input>
+                    </el-form-item>
+                    <el-form-item label="尺寸:" prop="templateStyle">
+                        <el-select v-model="ruleForm.templateStyle" placeholder="请选择尺寸"
+                            :disabled="this.dialogName === '编辑'" @change="changeTemplateStyle">
+                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
+                            </el-option>
+                        </el-select>
                     </el-form-item>
-                    <el-form-item label="版块代码:" prop="plateCode">
-                        <el-input v-model="ruleForm.plateCode" placeholder="请输入版块代码"
-                            :disabled="this.dialogName === '编辑'"></el-input>
+                    <el-form-item label="通栏关键词:" prop="plateName">
+                        <el-input v-model="ruleForm.plateName" placeholder="输入关键词" disabled></el-input>
                     </el-form-item>
                     <el-form-item label="页面类型:" prop="pageType">
                         <el-checkbox-group v-model="ruleForm.pageType" @change="changeCheckbox"
@@ -103,7 +146,7 @@
                             }}</el-checkbox>
                         </el-checkbox-group>
                     </el-form-item>
-                    <el-form-item label="组件展示图：" prop="image" :label-width="formLabelWidth"
+                    <el-form-item label="通栏缩略图：" prop="image" :label-width="formLabelWidth"
                         :class="['custom-form-item']" class="custom-align-right">
                         <div class="uploaderBox">
                             <!--图片上传组件 start ------------------------------------------------------------>
@@ -165,7 +208,7 @@ export default {
         }
         return {
             //1.1 初始化信息 
-            tableDivTitle: "版块列表",  //列表标题
+            tableDivTitle: "通栏列表",  //列表标题
             dialogTableVisible: false,      //编辑弹框
             dialogName: '编辑', //编辑弹窗名称
             plateLoading: true, //表格内容加载中
@@ -719,6 +762,28 @@ input[aria-hidden=true] {
         line-height: 36px;
         font-size: 16px;
     }
+
+}
+
+.sizeBox {
+    display: flex;
+    align-items: center;
+    width: 80%;
+    .sizeInputSymbol {
+        width: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .sizeInput {
+        width: 50%;
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 100%;
+        }
+    }
 }
 
 // 弹出层内容
@@ -837,4 +902,10 @@ input[aria-hidden=true] {
 .dialog-footer {
     margin: 0 auto;
 }
+
+.rowMargin {
+    margin-top: 20px;
+}
+
+
 </style>

src/views/componentGallery/size.vue

@@ -0,0 +1,600 @@
+<template>
+    <div>
+        <div class="title">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">尺寸高度</div>
+                        <el-input v-model="sizeHeight" clearable placeholder="请输入尺寸高度"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left"> 
+                    <div class="searchBox">
+                        <div class="searchTitle">尺寸宽度</div>
+                        <el-input v-model="sizeWidth" clearable placeholder="请输入尺寸宽度"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <button class="btn" @click="addSize">添加尺寸</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData">
+                        <el-table-column fixed prop="id" label="编号" width="90"></el-table-column>
+                        <el-table-column label="尺寸高度" prop="height"></el-table-column>
+                        <el-table-column label="尺寸宽度" prop="width"></el-table-column>
+                        <el-table-column label="添加时间" prop="created_at"></el-table-column>
+                        <el-table-column label="修改时间" prop="updated_at"></el-table-column>
+                        <el-table-column fixed="right" label="操作" width="200">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
+                                        <i class="el-icon-delete"></i>
+                                        删除
+                                    </div>
+                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
+                                        <i class="el-icon-edit-outline"></i>
+                                        编辑
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------- ----------->
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination 
+                        background 
+                        @size-change="handleSizeChange" 
+                        @current-change="handleCurrentChange"
+                        :current-page="page" 
+                        :page-size="pageSize" 
+                        layout="total, prev, pager, next, jumper"
+                        :total="total"
+                    >
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+
+        <!-- 弹出框 编辑 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="6vh" :close-on-click-modal="false">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="尺寸宽度:" prop="sizeWidth">
+                        <el-input v-model="ruleForm.sizeWidth" placeholder="请输入宽度"></el-input>
+                    </el-form-item>
+                    <el-form-item label="尺寸高度:" prop="sizeHeight">
+                        <el-input v-model="ruleForm.sizeHeight" placeholder="请输入高度"></el-input>
+                    </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="cancelForm">取消</el-button>
+                    <el-button type="primary" @click="submitForm">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog>
+        <!-- 弹出框 编辑 end----------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+
+export default {
+    components: {
+        tableTitle,//表格标题
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            //1.查询条件 start ---------------------------------------->
+            sizeHeight: '',
+            sizeWidth: '',
+            //1.查询条件 end ---------------------------------------->
+
+            //2.列表数据 start ---------------------------------------->
+            tableData: [],
+            page: 1,
+            pageSize: 10,
+            total: 0,
+            //2.列表数据 end ---------------------------------------->
+
+            //3.弹出框 start ---------------------------------------->
+            dialogTableVisible: false,
+            tableDivTitle:'尺寸管理',
+            dialogName:'添加尺寸',
+            ruleForm: {
+                sizeWidth: '', 
+                sizeHeight: '', 
+            },
+            rules: {
+                sizeWidth: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                sizeHeight: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+            //3.弹出框 end ---------------------------------------->
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 请求数据
+        getData() {
+            this.$store.dispatch('size/getSizeList',{page: this.page,pageSize: this.pageSize}).then(res=> {
+                this.tableData =  res.data.row; //给与内容
+                this.total = res.data.count; //给与总条数
+              }).catch(() => {
+                this.$message({
+                  type: 'error',
+                  message: '网络错误，请重试！'
+                });
+              })
+        },
+        //1.2 删除
+        deleteRow(id) {
+            console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+                const data = {
+                    id: id, //id
+                }
+                this.$store.dispatch('size/delSize',data).then(res=> {
+                    console.log(res);
+                }).then(() => {
+                    this.$message({
+                        message: '删除成功',
+                        type:'success'
+                    })
+                    this.getData()
+                }).catch(() => {
+                    this.$message({
+                        type: 'error',
+                        message: '删除失败'
+                    });
+
+                })
+
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '已取消删除'
+                });
+            });
+        },
+        //1.3 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.4 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.5 搜索
+        goSearch() {
+            const data = {
+                width: this.sizeWidth, //宽度
+                height: this.sizeHeight, //高度
+                page: 1, //页码
+                pageSize: 10, //每页条数
+            }
+            this.$store.dispatch('size/getSizeList',data).then(res=> {
+            this.tableData =  res.data.row; //给与内容
+            this.total = res.data.count; //给与总条数
+            }).catch(() => {
+            this.$message({
+                type: 'info',
+                message: '网络错误，请重试！'
+            });
+            })
+        },
+        //1.6 重置
+        goReset() {
+            this.sizeHeight = ""
+            this.sizeWidth = ""
+            this.page=1
+            this.pageSize=10
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+        //1.7 编辑
+        goEdit(id,val) {
+            this.dialogName = '编辑尺寸'
+            this.activeid = id
+            this.dialogTableVisible = true
+            this.getData()
+
+            //数据回显
+            this.ruleForm.sizeHeight = val.height //高度
+            this.ruleForm.sizeWidth = val.width //宽度
+        },
+        //1.8 添加
+        addSize() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加尺寸"
+            //添加时清空回显回来的数据
+
+            this.ruleForm.sizeHeight = '' //高度
+            this.ruleForm.sizeWidth = '' //宽度
+        },
+
+        // 弹出层相关方法 ---------------------------------------------------->
+        // 1.9 提交表单
+        submitForm() {
+            if (this.dialogName === "添加尺寸") {
+                const data = {
+                    height: this.ruleForm.sizeHeight,
+                    width: this.ruleForm.sizeWidth,
+                };
+                // 直接传递 data 作为参数，而不是 {data}
+                this.$store.dispatch('size/addSize', data).then(res => {
+                    if (res.code === 200) {
+                        this.$message({
+                            message: '添加成功',
+                            type:'success'
+                        });
+                        this.dialogTableVisible = false;
+                        this.getData();
+                    } else if (res.code === 0) {
+                        this.$message({
+                            message: res.message,
+                            type: 'error'
+                        });
+                    }
+                }).catch(error => {
+                    this.$message({
+                        message: '添加过程中出现错误，请重试',
+                        type: 'error'
+                    });
+                });
+            }
+            if (this.dialogName == "编辑尺寸") {
+                const data = {
+                    id: this.activeid,
+                    height: this.ruleForm.sizeHeight,
+                    width: this.ruleForm.sizeWidth,
+                };
+                this.$store.dispatch('size/upSize', data).then(res => {
+                    if (res.code === 200) {
+                        this.$message({
+                            message: '编辑成功',
+                            type:'success'
+                        });
+                        this.dialogTableVisible = false;
+                        this.getData();
+                    } else if (res.code === 0) {
+                        this.$message({
+                            message: res.message,
+                            type: 'error'
+                        });
+                    }
+                }).catch(error => {
+                    this.$message({
+                        message: '编辑过程中出现错误，请重试',
+                        type: 'error'
+                    });
+                });
+            }
+        },
+        // 1.10 取消提交
+        cancelForm(){
+            this.dialogTableVisible = false
+        }
+        // 弹出层相关方法 end ---------------------------------------------------->
+    },
+    mounted() {
+        this.getData()
+    },
+}
+</script>
+
+<style scoped lang="less">
+// 提示信息
+.tips {
+    margin: 30px;
+    background-color: #e9ecf9;
+    border-radius: 11px;
+
+    .tipsIcon {
+        margin: 10px 15px;
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        background: url("../../assets/advertise/Info Circle.png") no-repeat;
+        vertical-align: middle;
+    }
+
+    .tipsText {
+        font-size: 14px;
+        color: #666666;
+    }
+}
+
+// 头部
+.title {
+    margin: 30px 30px 20px 30px;
+    padding: 30px 30px 40px 30px;
+    background-color: #fff;
+    border-radius: 20px 20px 20px 20px;
+    border: 1px solid #E9EDF7;
+
+    .left {
+        float: left;
+    }
+
+    .right {
+        float: right;
+    }
+
+
+    .searchBox {
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 80%;
+        }
+
+        .searchTitle {
+            padding-bottom: 10px;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 14px;
+            color: #999999;
+            line-height: 16px;
+        }
+
+        .el-select {
+            width: 100%;
+            display: inline-block;
+            position: relative;
+        }
+    }
+
+
+    .btnList {
+        float: right;
+        padding-top: 28px;
+
+        button {
+            height: 38px;
+            border: none;
+            border-radius: 8px;
+            padding: 0 30px;
+        }
+
+        .search {
+            background-color: #5570f1;
+            color: #fff;
+            margin-right: 20px;
+        }
+
+        .reset {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 16px;
+            color: #333333;
+            background: #F5F7FB;
+            border-radius: 8px 8px 8px 8px;
+            border: 1px solid rgba(85, 112, 241, 0.11);
+        }
+    }
+}
+
+.layerBox {
+    padding: 30px 20px;
+    position: relative;
+
+    .btn {
+        position: absolute;
+        top: 30px;
+        right: 20px;
+        height: 38px;
+        color: #fff;
+        background-color: #5570f1;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 28px 9px;
+        box-sizing: border-box;
+    }
+
+    .listBtnBox {
+        justify-content: left;
+    }
+
+
+    .listDeleteBtn,
+    .listEditBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 20px;
+        width: 76px;
+        height: 36px;
+        line-height: 36px;
+    }
+
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-input--medium,
+    ::v-deep .el-form-item__label {
+        line-height: 36px;
+        font-size: 16px;
+    }
+}
+
+// 弹出层内容
+.dialogText {
+    margin: 0 7px 0 3px;
+    padding-bottom: 1px;
+    padding: 30px 60px 1px 20px;
+    background-color: #f5f7fb;
+
+    .adImage {
+        width: 140px;
+        height: 140px;
+        line-height: 210px;
+        border-radius: 12px;
+        border: 1px solid rgba(85, 112, 241, 0.11);
+
+        img {
+            width: 140px;
+            height: 80px;
+        }
+    }
+
+    .uploaderBox,
+    .avatar-upload-container {
+        display: inline-block;
+    }
+
+    .avatar-uploader {
+        background-color: #fff;
+    }
+
+    .uploaderBox {
+        margin-right: 20px;
+        position: relative;
+
+        h5 {
+            text-align: center;
+            font-size: 14px;
+            font-weight: 400;
+            color: #999999;
+            margin-top: 0px;
+        }
+    }
+
+    ::v-deep .avatar {
+        width: 140px;
+        height: auto;
+    }
+
+    .price {
+        ::v-deep .el-input {
+            width: 29%;
+        }
+    }
+
+    .example {
+        font-family: Microsoft YaHei;
+        color: #5570F1;
+    }
+
+    .el_btnList {
+        margin-right: 15px;
+        margin-top: 20px;
+    }
+
+    //日期时间选择器的宽
+    ::v-deep .el-date-editor.el-input {
+        width: 48%;
+    }
+
+    ::v-deep .el-button+.el-button {
+        margin-left: 0px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+}
+
+// 弹出层按钮
+.dialogBtn {
+    text-align: center;
+    margin: 50px auto 20px;
+
+    button {
+        width: 184px;
+        padding: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        border: none;
+        border-radius: 12px 12px 12px 12px;
+    }
+
+    // 取消
+    .cancel {
+        color: #333333;
+        background-color: #f5f7fb;
+        border: 2px solid rgba(85, 112, 241, 0.11);
+    }
+
+    // 提交
+    .submit {
+        color: #fff;
+        background-color: #5570F1;
+        margin-left: 40px;
+    }
+}
+
+//审核弹出框
+.radioGroup {
+    ::v-deep .el-form-item {
+        margin-top: 40px;
+        margin-bottom: 0;
+    }
+}
+
+.graph {
+    background-color: #f5f7fb;
+    padding: 60px 100px;
+    overflow: hidden;
+
+    li {
+        float: left;
+    }
+
+    >li:first-child {
+        margin-right: 100px;
+    }
+}
+
+.dialog-footer {
+    margin: 0 auto;
+}
+</style>

src/views/componentGallery/skin.vue

@@ -0,0 +1,1318 @@
+<!-- 风格 -->
+<template>
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">皮肤名称</div>
+                        <el-input v-model="templateName" clearable placeholder="请输入皮肤名称"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">风格名称</div>
+                        <el-select v-model="templateStyle" clearable placeholder="请选择风格">
+                            <el-option v-for="item in options" :key="item.class_id" :label="item.name" :value="item.class_id"></el-option>
+                        </el-select>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <button class="btn" @click="addWebsite">添加皮肤</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData" style="width: 100%" v-loading="templateLoading">
+                        <el-table-column fixed prop="id" label="编号" width="90"></el-table-column>
+                        <el-table-column prop="template_id" label="皮肤编号" width=""></el-table-column>
+                        <el-table-column prop="template_name" label="皮肤名称" width=""></el-table-column>
+                        <el-table-column prop="template_class_name" label="所属风格" width=""></el-table-column>
+                        <el-table-column prop="template_keyword" label="皮肤关键词" width=""></el-table-column>
+                        <el-table-column prop="created_at" label="添加时间" width=""></el-table-column>
+                        <el-table-column prop="updated_at" label="修改时间" width=""></el-table-column>
+                        <el-table-column fixed="right" label="操作" width="200">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
+                                        <i class="el-icon-delete"></i>
+                                        删除
+                                    </div>
+                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
+                                        <i class="el-icon-edit-outline"></i>
+                                        编辑
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------------------>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
+                        :total="total">
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+
+        <!-- 弹出框 编辑 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="6vh"
+            :close-on-click-modal="false">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="关联风格名称:" prop="templateStyle">
+                        <el-select v-model="ruleForm.templateStyle" placeholder="请关联皮肤风格">
+                            <el-option v-for="item in options" :key="item.class_id" :label="item.name" :value="item.class_id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="皮肤编号:" prop="templateId">
+                        <el-input v-model="ruleForm.templateId" placeholder="请输入皮肤编号"></el-input>
+                    </el-form-item>
+                    <el-form-item label="皮肤名称:" prop="templateName">
+                        <el-input v-model="ruleForm.templateName" placeholder="请输入皮肤名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="皮肤关键词：" prop="templateKeyword" class="custom-align-right">
+                        <template #label>
+                        <span class="askBox">
+                            皮肤关键词：
+                            <el-tooltip class="item" effect="dark" content="皮肤关键词，如：黑色、卡通、英雄。" placement="top">
+                            <i class="el-icon-question"></i>
+                            </el-tooltip>
+                        </span>
+                        </template>
+                        <tagInput :initialTags="tags" @tags-updated="updateTags"></tagInput>
+                    </el-form-item>
+                    <el-form-item label="风格图:" prop="templateImg" :label-width="formLabelWidth"
+                        :class="['custom-form-item']" class="custom-align-right">
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_home">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_home" :src="logoUrl_home" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="homeImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_home" class="delete-button" @click="handleDelete_home">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>首页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_classify">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_class" :src="logoUrl_class" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="classifyImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_class" class="delete-button" @click="handleDelete_class">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>频道页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_list">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_list" :src="logoUrl_list" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="listImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_list" class="delete-button" @click="handleDelete_list">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>列表页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_detail">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_detail" :src="logoUrl_detail" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="detailImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_detail" class="delete-button"
+                                    @click="handleDelete_detail">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>详情页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_search">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_search" :src="logoUrl_search" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="searchImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_search" class="delete-button"
+                                    @click="handleDelete_search">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>搜索页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_sList">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_sList" :src="logoUrl_sList" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="sListImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_sList" class="delete-button" @click="handleDelete_sList">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>特殊列表页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_sDetail">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_sDetail" :src="logoUrl_sDetail" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="sDetailImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_sDetail" class="delete-button"
+                                    @click="handleDelete_sDetail">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>特殊详情页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <!--  -->
+                    </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="cancelForm">取消</el-button>
+                    <el-button type="primary" @click="submitForm">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog>
+        <!-- 弹出框 编辑 end----------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+//引入tag标签组件
+import tagInput from '../../components/InputTag/index.vue';
+//引入公用样式
+import '@/styles/global.less';
+import { getTemplateClass, getTemplateList, addTemplate, delTemplate, updateTemplate, getTemplateInfo } from '@/api/style'
+export default {
+    components: {
+        tableTitle,//表格标题-
+        tagInput,//标签组件
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+            const validateArray = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            // 1.1  初始化数据 ---------------------------------
+            tableDivTitle: "皮肤列表",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            templateLoading: true,//页面加载中
+
+            tableData: [],//表格数据
+
+            tags: [],//标签数据
+            //1.2 搜索框相关 ----------------------------------
+            templateStyle: '',//皮肤风格
+            templateName: '',//皮肤名称
+
+
+            // 1.3 分页相关 -----------------------------------
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+            //3.4 上传logo图片 --------------------------------
+            // logoUrl: '',
+            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+
+            //首页图片
+            homeImg: '',
+            logoUrl_home: '',
+            home_obj: {
+                url: '',
+                name: '首页',
+                value: '1',
+            },
+            //频道页图片
+            classifyImg: '',
+            logoUrl_class: '',
+            class_obj: {
+                url: '',
+                name: '频道页',
+                value: '2',
+            },
+            //列表页图片
+            listImg: '',
+            logoUrl_list: '',
+            list_obj: {
+                url: '',
+                name: '列表页',
+                value: '3',
+            },
+            //详情页图片
+            detailImg: '',
+            logoUrl_detail: '',
+            detail_obj: {
+                url: '',
+                name: '详情页',
+                value: '4',
+            },
+            //搜索页图片
+            searchImg: '',
+            logoUrl_search: '',
+            search_obj: {
+                url: '',
+                name: '搜索页',
+                value: '5',
+            },
+            //特殊列表页图片
+            sListImg: '',
+            logoUrl_sList: '',
+            sList_obj: {
+                url: '',
+                name: '特殊列表页',
+                value: '6',
+            },
+            //特殊详情页图片
+            sDetailImg: '',
+            logoUrl_sDetail: '',
+            sDetail_obj: {
+                url: '',
+                name: '特殊详情页',
+                value: '7',
+            },
+            //图片json
+            img_arr: [],
+            // 页面类型json
+            page_arr: [],
+            value: '',
+            options: [],
+
+            //活动id
+            activeid: "",
+
+            formLabelWidth: '', //广告示例图相关
+
+            // 弹框相关 -------------------------------------------
+            ruleForm: {
+                templateStyle: '', //皮肤风格
+                templateName: '', //皮肤名称
+                templateImg: [], //皮肤图片
+                templateKeyword: [], //皮肤关键词
+                templateId: '', //皮肤编号
+                templatePage: [], //页面类型
+            },
+            rules: {
+                templateStyle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                templateName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                templateImg: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                templateKeyword: [{ required: true, trigger: 'blur', validator: validateArray }],
+                templateId: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            const data = {
+                page: this.page,
+                page_size: this.pageSize,
+            }
+            this.$store.dispatch('genre/getTemplateList', data).then(res => {
+                this.tableData = res.data.data
+                this.tableData.forEach(item => {
+                    item.tags =item.template_keyword;
+                    if (typeof item.template_keyword === 'string') {
+                        try {
+                            let keywordArray = JSON.parse(item.template_keyword);
+                            if (Array.isArray(keywordArray)) {
+                                // 将解析后的数组赋值给 item.tags
+                                
+                                item.template_keyword = keywordArray.join(' | ');
+                            } else {
+                                item.template_keyword = '';
+                            }
+                        } catch (error) {
+                            console.error('解析 keyword 失败:', error);
+                        }
+                    }
+                });
+                this.total = res.data.total
+                this.templateLoading = false
+            }).catch(() => {
+                this.$message({
+                    type: 'error',
+                    message: '网络错误，请重试！'
+                });
+            })
+        },
+        //获取皮肤风格
+        getStyleList() {
+            this.$store.dispatch('genre/getTemplateClass').then(res => {
+                this.options  = res.data
+                console.log(res.data);
+            }).catch(() => {
+                this.$message({
+                    type: 'error',
+                    message: '网络错误，请重试！'
+                });
+            })
+        },
+
+        //1.2 删除内容
+        deleteRow(id) {
+            this.$store.dispatch('genre/delTemplate',{ id: id }).then(res=> {
+                this.$message({
+                    message: '删除成功',
+                    type:'success'
+                })
+                this.getData()
+              }).catch(() => {
+                this.$message({
+                  type: 'error',
+                  message: '网络错误，请重试！'
+                })
+              })
+        },
+        //1.3 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.4 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.5 搜索按钮
+        goSearch() {
+            const data = {
+                page: this.page,
+                page_size: this.pageSize,
+                template_class_id: this.templateStyle ?? '', //皮肤风格id
+                template_name: this.templateName ?? '', //皮肤名称
+            }
+            this.$store.dispatch('genre/getTemplateList', data).then(res => {
+                this.tableData = res.data.data
+                this.tableData.forEach(item => {
+                    item.tags =item.template_keyword;
+                    if (typeof item.template_keyword === 'string') {
+                        try {
+                            let keywordArray = JSON.parse(item.template_keyword);
+                            if (Array.isArray(keywordArray)) {
+                                // 将解析后的数组赋值给 item.tags
+                                
+                                item.template_keyword = keywordArray.join(' | ');
+                            } else {
+                                item.template_keyword = '';
+                            }
+                        } catch (error) {
+                            console.error('解析 keyword 失败:', error);
+                        }
+                    }
+                });
+                this.total = res.data.total
+                this.templateLoading = false
+            }).catch(() => {
+                this.$message({
+                    type: 'error',
+                    message: '网络错误，请重试！'
+                });
+            })
+        },
+        //1.6 重置按钮
+        goReset() {
+            this.templateStyle = ""
+            this.templateName = ""
+            this.page=1
+            this.pageSize=10
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+        //1.7 编辑
+        goEdit(id, val) {
+            this.dialogName = '编辑'
+            this.activeid = id
+            this.dialogTableVisible = true
+            // console.log("************", val);
+
+            //数据回显
+            this.ruleForm.templateStyle = val.template_class_id
+            this.ruleForm.templateName = val.template_name
+            this.img_arr = JSON.parse(val.template_img)
+            this.tags = val.template_keyword ? val.template_keyword.split("|") : []
+            this.ruleForm.templateKeyword = val.template_keyword? val.template_keyword.split("|") : []
+            this.ruleForm.templateId = val.template_id
+            this.homeImg = ''
+            this.logoUrl_home = ''
+            this.classifyImg = ''
+            this.logoUrl_class = ''
+            this.listImg = ''
+            this.logoUrl_list = ''
+            this.detailImg = ''
+            this.logoUrl_detail = ''
+            this.searchImg = ''
+            this.logoUrl_search = ''
+            this.sListImg = ''
+            this.logoUrl_sList = ''
+            this.sDetailImg = ''
+            this.logoUrl_sDetail = ''
+            this.page_arr = []
+            for (let item of this.img_arr) {
+                if (item.name == '首页') {
+                    this.logoUrl_home = item.url
+                    this.homeImg = item.url
+                }
+                if (item.name == '频道页') {
+                    this.logoUrl_class = item.url
+                    this.classifyImg = item.url
+                }
+                if (item.name == '列表页') {
+                    this.logoUrl_list = item.url
+                    this.listImg = item.url
+                }
+                if (item.name == '详情页') {
+                    this.logoUrl_detail = item.url
+                    this.detailImg = item.url
+                }
+                if (item.name == '搜索页') {
+                    this.logoUrl_search = item.url
+                    this.searchImg = item.url
+                }
+                if (item.name == '特殊列表页') {
+                    this.logoUrl_sList = item.url
+                    this.sListImg = item.url
+                }
+                if (item.name == '特殊详情页') {
+                    this.logoUrl_sDetail = item.url
+                    this.sDetailImg = item.url
+                }
+            }
+        },
+        //1.8 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+
+            //添加时清空回显回来的数据
+            this.tags = []
+            this.ruleForm.templateStyle = ''
+            this.ruleForm.templateName = ''
+            this.ruleForm.templateImg = []
+            this.img_arr = []
+            this.homeImg = ''
+            this.logoUrl_home = ''
+            this.classifyImg = ''
+            this.logoUrl_class = ''
+            this.listImg = ''
+            this.logoUrl_list = ''
+            this.detailImg = ''
+            this.logoUrl_detail = ''
+            this.searchImg = ''
+            this.logoUrl_search = ''
+            this.sListImg = ''
+            this.logoUrl_sList = ''
+            this.sDetailImg = ''
+            this.logoUrl_sDetail = ''
+            this.ruleForm.templateKeyword = []
+            this.ruleForm.templateId = ''
+
+        },
+
+        // 弹出层相关方法 ---------------------------------------------------->
+        // 1.9 提交表单
+        submitForm() {
+            this.img_arr = []
+            //首页
+            if (this.logoUrl_home) {
+                this.home_obj.url = this.homeImg
+                this.img_arr.push(this.home_obj)
+                this.page_arr.push(1);
+            }
+            //频道页
+            if (this.logoUrl_class) {
+                this.class_obj.url = this.classifyImg
+                this.img_arr.push(this.class_obj)
+                this.page_arr.push(2);
+            }
+            //列表页
+            if (this.logoUrl_list) {
+                this.list_obj.url = this.listImg
+                this.img_arr.push(this.list_obj)
+                this.page_arr.push(3);
+            }
+            //详情页
+            if (this.logoUrl_detail) {
+                this.detail_obj.url = this.detailImg
+                this.img_arr.push(this.detail_obj)
+                this.page_arr.push(4);
+            }
+            //搜索页
+            if (this.logoUrl_search) {
+                this.search_obj.url = this.searchImg
+                this.img_arr.push(this.search_obj)
+                this.page_arr.push(5);
+            }
+            //特殊列表页
+            if (this.logoUrl_sList) {
+                this.sList_obj.url = this.sListImg
+                this.img_arr.push(this.sList_obj)
+                this.page_arr.push(6)
+            }
+            //特殊详情页
+            if (this.logoUrl_sDetail) {
+                this.sDetail_obj.url = this.sDetailImg
+                this.img_arr.push(this.sDetail_obj)
+                this.page_arr.push(7)
+            }
+            function cleanObProp(arr) {
+                return arr.map(item => {
+                    const newItem = {};
+                    for (const key in item) {
+                        if (key !== '__ob__') {
+                            newItem[key] = item[key];
+                        }
+                    }
+                    return newItem;
+                });
+            }
+            console.log('page-----------------------------------------',this.page_arr);
+            const cleanArray = cleanObProp(this.img_arr);
+            this.ruleForm.templateImg = JSON.stringify(cleanArray);
+            this.ruleForm.templatePage = JSON.stringify(this.page_arr);
+            // console.log(this.ruleForm.templateImg);
+
+            if (this.dialogName == "添加") {
+                addTemplate({
+                    template_name: this.ruleForm.templateName, //皮肤名称
+                    template_img: this.ruleForm.templateImg, // 皮肤图片
+                    template_class_id: this.ruleForm.templateStyle, //皮肤风格id
+                    template_keyword: this.ruleForm.templateKeyword, //皮肤关键词
+                    template_id: this.ruleForm.templateId, //皮肤编号
+                    page_type: this.ruleForm.templatePage, //页面类型
+                }).then(data => {
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '添加成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                        this.getData()
+                    } else if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                        return
+                    } else {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                        return
+                    }
+                })
+            }
+            if (this.dialogName == "编辑") {
+                const data = {
+                    id: this.activeid, //活动id
+                    template_name: this.ruleForm.templateName, //皮肤名称
+                    template_img: this.ruleForm.templateImg, // 皮肤图片
+                    template_class_id: this.ruleForm.templateStyle, //皮肤风格id
+                    template_keyword: this.ruleForm.templateKeyword, //皮肤关键词
+                    template_id: this.ruleForm.templateId, //皮肤编号
+                    page_type: this.ruleForm.templatePage, //页面类型
+                }
+                this.$store.dispatch('genre/updateTemplate', data).then(res => {
+                    if (res.code == 200) {
+                        this.$message({
+                            message: '编辑成功',
+                            type:'success'
+                        })
+                        this.dialogTableVisible = false
+                        this.getData()
+                    }else{
+                        this.$message({
+                            message: res.message,
+                            type: 'error'
+                        })
+                    }
+                    
+                })
+            }
+
+        },
+        //取消添加或编辑
+        cancelForm() {
+            this.dialogTableVisible = false
+        },
+
+        //3.6 上传图片操作
+        beforeAvatarUpload_home(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.logoUrl_home = res.data.imgUrl;//显示缩略图
+                this.homeImg = res.data.imgUrl;//提供表单地址
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_classify(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.logoUrl_class = res.data.imgUrl;//显示缩略图
+                this.classifyImg = res.data.imgUrl;//提供表单地址
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_list(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.logoUrl_list = res.data.imgUrl;//显示缩略图
+                this.listImg = res.data.imgUrl;//提供表单地址
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_detail(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.logoUrl_detail = res.data.imgUrl;//显示缩略图
+                this.detailImg = res.data.imgUrl;//提供表单地址
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_search(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.logoUrl_search = res.data.imgUrl;//显示缩略图
+                this.searchImg = res.data.imgUrl;//提供表单地址
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_sList(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.logoUrl_sList = res.data.imgUrl;//显示缩略图
+                this.sListImg = res.data.imgUrl;//提供表单地址
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_sDetail(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.logoUrl_sDetail = res.data.imgUrl;//显示缩略图
+                this.sDetailImg = res.data.imgUrl;//提供表单地址
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        handleDelete_home() {
+            // 删除图片
+            this.logoUrl_home = ''; // 清空图片 URL
+        },
+        handleDelete_class() {
+            // 删除图片
+            this.logoUrl_class = ''; // 清空图片 URL
+        },
+        handleDelete_list() {
+            // 删除图片
+            this.logoUrl_list = ''; // 清空图片 URL
+        },
+        handleDelete_detail() {
+            // 删除图片
+            this.logoUrl_detail = ''; // 清空图片 URL
+        },
+        handleDelete_search() {
+            // 删除图片
+            this.logoUrl_search = ''; // 清空图片 URL
+        },
+        handleDelete_sList() {
+            // 删除图片
+            this.logoUrl_sList = ''; // 清空图片 URL
+        },
+        handleDelete_sDetail() {
+            // 删除图片
+            this.logoUrl_sDetail = ''; // 清空图片 URL
+        },
+        updateTags(newTags) {
+            // this.foem.seo_keywords = newTags;
+            
+            this.tags = newTags;
+            this.ruleForm.templateKeyword = newTags;
+          },
+        // 3.7 弹出层相关方法 end ------------------------------------------------------------>
+
+    },
+    mounted() {
+        this.getData()
+        this.getStyleList() //获取皮肤风格
+    },
+}
+</script>
+
+<style scoped lang="less">
+input[aria-hidden=true] {
+    display: none !important;
+}
+
+// 提示信息
+.tips {
+    margin: 30px;
+    background-color: #e9ecf9;
+    border-radius: 11px;
+
+    .tipsIcon {
+        margin: 10px 15px;
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        background: url("../../assets/advertise/Info Circle.png") no-repeat;
+        vertical-align: middle;
+    }
+
+    .tipsText {
+        font-size: 14px;
+        color: #666666;
+    }
+}
+
+// 头部
+.title {
+    margin: 30px 30px 20px 30px;
+    padding: 30px 30px 40px 30px;
+    background-color: #fff;
+    border-radius: 20px 20px 20px 20px;
+    border: 1px solid #E9EDF7;
+
+    .left {
+        float: left;
+    }
+
+    .right {
+        float: right;
+    }
+
+
+    .searchBox {
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 80%;
+        }
+
+        .searchTitle {
+            padding-bottom: 10px;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 14px;
+            color: #999999;
+            line-height: 16px;
+        }
+
+        .el-select {
+            width: 100%;
+            display: inline-block;
+            position: relative;
+        }
+    }
+
+
+    .btnList {
+        float: right;
+        padding-top: 28px;
+
+        button {
+            height: 38px;
+            border: none;
+            border-radius: 8px;
+            padding: 0 30px;
+        }
+
+        .search {
+            background-color: #5570f1;
+            color: #fff;
+            margin-right: 20px;
+        }
+
+        .reset {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 16px;
+            color: #333333;
+            background: #F5F7FB;
+            border-radius: 8px 8px 8px 8px;
+            border: 1px solid rgba(85, 112, 241, 0.11);
+        }
+    }
+}
+
+.layerBox {
+    padding: 30px 20px;
+    position: relative;
+
+    .btn {
+        position: absolute;
+        top: 30px;
+        right: 20px;
+        height: 38px;
+        color: #fff;
+        background-color: #5570f1;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 28px 9px;
+        box-sizing: border-box;
+    }
+
+    .listBtnBox {
+        justify-content: left;
+    }
+
+
+    .listDeleteBtn,
+    .listEditBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 20px;
+        width: 76px;
+        height: 36px;
+        line-height: 36px;
+    }
+
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-input--medium,
+    ::v-deep .el-form-item__label {
+        line-height: 36px;
+        font-size: 16px;
+    }
+}
+
+// 弹出层内容
+.dialogText {
+    margin: 0 7px 0 3px;
+    padding-bottom: 1px;
+    padding: 30px 60px 1px 20px;
+    background-color: #f5f7fb;
+
+    .adImage {
+        width: 140px;
+        height: 140px;
+        line-height: 210px;
+        border-radius: 12px;
+        border: 1px solid rgba(85, 112, 241, 0.11);
+
+        img {
+            width: 140px;
+            height: 80px;
+        }
+    }
+
+    .uploaderBox,
+    .avatar-upload-container {
+        display: inline-block;
+    }
+
+    .avatar-uploader {
+        background-color: #fff;
+    }
+
+    .uploaderBox {
+        margin-right: 20px;
+        position: relative;
+
+        h5 {
+            text-align: center;
+            font-size: 14px;
+            font-weight: 400;
+            color: #999999;
+            margin-top: 0px;
+        }
+    }
+
+    ::v-deep .avatar {
+        width: 140px;
+        height: auto;
+    }
+
+    .price {
+        ::v-deep .el-input {
+            width: 29%;
+        }
+    }
+
+    .example {
+        font-family: Microsoft YaHei;
+        color: #5570F1;
+    }
+
+    .el_btnList {
+        margin-right: 15px;
+        margin-top: 20px;
+    }
+
+    //日期时间选择器的宽
+    ::v-deep .el-date-editor.el-input {
+        width: 48%;
+    }
+
+    ::v-deep .el-button+.el-button {
+        margin-left: 0px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+}
+
+// 弹出层按钮
+.dialogBtn {
+    text-align: center;
+    margin: 50px auto 20px;
+
+    button {
+        width: 184px;
+        padding: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        border: none;
+        border-radius: 12px 12px 12px 12px;
+    }
+
+    // 取消
+    .cancel {
+        color: #333333;
+        background-color: #f5f7fb;
+        border: 2px solid rgba(85, 112, 241, 0.11);
+    }
+
+    // 提交
+    .submit {
+        color: #fff;
+        background-color: #5570F1;
+        margin-left: 40px;
+    }
+}
+
+//审核弹出框
+.radioGroup {
+    ::v-deep .el-form-item {
+        margin-top: 40px;
+        margin-bottom: 0;
+    }
+}
+
+.graph {
+    background-color: #f5f7fb;
+    padding: 60px 100px;
+    overflow: hidden;
+
+    li {
+        float: left;
+    }
+
+    >li:first-child {
+        margin-right: 100px;
+    }
+}
+
+.dialog-footer {
+    margin: 0 auto;
+}
+</style>

src/views/componentGallery/style.vue

@@ -6,17 +6,8 @@
             <el-row>
                 <el-col :span="6" class="left">
                     <div class="searchBox">
-                        <div class="searchTitle">模板风格</div>
-                        <el-select v-model="templateStyle" clearable placeholder="请选择">
-                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
-                            </el-option>
-                        </el-select>
-                    </div>
-                </el-col>
-                <el-col :span="6" class="left">
-                    <div class="searchBox">
-                        <div class="searchTitle">模板名称</div>
-                        <el-input v-model="templateName" clearable placeholder="请输入模板名称"></el-input>
+                        <div class="searchTitle">风格名称</div>
+                        <el-input v-model="name" clearable placeholder="请输入风格名称"></el-input>
                     </div>
                 </el-col>
                 <el-col :span="8" class="right">
@@ -33,20 +24,22 @@
             <button class="btn" @click="addWebsite">添加风格</button>
             <el-row>
                 <template>
-                    <el-table class="my-table" :data="tableData" style="width: 100%" v-loading="templateLoading">
-                        <el-table-column fixed prop="id" label="编号" width="90">
+                    <el-table class="my-table" :data="tableData">
+                        <el-table-column fixed prop="id" label="编号">
                         </el-table-column>
-                        <el-table-column prop="template_class_name" label="模板风格" width="">
+                        <el-table-column fixed prop="class_id" label="风格编号">
                         </el-table-column>
-                        <el-table-column prop="template_name" label="模板名称" width="">
+                        <el-table-column prop="name" label="风格名称" width="">
                         </el-table-column>
-                        <el-table-column prop="created_at" label="添加时间" width="">
+                        <el-table-column prop="keyword" label="风格关键词" width="">
+                        </el-table-column>
+                        <el-table-column prop="template_count" label="皮肤总量" width="">
                         </el-table-column>
-                        <el-table-column prop="updated_at" label="修改时间" width="">
+                        <el-table-column prop="created_at" label="添加时间" width="">
                         </el-table-column>
-                        <el-table-column fixed="right" label="操作" width="200">
+                        <el-table-column fixed="right" label="操作">
                             <template slot-scope="scope">
-                                <div class="listBtnBox">
+                                <div class="listBtnBox" v-if="scope.row.type === 0">
                                     <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
                                         <i class="el-icon-delete"></i>
                                         删除
@@ -81,203 +74,22 @@
             :close-on-click-modal="false">
             <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                 <div class="dialogText">
-                    <el-form-item label="模板风格:" prop="templateStyle">
-                        <el-select v-model="ruleForm.templateStyle" placeholder="请选择模板风格">
-                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
-                            </el-option>
-                        </el-select>
+                    <el-form-item label="风格编号:" prop="class_id">
+                        <el-input v-model="ruleForm.class_id" placeholder="请输入风格编号"></el-input>
                     </el-form-item>
-                    <el-form-item label="模板名称:" prop="templateName">
-                        <el-input v-model="ruleForm.templateName" placeholder="请输入模板名称"></el-input>
+                    <el-form-item label="风格名称:" prop="name">
+                        <el-input v-model="ruleForm.name" placeholder="请输入风格名称"></el-input>
                     </el-form-item>
-                    <el-form-item label="风格图:" prop="templateImg" :label-width="formLabelWidth"
-                        :class="['custom-form-item']" class="custom-align-right">
-                        <div class="uploaderBox">
-                            <!--图片上传组件 start ------------------------------------------------------------>
-                            <div class="avatar-upload-container" @mouseenter="hovering = true"
-                                @mouseleave="hovering = false">
-                                <!-- 上传组件 -->
-                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
-                                    :before-upload="beforeAvatarUpload_home">
-                                    <!-- 预览图片 -->
-                                    <img v-if="logoUrl_home" :src="logoUrl_home" class="avatar">
-                                    <!-- 上传图标 -->
-                                    <div v-else class="chooseImgDiv">
-                                        <div>
-                                            <img src="@/assets/public/upload/noImage.png">
-                                            <div>选择图片</div>
-                                        </div>
-                                    </div>
-                                    <input type="hidden" name="logo" v-model="homeImg">
-                                </el-upload>
-                                <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl_home" class="delete-button" @click="handleDelete_home">
-                                    <i class="el-icon-delete"></i>
-                                </div>
-                                <h5>首页</h5>
-                            </div>
-                            <!--图片上传组件 end ------------------------------------------------------------>
-                        </div>
-                        <div class="uploaderBox">
-                            <!--图片上传组件 start ------------------------------------------------------------>
-                            <div class="avatar-upload-container" @mouseenter="hovering = true"
-                                @mouseleave="hovering = false">
-                                <!-- 上传组件 -->
-                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
-                                    :before-upload="beforeAvatarUpload_classify">
-                                    <!-- 预览图片 -->
-                                    <img v-if="logoUrl_class" :src="logoUrl_class" class="avatar">
-                                    <!-- 上传图标 -->
-                                    <div v-else class="chooseImgDiv">
-                                        <div>
-                                            <img src="@/assets/public/upload/noImage.png">
-                                            <div>选择图片</div>
-                                        </div>
-                                    </div>
-                                    <input type="hidden" name="logo" v-model="classifyImg">
-                                </el-upload>
-                                <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl_class" class="delete-button" @click="handleDelete_class">
-                                    <i class="el-icon-delete"></i>
-                                </div>
-                                <h5>分类页</h5>
-                            </div>
-                            <!--图片上传组件 end ------------------------------------------------------------>
-                        </div>
-                        <div class="uploaderBox">
-                            <!--图片上传组件 start ------------------------------------------------------------>
-                            <div class="avatar-upload-container" @mouseenter="hovering = true"
-                                @mouseleave="hovering = false">
-                                <!-- 上传组件 -->
-                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
-                                    :before-upload="beforeAvatarUpload_list">
-                                    <!-- 预览图片 -->
-                                    <img v-if="logoUrl_list" :src="logoUrl_list" class="avatar">
-                                    <!-- 上传图标 -->
-                                    <div v-else class="chooseImgDiv">
-                                        <div>
-                                            <img src="@/assets/public/upload/noImage.png">
-                                            <div>选择图片</div>
-                                        </div>
-                                    </div>
-                                    <input type="hidden" name="logo" v-model="listImg">
-                                </el-upload>
-                                <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl_list" class="delete-button" @click="handleDelete_list">
-                                    <i class="el-icon-delete"></i>
-                                </div>
-                                <h5>列表页</h5>
-                            </div>
-                            <!--图片上传组件 end ------------------------------------------------------------>
-                        </div>
-                        <div class="uploaderBox">
-                            <!--图片上传组件 start ------------------------------------------------------------>
-                            <div class="avatar-upload-container" @mouseenter="hovering = true"
-                                @mouseleave="hovering = false">
-                                <!-- 上传组件 -->
-                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
-                                    :before-upload="beforeAvatarUpload_detail">
-                                    <!-- 预览图片 -->
-                                    <img v-if="logoUrl_detail" :src="logoUrl_detail" class="avatar">
-                                    <!-- 上传图标 -->
-                                    <div v-else class="chooseImgDiv">
-                                        <div>
-                                            <img src="@/assets/public/upload/noImage.png">
-                                            <div>选择图片</div>
-                                        </div>
-                                    </div>
-                                    <input type="hidden" name="logo" v-model="detailImg">
-                                </el-upload>
-                                <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl_detail" class="delete-button"
-                                    @click="handleDelete_detail">
-                                    <i class="el-icon-delete"></i>
-                                </div>
-                                <h5>详情页</h5>
-                            </div>
-                            <!--图片上传组件 end ------------------------------------------------------------>
-                        </div>
-                        <div class="uploaderBox">
-                            <!--图片上传组件 start ------------------------------------------------------------>
-                            <div class="avatar-upload-container" @mouseenter="hovering = true"
-                                @mouseleave="hovering = false">
-                                <!-- 上传组件 -->
-                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
-                                    :before-upload="beforeAvatarUpload_search">
-                                    <!-- 预览图片 -->
-                                    <img v-if="logoUrl_search" :src="logoUrl_search" class="avatar">
-                                    <!-- 上传图标 -->
-                                    <div v-else class="chooseImgDiv">
-                                        <div>
-                                            <img src="@/assets/public/upload/noImage.png">
-                                            <div>选择图片</div>
-                                        </div>
-                                    </div>
-                                    <input type="hidden" name="logo" v-model="searchImg">
-                                </el-upload>
-                                <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl_search" class="delete-button"
-                                    @click="handleDelete_search">
-                                    <i class="el-icon-delete"></i>
-                                </div>
-                                <h5>搜索页</h5>
-                            </div>
-                            <!--图片上传组件 end ------------------------------------------------------------>
-                        </div>
-                        <div class="uploaderBox">
-                            <!--图片上传组件 start ------------------------------------------------------------>
-                            <div class="avatar-upload-container" @mouseenter="hovering = true"
-                                @mouseleave="hovering = false">
-                                <!-- 上传组件 -->
-                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
-                                    :before-upload="beforeAvatarUpload_sList">
-                                    <!-- 预览图片 -->
-                                    <img v-if="logoUrl_sList" :src="logoUrl_sList" class="avatar">
-                                    <!-- 上传图标 -->
-                                    <div v-else class="chooseImgDiv">
-                                        <div>
-                                            <img src="@/assets/public/upload/noImage.png">
-                                            <div>选择图片</div>
-                                        </div>
-                                    </div>
-                                    <input type="hidden" name="logo" v-model="sListImg">
-                                </el-upload>
-                                <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl_sList" class="delete-button" @click="handleDelete_sList">
-                                    <i class="el-icon-delete"></i>
-                                </div>
-                                <h5>特殊列表页</h5>
-                            </div>
-                            <!--图片上传组件 end ------------------------------------------------------------>
-                        </div>
-                        <div class="uploaderBox">
-                            <!--图片上传组件 start ------------------------------------------------------------>
-                            <div class="avatar-upload-container" @mouseenter="hovering = true"
-                                @mouseleave="hovering = false">
-                                <!-- 上传组件 -->
-                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
-                                    :before-upload="beforeAvatarUpload_sDetail">
-                                    <!-- 预览图片 -->
-                                    <img v-if="logoUrl_sDetail" :src="logoUrl_sDetail" class="avatar">
-                                    <!-- 上传图标 -->
-                                    <div v-else class="chooseImgDiv">
-                                        <div>
-                                            <img src="@/assets/public/upload/noImage.png">
-                                            <div>选择图片</div>
-                                        </div>
-                                    </div>
-                                    <input type="hidden" name="logo" v-model="sDetailImg">
-                                </el-upload>
-                                <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl_sDetail" class="delete-button"
-                                    @click="handleDelete_sDetail">
-                                    <i class="el-icon-delete"></i>
-                                </div>
-                                <h5>特殊详情页</h5>
-                            </div>
-                            <!--图片上传组件 end ------------------------------------------------------------>
-                        </div>
-                        <!--  -->
+                   <el-form-item label="风格关键词：" prop="keyword" class="custom-align-right">
+                        <template #label>
+                        <span class="askBox">
+                            风格关键词：
+                            <el-tooltip class="item" effect="dark" content="风格关键词，如：黑色、简约、夜晚。" placement="top">
+                            <i class="el-icon-question"></i>
+                            </el-tooltip>
+                        </span>
+                        </template>
+                        <tagInput :initialTags="tags" @tags-updated="updateTags"></tagInput>
                     </el-form-item>
                 </div>
                 <div class="dialogBtn">
@@ -293,13 +105,14 @@
 <script>
 //表格标题
 import tableTitle from './components/tableTitle.vue';
-
+//引入tag标签组件
+import tagInput from '../../components/InputTag/index.vue';
 //引入公用样式
 import '@/styles/global.less';
-import { getTemplateClass, getTemplateList, addTemplate, delTemplate, updateTemplate, getTemplateInfo } from '@/api/style'
 export default {
     components: {
         tableTitle,//表格标题-
+        tagInput,//标签组件
     },
     data() {
         const validateEmpty = (rule, value, callback) => {
@@ -309,19 +122,25 @@ export default {
                 callback()
             }
         }
+        const validateArray = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
         return {
             // 1.1  初始化数据 ---------------------------------
-            tableDivTitle: "模板列表",  //列表标题
+            tableDivTitle: "风格列表",  //列表标题
             dialogTableVisible: false,      //编辑弹框
             dialogName: '编辑', //编辑弹窗名称
             templateLoading: true,//页面加载中
-
+            tags: [],//标签数组
             tableData: [],//表格数据
 
 
             //1.2 搜索框相关 ----------------------------------
-            templateStyle: '',//模板风格
-            templateName: '',//模板名称
+            name: '',///风格名称
 
 
             // 1.3 分页相关 -----------------------------------
@@ -333,83 +152,21 @@ export default {
             // logoUrl: '',
             hovering: false, // 鼠标悬浮状态 悬浮时显示删除
 
-            //首页图片
-            homeImg: '',
-            logoUrl_home: '',
-            home_obj: {
-                url: '',
-                name: '首页',
-                value: '1',
-            },
-            //分类页图片
-            classifyImg: '',
-            logoUrl_class: '',
-            class_obj: {
-                url: '',
-                name: '分类页',
-                value: '2',
-            },
-            //列表页图片
-            listImg: '',
-            logoUrl_list: '',
-            list_obj: {
-                url: '',
-                name: '列表页',
-                value: '3',
-            },
-            //详情页图片
-            detailImg: '',
-            logoUrl_detail: '',
-            detail_obj: {
-                url: '',
-                name: '详情页',
-                value: '4',
-            },
-            //搜索页图片
-            searchImg: '',
-            logoUrl_search: '',
-            search_obj: {
-                url: '',
-                name: '搜索页',
-                value: '5',
-            },
-            //特殊列表页图片
-            sListImg: '',
-            logoUrl_sList: '',
-            sList_obj: {
-                url: '',
-                name: '特殊列表页',
-                value: '6',
-            },
-            //特殊详情页图片
-            sDetailImg: '',
-            logoUrl_sDetail: '',
-            sDetail_obj: {
-                url: '',
-                name: '特殊详情页',
-                value: '7',
-            },
-            //图片json
-            img_arr: [],
-
             value: '',
-            options: [],
 
             //活动id
             activeid: "",
 
-            formLabelWidth: '', //广告示例图相关
-
             // 弹框相关 -------------------------------------------
             ruleForm: {
-                templateStyle: '', //模板风格
-                templateName: '', //模板名称
-                templateImg: [], //模板图片
+                keyword: '', //风格关键词
+                name: '', //风格名称
+                class_id: '', //风格编号
             },
             rules: {
-                templateStyle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-                templateName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-                templateImg: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                keyword: [{ required: true, trigger: 'blur', validator: validateArray }],
+                name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                class_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
             }
         }
     },
@@ -417,77 +174,84 @@ export default {
         //1.列表和分页相关 start ------------------------------------------------------------>
         //1.1 开始请求列表信息方法
         getData() {
-            if(this.templateStyle != '' || this.templateName != ''){
-                getTemplateList({
-                    page: this.page,
-                    page_size: this.pageSize,
-                    template_class_id: this.templateStyle, //模板风格id
-                    template_name: this.templateName, //模板名称
-                }).then(data => {
-                    console.log(data);
-                    this.tableData = data.data.data
-                    this.total = data.data.total
-                })
-            }else{
-                getTemplateList({
-                    page: this.page,
-                    page_size: this.pageSize
-                }).then(data => {
-                    console.log(data);
-                    if (data.code == 200) {
-                        this.templateLoading = false
+            this.$store.dispatch('genre/getTemplateClassList',{page: this.page,pageSize: this.pageSize}).then(res=> {
+                this.tableData =  res.data.rows;
+
+                this.tableData.forEach(item => {
+                    item.tags =item.keyword;
+                    if (typeof item.keyword === 'string') {
+                        try {
+                            let keywordArray = JSON.parse(item.keyword);
+                            if (Array.isArray(keywordArray)) {
+                                // 将解析后的数组赋值给 item.tags
+                                
+                                item.keyword = keywordArray.join(' | ');
+                            } else {
+                                item.keyword = '';
+                            }
+                        } catch (error) {
+                            console.error('解析 keyword 失败:', error);
+                        }
                     }
-                    this.tableData = data.data.data
-                    this.total = data.data.total
-                })
-            }
+                });
+                this.total = res.data.count; // 给与总条数
+            }).catch(() => {
+                this.$message({
+                    type: 'error',
+                    message: '网络错误，请重试！'
+                });
+            })
         },
         
-        //获取模板风格
+        //获取风格列表
         getStyleList() {
-            getTemplateClass({
+            const data = {
+                name: this.name ?? '',
                 page: this.page,
-                page_size: this.pageSize
-            }).then(data => {
-                console.log('模板风格列表', data);
-                this.options = data.data
-            })
+                pageSize: this.pageSize,
+
+            }
+            this.$store.dispatch('genre/getTemplateClassList',data).then(res=> {
+                this.tableData =  res.data.rows;
+                this.tableData.forEach(item => {
+                    item.tags =item.keyword;
+                    if (typeof item.keyword === 'string') {
+                        try {
+                            let keywordArray = JSON.parse(item.keyword);
+                            if (Array.isArray(keywordArray)) {
+                                // item.tags = keywordArray;
+                                item.keyword = keywordArray.join(' | ');
+                            } else {
+                                item.keyword = '';
+                            }
+                        } catch (error) {
+                            console.error('解析 keyword 失败:', error);
+                        }
+                    }
+                });
+                this.total = res.data.count; // 给与总条数
+              }).catch(() => {
+                this.$message({
+                  type: 'info',
+                  message: '网络错误，请重试！'
+                });
+              })
         },
 
-        //1.2 删除内容
+        //1.2 删除风格
         deleteRow(id) {
-            console.log(id);
-            let data = new FormData()
-            data.append('id', id)
-            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-            }).then(() => {
-                console.log("当前删除：" + id)
-                delTemplate({
-                    id: id
-                }).then(data => {
-                    console.log(data);
-                    if (data.code = 200) {
-                        this.$message({
-                            message: '删除成功',
-                            type: 'success'
-                        })
-                        this.getData()
-                    } else if (data.code == 0) {
-                        this.$message({
-                            message: data.message,
-                            type: 'error'
-                        })
-                    }
+            this.$store.dispatch('genre/delTemplateClass',{ id: id }).then(res=> {
+                this.$message({
+                    message: '删除成功',
+                    type:'success'
                 })
-
-            }).catch(() => {
+                this.getData()
+              }).catch(() => {
                 this.$message({
-                    type: 'warning',
-                    message: '已取消删除'
-                });
-            });
+                  type: 'info',
+                  message: '网络错误，请重试！'
+                })
+              })
         },
         //1.3 列表内容分页
         //直接跳转
@@ -502,21 +266,42 @@ export default {
         },
         // 1.5 搜索按钮
         goSearch() {
-            getTemplateList({
-                page: this.page,
-                page_size: this.pageSize,
-                template_class_id: this.templateStyle, //模板风格id
-                template_name: this.templateName, //模板名称
-            }).then(data => {
-                console.log(data);
-                this.tableData = data.data.data
-                this.total = data.data.total
-            })
+            const data = {
+                name: this.name ?? '',
+                page: 1,
+                pageSize: 10,
+            }
+            // console.log(data)
+            this.$store.dispatch('genre/getTemplateClassList',data).then(res=> {
+                this.tableData =  res.data.rows; //给与内容
+                this.tableData.forEach(item => {
+                    item.tags =item.keyword;
+                    if (typeof item.keyword === 'string') {
+                        try {
+                            let keywordArray = JSON.parse(item.keyword);
+                            if (Array.isArray(keywordArray)) {
+                                // 将解析后的数组赋值给 item.tags
+                                
+                                item.keyword = keywordArray.join(' | ');
+                            } else {
+                                item.keyword = '';
+                            }
+                        } catch (error) {
+                            console.error('解析 keyword 失败:', error);
+                        }
+                    }
+                });
+                this.total = res.data.count; //给与总条数
+              }).catch(() => {
+                this.$message({
+                  type: 'error',
+                  message: '网络错误，请重试！'
+                });
+              })
         },
         //1.6 重置按钮
         goReset() {
-            this.templateStyle = ""
-            this.templateName = ""
+            this.name = ""
             this.page=1
             this.pageSize=10
             this.getData()
@@ -528,58 +313,15 @@ export default {
             this.dialogName = '编辑'
             this.activeid = id
             this.dialogTableVisible = true
-            console.log(id, val);
+            
 
             //数据回显
-            this.ruleForm.templateStyle = val.template_class_id
-            this.ruleForm.templateName = val.template_name
-            this.img_arr = JSON.parse(val.template_img)
-
-            this.homeImg = ''
-            this.logoUrl_home = ''
-            this.classifyImg = ''
-            this.logoUrl_class = ''
-            this.listImg = ''
-            this.logoUrl_list = ''
-            this.detailImg = ''
-            this.logoUrl_detail = ''
-            this.searchImg = ''
-            this.logoUrl_search = ''
-            this.sListImg = ''
-            this.logoUrl_sList = ''
-            this.sDetailImg = ''
-            this.logoUrl_sDetail = ''
-
-            for (let item of this.img_arr) {
-                if (item.name == '首页') {
-                    this.logoUrl_home = item.url
-                    this.homeImg = item.url
-                }
-                if (item.name == '分类页') {
-                    this.logoUrl_class = item.url
-                    this.classifyImg = item.url
-                }
-                if (item.name == '列表页') {
-                    this.logoUrl_list = item.url
-                    this.listImg = item.url
-                }
-                if (item.name == '详情页') {
-                    this.logoUrl_detail = item.url
-                    this.detailImg = item.url
-                }
-                if (item.name == '搜索页') {
-                    this.logoUrl_search = item.url
-                    this.searchImg = item.url
-                }
-                if (item.name == '特殊列表页') {
-                    this.logoUrl_sList = item.url
-                    this.sListImg = item.url
-                }
-                if (item.name == '特殊详情页') {
-                    this.logoUrl_sDetail = item.url
-                    this.sDetailImg = item.url
-                }
-            }
+            this.ruleForm.name = val.name            
+            this.ruleForm.keyword = val.keyword;
+            this.ruleForm.class_id = val.class_id;
+            this.tags = val.keyword ? val.keyword.split("|") : [];
+            // console.log(typeof(this.ruleForm.keyword))
+            console.log(this.ruleForm)        
         },
         //1.8 添加
         addWebsite() {
@@ -587,135 +329,48 @@ export default {
             this.dialogName = "添加"
 
             //添加时清空回显回来的数据
-            this.ruleForm.templateStyle = ''
-            this.ruleForm.templateName = ''
-            this.ruleForm.templateImg = []
-            this.img_arr = []
-            this.homeImg = ''
-            this.logoUrl_home = ''
-            this.classifyImg = ''
-            this.logoUrl_class = ''
-            this.listImg = ''
-            this.logoUrl_list = ''
-            this.detailImg = ''
-            this.logoUrl_detail = ''
-            this.searchImg = ''
-            this.logoUrl_search = ''
-            this.sListImg = ''
-            this.logoUrl_sList = ''
-            this.sDetailImg = ''
-            this.logoUrl_sDetail = ''
+            this.ruleForm.keyword = ''
+            this.tags = []
+            this.ruleForm.name = ''
+            this.ruleForm.class_id = ''
         },
 
         // 弹出层相关方法 ---------------------------------------------------->
         // 1.9 提交表单
         submitForm() {
-            this.img_arr = []
-            //首页
-            if (this.logoUrl_home) {
-                this.home_obj.url = this.homeImg
-                this.img_arr.push(this.home_obj)
-            }
-            //分类页
-            if (this.logoUrl_class) {
-                this.class_obj.url = this.classifyImg
-                this.img_arr.push(this.class_obj)
-            }
-            //列表页
-            if (this.logoUrl_list) {
-                this.list_obj.url = this.listImg
-                this.img_arr.push(this.list_obj)
-            }
-            //详情页
-            if (this.logoUrl_detail) {
-                this.detail_obj.url = this.detailImg
-                this.img_arr.push(this.detail_obj)
-            }
-            //搜索页
-            if (this.logoUrl_search) {
-                this.search_obj.url = this.searchImg
-                this.img_arr.push(this.search_obj)
-            }
-            //特殊列表页
-            if (this.logoUrl_sList) {
-                this.sList_obj.url = this.sListImg
-                this.img_arr.push(this.sList_obj)
-            }
-            //特殊详情页
-            if (this.logoUrl_sDetail) {
-                this.sDetail_obj.url = this.sDetailImg
-                this.img_arr.push(this.sDetail_obj)
-            }
-            function cleanObProp(arr) {
-                return arr.map(item => {
-                    const newItem = {};
-                    for (const key in item) {
-                        if (key !== '__ob__') {
-                            newItem[key] = item[key];
-                        }
-                    }
-                    return newItem;
-                });
-            }
-            const cleanArray = cleanObProp(this.img_arr);
-            this.ruleForm.templateImg = JSON.stringify(cleanArray);
-            console.log(this.ruleForm.templateImg);
-
             if (this.dialogName == "添加") {
-                addTemplate({
-                    template_name: this.ruleForm.templateName, //模板名称
-                    template_img: this.ruleForm.templateImg, // 模板图片
-                    template_class_id: this.ruleForm.templateStyle, //模板风格id
-                }).then(data => {
-                    console.log(data);
-                    if (data.code == 200) {
+                this.$store.dispatch('genre/addTemplateClass',this.ruleForm).then(res=> {
+                    if (res.code == 200) {
                         this.$message({
                             message: '添加成功',
-                            type: 'success'
+                            type:'success'
                         })
                         this.dialogTableVisible = false
                         this.getData()
-                    } else if (data.code == 0) {
+                    }else{
                         this.$message({
-                            message: data.message,
+                            message: res.message,
                             type: 'error'
                         })
-                        this.dialogTableVisible = true
-                        return
-                    } else {
-                        this.$message({
-                            message: data.message,
-                            type: 'error'
-                        })
-                        this.dialogTableVisible = true
-                        return
                     }
                 })
             }
 
             if (this.dialogName == "编辑") {
-                updateTemplate({
-                    id: this.activeid, //活动id
-                    template_name: this.ruleForm.templateName, //模板名称
-                    template_img: this.ruleForm.templateImg, // 模板图片
-                    template_class_id: this.ruleForm.templateStyle, //模板风格id
-                }).then(data => {
-                    console.log(data);
-                    if (data.code == 200) {
+                this.$store.dispatch('genre/upTemplateClass',{id: this.activeid,name: this.ruleForm.name,keyword: this.ruleForm.keyword,class_id: this.ruleForm.class_id}).then(res=> {
+                    if (res.code == 200) {
                         this.$message({
                             message: '编辑成功',
-                            type: 'success'
+                            type:'success'
                         })
                         this.dialogTableVisible = false
-                    }
-                    if (data.code == 0) {
+                        this.getData()
+                    } else {
                         this.$message({
-                            message: data.message,
+                            message: res.message,
                             type: 'error'
                         })
-                        this.dialogTableVisible = true
                     }
-                    this.getData()
                 })
             }
 
@@ -725,258 +380,20 @@ export default {
             this.dialogTableVisible = false
         },
 
-        //3.6 上传图片操作
-        beforeAvatarUpload_home(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.logoUrl_home = res.data.imgUrl;//显示缩略图
-                this.homeImg = res.data.imgUrl;//提供表单地址
-                console.log(res.data.imgUrl)
-            }).catch(() => {
-                this.$message({
-                    type: 'info',
-                    message: '网络错误，请重试！'
-                });
-            })
-
-            // 阻止默认的上传行为
-            return false;
-        },
-        beforeAvatarUpload_classify(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.logoUrl_class = res.data.imgUrl;//显示缩略图
-                this.classifyImg = res.data.imgUrl;//提供表单地址
-                console.log(res.data.imgUrl)
-            }).catch(() => {
-                this.$message({
-                    type: 'info',
-                    message: '网络错误，请重试！'
-                });
-            })
-
-            // 阻止默认的上传行为
-            return false;
-        },
-        beforeAvatarUpload_list(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.logoUrl_list = res.data.imgUrl;//显示缩略图
-                this.listImg = res.data.imgUrl;//提供表单地址
-                console.log(res.data.imgUrl)
-            }).catch(() => {
-                this.$message({
-                    type: 'info',
-                    message: '网络错误，请重试！'
-                });
-            })
-
-            // 阻止默认的上传行为
-            return false;
-        },
-        beforeAvatarUpload_detail(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.logoUrl_detail = res.data.imgUrl;//显示缩略图
-                this.detailImg = res.data.imgUrl;//提供表单地址
-                console.log(res.data.imgUrl)
-            }).catch(() => {
-                this.$message({
-                    type: 'info',
-                    message: '网络错误，请重试！'
-                });
-            })
-
-            // 阻止默认的上传行为
-            return false;
-        },
-        beforeAvatarUpload_search(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.logoUrl_search = res.data.imgUrl;//显示缩略图
-                this.searchImg = res.data.imgUrl;//提供表单地址
-                console.log(res.data.imgUrl)
-            }).catch(() => {
-                this.$message({
-                    type: 'info',
-                    message: '网络错误，请重试！'
-                });
-            })
-
-            // 阻止默认的上传行为
-            return false;
-        },
-        beforeAvatarUpload_sList(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.logoUrl_sList = res.data.imgUrl;//显示缩略图
-                this.sListImg = res.data.imgUrl;//提供表单地址
-                console.log(res.data.imgUrl)
-            }).catch(() => {
-                this.$message({
-                    type: 'info',
-                    message: '网络错误，请重试！'
-                });
-            })
-
-            // 阻止默认的上传行为
-            return false;
-        },
-        beforeAvatarUpload_sDetail(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.logoUrl_sDetail = res.data.imgUrl;//显示缩略图
-                this.sDetailImg = res.data.imgUrl;//提供表单地址
-                console.log(res.data.imgUrl)
-            }).catch(() => {
-                this.$message({
-                    type: 'info',
-                    message: '网络错误，请重试！'
-                });
-            })
-
-            // 阻止默认的上传行为
-            return false;
-        },
-        handleDelete_home() {
-            // 删除图片
-            this.logoUrl_home = ''; // 清空图片 URL
-        },
-        handleDelete_class() {
-            // 删除图片
-            this.logoUrl_class = ''; // 清空图片 URL
-        },
-        handleDelete_list() {
-            // 删除图片
-            this.logoUrl_list = ''; // 清空图片 URL
-        },
-        handleDelete_detail() {
-            // 删除图片
-            this.logoUrl_detail = ''; // 清空图片 URL
-        },
-        handleDelete_search() {
-            // 删除图片
-            this.logoUrl_search = ''; // 清空图片 URL
-        },
-        handleDelete_sList() {
-            // 删除图片
-            this.logoUrl_sList = ''; // 清空图片 URL
-        },
-        handleDelete_sDetail() {
-            // 删除图片
-            this.logoUrl_sDetail = ''; // 清空图片 URL
-        },
+        
+        updateTags(newTags) {
+            // this.foem.seo_keywords = newTags;
+            
+            this.tags = newTags;
+            this.ruleForm.keyword = newTags;
+          },
+        
         // 3.7 弹出层相关方法 end ------------------------------------------------------------>
 
     },
     mounted() {
         this.getData()
-        this.getStyleList() //获取模板风格
+        this.getStyleList() //获取风格
     },
 }
 </script>

src/views/dashboard/admin/index.vue

@@ -15,34 +15,34 @@
                             <div class="topDataLi1">
                                 <div class="topDataMain">
                                     <span @click="goToList(1)">待审核资讯</span>
-                                    <span @click="goToList(1)">{{articleCount}}</span>
+                                    <span @click="goToList(1)">{{ articleCount }}</span>
                                 </div>
                                 <div class="topDataMain">
                                     <span @click="goToList(8)">待审核广告</span>
-                                    <span @click="goToList(8)">{{adCount}}</span>
+                                    <span @click="goToList(8)">{{ adCount }}</span>
                                 </div>
                             </div>
                             <div class="topDataLi2">
                                 <div class="topDataMainCenter">
                                     <span @click="goToList(2)">待审核商品</span>
-                                    <span @click="goToList(2)">{{goodsCount}}</span>
+                                    <span @click="goToList(2)">{{ goodsCount }}</span>
                                 </div>
                                 <div class="topDataMainCenter">
                                     <span @click="goToList(3)">待审核书刊音像</span>
-                                    <span @click="goToList(3)">{{bookCount}}</span>
+                                    <span @click="goToList(3)">{{ bookCount }}</span>
                                 </div>
                             </div>
                             <div class="topDataLi3">
                                 <div class="topDataMainCenter">
                                     <span @click="goToList(4)">待审核招聘</span>
-                                    <span @click="goToList(4)">{{jobRecruitingCount}}</span>
+                                    <span @click="goToList(4)">{{ jobRecruitingCount }}</span>
                                 </div>
                                 <div class="topDataMainCenter">
                                     <span @click="goToList(5)">待审核求职</span>
-                                    <span @click="goToList(5)">{{jobHuntingCount}}</span>
+                                    <span @click="goToList(5)">{{ jobHuntingCount }}</span>
                                 </div>
                             </div>
-                            <div class="topDataLi4">
+                            <!--<div class="topDataLi4">
                                 <div class="topDataMain">
                                     <span @click="goToList(6)">待审核行政通知</span>
                                     <span @click="goToList(6)">{{noticeCount}}</span>
@@ -51,7 +51,7 @@
                                     <span @click="goToList(7)">待审核行政投诉</span>
                                     <span @click="goToList(7)">{{complaintCount}}</span>
                                 </div>
-                            </div>
+                            </div> -->
                         </div>
                     </div>
                 </el-col>
@@ -65,7 +65,7 @@
                             </div>
                             网站数量
                         </div>
-                        <div class="twbNumber">{{allWebsiteCount}}</div>
+                        <div class="twbNumber">{{ allWebsiteCount }}</div>
                         <!-- <div class="twbStatus"><img src="@/assets/index/arrow-up.png"/> +12% <span>较上周</span></div> -->
                     </div>
                 </el-col>
@@ -77,7 +77,7 @@
                             </div>
                             栏目数量
                         </div>
-                        <div class="twbNumber">{{allCategoryCount}}</div>
+                        <div class="twbNumber">{{ allCategoryCount }}</div>
                         <!-- <div class="twbStatus"><img src="@/assets/index/arrow-up.png"/> +18% <span>较昨天</span></div> -->
                     </div>
                 </el-col>
@@ -89,7 +89,7 @@
                             </div>
                             资讯发布总数量
                         </div>
-                        <div class="twbNumber">{{allArticleCount}}</div>
+                        <div class="twbNumber">{{ allArticleCount }}</div>
                     </div>
                 </el-col>
                 <el-col :xs="24" :sm="24" :lg="6">
@@ -100,7 +100,7 @@
                             </div>
                             商品发布总数量
                         </div>
-                        <div class="twbNumber">{{allGoodsCount}}</div>
+                        <div class="twbNumber">{{ allGoodsCount }}</div>
                     </div>
                 </el-col>
             </el-row>
@@ -113,7 +113,7 @@
                             </div>
                             书刊音像发布总数量
                         </div>
-                        <div class="twbNumber">{{allBookCount}}</div>
+                        <div class="twbNumber">{{ allBookCount }}</div>
                     </div>
                 </el-col>
                 <el-col :xs="24" :sm="24" :lg="6">
@@ -124,7 +124,7 @@
                             </div>
                             招聘发布总数量
                         </div>
-                        <div class="twbNumber">{{allJobRecruitingCount}}</div>
+                        <div class="twbNumber">{{ allJobRecruitingCount }}</div>
                     </div>
                 </el-col>
                 <el-col :xs="24" :sm="24" :lg="6">
@@ -135,7 +135,7 @@
                             </div>
                             求职发布总数量
                         </div>
-                        <div class="twbNumber">{{allJobHuntingCount}}</div>
+                        <div class="twbNumber">{{ allJobHuntingCount }}</div>
                     </div>
                 </el-col>
             </el-row>
@@ -144,18 +144,10 @@
                     <div class="chartBox">
                         <div class="chartTitle">
                             平台数据增长趋势
-                            <el-select 
-                                v-model="chatType" 
-                                placeholder="请选择" 
-                                class="chartSelectInput"
-                                @change="changeLineChartData"
-                            >
-                                <el-option 
-                                    v-for="item in indexDataOptions" 
-                                    :key="item.value" 
-                                    :label="item.label"
-                                    :value="item.value"
-                                >
+                            <el-select v-model="chatType" placeholder="请选择" class="chartSelectInput"
+                                @change="changeLineChartData">
+                                <el-option v-for="item in indexDataOptions" :key="item.value" :label="item.label"
+                                    :value="item.value">
                                 </el-option>
                             </el-select>
                         </div>
@@ -190,30 +182,30 @@
                             <div class="topDataLi1">
                                 <div class="topDataMain">
                                     <span @click="goToList(1)">待审核资讯</span>
-                                    <span @click="goToList(1)">{{articleCount}}</span>
+                                    <span @click="goToList(1)">{{ articleCount }}</span>
                                 </div>
                             </div>
                             <div class="topDataLi2">
                                 <div class="topDataMainCenter">
                                     <span @click="goToList(2)">待审核商品</span>
-                                    <span @click="goToList(2)">{{goodsCount}}</span>
+                                    <span @click="goToList(2)">{{ goodsCount }}</span>
                                 </div>
                                 <div class="topDataMainCenter">
                                     <span @click="goToList(3)">待审核书刊音像</span>
-                                    <span @click="goToList(3)">{{bookCount}}</span>
+                                    <span @click="goToList(3)">{{ bookCount }}</span>
                                 </div>
                             </div>
                             <div class="topDataLi3">
                                 <div class="topDataMainCenter">
                                     <span @click="goToList(4)">待审核招聘</span>
-                                    <span @click="goToList(4)">{{jobRecruitingCount}}</span>
+                                    <span @click="goToList(4)">{{ jobRecruitingCount }}</span>
                                 </div>
                                 <div class="topDataMainCenter">
                                     <span @click="goToList(5)">待审核求职</span>
-                                    <span @click="goToList(5)">{{jobHuntingCount}}</span>
+                                    <span @click="goToList(5)">{{ jobHuntingCount }}</span>
                                 </div>
                             </div>
-                            <div class="topDataLi4">
+                            <!-- <div class="topDataLi4">
                                 <div class="topDataMain">
                                     <span @click="goToList(6)">待审核行政通知</span>
                                     <span @click="goToList(6)">{{noticeCount}}</span>
@@ -222,7 +214,7 @@
                                     <span @click="goToList(7)">待审核行政投诉</span>
                                     <span @click="goToList(7)">{{complaintCount}}</span>
                                 </div>
-                            </div>
+                            </div> -->
                         </div>
                     </div>
                 </el-col>
@@ -236,7 +228,7 @@
                             </div>
                             资讯发布数量
                         </div>
-                        <div class="twbNumber">{{allArticleCount}}</div>
+                        <div class="twbNumber">{{ allArticleCount }}</div>
                     </div>
                 </el-col>
                 <el-col :xs="24" :sm="24" :lg="6">
@@ -247,7 +239,7 @@
                             </div>
                             商品发布数量
                         </div>
-                        <div class="twbNumber">{{allGoodsCount}}</div>
+                        <div class="twbNumber">{{ allGoodsCount }}</div>
                     </div>
                 </el-col>
                 <el-col :xs="24" :sm="24" :lg="6">
@@ -258,7 +250,7 @@
                             </div>
                             书刊音像发布数量
                         </div>
-                        <div class="twbNumber">{{allBookCount}}</div>
+                        <div class="twbNumber">{{ allBookCount }}</div>
                     </div>
                 </el-col>
                 <el-col :xs="24" :sm="24" :lg="6">
@@ -269,7 +261,7 @@
                             </div>
                             求职发布数量
                         </div>
-                        <div class="twbNumber">{{allJobHuntingCount}}</div>
+                        <div class="twbNumber">{{ allJobHuntingCount }}</div>
                     </div>
                 </el-col>
             </el-row>
@@ -290,20 +282,20 @@
                             <div class="topDataLi1">
                                 <div class="topDataMain">
                                     <span @click="goToList(1)">待审核资讯</span>
-                                    <span @click="goToList(1)">{{articleCount}}</span>
+                                    <span @click="goToList(1)">{{ articleCount }}</span>
                                 </div>
                             </div>
                             <div class="topDataLi2">
                                 <div class="topDataMainCenter">
                                     <span @click="goToList(2)">待审核商品</span>
-                                    <span @click="goToList(2)">{{goodsCount}}</span>
+                                    <span @click="goToList(2)">{{ goodsCount }}</span>
                                 </div>
                                 <div class="topDataMainCenter">
                                     <span @click="goToList(3)">待审核书刊音像</span>
-                                    <span @click="goToList(3)">{{bookCount}}</span>
+                                    <span @click="goToList(3)">{{ bookCount }}</span>
                                 </div>
                             </div>
-                            <div class="topDataLi4">
+                            <!-- <div class="topDataLi4">
                                 <div class="topDataMain">
                                     <span @click="goToList(6)">待审核行政通知</span>
                                     <span @click="goToList(6)">{{noticeCount}}</span>
@@ -312,7 +304,7 @@
                                     <span @click="goToList(7)">待审核行政投诉</span>
                                     <span @click="goToList(7)">{{complaintCount}}</span>
                                 </div>
-                            </div>
+                            </div> -->
                         </div>
                     </div>
                 </el-col>
@@ -326,7 +318,7 @@
                             </div>
                             资讯发布数量
                         </div>
-                        <div class="twbNumber">{{allArticleCount}}</div>
+                        <div class="twbNumber">{{ allArticleCount }}</div>
                     </div>
                 </el-col>
                 <el-col :xs="24" :sm="24" :lg="6">
@@ -337,7 +329,7 @@
                             </div>
                             商品发布数量
                         </div>
-                        <div class="twbNumber">{{allGoodsCount}}</div>
+                        <div class="twbNumber">{{ allGoodsCount }}</div>
                     </div>
                 </el-col>
                 <el-col :xs="24" :sm="24" :lg="6">
@@ -348,10 +340,10 @@
                             </div>
                             书刊音像发布数量
                         </div>
-                        <div class="twbNumber">{{allBookCount}}</div>
+                        <div class="twbNumber">{{ allBookCount }}</div>
                     </div>
                 </el-col>
-                <el-col :xs="24" :sm="24" :lg="6">
+                <!-- <el-col :xs="24" :sm="24" :lg="6">
                     <div class="topWindowBox">
                         <div class="twbTitle">
                             <div class="twbIconbg bg8">
@@ -370,7 +362,7 @@
                             </div>
                         </div>
                     </div>
-                </el-col>
+                </el-col> -->
             </el-row>
 
             <!-- <div class="chartBox">
@@ -389,10 +381,10 @@
                                 <el-tag :type="scope.row.status == 1 ? 'success' : 'danger'">{{ scope.row.status == 1 ? '已审核' :
                                 '未审核' }}</el-tag>
                             </template>
-                        </el-table-column>
-                    </el-table>
-                </div>
-            </div> -->
+</el-table-column>
+</el-table>
+</div>
+</div> -->
         </div>
 
         <!--超级管理员10000× 个人会员1× 政务会员2× 企业会员3√ 调研员4×-->
@@ -410,26 +402,26 @@
                             <div class="topDataLi1">
                                 <div class="topDataMain">
                                     <span @click="goToList(1)">待审核资讯</span>
-                                    <span @click="goToList(1)">{{articleCount}}</span>
+                                    <span @click="goToList(1)">{{ articleCount }}</span>
                                 </div>
                             </div>
                             <div class="topDataLi2">
                                 <div class="topDataMainCenter">
                                     <span @click="goToList(2)">待审核商品</span>
-                                    <span @click="goToList(2)">{{goodsCount}}</span>
+                                    <span @click="goToList(2)">{{ goodsCount }}</span>
                                 </div>
                                 <div class="topDataMainCenter">
                                     <span @click="goToList(3)">待审核书刊音像</span>
-                                    <span @click="goToList(3)">{{bookCount}}</span>
+                                    <span @click="goToList(3)">{{ bookCount }}</span>
                                 </div>
                             </div>
                             <div class="topDataLi3">
                                 <div class="topDataMainCenter">
                                     <span @click="goToList(4)">待审核招聘</span>
-                                    <span @click="goToList(4)">{{jobRecruitingCount}}</span>
+                                    <span @click="goToList(4)">{{ jobRecruitingCount }}</span>
                                 </div>
                             </div>
-                            <div class="topDataLi4">
+                            <!--<div class="topDataLi4">
                                 <div class="topDataMain">
                                     <span @click="goToList(6)">待审核行政通知</span>
                                     <span @click="goToList(6)">{{noticeCount}}</span>
@@ -438,7 +430,7 @@
                                     <span @click="goToList(7)">待审核行政投诉</span>
                                     <span @click="goToList(7)">{{complaintCount}}</span>
                                 </div>
-                            </div>
+                            </div> -->
                         </div>
                     </div>
                 </el-col>
@@ -452,7 +444,7 @@
                             </div>
                             资讯发布数量
                         </div>
-                        <div class="twbNumber">{{allWebsiteCount}}</div>
+                        <div class="twbNumber">{{ allWebsiteCount }}</div>
                     </div>
                 </el-col>
                 <el-col :xs="24" :sm="24" :lg="6">
@@ -463,7 +455,7 @@
                             </div>
                             商品发布数量
                         </div>
-                        <div class="twbNumber">{{allGoodsCount}}</div>
+                        <div class="twbNumber">{{ allGoodsCount }}</div>
                     </div>
                 </el-col>
                 <el-col :xs="24" :sm="24" :lg="6">
@@ -474,7 +466,7 @@
                             </div>
                             书刊音像发布数量
                         </div>
-                        <div class="twbNumber">{{allBookCount}}</div>
+                        <div class="twbNumber">{{ allBookCount }}</div>
                     </div>
                 </el-col>
                 <el-col :xs="24" :sm="24" :lg="6">
@@ -485,7 +477,7 @@
                             </div>
                             招聘发布数量
                         </div>
-                        <div class="twbNumber">{{allJobRecruitingCount}}</div>
+                        <div class="twbNumber">{{ allJobRecruitingCount }}</div>
                     </div>
                 </el-col>
             </el-row>
@@ -506,20 +498,20 @@
                             <div class="topDataLi1">
                                 <div class="topDataMain">
                                     <span @click="goToList(1)">待审核资讯</span>
-                                    <span @click="goToList(1)">{{articleCount}}</span>
+                                    <span @click="goToList(1)">{{ articleCount }}</span>
                                 </div>
                             </div>
                             <div class="topDataLi2">
                                 <div class="topDataMainCenter">
                                     <span @click="goToList(2)">待审核商品</span>
-                                    <span @click="goToList(2)">{{goodsCount}}</span>
+                                    <span @click="goToList(2)">{{ goodsCount }}</span>
                                 </div>
                                 <div class="topDataMainCenter">
                                     <span @click="goToList(3)">待审核书刊音像</span>
-                                    <span @click="goToList(3)">{{bookCount}}</span>
+                                    <span @click="goToList(3)">{{ bookCount }}</span>
                                 </div>
                             </div>
-                            <div class="topDataLi4">
+                            <!-- <div class="topDataLi4">
                                 <div class="topDataMain">
                                     <span @click="goToList(6)">待审核行政通知</span>
                                     <span @click="goToList(6)">{{noticeCount}}</span>
@@ -528,7 +520,7 @@
                                     <span @click="goToList(7)">待审核行政投诉</span>
                                     <span @click="goToList(7)">{{complaintCount}}</span>
                                 </div>
-                            </div>
+                            </div> -->
                         </div>
                     </div>
                 </el-col>
@@ -542,7 +534,7 @@
                             </div>
                             资讯发布数量
                         </div>
-                        <div class="twbNumber">{{allArticleCount}}</div>
+                        <div class="twbNumber">{{ allArticleCount }}</div>
                     </div>
                 </el-col>
                 <el-col :xs="24" :sm="24" :lg="8">
@@ -553,7 +545,7 @@
                             </div>
                             商品发布数量
                         </div>
-                        <div class="twbNumber">{{allGoodsCount}}</div>
+                        <div class="twbNumber">{{ allGoodsCount }}</div>
                     </div>
                 </el-col>
                 <el-col :xs="24" :sm="24" :lg="8">
@@ -564,7 +556,7 @@
                             </div>
                             书刊音像发布数量
                         </div>
-                        <div class="twbNumber">{{allBookCount}}</div>
+                        <div class="twbNumber">{{ allBookCount }}</div>
                     </div>
                 </el-col>
             </el-row>
@@ -624,13 +616,13 @@ export default {
             //折线图
             chatType: '1', //用户选择的哪个数据
             indexDataOptions: [
-                {label:'资讯',value:'1'},
-                {label:'商品',value:'2'},
-                {label:'书刊音像',value:'3'},
-                {label:'招聘',value:'4'},
-                {label:'求职',value:'5'}
+                { label: '资讯', value: '1' },
+                { label: '商品', value: '2' },
+                { label: '书刊音像', value: '3' },
+                { label: '招聘', value: '4' },
+                { label: '求职', value: '5' }
             ],
-            lineChartData:[],//折线图目前展示哪个数据
+            lineChartData: [],//折线图目前展示哪个数据
             lineChartData1: [],//折线图数据 - 资讯
             lineChartData2: [],//折线图数据 - 商品
             lineChartData3: [],//折线图数据 - 书刊音像
@@ -664,7 +656,7 @@ export default {
         getData() {
             //获取首页数据
             this.$store.dispatch('public/getAdminIndex').then(res => {
-                if(res.code==200){
+                if (res.code == 200) {
                     //待审核数据
                     this.articleCount = res.data.apply.article;
                     this.adCount = res.data.apply.order;
@@ -696,32 +688,32 @@ export default {
                 }
             })
         },
-        goToList(typenumber){
-            if(typenumber == 1){this.$router.push({path:'/examine'})}
-            if(typenumber == 2){this.$router.push({path:'/goodListApply'})}
-            if(typenumber == 3){this.$router.push({path:'/bookListApply'})}
-            if(typenumber == 4){this.$router.push({path:'/checkjobRecruitingList'})}
-            if(typenumber == 5){this.$router.push({path:'/jobHuntingListApply'})}
-            if(typenumber == 6){this.$router.push({path:'/noticeListApply'})}
-            if(typenumber == 7){this.$router.push({path:'/ncomplaintListApply'})}
-            if(typenumber == 8){this.$router.push({path:'/adList'})}
+        goToList(typenumber) {
+            if (typenumber == 1) { this.$router.push({ path: '/examine' }) }
+            if (typenumber == 2) { this.$router.push({ path: '/goodListApply' }) }
+            if (typenumber == 3) { this.$router.push({ path: '/bookListApply' }) }
+            if (typenumber == 4) { this.$router.push({ path: '/checkjobRecruitingList' }) }
+            if (typenumber == 5) { this.$router.push({ path: '/jobHuntingListApply' }) }
+            if (typenumber == 6) { this.$router.push({ path: '/noticeListApply' }) }
+            if (typenumber == 7) { this.$router.push({ path: '/ncomplaintListApply' }) }
+            if (typenumber == 8) { this.$router.push({ path: '/adList' }) }
         },
         //切换折线图数据
-        changeLineChartData(type){
+        changeLineChartData(type) {
             console.log(type)
-            if(type == 1){
+            if (type == 1) {
                 this.lineChartData = this.lineChartData1;
             }
-            if(type == 2){
+            if (type == 2) {
                 this.lineChartData = this.lineChartData2;
             }
-            if(type == 3){
+            if (type == 3) {
                 this.lineChartData = this.lineChartData3;
             }
-            if(type == 4){
+            if (type == 4) {
                 this.lineChartData = this.lineChartData4;
             }
-            if(type == 5){
+            if (type == 5) {
                 this.lineChartData = this.lineChartData5;
             }
         }
@@ -748,8 +740,9 @@ export default {
     align-items: center;
     justify-content: center;
 }
+
 .cibStyle1 {
-    background:#667EF2
+    background: #667EF2
 }
 
 //管理员顶部数据栏
@@ -767,9 +760,9 @@ export default {
 .topDataBoxTitle {
     display: flex;
     align-items: center;
-    margin-bottom:16px;
-    color:#fff;
-    font-size:16px;
+    margin-bottom: 16px;
+    color: #fff;
+    font-size: 16px;
 }
 
 .topDataBoxTitleText {
@@ -780,52 +773,69 @@ export default {
 .topDataBoxList {
     display: flex;
     align-items: center;
+
     .topDataLi1 {
-        width:268px;
+        width: 268px;
         border-right: 1px solid #fff;
-        height:70px;
+        height: 70px;
+
         .topDataMain:nth-child(1) {
-            margin-bottom:20px;
+            margin-bottom: 20px;
         }
     }
-    .topDataLi2,.topDataLi3{
-        width:359px;
+
+    .topDataLi2 {
         border-right: 1px solid #fff;
-        height:70px;
-        .topDataMainCenter:nth-child(1){
-            margin-bottom:20px
+    }
+
+    .topDataLi2,
+    .topDataLi3 {
+        width: 359px;
+        //border-right: 1px solid #fff;
+        height: 70px;
+
+        .topDataMainCenter:nth-child(1) {
+            margin-bottom: 20px
         }
     }
+
     .topDataLi4 {
-        width:268px;
-        height:70px;
+        width: 268px;
+        height: 70px;
+
         .topDataMain {
-            margin-left:90px;
+            margin-left: 90px;
         }
+
         .topDataMain:nth-child(1) {
-            margin-bottom:20px;
+            margin-bottom: 20px;
         }
     }
-    .topDataMain,.topDataMainCenter {
-        color:#fff;
-        height:26px;
-        line-height:26px;
-        width:177px;
-        display:flex;
+
+    .topDataMain,
+    .topDataMainCenter {
+        color: #fff;
+        height: 26px;
+        line-height: 26px;
+        width: 177px;
+        display: flex;
         align-items: center;
         justify-content: space-between;
-        span:nth-child(1){
-            font-size:16px;
+
+        span:nth-child(1) {
+            font-size: 16px;
             cursor: pointer;
         }
-        span:nth-child(2){
-            font-size:22px;
-            font-weight:bold;
+
+        span:nth-child(2) {
+            font-size: 22px;
+            font-weight: bold;
             cursor: pointer;
         }
     }
+
     .topDataMainCenter {
-        margin:0 auto;
+        margin: 0 auto;
     }
 }
 
@@ -845,24 +855,47 @@ export default {
         font-size: 16px;
         color: @title;
 
-        .twbIconbg{
+        .twbIconbg {
             width: 40px;
             height: 40px;
             border-radius: 50%;
             margin-right: 15px;
-            display:flex;
+            display: flex;
             align-items: center;
             justify-content: center;
         }
 
-        .bg1 {background: #FDF2F9;}
-        .bg2 {background: #E9F3FC;}
-        .bg3 {background: #F7F2FD;}
-        .bg4 {background: #FFF4F4;}
-        .bg5 {background: #E9F3FC;}
-        .bg6 {background: #F2EBFC;}
-        .bg7 {background: #FDF2F9;}
-        .bg8 {background: #FFFAF4;}
+        .bg1 {
+            background: #FDF2F9;
+        }
+
+        .bg2 {
+            background: #E9F3FC;
+        }
+
+        .bg3 {
+            background: #F7F2FD;
+        }
+
+        .bg4 {
+            background: #FFF4F4;
+        }
+
+        .bg5 {
+            background: #E9F3FC;
+        }
+
+        .bg6 {
+            background: #F2EBFC;
+        }
+
+        .bg7 {
+            background: #FDF2F9;
+        }
+
+        .bg8 {
+            background: #FFFAF4;
+        }
 
     }
 
@@ -879,18 +912,21 @@ export default {
         display: flex;
         align-items: center;
         justify-content: flex-start;
+
         .twbNumber2ItemNum {
-            font-size:30px;
-            margin-bottom:5px;
-            font-weight:1000;
+            font-size: 30px;
+            margin-bottom: 5px;
+            font-weight: 1000;
         }
+
         .twbNumber2Item {
-            font-size:16px;
-            width:70px;
-            font-weight:normal;
+            font-size: 16px;
+            width: 70px;
+            font-weight: normal;
         }
+
         .twbNumber2Item:nth-child(1) {
-            margin-right:130px;
+            margin-right: 130px;
         }
     }
 
@@ -969,11 +1005,11 @@ export default {
 }
 
 ::v-deep .chartSelectInput .el-input__inner {
-    background:#F2F4FE;
-    color:#5570F1;
-    border:none;
+    background: #F2F4FE;
+    color: #5570F1;
+    border: none;
     border-radius: 8px;
-    width:130px;
-    margin-left:20px;
+    width: 130px;
+    margin-left: 20px;
 }
 </style>

src/views/job/checkjobRecruitingList.vue

@@ -1,298 +1,307 @@
 <template>
-    <div class="mainBox">
-      <!--搜索功能 start------------------------------------------------------------>
-      <div class="layerBox_search">
-        <div class="layerBoxLine">
-          <el-row>
-            <el-col :span="8">
-              <div class="searchBox">
-                <div class="searchTitle">职位名称：</div>
-                <el-input placeholder="请输入职位名称" autocomplete="off" v-model="getApiData.keyword"/>
-              </div>
-            </el-col>
-          </el-row>
-        </div>
-      </div>
-      
-      <div class="layerBoxNoBg">
-        <div>
-          <!--el-button type="primary" @click="goCreat">发布职位</el-button-->
-        </div>
-        <div>
-          <el-button @click="clearSearchList">重置</el-button>
-          <el-button type="primary" @click="getData('search')">搜索</el-button>
-        </div>
-      </div>
-      <!--搜索功能 end------------------------------------------------------------>
-  
-      <!--表格内容 start------------------------------------------------------------>
-      <div class="layerBox">
-        <tableTitle :name="tableDivTitle"/>
-        <el-row>
-          <template>
-            <el-table :data="tableData" style="width: 100%">
-              <el-table-column fixed prop="id" label="编号" width="100"></el-table-column>
-              <el-table-column prop="title" label="职位名称" width=""></el-table-column>
-              <el-table-column prop="website_name" label="网站名称" width=""></el-table-column>
-              <el-table-column prop="user_name" label="发布人" width=""></el-table-column>
-              <el-table-column prop="created_at" label="创建时间" width=""></el-table-column>
-              <el-table-column prop="updated_at" label="修改时间" width=""></el-table-column>
-              <el-table-column prop="status" label="审核状态" width="100">
-                <template slot-scope="scope">
-                  <span v-if="scope.row.status==0">待审核</span>
-                  <span v-if="scope.row.status==1">已审核</span>
-                  <span v-if="scope.row.status==2">已拒绝</span>
-                </template>
-              </el-table-column>
-              <el-table-column fixed="right" label="操作" width="300" header-align="center">
-                <template slot-scope="scope">
-                  <div class="listBtnBox">
-                    <div class="listMainBtn" @click="getUpRow(scope.row.id, tableData)" v-if="creatNews_user_type == '10000'"><i class="el-icon-check"></i>审核</div>
-                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i class="el-icon-delete"></i>移除</div>
-                    <div class="listEditBtn" @click="goEdit(scope.row.id, tableData)"><i class="el-icon-edit-outline"></i>编辑</div>
-                  </div>
-                </template>
-              </el-table-column>
-            </el-table>
-          </template>
-        </el-row>
-      </div>
-      <!--分页 start------------------------------------------------------------>
-      <div class="alignBox">
+  <div class="mainBox">
+    <!--搜索功能 start------------------------------------------------------------>
+    <div class="layerBox_search">
+      <div class="layerBoxLine">
         <el-row>
-          <el-col :span="24">
-            <el-pagination @size-change="handleSizeChange" :current-page="getApiData.page" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">职位名称：</div>
+              <el-input placeholder="请输入职位名称" autocomplete="off" v-model="getApiData.keyword" />
+            </div>
           </el-col>
         </el-row>
       </div>
-      <!--分页 end------------------------------------------------------------>
-      <!--表格内容 end------------------------------------------------------------>
+    </div>
+
+    <div class="layerBoxNoBg">
+      <div>
+        <!--el-button type="primary" @click="goCreat">发布职位</el-button-->
+      </div>
+      <div>
+        <el-button @click="clearSearchList">重置</el-button>
+        <el-button type="primary" @click="getData('search')">搜索</el-button>
+      </div>
+    </div>
+    <!--搜索功能 end------------------------------------------------------------>
 
-      <!--弹出框1：外部表单弹出框 start------------------------------------------------------------>
+    <!--表格内容 start------------------------------------------------------------>
+    <div class="layerBox">
+      <tableTitle :name="tableDivTitle" />
+      <el-row>
+        <template>
+          <el-table :data="tableData" style="width: 100%">
+            <el-table-column fixed prop="id" label="编号" width="100"></el-table-column>
+            <el-table-column prop="title" label="职位名称" width=""></el-table-column>
+            <el-table-column prop="website_name" label="网站名称" width=""></el-table-column>
+            <el-table-column prop="user_name" label="发布人" width=""></el-table-column>
+            <el-table-column prop="created_at" label="创建时间" width=""></el-table-column>
+            <el-table-column prop="updated_at" label="修改时间" width=""></el-table-column>
+            <el-table-column prop="status" label="审核状态" width="100">
+              <template slot-scope="scope">
+                <span v-if="scope.row.status == 0">待审核</span>
+                <span v-if="scope.row.status == 1">已审核</span>
+                <span v-if="scope.row.status == 2">已拒绝</span>
+              </template>
+            </el-table-column>
+            <el-table-column fixed="right" label="操作" width="300" header-align="center">
+              <template slot-scope="scope">
+                <div class="listBtnBox">
+                  <div class="listMainBtn" @click="getUpRow(scope.row.id, tableData)"
+                    v-if="creatNews_user_type == '10000'"><i class="el-icon-check"></i>审核</div>
+                  <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i
+                      class="el-icon-delete"></i>删除</div>
+                  <div class="listEditBtn" @click="goEdit(scope.row.id, tableData)"><i
+                      class="el-icon-edit-outline"></i>编辑</div>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+      </el-row>
+    </div>
+    <!--分页 start------------------------------------------------------------>
+    <div class="alignBox">
+      <el-row>
+        <el-col :span="24">
+          <el-pagination @size-change="handleSizeChange" :current-page="getApiData.page"
+            @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper"
+            :total="allCount"></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+    <!--分页 end------------------------------------------------------------>
+    <!--表格内容 end------------------------------------------------------------>
+
+    <!--弹出框1：外部表单弹出框 start------------------------------------------------------------>
     <el-dialog title="请输入驳回理由" :visible.sync="examineWindow" :close-on-click-modal="false">
       <el-form :model="form" ref="form" :rules="formRules" label-position="left">
         <div class="formDiv">
           <el-form-item label="驳回原因：" :label-width="formLabelWidth" prop="refuse_reason" class="custom-align-right">
-            <el-input type="textarea" v-model="form.refuse_reason" class="custom-textarea" placeholder="请输入驳回原因" :rows="3"></el-input>
+            <el-input type="textarea" v-model="form.refuse_reason" class="custom-textarea" placeholder="请输入驳回原因"
+              :rows="3"></el-input>
           </el-form-item>
         </div>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <div>
-          <el-button type="info" @click="examineWindow=false">取消</el-button>
+          <el-button type="info" @click="examineWindow = false">取消</el-button>
           <el-button type="primary" @click="examineToServe">确定</el-button>
         </div>
       </div>
     </el-dialog>
     <!--弹出框1：外部表单弹出框 end------------------------------------------------------------>
 
-    </div>
-  </template>
-  
-  <script>
-  //表格标题
-  import tableTitle from './components/tableTitle';
-  //引入公用样式
-  import '@/styles/global.less';
-  import { getUseType } from '@/utils/auth';
-  export default {
-    components: {
-      tableTitle,//表格标题
-    },
-    data() {
-      const validateEmpty = (rule, value, callback) => {
-        if (value == '') {
-          callback(new Error('该项不能为空！'))
-        } else {
-          callback()
-        }
+  </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle';
+//引入公用样式
+import '@/styles/global.less';
+import { getUseType } from '@/utils/auth';
+export default {
+  components: {
+    tableTitle,//表格标题
+  },
+  data() {
+    const validateEmpty = (rule, value, callback) => {
+      if (value == '') {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
       }
-      return {
-        //1.列表和分页相关 start ------------------------------------------------------------>
-        tableDivTitle:"职位列表",
-        tableData:[],//内容
-        editId:0,//要修改的网站id
-        examineWindow:false,//审核窗口
-        formLabelWidth:"120px",//表单label宽度
-        getApiData:{
-          title:"",//职位名称
-          website_name:"",//网站名称
-          user_name:"",//发布人
-          created_at:"",//创建时间
-          updated_at:"",//修改时间
-          page:1,//当前是第几页
-          page_size:10,//一共多少条
-          checkout:0,//是否审核 0 未审核 
-          
-        },
-        //提交驳回
-        form:{
-          refuse_reason:""
-        },
-        formRules: {
-          //导航池名称不能为空
-          refuse_reason: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        },
-        creatNews_user_type:'0',//用户类型
-        keyword:"",//搜索关键字
-        allCount:0,//总条数
-        //分页相关 end ------------------------------------------------------------>
+    }
+    return {
+      //1.列表和分页相关 start ------------------------------------------------------------>
+      tableDivTitle: "职位列表",
+      tableData: [],//内容
+      editId: 0,//要修改的网站id
+      examineWindow: false,//审核窗口
+      formLabelWidth: "120px",//表单label宽度
+      getApiData: {
+        title: "",//职位名称
+        website_name: "",//网站名称
+        user_name: "",//发布人
+        created_at: "",//创建时间
+        updated_at: "",//修改时间
+        page: 1,//当前是第几页
+        page_size: 10,//一共多少条
+        checkout: 0,//是否审核 0 未审核 
+
+      },
+      //提交驳回
+      form: {
+        refuse_reason: ""
+      },
+      formRules: {
+        //导航池名称不能为空
+        refuse_reason: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+      },
+      creatNews_user_type: '0',//用户类型
+      keyword: "",//搜索关键字
+      allCount: 0,//总条数
+      //分页相关 end ------------------------------------------------------------>
+    }
+  },
+  methods: {
+    //1.列表和分页相关 start ------------------------------------------------------------>
+    //1.1 开始请求列表信息方法
+    getData(type) {
+      if (type == "search") {
+        this.getApiData.page = 1;
       }
+      this.getApiData.checkout = 0;
+      // this.getApiData.keyword = this.keyword;
+      this.$store.dispatch('news/getJobRecruitingList', this.getApiData).then(res => {
+        let data = [];
+        console.log(res.data.rows)
+        this.tableData = res.data.rows; //给与内容
+        this.allCount = res.data.count; //给与总条数
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '网络错误，请重试！'
+        });
+      })
     },
-    methods: {
-      //1.列表和分页相关 start ------------------------------------------------------------>
-      //1.1 开始请求列表信息方法
-      getData(type){
-        if(type=="search"){
-          this.getApiData.page = 1;
-        }
-        this.getApiData.checkout = 0;
-        // this.getApiData.keyword = this.keyword;
-        this.$store.dispatch('news/getJobRecruitingList',this.getApiData).then(res=> {
-          let data = [];
-          console.log(res.data.rows)
-          this.tableData = res.data.rows; //给与内容
-          this.allCount = res.data.count; //给与总条数
-        }).catch(() => {
+    //1.2 删除内容
+    deleteRow(id) {
+      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log("当前删除：" + id)
+        this.$store.dispatch('news/delJobRecruiting', { id: id }).then(res => {
+          this.getData();
           this.$message({
-            type: 'warning',
-            message: '网络错误，请重试！'
+            type: 'success',
+            message: '删除成功!'
           });
-        })
-      },
-      //1.2 删除内容
-      deleteRow(id){
-        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          console.log("当前删除：" + id)
-          this.$store.dispatch('news/delJobRecruiting',{id:id}).then(res=> {
-            this.getData();
-            this.$message({
-              type: 'success',
-              message: '删除成功!'
-            });
-          }).catch(() => {
-            this.$message({
-              type: 'warning',
-              message: '网络错误，请重试！'
-            });
-          })
         }).catch(() => {
           this.$message({
             type: 'warning',
-            message: '已取消删除'
+            message: '网络错误，请重试！'
           });
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '已取消删除'
         });
-      },
-      //1.4 审核温江
-      getUpRow(id){
-        //设置待审核的id
-        this.editId = id;
-        console.log(id)
-        this.$confirm('将此职位通过审核吗?', '提示', {
-          confirmButtonText: '通过',
-          cancelButtonText: '拒绝',
-          type: 'warning'
-        }).then(() => {
-          this.upRow(id,1)
-        }).catch(() => {
+      });
+    },
+    //1.4 审核温江
+    getUpRow(id) {
+      //设置待审核的id
+      this.editId = id;
+      console.log(id)
+      this.$confirm('将此职位通过审核吗?', '提示', {
+        confirmButtonText: '通过',
+        cancelButtonText: '拒绝',
+        distinguishCancelAndClose: true,  // 关键配置项，用于区分取消和关闭按钮
+        type: 'warning'
+      }).then(() => {
+        this.upRow(id, 1)
+      }).catch((the_reback) => {
         //输入驳回理由
         console.log("驳回")
-        this.examineWindow = true;
-        })
-      },
-      //1.5 修改文章状态
-      upRow(id,status){
-        let data = {
-          id:id,
-          status:status
+
+        if (the_reback == "cancel") {
+          //输入驳回理由
+          // console.log("驳回" )
+          this.examineWindow = true;
+        }
+      })
+    },
+    //1.5 修改文章状态
+    upRow(id, status) {
+      let data = {
+        id: id,
+        status: status
+      }
+      this.$store.dispatch('news/checkJobRecruiting', data).then(res => {
+        if (res.code == 200) {
+          this.$message({
+            type: 'success',
+            message: '操作成功！'
+          });
+          this.getData();
         }
-        this.$store.dispatch('news/checkJobRecruiting',data).then(res=> {
-          if(res.code==200){
-            this.$message({
-              type: 'success',
-              message: '操作成功！'
-            });
-            this.getData();
+      })
+    },
+    //提交驳回内容
+    examineToServe(id) {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          let data = {
+            id: this.editId,
+            status: 2,//驳回status
+            refuse_reason: this.form.refuse_reason
           }
-        })
-      },
-      //提交驳回内容
-      examineToServe(id){
-        this.$refs.form.validate(valid => {
-          if (valid) {
-            let data = {
-              id:this.editId,
-              status:2,//驳回status
-              refuse_reason:this.form.refuse_reason
+          this.$store.dispatch('news/checkJobRecruiting', data).then(res => {
+            if (res.code == 200) {
+              this.$message({
+                type: 'success',
+                message: '操作成功！'
+              });
+              this.getData();
+              this.form.refuse_reason = "";//清空上一次的输入
+              this.examineWindow = false;
             }
-            this.$store.dispatch('news/checkJobRecruiting',data).then(res=> {
-              if(res.code==200){
-                this.$message({
-                  type: 'success',
-                  message: '操作成功！'
-                });
-                this.getData();
-                this.form.refuse_reason = "";//清空上一次的输入
-                this.examineWindow = false;
-              }
-            })
-          }else{
-            this.$message.error("驳回理由不能为空！")
-          }
-        })
-      },
-      //1.4 列表内容分页
-      //直接跳转
-      handleSizeChange(val) {
-        this.getApiData.page = val;
-        this.getData();
-      },
-      //1.5 点击分页
-      handleCurrentChange(val) {
-        this.getApiData.page = val;
-        this.getData();
-      },
-      //1.6 重置按钮
-      clearSearchList(){
-        this.getApiData.keyword = "";
-        this.getApiData.page = 1;
-        this.getApiData.page_size = 10;
-        this.getData();
-      },
-      //列表和分页相关 end ------------------------------------------------------------>
-  
-      //2.添加新闻 start ------------------------------------------------------------>
-      //跳转到职位发布页面
-      goCreat(){
-        this.$router.push({
-          path: '/creatJob',
-        });
-      },
-      goEdit(id){
-        let data = {
-          id:id,
-          to:"checkjob"
+          })
+        } else {
+          this.$message.error("驳回理由不能为空！")
         }
-        this.$router.push({
-          path: '/creatJob',
-          query: data
-        });
-      }
-      //添加新闻 end ------------------------------------------------------------>
+      })
     },
-    mounted(){
-      this.creatNews_user_type = getUseType()
-      //1.获得初始数据
+    //1.4 列表内容分页
+    //直接跳转
+    handleSizeChange(val) {
+      this.getApiData.page = val;
       this.getData();
+    },
+    //1.5 点击分页
+    handleCurrentChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.6 重置按钮
+    clearSearchList() {
+      this.getApiData.keyword = "";
+      this.getApiData.page = 1;
+      this.getApiData.page_size = 10;
+      this.getData();
+    },
+    //列表和分页相关 end ------------------------------------------------------------>
+
+    //2.添加新闻 start ------------------------------------------------------------>
+    //跳转到职位发布页面
+    goCreat() {
+      this.$router.push({
+        path: '/creatJob',
+      });
+    },
+    goEdit(id) {
+      let data = {
+        id: id,
+        to: "checkjob"
+      }
+      this.$router.push({
+        path: '/creatJob',
+        query: data
+      });
     }
+    //添加新闻 end ------------------------------------------------------------>
+  },
+  mounted() {
+    this.creatNews_user_type = getUseType()
+    //1.获得初始数据
+    this.getData();
   }
-  </script>
-  
-  <style scoped lang="less">
-  
-  </style>
-  
+}
+</script>
+
+<style scoped lang="less"></style>

src/views/job/components/CityCascader.vue

@@ -2,7 +2,7 @@
   <el-cascader
     :key="cascaderKey"
     v-model="internalValue"
-    placeholder="请选择地区"
+    placeholder="请选择公司地址"
     :props="SearchCityData"
     filterable
     clearable

src/views/job/creatJob.vue

@@ -11,10 +11,18 @@
                 clearable></el-cascader>
             </el-form-item>
           </div>
-          <el-form-item label="导航池名称：" prop="cat_arr_id" class="custom-align-right">
-            <el-cascader :key="parentKey_2" v-model="form.cat_arr_id" placeholder="请选择导航池名称" :props="parentData_2"
+          <el-form-item label="栏目名称：" prop="cat_arr_id" class="custom-align-right">
+            <el-cascader :key="parentKey_2" v-model="form.cat_arr_id" placeholder="请选择栏目名称" :props="parentData_2"
               popper-class="my_cascader" filterable clearable></el-cascader>
           </el-form-item>
+          <div v-if="creatNews_user_type == 10000">
+            <el-form-item label="推荐等级：" prop="" class="custom-align-right">
+              <el-select v-model="form.job_level" clearable placeholder="请选择推荐等级">
+                <el-option v-for="item in gradeArr" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
           <el-form-item label="招聘职位名称：" prop="title" class="custom-align-right">
             <el-input v-model="form.title" autocomplete="off" placeholder="请输入招聘职位名称"></el-input>
           </el-form-item>
@@ -94,9 +102,15 @@
                 </el-option>
               </el-select>
             </el-form-item>
+            <!-- <el-form-item label="职位描述：" prop="description" class="custom-align-right">
+              <myEditor ref="myEditor" v-model="form.description"></myEditor>
+            </el-form-item> -->
             <el-form-item label="职位描述：" prop="description" class="custom-align-right" style="display:block;">
               <el-input v-model="form.description" type="textarea" :rows="2" placeholder="介绍公司对该职位的职位描述..."> </el-input>
             </el-form-item>
+            <!-- <el-form-item label="具体要求：" prop="jt_description" class="custom-align-right">
+              <myEditor1 ref="myEditor1" v-model="form.jt_description"></myEditor1>
+            </el-form-item> -->
             <el-form-item label="具体要求：" prop="jt_description" class="custom-align-right" style="display:block;">
               <el-input v-model="form.jt_description" type="textarea" :rows="2" placeholder="介绍公司对该职位的具体要求...">
               </el-input>
@@ -147,11 +161,13 @@
               <el-input v-model="form.company_url" autocomplete="off" :disabled="creatNews_user_type !== '10000'"
                 placeholder="请输入公司网址"></el-input>
             </el-form-item>
-            <el-form-item label="地址：" prop="address_arr_id" class="custom-align-right">
+            <el-form-item label="公司地址：" prop="address_arr_id" class="custom-align-right">
               <CityCascader v-model="form.address_arr_id" @update-city-id="update_address_arr_id"
                 :user_type="creatNews_user_type"></CityCascader>
+            </el-form-item>
+            <el-form-item label="详细地址：" prop="address_arr_id" class="custom-align-right">
               <el-input v-model="form.address" autocomplete="off" :disabled="creatNews_user_type !== '10000'"
-                placeholder="请输入公司地址"></el-input>
+                placeholder="请输入详细地址"></el-input>
             </el-form-item>
             <el-form-item label="邮箱：" prop="email" class="custom-align-right">
               <el-input v-model="form.email" autocomplete="off" :disabled="creatNews_user_type !== '10000'"
@@ -174,15 +190,19 @@
 import { getWebSiteId, getUseType } from '@/utils/auth'
 //表格标题
 import tableTitle from './components/tableTitle';
+//引入富文本编辑器
+import myEditor from '@/components/edit/myEditor.vue';
 //引入公用样式
 import '@/styles/global.less';
 import { create } from 'sortablejs';
 import CityCascader from './components/CityCascader';
 import { formatLocalDate } from '@/utils/public';
+import job from '@/store/modules/job';
 export default {
   components: {
     tableTitle,
-    CityCascader
+    CityCascader,
+    myEditor,
   },
   data() {
 
@@ -202,6 +222,20 @@ export default {
         callback()
       }
     }
+    const validateZero = (rule, value, callback) => {
+      if (value == null || value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    const validateMobile = (rule, value, callback) => {
+      if (value.length != 11) {
+        callback(new Error('请输入正确的手机号！'))
+      } else {
+        callback()
+      }
+    }
     let self = this;
     //0.全局操作 end ------------------------------------------------------------>
     return {
@@ -235,13 +269,14 @@ export default {
       creatNews_user_type: '0',//判断用户类型'
 
       form: {
-        web_site_id: '',//站点名称
+        web_site_id: "",//站点名称
         user_type: "??",//判断用户类型'
-        // cat_arr_id: 0,//导航池名称
+        // cat_arr_id: 0,//栏目名称
         nav_add_pool_id: [],//导航池子级
         city_arr_id: [],//城市
         // websiteName: "",//站点名称
-        cat_arr_id: [],//导航池名称
+        cat_arr_id: [],//栏目名称
+        job_level: "",//推荐等级
         title: "",//招聘职位名称
         province_id: "",//省份
         job_pronviceid: "",//省份id
@@ -251,12 +286,12 @@ export default {
         jtzw_id: "",//具体职位
         nature_id: "",//职位性质
         createjob_pronvice: "",//工作省份
-        experience: "",//工作经验
-        educational: "",//学历
-        salary: "",//月薪
-        number: "",//招聘人数
-        language: "",//语言能力
-        level: "",//掌握程度
+        experience: null,//工作经验
+        educational: null,//学历
+        salary: null,//月薪
+        number: null,//招聘人数
+        language: null,//语言能力
+        level: null,//掌握程度
         description: "",//职位描述
         jt_description: "",//具体要求
         due_data: "",//截止日期
@@ -264,7 +299,7 @@ export default {
         business_name: "",//公司名称
         company_hy_id: "",//所属行业
         company_size: "",//公司规模
-        company_nature: "",//公司性质
+        company_nature: null,//公司性质
         introduction: "",//公司简介
         real_name: "",//联系人
         mobile: "",//联系电话
@@ -278,24 +313,24 @@ export default {
       //1.2 表单验证规则
       formRules: {
         // 站点名称
-        web_site_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        //导航池名称不能为空
-        cat_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
-        province_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        web_site_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
+        //栏目名称不能为空
+        cat_arr_id: [{ required: true, trigger: 'change', validator: validateArray }],
+        province_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
         // 招聘职位名称
         title: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         // 职位类别
-        zw_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        zw_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
         //具体职位
-        jtzw_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        jtzw_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
         // 职位性质
-        nature_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        nature_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
         // 工作省份
-        province_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        province_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
         // 工作城市
-        city_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        city_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
         // 行业分类
-        hy_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        hy_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
         // 职位描述
         description: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         // 具体要求
@@ -303,29 +338,32 @@ export default {
         // 截止日期
         due_data: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         // 薪水
-        salary: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        salary: [{ required: true, trigger: 'change', validator: validateZero }],
 
 
         // 公司名称
         business_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         // 所属行业
-        company_hy_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        company_hy_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
         // 公司规模
-        company_size: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        company_size: [{ required: true, trigger: 'change', validator: validateEmpty }],
         // 公司简介
         introduction: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         // 联系人
         real_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         // 联系电话
-        mobile: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        mobile: [{ required: true, trigger: 'blur', validator: validateMobile }],
         // 地址
-        // address_arr_id: [{ required: true, trigger: 'blur', validator: validateEmpty }] ,
+        address_arr_id: [{ required: true, trigger: 'change', validator: validateArray }],
         // 具体地址
-        address: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        address: [{ required: true, trigger: 'blur', message: '该项不能为空!' }],
         // 邮箱
         email: [{ required: true, trigger: 'blur', validator: validateEmpty }],
       },
-
+      gradeArr: [{
+        value: 1,
+        label: '推荐位'
+      }],
 
       //获取父级导航池
       parentKey: 0,//获取父级导航
@@ -383,7 +421,7 @@ export default {
           }
 
           let parames = {
-            'type': 5,
+            'type': 4,
             'website_id': this.websiteid ? this.websiteid : 0,
             'pid': parentId ? parentId : 0
 
@@ -391,9 +429,11 @@ export default {
           self.$store.dispatch('news/getWebsiteNavList', parames).then(res => {
 
             if (res.data) {
+              console.log('11111111112222222222222222', res.data);
+
               const nodes = res.data.map(item => ({
                 value: item.category_id,
-                label: item.name,
+                label: item.alias,
                 leaf: level >= 3,
                 children: []
               }))
@@ -535,8 +575,11 @@ export default {
           delete this.form.province_id;
           delete this.form.job_pronviceid;
           delete this.form.city_id;
-          delete this.form.createjob_pronvice;
+          delete this.form.createjob_pronvice;//工作省份
 
+          if (this.form.salary == null) {
+            this.form.salary = 0;
+          }
 
           if (this.creatNews_user_type === '10000') {
             this.form.website_id = this.form.web_site_id;
@@ -622,7 +665,6 @@ export default {
     //跳转操作 end ------------------------------------------------------------>
 
     //3.回显操作 ------------------------------------------------------------>
-    //   //3.1回显数据
     //3.1回显数据
     getMainData() {
       if (this.creatNews_user_type === '10000' || this.$route.query.id != undefined) {
@@ -650,7 +692,7 @@ export default {
             this.form.province_id = this.form.city_arr_id[0] ?? '';
             if (this.form.city_arr_id.length > 1) {
               this.province_change(this.form.city_arr_id[0]);
-              this.form.city_id = this.form.city_arr_id[1] ?? '';
+              this.form.city_id = this.form.city_arr_id[1] == 0 ? '' : this.form.city_arr_id[1];
             } else {
               let data = {
                 'pid': this.form.city_arr_id[0]
@@ -675,8 +717,11 @@ export default {
           this.form.level = res.data.level;                //掌握程度
           this.form.description = res.data.description;    //职位描述
           this.form.jt_description = res.data.jt_description;//具体要求
-
-
+          if (res.data.job_level == 0 || res.data.job_level == null || res.data.job_level == '') {
+            this.form.job_level = '';  //推荐等级
+          }else{
+            this.form.job_level = Number(res.data.job_level);  //推荐等级
+          }
           this.form.business_name = res.data.business_name;
           this.form.company_hy_id = res.data.company_hy_id;
           this.form.company_size = res.data.company_size;
@@ -759,6 +804,7 @@ export default {
           delete this.form.city_id;
           delete this.form.createjob_pronvice;
           delete this.form.web_site_id;
+
           this.$store.dispatch('news/upJobRecruiting', this.form).then(res => {
             if (res.code != 200) {
               this.$message.error("修改失败，请稍后再试！");
@@ -1040,4 +1086,39 @@ export default {
   }
 }
 
+//该项不能为空几个字的位置
+::v-deep .el-form-item__error {
+  color: #ff4949;
+  font-size: 12px;
+  line-height: 1;
+  padding-top: 4px;
+  position: relative;
+}
+
+//输入框距离底部的距离
+::v-deep .el-form-item {
+  margin-bottom: 5px;
+}
+
+//图片提示文字样式
+.photo_tips {
+  font-size: 14px;
+  color: #999;
+}
+
+#educationExperience,
+#workExperience,
+#professionalSkills {
+  position: relative;
+}
+
+.addBtn {
+  position: absolute;
+  right: 0px;
+  top: -8px;
+  width: 78px;
+  // display: inline-block;
+  // margin-bottom: 0px;
+}
+
 //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>

src/views/job/jobOpportunitiesDetails.vue

@@ -16,7 +16,7 @@
                             </div>
                             <div class="index_1_box clearfix">
                                 <div class="demand_head_box clearfix">
-                                    <div class="demand_head_name">JAVA开发工程师</div>
+                                    <div class="demand_head_name">{{ pageData.title }}</div>
                                 </div>
                                 <div class="cruit_li_2_foot clearfix">
                                     <span class="cruit_li_2_foot_tag cruit_li_2_foot_exper">
@@ -176,6 +176,7 @@ export default {
             let that = this;
             let id = this.$route.query.id;
             this.$store.dispatch('job/getJobRecruitingInfo', { id: id }).then(res => {
+                this.pageData.title = res.data.title;//职位名称
                 this.pageData.updated_at = res.data.updated_at;//更新时间
                 this.getIndustry(res.data.hy_id)//行业分类
                 this.getPositionList(res.data.zw_id, res.data.jtzw_id)//职业分类

src/views/job/jobRecruitingList.vue

@@ -48,7 +48,7 @@
                 <template slot-scope="scope">
                   <div class="listBtnBox">
                     <div class="listUpBtn" @click="returnRow(scope.row.id, tableData)" v-if="creatNews_user_type == 10000"><i class="el-icon-refresh-right"></i>撤回</div>
-                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i class="el-icon-delete"></i>移除</div>
+                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i class="el-icon-delete"></i>删除</div>
                     <div class="listEditBtn" @click="goEdit(scope.row.id, tableData)"><i class="el-icon-edit-outline"></i>编辑</div>
                   </div>
                 </template>

src/views/login/index.vue

@@ -97,6 +97,8 @@ import { validUserPhone } from '@/utils/validate'
 import axios from 'axios'
 import BASEURL from '@/utils/baseUrl'
 import { getToken, getTokenTest, removeToken,setLoginStatus,setUserUrl } from '@/utils/auth'
+import router from '@/router'//引入路由
+
 
 export default {
     name: 'Login',
@@ -375,7 +377,9 @@ export default {
                             } else if (res.code == 200 && res.token != '') {
                                 this.sendUrlServ()
                                 console.log("登录成功，将跳转至详情页面222！")
+                                console.log(res)
                                 this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
+                                console.log("当前路由个数：" + router.options.routes.length)
                             } else if (res.code != 0 && res.code != 200) {
                                 this.$message({
                                     type: 'error',

src/views/login/no-permission.vue

@@ -27,6 +27,15 @@ export default {
             //刷新页面
             this.$router.push('/login');
         },
+    },
+    mounted() {
+        console.log("用户token验证出错！当前的用户权限为：")
+        console.log(this.$store.getters.roles)
+        console.log(this.$store.getters.roles.length)
+        this.$store.commit('user/SET_ROLES', [])
+        console.log("正在重设用户权限，重设后的用户权限为：")
+        console.log(this.$store.getters.roles)
+        console.log(this.$store.getters.roles.length)
     }
 }
 </script>

src/views/news/addBook.vue

@@ -13,8 +13,8 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="展示名称：" prop="cat_arr_id" class="custom-align-right">
-            <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的展示名称" :props="parentData"
+          <el-form-item label="栏目名称：" prop="cat_arr_id" class="custom-align-right">
+            <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的栏目名称" :props="parentData"
               filterable clearable></el-cascader>
           </el-form-item>
           <el-form-item label="书刊音像标题：" prop="title" class="custom-align-right">

src/views/news/addGood.vue

@@ -31,8 +31,8 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="展示名称：" prop="cat_arr_id" class="custom-align-right">
-            <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的展示名称" :props="parentData"
+          <el-form-item label="栏目名称：" prop="cat_arr_id" class="custom-align-right">
+            <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的栏目名称" :props="parentData"
               filterable clearable></el-cascader>
           </el-form-item>
           <div v-if="user_type == 10000">
@@ -226,6 +226,19 @@ export default {
         callback()
       }
     }
+
+    function validatePhone(phone) {
+      // 正则表达式：11位数字，以1开头
+      const regex = /^1\d{10}$/;
+      return regex.test(phone);
+    }
+    const validatePhoneNumber = (rule, value, callback) => {
+      if (!value || !validatePhone(value)) {
+        callback(new Error('请输入正确的手机号！'));
+      } else {
+        callback();
+      }
+    }
     let self = this;
     //0.全局操作 end ------------------------------------------------------------>
     return {
@@ -294,7 +307,7 @@ export default {
 
         keyword: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         contact: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        phone: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        phone: [{ required: true, trigger: 'blur', validator: validatePhoneNumber }],
         address: [{ required: true, trigger: 'blur', validator: validateEmpty }],
       },
       //1.3富文本编辑器配置

src/views/news/addJobHunting.vue

@@ -16,6 +16,32 @@
       </div>
       <el-form :model="form" ref="form" :rules="formRules" label-position="left" label-width="120px">
         <div class="formDiv">
+          <!-- <div v-if="creatNews_user_type != 10000">
+            <el-form-item label="栏目名称：" prop="cat_arr_id" class="custom-align-right">
+              <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的栏目名称" :props="parentData"
+                filterable clearable></el-cascader>
+            </el-form-item>
+          </div> -->
+          <div v-if="creatNews_user_type == 10000">
+            <el-form-item label="站点名称：" prop="web_site_id" class="custom-align-right">
+              <el-cascader :key="parentKey" v-model="form.web_site_id" placeholder="请选择站点名称"
+                :options="creatNews_nav_pool_arr" @change="creatNews_nav_pool_change_fun(form.web_site_id)" filterable
+                clearable></el-cascader>
+            </el-form-item>
+          </div>
+          <el-form-item label="栏目名称：" prop="cat_arr_id" class="custom-align-right">
+            <el-cascader :key="parentKey_2" v-model="form.cat_arr_id" placeholder="请选择要绑定的栏目名称" :props="parentData_2"
+              filterable clearable></el-cascader>
+          </el-form-item>
+
+          <!-- <div v-if="creatNews_user_type == 10000">
+            <el-form-item label="推荐等级：" prop="" class="custom-align-right">
+              <el-select v-model="form.job_level" clearable placeholder="请选择推荐等级">
+                <el-option v-for="item in gradeArr" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div> -->
           <el-form-item label="头像：" class="custom-align-right" prop="imgUrl">
             <div class="uploaderBox">
               <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
@@ -44,34 +70,12 @@
             </template>
             <el-input v-model="form.name" autocomplete="off" placeholder="请输入姓名"></el-input>
           </el-form-item>
-          <div v-if="creatNews_user_type != 10000">
-            <el-form-item label="展示名称：" prop="cat_arr_id" class="custom-align-right">
-              <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的展示名称" :props="parentData"
-                filterable clearable></el-cascader>
-            </el-form-item>
-          </div>
-          <div v-if="creatNews_user_type == 10000">
-
-            <el-form-item label="站点名称：" prop="cat_arr_id" class="custom-align-right">
-              <el-cascader :key="parentKey" v-model="form.web_site_id" placeholder="请选择站点名称"
-                :options="creatNews_nav_pool_arr" @change="creatNews_nav_pool_change_fun(form.web_site_id)" filterable
-                clearable></el-cascader>
-            </el-form-item>
-
-
-            <el-form-item label="展示名称：" prop="cat_arr_id" class="custom-align-right">
-              <el-cascader :key="parentKey_2" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData_2"
-                filterable clearable></el-cascader>
-            </el-form-item>
-
-          </div>
           <el-form-item label="性别：" prop="sexy" class="custom-align-right">
             <el-radio-group v-model="form.sexy">
               <el-radio :label="1">男</el-radio>
               <el-radio :label="2">女</el-radio>
             </el-radio-group>
           </el-form-item>
-
           <el-form-item label="参加工作时间：" prop="jobtime" class="custom-align-right">
             <el-date-picker v-model="form.jobtime" type="date" placeholder="选择参加工作时间">
             </el-date-picker>
@@ -84,8 +88,6 @@
             </el-select>
           </el-form-item>
 
-
-
           <el-form-item label="手机号：" prop="phone" class="custom-align-right">
             <el-input v-model="form.phone" autocomplete="off" placeholder="请输入手机号"></el-input>
           </el-form-item>
@@ -143,8 +145,6 @@
             </el-select>
           </el-form-item>
 
-
-
           <el-form-item label="所属行业：" prop="industry" class="custom-align-right" style="width: 100%;">
             <el-select v-model="form.industry" placeholder="请选择所属行业">
               <el-option v-for="item in jobIndustry" :key="item.hyid" :label="item.hyname"
@@ -205,13 +205,10 @@
           </div>
 
           <div v-for="(item, index) in form.job_experience" :key="index">
-
             <el-form-item label="公司名称：" prop="company_name" class="custom-align-right" style="width: 100%;">
               <el-input v-model="form.job_experience[index].company_name" autocomplete="off"
                 placeholder="请输入公司名称"></el-input>
             </el-form-item>
-
-
             <el-form-item label="所属行业：" prop="job_industry" class="custom-align-right" style="width: 100%;">
               <el-select v-model="form.job_experience[index].job_industry" placeholder="请选择所属行业"
                 @change='changeCompanyNature()'>
@@ -236,7 +233,6 @@
               <el-input v-model="form.job_experience[index].department" autocomplete="off"
                 placeholder="请输入所属部门"></el-input>
             </el-form-item>
-
             <el-form-item label="在职时间：" prop="job_timeList" class="custom-align-right">
               <el-date-picker v-model="form.job_experience[index].job_timeList" type="daterange" range-separator="至"
                 start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
@@ -250,7 +246,7 @@
               <el-input v-model="form.job_experience[index].performance" autocomplete="off" type="textarea"
                 aria-rowspan="6" placeholder="请输入工作业绩"></el-input>
             </el-form-item>
-            <el-divider></el-divider>
+            <el-divider v-if="form.job_experience.length - 1"></el-divider>
           </div>
 
 
@@ -288,7 +284,7 @@
               <el-input v-model="form.education_experience[index].school_experience" autocomplete="off" type="textarea"
                 aria-rowspan="6" placeholder="请输入在校经历"></el-input>
             </el-form-item>
-            <!-- <el-divider content-position="right"> </el-divider> -->
+            <el-divider v-if="form.education_experience.length - 1"> </el-divider>
           </div>
         </div>
       </el-form>
@@ -453,22 +449,25 @@ export default {
       creatNews_user_type: 0,//判断用户类型'
 
       form: {
+        job_level: '',//推荐等级
+        status: '',//状态
         experience: '',//工作经验
         industry: '',//行业
         job: '',//职位
         self_evaluation: '',//自我评价
         city_arr_id: [],
+        salary: '',//薪资
         skillList: [{ 'skill': '' }],
         job_experience: [{
-          company_name: '',
-          job_industry: '',
-          job_name: '',
-          job_typename: '',
-          department: '',
+          company_name: '',//公司名称*
+          job_industry: '',//所属行业*
+          job_typename: '', //职位类别*
+          job_name: '', //具体职位*
+          department: '', //所属部门
           // job_timeList: ['2025-02-21 00:00:00', '2025-02-29 00:00:00'],
-          job_timeList: [],
-          performance: '',
-          job_content: ''
+          job_timeList: [], //在职时间*
+          job_content: '', //工作内容*
+          performance: '', //工作业绩
 
         }],//工作经验
         education_experience: [{
@@ -485,6 +484,12 @@ export default {
         web_site_id: 0,
         name: "",
         sexy: 1,
+        phone: "",
+        wx: "",
+        birth: "",
+        politic: "",
+        language: "",
+        educational: "",
         // jobtime: "2025-02-21 00:00:00",//工作时间
         jobtime: "",//工作时间
         origin: "",
@@ -503,25 +508,31 @@ export default {
       //1.2 表单验证规则
       formRules: {
         skillList: [{ required: true, trigger: 'blur', validator: validateArraySkill }],
-        salary: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        salary: [{ required: true, trigger: 'change', validator: validateEmpty }],
         //求职名称不能为空
         name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         imgUrl: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         sexy: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         jobtime: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         origin: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        city_arr_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        industry: [{ required: true, trigger: 'blur', validator: validateEmpty }],
-        job: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        city_arr_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
+        industry: [{ required: true, trigger: 'change', validator: validateEmpty }],
+        job: [{ required: true, trigger: 'change', validator: validateEmpty }],
+        job_name_get: [{ required: true, trigger: 'change', validator: validateEmpty }],
         slelf_evaluation: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         company_name: [{ required: true, trigger: 'blur', validator: validateCompanyNameEmpty }],
-        job_industry: [{ required: true, trigger: 'blur', validator: validateJobIndustryEmpty }],
+        job_industry: [{ required: true, trigger: 'change', validator: validateJobIndustryEmpty }],
         // job_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         job_timeList: [{ required: true, trigger: 'blur', validator: validateArray }],
         job_content: [{ required: true, trigger: 'blur', validator: validateArray }],
-        cat_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
-        job_typename: [{ required: true, trigger: 'blur', validator: validateArray }],
+        web_site_id: [{ required: true, trigger: 'change', validator: validateEmpty }],
+        cat_arr_id: [{ required: true, trigger: 'change', validator: validateArray }],
+        job_typename: [{ required: true, trigger: 'change', validator: validateArray }],
       },
+      gradeArr: [{
+        value: 1,
+        label: '推荐位'
+      }],
       //1.3富文本编辑器配置
 
       //1.4图片上传
@@ -545,7 +556,7 @@ export default {
             if (res.data) {
               const nodes = res.data.map(item => ({
                 value: item.id,
-                label: item.name,
+                label: item.alias,
                 leaf: level >= 3,
                 disabled: item.type != 3,
                 children: []
@@ -572,25 +583,35 @@ export default {
           if (data && data.children && data.children.length !== 0) {
             return resolve(node)
           }
+
           let parentId;
+
           if (data != undefined) {
             parentId = data.value;
           } else {
             parentId = self.creatNews_pid_num.toString();
           }
+          if (self.form.web_site_id) {
+            this.websiteid = self.form.web_site_id;
+          } else {
+
+            this.websiteid = getWebSiteId();
+          }
+
           let parames = {
             'type': 5,
-            'website_id': self.form.web_site_id ? self.form.web_site_id : self.websiteid,
-            'pid': parentId
-
+            'website_id': this.websiteid ? this.websiteid : 0,
+            'pid': parentId ? parentId : 0
           }
-          self.$store.dispatch('pool/get_creatNews_nav_son_actions', parames).then(res => {
+          self.$store.dispatch('news/getWebsiteNavList', parames).then(res => {
+
             if (res.data) {
+              console.log('11111111112222222222222222', res.data);
+
               const nodes = res.data.map(item => ({
                 value: item.category_id,
                 label: item.alias,
                 leaf: level >= 3,
-                disabled: item.type != 5,
                 children: []
               }))
               resolve(nodes)
@@ -689,7 +710,7 @@ export default {
     addExperience() {
       const hasEmptyExperience = this.form.job_experience.some(item => {
         // console.log(item, '-------------item--------')
-        if (item.company_name == '' || item.job_industry == '' || item.job_name == '' || item.job_timeList == '' || item.job_content == '' || item.job_typename == '') {
+        if (item.company_name == '' || item.job_industry == '' || item.job_timeList == '' || item.job_content == '' || item.job_typename == '') {
           this.$message.error('请先填写工作经历');
           return true; // 返回 true 表示找到了空的 skill
         }
@@ -711,9 +732,8 @@ export default {
     },
     addEducation() {
       const hasEmptyEducation = this.form.education_experience.some(item => {
-
-        if (item.school_name == '') {
-          this.$message.error('请先填写学校名称');
+        if (item.school_name == '' || item.school_education == '' || item.school_major == '' || item.school_timeList == '' || item.school_experience == '') {
+          this.$message.error('请将教育经历填写完整!');
           return true; // 返回 true 表示找到了空的 skill
         }
       })
@@ -786,7 +806,6 @@ export default {
             this.$message.error('请选择站点名称');
             return;
           }
-
           if (formCopy.jobtime != '' && formCopy.jobtime != null && formCopy.jobtime != undefined) {
             formCopy.jobtime = formatLocalDate(formCopy.jobtime);
           } else {
@@ -801,15 +820,22 @@ export default {
           formCopy.job_timeList.forEach(item => {
             item = formatLocalDate(item);
           });
+          if (formCopy.experience == '') {
+            formCopy.experience = 0;
+          }
           console.log(new Date().getTime(), '-------------------校验结束------------------');
           //判断用户身份
           if (this.creatNews_user_type == 10000) {
             console.log("用户身份为管理员,无需审核直接发布!")
             this.form.status = 2;
+            formCopy.status = 2;
           } else {
             console.log("用户身份为其他用户,提交到审核!")
             this.form.status = 1;
+            formCopy.status = 1;
+            this.form.web_site_id = formCopy.web_site_id;
           }
+          console.log(formCopy, '1111111111111-------------form2--------');
           this.$store.dispatch('news/addJobHunting', formCopy).then(res => {
             if (res.code == 200) {
               //汇报结果
@@ -821,10 +847,17 @@ export default {
               //返回列表页
               this.returnPage()
             } else {
-              this.$message({
-                type: 'error',
-                message: "求职发布失败，请稍后再试！"
-              });
+              if (res.code == 0 && res.message == '您已添加过求职信息') {
+                this.$message({
+                  type: 'error',
+                  message: "您已添加过求职信息！"
+                })
+              } else {
+                this.$message({
+                  type: 'error',
+                  message: "求职发布失败，请稍后再试！"
+                });
+              }
             }
           }).catch(() => {
             this.$message({
@@ -876,11 +909,18 @@ export default {
         id: this.$route.query.id
       };
       this.$store.dispatch('news/getJobHuntingInfo', data).then(res => {
-        console.log(res);
-
+        console.log('res', res);
+        // this.form.web_site_id = res.data.website_id;
+        if (typeof res.data.website_id === 'string') {
+          this.form.web_site_id = Number(res.data.website_id);
+        } else {
+          this.form.web_site_id = res.data.website_id//站点名称
+        }
         this.form.cat_arr_id = Array.isArray(res.data.cat_arr_id) ? res.data.cat_arr_id : JSON.parse(res.data.cat_arr_id);
         this.parentKey += 1; // 触发级联选择器重新加载
-        // this.loadCascaderPath(this.form.cat_arr_id); // 加载路径数据
+        this.loadCascaderPath(this.form.cat_arr_id); // 加载路径数据
+        this.parentKey_2 += 1; // 触发级联选择器重新加载
+        this.loadCascaderPath(this.form.cat_arr_id); // 加载路径数据
 
         this.form.name = res.data.name;
         this.form.sexy = res.data.sexy;
@@ -892,9 +932,30 @@ export default {
         this.form.salary = res.data.salary;
         this.form.self_evaluation = res.data.self_evaluation;
         this.form.job = parseInt(res.data.job);
+        if (res.data.job_level == 0 || res.data.job_level == null || res.data.job_level == '') {
+          this.form.job_level = '';  //推荐等级
+        } else {
+          this.form.job_level = Number(res.data.job_level);  //推荐等级
+        }
+        if (this.form.job) {
+          this.$store.dispatch('news/getPositionList', { zwpid: this.form.job }).then(res => {
+            this.job_name_arr = res.data;
+          })
+          if (parseInt(res.data.job_name_get)) {
+            for (let i = 0; i < this.job_name_arr.length; i++) {
+              if (this.job_name_arr[i].id == parseInt(res.data.job_name_get)) {
+                this.form.job_name_get = this.job_name_arr[i].id;
+              }
+            }
+          }
+        }
         this.form.industry = res.data.industry;
-        this.form.experience = res.data.experience;
-
+        if (res.data.experience == 0) {
+          this.form.experience = '';
+        } else {
+          this.form.experience = res.data.experience;
+        }
+        // this.form.experience = res.data.experience;
 
         this.form.educational = res.data.educationa == null ? "" : parseInt(res.data.educational);
         this.form.politic = res.data.politic;
@@ -906,7 +967,6 @@ export default {
         this.form.content = res.data.content;
         this.form.imgUrl = res.data.imgurl;
         this.imgUrl = res.data.imgurl;
-        this.form.web_site_id = res.data.website_id;
         this.form.jobtime = res.data.jobtime ? new Date(res.data.jobtime) : '';
         this.form.birth = res.data.birth ? new Date(res.data.birth) : '';
         this.form.origin = res.data.origin;
@@ -915,7 +975,7 @@ export default {
         // console.log(this.form.job_experience, '-----------------this.form.job_experience----------------------')
         this.form.education_experience = JSON.parse(res.data.education_experience);
         this.form.skillList = JSON.parse(res.data.skillList);
-        this.form.job_name_get = res.data.job_name_get == null ? '' : parseInt(res.data.job_name_get);
+        this.form.job_name_get = res.data.job_name_get == null || res.data.job_name_get == '' ? '' : parseInt(res.data.job_name_get);
 
       }).catch(() => {
         this.$message({
@@ -989,7 +1049,9 @@ export default {
             formCopy.birth = null;
           }
 
-
+          if (formCopy.experience == '') {
+            formCopy.experience = 0;
+          }
           formCopy.job_timeList.forEach(item => {
             item = formatLocalDate(item);
           });
@@ -998,9 +1060,12 @@ export default {
           if (this.creatNews_user_type == 10000) {
             console.log("用户身份为管理员,无需审核直接发布!")
             this.form.status = 2;
+            formCopy.status = 2;
           } else {
             console.log("用户身份为其他用户,提交到审核!")
             this.form.status = 1;
+            formCopy.status = 1;
+            this.form.web_site_id = formCopy.web_site_id;
           }
           this.$store.dispatch('news/updateJobHunting', formCopy).then(res => {
             //记录结束时间
@@ -1063,11 +1128,13 @@ export default {
       })
     },
     creatNews_nav_pool_change_fun() {      //xx  导航池级
-      let that = this; this.form.web_site_id = this.form.web_site_id[0]
+      let that = this;
+      this.form.web_site_id = this.form.web_site_id[0]
       that.parentKey_2 += 1;
       this.$store.dispatch('pool/get_creatNews_nav_son_actions', {
         'type': 5,
-        pid: String(this.creatNews_pid_num), website_id: String(this.form.web_site_id)
+        pid: String(this.creatNews_pid_num),
+        website_id: String(this.form.web_site_id)
       }).then(res => {
         if (res.data.length == 0) {//没有导航池子级
           // alert("没有导航池子级");
@@ -1120,11 +1187,24 @@ export default {
           // console.log(newVal[index].job_industry, '---job_industry---');
           this.form.company_name[index] = item.company_name;
           this.form.job_industry[index] = item.job_industry;
-          this.form.job_name[index] = item.job_name;
-          this.form.job_typename[index] = item.job_typename;
           this.form.department[index] = item.department;
           this.form.job_timeList[index] = item.job_timeList;
           this.form.job_content[index] = item.job_content;
+          this.form.job_typename[index] = item.job_typename;
+          if (item.job_typename) {
+            this.$store.dispatch('news/getPositionList', { zwpid: item.job_typename }).then(res => {
+              this.company_jobname_arr = res.data;
+            })
+            if (parseInt(res.data.job_name_get)) {
+              for (let i = 0; i < this.company_jobname_arr.length; i++) {
+                if (this.company_jobname_arr[i].id == parseInt(res.data.job_name_get)) {
+                  this.form.job_name[index] = this.company_jobname_arr[i].id;
+                }
+              }
+            }
+          }
+          this.form.job_name[index] = item.job_name;
+
           // console.log(this.form.job_industry, '-=-------job_industry---------');
           // console.log(this.form.company_name, '-=-------job_name---------');
           // if (oldVal[index] && oldVal[index].company_name !== item.company_name) {

src/views/news/addNcomplaint.vue

@@ -769,5 +769,9 @@ export default {
     height: 24px;
   }
 }
+.photo_tips{
+  font-size: 14px;
+  color: #666666;
+}
 
 //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>

src/views/news/creatNews.vue

@@ -16,8 +16,8 @@
                 :options="creatNews_nav_pool_arr" @change="creatNews_nav_pool_change_fun(form.web_site_id)" filterable
                 clearable></el-cascader>
             </el-form-item>
-            <el-form-item label="展示名称：" prop="cat_arr_id" class="custom-align-right">
-              <el-cascader :key="parentKey_2" v-model="form.cat_arr_id" placeholder="请选择要绑定的展示名称" :props="parentData_2"
+            <el-form-item label="栏目名称：" prop="cat_arr_id" class="custom-align-right">
+              <el-cascader :key="parentKey_2" v-model="form.cat_arr_id" placeholder="请选择要绑定的栏目名称" :props="parentData_2"
                 popper-class="my_cascader" filterable clearable></el-cascader>
             </el-form-item>
             <el-form-item label="外链地址：" prop="linkurl" class="custom-align-right">
@@ -29,11 +29,11 @@
           </div>
           <div v-if="form.islink == false">
             <div v-if="creatNews_user_type != 10000">
-              <el-form-item label="展示名称：" prop="cat_arr_id" class="custom-align-right">
+              <el-form-item label="栏目名称：" prop="cat_arr_id" class="custom-align-right">
                 <el-cascader 
                     :key="parentKey" 
                     v-model="form.cat_arr_id" 
-                    placeholder="请选择要绑定的展示名称" 
+                    placeholder="请选择要绑定的栏目名称" 
                     :props="parentData"
                     popper-class="my_cascader" 
                     style="height: 100%;" 
@@ -49,11 +49,11 @@
                     popper-class="my_cascader" :options="creatNews_nav_pool_arr"
                     @change="creatNews_nav_pool_change_fun(form.web_site_id)" filterable clearable></el-cascader>
                 </el-form-item>
-                <el-form-item label="展示名称：" prop="cat_arr_id" class="custom-align-right">
+                <el-form-item label="栏目名称：" prop="cat_arr_id" class="custom-align-right">
                     <el-cascader 
                         :key="parentKey_2" 
                         v-model="form.cat_arr_id" 
-                        placeholder="请选择要绑定的展示名称"
+                        placeholder="请选择要绑定的栏目名称"
                         popper-class="my_cascader" 
                         style="height: 100%;" 
                         :props="parentData_2" 

src/views/news/jobHuntingApplyList.vue

@@ -83,7 +83,7 @@ export default {
   data() {
     return {
       //1.列表和分页相关 start ------------------------------------------------------------>
-      tableDivTitle: "求职信息列表",
+      tableDivTitle: "人才库列表",
       tableData: [],//内容
       editId: 0,//要修改的网站id
       incomes: [],//薪资范围

src/views/news/jobHuntingListApply.vue

@@ -23,7 +23,7 @@
     </div>
     <div class="layerBoxNoBg">
       <div>
-        <el-button type="primary" @click="goCreat">发布求职信息</el-button>
+        <!-- <el-button type="primary" @click="goCreat">发布求职信息</el-button> -->
       </div>
       <div>
         <el-button @click="clearSearchList">重置</el-button>
@@ -172,13 +172,19 @@ export default {
       this.$confirm('将此商品通过审核吗?', '提示', {
         confirmButtonText: '通过',
         cancelButtonText: '拒绝',
+        distinguishCancelAndClose: true,  // 关键配置项，用于区分取消和关闭按钮
         type: 'warning'
       }).then(() => {
         this.upRow(id, 2)
-      }).catch(() => {
+      }).catch((the_reback) => {
         //输入驳回理由
         console.log("驳回")
-        this.examineWindow = true;
+
+        if (the_reback == "cancel") {
+          //输入驳回理由
+          // console.log("驳回" )
+          this.examineWindow = true;
+        }
       })
     },
     upRow(id, status) {

src/views/role/components/userPolitician.vue

@@ -131,11 +131,11 @@
             <el-input v-model="form.email" autocomplete="off" placeholder="请输入电子邮箱.."></el-input>
           </el-form-item>
           <el-form-item label="相关资料：" :label-width="formLabelWidth" prop="" class="custom-align-right">
-            <el-upload class="upload-demo" :action="uploadFileUrl" :headers="headers" :on-preview="handlePreview"
-              :on-remove="handleRemove" :before-remove="beforeRemove" :on-success="handleUploadSuccess" multiple
-              :limit="30" :on-exceed="handleExceed" :file-list="otherList">
+            <el-upload class="upload-demo" :action="uploadFileUrl" :headers="headers" accept=".jpg, .jpeg, .png"
+              :before-remove="beforeRemove" :on-success="handleUploadSuccess" multiple :limit="30"
+              :on-exceed="handleExceed" :file-list="otherList" list-type="picture" :before-upload="beforeAvatarUpload1">
               <el-button size="small" type="primary">点击上传</el-button>
-              <div slot="tip" class="el-upload__tip">每张图片最大1MB，最多上传30张图片。</div>
+              <div slot="tip" class="el-upload__tip">每张图片最大2MB，最多上传30张图片。</div>
             </el-upload>
           </el-form-item>
           <el-form-item label="提示词：" :label-width="formLabelWidth" prop="" class="custom-align-right">
@@ -197,11 +197,37 @@ export default {
       console.log(value, typeof value)
       console.log(value >= 0)
       if (value < 0) {
-        callback(new Error('该项不能为空1'))
+        callback(new Error('该项不能为空!'))
       } else {
         callback()
       }
     }
+    // 
+    function validatePhone(phone) {
+      // 正则表达式：11位数字，以1开头
+      const regex = /^1\d{10}$/;
+      return regex.test(phone);
+    }
+    const validatePhoneNumber = (rule, value, callback) => {
+      if (!value || !validatePhone(value)) {
+        callback(new Error('请输入正确的手机号！'));
+      } else {
+        callback();
+      }
+    }
+    // 验证身份证号码
+    function validateIdCard(idCard) {
+      // 正则表达式：18位数字
+      const regex = /^\d{18}$/;
+      return regex.test(idCard);
+    }
+    const validateIdCardNumber = (rule, value, callback) => {
+      if (!value || !validateIdCard(value)) {
+        callback(new Error('请输入正确的身份证号码！'));
+      } else {
+        callback();
+      }
+    }
     let self = this;
     return {
       //xx
@@ -210,7 +236,7 @@ export default {
 
       formLabelWidth: "120px",
       editId: "",
-      uploadFileUrl: URL.testUrl + "/public/uploadFile",//获得上传地址
+      uploadFileUrl: URL.baseUrl + "/public/uploadFile",//获得上传地址
       headers: {},
 
 
@@ -316,13 +342,13 @@ export default {
         //5.真实姓名
         real_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         //6.手机号
-        mobile: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        mobile: [{ required: true, trigger: 'blur', validator: validatePhoneNumber }],
         //7.身份证号
-        id_card: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        id_card: [{ required: true, trigger: 'blur', validator: validateIdCardNumber }],
         //8.性别
         gender: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         //9.手机号
-        mobile: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        mobile: [{ required: true, trigger: 'blur', validator: validatePhoneNumber }],
         //10.工作区域
         address_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
         //11.企业名称
@@ -405,17 +431,22 @@ export default {
     //表单收集 end ------------------------------------------------------------>
     //2.提交表单 start ------------------------------------------------------------>
     //2.3 多文件上传
-    handleRemove(file, fileList) {
-      console.log(file, fileList);
-    },
-    handlePreview(file) {
-      console.log(file);
-    },
+    // handleRemove(file, fileList) {
+    //   console.log(file, fileList);
+    // },
+    // handlePreview(file) {
+    //   console.log(file);
+    // },
+    //2.3 多文件上传
     handleExceed(files, fileList) {
       this.$message.warning(`当前限制选择 30 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
     },
     beforeRemove(file, fileList) {
-      return this.$confirm(`确定移除 ${file.name}？`);
+      console.log('file, fileList', file, fileList);
+      for (let item of fileList) {
+        this.form.other = this.form.other.filter(item => item !== file.url);
+      }
+      return this.$confirm(`确定移除 ${file.name}?`);
     },
     //获取token
     getTokenFromCookie() {
@@ -442,6 +473,15 @@ export default {
       console.log('上传成功:', response);
       console.log(this.form.other);
     },
+    //只能上传图片
+    beforeAvatarUpload1(file) {
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!');
+        return false;
+      }
+    },
     //提交表单
     addData() {
       //1.格式化时间戳
@@ -471,6 +511,8 @@ export default {
               if (typeof this.form.address_arr_id == 'string') {
                 this.form.address_arr_id = JSON.parse(this.form.address_arr_id);
               }
+              this.form.other = JSON.stringify(this.form.other);
+
               // this.form.address_id = this.form.address_arr_id[this.form.address_arr_id.length-1];
               // this.form.address_arr_id = JSON.stringify(this.form.address_arr_id);
               //2.设置修改的用户id
@@ -746,4 +788,10 @@ export default {
   /* 禁止用户拖拽调整大小 */
 }
 
+::v-deep .el-upload-list__item {
+  width: 15%;
+  float: left;
+  margin-right: 20px;
+}
+
 //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>

src/views/router/components/tableTitle.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="tableTitle">
+    <span class="tableFloatLine"></span>
+    {{name}}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    height: 38px;
+    line-height: 38px;
+    color:#333333;
+    position: relative;
+    margin-bottom: 30px;
+    .tableFloatLine {
+      // display: inline-block;
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: block;
+      position: absolute;
+      left:-20px;
+      top:10px;
+      // vertical-align: middle;
+    }
+  }
+</style>

src/views/router/routerList.vue

@@ -0,0 +1,695 @@
+<template>
+    <!-- 路由白名单位管理 -->
+    <div>
+        <!-- 提示信息 -->
+        <div class="tips">
+            <el-row>
+                <el-col :span="24">
+                    <i class="tipsIcon"></i>
+                    <span class="tipsText">通常来说，用户访问了非路由列表中的地址，前端会阻止其访问。但是部分功能，比如商圈，广告等并不存在于导航池中，自然也就不存在于路由列表。此时需要手动添加路由使其可以访问。</span>
+                </el-col>
+            </el-row>
+        </div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">网站名称</div>
+                        <el-select v-model="webSiteName_id" :multiple="false" :multiple-limit="1" filterable remote
+                            reserve-keyword placeholder="请输入网站名称" clearable :remote-method="getWebNavList"
+                            :loading="webSiteLoading" @change="selectWebSite">
+                            <el-option v-for="item in webSiteList" :key="item.id" :label="item.title"
+                                :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </div>
+                </el-col>
+              
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">所属功能</div>
+                        <el-input v-model="function_name" class="input" clearable placeholder="请输入所属功能"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <button class="btn" @click="addWhiteRouter">添加路由</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" v-loading="loading" :data="tableData" style="width: 100%">
+                        <el-table-column fixed prop="id" label="编号" width="90">
+                        </el-table-column>
+                        <el-table-column prop="website_names" label="所属网站">
+                            <template slot-scope="scope">
+                                <div class="titleWidth">{{scope.row.website_names.join('、')}}</div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="router_url" label="路由路径" width="110">
+                        </el-table-column>
+                        <el-table-column prop="function_name" label="所属功能" width="110">
+                        </el-table-column>
+                         <el-table-column fixed="right" label="操作" width="200" align="center">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)"><i
+                                            class="el-icon-edit-outline"></i>编辑</div>
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id, tableData)"><i
+                                        class="el-icon-delete"></i>删除</div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------------------>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
+                        :total="total">
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+
+        <!-- 弹出框 编辑 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh"
+            :close-on-click-modal="false">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="网站名称:" prop="website_id">
+                        <el-cascader
+                            :props="props"
+                            v-model="ruleForm.website_id"
+                            placeholder="请输入网站名称"
+                            :options="webSiteAllList"
+                            filterable
+                            >
+                        </el-cascader>
+         
+                    </el-form-item>
+                    <el-form-item label="所属功能:" prop="function_name">
+                        <el-input v-model="ruleForm.function_name" placeholder="请输入所属功能"></el-input>
+                    </el-form-item>
+                    <el-form-item label="路由地址:" prop="router_url">
+                        <el-input v-model="ruleForm.router_url" placeholder="例如：/xiangcunshangcheng"></el-input>
+                    </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="cancelForm">取消</el-button>
+                    <el-button type="primary" @click="submitForm">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog>
+        <!-- 弹出框 编辑 end----------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+import { getWhiteRouterList,delWhiteRouter,addWhiteRouter,upWhiteRouter } from '@/api/router'
+export default {
+    components: {
+        tableTitle,//表格标题-
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            props:{ 
+                multiple: true,
+                label:"website_name",
+                value:"id"
+            },
+            tableDivTitle: "路由白名单",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            loading: true, //加载中
+            tableData: [],//表格数据
+            // 可以输入的搜索框相关
+            webSiteList: [],//获取关联网站列表
+            webSiteAllList: [],//获取关联网站列表
+            webSiteLoading: false,
+            value: '',
+            // 分页相关
+            page: 1,
+            pageSize: 10,
+            total: 0,
+            // 搜索框相关
+            webSiteName_id: '', //网站名称id
+            function_name: '', //所属功能
+            website_id: [], //网站id
+            id:"", //当前编辑的id
+            ruleForm: {
+                website_id: '', //网站名称
+                function_name: '', //路由白名单位名称
+                router_url: '', //路由白名单位标识
+                
+            },
+            rules: {
+                website_id: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                function_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                router_url: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+                getWhiteRouterList({
+                    page: this.page,
+                    pageSize: this.pageSize,
+                    name: this.function_name,
+                    website_id: this.webSiteName_id, //路由白名单位名称 id
+                }).then(data => {
+                    this.loading=false;
+                    console.log("返回数据",data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+               
+                })
+        },
+
+        //1.2 删除内容
+        deleteRow(id) {
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+
+                delWhiteRouter({
+                    id: id
+                }).then(data => {
+                    console.log(data);
+                    if (data.code = 200) {
+                        this.$message({
+                            message: '删除成功',
+                            type: 'success'
+                        })
+                        this.getData()
+                    } else if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                    }
+                })
+
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '已取消删除'
+                });
+            });
+        },
+        //1.4 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.5 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.6 搜索按钮
+        goSearch() {
+            getWhiteRouterList({
+                page: this.page,
+                pageSize: this.pageSize,
+                function_name: this.function_name,
+                website_id: this.webSiteName_id, //路由白名单位名称 id
+            }).then(data => {
+                console.log(data);
+                this.tableData = data.data.rows
+                this.total = data.data.count
+        
+            })
+
+        },
+        //1.7 重置按钮
+        goReset() {
+            this.webSiteName_id = ""
+            this.function_name = ""
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+        //1.8 编辑
+        goEdit(id, val) {
+            // console.log(id);
+            this.dialogName = '编辑'
+            this.id = id
+            this.dialogTableVisible = true
+            console.log(id, val);
+            // console.log("状态", val.status);
+            //数据回显
+            this.ruleForm.website_id = val.website_id //网站id
+            this.ruleForm.function_name = val.function_name //功能名称
+            this.ruleForm.router_url = val.router_url //路由地址
+        },
+
+        //2.0 添加
+        addWhiteRouter() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+
+            //添加时清空回显回来的数据
+            this.ruleForm.website_id = '' //网站id
+            this.ruleForm.function_name = '' //功能名称
+            this.ruleForm.router_url = '' //路由地址
+        },
+
+
+        // 2.1 弹出层相关方法
+        // 提交表单
+        submitForm() {
+            // 判断用户是否输入数据
+            if (this.dialogName == "添加") {
+                this.$refs.ruleForm.validate(valid => {
+                    if (valid) {
+                            // Flatten the website_id array
+                            const flattenedWebsiteId = this.ruleForm.website_id.flat();
+                            addWhiteRouter({
+                                website_id: flattenedWebsiteId,
+                                function_name: this.ruleForm.function_name,
+                                router_url: this.ruleForm.router_url,
+                        
+                            }).then(data => {
+                                console.log(data);
+                                if (data.code == 200) {
+                                    this.$message({
+                                        message: '添加成功',
+                                        type: 'success'
+                                    })
+                                    this.dialogTableVisible = false
+                                    this.getData()
+                                } else {
+                                    this.$message({
+                                        message: data.message,
+                                        type: 'error'
+                                    })
+                                    this.dialogTableVisible = true
+                                    return
+                                }
+                            })
+                    }
+                })
+            }
+
+            if (this.dialogName == "编辑") {
+                // Flatten the website_id array
+                this.$refs.ruleForm.validate(valid => {
+                if (valid) {
+                        const flattenedWebsiteId = this.ruleForm.website_id.flat();
+                        upWhiteRouter({
+                            website_id: flattenedWebsiteId,
+                            function_name: this.ruleForm.function_name,
+                            router_url: this.ruleForm.router_url,        
+                            id: this.id
+                        }).then(data => {
+                            console.log(data);
+                            if (data.code == 200) {
+                                this.$message({
+                                    message: '编辑成功',
+                                    type: 'success'
+                                })
+                                this.dialogTableVisible = false
+                            }else {
+                                this.$message({
+                                    message: data.message,
+                                    type: 'error'
+                                })
+                                this.dialogTableVisible = true
+                            }
+                            this.getData()
+                        })
+            }
+            
+        })
+        }
+        },
+        //取消添加或编辑
+        cancelForm() {
+            this.dialogTableVisible = false
+        },
+        //搜索部分的输入关键词下拉框
+        selectWebSite(value) {
+            this.webSiteName_id = value
+        },
+        //
+        getWebNavList(query) {
+            if (query !== '') {
+                this.webSiteLoading = true;
+                let data = { keyword: query }
+                let dataArr = [];
+                this.$store.dispatch('pool/getNavWebList', data).then(res => {
+                    this.webSiteList = res.data;
+                    this.webSiteLoading = false;
+                }).catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '网络错误，请重试！'
+                    });
+                })
+            } else {
+                this.navList = [];
+            }
+        },
+        
+        getWebNavLists(node,query) {
+            if (query !== '') {
+                this.webSiteLoading = true;
+                let data = { keyword: query }
+                let dataArr = [];
+                this.$store.dispatch('pool/getNavWebList', data).then(res => {
+                    this.webSiteAllList = res.data;
+                    this.webSiteLoading = false;
+                }).catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '网络错误，请重试！'
+                    });
+                })
+            } else {
+                this.navList = [];
+            }
+        },
+    },
+    mounted() {
+        this.getData(),
+        this.getWebNavList();
+        this.getWebNavLists();
+    
+    },
+}
+</script>
+
+<style scoped lang="less">
+input[aria-hidden=true] {
+    display: none !important;
+}
+
+// 提示信息
+.tips {
+    margin: 30px;
+    background-color: #e9ecf9;
+    border-radius: 11px;
+    .tipsIcon {
+        margin: 10px 15px;
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        background: url("../../assets/advertise/Info Circle.png") no-repeat;
+        vertical-align: middle;
+    }
+    .tipsText {
+        font-size: 14px;
+        color: #666666;
+    }
+}
+
+// 头部
+.title {
+    margin: 30px 30px 20px 30px;
+    padding: 30px 30px 40px 30px;
+    background-color: #fff;
+    border-radius: 20px 20px 20px 20px;
+    border: 1px solid #E9EDF7;
+    .left {
+        float: left;
+    }
+    .right {
+        float: right;
+    }
+    .searchBox {
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 80%;
+        }
+
+        .searchTitle {
+            padding-bottom: 10px;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 14px;
+            color: #999999;
+            line-height: 16px;
+        }
+
+        .el-select {
+            width: 100%;
+            display: inline-block;
+            position: relative;
+        }
+    }
+
+
+    .btnList {
+        float: right;
+        padding-top: 28px;
+
+        button {
+            height: 38px;
+            border: none;
+            border-radius: 8px;
+            padding: 0 30px;
+        }
+
+        .search {
+            background-color: #5570f1;
+            color: #fff;
+            margin-right: 20px;
+        }
+
+        .reset {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 16px;
+            color: #333333;
+            background: #F5F7FB;
+            border-radius: 8px 8px 8px 8px;
+            border: 1px solid rgba(85, 112, 241, 0.11);
+        }
+    }
+}
+
+.layerBox {
+    padding: 30px 20px;
+    position: relative;
+
+    .btn {
+        position: absolute;
+        top: 30px;
+        right: 20px;
+        height: 38px;
+        color: #fff;
+        background-color: #5570f1;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 28px 9px;
+        box-sizing: border-box;
+    }
+
+    .listBtnBox {
+        justify-content: left;
+    }
+
+
+    .listDeleteBtn,
+    .listEditBtn,
+    .listLookBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 20px;
+        width: 76px;
+        height: 36px;
+        line-height: 36px;
+    }
+
+
+    .listLookBtn {
+        text-align: center;
+        border-radius: 8px;
+        cursor: pointer;
+        color: #55b5f1;
+        background-color: rgba(85, 181, 241, 0.16);
+
+        >i {
+            padding-right: 8px;
+        }
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-input--medium,
+    ::v-deep .el-form-item__label {
+        line-height: 36px;
+        font-size: 16px;
+    }
+}
+
+// 弹出层内容
+.dialogText {
+    margin: 0 7px 0 3px;
+    padding-bottom: 1px;
+    padding: 30px 60px 1px 20px;
+    background-color: #f5f7fb;
+
+    .adImage {
+        width: 140px;
+        height: 140px;
+        line-height: 210px;
+        border-radius: 12px;
+        border: 1px solid rgba(85, 112, 241, 0.11);
+
+        img {
+            width: 140px;
+            height: 80px;
+        }
+    }
+
+
+
+    ::v-deep .avatar {
+        width: 140px;
+        height: auto;
+    }
+
+    .price {
+        ::v-deep .el-input {
+            width: 29%;
+        }
+    }
+
+    .example {
+        font-family: Microsoft YaHei;
+        color: #5570F1;
+    }
+
+    .el_btnList {
+        margin-right: 15px;
+        margin-top: 20px;
+    }
+
+    //日期时间选择器的宽
+    ::v-deep .el-date-editor.el-input {
+        width: 48%;
+    }
+
+    ::v-deep .el-button+.el-button {
+        margin-left: 0px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+}
+
+// 弹出层按钮
+.dialogBtn {
+    text-align: center;
+    margin: 50px auto 20px;
+
+    button {
+        width: 184px;
+        padding: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        border: none;
+        border-radius: 12px 12px 12px 12px;
+    }
+
+    // 取消
+    .cancel {
+        color: #333333;
+        background-color: #f5f7fb;
+        border: 2px solid rgba(85, 112, 241, 0.11);
+    }
+
+    // 提交
+    .submit {
+        color: #fff;
+        background-color: #5570F1;
+        margin-left: 40px;
+    }
+}
+
+//审核弹出框
+.radioGroup {
+    ::v-deep .el-form-item {
+        margin-top: 40px;
+        margin-bottom: 0;
+    }
+}
+
+.graph {
+    background-color: #f5f7fb;
+    padding: 60px 100px;
+    overflow: hidden;
+
+    li {
+        float: left;
+    }
+
+    >li:first-child {
+        margin-right: 100px;
+    }
+}
+
+.dialog-footer {
+    margin: 0 auto;
+}
+
+.titleWidth {
+//   width: 600px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+::v-deep.el-cascader{
+    width: 100%;
+}
+</style>

src/views/template/page/pageArticle.vue

@@ -9,13 +9,18 @@
       <menuSector />
     </div>
     <!-- 无内容占位符 -->
-    <div :class="['FixedMainModuleBox', { FixedMainModuleBoxBorder: this.$store.state.template.previewStatus==false }]" v-if="this.$store.state.template.pageData.article.length == 0">
+    <!-- <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>
+    </div> -->
     <!--使用gridKey来强制更新视图-->
-    <div id="content">
+    <div 
+        id="content" 
+        class="canvasBox"
+    >
       <grid-layout 
+        :auto-size="true"
+        :class="this.$store.state.template.pageData.article.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
         ref="gridlayout"
         :layout="this.$store.state.template.pageData.article" 
         :layout.sync="this.$store.state.template.pageData.article"
@@ -43,8 +48,8 @@
               <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 v-if="item.type == 'adSector'" class="moduleBox">
+              <adSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
             </div>
             <!-- 5.焦点图模块 -->
             <div v-if="item.type == 'bannerSector'" class="moduleBox">
@@ -93,18 +98,24 @@ 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';//文章详情
+//顶部
+import headSector from '../style/sector/head/1.vue';
+//一级菜单导肮
+import menuSector from '../style/sector/menu/1.vue';
+//底部
+import footerSector from '../style/sector/foot/1.vue';
+//通栏组件
+//通栏广告
+import adSector from '../style/sector/body/ad/1200x90/1.vue';
+
+
+
+// import manyPictureSector from '../style/sector/6.vue';//多图
+// import commentSector from '../style/sector/7.vue';//评论
+// import listSector from '../style/sector/8.vue';//文章列表
+// import onlyImgSector from '../style/sector/9.vue';//纯图片组合
+// import friendShipLinkSector from '../style/sector/10.vue';//友情链接
+// import mainArticle from '../style/sector/12.vue';//文章详情
 //自助建站组件 end------------------------------------------------------------>
 
 
@@ -115,15 +126,14 @@ export default {
     //板块组件 style1
     headSector,
     menuSector,
-    imgTitleSector,
-    bannerSector,
-    manyPictureSector,
-    commentSector,
-    listSector,
-    onlyImgSector,
-    friendShipLinkSector,
+    adSector,
+    // manyPictureSector,
+    // commentSector,
+    // listSector,
+    // onlyImgSector,
+    // friendShipLinkSector,
+    //mainArticle
     footerSector,
-    mainArticle
   },
   data() {
     return {
@@ -232,18 +242,18 @@ export default {
 .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;
-}
+// .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;
 }
@@ -300,10 +310,28 @@ export default {
     }
   }
 }
+
 .grid-layout {
   grid-gap: 0;
   row-gap: 0;
 }
+
+//画布调整
+.canvasBox {
+    margin-top: 20px;
+}
+
+.FixedMainModuleBox {
+  min-height: 450px;
+  background-color: #fff;
+  background: url('../../../assets/template/creat.png') no-repeat center center;
+}
+
+.FixedMainModuleBoxAuto {
+  min-height: 450px;
+  background-color: #fff;
+}
+
 //栅格布局 end------------------------------------------------------------> 
 //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
 ::v-deep .custom-form-item > .el-form-item__label {

src/views/template/page/pageIndex.vue

@@ -1,316 +1,380 @@
 <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.index.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.index" 
-        :layout.sync="this.$store.state.template.pageData.index"
-        :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.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>
-    <div class="FixedModuleBoxBottom">
-      <!-- 3.页尾模块 -->
-      <footerSector />
+    <div>
+        <!-- 全局组件：页头 -->
+        <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus == false }]">
+            <headSector />
+        </div>
+        <!-- 全局组件：导航 -->
+        <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来强制更新视图-->
+        <div 
+            id="content" 
+            class="canvasBox"
+        >
+            <grid-layout 
+                :auto-size="true"
+                :class="this.$store.state.template.pageData.index.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
+                ref="gridlayout" 
+                :layout="this.$store.state.template.pageData.index"
+                :layout.sync="this.$store.state.template.pageData.index" 
+                :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.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>
+                        <!-- 1.广告通栏 -->
+                        <div v-if="item.type == 'adSector'" class="moduleBox">
+                            <adSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+                         <!-- 2.头条通栏 -->
+                         <div v-if="item.type == 'headLineSector'" class="moduleBox">
+                            <headLineSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+                        <!-- 3.焦点图通栏 -->
+                        <div v-if="item.type == 'bannerSector'" class="moduleBox">
+                            <bannerSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+                        <!-- 4.新闻多图组合1 -->
+                        <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
+                            <manyPictureSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+                        <!-- 5.新闻多图组合2 -->
+                        <div v-if="item.type == 'commentSector'" class="moduleBox">
+                            <commentSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+                        <!-- 6.新闻多图组合3 -->
+                        <div v-if="item.type == 'listSector'" class="moduleBox">
+                            <listSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+                        <!-- 7.带广告新闻组合 -->
+                        <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
+                            <onlyImgSector :dataSort="item.dataSort" :id="item.i" :y="item.y" />
+                        </div>
+                    </div>
+                </grid-item>
+            </grid-layout>
+        </div>
+
+        <!-- 全局组件：页尾 -->
+        <div class="FixedModuleBoxBottom">
+            <footerSector />
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 //页面公用组件 start------------------------------------------------------------>
 //引入公用样式
 import '@/styles/global.less';
-import {GridLayout, GridItem} from "vue-grid-layout";
-//页面公用组件 end------------------------------------------------------------>
+import { GridLayout, GridItem } from "vue-grid-layout";
+//1.页面公用组件 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------------------------------------------------------------>
+//引入自助建站组件 start------------------------------------------------------------>
+//全局组件
+//顶部
+import headSector from '../style/sector/head/1.vue';
+//一级菜单导肮
+import menuSector from '../style/sector/menu/1.vue';
+//底部
+import footerSector from '../style/sector/foot/1.vue';
+//通栏组件 开始：
+//通栏广告
+import adSector from '../style/sector/body/ad/1200x90/1.vue';
+//首页头条
+import headLineSector from '../style/sector/body/index/headLine/1200x140/1.vue';
+//焦点图
+import bannerSector from '../style/sector/body/index/banner/1200x410/1.vue';
+//新闻图文组合1
+import manyPictureSector from '../style/sector/body/index/list/1200x470/1.vue';
+//新闻图文组合2
+import commentSector from '../style/sector/body/index/list/1200x470/2.vue';
+//新闻图文组合3
+import listSector from '../style/sector/body/index/list/1200x980/1.vue';
+//带广告图文组合
+import onlyImgSector from '../style/sector/body/index/list/1200x480/1.vue';
+//2.引入自助建站组件 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------------------------------------------------------------>
-    }
-  },
-  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
+    components: {
+        GridLayout,//画布
+        GridItem,//画布组件
+        headSector,//全局页头
+        menuSector,//全局导航
+        adSector,//通栏广告
+        headLineSector,//首页头条
+        bannerSector,//焦点图
+        manyPictureSector,//新闻图文组合1
+        commentSector,//新闻图文组合2
+        listSector,//新闻图文组合3
+        onlyImgSector,
+        footerSector
+    },
+    data() {
+        return {
+            //0.全局配置 start------------------------------------------------------------>
+            windowStatus: false,
+            rowHeight: 10,
+            //0.全局配置 end------------------------------------------------------------>
+            //1.编辑模块 start------------------------------------------------------------>
+            formLabelWidth: '120px',
+            editModule: "",//待编辑的模块
+            //1.编辑模块 end------------------------------------------------------------>
         }
-      });
     },
-    //0.2下一步
-    gotoList(){
-      this.$router.push({
-        path: '/templateList'
-      });
+    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);
     },
-    //0.全局操作 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.模块操作 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 ------------------------------------------------------------>
     }
-    //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;
+    width: 150px;
+    text-align: center;
+    background: #fdd;
+    border: 1px solid black;
+    margin: 10px 0;
+    padding: 10px;
 }
+
 //模块 start------------------------------------------------------------> 
 .sectorBorder {
-  border: 2px dashed #eee;
+    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;
+    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;
+    border: 2px dashed #eee;
 }
+
 //固定的模块
 .FixedModuleBox {
-  width: 100%;
-  margin-bottom: 20px;
-  //border: 2px dashed #eee;
+    width: 100%;
+    //margin-bottom: 20px;
+    //border: 2px dashed #eee;
 }
+
 .FixedModuleBoxBottom {
-  width: 100%;
+    width: 100%;
 }
+
 .FixedMainModuleBox {
-  width: 100%;
-  font-size: 18px;
-  color: #999;
-  text-align: center;
-  img {
-    margin-bottom: 20px;
-  }
-  padding: 100px;
-  //background: #F5F7FB;
-  margin-bottom: 20px;
+    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;
+    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;
-      }
+    background-color: #fff;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+
+    .grid-tools-menu {
+        position: absolute;
+        top: 0;
+        right:10px;
+        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;
+            border: 2px dashed #999;
+            border-radius: 8px;
+            background-color: #fff1cc;
+            // 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;
+    grid-gap: 0;
+    row-gap: 0;
+}
+
+//画布调整
+.canvasBox {
+    margin-top: 20px;
 }
+
+.FixedMainModuleBox {
+  min-height: 450px;
+  background-color: #fff;
+  background: url('../../../assets/template/creat.png') no-repeat center center;
+}
+
+.FixedMainModuleBoxAuto {
+  min-height: 450px;
+  background-color: #fff;
+}
+
+//占位元素颜色
+::v-deep .vue-grid-placeholder {
+  background: #ccc !important;
+  opacity: 0.3;
+}
+
 //栅格布局 end------------------------------------------------------------> 
 //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
-::v-deep .custom-form-item > .el-form-item__label {
-  line-height: 140px !important;
+::v-deep .custom-form-item>.el-form-item__label {
+    line-height: 140px !important;
 }
+
 ::v-deep .custom-textarea .el-textarea__inner {
-  resize: none; /* 禁止用户拖拽调整大小 */
+    resize: none;
+    /* 禁止用户拖拽调整大小 */
 }
+
 ::v-deep .custom-align-right .el-form-item__label {
-  text-align: right; /* 设置标签文字右对齐 */
+    text-align: right;
+    /* 设置标签文字右对齐 */
 }
+
 ::v-deep .shadowBox .el-button--mini.is-circle {
-  border-radius: 50% !important;
+    border-radius: 50% !important;
 }
-//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
-</style>
+
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>

src/views/template/page/pageList.vue

@@ -1,306 +1,354 @@
 <template>
-  <div>
-    <!-- 1.页头板块 -->
-    <div :class="['FixedModuleBox', { sectorBorder: this.$store.state.template.previewStatus==false }]">
-      <headSector />
+    <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" 
+            class="canvasBox"
+        >
+            <grid-layout 
+            :auto-size="true"
+                :class="this.$store.state.template.pageData.list.length == 0 ? 'FixedMainModuleBox' : 'FixedMainModuleBoxAuto'"
+                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 == 'adSector'" class="moduleBox">
+                            <adSector :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>
-    <!-- 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";
+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';//主文章列表
+//顶部
+import headSector from '../style/sector/head/1.vue';
+//一级菜单导肮
+import menuSector from '../style/sector/menu/1.vue';
+//底部
+import footerSector from '../style/sector/foot/1.vue';
+//通栏组件
+//通栏广告
+import adSector from '../style/sector/body/ad/1200x90/1.vue';
+
+
+
+// import manyPictureSector from '../style/sector/6.vue';//多图
+// import commentSector from '../style/sector/7.vue';//评论
+// import listSector from '../style/sector/8.vue';//文章列表
+// import onlyImgSector from '../style/sector/9.vue';//纯图片组合
+// import friendShipLinkSector from '../style/sector/10.vue';//友情链接
+// import mainListSector from '../style/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
+    components: {
+        GridLayout,
+        GridItem,
+        //板块组件 style1
+        headSector,
+        menuSector,
+        adSector,
+        
+        // manyPictureSector,
+        // commentSector,
+        // listSector,
+        // mainListSector,
+        // onlyImgSector,
+        // friendShipLinkSector,
+        footerSector
+    },
+    data() {
+        return {
+            //0.全局配置 start------------------------------------------------------------>
+            windowStatus: false,
+            rowHeight: 10,
+            //0.全局配置 end------------------------------------------------------------>
+            //1.编辑模块 start------------------------------------------------------------>
+            formLabelWidth: '120px',
+            editModule: "",//待编辑的模块
+            //1.编辑模块 end------------------------------------------------------------>
         }
-      });
     },
-    //0.2下一步
-    gotoList(){
-      this.$router.push({
-        path: '/templateList'
-      });
+    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);
     },
-    //0.全局操作 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.模块操作 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 ------------------------------------------------------------>
     }
-    //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;
+    width: 150px;
+    text-align: center;
+    background: #fdd;
+    border: 1px solid black;
+    margin: 10px 0;
+    padding: 10px;
 }
+
 //模块 start------------------------------------------------------------> 
 .sectorBorder {
-  border: 2px dashed #eee;
+    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;
+    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;
+    border: 2px dashed #eee;
 }
+
 //固定的模块
 .FixedModuleBox {
-  width: 100%;
-  margin-bottom: 20px;
-  //border: 2px dashed #eee;
+    width: 100%;
+    margin-bottom: 20px;
+    //border: 2px dashed #eee;
 }
+
 .FixedModuleBoxBottom {
-  width: 100%;
+    width: 100%;
 }
+
 .FixedMainModuleBox {
-  width: 100%;
-  font-size: 18px;
-  color: #999;
-  text-align: center;
-  img {
+    width: 100%;
+    font-size: 18px;
+    color: #999;
+    text-align: center;
+
+    img {
+        margin-bottom: 20px;
+    }
+
+    padding: 100px;
+    //background: #F5F7FB;
     margin-bottom: 20px;
-  }
-  padding: 100px;
-  //background: #F5F7FB;
-  margin-bottom: 20px;
 }
+
 .FixedMainModuleBoxBorder {
-  border: 2px dashed #eee;
+    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;
-      }
+    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;
+    grid-gap: 0;
+    row-gap: 0;
 }
+
+//画布调整
+.canvasBox {
+    margin-top: 20px;
+}
+
+.FixedMainModuleBox {
+  min-height: 450px;
+  background-color: #fff;
+  background: url('../../../assets/template/creat.png') no-repeat center center;
+}
+
+.FixedMainModuleBoxAuto {
+  min-height: 450px;
+  background-color: #fff;
+}
+
 //栅格布局 end------------------------------------------------------------> 
 //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
-::v-deep .custom-form-item > .el-form-item__label {
-  line-height: 140px !important;
+::v-deep .custom-form-item>.el-form-item__label {
+    line-height: 140px !important;
 }
+
 ::v-deep .custom-textarea .el-textarea__inner {
-  resize: none; /* 禁止用户拖拽调整大小 */
+    resize: none;
+    /* 禁止用户拖拽调整大小 */
 }
+
 ::v-deep .custom-align-right .el-form-item__label {
-  text-align: right; /* 设置标签文字右对齐 */
+    text-align: right;
+    /* 设置标签文字右对齐 */
 }
+
 ::v-deep .shadowBox .el-button--mini.is-circle {
-  border-radius: 50% !important;
+    border-radius: 50% !important;
 }
-//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
-</style>
+
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/</style>

src/views/template/public/atWork.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="atWorkBox">
+        <div class="atWorkStyle1" v-if="dataStyle == 1" :style="{width: dataWidth + 'px', height: dataHeight + 'px'}">
+            <div class="atWorkImgBox">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1749025503443518.png" alt="该组件开发中">
+                <div class="atWorkTitle">此样式开发中，暂不可用！</div>
+            </div>
+        </div>
+        <div class="atWorkStyle2" v-if="dataStyle == 2" :style="{width: dataWidth + 'px', height: dataHeight + 'px'}">
+            <div class="atWorkImgBox">
+                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1749025503443518.png" alt="该组件开发中">
+                <div class="atWorkTitle">此样式开发中，暂不可用！</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        dataStyle: {
+            type: Number,
+            default: 0
+        },
+        dataWidth: {
+            type: Number,
+            default: 0
+        },
+        dataHeight: {
+            type: Number,
+            default: 0 
+        },
+    },
+    data() {
+        return {};
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .atWorkBox {
+        width: 100%;
+        height: 100%;
+        background: #fff;
+        .atWorkStyle1 {
+            display:flex;
+            align-items: center;
+            justify-content: center;
+            img {
+                display: block;
+                margin: 0 auto;
+                margin-bottom: 20px;
+            }
+            .atWorkTitle {
+                font-size: 16px;
+                color: #999;
+                font-weight: bold;
+                text-align: center;
+            }
+        }
+        .atWorkStyle2 {
+            display:flex;
+            align-items: center;
+            justify-content: center;
+            .atWorkImgBox {
+                display:flex;
+                align-items: center;
+                justify-content: center;
+            }
+            img {
+                display: block;
+                margin-right: 20px;
+            }
+            .atWorkTitle {
+                font-size: 16px;
+                color: #999;
+                font-weight: bold;
+                text-align: center;
+            }
+        }
+    }
+</style>

src/views/template/public/checkWindow.vue

@@ -0,0 +1,330 @@
+<template>
+    <div class="editWindowBox">
+        <div class="checkWindowBoxContent">
+            <div class="checkWindowBoxContentItem">
+                <div class="cWBStatusContentError" v-if="this.$store.state.template.pageDataStatus.index.cid>0 || this.$store.state.template.pageDataStatus.index.ad>0">
+                    <div class="cWBTitle">首页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-close"></span>
+                    </div>
+                    <div class="cWBStatus">未通过</div>
+                    <div class="cWBStatusContent">
+                        <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.index.cid}}<span>个</span></div>
+                            <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                            <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.index.ad}}<span>个</span></div>
+                            <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                            <div class="cWBStatusContentItem">{{this.$store.state.template.pageDataStatus.index.adPrice}}<span>个</span></div>
+                    </div>
+                </div>
+                <div class="cWBStatusContentSucess" v-else>
+                    <div class="cWBTitle">首页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-check"></span>
+                    </div>
+                    <div class="cWBStatus">已通过</div>
+                    <div class="cWBStatusContent">
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                    </div>
+                </div>
+            </div>
+            <div class="checkWindowBoxContentItem">
+                <div class="cWBStatusContentSucess">
+                    <div class="cWBTitle">频道页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-check"></span>
+                    </div>
+                    <div class="cWBStatus">已通过</div>
+                    <div class="cWBStatusContent">
+                        <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                    </div>
+                </div>
+            </div>
+            <div class="checkWindowBoxContentItem">
+                <div class="cWBStatusContentSucess">
+                    <div class="cWBTitle">列表页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-check"></span>
+                    </div>
+                    <div class="cWBStatus">已通过</div>
+                    <div class="cWBStatusContent">
+                        <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                    </div>
+                </div>
+            </div>
+            <div class="checkWindowBoxContentItem">
+                <div class="cWBStatusContentSucess">
+                    <div class="cWBTitle">详情页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-check"></span>
+                    </div>
+                    <div class="cWBStatus">已通过</div>
+                    <div class="cWBStatusContent">
+                        <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                    </div>
+                </div>
+            </div>
+            <div class="checkWindowBoxContentItem">
+                <div class="cWBStatusContentSucess">
+                    <div class="cWBTitle">搜索页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-check"></span>
+                    </div>
+                    <div class="cWBStatus">已通过</div>
+                    <div class="cWBStatusContent">
+                        <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                    </div>
+                </div>
+            </div>
+            <div class="checkWindowBoxContentItem">
+                <div class="cWBStatusContentSucess">
+                    <div class="cWBTitle">底部列表页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-check"></span>
+                    </div>
+                    <div class="cWBStatus">已通过</div>
+                    <div class="cWBStatusContent">
+                        <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                    </div>
+                </div>
+            </div>
+            <div class="checkWindowBoxContentItem">
+                <div class="cWBStatusContentSucess">
+                    <div class="cWBTitle">底部详情页</div>
+                    <div class="cWBIcon">
+                        <span class="el-icon-check"></span>
+                    </div>
+                    <div class="cWBStatus">已通过</div>
+                    <div class="cWBStatusContent">
+                        <!-- <div>板块数量：{{this.$store.state.template.pageDataStatus.index.sector}}</div> -->
+                        <div class="cWBStatusContentTitle">未选择导航</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位名称</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                        <div class="cWBStatusContentTitle">缺少广告位价格</div>
+                        <div class="cWBStatusContentItem">0<span>个</span></div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <div class="editWindowBoxContent">
+            <div class="editWebsiteTemplateJsonBox">
+                <pre>{{this.$store.state.template.webSiteData}}</pre>
+            </div>
+        </div>
+        <div class="editWindowBoxFooter">
+            <el-button 
+                type="primary" 
+                @click="submitPageJson"
+                :disabled="this.$store.state.template.pageDataStatus.index.cid>0 || this.$store.state.template.pageDataStatus.index.ad>0"
+            >
+                保存模板
+            </el-button>
+            <el-button type="info" @click="closeEditWindow">返回编辑</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+import Vue from 'vue';  // 导入 Vue
+//监听vuex中的值
+export default {
+    props: {
+
+    },
+    data() {
+        return {
+
+        }
+    },
+    computed: {
+       
+    },
+    methods: {
+        closeEditWindow(){
+            this.$store.commit('template/closeEditWebsiteTemplateJsonWindow');
+        },
+        submitPageJson(){
+            let data = {
+                adPlaceList:[]
+            }
+            console.log(this.$store.state.template.webSiteData)
+            //第一步:获得全局的顶部广告
+            data.adPlaceList.push(this.$store.state.template.webSiteData.ad.top);
+            if(this.$store.state.template.webSiteData.ad.index.length>0){
+                for(let item of this.$store.state.template.webSiteData.ad.index){
+                    data.adPlaceList.push(item);
+                }
+            }
+            if(this.$store.state.template.webSiteData.ad.class.length>0){}
+            if(this.$store.state.template.webSiteData.ad.list.length>0){}
+            if(this.$store.state.template.webSiteData.ad.article.length>0){}
+            if(this.$store.state.template.webSiteData.ad.search.length>0){}
+            if(this.$store.state.template.webSiteData.ad.aloneList.length>0){}
+            if(this.$store.state.template.webSiteData.ad.aloneArticle.length>0){}
+
+            console.log(data)
+            this.$store.dispatch('template/addTwinAdPlace',data).then(res=>{
+                console.log(res)
+            });
+        }
+    },
+    mounted() { 
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+    .editWindowBox {
+        .editWindowBoxContent {
+            width: 100%;
+            padding: 20px 0;
+        }
+        .editWindowBoxFooter {
+            text-align: right;
+        }
+        .editWebsiteTemplateJsonBox {
+            border:1px solid #dfe4ed;
+        }
+    }
+
+    //提交数据展示窗口
+    .editWebsiteTemplateJsonBox {
+        height: 300px;
+        overflow-y: auto;
+    }
+    .checkWindowBoxContent {
+        display: flex;
+        align-items: flex-start;
+        height: 260px;
+        .checkWindowBoxContentItem {
+            width:120px;
+            border:2px dashed #eee;
+            margin-right: 10px;
+            box-sizing: border-box;
+            .cWBStatusContentSucess {
+                background: #67C23A;
+                .cWBTitle {
+                    text-align: center;
+                    font-size: 18px;
+                    padding: 10px 0;
+                    color: #fff;   
+                }
+                .cWBIcon {
+                    font-size: 30px;
+                    text-align: center;
+                    font-weight: bold;
+                    margin-bottom: 5px;
+                    color:#fff;
+                }
+                .cWBStatusContent {
+                    text-align: center;
+                    padding-top:10px;
+                    background: #fff;
+                    .cWBStatusContentTitle {
+                        font-size: 14px;
+                        color: #666;
+                    }
+                    .cWBStatusContentItem {
+                        margin-bottom: 5px;
+                        font-size: 24px;
+                        color:#67C23A;
+                        span {
+                            font-size: 12px;
+                        }
+                    }
+                }
+            }
+            .cWBStatusContentError {
+                background: #F56C6C;
+                .cWBTitle {
+                    text-align: center;
+                    font-size: 18px;
+                    padding: 10px 0;
+                    color: #fff;               
+                }
+                .cWBIcon {
+                    font-size: 30px;
+                    text-align: center;
+                    font-weight: bold;
+                    margin-bottom: 5px;
+                    color:#fff;
+                }
+                .cWBStatusContent {
+                    text-align: center;
+                    padding-top:10px;
+                    background: #fff;
+                    .cWBStatusContentTitle {
+                        font-size: 14px;
+                        color: #666;
+                    }
+                    .cWBStatusContentItem {
+                        font-size: 24px;
+                        color:#F56C6C;
+                        margin-bottom: 5px;
+                        span {
+                            font-size: 12px;
+                            color:#666;
+                        }
+                    }
+                }
+            }
+            .cWBStatus {
+                text-align: center;
+                padding-bottom: 10px;
+                font-size: 18px;
+                color:#fff;
+            }
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+
+    //表单微调 start------------------------------------------------------------>
+    ::v-deep .editWindowBoxContent .el-cascader{
+        width: 100% !important;
+    }
+    ::v-deep .editWindowBoxContent .el-select--medium {
+        width: 100% !important;
+    }
+    //表单微调 end------------------------------------------------------------>
+</style>

src/views/template/public/componentWindow.vue

@@ -1,232 +1,421 @@
 <template>
-  <div class="componentWindowBox">
-    <!--开发助手-->
-   <div class="testAssistant">
-      <div class="testAssistantTitle">
-        代码助手：
-      </div>
-      <div class="testAssistantContent">
-        <div class="testAssistantContentItem">
-          <div>当前板块id:</div>
-          <div>{{this.$store.state.template.editSectorId}}</div>
-        </div>
-        <div class="testAssistantContentItem">
-          <div>当前板块所在的页面:</div>
-          <div v-if="this.$store.state.template.pageStatus == 1">首页</div>
-          <div v-if="this.$store.state.template.pageStatus == 2">分类页</div>
-          <div v-if="this.$store.state.template.pageStatus == 3">列表页</div>
-          <div v-if="this.$store.state.template.pageStatus == 4">详情页</div>
-          <div v-if="this.$store.state.template.pageStatus == 5">搜索页</div>
-          <div v-if="this.$store.state.template.pageStatus == 6">自定义列表页</div>
-          <div v-if="this.$store.state.template.pageStatus == 7">自定义详情页</div>
-        </div>
-        <div class="testAssistantContentItem">
-          <div>当前组件在此板块中的位置:</div>
-          <div>{{this.$store.state.template.editComponentSort}}</div>
-        </div>
-        <div class="testAssistantContentItem">
-          <div>当前板块在Json数据中的位置:</div>
-          <div>{{this.$store.state.template.editDataSort}}</div>
-        </div>
-        <!--base0.0.1 如果展示原组件样式 会导致删除的时候 找不到content的数据非常奇怪 但是什么都不影响-->
-        <!-- <div class="testAssistantContentItem"><span>原组件样式:</span>{{this.$store.state.template.pageData.index[this.$store.state.template.editDataSort].content.componentList[this.$store.state.template.editComponentSort].component_style}}</div> -->
-        <div class="testAssistantContentItem">
-          <div>当前组件样式:</div>
-          <div>{{this.$store.state.template.editComponentStyle}}</div>
-        </div>
-      </div>
-    </div>
-    <div class="componentStyleBox">
-      <div class="componentStyleBoxContent">
-        <!--1.网站核心大标题组件 start---------------------------------------->
-        <div v-if="this.$store.state.template.editComponentType == 1" class="componentScrollBox">
-          <table>
-            <tr>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                  <img src="@/assets/template/component/mainStyle1.png"/>
+    <div class="componentWindowBox">
+        <!--开发助手-->
+        <!-- <div class="testAssistant">
+            <div class="testAssistantTitle">
+                代码助手：
+            </div>
+            <div class="testAssistantContent">
+                <div class="testAssistantContentItem">
+                    <div>当前板块id:</div>
+                    <div>{{this.$store.state.template.editSectorId}}</div>
                 </div>
-              </td>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
-                  <img src="@/assets/template/component/mainStyle2.png"/>
+                <div class="testAssistantContentItem">
+                    <div>当前板块所在的页面:</div>
+                    <div v-if="this.$store.state.template.pageStatus == 1">首页</div>
+                    <div v-if="this.$store.state.template.pageStatus == 2">分类页</div>
+                    <div v-if="this.$store.state.template.pageStatus == 3">列表页</div>
+                    <div v-if="this.$store.state.template.pageStatus == 4">详情页</div>
+                    <div v-if="this.$store.state.template.pageStatus == 5">搜索页</div>
+                    <div v-if="this.$store.state.template.pageStatus == 6">底部列表页</div>
+                    <div v-if="this.$store.state.template.pageStatus == 7">底部详情页</div>
                 </div>
-              </td>
-            </tr>
-          </table>
-        </div>
-        <!--1.网站核心大标题组件 end---------------------------------------->
-        <!--2.板块文字标题 start---------------------------------------->
-        <div v-if="this.$store.state.template.editComponentType == 2" class="componentScrollBox">
-          <table>
-            <tr>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                  <img src="@/assets/template/component/title1.png"/>
-                </div>
-              </td>
-            </tr>
-          </table>
-        </div>
-        <!--2.板块文字标题 end---------------------------------------->
-        <!--3.广告组件 start---------------------------------------->
-        <div v-if="this.$store.state.template.editComponentType == 3" class="componentScrollBox">
-          <table>
-            <tr>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                  <img src="@/assets/template/component/style1imgTitle.png"/>
+                <div class="testAssistantContentItem">
+                    <div>当前组件在此板块中的位置:</div>
+                    <div>{{this.$store.state.template.editComponentSort}}</div>
                 </div>
-              </td>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
-                  <img src="@/assets/template/component/style2imgTitle.png"/>
+                <div class="testAssistantContentItem">
+                    <div>当前板块在Json数据中的位置:</div>
+                    <div>{{this.$store.state.template.editDataSort}}</div>
                 </div>
-              </td>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
-                  <img src="@/assets/template/component/style3imgTitle.png"/>
+                <div class="testAssistantContentItem">
+                    <div>当前组件样式:</div>
+                    <div>{{this.$store.state.template.editComponentStyle}}</div>
                 </div>
-              </td>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
-                  <img src="@/assets/template/component/style4imgTitle.png"/>
-                </div>
-              </td>
-            </tr>
-          </table>
-        </div>
-        <!--4.banner组件 start---------------------------------------->
-        <div v-if="this.$store.state.template.editComponentType == 4" class="componentScrollBox">
-          <table>
-            <tr>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                  <img src="@/assets/template/component/banner_pic1.png"/>
+            </div>
+        </div> -->
+        <div class="componentStyleBox">
+            <div class="componentStyleBoxContent">
+                <!--1.头条组件 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 1" class="componentScrollBoxStyle1">
+                    <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748914467583559.png"/>
+                        <div class="componentScrollBoxItemTitle">大标题带三个子标题</div>
+                    </div>
+                    <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748935989462533.png"/>
+                        <div class="componentScrollBoxItemTitle">大标题带二个子标题</div>
+                    </div>
+                    <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748936908630352.png"/>
+                        <div class="componentScrollBoxItemTitle">大标题一个子标题</div>
+                    </div>
+                    <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748936918177835.png"/>
+                        <div class="componentScrollBoxItemTitle">只显示大标题</div>
+                    </div>
+                    <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 5 ? 'active' : '']" @click="selectUseStyleNumber(5)">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748937475668303.png"/>
+                        <div class="componentScrollBoxItemTitle">滚动显示三个大标题</div>
+                    </div>
+                    <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 6 ? 'active' : '']" @click="selectUseStyleNumber(6)">
+                        <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748937484282250.png"/>
+                        <div class="componentScrollBoxItemTitle">滚动显示两个大标题</div>
+                    </div>
                 </div>
-              </td>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
-                  <img src="@/assets/template/component/banner_pic2.png"/>
+                <!--1.头条组件 end---------------------------------------->
+
+                <!--2.焦点图组件 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 2" class="componentScrollBoxStyle2">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250604/174901939842760.jpg"/>
+                            <div class="componentScrollBoxItemTitle">底部显示当前页码</div>
+                        </div>
+                    </div>
                 </div>
-              </td>
-            </tr>
-          </table>
-        </div>
-        <!--4.banner组件 end---------------------------------------->
-        <!--5.tabs start---------------------------------------->
-        <div v-if="this.$store.state.template.editComponentType == 5" class="componentScrollBox">
-          <table>
-            <tr>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                  <img src="@/assets/template/component/tabsList1.png"/>
+                <!--2.焦点图组件 end---------------------------------------->
+
+                <!--3.焦点图组件 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 3" class="componentScrollBoxStyle3">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250604/1749019582186582.jpg"/>
+                            <div class="componentScrollBoxItemTitle">主题色每组标题</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250604/1749019602825563.jpg"/>
+                            <div class="componentScrollBoxItemTitle">加粗每组标题</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250604/1749019612825652.jpg"/>
+                            <div class="componentScrollBoxItemTitle">主题色首行标题</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250604/1749019620385462.jpg"/>
+                            <div class="componentScrollBoxItemTitle">加粗首行标题</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 5 ? 'active' : '']" @click="selectUseStyleNumber(5)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250604/174901963225883.jpg"/>
+                            <div class="componentScrollBoxItemTitle">不加粗标题</div>
+                        </div>
+                    </div>
                 </div>
-              </td>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
-                  <img src="@/assets/template/component/tabsList2.png"/>
+                <!--3.焦点图组件 start---------------------------------------->
+
+                <!--4.两列布局新闻组件1 左侧 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 4" class="componentScrollBoxStyle2">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749102223295015.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧大图在上小图在下,右侧标题加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749102232438519.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧标题加粗,右侧大图在上小图在下</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749102631511603.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧小图在上大图在下,右侧标题加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749102640761677.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧标题加粗,右侧小图在上大图在下</div>
+                        </div>
+                    </div>
                 </div>
-              </td>
-            </tr>
-          </table>
-        </div>
-        <!--5.tabs end---------------------------------------->
-        <!--6.list列表组件 start---------------------------------------->
-        <div v-if="this.$store.state.template.editComponentType == 6" class="componentScrollBox">
-          <table>
-            <tr>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                  <img src="@/assets/template/component/list1.png"/>
+                <!--4.两列布局新闻组件1 左侧 end---------------------------------------->
+
+                <!--5.两列布局新闻组件1 右侧 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 5" class="componentScrollBoxStyle3">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749112729438904.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片,右侧标题灰色标记</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749113028559940.jpg"/>
+                            <div class="componentScrollBoxItemTitle">右侧图片,左侧标题灰色标记</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749113088790743.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片,右侧标题带主题色标记</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749113088790743.jpg"/>
+                            <div class="componentScrollBoxItemTitle">右侧图片,左侧标题带主题色标记</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 5 ? 'active' : '']" @click="selectUseStyleNumber(5)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749114491210881.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片,右侧标题带黑色标记</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 6 ? 'active' : '']" @click="selectUseStyleNumber(6)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749115022871339.jpg"/>
+                            <div class="componentScrollBoxItemTitle">右侧图片,左侧标题带黑色标记</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 7 ? 'active' : '']" @click="selectUseStyleNumber(7)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749115161954033.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片,左侧标题不带标记</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 8 ? 'active' : '']" @click="selectUseStyleNumber(8)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749115171142913.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片,左侧标题不带标记</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 9 ? 'active' : '']" @click="selectUseStyleNumber(9)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/174911518234957.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图文交错摆放样式1</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 10 ? 'active' : '']" @click="selectUseStyleNumber(10)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749115193168545.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图文交错摆放样式2</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 11 ? 'active' : '']" @click="selectUseStyleNumber(11)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250605/1749115201985672.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图文交错摆放样式3</div>
+                        </div>
+                    </div>
                 </div>
-              </td>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
-                  <img src="@/assets/template/component/list2.png"/>
+                <!--5.两列布局新闻组件1 右侧 end---------------------------------------->
+
+                <!--6.两列布局新闻组件2 左侧 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 6" class="componentScrollBoxStyle2">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749176134863144.jpg"/>
+                            <div class="componentScrollBoxItemTitle">两列图文图片置顶</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749176145666694.jpg"/>
+                            <div class="componentScrollBoxItemTitle">两列图文图片置底</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749176153747911.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图文混合左上右下</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749176160202729.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图文混合右下左上</div>
+                        </div>
+                    </div>
                 </div>
-              </td>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
-                  <img src="@/assets/template/component/list3.png"/>
+                <!--6.两列布局新闻组件2 左侧 end---------------------------------------->
+
+                <!--7.两列布局新闻组件2 右侧 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 7" class="componentScrollBoxStyle3">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="	http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749178122927942.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在上，列表在下首标题加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749178130533785.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在下，列表在上首标题加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749178137907893.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在上，标题在下</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749178143998493.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在下，标题在上</div>
+                        </div>
+                    </div>
                 </div>
-              </td>
-            </tr>
-          </table>
-        </div>
-        <!--6.list列表组件 end---------------------------------------->
-        <!--7.staticHtml静态组件 start---------------------------------------->
-        <div v-if="this.$store.state.template.editComponentType == 7" class="componentScrollBox">
-          <table>
-            <tr>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                  <img src="@/assets/template/component/fivePicture.png"/>
+                <!--7.两列布局新闻组件2 右侧 end---------------------------------------->
+
+                <!--8.两列布局新闻组件3 左侧上半部分 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 8" class="componentScrollBoxStyle2">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749203040403256.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在左，列表灰色标识</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749203054268297.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片与文字混合，列表灰色标识</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250606/1749203136861391.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在右，列表灰色标识</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/png/20250606/1749203144218891.png"/>
+                            <div class="componentScrollBoxItemTitle">图片在左，列表主题色标识</div>
+                        </div>
+                    </div>
                 </div>
-              </td>
-            </tr>
-          </table>
-        </div>
-        <!--7.staticHtml静态组件 end---------------------------------------->
-        <!--8.表单组件 start---------------------------------------->
-        <div v-if="this.$store.state.template.editComponentType == 8" class="componentScrollBox">
-          <table>
-            <tr>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                  <img src="@/assets/template/component/form1.png"/>
+                <!--8.两列布局新闻组件3 左侧上半部分 end---------------------------------------->
+
+                <!--9.两列布局新闻组件3 左侧下半部分 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 9" class="componentScrollBoxStyle3">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749429181784621.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在上，列表标题加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749430114351294.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在下，列表标题加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749430122219615.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片与列表混合，标题加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749430130962786.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片在左，列表主题色标识</div>
+                        </div>
+                    </div>
                 </div>
-              </td>
-            </tr>
-          </table>
-        </div>
-        <!--8.表单组件 end---------------------------------------->
-        <!--9.友情链接组件 start---------------------------------------->
-        <div v-if="this.$store.state.template.editComponentType == 9" class="componentScrollBox">
-          <table>
-            <tr>
-              <td>
-                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
-                  <img src="@/assets/template/component/linkStyle1.png"/>
+                <!--9.两列布局新闻组件3 左侧下半部分 end---------------------------------------->
+
+                <!--10.两列布局新闻组件3 右侧部分 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 10" class="componentScrollBoxStyle4">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749430470981307.jpg"/>
+                            <div class="componentScrollBoxItemTitle">图片角标悬浮在上</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749430717156318.jpg"/>
+                            <div class="componentScrollBoxItemTitle">角标与左侧保持间距</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749430731348410.jpg"/>
+                            <div class="componentScrollBoxItemTitle">角标在左上角对齐</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749430739421252.jpg"/>
+                            <div class="componentScrollBoxItemTitle">角标与上方保持间距</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 5 ? 'active' : '']" @click="selectUseStyleNumber(5)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/174943074887033.jpg"/>
+                            <div class="componentScrollBoxItemTitle">角标置于左下角</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 6 ? 'active' : '']" @click="selectUseStyleNumber(6)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749430757268221.jpg"/>
+                            <div class="componentScrollBoxItemTitle">角标与右侧保持间距</div>
+                        </div>
+                    </div>
                 </div>
-              </td>
-            </tr>
-          </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"/>
+                <!--10.两列布局新闻组件3 右侧部分 end---------------------------------------->
+
+                <!--11.带广告图文组合 start---------------------------------------->
+                <div v-if="this.$store.state.template.editComponentType == 11" class="componentScrollBoxStyle2">
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749451127220319.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片新闻在上，右侧广告在下，加粗标题</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="selectUseStyleNumber(2)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749453960887626.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片新闻在下，右侧广告在下，加粗标题</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="selectUseStyleNumber(3)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749453969223756.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片新闻在下，右侧广告在上，加粗标题</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 4 ? 'active' : '']" @click="selectUseStyleNumber(4)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/174945397556612.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片新闻在上，右侧广告在下，不加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 5 ? 'active' : '']" @click="selectUseStyleNumber(5)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749453982118601.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片新闻在下，右侧广告在下，不加粗</div>
+                        </div>
+                    </div>
+                    <div class="componentScrollbigBog">
+                        <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 6 ? 'active' : '']" @click="selectUseStyleNumber(6)">
+                            <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250609/1749453996190138.jpg"/>
+                            <div class="componentScrollBoxItemTitle">左侧图片新闻在下，右侧广告在上，不加粗</div>
+                        </div>
+                    </div>
                 </div>
-              </td>
-            </tr>
-          </table>
+                <!--11.带广告图文组合 end---------------------------------------->
+
+            </div>
         </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 class="componentWindowBoxFooter">
+            <el-button type="info" @click="closeEditWindow">取消</el-button>
+            <el-button type="primary" @click="submitData">确定</el-button>
         </div>
-        <!--11.详情页-主文章详情 end---------------------------------------->
-      </div>
     </div>
-    <div class="componentWindowBoxFooter">
-      <el-button type="info" @click="closeEditWindow">取消</el-button>
-      <el-button type="primary" @click="submitData">确定</el-button>
-    </div>
-  </div>
 </template>
 
 <script>
@@ -266,46 +455,208 @@ export default {
 </script>
 
 <style scoped lang="less">
-  .componentWindowBox {
-    .componentStyleBox {
-      height: 220px;
-      margin-bottom: 20px;
-      overflow-x: auto;
-      overflow-y: hidden;
-      clear: both;
-      .componentScrollBox {
-        height: 200px;
-        display: flex; /* 使用 flex */
-        flex-wrap: wrap; /* 换行 */
-        .componentScrollBoxItem {
-          width: 200px;
-          height: 200px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          margin-right: 10px;
-          background: #F5F7FB;
-          border:1px solid #F5F7FB;
-          overflow: hidden;
-          img {
-            width: 200px;
-            display: block;
-          }
-          &:hover {
-            border:1px solid #19499F;
-            background: #e5e5ff;
-            cursor: pointer;
-          }
-          transition: all 0.3s;
+.componentWindowBoxFooter {
+    text-align: right;
+}
+
+//1.头条样式选择
+.componentStyleBox {
+    .componentStyleBoxContent {
+        height: 400px;
+        margin-bottom: 30px;
+        overflow-y: auto;
+        padding-right: 10px;
+
+        //样式 一行一个
+        .componentScrollBoxStyle1 {
+            .componentScrollBoxItem {
+                box-sizing: border-box;
+                cursor: pointer;
+                border:2px solid #fff;
+                padding: 8px;
+                background: #fff;
+                margin-bottom: 20px;
+                .componentScrollBoxItemTitle {
+                    text-align: center;
+                    font-size: 14px;
+                    color: #333;
+                    margin-top: 10px;
+                    font-weight: bold;
+                }
+                img {
+                    display: block;
+                    width: 100%;
+                }
+            }
+            .active {
+                border:2px dashed #5570F1;
+                padding: 8px;
+                background: #e5e5ff;
+                transition: all 0.5s;
+            }
         }
-        .active {
-          border:1px solid #19499F;
-          background: #e5e5ff;
+
+        //一行两个
+        .componentScrollBoxStyle2 {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            .componentScrollbigBog{
+                width: 50%;
+                box-sizing: border-box;
+                margin-bottom: 20px;
+                &:nth-child(odd) {
+                    padding-right: 10px;
+                }
+                &:nth-child(even) {
+                    padding-left: 10px;
+                }
+                .componentScrollBoxItem {
+                    width: 100%;
+                    border:2px solid #FFF;
+                    box-sizing: border-box;
+                    cursor: pointer;
+                    border:2px solid #fff;
+                    padding: 8px;
+                    background: #fff;
+                    .componentScrollBoxItemTitle {
+                        text-align: center;
+                        font-size: 14px;
+                        color: #333;
+                        margin-top: 10px;
+                        font-weight: bold;
+                    }
+                    img {
+                        display: block;
+                        width: 100%;
+                    }
+                }
+                .active {
+                    border:2px dashed #5570F1;
+                    padding: 8px;
+                    background: #e5e5ff;
+                    transition: all 0.5s;
+                }
+            }
+        }
+
+        //一行三个
+        .componentScrollBoxStyle3 {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 2%;  // 使用gap属性来控制元素之间的间距
+            .componentScrollbigBog{
+                width: 32%;
+                box-sizing: border-box;
+                margin-bottom: 20px;
+                .componentScrollBoxItem {
+                    width: 100%;
+                    border:2px solid #FFF;
+                    box-sizing: border-box;
+                    cursor: pointer;
+                    border:2px solid #fff;
+                    padding: 8px;
+                    background: #fff;
+                    .componentScrollBoxItemTitle {
+                        text-align: center;
+                        font-size: 14px;
+                        color: #333;
+                        margin-top: 10px;
+                        font-weight: bold;
+                    }
+                    img {
+                        display: block;
+                        width: 100%;
+                    }
+                }
+                .active {
+                    border:2px dashed #5570F1;
+                    padding: 8px;
+                    background: #e5e5ff;
+                    transition: all 0.5s;
+                }
+            }
+        }
+
+        //一行四个
+        .componentScrollBoxStyle4 {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 2%;  // 使用gap属性来控制元素之间的间距
+            .componentScrollbigBog{
+                width: 23%;
+                box-sizing: border-box;
+                margin-bottom: 20px;
+                .componentScrollBoxItem {
+                    width: 100%;
+                    border:2px solid #FFF;
+                    box-sizing: border-box;
+                    cursor: pointer;
+                    border:2px solid #fff;
+                    padding: 8px;
+                    background: #fff;
+                    .componentScrollBoxItemTitle {
+                        text-align: center;
+                        font-size: 14px;
+                        color: #333;
+                        margin-top: 10px;
+                        font-weight: bold;
+                    }
+                    img {
+                        display: block;
+                        width: 100%;
+                    }
+                }
+                .active {
+                    border:2px dashed #5570F1;
+                    padding: 8px;
+                    background: #e5e5ff;
+                    transition: all 0.5s;
+                }
+            }
+        }
+
+        //一行五个
+        .componentScrollBoxStyle4 {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 1.5%;  // 使用gap属性来控制元素之间的间距
+            .componentScrollbigBog{
+                width: 18.5%;
+                box-sizing: border-box;
+                margin-bottom: 20px;
+                .componentScrollBoxItem {
+                    width: 100%;
+                    border:2px solid #FFF;
+                    box-sizing: border-box;
+                    cursor: pointer;
+                    border:2px solid #fff;
+                    padding: 8px;
+                    background: #fff;
+                    .componentScrollBoxItemTitle {
+                        text-align: center;
+                        font-size: 14px;
+                        color: #333;
+                        margin-top: 10px;
+                        font-weight: bold;
+                    }
+                    img {
+                        display: block;
+                        width: 100%;
+                    }
+                }
+                .active {
+                    border:2px dashed #5570F1;
+                    padding: 8px;
+                    background: #e5e5ff;
+                    transition: all 0.5s;
+                }
+            }
         }
-      }
-    }
-    .componentWindowBoxFooter {
-      text-align: right;
     }
-  }
+}
+
 </style>

src/views/template/public/convertBtn.vue

@@ -31,31 +31,65 @@ export default {
   },
   methods: {
     openComponentListWindow(){
-      //判断编辑的是哪个页面的组件style
-      let style = 0;
-      if(this.$store.state.template.pageStatus==1){
-        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){
-        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){}
 
-      let data = {
-        id:this.id,
-        dataSort:this.dataSort,
-        sort:this.sort,
-        type:this.type,
-        style:style
-      }
-      console.log(data);
-      this.$store.commit('template/setComponentStyleStatus',data);
+        //遇到过莫名其妙获取不到content的情况，此时使用这个方法
+        //     let that = this;
+        //   setTimeout(() => {
+        //         //判断编辑的是哪个页面的组件style
+        //     let style = 0;
+        //     console.log(that.dataSort)
+        //     console.log(that.$store.state.template.pageData.index[that.dataSort].content.componentList[that.sort].component_style)
+        //     if(that.$store.state.template.pageStatus==1){
+        //         style = that.$store.state.template.pageData.index[that.dataSort].content.componentList[that.sort].component_style;
+        //     }
+        //     if(that.$store.state.template.pageStatus==2){}
+        //     if(that.$store.state.template.pageStatus==3){
+        //         style = that.$store.state.template.pageData.list[that.dataSort].content.componentList[that.sort].component_style;
+        //     }
+        //     if(that.$store.state.template.pageStatus==4){
+        //         style = that.$store.state.template.pageData.article[that.dataSort].content.componentList[that.sort].component_style;
+        //     }
+        //     if(that.$store.state.template.pageStatus==5){}
+        //     if(that.$store.state.template.pageStatus==6){}
+        //     if(that.$store.state.template.pageStatus==7){}
+
+        //     let data = {
+        //         id:that.id,
+        //         dataSort:that.dataSort,
+        //         sort:that.sort,
+        //         type:that.type,
+        //         style:style
+        //     }
+        //     console.log(data);
+        //     that.$store.commit('template/setComponentStyleStatus',data);
+        //   },200)
+
+        let style = 0;
+        console.log(this.dataSort)
+        console.log(this.$store.state.template.pageData.index[this.dataSort].content.componentList[this.sort].component_style)
+        if(this.$store.state.template.pageStatus==1){
+            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){
+            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){}
+
+        let data = {
+            id:this.id,
+            dataSort:this.dataSort,
+            sort:this.sort,
+            type:this.type,
+            style:style
+        }
+        console.log(data);
+        this.$store.commit('template/setComponentStyleStatus',data);
     }
   },
   mounted() {
@@ -68,18 +102,19 @@ export default {
   .templateEditBtnBox {
     position: absolute;
     top: 0;
-    left: 40px;
+    right: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     margin: 5px;
     color: #666;
-    background: rgba(255,255,255,0.5);
-    border-radius: 5px;
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
+    border: 2px dashed #999;
+    border-radius: 8px;
+    background-color: #fff1cc;
+    width: 38px;
+    height: 38px;
+    line-height: 38px;
     text-align: center;
     font-size: 30px;
     transition: all 0.3s;

src/views/template/public/editBtn.vue

@@ -1,90 +1,95 @@
 <template>
-  <div class="templateEditBtnBox" @click="openEditWindow" v-if="this.$store.state.template.previewStatus==false">
-    <i class="el-icon-setting"></i>
-  </div>
+    <div class="templateEditBtnBox" @click="openEditWindow" v-if="this.$store.state.template.previewStatus==false">
+        <i class="el-icon-setting"></i>
+    </div>
 </template>
 
 <script>
 export default {
-  props: {
-    id: {
-      type:Number,
-      default:0
+    props: {
+        id: {
+            type:Number,
+            default:0
+        },
+        dataSort: {
+            type:Number,
+            default:0
+        },
+        sort:{
+            type:Number,
+            default:0
+        },
+        type:{//组件类型 1=新闻 2=广告 
+            type:Number,
+            default:0
+        },
+        size:{
+            type:Number,
+            default:0
+        },
+        sizeImg:{
+            type:Number,
+            default:0
+        },
+        y: {
+            type:Number,
+            default:0
+        }
     },
-    dataSort: {
-      type:Number,
-      default:0
+    data() {
+        return {
+        
+        };
     },
-    sort:{
-      type:Number,
-      default:0
+    methods: {
+        openEditWindow(){
+            let data = {
+                id:this.id,
+                dataSort:this.dataSort,
+                sort:this.sort,
+                type:this.type,
+                size:this.size,
+                sizeImg:this.sizeImg,
+                y:this.y
+            }
+            console.log(data);
+            //小助手
+            this.$store.commit('template/setEditWindowStatus',data);
+            //设置组件回显数据
+            this.$store.commit('template/setComponentViewData',data);
+            //   //获取全部导航
+            //   this.$store.dispatch('template/getWebsiteCategory',{pageSize:1000});
+        }
     },
-    type:{//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
-      type:Number,
-      default:0
+    mounted() {
+        
     },
-    size:{
-      type:Number,
-      default:0
-    },
-    y: {
-      type:Number,
-      default:0
-    }
-  },
-  data() {
-    return {
-      
-    };
-  },
-  methods: {
-    openEditWindow(){
-      let data = {
-        id:this.id,
-        dataSort:this.dataSort,
-        sort:this.sort,
-        type:this.type,
-        size:this.size,
-        y:this.y
-      }
-      console.log(data);
-      //小助手
-      this.$store.commit('template/setEditWindowStatus',data);
-      //设置组件回显数据
-      this.$store.commit('template/setComponentViewData',data);
-      //获取全部导航
-      this.$store.dispatch('template/getWebsiteCategory',{pageSize:1000});
-    }
-  },
-  mounted() {
-    
-  },
 };
 </script>
 
 <style scoped lang="less">
-  .templateEditBtnBox {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    margin: 5px;
-    color: #666;
-    //border: 1px solid #000;
-    border-radius: 5px;
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
-    text-align: center;
-    font-size: 30px;
-    transition: all 0.3s;
-    z-index: 999;
-    background: rgba(255,255,255,0.5);
-    &:hover {
-      color: #333;
+    .templateEditBtnBox {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        margin: 5px;
+        color: #666;
+        border: 2px dashed #999;
+        border-radius: 8px;
+        background-color: #fff1cc;
+        width: 38px;
+        height: 38px;
+        line-height: 38px;
+        text-align: center;
+        font-size: 30px;
+        transition: all 0.3s;
+        z-index: 999;
+        &:hover {
+            color: #333;
+        }
     }
-  }
 </style>

src/views/template/public/editWindow.vue

@@ -1,401 +1,370 @@
 <template>
-  <div class="editWindowBox">
-    <div class="editWindowBoxContent">
-      <!--组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论-->
-      <!--开发助手-->
-      <div class="testAssistant">
-        <div class="testAssistantTitle">
-          代码助手：
-        </div>
-        <div class="testAssistantContent">
-          <div class="testAssistantContentItem">
-            <div>当前板块id:</div>
-            <div>{{this.$store.state.template.editSectorId}}</div>
-          </div>
-          <div class="testAssistantContentItem">
-            <div>当前板块所在的页面:</div>
-            <div v-if="this.$store.state.template.pageStatus == 1">首页</div>
-            <div v-if="this.$store.state.template.pageStatus == 2">分类页</div>
-            <div v-if="this.$store.state.template.pageStatus == 3">列表页</div>
-            <div v-if="this.$store.state.template.pageStatus == 4">详情页</div>
-            <div v-if="this.$store.state.template.pageStatus == 5">搜索页</div>
-            <div v-if="this.$store.state.template.pageStatus == 6">自定义列表页</div>
-            <div v-if="this.$store.state.template.pageStatus == 7">自定义详情页</div>
-          </div>
-          <div class="testAssistantContentItem">
-            <div>当前组件在此板块中的位置:</div>
-            <div>{{this.$store.state.template.editComponentSort}}</div>
-          </div>
-          <div class="testAssistantContentItem">
-            <div>当前组件在此画布中的位置:</div>
-            <div>{{this.$store.state.template.editSectorY}}</div>
-          </div>
-          <div class="testAssistantContentItem">
-            <div>当前板块在Json数据中的位置:</div>
-            <div>{{this.$store.state.template.editDataSort}}</div>
-          </div>
-          <div class="testAssistantContentItem">
-            <div>当前组件的数据类型:</div>
-            <div v-if="this.$store.state.template.editComponentType == 1">新闻列表</div>
-            <div v-if="this.$store.state.template.editComponentType == 2">新闻选项卡</div>
-            <div v-if="this.$store.state.template.editComponentType == 3">广告</div>
-            <div v-if="this.$store.state.template.editComponentType == 4">友情链接</div>
-            <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>
-            <div>{{this.$store.state.template.editComponentSize}}</div>
-          </div>
-          <div class="testAssistantContentItem">
-            <div>回显导航池:</div>
-            <div v-if="this.$store.state.template.editComponentType == 1||this.$store.state.template.editComponentType == 2">
-              <span v-if="this.$store.state.template.componentViewData.pid_arr.length == 0">暂未选择导航</span>
-              <span v-else>{{this.$store.state.template.componentViewData.pid_arr}}</span>
+    <div class="editWindowBox">
+        <div class="editWindowBoxContent">
+            <!--组件类型 1=新闻 2=评论-->
+            <!--1.新闻-->
+            <div v-if="this.$store.state.template.editComponentType == 1">
+                <el-form :model="form.type1data" 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-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
+                        <!-- <el-select v-model="form.type1data.pid_arr" filterable placeholder="请选择导航.." @change="changeNav">
+                            <el-option
+                                v-for="item in options"
+                                :key="item.id"
+                                :label="item.label"
+                                :value="item.value">
+                            </el-option>
+                        </el-select> -->
+                        <el-cascader 
+                            :key="parentKey" 
+                            v-model="form.type1data.pid_arr" 
+                            placeholder="请选择要绑定的栏目名称" 
+                            :props="parentData"
+                            popper-class="my_cascader" 
+                            filterable 
+                            ref="cascader"
+                            @change="changeNav"
+                            clearable>
+                        </el-cascader>
+                    </el-form-item>
+                    <el-form-item label="文字新闻条数：" :label-width="formLabelWidth" class="custom-align-right">
+                        <el-input v-model="this.$store.state.template.editComponentSize" placeholder="请输入请求的条数" disabled/>
+                    </el-form-item>
+                    <el-form-item label="图片新闻条数：" :label-width="formLabelWidth" class="custom-align-right">
+                        <el-input v-model="this.$store.state.template.editComponentSizeImg" placeholder="请输入请求的条数" disabled/>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <!--2.广告-->
+            <div v-if="this.$store.state.template.editComponentType == 2">
+                <el-form :model="form.type3data" 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-item label="广告位宽度：" :label-width="formLabelWidth" class="custom-align-right">
+                        <el-input v-model="this.$store.state.template.pageData.index[this.$store.state.template.editDataSort].content.ad.width" disabled/>
+                    </el-form-item>
+                    <el-form-item label="广告位高度：" :label-width="formLabelWidth" class="custom-align-right">
+                        <el-input v-model="this.$store.state.template.pageData.index[this.$store.state.template.editDataSort].content.ad.height" disabled/>
+                    </el-form-item>
+                    <el-form-item label="广告位类型：" :label-width="formLabelWidth" class="custom-align-right">
+                        <el-input value="图片" disabled/>
+                    </el-form-item>
+                    <el-form-item label="广告位名称：" :label-width="formLabelWidth" prop="adName" class="custom-align-right">
+                        <el-input v-model="form.type3data.adName" placeholder="请输入广告位名称"/>
+                    </el-form-item>
+                    <el-form-item label="广告位介绍：" :label-width="formLabelWidth" class="custom-align-right">
+                        <el-input v-model="form.type3data.adName" disabled/>
+                    </el-form-item>
+                    <el-form-item label="价格：" :label-width="formLabelWidth" prop="price" class="custom-align-right">
+                        <el-input v-model="form.type3data.price" type="number" placeholder="请输入广告位售价"/>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <!--3.全局广告-->
+            <div v-if="this.$store.state.template.editComponentType == 3">
+                <el-form :model="form.type2data" 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-item label="广告位宽度：" :label-width="formLabelWidth" class="custom-align-right">
+                        <el-input v-model="this.$store.state.template.webSiteData.ad.top.width" disabled/>
+                    </el-form-item>
+                    <el-form-item label="广告位高度：" :label-width="formLabelWidth" class="custom-align-right">
+                        <el-input v-model="this.$store.state.template.webSiteData.ad.top.height" disabled/>
+                    </el-form-item>
+                    <el-form-item label="广告位类型：" :label-width="formLabelWidth" class="custom-align-right">
+                        <el-input value="图片" disabled/>
+                    </el-form-item>
+                    <el-form-item label="广告位名称：" :label-width="formLabelWidth" prop="adName" class="custom-align-right">
+                        <el-input v-model="form.type2data.adName" placeholder="请输入广告位名称"/>
+                    </el-form-item>
+                    <el-form-item label="广告位介绍：" :label-width="formLabelWidth" class="custom-align-right">
+                        <el-input v-model="form.type2data.adName" disabled/>
+                    </el-form-item>
+                    <el-form-item label="价格：" :label-width="formLabelWidth" prop="price" class="custom-align-right">
+                        <el-input v-model="form.type2data.price" type="number" placeholder="请输入广告位售价"/>
+                    </el-form-item>
+                </el-form>
             </div>
-            <div v-else>无需回显</div>
-          </div>
         </div>
-      </div>
-      <!--1.普通新闻类型-->
-      <div v-if="this.$store.state.template.editComponentType == 1">
-        <el-form :model="form.type1data" 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-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
-            <el-cascader :key="oneParentKey" v-model="form.type1data.pid_arr" placeholder="请选择网站导航" :props="oneParentData" filterable clearable></el-cascader>
-          </el-form-item>
-          <el-form-item label="显示条数：" :label-width="formLabelWidth" class="custom-align-right">
-            <el-input v-model="this.$store.state.template.editComponentSize" placeholder="请输入请求的条数" disabled/>
-          </el-form-item>
-        </el-form>
-      </div>
-      <!--2.tabs类型-->
-      <div v-if="this.$store.state.template.editComponentType == 2">
-        <el-form :model="form.type2data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
-          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
-            <el-input value="新闻选项卡" disabled/>
-          </el-form-item>
-          <!-- {{ this.$store.state.template.editWebsiteCategory }} -->
-          <el-form-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
-            <el-select v-model="form.type2data.pid_arr" multiple placeholder="请选择">
-              <el-option
-                v-for="item in this.$store.state.template.editWebsiteCategory"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-              </el-option>
-            </el-select>
-            <!-- <el-cascader :key="moreParentKey" @change="handleCascaderChange" v-model="form.type2data.pid_arr" placeholder="请选择网站导航" :props="moreParentData" filterable clearable></el-cascader> -->
-          </el-form-item>
-          <el-form-item label="显示条数：" :label-width="formLabelWidth" class="custom-align-right">
-            <el-input v-model="this.$store.state.template.editComponentSize" placeholder="请输入请求的条数" disabled/>
-          </el-form-item>
-        </el-form>
-      </div>
-      <!--3.广告-->
-      <div v-if="this.$store.state.template.editComponentType == 3">
-        <el-form :model="form.type3data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
-          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
-            <el-input value="广告" disabled/>
-          </el-form-item>
-          <el-form-item label="广告位名称：" :label-width="formLabelWidth" prop="adName" class="custom-align-right">
-            <el-input v-model="form.type3data.adName" placeholder="请输入广告位名称"/>
-          </el-form-item>
-        </el-form>
-      </div>
-      <!--4.友情链接-->
-      <div v-if="this.$store.state.template.editComponentType == 4">
-        <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>
-      <!--6.静态-->
-      <div v-if="this.$store.state.template.editComponentType == 6">
-        <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>
-      <!--7.文字-->
-      <div v-if="this.$store.state.template.editComponentType == 7">
-        <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-item label="标题名称：" :label-width="formLabelWidth" prop="titleName" class="custom-align-right">
-            <el-input v-model="form.type7data.titleName" placeholder="请输入标题名称"/>
-          </el-form-item>
-        </el-form>
-      </div>
-      <!--8.评论组件-->
-      <div v-if="this.$store.state.template.editComponentType == 8">
-        <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>
-      <!--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>
-      <el-button type="primary" @click="submitData">确定</el-button>
+        <div class="editWindowBoxFooter">
+            <el-button type="info" @click="closeEditWindow">取消</el-button>
+            <el-button type="primary" @click="submitData" v-if="this.$store.state.template.editComponentType != 3">确定</el-button>
+            <el-button type="primary" @click="submitAdData" v-else>确定</el-button>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 import Vue from 'vue';  // 导入 Vue
 //监听vuex中的值
 export default {
-  props: {
+    props: {
 
-  },
-  data() {
-    let self = this;
-    const validatePid = (rule,value,callback) => {
-      console.log(value.length)
-      if (value.length === 0) {
-        callback(new Error('必须选择一个导航！'))
-      } else {
-        callback()
-      }
-    }
-    const validateEmpty = (rule,value,callback) => {
-      if (!value || value.trim() === "") {
-        callback(new Error('该项不能为空！'));
-      } else {
-        callback();
-      }
-    }
-    return {
-      formLabelWidth:"120px",
-      form:{
-        //单导航新闻
-        type1data:{
-          pid_arr:[],
-          pageSize:""
-        },
-        //tabs多导航新闻
-        type2data:{
-          pid_arr:[],
-          pageSize:""
-        },
-        //广告
-        type3data:{
-          adName:""
-        },
-        //文字
-        type7data:{
-          titleName:""
+    },
+    data() {
+        const validatePid = (rule,value,callback) => {
+            console.log(value.length)
+            if (value.length === 0) {
+                callback(new Error('必须选择一个导航！'))
+            } else {
+                callback()
+            }
         }
-      },
-      formRules:{
-        pid_arr: [{type:'array',required:true,trigger:'blur',message:'必须选择一个导航！',validator:validatePid}],
-        adName: [{required:true,trigger:'blur',message:'',validator:validateEmpty}],
-        titleName: [{required:true,trigger:'blur',message:'',validator:validateEmpty}]
-      },
-      //获取单个导航id start---------------------------------------->
-      oneParentKey:0,
-      oneParentData: {
-        checkStrictly: true,
-        lazy: true,
-        async lazyLoad (node, resolve) {
-          const { level, data } = node;
-          if (data && data.children && data.children.length !== 0) {
-            return resolve(node)
-          }
-          console.log(level)
-          let parentId = level == 0 ? 0 : data.value
-          let parames = {
-            'pid':parentId
-          }
-          self.$store.dispatch('pool/categoryList',parames).then(res=> {
-            if (res.data) {
-              const nodes = res.data.map(item => ({
-                value: item.id,
-                label: item.name,
-                leaf: level >= 3,
-                children: []
-              }))
-              resolve(nodes)
+        const validateEmpty = (rule,value,callback) => {
+            if (!value || value.trim() === "") {
+                callback(new Error('该项不能为空！'));
+            } else {
+                callback();
             }
-          })
         }
-      },
-      //获取单个导航id end---------------------------------------->
-      //获取多个导航id start---------------------------------------->
-      moreParen:[],
-      // base 0.0.1 无法回显多选导航池
-      // 这里不能使用级联选择器，因为这里只能选择同级导航，你选了不同级的导航后端就乱套了
-      // moreParentData: {
-      //   checkStrictly: true,
-      //   multiple: true,
-      //   lazy: true,
-      //   async lazyLoad (node, resolve) {
-      //     const { level, data } = node;
-      //     if (data && data.children && data.children.length !== 0) {
-      //       return resolve(node)
-      //     }
-      //     console.log(level)
-      //     let parentId = level == 0 ? 0 : data.value
-      //     let parames = {
-      //       'pid':parentId
-      //     }
-      //     self.$store.dispatch('pool/categoryList',parames).then(res=> {
-      //       if (res.data) {
-      //         const nodes = res.data.map(item => ({
-      //           value: item.id,
-      //           label: item.name,
-      //           leaf: level >= 3,
-      //           children: []
-      //         }))
-      //         resolve(nodes)
-      //       }
-      //     })
-      //   }
-      // },
-      //获取导航id end---------------------------------------->
-    };
-  },
-  computed: {
-    // 映射 Vuex 的 state 到计算属性
-    // 监听导航池变化用于回显
-    getPid() {
-      return this.$store.state.template.componentViewData.pid_arr;
-    },
-    getadName(){
-      return this.$store.state.template.componentViewData.adName;
-    },
-    gettitleName(){
-      return this.$store.state.template.componentViewData.titleName;
-    }
-  },
-  watch: {
-    getPid(newVal, oldVal) {
-      console.log("导航池改变了！")
-      console.log(newVal, oldVal)
-      // 回显导航池 判断一下是单导航还是多导航
-      if(this.$store.state.template.editComponentType==1){
-        //base0.0.1 必须先赋值再创建nodes 否则可能无法回显
-        this.form.type1data.pid_arr = newVal;
-        this.loadCascaderPath(newVal);
-      }
-      if(this.$store.state.template.editComponentType==2){ 
-        this.form.type2data.pid_arr = newVal;
-      }
-    },
-    getadName(newVal, oldVal) {
-      console.log("广告文字改变了！")
-      console.log(newVal, oldVal)
-      this.form.type3data.adName = newVal;
+        let self = this;
+        return {
+            formLabelWidth:"120px",
+            form:{
+                //单导航新闻
+                type1data:{
+                    pid_arr:"",
+                    pid_id:"",
+                    name:"",
+                },
+                //全局广告
+                type2data:{
+                    adName:"",
+                    price:""
+                },
+                //页面内广告
+                type3data:{
+                    adName:"",
+                    price:""
+                },
+            },
+            formRules:{
+                pid_arr: [{ type: 'array', required: true, trigger: 'change', message: '必须选择一个导航！' }],
+                adName: [{required:true,trigger:'blur',message:'',validator:validateEmpty}],
+                price: [{type:'number',required:true,trigger:'blur',message:'',validator:validateEmpty}],
+            },
+            options:[],//网站导航
+            //获取网站栏目
+            parentKey: 0,//更新级联选择器的key
+            parentData: {
+            checkStrictly: true,
+                lazy: true,
+                async lazyLoad(node, resolve) {
+                    const { level, data } = node;
+                    if (data && data.children && data.children.length !== 0) {
+                        return resolve(node)
+                    }
+                    let parentId;
+                    parentId = level == 0 ? 0 : data.value;
+                    let parames = {
+                        'type': 1,
+                        'website_id': self.$store.state.template.editWebsiteId,
+                        'pid': parentId
+                    }
+                    self.$store.dispatch('news/getWebsiteNavList', parames).then(res => {
+                        if (res.data) {
+                            const nodes = res.data.map(item => ({
+                                value: item.category_id,
+                                label: item.name,
+                                leaf: level >= 3,
+                                children: [],
+                                disabled: item.type != 1
+                            }))
+                            resolve(nodes)
+                        }
+                    })
+                }
+            },
+        }
     },
-    gettitleName(newVal, oldVal) {
-      console.log("标题文字改变了！")
-      console.log(newVal, oldVal)
-      this.form.type7data.titleName = newVal;
-    } 
-  },
-  methods: {
-    closeEditWindow(){
-      this.$store.commit('template/closeEditWindowStatus');
+    computed: {
+        // 映射 Vuex 的 state 到计算属性
+        // 监听导航池变化用于回显
+        getPid() {
+            return this.$store.state.template.componentViewData.pid_arr;
+        },
+        getKey(){
+            return this.$store.state.template.componentViewData.windowKey;
+        },
+        getadName(){
+            return this.$store.state.template.componentViewData.adName;
+        },
+        getadIntroduce(){
+            return this.$store.state.template.componentViewData.introduce;
+        },
+        getadPrice(){
+            return this.$store.state.template.componentViewData.price;
+        }
     },
-    submitData(){
-      //验证表单
-      this.$refs.form.validate(valid => {
-        //构建提交的数据
-        let data = {
-          id:this.$store.state.template.editSectorId,//组件id
-          sort:this.$store.state.template.editComponentSort,//组件位置
-          dataSort:this.$store.state.template.editDataSort,//数据位置
-          type:this.$store.state.template.editComponentType,//组件类型
-          data:""//提交的数据
+    watch: {
+        getPid(newVal, oldVal) {
+            console.log("导航池改变了！")
+            console.log(newVal, oldVal)
+            // 回显导航池 判断一下是单导航还是多导航
+            this.form.type1data.pid_arr = newVal;
+        },
+        getadName(newVal, oldVal) {
+            console.log("广告文字改变了！")
+            console.log(newVal, oldVal)
+            this.form.type3data.adName = newVal;
+        },
+        getadIntroduce(newVal, oldVal) {
+            console.log("广告介绍改变了！")
+            console.log(newVal, oldVal)
+            this.form.type3data.introduce = newVal;
+        },
+        getadPrice(newVal, oldVal) {
+            console.log("广告价格改变了！")
+            console.log(newVal, oldVal)
+            this.form.type3data.price = newVal;
+        },
+        getKey(newVal, oldVal) {
+            console.log("级联选择器key改变了！")
+            console.log(newVal, oldVal)
+            this.form.type1data.pid_arr = this.$store.state.template.componentViewData.pid_arr;
+            this.parentKey ++;
         }
-        if (valid) {
-          //判断当前提交的数据类型
-          //1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
-          if(this.$store.state.template.editComponentType == 1){
-            data.data = this.form.type1data;
-          }
-          //2=tabs新闻选项卡
-          if(this.$store.state.template.editComponentType == 2){
-            data.data = this.form.type2data;
-          }
-          //3=广告
-          if(this.$store.state.template.editComponentType == 3){
-            data.data = this.form.type3data;
-          }
-          //7=文本
-          if(this.$store.state.template.editComponentType == 7){
-            data.data = this.form.type7data;
-          }
-          //第二步：提交数据
-          this.$store.commit('template/saveComponentData',data);
-          //第三步：关闭编辑窗口
-          this.$store.commit('template/closeEditWindowStatus');
+    },
+    methods: {
+        closeEditWindow(){
+            this.$store.commit('template/closeEditWindowStatus');
+        },
+        // getNavList(){
+        //     let data = {
+        //         website_id:this.$store.state.template.editWebsiteId,
+        //         pid:0,
+        //         type:1
+        //     }
+        //     this.$store.dispatch('news/getWebsiteNavList',data).then((res)=>{
+        //         if(res.code==200){
+        //             this.options = res.data.map(item => ({
+        //                 id: item.id,
+        //                 value: item.category_id,
+        //                 label: item.alias,
+        //             }));
+        //         }else{
+        //             this.$message.error(res.msg);
+        //         }
+        //     });
+        // },
+        changeNav(val){
+            // 获取选中的节点
+            const nodes = this.$refs.cascader.getCheckedNodes()
+            if (nodes && nodes.length > 0) {
+                // 获取最后一个选中节点的 name
+                const lastName = nodes[0].pathLabels[nodes[0].pathLabels.length - 1]
+                //console.log('选中的 name:', lastName)
+                this.form.type1data.name = lastName;
+                // 或者获取完整的路径 name 数组
+                //console.log('路径 name 数组:', nodes[0].pathLabels)
+            }
+        },
+        submitData(){
+            //验证表单
+            this.$refs.form.validate(valid => {
+                //构建提交的数据
+                let data = {
+                    id:this.$store.state.template.editSectorId,//组件id
+                    sort:this.$store.state.template.editComponentSort,//组件位置
+                    dataSort:this.$store.state.template.editDataSort,//数据位置
+                    type:this.$store.state.template.editComponentType,//组件类型
+                    data:""//提交的数据
+                }
+                if (valid) {
+                    //判断当前提交的数据类型
+                    //1=新闻
+                    if(this.$store.state.template.editComponentType == 1){
+                        data.data = this.form.type1data;
+                        data.data.pid_id = data.data.pid_arr[data.data.pid_arr.length - 1];
+                        data.data.name = this.form.type1data.name;
+                    }
+                    //2=广告
+                    if(this.$store.state.template.editComponentType == 2){
+                        data.data = this.form.type3data;
+                    }
+                    //第二步：提交数据
+                    this.$store.commit('template/saveComponentData',data);
+                    //第三步：关闭编辑窗口
+                    this.$store.commit('template/closeEditWindowStatus');
+                    //第四步：初始化下拉列表
+                    this.form.type1data.pid_arr = "";
+                }
+            })
+        },
+        submitAdData(){
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    //验证广告位名称
+                    let data = {}
+                    data.data = this.form.type2data;
+                    data.data.name = this.form.type2data.adName;
+                    data.data.introduce = this.form.type2data.adName;
+                    data.data.price = this.form.type2data.price;
+                    //第一步：通过固定方法提交数据
+                    this.$store.commit('template/saveAdData',data);
+                    //第二步：关闭编辑窗口
+                    this.$store.commit('template/closeEditWindowStatus');
+                    //第三步：初始化下拉列表
+                    this.form.type1data.pid_arr = "";
+                }
+            })
         }
-      })
     },
-    //回显级联选择器
-    async loadCascaderPath(path, type) {
-      this.oneParentKey+=1;
-      // 如果是单选类型，path 是普通数组
-      for (let i = 0; i < path.length; i++) {
-        const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
-        const level = i; // 当前层级的索引
-        await this.$store.dispatch('pool/categoryList',{pid:parentId}).then((res)=>{
-          const nodes = res.data.map(item => ({
-            value: item.id,
-            label: item.name,
-            leaf: level >= 4,
-            checked: true
-          }));
-          // 将数据传递到 resolve，通知 cascader 这一层的数据加载完毕
-          if (level === path.length - 1) {
-            this.$nextTick(() => {
-              this.form.type1data.pid_arr = path;
-            });
-          }
-        });
-      }
+    mounted() { 
+
     },
-  },
-  mounted() { 
-    
-  },
 };
 </script>
 
 <style scoped lang="less">
-  .editWindowBox {
-    .editWindowBoxContent {
-      width: 100%;
-      padding: 20px;
+    .editWindowBox {
+        .editWindowBoxContent {
+            width: 100%;
+            padding: 20px;
+        }
+        .editWindowBoxFooter {
+            text-align: right;
+        }
+    }
+
+    .testAssistant {
+        border: 1px solid #dfe4ed;
+        padding: 20px;
+        margin-bottom: 20px;
+        background: #F5F7FA;
+        border-radius: 4px;
+        .testAssistantTitle {
+            font-size: 16px;
+            font-weight: bold;
+            padding-bottom: 10px;
+            margin-bottom: 20px;
+            border-bottom: 1px solid #dfe4ed;
+        }
+        .testAssistantContentItem {
+            display: flex;
+            font-size: 16px;
+            margin-bottom: 10px;
+            div:nth-child(1) {
+                color: #666;
+                margin-right: 20px;
+                font-weight: bold;
+            }
+            div:nth-child(2) {
+                color: #666;
+            }
+        }
+    }
+
+    //表单微调 start------------------------------------------------------------>
+    ::v-deep .editWindowBoxContent .el-cascader{
+        width: 100% !important;
     }
-    .editWindowBoxFooter {
-      text-align: right;
+    ::v-deep .editWindowBoxContent .el-select--medium {
+        width: 100% !important;
     }
-  }
-  //表单微调 start------------------------------------------------------------>
-  ::v-deep .editWindowBoxContent .el-cascader{
-    width: 100% !important;
-  }
-  ::v-deep .editWindowBoxContent .el-select--medium {
-    width: 100% !important;
-  }
-  //表单微调 end------------------------------------------------------------>
+    //表单微调 end------------------------------------------------------------>
 </style>

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

@@ -1,125 +0,0 @@
-<template>
-  <div class="bannerBox">
-    <div class="itemTopBox">
-      <editBtn :id="id" :sort="0" :type="6" :size="1"/>
-      <convertBtn :id="id" :sort="0" :type="1"/>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 1">
-        <mainTitleStyle1 />
-      </div>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 2">
-        <mainTitleStyle2 />
-      </div>
-    </div>
-    <div class="itemBottomBox">
-      <div class="bannerLayerBox">
-        <editBtn :id="id" :sort="1" :type="1" :size="3"/>
-        <convertBtn :id="id" :sort="1" :type="4"/>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 1">
-          <banner1Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 2">
-          <banner2Style />
-        </div>
-      </div>
-      <div class="NewsListBox">
-        <editBtn :id="id" :sort="2" :type="2" :size="5"/>
-        <convertBtn :id="id" :sort="2" :type="5"/>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 1">
-          <tabs1Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 2">
-          <tabs2Style />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-//编辑按钮
-import editBtn from '../../public/editBtn.vue'
-import convertBtn from '../../public/convertBtn.vue'
-//标题组件
-import mainTitleStyle1 from './components/mainTitle/1.vue'
-import mainTitleStyle2 from './components/mainTitle/2.vue'
-//banner组件
-import banner from './components/banner.vue'
-import banner1Style from './components/banner/1.vue'
-import banner2Style from './components/banner/2.vue'
-//tabs组件
-import tabs1Style from './components/tabs/1.vue'
-import tabs2Style from './components/tabs/2.vue'
-
-export default {
-  components: {
-    //mainTitle,
-    banner,
-    editBtn,
-    convertBtn,
-    mainTitleStyle1,
-    mainTitleStyle2,
-    banner1Style,
-    banner2Style,
-    tabs1Style,
-    tabs2Style
-  },
-  props: {
-    id:{
-      type:Number,
-      default:0
-    }
-  },
-  data() {
-    return {
-      
-    };
-  },
-  methods: {
-    
-  },
-  mounted() {
-    
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .bannerBox {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 340px;
-    
-    .itemTopBox {
-      position: relative;
-      border: 2px dashed #999;
-      transition: all 0.3s;
-      width: 80%;
-    }
-    .itemBottomBox {
-      
-      width: 80%;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 14px 0 0 0;
-      height: 300px;
-      .bannerLayerBox {
-        position: relative;
-        //border: 2px dashed #999;
-        width: 55%;
-        height: 226px;
-      }
-      .NewsListBox {
-        position: relative;
-        width: 45%;
-        border: 2px dashed #999;
-        box-sizing: border-box;
-        padding-left: 20px;
-        height: 226px;
-      }
-    }
-    
-  }
-</style>

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

@@ -1,103 +0,0 @@
-<template>
-  <div class="commentSectorBox">
-    <div class="commentSectorBoxTitle">
-      <editBtn :id="id" :sort="0" :type="7" :size="1"/>
-      <convertBtn :id="id" :sort="0" :type="2"/>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 1">
-        <title1Style />
-      </div>
-    </div>
-    <div class="commentSectorBoxContent">
-      <div class="tabsCalendarNewsBox">
-        <editBtn :id="id" :sort="1" :type="1" :size="5"/>
-        <convertBtn :id="id" :sort="1" :type="5"/>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 1">
-          <tabs1Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 2">
-          <tabs2Style />
-        </div>
-      </div>
-      <div class="calendarBox">
-        <editBtn :id="id" :sort="2" :type="8" :size="1"/>
-        <convertBtn :id="id" :sort="2" :type="8"/>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 1">
-          <form1Style />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-//编辑按钮
-import editBtn from '../../public/editBtn.vue'
-import convertBtn from '../../public/convertBtn.vue'
-//标题组件
-import title1Style from './components/title/1.vue'
-//tabs组件
-import tabs1Style from './components/tabs/1.vue'
-import tabs2Style from './components/tabs/2.vue'
-//留言组件
-import form1Style from './components/form/1.vue'
-
-export default {
-  components: {
-    editBtn,
-    convertBtn,
-    title1Style,
-    tabs1Style,
-    tabs2Style,
-    form1Style
-  },
-  props: {
-    id: {
-      type: Number,
-      default: 0
-    }
-  },
-  data() {
-    return {
-      
-    };
-  },
-  methods: {
-    
-    
-  },
-  mounted() {
-    
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .commentSectorBox {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .commentSectorBoxTitle {
-      width: 80%;
-      border: 2px dashed #999;
-      height: 41px;
-      position: relative;
-    }
-    .commentSectorBoxContent {
-      width: 80%;
-      display: flex;
-      .tabsCalendarNewsBox {
-        width: 70%;
-        box-sizing: border-box;
-        padding-right: 20px;
-        border: 2px dashed #999;
-        position: relative;
-      }
-      .calendarBox {
-        position: relative;
-        width: 30%;
-        //border: 2px dashed #999;
-      }
-    }
-  }
-</style>

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

@@ -1,69 +0,0 @@
-<template>
-  <div class="bannerItemBox">
-    <el-carousel height="226px">
-      <el-carousel-item :key="1">
-        <div class="bannerItemPositioningBox">
-          <div class="shadowBox">banner样式1标题标题标题标题标题标题</div>
-          <img src="@/assets/template/component/banner1.png" /> 
-        </div>
-      </el-carousel-item>
-      <el-carousel-item :key="2">
-        <div class="bannerItemPositioningBox">
-          <div class="shadowBox">banner样式1标题标题标题标题标题标题</div>
-          <img src="@/assets/template/component/banner2.png" /> 
-        </div>
-      </el-carousel-item>
-      <el-carousel-item :key="3">
-        <div class="bannerItemPositioningBox">
-          <div class="shadowBox">banner样式1标题标题标题标题标题标题</div>
-          <img src="@/assets/template/component/banner3.png" /> 
-        </div>
-      </el-carousel-item>
-    </el-carousel>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    
-  },
-  data() {
-    return {
-      
-    };
-  },
-  methods: {
-    
-  },
-  mounted() {
-
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .bannerItemBox {
-    width: 100%;
-    .bannerItemPositioningBox {
-      position: relative;
-      height: 100%;
-      img {
-        width: 100%;
-        height: 100%;
-      }
-      .shadowBox {
-        position: absolute;
-        width: 100%;
-        bottom: 0;
-        width: 100%;
-        left: 0;
-        background: rgba(0,0,0,0.5);
-        color: #fff;
-        font-size: 14px;
-        padding: 10px;
-      }
-    }
-  }
-</style>
-

src/views/template/style/1/components/banner/2.vue

@@ -1,42 +0,0 @@
-<template>
-  <div class="bannerItemBox">
-    <el-carousel height="226px">
-      <el-carousel-item :key="1">
-        <img src="@/assets/template/component/banner5.png" /> 
-      </el-carousel-item>
-      <el-carousel-item :key="2">
-        <img src="@/assets/template/component/banner4.png" />
-      </el-carousel-item>
-    </el-carousel>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    
-  },
-  data() {
-    return {
-      
-    };
-  },
-  methods: {
-    
-  },
-  mounted() {
-
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .bannerItemBox {
-    width: 100%;
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-</style>
-

src/views/template/style/1/components/footer/info/1.vue

@@ -1,98 +0,0 @@
-<template>
-  <div :class="['footerInfoBox',{componentBorder: this.$store.state.template.previewStatus==false}]">
-    <div class="footerInfoBoxContent">
-      <div class="footerInfoBoxContentLeft">
-        <img src="@/assets/template/component/sign1.png">
-      </div>
-      <div class="footerInfoBoxContentMain">
-        <div>本站部分信息由相应民事主体自行提供，该信息内容的真实性、准确性和合法性应由该民事主体负责。三农市场信息网 对此不承担任何保证责任。</div>
-        <div>本网部分转载文章、图片等无法联系到权利人。请相关权利人与本网站联系。</div>
-        <div>北京中农兴业网络技术有限公司主办 | 政讯通·全国政务信息一体化办公室 主管</div>
-        <div>联系电话：010-56019387、010-80440269、010-69945235，监督电话：18516948318，违法和不良信息举报电话：010-57028685</div>
-        <div>第一办公区：北京市西城区敬胜胡同甲3号东侧；第二办公区：北京市东城区建国门内大街26号新闻大厦5层</div>
-        <div>邮箱: qgsndy@163.com 客服QQ : 2909421493 通联QQ : 213552413</div>
-      </div>
-      <div class="footerInfoBoxContentRight">
-        <img src="@/assets/template/component/sign2.png">
-      </div>
-    </div>
-    <div class="footerInfoBoxBottom">
-      <img src="@/assets/template/component/bottom1.png">
-      <img src="@/assets/template/component/bottom2.png">
-      <img src="@/assets/template/component/bottom3.png">
-      <img src="@/assets/template/component/bottom4.png">
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    
-  },
-  data() {
-    return {
-      
-    };
-  },
-  methods: {
-    
-  },
-  mounted() {
-
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .componentBorder {
-    border: 2px dashed #999;
-  }
-  .footerInfoBox {
-    width: 80%;
-    .footerInfoBoxContent {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      .footerInfoBoxContentLeft {
-        width: 10%;
-        box-sizing: border-box;
-        padding-right: 10px;
-        img {
-          width: 100%;
-          display: block;
-        }
-      }
-      .footerInfoBoxContentMain {
-        padding-top: 40px;
-        font-size: 14px;
-        div {
-          text-align: center;
-          padding-bottom: 10px;
-          color: #fff;
-        }
-      }
-      .footerInfoBoxContentRight {
-        width: 10%;
-        box-sizing: border-box;
-        padding-left: 10px;
-        img {
-          width: 100%;
-          display: block;
-        }
-      }
-    }
-    .footerInfoBoxBottom {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding-top: 40px;
-      img {
-        width: 10%;
-        display: block;
-        margin-right: 10px;
-      }
-    }
-  }
-</style>
-

src/views/template/style/1/components/footer/menu/1.vue

@@ -1,84 +0,0 @@
-<template>
-  <div :class="['footerMenuBox',{componentBorder: this.$store.state.template.previewStatus==false}]">
-    <ul class="footerMenuUl">
-      <li>
-        <a href="javascript:;">菜单标题</a>
-      </li>
-      <li>
-        <a href="javascript:;">菜单标题</a>
-      </li>
-      <li>
-        <a href="javascript:;">菜单标题</a>
-      </li>
-      <li>
-        <a href="javascript:;">菜单标题</a>
-      </li>
-      <li>
-        <a href="javascript:;">菜单标题</a>
-      </li>
-      <li>
-        <a href="javascript:;">菜单标题</a>
-      </li>
-      <li>
-        <a href="javascript:;">菜单标题</a>
-      </li>
-      <li>
-        <a href="javascript:;">菜单标题</a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    
-  },
-  data() {
-    return {
-      
-    };
-  },
-  methods: {
-    
-  },
-  mounted() {
-
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .componentBorder {
-    border: 2px dashed #999;
-  }
-  .footerMenuBox {
-    width: 80%;
-    border-bottom: none;
-    .footerMenuUl {
-      padding: 0;
-      margin: 0;
-      overflow: hidden;
-      clear: both;
-      border-bottom: 1px solid #3B70D0;
-      li {
-        float: left;
-        width: 12.5%;
-        text-align: center;
-        list-style: none;
-        height: 60px;
-        line-height: 60px;
-        a {
-          display: block;
-          width: 100%;
-          white-space: nowrap; 
-          overflow: hidden; 
-          text-overflow: ellipsis;
-          font-size: 14px;
-          color: #fff;
-        }
-      }
-    }
-  }
-</style>
-

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

@@ -1,90 +0,0 @@
-<template>
-  <div :class="['headTopBox', { componentBorder: this.$store.state.template.previewStatus==false }]">
-    <div class="headTopInfo">
-      <div class="headTopInfoLeft">欢迎光临：{{ this.$store.state.template.webSiteInfo.website_name }}</div>
-      <div class="headTopInfoRight">
-        <div><i class="el-icon-office-building"></i>商圈</div>
-        <div><i class="el-icon-data-board"></i>广告服务</div>
-        <div><i class="el-icon-user"></i>登录</div>
-        <div><i class="el-icon-edit"></i>注册</div>
-      </div>
-    </div>
-    <div class="headTopLogoBox">
-      <img :src="this.$store.state.template.webSiteInfo.logo">
-      <div class="headTopLogoInputBox">
-        <el-input placeholder="请输入内容" v-model="searchValue"></el-input>
-        <el-button type="primary">搜索</el-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    
-  },
-  data() {
-    return {
-      searchValue:""
-    };
-  },
-  methods: {
-    
-  },
-  mounted() {
-    
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .componentBorder {
-    border: 2px dashed #999;
-  }
-  .headTopBox {
-    width: 80%;
-    height: 190px;
-    .headTopInfo {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 10px 20px;
-      font-size: 12px;
-      .headTopInfoRight {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        div {
-          margin-left: 10px;
-          i {
-            margin-right: 5px;
-          }
-        }
-      }
-    }
-    .headTopLogoBox {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 30px 0;
-      img {
-        width: 300px;
-        height: 90px;
-        display: block;
-      }
-      .headTopLogoInputBox {
-        width: 300px;
-        color: #333;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        button {
-          border-radius: 0 !important;
-          background: #19499F !important;
-        }
-      }
-    }
-  }
-  
-</style>

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

@@ -1,37 +0,0 @@
-<template>
-  <div class="footerSectorBox">
-    <footerMenu />
-    <footerInfo />
-  </div>
-</template>
-
-<script>
-import footerMenu from './components/footerMenu.vue';
-import footerInfo from './components/footerInfo.vue';
-
-export default {
-  props: {
-    
-  },
-  components: {
-    footerMenu,
-    footerInfo
-  },
-  data() {
-    return {
-      
-    };
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .footerSectorBox {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    background: #19499F;
-  }
-</style>

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

@@ -1,67 +0,0 @@
-<template>
-  <div class="friendShipLinkSectorBox">
-    <div class="friendShipLinkSectorTitle">
-      <editBtn :id="id" :sort="0" :type="7" :size="1"/>
-      <convertBtn :id="id" :sort="0" :type="2"/>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 1">
-        <title1Style />
-      </div>
-    </div>
-    <div class="friendShipLinkSectorItemBox">
-      <editBtn :id="id" :sort="0" :type="4" :size="1"/>
-      <convertBtn :id="id" :sort="0" :type="9"/>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 1">
-        <link1Style />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-//编辑按钮
-import editBtn from '../../public/editBtn.vue'
-import convertBtn from '../../public/convertBtn.vue'
-//标题组件
-import title1Style from './components/title/1.vue'
-//友情链接组件
-import link1Style from './components/link/1.vue'
-
-export default {
-  components: {
-    editBtn,
-    convertBtn,
-    title1Style,
-    link1Style
-  },
-  props: {
-    id:{
-      type:Number,
-      default:0
-    }
-  },
-  data() {
-    return {
-      
-    };
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .friendShipLinkSectorBox {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .friendShipLinkSectorTitle {
-      width: 80%;
-      border: 2px dashed #999;
-      position: relative;
-    }
-    .friendShipLinkSectorItemBox {
-      width: 80%;
-      border: 2px dashed #999;
-      position: relative;
-    }
-  }
-</style>

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

@@ -1,35 +0,0 @@
-<template>
-  <div class="headSectorBox">
-    <header1Style />
-  </div>
-</template>
-
-<script>
-import header1Style from './components/header/1.vue';
-
-export default {
-  props: {
-    
-  },
-  components: {
-    header1Style,
-  },
-  data() {
-    return {
-      
-    };
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .headSectorBox {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    background: url('../../../../assets/template/component/style1topbg.png') no-repeat center center;
-    background-size: 100% 100%;
-  }
-</style>

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

@@ -1,66 +0,0 @@
-<template>
-  <div class="imgTitleSectorBox">
-    <div class="imgSectorBox">
-      <editBtn :id="id" :sort="0" :type="3" :size="1"/>
-      <convertBtn :id="id" :sort="0" :type="3"/>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 1">
-        <useStyle1 />
-      </div>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 2">
-        <useStyle2 />
-      </div>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 3">
-        <useStyle3 />
-      </div>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 4">
-        <useStyle4 />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import editBtn from '../../public/editBtn.vue'
-import convertBtn from '../../public/convertBtn.vue'
-import useStyle1 from './components/advertisement/1.vue'
-import useStyle2 from './components/advertisement/2.vue'
-import useStyle3 from './components/advertisement/3.vue'
-import useStyle4 from './components/advertisement/4.vue'
-
-export default {
-  components: {
-    editBtn,
-    convertBtn,
-    useStyle1,
-    useStyle2,
-    useStyle3,
-    useStyle4
-  },
-  props: {
-    id:{
-      type:Number,
-      default:0
-    }
-  },
-  data() {
-    return {
-      
-    };
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .imgTitleSectorBox {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .imgSectorBox {
-      //border: 2px dashed #999;
-      width: 80%;
-      height: 60px;
-      position: relative;
-    }
-  }
-</style>

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

@@ -1,110 +0,0 @@
-<template>
-  <div class="listSectorBox">
-    <div class="listSectorBoxTitle">
-      <editBtn :id="id" :sort="0" :type="7" :size="1"/>
-      <convertBtn :id="id" :sort="0" :type="2"/>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 1">
-        <title1Style />
-      </div>
-    </div>
-    <div class="listSectorBoxContent">
-      <div class="listNewsLeft">
-        <editBtn :id="id" :sort="1" :type="1" :size="5"/>
-        <convertBtn :id="id" :sort="1" :type="6"/>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 1">
-          <list1Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 2">
-          <list2Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 3">
-          <list3Style />
-        </div>
-      </div>
-      <div class="listNewsRight">
-        <editBtn :id="id" :sort="2" :type="1" :size="5"/>
-        <convertBtn :id="id" :sort="2" :type="6"/>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 1">
-          <list1Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 2">
-          <list2Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 3">
-          <list3Style />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-//编辑按钮
-import editBtn from '../../public/editBtn.vue'
-import convertBtn from '../../public/convertBtn.vue'
-//标题组件
-import title1Style from './components/title/1.vue'
-//新闻列表组件
-import list1Style from './components/list/1.vue'
-import list2Style from './components/list/2.vue'
-import list3Style from './components/list/3.vue'
-// import styleTitle from './components/styleTitle.vue';
-// import listNews from './components/listNews.vue';
-
-export default {
-  components: {
-    editBtn, 
-    convertBtn,
-    title1Style,
-    list1Style,
-    list2Style,
-    list3Style
-  },
-  props: {
-    id:{
-      type:Number,
-      default:0
-    }
-  },
-  data() {
-    return {
-      
-    };
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .listSectorBox {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width:100%;
-    .listSectorBoxTitle {
-      width: 80%;
-      border: 2px dashed #999;
-      height: 41px;
-      position: relative;
-    }
-    .listSectorBoxContent {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 80%;
-      .listNewsLeft {
-        width: 50%;
-        box-sizing: border-box;
-        border: 2px dashed #999;
-        padding-right: 10px;
-        position: relative;
-      }
-      .listNewsRight {
-        width: 50%;
-        box-sizing: border-box;
-        border: 2px dashed #999;
-        padding-left: 10px;
-        position: relative;
-      }
-    }
-  }
-</style>

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

@@ -1,134 +0,0 @@
-<template>
-  <div class="manyPictureSectorBox">
-    <div class="manyPictureSectorBoxTitle">
-      <editBtn :id="id" :sort="0" :type="7" :size="1"/>
-      <convertBtn :id="id" :sort="0" :type="2"/>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 1">
-        <title1Style />
-      </div>
-    </div>
-    <div class="manyPictureImgBox">
-      <editBtn :id="id" :sort="1" :type="6"/>
-      <convertBtn :id="id" :sort="1" :type="7"/>
-      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 1">
-        <staticHtml1Style />
-      </div>
-    </div>
-    <div class="manyPictureNewsBox">
-      <div class="manyPictureNewsItem">
-        <editBtn :id="id" :sort="2" :type="1" :size="5"/>
-        <convertBtn :id="id" :sort="2" :type="6"/>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 1">
-          <list1Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 2">
-          <list2Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[2].component_style == 3">
-          <list3Style />
-        </div>
-      </div>
-      <div class="manyPictureNewsItem">
-        <editBtn :id="id" :sort="3" :type="1" :size="5"/>
-        <convertBtn :id="id" :sort="3" :type="6"/>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[3].component_style == 1">
-          <list1Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[3].component_style == 2">
-          <list2Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[id].content.componentList[3].component_style == 3">
-          <list3Style />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-//编辑按钮
-import editBtn from '../../public/editBtn.vue'
-import convertBtn from '../../public/convertBtn.vue'
-//标题组件
-import title1Style from './components/title/1.vue'
-//静态组件
-import staticHtml1Style from './components/staticHtml/1.vue'
-//新闻列表组件
-import list1Style from './components/list/1.vue'
-import list2Style from './components/list/2.vue'
-import list3Style from './components/list/3.vue'
-
-
-export default {
-  components: {
-    editBtn,
-    convertBtn,
-    title1Style,
-    staticHtml1Style,
-    list1Style,
-    list2Style,
-    list3Style
-  },
-  props: {
-    id:{
-      type:Number,
-      default:0
-    }
-  },
-  data() {
-    return {
-      
-    };
-  },
-  methods: {
-    
-  },
-  mounted() {
-    
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .manyPictureSectorBox {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width:100%;
-    position: relative;
-    .manyPictureImgBox {
-      width: 80%;
-      position: relative;
-    }
-    .manyPictureSectorBoxTitle {
-      width: 80%;
-      border: 2px dashed #999;
-      height: 41px;
-      position: relative;
-    }
-    .manyPictureSectorBox {
-      width: 80%;
-      //border: 1px dashed #999;
-    }
-    .manyPictureNewsBox {
-      width: 80%;
-      //border: 1px dashed #999;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .manyPictureNewsItem {
-        width: 50%;
-        border: 2px dashed #999;
-        box-sizing: border-box;
-        position: relative;
-      }
-      .manyPictureNewsItem:nth-child(1) {
-        padding-right: 10px;
-      }
-      .manyPictureNewsItem:nth-child(2) {
-        padding-left: 10px;
-      }
-    }
-  }
-</style>
-

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

@@ -1,145 +0,0 @@
-<template>
-  <div class="menuSectorBox">
-    <div class="menuBoxBg">
-      <div class="menuBox" ref="menuBox">
-        <div>首页</div>
-        <div v-for="item in this.$store.state.template.webSiteMenu">{{item.name}}</div>
-      </div>
-    </div>
-    <div class="menuSectorInputBox">
-      <div class="menuSectorInputBoxItem">
-        行政职能查询：
-        <el-select v-model="departments" filterable placeholder="请选择职能部门">
-          <el-option
-            v-for="item in this.$store.state.template.departmentList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id">
-          </el-option>
-        </el-select>
-      </div>
-      <div class="menuSectorInputBoxItem">
-        行政区划查询：
-        <el-select v-model="area.economize" placeholder="请选择省.." @change="changeMarket">
-          <el-option
-            v-for="item in this.$store.state.template.area.economize"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id">
-          </el-option>
-        </el-select>
-        <el-select v-model="area.market" placeholder="请选择市.." @change="changeCounty">
-          <el-option
-            v-for="item in this.$store.state.template.area.market"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id">
-          </el-option>
-        </el-select>
-        <el-select v-model="area.county" placeholder="请选择县..">
-          <el-option
-            v-for="item in this.$store.state.template.area.county"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id">
-          </el-option>
-        </el-select>
-      </div>
-    </div>
-  </div>
-  
-</template>
-
-<script>
-export default {
-  props: {
-    id: {
-      type: Number,
-      default: 0
-    }
-  },
-  data() {
-    return {
-      area:{//地区
-        economize:"",//省区
-        market:"",//市区
-        county:""//县区
-      },
-      departments:""
-    };
-  },
-  methods: {
-    //选择市
-    changeMarket(){
-      this.area.market = "";
-      this.area.county = "";
-      this.$store.dispatch('template/selectWebsiteArea',{province:this.area.economize});
-    },
-    //选择县
-    changeCounty(data){
-      this.area.county = "";
-      this.$store.dispatch('template/selectWebsiteArea',{province:this.area.economize,city:this.area.market});
-    }
-  },
-  mounted() {
-    //获取当前元素的个数，现在一行是8个，每个高度是30px
-    // let h = Math.floor(this.$store.state.template.webSiteMenu.length / 8) + (this.$store.state.template.webSiteMenu.length % 8 > 0 ? 1 : 0);
-    // let menuH = (h*3)+4;
-    // this.$store.commit('template/setIndexModuleHeight',{i:this.id,h:menuH});
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .menuSectorBox {
-    width: 100%;
-    .menuBoxBg {
-      width: 100%;
-      background: #19499F;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .menuBox {
-        width: 80%;
-        box-sizing: border-box;
-        border-left: 2px dashed #999;
-        border-right: 2px dashed #999;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        div {
-          width: 12.5%;
-          font-size: 14px;
-          height: 30px;
-          line-height: 30px;
-          text-align: center;
-          overflow: hidden; 
-          white-space: nowrap; 
-          text-overflow: ellipsis; 
-          text-align: center;
-          color: #fff;
-        }
-      }
-    }
-    .menuSectorInputBox {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 14px;
-      width: 80%;
-      margin: 0 auto;
-      border: 2px dashed #999;
-      border-top: none;
-      .menuSectorInputBoxItem {
-        .el-input {
-          width: 100px;
-        }
-      }
-    }
-  }
-  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
-  ::v-deep .menuSectorInputBox .menuSectorInputBoxItem .el-input {
-    width: 100px !important;
-  }
-  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
-</style>

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

@@ -1,48 +0,0 @@
-<template>
-  <div class="onlyImgSectorBox">
-    <div class="onlyImgSectorPositionBox">
-      <editBtn :id="id" :sort="0" :type="6" :size="1"/>
-      <!-- <convertBtn :id="id" :sort="0" :type="3"/> -->
-      <staticHtml2Style />
-    </div>
-  </div>
-</template>
-
-<script>
-import editBtn from '../../public/editBtn.vue'
-import convertBtn from '../../public/convertBtn.vue'
-import staticHtml2Style from './components/staticHtml/2.vue'
-
-export default {
-  components: {
-    editBtn,
-    convertBtn,
-    staticHtml2Style
-  },
-  props: {
-    id:{
-      type:Number,
-      default:0
-    },
-  },
-  data() {
-    return {
-      
-    };
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .onlyImgSectorBox {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .onlyImgSectorPositionBox {
-      width: 80%;
-      height: 100%;
-      position: relative;
-    }
-  }
-</style>

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

@@ -1,35 +0,0 @@
-<template>
-  <div class="headSectorBox">
-    <header1Style />
-  </div>
-</template>
-
-<script>
-import header1Style from '../components/header/1.vue';
-
-export default {
-  props: {
-    
-  },
-  components: {
-    header1Style,
-  },
-  data() {
-    return {
-      
-    };
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .headSectorBox {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    background: url('../../../../../assets/template/component/style1topbg.png') no-repeat center center;
-    background-size: 100% 100%;
-  }
-</style>

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

@@ -1,155 +0,0 @@
-<template>
-  <div class="menuSectorBox">
-    <div class="menuBoxBg">
-      <div :class="['menuBox',{componentBorder: this.$store.state.template.previewStatus==false}]" ref="menuBox">
-        <div>首页</div>
-        <div v-for="item in this.$store.state.template.webSiteMenu">{{item.name}}</div>
-      </div>
-    </div>
-    <div :class="['menuSectorInputBox',{componentMenuBorder: this.$store.state.template.previewStatus==false}]">
-      <div class="menuSectorInputBoxItem">
-        行政职能查询：
-        <el-select v-model="departments" filterable placeholder="请选择职能部门">
-          <el-option
-            v-for="item in this.$store.state.template.departmentList"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value">
-          </el-option>
-        </el-select>
-      </div>
-      <div class="menuSectorInputBoxItem">
-        行政区划查询：
-        <el-select v-model="area.economize" placeholder="请选择省.." @change="changeMarket">
-          <el-option
-            v-for="item in this.$store.state.template.area.economize"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id">
-          </el-option>
-        </el-select>
-        <el-select v-model="area.market" placeholder="请选择市.." @change="changeCounty">
-          <el-option
-            v-for="item in this.$store.state.template.area.market"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id">
-          </el-option>
-        </el-select>
-        <el-select v-model="area.county" placeholder="请选择县..">
-          <el-option
-            v-for="item in this.$store.state.template.area.county"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id">
-          </el-option>
-        </el-select>
-      </div>
-    </div>
-  </div>
-  
-</template>
-
-<script>
-export default {
-  props: {
-    
-  },
-  data() {
-    return {
-      area:{//地区
-        economize:"",//省区
-        market:"",//市区
-        county:""//县区
-      },
-      departments:""
-    };
-  },
-  methods: {
-    //选择市
-    changeMarket(){
-      this.area.market = "";
-      this.area.county = "";
-      this.$store.dispatch('template/selectWebsiteArea',{province:this.area.economize});
-    },
-    //选择县
-    changeCounty(data){
-      this.area.county = "";
-      this.$store.dispatch('template/selectWebsiteArea',{province:this.area.economize,city:this.area.market});
-    }
-  },
-  mounted() {
-    //获取当前元素的个数，现在一行是8个，每个高度是30px
-    // let h = Math.floor(this.$store.state.template.webSiteMenu.length / 8) + (this.$store.state.template.webSiteMenu.length % 8 > 0 ? 1 : 0);
-    // let menuH = (h*3)+4;
-    // this.$store.commit('template/setIndexModuleHeight',{i:this.id,h:menuH});
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .menuSectorBox {
-    width: 100%;
-    background: #F5F7FB;
-    .menuBoxBg {
-      width: 100%;
-      background: #19499F;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .componentBorder{
-        border-left: 2px dashed #999;
-        border-right: 2px dashed #999;
-      }
-      .menuBox {
-        width: 80%;
-        box-sizing: border-box;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        div {
-          width: 12.5%;
-          font-size: 14px;
-          height: 30px;
-          line-height: 30px;
-          text-align: center;
-          overflow: hidden; 
-          white-space: nowrap; 
-          text-overflow: ellipsis; 
-          text-align: center;
-          color: #fff;
-        }
-      }
-    }
-    .menuSectorInputBox {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 14px;
-      width: 80%;
-      margin: 0 auto;
-      border-top: none;
-      height: 50px;
-      .menuSectorInputBoxItem {
-        padding: 0 10px;
-        input{
-          margin-right: 10px;
-        }
-        .el-select {
-          margin-right: 10px;
-        }
-      }
-    }
-    .componentMenuBorder {
-      border: 2px dashed #999;
-    }
-  }
-  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
-  ::v-deep .menuSectorInputBox .menuSectorInputBoxItem .el-input {
-    width: 130px !important;
-  }
-  ::v-deep .el-input--medium .el-input__inner {
-    border-radius: 20px;
-  }
-  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
-</style>

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

@@ -1,37 +0,0 @@
-<template>
-  <div class="footerSectorBox">
-    <footerMenu />
-    <footerInfo />
-  </div>
-</template>
-
-<script>
-import footerMenu from '../components/footer/menu/1.vue';
-import footerInfo from '../components/footer/info/1.vue';
-
-export default {
-  props: {
-    
-  },
-  components: {
-    footerMenu,
-    footerInfo
-  },
-  data() {
-    return {
-      
-    };
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .footerSectorBox {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    background: #19499F;
-  }
-</style>

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

@@ -1,110 +0,0 @@
-<template>
-  <div :class="['imgTitleSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
-    <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"/>
-      <!--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>
-      <!--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>
-      <!--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>
-
-<script>
-import editBtn from '../../../public/editBtn.vue'
-import convertBtn from '../../../public/convertBtn.vue'
-import useStyle1 from '../components/advertisement/1.vue'
-import useStyle2 from '../components/advertisement/2.vue'
-import useStyle3 from '../components/advertisement/3.vue'
-import useStyle4 from '../components/advertisement/4.vue'
-
-export default {
-  components: {
-    editBtn,
-    convertBtn,
-    useStyle1,
-    useStyle2,
-    useStyle3,
-    useStyle4
-  },
-  props: {
-    id:{
-      type:Number,
-      default:0
-    },
-    y:{
-      type:Number,
-      default:0
-    },
-    dataSort:{
-      type:Number,
-      default:0
-    }
-  },
-  data() {
-    return {
-      
-    };
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .imgTitleSectorBox {
-    width: 100%;
-    height: auto;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    height: 60px;
-    .imgSectorBox {
-      //border: 2px dashed #999;
-      width: 80%;
-      height: 60px;
-      position: relative;
-    }
-  }
-</style>

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

@@ -1,133 +0,0 @@
-<template>
-  <div :class="['bannerBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
-    <div :class="['itemTopBox', {componentBorder: $store.state.template.previewStatus==false}]">
-      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="1" :y="y"/>
-      <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="1"/>
-      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
-        <mainTitleStyle1 />
-      </div>
-      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
-        <mainTitleStyle2 />
-      </div>
-    </div>
-    <div class="itemBottomBox">
-      <div class="bannerLayerBox">
-        <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="1" :size="3" :y="y"/>
-        <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="4"/>
-        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
-          <banner1Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 2">
-          <banner2Style />
-        </div>
-      </div>
-      <div :class="['NewsListBox', {componentBorder: $store.state.template.previewStatus==false}]">
-        <editBtn :id="id" :dataSort="dataSort"  :sort="2" :type="2" :size="5" :y="y"/>
-        <convertBtn :id="id" :dataSort="dataSort" :sort="2" :type="5"/>
-        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 1">
-          <tabs1Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 2">
-          <tabs2Style />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-//编辑按钮
-import editBtn from '../../../public/editBtn.vue'
-import convertBtn from '../../../public/convertBtn.vue'
-//标题组件
-import mainTitleStyle1 from '../components/mainTitle/1.vue'
-import mainTitleStyle2 from '../components/mainTitle/2.vue'
-//banner组件
-import banner from '../components/banner.vue'
-import banner1Style from '../components/banner/1.vue'
-import banner2Style from '../components/banner/2.vue'
-//tabs组件
-import tabs1Style from '../components/tabs/1.vue'
-import tabs2Style from '../components/tabs/2.vue'
-
-export default {
-  components: {
-    //mainTitle,
-    banner,
-    editBtn,
-    convertBtn,
-    mainTitleStyle1,
-    mainTitleStyle2,
-    banner1Style,
-    banner2Style,
-    tabs1Style,
-    tabs2Style
-  },
-  props: {
-    id:{
-      type:Number,
-      default:0
-    },
-    y:{
-      type:Number,
-      default:0
-    },
-    dataSort:{
-      type:Number,
-      default:0
-    }
-  },
-  data() {
-    return {
-      
-    };
-  },
-  methods: {
-    
-  },
-  mounted() {
-    
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .bannerBox {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 314px;
-    .componentBorder{
-      border: 2px dashed #999;
-    }
-    .itemTopBox {
-      position: relative;
-      //border: 2px dashed #999;
-      width: 80%;
-    }
-    .itemBottomBox {
-      width: 80%;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 14px 0 0 0;
-      padding-top: 20px;
-      .bannerLayerBox {
-        position: relative;
-        //border: 2px dashed #999;
-        width: 55%;
-        height: 226px;
-      }
-      .NewsListBox {
-        position: relative;
-        width: 45%;
-        //border: 2px dashed #999;
-        box-sizing: border-box;
-        padding-left: 20px;
-        height: 226px;
-      }
-    }
-    
-  }
-</style>

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

@@ -1,146 +0,0 @@
-<template>
-  <div :class="['manyPictureSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
-    <div :class="['manyPictureSectorBoxTitle', {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 />
-      </div>
-    </div>
-    <div class="manyPictureImgBox">
-      <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="6" :y="y"/>
-      <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="7"/>
-      <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
-        <staticHtml1Style />
-      </div>
-    </div>
-    <div class="manyPictureNewsBox">
-      <div :class="['manyPictureNewsItem', {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.index[dataSort].content.componentList[2].component_style == 1">
-          <list1Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 2">
-          <list2Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[2].component_style == 3">
-          <list3Style />
-        </div>
-      </div>
-      <div :class="['manyPictureNewsItem', {componentBorder: $store.state.template.previewStatus==false}]">
-        <editBtn :id="id" :dataSort="dataSort" :sort="3" :type="1" :size="5" :y="y"/>
-        <convertBtn :id="id" :dataSort="dataSort" :sort="3" :type="6"/>
-        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[3].component_style == 1">
-          <list1Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[3].component_style == 2">
-          <list2Style />
-        </div>
-        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[3].component_style == 3">
-          <list3Style />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-//编辑按钮
-import editBtn from '../../../public/editBtn.vue'
-import convertBtn from '../../../public/convertBtn.vue'
-//标题组件
-import title1Style from '../components/title/1.vue'
-//静态组件
-import staticHtml1Style from '../components/staticHtml/1.vue'
-//新闻列表组件
-import list1Style from '../components/list/1.vue'
-import list2Style from '../components/list/2.vue'
-import list3Style from '../components/list/3.vue'
-
-
-export default {
-  components: {
-    editBtn,
-    convertBtn,
-    title1Style,
-    staticHtml1Style,
-    list1Style,
-    list2Style,
-    list3Style
-  },
-  props: {
-    id:{
-      type:Number,
-      default:0
-    },
-    y:{
-      type:Number,
-      default:0
-    },
-    dataSort:{
-      type:Number,
-      default:0
-    }
-  },
-  data() {
-    return {
-      
-    };
-  },
-  methods: {
-    
-  },
-  mounted() {
-    
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .manyPictureSectorBox {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width:100%;
-    position: relative;
-    height: 475px;
-    .componentBorder{
-      border: 2px dashed #999;
-    }
-    .manyPictureImgBox {
-      width: 80%;
-      position: relative;
-    }
-    .manyPictureSectorBoxTitle {
-      width: 80%;
-      //border: 2px dashed #999;
-      height: 41px;
-      position: relative;
-    }
-    .manyPictureSectorBox {
-      width: 80%;
-      //border: 1px dashed #999;
-    }
-    .manyPictureNewsBox {
-      width: 80%;
-      //border: 1px dashed #999;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .manyPictureNewsItem {
-        width: 50%;
-        //border: 2px dashed #999;
-        box-sizing: border-box;
-        position: relative;
-      }
-      .manyPictureNewsItem:nth-child(1) {
-        padding-right: 10px;
-      }
-      .manyPictureNewsItem:nth-child(2) {
-        padding-left: 10px;
-      }
-    }
-  }
-</style>
-

src/views/template/style/1/components/advertisement/1.vue → src/views/template/style/components/advertisement/1.vue

@@ -25,11 +25,9 @@ export default {
 
 <style scoped lang="less">
   .advertisementBox {
-    width: 100%;
-    height: 58px;
     img {
-      width: 100%;
-      height: 58px;
+      width: 1200px;
+      height: 90px;
       display: block;
     }
   }