修改栏目

src/api/pool.js

@@ -333,4 +333,14 @@ export function upWebsiteCategoryones(data) {
     data
   })
 }
+//4.4 查询所有栏目
+export function getAllCategory(params) {
+  return request({
+    url: '/website/getAllCategory',
+    method: 'get',
+    params
+  })
+}
+
+
 //关联导航池 end ------------------------------------->

src/components/InputTag/index.vue

@@ -0,0 +1,89 @@
+<template>
+    <div>
+        <div class="new-tags">
+            <div class="new-tags-bottom">
+                <el-input
+                    class="input-new-tag"
+                    v-model="inputValue"
+                    ref="saveTagInput"
+                    @keyup.enter.native="handleInputConfirm"
+                    @blur="handleInputConfirm"
+                >
+                </el-input>
+            </div>
+            <div>
+                <el-tag
+                    :key="tag"
+                    v-for="tag in dynamicTags"
+                    closable
+                    :disable-transitions="false"
+                    @close="handleClose(tag)"
+                >
+                    {{ tag }}
+                </el-tag>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="less">
+.new-tags {
+    display: flex;
+    flex-flow: column;
+}
+
+.new-tags-bottom {
+    margin-bottom: 5px;
+}
+
+.el-tag + .el-tag {
+    margin-left: 10px;
+}
+</style>
+
+<script>
+export default {
+    name: 'TagInput',
+    props: {
+        // 接收父组件传递的标签数组
+        initialTags: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data() {
+        return {
+            dynamicTags: this.initialTags.slice(), // 复制一份初始标签数组
+            inputVisible: false,
+            inputValue: ''
+        };
+    },
+    methods: {
+        handleClose(tag) {
+            const index = this.dynamicTags.indexOf(tag);
+            if (index > -1) {
+                this.dynamicTags.splice(index, 1);
+                // 触发自定义事件，将更新后的标签数组传递给父组件
+                this.$emit('tags-updated', this.dynamicTags);
+            }
+        },
+        handleInputConfirm() {
+            let inputValue = this.inputValue.trim();
+            if (inputValue) {
+                this.dynamicTags.push(inputValue);
+                // 触发自定义事件，将更新后的标签数组传递给父组件
+                this.$emit('tags-updated', this.dynamicTags);
+            }
+            this.inputValue = '';
+        }
+    },
+    watch: {
+        initialTags: {
+            handler(newVal) {
+                this.dynamicTags = newVal.slice(); // 当父组件传递的初始标签数组更新时，更新子组件的标签数组
+            },
+            deep: true
+        }
+    }
+};
+</script>

src/store/modules/pool.js

@@ -5,7 +5,7 @@ getCategoryInfo,categoryList,addCategory,updateCategory,
 getNavWebList,addWebsiteCategory,getWebsiteCategoryList,
 getAdminWebsiteCategory,upWebsiteCategory,delWebsiteCategory,
 getWebsiteAllCategory,getWebsiteCategoryOnes,upWebsiteCategoryones,
-checkWebsiteUrl,checkWebsiteName,
+checkWebsiteUrl,checkWebsiteName,getAllCategory,
 
 
 get_website_tag_arr_api,del_website_tag_arr_api,edit_website_tag_api,add_website_tag_api,drop_website_tag_api,
@@ -421,6 +421,15 @@ get_website_tag_arr_actions({commit},data) {
         reject(error)
       })
     })
