dz2.1/src/views/applicationPage/index.vue

<template>
  <div class="permissionPage">
    <PublicPageHeader class="permissionPage_head" :page-title="pageTitle" />
    <div class="permissionPage_content flex">
      <div class="permissionPage_content_left">
        <PublicPageTree :tree-data="treeData" :dep-math="depMath" @treeNodeClick="treeNodeClick" />
      </div>
      <div class="permissionPage_content_right">
        <PublicPageTable :list-map="listMap" :tree-map="treeNodeMap" />
      </div>
    </div>
  </div>
</template>

<script>
import PublicPageHeader from '@/components/PublicPageHeader'
import PublicPageTable from './components/permissionList.vue'
import PublicPageTree from './components/permissionTree.vue'
import { mapGetters } from 'vuex'
export default {
  name: 'Permissionpage',
  components: { PublicPageHeader, PublicPageTable, PublicPageTree, },
  data () {
    return {
      treeData: [], //tree数据
      treeParameters: {}, //tree传递参数
      treeNodeMap: {}, //tree传递map
      depMath: 0,
      listMap: {},
      pageTitle: '权限配置'
    }
  },
  computed: {
    ...mapGetters(['authArrs']),
  },
  mounted () {
    this.pageInit()
  },
  methods: {
    //页面初始化
    pageInit () {
      //获取页面查询参数
      const { query } = this.$route
      this.pageQuery = query
      //获取页面配置
      const { pagecode, qid, auth_id } = this.$route.meta
      //获取页面权限类型组件  pagetype 1模块  2页面  3按钮 4表格 5树形  6弹窗
      const pageAuths = this.authArrs
      if (!pageAuths.length) return
      //获取当前页面权限类型
      const pageAuthArrs = pageAuths.filter(item => item['superiorid'] == auth_id)
      if (!pageAuthArrs.length) return
      //获取tree权限
      const pageAuthtrees = pageAuthArrs.filter(item => item.pagetype == 'tree')
      if (pageAuthtrees?.length) this.getPageTreeSetting(pageAuthtrees)
      //获取table权限
      const pageAuthtables = pageAuthArrs.filter(item => item.pagetype == 'table')
      if (pageAuthtrees?.length) this.treeNodeMap = pageAuthtables[0]
    },
    //根据页面tree设置数据
    getPageTreeSetting (pageAuthtrees) {
      this.treeData = pageAuthtrees
    },
    //获取tree点击
    treeNodeClick (data) {
      this.listMap = data
    },
  }
}
</script>

<style lang="scss" scoped>
.permissionPage {
  height: calc(100vh - 90px);
  padding: 20px;
  &_content {
    margin-top: 20px;
    height: calc(100vh - 190px);
    &_left {
      width: 360px;
      margin-right: 20px;
      height: 100%;
    }
    &_right {
      width: calc(100% - 380px);
      height: 100%;
      background-color: #fff;
      padding: 20px;
    }
  }
}
</style>