diantou/src_product/iam/audit/matters/template/audit-matters-template-tree.vue

<template>
  <a-empty v-if="empty" />
  <a-tree
    v-else
    :key="refreshKey"
    ref="auditMattersTemplateTree"
    v-model="checkedKeys"
    :block-node="false"
    :show-icon="true"
    :show-line="true"
    :check-strictly="true"
    :checkable="false"
    :draggable="draggable"
    :tree-data="treeData"
    :replace-fields="replaceFields"
    :selected-keys="defaultSelectedKeys"
    default-expand-all
    :default-expanded-keys="defaultTreeExpandedKeys"
    :load-data="onLoadData"
    @select="treeSelect"
    @check="treeCheck"
    @expand="onExpand"
  >
    <!-- 如果已配置负责人，则展示用户图标 -->
    <template slot="showMatters" slot-scope="item">
      <a-icon type="file-ppt" @click="showMatters(item)" />
    </template>
  </a-tree>
</template>

<script>
import auditMattersTreeService from './audit-matters-tree-service'
import components from './_import-components/audit-matters-template-tree-import'

export default {
  name: 'AuditMattersTemplateTree',
  metaInfo: {
    title: 'AuditMattersTemplateTree',
  },
  components,
  props: {
    // 默认选中节点
    selectedKeys: {
      type: Array,
      default: function() {
        return []
      },
    },

    // 是否显示复选框
    checkable: {
      type: Boolean,
      default: true,
    },
    // 是否可以拖拽
    draggable: {
      type: Boolean,
      default: false,
    },
    // 是否显示连线
    showLine: {
      type: Boolean,
      default: false,
    },
    // 根节点名称
    topNodeText: {
      type: String,
      default: '根节点',
    },
    // 默认展开节点id
    defaultExpandedKeys: {
      type: Array,
      default: () => {
        return ['0']
      },
    },

    // 是否显示隐藏按钮
    showPrimary: {
      type: Boolean,
      default: true,
    },
    // 地址树是否单选
    single: {
      type: Boolean,
      default: false,
    },
    refreshKey: {
      type: Number,
      default: 0,
    },
    templateId: {
      type: Number,
      default: 0,
    },
    defaultTreeData: {
      type: Array,
      default: () => {
        return null
      },
    },
    treeDataType: {
      type: String,
      default: '',
    },
    newtree: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      treeData: [],
      defaultTreeExpandedKeys: ['0'],
      defaultSelectedKeys: ['0'],
      checkedKeys: [], // 选中的节点数据
      dataList: [], // 数组dataList，搜索要用
      spinning: true,
      empty: false,
      icontype: 'left',
      fold: false,
      replaceFields: {
        title: 'text',
        key: 'id',
      },
      expandedKeys: ['0'],
      backupsExpandedKeys: [],
      autoExpandParent: false,
      defaultTopNodeText: '根节点',
      defaultTopNodeId: '0',
      key: 0,
    }
  },
  created() {
    // 如果有默认展开节点，则赋值
    if (this.defaultExpandedKeys) {
      this.defaultTreeExpandedKeys = [...this.defaultExpandedKeys]
    }
    // 如果有传根节点名称，则赋值
    if (this.topNodeText) {
      this.defaultTopNodeText = this.topNodeText
    }
    // 如果有传默认选中节点，则赋值
    if (this.selectedKeys.length > 0) {
      this.defaultSelectedKeys = [...this.selectedKeys]
    }
    if (this.defaultTreeData.length > 0) {
      this.defaultTreeExpandedKeys = [this.defaultTreeData[0].id]
      this.treeData = this.defaultTreeData
    } else {
      this.initTreeData()
    }
  },
  methods: {
    setIsItem(data) {
      for (let i = 0; i < data.length; i++) {
        const node = data[i]
        const props = node.props
        // 用来判断此几点是否已经配置了用户，需要后台返回标识位进行判断
        if (props && props.isItem) {
          data[i].scopedSlots.icon = 'showMatters'
        }
        if (props.disabled) {
          data[i].disabled = true
        } else {
          data[i].disabled = false
        }
        if (node.children) {
          this.setIsItem(node.children)
        }
      }
    },
    /**
     * 显示事项
     */
    showMatters(item) {
      this.$emit('showMatters', item)
    },
    /***
     * 选中复选框时的事件
     */
    treeCheck(allKeys, echecked) {
      if (this.single) {
        this.checkedKeys.checked = []
        this.checkedKeys.checked = [echecked.node.dataRef.id]
      }
    },
    // 点击树
    treeSelect(selectedKeys, info) {
      this.defaultSelectedKeys = [info.node.dataRef.id]
      this.$emit('treeSelect', info)
    },

    onExpand(expandedKeys) {
      // 用户点击展开时，取消自动展开效果
      this.expandedKeys = expandedKeys
      // this.autoExpandParent = false
    },
    transformData(data) {
      return data.map((d) => {
        const { children, ...rest } = d
        return {
          ...rest,
          children: children && this.transformData(children),
          scopedSlots: { title: 'title' },
        }
      })
    },
    // 点击地址树展开时调用
    onLoadData(treeNode) {
      if (!this.newtree) {
        return
      }
      const id = parseInt(treeNode.dataRef.id)
      return auditMattersTreeService
        .findIamAuditMattersTree(this.templateId, id, this.treeDataType)
        .then((res) => {
          treeNode.dataRef.children = res.data
          this.treeData = this.transformData([...this.treeData])
          this.setIsItem(this.treeData)
        })
    },
    // 初始化地址树
    // 初始化地址树
    initTreeData() {
      this.spinning = false
      if (this.treeData.length) {
        this.treeData = this.transformData(this.treeData)
        this.setIsItem(this.treeData)
        this.expandedKeys = this.defaultTreeExpandedKeys
        this.empty = false
      } else {
        this.empty = true
      }
    },

    // 刷新树方法
    refreshTree() {
      this.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;
    }
  }
}
// 单选样式
.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>