init

src/components/department_tree/index.vue

@@ -1,27 +1,17 @@
 <template>
-  <el-input
+  <layout-tree
-    v-model="filterText"
+    :api="layoutFnGetDepartmentTree"
-    placeholder="输入关键字进行过滤"
+    v-model:refresh="refresh"
-    class="mb-10"
+    :id="departmentId"
-  />
+    @throw-data="emits('throw-data', $event)"
-  <el-tree
+    @node-click="emits('node-click', $event)"
-    ref="treeRef"
-    :props="{
-      children: 'nodes',
-      label: 'name',
-    }"
-    node-key="id"
-    accordion
-    :data="treeData"
-    :filter-node-method="fnFilterNode"
-    @node-click="nodeClick"
-    :default-expanded-keys="[departmentId]"
   />
 </template>
 
 <script setup>
-import { ref, watch, watchEffect } from "vue";
 import { layoutFnGetDepartmentTree } from "@/assets/js/data_dictionary.js";
+import LayoutTree from "@/components/tree/index.vue";
+import { useVModel } from "@vueuse/core";
 
 defineOptions({
   name: "LayoutDepartmentTree",
@@ -37,29 +27,7 @@ const props = defineProps({
   },
 });
 const emits = defineEmits(["node-click", "throw-data", "update:refresh"]);
-const treeRef = ref(null);
+const refresh = useVModel(props, "refresh", emits);
-const filterText = ref("");
-const treeData = ref([]);
-watch(filterText, (val) => {
-  treeRef.value.filter(val);
-});
-watchEffect(() => {
-  if (props.refresh) fnGetTreeData();
-});
-const fnFilterNode = (value, data) => {
-  if (!value) return true;
-  return data.name.includes(value);
-};
-const fnGetTreeData = async () => {
-  const { value } = await layoutFnGetDepartmentTree();
-  treeData.value = value;
-  emits("throw-data", value);
-  emits("update:refresh", false);
-};
-fnGetTreeData();
-const nodeClick = (data) => {
-  emits("node-click", data);
-};
 </script>
 
 <style scoped lang="scss"></style>

src/components/electronic_fence_tree/index.vue

@@ -1,27 +1,17 @@
 <template>
-  <el-input
+  <layout-tree
-    v-model="filterText"
+    :api="layoutFnGetElectronicFenceTree"
-    placeholder="输入关键字进行过滤"
+    v-model:refresh="refresh"
-    class="mb-10"
+    :id="electronicFenceAreaId"
-  />
+    @throw-data="emits('throw-data', $event)"
-  <el-tree
+    @node-click="emits('node-click', $event)"
-    ref="treeRef"
-    :props="{
-      children: 'nodes',
-      label: 'name',
-    }"
-    node-key="id"
-    accordion
-    :data="treeData"
-    :filter-node-method="fnFilterNode"
-    @node-click="nodeClick"
-    :default-expanded-keys="[electronicFenceAreaId]"
   />
 </template>
 
 <script setup>
-import { ref, watch, watchEffect } from "vue";
 import { layoutFnGetElectronicFenceTree } from "@/assets/js/data_dictionary.js";
+import { useVModel } from "@vueuse/core";
+import LayoutTree from "@/components/tree/index.vue";
 
 defineOptions({
   name: "LayoutElectronicFenceTree",
@@ -37,29 +27,7 @@ const props = defineProps({
   },
 });
 const emits = defineEmits(["node-click", "throw-data", "update:refresh"]);
-const treeRef = ref(null);
+const refresh = useVModel(props, "refresh", emits);
-const filterText = ref("");
-const treeData = ref([]);
-watch(filterText, (val) => {
-  treeRef.value.filter(val);
-});
-watchEffect(() => {
-  if (props.refresh) fnGetTreeData();
-});
-const fnFilterNode = (value, data) => {
-  if (!value) return true;
-  return data.name.includes(value);
-};
-const fnGetTreeData = async () => {
-  const { value } = await layoutFnGetElectronicFenceTree();
-  treeData.value = value;
-  emits("throw-data", value);
-  emits("update:refresh", false);
-};
-fnGetTreeData();
-const nodeClick = (data) => {
-  emits("node-click", data);
-};
 </script>
 
 <style scoped lang="scss"></style>

src/components/tree/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-input
+    v-model="filterText"
+    placeholder="输入关键字进行过滤"
+    class="mb-10"
+  />
+  <el-tree
+    ref="treeRef"
+    :props="{
+      children: 'nodes',
+      label: 'name',
+    }"
+    node-key="id"
+    accordion
+    :data="treeData"
+    :filter-node-method="fnFilterNode"
+    @node-click="nodeClick"
+    :default-expanded-keys="[id]"
+  />
+</template>
+
+<script setup>
+import { ref, watch, watchEffect } from "vue";
+
+defineOptions({
+  name: "LayoutTree",
+});
+const props = defineProps({
+  refresh: {
+    type: Boolean,
+    default: false,
+  },
+  id: {
+    type: String,
+    default: "",
+  },
+  api: {
+    type: Function,
+    required: true,
+    default: () => {},
+  },
+});
+const emits = defineEmits(["node-click", "throw-data", "update:refresh"]);
+const treeRef = ref(null);
+const filterText = ref("");
+const treeData = ref([]);
+watch(filterText, (val) => {
+  treeRef.value.filter(val);
+});
+watchEffect(() => {
+  if (props.refresh) fnGetTreeData();
+});
+const fnFilterNode = (value, data) => {
+  if (!value) return true;
+  return data.name.includes(value);
+};
+const fnGetTreeData = async () => {
+  const { value } = await props.api();
+  treeData.value = value;
+  emits("throw-data", value);
+  emits("update:refresh", false);
+};
+fnGetTreeData();
+const nodeClick = (data) => {
+  emits("node-click", data);
+};
+</script>
+
+<style scoped lang="scss"></style>