fe-manage/src/components/project/OrgClass.vue

<!--
 * @Author: lixg lixg@dongwu-inc.com
 * @Date: 2023-02-23 10:53:15
 * @LastEditors: lixg lixg@dongwu-inc.com
 * @LastEditTime: 2023-02-23 21:31:59
 * @FilePath: /fe-manage/src/components/project/OrgClass.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <a-tree-select
    :getPopupContainer="
      (triggerNode) => {
        return triggerNode.parentNode || document.body;
      }
    "
    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',
      label: 'name',
      value: 'id',
    }"
    :disabled="disabled"
    @change="change"
    dropdownClassName="treeDropdown"
  >
  </a-tree-select>
</template>
<script setup>
import { defineEmits, defineProps, ref, watch } from "vue";
import {request, useArrayRequest, useRequest} from "@/api/request";
import {ORG_CHILD_LIST, ORG_LIST} from "@/api/apis";

const props = defineProps({
  value: String,
  name: String,
  disabled: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits({});
const stuTreeExpandedKeys = ref([]);
const labelValue = ref({ value: props.value, label: props.name });
const { data: options, loading: orgLoading } = useArrayRequest(
  ORG_LIST,
  { keyword: "" },
);

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 useArrayRequest(ORG_CHILD_LIST, { keyword: "", orgId: treeNode.id }).then(
    (r) => {
      treeNode.dataRef.treeChildList = r.data;
      options.value = [...options.value];
    }
  );
}

function change(
  { label, value },
  obj,
  {
    triggerNode: {
      props: { namePath },
    },
  }
) {
  emit("update:name", label);
  emit("update:fullName", namePath);
  emit("update:value", value);
}
</script>