提交代码

src/components/MyComponents/DepartmentTree/index.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="departmentTree-box" :style="{ width: width, height: '100%' }">
+    <div class="depar_hear">
+      <el-input
+        v-model="listQuery.deptname"
+        v-if="filterable"
+        clearable
+        :debounce="500"
+        @input="filterTextChange"
+        placeholder="请输入筛选条件"
+      />
+    </div>
+    <div class="depar_foot">
+      <el-tree
+        ref="treeRef"
+        class="filter-tree"
+        :props="endProps"
+        lazy
+        :load="loadNode"
+        @node-click="nodeClick"
+        :filter-node-method="filterNode"
+        :data="treeData"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { debounce } from "lodash";
+import { getItem } from "@/utils/storage";
+import { COMPONENT_WIDTH } from "@/constant";
+import { ref, defineProps, defineEmits, watch, computed, onMounted } from "vue";
+import { selectDeptPage, getAllChildDeptList } from "@/api/user-manage";
+const props = defineProps({
+  //获取组件传值
+  placeholder: {
+    default: "请选择",
+    type: String
+  },
+  multiple: {
+    default: false,
+    type: Boolean
+  },
+  filterable: {
+    default: false,
+    type: Boolean
+  },
+  modelValue: {
+    type: Number
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  },
+  isBmId:{
+    type:Boolean,
+    default:false
+  }
+});
+const listQuery = ref({
+  deptname: "",
+  deptcode: "",
+  parentid: ""
+});
+const treeRef = ref(null);
+const node_had = ref([]);
+const resolve_had = ref([]);
+//防抖处理
+const filterTextChange = debounce(inputChange, 500);
+onMounted(() => {});
+//获取部门数据
+function getTreeData() {
+  selectDeptPage(listQuery.value).then((res) => {
+    for (let i = 0; i < res.length; i++) {
+      res[i].leaf = !res[i].hasChildren;
+    }
+    treeData.value = res;
+  });
+}
+//搜索查询
+function inputChange(e) {
+  selectDeptPage(listQuery.value).then((res) => {
+    treeData.value = res;
+  });
+}
+
+watch(
+  () => listQuery.value.deptname,
+  (val) => {
+    treeRef.value.filter("tree", val);
+  }
+);
+const endProps = {
+  children: "childDeptList",
+  value: "id",
+  label: "orgName",
+  isLeaf: "leaf"
+};
+const treeData = ref([]);
+//懒加载方法
+async function loadNode(node, resolve) {
+  listQuery.value.parentid = node.data.id;
+  if (node.level === 0) {
+    node_had.value = node;
+    resolve_had.value = resolve;
+    getTreeData();
+  }
+  if (node.level >= 1) {
+    selectDeptPage(listQuery.value).then((res) => {
+      for (let i = 0; i < res.length; i++) {
+        res[i].leaf = !res[i].hasChildren;
+      }
+      resolve(res);
+    });
+  }
+}
+const filterNode = (value, data) => {
+  if (!value) return true;
+  return data.orgName.includes(value);
+};
+
+const nodeClick = (node) => {
+  if(props.isBmId){
+    emits("update:modelValue", node.id);
+  }else{
+    emits("update:modelValue", node.orgCode);
+  }
+};
+
+const emits = defineEmits(["update:modelValue"]);
+const handleChange = (e) => {
+  if (props.multiple === true) {
+    const data = e.map((item) => {
+      return item[item.length - 1];
+    });
+    emits("update:modelValue", data);
+  } else {
+    const data = e[0];
+    emits("update:modelValue", data);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.depar_hear {
+  height: 32px;
+}
+.depar_foot {
+  height: calc(100% - 32px);
+  overflow: auto;
+  width: 280px;
+  width: 100%;
+  min-width: 300px;
+}
+.departmentTree-box {
+  overflow: auto;
+}
+</style>