.env.dev

@@ -2,6 +2,11 @@
 ENV = 'dev'
 
 # base api
-VUE_APP_BASE_API = 'http://183.131.25.186:9501'
+VUE_APP_BASE_API = 'http://admindev.bjzxtw.org.cn:9501'
+#http://admindev.bjzxtw.org.cn:9501
+#ws://admindev.bjzxtw.org.cn:9506
+
+#http://183.131.25.186:9501
+#ws://183.131.25.186:9506
 # base websocket
-VUE_APP_BASE_WEBSOCKET = 'ws://183.131.25.186:9506'
+VUE_APP_BASE_WEBSOCKET = 'ws://admindev.bjzxtw.org.cn:9506'

.env.development

@@ -1,9 +1,15 @@
 # just a flag
 ENV = 'development'
 
-VUE_APP_BASE_WEBSOCKET = 'ws://183.131.25.186:9506'
+VUE_APP_BASE_WEBSOCKET = 'ws://admindev.bjzxtw.org.cn:9506'
+#ws://183.131.25.186:9506
+#http://183.131.25.186:9501
+
+#http://admindev.bjzxtw.org.cn:9501
+#ws://admindev.bjzxtw.org.cn:9506
+
 # base api
-VUE_APP_BASE_API = 'http://183.131.25.186:9501'
+VUE_APP_BASE_API = 'http://admindev.bjzxtw.org.cn:9501'
 '
 
 

src/api/cms.js

@@ -83,19 +83,19 @@ export function selectWebsiteArticleInfo(params) {
   })
 }
 
