dz2.1/src/views/applicationPage/components/permissionTree.vue

<template>
  <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="publicPageTree">
    <div class="publicPageTree_search">
      <el-input size="small" placeholder="输入关键字进行过滤" clearable v-model="filterText"></el-input>
    </div>
    <div class="publicPageTree_tree">
      <el-scrollbar style="height: 100%" :horizontal="false">
        <el-tree class="filter-tree" :data="data" :props="defaultProps" node-key="applicationid" :default-expanded-keys="defaultKeys" :highlight-current="true" :filter-node-method="filterNode" ref="tree" @node-click="treeNodeClick" />
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { Query } from "@/api/webApi"
import { listToTree } from '@/utils/validate'

export default {
  name: 'PublicPageTree',
  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    treeMap: {
      type: Object,
      default: () => new Object()
    },
    depMath: {
      type: Number | String,
      default: 0
    }
  },
  data () {
    return {
      loading: false,
      filterText: '',
      data: [],
      defaultProps: {
        children: 'children',
        label: 'appname'
      },
      defaultKeys: [-1],
      nodeKey: 'applicationid',
      msgCaps: [],
      dataKey: 'appname'
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val);
    },
    treeData: {
      handler (arr) {
        if (arr.length) {
          this.pageInit(arr)
        }
      },
      deep: true,
      immediate: true
    },
    depMath: {
      handler (arr) {
        this.pageInit(arr)
      },
      deep: true
    }
  },
  methods: {
    filterNode (value, data) {
      if (!value) return true;
      return data[this.dataKey].indexOf(value) !== -1;
    },
    pageInit (arr) {
      const { serviceid, pagename } = arr[0]
      const defaultfilterTag = { 1: 1 }
      this.queryTreeData(defaultfilterTag, serviceid, pagename)
    },
    treeNodeClick (data) {
      this.$emit('treeNodeClick', data)
    },
    setUserTree (arr = []) {
      //1=用户 2=用户组
      if (!arr.length) return []
      const ndata = _.cloneDeep(arr)
      const ntree = listToTree(ndata, 'supergroupid', 'id')
      return ntree
    },
    async queryTreeData (defaultfilter, serviceid, pagename) {
      this.loading = true;
      const datacontent = { filter: defaultfilter }
      try {
        const { code, returnData } = await Query({
          serviceid,
          datacontent,
          event: '0',
          page: 1,
          size: 9999,
        });
        if (code == 0 && returnData?.length) {
          const name = '全部'
          // const treeMenu = this.setUserTree([...returnData])
          const treeObj = { serviceid: name, superiorid: name, children: [...returnData] }
          treeObj['appname'] = name
          treeObj['applicationid'] = '-1'
          const treeMenuAll = [treeObj]
          this.defaultKeys = ['-1']
          this.data = treeMenuAll
        } else {
          this.$message.error(`获取${pagename}数据失败`);
        }
      } catch (error) {
        this.$message.error(`获取${pagename}数据失败`);
      }
      this.loading = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.publicPageTree {
  background-color: #fff;
  padding: 20px;
  height: 100%;
  width: 100%;
  ::v-deep &_tree {
    margin-top: 20px;
    height: calc(100% - 52px);
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .is-horizontal {
      display: none;
    }
  }
}
</style>