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

<!--
 * @Author: lixg lixg@dongwu-inc.com
 * @Date: 2023-02-23 14:57:21
 * @LastEditors: lixg lixg@dongwu-inc.com
 * @LastEditTime: 2023-03-07 17:30:12
 * @FilePath: /fe-manage/src/components/project/OrgClassCheck.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: 440px; min-height: 40px"
    :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"
    multiple
  >
  </a-tree-select>
</template>
<script setup>
import {defineEmits, defineProps, ref, watch, watchEffect} from "vue";
import {boeRequest, useBoeApi, useRequest} from "@/api/request";
import { ORG_CHILD_LIST, ORG_LIST } from "@/api/ThirdApi";

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

watchEffect(()=>{
  labelValue.value = props.value;
})

watch(props, () => {
  // stuTreeExpandedKeys.value = [];
  // console.log("labelValue.value", labelValue.value, props.value);
  // labelValue.value = props.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 boeRequest(ORG_CHILD_LIST, { keyword: "", orgId: treeNode.id }).then(
    (r) => {
      treeNode.dataRef.treeChildList = r.result.directChildList;
      options.value = [...options.value];
    }
  );
}

function change(e) {
  console.log("label", e, emit);
  // let label = [];
  // let value = [];
  // for (let i = 0; i < e.length; i++) {
  //   label.push(e[i].label);
  //   value.push(e[i].value);
  // }
  // emit("update:name", label);
  emit("update:value", e);
}
</script>