|
@@ -6,7 +6,7 @@
|
|
|
<el-col :span="8">
|
|
|
<div class="searchBox">
|
|
|
<div class="searchTitle">栏目名称:</div>
|
|
|
- <el-input v-model="search" placeholder="请输入栏目名称" :clearable="true"/>
|
|
|
+ <el-input v-model="getApiData.name" placeholder="请输入栏目名称" :clearable="true" @clear="onInputClear"/>
|
|
|
<!-- <el-input placeholder="请输入栏目名称" autocomplete="off" v-model="getApiData.name" /> -->
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -16,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------------------------------------------------------------>
|
|
|
|
|
@@ -29,16 +29,17 @@
|
|
|
<el-row>
|
|
|
<template>
|
|
|
<el-table
|
|
|
- :data="tableData.filter(data => searchFilter(data, search))"
|
|
|
+ :data="tableData"
|
|
|
style="width: 100%"
|
|
|
row-key="id"
|
|
|
- default-expand-all
|
|
|
+ :default-expand-all="isExpandAll"
|
|
|
: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="栏目名称">
|
|
|
<template slot-scope="scope">
|
|
|
- <span :class="{ highlight: isHighlight(scope.row, search) }">{{ scope.row.name }}</span>
|
|
|
+ <span :class="{ highlight: isHighlight(scope.row, search) }" v-if="scope.row.pid==0">{{ scope.row.name }}</span>
|
|
|
+ <span :class="{ highlight: isHighlight(scope.row, search)}" v-else>____{{ scope.row.name }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="是否外链" align="center">
|
|
@@ -67,7 +68,7 @@
|
|
|
</el-row>
|
|
|
</div>
|
|
|
<!--分页 start------------------------------------------------------------>
|
|
|
- <!-- <div class="alignBox">
|
|
|
+ <div class="alignBox">
|
|
|
<el-row>
|
|
|
<el-col :span="24">
|
|
|
<el-pagination :current-page="getApiData.page" @size-change="handleSizeChange"
|
|
@@ -75,7 +76,7 @@
|
|
|
:total="allCount"></el-pagination>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- </div> -->
|
|
|
+ </div>
|
|
|
<!--分页 end------------------------------------------------------------>
|
|
|
<!--表格内容 end------------------------------------------------------------>
|
|
|
|
|
@@ -218,6 +219,7 @@ export default {
|
|
|
let self = this;
|
|
|
//0.全局操作 end ------------------------------------------------------------>
|
|
|
return {
|
|
|
+ isExpandAll: false,
|
|
|
search: '',
|
|
|
tags: [],
|
|
|
//1.列表和分页相关 start ------------------------------------------------------------>
|
|
@@ -415,30 +417,20 @@ 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();
|
|
|
- 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;
|
|
|
+ onInputClear(){
|
|
|
+ this.isExpandAll = false;
|
|
|
+ this.getData();
|
|
|
},
|
|
|
+
|
|
|
//1.列表和分页相关 start ------------------------------------------------------------>
|
|
|
//1.1 开始请求列表信息方法
|
|
|
getData(type) {
|
|
|
+ if(type=='search'){
|
|
|
+ this.getApiData.page=1
|
|
|
+ this.isExpandAll = true;
|
|
|
+ }else{
|
|
|
+ this.isExpandAll = false;
|
|
|
+ }
|
|
|
//搜索条件
|
|
|
// if(this.getApiData.department_id.length>0){
|
|
|
// //网系只提交最后一个
|
|
@@ -450,9 +442,10 @@ export default {
|
|
|
// }
|
|
|
//如果是搜索,重新加载第一页
|
|
|
|
|
|
- this.$store.dispatch('pool/getCategoryList', {}).then(res => {
|
|
|
- console.log("=============:",res.data)
|
|
|
- this.tableData = res.data; //��与内容
|
|
|
+ this.$store.dispatch('pool/getCategoryList', this.getApiData).then(res => {
|
|
|
+ // console.log("=============:",res.data)
|
|
|
+ this.tableData = res.data.rows; //��与内容
|
|
|
+ this.allCount = res.data.total
|
|
|
}).catch(() => {
|
|
|
this.$message({
|
|
|
type: 'warning',
|
|
@@ -495,17 +488,18 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
//1.3 直接跳转
|
|
|
- // handleSizeChange(val) {
|
|
|
- // this.getApiData.page = val;
|
|
|
- // this.getData();
|
|
|
- // },
|
|
|
- // //1.4 点击分页
|
|
|
- // handleCurrentChange(val) {
|
|
|
- // this.getApiData.page = val;
|
|
|
- // this.getData();
|
|
|
- // },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.getApiData.page = val;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ //1.4 点击分页
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.getApiData.page = val;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
//1.5 重置按钮
|
|
|
clearSearchList() {
|
|
|
+ this.isExpandAll = false;
|
|
|
this.tableData = [];
|
|
|
this.getApiData.name = "";
|
|
|
// this.getApiData.department_id = [];
|
|
@@ -750,9 +744,6 @@ export default {
|
|
|
::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;
|