+  },
+  getAllCategory({commit},data) {
+    return new Promise((resolve, reject) => {
+      getAllCategory(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
   }
   //关联导航池 end ---------------------------------------->
 }

src/views/website/editNavigation.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="mainBox">
     <!--搜索功能 start------------------------------------------------------------>
-    <div class="layerBox_search">
+    <!-- <div class="layerBox_search">
       <div class="layerBoxLine">
         <el-row>
           <el-col :span="8">
@@ -16,15 +16,15 @@
               <el-input placeholder="请输入栏目名称" autocomplete="off" v-model="getApiData.name"/>
             </div>
           </el-col>
-          <!-- <el-col :span="8">
+           <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-col> 
         </el-row>
-      </div>
-      <!-- <div class="layerBoxLineTwo">
+      </div> 
+       <div class="layerBoxLineTwo">
         <el-row>
           <el-col :span="8">
             <div class="searchBox">
@@ -33,15 +33,15 @@
             </div>
           </el-col>
         </el-row>
-      </div> -->
-    </div>
-    <div class="layerBoxNoBg">
+      </div>
+    </div> -->
+    <!-- <div class="layerBoxNoBg">
       <div></div>
       <div>
-        <el-button @click="clearSearchList">重置</el-button>
-        <el-button type="primary" style="margin-right:20px" @click="getData()">搜索</el-button>
+         <el-button @click="clearSearchList">重置</el-button>
+        <el-button type="primary" style="margin-right:20px" @click="getData()">搜索</el-button> 
       </div>
-    </div>
+    </div> -->
     <!--搜索功能 end------------------------------------------------------------>
 
     <!--表格内容 start------------------------------------------------------------>
@@ -49,10 +49,11 @@
       <tableTitle :name="tableDivTitle"/>
       <el-row>
         <template>
-          <el-table :data="tableData" style="width: 100%">
-            <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
+          <el-table :data="tableData" style="width: 100%"  row-key="id"  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+            <el-table-column fixed prop="id" label="编号" width="180"></el-table-column>
             <el-table-column prop="name" label="栏目名称"></el-table-column>
             <el-table-column prop="alias" label="展示名称"></el-table-column>
+            <el-table-column prop="sort" label="排序"></el-table-column>
             <el-table-column prop="created_at" label="创建时间"></el-table-column>
             <el-table-column prop="updated_at" label="修改时间"></el-table-column>
             <el-table-column fixed="right" label="操作" width="120" header-align="center">
@@ -68,13 +69,13 @@
     </div>
 
     <!--分页 start------------------------------------------------------------>
-    <div class="alignBox">
+    <!-- <div class="alignBox">
       <el-row>
         <el-col :span="24">
           <el-pagination :current-page="getApiData.page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
         </el-col>
       </el-row>
-    </div>
+    </div> -->
     <!--分页 end------------------------------------------------------------>
     <!--表格内容 end------------------------------------------------------------>
 
@@ -91,11 +92,19 @@
               <el-input v-model="form.seo_title" autocomplete="off"></el-input>
             </div>
           </el-form-item>
+          <el-form-item label="排序：" :label-width="formLabelWidth" prop="sort" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input v-model="form.sort" autocomplete="off" ></el-input>
+            </div>
+          </el-form-item>
           <el-form-item label="栏目关键词：" :label-width="formLabelWidth" prop="seo_keywords" class="custom-align-right">
             <div class="formLabelFloatBox">
-              <el-input v-model="form.seo_keywords" autocomplete="off"></el-input>
+              <inputTag  :initialTags="tags" @tags-updated="updateTags"/> 
+              <!-- <inputTag  :initialTags="form.seo_keywords" @tags-updated="updateTags"/> -->
+              <!-- <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" class="custom-align-right">
             <el-input type="textarea" v-model="form.seo_description" class="custom-textarea"></el-input>
           </el-form-item>
@@ -120,9 +129,11 @@ import '@/styles/global.less';
 //表格标题
 import tableTitle from './components/tableTitle';
 
+import InputTag from '@/components/InputTag'
 export default {
   components: {
     tableTitle,//表格标题
+    InputTag
   },
   data() {
     //0.全局操作 start ------------------------------------------------------------>
@@ -138,6 +149,7 @@ export default {
     //0.全局操作 end ------------------------------------------------------------>
 
     return {
+      tags: ['初始标签1', '初始标签2'],
       //1.列表和分页相关 start ------------------------------------------------------------>
       tableDivTitle:"栏目详情",
       tableData: [],//列表
@@ -228,12 +240,14 @@ export default {
         alias:"",//导航名称
         seo_title:"",//导航seo名称
         seo_keywords:"",//导航关键词
-        seo_description:""//导航描述
+        seo_description:"",//导航描述
+        sort:0//排序
       },
       //3.2表单验证规则
       formRules: {
         //网站名称不能为空
         alias:[{required:true,trigger:'blur',validator:validateEmpty}],
+        sort:[{required:true,trigger:'blur',validator:validateEmpty}],
         //网站标题，关键词，描述不能为空
         seo_title:[{required:true,trigger:'blur',validator:validateEmpty}],
         seo_keywords:[{required:true,trigger:'blur',validator:validateEmpty}],
@@ -255,22 +269,22 @@ export default {
         this.getApiData.city_id = this.getApiData.city_id[this.getApiData.city_id.length - 1];
       }
       this.$store.dispatch('pool/getWebsiteAllCategory',this.getApiData).then(res=> {
-        let data = res.data.rows;
+        let data = res.data;
         this.tableData = data;//放入数据
-        this.allCount = res.data.count;//放入总条数
+        // 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();
-    },
+    // handleSizeChange(val) {
+    //   this.getApiData.page = val;
+    //   this.getData();
+    // },
+    // //1.3 点击分页
+    // handleCurrentChange(val) {
+    //   this.getApiData.page = val;
+    //   this.getData();
+    // },
     //1.4 重置按钮
     clearSearchList(){
       this.tableData = [];
@@ -318,13 +332,15 @@ export default {
         category_id:id
       }
       this.$store.dispatch('pool/getWebsiteCategoryOnes',data).then(res=> {
-        console.log(res.data)
+        // 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.tags = res.data.seo_keywords?res.data.seo_keywords.split(','):[];
         this.form.seo_description = res.data.seo_description;
+        this.form.sort = res.data.sort;
       })
     },
     //提交编辑的数据
@@ -350,9 +366,13 @@ export default {
         }
       })
       this.getData();
-    }
+    },
     //编辑导航 end ------------------------------------------------------------>
-
+    updateTags(newTags) {
+            // this.foem.seo_keywords = newTags;
+            this.tags = newTags;
+            this.form.seo_keywords = newTags.join(',');
+    },
   },
   mounted(){
     //console.log(this.$route.query);

src/views/website/websiteColumn.vue

@@ -18,9 +18,9 @@
       </el-row>
     </div>
     <div class="layerBoxNoBg">
-      <div>
+      <!-- <div>
         <el-button type="primary" @click="openWindow">关联栏目名称</el-button>
-      </div>
+      </div> -->
       <div>
         <el-button @click="clearSearch">重置</el-button>
         <el-button type="primary" style="margin-right:20px" @click="getData('search')">搜索</el-button>
@@ -75,7 +75,7 @@
           <el-form-item label="关联网站名称：" :label-width="formLabelWidth" prop="webSiteName" class="custom-align-right">
             <el-select 
               v-model="form.webSiteName" :multiple="false" :multiple-limit="1" filterable remote reserve-keyword placeholder="请输入网站关键词"
-              :remote-method="getWebNavList" :loading="webSiteLoading" @change="detectionWebSite">
+              :remote-method="getWebNavList" :loading="webSiteLoading">
                 <el-option
                   v-for="item in webSiteList"
                   :key="item.value"
@@ -84,24 +84,24 @@
                 </el-option>
               </el-select>
           </el-form-item>
-          <el-form-item label="栏目名称：" :label-width="formLabelWidth" prop="navNames" class="custom-align-right">
-            <el-select v-model="form.navNames" multiple filterable remote reserve-keyword placeholder="请输入栏目关键词"
-                :remote-method="getWebsiteList" :loading="navNamesLoading">
-                <el-option
-                  v-for="item in navList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
+          <el-form-item label="栏目名称：" :label-width="formLabelWidth" prop="categoryListValue" class="custom-align-right">
+            <el-cascader
+               v-model="form.categoryListValue"
+              :options="categoryList"
+              :props="props"
+              clearable
+              filterable
+              :change-on-select="true"
+              >
+            </el-cascader>
           </el-form-item>
+
         </div>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <div>
           <el-button @click="closeWindow">取 消</el-button>
-          <el-button type="warning" @click="editToServe" v-if="editBtn==true" :loading="editLoading" :disabled="editLoading">编辑</el-button>
-          <el-button type="primary" @click="addToServe" v-else>提交</el-button>
+          <el-button type="warning" @click="editToServe"  :loading="editLoading" :disabled="editLoading">编辑</el-button>
         </div>
       </div>
     </el-dialog>
@@ -162,7 +162,7 @@ export default {
       //3.弹出框中的表单设置 start ------------------------------------------------------------>
       form: {
         webSiteName:"",//关联网站名称
-        navNames:[]//导航名称
+        categoryListValue:[]//导航名称
       },
       webSiteLoading:false,//获取关联网站列表的加载中
       webSiteList:[],//获取关联网站列表
@@ -172,9 +172,16 @@ export default {
       //3.2 表单验证规则
       formRules: {
         webSiteName: [{type:'array',required:true,trigger:'change',message:'关联网站不能为空！',validator:validateWebSiteName}],
-        navNames: [{type:'array',required:true,trigger:'change',message:'导航名称不能为空！',validator:validateNavNames}],
+        categoryListValue: [{type:'array',required:true,trigger:'change',message:'栏目名称不能为空！',validator:validateNavNames}],
       },
       //弹出框中的表单设置 end ------------------------------------------------------------>
+
+      props: { 
+        multiple: true,
+        label:"name",
+        value:"id"
+       },
+       categoryList: []
     }
   },
   methods: {
@@ -448,22 +455,9 @@ export default {
         //先回显站点信息
         this.form.webSiteName = name;
         //把查询出来的导航回显到编辑窗口中
-        let categories = res.data;
-        // 将返回的数据处理成 {label:'',value:''} 格式，用于 el-select
-        this.navList = categories.map(item => {
-          return {
-            label: item.name,// 显示的名称
-            value: item.category_id// 选项的唯一标识符
-          };
-        });
-        //将选中的导航 ID 列表设置到 form.navNames 中
-        this.form.navNames = categories.map(item => item.category_id);
-        //把老的导航存起来
-        if(res.data.length>0){
-          for(let item of res.data){
-            this.ordArr.push(item.category_id) //之前拿的是id 现在改为category_id
-          }
-        }
+        this.form.categoryListValue = res.data;
+        this.editBtn = false;
+
       }).catch(() => {
         this.$message({
           type: 'info',
@@ -475,15 +469,8 @@ export default {
     editToServe() {
       this.editLoading = true;
       //把老数组和新数组都提交过去
-      console.log(this.ordArr)
-      const olddata = this.ordArr.filter(id => !this.form.navNames.includes(id));
-      this.ordArr = olddata;
-      console.log("老数组为："+ olddata)
-      console.log("新数组为："+ this.form.navNames)
       let data = {
-        //old_category_arr_id:this.ordArr,
-        old_category_arr_id:[],
-        new_category_arr_id:this.form.navNames,
+        category_arr_id:this.form.categoryListValue,
         website_id:this.editId
       }
       console.log(data)
@@ -527,29 +514,29 @@ export default {
         query: data
       });
     },
-    //判断是否已经关联了网站
-    detectionWebSite(value){
-      let data  = {
-        website_id:value
-      }
-      //验证一下是不是存在了关联网站名称
-      this.$store.dispatch('pool/getAdminWebsiteCategory',data).then(res=> {
-        if(res.data.length>0){
-          this.form.webSiteName = "";
+
+    //编辑网站 end ------------------------------------------------------------>
+    getAllCategory(){
+      let data  = {}
+      this.$store.dispatch('pool/getAllCategory',data).then(res=> {
+        if(res.code == 200){
+            this.categoryList = res.data
+        }else{
           this.$message({
             type: 'warning',
-            message: '该网站已经关联了导航，请重新选择！'
+            message: '栏目不存在！'
           });
         }
+
       })
     }
-    //编辑网站 end ------------------------------------------------------------>
   },
   mounted(){
     //1.获得初始数据
     this.getData();
     //2.获取所有网系
     this.getwebsiteColumn();
+    this.getAllCategory();
   }
 }
 </script>