front / rider-admin · Files

<template>
  <div>
    <a-card title="菜单管理" :bordered="false" class="list-table-card">
      <div class="list-toolbar">
        <div class="list-toolbar-left">
          <a-space wrap>
            <a-tag v-if="currentNode">{{ currentNode.menuScope }}</a-tag>
            <a-tag v-if="currentNode" :color="currentNode.visible === 1 ? 'green' : 'default'">{{ currentNode.visible === 1 ? '显示中' : '已隐藏' }}</a-tag>
            <a-tag v-if="currentNode" :color="currentNode.status === 1 ? 'processing' : 'default'">{{ currentNode.status === 1 ? '已启用' : '已停用' }}</a-tag>
          </a-space>
        </div>
        <div class="list-toolbar-right">
          <a-button type="primary" @click="openAddRoot">新增根菜单</a-button>
        </div>
      </div>

      <div class="plan-layout dispatch-layout">
        <div class="plan-sidebar">
          <div class="plan-sidebar-header">
            <div>
              <div class="plan-sidebar-title">菜单树</div>
              <div class="plan-sidebar-subtitle">维护平台和分站菜单结构</div>
            </div>
          </div>
          <a-spin :spinning="loading">
            <a-tree
            v-if="treeData.length"
            class="menu-tree"
            :tree-data="treeData"
            :selected-keys="selectedKeys"
            :field-names="fieldNames"
            block-node
            default-expand-all
            @select="handleSelect"
          >
              <template #title="node">
                <span>{{ node.name }}</span>
                <a-tag style="margin-left: 8px">{{ node.menuScope }}</a-tag>
                <a-tag style="margin-left: 4px" :color="node.visible === 1 ? 'green' : 'default'">{{ node.visible === 1 ? '显' : '隐' }}</a-tag>
                <a-tag style="margin-left: 4px" :color="node.status === 1 ? 'processing' : 'default'">{{ node.status === 1 ? '启' : '停' }}</a-tag>
              </template>
          </a-tree>
            <a-empty v-else description="暂无菜单" />
          </a-spin>
        </div>

        <div class="plan-content">
          <template v-if="currentNode">
            <div class="plan-content-top">
              <div class="soft-note-card plan-note-card">
                <strong>菜单配置说明</strong>
                <p>目录节点可不填路由路径，菜单节点建议绑定前端静态路由。删除前请先清空子节点。</p>
              </div>

              <div class="plan-toolbar">
                <div class="plan-toolbar-meta">
                  <span class="plan-toolbar-eyebrow">当前编辑</span>
                  <strong>{{ currentNode.name || '未命名菜单' }}</strong>
                </div>
                <a-space wrap>
                  <a-button @click="openAddChild">新增子菜单</a-button>
                  <a-button @click="toggleVisible">{{ form.visible === 1 ? '隐藏菜单' : '显示菜单' }}</a-button>
                  <a-button @click="toggleStatus">{{ form.status === 1 ? '停用菜单' : '启用菜单' }}</a-button>
                  <a-popconfirm title="确认删除当前菜单？" @confirm="handleDelete">
                    <a-button danger>删除菜单</a-button>
                  </a-popconfirm>
                </a-space>
                <div class="plan-toolbar-submit">
                  <span class="plan-toolbar-tip">保存后重新登录即可看到侧边栏变化</span>
                  <a-button type="primary" class="plan-save-button" :loading="saving" @click="handleSave">保存菜单</a-button>
                </div>
              </div>
            </div>

            <div class="plan-content-body">
              <a-form :model="form" layout="vertical">
                <div class="plan-section">
                  <div class="plan-section-head">
                    <div class="plan-section-chip">基础</div>
                    <div class="soft-section-header">
                      <div class="soft-section-heading">
                        <h3 class="soft-section-title">基础信息</h3>
                        <p class="soft-section-subtitle">维护菜单名称、编码和层级关系。</p>
                      </div>
                    </div>
                  </div>
                  <a-row :gutter="16">
                    <a-col :span="12">
                      <a-form-item label="菜单名称">
                        <a-input v-model:value="form.name" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="菜单编码">
                        <a-input v-model:value="form.code" />
                      </a-form-item>
                    </a-col>
                  </a-row>
                  <a-row :gutter="16">
                    <a-col :span="12">
                      <a-form-item label="父级菜单">
                        <a-tree-select
                          v-model:value="form.parentId"
                          :tree-data="parentOptions"
                          :field-names="fieldNames"
                          tree-default-expand-all
                          style="width: 100%"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="排序">
                        <a-input-number v-model:value="form.listOrder" :min="0" style="width: 100%" />
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>

                <div class="plan-section">
                  <div class="plan-section-head">
                    <div class="plan-section-chip">展示</div>
                    <div class="soft-section-header">
                      <div class="soft-section-heading">
                        <h3 class="soft-section-title">路由与展示</h3>
                        <p class="soft-section-subtitle">菜单节点绑定前端路由，目录节点只做分组展示。</p>
                      </div>
                    </div>
                  </div>
                  <a-row :gutter="16">
                    <a-col :span="8">
                      <a-form-item label="类型">
                        <a-select v-model:value="form.type">
                          <a-select-option value="DIR">目录</a-select-option>
                          <a-select-option value="MENU">菜单</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item label="路由路径">
                        <a-input v-model:value="form.path" placeholder="例如 /system/menu" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item label="图标">
                        <a-select v-model:value="form.icon" allow-clear>
                          <a-select-option v-for="icon in iconOptions" :key="icon" :value="icon">{{ icon }}</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                  </a-row>
                  <a-row :gutter="16">
                    <a-col :span="8">
                      <a-form-item label="菜单范围">
                        <a-select v-model:value="form.menuScope">
                          <a-select-option value="PLATFORM">平台</a-select-option>
                          <a-select-option value="SUBSTATION">分站</a-select-option>
                          <a-select-option value="BOTH">通用</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item label="是否显示">
                        <a-switch v-model:checked="visibleChecked" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item label="是否启用">
                        <a-switch v-model:checked="statusChecked" />
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
              </a-form>
            </div>
          </template>

          <a-empty v-else description="请选择左侧菜单或新增根菜单" />
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import { systemMenuApi } from '@/api'

