zjugis_OA/client/src/views/OaSystem/components/DeptTree/index.vue

<template>
  <el-tree-select
    style="width: 100%"
    v-model="receiveUserId"
    :data="allUserList"
    :default-expand-all="true"
    :filter-node-method="filterNodeMethod"
    placeholder=" "
    @node-click="nodeClickHandler"
    filterable
  />
</template>

<script setup lang="ts">
import { useQuery } from '@tanstack/vue-query'
import { getAllDeptSimpleByList } from '@/service/system'

defineOptions({ name: 'DeptTree' })
const props = defineProps<{ modelValue: any }>()
const emit = defineEmits<{
  (e: 'update:modelValue', v: string): void
  (e: 'nodeClick', v: any): void
}>()
const receiveUserId = computed({
  get: () => props.modelValue,
  set: (nVal: string) => emit('update:modelValue', nVal)
})
const { data: allUserList } = useQuery(['list-all-simple'], getAllDeptSimpleByList, {
  staleTime: Infinity
})
const filterNodeMethod = (value, data) => {
  if (!data) return
  return data.label.includes(value)
}
const nodeClickHandler = (data, node) => {
  emit('nodeClick', node)
}
</script>