0.0.13

完成网站关联导航池和资讯中心的开发

package.json

@@ -15,7 +15,6 @@
     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
-    "@tinymce/tinymce-vue": "^3.2.8",
     "axios": "0.18.1",
     "clipboard": "2.0.4",
     "codemirror": "5.45.0",
@@ -33,14 +32,16 @@
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "pinyin": "2.9.0",
+    "quill": "^1.3.7",
+    "quill-image-uploader": "^1.3.0",
     "screenfull": "4.2.0",
     "script-loader": "0.7.2",
     "sortablejs": "1.8.4",
-    "tinymce": "^7.4.1",
     "tui-editor": "1.3.3",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
     "vue-i18n": "7.3.2",
+    "vue-quill-editor": "^3.0.6",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
     "vuedraggable": "2.20.0",

src/api/news.js

@@ -0,0 +1,58 @@
+import request from '@/utils/request'
+
+//1.资讯中心 start ------------------------------------->
+
+//1.1 获取资讯列表
+export function getArticleList(params) {
+  return request({
+    url: '/news/getArticleList',
+    method: 'get',
+    params
+  })
+}
+
+//1.2 添加资讯
+export function addArticle(data) {
+  return request({
+    url: '/news/addArticle',
+    method: 'post',
+    data
+  })
+}
+
+//1.3 删除资讯
+export function delArticle(data) {
+  return request({
+    url: '/news/delArticle',
+    method: 'post',
+    data
+  })
+}
+
+//1.4 查看资讯
+export function getArticleInfo(params) {
+  return request({
+    url: '/news/getArticleInfo',
+    method: 'get',
+    params
+  })
+}
+
+//1.5 修改资讯内容
+export function updateArticle(data) {
+  return request({
+    url: '/news/updateArticle',
+    method: 'post',
+    data
+  })
+}
+
+//1.5 修改资讯状态
+export function upArticleStatus(data) {
+  return request({
+    url: '/news/upArticleStatus',
+    method: 'post',
+    data
+  })
+}
+

src/api/pool.js

@@ -165,4 +165,63 @@ export function addWebsiteCategory(data) {
     data
   })
 }
+//3.3 获取网站列表
+export function getWebsiteCategoryList(params) {
+  return request({
+    url: '/website/getWebsiteCategoryList',
+    method: 'get',
+    params
+  })
+}
+//3.4 删除导航
+export function delWebsiteCategory(data) {
+  return request({
+    url: '/website/delWebsiteCategory',
+    method: 'post',
+    data
+  })
+}
+//3.5 编辑时 - 查询网站下的导航
+export function getAdminWebsiteCategory(params) {
+  return request({
+    url: '/website/getAdminWebsiteCategory',
+    method: 'get',
+    params
+  })
+}
+//3.6 更新网站导航
+export function upWebsiteCategory(data) {
+  return request({
+    url: '/website/upWebsiteCategory',
+    method: 'post',
+    data
+  })
+}
 //网站导航 end ------------------------------------->
+
+//4.关联导航池 start ------------------------------------->
+//4.1 获取导航池列表
+export function getWebsiteAllCategory(params) {
+  return request({
+    url: '/website/getWebsiteAllCategory',
+    method: 'get',
+    params
+  })
+}
+//4.2 查询单个导航信息
+export function getWebsiteCategoryOnes(params) {
+  return request({
+    url: '/website/getWebsiteCategoryOnes',
+    method: 'get',
+    params
+  })
+}
+//4.3 编辑导航信息
+export function upWebsiteCategoryones(data) {
+  return request({
+    url: '/website/upWebsiteCategoryones',
+    method: 'post',
+    data
+  })
+}
+//关联导航池 end ------------------------------------->

src/components/Breadcrumb/index.vue

@@ -2,10 +2,19 @@
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">
+        <!-- <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">
           {{ generateTitle(item.meta.title) }}
         </span>
-        <a v-else @click.prevent="handleLink(item)">{{ generateTitle(item.meta.title) }}</a>
+        <a v-else @click.prevent="handleLink(item)">{{ generateTitle(item.meta.title) }}</a> -->
+        <template v-if="item.path === '/dashboard'">
+          <img :src="homeIcon" alt="首页图标" style="height: 20px; vertical-align: middle;">
+        </template>
+        <template v-else>
+          <span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">
+            {{ generateTitle(item.meta.title) }}
+          </span>
+          <a v-else @click.prevent="handleLink(item)">{{ generateTitle(item.meta.title) }}</a>
+        </template>
       </el-breadcrumb-item>
     </transition-group>
   </el-breadcrumb>