-//2.0 获取所有职能
-export function getAllDepartment(params) {
+//2.0 获得所有1级网站导航
+export function getWebsiteCategory(params) {
   return request({
-    url: '/public/getAllDepartment',
+    url: '/web/getWebsiteCategory',
     method: 'get',
     params
   })
 }
 
-//2.1 获得所有1级网站导航
-export function getWebsiteCategory(params) {
+//2.0 获得所有职能部门
+export function getAllDepartment(params) {
   return request({
-    url: '/web/getWebsiteCategory',
+    url: '/public/getAllDepartment',
     method: 'get',
     params
   })

src/api/template.js

@@ -74,4 +74,48 @@ export function getWebsiteTemplateclassintel(data) {
   })
 }
 
+//1.9 保存模板配置
+export function addWebsiteTemplate(data) {
+  return request({
+    url: '/website/addWebsiteTemplate',
+    method: 'post',
+    data
+  })
+}
+
+//1.10 获取模板配置信息
+export function getWebsiteTemplateInfo(params) {
+  return request({
+    url: '/website/getWebsiteTemplateInfo',
+    method: 'get',
+    params
+  })
+}
+
+//1.11 预览数据
+export function getWebsiteTemplateData(params) {
+  return request({
+    url: '/website/getWebsiteTemplateData',
+    method: 'get',
+    params
+  })
+}
+
+//1.12 板块列表
+export function templateSectorList(params) {
+  return request({
+    url: '/website/templateSectorList',
+    method: 'get',
+    params
+  })
+}
+
+//1.13 组件列表
+export function sectorComponentList(params) {
+  return request({
+    url: '/website/sectorComponentList',
+    method: 'get',
+    params
+  })
+}
 //自助建站 end ------------------------------------->

src/layout/components/Navbar.vue

@@ -27,6 +27,9 @@
           <!-- <i class="el-icon-caret-bottom" /> -->
         </div>
         <el-dropdown-menu slot="dropdown">
+          <a :href="'http://' + this.$store.state.user.userurl">
+            <el-dropdown-item>返回用户端</el-dropdown-item>
+          </a> 
           <router-link to="/profile/index">
             <div class="userMenuDownItem">
               <el-dropdown-item>

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

@@ -47,6 +47,7 @@ export default {
             component_name:"",
             sort:1,
             componentData:{
+              ad_id:"",//广告位id
               text:"通栏广告", //广告位名称
               width:1200, //广告位宽度
               height:60, //广告位高度

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

@@ -83,6 +83,7 @@ export default {
             component_name:"",
             sort:1,
             componentData:{
+              ad_id:"",//广告位id
               text:"通栏广告", //广告位名称
               width:1200, //广告位宽度
               height:60, //广告位高度

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

@@ -47,6 +47,7 @@ export default {
             component_name:"",
             sort:1,
             componentData:{
+              ad_id:"",//广告位id
               text:"通栏广告", //广告位名称
               width:1200, //广告位宽度
               height:60, //广告位高度

src/router/index.js

@@ -222,86 +222,86 @@ export const constantRoutes = [
       }
     ]
   },
-  // {
-  //   path: '/tabbar',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       name: '',
-  //       path: '',
-  //       component: () => import('@/views/tabbar/tabbar.vue'),
-  //       meta: {
-  //         title: '底部导航栏',
-  //         hidden: true,
-  //         breadcrumb: true
-  //       }
-  //     }
-  //   ]
-  // },
-  // {
-  //   path: '/tabbarDetail',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       name: '',
-  //       path: '',
-  //       component: () => import('@/views/tabbar/tabbarDetail.vue'),
-  //       meta: {
-  //         title: '导航详情',
-  //         hidden: true,
-  //         breadcrumb: true
-  //       }
-  //     }
-  //   ]
-  // },
-  // {
-  //   path: '/style',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       name: '',
-  //       path: '',
-  //       component: () => import('@/views/componentGallery/style.vue'),
-  //       meta: {
-  //         title: '风格',
-  //         hidden: true,
-  //         breadcrumb: true
-  //       }
-  //     }
-  //   ]
-  // },
-  // {
-  //   path: '/plate',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       name: '',
-  //       path: '',
-  //       component: () => import('@/views/componentGallery/plate.vue'),
-  //       meta: {
-  //         title: '版块',
-  //         hidden: true,
-  //         breadcrumb: true
-  //       }
-  //     }
-  //   ]
-  // },
-  // {
-  //   path: '/module',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       name: '',
-  //       path: '',
-  //       component: () => import('@/views/componentGallery/module.vue'),
-  //       meta: {
-  //         title: '组件',
-  //         hidden: true,
-  //         breadcrumb: true
-  //       }
-  //     }
-  //   ]
-  // },
+  {
+    path: '/tabbar',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/tabbar/tabbar.vue'),
+        meta: {
+          title: '底部导航栏',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/tabbarDetail',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/tabbar/tabbarDetail.vue'),
+        meta: {
+          title: '导航详情',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/style',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/style.vue'),
+        meta: {
+          title: '风格',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/plate',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/plate.vue'),
+        meta: {
+          title: '版块',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/module',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/module.vue'),
+        meta: {
+          title: '组件',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
 
   // {
   //   path: '/documentation',

src/store/getters.js

@@ -12,6 +12,7 @@ const getters = {
   roles: state => state.user.roles,
   permission_routes: state => state.permission.routes,
   errorLogs: state => state.errorLog.logs,
-  SiteId: state => state.template.editWebsiteId
+  SiteId: state => state.template.editWebsiteId,
+  userurl: state => state.user.userurl
 }
 export default getters

src/store/modules/template.js

@@ -1,8 +1,8 @@
-//cms中的接口 用于模板中的职能，导航池
-import {getSiteInfo,getSiteCategory,selectWebsiteDepartment,selectWebsiteArea,getWebsiteArticlesList,selectWebsiteArticleInfo,getWebsiteCategory} from '@/api/cms'
+//cms中的接口 获取网站基本信息，网站导航，网站底部导航，网站行政区划，行政职能
+import {getSiteInfo,getSiteCategory,getFooterCategoryList,selectWebsiteArea,selectWebsiteDepartment } from '@/api/cms'
 //自助建站的接口 用于添加基本信息
 import {getWebsiteintel,addWebsiteTemplateintel,getWebsiteTemplateintel,upWebsiteTemplateintel,getAllTemplateClass,getWebsiteTemplateList,addWebsiteTemplateclassintel,
-  getWebsiteTemplateclassintel} from '@/api/template'
+  getWebsiteTemplateclassintel,addWebsiteTemplate,getWebsiteTemplateInfo,getWebsiteTemplateData} from '@/api/template'
 
 import { Message } from 'element-ui'; //注意在这里引入是非常不符合规范的
 
@@ -10,11 +10,15 @@ import Vue from 'vue';  //导入Vue 因为我们要进行深层次的json修改
 //所以我们需要使用Vue的$set方法来强制视图更新，在vuex中没有this，这里我们需要通过引入vue来使用vue.$set
 
 //引入随机模板json
-import randomTemplateJson from '@/utils/templateJson/index/1.js';//首页
+//首页 风格1
+import randomIndex1 from '@/utils/templateJson/index/style1/1.js';
+//首页 风格2
+import randomIndex2 from '@/utils/templateJson/index/style1/2.js';
 
 const state = {
   //0.全局配置 start------------------------------------------------------------> 
   editWebsiteId: "",//当前编辑网站的id
+  editWebsiteClass:"",//当前编辑网站的风格
   stepStatus: true,//是否显示现在进行到哪一步：true=显示 false=不显示
   //0.全局配置 end------------------------------------------------------------>
   
@@ -23,12 +27,23 @@ const state = {
   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:[],//列表页bang
+    list:[],//列表页
     article:[],//详情页
     search:[],//搜索页
     aloneList:[],//自定义列表页
@@ -50,7 +65,7 @@ const state = {
     market:[],//市区
     county:[]//县区
   },
-  departmentList:"",//职能部门
+  departmentList:[],//职能部门
   //2.站点数据 end------------------------------------------------------------>
 
   //3.画布构造 start------------------------------------------------------------>
@@ -85,11 +100,11 @@ const state = {
   webSiteData:{
     //1.base网站基本信息
     base:{
-      websiteId:1,//网站id
+      websiteId:"",//网站id
     },
     //2.style信息
     style:{
-      styleId:1,//风格id
+      styleId:"",//风格id
     },
     //3.板块信息 header,menu,footer 是页面自带的无需构建
     template:{  
@@ -103,6 +118,7 @@ const state = {
       aloneArticle:[],//自定义详情页
     }
   },
+  canSubmit:false,//当前数据是否可以被提交
   //4.构造的网站数据 end------------------------------------------------------------>
 
   //5.组件回显数据 start------------------------------------------------------------>
@@ -121,6 +137,10 @@ const mutations = {
   setEditWebsiteId(state,id){
     state.editWebsiteId = id;
   },
+  //设置网站的风格
+  setClassNumber(state,id){
+    state.editWebsiteClass = id;
+  },
   //展示步骤
   showStepStatus(state){
     state.stepStatus = true;
@@ -251,6 +271,20 @@ const mutations = {
     //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对象
@@ -267,6 +301,7 @@ const mutations = {
         Message.error('最多只能添加10个模块！');
         return;
       }else{
+        console.log(data.jsonData)
         //判断是拖拽的还是点击添加进来的 click=点击
         if(data.source == "click"){
           console.log("通过点击添加一个板块");
@@ -279,19 +314,37 @@ const mutations = {
           console.log(data);
           //设置数据在构建json中的位置
           let dataSort = state.pageData.index.length;
-          //添加板块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
-          });
+          //判断添加的是否为广告模块 如果是 添加一个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);
@@ -310,19 +363,37 @@ const mutations = {
           console.log(data);
           //设置数据在构建json中的位置
           let dataSort = state.pageData.index.length;
-          //添加板块id  
-          state.pageData.index.push({
-            //i: state.pageData.index.length, //base 0.0.1 此方法会导致重复的id出现
-            i: id,
-            x: data.x, 
-            y: data.y, 
-            w: 12, 
-            h: data.h, 
-            type: data.type,
-            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-            content:data.jsonData,
-            dataSort:dataSort
-          });
+          //判断添加的是否为广告模块 如果是 添加一个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);
@@ -357,19 +428,37 @@ const mutations = {
           console.log(data);
           //设置数据在构建json中的位置
           let dataSort = state.pageData.list.length;
-
-          //添加板块id  
-          state.pageData.list.push({
-            i: id,
-            x: 0, 
-            y: maxY + 1, 
-            w: 12, 
-            h: data.h, 
-            type: data.type,
-            content:data.jsonData,
-            dataSort:dataSort
-          });
-
+          //判断添加的是否为广告模块 如果是 添加一个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,
+            });
+          }
         }
 
         //drag=拖拽
@@ -385,19 +474,37 @@ const mutations = {
           console.log(data);
           //设置数据在构建json中的位置
           let dataSort = state.pageData.list.length;
-          //添加板块id  
-          state.pageData.list.push({
-            //i: state.pageData.list.length, //base 0.0.1 此方法会导致重复的id出现
-            i: id,
-            x: data.x, 
-            y: data.y, 
-            w: 12, 
-            h: data.h, 
-            type: data.type,
-            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-            content:data.jsonData,
-            dataSort:dataSort
-          });
+          //判断添加的是否为广告模块 如果是 添加一个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);
@@ -418,6 +525,14 @@ const mutations = {
         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;
+        }
+        
         //判断是拖拽的还是点击添加进来的 click=点击
         if(data.source == "click"){
           console.log("通过点击添加一个板块");
@@ -430,19 +545,37 @@ const mutations = {
           console.log(data);
           //设置数据在构建json中的位置
           let dataSort = state.pageData.article.length;
-
-          //添加板块id  
-          state.pageData.article.push({
-            i: id,
-            x: 0, 
-            y: maxY + 1, 
-            w: 12, 
-            h: data.h, 
-            type: data.type,
-            content:data.jsonData,
-            dataSort:dataSort
-          });
-
+          //判断添加的是否为广告模块 如果是 添加一个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,
+            });
+          }
         }
 
         //drag=拖拽
@@ -458,19 +591,37 @@ const mutations = {
           console.log(data);
           //设置数据在构建json中的位置
           let dataSort = state.pageData.article.length;
-          //添加板块id  
-          state.pageData.article.push({
-            //i: state.pageData.article.length, //base 0.0.1 此方法会导致重复的id出现
-            i: id,
-            x: data.x, 
-            y: data.y, 
-            w: 12, 
-            h: data.h, 
-            type: data.type,
-            //sectorData:data.jsonData //base 0.0.1 此问题导致深层数据无法被视图渲染
-            content:data.jsonData,
-            dataSort:dataSort
-          });
+          //判断添加的是否为广告模块 如果是 添加一个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,
+            });
+          }
           console.log("当前添加模块的dataSort为：" + dataSort);
           //当前的页面构建数据
           console.log(state.pageData.article);
@@ -1167,6 +1318,12 @@ const mutations = {
   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);
@@ -1204,24 +1361,48 @@ const mutations = {
     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.webSiteData);
+    // console.log(state.editWebsiteId)
+    //给与网站id和模板风格id
+    state.webSiteData.base.websiteId = state.editWebsiteId;
+    state.webSiteData.style.styleId = state.editWebsiteClass;
   },
   //随机生成模板
   randomTemplate(state){
-    console.log("随机生成模板");
-    const randomIndex = Math.floor(Math.random() * 3); // Generates a random number between 1 and 2
+    state.loading = true;
+    const randomIndex = Math.floor(Math.random() * 2); // Generates a random number between 1 and 2
     console.log(`随机生成的数字是: ${randomIndex}`);
-
-    Message.warning("该功能研发中");
+    //console.log(randomIndex1)
+    //console.log(randomIndex2)
+    //Message.warning("该功能研发中");
 
     // pageStatus == 1 首页
-    if (state.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) {}
+    if (state.pageStatus == 3) {
+      Message.warning("暂无模板可用！");
+      state.loading = false;
+    }
     // pageStatus == 4 详情页
-    if (state.pageStatus == 4) {}
+    if (state.pageStatus == 4) {
+      Message.warning("暂无模板可用！");
+      state.loading = false;
+    }
     // pageStatus == 5 搜索页
     if (state.pageStatus == 5) {}
     // pageStatus == 6 自定义列表页
@@ -1229,6 +1410,63 @@ const mutations = {
     // 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;
+      }
+    }
+
+    //最后判断一下是否可以提交
+    if(state.canSubmit == ture){
+
+    }else{
+      Message.error('您还有未构建的页面，请检查！');
+    }
+  },
   //1.配置模块 end------------------------------------------------------------>
 
   //2.获取站点信息 start------------------------------------------------------------>
@@ -1255,6 +1493,17 @@ const mutations = {
       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 = []
@@ -1273,7 +1522,7 @@ const mutations = {
 
 const actions = {
   //1.显示画板组件数据 start------------------------------------------------------------>
-  //获取网站基本信息
+  //1.1 获取网站基本信息
   getSiteInfo({commit},data){
     return new Promise((resolve, reject) => {
       getSiteInfo(data).then(response => {
@@ -1284,7 +1533,7 @@ const actions = {
       })
     })
   },
-  //获取网站导航池
+  //1.2 获取网站导航池
   getSiteCategory({commit},data){
     return new Promise((resolve, reject) => {
       getSiteCategory(data).then(response => {
@@ -1295,42 +1544,32 @@ const actions = {
       })
     })
   },
-  //设置行政区划
-  selectWebsiteArea({commit},data){
+  //1.3 获取网站底部导航
+  getFooterCategoryList({commit},data){
     return new Promise((resolve, reject) => {
-      selectWebsiteArea(data).then(response => {
-        commit('setArea', response.data);
+      getFooterCategoryList(data).then(response => {
         resolve(response)
       }).catch(error => {
         reject(error)
       })
     })
   },
-  //获取新闻列表
-  getWebsiteArticlesList({commit},data){
-    return new Promise((resolve, reject) => {
-      getWebsiteArticlesList(data).then(response => {
-        resolve(response)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-  //获取新闻详情
-  selectWebsiteArticleInfo({commit},data){
+  //1.4 获取行政区划
+  selectWebsiteArea({commit},data){
     return new Promise((resolve, reject) => {
-      selectWebsiteArticleInfo(data).then(response => {
+      selectWebsiteArea(data).then(response => {
+        commit('setArea', response.data);
         resolve(response)
       }).catch(error => {
         reject(error)
       })
     })
   },
-  //获取全部导航池
-  getWebsiteCategory({commit},data){
+  //1.5 获取所有职能部门
+  selectWebsiteDepartment({commit},data){
     return new Promise((resolve, reject) => {
-      getWebsiteCategory(data).then(response => {
-        commit('setWebsiteCategory', response.data);
+      selectWebsiteDepartment(data).then(response => {
+        commit('setDepartment', response.data);
         resolve(response)
       }).catch(error => {
         reject(error)
@@ -1340,7 +1579,7 @@ const actions = {
   //1.显示画板组件数据 end------------------------------------------------------------>
   
   //2.构建网站json start------------------------------------------------------------>
-  //搜索网站
+  //2.1 搜索网站
   getWebsiteintel({commit},data){
     return new Promise((resolve, reject) => {
       getWebsiteintel(data).then(response => {
@@ -1350,7 +1589,7 @@ const actions = {
       })
     })
   },
-  //添加网站基本信息 如果只传入website_id，则验证是否已经关联导航池
+  //2.2 添加网站基本信息 如果只传入website_id，则验证是否已经关联导航池
   addWebsiteTemplateintel({commit},data){
     return new Promise((resolve, reject) => {
       addWebsiteTemplateintel(data).then(response => {
@@ -1360,7 +1599,7 @@ const actions = {
       })
     })
   },
-  //获取网站基本信息
+  //2.3 获取网站基本信息
   getWebsiteTemplateintel({commit},data){
     return new Promise((resolve, reject) => {
       getWebsiteTemplateintel(data).then(response => {
@@ -1370,7 +1609,7 @@ const actions = {
       })
     })
   },
-  //修改网站基本信息
+  //2.4 修改网站基本信息
   upWebsiteTemplateintel({commit},data){
     return new Promise((resolve, reject) => {
       upWebsiteTemplateintel(data).then(response => {
@@ -1380,7 +1619,7 @@ const actions = {
       })
     })
   },
-  //获取所有风格
+  //2.5 获取所有风格
   getAllTemplateClass({commit},data){
     return new Promise((resolve, reject) => {
       getAllTemplateClass(data).then(response => {
@@ -1390,7 +1629,7 @@ const actions = {
       })
     })
   },
-  //搜索并获取所有网站模板
+  //2.6 搜索并获取所有网站风格
   getWebsiteTemplateList({commit},data){
     return new Promise((resolve, reject) => {
       getWebsiteTemplateList(data).then(response => {
@@ -1400,7 +1639,7 @@ const actions = {
       })
     })
   },
-  //保存用户选择的模板
+  //2.7 保存用户选择的风格
   addWebsiteTemplateclassintel({commit},data){
     return new Promise((resolve, reject) => {
       addWebsiteTemplateclassintel(data).then(response => {
@@ -1410,7 +1649,7 @@ const actions = {
       })
     })
   },
-  //获取用户选择的模板
+  //2.8 获取用户选择的风格
   getWebsiteTemplateclassintel({commit},data){
     return new Promise((resolve, reject) => {
       getWebsiteTemplateclassintel(data).then(response => {
@@ -1420,6 +1659,36 @@ const actions = {
       })
     })
   },
+  //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------------------------------------------------------------>
 }
 

src/store/modules/user.js

@@ -1,6 +1,7 @@
 import { login, logout, getInfo, getMenu ,getImgCode,updateUserAvatarNickname } from '@/api/user'
-import { getToken, setToken, removeToken } from '@/utils/auth'
+import { getToken, setToken, setUserUrl, removeToken ,removUserUrl,getUserUrl } from '@/utils/auth'
 import router, { resetRouter } from '@/router'
+import axios from 'axios'
 
 const state = {
   token: getToken(),
@@ -9,13 +10,17 @@ const state = {
   introduction: '',
   roles: [],
   userid:'',
-  role_id:''
+  role_id:'',
+  userurl: getUserUrl(),
 }
 
 const mutations = {
   SET_TOKEN: (state, token) => {
     state.token = token
   },
+  SET_URL: (state, url) => {
+    state.userurl = url
+  },
   SET_INTRODUCTION: (state, introduction) => {
     state.introduction = introduction
   },
@@ -36,22 +41,58 @@ const mutations = {
   },
   // 退出登录逻辑直接放在 mutations 中
   LOGOUT(state) {
-    state.token = ''
-    state.roles = []
-    removeToken()
-    resetRouter()
+    state.token = '';
+    state.roles = [];
+    state.userid = '';
+    state.role_id = '';
+    state.name = '';
+    state.avatar = '';
+    state.introduction = '';
+    removeToken();
+    removUserUrl();
+    resetRouter();
+    //退出登录跳转回原网站
+    window.location.href = "http://" + state.userurl
   }
 }
 
 const actions = {
   // 用户登录
   login({ commit }, userInfo) {
-    const { username, password, type, captcha } = userInfo
+    const { username, password, type, captcha, code } = userInfo
+
+    //会员登录进入系统并储存
+    if(userInfo.userurl){
+      //设置axios请求头
+      axios.defaults.headers.common['userurl'] = userInfo.userurl
+    }
+    //会员登录不进入系统
+    if(userInfo.backurl){
+      //设置axios请求头
+      axios.defaults.headers.common['userurl'] = userInfo.backurl
+    }
+    
     return new Promise((resolve, reject) => {
-      login({ username: username.trim(), password: password, type: type, captcha: captcha.trim() }).then(response => {
-        const { data } = response
-        commit('SET_TOKEN', data.token)
-        setToken(data.token,data.exp)
+      login({ username: username.trim(), password: password, type: type, captcha: captcha.trim(), code: code}).then(response => {
+        const { data } = response;
+
+        //会员登录跳转 但不储存
+        if(userInfo.backurl){
+          //什么都不做
+          console.log("会员不进入系统！")
+        }
+
+        //会员登录进入系统，储存所属url
+        if(userInfo.userurl){
+          setUserUrl(userInfo.userurl,data.exp)
+          commit('SET_URL',userInfo.userurl)
+
+          //设置token
+          setToken(data.token,data.exp)
+          commit('SET_TOKEN',data.token)
+        }
+        
+
         resolve(response)
       }).catch(error => {
         reject(error)

src/utils/auth.js

@@ -1,6 +1,7 @@
 import Cookies from 'js-cookie'
 
 const TokenKey = 'Admin-Token'
+const useUrl = 'Back-Url'
 
 export function getToken() {
   return Cookies.get(TokenKey)
@@ -11,10 +12,23 @@ export function setToken(token,exp) {
   return Cookies.set(TokenKey, token, { expires: expdays })
 }
 
+export function setUserUrl(url,exp) {
+  const expdays = convertSecondsToDays(exp)
+  return Cookies.set(useUrl, url, { expires: expdays })
+}
+
+export function getUserUrl() {
+  return Cookies.get(useUrl)
+}
+
 export function removeToken() {
   return Cookies.remove(TokenKey)
 }
 
+export function removUserUrl() {
+  return Cookies.remove(useUrl)
+}
+
 //把秒转换成天
 function convertSecondsToDays(seconds) {
   return seconds/(60*60*24); //1天=60秒*60分钟*24小时

src/utils/baseUrl.js

@@ -1,13 +1,15 @@
 const URL = {
   //baseUrl: 'https://admin.bjzxtw.org.cn/zxtapi',//正式环境
-  baseUrl: 'http://183.131.25.186:9501',//测试环境
+  // baseUrl: 'http://183.131.25.186:9501',//测试环境
+  baseUrl: 'http://admindev.bjzxtw.org.cn:9501',//测试域名环境
   // baseUrl: 'http://192.168.1.201:9501',//刘佳伟本地环境
   // baseUrl:'http://192.168.1.115:9501',//冯蕊的本地环境
   //baseUrl: 'http://192.168.1.127:9501',//刘剑的本地环境
   //WebsocketUrl: 'ws://192.168.1.201:9506',//刘佳伟websocket地址
   //WebsocketUrl: 'ws://192.168.1.127:9506'//刘剑websocket地址
   //WebsocketUrl: 'ws://admin.bjzxtw.org.cn:9506'//正式环境websocket地址
-  WebsocketUrl: 'ws://183.131.25.186:9506'//测试服务器websocket地址
+  //WebsocketUrl: 'ws://183.131.25.186:9506'//测试服务器websocket地址
+  //WebsocketUrl: 'ws://admindev.bjzxtw.org.cn:9506'//测试域名服务器websocket地址
 }
 
 export default URL;

src/utils/request.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 import { MessageBox, Message } from 'element-ui'
 import store from '@/store'
-import { getToken } from '@/utils/auth'
+import { getToken,getUserUrl } from '@/utils/auth'
 import URL from '@/utils/baseUrl';
 
 // create an axios instance
@@ -23,9 +23,13 @@ service.interceptors.request.use(
       // please modify it according to the actual situation
       config.headers['token'] = getToken()
     }
-    if (store.getters.SiteId) {
-      config.headers['SiteId'] = store.getters.SiteId
+    if(store.getters.userurl){
+      //如果用户登录携带了userurl 就存起来
+      config.headers['userurl'] = getUserUrl()
     }
+    // if (store.getters.SiteId) {
+    //   config.headers['SiteId'] = store.getters.SiteId
+    // }
     return config
   },
   error => {

src/utils/templateJson/index/1.js

@@ -1,994 +0,0 @@
-const json = [
-  //1.正常布局
-  [
-    {
-      "i": 0,
-      "x": 0,
-      "y": 0,
-      "w": 12,
-      "h": 33,
-      "type": "bannerSector",
-      "content": {
-        "sectorName": "bannerSector",
-        "componentList": [
-          {
-            "component_type": 1,
-            "component_style": 1,
-            "component_name": "mainTitle",
-            "sort": 1,
-            "componentData": {
-              "category_id": [],
-              "page": 1,
-              "pageSize": 1,
-              "listType": [
-                "title"
-              ]
-            }
-          },
-          {
-            "component_type": 1,
-            "component_style": 1,
-            "component_name": "banner",
-            "sort": 2,
-            "componentData": {
-              "category_id": [],
-              "page": 1,
-              "pageSize": 3,
-              "listType": [
-                "imgUrl"
-              ]
-            }
-          },
-          {
-            "component_type": 1,
-            "component_style": 1,
-            "component_name": "tabsNews",
-            "sort": 3,
-            "componentData": {
-              "category_id": [],
-              "page": 1,
-              "pageSize": 5,
-              "listType": [
-                "imgUrl",
-                "created_time"
-              ]
-            }
-          }
-        ],
-        "sort": 1
-      },
-      "moved": false
-    },
-    {
-      "i": 1,
-      "x": 0,
-      "y": 33,
-      "w": 12,
-      "h": 8,
-      "type": "imgTitleSector",
-      "content": {
-        "sectorName": "imgTitleSector",
-        "componentList": [
-          {
-            "component_type": 3,
-            "component_style": 1,
-            "component_name": "",
-            "sort": 1,
-            "componentData": []
-          }
-        ],
-        "sort": 8
-      },
-      "moved": false
-    },
-    {
-      "i": 2,
-      "x": 0,
-      "y": 41,
-      "w": 12,
-      "h": 49,
-      "type": "manyPictureSector",
-      "content": {
-        "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"
-              ]
-            }
-          }
-        ],
-        "sort": 3
-      },
-      "moved": false
-    },
-    {
-      "i": 3,
-      "x": 0,
-      "y": 90,
-      "w": 12,
-      "h": 44,
-      "type": "commentSector",
-      "content": {
-        "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": {}
-          }
-        ],
-        "sort": 4
-      },
-      "moved": false
-    },
-    {
-      "i": 4,
-      "x": 0,
-      "y": 134,
-      "w": 12,
-      "h": 8,
-      "type": "imgTitleSector",
-      "content": {
-        "sectorName": "imgTitleSector",
-        "componentList": [
-          {
-            "component_type": 3,
-            "component_style": 2,
-            "component_name": "",
-            "sort": 1,
-            "componentData": []
-          }
-        ],
-        "sort": 5
-      },
-      "moved": false
-    },
-    {
-      "i": 5,
-      "x": 0,
-      "y": 142,
-      "w": 12,
-      "h": 33,
-      "type": "listSector",
-      "content": {
-        "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"
-              ]
-            }
-          }
-        ],
-        "sort": 6
-      },
-      "moved": false
-    },
-    {
-      "i": 6,
-      "x": 0,
-      "y": 175,
-      "w": 12,
-      "h": 32,
-      "type": "onlyImgSector",
-      "content": {
-        "sectorName": "onlyImgSector",
-        "componentList": [
-          {
-            "component_type": 1,
-            "component_style": 1,
-            "component_name": "",
-            "sort": 1,
-            "componentData": {
-              "category_id": [],
-              "page": 1,
-              "pageSize": 7,
-              "listType": [
-                "title",
-                "imgUrl"
-              ]
-            }
-          }
-        ],
-        "sort": 7
-      },
-      "moved": false
-    },
-    {
-      "i": 7,
-      "x": 0,
-      "y": 207,
-      "w": 12,
-      "h": 8,
-      "type": "imgTitleSector",
-      "content": {
-        "sectorName": "imgTitleSector",
-        "componentList": [
-          {
-            "component_type": 3,
-            "component_style": 1,
-            "component_name": "",
-            "sort": 1,
-            "componentData": []
-          }
-        ],
-        "sort": 8
-      },
-      "moved": false
-    },
-    {
-      "i": 8,
-      "x": 0,
-      "y": 215,
-      "w": 12,
-      "h": 20,
-      "type": "friendShipLinkSector",
-      "content": {
-        "sectorName": "friendShipLinkSector",
-        "componentList": [
-          {
-            "component_type": 7,
-            "component_style": 1,
-            "component_name": "styleTitle",
-            "sort": 1,
-            "componentData": {
-              "text": "板块标题"
-            }
-          },
-          {
-            "component_type": 4,
-            "component_style": 1,
-            "component_name": "",
-            "sort": 1,
-            "componentData": {}
-          }
-        ],
-        "sort": 9
-      },
-      "moved": false
-    }
-  ],
-  //2.绿色布局
-  [
-    {
-      "i": 2,
-      "x": 0,
-      "y": 0,
-      "w": 12,
-      "h": 49,
-      "type": "manyPictureSector",
-      "content": {
-        "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"
-              ]
-            }
-          }
-        ],
-        "sort": 1
-      },
-      "moved": false
-    },
-    {
-      "i": 0,
-      "x": 0,
-      "y": 49,
-      "w": 12,
-      "h": 33,
-      "type": "bannerSector",
-      "content": {
-        "sectorName": "bannerSector",
-        "componentList": [
-          {
-            "component_type": 1,
-            "component_style": 2,
-            "component_name": "mainTitle",
-            "sort": 1,
-            "componentData": {
-              "category_id": [],
-              "page": 1,
-              "pageSize": 1,
-              "listType": [
-                "title"
-              ]
-            }
-          },
-          {
-            "component_type": 1,
-            "component_style": 1,
-            "component_name": "banner",
-            "sort": 2,
-            "componentData": {
-              "category_id": [],
-              "page": 1,
-              "pageSize": 3,
-              "listType": [
-                "imgUrl"
-              ]
-            }
-          },
-          {
-            "component_type": 1,
-            "component_style": 1,
-            "component_name": "tabsNews",
-            "sort": 3,
-            "componentData": {
-              "category_id": [],
-              "page": 1,
-              "pageSize": 5,
-              "listType": [
-                "imgUrl",
-                "created_time"
-              ]
-            }
-          }
-        ],
-        "sort": 2
-      },
-      "moved": false
-    },
-    {
-      "i": 1,
-      "x": 0,
-      "y": 82,
-      "w": 12,
-      "h": 8,
-      "type": "imgTitleSector",
-      "content": {
-        "sectorName": "imgTitleSector",
-        "componentList": [
-          {
-            "component_type": 3,
-            "component_style": 3,
-            "component_name": "",
-            "sort": 1,
-            "componentData": []
-          }
-        ],
-        "sort": 3
-      },
-      "moved": false
-    },
-    {
-      "i": 3,
-      "x": 0,
-      "y": 90,
-      "w": 12,
-      "h": 44,
-      "type": "commentSector",
-      "content": {
-        "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": {}
-          }
-        ],
-        "sort": 4
-      },
-      "moved": false
-    },
-    {
-      "i": 4,
-      "x": 0,
-      "y": 134,
-      "w": 12,
-      "h": 8,
-      "type": "imgTitleSector",
-      "content": {
-        "sectorName": "imgTitleSector",
-        "componentList": [
-          {
-            "component_type": 3,
-            "component_style": 4,
-            "component_name": "",
-            "sort": 1,
-            "componentData": []
-          }
-        ],
-        "sort": 5
-      },
-      "moved": false
-    },
-    {
-      "i": 6,
-      "x": 0,
-      "y": 142,
-      "w": 12,
-      "h": 32,
-      "type": "onlyImgSector",
-      "content": {
-        "sectorName": "onlyImgSector",
-        "componentList": [
-          {
-            "component_type": 1,
-            "component_style": 1,
-            "component_name": "",
-            "sort": 1,
-            "componentData": {
-              "category_id": [],
-              "page": 1,
-              "pageSize": 7,
-              "listType": [
-                "title",
-                "imgUrl"
-              ]
-            }
-          }
-        ],
-        "sort": 6
-      },
-      "moved": false
-    },
-    {
-      "i": 5,
-      "x": 0,
-      "y": 174,
-      "w": 12,
-      "h": 33,
-      "type": "listSector",
-      "content": {
-        "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"
-              ]
-            }
-          }
-        ],
-        "sort": 7
-      },
-      "moved": false
-    },
-    {
-      "i": 7,
-      "x": 0,
-      "y": 207,
-      "w": 12,
-      "h": 8,
-      "type": "imgTitleSector",
-      "content": {
-        "sectorName": "imgTitleSector",
-        "componentList": [
-          {
-            "component_type": 3,
-            "component_style": 3,
-            "component_name": "",
-            "sort": 1,
-            "componentData": []
-          }
-        ],
-        "sort": 8
-      },
-      "moved": false
-    },
-    {
-      "i": 8,
-      "x": 0,
-      "y": 215,
-      "w": 12,
-      "h": 20,
-      "type": "friendShipLinkSector",
-      "content": {
-        "sectorName": "friendShipLinkSector",
-        "componentList": [
-          {
-            "component_type": 7,
-            "component_style": 1,
-            "component_name": "styleTitle",
-            "sort": 1,
-            "componentData": {
-              "text": "板块标题"
-            }
-          },
-          {
-            "component_type": 4,
-            "component_style": 1,
-            "component_name": "",
-            "sort": 1,
-            "componentData": {}
-          }
-        ],
-        "sort": 9
-      },
-      "moved": false
-    }
-  ],
-  //3.广告放到顶部
-  [
-    {
-      "i": 1,
-      "x": 0,
-      "y": 0,
-      "w": 12,
-      "h": 8,
-      "type": "imgTitleSector",
-      "content": {
-        "sectorName": "imgTitleSector",
-        "componentList": [
-          {
-            "component_type": 3,
-            "component_style": 3,
-            "component_name": "",
-            "sort": 1,
-            "componentData": []
-          }
-        ],
-        "sort": 1
-      },
-      "moved": false
-    },
-    {
-      "i": 0,
-      "x": 0,
-      "y": 8,
-      "w": 12,
-      "h": 33,
-      "type": "bannerSector",
-      "content": {
-        "sectorName": "bannerSector",
-        "componentList": [
-          {
-            "component_type": 1,
-            "component_style": 2,
-            "component_name": "mainTitle",
-            "sort": 1,
-            "componentData": {
-              "category_id": [],
-              "page": 1,
-              "pageSize": 1,
-              "listType": [
-                "title"
-              ]
-            }
-          },
-          {
-            "component_type": 1,
-            "component_style": 1,
-            "component_name": "banner",
-            "sort": 2,
-            "componentData": {
-              "category_id": [],
-              "page": 1,
-              "pageSize": 3,
-              "listType": [
-                "imgUrl"
-              ]
-            }
-          },
-          {
-            "component_type": 1,
-            "component_style": 1,
-            "component_name": "tabsNews",
-            "sort": 3,
-            "componentData": {
-              "category_id": [],
-              "page": 1,
-              "pageSize": 5,
-              "listType": [
-                "imgUrl",
-                "created_time"
-              ]
-            }
-          }
-        ],
-        "sort": 2
-      },
-      "moved": false
-    },
-    {
-      "i": 6,
-      "x": 0,
-      "y": 41,
-      "w": 12,
-      "h": 32,
-      "type": "onlyImgSector",
-      "content": {
-        "sectorName": "onlyImgSector",
-        "componentList": [
-          {
-            "component_type": 1,
-            "component_style": 4,
-            "component_name": "",
-            "sort": 1,
-            "componentData": {
-              "category_id": [],
-              "page": 1,
-              "pageSize": 7,
-              "listType": [
-                "title",
-                "imgUrl"
-              ]
-            }
-          }
-        ],
-        "sort": 3
-      },
-      "moved": false
-    },
-    {
-      "i": 4,
-      "x": 0,
-      "y": 73,
-      "w": 12,
-      "h": 8,
-      "type": "imgTitleSector",
-      "content": {
-        "sectorName": "imgTitleSector",
-        "componentList": [
-          {
-            "component_type": 3,
-            "component_style": 4,
-            "component_name": "",
-            "sort": 1,
-            "componentData": []
-          }
-        ],
-        "sort": 4
-      },
-      "moved": false
-    },
-    {
-      "i": 3,
-      "x": 0,
-      "y": 81,
-      "w": 12,
-      "h": 44,
-      "type": "commentSector",
-      "content": {
-        "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": {}
-          }
-        ],
-        "sort": 5
-      },
-      "moved": false
-    },
-    {
-      "i": 7,
-      "x": 0,
-      "y": 125,
-      "w": 12,
-      "h": 8,
-      "type": "imgTitleSector",
-      "content": {
-        "sectorName": "imgTitleSector",
-        "componentList": [
-          {
-            "component_type": 3,
-            "component_style": 3,
-            "component_name": "",
-            "sort": 1,
-            "componentData": []
-          }
-        ],
-        "sort": 6
-      },
-      "moved": false
-    },
-    {
-      "i": 5,
-      "x": 0,
-      "y": 133,
-      "w": 12,
-      "h": 33,
-      "type": "listSector",
-      "content": {
-        "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"
-              ]
-            }
-          }
-        ],
-        "sort": 7
-      },
-      "moved": false
-    },
-    {
-      "i": 8,
-      "x": 0,
-      "y": 166,
-      "w": 12,
-      "h": 20,
-      "type": "friendShipLinkSector",
-      "content": {
-        "sectorName": "friendShipLinkSector",
-        "componentList": [
-          {
-            "component_type": 7,
-            "component_style": 3,
-            "component_name": "styleTitle",
-            "sort": 1,
-            "componentData": {
-              "text": "板块标题"
-            }
-          },
-          {
-            "component_type": 4,
-            "component_style": 1,
-            "component_name": "",
-            "sort": 1,
-            "componentData": {}
-          }
-        ],
-        "sort": 8
-      },
-      "moved": false
-    }
-  ]
-
-]
-
-export default json;

src/utils/templateJson/index/style1/1.js

@@ -0,0 +1,287 @@
+const json = [
+    {
+        "i": 1738997535959,
+        "x": 0,
+        "y": 0,
+        "w": 12,
+        "h": 33,
+        "type": "bannerSector",
+        "content": {
+            "sectorName": "bannerSector",
+            "componentList": [
+                {
+                    "component_type": 1,
+                    "component_style": 1,
+                    "component_name": "mainTitle",
+                    "sort": 1,
+                    "componentData": {
+                        "category_id": [],
+                        "page": 1,
+                        "pageSize": 1,
+                        "listType": [
+                            "title"
+                        ]
+                    }
+                },
+                {
+                    "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"
+                        ]
+                    }
+                }
+            ]
+        },
+        "dataSort": 0,
+        "moved": false
+    },
+    {
+        "i": 1738997538031,
+        "x": 0,
+        "y": 33,
+        "w": 12,
+        "h": 49,
+        "type": "manyPictureSector",
+        "content": {
+            "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"
+                        ]
+                    }
+                }
+            ]
+        },
+        "dataSort": 1,
+        "moved": false
+    },
+    {
+        "i": 1738997540254,
+        "x": 0,
+        "y": 82,
+        "w": 12,
+        "h": 44,
+        "type": "commentSector",
+        "content": {
+            "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": {}
+                }
+            ]
+        },
+        "dataSort": 2,
+        "moved": false
+    },
+    {
+        "i": 1738997543774,
+        "x": 0,
+        "y": 126,
+        "w": 12,
+        "h": 33,
+        "type": "listSector",
+        "content": {
+            "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"
+                        ]
+                    }
+                }
+            ]
+        },
+        "dataSort": 3,
+        "moved": false
+    },
+    {
+        "i": 1738997544958,
+        "x": 0,
+        "y": 159,
+        "w": 12,
+        "h": 32,
+        "type": "onlyImgSector",
+        "content": {
+            "sectorName": "onlyImgSector",
+            "componentList": [
+                {
+                    "component_type": 1,
+                    "component_style": 1,
+                    "component_name": "",
+                    "sort": 1,
+                    "componentData": {
+                        "category_id": [],
+                        "page": 1,
+                        "pageSize": 7,
+                        "listType": [
+                            "title",
+                            "imgUrl"
+                        ]
+                    }
+                }
+            ]
+        },
+        "dataSort": 4,
+        "moved": false
+    },
+    {
+        "i": 1738997545726,
+        "x": 0,
+        "y": 191,
+        "w": 12,
+        "h": 20,
+        "type": "friendShipLinkSector",
+        "content": {
+            "sectorName": "friendShipLinkSector",
+            "componentList": [
+                {
+                    "component_type": 7,
+                    "component_style": 1,
+                    "component_name": "styleTitle",
+                    "sort": 1,
+                    "componentData": {
+                        "text": "板块标题"
+                    }
+                },
+                {
+                    "component_type": 4,
+                    "component_style": 1,
+                    "component_name": "",
+                    "sort": 1,
+                    "componentData": {}
+                }
+            ]
+        },
+        "dataSort": 5,
+        "moved": false
+    }
+]
+
+export default json;

src/utils/templateJson/index/style1/2.js

@@ -0,0 +1,227 @@
+const json = [
+    {
+        "i": 1738997623000,
+        "x": 0,
+        "y": 0,
+        "w": 12,
+        "h": 49,
+        "type": "manyPictureSector",
+        "content": {
+            "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"
+                        ]
+                    }
+                }
+            ]
+        },
+        "dataSort": 0,
+        "moved": false
+    },
+    {
+        "i": 1738997626974,
+        "x": 0,
+        "y": 49,
+        "w": 12,
+        "h": 33,
+        "type": "listSector",
+        "content": {
+            "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"
+                        ]
+                    }
+                }
+            ]
+        },
+        "dataSort": 1,
+        "moved": false
+    },
+    {
+        "i": 1738997629824,
+        "x": 0,
+        "y": 82,
+        "w": 12,
+        "h": 44,
+        "type": "commentSector",
+        "content": {
+            "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": {}
+                }
+            ]
+        },
+        "dataSort": 2,
+        "moved": false
+    },
+    {
+        "i": 1738997631878,
+        "x": 0,
+        "y": 126,
+        "w": 12,
+        "h": 32,
+        "type": "onlyImgSector",
+        "content": {
+            "sectorName": "onlyImgSector",
+            "componentList": [
+                {
+                    "component_type": 1,
+                    "component_style": 1,
+                    "component_name": "",
+                    "sort": 1,
+                    "componentData": {
+                        "category_id": [],
+                        "page": 1,
+                        "pageSize": 7,
+                        "listType": [
+                            "title",
+                            "imgUrl"
+                        ]
+                    }
+                }
+            ]
+        },
+        "dataSort": 3,
+        "moved": false
+    },
+    {
+        "i": 1738997637782,
+        "x": 0,
+        "y": 158,
+        "w": 12,
+        "h": 20,
+        "type": "friendShipLinkSector",
+        "content": {
+            "sectorName": "friendShipLinkSector",
+            "componentList": [
+                {
+                    "component_type": 7,
+                    "component_style": 1,
+                    "component_name": "styleTitle",
+                    "sort": 1,
+                    "componentData": {
+                        "text": "板块标题"
+                    }
+                },
+                {
+                    "component_type": 4,
+                    "component_style": 1,
+                    "component_name": "",
+                    "sort": 1,
+                    "componentData": {}
+                }
+            ]
+        },
+        "dataSort": 4,
+        "moved": false
+    }
+]
+
+export default json;

src/views/advertise/adPlaceList.vue

@@ -8,7 +8,7 @@
                     <div class="searchBox">
                         <div class="searchTitle">网站名称</div>
                         <el-select v-model="webSiteName_id" :multiple="false" :multiple-limit="1" filterable remote
-                            reserve-keyword placeholder="请输入网站名称" :remote-method="getWebNavList"
+                            reserve-keyword placeholder="请输入网站名称" clearable :remote-method="getWebNavList"
                             :loading="webSiteLoading" @change="selectWebSite">
                             <el-option v-for="item in webSiteList" :key="item.value" :label="item.label"
                                 :value="item.value">
@@ -19,7 +19,7 @@
                 <el-col :span="6" class="left">
                     <div class="searchBox">
                         <div class="searchTitle">广告位名称</div>
-                        <el-input v-model="adPlaceName" class="input" placeholder="请输入广告位名称"></el-input>
+                        <el-input v-model="adPlaceName" class="input" clearable placeholder="请输入广告位名称"></el-input>
                     </div>
                 </el-col>
                 <el-col :span="8" class="right">
@@ -43,17 +43,31 @@
                         </el-table-column>
                         <el-table-column prop="name" label="广告位名称" width="220">
                         </el-table-column>
-                        <el-table-column prop="type_name" label="广告类型" width="110">
+                        <el-table-column prop="type_name" label="广告类型" width="130">
                         </el-table-column>
-                        <el-table-column prop="size" label="宽/高 (PX)" width="120">
+                        <el-table-column prop="size" label="宽/高 (PX)" width="140">
                         </el-table-column>
-                        <el-table-column prop="price" label="价格 (天)" width="110">
+                        <el-table-column prop="price" label="价格 (天)" width="130">
                         </el-table-column>
-                        <el-table-column prop="created_at" label="创建时间" width="190">
+                        <el-table-column prop="created_at" label="创建时间" width="220">
                         </el-table-column>
-                        <el-table-column prop="updated_at" label="修改时间" width="190">
+                        <el-table-column prop="updated_at" label="修改时间" width="220">
                         </el-table-column>
-                        <el-table-column fixed="right" label="操作" width="300">
+                        <el-table-column fixed="right" label="操作" width="200">
+                            <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="listLookBtn" @click="goLook(scope.row.id)"><i
+                                            class="el-icon-view"></i>查看</div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <!-- <el-table-column prop="created_at" label="创建时间" width="190">
+                        </el-table-column>
+                        <el-table-column prop="updated_at" label="修改时间" width="190">
+                        </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
@@ -64,7 +78,7 @@
                                             class="el-icon-view"></i>查看</div>
                                 </div>
                             </template>
-                        </el-table-column>
+                        </el-table-column> -->
                     </el-table>
                 </template>
             </el-row>
@@ -100,6 +114,9 @@
                     <el-form-item label="广告位名称:" prop="adName">
                         <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-form-item>
                     <el-form-item label="广告位介绍:" prop="adDesc">
                         <el-input v-model="ruleForm.adDesc" type="textarea" :rows="2" placeholder="请输入广告位介绍"
                             resize="none">
@@ -137,8 +154,7 @@
                     </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-option v-for="item in options" :key="item.id" :label="item.size" :value="item.id">
                             </el-option>
                         </el-select>
                     </el-form-item>
@@ -168,7 +184,7 @@ import tableTitle from './components/tableTitle.vue';
 
 //引入公用样式
 import '@/styles/global.less';
-import { createAdPlace, getAdPlaceList, delAdPlace, updateAdPlace, getAdList, getAdPlaceInfo,getSize } from '@/api/advertise'
+import { createAdPlace, getAdPlaceList, delAdPlace, updateAdPlace, getAdList, getAdPlaceInfo, getSize } from '@/api/advertise'
 export default {
     components: {
         tableTitle,//表格标题-
@@ -185,7 +201,7 @@ export default {
             tableDivTitle: "广告列表",  //列表标题
             dialogTableVisible: false,      //编辑弹框
             dialogName: '编辑', //编辑弹窗名称
-            loading:true, //加载中
+            loading: true, //加载中
 
             tableData: [],//表格数据
 
@@ -220,16 +236,19 @@ export default {
             ruleForm: {
                 webName: '', //网站名称
                 adName: '', //广告位名称
+                adTag: '', //广告位标识
                 adDesc: '',//广告位介绍
                 adPhoto: '', //广告示例图
                 adType: '',//广告类型
                 adSize: '',   //广告位大小
+                ad_size_id: 1,   //广告位大小
                 price: '',  //价格
                 status: '',   //状态
             },
             rules: {
                 webName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                 adName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                adTag: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                 adDesc: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                 adPhoto: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                 adType: [{ required: true, trigger: 'blur', validator: validateEmpty }],
@@ -243,37 +262,63 @@ export default {
         //1.列表和分页相关 start ------------------------------------------------------------>
         //1.1 开始请求列表信息方法
         getData() {
-            getAdPlaceList({
-                page: this.page,
-                pageSize: this.pageSize
-            }).then(data => {
-                console.log(data.data.rows);
-                this.tableData = data.data.rows
-                this.total = data.data.count
-                if(data.code==200){
-                    this.loading=false
-                }
-                for (let item of this.tableData) {
-                    item.size = item.width + 'x' + item.height
-                }
-            })
+            if (this.adPlaceName !== '' || this.webSiteName_id !== '') {
+                getAdPlaceList({
+                    page: this.page,
+                    pageSize: this.pageSize,
+                    name: this.adPlaceName,
+                    website_id: this.webSiteName_id, //广告位名称 id
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                    for (let item of this.tableData) {
+                        item.size = item.width + 'x' + item.height
+                        if (item.typeid == 2) {
+                            item.type_name = '图文'
+                        } else if (item.typeid == 1) {
+                            item.type_name = '文字'
+                        }
+                    }
+                })
+            } else {
+                getAdPlaceList({
+                    page: this.page,
+                    pageSize: this.pageSize
+                }).then(data => {
+                    this.loading = false
+                    console.log(data.data.rows);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                    for (let item of this.tableData) {
+                        item.size = item.width + 'x' + item.height
+                        if (item.typeid == 2) {
+                            item.type_name = '图文'
+                        } else if (item.typeid == 1) {
+                            item.type_name = '文字'
+                        }
+                    }
+                })
+            }
+
         },
 
         //获取广告尺寸
-        getSize(){
-            getSize().then(data=>{
+        getSize() {
+            getSize().then(data => {
                 console.log(data.data);
-                this.options=data.data
-                for(let item of this.options){
+                this.options = data.data
+                for (let item of this.options) {
                     item.size = item.width + 'x' + item.height
                 }
                 console.log(this.options);
-                
             })
         },
 
-        change(){
-            console.log(this.ruleForm.adSize);
+        change(val) {
+            console.log('val1111111111', val);
+            this.ruleForm.ad_size_id = val
+            console.log('this.ruleForm.adSize', this.ruleForm.adSize);
         },
 
         //1.2 删除内容
@@ -313,9 +358,9 @@ export default {
             });
         },
         //1.3 查看示例图
-        goGraph() {
-            this.dialogVisible = true
-        },
+        // goGraph() {
+        //     this.dialogVisible = true
+        // },
 
         //1.4 列表内容分页
         //直接跳转
@@ -341,6 +386,11 @@ export default {
                 this.total = data.data.count
                 for (let item of this.tableData) {
                     item.size = item.width + 'x' + item.height
+                    if (item.typeid == 2) {
+                        item.type_name = '图文'
+                    } else if (item.typeid == 1) {
+                        item.type_name = '文字'
+                    }
                 }
             })
 
@@ -371,10 +421,11 @@ export default {
             this.ruleForm.adPhoto = val.thumb //广告示例图
             this.ruleForm.price = val.price //价格
             this.ruleForm.status = val.status //状态
+            // this.ad_size_id=val.ad_size_id
 
             if (val.ad_size_id == 1) {
                 this.ruleForm.adSize = '1200x90'  //广告位大小
-            }else if (val.ad_size_id == 2) {
+            } else if (val.ad_size_id == 2) {
                 this.ruleForm.adSize = '420x560'  //广告位大小
             }
             if (val.typeid == 2) {
@@ -407,6 +458,7 @@ export default {
             //添加时清空回显回来的数据
             this.ruleForm.webName = '' //网站名称
             this.ruleForm.adName = '' //广告位名称
+            this.ruleForm.adTag = '' //广告位标识
             this.ruleForm.adDesc = '' //广告位介绍
             this.ruleForm.adPhoto = '' //广告示例图
             this.ruleForm.adSize = '' //广告尺寸
@@ -428,10 +480,18 @@ export default {
                 })
                 return
             }
+            if (this.ruleForm.adTag == '') {
+                this.$message({
+                    message: '请将数据填写完整',
+                    type: 'error'
+                })
+                return
+            }
             if (this.dialogName == "添加") {
                 createAdPlace({
                     name: this.ruleForm.adName,
                     website_id: this.website_id,
+                    ad_tag: this.ruleForm.adTag,
                     price: this.ruleForm.price,
                     thumb: this.ruleForm.adPhoto,
                     typeid: this.ruleForm.adType,
@@ -472,15 +532,23 @@ export default {
                 })
                 this.dialogVisible = true
             }
+            if (this.ruleForm.adTag == '') {
+                this.$message({
+                    message: '请将数据填写完整',
+                    type: 'error'
+                })
+                return
+            }
             if (this.dialogName == "编辑") {
                 updateAdPlace({
                     name: this.ruleForm.adName,
                     website_id: this.website_id,
+                    ad_tag: this.ruleForm.adTag,
                     price: this.ruleForm.price,
                     thumb: this.ruleForm.adPhoto,
-                    typeid: this.ruleForm.adType,
-                    ad_size_id: this.ruleForm.adSize,
-                    status: this.ruleForm.status,
+                    typeid: Number(this.ruleForm.adType),
+                    ad_size_id: Number(this.ruleForm.ad_size_id),
+                    status: Number(this.ruleForm.status),
                     introduce: this.ruleForm.adDesc,
                     id: this.activeid
                 }).then(data => {

src/views/advertise/advertiseList.vue

@@ -6,7 +6,7 @@
             <el-row>
                 <el-col :span="24">
                     <i class="tipsIcon"></i>
-                    <span class="tipsText">7个工作日内，若运营没有操作用户的申请，则用户申请的时间、信息等将会释放。</span>
+                    <span class="tipsText">24小时内，若运营没有操作用户的申请，则用户申请的时间、信息等将会释放。</span>
                 </el-col>
             </el-row>
         </div>
@@ -16,29 +16,19 @@
                 <el-col :span="6" class="left">
                     <div class="searchBox">
                         <div class="searchTitle">工单编号</div>
-                        <el-input class="input" v-model="order_code" placeholder="请输入工单编号"></el-input>
+                        <el-input class="input" v-model="order_code" clearable placeholder="请输入工单编号"></el-input>
                     </div>
                 </el-col>
                 <el-col :span="6" class="left">
                     <div class="searchBox">
-                        <div class="searchTitle">审核状态</div>
-                        <el-select v-model="status" placeholder="请选择审核状态">
+                        <div class="searchTitle">订单状态</div>
+                        <el-select v-model="order_status" clearable placeholder="请选择订单状态">
                             <el-option v-for="item in order" :key="item.value" :label="item.label" :value="item.value">
                             </el-option>
                         </el-select>
                     </div>
                 </el-col>
-                <el-col :span="6" class="left">
-                    <div class="searchBox">
-                        <div class="searchTitle">广告状态</div>
-                        <el-select v-model="ad_status" placeholder="请选择广告状态">
-                            <el-option v-for="item in order_ad" :key="item.value" :label="item.label"
-                                :value="item.value">
-                            </el-option>
-                        </el-select>
-                    </div>
-                </el-col>
-                <el-col :span="6" class="right">
+                <el-col :span="8" class="right">
                     <div class="btnList">
                         <button class="search" @click="goSearch">搜索</button>
                         <button class="reset" @click="goReset">重置</button>
@@ -52,23 +42,23 @@
             <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 fixed prop="id" label="编号" width="80">
                         </el-table-column>
                         <el-table-column prop="order_num" label="工单编号" width="175">
                         </el-table-column>
-                        <el-table-column prop="user_name" label="广告名称" width="200">
+                        <el-table-column prop="name" label="广告名称" width="160">
                         </el-table-column>
-                        <el-table-column prop="status" label="审核状态" width="90" algin="center">
+                        <el-table-column prop="" label="广告位名称" width="160">
                         </el-table-column>
-                        <el-table-column prop="ad_status" label="广告状态" width="90">
+                        <el-table-column prop="orderStatus" label="订单状态" width="100">
                         </el-table-column>
-                        <el-table-column prop="sttime" label="开始时间" width="120">
+                        <el-table-column prop="sttime" label="开始时间" width="">
                         </el-table-column>
-                        <el-table-column prop="edtime" label="结束时间" width="120">
+                        <el-table-column prop="edtime" label="结束时间" width="">
                         </el-table-column>
                         <el-table-column prop="cttime" label="创建时间" width="">
                         </el-table-column>
-                        <el-table-column prop="admin_user_name" label="操作人" width="100">
+                        <el-table-column prop="price" label="总金额" width="110">
                         </el-table-column>
                         <el-table-column fixed="right" label="操作" width="330">
                             <template slot-scope="scope">
@@ -108,11 +98,12 @@
                         <el-input v-model="ruleForm.name" disabled placeholder="请输入网站名称"></el-input>
                     </el-form-item>
                     <el-form-item label="广告网址:" prop="">
-                        <el-input v-model="ruleForm.name" disabled placeholder="请输入网站名称"></el-input>
+                        <el-input v-model="ruleForm.ad_url" disabled placeholder="请输入网站名称"></el-input>
                     </el-form-item>
                     <el-form-item label="广告图:" prop="">
                         <div class="adImage">
-                            <img src="../../assets/advertise/404.png" alt="">
+                            <img :src="ruleForm.adImg" v-if="this.ruleForm.adImg" alt="">
+                            <img :src="'../../assets/advertise/404.png'" v-else-if="this.ruleForm.adImg = ''" alt="">
                         </div>
                     </el-form-item>
                     <el-form-item label="持续时间:" prop="">
@@ -158,7 +149,8 @@
                     <el-form-item label="广告位置:" prop="">
                         <span class="example" @click="goGraph">查看示例图</span>
                         <div>
-                            <el-button disabled v-for="item in 12" class="el_btnList">中农兴业网 一号广告位</el-button>
+                            <el-button disabled v-for="item in ruleForm.adPlace" class="el_btnList">{{ item
+                                }}</el-button>
                         </div>
                     </el-form-item>
                 </div>
@@ -191,6 +183,12 @@
 
         <!-- 弹出框 审核 start----------------------------------------------------------->
         <el-dialog title="审核状态" :visible.sync="dialogFormVisible" width="35%" top="25vh">
+            <template slot="title">
+                <div style="display: flex; align-items: center;">
+                    <span>审核状态</span>
+                    <span class="redTips">(确定后,审核状态不可再次更改.请确认好再审核)</span>
+                </div>
+            </template>
             <el-form ref="form" :model="form" label-width="80px">
                 <div class="radioGroup">
                     <el-radio-group v-model="status_radio">
@@ -203,7 +201,6 @@
                         </el-input>
                     </el-form-item>
                 </div>
-
             </el-form>
             <div slot="footer" class="dialog-footer">
                 <el-button @click="dialogFormVisible = false">取 消</el-button>
@@ -221,7 +218,7 @@ import tableTitle from './components/tableTitle.vue';
 
 //引入公用样式
 import '@/styles/global.less';
-import { getStatus, getOrderListAdmin, getOrderDetailAdmin, applyOrderStatusAdmin, editOrderAdmin, rejectOrderAdmin, endOrderAdmin, delOrderAdmin } from '@/api/advertise'
+import { getStatus, getOrderList, getOrderListAdmin, getOrderDetail, getOrderDetailAdmin, applyOrderStatusAdmin, editOrderAdmin, rejectOrderAdmin, endOrderAdmin, delOrderAdmin } from '@/api/advertise'
 export default {
     components: {
         tableTitle,//表格标题-
@@ -238,11 +235,12 @@ export default {
 
             tableData: [],//表格数据
 
+            ad_img: 'http://183.131.25.186:9501/image/20250102/1735810611310322.png', //广告图
+
             // 搜索框相关
             order_code: '', //工单编号 
-            status: '',//审核状态
-            ad_status: '',//广告状态
-            order: [ //审核状态数据
+            order_status: '',//订单状态
+            order: [ //订单状态数据
                 {
                     value: 1,
                     label: '已通过'
@@ -251,27 +249,9 @@ export default {
                     value: 2,
                     label: '已驳回'
                 },
-                {
-                    value: 5,
-                    label: '待审核'
-                },
-            ],
-            order_ad: [ //广告状态数据
-                {
-                    value: 1,
-                    label: '待投放'
-                },
-                {
-                    value: 2,
-                    label: '已驳回'
-                },
                 {
                     value: 3,
-                    label: '已撤回'
-                },
-                {
-                    value: 4,
-                    label: '已修改'
+                    label: '已取消'
                 },
                 {
                     value: 5,
@@ -283,11 +263,7 @@ export default {
                 },
                 {
                     value: 7,
-                    label: '已结束'
-                },
-                {
-                    value: 8,
-                    label: '投放中'
+                    label: '已完成'
                 }
             ],
 
@@ -299,6 +275,8 @@ export default {
             pageSize: 10,
             total: 0,
 
+            orderads: [],
+
             // 审核弹窗相关
             status_radio: "",   //审核状态
             textarea: '',    //驳回原因
@@ -308,12 +286,14 @@ export default {
             ruleForm: {
                 name: '', //广告名称
                 ad_url: '', //广告网址
+                adImg: '', //广告图
                 radio: '',//广告尺寸
                 startTime: '', //开始时间
                 endTime: '',   //结束时间
                 price: '',  //价格
                 days: '',   //天数
                 num: '',   //个数
+                adPlace: [] //广告位
             },
             rules: {
                 name: [
@@ -325,57 +305,64 @@ export default {
             }
         }
     },
-    watch: {
-        status_radio: {
-            handler(newVal, oldVal) {
-                // console.log(newVal);
-            },
-            deep: true,
-            immediate: true
-        }
-    },
     methods: {
         //1.列表和分页相关 start ------------------------------------------------------------>
         //1.1 开始请求列表信息方法
         getData() {
-            let data = new FormData()
-            data.append('page', this.page)
-            data.append('pageSize', this.pageSize)
-            console.log(data);
+            if (this.order_code == '' || this.order_status == '') {
+                let data = new FormData()
+                data.append('page', this.page)
+                data.append('pageSize', this.pageSize)
+                data.append('status', this.order_status)
+                data.append('order_num', this.order_code)
 
-            getOrderListAdmin(data).then(data => {
-                console.log("全部数据", data);
-                console.log(data.data.rows);
-                this.tableData = data.data.rows
-                this.total = data.data.count
-                for (let item of this.tableData) {
-                    if (item.status == 1) {
-                        item.status = "已通过"
-                    } else if (item.status == 2) {
-                        item.status = "已驳回"
-                    } else if (item.status == 6) {
-                        item.status = "待审核"
+                getOrderListAdmin(data).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                    for (let item of this.tableData) {
+                        if (item.status == 1) {
+                            item.orderStatus = '已通过'
+                        } else if (item.status == 7) {
+                            item.orderStatus = '已完成'
+                        } else if (item.status == 2) {
+                            item.orderStatus = '已驳回'
+                        } else if (item.status == 3) {
+                            item.orderStatus = '已取消'
+                        } else if (item.status == 5) {
+                            item.orderStatus = '已过期'
+                        } else if (item.status == 6) {
+                            item.orderStatus = '待审核'
+                        }
                     }
-
-                    if (item.ad_status == 1) {
-                        item.ad_status = "待投放"
-                    } else if (item.ad_status == 2) {
-                        item.ad_status = "已驳回"
-                    } else if (item.ad_status == 3) {
-                        item.ad_status = "已撤回"
-                    } else if (item.ad_status == 4) {
-                        item.ad_status = "已修改"
-                    } else if (item.ad_status == 5) {
-                        item.ad_status = "已过期"
-                    } else if (item.ad_status == 6) {
-                        item.ad_status = "待审核"
-                    } else if (item.ad_status == 7) {
-                        item.ad_status = "已结束"
-                    } else if (item.ad_status == 8) {
-                        item.ad_status = "待投放"
+                })
+            } else {
+                let data = new FormData()
+                data.append('page', this.page)
+                data.append('pageSize', this.pageSize)
+                console.log(data);
+                getOrderListAdmin(data).then(data => {
+                    console.log("getOrderListAdmin", data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                    for (let item of this.tableData) {
+                        if (item.status == 1) {
+                            item.orderStatus = '已通过'
+                        } else if (item.status == 7) {
+                            item.orderStatus = '已完成'
+                        } else if (item.status == 2) {
+                            item.orderStatus = '已驳回'
+                        } else if (item.status == 3) {
+                            item.orderStatus = '已取消'
+                        } else if (item.status == 5) {
+                            item.orderStatus = '已过期'
+                        } else if (item.status == 6) {
+                            item.orderStatus = '待审核'
+                        }
                     }
-                }
-            })
+                })
+            }
+
         },
 
         //1.2 删除内容
@@ -439,76 +426,93 @@ export default {
             let data = new FormData()
             data.append('page', this.page)
             data.append('pageSize', this.pageSize)
-            data.append('status', this.status)
-            data.append('ad_status', this.ad_status)
+            data.append('status', this.order_status)
             data.append('order_num', this.order_code)
-            data.append('sttime', "")
-            data.append('edtime', "")
             console.log(data);
 
             getOrderListAdmin(data).then(data => {
                 console.log(data);
-                console.log(data.data.rows);
                 this.tableData = data.data.rows
                 this.total = data.data.count
                 for (let item of this.tableData) {
                     if (item.status == 1) {
-                        item.status = "已通过"
+                        item.orderStatus = '已通过'
+                    } else if (item.status == 7) {
+                        item.orderStatus = '已完成'
                     } else if (item.status == 2) {
-                        item.status = "已驳回"
+                        item.orderStatus = '已驳回'
+                    } else if (item.status == 3) {
+                        item.orderStatus = '已取消'
+                    } else if (item.status == 5) {
+                        item.orderStatus = '已过期'
                     } else if (item.status == 6) {
-                        item.status = "待审核"
-                    }
-
-                    if (item.ad_status == 1) {
-                        item.ad_status = "待投放"
-                    } else if (item.ad_status == 2) {
-                        item.ad_status = "已驳回"
-                    } else if (item.ad_status == 3) {
-                        item.ad_status = "已撤回"
-                    } else if (item.ad_status == 4) {
-                        item.ad_status = "已修改"
-                    } else if (item.ad_status == 5) {
-                        item.ad_status = "已过期"
-                    } else if (item.ad_status == 6) {
-                        item.ad_status = "待审核"
-                    } else if (item.ad_status == 7) {
-                        item.ad_status = "已结束"
-                    } else if (item.ad_status == 8) {
-                        item.ad_status = "待投放"
+                        item.orderStatus = '待审核'
                     }
                 }
             })
         },
         //1.7 重置按钮
         goReset() {
-            this.order_code = '',
-                this.status = ''
-            this.ad_status = ''
+            this.order_code = ''
+            this.order_status = ''
+            this.page = 1
+            this.pageSize = 10
             this.getData();
         },
         //列表和分页相关 end ------------------------------------------------------------>
 
         //1.9 编辑
         goEdit(id, val) {
-            console.log(id);
-
+            console.log(id, val);
             this.activeid = id
             this.dialogTableVisible = true
-            console.log(id, val);
-            this.ruleForm.name = val.user_name
-            this.ruleForm.ad_url = val.ad_url
-            // this.ruleForm.radio = val.width
+            this.ruleForm.name = val.name
+            if (val.width == 1200) {
+                this.ruleForm.radio = '1'
+            } else {
+                this.ruleForm.radio = '2'
+            }
             this.ruleForm.startTime = val.sttime
             this.ruleForm.endTime = val.edtime
-            this.ruleForm.price = val.price
             this.ruleForm.days = val.days
+
+            let data = new FormData()
+            data.append('id', id)
+
+            //查看列表详情
+            getOrderDetailAdmin(data).then(data => {
+                // console.log('详情', data);
+                console.log('详情', data.data.ad[0]?.image_url);
+
+                this.ruleForm.ad_url = data.data.ad[0]?.image_url //广告链接
+                this.ruleForm.adImg = data.data.ad[0]?.image_src //广告图
+                this.ruleForm.num = data.data.ad.length //广告个数
+                this.ruleForm.price = val.price / val.days / this.ruleForm.num //广告价格
+
+                let adPlace = data.data.ad
+
+                this.ruleForm.adPlace = []
+
+                for (let item of adPlace) {
+                    this.ruleForm.adPlace.push(item.ad_name)//广告位名称
+                }
+                console.log(this.ruleForm.adPlace);
+            })
         },
 
         //2.0 审核
         goReview(id, val) {
             this.activeid = id
-            this.dialogFormVisible = true
+            this.activeid = id
+            if (val.status != 6) {
+                this.$message({
+                    message: '该广告已经审核，不能再次审核',
+                    type: 'warning'
+                })
+                this.dialogFormVisible = false
+            } else {
+                this.dialogFormVisible = true
+            }
         },
 
         //审核中的确定
@@ -561,9 +565,10 @@ export default {
         // 弹出层相关方法
         // 提交表单
         submitForm() {
+            let total = this.ruleForm.price * this.ruleForm.days * this.ruleForm.num
             let data = new FormData()
             data.append('id', this.activeid)
-            data.append('price', this.ruleForm.price)
+            data.append('price', total.toFixed(2))
             editOrderAdmin(data).then(data => {
                 console.log(data);
                 if (data.code == 200) {
@@ -572,13 +577,13 @@ export default {
                         message: '修改成功',
                         type: 'success'
                     })
+                    this.getData()
                 }
                 if (data.code == 0) {
                     this.$message({
                         message: data.message + ',需要保留两位小数',
                         type: 'error'
                     })
-                    this.dialogTableVisible = true
                 }
             })
         },
@@ -595,6 +600,13 @@ export default {
 </script>
 
 <style scoped lang="less">
+.redTips {
+    color: red;
+    display: inline-block;
+    margin-left: 20px;
+    font-size: 14px;
+}
+
 // 提示信息
 .tips {
     margin: 30px;
@@ -766,13 +778,13 @@ export default {
     .adImage {
         width: 140px;
         height: 140px;
-        line-height: 210px;
+        // line-height: 210px;
         border-radius: 12px;
         border: 1px solid rgba(85, 112, 241, 0.11);
 
         img {
             width: 140px;
-            height: 80px;
+            // height: 80px;
         }
     }
 

src/views/componentGallery/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 {
+    height: 38px;
+    line-height: 38px;
+    color:#333333;
+    position: relative;
+    margin-bottom: 30px;
+    .tableFloatLine {
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: block;
+      position: absolute;
+      left:-20px;
+      top:10px;
+    }
+  }
+</style>

src/views/componentGallery/module.vue

@@ -0,0 +1,835 @@
+<!-- 组件 -->
+<template>
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <el-row>
+                <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="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>
+                    </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="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="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="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="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>
+                    <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"
+                        :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" :disabled="this.dialogName === '编辑'">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl" :src="logoUrl" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="ruleForm.webLogo">
+                                    <!-- <input type="hidden" name="logo" v-model="logoUrl"> -->
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl && dialogName == '添加'" class="delete-button"
+                                    @click="handleDelete">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </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----------------------------------------------------------->
+    </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'
+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: '编辑', //编辑弹窗名称
+            moduleLoading: true, //表格数据加载中
+
+            tableData: [],//表格数据
+            options: [],//版块列表
+            activeid: "", //活动id
+            styleOptions: [],//关联版块
+            plateOptions: [],//关联版块
+            selectedId: '',
+            selectedOptions: [],
+            cascaderProps: {
+                value: "id", // 指定实际表示值的字段为id
+                label: "name", // 指定实际表示显示文本的字段为name
+                expandTrigger: 'hover',
+                checkStrictly: true, // 严格模式，只能选择叶子节点
+                children: 'children',
+            },
+
+
+            // 1.2 搜索框相关
+            templateName: '', //版块名称
+            componentName: '', //组件名称
+
+
+            //3.4 上传logo图片
+            logoUrl: '',
+            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+
+            value: '',
+
+
+            // 分页相关
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+
+            formLabelWidth: '', //广告示例图相关
+
+
+            template_id: '', //关联风格id
+            sector_id: '', //关联版块id
+
+            ruleForm: {
+                plateName: '', //关联版块名称
+                component_name: '', //组件名称
+                component_code: '', //组件代码
+                component_img: '',//组件展示
+            },
+
+            rules: {
+                plateName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                component_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                component_code: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                component_img: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            if (this.templateName != '' || this.componentName != '') {
+                getComponentList({
+                    page: this.page,
+                    page_size: this.pageSize,
+                    template_class_id: '',
+                    component_name: this.componentName,
+                    sector_id: this.templateName,
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.data
+                    this.total = data.data.total
+                })
+            } else {
+                getComponentList({
+                    page: this.page,
+                    page_size: this.pageSize
+                }).then(data => {
+                    console.log('组件', data);
+                    if (data.code == 200) {
+                        this.moduleLoading = false
+                        this.tableData = data.data.data
+                        this.total = data.data.total
+                    }
+                })
+            }
+        },
+        //获取版块列表
+        getList() {
+            getSectorList({
+                page: this.page,
+                page_size: 1000,
+            }).then(data => {
+                console.log('获取版块', data.data.data);
+                this.options = data.data.data
+            })
+
+            getTemplateClass().then(data => {
+                console.log("风格", data.data);
+                this.styleOptions = data.data
+                for (let item of this.styleOptions) {
+                    item.children = []
+                }
+            })
+        },
+        //1.2 删除内容
+        deleteRow(id) {
+            console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+
+                delComponent({
+                    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.3 版块发生改变时 获取版块下的组件列表
+
+        // handleMouseEnter(event) {
+        //     const currentValue = this.ruleForm.plateName[this.ruleForm.plateName.length - 1];
+        //     console.log('当前级的值:', currentValue);
+        //     console.log('当前级:', event);
+        // },
+
+        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); // 请求对应的子选项
+
+            }
+        },
+        fetchChildren(parentValue) {
+            // 根据父级值请求子选项的接口
+            getSectorList({
+                page: this.page,
+                page_size: 1000,
+                template_class_id: parentValue
+            }).then(data => {
+                console.log('data', data.data.data);
+                this.plateOptions = data.data.data
+                this.styleOptions = this.styleOptions.map(item => {
+                    if (item.id === parentValue) {
+                        const children = []
+                        for (let item of this.plateOptions) {
+                            children.push({
+                                id: item.id,
+                                name: item.sector_name,
+                            })
+                        }
+                        item.children = children
+                    }
+                    return item
+                })
+                console.log(this.styleOptions);
+
+            })
+        },
+
+        //1.4 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.5 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.6 搜索按钮
+        goSearch() {
+            getComponentList({
+                page: this.page,
+                page_size: this.pageSize,
+                template_class_id: '',
+                component_name: this.componentName,
+                sector_id: this.templateName,
+            }).then(data => {
+                console.log(data);
+                this.tableData = data.data.data
+                this.total = data.data.total
+            })
+        },
+        //1.7 重置按钮
+        goReset() {
+            this.templateName = ""
+            this.componentName = ""
+            this.page = 1
+            this.pageSize = 10
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+        //1.8 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+
+            //添加时清空回显回来的数据
+            this.ruleForm.plateName = '' //关联版块
+            this.ruleForm.component_name = '' //组件名称
+            this.ruleForm.component_code = '' //组件代码
+            this.ruleForm.component_img = '' //组件展示图
+            this.logoUrl = '' //组件展示图
+
+        },
+
+
+        //1.9 编辑
+        goEdit(id, val) {
+            this.dialogName = '编辑'
+            this.activeid = id
+            this.dialogTableVisible = true
+            console.log(id, val);
+            this.getList()
+
+            //数据回显
+            this.template_id = val.template_class_id
+            this.sector_id = val.sector_id
+            this.ruleForm.plateName = val.template_class_name //关联版块
+            this.ruleForm.plateName = [val.template_class_id, val.sector_id] // 组合成数组
+            this.ruleForm.plateName = [this.template_id, this.sector_id] // 组合成数组
+            // this.ruleForm.plateName = val.template_class_name+'/'+val.sector_name //组件名称
+            this.ruleForm.component_name = val.component_name //组件名称
+            this.ruleForm.component_code = val.component_code //组件代码
+            this.ruleForm.component_img = val.component_img //组件展示图
+            this.logoUrl = val.component_img //组件展示图
+        },
+
+
+        // 弹出层相关方法
+        // 提交表单
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    console.log('submit!');
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+            if (this.dialogName == "添加") {
+                addComponent({
+                    template_id: this.template_id,
+                    sector_id: this.sector_id,
+                    component_name: this.ruleForm.component_name,
+                    component_img: this.ruleForm.component_img,
+                    component_code: this.ruleForm.component_code,
+                }).then(data => {
+                    console.log(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.website_id == '') {
+                this.$message({
+                    message: '请输入并选择网站名称',
+                    type: 'error'
+                })
+                this.dialogVisible = true
+            }
+            if (this.dialogName == "编辑") {
+                updateComponent({
+                    id: this.activeid,
+                    component_name: this.ruleForm.component_name,
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '编辑成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                    }
+                    if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                    }
+                    this.getData()
+                })
+            }
+
+        },
+        //取消添加或编辑
+        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;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl = res.data.imgUrl;//显示缩略图
+                this.ruleForm.component_img = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        handleDelete() {
+            // 删除图片
+            this.logoUrl = ''; // 清空图片 URL
+        },
+
+        //搜索部分的输入关键词下拉框
+        selectWebSite(value) {
+            this.webSiteName_id = value
+        },
+
+        //添加 / 编辑弹窗中输入关键词下拉框 
+        // 判断是否已经关联了网站
+        detectionWebSite(value) {
+            console.log(value);
+            this.website_id = value
+            console.log(this.website_id);
+
+        },
+
+
+    },
+    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;
+        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;
+
+    .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;
+}
+</style>

src/views/componentGallery/plate.vue

@@ -0,0 +1,840 @@
+<!-- 板块 -->
+<template>
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <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="plateName" 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="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>
+                        <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="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="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>
+                    <el-form-item label="版块代码:" prop="plateCode">
+                        <el-input v-model="ruleForm.plateCode" placeholder="请输入版块代码"
+                            :disabled="this.dialogName === '编辑'"></el-input>
+                    </el-form-item>
+                    <el-form-item label="页面类型:" prop="pageType">
+                        <el-checkbox-group v-model="ruleForm.pageType" @change="changeCheckbox"
+                            :disabled="this.dialogName === '编辑'">
+                            <el-checkbox v-for="(item, index) in checkList" :key="index" :label="item.value">{{
+                                item.label
+                            }}</el-checkbox>
+                        </el-checkbox-group>
+                    </el-form-item>
+                    <el-form-item label="组件展示图：" prop="image" :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" :disabled="this.dialogName === '编辑'">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl" :src="logoUrl" 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="ruleForm.image">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl && dialogName == '添加'" class="delete-button"
+                                    @click="handleDelete">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </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----------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+import { getSectorList, addSector, delSector, updateSector, getSectorInfo } from '@/api/plate'
+import { getTemplateClass } from '@/api/style'
+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: '编辑', //编辑弹窗名称
+            plateLoading: true, //表格内容加载中
+
+            tableData: [],//表格数据
+            options: [],//模板风格下拉列表
+
+            // 1.2搜索框相关 
+            templateStyle: '',//风格
+            plateName: '',
+
+            pageType: '',//页面类型
+            value: '',
+            checkList: [
+                {
+                    value: '1',
+                    label: '首页',
+                },
+                {
+                    value: '2',
+                    label: '分类页',
+                },
+                {
+                    value: '3',
+                    label: '列表页',
+                },
+                {
+                    value: '4',
+                    label: '详情页',
+                },
+                {
+                    value: '5',
+                    label: '搜索页',
+                },
+                {
+                    value: '6',
+                    label: '特殊列表页',
+                },
+                {
+                    value: '7',
+                    label: '特殊详情页',
+                },
+            ],
+
+            //活动id
+            activeid: "",
+
+            newArr: [],
+
+            // 1.3 分页相关 
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+            formLabelWidth: '', //广告示例图相关
+
+
+            //1.4 弹框相关数据 
+            ruleForm: {
+                templateStyle: '', //关联风格名称
+                plateName: '', //版块名称
+                plateCode: '',//版块代码
+                pageType: [], //页面类型
+                image: '',//组件展示图
+            },
+            rules: {
+                templateStyle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                plateName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                plateCode: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                pageType: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                image: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            },
+
+
+            //1.5 弹窗中 上传logo图片
+            logoUrl: '',
+            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            if (this.templateStyle != '' || this.plateName != '') {
+                getSectorList({
+                    page: this.page,
+                    page_size: this.pageSize,
+                    template_class_id: this.templateStyle,
+                    sector_name: this.plateName,
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.data
+                    this.total = data.data.total
+                })
+            } else {
+                getSectorList({
+                    page: this.page,
+                    page_size: this.pageSize
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.plateLoading = false
+                    }
+                    this.tableData = data.data.data
+                    this.total = data.data.total
+                })
+            }
+
+        },
+
+        //获取风格列表
+        getStyleList() {
+            getTemplateClass({
+                page: this.page,
+                page_size: this.pageSize
+            }).then(data => {
+                console.log('模板风格列表', data);
+                this.options = data.data
+            })
+        },
+
+        //1.2 删除内容
+        deleteRow(id) {
+            console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+
+                delSector({
+                    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.3 多选按钮发生变化
+        changeCheckbox(val) {
+            console.log(val);
+            this.newArr = []
+            val.forEach(item => {
+                if (typeof item !== 'object' || !item.hasOwnProperty('__ob__')) {
+                    this.newArr.push(item);
+                }
+            });
+            this.pageType = JSON.stringify(this.newArr);
+            console.log(this.pageType);
+        },
+
+        changeTemplateStyle(val) {
+            console.log('风格id', val);
+            console.log(this.ruleForm.templateStyle);
+        },
+
+        //1.4 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.5 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.6 搜索按钮
+        goSearch() {
+            getSectorList({
+                page: this.page,
+                page_size: this.pageSize,
+                template_class_id: this.templateStyle,
+                sector_name: this.plateName,
+            }).then(data => {
+                console.log(data);
+                this.tableData = data.data.data
+                this.total = data.data.total
+            })
+
+        },
+        //1.7 重置按钮
+        goReset() {
+            this.templateStyle = ""
+            this.plateName = ""
+            this.page=1
+            this.pageSize=10
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+        //1.9 编辑
+        goEdit(id, val) {
+            // console.log(id);
+            this.dialogName = '编辑'
+            this.activeid = id
+            this.dialogTableVisible = true
+            console.log(id, val);
+            // console.log("状态", val.status);
+            this.hovering = false
+
+            //数据回显
+            this.ruleForm.templateStyle = val.template_class_id //关联风格名称
+            this.ruleForm.plateName = val.sector_name //版块名称
+            this.ruleForm.plateCode = val.sector_code //版块代码
+            this.ruleForm.pageType = JSON.parse(JSON.parse(val.page_type))//页面类型
+            this.ruleForm.image = val.sector_img //组件展示图 
+            this.logoUrl = val.sector_img
+        },
+
+
+        //1.7 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+
+            //添加时清空回显回来的数据
+            this.ruleForm.templateStyle = '' //关联风格名称
+            this.ruleForm.plateName = '' //版块名称
+            this.ruleForm.plateCode = '' //版块代码
+            this.ruleForm.pageType = [] //页面类型
+            this.ruleForm.image = '' //组件展示图
+            this.logoUrl = ''
+        },
+
+        // 弹出层相关方法
+        // 提交表单
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    console.log('submit!');
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+            if (this.dialogName == "添加") {
+                addSector({
+                    template_id: this.ruleForm.templateStyle,
+                    sector_name: this.ruleForm.plateName,
+                    sector_code: this.ruleForm.plateCode,
+                    page_type: this.pageType,
+                    sector_img: this.ruleForm.image,
+                }).then(data => {
+                    console.log(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.website_id == '') {
+                this.$message({
+                    message: '请输入并选择网站名称',
+                    type: 'error'
+                })
+                this.dialogVisible = true
+            }
+            if (this.dialogName == "编辑") {
+                updateSector({
+                    id: this.activeid,
+                    sector_name: this.ruleForm.plateName,
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '编辑成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                    }
+                    if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                    }
+                    this.getData()
+                })
+            }
+        },
+        //取消添加或编辑
+        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;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl = res.data.imgUrl;//显示缩略图
+                this.ruleForm.image = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        handleDelete() {
+            // 删除图片
+            this.logoUrl = ''; // 清空图片 URL
+        },
+
+        //搜索部分的输入关键词下拉框
+        selectWebSite(value) {
+            this.webSiteName_id = value
+        },
+
+        //添加 / 编辑弹窗中输入关键词下拉框 
+        // 判断是否已经关联了网站
+        detectionWebSite(value) {
+            console.log(value);
+            this.website_id = value
+            console.log(this.website_id);
+
+        },
+
+        //
+        getWebNavList(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.webSiteList = dataArr;
+                    this.webSiteLoading = false;
+                }).catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '网络错误，请重试！'
+                    });
+                })
+            } else {
+                this.navList = [];
+            }
+        },
+    },
+    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;
+        }
+    }
+
+
+
+    ::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

@@ -0,0 +1,1265 @@
+<!-- 风格 -->
+<template>
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <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>
+                </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_class_name" label="模板风格" width="">
+                        </el-table-column>
+                        <el-table-column prop="template_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 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.id" :label="item.name" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </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="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';
+
+//引入公用样式
+import '@/styles/global.less';
+import { getTemplateClass, getTemplateList, addTemplate, delTemplate, updateTemplate, getTemplateInfo } from '@/api/style'
+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: [],//表格数据
+
+
+            //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: [],
+
+            value: '',
+            options: [],
+
+            //活动id
+            activeid: "",
+
+            formLabelWidth: '', //广告示例图相关
+
+            // 弹框相关 -------------------------------------------
+            ruleForm: {
+                templateStyle: '', //模板风格
+                templateName: '', //模板名称
+                templateImg: [], //模板图片
+            },
+            rules: {
+                templateStyle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                templateName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                templateImg: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        }
+    },
+    methods: {
+        //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.tableData = data.data.data
+                    this.total = data.data.total
+                })
+            }
+        },
+        
+        //获取模板风格
+        getStyleList() {
+            getTemplateClass({
+                page: this.page,
+                page_size: this.pageSize
+            }).then(data => {
+                console.log('模板风格列表', data);
+                this.options = data.data
+            })
+        },
+
+        //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'
+                        })
+                    }
+                })
+
+            }).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() {
+            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
+            })
+        },
+        //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(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
+                }
+            }
+        },
+        //1.8 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            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 = ''
+        },
+
+        // 弹出层相关方法 ---------------------------------------------------->
+        // 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.$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 == "编辑") {
+                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.$message({
+                            message: '编辑成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                    }
+                    if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                    }
+                    this.getData()
+                })
+            }
+
+        },
+        //取消添加或编辑
+        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;//提供表单地址
+                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
+        },
+        // 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/crawler/webCrawlerList.vue

