---项目经理 和 组织树异步加载

src/components/project/OrgClass.vue

@@ -5,11 +5,15 @@
                             return triggerNode.parentNode || document.body;
                           }
                         "
-      v-model:value="id"
+      v-model:value="labelValue"
       style="width: 100%"
       :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
       placeholder="请选择归属组织"
+      :labelInValue="true"
       allow-clear
+      v-model:treeExpandedKeys="stuTreeExpandedKeys"
+      :loading="orgLoading"
+      :load-data="onLoadData"
       :tree-data="options"
       :fieldNames="{
                 children: 'treeChildList',
@@ -23,30 +27,50 @@
   </a-tree-select>
 </template>
 <script setup>
-import {computed, defineEmits, defineProps} from "vue";
+import {defineEmits, defineProps, ref, watch} from "vue";
-import {useStore} from "vuex";
+import {request, useBoeApi} from "@/api/request";
-
+import {ORG_CHILD_LIST, ORG_LIST} from "@/api/ThirdApi";
-const store = useStore();
 
 const props = defineProps({
   value: String,
+  name: String,
   disabled: {
     type: Boolean,
     default: false
   }
 })
 const emit = defineEmits({})
-
+const stuTreeExpandedKeys = ref([])
-const options = computed(() => store.state.orgtreeList)
+const labelValue = ref({})
-
+const {
-const id = computed(() => {
+  data: options,
-  return props.value
+  loading: orgLoading,
+} = useBoeApi(ORG_LIST, {keyword: ''}, {
+  init: true,
+  result: (res) => res.result.map(e => ({...e, isLeaf: false})),
 })
 
-function change(key, obj, {triggerNode: {props: {namePath}}}) {
+watch(props, () => {
-  emit('update:name', obj[0])
+  stuTreeExpandedKeys.value = []
+  if (labelValue.value.value !== props.value) {
+    labelValue.value = {value: props.value, label: props.name}
+  }
+  if (labelValue.value.label !== props.name) {
+    labelValue.value = {value: props.value, label: props.name}
+  }
+})
+
+function onLoadData(treeNode) {
+  return request(ORG_CHILD_LIST, {keyword: '', orgId: treeNode.id}).then(r => {
+    treeNode.dataRef.treeChildList = r.result.directChildList
+    options.value = [...options.value]
+  })
+}
+
+function change({label,value}, obj, {triggerNode: {props: {namePath}}}) {
+  emit('update:name', label)
   emit('update:fullName', namePath)
-  emit('update:value', key)
+  emit('update:value', value)
 }
 
 </script>

src/components/student/CommonStudent.vue

@@ -67,6 +67,8 @@
                             allow-clear
                             tree-default-expand-all
                             :tree-data="treeData"
+                            :loading="orgLoading"
+                            :load-data="onLoadData"
                             v-model:selectedKeys="stuTreeSelectKeys"
                             v-model:expandedKeys="stuTreeExpandedKeys"
                             :fieldNames="{
@@ -393,12 +395,10 @@
 </template>
 <script setup>
 import {computed, defineEmits, defineProps, ref, watch} from "vue";
-import {useStore} from "vuex";
+import {request, useBoeApi, useBoeApiPage} from "@/api/request";
-import {useBoeApiPage} from "@/api/request";
+import {AUDIENCE_LIST, ORG_CHILD_LIST, ORG_LIST, USER_LIST} from "@/api/ThirdApi";
-import {AUDIENCE_LIST, USER_LIST} from "@/api/ThirdApi";
 import {saveStu} from "@/api/index1";
 
-const store = useStore();
 const emit = defineEmits({});
 const props = defineProps({
   type: Number,
@@ -457,7 +457,14 @@ const {
 // const {
 //   data: orgData,
 //   fetch: searchOrg,
-// } = useBoeApi(ORG_LIST, searchOrgName.value)
+// } = useBoeApiPage(ORG_LIST, searchOrgName.value)
+const {
+  data: treeData,
+  loading: orgLoading,
+} = useBoeApi(ORG_LIST, {keyword: ''}, {
+  init: true,
+  result: (res) => res.result.map(e => ({...e,isLeaf:false})),
+})
 const {
   data: audiData,
   fetch: searchAudi,
@@ -578,9 +585,13 @@ const closeDrawer = () => {
   visiable.value = false;
   stuData.value = [];
   nameSearch.value.keyword = "";
-
-
 };
+function onLoadData(treeNode){
+  return request(ORG_CHILD_LIST, {keyword:'',orgId:treeNode.id}).then(r => {
+    treeNode.dataRef.treeChildList = r.result.directChildList
+    treeData.value = [...treeData.value]
+  })
+}
 const closeChangeModal = () => {
   stageVisible.value = false;
 };
@@ -588,9 +599,9 @@ const openDrawer = () => {
   visiable.value = true;
 };
 //获取组织树
-const treeData = computed(() => {
+// const treeData = computed(() => {
-  return store.state.orgtreeList ? store.state.orgtreeList : [];
+//   return store.state.orgtreeList ? store.state.orgtreeList : [];
-});
+// });
 
 function onSearchStu() {
   nameSearch.value.page = 1;
@@ -654,6 +665,7 @@ const auditChangePagination = (page) => {
   audienceName.value.page = page;
   searchAudi();
 };
+
 //重置
 function peopleName(name) {
   console.log('people-name', name.target.value)