2025-2-24-admin_home

src/api/pool.js

@@ -1,5 +1,110 @@
 import request from '@/utils/request'
 
+
+
+
+//creatNews导航池子级
+
+
+export function get_creatNews_nav_son_api(data) {
+      // console.log("params==",data)
+      return request({
+        url: '/website/getWebsiteNavList',
+        method: 'post',
+        data
+      })
+    }
+
+
+//creatNews导航池
+ 
+export function get_creatNews_nav_api(params) {
+      return request({
+        url: '/website/getWebsiteList',
+        method: 'GET',
+        params
+      })
+    }
+
+
+//标识=获取网站详情==编辑弹出框要显示出这1条数据的内容
+ 
+export function detail_website_tag_api(params) {
+      return request({
+        url: '/website/getWebsiteGroupInfo',
+        method: 'post',
+        params
+      })
+    }
+    
+
+
+
+//编辑其中1条数据 
+export function edit_website_tag_api(params) {
+      // console.log("paramsparams",params)
+      return request({
+        url: '/website/updateWebsiteGroup',
+               
+        method: 'post',
+        params
+      })
+    }
+
+
+
+
+//1.3 查询所有网系==下拉
+export function drop_website_tag_api(params) {
+      // console.log("params==",params)
+      return request({
+        url: '/website/getWebsiteList',
+        method: 'get',
+        params
+      })
+    }
+    
+    
+
+
+
+//添加标识
+ 
+export function add_website_tag_api(data) {
+      return request({
+        url: '/website/addWebsiteGroup',
+        method: 'post',
+        data
+      })
+    }
+
+
+//1.2 删除网站
+export function del_website_tag_arr_api(data) {
+      
+      return request({
+        url: '/website/deleteWebsiteGroup',
+        method: 'post',
+        data
+      })
+    }
+    
+
+
+// 站点标识
+export function get_website_tag_arr_api(params) {
+
+      // console.log("params",params)
+
+  return request({
+    url: '/website/getWebsiteGroupList',
+    
+//     get_website_tag_arr_actions
+    method: 'post',
+    params
+  })
+}
+
 //1.网站管理 start ------------------------------------->
 //1.1 获取网站管理列表 //注意，post请求使用data get请求使用params
 export function getWebList(params) {

src/layout/components/Sidebar/SidebarItem.vue

@@ -8,6 +8,7 @@
           <img v-if="!isNest && onlyOneChild.meta" :src="getIcon(onlyOneChild)" class="sidebar-icon" />
           <span>{{ generateTitle(onlyOneChild.meta.title) }}</span>
         </el-menu-item>
+
       </app-link>
     </template>
 

src/router/index.js

@@ -139,6 +139,25 @@ export const constantRoutes = [
       }
     ]
   },
