Merge branch '12_4_dangyunlong' into dev

.env.production

@@ -1,13 +1,19 @@
 # just a flag
 ENV = 'production'
 
-# 测试环境,当你需要打包到正式环境且需要开启Gzip的时候,你需要使用下面那个
+# 测试环境,当你需要打包到正式环境且需要开启Gzip的时候,你需要从下面选择一个
 # base api
 VUE_APP_BASE_API = 'http://183.131.25.186:9501'
 # base websocket
 VUE_APP_BASE_WEBSOCKET = 'ws://183.131.25.186:9506'
 
-# 正式环境,当你需要打包到测试环境且需要开启Gzip的时候,你需要使用上面那个
+# 预发布环境
+# base websocket
+# VUE_APP_BASE_WEBSOCKET = 'ws://116.131.8.26:9501:9506'
+# # base api
+# VUE_APP_BASE_API = 'http://116.131.8.26:9501'
+
+# 正式环境
 # base websocket
 # VUE_APP_BASE_WEBSOCKET = 'ws://admin.bjzxtw.org.cn:9506'
 # # base api

package.json

@@ -81,8 +81,8 @@
     "mockjs": "1.0.1-beta3",
     "plop": "2.3.0",
     "runjs": "4.3.2",
-    "sass": "1.26.2",
-    "sass-loader": "8.0.2",
+    "sass": "^1.39.0",
+    "sass-loader": "10.2.0",
     "script-ext-html-webpack-plugin": "2.1.3",
     "serve-static": "1.13.2",
     "svg-sprite-loader": "4.1.3",

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

@@ -1,6 +1,6 @@
 <template>
   <div class="sectorBox">
-    <div class="sectorItemBox" @click="addIndexModule('headSector',19)">
+    <!-- <div class="sectorItemBox" @click="addIndexModule('headSector',19)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/headSector.png" />
       </div>
@@ -11,55 +11,55 @@
         <img src="@/assets/template/sector/menuSector.png" />
       </div>
       <div class="sectorItemTitle">网站导航</div>
-    </div>
-    <div class="sectorItemBox" @click="addIndexModule('imgTitleSector',6)">
+    </div> -->
+    <div class="sectorItemBox" @click="addIndexModule('imgTitleSector',6,imgTitleSector)">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/imgTitleSector.png" />
+        <img src="@/assets/template/sector/imgTitleSector.png"/>
       </div>
-      <div class="sectorItemTitle">图片标题</div>
+      <div class="sectorItemTitle">通栏广告</div>
     </div>
-    <div class="sectorItemBox">
+    <div class="sectorItemBox" @click="addIndexModule('bannerSector',34,bannerSector)">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/bannerSector.png" @click="addIndexModule('bannerSector',34)"/>
+        <img src="@/assets/template/sector/bannerSector.png"/>
       </div>
       <div class="sectorItemTitle">焦点图</div>
     </div>
-    <div class="sectorItemBox">
+    <div class="sectorItemBox" @click="addIndexModule('manyPictureSector',41,manyPictureSector)">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/moreServicesSector.png" @click="addIndexModule('manyPictureSector',41)"/>
+        <img src="@/assets/template/sector/moreServicesSector.png"/>
       </div>
       <div class="sectorItemTitle">多图菜单</div>
     </div>
-    <div class="sectorItemBox">
+    <div class="sectorItemBox" @click="addIndexModule('commentSector',40,commentSector)">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/commentSector.png" @click="addIndexModule('commentSector',40)"/>
+        <img src="@/assets/template/sector/commentSector.png"/>
       </div>
       <div class="sectorItemTitle">文章列表带评论</div>
     </div>
-    <div class="sectorItemBox">
+    <div class="sectorItemBox" @click="addIndexModule('listSector',28,listSector)">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/newsSector.png" @click="addIndexModule('listSector',28)"/>
+        <img src="@/assets/template/sector/newsSector.png"/>
       </div>
       <div class="sectorItemTitle">文章列表</div>
     </div>
-    <div class="sectorItemBox">
+    <div class="sectorItemBox" @click="addIndexModule('onlyImgSector',24,onlyImgSector)">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/imgSector.png" @click="addIndexModule('onlyImgSector',24)"/>
+        <img src="@/assets/template/sector/imgSector.png"/> 
       </div>
       <div class="sectorItemTitle">纯图片组合</div>
     </div>
-    <div class="sectorItemBox">
+    <div class="sectorItemBox" @click="addIndexModule('friendShipLinkSector',15,friendShipLinkSector)">
       <div class="sectorItem">
-        <img src="@/assets/template/sector/linkSector.png" @click="addIndexModule('friendShipLinkSector',15)"/>
+        <img src="@/assets/template/sector/linkSector.png"/>
       </div>
       <div class="sectorItemTitle">友情链接</div>
     </div>
