<template>
<view class="component-wrap">
<zy-
tree
containerClass="components-staff-wrap"
ref="staff
TreeRef"
labelKey="name"
boxHeight="300px"
valueKey="id"
:selectParent="false"
:multiple="true"
:needBtn="true"
:toEject="true"
:
treeData="filter
Tree"
:next
TreeStyle="{ height: '60vh', paddingBottom: 'calc(env(safe-area-inset-bottom) / 2 + 10px )' }"
next
TreeMinHeight="400px"
@_confirmBtn="onconfirm"
@confirm="onClickItem"
@cancel="otherClose"
:needClickFn="true"
:otherCloseFn="otherCloseFn"
:defaultValue="currentValue"
currentIcon="folder"
defaultIcon="zhankai"
>
<view>
<view class="component-header">
<view class="input-box">
<view class="icon-box">
<uni-icons type="search" color="#d6d6d6" size="16" />
</view>
<input
class="input"
v-model="inputStr"
:placeholder="placeholder"
placeholder-class="inputPlaceholder"
@input="(e: any) => userInput(e.detail.value)"
/>
<view class="icon-box" v-if="inputStr && needCloseIcon" @click="clearableFn">
<uni-icons type="clear" color="#d6d6d6" size="16" />
</view>
</view>
</view>
</view>
<!-- 空数据 插槽-->
<template #empty v-if="filter
Tree.length === 0">
<view class="empty-wrap">
<view class="empty-data">
<view class="empty-data-wrap">
<img :src="getCrmUrl('/20251231/crm_market_nosearchdata.png')" alt="" />
</view>
</view>
<view class="empty-data-text-wrap">未找到相关人员</view>
</view>
</template>
</zy-
tree>
</view>
</template>
<script setup lang="ts">
// 原则:传出数据,不传出方法
import { ref } from 'vue'
import { deepClone } from '@/utils/crm/index'
import { getCrmUrl } from '@/utils/crm/index'
import { string } from '@/uni_modules/uview-plus/libs/function/test'
const props = defineProps({
treeList: {
type: Array,
default: () => []
},
placeholder: {
type: String,
default: () => '搜索同
行人员姓名'
},
needDisabled: {
type: Boolean,
default: () => true
},
needClose: {
type: Boolean,
default: () => true
},
needCloseIcon: {
type: Boolean,
default: () => false
},
otherCloseFn: {
type: Boolean,
default: () => false
}
})
// 原始的
const selectValue = defineModel({ required: false, default: [] })
// 当前选中的
const currentValue = ref<any>([])
watch(
selectValue,
value => {
currentValue.value = deepClone(value)
},
{ deep: true, immediate: true }
)
const staff
TreeRef = ref<any>(null)
const inputStr = ref<string>('')
//确认
const clearableFn = (list: any) => {
console.log('🚀 ~ clearableFn ~ list:', list)
console.log('🚀 ~ clearableFn ~ inputStr.value:', inputStr.value)
inputStr.value = ''
console.log('🚀 ~ clearableFn ~ inputStr.value:', inputStr.value)
}
//确认
const onconfirm = (list: any) => {
selectValue.value = currentValue.value
$emit('confirm', list)
if (props.needClose) {
close()
}
}
//确认
const otherClose = () => {
console.log('🚀 ~ otherClose ~ props.otherCloseFn:', props.otherCloseFn)
if (props.otherCloseFn) {
console.log('🚀 ~ otherClose ~ props.otherCloseFn:', props.otherCloseFn)
$emit('close')
} else {
close()
}
}
// 点击子节点
const onClickItem = (list: any) => {
currentValue.value = list.id
$emit('onClickItem', list)
}
const $emit = defineEmits<{
(e: 'onClickItem', list: any): void
(e: 'confirm', list: any): void
(e: 'cancel'): void
(e: 'opened'): void
(e: 'closed'): void
(e: 'close'): void
}>()
const open = () => {
staff
TreeRef.value._show()
$emit('opened')
}
// 关闭
const close = (val?: any) => {
if (val) return staff
TreeRef.value._hide()
currentValue.value = selectValue.value
staff
TreeRef.value._hide()
$emit('closed')
}
defineExpose({
open,
close
})
const filter
Tree = computed(() => {
if (!inputStr.value) {
return props.
treeList.map((item: any) => {
;(item.children || []).map((e: any) => {
e.needShowChild = true
return e
})
return item
})
}
let inputValue = inputStr.value
const filterChildren = (children: any) => {
return children
.map((child: any) => {
const childMatches =
(child.name || '').includes(inputValue) ||
(child.account || '').includes(inputValue) ||
(child.workNo || '').includes(inputValue) ||
(currentValue.value || []).includes(child.id)
const filteredChildren = filterChildren(child.children) // 递归查找子节点
if (childMatches || filteredChildren.length > 0) {
return {
...child,
children: filteredChildren,
needOpen: true,
disabled: filteredChildren.length == '0' && !child.employeeId && props.needDisabled ? true : false // 如果部门没有员工,则禁用
} // 返回符合条件的子节点
}
return null
})
.filter(Boolean)
}
const filteredData = props.
treeList
.map((item: any) => {
const children = filterChildren(item.children) // 过滤当前项的子节点
const itemMatches =
(item.name || '').includes(inputValue) ||
(item.account || '').includes(inputValue) ||
(item.workNo || '').includes(inputValue)
if (children.length > 0 || itemMatches) {
return { ...item, children } // 返回符合条件的父节点
}
return null
})
.filter(Boolean)
return filteredData
})
const userInput = (val: string) => {
inputStr.value = val
}
</script>
<style lang="scss" scoped>
.component-wrap {
.component-header {
background-color: $uni-bg-color-inverse;
display:
flex;
text-align: left;
.input-box {
width: 100%;
display:
flex;
align-items: center;
background-color: #f2f3f5;
border-radius: $uni-border-radius-sm;
height: 32px;
margin: $uni-spacing-row-xs $uni-spacing-row-base;
padding: 0 $uni-spacing-row-base;
}
.icon-box {
flex: none;
}
.input {
flex: 1;
font-size: $uni-font-size-14;
color: $uni-text-color;
font-weight: 400;
padding-left: 4px;
}
:deep(.inputPlaceholder) {
font-size: $uni-font-size-14;
color: rgba(0, 0, 0, 0.16);
font-weight: 400;
}
$search-item-height: 48px;
.search {
height: $search-item-height * 3;
width: 100%;
position: absolute;
overflow-y: auto;
top: 100%;
z-index: 6666;
background-color: #fff;
}
.search-item {
display:
flex;
align-items: center;
height: $search-item-height;
padding-left: $uni-spacing-row-lg;
box-sizing: border-box;
position: relative;
&::after {
content: '';
position: absolute;
bottom: 0;
width: calc(100% - $uni-spacing-row-lg);
height: 0.5px;
background-color: $uni-divider-color;
}
&:last-child {
&::after {
display: none;
}
}
}
.search-item-icon-box {
flex: none;
}
.search-item-label {
display: block;
flex: 1;
font-size: $uni-font-size-15;
color: $uni-text-color;
font-weight: 400;
max-width: 100%;
padding-left: $uni-spacing-row-xs;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
}
}
</style>
<style lang="scss">
.components-staff-wrap {
.next-
tree-view {
max-height: 60vh !important;
padding-bottom: 20px;
}
.next-
tree-cnt {
background-color: #fff;
}
}
.component-wrap {
.next-
tree-view {
padding-bottom: 30px;
}
.empty-wrap {
margin-top: 140px;
padding-right: 20px;
.empty-data {
display:
flex;
justify-content: center;
.empty-data-wrap {
height: 100px;
width: 120px;
> image {
width: 100%;
height: 100%;
}
}
}
.empty-data-text-wrap {
text-align: center;
font-size: $uni-font-size-14;
letter-spacing: 0;
color: $uni-text-color-secondary;
text-align: center;
line-height: 26px;
font-weight: 400;
}
}
}
</style>
监听props.
treeList是否变化，打印变化次数
本文介绍了一个 Flex 应用中 Tree 组件的具体配置方法，包括数据提供源、标签字段显示、滚动条提示等功能实现细节。
扫一扫
1070
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
