后端返回来的是一个树形图，搜索时匹配第三级的title并返回与他相关的上一级数据
let keyword="其他"
let data =[
{
"id": "1664902947899924482",
"parentId": "0",
"children": [{
"id": "1669527816008568834",
"parentId": "1664902947899924482",
"hasChildren": false,
"title": "手机",
"key": "2",
}],
"hasChildren": true,
"title": "手机售后",
"key": "1",""
},
{
"id": "1673252728467623938",
"parentId": "0",
"hasChildren": false,
"title": "测试",
"key": "1",
},
{
"id": "1664214513480867841",
"parentId": "0",
"children": [{
"id": "1664216675430670337",
"parentId": "1664214513480867841",
"children": [{
"id": "1665018889980043266",
"parentId": "1664216675430670337",
"hasChildren": false,
"title": "小米",
"key": "3",
}, {
"id": "1665018856224284674",
"parentId": "1664216675430670337",
"hasChildren": false,
"title": "美的",
"key": "3",
}],
"hasChildren": true,
"title": "空调",
"key": "2",
}, {
"id": "1664216695471054849",
"parentId": "1664214513480867841",
"children": [{
"id": "1665018966920355842",
"parentId": "1664216695471054849",
"hasChildren": false,
"title": "西门子",
"key": "3",
}, {
"id": "1665018922062274561",
"parentId": "1664216695471054849",
"hasChildren": false,
"title": "美的",
"key": "3",
}],
"hasChildren": true,
"title": "冰箱",
"key": "2",
}, {
"id": "1664216721056309250",
"parentId": "1664214513480867841",
"children": [{
"id": "1665019063980744706",
"parentId": "1664216721056309250",
"hasChildren": false,
"title": "海尔",
"key": "3",
}, {
"id": "1665019008213278722",
"parentId": "1664216721056309250",
"hasChildren": false,
"title": "美的",
"key": "3",
}],
"hasChildren": true,
"title": "洗衣机",
"key": "2",
}, {
"id": "1664216742065577985",
"parentId": "1664214513480867841",
"children": [{
"id": "1665019154003091457",
"parentId": "1664216742065577985",
"hasChildren": false,
"title": "长虹",
"key": "3",
}, {
"id": "1665019122663251969",
"parentId": "1664216742065577985",
"hasChildren": false,
"title": "TCL",
"key": "3",
}],
"hasChildren": true,
"title": "电视",
"key": "2",
}, {
"id": "1664216765738229761",
"parentId": "1664214513480867841",
"children": [{
"id": "1665019300166197250",
"parentId": "1664216765738229761",
"hasChildren": false,
"title": "其他",
"key": "3",
}, {
"id": "1665019261947699201",
"parentId": "1664216765738229761",
"hasChildren": false,
"title": "万家乐",
"key": "3",
}],
"hasChildren": true,
"title": "热水器",
"key": "2",
}],
"hasChildren": true,
"title": "常用电器",
"key": "1",
}]
<script>
// 使用 map() 方法遍历返回来的数据中的每个对象
const filteredData = this.tabList1.map(item => {
let arr = []
// 如果有子级
if (item.hasChildren) {
// 遍历每个对象的 children 数组
const children = item.children.map(childItem => {
// 如果有子级
if (childItem.hasChildren) {
// 到第三级、筛选出符合搜索条件的
const grandchildren = childItem.children.filter(grandchildItem => {
return grandchildItem.title.includes(this.keyword);
});
// 将过滤后的 grandchildren 赋值回 childItem 的 children 属性中
if (grandchildren.length > 0) {
console.log('grandchildren', grandchildren)
childItem.children = grandchildren;
return childItem;
}
}
}).filter(childItem => (childItem !== undefined && childItem.length !==
0)); // 过滤childItem有undefined和[]的情况
if (children.length > 0) {
console.log('children', children)
// 将过滤后的 children 赋值回 item 的 children 属性中
item.children = children;
return item;
}
}
}).filter(item => (item !== undefined));
console.log('filteredData ', filteredData)
</script>记分类管理页面相关代码
<template>
<view @click="closeSwiper">
<!-- 搜索栏 -->
<view class="topfixed ">
<view class="flex" style="background:#fff;padding:0 10px;height: 44px;">
<!-- <view> -->
<zb-tooltip color="white" content="Right Top" placement="bottom-center" ref="tooltip">
<view slot="content" style="color: black;z-index: 999;">
<view>
<view
:style="{'font-size': '14px','padding':'0 10px','color':titleType==0?'#2295FF':'#000'}"
@click="clickTitle(0)">产品类</view>
<view style="width: 100%;height: 1px;background: #eee;margin: 10px 0;"></view>
<view
:style="{'font-size': '14px','padding':'0 10px','color':titleType!=0?'#2295FF':'#000'}"
@click="clickTitle(1)">服务类</view>
</view>
</view>
<view class="tiptext flex">{{titleType==0?'产品类':'服务类'}}
<view style="margin: 0 0px 0 10px;">
<u-icon name="arrow-down" color='#2295ff' size="15px"></u-icon>
</view>
<text style="margin: 0 0px 0 10px;">| </text>
</view>
</zb-tooltip>
<view style="width:82%;">
<u-tabs :list="tabList" ref="uTabs" lineColor="#fff"
:activeStyle="{'color':'#2295ff','font-weight':'bold'}" :current="tabsCurrent"
@click="tabTitle">
<view slot="right" style="padding-left: 4px;" @tap="clickRight">
<u-icon name="arrow-right" size="21"></u-icon>
</view>
</u-tabs>
</view>
</view>
</view>
<view style="height:100rpx"></view>
<u-empty v-if="(dataList.length==0||tabList.length==0) && nonePerson" text="暂无数据~" :icon="emptyImg"
width="220rpx" height="220rpx" marginTop="20vh" />
<view class="u-demo-block__content" v-else>
<view style="display:flex">
<!-- 左边分类名称 -->
<view style="width:35vw">
<view class="u-page leftitem">
<u-list @scrolltolower="scrolltolower">
<u-list-item v-for="(item, index) in dataList" :key="index">
<u-cell size="large" :border="false"
:customStyle="{'color':index==current?'#2295ff':'#101010','background':index==current?'#fff':'#f8f8f8'}"
@click="clickItem(item,index)">
<view slot="title"
:style="{'color':index==current?'#2295ff':'#101010','font-weight':index==current?'bold':'none','padding':'13px','border-left':index==current?'3px solid #2295ff':'3px solid #fff','text-align':'center'}">
{{item.title}}
</view>
</u-cell>
</u-list-item>
</u-list>
</view>
</view>
<!-- 中间分割线 -->
<!-- 右边设备名称 -->
<view style="width:65vw; background: #fff;height:90vh">
<view class="flex" style="padding:6px 10px;border-bottom: 1px solid #f0f0f0;">
<u-search placeholder="请输入名称" v-model="keyword" :showAction="false" @change="searchChange"
@clear="searchClear" :clearabled="true">
</u-search>
<view style="margin-left: 10px;" @click="addType">
<u-icon name="plus-circle-fill" color="#2295ff" size="30px"></u-icon>
</view>
</view>
<view class="demo-layout">
<u-empty v-if="indexList.length==0" text="暂无数据~" :icon="emptyImg" width="220rpx" height="220rpx"
marginTop="20vh" />
<view class="u-page" v-else>
<u-swipe-action ref="swipeActions">
<u-list @scrolltolower="scrolltolower2">
<u-list-item v-for="(item, index) in indexList" :key="index">
<u-swipe-action-item :options="options" @click="clickGroup($event,item)">
<view class="swipe-action u-border-bottom">
<view class="swipe-action__content">
<view class="swipe-action__content__text flexbetween">
<view class="flex">
<view style="margin-right:5px;margin-top: -5px;">
<uni-icons type="smallcircle-filled" size="10"
color="#2295FF">
</uni-icons>
</view>
<view class="font14 oneline">
{{item.title}}
{{item.englishName}}
</view>
</view>
</view>
</view>
</view>
</u-swipe-action-item>
</u-list-item>
</u-list>
</u-swipe-action>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
var util = require('@/utils/util.js');
var api = require('@/config/api.js');
export default {
data() {
return {
emptyImg: '',
tabList: [],
dataList: [],
indexList: [],
popupShow: false,
options: [{
text: '修改',
style: {
backgroundColor: '#3c9cff',
fontSize: '14px'
}
}, {
text: '删除',
style: {
backgroundColor: '#f56c6c',
fontSize: '14px'
}
}],
current: 0,
show: false,
title: '',
content: '',
modelType: '', //确认框类型
item: {},
value: 0,
titleType: 0, //0 产品类 1 服务类
keyword: '',
tabsCurrent: 0,
typeId: '',
titleTypeId: '',
nonePerson: false,
pageTotal: 0,
pageTotal2: 0,
pageCurrent: 1,
pageCurrent2: 1,
isSecond: true,
isSecond2: true,
nameValue: '',
titleName: '',
formatter: value => value.replace(/[^\a-zA-Z]/g, ''),
btnLoading: false,
tabList1: [], //用来筛选数据
emtyDataList: [], //搜索为空时显示所有数据
}
},
onLoad() {
// this.loadmore()
this.getTabList()
},
methods: {
// 点击切换产品类、服务类
clickTitle(str) {
if (this.titleType == str) {
return
}
this.tabsCurrent = 0;
this.current = 0;
this.pageCurrent = 1;
this.pageCurrent2 = 1;
this.isSecond = true;
this.titleType = str;
this.dataList = [];
this.indexList = []
this.getTabList()
},
// 获取头部数据
getTabList() {
uni.showLoading({
mask: true
})
let params = {
keyword: this.keyword,
levelType: 3,
companyId: 1,
partitionType: this.titleType,
companyId: 1,
}
util.request(api.prodTypePageClild, params, 'get').then((res) => {
uni.hideLoading()
if (res.code === 200 || res.code === '200') {
this.tabList = [];
this.tabList1 = [];
if (res.data.length > 0) {
res.data.forEach(el => {
var obj = {
name: el.title,
id: el.id
}
this.tabList.push(obj)
this.tabList1.push(el)
this.emtyDataList.push(el)
})
this.titleTypeId = this.tabList[this.tabsCurrent].id
this.getLeftList(this.titleTypeId, this.tabList1)
} else {
this.nonePerson = true
}
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(() => {
uni.hideLoading()
})
},
// 点击头部导航
tabTitle(e) {
if (this.tabsCurrent == e.index) {
return
}
this.tabsCurrent = e.index;
this.titleTypeId = e.id
uni.showLoading({
mask: true
})
this.current = 0;
this.dataList = [];
this.indexList = [];
// this.pageCurrent = 1
// this.pageCurrent2 = 1
this.isSecond = true
// this.getLeftList(this.titleTypeId)
console.log(e)
for (let tab of this.tabList1) {
if (tab.id === e.id) {
if (tab.hasChildren) {
const tabData = this.findLeft(tab.id, this.tabList1)
console.log('tabData', tabData)
// /this.dataList = this.dataList.concat(tabData.children);
this.dataList = tabData.children
console.log('this.dataList', this.dataList)
uni.hideLoading()
// 右边数据初始化
this.getrightList(this.dataList[0].id, this.dataList)
} else {
this.indexList = []
uni.hideLoading()
}
}
}
},
findLeft(id, tabList1) {
console.log('tabList1', id, tabList1)
for (const tabData of tabList1) {
if (tabData.id === id) {
console.log('tabData', tabData)
return tabData
}
}
return null
},
scrolltolower() {
if (this.pageTotal == this.pageCurrent) {
return
}
this.isSecond = false;
this.pageCurrent++
uni.showLoading({
mask: true
})
this.getLeftList()
},
getLeftList(id, tabList) {
console.log('tabList', tabList)
this.dataList = []
if (tabList.length > 0) {
if (tabList[0].hasChildren) {
this.dataList = this.dataList.concat(tabList[0].children);
if (this.isSecond && this.dataList.length > 0) {
this.typeId = this.dataList[this.current].id
this.getrightList(this.typeId, this.dataList)
}
} else {
this.dataList = []
}
}
},
scrolltolower2() {
if (this.pageTotal2 == this.pageCurrent2) {
return
}
this.isSecond = false;
this.pageCurrent2++
uni.showLoading({
mask: true
})
this.getrightList(this.typeId)
},
getrightList(id, dataList) {
console.log('dataList', dataList)
if (dataList.length > 0) {
if (dataList[0].hasChildren) {
this.indexList = this.indexList.concat(dataList[0].children);
} else {
this.indexList = []
}
}
},
// 关闭左滑
closeSwiper() {
if (this.$refs.tooltip) {
this.$refs.tooltip.close()
}
if (this.$refs.swipeActions && this.$refs.swipeActions.children.length > 0) {
this.$refs.swipeActions.children.forEach(el => {
el.closeOther()
})
}
},
// 头部标题点击右侧
clickRight() {
// console.log(this.$refs.uTabs)
let systemInfo = uni.getSystemInfoSync();
var width = systemInfo.windowWidth - 150
this.$refs.uTabs.scrollLeft += width
if (this.$refs.uTabs.scrollLeft > this.$refs.uTabs.scrollViewWidth) {
this.$refs.uTabs.scrollLeft = 0;
}
},
// 搜索按钮
searchBtn(e) {
this.keyword = e
if (this.keyword == '') {}
},
// 搜索
searchChange(e) {
console.log('搜索', e)
this.keyword = e
this.pageCurrent2 = 1;
this.dataList = []
this.indexList = []
if (this.keyword != '') {
// 使用 map() 方法遍历返回来的数据中的每个对象
const filteredData = this.tabList1.map(item => {
let arr = []
// 如果有子级
if (item.hasChildren) {
// 遍历每个对象的 children 数组
const children = item.children.map(childItem => {
// 如果有子级
if (childItem.hasChildren) {
// 到第三级、筛选出符合搜索条件的
const grandchildren = childItem.children.filter(grandchildItem => {
return grandchildItem.title.includes(this.keyword);
});
// 将过滤后的 grandchildren 赋值回 childItem 的 children 属性中
if (grandchildren.length > 0) {
console.log('grandchildren', grandchildren)
childItem.children = grandchildren;
return childItem;
}
}
}).filter(childItem => (childItem !== undefined && childItem.length !==
0)); // 过滤childItem有undefined和[]的情况
if (children.length > 0) {
console.log('children', children)
// 将过滤后的 children 赋值回 item 的 children 属性中
item.children = children;
return item;
}
}
}).filter(item => (item !== undefined));
console.log('filteredData ', filteredData)
let tabList = []
let tabList1 = []
// 处理搜到的数据赋值
if (filteredData.length > 0) {
filteredData.forEach(el => {
//构造
var obj = {
name: el.title,
id: el.id
}
tabList.push(obj)
tabList1.push(el)
})
this.tabList = tabList
this.tabList1 = tabList1
if (this.tabList1.length > 0) {
this.tabsCurrent = 0
if (this.tabList1[0].hasChildren) {
// 左边数据初始化
this.dataList = this.dataList.concat(this.tabList1[0].children);
if (this.dataList.length > 0) {
this.current = 0
if (this.dataList[0].hasChildren) {
// 右边数据初始化
this.indexList = this.indexList.concat(this.dataList[0].children);
} else {
this.indexList = []
}
}
} else {
this.dataList = []
}
}
} else {
// 搜不到相关数据
this.nonePerson = true
this.tabList = []
this.dataList = []
this.indexList = []
this.indexList1 = []
}
} else {
this.searchClear()
}
},
// 清空按钮
searchClear() {
console.log('kong---111111')
this.keyword = ''
this.tabsCurrent = 0;
this.current = 0;
this.tabList = []
this.tabList1 = []
this.dataList = []
this.indexList = []
this.getTabList()
},
// 点击分类名称
clickItem(obj, index) {
this.current = index
if (this.typeId == obj.id) {
return
}
this.typeId = obj.id;
uni.showLoading({
mask: true
})
this.pageCurrent2 = 1;
this.indexList = [];
// this.getrightList(this.typeId)
console.log('obj---', obj)
if (obj.hasChildren) {
const leftData = this.findRight(this.typeId, this.dataList)
console.log('leftData', leftData)
this.indexList = this.indexList.concat(leftData.children);
uni.hideLoading()
} else {
this.indexList = []
uni.hideLoading()
}
},
findRight(id, dataList) {
console.log('findRight', id, dataList)
for (const leftData of dataList) {
if (leftData.id === id) {
return leftData
}
}
return null
},
// 左滑点击事件
clickGroup(e, item) {
this.$refs.swipeActions.closeOther()
this.btnLoading = false;
if (e.index == 0) {
this.item = item;
this.title = "修改品牌名称"
this.modelType = 3;
this.titleName = item.typeName;
this.nameValue = item.englishName
this.range.forEach((el, index) => {
if (item.region == el.text) {
this.value = index
}
})
// this.show = true;
this.popupShow = true;
} else {
this.show = true;
this.title = '删除'
this.modelType = 4
this.content = '是否确认要删除该品牌?'
this.item = item
// this.delGroup(item)
}
},
}
}
</script>
扫一扫
1648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
