选择组织树弹窗

src/components/project/SearchTeacher.vue

@@ -2,29 +2,53 @@
   <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"
+        <div class="pover">
-          :load-data="onLoadData" v-model:selectedKeys="stuTreeSelectKeys"
+          <div class="search">
-          v-model:expandedKeys="stuTreeExpandedKeys" :fieldNames="{
+            <a-select
-            children: 'treeChildList',
+              v-model:value="selectName"
-            key: 'id',
+              style="width: 100%"
-            title: 'name',
+              placeholder="请查询姓名或工号"
-            value: 'name',
+              :options="isOpen?options:selectOptions"
-          }" @select="stuStuOrgSelect" style="max-height: 260px;overflow-y: auto;">
+              :filter-option="false"
-        </a-tree>
+              allowClear
+              showSearch
+              :open="isOpen"
+              :defaultOpen="false"
+              @search="searchMembers"
+              @change="handleChange"
+              @blur="blur"
+            >
+              <template #suffixIcon><ZoomInOutlined twoToneColor="#eb2f96" /></template>
+              <template v-if="loading" #notFoundContent>
+                <a-spin size="small"/>
+              </template>
+            </a-select>
+          </div>
+          <div class="tree">
+            <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;width: 250px;">
+            </a-tree>
+          </div>
+          <div class="btn">
+            <div class="btn0 btn1" @click="notChange">取消</div>
+            <div class="btn0 btn2" @click="changeOut">确定</div>
+          </div>
+        </div>
       </template>
       <a-select
         v-model:value="selectData"
         style="width: 100%"
         placeholder="请选择讲师"
-        :options="isOpen?options:selectOptions"
+        :options="selectOptions"
         :filter-option="false"
-        allowClear
+        :open="false"
-        showSearch
-        :open="isOpen"
         :defaultOpen="false"
-        @search="searchMembers"
-        @change="handleChange"
-        @blur="blur"
       >
         <template v-if="loading" #notFoundContent>
           <a-spin size="small"/>
@@ -37,12 +61,14 @@
 <script setup>
 import { ref,defineProps,defineEmits,watch,onMounted } from 'vue';
 import { request, useRequest} from "@/api/request";
+import { message } from "ant-design-vue"
 import { ORG_CHILD_LIST, ORG_LIST,USER_LIST_PAGE} from "@/api/apis";
 import { getTeacherByDepartId,getTeacherByNameOrUserNo } from "@/api/Lecturer";
+import { ZoomInOutlined } from '@ant-design/icons-vue';
 const props = defineProps({
   value:{
     type: String,
-    default: null,
+    default: '',
   },
   lable:{
     type: String,
@@ -51,11 +77,14 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:value','update:lable'])
 const visible = ref(false);
-watch(()=>visible.value,()=>{
+watch(()=>props.value,(val)=>{
-  stuTreeSelectKeys.value = []
+  if(val){
-  stuTreeExpandedKeys.value = []
+    selectData.value = val
+  }
 })
-const selectData = ref(props.value);
+const teacherName = ref('')
+const selectData = ref(null);
+const selectName = ref(null)
 const options = ref([]);
 const selectOptions = ref([])
 const isOpen = ref(false);
@@ -66,7 +95,8 @@ function blur() {
 const handleChange = (e,l) => {
   console.log(e,l,'handlechange');
   isOpen.value = false
-  emit('update:value',e)
+  // emit('update:value',e)
+  teacherName.value = e
 };
 function debounce(func, wait) {
   let timeout;
@@ -79,11 +109,9 @@ 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)
@@ -97,8 +125,8 @@ const searchMember = (keyword) => {
       loading.value = false
       options.value = res.data.data.map((item) => {
         return {
-          value: item.name,
+          value: item.realName,
-          label: item.name+'('+item.workNum+')'+item.orgName,
+          label: item.realName+'('+item.userNo+')'+item.orgName,
           key: item.id,
         }
       })
@@ -149,22 +177,70 @@ function onLoadData(treeNode) {
   );
 
   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')
+  console.log(selectedNodes)
+  teacherName.value = ''
   if(selectedNodes[0].isLeaf){
-    selectData.value = selectedNodes[0].realName
+    teacherName.value = selectedNodes[0].name
-    visible.value = false
+    // emit('update:value',selectedNodes[0].realName)
-    emit('update:value',selectedNodes[0].realName)
   }
 }
+watch(()=>visible.value,(val)=>{
+  if(val){
+    stuTreeSelectKeys.value = []
+    stuTreeExpandedKeys.value = []
+    teacherName.value = ''
+    selectName.value = null
+  }
+})
+const notChange = () => {
+  visible.value = false
+  teacherName.value = ''
+}
+const changeOut = () => {
+  if(!teacherName.value){
+    message.error('请选择讲师')
+    return
+  }
+  selectData.value = teacherName.value
+  emit('update:value',teacherName.value)
+  notChange()
+}
 </script>
 
 <style lang="scss" scoped>
-
+.pover{
+  .search{
+    margin-top: 10px;
+  }
+  .tree{
+    margin-top: 5px;
+    border: 1px solid rgba(215, 215, 215, 1);
+  }
+  .btn{
+    margin-top: 10px;
+    display: flex;
+    justify-content: flex-end;
+    .btn0{
+      width: 70px;
+      height: 25px;
+      color: #FFFFFF;
+      text-align: center;
+      line-height: 25px;
+      cursor: pointer;
+    }
+    .btn1{
+      margin-right: 10px;
+      background-color: rgba(170, 170, 170, 1);
+    }
+    .btn2{
+      background-color: rgba(50, 107, 250, 1);
+    }
+  }
+}
 
 </style>