@@ -95,10 +95,26 @@
             <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                 <div class="dialogText">
                     <el-form-item label="关联导航池:" prop="name">
-                        <el-select v-model="ruleForm.name" placeholder="请选择关联的导航池名称">
+                        <!-- <el-select v-model="ruleForm.name" placeholder="请选择关联的导航池名称">
                             <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                             </el-option>
-                        </el-select>
+                        </el-select> -->
+                        <el-select
+    v-model="value"
+    multiple
+    filterable
+    remote
+    reserve-keyword
+    placeholder="请输入关键词"
+    :remote-method="remoteMethod"
+    :loading="loading">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
                     </el-form-item>
                 </div>
                 <div class="dialogBtn">
@@ -320,7 +336,7 @@ export default {
         submitForm() {
             addCatid({
                 rule_id: this.ruleId,//任务规则id
-                catid: this.ruleForm.name,//导航池栏目id
+                cat_arr_id: this.ruleForm.name,//导航池栏目id
             }).then(data => {
                 console.log(this.ruleForm.name);
                 console.log(data);

src/views/crawler/webRule.vue

@@ -169,8 +169,9 @@
                             <el-input v-model="ruleForm.title" placeholder="请输入标题字符串"></el-input>
                             <el-tooltip placement="top-start">
                                 <div slot="content">
-                                    如标题代码:&lt;h1 class='news_art'>红枣滞销喂羊 电商帮忙促销&lt;/h1>，标题字符串为 .news_art 填入输入框内<br />
-                                    如标题代码:&lt;h1 id='news at'>红枣滞销喂羊 电商帮忙促销&lt;/h1>，标题字符串为 #news art 填入输入框内
+                                    如标题代码:&lt;div class='news_art'>红枣滞销喂羊 电商帮忙促销&lt;/div>，标题字符串为 .news_art 填入输入框内<br />
+                                    如标题代码:&lt;div id='news at'>红枣滞销喂羊 电商帮忙促销&lt;/div>，标题字符串为 #news art 填入输入框内<br/>
+                                    若是有多个，要保证“news_art"的唯一性，标题字符串更改为:标签名.class名 —— div.news_art 填入输入框内
                                 </div>
                                 <i class="el-icon-warning"></i>
                             </el-tooltip>
@@ -298,7 +299,7 @@
                 </div>
 
                 <div class="dialogBtn">
-                    <el-button class="cancel" @click="saveForm">保存</el-button>
+                    <el-button class="cancel" @click="saveForm">{{ dialogBoo == 'add' ? '保存' : '取消' }}</el-button>
                     <el-button type="primary" class="submit" :loading="submitDisabled"
                         @click="submitForm('ruleForm')">确定</el-button>
                 </div>
@@ -387,27 +388,27 @@ export default {
                 callback()
             }
         }
-        const validatauthor = (rule, value, callback) => {
-            if (value.length == 0) {
-                callback(new Error('请输入作者字符串'))
-            } else {
-                callback()
-            }
-        }
-        const validatauthorName = (rule, value, callback) => {
-            if (value.length == 0) {
-                callback(new Error('请输入作者替换名称'))
-            } else {
-                callback()
-            }
-        }
-        const validatparameter = (rule, value, callback) => {
-            if (value.length == 0) {
-                callback(new Error('请输入接口参数'))
-            } else {
-                callback()
-            }
-        }
+        // const validatauthor = (rule, value, callback) => {
+        //     if (value.length == 0) {
+        //         callback(new Error('请输入作者字符串'))
+        //     } else {
+        //         callback()
+        //     }
+        // }
+        // const validatauthorName = (rule, value, callback) => {
+        //     if (value.length == 0) {
+        //         callback(new Error('请输入作者替换名称'))
+        //     } else {
+        //         callback()
+        //     }
+        // }
+        // const validatparameter = (rule, value, callback) => {
+        //     if (value.length == 0) {
+        //         callback(new Error('请输入接口参数'))
+        //     } else {
+        //         callback()
+        //     }
+        // }
         const validatsecondWeb = (rule, value, callback) => {
             if (value.length == 0) {
                 callback(new Error('请输入第2页网址'))
@@ -476,9 +477,9 @@ export default {
                 ruleName: [{ required: true, trigger: 'blur', validator: validateRuleName }],
                 first_url: [{ required: true, trigger: 'blur', validator: validateFirst_url }],
                 secondWeb: [{ required: true, trigger: 'blur', validator: validatsecondWeb }],
-                // second_start:[{ required: true, trigger: 'blur', validator: validatsecondWeb }],
-                // second_num:[{ required: true, trigger: 'blur', validator: validatsecondWeb }],
-                // second_end:[{ required: true, trigger: 'blur', validator: validatsecondWeb }],
+                second_start: [{ required: true, trigger: 'blur', validator: validatsecondWeb }],
+                second_num: [{ required: true, trigger: 'blur', validator: validatsecondWeb }],
+                second_end: [{ required: true, trigger: 'blur', validator: validatsecondWeb }],
                 second_start: [{ required: true, trigger: 'blur', message: '请输入网址开头' }],
                 second_num: [{ required: true, trigger: 'blur', message: '请输入代码页数' }],
                 second_end: [{ required: true, trigger: 'blur', message: '请输入网址结束字符串' }],
@@ -490,9 +491,9 @@ export default {
                 title: [{ required: true, trigger: 'blur', validator: validatTitle }],
                 content: [{ required: true, trigger: 'blur', validator: validatcontent }],
                 source: [{ required: true, trigger: 'blur', validator: validatsource }],
-                author: [{ required: true, trigger: 'blur', validator: validatauthor }],
-                authorName: [{ required: true, trigger: 'blur', validator: validatauthorName }],
-                parameter: [{ required: true, trigger: 'blur', validator: validatparameter }]
+                author: [{ required: true, trigger: 'blur', message: "请输入作者字符串" }],
+                authorName: [{ required: true, trigger: 'blur', message: "请输入作者替换名称" }],
+                parameter: [{ required: true, trigger: 'blur', message: "请输入接口参数" }]
             }
         }
     },
@@ -505,9 +506,8 @@ export default {
                 pageSize: this.pageSize,
                 page: this.page,
             }).then(data => {
-                if (data.code == 200) {
-                    this.loading = false
-                }
+                this.loading = false
+
                 console.log(data.data.rep);
                 this.tableData = data.data.rep
                 this.total = data.data.count
@@ -595,6 +595,8 @@ export default {
 
         //1.8 设置采集规则
         addCrawlerRule() {
+            this.dialogName = '设置采集规则'
+            this.dialogBoo = "add"
             if (!this.webType) {
                 this.dialogTableVisible = false
                 this.$message({
@@ -735,6 +737,9 @@ export default {
         },
         //1.9 编辑采集规则
         goEdit(id, val) {
+            this.dialogName = '编辑采集规则'
+            this.dialogBoo = "update"
+
             console.log(id);
             this.activeId = id
             console.log(val);
@@ -746,7 +751,6 @@ export default {
                 })
                 return
             } else if (this.webType == 1) {
-                this.dialogBoo = "update"
                 this.dialogTableVisible = true
                 this.ruleForm.ruleName = val.name
                 this.ruleForm.first_url = val.first_url
@@ -768,7 +772,6 @@ export default {
                 this.ruleForm.detailPage = val.con_start
 
             } else if (this.webType == 2) {
-                this.dialogBoo = "update"
                 this.dialogTableVisible = true
                 this.ruleForm.ruleName = val.name
                 this.ruleForm.first_url = val.first_url
@@ -793,7 +796,6 @@ export default {
                     this.ruleForm.authorName = val.writer
                 }
             } else if (this.webType == 3) {
-                this.dialogBoo = "update"
                 this.dialogTableVisible = true
                 this.ruleForm.ruleName = val.name
                 this.ruleForm.diy_rule = val.diy_rule
@@ -846,7 +848,7 @@ export default {
             this.$refs[formName].validate((valid) => {
                 if (valid) {
                     console.log('submit!');
-                    this.submitDisabled = true
+                    // this.submitDisabled = true
                 } else {
                     console.log('error submit!!');
                     return false;
@@ -874,6 +876,7 @@ export default {
                             con_url: this.ruleForm.webSite_start.trim(), //详情页标签
                             con_start: this.ruleForm.detailPage, //详情页网址前缀
                         }).then(data => {
+                            this.submitDisabled = true
                             this.getData()
                             console.log(data);
                             if (data.code == 200) {
@@ -884,6 +887,13 @@ export default {
                                     type: 'success'
                                 })
                             }
+                            if (data.code == 0) {
+                                this.submitDisabled = false
+                                this.$message({
+                                    message: data.message,
+                                    type: 'error'
+                                })
+                            }
                         })
                     } else {
                         addRule({
@@ -914,6 +924,12 @@ export default {
                                     type: 'success'
                                 })
                             }
+                            if (data.code == 0) {
+                                this.$message({
+                                    message: data.message,
+                                    type: 'error'
+                                })
+                            }
                         })
                     }
 
@@ -990,6 +1006,7 @@ export default {
                         }
                     })
                 }
+                sessionStorage.clear();
             }
             //编辑
             if (this.dialogBoo == 'update') {
@@ -1015,9 +1032,9 @@ export default {
                         content: this.ruleForm.content.trim(),//规则型1：内容标签类名  接口型2：内容标签
                         source: this.ruleForm.source, //规则型1：来源标签类名  接口型2：来源标签
                         writer_class: this.ruleForm.author,//规则型1：作者标签类名  接口型2：作者标签
-                        writer: this.ruleForm.authorName.trim(),//规则型1：接口型2：作者默认名称（若未采集到则设置默认作者）
+                        writer: this.ruleForm.authorName,//规则型1：接口型2：作者默认名称（若未采集到则设置默认作者）
                         end_pagenum: this.ruleForm.endPage,//规则型1：列表页结束页码
-                        con_url: this.ruleForm.webSite_start.trim(), //详情页标签
+                        con_url: this.ruleForm.webSite_start, //详情页标签
                         con_start: this.ruleForm.detailPage, //详情页网址前缀
                     }).then(data => {
                         this.getData()
@@ -1107,25 +1124,30 @@ export default {
         },
         //保存
         saveForm() {
-            this.dialogTableVisible = false
-            sessionStorage.setItem('ruleName', this.ruleForm.ruleName); //任务规则名
-            sessionStorage.setItem('first_url', this.ruleForm.first_url); //第一页网址 
-            sessionStorage.setItem('collect', this.ruleForm.collect); //接口类 采集地址
-            sessionStorage.setItem('second_start', this.ruleForm.second_start); //第2页网址开头
-            sessionStorage.setItem('second_num', this.ruleForm.second_num); //第2页代码页数
-            sessionStorage.setItem('second_end', this.ruleForm.second_end);//第2页网址结束字符串
-            sessionStorage.setItem('startCode', this.ruleForm.startCode);  //起始代码
-            sessionStorage.setItem('startLabel', this.ruleForm.startLabel); //列表开始标签
-            sessionStorage.setItem('endPage', this.ruleForm.endPage); //结束页数
-            sessionStorage.setItem('title', this.ruleForm.title); //标题字符串
-            sessionStorage.setItem('content', this.ruleForm.content); //内容字符串
-            sessionStorage.setItem('detailPage', this.ruleForm.detailPage); //详情页标签
-            sessionStorage.setItem('webSite_start', this.ruleForm.webSite_start); //详情页网址前缀
-            sessionStorage.setItem('source', this.ruleForm.source); // 来源字符串
-            sessionStorage.setItem('author', this.ruleForm.author); // 作者字符串
-            sessionStorage.setItem('authorName', this.ruleForm.authorName); // 作者替换名称
-            sessionStorage.setItem('parameter', this.ruleForm.parameter); //接口类2 接口参数
-            sessionStorage.setItem('diy_rule', this.ruleForm.diy_rule); //自定义类
+            if (this.dialogBoo == 'add') {
+                this.dialogTableVisible = false
+                sessionStorage.setItem('ruleName', this.ruleForm.ruleName); //任务规则名
+                sessionStorage.setItem('first_url', this.ruleForm.first_url); //第一页网址 
+                sessionStorage.setItem('collect', this.ruleForm.collect); //接口类 采集地址
+                sessionStorage.setItem('second_start', this.ruleForm.second_start); //第2页网址开头
+                sessionStorage.setItem('second_num', this.ruleForm.second_num); //第2页代码页数
+                sessionStorage.setItem('second_end', this.ruleForm.second_end);//第2页网址结束字符串
+                sessionStorage.setItem('startCode', this.ruleForm.startCode);  //起始代码
+                sessionStorage.setItem('startLabel', this.ruleForm.startLabel); //列表开始标签
+                sessionStorage.setItem('endPage', this.ruleForm.endPage); //结束页数
+                sessionStorage.setItem('title', this.ruleForm.title); //标题字符串
+                sessionStorage.setItem('content', this.ruleForm.content); //内容字符串
+                sessionStorage.setItem('detailPage', this.ruleForm.detailPage); //详情页标签
+                sessionStorage.setItem('webSite_start', this.ruleForm.webSite_start); //详情页网址前缀
+                sessionStorage.setItem('source', this.ruleForm.source); // 来源字符串
+                sessionStorage.setItem('author', this.ruleForm.author); // 作者字符串
+                sessionStorage.setItem('authorName', this.ruleForm.authorName); // 作者替换名称
+                sessionStorage.setItem('parameter', this.ruleForm.parameter); //接口类2 接口参数
+                sessionStorage.setItem('diy_rule', this.ruleForm.diy_rule); //自定义类
+            }
+            if (this.dialogBoo == 'update') {
+                this.dialogTableVisible = false
+            }
         },
         // 查看
         goLook(id, val) {

src/views/dashboard/admin/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="dashboard-editor-container">
+    <!--超级管理员-->
     <div v-if="userType==10000">
       <!--网站，内容，公共栏目数量 start------------------------------------------>
       <el-row :gutter="32">
@@ -62,6 +63,7 @@
       </el-row>
       <!--chart end------------------------------------------>
     </div>
+    <!--调研员-->
     <div v-if="userType==4">
       <el-row :gutter="32">
         <el-col :xs="24" :sm="24" :lg="24">
@@ -74,6 +76,16 @@
         </el-col>
       </el-row>
     </div>
+    <!--个人会员-->
+    <div v-if="userType==1">
+      <el-row :gutter="32">
+        <el-col :xs="24" :sm="24" :lg="24">
+          <div class="noData">
+            欢迎使用恒星管理平台
+          </div>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
@@ -240,6 +252,15 @@ export default {
     }
   }
 
+  .noData {
+    color: #CCCCCC;
+    font-size: 32px;
+    font-weight: bold;
+    text-align: center;
+    height: 740px;
+    line-height: 740px;
+  }
+
   .dashboard-editor-container {
     padding: 32px;
     background-color: rgb(240, 242, 245);

src/views/login/index.vue

@@ -81,10 +81,10 @@
                 <div class="reloadBtn" @click="getImgCode">看不清？换一张图</div>
               </div>
             </div>
-            <el-button :loading="loading" type="primary" class="loginBtn" @click.native.prevent="handleLogin">
+            <el-button :loading="loading" type="primary" class="loginBtn" @click.native.prevent="singleLogin">
               登录
             </el-button>
-            <div class="singleLogin" @click="singleLogin"><i class="el-icon-cloudy" /> 单点登录测试</div>
+            <!-- <div class="singleLogin" @click="goBackWebUrl"><i class="el-icon-refresh-right" /> 点此返回原网站</div> -->
           </el-form>
           <!--开始验证表单 end-->
         </div>
@@ -127,7 +127,8 @@ export default {
         username: '', // 15210211200
         password: '', // 111111
         type: 1, //1=账号密码登录
-        captcha: ''
+        captcha: '',//验证码图片
+        code:''//验证code
       },
       loginRules: { // 2.配置from表单验证规则
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],
@@ -212,7 +213,7 @@ export default {
               }else if(res.code!=0&&res.code!=200){
                 this.$message({
                   type:'error',
-                  message:"用户不存在！"
+                  message:res.message
                 })
               }
             })
@@ -229,8 +230,17 @@ export default {
     getImgCode() {
       const that = this
       this.$store.dispatch('user/getImgCode').then( res => {
-        console.log(res)
-        that.codeImg = res.data
+        if(res.code==200){
+          console.log(res)
+          //that.codeImg = res.data
+          that.codeImg = res.data.img;
+          that.loginForm.code = res.data.code;
+
+          console.log(that.loginForm)
+        }else{
+          this.$message.error("获取验证码失败，请稍后再试！")
+        }
+
       }).catch(() => {
         this.loading = false
       })
@@ -258,21 +268,100 @@ export default {
       }
       return null; // 如果没有找到 backurl 参数，返回 null
     },
-    //测试单点登录
+    //登录分路器 start ---------------------------------------->
     singleLogin() {
-      // 获取当前页面的 URL
-      const currentUrl = window.location.href;
+      // 获得当前域名
+      const urlString = window.location.href;
+      // 创建一个URL对象
+      const url = new URL(urlString);
+      // 获取hash部分（即#后面的部分）
+      const hash = url.hash;
+      // 从hash中提取查询参数
+      const hashParams = new URLSearchParams(hash.split('?')[1]);
+      // 获取backurl参数的值
+      const backurl = hashParams.get('backurl');
+      // 获取backurl参数的值
+      const userurl = hashParams.get('userurl');
+      // 获取可能出现的内部值
+      const system = hashParams.get('redirect');
+
+      // 解码backurl
+      const decodedBackurl = decodeURIComponent(backurl);
+      const decodedUserurl = decodeURIComponent(userurl);
+      
+      // 第一种情况， 不含有backUrl或者userUrl 说明登录者是超级管理员
+      if(hashParams.size==0||system=='/dashboard'){
+        console.log("执行超级管理员登录！")
+        this.login(1)
+      }else{
+        // 第二种情况，含有backurl 说明是单点登录
+        if(backurl!=null){
+          console.log("执行单点登录！")
+          const backurlObj = new URL(decodedBackurl);
+          const back_url = backurlObj.hostname;
+          this.login(2,back_url)
+
+        }else if(userurl!=null){
+          //第三种情况 含有userurl 说明是会员登录
+          console.log(user_url)
+          console.log("执行会员登录！")
+          const backurlObj = new URL(decodedUserurl);
+          const user_url = backurlObj.hostname;
+
+          if(user_url==""){
+            this.$message.error("登录链接错误！")
+          }else{
+            console.log("当前登录链接是：" + user_url)
+            this.login(3,user_url)
+          }
+
 
-      const backurlValue = this.getBackUrl(currentUrl);
-      if (backurlValue) {
-        //console.log('backurl:', backurlValue); // 打印 backurl 的值
-        //存在backurl 准备进行单点登录
-        //回调地址backurlValue
-        
+        }else{
+          this.$message.error("检查登录链接失败，请从正规渠道登录！")
+        }
+      }
+
+    },
+    // 登录分路器 end ---------------------------------------->
+    // 登录 start ---------------------------------------->
+    login(type,url){
+
+      //超级管理员登录
+      if(type==1){
         this.$refs.loginForm.validate(valid => {
-        if (valid) {
-            //console.log(this.loginForm)
-            //开始登录
+          if (valid) {
+            this.loading = true
+            this.$store.dispatch('user/login', this.loginForm).then( res => {
+              this.loading = false
+              console.log(res)
+              if(res.code==0){
+                this.$message({
+                  type:'error',
+                  message:res.message
+                })
+              }else if(res.code==200){
+                console.log("登录成功，将跳转至详情页面！")
+                this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
+              }else if(res.code!=0&&res.code!=200){
+                this.$message({
+                  type:'error',
+                  message:res.message
+                })
+              }
+            })
+          }else {
+            console.log('表单填写错误！请检查！')
+            return false;
+          }
+        })
+      }
+      //单点登录
+      if(type==2){
+        // 获取当前页面的 URL
+        this.loginForm.backurl = url;
+
+        this.$refs.loginForm.validate(valid => {
+          if (valid) {
             this.loading = true
             this.$store.dispatch('user/login', this.loginForm)
               .then( res => {
@@ -281,18 +370,20 @@ export default {
                 if(res.code==0){
                   this.$message({
                     type:'error',
-                    message:"表单项有误，请检查！"
+                    message:res.message
                   })
                 }else if(res.code==200){
+                  const currentUrl = window.location.href;
+                  const backurlValue = this.getBackUrl(currentUrl);
                   console.log("单点登录成功，开始启动跳转！")
-                  // res.data.token
-                  // backurlValue
-                  window.location.href = 'http://admindev.bjzxtw.org.cn/auth/back_login.php?backurl=' + backurlValue + '&token='+res.data.token;
+                  console.log(backurlValue)
+                  console.log(res.data.token)
+                  window.location.href = 'http://admindev.bjzxtw.org.cn/auth/back_login.php?backurl=' + backurlValue + '&token=' + res.data.token;
 
                 }else if(res.code!=0&&res.code!=200){
                   this.$message({
                     type:'error',
-                    message:"用户不存在！"
+                    message:res.message
                   })
                 }
               })
@@ -304,19 +395,72 @@ export default {
             return false
           }
         })
-      } else {
-        //没有backurl 直接走登录接口
-        this.handleLogin()
+
+      }
+      //会员登录
+      if(type==3){
+        this.loginForm.userurl = url;
+        this.$refs.loginForm.validate(valid => {
+          if (valid) {
+            this.loading = true;
+            this.$store.dispatch('user/login', this.loginForm).then( res => {
+              this.loading = false
+              console.log(res)
+              if(res.code==0){
+                this.$message({
+                  type:'error',
+                  message:res.message
+                })
+              }else if(res.code==200){
+                console.log("登录成功，将跳转至详情页面！")
+                this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
+              }else if(res.code!=0&&res.code!=200){
+                this.$message({
+                  type:'error',
+                  message:res.message
+                })
+              }
+            })
+
+          }else {
+            console.log('表单填写错误！请检查！')
+            return false;
+          }
+        })
+      }
+    },
+    // 登录 end ---------------------------------------->
+
+    // 返回原网站 start---------------------------------------->
+    goBackWebUrl(){
+      // 获得当前域名
+      const urlString = window.location.href;
+      // 创建一个URL对象
+      const url = new URL(urlString);
+      // 获取hash部分（即#后面的部分）
+      const hash = url.hash;
+      // 从hash中提取查询参数
+      const hashParams = new URLSearchParams(hash.split('?')[1]);
+      // 获取backurl参数的值
+      const backurl = hashParams.get('backurl');
+      // 解码backurl
+      const decodedBackurl = decodeURIComponent(backurl);
+
+      if(hashParams.size!=0&&backurl!=null){
+        window.location.href = decodedBackurl
+      }else{
+        this.$message.error("无法返回原网站，请检查登录地址链接！")
       }
+
     }
-    // 单点登录 end ---------------------------------------->
+    // 返回原网站 end---------------------------------------->
   }
 }
 </script>
 
 <style scoped lang="less">
   .singleLogin {
-    font-size: 14px;
+    font-size: 18px;
     color: #666;
     cursor: pointer;
     margin-top: 30px;

src/views/news/creatNews.vue

@@ -31,7 +31,7 @@
             <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="推荐等级：" class="custom-align-right">
+            <el-form-item label="推荐等级：" class="custom-align-right" >
               <el-select v-model="form.level" clearable placeholder="请选择推荐等级..">
                 <el-option label="头条" :value="1"></el-option>
                 <el-option label="轮播图" :value="2"></el-option>
@@ -258,7 +258,8 @@ export default {
         copyfrom:[{required:true,trigger:'blur',validator:validateEmpty}],
         fromurl:[{required:true,trigger:'blur',validator:validateEmpty}],
         //缩略图不能为空
-        imgUrl:[{required:true,trigger:'blur',validator:validateEmpty}]
+        imgUrl:[{required:true,trigger:'blur',validator:validateEmpty}],
+        level:[{required:true,trigger:'blur',validator:validateEmpty}]
       },
       //1.3富文本编辑器配置
       showHtml: false, //用于保存源码内容

src/views/role/components/userDefault.vue

@@ -180,6 +180,16 @@
           <el-form-item label="提示词：" :label-width="formLabelWidth" prop="" class="custom-align-right">
             <el-input type="textarea" v-model="form.remark" class="custom-textarea" placeholder="请输入提示词"></el-input>
           </el-form-item>
+          <el-form-item label="网站选择" :label-width="formLabelWidth" prop="sszq" class="custom-align-right">
+            <el-select v-model="form.sszq" multiple filterable placeholder="请选择">
+              <el-option
+                v-for="item in webSiteList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
         </div>
       </el-form>
     </div>  
@@ -286,10 +296,13 @@ export default {
         other:[],//相关资料
         remark:"",//提示词
         zip_code:"",//邮编
+        sszq:[]//网站选择
       },
       timeList:[],//时间段
       otherList:[],//相关资料列表
       role_idArr:[],//角色id池
+      //网站列表
+      webSiteList: [],
       //上传照片
       photoUrl:'',
       hovering: false, // 鼠标悬浮状态 悬浮时显示删除
@@ -322,7 +335,9 @@ export default {
         //11.出生年月
         birthday: [{ required: true, trigger: 'blur', validator: validateTime }],
         //12.有效期
-        timeList:[{ required: true, trigger: 'blur', validator: validateTimeTo }]
+        timeList:[{ required: true, trigger: 'blur', validator: validateTimeTo }],
+        //13.网站选择
+        sszq: [{ required: true, trigger: 'blur', validator: validateArray }]
       },
       //时间跨度
       pickerOptions: {
@@ -511,6 +526,22 @@ export default {
     },
     //提交表单 start ------------------------------------------------------------>
     //3.编辑表单 start ------------------------------------------------------------>
+    //获得网站列表
+    getWebsiteList(){
+      this.$store.dispatch('pool/getWebList',{page:1,pageSize:1000}).then(res=>{
+        if(res.code!=200){
+          this.$message.error(res.message)
+        }else{
+          for(let item of res.data.rows){
+            let data = {
+              value:item.id,
+              label:item.website_name
+            }
+            this.webSiteList.push(data)
+          }
+        }
+      })
+    },
     //获得用户信息
     getUserInfo(){
       this.$store.dispatch('userMember/getUser',{id:this.editId}).then(res=>{
@@ -664,6 +695,8 @@ export default {
     }
     //设置token
     this.setHeaders(); // 在组件挂载时设置 headers
+    //获取所有网站列表
+    this.getWebsiteList();
   }
 };
 </script>

src/views/role/components/userEnterprise.vue

@@ -4,7 +4,7 @@
       <el-form ref="form" :model="form" :rules="loginRules" class="login-form" autocomplete="on" label-position="left" label-width="120px">
         <div class="formDiv">
           <!--选择角色 start------------------------------------------>
-          <el-form-item label="所属角色：" :label-width="formLabelWidth" prop="role_id" class="custom-align-right">
+          <el-form-item label="所属角色2：" :label-width="formLabelWidth" prop="role_id" class="custom-align-right">
             <div class="formLabelFloatBox">
               <el-select v-model="form.role_id" placeholder="请选择..">
                 <el-option
@@ -140,6 +140,16 @@
           <el-form-item label="提示词：" :label-width="formLabelWidth" prop="" class="custom-align-right">
             <el-input type="textarea" v-model="form.remark" class="custom-textarea" placeholder="请输入提示词"></el-input>
           </el-form-item>
+          <el-form-item label="网站选择" :label-width="formLabelWidth" prop="sszq" class="custom-align-right">
+            <el-select v-model="form.sszq" multiple filterable placeholder="请选择">
+              <el-option
+                v-for="item in webSiteList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
         </div>
       </el-form>
     </div>  
@@ -240,10 +250,13 @@ export default {
         legal_person_real_name:"",//法人姓名
         legal_person_mobile:"",//法人手机号
         legal_person_id_card:"",//法人身份证号
+        sszq:[]//网站选择
       },
       timeList:[],//时间段
       otherList:[],//相关资料列表
       role_idArr:[],//角色id池
+      //网站列表
+      webSiteList: [],
       //密码验证
       capsTooltip1: false,
       capsTooltip2: false,
@@ -283,7 +296,9 @@ export default {
         //14.法人身份证号
         legal_person_id_card: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         //15.有效期
-        timeList:[{ required: true, trigger: 'blur', validator: validateTimeTo }]
+        timeList:[{ required: true, trigger: 'blur', validator: validateTimeTo }],
+        //16.网站选择
+        sszq: [{ required: true, trigger: 'blur', validator: validateArray }]
       },
       //时间跨度
       pickerOptions: {
@@ -437,6 +452,22 @@ export default {
     },
     //提交表单 start ------------------------------------------------------------>
     //3.编辑表单 start ------------------------------------------------------------>
+    //获得网站列表
+    getWebsiteList(){
+      this.$store.dispatch('pool/getWebList',{page:1,pageSize:1000}).then(res=>{
+        if(res.code!=200){
+          this.$message.error(res.message)
+        }else{
+          for(let item of res.data.rows){
+            let data = {
+              value:item.id,
+              label:item.website_name
+            }
+            this.webSiteList.push(data)
+          }
+        }
+      })
+    },
     //获得用户信息
     getUserInfo(){
       this.$store.dispatch('userMember/getUser',{id:this.editId}).then(res=>{
@@ -575,6 +606,8 @@ export default {
     }
     //设置token
     this.setHeaders(); // 在组件挂载时设置 headers
+    //获取所有网站列表
+    this.getWebsiteList();
   }
 };
 </script>

src/views/role/components/userInvestigate.vue

@@ -177,6 +177,16 @@
           <el-form-item label="提示词：" :label-width="formLabelWidth" prop="" class="custom-align-right">
             <el-input type="textarea" v-model="form.remark" class="custom-textarea" placeholder="请输入提示词"></el-input>
           </el-form-item>
+          <!-- <el-form-item label="网站选择" :label-width="formLabelWidth" prop="sszq" class="custom-align-right">
+            <el-select v-model="form.sszq" multiple filterable placeholder="请选择">
+              <el-option
+                v-for="item in webSiteList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item> -->
         </div>
       </el-form>
     </div>  
@@ -297,11 +307,14 @@ export default {
         other:[],//相关资料
         remark:"",//提示词
         zip_code:"",//邮编
+        //sszq: [],//所属网站
       },
       timeList:[],//时间段
       otherList:[],//相关资料列表
       role_idArr:[],//角色id池
       isNational:0,//是否为全国
+      //网站列表
+      webSiteList: [],
       //上传照片
       photoUrl:'',
       hovering: false, // 鼠标悬浮状态 悬浮时显示删除
@@ -338,7 +351,9 @@ export default {
         //12.出生年月
         birthday: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         //13.有效期
-        timeList:[{ required: true, trigger: 'blur', validator: validateTimeTo }]
+        timeList:[{ required: true, trigger: 'blur', validator: validateTimeTo }],
+        //14.网站选择
+        sszq: [{ required: true, trigger: 'blur', validator: validateArray }]
       },
       //时间跨度
       pickerOptions: {
@@ -540,6 +555,27 @@ export default {
     },
     //提交表单 start ------------------------------------------------------------>
     //3.编辑表单 start ------------------------------------------------------------>
+    //获得网站列表
+    getWebsiteList(userWebList){
+      this.$store.dispatch('pool/getWebList',{page:1,pageSize:1000}).then(res=>{
+        if(res.code!=200){
+          this.$message.error(res.message)
+        }else{
+          for(let item of res.data.rows){
+            let data = {
+              value:item.id,
+              label:item.website_name
+            }
+            this.webSiteList.push(data)
+          }
+          //如果有数据可以回显
+          if(userWebList){
+            console.log("显示编辑用户的所属网站！")
+            this.form.sszq = userWebList;
+          }
+        }
+      })
+    },
     //获得用户信息
     getUserInfo(){
       this.$store.dispatch('userMember/getUser',{id:this.editId}).then(res=>{
@@ -597,6 +633,9 @@ export default {
           url: url,                // 文件的 URL
           status: 'success'        // 设置状态为 success
         }));
+
+        //获取所有网站列表
+        this.getWebsiteList(res.data.sszq);
       })
     },
     //修改用户
@@ -709,6 +748,8 @@ export default {
       this.getUserInfo();
     }else{
       console.log("添加用户！")
+      //获取所有网站列表
+      this.getWebsiteList();
     }
     //设置token
     this.setHeaders(); // 在组件挂载时设置 headers

src/views/role/components/userPolitician.vue

@@ -143,6 +143,16 @@
           <el-form-item label="提示词：" :label-width="formLabelWidth" prop="" class="custom-align-right">
             <el-input type="textarea" v-model="form.remark" class="custom-textarea" placeholder="请输入提示词"></el-input>
           </el-form-item>
+          <el-form-item label="网站选择" :label-width="formLabelWidth" prop="sszq" class="custom-align-right">
+            <el-select v-model="form.sszq" multiple filterable placeholder="请选择">
+              <el-option
+                v-for="item in webSiteList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
         </div>
       </el-form>
     </div>  
@@ -232,10 +242,13 @@ export default {
         legal_person_real_name:"",//法人姓名
         legal_person_mobile:"",//法人手机号
         legal_person_id_card:"",//法人身份证号
+        sszq:[]//网站选择
       },
       timeList:[],//时间段
       otherList:[],//相关资料列表
       role_idArr:[],//角色id池
+      //网站列表
+      webSiteList: [],
       //密码验证
       capsTooltip1: false,
       capsTooltip2: false,
@@ -279,7 +292,9 @@ export default {
         //16.详细地址
         address_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
         //17.有效期
-        timeList: [{ required: true, trigger: 'blur', validator: validateTimeTo }]
+        timeList: [{ required: true, trigger: 'blur', validator: validateTimeTo }],
+        //18.网站选择
+        sszq: [{ required: true, trigger: 'blur', validator: validateArray }]
       },
       //时间跨度
       pickerOptions: {
@@ -426,6 +441,22 @@ export default {
     },
     //提交表单 start ------------------------------------------------------------>
     //3.编辑表单 start ------------------------------------------------------------>
+    //获得网站列表
+    getWebsiteList(){
+      this.$store.dispatch('pool/getWebList',{page:1,pageSize:1000}).then(res=>{
+        if(res.code!=200){
+          this.$message.error(res.message)
+        }else{
+          for(let item of res.data.rows){
+            let data = {
+              value:item.id,
+              label:item.website_name
+            }
+            this.webSiteList.push(data)
+          }
+        }
+      })
+    },
     //获得用户信息
     getUserInfo(){
       this.$store.dispatch('userMember/getUser',{id:this.editId}).then(res=>{
@@ -565,6 +596,8 @@ export default {
     }
     //设置token
     this.setHeaders(); // 在组件挂载时设置 headers
+    //获取所有网站列表
+    this.getWebsiteList();
   }
 };
 </script>

src/views/tabbar/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 {
+    height: 38px;
+    line-height: 38px;
+    color:#333333;
+    position: relative;
+    margin-bottom: 30px;
+    .tableFloatLine {
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: block;
+      position: absolute;
+      left:-20px;
+      top:10px;
+    }
+  }
+</style>

src/views/tabbar/tabbar.vue

@@ -0,0 +1,785 @@
+<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_name" class="input" placeholder="请输入网站名称"></el-input>
+                        <!-- <el-select v-model="webSiteName_id" :multiple="false" :multiple-limit="1" filterable remote
+                            reserve-keyword placeholder="请输入网站名称" :remote-method="getWebNavList"
+                            :loading="webSiteLoading" @change="selectWebSite">
+                            <el-option v-for="item in webSiteList" :key="item.value" :label="item.label"
+                                :value="item.value">
+                            </el-option>
+                        </el-select> -->
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">底部导航名称</div>
+                        <el-input v-model="tabbarName" class="input" 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="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 prop="website_name" label="网站" width="">
+                        </el-table-column>
+                        <el-table-column prop="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 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="goEdit(scope.row.id, scope.row)">
+                                        <i class="el-icon-edit-outline"></i>
+                                        编辑
+                                    </div>
+                                    <div class="listLookBtn" @click="goLook(scope.row.id,scope.row)">
+                                        <i class="el-icon-view"></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="120px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <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">
+                            <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="tabbarName">
+                        <el-input v-model="ruleForm.tabbarName" placeholder="请输入底部导航名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="页面类型:" prop="pageType">
+                        <el-radio v-model="ruleForm.pageType" label="1" :disabled="this.disabled">特殊列表页</el-radio>
+                        <el-radio v-model="ruleForm.pageType" label="0" :disabled="this.disabled">特殊详情页</el-radio>
+                    </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----------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+import { getFooterCategory, getTemplateClass, upFooterCategory, delFooterCategory } from '@/api/tabbar'
+export default {
+    components: {
+        tableTitle,//表格标题-
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            tableDivTitle: "底部导航列表",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            disabled: false, //禁用
+
+            tableData: [],//表格数据
+
+            // 可以输入的搜索框相关
+            webSiteList: [],//获取关联网站列表
+            webSiteLoading: false,
+
+            //3.4 上传logo图片
+            logoUrl: '',
+            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+
+            value: '',
+
+            
+            activeid: "",  //活动id 
+            type:"",  //查看时需要传递的类型
+
+            // 分页相关
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+
+            formLabelWidth: '', //广告示例图相关
+
+
+            // 搜索框相关
+            webSiteName_name: '', //网站名称
+            webSiteName_id: '', //网站名称id
+            tabbarName: '', //底部导航名称
+            website_id: "", //网站id
+
+
+            ruleForm: {
+                webName: '', //网站名称
+                tabbarName: '', //底部导航名称
+                pageType: '', //页面类型
+            },
+            rules: {
+                webName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                tabbarName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                pageType: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            getFooterCategory({
+                page: this.page,
+                pageSize: this.pageSize
+            }).then(data => {
+                console.log(data);
+                this.tableData = data.data.rows
+                this.total = data.data.count
+            })
+        },
+
+        //1.2 删除内容
+        deleteRow(id) {
+            console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+
+                delFooterCategory({
+                    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.3 查看示例图
+        goGraph() {
+            this.dialogVisible = true
+        },
+
+        //1.4 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.5 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.6 搜索按钮
+        goSearch() {
+            if (this.webSiteName_name && this.tabbarName) {
+                getFooterCategory({
+                    page: this.page,
+                    pageSize: this.pageSize,
+                    name: this.tabbarName,
+                    website_name: this.webSiteName_name, //网站名称
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                })
+            } else if (this.webSiteName_name && !this.tabbarName) {
+                getFooterCategory({
+                    page: this.page,
+                    pageSize: this.pageSize,
+                    // name: this.tabbarName,
+                    website_name: this.webSiteName_name, //网站名称
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                })
+            } else if (!this.webSiteName_name && this.tabbarName) {
+                getFooterCategory({
+                    page: this.page,
+                    pageSize: this.pageSize,
+                    name: this.tabbarName,
+                    // website_name: this.webSiteName_name, //网站名称
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                })
+            }
+
+        },
+        //1.7 重置按钮
+        goReset() {
+            this.webSiteName_name = ""
+            this.tabbarName = ""
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+        //1.9 编辑
+        goEdit(id, val) {
+            // console.log(id);
+            this.dialogName = '编辑'
+            this.activeid = id
+            this.dialogTableVisible = true
+            this.disabled=true
+            console.log(id, val);
+            console.log("状态", val);
+
+            //数据回显
+            this.website_id = val.website_id
+            this.ruleForm.webName = val.website_name //网站名称
+            this.ruleForm.tabbarName = val.name //底部导航名称
+            if (val.type == 0) {
+                this.ruleForm.pageType = '0' //页面类型
+            } else if (val.type == 1) {
+                this.ruleForm.pageType = '1' //页面类型
+            }
+        },
+
+        //2.0 查看
+        goLook(id,val) {
+            this.activeid = id
+            this.type=val.type
+            this.$router.push({
+                path: '/tabbarDetail',
+                query: {
+                    id: this.activeid,
+                    type:this.type
+                }
+            })
+        },
+
+        //1.7 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+            this.disabled=false
+
+            //添加时清空回显回来的数据
+            this.ruleForm.webName = '' //关联网站名称
+            this.ruleForm.tabbarName = '' //底部导航名称
+            this.ruleForm.pageType = '' //页面类型
+        },
+
+        // 弹出层相关方法
+        // 提交表单
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    console.log('submit!');
+
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+            if (this.dialogName == "添加") {
+                getTemplateClass({
+                    website_id: this.website_id,
+                    name: this.ruleForm.tabbarName,
+                    type: this.ruleForm.pageType,
+                }).then(data => {
+                    console.log(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.website_id == '') {
+                this.$message({
+                    message: '请输入并选择网站名称',
+                    type: 'error'
+                })
+                this.dialogVisible = true
+            }
+            if (this.dialogName == "编辑") {
+                upFooterCategory({
+                    website_id: this.website_id,
+                    name: this.ruleForm.tabbarName,
+                    id: this.activeid
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '编辑成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                    }
+                    if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                    }
+                    this.getData()
+                })
+            }
+
+        },
+        //取消添加或编辑
+        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;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl = res.data.imgUrl;//显示缩略图
+                this.ruleForm.adPhoto = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        handleDelete() {
+            // 删除图片
+            this.logoUrl = ''; // 清空图片 URL
+        },
+
+        //搜索部分的输入关键词下拉框
+        selectWebSite(value) {
+            this.webSiteName_id = value
+        },
+
+        //添加 / 编辑弹窗中输入关键词下拉框 
+        // 判断是否已经关联了网站
+        detectionWebSite(value) {
+            console.log(value);
+            this.website_id = value
+            console.log(this.website_id);
+
+        },
+
+        //
+        getWebNavList(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.webSiteList = dataArr;
+                    this.webSiteLoading = false;
+                }).catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '网络错误，请重试！'
+                    });
+                })
+            } else {
+                this.navList = [];
+            }
+        },
+    },
+    mounted() {
+        this.getData()
+    },
+}
+</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;
+}
+</style>

src/views/tabbar/tabbarDetail.vue

@@ -0,0 +1,651 @@
+<template>
+    <!-- 广告位管理 -->
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title" v-if="this.tabbarType == 1">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">列表标题</div>
+                        <el-input v-model="listTitle" class="input" placeholder="请输入列表标题"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">内容标题</div>
+                        <el-input v-model="contentTitle" class="input" 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="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 prop="list_title" label="列表标题" width="" v-if="this.tabbarType == 1">
+                        </el-table-column>
+                        <el-table-column prop="con_title" 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="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="listTitle" v-if="this.tabbarType == 1">
+                        <el-input v-model="ruleForm.listTitle" placeholder="请输入列表标题"></el-input>
+                    </el-form-item>
+                    <el-form-item label="内容标题:" prop="contentTitle">
+                        <el-input v-model="ruleForm.contentTitle" placeholder="请输入内容标题"></el-input>
+                    </el-form-item>
+                    <el-form-item label="内容详情:" prop="contentDetail">
+                        <el-input v-model="ruleForm.contentDetail" type="textarea" :rows="10" placeholder="请输入内容详情"
+                            resize="none">
+                        </el-input>
+                    </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----------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+import { addFooterContent, getFooterContent, upFooterContent, delFooterContent } from '@/api/tabbar'
+export default {
+    components: {
+        tableTitle,//表格标题-
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            tableDivTitle: "底部导航详情",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+
+            tableData: [],//表格数据
+            tabbarId: '',//底部导航传递的id
+            tabbarType: 1,//底部导航传递的类型
+
+            //活动id
+            activeid: "",
+
+            // 分页相关
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+
+            // 搜索框相关
+            listTitle: '', //网站名称id
+            contentTitle: '', //广告位名称
+
+            //弹框相关
+            ruleForm: {
+                listTitle: '', //列表标题
+                contentTitle: '', //内容标题
+                contentDetail: '', //内容详情
+            },
+            rules: {
+                listTitle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                contentTitle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                contentDetail: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            getFooterContent({
+                fcat_id: this.tabbarId,
+                page: this.page,
+                pageSize: this.pageSize
+            }).then(data => {
+                console.log(data);
+                this.tableData = data.data.rows
+                this.total = data.data.count
+            })
+        },
+
+        //1.2 删除内容
+        deleteRow(id) {
+            console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+
+                delFooterContent({
+                    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.3 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.4 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.5 搜索按钮
+        goSearch() {
+            getFooterContent({
+                fcat_id: this.tabbarId,
+                page: this.page,
+                pageSize: this.pageSize,
+                list_title:this.listTitle,
+                con_title:this.contentTitle,
+            }).then(data => {
+                console.log(data);
+                this.tableData = data.data.rows
+                this.total = data.data.count
+            })
+        },
+        //1.6 重置按钮
+        goReset() {
+            this.listTitle = ""
+            this.contentTitle = ""
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+        //1.7 编辑
+        goEdit(id, val) {
+            // console.log(id);
+            this.dialogName = '编辑'
+            this.activeid = id
+            this.dialogTableVisible = true
+            console.log(id, val);
+
+            //数据回显
+            this.ruleForm.listTitle = val.list_title //列表标题
+            this.ruleForm.contentTitle = val.con_title //内容标题
+            this.ruleForm.contentDetail = val.content //内容详情
+        },
+
+        //1.8 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+
+            //添加时清空回显回来的数据
+            this.ruleForm.contentTitle = '' //内容标题
+            this.ruleForm.contentDetail = '' //内容详情
+        },
+
+        // 弹出层相关方法
+        // 1.9 提交表单
+        submitForm(formName) {
+            // 判断用户是否输入数据
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    console.log('submit!');
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+            if (this.dialogName == "添加") {
+                if (this.tabbarType == 0) { //详情页类型
+                    addFooterContent({
+                        fcat_id: this.tabbarId,
+                        type: this.tabbarType,
+                        con_title: this.ruleForm.contentTitle,
+                        content: this.ruleForm.contentDetail,
+                    }).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'
+                            })
+                        }
+                    })
+                } else if (this.tabbarType == 1) { //列表页类型
+                    addFooterContent({
+                        fcat_id: this.tabbarId,
+                        type: this.tabbarType,
+                        list_title: this.ruleForm.listTitle,
+                        con_title: this.ruleForm.contentTitle,
+                        content: this.ruleForm.contentDetail,
+                    }).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'
+                            })
+                        }
+                    })
+                }
+            }
+            if (this.dialogName == "编辑") {
+                if (this.tabbarType == 0) { //详情页类型
+                    upFooterContent({
+                        id: this.activeid, //内容id
+                        type: this.tabbarType,
+                        con_title: this.ruleForm.contentTitle,
+                        content: this.ruleForm.contentDetail,
+                    }).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'
+                            })
+                        }
+                    })
+                } else if (this.tabbarType == 1) { //列表页类型
+                    upFooterContent({
+                        id: this.activeid, //内容id
+                        type: this.tabbarType,
+                        list_title: this.ruleForm.listTitle,
+                        con_title: this.ruleForm.contentTitle,
+                        content: this.ruleForm.contentDetail,
+                    }).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'
+                            })
+                        }
+                    })
+                }
+            }
+
+        },
+        //取消
+        cancelForm() {
+            this.dialogTableVisible = false
+        },
+    },
+    mounted() {
+        console.log(this.$route.query.id);
+        this.tabbarId = this.$route.query.id
+        this.tabbarType = this.$route.query.type
+
+        this.getData() //获取数据
+    },
+}
+</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;
+        }
+    }
+
+
+
+    ::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/template/style/1/sector/2.vue