@@ -18,7 +27,8 @@ import pathToRegexp from 'path-to-regexp'
 export default {
   data() {
     return {
-      levelList: null
+      levelList: null,
+      homeIcon: require('@/assets/public/nav/Home.png') //引入首页图片路径
     }
   },
   watch: {
@@ -40,8 +50,11 @@ export default {
       let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
       const first = matched[0]
 
-      if (!this.isDashboard(first)) {
-        matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
+      // if (!this.isDashboard(first)) {
+      //   matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
+      // }
+      if (!this.isDashboard(first) && !matched.some(item => item.path === '/dashboard')) {
+        matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)
       }
 
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
@@ -74,10 +87,14 @@ export default {
 <style lang="scss" scoped>
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
-  font-size: 14px;
-  line-height: 50px;
-  margin-left: 8px;
-
+  font-size: 12px;
+  line-height: 30px;
+  margin-left: 30px;
+  img {
+    width:13px !important;
+    height:13px !important;
+    margin-top:-4px;
+  }
   .no-redirect {
     color: #97a8be;
     cursor: text;

src/layout/components/Navbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="navbar">
-    <div class="pageTitle">平台管理概况</div>
+    <div class="pageTitle">{{this.$route.meta.title}}</div>
     <!--收缩左侧菜单按钮-->
     <!-- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
@@ -30,7 +30,7 @@
               {{ $t('navbar.profile') }}
             </el-dropdown-item>
           </router-link>
-          <router-link to="/">
+          <!-- <router-link to="/">
             <el-dropdown-item>
               {{ $t('navbar.dashboard') }}
             </el-dropdown-item>
@@ -42,9 +42,9 @@
           </a>
           <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
             <el-dropdown-item>Docs</el-dropdown-item>
-          </a>
+          </a> -->
           <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">{{ $t('navbar.logOut') }}</span>
+            <span style="display:block;">{{$t('navbar.logOut')}}</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>

src/layout/components/Sidebar/Logo.vue

@@ -22,7 +22,7 @@ export default {
   },
   data() {
     return {
-      title: '政讯通运营管理平台',
+      title: '恒星管理平台',
       //logo: '/assets/public/nav/logo.png'
     }
   }
@@ -44,7 +44,7 @@ export default {
   width: 100%;
   height: 104px;
   line-height: 96px;
-  background: #fff;
+  background: #2F2F2F;
   text-align: center;
   overflow: hidden;
 
@@ -61,7 +61,7 @@ export default {
     & .sidebar-title {
       display: inline-block;
       margin: 0;
-      color: #45464E;
+      color: #fff;
       font-weight: 800;
       line-height: 50px;
       font-size: 22px;

src/router/index.js

@@ -113,13 +113,13 @@ export const constantRoutes = [
     component: Layout,
     children: [
       {
-        name: '', //直接就是根目录所以为空
+        name: '',
         path: '',
         component: () => import('@/views/website/categoryList'),
         meta: {
-          title: '导航池', // 设置菜单和面包屑显示的标题
-          hidden: true, // 不在侧边菜单显示
-          breadcrumb: true // 强制在面包屑中显示
+          title: '导航池',
+          hidden: true,
+          breadcrumb: true
         }
       }
     ]
@@ -129,13 +129,61 @@ export const constantRoutes = [
     component: Layout,
     children: [
       {
-        name: '', //直接就是根目录所以为空
+        name: '',
         path: '',
         component: () => import('@/views/website/websiteColumn'),
         meta: {
-          title: '网站导航', // 设置菜单和面包屑显示的标题
-          hidden: true, // 不在侧边菜单显示
-          breadcrumb: true // 强制在面包屑中显示
+          title: '网站导航',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/editNavigation',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/website/editNavigation'),
+        meta: {
+          title: '导航详情',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/articleList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/news/NewList'),
+        meta: {
+          title: '资讯列表',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/creatNews',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/news/creatNews'),
+        meta: {
+          title: '添加资讯',
+          hidden: true,
+          breadcrumb: true
         }
       }
     ]

src/store/modules/news.js

@@ -0,0 +1,82 @@
+import { getArticleList,addArticle,delArticle,getArticleInfo,updateArticle,upArticleStatus} from '@/api/news'
+
+const state = {
+
+}
+
+const mutations = {
+
+}
+
+const actions = {
+  //1.资讯中心 start ---------------------------------------->
+  //获取资讯列表
+  getArticleList({commit},data) {
+    return new Promise((resolve, reject) => {
+      getArticleList(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //添加资讯
+  addArticle({commit},data) {
+    return new Promise((resolve, reject) => {
+      addArticle(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //删除资讯
+  delArticle({commit},data) {
+    return new Promise((resolve, reject) => {
+      delArticle(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //获取资讯详情
+  getArticleInfo({commit},data) {
+    return new Promise((resolve, reject) => {
+      getArticleInfo(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //修改资讯内容
+  updateArticle({commit},data) {
+    return new Promise((resolve, reject) => {
+      updateArticle(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //修改资讯显示或隐藏
+  upArticleStatus({commit},data) {
+    return new Promise((resolve, reject) => {
+      upArticleStatus(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //资讯中心 end ---------------------------------------->
+}
+
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/store/modules/pool.js

@@ -2,7 +2,9 @@ import { getWebList,deleteWebList,getwebsiteColumn,
 getcityList,uploadFile,getTemplate,addWebsite,getWebsiteInfo,
 updateWebsite,getDepartment,getCategoryList,delCategory,
 getCategoryInfo,categoryList,addCategory,updateCategory,
-getNavWebList,addWebsiteCategory} from '@/api/pool'
+getNavWebList,addWebsiteCategory,getWebsiteCategoryList,
+getAdminWebsiteCategory,upWebsiteCategory,
+getWebsiteAllCategory,getWebsiteCategoryOnes,upWebsiteCategoryones} from '@/api/pool'
 
 const state = {
 
@@ -200,8 +202,70 @@ const actions = {
       })
     })
   },
+  //添加导航
+  getWebsiteCategoryList({commit},data) {
+    return new Promise((resolve, reject) => {
+      getWebsiteCategoryList(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //查询网站下的导航
+  getAdminWebsiteCategory({commit},data) {
+    return new Promise((resolve, reject) => {
+      getAdminWebsiteCategory(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //编辑网站导航
+  upWebsiteCategory({commit},data) {
+    return new Promise((resolve, reject) => {
+      upWebsiteCategory(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
   //网站导航管理 end ---------------------------------------->
 
+  //4.关联导航池 start ---------------------------------------->
+  //导航列表
+  getWebsiteAllCategory({commit},data) {
+    return new Promise((resolve, reject) => {
+      getWebsiteAllCategory(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //查询单个导航信息
+  getWebsiteCategoryOnes({commit},data) {
+    return new Promise((resolve, reject) => {
+      getWebsiteCategoryOnes(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //编辑导航
+  upWebsiteCategoryones({commit},data) {
+    return new Promise((resolve, reject) => {
+      upWebsiteCategoryones(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  }
+  //关联导航池 end ---------------------------------------->
 }
 
 

src/styles/sidebar.scss

@@ -11,7 +11,7 @@
     transition: width 0.28s;
     width: $sideBarWidth !important;
     // background-color: $menuBg;
-    background:#fff;
+    background: #2F2F2F;
     height: 100%;
     position: fixed;
     font-size: 0px;

src/styles/variables.scss

@@ -9,15 +9,15 @@ $yellow:#FEC171;
 $panGreen: #30B08F;
 
 // sidebar
-$menuText:#53545C;
+$menuText:#ccc;
 $menuActiveText:#fff;
 $subMenuActiveText:#rgb(83, 84, 92); // https://github.com/ElemeFE/element/issues/12951
 
-$menuBg:#FFF;
-$menuHover:#FFF;
+$menuBg:#2F2F2F;
+$menuHover:#2F2F2F;
 
-$subMenuBg:#FFF;
-$subMenuHover:#FFF;
+$subMenuBg:#2F2F2F;
+$subMenuHover:#2F2F2F;
 
 $sideBarWidth: 290px;
 

src/views/news/NewList.vue

@@ -0,0 +1,298 @@
+<template>
+  <div class="mainBox">
+    <!--搜索功能 start------------------------------------------------------------>
+    <div class="layerBox_search">
+      <el-row>
+        <el-col :span="8">
+          <div class="searchBox">
+            <div class="searchTitle">资讯题目：</div>
+            <el-input placeholder="请输入资讯题目" autocomplete="off" v-model="getApiData.title"/>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="searchBox">
+            <div class="searchTitle">导航池名称：</div>
+            <el-input placeholder="请输入导航池名称" autocomplete="off" v-model="getApiData.catid"/>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="searchBox">
+            <div class="searchTitle">作者：</div>
+            <el-input placeholder="请输入作者姓名" autocomplete="off" v-model="getApiData.author"/>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <div class="searchBox">
+            <div class="searchTitle">是否引用外链：</div>
+            <el-select v-model="getApiData.islink" placeholder="请选择..">
+              <el-option label="否" value="0"></el-option>
+              <el-option label="是" value="1"></el-option>
+            </el-select>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="searchBox">
+            <div class="searchTitle">资讯状态：</div>
+            <el-select v-model="getApiData.status" placeholder="请选择..">
+              <el-option label="隐藏" value="0"></el-option>
+              <el-option label="显示" value="1"></el-option>
+              <el-option label="已删除" value="404"></el-option>
+            </el-select>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="layerBoxNoBg">
+      <el-button @click="clearSearchList">重置</el-button>
+      <el-button type="primary" style="margin-right:20px" @click="getData">搜索</el-button>
+      <el-button type="success" @click="goCreat">发布资讯</el-button>
+    </div>
+    <!--搜索功能 end------------------------------------------------------------>
+
+    <!--表格内容 start------------------------------------------------------------>
+    <div class="layerBox">
+      <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="title" label="资讯题目" width="250"></el-table-column>
+            <el-table-column prop="category_name" label="导航池名称" width="140"></el-table-column>
+            <el-table-column prop="status" label="状态" width="170">
+              <template slot-scope="scope">
+                <span v-if="scope.row.status==404">404</span>
+                <el-switch
+                  v-else
+                  v-model="scope.row.status"
+                  :active-value="1"
+                  :inactive-value="0"
+                  @change="upRow(scope.row.id,scope.row.status)"
+                ></el-switch>
+              </template>
+            </el-table-column>
+            <el-table-column prop="islink" label="是否引用外链" width="150"></el-table-column>
+            <el-table-column prop="fromurl" label="来源" width="170"></el-table-column>
+            <el-table-column prop="author" label="作者" width="80"></el-table-column>
+            <el-table-column prop="level" label="排序" width="100"></el-table-column>
+            <el-table-column prop="created_at" label="创建时间" width="170"></el-table-column>
+            <el-table-column prop="updated_at" 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.row.id, tableData)" type="text" size="small">移除</el-button>
+                <el-button @click.native.prevent="goEdit(scope.row.id, tableData)" type="text" size="small">编辑</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+      </el-row>
+    </div>
+    <!--分页 start------------------------------------------------------------>
+    <div class="layerBox alignBox">
+      <el-row>
+        <el-col :span="24">
+          <el-pagination @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------------------------------------------------------------>
+    <!--表格内容 end------------------------------------------------------------>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      //1.列表和分页相关 start ------------------------------------------------------------>
+      tableData:[],//内容
+      editId:0,//要修改的网站id
+      getApiData:{
+        title:"",//标题
+        catid:"",//导航池id
+        author:"",//作者
+        islink:"",//是否使用外链
+        status:"",//资讯状态
+        page:1,//当前是第几页
+        pageSize:10,//一共多少条
+      },
+      allCount:0,//总条数
+      //分页相关 end ------------------------------------------------------------>
+    }
+  },
+  methods: {
+    //1.列表和分页相关 start ------------------------------------------------------------>
+    //1.1 开始请求列表信息方法
+    getData(){
+      this.$store.dispatch('news/getArticleList',this.getApiData).then(res=> {
+        //格式化：islink=0为不使用外面 islink=1为使用外链
+        //status=1为显示 status=2为不显示
+        let data = [];
+        for(let item of res.data.rows){
+          // if(item.status==0){item.status="隐藏"}
+          // if(item.status==1){item.status="显示"}
+          // if(item.status==404){item.status="已删除"}
+          if(item.islink==0){item.islink="否"}
+          if(item.islink==1){item.islink="是"}
+          data.push(item)
+        }
+        this.tableData = res.data.rows; //给与内容
+        this.allCount = res.data.count; //给与总条数
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    //1.2 删除内容
+    deleteRow(id){
+      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log("当前删除：" + id)
+        this.$store.dispatch('news/delArticle',{id:id}).then(res=> {
+          this.getData();
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '网络错误，请重试！'
+          });
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
+    },
+    //1.3 修改网站状态
+    upRow(id,status){
+      let data = {
+        id:id,
+        status:status
+      }
+      this.$store.dispatch('news/upArticleStatus',data).then(res=> {
+        if(res.code==200){
+          this.$message({
+            type: 'success',
+            message: '资讯状态已修改!'
+          });
+        }
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
+    },
+    //1.4 列表内容分页
+    //直接跳转
+    handleSizeChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.5 点击分页
+    handleCurrentChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.6 重置按钮
+    clearSearchList(){
+      this.tableData = [];
+      this.getApiData.title = "";
+      this.getApiData.catid = "";
+      this.getApiData.author = "";
+      this.getApiData.islink = "";
+      this.getApiData.status = "";
+      this.getApiData.page = 1;
+      this.getApiData.pageSize = 10;
+      this.getData();
+    },
+    //列表和分页相关 end ------------------------------------------------------------>
+
+    //2.添加新闻 start ------------------------------------------------------------>
+    //跳转到资讯发布页面
+    goCreat(){
+      this.$router.push({
+        path: '/creatNews',
+      });
+    },
+    goEdit(id){
+      let data = {
+        id:id
+      }
+      this.$router.push({
+        path: '/creatNews',
+        query: data
+      });
+    }
+    //添加新闻 end ------------------------------------------------------------>
+  },
+  mounted(){
+    //1.获得初始数据
+    this.getData();
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .layerBox_search {
+    margin:30px 30px 10px 30px;
+    background: #fff;
+    border-radius: 8px;
+    padding: 20px 20px 0 20px;
+    box-sizing: border-box;
+    overflow:hidden;
+    .el-row {
+      margin-bottom:20px;
+    }
+    .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
+  }
+  /*弹出窗口*/
+  .windowTitle {
+    display:flex;
+    padding-bottom:20px;
+    font-size:16px;
+    font-weight: bold;
+    box-sizing: border-box;
+    margin-bottom: 20px;
+    .webNavTitle {
+      width:120px;
+      text-align:right;
+      margin-right:20px;
+    }
+    .webNavTitleRight {
+      width:100%;
+      text-align: center;
+    }
+  }
+</style>

src/views/news/creatNews.vue

@@ -0,0 +1,561 @@
+<template>
+  <div class="mainBox">
+    <div class="layerBox">
+      <el-form :model="form" ref="form" :rules="formRules">
+        <el-form-item label="资讯题目：" prop="title">
+          <el-input v-model="form.title" autocomplete="off"></el-input>
+          <el-checkbox v-model="form.islink">是否使用外链</el-checkbox>
+        </el-form-item>
+        <div v-if="form.islink==1">
+          <el-form-item label="外链地址：" prop="linkurl">
+            <el-input v-model="form.linkurl" autocomplete="off"></el-input>
+          </el-form-item>
+        </div>
+        <div v-if="form.islink==0">
+          <el-form-item label="导航池名称：" prop="category_name">
+            <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="level">
+            <el-input v-model="form.level" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="缩略图：">
+            <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>
+              </el-upload>
+            </div>
+          </el-form-item>
+          <el-form-item label="资讯关键词：" prop="keyword">
+            <el-input v-model="form.keyword" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="资讯描述：" prop="introduce">
+            <el-input type="textarea" v-model="form.introduce"></el-input>
+          </el-form-item>
+          <div class="QuillTitle"><span>* </span>资讯内容：</div>
+          <el-form-item label="" prop="content">
+            <div class="editor-container">
+              <quill-editor
+                  ref="quillEditor"
+                  v-model="form.content"
+                  :options="editorOptions"
+                  class="my-quill-editor"
+                />
+              <!-- 多图上传隐藏的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">
+            <el-input v-model="form.author" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="浏览量：">
+            <el-input v-model="form.hits" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="是否为原创：" prop="is_original">
+            <el-radio v-model="form.is_original" label="1">是</el-radio>
+            <el-radio v-model="form.is_original" label="0">不是</el-radio>
+          </el-form-item>
+          <div v-if="form.is_original==0">
+            <el-form-item label="来源名称：" prop="copyfrom">
+              <el-input v-model="form.copyfrom" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="来源链接：" prop="linkurl">
+              <el-input v-model="form.linkurl" autocomplete="off"></el-input>
+            </el-form-item>
+          </div>
+          <el-form-item label="资讯状态：">
+            <el-select v-model="form.status" placeholder="请选择..">
+              <el-option label="隐藏" :value="0"></el-option>
+              <el-option label="显示" :value="1"></el-option>
+              <el-option label="404" :value="404"></el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+    <div class="bottomBtnBox">
+      <el-button type="warning" @click="editToServe" v-if="editStatus==true">修改资讯</el-button>
+      <el-button type="success" @click="addToServe" v-else>发布资讯</el-button>
+      <el-button @click="returnPage">返回</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+// 引入 Quill 和相关插件
+import Quill from 'quill';
+import VueQuillEditor from 'vue-quill-editor';
+import 'quill/dist/quill.core.css';
+import 'quill/dist/quill.snow.css';
+import 'quill/dist/quill.bubble.css';
+import ImageUploader from 'quill-image-uploader';
+
+// 注册插件
+Quill.register('modules/imageUploader', ImageUploader);
+
+export default {
+  components: {
+    QuillEditor: VueQuillEditor.quillEditor // 注册 QuillEditor 组件
+  },
+  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,//当前页面是编辑还是添加
+      editId:"",//如果是编辑 添加资讯id
+      form: {
+        //1.1使用了外链
+        title: '',//资讯标题
+        islink:0,//是否使用外链 0非 1是
+        linkurl:"",//外链地址
+        //1.2没有使用外链
+        cat_arr_id:'',//导航池名称
+        level:"",//推荐等级
+        imgurl:"",//缩略图
+        keyword:"",//关键词
+        introduce:"",//描述
+        content:"",//内容
+        author:"",//作者
+        hits:"",//浏览量
+        is_original:"",//是否为原创 0非 1是
+        copyfrom:"",//来源名称
+        fromurl:"",//来源地址
+        status:""//状态 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}]
+      },
+      //1.3富文本编辑器配置
+      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': [] }],
+              ['link', 'image'],  // 确保image按钮存在
+              ['clean']
+            ],
+            handlers: {
+              image: () => {
+                this.handleImageClick();
+              }
+            }
+          }
+        }
+      },
+      //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 编辑器上传图片
+    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;
+        });
+    },
+    //1.3 提交表单
+    addToServe(){
+      //提交之前先判断是否为外链
+      //如果使用了外链，清理掉除了外链以外的内容
+      if(this.form.islink==1){
+        this.cleatForm(1)
+      }
+      //先进行验证
+      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.4 清理表单
+    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;
+        this.form.islink = res.data.islink;
+        this.form.linkurl = res.data.linkurl;
+
+        // 回显导航池
+        this.form.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 ------------------------------------------------------------>
+  },
+  mounted(){
+    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("添加新闻！")
+    }
+  }
+};
+</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
+  }
+  .bottomBtnBox {
+    margin:0 30px 30px 30px;
+    text-align:center;
+  }
+  //文本编辑器
+  .QuillTitle {
+    line-height: 36px;
+    font-size: 14px;
+    color: #606266;
+    font-weight:bold;
+  }
+  .editor-container {
+    height: 420px;
+    padding-bottom:20px;
+  }
+  .my-quill-editor {
+    height: 320px;
+  }
+  .ql-editor {
+    height: 320px;
+  }
+  //文件上传
+  .uploaderBox {
+    .avatar-uploader{
+      width: 300px;
+      border: 1px dashed #d9d9d9;
+      height: 150px;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+    .avatar-uploader {
+      border-color: #409EFF;
+    }
+  }
+  .avatar-uploader-icon {
+    font-size: 20px;
+    color: #8c939d;
+    width: 300px;
+    height: 150px;
+    line-height: 150px;
+    text-align: center;
+  }
+  .avatar {
+    width: 300px;
+    height: 150px;
+    display: block;
+  }
+</style>

src/views/website/editNavigation.vue

@@ -0,0 +1,386 @@
+<template>
+  <div class="mainBox">
+    <!--搜索功能 start------------------------------------------------------------>
+    <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.alias"/>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">导航名称：</div>
+              <el-input placeholder="请输入导航名称" autocomplete="off" v-model="getApiData.name"/>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">行政职能部门：</div>
+              <el-cascader :key="searchDepartmentKey" v-model="getApiData.department_id" placeholder="选择导航池所属行政区划" :props="searchDepartmentData" filterable clearable></el-cascader>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div>
+        <el-row>
+          <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>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <div class="layerBoxNoBg">
+      <el-button @click="clearSearchList">重置</el-button>
+      <el-button type="primary" style="margin-right:20px" @click="getData()">搜索</el-button>
+    </div>
+    <!--搜索功能 end------------------------------------------------------------>
+
+    <!--表格内容 start------------------------------------------------------------>
+    <div class="layerBox">
+      <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="alias" label="网站导航" width="160"></el-table-column>
+            <el-table-column prop="name" label="导航名称" width="160"></el-table-column>
+            <el-table-column prop="created_at" label="创建时间" width="170"></el-table-column>
+            <el-table-column prop="updated_at" label="修改时间" width="170"></el-table-column>
+            <el-table-column fixed="right" label="操作" width="120">
+              <template slot-scope="scope">
+                <el-button @click.native.prevent="editRow(scope.row.category_id)" type="text" size="small">编辑</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+      </el-row>
+    </div>
+
+    <!--分页 start------------------------------------------------------------>
+    <div class="layerBox alignBox">
+      <el-row>
+        <el-col :span="24">
+          <el-pagination @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------------------------------------------------------------>
+    <!--表格内容 end------------------------------------------------------------>
+
+    <!--弹出框start------------------------------------------------------------>
+    <el-dialog title="编辑导航池" :visible.sync="windowStatus">
+      <el-form :model="form" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+        <el-form-item label="导航名称：" :label-width="formLabelWidth" prop="alias">
+          <el-input v-model="form.alias" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="导航seo名称：" :label-width="formLabelWidth" prop="seo_title">
+          <div class="formLabelFloatBox">
+            <el-input v-model="form.seo_title" autocomplete="off"></el-input>
+          </div>
+        </el-form-item>
+        <el-form-item label="导航关键词：" :label-width="formLabelWidth" prop="seo_keywords">
+          <div class="formLabelFloatBox">
+            <el-input v-model="form.seo_keywords" autocomplete="off"></el-input>
+          </div>
+        </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>
+      <div slot="footer" class="dialog-footer">
+        <div>
+          <el-button @click="closeWindow">取 消</el-button>
+          <el-button type="primary" @click="addToServe">提交</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!--弹出框2：外部表单弹出框 end------------------------------------------------------------>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    //0.全局操作 start ------------------------------------------------------------>
+    //表单验证
+    const validateEmpty = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    let self = this;
+    //0.全局操作 end ------------------------------------------------------------>
+
+    return {
+      //1.列表和分页相关 start ------------------------------------------------------------>
+      tableData: [],//列表
+      allCount:0,//总条数
+      editId:0,//要修改的网站id
+      getApiData:{
+        website_id:0,//网站id
+        name:"",//导航名称
+        alias:"",//网站导航名称
+        city_id:"",//行政区划
+        department_id:"",//行政职能部门
+        page:1,//当前是第几页
+        pageSize:10,//一共多少条
+      },
+      website_column_arr:[],//获得的网系
+      //分页相关 end ------------------------------------------------------------>
+
+      //2.弹出框设置 start ------------------------------------------------------------>
+      //是否显示弹出窗口
+      windowStatus:false,
+      formLabelWidth: '120px',
+      //弹出框设置 end ------------------------------------------------------------>
+
+      //3.搜索相关 start ------------------------------------------------------------>
+      //3.1获得职能部门
+      searchDepartmentKey:0,
+      searchDepartmentData: {
+        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/getDepartment',parames).then(res=> {
+            if (res.data) {
+              const nodes = res.data.map(item => ({
+                value: item.id,
+                label: item.name,
+                leaf: level >= 3,
+                children: []
+              }))
+              resolve(nodes)
+            }
+          })
+        }
+      },
+      //3.2获得行政区划
+      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)
+            }
+          })
+        }
+      },
+      //搜索相关 end ------------------------------------------------------------>
+
+      //3.弹出框中的表单设置 start ------------------------------------------------------------>
+      //3.1 表单收集的数据
+      form: {
+        website_id:0,//网站id
+        category_id:0,//导航id
+        alias:"",//导航名称
+        seo_title:"",//导航seo名称
+        seo_keywords:"",//导航关键词
+        seo_description:""//导航描述
+      },
+      //3.2表单验证规则
+      formRules: {
+        //网站名称不能为空
+        alias:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //网站标题，关键词，描述不能为空
+        seo_title:[{required:true,trigger:'blur',validator:validateEmpty}],
+        seo_keywords:[{required:true,trigger:'blur',validator:validateEmpty}],
+        seo_description:[{required:true,trigger:'blur',validator:validateEmpty}],
+      },
+      //弹出框中的表单设置 end ------------------------------------------------------------>
+    }
+  },
+  methods: {
+    //1.列表和分页相关 start ------------------------------------------------------------>
+    //1.1 获取内容
+    getData(){
+      //行政职能部门提交最后一个
+      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 = "";
+      }
+      //城市id提交最后一个
+      if(this.getApiData.city_id.length>0){
+        this.getApiData.city_id = this.getApiData.city_id[this.getApiData.city_id.length - 1];
+      }else{
+        this.getApiData.city_id = "";
+      }
+      this.$store.dispatch('pool/getWebsiteAllCategory',this.getApiData).then(res=> {
+        let data = res.data.rows;
+        this.tableData = data;//放入数据
+        this.allCount = res.data.count;//放入总条数
+      })
+    },
+    //1.2 列表内容分页
+    //直接跳转
+    handleSizeChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.3 点击分页
+    handleCurrentChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.4 重置按钮
+    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 ------------------------------------------------------------>
+
+    //2.弹出框设置 start ------------------------------------------------------------>
+    //2.1 打开弹出框
+    openWindow() {
+      this.clearToServe();
+      this.windowStatus = true;
+    },
+    //2.2 关闭弹出框
+    closeWindow(){
+      this.windowStatus = false;
+      this.clearToServe();
+    },
+    //2.3 清空提交窗口
+    clearToServe(){
+      //重置窗口
+      this.editId = "";
+      this.form.website_id = 0;
+      this.form.category_id = 0;
+      this.form.alias = "";
+      this.form.seo_title = "";
+      this.form.seo_keywords = "";
+      this.form.seo_description = "";
+    },
+    //弹出框设置 end ------------------------------------------------------------>
+
+
+    //4.编辑导航 start ------------------------------------------------------------>
+    //回显数据
+    editRow(id){
+      this.openWindow();
+      let data = {
+        website_id:this.$route.query.website_id,
+        category_id:id
+      }
+      this.$store.dispatch('pool/getWebsiteCategoryOnes',data).then(res=> {
+        console.log(res.data)
+        this.form.website_id = this.$route.query.website_id;
+        this.form.category_id = id;
+        this.form.alias = res.data.alias;
+        this.form.seo_title = res.data.seo_title;
+        this.form.seo_keywords = res.data.seo_keywords;
+        this.form.seo_description = res.data.seo_description;
+      })
+    },
+    //提交编辑的数据
+    addToServe(){
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.$store.dispatch('pool/upWebsiteCategoryones',this.form).then(res=> {
+            //汇报结果
+            this.$message({
+              type: 'success',
+              message: '已成功修改导航信息！'
+            });
+            //清空并退出
+            this.closeWindow();
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+      this.getData();
+    }
+    //编辑导航 end ------------------------------------------------------------>
+
+  },
+  mounted(){
+    //console.log(this.$route.query);
+    //获取具体参数
+    this.getApiData.website_id = this.$route.query.website_id;
+    this.getApiData.page = this.$route.query.page;
+    this.getApiData.pageSize = this.$route.query.pageSize;
+    //获取页面列表
+    this.getData();
+  }
+}
+</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;
+    .layerBoxLine {
+      margin-bottom: 20px;
+    }
+    .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>

src/views/website/websiteColumn.vue

@@ -1,67 +1,69 @@
 <template>
   <div class="mainBox">
+    <!--搜索功能 start------------------------------------------------------------>
     <div class="layerBox_search">
       <el-row>
         <el-col :span="8">
           <div class="searchBox">
-            <div class="searchTitle">导航名称：</div>
-            <el-input placeholder="请选择导航名称" autocomplete="off"/>
+            <div class="searchTitle">网站名称：</div>
+            <el-input placeholder="请输入网站名称" autocomplete="off" v-model="getApiData.keyword"/>
           </div>
         </el-col>
         <el-col :span="8">
           <div class="searchBox">
-            <div class="searchTitle">网站名称：</div>
-            <el-input placeholder="请选择网站名称" autocomplete="off"/>
+            <div class="searchTitle">网系名称：</div>
+            <el-cascader v-model="getApiData.website_column_id" :props="{checkStrictly:true}" :options="website_column_arr" clearable></el-cascader>
           </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>
+      <el-button @click="clearSearch">重置</el-button>
+      <el-button type="primary" style="margin-right:20px" @click="getData()">搜索</el-button>
+      <el-button type="success" @click="openWindow">添加导航名称</el-button>
     </div>
+    <!--搜索功能 end------------------------------------------------------------>
 
+    <!--表格内容 start------------------------------------------------------------>
     <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 prop="website_category" label="导航名称" width="340"></el-table-column>
+            <el-table-column prop="website_name" label="网站名称" width="150"></el-table-column>
+            <el-table-column prop="created_at" label="创建时间" width="170"></el-table-column>
+            <el-table-column prop="updated_at" 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>
+                <el-button @click.native.prevent="deleteRow(scope.row.id, tableData)" type="text" size="small">移除</el-button>
+                <el-button @click.native.prevent="editRow(scope.row.id, scope.row.website_name)" type="text" size="small">编辑</el-button>
+                <!--从这里开始开发 跳转到新页面然后使用那三个新的接口-->
+                <el-button @click.native.prevent="manageRow(scope.row.id)" type="text" size="small">详情</el-button>
               </template>
             </el-table-column>
           </el-table>
         </template>
-        <!--表格 end-->
       </el-row>
     </div>
-    <!--分页 start-->
+
+    <!--分页 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-pagination @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-->
+    <!--分页 end------------------------------------------------------------>
+    <!--表格内容 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">
+    <!--弹出框 start------------------------------------------------------------>
+    <el-dialog title="编辑导航名称" :visible.sync="windowStatus">
+      <el-form :model="form" ref="form" :rules="formRules">
+        <el-form-item label="关联网站名称：" :label-width="formLabelWidth" prop="webSiteName">
+          <el-select v-model="form.webSiteName" :multiple="false" :multiple-limit="1" filterable remote reserve-keyword placeholder="请输入关键词"
+              :remote-method="getWebNavList" :loading="webSiteLoading">
               <el-option
                 v-for="item in webSiteList"
                 :key="item.value"
@@ -70,9 +72,9 @@
               </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-form-item label="导航名称：" :label-width="formLabelWidth" prop="navNames">
+          <el-select v-model="form.navNames" multiple filterable remote reserve-keyword placeholder="请输入关键词"
+              :remote-method="getWebsiteList" :loading="navNamesLoading">
               <el-option
                 v-for="item in navList"
                 :key="item.value"
@@ -84,67 +86,228 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <div>
-          <el-button @click="windowStatus = false">取 消</el-button>
-          <el-button type="primary" @click="addToServe">确 定</el-button>
+          <el-button @click="closeWindow">取 消</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>
       </div>
     </el-dialog>
+    <!--弹出框 end------------------------------------------------------------>
   </div>
 </template>
 
 <script>
 export default {
   data() {
+    //0.全局操作 start ------------------------------------------------------------>
+    const validateWebSiteName = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    const validateNavNames = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+     //0.全局操作 end ------------------------------------------------------------>
     return {
-      tableData: [{
-        id: '1',
-        navname: '文化生活，三农之窗，三农人物，三农人物，文化之窗，贴身宝贝，区域经济，政策法制，打假维权，三农专题，三农探索，农贸资讯，农资购销，致富信息......',
-        webname: '中国三农市场网',
-        creattime:"2024-06-28 21:50:28",
-        edittime:"2024-06-29 11:22:24"
-      }],
+      //1.列表和分页相关 start ------------------------------------------------------------>
+      tableData: [],//列表
+      allCount:0,//总条数
+      editId:0,//要修改的网站id
+      getApiData:{
+        keyword:"",//网站名称
+        website_column_id:"",//网系
+        page:1,//当前是第几页
+        pageSize:10,//一共多少条
+      },
+      website_column_arr:[],//获得的网系
+      //分页相关 end ------------------------------------------------------------>
+
+      //2.弹出框设置 start ------------------------------------------------------------>
       //是否显示弹出窗口
-      windowStatus:false, //外层
-      innerVisible:false, //内层
+      windowStatus:false,
       formLabelWidth: '120px',
+      editBtn:false,//当显示编辑按钮的时候，就不显示提交
+      //弹出框设置 end ------------------------------------------------------------>
 
-      //弹出框中的表单设置 start ------------------------------------------------------------>
+      //3.弹出框中的表单设置 start ------------------------------------------------------------>
       form: {
-        connectNavName:"",//关联网站名称
-        navName:[]//导航名称
+        webSiteName:"",//关联网站名称
+        navNames:[]//导航名称
       },
-      webSiteListLoading:false,//获取关联网站列表的加载中
+      webSiteLoading:false,//获取关联网站列表的加载中
       webSiteList:[],//获取关联网站列表
-      navListLoading: false, //获取网站导航的加载中
+      navNamesLoading: false, //获取网站导航的加载中
       navList:[],//获取的网站导航列表
+      ordArr:[],//老导航
+      //3.2 表单验证规则
+      formRules: {
+        webSiteName: [{type:'array',required:true,trigger:'change',message:'关联网站不能为空！',validator:validateWebSiteName}],
+        navNames: [{type:'array',required:true,trigger:'change',message:'导航名称不能为空！',validator:validateNavNames}],
+      },
       //弹出框中的表单设置 end ------------------------------------------------------------>
     }
   },
   methods: {
+    //1.列表和分页相关 start ------------------------------------------------------------>
+    //1.1 获取内容
+    getData(){
+      //判断一下网系里面有没有值，如果有只取最后一位
+      //搜索条件 - 网系和城市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 = "";
+      }
 
+      this.$store.dispatch('pool/getWebsiteCategoryList',this.getApiData).then(res=> {
+        let data = res.data.rows;
+        data.forEach(item => {
+          if (item.website_category && item.website_category.length > 0) {
+            // 如果 website_category 有值，提取 name 并用逗号隔开
+            const categoryNames = item.website_category.map(category => category.name);
+            //console.log(`[${categoryNames.join(', ')}]`);
+            // 你也可以将结果存储在一个新的属性上
+            item.website_category = `[${categoryNames.join(', ')}]`;
+          } else {
+            // 如果没有值，可以设置为空数组或其他处理
+            item.website_category = '[]';
+          }
+        });
+        console.log(data)
+        this.tableData = data;//放入数据
+        this.allCount = res.data.count;//放入总条数
+      })
+    },
+    //1.2 删除内容
+    deleteData(id){
+      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log("当前删除：" + id)
+        this.$store.dispatch('pool/delWebsiteCategory',{id:id}).then(res=> {
+          this.getData();
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '网络错误，请重试！'
+          });
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
+    },
+    //1.3 列表内容分页
+    //直接跳转
+    handleSizeChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.4 点击分页
+    handleCurrentChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.5 清理搜索框
+    clearSearch(){
+      this.getApiData.keyword = "";
+      this.getApiData.website_column_id = "";
+      this.getApiData.page = 1;
+      this.getApiData.pageSize = 10;
+      this.getData();
+    },
+    //列表和分页相关 end ------------------------------------------------------------>
+
+    //2.搜索 start ------------------------------------------------------------>
+    //2.1 获得所有网系
+    getwebsiteColumn(){
+      let that = this;
+      this.$store.dispatch('pool/getwebsiteColumn').then(res=> {
+        let arrData = this.transformData(res.data)
+        this.website_column_arr = arrData;
+      })
+    },
+    //2.2对网系进行格式化
+    transformData(arrData) {
+      let that = this;
+      return arrData.map(item => {
+        // 创建一个新的对象，替换键名
+        let newItem = {
+          label: item.column_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;
+      });
+    },
+    //搜索 end ------------------------------------------------------------>
 
+    //3.弹出框设置 start ------------------------------------------------------------>
+    //3.1 打开弹出框
+    openWindow() {
+      this.windowStatus = true;
+      this.clearToServe();
+      //显示添加按钮
+      this.editBtn = false;
+    },
+    //2.2 关闭弹出框
+    closeWindow(){
+      this.windowStatus = false;
+      this.clearToServe();
+    },
+    //3.3 清理弹出框
+    clearToServe(){
+      this.form.webSiteName = "";
+      this.form.navNames = [];
+      this.webSiteList = [];
+      this.navList = [];
+      this.ordArr = [];
+    },
+    //弹出框设置 end ------------------------------------------------------------>
 
-    //添加网站导航 start ------------------------------------------------------------>
-    //获得所有1级导航池
-    getWebsiteList(query){
+    //4.添加网站导航 start ------------------------------------------------------------>
+    //4.1 获得网站列表
+    getWebNavList(query){
       if (query !== '') {
-        this.webSiteListLoading = true;
-        let data = {
-          pid:0,//默认只有第一级
-          name:query,
-        }
+        this.webSiteLoading = true;
+        let data = {keyword:query}
         let dataArr = [];
-        this.$store.dispatch('pool/categoryList',data).then(res=> {
+        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.name;
+            data.label = item.website_name;
             dataArr.push(data)
           }
           this.webSiteList = dataArr;
-          this.webSiteListLoading = false;
+          this.webSiteLoading = false;
         }).catch(() => {
           this.$message({
             type: 'info',
@@ -155,23 +318,26 @@ export default {
         this.navList = [];
       }
     },
-    //根据搜索框内容调用接口
-    getWebNavList(query){
+    //4.2 获得导航列表
+    getWebsiteList(query){
       if (query !== '') {
-        this.navListLoading = true;
-        let data = {keyword:query}
+        this.navNamesLoading = true;
+        let data = {
+          pid:0,//默认只有第一级
+          name:query,
+        }
         let dataArr = [];
-        this.$store.dispatch('pool/getNavWebList',data).then(res=> {
+        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.website_name;
+            data.label = item.name;
             dataArr.push(data)
           }
           this.navList = dataArr;
-          this.navListLoading = false;
+          this.navNamesLoading = false;
         }).catch(() => {
           this.$message({
             type: 'info',
@@ -182,17 +348,82 @@ export default {
         this.navList = [];
       }
     },
+    //4.3添加导航
     addToServe(){
-      console.log(this.form.connectNavName) //关联网站id
-      console.log(this.form.navName) //导航名称
+      console.log(this.form.webSiteName) //关联网站id
+      console.log(this.form.navNames) //导航名称
       let data = {
-        website_id:this.form.connectNavName,//只能关联1个网站
-        category_arr_id:this.form.navName
+        website_id:this.form.webSiteName,//只能关联1个网站
+        category_arr_id:this.form.navNames//可以关联多个导航
       }
       //console.log(data)
-      this.$store.dispatch('pool/addWebsiteCategory',data).then(res=> {
-        console.log(res.data)
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.$store.dispatch('pool/addWebsiteCategory',data).then(res=> {
+            console.log(res.data)
+            if(res.code==200){
+              this.$message({
+                type: 'success',
+                message: '添加成功！'
+              });
+              //关闭并重置窗口
+              this.closeWindow();
+              //重新请求页面
+              this.getData();
+            }else{
+              this.$message({
+                type: 'info',
+                message: '添加失败，请重试！'
+              });
+            }
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+
+    },
+    //添加网站导航 end ------------------------------------------------------------>
 
+    //5.编辑网站 start ------------------------------------------------------------>
+    //打开弹出窗口
+    editRow(id,name){
+      //清理并且打开弹窗
+      this.openWindow();
+      this.getWebsiteCategory(id,name);
+      //显示编辑按钮
+      this.editBtn = true;
+    },
+    //编辑导航
+    getWebsiteCategory(id,name){
+      //把id放到待编辑的id中
+      this.editId = id;
+      //查询这个站点下面关联的导航有哪些
+      let data = {website_id:id}
+      this.$store.dispatch('pool/getAdminWebsiteCategory',data).then(res=> {
+        //先回显站点信息
+        this.form.webSiteName = name;
+        this.getWebNavList(name);
+        //把查询出来的导航回显到编辑窗口中
+        let categories = res.data;
+        // 将返回的数据处理成 {label:'',value:''} 格式，用于 el-select
+        this.navList = categories.map(item => {
+          return {
+            label: item.name,// 显示的名称
+            value: item.id// 选项的唯一标识符
+          };
+        });
+        //将选中的导航 ID 列表设置到 form.navNames 中
+        this.form.navNames = categories.map(item => item.id);
+        //把老的导航存起来
+        if(res.data.length>0){
+          for(let item of res.data){
+            this.ordArr.push(item.id)
+          }
+        }
       }).catch(() => {
         this.$message({
           type: 'info',
@@ -200,23 +431,64 @@ export default {
         });
       })
     },
-    //添加网站导航 end ------------------------------------------------------------>
-
-
+    //更新网站导航
+    editToServe() {
+      //把老的和新的都提交过去
+      //检查新数组，如果新数组中包含老数组的数据，就把老数组中的数组删除掉
+      this.ordArr = this.ordArr.filter(item => {
+        // 只有当 item 不在 this.form.navNames 中时才保留
+        return !this.form.navNames.includes(item);
+      });
+      //console.log(this.ordArr)
+      //console.log(this.form.navNames)
+      let data = {
+        old_category_arr_id:this.ordArr,
+        new_category_arr_id:this.form.navNames,
+        website_id:this.editId
+      }
+      this.$store.dispatch('pool/upWebsiteCategory',data).then(res=> {
+        if(res.code==200){
+          this.$message({
+            type: 'success',
+            message: '导航修改成功！'
+          });
+        }
+        //关闭并重置窗口
+        this.closeWindow();
+        //重新请求页面
+        this.getData();
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    //编辑网站 end ------------------------------------------------------------>
 
+    //6.管理网站 start ------------------------------------------------------------>
+    manageRow(website_id){
+      let data = {
+        website_id:website_id,//网站id
+        page:1,// 页码
+        pageSize:10//每页条数
+      }
+      //console.log(data)
+      //跳转到关联页面
+      this.$router.push({
+        path: '/editNavigation',
+        query: data
+      });
+    }
+    //编辑网站 end ------------------------------------------------------------>
 
-    //分页跳转
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
-    },
-    //打开跳转输入框
-    openWindow() {
-      this.windowStatus = true;
-    },
   },
+  mounted(){
+    //1.获得初始数据
+    this.getData();
+    //2.获取所有网系
+    this.getwebsiteColumn();
+  }
 }
 </script>