diantou/src_product/iam/audit/auditsource/km/components/km-knowledge-draftstree.vue

<template>
  <a-card :class="[$style.treewrap, { [$style.collapse]: fold }]">
    <a-spin v-if="icontype === 'left'" :spinning="spinning" :class="$style.spin" />
    <a-empty v-if="empty" />
    <a-tree
      v-if="treeData.length > 0"
      show-icon
      :expanded-keys="expandedKeys"
      :auto-expand-parent="autoExpandParent"
      :tree-data="treeData"
      :replace-fields="replacefields"
      :default-selected-keys="defaultselectedkey"
      @select="onSelect"
      @expand="onExpand"
    >
      <template slot="title" slot-scope="{ text, props }">
        <span :title="text">{{ text }}</span
        ><span v-if="props.count > 0">（{{ props.count }}）</span>
      </template>
    </a-tree>
    <a-button type="primary" :class="$style.fold" @click="foldClick">
      <a-icon :type="icontype" />
    </a-button>
  </a-card>
</template>

<script>
import KmKnowledageService from '../km-knowledage-service'
import components from './_import-components/km-knowledge-draftstree-import'

// 给所有对象增加scopedSlots属性
const addSlot = (obj) => {
  for (let i = 0; i < obj.length; i++) {
    Object.assign(obj[i], { scopedSlots: { title: 'title' } })
    // 因叶子节点和非叶子节点id可能有重复，所以在这里处理一下
    if (obj[i].id !== '0' && obj[i].id !== 'other' && obj[i].id !== 'oaDocReceiptExchange') {
      if (obj[i].leaf) {
        obj[i].id = '0' + obj[i].id
      } else {
        obj[i].id = '1' + obj[i].id
      }
    }
    if (obj[i].children) {
      addSlot(obj[i].children)
    }
  }
}

export default {
  name: 'KmKnowledgeDraftstree',
  components,
  props: {
    dataType: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      spinning: true,
      empty: false,
      icontype: 'left',
      fold: false,
      treeData: [],
      expandedKeys: [], // 默认展开的节点
      autoExpandParent: true,
      replacefields: {
        // 转换树的默认字段title和key
        title: 'text',
        key: 'id',
      },
      defaultselectedkey: [], // 默认选中的节点
      selectedkey: [], // 选中节点
      selectNode: null,
    }
  },
  watch: {
    dataType() {
      this.getTreeData()
    },
  },
  mounted() {
    this.getTreeData()
  },
  methods: {
    // 获取工作树数据
    getTreeData() {
      this.treeData = []
      this.spinning = true
      KmKnowledageService.getFrameWorktree(this.dataType).then((res) => {
        this.spinning = false
        const newArr = res.data
        addSlot(newArr)
        if (newArr[0].children.length > 0) {
          this.treeData = newArr
          this.empty = false
        } else {
          this.treeData = []
          this.empty = true
        }
        this.expandedKeys = [newArr[0].id] // 默认展开顶结点
        this.defaultselectedkey = [newArr[0].id] // 默认选中节点
        this.selectNode = newArr[0]

        this.$emit('treeSelectd', res.data[0], this.dataType)
        this.$emit('treeSelectValue', res.data[0], this.dataType)
      })
    },
    // 刷新树，选中原来的节点，不发送选中节点
    refresh() {
      this.treeData = []
      this.spinning = true
      KmKnowledageService.getFrameWorktree(this.dataType).then((res) => {
        this.spinning = false
        const newArr = res.data
        addSlot(newArr)
        if (newArr[0].children.length > 0) {
          this.treeData = newArr
          this.selectNode = newArr[0]
          this.empty = false
        } else {
          this.treeData = []
          this.selectNode = null
          this.empty = true
        }
        this.expandedKeys = [newArr[0].id] // 默认展开顶结点
        this.defaultselectedkey = this.selectedkey
      })
    },

    // 展开/收起节点时触发
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },

    // 树形控件选中时通知父组件，父组件根据选中的业务类型筛选数据
    onSelect(selectedKeys, info) {
      this.selectedkey = selectedKeys
      this.selectNode = info.node.dataRef
      this.$emit('treeSelectd', info, this.dataType)
      this.$emit('treeSelectValue', info, this.dataType)
    },
    // 小箭头点击事件
    foldClick() {
      this.fold = !this.fold
      if (this.fold) {
        this.icontype = 'right'
      } else {
        this.icontype = 'left'
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.spin {
  width: 100%;
  line-height: 30;
}

.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>