@@ -12,9 +12,9 @@
         <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">
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
           </el-option>
         </el-select>
       </div>

src/views/template/templateBase.vue

@@ -55,12 +55,12 @@
           </el-form-item>
           <el-form-item label="联系电话：" :label-width="formLabelWidth" prop="contact_number" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.contact_number" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.contact_number" placeholder="请输入.." maxlength="255"></el-input>
             </div>
           </el-form-item>
           <el-form-item label="公司地址：" :label-width="formLabelWidth" prop="company_address" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.company_address" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.company_address" placeholder="请输入.." maxlength="255"></el-input>
             </div>
           </el-form-item>
           <el-form-item label="项目LOGO：" class="custom-align-right" prop="project_logo">
@@ -80,12 +80,12 @@
           </el-form-item>
           <el-form-item label="项目名称：" :label-width="formLabelWidth" prop="project_name" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.project_name" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.project_name" placeholder="请输入.." maxlength="100"></el-input>
             </div>
           </el-form-item>
           <el-form-item label="项目网址：" :label-width="formLabelWidth" prop="project_url" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.project_url" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.project_url" placeholder="请输入.."  maxlength="100"></el-input>
             </div>
           </el-form-item>
           <el-form-item label="公司LOGO：" class="custom-align-right" prop="company_logo">
