first commit
This commit is contained in:
@@ -0,0 +1,163 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue';
|
||||
import request from '../../../utils/request';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
|
||||
const list = ref([]);
|
||||
const loading = ref(false);
|
||||
const dialogVisible = ref(false);
|
||||
const dialogTitle = ref('新增菜单');
|
||||
const isEdit = ref(false);
|
||||
const editId = ref(null);
|
||||
const form = reactive({ name: '', iconSvg: '', menuType: 2, parentId: 0, sortOrder: 0 });
|
||||
|
||||
const menuTypeMap = { 0: '默认', 1: '分组', 2: '页面' };
|
||||
|
||||
// 扁平化树形菜单(用于父菜单选择)
|
||||
const flatMenus = computed(() => {
|
||||
const result = [];
|
||||
const walk = (items) => {
|
||||
items.forEach((i) => {
|
||||
result.push(i);
|
||||
if (i.items && i.items.length) walk(i.items);
|
||||
});
|
||||
};
|
||||
walk(list.value);
|
||||
return result;
|
||||
});
|
||||
|
||||
async function loadList() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await request.get('/sys/menu/tree');
|
||||
list.value = res.data;
|
||||
} finally { loading.value = false; }
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
isEdit.value = false;
|
||||
dialogTitle.value = '新增菜单';
|
||||
Object.assign(form, { name: '', iconSvg: '', menuType: 2, parentId: 0, sortOrder: 0 });
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
function openEdit(row) {
|
||||
isEdit.value = true;
|
||||
editId.value = row.id;
|
||||
dialogTitle.value = '编辑菜单';
|
||||
Object.assign(form, {
|
||||
name: row.name, iconSvg: row.iconSvg, menuType: menuTypeValue(row.menuType),
|
||||
parentId: row.parentId, sortOrder: row.sortOrder
|
||||
});
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
function menuTypeValue(t) {
|
||||
if (t === '分组') return 1;
|
||||
if (t === '页面') return 2;
|
||||
return 0;
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!form.name) { ElMessage.warning('请填写菜单名称'); return; }
|
||||
try {
|
||||
if (isEdit.value) {
|
||||
await request.put(`/sys/menu/${editId.value}`, { ...form, assemblyName: '', typeFullName: '' });
|
||||
ElMessage.success('更新成功');
|
||||
} else {
|
||||
await request.post('/sys/menu', { ...form, assemblyName: '', typeFullName: '' });
|
||||
ElMessage.success('创建成功');
|
||||
}
|
||||
dialogVisible.value = false;
|
||||
loadList();
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
await ElMessageBox.confirm(`确定删除菜单「${row.name}」吗?`, '提示', { type: 'warning' });
|
||||
try {
|
||||
await request.delete(`/sys/menu/${row.id}`);
|
||||
ElMessage.success('删除成功');
|
||||
loadList();
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
async function handleActive(row) {
|
||||
try {
|
||||
await request.put(`/sys/menu/${row.id}/active`, { active: row.isActive !== '启用' });
|
||||
ElMessage.success('操作成功');
|
||||
loadList();
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
onMounted(loadList);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>菜单管理</span>
|
||||
<el-button type="primary" @click="openCreate">新增菜单</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="list" border stripe row-key="id" default-expand-all>
|
||||
<el-table-column prop="name" label="名称" width="200" />
|
||||
<el-table-column prop="code" label="编码" width="180" />
|
||||
<el-table-column label="类型" width="90">
|
||||
<template #default="{ row }">{{ row.menuType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="iconSvg" label="图标" width="100" />
|
||||
<el-table-column prop="parentName" label="上级" width="140" />
|
||||
<el-table-column prop="level" label="层级" width="70" />
|
||||
<el-table-column prop="sortOrder" label="排序" width="80" />
|
||||
<el-table-column label="状态" width="80">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.isActive === '启用' ? 'success' : 'danger'">{{ row.isActive }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="primary" @click="openEdit(row)">编辑</el-button>
|
||||
<el-button size="small" :type="row.isActive === '启用' ? 'warning' : 'success'" @click="handleActive(row)">
|
||||
{{ row.isActive === '启用' ? '禁用' : '启用' }}
|
||||
</el-button>
|
||||
<el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="450px">
|
||||
<el-form :model="form" label-width="80px">
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="form.name" placeholder="菜单名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="图标">
|
||||
<el-input v-model="form.iconSvg" placeholder="Element Plus 图标名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型">
|
||||
<el-select v-model="form.menuType" style="width: 100%">
|
||||
<el-option v-for="(v, k) in menuTypeMap" :key="k" :label="v" :value="Number(k)" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="上级">
|
||||
<el-select v-model="form.parentId" clearable placeholder="无上级" style="width: 100%">
|
||||
<el-option v-for="m in flatMenus" :key="m.id" :label="m.name" :value="m.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序">
|
||||
<el-input-number v-model="form.sortOrder" :min="0" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSave">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card-header { display: flex; justify-content: space-between; align-items: center; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user