cashier-web/src/components/FastMenuConfig/index.vue

<template>
  <div class="container">
    <div class="table-box">
      <div class="row mb-sm">
        <el-button type="primary" @click="showAdd = true">添加</el-button>
      </div>
      <el-table
        :data="tableData.list"
        v-loading="tableData.loading"
        stripe
        border
        row-key="id"
        :tree-props="{ children: 'children' }"
        default-expand-all
        style="width: 100%"
      >
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="菜单名称" prop="isEnable">
          <template #default="scope">
            {{ returnMenuName(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column label="启用状态" prop="isEnable">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              @change="isEnableChange($event, scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="排序值" prop="sort"></el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button link type="primary" @click="editMenu(scope.row)">编辑</el-button>
            <el-popconfirm title="确认要删除吗？" @confirm="deleteHandle(scope.row)">
              <template #reference>
                <el-button type="danger" link>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <dialogAdd
      v-model="showAdd"
      :parMenus="menus"
      @success="Refresh()"
      :item="nowEditMenu"
    ></dialogAdd>
  </div>
</template>

<script setup>
import { useQuickStore, usePermissionStore } from "@/store";
const quickStore = useQuickStore();

import { ref, reactive, onMounted, toRaw } from "vue";
import MenuAPI from "@/api/account/menu";

import quickApi from "@/api/account/quick";

import dialogAdd from "./dialog-add.vue";

const showAdd = ref(false);

const nowEditMenu = ref(null);
function editMenu(item) {
  nowEditMenu.value = { ...item };
  showAdd.value = true;
}
const tableData = reactive({
  loading: false,
  page: 1,
  size: 10,
  total: 0,
  list: [],
});

function Refresh() {
  quickStore.getQuickMenus();
  getList();
}
function getList() {
  tableData.loading = true;
  quickApi
    .getList({
      page: tableData.page,
      size: tableData.size,
      isEdit: 1,
    })
    .then((res) => {
      tableData.list = res;
      tableData.total = res.length;
    })
    .finally(() => {
      tableData.loading = false;
    });
}

const menus = ref([]);
async function getMenus() {
  const res = await MenuAPI.getRoutes();
  menus.value = res;
  console.log("menus", res);
}
const menusIdMap = computed(() => {
  const map = getMenuMap();
  console.log("map", map);

  return map;
});
function returnMenuName(item) {
  const menu = menusIdMap.value.get(`${item.menuId}`);
  console.log("menuId", item.menuId);
  console.log("menu", menu);

  return menu ? menu.title : "";
}
function getMenuMap() {
  // 初始化Map
  const map = new Map();

  // 定义递归函数处理菜单节点
  function processMenuNode(menuNode) {
    // 将当前节点存入Map
    map.set(menuNode.menuId, menuNode);

    // 如果有子节点且子节点数组不为空，则递归处理每个子节点
    if (menuNode.children && Array.isArray(menuNode.children) && menuNode.children.length > 0) {
      menuNode.children.forEach((childNode) => {
        processMenuNode(childNode);
      });
    }
  }

  // 遍历根级菜单，逐个处理
  if (menus.value && Array.isArray(menus.value)) {
    menus.value.forEach((rootMenu) => {
      processMenuNode(rootMenu);
    });
  }

  return map;
}
function isEnableChange(value, item) {
  quickApi
    .edit({
      ...item,
      status: value,
    })
    .then((res) => {
      ElMessage({
        message: "修改成功",
        type: "success",
      });
      Refresh();
    });
}
function deleteHandle(item) {
  quickApi.delete([item.id]).then(() => {
    Refresh();
  });
}
onMounted(async () => {
  await getMenus();
  getList();
});
</script>
<style lang="scss" scoped>
.container {
  padding: 14px;
  width: 100%;
  .table-box {
    border-radius: 8px;
    background-color: #fff;
    padding: 14px;
  }
}
</style>