@@ -105,42 +105,42 @@
           </el-form-item>
           <el-form-item label="公司名称：" :label-width="formLabelWidth" prop="company_name" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.company_name" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.company_name" placeholder="请输入.." maxlength="100"></el-input>
             </div>
           </el-form-item>
           <el-form-item label="公司网址：" :label-width="formLabelWidth" prop="company_url" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.company_url" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.company_url" placeholder="请输入.." maxlength="100"></el-input>
             </div>
           </el-form-item>
           <el-form-item label="网站备案号：" :label-width="formLabelWidth" prop="icp_number" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.icp_number" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.icp_number" placeholder="请输入.." maxlength="50"></el-input>
             </div>  
           </el-form-item>
           <el-form-item label="网站备链接：" :label-width="formLabelWidth" prop="icp_number_url" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.icp_number_url" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.icp_number_url" placeholder="请输入.." maxlength="100"></el-input>
             </div>  
           </el-form-item>
           <el-form-item label="网安备案号：" :label-width="formLabelWidth" prop="record_number" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.record_number" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.record_number" placeholder="请输入.." maxlength="50"></el-input>
             </div>
           </el-form-item>
           <el-form-item label="网安备案号链接" :label-width="formLabelWidth" prop="record_number_url" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.record_number_url" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.record_number_url" placeholder="请输入.." maxlength="100"></el-input>
             </div>
           </el-form-item>
           <el-form-item label="客服QQ号：" :label-width="formLabelWidth" prop="customer_service_qq" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.customer_service_qq" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.customer_service_qq" placeholder="请输入.." maxlength="50"></el-input>
             </div>
           </el-form-item>
           <el-form-item label="通联QQ号：" :label-width="formLabelWidth" prop="communications" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input type="text" v-model="form.communications" placeholder="请输入.."></el-input>
