index.vue 1010 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. <template>
  2. <el-tree-select
  3. style="width: 100%"
  4. v-model="receiveUserId"
  5. :data="allUserList"
  6. :default-expand-all="true"
  7. :filter-node-method="filterNodeMethod"
  8. placeholder=" "
  9. @node-click="nodeClickHandler"
  10. filterable
  11. />
  12. </template>
  13. <script setup lang="ts">
  14. import { useQuery } from '@tanstack/vue-query'
  15. import { getAllDeptSimpleByList } from '@/service/system'
  16. defineOptions({ name: 'DeptTree' })
  17. const props = defineProps<{ modelValue: any }>()
  18. const emit = defineEmits<{
  19. (e: 'update:modelValue', v: string): void
  20. (e: 'nodeClick', v: any): void
  21. }>()
  22. const receiveUserId = computed({
  23. get: () => props.modelValue,
  24. set: (nVal: string) => emit('update:modelValue', nVal)
  25. })
  26. const { data: allUserList } = useQuery(['list-all-simple'], getAllDeptSimpleByList, {
  27. staleTime: Infinity
  28. })
  29. const filterNodeMethod = (value, data) => {
  30. if (!data) return
  31. return data.label.includes(value)
  32. }
  33. const nodeClickHandler = (data, node) => {
  34. emit('nodeClick', node)
  35. }
  36. </script>