tnbapp/src/views/devops/rbac/Menu.vue

<template>
  <el-container>
    <el-header>
      <h3>资源目录树</h3>
    </el-header>
    <el-main>
      <el-col :md="12">
        <div style="height: 70vh;">
          <el-scrollbar ref="myScrollbar" style="width: 100%; height: 100%;">
            <el-card class="box-card" :body-style="{ paddingTop: '5px' }">
              <div class="text item">
                <el-tree
                  :default-expand-all="true"
                  :data="treeNode"
                  :props="defaultProps"
                  highlight-current
                  @node-click="handleNodeClick"
                >
                  <span slot-scope="{ node, data }">
                    <span :class="data.icon">
                      <span style="color: blue">{{ node.label }}({{ data.children.length }}) </span>
                      <span style="color: green">{{ data.url }} </span>
                      <span style="color: red">{{ data.type }}</span>
                    </span>
                  </span>
                </el-tree>
              </div>
            </el-card>
          </el-scrollbar>
        </div>
      </el-col>
    </el-main>

    <el-dialog
      title="编辑资源"
      append-to-body
      :visible.sync="showEditScopeDialog"
      center
    >
      <el-form :model="menuForm" label-width="80px">
        <el-input v-model="menuForm.id" type="hidden" style="width: 70%; padding-right: 2px" />
        <el-form-item label="名字" style="width: 70%; padding-right: 2px">
          <el-input v-model="menuForm.name" style="width: 70%; padding-right: 2px" readonly />
        </el-form-item>
        <el-form-item label="URL" style="width: 70%; padding-right: 2px">
          <el-input v-model="menuForm.url" style="width: 70%; padding-right: 2px" readonly />
        </el-form-item>
        <el-form-item label="类型" style="width: 70%; padding-right: 2px">
          <el-input v-model="menuForm.type" style="width: 70%; padding-right: 2px" readonly />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onEdit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
import { getMenuList } from '@/api/devops'

export default {
  name: 'Menu',
  data() {
    return {
      treeNode: [],
      defaultProps: {
        children: 'children',
        label: 'label',
        value: 'value'
      },
      // **********************************************************************
      showEditScopeDialog: false,
      menuForm: {
        id: '',
        name: ''
      }
    }
  },
  created() {
    document.title = '资源目录树'
    this.getData()
  },
  methods: {
    handleCurrentChange(pageNumber) {
      this.currentPage = pageNumber
      this.getData()
      // 回到顶部
      scrollTo(0, 0)
    },
    getData() {
      this.dataList = []
      getMenuList().then(resp => {
        if (resp.code === 0) {
          this.treeNode = resp.data
        } else {
          this.$message.error(resp.msg)
        }
      }).catch(error => {
        this.$message.error(error.message)
      })
    },
    handleNodeClick(data) {
      this.menuForm = data
      this.showEditScopeDialog = true
    },
    onEdit() {
      this.$message.info('on edit')
      this.showEditScopeDialog = false
    }
  }
}
</script>

<style>
</style>