组件数据关联json

组件数据关联json

src/api/cms.js

@@ -92,4 +92,12 @@ export function getAllDepartment(params) {
   })
 }
 
+//2.1 获得所有1级网站导航
+export function getWebsiteCategory(params) {
+  return request({
+    url: '/web/getWebsiteCategory',
+    method: 'get',
+    params
+  })
+}
 //C端网站请求无需token start ------------------------------------->

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

@@ -82,7 +82,9 @@ export default {
             component_style:1,//该组件使用哪个展示样式
             component_name:"",
             sort:1,
-            componentData:[]//该组件不请求指定类型的数据，但是后端需要返回imgUrl
+            componentData:{
+              text:"通栏广告"
+            }//该组件不请求指定类型的数据，但是后端需要返回imgUrl
           }
         ]
       },
@@ -120,7 +122,8 @@ export default {
               page:1,
               pageSize:3,
               listType:[
-                "imgUrl"
+                "title",//标题
+                "imgUrl"//缩略图片
               ]
             }
           },
@@ -134,8 +137,9 @@ export default {
               page:1,
               pageSize:5,
               listType:[
-                "imgUrl",
-                "created_time",
+                "title",//标题
+                "created_time",//创建时间
+                "introduce",//描述
               ]
             }
           },
@@ -242,7 +246,7 @@ export default {
         sectorName:"listSector",//板块名称
         componentList:[
           {
-            component_type:7, //纯文本
+            component_type:7,//纯文本
             component_style:1,//该组件使用哪个展示样式
             component_name:"styleTitle",
             sort:1,

src/store/modules/cms.js

@@ -1,4 +1,4 @@
-import {getAllDepartment} from '@/api/cms'
+import {getAllDepartment,getWebsiteCategory} from '@/api/cms'
 
 const state = {
 
@@ -9,7 +9,7 @@ const mutations = {
 }
 
 const actions = {
-  //1.获取所有职能 start ---------------------------------------->
+  //1.获取所有职能
   getAllDepartment({commit},data) {
     return new Promise((resolve, reject) => {
       getAllDepartment(data).then(response => {
@@ -19,7 +19,16 @@ const actions = {
       })
     })
   },
-  //获取所有职能 end ---------------------------------------->
+  //2.获得所有1级网站导航
+  getWebsiteCategory({commit},data) {
+    return new Promise((resolve, reject) => {
+      getWebsiteCategory(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
 }
 
 

src/store/modules/template.js

@@ -1,5 +1,5 @@
 import {getSiteInfo,getSiteCategory,selectWebsiteDepartment,selectWebsiteArea,getWebsiteArticlesList,
-  selectWebsiteArticleInfo} from '@/api/cms'
+  selectWebsiteArticleInfo,getWebsiteCategory} from '@/api/cms'
 
 import { Message } from 'element-ui'; //注意在这里引入是非常不符合规范的
 
@@ -59,6 +59,7 @@ const state = {
   editComponentType:0,//当前正在编辑的组件类型
   editComponentSize:0,//当前组件展示的条数
   editComponentStyle:0,//当前编辑的组件样式
+  editWebsiteCategory:[],//当前网站全部关联导航
 
   webSiteData:{
     //1.base网站基本信息
@@ -80,8 +81,17 @@ const state = {
       aloneList:[],//自定义列表页
       aloneArticle:[],//自定义详情页
     }
-  }
+  },
   //3.网站数据 end------------------------------------------------------------>
+
+  //4.组件回显数据 start------------------------------------------------------------>
+  componentViewData:{
+    pid_arr:[],//导航池
+    pageSize:"",//展示条数
+    adName:"",//广告名称
+    titleName:"",//标题名称
+  }
+  //4.组件回显数据 start------------------------------------------------------------>
 }
 
 const mutations = {
@@ -136,7 +146,45 @@ const mutations = {
   selectComponentStyleNumber(state,data){
     state.editComponentStyle = data;
   },
+  //设置组件回显数据
+  setComponentViewData(state,data){
+    //首页
+    if(state.pageStatus == 1){
+      //找到要修改的板块
+      const targetModuleIndex = state.pageData.index.findIndex(module => module.i === data.id);
+      //判断组件类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
+      if(state.editComponentType == 1){
+        state.componentViewData.pid_arr = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+        state.componentViewData.pageSize = state.editComponentSize;
+      }
+      //2=tabs新闻选项卡
+      if(state.editComponentType == 2){
+        state.componentViewData.pid_arr = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.category_id;
+        state.componentViewData.pageSize = state.editComponentSize;
+      }
+      //3=广告名称
+      if(state.editComponentType == 3){
+        state.componentViewData.adName = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.text;
+      }
+      //7=标题
+      if(state.editComponentType == 7){
+        state.componentViewData.titleName = state.pageData.index[targetModuleIndex].content.componentList[data.sort].componentData.text;
+      }
 
+    }
+    //pageStatus==2 分类页
+    if(state.pageStatus == 2){}
+    //pageStatus==3 列表页
+    if(state.pageStatus == 3){}
+    //pageStatus==4 详情页
+    if(state.pageStatus == 4){}
+    //pageStatus==5 搜索页
+    if(state.pageStatus == 5){}
+    //pageStatus==6 自定义列表页
+    if(state.pageStatus == 6){}
+    //pageStatus==7 自定义详情页
+    if(state.pageStatus == 7){}
+  },
   //0.全局配置 start------------------------------------------------------------>
   //1.配置模块 start------------------------------------------------------------>
   //添加板块
@@ -258,6 +306,85 @@ const mutations = {
     //pageStatus==7 自定义详情页
     if(state.pageStatus == 7){}
   },
+  //保存组件设置的数据
+  saveComponentData(state,data){
+    //传入的板块id
+    console.log("当前编辑板块：" + data.id)
+    //pageStatus==1 首页
+    if(state.pageStatus == 1){
+      const targetModuleIndex = state.pageData.index.findIndex(module => module.i === data.id);
+      console.log("要修改的模块id为：") //找到要修改的板块
+      console.log(data.sort) //找到要修改的板块
+      console.log(targetModuleIndex) //找到要修改的板块
+      //console.log(targetModuleIndex) //找到要修改的板块
+      //state.pageData.index[targetModuleIndex].content.componentList[data.sort] //当前编辑的组件 
+      //data.data.pid_arr //导航池
+      //state.editComponentSize //展示条数
+
+      //判断数据的类型 1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
+      //1=普通新闻
+      //注意，vue有一个bug就是，当你修改复杂对象的时候，如果对象的内部是数组
+      //vue可能无法检测到变化，而当你修改无法被检测变化的数据时，就会把所有数据都修改成相同的值
+      //解决办法是通过vue的set方法将整个对象，即你的数组外层那个对象进行深拷贝，然后修改完再替换回去
+      if(state.editComponentType == 1){
+        // 获取当前模块数据并进行深拷贝
+        let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex])); // 深拷贝整个模块
+        // 更新 category_id 和 pageSize
+        module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
+        module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
+        // 使用Vue.set来强制视图更新
+        Vue.set(state.pageData.index, targetModuleIndex, module); // 替换为深拷贝的模块
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.index);
+      }
+      //2=tabs新闻选项卡
+      if(state.editComponentType == 2){
+        // 获取当前模块数据并进行深拷贝
+        let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex])); // 深拷贝整个模块
+        // 更新 category_id 和 pageSize
+        module.content.componentList[data.sort].componentData.category_id = data.data.pid_arr; // 设置 category_id
+        module.content.componentList[data.sort].componentData.pageSize = state.editComponentSize; // 设置 pageSize
+        // 使用Vue.set来强制视图更新
+        Vue.set(state.pageData.index, targetModuleIndex, module); // 替换为深拷贝的模块
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.index);
+      }
+      //3=广告
+      if(state.editComponentType == 3){;
+        let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex]));
+        module.content.componentList[data.sort].componentData.text = data.data.adName;
+        Vue.set(state.pageData.index, targetModuleIndex, module);
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.index);
+      }
+      //4=友情链接
+      //if(state.editComponentType == 4){}
+      //6=静态组件
+      //if(state.editComponentType == 6){}
+      //7=文本
+      if(state.editComponentType == 7){
+        let module = JSON.parse(JSON.stringify(state.pageData.index[targetModuleIndex]));
+        module.content.componentList[data.sort].componentData.text = data.data.titleName;
+        Vue.set(state.pageData.index, targetModuleIndex, module);
+        console.log("当前的板块数据为：");
+        console.log(state.pageData.index);
+      }
+      //8=评论
+      //if(state.editComponentType == 8){}
+    }
+    //pageStatus==2 分类页
+    if(state.pageStatus == 2){}
+    //pageStatus==3 列表页
+    if(state.pageStatus == 3){}
+    //pageStatus==4 详情页
+    if(state.pageStatus == 4){}
+    //pageStatus==5 搜索页
+    if(state.pageStatus == 5){}
+    //pageStatus==6 自定义列表页
+    if(state.pageStatus == 6){}
+    //pageStatus==7 自定义详情页
+    if(state.pageStatus == 7){}
+  },
   //移动板块 (暂时停用)
   moveModule(state, data) {
     Message.error('移动板块功能暂时停用！');
@@ -367,7 +494,6 @@ const mutations = {
     if(data.type=="index"){
       state.webSiteData.template.index = websiteData;
     }
-
   },
   //保存模板
   saveTemplate(state) {
@@ -424,6 +550,19 @@ const mutations = {
       state.area.county = data.region;
     }
   },
+  //获取全部导航
+  setWebsiteCategory(state,data){
+    let arrayData = []
+    for(let item of data){
+      let options = {
+        key:item.id,
+        label:item.name,
+        value:item.id
+      }
+      arrayData.push(options);
+    }
+    state.editWebsiteCategory = arrayData;
+  },
   //2.获取站点信息 end------------------------------------------------------------>
 }
 
