diantou/src_product/iam/audit/dataUphold/audit-class-tree.vue

<template>
  <a-card :class="[$style.treewrap, $style.ywlxtree]" style="width: calc(100% - 20px);">
    <!-- 选择部门 -->
    <!-- <a-select v-model="depvalue" :options="depOptions" @change="changedep"> </a-select> -->
    <!-- <a-empty v-if="empty" /> -->
    <a-tree
      :key="key"
      ref="auditMaintainCatalogTree"
      v-model="checkedKeys"
      :block-node="false"
      :show-icon="true"
      :show-line="showLine"
      :check-strictly="true"
      :checkable="false"
      :draggable="draggable"
      :tree-data="treeData"
      :replace-fields="replaceFields"
      :selected-keys="defaultSelectedKeys"
      :expanded-keys="expandedKeys"
      :default-expanded-keys="defaultTreeExpandedKeys"
      @select="treeSelect"
      @expand="onExpand"
    >
    </a-tree>
  </a-card>
</template>

<script>
import { Message } from 'ant-design-vue'
import dataService from './data-config'
export default {
  name: 'AuditClassTree',
  metaInfo: {
    title: 'AuditClassTree',
  },
  props: {
    // 默认选中节点
    selectedKeys: {
      type: Array,
      default: function() {
        return []
      },
    },
    // 查看模式 manager维护权限 read查看权限
    managerType: {
      type: String,
      default: 'manager',
    },
    // 是否显示复选框
    checkable: {
      type: Boolean,
      default: true,
    },
    // 是否可以拖拽
    draggable: {
      type: Boolean,
      default: false,
    },
    // 是否显示连线
    showLine: {
      type: Boolean,
      default: false,
    },
    // 根节点名称
    topNodeText: {
      type: String,
      default: '根节点',
    },
    // 地址树接口数据源
    treeparams: {
      type: Object,
      default: () => {
        return {}
      },
    },
    // 默认展开节点id
    defaultExpandedKeys: {
      type: Array,
      default: () => {
        return ['0']
      },
    },

    // 是否显示隐藏按钮
    showPrimary: {
      type: Boolean,
      default: true,
    },
    // 地址树是否单选
    single: {
      type: Boolean,
      default: false,
    },
    refreshKey: {
      type: Number,
      default: 0,
    },
    /**
     * 是否展示部门下拉列表
     */
    isSelectDep: {
      type: Boolean,
      default: false,
    },
    cate: {
      type: Boolean,
      default: false,
    },
    isSelect: {
      type: Boolean,
      default: false,
    },
  },
  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,
      newtree: [],
      depOptions: [], // 部门下拉框列表值
      edit: true, // 当前节点是否可编辑
      depvalue: '', // 选择的组织数据
      orgValue: '',
      orgId: null,
    }
  },
  created() {
    // 如果有默认展开节点，则赋值
    if (this.defaultExpandedKeys) {
      this.defaultTreeExpandedKeys = [...this.defaultExpandedKeys]
    }
    // 如果有传根节点名称，则赋值
    if (this.topNodeText) {
      this.defaultTopNodeText = this.topNodeText
    }
    // 如果有传默认选中节点，则赋值
    if (this.selectedKeys.length > 0) {
      this.defaultSelectedKeys = [...this.selectedKeys]
    }
    this.initTreeData()
  },
  methods: {
    onExpand(expandedKeys, { expanded, node }) {
      if (node.dataRef.sort === 1) return
      this.expandedKeys = expandedKeys

      // 根据父节点id 获取子节点内容
      if (expanded && node.dataRef.children.length === 0) {
        dataService.findIamAuditMaintainCategoryTree(node.dataRef.id).then((res) => {
          if (res.data.length > 0) {
            node.dataRef.children = res.data.map((val) => {
              return {
                id: val.id,
                text: val.text,
                isLeaf: false,
                props: {
                  isroot: false,
                  ...val.props,
                },
                slots: { icon: 'meh' },
                children: [],
                sort: 0,
                key: val.id,
              }
            })
            this.setTreeIndexData(node)
          } else {
            this.setTreeIndexData(node)
          }
        })
      }
    },
    // 设置索引数据
    setTreeIndexData(node) {
      const params = {
        columns:
          'sortNum,id,indexName,indexRemark,systemName,indexSource,type,categoryName,categoryId',
        maxResults: 50,
        startPosition: 0,
        expressions: [
          {
            dataType: 'str',
            name: 'categoryId',
            op: 'like',
            stringValue: '%' + node.dataRef.props.categoryId + '%',
          },
        ],
        buttonExpressions: [],
        formId: 'iamSearchCategoryidIndexname',
      }

      dataService.findIndexList(params).then((res2) => {
        const indexList = res2.data.data.map((val) => {
          return {
            id: val.id,
            text: val.indexName,
            isLeaf: true,
            disabled: true,
            props: {
              isroot: false,
            },
            key: val.id,
            sort: 1,
          }
        })
        node.dataRef.children = [...indexList, ...node.dataRef.children]

        // sort为1的排序在前面
        node.dataRef.children.sort((a, b) => {
          return b.sort - a.sort
        })
      })
    },
    // 初始化地址树
    initTreeData() {
      this.treeData = []
      dataService.findIamAuditMaintainCategoryTree(0).then((res) => {
        this.spinning = false
        const treeNode = [
          {
            id: '0',
            text: '全部分类',
            isLeaf: false,
            props: {
              isroot: true,
            },
            slots: { icon: 'meh' },
            children: [],
            key: '0',
            sort: 0,
          },
        ]
        // if (this.isSelect) {
        //   treeNode[0].children = res.data
        //   treeNode[0].children.map((val) => {
        //     dataService.findIamAuditMaintainCategoryTree(val.id).then((res) => {
        //       val.children = res.data
        //       return val
        //     })
        //   })
        // } else {
        treeNode[0].children = res.data.map((val) => {
          return {
            id: val.id,
            text: val.text,
            isLeaf: false,
            props: {
              isroot: false,
              isType: 1,
              ...val.props,
            },
            children: [],
            slots: { icon: 'meh' },
            sort: 0,
            key: val.id,
          }
        })
        // }
        this.expandedKeys = this.defaultTreeExpandedKeys
        this.empty = false
        this.treeData = treeNode
      })
    },
    // 点击树
    treeSelect(selectedKeys, info) {
      if (info.node.dataRef.sort === 1) return
      this.defaultSelectedKeys = selectedKeys
      this.$emit('treeSelect', selectedKeys, info)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.spin {
  // width: 100%;
  line-height: 30;
}
.ywlxtree {
  width: calc(100% - 20px);
  :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%;
  height: 100%;
  min-height: 100%;
  margin-right: $padding-lg;
  overflow-y: 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>