+              <el-input type="text" v-model="form.communications" placeholder="请输入.." maxlength="50"></el-input>
             </div>
           </el-form-item>
         </div>

src/views/template/templateCreat.vue

@@ -1,9 +1,13 @@
 <template>
-  <div class="mainBox">
+  <div class="mainBox" v-loading="this.$store.state.template.loading==true" element-loading-text="请稍等">
     <!-- 顶部菜单 start ---------------------------------------->
     <div class="topMenuBox">
       <div>
-        <el-button icon="el-icon-refresh" type="primary" @click="randomTemplate">随机生成</el-button>
+        <el-button icon="el-icon-refresh" type="primary" @click="randomTemplate">
+          <span v-if="this.$store.state.template.pageStatus == 1">随机生成首页</span>
+          <span v-if="this.$store.state.template.pageStatus == 3">随机生成列表页</span>
+          <span v-if="this.$store.state.template.pageStatus == 4">随机生成详情页</span>
+        </el-button>
       </div>
       <div class="topMenuRightBox">
         <img src="@/assets/template/preview.png" class="previewImg" @click="setPreviewStatus" v-if="this.$store.state.template.previewStatus==false"/>
@@ -16,13 +20,13 @@
     <!-- 画布 start ---------------------------------------->
     <div class="websiteBox">
       <div class="pageTabsBox">