@@ -481,7 +620,18 @@ const actions = {
         reject(error)
       })
     })
-  }
+  },
+  //获取全部导航池
+  getWebsiteCategory({commit},data){
+    return new Promise((resolve, reject) => {
+      getWebsiteCategory(data).then(response => {
+        commit('setWebsiteCategory', response.data);
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
   //1.站点数据 end------------------------------------------------------------>
 }
 

src/styles/global.less

@@ -282,7 +282,7 @@
   background: #E9EDF7;
   margin-bottom: 30px;
   .testAssistantTitle {
-    font-size: 12px;
+    font-size: 14px;
     font-weight: bold;
     color: #19499F;
   }
@@ -292,12 +292,21 @@
       padding-top: 5px;
       color: #19499F;
       font-weight: bold;
-      span {
-        font-weight: bold;
-        font-size: 14px;
-        color: #333;
-        margin-right: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 30px;
+      line-height: 30px;
+      border-bottom:1px dashed #19499F;
+      &:last-child {
+        border-bottom:none;
       }
+      // span {
+      //   font-weight: bold;
+      //   font-size: 14px;
+      //   color: #333;
+      //   margin-right: 10px;
+      // }
     }
   }
 }

src/views/chat/contacts.vue

@@ -391,6 +391,7 @@ export default {
         console.log(res);
         //保存好友信息
         this.friendInfo = res.data;
+        this.remark = res.data.remark;
       }).catch(() => {
         this.$message.error('获得好友身份详情失败!')
       })

src/views/chat/hall.vue

@@ -608,7 +608,7 @@
               <el-checkbox v-model="item.status"></el-checkbox>
               <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
               <img src="@/assets/chat/user/admin.png" v-else>
-              <div class="searchUserName" v-if="item.remark!=null">{{item.remark}}</div>
+              <div class="searchUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
               <div class="searchUserName" v-else>{{item.user_name}}</div>
             </div>
           </div>
@@ -628,7 +628,7 @@
                   <i class="el-icon-close"></i>
                 </div>
               </div>
-              <div class="searchWindowUserName" v-if="item.remark!=null">{{item.remark}}</div>
+              <div class="searchWindowUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
               <div class="searchWindowUserName" v-else>{{item.user_name}}</div>
             </div>
           </div>
@@ -852,7 +852,7 @@
         <div class="messageFormInput">
           <el-input v-model="form.addUserForm.notes" placeholder="请输入"></el-input>
         </div>
-        <div class="messageFormTitle">备注名</div>
+        <div class="messageFormTitle">验证消息</div>
         <div class="messageFormInput">
           <el-input v-model="form.addUserForm.nickname" placeholder="请输入"></el-input>
         </div>
@@ -942,7 +942,8 @@
               </div>
               <div class="searchFriendButton">
                 <el-button v-if="groupSearchUser.status==false" type="primary" @click="addGroupUser(groupSearchUser)">添加</el-button>
-                <el-button v-else type="warning" @click="addGroupUser(groupSearchUser)">移除</el-button>
+                <el-button v-else-if="Number(creatorId)==Number(myUserId)" type="warning" @click="addGroupUser(groupSearchUser)" >移除</el-button>
+                <el-button v-else type="warning" @click="addGroupUser(groupSearchUser)" disabled>移除</el-button>
               </div>
             </div>
             <!--搜索用户弹出框 end------------------------------------------------------------>
@@ -950,11 +951,25 @@
           <!--通讯录列表 start------------------------------------------------------------>
           <div class="searchUserBox">
             <!-- <div class="searchNameEnglish">A</div> -->
-            <div class="searchUserItem" v-for="(item,index) in friendsList" :key="index">
-              <el-checkbox v-model="item.status" @change="changeSelectFriends(item)" :disabled="Number(item.friend_id)==Number(creatorId)"></el-checkbox>
+            <!--群主-->
+            <div class="searchUserItem" v-for="(item,index) in friendsList" :key="index" v-if="Number(creatorId)==Number(myUserId)">
+              <!-- {{ item.friend_id }}
+              {{ creatorId }} -->
+              <!-- <el-checkbox v-model="item.status" @change="changeSelectFriends(item)" :disabled="Number(item.friend_id)==Number(creatorId)"></el-checkbox> -->
+              <el-checkbox v-model="item.status" @change="changeSelectFriends(item)" :disabled="Number(item.friend_id) == Number(creatorId)"></el-checkbox>
               <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
               <img src="@/assets/chat/user/admin.png" v-else>
-              <div class="searchUserName" v-if="item.remark!=null">{{item.remark}}</div>
+              <div class="searchUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
+              <div class="searchUserName" v-else>
+                {{item.user_name}}
+              </div>
+            </div>
+            <!--非群主-->
+            <div class="searchUserItem" v-for="(item,index) in friendsList" :key="index" v-if="Number(creatorId)!=Number(myUserId)">
+              <el-checkbox v-model="item.status" @change="changeSelectFriends(item)" :disabled="Number(item.friend_id) == Number(creatorId) || isGroupUser(item.friend_id)"></el-checkbox>
+              <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
+              <img src="@/assets/chat/user/admin.png" v-else>
+              <div class="searchUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
               <div class="searchUserName" v-else>
                 {{item.user_name}}
               </div>
@@ -977,7 +992,7 @@
                   <i class="el-icon-close"></i>
                 </div>
               </div>
-              <div class="searchWindowUserName" v-if="item.remark!=null">{{item.remark}}</div>
+              <div class="searchWindowUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
               <div class="searchWindowUserName" v-else-if="item.user_name!=null">{{item.user_name}}</div>
               <div class="searchWindowUserName" v-else>未知用户</div>
             </div>
@@ -997,8 +1012,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>
@@ -1025,7 +1040,7 @@
                   <div class="shareCardItem">
                     <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                     <img src="@/assets/chat/user/admin.png" v-else>
-                    <div class="shareCardName" v-if="item.remark!=null">{{item.remark}}</div>
+                    <div class="shareCardName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
                     <div class="shareCardName" v-else>{{item.user_name}}</div>
                   </div>
                 </div>
@@ -1040,7 +1055,7 @@
                   <div class="shareCardItem">
                     <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                     <img src="@/assets/chat/user/group.jpg" v-else>
-                    <div class="shareCardName" v-if="item.remark!=null">{{item.remark}}</div>
+                    <div class="shareCardName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
                     <div class="shareCardName" v-else>{{item.name}}</div>
                   </div>
                 </div>
@@ -1070,7 +1085,7 @@
                   <div class="shareCardItem">
                     <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                     <img src="@/assets/chat/user/admin.png" v-else>
-                    <div class="shareCardName" v-if="item.remark!=null">{{item.remark}}</div>
+                    <div class="shareCardName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
                     <div class="shareCardName" v-else>{{item.user_name}}</div>
                   </div>
                 </div>
@@ -1085,7 +1100,7 @@
                   <div class="shareCardItem">
                     <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                     <img src="@/assets/chat/user/group.jpg" v-else>
-                    <div class="shareCardName" v-if="item.remark!=null">{{item.remark}}</div>
+                    <div class="shareCardName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
                     <div class="shareCardName" v-else>{{item.name}}</div>
                   </div>
                 </div>
@@ -2012,8 +2027,12 @@ export default {
     //2.4.2 加入群聊
     joinGroup(){
       this.$store.dispatch('chat/joinGroup',{group_id:this.groupInviteInfo.group_id}).then(res=> {
-        this.$message.success('加入群聊成功!')
-        this.addGroupWindow = false;
+        if(res.code=='200'){
+          this.$message.success('加入群聊成功!')
+          this.addGroupWindow = false;
+        }else{
+          this.$message.error(res.message)
+        }
       }).catch(() => {
         this.$message.error('加入群聊失败!')
       })
@@ -2037,6 +2056,7 @@ export default {
         }
       }
     },
+    //2.4.4 分享群聊
     shareMyGroup(){
       console.log(this.shareGroupId)
       if(this.shareGroupId!=''){
@@ -2081,6 +2101,16 @@ export default {
       console.log("当前选中的tab name:", tabName);
       this.shareGroupActive = tabName;
     },
+    //2.4.5 判断该成员是否在群聊中
+    isGroupUser(id){
+      let flag = false;
+      for(let item of this.groupUserList){
+        if(item.user_id==id){
+          flag = true;
+        }
+      }
+      return flag;
+    },
     //2.群聊 end---------------------------------------->
 
     //3.全局应用 start---------------------------------------->

src/views/chat/topic.vue

@@ -85,7 +85,7 @@
                 <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)"><i class="el-icon-edit-outline"></i>编辑</div>
-                  <div class="listMainBtn" @click="openEditWindow(scope.row.id)"><i class="el-icon-edit-outline"></i>审核</div>
+                  <div class="listMainBtn" @click="openEditWindow(scope.row.id)" v-if="$store.state.user.role_id==1||$store.state.user.role_id==21||$store.state.user.role_id==23"><i class="el-icon-edit-outline"></i>审核</div>
                 </div>
               </template>
             </el-table-column>

src/views/template/public/componentWindow.vue

@@ -6,12 +6,34 @@
         开发助手：当前窗口在正式版本中将被移除。
       </div>
       <div class="testAssistantContent">
-        <div class="testAssistantContentItem"><span>板块id:</span>{{this.$store.state.template.editSectorId}}</div>
-        <div class="testAssistantContentItem"><span>组件位置:</span>{{this.$store.state.template.editComponentSort}}</div>
-        <div class="testAssistantContentItem"><span>组件Json位置:</span>{{this.$store.state.template.editDataSort}}</div>
-        <div class="testAssistantContentItem"><span>组件种类:</span>{{this.$store.state.template.editComponentType}}</div>
-        <div class="testAssistantContentItem"><span>原组件样式:</span>{{this.$store.state.template.pageData.index[this.$store.state.template.editDataSort].content.componentList[this.$store.state.template.editComponentSort].component_style}}</div>
-        <div class="testAssistantContentItem"><span>当前组件样式:</span>{{this.$store.state.template.editComponentStyle}}</div>
+        <div class="testAssistantContentItem">
+          <div>当前板块id:</div>
+          <div>{{this.$store.state.template.editSectorId}}</div>
+        </div>
+        <div class="testAssistantContentItem">
+          <div>当前板块所在的页面:</div>
+          <div v-if="this.$store.state.template.pageStatus == 1">首页</div>
+          <div v-if="this.$store.state.template.pageStatus == 2">分类页</div>
+          <div v-if="this.$store.state.template.pageStatus == 3">列表页</div>
+          <div v-if="this.$store.state.template.pageStatus == 4">详情页</div>
+          <div v-if="this.$store.state.template.pageStatus == 5">搜索页</div>
+          <div v-if="this.$store.state.template.pageStatus == 6">自定义列表页</div>
+          <div v-if="this.$store.state.template.pageStatus == 7">自定义详情页</div>
+        </div>
+        <div class="testAssistantContentItem">
+          <div>当前组件在此板块中的位置:</div>
+          <div>{{this.$store.state.template.editComponentSort}}</div>
+        </div>
+        <div class="testAssistantContentItem">
+          <div>当前板块在Json数据中的位置:</div>
+          <div>{{this.$store.state.template.editDataSort}}</div>
+        </div>
+        <!--base0.0.1 如果展示原组件样式 会导致删除的时候 找不到content的数据非常奇怪 但是什么都不影响-->
+        <!-- <div class="testAssistantContentItem"><span>原组件样式:</span>{{this.$store.state.template.pageData.index[this.$store.state.template.editDataSort].content.componentList[this.$store.state.template.editComponentSort].component_style}}</div> -->
+        <div class="testAssistantContentItem">
+          <div>当前组件样式:</div>
+          <div>{{this.$store.state.template.editComponentStyle}}</div>
+        </div>
       </div>
     </div>
     <div class="componentStyleBox">

src/views/template/public/editBtn.vue

@@ -43,7 +43,12 @@ export default {
         size:this.size
       }
       console.log(data);
+      //小助手
       this.$store.commit('template/setEditWindowStatus',data);
+      //设置组件回显数据
+      this.$store.commit('template/setComponentViewData',data);
+      //获取全部导航
+      this.$store.dispatch('template/getWebsiteCategory',{pageSize:1000});
     }
   },
   mounted() {

src/views/template/public/editWindow.vue

@@ -8,21 +8,60 @@
           开发助手：当前窗口在正式版本中将被移除。
         </div>
         <div class="testAssistantContent">
-          <div class="testAssistantContentItem"><span>板块id:</span>{{this.$store.state.template.editSectorId}}</div>
-          <div class="testAssistantContentItem"><span>组件位置:</span>{{this.$store.state.template.editComponentSort}}</div>
-          <div class="testAssistantContentItem"><span>Json数据位置:</span>{{this.$store.state.template.editDataSort}}</div>
-          <div class="testAssistantContentItem"><span>数据类型:</span>{{this.$store.state.template.editComponentType}}</div>
-          <div class="testAssistantContentItem"><span>展示条数:</span>{{this.$store.state.template.editComponentSize}}</div>
+          <div class="testAssistantContentItem">
+            <div>当前板块id:</div>
+            <div>{{this.$store.state.template.editSectorId}}</div>
+          </div>
+          <div class="testAssistantContentItem">
+            <div>当前板块所在的页面:</div>
+            <div v-if="this.$store.state.template.pageStatus == 1">首页</div>
+            <div v-if="this.$store.state.template.pageStatus == 2">分类页</div>
+            <div v-if="this.$store.state.template.pageStatus == 3">列表页</div>
+            <div v-if="this.$store.state.template.pageStatus == 4">详情页</div>
+            <div v-if="this.$store.state.template.pageStatus == 5">搜索页</div>
+            <div v-if="this.$store.state.template.pageStatus == 6">自定义列表页</div>
+            <div v-if="this.$store.state.template.pageStatus == 7">自定义详情页</div>
+          </div>
+          <div class="testAssistantContentItem">
+            <div>当前组件在此板块中的位置:</div>
+            <div>{{this.$store.state.template.editComponentSort}}</div>
+          </div>
+          <div class="testAssistantContentItem">
+            <div>当前板块在Json数据中的位置:</div>
+            <div>{{this.$store.state.template.editDataSort}}</div>
+          </div>
+          <div class="testAssistantContentItem">
+            <div>当前组件的数据类型:</div>
+            <div v-if="this.$store.state.template.editComponentType == 1">新闻列表</div>
+            <div v-if="this.$store.state.template.editComponentType == 2">新闻选项卡</div>
+            <div v-if="this.$store.state.template.editComponentType == 3">广告</div>
+            <div v-if="this.$store.state.template.editComponentType == 4">友情链接</div>
+            <div v-if="this.$store.state.template.editComponentType == 6">静态html组件</div>
+            <div v-if="this.$store.state.template.editComponentType == 7">文本</div>
+            <div v-if="this.$store.state.template.editComponentType == 8">评论组件</div>
+          </div>
+          <div class="testAssistantContentItem">
+            <div>展示条数:</div>
+            <div>{{this.$store.state.template.editComponentSize}}</div>
+          </div>
+          <div class="testAssistantContentItem">
+            <div>回显导航池:</div>
+            <div v-if="this.$store.state.template.editComponentType == 1||this.$store.state.template.editComponentType == 2">
+              <span v-if="this.$store.state.template.componentViewData.pid_arr.length == 0">暂未选择导航</span>
+              <span v-else>{{this.$store.state.template.componentViewData.pid_arr}}</span>
+            </div>
+            <div v-else>无需回显</div>
+          </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 :model="form.type1data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
           <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
             <el-input value="新闻列表" disabled/>
           </el-form-item>
           <el-form-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
-            <el-cascader :key="oneParentKey" v-model="form.pid_arr" placeholder="请选择网站导航" :props="oneParentData" filterable clearable></el-cascader>
+            <el-cascader :key="oneParentKey" v-model="form.type1data.pid_arr" placeholder="请选择网站导航" :props="oneParentData" filterable clearable></el-cascader>
           </el-form-item>
           <el-form-item label="显示条数：" :label-width="formLabelWidth" class="custom-align-right">
             <el-input v-model="this.$store.state.template.editComponentSize" placeholder="请输入请求的条数" disabled/>
@@ -35,8 +74,17 @@
           <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
             <el-input value="新闻选项卡" disabled/>
           </el-form-item>
+          <!-- {{ this.$store.state.template.editWebsiteCategory }} -->
           <el-form-item label="网站导航：" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right">
-            <el-cascader :key="moreParentKey" v-model="form.type2data.pid_arr" placeholder="请选择网站导航" :props="moreParentData" filterable clearable></el-cascader>
+            <el-select v-model="form.type2data.pid_arr" multiple placeholder="请选择">
+              <el-option
+                v-for="item in this.$store.state.template.editWebsiteCategory"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+            <!-- <el-cascader :key="moreParentKey" @change="handleCascaderChange" v-model="form.type2data.pid_arr" placeholder="请选择网站导航" :props="moreParentData" filterable clearable></el-cascader> -->
           </el-form-item>
           <el-form-item label="显示条数：" :label-width="formLabelWidth" class="custom-align-right">
             <el-input v-model="this.$store.state.template.editComponentSize" placeholder="请输入请求的条数" disabled/>
@@ -49,8 +97,8 @@
           <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 label="广告位名称：" :label-width="formLabelWidth" prop="adName" class="custom-align-right">
+            <el-input v-model="form.type3data.adName" placeholder="请输入广告位名称"/>
           </el-form-item>
         </el-form>
       </div>
@@ -76,7 +124,7 @@
           <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-form-item label="标题名称：" :label-width="formLabelWidth" prop="titleName" class="custom-align-right">
             <el-input v-model="form.type7data.titleName" placeholder="请输入标题名称"/>
           </el-form-item>
         </el-form>
@@ -98,6 +146,8 @@
 </template>
 
 <script>
+import Vue from 'vue';  // 导入 Vue
+//监听vuex中的值
 export default {
   props: {
 
@@ -121,7 +171,6 @@ export default {
     }
     return {
       formLabelWidth:"120px",
-      
       form:{
         //单导航新闻
         type1data:{
@@ -144,7 +193,8 @@ export default {
       },
       formRules:{
         pid_arr: [{type:'array',required:true,trigger:'blur',message:'必须选择一个导航！',validator:validatePid}],
-        adsName: [{required:true,trigger:'blur',message:'请填写标题名称！',validator:validateEmpty}],
+        adName: [{required:true,trigger:'blur',message:'',validator:validateEmpty}],
+        titleName: [{required:true,trigger:'blur',message:'',validator:validateEmpty}]
       },
       //获取单个导航id start---------------------------------------->
       oneParentKey:0,
@@ -176,51 +226,142 @@ export default {
       },
       //获取单个导航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)
-            }
-          })
-        }
-      },
+      moreParen:[],
+      // base 0.0.1 无法回显多选导航池
+      // 这里不能使用级联选择器，因为这里只能选择同级导航，你选了不同级的导航后端就乱套了
+      // moreParentData: {
+      //   checkStrictly: true,
+      //   multiple: true,
+      //   lazy: true,
+      //   async lazyLoad (node, resolve) {
+      //     const { level, data } = node;
+      //     if (data && data.children && data.children.length !== 0) {
+      //       return resolve(node)
+      //     }
+      //     console.log(level)
+      //     let parentId = level == 0 ? 0 : data.value
+      //     let parames = {
+      //       'pid':parentId
+      //     }
+      //     self.$store.dispatch('pool/categoryList',parames).then(res=> {
+      //       if (res.data) {
+      //         const nodes = res.data.map(item => ({
+      //           value: item.id,
+      //           label: item.name,
+      //           leaf: level >= 3,
+      //           children: []
+      //         }))
+      //         resolve(nodes)
+      //       }
+      //     })
+      //   }
+      // },
       //获取导航id end---------------------------------------->
     };
   },
