caseEditor/src/app/map/company-select/index.vue

<template>
  <el-cascader
    style="width: 100%"
    v-model="state.path"
    :disabled="disabled"
    placeholder="勘验单位："
    :options="state.options"
    :props="{ expandTrigger: 'hover', checkStrictly: true }"
  />
</template>

<script setup lang="ts">
import { useTreeSelect, Props, TreeOption } from "@/hook/treeSelect";
import { getOrganizationTree } from "./organization";
import { watchEffect } from "vue";

const emit = defineEmits<{
  (e: "update:data", data: TreeOption | null): void;
  (e: "update:modelValue", value: string): void;
  (e: "update:label", value: string): void;
  (e: "update:path", path: string[]): void;
}>();
const props = defineProps<Props>();

const state = useTreeSelect(
  props,
  getOrganizationTree,
  (val) => emit("update:modelValue", val),
  {
    label: "name",
    level: "level",
  }
);

watchEffect(() => {
  emit("update:data", state.currentOption);
});
watchEffect(() => {
  emit("update:label", state.label);
});
watchEffect(() => {
  emit("update:path", state.path);
});
</script>

<style scoped>
.aaa::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
</style>