web_dist/src/views/settings/menu-settings/MenuSettings.vue

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {deleteMenuSettings, getMenuSettings, IntergrationMenu} from "@/api/settings/menu-settings";
import {ElButton, ElButtonGroup} from "element-plus";
import Dialog from "@/views/settings/menu-settings/dialog.vue";
import {CyMessageBox} from "@/components/cy/message-box";
import {useCompRef} from "@/utils/useCompRef";

const menuTreeData = ref<IntergrationMenu[]>([])
const dialogRef = useCompRef(Dialog)

function modify(row) {
  dialogRef.value!.openDialog(row)
}

async function loadingData() {
  menuTreeData.value = await getMenuSettings()
}

async function delById(id: number) {
  await CyMessageBox.confirm({
    message: "是否删除页面",
    type: "delete",
  })
  await deleteMenuSettings(id);
  loadingData();
}

function addRouterClick(row: IntergrationMenu | null = null) {
  let cascaders = []
  if (row !== null) {
    if (row.parentId === null) {
      cascaders = [row.id];
    } else {
      if (row.type === 1) {
        cascaders = [...row.cascaders, row.id];
      } else {
        cascaders = [...row.cascaders];
      }
    }
  }

  // @ts-ignore
  dialogRef.value!.openDialog({
    cascaders: cascaders,
    children: [],
    completePath: "",
    component: "",
    icon: "",
    id: null,
    mainCard: false,
    mainOverflowAuto: false,
    metaHideTabs: false,
    metaPassRule: false,
    metaShowMenu: false,
    metaTitle: "",
    name: "",
    parentId: row?.id,
    path: "",
    pathParams: "",
    redirect: "",
    sort: 0,
    type: 0
  });
}

onMounted(() => {
  loadingData()
})
</script>

<template>
  <vxe-table
      border="inner"
      height="auto"
      show-overflow
      :row-config="{isHover: true, useKey: true}"
      :column-config="{resizable: true}"
      :tree-config="{  rowField: 'id', parentField: 'parentId', showLine: true}"
      :data="menuTreeData">
    <vxe-column field="metaTitle" title="标题" tree-node>
      <template #default="{row}">
        <span :class="row.icon"></span>
        {{ row.metaTitle }}
      </template>
    </vxe-column>
    <vxe-column field="path" title="路径"></vxe-column>
    <vxe-column field="component" title="组件路径"></vxe-column>
    <vxe-column title="操作" fixed="right" width="220">
      <template #header>
        <el-button
            type="primary"
            @click="addRouterClick()"
        >
          新增
        </el-button>
      </template>
      <template #default="{row}">
        <el-button-group>
          <el-button text type="primary" @click="addRouterClick(row)">新增</el-button>
          <el-button text type="primary" @click="modify(row)">修改</el-button>
          <el-button text type="primary" @click="delById(row.id)">删除</el-button>
        </el-button-group>
      </template>
    </vxe-column>
  </vxe-table>
  <Dialog :cascaderData="menuTreeData"
          @saveCallback="loadingData()"
          ref="dialogRef"/>
</template>

<style lang="scss">
.no_el-table {
  .cell {
    padding: 0 16px;
    color: black;
  }

  .el-table__cell {
    padding: 12px 0;
  }
}
</style>