vue3.2/Vite/Ts91: 添加、更新和删除菜单
·
Yin灏
目录结构
└─src
├─api
│ └─acl
│ └─menu
│ ├─index.ts
│ └─type.ts
└─views
└─acl
└─permisstion
└─index.vue
页面处理
src/views/acl/permisstion/index.vue
<template>
<el-table row-key="id" border default-expand-all :data="PermisstionArr">
<el-table-column label="名称" prop="name"></el-table-column>
<el-table-column label="权限值" prop="code"></el-table-column>
<el-table-column label="修改时间" prop="updateTime"></el-table-column>
<el-table-column label="操作">
<template #="{row}">
<el-button
type="primary"
size="small"
:disabled="row.level === 4 ? true : false"
@click="addPermisstion(row)"
>{{ row.level === 3 ? '添加功能' : '添加菜单' }}</el-button
>
<el-button
type="primary"
size="small"
:disabled="row.level === 1 ? true : false"
@click="updatePermisstion(row)"
>编辑</el-button
>
<el-popconfirm
:title="`确定要删除${row.name}?`"
width="260px"
@confirm="removeMenu(row.id)"
>
<template #reference>
<el-button
type="primary"
size="small"
:disabled="row.level === 1 ? true : false"
>删除</el-button
>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!-- 对话框组件 -->
<el-dialog
v-model="dialogVisible"
title="menuData.id ? '更新菜单':'新增菜单'"
>
<el-form>
<el-form-item label="名称">
<el-input placeholder="输入菜单名称" v-model="MenuData.name"></el-input>
</el-form-item>
<el-form-item label="权限">
<el-input placeholder="输入权限名称" v-model="MenuData.code"></el-input>
</el-form-item>
</el-form>
<template>
<el-button type="primary" @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="save">确定</el-button>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import { reqAllPermisstion, reqRemoveMenu } from "@/api/acl/menu";
import type {
PermisstionResponseData,
PermisstionList,
Permisstion,
reqAddOrUpdateMenu,
MenuParams,
} from "@/api/acl/menu/type";
let PermisstionArr = ref<PermisstionList>([]);
let dialogVisible = ref<boolean>(false);
let MenuData = reactive<MenuParams>({
code: "",
level: 0,
name: "",
pid: 0,
});
const getHasPermisstion = async () => {
const result: any = await reqAllPermisstion();
if (result.code === 200) {
PermisstionArr.value = result.data;
}
};
const addPermisstion = (row: Permisstion) => {
Object.assign(menuData, {
code: "",
level: 0,
name: "",
pid: 0,
id: 0,
});
dialogVisible.value = true;
MenuData.level = row.level + 1;
MenuData.pid = row.id as number;
};
const updatePermisstion = (row: Permisstion) => {
dialogVisible.value = true;
Object.assign(menuData, row);
};
const save = async () => {
const result: any = await reqAllPermisstion(MenuData);
if (result.code === 200) {
ElMessage({
type: "success",
message: MenuData.id ? "更新成功" : "增加成功",
});
getHasPermisstion();
} else {
ElMessage({
type: "error",
message: MenuData.id ? "更新失败" : "增加失败",
});
}
};
const removeMenu = async (id: number) => {
const result: any = await reqRemoveMenu(id);
if (result.code === 200) {
ElMessage({
type: "success",
message: "删除成功",
});
} else {
ElMessage({
type: "error",
message: "删除失败",
});
}
};
onMounted(() => {
getHasPermisstion();
});
</script>
接口处理
src/api/acl/menu/index.ts
import type { MenuParams } from "./type";
//...
enum API {
//...
ADDMENU_URL = "/admin/acl/permission/save",
UPDATEMENU_URL = "/admin/acl/permission/update",
DELETEMENU_URL = "/admin/acl/permission/remove/",
}
export const reqAddOrUpdateMenu = (data: MenuParams) => {
if (data.id) {
return request.put<any, any>(API.UPDATEMENU_URL, data);
} else {
return request.post<any, any>(API.ADDMENU_URL, data);
}
};
export const reqRemoveMenu = (id: number) =>
request.delete<any, any>(API.DELETEMENU_URL + id);
接口 TS 处理
src/api/acl/menu/type.ts
export interface MenuParams {
id?: number;
code: string;
level: number;
name: string;
pid: number;
}