create-koa-boot 1.0.0

package/templates/example/frontend/src/views/system/menu/index.vue

@@ -0,0 +1,509 @@
+<template>
+  <div class="menu-management">
+    <el-card shadow="hover">
+      <template #header>
+        <div class="card-header">
+          <span>菜单管理</span>
+          <div>
+            <el-button type="primary" @click="handleAddRoot">
+              <el-icon><Plus /></el-icon>
+              新增菜单
+            </el-button>
+            <el-button @click="handleToggleExpandAll">
+              <el-icon><Sort /></el-icon>
+              {{ expandAll ? '全部折叠' : '全部展开' }}
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+      <!-- 菜单树表格 -->
+      <el-table
+        v-loading="loading"
+        :data="menuTableData"
+        row-key="id"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        :default-expand-all="expandAll"
+        border
+        stripe
+        highlight-current-row
+      >
+        <el-table-column label="菜单名称" min-width="200" prop="name">
+          <template #default="scope">
+            <el-icon v-if="scope.row.icon" style="margin-right: 6px; vertical-align: middle">
+              <component :is="scope.row.icon" />
+            </el-icon>
+            <span>{{ scope.row.name }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="类型" align="center" width="90">
+          <template #default="scope">
+            <el-tag v-if="scope.row.type === 'directory'" type="warning" size="small">目录</el-tag>
+            <el-tag v-else-if="scope.row.type === 'menu'" type="success" size="small">菜单</el-tag>
+            <el-tag v-else-if="scope.row.type === 'button'" type="danger" size="small">按钮</el-tag>
+            <el-tag v-else type="info" size="small">{{ scope.row.type }}</el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="编码" align="left" width="160" prop="code" />
+
+        <el-table-column label="路由路径" align="left" width="170" prop="path" />
+
+        <el-table-column label="组件路径" align="left" width="200" prop="component">
+          <template #default="scope">
+            <span v-if="scope.row.component">{{ scope.row.component }}</span>
+            <span v-else style="color: #c0c4cc">—</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="排序" align="center" width="70" prop="sort" />
+
+        <el-table-column label="可见" align="center" width="70">
+          <template #default="scope">
+            <el-tag :type="scope.row.visible ? 'success' : 'info'" size="small">
+              {{ scope.row.visible ? '显示' : '隐藏' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="状态" align="center" width="80">
+          <template #default="scope">
+            <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'" size="small">
+              {{ scope.row.status === 'active' ? '启用' : '禁用' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" align="center" width="260" fixed="right">
+          <template #default="scope">
+            <el-button
+              v-if="scope.row.type === 'directory'"
+              type="success"
+              link
+              size="small"
+              @click.stop="handleAddChild(scope.row)"
+            >
+              <el-icon><Plus /></el-icon>
+              新增子菜单
+            </el-button>
+            <el-button
+              type="primary"
+              link
+              size="small"
+              @click.stop="handleEdit(scope.row)"
+            >
+              <el-icon><Edit /></el-icon>
+              编辑
+            </el-button>
+            <el-button
+              type="danger"
+              link
+              size="small"
+              @click.stop="handleDelete(scope.row)"
+            >
+              <el-icon><Delete /></el-icon>
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <!-- 新增/编辑抽屉 -->
+    <el-drawer
+      v-model="dialog.visible"
+      :title="dialog.title"
+      direction="rtl"
+      size="580px"
+      @close="handleCloseDialog"
+    >
+      <el-form
+        ref="menuFormRef"
+        :model="formData"
+        :rules="rules"
+        label-width="100px"
+        label-position="right"
+      >
+        <el-form-item label="父级菜单" prop="parentId">
+          <el-tree-select
+            v-model="formData.parentId"
+            placeholder="顶级菜单（不选则为一级菜单）"
+            :data="menuOptions"
+            :props="{ label: 'name', value: 'id', children: 'children' }"
+            filterable
+            check-strictly
+            clearable
+            style="width: 100%"
+          />
+        </el-form-item>
+
+        <el-form-item label="菜单名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入菜单名称" maxlength="100" show-word-limit />
+        </el-form-item>
+
+        <el-form-item label="菜单编码" prop="code">
+          <el-input v-model="formData.code" placeholder="唯一编码，如 system:user" maxlength="100" show-word-limit />
+        </el-form-item>
+
+        <el-form-item label="菜单类型" prop="type">
+          <el-radio-group v-model="formData.type" @change="handleTypeChange">
+            <el-radio value="directory">目录</el-radio>
+            <el-radio value="menu">菜单</el-radio>
+            <el-radio value="button">按钮</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item v-if="formData.type !== 'button'" label="图标" prop="icon">
+          <el-input v-model="formData.icon" placeholder="Element Plus 图标名，如 Setting、House" maxlength="100" clearable>
+            <template #prepend>
+              <el-icon v-if="formData.icon"><component :is="formData.icon" /></el-icon>
+              <span v-else>—</span>
+            </template>
+          </el-input>
+          <div class="form-tip">输入 Element Plus 图标组件名（PascalCase），例如：Setting、User、House</div>
+        </el-form-item>
+
+        <el-form-item v-if="formData.type !== 'button'" label="路由路径" prop="path">
+          <el-input v-model="formData.path" placeholder="如 /system/user" maxlength="255" clearable />
+        </el-form-item>
+
+        <el-form-item v-if="formData.type === 'menu'" label="组件路径" prop="component">
+          <el-input v-model="formData.component" placeholder="如 system/user/index" maxlength="255" clearable />
+        </el-form-item>
+
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="formData.sort" :min="0" controls-position="right" style="width: 120px" />
+        </el-form-item>
+
+        <el-form-item label="是否可见" prop="visible">
+          <el-switch
+            v-model="formData.visible"
+            active-text="显示"
+            inactive-text="隐藏"
+            :active-value="true"
+            :inactive-value="false"
+          />
+        </el-form-item>
+
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="formData.status">
+            <el-radio value="active">启用</el-radio>
+            <el-radio value="inactive">禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="drawer-footer">
+          <el-button @click="handleCloseDialog">取 消</el-button>
+          <el-button type="primary" @click="submitForm" :loading="submitting">确 定</el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, nextTick } from 'vue'
+import {
+  getMenuTree,
+  getMenuList,
+  getMenuDetail,
+  createMenu,
+  updateMenu,
+  deleteMenu
+} from '../../../api/system/menu'
+import type { MenuInfo } from '../../../api/system/menu'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+
+// 加载状态
+const loading = ref(false)
+const submitting = ref(false)
+const expandAll = ref(true)
+
+// 菜单数据
+const menuTableData = ref<MenuInfo[]>([])
+// 菜单选项（用于父级菜单选择）
+const menuOptions = ref<MenuInfo[]>([])
+
+// 对话框
+const dialog = reactive({
+  title: '新增菜单',
+  visible: false
+})
+
+// 表单数据
+const formData = reactive<Partial<MenuInfo>>({
+  parentId: null,
+  name: '',
+  code: '',
+  type: 'menu',
+  path: null,
+  component: null,
+  icon: null,
+  sort: 0,
+  visible: true,
+  status: 'active'
+})
+
+// 是否为编辑模式
+const isEdit = ref(false)
+const editingId = ref<string | null>(null)
+
+// 表单引用
+const menuFormRef = ref<FormInstance>()
+
+// 验证规则
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
+  code: [{ required: true, message: '请输入菜单编码', trigger: 'blur' }],
+  type: [{ required: true, message: '请选择菜单类型', trigger: 'change' }],
+  path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
+  sort: [{ required: true, message: '请输入排序号', trigger: 'blur' }]
+})
+
+// 获取菜单数据
+async function fetchMenus() {
+  loading.value = true
+  try {
+    const res = await getMenuTree()
+    menuTableData.value = res.data.data || []
+    // 同时更新选项数据
+    const listRes = await getMenuList()
+    menuOptions.value = listRes.data.data || []
+  } catch (error) {
+    console.error('获取菜单失败:', error)
+    ElMessage.error('获取菜单数据失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 添加顶级菜单
+function handleAddRoot() {
+  resetForm()
+  dialog.title = '新增菜单'
+  isEdit.value = false
+  editingId.value = null
+  dialog.visible = true
+}
+
+// 添加子菜单
+function handleAddChild(parent: MenuInfo) {
+  resetForm()
+  formData.parentId = parent.id
+  formData.type = 'menu'
+  dialog.title = `新增子菜单（父级：${parent.name}）`
+  isEdit.value = false
+  editingId.value = null
+  dialog.visible = true
+}
+
+// 编辑菜单
+async function handleEdit(row: MenuInfo) {
+  try {
+    const res = await getMenuDetail(row.id)
+    const menu = res.data.data
+    Object.assign(formData, {
+      parentId: menu.parentId,
+      name: menu.name,
+      code: menu.code,
+      type: menu.type,
+      path: menu.path,
+      component: menu.component,
+      icon: menu.icon,
+      sort: menu.sort,
+      visible: menu.visible,
+      status: menu.status
+    })
+    dialog.title = '编辑菜单'
+    isEdit.value = true
+    editingId.value = row.id
+    dialog.visible = true
+  } catch (error) {
+    console.error('获取菜单详情失败:', error)
+    ElMessage.error('获取菜单详情失败')
+  }
+}
+
+// 删除菜单
+function handleDelete(row: MenuInfo) {
+  const hasChildren = row.children && row.children.length > 0
+  const message = hasChildren
+    ? `菜单「${row.name}」下有子菜单，无法删除`
+    : `确认删除菜单「${row.name}」吗？删除后不可恢复。`
+
+  if (hasChildren) {
+    ElMessage.warning(message)
+    return
+  }
+
+  ElMessageBox.confirm(message, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    try {
+      await deleteMenu(row.id)
+      ElMessage.success('删除成功')
+      fetchMenus()
+    } catch (error) {
+      console.error('删除失败:', error)
+      ElMessage.error('删除失败，请检查该菜单是否被其他数据引用')
+    }
+  }).catch(() => {
+    ElMessage.info('已取消删除')
+  })
+}
+
+// 菜单类型切换
+function handleTypeChange() {
+  // 切换类型时清空不需要的字段
+  if (formData.type === 'button') {
+    formData.path = null
+    formData.icon = null
+  }
+}
+
+// 提交表单
+async function submitForm() {
+  if (!menuFormRef.value) return
+
+  await menuFormRef.value.validate(async (valid) => {
+    if (!valid) return
+
+    submitting.value = true
+    try {
+      // 构建提交数据，排除不应该出现在某些类型中的字段
+      const submitData: any = {
+        name: formData.name,
+        code: formData.code,
+        type: formData.type,
+        parentId: formData.parentId || undefined,
+        sort: formData.sort,
+        visible: formData.visible,
+        status: formData.status
+      }
+
+      if (formData.type === 'button') {
+        // 按钮类型不需要 path/component/icon
+        submitData.path = null
+        submitData.component = null
+        submitData.icon = null
+      } else {
+        submitData.path = formData.path || null
+        submitData.icon = formData.icon || null
+        if (formData.type === 'menu') {
+          submitData.component = formData.component || null
+        }
+      }
+
+      if (isEdit.value && editingId.value) {
+        await updateMenu(editingId.value, submitData)
+        ElMessage.success('修改成功')
+      } else {
+        await createMenu(submitData)
+        ElMessage.success('新增成功')
+      }
+
+      handleCloseDialog()
+      fetchMenus()
+    } catch (error: any) {
+      console.error('提交失败:', error)
+      const msg = error?.response?.data?.message || error?.message || '操作失败'
+      ElMessage.error(msg)
+    } finally {
+      submitting.value = false
+    }
+  })
+}
+
+// 折叠/展开切换
+function handleToggleExpandAll() {
+  expandAll.value = !expandAll.value
+  // 手动控制表格行展开
+  nextTick(() => {
+    const rows = document.querySelectorAll('.el-table__row')
+    rows.forEach((row: any) => {
+      const expandBtn = row.querySelector('.el-table__expand-icon')
+      if (expandBtn) {
+        if (expandAll.value) {
+          if (!expandBtn.classList.contains('el-table__expand-icon--expanded')) {
+            ;(expandBtn as HTMLElement).click()
+          }
+        } else {
+          if (expandBtn.classList.contains('el-table__expand-icon--expanded')) {
+            ;(expandBtn as HTMLElement).click()
+          }
+        }
+      }
+    })
+  })
+}
+
+// 重置表单
+function resetForm() {
+  Object.assign(formData, {
+    parentId: null,
+    name: '',
+    code: '',
+    type: 'menu',
+    path: null,
+    component: null,
+    icon: null,
+    sort: 0,
+    visible: true,
+    status: 'active'
+  })
+  menuFormRef.value?.resetFields()
+  menuFormRef.value?.clearValidate()
+}
+
+// 关闭弹窗
+function handleCloseDialog() {
+  dialog.visible = false
+  resetForm()
+  isEdit.value = false
+  editingId.value = null
+}
+
+onMounted(() => {
+  fetchMenus()
+})
+</script>
+
+<style scoped>
+.menu-management {
+  padding: 0;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-header > div {
+  display: flex;
+  gap: 10px;
+}
+
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.form-tip {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+  line-height: 1.4;
+}
+
+:deep(.el-drawer__body) {
+  padding: 20px 30px;
+}
+</style>