zjugis_OA/client/src/views/OaSystem/components/DistrictTree/index.vue

<template>
  <div class="treeSelectV2">
    <TreeSelectV2
      :data="areaTree"
      :props="{ label: 'name', value: 'id' }"
      v-model="xzqdm"
      :filter-method="filterNodeMethod"
      :disabled="disabled"
    />
  </div>
</template>

<script setup lang="ts">
import TreeSelectV2 from '@/components/TreeSelectV2/index.vue'
import { filterNodeMethod } from '@/utils/tree'
import { useQuery } from '@tanstack/vue-query'
import { getAreaTree } from '@/service/system'

defineOptions({
  name: 'DistrictTree'
})
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  },
  modelValue: {
    type: [Number, String],
    default: null
  }
})
const emit = defineEmits<{ (e: 'update:modelValue', v: any): void }>()
const xzqdm = computed({
  get: () => Number(props.modelValue),
  set: (val) => emit('update:modelValue', val)
})
const { data: areaTree } = useQuery([getAreaTree.name], getAreaTree)
</script>

<style lang="scss" scoped>
.treeSelectV2 {
  position: relative;

  :deep(.el-popper) {
    width: 100% !important;
    left: 0px !important;
    right: 0px !important;
  }

  :deep(.el-input__suffix) {
    .el-icon {
      color: var(--el-select-input-color);
      font-size: var(--el-select-input-font-size);
      transition: transform var(--el-transition-duration);
      transform: rotateZ(0);
      cursor: pointer;
    }
  }

  :deep(.is-focus) {
    .el-input__suffix .el-icon {
      transform: rotateZ(-180deg);
      cursor: pointer;
    }
  }
}
</style>