dept-tree.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <!-- 部门树 -->
  2. <template>
  3. <el-card shadow="never">
  4. <el-input v-model="deptName" placeholder="部门名称" clearable>
  5. <template #prefix>
  6. <i-ep-search />
  7. </template>
  8. </el-input>
  9. <el-tree
  10. ref="deptTreeRef"
  11. class="mt-2"
  12. :data="deptList"
  13. :props="{ children: 'children', label: 'deptName', disabled: '' }"
  14. :expand-on-click-node="false"
  15. :filter-node-method="handleFilter"
  16. highlight-current
  17. default-expand-all
  18. @node-click="handleNodeClick"
  19. />
  20. </el-card>
  21. </template>
  22. <script setup lang="ts">
  23. import { treeList } from "@/api/system/dept";
  24. const props = defineProps({
  25. modelValue: {
  26. type: [String],
  27. default: undefined,
  28. },
  29. });
  30. const deptList = ref<OptionType[]>(); // 部门列表
  31. const deptTreeRef = ref(ElTree); // 部门树
  32. const deptName = ref(); // 部门名称
  33. const emits = defineEmits(["node-click", "update:modelValue"]);
  34. const deptId = useVModel(props, "modelValue", emits);
  35. watchEffect?.(
  36. () => {
  37. deptTreeRef.value.filter(deptName.value);
  38. },
  39. {
  40. flush: "post", // watchEffect会在DOM挂载或者更新之前就会触发,此属性控制在DOM元素更新后运行
  41. }
  42. );
  43. /** 部门筛选 */
  44. function handleFilter(value: string, data: any) {
  45. if (!value) {
  46. return true;
  47. }
  48. return data.deptName.indexOf(value) !== -1;
  49. }
  50. /** 部门树节点 Click */
  51. function handleNodeClick(data: { [key: string]: any }) {
  52. deptId.value = data.id;
  53. emits("node-click");
  54. }
  55. onBeforeMount?.(() => {
  56. treeList().then((response) => {
  57. if (response.data) {
  58. deptId.value = response.data[0].id;
  59. emits("node-click");
  60. }
  61. deptList.value = response.data;
  62. });
  63. });
  64. </script>