新增讲师组件

src/components/project/SearchTeacher.vue

@@ -0,0 +1,170 @@
+<template>
+  <div>
+    <a-popover v-model:visible="visible"  placement="bottom" trigger="click">
+      <template #content>
+        <a-tree allow-clear tree-default-expand-all :tree-data="treeData" :loading="orgLoading"
+          :load-data="onLoadData" v-model:selectedKeys="stuTreeSelectKeys"
+          v-model:expandedKeys="stuTreeExpandedKeys" :fieldNames="{
+            children: 'treeChildList',
+            key: 'id',
+            title: 'name',
+            value: 'name',
+          }" @select="stuStuOrgSelect" style="max-height: 260px;overflow-y: auto;">
+        </a-tree>
+      </template>
+      <a-select
+        v-model:value="selectData"
+        style="width: 100%"
+        placeholder="请选择讲师"
+        :options="isOpen?options:selectOptions"
+        :filter-option="false"
+        allowClear
+        showSearch
+        :open="isOpen"
+        :defaultOpen="false"
+        @search="searchMembers"
+        @change="handleChange"
+        @blur="blur"
+      >
+        <template v-if="loading" #notFoundContent>
+          <a-spin size="small"/>
+        </template>
+      </a-select>
+    </a-popover>
+  </div>
+</template>
+
+<script setup>
+import { ref,defineProps,defineEmits,watch,onMounted } from 'vue';
+import { request, useRequest} from "@/api/request";
+import { ORG_CHILD_LIST, ORG_LIST,USER_LIST_PAGE} from "@/api/apis";
+import { getTeacherByDepartId,getTeacherByNameOrUserNo } from "@/api/Lecturer";
+const props = defineProps({
+  value:{
+    type: String,
+    default: null,
+  },
+  lable:{
+    type: String,
+    default: '',
+  },
+})
+const emit = defineEmits(['update:value','update:lable'])
+const visible = ref(false);
+watch(()=>visible.value,()=>{
+  stuTreeSelectKeys.value = []
+  stuTreeExpandedKeys.value = []
+})
+const selectData = ref(props.value);
+const options = ref([]);
+const selectOptions = ref([])
+const isOpen = ref(false);
+const loading = ref(false);
+function blur() {
+  isOpen.value = false
+}
+const handleChange = (e,l) => {
+  console.log(e,l,'handlechange');
+  isOpen.value = false
+  emit('update:value',e)
+};
+function debounce(func, wait) {
+  let timeout;
+  return function(...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(this, args), wait);
+  };
+}
+const searchMembers = (keyword) => {
+  isOpen.value = true
+  options.value = []
+  loading.value = true
+  visible.value = false
+  if(keyword == '' || keyword == null){
+    isOpen.value = false
+    loading.value = false
+    visible.value = true
+    options.value = []
+  }else{
+    debounceObject(keyword)
+  }
+};
+const searchMember = (keyword) => {
+  console.log(keyword,'keyword')
+  getTeacherByNameOrUserNo({nameOrUserNo:keyword}).then((res) => {
+    console.log(res,'res')
+    if(res.data.code == 200){
+      loading.value = false
+      options.value = res.data.data.map((item) => {
+        return {
+          value: item.name,
+          label: item.name+'('+item.workNum+')'+item.orgName,
+          key: item.id,
+        }
+      })
+    }else{
+      loading.value = false
+    }
+  }).catch(()=>{
+    loading.value = false
+  })
+};
+const debounceObject = debounce(searchMember, 1500);
+const filterOption = (input, option) => {
+  console.log(input,option,'xixixixi')
+};
+
+const stuTreeSelectKeys = ref([]);
+const stuTreeExpandedKeys = ref([]);
+const teacherById = ref(null)
+const { data: treeData, loading: orgLoading } = useRequest(
+  ORG_LIST,
+  { keyword: "" },
+);
+function onLoadData(treeNode) {
+  console.log(treeNode, "treeNode")
+  teacherById.value = treeNode.id
+  const promises = [];
+  const childDatas = []
+  promises.push(
+    getTeacherByDepartId({organizationId:teacherById.value}).then((res) => {
+      if(res.data.code == 200){
+        res.data.data.map(item=>{
+          return (
+            item.isLeaf = true
+          )
+        })
+        childDatas.unshift(...res.data.data)
+      }
+    }).catch((err)=>{
+      console.log(err,'err')
+    })
+  );
+  promises.push(
+    request(ORG_CHILD_LIST, { keyword: "", orgId: treeNode.id }).then((r) => {
+      // treeNode.dataRef.treeChildList = r.data;
+      childDatas.push(...r.data)
+      treeData.value = [...treeData.value];
+    })
+  );
+
+  return Promise.all(promises).then(() => {
+    console.log('所有请求已完成');
+    treeNode.dataRef.treeChildList = childDatas;
+      treeData.value = [...treeData.value];
+  });
+}
+function stuStuOrgSelect(e, {selected: bool, selectedNodes, node, event}) {
+  console.log(e,selectedNodes[0],'xixixixiix')
+  if(selectedNodes[0].isLeaf){
+    selectData.value = selectedNodes[0].realName
+    visible.value = false
+    emit('update:value',selectedNodes[0].realName)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+
+</style>