0.0.12

2024-10-22自动保存

src/api/pool.js

@@ -138,8 +138,31 @@ export function getDepartment(params) {
   })
 }
 
+//2.7 获取父级导航
+export function categoryList(params) {
+  return request({
+    url: '/news/categoryList',
+    method: 'get',
+    params
+  })
+}
 //导航池 end ------------------------------------->
 
 //3.网站导航 start ------------------------------------->
-
+//3.1 获取网站列表
+export function getNavWebList(params) {
+  return request({
+    url: '/website/websiteList',
+    method: 'get',
+    params
+  })
+}
+//3.2 添加网站导航
+export function addWebsiteCategory(data) {
+  return request({
+    url: '/website/addWebsiteCategory',
+    method: 'post',
+    data
+  })
+}
 //网站导航 end ------------------------------------->

src/router/index.js

@@ -124,6 +124,22 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/websiteColumn',
+    component: Layout,
+    children: [
+      {
+        name: '', //直接就是根目录所以为空
+        path: '',
+        component: () => import('@/views/website/websiteColumn'),
+        meta: {
+          title: '网站导航', // 设置菜单和面包屑显示的标题
+          hidden: true, // 不在侧边菜单显示
+          breadcrumb: true // 强制在面包屑中显示
+        }
+      }
+    ]
+  },
   // {
   //   path: '/documentation',
   //   component: Layout,

src/store/modules/pool.js

@@ -1,7 +1,8 @@
 import { getWebList,deleteWebList,getwebsiteColumn,
 getcityList,uploadFile,getTemplate,addWebsite,getWebsiteInfo,
 updateWebsite,getDepartment,getCategoryList,delCategory,
-getCategoryInfo} from '@/api/pool'
+getCategoryInfo,categoryList,addCategory,updateCategory,
+getNavWebList,addWebsiteCategory} from '@/api/pool'
 
 const state = {
 
@@ -146,6 +147,60 @@ const actions = {
       })
     })
   },
