hyyfClient/src/views/SystemAdmin/MenuAdmin.vue

<template>
  <div class="box">
    <div>
      <div style="margin-bottom: 10px">
        <el-button type="primary" v-if="hasPerm('menu:add')"  @click="addMenu">添加菜单</el-button>
      </div>
      <div>
        <el-table
            :data="tableData"
            border
            row-key="id"
            :height="800 + 'px'"
            :tree-props="{children: 'children'}"
            default-expand-all>
          <el-table-column prop="title" label="菜单名称"></el-table-column>
          <el-table-column
              prop="weight"
              label="菜单层级"
              :filters="[{ text: '菜单', value: 0 }, { text: '按钮', value: 1 }]"
              :filter-method="filterTag">
            <template slot-scope="scope">
              <el-tag
                  :type="scope.row.weight === 0 ? 'primary' : 'success'"
                  disable-transitions>{{scope.row.weight === 0 ? '菜单' : '按钮'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="url" label="菜单路由"></el-table-column>
          <!--          <el-table-column prop="remark" label="备注"></el-table-column>-->
          <el-table-column
              label="操作"
              fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="info" v-if="hasPerm('menu:edit')" @click="setEdit(scope.row)" style="margin-right: 10px">编辑</el-button>
<!--              <el-button size="mini" type="primary" style="margin-right: 10px" @click="addChildren(scope.row, scope.$index)">添加子菜单</el-button>-->
              <el-popconfirm
                  :title="scope.row.parentId === 0 ? '这是父菜单，删除后，子菜单将不复存在！确定要删除这个菜单吗' : '确定要删除这个菜单吗？'"
                  @confirm="del(scope.row)"
              >
                <el-button size="mini" slot="reference" v-if="hasPerm('menu:del')" type="danger">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <a-modal
        :title="showType ? '编辑菜单' : '新增菜单'"
        :width="600"
        :visible="dialogFormVisible"
        @ok="add('ruleForm')"
        @cancel="reset"
        :destroyOnClose="true"
    >
      <el-form :model="form" :rules="rules"  ref="ruleForm">
        <el-form-item  prop="weight" size="mini" label="菜单层级:" :label-width="formLabelWidth">
          <el-radio-group v-model="form.weight">
            <el-radio :label="0">菜单</el-radio>
            <el-radio :label="1">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item  size="mini" label="菜单名称" :label-width="formLabelWidth" prop="title">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item size="mini" label="父级菜单" :label-width="formLabelWidth">
          <a-tree-select
              v-model="form.parentId"
              style="width: 100%"
              :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
              :treeData="menuTreeData"
              placeholder="请选择父级菜单"
              treeDefaultExpandAll
          >
            <span slot="title" slot-scope="{ id }">{{ id }}
            </span>
          </a-tree-select>
        </el-form-item>
        <el-form-item  size="mini" v-if="form.weight === 0" label="菜单地址" :label-width="formLabelWidth">
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item size="mini" v-else label="权限标识" :label-width="formLabelWidth" prop="permission">
          <el-input v-model="form.permission" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item size="mini" label="排序" :label-width="formLabelWidth">
          <el-input v-model="form.sort" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
    </a-modal>
  </div>
</template>

<script>
import { TreeSelect } from 'ant-design-vue'
import {  addMenu, editMenu, delMenu, getUserMenu } from '../../utils/api'
export default {
  name: "MenuAdmin",
  components: {
    // AModal: Modal,
    // AForm: Form,
    ATreeSelect: TreeSelect
  },
  data() {
    return {
      tableData: [],
      showType: false,
      dialogFormVisible: false,
      form: {
        title: '',
        parentId: '',
        url: '',
        id: '',
        sort: '',
        weight: 0,
        permission: '',
      },
      formLabelWidth: '90px',
      rules: {
        title: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
        ],
        weight: [
          { required: true, message: '请选择菜单层级', trigger: 'change' }
        ],
        menu: [
          { required: true, message: '请选择父级菜单', trigger: 'change' }
        ],
        permission: [
          { required: true, message: '请输入权限标识', trigger: 'blur' }
        ]
      },
      menuTreeData: [],
    }
  },
  methods: {
    // 拿到parentId
    getParentId(val) {
      this.form.parentId = val;
    },
    // 过滤
    filterTag(value, row) {
      return row.weight === value;
    },
    add(formName) {
      this.$refs[formName].validate((valid) => {
        if(valid) {
          if(this.showType) {
            this.setUpdate();
          } else {
            let params = {
              parentId: this.form.parentId,
              title: this.form.title,
              url: this.form.url,
              sort: this.form.sort,
              weight: this.form.weight,
              permission: this.form.permission,
            }
            addMenu(params)
                .then(res => {
                  if(res.code === 10000) {
                    this.init();
                    this.reset();
                    this.$message.success(res.message);
                  }
                  this.dialogFormVisible = false;
                })
          }
        } else {
          return false;
        }
      })
      this.dialogFormVisible = false;
    },
    setEdit(data) {
      this.showType = true;
      this.dialogFormVisible = true;
      this.form.id = data.id;
      this.form.title = data.title;
      this.form.url = data.url;
      this.form.parentId = data.parentId;
      this.form.sort = data.sort;
      this.form.permission = data.permission;
      this.form.weight = data.weight;
    },
    addMenu() {
      this.dialogFormVisible = true;
    },
    del(data) {
      delMenu({menuId: data.id})
          .then(res => {
            if(res.code === 10000) {
              this.init();
              this.$message.success(res.message);
            }
          })
    },
    setUpdate() {
      let params = {
        id: this.form.id,
        url: this.form.url,
        title: this.form.title,
        parentId: this.form.parentId,
        sort: this.form.sort,
        permission: this.form.permission,
        weight: this.form.weight,
      };
      editMenu(params)
          .then(res => {
            if(res.code === 10000) {
              this.init();
              this.reset();
              this.$message.success(res.message);
            }
            this.dialogFormVisible = false;
          })
    },
    // 重置
    reset() {
      this.form.title = '';
      this.form.parentId = '';
      this.form.url = '';
      this.form.id = '';
      this.form.sort = '';
      this.form.weight = 0;
      this.form.permission = '';
      this.showType = false;
      this.dialogFormVisible = false
    },
    init() {
      // getMenu()
      //     .then(res => {
      //       if(res.code === 10000) {
      //         // this.tableData = res.data;
      //         // console.log(res.data)
      //       }
      //     })
      
      let params = {
        userId: localStorage.getItem('UserId')
      }
      getUserMenu(params).then(res => {
        if(res.code === 10000) {
          this.tableData = res.data;
          this.menuTreeData = [
            {
              id: -1,
              parentId: 0,
              title: '顶级',
              value: 0,
              pid: 0,
              weight: 0,
              children: res.data,
            }
          ]
        }
      })
      // getMenuList().then(res => {
      //   if(res.code === 10000) {
      //     // this.menuTreeData = [
      //     //   {
      //     //     id: -1,
      //     //     parentId: 0,
      //     //     title: '顶级',
      //     //     value: 0,
      //     //     pid: 0,
      //     //     weight: 0,
      //     //     children: res.data,
      //     //   }
      //     // ]
      //     // console.log(res)
      //   }
      // })
    }
  },
  mounted() {
    this.init();
  }
}
</script>

<style scoped>
  .box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
  }
</style>