diantou/src_product/iam/law/team/law-team-tree.vue

<template>
  <a-card :class="[$style.treewrap, $style.ywlxtree]">
    <sd-group-tree
      :root-node="{ code: -1, name: '法律队伍', id: -1 }"
      @update:selectedKeys="handleTreeSelect"
    />
  </a-card>
</template>

<script>
import components from './_import-components/law-team-tree-import'

export default {
  name: 'LawTeamTree',
  components,
  data() {
    return {}
  },
  methods: {
    handleTreeSelect(key) {
      this.$emit('treeSelect', key)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.spin {
  width: 100%;
  line-height: 30;
}
.ywlxtree {
  :global(.ant-tree-title) {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :global(.ant-input-search) {
    margin: 8px 0;
    overflow: hidden;
  }
  .active {
    color: $primary-color;
  }
  :global(.ant-select) {
    width: 100%;
    overflow: hidden;
  }
}
.treewrap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 20%;
  min-height: 100%;
  margin-right: $padding-lg;
  transition: width 0.2s;
  .fold {
    position: absolute;
    top: calc(50% - 30px);
    right: -15px;
    z-index: 2;
    width: 15px;
    height: 75px;
    padding: 0;
    border-radius: 0 10px 10px 0;
  }
  :global(.ant-tree) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :global(.ant-card-body) {
    background: $white;
  }
}
.collapse {
  width: 0;
  :global(.ant-card-body) {
    background: transparent;
    :global(.ant-empty) {
      display: none;
    }
  }
}
</style>