interface MenuNode {
  id: number
  code: string
  name: string
  type: string
  path?: string
  icon?: string
  menuScope: string
  visible: number
  status: number
  listOrder: number
  children: MenuNode[]
}

const fieldNames = { title: 'name', key: 'id', value: 'id', children: 'children' }
const iconOptions = [
  'HomeOutlined',
  'GlobalOutlined',
  'ApartmentOutlined',
  'ShopOutlined',
  'UserOutlined',
  'StarOutlined',
  'UnorderedListOutlined',
  'ControlOutlined',
  'ApiOutlined',
]

const treeData = ref<MenuNode[]>([])
const selectedKeys = ref<number[]>([])
const loading = ref(false)
const saving = ref(false)
const form = reactive({
  id: undefined as number | undefined,
  code: '',
  name: '',
  type: 'MENU',
  path: '',
  icon: '',
  parentId: 0,
  menuScope: 'PLATFORM',
  listOrder: 0,
  visible: 1,
  status: 1,
})

const currentNode = computed(() => findNode(treeData.value, selectedKeys.value[0]))
const parentOptions = computed(() => buildParentOptions(treeData.value, form.id))
const visibleChecked = computed({
  get: () => form.visible === 1,
  set: (val: boolean) => { form.visible = val ? 1 : 0 },
})
const statusChecked = computed({
  get: () => form.status === 1,
  set: (val: boolean) => { form.status = val ? 1 : 0 },
})

function resetForm(parentId = 0) {
  Object.assign(form, {
    id: undefined,
    code: '',
    name: '',
    type: 'MENU',
    path: '',
    icon: '',
    parentId,
    menuScope: 'PLATFORM',
    listOrder: 0,
    visible: 1,
    status: 1,
  })
}

function assignForm(node: MenuNode) {
  Object.assign(form, {
    id: node.id,
    code: node.code,
    name: node.name,
    type: node.type,
    path: node.path || '',
    icon: node.icon || '',
    parentId: findParentId(treeData.value, node.id),
    menuScope: node.menuScope,
    listOrder: node.listOrder || 0,
    visible: node.visible ?? 1,
    status: node.status ?? 1,
  })
}

function handleSelect(keys: (string | number)[]) {
  const id = Number(keys[0])
  if (!id) return
  selectedKeys.value = [id]
  const node = findNode(treeData.value, id)
  if (node) assignForm(node)
}

function openAddRoot() {
  selectedKeys.value = []
  resetForm(0)
}

function openAddChild() {
  const parentId = form.id || selectedKeys.value[0] || 0
  selectedKeys.value = []
  resetForm(parentId)
}

