refactor: ♻️ 用户管理代码重构，封装部门树组件

Former-commit-id: 6021909320b038a0f9d76dd711f9c551e0863ac8

src/views/system/user/components/dept-tree.vue

@@ -0,0 +1,69 @@
+<!-- 部门树 -->
+<template>
+  <el-card shadow="never">
+    <el-input v-model="deptName" placeholder="部门名称" clearable>
+      <template #prefix>
+        <i-ep-search />
+      </template>
+    </el-input>
+
+    <el-tree
+      ref="deptTreeRef"
+      class="mt-2"
+      :data="deptList"
+      :props="{ children: 'children', label: 'label', disabled: '' }"
+      :expand-on-click-node="false"
+      :filter-node-method="handleFilter"
+      default-expand-all
+      @node-click="handleNodeClick"
+    />
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { getDeptOptions } from "@/api/dept";
+
+const props = defineProps({
+  modelValue: {
+    type: [Number],
+    default: undefined,
+  },
+});
+
+const deptList = ref<OptionType[]>(); // 部门列表
+const deptTreeRef = ref(ElTree); // 部门树
+const deptName = ref(); // 部门名称
+
+const emits = defineEmits(["node-click"]);
+
+const deptId = useVModel(props, "modelValue", emits);
+
+watchEffect(
+  () => {
+    deptTreeRef.value.filter(deptName.value);
+  },
+  {
+    flush: "post", // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+  }
+);
+
+/** 部门筛选 */
+function handleFilter(value: string, data: any) {
+  if (!value) {
+    return true;
+  }
+  return data.label.indexOf(value) !== -1;
+}
+
+/** 部门树节点 Click */
+function handleNodeClick(data: { [key: string]: any }) {
+  deptId.value = data.value;
+  emits("node-click");
+}
+
+onBeforeMount(() => {
+  getDeptOptions().then((response) => {
+    deptList.value = response.data;
+  });
+});
+</script>