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

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 {useStore} from "vuex";
-
-const store = useStore();
+import {defineEmits, defineProps, ref, watch} from "vue";
+import {request, useBoeApi} from "@/api/request";
+import {ORG_CHILD_LIST, ORG_LIST} from "@/api/ThirdApi";
 
 const props = defineProps({
   value: String,
+  name: String,
   disabled: {
     type: Boolean,
     default: false
   }
 })
 const emit = defineEmits({})
-
-const options = computed(() => store.state.orgtreeList)
-
-const id = computed(() => {
-  return props.value
+const stuTreeExpandedKeys = ref([])
+const labelValue = ref({})
+const {
+  data: options,
+  loading: orgLoading,
+} = useBoeApi(ORG_LIST, {keyword: ''}, {
+  init: true,
+  result: (res) => res.result.map(e => ({...e, isLeaf: false})),
 })
 
-function change(key, obj, {triggerNode: {props: {namePath}}}) {
-  emit('update:name', obj[0])
+watch(props, () => {
+  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>