+  {//站点标识
+    path: '/websiteTag',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/website/websiteTag'),
+        meta: {
+          title: '站点标识',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+
+
+
   {
     path: '/editNavigation',
     component: Layout,

src/store/modules/pool.js

@@ -5,9 +5,18 @@ getCategoryInfo,categoryList,addCategory,updateCategory,
 getNavWebList,addWebsiteCategory,getWebsiteCategoryList,
 getAdminWebsiteCategory,upWebsiteCategory,
 getWebsiteAllCategory,getWebsiteCategoryOnes,upWebsiteCategoryones,
-checkWebsiteUrl,checkWebsiteName} from '@/api/pool'
+checkWebsiteUrl,checkWebsiteName,
+
+get_website_tag_arr_api,del_website_tag_arr_api,edit_website_tag_api,add_website_tag_api,drop_website_tag_api,
+detail_website_tag_api,
+
+get_creatNews_nav_api,get_creatNews_nav_son_api
+
+
+} from '@/api/pool'
 
 const state = {
+      vuex_websiteTag_arr:[]
 
 }
 
@@ -16,9 +25,144 @@ const mutations = {
 }
 
 const actions = {
+
+
+//creatNews导航池子级
+get_creatNews_nav_son_actions({commit},data) {
+            return new Promise((resolve, reject) => {
+                  
+                  // console.log("vuex=====",data)
+                  get_creatNews_nav_son_api(data).then(response => {
+
+                        // console.log("vuex==response==",response)
+
+
+                        resolve(response)
+                  }).catch(error => {
+                        reject(error)
+                  })
+            })
+},
+
+
+//creatNews导航池
+      get_creatNews_nav_actions({commit},data) {
+            return new Promise((resolve, reject) => {
+            get_creatNews_nav_api(data).then(response => {
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    
+
+
+
+
+
+      // 站点标识
+//获取站点标识列表
+get_website_tag_arr_actions({commit},data) {
+      //     console.log("data==",data)  
+          return new Promise((resolve, reject) => {
+            get_website_tag_arr_api(data).then(response => {
+               
+              resolve(response)
+            }).catch(error => {
+              reject(error)
+            })
+          })
+        },
+      
+
+//标识=获取网站详情==编辑弹出框要显示出这1条数据的内容
+detail_website_tag_actions({commit},data) {
+      console.log("data==",data)
+    return new Promise((resolve, reject) => {
+      detail_website_tag_api(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  
+ 
+//标识==修改网站
+
+edit_website_tag({commit},data) {
+      return new Promise((resolve, reject) => {
+       edit_website_tag_api(data).then(response => {
+            resolve(response)
+                }).catch(error => {
+            reject(error)
+                  })
+            })
+      },
+
+
+
+
+//获得所有——标识-下拉
+
+drop_website_tag_actions({commit},data) {
+      // console.log("data==",data)
+      return new Promise((resolve, reject) => {
+            drop_website_tag_api(data).then(response => {
+
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    
+
+
+      //添加网站
+      add_website_tag_actions({commit},data) {
+            return new Promise((resolve, reject) => {
+                  add_website_tag_api(data).then(response => {
+            resolve(response)
+            }).catch(error => {
+            reject(error)
+            })
+            })
+    },
+    
+
+
+
+
+
+
+ 
+      // 站点标识
+//删除=站点标识列表
+del_website_tag_arr_actions({commit},data) {
+      return new Promise((resolve, reject) => {
+            del_website_tag_arr_api(data).then(response => {
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    
+
+
+
+
+
+
+
   //1.网站列表 end ---------------------------------------->
   //获取网站管理列表
   getWebList({commit},data) {
+//      console.log("data==",data) 
+//      console.log("commit==",commit) 
+
     return new Promise((resolve, reject) => {
       getWebList(data).then(response => {
         resolve(response)
@@ -27,6 +171,7 @@ const actions = {
       })
     })
   },
+
   //删除网站列表中的网站
   deleteWebList({commit},data) {
     return new Promise((resolve, reject) => {
@@ -37,6 +182,7 @@ const actions = {
       })
     })
   },
+
   //获得所有网系
   getwebsiteColumn({commit},data) {
     return new Promise((resolve, reject) => {
@@ -47,6 +193,7 @@ const actions = {
       })
     })
   },
+
   //获取城市列表
   getcityList({commit},data) {
     return new Promise((resolve, reject) => {
@@ -87,8 +234,10 @@ const actions = {
       })
     })
   },
+
   //获取网站详情
   getWebsiteInfo({commit},data) {
+      console.log("data==",data)
     return new Promise((resolve, reject) => {
       getWebsiteInfo(data).then(response => {
         resolve(response)
@@ -97,6 +246,7 @@ const actions = {
       })
     })
   },
+
   //修改网站
   updateWebsite({commit},data) {
     return new Promise((resolve, reject) => {
@@ -170,6 +320,11 @@ const actions = {
       })
     })
   },
+
+
+
+
+
   //获取父级导航
   categoryList({commit},data) {
     return new Promise((resolve, reject) => {
@@ -180,6 +335,10 @@ const actions = {
       })
     })
   },
+
+
+
+
   //添加导航池
   addCategory({commit},data) {
     return new Promise((resolve, reject) => {
@@ -190,6 +349,7 @@ const actions = {
       })
     })
   },
+
   //更新导航池
   updateCategory({commit},data) {
     return new Promise((resolve, reject) => {

src/store/modules/public.js

@@ -6,10 +6,16 @@ import {getDepartmentList,delDepartment,getDepartmentMain,
 import {login,logoutapi} from '@/api/unifiedLogin'
 
 const state = {
-
+      vuex_user_type:""
 }
 
 const mutations = {
+      get_vuex_user_type_mutations(state,recive_obj){
+            // console.log("get_vuex_user_type_mutations==",recive_obj)
+            state.vuex_user_type=recive_obj
+            // console.log("state.vuex_user_type",state.vuex_user_type)
+
+      }
 
 }
 
@@ -53,6 +59,16 @@ const actions = {
   getInfo({commit},data) {
     return new Promise((resolve, reject) => {
       getInfo(data).then(response => {
+
+            commit("get_vuex_user_type_mutations",response.data.type_id)
+
+
+
+
+
+            // vuex_type_id=response
+            // console.log("ajax==",response.data.type_id)
+
         resolve(response)
       }).catch(error => {
         reject(error)

src/utils/baseUrl.js

@@ -1,10 +1,12 @@
 const URL = {
   //baseUrl: 'https://admin.bjzxtw.org.cn/zxtapi',//正式环境
-  baseUrl: 'http://116.131.8.26:9501',//正式环境
+//   baseUrl: 'http://116.131.8.26:9501',//正式环境
   //baseUrl: 'http://183.131.25.186:9501',//测试环境
   //baseUrl: 'http://192.168.1.201:9501',//刘佳伟本地环境
   //baseUrl:'http://192.168.1.115:9501',//冯蕊的本地环境
-  //baseUrl: 'http://192.168.1.127:9501',//刘剑的本地环境
+    baseUrl: 'http://192.168.1.127:9501',//刘剑的本地环境
+
+  
   //WebsocketUrl: 'ws://192.168.1.201:9506',//刘佳伟websocket地址
   WebsocketUrl: 'ws://192.168.1.127:9506'//刘剑websocket地址
 }

src/views/dashboard/admin/index.vue

@@ -128,7 +128,7 @@ export default {
     }
   },
   methods: {
-    //获取用户身份信息
+    //获取用户身份信息xx
     getUserInfo(fun){
       this.$store.dispatch('public/getInfo').then(res=> {
         console.log(res)

src/views/news/creatNews.vue

@@ -16,6 +16,7 @@
             <el-input v-model="form.title" autocomplete="off" placeholder="请输入资讯标题"></el-input>
             <el-checkbox v-model="form.islink">是否使用外链</el-checkbox>
           </el-form-item>
+
           <div v-if="form.islink==true"> 
             <el-form-item label="导航池名称：" prop="cat_arr_id" class="custom-align-right">
               <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData" filterable clearable></el-cascader>
@@ -27,19 +28,43 @@
               <el-input v-model="form.author" autocomplete="off" placeholder="请输入作者"></el-input>
             </el-form-item>
           </div>
+
           <div v-if="form.islink==false">
-            <el-form-item label="导航池名称：" prop="cat_arr_id" class="custom-align-right">
-              <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData" filterable clearable></el-cascader>
-            </el-form-item>  
-            <el-form-item label="推荐等级：" class="custom-align-right">
-              <el-select v-model="form.level" placeholder="请选择推荐等级..">
-                <el-option label="头条" :value="1"></el-option>
-                <el-option label="轮播图" :value="2"></el-option>
-                <el-option label="推荐图" :value="3"></el-option>
-                <el-option label="热点资讯" :value="4"></el-option>
-                <el-option label="资讯推荐" :value="5"></el-option>
-              </el-select>
-            </el-form-item>
+                  
+                  <!-- xx   creatNews_nav_pool_arr1   -->
+
+                  <el-form-item label="站点名称:" prop="cat_arr_id" class="custom-align-right">
+                        <el-cascader :key="parentKey" v-model="form.web_site_id" placeholder="请选择站点名称" :options="creatNews_nav_pool_arr" @change="creatNews_nav_pool_change_fun(form.web_site_id)" filterable clearable></el-cascader>
+                  </el-form-item>  
+
+                  <!-- <el-form-item label="导航池名称:" class="custom-align-right">
+                        <el-cascader placeholder="请选择要绑定的子级导航" v-model="form.nav_add_pool_id" :options="creatNews_add_nav_pool_arr" :props="{ checkStrictly:true}" @change="creatNews_nav_add_pool_change_fun()" filterable clearable>
+                        </el-cascader>
+                  </el-form-item>   -->
+
+
+                  <!-- {{creatNews_nav_pool_arr}}
+                  {{test_num}}
+                  <input class="_btn" name="" type="button" value="11" @click="test_fun()">
+                  {{creatNews_add_nav_pool_arr}} -->
+                  
+                   <el-form-item label="导航池名称：" prop="cat_arr_id" class="custom-align-right">
+                        <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData_2" filterable clearable></el-cascader>
+                               <!-- <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData" @change="creatNews_nav_son_pool_change_fun()" filterable clearable></el-cascader> -->
+                  </el-form-item>  
+                  
+
+
+                  <el-form-item label="推荐等级：" class="custom-align-right">
+                              <el-select v-model="form.level" placeholder="请选择推荐等级..">
+                                          <el-option label="头条" :value="1"></el-option>
+                                          <el-option label="轮播图" :value="2"></el-option>
+                                          <el-option label="推荐图" :value="3"></el-option>
+                                          <el-option label="热点资讯" :value="4"></el-option>
+                                          <el-option label="资讯推荐" :value="5"></el-option>
+                              </el-select>
+                  </el-form-item>
+
             <el-form-item label="缩略图：" class="custom-align-right" prop="imgUrl" v-if="form.level==2||form.level==3">
               <div class="uploaderBox">
                 <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
@@ -199,40 +224,66 @@ export default {
       }
     }
     let self = this;
-    //0.全局操作 end ------------------------------------------------------------>
+    //0.全局操作xx end ------------------------------------------------------------>
     return {
-      //1.表单项 start ------------------------------------------------------------>
-      editStatus:false,
-      tableDivTitle:"添加资讯",
+      // creatNews_nav_pool_arr1:[ { "label": "农网", "value": 1, "pid": 0, "sort": 1, "remark": "农网栏目信息", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 09:28:19", "children": [ { "label": "核心网站(行星)", "value": 3, "pid": 1, "sort": 1, "remark": "核心网站", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:31:26" }, { "label": "重点网系(卫星)", "value": 4, "pid": 1, "sort": 1, "remark": "重点网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:06" }, { "label": "垂直网系(卫星)", "value": 5, "pid": 1, "sort": 1, "remark": "垂直网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:43" }, { "label": "频道网系(卫星)", "value": 6, "pid": 1, "sort": 1, "remark": "频道网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:19" }, { "label": "地方网系(卫星)", "value": 7, "pid": 1, "sort": 1, "remark": "地方网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:44" } ] } ],//xx
+       
+
+
+      creatNews_pid_num:"11",//请求子导航用的pid
+      creatNews_nav_pool_arr:[],//
+      creatNews_add_nav_pool_arr:[],//
+      creatNews_son_website_id_num:"",
+
+      // creatNews_nav_pool_arr2:
+       
+       
+       tableDivTitle:"添加资讯",
       disclaimer:true,//免责声明
       //提交表单
+      
+        test_num:11,
+        creatNews_user_type:this.$store.state.public.vuex_user_type,//判断用户类型xx'
+         
+      //xx
       form: {
-        //1.1使用了外链
-        title: '',//资讯标题
-        islink:0,//是否使用外链 0非 1是
-        linkurl:"",//外链地址
-        //1.2没有使用外链
-        cat_arr_id:'',//导航池名称
-        level:"",//推荐等级
-        imgurl:"",//缩略图
-        keyword:"",//关键词
-        introduce:"",//描述
-        content:"",//内容
-        author:"",//作者
-        hits:"",//浏览量
-        is_original:0,//是否为原创 0非 1是
-        copyfrom:"",//来源名称
-        fromurl:"",//来源地址
-        status:0//状态 0待发布 1已发布 404已删除
+            user_type:"??",//判断用户类型'
+            cat_arr_id:0,//导航池名称
+            nav_add_pool_id:[],//导航池子级
+
+
+            
+            //1.1使用了外链
+            title: '',//资讯标题
+            islink:0,//是否使用外链 0非 1是
+            linkurl:"",//外链地址
+            //1.2没有使用外链
+            // cat_arr_id:'',//导航池名称
+            level:"",//推荐等级
+            imgurl:"",//缩略图
+            keyword:"",//关键词
+            introduce:"",//描述
+            content:"",//内容
+            author:"",//作者
+            hits:"",//浏览量
+            is_original:0,//是否为原创 0非 1是
+            copyfrom:"",//来源名称
+            fromurl:"",//来源地址
+            status:0,//状态 0待发布 1已发布 404已删除
+            web_site_id:0
+
       },
       //1.2 表单验证规则
       formRules: {
+            
+            //导航池名称不能为空
+            cat_arr_id:[{required:true,trigger:'blur',validator:validateArray}],
+            
         //资讯名称不能为空
         title:[{required:true,trigger:'blur',validator:validateEmpty}],
         //如果使用了外链，外链地址不能为空
         linkurl:[{required:true,trigger:'blur',validator:validateEmpty}],
-        //导航池名称不能为空
-        cat_arr_id:[{required:true,trigger:'blur',validator:validateArray}],
+
         //推荐等级不能为空
         //level:[{required:true,trigger:'blur',validator:validateEmpty}],
         //关键词不能为空
@@ -296,11 +347,14 @@ export default {
       //1.4图片上传
       imgUrl:"",//在页面上显示缩略图
       //获取父级导航池
-      parentKey:0,//获取父级导航
+      parentKey:0,//获取父级导航 xx
+
       parentData: {
+
         checkStrictly: true,
         lazy: true,
         async lazyLoad (node, resolve) {
+
           const { level, data } = node;
           if (data && data.children && data.children.length !== 0) {
             return resolve(node)
@@ -323,10 +377,68 @@ export default {
           })
         }
       },
+       
+      
+      parentData_2: {
+        checkStrictly: true,
+        lazy: true,
+        async lazyLoad (node, resolve) {
+          const { level, data } = node;
+          if (data && data.children && data.children.length !== 0) {
+            return resolve(node)
+          }
+          console.log(level)
+
+          console.log("111222333===========")
+          console.log(self.creatNews_pid_num)
+          console.log("data==",data)
+          console.log("111222333===========")
+          let parentId;
+         
+          if(data){
+            parentId = level == data.value;
+             
+
+          }else{ 
+            parentId = level == self.creatNews_pid_num.toString() ;
+          }
+          
+          let parames = {
+            'website_id':self.form.web_site_id,
+            'pid':parentId
+          }
+                              //  pool/get_creatNews_nav_son_actions
+      //     self.$store.dispatch('pool/categoryList',parames).then(res=> {
+          self.$store.dispatch('pool/get_creatNews_nav_son_actions',parames).then(res=> {
+            if (res.data) {
+              const nodes = res.data.map(item => ({
+                value: item.id,
+                label: item.name,
+                leaf: level >= 3,
+                children: []
+              }))
+              resolve(nodes)
+            }
+          })
+        }
+      },
+
+
+
       //表单项 end ------------------------------------------------------------>
     };
   },
   methods: {
+
+      creatNews_nav_son_pool_change_fun(){//第2个change xx
+            console.log("this.cat_arr_id====",this.form.cat_arr_id)
+            console.log("this.creatNews_add_nav_pool_arr==",this.creatNews_add_nav_pool_arr)
+            
+
+        },
+
+
+
     //1.提交表单 start ------------------------------------------------------------>
     //1.1 直接上传图片
     beforeAvatarUpload(file) {
@@ -650,11 +762,189 @@ export default {
           }
         });
       }
-    }
+    },
     //富文本编辑器 end ------------------------------------------------------------>
 
+
+            
+    get_creatNews_form_id_fun(){//判断用户类型ajax
+            // console.log("this.form.user_type==1",this.form.author)
+            this.$store.dispatch('public/getInfo').then(res=> {
+                  //     console.log("res======",res)
+                  this.form.user_type = res.data.type_id;
+                  //  console.log("this.userType==ajax",this.form)
+                  //  console.log("this.userType==ajax",this.form.user_type)
+                  //if(res.data.type_id==10000){}//管理员xx
+                  //if(res.data.type_id==4){}//调研员
+                  //个人会员=1 政务会员=2 企业会员=3 调研员=4 管理员=10000 游客=20000
+                  }).catch(() => {
+                        this.$message({
+                              type: 'info',
+                              message: '网络错误，请重试！'
+                        });
+                  })
+            
+       
+                  // console.log("this.form.user_type==",this.form);
+                  // console.log("this.form.user_type==2",this.form.user_type);
+         
+      },
+
+      get_creatNews_nav_pool_arr_fun(){//xx
+            this.$store.dispatch('pool/get_creatNews_nav_actions',{page:1,pageSize:666666}).then(res=> {
+                   
+                  console.log("page:1,pageSize:666666=====",res.data.rows)
+                  res.data.rows.forEach(( per_obj ) => { 
+
+                        let new_per = {
+                              label: per_obj.website_name,
+                              value: per_obj.id,
+                        }
+
+                        this.creatNews_nav_pool_arr.push( new_per )
+
+                  })
+                  // console.log("this.creatNews_nav_pool_arr====",res)
+                  // console.log("this.creatNews_nav_pool_arr====",this.creatNews_nav_pool_arr)
+
+            }).catch(() => {
+              this.$message({
+                type: 'info',
+                message: '网络错误，请重试！'
+              });
+            })
+
+      },
+
+
+
+
+      creatNews_nav_pool_change_fun(){  
+            //xx  导航池级
+              
+            // console.log("this.form.cat_arr_id",this.form.cat_arr_id)
+
+            // const website_id_num = this.form.web_site_id[0]
+            this.form.web_site_id = this.form.web_site_id[0]
+            console.log("选中值：web_site_id====",this.form.web_site_id)
+            console.log("选中值：creatNews_pid==", this.creatNews_pid_num) 
+
+
+            this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:String(this.creatNews_pid_num),website_id:String(this.form.web_site_id)}).then(res=> {
+            // this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:"11",website_id:"2"}).then(res=> {
+                   console.log("change==1=========",res.data)
+                  // console.log("son=========",res.data.length)
+                   
+                  if(res.data.length==0){//没有导航池子级
+                        alert("没有导航池子级");
+                        return
+                  }
+
+                  this.creatNews_add_nav_pool_arr=res.data
+
+                  this.creatNews_add_nav_pool_arr.forEach(( per_obj ) => { 
+ 
+                        per_obj.label=per_obj.name, 
+                        per_obj.value=per_obj.id,
+                              // this.creatNews_add_nav_pool_arr.push( new_per ) 
+                              this.creatNews_pid_num=per_obj.category_id
+                              
+                  })
+ 
+
+            }).catch(() => {
+              this.$message({
+                type: 'info',
+                message: '网络错误，请重试！'
+              });
+            })
+
+
+      },
+
+
+
+      // this.$store.dispatch('pool/uploadFile',formData).then(res=> {
+      //   this.imgUrl = res.data.imgUrl;//显示缩略图
+      //   this.form.imgurl = res.data.imgUrl;//提供表单地址
+      //   console.log(res.data.imgUrl)
+      // }).catch(() => {
+      //   this.$message({
+      //     type: 'info',
+      //     message: '网络错误，请重试！'
+      //   });
+      // })
+
+      test_fun(){//xx
+             console.log("test====",this.creatNews_nav_pool_arr)
+             this.test_num=this.test_num+1
+      },
+
+      //导航池子级=发生变化
+      // creatNews_nav_add_pool_change_fun(){ 
+      //       // this.form.nav_add_pool_id
+
+      //       console.log("this.form.nav_add_pool_idthis.form.nav_add_pool_id==",this.form.nav_add_pool_id[0])
+      //       console.log("creatNews_son_website_id_num==",this.creatNews_son_website_id_num)
+            
+             
+             
+      //       // this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:String(this.form.nav_add_pool_id[0]),website_id:String(this.form.cat_arr_id[0])}).then(res=> {
+      //       this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:"436",website_id:"2"}).then(res=> {
+
+      //             console.log("son======222",res.data)
+
+                   
+                   
+      //             if(res.data.length==0){//没有导航池子级
+      //                   return
+      //             }
+
+
+      //             res.data.forEach(( per_obj ) => { 
+
+      //                         let new_per = {
+      //                               label: per_obj.name,
+
+      //                               value: per_obj.id,
+      //                               website_id: per_obj.website_id,
+      //                         }
+
+      //                         this.creatNews_add_nav_pool_arr.push( new_per ) 
+      //             })
+ 
+      //            console.log("this.creatNews_add_nav_pool_arr") 
+
+
+
+      //       }).catch(() => {
+      //         this.$message({
+      //           type: 'info',
+      //           message: '网络错误，请重试！'
+      //         });
+      //       })
+
+
+      // },
+
+
+  },
+
+  created(){
+        
+      
   },
+   
+   
   mounted(){
+
+      
+      this.get_creatNews_form_id_fun()//xx
+      this.get_creatNews_nav_pool_arr_fun()//
+      
+      // console.log("form.cat_arr_id==",this.form.cat_arr_id.length)
+
+
     //1.判断是新建还是回显
     if(this.$route.query.id!=undefined){
       this.editId = this.$route.query.id;
@@ -701,7 +991,11 @@ export default {
 
     });
     //复制富文本 end ------------------------------------------------------------>
+ 
   },
+
+  
+
 };
 </script>
 

src/views/news/creatNews_2.vue

@@ -0,0 +1,1044 @@
+<template>
+  <div class="mainBox">
+    <div class="layerBox">
+      <tableTitle :name="tableDivTitle"/>
+      <el-form :model="form" ref="form" :rules="formRules" label-position="left" label-width="120px">
+        <div class="formDiv">
+          <el-form-item label="资讯题目：" prop="title" class="custom-align-right">
+            <template #label>
+              <span class="askBox">
+                资讯题目：
+                <el-tooltip class="item" effect="dark" content="资讯标题，如：三农市场网_网站列表_全国信息一体化网络平台_项目大全。" placement="top">
+                  <i class="el-icon-question"></i>
+                </el-tooltip>
+              </span>
+            </template>
+            <el-input v-model="form.title" autocomplete="off" placeholder="请输入资讯标题"></el-input>
+            <el-checkbox v-model="form.islink">是否使用外链</el-checkbox>
+          </el-form-item>
+
+          <div v-if="form.islink==true"> 
+            <el-form-item label="导航池名称：" prop="cat_arr_id" class="custom-align-right">
+              <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData" filterable clearable></el-cascader>
+            </el-form-item>
+            <el-form-item label="外链地址：" prop="linkurl" class="custom-align-right">
+              <el-input v-model="form.linkurl" autocomplete="off" placeholder="请输入外链地址"></el-input>
+            </el-form-item>
+            <el-form-item label="作者：" prop="author" class="custom-align-right">
+              <el-input v-model="form.author" autocomplete="off" placeholder="请输入作者"></el-input>
+            </el-form-item>
+          </div>
+
+          <div v-if="form.islink==false">
+                  
+                  <!-- xx   creatNews_nav_pool_arr1   -->
+
+                  <el-form-item label="站点名称:" prop="cat_arr_id" class="custom-align-right">
+                        <el-cascader :key="parentKey" v-model="form.web_site_id" placeholder="请选择站点名称" :options="creatNews_nav_pool_arr" @change="creatNews_nav_pool_change_fun(form.web_site_id)" filterable clearable></el-cascader>
+                  </el-form-item>  
+
+                  <!-- <el-form-item label="导航池名称:" class="custom-align-right">
+                        <el-cascader placeholder="请选择要绑定的子级导航" v-model="form.nav_add_pool_id" :options="creatNews_add_nav_pool_arr" :props="{ checkStrictly:true}" @change="creatNews_nav_add_pool_change_fun()" filterable clearable>
+                        </el-cascader>
+                  </el-form-item>   -->
+
+
+                  <!-- {{creatNews_nav_pool_arr}}
+                  {{test_num}}
+                  <input class="_btn" name="" type="button" value="11" @click="test_fun()">
+                  {{creatNews_add_nav_pool_arr}} -->
+                  
+                   <el-form-item label="导航池名称：" prop="cat_arr_id" class="custom-align-right">
+                        <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData_2" filterable clearable></el-cascader>
+                               <!-- <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData" @change="creatNews_nav_son_pool_change_fun()" filterable clearable></el-cascader> -->
+                  </el-form-item>  
+                  
+
+
+                  <el-form-item label="推荐等级：" class="custom-align-right">
+                              <el-select v-model="form.level" placeholder="请选择推荐等级..">
+                                          <el-option label="头条" :value="1"></el-option>
+                                          <el-option label="轮播图" :value="2"></el-option>
+                                          <el-option label="推荐图" :value="3"></el-option>
+                                          <el-option label="热点资讯" :value="4"></el-option>
+                                          <el-option label="资讯推荐" :value="5"></el-option>
+                              </el-select>
+                  </el-form-item>
+
+            <el-form-item label="缩略图：" class="custom-align-right" prop="imgUrl" v-if="form.level==2||form.level==3">
+              <div class="uploaderBox">
+                <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
+                  <!-- <img v-if="imgUrl" :src="imgUrl" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                  <!-- 预览图片 -->
+                  <img v-if="imgUrl" :src="imgUrl" class="avatar">
+                  <!-- 上传图标 -->
+                  <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                  <div v-else class="chooseImgDiv">
+                    <div>
+                      <img src="@/assets/public/upload/noImage.png">
+                      <div>选择图片</div>
+                    </div>
+                  </div>
+                </el-upload>
+              </div>
+            </el-form-item>
+            <el-form-item label="缩略图：" class="custom-align-right" v-else>
+              <div class="uploaderBox">
+                <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
+                  <!-- <img v-if="imgUrl" :src="imgUrl" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                  <!-- 预览图片 -->
+                  <img v-if="imgUrl" :src="imgUrl" class="avatar">
+                  <!-- 上传图标 -->
+                  <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                  <div v-else class="chooseImgDiv">
+                    <div>
+                      <img src="@/assets/public/upload/noImage.png">
+                      <div>选择图片</div>
+                    </div>
+                  </div>
+                </el-upload>
+              </div>
+            </el-form-item>
+            <el-form-item label="资讯关键词：" prop="keyword" class="custom-align-right">
+              <template #label>
+                <span class="askBox">
+                  资讯关键词：
+                  <el-tooltip class="item" effect="dark" content="资讯关键词，如：三农市场网、全国三农、信息一体化。" placement="top">
+                    <i class="el-icon-question"></i>
+                  </el-tooltip>
+                </span>
+              </template>
+              <el-input v-model="form.keyword" autocomplete="off" placeholder="请输入资讯关键词"></el-input>
+            </el-form-item>
+            <el-form-item label="资讯描述：" prop="introduce" class="custom-align-right">
+              <template #label>
+                <span class="askBox">
+                  资讯描述：
+                  <el-tooltip class="item" effect="dark" content="资讯描述，如：中国三农市场网创建以来，社会效益和会员经济效益贡献。" placement="top">
+                    <i class="el-icon-question"></i>
+                  </el-tooltip>
+                </span>
+              </template>
+              <el-input type="textarea" v-model="form.introduce" class="custom-textarea" placeholder="请输入资讯描述"></el-input>
+            </el-form-item>
+            <div class="QuillTitle">
+              <span>* </span>资讯内容：
+              <div @click="toggleSourceMode" class="QuillModelBtn">
+                {{ showHtml ? '切换到编辑模式' : '切换到源码模式' }}
+              </div>
+            </div>
+            <el-form-item label="" prop="content">
+              <div class="editor-container">
+                <div v-if="showHtml">
+                  <textarea v-model="editorHtml" style="width: 100%; height: 400px;"></textarea>
+                </div>
+                <div v-else>
+                  <quill-editor ref="quillEditor" v-model="form.content" :options="editorOptions" class="my-quill-editor"/>
+                </div>
+                <!-- 多图上传隐藏的input -->
+                <input type="file" ref="multiFileInput" @change="handleMultipleFiles" multiple hidden accept="image/jpeg, image/png" />
+              </div>
+            </el-form-item>
+            <el-form-item label="作者：" prop="author" class="custom-align-right">
+              <el-input v-model="form.author" autocomplete="off" placeholder="请输入作者"></el-input>
+            </el-form-item>
+            <el-form-item label="浏览量：" class="custom-align-right">
+              <el-input v-model="form.hits" autocomplete="off" placeholder="请输入浏览量"></el-input>
+            </el-form-item>
+            <el-form-item label="是否为原创：" prop="is_original" class="custom-align-right">
+              <el-radio-group v-model="form.is_original">
+                <el-radio :label="1">是</el-radio>
+                <el-radio :label="0">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <div v-if="form.is_original==0">
+              <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>
+              <div class="disclaimerBox">
+                <div class="disclaimerTitle">
+                  <img src="@/assets/public/check.png"/>同意《免责声明》：
+                  <!-- <el-checkbox v-model="disclaimer" disabled="disabled"></el-checkbox> -->
+                </div>
+                <div class="disclaimerText">本文来源于网络转载，仅供学习交流使用，不构成商业目的。版权归作者所有，如涉及原作者所有，如涉及作品内容、版权和其他问题，请在30日内与本站联系，我们将在第一时间处理。</div>
+              </div>
+            </div>
+            <el-form-item label="资讯状态：" class="custom-align-right" style="width: 100%;">
+              <el-select v-model="form.status" placeholder="请选择..">
+                <el-option label="已发布" :value="1"></el-option>
+                <el-option label="待发布" :value="0"></el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+        </div>
+      </el-form>
+    </div>
+    <div class="bottomBtnBox">
+      <el-button type="info" @click="returnPage">返回</el-button>
+      <el-button type="primary" @click="editToServe" v-if="editStatus==true">确定</el-button>
+      <el-button type="primary" @click="addToServe" v-else>发布资讯</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle';
+//引入公用样式
+import '@/styles/global.less';
+
+import { quillEditor } from 'vue-quill-editor';
+import 'quill/dist/quill.snow.css';
+import ImageResize from 'quill-image-resize-module';
+import Quill from 'quill';  // 引入 Quill
+import Delta from 'quill-delta'; // 引入 Delta，用于手动修改文档
+
+// 注册 Image Resize 模块
+Quill.register('modules/imageResize', ImageResize);
+
+export default {
+  components: {
+    quillEditor,
+    tableTitle
+  },
+  data() {
+    //0.全局操作 start ------------------------------------------------------------>
+    //表单验证
+    const validateEmpty = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    const validateArray = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    let self = this;
+    //0.全局操作xx end ------------------------------------------------------------>
+    return {
+      // creatNews_nav_pool_arr1:[ { "label": "农网", "value": 1, "pid": 0, "sort": 1, "remark": "农网栏目信息", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 09:28:19", "children": [ { "label": "核心网站(行星)", "value": 3, "pid": 1, "sort": 1, "remark": "核心网站", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:31:26" }, { "label": "重点网系(卫星)", "value": 4, "pid": 1, "sort": 1, "remark": "重点网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:06" }, { "label": "垂直网系(卫星)", "value": 5, "pid": 1, "sort": 1, "remark": "垂直网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:43" }, { "label": "频道网系(卫星)", "value": 6, "pid": 1, "sort": 1, "remark": "频道网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:19" }, { "label": "地方网系(卫星)", "value": 7, "pid": 1, "sort": 1, "remark": "地方网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:44" } ] } ],//xx
+       
+
+
+      creatNews_pid_num:11,//请求子导航用的pid
+      creatNews_nav_pool_arr:[],//
+      creatNews_add_nav_pool_arr:[],//
+      creatNews_son_website_id_num:"",
+
+      // creatNews_nav_pool_arr2:
+       
+       
+       tableDivTitle:"添加资讯",
+      disclaimer:true,//免责声明
+      //提交表单
+      
+        test_num:11,
+        creatNews_user_type:this.$store.state.public.vuex_user_type,//判断用户类型xx'
+         
+      //xx
+      form: {
+            user_type:"??",//判断用户类型'
+            cat_arr_id:0,//导航池名称
+            nav_add_pool_id:[],//导航池子级
+
+
+            
+            //1.1使用了外链
+            title: '',//资讯标题
+            islink:0,//是否使用外链 0非 1是
+            linkurl:"",//外链地址
+            //1.2没有使用外链
+            // cat_arr_id:'',//导航池名称
+            level:"",//推荐等级
+            imgurl:"",//缩略图
+            keyword:"",//关键词
+            introduce:"",//描述
+            content:"",//内容
+            author:"",//作者
+            hits:"",//浏览量
+            is_original:0,//是否为原创 0非 1是
+            copyfrom:"",//来源名称
+            fromurl:"",//来源地址
+            status:0,//状态 0待发布 1已发布 404已删除
+            web_site_id:0
+
+      },
+      //1.2 表单验证规则
+      formRules: {
+            
+            //导航池名称不能为空
+            cat_arr_id:[{required:true,trigger:'blur',validator:validateArray}],
+            
+        //资讯名称不能为空
+        title:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //如果使用了外链，外链地址不能为空
+        linkurl:[{required:true,trigger:'blur',validator:validateEmpty}],
+
+        //推荐等级不能为空
+        //level:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //关键词不能为空
+        keyword:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //描述不能为空
+        introduce:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //内容不能为空
+        content:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //作者不能为空
+        author:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //是否原创不能为空
+        is_original:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //来源名称和地址不能为空
+        copyfrom:[{required:true,trigger:'blur',validator:validateEmpty}],
+        fromurl:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //缩略图不能为空
+        imgUrl:[{required:true,trigger:'blur',validator:validateEmpty}]
+      },
+      //1.3富文本编辑器配置
+      showHtml: false, //用于保存源码内容
+      editorHtml: '',
+      editorOptions: {
+        placeholder: '请输入内容...',
+        theme: 'snow',  // 主题样式
+        modules: {
+          toolbar: {
+            container: [
+              [{ 'font': [] }],                                // 字体
+              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],       // 标题
+              [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
+              ['bold', 'italic', 'underline', 'strike'],        // 加粗、斜体、下划线、删除线
+              [{ 'color': [] }, { 'background': [] }],          // 文字颜色、背景颜色
+              [{ 'script': 'sub' }, { 'script': 'super' }],     // 上标、下标
+              [{ 'list': 'ordered'}, { 'list': 'bullet' }],     // 列表
+              [{ 'indent': '-1'}, { 'indent': '+1' }],          // 缩进
+              [{ 'align': [] }],                                // 对齐方式
+              ['blockquote', 'code-block'],                     // 引用、代码块
+              ['link', 'image', 'video'],                       // 链接、图片、视频
+              ['clean'],
+              [{ 'html': true }]  // 添加自定义按钮的占位符
+            ],
+            handlers: {
+              image: () => {
+                this.handleImageClick();
+              },
+              showHtml: function() {
+                this.$emit('toggleSourceMode');
+              }
+            }
+          },
+          imageResize: {
+            displayStyles: {
+              backgroundColor: 'black',
+              border: 'none',
+              color: 'white'
+            },
+            modules: ['Resize', 'DisplaySize', 'Toolbar']  // 启用不同的调整方式
+          }
+        }
+      },
+      //1.4图片上传
+      imgUrl:"",//在页面上显示缩略图
+      //获取父级导航池
+      parentKey:0,//获取父级导航 xx
+
+      parentData: {
+
+        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)
+            }
+          })
+        }
+      },
+      
+      parentData_2: {
+
+        checkStrictly: true,
+        lazy: true,
+        async lazyLoad (node, resolve) {
+            const { level, data } = node;
+                  //     if (data && data.children && data.children.length !== 0) {
+                  //       return resolve(node)
+                  //     }
+                  //     console.log(level)
+                  //let parentId = level == 11;
+                        
+                  //     console.log("this.creatNews_pid_num=",this.form.creatNews_pid_num)
+
+                  let parentId = level == 0 ? 0 : data.value
+                  let parames = {
+                        // 'pid':parentId,
+                        'pid':self.creatNews_pid_num,
+
+                        'website_id':self.form.web_site_id
+
+                        // 'pid':"11",
+                        // 'website_id':"2"
+
+
+                  }
+            //     console.log("paramesparamesparamesparames_xx",parames)
+
+          self.$store.dispatch('pool/get_creatNews_nav_son_actions',parames).then(res=> {
+            if (res.data) {
+              const nodes = res.data.map(item => ({
+                value: item.id,
+                label: item.name,
+                leaf: level >= 3,
+                children: []
+              }))
+              resolve(nodes)
+            }
+          })
+        }
+      },
+
+
+
+
+      //表单项 end ------------------------------------------------------------>
+    };
+  },
+  methods: {
+
+      creatNews_nav_son_pool_change_fun(){//第2个change xx
+            console.log("this.cat_arr_id====",this.form.cat_arr_id)
+            console.log("this.creatNews_add_nav_pool_arr==",this.creatNews_add_nav_pool_arr)
+            
+
+        },
+
+
+
+    //1.提交表单 start ------------------------------------------------------------>
+    //1.1 直接上传图片
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isPNG = file.type === 'image/png';
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isJPG && !isPNG) {
+        this.$message.error('上传缩略图只能是 JPG 或 PNG 格式!');
+        return false;
+      }
+      if (!isLt2M) {
+        this.$message.error('上传缩略图大小不能超过 2MB!');
+        return false;
+      }
+
+      const formData = new FormData();
+      formData.append('file', file);
+
+      this.$store.dispatch('pool/uploadFile',formData).then(res=> {
+        this.imgUrl = res.data.imgUrl;//显示缩略图
+        this.form.imgurl = res.data.imgUrl;//提供表单地址
+        console.log(res.data.imgUrl)
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+
+      // 阻止默认的上传行为
+      return false;
+    },
+    //1.2 提交表单
+    addToServe(){
+      //提交之前先判断是否为外链
+      //如果使用了外链，清理掉除了外链以外的内容
+      if(this.form.islink==true){
+        this.form.islink = 1;
+        this.cleatForm(1)
+      }else{
+        this.form.islink = 0;
+      }
+
+      //先进行验证
+      this.$refs.form.validate(valid => {
+        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()
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+    },
+    //1.3 清理表单
+    cleatForm(type){
+      if(type==1){
+        //使用了外链，进行部分表单清理
+        //this.form.cat_arr_id = "";
+        this.form.level = "";
+        this.form.imgurl = "";
+        this.form.keyword = "";
+        this.form.introduce = "";
+        this.form.content = "";
+        //this.form.author = "";
+        this.form.hits = "";
+        this.form.is_original = "";
+        this.form.copyfrom = "";
+        this.form.fromurl = "";
+        this.form.status = "";
+      }
+      if(type==2){
+        //完全清理表单
+        this.form.title = "";
+        this.form.islink = "";
+        this.form.linkurl = "";
+        this.form.cat_arr_id = "";
+        this.form.level = "";
+        this.form.imgurl = "";
+        this.form.keyword = "";
+        this.form.introduce = "";
+        this.form.content = "";
+        this.form.author = "";
+        this.form.hits = "";
+        this.form.is_original = "";
+        this.form.copyfrom = "";
+        this.form.fromurl = "";
+        this.form.status = "";
+      }
+    },
+    //提交表单 end ------------------------------------------------------------>
+
+    //2.跳转操作 start ------------------------------------------------------------>
+    returnPage(){
+      this.$router.push({
+        path: '/articleList',
+      });
+    },
+    //跳转操作 end ------------------------------------------------------------>
+
+    //3.回显操作 ------------------------------------------------------------>
+    //3.1回显数据
+    getMainData() {
+      let data = {
+        id: this.$route.query.id
+      };
+      this.$store.dispatch('news/getArticleInfo', data).then(res => {
+        console.log(res);
+        this.form.title = res.data.title;
+        //判断是否使用了外链
+        if(res.data.islink==1){
+          this.form.islink = true;
+        }else{  
+          this.form.islink = false;
+        }
+        //不是原创的时候显示来源
+        if(res.data.is_original==1){
+          this.form.is_original = 1;
+        }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.linkurl = res.data.linkurl;
+        }
+        
+
+
+        // 回显导航池
+        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;
+        this.form.imgurl = res.data.imgurl;
+        this.imgUrl = res.data.imgurl;
+        this.form.keyword = res.data.keyword;
+        this.form.introduce = res.data.introduce;
+        this.form.content = res.data.content;
+        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.fromurl = res.data.fromurl;
+        this.form.status = res.data.status;
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      });
+    },
+    async loadCascaderPath(path) {
+      for (let i = 0; i < path.length; i++) {
+        const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
+        const level = i; // 当前层级的索引
+
+        await this.$store.dispatch('pool/categoryList', { pid: parentId })
+          .then((res) => {
+            const nodes = res.data.map(item => ({
+              value: item.id,
+              label: item.name,
+              leaf: level >= 3, // 假设4层结构，设置叶子节点标记
+            }));
+
+            // 级联选择器加载数据
+            if (level === path.length - 1) {
+              this.form.cat_arr_id = path; // 确保最后一级路径正确设置
+              this.parentKey += 1; // 强制刷新 cascader
+            }
+          });
+      }
+    },
+    //1.3提交修改
+    editToServe(){
+      //提交之前先判断是否为外链
+      //如果使用了外链，清理掉除了外链以外的内容
+      if(this.form.islink==1){
+        this.cleatForm(1)
+      }
+      //添加要修改的id
+      this.form.id = this.editId;
+      //先进行验证
+      this.$refs.form.validate(valid => {
+        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()
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+    },
+    //跳转操作 end ------------------------------------------------------------>
+
+    //4.富文本编辑器 start ------------------------------------------------------------>
+    //4.1 编辑器点击上传图片
+    handleImageClick() {
+      this.$refs.multiFileInput.click(); // 打开文件选择框
+    },
+    handleMultipleFiles(event) {
+      const files = event.target.files;
+      if (files.length) {
+        this.uploadMultipleImages(files); // 处理多图片上传
+      }
+    },
+    uploadMultipleImages(files) {
+      const uploadPromises = [];
+      for (let i = 0; i < files.length; i++) {
+        uploadPromises.push(this.uploadImage(files[i]));
+      }
+
+      Promise.all(uploadPromises).then(urls => {
+        const quillEditor = this.$refs.quillEditor.quill;
+        urls.forEach(url => {
+          const range = quillEditor.getSelection();
+          quillEditor.insertEmbed(range.index, 'image', url); // 在编辑器中插入图片
+        });
+      }).catch(error => {
+        this.$message.error('图片上传失败，请重试！');
+      });
+    },
+    uploadImage(file) {
+      const formData = new FormData();
+      formData.append('file', file);
+      return this.$store.dispatch('pool/uploadFile', formData)
+        .then(res => {
+          if (res && res.data && res.data.imgUrl) {
+            return res.data.imgUrl;
+          } else {
+            throw new Error('图片上传失败');
+          }
+        })
+        .catch(error => {
+          this.$message.error('图片上传失败，请重试！');
+          throw error;
+        });
+    },
+
+    //4.2 图片粘贴上传
+    // 处理从网页粘贴的图片 URL
+    handleImageFromWeb(imageUrl) {
+      return new Promise((resolve) => {
+        console.log('开始下载图片:', imageUrl);
+
+        this.fetchImageAsBlob(imageUrl).then((blob) => {
+          console.log('图片已下载为 Blob:', blob);
+
+          const formData = new FormData();
+          formData.append('file', blob, 'image.jpg');
+
+          this.$store.dispatch('pool/uploadFile', formData).then((res) => {
+            if (res && res.data && res.data.imgUrl) {
+              console.log('图片上传成功:', res.data.imgUrl);
+              resolve(res.data.imgUrl);
+            } else {
+              console.log('图片上传失败，保留原 URL:', imageUrl);
+              resolve(imageUrl);
+            }
+          }).catch((error) => {
+            console.error('图片上传时出现错误:', error);
+            resolve(imageUrl);
+          });
+        }).catch((error) => {
+          console.error('图片下载失败:', error);
+          resolve(imageUrl);
+        });
+      });
+    },
+    fetchImageAsBlob(url) {
+      return fetch(url)
+        .then(response => {
+          if (!response.ok) {
+            throw new Error('Failed to fetch image');
+          }
+          return response.blob();
+        });
+    },
+    //编辑源码
+    toggleSourceMode() {
+      if (!this.showHtml) {
+        // 切换到源码模式，将编辑器内容同步到 textarea 中
+        this.editorHtml = this.$refs.quillEditor.quill.root.innerHTML;
+        this.showHtml = true; // 显示 textarea
+      } else {
+        // 切换回富文本模式，将 textarea 内容同步回编辑器
+        this.showHtml = false; // 显示 Quill 编辑器
+
+        // Quill 编辑器可能被销毁，所以使用 $nextTick 确保 DOM 渲染完成后再操作编辑器
+        this.$nextTick(() => {
+          if (this.$refs.quillEditor) {
+            this.$refs.quillEditor.quill.root.innerHTML = this.editorHtml;
+          } else {
+            console.error('Quill 编辑器实例未找到');
+          }
+        });
+      }
+    },
+    //富文本编辑器 end ------------------------------------------------------------>
+
+
+            
+    get_creatNews_form_id_fun(){//判断用户类型ajax
+            // console.log("this.form.user_type==1",this.form.author)
+            this.$store.dispatch('public/getInfo').then(res=> {
+                  //     console.log("res======",res)
+                  this.form.user_type = res.data.type_id;
+                  //  console.log("this.userType==ajax",this.form)
+                  //  console.log("this.userType==ajax",this.form.user_type)
+                  //if(res.data.type_id==10000){}//管理员xx
+                  //if(res.data.type_id==4){}//调研员
+                  //个人会员=1 政务会员=2 企业会员=3 调研员=4 管理员=10000 游客=20000
+                  }).catch(() => {
+                        this.$message({
+                              type: 'info',
+                              message: '网络错误，请重试！'
+                        });
+                  })
+            
+       
+                  // console.log("this.form.user_type==",this.form);
+                  // console.log("this.form.user_type==2",this.form.user_type);
+         
+      },
+
+      get_creatNews_nav_pool_arr_fun(){//xx
+            this.$store.dispatch('pool/get_creatNews_nav_actions',{page:1,pageSize:666666}).then(res=> {
+                   
+                  console.log("page:1,pageSize:666666=====",res.data.rows)
+                  res.data.rows.forEach(( per_obj ) => { 
+
+                        let new_per = {
+                              label: per_obj.website_name,
+                              value: per_obj.id,
+                        }
+
+                        this.creatNews_nav_pool_arr.push( new_per )
+
+                  })
+                  // console.log("this.creatNews_nav_pool_arr====",res)
+                  // console.log("this.creatNews_nav_pool_arr====",this.creatNews_nav_pool_arr)
+
+            }).catch(() => {
+              this.$message({
+                type: 'info',
+                message: '网络错误，请重试！'
+              });
+            })
+
+      },
+
+
+
+
+      creatNews_nav_pool_change_fun(){  
+            //xx  导航池级
+              
+            // console.log("this.form.cat_arr_id",this.form.cat_arr_id)
+
+            // const website_id_num = this.form.web_site_id[0]
+            this.form.web_site_id = this.form.web_site_id[0]
+            console.log("选中值：web_site_id====",this.form.web_site_id)
+            console.log("选中值：creatNews_pid==", this.creatNews_pid_num) 
+
+
+            this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:String(this.creatNews_pid_num),website_id:String(this.form.web_site_id)}).then(res=> {
+            // this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:"11",website_id:"2"}).then(res=> {
+                   console.log("change==1=========",res.data)
+                  // console.log("son=========",res.data.length)
+                   
+                  if(res.data.length==0){//没有导航池子级
+                        alert("没有导航池子级");
+                        return
+                  }
+
+                  this.creatNews_add_nav_pool_arr=res.data
+
+                  this.creatNews_add_nav_pool_arr.forEach(( per_obj ) => { 
+ 
+                        per_obj.label=per_obj.name, 
+                        per_obj.value=per_obj.id,
+                              // this.creatNews_add_nav_pool_arr.push( new_per ) 
+                              this.creatNews_pid_num=per_obj.category_id
+                              
+                  })
+ 
+
+            }).catch(() => {
+              this.$message({
+                type: 'info',
+                message: '网络错误，请重试！'
+              });
+            })
+
+
+      },
+
+
+
+      // this.$store.dispatch('pool/uploadFile',formData).then(res=> {
+      //   this.imgUrl = res.data.imgUrl;//显示缩略图
+      //   this.form.imgurl = res.data.imgUrl;//提供表单地址
+      //   console.log(res.data.imgUrl)
+      // }).catch(() => {
+      //   this.$message({
+      //     type: 'info',
+      //     message: '网络错误，请重试！'
+      //   });
+      // })
+
+      test_fun(){//xx
+             console.log("test====",this.creatNews_nav_pool_arr)
+             this.test_num=this.test_num+1
+      },
+
+      //导航池子级=发生变化
+      // creatNews_nav_add_pool_change_fun(){ 
+      //       // this.form.nav_add_pool_id
+
+      //       console.log("this.form.nav_add_pool_idthis.form.nav_add_pool_id==",this.form.nav_add_pool_id[0])
+      //       console.log("creatNews_son_website_id_num==",this.creatNews_son_website_id_num)
+            
+             
+             
+      //       // this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:String(this.form.nav_add_pool_id[0]),website_id:String(this.form.cat_arr_id[0])}).then(res=> {
+      //       this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:"436",website_id:"2"}).then(res=> {
+
+      //             console.log("son======222",res.data)
+
+                   
+                   
+      //             if(res.data.length==0){//没有导航池子级
+      //                   return
+      //             }
+
+
+      //             res.data.forEach(( per_obj ) => { 
+
+      //                         let new_per = {
+      //                               label: per_obj.name,
+
+      //                               value: per_obj.id,
+      //                               website_id: per_obj.website_id,
+      //                         }
+
+      //                         this.creatNews_add_nav_pool_arr.push( new_per ) 
+      //             })
+ 
+      //            console.log("this.creatNews_add_nav_pool_arr") 
+
+
+
+      //       }).catch(() => {
+      //         this.$message({
+      //           type: 'info',
+      //           message: '网络错误，请重试！'
+      //         });
+      //       })
+
+
+      // },
+
+
+  },
+
+  created(){
+        
+      
+  },
+   
+   
+  mounted(){
+
+      
+      this.get_creatNews_form_id_fun()//xx
+      this.get_creatNews_nav_pool_arr_fun()//
+      
+      // console.log("form.cat_arr_id==",this.form.cat_arr_id.length)
+
+
+    //1.判断是新建还是回显
+    if(this.$route.query.id!=undefined){
+      this.editId = this.$route.query.id;
+      this.editStatus = true;
+      console.log("编辑新闻！")
+      this.getMainData();
+    }else{
+      this.editStatus = false;
+      console.log("添加新闻！")
+    }
+
+    //复制内容到富文本 start ------------------------------------------------------------>
+    this.$nextTick(() => {
+      const quillEditor = this.$refs.quillEditor.quill;
+
+      if (quillEditor) {
+        console.log('Quill 编辑器已初始化');
+
+        // 在粘贴事件触发时，记录所有 img 的 src
+        quillEditor.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
+          if (node.tagName === 'IMG') {
+            const imageUrl = node.getAttribute('src');
+            console.log('检测到粘贴的图片 URL:', imageUrl);
+
+            if (imageUrl && !imageUrl.startsWith('data:') && !imageUrl.startsWith('file://')) {
+              // 先处理图片上传
+              this.handleImageFromWeb(imageUrl).then((uploadedImageUrl) => {
+                // 查找编辑器中所有 img 标签并替换 src
+                const imgs = quillEditor.root.querySelectorAll('img');
+                imgs.forEach((img) => {
+                  if (img.getAttribute('src') === imageUrl) {
+                    img.setAttribute('src', uploadedImageUrl);  // 替换 src
+                    console.log('图片 src 已替换为:', uploadedImageUrl);
+                  }
+                });
+              });
+            }
+          }
+          return delta;  // 返回原始 delta
+        });
+      } else {
+        console.error('Quill 初始化失败');
+      }
+
+    });
+    //复制富文本 end ------------------------------------------------------------>
+ 
+  },
+
+  
+
+};
+</script>
+
+<style scoped lang="less">
+  //文本编辑器
+  .QuillTitle {
+    line-height: 36px;
+    font-size: 14px;
+    color: #606266;
+    font-weight:bold;
+    padding-left: 30px;
+    span{
+      color: #ff4949
+    }
+    .QuillModelBtn {
+      display: inline-block;
+      margin-left: 10px;
+      font-size: 12px;
+      color: #999;
+      cursor: pointer;
+    }
+  }
+  .editor-container {
+    height: 420px;
+    padding-bottom:20px;
+  }
+  .my-quill-editor {
+    height: 320px;
+  }
+  .ql-editor {
+    height: 320px;
+  }
+  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+  ::v-deep .custom-form-item > .el-form-item__label {
+    line-height: 140px !important;
+  }
+  ::v-deep .custom-textarea .el-textarea__inner {
+    resize: none; /* 禁止用户拖拽调整大小 */
+  }
+  ::v-deep .custom-align-right .el-form-item__label {
+    text-align: right; /* 设置标签文字右对齐 */
+  }
+  ::v-deep .el-select {
+    width: 100%; /* 禁止用户拖拽调整大小 */
+  }
+  
+  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/news/creatNews_c.vue

@@ -0,0 +1,996 @@
+<template>
+  <div class="mainBox">
+    <div class="layerBox">
+      <tableTitle :name="tableDivTitle"/>
+      <el-form :model="form" ref="form" :rules="formRules" label-position="left" label-width="120px">
+        <div class="formDiv">
+          <el-form-item label="资讯题目：" prop="title" class="custom-align-right">
+            <template #label>
+              <span class="askBox">
+                资讯题目：
+                <el-tooltip class="item" effect="dark" content="资讯标题，如：三农市场网_网站列表_全国信息一体化网络平台_项目大全。" placement="top">
+                  <i class="el-icon-question"></i>
+                </el-tooltip>
+              </span>
+            </template>
+            <el-input v-model="form.title" autocomplete="off" placeholder="请输入资讯标题"></el-input>
+            <el-checkbox v-model="form.islink">是否使用外链</el-checkbox>
+          </el-form-item>
+
+          <div v-if="form.islink==true"> 
+            <el-form-item label="导航池名称：" prop="cat_arr_id" class="custom-align-right">
+              <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData" filterable clearable></el-cascader>
+            </el-form-item>
+            <el-form-item label="外链地址：" prop="linkurl" class="custom-align-right">
+              <el-input v-model="form.linkurl" autocomplete="off" placeholder="请输入外链地址"></el-input>
+            </el-form-item>
+            <el-form-item label="作者：" prop="author" class="custom-align-right">
+              <el-input v-model="form.author" autocomplete="off" placeholder="请输入作者"></el-input>
+            </el-form-item>
+          </div>
+
+          <div v-if="form.islink==false">
+                  
+                  <!-- xx   creatNews_nav_pool_arr1   -->
+
+                  <el-form-item label="站点名称:" prop="cat_arr_id" class="custom-align-right">
+                        <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择站点名称" :options="creatNews_nav_pool_arr" @change="creatNews_nav_pool_change_fun(form.cat_arr_id)" filterable clearable></el-cascader>
+                  </el-form-item>  
+
+                  <el-form-item label="导航池名称:" class="custom-align-right">
+                        <el-cascader placeholder="请选择要绑定的子级导航" v-model="form.nav_add_pool_id" :options="creatNews_add_nav_pool_arr" :props="{ checkStrictly:true}" @change="creatNews_nav_add_pool_change_fun()" filterable clearable>
+                        </el-cascader>
+                  </el-form-item>  
+
+
+                  {{creatNews_nav_pool_arr}}
+                  {{test_num}}
+                  <input class="_btn" name="" type="button" value="11" @click="test_fun()">
+                  {{creatNews_add_nav_pool_arr}}
+                  
+                  <!--  <el-form-item label="导航池名称：" prop="cat_arr_id" class="custom-align-right">
+                               <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的父级导航" :props="parentData" filterable clearable></el-cascader>
+                        </el-form-item>  
+                   -->
+
+
+                  <el-form-item label="推荐等级：" class="custom-align-right">
+                              <el-select v-model="form.level" placeholder="请选择推荐等级..">
+                                          <el-option label="头条" :value="1"></el-option>
+                                          <el-option label="轮播图" :value="2"></el-option>
+                                          <el-option label="推荐图" :value="3"></el-option>
+                                          <el-option label="热点资讯" :value="4"></el-option>
+                                          <el-option label="资讯推荐" :value="5"></el-option>
+                              </el-select>
+                  </el-form-item>
+
+            <el-form-item label="缩略图：" class="custom-align-right" prop="imgUrl" v-if="form.level==2||form.level==3">
+              <div class="uploaderBox">
+                <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
+                  <!-- <img v-if="imgUrl" :src="imgUrl" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                  <!-- 预览图片 -->
+                  <img v-if="imgUrl" :src="imgUrl" class="avatar">
+                  <!-- 上传图标 -->
+                  <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                  <div v-else class="chooseImgDiv">
+                    <div>
+                      <img src="@/assets/public/upload/noImage.png">
+                      <div>选择图片</div>
+                    </div>
+                  </div>
+                </el-upload>
+              </div>
+            </el-form-item>
+            <el-form-item label="缩略图：" class="custom-align-right" v-else>
+              <div class="uploaderBox">
+                <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
+                  <!-- <img v-if="imgUrl" :src="imgUrl" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                  <!-- 预览图片 -->
+                  <img v-if="imgUrl" :src="imgUrl" class="avatar">
+                  <!-- 上传图标 -->
+                  <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                  <div v-else class="chooseImgDiv">
+                    <div>
+                      <img src="@/assets/public/upload/noImage.png">
+                      <div>选择图片</div>
+                    </div>
+                  </div>
+                </el-upload>
+              </div>
+            </el-form-item>
+            <el-form-item label="资讯关键词：" prop="keyword" class="custom-align-right">
+              <template #label>
+                <span class="askBox">
+                  资讯关键词：
+                  <el-tooltip class="item" effect="dark" content="资讯关键词，如：三农市场网、全国三农、信息一体化。" placement="top">
+                    <i class="el-icon-question"></i>
+                  </el-tooltip>
+                </span>
+              </template>
+              <el-input v-model="form.keyword" autocomplete="off" placeholder="请输入资讯关键词"></el-input>
+            </el-form-item>
+            <el-form-item label="资讯描述：" prop="introduce" class="custom-align-right">
+              <template #label>
+                <span class="askBox">
+                  资讯描述：
+                  <el-tooltip class="item" effect="dark" content="资讯描述，如：中国三农市场网创建以来，社会效益和会员经济效益贡献。" placement="top">
+                    <i class="el-icon-question"></i>
+                  </el-tooltip>
+                </span>
+              </template>
+              <el-input type="textarea" v-model="form.introduce" class="custom-textarea" placeholder="请输入资讯描述"></el-input>
+            </el-form-item>
+            <div class="QuillTitle">
+              <span>* </span>资讯内容：
+              <div @click="toggleSourceMode" class="QuillModelBtn">
+                {{ showHtml ? '切换到编辑模式' : '切换到源码模式' }}
+              </div>
+            </div>
+            <el-form-item label="" prop="content">
+              <div class="editor-container">
+                <div v-if="showHtml">
+                  <textarea v-model="editorHtml" style="width: 100%; height: 400px;"></textarea>
+                </div>
+                <div v-else>
+                  <quill-editor ref="quillEditor" v-model="form.content" :options="editorOptions" class="my-quill-editor"/>
+                </div>
+                <!-- 多图上传隐藏的input -->
+                <input type="file" ref="multiFileInput" @change="handleMultipleFiles" multiple hidden accept="image/jpeg, image/png" />
+              </div>
+            </el-form-item>
+            <el-form-item label="作者：" prop="author" class="custom-align-right">
+              <el-input v-model="form.author" autocomplete="off" placeholder="请输入作者"></el-input>
+            </el-form-item>
+            <el-form-item label="浏览量：" class="custom-align-right">
+              <el-input v-model="form.hits" autocomplete="off" placeholder="请输入浏览量"></el-input>
+            </el-form-item>
+            <el-form-item label="是否为原创：" prop="is_original" class="custom-align-right">
+              <el-radio-group v-model="form.is_original">
+                <el-radio :label="1">是</el-radio>
+                <el-radio :label="0">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <div v-if="form.is_original==0">
+              <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>
+              <div class="disclaimerBox">
+                <div class="disclaimerTitle">
+                  <img src="@/assets/public/check.png"/>同意《免责声明》：
+                  <!-- <el-checkbox v-model="disclaimer" disabled="disabled"></el-checkbox> -->
+                </div>
+                <div class="disclaimerText">本文来源于网络转载，仅供学习交流使用，不构成商业目的。版权归作者所有，如涉及原作者所有，如涉及作品内容、版权和其他问题，请在30日内与本站联系，我们将在第一时间处理。</div>
+              </div>
+            </div>
+            <el-form-item label="资讯状态：" class="custom-align-right" style="width: 100%;">
+              <el-select v-model="form.status" placeholder="请选择..">
+                <el-option label="已发布" :value="1"></el-option>
+                <el-option label="待发布" :value="0"></el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+        </div>
+      </el-form>
+    </div>
+    <div class="bottomBtnBox">
+      <el-button type="info" @click="returnPage">返回</el-button>
+      <el-button type="primary" @click="editToServe" v-if="editStatus==true">确定</el-button>
+      <el-button type="primary" @click="addToServe" v-else>发布资讯</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle';
+//引入公用样式
+import '@/styles/global.less';
+
+import { quillEditor } from 'vue-quill-editor';
+import 'quill/dist/quill.snow.css';
+import ImageResize from 'quill-image-resize-module';
+import Quill from 'quill';  // 引入 Quill
+import Delta from 'quill-delta'; // 引入 Delta，用于手动修改文档
+
+// 注册 Image Resize 模块
+Quill.register('modules/imageResize', ImageResize);
+
+export default {
+  components: {
+    quillEditor,
+    tableTitle
+  },
+  data() {
+    //0.全局操作 start ------------------------------------------------------------>
+    //表单验证
+    const validateEmpty = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    const validateArray = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    let self = this;
+    //0.全局操作xx end ------------------------------------------------------------>
+    return {
+      // creatNews_nav_pool_arr1:[ { "label": "农网", "value": 1, "pid": 0, "sort": 1, "remark": "农网栏目信息", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 09:28:19", "children": [ { "label": "核心网站(行星)", "value": 3, "pid": 1, "sort": 1, "remark": "核心网站", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:31:26" }, { "label": "重点网系(卫星)", "value": 4, "pid": 1, "sort": 1, "remark": "重点网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:06" }, { "label": "垂直网系(卫星)", "value": 5, "pid": 1, "sort": 1, "remark": "垂直网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:43" }, { "label": "频道网系(卫星)", "value": 6, "pid": 1, "sort": 1, "remark": "频道网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:19" }, { "label": "地方网系(卫星)", "value": 7, "pid": 1, "sort": 1, "remark": "地方网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:44" } ] } ],//xx
+       
+
+
+      creatNews_pid_num:0,//请求子导航用的pid==初始值是0 
+      creatNews_nav_pool_arr:[],//
+      creatNews_add_nav_pool_arr:[],//
+      creatNews_son_website_id_num:"",
+      // creatNews_nav_2_category_id:"",
+      // creatNews_nav_pool_arr2:
+       
+       
+       tableDivTitle:"添加资讯",
+      disclaimer:true,//免责声明
+      //提交表单
+      
+        test_num:11,
+        creatNews_user_type:this.$store.state.public.vuex_user_type,//判断用户类型'
+      //xx
+      form: {
+            user_type:"??",//判断用户类型'
+            cat_arr_id:[],//导航池名称     //wed_id=共有
+            nav_add_pool_id:[],//导航池子级
+            
+
+
+            //1.1使用了外链
+            title: '',//资讯标题
+            islink:0,//是否使用外链 0非 1是
+            linkurl:"",//外链地址
+            //1.2没有使用外链
+            // cat_arr_id:'',//导航池名称
+            level:"",//推荐等级
+            imgurl:"",//缩略图
+            keyword:"",//关键词
+            introduce:"",//描述
+            content:"",//内容
+            author:"",//作者
+            hits:"",//浏览量
+            is_original:0,//是否为原创 0非 1是
+            copyfrom:"",//来源名称
+            fromurl:"",//来源地址
+            status:0,//状态 0待发布 1已发布 404已删除
+      },
+      //1.2 表单验证规则
+      formRules: {
+            
+            //导航池名称不能为空
+            cat_arr_id:[{required:true,trigger:'blur',validator:validateArray}],
+            
+        //资讯名称不能为空
+        title:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //如果使用了外链，外链地址不能为空
+        linkurl:[{required:true,trigger:'blur',validator:validateEmpty}],
+
+        //推荐等级不能为空
+        //level:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //关键词不能为空
+        keyword:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //描述不能为空
+        introduce:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //内容不能为空
+        content:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //作者不能为空
+        author:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //是否原创不能为空
+        is_original:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //来源名称和地址不能为空
+        copyfrom:[{required:true,trigger:'blur',validator:validateEmpty}],
+        fromurl:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //缩略图不能为空
+        imgUrl:[{required:true,trigger:'blur',validator:validateEmpty}]
+      },
+      //1.3富文本编辑器配置
+      showHtml: false, //用于保存源码内容
+      editorHtml: '',
+      editorOptions: {
+        placeholder: '请输入内容...',
+        theme: 'snow',  // 主题样式
+        modules: {
+          toolbar: {
+            container: [
+              [{ 'font': [] }],                                // 字体
+              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],       // 标题
+              [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
+              ['bold', 'italic', 'underline', 'strike'],        // 加粗、斜体、下划线、删除线
+              [{ 'color': [] }, { 'background': [] }],          // 文字颜色、背景颜色
+              [{ 'script': 'sub' }, { 'script': 'super' }],     // 上标、下标
+              [{ 'list': 'ordered'}, { 'list': 'bullet' }],     // 列表
+              [{ 'indent': '-1'}, { 'indent': '+1' }],          // 缩进
+              [{ 'align': [] }],                                // 对齐方式
+              ['blockquote', 'code-block'],                     // 引用、代码块
+              ['link', 'image', 'video'],                       // 链接、图片、视频
+              ['clean'],
+              [{ 'html': true }]  // 添加自定义按钮的占位符
+            ],
+            handlers: {
+              image: () => {
+                this.handleImageClick();
+              },
+              showHtml: function() {
+                this.$emit('toggleSourceMode');
+              }
+            }
+          },
+          imageResize: {
+            displayStyles: {
+              backgroundColor: 'black',
+              border: 'none',
+              color: 'white'
+            },
+            modules: ['Resize', 'DisplaySize', 'Toolbar']  // 启用不同的调整方式
+          }
+        }
+      },
+      //1.4图片上传
+      imgUrl:"",//在页面上显示缩略图
+      //获取父级导航池
+      parentKey:0,//获取父级导航
+      parentData: {
+        checkStrictly: true,
+        lazy: true,
+        async lazyLoad (node, resolve) {
+          const { level, data } = node;
+          if (data && data.children && data.children.length !== 0) {
+            return resolve(node)
+          }
+          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)
+            }
+          })
+        }
+      },
+      //表单项 end ------------------------------------------------------------>
+    };
+  },
+  methods: {
+
+    //1.提交表单 start ------------------------------------------------------------>
+    //1.1 直接上传图片
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isPNG = file.type === 'image/png';
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isJPG && !isPNG) {
+        this.$message.error('上传缩略图只能是 JPG 或 PNG 格式!');
+        return false;
+      }
+      if (!isLt2M) {
+        this.$message.error('上传缩略图大小不能超过 2MB!');
+        return false;
+      }
+
+      const formData = new FormData();
+      formData.append('file', file);
+
+      this.$store.dispatch('pool/uploadFile',formData).then(res=> {
+        this.imgUrl = res.data.imgUrl;//显示缩略图
+        this.form.imgurl = res.data.imgUrl;//提供表单地址
+        console.log(res.data.imgUrl)
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+
+      // 阻止默认的上传行为
+      return false;
+    },
+    //1.2 提交表单
+    addToServe(){
+      //提交之前先判断是否为外链
+      //如果使用了外链，清理掉除了外链以外的内容
+      if(this.form.islink==true){
+        this.form.islink = 1;
+        this.cleatForm(1)
+      }else{
+        this.form.islink = 0;
+      }
+
+      //先进行验证
+      this.$refs.form.validate(valid => {
+        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()
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+    },
+    //1.3 清理表单
+    cleatForm(type){
+      if(type==1){
+        //使用了外链，进行部分表单清理
+        //this.form.cat_arr_id = "";
+        this.form.level = "";
+        this.form.imgurl = "";
+        this.form.keyword = "";
+        this.form.introduce = "";
+        this.form.content = "";
+        //this.form.author = "";
+        this.form.hits = "";
+        this.form.is_original = "";
+        this.form.copyfrom = "";
+        this.form.fromurl = "";
+        this.form.status = "";
+      }
+      if(type==2){
+        //完全清理表单
+        this.form.title = "";
+        this.form.islink = "";
+        this.form.linkurl = "";
+        this.form.cat_arr_id = "";
+        this.form.level = "";
+        this.form.imgurl = "";
+        this.form.keyword = "";
+        this.form.introduce = "";
+        this.form.content = "";
+        this.form.author = "";
+        this.form.hits = "";
+        this.form.is_original = "";
+        this.form.copyfrom = "";
+        this.form.fromurl = "";
+        this.form.status = "";
+      }
+    },
+    //提交表单 end ------------------------------------------------------------>
+
+    //2.跳转操作 start ------------------------------------------------------------>
+    returnPage(){
+      this.$router.push({
+        path: '/articleList',
+      });
+    },
+    //跳转操作 end ------------------------------------------------------------>
+
+    //3.回显操作 ------------------------------------------------------------>
+    //3.1回显数据
+    getMainData() {
+      let data = {
+        id: this.$route.query.id
+      };
+      this.$store.dispatch('news/getArticleInfo', data).then(res => {
+        console.log(res);
+        this.form.title = res.data.title;
+        //判断是否使用了外链
+        if(res.data.islink==1){
+          this.form.islink = true;
+        }else{  
+          this.form.islink = false;
+        }
+        //不是原创的时候显示来源
+        if(res.data.is_original==1){
+          this.form.is_original = 1;
+        }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.linkurl = res.data.linkurl;
+        }
+        
+
+
+        // 回显导航池
+        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;
+        this.form.imgurl = res.data.imgurl;
+        this.imgUrl = res.data.imgurl;
+        this.form.keyword = res.data.keyword;
+        this.form.introduce = res.data.introduce;
+        this.form.content = res.data.content;
+        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.fromurl = res.data.fromurl;
+        this.form.status = res.data.status;
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      });
+    },
+    async loadCascaderPath(path) {
+      for (let i = 0; i < path.length; i++) {
+        const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
+        const level = i; // 当前层级的索引
+
+        await this.$store.dispatch('pool/categoryList', { pid: parentId })
+          .then((res) => {
+            const nodes = res.data.map(item => ({
+              value: item.id,
+              label: item.name,
+              leaf: level >= 3, // 假设4层结构，设置叶子节点标记
+            }));
+
+            // 级联选择器加载数据
+            if (level === path.length - 1) {
+              this.form.cat_arr_id = path; // 确保最后一级路径正确设置
+              this.parentKey += 1; // 强制刷新 cascader
+            }
+          });
+      }
+    },
+    //1.3提交修改
+    editToServe(){
+      //提交之前先判断是否为外链
+      //如果使用了外链，清理掉除了外链以外的内容
+      if(this.form.islink==1){
+        this.cleatForm(1)
+      }
+      //添加要修改的id
+      this.form.id = this.editId;
+      //先进行验证
+      this.$refs.form.validate(valid => {
+        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()
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+    },
+    //跳转操作 end ------------------------------------------------------------>
+
+    //4.富文本编辑器 start ------------------------------------------------------------>
+    //4.1 编辑器点击上传图片
+    handleImageClick() {
+      this.$refs.multiFileInput.click(); // 打开文件选择框
+    },
+    handleMultipleFiles(event) {
+      const files = event.target.files;
+      if (files.length) {
+        this.uploadMultipleImages(files); // 处理多图片上传
+      }
+    },
+    uploadMultipleImages(files) {
+      const uploadPromises = [];
+      for (let i = 0; i < files.length; i++) {
+        uploadPromises.push(this.uploadImage(files[i]));
+      }
+
+      Promise.all(uploadPromises).then(urls => {
+        const quillEditor = this.$refs.quillEditor.quill;
+        urls.forEach(url => {
+          const range = quillEditor.getSelection();
+          quillEditor.insertEmbed(range.index, 'image', url); // 在编辑器中插入图片
+        });
+      }).catch(error => {
+        this.$message.error('图片上传失败，请重试！');
+      });
+    },
+    uploadImage(file) {
+      const formData = new FormData();
+      formData.append('file', file);
+      return this.$store.dispatch('pool/uploadFile', formData)
+        .then(res => {
+          if (res && res.data && res.data.imgUrl) {
+            return res.data.imgUrl;
+          } else {
+            throw new Error('图片上传失败');
+          }
+        })
+        .catch(error => {
+          this.$message.error('图片上传失败，请重试！');
+          throw error;
+        });
+    },
+
+    //4.2 图片粘贴上传
+    // 处理从网页粘贴的图片 URL
+    handleImageFromWeb(imageUrl) {
+      return new Promise((resolve) => {
+        console.log('开始下载图片:', imageUrl);
+
+        this.fetchImageAsBlob(imageUrl).then((blob) => {
+          console.log('图片已下载为 Blob:', blob);
+
+          const formData = new FormData();
+          formData.append('file', blob, 'image.jpg');
+
+          this.$store.dispatch('pool/uploadFile', formData).then((res) => {
+            if (res && res.data && res.data.imgUrl) {
+              console.log('图片上传成功:', res.data.imgUrl);
+              resolve(res.data.imgUrl);
+            } else {
+              console.log('图片上传失败，保留原 URL:', imageUrl);
+              resolve(imageUrl);
+            }
+          }).catch((error) => {
+            console.error('图片上传时出现错误:', error);
+            resolve(imageUrl);
+          });
+        }).catch((error) => {
+          console.error('图片下载失败:', error);
+          resolve(imageUrl);
+        });
+      });
+    },
+    fetchImageAsBlob(url) {
+      return fetch(url)
+        .then(response => {
+          if (!response.ok) {
+            throw new Error('Failed to fetch image');
+          }
+          return response.blob();
+        });
+    },
+    //编辑源码
+    toggleSourceMode() {
+      if (!this.showHtml) {
+        // 切换到源码模式，将编辑器内容同步到 textarea 中
+        this.editorHtml = this.$refs.quillEditor.quill.root.innerHTML;
+        this.showHtml = true; // 显示 textarea
+      } else {
+        // 切换回富文本模式，将 textarea 内容同步回编辑器
+        this.showHtml = false; // 显示 Quill 编辑器
+
+        // Quill 编辑器可能被销毁，所以使用 $nextTick 确保 DOM 渲染完成后再操作编辑器
+        this.$nextTick(() => {
+          if (this.$refs.quillEditor) {
+            this.$refs.quillEditor.quill.root.innerHTML = this.editorHtml;
+          } else {
+            console.error('Quill 编辑器实例未找到');
+          }
+        });
+      }
+    },
+    //富文本编辑器 end ------------------------------------------------------------>
+
+
+            
+    get_creatNews_form_id_fun(){//判断用户类型ajax
+            // console.log("this.form.user_type==1",this.form.author)
+            this.$store.dispatch('public/getInfo').then(res=> {
+                  //     console.log("res======",res)
+                  this.form.user_type = res.data.type_id;
+                  //  console.log("this.userType==ajax",this.form)
+                  //  console.log("this.userType==ajax",this.form.user_type)
+                  //if(res.data.type_id==10000){}//管理员xx
+                  //if(res.data.type_id==4){}//调研员
+                  //个人会员=1 政务会员=2 企业会员=3 调研员=4 管理员=10000 游客=20000
+                  }).catch(() => {
+                        this.$message({
+                              type: 'info',
+                              message: '网络错误，请重试！'
+                        });
+                  })
+            
+       
+                  // console.log("this.form.user_type==",this.form);
+                  // console.log("this.form.user_type==2",this.form.user_type);
+         
+      },
+
+      get_creatNews_nav_pool_arr_fun(){//xx
+            this.$store.dispatch('pool/get_creatNews_nav_actions',{page:1,pageSize:666666}).then(res=> {
+                   
+                  console.log("page:1,pageSize:666666=====",res.data.rows)
+                  res.data.rows.forEach(( per_obj ) => { 
+
+                        let new_per = {
+                              label: per_obj.website_name,
+                              value: per_obj.id,
+                        }
+
+                        this.creatNews_nav_pool_arr.push( new_per )
+
+                  })
+                  // console.log("this.creatNews_nav_pool_arr====",res)
+                  // console.log("this.creatNews_nav_pool_arr====",this.creatNews_nav_pool_arr)
+
+            }).catch(() => {
+              this.$message({
+                type: 'info',
+                message: '网络错误，请重试！'
+              });
+            })
+
+      },
+
+
+
+
+      creatNews_nav_pool_change_fun(){  
+            //xx  第2个接口
+              
+            // console.log("id=website_id=共用=this.form.cat_arr_id",this.form.cat_arr_id[0])
+            // console.log("creatNews_pid_num=请求子导航用的pid==初始值是0",this.creatNews_pid_num)
+ 
+             
+
+            this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:String(this.creatNews_pid_num),website_id:String(this.form.cat_arr_id[0])}).then(res=> {
+            // this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:"0",website_id:"2"}).then(res=> {
+                  //  console.log("change==1=========",res.data)
+                  console.log("第2个接口==change=======",res.data)
+                   
+                  if(res.data.length==0){//没有导航池子级
+                        alert("没有导航池子级");
+                        
+                        return
+                  }
+
+                  this.creatNews_add_nav_pool_arr=res.data
+
+                  this.creatNews_add_nav_pool_arr.forEach(( per_obj ) => { 
+ 
+                        per_obj.label=per_obj.name, 
+                        per_obj.value=per_obj.id,
+                              // this.creatNews_add_nav_pool_arr.push( new_per ) 
+                              this.creatNews_pid_num=per_obj.category_id
+                              
+                  })
+                   
+
+
+
+            }).catch(() => {
+              this.$message({
+                type: 'info',
+                message: '网络错误，请重试！'
+              });
+            })
+
+
+      },
+
+
+
+      // this.$store.dispatch('pool/uploadFile',formData).then(res=> {
+      //   this.imgUrl = res.data.imgUrl;//显示缩略图
+      //   this.form.imgurl = res.data.imgUrl;//提供表单地址
+      //   console.log(res.data.imgUrl)
+      // }).catch(() => {
+      //   this.$message({
+      //     type: 'info',
+      //     message: '网络错误，请重试！'
+      //   });
+      // })
+
+      test_fun(){//xx
+             console.log("test====",this.creatNews_nav_pool_arr)
+             this.test_num=this.test_num+1
+      },
+
+      //xx导航池子级=发生变化
+      creatNews_nav_add_pool_change_fun(){ 
+            //第2个接口 change
+
+  
+            this.creatNews_add_nav_pool_arr.forEach((per_obj,the_index)=>{
+                        // console.log("the_index=",the_index)
+                        // console.log("the_val=",the_val)
+                         
+                        if(per_obj.value==this.form.nav_add_pool_id[0]){
+                             this.creatNews_pid_num=per_obj.category_id
+                        }
+                         
+            }) 
+            
+
+
+            
+            console.log("creatNews_pid_num===",this.creatNews_pid_num)
+            this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:String(this.creatNews_pid_num),website_id:String(this.form.cat_arr_id[0])}).then(res=> {
+            // this.$store.dispatch('pool/get_creatNews_nav_son_actions',{pid:"436",website_id:"2"}).then(res=> {
+
+                  // console.log("son======222")
+ 
+                  if(res.data.length==0){//没有导航池子级
+                        alert("没有子级");
+                        
+                        return
+                  }
+
+                  const add_son_arr =res.data
+                  
+                  add_son_arr.forEach(( per_obj ) => { 
+ 
+                              per_obj.label=per_obj.name, 
+                              per_obj.value=per_obj.id
+                                    
+                                
+                  })
+ 
+                 console.log("add_son_arr==",add_son_arr) 
+
+
+
+            }).catch(() => {
+              this.$message({
+                type: 'info',
+                message: '网络错误，请重试！'
+              });
+            })
+
+
+      },
+ 
+
+  },
+
+  created(){
+        
+      
+  },
+   
+   
+  mounted(){
+ 
+ 
+      
+      this.get_creatNews_form_id_fun()//xx
+      this.get_creatNews_nav_pool_arr_fun()//
+      
+      // console.log("form.cat_arr_id==",this.form.cat_arr_id.length)
+
+
+    //1.判断是新建还是回显
+    if(this.$route.query.id!=undefined){
+      this.editId = this.$route.query.id;
+      this.editStatus = true;
+      console.log("编辑新闻！")
+      this.getMainData();
+    }else{
+      this.editStatus = false;
+      console.log("添加新闻！")
+    }
+
+    //复制内容到富文本 start ------------------------------------------------------------>
+    this.$nextTick(() => {
+      const quillEditor = this.$refs.quillEditor.quill;
+
+      if (quillEditor) {
+        console.log('Quill 编辑器已初始化');
+
+        // 在粘贴事件触发时，记录所有 img 的 src
+        quillEditor.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
+          if (node.tagName === 'IMG') {
+            const imageUrl = node.getAttribute('src');
+            console.log('检测到粘贴的图片 URL:', imageUrl);
+
+            if (imageUrl && !imageUrl.startsWith('data:') && !imageUrl.startsWith('file://')) {
+              // 先处理图片上传
+              this.handleImageFromWeb(imageUrl).then((uploadedImageUrl) => {
+                // 查找编辑器中所有 img 标签并替换 src
+                const imgs = quillEditor.root.querySelectorAll('img');
+                imgs.forEach((img) => {
+                  if (img.getAttribute('src') === imageUrl) {
+                    img.setAttribute('src', uploadedImageUrl);  // 替换 src
+                    console.log('图片 src 已替换为:', uploadedImageUrl);
+                  }
+                });
+              });
+            }
+          }
+          return delta;  // 返回原始 delta
+        });
+      } else {
+        console.error('Quill 初始化失败');
+      }
+
+    });
+    //复制富文本 end -----------------------------------------------------xx------->
+
+     
+
+
+     
+
+  },
+
+
+
+};
+ 
+</script>
+
+<style scoped lang="less">
+  //文本编辑器
+  .QuillTitle {
+    line-height: 36px;
+    font-size: 14px;
+    color: #606266;
+    font-weight:bold;
+    padding-left: 30px;
+    span{
+      color: #ff4949
+    }
+    .QuillModelBtn {
+      display: inline-block;
+      margin-left: 10px;
+      font-size: 12px;
+      color: #999;
+      cursor: pointer;
+    }
+  }
+  .editor-container {
+    height: 420px;
+    padding-bottom:20px;
+  }
+  .my-quill-editor {
+    height: 320px;
+  }
+  .ql-editor {
+    height: 320px;
+  }
+  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+  ::v-deep .custom-form-item > .el-form-item__label {
+    line-height: 140px !important;
+  }
+  ::v-deep .custom-textarea .el-textarea__inner {
+    resize: none; /* 禁止用户拖拽调整大小 */
+  }
+  ::v-deep .custom-align-right .el-form-item__label {
+    text-align: right; /* 设置标签文字右对齐 */
+  }
+  ::v-deep .el-select {
+    width: 100%; /* 禁止用户拖拽调整大小 */
+  }
+  
+  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/news/creatNews_d.vue

@@ -0,0 +1,831 @@
+<template>
+  <div class="mainBox">
+    <div class="layerBox">
+      <tableTitle :name="tableDivTitle"/>
+      <el-form :model="form" ref="form" :rules="formRules" label-position="left" label-width="120px">
+        <div class="formDiv">
+          <el-form-item label="资讯题目：" prop="title" class="custom-align-right">
+            <template #label>
+              <span class="askBox">
+                资讯题目：
+                <!-- <el-tooltip class="item" effect="dark" content="资讯标题，如：三农市场网_网站列表_全国信息一体化网络平台_项目大全。" placement="top">
+                  <i class="el-icon-question"></i>
+                </el-tooltip> -->
+              </span>
+            </template>
+            <el-input v-model="form.title" autocomplete="off" placeholder="请输入资讯标题"></el-input>
+            <el-checkbox v-model="form.islink">是否使用外链</el-checkbox>
+          </el-form-item>
+          <div v-if="form.islink==true"> 
+            <el-form-item label="导航池名称：" prop="cat_arr_id" class="custom-align-right">
+              <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的导航池名称" :props="parentData" filterable clearable></el-cascader>
+            </el-form-item>
+            <el-form-item label="外链地址：" prop="linkurl" class="custom-align-right">
+              <el-input v-model="form.linkurl" autocomplete="off" placeholder="请输入外链地址"></el-input>
+            </el-form-item>
+            <el-form-item label="作者：" prop="author" class="custom-align-right">
+              <el-input v-model="form.author" autocomplete="off" placeholder="请输入作者"></el-input>
+            </el-form-item>
+          </div>
+          <div v-if="form.islink==false">
+            <el-form-item label="导航池名称：" prop="cat_arr_id" class="custom-align-right">
+              <el-cascader :key="parentKey" v-model="form.cat_arr_id" placeholder="请选择要绑定的导航池名称" :props="parentData" filterable clearable></el-cascader>
+            </el-form-item>  
+            <el-form-item label="推荐等级：" class="custom-align-right" >
+              <el-select v-model="form.level" clearable placeholder="请选择推荐等级..">
+                <el-option label="头条" :value="1"></el-option>
+                <el-option label="轮播图" :value="2"></el-option>
+                <el-option label="推荐图" :value="3"></el-option>
+                <el-option label="热点资讯" :value="4"></el-option>
+                <el-option label="资讯推荐" :value="5"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="缩略图：" class="custom-align-right" prop="imgUrl" v-if="form.level==2||form.level==3">
+              <div class="uploaderBox">
+                <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
+                  <!-- <img v-if="imgUrl" :src="imgUrl" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                  <!-- 预览图片 -->
+                  <img v-if="imgUrl" :src="imgUrl" class="avatar">
+                  <!-- 上传图标 -->
+                  <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                  <div v-else class="chooseImgDiv">
+                    <div>
+                      <img src="@/assets/public/upload/noImage.png">
+                      <div>选择图片</div>
+                    </div>
+                  </div>
+                </el-upload>
+              </div>
+            </el-form-item>
+            <el-form-item label="缩略图：" class="custom-align-right" v-else>
+              <div class="uploaderBox">
+                <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
+                  <!-- <img v-if="imgUrl" :src="imgUrl" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                  <!-- 预览图片 -->
+                  <img v-if="imgUrl" :src="imgUrl" class="avatar">
+                  <!-- 上传图标 -->
+                  <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                  <div v-else class="chooseImgDiv">
+                    <div>
+                      <img src="@/assets/public/upload/noImage.png">
+                      <div>选择图片</div>
+                    </div>
+                  </div>
+                </el-upload>
+              </div>
+            </el-form-item>
+            <el-form-item label="资讯关键词：" prop="keyword" class="custom-align-right">
+              <template #label>
+                <span class="askBox">
+                  资讯关键词：
+                  <el-tooltip class="item" effect="dark" content="资讯关键词，如：三农市场网、全国三农、信息一体化。" placement="top">
+                    <i class="el-icon-question"></i>
+                  </el-tooltip>
+                </span>
+              </template>
+              <el-input v-model="form.keyword" autocomplete="off" placeholder="请输入资讯关键词"></el-input>
+            </el-form-item>
+            <el-form-item label="资讯描述：" prop="introduce" class="custom-align-right">
+              <template #label>
+                <span class="askBox">
+                  资讯描述：
+                  <el-tooltip class="item" effect="dark" content="资讯描述，如：中国三农市场网创建以来，社会效益和会员经济效益贡献。" placement="top">
+                    <i class="el-icon-question"></i>
+                  </el-tooltip>
+                </span>
+              </template>
+              <el-input type="textarea" v-model="form.introduce" class="custom-textarea" placeholder="请输入资讯描述"></el-input>
+            </el-form-item>
+            <div class="QuillTitle">
+              <span>* </span>资讯内容：
+              <div @click="toggleSourceMode" class="QuillModelBtn">
+                {{ showHtml ? '切换到编辑模式' : '切换到源码模式' }}
+              </div>
+            </div>
+            <el-form-item label="" prop="content">
+              <div class="editor-container">
+                <div v-if="showHtml">
+                  <textarea v-model="editorHtml" style="width: 100%; height: 400px;"></textarea>
+                </div>
+                <div v-else>
+                  <quill-editor ref="quillEditor" v-model="form.content" :options="editorOptions" class="my-quill-editor"/>
+                </div>
+                <!-- 多图上传隐藏的input -->
+                <input type="file" ref="multiFileInput" @change="handleMultipleFiles" multiple hidden accept="image/jpeg, image/png" />
+              </div>
+            </el-form-item>
+            <el-form-item label="作者：" prop="author" class="custom-align-right">
+              <el-input v-model="form.author" autocomplete="off" placeholder="请输入作者"></el-input>
+            </el-form-item>
+            <el-form-item label="浏览量：" class="custom-align-right">
+              <el-input v-model="form.hits" autocomplete="off" placeholder="请输入浏览量"></el-input>
+            </el-form-item>
+            <el-form-item label="是否为原创：" prop="is_original" class="custom-align-right">
+              <el-radio-group v-model="form.is_original" @change="changeIsOriginal">
+                <el-radio :label="1">是</el-radio>
+                <el-radio :label="0">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <div v-if="form.is_original==0">
+              <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="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">
+                  <img src="@/assets/public/check.png"/>同意《免责声明》：
+                  <!-- <el-checkbox v-model="disclaimer" disabled="disabled"></el-checkbox> -->
+                </div>
+                <div class="disclaimerText">本文来源于网络转载，仅供学习交流使用，不构成商业目的。版权归原作者所有，如涉及作品内容、版权和其他问题，请在30日内与本站联系，我们将在第一时间处理。</div>
+              </div>
+            </div>
+            <div v-if="form.is_original==1">
+              <el-form-item label="来源名称：" prop="copyfrom" class="custom-align-right">
+                <el-input v-model="form.copyfrom" autocomplete="off" placeholder="请输入来源名称" disabled="disabled"></el-input>
+              </el-form-item>
+            </div>
+
+            <el-form-item label="资讯状态：" class="custom-align-right" style="width: 100%;">
+              <el-select v-model="form.status" placeholder="请选择..">
+                <el-option label="已发布" :value="1"></el-option>
+                <el-option label="待发布" :value="0"></el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+        </div>
+      </el-form>
+    </div>
+    <div class="bottomBtnBox">
+      <el-button type="info" @click="returnPage">返回</el-button>
+      <el-button type="primary" @click="editToServe" v-if="editStatus==true">确定</el-button>
+      <el-button type="primary" @click="addToServe" v-else>发布资讯</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle';
+//引入公用样式
+import '@/styles/global.less';
+
+import { quillEditor } from 'vue-quill-editor';
+import 'quill/dist/quill.snow.css';
+import ImageResize from 'quill-image-resize-module';
+import Quill from 'quill';  // 引入 Quill
+import Delta from 'quill-delta'; // 引入 Delta，用于手动修改文档
+
+// 注册 Image Resize 模块
+Quill.register('modules/imageResize', ImageResize);
+
+//解决富文本样式居中不显示
+import 'quill/dist/quill.core.css';
+
+export default {
+  components: {
+    quillEditor,
+    tableTitle
+  },
+  data() {
+    //0.全局操作 start ------------------------------------------------------------>
+    //表单验证
+    const validateEmpty = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    const validateArray = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    let self = this;
+    //0.全局操作 end ------------------------------------------------------------>
+    return {
+      //1.表单项 start ------------------------------------------------------------>
+      editStatus:false,
+      tableDivTitle:"添加资讯",
+      disclaimer:true,//免责声明
+      //提交表单
+      form: {
+        //1.1使用了外链
+        title: '',//资讯标题
+        islink:0,//是否使用外链 0非 1是
+        linkurl:"",//外链地址
+        //1.2没有使用外链
+        cat_arr_id:'',//导航池名称
+        level:"",//推荐等级
+        imgurl:"",//缩略图
+        keyword:"",//关键词
+        introduce:"",//描述
+        content:"",//内容
+        author:"",//作者
+        hits:"",//浏览量
+        is_original:0,//是否为原创 0非 1是
+        copyfrom:"",//来源名称
+        fromurl:"",//来源地址
+        status:0//状态 0待发布 1已发布 404已删除
+      },
+      //1.2 表单验证规则
+      formRules: {
+        //资讯名称不能为空
+        title:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //如果使用了外链，外链地址不能为空
+        linkurl:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //导航池名称不能为空
+        cat_arr_id:[{required:true,trigger:'blur',validator:validateArray}],
+        //推荐等级不能为空
+        //level:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //关键词不能为空
+        keyword:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //描述不能为空
+        introduce:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //内容不能为空
+        content:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //作者不能为空
+        author:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //是否原创不能为空
+        is_original:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //来源名称和地址不能为空
+        copyfrom:[{required:true,trigger:'blur',validator:validateEmpty}],
+        fromurl:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //缩略图不能为空
+        imgUrl:[{required:true,trigger:'blur',validator:validateEmpty}],
+        level:[{required:true,trigger:'blur',validator:validateEmpty}]
+      },
+      //1.3富文本编辑器配置
+      showHtml: false, //用于保存源码内容
+      editorHtml: '',
+      editorOptions: {
+        placeholder: '请输入内容...',
+        theme: 'snow',  // 主题样式
+        modules: {
+          toolbar: {
+            container: [
+              [{ 'font': [] }],                                // 字体
+              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],       // 标题
+              [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
+              ['bold', 'italic', 'underline', 'strike'],        // 加粗、斜体、下划线、删除线
+              [{ 'color': [] }, { 'background': [] }],          // 文字颜色、背景颜色
+              [{ 'script': 'sub' }, { 'script': 'super' }],     // 上标、下标
+              [{ 'list': 'ordered'}, { 'list': 'bullet' }],     // 列表
+              [{ 'indent': '-1'}, { 'indent': '+1' }],          // 缩进
+              [{ 'align': [] }],                                // 对齐方式
+              ['blockquote', 'code-block'],                     // 引用、代码块
+              ['link', 'image', 'video'],                       // 链接、图片、视频
+              ['clean'],
+              [{ 'html': true }]  // 添加自定义按钮的占位符
+            ],
+            handlers: {
+              image: () => {
+                this.handleImageClick();
+              },
+              showHtml: function() {
+                this.$emit('toggleSourceMode');
+              }
+            }
+          },
+          imageResize: {
+            displayStyles: {
+              backgroundColor: 'black',
+              border: 'none',
+              color: 'white'
+            },
+            modules: ['Resize', 'DisplaySize', 'Toolbar']  // 启用不同的调整方式
+          }
+        }
+      },
+      //1.4图片上传
+      imgUrl:"",//在页面上显示缩略图
+      //获取父级导航池
+      parentKey:0,//获取父级导航
+
+      parentData: {
+        checkStrictly: true,
+        lazy: true,
+        async lazyLoad (node, resolve) {
+          const { level, data } = node;
+          if (data && data.children && data.children.length !== 0) {
+            return resolve(node)
+          }
+          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)
+            }
+          })
+        }
+      },
+
+
+      
+      //表单项 end ------------------------------------------------------------>
+    };
+  },
+  methods: {
+    //1.提交表单 start ------------------------------------------------------------>
+    //1.1 直接上传图片
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isPNG = file.type === 'image/png';
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isJPG && !isPNG) {
+        this.$message.error('上传缩略图只能是 JPG 或 PNG 格式!');
+        return false;
+      }
+      if (!isLt2M) {
+        this.$message.error('上传缩略图大小不能超过 2MB!');
+        return false;
+      }
+
+      const formData = new FormData();
+      formData.append('file', file);
+
+      this.$store.dispatch('pool/uploadFile',formData).then(res=> {
+        this.imgUrl = res.data.imgUrl;//显示缩略图
+        this.form.imgurl = res.data.imgUrl;//提供表单地址
+        console.log(res.data.imgUrl)
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+
+      // 阻止默认的上传行为
+      return false;
+    },
+    //1.2 提交表单
+    addToServe(){
+      //提交之前先判断是否为外链
+      //如果使用了外链，清理掉除了外链以外的内容
+      if(this.form.islink==true){
+        this.form.islink = 1;
+        this.cleatForm(1)
+      }else{
+        this.form.islink = 0;
+      }
+      //如果推荐等级为空，则设置为0
+      if(this.form.level==""){
+        this.form.level = 0;
+      }
+      //先进行验证
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          //console.log(this.form)
+          this.$store.dispatch('news/addArticle',this.form).then(res=> {
+            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',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+    },
+    //1.3 清理表单
+    cleatForm(type){
+      if(type==1){
+        //使用了外链，进行部分表单清理
+        //this.form.cat_arr_id = "";
+        this.form.level = "";
+        this.form.imgurl = "";
+        this.form.keyword = "";
+        this.form.introduce = "";
+        this.form.content = "";
+        //this.form.author = "";
+        this.form.hits = "";
+        this.form.is_original = "";
+        this.form.copyfrom = "";
+        this.form.fromurl = "";
+        this.form.status = "";
+      }
+      if(type==2){
+        //完全清理表单
+        this.form.title = "";
+        this.form.islink = "";
+        this.form.linkurl = "";
+        this.form.cat_arr_id = "";
+        this.form.level = "";
+        this.form.imgurl = "";
+        this.form.keyword = "";
+        this.form.introduce = "";
+        this.form.content = "";
+        this.form.author = "";
+        this.form.hits = "";
+        this.form.is_original = "";
+        this.form.copyfrom = "";
+        this.form.fromurl = "";
+        this.form.status = "";
+      }
+    },
+    //提交表单 end ------------------------------------------------------------>
+
+    //2.跳转操作 start ------------------------------------------------------------>
+    returnPage(){
+      this.$router.push({
+        path: '/articleList',
+      });
+    },
+    //跳转操作 end ------------------------------------------------------------>
+
+    //3.回显操作 ------------------------------------------------------------>
+    //3.1回显数据
+    getMainData() {
+      let data = {
+        id: this.$route.query.id
+      };
+      this.$store.dispatch('news/getArticleInfo', data).then(res => {
+        console.log(res);
+        this.form.title = res.data.title;
+        //判断是否使用了外链
+        if(res.data.islink==1){
+          this.form.islink = true;
+        }else{  
+          this.form.islink = false;
+        }
+
+        //不是原创的时候显示来源
+        if(res.data.is_original==1){
+          this.form.is_original = 1;
+          this.form.copyfrom = "本网";
+        }else{
+          this.form.is_original = 0;
+          this.$nextTick(() => {
+            this.form.is_original = 0;
+            console.log('is_original:', this.form.is_original); // 确保值已更新
+          });
+          this.form.copyfrom = res.data.copyfrom;
+          this.form.linkurl = res.data.linkurl;
+        }
+        
+        // 回显导航池
+        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); // 加载路径数据
+        //回显推荐等级
+        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;
+        this.form.introduce = res.data.introduce;
+        this.form.content = res.data.content;
+        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.fromurl = res.data.fromurl;
+        this.form.status = res.data.status;
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      });
+    },
+    async loadCascaderPath(path) {
+      for (let i = 0; i < path.length; i++) {
+        const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
+        const level = i; // 当前层级的索引
+
+        await this.$store.dispatch('pool/categoryList', { pid: parentId })
+          .then((res) => {
+            const nodes = res.data.map(item => ({
+              value: item.id,
+              label: item.name,
+              leaf: level >= 3, // 假设4层结构，设置叶子节点标记
+            }));
+
+            // 级联选择器加载数据
+            if (level === path.length - 1) {
+              this.form.cat_arr_id = path; // 确保最后一级路径正确设置
+              this.parentKey += 1; // 强制刷新 cascader
+            }
+          });
+      }
+    },
+    //1.3提交修改
+    editToServe(){
+      //提交之前先判断是否为外链
+      //如果使用了外链，清理掉除了外链以外的内容
+      console.log(this.form)
+      if(this.form.islink==1){
+        this.cleatForm(1)
+      }
+      //如果推荐等级为空，则设置为0
+      if(this.form.level==""){
+        this.form.level = 0;
+      }
+      //添加要修改的id
+      this.form.id = this.editId;
+      //先进行验证
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          //console.log(this.form)
+          this.$store.dispatch('news/updateArticle',this.form).then(res=> {
+            if(res.code!=200){
+              this.$message.error("修改失败，请稍后再试！");
+            }else{
+              //汇报结果
+              this.$message({
+                type: 'success',
+                message: '已成功编辑资讯！'
+              });
+              this.cleatForm(2);
+              //返回列表页
+              this.returnPage()
+            }
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+    },
+    //1.4 修改是否原创
+    changeIsOriginal(){
+      if(this.form.is_original==1){
+        this.form.copyfrom = "本网";
+      }else{
+        this.form.copyfrom = "";
+        this.form.fromurl = "";
+      }
+    },
+    //跳转操作 end ------------------------------------------------------------>
+
+    //4.富文本编辑器 start ------------------------------------------------------------>
+    //4.1 编辑器点击上传图片
+    handleImageClick() {
+      this.$refs.multiFileInput.click(); // 打开文件选择框
+    },
+    handleMultipleFiles(event) {
+      const files = event.target.files;
+      if (files.length) {
+        this.uploadMultipleImages(files); // 处理多图片上传
+      }
+    },
+    uploadMultipleImages(files) {
+      const uploadPromises = [];
+      for (let i = 0; i < files.length; i++) {
+        uploadPromises.push(this.uploadImage(files[i]));
+      }
+
+      Promise.all(uploadPromises).then(urls => {
+        const quillEditor = this.$refs.quillEditor.quill;
+        urls.forEach(url => {
+          const range = quillEditor.getSelection();
+          quillEditor.insertEmbed(range.index, 'image', url); // 在编辑器中插入图片
+        });
+      }).catch(error => {
+        this.$message.error('图片上传失败，请重试！');
+      });
+    },
+    uploadImage(file) {
+      const formData = new FormData();
+      formData.append('file', file);
+      return this.$store.dispatch('pool/uploadFile', formData)
+        .then(res => {
+          if (res && res.data && res.data.imgUrl) {
+            return res.data.imgUrl;
+          } else {
+            throw new Error('图片上传失败');
+          }
+        })
+        .catch(error => {
+          this.$message.error('图片上传失败，请重试！');
+          throw error;
+        });
+    },
+
+    //4.2 图片粘贴上传
+    // 处理从网页粘贴的图片 URL
+    handleImageFromWeb(imageUrl) {
+      return new Promise((resolve) => {
+        console.log('开始下载图片:', imageUrl);
+
+        this.fetchImageAsBlob(imageUrl).then((blob) => {
+          console.log('图片已下载为 Blob:', blob);
+
+          const formData = new FormData();
+          formData.append('file', blob, 'image.jpg');
+
+          this.$store.dispatch('pool/uploadFile', formData).then((res) => {
+            if (res && res.data && res.data.imgUrl) {
+              console.log('图片上传成功:', res.data.imgUrl);
+              resolve(res.data.imgUrl);
+            } else {
+              console.log('图片上传失败，保留原 URL:', imageUrl);
+              resolve(imageUrl);
+            }
+          }).catch((error) => {
+            console.error('图片上传时出现错误:', error);
+            resolve(imageUrl);
+          });
+        }).catch((error) => {
+          console.error('图片下载失败:', error);
+          resolve(imageUrl);
+        });
+      });
+    },
+    fetchImageAsBlob(url) {
+      return fetch(url)
+        .then(response => {
+          if (!response.ok) {
+            throw new Error('Failed to fetch image');
+          }
+          return response.blob();
+        });
+    },
+    //编辑源码
+    toggleSourceMode() {
+      if (!this.showHtml) {
+        // 切换到源码模式，将编辑器内容同步到 textarea 中
+        this.editorHtml = this.$refs.quillEditor.quill.root.innerHTML;
+        this.showHtml = true; // 显示 textarea
+      } else {
+        // 切换回富文本模式，将 textarea 内容同步回编辑器
+        this.showHtml = false; // 显示 Quill 编辑器
+
+        // Quill 编辑器可能被销毁，所以使用 $nextTick 确保 DOM 渲染完成后再操作编辑器
+        this.$nextTick(() => {
+          if (this.$refs.quillEditor) {
+            this.$refs.quillEditor.quill.root.innerHTML = this.editorHtml;
+          } else {
+            console.error('Quill 编辑器实例未找到');
+          }
+        });
+      }
+    }
+    //富文本编辑器 end ------------------------------------------------------------>
+
+  },
+  mounted(){
+    //1.判断是新建还是回显
+    if(this.$route.query.id!=undefined){
+      this.editId = this.$route.query.id;
+      this.editStatus = true;
+      console.log("编辑新闻！")
+      this.getMainData();
+    }else{
+      this.editStatus = false;
+      console.log("添加新闻！")
+    }
+
+    //复制内容到富文本 start ------------------------------------------------------------>
+    this.$nextTick(() => {
+      const quillEditor = this.$refs.quillEditor.quill;
+
+      if (quillEditor) {
+        console.log('Quill 编辑器已初始化');
+
+        // 在粘贴事件触发时，记录所有 img 的 src
+        quillEditor.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
+          if (node.tagName === 'IMG') {
+            const imageUrl = node.getAttribute('src');
+            console.log('检测到粘贴的图片 URL:', imageUrl);
+
+            if (imageUrl && !imageUrl.startsWith('data:') && !imageUrl.startsWith('file://')) {
+              // 先处理图片上传
+              this.handleImageFromWeb(imageUrl).then((uploadedImageUrl) => {
+                // 查找编辑器中所有 img 标签并替换 src
+                const imgs = quillEditor.root.querySelectorAll('img');
+                imgs.forEach((img) => {
+                  if (img.getAttribute('src') === imageUrl) {
+                    img.setAttribute('src', uploadedImageUrl);  // 替换 src
+                    console.log('图片 src 已替换为:', uploadedImageUrl);
+                  }
+                });
+              });
+            }
+          }
+          return delta;  // 返回原始 delta
+        });
+      } else {
+        console.error('Quill 初始化失败');
+      }
+
+    });
+    //复制富文本 end ------------------------------------------------------------>
+  },
+};
+</script>
+
+<style scoped lang="less">
+  //文本编辑器
+  .QuillTitle {
+    line-height: 36px;
+    font-size: 14px;
+    color: #606266;
+    font-weight:bold;
+    padding-left: 30px;
+    span{
+      color: #ff4949
+    }
+    .QuillModelBtn {
+      display: inline-block;
+      margin-left: 10px;
+      font-size: 12px;
+      color: #999;
+      cursor: pointer;
+    }
+  }
+  .editor-container {
+    height: 420px;
+    padding-bottom:20px;
+  }
+  .my-quill-editor {
+    height: 320px;
+  }
+  .ql-editor {
+    height: 320px;
+  }
+
+  /* 富文本对齐方式 */
+	.ql-align-center{
+    text-align: center;
+  }
+  .ql-align-right{
+    text-align: right;
+  }
+  .ql-indent-1{
+    padding-left: 16px;
+  }
+  .ql-indent-2{
+    padding-left: 32px;
+  }
+  .ql-indent-3{
+    padding-left: 48px;
+  }
+  .ql-indent-4{
+    padding-left: 64px;
+  }
+  .ql-indent-5{
+    padding-left: 80px;
+  }
+  .ql-indent-6{
+    padding-left: 96px;
+  }
+  .ql-indent-7{
+    padding-left: 112px;
+  }
+  .ql-indent-8{
+    padding-left: 128px;
+  }
+
+
+  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+  ::v-deep .custom-form-item > .el-form-item__label {
+    line-height: 140px !important;
+  }
+  ::v-deep .custom-textarea .el-textarea__inner {
+    resize: none; /* 禁止用户拖拽调整大小 */
+  }
+  ::v-deep .custom-align-right .el-form-item__label {
+    text-align: right; /* 设置标签文字右对齐 */
+  }
+  ::v-deep .el-select {
+    width: 100%; /* 禁止用户拖拽调整大小 */
+  }
+  
+  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/role/components/userDefault.vue

@@ -1,5 +1,7 @@
 <template>
+
   <div class="mainBox">
+      <!-- 个人会员 -->
     <div class="layerBox">
       <el-form ref="form" :model="form" :rules="loginRules" class="login-form" autocomplete="on" label-position="left" label-width="120px">
         <div class="formDiv">
@@ -115,6 +117,7 @@
               placeholder="选择日期">
             </el-date-picker>
           </el-form-item>
+
           <el-form-item label="有效期：" :label-width="formLabelWidth" prop="" class="custom-align-right">
             <el-date-picker
               v-model="timeList"
@@ -127,6 +130,18 @@
             </el-date-picker>
             <el-checkbox v-model="form.long_time" :true-label="1" :false-label="0" class="longTimeCheckbox">无限期</el-checkbox>
           </el-form-item>
+
+           <!-- <el-form-item label="站点标识：" :label-width="formLabelWidth" prop="city_arr_id" class="custom-align-right"> -->
+            <el-form-item label="站点标识：" :label-width="formLabelWidth" prop="websiteTag_arr_id" class="custom-align-right">
+            <!-- 级联选择器 xx-->
+            <!-- websiteTag_ -->
+            <!-- <el-cascader v-model="form.website_column_arr_id" :props="props_1" :options="website_column_arr" filterable clearable ></el-cascader> -->
+            
+            <el-cascader v-model="form.websiteTag_arr_id" :options="options_arr" filterable clearable></el-cascader>
+ 
+          </el-form-item>
+
+
           <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>
@@ -216,11 +231,36 @@ export default {
       }
     }
     return {
+      //xx
+      // options_arr:[ { "label": "农网", "value": 1, "pid": 0, "sort": 1, "remark": "农网栏目信息", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 09:28:19", "children": [ { "label": "核心网站(行星)", "value": 3, "pid": 1, "sort": 1, "remark": "核心网站", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:31:26" }, { "label": "重点网系(卫星)", "value": 4, "pid": 1, "sort": 1, "remark": "重点网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:06" }, { "label": "垂直网系(卫星)", "value": 5, "pid": 1, "sort": 1, "remark": "垂直网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:43" }, { "label": "频道网系(卫星)", "value": 6, "pid": 1, "sort": 1, "remark": "频道网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:19" }, { "label": "地方网系(卫星)", "value": 7, "pid": 1, "sort": 1, "remark": "地方网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:44" } ] } ],
+      options_arr:[],
+
       formLabelWidth:"120px",
       editId:"",
       uploadFileUrl:URL.testUrl+"/public/uploadFile",//获得上传地址
       headers: {},
+
+
+      website_tag_params:{//xx
+            keyword:"",//网站名称查询
+            website_column_id:[],//使用网系id查询
+            city_id:[],//使用城市id查询
+
+            page:1,//当前是第几页
+            pageSize:666666,//一共多少条
+            name:"",
+       },
+
+
+
       form:{
+
+            
+        websiteTag_arr_id:[],    //站点标识下拉id only
+        websiteTag_reg:"",    
+        sszq:"", //站点标识下拉id
+        
+
         type_id:1,//个人会员
         role_id:"",//角色id 
         user_name:"",//登录账号
@@ -256,6 +296,12 @@ export default {
       passwordType2: 'password',
       //配置from表单验证规则
       loginRules: { 
+
+
+      //   站点标识xx
+      websiteTag_arr_id: [{ type:'array',required: true, trigger: 'blur', validator: validateArray }],
+
+
         //1.角色id
         role_id: [{ required: true, trigger: 'blur', validator: validateArray }],
         //2.登录账号
@@ -408,8 +454,15 @@ export default {
       console.log('上传成功:', response);
       console.log(this.form.other);
     },
-    //提交表单
+    //提交表单xx
     addData(){
+
+
+          //站点标识内容
+
+          this.form.sszq=String(this.form.websiteTag_arr_id[0])//站点标识内容加到form
+
+
       //1.格式化时间戳
       this.form.birthday = formatLocalDate(this.form.birthday);
       if(this.form.long_time==0){
@@ -565,8 +618,36 @@ export default {
         path: '/userList',
       });
     },
+
+    get_website_tag_arr_fun(){ //得到站点标识所有内容xx
+             
+            this.$store.dispatch('pool/get_website_tag_arr_actions',this.website_tag_params).then(res=> {
+                  console.log("res.data.listres.data.list",res.data.list)
+                  res.data.list.forEach(( per_obj ) => { 
+
+                        let new_per = {
+                              label: per_obj.name,
+                              value: per_obj.id,
+                        }
+
+                        this.options_arr.push( new_per )
+                  
+                  })
+                  console.log("get_website_tag_arr_funget_website_tag_arr_fun")
+                  console.log("get_website_tag_arr_funget_website_tag_arr_fun",this.options_arr)
+            })
+
+     },
+
+
+
   },
   mounted(){
+
+     
+      this.get_website_tag_arr_fun()//得到站点标识所有内容xx
+ 
+
     this.getRoleList();
     //判断是新建还是回显
     if(this.$route.query.id!=undefined){

src/views/role/components/userEnterprise.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="mainBox">
+      <!-- 企业会员 -->
     <div class="layerBox">
       <el-form ref="form" :model="form" :rules="loginRules" class="login-form" autocomplete="on" label-position="left" label-width="120px">
         <div class="formDiv">
@@ -96,6 +97,7 @@
           <el-form-item label="法人身份证：" :label-width="formLabelWidth" prop="legal_person_id_card" class="custom-align-right">
             <el-input v-model="form.legal_person_id_card" autocomplete="off" placeholder="请输入法人身份证号.."></el-input>
           </el-form-item>
+
           <el-form-item label="有效期：" :label-width="formLabelWidth" prop="" class="custom-align-right">
             <el-date-picker
               v-model="timeList"
@@ -108,6 +110,19 @@
             </el-date-picker>
             <el-checkbox v-model="form.long_time" :true-label="1" :false-label="0" class="longTimeCheckbox">无限期</el-checkbox>
           </el-form-item>
+
+          <!-- <el-form-item label="站点标识：" :label-width="formLabelWidth" prop="city_arr_id" class="custom-align-right"> -->
+            <el-form-item label="站点标识：" :label-width="formLabelWidth" prop="websiteTag_arr_id" class="custom-align-right">
+            <!-- 级联选择器 xx-->
+            <!-- websiteTag_ -->
+            <!-- <el-cascader v-model="form.website_column_arr_id" :props="props_1" :options="website_column_arr" filterable clearable ></el-cascader> -->
+            
+            <el-cascader v-model="form.websiteTag_arr_id" :options="options_arr" filterable clearable></el-cascader>
+ 
+          </el-form-item>
+
+
+
           <el-form-item label="传真：" :label-width="formLabelWidth" prop="fax" class="custom-align-right">
             <el-input v-model="form.fax" autocomplete="off" placeholder="请输入传真号码.."></el-input>
           </el-form-item>
@@ -190,11 +205,34 @@ export default {
       }
     }
     return {
+      //xx
+      // options_arr:[ { "label": "农网", "value": 1, "pid": 0, "sort": 1, "remark": "农网栏目信息", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 09:28:19", "children": [ { "label": "核心网站(行星)", "value": 3, "pid": 1, "sort": 1, "remark": "核心网站", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:31:26" }, { "label": "重点网系(卫星)", "value": 4, "pid": 1, "sort": 1, "remark": "重点网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:06" }, { "label": "垂直网系(卫星)", "value": 5, "pid": 1, "sort": 1, "remark": "垂直网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:43" }, { "label": "频道网系(卫星)", "value": 6, "pid": 1, "sort": 1, "remark": "频道网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:19" }, { "label": "地方网系(卫星)", "value": 7, "pid": 1, "sort": 1, "remark": "地方网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:44" } ] } ],
+      options_arr:[],
+
+
       formLabelWidth:"120px",
       editId:"",
       uploadFileUrl:URL.testUrl+"/public/uploadFile",//获得上传地址
       headers: {},
+
+      website_tag_params:{//xx
+            keyword:"",//网站名称查询
+            website_column_id:[],//使用网系id查询
+            city_id:[],//使用城市id查询
+
+            page:1,//当前是第几页
+            pageSize:666666,//一共多少条
+            name:"",
+       },
+
+ 
       form:{
+
+            websiteTag_arr_id:[],    //站点标识下拉id only
+        websiteTag_reg:"",    
+        sszq:"", //站点标识下拉id
+
+
         type_id:3,//企业会员
         role_id:"",//角色id 
         user_name:"",//登录账号
@@ -230,6 +268,11 @@ export default {
       passwordType2: 'password',
       //配置from表单验证规则
       loginRules: { 
+
+      //   站点标识xx
+      websiteTag_arr_id: [{ type:'array',required: true, trigger: 'blur', validator: validateArray }],
+
+
         //1.角色id
         role_id: [{ required: true, trigger: 'blur', validator: validateArray }],
         //2.登录账号
@@ -360,8 +403,10 @@ export default {
       console.log('上传成功:', response);
       console.log(this.form.other);
     },
-    //提交表单
+    //提交表单 xx
     addData(){
+      this.form.sszq=String(this.form.websiteTag_arr_id[0])//站点标识内容加到form
+
       //1.格式化时间戳
       if(this.form.long_time==0){
         this.form.from_time = formatLocalDate(this.timeList[0]);
@@ -519,8 +564,33 @@ export default {
         path: '/userList',
       });
     },
+
+
+    get_website_tag_arr_fun(){ //得到站点标识所有内容xx
+            this.$store.dispatch('pool/get_website_tag_arr_actions',this.website_tag_params).then(res=> {
+                  console.log("res.data.listres.data.list",res.data.list)
+                  res.data.list.forEach(( per_obj ) => { 
+
+                        let new_per = {
+                              label: per_obj.name,
+                              value: per_obj.id,
+                        }
+
+                        this.options_arr.push( new_per )
+                  
+                  })
+                  // console.log("get_website_tag_arr_funget_website_tag_arr_fun")
+                  // console.log("get_website_tag_arr_funget_website_tag_arr_fun",this.options_arr)
+            })
+
+     },
+
+
   },
   mounted(){
+
+      this.get_website_tag_arr_fun()//得到站点标识所有内容xx
+
     this.getRoleList();
     //判断是新建还是回显
     if(this.$route.query.id!=undefined){
@@ -534,6 +604,11 @@ export default {
     this.setHeaders(); // 在组件挂载时设置 headers
   }
 };
+
+
+
+
+
 </script>
 
 <style scoped lang="less">

src/views/role/components/userInvestigate.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="mainBox">
+      <!-- 调研员 -->
     <div class="layerBox">
       <el-form ref="form" :model="form" :rules="loginRules" class="login-form" autocomplete="on" label-position="left" label-width="120px">
         <div class="formDiv">
@@ -118,12 +119,27 @@
           <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="city_arr_id" class="custom-align-right">
             <!-- 级联选择器 -->
             <CityCascader v-model="form.city_arr_id" @update-city-id="update_city_arr_id" v-if="isNational==0"></CityCascader>
             <el-cascader :options="options" :show-all-levels="false" disabled v-else></el-cascader>
             <el-checkbox v-model="isNational" :true-label="1" :false-label="0" class="longTimeCheckbox">全国</el-checkbox>
           </el-form-item>
+          
+
+
+          <!-- <el-form-item label="站点标识：" :label-width="formLabelWidth" prop="city_arr_id" class="custom-align-right"> -->
+          <el-form-item label="站点标识：" :label-width="formLabelWidth" prop="websiteTag_arr_id" class="custom-align-right">
+            <!-- 级联选择器 xx-->
+            <!-- websiteTag_ -->
+            <!-- <el-cascader v-model="form.website_column_arr_id" :props="props_1" :options="website_column_arr" filterable clearable ></el-cascader> -->
+            
+            <el-cascader v-model="form.websiteTag_arr_id" :options="options_arr" filterable clearable></el-cascader>
+ 
+          </el-form-item>
+
+
           <el-form-item label="有效期：" :label-width="formLabelWidth" prop="" class="custom-align-right">
             <el-date-picker
               v-model="timeList"
@@ -223,11 +239,34 @@ export default {
       }
     }
     return {
+      //xx
+      // options_arr:[ { "label": "农网", "value": 1, "pid": 0, "sort": 1, "remark": "农网栏目信息", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 09:28:19", "children": [ { "label": "核心网站(行星)", "value": 3, "pid": 1, "sort": 1, "remark": "核心网站", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:31:26" }, { "label": "重点网系(卫星)", "value": 4, "pid": 1, "sort": 1, "remark": "重点网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:06" }, { "label": "垂直网系(卫星)", "value": 5, "pid": 1, "sort": 1, "remark": "垂直网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:43" }, { "label": "频道网系(卫星)", "value": 6, "pid": 1, "sort": 1, "remark": "频道网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:19" }, { "label": "地方网系(卫星)", "value": 7, "pid": 1, "sort": 1, "remark": "地方网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:44" } ] } ],
+      options_arr:[],
+
+      props_1: { multiple: true },//下拉多选
       formLabelWidth:"120px",
       editId:"",
       uploadFileUrl:URL.testUrl+"/public/uploadFile",//获得上传地址
       headers: {},
-      form:{
+
+      
+      website_tag_params:{//xx
+            keyword:"",//网站名称查询
+            website_column_id:[],//使用网系id查询
+            city_id:[],//使用城市id查询
+
+            page:1,//当前是第几页
+            pageSize:666666,//一共多少条
+            name:"",
+       },
+
+
+      form:{//xx
+            
+        websiteTag_arr_id:[],    //站点标识下拉id only
+        websiteTag_reg:"",    
+        sszq:"", //站点标识下拉id
+        
         type_id:4,//调研员
         role_id:"",//角色id 
         user_name:"",//登录账号
@@ -251,6 +290,7 @@ export default {
         email:"",//电子邮箱
         other:[],//相关资料
         remark:"",//提示词
+
       },
       timeList:[],//时间段
       otherList:[],//相关资料列表
@@ -266,6 +306,13 @@ export default {
       passwordType2: 'password',
       //配置from表单验证规则
       loginRules: { 
+
+            // websiteTag_reg  
+
+
+      //   站点标识xx
+      websiteTag_arr_id: [{ type:'array',required: true, trigger: 'blur', validator: validateArray }],
+
         //1.角色id
         role_id: [{ required: true, trigger: 'blur', validator: validateArray }],
         //2.登录账号
@@ -427,8 +474,22 @@ export default {
       console.log('上传成功:', response);
       console.log(this.form.other);
     },
-    //提交表单
+    //提交表单xx
     addData(){
+          
+          //站点标识内容
+
+          this.form.sszq=String(this.form.websiteTag_arr_id[0])//站点标识内容加到form
+
+      //  console.log("websiteTag_arr_idwebsiteTag_arr_id",this.options_arr)     
+
+
+      // console.log("this.form.sszq",typeof(this.form.sszq),this.form.sszq)
+      // console.log("this.form======",typeof(this.form.sszq),this.form)
+      // return
+      // console.log("this.form.websiteTag_arr_id",this.form.websiteTag_arr_id)
+  
+       
       //1.格式化时间戳
       this.form.birthday = formatLocalDate(this.form.birthday);
       if(this.form.long_time==0){
@@ -544,8 +605,13 @@ export default {
         }));
       })
     },
-    //修改用户
+    //修改用户xx
     editData(){
+
+            this.form.sszq=String(this.form.websiteTag_arr_id[0])//站点标识内容加到form
+            // console.log("this.form.sszq",this.form.sszq)
+       
+
       //当有效期为长期的时候，去掉from_time和to_time字段
       if(this.form.long_time==0){
         this.form.from_time = formatLocalDate(this.timeList[0]);
@@ -604,8 +670,37 @@ export default {
         path: '/userList',
       });
     },
-  },
-  mounted(){
+
+
+    get_website_tag_arr_fun(){ //得到站点标识所有内容xx
+            this.$store.dispatch('pool/get_website_tag_arr_actions',this.website_tag_params).then(res=> {
+                  // console.log("res.data.listres.data.list",res.data.list)
+                  res.data.list.forEach(( per_obj ) => { 
+
+                        let new_per = {
+                              label: per_obj.name,
+                              value: per_obj.id,
+                        }
+
+                        this.options_arr.push( new_per )
+                  
+                  })
+                  // console.log("get_website_tag_arr_funget_website_tag_arr_fun")
+                  // console.log("get_website_tag_arr_funget_website_tag_arr_fun",this.options_arr)
+            })
+
+     },
+
+  
+
+},
+ 
+mounted(){
+      
+      this.get_website_tag_arr_fun()//得到站点标识所有内容xx
+
+
+
     this.getRoleList();
     //判断是新建还是回显
     if(this.$route.query.id!=undefined){
@@ -617,6 +712,8 @@ export default {
     }
     //设置token
     this.setHeaders(); // 在组件挂载时设置 headers
+
+     
   }
 };
 </script>

src/views/role/components/userPolitician.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="mainBox">
+      <!-- 政务会员 -->
     <div class="layerBox">
       <el-form ref="form" :model="form" :rules="loginRules" class="login-form" autocomplete="on" label-position="left" label-width="120px">
         <div class="formDiv">
@@ -96,9 +97,11 @@
           <el-form-item label="法人电话：" :label-width="formLabelWidth" prop="legal_person_mobile" class="custom-align-right">
             <el-input v-model="form.legal_person_mobile" autocomplete="off" placeholder="请输入法人联系电话.."></el-input>
           </el-form-item>
+
           <el-form-item label="法人身份证：" :label-width="formLabelWidth" prop="legal_person_id_card" class="custom-align-right">
             <el-input v-model="form.legal_person_id_card" autocomplete="off" placeholder="请输入法人身份证号.."></el-input>
           </el-form-item>
+
           <el-form-item label="有效期：" :label-width="formLabelWidth" prop="" class="custom-align-right">
             <el-date-picker
               v-model="timeList"
@@ -111,6 +114,21 @@
             </el-date-picker>
             <el-checkbox v-model="form.long_time" :true-label="1" :false-label="0" class="longTimeCheckbox">无限期</el-checkbox>
           </el-form-item>
+
+ 
+
+          <!-- <el-form-item label="站点标识：" :label-width="formLabelWidth" prop="city_arr_id" class="custom-align-right"> -->
+            <el-form-item label="站点标识：" :label-width="formLabelWidth" prop="websiteTag_arr_id" class="custom-align-right">
+            <!-- 级联选择器 xx-->
+            <!-- websiteTag_ -->
+            <!-- <el-cascader v-model="form.website_column_arr_id" :props="props_1" :options="website_column_arr" filterable clearable ></el-cascader> -->
+            
+            <el-cascader v-model="form.websiteTag_arr_id" :options="options_arr" filterable clearable></el-cascader>
+ 
+          </el-form-item>
+
+
+
           <el-form-item label="传真：" :label-width="formLabelWidth" prop="fax" class="custom-align-right">
             <el-input v-model="form.fax" autocomplete="off" placeholder="请输入传真号码.."></el-input>
           </el-form-item>
@@ -193,10 +211,28 @@ export default {
       }
     }
     return {
+      //xx
+      // options_arr:[ { "label": "农网", "value": 1, "pid": 0, "sort": 1, "remark": "农网栏目信息", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 09:28:19", "children": [ { "label": "核心网站(行星)", "value": 3, "pid": 1, "sort": 1, "remark": "核心网站", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:31:26" }, { "label": "重点网系(卫星)", "value": 4, "pid": 1, "sort": 1, "remark": "重点网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:06" }, { "label": "垂直网系(卫星)", "value": 5, "pid": 1, "sort": 1, "remark": "垂直网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:32:43" }, { "label": "频道网系(卫星)", "value": 6, "pid": 1, "sort": 1, "remark": "频道网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:19" }, { "label": "地方网系(卫星)", "value": 7, "pid": 1, "sort": 1, "remark": "地方网系", "column_arr_id": null, "updated_at": "2024-06-19 23:58:52", "created_at": "2024-06-06 01:33:44" } ] } ],
+      options_arr:[],
+
       formLabelWidth:"120px",
       editId:"",
       uploadFileUrl:URL.testUrl+"/public/uploadFile",//获得上传地址
       headers: {},
+
+
+      website_tag_params:{//xx
+            keyword:"",//网站名称查询
+            website_column_id:[],//使用网系id查询
+            city_id:[],//使用城市id查询
+
+            page:1,//当前是第几页
+            pageSize:666666,//一共多少条
+            name:"",
+       },
+
+
+
       form:{
         type_id:2,//政务会员
         role_id:"",//角色id 
@@ -234,6 +270,11 @@ export default {
       passwordType2: 'password',
       //配置from表单验证规则
       loginRules: { 
+
+                  //   站点标识xx
+            websiteTag_arr_id: [{ type:'array',required: true, trigger: 'blur', validator: validateArray }],
+
+
         //1.角色id
         role_id: [{ required: true, trigger: 'blur', validator: validateArray }],
         //2.登录账号
@@ -521,8 +562,35 @@ export default {
         path: '/userList',
       });
     },
+
+    
+    get_website_tag_arr_fun(){ //得到站点标识所有内容xx
+            this.$store.dispatch('pool/get_website_tag_arr_actions',this.website_tag_params).then(res=> {
+                  console.log("res.data.listres.data.list",res.data.list)
+                  res.data.list.forEach(( per_obj ) => { 
+
+                        let new_per = {
+                              label: per_obj.name,
+                              value: per_obj.id,
+                        }
+
+                        this.options_arr.push( new_per )
+                  
+                  })
+                  // console.log("get_website_tag_arr_funget_website_tag_arr_fun")
+                  // console.log("get_website_tag_arr_funget_website_tag_arr_fun",this.options_arr)
+            })
+
+     },
+
+
+
+
+
   },
   mounted(){
+      this.get_website_tag_arr_fun()//得到站点标识所有内容xx 
+
     this.getRoleList();
     //判断是新建还是回显
     if(this.$route.query.id!=undefined){

src/views/role/creatUser.vue

@@ -14,11 +14,15 @@
       </div>
     </div>
     <!-- 根据 userType 的值动态显示组件 -->
-    <user-admin v-if="userType === '10000'" />
-    <user-investigate v-if="userType === '4'" />
-    <user-default v-if="userType === '1'" />
-    <user-enterprise v-if="userType === '3'" />
-    <user-politician v-if="userType === '2'" />
+
+     
+      <user-admin v-if="userType === '10000'" />
+      <user-investigate v-if="userType === '4'" />
+      <user-default v-if="userType === '1'" />
+      <user-enterprise v-if="userType === '3'" />
+      <user-politician v-if="userType === '2'" /> 
+      
+
   </div>
 </template>
 
@@ -45,7 +49,7 @@ export default {
   data() {
     return {
       tableDivTitle: "选择用户类型",
-      userType: "10000", // 用户类型
+      userType: "10000", // 用户类型xx
       radioOptions: [
         { label: '管理员', value: '10000' },
         { label: '调研员', value: '4' },
@@ -66,6 +70,7 @@ export default {
     }
   },
   mounted() {
+        
     // 其他逻辑
     if (this.$route.query.type_id != undefined) {
       this.userType = String(this.$route.query.type_id);

src/views/website/WebsiteList.vue

@@ -503,6 +503,7 @@ export default {
     getwebsiteColumn(){
       let that = this;
       this.$store.dispatch('pool/getwebsiteColumn').then(res=> {
+            console.log("res.data",res.data)
         let arrData = this.transformData(res.data)
         this.website_column_arr = arrData;
       })

src/views/website/creatWebsite - 副本.vue

@@ -0,0 +1,877 @@
+<template>
+  <div class="mainBox">
+    <div class="layerTabsBox">
+      <div class="layerTabsItem active">配置首页</div>
+      <div class="layerTabsItem">配置列表页</div>
+      <div class="layerTabsItem">配置详情页</div>
+    </div>
+    <!-- 工具栏 start ---------------------------------------->
+    <div class="menuPostionBox">
+      <MenuTopBox @add-module="addModule"/>
+    </div>
+    <!-- 工具栏 end ---------------------------------------->
+
+    <!-- 栅格布局 预览模式 start ---------------------------------------->
+    <div class="layerBox">
+      <tableTitle :name="websiteTitle"/>
+      <div class="grid-layout-demo">
+        <grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true">
+          <grid-item
+            v-for="(item, index) in layout"
+            :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">              
+           
+              <!-- 模块内容1 顶部菜单 --> 
+              <div v-if="item.type == 1" class="module1Box">
+                <div class="module1Title">{{form.type1.welcomeText}}</div>
+                <div class="module1LoginLink">{{form.type1.linkText}}</div>
+                <div class="shadowBox">
+                  <div class="editBtnBox">
+                    <el-button @click="openWindow(item)" type="primary" size="mini" circle>
+                      <i class="el-icon-edit"></i>
+                    </el-button>
+                    <el-button @click="deleteModule(item)" type="danger" size="mini" circle>
+                      <i class="el-icon-delete"></i>
+                    </el-button>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 模块内容2 logo栏 --> 
+              <div v-if="item.type == 2" class="module2Box">
+                <div class="module2Logo">
+                  <div class="module2NoImgBox">
+                    <img src="@/assets/public/upload/noImage.png">
+                    <div>请添加图片</div>
+                  </div>
+                </div>
+                <div class="module2rightAd">
+                  <div class="module2NoImgBox">
+                    <img src="@/assets/public/upload/noImage.png">
+                    <div>请添加图片</div>
+                  </div>
+                </div>
+                <div class="shadowBox">
+                  <div class="editBtnBox">
+                    <el-button @click="openWindow(item)" type="primary" size="mini" circle>
+                      <i class="el-icon-edit"></i>
+                    </el-button>
+                    <el-button @click="deleteModule(item)" type="danger" size="mini" circle>
+                      <i class="el-icon-delete"></i>
+                    </el-button>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 模块内容3 导航栏 --> 
+              <div v-if="item.type == 3" class="module3Box">
+                <div class="module3Nav">
+                  <div class="module3NavItem" v-for="(item,index) in form.type3" :key="index">{{item.linkText}}</div>
+                </div>
+                <div class="shadowBox">
+                  <div class="editBtnBox">
+                    <el-button @click="openWindow(item)" type="primary" size="mini" circle>
+                      <i class="el-icon-edit"></i>
+                    </el-button>
+                    <el-button @click="deleteModule(item)" type="danger" size="mini" circle>
+                      <i class="el-icon-delete"></i>
+                    </el-button>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 模块内容4 Banner --> 
+              <div v-if="item.type == 4" class="module4Box">
+                <div class="module4Banner">
+                  <div class="module4BannerNoImgBox">
+                    <img src="@/assets/public/upload/noImage.png">
+                    <div>请添加图片</div>
+                  </div>
+                </div>
+                <div class="shadowBox">
+                  <div class="editBtnBox">
+                    <el-button @click="openWindow(item)" type="primary" size="mini" circle>
+                      <i class="el-icon-edit"></i>
+                    </el-button>
+                    <el-button @click="deleteModule(item)" type="danger" size="mini" circle>
+                      <i class="el-icon-delete"></i>
+                    </el-button>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 模块内容6 图片列表 --> 
+              <div v-if="item.type == 6" class="module6Box">
+                <div class="module6imgBox">
+                  <div class="module6item">
+                    <div>
+                      <img src="@/assets/public/upload/noImage.png">
+                      <div>请添加图片</div>
+                    </div>
+                  </div>
+                  <div class="module6item">
+                    <div>
+                      <img src="@/assets/public/upload/noImage.png">
+                      <div>请添加图片</div>
+                    </div>
+                  </div>
+                  <div class="module6item">
+                    <div>
+                      <img src="@/assets/public/upload/noImage.png">
+                      <div>请添加图片</div>
+                    </div>
+                  </div>
+                  <div class="module6item">
+                    <div>
+                      <img src="@/assets/public/upload/noImage.png">
+                      <div>请添加图片</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="shadowBox">
+                  <div class="editBtnBox">
+                    <el-button @click="openWindow(item)" type="primary" size="mini" circle>
+                      <i class="el-icon-edit"></i>
+                    </el-button>
+                    <el-button @click="deleteModule(item)" type="danger" size="mini" circle>
+                      <i class="el-icon-delete"></i>
+                    </el-button>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 模块内容7 文本列表 --> 
+              <div v-if="item.type == 7" class="module7Box">
+                <div class="module7textList">
+                  <div v-for="(item,index) of form.type7" :key="index">{{item.linkText}}</div>
+                </div>
+                <div class="shadowBox">
+                  <div class="editBtnBox">
+                    <el-button @click="openWindow(item)" type="primary" size="mini" circle>
+                      <i class="el-icon-edit"></i>
+                    </el-button>
+                    <el-button @click="deleteModule(item)" type="danger" size="mini" circle>
+                      <i class="el-icon-delete"></i>
+                    </el-button>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 模块内容8 图文列表 --> 
+              <div v-if="item.type == 8" class="module8Box">
+                <div class="module8ImgBox">
+                  <div class="module8ImgItem" v-for="(item,index) of form.type8" :key="index">
+                    <img src="@/assets/public/upload/noImage.png">
+                    <div class="module8ImgItemText">
+                      <div class="module8ImgItemTitle">{{item.title}}</div>
+                      <div class="module8ImgItemText">{{item.text}}</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="shadowBox">
+                  <div class="editBtnBox">
+                    <el-button @click="openWindow(item)" type="primary" size="mini" circle>
+                      <i class="el-icon-edit"></i>
+                    </el-button>
+                    <el-button @click="deleteModule(item)" type="danger" size="mini" circle>
+                      <i class="el-icon-delete"></i>
+                    </el-button>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 模块内容10 友情链接 --> 
+              <div v-if="item.type == 10" class="module10Box">
+                <div class="module10Linkbox">
+                  <div class="module10LinkImgBox">
+                    <div class="module10LinkImgItem"><img src="@/assets/public/upload/noImage.png"></div>
+                    <div class="module10LinkImgItem"><img src="@/assets/public/upload/noImage.png"></div>
+                    <div class="module10LinkImgItem"><img src="@/assets/public/upload/noImage.png"></div>
+                    <div class="module10LinkImgItem"><img src="@/assets/public/upload/noImage.png"></div>
+                    <div class="module10LinkImgItem"><img src="@/assets/public/upload/noImage.png"></div>
+                  </div>
+                  <div class="module10LinkTextBox">
+                    <div>友情链接</div>
+                    <div>友情链接</div>
+                    <div>友情链接</div>
+                    <div>友情链接</div>
+                    <div>友情链接</div>
+                  </div>
+                </div>
+                <div class="shadowBox">
+                  <div class="editBtnBox">
+                    <el-button @click="openWindow(item)" type="primary" size="mini" circle>
+                      <i class="el-icon-edit"></i>
+                    </el-button>
+                    <el-button @click="deleteModule(item)" type="danger" size="mini" circle>
+                      <i class="el-icon-delete"></i>
+                    </el-button>
+                  </div>
+                </div>
+              </div>
+              
+              <!-- 模块内容11 纯文本 --> 
+              <div v-if="item.type == 11" class="module11Box">
+                <div class="module11Text">
+                  <div>说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</div>
+                  <div>说明文字说明文字说明文字说明文字</div>
+                </div>
+                <div class="shadowBox">
+                  <div class="editBtnBox">
+                    <el-button @click="openWindow(item)" type="primary" size="mini" circle>
+                      <i class="el-icon-edit"></i>
+                    </el-button>
+                    <el-button @click="deleteModule(item)" type="danger" size="mini" circle>
+                      <i class="el-icon-delete"></i>
+                    </el-button>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+          </grid-item>
+        </grid-layout>
+      </div>
+    </div>
+    <!-- 栅格布局 预览模式 end ---------------------------------------->
+    <div class="bottomBtnBox">
+      <el-button type="primary">保存配置</el-button>
+    </div>
+    <!--弹出框 start------------------------------------------------------------>
+    <el-dialog title="编辑模块" :visible.sync="windowStatus">
+      <el-form :model="form" ref="form" autocomplete="off" label-position="left">
+        <div class="formDiv">
+          <el-form-item label="欢迎语：" :label-width="formLabelWidth" prop="alias" class="custom-align-right">
+            <el-input v-model="form.type1.welcomeText" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="登录链接标题：" :label-width="formLabelWidth" prop="alias" class="custom-align-right">
+            <el-input v-model="form.type1.linkText" autocomplete="off"></el-input>
+          </el-form-item>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <div>
+          <el-button @click="closeWindow">取 消</el-button>
+          <el-button type="primary" @click="editGridItem">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!--弹出框 end------------------------------------------------------------>
+  </div>
+</template>
+
+<script>
+//引入公用样式
+import '@/styles/global.less';
+//引入vue-grid-layout
+import { GridLayout, GridItem } from 'vue-grid-layout';
+//标题
+import tableTitle from './components/tableTitle';
+//导入新组件
+import MenuTopBox from './components/creatWebsite/indexComponents.vue'; 
+
+export default {
+  components: {
+    GridLayout,
+    GridItem,
+    tableTitle,
+    MenuTopBox
+  },
+  data() {
+    return {
+      //页面 start------------------------------------------------------------>
+      headerTitle: '模块',
+      websiteTitle: '预览',
+      windowStatus: false,
+      //页面 end------------------------------------------------------------>
+
+      //弹出框 start------------------------------------------------------------>
+      formLabelWidth: '120px',
+      editModule: "",//待编辑的模块
+      form: {
+        content: '',
+        //模块1 顶部菜单
+        type1: {
+          welcomeText: '欢迎光临XXX网！',
+          linkText: '用户登录'
+        },
+        //模块2 logo栏
+        type2:{
+          logoImg: '',
+          adImg: ''
+        },
+        //模块3 导航栏
+        type3:[
+          {linkText:"网站导航",src:"http://www.baidu.com"},
+          {linkText:"网站导航",src:"http://www.baidu.com"},
+          {linkText:"网站导航",src:"http://www.baidu.com"},
+          {linkText:"网站导航",src:"http://www.baidu.com"},
+          {linkText:"网站导航",src:"http://www.baidu.com"},
+          {linkText:"网站导航",src:"http://www.baidu.com"},
+          {linkText:"网站导航",src:"http://www.baidu.com"},
+          {linkText:"网站导航",src:"http://www.baidu.com"},
+          {linkText:"网站导航",src:"http://www.baidu.com"},
+          {linkText:"网站导航",src:"http://www.baidu.com"},
+          {linkText:"网站导航",src:"http://www.baidu.com"},
+          {linkText:"网站导航",src:"http://www.baidu.com"},
+          {linkText:"网站导航",src:"http://www.baidu.com"},
+          {linkText:"网站导航",src:"http://www.baidu.com"},
+          {linkText:"网站导航",src:"http://www.baidu.com"},
+          {linkText:"网站导航",src:"http://www.baidu.com"},
+          {linkText:"网站导航",src:"http://www.baidu.com"},
+          {linkText:"网站导航",src:"http://www.baidu.com"},
+          {linkText:"网站导航",src:"http://www.baidu.com"},
+          {linkText:"网站导航",src:"http://www.baidu.com"}
+        ],
+        //模块7 文本列表
+        type7:[
+          {linkText:"新闻标题新闻标题新新闻标题新闻标题新新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题标题新闻标题新闻标题标题新闻标题新闻标题",src:"http://www.baidu.com"},
+          {linkText:"新闻标题新闻标题新新闻标题新闻标题新新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题标题新闻标题新闻标题标题新闻标题新闻标题",src:"http://www.baidu.com"},
+          {linkText:"新闻标题新闻标题新新闻标题新闻标题新新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题标题新闻标题新闻标题标题新闻标题新闻标题",src:"http://www.baidu.com"},
+          {linkText:"新闻标题新闻标题新新闻标题新闻标题新新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题标题新闻标题新闻标题标题新闻标题新闻标题",src:"http://www.baidu.com"},
+          {linkText:"新闻标题新闻标题新新闻标题新闻标题新新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题标题新闻标题新闻标题标题新闻标题新闻标题",src:"http://www.baidu.com"},
+          {linkText:"新闻标题新闻标题新新闻标题新闻标题新新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题标题新闻标题新闻标题标题新闻标题新闻标题",src:"http://www.baidu.com"},
+          {linkText:"新闻标题新闻标题新新闻标题新闻标题新新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题标题新闻标题新闻标题标题新闻标题新闻标题",src:"http://www.baidu.com"},
+        ],
+        type8:[
+          {img:"",title:"图文列表标题",text:"图标列表描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述"},
+          {img:"",title:"图文列表标题",text:"图标列表描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述"},
+          {img:"",title:"图文列表标题",text:"图标列表描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述"},
+          {img:"",title:"图文列表标题",text:"图标列表描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述"},
+          {img:"",title:"图文列表标题",text:"图标列表描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述"},
+        ]
+      },
+      //弹出框 end------------------------------------------------------------>
+
+      //预览 start------------------------------------------------------------>
+      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:""},
+        // { i: "2", x: 3, y: 0, w: 3, h: 2, content:""},
+        // { i: "3", x: 6, y: 0, w: 3, h: 2, content:""}
+      ]
+      //预览 end------------------------------------------------------------>
+    }
+  },
+  methods: {
+    //添加模块
+    addModule(type) {
+      // 计算当前布局的最大 y 值
+      const maxY = Math.max(...this.layout.map(item => item.y), 0);
+      // type=1 顶部菜单
+      if(type==1){
+        this.layout.push({
+          i: this.layout.length, 
+          x: 0, 
+          y: maxY + 1, 
+          w: 12, 
+          h: 1, 
+          type: type,
+          content:""
+        });
+      }
+      // type=2 logo
+      if(type==2){
+        this.layout.push({
+          i: this.layout.length, 
+          x: 0, 
+          y: maxY + 1, 
+          w: 12, 
+          h: 2, 
+          type: type,
+          content:""
+        });
+      }
+      // type=3 nav
+      if(type==3){
+        this.layout.push({
+          i: this.layout.length, 
+          x: 0, 
+          y: maxY + 1, 
+          w: 12, 
+          h: 2, 
+          type: type,
+          content:""
+        });
+      }
+      // type=4 banner
+      if(type==4){
+        this.layout.push({
+          i: this.layout.length, 
+          x: 0, 
+          y: maxY + 1, 
+          w: 8, 
+          h: 5, 
+          type: type,
+          content:""
+        });
+      }
+      // type=6 多图列表
+      if(type==6){
+        this.layout.push({
+          i: this.layout.length, 
+          x: 0, 
+          y: maxY + 1, 
+          w: 12, 
+          h: 2, 
+          type: type,
+          content:""
+        });
+      }
+      // type=7 文本列表
+      if(type==7){
+        this.layout.push({
+          i: this.layout.length, 
+          x: 0, 
+          y: maxY + 1, 
+          w: 4, 
+          h: 5, 
+          type: type,
+          content:""
+        });
+      }
+      // type=8 图文列表
+      if(type==8){
+        this.layout.push({
+          i: this.layout.length, 
+          x: 0, 
+          y: maxY + 1, 
+          w: 8, 
+          h: 10, 
+          type: type,
+          content:""
+        });
+      }
+      // type=10 友情链接
+      if(type==10){
+        this.layout.push({
+          i: this.layout.length, 
+          x: 0, 
+          y: maxY + 1, 
+          w: 12, 
+          h: 2, 
+          type: type,
+          content:""
+        });
+      }
+      // type=11 纯文本
+      if(type==11){
+        this.layout.push({
+          i: this.layout.length, 
+          x: 0, 
+          y: maxY + 1, 
+          w: 12, 
+          h: 1, 
+          type: type,
+          content:""
+        });
+      }
+
+    },
+    //删除模块
+    deleteModule(item) {
+      //找到对应的模块删除掉
+      for(let i = 0; i < this.layout.length; i++) {
+        if(this.layout[i].i == item.i) {
+          this.layout.splice(i, 1);
+        }
+      }
+    },
+
+    //打开弹出框
+    openWindow(item) {
+      this.editModule = item.i;
+      this.windowStatus = true;
+    },
+
+    //编辑栅格布局
+    editGridItem() {
+      console.log(this.editModule);
+      //找对在栅栏中对应的窗口，把编辑的值放进去
+      for(let i = 0; i < this.layout.length; i++) {
+        if(this.layout[i].i == this.editModule) {
+          this.layout[i].content = this.form.content;
+        }
+      }
+      //关闭窗口
+      this.windowStatus = false;
+    },
+
+    //关闭弹出框
+    closeWindow() {
+      this.windowStatus = false;
+    }
+
+  },
+  mounted(){
+    const id = this.$route.query.id;
+    console.log('Retrieved ID from route:', id);
+  }
+}
+</script>
+
+<style scoped lang="less">
+  //菜单 start------------------------------------------------------------> 
+  .layerTabsBox {
+    margin: 30px;
+    border-radius: 20px;
+    background: #fff;
+    border: 1px solid #d3d3d3;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    overflow: hidden;
+    .layerTabsItem {
+      width: 33.33%; /* 每个占3分之一的空间 */
+      padding: 10px 20px;
+      cursor: pointer;
+      text-align: center;
+      font-size: 14px;
+      border-right: 1px solid #d3d3d3;
+      background: #fff;
+    }
+    .active {
+      background: #5570F1;
+      color: #fff;
+    }
+  }
+  .layerBox {
+    padding-bottom: 10px;
+  }
+  //菜单 end------------------------------------------------------------> 
+
+  //模块 start------------------------------------------------------------> 
+  .module1Box,.module2Box {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    justify-content: space-between;
+  }
+  //1.顶部菜单
+  .module1Box {
+    padding: 0 10px;
+    border: 1px dashed #333;
+    .module1Title {
+      font-size: 12px;
+      color: #666;
+      display: flex;
+      align-items: center;
+    }
+    .module1LoginLink {
+      font-size: 12px;
+      color: #666;
+      display: flex;
+      align-items: center;
+    }
+    &:hover .shadowBox{
+      display: block;
+    }
+  }
+  //2.logo
+  .module2Box {
+    .module2Logo {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 20px;
+      width: 200px;
+      border: 1px dashed #333;
+      background: #f0f2f5;
+      .module2NoImgBox {
+        text-align: center;
+        font-size: 12px;
+        color: #666;
+        img{
+          width: 20px;
+          height: 20px;
+          margin-bottom: 5px;
+        }
+      }
+    }
+    .module2rightAd {
+      flex: 1;
+      border: 1px dashed #333;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #f0f2f5;
+      text-align: center;
+      font-size: 12px;
+      img{
+        width: 20px;
+        height: 20px;
+        margin-bottom: 5px;
+      }
+    }
+    &:hover .shadowBox{
+      display: block;
+    }
+  }
+  //3.网站导航
+  .module3Box {
+    width: 100%;
+    .module3Nav {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      .module3NavItem {
+        width: 10%;
+        font-size: 12px;
+        color: #666;
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+        border: 1px dashed #333;
+        padding: 0 10px;
+        margin-bottom: 5px;
+      }
+    }
+    &:hover .shadowBox{
+      display: block;
+    }
+  }
+  //5.banner
+  .module4Box {
+    border: 1px dashed #333;
+    background: #f0f2f5;
+    width: 100%;
+    height: 100%;
+    .module4Banner {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      .module4BannerNoImgBox {
+        text-align: center;
+        font-size: 12px;
+        color: #666;
+        img{
+          width: 20px;
+          height: 20px;
+          margin-bottom: 5px;
+        }
+      }
+    }
+    &:hover .shadowBox{
+      display: block;
+    }
+  }
+  //6.多图列表
+  .module6Box {
+    width: 100%;
+    height: 100%;
+    .module6imgBox {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 100%;
+      .module6item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        border: 1px dashed #333;
+        font-size: 12px;
+        width: 25%;
+        text-align: center;
+        color: #666;
+        img{
+          width: 20px;
+          height: 20px;
+          margin-bottom: 5px;
+        }
+      }
+    }
+    &:hover .shadowBox{
+      display: block;
+    }
+  }
+  //7.文本列表
+  .module7Box {
+    width: 100%;
+    height: 100%;
+    .module7textList {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      div {
+        border: 1px dashed #333;
+        width: 100%;
+        height:27px;
+        font-size: 12px;  
+        line-height: 27px;
+        overflow: hidden;
+      }
+    }
+    &:hover .shadowBox{
+      display: block;
+    }
+  }
+  //8.图文列表
+  .module8Box {
+    width: 100%;
+    height: 100%;
+    .module8ImgBox {
+      width: 100%;
+      height: 100%;
+      .module8ImgItem:last-child {
+        padding-bottom: 10px;
+      }
+      .module8ImgItem {
+        width: 100%;
+        height: 20%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        border: 1px dashed #333;
+        box-sizing: border-box;
+        padding: 6px 6px 7px 6px;
+        .module8ImgItemText {
+          .module8ImgItemTitle {
+            font-size: 14px;
+            color: #333;
+            margin-bottom: 5px;
+          }
+          .module8ImgItemText {
+            font-size: 12px;
+            color: #666;
+          }
+        }
+        img {
+          width: 50px;
+          height: 50px;
+          margin-right: 10px;
+        }
+      }
+    }
+    &:hover .shadowBox{
+      display: block;
+    }
+  }
+  //10.友情链接
+  .module10Box {
+    width: 100%;
+    height: 100%;
+    .module10Linkbox {
+      .module10LinkImgBox {
+        display: flex;
+        .module10LinkImgItem {
+          width: 20%;
+          height: 45px;
+          border: 1px dashed #333;  
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          img {
+            width: 20px;
+            height: 20px;
+            margin-bottom: 5px;
+          }
+        }
+      }
+      .module10LinkTextBox {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+        div {
+          width: 20%;
+          font-size: 12px;
+          color: #666;
+          border: 1px dashed #333;
+          text-align: center;
+          height: 24px;
+          line-height: 24px;
+        }
+      }
+    }
+    &:hover .shadowBox{
+      display: block;
+    }
+  }
+  //11.纯文本
+  .module11Box {
+    width: 100%;
+    height: 100%;
+    .module11Text {
+      div {
+        text-align: center;
+        font-size: 12px;
+        color: #666;
+      }
+    }
+    &:hover .shadowBox{
+      display: block;
+    }
+  }
+
+
+
+
+  //公用 编辑按钮
+  .shadowBox {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background: rgba(0,0,0,0.3);
+    width: 100%;
+    height: 100%;
+    .editBtnBox {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  //模块 end------------------------------------------------------------> 
+
+
+
+  //栅格布局 start------------------------------------------------------------> 
+  .grid-layout-demo {
+    //background-color:#f0f2f5;
+    padding: 20px;
+  }
+  .grid-item-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    height: 100%;
+    overflow: hidden;
+  }
+  //栅格布局 end------------------------------------------------------------> 
+
+  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+  ::v-deep .custom-form-item > .el-form-item__label {
+    line-height: 140px !important;
+  }
+  ::v-deep .custom-textarea .el-textarea__inner {
+    resize: none; /* 禁止用户拖拽调整大小 */
+  }
+  ::v-deep .custom-align-right .el-form-item__label {
+    text-align: right; /* 设置标签文字右对齐 */
+  }
+  ::v-deep .shadowBox .el-button--mini.is-circle {
+    border-radius: 50% !important;
+  }
+  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>  
+

src/views/website/websiteColumn.vue

@@ -72,7 +72,10 @@
     <el-dialog :title="editId ? '关联导航池' : '编辑关联导航池'" :visible.sync="windowStatus" :close-on-click-modal="false">
       <el-form :model="form" ref="form" :rules="formRules" label-position="left">
         <div class="formDiv">
+
+
           <el-form-item label="关联网站名称：" :label-width="formLabelWidth" prop="webSiteName" class="custom-align-right">
+
             <el-select v-model="form.webSiteName" :multiple="false" :multiple-limit="1" filterable remote reserve-keyword placeholder="请输入网站关键词"
                 :remote-method="getWebNavList" :loading="webSiteLoading" @change="detectionWebSite">
                 <el-option
@@ -82,7 +85,10 @@
                   :value="item.value">
                 </el-option>
               </el-select>
+              
           </el-form-item>
+
+
           <el-form-item label="导航名称：" :label-width="formLabelWidth" prop="navNames" class="custom-align-right">
             <el-select v-model="form.navNames" multiple filterable remote reserve-keyword placeholder="请输入导航关键词"
                 :remote-method="getWebsiteList" :loading="navNamesLoading">

src/views/website/websiteTag.vue

@@ -0,0 +1,1161 @@
+<template>
+      <div class="mainBox">
+        <!--搜索功能 start------------------------------------------------------------>
+        <!-- WebsiteList.vue -->
+        <div class="layerBox_search">
+          <div class="layerBoxLine">
+
+            <el-row>
+                        
+                  <el-col :span="8">
+                        <div class="searchBox">
+                              <div class="searchTitle">标识组名称：</div>
+                              <el-input placeholder="请输入网站名称" autocomplete="off" v-model="getApiData.keyword"/>
+                        </div>
+                  </el-col>
+  
+                  <el-col :span="15">
+                        <div class="tag_webSite_head_btn_box">
+
+                              <div class="searchTitle">标识组名称：</div>
+
+                              
+                              <el-button type="info" @click="clearSearchList">重置</el-button>
+                              <el-button type="primary" @click="getData('search')">搜索</el-button>
+                        </div>
+                  </el-col>
+  
+
+                
+
+             </el-row>
+
+
+          </div>
+        </div>
+
+        <div class="layerBoxNoBg">
+          <div>
+            <el-button type="primary" @click="addData">添加标识组</el-button>
+          </div>
+          
+        </div>
+
+
+        <!--搜索功能 end------------------------------------------------------------>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+          <tableTitle :name="tableDivTitle"/>
+          <el-row>
+            <template>
+              <el-table :data="tableData" style="width: 100%">
+
+                  <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
+
+                  <el-table-column prop="name" label="标识组名称"></el-table-column>
+ 
+                  <el-table-column prop="website_names1" label="网站名称" ></el-table-column>
+
+                      <!-- console.log("webslte_names==",item.name)     
+                         console.log("webslte_names==",item.website_names1)      -->
+
+                 
+                <el-table-column prop="created_at" label="创建时间"></el-table-column>
+                <el-table-column prop="updated_at" label="修改时间"></el-table-column>
+
+ 
+                <el-table-column fixed="right" label="操作" width="240" header-align="center">
+                  <template slot-scope="scope">
+                    <div class="listBtnBox">
+                      <div class="listDeleteBtn" @click="deleteData(scope.row.id, tableData)"><i class="el-icon-delete"></i>移除</div>
+                      <div class="listEditBtn" @click="getDataMain(scope.row.id,scope.row, tableData)"><i class="el-icon-edit-outline"></i>编辑</div>
+                      <!-- <div class="listMainBtn" @click="creatWebsite(scope.row.id)"><i class="el-icon-brush"></i>搭建</div> -->
+                    </div>
+                    <!-- <div class="listMainBtn"><i class="el-icon-view"></i>详情</div> -->
+                    <!-- <el-button @click.native.prevent="deleteData(scope.row.id, tableData)" type="text" size="small">移除</el-button>
+                    <el-button @click.native.prevent="getDataMain(scope.row.id, tableData)" type="text" size="small">编辑</el-button> -->
+                  </template>
+                </el-table-column>
+              </el-table>
+            </template>
+          </el-row>
+        </div>
+        <div class="alignBox">
+          <el-row>
+            <el-col :span="24">
+              <el-pagination :current-page="getApiData.page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
+            </el-col>
+          </el-row>
+        </div>
+        <!--表格内容 end------------------------------------------------------------>
+
+
+ 
+
+
+        <!--弹出框1：外部表单弹出框  start------------------------------------------------------------>
+        <el-dialog :title="editId ? '编辑标识' : '添加标识'" :visible.sync="windowStatus" :close-on-click-modal="false">
+          <!--弹出框2：内部模板弹出框 start------------------------------------------------------------>
+          <el-dialog width="39%" title="皮肤库" :visible.sync="innerVisible" append-to-body>
+            <div class="templateBox">
+              <div class="templateListClass">
+                <div class="templateListClassItem">简约现代</div>
+                <div class="templateListClassItem">复古风格</div>
+                <div class="templateListClassItem">扁平化</div>
+              </div>
+              <div class="templateListBox">
+                <div v-for="item in TemplateList" class="templateList" @click="useThatTemplate(item.id,item.template_name,item.template_img)">
+                  <img :src="item.template_img" class="templateImg">
+                  <div>1{{item.template_name}}</div>
+                </div>
+              </div>
+            </div>
+            <div class="pageNumBox">
+              <el-pagination @size-change="handleTemplateSize" @current-change="handleChangeCurrent" :page-size="10" layout="total, prev, pager, next, jumper" :total="TemplateallCount">
+
+              </el-pagination>
+            </div>
+            <div class="webSiteBtn">
+              <el-button type="primary" @click="innerVisible = false">确 定</el-button>
+            </div>
+          </el-dialog>
+
+
+          <!--弹出框2：内部模板弹出框 end------------------------------------------------------------> 
+
+          <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+
+            <div class="formDiv">
+
+              <el-form-item label="标识组名称：" :label-width="formLabelWidth" prop="website_name" class="custom-align-right">
+                  <el-input v-model="form.website_name" autocomplete="off" @blur="checkWebsiteName(form.website_name)" placeholder="请输入名称">
+                        
+                  </el-input>
+              </el-form-item>
+ 
+              <el-form-item label="网站地址2：" :label-width="formLabelWidth" v-if="form.website_url[1].show==true" class="custom-align-right">
+                <div class="formLabelFloatBox">
+                  <el-input v-model="form.website_url[1].url" autocomplete="off" @blur="checkWebsiteUrl(form.website_url[1].url,1)"  placeholder="请输入网站地址2"></el-input>
+                  <el-button type="info" icon="el-icon-plus" circle size="mini" @click="addUrlInput(2)" class="formLabeladdIcon"></el-button>
+                  <el-button type="info" icon="el-icon-delete" circle size="mini" @click="deleteUrlInput(1)" class="formLabelDelIcon"></el-button>
+                </div>
+              </el-form-item>
+
+              <el-form-item label="网站地址3：" :label-width="formLabelWidth" v-if="form.website_url[2].show==true" class="custom-align-right">
+                <div class="formLabelFloatBox">
+                  <el-input v-model="form.website_url[2].url" autocomplete="off" @blur="checkWebsiteUrl(form.website_url[2].url,2)"  placeholder="请输入网站地址3"></el-input>
+                  <el-button type="info" icon="el-icon-plus" circle size="mini" @click="addUrlInput(3)" class="formLabeladdIcon"></el-button>
+                  <el-button type="info" icon="el-icon-delete" circle size="mini" @click="deleteUrlInput(2)" class="formLabelDelIcon"></el-button>
+                </div>
+              </el-form-item>
+              <el-form-item label="网站地址4：" :label-width="formLabelWidth" v-if="form.website_url[3].show==true" class="custom-align-right">
+                <div class="formLabelFloatBox">
+                  <el-input v-model="form.website_url[3].url" autocomplete="off" @blur="checkWebsiteUrl(form.website_url[3].url,3)"  placeholder="请输入网站地址4"></el-input>
+                  <el-button type="info" icon="el-icon-plus" circle size="mini" @click="addUrlInput(4)" class="formLabeladdIcon"></el-button>
+                  <el-button type="info" icon="el-icon-delete" circle size="mini" @click="deleteUrlInput(3)" class="formLabelDelIcon"></el-button>
+                </div>
+              </el-form-item>
+              <el-form-item label="网站地址5：" :label-width="formLabelWidth" v-if="form.website_url[4].show==true" class="custom-align-right">
+                <div class="formLabelFloatBox">
+                  <el-input v-model="form.website_url[4].url" autocomplete="off" @blur="checkWebsiteUrl(form.website_url[4].url,4)"  placeholder="请输入网站地址5"></el-input>
+                  <el-button type="info" icon="el-icon-plus" circle size="mini" @click="" class="formLabeladdIcon" disabled></el-button>
+                  <el-button type="info" icon="el-icon-delete" circle size="mini" @click="deleteUrlInput(4)" class="formLabelDelIcon"></el-button>
+                </div>
+              </el-form-item>
+
+
+
+ 
+  
+              <el-form-item label="设置标识组：" :label-width="formLabelWidth" prop="website_column_arr_id" class="custom-align-right">
+                <!-- <el-cascader v-model="form.website_column_arr_id" :props="{checkStrictly:true}" :options="website_column_arr"> -->
+
+                <el-cascader v-model="form.website_column_arr_id" :props="props_1" :options="website_column_arr" filterable clearable >
+
+                </el-cascader>
+
+
+                <!-- <el-select v-model="form.webSiteName" :multiple="false" :multiple-limit="1" filterable remote reserve-keyword placeholder="请输入网站关键词"
+                :remote-method="getWebNavList" :loading="webSiteLoading" @change="detectionWebSite">
+                <el-option
+                  v-for="item in webSiteList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select> -->
+              
+
+
+                <!-- <el-select v-model="form.web_ids" :multiple="true">
+                <el-option
+                  v-for="item in website_column_arr"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select> -->
+
+                <!-- props.multiple = true -->
+                <!--  filterable 搜索 -->
+                <!--  clearable 清空 -->
+                  
+
+              </el-form-item>
+ 
+    
+                
+            </div>
+          </el-form>
+
+
+          <div slot="footer" class="dialog-footer">
+            <div class="footerBtnbox">
+              <el-button @click="closeWindow" type="info">取 消</el-button>
+              <el-button type="primary" @click="editToServe" v-if="editBtn==true">确定</el-button>
+              <el-button type="primary" @click="addToServe" v-else>提交</el-button>
+                   
+               
+            </div>
+          </div>
+        </el-dialog>
+        <!--弹出框2：外部表单弹出框 end------------------------------------------------------------>
+      </div>
+    </template>
+    
+    <script>
+    //本地编译城市代码
+    //import getLocationNameById from '@/utils/citytocode';
+    //城市级联选择器
+    import CityCascader from './components/CityCascader';
+    //表格标题
+    import tableTitle from './components/tableTitle';
+    //引入公用样式
+    import '@/styles/global.less';
+    
+    export default {
+      components: {
+        CityCascader, //城市级联选择器
+        tableTitle,//表格标题
+      },
+      data() {
+  
+
+        //0.全局操作 start ------------------------------------------------------------>
+        //表单验证
+        const validateEmpty = (rule,value,callback) => {
+          if (value.length == 0) {
+            callback(new Error('该项不能为空！'))
+          } else {
+            callback()
+          }
+        }
+        const validateWebsiteUrl = (rule,value,callback) => {
+          if (!value || value.trim() === "") {
+            callback(new Error('至少要填写一个网站地址！'));
+          } else {
+            callback();
+          }
+        }
+        const validateColumn = (rule,value,callback) => {
+          if (value.length === 0) {
+              callback(new Error('必须选择一个上级网系！'))
+          } else {
+              callback()
+          }
+        }
+        let self = this;
+        //0.全局操�� end ------------------------------------------------------------>
+        return {
+ 
+
+
+          //1.列表和分页相关 start ------------------------------------------------------------>
+          tableDivTitle:"站点标识列表",
+          tableData:[],//内容
+          editId:0,//要修改的网站id
+
+          getApiData:{
+            keyword:"",//网站名称查询
+            website_column_id:[],//使用网系id查询
+            city_id:[],//使用城市id查询
+
+            page:1,//当前是第几页
+            pageSize:10,//一共多少条
+            name:"",
+          },
+          allCount:0,//总条数
+          //分页相关 end ------------------------------------------------------------>
+    
+          //2.弹出框设置 start ------------------------------------------------------------>
+          windowStatus:false, //显示第一层弹窗
+          innerVisible:false, //显示第二层弹窗
+          formLabelWidth: '120px',//表单的长度
+          editBtn:false,//当显示编辑按钮的时候，就不显示提交
+          //弹出框设置 start ------------------------------------------------------------>
+    
+          //3.弹出框中的表单设置 start ------------------------------------------------------------>
+
+          tag_dorp_all_id_str:"",//下拉所有ID
+
+          //3.1 表单收集的数据
+          form: {
+            website_name: '',//需要提交的网站名称
+            website_url:[//需要绑定的网站���址
+              {url:"",show:true},
+              {url:"",show:false},
+              {url:"",show:false},
+              {url:"",show:false},
+              {url:"",show:false}
+            ],
+            
+            website_column_arr_id:[],//需要提交的上级网系 数组
+            city_arr_id:[0],//需要提交的城市id
+            logo:"",//logo地址 提交文件换取地址
+            title:"",//需要提交的网站标题
+            keywords:"",//需要提交的网站标题
+            description:"",//需要提交的网站描述
+            template_id:"",//选择的网站皮肤
+            web_ids:""//
+          },
+          //3.2 表单验证规则
+          formRules: {
+            //网站名称不能为空
+            website_name:[{required:true,trigger:'blur',validator:validateEmpty}],
+            //网站地址不能为空
+            'website_url[0].url': [
+              {required: true, message:'至少要填写一个网站地址！',trigger:'blur'},
+              {validator: this.validateWebsiteUrl,trigger:'blur'}
+            ],
+            //网系不能为空 注意，因为是select框，只有提交的时候才会验证
+            website_column_arr_id: [{type:'array',required:true,trigger:'change',message:'必须选择一个网系！',validator:validateColumn}],
+            //网站标题，关键词，描述不能为空
+            title:[{required:true,trigger:'blur',validator:validateEmpty}],
+            keywords:[{required:true,trigger:'blur',validator:validateEmpty}],
+            description:[{required:true,trigger:'blur',validator:validateEmpty}],
+            logoUrl:[{required:true,trigger:'blur',validator:validateEmpty}],
+            template_id:[{required:true,trigger:'blur',validator:validateEmpty}],
+          },
+          //3.3 通过api获的的数据 弹窗
+          website_column_arr:[],//api获得的网系列表
+          props_1: { multiple: true },//下拉多选
+           
+
+          //3.4 上传logo图片
+          logoUrl:'',
+          hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+          //3.5 模板列表
+          TemplateList:[],
+          getTemplateData:{
+            template_class_id:1,//模板类型，暂时为1
+            page:1,//当前是第几页
+            pageSize:9,//请求多少条
+          },
+          TemplateallCount:0,//总条数
+          TemplateName:"未选择模板..",//选择的模板名称
+          TemplateImg:"",//选择的模板图片
+          //弹出框中的表单设置 end ------------------------------------------------------------>
+        }
+      },
+
+      methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+
+        getData(type){
+          //搜索条件 - 网系和城市id只提交最后一个
+          if(this.getApiData.website_column_id.length>0){
+            this.getApiData.website_column_id = this.getApiData.website_column_id[this.getApiData.website_column_id.length - 1];
+          }
+          if(this.getApiData.city_id.length>0){
+            this.getApiData.city_id = this.getApiData.city_id[this.getApiData.city_id.length - 1];
+          }
+          //如果是搜索，重新加载第一页==搜索
+          if(type=="search"){
+            this.getApiData.page = 1;
+            this.getApiData.name = this.getApiData.keyword;
+
+ 
+          }
+ 
+
+      //     console.log("this.getApiData==",this.getApiData)
+          //console.log(this.getApiData)
+      //     console.log("getApiDatagetApiData",this.getApiData)
+          this.$store.dispatch('pool/get_website_tag_arr_actions',this.getApiData).then(res=> {
+            // console.log("resres",res)
+
+            let newData = [];
+             
+            // console.log("newData",newData)
+             
+            for(let item of res.data.list){
+             
+                
+                  //如果有3个以上的名字就保留2个并加上省略号
+                  const the_arr = item.website_names1.split(",")
+                  const the_leng = the_arr.length 
+                  if(the_leng>=3){
+                        item.website_names1=the_arr[0] +","+the_arr[1]+"..." 
+                  } 
+
+
+                  newData.push(item)
+            }
+            
+            //格式化网站地址
+
+            // res.data.rows.forEach(item => {
+            //   item.website_url = item.website_url.join(', ');
+            // });
+            
+            this.tableData = newData; //给与内容
+            
+
+            this.allCount = res.data.count; //给与总条数
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        },
+
+
+
+
+        //1.2 删除内容
+        deleteData(id){
+          this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            console.log("当前删除：" + id)
+            this.$store.dispatch('pool/del_website_tag_arr_actions',{id:id}).then(res=> {
+              this.getData();
+ 
+                if(res.message=="有用户在使用该网站标识，不能删除"){
+                         
+                        this.$message({
+                              type: 'warning',
+                              message: '有用户在使用该网站标识，不能删除'
+                        });
+                        return
+                }  
+
+              this.$message({
+                type: 'success',
+                message: '删除成功!'
+              });
+            }).catch(() => {
+              this.$message({
+                type: 'warning',
+                message: '网络错误，请重试！'
+              });
+            })
+          }).catch(() => {
+            this.$message({
+              type: 'warning',
+              message: '已取消删除'
+            });
+          });
+        },
+
+
+
+        //1.3 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+          this.getApiData.page = val;
+          this.getData();
+        },
+        //1.4 点击分页
+        handleCurrentChange(val) {
+          this.getApiData.page = val;
+          this.getData();
+        },
+        //1.6 重置按钮
+        clearSearchList(){
+          this.tableData = [];
+          this.getApiData.keyword = "";
+          this.getApiData.name = "";
+          this.getApiData.website_column_id = [];
+          this.getApiData.city_id = [];
+          this.getApiData.city_arr_id = [];
+          this.getApiData.page = 1;
+          this.getApiData.pageSize = 10;
+          this.getData();
+        },
+        //1.7搜索栏的城市选择器
+        updateCityId(value) {
+          // 这里可以处理选择后的回调逻辑
+          console.log("城市ID已更新:", value);
+          // 可以在此处执行额外逻辑
+          this.getApiData.city_id = value;
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+    
+        //2.弹出框设置 start ------------------------------------------------------------>
+        //2.1 打开弹出框
+        openWindow() {
+          this.clearToServe();
+          this.windowStatus = true;
+        },
+        //2.2 关闭弹出框
+        closeWindow(){
+          this.windowStatus = false;
+          this.clearToServe();
+        },
+        //2.3 重置窗口内容
+        clearToServe(){
+          //还原表单
+          this.form.website_name = "";
+          this.form.website_column_arr_id = "";
+          this.form.website_url = [
+            {url:"",show:true},
+            {url:"",show:false},
+            {url:"",show:false},
+            {url:"",show:false},
+            {url:"",show:false}
+          ];
+          this.form.city_arr_id = [0];
+          this.form.logo = "";
+          this.form.title = "";
+          this.form.keywords = "";
+          this.form.description = "";
+          this.form.template_id = "";
+          //还原logo缩略图
+          this.logoUrl = "";
+          //还原模板
+          this.TemplateList = [];
+          this.getTemplateData.page = 1;
+          this.TemplateImg = "";
+          this.TemplateallCount = 0;
+        },
+        //弹出框设置 end ------------------------------------------------------------>
+    
+        //3.添加新网站 start ------------------------------------------------------------>
+        //3.1 获得所有网系
+
+
+        getwebsiteColumn(){//下拉
+ 
+
+          let that = this;
+          this.$store.dispatch('pool/drop_website_tag_actions',{page:1,pageSize:999}).then(res=> {
+            // console.log("res==",res.data)
+
+            let arrData = this.transformData(res.data.rows)
+            // console.log("newItem==",arrData)
+            this.website_column_arr = arrData;
+
+            // console.log("website_column_arr==",this.website_column_arr)
+          })
+        },
+
+        transformData(arrData) {
+ 
+            let that = this;
+          return arrData.map(item => {//格式化=要按element-ui的下拉格式cascader
+            // 创建一个新的对象，替换键名
+            // console.log("item.column_name==",item.column_name)
+
+
+                  let newItem = {
+                        label: item.website_name,
+                        value: item.id,
+
+                        // 保留其他不需要改动的字段
+                        //   pid: item.pid,
+                        // //   sort: item.sort,
+
+
+                        //   remark: item.remark,
+                        //   column_arr_id: item.column_arr_id,
+                        //   updated_at: item.updated_at,
+                        //   created_at: item.created_at,
+                  };
+
+
+
+            // 如果有 children，则递归处理 children 数组
+            // if (item.children && item.children.length > 0) {
+            //   newItem.children = that.transformData(item.children);
+            // }
+    
+            return newItem;
+          });
+
+          
+        },
+        //3.2 开始添加内容
+        addData(){
+             
+
+
+            this.editId = false;  //弹出框标题
+
+            //先获取所有网系
+            this.getwebsiteColumn()
+            //显示网系到弹出窗口
+            this.openWindow()
+            //显示提交按钮
+            this.editBtn = false;
+            //清除错误状态
+            this.$refs.form.clearValidate();
+        },
+
+
+
+        //3.3 添加一条网站地址
+        addUrlInput(key){
+          this.form.website_url[key].show=true;
+        },
+        //3.4 删除一条网站地址
+        deleteUrlInput(key){
+          this.form.website_url[key].show=false;
+          this.form.website_url[key].url="";
+        },
+        //3.5 弹出框的城市选择器
+        updateFormCityId(value){
+          console.log("城市ID已更新:", value);
+          this.form.city_arr_id = value;
+        },
+        //3.6 上传图片操作
+        beforeAvatarUpload(file) {
+          const isJPG = file.type === 'image/jpeg';
+          const isPNG = file.type === 'image/png';
+          const isLt2M = file.size / 1024 / 1024 < 2;
+    
+          if (!isJPG && !isPNG) {
+            this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
+            return false;
+          }
+          if (!isLt2M) {
+            this.$message.error('上传头像图片大小不能超过 2MB!');
+            return false;
+          }
+    
+          const formData = new FormData();
+          formData.append('file', file);
+    
+          this.$store.dispatch('pool/uploadFile',formData).then(res=> {
+            this.logoUrl = res.data.imgUrl;//显示缩略图
+            this.form.logo = res.data.imgUrl;//提供表单地址
+            console.log(res.data.imgUrl)
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+    
+          // 阻止默认的上传行为
+          return false;
+        },
+        handleDelete() {
+          // 删除图片
+          this.logoUrl = ''; // 清空图片 URL
+        },
+
+
+
+        tag_dorp_all_id_fun(){//下拉所有ID
+            
+            this.tag_dorp_all_id_str=[]//临时转数组
+
+            // console.log("this.tag_dorp_all_id_str",this.tag_dorp_all_id_str)
+            this.form.website_column_arr_id.forEach(( per_obj ) => { 
+                   
+                  this.tag_dorp_all_id_str.push(String(per_obj[0]))
+
+                   // tag_dorp_all_id_str
+                  //  this.str_1 =this.str_1+","+ String(per_obj[0])
+ 
+                  //  console.log("per_obj==",per_obj[0])    
+                  //  console.log("add_str==",this.tag_dorp_all_id_str)    
+
+              })
+              this.tag_dorp_all_id_str="["+this.tag_dorp_all_id_str.join(",")+"]"
+
+            //   console.log("this.tag_dorp_all_id_str==",this.tag_dorp_all_id_str)
+
+        },
+
+        //3.7 提交表单
+        addToServe(){//添加 
+             
+      //     console.log(this.form)
+          //先进行验证
+          this.$refs.form.validate(valid => {
+
+            if (valid) {
+              //提交之前把域名列表转换成数组
+              let webSiteArray = [];
+              for(let item of this.form.website_url){
+                if(item.url!=""){
+                  webSiteArray.push(item.url)
+                }
+              }
+
+              //循环完毕 重置提交的url
+              this.form.website_url = webSiteArray;
+              //console.log(webSiteArray)
+            //   console.log(this.form)
+              //提交表单
+
+            //   this.$store.dispatch('pool/add_website_tag_actions',this.form).then(res=> {
+                   
+               this.tag_dorp_all_id_fun()//下拉所有ID
+
+              this.$store.dispatch('pool/add_website_tag_actions',{name:this.form.website_name,web_ids:this.tag_dorp_all_id_str}).then(res=> {
+
+                  // console.log("this.form.website_column_arr_id==",this.tag_dorp_all_id_str)
+                  console.log("res==",res)
+                   
+                if(res.code==200){
+                  //汇报结果
+                  this.$message({
+                    type: 'success',
+                    message: '已成功添加网站！'
+                  });
+                  //重新获取表单
+                  this.getData();
+                  //清空并退出
+                  this.closeWindow();
+                }else{
+                  
+                      if(res.message=="网站标识重复"){
+
+                              this.$message({
+                                    type: 'warning',
+                                    message: '网站标识名字重复'
+                              });
+
+
+                        }else{
+
+                              this.$message({
+                                    type: 'warning',
+                                    message: '添加失败！请检查网络！'
+                              });
+                        }  
+                        
+                  //清空并退出
+                  this.closeWindow();
+
+                }
+                
+              }).catch(() => {
+                this.$message({
+                  type: 'info',
+                  message: '网络错误，请重试！'
+                });
+              })
+            }
+          })
+        },
+
+
+
+
+
+ 
+        //3.8 检测网站名称是否存在
+        checkWebsiteName(name){
+
+          let data = {
+            website_name:name
+          }
+          if(this.editId!=""){
+            data.id = this.editId;
+          }
+          this.$store.dispatch('pool/checkWebsiteName',data).then(res=> {
+            if(res.code==200){
+              this.form.website_name = "";
+              this.$message({
+                type: 'warning',
+                message: '网站名称已存在！请重新输入！'
+              });
+            }
+          })
+        },
+        //3.9 检测网站url是否存在
+        checkWebsiteUrl(url,num){
+          let data = {
+            website_url:url
+          }
+          if(this.editId!=""){
+            data.id = this.editId;
+          }
+          this.$store.dispatch('pool/checkWebsiteUrl',data).then(res=> {
+            if(res.code==200){
+              if(num==0){this.form.website_url[0].url=""}
+              if(num==1){this.form.website_url[1].url=""}
+              if(num==2){this.form.website_url[2].url=""}
+              if(num==3){this.form.website_url[3].url=""}
+              if(num==4){this.form.website_url[4].url=""}
+              this.$message({
+                type: 'warning',
+                message: '当前网站已经被占用，请重新输入！'
+              });
+            }
+          })
+        },
+        //添加新网站 end ------------------------------------------------------------>
+    
+        //4.选择模板 start ------------------------------------------------------------>
+        //4.1 获取模板列表
+        getTemplateList(){
+          //先打开弹出框
+          this.innerVisible = true;
+          //获取模板列表
+          this.$store.dispatch('pool/getTemplate',this.getTemplateData).then(res=> {
+            //直接给与数据
+            //this.TemplateList = res.data.rows;
+            //格式化 目前缩略图给了两张，我只展示其中一张
+            let data = res.data.rows;
+            for(let item of data){
+              //item.template_img
+              let imgSrc = item.template_img;
+              item.template_img = imgSrc[0];
+            }
+            this.TemplateList = data;
+            //给与总条数
+            this.TemplateallCount = res.data.count;
+          }).catch(() => {
+            this.$message({
+              type: 'warning',
+              message: '网络错误，请重试！'
+            });
+          })
+        },
+        //4.2 选择一个模板
+        useThatTemplate(id, template_name, template_img) {
+            console.log(template_name);
+            console.log(template_img);
+            // 关闭弹出框
+            this.innerVisible = false;
+            // 显示用户选择的名称
+            this.TemplateName = template_name;
+            // 确保这里设置了 TemplateImg
+            this.TemplateImg = template_img; // 确保 template_img 是有效的路径
+            // 记录选择的模板id
+            this.form.template_id = id;
+        },
+        //4.1 模板列表分页
+        //直接跳转
+        handleTemplateSize(val) {
+          this.getTemplateData.page = val;
+          this.getTemplateList();
+        },
+        //4.2 点击分页
+        handleChangeCurrent(val) {
+          this.getTemplateData.page = val;
+          this.getTemplateList();
+        },
+        //选择模板 end ------------------------------------------------------------>
+    
+        //5.编辑网站 start ------------------------------------------------------------>
+        //5.1获取详情
+        getDataMain(id){//修改=编辑
+            // console.log("recive_1==",recive_1.name,recive_1.web_ids)
+            
+            //点击编辑在form中显示编辑btn
+            this.editBtn = true;//显示编辑按钮
+            
+            
+            
+            //先清空窗口
+            this.clearToServe()
+            //打开输入窗口
+            this.openWindow();
+            //添加修改id
+            this.editId = id;
+            
+            //清除错误状态
+            // this.$refs.form.clearValidate();
+            
+            
+            // console.log("this.form.website_name==",this.form.website_name)
+            //获取网站详情=编辑弹出框要显示出这1条数据的内容
+            this.$store.dispatch('pool/detail_website_tag_actions',{id:id}).then(res=> {
+                  // console.log("res==",res)//
+                  
+                  this.form.website_name=res.data.name      //标识组名称
+                  // console.log("res.data.nameres.data.name",typeof(res.data.name))
+                  
+                  // console.log("res.data.web_ids===",typeof(res.data.web_ids),res.data.web_ids)
+                  const new_web_ids_str = res.data.web_ids.replace('[', '').replace(']', '')//
+                  const new_web_ids_arr = new_web_ids_str.split(",")  
+                  this.form.website_column_arr_id= new_web_ids_arr      //设置标识组
+                  
+                  // console.log("res.data.web_ids===",this.form.web_ids)
+                  
+                  
+                  //清除错误状态
+                  this.$refs.form.clearValidate();
+
+            return
+            //清除错误状态
+            console.log(res)
+            //回显网站名称
+            this.form.website_name = res.data.website_name;
+            //回显星系
+            this.form.website_column_arr_id = res.data.website_column_arr_id;
+            //回显logo
+            this.form.logo = res.data.logo;
+            this.logoUrl = res.data.logo;
+            //回显url
+            let that = this;
+            if(res.data.website_url==null){
+              //为null什么都不执行
+            }else{
+              for(let index in res.data.website_url){
+                this.form.website_url[index].url = res.data.website_url[index];
+                this.form.website_url[index].show = true;
+              }
+            }
+            //回显id
+            //存放城市id
+            this.form.city_arr_id = res.data.city_arr_id;
+            //当cascaderKey的值改变的时候 级联选择器会重置里面的内容
+            //this.cascaderKey += 1;
+            //回显网站标题，描述，关键词
+            // console.log(res.data.title,res.data.keywords,res.data.description)
+            this.form.title = res.data.title;
+            this.form.keywords = res.data.keywords;
+            this.form.description = res.data.description;
+            //回显模板信息
+            this.form.template_id = res.data.template_id;
+            this.TemplateName = res.data.template_name;
+            this.TemplateImg = JSON.parse(res.data.template_img)[0];
+          })
+    
+          this.editBtn = true;//显示编辑按钮
+        },
+
+
+        //5.2修改表单=== 编辑
+        editToServe(){//
+          //执行验证
+          this.$refs.form.validate(valid => {
+            if (valid) {
+              //提交之前把域名列表转换成数组
+              let webSiteArray = [];
+              for(let item of this.form.website_url){
+                if(item.url!=""){
+                  webSiteArray.push(item.url)
+                }
+              }
+              //循环完毕 重置提交的url
+              this.form.website_url = webSiteArray;
+              this.form.id = this.editId;
+              //提交表单
+              
+              this.tag_dorp_all_id_fun()//下拉所有ID
+              
+              
+              this.$store.dispatch('pool/edit_website_tag',{id:this.editId,name:this.form.website_name,web_ids:this.tag_dorp_all_id_str}).then(res=> {//updateWebsite  
+                        console.log("res==",res)
+                        console.log("res==",res.code)
+
+                   if(res.code !== 200){
+ 
+                              if(res.message == "网站标识重复"){
+                                          this.$message({
+                                                type: 'warning',
+                                                message: '网站名字已有不能重复！'
+                                          });
+                              }
+
+
+                        }else{
+                              
+                              //汇报结果
+                                    this.$message({
+                                          type: 'success',
+                                          message: '已成功修改网站信息！'
+                                    });
+                   }
+
+
+                //清空并退出
+                  this.closeWindow();
+                  //重新请求列表
+                  this.getData();
+              }).catch(() => {
+                this.$message({
+                  type: 'warning',
+                  message: '网络错误，请重试！'
+                });
+              })
+            }
+          }) 
+        },
+        //编辑旧网站 end ------------------------------------------------------------>
+    
+        //6.搭建网站 start ------------------------------------------------------------>
+        creatWebsite(id){
+          this.$router.push({ 
+            path: '/creatWebsite', 
+            query: {id:id} 
+          });
+        } 
+        //编辑旧网站 end ------------------------------------------------------------>
+      },
+      mounted(){
+        //1.获得初始数据
+        this.getData();
+        //2.获取所有网系
+        this.getwebsiteColumn();
+        //本地转换id为文字
+        //console.log(getLocationNameById("110000"))
+
+      //   console.log("this.website_column_arr==",this.website_column_arr)
+      }
+    }
+    </script>
+    
+    <style scoped lang="less">
+      /*表单特殊样式 start------------------------------------------------------------>*/
+      //1.1 模板表单
+      .webSite {
+        background:#f0f2f5;
+        width:200px;
+        height:300px;
+        line-height: 300px;
+        text-align: center;
+        margin:0 auto;
+      }
+      .webSiteTemplate {
+        display:flex;
+        .webSiteTitle {
+          width:120px;
+          line-height: 140px;
+          text-align: right;
+          padding-right:12px;
+          font-weight: bold;
+        }
+      }
+      .webSiteBtn {
+        padding:50px 0 0 0;
+        text-align:center;
+      }
+      .formLabelFloatBox {
+        position: relative;
+        .formLabeladdIcon {
+          position: absolute;
+          right:45px;
+          top:5px;
+          width:38px;
+          height:24px;
+        }
+        .formLabelDelIcon {
+          position: absolute;
+          right:5px;
+          top:5px;
+          width:38px;
+          height:24px;
+        }
+      }
+      .templateBox {
+        display: flex;
+        .templateListClass {
+          margin-right:20px;
+          .templateListClassItem {
+            width: 120px;
+            height: 38px;
+            text-align: center; 
+            line-height: 38px;
+            border:1px solid #E3E8FA;
+            background: #F5F7FB;
+            margin-bottom: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+          }
+        }
+        .templateListBox {
+          box-sizing: border-box;
+          width: 100%;
+          display:flex;
+          flex-wrap:wrap;
+          .templateList {
+            margin-right:10px;
+            text-align: center;
+            font-size:12px;
+            margin-bottom: 10px;
+            border:1px solid #fff;
+            padding: 5px;
+            .templateImg {
+              width: 129px;
+              height:157px;
+              border-radius: 8px;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+      
+      //1.1 模板分页
+      .pageNumBox {
+        text-align: center;
+        padding-top:20px;
+      }
+      .webSiteTemplateName {
+        margin-left: 10px;
+        line-height: 36px;
+      }
+      //1.2 模板缩略图
+      .webSiteTemplateImg {
+        width: 140px;
+        height: 140px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 12px;
+        border: 1px solid #E1E2E9;
+        .selectWebSiteTemplateImg {
+          width: 140px;
+          height: 140px;
+          border-radius: 12px;
+          display: block;
+          cursor: pointer;
+        }
+        .webSiteTemplateText {
+          color: #5570F1;
+          height: 36px;
+          line-height: 36px;
+          text-align: center;
+        }
+        img {
+          display: block;
+        }
+      }
+      /*表单样式 end------------------------------------------------------------>*/
+    
+      //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+      ::v-deep .custom-form-item > .el-form-item__label {
+        line-height: 140px !important;
+      }
+      ::v-deep .custom-textarea .el-textarea__inner {
+        resize: none; /* 禁止用户拖拽调整大小 */
+      }
+      ::v-deep .custom-align-right .el-form-item__label {
+        text-align: right; /* 设置标签文字右对齐 */
+      }
+      //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+
+ 
+       .tag_webSite_head_btn_box{overflow:hidden;}
+                  .tag_webSite_head_btn_box .searchTitle{opacity:0;}
+                  .tag_webSite_head_btn_box button{float:right; }
+                  .tag_webSite_head_btn_box button:nth-of-type(1){margin-left:10px; } 
+
+
+
+    </style>  
+    
+