+  computed: {
+    // 映射 Vuex 的 state 到计算属性
+    // 监听导航池变化用于回显
+    getPid() {
+      return this.$store.state.template.componentViewData.pid_arr;
+    },
+    getadName(){
+      return this.$store.state.template.componentViewData.adName;
+    },
+    gettitleName(){
+      return this.$store.state.template.componentViewData.titleName;
+    }
+  },
+  watch: {
+    getPid(newVal, oldVal) {
+      console.log("导航池改变了！")
+      console.log(newVal, oldVal)
+      // 回显导航池 判断一下是单导航还是多导航
+      if(this.$store.state.template.editComponentType==1){
+        //base0.0.1 必须先赋值再创建nodes 否则可能无法回显
+        this.form.type1data.pid_arr = newVal;
+        this.loadCascaderPath(newVal);
+      }
+      if(this.$store.state.template.editComponentType==2){ 
+        this.form.type2data.pid_arr = newVal;
+      }
+    },
+    getadName(newVal, oldVal) {
+      console.log("广告文字改变了！")
+      console.log(newVal, oldVal)
+      this.form.type3data.adName = newVal;
+    },
+    gettitleName(newVal, oldVal) {
+      console.log("标题文字改变了！")
+      console.log(newVal, oldVal)
+      this.form.type7data.titleName = newVal;
+    } 
+  },
   methods: {
     closeEditWindow(){
       this.$store.commit('template/closeEditWindowStatus');
     },
     submitData(){
+      //验证表单
       this.$refs.form.validate(valid => {
+        //构建提交的数据
+        let data = {
+          id:this.$store.state.template.editSectorId,//组件id
+          sort:this.$store.state.template.editComponentSort,//组件位置
+          dataSort:this.$store.state.template.editDataSort,//数据位置
+          type:this.$store.state.template.editComponentType,//组件类型
+          data:""//提交的数据
+        }
         if (valid) {
-          console.log("保存数据！")
-         
+          //判断当前提交的数据类型
+          //1=普通新闻 2=tabs新闻选项卡 3=广告 4=友情链接 6=静态组件 7=文本 8=评论
+          if(this.$store.state.template.editComponentType == 1){
+            data.data = this.form.type1data;
+          }
+          //2=tabs新闻选项卡
+          if(this.$store.state.template.editComponentType == 2){
+            data.data = this.form.type2data;
+          }
+          //3=广告
+          if(this.$store.state.template.editComponentType == 3){
+            data.data = this.form.type3data;
+          }
+          //7=文本
+          if(this.$store.state.template.editComponentType == 7){
+            data.data = this.form.type7data;
+          }
+          //第二步：提交数据
+          this.$store.commit('template/saveComponentData',data);
+          //第三步：关闭编辑窗口
+          this.$store.commit('template/closeEditWindowStatus');
         }
       })
-    }
+    },
+    //回显级联选择器
+    async loadCascaderPath(path, type) {
+      this.oneParentKey+=1;
+      // 如果是单选类型，path 是普通数组
+      for (let i = 0; i < path.length; i++) {
+        const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
+        const level = i; // 当前层级的索引
+        await this.$store.dispatch('pool/categoryList',{pid:parentId}).then((res)=>{
+          const nodes = res.data.map(item => ({
+            value: item.id,
+            label: item.name,
+            leaf: level >= 4,
+            checked: true
+          }));
+          // 将数据传递到 resolve，通知 cascader 这一层的数据加载完毕
+          if (level === path.length - 1) {
+            this.$nextTick(() => {
+              this.form.type1data.pid_arr = path;
+            });
+          }
+        });
+      }
+    },
   },
-  mounted() {
+  mounted() { 
     
   },
 };

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

@@ -1,7 +1,7 @@
 <template>
   <div :class="['bannerBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div :class="['itemTopBox', {componentBorder: $store.state.template.previewStatus==false}]">
-      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="6" :size="1"/>
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="1"/>
       <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="1"/>
       <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
         <mainTitleStyle1 />