网站栏目排序修改

src/api/pool.js

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

src/store/modules/pool.js

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

src/views/website/categoryList.vue

@@ -6,11 +6,7 @@
         <el-col :span="8">
           <div class="searchBox">
             <div class="searchTitle">栏目名称：</div>
-            <el-input
-      v-model="search"
-    
-      placeholder="请输入栏目名称"
-    />
+            <el-input v-model="search"   placeholder="请输入栏目名称"  :clearable="true"/>
             <!-- <el-input placeholder="请输入栏目名称" autocomplete="off" v-model="getApiData.name" /> -->
           </div>
         </el-col>
@@ -20,10 +16,10 @@
       <div>
         <el-button type="primary" @click="addCategoryList">添加栏目名称</el-button>
       </div>
-      <div>
+      <!-- <div>
         <el-button @click="clearSearchList">重置</el-button>
         <el-button type="primary" style="margin-right:20px" @click="getData('search')">搜索</el-button>
-      </div>
+      </div> -->
     </div>
     <!--搜索功能 end------------------------------------------------------------>
 
@@ -36,9 +32,15 @@
           :data="tableData.filter(data => searchFilter(data, search))"
           style="width: 100%"
           row-key="id"
-          :tree-props="{children: 'children', hasChildren: 'hasChildren'}" >
+          default-expand-all
+          :tree-props="{children: 'children', hasChildren: 'hasChildren'}" 
+          :row-class-name="tableRowClassName">
             <el-table-column fixed prop="id" label="编号" width="150"></el-table-column>
-            <el-table-column prop="name" label="栏目名称"></el-table-column>
+            <el-table-column prop="name" label="栏目名称">
+              <template slot-scope="scope">
+              <span :class="{ highlight: isHighlight(scope.row, search) }">{{ scope.row.name }}</span>
+            </template>
+            </el-table-column>
             <el-table-column label="是否外链" align="center">
               <template slot-scope="scope">
                 <div>