async function loadTree() {
  loading.value = true
  try {
    const res: any = await systemMenuApi.tree()
    treeData.value = Array.isArray(res?.data) ? res.data : []
    if (!selectedKeys.value.length && treeData.value.length) {
      const first = treeData.value[0]
      selectedKeys.value = [first.id]
      assignForm(first)
      return
    }
    if (selectedKeys.value.length) {
      const current = findNode(treeData.value, selectedKeys.value[0])
      if (current) {
        assignForm(current)
      } else if (treeData.value.length) {
        const first = treeData.value[0]
        selectedKeys.value = [first.id]
        assignForm(first)
      }
    }
  } finally {
    loading.value = false
  }
}

async function handleSave() {
  if (!form.name || !form.code) {
    message.error('请填写菜单名称和编码')
    return
  }
  saving.value = true
  try {
    const payload = { ...form }
    if (payload.id) {
      await systemMenuApi.edit(payload)
      message.success('保存成功')
    } else {
      await systemMenuApi.add(payload)
      message.success('新增成功')
    }
    await loadTree()
  } finally {
    saving.value = false
  }
}

async function toggleVisible() {
  if (!form.id) {
    message.warning('请先选择已有菜单')
    return
  }
  await systemMenuApi.setVisible(form.id, form.visible === 1 ? 0 : 1)
  message.success('操作成功')
  await loadTree()
}

async function toggleStatus() {
  if (!form.id) {
    message.warning('请先选择已有菜单')
    return
  }
  await systemMenuApi.setStatus(form.id, form.status === 1 ? 0 : 1)
  message.success('操作成功')
  await loadTree()
}

async function handleDelete() {
  if (!form.id) {
    message.warning('请先选择已有菜单')
    return
  }
  await systemMenuApi.del(form.id)
  message.success('删除成功')
  selectedKeys.value = []
  resetForm(0)
  await loadTree()
}

function findNode(nodes: MenuNode[], id?: number): MenuNode | null {
  if (!id) return null
  for (const node of nodes) {
    if (node.id === id) return node
    const child = findNode(node.children || [], id)
    if (child) return child
  }
  return null
}

function findParentId(nodes: MenuNode[], childId: number, parentId = 0): number {
  for (const node of nodes) {
    if (node.id === childId) return parentId
    if (containsNode(node.children || [], childId)) {
      return findParentId(node.children || [], childId, node.id)
    }
  }
  return 0
}

function containsNode(nodes: MenuNode[], id: number): boolean {
  for (const node of nodes) {
    if (node.id === id) return true
    if (containsNode(node.children || [], id)) return true
  }
  return false
}

function buildParentOptions(nodes: MenuNode[], excludeId?: number): MenuNode[] {
  return nodes
    .filter(node => node.id !== excludeId)
    .map(node => ({
      ...node,
      children: buildParentOptions((node.children || []).filter(child => child.id !== excludeId), excludeId),
    }))
}

loadTree()
</script>

<style scoped>
.dispatch-layout {
  margin-top: 8px;
}

.plan-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  min-height: 640px;
}

.plan-sidebar,
.plan-content {
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 18px;
}

.plan-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.plan-content-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-content-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.plan-sidebar-header,
.plan-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plan-sidebar-title,
.soft-section-title {
  color: var(--text-dark);
  font-family: var(--font-display);
}

.plan-sidebar-title {
  font-size: 16px;
  font-weight: 700;
}

.plan-sidebar-subtitle,
.plan-toolbar-eyebrow,
.plan-toolbar-tip,
.soft-section-subtitle {
  color: var(--text-soft);
  font-size: 12px;
}

.plan-toolbar {
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel-strong);
  box-shadow: var(--shadow-sm);
}

.plan-toolbar-meta,
.plan-toolbar-submit {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.plan-toolbar-meta strong {
  color: var(--text-dark);
  font-size: 15px;
  line-height: 1.4;
}

.plan-toolbar-submit {
  margin-left: auto;
  align-items: flex-end;
}

.plan-save-button {
  min-width: 108px;
  height: 36px;
}

.plan-section {
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel-strong);
}

.plan-section-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.plan-section-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--panel-strong);
  border: 1px solid var(--line-strong);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
}

.soft-section-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
}

.soft-section-subtitle {
  margin: 4px 0 0;
  line-height: 1.6;
}

.menu-tree {
  padding: 8px 0;
}

.plan-content > :deep(.ant-empty) {
  margin: auto 0;
}

@media (max-width: 960px) {
  .plan-layout {
    grid-template-columns: 1fr;
  }

  .plan-toolbar-submit {
    margin-left: 0;
    align-items: flex-start;
  }
}
</style>