-        <div :class="['pageTabsItem', this.$store.state.template.pageStatus === 1 ? 'active' : '']" @click="openPage(1)">首页</div>
-        <!-- <div :class="['pageTabsItem', this.$store.state.template.pageStatus === 2 ? 'active' : '']" @click="openPage(2)">分类页</div> -->
-        <div :class="['pageTabsItem', this.$store.state.template.pageStatus === 3 ? 'active' : '']" @click="openPage(3)">列表页</div>
-        <div :class="['pageTabsItem', this.$store.state.template.pageStatus === 4 ? 'active' : '']" @click="openPage(4)">详情页</div>
-        <!-- <div :class="['pageTabsItem', this.$store.state.template.pageStatus === 5 ? 'active' : '']" @click="openPage(5)">搜索页</div>
-        <div :class="['pageTabsItem', this.$store.state.template.pageStatus === 6 ? 'active' : '']" @click="openPage(6)">自定义列表页</div>
-        <div :class="['pageTabsItem', this.$store.state.template.pageStatus === 7 ? 'active' : '']" @click="openPage(7)">自定义详情页</div> -->
+        <div v-if="this.$store.state.template.showPage.index==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 1 ? 'active' : '']" @click="openPage(1)">首页</div>
+        <div v-if="this.$store.state.template.showPage.class==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 2 ? 'active' : '']" @click="openPage(2)">分类页</div>
+        <div v-if="this.$store.state.template.showPage.list==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 3 ? 'active' : '']" @click="openPage(3)">列表页</div>
+        <div v-if="this.$store.state.template.showPage.article==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 4 ? 'active' : '']" @click="openPage(4)">详情页</div>
+        <div v-if="this.$store.state.template.showPage.search==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 5 ? 'active' : '']" @click="openPage(5)">搜索页</div>
+        <div v-if="this.$store.state.template.showPage.aloneList==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 6 ? 'active' : '']" @click="openPage(6)">自定义列表页</div>
+        <div v-if="this.$store.state.template.showPage.aloneArticle==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 7 ? 'active' : '']" @click="openPage(7)">自定义详情页</div>
       </div>
       <pageIndex v-if="this.$store.state.template.pageStatus == 1"/>
       <pageList v-if="this.$store.state.template.pageStatus == 3"/>
