菜单管理
This commit is contained in:
于晏彭
parent
a74d404154
commit
f7382a44ea
@ -51,8 +51,6 @@ class RequestHttp {
|
||||
this.service.interceptors.response.use(
|
||||
(response: AxiosResponse) => {
|
||||
const { data } = response;
|
||||
console.log(data);
|
||||
|
||||
const globalStore = GlobalStore();
|
||||
// * 在请求结束后，并关闭请求 loading
|
||||
tryHideFullScreenLoading();
|
||||
|
||||
@ -52,6 +52,10 @@ export const getDictionaryList = (params: User.ReqUserParams) => {
|
||||
export const getDictionaryDetail = (params: User.ReqUserParams) => {
|
||||
return http.post<ResPage<User.ResResults>>(PORT1 + `/xmgl/systemDictData/page`, params);
|
||||
};
|
||||
// 查询字典
|
||||
export const getDicList = (params: User.ReqUserParams) => {
|
||||
return http.post<ResPage<User.ResResults>>(PORT1 + `/xmgl/systemDictData/list`, params);
|
||||
};
|
||||
// * 新增用户
|
||||
export const addDictionary = (params: FormData) => {
|
||||
return http.post(PORT1 + `/xmgl/systemDictType/add`, params);
|
||||
@ -111,13 +115,33 @@ export const editMenu = (params: { id: string }) => {
|
||||
};
|
||||
// * 编辑用户
|
||||
export const editMenubase = (params: { id: string }) => {
|
||||
return http.post(PORT1 + `/xmgl/baseModule/edit`, params);
|
||||
return http.post(PORT1 + `/xmgl/baseMenu/edit`, params);
|
||||
};
|
||||
// 最外层的删除
|
||||
export const deleteMunu = (params: { id: number }) => {
|
||||
return http.post(PORT1 + `/xmgl/baseModule/delete`, params);
|
||||
};
|
||||
// 删除系统菜单信息
|
||||
export const deletesysMenu = (params: { menuId: number }) => {
|
||||
return http.post(PORT1 + `/xmgl/baseMenu/delete`, params);
|
||||
};
|
||||
// 菜单管理的表格查询
|
||||
export const menuList = (params: { moduleId: string }) => {
|
||||
return http.post<ResPage<User.ResResults>>(PORT1 + `/xmgl/baseMenu/list`, params);
|
||||
};
|
||||
// 获取菜单下所有操作 点击按钮管理的table
|
||||
export const btnList = (params: { moduleId: string }) => {
|
||||
return http.post<ResPage<User.ResResults>>(PORT1 + `/xmgl/action/list`, params);
|
||||
};
|
||||
// 按钮管理的新增
|
||||
export const addAction = (params: FormData) => {
|
||||
return http.post(PORT1 + `/xmgl/action/add`, params);
|
||||
};
|
||||
// 按钮管理的编辑
|
||||
export const editAction = (params: { actionId: number }) => {
|
||||
return http.post(PORT1 + `/xmgl/action/edit`, params);
|
||||
};
|
||||
// 删除按钮管理
|
||||
export const deleteAction = (params: { actionId: number }) => {
|
||||
return http.post(PORT1 + `/xmgl/action/delete`, params);
|
||||
};
|
||||
|
||||
@ -258,8 +258,9 @@ const typeVisable = async (dictType: string) => {
|
||||
// console.log(111);
|
||||
dialogTableVisible.value = true;
|
||||
form.dictType = dictType;
|
||||
diaTableData.dictType = dictType;
|
||||
const res = await getDiaTabList(diaTableData);
|
||||
console.log(dictType);
|
||||
// console.log(dictType);
|
||||
gridData.value = res.result.records;
|
||||
};
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="table-box">
|
||||
<el-card>
|
||||
<el-select v-model="value" class="m-2" placeholder="Select" size="large">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
|
||||
<el-select v-model="style" class="m-2" placeholder="请选择" @change="onChangeStyle(style)" size="large">
|
||||
<el-option v-for="item in optionStyle" :key="item.value" :label="item.label" :value="item.value"
|
||||
/></el-select>
|
||||
<el-select v-model="value" class="m-2" placeholder="Select" size="large">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
|
||||
<el-select v-model="type" class="m-2" @change="onChangeType(type)" placeholder="请选择" size="large">
|
||||
<el-option v-for="item in optionType" :key="item.value" :label="item.label" :value="item.value"
|
||||
/></el-select>
|
||||
<el-button type="primary" @click="handleAddItem()">新增</el-button>
|
||||
</el-card>
|
||||
@ -45,21 +45,41 @@
|
||||
</template>
|
||||
</ProTable>
|
||||
|
||||
<el-dialog v-model="dialogMenuVisible" title="Shipping address" ref="DialogTable" width="800px" height="800px">
|
||||
<el-button type="primary" style="margin-top: -24px" @click="DiaAddItem(moduleName)">新增</el-button>
|
||||
<el-dialog v-model="dialogMenuVisible" title="菜单管理" append-to-body ref="DialogTable" width="800px" height="800px">
|
||||
<el-button type="primary" style="margin-top: -24px" @click="DiaAddItem(toTag)">新增</el-button>
|
||||
<el-table :data="gridData">
|
||||
<el-table-column property="menuName" label="菜单名称" width="150" />
|
||||
<el-table-column property="path" label="菜单路径" width="200" />
|
||||
<el-table-column property="status" label="状态">
|
||||
<template #default="row">
|
||||
<template #default="{ row }">
|
||||
{{ row.status == 1 ? "启用" : "禁用" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="300" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link :icon="Menu" @click="onBtnManage(scope.row)">按钮管理</el-button>
|
||||
<el-button type="primary" link :icon="EditPen" @click="onEditItem(scope.row)">编辑</el-button>
|
||||
<el-button type="primary" link :icon="Delete" @click="deleteMenu(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 按钮管理 -->
|
||||
<el-dialog v-model="dialogbtnVisible" title="按钮管理" ref="DialogTable" width="40%" height="800px">
|
||||
<el-button type="primary" style="margin-top: -24px" @click="onDiabtnAdd(1, buttonData)">新增</el-button>
|
||||
<el-table :data="buttonData">
|
||||
<el-table-column property="actionName" label="按钮名称" />
|
||||
<el-table-column property="actionCode" label="按钮标识" />
|
||||
<el-table-column property="status" width="100" label="状态">
|
||||
<template #default="{ row }">
|
||||
{{ row.status === 1 ? "启用" : "禁用" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link :icon="Menu" @click="handleEditItem('edit', scope.row)">按钮管理</el-button>
|
||||
<el-button type="primary" link :icon="EditPen" @click="onEditItem(scope.row)">编辑</el-button>
|
||||
<el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
|
||||
<el-button type="primary" link :icon="EditPen" @click="onDiabtnAdd(2, scope.row)">编辑</el-button>
|
||||
<el-button type="primary" link :icon="Delete" @click="onBtnDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -88,7 +108,12 @@
|
||||
<div>
|
||||
<el-form :model="formMenu" label-width="155px">
|
||||
<el-form-item label="所属模块：">
|
||||
<el-input v-model="formMenu.moduleName" placeholder="请输入" />
|
||||
<!-- <el-input v-model="formMenu.moduleName" placeholder="请输入" /> -->
|
||||
<el-select v-model="formMenu.moduleId" class="m-2" placeholder="请选择">
|
||||
<el-option v-for="item in toTag" :key="item.moduleId" :label="item.moduleName" :value="item.moduleId">{{
|
||||
item.moduleName
|
||||
}}</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="父级菜单：">
|
||||
<el-select v-model="formMenu.parentId" class="m-2" placeholder="请选择">
|
||||
@ -118,7 +143,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="优先级：">
|
||||
<el-input v-model="formMenu.priority" placeholder="请输入" />
|
||||
<el-input v-model="formMenu.priority" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数字" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述：">
|
||||
<el-input v-model="formMenu.menuDesc" placeholder="请输入" />
|
||||
@ -132,11 +157,23 @@
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 按钮管理的新增与编辑 -->
|
||||
<DialogForm
|
||||
:title="title"
|
||||
:formConfig="formbtnConfig"
|
||||
:formData="formbtnData"
|
||||
v-model:visible="btnvisible"
|
||||
append-to-body
|
||||
width="34%"
|
||||
@confirm="onbtnSave"
|
||||
>
|
||||
</DialogForm>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx" name="jxjSystem">
|
||||
import { ref, reactive } from "vue";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
import { User } from "@/api/interface";
|
||||
@ -145,19 +182,51 @@ import { useHandleData } from "@/hooks/useHandleData";
|
||||
import ProTable from "@/components/ProTable/index.vue";
|
||||
import DialogForm from "@/components/DialogForm/index.vue";
|
||||
import { CirclePlus, Delete, EditPen, Menu, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
|
||||
import { getMenuList, deleteMunu, editMenu, addMenu, menuList, addMenubase, editMenubase } from "@/api/modules/jxjview";
|
||||
import {
|
||||
getMenuList,
|
||||
deleteMunu,
|
||||
editMenu,
|
||||
addMenu,
|
||||
menuList,
|
||||
addMenubase,
|
||||
editMenubase,
|
||||
deletesysMenu,
|
||||
btnList,
|
||||
addAction,
|
||||
editAction,
|
||||
deleteAction,
|
||||
getDicList
|
||||
} from "@/api/modules/jxjview";
|
||||
|
||||
const router = useRouter();
|
||||
const value = ref("");
|
||||
const type = ref("");
|
||||
const style = ref("");
|
||||
// 页面新增和编辑
|
||||
const visible = ref(false);
|
||||
const dialogMenuVisible = ref(false);
|
||||
const addOrEditDialogVisibleMenu = ref(false);
|
||||
const moduleName = ref("");
|
||||
const dialogbtnVisible = ref(false);
|
||||
// 按钮管理的新增编辑弹窗
|
||||
const btnvisible = ref(false);
|
||||
// const moduleName = ref("");
|
||||
const fatherNameTo = ref([]);
|
||||
const toTag = ref([{ moduleName: "", moduleId: "" }]);
|
||||
const title = ref("");
|
||||
const formData = ref({});
|
||||
// 获取字典风格
|
||||
const diaTableData = reactive({
|
||||
dictType: "module_style_type"
|
||||
});
|
||||
// 获取字典类型
|
||||
const diaTableType = reactive({
|
||||
dictType: "module_type"
|
||||
});
|
||||
const formbtnData = ref({
|
||||
actionName: "",
|
||||
actionCode: "",
|
||||
status: "",
|
||||
menuId: ""
|
||||
});
|
||||
const formMenu = ref({
|
||||
moduleId: "",
|
||||
parentId: "",
|
||||
@ -168,10 +237,13 @@ const formMenu = ref({
|
||||
status: "",
|
||||
target: "",
|
||||
priority: "",
|
||||
menuDesc: "",
|
||||
moduleName
|
||||
menuDesc: ""
|
||||
});
|
||||
|
||||
// 获取字典风格
|
||||
const optionStyle = ref([]);
|
||||
// 获取字典类型
|
||||
const optionType = ref([]);
|
||||
const menuStatusSel = reactive([
|
||||
{ status: 0, label: "禁用" },
|
||||
{ status: 1, label: "启用" }
|
||||
@ -182,8 +254,11 @@ const menuTargetSel = reactive([
|
||||
]);
|
||||
const mode = ref("");
|
||||
const gridData = ref([]);
|
||||
const buttonData = ref([]);
|
||||
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
|
||||
const proTable = ref();
|
||||
const DialogTable = ref();
|
||||
const btnmenuId = ref("");
|
||||
// 添加数据按钮
|
||||
const handleAddItem = () => {
|
||||
mode.value = "add";
|
||||
@ -200,72 +275,53 @@ function handleEditItem(index: string, row: any) {
|
||||
formData.value = reactive(row);
|
||||
}
|
||||
|
||||
// 按钮管理的新增
|
||||
const onDiabtnAdd = (index, row) => {
|
||||
if (index === 1) {
|
||||
formbtnData.value = reactive({ actionName: "", actionCode: "", status: "", menuId: "" });
|
||||
btnvisible.value = true;
|
||||
title.value = "新增按钮";
|
||||
formbtnData.value.menuId = btnmenuId.value;
|
||||
} else {
|
||||
btnvisible.value = true;
|
||||
title.value = "编辑按钮";
|
||||
formbtnData.value = reactive({ ...row });
|
||||
}
|
||||
};
|
||||
|
||||
const DiaAddItem = async (val: any) => {
|
||||
formMenu.value = reactive({});
|
||||
addOrEditDialogVisibleMenu.value = true;
|
||||
title.value = "新增菜单";
|
||||
formMenu.value = reactive({});
|
||||
console.log(val);
|
||||
|
||||
// toTag.value = [{ moduleName: val.moduleName, moduleId: val.moduleId }];
|
||||
// console.log(toTag.value);
|
||||
// moduleNameTo.value = val.moduleName;
|
||||
|
||||
// fatherNameTo.value = gridData.value;
|
||||
// fatherNameTo.value.push({ menuId: 0, menuName: "不选" });
|
||||
// form = reactive({});
|
||||
// console.log(dictType);
|
||||
};
|
||||
const onEditItem = async (row: any) => {
|
||||
addOrEditDialogVisibleMenu.value = true;
|
||||
title.value = "编辑菜单";
|
||||
formMenu.value = reactive({ row });
|
||||
// console.log(val);
|
||||
|
||||
// toTag.value = [{ moduleName: val.moduleName, moduleId: val.moduleId }];
|
||||
// console.log(toTag.value);
|
||||
// moduleNameTo.value = val.moduleName;
|
||||
|
||||
// fatherNameTo.value = gridData.value;
|
||||
// fatherNameTo.value.push({ menuId: 0, menuName: "不选" });
|
||||
// form = reactive({});
|
||||
// console.log(dictType);
|
||||
formMenu.value = reactive({ ...row });
|
||||
};
|
||||
|
||||
// 菜单管理的点击
|
||||
const onmenuManage = async (row: any) => {
|
||||
title.value = "菜单管理";
|
||||
dialogMenuVisible.value = true;
|
||||
moduleName.value = row.moduleName;
|
||||
const res = await menuList({ moduleId: row.moduleId });
|
||||
toTag.value = [{ moduleName: row.moduleName, moduleId: row.moduleId }];
|
||||
const res = await getMenuTabList({ moduleId: row.moduleId });
|
||||
gridData.value = res.result;
|
||||
fatherNameTo.value = res.result;
|
||||
fatherNameTo.value = res.result.filter(i => {
|
||||
return {
|
||||
menuName: i.menuName
|
||||
};
|
||||
});
|
||||
|
||||
// form = reactive({});
|
||||
// console.log(res.result);
|
||||
fatherNameTo.value.push({ menuId: 0, menuName: "不选" });
|
||||
};
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: "Option1",
|
||||
label: "Option1"
|
||||
},
|
||||
{
|
||||
value: "Option2",
|
||||
label: "Option2"
|
||||
},
|
||||
{
|
||||
value: "Option3",
|
||||
label: "Option3"
|
||||
},
|
||||
{
|
||||
value: "Option4",
|
||||
label: "Option4"
|
||||
},
|
||||
{
|
||||
value: "Option5",
|
||||
label: "Option5"
|
||||
}
|
||||
];
|
||||
// 菜单管理的表格
|
||||
const getMenuTabList = async (params: any) => {
|
||||
const res = await menuList(params);
|
||||
gridData.value = res.result;
|
||||
return menuList(params);
|
||||
};
|
||||
|
||||
// 表格配置项
|
||||
const columns: ColumnProps[] = [
|
||||
@ -361,9 +417,51 @@ const formConfig = {
|
||||
}
|
||||
};
|
||||
|
||||
// 按钮管理的新增与编辑
|
||||
const formbtnConfig = {
|
||||
formItemConfig: [
|
||||
{
|
||||
label: "按钮名称",
|
||||
prop: "actionName",
|
||||
type: "input"
|
||||
},
|
||||
{
|
||||
label: "按钮标识",
|
||||
prop: "actionCode",
|
||||
type: "input"
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
type: "select",
|
||||
data: [
|
||||
{ label: "启用", value: 1 },
|
||||
{ label: "禁用", value: 0 }
|
||||
]
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
actionName: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入按钮名称",
|
||||
trigger: "blur"
|
||||
}
|
||||
],
|
||||
actionCode: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入按钮标识",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
|
||||
const initParam = reactive({
|
||||
type: 1
|
||||
moduleType: "",
|
||||
styleType: ""
|
||||
});
|
||||
|
||||
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
|
||||
@ -382,13 +480,13 @@ const dataCallback = (data: any) => {
|
||||
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getMenuList"
|
||||
const getTableList = (params: any) => {
|
||||
let newParams = JSON.parse(JSON.stringify(params));
|
||||
|
||||
return getMenuList(newParams);
|
||||
};
|
||||
|
||||
// 新增，编辑数据
|
||||
// 页面新增，编辑数据
|
||||
const saveItem = async (form: any) => {
|
||||
if (form.moduleId) {
|
||||
// console.log(form.configId);
|
||||
const res = await editMenu(form);
|
||||
proTable.value.getTableList();
|
||||
ElMessage.success("编辑成功");
|
||||
@ -399,20 +497,49 @@ const saveItem = async (form: any) => {
|
||||
}
|
||||
visible.value = false;
|
||||
};
|
||||
// 按钮管理的新增与编辑提交
|
||||
const onbtnSave = async (form: any) => {
|
||||
if (form.actionId) {
|
||||
const res = await editAction(form);
|
||||
ElMessage.success("编辑成功");
|
||||
} else {
|
||||
const res = await addAction(formbtnData.value);
|
||||
ElMessage.success("新增成功");
|
||||
}
|
||||
btnvisible.value = false;
|
||||
getBtnTabList({ menuId: form.menuId });
|
||||
};
|
||||
|
||||
// 新增，编辑数据
|
||||
// 菜单新增，编辑数据
|
||||
const onSubmitMenu = async (form: any) => {
|
||||
if (form.menuId) {
|
||||
// console.log(form.configId);
|
||||
const res = await editMenubase(form);
|
||||
proTable.value.getTableList();
|
||||
ElMessage.success("编辑成功");
|
||||
} else {
|
||||
const res = await addMenubase(form);
|
||||
ElMessage.success("新增成功");
|
||||
proTable.value.getTableList();
|
||||
}
|
||||
visible.value = false;
|
||||
addOrEditDialogVisibleMenu.value = false;
|
||||
getMenuTabList({ moduleId: form.moduleId });
|
||||
};
|
||||
|
||||
// 页面下拉框获取
|
||||
const getDiaTabList = async (params: any) => {
|
||||
await getDicList(params);
|
||||
return getDicList(params);
|
||||
};
|
||||
|
||||
const getBtnTabList = async (params: any) => {
|
||||
const res = await btnList(params);
|
||||
buttonData.value = res.result;
|
||||
return btnList(params);
|
||||
};
|
||||
|
||||
// 按钮管理的点击
|
||||
const onBtnManage = async (row: any) => {
|
||||
dialogbtnVisible.value = true;
|
||||
btnmenuId.value = row?.menuId;
|
||||
await getBtnTabList({ menuId: row.menuId });
|
||||
};
|
||||
|
||||
// 删除用户信息
|
||||
@ -420,4 +547,40 @@ const deleteAccount = async (params: User.ResUserList) => {
|
||||
await useHandleData(deleteMunu, { id: params.moduleId }, `删除【${params.username}】用户`);
|
||||
proTable.value.getTableList();
|
||||
};
|
||||
// 删除系统菜单信息
|
||||
const deleteMenu = async (params: User.ResUserList) => {
|
||||
await useHandleData(deletesysMenu, { menuId: params.menuId }, `删除【${params.username}】用户`);
|
||||
await menuList({ moduleId: params.moduleId });
|
||||
};
|
||||
// 删除按钮信息
|
||||
const onBtnDelete = async (params: User.ResUserList) => {
|
||||
await useHandleData(deleteAction, { actionId: params.actionId }, `删除【${params.username}】用户`);
|
||||
getBtnTabList({ menuId: params.menuId });
|
||||
};
|
||||
|
||||
const onChangeStyle = async (val: number) => {
|
||||
initParam.styleType = val;
|
||||
proTable.value.getTableList();
|
||||
};
|
||||
const onChangeType = async (val: number) => {
|
||||
initParam.moduleType = val;
|
||||
proTable.value.getTableList();
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await getDiaTabList(diaTableData);
|
||||
optionStyle.value = res.result.map(i => {
|
||||
return {
|
||||
label: i.dictValue,
|
||||
value: i.dictLabel
|
||||
};
|
||||
});
|
||||
const res1 = await getDiaTabList(diaTableType);
|
||||
optionType.value = res1.result.map(i => {
|
||||
return {
|
||||
label: i.dictValue,
|
||||
value: i.dictLabel
|
||||
};
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user