fpsys/src/views/base/menu.vue

<template>
  <div class="app-container">
    <!-- <el-tree :data="curData" :props="defaultProps"></el-tree> -->
    <!-- default-expand-all -->
    <el-tree
      :data="curData"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.data.name }} --  {{pTypeObj[node.data.perm_type]}} ----{{node.data.path}} ---- --  {{mhObj[node.data.menu_hidden]}}/{{psObj[node.data.perm_status]}} ----{{node.data.sort}}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => editMenu(data)">
            编辑
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => appendMenu(data)">
            添加
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => removeMenu(node, data)">
            删除
          </el-button>
        </span>
      </span>
    </el-tree>
    <popup-edit
      :isShow="isPopupShow"
      :curObj="curObj"
      :curType="curType"
      @close="closePopup"
    />
  </div>
</template>
<script>
import { arrToObj } from '@/utils'
import SearchForm from './components/searchForm/Dict'
import PopupEdit from './components/popup/MenuEdit'
import baseTable from '_m/baseTable.js'
export default {
  name: 'basePublicDictSys',
  components: {
    SearchForm,
    PopupEdit
  },
  provide () {
    return {
      parentData: this
    }
  },
  mixins: [baseTable],
  created () {},
  data () {
    const pTypeObj = arrToObj(this.$dictData.perm_type)
    const mhObj = arrToObj(this.$dictData.show_hidden)
    const psObj = arrToObj(this.$dictData.perm_status)
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      curData: [],
      isPopupShow: false,
      curObj: {},
      curType: '',
      pTypeObj,
      mhObj,
      psObj,
    }
  },
  mounted () {
    this.getMenu()
  },
  methods: {
    getMenu () {
      this.$api.base.admpermissionslist().then(res => {
        let curData = res || []
        this.curData = [...this.formatData(curData)]
      })
    },
    formatData (arr, ids) {
      let newArr = []
      const curArr = JSON.parse(JSON.stringify(arr))
      curArr.forEach(item => {
        let obj = {...item}
        if (item.perm_type === '2' || item.perm_type === '1') {}
        obj.label = item.name
        obj.value = item.id
        obj.ids = ids ? [...ids, item.id] : [item.id]
        if (item.children && item.children.length > 0) {
          obj.children = this.formatData(item.children, obj.ids)
        }
        if (obj.children && obj.children.length === 0) delete obj.children
        newArr.push(obj)
      })
      return newArr
    },
    editMenu (row) {
      this.openPopup(row, 'edit')
    },
    appendMenu (row) {
      this.openPopup(row, 'add')
    },
    removeMenu (node, row) {
      const msgHtml = `确定要删除吗？`
      this.$msg(msgHtml, 'confirm', ()=> {
        this.$api.base.admpermissionsdel({
          id: row.id,
        }).then(data => {
          this.$msgs(`删除成功！`)
          this.getMenu()
        })
      }, null, true)
    },
    openPopup (row, type) {
      this.curObj = row
      this.curType = type
      this.isPopupShow = true
    },
    closePopup (obj) {
      this.isPopupShow = false
      if (obj) {
        this.getMenu()
      }
    }
  }
}
</script>