@@ -100,17 +104,26 @@ export default {
         this.$router.push({
           path: '/templateStyle',
           query: {
-            id: this.editId
+            website_id:this.$route.query.website_id,
+            step:this.$route.query.step
           }
         }); 
       })
     },
     //下一步
     gotoList(){
-      this.$store.commit('template/closeEditWebsiteTemplateJsonWindow');
-      this.$router.push({
-        path: '/templateList'
-      });
+      this.$store.dispatch('template/addWebsiteTemplate',{webSiteData:this.$store.state.template.webSiteData}).then(res=>{
+        if(res.code==200){
+          
+        }else{
+          this.$message.error(res.message);
+        }
+      })
+
+      // this.$store.commit('template/closeEditWebsiteTemplateJsonWindow');
+      // this.$router.push({
+      //   path: '/templateList'
+      // });
     },
     //保存模板
     saveTemplate(){
@@ -150,6 +163,21 @@ export default {
       this.$store.commit('template/randomTemplate');
     },
     //0.全局操作 end ------------------------------------------------------------>
+
+    //1.查询网站基本信息 start ------------------------------------------------------------>
+    getWebsiteBase(){
+      this.$store.dispatch('template/getWebsiteTemplateclassintel',{website_id:this.$route.query.website_id}).then(res=>{
+        if(res.code==200){
+          //console.log(res.data.tid)
+          //console.log(res.data.website_id)
+          this.$store.commit('template/setEditWebsiteId',res.data.website_id);
+          this.$store.commit('template/setClassNumber',res.data.tid);
+        }else{
+          this.$message.error(res.message);
+        }
+      })
+    }
+    //1.查询网站基本信息 end ------------------------------------------------------------>
   },
   mounted(){
     //设置网站id
@@ -159,8 +187,13 @@ export default {
     this.$store.dispatch('template/getSiteCategory',{website_id:this.websiteId});
     //获取网站详情
     this.$store.dispatch('template/getSiteInfo',{id:this.websiteId});
-    //获取地区
+    //获取行政区划
     this.$store.dispatch('template/selectWebsiteArea',{});
+    //获取行政职能
+    this.$store.dispatch('template/selectWebsiteDepartment',{});
+
+
+    
   }
 }
 </script>

src/views/website/editNavigation.vue

@@ -6,8 +6,8 @@
         <el-row>
           <el-col :span="8">
             <div class="searchBox">
-              <div class="searchTitle">网站导航：</div>
-              <el-input placeholder="请输入网站导航" autocomplete="off" v-model="getApiData.alias"/>
+              <div class="searchTitle">导航池名称：</div>
+              <el-input placeholder="请输入导航池名称" autocomplete="off" v-model="getApiData.alias"/>
             </div>
           </el-col>
           <el-col :span="8">
@@ -85,8 +85,16 @@
         <div class="formDiv">
           <el-form-item label="导航名称：" :label-width="formLabelWidth" prop="alias" class="custom-align-right">
             <el-input v-model="form.alias" autocomplete="off"></el-input>
-            <input type="hidden" v-model="form.seo_title">
+            <input type="hidden" v-model="form.alias">
+          </el-form-item>
+          <el-form-item label="排序：" :label-width="formLabelWidth" prop="" class="custom-align-right">
+            <el-input v-model="form.sort" autocomplete="off"></el-input>
+            <input type="hidden" v-model="form.sort">
           </el-form-item>
+          <!-- <el-form-item label="导航标题：" :label-width="formLabelWidth" prop="seo_title" class="custom-align-right">
+            <el-input v-model="form.seo_title" autocomplete="off"></el-input>
+            <input type="hidden" v-model="form.seo_title">
+          </el-form-item> -->
           <!-- <el-form-item label="导航名称：" :label-width="formLabelWidth" prop="seo_title" class="custom-align-right">
             <div class="formLabelFloatBox">
               <el-input v-model="form.seo_title" autocomplete="off"></el-input>
@@ -120,6 +128,7 @@
 import '@/styles/global.less';
 //表格标题
 import tableTitle from './components/tableTitle';
+import { title } from '@/settings';
 
 export default {
   components: {
@@ -227,9 +236,11 @@ export default {
         website_id:0,//网站id
         category_id:0,//导航id
         alias:"",//导航名称
+        sort:0,//排序
         seo_title:"",//导航seo名称
         seo_keywords:"",//导航关键词
-        seo_description:""//导航描述
+        seo_description:"",//导航描述
+        seo_title:""//导航标题
       },
       //3.2表单验证规则
       formRules: {
@@ -239,6 +250,7 @@ export default {
         //seo_title:[{required:true,trigger:'blur',validator:validateEmpty}],
         seo_keywords:[{required:true,trigger:'blur',validator:validateEmpty}],
         seo_description:[{required:true,trigger:'blur',validator:validateEmpty}],
+        seo_title:[{required:true,trigger:'blur',validator:validateEmpty}],
       },
       //弹出框中的表单设置 end ------------------------------------------------------------>
     }
@@ -302,6 +314,7 @@ export default {
       this.form.website_id = 0;
       this.form.category_id = 0;
       this.form.alias = "";
+      this.form.sort = 0;
       this.form.seo_title = "";
       this.form.seo_keywords = "";
       this.form.seo_description = "";
@@ -322,6 +335,7 @@ export default {
         this.form.website_id = this.$route.query.website_id;
         this.form.category_id = id;
         this.form.alias = res.data.alias;
+        this.form.sort = res.data.sort;
         this.form.seo_title = res.data.seo_title;
         this.form.seo_keywords = res.data.seo_keywords;
         this.form.seo_description = res.data.seo_description;