-    <div class="sectorItemBox">
+    <!-- <div class="sectorItemBox">
       <div class="sectorItem">
         <img src="@/assets/template/sector/footerSector.png" @click="addIndexModule('footerSector',38)"/>
       </div>
       <div class="sectorItemTitle">页尾板块</div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -73,14 +73,263 @@ export default {
   },
   data() {
     return {
-      
+      //添加通栏广告模块 start---------------------------------------->
+      imgTitleSector:{
+        sectorName:"imgTitleSector",//板块名称
+        componentList:[
+          {
+            component_type:3,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"",
+            sort:1,
+            componentList:[]//该组件不请求指定类型的数据，但是后端需要返回imgUrl
+          }
+        ]
+      },
+      //添加通栏广告模块 start---------------------------------------->
+
+      //添加banner模块 start---------------------------------------->
+      bannerSector:{
+        sectorName:"bannerSector",//板块名称
+        componentList:[
+          {
+            component_type:1,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"mainTitle",//组件名称
+            sort:1,//组件排序
+            componentData:{//该组件请求的数据
+              category_id:[],//请求的导航id 如果上面的component_type是1，这里只会有1个[[1]],如果是2，这里就会有多个[[1,3],[1,4,8]]
+              page:1,//请求第几页
+              pageSize:1,//请求的条数
+              listType:[//请求的数据应该包含哪些字段
+                "title",//标题
+                //"created_time",//创建时间
+                //"author",//作者
+                //"imgUrl",//缩略图片
+                //"introduce",//描述
+              ]
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,
+            component_name:"banner",
+            sort:2,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:3,
+              listType:[
+                "imgUrl"
+              ]
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,
+            component_name:"tabsNews",
+            sort:3,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:5,
+              listType:[
+                "imgUrl",
+                "created_time",
+              ]
+            }
+          },
+        ]
+      },
+      //添加banner模块 end---------------------------------------->
+
+      //添加多图板块 start---------------------------------------->
+      manyPictureSector:{
+        sectorName:"manyPictureSector",//板块名称
+        componentList:[
+          {
+            component_type:7, //纯文本
+            component_style:1,
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
+          {
+            component_type:6, //静态组件无需传递数据
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"fivePicture",
+            sort:2,
+            componentData:{}
+          },
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"tabsNews",
+            sort:3,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:3,
+              listType:[
+                "title",//标题
+                "created_time",//创建时间
+              ]
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"tabsNews",
+            sort:4,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:3,
+              listType:[
+                "title",//标题
+                "created_time",//创建时间
+              ]
+            }
+          },
+        ]
+      },
+      //添加多图板块 end---------------------------------------->
+
+      //文章列表带评论板块 end---------------------------------------->
+      commentSector:{
+        sectorName:"commentSector",//板块名称
+        componentList:[
+          {
+            component_type:7, //纯文本
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"tabsCalendarNews",
+            sort:2,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:6,
+              listType:[
+                "title",
+                "created_time",
+                "introduce"
+              ]
+            }
+          },
+          {
+            component_type:8,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"calendar", //评论组件无需提交数据
+            sort:3,
+            componentData:{}
+          },
+        ]
+      },
+      //文章列表带评论板块 end---------------------------------------->
+
+      //文章列表板块 start---------------------------------------->
+      listSector:{
+        sectorName:"listSector",//板块名称
+        componentList:[
+          {
+            component_type:7, //纯文本
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"styleTitle",
+            sort:1,
+            componentData:{
+              text:"板块标题"
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"listNews",
+            sort:2,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:5,
+              listType:[
+                "title",
+                "created_time"
+              ]
+            }
+          },
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"listNews",
+            sort:3,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:5,
+              listType:[
+                "title",
+                "created_time"
+              ]
+            }
+          },
+        ]
+      },
+      //文章列表板块 end---------------------------------------->
+
+      //纯图片组合 start---------------------------------------->
+      onlyImgSector:{
+        sectorName:"onlyImgSector",//板块名称
+        componentList:[
+          {
+            component_type:1,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"",
+            sort:1,
+            componentData:{
+              category_id:[],
+              page:1,
+              pageSize:7,
+              listType:[
+                "title",
+                "imgUrl"
+              ]
+            }
+          }
+        ]
+      },
+      //纯图片组合 end---------------------------------------->
+
+      //友情链接板块 start---------------------------------------->
+      friendShipLinkSector:{
+        sectorName:"friendShipLinkSector",//友情链接无需提交数据
+        componentList:[
+          {
+            component_type:4,
+            component_style:1,//该组件使用哪个展示样式
+            component_name:"",
+            sort:1,
+            componentData:{}
+          }
+        ]
+      }
+      //友情链接板块 end---------------------------------------->
+
     }
   },
   methods: {
-    addIndexModule(type,h){
+    addIndexModule(type,h,jsonData){
       let data = {
         type: type,
-        h: h
+        h: h,
+        jsonData: jsonData
       }
       console.log(data);
       this.$store.commit('template/addIndexModule',data);

src/store/modules/template.js

@@ -8,10 +8,11 @@ const state = {
   editWebsiteId: "",//当前编辑网站的id
   stepStatus: true,//是否显示现在进行到哪一步：true=显示 false=不显示
   //0.全局配置 end------------------------------------------------------------>
-  //1.页面数据 start------------------------------------------------------------>
+  
+  //1.画布数据 start------------------------------------------------------------>
   pageStatus:1,//当前编辑哪个页面  1=首页 2=分类页 3=列表页 4=详情页 5=搜索页 6=自定义列表页 7=自定义详情页 
   menuType:1, //当前菜单显示板块还是组件 1=板块 2=组件 
-  pageData: { //准备提交到后台的数据
+  pageData: { //自助建站拖拽板块的数据，注意，这里并不是提交到后台的数据
     index:[
       
     ],//首页
@@ -22,14 +23,14 @@ const state = {
     aloneList:[],//自定义列表页
     aloneArticle:[],//自定义详情页
   },
-  editWindowStatus:false,//编辑弹出框是否显示
   // layout: [
   //   // i = id 
   //   // w = 最大宽度是12
   //   // { i: "0", x: 0, y: 0, w: 12, h: 2, content:""},
   //   // { i: "1", x: 0, y: 0, w: 12, h: 2, content:""},
   // ],
-  //1.页面数据 end------------------------------------------------------------>
+  //1.画布数据 end------------------------------------------------------------>
+
   //2.站点数据 start------------------------------------------------------------>
   webSiteInfo:"",//网站信息
   webSiteMenu:"",//网站包含的导航池
@@ -40,6 +41,39 @@ const state = {
   },
   departmentList:"",//职能部门
   //2.站点数据 end------------------------------------------------------------>
+
+  //3.网站数据 start------------------------------------------------------------>
+  editWindowStatus:false,//编辑组件弹出框是否显示
+  editComponentWindowStatus:false,//选择组件样式弹出框是否显示
+  editWindowTitle:"",//编辑弹出框标题
+  editSectorId:0,//当前正在编辑的板块id
+  editComponentSort:0,//当前正在编辑的组件id
+  editComponentType:0,//当前正在编辑的组件类型
+  editComponentSize:0,//当前组件展示的条数
+  editComponentStyle:0,//当前编辑的组件样式
+
+  webSiteData:{
+    //1.base网站基本信息
+    base:{
+      websiteId:1,//网站id
+    },
+    //2.style信息
+    style:{
+      styleId:1,//风格id
+    },
+    //3.板块信息 header,menu,footer 是页面自带的无需构建
+    template:{  
+      //index = 首页 class=分类页 list=列表页 article=详情页 search=搜索页 aloneList=自定义列表页 aloneArticle=自定义详情页
+      index:[],
+      class:[],//分类页
+      list:[],//列表页
+      article:[],//详情页
+      search:[],//搜索页
+      aloneList:[],//自定义列表页
+      aloneArticle:[],//自定义详情页
+    }
+  }
+  //3.网站数据 end------------------------------------------------------------>
 }
 
 const mutations = {
@@ -59,23 +93,67 @@ const mutations = {
   setPageStatus(state,num){
     state.pageStatus = num;
   },
+  //打开编辑组件弹出框
+  setEditWindowStatus(state,data){
+    console.log(data);
+    state.editWindowStatus = true;
+    state.editSectorId = data.id;
+    state.editComponentSort = data.sort;
+    state.editComponentType = data.type;
+    state.editComponentSize = data.size;
+  },
+  //关闭编辑组件弹出框
+  closeEditWindowStatus(state){
+    state.editWindowStatus = false;
+    state.editSectorId = "";
+    state.editComponentSort = "";
+    state.editComponentType = "";
+    state.editComponentSize = "";
+  },
+  //打开选择组件样式弹出框
+  setComponentStyleStatus(state,data){
+    state.editComponentWindowStatus = true;
+    state.editSectorId = data.id;
+    state.editComponentSort = data.sort;
+    state.editComponentType = data.type;
+    state.editComponentStyle = data.style;
+  },
+  //关闭选择组件样式弹出框
+  closeComponentStyleStatus(state){
+    state.editComponentWindowStatus = false;
+    state.editSectorId = "";
+    state.editComponentSort = "";
+    state.editComponentType = "";
+    state.editComponentStyle = "";
+  },
   //0.全局配置 start------------------------------------------------------------>
   //1.配置模块 start------------------------------------------------------------>
   //添加首页板块
   addIndexModule(state,data){
-    //data.type 组件名称 data.h 模块高度 
-    // 计算当前布局的最大 y 值
-    const maxY = Math.max(...state.pageData.index.map(item => item.y), 0);
-    state.pageData.index.push({
-      i: state.pageData.index.length, 
-      x: 0, 
-      y: maxY + 1, 
-      w: 12, 
-      h: data.h, 
-      type: data.type,
-      content:""
-    });
-    console.log(state.pageData.index);
+    //判断当前一共有多少个模块最多能添加10个
+    if(state.pageData.index.length >= 10){
+      Message.error('最多只能添加10个模块！');
+      return;
+    }else{
+      //data.type 组件名称 data.h 模块高度 
+      //计算当前布局的最大 y 值
+      const maxY = Math.max(...state.pageData.index.map(item => item.y), 0);
+      //添加板块id  
+      state.pageData.index.push({
+        i: state.pageData.index.length, 
+        x: 0, 
+        y: maxY + 1, 
+        w: 12, 
+        h: data.h, 
+        type: data.type,
+        content:"",
+        sectorData:data.jsonData
+      });
+      console.log("当前添加的板块id：" + state.pageData.index.length);
+      data.jsonData.sectorId = state.pageData.index.length;
+      console.log("添加完毕后的数据：");
+      console.log(state.pageData.index);
+    }
   },
   //删除首页板块
   deleteIndexModule(state,data){
@@ -85,6 +163,8 @@ const mutations = {
       }
     }
     Message.success('模块已删除！');
+    console.log("删除后的数据结构：");
+    console.log(state.pageData.index);
   },
   //修改首页板块高度
   setIndexModuleHeight(state,data){
@@ -207,7 +287,38 @@ const mutations = {
       
   //   }
   // },
+  //格式化模板信息
+  formatTemplateInfo(state, data) {
+    //console.log(data.type);
+    //按照data.data.y的大小排序
+    data.data.sort((a, b) => a.y - b.y);
+    console.log(data,data);
+    let websiteData = [];
+    //获取板块的sort
+    for (let index in data.data) {
+      console.log(data.data[index].sectorData);
+      data.data[index].sectorData.sort = Number(index)+1;
+      if(data.type=="index"){
+        //不要把数据直接保存到state.webSiteData.template中，否则无法删除
+        websiteData.push(data.data[index].sectorData)
+      }
+    }
+    //保存到对应的页面json中
+    if(data.type=="index"){
+      state.webSiteData.template.index = websiteData;
+    }
+
+  },
+  //保存模板
+  saveTemplate(state) {
+    //调用mutations中的方法无需使用$store
+    //格式化index的信息
+    this.commit('template/formatTemplateInfo',{data:state.pageData.index,type:"index"});
+    
+    console.log(state.webSiteData);
+  },
   //1.配置模块 end------------------------------------------------------------>
+
   //2.获取站点信息 start------------------------------------------------------------>
   //获取站点详情
   setWebsiteInfo(state,data){

src/styles/global.less

@@ -274,6 +274,34 @@
   }
 }
 
+/*测试助手 正式版本移除 start------------------------------------------------------------>*/
+.testAssistant {
+  border: 1px dashed #19499F;
+  padding: 10px;
+  margin-bottom: 10px;
+  background: #E9EDF7;
+  margin-bottom: 30px;
+  .testAssistantTitle {
+    font-size: 12px;
+    font-weight: bold;
+    color: #19499F;
+  }
+  .testAssistantContent {
+    padding-top: 10px;
+    .testAssistantContentItem {
+      padding-top: 5px;
+      color: #19499F;
+      font-weight: bold;
+      span {
+        font-weight: bold;
+        font-size: 14px;
+        color: #333;
+        margin-right: 10px;
+      }
+    }
+  }
+}
+/*测试助手 正式版本移除 end------------------------------------------------------------>*/
 
 
 /*页面布局 end------------------------------------------------------------>*/

src/views/chat/contacts.vue

@@ -215,8 +215,8 @@
         <div>
           <el-form :model="form" ref="form" autocomplete="off" label-position="left">
             <div class="formDiv">
-              <el-form-item label="备注" :label-width="formLabelWidth" class="custom-align-right">
-                <el-input v-model="addform.remark" autocomplete="off"  placeholder="请输入备注.."></el-input>
+              <el-form-item label="验证消息：" :label-width="formLabelWidth" class="custom-align-right">
+                <el-input v-model="addform.remark" autocomplete="off"  placeholder="我是.."></el-input>
               </el-form-item>
             </div> 
           </el-form>

src/views/chat/hall.vue

@@ -101,8 +101,8 @@
         <div :class="['UserNameBox', groupId ? 'ifNotice' : '']">
           <div class="userName">{{ messageTitle }}</div>
           <img src="@/assets/chat/fi_more.png" v-if="groupId!=''" @click="openGroupSystem" class="moreIcon">
-          <div class="groupNotice" v-if="groupId!=''">{{groupProfile}}</div>
-          <div v-else>
+          <div class="groupNotice" v-if="groupId!=''&&groupProfile!=''">{{groupProfile}}</div>
+          <div v-if="groupId==''">
             <div class="shareCardIcon" @click="openShareCard">
               <i class="el-icon-postcard"></i>
             </div>
@@ -670,7 +670,7 @@
                   <div class="fileWindowMessageItem">
                     <div class="fileWindowMessageItemInfo">
                       <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
-                      <div class="fileWindowMessageItemTime">{{item.updated_at}}</div>
+                      <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
                     </div>
                     <div class="fileWindowMessageItemText">{{item.content}}</div>
                   </div>
@@ -685,7 +685,7 @@
                   <div class="fileWindowMessageItem">
                     <div class="fileWindowMessageItemInfo">
                       <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
-                      <div class="fileWindowMessageItemTime">{{item.updated_at}}</div>
+                      <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
                     </div>
                     <div class="fileWindowMessageItemText">
                       <img :src="item.content" class="fileWindowMessageItemImage">
@@ -702,7 +702,7 @@
                   <div class="fileWindowMessageItem">
                     <div class="fileWindowMessageItemInfo">
                       <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
-                      <div class="fileWindowMessageItemTime">{{item.updated_at}}</div>
+                      <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
                     </div>
                     <div class="fileWindowMessageItemText">
                       <div class="messageTypeFile">

src/views/menu/department.vue

@@ -45,7 +45,7 @@
       <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
         <div class="formDiv">
           <el-form-item label="选择上级部门" :label-width="formLabelWidth" prop="pid" class="custom-align-right">
-            <el-cascader :key="searchDepartmentKey" v-model="form.pid" placeholder="选择导航池所属行政区划" :props="searchDepartmentData" filterable clearable></el-cascader>
+            <el-cascader :key="searchDepartmentKey" v-model="form.pid" placeholder="请选择上级部门" :props="searchDepartmentData" filterable clearable></el-cascader>
           </el-form-item>
         </div>
         <div class="formDiv">

src/views/news/NewList.vue

@@ -69,7 +69,16 @@
             <el-table-column prop="title" label="资讯题目" width=""></el-table-column>
             <el-table-column prop="category_name" label="导航池名称" width=""></el-table-column>
             <el-table-column prop="islink" label="是否引用外链" width=""></el-table-column>
-            <el-table-column prop="fromurl" label="来源" width=""></el-table-column>
+            <el-table-column prop="linkurl" label="是否为原创" width="">
+              <template slot-scope="scope">
+                <span v-if="scope.row.is_original==1">
+                  是
+                </span>
+                <span v-if="scope.row.is_original==0">
+                  否
+                </span>
+              </template>
+            </el-table-column>
             <el-table-column prop="author" 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>

src/views/news/creatNews.vue

@@ -8,9 +8,9 @@
             <template #label>
               <span class="askBox">
                 资讯题目：
-                <el-tooltip class="item" effect="dark" content="资讯标题，如：三农市场网_网站列表_全国信息一体化网络平台_项目大全。" placement="top">
+                <!-- <el-tooltip class="item" effect="dark" content="资讯标题，如：三农市场网_网站列表_全国信息一体化网络平台_项目大全。" placement="top">
                   <i class="el-icon-question"></i>
-                </el-tooltip>
+                </el-tooltip> -->
               </span>
             </template>
             <el-input v-model="form.title" autocomplete="off" placeholder="请输入资讯标题"></el-input>
@@ -132,8 +132,8 @@
               <el-form-item label="来源名称：" prop="copyfrom" class="custom-align-right">
                 <el-input v-model="form.copyfrom" autocomplete="off" placeholder="请输入来源名称"></el-input>
               </el-form-item>
-              <el-form-item label="来源链接：" prop="linkurl" class="custom-align-right">
-                <el-input v-model="form.linkurl" autocomplete="off" placeholder="请输入来源链接"></el-input>
+              <el-form-item label="来源链接：" prop="fromurl" class="custom-align-right">
+                <el-input v-model="form.fromurl" autocomplete="off" placeholder="请输入来源链接"></el-input>
               </el-form-item>
               <div class="disclaimerBox">
                 <div class="disclaimerTitle">
@@ -144,8 +144,8 @@
               </div>
             </div>
             <div v-if="form.is_original==1">
-              <el-form-item label="来源链接：" prop="linkurl" class="custom-align-right">
-                <el-input v-model="form.linkurl" autocomplete="off" placeholder="请输入来源链接" disabled="disabled"></el-input>
+              <el-form-item label="来源名称：" prop="linkurl" class="custom-align-right">
+                <el-input v-model="form.copyfrom" autocomplete="off" placeholder="请输入来源名称" disabled="disabled"></el-input>
               </el-form-item>
             </div>
 
@@ -382,14 +382,21 @@ export default {
         if (valid) {
           //console.log(this.form)
           this.$store.dispatch('news/addArticle',this.form).then(res=> {
-            //汇报结果
-            this.$message({
-              type: 'success',
-              message: '已成功添加资讯！'
-            });
-            this.cleatForm(2);
-            //返回列表页
-            this.returnPage()
+            if(res.code==200){
+              //汇报结果
+              this.$message({
+                type: 'success',
+                message: '已成功添加资讯！'
+              });
+              this.cleatForm(2);
+              //返回列表页
+              this.returnPage()
+            }else{
+              this.$message({
+                type: 'error',
+                message: "资讯发布失败，请稍后再试！"
+              });
+            }
           }).catch(() => {
             this.$message({
               type: 'info',
@@ -464,15 +471,14 @@ export default {
         //不是原创的时候显示来源
         if(res.data.is_original==1){
           this.form.is_original = 1;
-          this.form.linkurl = "本网";
+          this.form.copyfrom = "本网";
         }else{
           this.form.is_original = 0;
           this.$nextTick(() => {
             this.form.is_original = 0;
             console.log('is_original:', this.form.is_original); // 确保值已更新
           });
-          // <el-radio v-model="form.is_original" label="1">是</el-radio>
-          // <el-radio v-model="form.is_original" label="0">不是</el-radio>
+          this.form.copyfrom = res.data.copyfrom;
           this.form.linkurl = res.data.linkurl;
         }
         
@@ -480,8 +486,12 @@ export default {
         this.form.cat_arr_id = Array.isArray(res.data.cat_arr_id) ? res.data.cat_arr_id : JSON.parse(res.data.cat_arr_id);
         this.parentKey += 1; // 触发级联选择器重新加载
         this.loadCascaderPath(this.form.cat_arr_id); // 加载路径数据
-
-        this.form.level = res.data.level;
+        //回显推荐等级
+        if(res.data.level==0){
+          this.form.level = "";
+        }else{
+          this.form.level = res.data.level;
+        }
         this.form.imgurl = res.data.imgurl;
         this.imgUrl = res.data.imgurl;
         this.form.keyword = res.data.keyword;
@@ -490,7 +500,7 @@ export default {
         this.form.author = res.data.author;
         this.form.hits = res.data.hits;
         this.form.is_original = res.data.is_original;
-        this.form.copyfrom = res.data.copyfrom;
+        //this.form.copyfrom = res.data.copyfrom;
         this.form.fromurl = res.data.fromurl;
         this.form.status = res.data.status;
       }).catch(() => {
@@ -525,6 +535,7 @@ export default {
     editToServe(){
       //提交之前先判断是否为外链
       //如果使用了外链，清理掉除了外链以外的内容
+      console.log(this.form)
       if(this.form.islink==1){
         this.cleatForm(1)
       }
@@ -535,14 +546,18 @@ export default {
         if (valid) {
           //console.log(this.form)
           this.$store.dispatch('news/updateArticle',this.form).then(res=> {
-            //汇报结果
-            this.$message({
-              type: 'success',
-              message: '已成功添加资讯！'
-            });
-            this.cleatForm(2);
-            //返回列表页
-            this.returnPage()
+            if(res.code!=200){
+              this.$message.error("修改失败，请稍后再试！");
+            }else{
+              //汇报结果
+              this.$message({
+                type: 'success',
+                message: '已成功编辑资讯！'
+              });
+              this.cleatForm(2);
+              //返回列表页
+              this.returnPage()
+            }
           }).catch(() => {
             this.$message({
               type: 'info',
@@ -555,9 +570,10 @@ export default {
     //1.4 修改是否原创
     changeIsOriginal(){
       if(this.form.is_original==1){
-        this.form.linkurl = "本网";
+        this.form.copyfrom = "本网";
       }else{
-        this.form.linkurl = "";
+        this.form.copyfrom = "";
+        this.form.fromurl = "";
       }
     },
     //跳转操作 end ------------------------------------------------------------>

src/views/role/components/userDefault.vue

@@ -69,7 +69,7 @@
           <el-form-item label="真实姓名：" :label-width="formLabelWidth" prop="real_name" class="custom-align-right">
             <el-input v-model="form.real_name" autocomplete="off" placeholder="请输入真实姓名.."></el-input>
           </el-form-item>
-          <el-form-item label="照片：" :label-width="formLabelWidth" prop="photoUrl" :class="['custom-form-item']" class="custom-align-right">
+          <el-form-item label="照片：" :label-width="formLabelWidth" prop="avatar" :class="['custom-form-item']" class="custom-align-right">
             <div class="uploaderBox">
               <!--图片上传组件 start ------------------------------------------------------------>
               <div class="avatar-upload-container" @mouseenter="hovering = true" @mouseleave="hovering = false">
@@ -94,6 +94,7 @@
                 <div v-if="hovering && photoUrl" class="delete-button" @click="handleDelete">
                   <i class="el-icon-delete"></i>
                 </div>
+                <input type="hidden" v-model="form.avatar">
               </div>
               <!--图片上传组件 end ------------------------------------------------------------>
             </div>
@@ -117,7 +118,7 @@
           <el-form-item label="手机号：" :label-width="formLabelWidth" prop="mobile" class="custom-align-right">
             <el-input v-model="form.mobile" autocomplete="off" placeholder="请输入手机号.."></el-input>
           </el-form-item>
-          <el-form-item label="有效期：" :label-width="formLabelWidth" prop="timeList" class="custom-align-right">
+          <el-form-item label="有效期：" :label-width="formLabelWidth" prop="timeList" class="custom-align-right" v-if="form.long_time==false">
             <el-date-picker
               v-model="timeList"
               type="daterange"
@@ -129,6 +130,19 @@
             </el-date-picker>
             <el-checkbox v-model="form.long_time" :true-label="1" :false-label="0" class="longTimeCheckbox">无限期</el-checkbox>
           </el-form-item>
+          <div class="timeBox" v-else>
+            <div class="timeTitle"><span>*</span>有效期：</div>
+            <el-date-picker
+              v-model="timeList"
+              type="daterange"
+              :disabled="form.long_time === 1"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :picker-options="pickerOptions">
+            </el-date-picker>
+            <el-checkbox v-model="form.long_time" :true-label="1" :false-label="0" class="longTimeCheckbox">无限期</el-checkbox>
+          </div>
           <el-form-item label="籍贯：" :label-width="formLabelWidth" prop="" class="custom-align-right">
             <CityCascader v-model="form.native_place_arr_id" @update-city-id="update_native_place_arr_id"></CityCascader>
           </el-form-item>
@@ -206,6 +220,7 @@ export default {
       }
     }
     const validateEmpty = (rule,value,callback) => {
+      console.log(value)
       if (!value || value.trim() === "") {
         callback(new Error('该项不能为空！'));
       } else {
@@ -262,8 +277,8 @@ export default {
         birthday:"",//出生年月
         gender:"1",//性别
         mobile:"",//手机号
-        native_place_arr_id:"",//籍贯
-        address_arr_id:"",//详细地址
+        native_place_arr_id:[],//籍贯
+        address_arr_id:[],//详细地址
         address:"",//详细地址
         from_time:"",//有效期开始时间
         to_time:"",//有效期结束时间
@@ -272,6 +287,7 @@ export default {
         email:"",//电子邮箱
         other:[],//相关资料
         remark:"",//提示词
+        zip_code:"",//邮编
       },
       timeList:[],//时间段
       otherList:[],//相关资料列表
@@ -304,7 +320,7 @@ export default {
         //9.手机号
         mobile: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         //10.照片
-        photoUrl: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        avatar: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         //11.出生年月
         birthday: [{ required: true, trigger: 'blur', validator: validateTime }],
         //12.有效期
@@ -313,9 +329,9 @@ export default {
       //时间跨度
       pickerOptions: {
         selectableRange: '1900-01-01 to 2100-12-31', // 允许选择的日期范围
-        disabledDate(time) {
-          return time.getTime() < Date.now() - 86400000; // 禁用今天之前的日期
-        },
+        // disabledDate(time) {
+        //   return time.getTime() < Date.now() - 86400000; // 禁用今天之前的日期
+        // },
       },
     };
   },
@@ -674,6 +690,26 @@ export default {
   .longTimeCheckbox {
     margin-left: 10px;
   }
+  .timeBox {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 22px;
+    .timeTitle {
+      width: 110px;
+      text-align: right;
+      font-size: 14px;
+      color: #606266;
+      font-weight: bold;
+      height: 36px;
+      line-height: 36px;
+      margin-right: 10px;
+      span {
+        color: red;
+        margin-right: 5px;
+      }
+    }
+  }
   //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
   ::v-deep .custom-form-item > .el-form-item__label {
     line-height: 140px !important;
@@ -688,4 +724,4 @@ export default {
     width: 100%; /* 禁止用户拖拽调整大小 */
   }
   //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
-</style>
+</style>

src/views/role/components/userEnterprise.vue

@@ -288,9 +288,9 @@ export default {
       //时间跨度
       pickerOptions: {
         selectableRange: '1900-01-01 to 2100-12-31', // 允许选择的日期范围
-        disabledDate(time) {
-          return time.getTime() < Date.now() - 86400000; // 禁用今天之前的日期
-        },
+        // disabledDate(time) {
+        //   return time.getTime() < Date.now() - 86400000; // 禁用今天之前的日期
+        // },
       },
     };
   },

src/views/role/components/userInvestigate.vue

@@ -72,7 +72,7 @@
           <el-form-item label="真实姓名：" :label-width="formLabelWidth" prop="real_name" class="custom-align-right">
             <el-input v-model="form.real_name" autocomplete="off" placeholder="请输入真实姓名.."></el-input>
           </el-form-item>
-          <el-form-item label="照片：" :label-width="formLabelWidth" prop="photoUrl" :class="['custom-form-item']" class="custom-align-right">
+          <el-form-item label="照片：" :label-width="formLabelWidth" prop="avatar" :class="['custom-form-item']" class="custom-align-right">
             <div class="uploaderBox">
               <!--图片上传组件 start ------------------------------------------------------------>
               <div class="avatar-upload-container" @mouseenter="hovering = true" @mouseleave="hovering = false">
@@ -97,6 +97,7 @@
                 <div v-if="hovering && photoUrl" class="delete-button" @click="handleDelete">
                   <i class="el-icon-delete"></i>
                 </div>
+                <input type="hidden" v-model="form.avatar">
               </div>
               <!--图片上传组件 end ------------------------------------------------------------>
             </div>
@@ -332,7 +333,7 @@ export default {
         //10.工作区域
         city_arr_id: [{ required: true, trigger: 'blur', validator: validateArray }],
         //11.照片
-        photoUrl: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+        avatar: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         //12.出生年月
         birthday: [{ required: true, trigger: 'blur', validator: validateEmpty }],
         //13.有效期
@@ -341,9 +342,9 @@ export default {
       //时间跨度
       pickerOptions: {
         selectableRange: '1900-01-01 to 2100-12-31', // 允许选择的日期范围
-        disabledDate(time) {
-          return time.getTime() < Date.now() - 86400000; // 禁用今天之前的日期
-        },
+        // disabledDate(time) {
+        //   return time.getTime() < Date.now() - 86400000; // 禁用今天之前的日期
+        // },
       },
     };
   },

src/views/role/components/userPolitician.vue

@@ -284,9 +284,9 @@ export default {
       //时间跨度
       pickerOptions: {
         selectableRange: '1900-01-01 to 2100-12-31', // 允许选择的日期范围
-        disabledDate(time) {
-          return time.getTime() < Date.now() - 86400000; // 禁用今天之前的日期
-        },
+        // disabledDate(time) {
+        //   return time.getTime() < Date.now() - 86400000; // 禁用今天之前的日期
+        // },
       },
     };
   },

src/views/role/roleList.vue

@@ -58,7 +58,7 @@
             <el-input v-model="form.sort" autocomplete="off" placeholder="请输入排序"></el-input>
           </el-form-item>
           <el-form-item label="权限：" :label-width="formLabelWidth" prop="rule" class="custom-align-right">
-            <div class="treeBox">
+            <div class="treeBox" v-loading="loading">
               <el-tree
                 ref="tree"
                 :data="roleData"
@@ -68,6 +68,7 @@
                 :default-checked-keys="checkedKeys"
                 :props="defaultProps">
               </el-tree>
+              <!--没有被选中的父级在halfCheckedNodes,halfCheckedKeys属性中-->
             </div>
           </el-form-item>
           <input type="hidden" v-model="form.rule" />
@@ -149,6 +150,7 @@ export default {
       expandedKeys:[],//展开的节点  
       checkedKeys:[],//选中的节点 
       roleData:[],//菜单树
+      loading:true,//加载中
       defaultProps: {
         children: 'children',
         label: 'label'
@@ -229,16 +231,17 @@ export default {
       this.form.role_name = "";
       this.form.remark = "";
       this.form.sort = "";
-      this.$nextTick(() => {
-        //请空选中的节点
-        this.$refs.tree.setCheckedKeys([]);
-        //还原搜索的状态
-        this.$refs.tree.root.childNodes.forEach((e) => {
-          e.expanded = false;
-        });
-        // 收回树中所有展开的节点
-        this.collapseAllNodes(this.$refs.tree.root.childNodes);
-      });
+      this.loading = false;
+      //清空弹出框
+      // this.$nextTick(() => {
+      //   //请空选中的节点
+      //   this.$refs.tree.setCheckedKeys([]);
+      //   //还原搜索的状态
+      //   this.$refs.tree.root.childNodes.forEach((e) => {
+      //     e.expanded = false;
+      //   });
+      //   // 收回树中所有展开的节点
+      //   this.collapseAllNodes(this.$refs.tree.root.childNodes);
       this.getAllMenuList();
       //this.clearToServe();
       this.windowStatus = true;
@@ -272,10 +275,24 @@ export default {
 
     //4.添加 start ------------------------------------------------------------>
     addData(){
-      //获取选中的节点
+      this.form.id = this.editId;
+      //半选的节点
+      let supplement = [];
+      let allKeys = this.$refs.tree.getHalfCheckedNodes();
+      if(allKeys.length > 0){
+        for(let i = 0; i < allKeys.length; i++){
+          supplement.push(allKeys[i].id);
+        }
+      }
+      console.log(supplement)
+      //选中的节点
       let checkedArr = this.$refs.tree.getCheckedKeys();
       this.form.rule = checkedArr;
-      
+      console.log(checkedArr)
+      //合并节点
+      this.form.rule = [...new Set([...supplement, ...checkedArr])];
+      console.log(this.form.rule)
+      //提交数据
       this.$refs.form.validate(valid => {
         if (valid) {
           this.$store.dispatch('userRole/addRole',this.form).then(res=> {
@@ -302,21 +319,43 @@ export default {
     //回显数据
     editRow(id){
       this.openWindow();
+      this.loading = true;
       //设置要编辑的id
       this.editId = id;
       this.$store.dispatch('userRole/roleInfo',{id:id}).then(res=> {
         console.log(res)
-        this.$nextTick(() => {
-          //请空选中的节点
-          this.$refs.tree.setCheckedKeys([]);
-          //还原搜索的状态
-          this.$refs.tree.root.childNodes.forEach((e) => {
-            e.expanded = false;
-          });
-        });
+        // this.$nextTick(() => {
+        //   //请空选中的节点
+        //   this.$refs.tree.setCheckedKeys([]);
+        //   //还原搜索的状态
+        //   this.$refs.tree.root.childNodes.forEach((e) => {
+        //     e.expanded = false;
+        //   });
+        // });
+
         //回显用户权限
-        this.expandedKeys = res.data.rule;
-        this.checkedKeys = res.data.rule;
+        // this.expandedKeys = res.data.rule;
+        // this.checkedKeys = res.data.rule;
+        //  this.isCheck = false;
+        //  this.$nextTick(() => {
+        //    this.isCheck = false;
+        // })
+
+        //加1秒延迟等待dom加载
+        let that = this;
+        setTimeout(() => {
+          res.data.rule.forEach((i,n) => {
+            var node = that.$refs.tree.getNode(i);
+            //console.log(node)
+            if(node){
+              if(node.isLeaf){
+                that.$refs.tree.setChecked(node,true);
+              }
+            }
+          });
+          that.loading = false;
+        },1000)
+        
         //回显用户名称
         this.form.role_name = res.data.role_name;
         //回显职能描述
@@ -324,18 +363,30 @@ export default {
         //回显排序
         this.form.sort = res.data.sort;
       }).catch(() => {
-        this.$message({
-          type: 'warning',
-          message: '网络错误，请重试！'
-        });
+        this.$message.error('网络错误，请重试！');
       })
     },
     //提交编辑
     editData(){
       this.form.id = this.editId;
-      //获取选中的节点
+      //半选的节点
+      let supplement = [];
+      let allKeys = this.$refs.tree.getHalfCheckedNodes();
+      if(allKeys.length > 0){
+        for(let i = 0; i < allKeys.length; i++){
+          supplement.push(allKeys[i].id);
+        }
+      }
+      console.log(supplement)
+      //选中的节点
       let checkedArr = this.$refs.tree.getCheckedKeys();
       this.form.rule = checkedArr;
+      console.log(checkedArr)
+      //合并节点
+      this.form.rule = [...new Set([...supplement, ...checkedArr])];
+      console.log(this.form.rule)
+
+      //提交数据
       this.$refs.form.validate(valid => {
         if (valid) {
           this.$store.dispatch('userRole/updateRole',this.form).then(res=> {
@@ -354,10 +405,43 @@ export default {
           })
         }
       })
-      
-    }
+    },
     //编辑 end ------------------------------------------------------------>
 
+    //5.tree start ------------------------------------------------------------>
+    checkChange(data) {
+      const node = this.$refs.tree.getNode(data.id);
+      this.setNode(node);
+    },
+    setNode(node) {
+      console.log(node, "node");
+      if (node.checked) {
+        //如果当前是选中checkbox,则递归设置父节点和父父节点++选中
+        this.setParentNode(node);
+      } else {
+        //当前是取消选中,将所有子节点都取消选中
+        this.setChildenNode(node);
+      }
+    },
+    setParentNode(node) {
+      if (node.parent) {
+        for (const key in node) {
+          if (key === "parent") {
+            node[key].checked = true;
+            this.setParentNode(node[key]);
+          }
+        }
+      }
+    },
+    setChildenNode(node) {
+      let len = node.childNodes.length;
+      for (let i = 0; i < len; i++) {
+        node.childNodes[i].checked = false;
+        this.setChildenNode(node.childNodes[i]);
+      }
+    },
+    //5.tree end ------------------------------------------------------------>
+
   },
   mounted(){
     //获取页面列表

src/views/template/page/pageIndex.vue

@@ -6,18 +6,18 @@
     <div class="FixedModuleBox">
       <menuSector />
     </div>
-    <div class="FixedModuleBox">
+    <div class="FixedMainModuleBox" v-if="this.$store.state.template.pageData.index.length == 0">
       <img src="@/assets/template/creat.png">
-      <div>请选择板块到此区域</div>
+      <div>您选择的板块将展示到此区域</div>
     </div>
     <grid-layout :layout="this.$store.state.template.pageData.index" :margin="[0,0]" :col-num="12" :row-height="rowHeight" :is-draggable="true" :is-resizable="true">
       <grid-item v-for="(item, index) in this.$store.state.template.pageData.index" :key="item.i" :i="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :is-resizable="false">
         <div class="grid-item-content">
           <div class="grid-tools-menu">
             <!-- <span><i class="el-icon-setting"></i></span> -->
-            <span><i class="el-icon-upload2" @click="moveIndexModule(item.i,'up')"></i></span>
-            <span><i class="el-icon-download" @click="moveIndexModule(item.i,'down')"></i></span>
-            <span><i class="el-icon-delete" @click="deleteIndexModule(item.i)"></i></span>
+            <span @click="moveIndexModule(item.i,'up')"><i class="el-icon-upload2"></i></span>
+            <span @click="moveIndexModule(item.i,'down')"><i class="el-icon-download"></i></span>
+            <span @click="deleteIndexModule(item.i)"><i class="el-icon-delete"></i></span>
           </div>
           <!-- 页头板块 -->
           <!-- <div v-if="item.type == 'headSector'" class="moduleBox">
@@ -29,31 +29,31 @@
           </div> -->
           <!-- 图片标题模块 --> 
           <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
-            <imgTitleSector />
+            <imgTitleSector :id="item.i"/>
           </div>
           <!-- 焦点图模块 --> 
           <div v-if="item.type == 'bannerSector'" class="moduleBox">
-            <bannerSector />
+            <bannerSector :id="item.i"/>
           </div>
           <!-- 多图模块 --> 
           <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
-            <manyPictureSector />
+            <manyPictureSector :id="item.i"/>
           </div>
           <!-- 评论模块 --> 
           <div v-if="item.type == 'commentSector'" class="moduleBox">
-            <commentSector />
+            <commentSector :id="item.i"/>
           </div>
           <!-- 双联文章列表模块 --> 
           <div v-if="item.type == 'listSector'" class="moduleBox">
-            <listSector />
+            <listSector :id="item.i"/>
           </div>
           <!-- 纯图片组合模块 --> 
           <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
-            <onlyImgSector />
+            <onlyImgSector :id="item.i"/>
           </div>
           <!-- 友情链接模块 --> 
           <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
-            <friendShipLinkSector />
+            <friendShipLinkSector :id="item.i"/>
           </div>
           <!-- 页尾板块 --> 
           <!-- <div v-if="item.type == 'footerSector'" class="moduleBox">
@@ -179,12 +179,18 @@ export default {
   .FixedModuleBox {
     width: 100%;
     border: 2px dashed #19499F;
+  }
+  .FixedMainModuleBox {
+    width: 100%;
+    border: 2px dashed #19499F;
     font-size: 18px;
     color: #999;
     text-align: center;
     img {
-      margin: 30px 0 20px 0;
+      margin-bottom: 20px;
     }
+    padding: 100px;
+    background: #F5F7FB;
   }
   //模块 end------------------------------------------------------------> 
   //栅格布局 start------------------------------------------------------------> 

src/views/template/public/componentWindow.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="componentWindowBox">
+    <!--开发助手-->
+    <div class="testAssistant">
+      <div class="testAssistantTitle">
+        开发助手：当前窗口在正式版本中将被移除。
+      </div>
+      <div class="testAssistantContent">
+        <div class="testAssistantContentItem"><span>板块id:</span>{{this.$store.state.template.editSectorId}}</div>
+        <div class="testAssistantContentItem"><span>组件sort:</span>{{this.$store.state.template.editComponentSort}}</div>
+        <div class="testAssistantContentItem"><span>组件type:</span>{{this.$store.state.template.editComponentType}}</div>
+        <div class="testAssistantContentItem"><span>组件style:</span>{{this.$store.state.template.pageData.index[id].sectorData.componentList[sort].component_style}}</div>
+      </div>
+    </div>
+    <div class="componentStyleBox">
+      <div class="componentStyleBoxContent">
+        <!--3=广告组件-->
+        <div v-if="this.$store.state.template.editComponentType == 3" class="componentScrollBox">
+          <table>
+            <tr>
+              <td><div class="componentScrollBoxItem active"><img src="@/assets/template/component/style1imgTitle.png"/></div></td>
+              <td><div class="componentScrollBoxItem"><img src="@/assets/template/component/style2imgTitle.png"/></div></td>
+              <td><div class="componentScrollBoxItem"><img src="@/assets/template/component/style3imgTitle.png"/></div></td>
+            </tr>
+          </table>
+        </div>
+      </div>
+
+    </div>
+    <div class="componentWindowBoxFooter">
+      <el-button type="info" @click="closeEditWindow">取消</el-button>
+      <el-button type="primary" @click="submitData">确定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      //选择的组件样式
+      useStyleNumber:0,
+    }
+  },
+  methods: {
+    closeEditWindow(){
+      this.$store.commit('template/closeComponentStyleStatus');
+    },
+    submitData(){
+      
+    }
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .componentWindowBox {
+    .componentStyleBox {
+      height: 220px;
+      margin-bottom: 20px;
+      overflow-x: scroll;
+      overflow-y: hidden;
+      clear: both;
+      .componentScrollBox {
+        height: 200px;
+        display: flex; /* 使用 flex */
+        flex-wrap: wrap; /* 换行 */
+        .componentScrollBoxItem {
+          width: 200px;
+          height: 200px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-right: 10px;
+          background: #F5F7FB;
+          border:1px solid #F5F7FB;
+ 
+          img {
+            width: 100%;
+          }
+          &:hover {
+            border:1px solid #19499F;
+            cursor: pointer;
+          }
+        }
+        .active {
+          border:1px solid #19499F;
+        }
+      }
+    }
+    .componentWindowBoxFooter {
+      text-align: right;
+    }
+  }
+</style>

src/views/template/public/convertBtn.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="templateEditBtnBox" @click="openComponentListWindow">
+    <i class="el-icon-scissors"></i>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    },
+    type:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    openComponentListWindow(){
+      let style = this.$store.state.template.pageData.index[this.id].sectorData.componentList[this.sort].component_style;
+      let data = {
+        id:this.id,
+        sort:this.sort,
+        type:this.type,
+        style:style
+      }
+      console.log(data);
+      this.$store.commit('template/setComponentStyleStatus',data);
+    }
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .templateEditBtnBox {
+    position: absolute;
+    top: 0;
+    left: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    margin: 5px;
+    color: #000;
+    background: #fff;
+    border: 1px solid #000;
+    border-radius: 5px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    font-size: 14px;
+    transition: all 0.3s;
+    z-index: 999;
+    &:hover {
+      color: #fff;
+      background: #000;
+    }
+  }
+</style>

src/views/template/public/editBtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="templateEditBtnBox">
+  <div class="templateEditBtnBox" @click="openEditWindow">
     <i class="el-icon-setting"></i>
   </div>
 </template>
@@ -7,7 +7,22 @@
 <script>
 export default {
   props: {
-    
+    id: {
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    },
+    type:{//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
+      type:Number,
+      default:0
+    },
+    size:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -15,7 +30,16 @@ export default {
     };
   },
   methods: {
-    
+    openEditWindow(){
+      let data = {
+        id:this.id,
+        sort:this.sort,
+        type:this.type,
+        size:this.size
+      }
+      console.log(data);
+      this.$store.commit('template/setEditWindowStatus',data);
+    }
   },
   mounted() {
     

src/views/template/public/editWindow.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="editWindowBox">
+    <div class="editWindowBoxContent">
+      <!--组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论-->
+      <!--开发助手-->
+      <div class="testAssistant">
+        <div class="testAssistantTitle">
+          开发助手：当前窗口在正式版本中将被移除。
+        </div>
+        <div class="testAssistantContent">
+          <div class="testAssistantContentItem"><span>板块id:</span>{{this.$store.state.template.editSectorId}}</div>
+          <div class="testAssistantContentItem"><span>组件sort:</span>{{this.$store.state.template.editComponentSort}}</div>
+          <div class="testAssistantContentItem"><span>组件type:</span>{{this.$store.state.template.editComponentType}}</div>
+          <div class="testAssistantContentItem"><span>展示条数:</span>{{this.$store.state.template.editComponentSize}}</div>
+        </div>
+      </div>
+      <!--1.普通新闻类型-->
+      <div v-if="this.$store.state.template.editComponentType == 1">
+        <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="新闻列表" disabled/>
+          </el-form-item>
+          <el-form-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
+            <el-cascader :key="oneParentKey" v-model="form.pid_arr" placeholder="请选择网站导航" :props="oneParentData" filterable clearable></el-cascader>
+          </el-form-item>
+          <el-form-item label="显示条数：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input v-model="this.$store.state.template.editComponentSize" placeholder="请输入请求的条数" disabled/>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--2.tabs类型-->
+      <div v-if="this.$store.state.template.editComponentType == 2">
+        <el-form :model="form.type2data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="新闻选项卡" disabled/>
+          </el-form-item>
+          <el-form-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
+            <el-cascader :key="moreParentKey" v-model="form.type2data.pid_arr" placeholder="请选择网站导航" :props="moreParentData" filterable clearable></el-cascader>
+          </el-form-item>
+          <el-form-item label="显示条数：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input v-model="this.$store.state.template.editComponentSize" placeholder="请输入请求的条数" disabled/>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--3.广告-->
+      <div v-if="this.$store.state.template.editComponentType == 3">
+        <el-form :model="form.type3data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="广告" disabled/>
+          </el-form-item>
+          <el-form-item label="广告位名称：" :label-width="formLabelWidth" prop="adsName" class="custom-align-right">
+            <el-input v-model="form.type3data.adsName" placeholder="请输入广告位名称"/>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--4.友情链接-->
+      <div v-if="this.$store.state.template.editComponentType == 4">
+        <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="友情链接暂不支持编辑" disabled/>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--6.静态-->
+      <div v-if="this.$store.state.template.editComponentType == 6">
+        <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="静态组件暂不支持编辑" disabled/>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--7.文字-->
+      <div v-if="this.$store.state.template.editComponentType == 7">
+        <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="文本" disabled/>
+          </el-form-item>
+          <el-form-item label="标题名称：" :label-width="formLabelWidth" prop="adsName" class="custom-align-right">
+            <el-input v-model="form.type7data.titleName" placeholder="请输入标题名称"/>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!--8.评论组件-->
+      <div v-if="this.$store.state.template.editComponentType == 8">
+        <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="评论组件暂不支持编辑" disabled/>
+          </el-form-item>
+        </el-form>
+      </div>
+
+    </div>
+    <div class="editWindowBoxFooter">
+      <el-button type="info" @click="closeEditWindow">取消</el-button>
+      <el-button type="primary" @click="submitData">确定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+
+  },
+  data() {
+    let self = this;
+    const validatePid = (rule,value,callback) => {
+      console.log(value.length)
+      if (value.length === 0) {
+        callback(new Error('必须选择一个导航！'))
+      } else {
+        callback()
+      }
+    }
+    const validateEmpty = (rule,value,callback) => {
+      if (!value || value.trim() === "") {
+        callback(new Error('该项不能为空！'));
+      } else {
+        callback();
+      }
+    }
+    return {
+      formLabelWidth:"120px",
+      
+      form:{
+        //单导航新闻
+        type1data:{
+          pid_arr:[],
+          pageSize:""
+        },
+        //tabs多导航新闻
+        type2data:{
+          pid_arr:[],
+          pageSize:""
+        },
+        //广告
+        type3data:{
+          adName:""
+        },
+        //文字
+        type7data:{
+          titleName:""
+        }
+      },
+      formRules:{
+        pid_arr: [{type:'array',required:true,trigger:'blur',message:'必须选择一个导航！',validator:validatePid}],
+        adsName: [{required:true,trigger:'blur',message:'请填写标题名称！',validator:validateEmpty}],
+      },
+      //获取单个导航id start---------------------------------------->
+      oneParentKey:0,
+      oneParentData: {
+        checkStrictly: true,
+        lazy: true,
+        async lazyLoad (node, resolve) {
+          const { level, data } = node;
+          if (data && data.children && data.children.length !== 0) {
+            return resolve(node)
+          }
+          console.log(level)
+          let parentId = level == 0 ? 0 : data.value
+          let parames = {
+            'pid':parentId
+          }
+          self.$store.dispatch('pool/categoryList',parames).then(res=> {
+            if (res.data) {
+              const nodes = res.data.map(item => ({
+                value: item.id,
+                label: item.name,
+                leaf: level >= 3,
+                children: []
+              }))
+              resolve(nodes)
+            }
+          })
+        }
+      },
+      //获取单个导航id end---------------------------------------->
+      //获取多个导航id start---------------------------------------->
+      moreParentKey:0,
+      moreParentData: {
+        checkStrictly: true,
+        multiple: true,
+        lazy: true,
+        async lazyLoad (node, resolve) {
+          const { level, data } = node;
+          if (data && data.children && data.children.length !== 0) {
+            return resolve(node)
+          }
+          console.log(level)
+          let parentId = level == 0 ? 0 : data.value
+          let parames = {
+            'pid':parentId
+          }
+          self.$store.dispatch('pool/categoryList',parames).then(res=> {
+            if (res.data) {
+              const nodes = res.data.map(item => ({
+                value: item.id,
+                label: item.name,
+                leaf: level >= 3,
+                children: []
+              }))
+              resolve(nodes)
+            }
+          })
+        }
+      },
+      //获取导航id end---------------------------------------->
+    };
+  },
+  methods: {
+    closeEditWindow(){
+      this.$store.commit('template/closeEditWindowStatus');
+    },
+    submitData(){
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          console.log("保存数据！")
+         
+        }
+      })
+    }
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .editWindowBox {
+    .editWindowBoxContent {
+      width: 100%;
+      padding: 20px;
+    }
+    .editWindowBoxFooter {
+      text-align: right;
+    }
+  }
+  //表单微调 start------------------------------------------------------------>
+  ::v-deep .editWindowBoxContent .el-cascader{
+    width: 100% !important;
+  }
+  ::v-deep .editWindowBoxContent .el-select--medium {
+    width: 100% !important;
+  }
+  //表单微调 end------------------------------------------------------------>
+</style>

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

@@ -1,17 +1,15 @@
 <template>
   <div class="bannerBox">
     <div class="itemTopBox">
-      <editBtn />
-      <mainTitle />
+      <mainTitle :id="id" :sort="1"/>
     </div>
     <div class="itemBottomBox">
       <div class="bannerLayerBox">
-        <editBtn />
-        <banner />
+        <banner :id="id" :sort="2"/>
       </div>
       <div class="NewsListBox">
-        <editBtn />
-        <tabsNews />
+        <!-- <tabsNews :id="id" :sort="3"/> -->
+        <bgGreyNews :id="id" :sort="3"/>
       </div>
     </div>
   </div>
@@ -21,17 +19,20 @@
 import mainTitle from './components/mainTitle.vue'
 import banner from './components/banner.vue'
 import tabsNews from './components/tabsNews.vue'
-import editBtn from '../../public/editBtn.vue'
+import bgGreyNews from './components/bgGreyNews.vue'
 
 export default {
   components: {
     mainTitle,
     banner,
     tabsNews,
-    editBtn
+    bgGreyNews
   },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -42,6 +43,7 @@ export default {
     
   },
   mounted() {
+    
   },
 };
 </script>
@@ -59,9 +61,6 @@ export default {
       border: 1px dashed #5570F1;
       transition: all 0.3s;
       width: 80%;
-      &:hover {
-        background: #e7ebff;
-      }
     }
     .itemBottomBox {
       border: 1px dashed #5570F1;
@@ -76,9 +75,6 @@ export default {
         border: 1px dashed #5570F1;
         width: 55%;
         height: 226px;
-        &:hover {
-          background: #e7ebff;
-        }
       }
       .NewsListBox {
         position: relative;
@@ -87,9 +83,6 @@ export default {
         box-sizing: border-box;
         padding-left: 20px;
         height: 226px;
-        &:hover {
-          background: #e7ebff;
-        }
       }
     }
     

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

@@ -1,14 +1,14 @@
 <template>
   <div class="commentSectorBox">
     <div class="commentSectorBoxTitle">
-      <styleTitle />
+      <styleTitle :id="id" :sort="1"/>
     </div>
     <div class="commentSectorBoxContent">
       <div class="tabsCalendarNewsBox">
-        <tabsCalendarNews />
+        <tabsCalendarNews :id="id" :sort="2"/>
       </div>
       <div class="calendarBox">
-        <calendar />
+        <calendar :id="id" :sort="3"/>
       </div>
     </div>
   </div>

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

@@ -0,0 +1,35 @@
+<template>
+  <div class="advertisementBox">
+    <img src="@/assets/template/component/style1imgTitle.png" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .advertisementBox {
+    width: 100%;
+    height: 60px;
+    img {
+      width: 100%;
+      height: 60px;
+    }
+  }
+</style>

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

@@ -0,0 +1,35 @@
+<template>
+  <div class="advertisementBox">
+    <img src="@/assets/template/sector/imgTitleSector.png" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .advertisementBox {
+    width: 100%;
+    height: 60px;
+    img {
+      width: 100%;
+      height: 60px;
+    }
+  }
+</style>

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

@@ -0,0 +1,35 @@
+<template>
+  <div class="advertisementBox">
+    <img src="@/assets/template/sector/imgTitleSector.png" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .advertisementBox {
+    width: 100%;
+    height: 60px;
+    img {
+      width: 100%;
+      height: 60px;
+    }
+  }
+</style>

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

@@ -1,5 +1,6 @@
 <template>
   <div class="bannerItemBox">
+    <editBtn :id="id" :sort="sort" :type="1" :size="3"/>
     <el-carousel height="226px">
       <el-carousel-item :key="1">
         <img src="@/assets/template/component/banner1.png" /> 
@@ -15,9 +16,20 @@
 </template>
 
 <script>
+import editBtn from '../../../public/editBtn.vue'
 export default {
+  components: {
+    editBtn
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {

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

@@ -0,0 +1,71 @@
+<template>
+  <div class="bgGreyNewsBox">
+    <editBtn :id="id" :sort="1" :type="2" :size="6"/>
+    <div class="bgGreyNews">
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+    </div>
+  </div>
+</template>
+
+<script>
+import editBtn from '../../../public/editBtn.vue'
+export default {
+  components: {
+    editBtn
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      activeName:"first"
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    }
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .bgGreyNewsBox {
+    background: #F2F2F2;
+    height: 100%;
+    .bgGreyNews {
+      a {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        border-bottom: 1px solid #D1D1D1;
+        font-size: 16px;
+        color: #333;
+        height: 37px;
+        line-height: 37px;
+        box-sizing: border-box;
+        padding: 0 20px;
+      }
+      a:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+</style>
+

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

@@ -1,5 +1,6 @@
 <template>
   <div class="calendarMainBox">
+    <editBtn :id="id" :sort="sort" :type="6"/>
     <div class="calendarTitle">
       <span>三农调查</span>
     </div>
@@ -15,9 +16,20 @@
 </template>
 
 <script>
+import editBtn from '../../../public/editBtn.vue'
 export default {
+  components: { 
+    editBtn
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -36,6 +48,7 @@ export default {
 <style scoped lang="less">
   .calendarMainBox {
     overflow: hidden;
+    position: relative;
     .calendarTitle {
       height: 40px;
       line-height: 40px;

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

@@ -1,17 +1,29 @@
 <template>
   <div class="fivePictureBox">
-    <div><img src="@/assets/template/component/pictureTitle1.png"/></div>
-    <div><img src="@/assets/template/component/pictureTitle2.png"/></div>
-    <div><img src="@/assets/template/component/pictureTitle3.png"/></div>
-    <div><img src="@/assets/template/component/pictureTitle4.png"/></div>
-    <div><img src="@/assets/template/component/pictureTitle5.png"/></div>
+    <editBtn :id="id" :sort="sort" :type="6"/>
+    <div class="fivePictureItem"><img src="@/assets/template/component/pictureTitle1.png"/></div>
+    <div class="fivePictureItem"><img src="@/assets/template/component/pictureTitle2.png"/></div>
+    <div class="fivePictureItem"><img src="@/assets/template/component/pictureTitle3.png"/></div>
+    <div class="fivePictureItem"><img src="@/assets/template/component/pictureTitle4.png"/></div>
+    <div class="fivePictureItem"><img src="@/assets/template/component/pictureTitle5.png"/></div>
   </div>
 </template>
 
 <script>
+import editBtn from '../../../public/editBtn.vue'
 export default {
+  components: {
+    editBtn
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -34,7 +46,8 @@ export default {
     align-items: center;
     justify-content: space-between;
     padding: 20px 0;
-    div {
+    position: relative;
+    .fivePictureItem {
       width: 20%;
       display: flex;
       justify-content: center;

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

@@ -1,11 +1,22 @@
 <template>
   <div class="friendShipLinkBox">
+    <editBtn :id="id" :sort="sort" :type="4"/>
     <div class="friendShipLinkImgItemBox">
-      <img src="@/assets/template/component/link1.png">
-      <img src="@/assets/template/component/link2.png">
-      <img src="@/assets/template/component/link1.png">
-      <img src="@/assets/template/component/link1.png">
-      <img src="@/assets/template/component/link2.png">
+      <div>
+        <img src="@/assets/template/component/link1.png">
+      </div>
+      <div>
+        <img src="@/assets/template/component/link2.png">
+      </div>
+      <div>
+        <img src="@/assets/template/component/link1.png">
+      </div>
+      <div>
+        <img src="@/assets/template/component/link2.png">
+      </div>
+      <div>
+        <img src="@/assets/template/component/link1.png">
+      </div>
     </div>
     <div class="friendShipLinkTextItemBox">
       <a href="javascript:;">中国教育网</a>
@@ -21,9 +32,20 @@
 </template>
 
 <script>
+import editBtn from '../../../public/editBtn.vue';
 export default {
+  components: {
+    editBtn
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -41,6 +63,8 @@ export default {
 
 <style scoped lang="less">
   .friendShipLinkBox {
+    position: relative;
+    width: 100%;
     .friendShipLinkImgItemBox {
       height: 80px;
       display: flex;
@@ -48,8 +72,14 @@ export default {
       align-items: flex-start;
       justify-content: space-between;
       padding: 20px 0;
-      img {
-        width: 19%;
+      div {
+        width: 20%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          width: 50%;
+        }
       }
     }
     .friendShipLinkTextItemBox {

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

@@ -1,5 +1,6 @@
 <template>
   <div class="listNewsBox">
+    <editBtn :id="id" :sort="sort" :type="1" :size="5"/>
     <div class="listNewsTitle">
       <div class="listNewsStyleBorder">新闻列表标题</div>
     </div>
@@ -29,9 +30,20 @@
 </template>
 
 <script>
+import editBtn from '../../../public/editBtn.vue'
 export default {
+  components: {
+    editBtn
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -51,6 +63,7 @@ export default {
 
 <style scoped lang="less">
   .listNewsBox {
+    position: relative;
     .listNewsTitle {
       color: #19499F;
       font-size: 22px;

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

@@ -1,18 +1,30 @@
 <template>
   <div class="mainTitleBox">
+    <editBtn :id="id" :sort="sort" :type="1" :size="1"/>
     <img src="@/assets/template/component/newsIcon.png" />
     <div class="mainTitleText">习近平在中华全国供销合作社成立70周年</div>
   </div>
 </template>
 
 <script>
+import editBtn from '../../../public/editBtn.vue'
 export default {
+  components: {
+    editBtn
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
-      articleId:2509
+      
     };
   },
   methods: {

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

@@ -1,13 +1,27 @@
 <template>
   <div class="styleTitleBox">
-    <div :class="['titleBoxStyle' + type]">{{ text }}</div>
+    <editBtn :id="id" :sort="sort" :type="7" />
+    <div :class="['titleBoxStyle' + type]">
+      {{ text }}
+    </div>
   </div>
 </template>
 
 <script>
+import editBtn from '../../../public/editBtn.vue'
 export default {
+  components: {
+    editBtn
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -26,16 +40,17 @@ export default {
 
 <style scoped lang="less">
   .styleTitleBox {
-    width: 468px;
+    //width: 468px;
+    width: 100%;
     height: 41px;
     text-align: center;
     font-size: 32px;
     font-weight: bold;
     color: #333;
     line-height: 41px;
+    position: relative;
   }
   .titleBoxStyle1{
     background: url('../../../../../assets/template/component/titleStyle1.png') no-repeat center center;
-    background-size: 100% 100%;
   }
 </style>

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

@@ -1,5 +1,6 @@
 <template>
   <div class="tabsCalendarMainNewsBox">
+    <editBtn :id="id" :sort="sort" :type="1" :size="6"/>
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane label="市场资讯" name="sczx">
         <ul class="newsListBox">
@@ -43,9 +44,20 @@
 </template>
 
 <script>
+import editBtn from '../../../public/editBtn.vue'
 export default {
+  components: {
+    editBtn
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -66,6 +78,7 @@ export default {
 <style scoped lang="less">
   .tabsCalendarMainNewsBox {
     width: 100%;
+    position: relative;
     .newsListBox {
       padding-left: 0;
       .newsCalendarBox {

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

@@ -1,5 +1,6 @@
 <template>
   <div class="tabsNewsBox">
+    <editBtn :id="id" :sort="sort" :type="2" :size="5"/>
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane label="地方动态" name="first">
         <ul class="newsListBox">
@@ -33,9 +34,20 @@
 </template>
 
 <script>
+import editBtn from '../../../public/editBtn.vue'
 export default {
+  components: {
+    editBtn
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {

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

@@ -1,10 +1,10 @@
 <template>
   <div class="friendShipLinkSectorBox">
     <div class="friendShipLinkSectorTitle">
-      <styleTitle />
+      <styleTitle :id="id" :sort="1"/>
     </div>
     <div class="friendShipLinkSectorItemBox">
-      <friendShipLink />
+      <friendShipLink :id="id" :sort="2"/>
     </div>
   </div>
 </template>
@@ -18,7 +18,10 @@ export default {
     friendShipLink
   },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {

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

@@ -1,16 +1,42 @@
 <template>
   <div class="imgTitleSectorBox">
     <div class="imgSectorBox">
-      <img src="@/assets/template/sector/imgTitleSector.png" />
+      <editBtn :id="id" :sort="0" :type="3" :size="1"/>
+      <convertBtn :id="id" :sort="0" :type="3"/>
+      <!-- {{this.$store.state.template.pageData.index[id].sectorData.componentList[0].component_style}} -->
+      <div v-if="this.$store.state.template.pageData.index[id].sectorData.componentList[0].component_style == 1">
+        <useStyle1 />
+      </div>
+      <div v-if="this.$store.state.template.pageData.index[id].sectorData.componentList[0].component_style == 2">
+        <useStyle2 />
+      </div>
+      <div v-if="this.$store.state.template.pageData.index[id].sectorData.componentList[0].component_style == 3">
+        <useStyle3 />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import editBtn from '../../public/editBtn.vue'
+import convertBtn from '../../public/convertBtn.vue'
+import useStyle1 from './components/advertisement/1.vue'
+import useStyle2 from './components/advertisement/2.vue'
+import useStyle3 from './components/advertisement/3.vue'
 
 export default {
+  components: {
+    editBtn,
+    convertBtn,
+    useStyle1,
+    useStyle2,
+    useStyle3
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -30,10 +56,7 @@ export default {
       border: 1px dashed #5570F1;
       width: 80%;
       height: 60px;
-      img {
-        width: 100%;
-        height: 100%;
-      }
+      position: relative;
     }
   }
 </style>

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

@@ -1,14 +1,14 @@
 <template>
   <div class="listSectorBox">
     <div class="listSectorBoxTitle">
-      <styleTitle />
+      <styleTitle :id="id" :sort="1"/>
     </div>
     <div class="listSectorBoxContent">
       <div class="listNewsLeft">
-        <listNews />
+        <listNews :id="id" :sort="2"/>
       </div>
       <div class="listNewsRight">
-        <listNews />
+        <listNews :id="id" :sort="3"/>
       </div>
     </div>
   </div>
@@ -24,7 +24,10 @@ export default {
     listNews
   },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {

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

@@ -1,17 +1,17 @@
 <template>
   <div class="manyPictureSectorBox">
     <div class="manyPictureSectorBoxTitle">
-      <styleTitle />
+      <styleTitle :id="id" :sort="1"/>
     </div>
     <div class="manyPictureSectorBox">
-      <fivePicture />
+      <fivePicture :id="id" :sort="2"/>
     </div>
     <div class="manyPictureNewsBox">
       <div class="manyPictureNewsItem">
-        <listNews />
+        <listNews :id="id" :sort="3"/>
       </div>
       <div class="manyPictureNewsItem">
-        <listNews />
+        <listNews :id="id" :sort="4"/>
       </div>
     </div>
   </div>
@@ -29,7 +29,10 @@ export default {
     listNews
   },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -51,6 +54,7 @@ export default {
     flex-direction: column;
     align-items: center;
     width:100%;
+    position: relative;
     .manyPictureSectorBoxTitle {
       width: 80%;
       border: 1px dashed #5570F1;

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

@@ -1,6 +1,7 @@
 <template>
   <div class="onlyImgSectorBox">
     <div class="onlyImgSectorPositionBox">
+      <editBtn :id="id" :sort="1" :type="6"/>
       <div class="onlyImgSectorItemBox1">
         <img src="@/assets/template/component/pic1.png" />
         <img src="@/assets/template/component/pic2.png" />
@@ -23,10 +24,20 @@
 </template>
 
 <script>
-
+import editBtn from '../../public/editBtn.vue';
 export default {
+  components: {
+    editBtn
+  },
   props: {
-    
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
   },
   data() {
     return {
@@ -44,10 +55,12 @@ export default {
     align-items: center;
     .onlyImgSectorPositionBox {
       width: 80%;
+      height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
       border: 1px dashed #5570F1;
+      position: relative;
       img {
         width: 100%;
         display: block;

src/views/template/templateCreat.vue

@@ -7,7 +7,7 @@
       </div>
       <div class="topMenuRightBox">
         <img src="@/assets/template/preview.png" class="previewImg"/>
-        <el-button type="primary" @click="gotoList">保存</el-button>
+        <el-button type="primary" @click="saveTemplate">保存</el-button>
         <el-button type="info" @click="goStyle">上一步</el-button>
       </div>
     </div>
@@ -28,14 +28,12 @@
     <!-- 画布 end ---------------------------------------->
 
     <!-- 弹出框 start ---------------------------------------->
-    <el-dialog title="编辑模块" :visible.sync="this.$store.state.template.editWindowStatus" :close-on-click-modal="false">
-      <div>123</div>
-      <div slot="footer" class="dialog-footer">
-        <div>
-          <el-button type="info">取消</el-button>
-          <el-button type="warning">编辑</el-button>
-        </div>
-      </div>
+    <!-- 这里我去掉了:visible.sync 因为弹出框的关闭事件需要手动触发 -->
+    <el-dialog title="编辑组件" :visible="this.$store.state.template.editWindowStatus" :close-on-click-modal="false" @close="closeEditWindow">
+      <editWindow />
+    </el-dialog>
+    <el-dialog title="选择组件展示形式" :visible="this.$store.state.template.editComponentWindowStatus" :close-on-click-modal="false" @close="closeComponentStyleWindow">
+      <componentWindow />
     </el-dialog>
     <!-- 弹出框 start ---------------------------------------->
   </div>
@@ -44,6 +42,8 @@
 <script>
 //页面公用组件 start------------------------------------------------------------>
 import '@/styles/global.less';
+import editWindow from './public/editWindow.vue';
+import componentWindow from './public/componentWindow.vue';
 //页面公用组件 end------------------------------------------------------------>
 
 //页面组件 start------------------------------------------------------------>
@@ -53,7 +53,9 @@ import pageIndex from './page/pageIndex.vue';
 export default {
   components: {
     //引入页面组件
-    pageIndex
+    pageIndex,
+    editWindow,
+    componentWindow
   },
   data() {
     return {
@@ -92,6 +94,10 @@ export default {
         path: '/templateList'
       });
     },
+    //保存模板
+    saveTemplate(){
+      this.$store.commit('template/saveTemplate');
+    },
     //打开弹出框
     openWindow(item) {
       this.editModule = item.i;
@@ -105,6 +111,14 @@ export default {
     openPage(num){
       this.$store.commit('template/setPageStatus',num);
     },
+    //关闭编辑弹出框
+    closeEditWindow(){
+      this.$store.commit('template/closeEditWindowStatus');
+    },
+    //关闭选择组件样式弹出框
+    closeComponentStyleWindow(){
+      this.$store.commit('template/closeComponentStyleStatus');
+    },
     //0.全局操作 end ------------------------------------------------------------>
   },
   mounted(){

src/views/website/WebsiteList.vue

@@ -411,7 +411,7 @@ export default {
     },
     //1.2 删除内容
     deleteData(id){
-      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
+      this.$confirm('删除后，该条信息及其绑定关系全部删除，确定吗?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -545,6 +545,8 @@ export default {
       this.getwebsiteColumn()
       //显示网系到弹出窗口
       this.openWindow()
+      //修改添加和编辑窗口的文字提示
+      this.editId = 0;
       //显示提交按钮
       this.editBtn = false;
       //清除错误状态

src/views/website/categoryList.vue

@@ -25,7 +25,7 @@
     </div>
     <div class="layerBoxNoBg">
       <div>
-        <el-button type="primary" @click="openWindow">添加导航池</el-button>
+        <el-button type="primary" @click="addCategoryList">添加导航池</el-button>
       </div>
       <div>
         <el-button @click="clearSearchList">重置</el-button>
@@ -425,7 +425,7 @@ export default {
     },
     //1.2 删除内容
     deleteData(id){
-      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
+      this.$confirm('删除后，该条信息及其绑定关系全部删除，确定吗', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -492,6 +492,12 @@ export default {
       //this.clearToServe();
       this.windowStatus = true;
     },
+    //2.1.1 添加导航池
+    addCategoryList(){
+      this.editId = 0;
+      this.editBtn = false;
+      this.openWindow();
+    },
     //2.2 关闭弹出框
     closeWindow(){
       this.windowStatus = false;

src/views/website/editNavigation.vue

@@ -334,12 +334,24 @@ export default {
         category_id:item.category_id,
         website_id:item.website_id,
       }
-      this.$store.dispatch('pool/delWebsiteCategory',data).then(res=> {
-        this.$message.success("删除成功！");
-        this.getData();
+      this.$confirm('删除后，该条信息及其绑定关系全部删除，确定吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$store.dispatch('pool/delWebsiteCategory',data).then(res=> {
+          this.$message.success("删除成功！");
+          this.getData();
+        }).catch(() => {
+          this.$message.info("网络错误，请重试！");
+        })
       }).catch(() => {
-        this.$message.info("网络错误，请重试！");
-      })
+        this.$message({
+          type: 'warning',
+          message: '已取消删除'
+        });
+      });
+      
     },
     //提交编辑的数据
     addToServe(){

src/views/website/websiteColumn.vue

@@ -225,7 +225,7 @@ export default {
     },
     //1.2 删除内容
     deleteRow(id){
-      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
+      this.$confirm('删除后，该条信息及其绑定关系全部删除，确定吗?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'

vue.config.js

@@ -27,6 +27,15 @@ module.exports = {
     }
     // 如有需要，可在此处配置代理
   },
+  css: {
+    loaderOptions: {
+      sass: {
+        sassOptions: {
+          outputStyle: 'expanded'
+        }
+      }
+    }
+  },
   configureWebpack: config => {
     const plugins = [
       new webpack.ProvidePlugin({