+  //获取父级导航
+  categoryList({commit},data) {
+    return new Promise((resolve, reject) => {
+      categoryList(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //添加导航池
+  addCategory({commit},data) {
+    return new Promise((resolve, reject) => {
+      addCategory(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //更新导航池
+  updateCategory({commit},data) {
+    return new Promise((resolve, reject) => {
+      updateCategory(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //导航池 end ---------------------------------------->
+
+  //3.网站导航管理 start ---------------------------------------->
+  //获取导航列表
+  getNavWebList({commit},data) {
+    return new Promise((resolve, reject) => {
+      getNavWebList(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //添加导航
+  addWebsiteCategory({commit},data) {
+    return new Promise((resolve, reject) => {
+      addWebsiteCategory(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //网站导航管理 end ---------------------------------------->
 
 }
 

src/views/website/WebsiteList.vue

@@ -18,7 +18,7 @@
         <el-col :span="8">
           <div class="searchBox">
             <div class="searchTitle">网站城市：</div>
-            <el-cascader :key="searchCascaderKey" v-model="getApiData.city_id" placeholder="选择您要绑定的城市" :props="SearchCityData" filterable clearable></el-cascader>
+            <CityCascader v-model="getApiData.city_arr_id" @update-city-id="updateCityId"></CityCascader>
           </div>
         </el-col>
       </el-row>
@@ -124,7 +124,8 @@
           <el-cascader v-model="form.website_column_arr_id" :props="{checkStrictly:true}" :options="website_column_arr" @change="AppointWebsiteColumn"></el-cascader>
         </el-form-item>
         <el-form-item label="城市：" :label-width="formLabelWidth">
-          <el-cascader :key="cascaderKey" v-model="form.city_arr_id" placeholder="选择您要绑定的城市" :props="cityData" filterable clearable></el-cascader>
+          <!-- <el-cascader :key="cascaderKey" v-model="form.city_arr_id" placeholder="选择您要绑定的城市" :props="cityData" filterable clearable></el-cascader> -->
+          <CityCascader v-model="form.city_arr_id" @update-city-id="updateFormCityId"></CityCascader>
         </el-form-item>
         <el-form-item label="网站logo：" :label-width="formLabelWidth">
           <div class="uploaderBox">
@@ -166,9 +167,15 @@
 </template>
 
 <script>
-import getLocationNameById from '@/utils/citytocode';
+//本地编译城市代码
+//import getLocationNameById from '@/utils/citytocode';
+//城市级联选择器
+import CityCascader from './components/CityCascader';
 
 export default {
+  components: {
+    CityCascader, //城市级联选择器
+  },
   data() {
     //0.全局操作 start ------------------------------------------------------------>
     //表单验证
@@ -209,46 +216,15 @@ export default {
       allCount:0,//总条数
       //分页相关 end ------------------------------------------------------------>
 
-      //2.搜索 start ------------------------------------------------------------>
-      searchCascaderKey:0,//搜索栏用的key
-      SearchCityData: {
-        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/getcityList',parames).then(res=> {
-            if (res.data) {
-              const nodes = res.data.map(item => ({
-                value: item.id,
-                label: item.name,
-                leaf: level >= 3,
-                children: []
-              }))
-              resolve(nodes)
-            }
-          })
-        }
-      },
-      //2.搜索 end ------------------------------------------------------------>
-
-
-      //3.弹出框设置 start ------------------------------------------------------------>
+      //2.弹出框设置 start ------------------------------------------------------------>
       windowStatus:false, //显示第一层弹窗
       innerVisible:false, //显示第二层弹窗
       formLabelWidth: '120px',//表单的长度
       editBtn:false,//当显示编辑按钮的时候，就不显示提交
       //弹出框设置 start ------------------------------------------------------------>
 
-      //4.弹出框中的表单设置 start ------------------------------------------------------------>
-      //4.1 表单收集的数据
+      //3.弹出框中的表单设置 start ------------------------------------------------------------>
+      //3.1 表单收集的数据
       form: {
         website_name: '',//需要提交的网站名称
         website_url:[//需要绑定的网站地址
@@ -266,7 +242,7 @@ export default {
         description:"",//需要提交的网站描述
         template_id:""//选择的网站皮肤
       },
-      //4.2 表单验证规则
+      //3.2 表单验证规则
       formRules: {
         //网站名称不能为空
         website_name:[{required:true,trigger:'blur',validator:validateEmpty}],
@@ -282,7 +258,7 @@ export default {
         keywords:[{required:true,trigger:'blur',validator:validateEmpty}],
         description:[{required:true,trigger:'blur',validator:validateEmpty}],
       },
-      //4.3 通过api获的的数据 弹窗
+      //3.3 通过api获的的数据 弹窗
       website_column_arr:[],//api获得的网系列表
       //城市列表
       cascaderKey:0,//弹窗用的key
@@ -312,9 +288,9 @@ export default {
           })
         }
       },
-      //4.4 上传logo图片
+      //3.4 上传logo图片
       logoUrl:'',
-      //4.5 模板列表
+      //3.5 模板列表
       TemplateList:[],
       getTemplateData:{
         template_class_id:1,//模板类型，暂时为1
@@ -327,18 +303,26 @@ export default {
     }
   },
   methods: {
+    updateCityId(value) {
+      // 这里可以处理选择后的回调逻辑
+      console.log("城市ID已更新:", value);
+      // 可以在此处执行额外逻辑
+      this.getApiData.city_id = value;
+    },
+    updateFormCityId(value){
+      console.log("城市ID已更新:", value);
+      this.form.city_arr_id = value;
+    },
     //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];
       }else{
         this.getApiData.website_column_id = "";
       }
       if(this.getApiData.city_id.length>0){
-        //城市id只提交最后一个
         this.getApiData.city_id = this.getApiData.city_id[this.getApiData.city_id.length - 1];
       }else{
         this.getApiData.city_id = "";
@@ -346,6 +330,9 @@ export default {
       //如果是搜索，重新加载第一页
       if(type=="search"){
         this.getApiData.page = 1;
+        if(this.getApiData.city_arr_id) {
+          delete this.getApiData.city_arr_id;
+        }
       }
       //console.log(this.getApiData)
       this.$store.dispatch('pool/getWebList',this.getApiData).then(res=> {
@@ -625,7 +612,7 @@ export default {
     },
     //选择模板 end ------------------------------------------------------------>
 
-    //5.编辑旧网站 start ------------------------------------------------------------>
+    //5.编辑网站 start ------------------------------------------------------------>
     //5.1获取详情
     getDataMain(id){
       //先清空窗口
@@ -674,24 +661,6 @@ export default {
 
       this.editBtn = true;//显示编辑按钮
     },
-    async loadCascaderPath(path) {
-      for (let i = 0; i < path.length; i++) {
-        const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
-        const level = i; // 当前层级的索引
-        await this.$store.dispatch('pool/getcityList', { pid: parentId })
-          .then((res) => {
-            const nodes = res.data.map(item => ({
-              value: item.id,
-              label: item.name,
-              leaf: level >= 3, // 这里假设4层结构，设置叶子节点标记
-            }));
-            // 将数据传递到 resolve，通知 cascader 这一层的数据加载完毕
-            if (level === path.length - 1) {
-              this.form.city_arr_id = path;
-            }
-          });
-      }
-    },
     //5.2修改表单
     editToServe(){
       //提交之前把域名列表转换成数组

src/views/website/categoryList.vue

@@ -24,7 +24,7 @@
       </el-row>
     </div>
     <div class="layerBoxNoBg">
-      <el-button>重置</el-button>
+      <el-button @click="clearSearchList">重置</el-button>
       <el-button type="primary" style="margin-right:20px"  @click="getData('search')">搜索</el-button>
       <el-button type="success" icon="el-icon-link" @click="openWindow">添加导航池名称</el-button>
     </div>
@@ -64,33 +64,45 @@
 
     <!--弹出框 start------------------------------------------------------------>
     <el-dialog title="添加导航池名称" :visible.sync="windowStatus">
-      <el-form :model="form">
-        <el-form-item label="导航池名称：" :label-width="formLabelWidth">
+      <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+        <el-form-item label="导航池名称：" :label-width="formLabelWidth" prop="name">
           <el-input v-model="form.name" autocomplete="off"></el-input>
-          <el-checkbox v-model="show_url">引用外链</el-checkbox>
+          <el-checkbox v-model="show_url" @change="ifUrl">引用外链</el-checkbox>
         </el-form-item>
-        <div v-if="show_url==true">
-          <el-form-item label="外链地址：" :label-width="formLabelWidth">
+        <div v-if="form.is_url==1">
+          <el-form-item label="外链地址：" :label-width="formLabelWidth" prop="web_url">
             <el-input v-model="form.web_url" autocomplete="off"></el-input>
           </el-form-item>
+          <el-form-item label="导航标题：" :label-width="formLabelWidth" prop="seo_title">
+            <el-input v-model="form.seo_title" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="导航关键词：" :label-width="formLabelWidth" prop="seo_keywords">
+            <el-input v-model="form.seo_keywords" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="导航描述：" :label-width="formLabelWidth" prop="seo_description">
+            <el-input type="textarea" v-model="form.seo_description"></el-input>
+          </el-form-item>
+          <el-form-item label="排序：" :label-width="formLabelWidth">
+            <el-input v-model="form.sort" autocomplete="off"></el-input>
+          </el-form-item>
         </div>
-        <div v-else>
-          <el-form-item label="关联职能部门：" :label-width="formLabelWidth">
-            <el-cascader :key="departmentKey" v-model="form.department_arr_id" placeholder="选择您要绑定的职能部门" :props="departmentData" filterable clearable></el-cascader>
+        <div v-if="form.is_url==0">
+          <el-form-item label="关联职能部门：" :label-width="formLabelWidth" prop="department_arr_id">
+            <el-cascader :key="departmentKey" v-model="form.department_arr_id" placeholder="选择要绑定的职能部门" :props="departmentData" filterable clearable></el-cascader>
           </el-form-item>
-          <el-form-item label="关联行政区划：" :label-width="formLabelWidth">
-            <el-cascader :key="cascaderKey" v-model="form.city_arr_id" placeholder="选择您要绑定行政区划" :props="cityData" filterable clearable></el-cascader>
+          <el-form-item label="关联行政区划：" :label-width="formLabelWidth" prop="city_arr_id">
+            <el-cascader :key="cascaderKey" v-model="form.city_arr_id" placeholder="选择要绑定行政区划" :props="cityData" filterable clearable></el-cascader>
           </el-form-item>
-          <el-form-item label="父级导航：" :label-width="formLabelWidth">
-
+          <el-form-item label="父级导航：" :label-width="formLabelWidth" prop="pid_arr">
+            <el-cascader :key="parentKey" v-model="form.pid_arr" placeholder="请选择要绑定的父级导航" :props="parentData" filterable clearable></el-cascader>
           </el-form-item>
-          <el-form-item label="导航标题：" :label-width="formLabelWidth">
+          <el-form-item label="导航标题：" :label-width="formLabelWidth" prop="seo_title">
             <el-input v-model="form.seo_title" autocomplete="off"></el-input>
           </el-form-item>
-          <el-form-item label="导航关键词：" :label-width="formLabelWidth">
+          <el-form-item label="导航关键词：" :label-width="formLabelWidth" prop="seo_keywords">
             <el-input v-model="form.seo_keywords" autocomplete="off"></el-input>
           </el-form-item>
-          <el-form-item label="导航描述：" :label-width="formLabelWidth">
+          <el-form-item label="导航描述：" :label-width="formLabelWidth" prop="seo_description">
             <el-input type="textarea" v-model="form.seo_description"></el-input>
           </el-form-item>
           <el-form-item label="排序：" :label-width="formLabelWidth">
@@ -100,8 +112,8 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="closeWindow">取 消</el-button>
-        <el-button type="warning" @click="" v-if="editBtn==true">编辑</el-button>
-        <el-button type="primary" @click="" v-else>提交</el-button>
+        <el-button type="warning" @click="editToServe" v-if="editBtn==true">编辑</el-button>
+        <el-button type="primary" @click="addToServe" v-else>提交</el-button>
       </div>
     </el-dialog>
     <!--弹出框 end------------------------------------------------------------>
@@ -113,9 +125,37 @@
 export default {
   data() {
     //0.全局操作 start ------------------------------------------------------------>
+    //表单验证
+    const validateEmpty = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    const validateDepartment = (rule,value,callback) => {
+      if (value.length === 0) {
+          callback(new Error('请选择职能部门！'))
+      } else {
+          callback()
+      }
+    }
+    const validateCity = (rule,value,callback) => {
+      if (value.length === 0) {
+          callback(new Error('请选择行政区划！'))
+      } else {
+          callback()
+      }
+    }
+    const validatePid = (rule,value,callback) => {
+      if (value.length === 0) {
+          callback(new Error('请选择父级导航！'))
+      } else {
+          callback()
+      }
+    }
     let self = this;
     //0.全局操作 end ------------------------------------------------------------>
-
     return {
       //1.列表和分页相关 start ------------------------------------------------------------>
       tableData:[],//内容
@@ -205,12 +245,24 @@ export default {
         department_arr_id:[],//职能部门
         city_arr_id:[],//行政区划
         sort:0,//排序
-        pid:2,
+        //pid:2,
         seo_title:"",//标题
         seo_keywords:"",//关键词
         seo_description:"",//描述
         pid_arr:[]//父级导航
       },
+      //4.2表单验证规则
+      formRules: {
+        //网站名称不能为空
+        name:[{required:true,trigger:'blur',validator:validateEmpty}],//导航池名称不能为空
+        web_url:[{required:true,trigger:'blur',validator:validateEmpty}],//外链地址不能为空
+        department_arr_id: [{type:'array',required:true,trigger:'change',message:'请选择职能部门！',validator:validateDepartment}],
+        city_arr_id: [{type:'array',required:true,trigger:'change',message:'请选择行政区划！',validator:validateCity}],
+        pid_arr: [{type:'array',required:true,trigger:'change',message:'请选择父级导航！',validator:validatePid}],
+        seo_title:[{required:true,trigger:'blur',validator:validateEmpty}],//标题不能为空
+        seo_keywords:[{required:true,trigger:'blur',validator:validateEmpty}],//关键词不能为空
+        seo_description:[{required:true,trigger:'blur',validator:validateEmpty}],//描述不能为空
+      },
       //获取城市列表
       cascaderKey:0,//弹窗用的key
       cityData: {
@@ -267,8 +319,34 @@ export default {
           })
         }
       },
+      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: {
@@ -276,18 +354,18 @@ export default {
     //1.1 开始请求列表信息方法
     getData(type){
       //搜索条件
-      // if(this.getApiData.department_id.length>0){
-      //   //网系只提交最后一个
-      //   this.getApiData.department_id = this.getApiData.department_id[this.getApiData.department_id.length - 1];
-      // }else{
-      //   this.getApiData.department_id = "";
-      // }
-      // if(this.getApiData.city_id.length>0){
-      //   //城市id只提交最后一个
-      //   this.getApiData.city_id = this.getApiData.city_id[this.getApiData.city_id.length - 1];
-      // }else{
-      //   this.getApiData.city_id = "";
-      // }
+      if(this.getApiData.department_id.length>0){
+        //网系只提交最后一个
+        this.getApiData.department_id = this.getApiData.department_id[this.getApiData.department_id.length - 1];
+      }else{
+        this.getApiData.department_id = "";
+      }
+      if(this.getApiData.city_id.length>0){
+        //城市id只提交最后一个
+        this.getApiData.city_id = this.getApiData.city_id[this.getApiData.city_id.length - 1];
+      }else{
+        this.getApiData.city_id = "";
+      }
 
       //如果是搜索，重新加载第一页
       if(type=="search"){
@@ -348,12 +426,18 @@ export default {
       this.getApiData.page = val;
       this.getData();
     },
+    //1.5 重置按钮
+    clearSearchList(){
+      this.tableData = [];
+      this.getApiData.name = "";
+      this.getApiData.department_id = [];
+      this.getApiData.city_id = [];
+      this.getApiData.page = 1;
+      this.getApiData.pageSize = 10;
+      this.getData();
+    },
     //列表和分页相关 end ------------------------------------------------------------>
 
-    //添加导航池 start ------------------------------------------------------------>
-
-    //添加导航池 end ------------------------------------------------------------>
-
     //2.弹出框设置 start ------------------------------------------------------------>
     //2.1 打开弹出框
     openWindow() {
@@ -363,10 +447,67 @@ export default {
     //2.2 关闭弹出框
     closeWindow(){
       this.windowStatus = false;
-      //this.clearToServe();
+      this.clearToServe(2);
+    },
+    //2.3 清理弹出框
+    clearToServe(type){
+      if(type==1){ //type1 使用了外部链接
+        this.form.department_arr_id = [];
+        this.form.city_arr_id = [];
+        this.form.pid_arr = [];
+      }
+      if(type==2){ //type2 全部清理
+        this.form.name = "";
+        this.form.is_url = 0;
+        this.form.web_url = "";
+        this.form.department_arr_id = [];
+        this.form.city_arr_id = [];
+        this.form.sort = 0;
+        this.form.seo_title = "";
+        this.form.seo_keywords = "";
+        this.form.seo_description = "";
+        this.form.pid_arr = [];
+        this.$refs.form.clearValidate();
+      }
     },
     //弹出框设置 end ------------------------------------------------------------>
 
+    //3.添加导航池 start ------------------------------------------------------------>
+    ifUrl(value){
+      //console.log(value)
+      if(value == true){
+        this.form.is_url = 1
+      }else{
+        this.form.is_url = 0
+      }
+      this.$refs.form.clearValidate();
+    },
+    addToServe(){
+      //先判断是否使用了外链
+      if(this.show_url == true){
+        this.clearToServe(1)
+      }
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.$store.dispatch('pool/addCategory',this.form).then(res=> {
+            //汇报结果
+            this.$message({
+              type: 'success',
+              message: '已成功添加导航池！'
+            });
+            //清空并退出
+            this.closeWindow();
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+
+    },
+    //添加导航池 end ------------------------------------------------------------>
 
     //编辑导航池 start ------------------------------------------------------------>
     getDataMain(id){
@@ -385,11 +526,31 @@ export default {
         //回显导航池名称
         this.form.name = res.data.name;
 
+        //回显示是否使用外链
+        if(res.data.is_url==1){
+          this.show_url = true;
+        }else if(res.data.is_url==0){
+          this.show_url = false;
+        }
+        //回显外链
+        this.form.is_url=1;
+        this.form.web_url = res.data.web_url;
+
         //回显行政区划
-        this.form.city_arr_id = res.data.city_arr_id;
+        this.form.city_arr_id = JSON.parse(res.data.city_arr_id);
         //当cascaderKey的值改变的时候 级联选择器会重置里面的内容
         this.cascaderKey += 1;
-        this.loadCascaderPath(this.form.city_arr_id);
+        this.loadCascaderPath(this.form.city_arr_id,"xzqh");
+
+        //回显父级导航
+        this.form.pid_arr = JSON.parse(res.data.pid_arr);
+        this.parentKey += 1;
+        this.loadCascaderPath(this.form.pid_arr,"fjdh");
+
+        //回显职能部门
+        this.form.department_arr_id = JSON.parse(res.data.department_arr_id);
+        this.departmentKey += 1;
+        this.loadCascaderPath(this.form.department_arr_id,"znbm");
 
         //回显导航池标题，描述，关键词
         this.form.seo_title = res.data.seo_title;
@@ -403,7 +564,7 @@ export default {
       this.editBtn = true;//显示编辑按钮
     },
     //回显行政区划
-    async loadCascaderPath(path) {
+    async loadCascaderPath(path,type) {
       for (let i = 0; i < path.length; i++) {
         const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
         const level = i; // 当前层级的索引
@@ -416,12 +577,32 @@ export default {
             }));
             // 将数据传递到 resolve，通知 cascader 这一层的数据加载完毕
             if (level === path.length - 1) {
-              this.form.city_arr_id = path;
+              if(type=="xzqh"){this.form.city_arr_id = path;}
+              if(type=="fjdh"){this.form.pid_arr = path;}
+              if(type=="znbm"){this.form.department_arr_id = path;}
             }
           });
       }
     },
-
+    //修改表单
+    editToServe(){
+      this.form.id = this.editId;
+      //提交表单
+      this.$store.dispatch('pool/updateCategory',this.form).then(res=> {
+        //汇报结果
+        this.$message({
+          type: 'success',
+          message: '已成功修改导航池信息！'
+        });
+        //清空并退出
+        this.closeWindow();
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    }
     //编辑导航池 end ------------------------------------------------------------>
   },
   mounted(){

src/views/website/components/CityCascader.vue

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

src/views/website/components/multiLevelSelector.vue

@@ -1,8 +0,0 @@
-<template>
-</template>
-
-<script>
-</script>
-
-<style>
-</style>

src/views/website/websiteColumn.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="mainBox">
+    <div class="layerBox_search">
+      <el-row>
+        <el-col :span="8">
+          <div class="searchBox">
+            <div class="searchTitle">导航名称：</div>
+            <el-input placeholder="请选择导航名称" autocomplete="off"/>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="searchBox">
+            <div class="searchTitle">网站名称：</div>
+            <el-input placeholder="请选择网站名称" autocomplete="off"/>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
+    <div class="layerBoxNoBg">
+      <el-button>重置</el-button>
+      <el-button type="primary" style="margin-right:20px">搜索</el-button>
+      <el-button type="success" icon="el-icon-circle-plus-outline" @click="openWindow">添加导航名称</el-button>
+    </div>
+
+    <div class="layerBox">
+      <el-row>
+        <!--表格 start-->
+        <template>
+          <el-table :data="tableData" style="width: 100%">
+            <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
+            <el-table-column prop="navname" label="导航名称" width="340"></el-table-column>
+            <el-table-column prop="webname" label="网站名称" width="150"></el-table-column>
+            <el-table-column prop="creattime" label="创建时间" width="170"></el-table-column>
+            <el-table-column prop="edittime" label="修改时间" width="170"></el-table-column>
+            <el-table-column fixed="right" label="操作" width="120">
+              <template slot-scope="scope">
+                <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">移除</el-button>
+                <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">编辑</el-button>
+                <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">关联</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+        <!--表格 end-->
+      </el-row>
+    </div>
+    <!--分页 start-->
+    <div class="layerBox alignBox">
+      <el-row>
+        <el-col :span="24">
+          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="100" layout="total, prev, pager, next, jumper" :total="400"></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+    <!--分页 end-->
+
+    <!--弹出框-->
+    <el-dialog title="添加导航名称" :visible.sync="windowStatus">
+      <el-form :model="form">
+        <!--必须先搜索站点才能添加自己的导航-->
+        <el-form-item label="关联网站名称：" :label-width="formLabelWidth">
+          <el-select v-model="form.connectNavName" :multiple="false" :multiple-limit="1" filterable remote reserve-keyword placeholder="请输入关键词"
+              :remote-method="getWebsiteList" :loading="webSiteListLoading">
+              <el-option
+                v-for="item in webSiteList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+        </el-form-item>
+        <el-form-item label="导航名称：" :label-width="formLabelWidth">
+          <el-select v-model="form.navName" multiple filterable remote reserve-keyword placeholder="请输入关键词"
+              :remote-method="getWebNavList" :loading="navListLoading">
+              <el-option
+                v-for="item in navList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <div>
+          <el-button @click="windowStatus = false">取 消</el-button>
+          <el-button type="primary" @click="addToServe">确 定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [{
+        id: '1',
+        navname: '文化生活，三农之窗，三农人物，三农人物，文化之窗，贴身宝贝，区域经济，政策法制，打假维权，三农专题，三农探索，农贸资讯，农资购销，致富信息......',
+        webname: '中国三农市场网',
+        creattime:"2024-06-28 21:50:28",
+        edittime:"2024-06-29 11:22:24"
+      }],
+      //是否显示弹出窗口
+      windowStatus:false, //外层
+      innerVisible:false, //内层
+      formLabelWidth: '120px',
+
+      //弹出框中的表单设置 start ------------------------------------------------------------>
+      form: {
+        connectNavName:"",//关联网站名称
+        navName:[]//导航名称
+      },
+      webSiteListLoading:false,//获取关联网站列表的加载中
+      webSiteList:[],//获取关联网站列表
+      navListLoading: false, //获取网站导航的加载中
+      navList:[],//获取的网站导航列表
+      //弹出框中的表单设置 end ------------------------------------------------------------>
+    }
+  },
+  methods: {
+
+
+
+    //添加网站导航 start ------------------------------------------------------------>
+    //获得所有1级导航池
+    getWebsiteList(query){
+      if (query !== '') {
+        this.webSiteListLoading = true;
+        let data = {
+          pid:0,//默认只有第一级
+          name:query,
+        }
+        let dataArr = [];
+        this.$store.dispatch('pool/categoryList',data).then(res=> {
+          console.log(res.data)
+          for(let item of res.data){
+            let data = {};
+            data.key = item.id;
+            data.value = item.id;
+            data.label = item.name;
+            dataArr.push(data)
+          }
+          this.webSiteList = dataArr;
+          this.webSiteListLoading = false;
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '网络错误，请重试！'
+          });
+        })
+      } else {
+        this.navList = [];
+      }
+    },
+    //根据搜索框内容调用接口
+    getWebNavList(query){
+      if (query !== '') {
+        this.navListLoading = true;
+        let data = {keyword:query}
+        let dataArr = [];
+        this.$store.dispatch('pool/getNavWebList',data).then(res=> {
+          console.log(res.data)
+          for(let item of res.data){
+            let data = {};
+            data.key = item.id;
+            data.value = item.id;
+            data.label = item.website_name;
+            dataArr.push(data)
+          }
+          this.navList = dataArr;
+          this.navListLoading = false;
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '网络错误，请重试！'
+          });
+        })
+      } else {
+        this.navList = [];
+      }
+    },
+    addToServe(){
+      console.log(this.form.connectNavName) //关联网站id
+      console.log(this.form.navName) //导航名称
+      let data = {
+        website_id:this.form.connectNavName,//只能关联1个网站
+        category_arr_id:this.form.navName
+      }
+      //console.log(data)
+      this.$store.dispatch('pool/addWebsiteCategory',data).then(res=> {
+        console.log(res.data)
+
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    //添加网站导航 end ------------------------------------------------------------>
+
+
+
+
+    //分页跳转
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+    //打开跳转输入框
+    openWindow() {
+      this.windowStatus = true;
+    },
+  },
+}
+</script>
+
+<style scoped lang="less">
+  .layerBox_search {
+    margin:30px 30px 10px 30px;
+    background: #fff;
+    border-radius: 8px;
+    padding: 20px 20px 20px 20px;
+    box-sizing: border-box;
+    .searchTitle {
+      font-size:14px;
+      white-space:nowrap;
+    }
+    .searchBox {
+      display:flex;
+      align-items: center;
+      padding-right:20px;
+    }
+  }
+  .layerBox {
+    margin:30px;
+    background: #fff;
+    border-radius: 8px;
+    padding: 20px 20px 20px 20px;
+    box-sizing: border-box;
+  }
+  .layerBoxNoBg {
+    margin:0 30px 0 30px;
+    text-align: right;
+  }
+  .alignBox {
+    text-align:center
+  }
+</style>