diantou/src_product/iam/audit/masterdata/master-data-tree.vue

<template>
  <a-card :class="[$style.treewrap, $style.ywlxtree]">
    <a-tree
      :key="key"
      ref="auditMaintainCatalogTree"
      v-model="checkedKeys"
      :check-strictly="true"
      :checkable="false"
      :tree-data="treeData"
      :show-line="true"
      :block-node="false"
      :replace-fields="replaceFields"
      :expanded-keys="expandedKeys"
      @expand="onExpand"
      @select="treeSelect"
    >
    </a-tree>
  </a-card>
</template>

<script>
import masterDataService from './master-data-service'
export default {
  name: 'MasterDataTree',
  metaInfo: {
    title: 'masterDataTree',
  },
  data() {
    return {
      key: 0,
      treeData: [],
      checkedKeys: [], // 选中的节点数据
      replaceFields: {
        title: 'text',
        key: 'id',
      },
      expandedKeys: [],
      nodeInfo: {},
      parentNode: {},
    }
  },
  created() {
    this.initTreeData()
  },
  methods: {
    // 初始化地址树
    initTreeData() {
      masterDataService.getOrgNodeList().then((res) => {
        if (res.data.length > 0) {
          this.treeData = res.data.map((val) => {
            return {
              id: val.id,
              text: val.text,
              isLeaf: false,
              props: {
                isroot: true,
              },
              children: [],
              key: val.id,
            }
          })
        }
      })
    },
    refreshKey() {
      if (this.nodeInfo.id) {
        this.getChildNode(this.nodeInfo)
      } else {
        if (this.expandedKeys.length > 0) {
          this.getChildNode(this.parentNode)
        }
      }
    }, // 重新获取数据
    getChildNode(node) {
      masterDataService.getOrgChildNodeList(node.id).then((res) => {
        if (res.data.length > 0) {
          node.children = res.data.map((val) => {
            return {
              id: val.id,
              text: val.text,
              isLeaf: false,
              props: {
                isroot: false,
              },
              children: [],
              key: val.id,
            }
          })
        } else {
          node.children = []
        }
        this.key++
      })
    },
    onExpand(expandedKeys, { expanded, node }) {
      if (node.dataRef.id === '-1') {
        this.parentNode = node.dataRef
      }
      this.getChildNode(node.dataRef)
      this.nodeInfo = node.dataRef
      this.expandedKeys = expandedKeys
    },
    treeSelect(selectedKeys, info) {
      this.$emit('treeSelect', selectedKeys, info.node.dataRef)
    },
  },
}
</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;
  overflow: auto;
  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;
    }
  }
}
// 单选样式
.single {
  :global .ant-tree-checkbox {
    .ant-tree-checkbox-inner {
      border-radius: 100px;
      &::after {
        position: absolute;
        top: 3px;
        left: 3px;
        display: table;
        width: 8px;
        height: 8px;
        content: ' ';
        background-color: $primary-color;
        border: 0;
        border-radius: 8px;
        opacity: 0;
        transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
        transform: scale(0);
      }
    }
    &.ant-tree-checkbox-checked {
      &::after {
        position: absolute;
        top: 16.67%;
        left: 0;
        width: 100%;
        height: 66.67%;
        content: '';
        border: 1px solid #1890ff;
        border-radius: 50%;
        animation: antRadioEffect 0.36s ease-in-out;
        animation-fill-mode: both;
      }
      .ant-tree-checkbox-inner {
        background-color: $white;
        &::after {
          opacity: 1;
          transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
          transform: scale(1);
        }
      }
    }
  }
}
</style>