Skip to content

B
BI管理后台
Commit 8c2efea8 authored by 孙浩然's avatar 孙浩然
Browse files
Options

移动端后台维护

parent dd2396a7
Hide whitespace changes
Inline Side-by-side
Showing with 179 additions and 101 deletions
src/views/mobile/index.vue
View file @ 8c2efea8
<template>
<ele-loading :loading="pageLoading" class="h-full">
<div class="wrapper">
<div class="wrapper-item">
<vxe-grid ref="xGrid" v-bind="lgridOptions">
<template #left_buttons_slot>
<div class="p-l-4px flex flex-content-start">
<FcCardTip title="主题" />
<el-button type="success" size="small" class="m-l-6px">
添加主题
</el-button>
</div>
</template>
</vxe-grid>
</div>
<div class="wrapper-item">
<vxe-grid ref="xGrid" v-bind="rgridOptions">
<template #right_buttons_slot>
<div class="p-l-4px flex flex-content-start">
<FcCardTip title="菜单维护" />
<el-button class="m-l-4px" type="primary" plain size="small">
收起/展开
</el-button>
</div>
</template>
<!-- 展开插槽 -->
<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 }">
<div class="h-full flex flex-col">
<vxe-grid ref="xGrid" v-bind="gridOptions">
<!-- 操作插槽 -->
<template #toolbar_slot>
<div class="p-l-4px flex flex-content-start">
<FcCardTip title="菜单维护" />
<el-button
class="m-l-4px"
type="primary"
plain
size="small"
@click="toggleExpand"
>
收起/展开
</el-button>
<el-button type="success" size="small" @click="handleAdd"
>添加菜单</el-button
>
</div>
</template>
<!-- 菜单名称 -->
<template #menuName_slot="{ row }">
<div class="menuName_text flex-start-center">
<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 />
</el-icon>
</template>
</vxe-grid>
</div>
</div>
</template>
<!-- 操作 -->
<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>
<!-- 新增/编辑弹窗 -->
<addMenu ref="AddMenuRef" @reload="getMenuList"></addMenu>
</ele-loading>
</template>
......@@ -53,29 +69,20 @@
// tools
import { FcCardTip } from '@fancy-design/coms';
import { CirclePlus } from '@element-plus/icons-vue';
const pageLoading = ref(false);
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>({
round: true,
size: 'mini',
height: '100%',
columns: [
{
field: 'name',
title: '姓名'
}
],
toolbarConfig: {
slots: {
buttons: 'left_buttons_slot'
}
}
onMounted(() => {
getMenuList(); // 获取菜单列表
});
const rgridOptions = reactive<VxeGridProps>({
round: true,
const xGrid = ref();
const pageLoading = ref(false);
const gridOptions = reactive<VxeGridProps>({
border: true,
showHeaderOverflow: true,
showOverflow: true,
......@@ -96,7 +103,7 @@
},
toolbarConfig: {
slots: {
buttons: 'right_buttons_slot'
buttons: 'toolbar_slot'
}
},
expandConfig: {
......@@ -111,23 +118,25 @@
slots: { content: 'expand_slot', default: 'menuName_slot' }
},
{
field: 'url',
field: 'menuUrl',
title: 'URL地址'
},
{
field: '操作',
fixed: 'right',
title: '操作',
width: 200,
slots: { default: 'option_slot' }
}
],
pagerConfig: {
enabled: true,
enabled: false,
pageSize: 10,
pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000]
},
data: [{ menuName: '首页', url: 'www.ce.com' }]
data: []
});
// 展开行配置
const expandGridOptions = reactive<VxeGridProps>({
border: true,
......@@ -152,7 +161,7 @@
title: '菜单名称'
},
{
field: 'url',
field: 'menuUrl',
title: 'URL地址'
},
{
......@@ -160,24 +169,90 @@
fixed: 'right',
title: 'Role',
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>
<style lang="scss" scoped>
.wrapper {
@apply h-full grid gap-x-[6px];
grid-template-columns: 400px 1fr;
&-item {
border-radius: 6px;
border: 1px solid #3352fc;
background-color: #fff;
box-shadow: 0 2px 8px rgba(51, 82, 252, 0.15);
overflow: hidden !important;
.menuName_text {
display: inline-block;
:deep() {
.el-icon {
cursor: pointer;
}
}
}
</style>
src/views/web/components/AddMenu.vue
View file @ 8c2efea8
......@@ -51,15 +51,18 @@
menuId: '', // 菜单ID
isJoint: 0, // 是否需要拼接参数 1拼,0不拼
status: 0, // 状态：0开启，1关闭
sort:0, // 排序
sort: 0 // 排序
});
// 打开
const curInfo = ref<addMenuDto>();
const open = (type: 'add' | 'edit' = 'add', info?: addMenuDto) => {
const open = (type: 'add' | 'edit' = 'add', info?: addMenuDto, menuType) => {
useType.value = type;
form.menuType = menuType;
modalVisible.value = true;
if(info){
getMenuList(); // 获取菜单列表
if (info) {
curInfo.value = info;
Object.assign(form, info);
}
......@@ -73,14 +76,14 @@
open: open as (type: 'add' | 'edit', info?: addThemeDTO) => void
});
onMounted(() => {
getMenuList(); // 获取菜单列表
});
// onMounted(() => {
// getMenuList(); // 获取菜单列表
// });
const menuList = ref([]);
const getMenuList = async () => {
pageLoading.value = true;
let params = {
menuType: '0'
menuType: form.menuType
};
const [err, ret] = await tryit(menuApi.getMenuList)(params);
if (err) {
......
src/views/web/index.vue
View file @ 8c2efea8
......@@ -6,7 +6,13 @@
<template #toolbar_slot>
<div class="p-l-4px flex flex-content-start">
<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 type="success" size="small" @click="handleAdd"
......@@ -73,7 +79,7 @@
getMenuList(); // 获取菜单列表
});
const xGrid = ref()
const xGrid = ref();
const pageLoading = ref(false);
const gridOptions = reactive<VxeGridProps>({
......@@ -128,7 +134,7 @@
pageSize: 10,
pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000]
},
data: [{ menuName: '首页', url: 'www.ce.com' }]
data: []
});
// 展开行配置
......@@ -174,7 +180,7 @@
const getMenuList = async () => {
pageLoading.value = true;
let parmas = {
menuType: '0'
menuType: 0
};
const [err, ret] = await tryit(menuApi.getMenuList)(parmas);
if (err) {
......@@ -192,13 +198,13 @@
const AddMenuRef = ref();
const handleAdd = () => {
AddMenuRef.value.open();
AddMenuRef.value.open('add', null, '0');
};
// 编辑菜单
const handleEdit = (row) => {
row.pid = row.pid == 0 ? '' : row.pid; // pid特殊处理
AddMenuRef.value.open('edit', row); // 传递菜单信息
AddMenuRef.value.open('edit', row, '0'); // 传递菜单信息
};
// 添加子集
......@@ -206,7 +212,7 @@
let obj = {
pid: row.menuId
};
AddMenuRef.value.open('add', obj); // 传递父菜单信息
AddMenuRef.value.open('add', obj, '0'); // 传递父菜单信息
};
// 删除菜单
......@@ -216,7 +222,7 @@
}).then(async (res) => {
let params = {
menuId: row.menuId,
menuType: '0',
menuType: 0,
pid: row.pid
};
const [err, ret] = await tryit(menuApi.delMenu)(params);
......@@ -233,16 +239,10 @@
// 展开/收起
const toggleExpand = () => {
console.log("🚀 ~ handleUnfold ~ xGrid.value:", xGrid.value)
console.log('🚀 ~ handleUnfold ~ xGrid.value:', xGrid.value);
// xGrid.value.setRowExpand();
}
};
</script>
<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