@@ -413,6 +415,12 @@ export default {
     }
   },
   methods: {
+    tableRowClassName({row, rowIndex}) {
+        if (row.pid == 0) {
+          return 'warning-row';
+        } 
+        return '';
+      },
     searchFilter(data, search) {
       if (!search) return true;
       const lowerSearch = search.toLowerCase();
@@ -719,6 +727,11 @@ export default {
       this.tags = newTags;
       this.form.seo_keywords = newTags.join(',');
     },
+    isHighlight(row, search) {
+      if (!search) return false;
+      const lowerSearch = search.toLowerCase();
+      return row.name.toLowerCase().includes(lowerSearch);
+    },
     //编辑栏目池 end ------------------------------------------------------------>
   },
   mounted() {
@@ -734,6 +747,12 @@ export default {
 </script>
 
 <style scoped lang="less">
+::v-deep .highlight {
+  background-color: yellow;
+}
+::v-deep .el-table .warning-row {
+    background: oldlace ;
+  }
 //表单微调 start------------------------------------------------------------>*/
 ::v-deep .custom-form-item>.el-form-item__label {
   line-height: 140px !important;

src/views/website/editNavigation.vue

@@ -1,5 +1,25 @@
 <template>
   <div class="mainBox">
+    <div class="layerBox_search">
+      <el-row>
+        <el-col :span="8">
+          <div class="searchBox">
+            <div class="searchTitle">栏目名称：</div>
+            <el-input v-model="search"   placeholder="请输入栏目名称"  :clearable="true"/>
+            <!-- <el-input placeholder="请输入栏目名称" autocomplete="off" v-model="getApiData.name" /> -->
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="layerBoxNoBg">
+      <div>
+        <el-button type="primary" @click="addCategoryList">添加栏目名称</el-button>
+      </div>
+      <!-- <div>
+        <el-button @click="clearSearchList">重置</el-button>
+        <el-button type="primary" style="margin-right:20px" @click="getData('search')">搜索</el-button>
+      </div> -->
+    </div>
     <!--搜索功能 start------------------------------------------------------------>
     <!-- <div class="layerBox_search">
       <div class="layerBoxLine">
@@ -49,11 +69,31 @@
       <tableTitle :name="tableDivTitle"/>
       <el-row>
         <template>
-          <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   
+            :data="tableData.filter(data => searchFilter(data, search))"
+            style="width: 100%"
+            row-key="id"
+            default-expand-all
+            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+            :row-class-name="tableRowClassName"
+            >
+            <el-table-column fixed prop="category_id" label="编号" width="180"></el-table-column>
+            <el-table-column prop="name" label="栏目名称">
+              <template slot-scope="scope">
+                <span :class="{ highlight: isHighlight(scope.row, search) }">{{ scope.row.name }}</span>
+              </template>
+            </el-table-column>
             <el-table-column prop="alias" label="展示名称"></el-table-column>
-            <el-table-column prop="sort" label="排序"></el-table-column>
+            <el-table-column label="排序"    width="95">
+            <template slot-scope="scope" >
+              <el-input
+                v-model="scope.row.sort"
+                @blur="handleBlur(scope.row)"
+                placeholder="请输入排序值"
+                maxlength="5"
+              ></el-input>
+            </template>
+          </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">
@@ -148,6 +188,7 @@ export default {
     //0.全局操作 end ------------------------------------------------------------>
 
     return {
+      search: '',
       tags: ['初始标签1', '初始标签2'],
       //1.列表和分页相关 start ------------------------------------------------------------>
       tableDivTitle:"栏目详情",
@@ -256,6 +297,12 @@ export default {
     }
   },
   methods: {
+      tableRowClassName({row, rowIndex}) {
+        if (row.pid == 0) {
+          return 'warning-row';
+        } 
+        return '';
+      },
     //1.列表和分页相关 start ------------------------------------------------------------>
     //1.1 获取内容
     getData(){
@@ -373,6 +420,55 @@ export default {
             this.tags = newTags;
             this.form.seo_keywords = newTags.join(',');
     },
+    handleBlur(row) {
+      const inputValue = row.sort;
+      if (/^\d+$/.test(inputValue)) {
+        row.sort = parseInt(inputValue, 10);
+        let parems = {
+            'website_id':row.website_id,
+            'id':row.id,
+            'sort':row.sort
+        }
+        this.$store.dispatch('pool/upWebsiteCategorySort',parems).then(res=> {
+            //汇报结果
+            this.$message({
+              type: 'success',
+              message: '排序修改成成！'
+            });
+            this.getData();
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        // 这里可以添加保存数据到后端的逻辑，例如使用 axios 发送请求
+        console.log('数据保存成功：', row);
+      } else {
+        this.$message.error('排序值必须为整数类型');
+        row.sort = null; // 清空输入
+      }
+    },
+    searchFilter(data, search) {
+      if (!search) return true;
+      const lowerSearch = search.toLowerCase();
+      if (data.name.toLowerCase().includes(lowerSearch)) {
+        return true;
+      }
+      if (data.children && data.children.length > 0) {
+        for (const child of data.children) {
+          if (this.searchFilter(child, search)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    },
+    isHighlight(row, search) {
+      if (!search) return false;
+      const lowerSearch = search.toLowerCase();
+      return row.name.toLowerCase().includes(lowerSearch);
+    },
   },
   mounted(){
     //console.log(this.$route.query);
@@ -387,6 +483,12 @@ export default {
 </script>
 
 <style scoped lang="less">
+::v-deep .highlight {
+  background-color: yellow;
+}
+::v-deep .el-table .warning-row {
+    background: oldlace ;
+  }
 //表单微调 start------------------------------------------------------------>*/
 ::v-deep .custom-form-item > .el-form-item__label {
   line-height: 140px !important;