Commit 8c2efea8 authored by 孙浩然's avatar 孙浩然

移动端后台维护

parent dd2396a7
<template> <template>
<ele-loading :loading="pageLoading" class="h-full"> <ele-loading :loading="pageLoading" class="h-full">
<div class="wrapper"> <div class="h-full flex flex-col">
<div class="wrapper-item"> <vxe-grid ref="xGrid" v-bind="gridOptions">
<vxe-grid ref="xGrid" v-bind="lgridOptions"> <!-- 操作插槽 -->
<template #left_buttons_slot> <template #toolbar_slot>
<div class="p-l-4px flex flex-content-start"> <div class="p-l-4px flex flex-content-start">
<FcCardTip title="主题" /> <FcCardTip title="菜单维护" />
<el-button type="success" size="small" class="m-l-6px"> <el-button
添加主题 class="m-l-4px"
</el-button> type="primary"
</div> plain
</template> size="small"
</vxe-grid> @click="toggleExpand"
</div> >
<div class="wrapper-item"> 收起/展开
<vxe-grid ref="xGrid" v-bind="rgridOptions"> </el-button>
<template #right_buttons_slot> <el-button type="success" size="small" @click="handleAdd"
<div class="p-l-4px flex flex-content-start"> >添加菜单</el-button
<FcCardTip title="菜单维护" /> >
<el-button class="m-l-4px" type="primary" plain size="small"> </div>
收起/展开 </template>
</el-button> <!-- 菜单名称 -->
</div> <template #menuName_slot="{ row }">
</template> <div class="menuName_text flex-start-center">
<!-- 展开插槽 -->
<template #expand_slot>
<vxe-grid v-bind="expandGridOptions" />
</template>
<!-- 操作 -->
<template #option_slot>
<el-link type="primary">编辑</el-link>
<el-divider direction="vertical" />
<el-link type="warning">页面预览</el-link>
<el-divider direction="vertical" />
<el-link type="danger">删除</el-link>
</template>
<template #menuName_slot="{ row }">
<span> {{ row.menuName }}</span> <span> {{ row.menuName }}</span>
<el-icon color="#114dfc" size="16px" class="m-l-4px"> <el-icon
color="#114dfc"
size="18px"
class="m-l-4px"
@click="handleAddByNext(row)"
>
<CirclePlus /> <CirclePlus />
</el-icon> </el-icon>
</template> </div>
</vxe-grid> </template>
</div>
<!-- 操作 -->
<template #option_slot="{ row }">
<el-link type="primary" @click="handleEdit(row)">编辑</el-link>
<el-divider direction="vertical" />
<el-link type="warning">页面预览</el-link>
<el-divider direction="vertical" />
<el-link type="danger" @click="handleDelete(row)">删除</el-link>
</template>
<!-- 展开插槽 -->
<template #expand_slot="{ row }">
<vxe-grid v-bind="expandGridOptions" :data="row.menuChildren">
<!-- 操作 -->
<template #option_slot="{ row }">
<el-link type="primary" @click="handleEdit(row)">编辑</el-link>
<el-divider direction="vertical" />
<el-link type="warning">页面预览</el-link>
<el-divider direction="vertical" />
<el-link type="danger" @click="handleDelete(row)">删除</el-link>
</template>
</vxe-grid>
</template>
</vxe-grid>
</div> </div>
<!-- 新增/编辑弹窗 -->
<addMenu ref="AddMenuRef" @reload="getMenuList"></addMenu>
</ele-loading> </ele-loading>
</template> </template>
...@@ -53,29 +69,20 @@ ...@@ -53,29 +69,20 @@
// tools // tools
import { FcCardTip } from '@fancy-design/coms'; import { FcCardTip } from '@fancy-design/coms';
import { CirclePlus } from '@element-plus/icons-vue'; import { CirclePlus } from '@element-plus/icons-vue';
const pageLoading = ref(false);
import { VxeGridProps } from 'vxe-table'; import { VxeGridProps } from 'vxe-table';
import { tryit } from 'radash';
import { EleMessage } from 'ele-admin-plus';
import menuApi from '@/api/menuApi';
import addMenu from '../web/components/AddMenu.vue';
const lgridOptions = reactive<VxeGridProps>({ onMounted(() => {
round: true, getMenuList(); // 获取菜单列表
size: 'mini',
height: '100%',
columns: [
{
field: 'name',
title: '姓名'
}
],
toolbarConfig: {
slots: {
buttons: 'left_buttons_slot'
}
}
}); });
const rgridOptions = reactive<VxeGridProps>({ const xGrid = ref();
round: true,
const pageLoading = ref(false);
const gridOptions = reactive<VxeGridProps>({
border: true, border: true,
showHeaderOverflow: true, showHeaderOverflow: true,
showOverflow: true, showOverflow: true,
...@@ -96,7 +103,7 @@ ...@@ -96,7 +103,7 @@
}, },
toolbarConfig: { toolbarConfig: {
slots: { slots: {
buttons: 'right_buttons_slot' buttons: 'toolbar_slot'
} }
}, },
expandConfig: { expandConfig: {
...@@ -111,23 +118,25 @@ ...@@ -111,23 +118,25 @@
slots: { content: 'expand_slot', default: 'menuName_slot' } slots: { content: 'expand_slot', default: 'menuName_slot' }
}, },
{ {
field: 'url', field: 'menuUrl',
title: 'URL地址' title: 'URL地址'
}, },
{ {
field: '操作', field: '操作',
fixed: 'right', fixed: 'right',
title: '操作', title: '操作',
width: 200,
slots: { default: 'option_slot' } slots: { default: 'option_slot' }
} }
], ],
pagerConfig: { pagerConfig: {
enabled: true, enabled: false,
pageSize: 10, pageSize: 10,
pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000] pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000]
}, },
data: [{ menuName: '首页', url: 'www.ce.com' }] data: []
}); });
// 展开行配置 // 展开行配置
const expandGridOptions = reactive<VxeGridProps>({ const expandGridOptions = reactive<VxeGridProps>({
border: true, border: true,
...@@ -152,7 +161,7 @@ ...@@ -152,7 +161,7 @@
title: '菜单名称' title: '菜单名称'
}, },
{ {
field: 'url', field: 'menuUrl',
title: 'URL地址' title: 'URL地址'
}, },
{ {
...@@ -160,24 +169,90 @@ ...@@ -160,24 +169,90 @@
fixed: 'right', fixed: 'right',
title: 'Role', title: 'Role',
sortable: true, sortable: true,
editRender: { name: 'input', attrs: { placeholder: '请输入角色' } } width: 200,
slots: { default: 'option_slot' }
} }
], ],
data: [{ menuName: '首页', url: 'www.ce.com' }] data: []
}); });
// 获取菜单列表
const getMenuList = async () => {
pageLoading.value = true;
let parmas = {
menuType: 1
};
const [err, ret] = await tryit(menuApi.getMenuList)(parmas);
if (err) {
console.error(err);
return;
}
if (ret?.code === 200) {
gridOptions.data = ret.data;
}
pageLoading.value = false;
};
// 添加菜单
const AddMenuRef = ref();
const handleAdd = () => {
AddMenuRef.value.open('add', null, '1');
};
// 编辑菜单
const handleEdit = (row) => {
row.pid = row.pid == 0 ? '' : row.pid; // pid特殊处理
AddMenuRef.value.open('edit', row, '1'); // 传递菜单信息
};
// 添加子集
const handleAddByNext = (row) => {
let obj = {
pid: row.menuId
};
AddMenuRef.value.open('add', obj, '1'); // 传递父菜单信息
};
// 删除菜单
const handleDelete = async (row) => {
ElMessageBox.confirm(`确定要删除此菜单吗?`, '提示', {
type: 'warning'
}).then(async (res) => {
let params = {
menuId: row.menuId,
menuType: 1,
pid: row.pid
};
const [err, ret] = await tryit(menuApi.delMenu)(params);
if (err) {
console.error(err);
return;
}
if (ret?.code === 200) {
EleMessage.success('删除成功');
getMenuList(); // 重新获取菜单列表
}
});
};
// 展开/收起
const toggleExpand = () => {
console.log('🚀 ~ handleUnfold ~ xGrid.value:', xGrid.value);
// xGrid.value.setRowExpand();
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrapper { .menuName_text {
@apply h-full grid gap-x-[6px]; display: inline-block;
grid-template-columns: 400px 1fr;
:deep() {
&-item { .el-icon {
border-radius: 6px; cursor: pointer;
border: 1px solid #3352fc; }
background-color: #fff;
box-shadow: 0 2px 8px rgba(51, 82, 252, 0.15);
overflow: hidden !important;
} }
} }
</style> </style>
...@@ -51,15 +51,18 @@ ...@@ -51,15 +51,18 @@
menuId: '', // 菜单ID menuId: '', // 菜单ID
isJoint: 0, // 是否需要拼接参数 1拼,0不拼 isJoint: 0, // 是否需要拼接参数 1拼,0不拼
status: 0, // 状态:0开启,1关闭 status: 0, // 状态:0开启,1关闭
sort:0, // 排序 sort: 0 // 排序
}); });
// 打开 // 打开
const curInfo = ref<addMenuDto>(); const curInfo = ref<addMenuDto>();
const open = (type: 'add' | 'edit' = 'add', info?: addMenuDto) => { const open = (type: 'add' | 'edit' = 'add', info?: addMenuDto, menuType) => {
useType.value = type; useType.value = type;
form.menuType = menuType;
modalVisible.value = true; modalVisible.value = true;
if(info){ getMenuList(); // 获取菜单列表
if (info) {
curInfo.value = info; curInfo.value = info;
Object.assign(form, info); Object.assign(form, info);
} }
...@@ -73,14 +76,14 @@ ...@@ -73,14 +76,14 @@
open: open as (type: 'add' | 'edit', info?: addThemeDTO) => void open: open as (type: 'add' | 'edit', info?: addThemeDTO) => void
}); });
onMounted(() => { // onMounted(() => {
getMenuList(); // 获取菜单列表 // getMenuList(); // 获取菜单列表
}); // });
const menuList = ref([]); const menuList = ref([]);
const getMenuList = async () => { const getMenuList = async () => {
pageLoading.value = true; pageLoading.value = true;
let params = { let params = {
menuType: '0' menuType: form.menuType
}; };
const [err, ret] = await tryit(menuApi.getMenuList)(params); const [err, ret] = await tryit(menuApi.getMenuList)(params);
if (err) { if (err) {
......
...@@ -6,7 +6,13 @@ ...@@ -6,7 +6,13 @@
<template #toolbar_slot> <template #toolbar_slot>
<div class="p-l-4px flex flex-content-start"> <div class="p-l-4px flex flex-content-start">
<FcCardTip title="菜单维护" /> <FcCardTip title="菜单维护" />
<el-button class="m-l-4px" type="primary" plain size="small" @click="toggleExpand"> <el-button
class="m-l-4px"
type="primary"
plain
size="small"
@click="toggleExpand"
>
收起/展开 收起/展开
</el-button> </el-button>
<el-button type="success" size="small" @click="handleAdd" <el-button type="success" size="small" @click="handleAdd"
...@@ -73,7 +79,7 @@ ...@@ -73,7 +79,7 @@
getMenuList(); // 获取菜单列表 getMenuList(); // 获取菜单列表
}); });
const xGrid = ref() const xGrid = ref();
const pageLoading = ref(false); const pageLoading = ref(false);
const gridOptions = reactive<VxeGridProps>({ const gridOptions = reactive<VxeGridProps>({
...@@ -128,7 +134,7 @@ ...@@ -128,7 +134,7 @@
pageSize: 10, pageSize: 10,
pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000] pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000]
}, },
data: [{ menuName: '首页', url: 'www.ce.com' }] data: []
}); });
// 展开行配置 // 展开行配置
...@@ -174,7 +180,7 @@ ...@@ -174,7 +180,7 @@
const getMenuList = async () => { const getMenuList = async () => {
pageLoading.value = true; pageLoading.value = true;
let parmas = { let parmas = {
menuType: '0' menuType: 0
}; };
const [err, ret] = await tryit(menuApi.getMenuList)(parmas); const [err, ret] = await tryit(menuApi.getMenuList)(parmas);
if (err) { if (err) {
...@@ -192,13 +198,13 @@ ...@@ -192,13 +198,13 @@
const AddMenuRef = ref(); const AddMenuRef = ref();
const handleAdd = () => { const handleAdd = () => {
AddMenuRef.value.open(); AddMenuRef.value.open('add', null, '0');
}; };
// 编辑菜单 // 编辑菜单
const handleEdit = (row) => { const handleEdit = (row) => {
row.pid = row.pid == 0 ? '' : row.pid; // pid特殊处理 row.pid = row.pid == 0 ? '' : row.pid; // pid特殊处理
AddMenuRef.value.open('edit', row); // 传递菜单信息 AddMenuRef.value.open('edit', row, '0'); // 传递菜单信息
}; };
// 添加子集 // 添加子集
...@@ -206,7 +212,7 @@ ...@@ -206,7 +212,7 @@
let obj = { let obj = {
pid: row.menuId pid: row.menuId
}; };
AddMenuRef.value.open('add', obj); // 传递父菜单信息 AddMenuRef.value.open('add', obj, '0'); // 传递父菜单信息
}; };
// 删除菜单 // 删除菜单
...@@ -216,7 +222,7 @@ ...@@ -216,7 +222,7 @@
}).then(async (res) => { }).then(async (res) => {
let params = { let params = {
menuId: row.menuId, menuId: row.menuId,
menuType: '0', menuType: 0,
pid: row.pid pid: row.pid
}; };
const [err, ret] = await tryit(menuApi.delMenu)(params); const [err, ret] = await tryit(menuApi.delMenu)(params);
...@@ -233,16 +239,10 @@ ...@@ -233,16 +239,10 @@
// 展开/收起 // 展开/收起
const toggleExpand = () => { const toggleExpand = () => {
console.log("🚀 ~ handleUnfold ~ xGrid.value:", xGrid.value) console.log('🚀 ~ handleUnfold ~ xGrid.value:', xGrid.value);
// xGrid.value.setRowExpand(); // xGrid.value.setRowExpand();
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment