rax-medical/src/views/permissions-manage/menu-manage.vue

<template>
  <div class="table-page">
    <div class="search-part" v-show="isSearch">
      <div class="search-cell">
        <span class="label">菜单名称</span>
        <el-input v-model="queryParams" placeholder="请输入菜单名称"></el-input>
      </div>
      <el-button type="primary" icon="Search" @click="searchList">查询</el-button>
      <el-button icon="Refresh" @click="resetSearch">重置</el-button>
    </div>
    <div class="button-part" style="justify-content: space-between;">
      <div>
        <el-button type="primary" icon="FirstAidKit" @click="addData()">新增</el-button>
        <el-button @click="expandTable">展开/折叠</el-button>
      </div>
      <TableAbility :isDownload="false" @searchBtn="isSearch = !isSearch" @refreshBtn="initData()"></TableAbility>
    </div>
    <div class="table-part">
      <el-table ref="tableRef" :data="tableData" row-key="id" height="100%" border show-overflow-tooltip
                @row-click="tableRowClick">
        <el-table-column property="name" label="菜单名称" width="180" align="center"/>
        <el-table-column label="图标" width="80" align="center">
          <template #default="scope"><i class="main-color f20" :class="scope.row.meta.icon"></i></template>
        </el-table-column>
        <el-table-column property="path" label="路由" width="260" align="center"/>
        <el-table-column label="类型" width="180" align="center">
          <template #default="scope">
            <span>{{ scope.row.menuType == 0 ? "菜单" : "按钮" }}</span>
          </template>
        </el-table-column>
        <el-table-column property="sortOrder" label="排序" width="80" align="center"/>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <div @click.stop>
              <el-button link icon="EditPen" v-if="scope.row.menuType == 0" @click="addData(scope.row)">
                新建下级
              </el-button>
              <el-button link icon="EditPen" @click="editData(scope.row)">修改</el-button>
              <el-button link icon="Delete" @click="removeData(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <el-dialog v-model="isFormDialog" :title="formDialogTitle" width="30%">
    <MenuForm ref="menuFormRef" :type="formDialogTitle === '添加' ? 'add' : 'edit'"
              @save-or-update-event="formSaveUpdateEvent" @close="isFormDialog = false"/>
  </el-dialog>
</template>

<script lang='ts' setup>
import {onMounted, ref} from 'vue'
import MenuForm from './form/menu-form.vue'
import * as menuApi from "@/api/menu";
import {ElMessage, ElMessageBox} from "element-plus";

let isExpand = false // 表格展开状态
const tableRef = ref()
const menuFormRef = ref()
const isSearch = ref(true)
const loading = ref(true)
const isFormDialog = ref(false)
const formDialogTitle = ref('')
const queryParams = ref('')
const tableData = ref([] as any)
const tableMap: any = {};

onMounted(() => {
  initData();
})

function initData() {
  loading.value = true;
  tableData.value = [];
  getMenuTree();
}

function searchList() {
  loading.value = true;
  tableData.value = [];
  getMenuTree(queryParams.value)
}

function resetSearch() {
  queryParams.value = '';
  initData();
}

function getMenuTree(name?: string) {
  menuApi.getMenuTree(name).then((res: any) => {
    tableData.value = res.data ? res.data : [];
    initTableMap(tableData.value);
  })
}

function initTableMap(data: any) {
  data.forEach((row: any, i: number) => {
    handleInitTree(row, i, []);
  });
}

function handleInitTree(row: any, i: number, pArr: any) {
  // 当前序列
  const cArr: any = [].concat(pArr);
  cArr.push(i);

  tableMap[row.id] = cArr;
  row.indexArr = cArr;
  if (row.children) {
    row.children.forEach((row: any, i: number) => {
      handleInitTree(row, i, cArr);
    })
  }
}


const addData = (menu?: any) => {
  isFormDialog.value = true
  formDialogTitle.value = '添加'
  setTimeout(() => {
    menuFormRef.value.resetData(menu)
  }, 0)
}
const expandTable = () => {
  isExpand = !isExpand
  tableData.value.forEach((row: any) => {
    tableRef.value.toggleRowExpansion(row, isExpand)
  })
}
const removeData = (e?: any) => {
  ElMessageBox.confirm(
      '是否删除？',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true
      }
  ).then(() => {
    menuApi.deleteById(e.id).then((res: any) => {
      if (res.code == 0) {
        ElMessage.success("删除成功");
        initData();
      } else {
        ElMessage.error(res.msg ? res.msg : "删除失败");
      }
    })
  }).catch(() => {
  })
}
const editData = (e: any) => {
  isFormDialog.value = true
  formDialogTitle.value = '修改'
  setTimeout(() => {
    menuFormRef.value.resetData(null, JSON.parse(JSON.stringify(e)))
  }, 0)
}
const tableRowClick = (row: any) => {
  tableRef.value.toggleRowExpansion(row)
}

function formSaveUpdateEvent() {
  isFormDialog.value = false;
  initData();
}

</script>

<style lang='scss' scoped></style>